@leaflink/stash 49.5.0 → 50.0.1

package/dist/Table.js

@@ -1,33 +1,16 @@
-import { defineComponent as H, inject as g, computed as a, provide as N, watchEffect as L, openBlock as c, createElementBlock as I, normalizeClass as i, unref as f, normalizeStyle as A, createElementVNode as y, renderSlot as w, createBlock as k, withCtx as d, createVNode as n } from "vue";
+import { defineComponent as H, inject as g, computed as a, provide as N, watchEffect as L, openBlock as p, createElementBlock as I, normalizeClass as d, unref as f, normalizeStyle as A, createElementVNode as y, renderSlot as w, createBlock as k, withCtx as n, createVNode as i } from "vue";
 import "lodash-es/cloneDeep";
-import { M as E } from "./Module.keys-2cc7d830.js";
+import { M as E } from "./Module.keys-CEsrW2f0.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 S } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
+import { D as S } from "./DataView.keys-C7eaZg2G.js";
 import D from "./EmptyState.js";
 import O from "./Loading.js";
 import x from "./TableCell.js";
 import _ from "./TableRow.js";
-import { T as V } from "./Table.keys-83e4f09b.js";
-import { S as J } from "./misc-76697f61.js";
-import "./locale.js";
-import "lodash-es/get";
-import "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.js";
-import "./index-9e1095ef.js";
-import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
-import "./_plugin-vue_export-helper-dad06003.js";
-import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
-import "@leaflink/snitch";
-import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
-import "./Checkbox.js";
-import "./ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js";
-import "./Button.js";
-import "./Icon.js";
-import "./Expand.vue_vue_type_script_setup_true_lang-0f236267.js";
+import { T as V } from "./Table.keys-LHQf6FEH.js";
+import { S as J } from "./misc-CHQs-G03.js";
 var $ = /* @__PURE__ */ ((t) => (t.Scroll = "scroll", t.Stack = "stack", t))($ || {}), z = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t.RoundedBottom = "rounded-bottom", t))(z || {});
