@leaflink/stash 46.7.2 → 46.8.0

package/dist/Table.js

@@ -1,16 +1,16 @@
-import { defineComponent as B, inject as w, computed as a, provide as C, openBlock as n, createElementBlock as L, normalizeClass as b, unref as m, normalizeStyle as H, createElementVNode as u, renderSlot as p, createBlock as v, withCtx as r, createVNode as i } from "vue";
+import { defineComponent as C, inject as b, computed as a, provide as L, onBeforeMount as H, openBlock as n, createElementBlock as N, normalizeClass as v, unref as m, normalizeStyle as D, createElementVNode as u, renderSlot as p, createBlock as g, withCtx as r, createVNode as i } from "vue";
 import "lodash-es/cloneDeep";
-import { M as g } from "./Module.keys-2cc7d830.js";
+import { M as h } from "./Module.keys-2cc7d830.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as h } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
-import N from "./EmptyState.js";
-import D from "./Loading.js";
-import E from "./TableCell.js";
-import k from "./TableRow.js";
-import { T as I } from "./Table.keys-cf93df19.js";
-import { S as V } from "./misc-76697f61.js";
+import { D as E } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
+import V from "./EmptyState.js";
+import I from "./Loading.js";
+import k from "./TableCell.js";
+import S from "./TableRow.js";
+import { T as A } from "./Table.keys-cf93df19.js";
+import { S as O } from "./misc-76697f61.js";
 import "./locale.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
@@ -26,8 +26,8 @@ import "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
 import "./Button.js";
 import "./Icon.js";
 import "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
