vft 0.0.506 → 0.0.509

package/es/components/image/image.vue2.js

@@ -1,20 +1,21 @@
-import { defineComponent as T, useAttrs as W, ref as o, computed as d, watch as G, onMounted as J, createElementBlock as f, openBlock as s, normalizeStyle as Q, normalizeClass as y, unref as l, createCommentVNode as u, mergeProps as U, renderSlot as k, createElementVNode as A, Fragment as X, createBlock as Z, withCtx as _, nextTick as ee } from "vue";
-import { useAttrs as te } from "@vft/use";
-import { isInContainer as le, isElement as ne, isString as ae, getScrollContainer as ie } from "@vft/utils";
-import { VftImageViewer as re } from "../image-viewer/index.js";
-import { isClient as v, useThrottleFn as oe, useEventListener as V } from "@vueuse/core";
+import { defineComponent as T, useAttrs as G, ref as o, computed as d, watch as J, onMounted as Q, createElementBlock as f, openBlock as s, normalizeStyle as U, normalizeClass as y, unref as l, createCommentVNode as u, mergeProps as X, renderSlot as k, createElementVNode as V, toDisplayString as Z, Fragment as _, createBlock as ee, withCtx as te, nextTick as le } from "vue";
+import { useAttrs as ae } from "@vft/use";
+import { isInContainer as ie, isElement as ne, isString as re, getScrollContainer as oe } from "@vft/utils";
+import { VftImageViewer as se } from "../image-viewer/index.js";
+import { isClient as v, useThrottleFn as ue, useEventListener as A } from "@vueuse/core";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
 import "../form/index.js";
