ep-craft 0.1.35 → 0.1.37

package/dist/components/image/image.js

@@ -0,0 +1,132 @@
+import { isNumber as o } from "../../utils/types.js";
+import "lodash-unified";
+import "@vueuse/core";
+import "@vue/shared";
+import { mutable as r } from "../../utils/typescript.js";
+import "@element-plus/icons-vue";
+import { buildProps as i, definePropType as t } from "../../utils/vue/props/runtime.js";
+import "vue";
+i({
+  /**
+   * @description when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.
+   */
+  hideOnClickModal: Boolean,
+  /**
+   * @description image source, same as native.
+   */
+  src: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+   */
+  fit: {
+    type: String,
+    values: ["", "contain", "cover", "fill", "none", "scale-down"],
+    default: ""
+  },
+  /**
+   * @description Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading)
+   */
+  loading: {
+    type: String,
+    values: ["eager", "lazy"]
+  },
+  /**
+   * @description whether to use lazy load.
+   */
+  lazy: Boolean,
+  /**
+   * @description the container to add scroll listener when using lazy load.
+   */
+  scrollContainer: {
+    type: t([String, Object])
+  },
+  /**
+   * @description allow big image preview.
+   */
+  previewSrcList: {
+    type: t(Array),
+    default: () => r([])
+  },
+  /**
+   * @description whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`.
+   */
+  previewTeleported: Boolean,
+  /**
+   * @description set image preview z-index.
+   */
+  zIndex: {
+    type: Number
+  },
+  /**
+   * @description initial preview image index, less than the length of `url-list`.
+   */
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description whether the viewer preview is infinite.
+   */
+  infinite: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @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: t(String)
+  }
+});
+const c = {
+  load: (e) => e instanceof Event,
+  error: (e) => e instanceof Event,
+  switch: (e) => o(e),
+  close: () => !0,
+  show: () => !0
+};
+export {
+  c as imageEmits
+};

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

@@ -1,4 +1,13 @@
 import type { Plugin } from 'vue';
-import { ElImage } from 'element-plus';
-export declare const EpImage: typeof ElImage & Plugin;
+import _EpImage from './EpImage.vue';
+/**
+ * image 自持 barrel（vendor-batch-4 产出）。
+ *
+ * 预览消费本地 `EpImageViewer`，不再引入上游对应组件。
+ * 保留 `showPreview` 暴露契约，不导出 `ElImage` 别名。
+ */
+export declare const EpImage: typeof _EpImage & Plugin;
 export default EpImage;
+export { imageEmits, imageProps } from './image';
+export type { ImageCrossorigin, ImageEmits, ImageFitType, ImageProps, ImagePropsPublic, } from './image';
+export type { ImageInstance } from './instance';

package/dist/components/image/index.js

@@ -1,6 +1,11 @@
-import { ElImage as m } from "element-plus";
-import { withInstall as e } from "../../utils/with-install.js";
-const a = Object.assign({}, m, { name: "EpImage" }), p = e(a, "ep-image");
+import { withInstall as m } from "../../utils/with-install.js";
+import o from "./EpImage.vue.js";
+import { imageEmits as a } from "./image.js";
+const r = m(
+  o,
+  "ep-image"
+);
 export {
-  p as EpImage
+  r as EpImage,
+  a as imageEmits
 };

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

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

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

@@ -0,0 +1,61 @@
+import type { ImageViewerAction, ImageViewerProps } from './image-viewer';
+declare function toggleMode(): void;
+declare function setActiveItem(index: number): void;
+declare function prev(): void;
+declare function next(): void;
+declare function handleActions(action: ImageViewerAction, options?: {}): void;
+declare var __VLS_42: {
+    activeIndex: number;
+    total: number;
+}, __VLS_44: {
+    actions: typeof handleActions;
+    prev: typeof prev;
+    next: typeof next;
+    reset: typeof toggleMode;
+    activeIndex: number;
+    setActiveItem: typeof setActiveItem;
+}, __VLS_106: {
+    activeIndex: number;
+    src: string;
+}, __VLS_108: {};
+type __VLS_Slots = {} & {
+    progress?: (props: typeof __VLS_42) => any;
+} & {
+    toolbar?: (props: typeof __VLS_44) => any;
+} & {
+    'viewer-error'?: (props: typeof __VLS_106) => any;
+} & {
+    default?: (props: typeof __VLS_108) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ImageViewerProps, {
+    /**
+     * @description manually switch image
+     */
+    setActiveItem: typeof setActiveItem;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    rotate: (deg: number) => void;
+    switch: (index: number) => void;
+    close: () => void;
+    error: (evt: Event) => void;
+}, string, import("vue").PublicProps, Readonly<ImageViewerProps> & Readonly<{
+    onRotate?: ((deg: number) => any) | undefined;
+    onSwitch?: ((index: number) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onError?: ((evt: Event) => any) | undefined;
+}>, {
+    infinite: boolean;
+    scale: number;
+    initialIndex: number;
+    closeOnPressEscape: boolean;
+    urlList: string[];
+    zoomRate: number;
+    minScale: number;
+    maxScale: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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
+};