Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@motionone/vue
Advanced tools
@motionone/vue - npm Package Compare versions
Comparing version 10.14.0 to 10.14.1
| import { defineComponent, ref, inject, provide, onMounted, onUpdated, h, onBeforeUpdate, Transition } from 'vue'; | ||
| /** | ||
| * The MotionValue tracks the state of a single animatable | ||
| * value. Currently, updatedAt and current are unused. The | ||
| * long term idea is to use this to minimise the number | ||
| * of DOM reads, and to abstract the DOM interactions here. | ||
| */ | ||
| class MotionValue { | ||
| setAnimation(animation) { | ||
| this.animation = animation; | ||
| animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => {}); | ||
| } | ||
| clearAnimation() { | ||
| this.animation = this.generator = undefined; | ||
| } | ||
| } | ||
| const data = new WeakMap(); | ||
| function getAnimationData(element) { | ||
| if (!data.has(element)) { | ||
| data.set(element, { | ||
| transforms: [], | ||
| values: new Map() | ||
| }); | ||
| } | ||
| return data.get(element); | ||
| } | ||
| function getMotionValue(motionValues, name) { | ||
| if (!motionValues.has(name)) { | ||
| motionValues.set(name, new MotionValue()); | ||
| } | ||
| return motionValues.get(name); | ||
| } | ||
| function addUniqueItem(array, item) { | ||
@@ -137,108 +98,2 @@ array.indexOf(item) === -1 && array.push(item); | ||
| /** | ||
| * A list of all transformable axes. We'll use this list to generated a version | ||
| * of each axes for each transform. | ||
| */ | ||
| const axes = ["", "X", "Y", "Z"]; | ||
| /** | ||
| * An ordered array of each transformable value. By default, transform values | ||
| * will be sorted to this order. | ||
| */ | ||
| const order = ["translate", "scale", "rotate", "skew"]; | ||
| const transformAlias = { | ||
| x: "translateX", | ||
| y: "translateY", | ||
| z: "translateZ" | ||
| }; | ||
| const rotation = { | ||
| syntax: "<angle>", | ||
| initialValue: "0deg", | ||
| toDefaultUnit: v => v + "deg" | ||
| }; | ||
| const baseTransformProperties = { | ||
| translate: { | ||
| syntax: "<length-percentage>", | ||
| initialValue: "0px", | ||
| toDefaultUnit: v => v + "px" | ||
| }, | ||
| rotate: rotation, | ||
| scale: { | ||
| syntax: "<number>", | ||
| initialValue: 1, | ||
| toDefaultUnit: noopReturn | ||
| }, | ||
| skew: rotation | ||
| }; | ||
| const transformDefinitions = new Map(); | ||
| const asTransformCssVar = name => `--motion-${name}`; | ||
| /** | ||
| * Generate a list of every possible transform key | ||
| */ | ||
| const transforms = ["x", "y", "z"]; | ||
| order.forEach(name => { | ||
| axes.forEach(axis => { | ||
| transforms.push(name + axis); | ||
| transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]); | ||
| }); | ||
| }); | ||
| /** | ||
| * A function to use with Array.sort to sort transform keys by their default order. | ||
| */ | ||
| const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b); | ||
| /** | ||
| * Provide a quick way to check if a string is the name of a transform | ||
| */ | ||
| const transformLookup = new Set(transforms); | ||
| const isTransform = name => transformLookup.has(name); | ||
| const addTransformToElement = (element, name) => { | ||
| // Map x to translateX etc | ||
| if (transformAlias[name]) name = transformAlias[name]; | ||
| const { | ||
| transforms | ||
| } = getAnimationData(element); | ||
| addUniqueItem(transforms, name); | ||
| /** | ||
| * TODO: An optimisation here could be to cache the transform in element data | ||
| * and only update if this has changed. | ||
| */ | ||
| element.style.transform = buildTransformTemplate(transforms); | ||
| }; | ||
| const buildTransformTemplate = transforms => transforms.sort(compareTransformOrder).reduce(transformListToString, "").trim(); | ||
| const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`; | ||
| const isCssVar = name => name.startsWith("--"); | ||
| const registeredProperties = new Set(); | ||
| function registerCssVariable(name) { | ||
| if (registeredProperties.has(name)) return; | ||
| registeredProperties.add(name); | ||
| try { | ||
| const { | ||
| syntax, | ||
| initialValue | ||
| } = transformDefinitions.has(name) ? transformDefinitions.get(name) : {}; | ||
| CSS.registerProperty({ | ||
| name, | ||
| inherits: false, | ||
| syntax, | ||
| initialValue | ||
| }); | ||
| } catch (e) {} | ||
| } | ||
| /* | ||
@@ -536,2 +391,147 @@ Bezier function generator | ||
| /** | ||
| * The MotionValue tracks the state of a single animatable | ||
| * value. Currently, updatedAt and current are unused. The | ||
| * long term idea is to use this to minimise the number | ||
| * of DOM reads, and to abstract the DOM interactions here. | ||
| */ | ||
| class MotionValue { | ||
| setAnimation(animation) { | ||
| this.animation = animation; | ||
| animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => {}); | ||
| } | ||
| clearAnimation() { | ||
| this.animation = this.generator = undefined; | ||
| } | ||
| } | ||
| const data = new WeakMap(); | ||
| function getAnimationData(element) { | ||
| if (!data.has(element)) { | ||
| data.set(element, { | ||
| transforms: [], | ||
| values: new Map() | ||
| }); | ||
| } | ||
| return data.get(element); | ||
| } | ||
| function getMotionValue(motionValues, name) { | ||
| if (!motionValues.has(name)) { | ||
| motionValues.set(name, new MotionValue()); | ||
| } | ||
| return motionValues.get(name); | ||
| } | ||
| /** | ||
| * A list of all transformable axes. We'll use this list to generated a version | ||
| * of each axes for each transform. | ||
| */ | ||
| const axes = ["", "X", "Y", "Z"]; | ||
| /** | ||
| * An ordered array of each transformable value. By default, transform values | ||
| * will be sorted to this order. | ||
| */ | ||
| const order = ["translate", "scale", "rotate", "skew"]; | ||
| const transformAlias = { | ||
| x: "translateX", | ||
| y: "translateY", | ||
| z: "translateZ" | ||
| }; | ||
| const rotation = { | ||
| syntax: "<angle>", | ||
| initialValue: "0deg", | ||
| toDefaultUnit: v => v + "deg" | ||
| }; | ||
| const baseTransformProperties = { | ||
| translate: { | ||
| syntax: "<length-percentage>", | ||
| initialValue: "0px", | ||
| toDefaultUnit: v => v + "px" | ||
| }, | ||
| rotate: rotation, | ||
| scale: { | ||
| syntax: "<number>", | ||
| initialValue: 1, | ||
| toDefaultUnit: noopReturn | ||
| }, | ||
| skew: rotation | ||
| }; | ||
| const transformDefinitions = new Map(); | ||
| const asTransformCssVar = name => `--motion-${name}`; | ||
| /** | ||
| * Generate a list of every possible transform key | ||
| */ | ||
| const transforms = ["x", "y", "z"]; | ||
| order.forEach(name => { | ||
| axes.forEach(axis => { | ||
| transforms.push(name + axis); | ||
| transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]); | ||
| }); | ||
| }); | ||
| /** | ||
| * A function to use with Array.sort to sort transform keys by their default order. | ||
| */ | ||
| const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b); | ||
| /** | ||
| * Provide a quick way to check if a string is the name of a transform | ||
| */ | ||
| const transformLookup = new Set(transforms); | ||
| const isTransform = name => transformLookup.has(name); | ||
| const addTransformToElement = (element, name) => { | ||
| // Map x to translateX etc | ||
| if (transformAlias[name]) name = transformAlias[name]; | ||
| const { | ||
| transforms | ||
| } = getAnimationData(element); | ||
| addUniqueItem(transforms, name); | ||
| /** | ||
| * TODO: An optimisation here could be to cache the transform in element data | ||
| * and only update if this has changed. | ||
| */ | ||
| element.style.transform = buildTransformTemplate(transforms); | ||
| }; | ||
| const buildTransformTemplate = transforms => transforms.sort(compareTransformOrder).reduce(transformListToString, "").trim(); | ||
| const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`; | ||
| const isCssVar = name => name.startsWith("--"); | ||
| const registeredProperties = new Set(); | ||
| function registerCssVariable(name) { | ||
| if (registeredProperties.has(name)) return; | ||
| registeredProperties.add(name); | ||
| try { | ||
| const { | ||
| syntax, | ||
| initialValue | ||
| } = transformDefinitions.has(name) ? transformDefinitions.get(name) : {}; | ||
| CSS.registerProperty({ | ||
| name, | ||
| inherits: false, | ||
| syntax, | ||
| initialValue | ||
| }); | ||
| } catch (e) {} | ||
| } | ||
| const testAnimation = (keyframes, options) => document.createElement("div").animate(keyframes, options); | ||
@@ -682,2 +682,3 @@ | ||
| let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; | ||
| let AnimationPolyfill = arguments.length > 4 ? arguments[4] : undefined; | ||
| const record = getDevToolsRecord(); | ||
@@ -845,3 +846,3 @@ const isRecording = options.record !== false && record; | ||
| */ | ||
| } else if (valueIsTransform) { | ||
| } else if (AnimationPolyfill && valueIsTransform) { | ||
| /** | ||
@@ -861,3 +862,3 @@ * If any keyframe is a string (because we measured it from the DOM), we need to convert | ||
| animation = new Animation(latest => { | ||
| animation = new AnimationPolyfill(latest => { | ||
| style.set(element, name, toUnit ? toUnit(latest) : latest); | ||
@@ -1280,3 +1281,3 @@ }, keyframes, Object.assign(Object.assign({}, options), { | ||
| (_a = baseTarget[key]) !== null && _a !== void 0 ? _a : baseTarget[key] = style.get(element, key); | ||
| animationFactories.push(animateStyle(element, key, target[key], animationOptions[key])); | ||
| animationFactories.push(animateStyle(element, key, target[key], animationOptions[key], Animation)); | ||
| } | ||
@@ -1283,0 +1284,0 @@ }); // Wait for all animation states to read from the DOM |
@@ -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=>Array.isArray(t)&&!c(t[0]);function h(t,e){return u(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}const d=(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 v(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=m(0,e,i);t.push(d(n,1,a))}}function y(t){const e=[0];return v(e,t-1),e}const g=t=>Array.isArray(t)&&c(t[0]),b=t=>"object"==typeof t&&Boolean(t.createAnimation),w=t=>"function"==typeof t,O=t=>1e3*t,E=["","X","Y","Z"],A={x:"translateX",y:"translateY",z:"translateZ"},j={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},S={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:j,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:p},skew:j},x=new Map,T=t=>`--motion-${t}`,D=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{E.forEach((e=>{D.push(t+e),x.set(T(t+e),S[t])}))}));const M=(t,e)=>D.indexOf(t)-D.indexOf(e),k=new Set(D),P=t=>k.has(t),V=(t,e)=>{A[e]&&(e=A[e]);const{transforms:n}=a(t);o(n,e),t.style.transform=B(n)},B=t=>t.sort(M).reduce(L,"").trim(),L=(t,e)=>`${t} ${e}(var(${T(e)}))`,C=t=>t.startsWith("--"),R=new Set;function U(t){if(!R.has(t)){R.add(t);try{const{syntax:e,initialValue:n}=x.has(t)?x.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}const $=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function I(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=$(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:$(a(t),e,i)}const q={ease:I(.25,.1,.25,1),"ease-in":I(.42,0,1,1),"ease-in-out":I(.42,0,.58,1),"ease-out":I(0,0,.58,1)},F=/\((.*?)\)/;function W(t){if(w(t))return t;if(g(t))return I(...t);if(q[t])return q[t];if(t.startsWith("steps")){const e=F.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}class _{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,1],{easing:n,duration:i=l.duration,delay:a=l.delay,endDelay:s=l.endDelay,repeat:o=l.repeat,offset:c,direction:f="normal"}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=p,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),n=n||l.easing,b(n)){const t=n.createAnimation(e);n=t.easing,e=t.keyframes||e,i=t.duration||i}this.repeat=o,this.easing=u(n)?p:W(n),this.updateDuration(i);const 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]:p;const i=t.length,a=i-e.length;return a>0&&v(e,a),a=>{let s=0;for(;s<i-2&&!(a<e[s+1]);s++);let o=r(0,1,m(e[s],e[s+1],a));return o=h(n,s)(o),d(t[s],t[s+1],o)}}(e,c,u(n)?n.map(W):p);this.tick=e=>{var n;let i=0;i=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=i,i/=1e3,i=Math.max(i-a,0),"finished"===this.playState&&void 0===this.pauseTime&&(i=this.totalDuration);const o=i/this.duration;let r=Math.floor(o),l=o%1;!l&&o>=1&&(l=1),1===l&&r--;const c=r%2;("reverse"===f||"alternate"===f&&c||"alternate-reverse"===f&&!c)&&(l=1-l);const u=i>=this.totalDuration?1:Math.min(l,1),h=g(this.easing(u));t(h);void 0===this.pauseTime&&("finished"===this.playState||i>=this.totalDuration+s)?(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(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}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(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==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 z=(t,e)=>document.createElement("div").animate(t,e),K={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{z({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(z({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{z({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},X={},Y={};for(const t in K)Y[t]=()=>(void 0===X[t]&&(X[t]=K[t]()),X[t]);const Z=(t,e)=>w(t)?Y.linearEasing()?`linear(${((t,e)=>{let n="";const i=Math.round(e/.015);for(let e=0;e<i;e++)n+=t(m(0,i-1,e))+", ";return n.substring(0,n.length-2)})(t,e)})`:l.easing:g(t)?N(t):t,N=t=>{let[e,n,i,a]=t;return`cubic-bezier(${e}, ${n}, ${i}, ${a})`};function G(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}const H=t=>Array.isArray(t)?t:[t];function J(t){return A[t]&&(t=A[t]),P(t)?T(t):t}const Q=(t,e)=>{e=J(e);let n=C(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=x.get(e);t&&(n=t.initialValue)}return n},tt=(t,e,n)=>{e=J(e),C(e)?t.style.setProperty(e,n):t.style[e]=n};function et(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 nt(t,e){var n;let i=(null==e?void 0:e.toDefaultUnit)||p;const a=t[t.length-1];if("string"==typeof a){const t=(null===(n=a.match(/(-?[\d.]+)([a-z%]*)/))||void 0===n?void 0:n[2])||"";t&&(i=e=>e+t)}return i}function it(){return window.__MOTION_DEV_TOOLS_RECORD}function at(t,e,n){let i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};const o=it(),r=!1!==i.record&&o;let h,{duration:d=l.duration,delay:p=l.delay,endDelay:m=l.endDelay,repeat:v=l.repeat,easing:y=l.easing,direction:g,offset:E,allowWebkitAcceleration:A=!1}=i;const j=a(t),S=P(e);let T=Y.waapi();S&&V(t,e);const D=J(e),M=s(j.values,D),k=x.get(D);return et(M.animation,!(b(y)&&M.generator)&&!1!==i.record),()=>{const a=()=>{var e,n;return null!==(n=null!==(e=Q(t,D))&&void 0!==e?e:null==k?void 0:k.initialValue)&&void 0!==n?n:0};let s=G(H(n),a);const l=nt(s,k);if(b(y)){const t=y.createAnimation(s,"opacity"!==e,a,D,M);y=t.easing,s=t.keyframes||s,d=t.duration||d}if(C(D)&&(Y.cssRegisterProperty()?U(D):T=!1),S&&!Y.linearEasing()&&(w(y)||u(y)&&y.some(w))&&(T=!1),T){k&&(s=s.map((t=>c(t)?k.toDefaultUnit(t):t))),1!==s.length||Y.partialKeyframes()&&!r||s.unshift(a());const e={delay:O(p),duration:O(d),endDelay:O(m),easing:u(y)?void 0:Z(y,d),direction:g,iterations:v+1,fill:"both"};h=t.animate({[D]:s,offset:E,easing:u(y)?y.map((t=>Z(t,d))):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((()=>{tt(t,D,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 _((e=>{tt(t,D,l?l(e):e)}),s,Object.assign(Object.assign({},i),{duration:d,easing:y}));else{const e=s[s.length-1];tt(t,D,k&&c(e)?k.toDefaultUnit(e):e)}return r&&o(t,e,s,{duration:d,delay:p,easing:y,repeat:v,offset:E},"motion-one"),M.setAnimation(h),h}}const st=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function ot(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 rt(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 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 ht;function dt(){if(!ht)return;const t=ht.sort(mt).map(vt);t.forEach(yt),t.forEach(yt),ht=void 0}function ft(t){ht?o(ht,t):(ht=[t],requestAnimationFrame(dt))}function pt(t){ht&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(ht,t)}const mt=(t,e)=>t.getDepth()-e.getDepth(),vt=t=>t.animateUpdates(),yt=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:s={}}=n;const{once:o}=s,r=rt(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=ot(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);w(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:lt[a]});return s.forEach((t=>r.observe(t))),()=>r.disconnect()}(t,(e=>{if(i(),wt(t,"viewenter",e),!o)return e=>{a(),wt(t,"viewleave",e)}}),r)}},Et=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),bt(t,e,i))},At={inView:Ot,hover:{isActive:t=>Boolean(t.hover),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const a=Et(t,"hoverstart",n),s=Et(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(),bt(t,"pressend",e),window.removeEventListener("pointerup",a)},s=e=>{n(),bt(t,"pressstart",e),window.addEventListener("pointerup",a)};return t.addEventListener("pointerdown",s),()=>{t.removeEventListener("pointerdown",s),window.removeEventListener("pointerup",a)}}}},jt=["initial","animate",...Object.keys(At),"exit"],St=new WeakMap;function xt(t){const e={},n=[];for(let i in t){const a=t[i];P(i)&&(A[i]&&(i=A[i]),n.push(i),i=T(i));let s=Array.isArray(a)?a[0]:a;const o=x.get(i);o&&(s=c(a)?o.toDefaultUnit(a):a),e[i]=s}return n.length&&(e.transform=B(n)),e}const Tt="motion-state",Dt="motion-presence",Mt={type:Object},kt=e.defineComponent({name:"Motion",inheritAttrs:!0,props:{tag:{type:String,default:"div"},initial:{type:[Object,Boolean]},animate:Mt,inView:Mt,hover:Mt,press:Mt,exit:Mt,inViewOptions:Mt,transition:Mt,style:Mt},setup(t){const n=e.ref(null),i=e.inject(Tt,void 0),a=e.inject(Dt,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 jt)o[t]="string"==typeof e[t]?e[t]:null==n?void 0:n.getContext()[t];const r=!1===e.initial?"animate":"initial";let l=rt(ut(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 jt){if(!a[t])continue;const s=ut(e[t]);if(s)for(const t in s)"transition"!==t&&(l[t]=s[t],o[t]=st(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]),ct(s[e],l[e])&&(null!==(n=c[e])&&void 0!==n||(c[e]=Q(t,e)),u.push(at(t,e,l[e],o[e])))})),yield;const h=u.map((t=>t())).filter(Boolean);if(!h.length)return;const d=l;t.dispatchEvent(gt("motionstart",d)),Promise.all(h.map((t=>t.finished))).then((()=>{t.dispatchEvent(gt("motioncomplete",d))})).catch(f)}const h=(t,e)=>()=>{a[t]=e,ft(p)},d=()=>{for(const n in At){const i=At[n].isActive(e),a=s[n];i&&!a?s[n]=At[n].subscribe(t,{enable:h(n,!0),disable:h(n,!1)},e):!i&&a&&(a(),delete s[n])}},p={update:n=>{t&&(e=n,d(),ft(p))},setActive:(e,n)=>{t&&(a[e]=n,ft(p))},animateUpdates:u,getDepth:()=>i,getTarget:()=>l,getOptions:()=>e,getContext:()=>o,mount:e=>(t=e,St.set(t,p),d(),()=>{St.delete(t),pt(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(Tt,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=xt(s.getTarget());for(const e in t)tt(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:xt(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))}}),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=St.get(t);e&&(Vt(t),e.setActive("exit",!1))},exit(t,e){const n=St.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(Dt,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=kt,t.Presence=Bt,Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue); | ||
| var Motion=function(t,e){"use strict";function n(t,e){-1===t.indexOf(e)&&t.push(e)}const i=(t,e,n)=>Math.min(Math.max(n,t),e),a={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},s=t=>"number"==typeof t,o=t=>Array.isArray(t)&&!s(t[0]);function r(t,e){return o(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}const l=(t,e,n)=>-n*t+n*e+t,c=()=>{},u=t=>t,h=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function d(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=h(0,e,i);t.push(l(n,1,a))}}function f(t){const e=[0];return d(e,t-1),e}const p=t=>Array.isArray(t)&&s(t[0]),m=t=>"object"==typeof t&&Boolean(t.createAnimation),v=t=>"function"==typeof t,g=t=>1e3*t,y=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function b(t,e,n,i){if(t===e&&n===i)return u;const a=e=>function(t,e,n,i,a){let s,o,r=0;do{o=e+(n-e)/2,s=y(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:y(a(t),e,i)}const w={ease:b(.25,.1,.25,1),"ease-in":b(.42,0,1,1),"ease-in-out":b(.42,0,.58,1),"ease-out":b(0,0,.58,1)},O=/\((.*?)\)/;function E(t){if(v(t))return t;if(p(t))return b(...t);if(w[t])return w[t];if(t.startsWith("steps")){const e=O.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 a=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,s="end"===e?Math.floor(a):Math.ceil(a);return i(0,1,s/t)}}(parseFloat(t[0]),t[1].trim())}}return u}class A{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,1],{easing:n,duration:s=a.duration,delay:c=a.delay,endDelay:p=a.endDelay,repeat:v=a.repeat,offset:g,direction:y="normal"}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.easing=u,this.duration=0,this.totalDuration=0,this.repeat=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),n=n||a.easing,m(n)){const t=n.createAnimation(e);n=t.easing,e=t.keyframes||e,s=t.duration||s}this.repeat=v,this.easing=o(n)?u:E(n),this.updateDuration(s);const b=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:f(t.length),n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:u;const a=t.length,s=a-e.length;return s>0&&d(e,s),s=>{let o=0;for(;o<a-2&&!(s<e[o+1]);o++);let c=i(0,1,h(e[o],e[o+1],s));return c=r(n,o)(c),l(t[o],t[o+1],c)}}(e,g,o(n)?n.map(E):u);this.tick=e=>{var n;let i=0;i=void 0!==this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate,this.t=i,i/=1e3,i=Math.max(i-c,0),"finished"===this.playState&&void 0===this.pauseTime&&(i=this.totalDuration);const a=i/this.duration;let s=Math.floor(a),o=a%1;!o&&a>=1&&(o=1),1===o&&s--;const r=s%2;("reverse"===y||"alternate"===y&&r||"alternate-reverse"===y&&!r)&&(o=1-o);const l=i>=this.totalDuration?1:Math.min(o,1),u=b(this.easing(l));t(u);void 0===this.pauseTime&&("finished"===this.playState||i>=this.totalDuration+p)?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,u)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",void 0!==this.pauseTime?this.startTime=t-this.pauseTime:this.startTime||(this.startTime=t),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,this.frameRequestId=requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=this.t}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(){}updateDuration(t){this.duration=t,this.totalDuration=t*(this.repeat+1)}get currentTime(){return this.t}set currentTime(t){void 0!==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}}class j{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const S=new WeakMap;function x(t){return S.has(t)||S.set(t,{transforms:[],values:new Map}),S.get(t)}function T(t,e){return t.has(e)||t.set(e,new j),t.get(e)}const D=["","X","Y","Z"],M={x:"translateX",y:"translateY",z:"translateZ"},k={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},P={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:k,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:u},skew:k},V=new Map,B=t=>`--motion-${t}`,L=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{D.forEach((e=>{L.push(t+e),V.set(B(t+e),P[t])}))}));const C=(t,e)=>L.indexOf(t)-L.indexOf(e),R=new Set(L),U=t=>R.has(t),$=(t,e)=>{M[e]&&(e=M[e]);const{transforms:i}=x(t);n(i,e),t.style.transform=I(i)},I=t=>t.sort(C).reduce(q,"").trim(),q=(t,e)=>`${t} ${e}(var(${B(e)}))`,F=t=>t.startsWith("--"),W=new Set;function _(t){if(!W.has(t)){W.add(t);try{const{syntax:e,initialValue:n}=V.has(t)?V.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}const z=(t,e)=>document.createElement("div").animate(t,e),K={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{z({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(z({opacity:[0,1]},{duration:.001}).finished),linearEasing:()=>{try{z({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}},X={},Y={};for(const t in K)Y[t]=()=>(void 0===X[t]&&(X[t]=K[t]()),X[t]);const Z=(t,e)=>v(t)?Y.linearEasing()?`linear(${((t,e)=>{let n="";const i=Math.round(e/.015);for(let e=0;e<i;e++)n+=t(h(0,i-1,e))+", ";return n.substring(0,n.length-2)})(t,e)})`:a.easing:p(t)?N(t):t,N=t=>{let[e,n,i,a]=t;return`cubic-bezier(${e}, ${n}, ${i}, ${a})`};function G(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}const H=t=>Array.isArray(t)?t:[t];function J(t){return M[t]&&(t=M[t]),U(t)?B(t):t}const Q=(t,e)=>{e=J(e);let n=F(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=V.get(e);t&&(n=t.initialValue)}return n},tt=(t,e,n)=>{e=J(e),F(e)?t.style.setProperty(e,n):t.style[e]=n};function et(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 nt(t,e){var n;let i=(null==e?void 0:e.toDefaultUnit)||u;const a=t[t.length-1];if("string"==typeof a){const t=(null===(n=a.match(/(-?[\d.]+)([a-z%]*)/))||void 0===n?void 0:n[2])||"";t&&(i=e=>e+t)}return i}function it(){return window.__MOTION_DEV_TOOLS_RECORD}function at(t,e,n){let i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},r=arguments.length>4?arguments[4]:void 0;const l=it(),u=!1!==i.record&&l;let h,{duration:d=a.duration,delay:f=a.delay,endDelay:p=a.endDelay,repeat:y=a.repeat,easing:b=a.easing,direction:w,offset:O,allowWebkitAcceleration:E=!1}=i;const A=x(t),j=U(e);let S=Y.waapi();j&&$(t,e);const D=J(e),M=T(A.values,D),k=V.get(D);return et(M.animation,!(m(b)&&M.generator)&&!1!==i.record),()=>{const a=()=>{var e,n;return null!==(n=null!==(e=Q(t,D))&&void 0!==e?e:null==k?void 0:k.initialValue)&&void 0!==n?n:0};let A=G(H(n),a);const x=nt(A,k);if(m(b)){const t=b.createAnimation(A,"opacity"!==e,a,D,M);b=t.easing,A=t.keyframes||A,d=t.duration||d}if(F(D)&&(Y.cssRegisterProperty()?_(D):S=!1),j&&!Y.linearEasing()&&(v(b)||o(b)&&b.some(v))&&(S=!1),S){k&&(A=A.map((t=>s(t)?k.toDefaultUnit(t):t))),1!==A.length||Y.partialKeyframes()&&!u||A.unshift(a());const e={delay:g(f),duration:g(d),endDelay:g(p),easing:o(b)?void 0:Z(b,d),direction:w,iterations:y+1,fill:"both"};h=t.animate({[D]:A,offset:O,easing:o(b)?b.map((t=>Z(t,d))):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((()=>{tt(t,D,n),h.cancel()})).catch(c),E||(h.playbackRate=1.000001)}else if(r&&j)A=A.map((t=>"string"==typeof t?parseFloat(t):t)),1===A.length&&A.unshift(parseFloat(a())),h=new r((e=>{tt(t,D,x?x(e):e)}),A,Object.assign(Object.assign({},i),{duration:d,easing:b}));else{const e=A[A.length-1];tt(t,D,k&&s(e)?k.toDefaultUnit(e):e)}return u&&l(t,e,A,{duration:d,delay:f,easing:b,repeat:y,offset:O},"motion-one"),M.setAnimation(h),h}}const st=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function ot(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 rt(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 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 ht;function dt(){if(!ht)return;const t=ht.sort(mt).map(vt);t.forEach(gt),t.forEach(gt),ht=void 0}function ft(t){ht?n(ht,t):(ht=[t],requestAnimationFrame(dt))}function pt(t){ht&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(ht,t)}const mt=(t,e)=>t.getDepth()-e.getDepth(),vt=t=>t.animateUpdates(),gt=t=>t.next(),yt=(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:s={}}=n;const{once:o}=s,r=rt(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=ot(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);v(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:lt[a]});return s.forEach((t=>r.observe(t))),()=>r.disconnect()}(t,(e=>{if(i(),wt(t,"viewenter",e),!o)return e=>{a(),wt(t,"viewleave",e)}}),r)}},Et=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),bt(t,e,i))},At={inView:Ot,hover:{isActive:t=>Boolean(t.hover),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const a=Et(t,"hoverstart",n),s=Et(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(),bt(t,"pressend",e),window.removeEventListener("pointerup",a)},s=e=>{n(),bt(t,"pressstart",e),window.addEventListener("pointerup",a)};return t.addEventListener("pointerdown",s),()=>{t.removeEventListener("pointerdown",s),window.removeEventListener("pointerup",a)}}}},jt=["initial","animate",...Object.keys(At),"exit"],St=new WeakMap;function xt(t){const e={},n=[];for(let i in t){const a=t[i];U(i)&&(M[i]&&(i=M[i]),n.push(i),i=B(i));let o=Array.isArray(a)?a[0]:a;const r=V.get(i);r&&(o=s(a)?r.toDefaultUnit(a):a),e[i]=o}return n.length&&(e.transform=I(n)),e}const Tt="motion-state",Dt="motion-presence",Mt={type:Object},kt=e.defineComponent({name:"Motion",inheritAttrs:!0,props:{tag:{type:String,default:"div"},initial:{type:[Object,Boolean]},animate:Mt,inView:Mt,hover:Mt,press:Mt,exit:Mt,inViewOptions:Mt,transition:Mt,style:Mt},setup(t){const n=e.ref(null),i=e.inject(Tt,void 0),a=e.inject(Dt,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 jt)o[t]="string"==typeof e[t]?e[t]:null==n?void 0:n.getContext()[t];const r=!1===e.initial?"animate":"initial";let l=rt(ut(e[r]||o[r],e.variants)||{},["transition"]);const u=Object.assign({},l);function*h(){var n,i;const s=l;l={};const o={};for(const t of jt){if(!a[t])continue;const s=ut(e[t]);if(s)for(const t in s)"transition"!==t&&(l[t]=s[t],o[t]=st(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)]),h=[];r.forEach((e=>{var n;void 0===l[e]&&(l[e]=u[e]),ct(s[e],l[e])&&(null!==(n=u[e])&&void 0!==n||(u[e]=Q(t,e)),h.push(at(t,e,l[e],o[e],A)))})),yield;const d=h.map((t=>t())).filter(Boolean);if(!d.length)return;const f=l;t.dispatchEvent(yt("motionstart",f)),Promise.all(d.map((t=>t.finished))).then((()=>{t.dispatchEvent(yt("motioncomplete",f))})).catch(c)}const d=(t,e)=>()=>{a[t]=e,ft(p)},f=()=>{for(const n in At){const i=At[n].isActive(e),a=s[n];i&&!a?s[n]=At[n].subscribe(t,{enable:d(n,!0),disable:d(n,!1)},e):!i&&a&&(a(),delete s[n])}},p={update:n=>{t&&(e=n,f(),ft(p))},setActive:(e,n)=>{t&&(a[e]=n,ft(p))},animateUpdates:h,getDepth:()=>i,getTarget:()=>l,getOptions:()=>e,getContext:()=>o,mount:e=>(t=e,St.set(t,p),f(),()=>{St.delete(t),pt(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(Tt,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=xt(s.getTarget());for(const e in t)tt(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:xt(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))}}),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=St.get(t);e&&(Vt(t),e.setActive("exit",!1))},exit(t,e){const n=St.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(Dt,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=kt,t.Presence=Bt,Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue); |
@@ -1,37 +0,2 @@ | ||
| 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');/** | ||
| * The MotionValue tracks the state of a single animatable | ||
| * value. Currently, updatedAt and current are unused. The | ||
| * long term idea is to use this to minimise the number | ||
| * of DOM reads, and to abstract the DOM interactions here. | ||
| */ | ||
| class MotionValue { | ||
| setAnimation(animation) { | ||
| this.animation = animation; | ||
| animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => {}); | ||
| } | ||
| clearAnimation() { | ||
| this.animation = this.generator = undefined; | ||
| } | ||
| }const data = new WeakMap(); | ||
| function getAnimationData(element) { | ||
| if (!data.has(element)) { | ||
| data.set(element, { | ||
| transforms: [], | ||
| values: new Map() | ||
| }); | ||
| } | ||
| return data.get(element); | ||
| } | ||
| function getMotionValue(motionValues, name) { | ||
| if (!motionValues.has(name)) { | ||
| motionValues.set(name, new MotionValue()); | ||
| } | ||
| return motionValues.get(name); | ||
| }function addUniqueItem(array, item) { | ||
| 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');function addUniqueItem(array, item) { | ||
| array.indexOf(item) === -1 && array.push(item); | ||
@@ -97,105 +62,3 @@ } | ||
| s: milliseconds => milliseconds / 1000 | ||
| };/** | ||
| * A list of all transformable axes. We'll use this list to generated a version | ||
| * of each axes for each transform. | ||
| */ | ||
| const axes = ["", "X", "Y", "Z"]; | ||
| /** | ||
| * An ordered array of each transformable value. By default, transform values | ||
| * will be sorted to this order. | ||
| */ | ||
| const order = ["translate", "scale", "rotate", "skew"]; | ||
| const transformAlias = { | ||
| x: "translateX", | ||
| y: "translateY", | ||
| z: "translateZ" | ||
| }; | ||
| const rotation = { | ||
| syntax: "<angle>", | ||
| initialValue: "0deg", | ||
| toDefaultUnit: v => v + "deg" | ||
| }; | ||
| const baseTransformProperties = { | ||
| translate: { | ||
| syntax: "<length-percentage>", | ||
| initialValue: "0px", | ||
| toDefaultUnit: v => v + "px" | ||
| }, | ||
| rotate: rotation, | ||
| scale: { | ||
| syntax: "<number>", | ||
| initialValue: 1, | ||
| toDefaultUnit: noopReturn | ||
| }, | ||
| skew: rotation | ||
| }; | ||
| const transformDefinitions = new Map(); | ||
| const asTransformCssVar = name => `--motion-${name}`; | ||
| /** | ||
| * Generate a list of every possible transform key | ||
| */ | ||
| const transforms = ["x", "y", "z"]; | ||
| order.forEach(name => { | ||
| axes.forEach(axis => { | ||
| transforms.push(name + axis); | ||
| transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]); | ||
| }); | ||
| }); | ||
| /** | ||
| * A function to use with Array.sort to sort transform keys by their default order. | ||
| */ | ||
| const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b); | ||
| /** | ||
| * Provide a quick way to check if a string is the name of a transform | ||
| */ | ||
| const transformLookup = new Set(transforms); | ||
| const isTransform = name => transformLookup.has(name); | ||
| const addTransformToElement = (element, name) => { | ||
| // Map x to translateX etc | ||
| if (transformAlias[name]) name = transformAlias[name]; | ||
| const { | ||
| transforms | ||
| } = getAnimationData(element); | ||
| addUniqueItem(transforms, name); | ||
| /** | ||
| * TODO: An optimisation here could be to cache the transform in element data | ||
| * and only update if this has changed. | ||
| */ | ||
| element.style.transform = buildTransformTemplate(transforms); | ||
| }; | ||
| const buildTransformTemplate = transforms => transforms.sort(compareTransformOrder).reduce(transformListToString, "").trim(); | ||
| const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;const isCssVar = name => name.startsWith("--"); | ||
| const registeredProperties = new Set(); | ||
| function registerCssVariable(name) { | ||
| if (registeredProperties.has(name)) return; | ||
| registeredProperties.add(name); | ||
| try { | ||
| const { | ||
| syntax, | ||
| initialValue | ||
| } = transformDefinitions.has(name) ? transformDefinitions.get(name) : {}; | ||
| CSS.registerProperty({ | ||
| name, | ||
| inherits: false, | ||
| syntax, | ||
| initialValue | ||
| }); | ||
| } catch (e) {} | ||
| }/* | ||
| };/* | ||
| Bezier function generator | ||
@@ -484,2 +347,139 @@ | ||
| }/** | ||
| * The MotionValue tracks the state of a single animatable | ||
| * value. Currently, updatedAt and current are unused. The | ||
| * long term idea is to use this to minimise the number | ||
| * of DOM reads, and to abstract the DOM interactions here. | ||
| */ | ||
| class MotionValue { | ||
| setAnimation(animation) { | ||
| this.animation = animation; | ||
| animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => {}); | ||
| } | ||
| clearAnimation() { | ||
| this.animation = this.generator = undefined; | ||
| } | ||
| }const data = new WeakMap(); | ||
| function getAnimationData(element) { | ||
| if (!data.has(element)) { | ||
| data.set(element, { | ||
| transforms: [], | ||
| values: new Map() | ||
| }); | ||
| } | ||
| return data.get(element); | ||
| } | ||
| function getMotionValue(motionValues, name) { | ||
| if (!motionValues.has(name)) { | ||
| motionValues.set(name, new MotionValue()); | ||
| } | ||
| return motionValues.get(name); | ||
| }/** | ||
| * A list of all transformable axes. We'll use this list to generated a version | ||
| * of each axes for each transform. | ||
| */ | ||
| const axes = ["", "X", "Y", "Z"]; | ||
| /** | ||
| * An ordered array of each transformable value. By default, transform values | ||
| * will be sorted to this order. | ||
| */ | ||
| const order = ["translate", "scale", "rotate", "skew"]; | ||
| const transformAlias = { | ||
| x: "translateX", | ||
| y: "translateY", | ||
| z: "translateZ" | ||
| }; | ||
| const rotation = { | ||
| syntax: "<angle>", | ||
| initialValue: "0deg", | ||
| toDefaultUnit: v => v + "deg" | ||
| }; | ||
| const baseTransformProperties = { | ||
| translate: { | ||
| syntax: "<length-percentage>", | ||
| initialValue: "0px", | ||
| toDefaultUnit: v => v + "px" | ||
| }, | ||
| rotate: rotation, | ||
| scale: { | ||
| syntax: "<number>", | ||
| initialValue: 1, | ||
| toDefaultUnit: noopReturn | ||
| }, | ||
| skew: rotation | ||
| }; | ||
| const transformDefinitions = new Map(); | ||
| const asTransformCssVar = name => `--motion-${name}`; | ||
| /** | ||
| * Generate a list of every possible transform key | ||
| */ | ||
| const transforms = ["x", "y", "z"]; | ||
| order.forEach(name => { | ||
| axes.forEach(axis => { | ||
| transforms.push(name + axis); | ||
| transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]); | ||
| }); | ||
| }); | ||
| /** | ||
| * A function to use with Array.sort to sort transform keys by their default order. | ||
| */ | ||
| const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b); | ||
| /** | ||
| * Provide a quick way to check if a string is the name of a transform | ||
| */ | ||
| const transformLookup = new Set(transforms); | ||
| const isTransform = name => transformLookup.has(name); | ||
| const addTransformToElement = (element, name) => { | ||
| // Map x to translateX etc | ||
| if (transformAlias[name]) name = transformAlias[name]; | ||
| const { | ||
| transforms | ||
| } = getAnimationData(element); | ||
| addUniqueItem(transforms, name); | ||
| /** | ||
| * TODO: An optimisation here could be to cache the transform in element data | ||
| * and only update if this has changed. | ||
| */ | ||
| element.style.transform = buildTransformTemplate(transforms); | ||
| }; | ||
| const buildTransformTemplate = transforms => transforms.sort(compareTransformOrder).reduce(transformListToString, "").trim(); | ||
| const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;const isCssVar = name => name.startsWith("--"); | ||
| const registeredProperties = new Set(); | ||
| function registerCssVariable(name) { | ||
| if (registeredProperties.has(name)) return; | ||
| registeredProperties.add(name); | ||
| try { | ||
| const { | ||
| syntax, | ||
| initialValue | ||
| } = transformDefinitions.has(name) ? transformDefinitions.get(name) : {}; | ||
| CSS.registerProperty({ | ||
| name, | ||
| inherits: false, | ||
| syntax, | ||
| initialValue | ||
| }); | ||
| } catch (e) {} | ||
| }const testAnimation = (keyframes, options) => document.createElement("div").animate(keyframes, options); | ||
@@ -616,2 +616,3 @@ | ||
| let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; | ||
| let AnimationPolyfill = arguments.length > 4 ? arguments[4] : undefined; | ||
| const record = getDevToolsRecord(); | ||
@@ -779,3 +780,3 @@ const isRecording = options.record !== false && record; | ||
| */ | ||
| } else if (valueIsTransform) { | ||
| } else if (AnimationPolyfill && valueIsTransform) { | ||
| /** | ||
@@ -795,3 +796,3 @@ * If any keyframe is a string (because we measured it from the DOM), we need to convert | ||
| animation = new Animation(latest => { | ||
| animation = new AnimationPolyfill(latest => { | ||
| style.set(element, name, toUnit ? toUnit(latest) : latest); | ||
@@ -1188,3 +1189,3 @@ }, keyframes, Object.assign(Object.assign({}, options), { | ||
| (_a = baseTarget[key]) !== null && _a !== void 0 ? _a : baseTarget[key] = style.get(element, key); | ||
| animationFactories.push(animateStyle(element, key, target[key], animationOptions[key])); | ||
| animationFactories.push(animateStyle(element, key, target[key], animationOptions[key], Animation)); | ||
| } | ||
@@ -1191,0 +1192,0 @@ }); // Wait for all animation states to read from the DOM |
| { | ||
| "name": "@motionone/vue", | ||
| "version": "10.14.0", | ||
| "version": "10.14.1", | ||
| "description": "A tiny, performant animation library for Vue", | ||
@@ -21,3 +21,3 @@ "author": "Matt Perry", | ||
| "dependencies": { | ||
| "@motionone/dom": "^10.14.0", | ||
| "@motionone/dom": "^10.14.1", | ||
| "tslib": "^2.3.1" | ||
@@ -54,3 +54,3 @@ }, | ||
| ], | ||
| "gitHead": "4c59ce9e5539899722427bd00f857dc80f29fc09" | ||
| "gitHead": "24292336e5c7f797e9fbfa6e42160337968a9afe" | ||
| } |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.03%
818288
- Lines of code
- increased by0.08%
2611
Dependency changes
Updated@motionone/dom@^10.14.1