-const M = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ye = /* @__PURE__ */ H({
+const M = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, Y = /* @__PURE__ */ H({
   __name: "Table",
   props: {
     density: { default: void 0 },
@@ -46,17 +29,17 @@ const M = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
     const e = t, {
       density: T,
       variant: u,
-      isEmpty: r,
-      isLoading: s,
+      isEmpty: s,
+      isLoading: r,
       isSelectable: b
-    } = g(S.key, S.defaults), { variant: m } = g(E.key, E.defaults), v = a(() => (m == null ? void 0 : m.value) === "table" || u.value === "table" ? "rounded-bottom" : e.radius), l = a(() => e.stickyHeader ? "scroll" : e.layout), B = a(() => l.value === "scroll" && u.value === "table"), h = a(() => {
-      var o, p;
-      return !!((o = e.stickyHeader) != null && o.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
-      ((p = e.stickyHeader) == null ? void 0 : p.listLength) > 3);
+    } = g(S.key, S.defaults), { variant: c } = g(E.key, E.defaults), v = a(() => (c == null ? void 0 : c.value) === "table" || u.value === "table" ? "rounded-bottom" : e.radius), o = a(() => e.stickyHeader ? "scroll" : e.layout), B = a(() => o.value === "scroll" && u.value === "table"), h = a(() => {
+      var l, m;
+      return !!((l = e.stickyHeader) != null && l.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
+      ((m = e.stickyHeader) == null ? void 0 : m.listLength) > 3);
     }), C = a(() => {
-      var o;
+      var l;
       return {
-        maxHeight: h.value ? (o = e.stickyHeader) == null ? void 0 : o.maxHeight : ""
+        maxHeight: h.value ? (l = e.stickyHeader) == null ? void 0 : l.maxHeight : ""
       };
     });
     return N(V.key, {
@@ -65,20 +48,20 @@ const M = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
       hasActions: a(() => e.hasActions),
       isExpandable: a(() => e.isExpandable),
       isSelectable: a(
-        () => e.isSelectable && !e.isLoading && !(s != null && s.value) && !e.isEmpty && !(r != null && r.value)
+        () => e.isSelectable && !e.isLoading && !(r != null && r.value) && !e.isEmpty && !(s != null && s.value)
       ),
-      layout: l
+      layout: o
     }), L(() => {
       b && (b.value = e.isSelectable);
-    }), (o, p) => (c(), I("div", {
-      class: i(["stash-table tw-relative", [
+    }), (l, m) => (p(), I("div", {
+      class: d(["stash-table tw-relative", [
         { "tw-rounded": v.value === "rounded" },
         { "tw-rounded-b": v.value === "rounded-bottom" },
         { "tw-border-t tw-border-ice-200": f(u) === "table" },
-        { "tw-overflow-auto": l.value === "scroll" },
+        { "tw-overflow-auto": o.value === "scroll" },
         { "tw-shadow": B.value },
         {
-          "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack"
+          "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": o.value === "stack"
         },
         { "tw-min-h-[300px]": h.value && !e.isLoading }
         // prevent the table from collapsing on small screen heights when the max-height is dynamic
@@ -88,35 +71,35 @@ const M = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
     }, [
       y("table", M, [
         y("thead", {
-          class: i(["tw-border-b tw-border-ice-200", {
-            "tw-hidden lg:tw-table-header-group": l.value === "stack"
+          class: d(["tw-border-b tw-border-ice-200", {
+            "tw-hidden lg:tw-table-header-group": o.value === "stack"
           }])
         }, [
-          w(o.$slots, "head")
+          w(l.$slots, "head")
         ], 2),
         y("tbody", null, [
-          e.isLoading || f(s) ? (c(), k(_, { key: 0 }, {
-            default: d(() => [
-              n(x, {
+          e.isLoading || f(r) ? (p(), k(_, { key: 0 }, {
+            default: n(() => [
+              i(x, {
                 colspan: "100%",
-                class: i({ "tw-col-span-12": l.value === "stack" })
+                class: d({ "tw-col-span-12": o.value === "stack" })
               }, {
-                default: d(() => [
-                  n(O)
+                default: n(() => [
+                  i(O)
                 ]),
                 _: 1
               }, 8, ["class"])
             ]),
             _: 1
-          })) : e.isEmpty || f(r) ? (c(), k(_, { key: 1 }, {
-            default: d(() => [
-              n(x, {
+          })) : e.isEmpty || f(s) ? (p(), k(_, { key: 1 }, {
+            default: n(() => [
+              i(x, {
                 colspan: "100%",
-                class: i({ "tw-col-span-12": l.value === "stack" })
+                class: d({ "tw-col-span-12": o.value === "stack" })
               }, {
-                default: d(() => [
-                  w(o.$slots, "empty", {}, () => [
-                    n(D, {
+                default: n(() => [
+                  w(l.$slots, "empty", {}, () => [
+                    i(D, {
                       class: "tw-w-full tw-bg-white",
                       text: e.emptyStateText
                     }, null, 8, ["text"])
@@ -126,7 +109,7 @@ const M = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
               }, 8, ["class"])
             ]),
             _: 3
-          })) : w(o.$slots, "body", { key: 2 })
+          })) : w(l.$slots, "body", { key: 2 })
         ])
       ])
     ], 6));
@@ -136,6 +119,6 @@ export {
   $ as Layout,
   V as TABLE_INJECTION,
   z as TableRadius,
-  ye as default
+  Y 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, watchEffect } 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 isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\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(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\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': computedLayout === 'scroll' },\n      { 'tw-shadow': isShadowEnabled },\n      {\n        'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack',\n      },\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        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\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","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"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;;;;;;;;;;;;;;;;;ACoEV,UAAMC,IAAQC,GAcR;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,mBAGFH,EAAM,MACd,GAEKa,IAAiBD,EAAkB,MACnCZ,EAAM,eACD,WAGFA,EAAM,MACd,GAEKc,IAAkBF,EAAkB,MACjCC,EAAe,UAAU,YAAYV,EAAgB,UAAU,OACvE,GAEKY,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAhB,EAAM,iBAAN,QAAAgB,EAAoB;AAAA,QACpBC,IAAAjB,EAAM,iBAAN,gBAAAiB,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MACtB;AAAA,MACA,QAAQS;AAAA,IAAA,CACT,GAEDS,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQN,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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, watchEffect } 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 isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\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(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\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': computedLayout === 'scroll' },\n      { 'tw-shadow': isShadowEnabled },\n      {\n        'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack',\n      },\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        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\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","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"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;;;;;;;;;;;;;;;;;ACoEV,UAAMC,IAAQC,GAcR;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,mBAGFH,EAAM,MACd,GAEKa,IAAiBD,EAAkB,MACnCZ,EAAM,eACD,WAGFA,EAAM,MACd,GAEKc,IAAkBF,EAAkB,MACjCC,EAAe,UAAU,YAAYV,EAAgB,UAAU,OACvE,GAEKY,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAhB,EAAM,iBAAN,QAAAgB,EAAoB;AAAA,QACpBC,IAAAjB,EAAM,iBAAN,gBAAAiB,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MACtB;AAAA,MACA,QAAQS;AAAA,IAAA,CACT,GAEDS,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQN,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Table.keys-LHQf6FEH.js

@@ -0,0 +1,7 @@
+const e = Object.freeze({
+  key: Symbol("TABLE_INJECTION_KEY")
+});
+export {
+  e as T
+};
+//# sourceMappingURL=Table.keys-LHQf6FEH.js.map

package/dist/{Table.keys-83e4f09b.js.map → Table.keys-LHQf6FEH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Table.keys-83e4f09b.js","sources":["../src/components/Table/Table.keys.ts"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TableInjection } from './Table.types';\n\nexport const TABLE_INJECTION: Injection<TableInjection> = Object.freeze({\n  key: Symbol('TABLE_INJECTION_KEY'),\n});\n"],"names":["TABLE_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;GAGaA,IAA6C,OAAO,OAAO;AAAA,EACtE,KAAK,OAAO,qBAAqB;AACnC,CAAC;"}
+{"version":3,"file":"Table.keys-LHQf6FEH.js","sources":["../src/components/Table/Table.keys.ts"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TableInjection } from './Table.types';\n\nexport const TABLE_INJECTION: Injection<TableInjection> = Object.freeze({\n  key: Symbol('TABLE_INJECTION_KEY'),\n});\n"],"names":["TABLE_INJECTION"],"mappings":"AAGa,MAAAA,IAA6C,OAAO,OAAO;AAAA,EACtE,KAAK,OAAO,qBAAqB;AACnC,CAAC;"}

package/dist/Table.vue.d.ts

@@ -35,44 +35,44 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableProps>, {
-    density: undefined;
-    emptyStateText: string;
-    hasActions: boolean;
-    hasCustomExpandToggle: boolean;
-    isEmpty: boolean;
-    isLoading: boolean;
-    isExpandable: boolean;
-    isSelectable: boolean;
-    layout: string;
-    radius: string;
-    stickyHeader: undefined;
+density: undefined;
+emptyStateText: string;
+hasActions: boolean;
+hasCustomExpandToggle: boolean;
+isEmpty: boolean;
+isLoading: boolean;
+isExpandable: boolean;
+isSelectable: boolean;
+layout: string;
+radius: string;
+stickyHeader: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableProps>, {
-    density: undefined;
-    emptyStateText: string;
-    hasActions: boolean;
-    hasCustomExpandToggle: boolean;
-    isEmpty: boolean;
-    isLoading: boolean;
-    isExpandable: boolean;
-    isSelectable: boolean;
-    layout: string;
-    radius: string;
-    stickyHeader: undefined;
+density: undefined;
+emptyStateText: string;
+hasActions: boolean;
+hasCustomExpandToggle: boolean;
+isEmpty: boolean;
+isLoading: boolean;
+isExpandable: boolean;
+isSelectable: boolean;
+layout: string;
+radius: string;
+stickyHeader: undefined;
 }>>> & Readonly<{}>, {
-    isLoading: boolean;
-    radius: "none" | "rounded" | "rounded-bottom";
-    density: "compact" | "comfortable";
-    isEmpty: boolean;
-    isSelectable: boolean;
-    emptyStateText: string;
-    hasActions: boolean;
-    layout: "scroll" | "stack";
-    hasCustomExpandToggle: boolean;
-    isExpandable: boolean;
-    stickyHeader: {
-        listLength: number;
-        maxHeight: string;
-    };
+isLoading: boolean;
+radius: "none" | "rounded" | "rounded-bottom";
+density: "compact" | "comfortable";
+isEmpty: boolean;
+isSelectable: boolean;
+emptyStateText: string;
+hasActions: boolean;
+layout: "scroll" | "stack";
+hasCustomExpandToggle: boolean;
+isExpandable: boolean;
+stickyHeader: {
+listLength: number;
+maxHeight: string;
+};
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     head?(_: {}): any;
     empty?(_: {}): any;

package/dist/TableCell.js

@@ -1,41 +1,34 @@
-import { defineComponent as p, useCssModule as d, inject as u, openBlock as a, createElementBlock as c, normalizeClass as f, unref as t, toDisplayString as b, createCommentVNode as _, renderSlot as w } from "vue";
+import { defineComponent as _, useCssModule as p, inject as d, openBlock as a, createElementBlock as c, normalizeClass as u, unref as t, toDisplayString as f, createCommentVNode as y, renderSlot as b } from "vue";
 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-5c180dba.js";
+import "./DataView.keys-C7eaZg2G.js";
 import "lodash-es/get";
-import "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.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 y, s as C } from "./Table.keys-83e4f09b.js";
+import "./Illustration.vue_vue_type_script_setup_true_lang-C3qG3Ty6.js";
 import "@leaflink/snitch";
-import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
-import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
-import "./index-9e1095ef.js";
-const T = {
+import { T as w } from "./Table.keys-LHQf6FEH.js";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const h = {
   key: 0,
   class: "tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden"
-}, k = /* @__PURE__ */ p({
+}, C = /* @__PURE__ */ _({
   __name: "TableCell",
   props: {
     isControl: { type: Boolean, default: !1 },
     mobileHeader: { default: "" }
   },
-  setup(i) {
-    const l = i, o = d(), r = u(y.key);
+  setup(n) {
+    const l = n, o = p(), r = d(w.key);
     if (!r)
       throw new Error("TableCell must be used within a Table component");
-    const { density: e, hasActions: n, layout: s } = r;
-    return (m, g) => (a(), c("td", {
-      class: f(["stash-table-cell", [
+    const { density: e, hasActions: i, layout: s } = r;
+    return (m, B) => (a(), c("td", {
+      class: u(["stash-table-cell", [
         t(o).root,
         t(o)[`layout--${t(s)}`],
         {
           [t(o)["root--density-compact"]]: t(e) === "compact",
           [t(o)["root--density-comfortable"]]: t(e) === "comfortable",
-          [t(o)["has-actions"]]: t(n),
+          [t(o)["has-actions"]]: t(i),
           "tw-p-3": t(s) === "scroll",
           "tw-p-1.5": t(s) === "stack",
           "lg:tw-p-3": t(e) === "compact",
@@ -45,14 +38,21 @@ const T = {
       ]]),
       "data-test": "stash-table-cell"
     }, [
-      l.mobileHeader && t(s) === "stack" ? (a(), c("div", T, b(l.mobileHeader), 1)) : _("", !0),
-      w(m.$slots, "default")
+      l.mobileHeader && t(s) === "stack" ? (a(), c("div", h, f(l.mobileHeader), 1)) : y("", !0),
+      b(m.$slots, "default")
     ], 2));
   }
-}), x = {
-  $style: C
-}, V = /* @__PURE__ */ h(k, [["__cssModules", x]]);
+}), k = "_root_rmarx_2", T = {
+  root: k,
+  "layout--scroll": "_layout--scroll_rmarx_6",
+  "has-actions": "_has-actions_rmarx_12",
+  "layout--stack": "_layout--stack_rmarx_16",
+  "is-control": "_is-control_rmarx_28",
+  "root--density-comfortable": "_root--density-comfortable_rmarx_52"
+}, g = {
+  $style: T
+}, v = /* @__PURE__ */ x(C, [["__cssModules", g]]);
 export {
-  V as default
+  v as default
 };
 //# sourceMappingURL=TableCell.js.map

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        'tw-p-3': layout === 'scroll',\n        'tw-p-1.5': layout === 'stack',\n        'lg:tw-p-3': density === 'compact',\n        'lg:tw-px-3 lg:tw-py-6': density === 'comfortable',\n        [classes['is-control']]: props.isControl,\n      },\n    ]\"\n  >\n    <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden\">\n      {{ props.mobileHeader }}\n    </div>\n    <!-- @slot default -->\n    <slot></slot>\n  </td>\n</template>\n\n<style module>\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: theme('borderRadius.DEFAULT');\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 screen('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</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAIRC,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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        'tw-p-3': layout === 'scroll',\n        'tw-p-1.5': layout === 'stack',\n        'lg:tw-p-3': density === 'compact',\n        'lg:tw-px-3 lg:tw-py-6': density === 'comfortable',\n        [classes['is-control']]: props.isControl,\n      },\n    ]\"\n  >\n    <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden\">\n      {{ props.mobileHeader }}\n    </div>\n    <!-- @slot default -->\n    <slot></slot>\n  </td>\n</template>\n\n<style module>\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: theme('borderRadius.DEFAULT');\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 screen('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</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAIRC,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableCell.vue.d.ts

@@ -33,14 +33,14 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableCellProps>, {
-    isControl: boolean;
-    mobileHeader: string;
+isControl: boolean;
+mobileHeader: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableCellProps>, {
-    isControl: boolean;
-    mobileHeader: string;
+isControl: boolean;
+mobileHeader: string;
 }>>> & Readonly<{}>, {
-    isControl: boolean;
-    mobileHeader: string;
+isControl: boolean;
+mobileHeader: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/TableHeaderCell.js

@@ -1,20 +1,13 @@
 import { defineComponent as k, useCssModule as T, inject as p, computed as m, openBlock as r, createElementBlock as _, normalizeClass as s, unref as t, createElementVNode as x, renderSlot as E, createBlock as w, createCommentVNode as n } from "vue";
 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-5c180dba.js";
+import { D as b } from "./DataView.keys-C7eaZg2G.js";
 import "lodash-es/get";
-import "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.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 N } from "./Table.keys-83e4f09b.js";
+import "./Illustration.vue_vue_type_script_setup_true_lang-C3qG3Ty6.js";
 import "lodash-es/uniqueId";
 import "@leaflink/snitch";
-import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
-import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import { T as N } from "./Table.keys-LHQf6FEH.js";
+import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const A = {
   key: 0,
   class: "tw-relative tw-h-4 tw-w-3"
@@ -82,8 +75,8 @@ const A = {
   "root--density-comfortable": "_root--density-comfortable_14363_31"
 }, M = {
   $style: H
-}, Z = /* @__PURE__ */ S(B, [["__cssModules", M]]);
+}, G = /* @__PURE__ */ S(B, [["__cssModules", M]]);
 export {
-  Z as default
+  G 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 tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900\"\n    :class=\"[\n      classes.root,\n      {\n        'tw-bg-white': !isActiveSort,\n        'stash-table-header-cell--sorted tw-bg-blue-100': isActiveSort,\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'tw-cursor-pointer': isSortable,\n      },\n    ]\"\n    data-test=\"stash-table-header-cell\"\n    @click=\"onRootClick\"\n  >\n    <div class=\"tw-flex tw-justify-between\" :class=\"classes['content-wrapper']\">\n      <!-- @slot default -->\n      <slot></slot>\n      <div v-if=\"isSortable\" class=\"tw-relative tw-h-4 tw-w-3\">\n        <Icon\n          v-if=\"!isActiveSort || currentSortOrder === 'asc'\"\n          class=\"tw-absolute tw-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=\"tw-absolute tw-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  .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 screen('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</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","isActiveSort","onRootClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAGRC,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGnE,UAAA,EAAE,SAAAG,GAAS,YAAAC,EAAe,IAAAJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAN;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,GAAM,CAAA;AAAA,IAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900\"\n    :class=\"[\n      classes.root,\n      {\n        'tw-bg-white': !isActiveSort,\n        'stash-table-header-cell--sorted tw-bg-blue-100': isActiveSort,\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'tw-cursor-pointer': isSortable,\n      },\n    ]\"\n    data-test=\"stash-table-header-cell\"\n    @click=\"onRootClick\"\n  >\n    <div class=\"tw-flex tw-justify-between\" :class=\"classes['content-wrapper']\">\n      <!-- @slot default -->\n      <slot></slot>\n      <div v-if=\"isSortable\" class=\"tw-relative tw-h-4 tw-w-3\">\n        <Icon\n          v-if=\"!isActiveSort || currentSortOrder === 'asc'\"\n          class=\"tw-absolute tw-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=\"tw-absolute tw-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  .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 screen('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</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","isActiveSort","onRootClick"],"mappings":";;;;;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAGRC,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGnE,UAAA,EAAE,SAAAG,GAAS,YAAAC,EAAe,IAAAJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAN;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,GAAM,CAAA;AAAA,IAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderCell.vue.d.ts

@@ -33,11 +33,11 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderCellProps>, {
-    sortId: string;
+sortId: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderCellProps>, {
-    sortId: string;
+sortId: string;
 }>>> & Readonly<{}>, {
-    sortId: string;
+sortId: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/TableHeaderRow.js

@@ -1,23 +1,13 @@
-import { defineComponent as E, inject as d, ref as u, watchEffect as R, openBlock as s, createElementBlock as x, unref as e, createBlock as r, normalizeClass as c, withCtx as C, createCommentVNode as f, renderSlot as B } from "vue";
+import { defineComponent as E, inject as p, ref as u, watchEffect as R, openBlock as s, createElementBlock as x, unref as e, createBlock as c, normalizeClass as r, withCtx as C, createCommentVNode as f, renderSlot as B } from "vue";
 import { t as S } from "./locale.js";
 import v from "./Checkbox.js";
-import { D as w } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
+import { D as w } from "./DataView.keys-C7eaZg2G.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 "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.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 N } from "./Table.keys-83e4f09b.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
+import "./Illustration.vue_vue_type_script_setup_true_lang-C3qG3Ty6.js";
+import { T as N } from "./Table.keys-LHQf6FEH.js";
 import h from "./TableHeaderCell.js";
-import { _ as g } 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-9e1095ef.js";
-import "./Icon.js";
+import { _ as g } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const A = /* @__PURE__ */ E({
   __name: "TableHeaderRow",
   props: {
@@ -26,44 +16,44 @@ const A = /* @__PURE__ */ E({
   },
   emits: ["select"],
   setup(_, { emit: b }) {
-    const a = _, k = b, n = d(N.key);
+    const a = _, k = b, n = p(N.key);
     if (!n)
       throw new Error("TableHeaderRow must be used within a Table component");
-    const { hasCustomExpandToggle: y, isExpandable: T, isSelectable: i } = n, { hasToolbar: t } = d(w.key, w.defaults), m = u(0), o = u();
-    function p() {
+    const { hasCustomExpandToggle: y, isExpandable: T, isSelectable: i } = n, { hasToolbar: t } = p(w.key, w.defaults), m = u(0), l = u();
+    function d() {
       k("select"), m.value++;
     }
     return R(() => {
-      o.value && (t != null && t.value && i.value ? o.value.getElementsByTagName("th")[0].setAttribute("colspan", 2) : o.value.getElementsByTagName("th")[0].setAttribute("colspan", 1));
-    }), (l, H) => (s(), x("tr", {
+      l.value && (t != null && t.value && i.value ? l.value.getElementsByTagName("th")[0].setAttribute("colspan", 2) : l.value.getElementsByTagName("th")[0].setAttribute("colspan", 1));
+    }), (o, H) => (s(), x("tr", {
       ref_key: "headerRow",
-      ref: o,
+      ref: l,
       class: "stash-table-header-row",
       "data-test": "stash-table-header-row"
     }, [
-      !e(t) && e(i) ? (s(), r(h, {
+      !e(t) && e(i) ? (s(), c(h, {
         key: 0,
-        class: c(["stash-table-header-row__selection-cell tw-min-w-[48px]", l.$style["row-control-cell"]])
+        class: r(["stash-table-header-row__selection-cell tw-min-w-[48px]", o.$style["row-control-cell"]])
       }, {
         default: C(() => [
-          (s(), r(v, {
+          (s(), c(v, {
             key: m.value,
-            class: c(l.$style["row-selection-checkbox"]),
+            class: r(o.$style["row-selection-checkbox"]),
             checked: a.allRowsSelected,
             indeterminate: a.someRowsSelected && !a.allRowsSelected,
             title: e(S)("ll.selectAll"),
-            "onUpdate:indeterminate": p,
-            "onUpdate:checked": p
+            "onUpdate:indeterminate": d,
+            "onUpdate:checked": d
           }, null, 8, ["class", "checked", "indeterminate", "title"]))
         ]),
         _: 1
       }, 8, ["class"])) : f("", !0),
-      e(T) && !e(y) ? (s(), r(h, {
+      e(T) && !e(y) ? (s(), c(h, {
         key: 1,
-        class: c(l.$style["row-control-cell"]),
+        class: r(o.$style["row-control-cell"]),
         "data-test": "table-row-header-expansion-cell"
       }, null, 8, ["class"])) : f("", !0),
-      B(l.$slots, "default")
+      B(o.$slots, "default")
     ], 512));
   }
 }), I = {
@@ -71,8 +61,8 @@ const A = /* @__PURE__ */ E({
   "row-control-cell": "_row-control-cell_1eq6o_8"
 }, $ = {
   $style: I
-}, te = /* @__PURE__ */ g(A, [["__cssModules", $]]);
+}, L = /* @__PURE__ */ g(A, [["__cssModules", $]]);
 export {
-  te as default
+  L as default
 };
 //# sourceMappingURL=TableHeaderRow.js.map