Socket
Socket
Sign inDemoInstall

@motionone/vue

Package Overview
Dependencies
Maintainers
2
Versions
52
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@motionone/vue - npm Package Compare versions

Comparing version 10.5.1 to 10.5.2

2

dist/motion-vue.min.js

@@ -1,1 +0,1 @@

import{defineComponent as t,ref as e,inject as n,provide as i,onMounted as s,onUpdated as a,h as r,onBeforeUpdate as o,Transition as l}from"vue";const c=new WeakMap;function u(t){return c.has(t)||c.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),c.get(t)}function h(t,e){-1===t.indexOf(e)&&t.push(e)}const p=()=>{},d=t=>t,f=["","X","Y","Z"],m={x:"translateX",y:"translateY",z:"translateZ"},y={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},v={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:y,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:d},skew:y},g=new Map,b=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{f.forEach((e=>{w.push(t+e),g.set(b(t+e),v[t])}))}));const O=(t,e)=>w.indexOf(t)-w.indexOf(e),x=new Set(w),E=t=>x.has(t),S=(t,e)=>{m[e]&&(e=m[e]);const{transforms:n}=u(t);h(n,e),t.style.transform=j(n)},j=t=>t.sort(O).reduce(A,"").trim(),A=(t,e)=>`${t} ${e}(var(${b(e)}))`,T=t=>t.startsWith("--"),k=new Set;function M(t){if(!k.has(t)){k.add(t);try{const{syntax:e,initialValue:n}=g.has(t)?g.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}const D=t=>1e3*t,P=t=>"number"==typeof t,L=t=>Array.isArray(t)&&!P(t[0]),B=t=>"object"==typeof t&&Boolean(t.createAnimation),V=t=>(t=>Array.isArray(t)&&P(t[0]))(t)?$(t):t,$=t=>{let[e,n,i,s]=t;return`cubic-bezier(${e}, ${n}, ${i}, ${s})`},C=t=>document.createElement("div").animate(t,{duration:.001}),U={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{C({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(C({opacity:[0,1]}).finished)},I={},W={};for(const t in U)W[t]=()=>(void 0===I[t]&&(I[t]=U[t]()),I[t]);const F={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},R=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function q(t,e,n,i){if(t===e&&n===i)return d;const s=e=>function(t,e,n,i,s){let a,r,o=0;do{r=e+(n-e)/2,a=R(r,i,s)-t,a>0?n=r:e=r}while(Math.abs(a)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:R(s(t),e,i)}const z=(t,e,n)=>Math.min(Math.max(n,t),e),G={ease:q(.25,.1,.25,1),"ease-in":q(.42,0,1,1),"ease-in-out":q(.42,0,.58,1),"ease-out":q(0,0,.58,1)},K=/\((.*?)\)/;function X(t){if("function"==typeof t)return t;if(Array.isArray(t))return q(...t);if(G[t])return G[t];if(t.startsWith("steps")){const e=K.exec(t);if(e){const t=e[1].split(",");return function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"end";return n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,s="end"===e?Math.floor(i):Math.ceil(i);return z(0,1,s/t)}}(parseFloat(t[0]),t[1].trim())}}return d}const Y=(t,e,n)=>-n*t+n*e+t,Z=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function H(t,e){return L(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}function J(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=Z(0,e,i);t.push(Y(n,1,s))}}function N(t){const e=[0];return J(e,t-1),e}const Q=t=>Math.min(1,Math.max(t,0));class _{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,1],{easing:n=F.easing,duration:i=F.duration,delay:s=F.delay,endDelay:a=F.endDelay,repeat:r=F.repeat,offset:o,direction:l="normal"}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const c=i*(r+1);B(n)&&(n="ease");const u=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:N(t.length),n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:d;const i=t.length,s=i-e.length;return s>0&&J(e,s),s=>{let a=0;for(;a<i-2&&!(s<e[a+1]);a++);let r=Q(Z(e[a],e[a+1],s));return r=H(n,a)(r),Y(t[a],t[a+1],r)}}(e,o,L(n)?n.map(X):X(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let r=(e-this.startTime)*this.rate;this.t=r,r/=1e3,r=Math.max(r-s,0),"finished"===this.playState&&(r=c);const o=r/i;let h=Math.floor(o),p=o%1;!p&&o>=1&&(p=1),1===p&&h--;const d=h%2;("reverse"===l||"alternate"===l&&d||"alternate-reverse"===l&&!d)&&(p=1-p);const f=u(r>=c?1:Math.min(p,1));t(f);"finished"===this.playState||r>=c+a?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,f)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function tt(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}const et=t=>Array.isArray(t)?t:[t];function nt(t){return m[t]&&(t=m[t]),E(t)?b(t):t}const it=(t,e)=>{e=nt(e);let n=T(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=g.get(e);t&&(n=t.initialValue)}return n},st=(t,e,n)=>{e=nt(e),T(e)?t.style.setProperty(e,n):t.style[e]=n};function at(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function rt(t,e,n){let i,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},{duration:a=F.duration,delay:r=F.delay,endDelay:o=F.endDelay,repeat:l=F.repeat,easing:c=F.easing,direction:h,offset:d,allowWebkitAcceleration:f=!1}=s;const m=u(t);let y=W.waapi();const v=E(e);v&&S(t,e);const b=nt(e),w=g.get(b);return at(m.animations[b]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=it(t,b))&&void 0!==e?e:null==w?void 0:w.initialValue)&&void 0!==n?n:0};let u=tt(et(n),e);if(B(c)){const t=c.createAnimation(u,e,v,b,m);c=t.easing,void 0!==t.keyframes&&(u=t.keyframes),void 0!==t.duration&&(a=t.duration)}if(T(b)&&(W.cssRegisterProperty()?M(b):y=!1),y){w&&(u=u.map((t=>P(t)?w.toDefaultUnit(t):t))),W.partialKeyframes()||1!==u.length||u.unshift(e());const n={delay:D(r),duration:D(a),endDelay:D(o),easing:L(c)?void 0:V(c),direction:h,iterations:l+1,fill:"both"};i=t.animate({[b]:u,offset:d,easing:L(c)?c.map(V):void 0},n),i.finished||(i.finished=new Promise(((t,e)=>{i.onfinish=t,i.oncancel=e})));const s=u[u.length-1];i.finished.then((()=>{st(t,b,s),i.cancel()})).catch(p),f||(i.playbackRate=1.000001)}else if(v&&u.every(P)){1===u.length&&u.unshift(parseFloat(e()));i=new _((e=>{w&&(e=w.toDefaultUnit(e)),st(t,b,e)}),u,Object.assign(Object.assign({},s),{duration:a,easing:c}))}else{const e=u[u.length-1];st(t,b,w&&P(e)?w.toDefaultUnit(e):e)}return m.animations[b]=i,null==i||i.finished.then((()=>{m.animations[b]=void 0,m.generators[b]=void 0,m.prevGeneratorState[b]=void 0})).catch(p),i}}const ot=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function lt(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(i=Object.getOwnPropertySymbols(t);s<i.length;s++)e.indexOf(i[s])<0&&Object.prototype.propertyIsEnumerable.call(t,i[s])&&(n[i[s]]=t[i[s]])}return n}function ct(t,e){return typeof t!=typeof e||(Array.isArray(t)&&Array.isArray(e)?!function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(t,e):t!==e)}function ut(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let ht;function pt(){if(!ht)return;const t=ht.sort(mt).map(yt);t.forEach(vt),t.forEach(vt),ht=void 0}function dt(t){ht?h(ht,t):(ht=[t],requestAnimationFrame(pt))}function ft(t){ht&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(ht,t)}const mt=(t,e)=>t.getDepth()-e.getDepth(),yt=t=>t.animateUpdates(),vt=t=>t.next(),gt=(t,e)=>new CustomEvent(t,{detail:{target:e}});function bt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function wt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const Ot=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),bt(t,e,i))},xt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,e)=>{let{enable:n,disable:i}=e,s=!1;if("undefined"!=typeof IntersectionObserver){const e=new IntersectionObserver((e=>{let[a]=e;!s&&a.isIntersecting?(n(),wt(t,"viewenter",a)):s&&!a.isIntersecting&&(i(),wt(t,"viewleave",a)),s=a.isIntersecting}));return e.observe(t),()=>{e.unobserve(t),e.disconnect()}}return n(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const s=Ot(t,"hoverstart",n),a=Ot(t,"hoverend",i);return t.addEventListener("pointerenter",s),t.addEventListener("pointerleave",a),()=>{t.removeEventListener("pointerenter",s),t.removeEventListener("pointerleave",a)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const s=e=>{i(),bt(t,"pressend",e),window.removeEventListener("pointerup",s)},a=e=>{n(),bt(t,"pressstart",e),window.addEventListener("pointerup",s)};return t.addEventListener("pointerdown",a),()=>{t.removeEventListener("pointerdown",a),window.removeEventListener("pointerup",s)}}}},Et=["initial","animate",...Object.keys(xt),"exit"],St=new WeakMap;function jt(t){const e={},n=[];for(let i in t){const s=t[i];E(i)&&(m[i]&&(i=m[i]),n.push(i),i=b(i));let a=Array.isArray(s)?s[0]:s;const r=g.get(i);r&&(a=P(s)?r.toDefaultUnit(s):s),e[i]=a}return n.length&&(e.transform=j(n)),e}const At={type:Object},Tt=t({name:"Motion",inheritAttrs:!0,props:{tag:{type:String,default:"div"},initial:At,animate:At,inView:At,hover:At,press:At,exit:At,transition:{type:Object},style:{type:Object}},setup(t){const r=e(null),o=n("motion-state",void 0),l=n("motion-presence",void 0),c=function(){let t,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1?arguments[1]:void 0,i=n?n.getDepth()+1:0;const s={initial:!0,animate:!0},a={},r={};for(const t of Et)r[t]="string"==typeof e[t]?e[t]:null==n?void 0:n.getContext()[t];const o=!1===e.initial?"animate":"initial";let l=lt(ut(e[o]||r[o],e.variants)||{},["transition"]);const c=Object.assign({},l);function*u(){var n,i;const a=l;l={};const r={},o={},u={};for(const t of Et){if(!s[t])continue;const a=ut(e[t]);if(a){r[t]=a;for(const s in a)"transition"!==s&&(l[s]=a[s],u[s]=ot(null!==(i=null!==(n=a.transition)&&void 0!==n?n:e.transition)&&void 0!==i?i:{},s),o[s]=t)}}const h=new Set([...Object.keys(l),...Object.keys(a)]),d=[];h.forEach((e=>{var n;void 0===l[e]&&(l[e]=c[e]),ct(a[e],l[e])&&(null!==(n=c[e])&&void 0!==n||(c[e]=it(t,e)),d.push(rt(t,e,l[e],u[e])))})),yield;const f=d.map((t=>t())).filter(Boolean);if(!f.length)return;const m=l;t.dispatchEvent(gt("motionstart",m)),Promise.all(f.map((t=>t.finished))).then((()=>{t.dispatchEvent(gt("motioncomplete",m))})).catch(p)}const h=(t,e)=>()=>{s[t]=e,dt(f)},d=()=>{for(const n in xt){const i=xt[n].isActive(e),s=a[n];i&&!s?a[n]=xt[n].subscribe(t,{enable:h(n,!0),disable:h(n,!1)}):!i&&s&&(s(),delete a[n])}},f={update:n=>{t&&(e=n,d(),dt(f))},setActive:(e,n)=>{t&&(s[e]=n,dt(f))},animateUpdates:u,getDepth:()=>i,getTarget:()=>l,getOptions:()=>e,getContext:()=>r,mount:e=>(t=e,St.set(t,f),d(),()=>{St.delete(t),ft(f);for(const t in a)a[t]()}),isMounted:()=>Boolean(t)};return f}(Object.assign(Object.assign({},t),{initial:!1===(null==l?void 0:l.initial)?l.initial:t.initial}),o);i("motion-state",c),s((()=>{const e=c.mount(r.value);return c.update(Object.assign({},t)),e}));let u=!1;return a((()=>{if(!u&&r.value){u=!0;const t=jt(c.getTarget());for(const e in t)st(r.value,e,t[e])}c.update(Object.assign({},t))})),{state:c,root:r,initialStyles:jt(c.getTarget())}},render(){var t,e;return r(this.tag,{ref:"root",style:this.state.isMounted()?this.style:Object.assign(Object.assign({},this.style),this.initialStyles)},null===(e=(t=this.$slots).default)||void 0===e?void 0:e.call(t))}}),kt=new WeakMap;function Mt(t){const e=kt.get(t);e&&t.removeEventListener("motioncomplete",e),kt.delete(t)}const Dt=t({name:"Presence",props:{name:{type:String},initial:{type:Boolean,default:!0},exitBeforeEnter:{type:Boolean,default:!1}},methods:{enter(t){const e=St.get(t);e&&(Mt(t),e.setActive("exit",!1))},exit(t,e){const n=St.get(t);if(!n)return e();n.setActive("exit",!0),Mt(t),kt.set(t,e),t.addEventListener("motioncomplete",e)}},setup(t){let{initial:e}=t;const n={initial:e};i("motion-presence",n),o((()=>{n.initial=void 0}))},render(){return r(l,{name:this.name,onEnter:this.enter,onLeave:this.exit,css:!1,mode:this.exitBeforeEnter?"out-in":void 0},this.$slots.default)}});export{Tt as Motion,Dt as Presence};
var Motion=function(t,e){"use strict";const n=new WeakMap;function i(t){return n.has(t)||n.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),n.get(t)}function s(t,e){-1===t.indexOf(e)&&t.push(e)}const r=()=>{},a=t=>t,o=["","X","Y","Z"],l={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:a},skew:c},h=new Map,d=t=>`--motion-${t}`,p=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{o.forEach((e=>{p.push(t+e),h.set(d(t+e),u[t])}))}));const f=(t,e)=>p.indexOf(t)-p.indexOf(e),m=new Set(p),y=t=>m.has(t),v=(t,e)=>{l[e]&&(e=l[e]);const{transforms:n}=i(t);s(n,e),t.style.transform=g(n)},g=t=>t.sort(f).reduce(b,"").trim(),b=(t,e)=>`${t} ${e}(var(${d(e)}))`,w=t=>t.startsWith("--"),O=new Set;function j(t){if(!O.has(t)){O.add(t);try{const{syntax:e,initialValue:n}=h.has(t)?h.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}const x=t=>1e3*t,E=t=>"number"==typeof t,S=t=>Array.isArray(t)&&!E(t[0]),A=t=>"object"==typeof t&&Boolean(t.createAnimation),T=t=>(t=>Array.isArray(t)&&E(t[0]))(t)?M(t):t,M=t=>{let[e,n,i,s]=t;return`cubic-bezier(${e}, ${n}, ${i}, ${s})`},k=t=>document.createElement("div").animate(t,{duration:.001}),D={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{k({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(k({opacity:[0,1]}).finished)},P={},B={};for(const t in D)B[t]=()=>(void 0===P[t]&&(P[t]=D[t]()),P[t]);const L={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},V=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function C(t,e,n,i){if(t===e&&n===i)return a;const s=e=>function(t,e,n,i,s){let r,a,o=0;do{a=e+(n-e)/2,r=V(a,i,s)-t,r>0?n=a:e=a}while(Math.abs(r)>1e-7&&++o<12);return a}(e,0,1,t,n);return t=>0===t||1===t?t:V(s(t),e,i)}const U=(t,e,n)=>Math.min(Math.max(n,t),e),$={ease:C(.25,.1,.25,1),"ease-in":C(.42,0,1,1),"ease-in-out":C(.42,0,.58,1),"ease-out":C(0,0,.58,1)},I=/\((.*?)\)/;function W(t){if("function"==typeof t)return t;if(Array.isArray(t))return C(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=I.exec(t);if(e){const t=e[1].split(",");return function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"end";return n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,s="end"===e?Math.floor(i):Math.ceil(i);return U(0,1,s/t)}}(parseFloat(t[0]),t[1].trim())}}return a}const F=(t,e,n)=>-n*t+n*e+t,R=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function q(t,e){return S(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}function z(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=R(0,e,i);t.push(F(n,1,s))}}function G(t){const e=[0];return z(e,t-1),e}const K=t=>Math.min(1,Math.max(t,0));class X{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,1],{easing:n=L.easing,duration:i=L.duration,delay:s=L.delay,endDelay:r=L.endDelay,repeat:o=L.repeat,offset:l,direction:c="normal"}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const u=i*(o+1);A(n)&&(n="ease");const h=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:G(t.length),n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:a;const i=t.length,s=i-e.length;return s>0&&z(e,s),s=>{let r=0;for(;r<i-2&&!(s<e[r+1]);r++);let a=K(R(e[r],e[r+1],s));return a=q(n,r)(a),F(t[r],t[r+1],a)}}(e,l,S(n)?n.map(W):W(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let a=(e-this.startTime)*this.rate;this.t=a,a/=1e3,a=Math.max(a-s,0),"finished"===this.playState&&(a=u);const o=a/i;let l=Math.floor(o),d=o%1;!d&&o>=1&&(d=1),1===d&&l--;const p=l%2;("reverse"===c||"alternate"===c&&p||"alternate-reverse"===c&&!p)&&(d=1-d);const f=h(a>=u?1:Math.min(d,1));t(f);"finished"===this.playState||a>=u+r?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,f)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function Y(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}const Z=t=>Array.isArray(t)?t:[t];function _(t){return l[t]&&(t=l[t]),y(t)?d(t):t}const H=(t,e)=>{e=_(e);let n=w(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=h.get(e);t&&(n=t.initialValue)}return n},J=(t,e,n)=>{e=_(e),w(e)?t.style.setProperty(e,n):t.style[e]=n};function N(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function Q(t,e,n){let s,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},{duration:o=L.duration,delay:l=L.delay,endDelay:c=L.endDelay,repeat:u=L.repeat,easing:d=L.easing,direction:p,offset:f,allowWebkitAcceleration:m=!1}=a;const g=i(t);let b=B.waapi();const O=y(e);O&&v(t,e);const M=_(e),k=h.get(M);return N(g.animations[M]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=H(t,M))&&void 0!==e?e:null==k?void 0:k.initialValue)&&void 0!==n?n:0};let i=Y(Z(n),e);if(A(d)){const t=d.createAnimation(i,e,O,M,g);d=t.easing,void 0!==t.keyframes&&(i=t.keyframes),void 0!==t.duration&&(o=t.duration)}if(w(M)&&(B.cssRegisterProperty()?j(M):b=!1),b){k&&(i=i.map((t=>E(t)?k.toDefaultUnit(t):t))),B.partialKeyframes()||1!==i.length||i.unshift(e());const n={delay:x(l),duration:x(o),endDelay:x(c),easing:S(d)?void 0:T(d),direction:p,iterations:u+1,fill:"both"};s=t.animate({[M]:i,offset:f,easing:S(d)?d.map(T):void 0},n),s.finished||(s.finished=new Promise(((t,e)=>{s.onfinish=t,s.oncancel=e})));const a=i[i.length-1];s.finished.then((()=>{J(t,M,a),s.cancel()})).catch(r),m||(s.playbackRate=1.000001)}else if(O&&i.every(E)){1===i.length&&i.unshift(parseFloat(e()));s=new X((e=>{k&&(e=k.toDefaultUnit(e)),J(t,M,e)}),i,Object.assign(Object.assign({},a),{duration:o,easing:d}))}else{const e=i[i.length-1];J(t,M,k&&E(e)?k.toDefaultUnit(e):e)}return g.animations[M]=s,null==s||s.finished.then((()=>{g.animations[M]=void 0,g.generators[M]=void 0,g.prevGeneratorState[M]=void 0})).catch(r),s}}const tt=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function et(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(i=Object.getOwnPropertySymbols(t);s<i.length;s++)e.indexOf(i[s])<0&&Object.prototype.propertyIsEnumerable.call(t,i[s])&&(n[i[s]]=t[i[s]])}return n}function nt(t,e){return typeof t!=typeof e||(Array.isArray(t)&&Array.isArray(e)?!function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(t,e):t!==e)}function it(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let st;function rt(){if(!st)return;const t=st.sort(lt).map(ct);t.forEach(ut),t.forEach(ut),st=void 0}function at(t){st?s(st,t):(st=[t],requestAnimationFrame(rt))}function ot(t){st&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(st,t)}const lt=(t,e)=>t.getDepth()-e.getDepth(),ct=t=>t.animateUpdates(),ut=t=>t.next(),ht=(t,e)=>new CustomEvent(t,{detail:{target:e}});function dt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function pt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const ft=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),dt(t,e,i))},mt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,e)=>{let{enable:n,disable:i}=e,s=!1;if("undefined"!=typeof IntersectionObserver){const e=new IntersectionObserver((e=>{let[r]=e;!s&&r.isIntersecting?(n(),pt(t,"viewenter",r)):s&&!r.isIntersecting&&(i(),pt(t,"viewleave",r)),s=r.isIntersecting}));return e.observe(t),()=>{e.unobserve(t),e.disconnect()}}return n(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const s=ft(t,"hoverstart",n),r=ft(t,"hoverend",i);return t.addEventListener("pointerenter",s),t.addEventListener("pointerleave",r),()=>{t.removeEventListener("pointerenter",s),t.removeEventListener("pointerleave",r)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const s=e=>{i(),dt(t,"pressend",e),window.removeEventListener("pointerup",s)},r=e=>{n(),dt(t,"pressstart",e),window.addEventListener("pointerup",s)};return t.addEventListener("pointerdown",r),()=>{t.removeEventListener("pointerdown",r),window.removeEventListener("pointerup",s)}}}},yt=["initial","animate",...Object.keys(mt),"exit"],vt=new WeakMap;function gt(t){const e={},n=[];for(let i in t){const s=t[i];y(i)&&(l[i]&&(i=l[i]),n.push(i),i=d(i));let r=Array.isArray(s)?s[0]:s;const a=h.get(i);a&&(r=E(s)?a.toDefaultUnit(s):s),e[i]=r}return n.length&&(e.transform=g(n)),e}const bt="motion-state",wt="motion-presence",Ot={type:Object},jt=e.defineComponent({name:"Motion",inheritAttrs:!0,props:{tag:{type:String,default:"div"},initial:Ot,animate:Ot,inView:Ot,hover:Ot,press:Ot,exit:Ot,transition:{type:Object},style:{type:Object}},setup(t){const n=e.ref(null),i=e.inject(bt,void 0),s=e.inject(wt,void 0),a=function(){let t,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1?arguments[1]:void 0,i=n?n.getDepth()+1:0;const s={initial:!0,animate:!0},a={},o={};for(const t of yt)o[t]="string"==typeof e[t]?e[t]:null==n?void 0:n.getContext()[t];const l=!1===e.initial?"animate":"initial";let c=et(it(e[l]||o[l],e.variants)||{},["transition"]);const u=Object.assign({},c);function*h(){var n,i;const a=c;c={};const o={},l={},h={};for(const t of yt){if(!s[t])continue;const r=it(e[t]);if(r){o[t]=r;for(const s in r)"transition"!==s&&(c[s]=r[s],h[s]=tt(null!==(i=null!==(n=r.transition)&&void 0!==n?n:e.transition)&&void 0!==i?i:{},s),l[s]=t)}}const d=new Set([...Object.keys(c),...Object.keys(a)]),p=[];d.forEach((e=>{var n;void 0===c[e]&&(c[e]=u[e]),nt(a[e],c[e])&&(null!==(n=u[e])&&void 0!==n||(u[e]=H(t,e)),p.push(Q(t,e,c[e],h[e])))})),yield;const f=p.map((t=>t())).filter(Boolean);if(!f.length)return;const m=c;t.dispatchEvent(ht("motionstart",m)),Promise.all(f.map((t=>t.finished))).then((()=>{t.dispatchEvent(ht("motioncomplete",m))})).catch(r)}const d=(t,e)=>()=>{s[t]=e,at(f)},p=()=>{for(const n in mt){const i=mt[n].isActive(e),s=a[n];i&&!s?a[n]=mt[n].subscribe(t,{enable:d(n,!0),disable:d(n,!1)}):!i&&s&&(s(),delete a[n])}},f={update:n=>{t&&(e=n,p(),at(f))},setActive:(e,n)=>{t&&(s[e]=n,at(f))},animateUpdates:h,getDepth:()=>i,getTarget:()=>c,getOptions:()=>e,getContext:()=>o,mount:e=>(t=e,vt.set(t,f),p(),()=>{vt.delete(t),ot(f);for(const t in a)a[t]()}),isMounted:()=>Boolean(t)};return f}(Object.assign(Object.assign({},t),{initial:!1===(null==s?void 0:s.initial)?s.initial:t.initial}),i);e.provide(bt,a),e.onMounted((()=>{const e=a.mount(n.value);return a.update(Object.assign({},t)),e}));let o=!1;return e.onUpdated((()=>{if(!o&&n.value){o=!0;const t=gt(a.getTarget());for(const e in t)J(n.value,e,t[e])}a.update(Object.assign({},t))})),{state:a,root:n,initialStyles:gt(a.getTarget())}},render(){var t,n;return e.h(this.tag,{ref:"root",style:this.state.isMounted()?this.style:Object.assign(Object.assign({},this.style),this.initialStyles)},null===(n=(t=this.$slots).default)||void 0===n?void 0:n.call(t))}}),xt=new WeakMap;function Et(t){const e=xt.get(t);e&&t.removeEventListener("motioncomplete",e),xt.delete(t)}const St=e.defineComponent({name:"Presence",props:{name:{type:String},initial:{type:Boolean,default:!0},exitBeforeEnter:{type:Boolean,default:!1}},methods:{enter(t){const e=vt.get(t);e&&(Et(t),e.setActive("exit",!1))},exit(t,e){const n=vt.get(t);if(!n)return e();n.setActive("exit",!0),Et(t),xt.set(t,e),t.addEventListener("motioncomplete",e)}},setup(t){let{initial:n}=t;const i={initial:n};e.provide(wt,i),e.onBeforeUpdate((()=>{i.initial=void 0}))},render(){return e.h(e.Transition,{name:this.name,onEnter:this.enter,onLeave:this.exit,css:!1,mode:this.exitBeforeEnter?"out-in":void 0},this.$slots.default)}});return t.Motion=jt,t.Presence=St,Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue);
{
"name": "@motionone/vue",
"version": "10.5.1",
"version": "10.5.2",
"description": "A tiny, performant animation library for Vue",

@@ -9,7 +9,7 @@ "author": "Matt Perry",

"module": "dist/motion-vue.esm.js",
"types": "types/index.d.ts",
"types": "dist/index.d.ts",
"sideEffects": false,
"scripts": {
"build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
"build-vue:ssr": "cross-env NODE_ENV=production rollup --config rollup.config.js --format cjs && npm run build-vue:ssr && npm run build-vue:es && npm run build-vue:unpkg",
"build": "cross-env NODE_ENV=production rollup --config rollup.config.js && npm run build-vue:ssr && npm run build-vue:es && npm run build-vue:unpkg",
"build-vue:ssr": "cross-env NODE_ENV=production rollup --config rollup.config.js --format cjs",
"build-vue:es": "cross-env NODE_ENV=production rollup --config rollup.config.js --format es",

@@ -22,3 +22,3 @@ "build-vue:unpkg": "cross-env NODE_ENV=production rollup --config rollup.config.js --format iife",

"dependencies": {
"@motionone/dom": "^10.5.0",
"@motionone/dom": "^10.5.2",
"tslib": "^2.3.1"

@@ -55,3 +55,3 @@ },

],
"gitHead": "c40fcbf8dc5859c0e4948032762e319f482bd247"
"gitHead": "580f3fbffc18931ccdb627e01ac2d50f087d01af"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc