npm - @stachelock/ui - Versions diffs - 0.2.13 → 0.3.0 - Mend

@stachelock/ui 0.2.13 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (737) hide show

package/dist/SwitchInputGroup.vue_vue_type_script_setup_true_lang-BNKKEAMq.js ADDED Viewed

@@ -0,0 +1,183 @@
+import { defineComponent as D, ref as U, watch as y, createElementBlock as a, openBlock as t, createElementVNode as C, createCommentVNode as r, toDisplayString as c, normalizeClass as v, Fragment as g, renderList as b, createVNode as p } from "vue";
+import { _ as f } from "./SwitchInput.vue_vue_type_script_setup_true_lang-D6M1qwP1.js";
+const L = {
+  key: 0,
+  class: "sl-bg-white dark:sl-bg-slate-800 sl-shadow sm:sl-rounded-lg sl-w-full",
+  "data-testid": "switch-input-group"
+}, S = { class: "sl-px-4 sl-py-5 sm:sl-p-6" }, F = {
+  key: 0,
+  class: "sl-mb-4"
+}, B = {
+  key: 0,
+  class: "sl-text-lg sl-font-medium sl-leading-6 sl-text-gray-900 dark:sl-text-white"
+}, T = {
+  key: 1,
+  class: "sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-gray-300"
+}, E = {
+  key: 2,
+  class: "sl-flex sl-flex-col sl-gap-4"
+}, z = {
+  key: 1,
+  "data-testid": "switch-input-group"
+}, N = {
+  key: 0,
+  class: "sl-text-lg sl-font-medium sl-leading-6 sl-text-gray-900 dark:sl-text-white"
+}, O = {
+  key: 1,
+  class: "sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-gray-300"
+}, j = {
+  key: 2,
+  class: "sl-flex sl-flex-col sl-gap-4"
+}, G = /* @__PURE__ */ D({
+  __name: "SwitchInputGroup",
+  props: {
+    switches: {
+      type: Array,
+      required: !0
+    },
+    currentValues: {
+      type: Object,
+      default: () => ({})
+    },
+    groupLabel: {
+      type: String,
+      default: ""
+    },
+    groupDescription: {
+      type: String,
+      default: ""
+    },
+    boxShadow: {
+      type: Boolean,
+      default: !0
+    },
+    gridColsClass: {
+      type: String,
+      default: "sl-grid-cols-1 sm:sl-grid-cols-2"
+    },
+    vertical: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:value"],
+  setup(l, { emit: k }) {
+    const i = l, V = k, d = U({}), m = () => {
+      const o = {};
+      i.switches.forEach((s) => {
+        o[s.name] = i.currentValues[s.name] !== void 0 ? i.currentValues[s.name] : s.defaultValue !== void 0 ? s.defaultValue : !1;
+      }), d.value = o;
+    };
+    y(
+      () => i.currentValues,
+      () => {
+        m();
+      },
+      { deep: !0 }
+    ), y(
+      () => i.switches,
+      () => {
+        m();
+      },
+      { deep: !0 }
+    ), m();
+    const x = (o, s) => {
+      d.value = {
+        ...d.value,
+        [o]: s
+      }, V("update:value", { name: o, value: s });
+    };
+    return (o, s) => l.boxShadow ? (t(), a("div", L, [
+      C("div", S, [
+        l.groupLabel || l.groupDescription ? (t(), a("div", F, [
+          l.groupLabel ? (t(), a("h3", B, c(l.groupLabel), 1)) : r("", !0),
+          l.groupDescription ? (t(), a("p", T, c(l.groupDescription), 1)) : r("", !0)
+        ])) : r("", !0),
+        l.vertical ? (t(), a("div", E, [
+          (t(!0), a(g, null, b(l.switches, (e, n) => (t(), a("div", {
+            key: e.name || n
+          }, [
+            p(f, {
+              name: e.name,
+              label: e.label,
+              description: e.description,
+              "text-true": e.textTrue,
+              "text-false": e.textFalse,
+              disabled: e.disabled,
+              "model-value": d.value[e.name],
+              "onUpdate:modelValue": (u) => x(e.name, u),
+              "box-shadow": !1
+            }, null, 8, ["name", "label", "description", "text-true", "text-false", "disabled", "model-value", "onUpdate:modelValue"])
+          ]))), 128))
+        ])) : (t(), a("div", {
+          key: 1,
+          class: v(["sl-grid sl-gap-x-6 sl-gap-y-4", l.gridColsClass])
+        }, [
+          (t(!0), a(g, null, b(l.switches, (e, n) => (t(), a("div", {
+            key: e.name || n
+          }, [
+            p(f, {
+              name: e.name,
+              label: e.label,
+              description: e.description,
+              "text-true": e.textTrue,
+              "text-false": e.textFalse,
+              disabled: e.disabled,
+              "model-value": d.value[e.name],
+              "onUpdate:modelValue": (u) => x(e.name, u),
+              "box-shadow": !1
+            }, null, 8, ["name", "label", "description", "text-true", "text-false", "disabled", "model-value", "onUpdate:modelValue"])
+          ]))), 128))
+        ], 2))
+      ])
+    ])) : (t(), a("div", z, [
+      l.groupLabel || l.groupDescription ? (t(), a("div", {
+        key: 0,
+        class: v(["sl-mb-4", l.vertical ? "" : "sl-col-span-full"])
+      }, [
+        l.groupLabel ? (t(), a("h3", N, c(l.groupLabel), 1)) : r("", !0),
+        l.groupDescription ? (t(), a("p", O, c(l.groupDescription), 1)) : r("", !0)
+      ], 2)) : r("", !0),
+      l.vertical ? (t(), a("div", j, [
+        (t(!0), a(g, null, b(l.switches, (e, n) => (t(), a("div", {
+          key: e.name || n
+        }, [
+          p(f, {
+            name: e.name,
+            label: e.label,
+            description: e.description,
+            "text-true": e.textTrue,
+            "text-false": e.textFalse,
+            disabled: e.disabled,
+            "model-value": d.value[e.name],
+            "onUpdate:modelValue": (u) => x(e.name, u),
+            "box-shadow": !1
+          }, null, 8, ["name", "label", "description", "text-true", "text-false", "disabled", "model-value", "onUpdate:modelValue"])
+        ]))), 128))
+      ])) : (t(), a("div", {
+        key: 1,
+        class: v(["sl-grid sl-gap-x-6 sl-gap-y-4", l.gridColsClass])
+      }, [
+        (t(!0), a(g, null, b(l.switches, (e, n) => (t(), a("div", {
+          key: e.name || n
+        }, [
+          p(f, {
+            name: e.name,
+            label: e.label,
+            description: e.description,
+            "text-true": e.textTrue,
+            "text-false": e.textFalse,
+            disabled: e.disabled,
+            "model-value": d.value[e.name],
+            "onUpdate:modelValue": (u) => x(e.name, u),
+            "box-shadow": !1
+          }, null, 8, ["name", "label", "description", "text-true", "text-false", "disabled", "model-value", "onUpdate:modelValue"])
+        ]))), 128))
+      ], 2))
+    ]));
+  }
+});
+export {
+  G as _
+};
+//# sourceMappingURL=SwitchInputGroup.vue_vue_type_script_setup_true_lang-BNKKEAMq.js.map

package/dist/SwitchInputGroup.vue_vue_type_script_setup_true_lang-BNKKEAMq.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SwitchInputGroup.vue_vue_type_script_setup_true_lang-BNKKEAMq.js","sources":["../src/components/inputs/SwitchInputGroup.vue"],"sourcesContent":["\n<template>\n <div \n v-if=\"boxShadow\" \n class=\"sl-bg-white dark:sl-bg-slate-800 sl-shadow sm:sl-rounded-lg sl-w-full\"\n data-testid=\"switch-input-group\"\n >\n <div class=\"sl-px-4 sl-py-5 sm:sl-p-6\">\n <div v-if=\"groupLabel || groupDescription\" class=\"sl-mb-4\">\n <h3 \n v-if=\"groupLabel\" \n class=\"sl-text-lg sl-font-medium sl-leading-6 sl-text-gray-900 dark:sl-text-white\"\n >\n {{ groupLabel }}\n </h3>\n <p \n v-if=\"groupDescription\" \n class=\"sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-gray-300\"\n >\n {{ groupDescription }}\n </p>\n </div>\n <div v-if=\"!vertical\" :class=\"['sl-grid sl-gap-x-6 sl-gap-y-4', gridColsClass]\">\n <div v-for=\"(switchItem, index) in switches\" :key=\"switchItem.name || index\">\n <SwitchInput\n :name=\"switchItem.name\"\n :label=\"switchItem.label\"\n :description=\"switchItem.description\"\n :text-true=\"switchItem.textTrue\"\n :text-false=\"switchItem.textFalse\"\n :disabled=\"switchItem.disabled\"\n :model-value=\"internalDisplayValues[switchItem.name]\"\n @update:model-value=\"(newValue: boolean) => handleSwitchUpdate(switchItem.name, newValue)\"\n :box-shadow=\"false\"\n />\n </div>\n </div>\n <div v-else class=\"sl-flex sl-flex-col sl-gap-4\">\n <div v-for=\"(switchItem, index) in switches\" :key=\"switchItem.name || index\">\n <SwitchInput\n :name=\"switchItem.name\"\n :label=\"switchItem.label\"\n :description=\"switchItem.description\"\n :text-true=\"switchItem.textTrue\"\n :text-false=\"switchItem.textFalse\"\n :disabled=\"switchItem.disabled\"\n :model-value=\"internalDisplayValues[switchItem.name]\"\n @update:model-value=\"(newValue: boolean) => handleSwitchUpdate(switchItem.name, newValue)\"\n :box-shadow=\"false\"\n />\n </div>\n </div>\n </div>\n </div>\n\n <div v-else data-testid=\"switch-input-group\">\n <div \n v-if=\"groupLabel || groupDescription\" \n :class=\"['sl-mb-4', !vertical ? 'sl-col-span-full' : '']\"\n >\n <h3 \n v-if=\"groupLabel\" \n class=\"sl-text-lg sl-font-medium sl-leading-6 sl-text-gray-900 dark:sl-text-white\"\n >\n {{ groupLabel }}\n </h3>\n <p \n v-if=\"groupDescription\" \n class=\"sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-gray-300\"\n >\n {{ groupDescription }}\n </p>\n </div>\n <div v-if=\"!vertical\" :class=\"['sl-grid sl-gap-x-6 sl-gap-y-4', gridColsClass]\">\n <div v-for=\"(switchItem, index) in switches\" :key=\"switchItem.name || index\">\n <SwitchInput\n :name=\"switchItem.name\"\n :label=\"switchItem.label\"\n :description=\"switchItem.description\"\n :text-true=\"switchItem.textTrue\"\n :text-false=\"switchItem.textFalse\"\n :disabled=\"switchItem.disabled\"\n :model-value=\"internalDisplayValues[switchItem.name]\"\n @update:model-value=\"(newValue: boolean) => handleSwitchUpdate(switchItem.name, newValue)\"\n :box-shadow=\"false\"\n />\n </div>\n </div>\n <div v-else class=\"sl-flex sl-flex-col sl-gap-4\">\n <div v-for=\"(switchItem, index) in switches\" :key=\"switchItem.name || index\">\n <SwitchInput\n :name=\"switchItem.name\"\n :label=\"switchItem.label\"\n :description=\"switchItem.description\"\n :text-true=\"switchItem.textTrue\"\n :text-false=\"switchItem.textFalse\"\n :disabled=\"switchItem.disabled\"\n :model-value=\"internalDisplayValues[switchItem.name]\"\n @update:model-value=\"(newValue: boolean) => handleSwitchUpdate(switchItem.name, newValue)\"\n :box-shadow=\"false\"\n />\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, type PropType } from 'vue'\nimport SwitchInput from './SwitchInput.vue'\n\n/**\n * Configuration for a single switch in the group\n */\nexport interface SwitchConfig {\n name: string\n label: string\n description?: string\n textTrue?: string\n textFalse?: string\n defaultValue?: boolean\n disabled?: boolean\n rules?: unknown\n}\n\nconst props = defineProps({\n switches: {\n type: Array as PropType<SwitchConfig[]>,\n required: true\n },\n currentValues: {\n type: Object as PropType<Record<string, boolean>>,\n default: () => ({})\n },\n groupLabel: {\n type: String,\n default: ''\n },\n groupDescription: {\n type: String,\n default: ''\n },\n boxShadow: {\n type: Boolean,\n default: true\n },\n gridColsClass: {\n type: String,\n default: 'sl-grid-cols-1 sm:sl-grid-cols-2'\n },\n vertical: {\n type: Boolean,\n default: false\n }\n})\n\nconst emit = defineEmits<{\n 'update:value': [payload: { name: string; value: boolean }]\n}>()\n\nconst internalDisplayValues = ref<Record<string, boolean>>({})\n\nconst initializeOrUpdateInternalDisplayValues = () => {\n const newDisplayValues: Record<string, boolean> = {}\n props.switches.forEach((switchItem) => {\n newDisplayValues[switchItem.name] =\n props.currentValues[switchItem.name] !== undefined\n ? props.currentValues[switchItem.name]\n : switchItem.defaultValue !== undefined\n ? switchItem.defaultValue\n : false\n })\n internalDisplayValues.value = newDisplayValues\n}\n\n// Watch for changes in currentValues to update internalDisplayValues\nwatch(\n () => props.currentValues,\n () => {\n initializeOrUpdateInternalDisplayValues()\n },\n { deep: true }\n)\n\n// Watch for changes in switches prop\nwatch(\n () => props.switches,\n () => {\n initializeOrUpdateInternalDisplayValues()\n },\n { deep: true }\n)\n\n// Initialize on mount\ninitializeOrUpdateInternalDisplayValues()\n\nconst handleSwitchUpdate = (switchName: string, newValue: boolean) => {\n // Update internal display state immediately for responsiveness\n internalDisplayValues.value = {\n ...internalDisplayValues.value,\n [switchName]: newValue\n }\n // Emit the flat update event\n emit('update:value', { name: switchName, value: newValue })\n}\n</script>\n\n"],"names":["props","__props","emit","__emit","internalDisplayValues","ref","initializeOrUpdateInternalDisplayValues","newDisplayValues","switchItem","watch","handleSwitchUpdate","switchName","newValue","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","_toDisplayString","_hoisted_5","_hoisted_6","_Fragment","_renderList","index","_createVNode","SwitchInput","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10"],"mappings":"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"}

