@leaflink/stash 51.1.1 → 51.2.0

package/dist/EmptyState.js

@@ -1,4 +1,4 @@
-import { defineComponent as p, useCssModule as f, useSlots as _, createElementBlock as o, openBlock as s, createBlock as g, createCommentVNode as n, createElementVNode as u, renderSlot as a, toDisplayString as i, normalizeClass as m, unref as r, createTextVNode as y } from "vue";
+import { defineComponent as f, useCssModule as p, useSlots as g, createElementBlock as o, openBlock as s, createBlock as _, createCommentVNode as i, createElementVNode as u, renderSlot as a, toDisplayString as n, normalizeClass as m, unref as r, createTextVNode as y } from "vue";
 import { t as w } from "./locale.js";
 import { _ as b } from "./Illustration.vue_vue_type_script_setup_true_lang-BBqgoJO8.js";
 import { _ as h } from "./_plugin-vue_export-helper-CHgC5LLL.js";
@@ -6,10 +6,10 @@ const x = {
   key: "empty",
   class: "stash-empty-state",
   "data-test": "stash-empty-state"
-}, k = {
+}, v = {
   key: 0,
   class: "tw-flex tw-flex-col tw-items-center tw-text-center md:tw-flex-row md:tw-text-left"
-}, v = { class: "tw-mb-1.5" }, $ = ["alt", "src"], S = /* @__PURE__ */ p({
+}, k = { class: "tw-mb-1.5" }, S = ["alt", "src"], $ = /* @__PURE__ */ f({
   name: "ll-empty-state",
   __name: "EmptyState",
   props: {
@@ -21,36 +21,37 @@ const x = {
     title: { default: "" },
     subtitle: { default: "" },
     footnote: { default: "" },
-    vignette: { default: void 0 }
+    vignette: { default: void 0 },
+    vignetteSize: { default: 300 }
   },
   setup(d) {
-    const t = d, c = f(), e = _();
-    return (l, N) => (s(), o("div", x, [
-      t.title || e.title || t.subtitle || e.subtitle || t.vignette ? (s(), o("div", k, [
-        t.vignette ? (s(), g(b, {
+    const t = d, c = p(), e = g();
+    return (l, M) => (s(), o("div", x, [
+      t.title || e.title || t.subtitle || e.subtitle || t.vignette ? (s(), o("div", v, [
+        t.vignette ? (s(), _(b, {
           key: 0,
           "data-test": "stash-empty-state|illustration",
           type: "vignette",
           class: "tw-mx-3",
           name: t.vignette,
-          size: 300
-        }, null, 8, ["name"])) : n("", !0),
+          size: t.vignetteSize
+        }, null, 8, ["name", "size"])) : i("", !0),
         u("section", null, [
           a(l.$slots, "title", {}, () => [
-            u("h3", v, i(t.title), 1)
+            u("h3", k, n(t.title), 1)
           ]),
           a(l.$slots, "subtitle", {}, () => [
             t.subtitle || e.subtitle ? (s(), o("p", {
               key: 0,
               class: m({ "tw-mb-8": e.button, "tw-mb-0": !e.button })
-            }, i(t.subtitle), 3)) : n("", !0)
+            }, n(t.subtitle), 3)) : i("", !0)
           ]),
           a(l.$slots, "button"),
           a(l.$slots, "footnote", {}, () => [
             t.footnote ? (s(), o("p", {
               key: 0,
               class: m(["tw-mb-0 tw-text-xs", { "tw-mt-3": e.button }])
-            }, i(t.footnote), 3)) : n("", !0)
+            }, n(t.footnote), 3)) : i("", !0)
           ])
         ])
       ])) : (s(), o("div", {
@@ -64,18 +65,18 @@ const x = {
             alt: t.image.alt,
             src: t.image.src,
             "data-test": "stash-empty-state__img"
-          }, null, 10, $)) : n("", !0)
+          }, null, 10, S)) : i("", !0)
         ]),
-        y(" " + i(t.text || r(w)("ll.emptyState.noResults")), 1)
+        y(" " + n(t.text || r(w)("ll.emptyState.noResults")), 1)
       ], 2))
     ]));
   }
-}), C = "_root_hagg9_2", E = "_image_hagg9_6", B = {
-  root: C,
-  image: E
-}, M = {
-  $style: B
-}, R = /* @__PURE__ */ h(S, [["__cssModules", M]]);
+}), z = "_root_hagg9_2", C = "_image_hagg9_6", E = {
+  root: z,
+  image: C
+}, B = {
+  $style: E
+}, R = /* @__PURE__ */ h($, [["__cssModules", B]]);
 export {
   R as default
 };

