@leaflink/stash 49.3.3 → 49.3.4

package/dist/Module.js

@@ -1,9 +1,9 @@
-import { defineComponent as i, onMounted as l, provide as s, computed as d, openBlock as p, createBlock as b, normalizeClass as u, unref as e, withCtx as m, renderSlot as c } from "vue";
-import o from "@leaflink/snitch";
-import { M as w } from "./Module.keys-2cc7d830.js";
-import { _ as v } from "./Box.vue_vue_type_script_setup_true_lang-69e5176b.js";
+import { defineComponent as n, onMounted as l, provide as s, computed as d, openBlock as p, createBlock as b, normalizeClass as u, unref as e, withCtx as m, renderSlot as c } from "vue";
+import r from "@leaflink/snitch";
+import { M as v } from "./Module.keys-2cc7d830.js";
+import { _ as w } from "./Box.vue_vue_type_script_setup_true_lang-69e5176b.js";
 import { M as t } from "./Module.types-3f78f2a0.js";
-const y = /* @__PURE__ */ i({
+const y = /* @__PURE__ */ n({
   name: "ll-module",
   __name: "Module",
   props: {
@@ -13,13 +13,13 @@ const y = /* @__PURE__ */ i({
     disableElevation: { type: Boolean },
     radius: {}
   },
-  setup(r) {
-    const a = r;
+  setup(o) {
+    const a = o;
     return l(() => {
-      a.variant === "card" && o.warn('Card Modules are no longer a thing. You\'re probably looking for `<RadioGroup variant="card">`.'), a.variant === "list" && o.warn("Only used with deprecated ListView component. Use `table` variant with `Table` component instead.");
-    }), s(w.key, { variant: d(() => a.variant) }), (n, f) => (p(), b(v, {
+      a.variant === "card" && r.warn('Card Modules are no longer a thing. You\'re probably looking for `<RadioGroup variant="card">`.'), a.variant === "list" && r.warn("Only used with deprecated ListView component. Use `table` variant with `Table` component instead.");
+    }), s(v.key, { variant: d(() => a.variant) }), (i, f) => (p(), b(w, {
       class: u(["stash-module tw-flex tw-flex-col", {
-        "tw-bg-transparent tw-shadow-none lg:tw-shadow": a.variant === e(t).Table,
+        "tw-bg-transparent tw-shadow": a.variant === e(t).Table,
         "tw-border tw-border-ice-500": a.variant === e(t).Card,
         "tw-mb-6 tw-bg-transparent tw-shadow-none lg:tw-shadow": a.variant === e(t).List
       }]),
@@ -29,14 +29,14 @@ const y = /* @__PURE__ */ i({
       "disable-elevation": a.disableElevation || a.variant === e(t).Table || a.variant === e(t).Card || a.variant === e(t).List
     }, {
       default: m(() => [
-        c(n.$slots, "default")
+        c(i.$slots, "default")
       ]),
       _: 3
     }, 8, ["class", "disable-gutters", "disable-padding", "disable-elevation"]));
   }
 });
 export {
-  w as MODULE_INJECTION,
+  v as MODULE_INJECTION,
   t as ModuleVariant,
   y as default
 };

package/dist/Module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Module.js","sources":["../src/components/Module/Module.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Box, { type BoxProps } from '../Box/Box.vue';\n  import { ModuleVariant, type ModuleVariants } from './Module.types';\n\n  export * from './Module.keys';\n  export * from './Module.types';\n\n  export interface ModuleProps extends BoxProps {\n    /**\n     * Variant applied.\n     *\n     * Options: `box`, `card`, `list`.\n     */\n    variant?: ModuleVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, onMounted, provide } from 'vue';\n\n  import { MODULE_INJECTION } from './Module.keys';\n\n  defineOptions({\n    name: 'll-module',\n  });\n\n  const props = withDefaults(defineProps<ModuleProps>(), {\n    variant: 'box',\n  });\n\n  onMounted(() => {\n    if (props.variant === 'card') {\n      logger.warn('Card Modules are no longer a thing. You\\'re probably looking for `<RadioGroup variant=\"card\">`.');\n    }\n\n    if (props.variant === 'list') {\n      logger.warn('Only used with deprecated ListView component. Use `table` variant with `Table` component instead.');\n    }\n  });\n\n  provide(MODULE_INJECTION.key, { variant: computed(() => props.variant) });\n</script>\n\n<template>\n  <Box\n    class=\"stash-module tw-flex tw-flex-col\"\n    data-test=\"stash-module\"\n    :class=\"{\n      'tw-bg-transparent tw-shadow-none lg:tw-shadow': props.variant === ModuleVariant.Table,\n      'tw-border tw-border-ice-500': props.variant === ModuleVariant.Card,\n      'tw-mb-6 tw-bg-transparent tw-shadow-none lg:tw-shadow': props.variant === ModuleVariant.List,\n    }\"\n    :disable-gutters=\"props.disableGutters\"\n    :disable-padding=\"props.disablePadding || ['card', 'list', 'table'].includes(props.variant)\"\n    :disable-elevation=\"\n      props.disableElevation ||\n      props.variant === ModuleVariant.Table ||\n      props.variant === ModuleVariant.Card ||\n      props.variant === ModuleVariant.List\n    \"\n  >\n    <slot></slot>\n  </Box>\n</template>\n"],"names":["props","__props","onMounted","logger","provide","MODULE_INJECTION","computed"],"mappings":";;;;;;;;;;;;;;;;AA2BE,UAAMA,IAAQC;AAId,WAAAC,EAAU,MAAM;AACV,MAAAF,EAAM,YAAY,UACpBG,EAAO,KAAK,iGAAiG,GAG3GH,EAAM,YAAY,UACpBG,EAAO,KAAK,mGAAmG;AAAA,IACjH,CACD,GAEOC,EAAAC,EAAiB,KAAK,EAAE,SAASC,EAAS,MAAMN,EAAM,OAAO,EAAA,CAAG;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Module.js","sources":["../src/components/Module/Module.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Box, { type BoxProps } from '../Box/Box.vue';\n  import { ModuleVariant, type ModuleVariants } from './Module.types';\n\n  export * from './Module.keys';\n  export * from './Module.types';\n\n  export interface ModuleProps extends BoxProps {\n    /**\n     * Variant applied.\n     *\n     * Options: `box`, `card`, `list`.\n     */\n    variant?: ModuleVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, onMounted, provide } from 'vue';\n\n  import { MODULE_INJECTION } from './Module.keys';\n\n  defineOptions({\n    name: 'll-module',\n  });\n\n  const props = withDefaults(defineProps<ModuleProps>(), {\n    variant: 'box',\n  });\n\n  onMounted(() => {\n    if (props.variant === 'card') {\n      logger.warn('Card Modules are no longer a thing. You\\'re probably looking for `<RadioGroup variant=\"card\">`.');\n    }\n\n    if (props.variant === 'list') {\n      logger.warn('Only used with deprecated ListView component. Use `table` variant with `Table` component instead.');\n    }\n  });\n\n  provide(MODULE_INJECTION.key, { variant: computed(() => props.variant) });\n</script>\n\n<template>\n  <Box\n    class=\"stash-module tw-flex tw-flex-col\"\n    data-test=\"stash-module\"\n    :class=\"{\n      'tw-bg-transparent tw-shadow': props.variant === ModuleVariant.Table,\n      'tw-border tw-border-ice-500': props.variant === ModuleVariant.Card,\n      'tw-mb-6 tw-bg-transparent tw-shadow-none lg:tw-shadow': props.variant === ModuleVariant.List,\n    }\"\n    :disable-gutters=\"props.disableGutters\"\n    :disable-padding=\"props.disablePadding || ['card', 'list', 'table'].includes(props.variant)\"\n    :disable-elevation=\"\n      props.disableElevation ||\n      props.variant === ModuleVariant.Table ||\n      props.variant === ModuleVariant.Card ||\n      props.variant === ModuleVariant.List\n    \"\n  >\n    <slot></slot>\n  </Box>\n</template>\n"],"names":["props","__props","onMounted","logger","provide","MODULE_INJECTION","computed"],"mappings":";;;;;;;;;;;;;;;;AA2BE,UAAMA,IAAQC;AAId,WAAAC,EAAU,MAAM;AACV,MAAAF,EAAM,YAAY,UACpBG,EAAO,KAAK,iGAAiG,GAG3GH,EAAM,YAAY,UACpBG,EAAO,KAAK,mGAAmG;AAAA,IACjH,CACD,GAEOC,EAAAC,EAAiB,KAAK,EAAE,SAASC,EAAS,MAAMN,EAAM,OAAO,EAAA,CAAG;;;;;;;;;;;;;;;;;;"}

package/dist/ModuleHeader.js

@@ -1,6 +1,6 @@
-import { defineComponent as M, useCssModule as C, useSlots as S, ref as B, inject as $, computed as u, openBlock as l, createElementBlock as r, normalizeClass as n, unref as a, createElementVNode as i, renderSlot as o, createCommentVNode as c, createBlock as p, resolveDynamicComponent as _, withCtx as b, createTextVNode as V, toDisplayString as v } from "vue";
-import { M as y } from "./Module.keys-2cc7d830.js";
-import { M as m } from "./Module.types-3f78f2a0.js";
+import { defineComponent as M, useCssModule as C, useSlots as S, ref as B, inject as $, computed as u, openBlock as l, createElementBlock as r, normalizeClass as n, unref as a, createElementVNode as i, renderSlot as o, createCommentVNode as m, createBlock as p, resolveDynamicComponent as _, withCtx as b, createTextVNode as V, toDisplayString as g } from "vue";
+import { M as v } from "./Module.keys-2cc7d830.js";
+import { M as c } from "./Module.types-3f78f2a0.js";
 import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
 const N = { class: "tw-flex tw-items-center" }, z = {
   class: "stash-module-header__content__text",
@@ -18,8 +18,8 @@ const N = { class: "tw-flex tw-items-center" }, z = {
     preventActionsWrap: { type: Boolean, default: !1 },
     underline: { type: Boolean, default: !1 }
   },
-  setup(g) {
-    const t = g, k = C(), s = S(), d = B(), w = $(y.key, y.defaults);
+  setup(y) {
+    const t = y, k = C(), s = S(), d = B(), w = $(v.key, v.defaults);
     if (!w.variant)
       throw new Error("<ModuleHeader> must be used within a <Module> component.");
     d.value = w.variant.value;
@@ -46,9 +46,10 @@ const N = { class: "tw-flex tw-items-center" }, z = {
     });
     return (e, I) => (l(), r("header", {
       class: n(["stash-module-header tw-flex tw-flex-wrap tw-justify-between", {
-        "tw-rounded-t tw-border-b tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-px-6": d.value === a(m).Card,
-        "tw-mb-6 tw-rounded tw-bg-white tw-px-3 tw-pt-3 tw-shadow lg:tw-mb-0 lg:tw-rounded-b-none lg:tw-px-6 lg:tw-pt-6 lg:tw-shadow-none": d.value === a(m).Table || d.value === a(m).List,
-        "tw-mb-3 tw-border-b tw-border-ice-200 lg:tw-mb-6": t.underline
+        "tw-rounded-t tw-border-b tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-px-6": d.value === a(c).Card,
+        "tw-mb-6 tw-rounded tw-bg-white tw-px-3 tw-pt-3 tw-shadow lg:tw-mb-0 lg:tw-rounded-b-none lg:tw-px-6 lg:tw-pt-6 lg:tw-shadow-none": d.value === a(c).List,
+        "tw-mb-3 tw-border-b tw-border-ice-200 lg:tw-mb-6": t.underline,
+        "tw-mb-6 tw-rounded-t tw-bg-white tw-px-3 tw-pt-3 lg:tw-mb-0 lg:tw-px-6 lg:tw-pt-6": d.value === a(c).Table
       }]),
       "data-test": "stash-module-header"
     }, [
@@ -63,7 +64,7 @@ const N = { class: "tw-flex tw-items-center" }, z = {
             "data-test": "stash-module-header|content-media"
           }, [
             o(e.$slots, "media")
-          ], 2)) : c("", !0),
+          ], 2)) : m("", !0),
           i("div", z, [
             a(s).title ? o(e.$slots, "title", { key: 0 }) : x.value ? (l(), p(_(f.value), {
               key: 1,
@@ -77,13 +78,13 @@ const N = { class: "tw-flex tw-items-center" }, z = {
             })) : o(e.$slots, "default", { key: 2 }, () => [
               (l(), p(_(f.value), { class: "tw-my-0" }, {
                 default: b(() => [
-                  V(v(t.title), 1)
+                  V(g(t.title), 1)
                 ]),
                 _: 1
               }))
             ]),
             o(e.$slots, "description", {}, () => [
-              t.description ? (l(), r("p", D, v(t.description), 1)) : c("", !0)
+              t.description ? (l(), r("p", D, g(t.description), 1)) : m("", !0)
             ])
           ])
         ])
@@ -99,7 +100,7 @@ const N = { class: "tw-flex tw-items-center" }, z = {
         "data-test": "stash-module-header|actions"
       }, [
         o(e.$slots, "actions")
-      ], 2)) : c("", !0)
+      ], 2)) : m("", !0)
     ], 2));
   }
 }), T = "_media_ktx8r_3", j = {

package/dist/ModuleHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleHeader.js","sources":["../src/components/ModuleHeader/ModuleHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, ref, useCssModule, useSlots } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  defineOptions({\n    name: 'll-module-header',\n  });\n\n  export interface ModuleHeaderProps {\n    /**\n     * Header title. Will get overridden by the `title` slot if provided.\n     */\n    title?: string;\n\n    /**\n     * Size of the header.\n     *\n     * - `small` = `h4`\n     * - `medium` = `h3`\n     * - `large` = `h2`\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * Header description, aka subtitle. Will get overridden by the `description` slot if provided.\n     */\n    description?: string;\n\n    /**\n     * Stop the actions slot from force-wrapping on medium and smalls screens.\n     */\n    preventActionsWrap?: boolean;\n\n    /**\n     * Displays a border at the bottom\n     */\n    underline?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ModuleHeaderProps>(), {\n    title: '',\n    size: 'medium',\n    description: '',\n    preventActionsWrap: false,\n    underline: false,\n  });\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  // get the module variant from the parent module\n  const moduleVariant = ref();\n  const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n  if (!moduleInjectedValues.variant) {\n    throw new Error('<ModuleHeader> must be used within a <Module> component.');\n  }\n  moduleVariant.value = moduleInjectedValues.variant.value;\n\n  const is = computed(() => {\n    let component: string;\n\n    switch (props.size) {\n      case 'small':\n        component = 'h4';\n        break;\n\n      case 'medium':\n        component = 'h3';\n        break;\n\n      case 'large':\n        component = 'h2';\n        break;\n\n      default:\n        component = 'h3';\n        break;\n    }\n\n    return component;\n  });\n\n  const isDefaultSlotSimpleString = computed(() => {\n    if (!slots.default) {\n      return false;\n    }\n\n    const defaultSlot = slots.default();\n    return (\n      defaultSlot.length === 1 &&\n      typeof slots.default()[0].children === 'string' &&\n      typeof slots.default()[0].type === 'symbol'\n    );\n  });\n\n  const marginBottomClasses = computed(() => {\n    const isBoxOrTableOrList = ['box', 'table', 'list'].includes(moduleVariant.value);\n\n    if (isBoxOrTableOrList && !props.underline) {\n      return 'tw-mb-3 lg:tw-mb-6';\n    } else if (isBoxOrTableOrList && props.underline) {\n      return 'tw-mb-3';\n    } else {\n      return '';\n    }\n  });\n</script>\n\n<template>\n  <header\n    class=\"stash-module-header tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-rounded-t tw-border-b tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-px-6':\n        moduleVariant === ModuleVariant.Card,\n      'tw-mb-6 tw-rounded tw-bg-white tw-px-3 tw-pt-3 tw-shadow lg:tw-mb-0 lg:tw-rounded-b-none lg:tw-px-6 lg:tw-pt-6 lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-mb-3 tw-border-b tw-border-ice-200 lg:tw-mb-6': props.underline,\n    }\"\n    data-test=\"stash-module-header\"\n  >\n    <div\n      class=\"stash-module-header__content tw-mr-6\"\n      :class=\"marginBottomClasses\"\n      data-test=\"stash-module-header|content\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <div\n          v-if=\"slots.media && props.size === 'large'\"\n          class=\"stash-module-header__content__media tw-mr-3\"\n          :class=\"classes.media\"\n          data-test=\"stash-module-header|content-media\"\n        >\n          <!-- @slot Place an illustration that sits next to the header title & description. -->\n          <slot name=\"media\"></slot>\n        </div>\n\n        <div class=\"stash-module-header__content__text\" data-test=\"stash-module-header|content-text\">\n          <!--\n            @slot Header title. **Deprecated**: Use the default slot or the `title` prop instead.\n          -->\n          <slot v-if=\"slots.title\" name=\"title\"></slot>\n\n          <template v-else-if=\"isDefaultSlotSimpleString\">\n            <component\n              :is=\"is\"\n              class=\"stash-module-header__default_slot_string tw-my-0\"\n              data-test=\"stash-module-header|default-slot-text\"\n            >\n              <!-- @slot Header title. -->\n              <slot></slot>\n            </component>\n          </template>\n          <!-- @slot Header title. Falls back to the `title` prop. -->\n          <slot v-else>\n            <component :is=\"is\" class=\"tw-my-0\">{{ props.title }}</component>\n          </slot>\n\n          <!--\n            @slot Header description, aka subtitle. Falls back to the `description` prop.\n          -->\n          <slot name=\"description\">\n            <p v-if=\"props.description\" class=\"tw-mb-0 tw-mt-3\">{{ props.description }}</p>\n          </slot>\n        </div>\n      </div>\n    </div>\n\n    <!-- todo: how can we pass a prop/class to actions in order to top align vs middle align? -->\n    <div\n      v-if=\"slots.actions\"\n      class=\"stash-module-header__actions tw-self-center\"\n      :class=\"[\n        marginBottomClasses,\n        {\n          'tw-w-full lg:tw-w-auto': !props.preventActionsWrap,\n        },\n      ]\"\n      data-test=\"stash-module-header|actions\"\n    >\n      <!-- @slot Add action buttons or other CTAs. -->\n      <slot name=\"actions\"></slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media {\n    max-height: 58px;\n    max-width: 58px;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","useSlots","moduleVariant","ref","moduleInjectedValues","inject","MODULE_INJECTION","is","computed","component","isDefaultSlotSimpleString","marginBottomClasses","isBoxOrTableOrList"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyCE,UAAMA,IAAQC,GAORC,IAAUC,KACVC,IAAQC,KAGRC,IAAgBC,KAChBC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,QAAA,CAACF,EAAqB;AAClB,YAAA,IAAI,MAAM,0DAA0D;AAE9D,IAAAF,EAAA,QAAQE,EAAqB,QAAQ;AAE7C,UAAAG,IAAKC,EAAS,MAAM;AACpB,UAAAC;AAEJ,cAAQb,EAAM,MAAM;AAAA,QAClB,KAAK;AACS,UAAAa,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF;AACc,UAAAA,IAAA;AACZ;AAAA,MACJ;AAEO,aAAAA;AAAA,IAAA,CACR,GAEKC,IAA4BF,EAAS,MACpCR,EAAM,UAISA,EAAM,UAEZ,WAAW,KACvB,OAAOA,EAAM,QAAU,EAAA,CAAC,EAAE,YAAa,YACvC,OAAOA,EAAM,UAAU,CAAC,EAAE,QAAS,WAP5B,EASV,GAEKW,IAAsBH,EAAS,MAAM;AACnC,YAAAI,IAAqB,CAAC,OAAO,SAAS,MAAM,EAAE,SAASV,EAAc,KAAK;AAE5E,aAAAU,KAAsB,CAAChB,EAAM,YACxB,uBACEgB,KAAsBhB,EAAM,YAC9B,YAEA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ModuleHeader.js","sources":["../src/components/ModuleHeader/ModuleHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, ref, useCssModule, useSlots } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  defineOptions({\n    name: 'll-module-header',\n  });\n\n  export interface ModuleHeaderProps {\n    /**\n     * Header title. Will get overridden by the `title` slot if provided.\n     */\n    title?: string;\n\n    /**\n     * Size of the header.\n     *\n     * - `small` = `h4`\n     * - `medium` = `h3`\n     * - `large` = `h2`\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * Header description, aka subtitle. Will get overridden by the `description` slot if provided.\n     */\n    description?: string;\n\n    /**\n     * Stop the actions slot from force-wrapping on medium and smalls screens.\n     */\n    preventActionsWrap?: boolean;\n\n    /**\n     * Displays a border at the bottom\n     */\n    underline?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ModuleHeaderProps>(), {\n    title: '',\n    size: 'medium',\n    description: '',\n    preventActionsWrap: false,\n    underline: false,\n  });\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  // get the module variant from the parent module\n  const moduleVariant = ref();\n  const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n  if (!moduleInjectedValues.variant) {\n    throw new Error('<ModuleHeader> must be used within a <Module> component.');\n  }\n  moduleVariant.value = moduleInjectedValues.variant.value;\n\n  const is = computed(() => {\n    let component: string;\n\n    switch (props.size) {\n      case 'small':\n        component = 'h4';\n        break;\n\n      case 'medium':\n        component = 'h3';\n        break;\n\n      case 'large':\n        component = 'h2';\n        break;\n\n      default:\n        component = 'h3';\n        break;\n    }\n\n    return component;\n  });\n\n  const isDefaultSlotSimpleString = computed(() => {\n    if (!slots.default) {\n      return false;\n    }\n\n    const defaultSlot = slots.default();\n    return (\n      defaultSlot.length === 1 &&\n      typeof slots.default()[0].children === 'string' &&\n      typeof slots.default()[0].type === 'symbol'\n    );\n  });\n\n  const marginBottomClasses = computed(() => {\n    const isBoxOrTableOrList = ['box', 'table', 'list'].includes(moduleVariant.value);\n\n    if (isBoxOrTableOrList && !props.underline) {\n      return 'tw-mb-3 lg:tw-mb-6';\n    } else if (isBoxOrTableOrList && props.underline) {\n      return 'tw-mb-3';\n    } else {\n      return '';\n    }\n  });\n</script>\n\n<template>\n  <header\n    class=\"stash-module-header tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-rounded-t tw-border-b tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-px-6':\n        moduleVariant === ModuleVariant.Card,\n      'tw-mb-6 tw-rounded tw-bg-white tw-px-3 tw-pt-3 tw-shadow lg:tw-mb-0 lg:tw-rounded-b-none lg:tw-px-6 lg:tw-pt-6 lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.List,\n      'tw-mb-3 tw-border-b tw-border-ice-200 lg:tw-mb-6': props.underline,\n      'tw-mb-6 tw-rounded-t tw-bg-white tw-px-3 tw-pt-3 lg:tw-mb-0 lg:tw-px-6 lg:tw-pt-6':\n        moduleVariant === ModuleVariant.Table,\n    }\"\n    data-test=\"stash-module-header\"\n  >\n    <div\n      class=\"stash-module-header__content tw-mr-6\"\n      :class=\"marginBottomClasses\"\n      data-test=\"stash-module-header|content\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <div\n          v-if=\"slots.media && props.size === 'large'\"\n          class=\"stash-module-header__content__media tw-mr-3\"\n          :class=\"classes.media\"\n          data-test=\"stash-module-header|content-media\"\n        >\n          <!-- @slot Place an illustration that sits next to the header title & description. -->\n          <slot name=\"media\"></slot>\n        </div>\n\n        <div class=\"stash-module-header__content__text\" data-test=\"stash-module-header|content-text\">\n          <!--\n            @slot Header title. **Deprecated**: Use the default slot or the `title` prop instead.\n          -->\n          <slot v-if=\"slots.title\" name=\"title\"></slot>\n\n          <template v-else-if=\"isDefaultSlotSimpleString\">\n            <component\n              :is=\"is\"\n              class=\"stash-module-header__default_slot_string tw-my-0\"\n              data-test=\"stash-module-header|default-slot-text\"\n            >\n              <!-- @slot Header title. -->\n              <slot></slot>\n            </component>\n          </template>\n          <!-- @slot Header title. Falls back to the `title` prop. -->\n          <slot v-else>\n            <component :is=\"is\" class=\"tw-my-0\">{{ props.title }}</component>\n          </slot>\n\n          <!--\n            @slot Header description, aka subtitle. Falls back to the `description` prop.\n          -->\n          <slot name=\"description\">\n            <p v-if=\"props.description\" class=\"tw-mb-0 tw-mt-3\">{{ props.description }}</p>\n          </slot>\n        </div>\n      </div>\n    </div>\n\n    <!-- todo: how can we pass a prop/class to actions in order to top align vs middle align? -->\n    <div\n      v-if=\"slots.actions\"\n      class=\"stash-module-header__actions tw-self-center\"\n      :class=\"[\n        marginBottomClasses,\n        {\n          'tw-w-full lg:tw-w-auto': !props.preventActionsWrap,\n        },\n      ]\"\n      data-test=\"stash-module-header|actions\"\n    >\n      <!-- @slot Add action buttons or other CTAs. -->\n      <slot name=\"actions\"></slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media {\n    max-height: 58px;\n    max-width: 58px;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","useSlots","moduleVariant","ref","moduleInjectedValues","inject","MODULE_INJECTION","is","computed","component","isDefaultSlotSimpleString","marginBottomClasses","isBoxOrTableOrList"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyCE,UAAMA,IAAQC,GAORC,IAAUC,KACVC,IAAQC,KAGRC,IAAgBC,KAChBC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,QAAA,CAACF,EAAqB;AAClB,YAAA,IAAI,MAAM,0DAA0D;AAE9D,IAAAF,EAAA,QAAQE,EAAqB,QAAQ;AAE7C,UAAAG,IAAKC,EAAS,MAAM;AACpB,UAAAC;AAEJ,cAAQb,EAAM,MAAM;AAAA,QAClB,KAAK;AACS,UAAAa,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF;AACc,UAAAA,IAAA;AACZ;AAAA,MACJ;AAEO,aAAAA;AAAA,IAAA,CACR,GAEKC,IAA4BF,EAAS,MACpCR,EAAM,UAISA,EAAM,UAEZ,WAAW,KACvB,OAAOA,EAAM,QAAU,EAAA,CAAC,EAAE,YAAa,YACvC,OAAOA,EAAM,UAAU,CAAC,EAAE,QAAS,WAP5B,EASV,GAEKW,IAAsBH,EAAS,MAAM;AACnC,YAAAI,IAAqB,CAAC,OAAO,SAAS,MAAM,EAAE,SAASV,EAAc,KAAK;AAE5E,aAAAU,KAAsB,CAAChB,EAAM,YACxB,uBACEgB,KAAsBhB,EAAM,YAC9B,YAEA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Table.js

