@motionone/vue - npm Package Compare versions

Comparing version 10.11.0 to 10.11.1

dist/motion-vue.esm.js

@@ -859,2 +859,19 @@ import { defineComponent, ref, inject, provide, onMounted, onUpdated, h, onBeforeUpdate, Transition } from 'vue';
 
+let supportsDocumentRoot;
+
+function getDefaultRoot() {
+  if (supportsDocumentRoot === undefined) {
+    try {
+      new IntersectionObserver(noop, {
+        root: document
+      });
+      supportsDocumentRoot = true;
+    } catch (e) {
+      supportsDocumentRoot = false;
+    }
+  }
+
+  return supportsDocumentRoot ? document : undefined;
+}
+
 const thresholds = {
@@ -911,3 +928,3 @@ any: 0,
   const observer = new IntersectionObserver(onIntersectionChange, {
-    root,
+    root: root || getDefaultRoot(),
     rootMargin,
@@ -914,0 +931,0 @@ threshold: typeof amount === "number" ? amount : thresholds[amount]

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

dist/motion-vue.ssr.js

@@ -799,3 +799,20 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');/**
   return t;
-}const thresholds = {
+}let supportsDocumentRoot;
+
+function getDefaultRoot() {
+  if (supportsDocumentRoot === undefined) {
+    try {
+      new IntersectionObserver(noop, {
+        root: document
+      });
+      supportsDocumentRoot = true;
+    } catch (e) {
+      supportsDocumentRoot = false;
+    }
+  }
+
+  return supportsDocumentRoot ? document : undefined;
+}
+
+const thresholds = {
   any: 0,
@@ -851,3 +868,3 @@ all: 1
   const observer = new IntersectionObserver(onIntersectionChange, {
-    root,
+    root: root || getDefaultRoot(),
     rootMargin,
@@ -854,0 +871,0 @@ threshold: typeof amount === "number" ? amount : thresholds[amount]

package.json

 {
   "name": "@motionone/vue",
-  "version": "10.11.0",
+  "version": "10.11.1",
   "description": "A tiny, performant animation library for Vue",
@@ -21,3 +21,3 @@ "author": "Matt Perry",
   "dependencies": {
-    "@motionone/dom": "^10.11.0",
+    "@motionone/dom": "^10.11.1",
     "tslib": "^2.3.1"
@@ -54,3 +54,3 @@ },
   ],
-  "gitHead": "d6306f38611747ab6ad98739f58b4db017be5a5b"
+  "gitHead": "25a8e264f860ca7b52f857fa48d1242542699542"
 }

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

106127

increased by0.82%

Lines of code

2517

increased by1.12%

Dependency changes

• Updated@motionone/dom@^10.11.1