ablok-components 0.3.65 → 0.3.67

package/dist/components/molecules/media-thumbnails/media-thumbnails.vue.d.ts

@@ -29,6 +29,14 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
         };
         default: never[];
     };
+    stacked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -63,6 +71,14 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
         };
         default: never[];
     };
+    stacked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -71,5 +87,7 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
     messages: Record<string, any>;
     config: Record<string, any>;
     assets: any[];
+    stacked: boolean;
+    showCount: boolean;
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/dist/components/molecules/media-thumbnails/media-thumbnails.vue.js

@@ -1,9 +1,18 @@
-import { defineComponent as o, ref as u, openBlock as d, createElementBlock as r, createVNode as s, withCtx as _, createElementVNode as m, normalizeClass as f } from "vue";
-import h from "../../templates/base-carousel/base-carousel.vue.js";
+import { defineComponent as f, ref as _, openBlock as t, createElementBlock as i, createVNode as s, withCtx as b, createElementVNode as y, normalizeClass as o, Fragment as g, renderList as k, createBlock as C, toDisplayString as v, createCommentVNode as V } from "vue";
+import $ from "../../templates/base-carousel/base-carousel.vue.js";
 /* empty css                                               */
-import b from "../../atoms/base-image/base-image.vue.js";
+import m from "../../atoms/base-image/base-image.vue.js";
 /* empty css                                     */
