ablok-photobooth 0.2.40 → 0.2.41

package/dist/ablok-photobooth.js

@@ -1,6 +1,6 @@
 import { _ as a } from "./chunks/photo-app.vue_vue_type_style_index_0_lang-CQsO0T0U.js";
 import { _ as e } from "./chunks/fabric-canvas.vue_vue_type_style_index_0_lang-B-D65X2t.js";
-import { _ as s } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BUDOTH0K.js";
+import { _ as s } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BHKoShl5.js";
 import { _ as m } from "./chunks/face-swap.vue_vue_type_style_index_0_lang-B0EJ4Q3T.js";
 import { _ } from "./chunks/color-booth.vue_vue_type_style_index_0_lang-Cxo8ZMRt.js";
 export {

package/dist/chunks/creative-booth.vue_vue_type_style_index_0_lang-BHKoShl5.js

@@ -0,0 +1,248 @@
+import { defineComponent as x, ref as c, computed as l, watch as S, openBlock as u, createElementBlock as v, createElementVNode as h, createVNode as B, normalizeClass as M, createCommentVNode as b, createBlock as V } from "vue";
+import w from "ablok-components/components/molecules/media-thumbnails/media-thumbnails.vue";
+import { _ as A } from "./fabric-canvas.vue_vue_type_style_index_0_lang-B-D65X2t.js";
+const C = { class: "creative-booth" }, D = { class: "media-container" }, O = ["innerHTML"], E = { class: "creative-booth__thumbnails" }, F = [
+  {
+    type: "background",
+    thumbnail: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
+    src: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
+    mediaType: "image",
+    filters: ["asset-01", "asset-02"]
+  },
+  {
+    type: "background",
+    thumbnail: "/themes/corp/backgrounds/corp-background-09-white.jpg",
+    src: "/themes/corp/backgrounds/corp-background-09-white.jpg",
+    mediaType: "image",
+    filters: ["asset-01", "asset-02"]
+  },
+  {
+    type: "preset",
+    thumbnail: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
+    filters: ["asset-01"],
+    items: {
+      background: {
+        type: "background",
+        src: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
+        thumbnail: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
+        mediaType: "image"
+      },
+      overlay: {
+        type: "overlay",
+        src: "/themes/corp/overlays/corporate-your-overlay-1024x1024.png",
+        thumbnail: "/themes/corp/overlays/corporate-your-overlay-1024x1024.png",
+        mediaType: "image"
+      },
+      object: {
+        type: "object",
+        src: "/themes/corp/stickers/corporate-your-sticker-512x512.svg",
+        thumbnail: "/themes/corp/stickers/corporate-your-sticker-512x512.svg",
+        mediaType: "svg"
+      }
+    }
+  },
+  {
+    type: "overlay",
+    src: "/themes/corp/overlays/corporate-your-overlay-1024x1024.png",
+    mediaType: "image",
+    filters: ["asset-01"]
+  },
+  {
+    type: "overlay",
+    src: "/themes/corp/overlays/corp-overlay-02-white.png",
+    mediaType: "image",
+    filters: ["asset-01"]
+  },
+  {
+    type: "object",
+    src: "/themes/corp/stickers/corporate-your-sticker-512x512.svg",
+    mediaType: "svg",
+    filters: ["asset-02"]
+  },
+  {
+    type: "object",
+    src: "/themes/corp/stickers/corp-sticker-01.svg",
+    mediaType: "svg"
+  },
+  {
+    type: "object",
+    src: "/themes/corp/stickers/corp-sticker-02.svg",
+    mediaType: "svg",
+    filters: ["asset-01", "asset-02"]
+  }
+], I = /* @__PURE__ */ x({
+  __name: "creative-booth",
+  props: {
+    modelValue: {
+      default: null
+    },
+    jsonModel: {
+      type: null,
+      default: void 0
+    },
+    config: {
+      type: Object,
+      default: null
+    },
+    feature: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    variant: {
+      type: String,
+      default: "light"
+    },
+    messages: {
+      type: Object,
+      default: {}
+    },
+    assets: {
+      type: Array,
+      default: () => F
+    },
+    assetFilters: {
+      type: Array,
+      default: () => []
+    },
+    exportToSvg: {
+      type: Boolean,
+      default: !1
+    },
+    resetState: {
+      type: Boolean,
+      default: !1
+    },
+    ratio: {
+      type: String,
+      default: "4x3"
+    },
+    themeData: {
+      type: Object,
+      default: () => ({})
+    },
+    autoSelect: Number,
+    ready: {
+      type: Boolean,
+      default: !1
+    },
+    pending: {
+      type: Boolean,
+      default: !1
+    },
+    emitPending: {
+      type: Boolean,
+      default: !1
+    },
+    animationDuration: {
+      type: Number,
+      default: 320
+    },
+    stackedThumbnails: {
+      type: Boolean,
+      default: !1
+    },
+    showThumbnailCount: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "update:jsonModel", "update:ready", "update:pending"],
+  setup(a, { emit: k }) {
+    const s = a, o = k, n = c(), j = c(), d = c(!1), i = l(
+      () => s.assetFilters && s.assetFilters.length > 0 ? s.assets.filter((e) => !e.filters || e.filters.length == 0 || s.assetFilters.some((t) => e.filters.includes(t))) : s.assets
+    ), p = l({
+      get() {
+        return s.modelValue;
+      },
+      set(e) {
+        o("update:modelValue", e);
+      }
+    }), m = l({
+      get() {
+        return s.jsonModel;
+      },
+      set(e) {
+        o("update:jsonModel", e);
+      }
+    }), y = l({
+      get() {
+        return s.pending;
+      },
+      set(e) {
+        s.ready && o("update:pending", e);
+      }
+    });
+    S(j, async (e, t) => {
+      e && e !== t && o("update:modelValue", e);
+    }, { deep: !0 });
+    function g(e) {
+      switch (e.type) {
+        case "background":
+          n.value?.setBackgroundImage(e);
+          break;
+        case "overlay":
+          n.value?.setOverlayImage(e);
+          break;
+        default:
+          n.value?.addCanvasObject(e);
+      }
+    }
+    function f(e) {
+      if (typeof e < "u") {
+        const t = i.value[e];
+        t.type === "preset" ? Object.values(t.items).forEach(g) : g(t);
+      }
+    }
+    const T = (async () => {
+      if (d.value = !0, s.autoSelect !== void 0) {
+        const e = s.autoSelect >= 0 ? s.autoSelect : Math.floor(Math.random() * i.value.length);
+        f(e);
+      }
+      o("update:ready", !0);
+    });
+    return (e, t) => (u(), v("div", C, [
+      h("div", D, [
+        B(A, {
+          modelValue: p.value,
+          "onUpdate:modelValue": t[0] || (t[0] = (r) => p.value = r),
+          "json-model": m.value,
+          "onUpdate:jsonModel": t[1] || (t[1] = (r) => m.value = r),
+          pending: y.value,
+          "onUpdate:pending": t[2] || (t[2] = (r) => y.value = r),
+          ref_key: "canvas",
+          ref: n,
+          "reset-state": a.resetState,
+          options: { themeData: a.themeData },
+          feature: a.feature,
+          required: a.required,
+          class: M(`${a.ratio ? `aspect-ratio aspect-ratio--${a.ratio}` : ""}`),
+          onOnReady: T,
+          "emit-pending": a.emitPending,
+          "animation-duration": a.animationDuration
+        }, null, 8, ["modelValue", "json-model", "pending", "reset-state", "options", "feature", "required", "class", "emit-pending", "animation-duration"])
+      ]),
+      a.messages.headline ? (u(), v("p", {
+        key: 0,
+        class: "headline",
+        innerHTML: a.messages.headline
+      }, null, 8, O)) : b("", !0),
+      h("div", E, [
+        d.value ? (u(), V(w, {
+          key: 0,
+          assets: i.value,
+          stacked: a.stackedThumbnails,
+          "show-count": a.showThumbnailCount,
+          onSelect: f
+        }, null, 8, ["assets", "stacked", "show-count"])) : b("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  F as D,
+  I as _
+};

package/dist/creative-booth.js

@@ -1,5 +1,5 @@
-import { _ as o } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BUDOTH0K.js";
-import { D as m } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BUDOTH0K.js";
+import { _ as o } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BHKoShl5.js";
+import { D as m } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BHKoShl5.js";
 export {
   m as DEFAULT_ASSETS,
   o as default

package/dist/types/components/creative-booth.vue.d.ts

@@ -1,22 +1,20 @@
-export declare const DEFAULT_ASSETS: ({
-    type: string;
-    thumbnail: string;
+import { PropType } from 'vue';
+export interface AssetItem {
+    type: 'background' | 'overlay' | 'object';
     src: string;
-    mediaType: string;
-    filters: string[];
-} | {
-    type: string;
-    src: string;
-    mediaType: string;
-    filters: string[];
-    thumbnail?: undefined;
-} | {
-    type: string;
-    src: string;
-    mediaType: string;
-    thumbnail?: undefined;
-    filters?: undefined;
-})[];
+    mediaType: 'image' | 'svg';
+    thumbnail?: string;
+    filters?: string[];
+    name?: string;
+}
+export interface PresetAsset {
+    type: 'preset';
+    thumbnail?: string;
+    filters?: string[];
+    items: Record<string, AssetItem>;
+}
+export type CreativeAsset = AssetItem | PresetAsset;
+export declare const DEFAULT_ASSETS: CreativeAsset[];
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: {
         default: null;
@@ -46,41 +44,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: {};
     };
     assets: {
-        type: {
-            (arrayLength: number): any[];
-            (...items: any[]): any[];
-            new (arrayLength: number): any[];
-            new (...items: any[]): any[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
-            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-        default: () => ({
-            type: string;
-            thumbnail: string;
-            src: string;
-            mediaType: string;
-            filters: string[];
-        } | {
-            type: string;
-            src: string;
-            mediaType: string;
-            filters: string[];
-            thumbnail?: undefined;
-        } | {
-            type: string;
-            src: string;
-            mediaType: string;
-            thumbnail?: undefined;
-            filters?: undefined;
-        })[];
+        type: PropType<CreativeAsset[]>;
+        default: () => CreativeAsset[];
     };
     assetFilters: {
         type: ArrayConstructor;
@@ -119,6 +84,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    stackedThumbnails: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showThumbnailCount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     "update:jsonModel": (...args: any[]) => void;
@@ -153,41 +126,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: {};
     };
     assets: {
-        type: {
-            (arrayLength: number): any[];
-            (...items: any[]): any[];
-            new (arrayLength: number): any[];
-            new (...items: any[]): any[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
-            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-        default: () => ({
-            type: string;
-            thumbnail: string;
-            src: string;
-            mediaType: string;
-            filters: string[];
-        } | {
-            type: string;
-            src: string;
-            mediaType: string;
-            filters: string[];
-            thumbnail?: undefined;
-        } | {
-            type: string;
-            src: string;
-            mediaType: string;
-            thumbnail?: undefined;
-            filters?: undefined;
-        })[];
+        type: PropType<CreativeAsset[]>;
+        default: () => CreativeAsset[];
     };
     assetFilters: {
         type: ArrayConstructor;
@@ -226,6 +166,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    stackedThumbnails: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showThumbnailCount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:jsonModel"?: ((...args: any[]) => any) | undefined;
@@ -246,9 +194,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     animationDuration: number;
     themeData: Record<string, any>;
     config: Record<string, any>;
-    assets: any[];
+    assets: CreativeAsset[];
     assetFilters: unknown[];
     ready: boolean;
+    stackedThumbnails: boolean;
+    showThumbnailCount: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     canvas: ({
         $: import('vue').ComponentInternalInstance;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ablok-photobooth",
   "private": false,
-  "version": "0.2.40",
+  "version": "0.2.41",
   "type": "module",
   "peerDependencies": {
     "@popperjs/core": "^2.11.6",
-    "ablok-components": "^0.3.59",
+    "ablok-components": "^0.3.68",
     "bootstrap": "^5.3.8",
     "fabric": "^7.1.0",
     "lodash": "^4.17.23",
@@ -31,6 +31,7 @@
     "@types/lodash": "^4.17.23",
     "@types/node": "^25.1.0",
     "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.10",
     "histoire": "^1.0.0-beta.1",
     "path": "^0.12.7",
     "sass": "^1.97.3",
@@ -38,9 +39,8 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-mkcert": "^1.17.9",
-    "vue-tsc": "^3.2.4",
     "vitest": "^4.1.5",
-    "@vue/test-utils": "^2.4.10"
+    "vue-tsc": "^3.2.4"
   },
   "files": [
     "dist"

package/dist/chunks/creative-booth.vue_vue_type_style_index_0_lang-BUDOTH0K.js

@@ -1,210 +0,0 @@
-import { defineComponent as S, ref as d, computed as l, watch as T, openBlock as u, createElementBlock as g, createElementVNode as v, createVNode as M, normalizeClass as V, createCommentVNode as h, createBlock as B } from "vue";
-import x from "ablok-components/components/molecules/media-thumbnails/media-thumbnails.vue";
-import { _ as D } from "./fabric-canvas.vue_vue_type_style_index_0_lang-B-D65X2t.js";
-const A = { class: "creative-booth" }, O = { class: "media-container" }, w = ["innerHTML"], C = { class: "creative-booth__thumbnails" }, F = [
-  {
-    type: "background",
-    thumbnail: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
-    src: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
-    mediaType: "image",
-    filters: ["asset-01", "asset-02"]
-  },
-  {
-    type: "background",
-    thumbnail: "/themes/corp/backgrounds/corp-background-09-white.jpg",
-    src: "/themes/corp/backgrounds/corp-background-09-white.jpg",
-    mediaType: "image",
-    filters: ["asset-01", "asset-02"]
-  },
-  {
-    type: "overlay",
-    src: "/themes/corp/overlays/corporate-your-overlay-1024x1024.png",
-    mediaType: "image",
-    filters: ["asset-01"]
-  },
-  {
-    type: "overlay",
-    src: "/themes/corp/overlays/corp-overlay-02-white.png",
-    mediaType: "image",
-    filters: ["asset-01"]
-  },
-  {
-    type: "object",
-    src: "/themes/corp/stickers/corporate-your-sticker-512x512.svg",
-    mediaType: "svg",
-    filters: ["asset-02"]
-  },
-  {
-    type: "object",
-    src: "/themes/corp/stickers/corp-sticker-01.svg",
-    mediaType: "svg"
-  },
-  {
-    type: "object",
-    src: "/themes/corp/stickers/corp-sticker-02.svg",
-    mediaType: "svg",
-    filters: ["asset-01", "asset-02"]
-  }
-], U = /* @__PURE__ */ S({
-  __name: "creative-booth",
-  props: {
-    modelValue: {
-      default: null
-    },
-    jsonModel: {
-      type: null,
-      default: void 0
-    },
-    config: {
-      type: Object,
-      default: null
-    },
-    feature: {
-      type: String,
-      default: ""
-    },
-    required: {
-      type: Boolean,
-      default: !1
-    },
-    variant: {
-      type: String,
-      default: "light"
-    },
-    messages: {
-      type: Object,
-      default: {}
-    },
-    assets: {
-      type: Array,
-      default: () => F
-    },
-    assetFilters: {
-      type: Array,
-      default: () => []
-    },
-    exportToSvg: {
-      type: Boolean,
-      default: !1
-    },
-    resetState: {
-      type: Boolean,
-      default: !1
-    },
-    ratio: {
-      type: String,
-      default: "4x3"
-    },
-    themeData: {
-      type: Object,
-      default: () => ({})
-    },
-    autoSelect: Number,
-    ready: {
-      type: Boolean,
-      default: !1
-    },
-    pending: {
-      type: Boolean,
-      default: !1
-    },
-    emitPending: {
-      type: Boolean,
-      default: !1
-    },
-    animationDuration: {
-      type: Number,
-      default: 320
-    }
-  },
-  emits: ["update:modelValue", "update:jsonModel", "update:ready", "update:pending"],
-  setup(s, { emit: b }) {
-    const a = s, o = b, r = d(), k = d(), c = d(!1), i = l(
-      () => a.assetFilters && a.assetFilters.length > 0 ? a.assets.filter((e) => !e.filters || e.filters.length == 0 || a.assetFilters.some((t) => e.filters.includes(t))) : a.assets
-    ), m = l({
-      get() {
-        return a.modelValue;
-      },
-      set(e) {
-        o("update:modelValue", e);
-      }
-    }), p = l({
-      get() {
-        return a.jsonModel;
-      },
-      set(e) {
-        o("update:jsonModel", e);
-      }
-    }), f = l({
-      get() {
-        return a.pending;
-      },
-      set(e) {
-        a.ready && o("update:pending", e);
-      }
-    });
-    T(k, async (e, t) => {
-      e && e !== t && o("update:modelValue", e);
-    }, { deep: !0 });
-    function y(e) {
-      if (typeof e < "u") {
-        const t = i.value[e];
-        switch (t.type) {
-          case "background":
-            r.value?.setBackgroundImage(t);
-            break;
-          case "overlay":
-            r.value.setOverlayImage(t);
-            break;
-          default:
-            r.value.addCanvasObject(t);
-        }
-      }
-    }
-    const j = (async () => {
-      if (c.value = !0, a.autoSelect !== void 0) {
-        const e = a.autoSelect >= 0 ? a.autoSelect : Math.floor(Math.random() * i.value.length);
-        y(e);
-      }
-      o("update:ready", !0);
-    });
-    return (e, t) => (u(), g("div", A, [
-      v("div", O, [
-        M(D, {
-          modelValue: m.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (n) => m.value = n),
-          "json-model": p.value,
-          "onUpdate:jsonModel": t[1] || (t[1] = (n) => p.value = n),
-          pending: f.value,
-          "onUpdate:pending": t[2] || (t[2] = (n) => f.value = n),
-          ref_key: "canvas",
-          ref: r,
-          "reset-state": s.resetState,
-          options: { themeData: s.themeData },
-          feature: s.feature,
-          required: s.required,
-          class: V(`${s.ratio ? `aspect-ratio aspect-ratio--${s.ratio}` : ""}`),
-          onOnReady: j,
-          "emit-pending": s.emitPending,
-          "animation-duration": s.animationDuration
-        }, null, 8, ["modelValue", "json-model", "pending", "reset-state", "options", "feature", "required", "class", "emit-pending", "animation-duration"])
-      ]),
-      s.messages.headline ? (u(), g("p", {
-        key: 0,
-        class: "headline",
-        innerHTML: s.messages.headline
-      }, null, 8, w)) : h("", !0),
-      v("div", C, [
-        c.value ? (u(), B(x, {
-          key: 0,
-          assets: i.value,
-          onSelect: y
-        }, null, 8, ["assets"])) : h("", !0)
-      ])
-    ]));
-  }
-});
-export {
-  F as D,
-  U as _
-};