@leaflink/stash 53.4.5 → 53.4.7

package/dist/Table.vue.d.ts

@@ -40,6 +40,7 @@ emptyStateText: string;
 hasActions: boolean;
 hasCustomExpandToggle: boolean;
 isEmpty: boolean;
+isSchemaDriven: boolean;
 isLoading: boolean;
 isExpandable: boolean;
 isSelectable: boolean;
@@ -52,6 +53,7 @@ emptyStateText: string;
 hasActions: boolean;
 hasCustomExpandToggle: boolean;
 isEmpty: boolean;
+isSchemaDriven: boolean;
 isLoading: boolean;
 isExpandable: boolean;
 isSelectable: boolean;
@@ -68,6 +70,7 @@ emptyStateText: string;
 hasActions: boolean;
 layout: "scroll" | "stack";
 hasCustomExpandToggle: boolean;
+isSchemaDriven: boolean;
 isExpandable: boolean;
 stickyHeader: {
 listLength: number;
@@ -119,6 +122,10 @@ export declare interface TableInjection {
      * If true, hides the default expansion toggle column
      */
     hasCustomExpandToggle: ComputedRef<boolean>;
+    /**
+     * When true, the table is schema-driven (e.g. DataTable); selection column is rendered from the schema, not by TableRow/TableHeaderRow.
+     */
+    isSchemaDriven?: ComputedRef<boolean>;
     /**
      * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.
      */
@@ -158,6 +165,11 @@ export declare interface TableProps {
      * Shows the empty state
      */
     isEmpty?: boolean;
+    /**
+     * When true, indicates the table is being composed by DataTable (schema-driven mode).
+     * TableRow/TableHeaderRow use this to suppress their built-in selection cells.
+     */
+    isSchemaDriven?: boolean;
     /**
      * Shows the loading state
      */

package/dist/TableCell.js

@@ -1,4 +1,4 @@
-import { defineComponent as _, useCssModule as p, inject as d, createElementBlock as r, openBlock as c, normalizeClass as u, unref as o, createCommentVNode as f, renderSlot as y, toDisplayString as h } from "vue";
+import { defineComponent as _, useCssModule as p, inject as d, createElementBlock as r, openBlock as c, normalizeClass as f, unref as o, createCommentVNode as u, renderSlot as y, toDisplayString as b } from "vue";
 import "lodash-es/uniqueId";
 import "lodash-es/cloneDeep";
 import "./Module.keys-DcqBbvvT.js";
@@ -6,24 +6,24 @@ import "lodash-es/get";
 import "./DataView.keys-aSOnA4AD.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
 import "@leaflink/snitch";
-import { T as b } from "./Table.keys-LHQf6FEH.js";
-import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const k = {
+import { T as g } from "./Table.keys-LHQf6FEH.js";
+import { _ as h } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const C = {
   key: 0,
   class: "text-xs font-medium text-ice-900 lg:hidden"
-}, T = /* @__PURE__ */ _({
+}, k = /* @__PURE__ */ _({
   __name: "TableCell",
   props: {
     isControl: { type: Boolean, default: !1 },
     mobileHeader: { default: "" }
   },
   setup(n) {
-    const l = n, t = p(), a = d(b.key);
+    const l = n, t = p(), a = d(g.key);
     if (!a)
       throw new Error("TableCell must be used within a Table component");
     const { density: e, hasActions: i, layout: s } = a;
     return (m, E) => (c(), r("td", {
-      class: u(["stash-table-cell", [
+      class: f(["stash-table-cell", [
         o(t).root,
         o(t)[`layout--${o(s)}`],
         {
@@ -39,20 +39,20 @@ const k = {
       ]]),
       "data-test": "stash-table-cell"
     }, [
-      l.mobileHeader && o(s) === "stack" ? (c(), r("div", k, h(l.mobileHeader), 1)) : f("", !0),
+      l.mobileHeader && o(s) === "stack" ? (c(), r("div", C, b(l.mobileHeader), 1)) : u("", !0),
       y(m.$slots, "default")
     ], 2));
   }
-}), x = "_root_1hns6_5", g = {
-  root: x,
-  "layout--scroll": "_layout--scroll_1hns6_9",
-  "has-actions": "_has-actions_1hns6_15",
-  "layout--stack": "_layout--stack_1hns6_19",
-  "is-control": "_is-control_1hns6_31",
-  "root--density-comfortable": "_root--density-comfortable_1hns6_55"
+}), T = "_root_1f3ga_5", x = {
+  root: T,
+  "layout--scroll": "_layout--scroll_1f3ga_9",
+  "has-actions": "_has-actions_1f3ga_15",
+  "layout--stack": "_layout--stack_1f3ga_19",
+  "is-control": "_is-control_1f3ga_31",
+  "root--density-comfortable": "_root--density-comfortable_1f3ga_55"
 }, B = {
-  $style: g
-}, z = /* @__PURE__ */ C(T, [["__cssModules", B]]);
+  $style: x
+}, z = /* @__PURE__ */ h(k, [["__cssModules", B]]);
 export {
   z as default
 };

package/dist/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableCellProps {\n    /**\n     * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n     */\n    isControl?: boolean;\n    /**\n     * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n     */\n    mobileHeader?: string;\n  }\n\n  const props = withDefaults(defineProps<TableCellProps>(), {\n    isControl: false,\n    mobileHeader: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableCell must be used within a Table component');\n  }\n\n  const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n  <td\n    class=\"stash-table-cell\"\n    data-test=\"stash-table-cell\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'p-3': layout === 'scroll',\n        'p-1.5': layout === 'stack',\n        'lg:p-3': density === 'compact',\n        'lg:px-3 lg:py-6': density === 'comfortable',\n        [classes['is-control']]: props.isControl,\n      },\n    ]\"\n  >\n    <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"text-xs font-medium text-ice-900 lg:hidden\">\n      {{ props.mobileHeader }}\n    </div>\n    <!-- @slot default -->\n    <slot></slot>\n  </td>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      border: 0;\n    }\n\n    .layout--scroll {\n      background-color: var(--color-white);\n      border: none;\n      border-bottom: 1px solid var(--color-ice-200);\n    }\n\n    .layout--scroll.has-actions:last-of-type {\n      text-align: center;\n    }\n\n    .layout--stack {\n      background-color: var(--color-ice-100);\n      border-radius: var(--radius-sm);\n    }\n\n    .layout--stack.has-actions:last-of-type {\n      background-color: transparent;\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n\n    .layout--stack.is-control {\n      background-color: transparent;\n    }\n\n    /* On large screens, layout--stack should match layout--scroll */\n    @media (width >= theme(--breakpoint-lg)) {\n      .layout--stack {\n        background-color: var(--color-white);\n        border-bottom: 1px solid var(--color-ice-200);\n        border-radius: initial;\n      }\n\n      .layout--stack.has-actions:last-of-type {\n        background-color: var(--color-white);\n        position: initial;\n        right: initial;\n        text-align: center;\n        top: initial;\n      }\n\n      .layout--stack.is-control {\n        background-color: var(--color-white);\n      }\n\n      .root--density-comfortable:last-of-type:not(.has-actions) {\n        padding-right: 24px;\n      }\n\n      .root--density-comfortable:first-of-type:not(\n          :global(.stash-table-header-row__selection-cell),\n          :global(.stash-table-row__selection-cell),\n          :global(.stash-table-row__toggle-expansion-cell)\n        ) {\n        padding-left: 24px;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout","_createElementBlock","_unref","_openBlock","_hoisted_1","_toDisplayString","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAIRC,IAAUC,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;2BAIxCM,EAuBK,MAAA;AAAA,MAtBH,UAAM,oBAAkB;AAAA,QAERC,EAAAT,CAAA,EAAQ;AAAA,QAAYS,EAAAT,CAAA,aAAmBS,EAAAF,CAAA,CAAM,EAAA;AAAA;UAAsB,CAAAE,EAAAT,CAAA,6BAAmCS,EAAAJ,CAAA,MAAO;AAAA,UAAyB,CAAAI,EAAAT,CAAA,iCAAuCS,EAAAJ,CAAA,MAAO;AAAA,UAA6B,CAAAI,EAAAT,CAAA,mBAAyBS,EAAAH,CAAA;AAAA,iBAA2BG,EAAAF,CAAA,MAAM;AAAA,mBAAgCE,EAAAF,CAAA,MAAM;AAAA,oBAAgCE,EAAAJ,CAAA,MAAO;AAAA,6BAA2CI,EAAAJ,CAAA,MAAO;AAAA,WAA6BI,EAAAT,CAAA,EAAO,YAAA,CAAA,GAAiBF,EAAM;AAAA,QAAA;AAAA;MADrd,aAAU;AAAA,IAAA;MAgBCA,EAAM,gBAAgBW,EAAAF,CAAA,MAAM,WAAvCG,KAAAF,EAEM,OAFNG,GAEMC,EADDd,EAAM,YAAY,GAAA,CAAA;MAGvBe,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;;;;;;;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableCellProps {\n    /**\n     * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n     */\n    isControl?: boolean;\n    /**\n     * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n     */\n    mobileHeader?: string;\n  }\n\n  const props = withDefaults(defineProps<TableCellProps>(), {\n    isControl: false,\n    mobileHeader: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableCell must be used within a Table component');\n  }\n\n  const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n  <td\n    class=\"stash-table-cell\"\n    data-test=\"stash-table-cell\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'p-3': layout === 'scroll',\n        'p-1.5': layout === 'stack',\n        'lg:p-3': density === 'compact',\n        'lg:px-3 lg:py-6': density === 'comfortable',\n        [classes['is-control']]: props.isControl,\n      },\n    ]\"\n  >\n    <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"text-xs font-medium text-ice-900 lg:hidden\">\n      {{ props.mobileHeader }}\n    </div>\n    <!-- @slot default -->\n    <slot></slot>\n  </td>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      border: 0;\n    }\n\n    .layout--scroll {\n      background-color: var(--color-white);\n      border: none;\n      border-bottom: 1px solid var(--color-ice-200);\n    }\n\n    .layout--scroll.has-actions:last-of-type {\n      text-align: center;\n    }\n\n    .layout--stack {\n      background-color: var(--color-ice-100);\n      border-radius: var(--radius-sm);\n    }\n\n    .layout--stack.has-actions:last-of-type {\n      background-color: transparent;\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n\n    .layout--stack.is-control {\n      background-color: transparent;\n    }\n\n    /* On large screens, layout--stack should match layout--scroll */\n    @media (width >= theme(--breakpoint-lg)) {\n      .layout--stack {\n        background-color: var(--color-white);\n        border-bottom: 1px solid var(--color-ice-200);\n        border-radius: initial;\n      }\n\n      .layout--stack.has-actions:last-of-type {\n        background-color: var(--color-white);\n        position: initial;\n        right: initial;\n        text-align: center;\n        top: initial;\n      }\n\n      .layout--stack.is-control {\n        background-color: var(--color-white);\n      }\n\n      .root--density-comfortable:last-of-type:not(.has-actions) {\n        padding-right: 24px;\n      }\n\n      .root--density-comfortable:first-of-type:not(\n          :global(.stash-table-header-row__selection-cell),\n          :global(.stash-table-row__selection-cell),\n          :global(.stash-table-row__toggle-expansion-cell),\n          :global(.stash-table-cell__is-selection-cell),\n          :global(.stash-table-cell__is-expansion-cell)\n        ) {\n        padding-left: 24px;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout","_createElementBlock","_unref","_openBlock","_hoisted_1","_toDisplayString","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAIRC,IAAUC,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;2BAIxCM,EAuBK,MAAA;AAAA,MAtBH,UAAM,oBAAkB;AAAA,QAERC,EAAAT,CAAA,EAAQ;AAAA,QAAYS,EAAAT,CAAA,aAAmBS,EAAAF,CAAA,CAAM,EAAA;AAAA;UAAsB,CAAAE,EAAAT,CAAA,6BAAmCS,EAAAJ,CAAA,MAAO;AAAA,UAAyB,CAAAI,EAAAT,CAAA,iCAAuCS,EAAAJ,CAAA,MAAO;AAAA,UAA6B,CAAAI,EAAAT,CAAA,mBAAyBS,EAAAH,CAAA;AAAA,iBAA2BG,EAAAF,CAAA,MAAM;AAAA,mBAAgCE,EAAAF,CAAA,MAAM;AAAA,oBAAgCE,EAAAJ,CAAA,MAAO;AAAA,6BAA2CI,EAAAJ,CAAA,MAAO;AAAA,WAA6BI,EAAAT,CAAA,EAAO,YAAA,CAAA,GAAiBF,EAAM;AAAA,QAAA;AAAA;MADrd,aAAU;AAAA,IAAA;MAgBCA,EAAM,gBAAgBW,EAAAF,CAAA,MAAM,WAAvCG,KAAAF,EAEM,OAFNG,GAEMC,EADDd,EAAM,YAAY,GAAA,CAAA;MAGvBe,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;;;;;;;;;;"}

package/dist/TableHeaderCell.js

@@ -1,72 +1,78 @@
-import { defineComponent as I, useCssModule as k, inject as p, computed as m, createElementBlock as _, openBlock as r, normalizeClass as s, unref as e, createElementVNode as T, renderSlot as E, createCommentVNode as n, createBlock as f } from "vue";
+import { defineComponent as k, useCssModule as D, inject as h, computed as s, createElementBlock as b, openBlock as c, normalizeClass as n, unref as e, createElementVNode as T, renderSlot as g, createCommentVNode as d, createBlock as x } from "vue";
 import "lodash-es/cloneDeep";
 import "./Module.keys-DcqBbvvT.js";
 import "lodash-es/get";
-import b from "./Icon.js";
-import { D as v } from "./DataView.keys-aSOnA4AD.js";
+import w from "./Icon.js";
+import { D as y } from "./DataView.keys-aSOnA4AD.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
 import "lodash-es/uniqueId";
 import "@leaflink/snitch";
-import { T as N } from "./Table.keys-LHQf6FEH.js";
-import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { T as E } from "./Table.keys-LHQf6FEH.js";
+import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const A = {
   key: 0,
   class: "relative h-4 w-3"
-}, B = /* @__PURE__ */ I({
+}, B = /* @__PURE__ */ k({
   __name: "TableHeaderCell",
   props: {
-    sortId: { default: "" }
+    sortId: { default: "" },
+    schemaDrivenHeader: { default: void 0 }
   },
-  setup(h) {
-    const a = h, t = k(), l = p(N.key);
-    if (!l)
+  setup(I) {
+    const r = I, t = D(), m = h(E.key);
+    if (!m)
       throw new Error("TableHeaderCell must be used within a Table component");
-    const { density: i, hasActions: x } = l, { currentSortId: w, currentSortOrder: d, updateCurrentSort: u } = p(
-      v.key,
-      v.defaults
-    ), c = m(() => !!a.sortId), o = m(() => w.value === a.sortId);
-    function y() {
-      c.value && typeof u == "function" && u(a.sortId, { shouldEmit: !0 });
+    const { density: p, hasActions: C } = m, a = s(() => !!r.schemaDrivenHeader), { currentSortId: H, currentSortOrder: v, updateCurrentSort: _ } = h(
+      y.key,
+      y.defaults
+    ), l = s(() => a.value ? r.schemaDrivenHeader.column.getCanSort() : !!r.sortId), o = s(() => a.value ? !!r.schemaDrivenHeader.column.getIsSorted() : H.value === r.sortId), f = s(() => a.value ? r.schemaDrivenHeader.column.getIsSorted() : o.value && v.value ? v.value : !1);
+    function S(i) {
+      var u;
+      if (a.value) {
+        (u = r.schemaDrivenHeader.column.getToggleSortingHandler()) == null || u(i);
+        return;
+      }
+      l.value && typeof _ == "function" && _(r.sortId, { shouldEmit: !0 });
     }
-    return (C, O) => (r(), _("th", {
-      class: s(["stash-table-header-cell border-b border-r border-ice-200 p-3 text-xs font-medium text-ice-900", [
+    return (i, u) => (c(), b("th", {
+      class: n(["stash-table-header-cell border-b border-r border-ice-200 p-3 text-xs font-medium text-ice-900", [
         e(t).root,
         {
           "bg-white": !o.value,
           "stash-table-header-cell--sorted bg-blue-100": o.value,
-          [e(t)["root--density-compact"]]: e(i) === "compact",
-          [e(t)["root--density-comfortable"]]: e(i) === "comfortable",
-          [e(t)["has-actions"]]: e(x),
-          "cursor-pointer": c.value
+          [e(t)["root--density-compact"]]: e(p) === "compact",
+          [e(t)["root--density-comfortable"]]: e(p) === "comfortable",
+          [e(t)["has-actions"]]: e(C),
+          "cursor-pointer": l.value
         }
       ]]),
       "data-test": "stash-table-header-cell",
-      onClick: y
+      onClick: S
     }, [
       T("div", {
-        class: s(["flex justify-between", e(t)["content-wrapper"]])
+        class: n(["flex justify-between", e(t)["content-wrapper"]])
       }, [
-        E(C.$slots, "default"),
-        c.value ? (r(), _("div", A, [
-          !o.value || e(d) === "asc" ? (r(), f(b, {
+        g(i.$slots, "default"),
+        l.value ? (c(), b("div", A, [
+          !o.value || f.value === "asc" ? (c(), x(w, {
             key: 0,
-            class: s(["absolute text-ice-700", [e(t).caret, e(t)["caret-up"]]]),
+            class: n(["absolute text-ice-700", [e(t).caret, e(t)["caret-up"]]]),
             "data-test": "icon|caret-up",
             name: "caret-up",
             size: "dense"
-          }, null, 8, ["class"])) : n("", !0),
-          !o.value || e(d) === "desc" ? (r(), f(b, {
+          }, null, 8, ["class"])) : d("", !0),
+          !o.value || f.value === "desc" ? (c(), x(w, {
             key: 1,
-            class: s(["absolute text-ice-700", [e(t).caret, e(t)["caret-down"]]]),
+            class: n(["absolute text-ice-700", [e(t).caret, e(t)["caret-down"]]]),
             "data-test": "icon|caret-down",
             name: "caret-down",
             size: "dense"
-          }, null, 8, ["class"])) : n("", !0)
-        ])) : n("", !0)
+          }, null, 8, ["class"])) : d("", !0)
+        ])) : d("", !0)
       ], 2)
     ], 2));
   }
-}), j = "_root_1xv85_5", z = "_caret_1xv85_21", H = {
+}), j = "_root_1xv85_5", z = "_caret_1xv85_21", M = {
   root: j,
   "has-actions": "_has-actions_1xv85_17",
   "content-wrapper": "_content-wrapper_1xv85_17",
@@ -74,10 +80,10 @@ const A = {
   "caret-down": "_caret-down_1xv85_25",
   caret: z,
   "root--density-comfortable": "_root--density-comfortable_1xv85_34"
-}, M = {
-  $style: H
-}, K = /* @__PURE__ */ S(B, [["__cssModules", M]]);
+}, O = {
+  $style: M
+}, Q = /* @__PURE__ */ N(B, [["__cssModules", O]]);
 export {
-  K as default
+  Q as default
 };
 //# sourceMappingURL=TableHeaderCell.js.map

package/dist/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, inject, useCssModule } from 'vue';\n\n  import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableHeaderCellProps {\n    /**\n     * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n     * For example: `'product_name'` (with no leading dash/hyphen).\n     */\n    sortId?: SortValueDeserialized['id'];\n  }\n\n  const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n    sortId: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableHeaderCell must be used within a Table component');\n  }\n\n  const { density, hasActions } = tableInjection;\n\n  // #region sorting\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n  const isSortable = computed(() => !!props.sortId);\n  const isActiveSort = computed(() => currentSortId.value === props.sortId);\n\n  function onRootClick() {\n    if (isSortable.value && typeof updateCurrentSort === 'function') {\n      updateCurrentSort(props.sortId, { shouldEmit: true });\n    }\n  }\n  // #endregion sorting\n</script>\n\n<template>\n  <th\n    class=\"stash-table-header-cell border-b border-r border-ice-200 p-3 text-xs font-medium text-ice-900\"\n    :class=\"[\n      classes.root,\n      {\n        'bg-white': !isActiveSort,\n        'stash-table-header-cell--sorted bg-blue-100': isActiveSort,\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'cursor-pointer': isSortable,\n      },\n    ]\"\n    data-test=\"stash-table-header-cell\"\n    @click=\"onRootClick\"\n  >\n    <div class=\"flex justify-between\" :class=\"classes['content-wrapper']\">\n      <!-- @slot default -->\n      <slot></slot>\n      <div v-if=\"isSortable\" class=\"relative h-4 w-3\">\n        <Icon\n          v-if=\"!isActiveSort || currentSortOrder === 'asc'\"\n          class=\"absolute text-ice-700\"\n          :class=\"[classes.caret, classes['caret-up']]\"\n          data-test=\"icon|caret-up\"\n          name=\"caret-up\"\n          size=\"dense\"\n        />\n        <Icon\n          v-if=\"!isActiveSort || currentSortOrder === 'desc'\"\n          class=\"absolute text-ice-700\"\n          :class=\"[classes.caret, classes['caret-down']]\"\n          data-test=\"icon|caret-down\"\n          name=\"caret-down\"\n          size=\"dense\"\n        />\n      </div>\n    </div>\n  </th>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      border-left: none;\n      border-top: none;\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    }\n\n    .root:last-of-type {\n      border-right: 0;\n    }\n\n    .has-actions:last-of-type .content-wrapper {\n      justify-content: flex-end !important;\n    }\n\n    .caret-up {\n      top: -5px;\n    }\n\n    .caret-down {\n      top: 2px;\n    }\n\n    :global(.stash-table-header-cell--sorted) .caret {\n      top: -2px; /* vertically center the caret icon */\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      .root--density-comfortable:last-of-type {\n        padding-right: 24px;\n      }\n\n      .root--density-comfortable:first-of-type:not(\n          :global(.stash-table-header-row__selection-cell),\n          :global(.stash-table-row__selection-cell)\n        ) {\n        padding-left: 24px;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","isActiveSort","onRootClick","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_renderSlot","_ctx","_openBlock","_hoisted_1","_createBlock","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAGRC,IAAUC,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,SAAAG,GAAS,YAAAC,EAAA,IAAeJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBN;AAAA,MAC7DO,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAEhBC,IAAaC,EAAS,MAAM,CAAC,CAACd,EAAM,MAAM,GAC1Ce,IAAeD,EAAS,MAAML,EAAc,UAAUT,EAAM,MAAM;AAExE,aAASgB,IAAc;AACrB,MAAIH,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBX,EAAM,QAAQ,EAAE,YAAY,IAAM;AAAA,IAExD;2BAKAiB,EAsCK,MAAA;AAAA,MArCH,UAAM,iGAA+F;AAAA,QACrFC,EAAAhB,CAAA,EAAQ;AAAA;uBAAmCa,EAAA;AAAA,yDAAqEA,EAAA;AAAA,UAAuB,CAAAG,EAAAhB,CAAA,6BAAmCgB,EAAAX,CAAA,MAAO;AAAA,UAAyB,CAAAW,EAAAhB,CAAA,iCAAuCgB,EAAAX,CAAA,MAAO;AAAA,UAA6B,CAAAW,EAAAhB,CAAA,mBAAyBgB,EAAAV,CAAA;AAAA,4BAAsCK,EAAA;AAAA,QAAA;AAAA;MAWpW,aAAU;AAAA,MACT,SAAOG;AAAA,IAAA;MAERG,EAqBM,OAAA;AAAA,QArBD,OAAKC,EAAA,CAAC,wBAA+BF,EAAAhB,CAAA,EAAO,iBAAA,CAAA,CAAA;AAAA,MAAA;QAE/CmB,EAAaC,EAAA,QAAA,SAAA;AAAA,QACFT,EAAA,SAAXU,EAAA,GAAAN,EAiBM,OAjBNO,GAiBM;AAAA,UAfK,CAAAT,EAAA,SAAgBG,EAAAR,CAAA,MAAgB,cADzCe,EAOEC,GAAA;AAAA;YALA,UAAM,yBAAuB,CACpBR,KAAQ,OAAOA,EAAAhB,CAAA,EAAO,UAAA,CAAA,CAAA,CAAA;AAAA,YAC/B,aAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;UAGE,CAAAa,EAAA,SAAgBG,EAAAR,CAAA,MAAgB,eADzCe,EAOEC,GAAA;AAAA;YALA,UAAM,yBAAuB,CACpBR,KAAQ,OAAOA,EAAAhB,CAAA,EAAO,YAAA,CAAA,CAAA,CAAA;AAAA,YAC/B,aAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import type { Header } from '@tanstack/vue-table';\n  import { computed, inject, useCssModule } from 'vue';\n\n  import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableHeaderCellProps {\n    /**\n     * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n     * For example: `'product_name'` (with no leading dash/hyphen).\n     */\n    sortId?: SortValueDeserialized['id'];\n\n    /**\n     * TanStack header instance passed when Table is in schema-driven mode.\n     * When provided, sorting is controlled by TanStack instead of DataView.\n     * Typed as any so DataTable can pass Header<TData, unknown> without a type assertion.\n     */\n    schemaDrivenHeader?: Header<any, any>;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n    sortId: '',\n    schemaDrivenHeader: undefined,\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableHeaderCell must be used within a Table component');\n  }\n\n  const { density, hasActions } = tableInjection;\n\n  const hasSchemaDrivenHeader = computed(() => !!props.schemaDrivenHeader);\n\n  // #region sorting\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n\n  const isSortable = computed(() => {\n    if (hasSchemaDrivenHeader.value) {\n      return props.schemaDrivenHeader!.column.getCanSort();\n    }\n    return !!props.sortId;\n  });\n\n  const isActiveSort = computed(() => {\n    if (hasSchemaDrivenHeader.value) {\n      return !!props.schemaDrivenHeader!.column.getIsSorted();\n    }\n    return currentSortId.value === props.sortId;\n  });\n\n  const sortDirection = computed<'asc' | 'desc' | false>(() => {\n    if (hasSchemaDrivenHeader.value) {\n      return props.schemaDrivenHeader!.column.getIsSorted();\n    }\n    if (isActiveSort.value && currentSortOrder.value) {\n      return currentSortOrder.value;\n    }\n    return false;\n  });\n\n  function onRootClick(event: MouseEvent) {\n    if (hasSchemaDrivenHeader.value) {\n      props.schemaDrivenHeader!.column.getToggleSortingHandler()?.(event);\n      return;\n    }\n\n    if (isSortable.value && typeof updateCurrentSort === 'function') {\n      updateCurrentSort(props.sortId, { shouldEmit: true });\n    }\n  }\n  // #endregion sorting\n</script>\n\n<template>\n  <th\n    class=\"stash-table-header-cell border-b border-r border-ice-200 p-3 text-xs font-medium text-ice-900\"\n    :class=\"[\n      classes.root,\n      {\n        'bg-white': !isActiveSort,\n        'stash-table-header-cell--sorted bg-blue-100': isActiveSort,\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'cursor-pointer': isSortable,\n      },\n    ]\"\n    data-test=\"stash-table-header-cell\"\n    @click=\"onRootClick\"\n  >\n    <div class=\"flex justify-between\" :class=\"classes['content-wrapper']\">\n      <!-- @slot default -->\n      <slot></slot>\n      <div v-if=\"isSortable\" class=\"relative h-4 w-3\">\n        <Icon\n          v-if=\"!isActiveSort || sortDirection === 'asc'\"\n          class=\"absolute text-ice-700\"\n          :class=\"[classes.caret, classes['caret-up']]\"\n          data-test=\"icon|caret-up\"\n          name=\"caret-up\"\n          size=\"dense\"\n        />\n        <Icon\n          v-if=\"!isActiveSort || sortDirection === 'desc'\"\n          class=\"absolute text-ice-700\"\n          :class=\"[classes.caret, classes['caret-down']]\"\n          data-test=\"icon|caret-down\"\n          name=\"caret-down\"\n          size=\"dense\"\n        />\n      </div>\n    </div>\n  </th>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      border-left: none;\n      border-top: none;\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    }\n\n    .root:last-of-type {\n      border-right: 0;\n    }\n\n    .has-actions:last-of-type .content-wrapper {\n      justify-content: flex-end !important;\n    }\n\n    .caret-up {\n      top: -5px;\n    }\n\n    .caret-down {\n      top: 2px;\n    }\n\n    :global(.stash-table-header-cell--sorted) .caret {\n      top: -2px; /* vertically center the caret icon */\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      .root--density-comfortable:last-of-type {\n        padding-right: 24px;\n      }\n\n      .root--density-comfortable:first-of-type:not(\n          :global(.stash-table-header-row__selection-cell),\n          :global(.stash-table-row__selection-cell)\n        ) {\n        padding-left: 24px;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","hasSchemaDrivenHeader","computed","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","isActiveSort","sortDirection","onRootClick","event","_a","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_renderSlot","_ctx","_openBlock","_hoisted_1","_createBlock","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBE,UAAMA,IAAQC,GAIRC,IAAUC,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,SAAAG,GAAS,YAAAC,EAAA,IAAeJ,GAE1BK,IAAwBC,EAAS,MAAM,CAAC,CAACV,EAAM,kBAAkB,GAGjE,EAAE,eAAAW,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBR;AAAA,MAC7DS,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAGhBC,IAAaL,EAAS,MACtBD,EAAsB,QACjBT,EAAM,mBAAoB,OAAO,WAAA,IAEnC,CAAC,CAACA,EAAM,MAChB,GAEKgB,IAAeN,EAAS,MACxBD,EAAsB,QACjB,CAAC,CAACT,EAAM,mBAAoB,OAAO,YAAA,IAErCW,EAAc,UAAUX,EAAM,MACtC,GAEKiB,IAAgBP,EAAiC,MACjDD,EAAsB,QACjBT,EAAM,mBAAoB,OAAO,YAAA,IAEtCgB,EAAa,SAASJ,EAAiB,QAClCA,EAAiB,QAEnB,EACR;AAED,aAASM,EAAYC,GAAmB;;AACtC,UAAIV,EAAsB,OAAO;AAC/B,SAAAW,IAAApB,EAAM,mBAAoB,OAAO,wBAAA,MAAjC,QAAAoB,EAA6DD;AAC7D;AAAA,MACF;AAEA,MAAIJ,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBb,EAAM,QAAQ,EAAE,YAAY,IAAM;AAAA,IAExD;2BAKAqB,EAsCK,MAAA;AAAA,MArCH,UAAM,iGAA+F;AAAA,QACrFC,EAAApB,CAAA,EAAQ;AAAA;uBAAmCc,EAAA;AAAA,yDAAqEA,EAAA;AAAA,UAAuB,CAAAM,EAAApB,CAAA,6BAAmCoB,EAAAf,CAAA,MAAO;AAAA,UAAyB,CAAAe,EAAApB,CAAA,iCAAuCoB,EAAAf,CAAA,MAAO;AAAA,UAA6B,CAAAe,EAAApB,CAAA,mBAAyBoB,EAAAd,CAAA;AAAA,4BAAsCO,EAAA;AAAA,QAAA;AAAA;MAWpW,aAAU;AAAA,MACT,SAAOG;AAAA,IAAA;MAERK,EAqBM,OAAA;AAAA,QArBD,OAAKC,EAAA,CAAC,wBAA+BF,EAAApB,CAAA,EAAO,iBAAA,CAAA,CAAA;AAAA,MAAA;QAE/CuB,EAAaC,EAAA,QAAA,SAAA;AAAA,QACFX,EAAA,SAAXY,EAAA,GAAAN,EAiBM,OAjBNO,GAiBM;AAAA,UAfK,CAAAZ,EAAA,SAAgBC,EAAA,UAAa,cADtCY,EAOEC,GAAA;AAAA;YALA,UAAM,yBAAuB,CACpBR,KAAQ,OAAOA,EAAApB,CAAA,EAAO,UAAA,CAAA,CAAA,CAAA;AAAA,YAC/B,aAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;UAGE,CAAAc,EAAA,SAAgBC,EAAA,UAAa,eADtCY,EAOEC,GAAA;AAAA;YALA,UAAM,yBAAuB,CACpBR,KAAQ,OAAOA,EAAApB,CAAA,EAAO,YAAA,CAAA,CAAA,CAAA;AAAA,YAC/B,aAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderCell.vue.d.ts

@@ -2,6 +2,7 @@ import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
+import { Header } from '@tanstack/vue-table';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
@@ -34,10 +35,13 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderCellProps>, {
 sortId: string;
+schemaDrivenHeader: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderCellProps>, {
 sortId: string;
+schemaDrivenHeader: undefined;
 }>>> & Readonly<{}>, {
 sortId: string;
+schemaDrivenHeader: Header<any, any>;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
@@ -67,6 +71,12 @@ export declare interface TableHeaderCellProps {
      * For example: `'product_name'` (with no leading dash/hyphen).
      */
     sortId?: SortValueDeserialized['id'];
+    /**
+     * TanStack header instance passed when Table is in schema-driven mode.
+     * When provided, sorting is controlled by TanStack instead of DataView.
+     * Typed as any so DataTable can pass Header<TData, unknown> without a type assertion.
+     */
+    schemaDrivenHeader?: Header<any, any>;
 }
 
 export { }

package/dist/TableHeaderRow.js

@@ -1,71 +1,71 @@
-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 { defineComponent as C, inject as h, computed as E, ref as R, createElementBlock as x, openBlock as l, createBlock as o, createCommentVNode as s, renderSlot as B, unref as e, normalizeClass as a, withCtx as I } from "vue";
+import { t as S } from "./locale.js";
+import $ from "./Checkbox.js";
+import { D as f } from "./DataView.keys-aSOnA4AD.js";
 import "lodash-es/uniqueId";
 import "lodash-es/cloneDeep";
 import "./Module.keys-DcqBbvvT.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 $ = {
+import { T as v } from "./Table.keys-LHQf6FEH.js";
+import i from "./TableHeaderCell.js";
+import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const A = {
   class: "stash-table-header-row",
   "data-test": "stash-table-header-row"
-}, N = /* @__PURE__ */ k({
+}, H = /* @__PURE__ */ C({
   __name: "TableHeaderRow",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
     someRowsSelected: { type: Boolean, default: !1 }
   },
   emits: ["select"],
-  setup(u, { emit: b }) {
-    const c = u, f = b, d = w(B.key);
-    if (!d)
+  setup(_, { emit: b }) {
+    const c = _, y = b, m = h(v.key);
+    if (!m)
       throw new Error("TableHeaderRow must be used within a Table component");
-    const { hasCustomExpandToggle: _, isExpandable: y, isSelectable: i } = d, { hasToolbar: r } = w(h.key, h.defaults), m = T(0);
-    function p() {
-      f("select"), m.value++;
+    const { hasCustomExpandToggle: k, isSchemaDriven: r, isExpandable: T, isSelectable: n } = m, p = E(() => (n == null ? void 0 : n.value) && !(r != null && r.value)), { hasToolbar: d } = h(f.key, f.defaults), u = R(0);
+    function w() {
+      y("select"), u.value++;
     }
-    return (t, g) => (l(), C("tr", $, [
-      e(r) && e(i) ? (l(), o(n, {
+    return (t, J) => (l(), x("tr", A, [
+      e(d) && p.value ? (l(), o(i, {
         key: 0,
         class: a(["stash-table-header-row__selection-cell-empty", t.$style["row-control-cell"]]),
         "data-test": "table-row-header|selection-cell-empty"
       }, null, 8, ["class"])) : s("", !0),
-      !e(r) && e(i) ? (l(), o(n, {
+      !e(d) && p.value ? (l(), o(i, {
         key: 1,
-        class: a(["stash-table-header-row__selection-cell min-w-[48px]", t.$style["row-control-cell"]]),
+        class: a(["stash-table-header-row__selection-cell min-w-12", t.$style["row-control-cell"]]),
         "data-test": "table-row-header|selection-cell"
       }, {
-        default: E(() => [
-          e(r) ? s("", !0) : (l(), o(S, {
-            key: m.value,
+        default: I(() => [
+          e(d) ? s("", !0) : (l(), o($, {
+            key: u.value,
             class: a(t.$style["row-selection-checkbox"]),
             checked: c.allRowsSelected,
             indeterminate: c.someRowsSelected && !c.allRowsSelected,
-            title: e(R)("ll.selectAll"),
-            "onUpdate:indeterminate": p,
-            "onUpdate:checked": p
+            title: e(S)("ll.selectAll"),
+            "onUpdate:indeterminate": w,
+            "onUpdate:checked": w
           }, null, 8, ["class", "checked", "indeterminate", "title"]))
         ]),
         _: 1
       }, 8, ["class"])) : s("", !0),
-      e(y) && !e(_) ? (l(), o(n, {
+      e(T) && !e(k) ? (l(), o(i, {
         key: 2,
         class: a(t.$style["row-control-cell"]),
         "data-test": "table-row-header-expansion-cell"
       }, null, 8, ["class"])) : s("", !0),
-      x(t.$slots, "default")
+      B(t.$slots, "default")
     ]));
   }
-}), A = {
+}), g = {
   "row-selection-checkbox": "_row-selection-checkbox_102yd_5",
   "row-control-cell": "_row-control-cell_102yd_11"
-}, H = {
-  $style: A
-}, W = /* @__PURE__ */ I(N, [["__cssModules", H]]);
+}, j = {
+  $style: g
+}, G = /* @__PURE__ */ N(H, [["__cssModules", j]]);
 export {
-  W as default
+  G 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 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","_openBlock","_createElementBlock","_hoisted_1","_unref","_createBlock","TableHeaderCell","_normalizeClass","$style","Checkbox","t","_renderSlot","_ctx"],"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;sBAIAG,EAAA,GAAAC,EAkCK,MAlCLC,GAkCK;AAAA,MA/BKC,EAAAR,CAAA,KAAcQ,EAAAT,CAAA,UADtBU,EAKEC,GAAA;AAAA;QAHA,OAAKC,EAAA,CAAC,gDACEC,EAAAA,OAAM,kBAAA,CAAA,CAAA;AAAA,QACd,aAAU;AAAA,MAAA;MAIH,CAAAJ,EAAAR,CAAA,KAAcQ,EAAAT,CAAA,UADvBU,EAgBkBC,GAAA;AAAA;QAdhB,OAAKC,EAAA,CAAC,uDACEC,EAAAA,OAAM,kBAAA,CAAA,CAAA;AAAA,QACd,aAAU;AAAA,MAAA;mBAEV,MASE;AAAA,UAROJ,EAAAR,CAAA,sBADTS,EASEI,GAAA;AAAA,YAPC,KAAKX,EAAA;AAAA,YACL,SAAOU,EAAAA,OAAM,wBAAA,CAAA;AAAA,YACb,SAAStB,EAAM;AAAA,YACf,eAAeA,EAAM,oBAAgB,CAAKA,EAAM;AAAA,YAChD,OAAOkB,EAAAM,CAAA,EAAC,cAAA;AAAA,YACR,0BAAsBV;AAAA,YACtB,oBAAgBA;AAAA,UAAA;;;;MAKbI,EAAAV,CAAA,MAAiBU,EAAAX,CAAA,UADzBY,EAIEC,GAAA;AAAA;QAFC,SAAOE,EAAAA,OAAM,kBAAA,CAAA;AAAA,QACd,aAAU;AAAA,MAAA;MAGZG,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;;;;;;"}
+{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, 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, isSchemaDriven, isExpandable, isSelectable } = tableInjection;\n\n  const showSelectionCells = computed(() => isSelectable?.value && !isSchemaDriven?.value);\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 && showSelectionCells\"\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 && showSelectionCells\"\n      class=\"stash-table-header-row__selection-cell min-w-12\"\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","isSchemaDriven","isExpandable","isSelectable","showSelectionCells","computed","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","onSelect","_openBlock","_createElementBlock","_hoisted_1","_unref","_createBlock","TableHeaderCell","_normalizeClass","$style","Checkbox","t","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAKRC,IAAOC,GAIPC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,gBAAAC,GAAgB,cAAAC,GAAc,cAAAC,MAAiBN,GAExEO,IAAqBC,EAAS,OAAMF,KAAA,gBAAAA,EAAc,UAAS,EAACF,KAAA,QAAAA,EAAgB,MAAK,GAEjF,EAAE,YAAAK,EAAA,IAAeR,EAAOS,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAf,EAAK,QAAQ,GAOba,EAAY;AAAA,IACd;sBAIAG,EAAA,GAAAC,EAkCK,MAlCLC,GAkCK;AAAA,MA/BKC,EAAAR,CAAA,KAAcF,EAAA,cADtBW,EAKEC,GAAA;AAAA;QAHA,OAAKC,EAAA,CAAC,gDACEC,EAAAA,OAAM,kBAAA,CAAA,CAAA;AAAA,QACd,aAAU;AAAA,MAAA;MAIH,CAAAJ,EAAAR,CAAA,KAAcF,EAAA,cADvBW,EAgBkBC,GAAA;AAAA;QAdhB,OAAKC,EAAA,CAAC,mDACEC,EAAAA,OAAM,kBAAA,CAAA,CAAA;AAAA,QACd,aAAU;AAAA,MAAA;mBAEV,MASE;AAAA,UAROJ,EAAAR,CAAA,sBADTS,EASEI,GAAA;AAAA,YAPC,KAAKX,EAAA;AAAA,YACL,SAAOU,EAAAA,OAAM,wBAAA,CAAA;AAAA,YACb,SAASzB,EAAM;AAAA,YACf,eAAeA,EAAM,oBAAgB,CAAKA,EAAM;AAAA,YAChD,OAAOqB,EAAAM,CAAA,EAAC,cAAA;AAAA,YACR,0BAAsBV;AAAA,YACtB,oBAAgBA;AAAA,UAAA;;;;MAKbI,EAAAZ,CAAA,MAAiBY,EAAAd,CAAA,UADzBe,EAIEC,GAAA;AAAA;QAFC,SAAOE,EAAAA,OAAM,kBAAA,CAAA;AAAA,QACd,aAAU;AAAA,MAAA;MAGZG,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;;;;;;"}