vft 0.0.149 → 0.0.151

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

@@ -13,91 +13,17 @@ export interface ImageProps {
     infinite?: boolean;
     closeOnPressEscape?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    hideOnClickModal: {
-        type: globalThis.PropType<boolean>;
-    };
-    src: {
-        type: globalThis.PropType<string>;
-    };
-    fit: {
-        type: globalThis.PropType<ImgFitType>;
-    };
-    loading: {
-        type: globalThis.PropType<"eager" | "lazy">;
-    };
-    lazy: {
-        type: globalThis.PropType<boolean>;
-    };
-    scrollContainer: {
-        type: globalThis.PropType<string | HTMLElement>;
-    };
-    previewSrcList: {
-        type: globalThis.PropType<string[]>;
-    };
-    previewTeleported: {
-        type: globalThis.PropType<boolean>;
-    };
-    zIndex: {
-        type: globalThis.PropType<number>;
-    };
-    initialIndex: {
-        type: globalThis.PropType<number>;
-    };
-    infinite: {
-        type: globalThis.PropType<boolean>;
-    };
-    closeOnPressEscape: {
-        type: globalThis.PropType<boolean>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<ImageProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     switch: (...args: any[]) => void;
     close: (...args: any[]) => void;
     error: (...args: any[]) => void;
     load: (...args: any[]) => void;
     show: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
-    hideOnClickModal: {
-        type: globalThis.PropType<boolean>;
-    };
-    src: {
-        type: globalThis.PropType<string>;
-    };
-    fit: {
-        type: globalThis.PropType<ImgFitType>;
-    };
-    loading: {
-        type: globalThis.PropType<"eager" | "lazy">;
-    };
-    lazy: {
-        type: globalThis.PropType<boolean>;
-    };
-    scrollContainer: {
-        type: globalThis.PropType<string | HTMLElement>;
-    };
-    previewSrcList: {
-        type: globalThis.PropType<string[]>;
-    };
-    previewTeleported: {
-        type: globalThis.PropType<boolean>;
-    };
-    zIndex: {
-        type: globalThis.PropType<number>;
-    };
-    initialIndex: {
-        type: globalThis.PropType<number>;
-    };
-    infinite: {
-        type: globalThis.PropType<boolean>;
-    };
-    closeOnPressEscape: {
-        type: globalThis.PropType<boolean>;
-    };
-}>> & {
-    onShow?: ((...args: any[]) => any) | undefined;
-    onLoad?: ((...args: any[]) => any) | undefined;
-    onError?: ((...args: any[]) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ImageProps>>> & {
     onClose?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
     onSwitch?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {
     placeholder?(_: {}): any;
@@ -105,6 +31,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     viewer?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),O=require("@vft/use"),f=require("@vft/utils"),$=require("../image-viewer/index.cjs"),r=require("@vueuse/core");require("../../utils/ns-cover.cjs");require("lodash");const H=require("../../hooks/use-namespace/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const P=["src","loading"],x={key:0},i=H.useNamespace("image"),F=e.defineComponent({name:"vft-image",inheritAttrs:!1}),j=e.defineComponent({...F,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(t,{emit:s}){let C="";const z=e.useAttrs(),B=O.useAttrs(),v=e.ref(),o=e.ref(!1),a=e.ref(!0),m=e.ref(!1),u=e.ref(),n=e.ref(),S=r.isClient&&"loading"in HTMLImageElement.prototype;let c,d;const E=e.computed(()=>z.style),V=e.computed(()=>r.isClient&&t.fit?{objectFit:t.fit}:{}),y=e.computed(()=>Array.isArray(t.previewSrcList)&&t.previewSrcList.length>0),q=e.computed(()=>{let l=t.initialIndex;return t.initialIndex>t.previewSrcList.length-1&&(l=0),l}),g=e.computed(()=>t.loading==="eager"?!1:!S&&t.loading==="lazy"||t.lazy),w=()=>{r.isClient&&(a.value=!0,o.value=!1,v.value=t.src)};function I(l){a.value=!1,o.value=!1,s("load",l)}function N(l){a.value=!1,o.value=!0,s("error",l)}function h(){f.isInContainer(u.value,n.value)&&(w(),L())}const k=r.useThrottleFn(h,200);async function p(){r.isClient&&(await e.nextTick(),f.isElement(t.scrollContainer)?n.value=t.scrollContainer:f.isString(t.scrollContainer)&&t.scrollContainer!==""?n.value=document.querySelector(t.scrollContainer)??void 0:u.value&&(n.value=f.getScrollContainer(u.value)),n.value&&(c=r.useEventListener(n,"scroll",k),setTimeout(()=>h(),100)))}function L(){!r.isClient||!n.value||!k||(c==null||c(),n.value=void 0)}function b(l){if(l.ctrlKey){if(l.deltaY<0)return l.preventDefault(),!1;if(l.deltaY>0)return l.preventDefault(),!1}}function M(){y.value&&(d=r.useEventListener("wheel",b,{passive:!1}),C=document.body.style.overflow,document.body.style.overflow="hidden",m.value=!0,s("show"))}function T(){d==null||d(),document.body.style.overflow=C,m.value=!1,s("close")}function A(l){s("switch",l)}return e.watch(()=>t.src,()=>{g.value?(a.value=!0,o.value=!1,L(),p()):w()}),e.onMounted(()=>{g.value?p():w()}),(l,D)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:u,class:e.normalizeClass([e.unref(i).b(),l.$attrs.class]),style:e.normalizeStyle(E.value)},[v.value!==void 0&&!o.value?(e.openBlock(),e.createElementBlock("img",e.mergeProps({key:0},e.unref(B),{src:v.value,loading:l.loading,style:V.value,class:[e.unref(i).e("inner"),y.value&&e.unref(i).e("preview"),a.value&&e.unref(i).is("loading")],onClick:M,onLoad:I,onError:N,alt:""}),null,16,P)):e.createCommentVNode("",!0),a.value||o.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(i).e("wrapper"))},[a.value?e.renderSlot(l.$slots,"placeholder",{key:0},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i).e("placeholder"))},null,2)]):o.value?e.renderSlot(l.$slots,"error",{key:1},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i).e("error"))},"加载失败",2)]):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),y.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[m.value?(e.openBlock(),e.createBlock(e.unref($.VftImageViewer),{key:0,"z-index":l.zIndex,"initial-index":q.value,infinite:l.infinite,"zoom-rate":l.zoomRate,"url-list":l.previewSrcList,"hide-on-click-modal":l.hideOnClickModal,teleported:l.previewTeleported,"close-on-press-escape":l.closeOnPressEscape,onClose:T,onSwitch:A},{default:e.withCtx(()=>[l.$slots.viewer?(e.openBlock(),e.createElementBlock("div",x,[e.renderSlot(l.$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=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),$=require("@vft/use"),f=require("@vft/utils"),H=require("../image-viewer/index.cjs"),r=require("@vueuse/core");require("../../utils/ns-cover.cjs");require("lodash");const P=require("../../hooks/use-namespace/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const x=["src","loading"],F={key:0},i=P.useNamespace("image"),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 s=z;let C="";const B=e.useAttrs(),S=$.useAttrs(),v=e.ref(),o=e.ref(!1),a=e.ref(!0),m=e.ref(!1),u=e.ref(),n=e.ref(),E=r.isClient&&"loading"in HTMLImageElement.prototype;let c,d;const V=e.computed(()=>B.style),q=e.computed(()=>r.isClient&&l.fit?{objectFit:l.fit}:{}),y=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}),g=e.computed(()=>l.loading==="eager"?!1:!E&&l.loading==="lazy"||l.lazy),w=()=>{r.isClient&&(a.value=!0,o.value=!1,v.value=l.src)};function N(t){a.value=!1,o.value=!1,s("load",t)}function b(t){a.value=!1,o.value=!0,s("error",t)}function h(){f.isInContainer(u.value,n.value)&&(w(),L())}const k=r.useThrottleFn(h,200);async function p(){r.isClient&&(await e.nextTick(),f.isElement(l.scrollContainer)?n.value=l.scrollContainer:f.isString(l.scrollContainer)&&l.scrollContainer!==""?n.value=document.querySelector(l.scrollContainer)??void 0:u.value&&(n.value=f.getScrollContainer(u.value)),n.value&&(c=r.useEventListener(n,"scroll",k),setTimeout(()=>h(),100)))}function L(){!r.isClient||!n.value||!k||(c==null||c(),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(){y.value&&(d=r.useEventListener("wheel",M,{passive:!1}),C=document.body.style.overflow,document.body.style.overflow="hidden",m.value=!0,s("show"))}function A(){d==null||d(),document.body.style.overflow=C,m.value=!1,s("close")}function O(t){s("switch",t)}return e.watch(()=>l.src,()=>{g.value?(a.value=!0,o.value=!1,L(),p()):w()}),e.onMounted(()=>{g.value?p():w()}),(t,Y)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:u,class:e.normalizeClass([e.unref(i).b(),t.$attrs.class]),style:e.normalizeStyle(V.value)},[v.value!==void 0&&!o.value?(e.openBlock(),e.createElementBlock("img",e.mergeProps({key:0},e.unref(S),{src:v.value,loading:t.loading,style:q.value,class:[e.unref(i).e("inner"),y.value&&e.unref(i).e("preview"),a.value&&e.unref(i).is("loading")],onClick:T,onLoad:N,onError:b,alt:""}),null,16,x)):e.createCommentVNode("",!0),a.value||o.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(i).e("wrapper"))},[a.value?e.renderSlot(t.$slots,"placeholder",{key:0},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i).e("placeholder"))},null,2)]):o.value?e.renderSlot(t.$slots,"error",{key:1},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i).e("error"))},"加载失败",2)]):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),y.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[m.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;

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

@@ -1,153 +1,5 @@
 export declare const VftImage: import("vft/es/utils").SFCWithInstall<{
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: {
-            style?: unknown;
-            readonly zIndex?: number | undefined;
-            key?: string | number | symbol | undefined;
-            ref?: import("vue").VNodeRef | undefined;
-            class?: unknown;
-            onShow?: ((...args: any[]) => any) | undefined;
-            onLoad?: ((...args: any[]) => any) | undefined;
-            onError?: ((...args: any[]) => any) | undefined;
-            ref_for?: boolean | undefined;
-            ref_key?: string | undefined;
-            onVnodeBeforeMount?: ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeMounted?: ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeBeforeUpdate?: ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeUpdated?: ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, oldVNode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeBeforeUnmount?: ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            onVnodeUnmounted?: ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void) | ((vnode: globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>) => void)[] | undefined;
-            readonly loading?: "eager" | "lazy" | undefined;
-            onClose?: ((...args: any[]) => any) | undefined;
-            readonly src?: string | undefined;
-            readonly infinite?: boolean | undefined;
-            readonly initialIndex?: number | undefined;
-            readonly hideOnClickModal?: boolean | undefined;
-            readonly closeOnPressEscape?: boolean | undefined;
-            onSwitch?: ((...args: any[]) => any) | undefined;
-            readonly lazy?: boolean | undefined;
-            readonly fit?: import("./types").ImgFitType | undefined;
-            readonly scrollContainer?: string | HTMLElement | undefined;
-            readonly previewSrcList?: string[] | undefined;
-            readonly previewTeleported?: boolean | undefined;
-        };
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }>;
-        $root: globalThis.ComponentPublicInstance | null;
-        $parent: globalThis.ComponentPublicInstance | null;
-        $emit: ((event: "switch", ...args: any[]) => void) & ((event: "close", ...args: any[]) => void) & ((event: "error", ...args: any[]) => void) & ((event: "load", ...args: any[]) => void) & ((event: "show", ...args: any[]) => void);
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<globalThis.ExtractPropTypes<{
-            hideOnClickModal: {
-                type: globalThis.PropType<boolean>;
-            };
-            src: {
-                type: globalThis.PropType<string>;
-            };
-            fit: {
-                type: globalThis.PropType<import("./types").ImgFitType>;
-            };
-            loading: {
-                type: globalThis.PropType<"eager" | "lazy">;
-            };
-            lazy: {
-                type: globalThis.PropType<boolean>;
-            };
-            scrollContainer: {
-                type: globalThis.PropType<string | HTMLElement>;
-            };
-            previewSrcList: {
-                type: globalThis.PropType<string[]>;
-            };
-            previewTeleported: {
-                type: globalThis.PropType<boolean>;
-            };
-            zIndex: {
-                type: globalThis.PropType<number>;
-            };
-            initialIndex: {
-                type: globalThis.PropType<number>;
-            };
-            infinite: {
-                type: globalThis.PropType<boolean>;
-            };
-            closeOnPressEscape: {
-                type: globalThis.PropType<boolean>;
-            };
-        }>> & {
-            onShow?: ((...args: any[]) => any) | undefined;
-            onLoad?: ((...args: any[]) => any) | undefined;
-            onError?: ((...args: any[]) => any) | undefined;
-            onClose?: ((...args: any[]) => any) | undefined;
-            onSwitch?: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            switch: (...args: any[]) => void;
-            close: (...args: any[]) => void;
-            error: (...args: any[]) => void;
-            load: (...args: any[]) => void;
-            show: (...args: any[]) => void;
-        }, string, {}, {}, string, {}> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: globalThis.ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: globalThis.ComponentPublicInstance | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<globalThis.ExtractPropTypes<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<globalThis.ExtractPropTypes<{
         hideOnClickModal: {
             type: globalThis.PropType<boolean>;
         };
@@ -185,12 +37,111 @@ export declare const VftImage: import("vft/es/utils").SFCWithInstall<{
             type: globalThis.PropType<boolean>;
         };
     }>> & {
-        onShow?: ((...args: any[]) => any) | undefined;
+        onClose?: ((...args: any[]) => any) | undefined;
+        onError?: ((...args: any[]) => any) | undefined;
         onLoad?: ((...args: any[]) => any) | undefined;
+        onShow?: ((...args: any[]) => any) | undefined;
+        onSwitch?: ((...args: any[]) => any) | undefined;
+    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        switch: (...args: any[]) => void;
+        close: (...args: any[]) => void;
+        error: (...args: any[]) => void;
+        load: (...args: any[]) => void;
+        show: (...args: any[]) => void;
+    }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<globalThis.ExtractPropTypes<{
+        hideOnClickModal: {
+            type: globalThis.PropType<boolean>;
+        };
+        src: {
+            type: globalThis.PropType<string>;
+        };
+        fit: {
+            type: globalThis.PropType<import("./types").ImgFitType>;
+        };
+        loading: {
+            type: globalThis.PropType<"eager" | "lazy">;
+        };
+        lazy: {
+            type: globalThis.PropType<boolean>;
+        };
+        scrollContainer: {
+            type: globalThis.PropType<string | HTMLElement>;
+        };
+        previewSrcList: {
+            type: globalThis.PropType<string[]>;
+        };
+        previewTeleported: {
+            type: globalThis.PropType<boolean>;
+        };
+        zIndex: {
+            type: globalThis.PropType<number>;
+        };
+        initialIndex: {
+            type: globalThis.PropType<number>;
+        };
+        infinite: {
+            type: globalThis.PropType<boolean>;
+        };
+        closeOnPressEscape: {
+            type: globalThis.PropType<boolean>;
+        };
+    }>> & {
+        onClose?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onLoad?: ((...args: any[]) => any) | undefined;
+        onShow?: ((...args: any[]) => any) | undefined;
+        onSwitch?: ((...args: any[]) => any) | undefined;
+    }, {}, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<globalThis.ExtractPropTypes<{
+        hideOnClickModal: {
+            type: globalThis.PropType<boolean>;
+        };
+        src: {
+            type: globalThis.PropType<string>;
+        };
+        fit: {
+            type: globalThis.PropType<import("./types").ImgFitType>;
+        };
+        loading: {
+            type: globalThis.PropType<"eager" | "lazy">;
+        };
+        lazy: {
+            type: globalThis.PropType<boolean>;
+        };
+        scrollContainer: {
+            type: globalThis.PropType<string | HTMLElement>;
+        };
+        previewSrcList: {
+            type: globalThis.PropType<string[]>;
+        };
+        previewTeleported: {
+            type: globalThis.PropType<boolean>;
+        };
+        zIndex: {
+            type: globalThis.PropType<number>;
+        };
+        initialIndex: {
+            type: globalThis.PropType<number>;
+        };
+        infinite: {
+            type: globalThis.PropType<boolean>;
+        };
+        closeOnPressEscape: {
+            type: globalThis.PropType<boolean>;
+        };
+    }>> & {
         onClose?: ((...args: any[]) => any) | undefined;
+        onError?: ((...args: any[]) => any) | undefined;
+        onLoad?: ((...args: any[]) => any) | undefined;
+        onShow?: ((...args: any[]) => any) | undefined;
         onSwitch?: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    }, {}, {}, {}, {}, {}>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
