@motionone/vue - npm Package Compare versions

Comparing version 10.8.1 to 10.8.2

dist/motion-vue.esm.js

@@ -811,3 +811,3 @@ import { defineComponent, ref, inject, provide, onMounted, onUpdated, h, onBeforeUpdate, Transition } from 'vue';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -814,0 +814,0 @@

dist/motion-vue.min.js

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

dist/motion-vue.ssr.js

@@ -755,3 +755,3 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');/**
  */
-options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);/*! *****************************************************************************
+options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);/******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -758,0 +758,0 @@

package.json

 {
   "name": "@motionone/vue",
-  "version": "10.8.1",
+  "version": "10.8.2",
   "description": "A tiny, performant animation library for Vue",
@@ -21,3 +21,3 @@ "author": "Matt Perry",
   "dependencies": {
-    "@motionone/dom": "^10.8.1",
+    "@motionone/dom": "^10.8.2",
     "tslib": "^2.3.1"
@@ -54,3 +54,3 @@ },
   ],
-  "gitHead": "774d18dfd7a51a973a39ef8d185d1249827c000c"
+  "gitHead": "322942798e7b90bb294aea46638d027216ea8dcb"
 }

README.md

@@ -7,2 +7,2 @@ # `@motionone/vue`
 
-Full docs for Motion One available at [motion.dev](https://motion.dev).
+Full docs for Motion One for Vue available at [motion.dev](https://motion.dev/vue/quick-start).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100815

increased by0.02%

Dependency changes

• Updated@motionone/dom@^10.8.2