@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/imagecompressor/index.es.js

@@ -1,68 +1,78 @@
-import { defineComponent as ke, mergeModels as oe, inject as Ce, onMounted as Be, onUnmounted as Pe, ref as h, shallowRef as $, useModel as Me, reactive as Ue, computed as re, watch as V, createElementBlock as v, openBlock as n, Fragment as T, createVNode as m, normalizeClass as y, withCtx as q, createElementVNode as I, createCommentVNode as c, createBlock as k, renderList as Fe, unref as R } from "vue";
-import { r as Ae } from "../vendor/base64toblob/base64toblob.es.js";
-import { u as Se } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { f as $e } from "../vendor/vue-advanced-cropper/dist/index.esm-bundler.es.js";
-import { u as Re } from "../plugins/WangsVue.es.js";
-import { g as ze, a as De } from "../utils/genPlaceholder.util.es.js";
-import { _ as Le } from "../image/index.es.js";
-import { _ as z } from "../button/index.es.js";
-import { _ as Ne } from "../buttonradio/index.es.js";
-import { _ as Ve } from "../dialog/index.es.js";
-import { _ as Te } from "../dialogconfirm/index.es.js";
-import { _ as je } from "../fieldwrapper/index.es.js";
-import { _ as x } from "../icon/index.es.js";
-import { _ as Oe } from "../invisiblefield/index.es.js";
-import { _ as Ee } from "../validatormessage/index.es.js";
-import { B as qe } from "../backgroundimagecropper/index.es.js";
-import { _ as se } from "../imageinputinfo/index.es.js";
+import { defineComponent, mergeModels, inject, onMounted, onUnmounted, ref, shallowRef, useModel, reactive, computed, watch, createElementBlock, openBlock, Fragment, createVNode, normalizeClass, withCtx, createElementVNode, createCommentVNode, createBlock, renderList, unref } from "vue";
+import { r as requireBase64toblob } from "../vendor/base64toblob/base64toblob.es.js";
+import { u as useField } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { f as fe } from "../vendor/vue-advanced-cropper/dist/index.esm-bundler.es.js";
+import { u as useWangsVueConfig } from "../plugins/WangsVue.es.js";
+import { g as genPlaceholder, a as genRandomPlaceholderBg } from "../utils/genPlaceholder.util.es.js";
+import { _ as _sfc_main$2 } from "../image/index.es.js";
+import { _ as _sfc_main$4 } from "../button/index.es.js";
+import { _ as _sfc_main$7 } from "../buttonradio/index.es.js";
+import { _ as _sfc_main$a } from "../dialog/index.es.js";
+import { _ as _sfc_main$5 } from "../dialogconfirm/index.es.js";
+import { _ as _sfc_main$1 } from "../fieldwrapper/index.es.js";
+import { _ as _sfc_main$3 } from "../icon/index.es.js";
+import { _ as _sfc_main$9 } from "../invisiblefield/index.es.js";
+import { _ as _sfc_main$8 } from "../validatormessage/index.es.js";
+import { B as BackgroundImageCropper } from "../backgroundimagecropper/index.es.js";
+import { _ as _sfc_main$6 } from "../imageinputinfo/index.es.js";
 /* empty css                                           */
