@leaflink/stash 44.0.0-beta.6 → 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/Tab.js

@@ -1,9 +1,9 @@
-import { _ as o } from "./Tab.vue_vue_type_script_setup_true_lang-4a40f015.js";
+import { _ as o } from "./Tab.vue_vue_type_script_setup_true_lang-69d1b046.js";
 import "vue";
 import "@leaflink/snitch";
 import "./Badge.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js";
+import "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
 import "lodash-es/debounce";
 import "lodash-es/uniqueId";
 import "./constants.js";

package/dist/{Tab.vue_vue_type_script_setup_true_lang-4a40f015.js → Tab.vue_vue_type_script_setup_true_lang-69d1b046.js}

@@ -1,7 +1,7 @@
 import { defineComponent as x, inject as T, computed as o, onMounted as k, nextTick as g, toRefs as u, openBlock as c, createElementBlock as y, normalizeClass as _, unref as n, withKeys as C, createBlock as P, resolveDynamicComponent as B, mergeProps as E, withCtx as b, createElementVNode as $, createVNode as N, renderSlot as A } from "vue";
 import I from "@leaflink/snitch";
 import j from "./Badge.js";
-import { T as D } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js";
+import { T as D } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
 const L = ["id", "aria-selected", "aria-controls", "aria-disabled"], V = { class: "tw-mt-0.5" }, J = /* @__PURE__ */ x({
   __name: "Tab",
   props: {
@@ -88,4 +88,4 @@ const L = ["id", "aria-selected", "aria-controls", "aria-disabled"], V = { class
 export {
   J as _
 };
-//# sourceMappingURL=Tab.vue_vue_type_script_setup_true_lang-4a40f015.js.map
+//# sourceMappingURL=Tab.vue_vue_type_script_setup_true_lang-69d1b046.js.map

package/dist/{Tab.vue_vue_type_script_setup_true_lang-4a40f015.js.map → Tab.vue_vue_type_script_setup_true_lang-69d1b046.js.map}

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

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-1ebe4ecb.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-5fe03d51.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-1ebe4ecb.js.map → Table.keys-cf93df19.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Table.keys-1ebe4ecb.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-1ebe4ecb.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(.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-1ebe4ecb.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-1ebe4ecb.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}