12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- 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
|