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

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,117 +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 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;
+        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(
+        const r = (o = (t = i.value).getImageURL) == null ? void 0 : o.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;
+        ), 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",
@@ -144,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",
@@ -170,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
@@ -185,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.37",
+  "version": "1.0.1-alpha.38",
   "author": "Wangsit FE Developer",
   "description": "Fixed Asset Tagsamurai VueJS Component Library",
   "type": "module",