@leaflink/stash 53.4.5 → 53.4.6

package/dist/Table.js

@@ -1,19 +1,19 @@
-import { defineComponent as K, useCssModule as Q, inject as R, computed as l, useTemplateRef as O, ref as Y, provide as Z, watchEffect as ee, createElementBlock as v, openBlock as d, createElementVNode as u, createCommentVNode as _, normalizeStyle as k, normalizeClass as n, unref as b, renderSlot as S, createBlock as H, withCtx as f, createVNode as r, Fragment as I } from "vue";
+import { defineComponent as K, useCssModule as Q, inject as R, computed as l, useTemplateRef as O, ref as Y, provide as Z, watchEffect as ee, createElementBlock as v, openBlock as d, createElementVNode as u, createCommentVNode as _, normalizeStyle as S, normalizeClass as n, unref as b, renderSlot as k, createBlock as H, withCtx as f, createVNode as r, Fragment as I } from "vue";
 import { b as te, c as N, d as le } from "./index-DA70nQCT.js";
 import A from "./Button.js";
 import "lodash-es/cloneDeep";
-import { M as z } from "./Module.keys-DcqBbvvT.js";
+import { M as D } from "./Module.keys-DcqBbvvT.js";
 import "lodash-es/get";
-import $ from "./Icon.js";
-import { D } from "./DataView.keys-aSOnA4AD.js";
+import z from "./Icon.js";
+import { D as $ } from "./DataView.keys-aSOnA4AD.js";
 import ae from "./EmptyState.js";
-import oe from "./Loading.js";
+import se from "./Loading.js";
 import M from "./TableCell.js";
 import J from "./TableRow.js";
-import { T as se } from "./Table.keys-LHQf6FEH.js";
+import { T as oe } from "./Table.keys-LHQf6FEH.js";
 import { S as re } from "./misc-CHQs-G03.js";
 import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-var ie = /* @__PURE__ */ ((s) => (s.Scroll = "scroll", s.Stack = "stack", s))(ie || {}), ce = /* @__PURE__ */ ((s) => (s.None = "none", s.Rounded = "rounded", s.RoundedBottom = "rounded-bottom", s))(ce || {});
