vft 0.0.50 → 0.0.51

package/es/components/image/image.vue.d.ts

@@ -1,5 +1,19 @@
 import type { PropType as __PropType } from 'vue';
 import type { ImgFitType } from './types';
+export interface ImageProps {
+    hideOnClickModal?: boolean;
+    src?: string;
+    fit?: ImgFitType;
+    loading?: 'eager' | 'lazy';
+    lazy?: boolean;
+    scrollContainer?: string | HTMLElement;
+    previewSrcList?: string[];
+    previewTeleported?: boolean;
+    zIndex?: number;
+    initialIndex?: number;
+    infinite?: boolean;
+    closeOnPressEscape?: boolean;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     hideOnClickModal: {
         type: __PropType<boolean | undefined>;
@@ -49,7 +63,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean | undefined>;
         required: false;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "close" | "error" | "load" | "switch")[], "show" | "close" | "error" | "load" | "switch", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "switch" | "show" | "error" | "load")[], "close" | "switch" | "show" | "error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     hideOnClickModal: {
         type: __PropType<boolean | undefined>;
         required: false;
@@ -99,10 +113,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
     };
 }>> & {
-    onShow?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    onSwitch?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
     onLoad?: ((...args: any[]) => any) | undefined;
-    onSwitch?: ((...args: any[]) => any) | undefined;
 }, {}>;
 export default _sfc_main;

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

