x-next 1.0.1 → 1.2.0

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

@@ -0,0 +1,227 @@
+import { defineComponent as T, toRefs as q, reactive as b, computed as r, ref as D, watch as E, provide as F } from "vue";
+import C from "../../_hooks/use-merge-state.js";
+import H from "./ImagePreview.vue.js";
+import { PreviewGroupInjectionKey as J } from "./context.js";
+import { isArray as A, isUndefined as s } from "../../_utils/is.js";
+const $ = /* @__PURE__ */ T({
+  name: "ImagePreviewGroup",
+  components: {
+    ImagePreview: H
+  },
+  inheritAttrs: !1,
+  props: {
+    renderToBody: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 图片列表（设置了本属性之后，将不再收集 a-image 子组件的图片信息）
+     * @en Picture list (after setting this property, the picture information of a-image subcomponent will no longer be collected)
+     */
+    srcList: {
+      type: Array
+    },
+    /**
+     * @zh 当前展示的图片的下标
+     * @en The index of the currently displayed image
+     * @vModel
+     */
+    current: {
+      type: Number
+    },
+    /**
+     * @zh 第一张展示的图片的下标
+     * @en The index of the first image shown
+     */
+    defaultCurrent: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 是否无限循环
+     * @en Whether to loop infinitely
+     */
+    infinite: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @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: [String, Object]
+    }
+  },
+  emits: [
+    /**
+     * @zh 切换图片
+     * @en Image switch
+     * @param {number} index
+     */
+    "change",
+    "update:current",
+    /**
+     * @zh 预览的打开和关闭
+     * @en Preview visibility change
+     * @param {boolean} visible
+     */
+    "visible-change",
+    "update:visible"
+  ],
+  /**
+   * @zh 自定义额外的操作项
+   * @en Customize additional action items
+   * @slot actions
+   * @version 2.46.0
+   */
+  setup(B, {
+    emit: m
+  }) {
+    const {
+      srcList: n,
+      visible: U,
+      defaultVisible: M,
+      current: S,
+      defaultCurrent: N,
+      infinite: w
+    } = q(B), [h, O] = C(M.value, b({
+      value: U
+    })), g = (e) => {
+      e !== h.value && (m("visible-change", e), m("update:visible", e), O(e));
+    }, k = r(() => new Map(A(n == null ? void 0 : n.value) ? n == null ? void 0 : n.value.map((e, t) => [t, {
+      url: e,
+      canPreview: !0
+    }]) : [])), x = r(() => A(n == null ? void 0 : n.value)), c = D(/* @__PURE__ */ new Map()), f = r(() => x.value ? k.value : c.value), z = r(() => Array.from(c.value.keys())), d = r(() => Array.from(f.value.keys())), i = r(() => d.value.length);
+    function L(e, t, u) {
+      return c.value.set(e, {
+        url: t,
+        canPreview: u
+      }), function() {
+        c.value.delete(e);
+      };
+    }
+    const [a, R] = C(N.value, b({
+      value: S
+    })), v = (e) => {
+      e !== a.value && (m("change", e), m("update:current", e), R(e));
+    }, _ = r(() => d.value[a.value]), j = (e) => {
+      const t = d.value.indexOf(e);
+      t >= 0 && t !== a.value && v(t);
+    }, G = r(() => {
+      var e;
+      return (e = f.value.get(_.value)) == null ? void 0 : e.url;
+    });
+    E(
+      [i, a],
+      () => {
+        if (i.value === 0) {
+          g(!1);
+          return;
+        }
+        if (a.value < 0) {
+          v(0);
+          return;
+        }
+        a.value >= i.value && v(i.value - 1);
+      },
+      // 自动收集模式须等子图片注册；显式列表在 setup 时即可检查边界。
+      {
+        immediate: x.value
+      }
+    ), F(J, b({
+      registerImageUrl: L,
+      preview: (e) => {
+        if (x.value) {
+          const u = c.value.get(e), o = u != null && u.canPreview ? z.value.indexOf(e) : -1;
+          o >= 0 && o < i.value && (v(o), g(!0));
+          return;
+        }
+        const t = f.value.get(e);
+        t != null && t.canPreview && (j(e), g(!0));
+      }
+    }));
+    const y = r(() => {
+      const e = (u, o) => {
+        var p;
+        for (let l = u; l <= o; l++) {
+          const P = d.value[l];
+          if ((p = f.value.get(P)) != null && p.canPreview)
+            return l;
+        }
+      }, t = e(a.value + 1, i.value - 1);
+      return s(t) && w.value ? e(0, a.value - 1) : t;
+    }), I = r(() => {
+      const e = (u, o) => {
+        var p;
+        for (let l = u; l >= o; l--) {
+          const P = d.value[l];
+          if ((p = f.value.get(P)) != null && p.canPreview)
+            return l;
+        }
+      }, t = e(a.value - 1, 0);
+      return s(t) && w.value ? e(i.value - 1, a.value + 1) : t;
+    }), V = r(() => s(I.value) ? void 0 : () => {
+      !s(I.value) && v(I.value);
+    }), K = r(() => s(y.value) ? void 0 : () => {
+      !s(y.value) && v(y.value);
+    });
+    return {
+      mergedVisible: h,
+      currentUrl: G,
+      prevIndex: I,
+      nextIndex: y,
+      onClose() {
+        g(!1);
+      },
+      groupArrowProps: b({
+        onPrev: V,
+        onNext: K
+      })
+    };
+  }
+});
+export {
+  $ as default
+};

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