+var ie = /* @__PURE__ */ ((o) => (o.Scroll = "scroll", o.Stack = "stack", o))(ie || {}), ce = /* @__PURE__ */ ((o) => (o.None = "none", o.Rounded = "rounded", o.RoundedBottom = "rounded-bottom", o))(ce || {});
 const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /* @__PURE__ */ K({
   __name: "Table",
   props: {
@@ -22,6 +22,7 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
     hasActions: { type: Boolean, default: !1 },
     hasCustomExpandToggle: { type: Boolean, default: !1 },
     isEmpty: { type: Boolean, default: !1 },
+    isSchemaDriven: { type: Boolean, default: !1 },
     isLoading: { type: Boolean, default: !1 },
     isExpandable: { type: Boolean, default: !1 },
     isSelectable: { type: Boolean, default: !1 },
@@ -29,14 +30,14 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
     radius: { default: "rounded" },
     stickyHeader: { default: void 0 }
   },
-  setup(s) {
-    const e = s, m = Q(), {
+  setup(o) {
+    const e = o, m = Q(), {
       density: P,
       variant: p,
       isEmpty: h,
       isLoading: i,
       isSelectable: E
-    } = R(D.key, D.defaults), { variant: y } = R(z.key, z.defaults), C = l(() => (y == null ? void 0 : y.value) === "table" || p.value === "table" ? "rounded-bottom" : e.radius), o = l(() => e.stickyHeader ? "scroll" : e.layout), V = l(() => o.value === "scroll" && p.value === "table"), W = l(() => {
+    } = R($.key, $.defaults), { variant: y } = R(D.key, D.defaults), C = l(() => (y == null ? void 0 : y.value) === "table" || p.value === "table" ? "rounded-bottom" : e.radius), s = l(() => e.stickyHeader ? "scroll" : e.layout), V = l(() => s.value === "scroll" && p.value === "table"), W = l(() => {
       var t, a;
       return !!((t = e.stickyHeader) != null && t.maxHeight && ((a = e.stickyHeader) == null ? void 0 : a.listLength) > 3);
     }), X = l(() => {
@@ -44,10 +45,10 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
       return {
         maxHeight: W.value ? (t = e.stickyHeader) == null ? void 0 : t.maxHeight : ""
       };
-    }), w = l(() => !!(e.isLoading || i != null && i.value)), c = O("scrollContainerRef"), x = O("tableRef"), T = Y(!1), { arrivedState: L, measure: j } = te(c, { behavior: "smooth" });
+    }), w = l(() => !!(e.isLoading || i != null && i.value)), c = O("scrollContainerRef"), x = O("tableRef"), T = Y(!1), { arrivedState: B, measure: j } = te(c, { behavior: "smooth" });
     function g() {
       const t = c.value;
-      !t || o.value !== "scroll" || (T.value = t.scrollWidth > t.clientWidth, j());
+      !t || s.value !== "scroll" || (T.value = t.scrollWidth > t.clientWidth, j());
     }
     N(c, g), N(x, g), le(
       c,
@@ -57,21 +58,22 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
       },
       { threshold: 0.01 }
     );
-    const F = l(() => !L.left), U = l(() => !L.right), q = l(() => o.value === "scroll" && T.value);
-    function B(t) {
+    const F = l(() => !B.left), U = l(() => !B.right), q = l(() => s.value === "scroll" && T.value);
+    function L(t) {
       var a;
       (a = c.value) == null || a.scrollBy({ left: t, behavior: "smooth" });
     }
-    return Z(se.key, {
+    return Z(oe.key, {
       density: l(() => e.density || P.value || re.Comfortable),
       hasCustomExpandToggle: l(() => e.hasCustomExpandToggle),
       hasActions: l(() => e.hasActions),
+      isSchemaDriven: l(() => e.isSchemaDriven),
       isExpandable: l(() => e.isExpandable),
       isSelectable: l(
         () => e.isSelectable && !e.isLoading && !(i != null && i.value) && !e.isEmpty && !(h != null && h.value)
       ),
       isLoading: w,
-      layout: o
+      layout: s
     }), ee(() => {
       E && (E.value = e.isSelectable);
     }), (t, a) => (d(), v("div", de, [
@@ -82,15 +84,15 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
           { rounded: C.value === "rounded" },
           { "rounded-b": C.value === "rounded-bottom" },
           { "border-t border-ice-200": b(p) === "table" },
-          { "overflow-auto scroll-smooth": o.value === "scroll" },
+          { "overflow-auto scroll-smooth": s.value === "scroll" },
           { shadow: V.value },
           {
-            "overflow-visible lg:overflow-auto lg:shadow": o.value === "stack"
+            "overflow-visible lg:overflow-auto lg:shadow": s.value === "stack"
           }
         ]]),
         "data-test": "stash-table",
         "aria-busy": w.value,
-        style: k(X.value)
+        style: S(X.value)
       }, [
         u("table", {
           ref_key: "tableRef",
@@ -98,22 +100,20 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
           class: "relative w-full border-separate"
         }, [
           u("thead", {
-            class: n(["border-b border-ice-200", {
-              "hidden lg:table-header-group": o.value === "stack"
-            }])
+            class: n(["border-b border-ice-200", { "hidden lg:table-header-group": s.value === "stack" }])
           }, [
-            S(t.$slots, "head")
+            k(t.$slots, "head")
           ], 2),
           u("tbody", null, [
             w.value ? (d(), H(J, { key: 0 }, {
               default: f(() => [
                 r(M, {
                   colspan: "100%",
-                  class: n({ "relative! col-span-12": o.value === "stack" })
+                  class: n({ "relative! col-span-12": s.value === "stack" })
                 }, {
                   default: f(() => [
-                    r(oe, {
-                      style: k([o.value === "scroll" ? { "max-width": "100vw" } : {}])
+                    r(se, {
+                      style: S([s.value === "scroll" ? { "max-width": "100vw" } : {}])
                     }, null, 8, ["style"])
                   ]),
                   _: 1
@@ -124,14 +124,14 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
               default: f(() => [
                 r(M, {
                   colspan: "100%",
-                  class: n({ "relative! col-span-12": o.value === "stack" })
+                  class: n({ "relative! col-span-12": s.value === "stack" })
                 }, {
                   default: f(() => [
-                    S(t.$slots, "empty", {}, () => [
+                    k(t.$slots, "empty", {}, () => [
                       r(ae, {
                         class: "w-full bg-white",
                         text: e.emptyStateText,
-                        style: k([o.value === "scroll" ? { "max-width": "100vw" } : {}])
+                        style: S([s.value === "scroll" ? { "max-width": "100vw" } : {}])
                       }, null, 8, ["text", "style"])
                     ])
                   ]),
@@ -139,7 +139,7 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
                 }, 8, ["class"])
               ]),
               _: 3
-            })) : S(t.$slots, "body", { key: 2 })
+            })) : k(t.$slots, "body", { key: 2 })
           ])
         ], 512)
       ], 14, ue),
@@ -158,10 +158,10 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
             icon: "",
             "aria-label": "Scroll table left",
             "data-test": "stash-table|scroll-left",
-            onClick: a[0] || (a[0] = (G) => B(-200))
+            onClick: a[0] || (a[0] = (G) => L(-200))
           }, {
             default: f(() => [
-              r($, { name: "chevron-left" })
+              r(z, { name: "chevron-left" })
             ]),
             _: 1
           })
@@ -177,10 +177,10 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
             icon: "",
             "aria-label": "Scroll table right",
             "data-test": "stash-table|scroll-right",
-            onClick: a[1] || (a[1] = (G) => B(200))
+            onClick: a[1] || (a[1] = (G) => L(200))
           }, {
             default: f(() => [
-              r($, {
+              r(z, {
                 name: "chevron-right",
                 class: "text-ice-900"
               })
@@ -200,7 +200,7 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
 }, Oe = /* @__PURE__ */ ne(fe, [["__cssModules", he]]);
 export {
   ie as Layout,
-  se as TABLE_INJECTION,
+  oe as TABLE_INJECTION,
   ce as TableRadius,
   Oe as default
 };

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 type { 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  /**\n   * Sets the table loading state.\n   */\n  isLoading: ComputedRef<boolean>;\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 { useIntersectionObserver, useResizeObserver, useScroll } from '@vueuse/core';\n  import { computed, inject, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Icon from '../Icon/Icon.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 SCROLL_DELTA_PX = 200;\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 classes = useCssModule();\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      (props.stickyHeader?.maxHeight && props.stickyHeader?.listLength > 3) // table can't scroll without a max height; sticky headers only needed for a scrollable table\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  const isTableLoading = computed(() => Boolean(props.isLoading || isDataViewLoading?.value));\n\n  const scrollContainerRef = useTemplateRef<HTMLElement>('scrollContainerRef');\n  const tableRef = useTemplateRef<HTMLTableElement>('tableRef');\n  const hasHorizontalOverflow = ref(false);\n\n  const { arrivedState, measure } = useScroll(scrollContainerRef, { behavior: 'smooth' });\n\n  function updateOverflow() {\n    const el = scrollContainerRef.value;\n    if (!el || computedLayout.value !== 'scroll') return;\n    hasHorizontalOverflow.value = el.scrollWidth > el.clientWidth;\n    measure();\n  }\n\n  useResizeObserver(scrollContainerRef, updateOverflow);\n  useResizeObserver(tableRef, updateOverflow);\n\n  // recalculate overflow when the scroll container is intersected by the viewport.\n  // For instance when the table is inside a v-show container\n  useIntersectionObserver(\n    scrollContainerRef,\n    (entries) => {\n      if (entries[0]?.isIntersecting) updateOverflow();\n    },\n    { threshold: 0.01 },\n  );\n\n  const canScrollLeft = computed(() => !arrivedState.left);\n  const canScrollRight = computed(() => !arrivedState.right);\n  const showScrollButtons = computed(() => computedLayout.value === 'scroll' && hasHorizontalOverflow.value);\n\n  function scrollBy(delta: number) {\n    scrollContainerRef.value?.scrollBy({ left: delta, behavior: 'smooth' });\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    isLoading: isTableLoading,\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 class=\"stash-table-wrapper relative\">\n    <div\n      ref=\"scrollContainerRef\"\n      class=\"stash-table relative\"\n      :class=\"[\n        { rounded: computedRadius === 'rounded' },\n        { 'rounded-b': computedRadius === 'rounded-bottom' },\n        { 'border-t border-ice-200': dataViewVariant === 'table' },\n        { 'overflow-auto scroll-smooth': computedLayout === 'scroll' },\n        { shadow: isShadowEnabled },\n        {\n          'overflow-visible lg:overflow-auto lg:shadow': computedLayout === 'stack',\n        },\n      ]\"\n      data-test=\"stash-table\"\n      :aria-busy=\"isTableLoading\"\n      :style=\"rootStyle\"\n    >\n      <table ref=\"tableRef\" class=\"relative w-full border-separate\">\n        <thead\n          class=\"border-b border-ice-200\"\n          :class=\"{\n            'hidden lg:table-header-group': computedLayout === 'stack',\n          }\"\n        >\n          <!-- @slot head -->\n          <slot name=\"head\"> </slot>\n        </thead>\n        <tbody>\n          <!--\n            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            relative prevents the loading/empty state from overflowing the table whenever the table has actions and the table cell applies position absolute.\n            \"max-width: '100vw'\" prevents the loading/empty state from overflowing the table whenever the table is in the scroll layout.\n            These are necessary in order to properly horizontally center Loading, and EmptyState\n          -->\n          <TableRow v-if=\"isTableLoading\">\n            <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n              <Loading :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\" />\n            </TableCell>\n          </TableRow>\n          <!-- @slot empty -->\n          <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n            <TableRow>\n              <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n                <slot name=\"empty\">\n                  <EmptyState\n                    class=\"w-full bg-white\"\n                    :text=\"props.emptyStateText\"\n                    :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\"\n                  />\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    <div\n      v-if=\"showScrollButtons\"\n      :class=\"classes['stash-table-scroll-overlay']\"\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-between z-2\"\n    >\n      <template v-if=\"canScrollLeft\">\n        <div\n          :class=\"classes['stash-table-scroll-shadow-left']\"\n          class=\"stash-table-scroll-shadow border-l border-ice-100 absolute left-0 top-0 bottom-0 w-4\"\n          data-test=\"stash-table|scroll-shadow-left\"\n        />\n        <Button\n          class=\"pointer-events-auto absolute left-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n          secondary\n          icon\n          :aria-label=\"'Scroll table left'\"\n          data-test=\"stash-table|scroll-left\"\n          @click=\"scrollBy(-SCROLL_DELTA_PX)\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n      <template v-if=\"canScrollRight\">\n        <div\n          :class=\"classes['stash-table-scroll-shadow-right']\"\n          class=\"stash-table-scroll-shadow border-r border-ice-100 absolute right-0 top-0 bottom-0 w-4\"\n          data-test=\"stash-table|scroll-shadow-right\"\n        />\n\n        <Button\n          class=\"pointer-events-auto absolute right-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n          secondary\n          icon\n          :aria-label=\"'Scroll table right'\"\n          data-test=\"stash-table|scroll-right\"\n          @click=\"scrollBy(SCROLL_DELTA_PX)\"\n        >\n          <Icon name=\"chevron-right\" class=\"text-ice-900\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .stash-table-scroll-shadow-left {\n    background: linear-gradient(90deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n  }\n\n  .stash-table-scroll-shadow-right {\n    background: linear-gradient(270deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n  }\n\n  @media print {\n    .stash-table-scroll-overlay {\n      display: none !important;\n    }\n  }\n</style>\n"],"names":["Layout","TableRadius","props","__props","classes","useCssModule","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","isTableLoading","scrollContainerRef","useTemplateRef","tableRef","hasHorizontalOverflow","ref","arrivedState","measure","useScroll","updateOverflow","el","useResizeObserver","useIntersectionObserver","entries","canScrollLeft","canScrollRight","showScrollButtons","scrollBy","delta","provide","TABLE_INJECTION","SpacingDensity","watchEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_unref","_renderSlot","_ctx","_createBlock","TableRow","_createVNode","TableCell","Loading","EmptyState","_normalizeClass","_Fragment","Button","_cache","$event","Icon"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import type { 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   * When true, the table is schema-driven (e.g. DataTable); selection column is rendered from the schema, not by TableRow/TableHeaderRow.\n   */\n  isSchemaDriven?: 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  /**\n   * Sets the table loading state.\n   */\n  isLoading: ComputedRef<boolean>;\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     * When true, indicates the table is being composed by DataTable (schema-driven mode).\n     * TableRow/TableHeaderRow use this to suppress their built-in selection cells.\n     */\n    isSchemaDriven?: 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 { useIntersectionObserver, useResizeObserver, useScroll } from '@vueuse/core';\n  import { computed, inject, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Icon from '../Icon/Icon.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 SCROLL_DELTA_PX = 200;\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isSchemaDriven: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const classes = useCssModule();\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      (props.stickyHeader?.maxHeight && props.stickyHeader?.listLength > 3) // table can't scroll without a max height; sticky headers only needed for a scrollable table\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  const isTableLoading = computed(() => Boolean(props.isLoading || isDataViewLoading?.value));\n\n  const scrollContainerRef = useTemplateRef<HTMLElement>('scrollContainerRef');\n  const tableRef = useTemplateRef<HTMLTableElement>('tableRef');\n  const hasHorizontalOverflow = ref(false);\n\n  const { arrivedState, measure } = useScroll(scrollContainerRef, { behavior: 'smooth' });\n\n  function updateOverflow() {\n    const el = scrollContainerRef.value;\n    if (!el || computedLayout.value !== 'scroll') return;\n    hasHorizontalOverflow.value = el.scrollWidth > el.clientWidth;\n    measure();\n  }\n\n  useResizeObserver(scrollContainerRef, updateOverflow);\n  useResizeObserver(tableRef, updateOverflow);\n\n  useIntersectionObserver(\n    scrollContainerRef,\n    (entries) => {\n      if (entries[0]?.isIntersecting) updateOverflow();\n    },\n    { threshold: 0.01 },\n  );\n\n  const canScrollLeft = computed(() => !arrivedState.left);\n  const canScrollRight = computed(() => !arrivedState.right);\n  const showScrollButtons = computed(() => computedLayout.value === 'scroll' && hasHorizontalOverflow.value);\n\n  function scrollBy(delta: number) {\n    scrollContainerRef.value?.scrollBy({ left: delta, behavior: 'smooth' });\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    isSchemaDriven: computed(() => props.isSchemaDriven),\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    isLoading: isTableLoading,\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 class=\"stash-table-wrapper relative\">\n    <div\n      ref=\"scrollContainerRef\"\n      class=\"stash-table relative\"\n      :class=\"[\n        { rounded: computedRadius === 'rounded' },\n        { 'rounded-b': computedRadius === 'rounded-bottom' },\n        { 'border-t border-ice-200': dataViewVariant === 'table' },\n        { 'overflow-auto scroll-smooth': computedLayout === 'scroll' },\n        { shadow: isShadowEnabled },\n        {\n          'overflow-visible lg:overflow-auto lg:shadow': computedLayout === 'stack',\n        },\n      ]\"\n      data-test=\"stash-table\"\n      :aria-busy=\"isTableLoading\"\n      :style=\"rootStyle\"\n    >\n      <table ref=\"tableRef\" class=\"relative w-full border-separate\">\n        <thead class=\"border-b border-ice-200\" :class=\"{ 'hidden lg:table-header-group': computedLayout === 'stack' }\">\n          <!-- @slot head -->\n          <slot name=\"head\"> </slot>\n        </thead>\n        <tbody>\n          <!--\n            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            relative prevents the loading/empty state from overflowing the table whenever the table has actions and the table cell applies position absolute.\n            \"max-width: '100vw'\" prevents the loading/empty state from overflowing the table whenever the table is in the scroll layout.\n            These are necessary in order to properly horizontally center Loading, and EmptyState\n          -->\n          <TableRow v-if=\"isTableLoading\">\n            <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n              <Loading :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\" />\n            </TableCell>\n          </TableRow>\n          <!-- @slot empty -->\n          <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n            <TableRow>\n              <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n                <slot name=\"empty\">\n                  <EmptyState\n                    class=\"w-full bg-white\"\n                    :text=\"props.emptyStateText\"\n                    :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\"\n                  />\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    <div\n      v-if=\"showScrollButtons\"\n      :class=\"classes['stash-table-scroll-overlay']\"\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-between z-2\"\n    >\n      <template v-if=\"canScrollLeft\">\n        <div\n          :class=\"classes['stash-table-scroll-shadow-left']\"\n          class=\"stash-table-scroll-shadow border-l border-ice-100 absolute left-0 top-0 bottom-0 w-4\"\n          data-test=\"stash-table|scroll-shadow-left\"\n        />\n        <Button\n          class=\"pointer-events-auto absolute left-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n          secondary\n          icon\n          :aria-label=\"'Scroll table left'\"\n          data-test=\"stash-table|scroll-left\"\n          @click=\"scrollBy(-SCROLL_DELTA_PX)\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n      <template v-if=\"canScrollRight\">\n        <div\n          :class=\"classes['stash-table-scroll-shadow-right']\"\n          class=\"stash-table-scroll-shadow border-r border-ice-100 absolute right-0 top-0 bottom-0 w-4\"\n          data-test=\"stash-table|scroll-shadow-right\"\n        />\n\n        <Button\n          class=\"pointer-events-auto absolute right-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n          secondary\n          icon\n          :aria-label=\"'Scroll table right'\"\n          data-test=\"stash-table|scroll-right\"\n          @click=\"scrollBy(SCROLL_DELTA_PX)\"\n        >\n          <Icon name=\"chevron-right\" class=\"text-ice-900\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .stash-table-scroll-shadow-left {\n    background: linear-gradient(90deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n  }\n\n  .stash-table-scroll-shadow-right {\n    background: linear-gradient(270deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n  }\n\n  @media print {\n    .stash-table-scroll-overlay {\n      display: none !important;\n    }\n  }\n</style>\n"],"names":["Layout","TableRadius","props","__props","classes","useCssModule","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","isTableLoading","scrollContainerRef","useTemplateRef","tableRef","hasHorizontalOverflow","ref","arrivedState","measure","useScroll","updateOverflow","el","useResizeObserver","useIntersectionObserver","entries","canScrollLeft","canScrollRight","showScrollButtons","scrollBy","delta","provide","TABLE_INJECTION","SpacingDensity","watchEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_unref","_normalizeClass","_renderSlot","_ctx","_createBlock","TableRow","_createVNode","TableCell","Loading","EmptyState","_Fragment","Button","_cache","$event","Icon"],"mappings":"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"}

package/dist/Table.vue.d.ts

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

package/dist/TableCell.js

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

package/dist/TableCell.js.map

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

package/dist/TableHeaderCell.js

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

package/dist/TableHeaderCell.js.map

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