@indielayer/ui/lib/components/menu/MenuItem.vue2.js

Indielayer UI Components with Tailwind CSS build for Vue 3

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