@@ -0,0 +1,6 @@
+const e = Symbol(
+  "PreviewGroupInjectionKey"
+);
+export {
+  e as PreviewGroupInjectionKey
+};

package/dist/es/components/image/hooks/use-image-drag.js

@@ -0,0 +1,45 @@
+import { toRefs as E, ref as x, watchEffect as R, watch as X, nextTick as Y } from "vue";
+import { on as s, off as f } from "../../../_utils/dom.js";
+import h from "../utils/get-fix-translate.js";
+function B(D) {
+  const { wrapperEl: v, imageEl: a, scale: n } = E(D), t = x([0, 0]), u = x(!1);
+  let i = 0, c = 0, l = [0, 0];
+  const T = () => {
+    if (!v.value || !a.value) return;
+    const e = v.value.getBoundingClientRect(), r = a.value.getBoundingClientRect(), [o, d] = h(
+      e,
+      r,
+      t.value[0],
+      t.value[1],
+      n.value
+    );
+    (o !== t.value[0] || d !== t.value[1]) && (t.value = [o, d]);
+  }, p = (e) => {
+    e.preventDefault && e.preventDefault();
+    const r = l[0] + (e.pageX - i) / n.value, o = l[1] + (e.pageY - c) / n.value;
+    t.value = [r, o];
+  }, g = (e) => {
+    e.preventDefault && e.preventDefault(), u.value = !1, w();
+  }, m = (e) => {
+    e.target === e.currentTarget && (e.preventDefault && e.preventDefault(), u.value = !0, i = e.pageX, c = e.pageY, l = [...t.value], s(window, "mousemove", p, !1), s(window, "mouseup", g, !1));
+  };
+  function w() {
+    typeof window > "u" || (f(window, "mousemove", p, !1), f(window, "mouseup", g, !1));
+  }
+  return R((e) => {
+    typeof window > "u" || (a.value && s(a.value, "mousedown", m), e(() => {
+      a.value && f(a.value, "mousedown", m), w();
+    }));
+  }), X([n], () => {
+    Y(() => T());
+  }), {
+    translate: t,
+    moving: u,
+    resetTranslate() {
+      t.value = [0, 0];
+    }
+  };
+}
+export {
+  B as default
+};

package/dist/es/components/image/hooks/use-image-load-status.js

@@ -0,0 +1,17 @@
+import { ref as d, computed as o } from "vue";
+function f(l) {
+  const e = d("beforeLoad"), a = o(() => e.value === "beforeLoad"), t = o(() => e.value === "loading"), s = o(() => e.value === "error"), r = o(() => e.value === "loaded");
+  return {
+    status: e,
+    isBeforeLoad: a,
+    isLoading: t,
+    isError: s,
+    isLoaded: r,
+    setLoadStatus: (u) => {
+      e.value = u;
+    }
+  };
+}
+export {
+  f as default
+};

package/dist/es/components/image/image-footer.vue.js

@@ -0,0 +1,35 @@
+import r from "./image-footer.vue2.js";
+import { openBlock as t, createElementBlock as s, normalizeClass as i, toDisplayString as l, createCommentVNode as o, renderSlot as a } from "vue";
+import n from "../../_virtual/_plugin-vue_export-helper.js";
+const m = ["title"], p = ["title"];
+function c(e, d, f, u, k, N) {
+  return t(), s("div", {
+    class: i(e.className.block)
+  }, [
+    e.title || e.description ? (t(), s("div", {
+      key: 0,
+      class: i(e.className.element("caption"))
+    }, [
+      e.title ? (t(), s("div", {
+        key: 0,
+        class: i(e.className.element("caption-title")),
+        title: e.title
+      }, l(e.title), 11, m)) : o("", !0),
+      e.description ? (t(), s("div", {
+        key: 1,
+        class: i(e.className.element("caption-description")),
+        title: e.description
+      }, l(e.description), 11, p)) : o("", !0)
+    ], 2)) : o("", !0),
+    e.$slots.extra ? (t(), s("div", {
+      key: 1,
+      class: i(e.className.element("extra"))
+    }, [
+      a(e.$slots, "extra")
+    ], 2)) : o("", !0)
+  ], 2);
+}
+const h = /* @__PURE__ */ n(r, [["render", c]]);
+export {
+  h as default
+};

