@leaflink/stash 52.0.3 → 53.0.0

package/dist/Tab.js

@@ -1,9 +1,9 @@
 import { defineComponent as x, useCssModule as T, inject as y, computed as r, onMounted as k, nextTick as g, toRefs as c, createElementBlock as C, openBlock as u, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as M } from "vue";
 import j from "@leaflink/snitch";
 import D from "./Badge.js";
-import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-B3Irnlcd.js";
+import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-BVTCcK6M.js";
 import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class: "tw-mt-0.5" }, S = /* @__PURE__ */ x({
+const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class: "mt-0.5" }, S = /* @__PURE__ */ x({
   __name: "Tab",
   props: {
     value: {},
@@ -18,9 +18,9 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
     const e = p, v = T(), l = y(L.key);
     if (!l)
       throw Error("The Tab component must be a child of the Tabs component.");
-    const { setActiveTab: w, activeTab: f, variant: o } = l, t = r(() => e.value === f.value), m = r(() => e.to ? "router-link" : e.href ? "a" : "button");
+    const { setActiveTab: f, activeTab: m, variant: o } = l, t = r(() => e.value === m.value), h = r(() => e.to ? "router-link" : e.href ? "a" : "button");
     function d(i) {
-      e.disabled || w(i);
+      e.disabled || f(i);
     }
     const n = r(() => `tabpanel-${e.value}`);
     k(async () => {
@@ -28,7 +28,7 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
         `The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${n.value}" and a "role" attribute with value "tabpanel".`
       );
     });
-    const h = r(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
+    const _ = r(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
     return (i, s) => (u(), C("li", {
       id: `tab-${e.value}`,
       role: "tab",
@@ -43,25 +43,23 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
           "stash-tab--variant-enclosed": a(o) === "enclosed"
         }
       ]]),
-      onClick: s[0] || (s[0] = (_) => d(e.value)),
-      onKeypress: s[1] || (s[1] = P((_) => d(e.value), ["enter"]))
+      onClick: s[0] || (s[0] = (w) => d(e.value)),
+      onKeypress: s[1] || (s[1] = P((w) => d(e.value), ["enter"]))
     }, [
-      (u(), B(E(m.value), N(h.value, {
+      (u(), B(E(h.value), N(_.value, {
         to: e.to,
         href: e.href,
-        class: ["tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline", [
+        class: ["relative flex cursor-pointer items-center justify-center whitespace-nowrap border-solid py-1.5 text-sm font-medium hover:no-underline", [
           {
-            "tw-border-b-2": a(o) === "line",
-            "tw-border-b tw-border-t-4 tw-px-6": a(o) === "enclosed",
-            "tw-rounded-t tw-border-b-ice-200 tw-bg-white": t.value && a(o) === "enclosed",
+            "border-b-2": a(o) === "line",
+            "border-b border-t-4 px-6": a(o) === "enclosed",
+            "rounded-t border-b-ice-200 bg-white": t.value && a(o) === "enclosed",
             [a(v)["custom-shadow"]]: t.value && a(o) === "enclosed",
-            "focus:tw-no-underline": e.href,
-            "tw-pointer-events-none tw-text-ice-500": e.disabled,
-            "tw-text-ice-700": !e.disabled && !t.value
+            "focus:no-underline": e.href,
+            "pointer-events-none text-ice-500": e.disabled,
+            "text-ice-700": !e.disabled && !t.value
           },
-          [
-            t.value ? "tw-border-blue-500 tw-text-blue-500" : "tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500"
-          ]
+          [t.value ? "border-blue-500 text-blue-500" : "border-transparent hover:text-blue-500 focus:text-blue-500"]
         ]],
         tabindex: e.disabled ? -1 : 0
       }), {
@@ -89,7 +87,7 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
     ], 42, K));
   }
 }), z = {
-  "custom-shadow": "_custom-shadow_16n7s_3"
+  "custom-shadow": "_custom-shadow_1am0t_4"
 }, J = {
   $style: z
 }, Q = /* @__PURE__ */ V(S, [["__cssModules", J]]);

package/dist/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-b tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  /* this removes the bottom shadow from the active tab */\n  .custom-shadow {\n    box-shadow: 0 -4px 4px rgb(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,EAAA,GAEVC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAA,GAEF,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEhGG,EAAO;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MAAA;AAAA,IAGzM,CAAC;AAED,UAAMI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"relative flex cursor-pointer items-center justify-center whitespace-nowrap border-solid py-1.5 text-sm font-medium hover:no-underline\"\n      :class=\"[\n        {\n          'border-b-2': variant === 'line',\n          'border-b border-t-4 px-6': variant === 'enclosed',\n          'rounded-t border-b-ice-200 bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:no-underline': props.href,\n          'pointer-events-none text-ice-500': props.disabled,\n          'text-ice-700': !props.disabled && !isTabActive,\n        },\n        [isTabActive ? 'border-blue-500 text-blue-500' : 'border-transparent hover:text-blue-500 focus:text-blue-500'],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  @layer utilities {\n    /* this removes the bottom shadow from the active tab */\n    .custom-shadow {\n      box-shadow: 0 -4px 4px rgb(0 0 0 / 10%);\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,EAAA,GAEVC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAA,GAEF,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEhGG,EAAO;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MAAA;AAAA,IAGzM,CAAC;AAED,UAAMI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TabPanel.js

@@ -11,7 +11,7 @@ const b = /* @__PURE__ */ s({
     return (t, c) => (n(), l(o(a.is), {
       id: `tabpanel-${a.tabValue}`,
       "data-test": "stash-tab-panel",
-      class: r(["stash-tab-panel", { "tw-hidden": a.activeTab !== a.tabValue }]),
+      class: r(["stash-tab-panel", { hidden: a.activeTab !== a.tabValue }]),
       role: "tabpanel"
     }, {
       default: i(() => [

package/dist/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/components/TabPanel/TabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { type Component } from 'vue';\n\n  export interface TabPanelProps {\n    /**\n     * The identifier for the Tab component that this panel is associated with.\n     */\n    tabValue: string;\n\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * The tag name or component to render.\n     *\n     * @default 'div'\n     * @see: https://vuejs.org/api/built-in-special-elements.html#component\n     */\n    is?: string | Component;\n  }\n\n  const props = withDefaults(defineProps<TabPanelProps>(), {\n    is: 'div',\n  });\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    :id=\"`tabpanel-${props.tabValue}`\"\n    data-test=\"stash-tab-panel\"\n    :class=\"['stash-tab-panel', { 'tw-hidden': props.activeTab !== props.tabValue }]\"\n    role=\"tabpanel\"\n  >\n    <slot></slot>\n  </component>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;AAuBE,UAAMA,IAAQC;;;;;;;;;;;;;;"}
+{"version":3,"file":"TabPanel.js","sources":["../src/components/TabPanel/TabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { type Component } from 'vue';\n\n  export interface TabPanelProps {\n    /**\n     * The identifier for the Tab component that this panel is associated with.\n     */\n    tabValue: string;\n\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * The tag name or component to render.\n     *\n     * @default 'div'\n     * @see: https://vuejs.org/api/built-in-special-elements.html#component\n     */\n    is?: string | Component;\n  }\n\n  const props = withDefaults(defineProps<TabPanelProps>(), {\n    is: 'div',\n  });\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    :id=\"`tabpanel-${props.tabValue}`\"\n    data-test=\"stash-tab-panel\"\n    :class=\"['stash-tab-panel', { hidden: props.activeTab !== props.tabValue }]\"\n    role=\"tabpanel\"\n  >\n    <slot></slot>\n  </component>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;AAuBE,UAAMA,IAAQC;;;;;;;;;;;;;;"}

package/dist/Table.js

@@ -1,6 +1,6 @@
-import { defineComponent as L, inject as k, computed as t, provide as I, watchEffect as A, createElementBlock as O, openBlock as f, normalizeStyle as y, normalizeClass as d, unref as E, createElementVNode as v, renderSlot as b, createBlock as S, withCtx as n, createVNode as i } from "vue";
+import { defineComponent as L, inject as E, computed as t, provide as I, watchEffect as A, createElementBlock as O, openBlock as f, normalizeStyle as y, normalizeClass as d, unref as S, createElementVNode as v, renderSlot as b, createBlock as x, withCtx as n, createVNode as i } from "vue";
 import "lodash-es/cloneDeep";
-import { M as x } from "./Module.keys-CEsrW2f0.js";
+import { M as w } from "./Module.keys-CEsrW2f0.js";
 import "lodash-es/get";
 import "lodash-es/uniqueId";
 import { D as _ } from "./DataView.keys-aSOnA4AD.js";
@@ -11,7 +11,7 @@ import B from "./TableRow.js";
 import { T as z } from "./Table.keys-LHQf6FEH.js";
 import { S as D } from "./misc-CHQs-G03.js";
 var M = /* @__PURE__ */ ((a) => (a.Scroll = "scroll", a.Stack = "stack", a))(M || {}), R = /* @__PURE__ */ ((a) => (a.None = "none", a.Rounded = "rounded", a.RoundedBottom = "rounded-bottom", a))(R || {});
-const V = ["aria-busy"], j = { class: "tw-relative tw-w-full tw-border-separate" }, te = /* @__PURE__ */ L({
+const V = ["aria-busy"], j = { class: "relative w-full border-separate" }, te = /* @__PURE__ */ L({
   __name: "Table",
   props: {
     density: { default: void 0 },
@@ -32,14 +32,14 @@ const V = ["aria-busy"], j = { class: "tw-relative tw-w-full tw-border-separate"
       variant: u,
       isEmpty: r,
       isLoading: s,
-      isSelectable: w
-    } = k(_.key, _.defaults), { variant: c } = k(x.key, x.defaults), h = t(() => (c == null ? void 0 : c.value) === "table" || u.value === "table" ? "rounded-bottom" : e.radius), l = t(() => e.stickyHeader ? "scroll" : e.layout), H = t(() => l.value === "scroll" && u.value === "table"), g = t(() => {
+      isSelectable: h
+    } = E(_.key, _.defaults), { variant: c } = E(w.key, w.defaults), g = t(() => (c == null ? void 0 : c.value) === "table" || u.value === "table" ? "rounded-bottom" : e.radius), l = t(() => e.stickyHeader ? "scroll" : e.layout), H = t(() => l.value === "scroll" && u.value === "table"), k = t(() => {
       var o, p;
       return !!((o = e.stickyHeader) != null && o.maxHeight && ((p = e.stickyHeader) == null ? void 0 : p.listLength) > 3);
     }), N = t(() => {
       var o;
       return {
-        maxHeight: g.value ? (o = e.stickyHeader) == null ? void 0 : o.maxHeight : ""
+        maxHeight: k.value ? (o = e.stickyHeader) == null ? void 0 : o.maxHeight : ""
       };
     }), m = t(() => !!(e.isLoading || s != null && s.value));
     return I(z.key, {
@@ -53,18 +53,18 @@ const V = ["aria-busy"], j = { class: "tw-relative tw-w-full tw-border-separate"
       isLoading: m,
       layout: l
     }), A(() => {
-      w && (w.value = e.isSelectable);
+      h && (h.value = e.isSelectable);
     }), (o, p) => (f(), O("div", {
-      class: d(["stash-table tw-relative", [
-        { "tw-rounded": h.value === "rounded" },
-        { "tw-rounded-b": h.value === "rounded-bottom" },
-        { "tw-border-t tw-border-ice-200": E(u) === "table" },
-        { "tw-overflow-auto": l.value === "scroll" },
-        { "tw-shadow": H.value },
+      class: d(["stash-table relative", [
+        { rounded: g.value === "rounded" },
+        { "rounded-b": g.value === "rounded-bottom" },
+        { "border-t border-ice-200": S(u) === "table" },
+        { "overflow-auto": l.value === "scroll" },
+        { shadow: H.value },
         {
-          "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack"
+          "overflow-visible lg:overflow-auto lg:shadow": l.value === "stack"
         },
-        { "tw-min-h-[300px]": g.value && !e.isLoading }
+        { "min-h-[300px]": k.value && !e.isLoading }
         // prevent the table from collapsing on small screen heights when the max-height is dynamic
       ]]),
       "data-test": "stash-table",
@@ -73,18 +73,18 @@ const V = ["aria-busy"], j = { class: "tw-relative tw-w-full tw-border-separate"
     }, [
       v("table", j, [
         v("thead", {
-          class: d(["tw-border-b tw-border-ice-200", {
-            "tw-hidden lg:tw-table-header-group": l.value === "stack"
+          class: d(["border-b border-ice-200", {
+            "hidden lg:table-header-group": l.value === "stack"
           }])
         }, [
           b(o.$slots, "head")
         ], 2),
         v("tbody", null, [
-          m.value ? (f(), S(B, { key: 0 }, {
+          m.value ? (f(), x(B, { key: 0 }, {
             default: n(() => [
               i(T, {
                 colspan: "100%",
-                class: d({ "!tw-relative tw-col-span-12": l.value === "stack" })
+                class: d({ "!relative col-span-12": l.value === "stack" })
               }, {
                 default: n(() => [
                   i($, {
@@ -95,16 +95,16 @@ const V = ["aria-busy"], j = { class: "tw-relative tw-w-full tw-border-separate"
               }, 8, ["class"])
             ]),
             _: 1
-          })) : e.isEmpty || E(r) ? (f(), S(B, { key: 1 }, {
+          })) : e.isEmpty || S(r) ? (f(), x(B, { key: 1 }, {
             default: n(() => [
               i(T, {
                 colspan: "100%",
-                class: d({ "!tw-relative tw-col-span-12": l.value === "stack" })
+                class: d({ "!relative col-span-12": l.value === "stack" })
               }, {
                 default: n(() => [
                   b(o.$slots, "empty", {}, () => [
                     i(J, {
-                      class: "tw-w-full tw-bg-white",
+                      class: "w-full bg-white",
                       text: e.emptyStateText,
                       style: y([l.value === "scroll" ? { "max-width": "100vw" } : {}])
                     }, null, 8, ["text", "style"])

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 { 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      (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  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\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    :aria-busy=\"isTableLoading\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-w-full 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          tw-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=\"{ '!tw-relative tw-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=\"{ '!tw-relative tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState\n                  class=\"tw-w-full tw-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</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","isTableLoading","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;AAIO,IAAKA,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,IAAA,IACZC,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;;AACpD,aAAO,CAAC,GACLI,IAAAhB,EAAM,iBAAN,QAAAgB,EAAoB,eAAaC,IAAAjB,EAAM,iBAAN,gBAAAiB,EAAoB,cAAa;AAAA,IAGvE,CAAC,GAEKC,IAAYN,EAAS,MAAA;;AAAO;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,YAAY;AAAA,MAAA;AAAA,KACzE,GAEIG,IAAiBP,EAAS,MAAM,GAAQZ,EAAM,aAAaK,KAAA,QAAAA,EAAmB,MAAM;AAE1F,WAAAe,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAAST,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASoB,EAAe,WAAW;AAAA,MAC5F,uBAAuBV,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,MAAA;AAAA,MAEtB,WAAWe;AAAA,MACX,QAAQN;AAAA,IAAA,CACT,GAEDU,EAAY,MAAM;AAKhB,MAAIjB,MACFA,EAAqB,QAAQN,EAAM;AAAA,IAEvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 { 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      (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  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\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': computedLayout === 'scroll' },\n      { shadow: isShadowEnabled },\n      {\n        'overflow-visible lg:overflow-auto lg:shadow': computedLayout === 'stack',\n      },\n      { '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    :aria-busy=\"isTableLoading\"\n    :style=\"rootStyle\"\n  >\n    <table 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</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","isTableLoading","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;AAIO,IAAKA,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,IAAA,IACZC,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;;AACpD,aAAO,CAAC,GACLI,IAAAhB,EAAM,iBAAN,QAAAgB,EAAoB,eAAaC,IAAAjB,EAAM,iBAAN,gBAAAiB,EAAoB,cAAa;AAAA,IAGvE,CAAC,GAEKC,IAAYN,EAAS,MAAA;;AAAO;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,YAAY;AAAA,MAAA;AAAA,KACzE,GAEIG,IAAiBP,EAAS,MAAM,GAAQZ,EAAM,aAAaK,KAAA,QAAAA,EAAmB,MAAM;AAE1F,WAAAe,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAAST,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASoB,EAAe,WAAW;AAAA,MAC5F,uBAAuBV,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,MAAA;AAAA,MAEtB,WAAWe;AAAA,MACX,QAAQN;AAAA,IAAA,CACT,GAEDU,EAAY,MAAM;AAKhB,MAAIjB,MACFA,EAAqB,QAAQN,EAAM;AAAA,IAEvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableCell.js

@@ -1,57 +1,57 @@
-import { defineComponent as _, useCssModule as p, inject as d, createElementBlock as a, openBlock as c, normalizeClass as u, unref as t, createCommentVNode as f, renderSlot as y, toDisplayString as b } from "vue";
+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 "lodash-es/cloneDeep";
 import "lodash-es/get";
 import "lodash-es/uniqueId";
 import "./DataView.keys-aSOnA4AD.js";
-import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
+import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
 import "@leaflink/snitch";
-import { T as w } from "./Table.keys-LHQf6FEH.js";
-import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const h = {
+import { T as b } from "./Table.keys-LHQf6FEH.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const k = {
   key: 0,
-  class: "tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden"
-}, C = /* @__PURE__ */ _({
+  class: "text-xs font-medium text-ice-900 lg:hidden"
+}, T = /* @__PURE__ */ _({
   __name: "TableCell",
   props: {
     isControl: { type: Boolean, default: !1 },
     mobileHeader: { default: "" }
   },
   setup(n) {
-    const l = n, o = p(), r = d(w.key);
-    if (!r)
+    const l = n, t = p(), a = d(b.key);
+    if (!a)
       throw new Error("TableCell must be used within a Table component");
-    const { density: e, hasActions: i, layout: s } = r;
-    return (m, B) => (c(), a("td", {
+    const { density: e, hasActions: i, layout: s } = a;
+    return (m, E) => (c(), r("td", {
       class: u(["stash-table-cell", [
-        t(o).root,
-        t(o)[`layout--${t(s)}`],
+        o(t).root,
+        o(t)[`layout--${o(s)}`],
         {
-          [t(o)["root--density-compact"]]: t(e) === "compact",
-          [t(o)["root--density-comfortable"]]: t(e) === "comfortable",
-          [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",
-          "lg:tw-px-3 lg:tw-py-6": t(e) === "comfortable",
-          [t(o)["is-control"]]: l.isControl
+          [o(t)["root--density-compact"]]: o(e) === "compact",
+          [o(t)["root--density-comfortable"]]: o(e) === "comfortable",
+          [o(t)["has-actions"]]: o(i),
+          "p-3": o(s) === "scroll",
+          "p-1.5": o(s) === "stack",
+          "lg:p-3": o(e) === "compact",
+          "lg:px-3 lg:py-6": o(e) === "comfortable",
+          [o(t)["is-control"]]: l.isControl
         }
       ]]),
       "data-test": "stash-table-cell"
     }, [
-      l.mobileHeader && t(s) === "stack" ? (c(), a("div", h, b(l.mobileHeader), 1)) : f("", !0),
+      l.mobileHeader && o(s) === "stack" ? (c(), r("div", k, h(l.mobileHeader), 1)) : f("", !0),
       y(m.$slots, "default")
     ], 2));
   }
-}), 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]]);
+}), 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"
+}, B = {
+  $style: g
+}, v = /* @__PURE__ */ C(T, [["__cssModules", B]]);
 export {
   v 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        '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,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,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        '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"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderCell.js

@@ -1,62 +1,62 @@
-import { defineComponent as k, useCssModule as T, inject as p, computed as m, createElementBlock as _, openBlock as r, normalizeClass as s, unref as t, createElementVNode as x, renderSlot as E, createCommentVNode as n, createBlock as w } from "vue";
+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 "lodash-es/cloneDeep";
 import "lodash-es/get";
-import f from "./Icon.js";
-import { D as b } from "./DataView.keys-aSOnA4AD.js";
-import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
+import b from "./Icon.js";
+import { D as v } 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";
 const A = {
   key: 0,
-  class: "tw-relative tw-h-4 tw-w-3"
-}, B = /* @__PURE__ */ k({
+  class: "relative h-4 w-3"
+}, B = /* @__PURE__ */ I({
   __name: "TableHeaderCell",
   props: {
     sortId: { default: "" }
   },
   setup(h) {
-    const a = h, e = T(), l = p(N.key);
+    const a = h, t = k(), l = p(N.key);
     if (!l)
       throw new Error("TableHeaderCell must be used within a Table component");
-    const { density: i, hasActions: y } = l, { currentSortId: v, currentSortOrder: d, updateCurrentSort: u } = p(
-      b.key,
-      b.defaults
-    ), c = m(() => !!a.sortId), o = m(() => v.value === a.sortId);
-    function C() {
+    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 });
     }
-    return (I, O) => (r(), _("th", {
-      class: s(["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", [
-        t(e).root,
+    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", [
+        e(t).root,
         {
-          "tw-bg-white": !o.value,
-          "stash-table-header-cell--sorted tw-bg-blue-100": o.value,
-          [t(e)["root--density-compact"]]: t(i) === "compact",
-          [t(e)["root--density-comfortable"]]: t(i) === "comfortable",
-          [t(e)["has-actions"]]: t(y),
-          "tw-cursor-pointer": c.value
+          "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
         }
       ]]),
       "data-test": "stash-table-header-cell",
-      onClick: C
+      onClick: y
     }, [
-      x("div", {
-        class: s(["tw-flex tw-justify-between", t(e)["content-wrapper"]])
+      T("div", {
+        class: s(["flex justify-between", e(t)["content-wrapper"]])
       }, [
-        E(I.$slots, "default"),
+        E(C.$slots, "default"),
         c.value ? (r(), _("div", A, [
-          !o.value || t(d) === "asc" ? (r(), w(f, {
+          !o.value || e(d) === "asc" ? (r(), f(b, {
             key: 0,
-            class: s(["tw-absolute tw-text-ice-700", [t(e).caret, t(e)["caret-up"]]]),
+            class: s(["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 || t(d) === "desc" ? (r(), w(f, {
+          !o.value || e(d) === "desc" ? (r(), f(b, {
             key: 1,
-            class: s(["tw-absolute tw-text-ice-700", [t(e).caret, t(e)["caret-down"]]]),
+            class: s(["absolute text-ice-700", [e(t).caret, e(t)["caret-down"]]]),
             "data-test": "icon|caret-down",
             name: "caret-down",
             size: "dense"
@@ -65,14 +65,14 @@ const A = {
       ], 2)
     ], 2));
   }
-}), j = "_root_14363_2", z = "_caret_14363_18", H = {
+}), j = "_root_1xv85_5", z = "_caret_1xv85_21", H = {
   root: j,
-  "has-actions": "_has-actions_14363_14",
-  "content-wrapper": "_content-wrapper_14363_14",
-  "caret-up": "_caret-up_14363_18",
-  "caret-down": "_caret-down_14363_22",
+  "has-actions": "_has-actions_1xv85_17",
+  "content-wrapper": "_content-wrapper_1xv85_17",
+  "caret-up": "_caret-up_1xv85_21",
+  "caret-down": "_caret-down_1xv85_25",
   caret: z,
-  "root--density-comfortable": "_root--density-comfortable_14363_31"
+  "root--density-comfortable": "_root--density-comfortable_1xv85_34"
 }, M = {
   $style: H
 }, G = /* @__PURE__ */ S(B, [["__cssModules", M]]);

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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}