vft 0.0.368 → 0.0.369

package/lib/components/image/image.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./image.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const image_vue_vue_type_script_setup_true_lang = require("./image.vue2.cjs");
+exports.default = image_vue_vue_type_script_setup_true_lang.default;

package/lib/components/image/image.vue2.cjs

@@ -1 +1,230 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),$=require("@vft/use"),c=require("@vft/utils"),H=require("../image-viewer/index.cjs"),r=require("@vueuse/core");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const P=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const x=["src","loading"],F={key:0},j=e.defineComponent({name:"vft-image",inheritAttrs:!1}),D=e.defineComponent({...j,props:{hideOnClickModal:{type:Boolean,default:!1},src:{default:""},fit:{default:""},loading:{},lazy:{type:Boolean},scrollContainer:{},previewSrcList:{default:()=>[]},previewTeleported:{type:Boolean,default:!1},zIndex:{},initialIndex:{default:0},infinite:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0}},emits:["load","error","switch","close","show"],setup(l,{emit:z}){const o=P.useNamespace("image"),s=z;let y="";const S=e.useAttrs(),B=$.useAttrs(),d=e.ref(),a=e.ref(!1),i=e.ref(!0),f=e.ref(!1),u=e.ref(),n=e.ref(),E=r.isClient&&"loading"in HTMLImageElement.prototype;let w,C;const V=e.computed(()=>S.style),q=e.computed(()=>r.isClient&&l.fit?{objectFit:l.fit}:{}),v=e.computed(()=>Array.isArray(l.previewSrcList)&&l.previewSrcList.length>0),I=e.computed(()=>{let t=l.initialIndex;return l.initialIndex>l.previewSrcList.length-1&&(t=0),t}),h=e.computed(()=>l.loading==="eager"?!1:!E&&l.loading==="lazy"||l.lazy),m=()=>{r.isClient&&(i.value=!0,a.value=!1,d.value=l.src)};function N(t){i.value=!1,a.value=!1,s("load",t)}function b(t){i.value=!1,a.value=!0,s("error",t)}function g(){c.isInContainer(u.value,n.value)&&(m(),L())}const k=r.useThrottleFn(g,200);async function p(){r.isClient&&(await e.nextTick(),c.isElement(l.scrollContainer)?n.value=l.scrollContainer:c.isString(l.scrollContainer)&&l.scrollContainer!==""?n.value=document.querySelector(l.scrollContainer)??void 0:u.value&&(n.value=c.getScrollContainer(u.value)),n.value&&(w=r.useEventListener(n,"scroll",k),setTimeout(()=>g(),100)))}function L(){!r.isClient||!n.value||!k||(w?.(),n.value=void 0)}function M(t){if(t.ctrlKey){if(t.deltaY<0)return t.preventDefault(),!1;if(t.deltaY>0)return t.preventDefault(),!1}}function T(){v.value&&(C=r.useEventListener("wheel",M,{passive:!1}),y=document.body.style.overflow,document.body.style.overflow="hidden",f.value=!0,s("show"))}function A(){C?.(),document.body.style.overflow=y,f.value=!1,s("close")}function O(t){s("switch",t)}return e.watch(()=>l.src,()=>{h.value?(i.value=!0,a.value=!1,L(),p()):m()}),e.onMounted(()=>{h.value?p():m()}),(t,Y)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:u,class:e.normalizeClass([e.unref(o).b(),t.$attrs.class]),style:e.normalizeStyle(V.value)},[d.value!==void 0&&!a.value?(e.openBlock(),e.createElementBlock("img",e.mergeProps({key:0},e.unref(B),{src:d.value,loading:t.loading,style:q.value,class:[e.unref(o).e("inner"),v.value&&e.unref(o).e("preview"),i.value&&e.unref(o).is("loading")],onClick:T,onLoad:N,onError:b,alt:""}),null,16,x)):e.createCommentVNode("",!0),i.value||a.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(o).e("wrapper"))},[i.value?e.renderSlot(t.$slots,"placeholder",{key:0},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).e("placeholder"))},null,2)]):a.value?e.renderSlot(t.$slots,"error",{key:1},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).e("error"))},"加载失败",2)]):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),v.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[f.value?(e.openBlock(),e.createBlock(e.unref(H.VftImageViewer),{key:0,"z-index":t.zIndex,"initial-index":I.value,infinite:t.infinite,"zoom-rate":t.zoomRate,"url-list":t.previewSrcList,"hide-on-click-modal":t.hideOnClickModal,teleported:t.previewTeleported,"close-on-press-escape":t.closeOnPressEscape,onClose:A,onSwitch:O},{default:e.withCtx(()=>[t.$slots.viewer?(e.openBlock(),e.createElementBlock("div",F,[e.renderSlot(t.$slots,"viewer")])):e.createCommentVNode("",!0)]),_:3},8,["z-index","initial-index","infinite","zoom-rate","url-list","hide-on-click-modal","teleported","close-on-press-escape"])):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)],6))}});exports.default=D;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const use = require("@vft/use");
+const utils = require("@vft/utils");
+const index$1 = require("../image-viewer/index.cjs");
+const core = require("@vueuse/core");
+require("../config-provider/hooks/use-global-config.cjs");
+require("lodash-es");
+const index = require("../../hooks/use-namespace/index.cjs");
+require("../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+require("../../hooks/use-z-index/index.cjs");
+const _hoisted_1 = ["src", "loading"];
+const _hoisted_2 = { key: 0 };
+const __default__ = vue.defineComponent({
+  name: "vft-image",
+  inheritAttrs: false
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    hideOnClickModal: { type: Boolean, default: false },
+    src: { default: "" },
+    fit: { default: "" },
+    loading: {},
+    lazy: { type: Boolean },
+    scrollContainer: {},
+    previewSrcList: { default: () => [] },
+    previewTeleported: { type: Boolean, default: false },
+    zIndex: {},
+    initialIndex: { default: 0 },
+    infinite: { type: Boolean, default: true },
+    closeOnPressEscape: { type: Boolean, default: true }
+  },
+  emits: ["load", "error", "switch", "close", "show"],
+  setup(__props, { emit: __emit }) {
+    const ns = index.useNamespace("image");
+    const emit = __emit;
+    let prevOverflow = "";
+    const rawAttrs = vue.useAttrs();
+    const attrs = use.useAttrs();
+    const imageSrc = vue.ref();
+    const hasLoadError = vue.ref(false);
+    const isLoading = vue.ref(true);
+    const showViewer = vue.ref(false);
+    const container = vue.ref();
+    const _scrollContainer = vue.ref();
+    const supportLoading = core.isClient && "loading" in HTMLImageElement.prototype;
+    let stopScrollListener;
+    let stopWheelListener;
+    const containerStyle = vue.computed(() => rawAttrs.style);
+    const imageStyle = vue.computed(() => {
+      if (core.isClient && __props.fit) {
+        return { objectFit: __props.fit };
+      }
+      return {};
+    });
+    const preview = vue.computed(() => {
+      return Array.isArray(__props.previewSrcList) && __props.previewSrcList.length > 0;
+    });
+    const imageIndex = vue.computed(() => {
+      let previewIndex = __props.initialIndex;
+      if (__props.initialIndex > __props.previewSrcList.length - 1) {
+        previewIndex = 0;
+      }
+      return previewIndex;
+    });
+    const isManual = vue.computed(() => {
+      if (__props.loading === "eager") return false;
+      return !supportLoading && __props.loading === "lazy" || __props.lazy;
+    });
+    const loadImage = () => {
+      if (!core.isClient) return;
+      isLoading.value = true;
+      hasLoadError.value = false;
+      imageSrc.value = __props.src;
+    };
+    function handleLoad(event) {
+      isLoading.value = false;
+      hasLoadError.value = false;
+      emit("load", event);
+    }
+    function handleError(event) {
+      isLoading.value = false;
+      hasLoadError.value = true;
+      emit("error", event);
+    }
+    function handleLazyLoad() {
+      if (utils.isInContainer(container.value, _scrollContainer.value)) {
+        loadImage();
+        removeLazyLoadListener();
+      }
+    }
+    const lazyLoadHandler = core.useThrottleFn(handleLazyLoad, 200);
+    async function addLazyLoadListener() {
+      if (!core.isClient) return;
+      await vue.nextTick();
+      if (utils.isElement(__props.scrollContainer)) {
+        _scrollContainer.value = __props.scrollContainer;
+      } else if (utils.isString(__props.scrollContainer) && __props.scrollContainer !== "") {
+        _scrollContainer.value = document.querySelector(__props.scrollContainer) ?? void 0;
+      } else if (container.value) {
+        _scrollContainer.value = utils.getScrollContainer(container.value);
+      }
+      if (_scrollContainer.value) {
+        stopScrollListener = core.useEventListener(
+          _scrollContainer,
+          "scroll",
+          lazyLoadHandler
+        );
+        setTimeout(() => handleLazyLoad(), 100);
+      }
+    }
+    function removeLazyLoadListener() {
+      if (!core.isClient || !_scrollContainer.value || !lazyLoadHandler) return;
+      stopScrollListener?.();
+      _scrollContainer.value = void 0;
+    }
+    function wheelHandler(e) {
+      if (!e.ctrlKey) return;
+      if (e.deltaY < 0) {
+        e.preventDefault();
+        return false;
+      } else if (e.deltaY > 0) {
+        e.preventDefault();
+        return false;
+      }
+    }
+    function clickHandler() {
+      if (!preview.value) return;
+      stopWheelListener = core.useEventListener("wheel", wheelHandler, {
+        passive: false
+      });
+      prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      showViewer.value = true;
+      emit("show");
+    }
+    function closeViewer() {
+      stopWheelListener?.();
+      document.body.style.overflow = prevOverflow;
+      showViewer.value = false;
+      emit("close");
+    }
+    function switchViewer(val) {
+      emit("switch", val);
+    }
+    vue.watch(
+      () => __props.src,
+      () => {
+        if (isManual.value) {
+          isLoading.value = true;
+          hasLoadError.value = false;
+          removeLazyLoadListener();
+          addLazyLoadListener();
+        } else {
+          loadImage();
+        }
+      }
+    );
+    vue.onMounted(() => {
+      if (isManual.value) {
+        addLazyLoadListener();
+      } else {
+        loadImage();
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "container",
+        ref: container,
+        class: vue.normalizeClass([vue.unref(ns).b(), _ctx.$attrs.class]),
+        style: vue.normalizeStyle(containerStyle.value)
+      }, [
+        imageSrc.value !== void 0 && !hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({ key: 0 }, vue.unref(attrs), {
+          src: imageSrc.value,
+          loading: _ctx.loading,
+          style: imageStyle.value,
+          class: [
+            vue.unref(ns).e("inner"),
+            preview.value && vue.unref(ns).e("preview"),
+            isLoading.value && vue.unref(ns).is("loading")
+          ],
+          onClick: clickHandler,
+          onLoad: handleLoad,
+          onError: handleError,
+          alt: ""
+        }), null, 16, _hoisted_1)) : vue.createCommentVNode("", true),
+        isLoading.value || hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(vue.unref(ns).e("wrapper"))
+        }, [
+          isLoading.value ? vue.renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).e("placeholder"))
+            }, null, 2)
+          ]) : hasLoadError.value ? vue.renderSlot(_ctx.$slots, "error", { key: 1 }, () => [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).e("error"))
+            }, "加载失败", 2)
+          ]) : vue.createCommentVNode("", true)
+        ], 2)) : vue.createCommentVNode("", true),
+        preview.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          showViewer.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.VftImageViewer), {
+            key: 0,
+            "z-index": _ctx.zIndex,
+            "initial-index": imageIndex.value,
+            infinite: _ctx.infinite,
+            "zoom-rate": _ctx.zoomRate,
+            "url-list": _ctx.previewSrcList,
+            "hide-on-click-modal": _ctx.hideOnClickModal,
+            teleported: _ctx.previewTeleported,
+            "close-on-press-escape": _ctx.closeOnPressEscape,
+            onClose: closeViewer,
+            onSwitch: switchViewer
+          }, {
+            default: vue.withCtx(() => [
+              _ctx.$slots.viewer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                vue.renderSlot(_ctx.$slots, "viewer")
+              ])) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : vue.createCommentVNode("", true)
+        ], 64)) : vue.createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/image/index.cjs

