@fewangsit/wangsvue-fats 1.0.1-alpha.36 → 1.0.1-alpha.38

package/image/index.d.ts

@@ -271,21 +271,24 @@ export interface ImageProps {
   unstyled?: boolean;
 
   /**
-   * Returns the full image URL or a Data URI for an image resource, based on the provided path and dimensions.
+   * 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 Data URI (e.g., Base64-encoded).
+   * 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 Data URI. Returns `undefined` if the path is invalid.
+   * @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,
+    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>;
 
   /**

package/image/index.es.js

@@ -1,11 +1,11 @@
-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 { defineComponent as W, computed as I, onMounted as Z, onUnmounted as q, shallowRef as d, createBlock as x, openBlock as m, unref as $, withCtx as k, createElementBlock as g, normalizeStyle as z, Fragment as L, createElementVNode as j, renderList as D, withDirectives as H, vShow as J, withModifiers as P, createVNode as R, normalizeClass as U, mergeProps as T } from "vue";
+import { c as K } from "../vendor/@vueuse/core/index.es.js";
+import { u as Q } from "../plugins/WangsVue.es.js";
+import { m as X } from "../utils/mergePropsWithDefaults.util.es.js";
+import { s as Y } 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({
+import { _ as ee } from "../icon/index.es.js";
+const te = ["src"], ae = ["src"], oe = ["src"], le = ["src", "onClick"], ge = /* @__PURE__ */ W({
   __name: "Image",
   props: {
     src: {},
@@ -26,111 +26,123 @@ const ee = ["src"], te = ["src"], ae = ["src"], re = ["src", "onClick"], me = /*
     placeholder: {}
   },
   setup(F) {
-    const a = F, { defaultProps: N } = K("Image"), i = I(() => Q(a, N));
-    W(() => {
+    const a = F, { defaultProps: N } = Q("Image"), i = I(() => X(a, N));
+    Z(() => {
       setTimeout(() => {
-        L();
+        _();
       }, 3e3);
-    }), Z(() => {
-      w();
+    }), q(() => {
+      h(), typeof n.value == "string" && n.value.includes("blob") && URL.revokeObjectURL(n.value);
+      for (const e of y) URL.revokeObjectURL(e);
     });
-    const s = d(0), p = d(), S = d(), f = d(!1), V = I(() => {
+    const s = d(0), p = d(), C = d(), f = d(!1), y = [], V = I(() => {
       var e;
-      return a.preview === !1 ? !1 : !f.value && !((e = m.value) != null && e.toString().includes("data:image/png;base64")) && m.value !== i.value.placeholder;
-    }), j = () => {
+      return a.preview === !1 ? !1 : !f.value && !((e = n.value) != null && e.toString().includes("data:image/png;base64")) && n.value !== i.value.placeholder;
+    }), A = () => {
       const e = a.galleries ?? [];
-      s.value = (s.value + 1) % e.length, h();
-    }, A = () => {
+      s.value = (s.value + 1) % e.length, b();
+    }, G = () => {
       const e = a.galleries ?? [];
-      s.value = (s.value - 1 + e.length) % e.length, h();
-    }, L = () => {
+      s.value = (s.value - 1 + e.length) % e.length, b();
+    }, _ = () => {
       var e;
-      w(), (e = a.galleries) != null && e.length && (p.value = window.setInterval(() => {
+      h(), (e = a.galleries) != null && e.length && (p.value = window.setInterval(() => {
         const t = a.galleries ?? [];
         s.value = (s.value + 1) % t.length;
       }, 3e3));
-    }, w = () => {
+    }, h = () => {
       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(
+    }, S = I(() => a.width != null ? a.width : a.size === "small" ? 30 : a.size === "medium" ? 80 : 125), n = K(
       async () => {
         var e, t;
-        return !a.src || f.value ? i.value.placeholder : typeof a.src == "string" ? (a.src.includes("http") || // From public image
-        /^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;
+        if (!a.src || f.value) return i.value.placeholder;
+        if (typeof a.src == "string") {
+          const o = 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, S.value));
+          return typeof o == "string" && o.includes("blob") && y.push(o), o || i.value.placeholder;
+        }
+        return 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;
+    ), w = d(), M = async () => {
+      var t, o, l, u;
+      if (w.value != null) return;
+      let e = n.value;
       if (typeof e == "string") {
-        const l = (r = (t = i.value).getImageURL) == null ? void 0 : r.call(t, "preview"), 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;
+        const r = (o = (t = i.value).getImageURL) == null ? void 0 : o.call(
+          t,
+          "preview",
+          void 0,
+          void 0,
+          !0
+        ), c = typeof r == "string" && !(r != null && r.includes("undefined")) ? new URL(r).origin : "", B = c && e.includes(c) || // For getImageURL that return the image full url
+        r 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));
+        e.includes("data:image/svg+xml") ? e : await ((u = (l = i.value).getImageURL) == null ? void 0 : u.call(l, a.src));
       }
-      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);
+      typeof e == "string" && e.includes("blob") && y.push(e), w.value = e || i.value.placeholder;
+    }, b = (e) => {
+      h(), typeof e == "number" && (s.value = e), C.value ? window.clearTimeout(C.value) : window.setTimeout(_, 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;
+      var o;
+      const t = (o = e.target) == null ? void 0 : o.src;
+      (t === n.value || t.includes(n.value.toString())) && (f.value = !0);
+    }, O = (e) => {
+      var o, l, u;
       const t = e;
-      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 typeof t == "string" ? t.includes("http") ? t : (u = (l = (o = i.value).getImageURL) == null ? void 0 : l.call(o, t)) == null ? void 0 : u.toString() : t;
     };
     return (e, t) => {
-      var r;
-      return u(), q(D(X), {
+      var o;
+      return m(), x($(Y), {
         "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 }) },
+        pt: { root: (o = e.$preset.image) == null ? void 0 : o.root({ props: e.$props }) },
         "zoom-in-disabled": e.zoomInDisabled,
         "zoom-out-disabled": e.zoomOutDisabled,
-        onShow: G
+        onShow: M
       }, {
-        image: b(() => {
-          var o;
+        image: k(() => {
+          var l;
           return [
-            $("img", T((o = e.$preset.image) == null ? void 0 : o.image({ props: e.$props, context: { imageSize: R.value } }), {
+            j("img", T((l = e.$preset.image) == null ? void 0 : l.image({ props: e.$props, context: { imageSize: S.value } }), {
               onerror: v,
-              src: D(m),
+              src: $(n),
               alt: ""
-            }), null, 16, ee)
+            }), null, 16, te)
           ];
         }),
-        indicatoricon: b(() => [
-          C(Y, T(e.$preset.image.icon, { icon: "eye" }), null, 16)
+        indicatoricon: k(() => [
+          R(ee, T(e.$preset.image.icon, { icon: "eye" }), null, 16)
         ]),
-        preview: b((o) => {
-          var c;
+        preview: k((l) => {
+          var u;
           return [
-            (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,
+            (u = e.galleries) != null && u.length ? (m(), g(L, { key: 1 }, [
+              (m(!0), g(L, null, D(e.galleries, ({ src: r }, c) => H((m(), g("img", {
+                key: c,
                 onerror: v,
-                src: U(l),
-                style: k(o.style),
+                src: O(r),
+                style: z(l.style),
                 alt: "",
                 "data-wv-section": "image-gallery"
-              }, null, 12, ae)), [
-                [H, n === s.value]
+              }, null, 12, oe)), [
+                [J, c === s.value]
               ])), 128)),
-              $("div", {
+              j("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(E, {
-                  class: _([
+                R(E, {
+                  class: U([
                     "text-surface-0 rotate-180 sticky left-0 !w-8 !h-8 [&_i]:w-5 [&_i]:h-5",
                     "rounded-full mr-3"
                   ]),
-                  onClick: A,
+                  onClick: G,
                   "aria-label": "Previous Image",
                   "data-wv-section": "prev-button",
                   icon: "arrow-right",
@@ -138,25 +150,25 @@ const ee = ["src"], te = ["src"], ae = ["src"], re = ["src", "onClick"], me = /*
                   severity: "secondary",
                   text: ""
                 }),
-                (u(!0), g(z, null, O(e.galleries, ({ src: l }, n) => (u(), g("img", {
-                  key: n,
-                  class: _([
+                (m(!0), g(L, null, D(e.galleries, ({ src: r }, c) => (m(), g("img", {
+                  key: c,
+                  class: U([
                     "h-10 w-10 object-cover cursor-pointer opacity-50 hover:opacity-100 transition-opacity",
-                    { "!opacity-100": s.value == n }
+                    { "!opacity-100": s.value == c }
                   ]),
                   onerror: v,
-                  src: U(l),
-                  style: k(o.style),
-                  onClick: P((B) => h(n), ["stop"]),
+                  src: O(r),
+                  style: z(l.style),
+                  onClick: P((B) => b(c), ["stop"]),
                   alt: "",
                   "data-wv-section": "thumbnail-image"
-                }, null, 14, re))), 128)),
-                C(E, {
-                  class: _([
+                }, null, 14, le))), 128)),
+                R(E, {
+                  class: U([
                     "text-surface-0 sticky !w-8 !h-8 [&_i]:w-5 [&_i]:h-5",
                     "rounded-full ml-3"
                   ]),
-                  onClick: j,
+                  onClick: A,
                   "aria-label": "Next Image",
                   "data-wv-section": "next-button",
                   icon: "arrow-right",
@@ -164,13 +176,13 @@ const ee = ["src"], te = ["src"], ae = ["src"], re = ["src", "onClick"], me = /*
                   text: ""
                 })
               ])
-            ], 64)) : (u(), g("img", {
+            ], 64)) : (m(), g("img", {
               key: 0,
               onerror: v,
-              src: y.value,
-              style: k(o.style),
+              src: w.value,
+              style: z(l.style),
               alt: ""
-            }, null, 12, te))
+            }, null, 12, ae))
           ];
         }),
         _: 1
@@ -179,5 +191,5 @@ const ee = ["src"], te = ["src"], ae = ["src"], re = ["src", "onClick"], me = /*
   }
 });
 export {
-  me as _
+  ge as _
 };

package/package.json

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