motion-plus-vue 1.1.3 → 1.1.5
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"),s=require("motion-v");function te(n,{locales:t,format:o},i,r){const d=new Intl.NumberFormat(t,o).formatToParts(Number(n));i&&d.unshift({type:"prefix",value:i}),r&&d.push({type:"suffix",value:r});const f=[],h=[],g=[],v=[],u={},l=m=>`${m}:${u[m]=(u[m]??-1)+1}`;let p="",w=!1,P=!1,y=0;for(const m of d){p+=m.value;const c=m.type==="minusSign"||m.type==="plusSign"?"sign":m.type;switch(c){case"integer":w=!0,h.push(...m.value.split("").map(k=>({type:c,value:parseInt(k)})));break;case"group":h.push({type:c,value:m.value});break;case"decimal":P=!0,g.push({type:c,value:m.value,key:l(c),originalIndex:y++});break;case"fraction":g.push(...m.value.split("").map(k=>({type:c,value:parseInt(k),key:l(c),originalIndex:y++})));break;default:(w||P?v:f).push({type:c,value:m.value,key:l(c),originalIndex:y++})}}const x=[];for(let m=h.length-1;m>=0;m--){const c=l(h[m].type);x.unshift({...h[m],key:c,originalIndex:m})}return{pre:f,integer:x,fraction:g,post:v,formatted:p}}const[ne,oe]=s.createContext("SectionContext");function Z(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function L(n){const{width:t,fontSize:o}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(o)}em`}const S="var(--mask-height, 0.15em)",N="var(--mask-width, 0.5em)",b=`calc(${N} / var(--invert-x, 1))`,z="#000 0, transparent 71%",ie=`linear-gradient(to right, transparent 0, #000 ${b}, #000 calc(100% - ${b}), transparent),linear-gradient(to bottom, transparent 0, #000 ${S}, #000 calc(100% - ${S}), transparent 100%),radial-gradient(at bottom right, ${z}),radial-gradient(at bottom left, ${z}), radial-gradient(at top left, ${z}), radial-gradient(at top right, ${z})`,re=`100% calc(100% - ${S} * 2),calc(100% - ${b} * 2) 100%,${b} ${S},${b} ${S},${b} ${S},${b} ${S}`;s.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:o})=>o.x.scale*t.x}});const D={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function q(n){const t=e.ref();function o(r){t.value=r==null?void 0:r.$el}e.watch(()=>n.isPresent,r=>{var a;t.value&&((a=s.mountedStates.get(t.value))==null||a.setActive("exit",!r))});function i(r){var a;r.detail.isExit&&!n.isPresent&&((a=n.onRemove)==null||a.call(n,n.partKey))}return{root:t,getRoot:o,handleComplete:i}}const ae=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{}},setup(n){const t=n,{justify:o}=ne(),{getRoot:i,handleComplete:r}=q(t);return(a,d)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),layout:"position","data-state":a.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(o),padding:`calc(${e.unref(S)}/2) 0`,position:"relative",pointerEvents:a.isPresent?void 0:"none"}),"aria-hidden":!a.isPresent,onMotioncomplete:e.unref(r)},{default:e.withCtx(()=>[e.createVNode(e.unref(s.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(o),initial:!1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(s.motion).span,{key:a.value,layout:e.unref(o)==="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(a.value),1)]),_:1},8,["layout"]))]),_:1},8,["anchor-x"])]),_:1},8,["data-state","style","aria-hidden","onMotioncomplete"]))}}),J=new WeakMap,se=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{}},setup(n){const t=n,o=t.initialValue??t.value,i=Z(),r=s.useMotionConfig(),a=e.ref(),d=e.ref(Array(10).fill(null)),f=e.ref(),{getRoot:h,handleComplete:g,root:v}=q(t);let u=o;const l=e.ref(o);e.watch([()=>t.value,()=>t.isPresent],([y,x])=>{if(!x)return l.value=0;if(i.current)return e.nextTick(()=>{l.value=y});l.value=y},{immediate:!0});function p(y){var k;if(!a.value||y===u)return;const x=a.value.getBoundingClientRect(),m=(k=v.value)==null?void 0:k.getBoundingClientRect(),c=x.height*(y-u)+(x.top-(m?m.top||0:x.top));s.animate(a.value,{y:[c,0]},r.value.transition)}function w(y){if(i.current&&o===y||!d.value[y])return;const x=L(d.value[y]);v.value&&J.set(v.value,x),f.value=x}e.watch(l,y=>{w(y)},{immediate:!0,flush:"post"}),e.watch(l,(y,x,m)=>{p(y),m(()=>{u=y})},{immediate:!0,flush:"pre"});function P(y){return()=>e.createVNode("span",{key:y,style:{display:"inline-block",padding:`calc(${S}/2) 0`}},[y])}return(y,x)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(h),layout:"position","data-state":y.isPresent?void 0:"exiting","data-key":y.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:f.value,pointerEvents:y.isPresent?void 0:"none"}),"aria-hidden":!y.isPresent,onMotioncomplete:e.unref(g)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:a,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[l.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(D),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(m-1)),{key:m-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value)))),l.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(D),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value+m)),{key:l.value+m}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),E=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{}},setup(n){const t=n,o=e.ref(),i=s.useDomRef(),r=e.ref(),a=Z();e.watch(()=>t.parts,g=>{const v=new Map(g.map(l=>[l.key,{...l,isPresent:!0}]));f=[...f.filter(l=>!v.get(l.key)).map(l=>({...l,isPresent:!1})),...g].sort((l,p)=>d.value==="right"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?-1:1:d.value==="left"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?1:-1:l.originalIndex-p.originalIndex)},{flush:"pre"}),e.watch(()=>t.parts.map(g=>g.value).join(""),(g,v)=>{if(!r.value)return;if(a.current){i.value&&(i.value.style.width=L(r.value));return}const u=Array.from(r.value.children).map(p=>{if(!(p instanceof HTMLElement))return;if(p.dataset.state==="exiting"){const y=p.nextSibling;return p.remove(),()=>{r.value&&r.value.insertBefore(p,y)}}const w=J.get(p);if(!w)return;const P=p.style.width;return p.style.width=w,()=>{p.style.width=P}});function l(){const p=L(r.value);o.value=p}+g>+(v||0)?s.frame.read(l):l();for(let p=u.length-1;p>=0;p--){const w=u[p];w&&w()}},{immediate:!0,flush:"post"});const d=e.toRef(t,"justify");oe({justify:d});let f=t.parts;function h(g){f=f.filter(v=>v.key!==g)}return(g,v)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),class:e.normalizeClass(`number-section-${g.name}`),style:e.normalizeStyle({...g.style,display:"inline-flex",justifyContent:d.value,width:o.value}),layout:"position"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:r,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[v[0]||(v[0]=e.createTextVNode(" ")),e.createVNode(e.unref(s.AnimatePresence),{mode:g.mode,"anchor-x":d.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(f),u=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:u.key},[u.type==="integer"||u.type==="fraction"?(e.openBlock(),e.createBlock(se,{key:u.key,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,"initial-value":e.unref(a).current?void 0:0,onRemove:h},null,8,["part-key","value","is-present","initial-value"])):(e.openBlock(),e.createBlock(ae,{key:u.type==="literal"?`${u.key}:${u.value}`:u.key,type:u.type,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,onRemove:h},null,8,["type","part-key","value","is-present"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style"]))}}),ue=e.defineComponent({__name:"Mask",setup(n){return(t,o)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{layout:"","aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(N)})`,padding:`calc(${e.unref(S)}/2) ${e.unref(N)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(ie),webkitMaskSize:e.unref(re),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"]))}}),le=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{}},setup(n){const t={opacity:{duration:1,ease:s.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},o=n,i=e.computed(()=>{const f=o.value;return te(f,{locales:o.locales,format:o.format},o.prefix,o.suffix)}),r=s.useMotionConfig(),a=e.computed(()=>o.transition??r.value.transition??t);function d(){const{format:f,prefix:h,suffix:g,locales:v,value:u,...l}=o;return l}return(f,h)=>(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:a.value},{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,e.mergeProps({...f.$attrs,...d()},{layout:"",style:{lineHeight:"1",...f.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,{layout:"","aria-label":i.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode(E,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:i.value.pre,name:"pre"},null,8,["style","parts"]),e.createVNode(ue,null,{default:e.withCtx(()=>[e.createVNode(E,{justify:"right",parts:i.value.integer,name:"integer",mode:"popLayout"},null,8,["parts"]),e.createVNode(E,{layout:"position",parts:i.value.fraction,name:"fraction",mode:"popLayout"},null,8,["parts"])]),_:1}),e.createVNode(E,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:i.value.post,name:"post"},null,8,["style","parts"])]),_:1},8,["aria-label"])]),_:1},16,["style"])]),_:1},8,["transition"])]),_:1}))}}),ce=le;function fe(){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"),s=require("motion-v");function te(n,{locales:t,format:o},i,r){const d=new Intl.NumberFormat(t,o).formatToParts(Number(n));i&&d.unshift({type:"prefix",value:i}),r&&d.push({type:"suffix",value:r});const f=[],h=[],v=[],g=[],u={},l=m=>`${m}:${u[m]=(u[m]??-1)+1}`;let p="",w=!1,P=!1,y=0;for(const m of d){p+=m.value;const c=m.type==="minusSign"||m.type==="plusSign"?"sign":m.type;switch(c){case"integer":w=!0,h.push(...m.value.split("").map(k=>({type:c,value:parseInt(k)})));break;case"group":h.push({type:c,value:m.value});break;case"decimal":P=!0,v.push({type:c,value:m.value,key:l(c),originalIndex:y++});break;case"fraction":v.push(...m.value.split("").map(k=>({type:c,value:parseInt(k),key:l(c),originalIndex:y++})));break;default:(w||P?g:f).push({type:c,value:m.value,key:l(c),originalIndex:y++})}}const x=[];for(let m=h.length-1;m>=0;m--){const c=l(h[m].type);x.unshift({...h[m],key:c,originalIndex:m})}return{pre:f,integer:x,fraction:v,post:g,formatted:p}}const[ne,oe]=s.createContext("SectionContext");function Z(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function L(n){const{width:t,fontSize:o}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(o)}em`}const S="var(--mask-height, 0.15em)",N="var(--mask-width, 0.5em)",b=`calc(${N} / var(--invert-x, 1))`,z="#000 0, transparent 71%",ie=`linear-gradient(to right, transparent 0, #000 ${b}, #000 calc(100% - ${b}), transparent),linear-gradient(to bottom, transparent 0, #000 ${S}, #000 calc(100% - ${S}), transparent 100%),radial-gradient(at bottom right, ${z}),radial-gradient(at bottom left, ${z}), radial-gradient(at top left, ${z}), radial-gradient(at top right, ${z})`,re=`100% calc(100% - ${S} * 2),calc(100% - ${b} * 2) 100%,${b} ${S},${b} ${S},${b} ${S},${b} ${S}`;s.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:o})=>o.x.scale*t.x}});const D={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function q(n){const t=e.ref();function o(r){t.value=r==null?void 0:r.$el}e.watch(()=>n.isPresent,r=>{var a;t.value&&((a=s.mountedStates.get(t.value))==null||a.setActive("exit",!r))});function i(r){var a;r.detail.isExit&&!n.isPresent&&((a=n.onRemove)==null||a.call(n,n.partKey))}return{root:t,getRoot:o,handleComplete:i}}const ae=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{}},setup(n){const t=n,{justify:o}=ne(),{getRoot:i,handleComplete:r}=q(t);return(a,d)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),layout:"position","data-state":a.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(o),padding:`calc(${e.unref(S)}/2) 0`,position:"relative",pointerEvents:a.isPresent?void 0:"none"}),"aria-hidden":!a.isPresent,onMotioncomplete:e.unref(r)},{default:e.withCtx(()=>[e.createVNode(e.unref(s.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(o),initial:!1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(s.motion).span,{key:a.value,layout:e.unref(o)==="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(a.value),1)]),_:1},8,["layout"]))]),_:1},8,["anchor-x"])]),_:1},8,["data-state","style","aria-hidden","onMotioncomplete"]))}}),J=new WeakMap,se=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{}},setup(n){const t=n,o=t.initialValue??t.value,i=Z(),r=s.useMotionConfig(),a=e.ref(),d=e.ref(Array(10).fill(null)),f=e.ref(),{getRoot:h,handleComplete:v,root:g}=q(t);let u=o;const l=e.ref(o);e.watch([()=>t.value,()=>t.isPresent],([y,x])=>{if(!x)return l.value=0;if(i.current)return e.nextTick(()=>{l.value=y});l.value=y},{immediate:!0});function p(y){var k;if(!a.value||y===u)return;const x=a.value.getBoundingClientRect(),m=(k=g.value)==null?void 0:k.getBoundingClientRect(),c=x.height*(y-u)+(x.top-(m?m.top||0:x.top));s.animate(a.value,{y:[c,0]},r.value.transition)}function w(y){if(i.current&&o===y||!d.value[y])return;const x=L(d.value[y]);g.value&&J.set(g.value,x),f.value=x}e.watch(l,y=>{w(y)},{immediate:!0,flush:"post"}),e.watch(l,(y,x,m)=>{p(y),m(()=>{u=y})},{immediate:!0,flush:"pre"});function P(y){return()=>e.createVNode("span",{key:y,style:{display:"inline-block",padding:`calc(${S}/2) 0`}},[y])}return(y,x)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(h),layout:"position","data-state":y.isPresent?void 0:"exiting","data-key":y.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:f.value,pointerEvents:y.isPresent?void 0:"none"}),"aria-hidden":!y.isPresent,onMotioncomplete:e.unref(v)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:a,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[l.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(D),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(m-1)),{key:m-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value)))),l.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(D),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value+m)),{key:l.value+m}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),E=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{}},setup(n){const t=n,o=e.ref(),i=s.useDomRef(),r=e.ref(),a=Z();e.watch(()=>t.parts,v=>{const g=new Map(v.map(l=>[l.key,{...l,isPresent:!0}]));f=[...f.filter(l=>!g.get(l.key)).map(l=>({...l,isPresent:!1})),...v].sort((l,p)=>d.value==="right"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?-1:1:d.value==="left"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?1:-1:l.originalIndex-p.originalIndex)},{flush:"pre"}),e.watch(()=>t.parts.map(v=>v.value).join(""),(v,g)=>{if(!r.value)return;if(a.current){i.value&&(i.value.style.width=L(r.value));return}const u=Array.from(r.value.children).map(p=>{if(!(p instanceof HTMLElement))return;if(p.dataset.state==="exiting"){const y=p.nextSibling;return p.remove(),()=>{r.value&&r.value.insertBefore(p,y)}}const w=J.get(p);if(!w)return;const P=p.style.width;return p.style.width=w,()=>{p.style.width=P}});function l(){const p=L(r.value);o.value=p}+v>+(g||0)?s.frame.read(l):l();for(let p=u.length-1;p>=0;p--){const w=u[p];w&&w()}},{immediate:!0,flush:"post"});const d=e.toRef(t,"justify");oe({justify:d});let f=t.parts;function h(v){f=f.filter(g=>g.key!==v)}return(v,g)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),class:e.normalizeClass(`number-section-${v.name}`),style:e.normalizeStyle({...v.style,display:"inline-flex",justifyContent:d.value,width:o.value}),layout:"position"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:r,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[g[0]||(g[0]=e.createTextVNode(" ")),e.createVNode(e.unref(s.AnimatePresence),{mode:v.mode,"anchor-x":d.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(f),u=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:u.key},[u.type==="integer"||u.type==="fraction"?(e.openBlock(),e.createBlock(se,{key:u.key,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,"initial-value":e.unref(a).current?void 0:0,onRemove:h},null,8,["part-key","value","is-present","initial-value"])):(e.openBlock(),e.createBlock(ae,{key:u.type==="literal"?`${u.key}:${u.value}`:u.key,type:u.type,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,onRemove:h},null,8,["type","part-key","value","is-present"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style"]))}}),ue=e.defineComponent({__name:"Mask",setup(n){return(t,o)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{layout:"","aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(N)})`,padding:`calc(${e.unref(S)}/2) ${e.unref(N)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(ie),webkitMaskSize:e.unref(re),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"]))}}),le=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{}},setup(n){const t={opacity:{duration:1,ease:s.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},o=n,i=e.computed(()=>{const f=o.value;return te(f,{locales:o.locales,format:o.format},o.prefix,o.suffix)}),r=s.useMotionConfig(),a=e.computed(()=>o.transition??r.value.transition??t);function d(){const{format:f,prefix:h,suffix:v,locales:g,value:u,...l}=o;return l}return(f,h)=>(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:a.value},{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,e.mergeProps({...f.$attrs,...d()},{layout:"",style:{lineHeight:"1",...f.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,{layout:"","aria-label":i.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode(E,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:i.value.pre,name:"pre"},null,8,["style","parts"]),e.createVNode(ue,null,{default:e.withCtx(()=>[e.createVNode(E,{justify:"right",parts:i.value.integer,name:"integer",mode:"popLayout"},null,8,["parts"]),e.createVNode(E,{layout:"position",parts:i.value.fraction,name:"fraction",mode:"popLayout"},null,8,["parts"])]),_:1}),e.createVNode(E,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:i.value.post,name:"post"},null,8,["style","parts"])]),_:1},8,["aria-label"])]),_:1},16,["style"])]),_:1},8,["transition"])]),_:1}))}}),ce=le;function fe(){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 de(n){e.watch(n,(t,o,i)=>{const r=t?fe():s.noop;return i(()=>{r()})},{immediate:!0,flush:"post"})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let
|
|
9
|
+
`,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function de(n){e.watch(n,(t,o,i)=>{const r=t?fe():s.noop;return i(()=>{r()})},{immediate:!0,flush:"post"})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let V,_;function pe(){V=s.motionValue(0),_=s.motionValue(0);let n=0,t=0;function o(){V.set(n),_.set(t)}typeof window<"u"&&window.addEventListener("pointermove",R(i=>{n=i.clientX,t=i.clientY,s.frame.update(o)}))}function j(){return V||pe(),{x:V,y:_}}function me(n,t){return{x:s.useTransform(()=>n.x.get()+t.value.x),y:s.useTransform(()=>n.y.get()+t.value.y)}}function ye(n){return n.closest("[data-cursor]")}function ve(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function ge(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 he(n){let t=ye(n);return t?[t.dataset.cursor,t]:(t=ve(n),t?["pointer",t]:(t=ge(n),t?["text",t]:["default",null]))}let M=null,C={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,zone:null};function we(n){let t=null;if("closest"in n){const o=n.closest("[data-cursor-zone]");o instanceof HTMLElement&&(t=o.dataset.cursorZone||null)}return t}function xe(){if(typeof window>"u")return{onChange:()=>()=>{}};const n=new Set;function t(f){C={...C,...f},n.forEach(h=>h(C))}const o=F(()=>{C.isPressed||t({isPressed:!0})}),i=F(()=>{C.isPressed&&t({isPressed:!1})}),r=R(({target:f})=>{if(!f)return;const[h,v]=he(f);let g=!1;const u={target:v,zone:we(f)};h!==C.type&&(u.type=h,g=!0),u.zone!==C.zone&&(C.zone=u.zone,g=!0);const l=h==="pointer"&&v?v.getBoundingClientRect():null;if(l!==C.targetBoundingBox&&(u.targetBoundingBox=l,g=!0),h==="text"){const{fontSize:p}=window.getComputedStyle(f),w=p?parseInt(p):null;w!==C.fontSize&&(u.fontSize=w,g=!0)}else C.fontSize&&(u.fontSize=null,g=!0);g&&t(u)});function a(){typeof window>"u"||(window.addEventListener("pointerover",r),window.addEventListener("pointerdown",o),window.addEventListener("pointerup",i))}function d(){window.removeEventListener("pointerover",r),window.removeEventListener("pointerdown",o),window.removeEventListener("pointerup",i)}return{onChange:f=>(n.size||a(),n.add(f),()=>{n.delete(f),n.size||d()})}}function ke(){return M||(M=xe()),M}function A(){const n=e.ref({...C});return e.watch(n,()=>ke().onChange(t=>{n.value=t}),{immediate:!0,flush:"post"}),n}let T=null;function Be(){const n=new Set;function t(){n.forEach(a=>a.show())}function o(){n.forEach(a=>a.hide())}function i(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",o)}function r(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",o)}return{on:a=>typeof window>"u"?s.noop:(n.size||i(),n.add(a),()=>{n.delete(a),n.size===0&&r()})}}function Ce(){return T||(T=Be()),T}function Q(n){const t=e.ref(!0);return e.watch(t,()=>Ce().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}const H={x:0,y:0},Se={x:.5,y:.5},Pe={duration:0},be={stiffness:1e3,damping:100},$e={duration:.15,ease:[.38,.12,.29,1]},W={magneticOptions:{morph:!0,padding:5,snap:.8}},X=17,Y=31,K=4,ze=20;function I(n,t,o){const i={width:(o==null?void 0:o.width)??n,height:(o==null?void 0:o.height)??t};return typeof i.width=="number"&&(i.width=`${i.width}px`),typeof i.height=="number"&&(i.height=`${i.height}px`),i}function Ee({type:n,state:t,hasChildren:o,style:i,isMagnetic:r,magneticOptions:a,matchTextSize:d}){const f=r&&t.targetBoundingBox;if(o&&!f)return I("auto","auto",i);const{padding:h,morph:v}=a;switch(n){case"pointer":if(r&&v&&t.targetBoundingBox){const{width:g,height:u}=t.targetBoundingBox;return{width:`${g+h*2}px`,height:`${u+h*2}px`}}return I(Y,Y,i);case"text":return d&&t.fontSize?{width:`${K}px`,height:`${t.fontSize}px`}:I(K,ze,i);default:return I(X,X,i)}}function Ie({x:n,y:t},o){const i=e.ref(n.prev!==void 0||t.prev!==void 0);return e.watch(i,()=>{if(i.value)return;const r=()=>{i.value=!0,o(),a()},a=s.pipe(n.on("change",r),t.on("change",r));return()=>a()},{immediate:!0}),i}function Ve(n,t,o){return s.useTransform(()=>s.mix(n.value.get(),t.get(),o.get()))}function G(n,t,o){const i=s.useSpring(0,{stiffness:600,damping:50}),r=s.useMotionValue(0),a=Ve(n,i,r);return e.watch(()=>o==null?void 0:o.value,(d,f)=>{d?(!f&&!r.isAnimating()?i.jump(d):i.set(d),s.animate(r,t.value||0)):s.animate(r,0)},{immediate:!0,flush:"sync"}),a}function Me(n,t,o,i){const r=G(e.computed(()=>n.value.x),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),a=G(e.computed(()=>n.value.y),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return e.computed(()=>t.value?{x:r,y:a}:n.value)}const Te=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:n})=>n?H:Se},offset:{default:()=>H},spring:{type:[Boolean,Object],default:({follow:n})=>n?be:!1},matchTextSize:{type:Boolean,default:!0},magnetic:{type:[Boolean,Object],default:!1},transition:{},variants:{},style:{},show:{type:Boolean,default:!0}},setup(n){const t=n,{offset:o,magnetic:i}=e.toRefs(t),r=s.useReducedMotion();de(()=>!r.value&&!t.follow);const a=j(),d=me(a,o),f=s.useSpring(d.x,t.spring||void 0),h=s.useSpring(d.y,t.spring||void 0),v=e.computed(()=>typeof t.magnetic=="object"?{...W.magneticOptions,...t.magnetic}:W.magneticOptions);function g(){const c=d.x.on("change",B=>{f.jump(B),c()}),k=d.y.on("change",B=>{h.jump(B),k()})}const u=A(),l=Q(g),p=Me(e.computed(()=>t.spring?{x:f,y:h}:a),e.computed(()=>!!i.value),u,e.computed(()=>v.value&&v.value.snap)),w=e.useSlots(),P=e.computed(()=>{var B,$;const c=($=(B=w.default)==null?void 0:B.call(w))==null?void 0:$.filter(O=>O.type!==Symbol.for("v-cmt"));return Ee({type:u.value.type,state:u.value,hasChildren:!!(c!=null&&c.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:v.value,matchTextSize:t.matchTextSize})}),y=Ie(a,g);function x(c){return(k,B)=>`translate(-${c.x*100}%, -${c.y*100}%) ${B}`}function m(){const{follow:c,center:k,offset:B,spring:$,matchTextSize:O,magnetic:Ne,...ee}=t;return ee}return(c,k)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(y)?(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:e.unref(r)?e.unref(Pe):c.transition||e.unref($e)},{default:e.withCtx(()=>{var B,$;return[e.createVNode(e.unref(s.motion).div,e.mergeProps({layout:"","data-motion-cursor":c.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...c.$attrs,...m()},{variants:{pressed:c.follow?{}:{scale:.9},...c.variants,default:{opacity:1,scale:1,...(B=c.variants)==null?void 0:B.default},exit:{opacity:0,scale:0,...($=c.variants)==null?void 0:$.exit}},animate:["default",e.unref(u).type,e.unref(i)&&e.unref(u).targetBoundingBox?"magnetic":"",!e.unref(l)||!c.show?"exit":e.unref(u).isPressed?"pressed":""],"transform-template":x(c.center),style:{borderRadius:c.follow?0:20,zIndex:c.follow?99998:99999,willChange:"transform",contain:"layout",originX:c.center.x,originY:c.center.y,...c.style,width:P.value.width,height:P.value.height,x:e.unref(p).x,y:e.unref(p).y,top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.AnimatePresence),null,{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3})]),_:3},16,["data-motion-cursor","variants","animate","transform-template","style"])]}),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}});function U(n,t,o){const i=s.useMotionValue(0),r=s.useMotionValue(0),a=s.useMotionValue(0);return e.watch(()=>o==null?void 0:o.value,d=>{if(typeof d=="number"){s.animate(a,1);const f=()=>{r.set(t*(n.get()-d))};return f(),n.on("change",f)}else s.animate(a,0)},{immediate:!0,flush:"post"}),s.useTransform(()=>s.mix(i.get(),r.get(),a.get()))}function Le(n,t=.1){const o=A(),i=j(),r=e.computed(()=>o.value.targetBoundingBox&&o.value.target===n.value),a=U(i.x,t,e.computed(()=>r.value?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),d=U(i.y,t,e.computed(()=>r.value?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return{x:a,y:d}}exports.AnimateNumber=ce;exports.Cursor=Te;exports.useCursorIsInView=Q;exports.useCursorState=A;exports.useMagneticPull=Le;exports.usePointerPosition=j;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LayoutGroup, MotionConfig, MotionProps, Point, SpringOptions, motion } from 'motion-v';
|
|
1
|
+
import { AnimatePresence, LayoutGroup, MotionConfig, MotionProps, Point, SpringOptions, motion } from 'motion-v';
|
|
2
2
|
import { defaultTransition, skipTransition } from './config';
|
|
3
3
|
import { MagneticOptions } from './types';
|
|
4
4
|
type HTMMotionProps = MotionProps<'div'>;
|
|
@@ -15,23 +15,24 @@ export interface CursorProps extends HTMMotionProps {
|
|
|
15
15
|
show?: boolean;
|
|
16
16
|
}
|
|
17
17
|
declare const magnetic: import('vue').Ref<boolean | Partial<MagneticOptions>, boolean | Partial<MagneticOptions>>;
|
|
18
|
-
declare const shouldReduceMotion: import('vue').Ref<boolean
|
|
18
|
+
declare const shouldReduceMotion: import('@vue/reactivity').Ref<boolean>;
|
|
19
19
|
declare const state: import('vue').Ref<import('./hooks/use-cursor-state/types').CursorState, import('./hooks/use-cursor-state/types').CursorState>;
|
|
20
20
|
declare const isInView: import('vue').Ref<boolean, boolean>;
|
|
21
21
|
declare const pointer: import('vue').ComputedRef<import('./hooks/use-offset').MotionPoint>;
|
|
22
22
|
declare const size: import('vue').ComputedRef<{
|
|
23
|
-
width: number | string | import('motion-v
|
|
24
|
-
height: number | string | import('motion-v
|
|
23
|
+
width: number | string | import('motion-v').MotionValue<any>;
|
|
24
|
+
height: number | string | import('motion-v').MotionValue<any>;
|
|
25
25
|
}>;
|
|
26
26
|
declare const pointerHasMoved: import('vue').Ref<boolean, boolean>;
|
|
27
27
|
declare function positionTransform(origin: Point): (_: any, generated: string) => string;
|
|
28
28
|
declare function reset(): any;
|
|
29
29
|
declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
|
|
30
|
-
declare var
|
|
30
|
+
declare var __VLS_22: {};
|
|
31
31
|
type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
|
|
32
|
-
default?: (props: typeof
|
|
32
|
+
default?: (props: typeof __VLS_22) => any;
|
|
33
33
|
}>;
|
|
34
34
|
declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
|
|
35
|
+
AnimatePresence: typeof AnimatePresence;
|
|
35
36
|
LayoutGroup: typeof LayoutGroup;
|
|
36
37
|
MotionConfig: typeof MotionConfig;
|
|
37
38
|
motion: typeof motion;
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { defineComponent as R, toRefs as V, computed as l, useSlots as X, createBlock as
|
|
2
|
-
import { useReducedMotion as
|
|
3
|
-
import { useCursorStyles as
|
|
4
|
-
import { usePointerPosition as
|
|
5
|
-
import { useOffset as
|
|
6
|
-
import { useCursorState as
|
|
7
|
-
import { useCursorIsInView as
|
|
8
|
-
import { defaultFollowSpring as
|
|
9
|
-
import { getCursorSize as
|
|
10
|
-
import { useHasPointerMoved as
|
|
11
|
-
import { useMagneticTarget as
|
|
12
|
-
const
|
|
1
|
+
import { defineComponent as R, toRefs as V, computed as l, useSlots as X, createBlock as z, openBlock as P, Teleport as Y, createCommentVNode as A, unref as t, withCtx as u, createVNode as d, mergeProps as H, renderSlot as L } from "vue";
|
|
2
|
+
import { useReducedMotion as N, useSpring as T, LayoutGroup as E, MotionConfig as F, motion as G, AnimatePresence as q } from "motion-v";
|
|
3
|
+
import { useCursorStyles as D } from "./use-cursor-styles.mjs";
|
|
4
|
+
import { usePointerPosition as J } from "./hooks/use-pointer-position.mjs";
|
|
5
|
+
import { useOffset as K } from "./hooks/use-offset.mjs";
|
|
6
|
+
import { useCursorState as Q } from "./hooks/use-cursor-state/index.mjs";
|
|
7
|
+
import { useCursorIsInView as U } from "./hooks/use-cursor-in-view.mjs";
|
|
8
|
+
import { defaultFollowSpring as W, topLeftPoint as x, centerPoint as Z, defaults as M, skipTransition as _, defaultTransition as ee } from "./config.mjs";
|
|
9
|
+
import { getCursorSize as te } from "./get-cursor-size.mjs";
|
|
10
|
+
import { useHasPointerMoved as oe } from "./hooks/use-has-pointer-moved.mjs";
|
|
11
|
+
import { useMagneticTarget as ne } from "./magnetic/use-magnetic-target.mjs";
|
|
12
|
+
const ye = /* @__PURE__ */ R({
|
|
13
13
|
name: "Cursor",
|
|
14
14
|
inheritAttrs: !1,
|
|
15
15
|
__name: "Cursor",
|
|
16
16
|
props: {
|
|
17
17
|
follow: { type: Boolean, default: !1 },
|
|
18
|
-
center: { default: ({ follow: r }) => r ?
|
|
19
|
-
offset: { default: () =>
|
|
20
|
-
spring: { type: [Boolean, Object], default: ({ follow: r }) => r ?
|
|
18
|
+
center: { default: ({ follow: r }) => r ? x : Z },
|
|
19
|
+
offset: { default: () => x },
|
|
20
|
+
spring: { type: [Boolean, Object], default: ({ follow: r }) => r ? W : !1 },
|
|
21
21
|
matchTextSize: { type: Boolean, default: !0 },
|
|
22
22
|
magnetic: { type: [Boolean, Object], default: !1 },
|
|
23
23
|
transition: {},
|
|
@@ -26,53 +26,53 @@ const ge = /* @__PURE__ */ R({
|
|
|
26
26
|
show: { type: Boolean, default: !0 }
|
|
27
27
|
},
|
|
28
28
|
setup(r) {
|
|
29
|
-
const n = r, { offset: O, magnetic:
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
function
|
|
29
|
+
const n = r, { offset: O, magnetic: g } = V(n), y = N();
|
|
30
|
+
D(() => !y.value && !n.follow);
|
|
31
|
+
const p = J(), f = K(p, O), v = T(f.x, n.spring || void 0), h = T(f.y, n.spring || void 0), m = l(() => typeof n.magnetic == "object" ? { ...M.magneticOptions, ...n.magnetic } : M.magneticOptions);
|
|
32
|
+
function w() {
|
|
33
33
|
const e = f.x.on("change", (o) => {
|
|
34
|
-
|
|
34
|
+
v.jump(o), e();
|
|
35
35
|
}), a = f.y.on("change", (o) => {
|
|
36
|
-
|
|
36
|
+
h.jump(o), a();
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
|
-
const i =
|
|
40
|
-
l(() => n.spring ? { x:
|
|
41
|
-
l(() => !!
|
|
39
|
+
const i = Q(), b = U(w), S = ne(
|
|
40
|
+
l(() => n.spring ? { x: v, y: h } : p),
|
|
41
|
+
l(() => !!g.value),
|
|
42
42
|
i,
|
|
43
|
-
l(() =>
|
|
44
|
-
),
|
|
43
|
+
l(() => m.value && m.value.snap)
|
|
44
|
+
), c = X(), C = l(() => {
|
|
45
45
|
var o, s;
|
|
46
|
-
const e = (s = (o =
|
|
47
|
-
(
|
|
46
|
+
const e = (s = (o = c.default) == null ? void 0 : o.call(c)) == null ? void 0 : s.filter(
|
|
47
|
+
(B) => B.type !== Symbol.for("v-cmt")
|
|
48
48
|
);
|
|
49
|
-
return
|
|
49
|
+
return te({
|
|
50
50
|
type: i.value.type,
|
|
51
51
|
state: i.value,
|
|
52
52
|
hasChildren: !!(e != null && e.length),
|
|
53
53
|
isMagnetic: !!n.magnetic,
|
|
54
54
|
style: n.style,
|
|
55
|
-
magneticOptions:
|
|
55
|
+
magneticOptions: m.value,
|
|
56
56
|
matchTextSize: n.matchTextSize
|
|
57
57
|
});
|
|
58
|
-
}), j =
|
|
58
|
+
}), j = oe(p, w);
|
|
59
59
|
function $(e) {
|
|
60
60
|
return (a, o) => `translate(-${e.x * 100}%, -${e.y * 100}%) ${o}`;
|
|
61
61
|
}
|
|
62
62
|
function k() {
|
|
63
|
-
const { follow: e, center: a, offset: o, spring: s, matchTextSize:
|
|
63
|
+
const { follow: e, center: a, offset: o, spring: s, matchTextSize: B, magnetic: ie, ...I } = n;
|
|
64
64
|
return I;
|
|
65
65
|
}
|
|
66
|
-
return (e, a) => (
|
|
67
|
-
t(j) ? (
|
|
68
|
-
default:
|
|
69
|
-
|
|
70
|
-
transition: t(
|
|
66
|
+
return (e, a) => (P(), z(Y, { to: "body" }, [
|
|
67
|
+
t(j) ? (P(), z(t(E), { key: 0 }, {
|
|
68
|
+
default: u(() => [
|
|
69
|
+
d(t(F), {
|
|
70
|
+
transition: t(y) ? t(_) : e.transition || t(ee)
|
|
71
71
|
}, {
|
|
72
|
-
default:
|
|
72
|
+
default: u(() => {
|
|
73
73
|
var o, s;
|
|
74
74
|
return [
|
|
75
|
-
|
|
75
|
+
d(t(G).div, H({
|
|
76
76
|
layout: "",
|
|
77
77
|
"data-motion-cursor": e.follow ? "follow" : "pointer",
|
|
78
78
|
"data-framer-portal-id": "motion-cursor",
|
|
@@ -95,7 +95,7 @@ const ge = /* @__PURE__ */ R({
|
|
|
95
95
|
animate: [
|
|
96
96
|
"default",
|
|
97
97
|
t(i).type,
|
|
98
|
-
t(
|
|
98
|
+
t(g) && t(i).targetBoundingBox ? "magnetic" : "",
|
|
99
99
|
!t(b) || !e.show ? "exit" : t(i).isPressed ? "pressed" : ""
|
|
100
100
|
],
|
|
101
101
|
"transform-template": $(e.center),
|
|
@@ -107,18 +107,23 @@ const ge = /* @__PURE__ */ R({
|
|
|
107
107
|
originX: e.center.x,
|
|
108
108
|
originY: e.center.y,
|
|
109
109
|
...e.style,
|
|
110
|
-
width:
|
|
111
|
-
height:
|
|
112
|
-
x: t(
|
|
113
|
-
y: t(
|
|
110
|
+
width: C.value.width,
|
|
111
|
+
height: C.value.height,
|
|
112
|
+
x: t(S).x,
|
|
113
|
+
y: t(S).y,
|
|
114
114
|
top: 0,
|
|
115
115
|
left: 0,
|
|
116
116
|
position: "fixed",
|
|
117
117
|
pointerEvents: "none"
|
|
118
118
|
}
|
|
119
119
|
}), {
|
|
120
|
-
default:
|
|
121
|
-
|
|
120
|
+
default: u(() => [
|
|
121
|
+
d(t(q), null, {
|
|
122
|
+
default: u(() => [
|
|
123
|
+
L(e.$slots, "default")
|
|
124
|
+
]),
|
|
125
|
+
_: 3
|
|
126
|
+
})
|
|
122
127
|
]),
|
|
123
128
|
_: 3
|
|
124
129
|
}, 16, ["data-motion-cursor", "variants", "animate", "transform-template", "style"])
|
|
@@ -128,10 +133,10 @@ const ge = /* @__PURE__ */ R({
|
|
|
128
133
|
}, 8, ["transition"])
|
|
129
134
|
]),
|
|
130
135
|
_: 3
|
|
131
|
-
})) :
|
|
136
|
+
})) : A("", !0)
|
|
132
137
|
]));
|
|
133
138
|
}
|
|
134
139
|
});
|
|
135
140
|
export {
|
|
136
|
-
|
|
141
|
+
ye as default
|
|
137
142
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { computed as u } from "vue";
|
|
2
2
|
import { useSnappedValue as g } from "../hooks/use-snapped-value.mjs";
|
|
3
|
-
function
|
|
4
|
-
const
|
|
3
|
+
function v(e, a, o, n) {
|
|
4
|
+
const t = g(
|
|
5
5
|
u(() => e.value.x),
|
|
6
6
|
n,
|
|
7
7
|
u(() => o.value.targetBoundingBox ? o.value.targetBoundingBox.left + o.value.targetBoundingBox.width / 2 : void 0)
|
|
@@ -10,8 +10,8 @@ function d(e, t, o, n) {
|
|
|
10
10
|
n,
|
|
11
11
|
u(() => o.value.targetBoundingBox ? o.value.targetBoundingBox.top + o.value.targetBoundingBox.height / 2 : void 0)
|
|
12
12
|
);
|
|
13
|
-
return u(() =>
|
|
13
|
+
return u(() => a.value ? { x: t, y: i } : e.value);
|
|
14
14
|
}
|
|
15
15
|
export {
|
|
16
|
-
|
|
16
|
+
v as useMagneticTarget
|
|
17
17
|
};
|