motion-v 0.13.1 → 1.0.0-alpha.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 +1055 -1009
- package/dist/es/components/index.d.ts +2 -0
- package/dist/es/components/lazy-motion/context.d.ts +7 -0
- package/dist/es/components/lazy-motion/context.mjs +6 -0
- package/dist/es/components/lazy-motion/index.d.ts +26 -0
- package/dist/es/components/lazy-motion/index.mjs +36 -0
- package/dist/es/components/motion/index.d.ts +179 -2
- package/dist/es/components/motion/index.mjs +8 -0
- package/dist/es/components/motion/m.d.ts +178 -0
- package/dist/es/components/motion/m.mjs +7 -0
- package/dist/es/components/motion/props.d.ts +227 -0
- package/dist/es/components/motion/props.mjs +93 -0
- package/dist/es/components/motion/{Motion.d.ts → types.d.ts} +12 -9
- package/dist/es/components/motion/use-motion-state.d.ts +790 -0
- package/dist/es/components/motion/use-motion-state.mjs +116 -0
- package/dist/es/components/motion/utils.d.ts +20 -5
- package/dist/es/components/motion/utils.mjs +122 -1
- package/dist/es/components/reorder/Group.vue.mjs +5 -2
- package/dist/es/components/reorder/Item.vue.mjs +5 -2
- package/dist/es/components/reorder/index.d.ts +12 -0
- package/dist/es/features/animation/animation.d.ts +32 -0
- package/dist/es/features/animation/animation.mjs +186 -5
- package/dist/es/features/animation/types.d.ts +17 -0
- package/dist/es/features/dom-animation.d.ts +2 -0
- package/dist/es/features/dom-animation.mjs +19 -0
- package/dist/es/features/dom-max.d.ts +2 -0
- package/dist/es/features/dom-max.mjs +23 -0
- package/dist/es/features/feature-manager.mjs +20 -20
- package/dist/es/features/gestures/drag/VisualElementDragControls.d.ts +1 -1
- package/dist/es/features/gestures/hover/index.d.ts +2 -0
- package/dist/es/features/gestures/hover/index.mjs +13 -2
- package/dist/es/features/gestures/in-view/index.mjs +3 -3
- package/dist/es/features/gestures/index.d.ts +0 -1
- package/dist/es/features/gestures/press/index.mjs +17 -19
- package/dist/es/features/index.d.ts +2 -0
- package/dist/es/index.d.ts +1 -0
- package/dist/es/index.mjs +17 -9
- package/dist/es/state/motion-state.d.ts +8 -6
- package/dist/es/state/motion-state.mjs +13 -45
- package/dist/es/state/style.mjs +2 -2
- package/dist/es/state/transform.d.ts +0 -1
- package/dist/es/state/transform.mjs +0 -1
- package/dist/es/types/state.d.ts +1 -0
- package/dist/nuxt/index.cjs +3 -1
- package/dist/nuxt/index.mjs +3 -1
- package/dist/resolver/index.cjs +3 -1
- package/dist/resolver/index.mjs +3 -1
- package/package.json +1 -1
- package/dist/es/components/motion/Motion.vue.mjs +0 -241
- package/dist/es/components/motion/Motion.vue2.mjs +0 -4
- package/dist/es/components/motion/NameSpace.d.ts +0 -15
- package/dist/es/components/motion/NameSpace.mjs +0 -48
- package/dist/es/components/motion/Primitive.d.ts +0 -57
- package/dist/es/components/motion/Primitive.mjs +0 -45
- package/dist/es/components/motion/Slot.d.ts +0 -5
- package/dist/es/components/motion/Slot.mjs +0 -36
- package/dist/es/components/motion/renderSlotFragments.mjs +0 -13
- package/dist/es/features/gestures/base.d.ts +0 -8
- package/dist/es/state/animate-updates.d.ts +0 -20
- package/dist/es/state/animate-updates.mjs +0 -147
- package/dist/es/utils/noop.d.ts +0 -1
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
import { defineComponent, mergeDefaults, warn, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, ref, openBlock, createBlock, unref, withCtx, renderSlot } from "vue";
|
|
2
|
-
import { injectMotion, injectLayoutGroup, provideMotion } from "../context.mjs";
|
|
3
|
-
import { convertSvgStyleToAttributes, createStyles } from "../../state/style.mjs";
|
|
4
|
-
import { Primitive } from "./Primitive.mjs";
|
|
5
|
-
import { MotionState } from "../../state/motion-state.mjs";
|
|
6
|
-
import { injectAnimatePresence } from "../presence.mjs";
|
|
7
|
-
import { checkMotionIsHidden } from "./utils.mjs";
|
|
8
|
-
import { useMotionConfig } from "../motion-config/context.mjs";
|
|
9
|
-
import { getMotionElement } from "../hooks/use-motion-elm.mjs";
|
|
10
|
-
import { isMotionValue } from "../../utils/motion-value.mjs";
|
|
11
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
12
|
-
...{
|
|
13
|
-
name: "Motion",
|
|
14
|
-
inheritAttrs: false
|
|
15
|
-
},
|
|
16
|
-
__name: "Motion",
|
|
17
|
-
props: /* @__PURE__ */ mergeDefaults({
|
|
18
|
-
as: {},
|
|
19
|
-
asChild: { type: Boolean },
|
|
20
|
-
hover: {},
|
|
21
|
-
press: {},
|
|
22
|
-
inView: {},
|
|
23
|
-
focus: {},
|
|
24
|
-
whileDrag: {},
|
|
25
|
-
whileHover: {},
|
|
26
|
-
whilePress: {},
|
|
27
|
-
whileInView: {},
|
|
28
|
-
whileFocus: {},
|
|
29
|
-
forwardMotionProps: { type: Boolean },
|
|
30
|
-
custom: {},
|
|
31
|
-
initial: { type: [String, Array, Object, Boolean] },
|
|
32
|
-
animate: {},
|
|
33
|
-
exit: {},
|
|
34
|
-
variants: {},
|
|
35
|
-
inherit: { type: Boolean },
|
|
36
|
-
style: {},
|
|
37
|
-
transformTemplate: { type: Function },
|
|
38
|
-
transition: {},
|
|
39
|
-
layoutGroup: {},
|
|
40
|
-
motionConfig: {},
|
|
41
|
-
onAnimationComplete: { type: Function },
|
|
42
|
-
onUpdate: { type: Function },
|
|
43
|
-
layout: { type: [Boolean, String] },
|
|
44
|
-
layoutId: {},
|
|
45
|
-
layoutScroll: { type: Boolean },
|
|
46
|
-
layoutRoot: { type: Boolean },
|
|
47
|
-
"data-framer-portal-id": {},
|
|
48
|
-
crossfade: { type: Boolean },
|
|
49
|
-
layoutDependency: {},
|
|
50
|
-
onBeforeLayoutMeasure: { type: Function },
|
|
51
|
-
onLayoutMeasure: { type: Function },
|
|
52
|
-
onLayoutAnimationStart: { type: Function },
|
|
53
|
-
onLayoutAnimationComplete: { type: Function },
|
|
54
|
-
globalPressTarget: { type: Boolean },
|
|
55
|
-
onPressStart: { type: Function },
|
|
56
|
-
onPress: { type: Function },
|
|
57
|
-
onPressCancel: { type: Function },
|
|
58
|
-
onHoverStart: { type: Function },
|
|
59
|
-
onHoverEnd: { type: Function },
|
|
60
|
-
inViewOptions: {},
|
|
61
|
-
onViewportEnter: { type: Function },
|
|
62
|
-
onViewportLeave: { type: Function },
|
|
63
|
-
drag: { type: [Boolean, String] },
|
|
64
|
-
dragSnapToOrigin: { type: Boolean },
|
|
65
|
-
dragDirectionLock: { type: Boolean },
|
|
66
|
-
dragPropagation: { type: Boolean },
|
|
67
|
-
dragConstraints: { type: [Boolean, Object] },
|
|
68
|
-
dragElastic: { type: [Boolean, Number, Object] },
|
|
69
|
-
dragMomentum: { type: Boolean },
|
|
70
|
-
dragTransition: {},
|
|
71
|
-
dragListener: { type: Boolean },
|
|
72
|
-
dragControls: {},
|
|
73
|
-
onDragStart: { type: Function },
|
|
74
|
-
onDragEnd: { type: Function },
|
|
75
|
-
onDrag: { type: Function },
|
|
76
|
-
onDirectionLock: { type: Function },
|
|
77
|
-
onDragTransitionEnd: { type: Function },
|
|
78
|
-
onMeasureDragConstraints: { type: Function },
|
|
79
|
-
onPanSessionStart: { type: Function },
|
|
80
|
-
onPanStart: { type: Function },
|
|
81
|
-
onPan: { type: Function },
|
|
82
|
-
onPanEnd: { type: Function },
|
|
83
|
-
onFocus: { type: Function },
|
|
84
|
-
onBlur: { type: Function }
|
|
85
|
-
}, {
|
|
86
|
-
as: "div",
|
|
87
|
-
asChild: false,
|
|
88
|
-
initial: void 0,
|
|
89
|
-
animate: void 0,
|
|
90
|
-
hover: void 0,
|
|
91
|
-
inView: void 0,
|
|
92
|
-
layout: false,
|
|
93
|
-
layoutId: void 0,
|
|
94
|
-
layoutScroll: false,
|
|
95
|
-
layoutRoot: false,
|
|
96
|
-
dragListener: true,
|
|
97
|
-
dragElastic: 0.5,
|
|
98
|
-
dragMomentum: true,
|
|
99
|
-
whileDrag: void 0,
|
|
100
|
-
crossfade: true,
|
|
101
|
-
whileHover: ({ hover }) => {
|
|
102
|
-
if (process.env.NODE_ENV === "development" && hover) {
|
|
103
|
-
warn("hover is deprecated. Use whileHover instead.");
|
|
104
|
-
}
|
|
105
|
-
return hover;
|
|
106
|
-
},
|
|
107
|
-
whilePress: ({ press }) => {
|
|
108
|
-
if (process.env.NODE_ENV === "development" && press) {
|
|
109
|
-
warn("press is deprecated. Use whilePress instead.");
|
|
110
|
-
}
|
|
111
|
-
return press;
|
|
112
|
-
},
|
|
113
|
-
whileInView: ({ inView }) => {
|
|
114
|
-
if (process.env.NODE_ENV === "development" && inView) {
|
|
115
|
-
warn("inView is deprecated. Use whileInView instead.");
|
|
116
|
-
}
|
|
117
|
-
return inView;
|
|
118
|
-
},
|
|
119
|
-
whileFocus: ({ focus }) => {
|
|
120
|
-
if (process.env.NODE_ENV === "development" && focus) {
|
|
121
|
-
warn("focus is deprecated. Use whileFocus instead.");
|
|
122
|
-
}
|
|
123
|
-
return focus;
|
|
124
|
-
}
|
|
125
|
-
}),
|
|
126
|
-
setup(__props) {
|
|
127
|
-
const props = __props;
|
|
128
|
-
const animatePresenceContext = injectAnimatePresence({});
|
|
129
|
-
const parentState = injectMotion(null);
|
|
130
|
-
const attrs = useAttrs();
|
|
131
|
-
const layoutGroup = injectLayoutGroup({});
|
|
132
|
-
const config = useMotionConfig();
|
|
133
|
-
function getLayoutId() {
|
|
134
|
-
if (layoutGroup.id && props.layoutId)
|
|
135
|
-
return `${layoutGroup.id}-${props.layoutId}`;
|
|
136
|
-
return props.layoutId || void 0;
|
|
137
|
-
}
|
|
138
|
-
function getProps() {
|
|
139
|
-
return {
|
|
140
|
-
...props,
|
|
141
|
-
layoutId: getLayoutId(),
|
|
142
|
-
transition: props.transition ?? config.value.transition,
|
|
143
|
-
layoutGroup,
|
|
144
|
-
motionConfig: config.value,
|
|
145
|
-
inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
|
|
146
|
-
animatePresenceContext,
|
|
147
|
-
initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
|
|
148
|
-
};
|
|
149
|
-
}
|
|
150
|
-
function getMotionProps() {
|
|
151
|
-
return {
|
|
152
|
-
...attrs,
|
|
153
|
-
...getProps()
|
|
154
|
-
};
|
|
155
|
-
}
|
|
156
|
-
const state = new MotionState(
|
|
157
|
-
getMotionProps(),
|
|
158
|
-
parentState
|
|
159
|
-
);
|
|
160
|
-
provideMotion(state);
|
|
161
|
-
const instance = getCurrentInstance().proxy;
|
|
162
|
-
onBeforeMount(() => {
|
|
163
|
-
state.beforeMount();
|
|
164
|
-
});
|
|
165
|
-
onMounted(() => {
|
|
166
|
-
state.mount(getMotionElement(instance.$el), getMotionProps(), checkMotionIsHidden(instance));
|
|
167
|
-
});
|
|
168
|
-
onBeforeUnmount(() => state.beforeUnmount());
|
|
169
|
-
onUnmounted(() => {
|
|
170
|
-
const el = getMotionElement(instance.$el);
|
|
171
|
-
if (!(el == null ? void 0 : el.isConnected)) {
|
|
172
|
-
state.unmount();
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
onBeforeUpdate(() => {
|
|
176
|
-
state.beforeUpdate();
|
|
177
|
-
});
|
|
178
|
-
onUpdated(() => {
|
|
179
|
-
state.update(getMotionProps());
|
|
180
|
-
});
|
|
181
|
-
function getAttrs() {
|
|
182
|
-
const isSVG = state.visualElement.type === "svg";
|
|
183
|
-
const attrsProps = { ...attrs };
|
|
184
|
-
Object.keys(attrs).forEach((key) => {
|
|
185
|
-
if (isMotionValue(attrs[key]))
|
|
186
|
-
attrsProps[key] = attrs[key].get();
|
|
187
|
-
});
|
|
188
|
-
let styleProps = {
|
|
189
|
-
...props.style,
|
|
190
|
-
...isSVG ? {} : state.visualElement.latestValues
|
|
191
|
-
};
|
|
192
|
-
if (isSVG) {
|
|
193
|
-
const { attributes, style } = convertSvgStyleToAttributes({
|
|
194
|
-
...state.isMounted() ? state.target : state.baseTarget,
|
|
195
|
-
...styleProps
|
|
196
|
-
});
|
|
197
|
-
Object.assign(attrsProps, attributes);
|
|
198
|
-
styleProps = style;
|
|
199
|
-
}
|
|
200
|
-
if (props.drag && props.dragListener !== false) {
|
|
201
|
-
Object.assign(styleProps, {
|
|
202
|
-
userSelect: "none",
|
|
203
|
-
WebkitUserSelect: "none",
|
|
204
|
-
WebkitTouchCallout: "none",
|
|
205
|
-
touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
|
|
206
|
-
});
|
|
207
|
-
}
|
|
208
|
-
attrsProps.style = createStyles(styleProps);
|
|
209
|
-
return attrsProps;
|
|
210
|
-
}
|
|
211
|
-
const PrimitiveRef = ref();
|
|
212
|
-
function onMotionComplete(e) {
|
|
213
|
-
var _a, _b;
|
|
214
|
-
if (props.asChild) {
|
|
215
|
-
(_a = PrimitiveRef.value) == null ? void 0 : _a.$forceUpdate();
|
|
216
|
-
}
|
|
217
|
-
(_b = attrs.onMotioncomplete) == null ? void 0 : _b.call(attrs, e);
|
|
218
|
-
}
|
|
219
|
-
return (_ctx, _cache) => {
|
|
220
|
-
var _a;
|
|
221
|
-
return openBlock(), createBlock(unref(Primitive), {
|
|
222
|
-
ref_key: "PrimitiveRef",
|
|
223
|
-
ref: PrimitiveRef,
|
|
224
|
-
"get-props": getProps,
|
|
225
|
-
"get-attrs": getAttrs,
|
|
226
|
-
as: _ctx.as,
|
|
227
|
-
"as-child": _ctx.asChild,
|
|
228
|
-
"data-motion-group": ((_a = unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,
|
|
229
|
-
onMotioncomplete: onMotionComplete
|
|
230
|
-
}, {
|
|
231
|
-
default: withCtx(() => [
|
|
232
|
-
renderSlot(_ctx.$slots, "default")
|
|
233
|
-
]),
|
|
234
|
-
_: 3
|
|
235
|
-
}, 8, ["as", "as-child", "data-motion-group"]);
|
|
236
|
-
};
|
|
237
|
-
}
|
|
238
|
-
});
|
|
239
|
-
export {
|
|
240
|
-
_sfc_main as default
|
|
241
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { DefineComponent, IntrinsicElementAttributes } from 'vue';
|
|
2
|
-
import { MotionProps } from './Motion';
|
|
3
|
-
import { ComponentProps, MotionHTMLAttributes } from '../../types';
|
|
4
|
-
type MotionComponentProps = {
|
|
5
|
-
create: <T extends DefineComponent>(T: any, options?: {
|
|
6
|
-
forwardMotionProps?: boolean;
|
|
7
|
-
}) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>;
|
|
8
|
-
};
|
|
9
|
-
type MotionNameSpace = {
|
|
10
|
-
[K in keyof IntrinsicElementAttributes]: DefineComponent<MotionProps<K, unknown> & MotionHTMLAttributes<K>>;
|
|
11
|
-
} & {
|
|
12
|
-
create: MotionComponentProps['create'];
|
|
13
|
-
};
|
|
14
|
-
export declare const motion: MotionNameSpace;
|
|
15
|
-
export {};
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { defineComponent, h } from "vue";
|
|
2
|
-
import _sfc_main from "./Motion.vue.mjs";
|
|
3
|
-
const componentCache = /* @__PURE__ */ new Map();
|
|
4
|
-
const motion = new Proxy(_sfc_main, {
|
|
5
|
-
get(target, prop) {
|
|
6
|
-
if (typeof prop === "symbol")
|
|
7
|
-
return target[prop];
|
|
8
|
-
let motionComponent = componentCache.get(prop);
|
|
9
|
-
if (prop === "create") {
|
|
10
|
-
return (component, { forwardMotionProps = false } = {}) => {
|
|
11
|
-
return defineComponent({
|
|
12
|
-
inheritAttrs: false,
|
|
13
|
-
name: `motion.${component.$name}`,
|
|
14
|
-
setup(_, { attrs, slots }) {
|
|
15
|
-
return () => {
|
|
16
|
-
return h(_sfc_main, {
|
|
17
|
-
...attrs,
|
|
18
|
-
forwardMotionProps,
|
|
19
|
-
as: component,
|
|
20
|
-
asChild: false
|
|
21
|
-
}, slots);
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
if (!motionComponent) {
|
|
28
|
-
motionComponent = defineComponent({
|
|
29
|
-
inheritAttrs: false,
|
|
30
|
-
name: `motion.${prop}`,
|
|
31
|
-
setup(_, { attrs, slots }) {
|
|
32
|
-
return () => {
|
|
33
|
-
return h(_sfc_main, {
|
|
34
|
-
...attrs,
|
|
35
|
-
as: prop,
|
|
36
|
-
asChild: false
|
|
37
|
-
}, slots);
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
componentCache.set(prop, motionComponent);
|
|
42
|
-
}
|
|
43
|
-
return motionComponent;
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
export {
|
|
47
|
-
motion
|
|
48
|
-
};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { Component, PropType } from 'vue';
|
|
2
|
-
import { AsTag } from '../../types';
|
|
3
|
-
export interface PrimitiveProps {
|
|
4
|
-
/**
|
|
5
|
-
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
6
|
-
*
|
|
7
|
-
* Read our [Composition](https://www.radix-vue.com/guides/composition.html) guide for more details.
|
|
8
|
-
*/
|
|
9
|
-
asChild?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
* The element or component this component should render as. Can be overwrite by `asChild`
|
|
12
|
-
* @defaultValue "div"
|
|
13
|
-
*/
|
|
14
|
-
as?: AsTag | Component;
|
|
15
|
-
}
|
|
16
|
-
export declare const Primitive: import('vue').DefineComponent<{
|
|
17
|
-
asChild: {
|
|
18
|
-
type: BooleanConstructor;
|
|
19
|
-
default: boolean;
|
|
20
|
-
};
|
|
21
|
-
as: {
|
|
22
|
-
type: PropType<AsTag>;
|
|
23
|
-
default: string;
|
|
24
|
-
};
|
|
25
|
-
getProps: {
|
|
26
|
-
type: FunctionConstructor;
|
|
27
|
-
default: () => {};
|
|
28
|
-
};
|
|
29
|
-
getAttrs: {
|
|
30
|
-
type: FunctionConstructor;
|
|
31
|
-
default: () => {};
|
|
32
|
-
};
|
|
33
|
-
}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
34
|
-
[key: string]: any;
|
|
35
|
-
}>, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
36
|
-
asChild: {
|
|
37
|
-
type: BooleanConstructor;
|
|
38
|
-
default: boolean;
|
|
39
|
-
};
|
|
40
|
-
as: {
|
|
41
|
-
type: PropType<AsTag>;
|
|
42
|
-
default: string;
|
|
43
|
-
};
|
|
44
|
-
getProps: {
|
|
45
|
-
type: FunctionConstructor;
|
|
46
|
-
default: () => {};
|
|
47
|
-
};
|
|
48
|
-
getAttrs: {
|
|
49
|
-
type: FunctionConstructor;
|
|
50
|
-
default: () => {};
|
|
51
|
-
};
|
|
52
|
-
}>>, {
|
|
53
|
-
as: AsTag;
|
|
54
|
-
asChild: boolean;
|
|
55
|
-
getProps: Function;
|
|
56
|
-
getAttrs: Function;
|
|
57
|
-
}, {}>;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { defineComponent, h } from "vue";
|
|
2
|
-
import { Slot } from "./Slot.mjs";
|
|
3
|
-
const Primitive = defineComponent({
|
|
4
|
-
name: "Primitive",
|
|
5
|
-
inheritAttrs: false,
|
|
6
|
-
props: {
|
|
7
|
-
asChild: {
|
|
8
|
-
type: Boolean,
|
|
9
|
-
default: false
|
|
10
|
-
},
|
|
11
|
-
as: {
|
|
12
|
-
type: [String, Object],
|
|
13
|
-
default: "div"
|
|
14
|
-
},
|
|
15
|
-
getProps: {
|
|
16
|
-
type: Function,
|
|
17
|
-
default: () => ({})
|
|
18
|
-
},
|
|
19
|
-
getAttrs: {
|
|
20
|
-
type: Function,
|
|
21
|
-
default: () => ({})
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
setup(props, { attrs, slots }) {
|
|
25
|
-
const asTag = props.asChild ? "template" : props.as;
|
|
26
|
-
const SELF_CLOSING_TAGS = ["area", "img", "input"];
|
|
27
|
-
return () => {
|
|
28
|
-
const motionProps = props.getProps();
|
|
29
|
-
const motionAttrs = props.getAttrs();
|
|
30
|
-
let allAttrs = { ...motionAttrs, ...attrs };
|
|
31
|
-
if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
|
|
32
|
-
return h(asTag, allAttrs);
|
|
33
|
-
if (asTag !== "template") {
|
|
34
|
-
if (motionProps.forwardMotionProps) {
|
|
35
|
-
allAttrs = { ...motionProps, ...allAttrs };
|
|
36
|
-
}
|
|
37
|
-
return h(props.as, allAttrs, { default: slots.default });
|
|
38
|
-
}
|
|
39
|
-
return h(Slot, allAttrs, { default: slots.default });
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
export {
|
|
44
|
-
Primitive
|
|
45
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export declare const Slot: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
2
|
-
[key: string]: any;
|
|
3
|
-
}> | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
4
|
-
[key: string]: any;
|
|
5
|
-
}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { defineComponent, Comment, mergeProps, cloneVNode } from "vue";
|
|
2
|
-
import { renderSlotFragments } from "./renderSlotFragments.mjs";
|
|
3
|
-
const Slot = defineComponent({
|
|
4
|
-
name: "PrimitiveSlot",
|
|
5
|
-
inheritAttrs: false,
|
|
6
|
-
setup(_, { attrs, slots }) {
|
|
7
|
-
return () => {
|
|
8
|
-
var _a, _b;
|
|
9
|
-
if (!slots.default)
|
|
10
|
-
return null;
|
|
11
|
-
const childrens = renderSlotFragments(slots.default());
|
|
12
|
-
const firstNonCommentChildrenIndex = childrens.findIndex((child) => child.type !== Comment);
|
|
13
|
-
if (firstNonCommentChildrenIndex === -1)
|
|
14
|
-
return childrens;
|
|
15
|
-
const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
|
|
16
|
-
(_a = firstNonCommentChildren.props) == null ? true : delete _a.ref;
|
|
17
|
-
const mergedProps = firstNonCommentChildren.props ? mergeProps(attrs, firstNonCommentChildren.props) : attrs;
|
|
18
|
-
if (attrs.class && ((_b = firstNonCommentChildren.props) == null ? void 0 : _b.class))
|
|
19
|
-
delete firstNonCommentChildren.props.class;
|
|
20
|
-
const cloned = cloneVNode(firstNonCommentChildren, mergedProps);
|
|
21
|
-
for (const prop in mergedProps) {
|
|
22
|
-
if (prop.startsWith("on")) {
|
|
23
|
-
cloned.props || (cloned.props = {});
|
|
24
|
-
cloned.props[prop] = mergedProps[prop];
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
if (childrens.length === 1)
|
|
28
|
-
return cloned;
|
|
29
|
-
childrens[firstNonCommentChildrenIndex] = cloned;
|
|
30
|
-
return childrens;
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
export {
|
|
35
|
-
Slot
|
|
36
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Fragment } from "vue";
|
|
2
|
-
function renderSlotFragments(children) {
|
|
3
|
-
if (!children)
|
|
4
|
-
return [];
|
|
5
|
-
return children.flatMap((child) => {
|
|
6
|
-
if (child.type === Fragment)
|
|
7
|
-
return renderSlotFragments(child.children);
|
|
8
|
-
return [child];
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
export {
|
|
12
|
-
renderSlotFragments
|
|
13
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Feature } from '../feature';
|
|
2
|
-
export declare abstract class BaseGesture extends Feature {
|
|
3
|
-
abstract isActive(): boolean;
|
|
4
|
-
removeGestureSubscriptions?: VoidFunction;
|
|
5
|
-
subscribeEvents?: () => VoidFunction;
|
|
6
|
-
protected updateGestureSubscriptions(): void;
|
|
7
|
-
unmount(): void;
|
|
8
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { $Transition, Options } from '../types';
|
|
2
|
-
import { MotionState } from './motion-state';
|
|
3
|
-
declare const STATE_TYPES: readonly ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
|
|
4
|
-
export type StateType = typeof STATE_TYPES[number];
|
|
5
|
-
/**
|
|
6
|
-
* 核心动画更新函数,处理所有动画状态变化和执行
|
|
7
|
-
* @param controlActiveState - 需要更新的动画状态
|
|
8
|
-
* @param controlDelay - 动画延迟时间
|
|
9
|
-
* @param directAnimate - 直接动画目标值
|
|
10
|
-
* @param directTransition - 直接动画过渡配置
|
|
11
|
-
*/
|
|
12
|
-
export declare function animateUpdates(this: MotionState, { controlActiveState, controlDelay, directAnimate, directTransition, isFallback, isExit, }?: {
|
|
13
|
-
controlActiveState?: Partial<Record<string, boolean>>;
|
|
14
|
-
controlDelay?: number;
|
|
15
|
-
directAnimate?: Options['animate'];
|
|
16
|
-
directTransition?: $Transition;
|
|
17
|
-
isFallback?: boolean;
|
|
18
|
-
isExit?: boolean;
|
|
19
|
-
}): any;
|
|
20
|
-
export {};
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
import { resolveVariant, hasChanged } from "./utils.mjs";
|
|
2
|
-
import { style } from "./style.mjs";
|
|
3
|
-
import { transformResetValue } from "./transform.mjs";
|
|
4
|
-
import { motionEvent } from "./event.mjs";
|
|
5
|
-
import { isDef } from "@vueuse/core";
|
|
6
|
-
import { isAnimationControls } from "../animation/utils.mjs";
|
|
7
|
-
import { animate } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animate/index.mjs";
|
|
8
|
-
import { noop } from "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/noop.mjs";
|
|
9
|
-
import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
|
|
10
|
-
const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
|
|
11
|
-
function animateUpdates({
|
|
12
|
-
controlActiveState = void 0,
|
|
13
|
-
controlDelay = 0,
|
|
14
|
-
directAnimate,
|
|
15
|
-
directTransition,
|
|
16
|
-
isFallback = false,
|
|
17
|
-
isExit = false
|
|
18
|
-
} = {}) {
|
|
19
|
-
const prevTarget = this.target;
|
|
20
|
-
this.target = { ...this.baseTarget };
|
|
21
|
-
let animationOptions = {};
|
|
22
|
-
const transition = { ...this.options.transition };
|
|
23
|
-
if (directAnimate)
|
|
24
|
-
animationOptions = resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
|
|
25
|
-
else
|
|
26
|
-
animationOptions = resolveStateAnimation.call(this, controlActiveState);
|
|
27
|
-
const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
|
|
28
|
-
const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, animationOptions, this.activeStates, isFallback);
|
|
29
|
-
return executeAnimations.call(this, {
|
|
30
|
-
factories,
|
|
31
|
-
getChildAnimations,
|
|
32
|
-
childAnimations,
|
|
33
|
-
transition,
|
|
34
|
-
controlActiveState,
|
|
35
|
-
isExit
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
function resolveDirectAnimation(directAnimate, directTransition) {
|
|
39
|
-
var _a;
|
|
40
|
-
const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom || ((_a = this.options.animatePresenceContext) == null ? void 0 : _a.custom));
|
|
41
|
-
if (!variant)
|
|
42
|
-
return {};
|
|
43
|
-
const transition = variant.transition || directTransition || this.options.transition || {};
|
|
44
|
-
Object.entries(variant).forEach(([key, value]) => {
|
|
45
|
-
if (key === "transition")
|
|
46
|
-
return;
|
|
47
|
-
this.target[key] = value;
|
|
48
|
-
});
|
|
49
|
-
return transition;
|
|
50
|
-
}
|
|
51
|
-
function resolveStateAnimation(controlActiveState) {
|
|
52
|
-
if (controlActiveState)
|
|
53
|
-
this.activeStates = { ...this.activeStates, ...controlActiveState };
|
|
54
|
-
let variantTransition = this.options.transition;
|
|
55
|
-
let variant = {};
|
|
56
|
-
STATE_TYPES.forEach((name) => {
|
|
57
|
-
if (!this.activeStates[name] || isAnimationControls(this.options[name]))
|
|
58
|
-
return;
|
|
59
|
-
const definition = this.options[name];
|
|
60
|
-
let resolvedVariant = isDef(definition) ? resolveVariant(definition, this.options.variants, this.options.custom) : void 0;
|
|
61
|
-
if (this.visualElement.isVariantNode) {
|
|
62
|
-
const controlVariant = resolveVariant(this.context[name], this.options.variants, this.options.custom);
|
|
63
|
-
resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, resolvedVariant) : variant;
|
|
64
|
-
}
|
|
65
|
-
if (!resolvedVariant)
|
|
66
|
-
return;
|
|
67
|
-
if (name !== "initial")
|
|
68
|
-
variantTransition = resolvedVariant.transition || this.options.transition || {};
|
|
69
|
-
variant = Object.assign(variant, resolvedVariant);
|
|
70
|
-
});
|
|
71
|
-
Object.entries(variant).forEach(([key, value]) => {
|
|
72
|
-
if (key === "transition")
|
|
73
|
-
return;
|
|
74
|
-
this.target[key] = value;
|
|
75
|
-
});
|
|
76
|
-
return variantTransition;
|
|
77
|
-
}
|
|
78
|
-
function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
|
|
79
|
-
const factories = [];
|
|
80
|
-
Object.keys(this.target).forEach((key) => {
|
|
81
|
-
var _a;
|
|
82
|
-
if (!hasChanged(prevTarget[key], this.target[key]))
|
|
83
|
-
return;
|
|
84
|
-
(_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
|
|
85
|
-
const keyValue = this.target[key] === "none" && isDef(transformResetValue[key]) ? transformResetValue[key] : this.target[key];
|
|
86
|
-
factories.push(() => {
|
|
87
|
-
var _a2;
|
|
88
|
-
return animate(
|
|
89
|
-
this.element,
|
|
90
|
-
{ [key]: keyValue },
|
|
91
|
-
{
|
|
92
|
-
...(animationOptions == null ? void 0 : animationOptions[key]) || animationOptions,
|
|
93
|
-
delay: (((_a2 = animationOptions == null ? void 0 : animationOptions[key]) == null ? void 0 : _a2.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
|
|
94
|
-
}
|
|
95
|
-
);
|
|
96
|
-
});
|
|
97
|
-
});
|
|
98
|
-
return factories;
|
|
99
|
-
}
|
|
100
|
-
function setupChildAnimations(transition, controlActiveState, isFallback) {
|
|
101
|
-
var _a;
|
|
102
|
-
if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
|
|
103
|
-
return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
|
|
104
|
-
const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
|
|
105
|
-
const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
|
|
106
|
-
const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
|
|
107
|
-
const childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
|
|
108
|
-
const childDelay = delayChildren + generateStaggerDuration(index);
|
|
109
|
-
return child.state.animateUpdates({
|
|
110
|
-
controlActiveState,
|
|
111
|
-
controlDelay: isFallback ? 0 : childDelay
|
|
112
|
-
});
|
|
113
|
-
}).filter(Boolean);
|
|
114
|
-
return {
|
|
115
|
-
getChildAnimations: () => Promise.all(childAnimations.map((animation) => {
|
|
116
|
-
return animation == null ? void 0 : animation();
|
|
117
|
-
})),
|
|
118
|
-
childAnimations
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
function executeAnimations({
|
|
122
|
-
factories,
|
|
123
|
-
getChildAnimations,
|
|
124
|
-
childAnimations,
|
|
125
|
-
transition,
|
|
126
|
-
controlActiveState,
|
|
127
|
-
isExit = false
|
|
128
|
-
}) {
|
|
129
|
-
const getAnimation = () => Promise.all(factories.map((factory) => factory()).filter(Boolean));
|
|
130
|
-
const animationTarget = { ...this.target };
|
|
131
|
-
const element = this.element;
|
|
132
|
-
const finishAnimation = (animationPromise) => {
|
|
133
|
-
element.dispatchEvent(motionEvent("motionstart", animationTarget));
|
|
134
|
-
animationPromise.then(() => {
|
|
135
|
-
element.dispatchEvent(motionEvent("motioncomplete", animationTarget, isExit));
|
|
136
|
-
}).catch(noop);
|
|
137
|
-
};
|
|
138
|
-
const getAnimationPromise = () => {
|
|
139
|
-
const animationPromise = (transition == null ? void 0 : transition.when) ? (transition.when === "beforeChildren" ? getAnimation() : getChildAnimations()).then(() => transition.when === "beforeChildren" ? getChildAnimations() : getAnimation()) : Promise.all([getAnimation(), getChildAnimations()]);
|
|
140
|
-
finishAnimation(animationPromise);
|
|
141
|
-
return animationPromise;
|
|
142
|
-
};
|
|
143
|
-
return controlActiveState ? getAnimationPromise : getAnimationPromise();
|
|
144
|
-
}
|
|
145
|
-
export {
|
|
146
|
-
animateUpdates
|
|
147
|
-
};
|
package/dist/es/utils/noop.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const noop: <T>(any: T) => T;
|