@@ -0,0 +1,153 @@
+import { defineComponent as b, useAttrs as K, ref as o, computed as d, watch as R, onMounted as G, openBlock as s, createElementBlock as f, normalizeClass as h, unref as l, normalizeStyle as J, mergeProps as Q, createCommentVNode as u, renderSlot as z, createElementVNode as A, Fragment as U, createBlock as X, withCtx as Z, nextTick as W } from "vue";
+import { isClient as v, useThrottleFn as _, useEventListener as V } from "@vueuse/core";
+import { useNamespace as ee } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import { isInContainer as te, isElement as le, isString as ne, getScrollContainer as ae } from "@vft/utils";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { useAttrs as re } from "@vft/use";
+import { VftImageViewer as ie } from "../image-viewer/index.js";
+const oe = ["src", "loading"], se = { key: 0 }, a = (
+  /* hoist-static*/
+  ee("image")
+), ue = b({
+  inheritAttrs: !1,
+  name: a.b()
+}), Se = /* @__PURE__ */ b({
+  ...ue,
+  props: {
+    hideOnClickModal: { type: Boolean, default: !1 },
+    src: { default: "" },
+    fit: { default: "" },
+    loading: null,
+    lazy: { type: Boolean },
+    scrollContainer: null,
+    previewSrcList: { default: [] },
+    previewTeleported: { type: Boolean, default: !1 },
+    zIndex: null,
+    initialIndex: { default: 0 },
+    infinite: { type: Boolean, default: !0 },
+    closeOnPressEscape: { type: Boolean, default: !0 }
+  },
+  emits: ["load", "error", "switch", "close", "show"],
+  setup(e, { emit: c }) {
+    let S = "";
+    const T = K(), $ = re(), g = o(), r = o(!1), i = o(!0), L = o(!1), m = o(), n = o(), M = v && "loading" in HTMLImageElement.prototype;
+    let y, w;
+    const O = d(() => T.style), H = d(() => v && e.fit ? { objectFit: e.fit } : {}), k = d(() => Array.isArray(e.previewSrcList) && e.previewSrcList.length > 0), F = d(() => {
+      let t = e.initialIndex;
+      return e.initialIndex > e.previewSrcList.length - 1 && (t = 0), t;
+    }), I = d(() => e.loading === "eager" ? !1 : !M && e.loading === "lazy" || e.lazy), C = () => {
+      v && (i.value = !0, r.value = !1, g.value = e.src);
+    };
+    function N(t) {
+      i.value = !1, r.value = !1, c("load", t);
+    }
+    function P(t) {
+      i.value = !1, r.value = !0, c("error", t);
+    }
+    function p() {
+      te(m.value, n.value) && (C(), B());
+    }
+    const E = _(p, 200);
+    async function x() {
+      v && (await W(), le(e.scrollContainer) ? n.value = e.scrollContainer : ne(e.scrollContainer) && e.scrollContainer !== "" ? n.value = document.querySelector(e.scrollContainer) ?? void 0 : m.value && (n.value = ae(m.value)), n.value && (y = V(
+        n,
+        "scroll",
+        E
+      ), setTimeout(() => p(), 100)));
+    }
+    function B() {
+      !v || !n.value || !E || (y == null || y(), n.value = void 0);
+    }
+    function D(t) {
+      if (t.ctrlKey) {
+        if (t.deltaY < 0)
+          return t.preventDefault(), !1;
+        if (t.deltaY > 0)
+          return t.preventDefault(), !1;
+      }
+    }
+    function Y() {
+      k.value && (w = V("wheel", D, {
+        passive: !1
+      }), S = document.body.style.overflow, document.body.style.overflow = "hidden", L.value = !0, c("show"));
+    }
+    function j() {
+      w == null || w(), document.body.style.overflow = S, L.value = !1, c("close");
+    }
+    function q(t) {
+      c("switch", t);
+    }
+    return R(
+      () => e.src,
+      () => {
+        I.value ? (i.value = !0, r.value = !1, B(), x()) : C();
+      }
+    ), G(() => {
+      I.value ? x() : C();
+    }), (t, ce) => (s(), f("div", {
+      ref_key: "container",
+      ref: m,
+      class: h([l(a).b(), t.$attrs.class]),
+      style: J(l(O))
+    }, [
+      g.value !== void 0 && !r.value ? (s(), f("img", Q({ key: 0 }, l($), {
+        src: g.value,
+        loading: e.loading,
+        style: l(H),
+        class: [
+          l(a).e("inner"),
+          l(k) && l(a).e("preview"),
+          i.value && l(a).is("loading")
+        ],
+        onClick: Y,
+        onLoad: N,
+        onError: P,
+        alt: ""
+      }), null, 16, oe)) : u("", !0),
+      i.value || r.value ? (s(), f("div", {
+        key: 1,
+        class: h(l(a).e("wrapper"))
+      }, [
+        i.value ? z(t.$slots, "placeholder", { key: 0 }, () => [
+          A("div", {
+            class: h(l(a).e("placeholder"))
+          }, null, 2)
+        ]) : r.value ? z(t.$slots, "error", { key: 1 }, () => [
+          A("div", {
+            class: h(l(a).e("error"))
+          }, "加载失败", 2)
+        ]) : u("", !0)
+      ], 2)) : u("", !0),
+      l(k) ? (s(), f(U, { key: 2 }, [
+        L.value ? (s(), X(l(ie), {
+          key: 0,
+          "z-index": e.zIndex,
+          "initial-index": l(F),
+          infinite: e.infinite,
+          "zoom-rate": t.zoomRate,
+          "url-list": e.previewSrcList,
+          "hide-on-click-modal": e.hideOnClickModal,
+          teleported: e.previewTeleported,
+          "close-on-press-escape": e.closeOnPressEscape,
+          onClose: j,
+          onSwitch: q
+        }, {
+          default: Z(() => [
+            t.$slots.viewer ? (s(), f("div", se, [
+              z(t.$slots, "viewer")
+            ])) : u("", !0)
+          ]),
+          _: 3
+        }, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : u("", !0)
+      ], 64)) : u("", !0)
+    ], 6));
+  }
+});
+export {
+  Se as default
+};

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

@@ -47,7 +47,7 @@ export declare const VftImage: import("vft/es/utils").SFCWithInstall<import("vue
         type: import("vue").PropType<boolean | undefined>;
         required: false;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "close" | "error" | "load" | "switch")[], "show" | "close" | "error" | "load" | "switch", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "switch" | "show" | "error" | "load")[], "close" | "switch" | "show" | "error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     hideOnClickModal: {
         type: import("vue").PropType<boolean | undefined>;
         required: false;
@@ -97,11 +97,12 @@ export declare const VftImage: import("vft/es/utils").SFCWithInstall<import("vue
         required: false;
     };
 }>> & {
-    onShow?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    onSwitch?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
     onLoad?: ((...args: any[]) => any) | undefined;
-    onSwitch?: ((...args: any[]) => any) | undefined;
 }, {}>> & Record<string, any>;
 export default VftImage;
 export * from './types';
