@vueuse/motion - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

dist/index.cjs.js

 /*!
-  * @vueuse/motion v1.3.2
+  * @vueuse/motion v1.3.3
   * (c) 2021 
@@ -197,6 +197,6 @@ * @license MIT
             this.updateSubscribers.notify(this.current);
+            sync.postRender(this.scheduleVelocityCheck);
             // Update timestamp
             const { delta, timestamp } = getFrameData();
             if (this.lastUpdated !== timestamp) {
-                sync.postRender(this.scheduleVelocityCheck);
                 this.timeDelta = delta;
@@ -215,2 +215,5 @@ this.lastUpdated = timestamp;
         this.velocityCheck = ({ timestamp }) => {
+            if (this.current === undefined && !this.canTrackVelocity) {
+                this.canTrackVelocity = isFloat(this.current);
+            }
             if (timestamp !== this.lastUpdated) {
@@ -241,5 +244,2 @@ this.prev = this.current;
     set(v) {
-        if (this.current === undefined && !this.canTrackVelocity) {
-            this.canTrackVelocity = isFloat(v);
-        }
         this.updateAndNotify(v);
@@ -1982,11 +1982,17 @@ }
     let values = {};
-    // Check whether if we are dealing with an object or with an element target
-    if (targetRef.value instanceof HTMLElement ||
-        targetRef.value instanceof SVGElement) {
-        const { motionProperties } = useMotionProperties(targetRef);
-        values = motionProperties;
-    }
-    else {
-        values = { ...targetRef.value };
-    }
+    vueDemi.watch(targetRef, (newVal) => {
+        // Target not set yet
+        if (!newVal)
+            return;
+        // Check whether the target reference is an element or a simple object
+        if (newVal instanceof HTMLElement || newVal instanceof SVGElement) {
+            values = useMotionProperties(targetRef)
+                .motionProperties;
+        }
+        else {
+            values = { ...newVal };
+        }
+    }, {
+        immediate: true,
+    });
     const { stop, get } = useMotionValues();
@@ -1993,0 +1999,0 @@ const set = (properties) => {

dist/index.esm-browser.js

 /*!
-  * @vueuse/motion v1.3.2
+  * @vueuse/motion v1.3.3
   * (c) 2021 
@@ -193,6 +193,6 @@ * @license MIT
             this.updateSubscribers.notify(this.current);
+            sync.postRender(this.scheduleVelocityCheck);
             // Update timestamp
             const { delta, timestamp } = getFrameData();
             if (this.lastUpdated !== timestamp) {
-                sync.postRender(this.scheduleVelocityCheck);
                 this.timeDelta = delta;
@@ -211,2 +211,5 @@ this.lastUpdated = timestamp;
         this.velocityCheck = ({ timestamp }) => {
+            if (this.current === undefined && !this.canTrackVelocity) {
+                this.canTrackVelocity = isFloat(this.current);
+            }
             if (timestamp !== this.lastUpdated) {
@@ -237,5 +240,2 @@ this.prev = this.current;
     set(v) {
-        if (this.current === undefined && !this.canTrackVelocity) {
-            this.canTrackVelocity = isFloat(v);
-        }
         this.updateAndNotify(v);
@@ -1978,11 +1978,17 @@ }
     let values = {};
-    // Check whether if we are dealing with an object or with an element target
-    if (targetRef.value instanceof HTMLElement ||
-        targetRef.value instanceof SVGElement) {
-        const { motionProperties } = useMotionProperties(targetRef);
-        values = motionProperties;
-    }
-    else {
-        values = { ...targetRef.value };
-    }
+    watch(targetRef, (newVal) => {
+        // Target not set yet
+        if (!newVal)
+            return;
+        // Check whether the target reference is an element or a simple object
+        if (newVal instanceof HTMLElement || newVal instanceof SVGElement) {
+            values = useMotionProperties(targetRef)
+                .motionProperties;
+        }
+        else {
+            values = { ...newVal };
+        }
+    }, {
+        immediate: true,
+    });
     const { stop, get } = useMotionValues();
@@ -1989,0 +1995,0 @@ const set = (properties) => {

dist/index.esm-bundler.js

 /*!
-  * @vueuse/motion v1.3.2
+  * @vueuse/motion v1.3.3
   * (c) 2021 
@@ -193,6 +193,6 @@ * @license MIT
             this.updateSubscribers.notify(this.current);
+            sync.postRender(this.scheduleVelocityCheck);
             // Update timestamp
             const { delta, timestamp } = getFrameData();
             if (this.lastUpdated !== timestamp) {
-                sync.postRender(this.scheduleVelocityCheck);
                 this.timeDelta = delta;
@@ -211,2 +211,5 @@ this.lastUpdated = timestamp;
         this.velocityCheck = ({ timestamp }) => {
+            if (this.current === undefined && !this.canTrackVelocity) {
+                this.canTrackVelocity = isFloat(this.current);
+            }
             if (timestamp !== this.lastUpdated) {
@@ -237,5 +240,2 @@ this.prev = this.current;
     set(v) {
-        if (this.current === undefined && !this.canTrackVelocity) {
-            this.canTrackVelocity = isFloat(v);
-        }
         this.updateAndNotify(v);
@@ -1978,11 +1978,17 @@ }
     let values = {};
-    // Check whether if we are dealing with an object or with an element target
-    if (targetRef.value instanceof HTMLElement ||
-        targetRef.value instanceof SVGElement) {
-        const { motionProperties } = useMotionProperties(targetRef);
-        values = motionProperties;
-    }
-    else {
-        values = { ...targetRef.value };
-    }
+    watch(targetRef, (newVal) => {
+        // Target not set yet
+        if (!newVal)
+            return;
+        // Check whether the target reference is an element or a simple object
+        if (newVal instanceof HTMLElement || newVal instanceof SVGElement) {
+            values = useMotionProperties(targetRef)
+                .motionProperties;
+        }
+        else {
+            values = { ...newVal };
+        }
+    }, {
+        immediate: true,
+    });
     const { stop, get } = useMotionValues();
@@ -1989,0 +1995,0 @@ const set = (properties) => {

dist/index.global.prod.js

 /*!
-  * @vueuse/motion v1.3.2
+  * @vueuse/motion v1.3.3
   * (c) 2021 
   * @license MIT
   */