@@ -232,10 +183,10 @@ export declare const VftImage: import("vft/es/utils").SFCWithInstall<{
         type: globalThis.PropType<boolean>;
     };
 }>> & {
-    onShow?: ((...args: any[]) => any) | undefined;
-    onLoad?: ((...args: any[]) => any) | undefined;
-    onError?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
     onSwitch?: ((...args: any[]) => any) | undefined;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     switch: (...args: any[]) => void;
@@ -274,7 +225,7 @@ export declare const VftPImage: import("vft/es/utils").SFCWithInstall<import("vu
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (e: Event) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
+}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
     src: {
         type: globalThis.PropType<string>;
     };

package/lib/components/image/p-image.vue.d.ts

@@ -1,51 +1,25 @@
-import type { ImgFitType } from './types';
-declare const _default: import("vue").DefineComponent<{
-    src: {
-        type: globalThis.PropType<string>;
-    };
-    alt: {
-        type: globalThis.PropType<string>;
-    };
-    fit: {
-        type: globalThis.PropType<ImgFitType>;
-    };
-    position: {
-        type: globalThis.PropType<string>;
-    };
-    width: {
-        type: globalThis.PropType<string | number>;
-    };
-    height: {
-        type: globalThis.PropType<string | number>;
-    };
-    radius: {
-        type: globalThis.PropType<string | number>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { ImgFitType, ImagePosition } from './types';
+interface IpImageProps {
+    src?: string;
+    alt?: string;
+    fit?: ImgFitType;
+    position?: ImagePosition;
+    width?: number | string;
+    height?: number | string;
+    radius?: number | string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<IpImageProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (e: Event) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
-    src: {
-        type: globalThis.PropType<string>;
-    };
-    alt: {
-        type: globalThis.PropType<string>;
-    };
-    fit: {
-        type: globalThis.PropType<ImgFitType>;
-    };
-    position: {
-        type: globalThis.PropType<string>;
-    };
-    width: {
-        type: globalThis.PropType<string | number>;
-    };
-    height: {
-        type: globalThis.PropType<string | number>;
-    };
-    radius: {
-        type: globalThis.PropType<string | number>;
-    };
-}>> & {
+}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps<IpImageProps>>> & {
     onError?: ((e: Event) => any) | undefined;
 }, {}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=require("@vft/utils");require("@vueuse/core");require("../../utils/ns-cover.cjs");require("lodash");const d=require("../../hooks/use-namespace/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const m=["src"],f=e.defineComponent({__name:"p-image",props:{src:{},alt:{},fit:{},position:{},width:{},height:{},radius:{}},emits:["error"],setup(t,{emit:o}){const s=d.useNamespace("p-image"),n=e.ref(!1),a=e.ref(),l=e.computed(()=>{const r={width:i.addUnit(t.width),height:i.addUnit(t.height)};return i.isNullOrUndefined(t.radius)||(r.overflow="hidden",r.borderRadius=i.addUnit(t.radius)),r});e.watch(()=>t.src,()=>{n.value=!1});const u=r=>{n.value=!0,o("error",r)},c={alt:t.alt,class:s.e("img"),style:{objectFit:t.fit,objectPosition:t.position}};return(r,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s).b()),style:e.normalizeStyle(l.value)},[e.createElementVNode("img",e.mergeProps({ref_key:"imageRef",ref:a,src:r.src,onError:u},c),null,16,m)],6))}});exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=require("@vft/utils");require("@vueuse/core");require("../../utils/ns-cover.cjs");require("lodash");const m=require("../../hooks/use-namespace/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const f=["src"],g=e.defineComponent({__name:"p-image",props:{src:{},alt:{},fit:{},position:{},width:{},height:{},radius:{}},emits:["error"],setup(t,{emit:o}){const a=o,s=m.useNamespace("p-image"),n=e.ref(!1),c=e.ref(),l=e.computed(()=>{const r={width:i.addUnit(t.width),height:i.addUnit(t.height)};return i.isNullOrUndefined(t.radius)||(r.overflow="hidden",r.borderRadius=i.addUnit(t.radius)),r});e.watch(()=>t.src,()=>{n.value=!1});const u=r=>{n.value=!0,a("error",r)},d={alt:t.alt,class:s.e("img"),style:{objectFit:t.fit,objectPosition:t.position}};return(r,h)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s).b()),style:e.normalizeStyle(l.value)},[e.createElementVNode("img",e.mergeProps({ref_key:"imageRef",ref:c,src:r.src,onError:u},d),null,16,f)],6))}});exports.default=g;

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

