@leaflink/stash 49.1.0 → 49.3.0

package/dist/DataViewToolbar.js

@@ -1,4 +1,4 @@
-import { defineComponent as $, inject as j, ref as z, computed as x, onBeforeMount as U, openBlock as a, createElementBlock as n, normalizeClass as W, unref as e, createElementVNode as k, createBlock as F, createCommentVNode as s, renderSlot as J, toDisplayString as K, Fragment as L, createVNode as r, withCtx as y } from "vue";
+import { defineComponent as $, inject as j, ref as z, computed as x, onBeforeMount as U, openBlock as a, createElementBlock as r, normalizeClass as W, unref as e, createElementVNode as k, createBlock as F, createCommentVNode as s, renderSlot as J, toDisplayString as K, Fragment as L, createVNode as n, withCtx as y } from "vue";
 import { t as S } from "./locale.js";
 import _ from "./Button.js";
 import O from "./Checkbox.js";
@@ -25,84 +25,86 @@ const q = { class: "tw-flex tw-place-items-center" }, G = { class: "tw-flex tw-i
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
     hidePageStats: { type: Boolean, default: !1 },
-    radius: { default: "rounded" },
-    someRowsSelected: { type: Boolean, default: !1 }
+    radius: { default: void 0 },
+    someRowsSelected: { type: Boolean, default: !1 },
+    hasTabsAbove: { type: Boolean, default: !1 }
   },
   emits: ["select"],
   setup(E, { emit: P }) {
-    const o = E, V = P, {
+    const t = E, V = P, {
       isWithinModule: i,
-      variant: u,
-      density: m,
+      variant: m,
+      density: p,
       currentPage: l,
-      hasToolbar: p,
+      hasToolbar: w,
       isPaginationEnabled: N,
       isSelectable: R,
-      pageCount: w,
-      pageSize: f,
-      totalDataCount: v,
-      goPrevPage: D,
-      goNextPage: I,
-      isEmpty: T,
-      isLoading: A
-    } = j(B.key, B.defaults), b = z(0), g = x(() => i.value ? "none" : u.value === "table" ? "rounded-top" : o.radius), M = x(() => {
-      const d = f.value * (l.value - 1) + 1, t = Math.min(f.value * l.value, v.value), c = v.value;
-      return S("ll.pageStats", { from: d, to: t, total: c });
+      pageCount: f,
+      pageSize: v,
+      totalDataCount: b,
+      goPrevPage: T,
+      goNextPage: A,
+      isEmpty: D,
+      isLoading: I
+    } = j(B.key, B.defaults), h = z(0), d = x(() => t.radius ? t.radius : i.value ? "none" : m.value === "table" ? t.hasTabsAbove ? "rounded-top-right" : "rounded-top" : "rounded"), M = x(() => {
+      const u = v.value * (l.value - 1) + 1, o = Math.min(v.value * l.value, b.value), c = b.value;
+      return S("ll.pageStats", { from: u, to: o, total: c });
     });
-    function h() {
-      V("select"), b.value++;
+    function g() {
+      V("select"), h.value++;
     }
     return U(() => {
-      p && (p.value = !0);
-    }), (d, t) => (a(), n("div", {
-      class: W(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5", {
+      w && (w.value = !0);
+    }), (u, o) => (a(), r("div", {
+      class: W(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5 tw-shadow", {
         "tw-border-t tw-border-ice-200": e(i),
-        "tw-rounded": g.value === "rounded",
-        "tw-rounded-t": g.value === "rounded-top",
-        "tw-mb-3": e(u) !== "table" && !e(i),
-        "tw-px-0": e(m) === "compact",
-        "lg:tw-px-3": e(m) === "comfortable"
+        "tw-rounded-tr": d.value === "rounded-top-right",
+        "tw-rounded": d.value === "rounded",
+        "tw-rounded-t": d.value === "rounded-top",
+        "tw-mb-3": e(m) !== "table" && !e(i),
+        "tw-px-0": e(p) === "compact",
+        "lg:tw-px-3": e(p) === "comfortable"
       }]),
       "data-test": "stash-data-view-toolbar"
     }, [
       k("div", q, [
-        e(R) && !e(T) ? (a(), F(O, {
-          key: b.value,
-          checked: o.allRowsSelected,
-          indeterminate: o.someRowsSelected && !o.allRowsSelected,
+        e(R) && !e(D) ? (a(), F(O, {
+          key: h.value,
+          checked: t.allRowsSelected,
+          indeterminate: t.someRowsSelected && !t.allRowsSelected,
           title: e(S)("ll.selectAll"),
-          disabled: e(A),
-          "onUpdate:indeterminate": h,
-          "onUpdate:checked": h
+          disabled: e(I),
+          "onUpdate:indeterminate": g,
+          "onUpdate:checked": g
         }, null, 8, ["checked", "indeterminate", "title", "disabled"])) : s("", !0),
         k("div", G, [
-          J(d.$slots, "default")
+          J(u.$slots, "default")
         ])
       ]),
-      e(N) ? (a(), n("div", H, [
-        o.hidePageStats ? s("", !0) : (a(), n("span", Q, K(M.value), 1)),
-        e(w) > 1 ? (a(), n(L, { key: 1 }, [
-          r(_, {
+      e(N) ? (a(), r("div", H, [
+        t.hidePageStats ? s("", !0) : (a(), r("span", Q, K(M.value), 1)),
+        e(f) > 1 ? (a(), r(L, { key: 1 }, [
+          n(_, {
             icon: "",
             class: "tw-h-9 tw-w-9 tw-p-1.5",
             "data-test": "button|prev-page",
             disabled: e(l) === 1,
-            onClick: t[0] || (t[0] = (c) => e(D)({ shouldEmit: !0 }))
+            onClick: o[0] || (o[0] = (c) => e(T)({ shouldEmit: !0 }))
           }, {
             default: y(() => [
-              r(C, { name: "chevron-left" })
+              n(C, { name: "chevron-left" })
             ]),
             _: 1
           }, 8, ["disabled"]),
-          r(_, {
+          n(_, {
             icon: "",
             class: "tw-h-9 tw-w-9 tw-p-1.5",
             "data-test": "button|next-page",
-            disabled: e(l) === e(w),
-            onClick: t[1] || (t[1] = (c) => e(I)({ shouldEmit: !0 }))
+            disabled: e(l) === e(f),
+            onClick: o[1] || (o[1] = (c) => e(A)({ shouldEmit: !0 }))
           }, {
             default: y(() => [
-              r(C, { name: "chevron-right" })
+              n(C, { name: "chevron-right" })
             ]),
             _: 1
           }, 8, ["disabled"])

package/dist/DataViewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: 'rounded',\n    someRowsSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-top';\n    }\n\n    return props.radius;\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <div class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6\">\n        <!-- @slot default -->\n        <slot></slot>\n      </div>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5 tw-text-xs\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginationEnabled","isSelectable","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isEmpty","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","ref","computedRadius","computed","pageStats","from","to","total","t","onSelect","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCE,UAAMA,IAAQC,GAORC,IAAOC,GAIP;AAAA,MACJ,gBAAAC;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAcC,EAAI,CAAC,GAEnBC,IAAiBC,EAA0B,MAC3CnB,EAAe,QACV,SAGLC,EAAgB,UAAU,UACrB,gBAGFL,EAAM,MACd,GAGKwB,IAAYD,EAAS,MAAM;AAC/B,YAAME,IAAOb,EAAS,SAASL,EAAY,QAAQ,KAAK,GAClDmB,IAAK,KAAK,IAAId,EAAS,QAAQL,EAAY,OAAOM,EAAe,KAAK,GACtEc,IAAQd,EAAe;AAE7B,aAAOe,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;AAGD,aAASE,IAAW;AAClB,MAAA3B,EAAK,QAAQ,GAODkB,EAAA;AAAA,IACd;AAEA,WAAAU,EAAc,MAAM;AAClB,MAAItB,MACFA,EAAW,QAAQ;AAAA,IACrB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n\n    /**\n     * When DataView has tabs above it, we need to remove the top left rounded corner\n     */\n    hasTabsAbove?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: undefined,\n    someRowsSelected: false,\n    hasTabsAbove: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (props.radius) {\n      return props.radius;\n    }\n\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      if (props.hasTabsAbove) {\n        return 'rounded-top-right';\n      }\n\n      return 'rounded-top';\n    }\n\n    return 'rounded';\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5 tw-shadow\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded-tr': computedRadius === 'rounded-top-right',\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <div class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6\">\n        <!-- @slot default -->\n        <slot></slot>\n      </div>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5 tw-text-xs\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginationEnabled","isSelectable","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isEmpty","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","ref","computedRadius","computed","pageStats","from","to","total","t","onSelect","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCE,UAAMA,IAAQC,GAQRC,IAAOC,GAIP;AAAA,MACJ,gBAAAC;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAcC,EAAI,CAAC,GAEnBC,IAAiBC,EAA0B,MAC3CvB,EAAM,SACDA,EAAM,SAGXI,EAAe,QACV,SAGLC,EAAgB,UAAU,UACxBL,EAAM,eACD,sBAGF,gBAGF,SACR,GAGKwB,IAAYD,EAAS,MAAM;AAC/B,YAAME,IAAOb,EAAS,SAASL,EAAY,QAAQ,KAAK,GAClDmB,IAAK,KAAK,IAAId,EAAS,QAAQL,EAAY,OAAOM,EAAe,KAAK,GACtEc,IAAQd,EAAe;AAE7B,aAAOe,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;AAGD,aAASE,IAAW;AAClB,MAAA3B,EAAK,QAAQ,GAODkB,EAAA;AAAA,IACd;AAEA,WAAAU,EAAc,MAAM;AAClB,MAAItB,MACFA,EAAW,QAAQ;AAAA,IACrB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DataViewToolbar.vue.d.ts

@@ -52,27 +52,34 @@ export declare interface DataViewToolbarProps {
      * version on TableHeaderRow.
      */
     someRowsSelected?: boolean;
+    /**
+     * When DataView has tabs above it, we need to remove the top left rounded corner
+     */
+    hasTabsAbove?: boolean;
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
     allRowsSelected: boolean;
     hidePageStats: boolean;
-    radius: string;
+    radius: undefined;
     someRowsSelected: boolean;
+    hasTabsAbove: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     select: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
     allRowsSelected: boolean;
     hidePageStats: boolean;
-    radius: string;
+    radius: undefined;
     someRowsSelected: boolean;
+    hasTabsAbove: boolean;
 }>>> & Readonly<{
     onSelect?: (() => any) | undefined;
 }>, {
-    radius: "none" | "rounded" | "rounded-top";
+    radius: "none" | "rounded" | "rounded-top" | "rounded-top-right";
     allRowsSelected: boolean;
     hidePageStats: boolean;
     someRowsSelected: boolean;
+    hasTabsAbove: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
@@ -81,7 +88,8 @@ export default _default;
 declare enum ToolbarRadius {
     None = "none",
     Rounded = "rounded",
-    RoundedTop = "rounded-top"
+    RoundedTop = "rounded-top",
+    RoundedTopRight = "rounded-top-right"
 }
 
 declare type ToolbarRadiuses = `${ToolbarRadius}`;

package/dist/ObfuscateText.js

@@ -1,6 +1,7 @@
-import { defineComponent as r, ref as u, computed as c, openBlock as s, createElementBlock as i, createTextVNode as p, toDisplayString as f, createBlock as h, withCtx as m, createVNode as d, normalizeClass as g, createCommentVNode as x } from "vue";
-import C from "./Button.js";
-import b from "./Icon.js";
+import { defineComponent as n, ref as r, computed as u, openBlock as a, createElementBlock as c, createTextVNode as i, toDisplayString as m, createBlock as f, withCtx as p, createVNode as h, normalizeClass as d, createCommentVNode as g } from "vue";
+import x from "./Button.js";
+import C from "./Icon.js";
+import b from "./utils/obfuscateText.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
@@ -9,49 +10,47 @@ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const k = {
   class: "stash-obfuscate-text",
   "data-test": "stash-obfuscate-text"
-}, A = /* @__PURE__ */ r({
+}, D = /* @__PURE__ */ n({
   name: "ll-obfuscate-text",
   __name: "ObfuscateText",
   props: {
     text: {},
+    obfuscateAll: { type: Boolean, default: !1 },
+    showToggle: { type: Boolean, default: !1 },
+    lengthToKeep: { default: 0 },
     maskChar: { default: "•" },
     maskCharCount: { default: 10 },
-    lengthToKeep: { default: 0 },
-    position: { default: "start" },
-    obfuscateAll: { type: Boolean, default: !1 },
-    showToggle: { type: Boolean, default: !1 }
+    position: { default: "start" }
   },
-  setup(l) {
-    const e = u(!1), t = l, n = c(() => {
-      if (t.showToggle && e.value)
-        return t.text;
-      if (t.obfuscateAll || !t.lengthToKeep)
-        return t.maskChar.repeat(t.maskCharCount);
-      let o;
-      return t.position === "end" ? (o = t.text.substring(0, t.lengthToKeep), o + t.maskChar.repeat(t.maskCharCount)) : (o = t.text.substring(t.text.length - t.lengthToKeep), t.maskChar.repeat(t.maskCharCount) + o);
-    });
-    return (o, a) => (s(), i("span", k, [
-      p(f(n.value) + " ", 1),
-      o.showToggle ? (s(), h(C, {
+  setup(s) {
+    const e = r(!1), t = s, l = u(() => t.showToggle && e.value ? t.text : t.obfuscateAll ? t.maskChar.repeat(t.maskCharCount) : b(t.text, {
+      maskChar: t.maskChar,
+      maskCharCount: t.maskCharCount,
+      lengthToKeep: t.lengthToKeep,
+      position: t.position
+    }));
+    return (w, o) => (a(), c("span", k, [
+      i(m(l.value) + " ", 1),
+      t.showToggle ? (a(), f(x, {
         key: 0,
         class: "tw-ml-1 tw-h-auto tw-w-auto tw-p-0",
         icon: "",
         type: "button",
-        onClick: a[0] || (a[0] = (w) => e.value = !e.value)
+        onClick: o[0] || (o[0] = (T) => e.value = !e.value)
       }, {
-        default: m(() => [
-          d(b, {
+        default: p(() => [
+          h(C, {
             name: e.value ? "hide" : "show",
-            class: g(["tw-cursor-pointer", e.value ? "stash-obfuscate-text__hide-toggle-icon" : "stash-obfuscate-text__show-toggle-icon"]),
+            class: d(["tw-cursor-pointer", e.value ? "stash-obfuscate-text__hide-toggle-icon" : "stash-obfuscate-text__show-toggle-icon"]),
             "data-test": e.value ? "stash-obfuscate-text|hide-toggle-icon" : "stash-obfuscate-text|show-toggle-icon"
           }, null, 8, ["name", "class", "data-test"])
         ]),
         _: 1
-      })) : x("", !0)
+      })) : g("", !0)
     ]));
   }
 });
 export {
-  A as default
+  D as default
 };
 //# sourceMappingURL=ObfuscateText.js.map

package/dist/ObfuscateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  export interface ObfuscateTextProps {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Character to obfuscate text with\n     */\n    maskChar?: string;\n\n    /**\n     * The number of masked characters to display\n     */\n    maskCharCount?: number;\n\n    /**\n     * Num of characters to keep revealed.\n     * Default will obfuscate entire string\n     * with length of maskCharCount.\n     */\n    lengthToKeep?: number;\n\n    /**\n     * Position to start obfuscating text\n     */\n    position?: 'start' | 'end';\n\n    /**\n     * Whether to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    if (props.showToggle && isFullTextVisible.value) {\n      return props.text;\n    }\n\n    if (props.obfuscateAll || !props.lengthToKeep) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    let charsToKeep;\n\n    if (props.position === 'end') {\n      charsToKeep = props.text.substring(0, props.lengthToKeep);\n\n      return charsToKeep + props.maskChar.repeat(props.maskCharCount);\n    } else {\n      charsToKeep = props.text.substring(props.text.length - props.lengthToKeep);\n\n      return props.maskChar.repeat(props.maskCharCount) + charsToKeep;\n    }\n  });\n</script>\n\n<template>\n  <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n    {{ obfuscatedText }}\n    <Button\n      v-if=\"showToggle\"\n      class=\"tw-ml-1 tw-h-auto tw-w-auto tw-p-0\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"tw-cursor-pointer\"\n        :class=\"isFullTextVisible ? 'stash-obfuscate-text__hide-toggle-icon' : 'stash-obfuscate-text__show-toggle-icon'\"\n        :data-test=\"\n          isFullTextVisible ? 'stash-obfuscate-text|hide-toggle-icon' : 'stash-obfuscate-text|show-toggle-icon'\n        \"\n      />\n    </Button>\n  </span>\n</template>\n"],"names":["isFullTextVisible","ref","props","__props","obfuscatedText","computed","charsToKeep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgDQ,UAAAA,IAAoBC,EAAI,EAAK,GAE7BC,IAAQC,GASRC,IAAiBC,EAAS,MAAM;AAChC,UAAAH,EAAM,cAAcF,EAAkB;AACxC,eAAOE,EAAM;AAGf,UAAIA,EAAM,gBAAgB,CAACA,EAAM;AAC/B,eAAOA,EAAM,SAAS,OAAOA,EAAM,aAAa;AAG9C,UAAAI;AAEA,aAAAJ,EAAM,aAAa,SACrBI,IAAcJ,EAAM,KAAK,UAAU,GAAGA,EAAM,YAAY,GAEjDI,IAAcJ,EAAM,SAAS,OAAOA,EAAM,aAAa,MAE9DI,IAAcJ,EAAM,KAAK,UAAUA,EAAM,KAAK,SAASA,EAAM,YAAY,GAElEA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAAII;AAAA,IACtD,CACD;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  import obfuscateText, { ObfuscateTextOptions } from '../../utils/obfuscateText';\n\n  export interface ObfuscateTextProps extends ObfuscateTextOptions {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Whether to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    if (props.showToggle && isFullTextVisible.value) {\n      return props.text;\n    }\n\n    if (props.obfuscateAll) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    return obfuscateText(props.text, {\n      maskChar: props.maskChar,\n      maskCharCount: props.maskCharCount,\n      lengthToKeep: props.lengthToKeep,\n      position: props.position,\n    });\n  });\n</script>\n\n<template>\n  <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n    {{ obfuscatedText }}\n    <Button\n      v-if=\"props.showToggle\"\n      class=\"tw-ml-1 tw-h-auto tw-w-auto tw-p-0\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"tw-cursor-pointer\"\n        :class=\"isFullTextVisible ? 'stash-obfuscate-text__hide-toggle-icon' : 'stash-obfuscate-text__show-toggle-icon'\"\n        :data-test=\"\n          isFullTextVisible ? 'stash-obfuscate-text|hide-toggle-icon' : 'stash-obfuscate-text|show-toggle-icon'\n        \"\n      />\n    </Button>\n  </span>\n</template>\n"],"names":["isFullTextVisible","ref","props","__props","obfuscatedText","computed","obfuscateText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BQ,UAAAA,IAAoBC,EAAI,EAAK,GAE7BC,IAAQC,GASRC,IAAiBC,EAAS,MAC1BH,EAAM,cAAcF,EAAkB,QACjCE,EAAM,OAGXA,EAAM,eACDA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAG3CI,EAAcJ,EAAM,MAAM;AAAA,MAC/B,UAAUA,EAAM;AAAA,MAChB,eAAeA,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,UAAUA,EAAM;AAAA,IAAA,CACjB,CACF;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ObfuscateText.vue.d.ts

@@ -50,11 +50,13 @@ declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VL
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
-export declare interface ObfuscateTextProps {
+declare interface ObfuscateTextOptions {
     /**
-     * The full text
+     * Num of characters to keep revealed.
+     * Default will obfuscate entire string
+     * with length of maskCharCount.
      */
-    text: string;
+    lengthToKeep?: number;
     /**
      * Character to obfuscate text with
      */
@@ -63,16 +65,17 @@ export declare interface ObfuscateTextProps {
      * The number of masked characters to display
      */
     maskCharCount?: number;
-    /**
-     * Num of characters to keep revealed.
-     * Default will obfuscate entire string
-     * with length of maskCharCount.
-     */
-    lengthToKeep?: number;
     /**
      * Position to start obfuscating text
      */
     position?: 'start' | 'end';
+}
+
+export declare interface ObfuscateTextProps extends ObfuscateTextOptions {
+    /**
+     * The full text
+     */
+    text: string;
     /**
      * Whether to obfuscate all characters.
      * @deprecated omit the lengthToKeep prop to achieve the same result

package/dist/PageNavigation.js

@@ -1,12 +1,12 @@
-import { defineComponent as m, ref as g, watch as x, onMounted as _, openBlock as i, createElementBlock as c, createVNode as I, withCtx as f, Fragment as V, renderList as k, createBlock as T, unref as N, createTextVNode as B, toDisplayString as C } from "vue";
+import { defineComponent as g, ref as m, watch as x, onMounted as I, openBlock as i, createElementBlock as c, createVNode as _, withCtx as f, Fragment as T, renderList as V, createBlock as k, unref as N, createTextVNode as B, toDisplayString as C } from "vue";
 import U from "@leaflink/snitch";
 import s from "lodash-es/kebabCase";
 import { useRoute as y, useRouter as P } from "vue-router";
-import { _ as D } from "./Tab.vue_vue_type_script_setup_true_lang-9aa53203.js";
+import D from "./Tab.js";
 import E from "./Tabs.js";
 import "./Badge.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Tabs.vue_used_vue_type_style_index_0_lang.module-3aa36673.js";
+import "./Tabs.vue_used_vue_type_style_index_0_lang.module-d7530989.js";
 import "lodash-es/debounce";
 import "lodash-es/uniqueId";
 import "./constants.js";
@@ -25,7 +25,7 @@ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const F = {
   class: "stash-page-navigation container",
   "data-test": "stash-page-navigation"
-}, oe = /* @__PURE__ */ m({
+}, oe = /* @__PURE__ */ g({
   name: "ll-page-navigation",
   __name: "PageNavigation",
   props: {
@@ -37,7 +37,7 @@ const F = {
   setup(v, { emit: h }) {
     const r = v, p = h;
     r.activeIndex && U.info("The `activeIndex` prop is deprecated. Use `v-model` instead.");
-    const o = y(), u = P(), d = g("");
+    const o = y(), u = P(), d = m("");
     function n(t) {
       t !== d.value && (d.value = t, p("update:modelValue", t));
     }
@@ -49,7 +49,7 @@ const F = {
         const a = r.items.findIndex((l) => s(l.label) === t);
         p("change", a), n(t);
       }
-    ), _(() => {
+    ), I(() => {
       if (!r.items.length)
         return;
       if (r.activeIndex !== void 0) {
@@ -76,12 +76,12 @@ const F = {
       });
       t && n((t == null ? void 0 : t.value) || s(t.label));
     }), (t, e) => (i(), c("nav", F, [
-      I(E, {
+      _(E, {
         "active-tab": d.value,
         "onUpdate:activeTab": n
       }, {
         default: f(() => [
-          (i(!0), c(V, null, k(r.items, (a, l) => (i(), T(D, {
+          (i(!0), c(T, null, V(r.items, (a, l) => (i(), k(D, {
             key: a.label,
             value: (a == null ? void 0 : a.value) || N(s)(a.label),
             to: a.to,

package/dist/Tab.js

@@ -1,9 +1,8 @@
-import { _ as o } from "./Tab.vue_vue_type_script_setup_true_lang-9aa53203.js";
-import "vue";
-import "@leaflink/snitch";
-import "./Badge.js";
-import "./_plugin-vue_export-helper-dad06003.js";
-import "./Tabs.vue_used_vue_type_style_index_0_lang.module-3aa36673.js";
+import { defineComponent as x, useCssModule as T, inject as y, computed as s, onMounted as k, nextTick as g, toRefs as c, openBlock as u, createElementBlock as C, normalizeClass as P, unref as o, withKeys as $, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as j } from "vue";
+import M from "@leaflink/snitch";
+import D from "./Badge.js";
+import { T as L } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-d7530989.js";
+import { _ as V } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/debounce";
 import "lodash-es/uniqueId";
 import "./constants.js";
@@ -19,7 +18,97 @@ import "lodash-es/isPlainObject";
 import "./Icon.js";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class: "tw-mt-0.5" }, S = /* @__PURE__ */ x({
+  __name: "Tab",
+  props: {
+    value: {},
+    to: {},
+    href: {},
+    badge: {},
+    disabled: { type: Boolean },
+    anchorProps: {},
+    routerLinkProps: {}
+  },
+  setup(p) {
+    const e = p, m = T(), l = y(L.key);
+    if (!l)
+      throw Error("The Tab component must be a child of the Tabs component.");
+    const { setActiveTab: v, activeTab: w, variant: r } = l, t = s(() => e.value === w.value), f = s(() => e.to ? "router-link" : e.href ? "a" : "button");
+    function d(i) {
+      e.disabled || v(i);
+    }
+    const n = s(() => `tabpanel-${e.value}`);
+    k(async () => {
+      await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(n.value) && M.warn(
+        `The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${n.value}" and a "role" attribute with value "tabpanel".`
+      );
+    });
+    const h = s(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
+    return (i, a) => (u(), C("li", {
+      id: `tab-${e.value}`,
+      role: "tab",
+      "aria-selected": t.value,
+      "aria-controls": n.value,
+      "aria-disabled": e.disabled,
+      class: P(["stash-tab", [
+        {
+          "stash-tab--active is-active": t.value,
+          "stash-tab--disabled": e.disabled,
+          "stash-tab--variant-line": o(r) === "line",
+          "stash-tab--variant-enclosed": o(r) === "enclosed"
+        }
+      ]]),
+      onClick: a[0] || (a[0] = (_) => d(e.value)),
+      onKeypress: a[1] || (a[1] = $((_) => d(e.value), ["enter"]))
+    }, [
+      (u(), B(E(f.value), N(h.value, {
+        to: e.to,
+        href: e.href,
+        class: ["tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline", [
+          {
+            "tw-border-b-2": o(r) === "line",
+            "tw-border-t-4 tw-px-6": o(r) === "enclosed",
+            "tw-rounded-t tw-border-b tw-border-b-ice-200 tw-bg-white": t.value && o(r) === "enclosed",
+            [o(m)["custom-shadow"]]: t.value && o(r) === "enclosed",
+            "focus:tw-no-underline": e.href,
+            "tw-pointer-events-none tw-text-ice-500": e.disabled,
+            "tw-text-ice-700": !e.disabled && !t.value
+          },
+          [
+            t.value ? "tw-border-blue-500 tw-text-blue-500" : "tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500"
+          ]
+        ]],
+        tabindex: e.disabled ? -1 : 0
+      }), {
+        default: b(() => [
+          A("div", O, [
+            I(D, {
+              content: e.badge,
+              position: "inline",
+              color: "red",
+              "is-disabled": e.disabled
+            }, {
+              default: b(() => [
+                j(i.$slots, "default", {
+                  isActive: t.value,
+                  isDisabled: e.disabled,
+                  variant: o(r)
+                })
+              ]),
+              _: 3
+            }, 8, ["content", "is-disabled"])
+          ])
+        ]),
+        _: 3
+      }, 16, ["to", "href", "class", "tabindex"]))
+    ], 42, K));
+  }
+}), z = {
+  "custom-shadow": "_custom-shadow_j326c_3"
+}, J = {
+  $style: z
+}, de = /* @__PURE__ */ V(S, [["__cssModules", J]]);
 export {
-  o as default
+  de as default
 };
 //# sourceMappingURL=Tab.js.map

package/dist/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-border-b tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  /* this removes the bottom shadow from the active tab */\n  .custom-shadow {\n    box-shadow: 0 -4px 4px rgba(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,KAEVC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,OAAO;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEzFG,EAAA;AAAA,QACL,yBAAyBlB,EAAM,uJAAuJe,EAAQ;AAAA,MAAA;AAAA,IAElM,CACD;AAEK,UAAAI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tabs.js

@@ -1,5 +1,5 @@
-import { _ as o, s as t } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-3aa36673.js";
-import { T as C, a as E } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-3aa36673.js";
+import { _ as o, s as t } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-d7530989.js";
+import { T as C, a as E } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-d7530989.js";
 import { _ as r } from "./_plugin-vue_export-helper-dad06003.js";
 import "vue";
 import "lodash-es/debounce";