motion-plus-vue 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("motion-v");function G(n,{locales:t,format:i},s,l){const g=new Intl.NumberFormat(t,i).formatToParts(Number(n));s&&g.unshift({type:"prefix",value:s}),l&&g.push({type:"suffix",value:l});const d=[],y=[],m=[],v=[],c={},a=o=>`${o}:${c[o]=(c[o]??-1)+1}`;let f="",w=!1,B=!1,p=0;for(const o of g){f+=o.value;const h=o.type==="minusSign"||o.type==="plusSign"?"sign":o.type;switch(h){case"integer":w=!0,y.push(...o.value.split("").map(x=>({type:h,value:parseInt(x)})));break;case"group":y.push({type:h,value:o.value});break;case"decimal":B=!0,m.push({type:h,value:o.value,key:a(h),originalIndex:p++});break;case"fraction":m.push(...o.value.split("").map(x=>({type:h,value:parseInt(x),key:a(h),originalIndex:p++})));break;default:(w||B?v:d).push({type:h,value:o.value,key:a(h),originalIndex:p++})}}const k=[];for(let o=y.length-1;o>=0;o--){const h=a(y[o].type);k.unshift({...y[o],key:h,originalIndex:o})}return{pre:d,integer:k,fraction:m,post:v,formatted:f}}const[U,q]=u.createContext("SectionContext");function O(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function _(n){const{width:t,fontSize:i}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(i)}em`}const C="var(--mask-height, 0.15em)",V="var(--mask-width, 0.5em)",P=`calc(${V} / var(--invert-x, 1))`,b="#000 0, transparent 71%",Z=`linear-gradient(to right, transparent 0, #000 ${P}, #000 calc(100% - ${P}), transparent),linear-gradient(to bottom, transparent 0, #000 ${C}, #000 calc(100% - ${C}), transparent 100%),radial-gradient(at bottom right, ${b}),radial-gradient(at bottom left, ${b}), radial-gradient(at top left, ${b}), radial-gradient(at top right, ${b})`,J=`100% calc(100% - ${C} * 2),calc(100% - ${P} * 2) 100%,${P} ${C},${P} ${C},${P} ${C},${P} ${C}`;u.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:i})=>i.x.scale*t.x}});const R={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function X(n){const t=e.ref();function i(l){t.value=l==null?void 0:l.$el}e.watch(()=>n.isPresent,l=>{var r;t.value&&((r=u.mountedStates.get(t.value))==null||r.setActive("exit",!l))});function s(l){var r;l.detail.isExit&&!n.isPresent&&((r=n.onRemove)==null||r.call(n,n.partKey))}return{root:t,getRoot:i,handleComplete:s}}const Q=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{}},setup(n){const t=n,{justify:i}=U(),{getRoot:s,handleComplete:l}=X(t);return(r,g)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(s),layout:"position","data-state":r.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(i),padding:`calc(${e.unref(C)}/2) 0`,position:"relative",pointerEvents:r.isPresent?void 0:"none"}),"aria-hidden":!r.isPresent,onMotioncomplete:e.unref(l)},{default:e.withCtx(()=>[e.createVNode(e.unref(u.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(i),initial:!1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(u.motion).span,{key:r.value,layout:e.unref(i)==="right"?"position":!1,initial:{opacity:0},animate:{opacity:[null,1]},exit:{opacity:[null,0],transition:{duration:.3}},style:{display:"inline-block",whiteSpace:"pre"},transition:{duration:.2}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1},8,["layout"]))]),_:1},8,["anchor-x"])]),_:1},8,["data-state","style","aria-hidden","onMotioncomplete"]))}}),Y=new WeakMap,ee=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{}},setup(n){const t=n,i=t.initialValue??t.value,s=O(),l=u.useMotionConfig(),r=e.ref(),g=e.ref(Array(10).fill(null)),d=e.ref(),{getRoot:y,handleComplete:m,root:v}=X(t);let c=i;const a=e.ref(i);e.watch([()=>t.value,()=>t.isPresent],([p,k])=>{if(!k)return a.value=0;if(s.current)return e.nextTick(()=>{a.value=p});a.value=p},{immediate:!0});function f(p){var x;if(!r.value||p===c)return;const k=r.value.getBoundingClientRect(),o=(x=v.value)==null?void 0:x.getBoundingClientRect(),h=k.height*(p-c)+(k.top-(o?o.top||0:k.top));u.animate(r.value,{y:[h,0]},l.value.transition)}function w(p){if(s.current&&i===p||!g.value[p])return;const k=_(g.value[p]);v.value&&Y.set(v.value,k),d.value=k}e.watch(a,p=>{w(p)},{immediate:!0,flush:"post"}),e.watch(a,(p,k,o)=>{f(p),o(()=>{c=p})},{immediate:!0,flush:"pre"});function B(p){return()=>e.createVNode("span",{key:p,style:{display:"inline-block",padding:`calc(${C}/2) 0`}},[p])}return(p,k)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(y),layout:"position","data-state":p.isPresent?void 0:"exiting","data-key":p.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:d.value,pointerEvents:p.isPresent?void 0:"none"}),"aria-hidden":!p.isPresent,onMotioncomplete:e.unref(m)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:r,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[a.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(R),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,o=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(o-1)),{key:o-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(a.value)))),a.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(R),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-a.value,o=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(a.value+o)),{key:a.value+o}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),$=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{}},setup(n){const t=n,i=e.ref(),s=u.useDomRef(),l=e.ref(),r=O();e.watch(()=>t.parts,m=>{const v=new Map(m.map(a=>[a.key,{...a,isPresent:!0}]));d=[...d.filter(a=>!v.get(a.key)).map(a=>({...a,isPresent:!1})),...m].sort((a,f)=>g.value==="right"?a.isPresent===f.isPresent?a.originalIndex-f.originalIndex:a.isPresent?-1:1:g.value==="left"?a.isPresent===f.isPresent?a.originalIndex-f.originalIndex:a.isPresent?1:-1:a.originalIndex-f.originalIndex)},{flush:"pre"}),e.watch(()=>t.parts.map(m=>m.value).join(""),(m,v)=>{if(!l.value)return;if(r.current){s.value&&(s.value.style.width=_(l.value));return}const c=Array.from(l.value.children).map(f=>{if(!(f instanceof HTMLElement))return;if(f.dataset.state==="exiting"){const p=f.nextSibling;return f.remove(),()=>{l.value&&l.value.insertBefore(f,p)}}const w=Y.get(f);if(!w)return;const B=f.style.width;return f.style.width=w,()=>{f.style.width=B}});function a(){const f=_(l.value);i.value=f}+m>+(v||0)?u.frame.read(a):a();for(let f=c.length-1;f>=0;f--){const w=c[f];w&&w()}},{immediate:!0,flush:"post"});const g=e.toRef(t,"justify");q({justify:g});let d=t.parts;function y(m){d=d.filter(v=>v.key!==m)}return(m,v)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(s),class:e.normalizeClass(`number-section-${m.name}`),style:e.normalizeStyle({...m.style,display:"inline-flex",justifyContent:g.value,width:i.value}),layout:"position"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:l,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[v[0]||(v[0]=e.createTextVNode(" ")),e.createVNode(e.unref(u.AnimatePresence),{mode:m.mode,"anchor-x":g.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),c=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:c.key},[c.type==="integer"||c.type==="fraction"?(e.openBlock(),e.createBlock(ee,{key:c.key,"part-key":c.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:c.value,"is-present":c.isPresent??!0,"initial-value":e.unref(r).current?void 0:0,onRemove:y},null,8,["part-key","value","is-present","initial-value"])):(e.openBlock(),e.createBlock(Q,{key:c.type==="literal"?`${c.key}:${c.value}`:c.key,type:c.type,"part-key":c.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:c.value,"is-present":c.isPresent??!0,onRemove:y},null,8,["type","part-key","value","is-present"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style"]))}}),te=e.defineComponent({__name:"Mask",setup(n){return(t,i)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{layout:"","aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(V)})`,padding:`calc(${e.unref(C)}/2) ${e.unref(V)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(Z),webkitMaskSize:e.unref(J),webkitMaskPosition:"center, center, top left, top right, bottom right, bottom left",webkitMaskRepeat:"no-repeat"})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["style"]))}}),ne=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{}},setup(n){const t={opacity:{duration:1,ease:u.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},i=n,s=e.computed(()=>{const d=i.value;return G(d,{locales:i.locales,format:i.format},i.prefix,i.suffix)}),l=u.useMotionConfig(),r=e.computed(()=>i.transition??l.value.transition??t);function g(){const{format:d,prefix:y,suffix:m,locales:v,value:c,...a}=i;return a}return(d,y)=>(e.openBlock(),e.createBlock(e.unref(u.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(u.MotionConfig),{transition:r.value},{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,e.mergeProps({...d.$attrs,...g()},{layout:"",style:{lineHeight:"1",...d.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,{layout:"","aria-label":s.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode($,{style:e.normalizeStyle({padding:`calc(${e.unref(C)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:s.value.pre,name:"pre"},null,8,["style","parts"]),e.createVNode(te,null,{default:e.withCtx(()=>[e.createVNode($,{justify:"right",parts:s.value.integer,name:"integer",mode:"popLayout"},null,8,["parts"]),e.createVNode($,{layout:"position",parts:s.value.fraction,name:"fraction",mode:"popLayout"},null,8,["parts"])]),_:1}),e.createVNode($,{style:e.normalizeStyle({padding:`calc(${e.unref(C)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:s.value.post,name:"post"},null,8,["style","parts"])]),_:1},8,["aria-label"])]),_:1},16,["style"])]),_:1},8,["transition"])]),_:1}))}}),oe=ne;function ie(){const n=document.createElement("style");return n.textContent=`
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("motion-v");function Z(n,{locales:t,format:i},s,l){const g=new Intl.NumberFormat(t,i).formatToParts(Number(n));s&&g.unshift({type:"prefix",value:s}),l&&g.push({type:"suffix",value:l});const d=[],y=[],m=[],v=[],c={},a=o=>`${o}:${c[o]=(c[o]??-1)+1}`;let f="",w=!1,B=!1,p=0;for(const o of g){f+=o.value;const h=o.type==="minusSign"||o.type==="plusSign"?"sign":o.type;switch(h){case"integer":w=!0,y.push(...o.value.split("").map(x=>({type:h,value:parseInt(x)})));break;case"group":y.push({type:h,value:o.value});break;case"decimal":B=!0,m.push({type:h,value:o.value,key:a(h),originalIndex:p++});break;case"fraction":m.push(...o.value.split("").map(x=>({type:h,value:parseInt(x),key:a(h),originalIndex:p++})));break;default:(w||B?v:d).push({type:h,value:o.value,key:a(h),originalIndex:p++})}}const k=[];for(let o=y.length-1;o>=0;o--){const h=a(y[o].type);k.unshift({...y[o],key:h,originalIndex:o})}return{pre:d,integer:k,fraction:m,post:v,formatted:f}}const[J,Q]=u.createContext("SectionContext");function O(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function V(n){const{width:t,fontSize:i}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(i)}em`}const C="var(--mask-height, 0.15em)",_="var(--mask-width, 0.5em)",P=`calc(${_} / var(--invert-x, 1))`,b="#000 0, transparent 71%",ee=`linear-gradient(to right, transparent 0, #000 ${P}, #000 calc(100% - ${P}), transparent),linear-gradient(to bottom, transparent 0, #000 ${C}, #000 calc(100% - ${C}), transparent 100%),radial-gradient(at bottom right, ${b}),radial-gradient(at bottom left, ${b}), radial-gradient(at top left, ${b}), radial-gradient(at top right, ${b})`,te=`100% calc(100% - ${C} * 2),calc(100% - ${P} * 2) 100%,${P} ${C},${P} ${C},${P} ${C},${P} ${C}`;u.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:i})=>i.x.scale*t.x}});const R={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function X(n){const t=e.ref();function i(l){t.value=l==null?void 0:l.$el}e.watch(()=>n.isPresent,l=>{var r;t.value&&((r=u.mountedStates.get(t.value))==null||r.setActive("exit",!l))});function s(l){var r;l.detail.isExit&&!n.isPresent&&((r=n.onRemove)==null||r.call(n,n.partKey))}return{root:t,getRoot:i,handleComplete:s}}const ne=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{}},setup(n){const t=n,{justify:i}=J(),{getRoot:s,handleComplete:l}=X(t);return(r,g)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(s),layout:"position","data-state":r.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(i),padding:`calc(${e.unref(C)}/2) 0`,position:"relative",pointerEvents:r.isPresent?void 0:"none"}),"aria-hidden":!r.isPresent,onMotioncomplete:e.unref(l)},{default:e.withCtx(()=>[e.createVNode(e.unref(u.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(i),initial:!1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(u.motion).span,{key:r.value,layout:e.unref(i)==="right"?"position":!1,initial:{opacity:0},animate:{opacity:[null,1]},exit:{opacity:[null,0],transition:{duration:.3}},style:{display:"inline-block",whiteSpace:"pre"},transition:{duration:.2}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1},8,["layout"]))]),_:1},8,["anchor-x"])]),_:1},8,["data-state","style","aria-hidden","onMotioncomplete"]))}}),Y=new WeakMap,oe=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{}},setup(n){const t=n,i=t.initialValue??t.value,s=O(),l=u.useMotionConfig(),r=e.ref(),g=e.ref(Array(10).fill(null)),d=e.ref(),{getRoot:y,handleComplete:m,root:v}=X(t);let c=i;const a=e.ref(i);e.watch([()=>t.value,()=>t.isPresent],([p,k])=>{if(!k)return a.value=0;if(s.current)return e.nextTick(()=>{a.value=p});a.value=p},{immediate:!0});function f(p){var x;if(!r.value||p===c)return;const k=r.value.getBoundingClientRect(),o=(x=v.value)==null?void 0:x.getBoundingClientRect(),h=k.height*(p-c)+(k.top-(o?o.top||0:k.top));u.animate(r.value,{y:[h,0]},l.value.transition)}function w(p){if(s.current&&i===p||!g.value[p])return;const k=V(g.value[p]);v.value&&Y.set(v.value,k),d.value=k}e.watch(a,p=>{w(p)},{immediate:!0,flush:"post"}),e.watch(a,(p,k,o)=>{f(p),o(()=>{c=p})},{immediate:!0,flush:"pre"});function B(p){return()=>e.createVNode("span",{key:p,style:{display:"inline-block",padding:`calc(${C}/2) 0`}},[p])}return(p,k)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(y),layout:"position","data-state":p.isPresent?void 0:"exiting","data-key":p.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:d.value,pointerEvents:p.isPresent?void 0:"none"}),"aria-hidden":!p.isPresent,onMotioncomplete:e.unref(m)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:r,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[a.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(R),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,o=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(o-1)),{key:o-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(a.value)))),a.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(R),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-a.value,o=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(a.value+o)),{key:a.value+o}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),$=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{}},setup(n){const t=n,i=e.ref(),s=u.useDomRef(),l=e.ref(),r=O();e.watch(()=>t.parts,m=>{const v=new Map(m.map(a=>[a.key,{...a,isPresent:!0}]));d=[...d.filter(a=>!v.get(a.key)).map(a=>({...a,isPresent:!1})),...m].sort((a,f)=>g.value==="right"?a.isPresent===f.isPresent?a.originalIndex-f.originalIndex:a.isPresent?-1:1:g.value==="left"?a.isPresent===f.isPresent?a.originalIndex-f.originalIndex:a.isPresent?1:-1:a.originalIndex-f.originalIndex)},{flush:"pre"}),e.watch(()=>t.parts.map(m=>m.value).join(""),(m,v)=>{if(!l.value)return;if(r.current){s.value&&(s.value.style.width=V(l.value));return}const c=Array.from(l.value.children).map(f=>{if(!(f instanceof HTMLElement))return;if(f.dataset.state==="exiting"){const p=f.nextSibling;return f.remove(),()=>{l.value&&l.value.insertBefore(f,p)}}const w=Y.get(f);if(!w)return;const B=f.style.width;return f.style.width=w,()=>{f.style.width=B}});function a(){const f=V(l.value);i.value=f}+m>+(v||0)?u.frame.read(a):a();for(let f=c.length-1;f>=0;f--){const w=c[f];w&&w()}},{immediate:!0,flush:"post"});const g=e.toRef(t,"justify");Q({justify:g});let d=t.parts;function y(m){d=d.filter(v=>v.key!==m)}return(m,v)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(s),class:e.normalizeClass(`number-section-${m.name}`),style:e.normalizeStyle({...m.style,display:"inline-flex",justifyContent:g.value,width:i.value}),layout:"position"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:l,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[v[0]||(v[0]=e.createTextVNode(" ")),e.createVNode(e.unref(u.AnimatePresence),{mode:m.mode,"anchor-x":g.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),c=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:c.key},[c.type==="integer"||c.type==="fraction"?(e.openBlock(),e.createBlock(oe,{key:c.key,"part-key":c.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:c.value,"is-present":c.isPresent??!0,"initial-value":e.unref(r).current?void 0:0,onRemove:y},null,8,["part-key","value","is-present","initial-value"])):(e.openBlock(),e.createBlock(ne,{key:c.type==="literal"?`${c.key}:${c.value}`:c.key,type:c.type,"part-key":c.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:c.value,"is-present":c.isPresent??!0,onRemove:y},null,8,["type","part-key","value","is-present"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style"]))}}),ie=e.defineComponent({__name:"Mask",setup(n){return(t,i)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{layout:"","aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(_)})`,padding:`calc(${e.unref(C)}/2) ${e.unref(_)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(ee),webkitMaskSize:e.unref(te),webkitMaskPosition:"center, center, top left, top right, bottom right, bottom left",webkitMaskRepeat:"no-repeat"})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["style"]))}}),re=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{}},setup(n){const t={opacity:{duration:1,ease:u.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},i=n,s=e.computed(()=>{const d=i.value;return Z(d,{locales:i.locales,format:i.format},i.prefix,i.suffix)}),l=u.useMotionConfig(),r=e.computed(()=>i.transition??l.value.transition??t);function g(){const{format:d,prefix:y,suffix:m,locales:v,value:c,...a}=i;return a}return(d,y)=>(e.openBlock(),e.createBlock(e.unref(u.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(u.MotionConfig),{transition:r.value},{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,e.mergeProps({...d.$attrs,...g()},{layout:"",style:{lineHeight:"1",...d.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,{layout:"","aria-label":s.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode($,{style:e.normalizeStyle({padding:`calc(${e.unref(C)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:s.value.pre,name:"pre"},null,8,["style","parts"]),e.createVNode(ie,null,{default:e.withCtx(()=>[e.createVNode($,{justify:"right",parts:s.value.integer,name:"integer",mode:"popLayout"},null,8,["parts"]),e.createVNode($,{layout:"position",parts:s.value.fraction,name:"fraction",mode:"popLayout"},null,8,["parts"])]),_:1}),e.createVNode($,{style:e.normalizeStyle({padding:`calc(${e.unref(C)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:s.value.post,name:"post"},null,8,["style","parts"])]),_:1},8,["aria-label"])]),_:1},16,["style"])]),_:1},8,["transition"])]),_:1}))}}),ae=re;function se(){const n=document.createElement("style");return n.textContent=`
|
|
2
2
|
* {
|
|
3
3
|
cursor: none !important;
|
|
4
4
|
}
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
[data-motion-cursor="pointer"] {
|
|
7
7
|
background-color: #333;
|
|
8
8
|
}
|
|
9
|
-
`,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function
|
|
9
|
+
`,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function ue(n){e.watch(n,t=>t?se():u.noop)}function N(n){return t=>{t.pointerType==="mouse"&&n(t)}}function j(n){return N(t=>{t.button===0&&n(t)})}let T,L;function le(){T=u.motionValue(0),L=u.motionValue(0);let n=0,t=0;function i(){T.set(n),L.set(t)}typeof window<"u"&&window.addEventListener("pointermove",N(s=>{n=s.clientX,t=s.clientY,u.frame.update(i)}))}function K(){return T||le(),{x:T,y:L}}function ce(n,t){return{x:u.useTransform(()=>n.x.get()+t.value.x),y:u.useTransform(()=>n.y.get()+t.value.y)}}function fe(n){return n.closest("[data-cursor]")}function de(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function pe(n){return window.getComputedStyle(n).userSelect==="none"?null:n.closest("p, textarea:not(:disabled), input[type='text']:not(:disabled), h1, h2, h3, h4, h5, h6")}function me(n){let t=fe(n);return t?[t.dataset.cursor,t]:(t=de(n),t?["pointer",t]:(t=pe(n),t?["text",t]:["default",null]))}let E=null,S={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null};function ye(){if(typeof window>"u")return{onChange:()=>()=>{}};const n=new Set;function t(d){S={...S,...d},n.forEach(y=>y(S))}const i=j(()=>{S.isPressed||t({isPressed:!0})}),s=j(()=>{S.isPressed&&t({isPressed:!1})}),l=N(({target:d})=>{if(!d)return;const[y,m]=me(d);let v=!1;const c={};y!==S.type&&(c.type=y,v=!0);const a=y==="pointer"&&m?m.getBoundingClientRect():null;if(a!==S.targetBoundingBox&&(c.targetBoundingBox=a,v=!0),y==="text"){const{fontSize:f}=window.getComputedStyle(d),w=f?parseInt(f):null;w!==S.fontSize&&(c.fontSize=w,v=!0)}else S.fontSize&&(c.fontSize=null,v=!0);v&&t(c)});function r(){typeof window>"u"||(window.addEventListener("pointerover",l),window.addEventListener("pointerdown",i),window.addEventListener("pointerup",s))}function g(){window.removeEventListener("pointerover",l),window.removeEventListener("pointerdown",i),window.removeEventListener("pointerup",s)}return{onChange:d=>(n.size||r(),n.add(d),()=>{n.delete(d),n.size||g()})}}function ve(){return E||(E=ye()),E}function G(){const n=e.ref({...S});return e.watch(n,()=>ve().onChange(t=>{n.value=t}),{immediate:!0,flush:"post"}),n}let z=null;function ge(){const n=new Set;function t(){n.forEach(r=>r.show())}function i(){n.forEach(r=>r.hide())}function s(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",i)}function l(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",i)}return{on:r=>typeof window>"u"?u.noop:(n.size||s(),n.add(r),()=>{n.delete(r),n.size===0&&l()})}}function he(){return z||(z=ge()),z}function U(n){const t=e.ref(!0);return e.watch(t,()=>he().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}function A(n,t,i){return u.useTransform(()=>u.mix(n.get(),t.get(),i.get()))}function we(n,t,i){const s=u.useMotionValue(0),l=u.useMotionValue(0),r=u.useMotionValue(0),g=A(n.x,l,s),d=A(n.y,r,s);return e.watch([t,()=>i.value.targetBoundingBox],()=>{if(!t.value)return;i.value.targetBoundingBox&&(l.set(i.value.targetBoundingBox.left+i.value.targetBoundingBox.width/2),r.set(i.value.targetBoundingBox.top+i.value.targetBoundingBox.height/2));const y=u.animate(s,i.value.targetBoundingBox?.9:0);return()=>y.stop()},{immediate:!0}),{x:g,y:d}}const xe={width:"auto",height:"auto"},D={x:0,y:0},ke={x:.5,y:.5},Ce={duration:0},Be={stiffness:1e3,damping:100},Se={duration:.15,ease:[.38,.12,.29,1]},F=16,H=30,W=4,Pe=20;function be(n,t,{matchPointerSize:i,matchTextSize:s}){switch(n){case"pointer":return i&&t.targetBoundingBox?t.targetBoundingBox:{width:H,height:H};case"text":return s&&t.fontSize?{width:W,height:t.fontSize}:{width:W,height:Pe};default:return{width:F,height:F}}}function $e({x:n,y:t},i){const s=e.ref(n.prev!==void 0||t.prev!==void 0);return e.watch(s,()=>{if(s.value)return;const l=()=>{s.value=!0,i(),r()},r=u.pipe(n.on("change",l),t.on("change",l));return()=>r()},{immediate:!0}),s}const Te=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:n})=>n?D:ke},offset:{default:()=>D},spring:{type:[Boolean,Object],default:({follow:n})=>n?Be:!1},snapToTarget:{type:Boolean,default:!1},matchTextSize:{type:Boolean,default:!0},transition:{},variants:{},style:{},class:{},show:{type:Boolean,default:!0}},setup(n){const t=n,i=e.toRef(t,"offset"),s=u.useReducedMotion();ue(()=>!s.value&&!t.follow);const l=K(),r=ce(l,i),g=u.useSpring(r.x,t.spring||void 0),d=u.useSpring(r.y,t.spring||void 0);function y(){const o=r.x.on("change",x=>{g.jump(x),o()}),h=r.y.on("change",x=>{d.jump(x),h()})}const m=G(),v=U(y),{x:c,y:a}=we(t.spring?{x:g,y:d}:l,e.toRef(t,"snapToTarget"),m),f=e.useSlots(),w=e.computed(()=>{var x,I;const o=(I=(x=f.default)==null?void 0:x.call(f))==null?void 0:I.filter(M=>M.type!==Symbol.for("v-cmt"));if(o!=null&&o.length)return xe;const h=be(m.value.type,m.value,{matchPointerSize:t.snapToTarget,matchTextSize:t.matchTextSize});return{width:`${h.width}px`,height:`${h.height}px`}}),B=$e(l,y);function p(o){return(h,x)=>`translate(-${o.x*100}%, -${o.y*100}%) ${x}`}function k(){const{follow:o,center:h,offset:x,spring:I,snapToTarget:M,matchTextSize:Ee,...q}=t;return{...q}}return(o,h)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(B)?(e.openBlock(),e.createBlock(e.unref(u.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(u.MotionConfig),{transition:e.unref(s)?e.unref(Ce):o.transition||e.unref(Se)},{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,e.mergeProps({layout:"","data-motion-cursor":o.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...o.$attrs,...k()},{variants:{default:{opacity:1,scale:1},exit:{opacity:0,scale:0},pressed:o.follow?{opacity:1,scale:1}:{opacity:1,scale:.9},...o.variants},animate:["default",e.unref(m).type,!e.unref(v)||!o.show?"exit":e.unref(m).isPressed?"pressed":""],"transform-template":p(o.center),"data-w":w.value.width,style:{width:w.value.width,height:w.value.height,borderRadius:o.follow?0:20,zIndex:o.follow?99998:99999,willChange:"transform",contain:"layout",overflow:"hidden",originX:o.center.x,originY:o.center.y,...t.style,x:e.unref(c),y:e.unref(a),top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.AnimatePresence),null,{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3})]),_:3},16,["data-motion-cursor","variants","animate","transform-template","data-w","style"])]),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}}),Ie=Te;exports.AnimateNumber=ae;exports.Cursor=Ie;exports.useCursorIsInView=U;exports.useCursorState=G;exports.usePointerPosition=K;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { DefineComponent } from 'vue';
|
|
2
2
|
import { CursorProps as Props } from './Cursor';
|
|
3
3
|
import { MotionProps } from 'motion-v';
|
|
4
|
+
export { useCursorState } from './hooks/use-cursor-state';
|
|
5
|
+
export { useCursorIsInView } from './hooks/use-cursor-in-view';
|
|
6
|
+
export { usePointerPosition } from './hooks/use-pointer-position';
|
|
4
7
|
export type CursorProps = Props & MotionProps<'div'>;
|
|
5
8
|
export declare const Cursor: DefineComponent<CursorProps>;
|
package/dist/es/index.mjs
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { AnimateNumber as e } from "./components/AnimateNumber/index.mjs";
|
|
2
|
-
import { Cursor as
|
|
2
|
+
import { Cursor as s } from "./components/Cursor/index.mjs";
|
|
3
|
+
import { useCursorState as u } from "./components/Cursor/hooks/use-cursor-state/index.mjs";
|
|
4
|
+
import { useCursorIsInView as i } from "./components/Cursor/hooks/use-cursor-in-view.mjs";
|
|
5
|
+
import { usePointerPosition as x } from "./components/Cursor/hooks/use-pointer-position.mjs";
|
|
3
6
|
export {
|
|
4
7
|
e as AnimateNumber,
|
|
5
|
-
|
|
8
|
+
s as Cursor,
|
|
9
|
+
i as useCursorIsInView,
|
|
10
|
+
u as useCursorState,
|
|
11
|
+
x as usePointerPosition
|
|
6
12
|
};
|