@fewangsit/wangsvue-fats 1.0.1-alpha.35 → 1.0.1-alpha.37

package/backgroundimagecropper/index.es.js

@@ -50,8 +50,8 @@ const I = (i, s) => {
       _: 3
     }, 8, ["mouse-move", "touch-move", "touch-resize", "wheel-resize"]));
   }
-}), S = /* @__PURE__ */ I(R, [["__scopeId", "data-v-9031c32d"]]);
+}), b = /* @__PURE__ */ I(R, [["__scopeId", "data-v-5cd98b2d"]]);
 export {
-  S as B,
+  b as B,
   I as _
 };

package/datatable/index.es.js

@@ -988,7 +988,7 @@ const zt = (W, $) => W.every((t) => $.includes(t)), jt = ["id"], Vt = ["onClick"
       ], 16);
     };
   }
-}), Fl = /* @__PURE__ */ Lt(sl, [["__scopeId", "data-v-015be0a0"]]);
+}), Fl = /* @__PURE__ */ Lt(sl, [["__scopeId", "data-v-37d9df20"]]);
 export {
   Fl as D
 };

package/dialogprintqr/index.es.js

@@ -231,8 +231,8 @@ const H = /* @__PURE__ */ nA(vA), j = "data:image/png;base64,iVBORw0KGgoAAAANSUh
             t[4] || (t[4] = e("span", null, "Preview", -1)),
             a(eA, {
               icon: "info",
-              info: `This preview is only for showing the side of the\r
-          label that printed or not. It does not show the\r
+              info: `This preview is only for showing the side of the
+          label that printed or not. It does not show the
           exact amount you entered.`,
               severity: "primary"
             })

package/image/index.d.ts

@@ -271,17 +271,25 @@ export interface ImageProps {
   unstyled?: boolean;
 
   /**
-   * Get image url for specifics project from its server.
-   * @returns The full URL of the image from the server.
-   * @param path - the Image path from API Response JSON
-   * @param width - the image width in pixels
-   * @param height - the image height in pixels
+   * Returns the full image URL or a ObjetctURL from Blob for an image resource, based on the provided path and dimensions.
+   *
+   * If the image is publicly accessible, this typically returns a fully qualified URL.
+   * If the image requires authentication or protected access, this may return a ObjetctURL from Blob (e.g., Base64-encoded).
+   *
+   * @param path - The image path as provided in the API response JSON. Can be null or undefined.
+   * @param width - Optional width of the image in pixels.
+   * @param height - Optional height of the image in pixels.
+   *
+   * @returns A string representing either the full image URL or a ObjetctURL from Blob. Returns `undefined` if the path is invalid.
+   * @example res.blob().then((blob) => resolve(URL.createObjectURL(blob)))
+   *
    */
   getImageURL?: (
     path?: string | null,
     width?: number,
     height?: number,
-  ) => string | undefined;
+    returnURLOnly?: boolean, // Default is undefined or will return Promise when using Auth, when it manually sets to true, return the url only
+  ) => string | undefined | Promise<string | undefined>;
 
   /**
    * The placeholder to be shown when the image failed to load, or the src is not provided.

package/image/index.es.js

@@ -1,10 +1,11 @@
-import { defineComponent as j, computed as p, onMounted as G, onUnmounted as M, shallowRef as f, createBlock as W, openBlock as n, unref as q, mergeProps as I, withCtx as b, createElementBlock as m, normalizeStyle as k, Fragment as _, createElementVNode as U, renderList as T, withDirectives as A, vShow as H, withModifiers as D, createVNode as C, normalizeClass as z } from "vue";
-import { u as J } from "../plugins/WangsVue.es.js";
-import { m as K } from "../utils/mergePropsWithDefaults.util.es.js";
-import { s as Q } from "../vendor/primevue/image/image.esm.es.js";
-import { _ as O } from "../button/index.es.js";
-import { _ as X } from "../icon/index.es.js";
-const Y = ["src"], Z = ["src"], ee = ["src"], te = ["src", "onClick"], ne = /* @__PURE__ */ j({
+import { defineComponent as M, computed as I, onMounted as W, onUnmounted as Z, shallowRef as d, createBlock as q, openBlock as u, unref as D, withCtx as b, createElementBlock as g, normalizeStyle as k, Fragment as z, createElementVNode as $, renderList as O, withDirectives as x, vShow as H, withModifiers as P, createVNode as C, normalizeClass as _, mergeProps as T } from "vue";
+import { c as J } from "../vendor/@vueuse/core/index.es.js";
+import { u as K } from "../plugins/WangsVue.es.js";
+import { m as Q } from "../utils/mergePropsWithDefaults.util.es.js";
+import { s as X } from "../vendor/primevue/image/image.esm.es.js";
+import { _ as E } from "../button/index.es.js";
+import { _ as Y } from "../icon/index.es.js";
+const ee = ["src"], te = ["src"], ae = ["src"], re = ["src", "onClick"], me = /* @__PURE__ */ M({
   __name: "Image",
   props: {
     src: {},
@@ -24,101 +25,118 @@ const Y = ["src"], Z = ["src"], ee = ["src"], te = ["src", "onClick"], ne = /* @
     getImageURL: {},
     placeholder: {}
   },
-  setup(x) {
-    const r = x, { defaultProps: E } = J("Image"), c = p(() => K(r, E));
-    G(() => {
+  setup(F) {
+    const a = F, { defaultProps: N } = K("Image"), i = I(() => Q(a, N));
+    W(() => {
       setTimeout(() => {
-        $();
+        L();
       }, 3e3);
-    }), M(() => {
-      h();
+    }), Z(() => {
+      w();
     });
-    const o = f(0), v = f(), L = f(), w = f(!1), F = p(() => {
+    const s = d(0), p = d(), S = d(), f = d(!1), V = I(() => {
       var e;
-      return r.preview === !1 ? !1 : !w.value && !((e = u.value) != null && e.toString().includes("data:image/png;base64")) && u.value !== c.value.placeholder;
-    }), N = () => {
-      const e = r.galleries ?? [];
-      o.value = (o.value + 1) % e.length, y();
-    }, P = () => {
-      const e = r.galleries ?? [];
-      o.value = (o.value - 1 + e.length) % e.length, y();
-    }, $ = () => {
+      return a.preview === !1 ? !1 : !f.value && !((e = m.value) != null && e.toString().includes("data:image/png;base64")) && m.value !== i.value.placeholder;
+    }), j = () => {
+      const e = a.galleries ?? [];
+      s.value = (s.value + 1) % e.length, h();
+    }, A = () => {
+      const e = a.galleries ?? [];
+      s.value = (s.value - 1 + e.length) % e.length, h();
+    }, L = () => {
       var e;
-      h(), (e = r.galleries) != null && e.length && (v.value = window.setInterval(() => {
-        const t = r.galleries ?? [];
-        o.value = (o.value + 1) % t.length;
+      w(), (e = a.galleries) != null && e.length && (p.value = window.setInterval(() => {
+        const t = a.galleries ?? [];
+        s.value = (s.value + 1) % t.length;
       }, 3e3));
-    }, h = () => {
-      v.value && (window.clearInterval(v.value), v.value = void 0);
-    }, B = p(() => r.width != null ? r.width : r.size === "small" ? 30 : r.size === "medium" ? 80 : 125), u = p(() => {
-      var e, t;
-      return !r.src || w.value ? c.value.placeholder : typeof r.src == "string" ? r.src.includes("http") || // From public image
-      r.src.includes("data:image/png;base64") ? r.src : (t = (e = c.value).getImageURL) == null ? void 0 : t.call(e, r.src, B.value) : r.src;
-    }), V = p(() => {
-      var t, l, a, g;
-      const e = u.value;
+    }, w = () => {
+      p.value && (window.clearInterval(p.value), p.value = void 0);
+    }, R = I(() => a.width != null ? a.width : a.size === "small" ? 30 : a.size === "medium" ? 80 : 125), m = J(
+      async () => {
+        var e, t;
+        return !a.src || f.value ? i.value.placeholder : typeof a.src == "string" ? (a.src.includes("http") || // From public image or ObjectURL from Blob e.g 'blob:http://localhost:5173/ca48705d-1fc1-4a74-af38-353ffce7e02a'
+        /^data:image\/[a-zA-Z0-9.+-]+;base64,/.test(a.src) ? a.src : await ((t = (e = i.value).getImageURL) == null ? void 0 : t.call(e, a.src, R.value))) || i.value.placeholder : a.src;
+      },
+      i.value.placeholder
+      // Show placeholder while fetching image
+    ), y = d(), G = async () => {
+      var t, r, o, c;
+      if (y.value != null) return;
+      let e = m.value;
       if (typeof e == "string") {
-        const s = (l = (t = c.value).getImageURL) == null ? void 0 : l.call(t, "preview"), i = s && !(s != null && s.includes("undefined")) ? new URL(s).origin : "", R = i && e.includes(i);
-        return e.includes("http") && !R || // From public resource
-        e.includes("data:image/svg+xml") ? e : (g = (a = c.value).getImageURL) == null ? void 0 : g.call(a, r.src);
+        const l = (r = (t = i.value).getImageURL) == null ? void 0 : r.call(
+          t,
+          "preview",
+          void 0,
+          void 0,
+          !0
+        ), n = typeof l == "string" && !(l != null && l.includes("undefined")) ? new URL(l).origin : "", B = n && e.includes(n) || // For getImageURL that return the image full url
+        l instanceof Promise;
+        e = e.includes("http") && !B || // From public resource
+        e.includes("data:image/svg+xml") ? e : await ((c = (o = i.value).getImageURL) == null ? void 0 : c.call(o, a.src));
       }
-      return e;
-    }), y = (e) => {
-      h(), typeof e == "number" && (o.value = e), L.value ? window.clearTimeout(L.value) : window.setTimeout($, 3e3);
-    }, d = (e) => {
-      var l;
-      const t = (l = e.target) == null ? void 0 : l.src;
-      (t === u.value || t.includes(u.value.toString())) && (w.value = !0);
-    }, S = (e) => {
-      var l, a;
+      y.value = e || i.value.placeholder;
+    }, h = (e) => {
+      w(), typeof e == "number" && (s.value = e), S.value ? window.clearTimeout(S.value) : window.setTimeout(L, 3e3);
+    }, v = (e) => {
+      var r;
+      const t = (r = e.target) == null ? void 0 : r.src;
+      (t === m.value || t.includes(m.value.toString())) && (f.value = !0);
+    }, U = (e) => {
+      var r, o, c;
       const t = e;
-      return typeof t == "string" ? t.includes("http") ? t : (a = (l = c.value).getImageURL) == null ? void 0 : a.call(l, t) : t;
+      return typeof t == "string" ? t.includes("http") ? t : (c = (o = (r = i.value).getImageURL) == null ? void 0 : o.call(r, t)) == null ? void 0 : c.toString() : t;
     };
     return (e, t) => {
-      var l;
-      return n(), W(q(Q), I(e.$props, {
-        preview: F.value,
-        pt: { root: (l = e.$preset.image) == null ? void 0 : l.root({ props: e.$props }) }
-      }), {
+      var r;
+      return u(), q(D(X), {
+        "image-class": e.imageClass,
+        "image-style": e.imageStyle,
+        preview: V.value,
+        pt: { root: (r = e.$preset.image) == null ? void 0 : r.root({ props: e.$props }) },
+        "zoom-in-disabled": e.zoomInDisabled,
+        "zoom-out-disabled": e.zoomOutDisabled,
+        onShow: G
+      }, {
         image: b(() => {
-          var a;
+          var o;
           return [
-            U("img", I((a = e.$preset.image) == null ? void 0 : a.image({ props: e.$props, context: { imageSize: B.value } }), {
-              onerror: d,
-              src: u.value,
+            $("img", T((o = e.$preset.image) == null ? void 0 : o.image({ props: e.$props, context: { imageSize: R.value } }), {
+              onerror: v,
+              src: D(m),
               alt: ""
-            }), null, 16, Y)
+            }), null, 16, ee)
           ];
         }),
         indicatoricon: b(() => [
-          C(X, I(e.$preset.image.icon, { icon: "eye" }), null, 16)
+          C(Y, T(e.$preset.image.icon, { icon: "eye" }), null, 16)
         ]),
-        preview: b((a) => {
-          var g;
+        preview: b((o) => {
+          var c;
           return [
-            (g = e.galleries) != null && g.length ? (n(), m(_, { key: 1 }, [
-              (n(!0), m(_, null, T(e.galleries, ({ src: s }, i) => A((n(), m("img", {
-                key: i,
-                onerror: d,
-                src: S(s),
-                style: k(a.style),
+            (c = e.galleries) != null && c.length ? (u(), g(z, { key: 1 }, [
+              (u(!0), g(z, null, O(e.galleries, ({ src: l }, n) => x((u(), g("img", {
+                key: n,
+                onerror: v,
+                src: U(l),
+                style: k(o.style),
                 alt: "",
                 "data-wv-section": "image-gallery"
-              }, null, 12, ee)), [
-                [H, i === o.value]
+              }, null, 12, ae)), [
+                [H, n === s.value]
               ])), 128)),
-              U("div", {
-                onClick: t[0] || (t[0] = D(() => {
+              $("div", {
+                onClick: t[0] || (t[0] = P(() => {
                 }, ["stop"])),
                 class: "fixed bottom-0 left-0 flex justify-center items-center w-full p-4 mx-auto flex-row bg-black/80",
                 "data-wv-section": "gallery-thumbnail"
               }, [
-                C(O, {
-                  class: z([
+                C(E, {
+                  class: _([
                     "text-surface-0 rotate-180 sticky left-0 !w-8 !h-8 [&_i]:w-5 [&_i]:h-5",
                     "rounded-full mr-3"
                   ]),
-                  onClick: P,
+                  onClick: A,
                   "aria-label": "Previous Image",
                   "data-wv-section": "prev-button",
                   icon: "arrow-right",
@@ -126,25 +144,25 @@ const Y = ["src"], Z = ["src"], ee = ["src"], te = ["src", "onClick"], ne = /* @
                   severity: "secondary",
                   text: ""
                 }),
-                (n(!0), m(_, null, T(e.galleries, ({ src: s }, i) => (n(), m("img", {
-                  key: i,
-                  class: z([
+                (u(!0), g(z, null, O(e.galleries, ({ src: l }, n) => (u(), g("img", {
+                  key: n,
+                  class: _([
                     "h-10 w-10 object-cover cursor-pointer opacity-50 hover:opacity-100 transition-opacity",
-                    { "!opacity-100": o.value == i }
+                    { "!opacity-100": s.value == n }
                   ]),
-                  onerror: d,
-                  src: S(s),
-                  style: k(a.style),
-                  onClick: D((R) => y(i), ["stop"]),
+                  onerror: v,
+                  src: U(l),
+                  style: k(o.style),
+                  onClick: P((B) => h(n), ["stop"]),
                   alt: "",
                   "data-wv-section": "thumbnail-image"
-                }, null, 14, te))), 128)),
-                C(O, {
-                  class: z([
+                }, null, 14, re))), 128)),
+                C(E, {
+                  class: _([
                     "text-surface-0 sticky !w-8 !h-8 [&_i]:w-5 [&_i]:h-5",
                     "rounded-full ml-3"
                   ]),
-                  onClick: N,
+                  onClick: j,
                   "aria-label": "Next Image",
                   "data-wv-section": "next-button",
                   icon: "arrow-right",
@@ -152,20 +170,20 @@ const Y = ["src"], Z = ["src"], ee = ["src"], te = ["src", "onClick"], ne = /* @
                   text: ""
                 })
               ])
-            ], 64)) : (n(), m("img", {
+            ], 64)) : (u(), g("img", {
               key: 0,
-              onerror: d,
-              src: V.value,
-              style: k(a.style),
+              onerror: v,
+              src: y.value,
+              style: k(o.style),
               alt: ""
-            }, null, 12, Z))
+            }, null, 12, te))
           ];
         }),
         _: 1
-      }, 16, ["preview", "pt"]);
+      }, 8, ["image-class", "image-style", "preview", "pt", "zoom-in-disabled", "zoom-out-disabled"]);
     };
   }
 });
 export {
-  ne as _
+  me as _
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-fats",
-  "version": "1.0.1-alpha.35",
+  "version": "1.0.1-alpha.37",
   "author": "Wangsit FE Developer",
   "description": "Fixed Asset Tagsamurai VueJS Component Library",
   "type": "module",