vft 0.0.369 → 0.0.371

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

@@ -1,355 +1 @@
-"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;
+"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;

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

@@ -1,12 +1 @@
-"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;
+"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;

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

@@ -1,3 +1 @@
-"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");

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

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