@leaflink/stash 52.0.2 → 53.0.0

package/dist/TableHeaderRow.js

@@ -1,17 +1,17 @@
-import { defineComponent as y, inject as w, ref as T, createElementBlock as C, openBlock as l, createBlock as o, createCommentVNode as s, renderSlot as x, unref as e, normalizeClass as a, withCtx as E } from "vue";
+import { defineComponent as k, inject as w, ref as T, createElementBlock as C, openBlock as l, createBlock as o, createCommentVNode as s, renderSlot as x, unref as e, normalizeClass as a, withCtx as E } from "vue";
 import { t as R } from "./locale.js";
 import S from "./Checkbox.js";
 import { D as h } from "./DataView.keys-aSOnA4AD.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
-import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
+import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
 import { T as B } from "./Table.keys-LHQf6FEH.js";
 import n from "./TableHeaderCell.js";
 import { _ as I } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const $ = {
   class: "stash-table-header-row",
   "data-test": "stash-table-header-row"
-}, N = /* @__PURE__ */ y({
+}, N = /* @__PURE__ */ k({
   __name: "TableHeaderRow",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
@@ -22,7 +22,7 @@ const $ = {
     const c = u, f = b, d = w(B.key);
     if (!d)
       throw new Error("TableHeaderRow must be used within a Table component");
-    const { hasCustomExpandToggle: _, isExpandable: k, isSelectable: i } = d, { hasToolbar: r } = w(h.key, h.defaults), m = T(0);
+    const { hasCustomExpandToggle: _, isExpandable: y, isSelectable: i } = d, { hasToolbar: r } = w(h.key, h.defaults), m = T(0);
     function p() {
       f("select"), m.value++;
     }
@@ -34,7 +34,7 @@ const $ = {
       }, null, 8, ["class"])) : s("", !0),
       !e(r) && e(i) ? (l(), o(n, {
         key: 1,
-        class: a(["stash-table-header-row__selection-cell tw-min-w-[48px]", t.$style["row-control-cell"]]),
+        class: a(["stash-table-header-row__selection-cell min-w-[48px]", t.$style["row-control-cell"]]),
         "data-test": "table-row-header|selection-cell"
       }, {
         default: E(() => [
@@ -50,7 +50,7 @@ const $ = {
         ]),
         _: 1
       }, 8, ["class"])) : s("", !0),
-      e(k) && !e(_) ? (l(), o(n, {
+      e(y) && !e(_) ? (l(), o(n, {
         key: 2,
         class: a(t.$style["row-control-cell"]),
         "data-test": "table-row-header-expansion-cell"
@@ -59,12 +59,12 @@ const $ = {
     ]));
   }
 }), A = {
-  "row-selection-checkbox": "_row-selection-checkbox_1eq6o_2",
-  "row-control-cell": "_row-control-cell_1eq6o_8"
+  "row-selection-checkbox": "_row-selection-checkbox_102yd_5",
+  "row-control-cell": "_row-control-cell_102yd_11"
 }, H = {
   $style: A
-}, K = /* @__PURE__ */ I(N, [["__cssModules", H]]);
+}, L = /* @__PURE__ */ I(N, [["__cssModules", H]]);
 export {
-  K as default
+  L as default
 };
 //# sourceMappingURL=TableHeaderRow.js.map

package/dist/TableHeaderRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.keys';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const { hasToolbar } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\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</script>\n\n<template>\n  <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <!-- This is just an empty cell to ensure proper alignment. \"Select all\" control should be in the toolbar. -->\n    <TableHeaderCell\n      v-if=\"hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell-empty\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header|selection-cell-empty\"\n    />\n\n    <TableHeaderCell\n      v-if=\"!hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header|selection-cell\"\n    >\n      <Checkbox\n        v-if=\"!hasToolbar\"\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","onSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAKRC,IAAOC,GAIPC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExD,EAAE,YAAAM,EAAA,IAAeL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAZ,EAAK,QAAQ,GAObU,EAAY;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.keys';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const { hasToolbar } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\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</script>\n\n<template>\n  <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <!-- This is just an empty cell to ensure proper alignment. \"Select all\" control should be in the toolbar. -->\n    <TableHeaderCell\n      v-if=\"hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell-empty\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header|selection-cell-empty\"\n    />\n\n    <TableHeaderCell\n      v-if=\"!hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header|selection-cell\"\n    >\n      <Checkbox\n        v-if=\"!hasToolbar\"\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .row-selection-checkbox label {\n      padding: 0;\n      min-height: --spacing(6);\n      vertical-align: middle;\n    }\n\n    .row-control-cell {\n      border-right: 0;\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","onSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAKRC,IAAOC,GAIPC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExD,EAAE,YAAAM,EAAA,IAAeL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAZ,EAAK,QAAQ,GAObU,EAAY;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableRow.js

@@ -1,12 +1,12 @@
-import { defineComponent as D, useAttrs as M, useCssModule as V, useSlots as j, inject as L, ref as P, computed as k, watch as q, createElementBlock as x, openBlock as r, Fragment as z, createElementVNode as F, createCommentVNode as u, mergeProps as J, unref as e, createBlock as E, renderSlot as y, normalizeClass as c, withCtx as _, createVNode as b } from "vue";
+import { defineComponent as D, useAttrs as M, useCssModule as V, useSlots as j, inject as L, ref as P, computed as k, watch as q, createElementBlock as w, openBlock as r, Fragment as z, createElementVNode as F, createCommentVNode as u, mergeProps as J, unref as e, createBlock as E, renderSlot as y, normalizeClass as c, withCtx as _, createVNode as b } from "vue";
 import O from "lodash-es/uniqueId";
-import { t as h } from "./locale.js";
+import { t as m } from "./locale.js";
 import U from "./Checkbox.js";
 import { _ as G } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-Ce_qOXfR.js";
 import { _ as H } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
 import "lodash-es/cloneDeep";
 import "./DataView.keys-aSOnA4AD.js";
-import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
+import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
 import g from "./TableCell.js";
 import { T as K } from "./Table.keys-LHQf6FEH.js";
 import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
@@ -22,68 +22,68 @@ const W = /* @__PURE__ */ D({
   },
   emits: ["update:isSelected", "update:isExpanded"],
   setup(S, { emit: T }) {
-    const t = S, m = T, B = M(), o = V(), i = j(), f = L(K.key);
-    if (!f)
+    const o = S, f = T, B = M(), t = V(), i = j(), h = L(K.key);
+    if (!h)
       throw new Error("TableRow must be used within a Table component");
-    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: w, layout: d, isLoading: I } = f, l = P(t.isExpanded), n = k(() => $.value && !!i.expansion), N = k(() => {
+    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: x, layout: d, isLoading: I } = h, l = P(o.isExpanded), n = k(() => $.value && !!i.expansion), N = k(() => {
       var s;
       let a = ((s = i.default) == null ? void 0 : s.call(i, { toggleExpand: p }).length) ?? 0;
-      return w.value && (a += 1), n.value && !v.value && (a += 1), a;
+      return x.value && (a += 1), n.value && !v.value && (a += 1), a;
     }), C = O("table-row-");
     function p(a) {
       if (!n.value)
         throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
       const s = typeof a == "boolean" ? a : !l.value;
-      l.value = s, m("update:isExpanded", s);
+      l.value = s, f("update:isExpanded", s);
     }
     return q(
-      () => t.isExpanded,
-      () => p(t.isExpanded)
-    ), (a, s) => (r(), x(z, null, [
+      () => o.isExpanded,
+      () => p(o.isExpanded)
+    ), (a, s) => (r(), w(z, null, [
       F("tr", J({
         class: ["stash-table-row", [
-          e(o).root,
-          e(o)[`layout--${e(d)}`],
+          e(t).root,
+          e(t)[`layout--${e(d)}`],
           {
-            [e(o)["is-expandable"]]: n.value,
-            [e(o)["is-expanded"]]: l.value,
-            [e(o)["root--hidden-divider"]]: a.hideExpansionDivider,
-            "tw-p-gutter": e(d) === "stack",
-            "tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(d) === "stack" && !n.value,
-            "tw-pt-[60px]": e(R) && e(d) === "stack" && !e(w) && !e(I),
-            "stash-table-row--accent": t.accentColor,
-            "tw-relative": t.accentColor
+            [e(t)["is-expandable"]]: n.value,
+            [e(t)["is-expanded"]]: l.value,
+            [e(t)["root--hidden-divider"]]: a.hideExpansionDivider,
+            "p-gutter": e(d) === "stack",
+            "mb-6 shadow lg:mb-0 lg:shadow-none": e(d) === "stack" && !n.value,
+            "pt-[60px]": e(R) && e(d) === "stack" && !e(x) && !e(I),
+            "stash-table-row--accent": o.accentColor,
+            relative: o.accentColor
           }
         ]],
         "data-test": "stash-table-row"
       }, e(B)), [
-        e(w) ? (r(), E(g, {
+        e(x) ? (r(), E(g, {
           key: 0,
           "is-control": "",
-          class: c(["stash-table-row__selection-cell tw-min-w-[48px] lg:tw-pl-3", e(o)["row-control-cell"]]),
+          class: c(["stash-table-row__selection-cell min-w-[48px] lg:pl-3", e(t)["row-control-cell"]]),
           "data-test": "stash-table-row|selection-cell"
         }, {
           default: _(() => [
             b(U, {
-              class: c(e(o)["row-selection-checkbox"]),
-              checked: t.isSelected,
-              disabled: t.isSelectDisabled,
-              title: e(h)("ll.select.self"),
-              "onUpdate:checked": s[0] || (s[0] = (A) => m("update:isSelected", A))
+              class: c(e(t)["row-selection-checkbox"]),
+              checked: o.isSelected,
+              disabled: o.isSelectDisabled,
+              title: e(m)("ll.select.self"),
+              "onUpdate:checked": s[0] || (s[0] = (A) => f("update:isSelected", A))
             }, null, 8, ["class", "checked", "disabled", "title"])
           ]),
           _: 1
         }, 8, ["class"])) : u("", !0),
         n.value && !e(v) ? (r(), E(g, {
           key: 1,
-          class: c(["stash-table-row__toggle-expansion-cell tw-px-0", e(o)["row-control-cell"]]),
+          class: c(["stash-table-row__toggle-expansion-cell px-0", e(t)["row-control-cell"]]),
           "data-test": "stash-table-row|custom-expansion-cell",
           "is-control": ""
         }, {
           default: _(() => [
             b(G, {
               "aria-controls": e(C),
-              "aria-label": l.value ? e(h)("ll.table.collapseRow") : e(h)("ll.table.expandRow"),
+              "aria-label": l.value ? e(m)("ll.table.collapseRow") : e(m)("ll.table.expandRow"),
               direction: l.value ? "up" : "down",
               "is-expanded": l.value,
               onClick: p
@@ -95,29 +95,29 @@ const W = /* @__PURE__ */ D({
           isRowExpanded: l.value,
           toggleExpand: p
         }),
-        t.accentColor ? (r(), x("div", {
+        o.accentColor ? (r(), w("div", {
           key: 2,
           "data-test": "stash-table-row|accent",
           class: c({
-            "tw-absolute": t.accentColor,
-            [`tw-bg-${t.accentColor}`]: t.accentColor,
-            "tw-block": t.accentColor,
-            "tw-h-full": t.accentColor,
-            "tw-w-1": t.accentColor,
-            "tw-top-0": t.accentColor,
-            "tw-left-0": t.accentColor
+            absolute: o.accentColor,
+            [`bg-${o.accentColor}`]: o.accentColor,
+            block: o.accentColor,
+            "h-full": o.accentColor,
+            "w-1": o.accentColor,
+            "top-0": o.accentColor,
+            "left-0": o.accentColor
           })
         }, null, 2)) : u("", !0)
       ], 16),
-      n.value ? (r(), x("tr", {
+      n.value ? (r(), w("tr", {
         key: 0,
-        class: c(["stash-table-row stash-table-row--expandable", e(o)["row-expansion"]]),
+        class: c(["stash-table-row stash-table-row--expandable", e(t)["row-expansion"]]),
         "data-test": "stash-table-row|expansion-row"
       }, [
         b(H, {
           is: "td",
           id: e(C),
-          class: c(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(o)["row-expansion-content"]]),
+          class: c(["border-none bg-white px-3 py-0", e(t)["row-expansion-content"]]),
           "data-test": "stash-table-row|expansion-cell",
           colspan: N.value,
           "is-expanded": l.value
@@ -130,17 +130,17 @@ const W = /* @__PURE__ */ D({
       ], 2)) : u("", !0)
     ], 64));
   }
-}), X = "_root_1h1vo_2", Y = {
+}), X = "_root_27247_5", Y = {
   root: X,
-  "is-expandable": "_is-expandable_1h1vo_9",
-  "root--hidden-divider": "_root--hidden-divider_1h1vo_14",
-  "is-expanded": "_is-expanded_1h1vo_14",
-  "layout--scroll": "_layout--scroll_1h1vo_22",
-  "layout--stack": "_layout--stack_1h1vo_36",
-  "row-selection-checkbox": "_row-selection-checkbox_1h1vo_56",
-  "row-control-cell": "_row-control-cell_1h1vo_61",
-  "row-expansion-content": "_row-expansion-content_1h1vo_72",
-  "row-expansion": "_row-expansion_1h1vo_72"
+  "is-expandable": "_is-expandable_27247_12",
+  "root--hidden-divider": "_root--hidden-divider_27247_17",
+  "is-expanded": "_is-expanded_27247_17",
+  "layout--scroll": "_layout--scroll_27247_25",
+  "layout--stack": "_layout--stack_27247_39",
+  "row-selection-checkbox": "_row-selection-checkbox_27247_59",
+  "row-control-cell": "_row-control-cell_27247_64",
+  "row-expansion-content": "_row-expansion-content_27247_75",
+  "row-expansion": "_row-expansion_27247_75"
 }, Z = {
   $style: Y
 }, ue = /* @__PURE__ */ Q(W, [["__cssModules", Z]]);

package/dist/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, watch } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n    /**\n     * The accent color for the TableRow.\n     */\n    accentColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n    accentColor: undefined,\n  });\n\n  const emit = defineEmits<{\n    'update:isSelected': [isChecked: CheckboxProps['checked']];\n    'update:isExpanded': [isExpanded: boolean];\n  }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = defineSlots<{\n    default(props: { isRowExpanded?: boolean; toggleExpand: (value?: boolean) => void }): unknown[];\n    expansion(): unknown[];\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout, isLoading } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'tw-p-gutter': layout === 'stack',\n        'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n        'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable && !isLoading,\n        'stash-table-row--accent': props.accentColor,\n        'tw-relative': props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell tw-min-w-[48px] lg:tw-pl-3\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n    <!-- Displays a 4px accent on the left of the table row -->\n    <div\n      v-if=\"props.accentColor\"\n      data-test=\"stash-table-row|accent\"\n      :class=\"{\n        'tw-absolute': props.accentColor,\n        [`tw-bg-${props.accentColor}`]: props.accentColor,\n        'tw-block': props.accentColor,\n        'tw-h-full': props.accentColor,\n        'tw-w-1': props.accentColor,\n        'tw-top-0': props.accentColor,\n        'tw-left-0': props.accentColor,\n      }\"\n    ></div>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|expansion-row\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  /**\n   * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n   */\n  .is-expandable > td {\n    border-bottom-color: var(--color-ice-200);\n    transition: border-bottom-color 0.5s;\n  }\n\n  .root--hidden-divider.is-expanded > td {\n    transition: border-bottom-color 0s;\n    /**\n     * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n     */\n    border-bottom-color: transparent;\n  }\n\n  .layout--scroll {\n    border-radius: 0;\n    box-shadow: none !important;\n    margin: 0;\n  }\n\n  .layout--scroll:last-of-type {\n    border: 0;\n  }\n\n  .layout--scroll:last-of-type td {\n    border-bottom: none;\n  }\n\n  .layout--stack {\n    align-items: stretch;\n    background-color: var(--color-white);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  .layout--stack:not(.is-expanded) {\n    border-radius: theme('borderRadius.DEFAULT');\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    vertical-align: middle;\n  }\n\n  .layout--stack .row-control-cell {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  /* On mobile, display controls on their own row, pushing other cells below */\n  .row-control-cell + :not(.row-control-cell) {\n    grid-column-start: 1;\n  }\n\n  .row-expansion-content {\n    box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n  }\n\n  .layout--stack + .row-expansion,\n  .layout--stack + .row-expansion > .row-expansion-content {\n    display: block;\n  }\n\n  .layout--stack + .row-expansion > .row-expansion-content {\n    border-top: 1px solid var(--color-ice-200);\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    margin-bottom: theme('spacing.6');\n  }\n\n  .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n    border-top: none;\n  }\n\n  /* On large screens, match the styles for layout-SCROLL */\n  @media screen('lg') {\n    .layout--stack {\n      align-items: unset;\n      background-color: unset;\n      border: 0;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      column-gap: unset;\n      display: table-row;\n      grid-template-columns: unset;\n      row-gap: unset;\n    }\n\n    .layout--stack:last-of-type {\n      border-bottom: 0;\n    }\n\n    .layout--stack .row-control-cell {\n      display: table-cell;\n    }\n\n    .layout--stack + .row-expansion {\n      display: table-row;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: unset;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      display: table-cell;\n      margin-bottom: unset;\n    }\n\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: unset;\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isLoading","isRowExpanded","ref","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBE,UAAMA,IAAQC,GAWRC,IAAOC,GAKPC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAQC,EAAA,GAKRC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,GAAQ,WAAAC,MAAcR,GAEvFS,IAAgBC,EAAIpB,EAAM,UAAU,GACpCqB,IAAkBC,EAAS,MAAMP,EAAa,SAAS,CAAC,CAACP,EAAM,SAAS,GAExEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,EAAA,GAAgB,WAAU;AAExD,aAAIV,EAAa,UACfQ,KAAS,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UAClDU,KAAS,IAGJA;AAAA,IACT,CAAC,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACrC,UAAI,CAACR,EAAgB;AACnB,cAAM,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACV,EAAc;AAEvE,MAAAA,EAAc,QAAQW,GACtB5B,EAAK,qBAAqB4B,CAAU;AAAA,IACtC;AAEA,WAAAC;AAAA,MACE,MAAM/B,EAAM;AAAA,MACZ,MAAM0B,EAAa1B,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, watch } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n    /**\n     * The accent color for the TableRow.\n     */\n    accentColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n    accentColor: undefined,\n  });\n\n  const emit = defineEmits<{\n    'update:isSelected': [isChecked: CheckboxProps['checked']];\n    'update:isExpanded': [isExpanded: boolean];\n  }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = defineSlots<{\n    default(props: { isRowExpanded?: boolean; toggleExpand: (value?: boolean) => void }): unknown[];\n    expansion(): unknown[];\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout, isLoading } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'p-gutter': layout === 'stack',\n        'mb-6 shadow lg:mb-0 lg:shadow-none': layout === 'stack' && !isRowExpandable,\n        'pt-[60px]': hasActions && layout === 'stack' && !isSelectable && !isLoading,\n        'stash-table-row--accent': props.accentColor,\n        relative: props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell min-w-[48px] lg:pl-3\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n    <!-- Displays a 4px accent on the left of the table row -->\n    <div\n      v-if=\"props.accentColor\"\n      data-test=\"stash-table-row|accent\"\n      :class=\"{\n        absolute: props.accentColor,\n        [`bg-${props.accentColor}`]: props.accentColor,\n        block: props.accentColor,\n        'h-full': props.accentColor,\n        'w-1': props.accentColor,\n        'top-0': props.accentColor,\n        'left-0': props.accentColor,\n      }\"\n    ></div>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|expansion-row\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"border-none bg-white px-3 py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      border: 0;\n    }\n\n    /**\n     * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n     */\n    .is-expandable > td {\n      border-bottom-color: var(--color-ice-200);\n      transition: border-bottom-color 0.5s;\n    }\n\n    .root--hidden-divider.is-expanded > td {\n      transition: border-bottom-color 0s;\n      /**\n       * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n       */\n      border-bottom-color: transparent;\n    }\n\n    .layout--scroll {\n      border-radius: 0;\n      box-shadow: none !important;\n      margin: 0;\n    }\n\n    .layout--scroll:last-of-type {\n      border: 0;\n    }\n\n    .layout--scroll:last-of-type td {\n      border-bottom: none;\n    }\n\n    .layout--stack {\n      align-items: stretch;\n      background-color: var(--color-white);\n      column-gap: var(--grid-gutter);\n      display: grid;\n      grid-template-columns: repeat(12, 1fr);\n      position: relative;\n      row-gap: var(--grid-gutter);\n    }\n\n    .layout--stack:not(.is-expanded) {\n      border-radius: var(--radius-sm);\n      transition: border-radius 0.5s;\n    }\n\n    .layout--stack.is-expanded {\n      border-top-left-radius: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\n    }\n\n    .row-selection-checkbox label {\n      padding: 0;\n      vertical-align: middle;\n    }\n\n    .layout--stack .row-control-cell {\n      display: flex;\n      align-items: center;\n      min-width: 0;\n    }\n\n    /* On mobile, display controls on their own row, pushing other cells below */\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: 1;\n    }\n\n    .row-expansion-content {\n      box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n    }\n\n    .layout--stack + .row-expansion,\n    .layout--stack + .row-expansion > .row-expansion-content {\n      display: block;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: 1px solid var(--color-ice-200);\n      border-bottom-left-radius: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\n      margin-bottom: --spacing(6);\n    }\n\n    .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n      border-top: none;\n    }\n\n    /* On large screens, match the styles for layout-SCROLL */\n    @media (width >= theme(--breakpoint-lg)) {\n      .layout--stack {\n        align-items: unset;\n        background-color: unset;\n        border: 0;\n        border-bottom: 1px solid var(--color-ice-200);\n        border-radius: 0;\n        box-shadow: none;\n        column-gap: unset;\n        display: table-row;\n        grid-template-columns: unset;\n        row-gap: unset;\n      }\n\n      .layout--stack:last-of-type {\n        border-bottom: 0;\n      }\n\n      .layout--stack .row-control-cell {\n        display: table-cell;\n      }\n\n      .layout--stack + .row-expansion {\n        display: table-row;\n      }\n\n      .layout--stack + .row-expansion > .row-expansion-content {\n        border-top: unset;\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        display: table-cell;\n        margin-bottom: unset;\n      }\n\n      .row-control-cell + :not(.row-control-cell) {\n        grid-column-start: unset;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isLoading","isRowExpanded","ref","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBE,UAAMA,IAAQC,GAWRC,IAAOC,GAKPC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAQC,EAAA,GAKRC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,GAAQ,WAAAC,MAAcR,GAEvFS,IAAgBC,EAAIpB,EAAM,UAAU,GACpCqB,IAAkBC,EAAS,MAAMP,EAAa,SAAS,CAAC,CAACP,EAAM,SAAS,GAExEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,EAAA,GAAgB,WAAU;AAExD,aAAIV,EAAa,UACfQ,KAAS,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UAClDU,KAAS,IAGJA;AAAA,IACT,CAAC,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACrC,UAAI,CAACR,EAAgB;AACnB,cAAM,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACV,EAAc;AAEvE,MAAAA,EAAc,QAAQW,GACtB5B,EAAK,qBAAqB4B,CAAU;AAAA,IACtC;AAEA,WAAAC;AAAA,MACE,MAAM/B,EAAM;AAAA,MACZ,MAAM0B,EAAa1B,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tabs.js

@@ -1,5 +1,5 @@
-import { _ as r } from "./Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js";
-import { T as t, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js";
+import { _ as r } from "./Tabs.vue_vue_type_script_setup_true_lang-BVTCcK6M.js";
+import { T as t, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-BVTCcK6M.js";
 export {
   t as TABS_INJECTION,
   f as TabVariant,

package/dist/{Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js → Tabs.vue_vue_type_script_setup_true_lang-BVTCcK6M.js}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang-BVTCcK6M.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 relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <template v-if=\"$slots['more-actions']\">\n      <MoreActions\n        class=\"stash-tabs-list flex items-end\"\n        :class=\"{\n          'stash-tabs-list--line': variant === 'line',\n          'stash-tabs-list--enclosed': variant === 'enclosed',\n          'gap-6': variant === 'line',\n        }\"\n        :more-button-text=\"t('ll.more')\"\n        dropdown-mode=\"custom\"\n        :actions-container-class=\"{\n          'gap-0': variant === 'enclosed',\n          '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=\"flex cursor-pointer items-center justify-center border-solid px-6 py-1.5 text-sm font-medium text-blue-500 hover:text-blue-700\"\n            :class=\"{ 'border-t-4 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 flex items-end overflow-x-scroll\"\n        :class=\"{\n          'stash-tabs-list--line': variant === 'line',\n          'stash-tabs-list--enclosed': variant === 'enclosed',\n          'gap-0': variant === 'enclosed',\n          '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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TextEditor.js

@@ -6,7 +6,7 @@ import { isEqual as _r, cloneDeep as He, merge as he } from "lodash-es";
 import { c as ae, g as Si } from "./_commonjsHelpers-DaMA6jEr.js";
 import yl from "lodash-es/uniqueId";
 import Zr from "./Button.js";
-import { _ as vl } from "./Field.vue_vue_type_script_setup_true_lang-DI6z3AE9.js";
+import { _ as vl } from "./Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.js";
 import Wr from "./Icon.js";
 import { _ as El } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 var D = /* @__PURE__ */ ((i) => (i[i.TYPE = 3] = "TYPE", i[i.LEVEL = 12] = "LEVEL", i[i.ATTRIBUTE = 13] = "ATTRIBUTE", i[i.BLOT = 14] = "BLOT", i[i.INLINE = 7] = "INLINE", i[i.BLOCK = 11] = "BLOCK", i[i.BLOCK_BLOT = 10] = "BLOCK_BLOT", i[i.INLINE_BLOT = 6] = "INLINE_BLOT", i[i.BLOCK_ATTRIBUTE = 9] = "BLOCK_ATTRIBUTE", i[i.INLINE_ATTRIBUTE = 5] = "INLINE_ATTRIBUTE", i[i.ANY = 15] = "ANY", i))(D || {});
@@ -6808,7 +6808,7 @@ const Ga = [
         e.isReadOnly ? sr("", !0) : (Kt(), fs("div", {
           key: 0,
           id: `${c.value}-format-bar`,
-          class: ds(["stash-text-editor__format-bar", [Be(n)["format-bar-root"], { "!tw-border-x-red-500 !tw-border-t-red-500": !!e.errorText }]]),
+          class: ds(["stash-text-editor__format-bar", [Be(n)["format-bar-root"], { "!border-x-red-500 !border-t-red-500": !!e.errorText }]]),
           "data-test": "stash-text-editor|format-bar",
           role: "format-bar"
         }, [
@@ -6820,7 +6820,7 @@ const Ga = [
             }, [
               (Kt(!0), fs(nr, null, Gr(q, ($, H) => (Kt(), hs(Zr, {
                 key: $.name + H,
-                class: ds(["stash-text-editor__format-bar__control tw-rounded-none", [Be(n)["format-bar-control"], `ql-${$.name}`]]),
+                class: ds(["stash-text-editor__format-bar__control", [Be(n)["format-bar-control"], `ql-${$.name}`]]),
                 "aria-label": $.value ? `${$.name}: ${$.value}` : `${$.name}`,
                 "data-test": `stash-text-editor|format-bar-${$.name}-grouped-control`,
                 disabled: e.isDisabled,
@@ -6863,17 +6863,17 @@ const Ga = [
           ref_key: "editorRef",
           ref: l,
           "data-test": "stash-text-editor|editor",
-          class: ds(["stash-text-editor__content-container tw-rounded-b-[4px] tw-border !tw-border-t-0", [Be(n)["content-container"]]])
+          class: ds(["stash-text-editor__content-container", [Be(n)["content-container"]]])
         }, null, 10, Ya)
       ]),
       _: 1
     }, 16, ["class"]));
   }
-}), Ja = "_root_10u42_2", tc = {
+}), Ja = "_root_1ivwb_5", tc = {
   root: Ja,
-  "format-bar-root": "_format-bar-root_10u42_45",
-  "format-bar-group": "_format-bar-group_10u42_55",
-  "format-bar-control": "_format-bar-control_10u42_77"
+  "format-bar-root": "_format-bar-root_1ivwb_48",
+  "format-bar-group": "_format-bar-group_1ivwb_58",
+  "format-bar-control": "_format-bar-control_1ivwb_82"
 }, ec = {
   $style: tc
 }, mc = /* @__PURE__ */ El(Qa, [["__cssModules", ec]]);