x-next 1.6.0 → 1.8.0

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

@@ -1,24 +1,24 @@
-import { defineComponent as K, toRefs as T, inject as q, ref as x, computed as t, reactive as D, watchEffect as H, watch as J, onBeforeUnmount as Q } from "vue";
-import W from "../../icons/default/close-circle-fill.js";
-import X from "../../icons/animation/animation-loading.js";
-import Y from "./image-footer.vue.js";
-import Z from "./ImagePreview.vue.js";
-import $ from "./hooks/use-image-load-status.js";
-import { isServerRendering as ee } from "../../_utils/dom.js";
-import { normalizeImageSizeProp as V } from "./utils/index.js";
-import { omit as te } from "../../_utils/omit.js";
-import ie from "../../_hooks/use-merge-state.js";
-import { PreviewGroupInjectionKey as re } from "./context.js";
-import { isBoolean as oe } from "../../_utils/is.js";
-import { getClassNameMixin as ae } from "../../_utils/config.js";
-let le = 0;
-const be = K({
+import { defineComponent as q, toRefs as H, inject as J, ref as Q, computed as i, reactive as X, watch as C, nextTick as Y, onBeforeUnmount as Z } from "vue";
+import $ from "../../icons/default/close-circle-fill.js";
+import ee from "../../icons/animation/animation-loading.js";
+import te from "./image-footer.vue.js";
+import re from "./ImagePreview.vue.js";
+import ie from "./hooks/use-image-load-status.js";
+import { normalizeImageSizeProp as F } from "./utils/index.js";
+import { omit as oe } from "../../_utils/omit.js";
+import ae from "../../_hooks/use-merge-state.js";
+import { PreviewGroupInjectionKey as le } from "./context.js";
+import { isBoolean as ne } from "../../_utils/is.js";
+import { getClassNameMixin as ue } from "../../_utils/config.js";
+import { useLocale as se } from "../../locale/index.js";
+let ve = 0;
+const Le = q({
   name: "Image",
   components: {
-    IconImageClose: W,
-    IconLoading: X,
-    ImageFooter: Y,
-    ImagePreview: Z
+    IconImageClose: $,
+    IconLoading: ee,
+    ImageFooter: te,
+    ImagePreview: re
   },
   inheritAttrs: !1,
   props: {
@@ -140,15 +140,17 @@ const be = K({
       type: [String, Array, Object]
     }
   },
-  emits: [
+  emits: {
     /**
      * @zh 预览的打开和关闭事件
      * @en Preview opening and closing events
      * @param {boolean} visible
      */
-    "preview-visible-change",
-    "update:previewVisible"
-  ],
+    "preview-visible-change": (o) => !0,
+    "update:previewVisible": (o) => !0,
+    load: (o) => !0,
+    error: (o) => !0
+  },
   /**
    * @zh 自定义错误状态的图标
    * @en Customize the icon of error content.
@@ -169,92 +171,111 @@ const be = K({
    * @en Extra content at the bottom
    * @slot extra
    */
-  setup(s, { attrs: u, slots: C, emit: o }) {
+  setup(o, { attrs: c, slots: j, emit: a }) {
     const {
-      height: m,
-      width: f,
-      hideFooter: v,
-      title: p,
-      description: d,
-      src: i,
-      footerPosition: b,
-      defaultPreviewVisible: F,
-      previewVisible: j,
-      preview: c,
-      previewProps: g
-    } = T(s), e = q(re, void 0), r = ae("image"), w = x(), { isLoaded: a, isError: I, isLoading: h, setLoadStatus: y } = $(), P = t(() => ({
-      width: V(f == null ? void 0 : f.value),
-      height: V(m == null ? void 0 : m.value)
-    })), N = t(() => s.fit ? { objectFit: s.fit } : {}), z = t(() => [
-      r.block,
+      height: p,
+      width: d,
+      hideFooter: g,
+      title: w,
+      description: y,
+      src: n,
+      footerPosition: s,
+      defaultPreviewVisible: k,
+      previewVisible: N,
+      preview: h,
+      previewProps: b
+    } = H(o), t = J(le, void 0), { t: z } = se(), l = ue("image"), v = Q(), { isLoaded: S, isError: P, isLoading: L, setLoadStatus: f } = ie(), m = i(() => ({
+      width: F(d == null ? void 0 : d.value),
+      height: F(p == null ? void 0 : p.value)
+    })), A = i(() => o.fit ? { objectFit: o.fit } : {}), E = i(() => [
+      l.block,
       {
-        [r.element("loading")]: h.value,
-        [r.element("loading-error")]: I.value,
+        [l.element("loading")]: L.value,
+        [l.element("loading-error")]: P.value,
         // isLoaded / showFooter 是 ref，这里必须解引用；
         // 直接写对象引用会让条件恒为真，没有 footer 的图片也带上定位类
-        [r.element("with-footer-inner")]: a.value && S.value && b.value === "inner",
-        [r.element("with-footer-outer")]: a.value && S.value && b.value === "outer"
+        [l.element("with-footer-inner")]: u.value && s.value === "inner",
+        [l.element("with-footer-outer")]: u.value && s.value === "outer"
+      },
+      c.class
+    ]), O = i(() => [
+      {
+        ...m.value,
+        height: u.value && s.value === "outer" ? void 0 : m.value.height
       },
-      u.class
-    ]), A = t(() => [
-      P.value,
-      u.style
-    ]), S = t(() => p != null && p.value || d != null && d.value || C.extra ? oe(v.value) ? !v.value && a.value : v.value === "never" : !1), E = t(() => te(u, ["class", "style"])), [_, B] = ie(
-      F.value,
-      D({
-        value: j
+      c.style
+    ]), K = i(() => ({
+      height: u.value && s.value === "outer" ? m.value.height : void 0
+    })), u = i(() => w != null && w.value || y != null && y.value || j.extra ? ne(g.value) ? !g.value && S.value : g.value === "never" : !1), M = i(() => oe(c, ["class", "style", "src"])), [T, B] = ae(
+      k.value,
+      X({
+        value: N
       })
-    ), k = t(() => !(e != null && e.preview) && c.value);
-    H(() => {
-      ee || !w.value || (w.value.src = i == null ? void 0 : i.value, y("loading"));
-    });
-    const L = le++;
-    if (e) {
-      let l;
-      J(
+    ), U = i(() => !(t != null && t.preview) && h.value), I = i(() => h.value && S.value);
+    C(
+      n,
+      (e) => {
+        f(e ? "loading" : "error"), Y(() => {
+          const r = v.value;
+          r != null && r.complete && r.naturalWidth > 0 && e === o.src && f("loaded");
+        });
+      },
+      { immediate: !0, flush: "sync" }
+    );
+    const V = ve++;
+    if (t) {
+      let e;
+      C(
         [() => {
-          var n;
-          return (((n = g == null ? void 0 : g.value) == null ? void 0 : n.src) ?? (i == null ? void 0 : i.value)) || "";
-        }, c],
-        ([n, G]) => {
-          l = e.registerImageUrl(L, n, G);
+          var r;
+          return (((r = b == null ? void 0 : b.value) == null ? void 0 : r.src) ?? (n == null ? void 0 : n.value)) || "";
+        }, h],
+        ([r, W]) => {
+          e = t.registerImageUrl(V, r, W);
         },
         { immediate: !0 }
-      ), Q(() => l == null ? void 0 : l());
+      ), Z(() => e == null ? void 0 : e());
     }
-    function M() {
-      y("loaded");
+    function x(e) {
+      e.target !== v.value || !n.value || (f("loaded"), a("load", e));
     }
-    function O() {
-      y("error");
+    function D(e) {
+      e.target === v.value && (f("error"), a("error", e));
     }
-    function R() {
-      c.value && (e != null && e.preview ? e.preview(L) : (o("preview-visible-change", !0), o("update:previewVisible", !0), B(!0)));
+    function _() {
+      I.value && (t != null && t.preview ? t.preview(V) : (a("preview-visible-change", !0), a("update:previewVisible", !0), B(!0)));
+    }
+    function G(e) {
+      !I.value || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), _());
     }
-    function U() {
-      o("preview-visible-change", !1), o("update:previewVisible", !1), B(!1);
+    function R() {
+      a("preview-visible-change", !1), a("update:previewVisible", !1), B(!1);
     }
     return {
-      refImg: w,
-      className: r,
-      wrapperClassNames: z,
-      wrapperStyles: A,
-      showFooter: S,
-      imgProps: E,
-      imgStyle: P,
-      isLoaded: a,
-      isError: I,
-      isLoading: h,
-      mergedPreviewVisible: _,
-      mergePreview: k,
-      onImgLoaded: M,
-      onImgLoadError: O,
-      onImgClick: R,
-      onPreviewClose: U,
-      fitStyle: N
+      t: z,
+      refImg: v,
+      className: l,
+      wrapperClassNames: E,
+      wrapperStyles: O,
+      overlayStyles: K,
+      showFooter: u,
+      imgProps: M,
+      imgStyle: m,
+      isLoaded: S,
+      isError: P,
+      isLoading: L,
+      mergedPreviewVisible: T,
+      mergePreview: U,
+      canOpenPreview: I,
+      onImgLoaded: x,
+      onImgLoadError: D,
+      onImgClick: _,
+      onImgKeydown: G,
+      onPreviewClose: R,
+      fitStyle: A
     };
   }
 });
 export {
-  be as default
+  Le as default
 };

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

@@ -1,105 +1,118 @@
-import b from "./ImagePreview.vue2.js";
-import { resolveComponent as i, openBlock as l, createBlock as m, Teleport as w, createElementVNode as d, normalizeStyle as p, normalizeClass as s, createVNode as t, Transition as g, withCtx as u, withDirectives as C, vShow as L, createElementBlock as r, withModifiers as N, createCommentVNode as n, toDisplayString as E, renderSlot as I, normalizeProps as P, mergeProps as $ } from "vue";
-import V from "../../_virtual/_plugin-vue_export-helper.js";
-const M = ["aria-label"], S = ["src"], A = ["aria-label"];
-function B(e, a, T, W, z, D) {
-  const k = i("IconLoading"), y = i("PreviewToolbar"), f = i("IconClose"), v = i("PreviewArrow");
-  return e.mounted ? (l(), m(w, {
+import L from "./ImagePreview.vue2.js";
+import { resolveComponent as i, openBlock as s, createBlock as d, Teleport as I, createElementVNode as m, mergeProps as g, createVNode as t, Transition as u, withCtx as p, withDirectives as $, normalizeClass as l, vShow as N, createElementBlock as n, withModifiers as E, normalizeStyle as y, createCommentVNode as r, toDisplayString as v, renderSlot as P, normalizeProps as V } from "vue";
+import A from "../../_virtual/_plugin-vue_export-helper.js";
+const D = ["aria-label", "aria-busy"], M = ["src", "alt", "aria-hidden"], S = ["aria-label"];
+function B(e, a, T, W, z, K) {
+  const b = i("IconLoading"), k = i("IconImageClose"), f = i("PreviewToolbar"), w = i("IconClose"), C = i("PreviewArrow");
+  return e.mounted ? (s(), d(I, {
     key: 0,
     to: e.container || "body",
     disabled: e.teleportDisabled
   }, [
-    d("div", {
-      class: s(e.classNames),
-      style: p(e.wrapperStyles)
-    }, [
-      t(g, {
+    m("div", g(e.rootAttrs, {
+      class: [e.classNames, e.$attrs.class],
+      style: [e.wrapperStyles, e.$attrs.style]
+    }), [
+      t(u, {
         name: "image-fade",
         onBeforeEnter: a[0] || (a[0] = (o) => o.parentElement && (o.parentElement.style.display = "block")),
         onAfterLeave: a[1] || (a[1] = (o) => o.parentElement && (o.parentElement.style.display = ""))
       }, {
-        default: u(() => [
-          C(d("div", {
-            class: s(e.className.element("mask"))
+        default: p(() => [
+          $(m("div", {
+            class: l(e.className.element("mask"))
           }, null, 2), [
-            [L, e.mergedVisible]
+            [N, e.mergedVisible]
           ])
         ]),
         _: 1
       }),
-      e.mergedVisible ? (l(), r("div", {
+      e.mergedVisible ? (s(), n("div", {
         key: 0,
         ref: "refWrapper",
         tabindex: "0",
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": e.t("imagePreview.previewLabel", { index: 1, total: 1 }),
-        class: s(e.className.element("wrapper")),
+        "aria-label": e.$attrs["aria-label"] || e.t("imagePreview.previewLabel", { index: 1, total: 1 }),
+        "aria-busy": e.isLoading || void 0,
+        class: l(e.className.element("wrapper")),
         onClick: a[6] || (a[6] = (...o) => e.onMaskClick && e.onMaskClick(...o)),
-        onWheel: a[7] || (a[7] = N((...o) => e.onWheel && e.onWheel(...o), ["prevent", "stop"]))
+        onWheel: a[7] || (a[7] = E((...o) => e.onWheel && e.onWheel(...o), ["prevent", "stop"])),
+        onKeydown: a[8] || (a[8] = (...o) => e.onDialogKeydown && e.onDialogKeydown(...o))
       }, [
-        d("div", {
-          class: s(e.className.element("img-container")),
-          style: p({ transform: `scale(${e.scale}, ${e.scale})` }),
+        m("div", {
+          class: l(e.className.element("img-container")),
+          style: y({ transform: `scale(${e.scale}, ${e.scale})` }),
           onClick: a[4] || (a[4] = (...o) => e.onMaskClick && e.onMaskClick(...o))
         }, [
-          (l(), r("img", {
+          (s(), n("img", {
             ref: "refImage",
             key: e.src,
             src: e.src,
-            class: s([
+            alt: e.t("imagePreview.openLabel"),
+            "aria-hidden": !e.isLoaded || void 0,
+            class: l([
               e.className.element("img"),
               {
                 [e.className.modifier("img-moving")]: e.moving
               }
             ]),
-            style: p({
-              transform: `translate(${e.translate[0]}px, ${e.translate[1]}px) rotate(${e.rotate}deg)`
+            style: y({
+              transform: `translate(${e.translate[0]}px, ${e.translate[1]}px) rotate(${e.rotate}deg)`,
+              visibility: e.isLoaded ? "visible" : "hidden"
             }),
             onLoad: a[2] || (a[2] = (...o) => e.onImgLoad && e.onImgLoad(...o)),
             onError: a[3] || (a[3] = (...o) => e.onImgError && e.onImgError(...o))
-          }, null, 46, S))
+          }, null, 46, M))
         ], 6),
-        e.isLoading ? (l(), r("div", {
+        e.isLoading ? (s(), n("div", {
           key: 0,
-          class: s(e.className.element("loading"))
+          class: l(e.className.element("loading"))
         }, [
-          t(k)
-        ], 2)) : n("", !0),
-        t(g, { name: "image-fade" }, {
-          default: u(() => [
-            e.scaleValueVisible ? (l(), r("div", {
+          t(b)
+        ], 2)) : r("", !0),
+        e.isError ? (s(), n("div", {
+          key: 1,
+          class: l(e.className.element("error")),
+          role: "status"
+        }, [
+          t(k),
+          m("span", null, v(e.t("imagePreview.loadError")), 1)
+        ], 2)) : r("", !0),
+        t(u, { name: "image-fade" }, {
+          default: p(() => [
+            e.scaleValueVisible ? (s(), n("div", {
               key: 0,
-              class: s(e.className.element("scale-value"))
-            }, E((e.scale * 100).toFixed(0)) + "% ", 3)) : n("", !0)
+              class: l(e.className.element("scale-value"))
+            }, v((e.scale * 100).toFixed(0)) + "% ", 3)) : r("", !0)
           ]),
           _: 1
         }),
-        e.isLoaded && e.actionsLayout.length ? (l(), m(y, {
-          key: 1,
+        e.isLoaded && (e.actionsLayout.length || e.$slots.actions) ? (s(), d(f, {
+          key: 2,
           actions: e.actions,
           "actions-layout": e.actionsLayout
         }, {
-          default: u(() => [
-            I(e.$slots, "actions")
+          default: p(() => [
+            P(e.$slots, "actions")
           ]),
           _: 3
-        }, 8, ["actions", "actions-layout"])) : n("", !0),
-        e.closable ? (l(), r("button", {
-          key: 2,
+        }, 8, ["actions", "actions-layout"])) : r("", !0),
+        e.closable ? (s(), n("button", {
+          key: 3,
           type: "button",
-          class: s(e.className.element("close-btn")),
+          class: l(e.className.element("close-btn")),
           "aria-label": e.t("imagePreview.closeLabel"),
           onClick: a[5] || (a[5] = (...o) => e.onCloseClick && e.onCloseClick(...o))
         }, [
-          t(f)
-        ], 10, A)) : n("", !0),
-        e.inGroup ? (l(), m(v, P($({ key: 3 }, e.groupArrowProps)), null, 16)) : n("", !0)
-      ], 42, M)) : n("", !0)
-    ], 6)
-  ], 8, ["to", "disabled"])) : n("", !0);
+          t(w)
+        ], 10, S)) : r("", !0),
+        e.inGroup ? (s(), d(C, V(g({ key: 4 }, e.groupArrowProps)), null, 16)) : r("", !0)
+      ], 42, D)) : r("", !0)
+    ], 16)
+  ], 8, ["to", "disabled"])) : r("", !0);
 }
-const j = /* @__PURE__ */ V(b, [["render", B]]);
+const q = /* @__PURE__ */ A(L, [["render", B]]);
 export {
-  j as default
+  q as default
 };