58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
|
import { createVNode as _createVNode } from "vue";
|
||
|
|
// Styles
|
||
|
|
import "./VMessages.css";
|
||
|
|
|
||
|
|
// Components
|
||
|
|
import { VSlideYTransition } from "../transitions/index.mjs"; // Composables
|
||
|
|
import { useTextColor } from "../../composables/color.mjs";
|
||
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
||
|
|
import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
|
||
|
|
export const makeVMessagesProps = propsFactory({
|
||
|
|
active: Boolean,
|
||
|
|
color: String,
|
||
|
|
messages: {
|
||
|
|
type: [Array, String],
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
...makeComponentProps(),
|
||
|
|
...makeTransitionProps({
|
||
|
|
transition: {
|
||
|
|
component: VSlideYTransition,
|
||
|
|
leaveAbsolute: true,
|
||
|
|
group: true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, 'VMessages');
|
||
|
|
export const VMessages = genericComponent()({
|
||
|
|
name: 'VMessages',
|
||
|
|
props: makeVMessagesProps(),
|
||
|
|
setup(props, _ref) {
|
||
|
|
let {
|
||
|
|
slots
|
||
|
|
} = _ref;
|
||
|
|
const messages = computed(() => wrapInArray(props.messages));
|
||
|
|
const {
|
||
|
|
textColorClasses,
|
||
|
|
textColorStyles
|
||
|
|
} = useTextColor(computed(() => props.color));
|
||
|
|
useRender(() => _createVNode(MaybeTransition, {
|
||
|
|
"transition": props.transition,
|
||
|
|
"tag": "div",
|
||
|
|
"class": ['v-messages', textColorClasses.value, props.class],
|
||
|
|
"style": [textColorStyles.value, props.style],
|
||
|
|
"role": "alert",
|
||
|
|
"aria-live": "polite"
|
||
|
|
}, {
|
||
|
|
default: () => [props.active && messages.value.map((message, i) => _createVNode("div", {
|
||
|
|
"class": "v-messages__message",
|
||
|
|
"key": `${i}-${messages.value}`
|
||
|
|
}, [slots.message ? slots.message({
|
||
|
|
message
|
||
|
|
}) : message]))]
|
||
|
|
}));
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VMessages.mjs.map
|