@leaflink/stash 46.0.0 → 46.2.0

package/dist/Module.js

@@ -1,13 +1,13 @@
-import { defineComponent as i, onMounted as l, provide as s, computed as d, openBlock as p, createBlock as u, normalizeClass as b, unref as t, withCtx as m, renderSlot as c } from "vue";
+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 { M as e } from "./Module.types-3f78f2a0.js";
+import { M as t } from "./Module.types-3f78f2a0.js";
 const y = /* @__PURE__ */ i({
   name: "ll-module",
   __name: "Module",
   props: {
-    variant: { default: e.Box },
+    variant: { default: "box" },
     disablePadding: { type: Boolean },
     disableGutters: { type: Boolean },
     disableElevation: { type: Boolean },
@@ -17,16 +17,16 @@ const y = /* @__PURE__ */ i({
     const a = r;
     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(), u(v, {
-      class: b(["stash-module tw-flex tw-flex-col", {
-        "tw-bg-transparent tw-shadow-none lg:tw-shadow": a.variant === t(e).Table,
-        "tw-border tw-border-ice-500": a.variant === t(e).Card,
-        "tw-mb-6 tw-bg-transparent tw-shadow-none lg:tw-shadow": a.variant === t(e).List
+    }), s(w.key, { variant: d(() => a.variant) }), (n, f) => (p(), b(v, {
+      class: u(["stash-module tw-flex tw-flex-col", {
+        "tw-bg-transparent tw-shadow-none lg: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
       }]),
       "data-test": "stash-module",
       "disable-gutters": a.disableGutters,
       "disable-padding": a.disablePadding || ["card", "list", "table"].includes(a.variant),
-      "disable-elevation": a.disableElevation || a.variant === t(e).Table || a.variant === t(e).Card || a.variant === t(e).List
+      "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")
@@ -37,7 +37,7 @@ const y = /* @__PURE__ */ i({
 });
 export {
   w as MODULE_INJECTION,
-  e as ModuleVariant,
+  t as ModuleVariant,
   y as default
 };
 //# sourceMappingURL=Module.js.map

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: ModuleVariant.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":["onMounted","props","logger","provide","MODULE_INJECTION","computed"],"mappings":";;;;;;;;;;;;;;;;;AA+BE,WAAAA,EAAU,MAAM;AACV,MAAAC,EAAM,YAAY,UACpBC,EAAO,KAAK,iGAAiG,GAG3GD,EAAM,YAAY,UACpBC,EAAO,KAAK,mGAAmG;AAAA,IACjH,CACD,GAEOC,EAAAC,EAAiB,KAAK,EAAE,SAASC,EAAS,MAAMJ,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-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":["onMounted","props","logger","provide","MODULE_INJECTION","computed"],"mappings":";;;;;;;;;;;;;;;;;AA+BE,WAAAA,EAAU,MAAM;AACV,MAAAC,EAAM,YAAY,UACpBC,EAAO,KAAK,iGAAiG,GAG3GD,EAAM,YAAY,UACpBC,EAAO,KAAK,mGAAmG;AAAA,IACjH,CACD,GAEOC,EAAAC,EAAiB,KAAK,EAAE,SAASC,EAAS,MAAMJ,EAAM,OAAO,EAAA,CAAG;;;;;;;;;;;;;;;;;;"}

package/dist/Module.vue.d.ts

@@ -55,9 +55,9 @@ declare interface BoxProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ModuleProps>, {
-    variant: ModuleVariant;
+    variant: string;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ModuleProps>, {
-    variant: ModuleVariant;
+    variant: string;
 }>>>, {
     variant: "table" | "list" | "box" | "card";
 }, {}>, {

package/dist/ModuleHeader.js

@@ -1,14 +1,14 @@
-import { defineComponent as v, useCssModule as g, useSlots as k, ref as y, onBeforeMount as x, inject as M, computed as w, openBlock as l, createElementBlock as r, normalizeClass as n, unref as a, createElementVNode as u, renderSlot as d, createCommentVNode as i, createBlock as B, resolveDynamicComponent as C, withCtx as V, createTextVNode as E, toDisplayString as h } from "vue";
-import { M as p } from "./Module.keys-2cc7d830.js";
-import { M as o } from "./Module.types-3f78f2a0.js";
-import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
-const T = { class: "tw-flex tw-items-center" }, $ = {
+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 { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
+const N = { class: "tw-flex tw-items-center" }, z = {
   class: "stash-module-header__content__text",
   "data-test": "stash-module-header|content-text"
-}, z = {
+}, D = {
   key: 0,
   class: "tw-mb-0 tw-mt-3"
-}, L = /* @__PURE__ */ v({
+}, O = /* @__PURE__ */ M({
   name: "ll-module-header",
   __name: "ModuleHeader",
   props: {
@@ -18,15 +18,12 @@ const T = { class: "tw-flex tw-items-center" }, $ = {
     preventActionsWrap: { type: Boolean, default: !1 },
     underline: { type: Boolean, default: !1 }
   },
-  setup(f) {
-    const t = f, _ = g(), c = k(), s = y();
-    x(() => {
-      const e = M(p.key, p.defaults);
-      if (!e.variant)
-        throw new Error("ModuleHeader must be used within a Module component.");
-      s.value = e.variant.value;
-    });
-    const b = w(() => {
+  setup(g) {
+    const t = g, k = C(), s = S(), d = B(), w = $(y.key, y.defaults);
+    if (!w.variant)
+      throw new Error("<ModuleHeader> must be used within a <Module> component.");
+    d.value = w.variant.value;
+    const f = u(() => {
       let e;
       switch (t.size) {
         case "small":
@@ -43,68 +40,74 @@ const T = { class: "tw-flex tw-items-center" }, $ = {
           break;
       }
       return e;
-    }), m = w(() => {
-      const e = s.value === o.Box || s.value === o.Table || s.value === o.List;
+    }), x = u(() => s.default ? s.default().length === 1 && typeof s.default()[0].children == "string" && typeof s.default()[0].type == "symbol" : !1), h = u(() => {
+      const e = ["box", "table", "list"].includes(d.value);
       return e && !t.underline ? "tw-mb-3 lg:tw-mb-6" : e && t.underline ? "tw-mb-3" : "";
     });
-    return (e, H) => (l(), r("header", {
+    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": s.value === a(o).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": s.value === a(o).Table || s.value === a(o).List,
+        "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
       }]),
       "data-test": "stash-module-header"
     }, [
-      u("div", {
-        class: n(["stash-module-header__content tw-mr-6", m.value]),
+      i("div", {
+        class: n(["stash-module-header__content tw-mr-6", h.value]),
         "data-test": "stash-module-header|content"
       }, [
-        u("div", T, [
-          a(c).media && t.size === "large" ? (l(), r("div", {
+        i("div", N, [
+          a(s).media && t.size === "large" ? (l(), r("div", {
             key: 0,
-            class: n(["stash-module-header__content__media tw-mr-3", a(_).media]),
+            class: n(["stash-module-header__content__media tw-mr-3", a(k).media]),
             "data-test": "stash-module-header|content-media"
           }, [
-            d(e.$slots, "media")
-          ], 2)) : i("", !0),
-          u("div", $, [
-            d(e.$slots, "title", {}, () => [
-              t.title ? (l(), B(C(b.value), {
-                key: 0,
-                class: "tw-my-0"
-              }, {
-                default: V(() => [
-                  E(h(t.title), 1)
+            o(e.$slots, "media")
+          ], 2)) : c("", !0),
+          i("div", z, [
+            a(s).title ? o(e.$slots, "title", { key: 0 }) : x.value ? (l(), p(_(f.value), {
+              key: 1,
+              class: "stash-module-header__default_slot_string tw-my-0",
+              "data-test": "stash-module-header|default-slot-text"
+            }, {
+              default: b(() => [
+                o(e.$slots, "default")
+              ]),
+              _: 3
+            })) : o(e.$slots, "default", { key: 2 }, () => [
+              (l(), p(_(f.value), { class: "tw-my-0" }, {
+                default: b(() => [
+                  V(v(t.title), 1)
                 ]),
                 _: 1
-              })) : i("", !0)
+              }))
             ]),
-            d(e.$slots, "description", {}, () => [
-              t.description ? (l(), r("p", z, h(t.description), 1)) : i("", !0)
+            o(e.$slots, "description", {}, () => [
+              t.description ? (l(), r("p", D, v(t.description), 1)) : c("", !0)
             ])
           ])
         ])
       ], 2),
-      a(c).actions ? (l(), r("div", {
+      a(s).actions ? (l(), r("div", {
         key: 0,
         class: n(["stash-module-header__actions tw-self-center", [
-          m.value,
+          h.value,
           {
             "tw-w-full lg:tw-w-auto": !t.preventActionsWrap
           }
         ]]),
         "data-test": "stash-module-header|actions"
       }, [
-        d(e.$slots, "actions")
-      ], 2)) : i("", !0)
+        o(e.$slots, "actions")
+      ], 2)) : c("", !0)
     ], 2));
   }
-}), O = "_media_ktx8r_3", j = {
-  media: O
-}, D = {
+}), T = "_media_ktx8r_3", j = {
+  media: T
+}, H = {
   $style: j
-}, J = /* @__PURE__ */ N(L, [["__cssModules", D]]);
+}, U = /* @__PURE__ */ E(O, [["__cssModules", H]]);
 export {
-  J as default
+  U as default
 };
 //# sourceMappingURL=ModuleHeader.js.map

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, onBeforeMount, 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  const moduleVariant = ref();\n\n  onBeforeMount(() => {\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\n  const is = computed(() => {\n    let component;\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 marginBottomClasses = computed(() => {\n    const isBoxOrTableOrList =\n      moduleVariant.value === ModuleVariant.Box ||\n      moduleVariant.value === ModuleVariant.Table ||\n      moduleVariant.value === ModuleVariant.List;\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 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\n            @type String\n            @default HTML header element with the `title` prop as the text.\n            TODO: this doesn't work...\n          -->\n          <slot name=\"title\">\n            <component :is=\"is\" v-if=\"props.title\" class=\"tw-my-0\">{{ props.title }}</component>\n          </slot>\n\n          <!--\n            @slot Header title\n            @type String\n            @default HTML <p> element with the `description` prop as the text.\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 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":["classes","useCssModule","slots","useSlots","moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION","is","computed","component","props","marginBottomClasses","isBoxOrTableOrList","ModuleVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAUC,KACVC,IAAQC,KACRC,IAAgBC;AAEtB,IAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,sDAAsD;AAE1D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;AAEK,UAAAG,IAAKC,EAAS,MAAM;AACpB,UAAAC;AAEJ,cAAQC,EAAM,MAAM;AAAA,QAClB,KAAK;AACS,UAAAD,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,GAEKE,IAAsBH,EAAS,MAAM;AACnC,YAAAI,IACJX,EAAc,UAAUY,EAAc,OACtCZ,EAAc,UAAUY,EAAc,SACtCZ,EAAc,UAAUY,EAAc;AAEpC,aAAAD,KAAsB,CAACF,EAAM,YACxB,uBACEE,KAAsBF,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.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":["classes","useCssModule","slots","useSlots","moduleVariant","ref","moduleInjectedValues","inject","MODULE_INJECTION","is","computed","component","props","isDefaultSlotSimpleString","marginBottomClasses","isBoxOrTableOrList"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgDQA,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,cAAQC,EAAM,MAAM;AAAA,QAClB,KAAK;AACS,UAAAD,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,GAEKE,IAA4BH,EAAS,MACpCR,EAAM,UAISA,EAAM,UAEZ,WAAW,KACvB,OAAOA,EAAM,QAAU,EAAA,CAAC,EAAE,YAAa,YACvC,OAAOA,EAAM,UAAU,CAAC,EAAE,QAAS,WAP5B,EASV,GAEKY,IAAsBJ,EAAS,MAAM;AACnC,YAAAK,IAAqB,CAAC,OAAO,SAAS,MAAM,EAAE,SAASX,EAAc,KAAK;AAE5E,aAAAW,KAAsB,CAACH,EAAM,YACxB,uBACEG,KAAsBH,EAAM,YAC9B,YAEA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ModuleHeader.vue.d.ts

@@ -54,6 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }, {}>, {
     media?(_: {}): any;
     title?(_: {}): any;
+    default?(_: {}): any;
     description?(_: {}): any;
     actions?(_: {}): any;
 }>;

package/dist/RangeInput.js

@@ -0,0 +1,29 @@
+import { defineComponent as s, useSlots as n, openBlock as a, createElementBlock as r, renderSlot as o, createVNode as m } from "vue";
+import p from "./Icon.js";
+import "lodash-es/uniqueId";
+import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import "./_plugin-vue_export-helper-dad06003.js";
+const i = {
+  "data-test": "stash-range-input",
+  class: "stash-range-input tw-flex tw-gap-3"
+}, x = /* @__PURE__ */ s({
+  __name: "RangeInput",
+  setup(l) {
+    const t = n();
+    if (!(!!t.min && !!t.max))
+      throw new Error("RangeInput: please provide slots for min and max values.");
+    return (e, u) => (a(), r("div", i, [
+      o(e.$slots, "min"),
+      m(p, {
+        name: "transfer",
+        class: "tw-mb-2 tw-mt-auto"
+      }),
+      o(e.$slots, "max")
+    ]));
+  }
+});
+export {
+  x as default
+};
+//# sourceMappingURL=RangeInput.js.map

package/dist/RangeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.js","sources":["../src/components/RangeInput/RangeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  const slots = useSlots();\n\n  const hasSlots = !!slots.min && !!slots.max;\n\n  if (!hasSlots) {\n    throw new Error('RangeInput: please provide slots for min and max values.');\n  }\n</script>\n\n<template>\n  <div data-test=\"stash-range-input\" class=\"stash-range-input tw-flex tw-gap-3\">\n    <!-- @slot field for minimal value input -->\n    <slot name=\"min\"></slot>\n\n    <Icon name=\"transfer\" class=\"tw-mb-2 tw-mt-auto\" />\n    <!-- @slot Field for maximal value input -->\n    <slot name=\"max\"></slot>\n  </div>\n</template>\n"],"names":["slots","useSlots"],"mappings":";;;;;;;;;;;;AAKE,UAAMA,IAAQC;AAId,QAAI,EAFa,CAAC,CAACD,EAAM,OAAO,CAAC,CAACA,EAAM;AAGhC,YAAA,IAAI,MAAM,0DAA0D;;;;;;;;;;;"}

package/dist/RangeInput.vue.d.ts

@@ -0,0 +1,20 @@
+import { AllowedComponentProps } from 'vue';
+import { ComponentCustomProps } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { VNodeProps } from 'vue';
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>, {
+    min?(_: {}): any;
+    max?(_: {}): any;
+}>;
+export default _default;
+
+export { }

package/package.json

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