package/dist/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import { VignetteNames } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n\n  export interface EmptyStateProps {\n    /**\n     * @deprecated Use illustration instead.\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n\n    /**\n     * @deprecated Use title instead.\n     */\n    text?: string;\n\n    /**\n     * the title text of the empty state\n     */\n    title?: string;\n\n    /**\n     * the subtitle text of the empty state\n     */\n    subtitle?: string;\n\n    /**\n     * additional text to place at the bottom of the empty state\n     */\n    footnote?: string;\n\n    /**\n     * The name of the vignette illustration to render\n     */\n    vignette?: VignetteNames;\n  }\n\n  export interface EmptyStateSlots {\n    title?: () => unknown;\n    subtitle?: () => unknown;\n    footnote?: () => unknown;\n    button?: () => unknown;\n    image?: () => unknown;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n\n    title: '',\n    subtitle: '',\n    footnote: '',\n    vignette: undefined,\n  });\n\n  const classes = useCssModule();\n  const slots = defineSlots<EmptyStateSlots>();\n</script>\n\n<template>\n  <div key=\"empty\" class=\"stash-empty-state\" data-test=\"stash-empty-state\">\n    <template v-if=\"props.title || slots.title || props.subtitle || slots.subtitle || props.vignette\">\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-text-center md:tw-flex-row md:tw-text-left\">\n        <Illustration\n          v-if=\"props.vignette\"\n          data-test=\"stash-empty-state|illustration\"\n          type=\"vignette\"\n          class=\"tw-mx-3\"\n          :name=\"props.vignette\"\n          :size=\"300\"\n        />\n        <section>\n          <slot name=\"title\">\n            <h3 class=\"tw-mb-1.5\">\n              {{ props.title }}\n            </h3>\n          </slot>\n\n          <slot name=\"subtitle\">\n            <p v-if=\"props.subtitle || slots.subtitle\" :class=\"{ 'tw-mb-8': slots.button, 'tw-mb-0': !slots.button }\">\n              {{ props.subtitle }}\n            </p>\n          </slot>\n\n          <slot name=\"button\"></slot>\n          <slot name=\"footnote\">\n            <p v-if=\"props.footnote\" class=\"tw-mb-0 tw-text-xs\" :class=\"{ 'tw-mt-3': slots.button }\">\n              {{ props.footnote }}\n            </p>\n          </slot>\n        </section>\n      </div>\n    </template>\n\n    <template v-else>\n      <div\n        class=\"tw-mx-auto tw-my-0 tw-flex tw-items-center tw-justify-center tw-py-12\"\n        :class=\"[classes.root, { 'tw-text-center': !props.image.src && !slots.image }]\"\n      >\n        <slot name=\"image\">\n          <img\n            v-if=\"props.image.src\"\n            class=\"tw-mr-6\"\n            :alt=\"props.image.alt\"\n            :class=\"classes.image\"\n            :src=\"props.image.src\"\n            data-test=\"stash-empty-state__img\"\n          />\n        </slot>\n\n        {{ props.text || t('ll.emptyState.noResults') }}\n      </div>\n    </template>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: 600px;\n  }\n\n  .image {\n    max-width: 60px;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","_useSlots"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsDE,UAAMA,IAAQC,GAoBRC,IAAUC,EAAa,GACvBC,IAAQC,EAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import { VignetteNames } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n\n  export interface EmptyStateProps {\n    /**\n     * @deprecated Use illustration instead.\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n\n    /**\n     * @deprecated Use title instead.\n     */\n    text?: string;\n\n    /**\n     * the title text of the empty state\n     */\n    title?: string;\n\n    /**\n     * the subtitle text of the empty state\n     */\n    subtitle?: string;\n\n    /**\n     * additional text to place at the bottom of the empty state\n     */\n    footnote?: string;\n\n    /**\n     * The name of the vignette illustration to render\n     */\n    vignette?: VignetteNames;\n\n    /**\n     * The size in pixels of the vignette illustration. Defaults to 300.\n     */\n    vignetteSize?: number;\n  }\n\n  export interface EmptyStateSlots {\n    title?: () => unknown;\n    subtitle?: () => unknown;\n    footnote?: () => unknown;\n    button?: () => unknown;\n    image?: () => unknown;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n\n    title: '',\n    subtitle: '',\n    footnote: '',\n    vignette: undefined,\n    vignetteSize: 300,\n  });\n\n  const classes = useCssModule();\n  const slots = defineSlots<EmptyStateSlots>();\n</script>\n\n<template>\n  <div key=\"empty\" class=\"stash-empty-state\" data-test=\"stash-empty-state\">\n    <template v-if=\"props.title || slots.title || props.subtitle || slots.subtitle || props.vignette\">\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-text-center md:tw-flex-row md:tw-text-left\">\n        <Illustration\n          v-if=\"props.vignette\"\n          data-test=\"stash-empty-state|illustration\"\n          type=\"vignette\"\n          class=\"tw-mx-3\"\n          :name=\"props.vignette\"\n          :size=\"props.vignetteSize\"\n        />\n        <section>\n          <slot name=\"title\">\n            <h3 class=\"tw-mb-1.5\">\n              {{ props.title }}\n            </h3>\n          </slot>\n\n          <slot name=\"subtitle\">\n            <p v-if=\"props.subtitle || slots.subtitle\" :class=\"{ 'tw-mb-8': slots.button, 'tw-mb-0': !slots.button }\">\n              {{ props.subtitle }}\n            </p>\n          </slot>\n\n          <slot name=\"button\"></slot>\n          <slot name=\"footnote\">\n            <p v-if=\"props.footnote\" class=\"tw-mb-0 tw-text-xs\" :class=\"{ 'tw-mt-3': slots.button }\">\n              {{ props.footnote }}\n            </p>\n          </slot>\n        </section>\n      </div>\n    </template>\n\n    <template v-else>\n      <div\n        class=\"tw-mx-auto tw-my-0 tw-flex tw-items-center tw-justify-center tw-py-12\"\n        :class=\"[classes.root, { 'tw-text-center': !props.image.src && !slots.image }]\"\n      >\n        <slot name=\"image\">\n          <img\n            v-if=\"props.image.src\"\n            class=\"tw-mr-6\"\n            :alt=\"props.image.alt\"\n            :class=\"classes.image\"\n            :src=\"props.image.src\"\n            data-test=\"stash-empty-state__img\"\n          />\n        </slot>\n\n        {{ props.text || t('ll.emptyState.noResults') }}\n      </div>\n    </template>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: 600px;\n  }\n\n  .image {\n    max-width: 60px;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","_useSlots"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAqBRC,IAAUC,EAAa,GACvBC,IAAQC,EAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/EmptyState.vue.d.ts