@@ -1 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const r=require("../../utils/vue/install.cjs");require("lodash-es");const t=require("./image.vue2.cjs"),e=r.withInstall(t.default);exports.VftImage=e;exports.default=e;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("vue");
+const install = require("../../utils/vue/install.cjs");
+require("lodash-es");
+const image_vue_vue_type_script_setup_true_lang = require("./image.vue2.cjs");
+const VftImage = install.withInstall(image_vue_vue_type_script_setup_true_lang.default);
+exports.VftImage = VftImage;
+exports.default = VftImage;

package/lib/components/image/style/css.cjs

@@ -1 +1,4 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-image-viewer.css");require("vft/theme-style/vft-image.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-image-viewer.css");
+require("vft/theme-style/vft-image.css");

package/lib/components/image/style/index.cjs

@@ -1 +1,4 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/image-viewer.scss");require("vft/theme-style/src/image.scss");
+"use strict";
+require("vft/theme-style/src/base.scss");
+require("vft/theme-style/src/image-viewer.scss");
+require("vft/theme-style/src/image.scss");

package/lib/components/image-viewer/image-viewer.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./image-viewer.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const imageViewer_vue_vue_type_script_setup_true_lang = require("./image-viewer.vue2.cjs");
+exports.default = imageViewer_vue_vue_type_script_setup_true_lang.default;