package/dist/TabGroup.vue_vue_type_script_setup_true_lang-DrhDwLL3.js ADDED Viewed

@@ -0,0 +1,125 @@
+import { defineComponent as L, computed as v, createElementBlock as a, openBlock as o, createCommentVNode as d, createVNode as u, unref as s, withCtx as c, createElementVNode as m, Fragment as j, renderList as z, createBlock as p, normalizeClass as _, createTextVNode as A, toDisplayString as k, renderSlot as y, KeepAlive as F, resolveDynamicComponent as K, mergeProps as U, toHandlers as q } from "vue";
+import { useTabs as J } from "./composables/useTabs.js";
+import { _ as Q } from "./SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js";
+import { m as R, p as W, x as X } from "./tabs-Da32Mbhf.js";
+const Y = { class: "sl-w-full" }, Z = {
+  key: 0,
+  class: "sl-block sm:sl-hidden sl-mb-4"
+}, I = ["onMouseenter", "onMouseleave"], ee = { class: "sl-flex sl-items-center sl-justify-center sl-gap-2" }, se = { class: "sl-mt-4" }, ae = /* @__PURE__ */ L({
+  __name: "TabGroup",
+  props: {
+    tabGroup: {},
+    tabs: {},
+    tab: { default: 0 },
+    tabCountTheme: { default: "primary" },
+    dropdownOnMobile: { type: Boolean, default: !0 },
+    fixedHeight: {}
+  },
+  emits: ["tab-change"],
+  setup(C, { emit: w }) {
+    const t = C, T = w, $ = {
+      tabGroup: t.tabGroup,
+      tab: t.tab,
+      tabs: t.tabs,
+      tabCountTheme: t.tabCountTheme,
+      dropdownOnMobile: t.dropdownOnMobile,
+      fixedHeight: t.fixedHeight
+    }, {
+      selectedTabId: h,
+      selectedTab: M,
+      filteredTabs: r,
+      hoverStates: G,
+      themeClasses: b,
+      dropdownOnMobile: O,
+      selectedComponent: i,
+      selectedProps: S,
+      selectedEvents: V,
+      mouseEnter: B,
+      mouseLeave: E,
+      handleTabGroupTabChange: H
+    } = J($, (e, ...n) => {
+      e === "tab-change" && T("tab-change", n[0]);
+    }), f = v(
+      () => r.value.map((e) => ({
+        id: e.id,
+        name: e.count !== void 0 && e.count !== null ? `${e.name} (${e.count})` : e.name,
+        disabled: e.disabled
+      }))
+    ), N = v(
+      () => f.value.find((e) => e.id === h.value) || null
+    ), g = (e) => {
+      H(e);
+    }, D = (e) => {
+      if (!e) return;
+      const n = r.value.findIndex((l) => l.id === e.id);
+      n >= 0 && g(n);
+    };
+    return (e, n) => (o(), a("div", Y, [
+      s(O) ? (o(), a("div", Z, [
+        u(Q, {
+          name: `${t.tabGroup}-mobile-tab-select`,
+          items: f.value,
+          "model-value": N.value,
+          "item-key": "id",
+          "item-text": "name",
+          placeholder: "Select tab",
+          "onUpdate:modelValue": D
+        }, null, 8, ["name", "items", "model-value"])
+      ])) : d("", !0),
+      u(s(R), {
+        "selected-index": s(M),
+        onChange: g
+      }, {
+        default: c(() => [
+          u(s(W), { class: "sl-hidden sm:sl-flex sl-space-x-1 sl-rounded-xl sl-bg-stachelock-900/20 dark:sl-bg-slate-800 sl-p-1" }, {
+            default: c(() => [
+              (o(!0), a(j, null, z(s(r), (l) => (o(), p(s(X), {
+                key: l.id,
+                as: "template",
+                disabled: l.disabled
+              }, {
+                default: c(({ selected: x }) => [
+                  m("button", {
+                    class: _([
+                      "sl-w-full sl-rounded-lg sl-py-2.5 sl-px-4 sl-text-sm sl-font-medium sl-leading-5 sl-transition-all sl-duration-200",
+                      "focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-stachelock-500",
+                      x ? "sl-bg-white dark:sl-bg-slate-700 sl-text-stachelock-700 dark:sl-text-white sl-shadow" : "sl-text-gray-600 dark:sl-text-slate-300 hover:sl-bg-white/[0.12] hover:sl-text-gray-800 dark:hover:sl-text-white",
+                      l.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : "sl-cursor-pointer"
+                    ]),
+                    onMouseenter: (P) => s(B)(l.id),
+                    onMouseleave: (P) => s(E)(l.id)
+                  }, [
+                    m("span", ee, [
+                      A(k(l.name) + " ", 1),
+                      l.count !== void 0 && l.count !== null ? (o(), a("span", {
+                        key: 0,
+                        class: _([
+                          "sl-ml-2 sl-rounded-full sl-py-0.5 sl-px-2.5 sl-text-xs sl-font-medium sl-tabular-nums",
+                          x || s(G)[l.id] ? `sl-ring-1 ${s(b).ringColor} ${s(b).bgColor} sl-text-gray-800` : "sl-bg-gray-200 dark:sl-bg-slate-600 sl-text-gray-700 dark:sl-text-slate-200"
+                        ])
+                      }, k(l.count), 3)) : d("", !0)
+                    ])
+                  ], 42, I)
+                ]),
+                _: 2
+              }, 1032, ["disabled"]))), 128))
+            ]),
+            _: 1
+          }),
+          m("div", se, [
+            y(e.$slots, "component-heading"),
+            (o(), p(F, null, [
+              s(i) ? (o(), p(K(s(i)), U({ key: s(h) }, s(S) || {}, q(s(V) || {})), null, 16)) : d("", !0)
+            ], 1024)),
+            s(i) ? d("", !0) : y(e.$slots, "default", { key: 0 })
+          ])
+        ]),
+        _: 3
+      }, 8, ["selected-index"])
+    ]));
+  }
+});
+export {
+  ae as _
+};
+//# sourceMappingURL=TabGroup.vue_vue_type_script_setup_true_lang-DrhDwLL3.js.map