-var ca = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function xe(b) {
-  return b && b.__esModule && Object.prototype.hasOwnProperty.call(b, "default") ? b.default : b;
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
-var Ke = Ae();
-const Ge = /* @__PURE__ */ xe(Ke), He = {
+var base64toblobExports = requireBase64toblob();
+const base64toblob = /* @__PURE__ */ getDefaultExportFromCjs(base64toblobExports);
+const _hoisted_1 = {
   key: 1,
   class: "flex gap-1 items-start"
-}, We = ["id", "multiple"], Je = ["for"], fa = /* @__PURE__ */ ke({
+};
+const _hoisted_2 = ["id", "multiple"];
+const _hoisted_3 = ["for"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ImageCompressor",
-  props: /* @__PURE__ */ oe({
+  props: /* @__PURE__ */ mergeModels({
     initialName: {},
     multiple: { type: Boolean },
     defaultImage: {},
-    disabled: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: false },
     compressedBlob: { default: void 0 },
     imagePreviewUrl: { default: void 0 },
     imagePreviewSize: { default: "big" },
-    rounded: { type: Boolean, default: !1 },
-    useDeleteButton: { type: Boolean, default: !0 },
-    useValidator: { type: Boolean, default: !1 },
-    mandatory: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: false },
+    useDeleteButton: { type: Boolean, default: true },
+    useValidator: { type: Boolean, default: false },
+    mandatory: { type: Boolean, default: false },
     invalid: { type: Boolean },
     validatorMessage: { default: "Photo must be uploaded" },
     label: { default: void 0 },
     fieldName: { default: "imageInput" },
     fieldInfo: { default: void 0 },
-    showInfo: { type: Boolean, default: !0 },
+    showInfo: { type: Boolean, default: true },
     customRequirements: { default: void 0 },
     confirmOnDelete: { type: Boolean },
     emitDeleteFn: { type: Boolean },
-    showValidatorMessage: { type: Boolean, default: !0 },
+    showValidatorMessage: { type: Boolean, default: true },
     fileType: { default: "webp" },
     type: { default: "normal" }
   }, {
-    defaultImage: { default: 0 },
-    defaultImageModifiers: {}
+    "defaultImage": { default: 0 },
+    "defaultImageModifiers": {}
   }),
-  emits: /* @__PURE__ */ oe(["apply", "applyProp", "update:defaultImage", "update:fieldValue", "delete"], ["update:defaultImage"]),
-  setup(b, { expose: ie, emit: ne }) {
-    const ue = Ce("preset", {}).image, l = b, C = ne, { locale: j } = Re("ImageCompressor");
-    Be(async () => {
-      ve(), U();
-    }), Pe(() => {
-      A(0), A(1);
+  emits: /* @__PURE__ */ mergeModels(["apply", "applyProp", "update:defaultImage", "update:fieldValue", "delete"], ["update:defaultImage"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ImagePreset = inject("preset", {}).image;
+    const props = __props;
+    const emit = __emit;
+    const { locale } = useWangsVueConfig("ImageCompressor");
+    onMounted(async () => {
+      setField();
+      assignPreviewImagesFromProp();
+    });
+    onUnmounted(() => {
+      revokeObjectURL(0);
+      revokeObjectURL(1);
     });
-    const f = h([
+    const image = ref([
       {
         src: null,
         type: null
@@ -71,81 +81,170 @@ const Ge = /* @__PURE__ */ xe(Ke), He = {
         src: null,
         type: null
       }
-    ]), me = De(), K = h(), B = h(), s = h([]), Q = h(), X = $(0), G = h(), D = h(), d = $(), O = Me(b, "defaultImage"), i = Ue({
-      value: l.multiple ? [] : void 0
-    }), P = $(!1), w = $(), de = $(0), g = $(!1), H = h([!1, !1]), M = re(() => `image/${l.fileType}`), W = (e) => typeof s.value[e] == "string" && s.value[e].includes("data:image/png;base64"), U = async () => {
-      var e, a;
-      (e = l.imagePreviewUrl) != null && e.length ? s.value = Array.isArray(l.imagePreviewUrl) ? l.imagePreviewUrl : [l.imagePreviewUrl] : Array.isArray(l.compressedBlob) ? s.value = l.compressedBlob : l.compressedBlob ? s.value = [l.compressedBlob] : l.initialName ? (K.value = ze(l.initialName, 125, me), s.value = [(a = K.value) == null ? void 0 : a.toDataURL()]) : s.value = [], l.imagePreviewUrl ? i.value = l.imagePreviewUrl : l.initialName && (i.value = await pe()), C("applyProp");
-    }, pe = async () => new Promise((e) => {
-      var a;
-      (a = K.value) == null || a.toBlob((o) => {
-        e(
-          new File([o ?? new Blob()], Date.now() + ".png", {
-            type: "image/png"
-          })
-        );
+    ]);
+    const randomBg = genRandomPlaceholderBg();
+    const canvasPlaceholder = ref();
+    const canvas = ref();
+    const previewImages = ref([]);
+    const inputImageFile = ref();
+    const inputImageFileKey = shallowRef(0);
+    const vueAdvanceCropper = ref();
+    const resolveFn = ref();
+    const currentCropingImageIndex = shallowRef();
+    const defaultImage = useModel(__props, "defaultImage");
+    const field = reactive({
+      value: props.multiple ? [] : void 0
+    });
+    const invalidInput = shallowRef(false);
+    const invalidMessage = shallowRef();
+    const inputImageKey = shallowRef(0);
+    const showImageCropper = shallowRef(false);
+    const showDeleteConfirm = ref([false, false]);
+    const formattedFileType = computed(() => `image/${props.fileType}`);
+    const isInitialImage = (index) => {
+      return typeof previewImages.value[index] == "string" && previewImages.value[index].includes("data:image/png;base64");
+    };
+    const assignPreviewImagesFromProp = async () => {
+      var _a, _b;
+      if ((_a = props.imagePreviewUrl) == null ? void 0 : _a.length) {
+        previewImages.value = Array.isArray(props.imagePreviewUrl) ? props.imagePreviewUrl : [props.imagePreviewUrl];
+      } else if (Array.isArray(props.compressedBlob)) {
+        previewImages.value = props.compressedBlob;
+      } else if (props.compressedBlob) {
+        previewImages.value = [props.compressedBlob];
+      } else if (props.initialName) {
+        canvasPlaceholder.value = genPlaceholder(props.initialName, 125, randomBg);
+        previewImages.value = [(_b = canvasPlaceholder.value) == null ? void 0 : _b.toDataURL()];
+      } else {
+        previewImages.value = [];
+      }
+      if (props.imagePreviewUrl) {
+        field.value = props.imagePreviewUrl;
+      } else if (props.initialName) {
+        field.value = await canvasToFile();
+      }
+      emit("applyProp");
+    };
+    const canvasToFile = async () => {
+      return new Promise((resolve) => {
+        var _a;
+        (_a = canvasPlaceholder.value) == null ? void 0 : _a.toBlob((blob) => {
+          resolve(
+            new File([blob ?? new Blob()], Date.now() + ".png", {
+              type: "image/png"
+            })
+          );
+        });
       });
-    }), F = (e = !1) => {
-      var a;
-      l.disabled || (e && (d.value = 1), (a = Q.value) == null || a.click());
-    }, ce = async (e) => {
-      const { files: a } = e.target, o = Array.from(a ?? []).slice(
+    };
+    const pickImage = (addPhoto = false) => {
+      var _a;
+      if (props.disabled) return;
+      if (addPhoto) currentCropingImageIndex.value = 1;
+      (_a = inputImageFile.value) == null ? void 0 : _a.click();
+    };
+    const handleImageSelected = async (event) => {
+      const { files } = event.target;
+      const imageFiles = Array.from(files ?? []).slice(
         0,
-        s.value.length ? 1 : 2
+        previewImages.value.length ? 1 : 2
       );
-      for (const [t, u] of o.entries())
+      for (const [index, file] of imageFiles.entries()) {
         try {
-          const r = d.value ?? t;
-          await fe(u, r);
-        } catch (r) {
-          console.error("Error loading image:", r);
+          const imageIndex = currentCropingImageIndex.value ?? index;
+          await loadImage(file, imageIndex);
+        } catch (error) {
+          console.error("Error loading image:", error);
         } finally {
-          d.value = void 0;
+          currentCropingImageIndex.value = void 0;
         }
-    }, fe = async (e, a) => {
-      const o = (u) => u.includes("image"), t = (u) => u > 1e6;
-      return new Promise((u, r) => {
-        var L, S;
-        if (e)
-          if (Y(a), !o(e.type))
-            P.value = !0, w.value = typeof l.validatorMessage != "string" && ((L = l.validatorMessage) != null && L.invalidFormat) ? l.validatorMessage.invalidFormat : "Tipe file harus berupa gambar!", U(), g.value = !1, A(a), r("Tipe file harus berupa gambar!");
-          else if (t(e.size))
-            P.value = !0, w.value = typeof l.validatorMessage != "string" && ((S = l.validatorMessage) != null && S.exceed) ? l.validatorMessage.exceed : "Ukuran gambar terlalu besar! Maks. 1 MB", U(), g.value = !1, A(a), r("Ukuran gambar terlalu besar! Maks. 1 MB");
-          else {
-            A(a);
-            const E = URL.createObjectURL(e), p = new FileReader();
-            p.onload = (N) => {
-              var te;
-              f.value[a].src = E, f.value[a].type = ge(
-                (te = N == null ? void 0 : N.target) == null ? void 0 : te.result,
-                e.type
+      }
+    };
+    const loadImage = async (file, index) => {
+      const isImageType = (type) => {
+        return type.includes("image");
+      };
+      const isExceededLimit = (size) => size > 1e6;
+      return new Promise((resolve, reject) => {
+        var _a, _b;
+        if (file) {
+          resetCropper(index);
+          if (!isImageType(file.type)) {
+            invalidInput.value = true;
+            invalidMessage.value = typeof props.validatorMessage !== "string" && ((_a = props.validatorMessage) == null ? void 0 : _a.invalidFormat) ? props.validatorMessage.invalidFormat : "Tipe file harus berupa gambar!";
+            assignPreviewImagesFromProp();
+            showImageCropper.value = false;
+            revokeObjectURL(index);
+            reject("Tipe file harus berupa gambar!");
+          } else if (isExceededLimit(file.size)) {
+            invalidInput.value = true;
+            invalidMessage.value = typeof props.validatorMessage !== "string" && ((_b = props.validatorMessage) == null ? void 0 : _b.exceed) ? props.validatorMessage.exceed : "Ukuran gambar terlalu besar! Maks. 1 MB";
+            assignPreviewImagesFromProp();
+            showImageCropper.value = false;
+            revokeObjectURL(index);
+            reject("Ukuran gambar terlalu besar! Maks. 1 MB");
+          } else {
+            revokeObjectURL(index);
+            const blob = URL.createObjectURL(file);
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              var _a2;
+              image.value[index].src = blob;
+              image.value[index].type = getMimeType(
+                (_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.result,
+                file.type
               );
-            }, p.onerror = (N) => {
-              console.error("🚀 ~ returnnewPromise ~ e:", N);
-            }, p.readAsArrayBuffer(e), d.value == null && (d.value = a), g.value || (g.value = !0), P.value = !1, w.value = void 0;
+            };
+            reader.onerror = (e) => {
+              console.error("🚀 ~ returnnewPromise ~ e:", e);
+            };
+            reader.readAsArrayBuffer(file);
+            if (currentCropingImageIndex.value == null)
+              currentCropingImageIndex.value = index;
+            if (!showImageCropper.value) showImageCropper.value = true;
+            invalidInput.value = false;
+            invalidMessage.value = void 0;
           }
-        de.value += 1, D.value = u;
+        }
+        inputImageKey.value += 1;
+        resolveFn.value = resolve;
       });
-    }, ve = () => {
-      l.useValidator && Object.assign(
-        i,
-        Se(l.fieldName, (e) => {
-          var a;
-          return !e && l.mandatory ? typeof l.validatorMessage != "string" && ((a = l.validatorMessage) != null && a.empty) ? l.validatorMessage.empty : (l.label ?? "Photo") + " must be uploaded" : l.invalid && l.validatorMessage ? l.validatorMessage : w.value ? w.value : !0;
-        })
-      );
-    }, Y = (e) => {
-      f.value[e] = {
+    };
+    const setField = () => {
+      if (props.useValidator) {
+        Object.assign(
+          field,
+          useField(props.fieldName, (value) => {
+            var _a;
+            if (!value && props.mandatory) {
+              if (typeof props.validatorMessage !== "string" && ((_a = props.validatorMessage) == null ? void 0 : _a.empty)) {
+                return props.validatorMessage.empty;
+              }
+              return (props.label ?? "Photo") + " must be uploaded";
+            } else if (props.invalid && props.validatorMessage) {
+              return props.validatorMessage;
+            } else if (invalidMessage.value) {
+              return invalidMessage.value;
+            }
+            return true;
+          })
+        );
+      }
+    };
+    const resetCropper = (index) => {
+      image.value[index] = {
         src: null,
         type: null
       };
-    }, ge = (e, a = null) => {
-      if (e) {
-        const o = new Uint8Array(e).subarray(0, 4);
-        let t = "";
-        for (const u of o)
-          t += u.toString(16);
-        switch (t) {
+    };
+    const getMimeType = (file, fallback = null) => {
+      if (file) {
+        const byteArray = new Uint8Array(file).subarray(0, 4);
+        let header = "";
+        for (const element of byteArray) {
+          header += element.toString(16);
+        }
+        switch (header) {
           case "89504e47":
             return "image/png";
           case "47494638":
@@ -155,380 +254,448 @@ const Ge = /* @__PURE__ */ xe(Ke), He = {
           case "ffd8ffe2":
           case "ffd8ffe3":
           case "ffd8ffe8":
-            return M.value;
+            return formattedFileType.value;
           default:
-            return a;
+            return fallback;
         }
       }
       return null;
-    }, Z = (e) => {
-      const a = Ge(e.split(",")[1], M.value);
-      return window.URL.createObjectURL(a);
-    }, ye = async (e, a) => {
-      const o = await fetch(e).then((t) => t.blob());
-      return new File([o], a, { type: M.value });
-    }, be = async () => {
-      const e = d.value ?? 0;
+    };
+    const toBlobObjectURL = (imgUrl) => {
+      const blob = base64toblob(imgUrl.split(",")[1], formattedFileType.value);
+      const url = window.URL.createObjectURL(blob);
+      return url;
+    };
+    const blobToFile = async (url, name) => {
+      const blobFile = await fetch(url).then((f) => f.blob());
+      return new File([blobFile], name, { type: formattedFileType.value });
+    };
+    const applyImageCropper = async () => {
+      const currentImageIndex = currentCropingImageIndex.value ?? 0;
       try {
-        await we(e);
-      } catch (a) {
-        console.error(a);
+        await cropImage(currentImageIndex);
+      } catch (error) {
+        console.error(error);
       }
-      _();
-    }, _ = () => {
-      var e;
-      g.value = !1, (e = D.value) == null || e.call(D), D.value = void 0;
-    }, we = async (e) => {
-      if (G.value) {
-        const a = G.value.getResult();
-        if (a.canvas) {
-          const o = a.canvas.toDataURL(M.value);
-          await he(o, e);
+      closeImageCropper();
+    };
+    const closeImageCropper = () => {
+      var _a;
+      showImageCropper.value = false;
+      (_a = resolveFn.value) == null ? void 0 : _a.call(resolveFn);
+      resolveFn.value = void 0;
+    };
+    const cropImage = async (index) => {
+      if (vueAdvanceCropper.value) {
+        const croppedImage = vueAdvanceCropper.value.getResult();
+        if (croppedImage.canvas) {
+          const base64 = croppedImage.canvas.toDataURL(formattedFileType.value);
+          await drawCroppedImage(base64, index);
         }
       }
-    }, he = async (e, a) => {
+    };
+    const drawCroppedImage = async (imageDataURL, index) => {
       try {
-        B.value = document.createElement("canvas");
-        const o = B.value.getContext("2d"), t = new Image();
-        t.src = e, await t.decode();
-        const u = 80 / 100, r = t.width * u, L = t.height * u;
-        B.value.setAttribute("width", r.toString()), B.value.setAttribute("height", L.toString()), o && o.drawImage(t, 0, 0, r, L);
-        const S = B.value.toDataURL(M.value, 0.95), E = Date.now() + `.${l.fileType}`, p = {
-          canvas: B.value,
+        canvas.value = document.createElement("canvas");
+        const canvasContext = canvas.value.getContext("2d");
+        const newImage = new Image();
+        newImage.src = imageDataURL;
+        await newImage.decode();
+        const formattedScale = 80 / 100;
+        const width = newImage.width * formattedScale;
+        const height = newImage.height * formattedScale;
+        canvas.value.setAttribute("width", width.toString());
+        canvas.value.setAttribute("height", height.toString());
+        if (canvasContext) canvasContext.drawImage(newImage, 0, 0, width, height);
+        const base64 = canvas.value.toDataURL(formattedFileType.value, 0.95);
+        const fileName = Date.now() + `.${props.fileType}`;
+        const imageCompressorPayload = {
+          canvas: canvas.value,
           compressed: {
-            blob: Z(S),
-            base64: S,
-            fileName: E,
-            file: await ye(Z(S), E),
+            blob: toBlobObjectURL(base64),
+            base64,
+            fileName,
+            file: await blobToFile(toBlobObjectURL(base64), fileName),
             size: "",
-            type: M.value
+            type: formattedFileType.value
           },
           message: "File has been compressed."
         };
-        p.compressed.size = Math.round(p.compressed.file.size / 1e3) + "KB", s.value[a] = p.compressed.blob, l.multiple ? i.value && Array.isArray(i.value) ? i.value[a] = p.compressed.file : i.value = [p.compressed.file] : i.value = p.compressed.file, C("apply", p);
-      } catch (o) {
-        console.error(o);
+        imageCompressorPayload.compressed.size = Math.round(imageCompressorPayload.compressed.file.size / 1e3) + "KB";
+        previewImages.value[index] = imageCompressorPayload.compressed.blob;
+        if (props.multiple) {
+          if (field.value && Array.isArray(field.value)) {
+            field.value[index] = imageCompressorPayload.compressed.file;
+          } else {
+            field.value = [imageCompressorPayload.compressed.file];
+          }
+        } else {
+          field.value = imageCompressorPayload.compressed.file;
+        }
+        emit("apply", imageCompressorPayload);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    const revokeObjectURL = (index) => {
+      if (image.value[index].src) URL.revokeObjectURL(image.value[index].src);
+    };
+    const onBeforeDeleteImage = (index) => {
+      if (props.confirmOnDelete) {
+        showDeleteConfirm.value[index] = true;
+      } else if (props.emitDeleteFn) {
+        emit("delete", deleteImage, index);
+      } else deleteImage(index);
+    };
+    const deleteImage = (index = 0) => {
+      invalidInput.value = false;
+      invalidMessage.value = void 0;
+      previewImages.value = previewImages.value.toSpliced(index, 1);
+      revokeObjectURL(index);
+      image.value[index] = { src: null, type: null };
+      image.value = [image.value[+!index], image.value[index]];
+      currentCropingImageIndex.value = 0;
+      defaultImage.value = 0;
+      if (!props.confirmOnDelete) emit("delete");
+      if (props.multiple && Array.isArray(field.value)) {
+        field.value = field.value.toSpliced(index, 1);
+      } else if (field.handleReset) field.handleReset();
+    };
+    const editImage = (index) => {
+      var _a;
+      const currentPreviewImage = (_a = previewImages.value[index]) == null ? void 0 : _a.toString();
+      currentCropingImageIndex.value = index;
+      if (currentPreviewImage == null ? void 0 : currentPreviewImage.includes("blob")) {
+        currentCropingImageIndex.value = index;
+        showImageCropper.value = true;
+      } else {
+        resetCropper(index);
+        pickImage();
       }
-    }, A = (e) => {
-      f.value[e].src && URL.revokeObjectURL(f.value[e].src);
-    }, ee = (e) => {
-      l.confirmOnDelete ? H.value[e] = !0 : l.emitDeleteFn ? C("delete", J, e) : J(e);
-    }, J = (e = 0) => {
-      P.value = !1, w.value = void 0, s.value = s.value.toSpliced(e, 1), A(e), f.value[e] = { src: null, type: null }, f.value = [f.value[+!e], f.value[e]], d.value = 0, O.value = 0, l.confirmOnDelete || C("delete"), l.multiple && Array.isArray(i.value) ? i.value = i.value.toSpliced(e, 1) : i.handleReset && i.handleReset();
-    }, ae = (e) => {
-      var o;
-      const a = (o = s.value[e]) == null ? void 0 : o.toString();
-      d.value = e, a != null && a.includes("blob") ? (d.value = e, g.value = !0) : (Y(e), F());
-    }, Ie = () => {
-      F();
-    }, le = re(() => navigator.userAgent.includes("Firefox"));
-    return V(
-      () => i.value,
-      (e) => {
-        (e instanceof File || Array.isArray(e) && e.some((a) => a instanceof File)) && C("update:fieldValue", e);
+    };
+    const changeImage = () => {
+      pickImage();
+    };
+    const isChromeBased = computed(() => {
+      return navigator.userAgent.includes("Chrome");
+    });
+    watch(
+      () => field.value,
+      (value) => {
+        if (value instanceof File || Array.isArray(value) && value.some((v) => v instanceof File)) {
+          emit("update:fieldValue", value);
+        }
       }
-    ), V(w, (e) => {
-      e && i.setErrors && i.setErrors(e);
-    }), V(g, (e) => {
-      e || X.value++;
-    }), V(
-      () => l.initialName,
+    );
+    watch(invalidMessage, (value) => {
+      if (value && field.setErrors) field.setErrors(value);
+    });
+    watch(showImageCropper, (value) => {
+      if (!value) inputImageFileKey.value++;
+    });
+    watch(
+      () => props.initialName,
       () => {
-        U();
+        assignPreviewImagesFromProp();
       }
-    ), V(
-      () => l.imagePreviewUrl,
+    );
+    watch(
+      () => props.imagePreviewUrl,
       () => {
-        U();
+        assignPreviewImagesFromProp();
       },
-      { once: !0 }
-    ), ie({ assignPreviewImagesFromProp: U }), (e, a) => (n(), v(T, null, [
-      m(je, {
-        class: y([{ "!w-max": !l.multiple, "!w-full": l.multiple }]),
-        info: l.fieldInfo,
-        label: l.label,
-        mandatory: l.mandatory,
-        "data-wv-name": "image-compressor",
-        "data-wv-section": "root"
-      }, {
-        default: q(() => [
-          I("div", {
-            class: y([
-              "w-full",
-              { "grid gap-6 items-start grid-cols-2": e.multiple && e.type === "normal" },
-              {
-                "grid gap-3 items-start grid-cols-[max-content,max-content]": e.multiple && e.type === "inline-table"
-              }
-            ]),
-            "data-wv-section": "wrapper"
-          }, [
-            s.value.length ? (n(!0), v(T, { key: 0 }, Fe(s.value, (o, t) => {
-              var u;
-              return n(), v("div", {
-                key: t,
-                class: y([[
-                  { "items-start": e.type === "normal" },
-                  { "items-center": e.type === "inline-table" }
-                ], "flex gap-1"]),
-                "data-wv-section": "preview"
-              }, [
-                I("div", {
-                  class: y([
-                    "flex gap-1 items-center",
-                    { "max-w-[80px]": e.imagePreviewSize === "medium" },
-                    { "max-w-[125px]": e.imagePreviewSize === "big" },
-                    { "flex-col": e.type === "normal" }
-                  ]),
-                  "data-wv-section": "preview-image-wrapper"
+      { once: true }
+    );
+    __expose({ assignPreviewImagesFromProp });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$1, {
+          class: normalizeClass([{ "!w-max": !props.multiple, "!w-full": props.multiple }]),
+          info: props.fieldInfo,
+          label: props.label,
+          mandatory: props.mandatory,
+          "data-wv-name": "image-compressor",
+          "data-wv-section": "root"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass([
+                "w-full",
+                { "grid gap-6 items-start grid-cols-2": _ctx.multiple && _ctx.type === "normal" },
+                {
+                  "grid gap-3 items-start grid-cols-[max-content,max-content]": _ctx.multiple && _ctx.type === "inline-table"
+                }
+              ]),
+              "data-wv-section": "wrapper"
+            }, [
+              previewImages.value.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(previewImages.value, (previewImage, index) => {
+                var _a;
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: normalizeClass([[
+                    { "items-start": _ctx.type === "normal" },
+                    { "items-center": _ctx.type === "inline-table" }
+                  ], "flex gap-1"]),
+                  "data-wv-section": "preview"
                 }, [
-                  I("div", {
-                    class: y([
-                      {
-                        "[&>span]:hover:opacity-30 [&>[data-wv-section=input-image-trigger]]:hover:opacity-100": W(t)
-                      },
-                      "relative",
-                      {
-                        "w-[125px] h-[125px]": e.imagePreviewSize === "big" && e.type === "normal",
-                        "w-[30px] h-[30px]": e.imagePreviewSize === "small" || e.type === "inline-table",
-                        "w-[80px] h-[80px]": e.imagePreviewSize === "medium" && e.type === "normal"
-                      }
+                  createElementVNode("div", {
+                    class: normalizeClass([
+                      "flex gap-1 items-center",
+                      { "max-w-[80px]": _ctx.imagePreviewSize === "medium" },
+                      { "max-w-[125px]": _ctx.imagePreviewSize === "big" },
+                      { "flex-col": _ctx.type === "normal" }
                     ]),
-                    "data-wv-section": "image-wrapper"
+                    "data-wv-section": "preview-image-wrapper"
                   }, [
-                    m(Le, {
-                      class: y([{ "w-[30px] h-[30px]": e.type === "inline-table" }, "transition-opacity duration-300"]),
-                      rounded: e.rounded,
-                      size: e.type === "normal" ? e.imagePreviewSize : "small",
-                      src: o,
-                      "data-wv-section": "preview-image"
-                    }, null, 8, ["class", "rounded", "size", "src"]),
-                    W(t) ? (n(), v("button", {
-                      key: 0,
-                      class: y([
-                        (u = R(ue)) == null ? void 0 : u.button.class,
-                        "hover:bg-opacity-0 rounded-lg opacity-0"
+                    createElementVNode("div", {
+                      class: normalizeClass([
+                        {
+                          "[&>span]:hover:opacity-30 [&>[data-wv-section=input-image-trigger]]:hover:opacity-100": isInitialImage(index)
+                        },
+                        "relative",
+                        {
+                          "w-[125px] h-[125px]": _ctx.imagePreviewSize === "big" && _ctx.type === "normal",
+                          "w-[30px] h-[30px]": _ctx.imagePreviewSize === "small" || _ctx.type === "inline-table",
+                          "w-[80px] h-[80px]": _ctx.imagePreviewSize === "medium" && _ctx.type === "normal"
+                        }
                       ]),
-                      onClick: a[0] || (a[0] = (r) => F(!1)),
-                      "data-wv-section": "input-image-trigger",
-                      type: "button"
+                      "data-wv-section": "image-wrapper"
                     }, [
-                      m(x, {
-                        class: "w-6 h-6",
-                        "data-wv-section": "trigger-icon",
-                        icon: "image-add",
-                        severity: "primary"
-                      })
-                    ], 2)) : c("", !0)
-                  ], 2),
-                  !l.disabled && !W(t) ? (n(), v(T, { key: 0 }, [
-                    I("div", {
-                      class: y([
-                        "flex gap-0.5 justify-center",
-                        { "scale-75": e.imagePreviewSize === "medium" }
-                      ]),
-                      "data-wv-section": "preview-buttons"
-                    }, [
-                      e.type === "normal" ? (n(), v(T, { key: 0 }, [
-                        m(z, {
-                          onClick: (r) => ae(t),
-                          class: "!py-0 !px-1 !h-max",
-                          icon: "pencil",
-                          label: "Edit",
-                          text: ""
-                        }, null, 8, ["onClick"]),
-                        e.useDeleteButton ? (n(), k(z, {
-                          key: 0,
-                          onClick: (r) => ee(t),
-                          class: "!py-0 !px-1 !h-max",
-                          icon: "delete-bin",
-                          label: "Delete",
-                          severity: "danger",
-                          text: ""
-                        }, null, 8, ["onClick"])) : c("", !0)
-                      ], 64)) : (n(), v(T, { key: 1 }, [
-                        m(x, {
-                          onClick: (r) => ae(t),
-                          class: "text-xs p-0.5 rounded-xs mr-1",
-                          icon: "pencil",
+                      createVNode(_sfc_main$2, {
+                        class: normalizeClass([{ "w-[30px] h-[30px]": _ctx.type === "inline-table" }, "transition-opacity duration-300"]),
+                        rounded: _ctx.rounded,
+                        size: _ctx.type === "normal" ? _ctx.imagePreviewSize : "small",
+                        src: previewImage,
+                        "data-wv-section": "preview-image"
+                      }, null, 8, ["class", "rounded", "size", "src"]),
+                      isInitialImage(index) ? (openBlock(), createElementBlock("button", {
+                        key: 0,
+                        class: normalizeClass([
+                          (_a = unref(ImagePreset)) == null ? void 0 : _a.button.class,
+                          "hover:bg-opacity-0 rounded-lg opacity-0"
+                        ]),
+                        onClick: _cache[0] || (_cache[0] = ($event) => pickImage(false)),
+                        "data-wv-section": "input-image-trigger",
+                        type: "button"
+                      }, [
+                        createVNode(_sfc_main$3, {
+                          class: "w-6 h-6",
+                          "data-wv-section": "trigger-icon",
+                          icon: "image-add",
                           severity: "primary"
-                        }, null, 8, ["onClick"]),
-                        m(x, {
-                          onClick: (r) => ee(t),
-                          class: "text-xs p-0.5 rounded-xs",
-                          icon: "delete-bin",
-                          severity: "danger"
-                        }, null, 8, ["onClick"])
-                      ], 64))
+                        })
+                      ], 2)) : createCommentVNode("", true)
                     ], 2),
-                    m(Te, {
-                      visible: H.value[t],
-                      "onUpdate:visible": (r) => H.value[t] = r,
-                      closable: !1,
-                      onConfirm: (r) => C("delete", J, t),
-                      body: "Are you sure you want to delete it?",
-                      "confirm-label": "Delete",
-                      header: "Delete Photo",
-                      severity: "danger"
-                    }, null, 8, ["visible", "onUpdate:visible", "onConfirm"])
-                  ], 64)) : c("", !0)
-                ], 2),
-                e.type === "normal" ? (n(), k(se, {
-                  key: 0,
-                  "custom-requirements": e.customRequirements,
-                  "show-add-button": s.value.length === 1 && l.multiple,
-                  "show-info": e.showInfo,
-                  onAddPhoto: a[2] || (a[2] = (r) => F(!0))
-                }, {
-                  default: q(() => [
-                    s.value.length === 2 && l.multiple ? (n(), k(Ne, {
-                      key: 0,
-                      modelValue: O.value,
-                      "onUpdate:modelValue": a[1] || (a[1] = (r) => O.value = r),
-                      "label-id": "default-" + t,
-                      value: t,
-                      label: "Set as default"
-                    }, null, 8, ["modelValue", "label-id", "value"])) : c("", !0)
+                    !props.disabled && !isInitialImage(index) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createElementVNode("div", {
+                        class: normalizeClass([
+                          "flex gap-0.5 justify-center",
+                          { "scale-75": _ctx.imagePreviewSize === "medium" }
+                        ]),
+                        "data-wv-section": "preview-buttons"
+                      }, [
+                        _ctx.type === "normal" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                          createVNode(_sfc_main$4, {
+                            onClick: ($event) => editImage(index),
+                            class: "!py-0 !px-1 !h-max",
+                            icon: "pencil",
+                            label: "Edit",
+                            text: ""
+                          }, null, 8, ["onClick"]),
+                          _ctx.useDeleteButton ? (openBlock(), createBlock(_sfc_main$4, {
+                            key: 0,
+                            onClick: ($event) => onBeforeDeleteImage(index),
+                            class: "!py-0 !px-1 !h-max",
+                            icon: "delete-bin",
+                            label: "Delete",
+                            severity: "danger",
+                            text: ""
+                          }, null, 8, ["onClick"])) : createCommentVNode("", true)
+                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                          createVNode(_sfc_main$3, {
+                            onClick: ($event) => editImage(index),
+                            class: "text-xs p-0.5 rounded-xs mr-1",
+                            icon: "pencil",
+                            severity: "primary"
+                          }, null, 8, ["onClick"]),
+                          createVNode(_sfc_main$3, {
+                            onClick: ($event) => onBeforeDeleteImage(index),
+                            class: "text-xs p-0.5 rounded-xs",
+                            icon: "delete-bin",
+                            severity: "danger"
+                          }, null, 8, ["onClick"])
+                        ], 64))
+                      ], 2),
+                      createVNode(_sfc_main$5, {
+                        visible: showDeleteConfirm.value[index],
+                        "onUpdate:visible": ($event) => showDeleteConfirm.value[index] = $event,
+                        closable: false,
+                        onConfirm: ($event) => emit("delete", deleteImage, index),
+                        body: "Are you sure you want to delete it?",
+                        "confirm-label": "Delete",
+                        header: "Delete Photo",
+                        severity: "danger"
+                      }, null, 8, ["visible", "onUpdate:visible", "onConfirm"])
+                    ], 64)) : createCommentVNode("", true)
+                  ], 2),
+                  _ctx.type === "normal" ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 0,
+                    "custom-requirements": _ctx.customRequirements,
+                    "show-add-button": previewImages.value.length === 1 && props.multiple,
+                    "show-info": _ctx.showInfo,
+                    onAddPhoto: _cache[2] || (_cache[2] = ($event) => pickImage(true))
+                  }, {
+                    default: withCtx(() => [
+                      previewImages.value.length === 2 && props.multiple ? (openBlock(), createBlock(_sfc_main$7, {
+                        key: 0,
+                        modelValue: defaultImage.value,
+                        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => defaultImage.value = $event),
+                        "label-id": "default-" + index,
+                        value: index,
+                        label: "Set as default"
+                      }, null, 8, ["modelValue", "label-id", "value"])) : createCommentVNode("", true)
+                    ]),
+                    _: 2
+                  }, 1032, ["custom-requirements", "show-add-button", "show-info"])) : createCommentVNode("", true),
+                  _ctx.multiple && previewImages.value.length == 1 && _ctx.type === "inline-table" ? (openBlock(), createBlock(_sfc_main$4, {
+                    key: 1,
+                    onClick: _cache[3] || (_cache[3] = ($event) => pickImage(true)),
+                    icon: "add",
+                    label: "Photo",
+                    text: ""
+                  })) : createCommentVNode("", true)
+                ], 2);
+              }), 128)) : _ctx.type != "inline-table" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                createElementVNode("button", {
+                  class: normalizeClass([
+                    {
+                      "w-[125px] h-[125px]": _ctx.imagePreviewSize === "big",
+                      "w-[30px] h-[30px]": _ctx.imagePreviewSize === "small",
+                      "w-[80px] h-[80px]": _ctx.imagePreviewSize === "medium"
+                    },
+                    "flex items-center justify-center",
+                    "ring-inset",
+                    "cursor-pointer",
+                    {
+                      "ring-1": !isChromeBased.value,
+                      "ring-[0.5px]": isChromeBased.value
+                    },
+                    { "rounded-full": _ctx.rounded, "rounded-lg": !_ctx.rounded },
+                    {
+                      "ring-general-400 focus-visible:ring-primary-500": !invalidInput.value && !field.errorMessage,
+                      "ring-danger-500": invalidInput.value || field.errorMessage
+                    },
+                    {
+                      "bg-white": !props.disabled,
+                      "bg-general-50": props.disabled
+                    }
                   ]),
-                  _: 2
-                }, 1032, ["custom-requirements", "show-add-button", "show-info"])) : c("", !0),
-                e.multiple && s.value.length == 1 && e.type === "inline-table" ? (n(), k(z, {
-                  key: 1,
-                  onClick: a[3] || (a[3] = (r) => F(!0)),
-                  icon: "add",
-                  label: "Photo",
-                  text: ""
-                })) : c("", !0)
-              ], 2);
-            }), 128)) : e.type != "inline-table" ? (n(), v("div", He, [
-              I("button", {
-                class: y([
-                  {
-                    "w-[125px] h-[125px]": e.imagePreviewSize === "big",
-                    "w-[30px] h-[30px]": e.imagePreviewSize === "small",
-                    "w-[80px] h-[80px]": e.imagePreviewSize === "medium"
-                  },
-                  "flex items-center justify-center",
-                  "ring-inset",
-                  "cursor-pointer",
-                  {
-                    "ring-1": le.value,
-                    "ring-[0.5px]": !le.value
-                  },
-                  { "rounded-full": e.rounded, "rounded-lg": !e.rounded },
-                  {
-                    "ring-general-400 focus-visible:ring-primary-500": !P.value && !i.errorMessage,
-                    "ring-danger-500": P.value || i.errorMessage
-                  },
-                  {
-                    "bg-white": !l.disabled,
-                    "bg-general-50": l.disabled
-                  }
-                ]),
-                onClick: a[4] || (a[4] = (o) => F(!1)),
-                "data-wv-section": "input-image-trigger",
-                type: "button"
-              }, [
-                m(x, {
-                  class: "w-6 h-6",
-                  "data-wv-section": "trigger-icon",
-                  icon: "image-add",
-                  severity: "primary"
-                })
-              ], 2),
-              m(se, {
-                "custom-requirements": e.customRequirements,
-                "show-info": e.showInfo
-              }, null, 8, ["custom-requirements", "show-info"])
-            ])) : c("", !0)
-          ], 2),
-          (n(), v("input", {
-            id: e.fieldName,
-            key: X.value,
-            ref_key: "inputImageFile",
-            ref: Q,
-            multiple: l.multiple && !s.value.length,
-            onChange: ce,
-            accept: "image/*",
-            class: "hidden",
-            "data-wv-section": "hidden-image-input",
-            type: "file"
-          }, null, 40, We)),
-          e.type === "inline-table" && !s.value.length ? (n(), v("label", {
-            key: 0,
-            for: e.fieldName,
-            class: "inline-flex items-center cursor-pointer"
-          }, a[6] || (a[6] = [
-            I("span", { class: "inline-flex items-center text-body-medium rounded-bl rounded-tl bg-general-50 px-3 h-[26px] border-[0.5px] border-general-200" }, " Browse ", -1),
-            I("span", { class: "inline-flex items-center text-body-medium !text-general-200 !font-light rounded-br rounded-tr px-3 h-[26px] leading-4 border-[0.5px] border-l-0 border-general-200" }, " Select File ", -1)
-          ]), 8, Je)) : c("", !0),
-          e.showValidatorMessage ? (n(), k(Ee, {
-            key: 1,
-            format: !1,
-            message: i.errorMessage ?? w.value
-          }, null, 8, ["message"])) : c("", !0),
-          l.multiple ? (n(), k(Oe, {
-            key: 2,
-            value: O.value ? "secondImage" : "firstImage",
-            "field-name": "defaultImage"
-          }, null, 8, ["value"])) : c("", !0)
-        ]),
-        _: 1
-      }, 8, ["class", "info", "label", "mandatory"]),
-      m(Ve, {
-        visible: g.value,
-        "onUpdate:visible": a[5] || (a[5] = (o) => g.value = o),
-        draggable: !1,
-        header: R(j).cropDialogHeader,
-        class: "w-max max-w-[98vw] min-w-[min(500px,98vw)] !max-h-[94vh]",
-        "content-class": "overflow-hidden overflow-y-auto min-h-[100px]",
-        "data-wv-section": "dialog-cropper",
-        "footer-class": "!gap-1",
-        modal: ""
-      }, {
-        footer: q(() => [
-          m(z, {
-            label: R(j).cancelCropLabel,
-            onClick: _,
-            "data-wv-section": "cancel-crop",
-            severity: "secondary",
-            text: "",
-            type: "button"
-          }, null, 8, ["label"]),
-          m(z, {
-            label: R(j).changeImageLabel,
-            onClick: Ie,
-            "data-wv-section": "change-image-button",
-            text: "",
-            type: "button"
-          }, null, 8, ["label"]),
-          m(z, {
-            label: R(j).applyCropLabel,
-            onClick: be,
-            "data-wv-section": "apply-image-button",
-            severity: "success",
-            type: "button"
-          }, null, 8, ["label"])
-        ]),
-        default: q(() => [
-          d.value != null ? (n(), k(R($e), {
-            key: 0,
-            ref_key: "vueAdvanceCropper",
-            ref: G,
-            "auto-zoom": !1,
-            "background-wrapper-component": qe,
-            src: f.value[d.value].src,
-            class: "upload-example-cropper h-400",
-            "foreground-class": "h-400",
-            "image-class": "h-400"
-          }, null, 8, ["src"])) : c("", !0)
-        ]),
-        _: 1
-      }, 8, ["visible", "header"])
-    ], 64));
+                  onClick: _cache[4] || (_cache[4] = ($event) => pickImage(false)),
+                  "data-wv-section": "input-image-trigger",
+                  type: "button"
+                }, [
+                  createVNode(_sfc_main$3, {
+                    class: "w-6 h-6",
+                    "data-wv-section": "trigger-icon",
+                    icon: "image-add",
+                    severity: "primary"
+                  })
+                ], 2),
+                createVNode(_sfc_main$6, {
+                  "custom-requirements": _ctx.customRequirements,
+                  "show-info": _ctx.showInfo
+                }, null, 8, ["custom-requirements", "show-info"])
+              ])) : createCommentVNode("", true)
+            ], 2),
+            (openBlock(), createElementBlock("input", {
+              id: _ctx.fieldName,
+              key: inputImageFileKey.value,
+              ref_key: "inputImageFile",
+              ref: inputImageFile,
+              multiple: props.multiple && !previewImages.value.length,
+              onChange: handleImageSelected,
+              accept: "image/*",
+              class: "hidden",
+              "data-wv-section": "hidden-image-input",
+              type: "file"
+            }, null, 40, _hoisted_2)),
+            _ctx.type === "inline-table" && !previewImages.value.length ? (openBlock(), createElementBlock("label", {
+              key: 0,
+              for: _ctx.fieldName,
+              class: "inline-flex items-center cursor-pointer"
+            }, _cache[6] || (_cache[6] = [
+              createElementVNode("span", { class: "inline-flex items-center text-body-medium rounded-bl rounded-tl bg-general-50 px-3 h-[26px] border-[0.5px] border-general-200" }, " Browse ", -1),
+              createElementVNode("span", { class: "inline-flex items-center text-body-medium !text-general-200 !font-light rounded-br rounded-tr px-3 h-[26px] leading-4 border-[0.5px] border-l-0 border-general-200" }, " Select File ", -1)
+            ]), 8, _hoisted_3)) : createCommentVNode("", true),
+            _ctx.showValidatorMessage ? (openBlock(), createBlock(_sfc_main$8, {
+              key: 1,
+              format: false,
+              message: field.errorMessage ?? invalidMessage.value
+            }, null, 8, ["message"])) : createCommentVNode("", true),
+            props.multiple ? (openBlock(), createBlock(_sfc_main$9, {
+              key: 2,
+              value: defaultImage.value ? "secondImage" : "firstImage",
+              "field-name": "defaultImage"
+            }, null, 8, ["value"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["class", "info", "label", "mandatory"]),
+        createVNode(_sfc_main$a, {
+          visible: showImageCropper.value,
+          "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => showImageCropper.value = $event),
+          draggable: false,
+          header: unref(locale).cropDialogHeader,
+          class: "w-max max-w-[98vw] min-w-[min(500px,98vw)] !max-h-[94vh]",
+          "content-class": "overflow-hidden overflow-y-auto min-h-[100px]",
+          "data-wv-section": "dialog-cropper",
+          "footer-class": "!gap-1",
+          modal: ""
+        }, {
+          footer: withCtx(() => [
+            createVNode(_sfc_main$4, {
+              label: unref(locale).cancelCropLabel,
+              onClick: closeImageCropper,
+              "data-wv-section": "cancel-crop",
+              severity: "secondary",
+              text: "",
+              type: "button"
+            }, null, 8, ["label"]),
+            createVNode(_sfc_main$4, {
+              label: unref(locale).changeImageLabel,
+              onClick: changeImage,
+              "data-wv-section": "change-image-button",
+              text: "",
+              type: "button"
+            }, null, 8, ["label"]),
+            createVNode(_sfc_main$4, {
+              label: unref(locale).applyCropLabel,
+              onClick: applyImageCropper,
+              "data-wv-section": "apply-image-button",
+              severity: "success",
+              type: "button"
+            }, null, 8, ["label"])
+          ]),
+          default: withCtx(() => [
+            currentCropingImageIndex.value != null ? (openBlock(), createBlock(unref(fe), {
+              key: 0,
+              ref_key: "vueAdvanceCropper",
+              ref: vueAdvanceCropper,
+              "auto-zoom": false,
+              "background-wrapper-component": BackgroundImageCropper,
+              src: image.value[currentCropingImageIndex.value].src,
+              class: "upload-example-cropper h-400",
+              "foreground-class": "h-400",
+              "image-class": "h-400"
+            }, null, 8, ["src"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["visible", "header"])
+      ], 64);
+    };
   }
 });
 export {
-  fa as _,
-  ca as c,
-  xe as g
+  _sfc_main as _,
+  commonjsGlobal as c,
+  getDefaultExportFromCjs as g
 };