@fewangsit/wangsvue-fats 1.0.1-alpha.64 → 1.0.1-alpha.65

package/image/index.d.ts

@@ -296,6 +296,17 @@ export interface ImageProps {
    * It should be preserved by project configuration.
    */
   placeholder?: string | undefined;
+
+  /**
+   * Use default value for width and height if not specified. The default size is 125px.
+   * @defaultValue true
+   */
+  useDefaultSize?: boolean;
+
+  /**
+   * The size of thumbnail image (in px) if props.width is undefined and props.useDefaultSize is false.
+   */
+  thumbnailSize?: number;
 }
 
 /**

package/image/index.es.js

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

package/package.json

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