VMessages.mjs 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VMessages.css";
  4. // Components
  5. import { VSlideYTransition } from "../transitions/index.mjs"; // Composables
  6. import { useTextColor } from "../../composables/color.mjs";
  7. import { makeComponentProps } from "../../composables/component.mjs";
  8. import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
  9. import { computed } from 'vue';
  10. import { genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
  11. export const makeVMessagesProps = propsFactory({
  12. active: Boolean,
  13. color: String,
  14. messages: {
  15. type: [Array, String],
  16. default: () => []
  17. },
  18. ...makeComponentProps(),
  19. ...makeTransitionProps({
  20. transition: {
  21. component: VSlideYTransition,
  22. leaveAbsolute: true,
  23. group: true
  24. }
  25. })
  26. }, 'VMessages');
  27. export const VMessages = genericComponent()({
  28. name: 'VMessages',
  29. props: makeVMessagesProps(),
  30. setup(props, _ref) {
  31. let {
  32. slots
  33. } = _ref;
  34. const messages = computed(() => wrapInArray(props.messages));
  35. const {
  36. textColorClasses,
  37. textColorStyles
  38. } = useTextColor(computed(() => props.color));
  39. useRender(() => _createVNode(MaybeTransition, {
  40. "transition": props.transition,
  41. "tag": "div",
  42. "class": ['v-messages', textColorClasses.value, props.class],
  43. "style": [textColorStyles.value, props.style],
  44. "role": "alert",
  45. "aria-live": "polite"
  46. }, {
  47. default: () => [props.active && messages.value.map((message, i) => _createVNode("div", {
  48. "class": "v-messages__message",
  49. "key": `${i}-${messages.value}`
  50. }, [slots.message ? slots.message({
  51. message
  52. }) : message]))]
  53. }));
  54. return {};
  55. }
  56. });
  57. //# sourceMappingURL=VMessages.mjs.map