-var VueuseMotion=function(t,e,r,n,i){"use strict";const a={};var o=1/60*1e3,s="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()},l="undefined"!=typeof window?function(t){return window.requestAnimationFrame(t)}:function(t){return setTimeout((function(){return t(s())}),o)};var u=!0,c=!1,p=!1,d={delta:0,timestamp:0},f=["read","update","preRender","render","postRender"],v=f.reduce((function(t,e){return t[e]=function(t){var e=[],r=[],n=0,i=!1,a=new WeakSet,o={schedule:function(t,o,s){void 0===o&&(o=!1),void 0===s&&(s=!1);var l=s&&i,u=l?e:r;return o&&a.add(t),-1===u.indexOf(t)&&(u.push(t),l&&i&&(n=e.length)),t},cancel:function(t){var e=r.indexOf(t);-1!==e&&r.splice(e,1),a.delete(t)},process:function(s){var l;if(i=!0,e=(l=[r,e])[0],(r=l[1]).length=0,n=e.length)for(var u=0;u<n;u++){var c=e[u];c(s),a.has(c)&&(o.schedule(c),t())}i=!1}};return o}((function(){return c=!0})),t}),{}),m=f.reduce((function(t,e){var r=v[e];return t[e]=function(t,e,n){return void 0===e&&(e=!1),void 0===n&&(n=!1),c||b(),r.schedule(t,e,n)},t}),{}),y=function(t){return v[t].process(d)},h=function(t){c=!1,d.delta=u?o:Math.max(Math.min(t-d.timestamp,40),1),d.timestamp=t,p=!0,f.forEach(y),p=!1,c&&(u=!1,l(h))},b=function(){c=!0,u=!0,p||l(h)};class g{constructor(){this.subscriptions=new Set}add(t){return this.subscriptions.add(t),()=>{this.subscriptions.delete(t)}}notify(t,e,r){if(this.subscriptions.size)for(const n of this.subscriptions)n(t,e,r)}clear(){this.subscriptions.clear()}}const w=t=>!isNaN(parseFloat(t));class O{constructor(t){this.timeDelta=0,this.lastUpdated=0,this.updateSubscribers=new g,this.canTrackVelocity=!1,this.updateAndNotify=t=>{this.prev=this.current,this.current=t,this.updateSubscribers.notify(this.current);const{delta:e,timestamp:r}=d;this.lastUpdated!==r&&(m.postRender(this.scheduleVelocityCheck),this.timeDelta=e,this.lastUpdated=r)},this.scheduleVelocityCheck=()=>m.postRender(this.velocityCheck),this.velocityCheck=({timestamp:t})=>{t!==this.lastUpdated&&(this.prev=this.current)},this.current=t,this.canTrackVelocity=w(this.current)}onChange(t){return this.updateSubscribers.add(t)}clearListeners(){this.updateSubscribers.clear()}set(t){void 0!==this.current||this.canTrackVelocity||(this.canTrackVelocity=w(t)),this.updateAndNotify(t)}get(){return this.current}getPrevious(){return this.prev}getVelocity(){return this.canTrackVelocity?i.velocityPerSecond(parseFloat(this.current)-parseFloat(this.prev),this.timeDelta):0}start(t){return this.stop(),new Promise((e=>{const{stop:r}=t(e);this.stopAnimation=r})).then((()=>this.clearAnimation()))}stop(){this.stopAnimation&&this.stopAnimation(),this.clearAnimation()}isAnimating(){return!!this.stopAnimation}clearAnimation(){this.stopAnimation=null}destroy(){this.updateSubscribers.clear(),this.stop()}}const{isArray:k}=Array;function V(){const t={},r=r=>{const n=r=>{t[r]&&(t[r].stop(),t[r].destroy(),e.del(t,r))};r?k(r)?r.forEach(n):n(r):Object.keys(t).forEach(n)};return n.tryOnUnmounted(r),{motionValues:t,get:(r,n,i)=>{if(t[r])return t[r];const a=new O(n);return a.onChange((t=>{e.set(i,r,t)})),e.set(t,r,a),a},stop:r}}
+var VueuseMotion=function(t,e,r,n,i){"use strict";const a={};var o=1/60*1e3,s="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()},l="undefined"!=typeof window?function(t){return window.requestAnimationFrame(t)}:function(t){return setTimeout((function(){return t(s())}),o)};var u=!0,c=!1,p=!1,d={delta:0,timestamp:0},f=["read","update","preRender","render","postRender"],v=f.reduce((function(t,e){return t[e]=function(t){var e=[],r=[],n=0,i=!1,a=new WeakSet,o={schedule:function(t,o,s){void 0===o&&(o=!1),void 0===s&&(s=!1);var l=s&&i,u=l?e:r;return o&&a.add(t),-1===u.indexOf(t)&&(u.push(t),l&&i&&(n=e.length)),t},cancel:function(t){var e=r.indexOf(t);-1!==e&&r.splice(e,1),a.delete(t)},process:function(s){var l;if(i=!0,e=(l=[r,e])[0],(r=l[1]).length=0,n=e.length)for(var u=0;u<n;u++){var c=e[u];c(s),a.has(c)&&(o.schedule(c),t())}i=!1}};return o}((function(){return c=!0})),t}),{}),m=f.reduce((function(t,e){var r=v[e];return t[e]=function(t,e,n){return void 0===e&&(e=!1),void 0===n&&(n=!1),c||b(),r.schedule(t,e,n)},t}),{}),y=function(t){return v[t].process(d)},h=function(t){c=!1,d.delta=u?o:Math.max(Math.min(t-d.timestamp,40),1),d.timestamp=t,p=!0,f.forEach(y),p=!1,c&&(u=!1,l(h))},b=function(){c=!0,u=!0,p||l(h)};class g{constructor(){this.subscriptions=new Set}add(t){return this.subscriptions.add(t),()=>{this.subscriptions.delete(t)}}notify(t,e,r){if(this.subscriptions.size)for(const n of this.subscriptions)n(t,e,r)}clear(){this.subscriptions.clear()}}const w=t=>!isNaN(parseFloat(t));class O{constructor(t){this.timeDelta=0,this.lastUpdated=0,this.updateSubscribers=new g,this.canTrackVelocity=!1,this.updateAndNotify=t=>{this.prev=this.current,this.current=t,this.updateSubscribers.notify(this.current),m.postRender(this.scheduleVelocityCheck);const{delta:e,timestamp:r}=d;this.lastUpdated!==r&&(this.timeDelta=e,this.lastUpdated=r)},this.scheduleVelocityCheck=()=>m.postRender(this.velocityCheck),this.velocityCheck=({timestamp:t})=>{void 0!==this.current||this.canTrackVelocity||(this.canTrackVelocity=w(this.current)),t!==this.lastUpdated&&(this.prev=this.current)},this.current=t,this.canTrackVelocity=w(this.current)}onChange(t){return this.updateSubscribers.add(t)}clearListeners(){this.updateSubscribers.clear()}set(t){this.updateAndNotify(t)}get(){return this.current}getPrevious(){return this.prev}getVelocity(){return this.canTrackVelocity?i.velocityPerSecond(parseFloat(this.current)-parseFloat(this.prev),this.timeDelta):0}start(t){return this.stop(),new Promise((e=>{const{stop:r}=t(e);this.stopAnimation=r})).then((()=>this.clearAnimation()))}stop(){this.stopAnimation&&this.stopAnimation(),this.clearAnimation()}isAnimating(){return!!this.stopAnimation}clearAnimation(){this.stopAnimation=null}destroy(){this.updateSubscribers.clear(),this.stop()}}const{isArray:k}=Array;function V(){const t={},r=r=>{const n=r=>{t[r]&&(t[r].stop(),t[r].destroy(),e.del(t,r))};r?k(r)?r.forEach(n):n(r):Object.keys(t).forEach(n)};return n.tryOnUnmounted(r),{motionValues:t,get:(r,n,i)=>{if(t[r])return t[r];const a=new O(n);return a.onChange((t=>{e.set(i,r,t)})),e.set(t,r,a),a},stop:r}}
 /*! *****************************************************************************
@@ -20,2 +20,2 @@ Copyright (c) Microsoft Corporation.
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */var x=function(){return(x=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},A=function(t,e){return function(r){return Math.max(Math.min(r,e),t)}},T=function(t){return t%1?Number(t.toFixed(5)):t},L=/(-)?([\d]*\.?[\d])+/g,j=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,C=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function I(t){return"string"==typeof t}var R={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},E=x(x({},R),{transform:A(0,1)}),M=x(x({},R),{default:1}),P=function(t){return{test:function(e){return I(e)&&e.endsWith(t)&&1===e.split(" ").length},parse:parseFloat,transform:function(e){return""+e+t}}},S=P("deg"),z=P("%"),B=P("px"),F=x(x({},z),{parse:function(t){return z.parse(t)/100},transform:function(t){return z.transform(100*t)}}),N=function(t,e){return function(r){return I(r)&&C.test(r)&&r.startsWith(t)||e&&Object.prototype.hasOwnProperty.call(r,e)}},U=function(t,e,r){return function(n){var i;if(!I(n))return n;var a=n.match(L),o=a[1],s=a[2],l=a[3];return(i={})[t]=parseFloat(a[0]),i[e]=parseFloat(o),i[r]=parseFloat(s),i.alpha=void 0!==l?parseFloat(l):1,i}},W={test:N("hsl","hue"),parse:U("hue","saturation","lightness"),transform:function(t){var e=t.saturation,r=t.lightness,n=t.alpha,i=void 0===n?1:n;return"hsla("+Math.round(t.hue)+", "+z.transform(T(e))+", "+z.transform(T(r))+", "+T(E.transform(i))+")"}},Z=A(0,255),D=x(x({},R),{transform:function(t){return Math.round(Z(t))}}),X={test:N("rgb","red"),parse:U("red","green","blue"),transform:function(t){var e=t.green,r=t.blue,n=t.alpha,i=void 0===n?1:n;return"rgba("+D.transform(t.red)+", "+D.transform(e)+", "+D.transform(r)+", "+T(E.transform(i))+")"}};var Y={test:N("#"),parse:function(t){var e="",r="",n="",i="";return t.length>5?(e=t.substr(1,2),r=t.substr(3,2),n=t.substr(5,2),i=t.substr(7,2)):(e=t.substr(1,1),r=t.substr(2,1),n=t.substr(3,1),i=t.substr(4,1),e+=e,r+=r,n+=n,i+=i),{red:parseInt(e,16),green:parseInt(r,16),blue:parseInt(n,16),alpha:i?parseInt(i,16)/255:1}},transform:X.transform},$={test:function(t){return X.test(t)||Y.test(t)||W.test(t)},parse:function(t){return X.test(t)?X.parse(t):W.test(t)?W.parse(t):Y.parse(t)},transform:function(t){return I(t)?t:t.hasOwnProperty("red")?X.transform(t):W.transform(t)}},_="${c}",H="${n}";function q(t){var e=[],r=0,n=t.match(j);n&&(r=n.length,t=t.replace(j,_),e.push.apply(e,n.map($.parse)));var i=t.match(L);return i&&(t=t.replace(L,H),e.push.apply(e,i.map(R.parse))),{values:e,numColors:r,tokenised:t}}function G(t){return q(t).values}function J(t){var e=q(t),r=e.numColors,n=e.tokenised,i=e.values.length;return function(t){for(var e=n,a=0;a<i;a++)e=e.replace(a<r?_:H,a<r?$.transform(t[a]):T(t[a]));return e}}var K=function(t){return"number"==typeof t?0:t};var Q={test:function(t){var e,r,n,i;return isNaN(t)&&I(t)&&(null!==(r=null===(e=t.match(L))||void 0===e?void 0:e.length)&&void 0!==r?r:0)+(null!==(i=null===(n=t.match(j))||void 0===n?void 0:n.length)&&void 0!==i?i:0)>0},parse:G,createTransformer:J,getAnimatableNone:function(t){var e=G(t);return J(t)(e.map(K))}},tt=new Set(["brightness","contrast","saturate","opacity"]);function et(t){var e=t.slice(0,-1).split("("),r=e[0],n=e[1];if("drop-shadow"===r)return t;var i=(n.match(L)||[])[0];if(!i)return t;var a=n.replace(i,""),o=tt.has(r)?1:0;return i!==n&&(o*=100),r+"("+o+a+")"}var rt=/([a-z-]*)\(.*?\)/g,nt=x(x({},Q),{getAnimatableNone:function(t){var e=t.match(rt);return e?e.map(et).join(" "):t}});const it=()=>({type:"spring",stiffness:500,damping:25,restDelta:.5,restSpeed:10}),at=t=>({type:"spring",stiffness:550,damping:0===t?100:30,restDelta:.01,restSpeed:10}),ot=()=>({type:"keyframes",ease:"linear",duration:300}),st=t=>({type:"keyframes",duration:800,values:t}),lt={default:at,x:it,y:it,z:it,rotate:it,rotateX:it,rotateY:it,rotateZ:it,scaleX:at,scaleY:at,scale:at,backgroundColor:ot,color:ot,opacity:ot},ut=(t,e)=>{let r;return r=Array.isArray(e)?st:lt[t]||lt.default,{to:e,...r(e)}},ct={...R,transform:Math.round},pt={color:$,backgroundColor:$,outlineColor:$,fill:$,stroke:$,borderColor:$,borderTopColor:$,borderRightColor:$,borderBottomColor:$,borderLeftColor:$,borderWidth:B,borderTopWidth:B,borderRightWidth:B,borderBottomWidth:B,borderLeftWidth:B,borderRadius:B,radius:B,borderTopLeftRadius:B,borderTopRightRadius:B,borderBottomRightRadius:B,borderBottomLeftRadius:B,width:B,maxWidth:B,height:B,maxHeight:B,size:B,top:B,right:B,bottom:B,left:B,padding:B,paddingTop:B,paddingRight:B,paddingBottom:B,paddingLeft:B,margin:B,marginTop:B,marginRight:B,marginBottom:B,marginLeft:B,rotate:S,rotateX:S,rotateY:S,rotateZ:S,scale:M,scaleX:M,scaleY:M,scaleZ:M,skew:S,skewX:S,skewY:S,distance:B,translateX:B,translateY:B,translateZ:B,x:B,y:B,z:B,perspective:B,transformPerspective:B,opacity:E,originX:F,originY:F,originZ:B,zIndex:ct,filter:nt,WebkitFilter:nt,fillOpacity:E,strokeOpacity:E,numOctaves:ct},dt=t=>pt[t],ft=(t,e)=>e&&"number"==typeof t&&e.transform?e.transform(t):t;const vt={linear:i.linear,easeIn:i.easeIn,easeInOut:i.easeInOut,easeOut:i.easeOut,circIn:i.circIn,circInOut:i.circInOut,circOut:i.circOut,backIn:i.backIn,backInOut:i.backInOut,backOut:i.backOut,anticipate:i.anticipate,bounceIn:i.bounceIn,bounceInOut:i.bounceInOut,bounceOut:i.bounceOut},mt=t=>{if(Array.isArray(t)){const[e,r,n,a]=t;return i.cubicBezier(e,r,n,a)}return"string"==typeof t?vt[t]:t},yt=(t,e)=>"zIndex"!==t&&(!("number"!=typeof e&&!Array.isArray(e))||!("string"!=typeof e||!Q.test(e)||e.startsWith("url(")));function ht({ease:t,times:e,delay:r,...n}){const i={...n};return e&&(i.offset=e),t&&(i.ease=(t=>Array.isArray(t)&&"number"!=typeof t[0])(t)?t.map(mt):mt(t)),r&&(i.elapsed=-r),i}function bt(t,e,r){return Array.isArray(e.to)&&(t.duration||(t.duration=800)),function(t){Array.isArray(t.to)&&null===t.to[0]&&(t.to=[...t.to],t.to[0]=t.from)}(e),function({delay:t,repeat:e,repeatType:r,repeatDelay:n,from:i,...a}){return!!Object.keys(a).length}(t)||(t={...t,...ut(r,e.to)}),{...e,...ht(t)}}function gt(t,e,r,n,a){const o=function(t,e){return t[e]||t.default||t}(n,t);let s=null==o.from?e.get():o.from;const l=yt(t,r);"none"===s&&l&&"string"==typeof r&&(s=function(t,e){let r=dt(t);return r!==nt&&(r=Q),r.getAnimatableNone?r.getAnimatableNone(e):void 0}(t,r));return yt(t,s)&&l&&!1!==o.type?function(l){const u={from:s,to:r,velocity:n.velocity?n.velocity:e.getVelocity(),onUpdate:t=>e.set(t)};return"inertia"===o.type||"decay"===o.type?i.inertia({...u,...o}):i.animate({...bt(o,u,t),onUpdate:t=>{u.onUpdate(t),o.onUpdate&&o.onUpdate(t)},onComplete:()=>{n.onComplete&&n.onComplete(),a&&a(),l&&l()}})}:function(t){return e.set(r),n.onComplete&&n.onComplete(),a&&a(),t&&t(),{stop:()=>{}}}}function wt(){const{motionValues:t,stop:e,get:r}=V();return{motionValues:t,stop:e,push:(t,e,n,i={},a)=>{const o=r(t,n[t],n);if(i&&i.immediate)return void o.set(e);const s=gt(t,o,e,i,a);o.start(s)}}}function Ot(t,n={},{push:i,stop:a}=wt()){const o=e.ref(n),s=t=>{if(!o||!o.value||!o.value[t])throw new Error(`The variant ${t} does not exist.`);return o.value[t]},l=e=>{let n=r.isObject(e)&&e.transition;return n||"string"!=typeof e||(e=s(e)),n&&delete e.transition,Promise.all(Object.entries(e).map((([r,a])=>new Promise((o=>{i(r,a,t,n||ut(r,e[r]),o)})))))};return{apply:l,set:e=>{let n=r.isObject(e)?e:s(e);n.transition&&delete n.transition,Object.entries(n).forEach((([e,r])=>{i(e,r,t,{immediate:!0})}))},stopTransitions:a,leave:async t=>{let e;o&&o.value&&(o.value.leave&&(e=o.value.leave),!o.value.leave&&o.value.initial&&(e=o.value.initial)),e?(await l(e),t()):t()}}}const kt="undefined"!=typeof window;function Vt({target:t,state:n,variants:i,apply:a}){const o=e.ref(!1),s=e.ref(!1),l=e.ref(!1),u=e.computed((()=>{let t=[];return i.value.hovered&&(t=[...t,...Object.keys(i.value.hovered)]),i.value.tapped&&(t=[...t,...Object.keys(i.value.tapped)]),i.value.focused&&(t=[...t,...Object.keys(i.value.focused)]),t})),c=e.computed((()=>{const t={};Object.assign(t,n.value),o.value&&i.value.hovered&&Object.assign(t,i.value.hovered),s.value&&i.value.tapped&&Object.assign(t,i.value.tapped),l.value&&i.value.focused&&Object.assign(t,i.value.focused);for(const e in t)u.value.includes(e)||delete t[e];return t}));e.watch(t,(t=>{t&&(i.value.hovered&&(r.useEventListener(t,"mouseenter",(()=>{o.value=!0})),r.useEventListener(t,"mouseleave",(()=>{o.value=!1,s.value=!1})),r.useEventListener(t,"mouseout",(()=>{o.value=!1,s.value=!1}))),i.value.tapped&&(kt&&null===window.onmousedown&&(r.useEventListener(t,"mousedown",(()=>{s.value=!0})),r.useEventListener(t,"mouseup",(()=>{s.value=!1}))),kt&&null===window.onpointerdown&&(r.useEventListener(t,"pointerdown",(()=>{s.value=!0})),r.useEventListener(t,"pointerup",(()=>{s.value=!1}))),kt&&null===window.ontouchstart&&(r.useEventListener(t,"touchstart",(()=>{s.value=!0})),r.useEventListener(t,"touchend",(()=>{s.value=!1})))),i.value.focused&&(r.useEventListener(t,"focus",(()=>{l.value=!0})),r.useEventListener(t,"blur",(()=>{l.value=!1}))))}),{immediate:!0}),e.watch(c,(t=>{a(t)}))}function xt(t,n={syncVariants:!0,lifeCycleHooks:!0,visibilityHooks:!0,eventListeners:!0}){n.lifeCycleHooks&&function({target:t,variants:r,variant:n}){e.watch(t,(()=>{r.value&&r.value.enter&&(r.value.initial&&(n.value="initial"),e.nextTick((()=>n.value="enter")))}),{immediate:!0,flush:"pre"})}(t),n.syncVariants&&function({state:t,apply:r}){e.watch(t,(t=>{t&&r(t)}),{immediate:!0})}(t),n.visibilityHooks&&function({target:t,variants:n,variant:i}){let a=r.noop;const o=e.watch(t,(e=>{e&&(a=r.useIntersectionObserver(t,(([{isIntersecting:t}])=>{n.value&&n.value.visible&&(i.value=t?"visible":"initial")})).stop)}),{immediate:!0})}(t),n.eventListeners&&Vt(t)}function At(t={}){const r=e.reactive({...t}),n=e.ref({});return e.watch(r,(()=>{const t={};for(const[e,n]of Object.entries(r)){const r=dt(e),i=ft(n,r);t[e]=i}n.value=t}),{immediate:!0,deep:!0}),{state:r,style:n}}function Tt(t){const r=e.ref(t);let n;const{state:i,style:a}=At(),o=e.watch(r,(t=>{if(t){for(const r of Object.keys(pt))null!=t.style[r]&&""!==t.style[r]&&e.set(i,r,t.style[r]);if(n)for(const r in n)e.set(t.style,r,n[r])}})),s=e.watch(a,(t=>{if(r.value&&r.value.style)for(const n in t)e.set(r.value.style,n,t[n]);else n=t}),{immediate:!0});return{style:i,stop:()=>{o(),s()}}}const Lt={x:"translateX",y:"translateY",z:"translateZ"};function jt(t={},r=!0){const n=e.reactive({...t}),i=e.ref("");return e.watch(n,(()=>{let t="",e=!1;for(const[r,i]of Object.entries(n)){const n=dt(r),a=ft(i,n);t+=`${Lt[r]||r}(${a}) `,"z"!==r&&"translateZ"!==r||(e=!0)}!e&&r?t+="translateZ(0)":t=t.trim(),i.value=t}),{immediate:!0,deep:!0}),{state:n,transform:i}}function Ct(t){const r=e.ref(t);let n;const{state:i,transform:a}=jt(),o=e.watch(r,(t=>{t&&n&&(t.style.transform=n)})),s=e.watch(a,(t=>{r.value&&r.value.style?r.value.style.transform=t:n=t}),{immediate:!0});return{transform:i,stop:()=>{o(),s()}}}const It=["","X","Y","Z"],Rt=["transformPerspective","x","y","z"];["perspective","translate","scale","rotate","skew"].forEach((t=>{It.forEach((e=>{Rt.push(t+e)}))}));const Et=new Set(Rt);function Mt(t){return Et.has(t)}function Pt(t){const r=e.ref(t),{style:n}=Tt(r),{transform:i}=Ct(r),a=e.reactive({});return e.watch(a,(t=>{for(const r in t){const a=Mt(r)?i:n;a[r]&&a[r]===t[r]||e.set(a,r,t[r])}}),{immediate:!0,deep:!0}),{motionProperties:a,style:n,transform:i}}function St(t={}){const r=e.ref(t),n=e.ref();return{state:e.computed((()=>{if(n.value)return r.value[n.value]})),variant:n}}function zt(t,r={},n){const i=e.ref(r),a=e.ref(t),{motionProperties:o}=Pt(a),{variant:s,state:l}=St(i),u={target:a,variant:s,variants:i,state:l,motionProperties:o,...Ot(o,i)};return xt(u,n),u}const Bt=["initial","enter","leave","visible","hovered","tapped","focused","delay"],Ft=t=>{const n=(n,i,o)=>{const s=e.ref(t||{});((t,e)=>{const n=t.props?t.props:t.data&&t.data.attrs?t.data.attrs:{};n&&(n.variants&&r.isObject(n.variants)&&(e.value={...e.value,...n.variants}),Bt.forEach((t=>{if("delay"!==t)n&&n[t]&&r.isObject(n[t])&&(e.value[t]=n[t]);else if(n&&n[t]&&r.isNumber(n[t])){const r=n[t];e&&e.value&&(e.value.enter&&(e.value.enter.transition||(e.value.enter.transition={}),e.value.enter.transition={...e.value.enter.transition,delay:r}),e.value.visible&&(e.value.visible.transition||(e.value.visible.transition={}),e.value.visible.transition={...e.value.visible.transition,delay:r}))}})))})(o,s);const l=zt(n,s);i.value&&e.set(a,i.value,l)},i=(t,r,n)=>{r.value&&a[r.value]&&e.del(a,r.value)};return{created:n,unmounted:i,bind:n,unbind:i}},Nt={initial:{opacity:0},enter:{opacity:1}},Ut={initial:{opacity:0},visible:{opacity:1}},Wt={initial:{scale:0,opacity:0},enter:{scale:1,opacity:1}},Zt={initial:{scale:0,opacity:0},visible:{scale:1,opacity:1}},Dt={initial:{x:-100,rotate:90,opacity:0},enter:{x:0,rotate:0,opacity:1}},Xt={initial:{x:-100,rotate:90,opacity:0},visible:{x:0,rotate:0,opacity:1}},Yt={initial:{x:100,rotate:-90,opacity:0},enter:{x:0,rotate:0,opacity:1}},$t={initial:{x:100,rotate:-90,opacity:0},visible:{x:0,rotate:0,opacity:1}},_t={initial:{y:-100,rotate:-90,opacity:0},enter:{y:0,rotate:0,opacity:1}},Ht={initial:{y:-100,rotate:-90,opacity:0},visible:{y:0,rotate:0,opacity:1}},qt={initial:{y:100,rotate:90,opacity:0},enter:{y:0,rotate:0,opacity:1}},Gt={initial:{y:100,rotate:90,opacity:0},visible:{y:0,rotate:0,opacity:1}},Jt={initial:{x:-100,opacity:0},enter:{x:0,opacity:1}},Kt={initial:{x:-100,opacity:0},visible:{x:0,opacity:1}},Qt={initial:{x:100,opacity:0},enter:{x:0,opacity:1}},te={initial:{x:100,opacity:0},visible:{x:0,opacity:1}},ee={initial:{y:-100,opacity:0},enter:{y:0,opacity:1}},re={initial:{y:-100,opacity:0},visible:{y:0,opacity:1}},ne={initial:{y:100,opacity:0},enter:{y:0,opacity:1}},ie={initial:{y:100,opacity:0},visible:{y:0,opacity:1}};var ae=Object.freeze({__proto__:null,fade:Nt,fadeVisible:Ut,pop:Wt,popVisible:Zt,rollBottom:qt,rollLeft:Dt,rollRight:Yt,rollTop:_t,rollVisibleBottom:Gt,rollVisibleLeft:Xt,rollVisibleRight:$t,rollVisibleTop:Ht,slideBottom:ne,slideLeft:Jt,slideRight:Qt,slideTop:ee,slideVisibleBottom:ie,slideVisibleLeft:Kt,slideVisibleRight:te,slideVisibleTop:re});function oe(t){const e="àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;",r=new RegExp(e.split("").join("|"),"g");return t.toString().replace(/[A-Z]/g,(t=>"-"+t)).toLowerCase().replace(/\s+/g,"-").replace(r,(t=>"aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------".charAt(e.indexOf(t)))).replace(/&/g,"-and-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")}const se={install(t,e){if(t.directive("motion",Ft()),!e||e&&!e.excludePresets)for(const e in ae){const r=ae[e];t.directive(`motion-${oe(e)}`,Ft(r))}if(e&&e.directives)for(const r in e.directives){const n=e.directives[r];0,t.directive(`motion-${r}`,Ft(n))}}};return t.MotionDirective=Ft,t.MotionPlugin=se,t.fade=Nt,t.fadeVisible=Ut,t.isMotionInstance=function(t){const r=t;return void 0!==r.apply&&n.isFunction(r.apply)&&void 0!==r.set&&n.isFunction(r.set)&&void 0!==r.stopTransitions&&n.isFunction(r.stopTransitions)&&void 0!==r.target&&e.isRef(r.target)},t.pop=Wt,t.popVisible=Zt,t.reactiveStyle=At,t.reactiveTransform=jt,t.rollBottom=qt,t.rollLeft=Dt,t.rollRight=Yt,t.rollTop=_t,t.rollVisibleBottom=Gt,t.rollVisibleLeft=Xt,t.rollVisibleRight=$t,t.rollVisibleTop=Ht,t.slideBottom=ne,t.slideLeft=Jt,t.slideRight=Qt,t.slideTop=ee,t.slideVisibleBottom=ie,t.slideVisibleLeft=Kt,t.slideVisibleRight=te,t.slideVisibleTop=re,t.slugify=oe,t.useElementStyle=Tt,t.useElementTransform=Ct,t.useMotion=zt,t.useMotionControls=Ot,t.useMotionProperties=Pt,t.useMotionTransitions=wt,t.useMotionVariants=St,t.useMotions=function(){return a},t.useSpring=function(t,r){const n=e.ref(t);let a={};if(n.value instanceof HTMLElement||n.value instanceof SVGElement){const{motionProperties:t}=Pt(n);a=t}else a={...n.value};const{stop:o,get:s}=V();return{set:t=>Promise.all(Object.entries(t).map((([t,e])=>{const n=s(t,e,a);return n.start((t=>i.animate({type:"spring",from:n.get(),to:e,velocity:n.getVelocity(),onUpdate:t=>n.set(t),onComplete:t,...r})))}))),stop:o,values:a}},Object.defineProperty(t,"__esModule",{value:!0}),t}({},VueDemi,VueUse,shared,popmotion);
+    ***************************************************************************** */var x=function(){return(x=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},A=function(t,e){return function(r){return Math.max(Math.min(r,e),t)}},T=function(t){return t%1?Number(t.toFixed(5)):t},L=/(-)?([\d]*\.?[\d])+/g,j=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,C=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function I(t){return"string"==typeof t}var R={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},E=x(x({},R),{transform:A(0,1)}),M=x(x({},R),{default:1}),P=function(t){return{test:function(e){return I(e)&&e.endsWith(t)&&1===e.split(" ").length},parse:parseFloat,transform:function(e){return""+e+t}}},S=P("deg"),z=P("%"),B=P("px"),F=x(x({},z),{parse:function(t){return z.parse(t)/100},transform:function(t){return z.transform(100*t)}}),N=function(t,e){return function(r){return I(r)&&C.test(r)&&r.startsWith(t)||e&&Object.prototype.hasOwnProperty.call(r,e)}},U=function(t,e,r){return function(n){var i;if(!I(n))return n;var a=n.match(L),o=a[1],s=a[2],l=a[3];return(i={})[t]=parseFloat(a[0]),i[e]=parseFloat(o),i[r]=parseFloat(s),i.alpha=void 0!==l?parseFloat(l):1,i}},W={test:N("hsl","hue"),parse:U("hue","saturation","lightness"),transform:function(t){var e=t.saturation,r=t.lightness,n=t.alpha,i=void 0===n?1:n;return"hsla("+Math.round(t.hue)+", "+z.transform(T(e))+", "+z.transform(T(r))+", "+T(E.transform(i))+")"}},Z=A(0,255),D=x(x({},R),{transform:function(t){return Math.round(Z(t))}}),X={test:N("rgb","red"),parse:U("red","green","blue"),transform:function(t){var e=t.green,r=t.blue,n=t.alpha,i=void 0===n?1:n;return"rgba("+D.transform(t.red)+", "+D.transform(e)+", "+D.transform(r)+", "+T(E.transform(i))+")"}};var Y={test:N("#"),parse:function(t){var e="",r="",n="",i="";return t.length>5?(e=t.substr(1,2),r=t.substr(3,2),n=t.substr(5,2),i=t.substr(7,2)):(e=t.substr(1,1),r=t.substr(2,1),n=t.substr(3,1),i=t.substr(4,1),e+=e,r+=r,n+=n,i+=i),{red:parseInt(e,16),green:parseInt(r,16),blue:parseInt(n,16),alpha:i?parseInt(i,16)/255:1}},transform:X.transform},$={test:function(t){return X.test(t)||Y.test(t)||W.test(t)},parse:function(t){return X.test(t)?X.parse(t):W.test(t)?W.parse(t):Y.parse(t)},transform:function(t){return I(t)?t:t.hasOwnProperty("red")?X.transform(t):W.transform(t)}},_="${c}",H="${n}";function q(t){var e=[],r=0,n=t.match(j);n&&(r=n.length,t=t.replace(j,_),e.push.apply(e,n.map($.parse)));var i=t.match(L);return i&&(t=t.replace(L,H),e.push.apply(e,i.map(R.parse))),{values:e,numColors:r,tokenised:t}}function G(t){return q(t).values}function J(t){var e=q(t),r=e.numColors,n=e.tokenised,i=e.values.length;return function(t){for(var e=n,a=0;a<i;a++)e=e.replace(a<r?_:H,a<r?$.transform(t[a]):T(t[a]));return e}}var K=function(t){return"number"==typeof t?0:t};var Q={test:function(t){var e,r,n,i;return isNaN(t)&&I(t)&&(null!==(r=null===(e=t.match(L))||void 0===e?void 0:e.length)&&void 0!==r?r:0)+(null!==(i=null===(n=t.match(j))||void 0===n?void 0:n.length)&&void 0!==i?i:0)>0},parse:G,createTransformer:J,getAnimatableNone:function(t){var e=G(t);return J(t)(e.map(K))}},tt=new Set(["brightness","contrast","saturate","opacity"]);function et(t){var e=t.slice(0,-1).split("("),r=e[0],n=e[1];if("drop-shadow"===r)return t;var i=(n.match(L)||[])[0];if(!i)return t;var a=n.replace(i,""),o=tt.has(r)?1:0;return i!==n&&(o*=100),r+"("+o+a+")"}var rt=/([a-z-]*)\(.*?\)/g,nt=x(x({},Q),{getAnimatableNone:function(t){var e=t.match(rt);return e?e.map(et).join(" "):t}});const it=()=>({type:"spring",stiffness:500,damping:25,restDelta:.5,restSpeed:10}),at=t=>({type:"spring",stiffness:550,damping:0===t?100:30,restDelta:.01,restSpeed:10}),ot=()=>({type:"keyframes",ease:"linear",duration:300}),st=t=>({type:"keyframes",duration:800,values:t}),lt={default:at,x:it,y:it,z:it,rotate:it,rotateX:it,rotateY:it,rotateZ:it,scaleX:at,scaleY:at,scale:at,backgroundColor:ot,color:ot,opacity:ot},ut=(t,e)=>{let r;return r=Array.isArray(e)?st:lt[t]||lt.default,{to:e,...r(e)}},ct={...R,transform:Math.round},pt={color:$,backgroundColor:$,outlineColor:$,fill:$,stroke:$,borderColor:$,borderTopColor:$,borderRightColor:$,borderBottomColor:$,borderLeftColor:$,borderWidth:B,borderTopWidth:B,borderRightWidth:B,borderBottomWidth:B,borderLeftWidth:B,borderRadius:B,radius:B,borderTopLeftRadius:B,borderTopRightRadius:B,borderBottomRightRadius:B,borderBottomLeftRadius:B,width:B,maxWidth:B,height:B,maxHeight:B,size:B,top:B,right:B,bottom:B,left:B,padding:B,paddingTop:B,paddingRight:B,paddingBottom:B,paddingLeft:B,margin:B,marginTop:B,marginRight:B,marginBottom:B,marginLeft:B,rotate:S,rotateX:S,rotateY:S,rotateZ:S,scale:M,scaleX:M,scaleY:M,scaleZ:M,skew:S,skewX:S,skewY:S,distance:B,translateX:B,translateY:B,translateZ:B,x:B,y:B,z:B,perspective:B,transformPerspective:B,opacity:E,originX:F,originY:F,originZ:B,zIndex:ct,filter:nt,WebkitFilter:nt,fillOpacity:E,strokeOpacity:E,numOctaves:ct},dt=t=>pt[t],ft=(t,e)=>e&&"number"==typeof t&&e.transform?e.transform(t):t;const vt={linear:i.linear,easeIn:i.easeIn,easeInOut:i.easeInOut,easeOut:i.easeOut,circIn:i.circIn,circInOut:i.circInOut,circOut:i.circOut,backIn:i.backIn,backInOut:i.backInOut,backOut:i.backOut,anticipate:i.anticipate,bounceIn:i.bounceIn,bounceInOut:i.bounceInOut,bounceOut:i.bounceOut},mt=t=>{if(Array.isArray(t)){const[e,r,n,a]=t;return i.cubicBezier(e,r,n,a)}return"string"==typeof t?vt[t]:t},yt=(t,e)=>"zIndex"!==t&&(!("number"!=typeof e&&!Array.isArray(e))||!("string"!=typeof e||!Q.test(e)||e.startsWith("url(")));function ht({ease:t,times:e,delay:r,...n}){const i={...n};return e&&(i.offset=e),t&&(i.ease=(t=>Array.isArray(t)&&"number"!=typeof t[0])(t)?t.map(mt):mt(t)),r&&(i.elapsed=-r),i}function bt(t,e,r){return Array.isArray(e.to)&&(t.duration||(t.duration=800)),function(t){Array.isArray(t.to)&&null===t.to[0]&&(t.to=[...t.to],t.to[0]=t.from)}(e),function({delay:t,repeat:e,repeatType:r,repeatDelay:n,from:i,...a}){return!!Object.keys(a).length}(t)||(t={...t,...ut(r,e.to)}),{...e,...ht(t)}}function gt(t,e,r,n,a){const o=function(t,e){return t[e]||t.default||t}(n,t);let s=null==o.from?e.get():o.from;const l=yt(t,r);"none"===s&&l&&"string"==typeof r&&(s=function(t,e){let r=dt(t);return r!==nt&&(r=Q),r.getAnimatableNone?r.getAnimatableNone(e):void 0}(t,r));return yt(t,s)&&l&&!1!==o.type?function(l){const u={from:s,to:r,velocity:n.velocity?n.velocity:e.getVelocity(),onUpdate:t=>e.set(t)};return"inertia"===o.type||"decay"===o.type?i.inertia({...u,...o}):i.animate({...bt(o,u,t),onUpdate:t=>{u.onUpdate(t),o.onUpdate&&o.onUpdate(t)},onComplete:()=>{n.onComplete&&n.onComplete(),a&&a(),l&&l()}})}:function(t){return e.set(r),n.onComplete&&n.onComplete(),a&&a(),t&&t(),{stop:()=>{}}}}function wt(){const{motionValues:t,stop:e,get:r}=V();return{motionValues:t,stop:e,push:(t,e,n,i={},a)=>{const o=r(t,n[t],n);if(i&&i.immediate)return void o.set(e);const s=gt(t,o,e,i,a);o.start(s)}}}function Ot(t,n={},{push:i,stop:a}=wt()){const o=e.ref(n),s=t=>{if(!o||!o.value||!o.value[t])throw new Error(`The variant ${t} does not exist.`);return o.value[t]},l=e=>{let n=r.isObject(e)&&e.transition;return n||"string"!=typeof e||(e=s(e)),n&&delete e.transition,Promise.all(Object.entries(e).map((([r,a])=>new Promise((o=>{i(r,a,t,n||ut(r,e[r]),o)})))))};return{apply:l,set:e=>{let n=r.isObject(e)?e:s(e);n.transition&&delete n.transition,Object.entries(n).forEach((([e,r])=>{i(e,r,t,{immediate:!0})}))},stopTransitions:a,leave:async t=>{let e;o&&o.value&&(o.value.leave&&(e=o.value.leave),!o.value.leave&&o.value.initial&&(e=o.value.initial)),e?(await l(e),t()):t()}}}const kt="undefined"!=typeof window;function Vt({target:t,state:n,variants:i,apply:a}){const o=e.ref(!1),s=e.ref(!1),l=e.ref(!1),u=e.computed((()=>{let t=[];return i.value.hovered&&(t=[...t,...Object.keys(i.value.hovered)]),i.value.tapped&&(t=[...t,...Object.keys(i.value.tapped)]),i.value.focused&&(t=[...t,...Object.keys(i.value.focused)]),t})),c=e.computed((()=>{const t={};Object.assign(t,n.value),o.value&&i.value.hovered&&Object.assign(t,i.value.hovered),s.value&&i.value.tapped&&Object.assign(t,i.value.tapped),l.value&&i.value.focused&&Object.assign(t,i.value.focused);for(const e in t)u.value.includes(e)||delete t[e];return t}));e.watch(t,(t=>{t&&(i.value.hovered&&(r.useEventListener(t,"mouseenter",(()=>{o.value=!0})),r.useEventListener(t,"mouseleave",(()=>{o.value=!1,s.value=!1})),r.useEventListener(t,"mouseout",(()=>{o.value=!1,s.value=!1}))),i.value.tapped&&(kt&&null===window.onmousedown&&(r.useEventListener(t,"mousedown",(()=>{s.value=!0})),r.useEventListener(t,"mouseup",(()=>{s.value=!1}))),kt&&null===window.onpointerdown&&(r.useEventListener(t,"pointerdown",(()=>{s.value=!0})),r.useEventListener(t,"pointerup",(()=>{s.value=!1}))),kt&&null===window.ontouchstart&&(r.useEventListener(t,"touchstart",(()=>{s.value=!0})),r.useEventListener(t,"touchend",(()=>{s.value=!1})))),i.value.focused&&(r.useEventListener(t,"focus",(()=>{l.value=!0})),r.useEventListener(t,"blur",(()=>{l.value=!1}))))}),{immediate:!0}),e.watch(c,(t=>{a(t)}))}function xt(t,n={syncVariants:!0,lifeCycleHooks:!0,visibilityHooks:!0,eventListeners:!0}){n.lifeCycleHooks&&function({target:t,variants:r,variant:n}){e.watch(t,(()=>{r.value&&r.value.enter&&(r.value.initial&&(n.value="initial"),e.nextTick((()=>n.value="enter")))}),{immediate:!0,flush:"pre"})}(t),n.syncVariants&&function({state:t,apply:r}){e.watch(t,(t=>{t&&r(t)}),{immediate:!0})}(t),n.visibilityHooks&&function({target:t,variants:n,variant:i}){let a=r.noop;const o=e.watch(t,(e=>{e&&(a=r.useIntersectionObserver(t,(([{isIntersecting:t}])=>{n.value&&n.value.visible&&(i.value=t?"visible":"initial")})).stop)}),{immediate:!0})}(t),n.eventListeners&&Vt(t)}function At(t={}){const r=e.reactive({...t}),n=e.ref({});return e.watch(r,(()=>{const t={};for(const[e,n]of Object.entries(r)){const r=dt(e),i=ft(n,r);t[e]=i}n.value=t}),{immediate:!0,deep:!0}),{state:r,style:n}}function Tt(t){const r=e.ref(t);let n;const{state:i,style:a}=At(),o=e.watch(r,(t=>{if(t){for(const r of Object.keys(pt))null!=t.style[r]&&""!==t.style[r]&&e.set(i,r,t.style[r]);if(n)for(const r in n)e.set(t.style,r,n[r])}})),s=e.watch(a,(t=>{if(r.value&&r.value.style)for(const n in t)e.set(r.value.style,n,t[n]);else n=t}),{immediate:!0});return{style:i,stop:()=>{o(),s()}}}const Lt={x:"translateX",y:"translateY",z:"translateZ"};function jt(t={},r=!0){const n=e.reactive({...t}),i=e.ref("");return e.watch(n,(()=>{let t="",e=!1;for(const[r,i]of Object.entries(n)){const n=dt(r),a=ft(i,n);t+=`${Lt[r]||r}(${a}) `,"z"!==r&&"translateZ"!==r||(e=!0)}!e&&r?t+="translateZ(0)":t=t.trim(),i.value=t}),{immediate:!0,deep:!0}),{state:n,transform:i}}function Ct(t){const r=e.ref(t);let n;const{state:i,transform:a}=jt(),o=e.watch(r,(t=>{t&&n&&(t.style.transform=n)})),s=e.watch(a,(t=>{r.value&&r.value.style?r.value.style.transform=t:n=t}),{immediate:!0});return{transform:i,stop:()=>{o(),s()}}}const It=["","X","Y","Z"],Rt=["transformPerspective","x","y","z"];["perspective","translate","scale","rotate","skew"].forEach((t=>{It.forEach((e=>{Rt.push(t+e)}))}));const Et=new Set(Rt);function Mt(t){return Et.has(t)}function Pt(t){const r=e.ref(t),{style:n}=Tt(r),{transform:i}=Ct(r),a=e.reactive({});return e.watch(a,(t=>{for(const r in t){const a=Mt(r)?i:n;a[r]&&a[r]===t[r]||e.set(a,r,t[r])}}),{immediate:!0,deep:!0}),{motionProperties:a,style:n,transform:i}}function St(t={}){const r=e.ref(t),n=e.ref();return{state:e.computed((()=>{if(n.value)return r.value[n.value]})),variant:n}}function zt(t,r={},n){const i=e.ref(r),a=e.ref(t),{motionProperties:o}=Pt(a),{variant:s,state:l}=St(i),u={target:a,variant:s,variants:i,state:l,motionProperties:o,...Ot(o,i)};return xt(u,n),u}const Bt=["initial","enter","leave","visible","hovered","tapped","focused","delay"],Ft=t=>{const n=(n,i,o)=>{const s=e.ref(t||{});((t,e)=>{const n=t.props?t.props:t.data&&t.data.attrs?t.data.attrs:{};n&&(n.variants&&r.isObject(n.variants)&&(e.value={...e.value,...n.variants}),Bt.forEach((t=>{if("delay"!==t)n&&n[t]&&r.isObject(n[t])&&(e.value[t]=n[t]);else if(n&&n[t]&&r.isNumber(n[t])){const r=n[t];e&&e.value&&(e.value.enter&&(e.value.enter.transition||(e.value.enter.transition={}),e.value.enter.transition={...e.value.enter.transition,delay:r}),e.value.visible&&(e.value.visible.transition||(e.value.visible.transition={}),e.value.visible.transition={...e.value.visible.transition,delay:r}))}})))})(o,s);const l=zt(n,s);i.value&&e.set(a,i.value,l)},i=(t,r,n)=>{r.value&&a[r.value]&&e.del(a,r.value)};return{created:n,unmounted:i,bind:n,unbind:i}},Nt={initial:{opacity:0},enter:{opacity:1}},Ut={initial:{opacity:0},visible:{opacity:1}},Wt={initial:{scale:0,opacity:0},enter:{scale:1,opacity:1}},Zt={initial:{scale:0,opacity:0},visible:{scale:1,opacity:1}},Dt={initial:{x:-100,rotate:90,opacity:0},enter:{x:0,rotate:0,opacity:1}},Xt={initial:{x:-100,rotate:90,opacity:0},visible:{x:0,rotate:0,opacity:1}},Yt={initial:{x:100,rotate:-90,opacity:0},enter:{x:0,rotate:0,opacity:1}},$t={initial:{x:100,rotate:-90,opacity:0},visible:{x:0,rotate:0,opacity:1}},_t={initial:{y:-100,rotate:-90,opacity:0},enter:{y:0,rotate:0,opacity:1}},Ht={initial:{y:-100,rotate:-90,opacity:0},visible:{y:0,rotate:0,opacity:1}},qt={initial:{y:100,rotate:90,opacity:0},enter:{y:0,rotate:0,opacity:1}},Gt={initial:{y:100,rotate:90,opacity:0},visible:{y:0,rotate:0,opacity:1}},Jt={initial:{x:-100,opacity:0},enter:{x:0,opacity:1}},Kt={initial:{x:-100,opacity:0},visible:{x:0,opacity:1}},Qt={initial:{x:100,opacity:0},enter:{x:0,opacity:1}},te={initial:{x:100,opacity:0},visible:{x:0,opacity:1}},ee={initial:{y:-100,opacity:0},enter:{y:0,opacity:1}},re={initial:{y:-100,opacity:0},visible:{y:0,opacity:1}},ne={initial:{y:100,opacity:0},enter:{y:0,opacity:1}},ie={initial:{y:100,opacity:0},visible:{y:0,opacity:1}};var ae=Object.freeze({__proto__:null,fade:Nt,fadeVisible:Ut,pop:Wt,popVisible:Zt,rollBottom:qt,rollLeft:Dt,rollRight:Yt,rollTop:_t,rollVisibleBottom:Gt,rollVisibleLeft:Xt,rollVisibleRight:$t,rollVisibleTop:Ht,slideBottom:ne,slideLeft:Jt,slideRight:Qt,slideTop:ee,slideVisibleBottom:ie,slideVisibleLeft:Kt,slideVisibleRight:te,slideVisibleTop:re});function oe(t){const e="àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;",r=new RegExp(e.split("").join("|"),"g");return t.toString().replace(/[A-Z]/g,(t=>"-"+t)).toLowerCase().replace(/\s+/g,"-").replace(r,(t=>"aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------".charAt(e.indexOf(t)))).replace(/&/g,"-and-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")}const se={install(t,e){if(t.directive("motion",Ft()),!e||e&&!e.excludePresets)for(const e in ae){const r=ae[e];t.directive(`motion-${oe(e)}`,Ft(r))}if(e&&e.directives)for(const r in e.directives){const n=e.directives[r];0,t.directive(`motion-${r}`,Ft(n))}}};return t.MotionDirective=Ft,t.MotionPlugin=se,t.fade=Nt,t.fadeVisible=Ut,t.isMotionInstance=function(t){const r=t;return void 0!==r.apply&&n.isFunction(r.apply)&&void 0!==r.set&&n.isFunction(r.set)&&void 0!==r.stopTransitions&&n.isFunction(r.stopTransitions)&&void 0!==r.target&&e.isRef(r.target)},t.pop=Wt,t.popVisible=Zt,t.reactiveStyle=At,t.reactiveTransform=jt,t.rollBottom=qt,t.rollLeft=Dt,t.rollRight=Yt,t.rollTop=_t,t.rollVisibleBottom=Gt,t.rollVisibleLeft=Xt,t.rollVisibleRight=$t,t.rollVisibleTop=Ht,t.slideBottom=ne,t.slideLeft=Jt,t.slideRight=Qt,t.slideTop=ee,t.slideVisibleBottom=ie,t.slideVisibleLeft=Kt,t.slideVisibleRight=te,t.slideVisibleTop=re,t.slugify=oe,t.useElementStyle=Tt,t.useElementTransform=Ct,t.useMotion=zt,t.useMotionControls=Ot,t.useMotionProperties=Pt,t.useMotionTransitions=wt,t.useMotionVariants=St,t.useMotions=function(){return a},t.useSpring=function(t,r){const n=e.ref(t);let a={};e.watch(n,(t=>{t&&(a=t instanceof HTMLElement||t instanceof SVGElement?Pt(n).motionProperties:{...t})}),{immediate:!0});const{stop:o,get:s}=V();return{set:t=>Promise.all(Object.entries(t).map((([t,e])=>{const n=s(t,e,a);return n.start((t=>i.animate({type:"spring",from:n.get(),to:e,velocity:n.getVelocity(),onUpdate:t=>n.set(t),onComplete:t,...r})))}))),stop:o,values:a}},Object.defineProperty(t,"__esModule",{value:!0}),t}({},VueDemi,VueUse,shared,popmotion);

package.json

 {
   "name": "@vueuse/motion",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "🤹 Vue Composables putting your components in motion",
@@ -5,0 +5,0 @@ "repository": "https://github.com/vueuse/motion",

No alert changes

Improved metrics

Total package byte prevSize

581604

increased by0.1%

Lines of code

13255

increased by0.18%

No dependency changes