@fewangsit/wangsvue-fats 1.0.1-rc.9 → 2.0.0-alpha.1

package/imagecompressor/index.es.js

@@ -1,29 +1,29 @@
-import { defineComponent as ke, mergeModels as re, inject as Ce, onMounted as Be, onUnmounted as Pe, ref as w, shallowRef as S, useModel as Me, reactive as Ue, computed as oe, watch as N, createElementBlock as f, openBlock as n, Fragment as V, createVNode as m, normalizeClass as y, withCtx as O, createElementVNode as h, createCommentVNode as c, createBlock as I, renderList as Fe, unref as $ } from "vue";
-import { g as Ae } from "../dialogprintqr/DialogPrintQR.es.js";
-import { r as Se } from "../vendor/base64toblob/base64toblob.es.js";
+import { defineComponent as Ce, useModel as Be, inject as Pe, onMounted as Me, onUnmounted as Ue, ref as w, shallowRef as z, reactive as Fe, computed as J, watch as N, openBlock as n, createElementBlock as g, Fragment as V, createVNode as m, normalizeClass as y, withCtx as j, createElementVNode as h, renderList as Se, unref as A, createCommentVNode as p, createBlock as k, mergeModels as oe } from "vue";
+import { g as ze } from "../vendor/highlight.js/lib/core.es.js";
+import { r as Ae } from "../vendor/base64toblob/base64toblob.es.js";
 import { u as $e } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
 import { f as Re } from "../vendor/vue-advanced-cropper/dist/index.esm-bundler.es.js";
-import { u as ze } from "../plugins/WangsVue.es.js";
-import { g as De, a as Le } from "../utils/genPlaceholder.util.es.js";
-import Ne from "../image/index.es.js";
-import { _ as R } from "../button/Button.es.js";
-import Ve from "../buttonradio/index.es.js";
-import Ee from "../dialog/index.es.js";
-import Te from "../dialogconfirm/index.es.js";
-import { _ as je } from "../fieldwrapper/FieldWrapper.es.js";
-import q from "../icon/index.es.js";
-import Oe from "../invisiblefield/index.es.js";
-import qe from "../validatormessage/index.es.js";
-import { B as xe } from "../backgroundimagecropper/BackgroundImageCropper.es.js";
-import { _ as se } from "../imageinputinfo/ImageInputInfo.es.js";
+import { _ as De } from "../image/index.es.js";
+import { u as Le } from "../plugins/WangsVue.es.js";
+import { g as Ne, a as Ve } from "../utils/genPlaceholder.util.es.js";
+import { B as xe } from "../backgroundimagecropper/index.es.js";
+import { _ as se } from "../imageinputinfo/index.es.js";
+import { _ as $ } from "../button/index.es.js";
+import { _ as Ee } from "../buttonradio/index.es.js";
+import { _ as Te } from "../dialog/index.es.js";
+import { _ as je } from "../dialogconfirm/index.es.js";
+import { _ as Oe } from "../fieldwrapper/index.es.js";
+import { _ as O } from "../icon/index.es.js";
+import { _ as qe } from "../invisiblefield/index.es.js";
+import { _ as Ke } from "../validatormessage/index.es.js";
 /* empty css                                           */