@@ -1,16 +1,16 @@
-import { defineComponent as C, inject as g, computed as o, provide as H, watchEffect as N, openBlock as p, createElementBlock as L, normalizeClass as i, unref as c, normalizeStyle as I, createElementVNode as f, renderSlot as y, createBlock as k, withCtx as d, createVNode as n } from "vue";
+import { defineComponent as H, inject as g, computed as a, provide as N, watchEffect as L, openBlock as c, createElementBlock as I, normalizeClass as i, unref as f, normalizeStyle as A, createElementVNode as y, renderSlot as w, createBlock as k, withCtx as d, createVNode as n } from "vue";
 import "lodash-es/cloneDeep";
 import { M as E } 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-18343da7.js";
 import { D as S } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
-import A from "./EmptyState.js";
-import D from "./Loading.js";
+import D from "./EmptyState.js";
+import O from "./Loading.js";
 import x from "./TableCell.js";
 import _ from "./TableRow.js";
-import { T as O } from "./Table.keys-83e4f09b.js";
-import { S as V } from "./misc-76697f61.js";
+import { T as V } from "./Table.keys-83e4f09b.js";
+import { S as J } from "./misc-76697f61.js";
 import "./locale.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.js";
@@ -26,8 +26,8 @@ import "./ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js";
 import "./Button.js";
 import "./Icon.js";
 import "./Expand.vue_vue_type_script_setup_true_lang-0f236267.js";
