import { defineComponent as z, ref as k, computed as g, onMounted as N, watch as h, openBlock as l, createBlock as i, resolveDynamicComponent as R, mergeProps as I, unref as s, withCtx as M, createElementBlock as r, renderSlot as n, createTextVNode as u, toDisplayString as c, createCommentVNode as f, createElementVNode as O, Fragment as P } from "vue";
import { useMutationObserver as j } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useColors as w } from "../../composables/useColors.js";
import { useCommon as $ } from "../../composables/useCommon.js";
import { useTheme as D } from "../../composables/useTheme.js";
import y from "../icon/Icon.vue.js";
import F from "../spinner/Spinner.vue.js";
const T = {
  key: 0,
  class: "mr-2 shrink-0"
}, V = {
  key: 2,
  class: "flex-1 truncate"
}, E = { class: "ml-1 shrink-0" }, A = { key: 0 }, L = {
  ...$.props(),
  ...w.props("secondary"),
  item: {
    type: Object,
    default: () => {
    }
  },
  active: Boolean,
  attrs: {
    type: Object,
    default: () => {
    }
  },
  onClick: Function,
  value: [Number, String],
  to: [String, Object],
  exact: Boolean,
  href: String,
  target: String,
  label: String,
  icon: String,
  iconRight: String,
  loading: Boolean,
  rounded: {
    type: Boolean,
    default: !0
  },
  filled: {
    type: Boolean,
    default: !0
  },
  selected: Boolean,
  disabled: Boolean,
  minimal: Boolean,
  prefix: String,
  suffix: String
}, X = {
  name: "XMenuItem",
  validators: {
    ...$.validators()
  }
}, Y = /* @__PURE__ */ z({
  ...X,
  props: L,
  emits: ["active", "click"],
  setup(b, { emit: _ }) {
    const v = b, m = _, a = k(), o = k(!1), e = g(() => ({
      ...v,
      ...v.item
    })), p = g(() => e.value.to ? "router-link" : e.value.href ? "a" : "div");
    N(() => {
      a.value && (d(), p.value === "router-link" && j(a.value.$el, d, {
        attributes: !0,
        attributeFilter: ["class"]
      }));
    });
    function x(t) {
      if (e.value.disabled) {
        t.stopPropagation(), t.preventDefault();
        return;
      }
      e.value.onClick && e.value.onClick(t), m("click", t);
    }
    function d() {
      if (a.value && a.value.$el && (e.value.href || e.value.to)) {
        const t = a.value.$el.classList.contains(e.value.exact ? "router-link-exact-active" : "router-link-active") || !1;
        o.value = t;
      } else
        o.value = !!e.value.active;
    }
    h(() => o.value, (t) => {
      t && m("active");
    }), h(() => e.value.active, (t) => {
      o.value = !!t;
    });
    const { styles: B, classes: C, className: S } = D("MenuItem", {}, e, { isActive: o });
    return (t, q) => (l(), i(R(p.value), I({
      ref_key: "elRef",
      ref: a
    }, {
      ...e.value.href ? { href: e.value.href } : {},
      ...e.value.attrs
    }, {
      to: e.value.to,
      target: e.value.target,
      color: e.value.color,
      style: s(B),
      class: [
        s(S),
        t.$style["menu-item"],
        [o.value ? t.$style["menu-item--active"] : ""],
        s(C).wrapper,
        {
          "flex items-center": t.$slots.prefix || t.$slots.suffix
        }
      ],
      title: e.value.label,
      alt: e.value.label,
      onClick: x
    }), {
      default: M(() => [
        t.$slots.prefix || e.value.prefix ? (l(), r("span", T, [
          n(t.$slots, "prefix", { item: e.value }, () => [
            u(c(e.value.prefix), 1)
          ], !0)
        ])) : e.value.icon ? (l(), i(y, {
          key: 1,
          size: e.value.size,
          icon: e.value.icon,
          class: "mr-2"
        }, null, 8, ["size", "icon"])) : f("", !0),
        t.minimal ? f("", !0) : (l(), r("span", V, [
          n(t.$slots, "default", { item: e.value }, () => [
            u(c(e.value.label), 1)
          ], !0)
        ])),
        O("span", E, [
          e.value.loading ? (l(), i(F, {
            key: 0,
            size: e.value.size
          }, null, 8, ["size"])) : (l(), r(P, { key: 1 }, [
            t.$slots.suffix || e.value.suffix ? (l(), r("span", A, [
              n(t.$slots, "suffix", { item: e.value }, () => [
                u(c(e.value.suffix), 1)
              ], !0)
            ])) : e.value.iconRight ? (l(), i(y, {
              key: 1,
              size: e.value.size,
              icon: e.value.iconRight
            }, null, 8, ["size", "icon"])) : f("", !0)
          ], 64))
        ])
      ]),
      _: 3
    }, 16, ["to", "target", "color", "style", "class", "title", "alt"]));
  }
});
export {
  Y as default
};
