@indielayer/ui/lib/components/tab/Tab.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as R, computed as s, ref as d, inject as j, reactive as D, onMounted as E, openBlock as c, createBlock as m, resolveDynamicComponent as L, normalizeStyle as V, unref as o, normalizeClass as v, withCtx as M, renderSlot as g, createElementVNode as z, createCommentVNode as p, toDisplayString as O, Teleport as P, createElementBlock as X } 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 { injectTabGroupKey as G } from "../../composables/keys.js";
import { useCommon as T } from "../../composables/useCommon.js";
import { useTheme as I } from "../../composables/useTheme.js";
import C from "../icon/Icon.vue.js";
import K from "../link/Link.vue.js";
import { closeIcon as q } from "../../common/icons.js";
const A = {
  ...T.props(),
  value: {
    type: [String, Number]
  },
  tag: {
    type: String,
    default: "button"
  },
  to: [String, Object],
  label: String,
  icon: String,
  disabled: Boolean,
  exact: Boolean,
  removable: Boolean
}, H = {
  name: "XTab",
  validators: {
    ...T.validators()
  }
}, te = /* @__PURE__ */ R({
  ...H,
  props: A,
  emits: ["remove"],
  setup(x) {
    const t = x, i = s(() => {
      var e, u;
      return ((u = (e = l.value) == null ? void 0 : e.$el) == null ? void 0 : u.href) || t.value;
    }), S = s(() => t.label || t.value), b = d(null), l = d(null), a = j(G, {
      tabsContentRef: d(null),
      activateTab: () => {
      },
      state: D({
        active: void 0,
        variant: "line",
        ghost: !1,
        grow: !1,
        exact: !1,
        size: "md",
        color: "primary"
      })
    }), k = s(() => a.state.exact || t.exact), f = s(() => t.size || a.state.size);
    E(() => {
      b.value = a.tabsContentRef.value, t.to && l.value && (y(), F(l.value.$el, y, {
        attributes: !0,
        attributeFilter: ["class"]
      }));
    });
    function y() {
      l.value && l.value.$el && t.to && l.value.$el.classList.contains(k.value ? "router-link-exact-active" : "router-link-active") && a.activateTab(i.value);
    }
    const r = s(() => a.state.active === i.value), $ = s(() => a.state.color);
    function h(e) {
      if (t.disabled) {
        e.preventDefault(), e.stopPropagation();
        return;
      }
      !t.to && typeof i.value < "u" && a.activateTab(i.value);
    }
    const { styles: w, classes: n, className: B } = I("Tab", {}, d({
      ...t,
      size: f.value,
      exact: k.value
    }), {
      ...a.state,
      selected: r
    });
    return (e, u) => (c(), m(L(e.to ? K : e.tag), {
      ref_key: "elRef",
      ref: l,
      type: e.tag === "button" ? "button" : void 0,
      "data-value": i.value,
      to: e.to,
      color: r.value ? $.value : void 0,
      style: V([
        o(w),
        e.to && r.value && o(a).state.variant === "block" ? "--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);" : ""
      ]),
      class: v([
        o(B),
        o(n).wrapper,
        "shrink-0",
        {
          "flex-1": o(a).state.grow,
          "text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]": r.value,
          "cursor-pointer": !e.disabled,
          "cursor-not-allowed": e.disabled,
          "cursor-not-allowed text-secondary-500": e.disabled && !r.value
        }
      ]),
      "aria-disabled": e.disabled ? "true" : void 0,
      "aria-selected": r.value ? "true" : "false",
      onClick: h
    }, {
      default: M(() => [
        g(e.$slots, "tab", {
          label: e.label,
          value: e.value,
          size: f.value,
          icon: e.icon
        }, () => [
          z("div", {
            class: v(o(n).content)
          }, [
            e.icon ? (c(), m(C, {
              key: 0,
              icon: e.icon,
              size: f.value,
              class: v(o(n).icon)
            }, null, 8, ["icon", "size", "class"])) : p("", !0),
            z("div", {
              class: v(o(n).label)
            }, O(S.value), 3),
            e.removable ? (c(), m(C, {
              key: 1,
              size: "sm",
              icon: o(q),
              class: "ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150",
              onClick: u[0] || (u[0] = (N) => e.$emit("remove", N))
            }, null, 8, ["icon"])) : p("", !0)
          ], 2)
        ]),
        r.value && b.value ? (c(), m(P, {
          key: 0,
          to: b.value
        }, [
          e.$slots.default ? (c(), X("div", {
            key: 0,
            role: "tabpanel",
            class: v(o(n).tabpanel)
          }, [
            g(e.$slots, "default")
          ], 2)) : p("", !0)
        ], 8, ["to"])) : p("", !0)
      ]),
      _: 3
    }, 8, ["type", "data-value", "to", "color", "style", "class", "aria-disabled", "aria-selected"]));
  }
});
export {
  te as default
};