import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
import "./styles/alert.css";
import { computed } from "vue";
import { pick, propsFactory } from "@veno-ui/utils";
import { genericComponent } from "../../utils";
import { useProxiedModel } from "../../composables/proxied-model";
import { MaybeTransition, makeTransitionProps } from "../../composables/transition";
import { makeLoadingProps, useLoading } from "../../composables/loading";
import { filterCardProps, makeCardProps } from "../card/card";
import { Button } from "../button";
import { Card } from "../card";
import { Icon } from "../icon";
import { Progress } from "../progress";
import { FadeInExpandTransition } from "../transition";
const alertTypes = ["success", "info", "warning", "error"];
const makeAlertProps = propsFactory({
  /**
   * @zh 警告信息是否显示
   */
  modelValue: {
    type: Boolean,
    default: true
  },
  /**
   * @zh 警告信息的类型
   */
  type: {
    type: String,
    default: "info",
    validator: (val) => alertTypes.includes(val)
  },
  /**
   * @zh 警告信息的图标
   */
  icon: {
    type: [String, Boolean, Object],
    default: true
  },
  /**
   * @zh 警告信息是否可关闭
   */
  closable: Boolean,
  /**
   * @zh 警告信息的关闭图标
   */
  closeIcon: {
    type: [String, Object],
    default: "$close"
  },
  /**
   * @zh 警告信息的关闭文本
   */
  closeText: String,
  ...makeTransitionProps({
    transition: {
      component: FadeInExpandTransition
    }
  }),
  ...makeLoadingProps(),
  ...makeCardProps({
    shape: "rounded-sm",
    variant: "contained-outlined"
  })
}, "alert");
const Alert = genericComponent()({
  name: "VeAlert",
  props: makeAlertProps(),
  emits: {
    "update:modelValue": (_) => true
  },
  setup(props, {
    slots
  }) {
    const {
      loadingClasses
    } = useLoading(props);
    const computedProps = computed(() => {
      return {
        ...props,
        text: void 0,
        textColor: props.type ?? props.textColor
      };
    });
    const isActive = useProxiedModel(props, "modelValue");
    const icon = computed(() => {
      if (props.icon === false)
        return void 0;
      if (typeof props.icon === "string")
        return props.icon;
      if (props.type)
        return `$${props.type}`;
      return void 0;
    });
    function onCloseClick(_) {
      isActive.value = false;
    }
    return () => {
      const [cardProps] = filterCardProps(computedProps.value);
      const hasLoading = props.loading;
      const hasIcon = !hasLoading && icon.value;
      const hasPrepend = hasIcon || hasLoading || slots.prepend;
      const hasTitle = !!props.title;
      const hasClosable = props.closable && (props.closeText || props.closeIcon);
      const hasAppend = hasClosable || slots.append;
      return _createVNode(MaybeTransition, {
        "transition": props.transition
      }, {
        default: () => [isActive.value && _createVNode(props.tag, {
          "role": "alert",
          "class": ["ve-alert", {
            "ve-alert--with-title": hasTitle
          }, loadingClasses.value]
        }, {
          default: () => [_createVNode(Card, _mergeProps(cardProps, {
            "tag": "div"
          }), {
            prepend: hasPrepend ? () => _createVNode(_Fragment, null, [hasIcon && _createVNode(Icon, {
              "class": "ve-alert__icon",
              "size": "21",
              "icon": icon.value
            }, null), hasLoading && _createVNode(Progress, {
              "class": "ve-alert__icon",
              "size": "21",
              "variant": "circular",
              "stroke-width": "2",
              "indeterminate": true
            }, null), slots.prepend?.()]) : void 0,
            headerText: () => _createVNode(_Fragment, null, [hasTitle && _createVNode("div", {
              "class": "ve-alert__title"
            }, [props.title]), slots.default?.() ?? props.text]),
            append: hasAppend ? () => _createVNode(_Fragment, null, [slots.append?.(), hasClosable && _createVNode(Button, {
              "class": "ve-alert__close",
              "variant": "plain",
              "ripple": false,
              "icon": props.closeText ? false : props.closeIcon,
              "text": props.closeText,
              "onClick": onCloseClick
            }, null)]) : void 0
          })]
        })]
      });
    };
  }
});
function filterAlertProps(props) {
  return pick(props, Object.keys(Alert.props));
}
export {
  Alert,
  alertTypes,
  filterAlertProps,
  makeAlertProps
};
//# sourceMappingURL=alert.mjs.map
