motion-plus-vue 1.1.1 → 1.1.2

package/dist/cjs/index.js

@@ -6,4 +6,4 @@
       [data-motion-cursor="pointer"] {
           background-color: #333;
       }
-    `,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()})})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let T,_;function pe(){T=s.motionValue(0),_=s.motionValue(0);let n=0,t=0;function o(){T.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 T||pe(),{x:T,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 ge(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function ve(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=ge(n),t?["pointer",t]:(t=ve(n),t?["text",t]:["default",null]))}let M=null,C={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,theme:null};function we(n){let t=null;if("closest"in n){const o=n.closest("[data-cursor-theme]");o instanceof HTMLElement&&(t=o.dataset.cursorTheme||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,g]=he(f);let v=!1;const u={target:g,theme:we(f)};h!==C.type&&(u.type=h,v=!0),u.theme!==C.theme&&(C.theme=u.theme,v=!0);const l=h==="pointer"&&g?g.getBoundingClientRect():null;if(l!==C.targetBoundingBox&&(u.targetBoundingBox=l,v=!0),h==="text"){const{fontSize:p}=window.getComputedStyle(f),w=p?parseInt(p):null;w!==C.fontSize&&(u.fontSize=w,v=!0)}else C.fontSize&&(u.fontSize=null,v=!0);v&&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 V=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 V||(V=Be()),V}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,Ee=20;function z(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 Ie({type:n,state:t,hasChildren:o,style:i,isMagnetic:r,magneticOptions:a,matchTextSize:d}){const f=r&&t.targetBoundingBox;if(o&&!f)return z("auto","auto",i);const{padding:h,morph:g}=a;switch(n){case"pointer":if(r&&g&&t.targetBoundingBox){const{width:v,height:u}=t.targetBoundingBox;return{width:`${v+h*2}px`,height:`${u+h*2}px`}}return z(Y,Y,i);case"text":return d&&t.fontSize?{width:`${K}px`,height:`${t.fontSize}px`}:z(K,Ee,i);default:return z(X,X,i)}}function ze({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 Te(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=Te(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?{x:r,y:a}:n.value)}const Ve=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),g=e.computed(()=>typeof t.magnetic=="object"?{...W.magneticOptions,...t.magnetic}:W.magneticOptions);function v(){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(v),p=Me(e.computed(()=>t.spring?{x:f,y:h}:a),e.computed(()=>!!i.value),u,e.computed(()=>g.value&&g.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 Ie({type:u.value.type,state:u.value,hasChildren:!!(c!=null&&c.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:g.value,matchTextSize:t.matchTextSize})}),y=ze(a,v);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.renderSlot(c.$slots,"default")]),_: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=Ve;exports.useCursorIsInView=Q;exports.useCursorState=A;exports.useMagneticPull=Le;exports.usePointerPosition=j;
+    `,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})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let T,_;function pe(){T=s.motionValue(0),_=s.motionValue(0);let n=0,t=0;function o(){T.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 T||pe(),{x:T,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 ge(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function ve(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=ge(n),t?["pointer",t]:(t=ve(n),t?["text",t]:["default",null]))}let M=null,C={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,theme:null};function we(n){let t=null;if("closest"in n){const o=n.closest("[data-cursor-theme]");o instanceof HTMLElement&&(t=o.dataset.cursorTheme||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,g]=he(f);let v=!1;const u={target:g,theme:we(f)};h!==C.type&&(u.type=h,v=!0),u.theme!==C.theme&&(C.theme=u.theme,v=!0);const l=h==="pointer"&&g?g.getBoundingClientRect():null;if(l!==C.targetBoundingBox&&(u.targetBoundingBox=l,v=!0),h==="text"){const{fontSize:p}=window.getComputedStyle(f),w=p?parseInt(p):null;w!==C.fontSize&&(u.fontSize=w,v=!0)}else C.fontSize&&(u.fontSize=null,v=!0);v&&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 V=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 V||(V=Be()),V}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,Ee=20;function z(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 Ie({type:n,state:t,hasChildren:o,style:i,isMagnetic:r,magneticOptions:a,matchTextSize:d}){const f=r&&t.targetBoundingBox;if(o&&!f)return z("auto","auto",i);const{padding:h,morph:g}=a;switch(n){case"pointer":if(r&&g&&t.targetBoundingBox){const{width:v,height:u}=t.targetBoundingBox;return{width:`${v+h*2}px`,height:`${u+h*2}px`}}return z(Y,Y,i);case"text":return d&&t.fontSize?{width:`${K}px`,height:`${t.fontSize}px`}:z(K,Ee,i);default:return z(X,X,i)}}function ze({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 Te(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=Te(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?{x:r,y:a}:n.value)}const Ve=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),g=e.computed(()=>typeof t.magnetic=="object"?{...W.magneticOptions,...t.magnetic}:W.magneticOptions);function v(){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(v),p=Me(e.computed(()=>t.spring?{x:f,y:h}:a),e.computed(()=>!!i.value),u,e.computed(()=>g.value&&g.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 Ie({type:u.value.type,state:u.value,hasChildren:!!(c!=null&&c.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:g.value,matchTextSize:t.matchTextSize})}),y=ze(a,v);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.renderSlot(c.$slots,"default")]),_: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=Ve;exports.useCursorIsInView=Q;exports.useCursorState=A;exports.useMagneticPull=Le;exports.usePointerPosition=j;

package/dist/es/components/Cursor/use-cursor-styles.mjs

@@ -1,8 +1,8 @@
 import { noop as r } from "motion-v";
 import { watch as c } from "vue";
 function m() {
-  const o = document.createElement("style");
-  return o.textContent = `
+  const t = document.createElement("style");
+  return t.textContent = `
       * {
           cursor: none !important;
       }
@@ -10,18 +10,20 @@ function m() {
       [data-motion-cursor="pointer"] {
           background-color: #333;
       }
-    `, document.head.appendChild(o), () => {
-    document.head.removeChild(o);
+    `, document.head.appendChild(t), () => {
+    document.head.removeChild(t);
   };
 }
-function s(o) {
-  c(o, (t, u, e) => {
-    const n = t ? m() : r;
-    return e(() => {
+function i(t) {
+  c(t, (e, u, o) => {
+    const n = e ? m() : r;
+    return o(() => {
       n();
     });
+  }, {
+    immediate: !0
   });
 }
 export {
-  s as useCursorStyles
+  i as useCursorStyles
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-plus-vue",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Motion Plus Vue",
   "author": "",
   "license": "ISC",