@leaflink/stash 53.4.5 → 53.4.6

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;;;;;;;;"}

package/dist/TableRow.js

@@ -1,17 +1,17 @@
-import { defineComponent as D, useAttrs as M, useCssModule as V, useSlots as j, inject as L, ref as P, computed as E, 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 y, renderSlot as g, normalizeClass as c, withCtx as _, createVNode as b } from "vue";
-import O from "lodash-es/uniqueId";
-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-BmNJA0Xy.js";
+import { defineComponent as P, useAttrs as q, useCssModule as z, useSlots as F, inject as J, computed as _, ref as O, watch as U, createElementBlock as f, openBlock as i, Fragment as T, createElementVNode as G, createCommentVNode as w, mergeProps as H, unref as e, createBlock as B, renderSlot as R, normalizeClass as c, withCtx as m, createVNode as h } from "vue";
+import K from "lodash-es/uniqueId";
+import { t as v } from "./locale.js";
+import Q from "./Checkbox.js";
+import { _ as W } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-Ce_qOXfR.js";
+import { _ as X } from "./Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js";
 import "lodash-es/cloneDeep";
 import "./Module.keys-DcqBbvvT.js";
 import "./DataView.keys-aSOnA4AD.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
-import S from "./TableCell.js";
-import { T as K } from "./Table.keys-LHQf6FEH.js";
-import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const W = /* @__PURE__ */ D({
+import A from "./TableCell.js";
+import { T as Y } from "./Table.keys-LHQf6FEH.js";
+import { _ as Z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ee = /* @__PURE__ */ P({
   inheritAttrs: !1,
   __name: "TableRow",
   props: {
@@ -22,81 +22,89 @@ const W = /* @__PURE__ */ D({
     accentColor: { default: void 0 }
   },
   emits: ["update:isSelected", "update:isExpanded"],
-  setup(f, { emit: T }) {
-    const o = f, h = T, B = M(), t = V(), i = j(), v = L(K.key);
-    if (!v)
+  setup(C, { emit: $ }) {
+    const o = C, y = $, N = q(), l = z(), d = F(), k = J(Y.key);
+    if (!k)
       throw new Error("TableRow must be used within a Table component");
-    const { hasActions: R, hasCustomExpandToggle: C, isExpandable: $, isSelectable: x, layout: d, isLoading: I } = v, l = P(o.isExpanded), n = E(() => $.value && !!i.expansion), N = E(() => {
-      var s;
-      let a = ((s = i.default) == null ? void 0 : s.call(i, { toggleExpand: p }).length) ?? 0;
-      return x.value && (a += 1), n.value && !C.value && (a += 1), a;
-    }), k = O("table-row-");
-    function p(a) {
-      if (!n.value)
+    const { hasActions: I, hasCustomExpandToggle: E, isSchemaDriven: x, isExpandable: V, isSelectable: j, layout: p, isLoading: D } = k, b = _(() => j.value && !(x != null && x.value)), s = O(o.isExpanded), r = _(() => V.value && !!d.expansion);
+    function M(a) {
+      return Array.isArray(a) && a.every((t) => t != null && typeof t == "object" && "type" in t);
+    }
+    function g(a) {
+      return a.reduce((t, n) => n.type === T && M(n.children) ? t + g(n.children) : t + 1, 0);
+    }
+    const L = _(() => {
+      var n;
+      const a = ((n = d.default) == null ? void 0 : n.call(d, { toggleExpand: u })) ?? [];
+      let t = g(a);
+      return b.value && (t += 1), r.value && !E.value && (t += 1), t;
+    }), S = K("table-row-");
+    function u(a) {
+      if (!r.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, h("update:isExpanded", s);
+      const t = typeof a == "boolean" ? a : !s.value;
+      s.value = t, y("update:isExpanded", t);
     }
-    return q(
+    return U(
       () => o.isExpanded,
-      () => p(o.isExpanded)
-    ), (a, s) => (r(), w(z, null, [
-      F("tr", J({
+      () => u(o.isExpanded)
+    ), (a, t) => (i(), f(T, null, [
+      G("tr", H({
         class: ["stash-table-row", [
-          e(t).root,
-          e(t)[`layout--${e(d)}`],
+          e(l).root,
+          e(l)[`layout--${e(p)}`],
           {
-            [e(t)["is-expandable"]]: n.value,
-            [e(t)["is-expanded"]]: l.value,
-            [e(t)["root--hidden-divider"]]: f.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),
+            [e(l)["is-expandable"]]: r.value,
+            [e(l)["is-expanded"]]: s.value,
+            [e(l)["root--hidden-divider"]]: C.hideExpansionDivider,
+            "p-gutter": e(p) === "stack",
+            "mb-6 shadow lg:mb-0 lg:shadow-none": e(p) === "stack" && !r.value,
+            "pt-[60px]": e(I) && e(p) === "stack" && !b.value && !e(D),
             "stash-table-row--accent": o.accentColor,
             relative: o.accentColor
           }
         ]],
         "data-test": "stash-table-row"
-      }, e(B)), [
-        e(x) ? (r(), y(S, {
+      }, e(N)), [
+        b.value ? (i(), B(A, {
           key: 0,
           "is-control": "",
-          class: c(["stash-table-row__selection-cell min-w-[48px] lg:pl-3", e(t)["row-control-cell"]]),
+          class: c(["stash-table-row__selection-cell min-w-12 lg:pl-3", e(l)["row-control-cell"]]),
           "data-test": "stash-table-row|selection-cell"
         }, {
-          default: _(() => [
-            b(U, {
-              class: c(e(t)["row-selection-checkbox"]),
+          default: m(() => [
+            h(Q, {
+              class: c(e(l)["row-selection-checkbox"]),
               checked: o.isSelected,
               disabled: o.isSelectDisabled,
-              title: e(m)("ll.select.self"),
-              "onUpdate:checked": s[0] || (s[0] = (A) => h("update:isSelected", A))
+              title: e(v)("ll.select.self"),
+              "onUpdate:checked": t[0] || (t[0] = (n) => y("update:isSelected", n))
             }, null, 8, ["class", "checked", "disabled", "title"])
           ]),
           _: 1
-        }, 8, ["class"])) : u("", !0),
-        n.value && !e(C) ? (r(), y(S, {
+        }, 8, ["class"])) : w("", !0),
+        r.value && !e(E) ? (i(), B(A, {
           key: 1,
-          class: c(["stash-table-row__toggle-expansion-cell px-0", e(t)["row-control-cell"]]),
+          class: c(["stash-table-row__toggle-expansion-cell px-0", e(l)["row-control-cell"]]),
           "data-test": "stash-table-row|custom-expansion-cell",
           "is-control": ""
         }, {
-          default: _(() => [
-            b(G, {
-              "aria-controls": e(k),
-              "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
+          default: m(() => [
+            h(W, {
+              "aria-controls": e(S),
+              "aria-label": s.value ? e(v)("ll.table.collapseRow") : e(v)("ll.table.expandRow"),
+              direction: s.value ? "up" : "down",
+              "is-expanded": s.value,
+              onClick: u
             }, null, 8, ["aria-controls", "aria-label", "direction", "is-expanded"])
           ]),
           _: 1
-        }, 8, ["class"])) : u("", !0),
-        g(a.$slots, "default", {
-          isRowExpanded: l.value,
-          toggleExpand: p
+        }, 8, ["class"])) : w("", !0),
+        R(a.$slots, "default", {
+          isRowExpanded: s.value,
+          toggleExpand: u
         }),
-        o.accentColor ? (r(), w("div", {
+        o.accentColor ? (i(), f("div", {
           key: 2,
           "data-test": "stash-table-row|accent",
           class: c({
@@ -108,31 +116,31 @@ const W = /* @__PURE__ */ D({
             "top-0": o.accentColor,
             "left-0": o.accentColor
           })
-        }, null, 2)) : u("", !0)
+        }, null, 2)) : w("", !0)
       ], 16),
-      n.value ? (r(), w("tr", {
+      r.value ? (i(), f("tr", {
         key: 0,
-        class: c(["stash-table-row stash-table-row--expandable", e(t)["row-expansion"]]),
+        class: c(["stash-table-row stash-table-row--expandable", e(l)["row-expansion"]]),
         "data-test": "stash-table-row|expansion-row"
       }, [
-        b(H, {
+        h(X, {
           is: "td",
-          id: e(k),
-          class: c(["border-none bg-white px-3 py-0", e(t)["row-expansion-content"]]),
+          id: e(S),
+          class: c(["border-none bg-white px-3 py-0", e(l)["row-expansion-content"]]),
           "data-test": "stash-table-row|expansion-cell",
-          colspan: N.value,
-          "is-expanded": l.value
+          colspan: L.value,
+          "is-expanded": s.value
         }, {
-          default: _(() => [
-            g(a.$slots, "expansion")
+          default: m(() => [
+            R(a.$slots, "expansion")
           ]),
           _: 3
         }, 8, ["id", "class", "colspan", "is-expanded"])
-      ], 2)) : u("", !0)
+      ], 2)) : w("", !0)
     ], 64));
   }
-}), X = "_root_27247_5", Y = {
-  root: X,
+}), oe = "_root_27247_5", te = {
+  root: oe,
   "is-expandable": "_is-expandable_27247_12",
   "root--hidden-divider": "_root--hidden-divider_27247_17",
   "is-expanded": "_is-expanded_27247_17",
@@ -142,10 +150,10 @@ const W = /* @__PURE__ */ D({
   "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
-}, xe = /* @__PURE__ */ Q(W, [["__cssModules", Z]]);
+}, ae = {
+  $style: te
+}, fe = /* @__PURE__ */ Z(ee, [["__cssModules", ae]]);
 export {
-  xe as default
+  fe as default
 };
 //# sourceMappingURL=TableRow.js.map

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        '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","_createElementVNode","_mergeProps","_unref","_createBlock","TableCell","_normalizeClass","_createVNode","Checkbox","t","_cache","$event","ChevronToggle","_renderSlot","_ctx","_createElementBlock","Expand"],"mappings":"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"}
+{"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, Fragment, inject, ref, useAttrs, useCssModule, type VNode, 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 }): VNode[];\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, isSchemaDriven, isExpandable, isSelectable, layout, isLoading } =\n    tableInjection;\n\n  const showSelectionCell = computed(() => isSelectable.value && !isSchemaDriven?.value);\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  function isVNodeArray(children: unknown): children is VNode[] {\n    return (\n      Array.isArray(children) && children.every((c): c is VNode => c != null && typeof c === 'object' && 'type' in c)\n    );\n  }\n\n  // Children passed as part of a for loop have a different shape than children passed normally.\n  function countSlotChildren(vnodes: VNode[]): number {\n    return vnodes.reduce((total, node) => {\n      if (node.type === Fragment && isVNodeArray(node.children)) {\n        return total + countSlotChildren(node.children);\n      }\n      return total + 1;\n    }, 0);\n  }\n\n  const childCellCount = computed(() => {\n    const vnodes = slots.default?.({ toggleExpand }) ?? [];\n    let count = countSlotChildren(vnodes);\n\n    if (showSelectionCell.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' && !showSelectionCell && !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=\"showSelectionCell\"\n      is-control\n      class=\"stash-table-row__selection-cell min-w-12 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","isSchemaDriven","isExpandable","isSelectable","layout","isLoading","showSelectionCell","computed","isRowExpanded","ref","isRowExpandable","isVNodeArray","children","c","countSlotChildren","vnodes","total","node","Fragment","childCellCount","_a","toggleExpand","count","rowId","uniqueId","value","isExpanded","watch","_createElementVNode","_mergeProps","_unref","_createBlock","TableCell","_normalizeClass","_createVNode","Checkbox","t","_cache","$event","ChevronToggle","_renderSlot","_ctx","_createElementBlock","Expand"],"mappings":"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"}

package/dist/TableRow.vue.d.ts

@@ -4,6 +4,9 @@ import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
+import { VNode } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -66,13 +69,17 @@ isSelectDisabled: boolean;
     default(props: {
         isRowExpanded?: boolean | undefined;
         toggleExpand: (value?: boolean | undefined) => void;
-    }): unknown[];
+    }): VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>[];
     expansion(): unknown[];
 }> & {
     default(props: {
         isRowExpanded?: boolean | undefined;
         toggleExpand: (value?: boolean | undefined) => void;
-    }): unknown[];
+    }): VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>[];
     expansion(): unknown[];
 }>;
 export default _default;