diff --git a/.gitignore b/.gitignore index bab7a87..8ee54e8 100644 --- a/.gitignore +++ b/.gitignore @@ -13,8 +13,6 @@ dist dist-ssr coverage *.local -lib -types /cypress/videos/ /cypress/screenshots/ diff --git a/lib/preview-image.js b/lib/preview-image.js new file mode 100644 index 0000000..f6ec557 --- /dev/null +++ b/lib/preview-image.js @@ -0,0 +1 @@ +(function(x,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(x=typeof globalThis<"u"?globalThis:x||self,e(x.foxPreviewImage={},x.Vue))})(this,function(x,e){"use strict";function k(t){return Object.prototype.toString.call(t).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])","g"),"$2").toLowerCase()}const b=Object.create(null);function j(t){return k(t)==="object"}function O(t){return k(t)==="function"}function D(t){return k(t)==="array"}function A(t){return k(t)==="symbol"}function P(t){return[0,void 0,null].includes(t)}b.isObject=j,b.isFunction=O,b.isArray=D,b.isSymbol=A,b.isFalse=P,k.prototype=b;const y=(t,n)=>{const o=t.__vccOpts||t;for(const[r,s]of n)o[r]=s;return o},W={},H={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"},K=[e.createElementVNode("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"},null,-1)];function X(t,n){return e.openBlock(),e.createElementBlock("svg",H,K)}const Y=y(W,[["render",X]]),Z={},q={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"},G=[e.createElementVNode("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"},null,-1)];function U(t,n){return e.openBlock(),e.createElementBlock("svg",q,G)}const M=y(Z,[["render",U]]),J={class:"fox-preview-switch"},Q=e.defineComponent({__name:"switch",emits:["prev","next"],setup(t,{emit:n}){const o=n,r=()=>{o("prev")},s=()=>{o("next")};return(d,c)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("div",{class:"fox-preview-switch-item fox-preview-switch-item-left",onClick:r},[e.createVNode(M,{class:"preview-operate-icon preview-switch-icon-left"})]),e.createElementVNode("div",{class:"fox-preview-switch-item",onClick:s},[e.createVNode(M,{class:"fox-preview-switch-icon fox-preview-switch-icon"})])]))}}),ee={},te={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"},oe=[e.createElementVNode("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 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"},null,-1)];function ne(t,n){return e.openBlock(),e.createElementBlock("svg",te,oe)}const le=y(ee,[["render",ne]]),se={},re={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"},ce=[e.createElementVNode("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 704zm-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-64h96z"},null,-1)];function ae(t,n){return e.openBlock(),e.createElementBlock("svg",re,ce)}const ie=y(se,[["render",ae]]),de={},fe={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"},me=[e.createElementVNode("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"},null,-1)];function ue(t,n){return e.openBlock(),e.createElementBlock("svg",fe,me)}const pe=y(de,[["render",ue]]),he={},_e={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"},we=[e.createElementVNode("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"},null,-1)];function xe(t,n){return e.openBlock(),e.createElementBlock("svg",_e,we)}const ye=y(he,[["render",xe]]),ge={},ke={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"},be=[e.createElementVNode("path",{fill:"currentColor",d:"M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64v450.304z"},null,-1)];function $e(t,n){return e.openBlock(),e.createElementBlock("svg",ke,be)}const Be=y(ge,[["render",$e]]),ve={class:"fox-preview-toolbar"},Ce={role:"button",title:"缩放倍数",tabindex:"-1",class:"fox-preview-toolbar-item fox-preview-toolbar-scale"},Ve={role:"button",title:"图片位置",class:"fox-preview-toolbar-item fox-preview-toolbar-position"},Ee=e.defineComponent({__name:"toolbar",props:{scale:{default:1},index:{default:"1/1"}},emits:["click"],setup(t,{emit:n}){const o=t,r=n,s=d=>{r("click",d)};return(d,c)=>(e.openBlock(),e.createElementBlock("div",ve,[e.createVNode(le,{role:"button",title:"缩小",class:"fox-preview-toolbar-item",onClick:c[0]||(c[0]=m=>s("zoom-out"))}),e.createVNode(ie,{role:"button",title:"放大",class:"fox-preview-toolbar-item",onClick:c[1]||(c[1]=m=>s("zoom-in"))}),e.createElementVNode("div",Ce,e.toDisplayString(o.scale),1),e.createElementVNode("div",Ve,e.toDisplayString(o.index),1),e.createVNode(pe,{role:"button",title:"左旋转",class:"fox-preview-toolbar-item",onClick:c[2]||(c[2]=m=>s("contraRotate"))}),e.createVNode(ye,{role:"button",title:"右旋转",class:"fox-preview-toolbar-item",onClick:c[3]||(c[3]=m=>s("clockwiseRotation"))}),e.createVNode(Be,{role:"button",title:"下载/保存",class:"fox-preview-toolbar-item",onClick:c[4]||(c[4]=m=>s("download"))})]))}});function Ne(t){return typeof t=="function"?t():e.unref(t)}typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const T=()=>{};function ze(t,n){function o(...r){return new Promise((s,d)=>{Promise.resolve(t(()=>n.apply(this,r),{fn:n,thisArg:this,args:r})).then(s).catch(d)})}return o}function Me(...t){let n=0,o,r=!0,s=T,d,c,m,a,_;!e.isRef(t[0])&&typeof t[0]=="object"?{delay:c,trailing:m=!0,leading:a=!0,rejectOnCancel:_=!1}=t[0]:[c,m=!0,a=!0,_=!1]=t;const u=()=>{o&&(clearTimeout(o),o=void 0,s(),s=T)};return $=>{const p=Ne(c),g=Date.now()-n,f=()=>d=$();return u(),p<=0?(n=Date.now(),f()):(g>p&&(a||!r)?(n=Date.now(),f()):m&&(d=new Promise((w,z)=>{s=_?z:w,o=setTimeout(()=>{n=Date.now(),r=!0,w(f()),u()},Math.max(0,p-g))})),!a&&!o&&(o=setTimeout(()=>r=!0,p)),r=!1,d)}}function L(t,n=200,o=!1,r=!0,s=!1){return ze(Me(n,o,r,s),t)}const Te=(t,n)=>{const o=document.createElement("a");o.download=n,o.href=t,o.style.display="none",document.body.appendChild(o),o.click();const r=setTimeout(()=>{document.body.removeChild(o),clearTimeout(r)},10)},Le=()=>{const t=document.createElement("div"),n=document.createElement("div");t.appendChild(n),t.style.width="100px",t.style.height="50px",t.style.overflow="scroll",t.style.marginLeft="-100000px",document.body.appendChild(t);const o=n.offsetWidth,r=t.offsetWidth,s=setTimeout(()=>{document.body.removeChild(t),clearTimeout(s)},10);return r-o},Se=["onKeyup"],Fe=["src"],C=e.defineComponent({name:"FoxPreviewImage",__name:"index",props:{modelValue:{type:Boolean,default:!1},src:{default:""},zIndex:{default:9e3},initialIndex:{default:0},appendTo:{default:"body"},showToolbar:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:n}){const o=t,r=n;let s="";e.onBeforeMount(()=>{s=document.body.style.cssText});const d=e.ref(null);let c=e.ref(!1),m=e.ref(0),a=o.src&&o.src.length?e.ref(o.initialIndex):e.ref(0),_=e.ref(0),u=e.ref(1),B=e.ref(0),$=e.ref(0),p=e.ref(0),g=e.ref(0),f=e.ref([]),w=e.reactive({x:0,y:0});const z=()=>{c.value=o.modelValue},S=()=>{c.value=!1,r("update:modelValue",c.value)},Ie=l=>{if(m.value!==1)return;const{x:i,y:h}=l,v=i-w.x,N=h-w.y;p.value=v+p.value-B.value,g.value=N+g.value-$.value,B.value=v,$.value=N},F=()=>{u.value>.5&&(u.value-=.1)},I=()=>{u.value<2&&(u.value+=.1)},Re=l=>{requestAnimationFrame(()=>{(l.wheelDelta||l.detail*-40)>0?I():F()})},R=L(Ie,10),V=L(Re,10),je=()=>{m.value=0,B.value=0,$.value=0},Oe=l=>{m.value=1,w={x:l.x,y:l.y}},De=()=>{_.value+=90},Ae=()=>{_.value-=90},Pe=()=>{const l=f.value[a.value],i=l.split("/"),h=i[i.length-1];Te(l,h)},E=()=>{_.value=0,u.value=1,p.value=0,g.value=0,w.x=0,w.y=0,B.value=0,$.value=0},We=()=>{const l=f.value.length||0;a.value>0?a.value--:a.value=l-1,E()},He=()=>{const l=f.value.length||0;a.valueparseFloat(u.value.toFixed(1))),Xe=e.computed(()=>`${a.value+1}/${f.value.length}`),Ye=l=>{switch(l){case"zoom-out":F();break;case"zoom-in":I();break;case"contraRotate":Ae();break;case"clockwiseRotation":De();break;case"download":Pe();break}};e.onMounted(()=>{z()});const Ze=l=>l.scrollHeight>window.innerHeight;return e.watch(()=>o.modelValue,l=>{c.value=l,l?(d.value!==null&&d.value.focus(),Ze(document.body)&&(document.body.style.paddingRight=Le()+"px",document.body.classList.add("fox-lock-window"))):(document.body.classList.remove("fox-lock-window"),s?document.body.style.cssText=s:document.body.removeAttribute("style"))}),e.watch(()=>o.src,l=>{const i=k(l);i==="string"?(a.value=0,E(),f.value=[l]):i==="array"&&(o.initialIndex>=0&&o.initialIndex(e.openBlock(),e.createBlock(e.Teleport,{to:o.appendTo},[e.createVNode(e.Transition,null,{default:e.withCtx(()=>[e.unref(c)?(e.openBlock(),e.createElementBlock("div",{key:0,role:"dialog",ref_key:"refEl",ref:d,class:"fox-preview",style:e.normalizeStyle({"z-index":o.zIndex}),tabindex:"1",onKeyup:e.withKeys(e.withModifiers(S,["exact"]),["esc"])},[e.createElementVNode("div",{class:"fox-preview-canvas",onMousewheel:i[1]||(i[1]=(...h)=>e.unref(V)&&e.unref(V)(...h)),"on:DOMMouseScroll":i[2]||(i[2]=(...h)=>e.unref(V)&&e.unref(V)(...h))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(f),(h,v)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:v},[e.unref(a)===v?(e.openBlock(),e.createElementBlock("div",{key:0,onMousemove:i[0]||(i[0]=(...N)=>e.unref(R)&&e.unref(R)(...N)),onMouseup:je,onMousedown:Oe,style:e.normalizeStyle([{transform:`rotate(${e.unref(_)}deg) scale(${e.unref(u)}) translate(${e.unref(p)}px,${e.unref(g)}px)`},{display:"inline-block"}])},[e.createElementVNode("img",{class:"fox-preview-image",src:h,alt:"被拖拽的图片",draggable:"false"},null,8,Fe)],36)):e.createCommentVNode("",!0)],64))),128))],32),e.createElementVNode("div",{class:"fox-preview-close",onClick:S},[e.createVNode(Y)]),e.unref(f)&&e.unref(f).length>1?(e.openBlock(),e.createBlock(Q,{key:0,onPrev:We,onNext:He})):e.createCommentVNode("",!0),l.showToolbar?(e.openBlock(),e.createBlock(Ee,{key:1,onClick:Ye,scale:Ke.value,index:Xe.value},null,8,["scale","index"])):e.createCommentVNode("",!0)],44,Se)):e.createCommentVNode("",!0)]),_:1})],8,["to"]))}});C.install=t=>{t.component(C.name,C)},x.default=C,Object.defineProperties(x,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/lib/preview-image.mjs b/lib/preview-image.mjs new file mode 100644 index 0000000..2e2c53b --- /dev/null +++ b/lib/preview-image.mjs @@ -0,0 +1,427 @@ +import { openBlock as u, createElementBlock as m, createElementVNode as d, defineComponent as O, createVNode as g, toDisplayString as H, isRef as ce, unref as c, onBeforeMount as ue, ref as h, reactive as de, computed as N, onMounted as ve, watch as P, createBlock as V, Teleport as fe, Transition as me, withCtx as pe, normalizeStyle as K, withKeys as he, withModifiers as we, Fragment as X, renderList as _e, createCommentVNode as F } from "vue"; +function z(e) { + return Object.prototype.toString.call(e).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])", "g"), "$2").toLowerCase(); +} +const M = /* @__PURE__ */ Object.create(null); +function xe(e) { + return z(e) === "object"; +} +function ge(e) { + return z(e) === "function"; +} +function ye(e) { + return z(e) === "array"; +} +function be(e) { + return z(e) === "symbol"; +} +function $e(e) { + return [0, void 0, null].includes(e); +} +M.isObject = xe; +M.isFunction = ge; +M.isArray = ye; +M.isSymbol = be; +M.isFalse = $e; +z.prototype = M; +const k = (e, o) => { + const t = e.__vccOpts || e; + for (const [s, l] of o) + t[s] = l; + return t; +}, ke = {}, Ce = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg", + class: "svg", + "aria-role": "button" +}, ze = /* @__PURE__ */ d("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" +}, null, -1), Me = [ + ze +]; +function Le(e, o) { + return u(), m("svg", Ce, Me); +} +const Te = /* @__PURE__ */ k(ke, [["render", Le]]), Be = {}, Re = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg", + class: "svg", + "aria-role": "button" +}, Se = /* @__PURE__ */ d("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" +}, null, -1), Fe = [ + Se +]; +function Ie(e, o) { + return u(), m("svg", Re, Fe); +} +const Y = /* @__PURE__ */ k(Be, [["render", Ie]]), Ve = { class: "fox-preview-switch" }, Ee = /* @__PURE__ */ O({ + __name: "switch", + emits: ["prev", "next"], + setup(e, { emit: o }) { + const t = o, s = () => { + t("prev"); + }, l = () => { + t("next"); + }; + return (v, i) => (u(), m("div", Ve, [ + d("div", { + class: "fox-preview-switch-item fox-preview-switch-item-left", + onClick: s + }, [ + g(Y, { class: "preview-operate-icon preview-switch-icon-left" }) + ]), + d("div", { + class: "fox-preview-switch-item", + onClick: l + }, [ + g(Y, { class: "fox-preview-switch-icon fox-preview-switch-icon" }) + ]) + ])); + } +}), Oe = {}, je = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg", + class: "svg", + "aria-role": "button" +}, Ae = /* @__PURE__ */ d("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 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z" +}, null, -1), De = [ + Ae +]; +function We(e, o) { + return u(), m("svg", je, De); +} +const He = /* @__PURE__ */ k(Oe, [["render", We]]), Ne = {}, Pe = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg", + class: "svg", + "aria-role": "button" +}, Ke = /* @__PURE__ */ d("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 704zm-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-64h96z" +}, null, -1), Xe = [ + Ke +]; +function Ye(e, o) { + return u(), m("svg", Pe, Xe); +} +const Ze = /* @__PURE__ */ k(Ne, [["render", Ye]]), Ge = {}, Ue = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg", + class: "svg", + "aria-role": "button" +}, qe = /* @__PURE__ */ d("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" +}, null, -1), Je = [ + qe +]; +function Qe(e, o) { + return u(), m("svg", Ue, Je); +} +const et = /* @__PURE__ */ k(Ge, [["render", Qe]]), tt = {}, ot = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg", + class: "svg", + "aria-role": "button" +}, nt = /* @__PURE__ */ d("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" +}, null, -1), lt = [ + nt +]; +function st(e, o) { + return u(), m("svg", ot, lt); +} +const it = /* @__PURE__ */ k(tt, [["render", st]]), at = {}, rt = { + viewBox: "0 0 1024 1024", + xmlns: "http://www.w3.org/2000/svg", + class: "svg", + "aria-role": "button" +}, ct = /* @__PURE__ */ d("path", { + fill: "currentColor", + d: "M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64v450.304z" +}, null, -1), ut = [ + ct +]; +function dt(e, o) { + return u(), m("svg", rt, ut); +} +const vt = /* @__PURE__ */ k(at, [["render", dt]]), ft = { class: "fox-preview-toolbar" }, mt = { + role: "button", + title: "缩放倍数", + tabindex: "-1", + class: "fox-preview-toolbar-item fox-preview-toolbar-scale" +}, pt = { + role: "button", + title: "图片位置", + class: "fox-preview-toolbar-item fox-preview-toolbar-position" +}, ht = /* @__PURE__ */ O({ + __name: "toolbar", + props: { + scale: { default: 1 }, + index: { default: "1/1" } + }, + emits: ["click"], + setup(e, { emit: o }) { + const t = e, s = o, l = (v) => { + s("click", v); + }; + return (v, i) => (u(), m("div", ft, [ + g(He, { + role: "button", + title: "缩小", + class: "fox-preview-toolbar-item", + onClick: i[0] || (i[0] = (p) => l("zoom-out")) + }), + g(Ze, { + role: "button", + title: "放大", + class: "fox-preview-toolbar-item", + onClick: i[1] || (i[1] = (p) => l("zoom-in")) + }), + d("div", mt, H(t.scale), 1), + d("div", pt, H(t.index), 1), + g(et, { + role: "button", + title: "左旋转", + class: "fox-preview-toolbar-item", + onClick: i[2] || (i[2] = (p) => l("contraRotate")) + }), + g(it, { + role: "button", + title: "右旋转", + class: "fox-preview-toolbar-item", + onClick: i[3] || (i[3] = (p) => l("clockwiseRotation")) + }), + g(vt, { + role: "button", + title: "下载/保存", + class: "fox-preview-toolbar-item", + onClick: i[4] || (i[4] = (p) => l("download")) + }) + ])); + } +}); +function wt(e) { + return typeof e == "function" ? e() : c(e); +} +typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope; +const Z = () => { +}; +function _t(e, o) { + function t(...s) { + return new Promise((l, v) => { + Promise.resolve(e(() => o.apply(this, s), { fn: o, thisArg: this, args: s })).then(l).catch(v); + }); + } + return t; +} +function xt(...e) { + let o = 0, t, s = !0, l = Z, v, i, p, a, y; + !ce(e[0]) && typeof e[0] == "object" ? { delay: i, trailing: p = !0, leading: a = !0, rejectOnCancel: y = !1 } = e[0] : [i, p = !0, a = !0, y = !1] = e; + const w = () => { + t && (clearTimeout(t), t = void 0, l(), l = Z); + }; + return (C) => { + const _ = wt(i), $ = Date.now() - o, f = () => v = C(); + return w(), _ <= 0 ? (o = Date.now(), f()) : ($ > _ && (a || !s) ? (o = Date.now(), f()) : p && (v = new Promise((b, I) => { + l = y ? I : b, t = setTimeout(() => { + o = Date.now(), s = !0, b(f()), w(); + }, Math.max(0, _ - $)); + })), !a && !t && (t = setTimeout(() => s = !0, _)), s = !1, v); + }; +} +function G(e, o = 200, t = !1, s = !0, l = !1) { + return _t( + xt(o, t, s, l), + e + ); +} +const gt = (e, o) => { + const t = document.createElement("a"); + t.download = o, t.href = e, t.style.display = "none", document.body.appendChild(t), t.click(); + const s = setTimeout(() => { + document.body.removeChild(t), clearTimeout(s); + }, 10); +}, yt = () => { + const e = document.createElement("div"), o = document.createElement("div"); + e.appendChild(o), e.style.width = "100px", e.style.height = "50px", e.style.overflow = "scroll", e.style.marginLeft = "-100000px", document.body.appendChild(e); + const t = o.offsetWidth, s = e.offsetWidth, l = setTimeout(() => { + document.body.removeChild(e), clearTimeout(l); + }, 10); + return s - t; +}, bt = ["onKeyup"], $t = ["src"], E = /* @__PURE__ */ O({ + name: "FoxPreviewImage", + __name: "index", + props: { + modelValue: { type: Boolean, default: !1 }, + src: { default: "" }, + zIndex: { default: 9e3 }, + initialIndex: { default: 0 }, + appendTo: { default: "body" }, + showToolbar: { type: Boolean, default: !0 } + }, + emits: ["update:modelValue"], + setup(e, { emit: o }) { + const t = e, s = o; + let l = ""; + ue(() => { + l = document.body.style.cssText; + }); + const v = h(null); + let i = h(!1), p = h(0), a = t.src && t.src.length ? h(t.initialIndex) : h(0), y = h(0), w = h(1), L = h(0), C = h(0), _ = h(0), $ = h(0), f = h([]), b = de({ + x: 0, + y: 0 + }); + const I = () => { + i.value = t.modelValue; + }, j = () => { + i.value = !1, s("update:modelValue", i.value); + }, U = (n) => { + if (p.value !== 1) + return; + const { x: r, y: x } = n, T = r - b.x, S = x - b.y; + _.value = T + _.value - L.value, $.value = S + $.value - C.value, L.value = T, C.value = S; + }, A = () => { + w.value > 0.5 && (w.value -= 0.1); + }, D = () => { + w.value < 2 && (w.value += 0.1); + }, q = (n) => { + requestAnimationFrame(() => { + (n.wheelDelta || n.detail * -40) > 0 ? D() : A(); + }); + }, W = G(U, 10), B = G(q, 10), J = () => { + p.value = 0, L.value = 0, C.value = 0; + }, Q = (n) => { + p.value = 1, b = { x: n.x, y: n.y }; + }, ee = () => { + y.value += 90; + }, te = () => { + y.value -= 90; + }, oe = () => { + const n = f.value[a.value], r = n.split("/"), x = r[r.length - 1]; + gt(n, x); + }, R = () => { + y.value = 0, w.value = 1, _.value = 0, $.value = 0, b.x = 0, b.y = 0, L.value = 0, C.value = 0; + }, ne = () => { + const n = f.value.length || 0; + a.value > 0 ? a.value-- : a.value = n - 1, R(); + }, le = () => { + const n = f.value.length || 0; + a.value < n - 1 ? a.value++ : a.value = 0, R(); + }, se = N(() => parseFloat(w.value.toFixed(1))), ie = N(() => `${a.value + 1}/${f.value.length}`), ae = (n) => { + switch (n) { + case "zoom-out": + A(); + break; + case "zoom-in": + D(); + break; + case "contraRotate": + te(); + break; + case "clockwiseRotation": + ee(); + break; + case "download": + oe(); + break; + } + }; + ve(() => { + I(); + }); + const re = (n) => n.scrollHeight > window.innerHeight; + return P( + () => t.modelValue, + (n) => { + i.value = n, n ? (v.value !== null && v.value.focus(), re(document.body) && (document.body.style.paddingRight = yt() + "px", document.body.classList.add("fox-lock-window"))) : (document.body.classList.remove("fox-lock-window"), l ? document.body.style.cssText = l : document.body.removeAttribute("style")); + } + ), P( + () => t.src, + (n) => { + const r = z(n); + r === "string" ? (a.value = 0, R(), f.value = [n]) : r === "array" && (t.initialIndex >= 0 && t.initialIndex < n.length ? a.value = t.initialIndex : a.value = 0, R(), f.value = n); + }, + { + immediate: !0 + } + ), (n, r) => (u(), V(fe, { + to: t.appendTo + }, [ + g(me, null, { + default: pe(() => [ + c(i) ? (u(), m("div", { + key: 0, + role: "dialog", + ref_key: "refEl", + ref: v, + class: "fox-preview", + style: K({ + "z-index": t.zIndex + }), + tabindex: "1", + onKeyup: he(we(j, ["exact"]), ["esc"]) + }, [ + d("div", { + class: "fox-preview-canvas", + onMousewheel: r[1] || (r[1] = //@ts-ignore + (...x) => c(B) && c(B)(...x)), + "on:DOMMouseScroll": r[2] || (r[2] = //@ts-ignore + (...x) => c(B) && c(B)(...x)) + }, [ + (u(!0), m(X, null, _e(c(f), (x, T) => (u(), m(X, { key: T }, [ + c(a) === T ? (u(), m("div", { + key: 0, + onMousemove: r[0] || (r[0] = //@ts-ignore + (...S) => c(W) && c(W)(...S)), + onMouseup: J, + onMousedown: Q, + style: K([{ + transform: `rotate(${c(y)}deg) scale(${c(w)}) translate(${c(_)}px,${c($)}px)` + }, { display: "inline-block" }]) + }, [ + d("img", { + class: "fox-preview-image", + src: x, + alt: "被拖拽的图片", + draggable: "false" + }, null, 8, $t) + ], 36)) : F("", !0) + ], 64))), 128)) + ], 32), + d("div", { + class: "fox-preview-close", + onClick: j + }, [ + g(Te) + ]), + c(f) && c(f).length > 1 ? (u(), V(Ee, { + key: 0, + onPrev: ne, + onNext: le + })) : F("", !0), + n.showToolbar ? (u(), V(ht, { + key: 1, + onClick: ae, + scale: se.value, + index: ie.value + }, null, 8, ["scale", "index"])) : F("", !0) + ], 44, bt)) : F("", !0) + ]), + _: 1 + }) + ], 8, ["to"])); + } +}); +E.install = (e) => { + e.component(E.name, E); +}; +export { + E as default +}; diff --git a/lib/style.css b/lib/style.css index f72daf2..288406b 100644 --- a/lib/style.css +++ b/lib/style.css @@ -1 +1 @@ -.preview-switch[data-v-697a4eee]{z-index:10}.preview-switch-item[data-v-697a4eee]{background-color:#606266;width:40px;height:40px;border-radius:20px;display:flex;justify-content:center;align-content:center;align-items:center;cursor:pointer;position:absolute;top:50%;margin-top:-20px;right:5vw}.preview-switch-item-left[data-v-697a4eee]{left:5vw}.preview-switch .preview-switch-icon[data-v-697a4eee]{font-size:24px;color:#fff}.preview-switch .preview-switch-icon-left[data-v-697a4eee]{transform:rotate(180deg)}.svg{user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden}.toolbar[data-v-d4e09f93]{position:absolute;bottom:5%;left:50%;transform:translate(-98px);border-radius:30px;z-index:10;background-color:#606266;display:flex;padding:8px 10px}.toolbar-item[data-v-d4e09f93]{cursor:pointer;margin:0 10px;color:#fff;font-size:24px}.toolbar-scale[data-v-d4e09f93]{font-size:14px;position:relative;background-color:#606266;border:1px solid #ffffff;box-sizing:border-box;width:34px;border-radius:1px;line-height:22px;text-align:center;cursor:unset}.toolbar-scale[data-v-d4e09f93]:before,.toolbar-scale[data-v-d4e09f93]:after{position:absolute;width:100%;height:100%;content:"";z-index:1;border:1px solid #606266;box-sizing:border-box}.toolbar-scale[data-v-d4e09f93]:before{height:12px;top:50%;margin-top:-6px;width:34px;left:-1px;border-width:0 1px}.toolbar-scale[data-v-d4e09f93]:after{height:24px;width:20px;top:-1px;left:50%;margin-left:-10px;border-width:1px 0}.toolbar-position[data-v-d4e09f93]{font-size:14px;box-sizing:border-box;width:24px;line-height:24px;text-align:center;cursor:default}.fox-preview{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0006;overflow:hidden;backdrop-filter:saturate(50%) blur(4px)}.fox-preview-canvas{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;font-size:0}.fox-preview-image{user-select:none;display:block;pointer-events:none}.fox-preview-image:active{cursor:pointer}.fox-preview-close{position:absolute;top:-40px;right:-40px;user-select:none;cursor:pointer;background-color:#0000004d;border-radius:50%;font-size:26px;height:80px;width:80px;color:#fff;overflow:hidden;transition:background-color .15s;z-index:10}.fox-preview-close>svg{position:absolute;left:15px;bottom:15px}.fox-preview-close:hover{background-color:#00000080}.font-svg{user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden;font-weight:500}.fox-lock-window{overflow:hidden} +.fox-preview-switch{z-index:10}.fox-preview-switch-item{background-color:#606266;width:40px;height:40px;border-radius:20px;display:flex;justify-content:center;align-content:center;align-items:center;cursor:pointer;position:absolute;top:50%;margin-top:-20px;right:5vw}.fox-preview-switch-item-left{left:5vw}.fox-preview-switch .fox-preview-switch-icon{font-size:24px;color:#fff}.fox-preview-switch .fox-preview-switch-icon-left{transform:rotate(180deg)}.svg{-webkit-user-select:none;user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden}.fox-preview-toolbar{position:absolute;bottom:5%;left:50%;transform:translate(-98px);border-radius:30px;z-index:10;background-color:#606266;display:flex;padding:8px 10px}.fox-preview-toolbar-item{cursor:pointer;margin:0 10px;color:#fff;font-size:24px}.fox-preview-toolbar-scale{font-size:14px;position:relative;background-color:#606266;border:1px solid #ffffff;box-sizing:border-box;width:34px;border-radius:1px;line-height:22px;text-align:center;cursor:unset}.fox-preview-toolbar-scale:before,.fox-preview-toolbar-scale:after{position:absolute;width:100%;height:100%;content:"";z-index:1;border:1px solid #606266;box-sizing:border-box}.fox-preview-toolbar-scale:before{height:12px;top:50%;margin-top:-6px;width:34px;left:-1px;border-width:0 1px}.fox-preview-toolbar-scale:after{height:24px;width:20px;top:-1px;left:50%;margin-left:-10px;border-width:1px 0}.fox-preview-toolbar-position{font-size:14px;box-sizing:border-box;width:24px;line-height:24px;text-align:center;cursor:default}.fox-preview{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0006;overflow:hidden;-webkit-backdrop-filter:saturate(50%) blur(4px);backdrop-filter:saturate(50%) blur(4px)}.fox-preview-canvas{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;font-size:0}.fox-preview-image{-webkit-user-select:none;user-select:none;display:block;pointer-events:none}.fox-preview-image:active{cursor:pointer}.fox-preview-close{position:absolute;top:-40px;right:-40px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#0000004d;border-radius:50%;font-size:26px;height:80px;width:80px;color:#fff;overflow:hidden;transition:background-color .15s;z-index:10}.fox-preview-close>svg{position:absolute;left:15px;bottom:15px}.fox-preview-close:hover{background-color:#00000080}.font-svg{-webkit-user-select:none;user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden;font-weight:500}.fox-lock-window{overflow:hidden} diff --git a/package.json b/package.json index 1b7d91c..0506cfa 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,7 @@ ], "files": [ "lib", - "types/components", - "types/utils", + "types", "package.json", "README.md" ], @@ -31,7 +30,7 @@ "preview": "vite preview", "test:unit": "vitest", "build-only": "vite build", - "type-check": "vue-tsc --emitDeclarationOnly -p tsconfig.vitest.json --composite false", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "format": "prettier --write src/" }, @@ -64,6 +63,7 @@ "sass": "^1.77.2", "typescript": "~5.4.0", "vite": "^5.2.8", + "vite-plugin-dts": "^3.9.1", "vite-plugin-vue-devtools": "^7.0.25", "vitest": "^1.4.0", "vue-tsc": "^2.0.11" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3b01308..36a5bb3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,6 +67,9 @@ devDependencies: vite: specifier: ^5.2.8 version: 5.2.11(@types/node@20.12.12)(sass@1.77.2) + vite-plugin-dts: + specifier: ^3.9.1 + version: 3.9.1(@types/node@20.12.12)(typescript@5.4.5)(vite@5.2.11) vite-plugin-vue-devtools: specifier: ^7.0.25 version: 7.2.1(vite@5.2.11)(vue@3.4.27) @@ -732,6 +735,50 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true + /@microsoft/api-extractor-model@7.28.13(@types/node@20.12.12): + resolution: {integrity: sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==} + dependencies: + '@microsoft/tsdoc': 0.14.2 + '@microsoft/tsdoc-config': 0.16.2 + '@rushstack/node-core-library': 4.0.2(@types/node@20.12.12) + transitivePeerDependencies: + - '@types/node' + dev: true + + /@microsoft/api-extractor@7.43.0(@types/node@20.12.12): + resolution: {integrity: sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==} + hasBin: true + dependencies: + '@microsoft/api-extractor-model': 7.28.13(@types/node@20.12.12) + '@microsoft/tsdoc': 0.14.2 + '@microsoft/tsdoc-config': 0.16.2 + '@rushstack/node-core-library': 4.0.2(@types/node@20.12.12) + '@rushstack/rig-package': 0.5.2 + '@rushstack/terminal': 0.10.0(@types/node@20.12.12) + '@rushstack/ts-command-line': 4.19.1(@types/node@20.12.12) + lodash: 4.17.21 + minimatch: 3.0.8 + resolve: 1.22.8 + semver: 7.5.4 + source-map: 0.6.1 + typescript: 5.4.2 + transitivePeerDependencies: + - '@types/node' + dev: true + + /@microsoft/tsdoc-config@0.16.2: + resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==} + dependencies: + '@microsoft/tsdoc': 0.14.2 + ajv: 6.12.6 + jju: 1.4.0 + resolve: 1.19.0 + dev: true + + /@microsoft/tsdoc@0.14.2: + resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==} + dev: true + /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -919,6 +966,54 @@ packages: resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==} dev: true + /@rushstack/node-core-library@4.0.2(@types/node@20.12.12): + resolution: {integrity: sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==} + peerDependencies: + '@types/node': '*' + peerDependenciesMeta: + '@types/node': + optional: true + dependencies: + '@types/node': 20.12.12 + fs-extra: 7.0.1 + import-lazy: 4.0.0 + jju: 1.4.0 + resolve: 1.22.8 + semver: 7.5.4 + z-schema: 5.0.5 + dev: true + + /@rushstack/rig-package@0.5.2: + resolution: {integrity: sha512-mUDecIJeH3yYGZs2a48k+pbhM6JYwWlgjs2Ca5f2n1G2/kgdgP9D/07oglEGf6mRyXEnazhEENeYTSNDRCwdqA==} + dependencies: + resolve: 1.22.8 + strip-json-comments: 3.1.1 + dev: true + + /@rushstack/terminal@0.10.0(@types/node@20.12.12): + resolution: {integrity: sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==} + peerDependencies: + '@types/node': '*' + peerDependenciesMeta: + '@types/node': + optional: true + dependencies: + '@rushstack/node-core-library': 4.0.2(@types/node@20.12.12) + '@types/node': 20.12.12 + supports-color: 8.1.1 + dev: true + + /@rushstack/ts-command-line@4.19.1(@types/node@20.12.12): + resolution: {integrity: sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==} + dependencies: + '@rushstack/terminal': 0.10.0(@types/node@20.12.12) + '@types/argparse': 1.0.38 + argparse: 1.0.10 + string-argv: 0.3.2 + transitivePeerDependencies: + - '@types/node' + dev: true + /@sinclair/typebox@0.27.8: resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} dev: true @@ -927,6 +1022,10 @@ packages: resolution: {integrity: sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==} dev: true + /@types/argparse@1.0.38: + resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==} + dev: true + /@types/estree@1.0.5: resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} dev: true @@ -1150,18 +1249,37 @@ packages: pretty-format: 29.7.0 dev: true + /@volar/language-core@1.11.1: + resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==} + dependencies: + '@volar/source-map': 1.11.1 + dev: true + /@volar/language-core@2.2.5: resolution: {integrity: sha512-2htyAuxRrAgETmFeUhT4XLELk3LiEcqoW/B8YUXMF6BrGWLMwIR09MFaZYvrA2UhbdAeSyeQ726HaWSWkexUcQ==} dependencies: '@volar/source-map': 2.2.5 dev: true + /@volar/source-map@1.11.1: + resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==} + dependencies: + muggle-string: 0.3.1 + dev: true + /@volar/source-map@2.2.5: resolution: {integrity: sha512-wrOEIiZNf4E+PWB0AxyM4tfhkfldPsb3bxg8N6FHrxJH2ohar7aGu48e98bp3pR9HUA7P/pR9VrLmkTrgCCnWQ==} dependencies: muggle-string: 0.4.1 dev: true + /@volar/typescript@1.11.1: + resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==} + dependencies: + '@volar/language-core': 1.11.1 + path-browserify: 1.0.1 + dev: true + /@volar/typescript@2.2.5: resolution: {integrity: sha512-eSV/n75+ppfEVugMC/salZsI44nXDPAyL6+iTYCNLtiLHGJsnMv9GwiDMujrvAUj/aLQyqRJgYtXRoxop2clCw==} dependencies: @@ -1312,6 +1430,26 @@ packages: - supports-color dev: true + /@vue/language-core@1.8.27(typescript@5.4.5): + resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@volar/language-core': 1.11.1 + '@volar/source-map': 1.11.1 + '@vue/compiler-dom': 3.4.27 + '@vue/shared': 3.4.27 + computeds: 0.0.1 + minimatch: 9.0.4 + muggle-string: 0.3.1 + path-browserify: 1.0.1 + typescript: 5.4.5 + vue-template-compiler: 2.7.16 + dev: true + /@vue/language-core@2.0.19(typescript@5.4.5): resolution: {integrity: sha512-A9EGOnvb51jOvnCYoRLnMP+CcoPlbZVxI9gZXE/y2GksRWM6j/PrLEIC++pnosWTN08tFpJgxhSS//E9v/Sg+Q==} peerDependencies: @@ -1480,6 +1618,12 @@ packages: picomatch: 2.3.1 dev: true + /argparse@1.0.10: + resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} + dependencies: + sprintf-js: 1.0.3 + dev: true + /argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} dev: true @@ -1651,6 +1795,13 @@ packages: engines: {node: '>=14'} dev: true + /commander@9.5.0: + resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==} + engines: {node: ^12.20.0 || >=14} + requiresBuild: true + dev: true + optional: true + /computeds@0.0.1: resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==} dev: true @@ -2121,6 +2272,15 @@ packages: universalify: 2.0.1 dev: true + /fs-extra@7.0.1: + resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==} + engines: {node: '>=6 <7 || >=8'} + dependencies: + graceful-fs: 4.2.11 + jsonfile: 4.0.0 + universalify: 0.1.2 + dev: true + /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} dev: true @@ -2133,6 +2293,10 @@ packages: dev: true optional: true + /function-bind@1.1.2: + resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} + dev: true + /gensync@1.0.0-beta.2: resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} engines: {node: '>=6.9.0'} @@ -2227,6 +2391,13 @@ packages: engines: {node: '>=8'} dev: true + /hasown@2.0.2: + resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} + engines: {node: '>= 0.4'} + dependencies: + function-bind: 1.1.2 + dev: true + /he@1.2.0: resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} hasBin: true @@ -2297,6 +2468,11 @@ packages: resolve-from: 4.0.0 dev: true + /import-lazy@4.0.0: + resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==} + engines: {node: '>=8'} + dev: true + /imurmurhash@0.1.4: resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} engines: {node: '>=0.8.19'} @@ -2325,6 +2501,12 @@ packages: binary-extensions: 2.3.0 dev: true + /is-core-module@2.13.1: + resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==} + dependencies: + hasown: 2.0.2 + dev: true + /is-docker@3.0.0: resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -2395,6 +2577,10 @@ packages: '@pkgjs/parseargs': 0.11.0 dev: true + /jju@1.4.0: + resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} + dev: true + /js-beautify@1.15.1: resolution: {integrity: sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==} engines: {node: '>=14'} @@ -2492,6 +2678,12 @@ packages: hasBin: true dev: true + /jsonfile@4.0.0: + resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} + optionalDependencies: + graceful-fs: 4.2.11 + dev: true + /jsonfile@6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} dependencies: @@ -2533,6 +2725,14 @@ packages: p-locate: 5.0.0 dev: true + /lodash.get@4.4.2: + resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} + dev: true + + /lodash.isequal@4.5.0: + resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} + dev: true + /lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true @@ -2558,6 +2758,13 @@ packages: yallist: 3.1.1 dev: true + /lru-cache@6.0.0: + resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} + engines: {node: '>=10'} + dependencies: + yallist: 4.0.0 + dev: true + /magic-string@0.30.10: resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==} dependencies: @@ -2602,6 +2809,12 @@ packages: engines: {node: '>=12'} dev: true + /minimatch@3.0.8: + resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==} + dependencies: + brace-expansion: 1.1.11 + dev: true + /minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: @@ -2649,6 +2862,10 @@ packages: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} dev: true + /muggle-string@0.3.1: + resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==} + dev: true + /muggle-string@0.4.1: resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==} dev: true @@ -2808,6 +3025,10 @@ packages: engines: {node: '>=12'} dev: true + /path-parse@1.0.7: + resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} + dev: true + /path-scurry@1.11.1: resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==} engines: {node: '>=16 || 14 >=14.18'} @@ -2947,6 +3168,22 @@ packages: engines: {node: '>=4'} dev: true + /resolve@1.19.0: + resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==} + dependencies: + is-core-module: 2.13.1 + path-parse: 1.0.7 + dev: true + + /resolve@1.22.8: + resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} + hasBin: true + dependencies: + is-core-module: 2.13.1 + path-parse: 1.0.7 + supports-preserve-symlinks-flag: 1.0.0 + dev: true + /reusify@1.0.4: resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} engines: {iojs: '>=1.0.0', node: '>=0.10.0'} @@ -3031,6 +3268,14 @@ packages: hasBin: true dev: true + /semver@7.5.4: + resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} + engines: {node: '>=10'} + hasBin: true + dependencies: + lru-cache: 6.0.0 + dev: true + /semver@7.6.2: resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==} engines: {node: '>=10'} @@ -3080,11 +3325,20 @@ packages: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} + /source-map@0.6.1: + resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} + engines: {node: '>=0.10.0'} + dev: true + /speakingurl@14.0.1: resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==} engines: {node: '>=0.10.0'} dev: true + /sprintf-js@1.0.3: + resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} + dev: true + /stackback@0.0.2: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} dev: true @@ -3093,6 +3347,11 @@ packages: resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==} dev: true + /string-argv@0.3.2: + resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==} + engines: {node: '>=0.6.19'} + dev: true + /string-width@4.2.3: resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} engines: {node: '>=8'} @@ -3155,6 +3414,18 @@ packages: has-flag: 4.0.0 dev: true + /supports-color@8.1.1: + resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} + engines: {node: '>=10'} + dependencies: + has-flag: 4.0.0 + dev: true + + /supports-preserve-symlinks-flag@1.0.0: + resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} + engines: {node: '>= 0.4'} + dev: true + /svg-tags@1.0.0: resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} dev: true @@ -3252,6 +3523,12 @@ packages: engines: {node: '>=10'} dev: true + /typescript@5.4.2: + resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==} + engines: {node: '>=14.17'} + hasBin: true + dev: true + /typescript@5.4.5: resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} engines: {node: '>=14.17'} @@ -3265,6 +3542,11 @@ packages: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} dev: true + /universalify@0.1.2: + resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==} + engines: {node: '>= 4.0.0'} + dev: true + /universalify@0.2.0: resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==} engines: {node: '>= 4.0.0'} @@ -3303,6 +3585,11 @@ packages: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true + /validator@13.12.0: + resolution: {integrity: sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==} + engines: {node: '>= 0.10'} + dev: true + /vite-hot-client@0.2.3(vite@5.2.11): resolution: {integrity: sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==} peerDependencies: @@ -3332,6 +3619,31 @@ packages: - terser dev: true + /vite-plugin-dts@3.9.1(@types/node@20.12.12)(typescript@5.4.5)(vite@5.2.11): + resolution: {integrity: sha512-rVp2KM9Ue22NGWB8dNtWEr+KekN3rIgz1tWD050QnRGlriUCmaDwa7qA5zDEjbXg5lAXhYMSBJtx3q3hQIJZSg==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + typescript: '*' + vite: '*' + peerDependenciesMeta: + vite: + optional: true + dependencies: + '@microsoft/api-extractor': 7.43.0(@types/node@20.12.12) + '@rollup/pluginutils': 5.1.0 + '@vue/language-core': 1.8.27(typescript@5.4.5) + debug: 4.3.4 + kolorist: 1.8.0 + magic-string: 0.30.10 + typescript: 5.4.5 + vite: 5.2.11(@types/node@20.12.12)(sass@1.77.2) + vue-tsc: 1.8.27(typescript@5.4.5) + transitivePeerDependencies: + - '@types/node' + - rollup + - supports-color + dev: true + /vite-plugin-inspect@0.8.4(vite@5.2.11): resolution: {integrity: sha512-G0N3rjfw+AiiwnGw50KlObIHYWfulVwaCBUBLh2xTW9G1eM9ocE5olXkEYUbwyTmX+azM8duubi+9w5awdCz+g==} engines: {node: '>=14'} @@ -3535,6 +3847,18 @@ packages: he: 1.2.0 dev: true + /vue-tsc@1.8.27(typescript@5.4.5): + resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==} + hasBin: true + peerDependencies: + typescript: '*' + dependencies: + '@volar/typescript': 1.11.1 + '@vue/language-core': 1.8.27(typescript@5.4.5) + semver: 7.6.2 + typescript: 5.4.5 + dev: true + /vue-tsc@2.0.19(typescript@5.4.5): resolution: {integrity: sha512-JWay5Zt2/871iodGF72cELIbcAoPyhJxq56mPPh+M2K7IwI688FMrFKc/+DvB05wDWEuCPexQJ6L10zSwzzapg==} hasBin: true @@ -3669,6 +3993,10 @@ packages: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} dev: true + /yallist@4.0.0: + resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} + dev: true + /yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} @@ -3678,3 +4006,15 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} dev: true + + /z-schema@5.0.5: + resolution: {integrity: sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==} + engines: {node: '>=8.0.0'} + hasBin: true + dependencies: + lodash.get: 4.4.2 + lodash.isequal: 4.5.0 + validator: 13.12.0 + optionalDependencies: + commander: 9.5.0 + dev: true diff --git a/src/components/preview-image/index.ts b/src/components/preview-image/index.ts index 8252469..6d531d5 100644 --- a/src/components/preview-image/index.ts +++ b/src/components/preview-image/index.ts @@ -2,7 +2,7 @@ import PreviewImage from './src/index.vue' import type { App } from 'vue' PreviewImage.install = (app: App) => { - app.component(PreviewImage.name, PreviewImage) + app.component(PreviewImage.name as string, PreviewImage) } export default PreviewImage diff --git a/src/components/preview-image/src/index.vue b/src/components/preview-image/src/index.vue index c3b9c8d..149f2e4 100644 --- a/src/components/preview-image/src/index.vue +++ b/src/components/preview-image/src/index.vue @@ -63,7 +63,7 @@ defineOptions({ name: 'FoxPreviewImage' }) -interface Props { +export interface Props { modelValue: boolean src: string | string[] zIndex?: number diff --git a/src/components/preview-image/src/switch.vue b/src/components/preview-image/src/switch.vue index 6343892..25a7808 100644 --- a/src/components/preview-image/src/switch.vue +++ b/src/components/preview-image/src/switch.vue @@ -15,18 +15,18 @@ const handleNextClick = () => { -