@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/icon/index.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as c, computed as d, resolveDirective as v, createElementBlock as t, openBlock as o, Fragment as f, withDirectives as i, createCommentVNode as n, mergeProps as l } from "vue";
-const $ = /* @__PURE__ */ c({
+import { defineComponent, computed, resolveDirective, createElementBlock, openBlock, Fragment, withDirectives, createCommentVNode, mergeProps } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     icon: {},
@@ -8,9 +8,10 @@ const $ = /* @__PURE__ */ c({
     tooltipPos: { default: "bottom" },
     class: { default: void 0 }
   },
-  setup(u) {
-    const a = u, p = (() => {
-      switch (a.severity) {
+  setup(__props) {
+    const props = __props;
+    const severityClass = (() => {
+      switch (props.severity) {
         case "primary":
           return "text-primary-500";
         case "success":
@@ -24,59 +25,60 @@ const $ = /* @__PURE__ */ c({
         default:
           return "inherit";
       }
-    })(), s = d(() => [
+    })();
+    const classes = computed(() => [
       "icon",
-      `ic-${a.icon}`,
-      p,
+      `ic-${props.icon}`,
+      severityClass,
       "cursor-pointer !shrink-0"
     ]);
-    return (e, m) => {
-      const r = v("tooltip");
-      return o(), t(f, null, [
-        e.tooltipPos === "top" ? i((o(), t("i", l({ key: 0 }, e.$attrs, {
-          class: [...s.value, e.$props.class]
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createElementBlock(Fragment, null, [
+        _ctx.tooltipPos === "top" ? withDirectives((openBlock(), createElementBlock("i", mergeProps({ key: 0 }, _ctx.$attrs, {
+          class: [...classes.value, _ctx.$props["class"]]
         }), null, 16)), [
           [
-            r,
-            e.info,
+            _directive_tooltip,
+            _ctx.info,
             void 0,
-            { top: !0 }
+            { top: true }
           ]
-        ]) : n("", !0),
-        e.tooltipPos === "bottom" ? i((o(), t("i", l({ key: 1 }, e.$attrs, {
-          class: [...s.value, e.$props.class]
+        ]) : createCommentVNode("", true),
+        _ctx.tooltipPos === "bottom" ? withDirectives((openBlock(), createElementBlock("i", mergeProps({ key: 1 }, _ctx.$attrs, {
+          class: [...classes.value, _ctx.$props["class"]]
         }), null, 16)), [
           [
-            r,
-            e.info,
+            _directive_tooltip,
+            _ctx.info,
             void 0,
-            { bottom: !0 }
+            { bottom: true }
           ]
-        ]) : n("", !0),
-        e.tooltipPos === "right" ? i((o(), t("i", l({ key: 2 }, e.$attrs, {
-          class: [...s.value, e.$props.class]
+        ]) : createCommentVNode("", true),
+        _ctx.tooltipPos === "right" ? withDirectives((openBlock(), createElementBlock("i", mergeProps({ key: 2 }, _ctx.$attrs, {
+          class: [...classes.value, _ctx.$props["class"]]
         }), null, 16)), [
           [
-            r,
-            e.info,
+            _directive_tooltip,
+            _ctx.info,
             void 0,
-            { right: !0 }
+            { right: true }
           ]
-        ]) : n("", !0),
-        e.tooltipPos === "left" ? i((o(), t("i", l({ key: 3 }, e.$attrs, {
-          class: [...s.value, e.$props.class]
+        ]) : createCommentVNode("", true),
+        _ctx.tooltipPos === "left" ? withDirectives((openBlock(), createElementBlock("i", mergeProps({ key: 3 }, _ctx.$attrs, {
+          class: [...classes.value, _ctx.$props["class"]]
         }), null, 16)), [
           [
-            r,
-            e.info,
+            _directive_tooltip,
+            _ctx.info,
             void 0,
-            { left: !0 }
+            { left: true }
           ]
-        ]) : n("", !0)
+        ]) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
 export {
-  $ as _
+  _sfc_main as _
 };

package/image/index.es.js

@@ -1,14 +1,18 @@
-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, computed, onMounted, onUnmounted, shallowRef, createBlock, openBlock, unref, mergeProps, withCtx, createElementBlock, normalizeStyle, Fragment, createElementVNode, renderList, withDirectives, vShow, withModifiers, createVNode, normalizeClass } from "vue";
+import { u as useWangsVueConfig } from "../plugins/WangsVue.es.js";
+import { m as mergePropsWithDefaults } from "../utils/mergePropsWithDefaults.util.es.js";
+import { s as script } from "../vendor/primevue/image/image.esm.es.js";
+import { _ as _sfc_main$1 } from "../button/index.es.js";
+import { _ as _sfc_main$2 } from "../icon/index.es.js";
+const _hoisted_1 = ["src"];
+const _hoisted_2 = ["src"];
+const _hoisted_3 = ["src"];
+const _hoisted_4 = ["src", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Image",
   props: {
     src: {},
-    preview: { type: Boolean, default: !0 },
+    preview: { type: Boolean, default: true },
     size: {},
     width: {},
     rounded: { type: Boolean },
@@ -24,101 +28,154 @@ 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(__props) {
+    const props = __props;
+    const { defaultProps } = useWangsVueConfig("Image");
+    const config = computed(() => mergePropsWithDefaults(props, defaultProps));
+    onMounted(() => {
       setTimeout(() => {
-        $();
+        startInterval();
       }, 3e3);
-    }), M(() => {
-      h();
     });
-    const o = f(0), v = f(), L = f(), w = f(!1), F = p(() => {
-      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();
-    }, $ = () => {
-      var e;
-      h(), (e = r.galleries) != null && e.length && (v.value = window.setInterval(() => {
-        const t = r.galleries ?? [];
-        o.value = (o.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;
-      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);
+    onUnmounted(() => {
+      stopInterval();
+    });
+    const currentGalleryImage = shallowRef(0);
+    const intervalId = shallowRef();
+    const timeOutId = shallowRef();
+    const errorLoadImage = shallowRef(false);
+    const usePreview = computed(() => {
+      var _a;
+      if (props.preview === false) return false;
+      return !errorLoadImage.value && !((_a = imageThumbnail.value) == null ? void 0 : _a.toString().includes("data:image/png;base64")) && imageThumbnail.value !== config.value.placeholder;
+    });
+    const nextImage = () => {
+      const images = props.galleries ?? [];
+      currentGalleryImage.value = (currentGalleryImage.value + 1) % images.length;
+      handleThumbnailClick();
+    };
+    const prevImage = () => {
+      const images = props.galleries ?? [];
+      currentGalleryImage.value = (currentGalleryImage.value - 1 + images.length) % images.length;
+      handleThumbnailClick();
+    };
+    const startInterval = () => {
+      var _a;
+      stopInterval();
+      if ((_a = props.galleries) == null ? void 0 : _a.length) {
+        intervalId.value = window.setInterval(() => {
+          const images = props.galleries ?? [];
+          currentGalleryImage.value = (currentGalleryImage.value + 1) % images.length;
+        }, 3e3);
+      }
+    };
+    const stopInterval = () => {
+      if (intervalId.value) {
+        window.clearInterval(intervalId.value);
+        intervalId.value = void 0;
       }
-      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;
-      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 (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 }) }
+    const imageSize = computed(() => {
+      if (props.width != null) return props.width;
+      else if (props.size === "small") return 30;
+      else if (props.size === "medium") return 80;
+      return 125;
+    });
+    const imageThumbnail = computed(() => {
+      var _a, _b;
+      if (!props.src || errorLoadImage.value) return config.value.placeholder;
+      if (typeof props.src === "string") {
+        return props.src.includes("http") || // From public image
+        props.src.includes("data:image/png;base64") ? props.src : (_b = (_a = config.value).getImageURL) == null ? void 0 : _b.call(_a, props.src, imageSize.value);
+      }
+      return props.src;
+    });
+    const imagePreview = computed(() => {
+      var _a, _b, _c, _d;
+      const preview = imageThumbnail.value;
+      if (typeof preview === "string") {
+        const dummyPreviewUrl = (_b = (_a = config.value).getImageURL) == null ? void 0 : _b.call(_a, "preview");
+        const imageOrigin = dummyPreviewUrl && !(dummyPreviewUrl == null ? void 0 : dummyPreviewUrl.includes("undefined")) ? new URL(dummyPreviewUrl).origin : "";
+        const isFromFiles = imageOrigin && preview.includes(imageOrigin);
+        return preview.includes("http") && !isFromFiles || // From public resource
+        preview.includes("data:image/svg+xml") ? preview : (_d = (_c = config.value).getImageURL) == null ? void 0 : _d.call(_c, props.src);
+      }
+      return preview;
+    });
+    const handleThumbnailClick = (index) => {
+      stopInterval();
+      if (typeof index === "number") currentGalleryImage.value = index;
+      if (timeOutId.value) window.clearTimeout(timeOutId.value);
+      else window.setTimeout(startInterval, 3e3);
+    };
+    const onErrorLoadImage = (e) => {
+      var _a;
+      const src = (_a = e.target) == null ? void 0 : _a.src;
+      if (src === imageThumbnail.value || src.includes(imageThumbnail.value.toString())) {
+        errorLoadImage.value = true;
+      }
+    };
+    const getGalleryImageSrc = (src) => {
+      var _a, _b;
+      const image = src;
+      if (typeof image === "string") {
+        return image.includes("http") ? image : (_b = (_a = config.value).getImageURL) == null ? void 0 : _b.call(_a, image);
+      }
+      return image;
+    };
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createBlock(unref(script), mergeProps(_ctx.$props, {
+        preview: usePreview.value,
+        pt: { root: (_a = _ctx.$preset.image) == null ? void 0 : _a.root({ props: _ctx.$props }) }
       }), {
-        image: b(() => {
-          var a;
+        image: withCtx(() => {
+          var _a2;
           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,
+            createElementVNode("img", mergeProps((_a2 = _ctx.$preset.image) == null ? void 0 : _a2.image({ props: _ctx.$props, context: { imageSize: imageSize.value } }), {
+              onerror: onErrorLoadImage,
+              src: imageThumbnail.value,
               alt: ""
-            }), null, 16, Y)
+            }), null, 16, _hoisted_1)
           ];
         }),
-        indicatoricon: b(() => [
-          C(X, I(e.$preset.image.icon, { icon: "eye" }), null, 16)
+        indicatoricon: withCtx(() => [
+          createVNode(_sfc_main$2, mergeProps(_ctx.$preset.image.icon, { icon: "eye" }), null, 16)
         ]),
-        preview: b((a) => {
-          var g;
+        preview: withCtx((slotProps) => {
+          var _a2;
           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),
-                alt: "",
-                "data-wv-section": "image-gallery"
-              }, null, 12, ee)), [
-                [H, i === o.value]
-              ])), 128)),
-              U("div", {
-                onClick: t[0] || (t[0] = D(() => {
+            !((_a2 = _ctx.galleries) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("img", {
+              key: 0,
+              onerror: onErrorLoadImage,
+              src: imagePreview.value,
+              style: normalizeStyle(slotProps.style),
+              alt: ""
+            }, null, 12, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.galleries, ({ src }, index) => {
+                return withDirectives((openBlock(), createElementBlock("img", {
+                  key: index,
+                  onerror: onErrorLoadImage,
+                  src: getGalleryImageSrc(src),
+                  style: normalizeStyle(slotProps.style),
+                  alt: "",
+                  "data-wv-section": "image-gallery"
+                }, null, 12, _hoisted_3)), [
+                  [vShow, index === currentGalleryImage.value]
+                ]);
+              }), 128)),
+              createElementVNode("div", {
+                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                 }, ["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([
+                createVNode(_sfc_main$1, {
+                  class: normalizeClass([
                     "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: prevImage,
                   "aria-label": "Previous Image",
                   "data-wv-section": "prev-button",
                   icon: "arrow-right",
@@ -126,25 +183,27 @@ 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([
-                    "h-10 w-10 object-cover cursor-pointer opacity-50 hover:opacity-100 transition-opacity",
-                    { "!opacity-100": o.value == i }
-                  ]),
-                  onerror: d,
-                  src: S(s),
-                  style: k(a.style),
-                  onClick: D((R) => y(i), ["stop"]),
-                  alt: "",
-                  "data-wv-section": "thumbnail-image"
-                }, null, 14, te))), 128)),
-                C(O, {
-                  class: z([
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.galleries, ({ src }, index) => {
+                  return openBlock(), createElementBlock("img", {
+                    key: index,
+                    class: normalizeClass([
+                      "h-10 w-10 object-cover cursor-pointer opacity-50 hover:opacity-100 transition-opacity",
+                      { "!opacity-100": currentGalleryImage.value == index }
+                    ]),
+                    onerror: onErrorLoadImage,
+                    src: getGalleryImageSrc(src),
+                    style: normalizeStyle(slotProps.style),
+                    onClick: withModifiers(($event) => handleThumbnailClick(index), ["stop"]),
+                    alt: "",
+                    "data-wv-section": "thumbnail-image"
+                  }, null, 14, _hoisted_4);
+                }), 128)),
+                createVNode(_sfc_main$1, {
+                  class: normalizeClass([
                     "text-surface-0 sticky !w-8 !h-8 [&_i]:w-5 [&_i]:h-5",
                     "rounded-full ml-3"
                   ]),
-                  onClick: N,
+                  onClick: nextImage,
                   "aria-label": "Next Image",
                   "data-wv-section": "next-button",
                   icon: "arrow-right",
@@ -152,13 +211,7 @@ const Y = ["src"], Z = ["src"], ee = ["src"], te = ["src", "onClick"], ne = /* @
                   text: ""
                 })
               ])
-            ], 64)) : (n(), m("img", {
-              key: 0,
-              onerror: d,
-              src: V.value,
-              style: k(a.style),
-              alt: ""
-            }, null, 12, Z))
+            ], 64))
           ];
         }),
         _: 1
@@ -167,5 +220,5 @@ const Y = ["src"], Z = ["src"], ee = ["src"], te = ["src", "onClick"], ne = /* @
   }
 });
 export {
-  ne as _
+  _sfc_main as _
 };