all-viewer 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import { default as allViewer } from '../packages/index';
+import { App } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { FileItem } from '../packages/index';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+
+export { allViewer }
+
+declare const _default: {
+    install: (app: App) => void;
+    allViewer: DefineComponent<ExtractPropTypes<{
+        urlList: {
+            type: PropType< FileItem[]>;
+            required: true;
+        };
+        initialIndex: {
+            type: NumberConstructor;
+            default: number;
+        };
+        zIndex: {
+            type: NumberConstructor;
+            default: number;
+        };
+        infinite: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        hideOnClickModal: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+        switch: (index: number) => any;
+        close: () => any;
+    }, string, PublicProps, Readonly< ExtractPropTypes<{
+        urlList: {
+            type: PropType< FileItem[]>;
+            required: true;
+        };
+        initialIndex: {
+            type: NumberConstructor;
+            default: number;
+        };
+        zIndex: {
+            type: NumberConstructor;
+            default: number;
+        };
+        infinite: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        hideOnClickModal: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onSwitch?: ((index: number) => any) | undefined;
+        onClose?: (() => any) | undefined;
+    }>, {
+        initialIndex: number;
+        zIndex: number;
+        infinite: boolean;
+        hideOnClickModal: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, true, {
+        wrapper: HTMLDivElement;
+        media: HTMLVideoElement;
+    }, any>;
+};
+export default _default;
+
+export { FileItem }
+
+export { }

package/dist/index.js

@@ -1 +1 @@
-import{resolveComponent as e,openBlock as a,createBlock as l,Transition as i,withCtx as n,createElementVNode as o,normalizeStyle as t,withModifiers as r,createElementBlock as s,Fragment as c,normalizeClass as u,createCommentVNode as v,renderList as d,withDirectives as f,vShow as m,ref as w,computed as g,watch as p,nextTick as x,onMounted as _}from"vue";import L from"@vue-office/docx";import"@vue-office/docx/lib/index.css";import M from"@vue-office/excel";import"@vue-office/excel/lib/index.css";import b from"@vue-office/pdf";var k=(e,a)=>{const l=e.__vccOpts||e;for(const[i,n]of a)l[i]=n;return l};const z="Space",y="ArrowLeft",A="ArrowUp",C="ArrowRight",V="ArrowDown",O="Escape",E=function(e){let a=!1;return function(...l){a||(a=!0,window.requestAnimationFrame(()=>{e.apply(this,l),a=!1}))}},I={CONTAIN:{name:"contain",icon:"av-icon-full-screen"},ORIGINAL:{name:"original",icon:"av-icon-c-scale-to-original"}},D=window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel",T="close",B="switch",S={name:"all-viewer",components:{VueOfficeDocx:L,VueOfficeExcel:M,VueOfficePdf:b},props:{urlList:{type:Array,default:()=>[]},zIndex:{type:Number,default:2e3},initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},hideOnClickModal:{type:Boolean,default:!1}},emits:[T,B],setup(e,{emit:a}){let l=null,i=null,n=null;const o=w(!0),t=w(e.initialIndex),r=w(null),s=w(null),c=w(I.CONTAIN),u=w({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),v=g(()=>{const{urlList:a}=e;return a.length<=1}),d=g(()=>0===t.value),f=g(()=>t.value===e.urlList.length-1),m=g(()=>e.urlList[t.value]);const L=g(()=>{const{scale:e,deg:a,offsetX:l,offsetY:i,enableTransition:n}=u.value,o={transform:`scale(${e}) rotate(${a}deg)`,transition:n?"transform .3s":"",marginLeft:`${l}px`,marginTop:`${i}px`};return c.value.name===I.CONTAIN.name&&(o.maxWidth=o.maxHeight="100%"),o});function M(){document.removeEventListener("keydown",l,!1),document.removeEventListener(D,i,!1),l=null,i=null,a(T)}function b(){u.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function k(){if(o.value)return;const e=Object.keys(I),a=Object.values(I),l=c.value.name,i=(a.findIndex(e=>e.name===l)+1)%e.length;c.value=I[e[i]],b()}function S(){if(d.value&&!e.infinite)return;const a=e.urlList.length;t.value=(t.value-1+a)%a}function N(){if(f.value&&!e.infinite)return;const a=e.urlList.length;t.value=(t.value+1)%a}function H(e,a={}){if(o.value)return;const{zoomRate:l,rotateDeg:i,enableTransition:n}={zoomRate:.2,rotateDeg:90,enableTransition:!0,...a};switch(e){case"zoomOut":u.value.scale>.2&&(u.value.scale=parseFloat((u.value.scale-l).toFixed(3)));break;case"zoomIn":u.value.scale=parseFloat((u.value.scale+l).toFixed(3));break;case"clocelise":u.value.deg+=i;break;case"anticlocelise":u.value.deg-=i}u.value.enableTransition=n}return p(m,()=>{x(()=>{s.value.complete||(o.value=!0)})}),p(t,e=>{b(),a(B,e)}),_(()=>{l=E(e=>{switch(e.code){case O:M();break;case z:k();break;case y:S();break;case A:H("zoomIn");break;case C:N();break;case V:H("zoomOut")}}),i=E(e=>{H((e.wheelDelta?e.wheelDelta:-e.detail)>0?"zoomIn":"zoomOut",{zoomRate:.015,enableTransition:!1})}),document.addEventListener("keydown",l,!1),document.addEventListener(D,i,!1),r.value?.focus?.()}),{index:t,wrapper:r,media:s,isSingle:v,isFirst:d,isLast:f,currentMedia:m,isImage:function(e){return 1==e.file_typeid},isVideo:function(e){return 2==e.file_typeid},isDoc:function(e){return 3==e.file_typeid},getSuff:function(e){let a=e.url.split("?")[0].split(".");return a[a.length-1]},mediaStyle:L,mode:c,handleActions:H,prev:S,next:N,hide:M,toggleMode:k,handleMediaLoad:function(){o.value=!1},handleMediaError:function(e){o.value=!1},handleMouseDown:function(e){if(o.value||0!==e.button)return;const{offsetX:a,offsetY:l}=u.value,i=e.pageX,t=e.pageY,s=r.value.clientLeft,c=r.value.clientLeft+r.value.clientWidth,v=r.value.clientTop,d=r.value.clientTop+r.value.clientHeight;n=E(e=>{u.value={...u.value,offsetX:a+e.pageX-i,offsetY:l+e.pageY-t}}),document.addEventListener("mousemove",n,!1),document.addEventListener("mouseup",e=>{const a=e.pageX,l=e.pageY;(a<s||a>c||l<v||l>d)&&b(),document.removeEventListener("mousemove",n,!1)},!1),e.preventDefault()}}}},N={key:1,class:"av-image-viewer__btn av-image-viewer__actions"},H={class:"av-image-viewer__actions__inner"},X={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},Y={key:1,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},F={class:"av-image-viewer__canvas"},R=["src"],$=["src"];var j=/* @__PURE__ */k(S,[["render",function(w,g,p,x,_,L){const M=e("VueOfficeDocx"),b=e("VueOfficeExcel"),k=e("VueOfficePdf");return a(),l(i,{name:"viewer-fade"},{default:n(()=>[o("div",{ref:"wrapper",tabindex:-1,class:"av-image-viewer__wrapper",style:t({zIndex:p.zIndex})},[o("div",{class:"av-image-viewer__mask",onClick:g[0]||(g[0]=r(e=>p.hideOnClickModal&&x.hide(),["self"]))}),o("span",{class:"av-image-viewer__btn av-image-viewer__close",onClick:g[1]||(g[1]=(...e)=>x.hide&&x.hide(...e))},[...g[15]||(g[15]=[o("i",{class:"av-icon close"},[o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[o("path",{fill:"currentColor",d:"M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"})])],-1)])]),x.isSingle?v("",!0):(a(),s(c,{key:0},[o("span",{class:u(["av-image-viewer__btn av-image-viewer__prev",{"is-disabled":!p.infinite&&x.isFirst}]),onClick:g[2]||(g[2]=(...e)=>x.prev&&x.prev(...e))},[...g[16]||(g[16]=[o("i",{class:"av-icon left-arrow"},[o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[o("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"})])],-1)])],2),o("span",{class:u(["av-image-viewer__btn av-image-viewer__next",{"is-disabled":!p.infinite&&x.isLast}]),onClick:g[3]||(g[3]=(...e)=>x.next&&x.next(...e))},[...g[17]||(g[17]=[o("i",{class:"av-icon right-arrow"},[o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[o("path",{fill:"currentColor",d:"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"})])],-1)])],2)],64)),1==p.urlList[x.index].file_typeid?(a(),s("div",N,[o("div",H,[o("i",{class:"av-icon zoom-out",onClick:g[4]||(g[4]=e=>x.handleActions("zoomOut"))},[...g[18]||(g[18]=[o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[o("path",{fill:"currentColor",d:"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704M352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64"})],-1)])]),o("i",{class:"av-icon zoom-in",onClick:g[5]||(g[5]=e=>x.handleActions("zoomIn"))},[...g[19]||(g[19]=[o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[o("path",{fill:"currentColor",d:"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704m-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64z"})],-1)])]),g[24]||(g[24]=o("i",{class:"av-image-viewer__actions__divider"},null,-1)),o("i",{class:"av-icon",onClick:g[6]||(g[6]=(...e)=>x.toggleMode&&x.toggleMode(...e))},[x.mode.icon.includes("full-screen")?(a(),s("svg",X,[...g[20]||(g[20]=[o("path",{fill:"currentColor",d:"m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64z"},null,-1)])])):(a(),s("svg",Y,[...g[21]||(g[21]=[o("path",{fill:"currentColor",d:"M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118M512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412M512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512"},null,-1)])]))]),g[25]||(g[25]=o("i",{class:"av-image-viewer__actions__divider"},null,-1)),o("i",{class:"av-icon refresh-left",onClick:g[7]||(g[7]=e=>x.handleActions("anticlocelise"))},[...g[22]||(g[22]=[o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[o("path",{fill:"currentColor",d:"M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"})],-1)])]),o("i",{class:"av-icon refresh-right",onClick:g[8]||(g[8]=e=>x.handleActions("clocelise"))},[...g[23]||(g[23]=[o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[o("path",{fill:"currentColor",d:"M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"})],-1)])])])])):v("",!0),o("div",F,[(a(!0),s(c,null,d(p.urlList,(e,i)=>(a(),s("div",null,[x.isImage(e)?f((a(),s("img",{ref_for:!0,ref:"media",key:e.url,src:e.url.replaceAll("//","/").replace(":/","://"),style:t(x.mediaStyle),class:"av-image-viewer__img",onLoad:g[9]||(g[9]=(...e)=>x.handleMediaLoad&&x.handleMediaLoad(...e)),onError:g[10]||(g[10]=(...e)=>x.handleMediaError&&x.handleMediaError(...e)),onMousedown:g[11]||(g[11]=(...e)=>x.handleMouseDown&&x.handleMouseDown(...e))},null,44,R)),[[m,i===x.index]]):v("",!0),x.isVideo(e)?f((a(),s("video",{controls:"controls",key:e.url,ref_for:!0,ref:"media",src:e.url.replaceAll("//","/").replace(":/","://"),style:t(x.mediaStyle),class:"av-image-viewer__img",onCanplay:g[12]||(g[12]=(...e)=>x.handleMediaLoad&&x.handleMediaLoad(...e)),onError:g[13]||(g[13]=(...e)=>x.handleMediaError&&x.handleMediaError(...e)),onMousedown:g[14]||(g[14]=(...e)=>x.handleMouseDown&&x.handleMouseDown(...e))},null,44,$)),[[m,i===x.index]]):v("",!0),["doc","docx"].includes(x.getSuff(e))?f((a(),l(M,{class:"wdbox",key:e.url,src:e.url.replaceAll("//","/").replace(":/","://")},null,8,["src"])),[[m,i===x.index]]):v("",!0),["xlsx","xls"].includes(x.getSuff(e))?f((a(),l(b,{class:"wdbox",key:e.url,src:e.url.replaceAll("//","/").replace(":/","://")},null,8,["src"])),[[m,i===x.index]]):v("",!0),"pdf"===x.getSuff(e)?f((a(),l(k,{class:"wdbox",key:e.url,src:e.url.replaceAll("//","/").replace(":/","://")},null,8,["src"])),[[m,i===x.index]]):v("",!0)]))),256))])],4)]),_:1})}]]);var P={install:e=>{e.component("allViewer",j)},allViewer:j};export{j as allViewer,P as default};
+import{defineComponent as e,ref as a,computed as l,watch as i,nextTick as n,onMounted as t,openBlock as o,createBlock as r,Transition as s,withCtx as c,createElementVNode as u,normalizeStyle as v,withModifiers as f,createElementBlock as d,Fragment as m,normalizeClass as w,createCommentVNode as g,renderList as p,withDirectives as _,vShow as x,unref as k}from"vue";import b from"@vue-office/docx";import"@vue-office/docx/lib/index.css";import L from"@vue-office/excel";import"@vue-office/excel/lib/index.css";import y from"@vue-office/pdf";const z={key:1,class:"av-image-viewer__btn av-image-viewer__actions"},C={class:"av-image-viewer__actions__inner"},I={class:"av-image-viewer__canvas"},M=["src"],O=["src"];var A=/* @__PURE__ */e({__name:"index",props:{urlList:{type:Array,required:!0},initialIndex:{type:Number,default:0},zIndex:{type:Number,default:2e3},infinite:{type:Boolean,default:!0},hideOnClickModal:{type:Boolean,default:!1}},emits:["switch","close"],setup(e,{emit:A}){const T=e,E="Space",B="ArrowLeft",N="ArrowUp",X="ArrowRight",Y="ArrowDown",D="Escape",F=function(e){let a=!1;return function(...l){a||(a=!0,window.requestAnimationFrame(()=>{e(...l),a=!1}))}},H={CONTAIN:{name:"contain",icon:"av-icon-full-screen"},ORIGINAL:{name:"original",icon:"av-icon-c-scale-to-original"}},R=window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel",V=A;let $=null,j=null,q=null;const S=a(!0),W=a(T.initialIndex),G=a(null),U=a(null),J=a(H.CONTAIN),K=a({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),P=l(()=>{const{urlList:e}=T;return e.length<=1}),Q=l(()=>0===W.value),Z=l(()=>W.value===T.urlList.length-1),ee=l(()=>T.urlList[W.value]);function ae(e){return 2==e.file_typeid}function le(e){let a=e.url.split("?")[0].split(".");return a[a.length-1]}const ie=l(()=>{const{scale:e,deg:a,offsetX:l,offsetY:i,enableTransition:n}=K.value,t={transform:`scale(${e}) rotate(${a}deg)`,transition:n?"transform .3s":"",marginLeft:`${l}px`,marginTop:`${i}px`};return J.value.name===H.CONTAIN.name&&(t.maxWidth=t.maxHeight="100%"),t});function ne(){document.removeEventListener("keydown",$,!1),document.removeEventListener(R,j,!1),$=null,j=null,V("close")}function te(){$=F(e=>{switch(e.code){case D:ne();break;case E:!function(){if(S.value)return;const e=Object.keys(H),a=Object.values(H),l=J.value.name,i=(a.findIndex(e=>e.name===l)+1)%e.length;J.value=H[e[i]],ce()}();break;case B:ue();break;case N:fe("zoomIn");break;case X:ve();break;case Y:fe("zoomOut")}}),j=F(e=>{fe((e.wheelDelta?e.wheelDelta:-e.detail)>0?"zoomIn":"zoomOut",{zoomRate:.015,enableTransition:!1})}),document.addEventListener("keydown",$,!1),document.addEventListener(R,j,!1)}function oe(){S.value=!1}function re(){S.value=!1}function se(e){if(S.value||0!==e.button)return;const{offsetX:a,offsetY:l}=K.value,i=e.pageX,n=e.pageY,t=G.value.clientLeft,o=G.value.clientLeft+G.value.clientWidth,r=G.value.clientTop,s=G.value.clientTop+G.value.clientHeight;q=F(e=>{K.value={...K.value,offsetX:a+e.pageX-i,offsetY:l+e.pageY-n}}),document.addEventListener("mousemove",q,!1),document.addEventListener("mouseup",e=>{const a=e.pageX,l=e.pageY;(a<t||a>o||l<r||l>s)&&ce(),document.removeEventListener("mousemove",q,!1)},!1),e.preventDefault()}function ce(){K.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function ue(){if(Q.value&&!T.infinite)return;const e=T.urlList.length;W.value=(W.value-1+e)%e}function ve(){if(Z.value&&!T.infinite)return;const e=T.urlList.length;W.value=(W.value+1)%e}function fe(e,a={}){if(S.value)return;const l=a?.zoomRate??.2,i=a?.rotateDeg??90,n=a?.enableTransition??!0;switch(e){case"zoomOut":K.value.scale>.2&&(K.value.scale=parseFloat((K.value.scale-l).toFixed(3)));break;case"zoomIn":K.value.scale=parseFloat((K.value.scale+l).toFixed(3));break;case"clocelise":K.value.deg+=i;break;case"anticlocelise":K.value.deg-=i}K.value.enableTransition=n}return i(ee,()=>{n(()=>{U.value.complete||(S.value=!0)})}),i(W,e=>{ce(),V("switch",e)}),t(()=>{te(),G.value?.focus?.()}),(a,l)=>(o(),r(s,{name:"viewer-fade"},{default:c(()=>[u("div",{ref_key:"wrapper",ref:G,tabindex:-1,class:"av-image-viewer__wrapper",style:v({zIndex:e.zIndex})},[u("div",{class:"av-image-viewer__mask",onClick:l[0]||(l[0]=f(a=>e.hideOnClickModal&&ne(),["self"]))}),u("span",{class:"av-image-viewer__btn av-image-viewer__close",onClick:ne},[...l[5]||(l[5]=[u("i",{class:"av-icon close"},[u("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[u("path",{fill:"currentColor",d:"M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"})])],-1)])]),P.value?g("",!0):(o(),d(m,{key:0},[u("span",{class:w(["av-image-viewer__btn av-image-viewer__prev",{"is-disabled":!e.infinite&&Q.value}]),onClick:ue},[...l[6]||(l[6]=[u("i",{class:"av-icon left-arrow"},[u("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[u("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"})])],-1)])],2),u("span",{class:w(["av-image-viewer__btn av-image-viewer__next",{"is-disabled":!e.infinite&&Z.value}]),onClick:ve},[...l[7]||(l[7]=[u("i",{class:"av-icon right-arrow"},[u("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[u("path",{fill:"currentColor",d:"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"})])],-1)])],2)],64)),1==e.urlList[W.value].file_typeid?(o(),d("div",z,[u("div",C,[u("i",{class:"av-icon zoom-out",onClick:l[1]||(l[1]=e=>fe("zoomOut"))},[...l[8]||(l[8]=[u("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[u("path",{fill:"currentColor",d:"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704M352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64"})],-1)])]),u("i",{class:"av-icon zoom-in",onClick:l[2]||(l[2]=e=>fe("zoomIn"))},[...l[9]||(l[9]=[u("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[u("path",{fill:"currentColor",d:"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704m-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64z"})],-1)])]),l[12]||(l[12]=u("i",{class:"av-image-viewer__actions__divider"},null,-1)),l[13]||(l[13]=u("i",{class:"av-image-viewer__actions__divider"},null,-1)),u("i",{class:"av-icon refresh-left",onClick:l[3]||(l[3]=e=>fe("anticlocelise"))},[...l[10]||(l[10]=[u("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[u("path",{fill:"currentColor",d:"M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"})],-1)])]),u("i",{class:"av-icon refresh-right",onClick:l[4]||(l[4]=e=>fe("clocelise"))},[...l[11]||(l[11]=[u("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[u("path",{fill:"currentColor",d:"M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"})],-1)])])])])):g("",!0),u("div",I,[(o(!0),d(m,null,p(e.urlList,(e,a)=>{return o(),d("div",null,[(l=e,1==l.file_typeid?_((o(),d("img",{ref_for:!0,ref_key:"media",ref:U,key:e.url,src:e.url.replace(/\/\//g,"/").replace(":/","://"),style:v(ie.value),class:"av-image-viewer__img",onLoad:oe,onError:re,onMousedown:se},null,44,M)),[[x,a===W.value]]):g("",!0)),ae(e)?_((o(),d("video",{controls:!0,key:e.url,ref_for:!0,ref_key:"media",ref:U,src:e.url.replace(/\/\//g,"/").replace(":/","://"),style:v(ie.value),class:"av-image-viewer__img",onCanplay:oe,onError:re,onMousedown:se},null,44,O)),[[x,a===W.value]]):g("",!0),["doc","docx"].includes(le(e))?_((o(),r(k(b),{class:"wdbox",key:e.url,src:e.url.replace(/\/\//g,"/").replace(":/","://")},null,8,["src"])),[[x,a===W.value]]):g("",!0),["xlsx","xls"].includes(le(e))?_((o(),r(k(L),{class:"wdbox",key:e.url,src:e.url.replace(/\/\//g,"/").replace(":/","://")},null,8,["src"])),[[x,a===W.value]]):g("",!0),"pdf"===le(e)?_((o(),r(k(y),{class:"wdbox",key:e.url,src:e.url.replace(/\/\//g,"/").replace(":/","://")},null,8,["src"])),[[x,a===W.value]]):g("",!0)]);var l}),256))])],4)]),_:1}))}});var T={install:e=>{e.component("allViewer",A)},allViewer:A};export{A as allViewer,T as default};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "all-viewer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "vue3 图片视频word elsx pdf通用切换预览插件",
   "main": "./dist/index.js",
   "author": "Eric-tu",
   "license": "MIT",
   "private": false,
   "type": "module",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -33,11 +34,11 @@
     "release-major": "npm version major && npm run bap"
   },
   "peerDependencies": {
-    "vue": "^3.5.28",
-    "vue-demi": "^0.14.10",
     "@vue-office/docx": "^1.6.3",
     "@vue-office/excel": "^1.7.14",
-    "@vue-office/pdf": "^2.0.10"
+    "@vue-office/pdf": "^2.0.10",
+    "vue": "^3.5.28",
+    "vue-demi": "^0.14.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.4",
@@ -46,9 +47,11 @@
     "@vue-office/pdf": "^2.0.10",
     "sass-embedded": "^1.97.3",
     "terser": "^5.46.0",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.28",
-    "vue-demi": "^0.14.10"
-  },
-  "dependencies": {}
+    "vue-demi": "^0.14.10",
+    "vue-tsc": "^3.2.5"
+  }
 }

package/readme.md

@@ -0,0 +1,127 @@
+# AllViewer
+
+[![npm version](https://img.shields.io/npm/v/all-viewer.svg)](https://www.npmjs.com/package/all-viewer)
+[![npm downloads](https://img.shields.io/npm/dm/all-viewer.svg)](https://www.npmjs.com/package/all-viewer)
+[![license](https://img.shields.io/npm/l/all-viewer.svg)](https://github.com/yourusername/all-viewer/blob/main/LICENSE)
+
+一个基于 Vue 3 的多格式文件查看器组件，支持 PDF、Excel、Word 文档在线预览。
+
+## ✨ 特性
+
+- 📄 **PDF 预览**：基于 `@vue-office/pdf` 实现
+- 📊 **Excel 预览**：基于 `@vue-office/excel` 实现
+- 📝 **Word 预览**：基于 `@vue-office/docx` 实现
+- 🎯 **Vue 3 支持**：使用 Composition API 开发
+- 📦 **按需引入**：支持按需加载，优化打包体积
+- 🔧 **TypeScript 支持**：提供完整的类型定义
+- 🎨 **自定义主题**：支持通过 CSS 变量定制样式
+
+## 📦 安装
+
+```bash
+# npm
+npm install all-viewer
+
+# yarn
+yarn add all-viewer
+
+# pnpm
+pnpm add all-viewer
+```
+
+## 🚀 快速开始
+
+### 全局注册
+
+```javascript
+// main.js
+import { createApp } from "vue";
+import App from "./App.vue";
+import AllViewer from "all-viewer";
+import "all-viewer/dist/style.css";
+
+const app = createApp(App);
+app.use(AllViewer);
+app.mount("#app");
+```
+
+### 按需引入
+
+```vue
+<template>
+	<allViewer v-if="showPreview" :initialIndex="0" :urlList="filelist" @close="showPreview = false" />
+</template>
+
+<script setup>
+	import { ref } from "vue";
+	import { allViewer } from "all-viewer";
+	import "all-viewer/dist/index.css";
+	const showPreview = ref(true);
+	const filelist = ref([
+		{ url: "你的地址/images/2026/02/24/1223805193385283585.png", file_typeid: 1 },
+		{ url: "你的地址/images/2026/02/24/1223805193385283584.png", file_typeid: 1 },
+		{ url: "你的地址/doc/2026/02/24/1223805159952486400.docx", file_typeid: 3 },
+		{ url: "你的地址/video/2025/11/24/e8c2190f9be54ef492389f71bef7c20c.mp4", file_typeid: 2 },
+	]);
+</script>
+```
+
+```vue
+<template>
+	<allViewer v-if="showPreview" :initialIndex="0" :urlList="filelist" @close="showPreview = false" />
+</template>
+
+<script setup lang="ts">
+	import { ref } from "vue";
+	import type { FileItem } from "all-viewer";
+	import { allViewer } from "all-viewer";
+	import "all-viewer/dist/index.css";
+
+	const showPreview = ref(true);
+	const filelist = ref([
+		{ url: "你的地址/images/2026/02/24/1223805193385283585.png", file_typeid: 1 },
+		{ url: "你的地址/images/2026/02/24/1223805193385283584.png", file_typeid: 1 },
+		{ url: "你的地址/doc/2026/02/24/1223805159952486400.docx", file_typeid: 3 },
+		{ url: "你的地址/video/2025/11/24/e8c2190f9be54ef492389f71bef7c20c.mp4", file_typeid: 2 },
+	]);
+</script>
+```
+
+## 📖 API
+
+### Props
+
+| 参数名           | 说明           | 类型              | 默认值    | 必填 |
+| ---------------- | -------------- | ----------------- | --------- | ---- |
+| urlList          | 文件列表       | `Array<FileItem>` | `[]`      | 是   |
+| initialIndex     | 初始显示的索引 | `number`          | `0`       | 否   |
+| infinite         | 是否无限       | `boolean`         | `true`    | 否   |
+| hideOnClickModal | 点击遮罩层关闭 | `'boolean'`       | `'false'` | 否   |
+
+### FileItem 类型
+
+```typescript
+interface FileItem {
+	/** 文件URL地址 */
+	url: string;
+	/** 文件类型：1图片,2视频,3文件(pdf,word,xls) */
+	file_typeid?: 1 | 2 | 3;
+}
+```
+
+### Events
+
+| 事件名 | 说明             | 回调参数          |
+| ------ | ---------------- | ----------------- |
+| switch | 切换文件时触发   | `(index: number)` |
+| close  | 关闭查看器时触发 | `-`               |
+
+## 📋 依赖说明
+
+本组件依赖于以下库，安装时会自动处理：
+
+- `vue` ^3.5.28
+- `vue-demi` ^0.14.10
+- `@vue-office/docx` ^1.6.3
+- `@vue-office/excel` ^1.7.14
+- `@vue-office/pdf` ^2.0.10