-var Ke = Se();
-const He = /* @__PURE__ */ Ae(Ke), We = {
+var He = Ae();
+const We = /* @__PURE__ */ ze(He), Ge = {
   key: 1,
   class: "flex gap-1 items-start"
-}, Ge = ["id", "multiple"], Je = ["for"], va = /* @__PURE__ */ ke({
+}, Je = ["id", "multiple"], Qe = ["for"], ga = /* @__PURE__ */ Ce({
   __name: "ImageCompressor",
-  props: /* @__PURE__ */ re({
+  props: /* @__PURE__ */ oe({
     initialName: {},
     multiple: { type: Boolean },
     defaultImage: {},
@@ -51,12 +51,12 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
     defaultImage: { default: 0 },
     defaultImageModifiers: {}
   }),
-  emits: /* @__PURE__ */ re(["apply", "applyProp", "update:defaultImage", "update:fieldValue", "delete"], ["update:defaultImage"]),
-  setup(J, { expose: ie, emit: ne }) {
-    const ue = Ce("preset", {}).image, l = J, k = ne, { locale: E } = ze("ImageCompressor");
-    Be(async () => {
+  emits: /* @__PURE__ */ oe(["apply", "applyProp", "update:defaultImage", "update:fieldValue", "delete"], ["update:defaultImage"]),
+  setup(Q, { expose: ie, emit: ne }) {
+    const l = Q, I = ne, x = Be(Q, "defaultImage"), ue = Pe("preset", {}).image, { locale: E } = Le("ImageCompressor");
+    Me(async () => {
       fe(), M();
-    }), Pe(() => {
+    }), Ue(() => {
       F(0), F(1);
     });
     const v = w([
@@ -68,14 +68,21 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
         src: null,
         type: null
       }
-    ]), me = Le(), x = w(), C = w(), s = w([]), Q = w(), X = S(0), K = w(), z = w(), d = S(), T = Me(J, "defaultImage"), i = Ue({
+    ]), me = Ve(), q = w(), C = w(), s = w([]), X = w(), Y = z(0), K = w(), R = w(), d = z(), i = Fe({
       value: l.multiple ? [] : void 0
-    }), B = S(!1), b = S(), de = S(0), g = S(!1), H = w([!1, !1]), P = oe(() => `image/${l.fileType}`), W = (e) => typeof s.value[e] == "string" && s.value[e].includes("data:image/png;base64"), M = async () => {
+    }), B = z(!1), b = z(), de = z(0), f = z(!1), H = w([!1, !1]), P = J(() => `image/${l.fileType}`), W = (e) => typeof s.value[e] == "string" && s.value[e].includes("data:image/png;base64"), ce = J(() => {
+      const e = {
+        big: 125,
+        medium: 80,
+        small: 30
+      };
+      return l.type === "inline-table" ? e.small : e[l.imagePreviewSize] || e.small;
+    }), M = 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 ? (x.value = De(l.initialName, 125, me), s.value = [(a = x.value) == null ? void 0 : a.toDataURL()]) : s.value = [], l.imagePreviewUrl ? i.value = l.imagePreviewUrl : l.initialName && (i.value = await pe()), k("applyProp");
+      (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 ? (q.value = Ne(l.initialName, 125, me), s.value = [(a = q.value) == null ? void 0 : a.toDataURL()]) : s.value = [], l.imagePreviewUrl ? i.value = l.imagePreviewUrl : l.initialName && (i.value = await pe()), I("applyProp");
     }, pe = async () => new Promise((e) => {
       var a;
-      (a = x.value) == null || a.toBlob((r) => {
+      (a = q.value) == null || a.toBlob((r) => {
         e(
           new File([r ?? new Blob()], Date.now() + ".png", {
             type: "image/png"
@@ -84,8 +91,8 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
       });
     }), U = (e = !1) => {
       var a;
-      l.disabled || (e && (d.value = 1), (a = Q.value) == null || a.click());
-    }, ce = async (e) => {
+      l.disabled || (e && (d.value = 1), (a = X.value) == null || a.click());
+    }, ve = async (e) => {
       const { files: a } = e.target, r = Array.from(a ?? []).slice(
         0,
         s.value.length ? 1 : 2
@@ -93,35 +100,35 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
       for (const [t, u] of r.entries())
         try {
           const o = d.value ?? t;
-          await ve(u, o);
+          await ge(u, o);
         } catch (o) {
           console.error("Error loading image:", o);
         } finally {
           d.value = void 0;
         }
-    }, ve = async (e, a) => {
+    }, ge = async (e, a) => {
       const r = (u) => u.includes("image"), t = (u) => u > 1e6;
       return new Promise((u, o) => {
-        var D, A;
+        var D, S;
         if (e)
-          if (Y(a), !r(e.type))
-            B.value = !0, b.value = typeof l.validatorMessage != "string" && ((D = l.validatorMessage) != null && D.invalidFormat) ? l.validatorMessage.invalidFormat : "Tipe file harus berupa gambar!", M(), g.value = !1, F(a), o("Tipe file harus berupa gambar!");
+          if (Z(a), !r(e.type))
+            B.value = !0, b.value = typeof l.validatorMessage != "string" && ((D = l.validatorMessage) != null && D.invalidFormat) ? l.validatorMessage.invalidFormat : "Tipe file harus berupa gambar!", M(), f.value = !1, F(a), o("Tipe file harus berupa gambar!");
           else if (t(e.size))
-            B.value = !0, b.value = typeof l.validatorMessage != "string" && ((A = l.validatorMessage) != null && A.exceed) ? l.validatorMessage.exceed : "Ukuran gambar terlalu besar! Maks. 1 MB", M(), g.value = !1, F(a), o("Ukuran gambar terlalu besar! Maks. 1 MB");
+            B.value = !0, b.value = typeof l.validatorMessage != "string" && ((S = l.validatorMessage) != null && S.exceed) ? l.validatorMessage.exceed : "Ukuran gambar terlalu besar! Maks. 1 MB", M(), f.value = !1, F(a), o("Ukuran gambar terlalu besar! Maks. 1 MB");
           else {
             F(a);
-            const j = URL.createObjectURL(e), p = new FileReader();
-            p.onload = (L) => {
-              var te;
-              v.value[a].src = j, v.value[a].type = ge(
-                (te = L == null ? void 0 : L.target) == null ? void 0 : te.result,
+            const T = URL.createObjectURL(e), c = new FileReader();
+            c.onload = (L) => {
+              var re;
+              v.value[a].src = T, v.value[a].type = ye(
+                (re = L == null ? void 0 : L.target) == null ? void 0 : re.result,
                 e.type
               );
-            }, p.onerror = (L) => {
+            }, c.onerror = (L) => {
               console.error("🚀 ~ returnnewPromise ~ e:", L);
-            }, p.readAsArrayBuffer(e), d.value == null && (d.value = a), g.value || (g.value = !0), B.value = !1, b.value = void 0;
+            }, c.readAsArrayBuffer(e), d.value == null && (d.value = a), f.value || (f.value = !0), B.value = !1, b.value = void 0;
           }
-        de.value += 1, z.value = u;
+        de.value += 1, R.value = u;
       });
     }, fe = () => {
       l.useValidator && Object.assign(
@@ -131,12 +138,12 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
           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 : b.value ? b.value : !0;
         })
       );
-    }, Y = (e) => {
+    }, Z = (e) => {
       v.value[e] = {
         src: null,
         type: null
       };
-    }, ge = (e, a = null) => {
+    }, ye = (e, a = null) => {
       if (e) {
         const r = new Uint8Array(e).subarray(0, 4);
         let t = "";
@@ -158,76 +165,76 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
         }
       }
       return null;
-    }, Z = (e) => {
-      const a = He(e.split(",")[1], P.value);
+    }, _ = (e) => {
+      const a = We(e.split(",")[1], P.value);
       return window.URL.createObjectURL(a);
-    }, ye = async (e, a) => {
+    }, be = async (e, a) => {
       const r = await fetch(e).then((t) => t.blob());
       return new File([r], a, { type: P.value });
-    }, be = async () => {
+    }, we = async () => {
       const e = d.value ?? 0;
       try {
-        await we(e);
+        await he(e);
       } catch (a) {
         console.error(a);
       }
-      _();
-    }, _ = () => {
+      ee();
+    }, ee = () => {
       var e;
-      g.value = !1, (e = z.value) == null || e.call(z), z.value = void 0;
-    }, we = async (e) => {
+      f.value = !1, (e = R.value) == null || e.call(R), R.value = void 0;
+    }, he = async (e) => {
       if (K.value) {
         const a = K.value.getResult();
         if (a.canvas) {
           const r = a.canvas.toDataURL(P.value);
-          await he(r, e);
+          await ke(r, e);
         }
       }
-    }, he = async (e, a) => {
+    }, ke = async (e, a) => {
       try {
         C.value = document.createElement("canvas");
         const r = C.value.getContext("2d"), t = new Image();
         t.src = e, await t.decode();
         const u = 80 / 100, o = t.width * u, D = t.height * u;
         C.value.setAttribute("width", o.toString()), C.value.setAttribute("height", D.toString()), r && r.drawImage(t, 0, 0, o, D);
-        const A = C.value.toDataURL(P.value, 0.95), j = Date.now() + `.${l.fileType}`, p = {
+        const S = C.value.toDataURL(P.value, 0.95), T = Date.now() + `.${l.fileType}`, c = {
           canvas: C.value,
           compressed: {
-            blob: Z(A),
-            base64: A,
-            fileName: j,
-            file: await ye(Z(A), j),
+            blob: _(S),
+            base64: S,
+            fileName: T,
+            file: await be(_(S), T),
             size: "",
             type: P.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, k("apply", p);
+        c.compressed.size = Math.round(c.compressed.file.size / 1e3) + "KB", s.value[a] = c.compressed.blob, l.multiple ? i.value && Array.isArray(i.value) ? i.value[a] = c.compressed.file : i.value = [c.compressed.file] : i.value = c.compressed.file, I("apply", c);
       } catch (r) {
         console.error(r);
       }
     }, F = (e) => {
       v.value[e].src && URL.revokeObjectURL(v.value[e].src);
-    }, ee = (e) => {
-      l.confirmOnDelete ? H.value[e] = !0 : l.emitDeleteFn ? k("delete", G, e) : G(e);
-    }, G = (e = 0) => {
-      B.value = !1, b.value = void 0, s.value = s.value.toSpliced(e, 1), F(e), v.value[e] = { src: null, type: null }, v.value = [v.value[+!e], v.value[e]], d.value = 0, T.value = 0, l.confirmOnDelete || k("delete"), l.multiple && Array.isArray(i.value) ? i.value = i.value.toSpliced(e, 1) : i.handleReset && i.handleReset();
     }, ae = (e) => {
+      l.confirmOnDelete ? H.value[e] = !0 : l.emitDeleteFn ? I("delete", G, e) : G(e);
+    }, G = (e = 0) => {
+      B.value = !1, b.value = void 0, s.value = s.value.toSpliced(e, 1), F(e), v.value[e] = { src: null, type: null }, v.value = [v.value[+!e], v.value[e]], d.value = 0, x.value = 0, l.confirmOnDelete || I("delete"), l.multiple && Array.isArray(i.value) ? i.value = i.value.toSpliced(e, 1) : i.handleReset && i.handleReset();
+    }, le = (e) => {
       var r;
       const a = (r = s.value[e]) == null ? void 0 : r.toString();
-      d.value = e, a != null && a.includes("blob") ? (d.value = e, g.value = !0) : (Y(e), U());
+      d.value = e, a != null && a.includes("blob") ? (d.value = e, f.value = !0) : (Z(e), U());
     }, Ie = () => {
       U();
-    }, le = oe(() => navigator.userAgent.includes("Firefox"));
+    }, te = J(() => navigator.userAgent.includes("Chrome"));
     return N(
       () => i.value,
       (e) => {
-        (e instanceof File || Array.isArray(e) && e.some((a) => a instanceof File)) && k("update:fieldValue", e);
+        (e instanceof File || Array.isArray(e) && e.some((a) => a instanceof File)) && I("update:fieldValue", e);
       }
     ), N(b, (e) => {
       e && i.setErrors && i.setErrors(e);
-    }), N(g, (e) => {
-      e || X.value++;
+    }), N(f, (e) => {
+      e || Y.value++;
     }), N(
       () => l.initialName,
       () => {
@@ -239,8 +246,8 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
         M();
       },
       { once: !0 }
-    ), ie({ assignPreviewImagesFromProp: M }), (e, a) => (n(), f(V, null, [
-      m(je, {
+    ), ie({ assignPreviewImagesFromProp: M }), (e, a) => (n(), g(V, null, [
+      m(Oe, {
         class: y([{ "!w-max": !l.multiple, "!w-full": l.multiple }]),
         info: l.fieldInfo,
         label: l.label,
@@ -248,76 +255,79 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
         "data-wv-name": "image-compressor",
         "data-wv-section": "root"
       }, {
-        default: O(() => [
+        default: j(() => [
           h("div", {
             class: y([
               "w-full",
-              { "grid gap-6 items-start grid-cols-2": e.multiple && e.type === "normal" },
               {
+                "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), f(V, { key: 0 }, Fe(s.value, (r, t) => {
+            s.value.length ? (n(!0), g(V, { key: 0 }, Se(s.value, (r, t) => {
               var u;
-              return n(), f("div", {
-                key: t,
+              return n(), g("div", {
+                key: r.toString(),
                 class: y([[
-                  { "items-start": e.type === "normal" },
-                  { "items-center": e.type === "inline-table" }
+                  {
+                    "items-start": e.type === "normal",
+                    "items-center": e.type === "inline-table"
+                  }
                 ], "flex gap-1"]),
                 "data-wv-section": "preview"
               }, [
                 h("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" }
+                    {
+                      "max-w-[80px]": e.imagePreviewSize === "medium",
+                      "max-w-[125px]": e.imagePreviewSize === "big",
+                      "flex-col": e.type === "normal"
+                    }
                   ]),
                   "data-wv-section": "preview-image-wrapper"
                 }, [
                   h("div", {
                     class: y([
                       {
-                        "[&>span]:hover:opacity-30 [&>[data-wv-section=input-image-trigger]]:hover:opacity-100": W(t)
-                      },
-                      "relative",
-                      {
+                        "[&>span]:hover:opacity-30 [&>[data-wv-section=input-image-trigger]]:hover:opacity-100": W(t),
                         "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"
-                      }
+                      },
+                      "relative"
                     ]),
                     "data-wv-section": "image-wrapper"
                   }, [
-                    m(Ne, {
+                    m(De, {
                       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: r,
+                      "thumbnail-size": ce.value,
+                      "use-default-size": !1,
                       "data-wv-section": "preview-image"
-                    }, null, 8, ["class", "rounded", "size", "src"]),
-                    W(t) ? (n(), f("button", {
+                    }, null, 8, ["class", "rounded", "src", "thumbnail-size"]),
+                    W(t) ? (n(), g("button", {
                       key: 0,
                       class: y([
-                        (u = $(ue)) == null ? void 0 : u.button.class,
+                        (u = A(ue)) == null ? void 0 : u.button.class,
                         "hover:bg-opacity-0 rounded-lg opacity-0"
                       ]),
                       onClick: a[0] || (a[0] = (o) => U(!1)),
                       "data-wv-section": "input-image-trigger",
                       type: "button"
                     }, [
-                      m(q, {
+                      m(O, {
                         class: "w-6 h-6",
                         "data-wv-section": "trigger-icon",
                         icon: "image-add",
                         severity: "primary"
                       })
-                    ], 2)) : c("", !0)
+                    ], 2)) : p("", !0)
                   ], 2),
-                  !l.disabled && !W(t) ? (n(), f(V, { key: 0 }, [
+                  !l.disabled && !W(t) ? (n(), g(V, { key: 0 }, [
                     h("div", {
                       class: y([
                         "flex gap-0.5 justify-center",
@@ -325,107 +335,102 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                       ]),
                       "data-wv-section": "preview-buttons"
                     }, [
-                      e.type === "normal" ? (n(), f(V, { key: 0 }, [
-                        m(R, {
-                          onClick: (o) => ae(t),
+                      e.type === "normal" ? (n(), g(V, { key: 0 }, [
+                        m($, {
+                          onClick: (o) => le(t),
                           class: "!py-0 !px-1 !h-max",
                           icon: "pencil",
                           label: "Edit",
                           text: ""
                         }, null, 8, ["onClick"]),
-                        e.useDeleteButton ? (n(), I(R, {
+                        e.useDeleteButton ? (n(), k($, {
                           key: 0,
-                          onClick: (o) => ee(t),
+                          onClick: (o) => ae(t),
                           class: "!py-0 !px-1 !h-max",
                           icon: "delete-bin",
                           label: "Delete",
                           severity: "danger",
                           text: ""
-                        }, null, 8, ["onClick"])) : c("", !0)
-                      ], 64)) : (n(), f(V, { key: 1 }, [
-                        m(q, {
-                          onClick: (o) => ae(t),
+                        }, null, 8, ["onClick"])) : p("", !0)
+                      ], 64)) : (n(), g(V, { key: 1 }, [
+                        m(O, {
+                          onClick: (o) => le(t),
                           class: "text-xs p-0.5 rounded-xs mr-1",
                           icon: "pencil",
                           severity: "primary"
                         }, null, 8, ["onClick"]),
-                        m(q, {
-                          onClick: (o) => ee(t),
+                        m(O, {
+                          onClick: (o) => ae(t),
                           class: "text-xs p-0.5 rounded-xs",
                           icon: "delete-bin",
                           severity: "danger"
                         }, null, 8, ["onClick"])
                       ], 64))
                     ], 2),
-                    m(Te, {
+                    m(je, {
                       visible: H.value[t],
                       "onUpdate:visible": (o) => H.value[t] = o,
                       closable: !1,
-                      onConfirm: (o) => k("delete", G, t),
+                      onConfirm: (o) => I("delete", G, 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)
+                  ], 64)) : p("", !0)
                 ], 2),
-                e.type === "normal" ? (n(), I(se, {
+                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] = (o) => U(!0))
                 }, {
-                  default: O(() => [
-                    s.value.length === 2 && l.multiple ? (n(), I(Ve, {
+                  default: j(() => [
+                    s.value.length === 2 && l.multiple ? (n(), k(Ee, {
                       key: 0,
-                      modelValue: T.value,
-                      "onUpdate:modelValue": a[1] || (a[1] = (o) => T.value = o),
+                      modelValue: x.value,
+                      "onUpdate:modelValue": a[1] || (a[1] = (o) => x.value = o),
                       "label-id": "default-" + t,
                       value: t,
                       label: "Set as default"
-                    }, null, 8, ["modelValue", "label-id", "value"])) : c("", !0)
+                    }, null, 8, ["modelValue", "label-id", "value"])) : p("", !0)
                   ]),
                   _: 2
-                }, 1032, ["custom-requirements", "show-add-button", "show-info"])) : c("", !0),
-                e.multiple && s.value.length == 1 && e.type === "inline-table" ? (n(), I(R, {
+                }, 1032, ["custom-requirements", "show-add-button", "show-info"])) : p("", !0),
+                e.multiple && s.value.length == 1 && e.type === "inline-table" ? (n(), k($, {
                   key: 1,
                   onClick: a[3] || (a[3] = (o) => U(!0)),
                   icon: "add",
                   label: "Photo",
                   text: ""
-                })) : c("", !0)
+                })) : p("", !0)
               ], 2);
-            }), 128)) : e.type != "inline-table" ? (n(), f("div", We, [
+            }), 128)) : e.type != "inline-table" ? (n(), g("div", Ge, [
               h("button", {
                 class: y([
                   {
                     "w-[125px] h-[125px]": e.imagePreviewSize === "big",
                     "w-[30px] h-[30px]": e.imagePreviewSize === "small",
-                    "w-[80px] h-[80px]": e.imagePreviewSize === "medium"
+                    "w-[80px] h-[80px]": e.imagePreviewSize === "medium",
+                    "ring-1": !te.value,
+                    "ring-[0.5px]": te.value,
+                    "rounded-full": e.rounded,
+                    "rounded-lg": !e.rounded,
+                    "ring-general-400 dark:ring-general-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-500": !B.value && !i.errorMessage,
+                    "ring-danger-500 dark:ring-danger-500": B.value || i.errorMessage,
+                    "bg-white dark:bg-grayscale-900": !l.disabled,
+                    "bg-general-50 dark:bg-grayscale-800": l.disabled
                   },
                   "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": !B.value && !i.errorMessage,
-                    "ring-danger-500": B.value || i.errorMessage
-                  },
-                  {
-                    "bg-white": !l.disabled,
-                    "bg-general-50": l.disabled
-                  }
+                  "cursor-pointer"
                 ]),
                 onClick: a[4] || (a[4] = (r) => U(!1)),
                 "data-wv-section": "input-image-trigger",
                 type: "button"
               }, [
-                m(q, {
+                m(O, {
                   class: "w-6 h-6",
                   "data-wv-section": "trigger-icon",
                   icon: "image-add",
@@ -436,78 +441,78 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                 "custom-requirements": e.customRequirements,
                 "show-info": e.showInfo
               }, null, 8, ["custom-requirements", "show-info"])
-            ])) : c("", !0)
+            ])) : p("", !0)
           ], 2),
-          (n(), f("input", {
+          (n(), g("input", {
             id: e.fieldName,
-            key: X.value,
+            key: Y.value,
             ref_key: "inputImageFile",
-            ref: Q,
+            ref: X,
             multiple: l.multiple && !s.value.length,
-            onChange: ce,
+            onChange: ve,
             accept: "image/*",
             class: "hidden",
             "data-wv-section": "hidden-image-input",
             type: "file"
-          }, null, 40, Ge)),
-          e.type === "inline-table" && !s.value.length ? (n(), f("label", {
+          }, null, 40, Je)),
+          e.type === "inline-table" && !s.value.length ? (n(), g("label", {
             key: 0,
             for: e.fieldName,
             class: "inline-flex items-center cursor-pointer"
           }, a[6] || (a[6] = [
-            h("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),
-            h("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(), I(qe, {
+            h("span", { class: "inline-flex items-center text-body-medium rounded-bl rounded-tl bg-general-50 dark:bg-grayscale-800 px-3 h-[26px] border-[0.5px] border-general-200 dark:border-grayscale-800" }, " Browse ", -1),
+            h("span", { class: "inline-flex items-center text-body-medium !text-general-200 dark:!text-general-600 !font-light rounded-br rounded-tr px-3 h-[26px] leading-4 border-[0.5px] border-l-0 border-general-200 dark:border-grayscale-800" }, " Select File ", -1)
+          ]), 8, Qe)) : p("", !0),
+          e.showValidatorMessage ? (n(), k(Ke, {
             key: 1,
             format: !1,
             message: i.errorMessage ?? b.value
-          }, null, 8, ["message"])) : c("", !0),
-          l.multiple ? (n(), I(Oe, {
+          }, null, 8, ["message"])) : p("", !0),
+          l.multiple ? (n(), k(qe, {
             key: 2,
-            value: T.value ? "secondImage" : "firstImage",
+            value: x.value ? "secondImage" : "firstImage",
             "field-name": "defaultImage"
-          }, null, 8, ["value"])) : c("", !0)
+          }, null, 8, ["value"])) : p("", !0)
         ]),
         _: 1
       }, 8, ["class", "info", "label", "mandatory"]),
-      m(Ee, {
-        visible: g.value,
-        "onUpdate:visible": a[5] || (a[5] = (r) => g.value = r),
+      m(Te, {
+        visible: f.value,
+        "onUpdate:visible": a[5] || (a[5] = (r) => f.value = r),
         draggable: !1,
-        header: $(E).cropDialogHeader,
+        header: A(E).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: O(() => [
-          m(R, {
-            label: $(E).cancelCropLabel,
-            onClick: _,
+        footer: j(() => [
+          m($, {
+            label: A(E).cancelCropLabel,
+            onClick: ee,
             "data-wv-section": "cancel-crop",
             severity: "secondary",
             text: "",
             type: "button"
           }, null, 8, ["label"]),
-          m(R, {
-            label: $(E).changeImageLabel,
+          m($, {
+            label: A(E).changeImageLabel,
             onClick: Ie,
             "data-wv-section": "change-image-button",
             text: "",
             type: "button"
           }, null, 8, ["label"]),
-          m(R, {
-            label: $(E).applyCropLabel,
-            onClick: be,
+          m($, {
+            label: A(E).applyCropLabel,
+            onClick: we,
             "data-wv-section": "apply-image-button",
             severity: "success",
             type: "button"
           }, null, 8, ["label"])
         ]),
-        default: O(() => [
-          d.value != null ? (n(), I($(Re), {
+        default: j(() => [
+          d.value != null ? (n(), k(A(Re), {
             key: 0,
             ref_key: "vueAdvanceCropper",
             ref: K,
@@ -517,7 +522,7 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
             class: "upload-example-cropper h-400",
             "foreground-class": "h-400",
             "image-class": "h-400"
-          }, null, 8, ["src"])) : c("", !0)
+          }, null, 8, ["src"])) : p("", !0)
         ]),
         _: 1
       }, 8, ["visible", "header"])
@@ -525,5 +530,6 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
   }
 });
 export {
-  va as default
+  ga as _
 };
+//# sourceMappingURL=index.es.js.map