solid-flip - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

dist/index.d.ts

@@ -7,2 +7,4 @@ import { Accessor } from 'solid-js';
 
+declare type ArrayOr_2<T> = T[] | T;
+
 declare type CSSStyleKeys = ValueOf<{
@@ -93,2 +95,4 @@ [Key in keyof CSSStyleDeclaration]: Key extends string ? CSSStyleDeclaration[Key] extends string ? Key : never : never;
 
+declare type Resolved<T extends ArrayOr_2<unknown>> = T extends readonly [infer K, ...infer U] ? [K, ...Resolved<U>] : T extends [] ? [] : [T];
+
 export declare const Unflip: (props: UnflipProps) => JSX.Element;
@@ -103,2 +107,9 @@
 
+export declare const When: <const When extends ArrayOr_2<unknown>>(props: WhenProps<When>) => JSX.Element;
+
+export declare interface WhenProps<When extends ArrayOr_2<unknown>> {
+    when: When;
+    children: (...params: Resolved<When>) => JSX.Element;
+}
+
 export { }

dist/index.es.js

 import { createComponent, isDev } from "solid-js/web";
-import { $PROXY, createSignal, createContext, useContext, createMemo, splitProps, mergeProps, onMount, createComputed, on, createRenderEffect, createEffect, onCleanup, getOwner, runWithOwner } from "solid-js";
+import { $PROXY, createSignal, createContext, useContext, createMemo, splitProps, mergeProps, onMount, createComputed, on, createRenderEffect, createEffect, onCleanup, getOwner, runWithOwner, For } from "solid-js";
 const dimensionToNumber = (value, parent) => {
@@ -297,4 +297,4 @@ let result = 0;
   const triggerWith = createMemo(() => {
-    const value = triggerProps.with;
-    return Array.isArray(value) ? value : [value];
+    const withList = triggerProps.with;
+    return Array.isArray(withList) ? withList : [withList];
   });
@@ -549,3 +549,2 @@ const properties = createMemo(() => {
           lastState.rect = DOMRect.fromRect(rect);
-          console.log("exit", newState, "->", lastState, "/", options);
           (_a = animate(newState, lastState, options)) == null ? void 0 : _a.addEventListener("finish", () => {
@@ -609,2 +608,14 @@ childElement2.remove();
 };
+const When = (props) => {
+  const trigger = () => {
+    const whenProperty = props.when;
+    return Array.isArray(whenProperty) ? whenProperty : [whenProperty];
+  };
+  return createComponent(For, {
+    get each() {
+      return [trigger()];
+    },
+    children: (params) => props.children(...params)
+  });
+};
 export {
@@ -616,3 +627,4 @@ Flip,
   NestedFlipProvider,
-  Unflip
+  Unflip,
+  When
 };

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("solid-js/web"),require("solid-js")):"function"==typeof define&&define.amd?define(["exports","solid-js/web","solid-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["solid-flip"]={},e.solid,e.solid)}(this,(function(e,t,r){"use strict";const i=(e,t)=>{let r=0;return e.endsWith("px")&&(r=parseFloat(e.replace("px",""))),e.endsWith("%")&&(r=t*(parseFloat(e.replace("%",""))/100)),Number.isFinite(r)||(r=0),r},n=(e,t)=>{if(!e.includes(" ")){const r=i(e,t);return[r,r]}const[r,n]=e.split(" ");return[i(r,t),i(n,t)]},o=(e,t=[])=>{const r=getComputedStyle(e),i=e.getBoundingClientRect(),o=Math.max(i.width,i.height),s=t.reduce(((e,t)=>({...e,[t]:null==r?void 0:r[t]})),{}),a=r.scale.split(" ").map((e=>{const t=Number(e);return Number.isFinite(t)?t:1})),[l,c]=1===a.length?[a[0],a[0]]:a,[d,u]=n(r.borderTopLeftRadius,o),[p,h]=n(r.borderTopRightRadius,o),[f,g]=n(r.borderBottomLeftRadius,o),[b,m]=n(r.borderBottomRightRadius,o);return{rect:i,color:r.backgroundColor,opacity:r.opacity,position:r.position,borderTopLeftXRadius:d*l,borderTopLeftYRadius:u*c,borderTopRightXRadius:p*l,borderTopRightYRadius:h*c,borderBottomLeftXRadius:f*l,borderBottomLeftYRadius:g*c,borderBottomRightXRadius:b*l,borderBottomRightYRadius:m*c,additionalProperties:s}},s=Symbol("store-raw"),a=Symbol("store-node"),l=Symbol("store-has"),c=Symbol("store-self");function d(e){let t;return null!=e&&"object"==typeof e&&(e[r.$PROXY]||!(t=Object.getPrototypeOf(e))||t===Object.prototype||Array.isArray(e))}function u(e,t=new Set){let r,i,n,o;if(r=null!=e&&e[s])return r;if(!d(e)||t.has(e))return e;if(Array.isArray(e)){Object.isFrozen(e)?e=e.slice(0):t.add(e);for(let r=0,o=e.length;r<o;r++)n=e[r],(i=u(n,t))!==n&&(e[r]=i)}else{Object.isFrozen(e)?e=Object.assign({},e):t.add(e);const r=Object.keys(e),s=Object.getOwnPropertyDescriptors(e);for(let a=0,l=r.length;a<l;a++)o=r[a],s[o].get||(n=e[o],(i=u(n,t))!==n&&(e[o]=i))}return e}function p(e,t,i){if(e[t])return e[t];const[n,o]=r.createSignal(i,{equals:!1,internal:!0});return n.$=o,e[t]=n}function h(e,t,r,i=!1){if(!i&&e[t]===r)return;const n=e[t],o=e.length;void 0===r?(delete e[t],e[l]&&e[l][t]&&void 0!==n&&e[l][t].$()):(e[t]=r,e[l]&&e[l][t]&&void 0===n&&e[l][t].$());let s,d=function(e,t){let r=e[t];return r||Object.defineProperty(e,t,{value:r=Object.create(null)}),r}(e,a);if((s=p(d,t,n))&&s.$((()=>r)),Array.isArray(e)&&e.length!==o){for(let t=e.length;t<o;t++)(s=d[t])&&s.$();(s=p(d,"length",o))&&s.$(e.length)}(s=d[c])&&s.$()}const f=new WeakMap,g={get(e,t){if(t===s)return e;const r=e[t];let i;return d(r)?f.get(r)||(f.set(r,i=new Proxy(r,g)),i):r},set:(e,t,r)=>(h(e,t,u(r)),!0),deleteProperty:(e,t)=>(h(e,t,void 0,!0),!0)};function b(e){return t=>{if(d(t)){let r;(r=f.get(t))||f.set(t,r=new Proxy(t,g)),e(r)}return t}}const m={duration:300,easing:"ease",preserve:!1,debug:!1},y=r.createContext(),{Provider:v}=y,w=r.createContext(),x=e=>{const i=r.useContext(y);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:n,getLastState:o}=i,s=r.useContext(w),a=r.createMemo((()=>{const t=n(e.id);if(!t)return null;const r=null==s?void 0:s.firstParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}})),l=r.createMemo((()=>{const t=o(e.id);if(!t)return null;const r=null==s?void 0:s.lastParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}}));return t.createComponent(w.Provider,{get value(){return{parentId:()=>e.id,firstParentState:a,lastParentState:l,unflips:()=>e.unflips,setUnflips:e.setUnflips}},get children(){return e.children}})};e.Flip=e=>{const i=r.useContext(y),n=r.useContext(w);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{attachedFlipIds:s,getFirstState:a,setFirstState:l,setLastState:c,recordFirstState:d,detach:u,attach:p,defaultConfig:h}=i,[f,g,b,m]=r.splitProps(r.mergeProps({duration:h.duration,easing:h.easing,preserve:h.preserve,with:[],debug:h.debug},e),["duration","easing","properties"],["enter","exit","preserve"],["with"]),[v,R]=r.createSignal([]),S=r.createMemo((()=>{const e=b.with;return Array.isArray(e)?e:[e]})),F=r.createMemo((()=>{const e=f.properties;return e?Array.isArray(e)?e:[e]:[]})),$=r.createMemo((()=>{const e=g.enter;return"string"==typeof e?e:!0===e?"enter":null})),P=r.createMemo((()=>{const e=g.exit;return"string"==typeof e?e:!0===e?"exit":null}));let O=null,C=null;const L=()=>{let e=O;return e instanceof Function&&(e=e()),Array.isArray(e)?(console.warn('Flip children must be a "single" DOM node',e),null):e instanceof HTMLElement||e instanceof SVGElement?e:(console.warn("Flip children looks like not a DOM node",e),null)},A=(e,r,{biasX:i=0,biasY:s=0,biasWidth:a=1,biasHeight:l=1}={})=>{const c=null==n?void 0:n.firstParentState(),d=null==n?void 0:n.lastParentState();let u=0,p=0,h=1,g=1;if(d&&c){const e=(c.rect.width-d.rect.width)/2,t=(c.rect.height-d.rect.height)/2;u=c.rect.left-d.rect.left+e,p=c.rect.top-d.rect.top+t,h=c.rect.width/d.rect.width,g=c.rect.height/d.rect.height}const b=(e.rect.width-r.rect.width)/2,y=(e.rect.height-r.rect.height)/2,w=-1*u+e.rect.left-r.rect.left+b,x=-1*p+e.rect.top-r.rect.top+y,R=e.rect.width/r.rect.width/h,S=e.rect.height/r.rect.height/g,$=0===R?1:R,P=0===S?1:S,O=v().map((e=>o(e,F()))),A={translate:`${w}px ${x}px`,scale:`${R} ${S}`,backgroundColor:e.color,opacity:e.opacity,borderTopLeftRadius:`${e.borderTopLeftXRadius/$}px ${e.borderTopLeftYRadius/P}px`,borderTopRightRadius:`${e.borderTopRightXRadius/$}px ${e.borderTopRightYRadius/P}px`,borderBottomLeftRadius:`${e.borderBottomLeftXRadius/$}px ${e.borderBottomLeftYRadius/P}px`,borderBottomRightRadius:`${e.borderBottomRightXRadius/$}px ${e.borderBottomRightYRadius/P}px`},E={};if((i||s)&&(E.translate=`${i??0}px ${s??0}px`),1===a&&1===l||(E.scale=`${a} ${l}`),f.properties){(Array.isArray(f.properties)?f.properties:[f.properties]).forEach((t=>{var r;const i=null==(r=e.additionalProperties)?void 0:r[t];i?A[t]=i:console.warn(`Property "${t}" is not found in the first state`)}))}const M=L();if(!M)return null;C=M.animate([{transformOrigin:"50% 50%",...A},E],{duration:f.duration,easing:f.easing,fill:"both"})??null,C.addEventListener("finish",(()=>C=null),{once:!0});const j=v().map(((e,t)=>{const i=O[t],n=i.rect.left-r.rect.left,o=i.rect.top-r.rect.top;return()=>{const t=e,[r,s]=getComputedStyle(M).scale.split(" ").map(Number);if(!Number.isFinite(r)||!Number.isFinite(s))return t.style.removeProperty("scale"),t.style.removeProperty("translate"),!0;const a=1/r,l=1/s,c=i.rect.width*(a-1)/2+n*(a-1),d=i.rect.height*(l-1)/2+o*(l-1);return t.style.setProperty("translate",`${c}px ${d}px`),t.style.setProperty("scale",`${a} ${l}`),!1}})),T=()=>{j.map((e=>e())).every(Boolean)||requestAnimationFrame(T)};if(T(),t.isDev&&m.debug){const e=()=>{if(!C)return void Object.keys(A).forEach((e=>{delete M.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]}));const t=getComputedStyle(M);Object.keys(A).forEach((e=>{M.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]=t[e]})),requestAnimationFrame(e)};e()}return C},E=()=>{const e=L();if(!e)return;const t=$();let r=a(m.id);if(!r&&t&&(e.classList.add(t),r=o(e,F()),e.classList.remove(t),l(m.id,r)),r){null==C||C.cancel(),C=null;const t=o(e,F());c(m.id,t),requestAnimationFrame((()=>{A(r,t)}))}else d(m.id,e,F())};return r.onMount((()=>{const e=L();e&&e.parentElement&&E()})),r.createComputed(r.on(S,(()=>{const e=L();e&&d(m.id,e,F())}),{defer:!0})),r.createRenderEffect(r.on((()=>m.id),(()=>{p(m.id)}))),r.createEffect(r.on(S,(()=>{E()}),{defer:!0})),t.isDev&&r.createEffect(r.on((()=>m.debug),(e=>{const t=L();t&&(e?t.dataset.flipId=m.id:delete t.dataset.flipId)}))),r.onCleanup((()=>{const e=L();if(!e)return;u(m.id);const t=o(e,F());l(m.id,t);const i=r.getOwner(),n=P(),a=m.id,c=e.previousElementSibling,d=e.nextElementSibling,p=e.parentElement;queueMicrotask((()=>{r.runWithOwner(i,(()=>{var e;if(n&&p){const r=L();if(!r)return;null==C||C.cancel(),C=null,r.classList.add(n),d?d.insertAdjacentElement("beforebegin",r):c?c.insertAdjacentElement("afterend",r):p.append(r);const i=o(r,F()),s={x:i.rect.x,y:i.rect.y,width:i.rect.width,height:i.rect.height},a="absolute"===t.position||"fixed"===t.position,l="absolute"===i.position||"fixed"===i.position,u={biasX:0,biasY:0,biasWidth:1,biasHeight:1},h="position"===g.preserve||"all"===g.preserve,f="scale"===g.preserve||"all"===g.preserve;a&&!l&&(h&&(u.biasX=i.rect.x-t.rect.x),h&&(u.biasY=i.rect.y-t.rect.y),f&&(u.biasWidth=i.rect.width/t.rect.width),f&&(u.biasHeight=i.rect.height/t.rect.height)),!a&&l&&(h&&(u.biasX=t.rect.x-i.rect.x+(t.rect.width-i.rect.width)/2),h&&(u.biasY=t.rect.y-i.rect.y+(t.rect.height-i.rect.height)/2),f&&(u.biasWidth=t.rect.width/i.rect.width),f&&(u.biasHeight=t.rect.height/i.rect.height)),i.rect=DOMRect.fromRect(s),console.log("exit",t,"->",i,"/",u),null==(e=A(t,i,u))||e.addEventListener("finish",(()=>{r.remove()}))}}))})),setTimeout((()=>{r.runWithOwner(i,(()=>{s().has(a)||l(a,null)}))}),16)})),t.createComponent(x,{get id(){return m.id},get unflips(){return v()},setUnflips:R,get children(){return O=e.children}})},e.FlipContext=y,e.FlipProvider=e=>{const[i,n]=r.createSignal(new Set),[s,a]=r.createSignal({}),[l,c]=r.createSignal({});return t.createComponent(v,{get value(){return{attachedFlipIds:i,firstState:s,lastState:l,getFirstState:e=>s()[e],getLastState:e=>l()[e],setFirstState:(e,t)=>{a((r=>({...r,[e]:t})))},recordFirstState:(e,t,r=[])=>{const i=o(t,r);0===i.rect.width&&0===i.rect.height||a((t=>({...t,[e]:i})))},setLastState:(e,t)=>{c((r=>({...r,[e]:t})))},recordLastState:(e,t,r=[])=>{const i=o(t,r);0===i.rect.width&&0===i.rect.height||c((t=>({...t,[e]:i})))},attach:e=>{n(b((t=>{t.add(e)})))},detach:e=>{n(b((t=>{t.delete(e)})))},defaultConfig:{...m,...e.defaultConfig}}},get children(){return e.children}})},e.NestedFlipContext=w,e.NestedFlipProvider=x,e.Unflip=e=>{const t=r.useContext(w);let i=null;return r.createEffect(r.on((()=>e.id),(()=>{if(!t)return;const r=(()=>{let e=i;return e instanceof Function&&(e=e()),Array.isArray(e)?e.every((e=>e instanceof HTMLElement||e instanceof SVGElement))?e:(console.warn("Unflip children must be DOM nodes",e),[]):e instanceof HTMLElement||e instanceof SVGElement?[e]:(console.warn("Unflip children looks like not a DOM node",e),[])})();if(0===r.length)return;const n=t.parentId();(e.id??n)===n&&(null==t||t.setUnflips([...t.unflips(),...r]))}))),i=e.children},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("solid-js/web"),require("solid-js")):"function"==typeof define&&define.amd?define(["exports","solid-js/web","solid-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["solid-flip"]={},e.solid,e.solid)}(this,(function(e,t,r){"use strict";const i=(e,t)=>{let r=0;return e.endsWith("px")&&(r=parseFloat(e.replace("px",""))),e.endsWith("%")&&(r=t*(parseFloat(e.replace("%",""))/100)),Number.isFinite(r)||(r=0),r},n=(e,t)=>{if(!e.includes(" ")){const r=i(e,t);return[r,r]}const[r,n]=e.split(" ");return[i(r,t),i(n,t)]},o=(e,t=[])=>{const r=getComputedStyle(e),i=e.getBoundingClientRect(),o=Math.max(i.width,i.height),s=t.reduce(((e,t)=>({...e,[t]:null==r?void 0:r[t]})),{}),a=r.scale.split(" ").map((e=>{const t=Number(e);return Number.isFinite(t)?t:1})),[l,c]=1===a.length?[a[0],a[0]]:a,[d,u]=n(r.borderTopLeftRadius,o),[p,h]=n(r.borderTopRightRadius,o),[f,g]=n(r.borderBottomLeftRadius,o),[b,m]=n(r.borderBottomRightRadius,o);return{rect:i,color:r.backgroundColor,opacity:r.opacity,position:r.position,borderTopLeftXRadius:d*l,borderTopLeftYRadius:u*c,borderTopRightXRadius:p*l,borderTopRightYRadius:h*c,borderBottomLeftXRadius:f*l,borderBottomLeftYRadius:g*c,borderBottomRightXRadius:b*l,borderBottomRightYRadius:m*c,additionalProperties:s}},s=Symbol("store-raw"),a=Symbol("store-node"),l=Symbol("store-has"),c=Symbol("store-self");function d(e){let t;return null!=e&&"object"==typeof e&&(e[r.$PROXY]||!(t=Object.getPrototypeOf(e))||t===Object.prototype||Array.isArray(e))}function u(e,t=new Set){let r,i,n,o;if(r=null!=e&&e[s])return r;if(!d(e)||t.has(e))return e;if(Array.isArray(e)){Object.isFrozen(e)?e=e.slice(0):t.add(e);for(let r=0,o=e.length;r<o;r++)n=e[r],(i=u(n,t))!==n&&(e[r]=i)}else{Object.isFrozen(e)?e=Object.assign({},e):t.add(e);const r=Object.keys(e),s=Object.getOwnPropertyDescriptors(e);for(let a=0,l=r.length;a<l;a++)o=r[a],s[o].get||(n=e[o],(i=u(n,t))!==n&&(e[o]=i))}return e}function p(e,t,i){if(e[t])return e[t];const[n,o]=r.createSignal(i,{equals:!1,internal:!0});return n.$=o,e[t]=n}function h(e,t,r,i=!1){if(!i&&e[t]===r)return;const n=e[t],o=e.length;void 0===r?(delete e[t],e[l]&&e[l][t]&&void 0!==n&&e[l][t].$()):(e[t]=r,e[l]&&e[l][t]&&void 0===n&&e[l][t].$());let s,d=function(e,t){let r=e[t];return r||Object.defineProperty(e,t,{value:r=Object.create(null)}),r}(e,a);if((s=p(d,t,n))&&s.$((()=>r)),Array.isArray(e)&&e.length!==o){for(let t=e.length;t<o;t++)(s=d[t])&&s.$();(s=p(d,"length",o))&&s.$(e.length)}(s=d[c])&&s.$()}const f=new WeakMap,g={get(e,t){if(t===s)return e;const r=e[t];let i;return d(r)?f.get(r)||(f.set(r,i=new Proxy(r,g)),i):r},set:(e,t,r)=>(h(e,t,u(r)),!0),deleteProperty:(e,t)=>(h(e,t,void 0,!0),!0)};function b(e){return t=>{if(d(t)){let r;(r=f.get(t))||f.set(t,r=new Proxy(t,g)),e(r)}return t}}const m={duration:300,easing:"ease",preserve:!1,debug:!1},y=r.createContext(),{Provider:w}=y,v=r.createContext(),x=e=>{const i=r.useContext(y);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:n,getLastState:o}=i,s=r.useContext(v),a=r.createMemo((()=>{const t=n(e.id);if(!t)return null;const r=null==s?void 0:s.firstParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}})),l=r.createMemo((()=>{const t=o(e.id);if(!t)return null;const r=null==s?void 0:s.lastParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}}));return t.createComponent(v.Provider,{get value(){return{parentId:()=>e.id,firstParentState:a,lastParentState:l,unflips:()=>e.unflips,setUnflips:e.setUnflips}},get children(){return e.children}})};e.Flip=e=>{const i=r.useContext(y),n=r.useContext(v);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{attachedFlipIds:s,getFirstState:a,setFirstState:l,setLastState:c,recordFirstState:d,detach:u,attach:p,defaultConfig:h}=i,[f,g,b,m]=r.splitProps(r.mergeProps({duration:h.duration,easing:h.easing,preserve:h.preserve,with:[],debug:h.debug},e),["duration","easing","properties"],["enter","exit","preserve"],["with"]),[w,R]=r.createSignal([]),S=r.createMemo((()=>{const e=b.with;return Array.isArray(e)?e:[e]})),F=r.createMemo((()=>{const e=f.properties;return e?Array.isArray(e)?e:[e]:[]})),$=r.createMemo((()=>{const e=g.enter;return"string"==typeof e?e:!0===e?"enter":null})),P=r.createMemo((()=>{const e=g.exit;return"string"==typeof e?e:!0===e?"exit":null}));let C=null,O=null;const L=()=>{let e=C;return e instanceof Function&&(e=e()),Array.isArray(e)?(console.warn('Flip children must be a "single" DOM node',e),null):e instanceof HTMLElement||e instanceof SVGElement?e:(console.warn("Flip children looks like not a DOM node",e),null)},A=(e,r,{biasX:i=0,biasY:s=0,biasWidth:a=1,biasHeight:l=1}={})=>{const c=null==n?void 0:n.firstParentState(),d=null==n?void 0:n.lastParentState();let u=0,p=0,h=1,g=1;if(d&&c){const e=(c.rect.width-d.rect.width)/2,t=(c.rect.height-d.rect.height)/2;u=c.rect.left-d.rect.left+e,p=c.rect.top-d.rect.top+t,h=c.rect.width/d.rect.width,g=c.rect.height/d.rect.height}const b=(e.rect.width-r.rect.width)/2,y=(e.rect.height-r.rect.height)/2,v=-1*u+e.rect.left-r.rect.left+b,x=-1*p+e.rect.top-r.rect.top+y,R=e.rect.width/r.rect.width/h,S=e.rect.height/r.rect.height/g,$=0===R?1:R,P=0===S?1:S,C=w().map((e=>o(e,F()))),A={translate:`${v}px ${x}px`,scale:`${R} ${S}`,backgroundColor:e.color,opacity:e.opacity,borderTopLeftRadius:`${e.borderTopLeftXRadius/$}px ${e.borderTopLeftYRadius/P}px`,borderTopRightRadius:`${e.borderTopRightXRadius/$}px ${e.borderTopRightYRadius/P}px`,borderBottomLeftRadius:`${e.borderBottomLeftXRadius/$}px ${e.borderBottomLeftYRadius/P}px`,borderBottomRightRadius:`${e.borderBottomRightXRadius/$}px ${e.borderBottomRightYRadius/P}px`},E={};if((i||s)&&(E.translate=`${i??0}px ${s??0}px`),1===a&&1===l||(E.scale=`${a} ${l}`),f.properties){(Array.isArray(f.properties)?f.properties:[f.properties]).forEach((t=>{var r;const i=null==(r=e.additionalProperties)?void 0:r[t];i?A[t]=i:console.warn(`Property "${t}" is not found in the first state`)}))}const M=L();if(!M)return null;O=M.animate([{transformOrigin:"50% 50%",...A},E],{duration:f.duration,easing:f.easing,fill:"both"})??null,O.addEventListener("finish",(()=>O=null),{once:!0});const j=w().map(((e,t)=>{const i=C[t],n=i.rect.left-r.rect.left,o=i.rect.top-r.rect.top;return()=>{const t=e,[r,s]=getComputedStyle(M).scale.split(" ").map(Number);if(!Number.isFinite(r)||!Number.isFinite(s))return t.style.removeProperty("scale"),t.style.removeProperty("translate"),!0;const a=1/r,l=1/s,c=i.rect.width*(a-1)/2+n*(a-1),d=i.rect.height*(l-1)/2+o*(l-1);return t.style.setProperty("translate",`${c}px ${d}px`),t.style.setProperty("scale",`${a} ${l}`),!1}})),T=()=>{j.map((e=>e())).every(Boolean)||requestAnimationFrame(T)};if(T(),t.isDev&&m.debug){const e=()=>{if(!O)return void Object.keys(A).forEach((e=>{delete M.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]}));const t=getComputedStyle(M);Object.keys(A).forEach((e=>{M.dataset[`flip${e[0].toUpperCase()}${e.slice(1)}`]=t[e]})),requestAnimationFrame(e)};e()}return O},E=()=>{const e=L();if(!e)return;const t=$();let r=a(m.id);if(!r&&t&&(e.classList.add(t),r=o(e,F()),e.classList.remove(t),l(m.id,r)),r){null==O||O.cancel(),O=null;const t=o(e,F());c(m.id,t),requestAnimationFrame((()=>{A(r,t)}))}else d(m.id,e,F())};return r.onMount((()=>{const e=L();e&&e.parentElement&&E()})),r.createComputed(r.on(S,(()=>{const e=L();e&&d(m.id,e,F())}),{defer:!0})),r.createRenderEffect(r.on((()=>m.id),(()=>{p(m.id)}))),r.createEffect(r.on(S,(()=>{E()}),{defer:!0})),t.isDev&&r.createEffect(r.on((()=>m.debug),(e=>{const t=L();t&&(e?t.dataset.flipId=m.id:delete t.dataset.flipId)}))),r.onCleanup((()=>{const e=L();if(!e)return;u(m.id);const t=o(e,F());l(m.id,t);const i=r.getOwner(),n=P(),a=m.id,c=e.previousElementSibling,d=e.nextElementSibling,p=e.parentElement;queueMicrotask((()=>{r.runWithOwner(i,(()=>{var e;if(n&&p){const r=L();if(!r)return;null==O||O.cancel(),O=null,r.classList.add(n),d?d.insertAdjacentElement("beforebegin",r):c?c.insertAdjacentElement("afterend",r):p.append(r);const i=o(r,F()),s={x:i.rect.x,y:i.rect.y,width:i.rect.width,height:i.rect.height},a="absolute"===t.position||"fixed"===t.position,l="absolute"===i.position||"fixed"===i.position,u={biasX:0,biasY:0,biasWidth:1,biasHeight:1},h="position"===g.preserve||"all"===g.preserve,f="scale"===g.preserve||"all"===g.preserve;a&&!l&&(h&&(u.biasX=i.rect.x-t.rect.x),h&&(u.biasY=i.rect.y-t.rect.y),f&&(u.biasWidth=i.rect.width/t.rect.width),f&&(u.biasHeight=i.rect.height/t.rect.height)),!a&&l&&(h&&(u.biasX=t.rect.x-i.rect.x+(t.rect.width-i.rect.width)/2),h&&(u.biasY=t.rect.y-i.rect.y+(t.rect.height-i.rect.height)/2),f&&(u.biasWidth=t.rect.width/i.rect.width),f&&(u.biasHeight=t.rect.height/i.rect.height)),i.rect=DOMRect.fromRect(s),null==(e=A(t,i,u))||e.addEventListener("finish",(()=>{r.remove()}))}}))})),setTimeout((()=>{r.runWithOwner(i,(()=>{s().has(a)||l(a,null)}))}),16)})),t.createComponent(x,{get id(){return m.id},get unflips(){return w()},setUnflips:R,get children(){return C=e.children}})},e.FlipContext=y,e.FlipProvider=e=>{const[i,n]=r.createSignal(new Set),[s,a]=r.createSignal({}),[l,c]=r.createSignal({});return t.createComponent(w,{get value(){return{attachedFlipIds:i,firstState:s,lastState:l,getFirstState:e=>s()[e],getLastState:e=>l()[e],setFirstState:(e,t)=>{a((r=>({...r,[e]:t})))},recordFirstState:(e,t,r=[])=>{const i=o(t,r);0===i.rect.width&&0===i.rect.height||a((t=>({...t,[e]:i})))},setLastState:(e,t)=>{c((r=>({...r,[e]:t})))},recordLastState:(e,t,r=[])=>{const i=o(t,r);0===i.rect.width&&0===i.rect.height||c((t=>({...t,[e]:i})))},attach:e=>{n(b((t=>{t.add(e)})))},detach:e=>{n(b((t=>{t.delete(e)})))},defaultConfig:{...m,...e.defaultConfig}}},get children(){return e.children}})},e.NestedFlipContext=v,e.NestedFlipProvider=x,e.Unflip=e=>{const t=r.useContext(v);let i=null;return r.createEffect(r.on((()=>e.id),(()=>{if(!t)return;const r=(()=>{let e=i;return e instanceof Function&&(e=e()),Array.isArray(e)?e.every((e=>e instanceof HTMLElement||e instanceof SVGElement))?e:(console.warn("Unflip children must be DOM nodes",e),[]):e instanceof HTMLElement||e instanceof SVGElement?[e]:(console.warn("Unflip children looks like not a DOM node",e),[])})();if(0===r.length)return;const n=t.parentId();(e.id??n)===n&&(null==t||t.setUnflips([...t.unflips(),...r]))}))),i=e.children},e.When=e=>{const i=()=>{const t=e.when;return Array.isArray(t)?t:[t]};return t.createComponent(r.For,{get each(){return[i()]},children:t=>e.children(...t)})},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package.json

 {
   "name": "solid-flip",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "The most advanced Flip animation library for Solid.js inspired by react-flip-toolkit",
@@ -5,0 +5,0 @@ "main": "dist/index.umd.js",

README.md

@@ -0,0 +0,0 @@ # Solid-flip

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50643

increased by1.19%

Lines of code

758

increased by2.57%

No dependency changes