@formkit/auto-animate - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

index.d.ts

@@ -57,3 +57,3 @@ /**
      */
-    easing: "linear" | "ease-in" | "ease-out" | "ease-in-out" | string;
+    easing: "linear" | "ease-in" | "ease-out" | "ease-in-out" | ({} & string);
     /**
@@ -66,6 +66,12 @@ * Ignore a user’s "reduce motion" setting and enable animations. It is not
 /**
+ * A custom plugin config object
+ */
+export interface AutoAnimationPluginOptions {
+    styleReset: CSSStyleDeclaration | false;
+}
+/**
  * A custom plugin that determines what the effects to run
  */
 export interface AutoAnimationPlugin {
-    <T extends "add" | "remove" | "remain">(el: Element, action: T, newCoordinates?: T extends "add" | "remain" | "remove" ? Coordinates : undefined, oldCoordinates?: T extends "remain" ? Coordinates : undefined): KeyframeEffect;
+    <T extends "add" | "remove" | "remain">(el: Element, action: T, newCoordinates?: T extends "add" | "remain" | "remove" ? Coordinates : undefined, oldCoordinates?: T extends "remain" ? Coordinates : undefined): KeyframeEffect | [KeyframeEffect, AutoAnimationPluginOptions];
 }
@@ -87,3 +93,4 @@ /**
     }) => void;
+    getSSRProps: () => {};
 };
 export {};

index.min.js

@@ -1,1 +0,1 @@
-const e=new Set,t=new WeakMap,n=new WeakMap,o=new WeakMap,i=new WeakMap,r=new WeakMap,a=new WeakMap,s=new WeakMap,d=new WeakSet;let c;const l="__aa_tgt",f="__aa_del",u=e=>{const r=function(e){const t=e.reduce(((e,t)=>[...e,...Array.from(t.addedNodes),...Array.from(t.removedNodes)]),[]);return!t.every((e=>"#comment"===e.nodeName))&&e.reduce(((e,t)=>{if(!1===e)return!1;if(t.target instanceof Element){if(v(t.target),!e.has(t.target)){e.add(t.target);for(let n=0;n<t.target.children.length;n++){const o=t.target.children.item(n);if(o){if(f in o)return!1;v(t.target,o),e.add(o)}}}if(t.removedNodes.length)for(let o=0;o<t.removedNodes.length;o++){const i=t.removedNodes[o];if(f in i)return!1;i instanceof Element&&(e.add(i),v(t.target,i),n.set(i,[t.previousSibling,t.nextSibling]))}}return e}),new Set)}(e);r&&r.forEach((e=>function(e){var r;const a=e.isConnected,s=t.has(e);a&&n.has(e)&&n.delete(e);o.has(e)&&(null===(r=o.get(e))||void 0===r||r.cancel());s&&a?function(e){const n=t.get(e),i=x(e);if(!N(e))return t.set(e,i);let r;if(!n)return;const a=M(e);if("function"!=typeof a){const t=n.left-i.left,o=n.top-i.top,[s,d,c,l]=E(e,n,i),f={transform:`translate(${t}px, ${o}px)`},u={transform:"translate(0, 0)"};s!==d&&(f.width=`${s}px`,u.width=`${d}px`),c!==l&&(f.height=`${c}px`,u.height=`${l}px`),r=e.animate([f,u],{duration:a.duration,easing:a.easing})}else r=new Animation(a(e,"remain",n,i)),r.play();o.set(e,r),t.set(e,i),r.addEventListener("finish",h.bind(null,e))}(e):s&&!a?function(e){var r;if(!n.has(e)||!t.has(e))return;const[a,s]=n.get(e);Object.defineProperty(e,f,{value:!0}),s&&s.parentNode&&s.parentNode instanceof Element?s.parentNode.insertBefore(e,s):a&&a.parentNode?a.parentNode.appendChild(e):null===(r=W(e))||void 0===r||r.appendChild(e);function d(){var r;e.remove(),t.delete(e),n.delete(e),o.delete(e),null===(r=i.get(e))||void 0===r||r.disconnect()}if(!N(e))return d();const[c,l,u,p]=function(e){const n=t.get(e),[o,,i]=E(e,n,x(e));let r=e.parentElement;for(;r&&("static"===getComputedStyle(r).position||r instanceof HTMLBodyElement);)r=r.parentElement;r||(r=document.body);const a=getComputedStyle(r),s=t.get(r)||x(r),d=Math.round(n.top-s.top)-w(a.borderTopWidth),c=Math.round(n.left-s.left)-w(a.borderLeftWidth);return[d,c,o,i]}(e),h=M(e),g=t.get(e);let m;Object.assign(e.style,{position:"absolute",top:`${c}px`,left:`${l}px`,width:`${u}px`,height:`${p}px`,margin:0,pointerEvents:"none",transformOrigin:"center",zIndex:100}),"function"!=typeof h?m=e.animate([{transform:"scale(1)",opacity:1},{transform:"scale(.98)",opacity:0}],{duration:h.duration,easing:"ease-out"}):(m=new Animation(h(e,"remove",g)),m.play());o.set(e,m),m.addEventListener("finish",d)}(e):function(e){const n=x(e);t.set(e,n);const i=M(e);if(!N(e))return;let r;"function"!=typeof i?r=e.animate([{transform:"scale(.98)",opacity:0},{transform:"scale(0.98)",opacity:0,offset:.5},{transform:"scale(1)",opacity:1}],{duration:1.5*i.duration,easing:"ease-in"}):(r=new Animation(i(e,"add",n)),r.play());o.set(e,r),r.addEventListener("finish",h.bind(null,e))}(e)}(e)))},p=n=>{n.forEach((n=>{n.target===c&&(clearTimeout(s.get(c)),s.set(c,setTimeout((()=>{e.forEach((e=>T(e,(e=>m((()=>h(e)))))))}),100))),t.has(n.target)&&h(n.target)}))};function h(e){clearTimeout(s.get(e));const n=M(e),r="function"==typeof n?500:n.duration;s.set(e,setTimeout((async()=>{const n=o.get(e);try{await(null==n?void 0:n.finished),t.set(e,x(e)),function(e){const n=i.get(e);null==n||n.disconnect();let o=t.get(e),r=0;o||(o=x(e),t.set(e,o));const{offsetWidth:a,offsetHeight:s}=c,d=[o.top-5,a-(o.left+5+o.width),s-(o.top+5+o.height),o.left-5].map((e=>-1*Math.floor(e)+"px")).join(" "),l=new IntersectionObserver((()=>{++r>1&&h(e)}),{root:c,threshold:1,rootMargin:d});l.observe(e),i.set(e,l)}(e)}catch{}}),r))}function g(e){setTimeout((()=>{r.set(e,setInterval((()=>m(h.bind(null,e))),2e3))}),Math.round(2e3*Math.random()))}function m(e){"function"==typeof requestIdleCallback?requestIdleCallback((()=>e())):requestAnimationFrame((()=>e()))}let y,b;function v(e,t){t||l in e?t&&!(l in t)&&Object.defineProperty(t,l,{value:e}):Object.defineProperty(e,l,{value:e})}function w(e){return Number(e.replace(/[^0-9.\-]/g,""))}function x(e){const t=e.getBoundingClientRect(),{x:n,y:o}=function(e){let t=e.parentElement;for(;t;){if(t.scrollLeft||t.scrollTop)return{x:t.scrollLeft,y:t.scrollTop};t=t.parentElement}return{x:0,y:0}}(e);return{top:t.top+o,left:t.left+n,width:t.width,height:t.height}}function E(e,t,n){let o=t.width,i=t.height,r=n.width,a=n.height;const s=getComputedStyle(e);if("content-box"===s.getPropertyValue("box-sizing")){const e=w(s.paddingTop)+w(s.paddingBottom)+w(s.borderTopWidth)+w(s.borderBottomWidth),t=w(s.paddingLeft)+w(s.paddingRight)+w(s.borderRightWidth)+w(s.borderLeftWidth);o-=t,r-=t,i-=e,a-=e}return[o,r,i,a].map(Math.round)}function M(e){return l in e&&a.has(e[l])?a.get(e[l]):{duration:250,easing:"ease-in-out"}}function W(e){if(l in e)return e[l]}function N(e){const t=W(e);return!!t&&d.has(t)}function T(e,...t){t.forEach((t=>t(e,a.has(e))));for(let n=0;n<e.children.length;n++){const o=e.children.item(n);o&&t.forEach((e=>e(o,a.has(o))))}}function k(t,n={}){if(y&&b){window.matchMedia("(prefers-reduced-motion: reduce)").matches&&"function"!=typeof n&&!n.disrespectUserMotionPreference||(d.add(t),"static"===getComputedStyle(t).position&&Object.assign(t.style,{position:"relative"}),T(t,h,g,(e=>null==b?void 0:b.observe(e))),"function"==typeof n?a.set(t,n):a.set(t,{duration:250,easing:"ease-in-out",...n}),y.observe(t,{childList:!0}),e.add(t))}return Object.freeze({parent:t,enable:()=>{d.add(t)},disable:()=>{d.delete(t)},isEnabled:()=>d.has(t)})}"undefined"!=typeof window&&(c=document.documentElement,y=new MutationObserver(u),b=new ResizeObserver(p),b.observe(c));const C={mounted:(e,t)=>{k(e,t.value||{})}};export{k as default,E as getTransitionSizes,C as vAutoAnimate};
+const e=new Set,t=new WeakMap,n=new WeakMap,o=new WeakMap,i=new WeakMap,r=new WeakMap,a=new WeakMap,s=new WeakMap,l=new WeakSet;let d,c=0,u=0;const f="__aa_tgt",p="__aa_del",h="__aa_new",m=e=>{const i=function(e){const t=e.reduce(((e,t)=>[...e,...Array.from(t.addedNodes),...Array.from(t.removedNodes)]),[]);return!t.every((e=>"#comment"===e.nodeName))&&e.reduce(((e,t)=>{if(!1===e)return!1;if(t.target instanceof Element){if(x(t.target),!e.has(t.target)){e.add(t.target);for(let n=0;n<t.target.children.length;n++){const o=t.target.children.item(n);if(o){if(p in o)return!1;x(t.target,o),e.add(o)}}}if(t.removedNodes.length)for(let o=0;o<t.removedNodes.length;o++){const i=t.removedNodes[o];if(p in i)return!1;i instanceof Element&&(e.add(i),x(t.target,i),n.set(i,[t.previousSibling,t.nextSibling]))}}return e}),new Set)}(e);i&&i.forEach((e=>function(e){var i;const r=e.isConnected,a=t.has(e);r&&n.has(e)&&n.delete(e);o.has(e)&&(null===(i=o.get(e))||void 0===i||i.cancel());h in e?$(e):a&&r?function(e){const n=t.get(e),i=W(e);if(!O(e))return t.set(e,i);let r;if(!n)return;const a=L(e);if("function"!=typeof a){const t=n.left-i.left,o=n.top-i.top,[s,l,d,c]=T(e,n,i),u={transform:`translate(${t}px, ${o}px)`},f={transform:"translate(0, 0)"};s!==l&&(u.width=`${s}px`,f.width=`${l}px`),d!==c&&(u.height=`${d}px`,f.height=`${c}px`),r=e.animate([u,f],{duration:a.duration,easing:a.easing})}else{const[t]=C(a(e,"remain",n,i));r=new Animation(t),r.play()}o.set(e,r),t.set(e,i),r.addEventListener("finish",w.bind(null,e))}(e):a&&!r?function(e){var i;if(!n.has(e)||!t.has(e))return;const[r,a]=n.get(e);Object.defineProperty(e,p,{value:!0,configurable:!0});const s=window.scrollX,l=window.scrollY;a&&a.parentNode&&a.parentNode instanceof Element?a.parentNode.insertBefore(e,a):r&&r.parentNode?r.parentNode.appendChild(e):null===(i=N(e))||void 0===i||i.appendChild(e);if(!O(e))return j(e);const[f,h,m,g]=function(e){const n=t.get(e),[o,,i]=T(e,n,W(e));let r=e.parentElement;for(;r&&("static"===getComputedStyle(r).position||r instanceof HTMLBodyElement);)r=r.parentElement;r||(r=document.body);const a=getComputedStyle(r),s=t.get(r)||W(r),l=Math.round(n.top-s.top)-M(a.borderTopWidth),d=Math.round(n.left-s.left)-M(a.borderLeftWidth);return[l,d,o,i]}(e),w=L(e),y=t.get(e);s===c&&l===u||function(e,t,n,o){const i=c-t,r=u-n,a=document.documentElement.style.scrollBehavior;"smooth"===getComputedStyle(d).scrollBehavior&&(document.documentElement.style.scrollBehavior="auto");if(window.scrollTo(window.scrollX+i,window.scrollY+r),!e.parentElement)return;const s=e.parentElement;let l=s.clientHeight,f=s.clientWidth;const p=performance.now();function h(){requestAnimationFrame((()=>{if(!k(o)){const e=l-s.clientHeight,t=f-s.clientWidth;p+o.duration>performance.now()?(window.scrollTo({left:window.scrollX-t,top:window.scrollY-e}),l=s.clientHeight,f=s.clientWidth,h()):document.documentElement.style.scrollBehavior=a}}))}h()}(e,s,l,w);let v,b={position:"absolute",top:`${f}px`,left:`${h}px`,width:`${m}px`,height:`${g}px`,margin:"0",pointerEvents:"none",transformOrigin:"center",zIndex:"100"};if(k(w)){const[t,n]=C(w(e,"remove",y));!1!==(null==n?void 0:n.styleReset)&&(b=(null==n?void 0:n.styleReset)||b,Object.assign(e.style,b)),v=new Animation(t),v.play()}else Object.assign(e.style,b),v=e.animate([{transform:"scale(1)",opacity:1},{transform:"scale(.98)",opacity:0}],{duration:w.duration,easing:"ease-out"});o.set(e,v),v.addEventListener("finish",j.bind(null,e,b))}(e):$(e)}(e)))},g=n=>{n.forEach((n=>{n.target===d&&(clearTimeout(s.get(d)),s.set(d,setTimeout((()=>{e.forEach((e=>S(e,(e=>v((()=>w(e)))))))}),100))),t.has(n.target)&&w(n.target)}))};function w(e){clearTimeout(s.get(e));const n=L(e),r=k(n)?500:n.duration;s.set(e,setTimeout((async()=>{const n=o.get(e);try{await(null==n?void 0:n.finished),t.set(e,W(e)),function(e){const n=i.get(e);null==n||n.disconnect();let o=t.get(e),r=0;o||(o=W(e),t.set(e,o));const{offsetWidth:a,offsetHeight:s}=d,l=[o.top-5,a-(o.left+5+o.width),s-(o.top+5+o.height),o.left-5].map((e=>-1*Math.floor(e)+"px")).join(" "),c=new IntersectionObserver((()=>{++r>1&&w(e)}),{root:d,threshold:1,rootMargin:l});c.observe(e),i.set(e,c)}(e)}catch{}}),r))}function y(e){setTimeout((()=>{r.set(e,setInterval((()=>v(w.bind(null,e))),2e3))}),Math.round(2e3*Math.random()))}function v(e){"function"==typeof requestIdleCallback?requestIdleCallback((()=>e())):requestAnimationFrame((()=>e()))}let b,E;function x(e,t){t||f in e?t&&!(f in t)&&Object.defineProperty(t,f,{value:e}):Object.defineProperty(e,f,{value:e})}function M(e){return Number(e.replace(/[^0-9.\-]/g,""))}function W(e){const t=e.getBoundingClientRect(),{x:n,y:o}=function(e){let t=e.parentElement;for(;t;){if(t.scrollLeft||t.scrollTop)return{x:t.scrollLeft,y:t.scrollTop};t=t.parentElement}return{x:0,y:0}}(e);return{top:t.top+o,left:t.left+n,width:t.width,height:t.height}}function T(e,t,n){let o=t.width,i=t.height,r=n.width,a=n.height;const s=getComputedStyle(e);if("content-box"===s.getPropertyValue("box-sizing")){const e=M(s.paddingTop)+M(s.paddingBottom)+M(s.borderTopWidth)+M(s.borderBottomWidth),t=M(s.paddingLeft)+M(s.paddingRight)+M(s.borderRightWidth)+M(s.borderLeftWidth);o-=t,r-=t,i-=e,a-=e}return[o,r,i,a].map(Math.round)}function L(e){return f in e&&a.has(e[f])?a.get(e[f]):{duration:250,easing:"ease-in-out"}}function N(e){if(f in e)return e[f]}function O(e){const t=N(e);return!!t&&l.has(t)}function S(e,...t){t.forEach((t=>t(e,a.has(e))));for(let n=0;n<e.children.length;n++){const o=e.children.item(n);o&&t.forEach((e=>e(o,a.has(o))))}}function C(e){return Array.isArray(e)?e:[e]}function k(e){return"function"==typeof e}function $(e){h in e&&delete e[h];const n=W(e);t.set(e,n);const i=L(e);if(!O(e))return;let r;if("function"!=typeof i)r=e.animate([{transform:"scale(.98)",opacity:0},{transform:"scale(0.98)",opacity:0,offset:.5},{transform:"scale(1)",opacity:1}],{duration:1.5*i.duration,easing:"ease-in"});else{const[t]=C(i(e,"add",n));r=new Animation(t),r.play()}o.set(e,r),r.addEventListener("finish",w.bind(null,e))}function j(e,r){var a;e.remove(),t.delete(e),n.delete(e),o.delete(e),null===(a=i.get(e))||void 0===a||a.disconnect(),setTimeout((()=>{if(p in e&&delete e[p],Object.defineProperty(e,h,{value:!0,configurable:!0}),r&&e instanceof HTMLElement)for(const t in r)e.style[t]=""}),0)}function A(t,n={}){if(b&&E){window.matchMedia("(prefers-reduced-motion: reduce)").matches&&!k(n)&&!n.disrespectUserMotionPreference||(l.add(t),"static"===getComputedStyle(t).position&&Object.assign(t.style,{position:"relative"}),S(t,w,y,(e=>null==E?void 0:E.observe(e))),k(n)?a.set(t,n):a.set(t,{duration:250,easing:"ease-in-out",...n}),b.observe(t,{childList:!0}),e.add(t))}return Object.freeze({parent:t,enable:()=>{l.add(t)},disable:()=>{l.delete(t)},isEnabled:()=>l.has(t)})}"undefined"!=typeof window&&(d=document.documentElement,b=new MutationObserver(m),E=new ResizeObserver(g),window.addEventListener("scroll",(()=>{u=window.scrollY,c=window.scrollX})),E.observe(d));const B={mounted:(e,t)=>{A(e,t.value||{})},getSSRProps:()=>({})};export{A as default,T as getTransitionSizes,B as vAutoAnimate};

package.json

 {
   "name": "@formkit/auto-animate",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Add motion to your apps with a single line of code.",
@@ -24,32 +24,34 @@ "keywords": [
     "./vue": {
+      "types": "./vue/index.d.ts",
       "import": "./vue/index.mjs",
-      "types": "./vue/index.d.ts",
       "default": "./vue/index.mjs"
     },
     "./preact": {
+      "types": "./preact/index.d.ts",
       "import": "./preact/index.mjs",
-      "types": "./preact/index.d.ts",
       "default": "./preact/index.mjs"
     },
     "./react": {
+      "types": "./react/index.d.ts",
       "import": "./react/index.mjs",
-      "types": "./react/index.d.ts",
       "default": "./react/index.mjs"
     },
     "./solid": {
+      "types": "./solid/index.d.ts",
       "import": "./solid/index.mjs",
-      "types": "./solid/index.d.ts",
       "default": "./solid/index.mjs"
     },
     "./angular": {
+      "types": "./angular/index.d.ts",
       "import": "./angular/index.mjs",
-      "types": "./angular/index.d.ts",
       "default": "./angular/index.mjs"
     },
-    "./qwik": {
-      "import": "./qwik/index.mjs",
-      "types": "./qwik/index.d.ts",
-      "default": "./qwik/index.mjs"
+    "./nuxt": {
+      "types": "./nuxt/module.d.ts",
+      "import": "./nuxt/module.mjs",
+      "require": "./nuxt/module.cjs",
+      "default": "./nuxt/module.mjs"
     },
     ".": {
+      "types": "./index.d.ts",
       "import": "./index.mjs",
@@ -56,0 +58,0 @@ "default": "./index.mjs"

vue/index.d.ts

 import { Plugin, Ref } from "vue";
+import type { Directive } from "vue";
 import { AutoAnimateOptions, AutoAnimationPlugin } from "../index";
+export declare const vAutoAnimate: Directive<HTMLElement, Partial<AutoAnimateOptions>>;
 export declare const autoAnimatePlugin: Plugin;
@@ -4,0 +6,0 @@ /**

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47462

15.24%

Number of package files

25

38.89%

Lines of code

1080

15.14%

Number of low supply chain risk alerts

1

-50%

No dependency changes