@@ -9,69 +9,28 @@ export interface ImageViewerProps {
     zoomRate?: number;
 }
 declare function setActiveItem(index: number): void;
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    urlList: {
-        type: globalThis.PropType<string[]>;
-    };
-    zIndex: {
-        type: globalThis.PropType<number>;
-    };
-    initialIndex: {
-        type: globalThis.PropType<number>;
-    };
-    infinite: {
-        type: globalThis.PropType<boolean>;
-    };
-    hideOnClickModal: {
-        type: globalThis.PropType<boolean>;
-    };
-    teleported: {
-        type: globalThis.PropType<boolean>;
-    };
-    closeOnPressEscape: {
-        type: globalThis.PropType<boolean>;
-    };
-    zoomRate: {
-        type: globalThis.PropType<number>;
-    };
-}, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<ImageViewerProps>, {
     /** @description manually switch image */
     setActiveItem: typeof setActiveItem;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     switch: (index: number) => void;
     close: () => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
-    urlList: {
-        type: globalThis.PropType<string[]>;
-    };
-    zIndex: {
-        type: globalThis.PropType<number>;
-    };
-    initialIndex: {
-        type: globalThis.PropType<number>;
-    };
-    infinite: {
-        type: globalThis.PropType<boolean>;
-    };
-    hideOnClickModal: {
-        type: globalThis.PropType<boolean>;
-    };
-    teleported: {
-        type: globalThis.PropType<boolean>;
-    };
-    closeOnPressEscape: {
-        type: globalThis.PropType<boolean>;
-    };
-    zoomRate: {
-        type: globalThis.PropType<number>;
-    };
-}>> & {
+}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ImageViewerProps>>> & {
     onClose?: (() => any) | undefined;
     onSwitch?: ((index: number) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=require("@vft/constants"),O=require("@vft/utils"),f=require("../icon/index.cjs"),b=require("@vueuse/core");require("../../utils/ns-cover.cjs");const z=require("lodash"),P=require("../../hooks/use-namespace/index.cjs");require("@popperjs/core");const Z=require("../../hooks/use-z-index/index.cjs"),A=["src"],a=P.useNamespace("image-viewer"),j=e.defineComponent({name:a.b()}),W=e.defineComponent({...j,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:B,emit:C}){const{nextZIndex:D}=Z.useZIndex(),g=e.ref(),N=e.ref([]),w=e.effectScope(),m=e.ref(!0),u=e.ref(r.initialIndex),s=e.ref({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),$=e.computed(()=>r.urlList.length<=1),h=e.computed(()=>u.value===0),I=e.computed(()=>u.value===r.urlList.length-1),q=e.computed(()=>r.urlList[u.value]),M=e.computed(()=>{const{scale:n,deg:t,offsetX:o,offsetY:l,enableTransition:E}=s.value;let i=o/n,c=l/n;switch(t%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(${n}) rotate(${t}deg) translate(${i}px, ${c}px)`,transition:E?"transform .3s":""};return v.maxWidth=v.maxHeight="100%",v}),X=e.computed(()=>O.isNumber(r.zIndex)?r.zIndex:D());function V(){S(),C("close")}function Y(){const n=z.throttle(o=>{switch(o.code){case k.EVENT_CODE.esc:r.closeOnPressEscape&&V();break;case k.EVENT_CODE.space:T();break;case k.EVENT_CODE.left:y();break;case k.EVENT_CODE.up:d("zoomIn");break;case k.EVENT_CODE.right:L();break;case k.EVENT_CODE.down:d("zoomOut");break}}),t=z.throttle(o=>{const l=o.deltaY||o.deltaX;d(l<0?"zoomIn":"zoomOut",{zoomRate:r.zoomRate,enableTransition:!1})});w.run(()=>{b.useEventListener(document,"keydown",n),b.useEventListener(document,"wheel",t)})}function S(){w.stop()}function F(){m.value=!1}function R(n){m.value=!1,n.target.alt="加载失败"}function H(n){if(m.value||n.button!==0||!g.value)return;s.value.enableTransition=!1;const{offsetX:t,offsetY:o}=s.value,l=n.pageX,E=n.pageY,i=z.throttle(v=>{s.value={...s.value,offsetX:t+v.pageX-l,offsetY:o+v.pageY-E}}),c=b.useEventListener(document,"mousemove",i);b.useEventListener(document,"mouseup",()=>{c()}),n.preventDefault()}function x(){s.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function T(){m.value||x()}function p(n){const t=r.urlList.length;u.value=(n+t)%t}function y(){h.value&&!r.infinite||p(u.value-1)}function L(){I.value&&!r.infinite||p(u.value+1)}function d(n,t={}){if(m.value)return;const{rotateDeg:o,enableTransition:l}={rotateDeg:90,enableTransition:!0,...t};switch(n){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(q,()=>{e.nextTick(()=>{const n=N.value[0];n!=null&&n.complete||(m.value=!0)})}),e.watch(u,n=>{x(),C("switch",n)}),e.onMounted(()=>{var n,t;Y(),(t=(n=g.value)==null?void 0:n.focus)==null||t.call(n)}),B({setActiveItem:p}),(n,t)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body",disabled:!n.teleported},[e.createVNode(e.Transition,{name:"viewer-fade",appear:""},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"wrapper",ref:g,tabindex:-1,class:e.normalizeClass(e.unref(a).e("wrapper")),style:e.normalizeStyle({zIndex:X.value})},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).e("mask")),onClick:t[0]||(t[0]=e.withModifiers(o=>n.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),$.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",!n.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",!n.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:t[1]||(t[1]=o=>d("zoomOut"))}),e.createVNode(e.unref(f.VftIcon),{icon:"icon-zoom-in",onClick:t[2]||(t[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:t[3]||(t[3]=o=>d("anticlockwise"))}),e.createVNode(e.unref(f.VftIcon),{icon:"icon-refresh-right",onClick:t[4]||(t[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(n.urlList,(o,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("img",{ref_for:!0,ref:E=>N.value[l]=E,key:o,src:o,style:e.normalizeStyle(M.value),class:e.normalizeClass(e.unref(a).e("img")),onLoad:F,onError:R,onMousedown:H},null,46,A)),[[e.vShow,l===u.value]])),128))],2),e.renderSlot(n.$slots,"default")],6)]),_:3})],8,["disabled"]))}});exports.default=W;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=require("@vft/constants"),O=require("@vft/utils"),f=require("../icon/index.cjs"),b=require("@vueuse/core");require("../../utils/ns-cover.cjs");const z=require("lodash"),Z=require("../../hooks/use-namespace/index.cjs");require("@popperjs/core");const A=require("../../hooks/use-z-index/index.cjs"),j=["src"],a=Z.useNamespace("image-viewer"),W=e.defineComponent({name:a.b()}),G=e.defineComponent({...W,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:B,emit:D}){const C=D,{nextZIndex:$}=A.useZIndex(),g=e.ref(),N=e.ref([]),w=e.effectScope(),m=e.ref(!0),u=e.ref(r.initialIndex),s=e.ref({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),q=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:E}=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:E?"transform .3s":""};return v.maxWidth=v.maxHeight="100%",v}),Y=e.computed(()=>O.isNumber(r.zIndex)?r.zIndex:$());function V(){F(),C("close")}function S(){const t=z.throttle(o=>{switch(o.code){case k.EVENT_CODE.esc:r.closeOnPressEscape&&V();break;case k.EVENT_CODE.space:T();break;case k.EVENT_CODE.left:y();break;case k.EVENT_CODE.up:d("zoomIn");break;case k.EVENT_CODE.right:L();break;case k.EVENT_CODE.down:d("zoomOut");break}}),n=z.throttle(o=>{const l=o.deltaY||o.deltaX;d(l<0?"zoomIn":"zoomOut",{zoomRate:r.zoomRate,enableTransition:!1})});w.run(()=>{b.useEventListener(document,"keydown",t),b.useEventListener(document,"wheel",n)})}function F(){w.stop()}function R(){m.value=!1}function H(t){m.value=!1,t.target.alt="加载失败"}function P(t){if(m.value||t.button!==0||!g.value)return;s.value.enableTransition=!1;const{offsetX:n,offsetY:o}=s.value,l=t.pageX,E=t.pageY,i=z.throttle(v=>{s.value={...s.value,offsetX:n+v.pageX-l,offsetY:o+v.pageY-E}}),c=b.useEventListener(document,"mousemove",i);b.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(()=>{const t=N.value[0];t!=null&&t.complete||(m.value=!0)})}),e.watch(u,t=>{x(),C("switch",t)}),e.onMounted(()=>{var t,n;S(),(n=(t=g.value)==null?void 0:t.focus)==null||n.call(t)}),B({setActiveItem:p}),(t,n)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body",disabled:!t.teleported},[e.createVNode(e.Transition,{name:"viewer-fade",appear:""},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"wrapper",ref:g,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),q.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:E=>N.value[l]=E,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,j)),[[e.vShow,l===u.value]])),128))],2),e.renderSlot(t.$slots,"default")],6)]),_:3})],8,["disabled"]))}});exports.default=G;