@leaflink/stash 51.12.7 → 51.12.9

package/dist/Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js

@@ -0,0 +1,130 @@
+import { defineComponent as N, computed as f, provide as R, useTemplateRef as T, onMounted as S, onUpdated as B, watch as $, onBeforeUnmount as D, createElementBlock as y, openBlock as p, createBlock as x, unref as C, normalizeClass as v, withCtx as w, renderSlot as b, createElementVNode as A, createTextVNode as H, createVNode as O, toDisplayString as j } from "vue";
+import { t as E } from "./locale.js";
+import q from "./Icon.js";
+import z from "./MoreActions.js";
+const J = Object.freeze({
+  key: Symbol("TABS_INJECTION_KEY")
+});
+var g = /* @__PURE__ */ ((a) => (a.Line = "line", a.Enclosed = "enclosed", a))(g || {});
+const U = ["aria-expanded", "onClick"], F = /* @__PURE__ */ N({
+  __name: "Tabs",
+  props: {
+    activeTab: {},
+    variant: { default: g.Line }
+  },
+  emits: ["update:activeTab"],
+  setup(a, { emit: M }) {
+    const I = M, o = a, s = f({
+      get() {
+        return o.activeTab;
+      },
+      set(e) {
+        I("update:activeTab", e);
+      }
+    });
+    function L(e) {
+      s.value = e;
+    }
+    R(J.key, {
+      activeTab: f(() => s.value),
+      variant: f(() => o.variant),
+      setActiveTab: L
+    });
+    const r = T("moreDropdownMenuRef"), i = T("tabsContainerRef"), l = /* @__PURE__ */ new Map();
+    function h() {
+      l.forEach((e, t) => {
+        t.removeEventListener("click", e);
+      }), l.clear();
+    }
+    function c() {
+      if (!r.value) return;
+      h(), r.value.querySelectorAll("[data-action-id]").forEach((t) => {
+        const n = t.getAttribute("data-action-id");
+        if (!n) return;
+        const d = s.value === n;
+        t.setAttribute("aria-selected", d ? "true" : "false");
+        const k = () => {
+          if (i.value) {
+            const u = i.value.querySelector(
+              `[role="tab"][data-action-id="${n}"]`
+            ), m = u == null ? void 0 : u.firstChild;
+            m && m instanceof HTMLElement && m.click();
+          }
+        };
+        t.addEventListener("click", k), l.set(t, k);
+      });
+    }
+    return S(() => {
+      c();
+    }), B(() => {
+      c();
+    }), $(s, () => {
+      c();
+    }), D(() => {
+      h();
+    }), (e, t) => (p(), y("div", {
+      ref_key: "tabsContainerRef",
+      ref: i,
+      class: "stash-tabs tw-relative",
+      role: "tabList",
+      "data-test": "stash-tabs"
+    }, [
+      e.$slots["more-actions"] ? (p(), x(z, {
+        key: 0,
+        class: v(["stash-tabs-list tw-flex tw-items-end", {
+          "stash-tabs-list--line": e.variant === "line",
+          "stash-tabs-list--enclosed": e.variant === "enclosed",
+          "tw-gap-6": e.variant === "line"
+        }]),
+        "more-button-text": C(E)("ll.more"),
+        "dropdown-mode": "custom",
+        "actions-container-class": {
+          "tw-gap-0": e.variant === "enclosed",
+          "tw-gap-6": e.variant === "line"
+        },
+        "actions-container-tag": "ul"
+      }, {
+        "more-actions": w(() => [
+          A("div", {
+            ref_key: "moreDropdownMenuRef",
+            ref: r
+          }, [
+            b(e.$slots, "more-actions")
+          ], 512)
+        ]),
+        toggle: w(({ toggle: n, isOpen: d }) => [
+          A("button", {
+            "aria-haspopup": "menu",
+            "aria-expanded": d,
+            class: v(["tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-border-solid tw-px-6 tw-py-1.5 tw-text-sm tw-font-medium tw-text-blue-500 hover:tw-text-blue-700", { "tw-border-t-4 tw-border-transparent": o.variant === "enclosed" }]),
+            type: "button",
+            onClick: n
+          }, [
+            H(j(C(E)("ll.more")) + " ", 1),
+            O(q, { name: "caret-down" })
+          ], 10, U)
+        ]),
+        default: w(() => [
+          b(e.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "more-button-text", "actions-container-class"])) : (p(), y("ul", {
+        key: 1,
+        class: v(["stash-tabs-list tw-flex tw-items-end tw-overflow-x-scroll", {
+          "stash-tabs-list--line": e.variant === "line",
+          "stash-tabs-list--enclosed": e.variant === "enclosed",
+          "tw-gap-0": e.variant === "enclosed",
+          "tw-gap-6": e.variant === "line"
+        }])
+      }, [
+        b(e.$slots, "default")
+      ], 2))
+    ], 512));
+  }
+});
+export {
+  J as T,
+  F as _,
+  g as a
+};
+//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js.map

package/dist/Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js","sources":["../src/components/Tabs/keys.ts","../src/components/Tabs/models.ts","../src/components/Tabs/Tabs.vue"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TabsInjection } from './models';\n\nexport const TABS_INJECTION: Injection<TabsInjection> = Object.freeze({\n  key: Symbol('TABS_INJECTION_KEY'),\n});\n","import { ComputedRef } from 'vue';\n\nexport enum TabVariant {\n  Line = 'line',\n  Enclosed = 'enclosed',\n}\n\nexport type TabVariants = `${TabVariant}`;\n\nexport interface TabsInjection {\n  activeTab: ComputedRef<string>;\n  variant: ComputedRef<TabVariants>;\n  setActiveTab: (newTabValue: string) => void;\n}\n","<script lang=\"ts\">\n  import { TabVariant, TabVariants } from './models';\n\n  export * from './keys';\n  export * from './models';\n\n  export interface TabsProps {\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * Tabs variant\n     */\n    variant?: TabVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, onBeforeUnmount, onMounted, onUpdated, provide, useTemplateRef, watch } from 'vue';\n\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n  import MoreActions from '../MoreActions/MoreActions.vue';\n  import { TABS_INJECTION } from './keys';\n\n  const emit = defineEmits<{\n    (e: 'update:activeTab', newTabValue: TabsProps['activeTab']): void;\n  }>();\n\n  const props = withDefaults(defineProps<TabsProps>(), {\n    variant: TabVariant.Line,\n  });\n\n  const currentActiveTab = computed({\n    get() {\n      return props.activeTab;\n    },\n    set(nv: TabsProps['activeTab']) {\n      emit('update:activeTab', nv);\n    },\n  });\n\n  function setActiveTab(newTabValue: TabsProps['activeTab']) {\n    currentActiveTab.value = newTabValue;\n  }\n\n  provide(TABS_INJECTION.key, {\n    activeTab: computed(() => currentActiveTab.value),\n    variant: computed(() => props.variant),\n    setActiveTab,\n  });\n\n  const moreDropdownMenuRef = useTemplateRef<HTMLElement>('moreDropdownMenuRef');\n  const tabsContainerRef = useTemplateRef<HTMLElement>('tabsContainerRef');\n\n  // Store event listeners to allow proper cleanup\n  const eventListeners = new Map<Element, EventListener>();\n\n  function cleanupMoreActionsHandlers() {\n    eventListeners.forEach((listener, element) => {\n      element.removeEventListener('click', listener);\n    });\n    eventListeners.clear();\n  }\n\n  // Setup automatic handlers for MenuItem elements in more-actions dropdown\n  function setupMoreActionsHandlers() {\n    if (!moreDropdownMenuRef.value) return;\n\n    // Remove existing listeners first to prevent duplication\n    cleanupMoreActionsHandlers();\n\n    const menuItems = moreDropdownMenuRef.value.querySelectorAll('[data-action-id]');\n\n    menuItems.forEach((item) => {\n      const actionId = item.getAttribute('data-action-id');\n      if (!actionId) return;\n\n      // Update aria-selected based on active tab\n      const isActive = currentActiveTab.value === actionId;\n      item.setAttribute('aria-selected', isActive ? 'true' : 'false');\n\n      // Create and store the listener\n      const listener = () => {\n        // Find and click the original tab in the actions container\n        if (tabsContainerRef.value) {\n          const originalTab = tabsContainerRef.value.querySelector<HTMLElement>(\n            `[role=\"tab\"][data-action-id=\"${actionId}\"]`,\n          );\n          const firstChild = originalTab?.firstChild;\n          if (firstChild && firstChild instanceof HTMLElement) {\n            firstChild.click();\n          }\n        }\n      };\n\n      item.addEventListener('click', listener);\n      eventListeners.set(item, listener);\n    });\n  }\n\n  onMounted(() => {\n    setupMoreActionsHandlers();\n  });\n\n  onUpdated(() => {\n    setupMoreActionsHandlers();\n  });\n\n  watch(currentActiveTab, () => {\n    setupMoreActionsHandlers();\n  });\n\n  onBeforeUnmount(() => {\n    cleanupMoreActionsHandlers();\n  });\n</script>\n\n<template>\n  <div ref=\"tabsContainerRef\" class=\"stash-tabs tw-relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <template v-if=\"$slots['more-actions']\">\n      <MoreActions\n        class=\"stash-tabs-list tw-flex tw-items-end\"\n        :class=\"{\n          'stash-tabs-list--line': variant === 'line',\n          'stash-tabs-list--enclosed': variant === 'enclosed',\n          'tw-gap-6': variant === 'line',\n        }\"\n        :more-button-text=\"t('ll.more')\"\n        dropdown-mode=\"custom\"\n        :actions-container-class=\"{\n          'tw-gap-0': variant === 'enclosed',\n          'tw-gap-6': variant === 'line',\n        }\"\n        actions-container-tag=\"ul\"\n      >\n        <slot></slot>\n\n        <template #more-actions>\n          <div ref=\"moreDropdownMenuRef\">\n            <slot name=\"more-actions\"></slot>\n          </div>\n        </template>\n\n        <template #toggle=\"{ toggle, isOpen }\">\n          <button\n            aria-haspopup=\"menu\"\n            :aria-expanded=\"isOpen\"\n            class=\"tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-border-solid tw-px-6 tw-py-1.5 tw-text-sm tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\"\n            :class=\"{ 'tw-border-t-4 tw-border-transparent': props.variant === 'enclosed' }\"\n            type=\"button\"\n            @click=\"toggle\"\n          >\n            {{ t('ll.more') }}\n            <Icon name=\"caret-down\" />\n          </button>\n        </template>\n      </MoreActions>\n    </template>\n\n    <template v-else>\n      <ul\n        class=\"stash-tabs-list tw-flex tw-items-end tw-overflow-x-scroll\"\n        :class=\"{\n          'stash-tabs-list--line': variant === 'line',\n          'stash-tabs-list--enclosed': variant === 'enclosed',\n          'tw-gap-0': variant === 'enclosed',\n          'tw-gap-6': variant === 'line',\n        }\"\n      >\n        <slot></slot>\n      </ul>\n    </template>\n  </div>\n</template>\n"],"names":["TABS_INJECTION","TabVariant","emit","__emit","props","__props","currentActiveTab","computed","nv","setActiveTab","newTabValue","provide","moreDropdownMenuRef","useTemplateRef","tabsContainerRef","eventListeners","cleanupMoreActionsHandlers","listener","element","setupMoreActionsHandlers","item","actionId","isActive","originalTab","firstChild","onMounted","onUpdated","watch","onBeforeUnmount"],"mappings":";;;;AAGO,MAAMA,IAA2C,OAAO,OAAO;AAAA,EACpE,KAAK,OAAO,oBAAoB;AAClC,CAAC;ACHM,IAAKC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YAFDA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;ACyBV,UAAMC,IAAOC,GAIPC,IAAQC,GAIRC,IAAmBC,EAAS;AAAA,MAChC,MAAM;AACJ,eAAOH,EAAM;AAAA,MACf;AAAA,MACA,IAAII,GAA4B;AAC9B,QAAAN,EAAK,oBAAoBM,CAAE;AAAA,MAC7B;AAAA,IAAA,CACD;AAED,aAASC,EAAaC,GAAqC;AACzD,MAAAJ,EAAiB,QAAQI;AAAA,IAC3B;AAEA,IAAAC,EAAQX,EAAe,KAAK;AAAA,MAC1B,WAAWO,EAAS,MAAMD,EAAiB,KAAK;AAAA,MAChD,SAASC,EAAS,MAAMH,EAAM,OAAO;AAAA,MACrC,cAAAK;AAAA,IAAA,CACD;AAED,UAAMG,IAAsBC,EAA4B,qBAAqB,GACvEC,IAAmBD,EAA4B,kBAAkB,GAGjEE,wBAAqB,IAAA;AAE3B,aAASC,IAA6B;AACpC,MAAAD,EAAe,QAAQ,CAACE,GAAUC,MAAY;AAC5C,QAAAA,EAAQ,oBAAoB,SAASD,CAAQ;AAAA,MAC/C,CAAC,GACDF,EAAe,MAAA;AAAA,IACjB;AAGA,aAASI,IAA2B;AAClC,UAAI,CAACP,EAAoB,MAAO;AAGhC,MAAAI,EAAA,GAEkBJ,EAAoB,MAAM,iBAAiB,kBAAkB,EAErE,QAAQ,CAACQ,MAAS;AAC1B,cAAMC,IAAWD,EAAK,aAAa,gBAAgB;AACnD,YAAI,CAACC,EAAU;AAGf,cAAMC,IAAWhB,EAAiB,UAAUe;AAC5C,QAAAD,EAAK,aAAa,iBAAiBE,IAAW,SAAS,OAAO;AAG9D,cAAML,IAAW,MAAM;AAErB,cAAIH,EAAiB,OAAO;AAC1B,kBAAMS,IAAcT,EAAiB,MAAM;AAAA,cACzC,gCAAgCO,CAAQ;AAAA,YAAA,GAEpCG,IAAaD,KAAA,gBAAAA,EAAa;AAChC,YAAIC,KAAcA,aAAsB,eACtCA,EAAW,MAAA;AAAA,UAEf;AAAA,QACF;AAEA,QAAAJ,EAAK,iBAAiB,SAASH,CAAQ,GACvCF,EAAe,IAAIK,GAAMH,CAAQ;AAAA,MACnC,CAAC;AAAA,IACH;AAEA,WAAAQ,EAAU,MAAM;AACd,MAAAN,EAAA;AAAA,IACF,CAAC,GAEDO,EAAU,MAAM;AACd,MAAAP,EAAA;AAAA,IACF,CAAC,GAEDQ,EAAMrB,GAAkB,MAAM;AAC5B,MAAAa,EAAA;AAAA,IACF,CAAC,GAEDS,EAAgB,MAAM;AACpB,MAAAZ,EAAA;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}