package/dist/TabGroup.vue_vue_type_script_setup_true_lang-DrhDwLL3.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TabGroup.vue_vue_type_script_setup_true_lang-DrhDwLL3.js","sources":["../src/components/tabs/TabGroup.vue"],"sourcesContent":["\n<template>\n <div class=\"sl-w-full\">\n \n <div v-if=\"showDropdownOnMobile\" class=\"sl-block sm:sl-hidden sl-mb-4\">\n <SelectInput\n :name=\"`${props.tabGroup}-mobile-tab-select`\"\n :items=\"selectInputItems\"\n :model-value=\"selectedTabItem\"\n item-key=\"id\"\n item-text=\"name\"\n placeholder=\"Select tab\"\n @update:model-value=\"handleSelectInputChange\"\n />\n </div>\n\n \n <HeadlessTabGroup :selected-index=\"selectedTab\" @change=\"handleTabGroupTabChange\">\n <HeadlessTabList class=\"sl-hidden sm:sl-flex sl-space-x-1 sl-rounded-xl sl-bg-stachelock-900/20 dark:sl-bg-slate-800 sl-p-1\">\n <HeadlessTab\n v-for=\"tabItem in filteredTabs\"\n :key=\"tabItem.id\"\n as=\"template\"\n v-slot=\"{ selected }\"\n :disabled=\"tabItem.disabled\"\n >\n <button\n :class=\"[\n 'sl-w-full sl-rounded-lg sl-py-2.5 sl-px-4 sl-text-sm sl-font-medium sl-leading-5 sl-transition-all sl-duration-200',\n 'focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-stachelock-500',\n selected\n ? 'sl-bg-white dark:sl-bg-slate-700 sl-text-stachelock-700 dark:sl-text-white sl-shadow'\n : 'sl-text-gray-600 dark:sl-text-slate-300 hover:sl-bg-white/[0.12] hover:sl-text-gray-800 dark:hover:sl-text-white',\n tabItem.disabled ? 'sl-opacity-50 sl-cursor-not-allowed' : 'sl-cursor-pointer'\n ]\"\n @mouseenter=\"mouseEnter(tabItem.id)\"\n @mouseleave=\"mouseLeave(tabItem.id)\"\n >\n <span class=\"sl-flex sl-items-center sl-justify-center sl-gap-2\">\n {{ tabItem.name }}\n <span\n v-if=\"tabItem.count !== undefined && tabItem.count !== null\"\n :class=\"[\n 'sl-ml-2 sl-rounded-full sl-py-0.5 sl-px-2.5 sl-text-xs sl-font-medium sl-tabular-nums',\n selected || hoverStates[tabItem.id]\n ? `sl-ring-1 ${themeClasses.ringColor} ${themeClasses.bgColor} sl-text-gray-800`\n : 'sl-bg-gray-200 dark:sl-bg-slate-600 sl-text-gray-700 dark:sl-text-slate-200'\n ]\"\n >\n {{ tabItem.count }}\n </span>\n </span>\n </button>\n </HeadlessTab>\n </HeadlessTabList>\n\n \n <div class=\"sl-mt-4\">\n <slot name=\"component-heading\" />\n \n <KeepAlive>\n <component\n v-if=\"selectedComponent\"\n :is=\"selectedComponent\"\n :key=\"selectedTabId\"\n v-bind=\"selectedProps || {}\"\n v-on=\"selectedEvents || {}\"\n />\n </KeepAlive>\n \n <slot v-if=\"!selectedComponent\" />\n </div>\n </HeadlessTabGroup>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { \n TabGroup as HeadlessTabGroup, \n TabList as HeadlessTabList, \n Tab as HeadlessTab \n} from '@headlessui/vue';\nimport { useTabs, type TabCountTheme, type UseTabsProps } from '../../composables/useTabs';\nimport type { TabsItemType } from '../../types/layouts';\nimport SelectInput from '../inputs/SelectInput.vue';\n\ninterface Props {\n tabGroup: string;\n tabs: TabsItemType[];\n tab?: number | null;\n tabCountTheme?: TabCountTheme;\n dropdownOnMobile?: boolean;\n fixedHeight?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n tab: 0,\n tabCountTheme: 'primary',\n dropdownOnMobile: true,\n});\n\nconst emit = defineEmits<{\n 'tab-change': [index: number];\n}>();\n\nconst tabsProps: UseTabsProps = {\n tabGroup: props.tabGroup,\n tab: props.tab,\n tabs: props.tabs,\n tabCountTheme: props.tabCountTheme,\n dropdownOnMobile: props.dropdownOnMobile,\n fixedHeight: props.fixedHeight,\n};\n\nconst {\n selectedTabId,\n selectedTab,\n filteredTabs,\n hoverStates,\n themeClasses,\n dropdownOnMobile: showDropdownOnMobile,\n selectedComponent,\n selectedProps,\n selectedEvents,\n mouseEnter,\n mouseLeave,\n handleTabGroupTabChange: handleTabGroupChange,\n} = useTabs(tabsProps, (event, ...args) => {\n if (event === 'tab-change') {\n emit('tab-change', args[0] as number);\n }\n});\n\n// SelectInput compatible items - include count in name for mobile dropdown\nconst selectInputItems = computed(() => \n filteredTabs.value.map(tab => ({\n id: tab.id,\n name: tab.count !== undefined && tab.count !== null\n ? `${tab.name} (${tab.count})`\n : tab.name,\n disabled: tab.disabled\n }))\n);\n\n// Currently selected tab item for SelectInput\nconst selectedTabItem = computed(() => \n selectInputItems.value.find(item => item.id === selectedTabId.value) || null\n);\n\nconst handleTabGroupTabChange = (index: number) => {\n handleTabGroupChange(index);\n};\n\n// Handler for SelectInput changes\nconst handleSelectInputChange = (item: { id: number; name: string; disabled?: boolean } | null) => {\n if (!item) return;\n const index = filteredTabs.value.findIndex(t => t.id === item.id);\n if (index >= 0) {\n handleTabGroupTabChange(index);\n }\n};\n</script>\n"],"names":["props","__props","emit","__emit","tabsProps","selectedTabId","selectedTab","filteredTabs","hoverStates","themeClasses","showDropdownOnMobile","selectedComponent","selectedProps","selectedEvents","mouseEnter","mouseLeave","handleTabGroupChange","useTabs","event","args","selectInputItems","computed","tab","selectedTabItem","item","handleTabGroupTabChange","index","handleSelectInputChange","t","_openBlock","_createElementBlock","_hoisted_1","_unref","_hoisted_2","_createVNode","SelectInput","HeadlessTabGroup","HeadlessTabList","_Fragment","_renderList","tabItem","_createBlock","HeadlessTab","_withCtx","selected","_createElementVNode","_normalizeClass","$event","_hoisted_4","_toDisplayString","_hoisted_5","_renderSlot","_ctx","_KeepAlive","_resolveDynamicComponent","_mergeProps","_toHandlers"],"mappings":"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"}

