motion-plus-vue 1.1.3 → 1.1.4
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
|
@@ -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 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,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,g]=he(f);let v=!1;const u={target:g,zone:we(f)};h!==C.type&&(u.type=h,v=!0),u.zone!==C.zone&&(C.zone=u.zone,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 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: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 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?{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),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 Ee({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=Ie(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.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'>;
|
|
@@ -27,11 +27,12 @@ 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
|
};
|