package/dist/es/components/image/image-footer.vue2.js

@@ -0,0 +1,21 @@
+import { defineComponent as e } from "vue";
+import { getClassNameMixin as t } from "../../_utils/config.js";
+const a = e({
+  name: "ImageFooter",
+  props: {
+    title: {
+      type: String
+    },
+    description: {
+      type: String
+    }
+  },
+  setup() {
+    return {
+      className: t("image--footer")
+    };
+  }
+});
+export {
+  a as default
+};

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

@@ -0,0 +1,20 @@
+import r from "./Image.vue.js";
+import m from "./ImagePreview.vue.js";
+import i from "./ImagePreviewGroup.vue.js";
+import t from "./ImagePreviewAction.js";
+import { generateComponent as e } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as o } from "../../_utils/config.js";
+const v = e(o("Image"), r), w = e(o("ImagePreview"), m), f = e(
+  o("ImagePreviewGroup"),
+  i
+), c = e(
+  o("ImagePreviewAction"),
+  t
+);
+export {
+  v as Image,
+  w as ImagePreview,
+  c as ImagePreviewAction,
+  f as ImagePreviewGroup,
+  v as default
+};

package/dist/es/components/image/preview-arrow.vue.js

@@ -0,0 +1,49 @@
+import d from "./preview-arrow.vue2.js";
+import { resolveComponent as i, openBlock as m, createElementBlock as b, normalizeClass as n, createElementVNode as l, createVNode as r } from "vue";
+import p from "../../_virtual/_plugin-vue_export-helper.js";
+const f = ["disabled", "aria-disabled", "aria-label"], v = ["disabled", "aria-disabled", "aria-label"];
+function N(e, a, u, c, P, g) {
+  const s = i("icon-left"), t = i("icon-right");
+  return m(), b("div", {
+    class: n(e.className.block)
+  }, [
+    l("button", {
+      type: "button",
+      class: n([
+        e.className.element("left"),
+        {
+          [e.className.modifier("disabled")]: !e.onPrev
+        }
+      ]),
+      disabled: !e.onPrev,
+      "aria-disabled": !e.onPrev,
+      "aria-label": e.t("imagePreview.prevLabel"),
+      onClick: a[0] || (a[0] = (o) => {
+        o.preventDefault(), e.onPrev && e.onPrev();
+      })
+    }, [
+      r(s)
+    ], 10, f),
+    l("button", {
+      type: "button",
+      class: n([
+        e.className.element("right"),
+        {
+          [e.className.modifier("disabled")]: !e.onNext
+        }
+      ]),
+      disabled: !e.onNext,
+      "aria-disabled": !e.onNext,
+      "aria-label": e.t("imagePreview.nextLabel"),
+      onClick: a[1] || (a[1] = (o) => {
+        o.preventDefault(), e.onNext && e.onNext();
+      })
+    }, [
+      r(t)
+    ], 10, v)
+  ], 2);
+}
+const $ = /* @__PURE__ */ p(d, [["render", N]]);
+export {
+  $ as default
+};

package/dist/es/components/image/preview-arrow.vue2.js

@@ -0,0 +1,30 @@
+import { defineComponent as t } from "vue";
+import r from "../../icons/_self/prev.js";
+import n from "../../icons/_self/next.js";
+import { getClassNameMixin as m } from "../../_utils/config.js";
+import { useLocale as i } from "../../locale/index.js";
+const u = t({
+  name: "ImagePreviewArrow",
+  components: {
+    IconLeft: r,
+    IconRight: n
+  },
+  props: {
+    onPrev: {
+      type: Function
+    },
+    onNext: {
+      type: Function
+    }
+  },
+  setup() {
+    const o = m("image-preview--arrow"), { t: e } = i();
+    return {
+      className: o,
+      t: e
+    };
+  }
+});
+export {
+  u as default
+};

package/dist/es/components/image/preview-toolbar.vue.js