package/lib/components/image-viewer/image-viewer.vue2.cjs

@@ -1 +1,355 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("@vft/constants"),O=require("@vft/utils"),f=require("../icon/index.cjs"),E=require("@vueuse/core");require("../config-provider/hooks/use-global-config.cjs");const C=require("lodash-es"),Z=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");const A=require("../../hooks/use-z-index/index.cjs"),j=require("../teleport/index.cjs"),W=["src"],G=e.defineComponent({name:"vft-image-viewer"}),J=e.defineComponent({...G,props:{urlList:{default:()=>[]},zIndex:{},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:r=>O.isNumber(r)},setup(r,{expose:$,emit:q}){const a=Z.useNamespace("image-viewer"),z=q,{nextZIndex:B}=A.useZIndex(),b=e.ref(),w=e.ref([]),N=e.effectScope(),m=e.ref(!0),u=e.ref(r.initialIndex),s=e.ref({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),D=e.computed(()=>r.urlList.length<=1),h=e.computed(()=>u.value===0),I=e.computed(()=>u.value===r.urlList.length-1),M=e.computed(()=>r.urlList[u.value]),X=e.computed(()=>{const{scale:t,deg:n,offsetX:o,offsetY:l,enableTransition:k}=s.value;let i=o/t,c=l/t;switch(n%360){case 90:case-270:[i,c]=[c,-i];break;case 180:case-180:[i,c]=[-i,-c];break;case 270:case-90:[i,c]=[-c,i];break}const v={transform:`scale(${t}) rotate(${n}deg) translate(${i}px, ${c}px)`,transition:k?"transform .3s":""};return v.maxWidth=v.maxHeight="100%",v}),Y=e.computed(()=>O.isNumber(r.zIndex)?r.zIndex:B());function V(){F(),z("close")}function S(){const t=C.throttle(o=>{switch(o.code){case g.EVENT_CODE.esc:r.closeOnPressEscape&&V();break;case g.EVENT_CODE.space:T();break;case g.EVENT_CODE.left:y();break;case g.EVENT_CODE.up:d("zoomIn");break;case g.EVENT_CODE.right:L();break;case g.EVENT_CODE.down:d("zoomOut");break}}),n=C.throttle(o=>{const l=o.deltaY||o.deltaX;d(l<0?"zoomIn":"zoomOut",{zoomRate:r.zoomRate,enableTransition:!1})});N.run(()=>{E.useEventListener(document,"keydown",t),E.useEventListener(document,"wheel",n)})}function F(){N.stop()}function R(){m.value=!1}function H(t){m.value=!1,t.target.alt="加载失败"}function P(t){if(m.value||t.button!==0||!b.value)return;s.value.enableTransition=!1;const{offsetX:n,offsetY:o}=s.value,l=t.pageX,k=t.pageY,i=C.throttle(v=>{s.value={...s.value,offsetX:n+v.pageX-l,offsetY:o+v.pageY-k}}),c=E.useEventListener(document,"mousemove",i);E.useEventListener(document,"mouseup",()=>{c()}),t.preventDefault()}function x(){s.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function T(){m.value||x()}function p(t){const n=r.urlList.length;u.value=(t+n)%n}function y(){h.value&&!r.infinite||p(u.value-1)}function L(){I.value&&!r.infinite||p(u.value+1)}function d(t,n={}){if(m.value)return;const{rotateDeg:o,enableTransition:l}={rotateDeg:90,enableTransition:!0,...n};switch(t){case"zoomOut":s.value.scale>.2&&(s.value.scale=Number.parseFloat((s.value.scale/r.zoomRate).toFixed(3)));break;case"zoomIn":s.value.scale<7&&(s.value.scale=Number.parseFloat((s.value.scale*r.zoomRate).toFixed(3)));break;case"clockwise":s.value.deg+=o;break;case"anticlockwise":s.value.deg-=o;break}s.value.enableTransition=l}return e.watch(M,()=>{e.nextTick(()=>{w.value[0]?.complete||(m.value=!0)})}),e.watch(u,t=>{x(),z("switch",t)}),e.onMounted(()=>{S(),b.value?.focus?.()}),$({setActiveItem:p}),(t,n)=>(e.openBlock(),e.createBlock(e.unref(j.VftTeleport),{to:"body",disabled:!t.teleported},{default:e.withCtx(()=>[e.createVNode(e.Transition,{name:"viewer-fade",appear:""},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"wrapper",ref:b,tabindex:-1,class:e.normalizeClass(e.unref(a).e("wrapper")),style:e.normalizeStyle({zIndex:Y.value})},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).e("mask")),onClick:n[0]||(n[0]=e.withModifiers(o=>t.hideOnClickModal&&V(),["self"]))},null,2),e.createElementVNode("span",{class:e.normalizeClass([e.unref(a).e("btn"),e.unref(a).e("close")]),onClick:V},[e.createVNode(e.unref(f.VftIcon),{icon:"icon-close"})],2),D.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",{class:e.normalizeClass([e.unref(a).e("btn"),e.unref(a).e("prev"),e.unref(a).is("disabled",!t.infinite&&h.value)]),onClick:y},[e.createVNode(e.unref(f.VftIcon),{icon:"icon-arrow-left"})],2),e.createElementVNode("span",{class:e.normalizeClass([e.unref(a).e("btn"),e.unref(a).e("next"),e.unref(a).is("disabled",!t.infinite&&I.value)]),onClick:L},[e.createVNode(e.unref(f.VftIcon),{icon:"icon-arrow-right"})],2)],64)),e.createElementVNode("div",{class:e.normalizeClass([e.unref(a).e("btn"),e.unref(a).e("actions")])},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).e("actions__inner"))},[e.createVNode(e.unref(f.VftIcon),{icon:"icon-zoom-out",onClick:n[1]||(n[1]=o=>d("zoomOut"))}),e.createVNode(e.unref(f.VftIcon),{icon:"icon-zoom-in",onClick:n[2]||(n[2]=o=>d("zoomIn"))}),e.createElementVNode("i",{class:e.normalizeClass(e.unref(a).e("actions__divider"))},null,2),e.createVNode(e.unref(f.VftIcon),{icon:"icon-scale-to-original",onClick:T}),e.createElementVNode("i",{class:e.normalizeClass(e.unref(a).e("actions__divider"))},null,2),e.createVNode(e.unref(f.VftIcon),{icon:"icon-refresh-left",onClick:n[3]||(n[3]=o=>d("anticlockwise"))}),e.createVNode(e.unref(f.VftIcon),{icon:"icon-refresh-right",onClick:n[4]||(n[4]=o=>d("clockwise"))})],2)],2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).e("canvas"))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.urlList,(o,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("img",{ref_for:!0,ref:k=>w.value[l]=k,key:o,src:o,style:e.normalizeStyle(X.value),class:e.normalizeClass(e.unref(a).e("img")),onLoad:R,onError:H,onMousedown:P},null,46,W)),[[e.vShow,l===u.value]])),128))],2),e.renderSlot(t.$slots,"default")],6)]),_:3})]),_:3},8,["disabled"]))}});exports.default=J;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const constants = require("@vft/constants");
+const utils = require("@vft/utils");
+const index$3 = require("../icon/index.cjs");
+const core = require("@vueuse/core");
+require("../config-provider/hooks/use-global-config.cjs");
+const lodashEs = require("lodash-es");
+const index = require("../../hooks/use-namespace/index.cjs");
+require("../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+const index$1 = require("../../hooks/use-z-index/index.cjs");
+const index$2 = require("../teleport/index.cjs");
+const _hoisted_1 = ["src"];
+const __default__ = vue.defineComponent({
+  name: "vft-image-viewer"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    urlList: { default: () => [] },
+    zIndex: {},
+    initialIndex: { default: 0 },
+    infinite: { type: Boolean, default: true },
+    hideOnClickModal: { type: Boolean, default: false },
+    teleported: { type: Boolean, default: false },
+    closeOnPressEscape: { type: Boolean, default: true },
+    zoomRate: { default: 1.2 }
+  },
+  emits: {
+    close: () => true,
+    switch: (index2) => utils.isNumber(index2)
+  },
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = index.useNamespace("image-viewer");
+    const emit = __emit;
+    const { nextZIndex } = index$1.useZIndex();
+    const wrapper = vue.ref();
+    const imgRefs = vue.ref([]);
+    const scopeEventListener = vue.effectScope();
+    const loading = vue.ref(true);
+    const activeIndex = vue.ref(__props.initialIndex);
+    const transform = vue.ref({
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: false
+    });
+    const isSingle = vue.computed(() => {
+      return __props.urlList.length <= 1;
+    });
+    const isFirst = vue.computed(() => {
+      return activeIndex.value === 0;
+    });
+    const isLast = vue.computed(() => {
+      return activeIndex.value === __props.urlList.length - 1;
+    });
+    const currentImg = vue.computed(() => {
+      return __props.urlList[activeIndex.value];
+    });
+    const imgStyle = vue.computed(() => {
+      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
+      let translateX = offsetX / scale;
+      let translateY = offsetY / scale;
+      switch (deg % 360) {
+        case 90:
+        case -270:
+          [translateX, translateY] = [translateY, -translateX];
+          break;
+        case 180:
+        case -180:
+          [translateX, translateY] = [-translateX, -translateY];
+          break;
+        case 270:
+        case -90:
+          [translateX, translateY] = [-translateY, translateX];
+          break;
+      }
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
+        transition: enableTransition ? "transform .3s" : ""
+      };
+      style.maxWidth = style.maxHeight = "100%";
+      return style;
+    });
+    const computedZIndex = vue.computed(() => {
+      return utils.isNumber(__props.zIndex) ? __props.zIndex : nextZIndex();
+    });
+    function hide() {
+      unregisterEventListener();
+      emit("close");
+    }
+    function registerEventListener() {
+      const keydownHandler = lodashEs.throttle((e) => {
+        switch (e.code) {
+          // ESC
+          case constants.EVENT_CODE.esc:
+            __props.closeOnPressEscape && hide();
+            break;
+          // SPACE
+          case constants.EVENT_CODE.space:
+            toggleMode();
+            break;
+          // LEFT_ARROW
+          case constants.EVENT_CODE.left:
+            prev();
+            break;
+          // UP_ARROW
+          case constants.EVENT_CODE.up:
+            handleActions("zoomIn");
+            break;
+          // RIGHT_ARROW
+          case constants.EVENT_CODE.right:
+            next();
+            break;
+          // DOWN_ARROW
+          case constants.EVENT_CODE.down:
+            handleActions("zoomOut");
+            break;
+        }
+      });
+      const mousewheelHandler = lodashEs.throttle((e) => {
+        const delta = e.deltaY || e.deltaX;
+        handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
+          zoomRate: __props.zoomRate,
+          enableTransition: false
+        });
+      });
+      scopeEventListener.run(() => {
+        core.useEventListener(document, "keydown", keydownHandler);
+        core.useEventListener(document, "wheel", mousewheelHandler);
+      });
+    }
+    function unregisterEventListener() {
+      scopeEventListener.stop();
+    }
+    function handleImgLoad() {
+      loading.value = false;
+    }
+    function handleImgError(e) {
+      loading.value = false;
+      e.target.alt = "加载失败";
+    }
+    function handleMouseDown(e) {
+      if (loading.value || e.button !== 0 || !wrapper.value) return;
+      transform.value.enableTransition = false;
+      const { offsetX, offsetY } = transform.value;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      const dragHandler = lodashEs.throttle((ev) => {
+        transform.value = {
+          ...transform.value,
+          offsetX: offsetX + ev.pageX - startX,
+          offsetY: offsetY + ev.pageY - startY
+        };
+      });
+      const removeMousemove = core.useEventListener(document, "mousemove", dragHandler);
+      core.useEventListener(document, "mouseup", () => {
+        removeMousemove();
+      });
+      e.preventDefault();
+    }
+    function reset() {
+      transform.value = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    }
+    function toggleMode() {
+      if (loading.value) return;
+      reset();
+    }
+    function setActiveItem(index2) {
+      const len = __props.urlList.length;
+      activeIndex.value = (index2 + len) % len;
+    }
+    function prev() {
+      if (isFirst.value && !__props.infinite) return;
+      setActiveItem(activeIndex.value - 1);
+    }
+    function next() {
+      if (isLast.value && !__props.infinite) return;
+      setActiveItem(activeIndex.value + 1);
+    }
+    function handleActions(action, options = {}) {
+      if (loading.value) return;
+      const { rotateDeg, enableTransition } = {
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      switch (action) {
+        case "zoomOut":
+          if (transform.value.scale > 0.2) {
+            transform.value.scale = Number.parseFloat(
+              (transform.value.scale / __props.zoomRate).toFixed(3)
+            );
+          }
+          break;
+        case "zoomIn":
+          if (transform.value.scale < 7) {
+            transform.value.scale = Number.parseFloat(
+              (transform.value.scale * __props.zoomRate).toFixed(3)
+            );
+          }
+          break;
+        case "clockwise":
+          transform.value.deg += rotateDeg;
+          break;
+        case "anticlockwise":
+          transform.value.deg -= rotateDeg;
+          break;
+      }
+      transform.value.enableTransition = enableTransition;
+    }
+    vue.watch(currentImg, () => {
+      vue.nextTick(() => {
+        const $img = imgRefs.value[0];
+        if (!$img?.complete) {
+          loading.value = true;
+        }
+      });
+    });
+    vue.watch(activeIndex, (val) => {
+      reset();
+      emit("switch", val);
+    });
+    vue.onMounted(() => {
+      registerEventListener();
+      wrapper.value?.focus?.();
+    });
+    __expose({
+      /** @description manually switch image */
+      setActiveItem
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(index$2.VftTeleport), {
+        to: "body",
+        disabled: !_ctx.teleported
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.Transition, {
+            name: "viewer-fade",
+            appear: ""
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                ref_key: "wrapper",
+                ref: wrapper,
+                tabindex: -1,
+                class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
+                style: vue.normalizeStyle({ zIndex: computedZIndex.value })
+              }, [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(ns).e("mask")),
+                  onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
+                }, null, 2),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
+                  onClick: hide
+                }, [
+                  vue.createVNode(vue.unref(index$3.VftIcon), { icon: "icon-close" })
+                ], 2),
+                !isSingle.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass([
+                      vue.unref(ns).e("btn"),
+                      vue.unref(ns).e("prev"),
+                      vue.unref(ns).is("disabled", !_ctx.infinite && isFirst.value)
+                    ]),
+                    onClick: prev
+                  }, [
+                    vue.createVNode(vue.unref(index$3.VftIcon), { icon: "icon-arrow-left" })
+                  ], 2),
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass([
+                      vue.unref(ns).e("btn"),
+                      vue.unref(ns).e("next"),
+                      vue.unref(ns).is("disabled", !_ctx.infinite && isLast.value)
+                    ]),
+                    onClick: next
+                  }, [
+                    vue.createVNode(vue.unref(index$3.VftIcon), { icon: "icon-arrow-right" })
+                  ], 2)
+                ], 64)) : vue.createCommentVNode("", true),
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
+                }, [
+                  vue.createElementVNode("div", {
+                    class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
+                  }, [
+                    vue.createVNode(vue.unref(index$3.VftIcon), {
+                      icon: "icon-zoom-out",
+                      onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut"))
+                    }),
+                    vue.createVNode(vue.unref(index$3.VftIcon), {
+                      icon: "icon-zoom-in",
+                      onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn"))
+                    }),
+                    vue.createElementVNode("i", {
+                      class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
+                    }, null, 2),
+                    vue.createVNode(vue.unref(index$3.VftIcon), {
+                      icon: "icon-scale-to-original",
+                      onClick: toggleMode
+                    }),
+                    vue.createElementVNode("i", {
+                      class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
+                    }, null, 2),
+                    vue.createVNode(vue.unref(index$3.VftIcon), {
+                      icon: "icon-refresh-left",
+                      onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise"))
+                    }),
+                    vue.createVNode(vue.unref(index$3.VftIcon), {
+                      icon: "icon-refresh-right",
+                      onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise"))
+                    })
+                  ], 2)
+                ], 2),
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(ns).e("canvas"))
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
+                    return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
+                      ref_for: true,
+                      ref: (el) => imgRefs.value[i] = el,
+                      key: url,
+                      src: url,
+                      style: vue.normalizeStyle(imgStyle.value),
+                      class: vue.normalizeClass(vue.unref(ns).e("img")),
+                      onLoad: handleImgLoad,
+                      onError: handleImgError,
+                      onMousedown: handleMouseDown
+                    }, null, 46, _hoisted_1)), [
+                      [vue.vShow, i === activeIndex.value]
+                    ]);
+                  }), 128))
+                ], 2),
+                vue.renderSlot(_ctx.$slots, "default")
+              ], 6)
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["disabled"]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/image-viewer/index.cjs

@@ -1 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const r=require("../../utils/vue/install.cjs");require("lodash-es");const t=require("./image-viewer.vue2.cjs"),e=r.withInstall(t.default);exports.VftImageViewer=e;exports.default=e;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("vue");
+const install = require("../../utils/vue/install.cjs");
+require("lodash-es");
+const imageViewer_vue_vue_type_script_setup_true_lang = require("./image-viewer.vue2.cjs");
+const VftImageViewer = install.withInstall(imageViewer_vue_vue_type_script_setup_true_lang.default);
+exports.VftImageViewer = VftImageViewer;
+exports.default = VftImageViewer;

package/lib/components/image-viewer/style/css.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-image-viewer.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-image-viewer.css");