@@ -48,6 +48,7 @@ title: string;
 subtitle: string;
 footnote: string;
 vignette: undefined;
+vignetteSize: number;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EmptyStateProps>, {
 /**
 * An optional image to render
@@ -64,6 +65,7 @@ title: string;
 subtitle: string;
 footnote: string;
 vignette: undefined;
+vignetteSize: number;
 }>>> & Readonly<{}>, {
 title: string;
 image: {
@@ -74,6 +76,7 @@ text: string;
 subtitle: string;
 vignette: "map" | "search" | "calendar" | "dashboard" | "edit" | "megaphone" | "truck" | "warehouse" | "payments" | "light-bulb" | "messages" | "pie-chart" | "api" | "bank" | "basket" | "brand-menu" | "deals" | "document-search" | "empty-tray" | "graph" | "integrations" | "money-bank" | "notifications" | "orders-empty" | "product-cards" | "product-display" | "search-storefront" | "store" | "todo" | "users" | "warehouse-delivery";
 footnote: string;
+vignetteSize: number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, Readonly<EmptyStateSlots> & EmptyStateSlots>;
 export default _default;
 
@@ -105,6 +108,10 @@ export declare interface EmptyStateProps {
      * The name of the vignette illustration to render
      */
     vignette?: VignetteNames;
+    /**
+     * The size in pixels of the vignette illustration. Defaults to 300.
+     */
+    vignetteSize?: number;
 }
 
 export declare interface EmptyStateSlots {

package/dist/ListView.vue.d.ts

@@ -3520,6 +3520,10 @@ footnote: {
 type: PropType<string>;
 default: string;
 };
+vignetteSize: {
+type: PropType<number>;
+default: number;
+};
 }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
 title: string;
 image: {
@@ -3530,6 +3534,7 @@ text: string;
 subtitle: string;
 vignette: "map" | "search" | "calendar" | "dashboard" | "edit" | "megaphone" | "truck" | "warehouse" | "payments" | "light-bulb" | "messages" | "pie-chart" | "api" | "bank" | "basket" | "brand-menu" | "deals" | "document-search" | "empty-tray" | "graph" | "integrations" | "money-bank" | "notifications" | "orders-empty" | "product-cards" | "product-display" | "search-storefront" | "store" | "todo" | "users" | "warehouse-delivery";
 footnote: string;
+vignetteSize: number;
 }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
 P: {};
 B: {};
@@ -3568,6 +3573,10 @@ footnote: {
 type: PropType<string>;
 default: string;
 };
