ablok-components 0.3.69 → 0.3.72

package/dist/components/organisms/preset-uploader/preset-uploader.vue.d.ts

@@ -112,7 +112,7 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
             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: () => never[];
+        default: () => string[];
     };
 }>, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
@@ -230,7 +230,7 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
             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: () => never[];
+        default: () => string[];
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

package/dist/components/organisms/preset-uploader/preset-uploader.vue.js

@@ -1,40 +1,40 @@
-import { defineComponent as _, computed as ee, ref as te, watch as P, nextTick as ae, reactive as y, openBlock as c, createElementBlock as f, unref as oe, createCommentVNode as O, createElementVNode as m, createVNode as d, withCtx as p, createBlock as h, normalizeStyle as v, withModifiers as N, Fragment as A, createTextVNode as L, renderList as le } from "vue";
+import { defineComponent as _, computed as ee, ref as te, watch as P, nextTick as ae, reactive as y, openBlock as d, createElementBlock as h, unref as oe, createCommentVNode as O, createElementVNode as i, createVNode as c, withCtx as p, createBlock as f, normalizeStyle as v, withModifiers as N, Fragment as W, createTextVNode as L, renderList as le } from "vue";
 import { uniqueId as H } from "../../../utilities/helpers.js";
 import { sanitizeHtml as ne } from "../../../composables/useSanitize.js";
 import se from "../../templates/sortable-list/sortable-list.vue.js";
 /* empty css                                               */
-import R from "../../molecules/file-upload/file-upload.vue.js";
+import j from "../../molecules/file-upload/file-upload.vue.js";
 /* empty css                                           */
-import j from "../../molecules/image-upload/image-upload.vue.js";
+import A from "../../molecules/image-upload/image-upload.vue.js";
 /* empty css                                             */
-import I from "../../molecules/input-dropdown/input-dropdown.vue.js";
+import z from "../../molecules/input-dropdown/input-dropdown.vue.js";
 /* empty css                                                 */
-import r from "../../atoms/svg-icon/svg-icon.vue.js";
+import b from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-import C from "../../templates/popover-dialog/popover-dialog.vue.js";
+import R from "../../templates/popover-dialog/popover-dialog.vue.js";
 /* empty css                                                 */
