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