+vignetteSize: {
+type: PropType<number>;
+default: number;
+};
 }>> & Readonly<{}>, {}, {}, {}, {}, {
 title: string;
 image: {
@@ -3578,6 +3587,7 @@ text: string;
 subtitle: string;
 vignette: "map" | "search" | "calendar" | "dashboard" | "edit" | "megaphone" | "truck" | "warehouse" | "payments" | "light-bulb" | "messages" | "pie-chart" | "api" | "bank" | "basket" | "brand-menu" | "deals" | "document-search" | "empty-tray" | "graph" | "integrations" | "money-bank" | "notifications" | "orders-empty" | "product-cards" | "product-display" | "search-storefront" | "store" | "todo" | "users" | "warehouse-delivery";
 footnote: string;
+vignetteSize: number;
 }>;
 __isFragment?: undefined;
 __isTeleport?: undefined;
@@ -3613,6 +3623,10 @@ footnote: {
 type: PropType<string>;
 default: string;
 };
+vignetteSize: {
+type: PropType<number>;
+default: number;
+};
 }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
 title: string;
 image: {
@@ -3623,6 +3637,7 @@ text: string;
 subtitle: string;
 vignette: "map" | "search" | "calendar" | "dashboard" | "edit" | "megaphone" | "truck" | "warehouse" | "payments" | "light-bulb" | "messages" | "pie-chart" | "api" | "bank" | "basket" | "brand-menu" | "deals" | "document-search" | "empty-tray" | "graph" | "integrations" | "money-bank" | "notifications" | "orders-empty" | "product-cards" | "product-display" | "search-storefront" | "store" | "todo" | "users" | "warehouse-delivery";
 footnote: string;
+vignetteSize: number;
 }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
 $slots: Readonly<EmptyStateSlots> & EmptyStateSlots;
 });
@@ -5300,6 +5315,10 @@ footnote: {
 type: PropType<string>;
 default: string;
 };
+vignetteSize: {
+type: PropType<number>;
+default: number;
+};
 }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
 title: string;
 image: {
@@ -5310,6 +5329,7 @@ text: string;
 subtitle: string;
 vignette: "map" | "search" | "calendar" | "dashboard" | "edit" | "megaphone" | "truck" | "warehouse" | "payments" | "light-bulb" | "messages" | "pie-chart" | "api" | "bank" | "basket" | "brand-menu" | "deals" | "document-search" | "empty-tray" | "graph" | "integrations" | "money-bank" | "notifications" | "orders-empty" | "product-cards" | "product-display" | "search-storefront" | "store" | "todo" | "users" | "warehouse-delivery";
 footnote: string;
+vignetteSize: number;
 }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
 P: {};
 B: {};
@@ -5348,6 +5368,10 @@ footnote: {
 type: PropType<string>;
 default: string;
 };
+vignetteSize: {
+type: PropType<number>;
+default: number;
+};
 }>> & Readonly<{}>, {}, {}, {}, {}, {
 title: string;
 image: {
@@ -5358,6 +5382,7 @@ text: string;
 subtitle: string;
 vignette: "map" | "search" | "calendar" | "dashboard" | "edit" | "megaphone" | "truck" | "warehouse" | "payments" | "light-bulb" | "messages" | "pie-chart" | "api" | "bank" | "basket" | "brand-menu" | "deals" | "document-search" | "empty-tray" | "graph" | "integrations" | "money-bank" | "notifications" | "orders-empty" | "product-cards" | "product-display" | "search-storefront" | "store" | "todo" | "users" | "warehouse-delivery";
 footnote: string;
+vignetteSize: number;
 }>;
 __isFragment?: undefined;
 __isTeleport?: undefined;
@@ -5393,6 +5418,10 @@ footnote: {
 type: PropType<string>;
 default: string;
 };
+vignetteSize: {
+type: PropType<number>;
+default: number;
+};
 }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
 title: string;
 image: {
@@ -5403,6 +5432,7 @@ text: string;
 subtitle: string;
 vignette: "map" | "search" | "calendar" | "dashboard" | "edit" | "megaphone" | "truck" | "warehouse" | "payments" | "light-bulb" | "messages" | "pie-chart" | "api" | "bank" | "basket" | "brand-menu" | "deals" | "document-search" | "empty-tray" | "graph" | "integrations" | "money-bank" | "notifications" | "orders-empty" | "product-cards" | "product-display" | "search-storefront" | "store" | "todo" | "users" | "warehouse-delivery";
 footnote: string;
+vignetteSize: number;
 }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
 $slots: Readonly<EmptyStateSlots> & EmptyStateSlots;
 });

package/package.json

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