-var A = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(A || {}), O = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))(O || {});
-const J = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, pt = /* @__PURE__ */ B({
+var J = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(J || {}), M = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))(M || {});
+const $ = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ft = /* @__PURE__ */ C({
   __name: "Table",
   props: {
     density: { default: void 0 },
@@ -46,63 +46,66 @@ const J = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
     const t = e, {
       density: x,
       variant: c,
-      isLoading: S,
-      isEmpty: _
-    } = w(h.key, h.defaults), { variant: s } = w(g.key, g.defaults), f = a(() => (s == null ? void 0 : s.value) === "table" || c.value === "table" ? "rounded-bottom" : t.radius), l = a(() => t.stickyHeader ? "scroll" : t.layout), y = a(() => {
+      isEmpty: _,
+      isLoading: B,
+      isSelectable: f
+    } = b(E.key, E.defaults), { variant: s } = b(h.key, h.defaults), y = a(() => (s == null ? void 0 : s.value) === "table" || c.value === "table" ? "rounded-bottom" : t.radius), l = a(() => t.stickyHeader ? "scroll" : t.layout), w = a(() => {
       var o, d;
       return !!((o = t.stickyHeader) != null && o.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
       ((d = t.stickyHeader) == null ? void 0 : d.listLength) > 3);
     }), T = a(() => {
       var o;
       return {
-        maxHeight: y.value ? (o = t.stickyHeader) == null ? void 0 : o.maxHeight : ""
+        maxHeight: w.value ? (o = t.stickyHeader) == null ? void 0 : o.maxHeight : ""
       };
     });
-    return C(I.key, {
-      density: a(() => t.density || x.value || V.Comfortable),
+    return L(A.key, {
+      density: a(() => t.density || x.value || O.Comfortable),
       hasCustomExpandToggle: a(() => t.hasCustomExpandToggle),
       hasActions: a(() => t.hasActions),
       isExpandable: a(() => t.isExpandable),
       isSelectable: a(() => t.isSelectable && !t.isLoading && !t.isEmpty),
       layout: l
-    }), (o, d) => (n(), L("div", {
-      class: b(["stash-table tw-relative", [
-        { "tw-rounded": f.value === "rounded" },
-        { "tw-rounded-b": f.value === "rounded-bottom" },
+    }), H(() => {
+      f && (f.value = t.isSelectable);
+    }), (o, d) => (n(), N("div", {
+      class: v(["stash-table tw-relative", [
+        { "tw-rounded": y.value === "rounded" },
+        { "tw-rounded-b": y.value === "rounded-bottom" },
         { "tw-border-t tw-border-ice-200": m(c) === "table" },
         { "tw-overflow-auto tw-shadow": l.value === "scroll" },
         { "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack" },
-        { "tw-min-h-[300px]": y.value && !t.isLoading }
+        { "tw-min-h-[300px]": w.value && !t.isLoading }
         // prevent the table from collapsing on small screen heights when the max-height is dynamic
       ]]),
       "data-test": "stash-table",
-      style: H(T.value)
+      style: D(T.value)
     }, [
-      u("table", J, [
+      u("table", $, [
         u("thead", {
-          class: b(["tw-border-b tw-border-ice-200", {
+          class: v(["tw-border-b tw-border-ice-200", {
             "tw-hidden lg:tw-table-header-group": l.value === "stack"
           }])
         }, [
           p(o.$slots, "head")
         ], 2),
         u("tbody", null, [
-          t.isLoading || m(S) ? (n(), v(k, { key: 0 }, {
+          t.isLoading || m(B) ? (n(), g(S, { key: 0 }, {
             default: r(() => [
-              i(E, { colspan: "100%" }, {
+              i(k, { colspan: "100%" }, {
                 default: r(() => [
-                  i(D)
+                  i(I)
                 ]),
                 _: 1
               })
             ]),
             _: 1
-          })) : t.isEmpty || m(_) ? (n(), v(k, { key: 1 }, {
+          })) : t.isEmpty || m(_) ? (n(), g(S, { key: 1 }, {
             default: r(() => [
-              i(E, { colspan: "100%" }, {
+              i(k, { colspan: "100%" }, {
                 default: r(() => [
                   p(o.$slots, "empty", {}, () => [
-                    i(N, {
+                    i(V, {
                       class: "tw-w-full tw-bg-white",
                       text: t.emptyStateText
                     }, null, 8, ["text"])
@@ -119,9 +122,9 @@ const J = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
   }
 });
 export {
-  A as Layout,
-  I as TABLE_INJECTION,
-  O as TableRadius,
-  pt as default
+  J as Layout,
+  A as TABLE_INJECTION,
+  M as TableRadius,
+  ft as default
 };
 //# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isLoading: isDataViewLoading,\n    isEmpty: isDataViewEmpty,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(() => props.isSelectable && !props.isLoading && !props.isEmpty),\n    layout: computedLayout,\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n      { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewLoading","isDataViewEmpty","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCkFJ;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,SAASC;AAAA,IACP,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBL,EAAgB,UAAU,UACrB,mBAGFS,EAAM,MACd,GAEKC,IAAiBF,EAAkB,MACnCC,EAAM,eACD,WAGFA,EAAM,MACd,GAEKE,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAH,EAAM,iBAAN,QAAAG,EAAoB;AAAA,QACpBC,IAAAJ,EAAM,iBAAN,gBAAAI,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAH,EAAM,iBAAN,gBAAAG,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMC,EAAM,WAAWV,EAAgB,SAASkB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMC,EAAM,qBAAqB;AAAA,MACjE,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,cAAcD,EAAS,MAAMC,EAAM,YAAY;AAAA,MAC/C,cAAcD,EAAS,MAAMC,EAAM,gBAAgB,CAACA,EAAM,aAAa,CAACA,EAAM,OAAO;AAAA,MACrF,QAAQC;AAAA,IAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, provide } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(() => props.isSelectable && !props.isLoading && !props.isEmpty),\n    layout: computedLayout,\n  });\n\n  onBeforeMount(() => {\n    /**\n     * To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists.\n     */\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n      { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCkFJ;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFU,EAAM,MACd,GAEKC,IAAiBF,EAAkB,MACnCC,EAAM,eACD,WAGFA,EAAM,MACd,GAEKE,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAH,EAAM,iBAAN,QAAAG,EAAoB;AAAA,QACpBC,IAAAJ,EAAM,iBAAN,gBAAAI,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAH,EAAM,iBAAN,gBAAAG,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMC,EAAM,WAAWX,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMC,EAAM,qBAAqB;AAAA,MACjE,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,cAAcD,EAAS,MAAMC,EAAM,YAAY;AAAA,MAC/C,cAAcD,EAAS,MAAMC,EAAM,gBAAgB,CAACA,EAAM,aAAa,CAACA,EAAM,OAAO;AAAA,MACrF,QAAQC;AAAA,IAAA,CACT,GAEDQ,EAAc,MAAM;AAIlB,MAAIhB,MACFA,EAAqB,QAAQO,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableCell.js

@@ -3,7 +3,7 @@ import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";

package/dist/TableHeaderCell.js

@@ -2,7 +2,7 @@ import { defineComponent as k, useCssModule as T, inject as u, computed as p, op
 import "lodash-es/cloneDeep";
 import f from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";

package/dist/TableHeaderRow.js

@@ -1,74 +1,78 @@
-import { defineComponent as f, inject as _, ref as b, openBlock as t, createElementBlock as k, unref as o, createBlock as s, normalizeClass as r, withCtx as y, createCommentVNode as i, renderSlot as x } from "vue";
-import { t as T } from "./locale.js";
-import C from "./Checkbox.js";
+import { defineComponent as T, inject as p, ref as u, onMounted as R, openBlock as l, createElementBlock as x, unref as e, createBlock as r, normalizeClass as a, withCtx as C, createCommentVNode as w, renderSlot as E } from "vue";
+import { t as S } from "./locale.js";
+import B from "./Checkbox.js";
+import { D as f } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
-import { T as R } from "./Table.keys-cf93df19.js";
+import { T as I } from "./Table.keys-cf93df19.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
-import m from "./TableHeaderCell.js";
-import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
+import h from "./TableHeaderCell.js";
+import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "@leaflink/snitch";
 import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./index-79ce320f.js";
 import "./Icon.js";
-const B = {
-  class: "stash-table-header-row",
-  "data-test": "stash-table-header-row"
-}, E = /* @__PURE__ */ f({
+const v = /* @__PURE__ */ T({
   __name: "TableHeaderRow",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
     someRowsSelected: { type: Boolean, default: !1 }
   },
   emits: ["select"],
-  setup(p, { emit: d }) {
-    const l = p, a = _(R.key);
-    if (!a)
+  setup(_, { emit: b }) {
+    const s = _, c = p(I.key);
+    if (!c)
       throw new Error("TableHeaderRow must be used within a Table component");
-    const { hasCustomExpandToggle: w, isExpandable: h, isSelectable: u } = a, c = b(0);
-    function n() {
-      d("select"), c.value++;
+    const { hasCustomExpandToggle: k, isExpandable: y, isSelectable: n } = c, { hasToolbar: t } = p(f.key, f.defaults), i = u(0), m = u();
+    function d() {
+      b("select"), i.value++;
     }
-    return (e, I) => (t(), k("tr", B, [
-      o(u) ? (t(), s(m, {
+    return R(() => {
+      t != null && t.value && n.value && m.value.getElementsByTagName("th")[0].setAttribute("colspan", 2);
+    }), (o, g) => (l(), x("tr", {
+      ref_key: "headerRow",
+      ref: m,
+      class: "stash-table-header-row",
+      "data-test": "stash-table-header-row"
+    }, [
+      !e(t) && e(n) ? (l(), r(h, {
         key: 0,
-        class: r(["stash-table-header-row__selection-cell tw-min-w-[48px]", e.$style["row-control-cell"]])
+        class: a(["stash-table-header-row__selection-cell tw-min-w-[48px]", o.$style["row-control-cell"]])
       }, {
-        default: y(() => [
-          (t(), s(C, {
-            key: c.value,
-            class: r(e.$style["row-selection-checkbox"]),
-            checked: l.allRowsSelected,
-            indeterminate: l.someRowsSelected && !l.allRowsSelected,
-            title: o(T)("ll.selectAll"),
-            "onUpdate:indeterminate": n,
-            "onUpdate:checked": n
+        default: C(() => [
+          (l(), r(B, {
+            key: i.value,
+            class: a(o.$style["row-selection-checkbox"]),
+            checked: s.allRowsSelected,
+            indeterminate: s.someRowsSelected && !s.allRowsSelected,
+            title: e(S)("ll.selectAll"),
+            "onUpdate:indeterminate": d,
+            "onUpdate:checked": d
           }, null, 8, ["class", "checked", "indeterminate", "title"]))
         ]),
         _: 1
-      }, 8, ["class"])) : i("", !0),
-      o(h) && !o(w) ? (t(), s(m, {
+      }, 8, ["class"])) : w("", !0),
+      e(y) && !e(k) ? (l(), r(h, {
         key: 1,
-        class: r(e.$style["row-control-cell"]),
+        class: a(o.$style["row-control-cell"]),
         "data-test": "table-row-header-expansion-cell"
-      }, null, 8, ["class"])) : i("", !0),
-      x(e.$slots, "default")
-    ]));
+      }, null, 8, ["class"])) : w("", !0),
+      E(o.$slots, "default")
+    ], 512));
   }
-}), $ = {
+}), A = {
   "row-selection-checkbox": "_row-selection-checkbox_1eq6o_2",
   "row-control-cell": "_row-control-cell_1eq6o_8"
-}, H = {
-  $style: $
-}, X = /* @__PURE__ */ S(E, [["__cssModules", H]]);
+}, $ = {
+  $style: A
+}, ee = /* @__PURE__ */ N(v, [["__cssModules", $]]);
 export {
-  X as default
+  ee 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 { 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 =\n    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 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    <TableHeaderCell\n      v-if=\"isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n    >\n      <Checkbox\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    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","checkboxKey","ref","onSelect","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExDM,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODH,EAAA;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, onMounted, 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 =\n    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  const headerRow = ref();\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onMounted(() => {\n    /**\n     * Whenever a Table is selectable _and_ is within a DataView with a toolbar, we pick the first header cell and add a colspan=2.\n     * This allows Checkboxes within each row to be rendered as a standalone cell, removing friction on the developer to add the checkbox each time.\n     */\n    if (hasToolbar?.value && isSelectable.value) {\n      headerRow.value.getElementsByTagName('th')[0].setAttribute('colspan', 2);\n    }\n  });\n</script>\n\n<template>\n  <tr ref=\"headerRow\" class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <TableHeaderCell\n      v-if=\"!hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n    >\n      <Checkbox\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    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","headerRow","onSelect","emit","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExD,EAAE,YAAAM,EAAW,IAAIL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC,GACnBC,IAAYD;AAElB,aAASE,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODJ,EAAA;AAAA,IACd;AAEA,WAAAK,EAAU,MAAM;AAKV,MAAAP,KAAA,QAAAA,EAAY,SAASD,EAAa,SAC1BK,EAAA,MAAM,qBAAqB,IAAI,EAAE,CAAC,EAAE,aAAa,WAAW,CAAC;AAAA,IACzE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableRow.js

@@ -7,7 +7,7 @@ import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js
 import "lodash-es/cloneDeep";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";