-import { useNamespace as se } from "../../hooks/use-namespace/index.js";
+import { useNamespace as ce } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-const ue = ["src", "loading"], ce = { key: 0 }, de = T({
+import { useLocale as de } from "../../locale/use-locale.js";
+const fe = ["src", "loading"], ve = { key: 0 }, me = T({
   name: "vft-image",
   inheritAttrs: !1
-}), Ie = /* @__PURE__ */ T({
-  ...de,
+}), Ve = /* @__PURE__ */ T({
+  ...me,
   props: {
     hideOnClickModal: { type: Boolean, default: !1 },
     src: { default: "" },
@@ -31,37 +32,37 @@ const ue = ["src", "loading"], ce = { key: 0 }, de = T({
   },
   emits: ["load", "error", "switch", "close", "show"],
   setup(e, { expose: $, emit: b }) {
-    const c = b, i = se("image");
+    const c = b, n = ce("image"), { t: M } = de();
     let C = "";
-    const M = W(), O = te(), w = o(), r = o(!1), n = o(!0), h = o(!1), m = o(), a = o(), H = v && "loading" in HTMLImageElement.prototype;
-    let z, p;
-    const F = d(() => M.style), N = d(() => v && e.fit ? { objectFit: e.fit } : {}), g = d(() => Array.isArray(e.previewSrcList) && e.previewSrcList.length > 0), P = d(() => {
+    const O = G(), F = ae(), w = o(), r = o(!1), a = o(!0), h = o(!1), m = o(), i = o(), H = v && "loading" in HTMLImageElement.prototype;
+    let p, z;
+    const D = d(() => O.style), N = d(() => v && e.fit ? { objectFit: e.fit } : {}), g = d(() => Array.isArray(e.previewSrcList) && e.previewSrcList.length > 0), P = d(() => {
       let t = e.initialIndex;
       return e.initialIndex > e.previewSrcList.length - 1 && (t = 0), t;
     }), S = d(() => e.loading === "eager" ? !1 : !H && e.loading === "lazy" || e.lazy), L = () => {
-      v && (n.value = !0, r.value = !1, w.value = e.src);
+      v && (a.value = !0, r.value = !1, w.value = e.src);
     };
-    function D(t) {
-      n.value = !1, r.value = !1, c("load", t);
-    }
     function Y(t) {
-      n.value = !1, r.value = !0, c("error", t);
+      a.value = !1, r.value = !1, c("load", t);
+    }
+    function j(t) {
+      a.value = !1, r.value = !0, c("error", t);
     }
     function I() {
-      le(m.value, a.value) && (L(), B());
+      ie(m.value, i.value) && (L(), B());
     }
-    const x = oe(I, 200);
+    const x = ue(I, 200);
     async function E() {
-      v && (await ee(), ne(e.scrollContainer) ? a.value = e.scrollContainer : ae(e.scrollContainer) && e.scrollContainer !== "" ? a.value = document.querySelector(e.scrollContainer) ?? void 0 : m.value && (a.value = ie(m.value)), a.value && (z = V(
-        a,
+      v && (await le(), ne(e.scrollContainer) ? i.value = e.scrollContainer : re(e.scrollContainer) && e.scrollContainer !== "" ? i.value = document.querySelector(e.scrollContainer) ?? void 0 : m.value && (i.value = oe(m.value)), i.value && (p = A(
+        i,
         "scroll",
         x
       ), setTimeout(() => I(), 100)));
     }
     function B() {
-      !v || !a.value || !x || (z?.(), a.value = void 0);
+      !v || !i.value || !x || (p?.(), i.value = void 0);
     }
-    function j(t) {
+    function q(t) {
       if (t.ctrlKey) {
         if (t.deltaY < 0)
           return t.preventDefault(), !1;
@@ -69,62 +70,62 @@ const ue = ["src", "loading"], ce = { key: 0 }, de = T({
           return t.preventDefault(), !1;
       }
     }
-    function q() {
-      g.value && (p = V("wheel", j, {
+    function K() {
+      g.value && (z = A("wheel", q, {
         passive: !1
       }), C = document.body.style.overflow, document.body.style.overflow = "hidden", h.value = !0, c("show"));
     }
-    function K() {
-      p?.(), document.body.style.overflow = C, h.value = !1, c("close");
+    function R() {
+      z?.(), document.body.style.overflow = C, h.value = !1, c("close");
     }
-    function R(t) {
+    function W(t) {
       c("switch", t);
     }
-    return G(
+    return J(
       () => e.src,
       () => {
-        S.value ? (n.value = !0, r.value = !1, B(), E()) : L();
+        S.value ? (a.value = !0, r.value = !1, B(), E()) : L();
       }
-    ), J(() => {
+    ), Q(() => {
       S.value ? E() : L();
     }), $({
-      isLoading: n
-    }), (t, fe) => (s(), f("div", {
+      isLoading: a
+    }), (t, ye) => (s(), f("div", {
       ref_key: "container",
       ref: m,
-      class: y([l(i).b(), t.$attrs.class]),
-      style: Q(F.value)
+      class: y([l(n).b(), t.$attrs.class]),
+      style: U(D.value)
     }, [
-      w.value !== void 0 && !r.value ? (s(), f("img", U({ key: 0 }, l(O), {
+      w.value !== void 0 && !r.value ? (s(), f("img", X({ key: 0 }, l(F), {
         src: w.value,
         loading: e.loading,
         style: N.value,
         class: [
-          l(i).e("inner"),
-          g.value && l(i).e("preview"),
-          n.value && l(i).is("loading")
+          l(n).e("inner"),
+          g.value && l(n).e("preview"),
+          a.value && l(n).is("loading")
         ],
-        onClick: q,
-        onLoad: D,
-        onError: Y,
+        onClick: K,
+        onLoad: Y,
+        onError: j,
         alt: ""
-      }), null, 16, ue)) : u("", !0),
-      n.value || r.value ? (s(), f("div", {
+      }), null, 16, fe)) : u("", !0),
+      a.value || r.value ? (s(), f("div", {
         key: 1,
-        class: y(l(i).e("wrapper"))
+        class: y(l(n).e("wrapper"))
       }, [
-        n.value ? k(t.$slots, "placeholder", { key: 0 }, () => [
-          A("div", {
-            class: y(l(i).e("placeholder"))
+        a.value ? k(t.$slots, "placeholder", { key: 0 }, () => [
+          V("div", {
+            class: y(l(n).e("placeholder"))
           }, null, 2)
         ]) : r.value ? k(t.$slots, "error", { key: 1 }, () => [
-          A("div", {
-            class: y(l(i).e("error"))
-          }, "加载失败", 2)
+          V("div", {
+            class: y(l(n).e("error"))
+          }, Z(l(M)("vft.imageViewer.loadFailed")), 3)
         ]) : u("", !0)
       ], 2)) : u("", !0),
-      g.value ? (s(), f(X, { key: 2 }, [
-        h.value ? (s(), Z(l(re), {
+      g.value ? (s(), f(_, { key: 2 }, [
+        h.value ? (s(), ee(l(se), {
           key: 0,
           "z-index": e.zIndex,
           "initial-index": P.value,
@@ -134,11 +135,11 @@ const ue = ["src", "loading"], ce = { key: 0 }, de = T({
           "hide-on-click-modal": e.hideOnClickModal,
           teleported: e.previewTeleported,
           "close-on-press-escape": e.closeOnPressEscape,
-          onClose: K,
-          onSwitch: R
+          onClose: R,
+          onSwitch: W
         }, {
-          default: _(() => [
-            t.$slots.viewer ? (s(), f("div", ce, [
+          default: te(() => [
+            t.$slots.viewer ? (s(), f("div", ve, [
               k(t.$slots, "viewer")
             ])) : u("", !0)
           ]),
@@ -149,5 +150,5 @@ const ue = ["src", "loading"], ce = { key: 0 }, de = T({
   }
 });
 export {
-  Ie as default
+  Ve as default
 };

package/es/components/image-viewer/image-viewer.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as A, ref as h, effectScope as ne, computed as w, watch as R, nextTick as oe, onMounted as ae, createBlock as ie, openBlock as z, unref as e, withCtx as S, createVNode as d, Transition as se, createElementVNode as c, normalizeStyle as V, normalizeClass as r, createElementBlock as E, createCommentVNode as re, renderSlot as le, withModifiers as ce, Fragment as H, renderList as ue, withDirectives as fe, vShow as de } from "vue";
+import { defineComponent as A, ref as h, effectScope as oe, computed as w, watch as D, nextTick as ae, onMounted as ie, createBlock as se, openBlock as z, unref as e, withCtx as R, createVNode as d, Transition as re, createElementVNode as c, normalizeStyle as S, normalizeClass as r, createElementBlock as E, createCommentVNode as le, renderSlot as ce, withModifiers as ue, Fragment as H, renderList as fe, withDirectives as de, vShow as me } from "vue";
 import { EVENT_CODE as p } from "@vft/constants";
 import { isNumber as Z } from "@vft/utils";
 import { VftIcon as v } from "../icon/index.js";
@@ -6,15 +6,16 @@ import { useEventListener as y } from "@vueuse/core";
 import "../config-provider/hooks/use-global-config.js";
 import { throttle as T } from "lodash-es";
 import "../form/index.js";
-import { useNamespace as me } from "../../hooks/use-namespace/index.js";
+import { useNamespace as ve } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
-import { useZIndex as ve } from "../../hooks/use-z-index/index.js";
-import { VftTeleport as ge } from "../teleport/index.js";
-const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
+import { useZIndex as ge } from "../../hooks/use-z-index/index.js";
+import { useLocale as ke } from "../../locale/use-locale.js";
+import { VftTeleport as be } from "../teleport/index.js";
+const we = ["src", "referrerpolicy", "crossorigin"], pe = A({
   name: "vft-image-viewer"
-}), Ye = /* @__PURE__ */ A({
-  ...be,
+}), Ne = /* @__PURE__ */ A({
+  ...pe,
   props: {
     urlList: { default: () => [] },
     zIndex: {},
@@ -32,13 +33,13 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
     switch: (t) => Z(t)
   },
   setup(t, { expose: P, emit: W }) {
-    const $ = W, i = me("image-viewer"), { nextZIndex: j } = ve(), I = h(), X = h([]), Y = ne(), k = h(!0), m = h(t.initialIndex), s = h({
+    const $ = W, i = ve("image-viewer"), { nextZIndex: j } = ge(), { t: q } = ke(), I = h(), X = h([]), Y = oe(), k = h(!0), m = h(t.initialIndex), s = h({
       scale: 1,
       deg: 0,
       offsetX: 0,
       offsetY: 0,
       enableTransition: !1
-    }), q = w(() => t.urlList.length <= 1), O = w(() => m.value === 0), M = w(() => m.value === t.urlList.length - 1), G = w(() => t.urlList[m.value]), J = w(() => {
+    }), G = w(() => t.urlList.length <= 1), O = w(() => m.value === 0), M = w(() => m.value === t.urlList.length - 1), J = w(() => t.urlList[m.value]), K = w(() => {
       const { scale: o, deg: n, offsetX: a, offsetY: l, enableTransition: x } = s.value;
       let u = a / o, f = l / o;
       switch (n % 360) {
@@ -60,11 +61,11 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
         transition: x ? "transform .3s" : ""
       };
       return b.maxWidth = b.maxHeight = "100%", b;
-    }), K = w(() => Z(t.zIndex) ? t.zIndex : j());
+    }), Q = w(() => Z(t.zIndex) ? t.zIndex : j());
     function C() {
-      U(), $("close");
+      _(), $("close");
     }
-    function Q() {
+    function U() {
       const o = T((a) => {
         switch (a.code) {
           // ESC
@@ -77,7 +78,7 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
             break;
           // LEFT_ARROW
           case p.left:
-            D();
+            F();
             break;
           // UP_ARROW
           case p.up:
@@ -85,7 +86,7 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
             break;
           // RIGHT_ARROW
           case p.right:
-            F();
+            V();
             break;
           // DOWN_ARROW
           case p.down:
@@ -103,16 +104,16 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
         y(document, "keydown", o), y(document, "wheel", n);
       });
     }
-    function U() {
+    function _() {
       Y.stop();
     }
-    function _() {
+    function ee() {
       k.value = !1;
     }
-    function ee(o) {
-      k.value = !1, o.target.alt = "加载失败";
-    }
     function te(o) {
+      k.value = !1, o.target.alt = q("vft.imageViewer.loadFailed");
+    }
+    function ne(o) {
       if (k.value || o.button !== 0 || !I.value) return;
       s.value.enableTransition = !1;
       const { offsetX: n, offsetY: a } = s.value, l = o.pageX, x = o.pageY, u = T((b) => {
@@ -142,10 +143,10 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
       const n = t.urlList.length;
       m.value = (o + n) % n;
     }
-    function D() {
+    function F() {
       O.value && !t.infinite || L(m.value - 1);
     }
-    function F() {
+    function V() {
       M.value && !t.infinite || L(m.value + 1);
     }
     function g(o, n = {}) {
@@ -175,37 +176,37 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
       }
       s.value.enableTransition = l;
     }
-    return R(G, () => {
-      oe(() => {
+    return D(J, () => {
+      ae(() => {
         X.value[0]?.complete || (k.value = !0);
       });
-    }), R(m, (o) => {
+    }), D(m, (o) => {
       N(), $("switch", o);
-    }), ae(() => {
-      Q(), I.value?.focus?.();
+    }), ie(() => {
+      U(), I.value?.focus?.();
     }), P({
       /** @description manually switch image */
       setActiveItem: L
-    }), (o, n) => (z(), ie(e(ge), {
+    }), (o, n) => (z(), se(e(be), {
       to: "body",
       disabled: !t.teleported
     }, {
-      default: S(() => [
-        d(se, {
+      default: R(() => [
+        d(re, {
           name: "viewer-fade",
           appear: ""
         }, {
-          default: S(() => [
+          default: R(() => [
             c("div", {
               ref_key: "wrapper",
               ref: I,
               tabindex: -1,
               class: r(e(i).e("wrapper")),
-              style: V({ zIndex: K.value })
+              style: S({ zIndex: Q.value })
             }, [
               c("div", {
                 class: r(e(i).e("mask")),
-                onClick: n[0] || (n[0] = ce((a) => t.hideOnClickModal && C(), ["self"]))
+                onClick: n[0] || (n[0] = ue((a) => t.hideOnClickModal && C(), ["self"]))
               }, null, 2),
               c("span", {
                 class: r([e(i).e("btn"), e(i).e("close")]),
@@ -213,14 +214,14 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
               }, [
                 d(e(v), { icon: "icon-close" })
               ], 2),
-              q.value ? re("", !0) : (z(), E(H, { key: 0 }, [
+              G.value ? le("", !0) : (z(), E(H, { key: 0 }, [
                 c("span", {
                   class: r([
                     e(i).e("btn"),
                     e(i).e("prev"),
                     e(i).is("disabled", !t.infinite && O.value)
                   ]),
-                  onClick: D
+                  onClick: F
                 }, [
                   d(e(v), { icon: "icon-arrow-left" })
                 ], 2),
@@ -230,7 +231,7 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
                     e(i).e("next"),
                     e(i).is("disabled", !t.infinite && M.value)
                   ]),
-                  onClick: F
+                  onClick: V
                 }, [
                   d(e(v), { icon: "icon-arrow-right" })
                 ], 2)
@@ -272,23 +273,23 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
               c("div", {
                 class: r(e(i).e("canvas"))
               }, [
-                (z(!0), E(H, null, ue(t.urlList, (a, l) => fe((z(), E("img", {
+                (z(!0), E(H, null, fe(t.urlList, (a, l) => de((z(), E("img", {
                   ref_for: !0,
                   ref: (x) => X.value[l] = x,
                   key: a,
                   src: a,
-                  style: V(J.value),
+                  style: S(K.value),
                   class: r(e(i).e("img")),
                   referrerpolicy: t.referrerpolicy,
                   crossorigin: t.crossorigin,
-                  onLoad: _,
-                  onError: ee,
-                  onMousedown: te
-                }, null, 46, ke)), [
-                  [de, l === m.value]
+                  onLoad: ee,
+                  onError: te,
+                  onMousedown: ne
+                }, null, 46, we)), [
+                  [me, l === m.value]
                 ])), 128))
               ], 2),
-              le(o.$slots, "default")
+              ce(o.$slots, "default")
             ], 6)
           ]),
           _: 3
@@ -299,5 +300,5 @@ const ke = ["src", "referrerpolicy", "crossorigin"], be = A({
   }
 });
 export {
-  Ye as default
+  Ne as default
 };