+export { type ImageProps } from './image.vue';

package/es/components/image/style/css.js

@@ -0,0 +1,3 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-image-viewer.css";
+import "vft/theme-style/vft-image.css";

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

@@ -0,0 +1,3 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/image-viewer.scss";
+import "vft/theme-style/src/image.scss";

package/es/components/image-viewer/image-viewer.vue.d.ts

@@ -0,0 +1,88 @@
+import type { PropType as __PropType } from 'vue';
+export interface ImageViewerProps {
+    urlList?: string[];
+    zIndex?: number;
+    initialIndex?: number;
+    infinite?: boolean;
+    hideOnClickModal?: boolean;
+    teleported?: boolean;
+    closeOnPressEscape?: boolean;
+    zoomRate?: number;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    urlList: {
+        type: __PropType<string[] | undefined>;
+        required: false;
+    };
+    zIndex: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    initialIndex: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    infinite: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    hideOnClickModal: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    teleported: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    closeOnPressEscape: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    zoomRate: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+}, {
+    /** @description manually switch image */
+    setActiveItem: (index: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => true;
+    switch: (index: number) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    urlList: {
+        type: __PropType<string[] | undefined>;
+        required: false;
+    };
+    zIndex: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    initialIndex: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    infinite: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    hideOnClickModal: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    teleported: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    closeOnPressEscape: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    zoomRate: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+}>> & {
+    onClose?: (() => any) | undefined;
+    onSwitch?: ((index: number) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/es/components/image-viewer/image-viewer.vue.js

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

package/es/components/image-viewer/image-viewer.vue2.js

@@ -0,0 +1,296 @@
+import { defineComponent as Z, ref as h, effectScope as ee, computed as p, watch as R, nextTick as te, onMounted as ne, openBlock as z, createBlock as oe, Teleport as ae, createVNode as d, Transition as se, withCtx as ie, createElementVNode as c, normalizeClass as l, unref as e, normalizeStyle as S, withModifiers as le, createElementBlock as E, Fragment as V, createCommentVNode as re, renderList as ce, withDirectives as ue, vShow as fe, renderSlot as de } from "vue";
+import { isNumber as H, useEventListener as I } from "@vueuse/core";
+import { throttle as T } from "lodash";
+import { useNamespace as me } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import { useZIndex as ve } from "../../hooks/use-z-index/index.js";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { EVENT_CODE as w } from "@vft/constants";
+import { VftIcon as v } from "../icon/index.js";
+const ke = ["src"], s = (
+  /* hoist-static*/
+  me("image-viewer")
+), be = Z({
+  name: s.b()
+}), Xe = /* @__PURE__ */ Z({
+  ...be,
+  props: {
+    urlList: { default: [] },
+    zIndex: null,
+    initialIndex: { default: 0 },
+    infinite: { type: Boolean, default: !0 },
+    hideOnClickModal: { type: Boolean, default: !1 },
+    teleported: { type: Boolean, default: !1 },
+    closeOnPressEscape: { type: Boolean, default: !0 },
+    zoomRate: { default: 1.2 }
+  },
+  emits: {
+    close: () => !0,
+    switch: (o) => H(o)
+  },
+  setup(o, { expose: A, emit: X }) {
+    const { nextZIndex: P } = ve(), C = h(), Y = h([]), O = ee(), b = h(!0), m = h(o.initialIndex), i = h({
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: !1
+    }), W = p(() => o.urlList.length <= 1), $ = p(() => m.value === 0), M = p(() => m.value === o.urlList.length - 1), j = p(() => o.urlList[m.value]), q = p(() => {
+      const { scale: t, deg: n, offsetX: a, offsetY: r, enableTransition: x } = i.value;
+      let u = a / t, f = r / t;
+      switch (n % 360) {
+        case 90:
+        case -270:
+          [u, f] = [f, -u];
+          break;
+        case 180:
+        case -180:
+          [u, f] = [-u, -f];
+          break;
+        case 270:
+        case -90:
+          [u, f] = [-f, u];
+          break;
+      }
+      const g = {
+        transform: `scale(${t}) rotate(${n}deg) translate(${u}px, ${f}px)`,
+        transition: x ? "transform .3s" : ""
+      };
+      return g.maxWidth = g.maxHeight = "100%", g;
+    }), G = p(() => H(o.zIndex) ? o.zIndex : P());
+    function y() {
+      K(), X("close");
+    }
+    function J() {
+      const t = T((a) => {
+        switch (a.code) {
+          case w.esc:
+            o.closeOnPressEscape && y();
+            break;
+          case w.space:
+            B();
+            break;
+          case w.left:
+            D();
+            break;
+          case w.up:
+            k("zoomIn");
+            break;
+          case w.right:
+            F();
+            break;
+          case w.down:
+            k("zoomOut");
+            break;
+        }
+      }), n = T((a) => {
+        const r = a.deltaY || a.deltaX;
+        k(r < 0 ? "zoomIn" : "zoomOut", {
+          zoomRate: o.zoomRate,
+          enableTransition: !1
+        });
+      });
+      O.run(() => {
+        I(document, "keydown", t), I(document, "wheel", n);
+      });
+    }
+    function K() {
+      O.stop();
+    }
+    function Q() {
+      b.value = !1;
+    }
+    function U(t) {
+      b.value = !1, t.target.alt = "加载失败";
+    }
+    function _(t) {
+      if (b.value || t.button !== 0 || !C.value)
+        return;
+      i.value.enableTransition = !1;
+      const { offsetX: n, offsetY: a } = i.value, r = t.pageX, x = t.pageY, u = T((g) => {
+        i.value = {
+          ...i.value,
+          offsetX: n + g.pageX - r,
+          offsetY: a + g.pageY - x
+        };
+      }), f = I(document, "mousemove", u);
+      I(document, "mouseup", () => {
+        f();
+      }), t.preventDefault();
+    }
+    function N() {
+      i.value = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: !1
+      };
+    }
+    function B() {
+      b.value || N();
+    }
+    function L(t) {
+      const n = o.urlList.length;
+      m.value = (t + n) % n;
+    }
+    function D() {
+      $.value && !o.infinite || L(m.value - 1);
+    }
+    function F() {
+      M.value && !o.infinite || L(m.value + 1);
+    }
+    function k(t, n = {}) {
+      if (b.value)
+        return;
+      const { rotateDeg: a, enableTransition: r } = {
+        rotateDeg: 90,
+        enableTransition: !0,
+        ...n
+      };
+      switch (t) {
+        case "zoomOut":
+          i.value.scale > 0.2 && (i.value.scale = Number.parseFloat(
+            (i.value.scale / o.zoomRate).toFixed(3)
+          ));
+          break;
+        case "zoomIn":
+          i.value.scale < 7 && (i.value.scale = Number.parseFloat(
+            (i.value.scale * o.zoomRate).toFixed(3)
+          ));
+          break;
+        case "clockwise":
+          i.value.deg += a;
+          break;
+        case "anticlockwise":
+          i.value.deg -= a;
+          break;
+      }
+      i.value.enableTransition = r;
+    }
+    return R(j, () => {
+      te(() => {
+        const t = Y.value[0];
+        t != null && t.complete || (b.value = !0);
+      });
+    }), R(m, (t) => {
+      N(), X("switch", t);
+    }), ne(() => {
+      var t, n;
+      J(), (n = (t = C.value) == null ? void 0 : t.focus) == null || n.call(t);
+    }), A({
+      /** @description manually switch image */
+      setActiveItem: L
+    }), (t, n) => (z(), oe(ae, {
+      to: "body",
+      disabled: !o.teleported
+    }, [
+      d(se, {
+        name: "viewer-fade",
+        appear: ""
+      }, {
+        default: ie(() => [
+          c("div", {
+            ref_key: "wrapper",
+            ref: C,
+            tabindex: -1,
+            class: l(e(s).e("wrapper")),
+            style: S({ zIndex: e(G) })
+          }, [
+            c("div", {
+              class: l(e(s).e("mask")),
+              onClick: n[0] || (n[0] = le((a) => o.hideOnClickModal && y(), ["self"]))
+            }, null, 2),
+            c("span", {
+              class: l([e(s).e("btn"), e(s).e("close")]),
+              onClick: y
+            }, [
+              d(e(v), { icon: "ico-ep:close" })
+            ], 2),
+            e(W) ? re("", !0) : (z(), E(V, { key: 0 }, [
+              c("span", {
+                class: l([
+                  e(s).e("btn"),
+                  e(s).e("prev"),
+                  e(s).is("disabled", !o.infinite && e($))
+                ]),
+                onClick: D
+              }, [
+                d(e(v), { icon: "ico-ep:arrow-left" })
+              ], 2),
+              c("span", {
+                class: l([
+                  e(s).e("btn"),
+                  e(s).e("next"),
+                  e(s).is("disabled", !o.infinite && e(M))
+                ]),
+                onClick: F
+              }, [
+                d(e(v), { icon: "ico-ep:arrow-right" })
+              ], 2)
+            ], 64)),
+            c("div", {
+              class: l([e(s).e("btn"), e(s).e("actions")])
+            }, [
+              c("div", {
+                class: l(e(s).e("actions__inner"))
+              }, [
+                d(e(v), {
+                  icon: "ico-ep:zoom-out",
+                  onClick: n[1] || (n[1] = (a) => k("zoomOut"))
+                }),
+                d(e(v), {
+                  icon: "ico-ep:zoom-in",
+                  onClick: n[2] || (n[2] = (a) => k("zoomIn"))
+                }),
+                c("i", {
+                  class: l(e(s).e("actions__divider"))
+                }, null, 2),
+                d(e(v), {
+                  icon: "ico-ep:scale-to-original",
+                  onClick: B
+                }),
+                c("i", {
+                  class: l(e(s).e("actions__divider"))
+                }, null, 2),
+                d(e(v), {
+                  icon: "ico-ep:refresh-left",
+                  onClick: n[3] || (n[3] = (a) => k("anticlockwise"))
+                }),
+                d(e(v), {
+                  icon: "ico-ep:refresh-right",
+                  onClick: n[4] || (n[4] = (a) => k("clockwise"))
+                })
+              ], 2)
+            ], 2),
+            c("div", {
+              class: l(e(s).e("canvas"))
+            }, [
+              (z(!0), E(V, null, ce(o.urlList, (a, r) => ue((z(), E("img", {
+                ref_for: !0,
+                ref: (x) => Y.value[r] = x,
+                key: a,
+                src: a,
+                style: S(e(q)),
+                class: l(e(s).e("img")),
+                onLoad: Q,
+                onError: U,
+                onMousedown: _
+              }, null, 46, ke)), [
+                [fe, r === m.value]
+              ])), 128))
+            ], 2),
+            de(t.$slots, "default")
+          ], 6)
+        ]),
+        _: 3
+      })
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  Xe as default
+};