x-next 1.6.0 → 1.7.0

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

@@ -1,33 +1,36 @@
-import { defineComponent as re, toRefs as se, ref as m, onMounted as ue, reactive as k, computed as p, watch as N, onBeforeUnmount as ce, h as f } from "vue";
-import me from "../../_hooks/use-merge-state.js";
-import { useLocale as fe } from "../../locale/index.js";
-import { getClassNameMixin as de } from "../../_utils/config.js";
-import { throttleByRaf as ve } from "../../_utils/throttle-by-raf.js";
-import { KEYBOARD_KEY as d } from "../../_utils/keyboard.js";
-import { isServerRendering as z, on as pe, off as ge } from "../../_utils/dom.js";
-import ye from "./preview-arrow.vue.js";
-import be from "./preview-toolbar.vue.js";
-import we from "./hooks/use-image-load-status.js";
-import ke from "./hooks/use-image-drag.js";
-import Se from "../../icons/animation/animation-loading.js";
-import he from "../../icons/default/close.js";
-import Re from "../../icons/_self/zoom-out.js";
-import Ie from "../../icons/_self/zoom-in.js";
-import Ce from "../../icons/_self/full-screen.js";
-import Pe from "../../icons/_self/rotate-left.js";
-import ze from "../../icons/_self/rotate-right.js";
-import Te from "../../icons/_self/original-size.js";
-import Oe from "../../_hooks/use-popup-overflow-hidden.js";
-import Le from "../../_hooks/use-popup-container.js";
-import Ae, { getScaleByRate as Be, maxScale as Ee, minScale as xe } from "./utils/get-scale.js";
-import Ne from "../../_hooks/use-popup-manager.js";
-const T = 90, lo = /* @__PURE__ */ re({
+import { defineComponent as Se, toRefs as he, ref as g, onMounted as we, reactive as D, computed as y, watch as k, nextTick as ke, onBeforeUnmount as Ce, h as b } from "vue";
+import Ie from "../../_hooks/use-merge-state.js";
+import { useLocale as Re } from "../../locale/index.js";
+import { getClassNameMixin as Te } from "../../_utils/config.js";
+import { throttleByRaf as Oe } from "../../_utils/throttle-by-raf.js";
+import { KEYBOARD_KEY as c } from "../../_utils/keyboard.js";
+import { isServerRendering as m, on as ze, off as Ae } from "../../_utils/dom.js";
+import Pe from "./preview-arrow.vue.js";
+import Ee from "./preview-toolbar.vue.js";
+import Ne from "./hooks/use-image-load-status.js";
+import Be from "./hooks/use-image-drag.js";
+import Le from "../../icons/animation/animation-loading.js";
+import xe from "../../icons/default/close.js";
+import De from "../../icons/default/close-circle-fill.js";
+import _e from "../../icons/_self/zoom-out.js";
+import Me from "../../icons/_self/zoom-in.js";
+import Ve from "../../icons/_self/full-screen.js";
+import Fe from "../../icons/_self/rotate-left.js";
+import Ke from "../../icons/_self/rotate-right.js";
+import Ue from "../../icons/_self/original-size.js";
+import { useOverflow as We } from "../../_hooks/use-overflow.js";
+import je from "../../_hooks/use-popup-container.js";
+import Ze, { getScaleByRate as He, maxScale as Y, minScale as G } from "./utils/get-scale.js";
+import Ye from "../../_hooks/use-popup-manager.js";
+const _ = 90, bt = /* @__PURE__ */ Se({
   name: "ImagePreview",
+  inheritAttrs: !1,
   components: {
-    PreviewArrow: ye,
-    PreviewToolbar: be,
-    IconLoading: Se,
-    IconClose: he
+    PreviewArrow: Pe,
+    PreviewToolbar: Ee,
+    IconLoading: Le,
+    IconClose: xe,
+    IconImageClose: De
   },
   props: {
     renderToBody: {
@@ -152,215 +155,260 @@ const T = 90, lo = /* @__PURE__ */ re({
    * @slot actions
    * @version 2.17.0
    */
-  setup(n, {
-    emit: O
+  setup(r, {
+    attrs: X,
+    emit: M
   }) {
     const {
-      t: r
-    } = fe(), {
-      src: D,
-      popupContainer: _,
-      visible: V,
-      defaultVisible: K,
-      maskClosable: M,
-      actionsLayout: W,
-      defaultScale: L,
-      zoomRate: G
-    } = se(n), s = m(), S = m(), A = m(!1);
-    ue(() => {
-      A.value = !0;
+      t: u
+    } = Re(), {
+      src: V,
+      popupContainer: q,
+      visible: J,
+      defaultVisible: Q,
+      maskClosable: $,
+      actionsLayout: ee,
+      defaultScale: F,
+      zoomRate: O
+    } = he(r), l = g(), f = g(), K = g(!1);
+    we(() => {
+      K.value = !0;
     });
-    const h = de("image-preview"), [i, U] = me(K.value, k({
-      value: V
-    })), Z = p(() => [h.block, {
-      [h.modifier("hide")]: !i.value
-    }]), F = z ? void 0 : document.body, u = Le(F, k({
-      popupContainer: _
-    })), H = p(() => !z && u.value === document.body), Y = p(() => z || !n.renderToBody || !u.value), {
-      zIndex: j
-    } = Ne("dialog", {
+    const z = Te("image-preview"), [i, te] = Ie(Q.value, D({
+      value: J
+    })), oe = y(() => [z.block, {
+      [z.modifier("hide")]: !i.value
+    }]), ae = m ? void 0 : document.body, S = je(ae, D({
+      popupContainer: q
+    })), ie = y(() => !m && S.value === document.body), ne = y(() => m || !r.renderToBody || !S.value), {
+      zIndex: le,
+      isLastDialog: C,
+      close: re
+    } = Ye("dialog", {
       visible: i
-    }), X = p(() => ({
-      ...H.value ? {
-        zIndex: j.value,
+    }), se = y(() => ({
+      ...ie.value ? {
+        zIndex: le.value,
         position: "fixed"
       } : {
         zIndex: "inherit",
         position: "absolute"
       }
     })), {
-      isLoading: q,
-      isLoaded: J,
-      setLoadStatus: R
-    } = we(), c = m(0), t = m(L.value), {
-      translate: g,
-      moving: Q,
-      resetTranslate: $
-    } = ke(k({
-      wrapperEl: s,
-      imageEl: S,
+      isLoading: ue,
+      isLoaded: d,
+      isError: ce,
+      setLoadStatus: A
+    } = Ne(), v = g(0), P = (e) => Number.isFinite(e) ? Math.max(G, Math.min(Y, e)) : 1, n = g(P(F.value)), {
+      translate: I,
+      moving: me,
+      resetTranslate: fe
+    } = Be(D({
+      wrapperEl: l,
+      imageEl: f,
       visible: i,
-      scale: t
-    })), y = m(!1);
-    let I = null;
-    const ee = () => {
-      !y.value && (y.value = !0), I && clearTimeout(I), I = setTimeout(() => {
-        y.value = !1;
+      scale: n
+    })), h = g(!1);
+    let p;
+    const E = () => {
+      p && clearTimeout(p), p = void 0, h.value = !1;
+    }, de = () => {
+      !h.value && (h.value = !0), p && clearTimeout(p), p = setTimeout(() => {
+        h.value = !1;
       }, 1e3);
-    };
-    Oe(k({
-      container: u,
-      hidden: i
-    }));
-    function oe() {
-      c.value = 0, t.value = L.value, $();
+    }, {
+      setOverflowHidden: ve,
+      resetOverflow: U
+    } = We(S);
+    k(i, (e) => {
+      e ? ve() : U();
+    }, {
+      immediate: !0
+    });
+    function pe() {
+      v.value = 0, n.value = P(F.value), fe(), E();
     }
-    const C = (e) => W.value.includes(e), B = (e) => {
-      const o = e.target, l = o && ["BUTTON", "A", "INPUT", "TEXTAREA", "SELECT"].includes(o.tagName);
-      let a = !1;
+    const N = (e) => ee.value.includes(e), W = (e) => {
+      if (!i.value || !r.keyboard || !C()) return;
+      const t = e.target;
+      if (t && (t.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(t.tagName)) && e.key !== c.ESC) return;
+      let o = !1;
       switch (e.key) {
-        case d.ESC:
-          n.escToClose && (P(), a = !0);
+        case c.ESC:
+          r.escToClose && (x(), o = !0);
           break;
-        case d.ARROW_LEFT:
-          n.groupArrowProps.onPrev && (n.groupArrowProps.onPrev(), a = !0);
+        case c.ARROW_LEFT:
+          r.groupArrowProps.onPrev && (r.groupArrowProps.onPrev(), o = !0);
           break;
-        case d.ARROW_RIGHT:
-          n.groupArrowProps.onNext && (n.groupArrowProps.onNext(), a = !0);
+        case c.ARROW_RIGHT:
+          r.groupArrowProps.onNext && (r.groupArrowProps.onNext(), o = !0);
           break;
-        case d.ARROW_UP:
-          C("zoomIn") && !l && (w("zoomIn"), a = !0);
+        case c.ARROW_UP:
+          d.value && N("zoomIn") && (t == null ? void 0 : t.tagName) !== "BUTTON" && (t == null ? void 0 : t.tagName) !== "A" && (R("zoomIn"), o = !0);
           break;
-        case d.ARROW_DOWN:
-          C("zoomOut") && !l && (w("zoomOut"), a = !0);
+        case c.ARROW_DOWN:
+          d.value && N("zoomOut") && (t == null ? void 0 : t.tagName) !== "BUTTON" && (t == null ? void 0 : t.tagName) !== "A" && (R("zoomOut"), o = !0);
           break;
-        case d.SPACE:
-          C("originalSize") && !l && (v(1), a = !0);
+        case c.SPACE:
+          d.value && N("originalSize") && (t == null ? void 0 : t.tagName) !== "BUTTON" && (t == null ? void 0 : t.tagName) !== "A" && (w(1), o = !0);
           break;
       }
-      a && (e.stopPropagation(), e.preventDefault());
-    }, te = ve((e) => {
-      if (e.preventDefault(), e.stopPropagation(), !n.wheelZoom) return;
-      const l = (e.deltaY || e.deltaX) > 0 ? "zoomOut" : "zoomIn", a = Be(t.value, G.value, l);
-      v(a);
+      o && (e.stopPropagation(), e.preventDefault());
+    }, B = Oe((e) => {
+      if (e.preventDefault(), e.stopPropagation(), !r.wheelZoom || !d.value || !i.value || !C()) return;
+      const a = (e.deltaY || e.deltaX) > 0 ? "zoomOut" : "zoomIn", o = Number.isFinite(O.value) && O.value > 1 ? O.value : 1.1, s = He(n.value, o, a);
+      w(s);
     });
-    let b = !1;
-    N(s, (e) => e == null ? void 0 : e.focus(), {
+    let L = null;
+    const j = () => {
+      const e = L;
+      L = null, e != null && e.isConnected && e.focus({
+        preventScroll: !0
+      });
+    };
+    k(i, (e) => {
+      e ? m || (L = document.activeElement) : (m || B.cancel(), E(), ke(j));
+    }, {
+      immediate: !0
+    }), k(l, (e) => {
+      e && C() && e.focus({
+        preventScroll: !0
+      });
+    }, {
       flush: "post"
+    }), k([i, () => r.keyboard, S], ([e, t, a], o, s) => {
+      !e || !t || !a || m || (ze(a, "keydown", W), s(() => Ae(a, "keydown", W)));
+    }, {
+      immediate: !0
     });
-    const ae = () => {
-      n.keyboard && !b && (b = !0, pe(u.value, "keydown", B));
-    }, E = () => {
-      b && (b = !1, ge(u.value, "keydown", B));
+    const ge = (e) => {
+      var H;
+      if (e.key !== "Tab" || !C() || !l.value) return;
+      const t = Array.from(l.value.querySelectorAll("button:not([disabled]), a[href], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]")).filter((T) => T.tabIndex >= 0 && !T.closest('[hidden], [inert], [aria-hidden="true"]') && getComputedStyle(T).display !== "none" && getComputedStyle(T).visibility !== "hidden"), a = t[0], o = t.at(-1), s = document.activeElement;
+      a ? t.includes(s) ? e.shiftKey && s === a ? (e.preventDefault(), o == null || o.focus({
+        preventScroll: !0
+      })) : !e.shiftKey && s === o && (e.preventDefault(), a.focus({
+        preventScroll: !0
+      })) : (e.preventDefault(), (H = e.shiftKey ? o : a) == null || H.focus({
+        preventScroll: !0
+      })) : (e.preventDefault(), l.value.focus({
+        preventScroll: !0
+      }));
     };
-    N([D, i], () => {
-      i.value ? (oe(), R("loading"), ae()) : E();
+    k([V, i], () => {
+      i.value && (pe(), A(V.value ? "loading" : "error"));
     }, {
       immediate: !0
     });
-    function P() {
-      i.value && (O("close"), O("update:visible", !1), U(!1));
+    function x() {
+      i.value && (M("close"), M("update:visible", !1), te(!1));
     }
-    function ne(e) {
-      var o;
-      (o = s == null ? void 0 : s.value) == null || o.focus(), M.value && e.target === e.currentTarget && P();
+    function ye(e) {
+      var t;
+      (t = l == null ? void 0 : l.value) == null || t.focus(), $.value && e.target === e.currentTarget && x();
     }
-    function v(e) {
-      if (t.value !== e) {
-        const o = t.value;
-        g.value = [g.value[0] * o / e, g.value[1] * o / e], t.value = e, ee();
+    function w(e) {
+      if (e = P(e), n.value !== e) {
+        const t = n.value;
+        I.value = [I.value[0] * t / e, I.value[1] * t / e], n.value = e, de();
       }
     }
-    function le() {
-      const e = s.value.getBoundingClientRect(), o = S.value.getBoundingClientRect(), l = e.height / (o.height / t.value), a = e.width / (o.width / t.value), ie = Math.max(l, a);
-      v(ie);
+    function be() {
+      if (!l.value || !f.value || !d.value) return;
+      const e = l.value.getBoundingClientRect(), t = f.value.getBoundingClientRect(), a = e.height / (t.height / n.value), o = e.width / (t.width / n.value);
+      if (t.width <= 0 || t.height <= 0) return;
+      const s = Math.min(a, o);
+      w(s);
     }
-    function x(e) {
-      const l = e === "clockwise" ? (c.value + T) % 360 : c.value === 0 ? 360 - T : c.value - T;
-      c.value = l;
+    function Z(e) {
+      const a = e === "clockwise" ? (v.value + _) % 360 : v.value === 0 ? 360 - _ : v.value - _;
+      v.value = a;
     }
-    function w(e) {
-      const o = Ae(t.value, e);
-      v(o);
+    function R(e) {
+      const t = Ze(n.value, e);
+      w(t);
     }
-    return ce(() => {
-      E();
+    return Ce(() => {
+      E(), m || B.cancel(), j(), re(), U();
     }), {
-      t: r,
-      className: h,
-      classNames: Z,
-      container: u,
-      teleportDisabled: Y,
-      wrapperStyles: X,
-      scale: t,
-      translate: g,
-      rotate: c,
-      moving: Q,
+      rootAttrs: y(() => Object.fromEntries(Object.entries(X).filter(([e]) => e !== "class" && e !== "style" && e !== "aria-label"))),
+      t: u,
+      className: z,
+      classNames: oe,
+      container: S,
+      teleportDisabled: ne,
+      wrapperStyles: se,
+      scale: n,
+      translate: I,
+      rotate: v,
+      moving: me,
       mergedVisible: i,
-      isLoading: q,
-      isLoaded: J,
-      scaleValueVisible: y,
-      refWrapper: s,
-      refImage: S,
-      mounted: A,
-      onWheel: te,
-      onMaskClick: ne,
-      onCloseClick: P,
-      onImgLoad() {
-        R("loaded");
+      isLoading: ue,
+      isLoaded: d,
+      isError: ce,
+      scaleValueVisible: h,
+      refWrapper: l,
+      refImage: f,
+      mounted: K,
+      onWheel: B,
+      onMaskClick: ye,
+      onCloseClick: x,
+      onDialogKeydown: ge,
+      onImgLoad(e) {
+        e.target === f.value && A("loaded");
       },
-      onImgError() {
-        R("error");
+      onImgError(e) {
+        e.target === f.value && A("error");
       },
-      actions: p(() => [
+      actions: y(() => [
         /** 满屏 */
         {
           key: "fullScreen",
-          name: r("imagePreview.fullscreen"),
-          content: () => f(Ce),
-          onClick: () => le()
+          name: u("imagePreview.fullscreen"),
+          content: () => b(Ve),
+          onClick: () => be()
         },
         /** 顺时针旋转 */
         {
           key: "rotateRight",
-          name: r("imagePreview.rotateRight"),
-          content: () => f(ze),
-          onClick: () => x("clockwise")
+          name: u("imagePreview.rotateRight"),
+          content: () => b(Ke),
+          onClick: () => Z("clockwise")
         },
         /** 逆时针旋转 */
         {
           key: "rotateLeft",
-          name: r("imagePreview.rotateLeft"),
-          content: () => f(Pe),
-          onClick: () => x("counterclockwise")
+          name: u("imagePreview.rotateLeft"),
+          content: () => b(Fe),
+          onClick: () => Z("counterclockwise")
         },
         /** 放大 */
         {
           key: "zoomIn",
-          name: r("imagePreview.zoomIn"),
-          content: () => f(Ie),
-          onClick: () => w("zoomIn"),
-          disabled: t.value === Ee
+          name: u("imagePreview.zoomIn"),
+          content: () => b(Me),
+          onClick: () => R("zoomIn"),
+          disabled: n.value === Y
         },
         /** 缩小 */
         {
           key: "zoomOut",
-          name: r("imagePreview.zoomOut"),
-          content: () => f(Re),
-          onClick: () => w("zoomOut"),
-          disabled: t.value === xe
+          name: u("imagePreview.zoomOut"),
+          content: () => b(_e),
+          onClick: () => R("zoomOut"),
+          disabled: n.value === G
         },
         /** 缩放到100% */
         {
           key: "originalSize",
-          name: r("imagePreview.originalSize"),
-          content: () => f(Te),
-          onClick: () => v(1)
+          name: u("imagePreview.originalSize"),
+          content: () => b(Ue),
+          onClick: () => w(1)
         }
       ])
     };
   }
 });
 export {
-  lo as default
+  bt as default
 };

package/dist/es/components/image/ImagePreviewAction.js

@@ -1,13 +1,13 @@
-import { defineComponent as d, createVNode as l, mergeProps as u, isVNode as f } from "vue";
+import { defineComponent as u, createVNode as l, mergeProps as p, isVNode as f } from "vue";
 import { getClassNameMixin as b } from "../../_utils/config.js";
-import { Tooltip as p } from "../tooltip/index.js";
+import { Tooltip as s } from "../tooltip/index.js";
 function g(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
 }
-const N = /* @__PURE__ */ d({
+const N = /* @__PURE__ */ u({
   name: "ImagePreviewAction",
   components: {
-    Tooltip: p
+    Tooltip: s
   },
   inheritAttrs: !1,
   props: {
@@ -28,7 +28,7 @@ const N = /* @__PURE__ */ d({
   },
   setup(e, {
     slots: o,
-    attrs: s
+    attrs: m
   }) {
     const t = b("image-preview--toolbar-action");
     return () => {
@@ -38,21 +38,18 @@ const N = /* @__PURE__ */ d({
         disabled: i
       } = e, r = (c = o.default) == null ? void 0 : c.call(o);
       if (!r || !r.length) return null;
-      const n = l("button", u({
+      const n = l("button", p(p(m, {
+        class: [t.block, i && t.modifier("disabled")],
+        onMousedown: (d) => d.preventDefault()
+      }), {
         type: "button",
         disabled: i,
         "aria-disabled": i,
-        "aria-label": a,
-        class: [`${t.block}`, {
-          [t.modifier("disabled")]: i
-        }],
-        onMousedown: (m) => {
-          m.preventDefault();
-        }
-      }, s), [l("span", {
+        "aria-label": a
+      }), [l("span", {
         class: t.element("content")
       }, [r])]);
-      return a ? l(p, {
+      return a ? l(s, {
         class: t.element("tooltip"),
         content: a
       }, g(n) ? n : {

package/dist/es/components/image/ImagePreviewGroup.vue.js

@@ -1,32 +1,33 @@
-import s from "./ImagePreviewGroup.vue2.js";
-import { resolveComponent as n, openBlock as a, createElementBlock as l, Fragment as t, renderSlot as e, createVNode as p, mergeProps as i, createSlots as m, withCtx as u } from "vue";
-import c from "../../_virtual/_plugin-vue_export-helper.js";
-function d(o, b, f, g, $, v) {
+import a from "./ImagePreviewGroup.vue2.js";
+import { resolveComponent as n, openBlock as l, createElementBlock as s, Fragment as t, renderSlot as o, createVNode as i, mergeProps as p, createSlots as m, withCtx as u } from "vue";
+import d from "../../_virtual/_plugin-vue_export-helper.js";
+function b(e, c, g, f, v, $) {
   const r = n("ImagePreview");
-  return a(), l(t, null, [
-    e(o.$slots, "default"),
-    p(r, i({ ...o.$attrs, groupArrowProps: o.groupArrowProps }, {
+  return l(), s(t, null, [
+    o(e.$slots, "default"),
+    i(r, p({ ...e.$attrs, groupArrowProps: e.groupArrowProps }, {
       "in-group": "",
-      src: o.currentUrl,
-      visible: o.mergedVisible && !!o.currentUrl,
-      "mask-closable": o.maskClosable,
-      closable: o.closable,
-      "actions-layout": o.actionsLayout,
-      "popup-container": o.popupContainer,
-      "render-to-body": o.renderToBody,
-      onClose: o.onClose
+      src: e.currentUrl,
+      visible: e.mergedVisible && !!e.currentUrl,
+      "mask-closable": e.maskClosable,
+      closable: e.closable,
+      "actions-layout": e.actionsLayout,
+      "popup-container": e.popupContainer,
+      "render-to-body": e.renderToBody,
+      "aria-label": e.$attrs["aria-label"] || e.t("imagePreview.previewLabel", { index: e.currentIndex + 1, total: e.imageCount }),
+      onClose: e.onClose
     }), m({ _: 2 }, [
-      o.$slots.actions ? {
+      e.$slots.actions ? {
         name: "actions",
         fn: u(() => [
-          e(o.$slots, "actions", { url: o.currentUrl })
+          o(e.$slots, "actions", { url: e.currentUrl })
         ]),
         key: "0"
       } : void 0
-    ]), 1040, ["src", "visible", "mask-closable", "closable", "actions-layout", "popup-container", "render-to-body", "onClose"])
+    ]), 1040, ["src", "visible", "mask-closable", "closable", "actions-layout", "popup-container", "render-to-body", "aria-label", "onClose"])
   ], 64);
 }
-const w = /* @__PURE__ */ c(s, [["render", d]]);
+const P = /* @__PURE__ */ d(a, [["render", b]]);
 export {
-  w as default
+  P as default
 };