1 line
9.7 KiB
JavaScript
1 line
9.7 KiB
JavaScript
import{At as e,B as t,Et as n,G as r,H as i,K as a,Tt as o,U as s,Z as c,at as ee,ct as l,dt as u,g as te,ot as ne,ut as d,vt as f}from"./vue-B11_pI9F.js";import{t as p}from"./_plugin-vue_export-helper-B67ILkmu.js";var m=420,h={createRects(e){return[{from:{x:0,y:0,width:e.width,height:e.height,opacity:0},to:{x:0,y:0,width:e.width,height:e.height,opacity:1},delay:0,duration:m}]}},g=520,_={createRects(e){return[{from:{x:0,y:0,width:0,height:e.height},to:{x:0,y:0,width:e.width,height:e.height},delay:0,duration:g}]}},v=520,y={createRects(e){return[{from:{x:e.width,y:0,width:0,height:e.height},to:{x:0,y:0,width:e.width,height:e.height},delay:0,duration:v}]}},b=520,x={createRects(e){return[{from:{x:0,y:0,width:e.width,height:0},to:{x:0,y:0,width:e.width,height:e.height},delay:0,duration:b}]}},S=520,C={createRects(e){return[{from:{x:0,y:e.height,width:e.width,height:0},to:{x:0,y:0,width:e.width,height:e.height},delay:0,duration:S}]}},w=520,T=.5,E={createRects(e){let t=e.width/2,n=e.width/2+T;return[{from:{x:t,y:0,width:0,height:e.height},to:{x:t-n,y:0,width:n,height:e.height},delay:0,duration:w},{from:{x:t,y:0,width:0,height:e.height},to:{x:t,y:0,width:n,height:e.height},delay:0,duration:w}]}},D=520,O=.5,k={createRects(e){let t=e.height/2,n=e.height/2+O;return[{from:{x:0,y:t,width:e.width,height:0},to:{x:0,y:t-n,width:e.width,height:n},delay:0,duration:D},{from:{x:0,y:t,width:e.width,height:0},to:{x:0,y:t,width:e.width,height:n},delay:0,duration:D}]}},A=560,j={createRects(e){return[{from:{x:e.width/2,y:e.height/2,width:0,height:0},to:{x:0,y:0,width:e.width,height:e.height},delay:0,duration:A}]}},M=12,N=4,P=.5,F=130,I=220,L={createRects(e){let t=e.cols??M,n=e.rows??Math.max(N,Math.round(t*(e.height/e.width))),r=e.width/t,i=e.height/n,a=[];for(let e=0;e<n;e++)for(let n=0;n<t;n++)a.push({from:{x:n*r,y:e*i,width:r+P,height:i+P,opacity:0},to:{x:n*r,y:e*i,width:r+P,height:i+P,opacity:1},delay:(n+e)%2==0?0:F,duration:I});return a}},R=18,z=.5,B=.8,re=320;function ie(e){let t=[...e];for(let e=t.length-1;e>0;e--){let n=Math.floor(Math.random()*(e+1)),r=t[e];t[e]=t[n],t[n]=r}return t}var ae={createRects(e){let t=e.rows??R,n=e.height/t;return ie(Array.from({length:t},(t,r)=>{let i=r*n;return{from:{x:0,y:i,width:0,height:n+z},to:{x:0,y:i,width:e.width,height:n+z},delay:r*e.stagger*B,duration:re}})).map((t,n)=>({...t,delay:n*e.stagger*B}))}},oe=18,V=.5,H=.8,U=320;function W(e){let t=[...e];for(let e=t.length-1;e>0;e--){let n=Math.floor(Math.random()*(e+1)),r=t[e];t[e]=t[n],t[n]=r}return t}var G={createRects(e){let t=e.cols??oe,n=e.width/t;return W(Array.from({length:t},(t,r)=>{let i=r*n;return{from:{x:i,y:0,width:n+V,height:0},to:{x:i,y:0,width:n+V,height:e.height},delay:r*e.stagger*H,duration:U}})).map((t,n)=>({...t,delay:n*e.stagger*H}))}},K=28,q=.5,se=1,ce={createRects(e){let t=e.rows??K,n=e.height/t,r=[];for(let i=0;i<t;i++){let t=i*n+n/2,a=n/2+q,o=i*e.stagger*se;r.push({from:{x:0,y:t,width:e.width,height:0},to:{x:0,y:t-a,width:e.width,height:a},delay:o}),r.push({from:{x:0,y:t,width:e.width,height:0},to:{x:0,y:t,width:e.width,height:a},delay:o})}return r}},le=16,ue=.5,de=1,fe={createRects(e){let t=e.cols??le,n=e.width/t,r=[];for(let i=0;i<t;i++){let t=i*n+n/2,a=n/2+ue,o=i*e.stagger*de;r.push({from:{x:t,y:0,width:0,height:e.height},to:{x:t-a,y:0,width:a,height:e.height},delay:o}),r.push({from:{x:t,y:0,width:0,height:e.height},to:{x:t,y:0,width:a,height:e.height},delay:o})}return r}},pe=14,me=4,J=.5,he=.15,ge=120;function _e(e){let t=[...e];for(let e=t.length-1;e>0;e--){let n=Math.floor(Math.random()*(e+1)),r=t[e];t[e]=t[n],t[n]=r}return t}var ve={createRects(e){let t=e.cols??pe,n=e.rows??Math.max(me,Math.round(t*(e.height/e.width))),r=e.width/t,i=e.height/n,a=e.stagger*he,o=[];for(let e=0;e<t;e++)_e(Array.from({length:n},(e,t)=>t)).forEach((t,s)=>{o.push({from:{x:e*r,y:t*i,width:r+J,height:i+J,opacity:0},to:{x:e*r,y:t*i,width:r+J,height:i+J,opacity:1},delay:(e*n+s)*a,duration:ge})});return o}},ye=12,be=4,Y=.5,xe=.25,Se=120;function Ce(e){let t=[...e];for(let e=t.length-1;e>0;e--){let n=Math.floor(Math.random()*(e+1)),r=t[e];t[e]=t[n],t[n]=r}return t}var we={createRects(e){let t=e.cols??ye,n=e.rows??Math.max(be,Math.round(t*(e.height/e.width))),r=e.width/t,i=e.height/n,a=e.stagger*xe;return Ce(Array.from({length:n*t},(e,n)=>{let o=n%t,s=Math.floor(n/t);return{from:{x:o*r,y:s*i,width:r+Y,height:i+Y,opacity:0},to:{x:o*r,y:s*i,width:r+Y,height:i+Y,opacity:1},delay:n*a,duration:Se}})).map((e,t)=>({...e,delay:t*a}))}},X=[`fade`,`wipe-right`,`wipe-left`,`wipe-down`,`wipe-up`,`split-vertical`,`split-horizontal`,`box`,`checkerboard`,`random-bars-horizontal`,`random-bars-vertical`,`horizontal-blinds`,`vertical-blinds`,`column-grid`,`random-grid`],Z={fade:h,"wipe-right":_,"wipe-left":y,"wipe-down":x,"wipe-up":C,"split-vertical":E,"split-horizontal":k,box:j,checkerboard:L,"random-bars-horizontal":ae,"random-bars-vertical":G,"horizontal-blinds":ce,"vertical-blinds":fe,"column-grid":ve,"random-grid":we},Te={class:`svg-mask-switcher-layer svg-mask-switcher-transition`},Ee=[`viewBox`],De=[`width`,`height`],Oe=[`width`,`height`],Q=[`x`,`y`,`width`,`height`,`opacity`],ke=[`width`,`height`,`mask`],Ae={class:`svg-mask-switcher-foreign`,xmlns:`http://www.w3.org/1999/xhtml`},je=p(c({__name:`SvgMaskSwitcher`,props:{switchKey:{},item:{},effect:{default:`horizontal-blinds`},duration:{default:520},stagger:{default:18},rows:{},cols:{},disabled:{type:Boolean,default:!1}},emits:[`before-switch`,`after-switch`],setup(c,{emit:p}){let m=0,h=c,g=p,_=o(),v=n(h.item),y=n(),b=o(!1),x=o(Z[h.effect].createRects({width:1,height:1,stagger:h.stagger})),S=o(0),C=o({width:1,height:1}),w=`svg-mask-switcher-${m++}`,T=i(()=>`url(#${w})`),E=0,D=!1,O=i(()=>x.value.reduce((e,t)=>Math.max(e,t.delay+(t.duration??h.duration)),0)),k=i(()=>x.value.map(e=>{let t=M(S.value,e.delay,e.duration??h.duration);return{x:j(e.from.x,e.to.x,t),y:j(e.from.y,e.to.y,t),width:j(e.from.width,e.to.width,t),height:j(e.from.height,e.to.height,t),opacity:j(A(e.from),A(e.to),t)}}));function A(e){return e.opacity??1}function j(e,t,n){return e+(t-e)*N(n)}function M(e,t,n){return e<=t?0:Math.min((e-t)/n,1)}function N(e){return 1-(1-e)**3}function P(){if(!_.value)return;let e=_.value.getBoundingClientRect();e.width<=0||e.height<=0||(C.value={width:e.width,height:e.height})}function F(){E&&(cancelAnimationFrame(E),E=0)}function I(){F(),S.value=O.value,y.value=void 0,b.value=!1,g(`after-switch`)}function L(){let e=0,t=n=>{if(e||(e=n),S.value=n-e,S.value>=O.value){I();return}E=requestAnimationFrame(t)};E=requestAnimationFrame(t)}function R(e){if(F(),P(),h.disabled||C.value.width<=0||C.value.height<=0){y.value=void 0,v.value=e,b.value=!1;return}y.value=v.value,v.value=e,x.value=Z[h.effect].createRects({width:C.value.width,height:C.value.height,rows:h.rows,cols:h.cols,stagger:h.stagger}),S.value=0,b.value=!0,g(`before-switch`),L()}return f(()=>[h.switchKey,h.item],([e,t],n)=>{let r=n?.[0];if(!D){D=!0,v.value=t;return}if(e===r){v.value=t;return}R(t)},{immediate:!0}),te(_,P),ne(P),ee(F),(n,i)=>(l(),a(`div`,{ref_key:`$container`,ref:_,class:e([`svg-mask-switcher`,{"is-animating":b.value}])},[s(`div`,{class:e([`svg-mask-switcher-layer svg-mask-switcher-current`,{"is-hidden":b.value}])},[u(n.$slots,`to`,{item:v.value,phase:`current`,isAnimating:b.value},()=>[u(n.$slots,`default`,{item:v.value,phase:`current`,isAnimating:b.value},void 0,!0)],!0)],2),b.value?(l(),a(t,{key:0},[s(`div`,Te,[u(n.$slots,`from`,{item:y.value,phase:`from`,isAnimating:!0},()=>[u(n.$slots,`default`,{item:y.value,phase:`from`,isAnimating:!0},void 0,!0)],!0)]),(l(),a(`svg`,{class:`svg-mask-switcher-layer svg-mask-switcher-svg svg-mask-switcher-transition`,viewBox:`0 0 ${C.value.width} ${C.value.height}`},[s(`defs`,null,[s(`mask`,{id:w,x:`0`,y:`0`,width:C.value.width,height:C.value.height,maskUnits:`userSpaceOnUse`,style:{"mask-type":`luminance`}},[s(`rect`,{x:`0`,y:`0`,width:C.value.width,height:C.value.height,fill:`black`},null,8,Oe),(l(!0),a(t,null,d(k.value,(e,t)=>(l(),a(`rect`,{key:t,x:e.x,y:e.y,width:e.width,height:e.height,opacity:e.opacity,fill:`white`,"shape-rendering":`crispEdges`},null,8,Q))),128))],8,De)]),(l(),a(`foreignObject`,{x:`0`,y:`0`,width:C.value.width,height:C.value.height,mask:T.value},[s(`div`,Ae,[u(n.$slots,`to`,{item:v.value,phase:`to`,isAnimating:!0},()=>[u(n.$slots,`default`,{item:v.value,phase:`to`,isAnimating:!0},void 0,!0)],!0)])],8,ke))],8,Ee))],64)):r(``,!0)],2))}}),[[`__scopeId`,`data-v-4ae14c95`]]),Me=[`fade`,`wipe-right`,`wipe-left`,`wipe-down`,`wipe-up`,`split-vertical`,`split-horizontal`,`box`,`checkerboard`,`random-bars-horizontal`,`random-bars-vertical`,`horizontal-blinds`,`vertical-blinds`],Ne=`screen.transitionEffect`,$=`none`,Pe=`fade`,Fe=`fade`,Ie=`fast`,Le={"column-grid":`checkerboard`,"random-grid":`checkerboard`,random:Fe},Re={none:`screen.transitionEffects.none`,fade:`screen.transitionEffects.fade`,"wipe-right":`screen.transitionEffects.wipe-right`,"wipe-left":`screen.transitionEffects.wipe-left`,"wipe-down":`screen.transitionEffects.wipe-down`,"wipe-up":`screen.transitionEffects.wipe-up`,"split-vertical":`screen.transitionEffects.split-vertical`,"split-horizontal":`screen.transitionEffects.split-horizontal`,box:`screen.transitionEffects.box`,checkerboard:`screen.transitionEffects.checkerboard`,"random-bars-horizontal":`screen.transitionEffects.random-bars-horizontal`,"random-bars-vertical":`screen.transitionEffects.random-bars-vertical`,"horizontal-blinds":`screen.transitionEffects.horizontal-blinds`,"vertical-blinds":`screen.transitionEffects.vertical-blinds`,"column-grid":`screen.transitionEffects.column-grid`,"random-grid":`screen.transitionEffects.random-grid`,random:`screen.transitionEffects.random`};function ze(e){return e===`none`||e===`random`||X.includes(e)?e:$}function Be(e){return e===`none`?!1:{effect:Me.includes(e)?e:Le[e]??`fade`,speed:Ie,advanceOnClick:!0}}export{Re as a,X as c,ze as i,$ as n,Be as o,Ne as r,je as s,Pe as t}; |