vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
2 lines (1 loc) • 16.2 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),ie=require("../space/index.cjs"),X=require("../spin/index.cjs"),p=require("../utils/index.cjs"),ne=["onLoad","src","alt"],ce=["onClick"],se={class:"image-mask-info"},ue={class:"mask-pre"},ve={class:"preview-mask"},de={class:"preview-body"},me={class:"preview-operations"},fe=["href","title"],he={class:"icon-svg",style:{transform:"rotate(90deg)"},focusable:"false","data-icon":"swap",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},ge=["onLoad","src","alt"],pe=e.defineComponent({__name:"Image",props:{src:{default:void 0},name:{default:void 0},width:{default:100},height:{default:100},disabled:{type:Boolean,default:!1},bordered:{type:Boolean,default:!0},fit:{default:"contain"},preview:{default:"预览"},previewImageStyle:{default:()=>({})},spaceProps:{default:()=>({})},spinProps:{default:()=>({})},previewSpinProps:{default:()=>({})},zoomRatio:{default:.1},minZoomScale:{default:.1},maxZoomScale:{default:10},resetOnDbclick:{type:Boolean,default:!0},draggable:{type:Boolean,default:!1},loop:{type:Boolean,default:!1},album:{type:Boolean,default:!1}},setup(r,{expose:q}){const l=r,v=e.ref([]),R=e.ref(null),i=e.ref(0),h=e.ref(!1),y=e.ref([]),z=e.ref([]),$=e.ref([]),D=e.ref([]),g=e.ref(0),o=e.ref(1),N=e.ref(1),k=e.ref(1),Z=e.ref(0),A=e.ref(0),c=e.ref(0),s=e.ref(0),m=e.ref(0),f=e.ref(0),C=e.ref(0),b=e.ref(0),S=e.ref(0),B=e.ref(0),M=e.ref(0),L=e.ref(0),{colorPalettes:F}=p.useInject("Image"),d=e.computed(()=>v.value.length),O=e.computed(()=>l.draggable?"100ms":"200ms");e.watchEffect(()=>{v.value=j()});function j(){return Array.isArray(l.src)?l.src:[{src:l.src||"",name:l.name}]}function K(a){z.value[a]=!0}function U(a){D.value[a]=!0}function w(a){if(a){if(a.name)return a.name;{const t=a.src.split("?")[0].split("/");return t[t.length-1]}}}function I(a,t){return Array.isArray(a)?typeof a[t]=="number"?`${a[t]}px`:a[t]:typeof a=="number"?`${a}px`:a}function G(a){h.value&&d.value>1&&((a.key==="ArrowLeft"||a.key==="ArrowUp")&&Y(),(a.key==="ArrowRight"||a.key==="ArrowDown")&&T())}async function W(a){o.value=1,g.value=0,c.value=0,s.value=0,h.value=!0,i.value=a,await e.nextTick(),R.value?.focus()}q({preview:W});function x(){h.value=!1}function J(){const a=v.value[i.value];p.downloadFile(a.src,a.name)}function Q(){o.value+l.zoomRatio>l.maxZoomScale?o.value=l.maxZoomScale:o.value=p.add(o.value,l.zoomRatio)}function _(){o.value-l.zoomRatio<l.minZoomScale?o.value=l.minZoomScale:o.value=p.add(o.value,-l.zoomRatio)}function V(){o.value=1,N.value=1,k.value=1,g.value=0,c.value=0,s.value=0}function ee(){g.value+=90}function te(){g.value-=90}function ae(){N.value*=-1}function le(){k.value*=-1}function oe(a){const t=a.deltaY*l.zoomRatio*.1;o.value===l.minZoomScale&&t>0||o.value===l.maxZoomScale&&t<0||(o.value-t<l.minZoomScale?o.value=l.minZoomScale:o.value-t>l.maxZoomScale?o.value=l.maxZoomScale:o.value=p.add(o.value,-t))}function re(a){if(!a.target)return;const t=a.target,u=t.getBoundingClientRect();C.value=u.top,b.value=u.bottom,S.value=u.right,B.value=u.left,M.value=window.innerWidth,L.value=window.innerHeight,Z.value=a.clientX,A.value=a.clientY,m.value=c.value,f.value=s.value,t.setPointerCapture(a.pointerId),document.addEventListener("pointermove",H),document.addEventListener("pointerup",E),document.addEventListener("pointercancel",E),H(a)}function H(a){c.value=m.value+a.clientX-Z.value,s.value=f.value+a.clientY-A.value}function E(){l.draggable?(c.value>m.value+M.value-S.value&&(c.value=m.value+M.value-S.value),c.value<m.value-B.value&&(c.value=m.value-B.value),s.value>f.value+L.value-b.value&&(s.value=f.value+L.value-b.value),s.value<f.value-C.value&&(s.value=f.value-C.value)):(c.value=0,s.value=0),document.removeEventListener("pointermove",H),document.removeEventListener("pointerup",E),document.removeEventListener("pointercancel",E)}function Y(){l.loop?i.value=(i.value-1+d.value)%d.value:i.value>0&&i.value--,V()}function T(){l.loop?i.value=(i.value+1)%d.value:i.value<d.value-1&&i.value++,V()}return(a,t)=>(e.openBlock(),e.createElementBlock("div",{class:"image-wrap",style:e.normalizeStyle(`--image-primary-color: ${e.unref(F)[5]};`)},[e.createVNode(e.unref(ie.default),e.mergeProps({gap:"small"},r.spaceProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(u,n)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:n,class:e.normalizeClass(["image-container",{"image-bordered":r.bordered,"image-hover-mask":!r.disabled&&(z.value[n]||y.value[n]?.naturalWidth)}]),style:e.normalizeStyle(`width: ${I(l.width,n)}; height: ${I(l.height,n)};`)},[e.createVNode(e.unref(X.default),e.mergeProps({spinning:!(z.value[n]||y.value[n]?.naturalWidth),color:"var(--image-primary-color)",indicator:"dynamic-circle",size:"small"},{ref_for:!0},r.spinProps),{default:e.withCtx(()=>[e.createElementVNode("img",{ref_for:!0,ref_key:"imagesRef",ref:y,class:"image-item",style:e.normalizeStyle(`object-fit: ${r.fit};`),onLoad:P=>K(n),src:u.src,alt:w(u)},null,44,ne)]),_:2},1040,["spinning"]),r.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:"image-mask",onClick:P=>W(n)},[e.createElementVNode("div",se,[t[1]||(t[1]=e.createElementVNode("svg",{class:"eye-svg",focusable:"false","data-icon":"eye",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"})],-1)),e.createElementVNode("p",ue,[e.renderSlot(a.$slots,"preview",{},()=>[e.createTextVNode(e.toDisplayString(r.preview),1)],!0)])])],8,ce))],6)),[[e.vShow,!r.album||r.album&&n===0]])),128))]),_:3},16),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",ve,null,512),[[e.vShow,h.value]])]),_:1}),e.createVNode(e.Transition,{name:"zoom","enter-from-class":"zoom-enter","enter-active-class":"zoom-enter","enter-to-class":"zoom-enter zoom-enter-active","leave-from-class":"zoom-leave","leave-active-class":"zoom-leave zoom-leave-active","leave-to-class":"zoom-leave zoom-leave-active"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"previewRef",ref:R,class:"preview-container",tabindex:"-1",onClick:e.withModifiers(x,["self"]),onWheel:e.withModifiers(oe,["prevent"]),onKeydown:[G,e.withKeys(x,["esc"])]},[e.createElementVNode("div",de,[e.createElementVNode("div",me,[e.createElementVNode("a",{class:"preview-name",href:v.value[i.value].src,target:"_blank",title:w(v.value[i.value])},e.toDisplayString(w(v.value[i.value])),9,fe),e.withDirectives(e.createElementVNode("p",{class:"preview-progress"},e.toDisplayString(i.value+1)+" / "+e.toDisplayString(d.value),513),[[e.vShow,Array.isArray(r.src)]]),e.createElementVNode("div",{class:"preview-operation",title:"关闭",onClick:x},[...t[2]||(t[2]=[e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"close",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"})],-1)])]),e.createElementVNode("div",{class:e.normalizeClass(["preview-operation",{"operation-disabled":o.value===r.maxZoomScale}]),title:"下载",onClick:J},[...t[3]||(t[3]=[e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"download",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"})],-1)])],2),e.createElementVNode("div",{class:e.normalizeClass(["preview-operation",{"operation-disabled":o.value===r.maxZoomScale}]),title:"放大",onClick:Q},[...t[4]||(t[4]=[e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"zoom-in",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"})],-1)])],2),e.createElementVNode("div",{class:e.normalizeClass(["preview-operation",{"operation-disabled":o.value===r.minZoomScale}]),title:"缩小",onClick:_},[...t[5]||(t[5]=[e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"zoom-out",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"})],-1)])],2),e.createElementVNode("div",{class:"preview-operation",title:"还原",onClick:V},[...t[6]||(t[6]=[e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"expand",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z"})],-1)])]),e.createElementVNode("div",{class:"preview-operation",title:"向右旋转",onClick:ee},[...t[7]||(t[7]=[e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"rotate-right",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"}),e.createElementVNode("path",{d:"M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"})],-1)])]),e.createElementVNode("div",{class:"preview-operation",title:"向左旋转",onClick:te},[...t[8]||(t[8]=[e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"rotate-left",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"}),e.createElementVNode("path",{d:"M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"})],-1)])]),e.createElementVNode("div",{class:"preview-operation",title:"水平镜像",onClick:ae},[...t[9]||(t[9]=[e.createElementVNode("svg",{class:"icon-svg",focusable:"false","data-icon":"swap",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"})],-1)])]),e.createElementVNode("div",{class:"preview-operation",title:"垂直镜像",onClick:le},[(e.openBlock(),e.createElementBlock("svg",he,[...t[10]||(t[10]=[e.createElementVNode("path",{d:"M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"},null,-1)])]))])]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(u,n)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:n,class:"preview-image-container",style:e.normalizeStyle(`--drag-transition-duration: ${O.value}; transform: translate3d(${c.value}px, ${s.value}px, 0px);`)},[e.createVNode(e.unref(X.default),e.mergeProps({spinning:!(D.value[n]||$.value[n]?.naturalWidth),color:"var(--image-primary-color)",indicator:"dynamic-circle"},{ref_for:!0},r.previewSpinProps),{default:e.withCtx(()=>[e.createElementVNode("img",{ref_for:!0,ref_key:"previewImagesRef",ref:$,class:"preview-image",style:e.normalizeStyle([r.previewImageStyle,`transform: scale3d(${N.value*o.value}, ${k.value*o.value}, 1) rotate(${g.value}deg);`]),onLoad:P=>U(n),src:u.src,alt:w(u),onPointerdown:e.withModifiers(re,["prevent"]),onDblclick:t[0]||(t[0]=P=>r.resetOnDbclick?V():()=>!1)},null,44,ge)]),_:2},1040,["spinning"])],4)),[[e.vShow,i.value===n]])),128)),d.value>1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:e.normalizeClass(["switch-left",{"switch-disabled":i.value===0&&!r.loop}]),onClick:Y},[...t[11]||(t[11]=[e.createElementVNode("svg",{class:"switch-svg",focusable:"false","data-icon":"left",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"})],-1)])],2),e.createElementVNode("div",{class:e.normalizeClass(["switch-right",{"switch-disabled":i.value===d.value-1&&!r.loop}]),onClick:T},[...t[12]||(t[12]=[e.createElementVNode("svg",{class:"switch-svg",focusable:"false","data-icon":"right",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"})],-1)])],2)],64)):e.createCommentVNode("",!0)])],544),[[e.vShow,h.value]])]),_:1})],4))}});exports.default=pe;