-const v = { class: "media-thumbnails" }, C = ["onClick", "title"], V = { class: "img-container" }, B = /* @__PURE__ */ o({
+const x = { class: "media-thumbnails" }, B = ["onClick", "title"], j = {
+  key: 0,
+  class: "img-container"
+}, O = {
+  key: 0,
+  class: "media-thumbnails__count-badge"
+}, w = {
+  key: 2,
+  class: "img-container"
+}, I = /* @__PURE__ */ f({
   __name: "media-thumbnails",
   props: {
     modelValue: {
@@ -20,30 +29,53 @@ const v = { class: "media-thumbnails" }, C = ["onClick", "title"], V = { class:
     assets: {
       type: Array,
       default: []
+    },
+    stacked: {
+      type: Boolean,
+      default: !0
+    },
+    showCount: {
+      type: Boolean,
+      default: !0
     }
   },
   emits: ["update:modelValue", "select"],
-  setup(i, { emit: n }) {
-    const l = n, a = u(-1);
-    function c(t) {
-      a.value = t, l("update:modelValue", t), l("select", t);
+  setup(a, { emit: d }) {
+    const c = d, u = _(-1);
+    function r(l) {
+      u.value = l, c("update:modelValue", l), c("select", l);
     }
-    return (t, $) => (d(), r("div", v, [
-      s(h, { items: i.assets }, {
-        "carousel-item": _((e) => [
-          m("button", {
+    return (l, N) => (t(), i("div", x, [
+      s($, { items: a.assets }, {
+        "carousel-item": b((e) => [
+          y("button", {
             type: "button",
-            class: f(["carousel__item media-thumbnails__thumbnail", e.index === i.modelValue || e.index === a.value ? "is-active" : ""]),
-            onClick: (k) => c(e.index),
-            title: `${t.$t("thumbnails.thumbnail")} ${e.index + 1}`
+            class: o(["carousel__item media-thumbnails__thumbnail", e.index === a.modelValue || e.index === u.value ? "is-active" : ""]),
+            onClick: (n) => r(e.index),
+            title: `${l.$t("thumbnails.thumbnail")} ${e.index + 1}`
           }, [
-            m("div", V, [
-              s(b, {
+            e.item.type === "preset" && e.item.thumbnail ? (t(), i("div", j, [
+              s(m, {
+                src: e.item.thumbnail,
+                class: "img-fluid"
+              }, null, 8, ["src"])
+            ])) : e.item.type === "preset" ? (t(), i("div", {
+              key: 1,
+              class: o(["img-container img-container--multi", { "img-container--stacked": a.stacked }])
+            }, [
+              (t(!0), i(g, null, k(e.item.items, (n, h) => (t(), C(m, {
+                key: h,
+                src: n.thumbnail || n.src,
+                class: "img-fluid"
+              }, null, 8, ["src"]))), 128)),
+              a.showCount && Object.keys(e.item.items || {}).length ? (t(), i("span", O, v(Object.keys(e.item.items || {}).length), 1)) : V("", !0)
+            ], 2)) : (t(), i("div", w, [
+              s(m, {
                 src: e.item.thumbnail || e.item.src,
                 class: "img-fluid"
               }, null, 8, ["src"])
-            ])
-          ], 10, C)
+            ]))
+          ], 10, B)
         ]),
         _: 1
       }, 8, ["items"])
@@ -51,5 +83,5 @@ const v = { class: "media-thumbnails" }, C = ["onClick", "title"], V = { class:
   }
 });
 export {
-  B as default
+  I as default
 };

package/dist/components/templates/sortable-list/sortable-list.vue.js

@@ -1,14 +1,14 @@
-import { defineComponent as L, ref as v, computed as m, useSlots as O, watch as f, openBlock as i, createBlock as N, TransitionGroup as C, withModifiers as V, normalizeClass as D, withCtx as M, createElementBlock as g, Fragment as _, renderList as x, createCommentVNode as p, createElementVNode as b, createVNode as A, renderSlot as k, createTextVNode as P, toDisplayString as j } from "vue";
-import { sanitizeHtml as z } from "../../../composables/useSanitize.js";
-import q from "../../atoms/svg-icon/svg-icon.vue.js";
+import { defineComponent as H, ref as c, computed as L, useSlots as I, watch as f, openBlock as i, createBlock as M, TransitionGroup as N, withModifiers as A, normalizeClass as D, withCtx as x, createElementBlock as g, Fragment as O, renderList as C, createCommentVNode as p, createElementVNode as b, createVNode as P, renderSlot as E, createTextVNode as W, toDisplayString as j } from "vue";
+import z from "dompurify";
+import G from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-const F = ["onDragenter", "onDragover", "onDragleave", "onDragend", "onDrop", "innerHTML"], G = ["draggable", "onDragstart", "onDrag", "onDragenter", "onDragover", "onDragleave", "onDragend", "onDrop"], J = {
+const R = ["onDragenter", "onDragover", "onDragleave", "onDragend", "onDrop", "innerHTML"], F = ["draggable", "onDragstart", "onDrag", "onDragenter", "onDragover", "onDragleave", "onDragend", "onDrop"], q = {
   key: 0,
   class: "sortable-list__drag-handle"
-}, K = ["onDragstart", "onDrag"], Q = {
+}, J = ["onDragstart", "onDrag"], K = {
   key: 0,
   class: "sortable-list__item"
-}, ee = /* @__PURE__ */ L({
+}, te = /* @__PURE__ */ H({
   __name: "sortable-list",
   props: {
     modelValue: {
@@ -42,113 +42,157 @@ const F = ["onDragenter", "onDragover", "onDragleave", "onDragend", "onDrop", "i
     "update:dragIndex",
     "update:dragOverIndex"
   ],
-  setup(n, { emit: H }) {
-    const S = n, o = v(!1), l = v(null), s = v(null), d = H, c = m({
+  setup(n, { emit: $ }) {
+    const V = n, l = c(!1), o = c(null), s = c(null), d = $, v = L({
       get() {
-        return S.modelValue;
+        return V.modelValue;
       },
       set(e) {
         d("update:modelValue", e);
       }
-    }), B = m(() => {
-      const e = document.querySelector(".is-drag-item")?.outerHTML;
-      return e ? z(e) : "";
-    }), E = O(), I = m(() => E["list-append"]);
-    function w(e, a) {
-      e.dataTransfer && (e.dataTransfer.dropEffect = "move", e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("index", a.toLocaleString()), o.value = !0, l.value = a);
-    }
-    function y(e, a) {
-      o.value = !1, l.value = null, s.value = null;
-    }
-    function R(e, a) {
+    }), m = c("");
+    function k(e) {
+      const a = e.currentTarget.closest(".sortable-list__item") ?? e.currentTarget;
+      m.value = z.sanitize(a.outerHTML, {
+        ALLOWED_TAGS: [
+          "b",
+          "i",
+          "em",
+          "strong",
+          "u",
+          "span",
+          "p",
+          "br",
+          "a",
+          "ul",
+          "ol",
+          "li",
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "article",
+          "div",
+          "label",
+          "button",
+          "svg",
+          "use"
+        ],
+        ALLOWED_ATTR: [
+          "class",
+          "id",
+          "style",
+          "href",
+          "target",
+          "rel",
+          "title",
+          "type",
+          "aria-expanded",
+          "aria-controls",
+          "aria-labelledby",
+          "data-countdown"
+        ],
+        ALLOW_DATA_ATTR: !0
+      });
     }
+    const S = I(), B = L(() => S["list-append"]);
     function h(e, a) {
-      s.value = l.value !== a ? a : null;
+      e.dataTransfer && (k(e), e.dataTransfer.dropEffect = "move", e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("index", a.toLocaleString()), l.value = !0, o.value = a);
     }
     function T(e, a) {
-      s.value = l.value !== a ? a : null;
+      l.value = !1, o.value = null, s.value = null, m.value = "";
+    }
+    function Q(e, a) {
+    }
+    function y(e, a) {
+      s.value = o.value !== a ? a : null;
+    }
+    function w(e, a) {
+      s.value = o.value !== a ? a : null;
     }
     function U(e, a) {
     }
-    function $(e, a) {
+    function _(e, a) {
       if (e.dataTransfer) {
         e.preventDefault();
-        const u = Number(e.dataTransfer.getData("index")), r = a, t = [...c.value];
-        (r || r === 0) && (u || u === 0) && t.splice(r, 0, t.splice(u, 1)[0]), c.value = t;
+        const u = Number(e.dataTransfer.getData("index")), r = a, t = [...v.value];
+        (r || r === 0) && (u || u === 0) && t.splice(r, 0, t.splice(u, 1)[0]), v.value = t;
       }
     }
-    return f(() => o.value, (e) => {
+    return f(() => l.value, (e) => {
       d("update:isDragging", e);
-    }, { immediate: !0 }), f(() => l.value, (e) => {
+    }, { immediate: !0 }), f(() => o.value, (e) => {
       d("update:dragIndex", e);
     }, { immediate: !0 }), f(() => s.value, (e) => {
       d("update:dragOverIndex", e);
-    }, { immediate: !0 }), (e, a) => (i(), N(C, {
+    }, { immediate: !0 }), (e, a) => (i(), M(N, {
       name: "list",
       tag: "ul",
       class: D(["sortable-list p-0 d-flex gap-2", {
         "flex-column": n.vertical,
         "flex-row flex-wrap": !n.vertical
       }]),
-      onDragover: a[0] || (a[0] = V(() => {
+      onDragover: a[0] || (a[0] = A(() => {
       }, ["prevent"])),
-      onDragenter: a[1] || (a[1] = V(() => {
+      onDragenter: a[1] || (a[1] = A(() => {
       }, ["prevent"]))
     }, {
-      default: M(() => [
-        (i(!0), g(_, null, x(c.value, (u, r) => (i(), g(_, { key: r }, [
-          n.showPreview && o.value && s.value === r ? (i(), g("li", {
+      default: x(() => [
+        (i(!0), g(O, null, C(v.value, (u, r) => (i(), g(O, { key: r }, [
+          n.showPreview && l.value && s.value === r ? (i(), g("li", {
             key: 0,
             class: "sortable-list__item is-drop-target",
-            onDragenter: (t) => h(t, r),
-            onDragover: (t) => T(t, r),
+            onDragenter: (t) => y(t, r),
+            onDragover: (t) => w(t, r),
             onDragleave: (t) => void 0,
-            onDragend: (t) => y(),
-            onDrop: (t) => $(t, r),
-            innerHTML: B.value
-          }, null, 40, F)) : p("", !0),
+            onDragend: (t) => T(),
+            onDrop: (t) => _(t, r),
+            innerHTML: m.value
+          }, null, 40, R)) : p("", !0),
           b("li", {
             class: D(["sortable-list__item d-flex", {
-              "is-drag-item": o.value && l.value === r,
-              "is-drop-target": o.value && s.value === r && !n.showPreview,
+              "is-drag-item": l.value && o.value === r,
+              "is-drop-target": l.value && s.value === r && !n.showPreview,
               "align-items-center gap-2": n.vertical
             }]),
             draggable: !n.showDragHandle,
-            onDragstart: (t) => w(t, r),
+            onDragstart: (t) => h(t, r),
             onDrag: (t) => void 0,
-            onDragenter: (t) => h(t, r),
-            onDragover: (t) => T(t, r),
+            onDragenter: (t) => y(t, r),
+            onDragover: (t) => w(t, r),
             onDragleave: (t) => void 0,
-            onDragend: (t) => y(),
-            onDrop: (t) => $(t, r)
+            onDragend: (t) => T(),
+            onDrop: (t) => _(t, r)
           }, [
-            n.showDragHandle ? (i(), g("div", J, [
+            n.showDragHandle ? (i(), g("div", q, [
               b("button", {
                 type: "button",
                 class: "btn",
                 draggable: "true",
-                onDragstart: (t) => w(t, r),
+                onDragstart: (t) => h(t, r),
                 onDrag: (t) => void 0
               }, [
-                A(q, { symbol: "drag" })
-              ], 40, K)
+                P(G, { symbol: "drag" })
+              ], 40, J)
             ])) : p("", !0),
             b("div", {
               class: D(["sortable-list__item-content", {
                 "flex-grow-1": n.vertical
               }])
             }, [
-              k(e.$slots, "list-item", {
+              E(e.$slots, "list-item", {
                 item: u,
                 index: r
               }, () => [
-                P(j(u), 1)
+                W(j(u), 1)
               ])
             ], 2)
-          ], 42, G)
+          ], 42, F)
         ], 64))), 128)),
-        I.value ? (i(), g("li", Q, [
-          k(e.$slots, "list-append")
+        B.value ? (i(), g("li", K, [
+          E(e.$slots, "list-append")
         ])) : p("", !0)
       ]),
       _: 3
@@ -156,5 +200,5 @@ const F = ["onDragenter", "onDragover", "onDragleave", "onDragend", "onDrop", "i
   }
 });
 export {
-  ee as default
+  te as default
 };

package/dist/types/media.d.ts

@@ -11,3 +11,21 @@ export interface IMediaObject {
  * Single media value (non-array)
  */
 export type MediaValue = IMediaObject | string | undefined;
+/**
+ * A single layer inside a preset asset (background, overlay, object, …)
+ */
+export interface IPresetAssetItem {
+    src: string;
+    thumbnail?: string;
+    type: string;
+    mediaType: string;
+}
+/**
+ * Preset asset — a named collection of layered items with an optional composite thumbnail
+ */
+export interface IPresetAsset {
+    type: 'preset';
+    thumbnail?: string;
+    filters?: string[];
+    items: Record<string, IPresetAssetItem>;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.65",
+  "version": "0.3.67",
   "dependencies": {
     "date-fns": "^3.0.0",
     "dompurify": "^3.3.1",
@@ -10,8 +10,6 @@
     "ofetch": "^1.5.1"
   },
   "peerDependencies": {
-    "vue": "^3.5.27",
-    "vue-i18n": "^11.2.8",
     "@tiptap/core": "^3.18.0",
     "@tiptap/extension-bold": "^3.18.0",
     "@tiptap/extension-highlight": "^3.18.0",
@@ -21,11 +19,13 @@
     "@tiptap/starter-kit": "^3.18.0",
     "@tiptap/vue-3": "^3.18.0",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
-    "leaflet": "^1.9.4",
     "@vuepic/vue-datepicker": "^12.1.0",
     "canvas-confetti": "^1.9.4",
+    "leaflet": "^1.9.4",
+    "qr-code-styling": "^1.9.2",
+    "vue": "^3.5.27",
     "vue-advanced-cropper": "^2.8.9",
-    "qr-code-styling": "^1.9.2"
+    "vue-i18n": "^11.2.8"
   },
   "peerDependenciesMeta": {
     "@tiptap/core": {
@@ -73,7 +73,9 @@
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^1.0.0-beta.1",
+    "@popperjs/core": "^2.11.8",
     "@types/canvas-confetti": "^1.9.0",
+    "@types/dompurify": "^3.0.5",
     "@types/leaflet": "^1.9.21",
     "@types/lodash": "^4.17.23",
     "@types/node": "^25.1.0",
@@ -82,9 +84,7 @@
     "@vitest/ui": "^4.1.5",
     "@vue/compiler-dom": "^3.5.33",
     "@vue/test-utils": "^2.4.10",
-    "@types/dompurify": "^3.0.5",
     "bootstrap": "^5.3.8",
-    "@popperjs/core": "^2.11.8",
     "flexsearch": "^0.8.212",
     "glob": "^13.0.0",
     "happy-dom": "^20.9.0",