x-next 1.0.1 → 1.2.0

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

@@ -0,0 +1,105 @@
+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, {
+    key: 0,
+    to: e.container || "body",
+    disabled: e.teleportDisabled
+  }, [
+    d("div", {
+      class: s(e.classNames),
+      style: p(e.wrapperStyles)
+    }, [
+      t(g, {
+        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"))
+          }, null, 2), [
+            [L, e.mergedVisible]
+          ])
+        ]),
+        _: 1
+      }),
+      e.mergedVisible ? (l(), r("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")),
+        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"]))
+      }, [
+        d("div", {
+          class: s(e.className.element("img-container")),
+          style: p({ transform: `scale(${e.scale}, ${e.scale})` }),
+          onClick: a[4] || (a[4] = (...o) => e.onMaskClick && e.onMaskClick(...o))
+        }, [
+          (l(), r("img", {
+            ref: "refImage",
+            key: e.src,
+            src: e.src,
+            class: s([
+              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)`
+            }),
+            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))
+        ], 6),
+        e.isLoading ? (l(), r("div", {
+          key: 0,
+          class: s(e.className.element("loading"))
+        }, [
+          t(k)
+        ], 2)) : n("", !0),
+        t(g, { name: "image-fade" }, {
+          default: u(() => [
+            e.scaleValueVisible ? (l(), r("div", {
+              key: 0,
+              class: s(e.className.element("scale-value"))
+            }, E((e.scale * 100).toFixed(0)) + "% ", 3)) : n("", !0)
+          ]),
+          _: 1
+        }),
+        e.isLoaded && e.actionsLayout.length ? (l(), m(y, {
+          key: 1,
+          actions: e.actions,
+          "actions-layout": e.actionsLayout
+        }, {
+          default: u(() => [
+            I(e.$slots, "actions")
+          ]),
+          _: 3
+        }, 8, ["actions", "actions-layout"])) : n("", !0),
+        e.closable ? (l(), r("button", {
+          key: 2,
+          type: "button",
+          class: s(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);
+}
+const j = /* @__PURE__ */ V(b, [["render", B]]);
+export {
+  j as default
+};

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

@@ -0,0 +1,366 @@
+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({
+  name: "ImagePreview",
+  components: {
+    PreviewArrow: ye,
+    PreviewToolbar: be,
+    IconLoading: Se,
+    IconClose: he
+  },
+  props: {
+    renderToBody: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 图片获取地址
+     * @en Image src
+     */
+    src: {
+      type: String
+    },
+    /**
+     * @zh 是否可见
+     * @en Whether is visible
+     * @vModel
+     */
+    visible: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 默认是否可见，非受控
+     * @en Default visibility
+     */
+    defaultVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 点击 mask 是否触发关闭
+     * @en Whether to close the modal when mask is clicked
+     */
+    maskClosable: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否显示关闭按钮
+     * @en Whether to show close button
+     */
+    closable: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 操作项的布局
+     * @en Layout of action list
+     */
+    actionsLayout: {
+      type: Array,
+      default: () => ["fullScreen", "rotateRight", "rotateLeft", "zoomIn", "zoomOut", "originalSize"]
+    },
+    /**
+     * @zh 设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body
+     * @en Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body
+     */
+    popupContainer: {
+      type: [Object, String]
+    },
+    inGroup: {
+      type: Boolean,
+      default: !1
+    },
+    groupArrowProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * @zh 是否支持 ESC 键关闭预览
+     * @en Whether to support the ESC key to close the preview
+     */
+    escToClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否开启滚轮缩放
+     * @en Whether to enable wheel zoom
+     */
+    wheelZoom: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否开启键盘控制
+     * @en Whether to enable keyboard shortcuts
+     */
+    keyboard: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 默认缩放比
+     * @en Default scale
+     */
+    defaultScale: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * @zh 缩放速率，仅对滚动缩放生效
+     * @en Zoom rate, only for scroll zoom
+     */
+    zoomRate: {
+      type: Number,
+      default: 1.1
+    }
+  },
+  emits: [
+    /**
+     * @zh 关闭事件
+     * @en Close event
+     */
+    "close",
+    "update:visible"
+  ],
+  /**
+   * @zh 自定义额外的操作项
+   * @en Customize additional action items
+   * @slot actions
+   * @version 2.17.0
+   */
+  setup(n, {
+    emit: O
+  }) {
+    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;
+    });
+    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", {
+      visible: i
+    }), X = p(() => ({
+      ...H.value ? {
+        zIndex: j.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,
+      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;
+      }, 1e3);
+    };
+    Oe(k({
+      container: u,
+      hidden: i
+    }));
+    function oe() {
+      c.value = 0, t.value = L.value, $();
+    }
+    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;
+      switch (e.key) {
+        case d.ESC:
+          n.escToClose && (P(), a = !0);
+          break;
+        case d.ARROW_LEFT:
+          n.groupArrowProps.onPrev && (n.groupArrowProps.onPrev(), a = !0);
+          break;
+        case d.ARROW_RIGHT:
+          n.groupArrowProps.onNext && (n.groupArrowProps.onNext(), a = !0);
+          break;
+        case d.ARROW_UP:
+          C("zoomIn") && !l && (w("zoomIn"), a = !0);
+          break;
+        case d.ARROW_DOWN:
+          C("zoomOut") && !l && (w("zoomOut"), a = !0);
+          break;
+        case d.SPACE:
+          C("originalSize") && !l && (v(1), a = !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);
+    });
+    let b = !1;
+    N(s, (e) => e == null ? void 0 : e.focus(), {
+      flush: "post"
+    });
+    const ae = () => {
+      n.keyboard && !b && (b = !0, pe(u.value, "keydown", B));
+    }, E = () => {
+      b && (b = !1, ge(u.value, "keydown", B));
+    };
+    N([D, i], () => {
+      i.value ? (oe(), R("loading"), ae()) : E();
+    }, {
+      immediate: !0
+    });
+    function P() {
+      i.value && (O("close"), O("update:visible", !1), U(!1));
+    }
+    function ne(e) {
+      var o;
+      (o = s == null ? void 0 : s.value) == null || o.focus(), M.value && e.target === e.currentTarget && P();
+    }
+    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 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 x(e) {
+      const l = e === "clockwise" ? (c.value + T) % 360 : c.value === 0 ? 360 - T : c.value - T;
+      c.value = l;
+    }
+    function w(e) {
+      const o = Ae(t.value, e);
+      v(o);
+    }
+    return ce(() => {
+      E();
+    }), {
+      t: r,
+      className: h,
+      classNames: Z,
+      container: u,
+      teleportDisabled: Y,
+      wrapperStyles: X,
+      scale: t,
+      translate: g,
+      rotate: c,
+      moving: Q,
+      mergedVisible: i,
+      isLoading: q,
+      isLoaded: J,
+      scaleValueVisible: y,
+      refWrapper: s,
+      refImage: S,
+      mounted: A,
+      onWheel: te,
+      onMaskClick: ne,
+      onCloseClick: P,
+      onImgLoad() {
+        R("loaded");
+      },
+      onImgError() {
+        R("error");
+      },
+      actions: p(() => [
+        /** 满屏 */
+        {
+          key: "fullScreen",
+          name: r("imagePreview.fullscreen"),
+          content: () => f(Ce),
+          onClick: () => le()
+        },
+        /** 顺时针旋转 */
+        {
+          key: "rotateRight",
+          name: r("imagePreview.rotateRight"),
+          content: () => f(ze),
+          onClick: () => x("clockwise")
+        },
+        /** 逆时针旋转 */
+        {
+          key: "rotateLeft",
+          name: r("imagePreview.rotateLeft"),
+          content: () => f(Pe),
+          onClick: () => x("counterclockwise")
+        },
+        /** 放大 */
+        {
+          key: "zoomIn",
+          name: r("imagePreview.zoomIn"),
+          content: () => f(Ie),
+          onClick: () => w("zoomIn"),
+          disabled: t.value === Ee
+        },
+        /** 缩小 */
+        {
+          key: "zoomOut",
+          name: r("imagePreview.zoomOut"),
+          content: () => f(Re),
+          onClick: () => w("zoomOut"),
+          disabled: t.value === xe
+        },
+        /** 缩放到100% */
+        {
+          key: "originalSize",
+          name: r("imagePreview.originalSize"),
+          content: () => f(Te),
+          onClick: () => v(1)
+        }
+      ])
+    };
+  }
+});
+export {
+  lo as default
+};

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

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

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

@@ -0,0 +1,32 @@
+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) {
+  const r = n("ImagePreview");
+  return a(), l(t, null, [
+    e(o.$slots, "default"),
+    p(r, i({ ...o.$attrs, groupArrowProps: o.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
+    }), m({ _: 2 }, [
+      o.$slots.actions ? {
+        name: "actions",
+        fn: u(() => [
+          e(o.$slots, "actions", { url: o.currentUrl })
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["src", "visible", "mask-closable", "closable", "actions-layout", "popup-container", "render-to-body", "onClose"])
+  ], 64);
+}
+const w = /* @__PURE__ */ c(s, [["render", d]]);
+export {
+  w as default
+};