vue-next-yui 1.0.6 → 1.0.7

package/dist/index.css

@@ -0,0 +1 @@
+@charset "UTF-8";.yu-watermark-wrapper[data-v-11d0b7dd]{background-repeat:repeat}.yu-watermark-wrapper .yu-watermark[data-v-11d0b7dd]{mix-blend-mode:multiply}.yu-img-viewer-wrapper[data-v-fd184b03]{position:fixed;inset:0;z-index:998;background-color:#0006;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;will-change:transform,opacity}.yu-img-viewer-wrapper .yu-img-viewer[data-v-fd184b03]{position:fixed;bottom:40px;left:50%;z-index:1;transform:translate(-50%);font-size:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;gap:10px;background-color:#00000080;padding:10px 15px;border-radius:50px}.yu-img-viewer-wrapper .yu-img-viewer .icon[data-v-fd184b03]{width:24px;height:24px;padding:5px;box-sizing:content-box;max-width:none}.yu-img-viewer-enter-active[data-v-fd184b03],.yu-img-viewer-leave-active[data-v-fd184b03]{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s linear}.yu-img-viewer-enter-from[data-v-fd184b03],.yu-img-viewer-leave-to[data-v-fd184b03]{transform:translateY(-10px);opacity:0}@media screen and (min-width:768px){.yu-img-viewer-wrapper .yu-img-viewer .icon[data-v-fd184b03]{cursor:pointer}}@media screen and (max-width:768px){.yu-img-viewer-wrapper .yu-img-viewer[data-v-fd184b03]{bottom:20px;left:15px;right:15px;z-index:1;transform:translate(0);justify-content:space-between;padding:10px 15px;border-radius:10px}.yu-img-viewer-wrapper .yu-img-viewer .icon[data-v-fd184b03]{padding:6px}}.yu-page-mask[data-v-2eb2644e]{position:fixed;inset:0;width:100%;height:100%;background-color:transparent;transition:all .3s ease-out;z-index:999;opacity:1}.yu-mask-fade-enter-from[data-v-2eb2644e],.yu-mask-fade-leave-to[data-v-2eb2644e]{opacity:0}.yu-mask-fade-enter-active[data-v-2eb2644e],.yu-mask-fade-leave-active[data-v-2eb2644e]{transition:opacity .3s ease}.yu-loading-wrapper[data-v-1a0ab7d2]{position:absolute;inset:0;width:100%;height:100%;z-index:998;background:#fffc;opacity:1;will-change:opacity;display:flex;align-items:center;justify-content:center}.yu-loading-wrapper.yu-loading-fullscreen[data-v-1a0ab7d2]{position:fixed}.yu-loading-wrapper .yu-loading[data-v-1a0ab7d2]{display:flex;flex-direction:column;align-items:center;gap:15px}.yu-loading-wrapper .yu-loading .loading-icon[data-v-1a0ab7d2]{width:36px;aspect-ratio:1;--_bg: no-repeat radial-gradient(farthest-side, var(--yu-loading-color,#333) 92%, #0000);background:var(--_bg) top,var(--_bg) left,var(--_bg) right,var(--_bg) bottom;background-size:8px 8px;animation:loadingPointRotate-1a0ab7d2 .75s infinite}.yu-loading-wrapper .yu-loading .loading-text[data-v-1a0ab7d2]{font-size:inherit;line-height:1.5;color:var(--yu-loading-color, #333)}.yu-loading-enter-active[data-v-1a0ab7d2],.yu-loading-leave-active[data-v-1a0ab7d2]{transition:opacity .2s ease}.yu-loading-enter-from[data-v-1a0ab7d2],.yu-loading-leave-to[data-v-1a0ab7d2]{opacity:0}@keyframes loadingPointRotate-1a0ab7d2{to{transform:rotate(.5turn)}}.dark .yu-loading-wrapper[data-v-1a0ab7d2]{background:#000c}

package/dist/index.js

@@ -0,0 +1,514 @@
+import { ref as w, onMounted as q, watch as U, createElementBlock as k, openBlock as h, createElementVNode as p, renderSlot as $, mergeModels as B, useModel as J, createBlock as I, Transition as F, withCtx as N, createCommentVNode as O, normalizeStyle as W, computed as _, createApp as K, normalizeClass as ee, withDirectives as te, toDisplayString as ne, vShow as oe } from "vue";
+function G() {
+  return {
+    createWatermark: (t, n, o, a, r, s, i, u, d) => new Promise((c, m) => {
+      try {
+        const f = document.createElement("canvas");
+        f.width = t, f.height = n;
+        const g = f.getContext("2d");
+        g.translate(t / 2, n / 2), g.rotate(-i * Math.PI / 180), g.globalAlpha = o >= 0 && o <= 1 ? o : 0.2;
+        let y = 0;
+        if (a) {
+          g.font = `${r}px Arial`, g.fillStyle = s, g.textBaseline = "middle", g.textAlign = "center";
+          const v = u ? (d + 10) / 2 : 0;
+          y = g.measureText(a).width, g.fillText(a, v, 0, t);
+        }
+        if (u) {
+          const v = new Image();
+          v.src = u, v.setAttribute("crossOrigin", "Anonymous"), v.onload = function() {
+            const b = v.width, E = v.height * d / b, M = -(d + y + 10) / 2;
+            g.drawImage(v, M, -E / 2, d, E), c(f.toDataURL("image/png"));
+          };
+        } else
+          c(f.toDataURL("image/png"));
+      } catch (f) {
+        m(f);
+      }
+    })
+  };
+}
+const R = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [o, a] of t)
+    n[o] = a;
+  return n;
+}, ae = { class: "yu-watermark" }, se = {
+  __name: "index",
+  props: {
+    width: {
+      type: Number,
+      default: function() {
+        return 240;
+      }
+    },
+    height: {
+      type: Number,
+      default: function() {
+        return 240;
+      }
+    },
+    opacity: {
+      type: Number,
+      default: function() {
+        return 0.2;
+      }
+    },
+    angle: {
+      type: Number,
+      default: function() {
+        return 30;
+      }
+    },
+    content: {
+      type: String,
+      default: function() {
+        return "";
+      }
+    },
+    fontSize: {
+      type: Number,
+      default: function() {
+        return 20;
+      }
+    },
+    fontColor: {
+      type: String,
+      default: function() {
+        return "#999";
+      }
+    },
+    img: {
+      type: String,
+      default: function() {
+        return "";
+      }
+    },
+    imgWidth: {
+      type: Number,
+      default: function() {
+        return 50;
+      }
+    }
+  },
+  setup(e) {
+    const t = e, n = w(), { createWatermark: o } = G();
+    q(() => {
+      a();
+    });
+    const a = () => {
+      o(t.width, t.height, t.opacity, t.content, t.fontSize, t.fontColor, t.angle, t.img, t.imgWidth).then((r) => {
+        n.value.style.backgroundImage = `url(${r})`, n.value.style.backgroundPosition = "center top", n.value.style.backgroundRepeat = "repeat";
+      }).catch((r) => {
+        console.error(r);
+      });
+    };
+    return U([() => t.content, () => t.img], (r) => {
+      a();
+    }), (r, s) => (h(), k("div", {
+      class: "yu-watermark-wrapper",
+      ref_key: "watermarkRef",
+      ref: n
+    }, [
+      p("div", ae, [
+        $(r.$slots, "default", {}, void 0, !0)
+      ])
+    ], 512));
+  }
+}, le = /* @__PURE__ */ R(se, [["__scopeId", "data-v-11d0b7dd"]]), re = ["src"], V = 0.95, ie = {
+  __name: "index",
+  props: /* @__PURE__ */ B({
+    src: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    maskClose: {
+      type: Boolean,
+      default() {
+        return !0;
+      }
+    }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ B(["close"], ["update:modelValue"]),
+  setup(e, { expose: t, emit: n }) {
+    const o = J(e, "modelValue"), a = e, r = n, s = w(1), i = w(1), u = w(0), d = w(0), c = w(0), m = w(!0), f = () => {
+      a.maskClose && x();
+    }, g = (l) => {
+      d.value = l.target.naturalWidth, c.value = l.target.naturalHeight, y();
+    }, y = () => {
+      const l = window.innerWidth, A = window.innerHeight, C = A / l, X = c.value / d.value;
+      let S = 1;
+      X > C ? S = A * V / c.value : S = l * V / d.value;
+      const Z = Math.round(S * 10) / 10;
+      s.value = Math.max(Z, 1), m.value || (i.value = s.value);
+    }, v = (l) => {
+      l.preventDefault(), l.wheelDelta > 0 ? T() : b();
+    }, b = (l = 0.1) => {
+      const A = i.value - l;
+      i.value = Math.max(A, 0.1);
+    }, T = (l = 0.1) => {
+      const A = i.value + l;
+      i.value = Math.min(A, 2);
+    }, E = () => {
+      m.value = !m.value, i.value = m.value ? 1 : s.value;
+    }, M = (l) => {
+      u.value += l;
+    }, L = () => {
+      o.value = !0;
+    }, D = () => {
+      o.value = !1, P();
+    }, x = () => {
+      D(), r("close");
+    }, P = () => {
+      s.value = 1, i.value = 1, u.value = 0, d.value = 0, c.value = 0;
+    }, j = (l) => {
+      l.stopPropagation();
+    }, z = () => {
+      o.value && !m.value && y();
+    }, H = (l) => {
+      l.key === "Escape" && x();
+    };
+    return U(o, (l) => {
+      l ? (document.body.style.overflow = "hidden", window.addEventListener("keydown", H), window.addEventListener("resize", z)) : (document.body.style.overflow = "", window.removeEventListener("keydown", H), window.removeEventListener("resize", z));
+    }, { immediate: !0 }), t({
+      show: L,
+      hide: D
+    }), (l, A) => (h(), I(F, {
+      name: "yu-img-viewer",
+      appear: ""
+    }, {
+      default: N(() => [
+        o.value ? (h(), k("div", {
+          key: 0,
+          class: "yu-img-viewer-wrapper",
+          onClick: f,
+          onWheel: v
+        }, [
+          p("img", {
+            src: e.src,
+            class: "img-show",
+            onClick: j,
+            onLoad: g,
+            style: W(`max-width:${V * 100}%;max-height:${V * 100}%;transform: scale(${i.value}) rotate(${u.value}deg);transition: all 0.3s ease;`),
+            alt: ""
+          }, null, 44, re),
+          p("div", {
+            class: "yu-img-viewer",
+            onClick: j
+          }, [
+            p("img", {
+              onClick: A[0] || (A[0] = (C) => b()),
+              title: "缩小",
+              class: "icon",
+              alt: "",
+              src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAmVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VHQRUAAAAMnRSTlMA9+7gJPncJwX06aV0ShHkmo4+GrFIRbdvU3tsamZhNDDPxbaflU7WvzIgHg2tgzmHWNLgL/wAAAJTSURBVFjD7Zdrd7IwDMfDTRAE8QJDuaiIt6nb8/T7f7gR2TkeWEtT5975e5mUP23StCm8eMHHzsOjMWRsaJRhZj+qctqNWYvx7hPU+b9hHA65oyazPzABxh7oBFfWoM9HsR04TmDHo7n+bdyeqTrTJjaaF7Xtkac18j5NJ7FuMpPZT9ds0kgtKTr/GPJm8r3mG0N2cp2P23RSEJJqJKUMR7kr6GHlElY3xfgMTOjFHKDSvjfvmK/xO0h4x2F63y7wMD4nkLLWMB9if8xqMkAooVwI3Yfbf0hssVpEdbfAhZk0IRMXVwicWO8TIDLB9AoiiBOaUYVmOKWp8B8ekMEMh1yPUXsiulCEJcANH24yUADPpzXHntf2uYrQvP4g4djD2j5SERrVH1Qc+7G2+ypCfv1BybFjSdsqQjZubkHsLq0jxWAdjNa+CQTZwZEtQ1enOwGnNlh/KTTsLi3+oTQgLc1QDragbMtH0n/k2CvlDSmo2uSREkn5x5F60XIvCvdJxwiE6gdbxb9lFY9acZYHTzr8oVC7jsS7xTGwsaNfkO4Fem5IllN0chyZiP3Yjg3XhCYCK3zjgJCzTm9rrFVvf83IjVYiaSGprd8GJISyZjTTGK1F3snbY6LSkskadoRyevl6I+XFbXvsfctcoyGTxhs5b++PGr951Pj3R41eAEwbpRRkLAZMgFXhklGJVgZOceDJaJUNDXGjVICcz9DtTOaYBXd3pBGVkFMalvg41selt4wvnZxYN/UF/Jq9JdniZBao5MKTlK7wDFYfSQAvXgB8AbQmiYamqSF8AAAAAElFTkSuQmCC"
+            }),
+            p("img", {
+              onClick: A[1] || (A[1] = (C) => T()),
+              title: "放大",
+              class: "icon",
+              alt: "",
+              src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA+ODk70Uk9belj3QnBdxKRzHonfyYVDUfGhFv7LF8bGpmYT3PxK9O1r4NhhWkhma1AAACU0lEQVRYw+2X2ZqaQBCFD4swCAgD4oYr7mbq/V8vFoxfPkw3VE/Mnf9lqae71i7x5o2aaFdcbZ/It4/5NsIP+Rw61MIppjBnciAFl10MI84X0mCfIefrRA3uKhxEizheRINw5VLDagYhe4cYK0jRIg0sYpYJRJTjWmY4x1/Mh43UGgJ+EfPhQYn3QcxQqGNtoGVTX6pAD1u6k3XWyzQTeLfn+Iw8dOKNWOncmXfOl9Ob3pnDuev6WsDx+RR0j8X5gJYB3dmCkYRyAh2X+hwRXAV2rOtTdsyDCI+dq6DmUFeakCGnVxNBvtBcETnHGSi6ha+0154RKOw2ka3JcA6of0Cpwk53FOaUW0AZPp4/kAuB55Oq5nY8s0yEVkRUKuwFEYUmQqEmSFciSkyEEiI6Kuzc0pGJUMTFrYndrV0/9ES7nhY8AiQH29Tm+QIxF/D/FPL7XbPTZ9dcVWEbB1vTtsefpP+qsOfGBal5lUrTFuEFYaMaR69qWmTmY2QJFfmrBtteO2rtVDNqEygZvWj4ozJ9jkKoiW2zBzK7oeOFpB0E7OhO2X2OL1kiuMMPMbTMlvK1ZjxFB2cSL1plzwopXf0O6KHoW0a3FslW5EKyHjMhelgT46sXdp9IrpQsv/9CDJ6aLvj2KkhdYsre9D7u757CpPlTk4Qn92GsgL1PzAZ9TEakYZx/AbWSrA3i6kIK/Dx6+NkoVehnWmTUwrpuF38+Tq36ghUkfG7yo+3T2HWOwXpwe8pJozTBP3O2ekpczISVMrxCaUx0wiuYrssF3rwBfgPQ0YapPYGLOQAAAABJRU5ErkJggg=="
+            }),
+            m.value ? (h(), k("img", {
+              key: 0,
+              onClick: E,
+              title: "适应窗口",
+              class: "icon",
+              alt: "",
+              src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAADnRSTlMA7+b59OdySknVttYPDGmoZHwAAACySURBVEjHYxgFQx5k2r0DgkcNEB6HHoj3eBqqGq53EKAA4TJBuQtQFOVBRQNQFT1DUTTvnaEgEDgVQLjsISCe8LvXKIrsHl/AdCev3WMU/ruH2Hwj925UETmKnmBT5IeqSO8plIFPtFQdykAXHQWjABU0aRAhqvcIysAQJZx8h0C+G6qK7B4fwFTDY/cYa2EPq1tUEIU9ZrWhgK/a4MJetyzAWpXB6pY4cFW2jWEUDHUAANSUoGLnF/1TAAAAAElFTkSuQmCC"
+            })) : (h(), k("img", {
+              key: 1,
+              onClick: E,
+              title: "实际尺寸",
+              class: "icon",
+              alt: "",
+              src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAJ1BMVEUAAAD///////////////////////////////////////////////+uPUo5AAAADHRSTlMA7vD5hXLVtg3W1HNKpeIJAAAAkUlEQVRIx2MYBaMABqJszmABh1OR1bCfwQEKkBTF4FJ0FElRzhlDQSxA+MxJJEU2hxuwuZTD5jAS78wh7P7ROTOqCIsiZxMgAWXhVAQOYCgLp6IzIDEoC78iZxNCimA2EVZEHetAYPApGorhhJZUCCe6wZIRhp4iAsUh4YKVcBF9mtTCniEMe7UxlWEUjAIoAACLZA9Ayw+XDwAAAABJRU5ErkJggg=="
+            })),
+            p("img", {
+              onClick: A[2] || (A[2] = (C) => M(-90)),
+              title: "向左旋转90°",
+              class: "icon",
+              alt: "",
+              src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAn1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8Kd3m4AAAANHRSTlMA+u1wMJv0EAzjysVFGwb81aJVCdu4aFrSzqiNijsV96+fkWFALSgj59dNNRizfFFJhe++/7y+OwAAAjhJREFUWMPt19dy4jAUBuBfLjHggsEB06vpJeyu3v/Z1kdyJmSwZMFwkZnwXWUic+RzJKvg5eU3mrRHndhifFr3XdvBgzzbb/JrljvG/TbulN+K03vfZsh4uTjDHfZ1LjQbo7YzieBtAntmcalVg6khF97tENcuAyb/ry97rfb5R4eTXbukcHNR/rdAl82ULWV5GvTs9ByhzKFPrawNpXfOt8glDf3bRwsRaQ+Vv3kz/XpGz/3zoNZtUnYrKJzyVhs4U5xOAp02Rdqpxs6mAHBoXBoJ9LrUm6todOh9RYG2R7P5ofpeaL4N6IEAlSLqsK9opCCkBQMOlelDnTilF1KPwXCmfzGXaolSaxlogXA5e6OpEkIjZGK6lKrLzPq8MIbOXHRaqsW/8aGV5Y/UUWrJv/SG+hIVCazL0+bStpVWzySZQBelZvmYdewVzCzVszv6yCIYO+jraK5Gqw2egeWVwDPQx/msQOxZqVk/qtiPD79+Qj5urv5EkPYGHgzJj1a9WI1gaCyWEfUaaSUw46oWNtITaRs50jHsoNv46onxyacBlWSbN59hYMWK7UizbzMH1XzNBkkiqlJcPQX+VO4yY9pBT6iQUhzXoK8BtC5MHmv0xAHypHsqZfKgVcHrUaT+BiojamcZKk1icZawFePuF4dRA54vN9s9boQLJnq5wEgy50JsT3AtaCkO7GqpdXuFGCiuEHoTl/FyuwD3Wc+Z/pplLrT736NYboYHHYurqCWvoi8vv85/WZV1EethCRYAAAAASUVORK5CYII="
+            }),
+            p("img", {
+              onClick: A[3] || (A[3] = (C) => M(90)),
+              title: "向右旋转90°",
+              class: "icon",
+              alt: "",
+              src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAn1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8Kd3m4AAAANHRSTlMA+uLt1gYw/JxwDvbzysWhR7ORi2hVCtHPuamGWk9ANSIRCGFCLSgdGBXo2jquo5l1Gn1bVjAitwAAAkhJREFUWMPtl9ly6jAMhu1sZCMrgRASlrCGFgqt3//ZTmUfhsMc23HaXHSmfDeZiTW/LVmWZfTkye/DcuxA84iv5XGaNV9VeX3Tyb8MAmeFulMa5H88e9lRZmMQPjh1kTpuSBj6yYmWK+QuF1k6HBCKNlcP8QubvIgefu/fNRarmammE/nUPOSEI2MeT2/ujccSnQyDbb7gDpoXD0aHbPvW2KuEOhXVSUy530O6lCMhLyK7rQdujZCY1RSUYtCE7RBYjQ3QyZCMmiq9I3ShgnxssBkhOeMh7KmF4s+PwzeZ0/igNg5HCFMNu2vxLXIwMBUyBCYsxCGqIEAWUuCW+gV/GHx/ky/llG5gxVfYXGE4FxDDvTQ4kGT+ab1HCRPacc1gMJSXKPKX/MwOMN8MzqT8aJsBeeDMtdqxKeRE6YTcWXNtRtSzdg4f4ZEw+AG16RRqbJ2pJzwf4P8CKWPOK1Mcaxf1gE8IRn0AR+dnCfXgWs/BZtvfAywhewCOiN2HEDu0qrjFpJRF+1VVKCUEXwVjSQffap3VR2Gp9Q7qAZ0gQFT8E7UFadKLtILqv1URmn1aHmvxOJTRQKUV8+63tfjKnrVvPbQahtmW3eSjrTbGcCNLE4W1NTiSCxUq6976oFTK5oppG9neYWM6nzAAyxzGJwr1hjWjgSALHB9GjUa9PcbJnpNo7JoNVt0a9vPm4XfjGIQS1t2fEAV9QpiNlc1uTwi97OVRM7CbPp5ZONyh7szZw+9Ofrl+6ymqE6wb07Q8oCdPfiF/ANQydloYw+eCAAAAAElFTkSuQmCC"
+            }),
+            p("img", {
+              onClick: x,
+              title: "关闭",
+              class: "icon",
+              alt: "",
+              src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAbFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8+T+BWAAAAI3RSTlMAsoyKtI+5mK+spJ/RvKecjnMGyb+pkw3AtoN6V0cb6js4LTOnxLwAAAFGSURBVFjD7dbLbsIwEIXhScCEBsilBcq1t3n/d6zTNjpIjjzOzKqS/w0L0KfRAQSUy+VyQ2vmmhK6MG9fI8/f2VfITsm+PvKCD06SHEsQNTy0TriHt88UaylLC2bGRIL0JN3jHakiLjk4adKBJut46AX7yFIzuU+6g50ao4Ob6mBnOGoJO5/SFUib8J79HAU7tQ/74B6NVKnvQcUoYZ8dkV464nO40iiQnN/H4mCnvodjuGnsTMgiLclYxXjzTF1/oavV6fiv0uYcMbazO23789DpDHwvivHztLDd4x2jVMEhOusXr/BTiZuc1cFNagetNDu1oxNK5VwHP9uQ5u60gTMldVYHO6kdtEuX6tAJpTLVORASFpcd9U3Yp6Foe3mnG+6JdeKhe+wPPe4RbhJOent/+Csj7fRFMam/UVKX+pNyudx/7hvtEkCDo9yvRAAAAABJRU5ErkJggg=="
+            })
+          ])
+        ], 32)) : O("", !0)
+      ]),
+      _: 1
+    }));
+  }
+}, Q = /* @__PURE__ */ R(ie, [["__scopeId", "data-v-fd184b03"]]), ce = {
+  __name: "index",
+  props: /* @__PURE__ */ B({
+    color: {
+      type: String,
+      default: function() {
+        return "rgba(0, 0, 0, 0.5)";
+      }
+    },
+    zIndex: {
+      type: Number,
+      default: function() {
+        return 999;
+      }
+    },
+    closable: {
+      type: Boolean,
+      default: function() {
+        return !0;
+      }
+    },
+    lockScroll: {
+      type: Boolean,
+      default() {
+        return !1;
+      }
+    }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ B(["close"], ["update:modelValue"]),
+  setup(e, { expose: t, emit: n }) {
+    const o = J(e, "modelValue"), a = e, r = n, s = _(() => ({
+      backgroundColor: a.color,
+      zIndex: a.zIndex
+    }));
+    U(o, (c) => {
+      a.lockScroll && (document.body.style.overflow = c ? "hidden" : "");
+    });
+    const i = () => {
+      o.value = !0;
+    }, u = () => {
+      o.value = !1;
+    }, d = () => {
+      a.closable && (u(), r("close"));
+    };
+    return t({
+      show: i,
+      hide: u
+    }), (c, m) => (h(), I(F, {
+      name: "yu-mask-fade",
+      appear: ""
+    }, {
+      default: N(() => [
+        o.value ? (h(), k("div", {
+          key: 0,
+          class: "yu-page-mask",
+          style: W(s.value),
+          onClick: d
+        }, null, 4)) : O("", !0)
+      ]),
+      _: 1
+    }));
+  }
+}, Y = /* @__PURE__ */ R(ce, [["__scopeId", "data-v-2eb2644e"]]), Ae = {
+  Watermark: le,
+  ImgViewer: Q,
+  Mask: Y
+}, ue = {
+  beforeMount(e, t) {
+    e.clickOutsideEvent = (n) => {
+      e === n.target || e.contains(n.target) || t.value(n);
+    }, document.addEventListener("click", e.clickOutsideEvent);
+  },
+  unmounted(e) {
+    document.removeEventListener("click", e.clickOutsideEvent);
+  }
+}, { createWatermark: de } = G(), me = {
+  mounted(e, t) {
+    const {
+      width: n = 240,
+      height: o = 240,
+      opacity: a = 0.2,
+      content: r = "",
+      angle: s = 30,
+      fontSize: i = 20,
+      fontColor: u = "#999",
+      img: d = "",
+      imgWidth: c = 50
+    } = t.value;
+    de(n, o, a, r, i, u, s, d, c).then((m) => {
+      e.style.backgroundImage = `url(${m})`, e.style.backgroundPosition = "center top", e.style.backgroundRepeat = "repeat";
+    }).catch((m) => {
+      console.error(m);
+    });
+  }
+}, ge = {
+  mounted(e) {
+    e.clickShowImage = (t) => {
+      try {
+        if (t.target.tagName !== "IMG" || !t.target.src) return;
+        if (e.instance) {
+          e.instance.show();
+          return;
+        }
+        const n = K(Q, { src: t.target.src }), o = document.createElement("div"), a = n.mount(o);
+        e.instance = a, e.app = n, document.body.appendChild(a.$el), a.show();
+      } catch (n) {
+        console.error("Image viewer error:", n);
+      }
+    }, e.addEventListener("click", e.clickShowImage, { passive: !0 });
+  },
+  beforeUnmount(e) {
+    try {
+      if (e.removeEventListener("click", e.clickShowImage, { passive: !0 }), !e.instance) return;
+      e.instance.hide(), setTimeout(() => {
+        e.app.unmount(), e.instance.$el.remove(), e.instance = null;
+      }, 200);
+    } catch (t) {
+      console.log("Image viewer error:", t);
+    }
+  }
+}, pe = { class: "yu-loading" }, ve = ["textContent"], fe = {
+  __name: "index",
+  props: {
+    text: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    bgColor: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    color: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    fullscreen: {
+      type: Boolean,
+      default() {
+        return !1;
+      }
+    },
+    zIndex: {
+      type: Number,
+      default() {
+        return 998;
+      }
+    }
+  },
+  setup(e, { expose: t }) {
+    const n = w(!1);
+    return t({
+      show: () => {
+        n.value = !0;
+      },
+      hide: () => {
+        n.value = !1;
+      }
+    }), (r, s) => (h(), I(F, {
+      name: "yu-loading",
+      appear: ""
+    }, {
+      default: N(() => [
+        n.value ? (h(), k("div", {
+          key: 0,
+          class: ee(["yu-loading-wrapper", { "yu-loading-fullscreen": e.fullscreen }]),
+          style: W({ "--yu-loading-color": e.color || "var(--qui-color-primary, #3565ee)", background: e.bgColor, zIndex: e.zIndex })
+        }, [
+          p("div", pe, [
+            s[0] || (s[0] = p("div", { class: "loading-icon" }, null, -1)),
+            te(p("div", {
+              class: "loading-text",
+              textContent: ne(e.text)
+            }, null, 8, ve), [
+              [oe, e.text]
+            ])
+          ])
+        ], 6)) : O("", !0)
+      ]),
+      _: 1
+    }));
+  }
+}, he = /* @__PURE__ */ R(fe, [["__scopeId", "data-v-1a0ab7d2"]]), we = {
+  mounted(e, t) {
+    e.style.position = "relative";
+    const n = parseInt(e.getAttribute("loading-z-index")), o = {
+      text: e.getAttribute("loading-text") || "",
+      color: e.getAttribute("loading-color") || "",
+      zIndex: n || 998
+    }, a = K(he, o), r = document.createElement("div"), s = a.mount(r);
+    e.instance = s, e.appendChild(s.$el), t.value ? s.show() : s.hide();
+  },
+  updated(e, t) {
+    console.log("updated"), t.value !== t.oldValue && (t.value ? e.instance.show() : e.instance.hide());
+  },
+  beforeUnmount(e) {
+    console.log("beforeUnmount"), e.instance.hide(), setTimeout(() => {
+      e.instance.$el.remove(), e.instance = null;
+    }, 200);
+  }
+}, ke = (e, t) => {
+  const {
+    visible: n = !1,
+    color: o = "rgba(0,0,0,0.5)",
+    zIndex: a = 999,
+    closable: r = !0,
+    lockScroll: s = !1,
+    onClose: i = null
+  } = t.value, u = document.createElement("div"), c = K(Y, {
+    modelValue: n,
+    closable: r,
+    color: o,
+    zIndex: a,
+    lockScroll: s,
+    onClose: () => {
+      i && typeof i == "function" && i();
+    }
+  }).mount(u);
+  document.body.appendChild(c.$el), e.cleanup = () => {
+    document.body.removeChild(c.$el);
+  };
+}, ye = {
+  updated(e, t) {
+    const { value: n } = t;
+    n.visible ? ke(e, t) : e.cleanup();
+  },
+  beforeUnmount(e) {
+    e.cleanup && e.cleanup();
+  }
+}, Ee = {
+  vOutside: ue,
+  vWatermark: me,
+  vViewer: ge,
+  vLoading: we,
+  vMask: ye
+}, Ce = (e) => {
+  Object.entries(Ee).forEach(([t, n]) => {
+    const o = t.replace(/^v/, "").replace(/([A-Z])/g, "-$1").toLowerCase();
+    e.directive(o, n);
+  }), Object.entries(Ae).forEach(([t, n]) => {
+    e.component(t, n);
+  }), e.prototype.$toast = Toast, e.prototype.$loading = Loading, e.prototype.$message = Message;
+}, Me = {
+  install: Ce
+};
+export {
+  Me as default
+};

package/package.json

@@ -1,40 +1,41 @@
-{
-	"name": "vue-next-yui",
-	"private": false,
-	"version": "1.0.6",
-	"type": "module",
-	"files": [
-		"dist/"
-	],
-	"main": "./dist/index.umd.cjs",
-	"module": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"require": "./dist/index.umd.cjs",
-			"import": "./dist/index.js"
+{
+	"name": "vue-next-yui",
+	"private": false,
+	"version": "1.0.7",
+	"type": "module",
+	"files": [
+		"dist/"
+	],
+	"main": "./dist/index.umd.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"require": "./dist/index.umd.cjs",
+			"import": "./dist/index.js"
+		},
+		"./directives": {
+			"types": "./dist/directives/index.d.ts",
+			"require": "./dist/directives/index.umd.cjs",
+			"import": "./dist/directives/index.js"
 		},
-		"./directives": {
-			"types": "./dist/directives/index.d.ts",
-			"require": "./dist/directives/index.umd.cjs",
-			"import": "./dist/directives/index.js"
-		}
-	},
-	"scripts": {
-		"dev": "vite",
-		"build": "node scripts/index.js",
-		"preview": "vite preview",
-		"publish": "call ./scripts/publish.cmd"
-	},
-	"dependencies": {
-		"vue": "^3.5.13",
-		"vue-next-yui": "^1.0.5"
-	},
-	"devDependencies": {
-		"@vitejs/plugin-vue": "^6.0.3",
-		"sass": "^1.97.0",
-		"vite": "7.3.0",
-		"vite-plugin-dts": "^4.5.4"
-	}
-}
+		"./style.css": "./dist/index.css"
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "node scripts/index.js",
+		"preview": "vite preview",
+		"publish": "call ./scripts/publish.cmd"
+	},
+	"dependencies": {
+		"vue": "^3.5.13",
+		"vue-next-yui": "^1.0.6"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^6.0.3",
+		"sass": "^1.97.0",
+		"vite": "7.3.0",
+		"vite-plugin-dts": "^4.5.4"
+	}
+}