@leaflink/stash 44.0.0-beta.7 → 44.0.0-beta.8

package/dist/SelectStatus.js

@@ -22,8 +22,8 @@ import "./clickoutside.js";
 import "./MenusPlugin-5e93f0a5.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
-import "./Field.vue_vue_type_script_setup_true_lang-4483019d.js";
-import "./Label.vue_vue_type_script_setup_true_lang-2de35913.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
 const j = { class: "tw-mr-6 tw-truncate" }, E = {
   key: 1,

package/dist/Switch.js

@@ -1,8 +1,8 @@
-import { defineComponent as v, useAttrs as x, useSlots as k, computed as c, openBlock as d, createElementBlock as i, normalizeClass as a, unref as n, createElementVNode as l, mergeProps as g, withDirectives as y, vModelCheckbox as S, toDisplayString as u, createCommentVNode as p, renderSlot as I, createTextVNode as A, pushScopeId as C, popScopeId as V } from "vue";
-import B from "@leaflink/snitch";
+import { defineComponent as k, useAttrs as v, useSlots as y, useCssModule as g, computed as n, openBlock as i, createElementBlock as d, normalizeClass as s, unref as a, createElementVNode as l, mergeProps as C, withDirectives as S, vModelCheckbox as A, toDisplayString as u, createCommentVNode as p, renderSlot as V, createTextVNode as B } from "vue";
+import M from "@leaflink/snitch";
 import T from "lodash-es/uniqueId";
-import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
-const N = (s) => (C("data-v-148dbe3f"), s = s(), V(), s), D = ["data-test"], q = ["for"], z = /* @__PURE__ */ N(() => /* @__PURE__ */ l("span", { class: "stash-switch__control tw-absolute tw-left-0 tw-h-5 tw-w-5 tw-rounded-[10px] tw-border tw-border-solid tw-border-ice-500 tw-bg-white tw-shadow" }, null, -1)), M = ["id", "disabled", "name", "value"], P = /* @__PURE__ */ v({
+import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
+const E = ["data-test"], N = ["for"], D = ["id", "disabled", "name", "value"], I = /* @__PURE__ */ k({
   name: "ll-switch",
   inheritAttrs: !1,
   __name: "Switch",
@@ -16,74 +16,81 @@ const N = (s) => (C("data-v-148dbe3f"), s = s(), V(), s), D = ["data-test"], q =
     value: { default: "" }
   },
   emits: ["update:checked"],
-  setup(s, { emit: b }) {
-    const t = s, o = x(), f = k();
-    if (typeof t.value == "boolean" && B.warn("Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true"), o.onChange)
+  setup(f, { emit: b }) {
+    const t = f, o = v(), m = y(), c = g();
+    if (typeof t.value == "boolean" && M.warn("Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true"), o.onChange)
       throw new Error("ll-switch: use the @update:checked event instead of @change.");
-    const m = c(() => {
+    const _ = n(() => {
       const e = { ...o };
       return delete e["data-test"], delete e.class, e;
-    }), r = c({
+    }), r = n({
       get() {
         return t.checked;
       },
       set(e) {
         b("update:checked", e);
       }
-    }), w = c(() => t.id || T("switch-"));
-    return (e, h) => (d(), i("div", {
-      class: a(["stash-switch", n(o).class]),
-      "data-test": n(o)["data-test"] || "stash-switch"
+    }), w = n(() => t.id || T("switch-"));
+    return (e, h) => (i(), d("div", {
+      class: s(["stash-switch", a(o).class]),
+      "data-test": a(o)["data-test"] || "stash-switch"
     }, [
-      l("label", g({
+      l("label", C({
         for: w.value,
         class: [{ "tw-pointer-events-none": t.disabled }, "tw-flex tw-cursor-pointer"],
         "data-test": "stash-switch|label"
-      }, m.value), [
+      }, _.value), [
         l("span", {
-          class: a(["tw-relative tw-inline-block tw-h-5 tw-w-[34px] tw-min-w-[34px]", { "is-active": t.checked }])
+          class: s(["tw-relative tw-inline-block tw-h-5 tw-w-[34px] tw-min-w-[34px]", { [a(c).active]: t.checked }])
         }, [
           l("span", {
-            class: a(["stash-switch__track tw-absolute tw-top-0.5 tw-h-4 tw-w-full tw-rounded-[10px]", t.disabled ? "tw-bg-ice-500" : "tw-bg-ice-700"])
+            class: s(["stash-switch__track tw-absolute tw-top-0.5 tw-h-4 tw-w-full tw-rounded-[10px]", [a(c).track, t.disabled ? "tw-bg-ice-500" : "tw-bg-ice-700"]])
           }, null, 2),
-          z
+          l("span", {
+            class: s(["stash-switch__control tw-absolute tw-left-0 tw-h-5 tw-w-5 tw-rounded-[10px] tw-border tw-border-solid tw-border-ice-500 tw-bg-white tw-shadow", a(c).control])
+          }, null, 2)
         ], 2),
-        y(l("input", {
+        S(l("input", {
           id: w.value,
-          "onUpdate:modelValue": h[0] || (h[0] = (_) => r.value = _),
+          "onUpdate:modelValue": h[0] || (h[0] = (x) => r.value = x),
           type: "checkbox",
           disabled: t.disabled,
           name: t.name,
           tabindex: "0",
           value: e.value,
           class: "tw-sr-only"
-        }, null, 8, M), [
-          [S, r.value]
+        }, null, 8, D), [
+          [A, r.value]
         ]),
-        t.label ? (d(), i("span", {
+        t.label ? (i(), d("span", {
           key: 0,
-          class: a([{
+          class: s([{
             "tw-text-ice-700": !t.checked && !t.disabled,
             "tw-text-ice-900": t.checked,
             "tw-text-ice-500": t.disabled
           }, "tw-relative tw-top-px tw-ml-1.5"]),
           "data-test": "stash-switch|label-text"
         }, u(t.label), 3)) : p("", !0)
-      ], 16, q),
-      t.hintText || n(f).hint ? (d(), i("span", {
+      ], 16, N),
+      t.hintText || a(m).hint ? (i(), d("span", {
         key: 0,
-        class: a(["tw-ml-[40px] tw-mt-1.5 tw-block tw-whitespace-pre-line tw-text-xs", { "tw-text-ice-500": t.disabled }]),
+        class: s(["tw-ml-[40px] tw-mt-1.5 tw-block tw-whitespace-pre-line tw-text-xs", { "tw-text-ice-500": t.disabled }]),
         "data-test": "stash-switch|hint"
       }, [
-        I(e.$slots, "hint", {}, () => [
-          A(u(t.hintText), 1)
-        ], !0)
+        V(e.$slots, "hint", {}, () => [
+          B(u(t.hintText), 1)
+        ])
       ], 2)) : p("", !0)
-    ], 10, D));
+    ], 10, E));
   }
-});
-const G = /* @__PURE__ */ E(P, [["__scopeId", "data-v-148dbe3f"]]);
+}), $ = "_active_yfjx8_2", q = "_track_yfjx8_2", z = "_control_yfjx8_6", P = {
+  active: $,
+  track: q,
+  control: z
+}, U = {
+  $style: P
+}, K = /* @__PURE__ */ j(I, [["__cssModules", U]]);
 export {
-  G as default
+  K as default
 };
 //# sourceMappingURL=Switch.js.map

package/dist/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../src/components/Switch/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  export interface SwitchProps {\n    /**\n     * The current checked value, can be a boolean or an array of values\n     */\n    checked?: boolean | Array<string | number>;\n    /**\n     * Prevent the user from changing the switch state.\n     */\n    disabled?: boolean;\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n    /**\n     * Unique ID for the switch, required for accessibility purposes\n     */\n    id?: string;\n    /**\n     * Label text to display with switch\n     */\n    label?: string;\n    /**\n     * HTML name property\n     */\n    name?: string;\n    /**\n     * Value associated with switch when it is `checked`.  This value is\n     * used to compare against `checked` property when passed as an array.\n     */\n    value?: string | number;\n  }\n\n  defineOptions({\n    name: 'll-switch',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<SwitchProps>(), {\n    checked: false,\n    disabled: false,\n    hintText: '',\n    id: undefined,\n    label: '',\n    name: '',\n    value: '',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n\n  const emit =\n    defineEmits<{\n      (e: 'update:checked', value: SwitchProps['checked']): void;\n    }>();\n\n  if (typeof props.value === 'boolean') {\n    logger.warn('Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true');\n  }\n\n  if (attrs.onChange) {\n    throw new Error('ll-switch: use the @update:checked event instead of @change.');\n  }\n\n  const switchAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs['data-test'];\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const internalValue = computed({\n    get() {\n      return props.checked;\n    },\n    set(value) {\n      emit('update:checked', value);\n    },\n  });\n\n  const switchId = computed(() => props.id || uniqueId('switch-'));\n</script>\n\n<template>\n  <div class=\"stash-switch\" :class=\"attrs['class']\" :data-test=\"attrs['data-test'] || 'stash-switch'\">\n    <label\n      :for=\"switchId\"\n      :class=\"{ 'tw-pointer-events-none': props.disabled }\"\n      class=\"tw-flex tw-cursor-pointer\"\n      data-test=\"stash-switch|label\"\n      v-bind=\"switchAttrs\"\n    >\n      <span\n        class=\"tw-relative tw-inline-block tw-h-5 tw-w-[34px] tw-min-w-[34px]\"\n        :class=\"{ 'is-active': props.checked }\"\n      >\n        <span\n          class=\"stash-switch__track tw-absolute tw-top-0.5 tw-h-4 tw-w-full tw-rounded-[10px]\"\n          :class=\"props.disabled ? 'tw-bg-ice-500' : 'tw-bg-ice-700'\"\n        ></span>\n        <span\n          class=\"\n            stash-switch__control\n            tw-absolute\n            tw-left-0\n            tw-h-5\n            tw-w-5\n            tw-rounded-[10px]\n            tw-border\n            tw-border-solid\n            tw-border-ice-500\n            tw-bg-white\n            tw-shadow\n          \"\n        ></span>\n      </span>\n      <input\n        :id=\"switchId\"\n        v-model=\"internalValue\"\n        type=\"checkbox\"\n        :disabled=\"props.disabled\"\n        :name=\"props.name\"\n        tabindex=\"0\"\n        :value=\"value\"\n        class=\"tw-sr-only\"\n      />\n      <span\n        v-if=\"props.label\"\n        :class=\"{\n          'tw-text-ice-700': !props.checked && !props.disabled,\n          'tw-text-ice-900': props.checked,\n          'tw-text-ice-500': props.disabled,\n        }\"\n        class=\"tw-relative tw-top-px tw-ml-1.5\"\n        data-test=\"stash-switch|label-text\"\n        >{{ props.label }}</span\n      >\n    </label>\n    <span\n      v-if=\"props.hintText || slots.hint\"\n      class=\"tw-ml-[40px] tw-mt-1.5 tw-block tw-whitespace-pre-line tw-text-xs\"\n      :class=\"{ 'tw-text-ice-500': props.disabled }\"\n      data-test=\"stash-switch|hint\"\n    >\n      <!-- @slot for displaying hint text -->\n      <slot name=\"hint\">{{ props.hintText }}</slot>\n    </span>\n  </div>\n</template>\n\n<style scoped>\n  .is-active .stash-switch__track {\n    @apply tw-bg-blue-500;\n  }\n\n  .stash-switch__control {\n    transition: left 0.2s ease-in-out;\n\n    .is-active & {\n      @apply tw-left-3.5; /* track width - switch width */\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","props","logger","switchAttrs","computed","tempAttrs","internalValue","value","emit","switchId","uniqueId"],"mappings":";;;;;;;;;;;;;;;;;;;iBAoDQA,IAAQC,KACRC,IAAQC;AAWd,QAJI,OAAOC,EAAM,SAAU,aACzBC,EAAO,KAAK,6FAA6F,GAGvGL,EAAM;AACF,YAAA,IAAI,MAAM,8DAA8D;AAG1E,UAAAM,IAAcC,EAAS,MAAM;AAC3B,YAAAC,IAAY,EAAE,GAAGR;AAEvB,oBAAOQ,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOH,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAC,EAAK,kBAAkBD,CAAK;AAAA,MAC9B;AAAA,IAAA,CACD,GAEKE,IAAWL,EAAS,MAAMH,EAAM,MAAMS,EAAS,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Switch.js","sources":["../src/components/Switch/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useCssModule, useSlots } from 'vue';\n\n  export interface SwitchProps {\n    /**\n     * The current checked value, can be a boolean or an array of values\n     */\n    checked?: boolean | Array<string | number>;\n    /**\n     * Prevent the user from changing the switch state.\n     */\n    disabled?: boolean;\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n    /**\n     * Unique ID for the switch, required for accessibility purposes\n     */\n    id?: string;\n    /**\n     * Label text to display with switch\n     */\n    label?: string;\n    /**\n     * HTML name property\n     */\n    name?: string;\n    /**\n     * Value associated with switch when it is `checked`.  This value is\n     * used to compare against `checked` property when passed as an array.\n     */\n    value?: string | number;\n  }\n\n  defineOptions({\n    name: 'll-switch',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<SwitchProps>(), {\n    checked: false,\n    disabled: false,\n    hintText: '',\n    id: undefined,\n    label: '',\n    name: '',\n    value: '',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const emit =\n    defineEmits<{\n      (e: 'update:checked', value: SwitchProps['checked']): void;\n    }>();\n\n  if (typeof props.value === 'boolean') {\n    logger.warn('Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true');\n  }\n\n  if (attrs.onChange) {\n    throw new Error('ll-switch: use the @update:checked event instead of @change.');\n  }\n\n  const switchAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs['data-test'];\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const internalValue = computed({\n    get() {\n      return props.checked;\n    },\n    set(value) {\n      emit('update:checked', value);\n    },\n  });\n\n  const switchId = computed(() => props.id || uniqueId('switch-'));\n</script>\n\n<template>\n  <div class=\"stash-switch\" :class=\"attrs['class']\" :data-test=\"attrs['data-test'] || 'stash-switch'\">\n    <label\n      :for=\"switchId\"\n      :class=\"{ 'tw-pointer-events-none': props.disabled }\"\n      class=\"tw-flex tw-cursor-pointer\"\n      data-test=\"stash-switch|label\"\n      v-bind=\"switchAttrs\"\n    >\n      <span\n        class=\"tw-relative tw-inline-block tw-h-5 tw-w-[34px] tw-min-w-[34px]\"\n        :class=\"{ [classes.active]: props.checked }\"\n      >\n        <span\n          class=\"stash-switch__track tw-absolute tw-top-0.5 tw-h-4 tw-w-full tw-rounded-[10px]\"\n          :class=\"[classes.track, props.disabled ? 'tw-bg-ice-500' : 'tw-bg-ice-700']\"\n        ></span>\n        <span\n          class=\"\n            stash-switch__control\n            tw-absolute\n            tw-left-0\n            tw-h-5\n            tw-w-5\n            tw-rounded-[10px]\n            tw-border\n            tw-border-solid\n            tw-border-ice-500\n            tw-bg-white\n            tw-shadow\n          \"\n          :class=\"classes.control\"\n        ></span>\n      </span>\n      <input\n        :id=\"switchId\"\n        v-model=\"internalValue\"\n        type=\"checkbox\"\n        :disabled=\"props.disabled\"\n        :name=\"props.name\"\n        tabindex=\"0\"\n        :value=\"value\"\n        class=\"tw-sr-only\"\n      />\n      <span\n        v-if=\"props.label\"\n        :class=\"{\n          'tw-text-ice-700': !props.checked && !props.disabled,\n          'tw-text-ice-900': props.checked,\n          'tw-text-ice-500': props.disabled,\n        }\"\n        class=\"tw-relative tw-top-px tw-ml-1.5\"\n        data-test=\"stash-switch|label-text\"\n        >{{ props.label }}</span\n      >\n    </label>\n    <span\n      v-if=\"props.hintText || slots.hint\"\n      class=\"tw-ml-[40px] tw-mt-1.5 tw-block tw-whitespace-pre-line tw-text-xs\"\n      :class=\"{ 'tw-text-ice-500': props.disabled }\"\n      data-test=\"stash-switch|hint\"\n    >\n      <!-- @slot for displaying hint text -->\n      <slot name=\"hint\">{{ props.hintText }}</slot>\n    </span>\n  </div>\n</template>\n\n<style module>\n  .active .track {\n    @apply tw-bg-blue-500;\n  }\n\n  .control {\n    transition: left 0.2s ease-in-out;\n\n    .active & {\n      @apply tw-left-3.5; /* track width - switch width */\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","props","logger","switchAttrs","computed","tempAttrs","internalValue","value","emit","switchId","uniqueId"],"mappings":";;;;;;;;;;;;;;;;;;;iBAoDQA,IAAQC,KACRC,IAAQC,KACRC,IAAUC;AAWhB,QAJI,OAAOC,EAAM,SAAU,aACzBC,EAAO,KAAK,6FAA6F,GAGvGP,EAAM;AACF,YAAA,IAAI,MAAM,8DAA8D;AAG1E,UAAAQ,IAAcC,EAAS,MAAM;AAC3B,YAAAC,IAAY,EAAE,GAAGV;AAEvB,oBAAOU,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOH,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAC,EAAK,kBAAkBD,CAAK;AAAA,MAC9B;AAAA,IAAA,CACD,GAEKE,IAAWL,EAAS,MAAMH,EAAM,MAAMS,EAAS,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Table.js

@@ -3,28 +3,28 @@ import "lodash-es/cloneDeep";
 import { M as v } from "./Module.keys-2cc7d830.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import { D as g } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import N from "./EmptyState.js";
 import D from "./Loading.js";
 import h from "./TableCell.js";
 import E from "./TableRow.js";
-import { T as I } from "./Table.keys-75e99266.js";
+import { T as I } from "./Table.keys-cf93df19.js";
 import { S as V } from "./misc-d0eec261.js";
 import "./locale.js";
 import "lodash-es/get";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
+import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
 import "@leaflink/snitch";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./Checkbox.js";
 import "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
 import "./Button.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
-import "./Expand.vue_vue_type_script_setup_true_lang-b6a57ae9.js";
+import "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
 var A = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(A || {}), O = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))(O || {});
 const J = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ut = /* @__PURE__ */ T({
   __name: "Table",

package/dist/Table.keys-cf93df19.js

@@ -0,0 +1,27 @@
+const o = "_root_9c99g_2", t = {
+  root: o,
+  "layout--scroll": "_layout--scroll_9c99g_6",
+  "has-actions": "_has-actions_9c99g_12",
+  "layout--stack": "_layout--stack_9c99g_16",
+  "is-control": "_is-control_9c99g_28",
+  "root--density-comfortable": "_root--density-comfortable_9c99g_52"
+}, _ = "_root_ngiw1_2", n = {
+  root: _,
+  "is-expandable": "_is-expandable_ngiw1_9",
+  "root--hidden-divider": "_root--hidden-divider_ngiw1_14",
+  "is-expanded": "_is-expanded_ngiw1_14",
+  "layout--scroll": "_layout--scroll_ngiw1_22",
+  "layout--stack": "_layout--stack_ngiw1_36",
+  "row-selection-checkbox": "_row-selection-checkbox_ngiw1_56",
+  "row-control-cell": "_row-control-cell_ngiw1_62",
+  "row-expansion-content": "_row-expansion-content_ngiw1_73",
+  "row-expansion": "_row-expansion_ngiw1_73"
+}, c = Object.freeze({
+  key: Symbol("TABLE_INJECTION_KEY")
+});
+export {
+  c as T,
+  n as a,
+  t as s
+};
+//# sourceMappingURL=Table.keys-cf93df19.js.map

package/dist/{Table.keys-75e99266.js.map → Table.keys-cf93df19.js.map}

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

package/dist/TableCell.js

@@ -2,15 +2,15 @@ import { defineComponent as p, useCssModule as d, inject as u, openBlock as a, c
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "lodash-es/get";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
-import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
-import { T as y, s as C } from "./Table.keys-75e99266.js";
+import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
+import { T as y, s as C } from "./Table.keys-cf93df19.js";
 import "@leaflink/snitch";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
 const T = {
   key: 0,

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: var(--border-radius);\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(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell), :global(.stash-table-row__toggle-expansion-cell)) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBAoBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableCellProps {\n    /**\n     * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n     */\n    isControl?: boolean;\n    /**\n     * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n     */\n    mobileHeader?: string;\n  }\n\n  const props = withDefaults(defineProps<TableCellProps>(), {\n    isControl: false,\n    mobileHeader: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableCell must be used within a Table component');\n  }\n\n  const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n  <td\n    class=\"stash-table-cell\"\n    data-test=\"stash-table-cell\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'tw-p-3': layout === 'scroll',\n        'tw-p-1.5': layout === 'stack',\n        'lg:tw-p-3': density === 'compact',\n        'lg:tw-px-3 lg:tw-py-6': density === 'comfortable',\n        [classes['is-control']]: props.isControl,\n      },\n    ]\"\n  >\n    <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden\">\n      {{ props.mobileHeader }}\n    </div>\n    <!-- @slot default -->\n    <slot></slot>\n  </td>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  .layout--scroll {\n    background-color: var(--color-white);\n    border: none;\n    border-bottom: 1px solid var(--color-ice-200);\n  }\n\n  .layout--scroll.has-actions:last-of-type {\n    text-align: center;\n  }\n\n  .layout--stack {\n    background-color: var(--color-ice-100);\n    border-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .layout--stack.has-actions:last-of-type {\n    background-color: transparent;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  .layout--stack.is-control {\n    background-color: transparent;\n  }\n\n  /* On large screens, layout--stack should match layout--scroll */\n  @media screen('lg') {\n    .layout--stack {\n      background-color: var(--color-white);\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: initial;\n    }\n\n    .layout--stack.has-actions:last-of-type {\n      background-color: var(--color-white);\n      position: initial;\n      right: initial;\n      text-align: center;\n      top: initial;\n    }\n\n    .layout--stack.is-control {\n      background-color: var(--color-white);\n    }\n\n    .root--density-comfortable:last-of-type:not(.has-actions) {\n      padding-right: 24px;\n    }\n\n    .root--density-comfortable:first-of-type:not(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell), :global(.stash-table-row__toggle-expansion-cell)) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBAoBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderCell.js

@@ -1,39 +1,39 @@
-import { defineComponent as k, useCssModule as T, inject as p, computed as m, openBlock as r, createElementBlock as _, normalizeClass as s, unref as t, createElementVNode as x, renderSlot as E, createBlock as w, createCommentVNode as l } from "vue";
+import { defineComponent as k, useCssModule as T, inject as u, computed as p, openBlock as r, createElementBlock as _, normalizeClass as s, unref as t, createElementVNode as x, renderSlot as E, createBlock as w, createCommentVNode as n } from "vue";
 import "lodash-es/cloneDeep";
 import f from "./Icon.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "lodash-es/get";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
-import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
-import { T as q } from "./Table.keys-75e99266.js";
+import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
+import { T as N } from "./Table.keys-cf93df19.js";
 import "lodash-es/uniqueId";
 import "@leaflink/snitch";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
-import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
+import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const S = {
+const A = {
   key: 0,
   class: "tw-relative tw-h-4 tw-w-3"
-}, A = /* @__PURE__ */ k({
+}, B = /* @__PURE__ */ k({
   __name: "TableHeaderCell",
   props: {
     sortId: { default: "" }
   },
   setup(h) {
-    const a = h, e = T(), n = p(q.key);
-    if (!n)
+    const a = h, e = T(), l = u(N.key);
+    if (!l)
       throw new Error("TableHeaderCell must be used within a Table component");
-    const { density: i, hasActions: y } = n, { currentSortId: v, currentSortOrder: u, updateCurrentSort: d } = p(
+    const { density: i, hasActions: y } = l, { currentSortId: v, currentSortOrder: d, updateCurrentSort: m } = u(
       b.key,
       b.defaults
-    ), c = m(() => !!a.sortId), o = m(() => v.value === a.sortId);
+    ), c = p(() => !!a.sortId), o = p(() => v.value === a.sortId);
     function C() {
-      c.value && typeof d == "function" && d(a.sortId, { shouldEmit: !0 });
+      c.value && typeof m == "function" && m(a.sortId, { shouldEmit: !0 });
     }
-    return (I, M) => (r(), _("th", {
+    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,
         {
@@ -52,36 +52,36 @@ const S = {
         class: s(["tw-flex tw-justify-between", t(e)["content-wrapper"]])
       }, [
         E(I.$slots, "default"),
-        c.value ? (r(), _("div", S, [
-          !o.value || t(u) === "asc" ? (r(), w(f, {
+        c.value ? (r(), _("div", A, [
+          !o.value || t(d) === "asc" ? (r(), w(f, {
             key: 0,
             class: s(["tw-absolute tw-text-ice-700", [t(e).caret, t(e)["caret-up"]]]),
             "data-test": "icon|caret-up",
             name: "caret-up",
             size: "dense"
-          }, null, 8, ["class"])) : l("", !0),
-          !o.value || t(u) === "desc" ? (r(), w(f, {
+          }, null, 8, ["class"])) : n("", !0),
+          !o.value || t(d) === "desc" ? (r(), w(f, {
             key: 1,
             class: s(["tw-absolute tw-text-ice-700", [t(e).caret, t(e)["caret-down"]]]),
             "data-test": "icon|caret-down",
             name: "caret-down",
             size: "dense"
-          }, null, 8, ["class"])) : l("", !0)
-        ])) : l("", !0)
+          }, null, 8, ["class"])) : n("", !0)
+        ])) : n("", !0)
       ], 2)
     ], 2));
   }
-}), B = "_root_plqtu_2", j = "_caret_plqtu_18", z = {
-  root: B,
-  "has-actions": "_has-actions_plqtu_14",
-  "content-wrapper": "_content-wrapper_plqtu_14",
-  "caret-up": "_caret-up_plqtu_18",
-  "caret-down": "_caret-down_plqtu_22",
-  caret: j,
-  "root--density-comfortable": "_root--density-comfortable_plqtu_31"
-}, H = {
-  $style: z
-}, Y = /* @__PURE__ */ N(A, [["__cssModules", H]]);
+}), j = "_root_rrm9i_2", z = "_caret_rrm9i_18", H = {
+  root: j,
+  "has-actions": "_has-actions_rrm9i_14",
+  "content-wrapper": "_content-wrapper_rrm9i_14",
+  "caret-up": "_caret-up_rrm9i_18",
+  "caret-down": "_caret-down_rrm9i_22",
+  caret: z,
+  "root--density-comfortable": "_root--density-comfortable_rrm9i_31"
+}, M = {
+  $style: H
+}, Y = /* @__PURE__ */ S(B, [["__cssModules", M]]);
 export {
   Y as default
 };

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=\"\n      stash-table-header-cell\n      tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900\n    \"\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 and (width >= 961px) {\n    .root--density-comfortable:last-of-type {\n      padding-right: 24px;\n    }\n\n    .root--density-comfortable:first-of-type:not(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell)) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","props","isActiveSort","onRootClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGnE,UAAA,EAAE,SAAAG,GAAS,YAAAC,EAAe,IAAAJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAN;AAAA,MAC7DO,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAEhBC,IAAaC,EAAS,MAAM,CAAC,CAACC,EAAM,MAAM,GAC1CC,IAAeF,EAAS,MAAML,EAAc,UAAUM,EAAM,MAAM;AAExE,aAASE,IAAc;AACrB,MAAIJ,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBI,EAAM,QAAQ,EAAE,YAAY,GAAM,CAAA;AAAA,IAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, inject, useCssModule } from 'vue';\n\n  import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableHeaderCellProps {\n    /**\n     * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n     * For example: `'product_name'` (with no leading dash/hyphen).\n     */\n    sortId?: SortValueDeserialized['id'];\n  }\n\n  const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n    sortId: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableHeaderCell must be used within a Table component');\n  }\n\n  const { density, hasActions } = tableInjection;\n\n  // #region sorting\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n  const isSortable = computed(() => !!props.sortId);\n  const isActiveSort = computed(() => currentSortId.value === props.sortId);\n\n  function onRootClick() {\n    if (isSortable.value && typeof updateCurrentSort === 'function') {\n      updateCurrentSort(props.sortId, { shouldEmit: true });\n    }\n  }\n  // #endregion sorting\n</script>\n\n<template>\n  <th\n    class=\"\n      stash-table-header-cell\n      tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900\n    \"\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(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell)) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","props","isActiveSort","onRootClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGnE,UAAA,EAAE,SAAAG,GAAS,YAAAC,EAAe,IAAAJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAN;AAAA,MAC7DO,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAEhBC,IAAaC,EAAS,MAAM,CAAC,CAACC,EAAM,MAAM,GAC1CC,IAAeF,EAAS,MAAML,EAAc,UAAUM,EAAM,MAAM;AAExE,aAASE,IAAc;AACrB,MAAIJ,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBI,EAAM,QAAQ,EAAE,YAAY,GAAM,CAAA;AAAA,IAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderRow.js

@@ -4,17 +4,17 @@ import C from "./Checkbox.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
-import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
-import { T as R } from "./Table.keys-75e99266.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
+import { T as R } from "./Table.keys-cf93df19.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import m from "./TableHeaderCell.js";
 import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "@leaflink/snitch";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 const B = {
@@ -27,13 +27,13 @@ const B = {
     someRowsSelected: { type: Boolean, default: !1 }
   },
   emits: ["select"],
-  setup(p, { emit: d }) {
-    const l = p, a = _(R.key);
+  setup(d, { emit: p }) {
+    const l = d, a = _(R.key);
     if (!a)
       throw new Error("TableHeaderRow must be used within a Table component");
     const { hasCustomExpandToggle: w, isExpandable: h, isSelectable: u } = a, c = b(0);
     function n() {
-      d("select"), c.value++;
+      p("select"), c.value++;
     }
     return (e, I) => (t(), k("tr", B, [
       o(u) ? (t(), s(m, {
@@ -62,8 +62,8 @@ const B = {
     ]));
   }
 }), $ = {
-  "row-selection-checkbox": "_row-selection-checkbox_s1phl_2",
-  "row-control-cell": "_row-control-cell_s1phl_8"
+  "row-selection-checkbox": "_row-selection-checkbox_1eq6o_2",
+  "row-control-cell": "_row-control-cell_1eq6o_8"
 }, H = {
   $style: $
 }, W = /* @__PURE__ */ S(E, [["__cssModules", H]]);

package/dist/TableHeaderRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'select'): void;\n    }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const checkboxKey = ref(0);\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n</script>\n\n<template>\n  <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <TableHeaderCell\n      v-if=\"isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n    >\n      <Checkbox\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: var(--ll-space-3);\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","checkboxKey","ref","onSelect","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExDM,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODH,EAAA;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'select'): void;\n    }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const checkboxKey = ref(0);\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n</script>\n\n<template>\n  <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <TableHeaderCell\n      v-if=\"isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n    >\n      <Checkbox\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","checkboxKey","ref","onSelect","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExDM,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODH,EAAA;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableRow.js

@@ -3,21 +3,21 @@ import J from "lodash-es/uniqueId";
 import { t as b } from "./locale.js";
 import L from "./Checkbox.js";
 import { _ as O } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
-import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-b6a57ae9.js";
+import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
 import "lodash-es/cloneDeep";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
-import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
+import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
 import T from "./TableCell.js";
-import { T as G, a as H } from "./Table.keys-75e99266.js";
+import { T as G, a as H } from "./Table.keys-cf93df19.js";
 import { _ as K } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "@leaflink/snitch";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./Button.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 const Q = /* @__PURE__ */ A({

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, useSlots, watch } from 'vue';\n\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\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  });\n\n  const emit =\n    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 = useSlots();\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 && !!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      },\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]\"\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  </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\"\n    v-bind=\"attrs\"\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: var(--border-radius);\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: var(--ll-space-3);\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: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    margin-bottom: var(--ll-space-3);\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":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,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, useSlots, watch } from 'vue';\n\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\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  });\n\n  const emit =\n    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 = useSlots();\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 && !!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      },\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]\"\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  </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\"\n    v-bind=\"attrs\"\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    min-height: theme('spacing.6');\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":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}