-var J = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(J || {}), $ = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))($ || {});
-const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ft = /* @__PURE__ */ C({
+var $ = /* @__PURE__ */ ((t) => (t.Scroll = "scroll", t.Stack = "stack", t))($ || {}), z = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t.RoundedBottom = "rounded-bottom", t))(z || {});
+const M = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ye = /* @__PURE__ */ H({
   __name: "Table",
   props: {
     density: { default: void 0 },
@@ -42,80 +42,83 @@ const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
     radius: { default: "rounded" },
     stickyHeader: { default: void 0 }
   },
-  setup(e) {
-    const t = e, {
+  setup(t) {
+    const e = t, {
       density: T,
-      variant: w,
+      variant: u,
       isEmpty: r,
       isLoading: s,
       isSelectable: b
-    } = g(S.key, S.defaults), { variant: u } = g(E.key, E.defaults), v = o(() => (u == null ? void 0 : u.value) === "table" || w.value === "table" ? "rounded-bottom" : t.radius), l = o(() => t.stickyHeader ? "scroll" : t.layout), h = o(() => {
-      var a, m;
-      return !!((a = t.stickyHeader) != null && a.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
-      ((m = t.stickyHeader) == null ? void 0 : m.listLength) > 3);
-    }), B = o(() => {
-      var a;
+    } = g(S.key, S.defaults), { variant: m } = g(E.key, E.defaults), v = a(() => (m == null ? void 0 : m.value) === "table" || u.value === "table" ? "rounded-bottom" : e.radius), l = a(() => e.stickyHeader ? "scroll" : e.layout), B = a(() => l.value === "scroll" && u.value === "table"), h = a(() => {
+      var o, p;
+      return !!((o = e.stickyHeader) != null && o.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
+      ((p = e.stickyHeader) == null ? void 0 : p.listLength) > 3);
+    }), C = a(() => {
+      var o;
       return {
-        maxHeight: h.value ? (a = t.stickyHeader) == null ? void 0 : a.maxHeight : ""
+        maxHeight: h.value ? (o = e.stickyHeader) == null ? void 0 : o.maxHeight : ""
       };
     });
-    return H(O.key, {
-      density: o(() => t.density || T.value || V.Comfortable),
-      hasCustomExpandToggle: o(() => t.hasCustomExpandToggle),
-      hasActions: o(() => t.hasActions),
-      isExpandable: o(() => t.isExpandable),
-      isSelectable: o(
-        () => t.isSelectable && !t.isLoading && !(s != null && s.value) && !t.isEmpty && !(r != null && r.value)
+    return N(V.key, {
+      density: a(() => e.density || T.value || J.Comfortable),
+      hasCustomExpandToggle: a(() => e.hasCustomExpandToggle),
+      hasActions: a(() => e.hasActions),
+      isExpandable: a(() => e.isExpandable),
+      isSelectable: a(
+        () => e.isSelectable && !e.isLoading && !(s != null && s.value) && !e.isEmpty && !(r != null && r.value)
       ),
       layout: l
-    }), N(() => {
-      b && (b.value = t.isSelectable);
-    }), (a, m) => (p(), L("div", {
+    }), L(() => {
+      b && (b.value = e.isSelectable);
+    }), (o, p) => (c(), I("div", {
       class: i(["stash-table tw-relative", [
         { "tw-rounded": v.value === "rounded" },
         { "tw-rounded-b": v.value === "rounded-bottom" },
-        { "tw-border-t tw-border-ice-200": c(w) === "table" },
-        { "tw-overflow-auto tw-shadow": l.value === "scroll" },
-        { "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack" },
-        { "tw-min-h-[300px]": h.value && !t.isLoading }
+        { "tw-border-t tw-border-ice-200": f(u) === "table" },
+        { "tw-overflow-auto": l.value === "scroll" },
+        { "tw-shadow": B.value },
+        {
+          "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack"
+        },
+        { "tw-min-h-[300px]": h.value && !e.isLoading }
         // prevent the table from collapsing on small screen heights when the max-height is dynamic
       ]]),
       "data-test": "stash-table",
-      style: I(B.value)
+      style: A(C.value)
     }, [
-      f("table", z, [
-        f("thead", {
+      y("table", M, [
+        y("thead", {
           class: i(["tw-border-b tw-border-ice-200", {
             "tw-hidden lg:tw-table-header-group": l.value === "stack"
           }])
         }, [
-          y(a.$slots, "head")
+          w(o.$slots, "head")
         ], 2),
-        f("tbody", null, [
-          t.isLoading || c(s) ? (p(), k(_, { key: 0 }, {
+        y("tbody", null, [
+          e.isLoading || f(s) ? (c(), k(_, { key: 0 }, {
             default: d(() => [
               n(x, {
                 colspan: "100%",
                 class: i({ "tw-col-span-12": l.value === "stack" })
               }, {
                 default: d(() => [
-                  n(D)
+                  n(O)
                 ]),
                 _: 1
               }, 8, ["class"])
             ]),
             _: 1
-          })) : t.isEmpty || c(r) ? (p(), k(_, { key: 1 }, {
+          })) : e.isEmpty || f(r) ? (c(), k(_, { key: 1 }, {
             default: d(() => [
               n(x, {
                 colspan: "100%",
                 class: i({ "tw-col-span-12": l.value === "stack" })
               }, {
                 default: d(() => [
-                  y(a.$slots, "empty", {}, () => [
-                    n(A, {
+                  w(o.$slots, "empty", {}, () => [
+                    n(D, {
                       class: "tw-w-full tw-bg-white",
-                      text: t.emptyStateText
+                      text: e.emptyStateText
                     }, null, 8, ["text"])
                   ])
                 ]),
@@ -123,16 +126,16 @@ const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
               }, 8, ["class"])
             ]),
             _: 3
-          })) : y(a.$slots, "body", { key: 2 })
+          })) : w(o.$slots, "body", { key: 2 })
         ])
       ])
     ], 6));
   }
 });
 export {
-  J as Layout,
-  O as TABLE_INJECTION,
-  $ as TableRadius,
-  ft as default
+  $ as Layout,
+  V as TABLE_INJECTION,
+  z as TableRadius,
+  ye as default
 };
 //# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n      { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;ACoEV,UAAMC,IAAQC,GAcR;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFH,EAAM,MACd,GAEKa,IAAiBD,EAAkB,MACnCZ,EAAM,eACD,WAGFA,EAAM,MACd,GAEKc,IAAwBF,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJG,IAAAf,EAAM,iBAAN,QAAAe,EAAoB;AAAA,QACpBC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYL,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWE,EAAsB,SAAQC,IAAAf,EAAM,iBAAN,gBAAAe,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASP,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASkB,EAAe,WAAW;AAAA,MAC5F,uBAAuBR,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MACtB;AAAA,MACA,QAAQS;AAAA,IAAA,CACT,GAEDQ,EAAY,MAAM;AAKhB,MAAIf,MACFA,EAAqB,QAAQN,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto': computedLayout === 'scroll' },\n      { 'tw-shadow': isShadowEnabled },\n      {\n        'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack',\n      },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;ACoEV,UAAMC,IAAQC,GAcR;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFH,EAAM,MACd,GAEKa,IAAiBD,EAAkB,MACnCZ,EAAM,eACD,WAGFA,EAAM,MACd,GAEKc,IAAkBF,EAAkB,MACjCC,EAAe,UAAU,YAAYV,EAAgB,UAAU,OACvE,GAEKY,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAhB,EAAM,iBAAN,QAAAgB,EAAoB;AAAA,QACpBC,IAAAjB,EAAM,iBAAN,gBAAAiB,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MACtB;AAAA,MACA,QAAQS;AAAA,IAAA,CACT,GAEDS,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQN,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "49.3.3",
+  "version": "49.3.4",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",