ep-craft 0.1.35 → 0.1.36

package/dist/components/image-viewer/EpImageViewer.vue.js

@@ -0,0 +1,421 @@
+import { defineComponent as Ie, markRaw as U, ref as k, effectScope as xe, computed as g, shallowRef as Ce, watch as K, nextTick as Te, onMounted as ye, openBlock as N, createBlock as W, Teleport as Ee, createVNode as r, Transition as Re, withCtx as v, createElementVNode as p, normalizeStyle as ee, normalizeClass as u, unref as o, withModifiers as ze, createElementBlock as q, Fragment as Le, createCommentVNode as te, renderSlot as D, createTextVNode as Oe, toDisplayString as Ne, resolveDynamicComponent as Ye } from "vue";
+import { clamp as $e, useEventListener as x } from "@vueuse/core";
+import { throttle as F } from "lodash-unified";
+import { useNamespace as Se } from "../../hooks/use-namespace/index.js";
+import "@vue/shared";
+import { keysOf as Xe } from "../../utils/objects.js";
+import { getEventCode as Me } from "../../utils/dom/event.js";
+import { ScaleToOriginal as De, FullScreen as Fe, Close as Ve, ArrowLeft as Ae, ArrowRight as Be, ZoomOut as Pe, ZoomIn as He, RefreshLeft as Ze, RefreshRight as Ke } from "@element-plus/icons-vue";
+import { EVENT_CODE as y } from "../../constants/aria.js";
+import { useLocale as qe } from "../../hooks/use-locale/index.js";
+import "../../hooks/use-size/index.js";
+import "@popperjs/core";
+import { useZIndex as je } from "../../hooks/use-z-index/index.js";
+import "../../hooks/use-delayed-toggle/index.js";
+import "../../hooks/use-aria/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "../../hooks/use-empty-values/index.js";
+import { useLockscreen as Ge } from "../../hooks/use-lockscreen/index.js";
+import "../focus-trap/index.js";
+import { ElIcon as w } from "../icon/index.js";
+import { imageViewerEmits as _e } from "./image-viewer.js";
+import Je from "../focus-trap/src/focus-trap.vue.js";
+const Qe = ["src", "crossorigin"], bt = /* @__PURE__ */ Ie({
+  name: "EpImageViewer",
+  __name: "EpImageViewer",
+  props: {
+    urlList: { default: () => [] },
+    zIndex: {},
+    initialIndex: { default: 0 },
+    infinite: { type: Boolean, default: !0 },
+    hideOnClickModal: { type: Boolean },
+    teleported: { type: Boolean },
+    closeOnPressEscape: { type: Boolean, default: !0 },
+    zoomRate: { default: 1.2 },
+    scale: { default: 1 },
+    minScale: { default: 0.2 },
+    maxScale: { default: 7 },
+    showProgress: { type: Boolean },
+    crossorigin: {}
+  },
+  emits: _e,
+  setup(C, { expose: oe, emit: ae }) {
+    const E = {
+      CONTAIN: {
+        name: "contain",
+        icon: U(Fe)
+      },
+      ORIGINAL: {
+        name: "original",
+        icon: U(De)
+      }
+    }, l = C, R = ae;
+    let Y;
+    const { t: ne } = qe(), s = Se("image-viewer"), { nextZIndex: se } = je(), z = k(), j = k(), G = xe(), V = g(() => {
+      const { scale: e, minScale: t, maxScale: n } = l;
+      return $e(e, t, n);
+    }), b = k(!0), L = k(!1), A = k(!1), c = k(l.initialIndex), $ = Ce(E.CONTAIN), a = k({
+      scale: V.value,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: !1
+    }), le = k(l.zIndex ?? se());
+    Ge(A, { ns: s });
+    const re = g(() => {
+      const { urlList: e } = l;
+      return e.length <= 1;
+    }), _ = g(() => c.value === 0), J = g(() => c.value === l.urlList.length - 1), S = g(() => l.urlList[c.value]), ie = g(() => [
+      s.e("btn"),
+      s.e("prev"),
+      s.is("disabled", !l.infinite && _.value)
+    ]), ue = g(() => [
+      s.e("btn"),
+      s.e("next"),
+      s.is("disabled", !l.infinite && J.value)
+    ]), ce = g(() => {
+      const { scale: e, deg: t, offsetX: n, offsetY: f, enableTransition: d } = a.value;
+      let i = n / e, m = f / e;
+      const T = t * Math.PI / 180, I = Math.cos(T), O = Math.sin(T);
+      i = i * I + m * O, m = m * I - n / e * O;
+      const Z = {
+        transform: `scale(${e}) rotate(${t}deg) translate(${i}px, ${m}px)`,
+        transition: d ? "transform .3s" : ""
+      };
+      return $.value.name === E.CONTAIN.name && (Z.maxWidth = Z.maxHeight = "100%"), Z;
+    }), fe = g(
+      () => `${c.value + 1} / ${l.urlList.length}`
+    );
+    function X() {
+      me(), Y == null || Y(), A.value = !1, R("close");
+    }
+    function de() {
+      const e = F((n) => {
+        switch (Me(n)) {
+          case y.esc:
+            l.closeOnPressEscape && X();
+            break;
+          case y.space:
+            B();
+            break;
+          case y.left:
+            P();
+            break;
+          case y.up:
+            h("zoomIn");
+            break;
+          case y.right:
+            H();
+            break;
+          case y.down:
+            h("zoomOut");
+            break;
+        }
+      }), t = F((n) => {
+        const f = n.deltaY || n.deltaX;
+        h(f < 0 ? "zoomIn" : "zoomOut", {
+          zoomRate: l.zoomRate,
+          enableTransition: !1
+        });
+      });
+      G.run(() => {
+        x(document, "keydown", e), x(z, "wheel", t);
+      });
+    }
+    function me() {
+      G.stop();
+    }
+    function ve() {
+      b.value = !1;
+    }
+    function pe(e) {
+      L.value = !0, b.value = !1, R("error", e), e.target.alt = ne("el.image.error");
+    }
+    function ge(e) {
+      if (b.value || e.button !== 0 || !z.value) return;
+      a.value.enableTransition = !1;
+      const { offsetX: t, offsetY: n } = a.value, f = e.pageX, d = e.pageY, i = F((I) => {
+        a.value = {
+          ...a.value,
+          offsetX: t + I.pageX - f,
+          offsetY: n + I.pageY - d
+        };
+      }), m = x(document, "mousemove", i), T = x(document, "mouseup", () => {
+        m(), T();
+      });
+      e.preventDefault();
+    }
+    function he(e) {
+      if (b.value || !z.value || e.touches.length !== 1) return;
+      a.value.enableTransition = !1;
+      const { offsetX: t, offsetY: n } = a.value, { pageX: f, pageY: d } = e.touches[0], i = F((I) => {
+        const O = I.touches[0];
+        a.value = {
+          ...a.value,
+          offsetX: t + O.pageX - f,
+          offsetY: n + O.pageY - d
+        };
+      }), m = x(document, "touchmove", i), T = x(document, "touchend", () => {
+        m(), T();
+      });
+      e.preventDefault();
+    }
+    function Q() {
+      a.value = {
+        scale: V.value,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: !1
+      };
+    }
+    function B() {
+      if (b.value || L.value) return;
+      const e = Xe(E), t = Object.values(E), n = $.value.name, d = (t.findIndex((i) => i.name === n) + 1) % e.length;
+      $.value = E[e[d]], Q();
+    }
+    function M(e) {
+      L.value = !1;
+      const t = l.urlList.length;
+      c.value = (e + t) % t;
+    }
+    function P() {
+      _.value && !l.infinite || M(c.value - 1);
+    }
+    function H() {
+      J.value && !l.infinite || M(c.value + 1);
+    }
+    function h(e, t = {}) {
+      if (b.value || L.value) return;
+      const { minScale: n, maxScale: f } = l, { zoomRate: d, rotateDeg: i, enableTransition: m } = {
+        zoomRate: l.zoomRate,
+        rotateDeg: 90,
+        enableTransition: !0,
+        ...t
+      };
+      switch (e) {
+        case "zoomOut":
+          a.value.scale > n && (a.value.scale = Number.parseFloat(
+            (a.value.scale / d).toFixed(3)
+          ));
+          break;
+        case "zoomIn":
+          a.value.scale < f && (a.value.scale = Number.parseFloat(
+            (a.value.scale * d).toFixed(3)
+          ));
+          break;
+        case "clockwise":
+          a.value.deg += i, R("rotate", a.value.deg);
+          break;
+        case "anticlockwise":
+          a.value.deg -= i, R("rotate", a.value.deg);
+          break;
+      }
+      a.value.enableTransition = m;
+    }
+    function ke(e) {
+      var t;
+      ((t = e.detail) == null ? void 0 : t.focusReason) === "pointer" && e.preventDefault();
+    }
+    function we() {
+      l.closeOnPressEscape && X();
+    }
+    function be(e) {
+      if (e.ctrlKey) {
+        if (e.deltaY < 0)
+          return e.preventDefault(), !1;
+        if (e.deltaY > 0)
+          return e.preventDefault(), !1;
+      }
+    }
+    return K(
+      () => V.value,
+      (e) => {
+        a.value.scale = e;
+      }
+    ), K(S, () => {
+      Te(() => {
+        const e = j.value;
+        e != null && e.complete || (b.value = !0);
+      });
+    }), K(c, (e) => {
+      Q(), R("switch", e);
+    }), ye(() => {
+      A.value = !0, de(), Y = x("wheel", be, {
+        passive: !1
+      });
+    }), oe({
+      /**
+       * @description manually switch image
+       */
+      setActiveItem: M
+    }), (e, t) => (N(), W(Ee, {
+      to: "body",
+      disabled: !C.teleported
+    }, [
+      r(Re, {
+        name: "viewer-fade",
+        appear: ""
+      }, {
+        default: v(() => [
+          p("div", {
+            ref_key: "wrapper",
+            ref: z,
+            tabindex: -1,
+            class: u(o(s).e("wrapper")),
+            style: ee({ zIndex: le.value })
+          }, [
+            r(o(Je), {
+              loop: "",
+              trapped: "",
+              "focus-trap-el": z.value,
+              "focus-start-el": "container",
+              onFocusoutPrevented: ke,
+              onReleaseRequested: we
+            }, {
+              default: v(() => [
+                p("div", {
+                  class: u(o(s).e("mask")),
+                  onClick: t[0] || (t[0] = ze((n) => C.hideOnClickModal && X(), ["self"]))
+                }, null, 2),
+                p("span", {
+                  class: u([o(s).e("btn"), o(s).e("close")]),
+                  onClick: X
+                }, [
+                  r(o(w), null, {
+                    default: v(() => [
+                      r(o(Ve))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                re.value ? te("", !0) : (N(), q(Le, { key: 0 }, [
+                  p("span", {
+                    class: u(ie.value),
+                    onClick: P
+                  }, [
+                    r(o(w), null, {
+                      default: v(() => [
+                        r(o(Ae))
+                      ]),
+                      _: 1
+                    })
+                  ], 2),
+                  p("span", {
+                    class: u(ue.value),
+                    onClick: H
+                  }, [
+                    r(o(w), null, {
+                      default: v(() => [
+                        r(o(Be))
+                      ]),
+                      _: 1
+                    })
+                  ], 2)
+                ], 64)),
+                e.$slots.progress || C.showProgress ? (N(), q("div", {
+                  key: 1,
+                  class: u([o(s).e("btn"), o(s).e("progress")])
+                }, [
+                  D(e.$slots, "progress", {
+                    activeIndex: c.value,
+                    total: C.urlList.length
+                  }, () => [
+                    Oe(Ne(fe.value), 1)
+                  ])
+                ], 2)) : te("", !0),
+                p("div", {
+                  class: u([o(s).e("btn"), o(s).e("actions")])
+                }, [
+                  p("div", {
+                    class: u(o(s).e("actions__inner"))
+                  }, [
+                    D(e.$slots, "toolbar", {
+                      actions: h,
+                      prev: P,
+                      next: H,
+                      reset: B,
+                      activeIndex: c.value,
+                      setActiveItem: M
+                    }, () => [
+                      r(o(w), {
+                        onClick: t[1] || (t[1] = (n) => h("zoomOut"))
+                      }, {
+                        default: v(() => [
+                          r(o(Pe))
+                        ]),
+                        _: 1
+                      }),
+                      r(o(w), {
+                        onClick: t[2] || (t[2] = (n) => h("zoomIn"))
+                      }, {
+                        default: v(() => [
+                          r(o(He))
+                        ]),
+                        _: 1
+                      }),
+                      p("i", {
+                        class: u(o(s).e("actions__divider"))
+                      }, null, 2),
+                      r(o(w), { onClick: B }, {
+                        default: v(() => [
+                          (N(), W(Ye($.value.icon)))
+                        ]),
+                        _: 1
+                      }),
+                      p("i", {
+                        class: u(o(s).e("actions__divider"))
+                      }, null, 2),
+                      r(o(w), {
+                        onClick: t[3] || (t[3] = (n) => h("anticlockwise"))
+                      }, {
+                        default: v(() => [
+                          r(o(Ze))
+                        ]),
+                        _: 1
+                      }),
+                      r(o(w), {
+                        onClick: t[4] || (t[4] = (n) => h("clockwise"))
+                      }, {
+                        default: v(() => [
+                          r(o(Ke))
+                        ]),
+                        _: 1
+                      })
+                    ])
+                  ], 2)
+                ], 2),
+                p("div", {
+                  class: u(o(s).e("canvas"))
+                }, [
+                  L.value && e.$slots["viewer-error"] ? D(e.$slots, "viewer-error", {
+                    activeIndex: c.value,
+                    src: S.value
+                  }, void 0, void 0, 0) : (N(), q("img", {
+                    ref_key: "imgRef",
+                    ref: j,
+                    key: S.value,
+                    src: S.value,
+                    style: ee(ce.value),
+                    class: u(o(s).e("img")),
+                    crossorigin: C.crossorigin,
+                    onLoad: ve,
+                    onError: pe,
+                    onMousedown: ge,
+                    onTouchstart: he
+                  }, null, 46, Qe))
+                ], 2),
+                D(e.$slots, "default")
+              ]),
+              _: 3
+            }, 8, ["focus-trap-el"])
+          ], 6)
+        ]),
+        _: 3
+      })
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  bt as default
+};

package/dist/components/image-viewer/EpImageViewer2.vue.js

@@ -0,0 +1,4 @@
+import f from "./EpImageViewer.vue.js";
+export {
+  f as default
+};

package/dist/components/image-viewer/image-viewer.d.ts

@@ -0,0 +1,100 @@
+import type { Component, ExtractPublicPropTypes } from 'vue';
+export type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
+export type ImageViewerCrossorigin = 'anonymous' | 'use-credentials' | '';
+export interface ImageViewerProps {
+    /**
+     * @description preview link list.
+     */
+    urlList?: string[];
+    /**
+     * @description preview backdrop z-index.
+     */
+    zIndex?: number;
+    /**
+     * @description the initial preview image index, less than or equal to the length of `url-list`.
+     */
+    initialIndex?: number;
+    /**
+     * @description whether preview is infinite.
+     */
+    infinite?: boolean;
+    /**
+     * @description whether user can emit close event when clicking backdrop.
+     */
+    hideOnClickModal?: boolean;
+    /**
+     * @description whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.
+     */
+    teleported?: boolean;
+    /**
+     * @description whether the image-viewer can be closed by pressing ESC.
+     */
+    closeOnPressEscape?: boolean;
+    /**
+     * @description the zoom rate of the image viewer zoom event.
+     */
+    zoomRate?: number;
+    /**
+     * @description preview image scale.
+     */
+    scale?: number;
+    /**
+     * @description the min scale of the image viewer zoom event.
+     */
+    minScale?: number;
+    /**
+     * @description the max scale of the image viewer zoom event.
+     */
+    maxScale?: number;
+    /**
+     * @description show preview image progress content.
+     */
+    showProgress?: boolean;
+    /**
+     * @description set HTML attribute: crossorigin.
+     */
+    crossorigin?: ImageViewerCrossorigin;
+}
+/**
+ * @deprecated Removed after 3.0.0, Use `ImageViewerProps` instead.
+ */
+export declare const imageViewerProps: {
+    readonly urlList: import("@element-plus/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => [], boolean>;
+    readonly zIndex: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly initialIndex: import("@element-plus/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    readonly infinite: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
+    readonly teleported: BooleanConstructor;
+    readonly closeOnPressEscape: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly zoomRate: import("@element-plus/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
+    readonly scale: import("@element-plus/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+    readonly minScale: import("@element-plus/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0.2, boolean>;
+    readonly maxScale: import("@element-plus/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    readonly showProgress: BooleanConstructor;
+    readonly crossorigin: {
+        readonly type: import("vue").PropType<import("@element-plus/utils").EpPropMergeType<(new (...args: any[]) => "" | "anonymous" | "use-credentials") | (() => ImageViewerCrossorigin) | (((new (...args: any[]) => "" | "anonymous" | "use-credentials") | (() => ImageViewerCrossorigin)) | null)[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+};
+/**
+ * @deprecated Removed after 3.0.0, Use `ImageViewerProps` instead.
+ */
+export type ImageViewerPropsPublic = ExtractPublicPropTypes<typeof imageViewerProps>;
+export declare const imageViewerEmits: {
+    close: () => boolean;
+    error: (evt: Event) => boolean;
+    switch: (index: number) => boolean;
+    rotate: (deg: number) => boolean;
+};
+export type ImageViewerEmits = typeof imageViewerEmits;
+export interface ImageViewerMode {
+    name: string;
+    icon: Component;
+}

package/dist/components/image-viewer/image-viewer.js

@@ -0,0 +1,99 @@
+import { isNumber as t } from "../../utils/types.js";
+import "lodash-unified";
+import "@vueuse/core";
+import "@vue/shared";
+import { mutable as o } from "../../utils/typescript.js";
+import "@element-plus/icons-vue";
+import { buildProps as i, definePropType as r } from "../../utils/vue/props/runtime.js";
+import "vue";
+i({
+  /**
+   * @description preview link list.
+   */
+  urlList: {
+    type: r(Array),
+    default: () => o([])
+  },
+  /**
+   * @description preview backdrop z-index.
+   */
+  zIndex: {
+    type: Number
+  },
+  /**
+   * @description the initial preview image index, less than or equal to the length of `url-list`.
+   */
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description whether preview is infinite.
+   */
+  infinite: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description whether user can emit close event when clicking backdrop.
+   */
+  hideOnClickModal: Boolean,
+  /**
+   * @description whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.
+   */
+  teleported: Boolean,
+  /**
+   * @description whether the image-viewer can be closed by pressing ESC.
+   */
+  closeOnPressEscape: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description the zoom rate of the image viewer zoom event.
+   */
+  zoomRate: {
+    type: Number,
+    default: 1.2
+  },
+  /**
+   * @description preview image scale.
+   */
+  scale: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * @description the min scale of the image viewer zoom event.
+   */
+  minScale: {
+    type: Number,
+    default: 0.2
+  },
+  /**
+   * @description the max scale of the image viewer zoom event.
+   */
+  maxScale: {
+    type: Number,
+    default: 7
+  },
+  /**
+   * @description show preview image progress content.
+   */
+  showProgress: Boolean,
+  /**
+   * @description set HTML attribute: crossorigin.
+   */
+  crossorigin: {
+    type: r(String)
+  }
+});
+const f = {
+  close: () => !0,
+  error: (e) => e instanceof Event,
+  switch: (e) => t(e),
+  rotate: (e) => t(e)
+};
+export {
+  f as imageViewerEmits
+};

package/dist/components/image-viewer/index.d.ts

@@ -1,4 +1,13 @@
 import type { Plugin } from 'vue';
-import { ElImageViewer } from 'element-plus';
-export declare const EpImageViewer: typeof ElImageViewer & Plugin;
+import _EpImageViewer from './EpImageViewer.vue';
+/**
+ * image-viewer 自持 barrel（vendor-batch-4 产出）。
+ *
+ * 本体为本地 SFC，焦点陷阱消费本地 `ElFocusTrap`。
+ * 保留 `setActiveItem` 暴露契约，不导出 `ElImageViewer` 别名。
+ */
+export declare const EpImageViewer: typeof _EpImageViewer & Plugin;
 export default EpImageViewer;
+export { imageViewerEmits, imageViewerProps } from './image-viewer';
+export type { ImageViewerAction, ImageViewerCrossorigin, ImageViewerEmits, ImageViewerMode, ImageViewerProps, ImageViewerPropsPublic, } from './image-viewer';
+export type { ImageViewerInstance } from './instance';

package/dist/components/image-viewer/index.js

@@ -1,6 +1,11 @@
-import { ElImageViewer as e } from "element-plus";
-import { withInstall as i } from "../../utils/with-install.js";
-const m = Object.assign({}, e, { name: "EpImageViewer" }), t = i(m, "ep-image-viewer");
+import { withInstall as e } from "../../utils/with-install.js";
+import i from "./EpImageViewer.vue.js";
+import { imageViewerEmits as a } from "./image-viewer.js";
+const o = e(
+  i,
+  "ep-image-viewer"
+);
 export {
-  t as EpImageViewer
+  o as EpImageViewer,
+  a as imageViewerEmits
 };

package/dist/components/image-viewer/instance.d.ts

@@ -0,0 +1,2 @@
+import type EpImageViewer from './EpImageViewer.vue';
+export type ImageViewerInstance = InstanceType<typeof EpImageViewer> & unknown;

package/dist/components/roving-focus-group/index.js

@@ -1,4 +1,4 @@
-import r from "./src/roving-focus-group2.vue.js";
+import r from "./src/roving-focus-group.vue.js";
 import "./src/roving-focus-item.vue.js";
 import "vue";
 import "@vue/shared";