package/dist/TabGroupUnderline.vue_vue_type_script_setup_true_lang-Di33js6c.js ADDED Viewed

@@ -0,0 +1,129 @@
+import { defineComponent as P, computed as k, createElementBlock as n, openBlock as t, createCommentVNode as r, createVNode as v, toDisplayString as p, unref as l, withCtx as F, createElementVNode as i, Fragment as L, renderList as U, normalizeClass as f, createTextVNode as z, renderSlot as g, createBlock as x, KeepAlive as A, resolveDynamicComponent as K, mergeProps as j, toHandlers as q } from "vue";
+import { useTabs as J } from "./composables/useTabs.js";
+import { _ as Q } from "./SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js";
+import { m as R } from "./tabs-Da32Mbhf.js";
+const W = { class: "sl-w-full" }, X = {
+  key: 0,
+  class: "sl-text-lg sl-font-semibold sl-text-gray-900 dark:sl-text-white sl-mb-4"
+}, Y = {
+  key: 1,
+  class: "sl-block sm:sl-hidden sl-mb-4"
+}, Z = { class: "sl-hidden sm:sl-block" }, I = { class: "sl-border-b sl-border-gray-200 dark:sl-border-slate-700" }, ee = {
+  class: "sl--mb-px sl-flex sl-space-x-8",
+  "aria-label": "Tabs"
+}, se = ["onClick", "onMouseenter", "onMouseleave", "disabled", "aria-current"], le = { class: "sl-mt-4" }, de = /* @__PURE__ */ P({
+  __name: "TabGroupUnderline",
+  props: {
+    tabGroup: {},
+    tabs: {},
+    tab: { default: 0 },
+    title: {},
+    tabCountTheme: { default: "primary" },
+    dropdownOnMobile: { type: Boolean, default: !0 },
+    fixedHeight: {}
+  },
+  emits: ["tab-change"],
+  setup(y, { emit: _ }) {
+    const o = y, T = _, C = {
+      tabGroup: o.tabGroup,
+      tab: o.tab,
+      tabs: o.tabs,
+      tabCountTheme: o.tabCountTheme,
+      dropdownOnMobile: o.dropdownOnMobile,
+      fixedHeight: o.fixedHeight
+    }, {
+      selectedTabId: a,
+      selectedTab: w,
+      filteredTabs: c,
+      hoverStates: M,
+      dropdownOnMobile: $,
+      selectedComponent: u,
+      selectedProps: G,
+      selectedEvents: S,
+      mouseEnter: O,
+      mouseLeave: V,
+      handleTabGroupTabChange: B,
+      syncSelectedTabForDesktop: D
+    } = J(C, (e, ...d) => {
+      e === "tab-change" && T("tab-change", d[0]);
+    }), m = k(
+      () => c.value.map((e) => ({
+        id: e.id,
+        name: e.count !== void 0 && e.count !== null ? `${e.name} (${e.count})` : e.name,
+        disabled: e.disabled
+      }))
+    ), E = k(
+      () => m.value.find((e) => e.id === a.value) || null
+    ), b = (e) => {
+      B(e);
+    }, H = (e) => {
+      e.disabled || D(e);
+    }, N = (e) => {
+      if (!e) return;
+      const d = c.value.findIndex((s) => s.id === e.id);
+      d >= 0 && b(d);
+    };
+    return (e, d) => (t(), n("div", W, [
+      e.title ? (t(), n("h2", X, p(e.title), 1)) : r("", !0),
+      l($) ? (t(), n("div", Y, [
+        v(Q, {
+          name: `${e.tabGroup}-mobile-tab-select`,
+          items: m.value,
+          "model-value": E.value,
+          "item-key": "id",
+          "item-text": "name",
+          placeholder: "Select tab",
+          "onUpdate:modelValue": N
+        }, null, 8, ["name", "items", "model-value"])
+      ])) : r("", !0),
+      v(l(R), {
+        "selected-index": l(w),
+        onChange: b
+      }, {
+        default: F(() => [
+          i("div", Z, [
+            i("div", I, [
+              i("nav", ee, [
+                (t(!0), n(L, null, U(l(c), (s) => (t(), n("button", {
+                  key: s.id,
+                  onClick: (h) => H(s),
+                  onMouseenter: (h) => l(O)(s.id),
+                  onMouseleave: (h) => l(V)(s.id),
+                  disabled: s.disabled,
+                  class: f([
+                    "sl-flex sl-whitespace-nowrap sl-border-b-2 sl-py-4 sl-px-1 sl-text-sm sl-font-medium sl-transition-colors sl-duration-200",
+                    s.id === l(a) ? "sl-border-stachelock-500 sl-text-stachelock-600 dark:sl-text-stachelock-400" : "sl-border-transparent sl-text-gray-500 dark:sl-text-slate-400 hover:sl-border-gray-200 dark:hover:sl-border-slate-600 hover:sl-text-gray-700 dark:hover:sl-text-slate-300",
+                    s.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : "sl-cursor-pointer"
+                  ]),
+                  "aria-current": s.id === l(a) ? "page" : void 0
+                }, [
+                  z(p(s.name) + " ", 1),
+                  s.count !== void 0 && s.count !== null ? (t(), n("span", {
+                    key: 0,
+                    class: f([
+                      "sl-ml-3 sl-hidden sl-rounded-full sl-py-0.5 sl-px-2.5 sl-text-xs sl-font-medium md:sl-inline-block sl-tabular-nums",
+                      s.id === l(a) ? "sl-bg-stachelock-100 dark:sl-bg-stachelock-900/30 sl-text-stachelock-600 dark:sl-text-stachelock-400" : "sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-800 dark:sl-text-slate-200",
+                      l(M)[s.id] ? "sl-ring-1 sl-ring-stachelock-600" : ""
+                    ])
+                  }, p(s.count), 3)) : r("", !0)
+                ], 42, se))), 128))
+              ])
+            ])
+          ]),
+          i("div", le, [
+            g(e.$slots, "component-heading"),
+            (t(), x(A, null, [
+              l(u) ? (t(), x(K(l(u)), j({ key: l(a) }, l(G) || {}, q(l(S) || {})), null, 16)) : r("", !0)
+            ], 1024)),
+            l(u) ? r("", !0) : g(e.$slots, "default", { key: 0 })
+          ])
+        ]),
+        _: 3
+      }, 8, ["selected-index"])
+    ]));
+  }
+});
+export {
+  de as _
+};
+//# sourceMappingURL=TabGroupUnderline.vue_vue_type_script_setup_true_lang-Di33js6c.js.map