-const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "preset-uploader__list" }, ce = ["src"], ue = ["onClick"], pe = ["popovertarget"], re = { class: "preset-uploader__popover p-2 d-flex flex-column gap-2" }, be = {
+const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "preset-uploader__list" }, ce = ["popovertarget"], ue = ["src"], pe = ["onClick"], re = { class: "preset-uploader__popover p-2 d-flex gap-2" }, he = ["popovertarget"], fe = ["src"], be = { class: "d-flex flex-column gap-2" }, ye = {
   role: "button",
   class: "btn btn-sm w-100 d-inline-flex align-items-center"
-}, fe = {
+}, ge = {
   role: "button",
   class: "btn btn-sm w-100 d-inline-flex align-items-center"
-}, he = {
+}, ve = {
   key: 1,
   class: "preset-group border border-2 rounded d-flex gap-1 p-1"
-}, ye = ["src"], ge = ["onClick"], ve = ["popovertarget"], Ve = { class: "preset-uploader__popover p-2" }, $e = {
+}, $e = ["popovertarget"], Ve = ["src"], ke = ["src"], we = ["onClick"], Te = { class: "preset-uploader__popover p-2 d-flex gap-2" }, Ue = ["popovertarget"], Se = ["src"], ze = { class: "d-flex flex-column gap-2" }, Ie = {
   role: "button",
-  class: "btn img-thumbnail d-flex justify-content-center align-items-center"
-}, ke = {
+  class: "img-thumbnail text-dark d-flex justify-content-center align-items-center"
+}, Fe = {
   role: "button",
-  class: "btn img-thumbnail d-flex justify-content-center align-items-center"
-}, we = { class: "preset-uploader__popover p-2" }, Te = ["onClick"], Ue = {
+  class: "img-thumbnail text-dark d-flex justify-content-center align-items-center"
+}, Pe = { class: "preset-uploader__popover p-2" }, Oe = ["onClick"], Ne = {
   role: "button",
   class: "img-thumbnail d-flex justify-content-center align-items-center"
-}, Se = {
+}, je = {
   role: "button",
-  class: "img-thumbnail d-flex justify-content-center align-items-center"
-}, He = /* @__PURE__ */ _({
+  class: "img-thumbnail text-dark d-flex justify-content-center align-items-center"
+}, Xe = /* @__PURE__ */ _({
   __name: "preset-uploader",
   props: {
     modelValue: {
@@ -120,12 +120,12 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
     },
     typeOptions: {
       type: Array,
-      default: () => []
+      default: () => ["background", "overlay", "object"]
     }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: q }) {
-    const i = e, b = q;
+    const m = e, r = q;
     function E(t) {
       return t?.type === "preset";
     }
@@ -133,32 +133,32 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
       if (t.includes("data:image"))
         return t.includes("data:image/svg") ? "Svg" : "Image";
       const o = t.split(".").pop()?.split("?")[0]?.toLowerCase() ?? "";
-      return i.mediaTypeMap[o] ?? "";
+      return m.mediaTypeMap[o] ?? "";
     }
-    const B = ee({
+    const C = ee({
       get() {
-        return i.modelValue;
+        return m.modelValue;
       },
       set(t) {
-        b("update:modelValue", t);
+        r("update:modelValue", t);
       }
     }), g = te("");
     P(g, async (t, o) => {
       if (t && o !== t) {
         const n = {
           src: t,
-          name: `${i.name}-${i.modelValue.length}`,
+          name: `${m.name}-${m.modelValue.length}`,
           mediaType: T(t)
         };
-        i.type && (n.type = i.type), b("update:modelValue", [...i.modelValue, n]), await ae(), g.value = "";
+        m.type && m.typeOptions.includes(m.type) && (n.type = m.type), r("update:modelValue", [...m.modelValue, n]), await ae(), g.value = "";
       }
     });
-    const V = y({}), $ = y({}), U = y({}), k = y({}), S = y({}), w = y({}), M = y({});
+    const $ = y({}), V = y({}), U = y({}), k = y({}), S = y({}), w = y({}), B = y({});
     P(S, (t) => {
       for (const [o, n] of Object.entries(t))
         if (!n) {
           const a = Number(o);
-          delete V[a], delete $[a];
+          delete $[a], delete V[a];
         }
     }, { deep: !0 }), P(w, (t) => {
       for (const [o, n] of Object.entries(t))
@@ -167,32 +167,32 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
           delete U[a], delete k[a];
         }
     }, { deep: !0 });
-    function W(t, o) {
-      o && (V[t] = o);
+    function M(t, o) {
+      o && ($[t] = o);
     }
     function D(t, o) {
       o && (U[t] = o, w[t] = !0);
     }
-    function z(t) {
-      const o = [...i.modelValue];
-      o.splice(t, 1), b("update:modelValue", o);
+    function I(t) {
+      const o = [...m.modelValue];
+      o.splice(t, 1), r("update:modelValue", o);
     }
     function K(t, o) {
-      b("update:modelValue", i.modelValue.map(
+      r("update:modelValue", m.modelValue.map(
         (n, a) => a === t ? { ...n, type: o } : n
       ));
     }
     function G(t, o, n) {
-      const a = i.modelValue[t];
-      b("update:modelValue", i.modelValue.map(
+      const a = m.modelValue[t];
+      r("update:modelValue", m.modelValue.map(
         (l, s) => s === t ? { ...l, items: { ...l.items, [o]: { ...a.items[o], type: n } } } : l
       ));
     }
     function J(t, o) {
-      $[t] = o, Q(t);
+      V[t] = o, Q(t);
     }
     function Q(t) {
-      const o = i.modelValue[t], n = o.type || i.type || "item", a = V[t], l = $[t], s = {
+      const o = m.modelValue[t], n = o.type || m.type || "item", a = $[t], l = V[t], s = {
         type: "preset",
         items: {
           [n]: {
@@ -209,7 +209,7 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
           }
         }
       };
-      delete V[t], delete $[t], S[t] = !1, b("update:modelValue", i.modelValue.map(
+      delete $[t], delete V[t], S[t] = !1, r("update:modelValue", m.modelValue.map(
         (u, F) => F === t ? s : u
       ));
     }
@@ -217,7 +217,7 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
       k[t] = o, Y(t);
     }
     function Y(t) {
-      const o = U[t], n = k[t], a = i.modelValue[t], l = {
+      const o = U[t], n = k[t], a = m.modelValue[t], l = {
         ...a,
         items: {
           ...a.items,
@@ -229,79 +229,94 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
           }
         }
       };
-      delete U[t], delete k[t], w[t] = !1, b("update:modelValue", i.modelValue.map(
+      delete U[t], delete k[t], w[t] = !1, r("update:modelValue", m.modelValue.map(
         (s, u) => u === t ? l : s
       ));
     }
     function Z(t, o) {
-      const n = i.modelValue[t], a = Object.keys(n.items).filter((l) => l !== o);
+      const n = m.modelValue[t], a = Object.keys(n.items).filter((l) => l !== o);
       if (a.length <= 1) {
         const l = a[0], s = l ? n.items[l] : null;
         if (s) {
           const u = {
             src: s.src,
-            name: `${i.name}-${t}`,
+            name: `${m.name}-${t}`,
             type: s.type,
             mediaType: s.mediaType
           };
-          b("update:modelValue", i.modelValue.map(
+          r("update:modelValue", m.modelValue.map(
             (F, x) => x === t ? u : F
           ));
         } else
-          z(t);
+          I(t);
       } else {
         const l = { ...n.items };
-        delete l[o], b("update:modelValue", i.modelValue.map(
+        delete l[o], r("update:modelValue", m.modelValue.map(
           (s, u) => u === t ? { ...n, items: l } : s
         ));
       }
     }
-    return (t, o) => (c(), f("div", ie, [
-      e.label ? (c(), f("label", {
+    return (t, o) => (d(), h("div", ie, [
+      e.label ? (d(), h("label", {
         key: 0,
         innerHTML: oe(ne)(e.label)
       }, null, 8, me)) : O("", !0),
-      m("div", de, [
-        d(se, {
-          modelValue: B.value,
-          "onUpdate:modelValue": o[2] || (o[2] = (n) => B.value = n),
+      i("div", de, [
+        c(se, {
+          modelValue: C.value,
+          "onUpdate:modelValue": o[2] || (o[2] = (n) => C.value = n),
           vertical: !1,
           class: "mb-3"
         }, {
           "list-item": p(({ item: n, index: a }) => [
-            E(n) ? (c(), f("div", he, [
-              (c(!0), f(A, null, le(n.items, (l, s) => (c(), f("div", {
+            E(n) ? (d(), h("div", ve, [
+              (d(!0), h(W, null, le(n.items, (l, s) => (d(), h("div", {
                 key: s,
                 class: "img-container",
                 style: v(e.showTypeDropdown ? { anchorName: `--${e.name}-si-${a}-${s}` } : {})
               }, [
-                m("img", {
+                e.showTypeDropdown ? (d(), h("button", {
+                  key: 0,
+                  class: "img-trigger",
+                  popovertarget: `${e.name}-si-${a}-${s}`
+                }, [
+                  i("img", {
+                    src: l.thumbnail || l.src,
+                    class: "img-thumbnail border-0 p-0"
+                  }, null, 8, Ve)
+                ], 8, $e)) : (d(), h("img", {
+                  key: 1,
                   src: l.thumbnail || l.src,
                   class: "img-thumbnail border-0 p-0"
-                }, null, 8, ye),
-                m("button", {
+                }, null, 8, ke)),
+                i("button", {
                   onClick: N((u) => Z(a, String(s)), ["prevent"]),
                   class: "btn btn--close"
                 }, [
-                  d(r, { symbol: "x" })
-                ], 8, ge),
-                e.showTypeDropdown ? (c(), f(A, { key: 0 }, [
-                  m("button", {
-                    class: "btn btn--action",
-                    popovertarget: `${e.name}-si-${a}-${s}`
-                  }, [
-                    d(r, { symbol: "settings" })
-                  ], 8, ve),
-                  d(C, {
-                    id: `${e.name}-si-${a}-${s}`,
-                    modelValue: M[`${a}-${s}`],
-                    "onUpdate:modelValue": (u) => M[`${a}-${s}`] = u,
-                    class: "preset-uploader__anchor-popover",
-                    style: v({ positionAnchor: `--${e.name}-si-${a}-${s}` })
-                  }, {
-                    default: p(() => [
-                      m("div", Ve, [
-                        d(I, {
+                  c(b, { symbol: "x" })
+                ], 8, we),
+                e.showTypeDropdown ? (d(), f(R, {
+                  key: 2,
+                  id: `${e.name}-si-${a}-${s}`,
+                  modelValue: B[`${a}-${s}`],
+                  "onUpdate:modelValue": (u) => B[`${a}-${s}`] = u,
+                  class: "preset-uploader__item-popover",
+                  style: v({ positionAnchor: `--${e.name}-si-${a}-${s}` })
+                }, {
+                  default: p(() => [
+                    i("div", Te, [
+                      i("button", {
+                        class: "img-trigger",
+                        popovertarget: `${e.name}-si-${a}-${s}`,
+                        popovertargetaction: "hide"
+                      }, [
+                        i("img", {
+                          src: l.thumbnail || l.src,
+                          class: "img-thumbnail"
+                        }, null, 8, Se)
+                      ], 8, Ue),
+                      i("div", ze, [
+                        c(z, {
                           name: `${e.name}-si-type-${a}-${s}`,
                           options: e.typeOptions,
                           "model-value": l.type || null,
@@ -309,16 +324,16 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
                           "onUpdate:modelValue": (u) => G(a, String(s), u)
                         }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])
                       ])
-                    ]),
-                    _: 2
-                  }, 1032, ["id", "modelValue", "onUpdate:modelValue", "style"])
-                ], 64)) : O("", !0)
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["id", "modelValue", "onUpdate:modelValue", "style"])) : O("", !0)
               ], 4))), 128)),
-              m("div", {
+              i("div", {
                 class: "img-container img-container--add",
                 style: v({ anchorName: `--${e.name}-ap-${a}` })
               }, [
-                e.useImageUpload ? (c(), h(j, {
+                e.useImageUpload ? (d(), f(A, {
                   key: 0,
                   src: "",
                   endpoint: e.endpoint,
@@ -335,12 +350,12 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
                   "onUpdate:src": (l) => D(a, l)
                 }, {
                   button: p(() => [
-                    m("span", $e, [
-                      d(r, { symbol: "plus" })
+                    i("span", Ie, [
+                      c(b, { symbol: "plus" })
                     ])
                   ]),
                   _: 1
-                }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio", "onUpdate:src"])) : (c(), h(R, {
+                }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio", "onUpdate:src"])) : (d(), f(j, {
                   key: 1,
                   src: "",
                   multiple: !1,
@@ -355,13 +370,13 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
                   "onUpdate:src": (l) => D(a, l)
                 }, {
                   button: p(() => [
-                    m("span", ke, [
-                      d(r, { symbol: "plus" })
+                    i("span", Fe, [
+                      c(b, { symbol: "plus" })
                     ])
                   ]),
                   _: 1
                 }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "onUpdate:src"])),
-                d(C, {
+                c(R, {
                   id: `${e.name}-ap-${a}`,
                   modelValue: w[a],
                   "onUpdate:modelValue": (l) => w[a] = l,
@@ -369,8 +384,8 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
                   style: v({ positionAnchor: `--${e.name}-ap-${a}` })
                 }, {
                   default: p(() => [
-                    m("div", we, [
-                      d(I, {
+                    i("div", Pe, [
+                      c(z, {
                         name: `${e.name}-add-type-${a}`,
                         options: e.typeOptions,
                         "model-value": k[a] || null,
@@ -382,104 +397,115 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
                   _: 2
                 }, 1032, ["id", "modelValue", "onUpdate:modelValue", "style"])
               ], 4),
-              m("button", {
-                onClick: N((l) => z(a), ["prevent"]),
+              i("button", {
+                onClick: N((l) => I(a), ["prevent"]),
                 class: "btn btn--close btn--close-preset"
               }, [
-                d(r, { symbol: "x" })
-              ], 8, Te)
-            ])) : (c(), f("div", {
+                c(b, { symbol: "x" })
+              ], 8, Oe)
+            ])) : (d(), h("div", {
               key: 0,
               class: "img-container",
               style: v({ anchorName: `--${e.name}-pp-${a}` })
             }, [
-              m("img", {
-                src: n.thumbnail || n.src,
-                class: "img-thumbnail"
-              }, null, 8, ce),
-              m("button", {
-                onClick: N((l) => z(a), ["prevent"]),
-                class: "btn btn--close"
-              }, [
-                d(r, { symbol: "x" })
-              ], 8, ue),
-              m("button", {
-                class: "btn btn--action",
+              i("button", {
+                class: "img-trigger",
                 popovertarget: `${e.name}-pp-${a}`
               }, [
-                d(r, { symbol: "settings" })
+                i("img", {
+                  src: n.thumbnail || n.src,
+                  class: "img-thumbnail"
+                }, null, 8, ue)
+              ], 8, ce),
+              i("button", {
+                onClick: N((l) => I(a), ["prevent"]),
+                class: "btn btn--close"
+              }, [
+                c(b, { symbol: "x" })
               ], 8, pe),
-              d(C, {
+              c(R, {
                 id: `${e.name}-pp-${a}`,
                 modelValue: S[a],
                 "onUpdate:modelValue": (l) => S[a] = l,
-                class: "preset-uploader__anchor-popover",
+                class: "preset-uploader__item-popover",
                 style: v({ positionAnchor: `--${e.name}-pp-${a}` })
               }, {
                 default: p(() => [
-                  m("div", re, [
-                    e.showTypeDropdown ? (c(), h(I, {
-                      key: 0,
-                      name: `${e.name}-type-${a}`,
-                      options: e.typeOptions,
-                      "model-value": n.type || null,
-                      placeholder: "item type",
-                      "onUpdate:modelValue": (l) => K(a, l)
-                    }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])) : O("", !0),
-                    V[a] ? (c(), h(I, {
-                      key: 2,
-                      name: `${e.name}-promote-type-${a}`,
-                      options: e.typeOptions,
-                      "model-value": $[a] || null,
-                      placeholder: "new layer type",
-                      "onUpdate:modelValue": (l) => J(a, l)
-                    }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])) : (c(), f(A, { key: 1 }, [
-                      e.useImageUpload ? (c(), h(j, {
+                  i("div", re, [
+                    i("button", {
+                      class: "img-trigger",
+                      popovertarget: `${e.name}-pp-${a}`,
+                      popovertargetaction: "hide"
+                    }, [
+                      i("img", {
+                        src: n.thumbnail || n.src,
+                        class: "img-thumbnail"
+                      }, null, 8, fe)
+                    ], 8, he),
+                    i("div", be, [
+                      e.showTypeDropdown ? (d(), f(z, {
                         key: 0,
-                        src: "",
-                        endpoint: e.endpoint,
-                        "custom-fetch": e.customFetch,
-                        "to-data-url": !e.endpoint,
-                        "auth-token": e.authToken,
-                        disabled: e.disabled,
-                        "base-response-path": e.baseResponsePath,
-                        accept: e.accept,
-                        "max-file-size": e.maxFileSize,
-                        "max-image-width": e.maxImageWidth,
-                        "enable-preview": !1,
-                        "aspect-ratio": e.aspectRatio,
-                        "onUpdate:src": (l) => W(a, l)
-                      }, {
-                        button: p(() => [
-                          m("span", be, [
-                            d(r, { symbol: "plus" }),
-                            o[3] || (o[3] = L(" Add layer", -1))
-                          ])
-                        ]),
-                        _: 1
-                      }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio", "onUpdate:src"])) : (c(), h(R, {
-                        key: 1,
-                        src: "",
-                        multiple: !1,
-                        endpoint: e.endpoint,
-                        "custom-fetch": e.customFetch,
-                        "to-data-url": !e.endpoint,
-                        "auth-token": e.authToken,
-                        disabled: e.disabled,
-                        "base-response-path": e.baseResponsePath,
-                        accept: e.accept,
-                        "max-file-size": e.maxFileSize,
-                        "onUpdate:src": (l) => W(a, l)
-                      }, {
-                        button: p(() => [
-                          m("span", fe, [
-                            d(r, { symbol: "plus" }),
-                            o[4] || (o[4] = L(" Add layer", -1))
-                          ])
-                        ]),
-                        _: 1
-                      }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "onUpdate:src"]))
-                    ], 64))
+                        name: `${e.name}-type-${a}`,
+                        options: e.typeOptions,
+                        "model-value": n.type || null,
+                        placeholder: "item type",
+                        "onUpdate:modelValue": (l) => K(a, l)
+                      }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])) : O("", !0),
+                      $[a] ? (d(), f(z, {
+                        key: 2,
+                        name: `${e.name}-promote-type-${a}`,
+                        options: e.typeOptions,
+                        "model-value": V[a] || null,
+                        placeholder: "new layer type",
+                        "onUpdate:modelValue": (l) => J(a, l)
+                      }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])) : (d(), h(W, { key: 1 }, [
+                        e.useImageUpload ? (d(), f(A, {
+                          key: 0,
+                          src: "",
+                          endpoint: e.endpoint,
+                          "custom-fetch": e.customFetch,
+                          "to-data-url": !e.endpoint,
+                          "auth-token": e.authToken,
+                          disabled: e.disabled,
+                          "base-response-path": e.baseResponsePath,
+                          accept: e.accept,
+                          "max-file-size": e.maxFileSize,
+                          "max-image-width": e.maxImageWidth,
+                          "enable-preview": !1,
+                          "aspect-ratio": e.aspectRatio,
+                          "onUpdate:src": (l) => M(a, l)
+                        }, {
+                          button: p(() => [
+                            i("span", ye, [
+                              c(b, { symbol: "plus" }),
+                              o[3] || (o[3] = L(" Add layer", -1))
+                            ])
+                          ]),
+                          _: 1
+                        }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio", "onUpdate:src"])) : (d(), f(j, {
+                          key: 1,
+                          src: "",
+                          multiple: !1,
+                          endpoint: e.endpoint,
+                          "custom-fetch": e.customFetch,
+                          "to-data-url": !e.endpoint,
+                          "auth-token": e.authToken,
+                          disabled: e.disabled,
+                          "base-response-path": e.baseResponsePath,
+                          accept: e.accept,
+                          "max-file-size": e.maxFileSize,
+                          "onUpdate:src": (l) => M(a, l)
+                        }, {
+                          button: p(() => [
+                            i("span", ge, [
+                              c(b, { symbol: "plus" }),
+                              o[4] || (o[4] = L(" Add layer", -1))
+                            ])
+                          ]),
+                          _: 1
+                        }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "onUpdate:src"]))
+                      ], 64))
+                    ])
                   ])
                 ]),
                 _: 2
@@ -487,7 +513,7 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
             ], 4))
           ]),
           "list-append": p(() => [
-            e.useImageUpload ? (c(), h(j, {
+            e.useImageUpload ? (d(), f(A, {
               key: 0,
               src: g.value,
               "onUpdate:src": o[0] || (o[0] = (n) => g.value = n),
@@ -504,12 +530,12 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
               "aspect-ratio": e.aspectRatio
             }, {
               button: p(() => [
-                m("span", Ue, [
-                  d(r, { symbol: "plus" })
+                i("span", Ne, [
+                  c(b, { symbol: "plus" })
                 ])
               ]),
               _: 1
-            }, 8, ["src", "endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio"])) : (c(), h(R, {
+            }, 8, ["src", "endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio"])) : (d(), f(j, {
               key: 1,
               src: g.value,
               "onUpdate:src": o[1] || (o[1] = (n) => g.value = n),
@@ -524,8 +550,8 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
               "max-file-size": e.maxFileSize
             }, {
               button: p(() => [
-                m("span", Se, [
-                  d(r, { symbol: "plus" })
+                i("span", je, [
+                  c(b, { symbol: "plus" })
                 ])
               ]),
               _: 1
@@ -538,5 +564,5 @@ const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "pres
   }
 });
 export {
-  He as default
+  Xe as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.69",
+  "version": "0.3.72",
   "dependencies": {
     "date-fns": "^3.0.0",
     "dompurify": "^3.3.1",