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

package/imagecompressor/index.es.js

@@ -1,701 +0,0 @@
-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 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 base64toblobExports = requireBase64toblob();
-const base64toblob = /* @__PURE__ */ getDefaultExportFromCjs(base64toblobExports);
-const _hoisted_1 = {
-  key: 1,
-  class: "flex gap-1 items-start"
-};
-const _hoisted_2 = ["id", "multiple"];
-const _hoisted_3 = ["for"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ImageCompressor",
-  props: /* @__PURE__ */ mergeModels({
-    initialName: {},
-    multiple: { type: Boolean },
-    defaultImage: {},
-    disabled: { type: Boolean, default: false },
-    compressedBlob: { default: void 0 },
-    imagePreviewUrl: { default: void 0 },
-    imagePreviewSize: { default: "big" },
-    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: true },
-    customRequirements: { default: void 0 },
-    confirmOnDelete: { type: Boolean },
-    emitDeleteFn: { type: Boolean },
-    showValidatorMessage: { type: Boolean, default: true },
-    fileType: { default: "webp" },
-    type: { default: "normal" }
-  }, {
-    "defaultImage": { default: 0 },
-    "defaultImageModifiers": {}
-  }),
-  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 image = ref([
-      {
-        src: null,
-        type: null
-      },
-      {
-        src: null,
-        type: null
-      }
-    ]);
-    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"
-            })
-          );
-        });
-      });
-    };
-    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,
-        previewImages.value.length ? 1 : 2
-      );
-      for (const [index, file] of imageFiles.entries()) {
-        try {
-          const imageIndex = currentCropingImageIndex.value ?? index;
-          await loadImage(file, imageIndex);
-        } catch (error) {
-          console.error("Error loading image:", error);
-        } finally {
-          currentCropingImageIndex.value = void 0;
-        }
-      }
-    };
-    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
-              );
-            };
-            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;
-          }
-        }
-        inputImageKey.value += 1;
-        resolveFn.value = resolve;
-      });
-    };
-    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
-      };
-    };
-    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":
-            return "image/gif";
-          case "ffd8ffe0":
-          case "ffd8ffe1":
-          case "ffd8ffe2":
-          case "ffd8ffe3":
-          case "ffd8ffe8":
-            return formattedFileType.value;
-          default:
-            return fallback;
-        }
-      }
-      return null;
-    };
-    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 cropImage(currentImageIndex);
-      } catch (error) {
-        console.error(error);
-      }
-      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);
-        }
-      }
-    };
-    const drawCroppedImage = async (imageDataURL, index) => {
-      try {
-        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: toBlobObjectURL(base64),
-            base64,
-            fileName,
-            file: await blobToFile(toBlobObjectURL(base64), fileName),
-            size: "",
-            type: formattedFileType.value
-          },
-          message: "File has been compressed."
-        };
-        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();
-      }
-    };
-    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);
-        }
-      }
-    );
-    watch(invalidMessage, (value) => {
-      if (value && field.setErrors) field.setErrors(value);
-    });
-    watch(showImageCropper, (value) => {
-      if (!value) inputImageFileKey.value++;
-    });
-    watch(
-      () => props.initialName,
-      () => {
-        assignPreviewImagesFromProp();
-      }
-    );
-    watch(
-      () => props.imagePreviewUrl,
-      () => {
-        assignPreviewImagesFromProp();
-      },
-      { 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"
-                }, [
-                  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": "preview-image-wrapper"
-                  }, [
-                    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"
-                        }
-                      ]),
-                      "data-wv-section": "image-wrapper"
-                    }, [
-                      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"
-                        })
-                      ], 2)) : createCommentVNode("", true)
-                    ], 2),
-                    !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
-                    }
-                  ]),
-                  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 {
-  _sfc_main as _,
-  commonjsGlobal as c,
-  getDefaultExportFromCjs as g
-};