package/dist/TabGroupUnderline.vue_vue_type_script_setup_true_lang-Di33js6c.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TabGroupUnderline.vue_vue_type_script_setup_true_lang-Di33js6c.js","sources":["../src/components/tabs/TabGroupUnderline.vue"],"sourcesContent":["\n<template>\n <div class=\"sl-w-full\">\n \n <h2 v-if=\"title\" class=\"sl-text-lg sl-font-semibold sl-text-gray-900 dark:sl-text-white sl-mb-4\">\n {{ title }}\n </h2>\n\n \n <div v-if=\"showDropdownOnMobile\" class=\"sl-block sm:sl-hidden sl-mb-4\">\n <SelectInput\n :name=\"`${tabGroup}-mobile-tab-select`\"\n :items=\"selectInputItems\"\n :model-value=\"selectedTabItem\"\n item-key=\"id\"\n item-text=\"name\"\n placeholder=\"Select tab\"\n @update:model-value=\"handleSelectInputChange\"\n />\n </div>\n\n \n <HeadlessTabGroup :selected-index=\"selectedTab\" @change=\"handleTabGroupTabChange\">\n <div class=\"sl-hidden sm:sl-block\">\n <div class=\"sl-border-b sl-border-gray-200 dark:sl-border-slate-700\">\n <nav class=\"sl--mb-px sl-flex sl-space-x-8\" aria-label=\"Tabs\">\n <button\n v-for=\"tabItem in filteredTabs\"\n :key=\"tabItem.id\"\n @click=\"selectTab(tabItem)\"\n @mouseenter=\"mouseEnter(tabItem.id)\"\n @mouseleave=\"mouseLeave(tabItem.id)\"\n :disabled=\"tabItem.disabled\"\n :class=\"[\n 'sl-flex sl-whitespace-nowrap sl-border-b-2 sl-py-4 sl-px-1 sl-text-sm sl-font-medium sl-transition-colors sl-duration-200',\n tabItem.id === selectedTabId\n ? 'sl-border-stachelock-500 sl-text-stachelock-600 dark:sl-text-stachelock-400'\n : 'sl-border-transparent sl-text-gray-500 dark:sl-text-slate-400 hover:sl-border-gray-200 dark:hover:sl-border-slate-600 hover:sl-text-gray-700 dark:hover:sl-text-slate-300',\n tabItem.disabled ? 'sl-opacity-50 sl-cursor-not-allowed' : 'sl-cursor-pointer'\n ]\"\n :aria-current=\"tabItem.id === selectedTabId ? 'page' : undefined\"\n >\n {{ tabItem.name }}\n <span\n v-if=\"tabItem.count !== undefined && tabItem.count !== null\"\n :class=\"[\n 'sl-ml-3 sl-hidden sl-rounded-full sl-py-0.5 sl-px-2.5 sl-text-xs sl-font-medium md:sl-inline-block sl-tabular-nums',\n tabItem.id === selectedTabId\n ? 'sl-bg-stachelock-100 dark:sl-bg-stachelock-900/30 sl-text-stachelock-600 dark:sl-text-stachelock-400'\n : 'sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-800 dark:sl-text-slate-200',\n hoverStates[tabItem.id] ? 'sl-ring-1 sl-ring-stachelock-600' : ''\n ]\"\n >\n {{ tabItem.count }}\n </span>\n </button>\n </nav>\n </div>\n </div>\n\n \n <div class=\"sl-mt-4\">\n <slot name=\"component-heading\" />\n \n <KeepAlive>\n <component\n v-if=\"selectedComponent\"\n :is=\"selectedComponent\"\n :key=\"selectedTabId\"\n v-bind=\"selectedProps || {}\"\n v-on=\"selectedEvents || {}\"\n />\n </KeepAlive>\n \n <slot v-if=\"!selectedComponent\" />\n </div>\n </HeadlessTabGroup>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { TabGroup as HeadlessTabGroup } from '@headlessui/vue';\nimport { useTabs, type TabCountTheme, type UseTabsProps } from '../../composables/useTabs';\nimport type { TabsItemType } from '../../types/layouts';\nimport SelectInput from '../inputs/SelectInput.vue';\n\ninterface Props {\n tabGroup: string;\n tabs: TabsItemType[];\n tab?: number | null;\n title?: string;\n tabCountTheme?: TabCountTheme;\n dropdownOnMobile?: boolean;\n fixedHeight?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n tab: 0,\n tabCountTheme: 'primary',\n dropdownOnMobile: true,\n});\n\nconst emit = defineEmits<{\n 'tab-change': [index: number];\n}>();\n\nconst tabsProps: UseTabsProps = {\n tabGroup: props.tabGroup,\n tab: props.tab,\n tabs: props.tabs,\n tabCountTheme: props.tabCountTheme,\n dropdownOnMobile: props.dropdownOnMobile,\n fixedHeight: props.fixedHeight,\n};\n\nconst {\n selectedTabId,\n selectedTab,\n filteredTabs,\n hoverStates,\n dropdownOnMobile: showDropdownOnMobile,\n selectedComponent,\n selectedProps,\n selectedEvents,\n mouseEnter,\n mouseLeave,\n handleTabGroupTabChange: handleTabGroupChange,\n syncSelectedTabForDesktop,\n} = useTabs(tabsProps, (event, ...args) => {\n if (event === 'tab-change') {\n emit('tab-change', args[0] as number);\n }\n});\n\n// SelectInput compatible items - include count in name for mobile dropdown\nconst selectInputItems = computed(() => \n filteredTabs.value.map(tab => ({\n id: tab.id,\n name: tab.count !== undefined && tab.count !== null\n ? `${tab.name} (${tab.count})`\n : tab.name,\n disabled: tab.disabled\n }))\n);\n\n// Currently selected tab item for SelectInput\nconst selectedTabItem = computed(() => \n selectInputItems.value.find(item => item.id === selectedTabId.value) || null\n);\n\nconst handleTabGroupTabChange = (index: number) => {\n handleTabGroupChange(index);\n};\n\nconst selectTab = (tabItem: TabsItemType) => {\n if (!tabItem.disabled) {\n syncSelectedTabForDesktop(tabItem);\n }\n};\n\n// Handler for SelectInput changes\nconst handleSelectInputChange = (item: { id: number; name: string; disabled?: boolean } | null) => {\n if (!item) return;\n const index = filteredTabs.value.findIndex(t => t.id === item.id);\n if (index >= 0) {\n handleTabGroupTabChange(index);\n }\n};\n</script>\n\n"],"names":["props","__props","emit","__emit","tabsProps","selectedTabId","selectedTab","filteredTabs","hoverStates","showDropdownOnMobile","selectedComponent","selectedProps","selectedEvents","mouseEnter","mouseLeave","handleTabGroupChange","syncSelectedTabForDesktop","useTabs","event","args","selectInputItems","computed","tab","selectedTabItem","item","handleTabGroupTabChange","index","selectTab","tabItem","handleSelectInputChange","t","_openBlock","_createElementBlock","_hoisted_1","title","_hoisted_2","_toDisplayString","_unref","_hoisted_3","_createVNode","SelectInput","tabGroup","HeadlessTabGroup","_createElementVNode","_hoisted_4","_hoisted_5","_hoisted_6","_Fragment","_renderList","$event","_normalizeClass","_hoisted_8","_renderSlot","_ctx","_createBlock","_KeepAlive","_resolveDynamicComponent","_mergeProps","_toHandlers"],"mappings":"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"}

