import { createVNode as _createVNode } from "vue";
import "./styles/messages.css";
import { computed } from "vue";
import { wrapInArray } from "@veno-ui/utils";
import { defineComponent } from "../../utils";
import { FadeTransition } from "../transition";
import { MaybeTransition, makeTransitionProps } from "../../composables/transition";
const Messages = defineComponent({
  name: "VeMessages",
  props: {
    active: Boolean,
    value: {
      type: [Array, String],
      default: () => []
    },
    ...makeTransitionProps({
      transition: {
        component: FadeTransition,
        group: true
      }
    })
  },
  setup(props, {
    slots
  }) {
    const messages = computed(() => wrapInArray(props.value));
    return () => {
      const hasMessages = messages.value.length > 0 && props.active;
      return _createVNode(MaybeTransition, {
        "transition": props.transition,
        "tag": "div",
        "class": "ve-messages"
      }, {
        default: () => [hasMessages && messages.value.map((message, i) => _createVNode("div", {
          "class": "ve-messages__message",
          "key": i
        }, [message])), slots?.default?.()]
      });
    };
  }
});
export {
  Messages
};
//# sourceMappingURL=messages.mjs.map