@@ -0,0 +1,28 @@
+import s from "./preview-toolbar.vue2.js";
+import { resolveComponent as o, openBlock as r, createElementBlock as t, normalizeClass as a, Fragment as d, renderList as i, createBlock as m, withCtx as u, createVNode as p, renderSlot as f } from "vue";
+import _ from "../../_virtual/_plugin-vue_export-helper.js";
+function k(n, C, b, v, $, w) {
+  const l = o("RenderFunction"), c = o("PreviewAction");
+  return r(), t("div", {
+    class: a(n.className.block)
+  }, [
+    (r(!0), t(d, null, i(n.resultActions, (e) => (r(), m(c, {
+      key: e.key,
+      name: e.name,
+      disabled: e.disabled,
+      onClick: e.onClick
+    }, {
+      default: u(() => [
+        p(l, {
+          "render-func": e.content
+        }, null, 8, ["render-func"])
+      ]),
+      _: 2
+    }, 1032, ["name", "disabled", "onClick"]))), 128)),
+    f(n.$slots, "default")
+  ], 2);
+}
+const P = /* @__PURE__ */ _(s, [["render", k]]);
+export {
+  P as default
+};

package/dist/es/components/image/preview-toolbar.vue2.js

@@ -0,0 +1,41 @@
+import { defineComponent as f, toRefs as l, computed as p } from "vue";
+import d from "../../_container/render-function.js";
+import { getClassNameMixin as y } from "../../_utils/config.js";
+import v from "./ImagePreviewAction.js";
+const L = /* @__PURE__ */ f({
+  name: "ImagePreviewToolbar",
+  components: {
+    RenderFunction: d,
+    PreviewAction: v
+  },
+  props: {
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    /** 控制条的布局 */
+    actionsLayout: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(o) {
+    const {
+      actions: n,
+      actionsLayout: e
+    } = l(o), r = y("image-preview--toolbar"), a = p(() => {
+      const i = new Set(e.value), s = (t) => i.has(t.key);
+      return n.value.filter(s).sort((t, c) => {
+        const u = e.value.indexOf(t.key), m = e.value.indexOf(c.key);
+        return u > m ? 1 : -1;
+      });
+    });
+    return {
+      className: r,
+      resultActions: a
+    };
+  }
+});
+export {
+  L as default
+};

package/dist/es/components/image/utils/get-fix-translate.js

@@ -0,0 +1,7 @@
+function n(f, t, b, l, h) {
+  let o = b, i = l;
+  return b && f.width <= t.width && (t.left > f.left && (o -= Math.abs(f.left - t.left) / h), t.right < f.right && (o += Math.abs(f.right - t.right) / h)), l && f.height <= t.height && (t.top > f.top && (i -= Math.abs(f.top - t.top) / h), t.bottom < f.bottom && (i += Math.abs(f.bottom - t.bottom) / h)), [o, i];
+}
+export {
+  n as default
+};

package/dist/es/components/image/utils/get-scale.js

@@ -0,0 +1,49 @@
+const n = [
+  25,
+  33,
+  50,
+  67,
+  75,
+  80,
+  90,
+  100,
+  110,
+  125,
+  150,
+  175,
+  200,
+  250,
+  300,
+  400,
+  500
+].map((e) => +(e / 100).toFixed(2)), l = n[0], r = n[n.length - 1];
+function s(e = 1, o = "zoomIn") {
+  let t = n.indexOf(e);
+  return t === -1 && (t = c(e)), o === "zoomIn" ? t === n.length - 1 ? e : n[t + 1] : t === 0 ? e : n[t - 1];
+}
+function f(e, o = 1.1, t = "zoomIn") {
+  const a = t === "zoomIn" ? o : 1 / o, i = Number.parseFloat((e * a).toFixed(3));
+  return Math.min(r, Math.max(l, i));
+}
+function c(e) {
+  let o = n.length - 1;
+  for (let t = 0; t < n.length; t++) {
+    const a = n[t];
+    if (e === a) {
+      o = t;
+      break;
+    }
+    if (e < a) {
+      const i = n[t - 1];
+      o = i === void 0 || Math.abs(i - e) <= Math.abs(a - e) ? t - 1 : t;
+      break;
+    }
+  }
+  return o;
+}
+export {
+  s as default,
+  f as getScaleByRate,
+  r as maxScale,
+  l as minScale
+};

package/dist/es/components/image/utils/index.js

@@ -0,0 +1,10 @@
+import { isUndefined as o, isNumber as t } from "../../../_utils/is.js";
+function i(r) {
+  if (o(r)) return;
+  if (!t(r) && /^\d+(%)$/.test(r)) return r;
+  const n = parseInt(r, 10);
+  return t(n) ? `${n}px` : void 0;
+}
+export {
+  i as normalizeImageSizeProp
+};