import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import "./styles/tag.css";
import { defineComponent } from "../../utils";
import { genOverlays, makePaperProps, usePaper } from "../../composables/paper";
import { MaybeTransition, makeTransitionProps } from "../../composables/transition";
import { useProxiedModel } from "../../composables/proxied-model";
import { makeLoadingProps, useLoading } from "../../composables/loading";
import { makeGroupItemProps, useGroupItem } from "../../composables/group";
import { makeRouterProps, useLink } from "../../composables/router";
import { TagGroupKey } from "../tag-group/tag-group";
import { Ripple } from "../../directives/ripple";
import { Avatar } from "../avatar";
import { Button } from "../button";
import { FadeInExpandTransition } from "../transition";
const Tag = defineComponent({
  name: "VeTag",
  directives: {
    Ripple
  },
  props: {
    /**
     * @zh 激活时的 class
     */
    activeClass: String,
    /**
     * @zh 追加的头像图片
     */
    appendAvatar: String,
    /**
     * @zh 追加的图标
     */
    appendIcon: [String, Object],
    /**
     * @zh 可关闭
     */
    closable: Boolean,
    /**
     * @zh 关闭图标
     */
    closeIcon: {
      type: [String, Object],
      default: "$close"
    },
    /**
     * @zh 是否显示
     */
    modelValue: {
      type: Boolean,
      default: true
    },
    /**
     * @zh 前置的头像图片
     */
    prependAvatar: String,
    /**
     * @zh 前置的图标
     */
    prependIcon: [String, Object],
    /**
     * @zh 涟漪动画
     */
    ripple: {
      type: Boolean,
      default: true
    },
    /**
     * @zh 标签文字
     */
    text: String,
    /**
     * @zh 是否为链接
     */
    link: Boolean,
    ...makeLoadingProps(),
    ...makeTransitionProps({
      transition: {
        component: FadeInExpandTransition
      }
    }),
    ...makePaperProps({
      tag: "span",
      shape: "rounded-sm",
      variant: "contained-text"
    }),
    ...makeGroupItemProps(),
    ...makeRouterProps()
  },
  emits: {
    "click:close": (_event) => true,
    "update:modelValue": (_modelValue) => true
  },
  setup(props, {
    attrs,
    emit,
    slots
  }) {
    const isActive = useProxiedModel(props, "modelValue");
    const {
      paperClasses,
      paperStyles
    } = usePaper(props);
    const {
      loadingClasses
    } = useLoading(props);
    const group = useGroupItem(props, TagGroupKey, false);
    const link = useLink(props, attrs);
    function onCloseClick(e) {
      isActive.value = false;
      emit("click:close", e);
    }
    return () => {
      const Tag2 = link.isLink.value ? "a" : props.tag;
      const hasAppend = !!(slots.append || props.appendIcon || props.appendAvatar);
      const hasClose = !!(props.loading || slots.close || props.closable);
      const hasPrepend = !!(slots.prepend || props.prependIcon || props.prependAvatar);
      const isClickable = !props.disabled && (!!group || link.isClickable.value || props.link);
      const onClickFunc = props.link ? props.link : group?.toggle;
      return _createVNode(MaybeTransition, {
        "transition": props.transition
      }, {
        default: () => [isActive.value && _withDirectives(_createVNode(Tag2, {
          "class": ["ve-tag", {
            "ve-tag--link": isClickable
          }, paperClasses.value, loadingClasses.value, group?.selectedClass.value],
          "style": paperStyles.value,
          "href": link.href.value,
          "onClick": isClickable && onClickFunc
        }, {
          default: () => [genOverlays(isClickable, "ve-tag"), hasPrepend && _createVNode("div", {
            "class": ["ve-tag__prepend", {
              "ve-tag__prepend--avatar": props.prependAvatar
            }]
          }, [slots.prepend?.() ?? _createVNode(Avatar, {
            "color": "inherit",
            "variant": "text",
            "icon": props.prependIcon,
            "image": props.prependAvatar
          }, null)]), slots.default?.({
            isSelected: group?.isSelected.value,
            selectedClass: group?.selectedClass.value,
            select: group?.select,
            toggle: group?.toggle,
            value: group?.value.value,
            disabled: props.disabled
          }) ?? props.text, hasAppend && _createVNode("div", {
            "class": "ve-tag__append"
          }, [slots.append?.() ?? _createVNode(Avatar, {
            "color": "inherit",
            "variant": "text",
            "icon": props.appendIcon,
            "image": props.appendAvatar
          }, null)]), hasClose && _createVNode("div", {
            "class": "ve-tag__close"
          }, [slots.close?.({
            props: {
              onClick: onCloseClick
            }
          }) ?? _createVNode(Button, {
            "variant": "plain",
            "ripple": false,
            "loading": props.loading,
            "icon": props.closeIcon,
            "onClick": onCloseClick
          }, null)])]
        }), [[_resolveDirective("ripple"), isClickable && props.ripple, null]])]
      });
    };
  }
});
export {
  Tag
};
//# sourceMappingURL=tag.mjs.map
