import { createVNode, withDirectives, resolveDirective } from "vue";
import "./styles/tag.scss";
import { makePaperProps, usePaper } from "../../composables/paper/index.mjs";
import { makeTransitionProps, MaybeTransition } from "../../composables/transition/index.mjs";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { makeLoadingProps, useLoading } from "../../composables/loading/index.mjs";
import { makeGroupItemProps, useGroupItem } from "../../composables/group/index.mjs";
import { makeRouterProps, useLink } from "../../composables/router/index.mjs";
import { TagGroupKey } from "../tag-group/tag-group.mjs";
import { Ripple } from "../../directives/ripple/index.mjs";
import { FadeInExpandTransition } from "../transition/fade-in-expand-transition.mjs";
import { genOverlays } from "../../composables/variant/index.mjs";
import { Avatar } from "../avatar/avatar.mjs";
import { Button } from "../button/button.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
const Tag = defineComponent({
  name: "VeTag",
  directives: {
    Ripple
  },
  props: {
    activeClass: String,
    appendAvatar: String,
    appendIcon: [String, Object],
    closable: Boolean,
    closeIcon: {
      type: [String, Object],
      default: "$close"
    },
    modelValue: {
      type: Boolean,
      default: true
    },
    prependAvatar: String,
    prependIcon: [String, Object],
    ripple: {
      type: Boolean,
      default: true
    },
    text: String,
    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 == null ? void 0 : 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 == null ? void 0 : group.selectedClass.value],
          "style": paperStyles.value,
          "href": link.href.value,
          "onClick": isClickable && onClickFunc
        }, {
          default: () => {
            var _a, _b, _c, _d, _e, _f, _g, _h;
            return [genOverlays(isClickable, "ve-tag"), hasPrepend && createVNode("div", {
              "class": ["ve-tag__prepend", {
                "ve-tag__prepend--avatar": props.prependAvatar
              }]
            }, [(_b = (_a = slots.prepend) == null ? void 0 : _a.call(slots)) != null ? _b : createVNode(Avatar, {
              "color": "inherit",
              "variant": "text",
              "icon": props.prependIcon,
              "image": props.prependAvatar
            }, null)]), (_d = (_c = slots.default) == null ? void 0 : _c.call(slots, {
              isSelected: group == null ? void 0 : group.isSelected.value,
              selectedClass: group == null ? void 0 : group.selectedClass.value,
              select: group == null ? void 0 : group.select,
              toggle: group == null ? void 0 : group.toggle,
              value: group == null ? void 0 : group.value.value,
              disabled: props.disabled
            })) != null ? _d : props.text, hasAppend && createVNode("div", {
              "class": "ve-tag__append"
            }, [(_f = (_e = slots.append) == null ? void 0 : _e.call(slots)) != null ? _f : createVNode(Avatar, {
              "color": "inherit",
              "variant": "text",
              "icon": props.appendIcon,
              "image": props.appendAvatar
            }, null)]), hasClose && createVNode("div", {
              "class": "ve-tag__close"
            }, [(_h = (_g = slots.close) == null ? void 0 : _g.call(slots, {
              props: {
                onClick: onCloseClick
              }
            })) != null ? _h : 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
