import { computed, createVNode } from "vue";
import "./styles/messages.scss";
import { makeTransitionProps, MaybeTransition } from "../../composables/transition/index.mjs";
import { FadeTransition } from "../transition/fade-transition.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
import { wrapInArray } from "../../utils/dist/index.mjs";
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: () => {
          var _a;
          return [hasMessages && messages.value.map((message, i) => createVNode("div", {
            "class": "ve-messages__message",
            "key": i
          }, [message])), (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)];
        }
      });
    };
  }
});
export {
  Messages
};
//# sourceMappingURL=messages.mjs.map