package/dist/TabsInPills.vue_vue_type_script_setup_true_lang-CMxaK0Kw.js ADDED Viewed

@@ -0,0 +1,85 @@
+import { defineComponent as I, createElementBlock as l, openBlock as t, createElementVNode as o, renderSlot as d, createVNode as V, unref as s, Fragment as r, renderList as m, normalizeClass as i, withModifiers as w, createTextVNode as N, createCommentVNode as u, toDisplayString as h } from "vue";
+import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js";
+import { u as $ } from "./useSimpleTabs-CSgkChEU.js";
+const B = { class: "sl-w-full" }, E = { class: "sm:sl-hidden" }, U = { class: "sl-hidden sm:sl-block sl-overflow-x-auto" }, z = {
+  class: "sl-flex sl-flex-nowrap sl-space-x-4",
+  "aria-label": "Tabs"
+}, A = ["href", "onClick", "aria-current"], D = {
+  key: 0,
+  class: "sl-mt-4"
+}, q = /* @__PURE__ */ I({
+  __name: "TabsInPills",
+  props: {
+    tabs: {},
+    label: {},
+    badgeTheme: { default: "primary" }
+  },
+  emits: ["tab-changed"],
+  setup(p, { emit: k }) {
+    const n = p, g = k, {
+      localTabs: c,
+      selectInputItems: x,
+      selectedTabItem: f,
+      setActiveTab: b,
+      handleSelectInputChange: _,
+      hasCount: v,
+      slots: y,
+      selectId: T
+    } = $({
+      getTabs: () => n.tabs,
+      onTabChange: (a) => g("tab-changed", a),
+      includeCountInName: !0,
+      badgeTheme: n.badgeTheme
+    });
+    return (a, F) => (t(), l("div", B, [
+      o("div", E, [
+        V(S, {
+          name: s(T),
+          label: a.label,
+          items: s(x),
+          "model-value": s(f),
+          "item-key": "index",
+          "item-text": "name",
+          placeholder: "Select tab",
+          "onUpdate:modelValue": s(_)
+        }, null, 8, ["name", "label", "items", "model-value", "onUpdate:modelValue"])
+      ]),
+      o("div", U, [
+        o("nav", z, [
+          (t(!0), l(r, null, m(s(c), (e, C) => (t(), l("a", {
+            key: e.name,
+            href: e.href || "#",
+            onClick: w((L) => s(b)(C), ["prevent"]),
+            class: i([
+              e.current ? "sl-bg-stachelock-50 dark:sl-bg-stachelock-900/30 sl-text-stachelock-700 dark:sl-text-stachelock-400" : "sl-text-gray-500 dark:sl-text-slate-400 hover:sl-text-gray-700 dark:hover:sl-text-slate-300",
+              "sl-rounded-md sl-px-3 sl-py-2 sl-text-sm sl-font-medium sl-cursor-pointer sl-transition-colors sl-duration-200 sl-flex sl-items-center sl-gap-2",
+              e.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
+            ]),
+            "aria-current": e.current ? "page" : void 0
+          }, [
+            N(h(e.name) + " ", 1),
+            s(v)(e) ? (t(), l("span", {
+              key: 0,
+              class: i([
+                "sl-rounded-full sl-py-0.5 sl-px-2 sl-text-xs sl-font-medium sl-tabular-nums",
+                e.current ? "sl-bg-stachelock-100 dark:sl-bg-stachelock-800 sl-text-stachelock-600 dark:sl-text-stachelock-300" : "sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-600 dark:sl-text-slate-300"
+              ])
+            }, h(e.count), 3)) : u("", !0)
+          ], 10, A))), 128))
+        ])
+      ]),
+      d(a.$slots, "default"),
+      (t(!0), l(r, null, m(s(c), (e) => (t(), l(r, {
+        key: e.name
+      }, [
+        e.current && s(y)[e.name] ? (t(), l("div", D, [
+          d(a.$slots, e.name)
+        ])) : u("", !0)
+      ], 64))), 128))
+    ]));
+  }
+});
+export {
+  q as _
+};
+//# sourceMappingURL=TabsInPills.vue_vue_type_script_setup_true_lang-CMxaK0Kw.js.map

