@leaflink/stash 52.0.0 → 52.0.2

package/dist/Table.js

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

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (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  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto': computedLayout === 'scroll' },\n      { 'tw-shadow': isShadowEnabled },\n      {\n        'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack',\n      },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;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;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MAAA;AAAA,MAEtB,QAAQS;AAAA,IAAA,CACT,GAEDS,EAAY,MAAM;AAKhB,MAAIhB,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 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Table.vue.d.ts

@@ -131,6 +131,10 @@ export declare interface TableInjection {
      * Sets the table layout; the default value is "scroll".
      */
     layout: ComputedRef<Layouts>;
+    /**
+     * Sets the table loading state.
+     */
+    isLoading: ComputedRef<boolean>;
 }
 
 export declare interface TableProps {

package/dist/TableRow.js

@@ -1,16 +1,16 @@
-import { defineComponent as A, useAttrs as D, useCssModule as M, useSlots as V, inject as j, ref as P, computed as k, watch as q, createElementBlock as x, openBlock as r, Fragment as z, createElementVNode as F, createCommentVNode as u, mergeProps as J, unref as e, createBlock as E, renderSlot as y, normalizeClass as c, withCtx as _, createVNode as b } from "vue";
-import L from "lodash-es/uniqueId";
+import { defineComponent as D, useAttrs as M, useCssModule as V, useSlots as j, inject as L, ref as P, computed as k, watch as q, createElementBlock as x, openBlock as r, Fragment as z, createElementVNode as F, createCommentVNode as u, mergeProps as J, unref as e, createBlock as E, renderSlot as y, normalizeClass as c, withCtx as _, createVNode as b } from "vue";
+import O from "lodash-es/uniqueId";
 import { t as h } from "./locale.js";
-import O from "./Checkbox.js";
-import { _ as U } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-Ce_qOXfR.js";
-import { _ as G } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
+import U from "./Checkbox.js";
+import { _ as G } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-Ce_qOXfR.js";
+import { _ as H } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
 import "lodash-es/cloneDeep";
 import "./DataView.keys-aSOnA4AD.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
 import g from "./TableCell.js";
-import { T as H } from "./Table.keys-LHQf6FEH.js";
-import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Q = /* @__PURE__ */ A({
+import { T as K } from "./Table.keys-LHQf6FEH.js";
+import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const W = /* @__PURE__ */ D({
   inheritAttrs: !1,
   __name: "TableRow",
   props: {
@@ -22,14 +22,14 @@ const Q = /* @__PURE__ */ A({
   },
   emits: ["update:isSelected", "update:isExpanded"],
   setup(S, { emit: T }) {
-    const t = S, m = T, B = D(), o = M(), i = V(), f = j(H.key);
+    const t = S, m = T, B = M(), o = V(), i = j(), f = L(K.key);
     if (!f)
       throw new Error("TableRow must be used within a Table component");
-    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: w, layout: d } = f, l = P(t.isExpanded), n = k(() => $.value && !!i.expansion), I = k(() => {
+    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: w, layout: d, isLoading: I } = f, l = P(t.isExpanded), n = k(() => $.value && !!i.expansion), N = k(() => {
       var s;
       let a = ((s = i.default) == null ? void 0 : s.call(i, { toggleExpand: p }).length) ?? 0;
       return w.value && (a += 1), n.value && !v.value && (a += 1), a;
-    }), C = L("table-row-");
+    }), C = O("table-row-");
     function p(a) {
       if (!n.value)
         throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
@@ -50,7 +50,7 @@ const Q = /* @__PURE__ */ A({
             [e(o)["root--hidden-divider"]]: a.hideExpansionDivider,
             "tw-p-gutter": e(d) === "stack",
             "tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(d) === "stack" && !n.value,
-            "tw-pt-[60px]": e(R) && e(d) === "stack" && !e(w),
+            "tw-pt-[60px]": e(R) && e(d) === "stack" && !e(w) && !e(I),
             "stash-table-row--accent": t.accentColor,
             "tw-relative": t.accentColor
           }
@@ -64,12 +64,12 @@ const Q = /* @__PURE__ */ A({
           "data-test": "stash-table-row|selection-cell"
         }, {
           default: _(() => [
-            b(O, {
+            b(U, {
               class: c(e(o)["row-selection-checkbox"]),
               checked: t.isSelected,
               disabled: t.isSelectDisabled,
               title: e(h)("ll.select.self"),
-              "onUpdate:checked": s[0] || (s[0] = (N) => m("update:isSelected", N))
+              "onUpdate:checked": s[0] || (s[0] = (A) => m("update:isSelected", A))
             }, null, 8, ["class", "checked", "disabled", "title"])
           ]),
           _: 1
@@ -81,7 +81,7 @@ const Q = /* @__PURE__ */ A({
           "is-control": ""
         }, {
           default: _(() => [
-            b(U, {
+            b(G, {
               "aria-controls": e(C),
               "aria-label": l.value ? e(h)("ll.table.collapseRow") : e(h)("ll.table.expandRow"),
               direction: l.value ? "up" : "down",
@@ -114,12 +114,12 @@ const Q = /* @__PURE__ */ A({
         class: c(["stash-table-row stash-table-row--expandable", e(o)["row-expansion"]]),
         "data-test": "stash-table-row|expansion-row"
       }, [
-        b(G, {
+        b(H, {
           is: "td",
           id: e(C),
           class: c(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(o)["row-expansion-content"]]),
           "data-test": "stash-table-row|expansion-cell",
-          colspan: I.value,
+          colspan: N.value,
           "is-expanded": l.value
         }, {
           default: _(() => [
@@ -130,8 +130,8 @@ const Q = /* @__PURE__ */ A({
       ], 2)) : u("", !0)
     ], 64));
   }
-}), W = "_root_1h1vo_2", X = {
-  root: W,
+}), X = "_root_1h1vo_2", Y = {
+  root: X,
   "is-expandable": "_is-expandable_1h1vo_9",
   "root--hidden-divider": "_root--hidden-divider_1h1vo_14",
   "is-expanded": "_is-expanded_1h1vo_14",
@@ -141,10 +141,10 @@ const Q = /* @__PURE__ */ A({
   "row-control-cell": "_row-control-cell_1h1vo_61",
   "row-expansion-content": "_row-expansion-content_1h1vo_72",
   "row-expansion": "_row-expansion_1h1vo_72"
-}, Y = {
-  $style: X
-}, pe = /* @__PURE__ */ K(Q, [["__cssModules", Y]]);
+}, Z = {
+  $style: Y
+}, ue = /* @__PURE__ */ Q(W, [["__cssModules", Z]]);
 export {
-  pe as default
+  ue as default
 };
 //# sourceMappingURL=TableRow.js.map

package/dist/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, watch } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n    /**\n     * The accent color for the TableRow.\n     */\n    accentColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n    accentColor: undefined,\n  });\n\n  const emit = defineEmits<{\n    'update:isSelected': [isChecked: CheckboxProps['checked']];\n    'update:isExpanded': [isExpanded: boolean];\n  }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = defineSlots<{\n    default(props: { isRowExpanded?: boolean; toggleExpand: (value?: boolean) => void }): unknown[];\n    expansion(): unknown[];\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'tw-p-gutter': layout === 'stack',\n        'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n        'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n        'stash-table-row--accent': props.accentColor,\n        'tw-relative': props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell tw-min-w-[48px] lg:tw-pl-3\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n    <!-- Displays a 4px accent on the left of the table row -->\n    <div\n      v-if=\"props.accentColor\"\n      data-test=\"stash-table-row|accent\"\n      :class=\"{\n        'tw-absolute': props.accentColor,\n        [`tw-bg-${props.accentColor}`]: props.accentColor,\n        'tw-block': props.accentColor,\n        'tw-h-full': props.accentColor,\n        'tw-w-1': props.accentColor,\n        'tw-top-0': props.accentColor,\n        'tw-left-0': props.accentColor,\n      }\"\n    ></div>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|expansion-row\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  /**\n   * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n   */\n  .is-expandable > td {\n    border-bottom-color: var(--color-ice-200);\n    transition: border-bottom-color 0.5s;\n  }\n\n  .root--hidden-divider.is-expanded > td {\n    transition: border-bottom-color 0s;\n    /**\n     * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n     */\n    border-bottom-color: transparent;\n  }\n\n  .layout--scroll {\n    border-radius: 0;\n    box-shadow: none !important;\n    margin: 0;\n  }\n\n  .layout--scroll:last-of-type {\n    border: 0;\n  }\n\n  .layout--scroll:last-of-type td {\n    border-bottom: none;\n  }\n\n  .layout--stack {\n    align-items: stretch;\n    background-color: var(--color-white);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  .layout--stack:not(.is-expanded) {\n    border-radius: theme('borderRadius.DEFAULT');\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    vertical-align: middle;\n  }\n\n  .layout--stack .row-control-cell {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  /* On mobile, display controls on their own row, pushing other cells below */\n  .row-control-cell + :not(.row-control-cell) {\n    grid-column-start: 1;\n  }\n\n  .row-expansion-content {\n    box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n  }\n\n  .layout--stack + .row-expansion,\n  .layout--stack + .row-expansion > .row-expansion-content {\n    display: block;\n  }\n\n  .layout--stack + .row-expansion > .row-expansion-content {\n    border-top: 1px solid var(--color-ice-200);\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    margin-bottom: theme('spacing.6');\n  }\n\n  .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n    border-top: none;\n  }\n\n  /* On large screens, match the styles for layout-SCROLL */\n  @media screen('lg') {\n    .layout--stack {\n      align-items: unset;\n      background-color: unset;\n      border: 0;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      column-gap: unset;\n      display: table-row;\n      grid-template-columns: unset;\n      row-gap: unset;\n    }\n\n    .layout--stack:last-of-type {\n      border-bottom: 0;\n    }\n\n    .layout--stack .row-control-cell {\n      display: table-cell;\n    }\n\n    .layout--stack + .row-expansion {\n      display: table-row;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: unset;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      display: table-cell;\n      margin-bottom: unset;\n    }\n\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: unset;\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBE,UAAMA,IAAQC,GAWRC,IAAOC,GAKPC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAQC,EAAA,GAKRC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,MAAWP,GAE5EQ,IAAgBC,EAAInB,EAAM,UAAU,GACpCoB,IAAkBC,EAAS,MAAMN,EAAa,SAAS,CAAC,CAACP,EAAM,SAAS,GAExEc,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAhB,EAAM,YAAN,gBAAAgB,EAAA,KAAAhB,GAAgB,EAAE,cAAAiB,EAAA,GAAgB,WAAU;AAExD,aAAIT,EAAa,UACfO,KAAS,IAGPH,EAAgB,SAAS,CAACN,EAAsB,UAClDS,KAAS,IAGJA;AAAA,IACT,CAAC,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACrC,UAAI,CAACR,EAAgB;AACnB,cAAM,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACV,EAAc;AAEvE,MAAAA,EAAc,QAAQW,GACtB3B,EAAK,qBAAqB2B,CAAU;AAAA,IACtC;AAEA,WAAAC;AAAA,MACE,MAAM9B,EAAM;AAAA,MACZ,MAAMyB,EAAazB,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, watch } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n    /**\n     * The accent color for the TableRow.\n     */\n    accentColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n    accentColor: undefined,\n  });\n\n  const emit = defineEmits<{\n    'update:isSelected': [isChecked: CheckboxProps['checked']];\n    'update:isExpanded': [isExpanded: boolean];\n  }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = defineSlots<{\n    default(props: { isRowExpanded?: boolean; toggleExpand: (value?: boolean) => void }): unknown[];\n    expansion(): unknown[];\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout, isLoading } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'tw-p-gutter': layout === 'stack',\n        'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n        'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable && !isLoading,\n        'stash-table-row--accent': props.accentColor,\n        'tw-relative': props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell tw-min-w-[48px] lg:tw-pl-3\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n    <!-- Displays a 4px accent on the left of the table row -->\n    <div\n      v-if=\"props.accentColor\"\n      data-test=\"stash-table-row|accent\"\n      :class=\"{\n        'tw-absolute': props.accentColor,\n        [`tw-bg-${props.accentColor}`]: props.accentColor,\n        'tw-block': props.accentColor,\n        'tw-h-full': props.accentColor,\n        'tw-w-1': props.accentColor,\n        'tw-top-0': props.accentColor,\n        'tw-left-0': props.accentColor,\n      }\"\n    ></div>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|expansion-row\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  /**\n   * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n   */\n  .is-expandable > td {\n    border-bottom-color: var(--color-ice-200);\n    transition: border-bottom-color 0.5s;\n  }\n\n  .root--hidden-divider.is-expanded > td {\n    transition: border-bottom-color 0s;\n    /**\n     * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n     */\n    border-bottom-color: transparent;\n  }\n\n  .layout--scroll {\n    border-radius: 0;\n    box-shadow: none !important;\n    margin: 0;\n  }\n\n  .layout--scroll:last-of-type {\n    border: 0;\n  }\n\n  .layout--scroll:last-of-type td {\n    border-bottom: none;\n  }\n\n  .layout--stack {\n    align-items: stretch;\n    background-color: var(--color-white);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  .layout--stack:not(.is-expanded) {\n    border-radius: theme('borderRadius.DEFAULT');\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    vertical-align: middle;\n  }\n\n  .layout--stack .row-control-cell {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  /* On mobile, display controls on their own row, pushing other cells below */\n  .row-control-cell + :not(.row-control-cell) {\n    grid-column-start: 1;\n  }\n\n  .row-expansion-content {\n    box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n  }\n\n  .layout--stack + .row-expansion,\n  .layout--stack + .row-expansion > .row-expansion-content {\n    display: block;\n  }\n\n  .layout--stack + .row-expansion > .row-expansion-content {\n    border-top: 1px solid var(--color-ice-200);\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    margin-bottom: theme('spacing.6');\n  }\n\n  .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n    border-top: none;\n  }\n\n  /* On large screens, match the styles for layout-SCROLL */\n  @media screen('lg') {\n    .layout--stack {\n      align-items: unset;\n      background-color: unset;\n      border: 0;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      column-gap: unset;\n      display: table-row;\n      grid-template-columns: unset;\n      row-gap: unset;\n    }\n\n    .layout--stack:last-of-type {\n      border-bottom: 0;\n    }\n\n    .layout--stack .row-control-cell {\n      display: table-cell;\n    }\n\n    .layout--stack + .row-expansion {\n      display: table-row;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: unset;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      display: table-cell;\n      margin-bottom: unset;\n    }\n\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: unset;\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isLoading","isRowExpanded","ref","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBE,UAAMA,IAAQC,GAWRC,IAAOC,GAKPC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAQC,EAAA,GAKRC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,GAAQ,WAAAC,MAAcR,GAEvFS,IAAgBC,EAAIpB,EAAM,UAAU,GACpCqB,IAAkBC,EAAS,MAAMP,EAAa,SAAS,CAAC,CAACP,EAAM,SAAS,GAExEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,EAAA,GAAgB,WAAU;AAExD,aAAIV,EAAa,UACfQ,KAAS,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UAClDU,KAAS,IAGJA;AAAA,IACT,CAAC,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACrC,UAAI,CAACR,EAAgB;AACnB,cAAM,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACV,EAAc;AAEvE,MAAAA,EAAc,QAAQW,GACtB5B,EAAK,qBAAqB4B,CAAU;AAAA,IACtC;AAEA,WAAAC;AAAA,MACE,MAAM/B,EAAM;AAAA,MACZ,MAAM0B,EAAa1B,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tooltip.js

@@ -1,10 +1,10 @@
-import { defineComponent as g, ref as n, computed as r, createElementBlock as S, openBlock as d, createElementVNode as i, createBlock as T, renderSlot as l, Teleport as E, normalizeStyle as f, unref as $, createTextVNode as k, toDisplayString as B } from "vue";
-import { u as D, a as O, f as z, o as A, b as F } from "./floating-ui.vue-DLFiymOf.js";
-import { a as I } from "./index-C14LhAwV.js";
-const P = {
+import { defineComponent as g, ref as n, computed as r, createElementBlock as S, openBlock as w, createElementVNode as i, createBlock as T, renderSlot as a, Teleport as E, normalizeStyle as f, unref as $, createTextVNode as k, toDisplayString as B } from "vue";
+import { u as D, a as O, f as z, s as A, o as F, b as I } from "./floating-ui.vue-CuGrC-z8.js";
+import { a as P } from "./index-C14LhAwV.js";
+const M = {
   ref: "wrapper",
   class: "stash-tooltip__wrapper tw-relative tw-inline-flex tw-size-fit"
-}, M = 6, N = 12, X = /* @__PURE__ */ g({
+}, N = 6, C = 12, U = /* @__PURE__ */ g({
   __name: "Tooltip",
   props: {
     disableTeleport: { type: Boolean, default: !1 },
@@ -20,29 +20,34 @@ const P = {
       right: "left",
       bottom: "top",
       left: "right"
-    }, t = u, a = n(null), p = n(null), c = n(null), { isOutside: h } = I(a), y = r(() => !t.isDisabled && (!h.value || t.isOpen)), _ = r(() => t.side), { floatingStyles: x, middlewareData: o, placement: b } = D(a, c, {
+    }, t = u, s = n(null), p = n(null), c = n(null), { isOutside: h } = P(s), y = r(() => !t.isDisabled && (!h.value || t.isOpen)), _ = r(() => t.side), { floatingStyles: x, middlewareData: o, placement: b } = D(s, c, {
       whileElementsMounted: O,
       placement: _,
-      middleware: [z(), A(N), F({ element: p })]
+      middleware: [
+        z(),
+        A({ padding: 8 }),
+        F(C),
+        I({ element: p, padding: 8 })
+      ]
     }), v = r(() => {
-      var s, w;
+      var l, d;
       const e = m[b.value];
       return {
-        left: ((s = o.value.arrow) == null ? void 0 : s.x) != null ? `${o.value.arrow.x}px` : "",
-        top: ((w = o.value.arrow) == null ? void 0 : w.y) != null ? `${o.value.arrow.y}px` : "",
-        [e]: `-${M}px`
+        left: ((l = o.value.arrow) == null ? void 0 : l.x) != null ? `${o.value.arrow.x}px` : "",
+        top: ((d = o.value.arrow) == null ? void 0 : d.y) != null ? `${o.value.arrow.y}px` : "",
+        [e]: `-${N}px`
       };
     });
-    return (e, s) => (d(), S("div", P, [
+    return (e, l) => (w(), S("div", M, [
       i("span", {
         ref_key: "anchor",
-        ref: a,
+        ref: s,
         "data-test": "stash-tooltip|anchor",
         class: "stash-tooltip__anchor"
       }, [
-        l(e.$slots, "default")
+        a(e.$slots, "default")
       ], 512),
-      (d(), T(E, {
+      (w(), T(E, {
         to: t.teleportTo,
         disabled: t.disableTeleport
       }, [
@@ -57,11 +62,11 @@ const P = {
             opacity: y.value ? 0.95 : 0
           })
         }, [
-          l(e.$slots, "icon"),
-          l(e.$slots, "content", {}, () => [
+          a(e.$slots, "icon"),
+          a(e.$slots, "content", {}, () => [
             k(B(t.text), 1)
           ]),
-          l(e.$slots, "secondaryIcon"),
+          a(e.$slots, "secondaryIcon"),
           i("div", {
             ref_key: "floatingArrow",
             ref: p,
@@ -74,6 +79,6 @@ const P = {
   }
 });
 export {
-  X as default
+  U as default
 };
 //# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { arrow, autoUpdate, flip, offset, type Side, useFloating } from '@floating-ui/vue';\n  import { useMouseInElement } from '@vueuse/core';\n  import { computed, ref } from 'vue';\n\n  export type TooltipSide = Side;\n\n  const ARROW_OFFSET_PX = 6;\n  const OFFSET_DISTANCE_PX = 12;\n\n  const SIDE_MAP: Record<TooltipSide, TooltipSide> = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  export interface TooltipSlots {\n    /**\n     * The content to display in the tooltip. This may be text node, an element, or a component.\n     */\n    content: any;\n    /**\n     * The default slot is the element or component to which the tooltip will be anchored.\n     */\n    default: any;\n    /**\n     * A slot for the primary icon. This icon will be displayed before the text or content.\n     */\n    icon: any;\n    /**\n     * A slot for the secondary icon. This icon will be displayed after the text or content.\n     */\n    secondaryIcon: any;\n  }\n  /* eslint-enable @typescript-eslint/no-explicit-any */\n\n  defineSlots<TooltipSlots>();\n\n  export interface TooltipProps {\n    /**\n     * Disables teleporting the popover menu to an external element\n     * @default false\n     */\n    disableTeleport?: boolean;\n    /**\n     * Sets the placement of the menu\n     * @default 'top'\n     */\n    side?: TooltipSide;\n    /**\n     * Disables the tooltip\n     * @default false\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets if the menu is open. If not set from the parent context, the menu will be controlled internally.\n     * @default false\n     */\n    isOpen?: boolean;\n    /**\n     * The query selector where the tooltip should be teleported\n     * @default '#stash-menus-mount-node'\n     */\n    teleportTo?: string | HTMLElement;\n    /**\n     * String content to display within the tooltip\n     * @default ''\n     */\n    text?: string;\n  }\n\n  const props = withDefaults(defineProps<TooltipProps>(), {\n    disableTeleport: false,\n    isDisabled: false,\n    isOpen: false,\n    side: 'top',\n    teleportTo: '#stash-menus-mount-node',\n    text: '',\n  });\n\n  const anchor = ref<HTMLElement | null>(null);\n  const floatingArrow = ref<HTMLElement | null>(null);\n  const tooltip = ref<HTMLElement | null>(null);\n\n  const { isOutside } = useMouseInElement(anchor);\n\n  const open = computed(() => !props.isDisabled && (!isOutside.value || props.isOpen));\n  const placementSetting = computed(() => props.side);\n\n  const { floatingStyles, middlewareData, placement } = useFloating(anchor, tooltip, {\n    whileElementsMounted: autoUpdate,\n    placement: placementSetting,\n    middleware: [flip(), offset(OFFSET_DISTANCE_PX), arrow({ element: floatingArrow })],\n  });\n\n  const arrowStyles = computed(() => {\n    const arrowPosition = SIDE_MAP[placement.value];\n\n    return {\n      left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '',\n      top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '',\n      [arrowPosition]: `-${ARROW_OFFSET_PX}px`,\n    };\n  });\n</script>\n\n<template>\n  <div ref=\"wrapper\" class=\"stash-tooltip__wrapper tw-relative tw-inline-flex tw-size-fit\">\n    <span ref=\"anchor\" data-test=\"stash-tooltip|anchor\" class=\"stash-tooltip__anchor\">\n      <slot></slot>\n    </span>\n    <Teleport :to=\"props.teleportTo\" :disabled=\"props.disableTeleport\">\n      <div\n        ref=\"tooltip\"\n        data-test=\"stash-tooltip\"\n        class=\"stash-tooltip tw-pointer-events-none tw-z-screen tw-flex tw-w-[148px] tw-flex-col tw-items-center tw-whitespace-normal tw-rounded tw-bg-ice-900 tw-p-3 tw-text-center tw-text-xs tw-text-white tw-opacity-0 tw-shadow tw-transition-opacity\"\n        role=\"tooltip\"\n        :style=\"{\n          ...floatingStyles,\n          opacity: open ? 0.95 : 0,\n        }\"\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"content\">{{ props.text }}</slot>\n        <slot name=\"secondaryIcon\"></slot>\n        <div\n          ref=\"floatingArrow\"\n          class=\"stash-tooltip__arrow tw-absolute tw-z-behind tw-size-[12px] tw-rotate-45 tw-bg-ice-900\"\n          :style=\"arrowStyles\"\n        ></div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["ARROW_OFFSET_PX","OFFSET_DISTANCE_PX","SIDE_MAP","props","__props","anchor","ref","floatingArrow","tooltip","isOutside","useMouseInElement","open","computed","placementSetting","floatingStyles","middlewareData","placement","useFloating","autoUpdate","flip","offset","arrow","arrowStyles","arrowPosition","_a","_b"],"mappings":";;;;;;GAOQA,IAAkB,GAClBC,IAAqB;;;;;;;;;;;AAE3B,UAAMC,IAA6C;AAAA,MACjD,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,GA2DFC,IAAQC,GASRC,IAASC,EAAwB,IAAI,GACrCC,IAAgBD,EAAwB,IAAI,GAC5CE,IAAUF,EAAwB,IAAI,GAEtC,EAAE,WAAAG,EAAA,IAAcC,EAAkBL,CAAM,GAExCM,IAAOC,EAAS,MAAM,CAACT,EAAM,eAAe,CAACM,EAAU,SAASN,EAAM,OAAO,GAC7EU,IAAmBD,EAAS,MAAMT,EAAM,IAAI,GAE5C,EAAE,gBAAAW,GAAgB,gBAAAC,GAAgB,WAAAC,MAAcC,EAAYZ,GAAQG,GAAS;AAAA,MACjF,sBAAsBU;AAAA,MACtB,WAAWL;AAAA,MACX,YAAY,CAACM,EAAA,GAAQC,EAAOnB,CAAkB,GAAGoB,EAAM,EAAE,SAASd,GAAe,CAAC;AAAA,IAAA,CACnF,GAEKe,IAAcV,EAAS,MAAM;;AACjC,YAAMW,IAAgBrB,EAASc,EAAU,KAAK;AAE9C,aAAO;AAAA,QACL,QAAMQ,IAAAT,EAAe,MAAM,UAArB,gBAAAS,EAA4B,MAAK,OAAO,GAAGT,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACpF,OAAKU,IAAAV,EAAe,MAAM,UAArB,gBAAAU,EAA4B,MAAK,OAAO,GAAGV,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACnF,CAACQ,CAAa,GAAG,IAAIvB,CAAe;AAAA,MAAA;AAAA,IAExC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { arrow, autoUpdate, flip, offset, shift, type Side, useFloating } from '@floating-ui/vue';\n  import { useMouseInElement } from '@vueuse/core';\n  import { computed, ref } from 'vue';\n\n  export type TooltipSide = Side;\n\n  const ARROW_OFFSET_PX = 6;\n  const OFFSET_DISTANCE_PX = 12;\n\n  const SIDE_MAP: Record<TooltipSide, TooltipSide> = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  export interface TooltipSlots {\n    /**\n     * The content to display in the tooltip. This may be text node, an element, or a component.\n     */\n    content: any;\n    /**\n     * The default slot is the element or component to which the tooltip will be anchored.\n     */\n    default: any;\n    /**\n     * A slot for the primary icon. This icon will be displayed before the text or content.\n     */\n    icon: any;\n    /**\n     * A slot for the secondary icon. This icon will be displayed after the text or content.\n     */\n    secondaryIcon: any;\n  }\n  /* eslint-enable @typescript-eslint/no-explicit-any */\n\n  defineSlots<TooltipSlots>();\n\n  export interface TooltipProps {\n    /**\n     * Disables teleporting the popover menu to an external element\n     * @default false\n     */\n    disableTeleport?: boolean;\n    /**\n     * Sets the placement of the menu\n     * @default 'top'\n     */\n    side?: TooltipSide;\n    /**\n     * Disables the tooltip\n     * @default false\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets if the menu is open. If not set from the parent context, the menu will be controlled internally.\n     * @default false\n     */\n    isOpen?: boolean;\n    /**\n     * The query selector where the tooltip should be teleported\n     * @default '#stash-menus-mount-node'\n     */\n    teleportTo?: string | HTMLElement;\n    /**\n     * String content to display within the tooltip\n     * @default ''\n     */\n    text?: string;\n  }\n\n  const props = withDefaults(defineProps<TooltipProps>(), {\n    disableTeleport: false,\n    isDisabled: false,\n    isOpen: false,\n    side: 'top',\n    teleportTo: '#stash-menus-mount-node',\n    text: '',\n  });\n\n  const anchor = ref<HTMLElement | null>(null);\n  const floatingArrow = ref<HTMLElement | null>(null);\n  const tooltip = ref<HTMLElement | null>(null);\n\n  const { isOutside } = useMouseInElement(anchor);\n\n  const open = computed(() => !props.isDisabled && (!isOutside.value || props.isOpen));\n  const placementSetting = computed(() => props.side);\n\n  const { floatingStyles, middlewareData, placement } = useFloating(anchor, tooltip, {\n    whileElementsMounted: autoUpdate,\n    placement: placementSetting,\n    middleware: [\n      flip(),\n      shift({ padding: 8 }),\n      offset(OFFSET_DISTANCE_PX),\n      arrow({ element: floatingArrow, padding: 8 }),\n    ],\n  });\n\n  const arrowStyles = computed(() => {\n    const arrowPosition = SIDE_MAP[placement.value];\n\n    return {\n      left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '',\n      top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '',\n      [arrowPosition]: `-${ARROW_OFFSET_PX}px`,\n    };\n  });\n</script>\n\n<template>\n  <div ref=\"wrapper\" class=\"stash-tooltip__wrapper tw-relative tw-inline-flex tw-size-fit\">\n    <span ref=\"anchor\" data-test=\"stash-tooltip|anchor\" class=\"stash-tooltip__anchor\">\n      <slot></slot>\n    </span>\n    <Teleport :to=\"props.teleportTo\" :disabled=\"props.disableTeleport\">\n      <div\n        ref=\"tooltip\"\n        data-test=\"stash-tooltip\"\n        class=\"stash-tooltip tw-pointer-events-none tw-z-screen tw-flex tw-w-[148px] tw-flex-col tw-items-center tw-whitespace-normal tw-rounded tw-bg-ice-900 tw-p-3 tw-text-center tw-text-xs tw-text-white tw-opacity-0 tw-shadow tw-transition-opacity\"\n        role=\"tooltip\"\n        :style=\"{\n          ...floatingStyles,\n          opacity: open ? 0.95 : 0,\n        }\"\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"content\">{{ props.text }}</slot>\n        <slot name=\"secondaryIcon\"></slot>\n        <div\n          ref=\"floatingArrow\"\n          class=\"stash-tooltip__arrow tw-absolute tw-z-behind tw-size-[12px] tw-rotate-45 tw-bg-ice-900\"\n          :style=\"arrowStyles\"\n        ></div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["ARROW_OFFSET_PX","OFFSET_DISTANCE_PX","SIDE_MAP","props","__props","anchor","ref","floatingArrow","tooltip","isOutside","useMouseInElement","open","computed","placementSetting","floatingStyles","middlewareData","placement","useFloating","autoUpdate","flip","shift","offset","arrow","arrowStyles","arrowPosition","_a","_b"],"mappings":";;;;;;GAOQA,IAAkB,GAClBC,IAAqB;;;;;;;;;;;AAE3B,UAAMC,IAA6C;AAAA,MACjD,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,GA2DFC,IAAQC,GASRC,IAASC,EAAwB,IAAI,GACrCC,IAAgBD,EAAwB,IAAI,GAC5CE,IAAUF,EAAwB,IAAI,GAEtC,EAAE,WAAAG,EAAA,IAAcC,EAAkBL,CAAM,GAExCM,IAAOC,EAAS,MAAM,CAACT,EAAM,eAAe,CAACM,EAAU,SAASN,EAAM,OAAO,GAC7EU,IAAmBD,EAAS,MAAMT,EAAM,IAAI,GAE5C,EAAE,gBAAAW,GAAgB,gBAAAC,GAAgB,WAAAC,MAAcC,EAAYZ,GAAQG,GAAS;AAAA,MACjF,sBAAsBU;AAAA,MACtB,WAAWL;AAAA,MACX,YAAY;AAAA,QACVM,EAAA;AAAA,QACAC,EAAM,EAAE,SAAS,GAAG;AAAA,QACpBC,EAAOpB,CAAkB;AAAA,QACzBqB,EAAM,EAAE,SAASf,GAAe,SAAS,GAAG;AAAA,MAAA;AAAA,IAC9C,CACD,GAEKgB,IAAcX,EAAS,MAAM;;AACjC,YAAMY,IAAgBtB,EAASc,EAAU,KAAK;AAE9C,aAAO;AAAA,QACL,QAAMS,IAAAV,EAAe,MAAM,UAArB,gBAAAU,EAA4B,MAAK,OAAO,GAAGV,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACpF,OAAKW,IAAAX,EAAe,MAAM,UAArB,gBAAAW,EAA4B,MAAK,OAAO,GAAGX,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACnF,CAACS,CAAa,GAAG,IAAIxB,CAAe;AAAA,MAAA;AAAA,IAExC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}