ablok-components 0.3.78 → 0.3.80

package/dist/components/molecules/file-upload/file-upload.vue.d.ts

@@ -1,9 +1,20 @@
+import { PropType } from '../../../../vue/dist/vue.esm-bundler.js';
+import { LocalUrlFormat } from '../../../composables/useLocalFileUrl';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        'preview-item'?(_: {
+            url: {
+                type?: string;
+                src?: string;
+            };
+            index: number;
+        }): any;
         button?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        root: HTMLDivElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -124,6 +135,10 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
         type: BooleanConstructor;
         default: boolean;
     };
+    localUrlFormat: {
+        type: PropType<LocalUrlFormat>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     "update:src": (...args: any[]) => void;
@@ -244,6 +259,10 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
         type: BooleanConstructor;
         default: boolean;
     };
+    localUrlFormat: {
+        type: PropType<LocalUrlFormat>;
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:src"?: ((...args: any[]) => any) | undefined;
@@ -270,7 +289,10 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
     enablePreview: boolean;
     previewWidth: number;
     dropFiles: boolean;
-}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, HTMLDivElement>;
+    localUrlFormat: LocalUrlFormat;
+}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/molecules/file-upload/file-upload.vue.js

@@ -1,13 +1,16 @@
-import { defineComponent as C, watch as y, openBlock as a, createElementBlock as n, normalizeClass as b, unref as i, Fragment as g, renderList as U, createElementVNode as o, withModifiers as v, createVNode as u, isRef as z, renderSlot as D, Transition as N, withCtx as P, createCommentVNode as T } from "vue";
-import h from "../../atoms/svg-icon/svg-icon.vue.js";
+import { defineComponent as L, ref as f, toRef as N, computed as P, watch as b, openBlock as u, createElementBlock as d, normalizeClass as h, unref as y, Fragment as V, renderList as T, renderSlot as S, createElementVNode as c, withModifiers as w, createVNode as p, Transition as M, withCtx as H, createCommentVNode as W } from "vue";
+import k from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-import L from "../../atoms/input-file/input-file.vue.js";
-import { useFileUpload as x } from "../../../composables/useFileUpload.js";
-import { fileToDataUrl as M, uniqueId as S } from "../../../utilities/helpers.js";
-const W = ["src"], _ = ["onClick"], q = ["onClick"], E = ["for"], H = ["innerHTML"], R = {
+import q from "../../atoms/input-file/input-file.vue.js";
+import { useDragAndDrop as E } from "../../../composables/useDragAndDrop.js";
+import { useUploadTransport as I } from "../../../composables/useUploadTransport.js";
+import { useLocalFileUrl as R } from "../../../composables/useLocalFileUrl.js";
+import { sanitizeHtml as O } from "../../../composables/useSanitize.js";
+import { uniqueId as F } from "../../../utilities/helpers.js";
+const _ = ["src"], j = ["onClick"], x = ["onClick"], G = ["for"], J = ["innerHTML"], K = {
   key: 0,
   class: "file-upload__loading-spinner"
-}, K = /* @__PURE__ */ C({
+}, ne = /* @__PURE__ */ L({
   __name: "file-upload",
   props: {
     modelValue: {
@@ -19,11 +22,11 @@ const W = ["src"], _ = ["onClick"], q = ["onClick"], E = ["for"], H = ["innerHTM
     },
     name: {
       type: String,
-      default: () => S()
+      default: () => F()
     },
     id: {
       type: String,
-      default: () => S()
+      default: () => F()
     },
     label: {
       type: String,
@@ -92,86 +95,116 @@ const W = ["src"], _ = ["onClick"], q = ["onClick"], E = ["for"], H = ["innerHTM
     dropFiles: {
       type: Boolean,
       default: !1
+    },
+    localUrlFormat: {
+      type: String,
+      default: "dataUrl"
     }
   },
   emits: ["update:modelValue", "update:src"],
-  setup(e, { emit: w }) {
-    const s = e, m = w, { pending: k, files: r, dataUrls: c, isDragging: F, thumbnails: B, uploadFile: V, removeFile: p } = x(s, m);
-    return y(() => r.value, async (l) => {
-      c.value = await Promise.all(
-        l.map(async (t) => ({
-          src: s.toDataUrl ? await M(t) : await V(t),
-          type: t.type
+  setup(a, { emit: U }) {
+    const e = a, i = U, v = f(), m = f([]), n = f([]), { pending: $, uploadFile: B } = I(e), { toLocalUrl: D, revoke: C } = R(N(e, "localUrlFormat")), { isDragging: z } = E(v, {
+      enabled: () => e.dropFiles,
+      onDrop: (t) => {
+        m.value = t;
+      }
+    }), A = P(() => e.modelValue?.length ? e.modelValue : e.src ? [{ type: "", src: e.src }] : n.value);
+    function g(t) {
+      const l = typeof t == "string" ? parseInt(t, 10) : t, o = Array.isArray(e.modelValue) && e.modelValue.length > 0, r = Array.isArray(n.value) && n.value.length > 0;
+      if (r && l < n.value.length && (C(n.value[l]?.src), n.value.splice(l, 1)), o) {
+        const s = [...e.modelValue];
+        l < s.length && s.splice(l, 1), i("update:modelValue", s), e.multiple || i("update:src", s[0]?.src || "");
+      } else if (r) {
+        const s = e.multiple ? n.value : n.value[0];
+        i("update:modelValue", s), e.multiple || i("update:src", n.value[0]?.src || "");
+      } else
+        i("update:modelValue", e.multiple ? [] : void 0), i("update:src", "");
+      m.value.splice(l, 1);
+    }
+    return b(() => m.value, async (t) => {
+      const l = await Promise.all(
+        t.map(async (o) => ({
+          src: e.toDataUrl ? await D(o) : await B(o),
+          type: o.type
         }))
       );
-    }, { deep: !0 }), y(() => c.value, async (l) => {
-      const t = s.multiple ? l : l[0];
-      m("update:modelValue", t), s.multiple || m("update:src", l[0] && l[0].src);
-    }, { deep: !0 }), (l, t) => (a(), n("div", {
-      class: b(["file-upload", {
-        "has-dragging": e.dropFiles,
-        "is-dragging": i(F)
+      n.value = l.filter((o) => o !== null);
+    }, { deep: !0 }), b(() => n.value, async (t) => {
+      const l = e.multiple ? t : t[0];
+      i("update:modelValue", l), e.multiple || i("update:src", t[0] && t[0].src);
+    }, { deep: !0 }), (t, l) => (u(), d("div", {
+      ref_key: "root",
+      ref: v,
+      class: h(["file-upload", {
+        "has-dragging": a.dropFiles,
+        "is-dragging": y(z)
       }])
     }, [
-      (a(!0), n(g, null, U(i(B), (d, f) => (a(), n("div", {
-        key: d.src,
-        class: b(e.enablePreview ? "file-upload__thumbnail" : "file-upload__reset")
+      (u(!0), d(V, null, T(A.value, (o, r) => (u(), d("div", {
+        key: o.src,
+        class: h(a.enablePreview ? "file-upload__thumbnail" : "file-upload__reset")
       }, [
-        e.enablePreview ? (a(), n(g, { key: 0 }, [
-          o("img", {
-            src: `${d.src}${e.previewWidth ? `?width=${e.previewWidth}` : ""}`,
-            class: "img-thumbnail rounded"
-          }, null, 8, W),
-          o("button", {
-            onClick: v(($) => i(p)(f), ["prevent"]),
-            class: "btn btn--close"
+        S(t.$slots, "preview-item", {
+          url: o,
+          index: r
+        }, () => [
+          a.enablePreview ? (u(), d(V, { key: 0 }, [
+            c("img", {
+              src: `${o.src}${a.previewWidth ? `?width=${a.previewWidth}` : ""}`,
+              class: "img-thumbnail rounded"
+            }, null, 8, _),
+            c("button", {
+              onClick: w((s) => g(r), ["prevent"]),
+              class: "btn btn--close"
+            }, [
+              p(k, { symbol: "x" })
+            ], 8, j)
+          ], 64)) : (u(), d("button", {
+            key: 1,
+            onClick: w((s) => g(r), ["prevent"]),
+            class: "btn btn--close btn-outline-contrast"
           }, [
-            u(h, { symbol: "x" })
-          ], 8, _)
-        ], 64)) : (a(), n("button", {
-          key: 1,
-          onClick: v(($) => i(p)(f), ["prevent"]),
-          class: "btn btn--close btn-outline-contrast"
-        }, [
-          u(h, { symbol: "x" })
-        ], 8, q))
+            p(k, { symbol: "x" })
+          ], 8, x))
+        ])
       ], 2))), 128)),
-      u(L, {
-        modelValue: i(r),
-        "onUpdate:modelValue": t[0] || (t[0] = (d) => z(r) ? r.value = d : null),
-        id: e.id,
-        name: e.name,
-        accept: e.accept,
-        "max-file-size": e.maxFileSize,
+      p(q, {
+        modelValue: m.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (o) => m.value = o),
+        id: a.id,
+        name: a.name,
+        accept: a.accept,
+        "max-file-size": a.maxFileSize,
+        multiple: a.multiple,
         class: "d-none"
-      }, null, 8, ["modelValue", "id", "name", "accept", "max-file-size"]),
-      o("label", {
-        for: e.id,
+      }, null, 8, ["modelValue", "id", "name", "accept", "max-file-size", "multiple"]),
+      c("label", {
+        for: a.id,
         class: "file-upload__label"
       }, [
-        D(l.$slots, "button", {}, () => [
-          o("span", {
+        S(t.$slots, "button", {}, () => [
+          c("span", {
             class: "btn btn-outline-contrast",
-            innerHTML: e.label || l.$t("common.selectFile")
-          }, null, 8, H)
+            innerHTML: y(O)(a.label || t.$t("common.selectFile"))
+          }, null, 8, J)
         ]),
-        u(N, { name: "fade" }, {
-          default: P(() => [
-            i(k) ? (a(), n("span", R, [...t[1] || (t[1] = [
-              o("span", {
+        p(M, { name: "fade" }, {
+          default: H(() => [
+            y($) ? (u(), d("span", K, [...l[1] || (l[1] = [
+              c("span", {
                 class: "spinner-border",
                 role: "status"
               }, [
-                o("span", { class: "visually-hidden" }, "Loading...")
+                c("span", { class: "visually-hidden" }, "Loading...")
               ], -1)
-            ])])) : T("", !0)
+            ])])) : W("", !0)
           ]),
           _: 1
         })
-      ], 8, E)
+      ], 8, G)
     ], 2));
   }
 });
 export {
-  K as default
+  ne as default
 };

package/dist/components/molecules/image-upload/image-upload.vue.d.ts

@@ -1,10 +1,14 @@
+import { PropType } from '../../../../vue/dist/vue.esm-bundler.js';
+import { LocalUrlFormat } from '../../../composables/useLocalFileUrl';
 import { IMediaObject } from '../../../types/media';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         button?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        root: HTMLDivElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -98,6 +102,10 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
         default: number;
     };
     aspectRatio: NumberConstructor;
+    localUrlFormat: {
+        type: PropType<LocalUrlFormat>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     "update:src": (...args: any[]) => void;
@@ -191,6 +199,10 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
         default: number;
     };
     aspectRatio: NumberConstructor;
+    localUrlFormat: {
+        type: PropType<LocalUrlFormat>;
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:src"?: ((...args: any[]) => any) | undefined;
@@ -214,9 +226,12 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
     enablePreview: boolean;
     previewWidth: number;
     dropFiles: boolean;
+    localUrlFormat: LocalUrlFormat;
     enableReview: boolean;
     maxImageWidth: number;
-}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/molecules/image-upload/image-upload.vue.js

@@ -1,21 +1,24 @@
-import { defineComponent as L, ref as b, computed as P, watch as v, onMounted as Q, onBeforeUnmount as q, openBlock as s, createElementBlock as m, normalizeClass as U, unref as g, Fragment as A, createVNode as r, normalizeStyle as E, isRef as D, createElementVNode as o, withModifiers as w, createCommentVNode as h, renderSlot as H, Transition as O, withCtx as $, createBlock as j, toDisplayString as G } from "vue";
-import J from "../image-crop-resize/image-crop-resize.vue.js";
-import K from "../../atoms/base-image/base-image.vue.js";
+import { defineComponent as P, ref as u, toRef as Q, computed as H, watch as v, onBeforeUnmount as O, openBlock as s, createElementBlock as p, normalizeClass as C, unref as $, Fragment as q, createVNode as d, normalizeStyle as E, createElementVNode as n, withModifiers as h, createCommentVNode as V, renderSlot as j, Transition as A, withCtx as B, createBlock as G, toDisplayString as J } from "vue";
+import K from "../image-crop-resize/image-crop-resize.vue.js";
+import X from "../../atoms/base-image/base-image.vue.js";
 /* empty css                                     */
-import k from "../../atoms/svg-icon/svg-icon.vue.js";
+import z from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-import X from "../../atoms/input-file/input-file.vue.js";
-import Y from "../../templates/modal-dialog/modal-dialog.vue.js";
+import Y from "../../atoms/input-file/input-file.vue.js";
+import Z from "../../templates/modal-dialog/modal-dialog.vue.js";
 /* empty css                                             */
-import { useFileUpload as Z } from "../../../composables/useFileUpload.js";
-import { resizeImageFileByMaxWidth as _, fileToDataUrl as R, uniqueId as W, srcToFile as ee } from "../../../utilities/helpers.js";
-const te = { class: "image-upload__controls" }, ae = { class: "d-flex gap-1 align-items-center" }, le = {
+import { useDragAndDrop as _ } from "../../../composables/useDragAndDrop.js";
+import { useUploadTransport as ee } from "../../../composables/useUploadTransport.js";
+import { useLocalFileUrl as te } from "../../../composables/useLocalFileUrl.js";
+import { sanitizeHtml as ae } from "../../../composables/useSanitize.js";
+import { resizeImageFileByMaxWidth as le, uniqueId as N, srcToFile as oe } from "../../../utilities/helpers.js";
+const ie = { class: "image-upload__controls" }, ne = { class: "d-flex gap-1 align-items-center" }, re = {
   key: 1,
   class: "image-upload__controls"
-}, ne = ["for"], ie = ["innerHTML"], oe = {
+}, ue = ["for"], se = ["innerHTML"], de = {
   key: 0,
   class: "image-upload__loading-spinner"
-}, ge = /* @__PURE__ */ L({
+}, ke = /* @__PURE__ */ P({
   __name: "image-upload",
   props: {
     modelValue: {
@@ -27,11 +30,11 @@ const te = { class: "image-upload__controls" }, ae = { class: "d-flex gap-1 alig
     },
     name: {
       type: String,
-      default: () => W()
+      default: () => N()
     },
     id: {
       type: String,
-      default: () => W()
+      default: () => N()
     },
     label: {
       type: String,
@@ -106,163 +109,175 @@ const te = { class: "image-upload__controls" }, ae = { class: "d-flex gap-1 alig
       type: Number,
       default: 4096
     },
-    aspectRatio: Number
+    aspectRatio: Number,
+    localUrlFormat: {
+      type: String,
+      default: "dataUrl"
+    }
   },
   emits: ["update:modelValue", "update:src"],
-  setup(a, { emit: z }) {
-    const i = a, p = z, u = b(!1), d = b(null), l = b(null), V = b(null), {
-      pending: C,
-      files: f,
-      // dataUrls,
-      imgLoaded: c,
-      isDragging: N,
-      uploadFile: F,
-      setupDragAndDrop: T,
-      cleanupDragAndDrop: x
-    } = Z(i, p), y = P(() => i.modelValue ? i.modelValue : i.src ? { type: "", src: i.src } : d.value);
-    function S() {
-      d.value = null, f.value = [], c.value = !1, p("update:modelValue", void 0), p("update:src", "");
+  setup(a, { emit: T }) {
+    const o = a, y = T, D = u(), f = u([]), b = u(!1), r = u(!1), m = u(null), l = u(null), F = u(null);
+    let c = !1;
+    const { pending: L, uploadFile: R } = ee(o), { toLocalUrl: S, revoke: g } = te(Q(o, "localUrlFormat")), { isDragging: x } = _(D, {
+      enabled: () => o.dropFiles,
+      onDrop: (t) => {
+        f.value = t;
+      }
+    }), w = H(() => o.modelValue ? o.modelValue : o.src ? { type: "", src: o.src } : m.value);
+    function U(t) {
+      g(m.value?.src), m.value = t;
+    }
+    function k() {
+      U(null), f.value = [], b.value = !1, y("update:modelValue", void 0), y("update:src", "");
     }
-    function B() {
-      S();
+    function W() {
+      k();
     }
     v(() => f.value, async (t) => {
       if (!t || !t.length || !t[0]) return;
-      c.value = !1;
-      const e = await _(t[0], i.maxImageWidth);
-      i.enableReview ? (l.value = {
-        src: await R(e),
+      b.value = !1;
+      const e = await le(t[0], o.maxImageWidth);
+      o.enableReview ? (l.value = {
+        src: await S(e),
         type: e.type
-      }, u.value = !0) : d.value = {
-        src: i.toDataUrl ? await R(e) : await F(e),
+      }, c = !0, r.value = !0) : U({
+        src: o.toDataUrl ? await S(e) : await R(e),
         type: e.type
-      };
-    }), v(() => d.value, (t) => {
-      p("update:modelValue", t || void 0), p("update:src", t?.src || "");
-    }), v(() => V.value, async (t) => {
-      t && (d.value = {
-        src: await F(t),
-        type: t.type
-      }, V.value = null);
-    }), v(() => u.value, (t, e) => {
-      !t && e && l.value && (l.value = null, B());
-    }), v(() => i.src, (t) => {
-      !t && d.value && B();
+      });
+    }), v(() => m.value, (t) => {
+      y("update:modelValue", t || void 0), y("update:src", t?.src || "");
+    }), v(() => F.value, async (t) => {
+      if (t) {
+        try {
+          U({
+            src: o.toDataUrl ? await S(t) : await R(t),
+            type: t.type
+          });
+        } catch (e) {
+          console.error(`Failed to process file "${t.name}"`, e);
+        }
+        F.value = null;
+      }
+    }), v(() => r.value, (t, e) => {
+      !t && e && l.value && (c && g(l.value.src), c = !1, l.value = null, W());
+    }), v(() => o.src, (t) => {
+      !t && m.value && W();
     });
-    function M(t, e) {
-      l.value = { src: t, type: e }, u.value = !0;
+    function I(t, e) {
+      c = !1, l.value = { src: t, type: e }, r.value = !0;
     }
-    async function I() {
-      l.value && (V.value = await ee(
+    async function M() {
+      l.value && (F.value = await oe(
         l.value.src,
         "file",
         l.value.type
-      )), l.value = null, u.value = !1;
+      ), c && g(l.value.src)), c = !1, l.value = null, r.value = !1;
     }
-    return Q(() => {
-      T();
-    }), q(() => {
-      x();
-    }), (t, e) => (s(), m("div", {
-      class: U(["image-upload", {
+    return O(() => {
+      g(m.value?.src);
+    }), (t, e) => (s(), p("div", {
+      ref_key: "root",
+      ref: D,
+      class: C(["image-upload", {
         "has-dragging": a.dropFiles,
-        "is-dragging": g(N)
+        "is-dragging": $(x)
       }])
     }, [
-      !u.value && y.value ? (s(), m("div", {
+      !r.value && w.value ? (s(), p("div", {
         key: 0,
-        class: U(["mb-2", a.enablePreview ? "image-upload__thumbnail" : "image-upload__reset"])
+        class: C(["mb-2", a.enablePreview ? "image-upload__thumbnail" : "image-upload__reset"])
       }, [
-        a.enablePreview ? (s(), m(A, { key: 0 }, [
-          r(K, {
-            src: `${y.value.src}${a.previewWidth ? `?width=${a.previewWidth}` : ""}`,
+        a.enablePreview ? (s(), p(q, { key: 0 }, [
+          d(X, {
+            src: `${w.value.src}${a.previewWidth ? `?width=${a.previewWidth}` : ""}`,
             class: "img-thumbnail rounded",
-            ready: g(c),
-            "onUpdate:ready": e[0] || (e[0] = (n) => D(c) ? c.value = n : null),
+            ready: b.value,
+            "onUpdate:ready": e[0] || (e[0] = (i) => b.value = i),
             animate: !1,
             style: E({ maxWidth: a.previewWidth ? `${a.previewWidth}px` : "auto", height: "auto" })
           }, null, 8, ["src", "ready", "style"]),
-          o("div", te, [
-            o("div", ae, [
-              o("button", {
+          n("div", ie, [
+            n("div", ne, [
+              n("button", {
                 type: "button",
-                onClick: e[1] || (e[1] = w((n) => M(y.value.src, y.value.type), ["prevent", "stop"])),
+                onClick: e[1] || (e[1] = h((i) => I(w.value.src, w.value.type), ["prevent", "stop"])),
                 class: "btn btn--edit btn-sm btn-light"
               }, [
-                r(k, { symbol: "edit-2" })
+                d(z, { symbol: "edit-2" })
               ]),
-              o("button", {
+              n("button", {
                 type: "button",
-                onClick: e[2] || (e[2] = w((n) => S(), ["prevent", "stop"])),
+                onClick: e[2] || (e[2] = h((i) => k(), ["prevent", "stop"])),
                 class: "btn btn--close btn-sm btn-light"
               }, [
-                r(k, { symbol: "x" })
+                d(z, { symbol: "x" })
               ])
             ])
           ])
-        ], 64)) : (s(), m("div", le, [
-          o("button", {
-            onClick: e[3] || (e[3] = w((n) => S(), ["prevent", "stop"])),
+        ], 64)) : (s(), p("div", re, [
+          n("button", {
+            onClick: e[3] || (e[3] = h((i) => k(), ["prevent", "stop"])),
             class: "btn btn--close btn-outline-contrast"
           }, [
-            r(k, { symbol: "x" })
+            d(z, { symbol: "x" })
           ])
         ]))
-      ], 2)) : h("", !0),
-      r(X, {
-        modelValue: g(f),
-        "onUpdate:modelValue": e[4] || (e[4] = (n) => D(f) ? f.value = n : null),
+      ], 2)) : V("", !0),
+      d(Y, {
+        modelValue: f.value,
+        "onUpdate:modelValue": e[4] || (e[4] = (i) => f.value = i),
         id: a.id,
         name: a.name,
         accept: a.accept,
         "max-file-size": a.maxFileSize,
         class: "d-none"
       }, null, 8, ["modelValue", "id", "name", "accept", "max-file-size"]),
-      a.src ? h("", !0) : (s(), m("label", {
+      a.src ? V("", !0) : (s(), p("label", {
         key: 1,
         for: a.id,
         class: "image-upload__label"
       }, [
-        H(t.$slots, "button", {}, () => [
-          o("span", {
+        j(t.$slots, "button", {}, () => [
+          n("span", {
             class: "btn btn-outline-contrast",
-            innerHTML: a.label || t.$t("common.selectFile")
-          }, null, 8, ie)
+            innerHTML: $(ae)(a.label || t.$t("common.selectFile"))
+          }, null, 8, se)
         ]),
-        r(O, { name: "fade" }, {
-          default: $(() => [
-            g(C) ? (s(), m("span", oe, [...e[7] || (e[7] = [
-              o("span", {
+        d(A, { name: "fade" }, {
+          default: B(() => [
+            $(L) ? (s(), p("span", de, [...e[7] || (e[7] = [
+              n("span", {
                 class: "spinner-border",
                 role: "status"
               }, [
-                o("span", { class: "visually-hidden" }, "Loading...")
+                n("span", { class: "visually-hidden" }, "Loading...")
               ], -1)
-            ])])) : h("", !0)
+            ])])) : V("", !0)
           ]),
           _: 1
         })
-      ], 8, ne)),
-      r(Y, {
-        modelValue: u.value,
-        "onUpdate:modelValue": e[6] || (e[6] = (n) => u.value = n),
+      ], 8, ue)),
+      d(Z, {
+        modelValue: r.value,
+        "onUpdate:modelValue": e[6] || (e[6] = (i) => r.value = i),
         footer: !1
       }, {
-        default: $(() => [
-          u.value && l.value ? (s(), j(J, {
+        default: B(() => [
+          r.value && l.value ? (s(), G(K, {
             key: 0,
             modelValue: l.value.src,
-            "onUpdate:modelValue": e[5] || (e[5] = (n) => l.value.src = n),
+            "onUpdate:modelValue": e[5] || (e[5] = (i) => l.value.src = i),
             "aspect-ratio": a.aspectRatio
           }, {
-            submit: $(() => [
-              o("button", {
+            submit: B(() => [
+              n("button", {
                 class: "btn btn-primary",
-                onClick: w(I, ["prevent", "stop"])
-              }, G(t.$t("common.save")), 1)
+                onClick: h(M, ["prevent", "stop"])
+              }, J(t.$t("common.save")), 1)
             ]),
             _: 1
-          }, 8, ["modelValue", "aspect-ratio"])) : h("", !0)
+          }, 8, ["modelValue", "aspect-ratio"])) : V("", !0)
         ]),
         _: 1
       }, 8, ["modelValue"])
@@ -270,5 +285,5 @@ const te = { class: "image-upload__controls" }, ae = { class: "d-flex gap-1 alig
   }
 });
 export {
-  ge as default
+  ke as default
 };