package/dist/TabsInPills.vue_vue_type_script_setup_true_lang-CMxaK0Kw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TabsInPills.vue_vue_type_script_setup_true_lang-CMxaK0Kw.js","sources":["../src/components/tabs/TabsInPills.vue"],"sourcesContent":["\n<template>\n <div class=\"sl-w-full\">\n \n <div class=\"sm:sl-hidden\">\n <SelectInput\n :name=\"selectId\"\n :label=\"label\"\n :items=\"selectInputItems\"\n :model-value=\"selectedTabItem\"\n item-key=\"index\"\n item-text=\"name\"\n placeholder=\"Select tab\"\n @update:model-value=\"handleSelectInputChange\"\n />\n </div>\n\n \n <div class=\"sl-hidden sm:sl-block sl-overflow-x-auto\">\n <nav class=\"sl-flex sl-flex-nowrap sl-space-x-4\" aria-label=\"Tabs\">\n <a\n v-for=\"(tab, index) in localTabs\"\n :key=\"tab.name\"\n :href=\"tab.href || '#'\"\n @click.prevent=\"setActiveTab(index)\"\n :class=\"[\n tab.current \n ? 'sl-bg-stachelock-50 dark:sl-bg-stachelock-900/30 sl-text-stachelock-700 dark:sl-text-stachelock-400' \n : 'sl-text-gray-500 dark:sl-text-slate-400 hover:sl-text-gray-700 dark:hover:sl-text-slate-300',\n 'sl-rounded-md sl-px-3 sl-py-2 sl-text-sm sl-font-medium sl-cursor-pointer sl-transition-colors sl-duration-200 sl-flex sl-items-center sl-gap-2',\n tab.disabled ? 'sl-opacity-50 sl-cursor-not-allowed' : ''\n ]\"\n :aria-current=\"tab.current ? 'page' : undefined\"\n >\n {{ tab.name }}\n <span\n v-if=\"hasCount(tab)\"\n :class=\"[\n 'sl-rounded-full sl-py-0.5 sl-px-2 sl-text-xs sl-font-medium sl-tabular-nums',\n tab.current\n ? 'sl-bg-stachelock-100 dark:sl-bg-stachelock-800 sl-text-stachelock-600 dark:sl-text-stachelock-300'\n : 'sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-600 dark:sl-text-slate-300'\n ]\"\n >\n {{ tab.count }}\n </span>\n </a>\n </nav>\n </div>\n\n \n <slot name=\"default\" />\n \n \n <template v-for=\"tab in localTabs\" :key=\"tab.name\">\n <div v-if=\"tab.current && slots[tab.name]\" class=\"sl-mt-4\">\n <slot :name=\"tab.name\" />\n </div>\n </template>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport SelectInput from '../inputs/SelectInput.vue';\nimport { useSimpleTabs } from '../../composables/useSimpleTabs';\nimport type { SimpleTabItem, TabBadgeTheme } from '../../types/tabs';\n\ninterface Props {\n tabs: SimpleTabItem[];\n label?: string;\n badgeTheme?: TabBadgeTheme;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n badgeTheme: 'primary'\n});\n\nconst emit = defineEmits<{\n 'tab-changed': [tabIndex: number];\n}>();\n\n// Use the shared composable for all tab logic\nconst {\n localTabs,\n selectInputItems,\n selectedTabItem,\n setActiveTab,\n handleSelectInputChange,\n hasCount,\n slots,\n selectId\n} = useSimpleTabs({\n getTabs: () => props.tabs,\n onTabChange: (index) => emit('tab-changed', index),\n includeCountInName: true,\n badgeTheme: props.badgeTheme\n});\n</script>\n"],"names":["props","__props","emit","__emit","localTabs","selectInputItems","selectedTabItem","setActiveTab","handleSelectInputChange","hasCount","slots","selectId","useSimpleTabs","index","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","SelectInput","_unref","label","_hoisted_3","_hoisted_4","_Fragment","_renderList","tab","_withModifiers","$event","_normalizeClass","_toDisplayString","_renderSlot","_ctx","_hoisted_6"],"mappings":";;;;;;;;;;;;;;;;;;AAsGA,UAAMA,IAAQC,GAIRC,IAAOC,GAKP;AAAA,MACJ,WAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,yBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,IAAA,IACEC,EAAc;AAAA,MAChB,SAAS,MAAMZ,EAAM;AAAA,MACrB,aAAa,CAACa,MAAUX,EAAK,eAAeW,CAAK;AAAA,MACjD,oBAAoB;AAAA,MACpB,YAAYb,EAAM;AAAA,IAAA,CACnB;sBA9FCc,EAAA,GAAAC,EAyDM,OAzDNC,GAyDM;AAAA,MAvDJC,EAWM,OAXNC,GAWM;AAAA,QAVJC,EASEC,GAAA;AAAA,UARC,MAAMC,EAAAV,CAAA;AAAA,UACN,OAAOW,EAAAA;AAAAA,UACP,OAAOD,EAAAhB,CAAA;AAAA,UACP,eAAagB,EAAAf,CAAA;AAAA,UACd,YAAS;AAAA,UACT,aAAU;AAAA,UACV,aAAY;AAAA,UACX,uBAAoBe,EAAAb,CAAA;AAAA,QAAA;;MAKzBS,EA8BM,OA9BNM,GA8BM;AAAA,QA7BJN,EA4BM,OA5BNO,GA4BM;AAAA,WA3BJV,EAAA,EAAA,GAAAC,EA0BIU,GAAA,MAAAC,EAzBqBL,EAAAjB,CAAA,GAAS,CAAxBuB,GAAKd,YADfE,EA0BI,KAAA;AAAA,YAxBD,KAAKY,EAAI;AAAA,YACT,MAAMA,EAAI,QAAI;AAAA,YACd,SAAKC,EAAA,CAAAC,MAAUR,EAAAd,CAAA,EAAaM,CAAK,GAAA,CAAA,SAAA,CAAA;AAAA,YACjC,OAAKiB,EAAA;AAAA,cAAgBH,EAAI;;cAA0ZA,EAAI,WAAQ,wCAAA;AAAA,YAAA;YAO/b,gBAAcA,EAAI,mBAAmB;AAAA,UAAA;gBAEnCA,EAAI,IAAI,IAAG,KACd,CAAA;AAAA,YACQN,EAAAZ,CAAA,EAASkB,CAAG,UADpBZ,EAUO,QAAA;AAAA;cARJ,OAAKe,EAAA;AAAA;gBAA+GH,EAAI;;eAOtHI,EAAAJ,EAAI,KAAK,GAAA,CAAA;;;;MAOpBK,EAAuBC,EAAA,QAAA,SAAA;AAAA,cAGvBlB,EAIWU,GAAA,MAAAC,EAJaL,EAAAjB,CAAA,GAAS,CAAhBuB;QAAwB,KAAAA,EAAI;AAAA,MAAA;QAChCA,EAAI,WAAWN,KAAMM,EAAI,IAAI,KAAxCb,EAAA,GAAAC,EAEM,OAFNmB,GAEM;AAAA,UADJF,EAAyBC,EAAA,QAAZN,EAAI,IAAI;AAAA,QAAA;;;;;"}