motion-v 0.13.0-beta.3 → 0.13.0
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 +61 -26
- package/dist/es/components/animate-presence/AnimatePresence.d.ts +0 -3
- package/dist/es/components/animate-presence/AnimatePresence.vue.mjs +27 -19
- package/dist/es/components/animate-presence/types.d.ts +0 -1
- package/dist/es/components/motion/Motion.d.ts +5 -4
- package/dist/es/components/motion/Motion.vue.mjs +13 -3
- package/dist/es/components/motion/NameSpace.d.ts +5 -4
- package/dist/es/components/motion/NameSpace.mjs +2 -1
- package/dist/es/components/motion/Primitive.d.ts +11 -2
- package/dist/es/components/motion/Primitive.mjs +9 -1
- package/dist/es/components/reorder/Group.d.ts +1 -1
- package/dist/es/components/reorder/Group.vue.mjs +3 -0
- package/dist/es/components/reorder/Item.vue.mjs +3 -0
- package/dist/es/components/reorder/index.d.ts +254 -176
- package/dist/es/features/gestures/press/index.mjs +2 -1
- package/dist/es/features/layout/types.d.ts +4 -0
- package/dist/es/state/animate-updates.mjs +2 -1
- package/dist/es/state/motion-state.d.ts +7 -2
- package/dist/es/types/common.d.ts +4 -0
- package/dist/es/types/index.d.ts +1 -0
- package/dist/es/types/motion-values.d.ts +2 -1
- package/dist/es/types/state.d.ts +3 -3
- package/package.json +1 -1
- package/dist/es/state/animation/index.d.ts +0 -0
- package/dist/es/state/animation/types.d.ts +0 -0
package/dist/cjs/index.js
CHANGED
|
@@ -4642,6 +4642,10 @@ const Primitive = vue.defineComponent({
|
|
|
4642
4642
|
getProps: {
|
|
4643
4643
|
type: Function,
|
|
4644
4644
|
default: () => ({})
|
|
4645
|
+
},
|
|
4646
|
+
getAttrs: {
|
|
4647
|
+
type: Function,
|
|
4648
|
+
default: () => ({})
|
|
4645
4649
|
}
|
|
4646
4650
|
},
|
|
4647
4651
|
setup(props, { attrs, slots }) {
|
|
@@ -4649,10 +4653,14 @@ const Primitive = vue.defineComponent({
|
|
|
4649
4653
|
const SELF_CLOSING_TAGS = ["area", "img", "input"];
|
|
4650
4654
|
return () => {
|
|
4651
4655
|
const motionProps = props.getProps();
|
|
4652
|
-
const
|
|
4656
|
+
const motionAttrs = props.getAttrs();
|
|
4657
|
+
let allAttrs = { ...motionAttrs, ...attrs };
|
|
4653
4658
|
if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
|
|
4654
4659
|
return vue.h(asTag, allAttrs);
|
|
4655
4660
|
if (asTag !== "template") {
|
|
4661
|
+
if (motionProps.forwardMotionProps) {
|
|
4662
|
+
allAttrs = { ...motionProps, ...allAttrs };
|
|
4663
|
+
}
|
|
4656
4664
|
return vue.h(props.as, allAttrs, { default: slots.default });
|
|
4657
4665
|
}
|
|
4658
4666
|
return vue.h(Slot, allAttrs, { default: slots.default });
|
|
@@ -4730,7 +4738,8 @@ function handlePressEvent(state2, event, lifecycle) {
|
|
|
4730
4738
|
}
|
|
4731
4739
|
class PressGesture extends Feature {
|
|
4732
4740
|
isActive() {
|
|
4733
|
-
|
|
4741
|
+
const { whilePress, onPress, onPressCancel, onPressStart } = this.state.options;
|
|
4742
|
+
return Boolean(whilePress || onPress || onPressCancel || onPressStart);
|
|
4734
4743
|
}
|
|
4735
4744
|
constructor(state2) {
|
|
4736
4745
|
super(state2);
|
|
@@ -7430,7 +7439,8 @@ function animateUpdates({
|
|
|
7430
7439
|
});
|
|
7431
7440
|
}
|
|
7432
7441
|
function resolveDirectAnimation(directAnimate, directTransition) {
|
|
7433
|
-
|
|
7442
|
+
var _a;
|
|
7443
|
+
const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom || ((_a = this.options.animatePresenceContext) == null ? void 0 : _a.custom));
|
|
7434
7444
|
if (!variant)
|
|
7435
7445
|
return {};
|
|
7436
7446
|
const transition = variant.transition || directTransition || this.options.transition || {};
|
|
@@ -7778,11 +7788,13 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7778
7788
|
whilePress: {},
|
|
7779
7789
|
whileInView: {},
|
|
7780
7790
|
whileFocus: {},
|
|
7791
|
+
forwardMotionProps: { type: Boolean },
|
|
7781
7792
|
custom: {},
|
|
7782
7793
|
initial: { type: [String, Array, Object, Boolean] },
|
|
7783
7794
|
animate: {},
|
|
7784
7795
|
exit: {},
|
|
7785
7796
|
variants: {},
|
|
7797
|
+
inherit: { type: Boolean },
|
|
7786
7798
|
style: {},
|
|
7787
7799
|
transformTemplate: { type: Function },
|
|
7788
7800
|
transition: {},
|
|
@@ -7796,6 +7808,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7796
7808
|
layoutRoot: { type: Boolean },
|
|
7797
7809
|
"data-framer-portal-id": {},
|
|
7798
7810
|
crossfade: { type: Boolean },
|
|
7811
|
+
layoutDependency: {},
|
|
7799
7812
|
onBeforeLayoutMeasure: { type: Function },
|
|
7800
7813
|
onLayoutMeasure: { type: Function },
|
|
7801
7814
|
onLayoutAnimationStart: { type: Function },
|
|
@@ -7884,18 +7897,24 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7884
7897
|
return `${layoutGroup.id}-${props.layoutId}`;
|
|
7885
7898
|
return props.layoutId || void 0;
|
|
7886
7899
|
}
|
|
7887
|
-
function
|
|
7900
|
+
function getProps() {
|
|
7888
7901
|
return {
|
|
7889
|
-
...attrs,
|
|
7890
7902
|
...props,
|
|
7891
7903
|
layoutId: getLayoutId(),
|
|
7892
7904
|
transition: props.transition ?? config.value.transition,
|
|
7893
7905
|
layoutGroup,
|
|
7894
7906
|
motionConfig: config.value,
|
|
7895
7907
|
inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
|
|
7908
|
+
animatePresenceContext,
|
|
7896
7909
|
initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
|
|
7897
7910
|
};
|
|
7898
7911
|
}
|
|
7912
|
+
function getMotionProps() {
|
|
7913
|
+
return {
|
|
7914
|
+
...attrs,
|
|
7915
|
+
...getProps()
|
|
7916
|
+
};
|
|
7917
|
+
}
|
|
7899
7918
|
const state2 = new MotionState(
|
|
7900
7919
|
getMotionProps(),
|
|
7901
7920
|
parentState
|
|
@@ -7921,7 +7940,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7921
7940
|
vue.onUpdated(() => {
|
|
7922
7941
|
state2.update(getMotionProps());
|
|
7923
7942
|
});
|
|
7924
|
-
function
|
|
7943
|
+
function getAttrs() {
|
|
7925
7944
|
const isSVG = state2.visualElement.type === "svg";
|
|
7926
7945
|
const attrsProps = { ...attrs };
|
|
7927
7946
|
Object.keys(attrs).forEach((key) => {
|
|
@@ -7966,6 +7985,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7966
7985
|
ref_key: "PrimitiveRef",
|
|
7967
7986
|
ref: PrimitiveRef,
|
|
7968
7987
|
"get-props": getProps,
|
|
7988
|
+
"get-attrs": getAttrs,
|
|
7969
7989
|
as: _ctx.as,
|
|
7970
7990
|
"as-child": _ctx.asChild,
|
|
7971
7991
|
"data-motion-group": ((_a = vue.unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,
|
|
@@ -7986,7 +8006,7 @@ const motion = new Proxy(_sfc_main$6, {
|
|
|
7986
8006
|
return target[prop];
|
|
7987
8007
|
let motionComponent = componentCache.get(prop);
|
|
7988
8008
|
if (prop === "create") {
|
|
7989
|
-
return (component) => {
|
|
8009
|
+
return (component, { forwardMotionProps = false } = {}) => {
|
|
7990
8010
|
return vue.defineComponent({
|
|
7991
8011
|
inheritAttrs: false,
|
|
7992
8012
|
name: `motion.${component.$name}`,
|
|
@@ -7994,6 +8014,7 @@ const motion = new Proxy(_sfc_main$6, {
|
|
|
7994
8014
|
return () => {
|
|
7995
8015
|
return vue.h(_sfc_main$6, {
|
|
7996
8016
|
...attrs,
|
|
8017
|
+
forwardMotionProps,
|
|
7997
8018
|
as: component,
|
|
7998
8019
|
asChild: false
|
|
7999
8020
|
}, slots);
|
|
@@ -8089,7 +8110,6 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8089
8110
|
as: {},
|
|
8090
8111
|
custom: {},
|
|
8091
8112
|
onExitComplete: {},
|
|
8092
|
-
unwrapElement: { type: [Boolean, Function], default: false },
|
|
8093
8113
|
anchorX: { default: "left" }
|
|
8094
8114
|
},
|
|
8095
8115
|
setup(__props) {
|
|
@@ -8103,6 +8123,16 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8103
8123
|
presenceContext.initial = void 0;
|
|
8104
8124
|
});
|
|
8105
8125
|
const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
|
|
8126
|
+
function findMotionElement(el) {
|
|
8127
|
+
let current = el;
|
|
8128
|
+
while (current) {
|
|
8129
|
+
if (mountedStates.get(current)) {
|
|
8130
|
+
return current;
|
|
8131
|
+
}
|
|
8132
|
+
current = current.firstElementChild;
|
|
8133
|
+
}
|
|
8134
|
+
return null;
|
|
8135
|
+
}
|
|
8106
8136
|
function enter(el) {
|
|
8107
8137
|
const state2 = mountedStates.get(el);
|
|
8108
8138
|
if (!state2) {
|
|
@@ -8120,29 +8150,28 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8120
8150
|
exitDom.clear();
|
|
8121
8151
|
});
|
|
8122
8152
|
function exit(el, done) {
|
|
8123
|
-
|
|
8124
|
-
|
|
8125
|
-
|
|
8126
|
-
|
|
8127
|
-
|
|
8153
|
+
var _a;
|
|
8154
|
+
const motionEl = findMotionElement(el);
|
|
8155
|
+
const state2 = mountedStates.get(motionEl);
|
|
8156
|
+
if (!motionEl || !state2) {
|
|
8157
|
+
done();
|
|
8158
|
+
if (exitDom.size === 0) {
|
|
8159
|
+
(_a = props.onExitComplete) == null ? void 0 : _a.call(props);
|
|
8128
8160
|
}
|
|
8161
|
+
return;
|
|
8129
8162
|
}
|
|
8130
|
-
|
|
8131
|
-
|
|
8132
|
-
return done();
|
|
8133
|
-
}
|
|
8134
|
-
exitDom.set(el, true);
|
|
8135
|
-
removeDoneCallback(el);
|
|
8163
|
+
exitDom.set(motionEl, true);
|
|
8164
|
+
removeDoneCallback(motionEl);
|
|
8136
8165
|
addPopStyle(state2);
|
|
8137
8166
|
function doneCallback(e) {
|
|
8138
|
-
var
|
|
8139
|
-
if ((
|
|
8167
|
+
var _a2, _b;
|
|
8168
|
+
if ((_a2 = e == null ? void 0 : e.detail) == null ? void 0 : _a2.isExit) {
|
|
8140
8169
|
const projection = state2.visualElement.projection;
|
|
8141
8170
|
if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state2.isSafeToRemove && !state2.isVShow) {
|
|
8142
8171
|
return;
|
|
8143
8172
|
}
|
|
8144
|
-
removeDoneCallback(
|
|
8145
|
-
exitDom.delete(
|
|
8173
|
+
removeDoneCallback(motionEl);
|
|
8174
|
+
exitDom.delete(motionEl);
|
|
8146
8175
|
if (exitDom.size === 0) {
|
|
8147
8176
|
(_b = props.onExitComplete) == null ? void 0 : _b.call(props);
|
|
8148
8177
|
}
|
|
@@ -8152,15 +8181,15 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8152
8181
|
removePopStyle(state2);
|
|
8153
8182
|
}
|
|
8154
8183
|
done();
|
|
8155
|
-
if (!
|
|
8184
|
+
if (!motionEl.isConnected) {
|
|
8156
8185
|
state2.unmount(true);
|
|
8157
8186
|
}
|
|
8158
8187
|
}
|
|
8159
8188
|
}
|
|
8160
8189
|
delay(() => {
|
|
8161
8190
|
state2.setActive("exit", true);
|
|
8162
|
-
doneCallbacks.set(
|
|
8163
|
-
|
|
8191
|
+
doneCallbacks.set(motionEl, doneCallback);
|
|
8192
|
+
motionEl.addEventListener("motioncomplete", doneCallback);
|
|
8164
8193
|
});
|
|
8165
8194
|
}
|
|
8166
8195
|
const transitionProps = vue.computed(() => {
|
|
@@ -8272,11 +8301,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8272
8301
|
whilePress: {},
|
|
8273
8302
|
whileInView: {},
|
|
8274
8303
|
whileFocus: {},
|
|
8304
|
+
forwardMotionProps: { type: Boolean },
|
|
8275
8305
|
custom: {},
|
|
8276
8306
|
initial: { type: [String, Array, Object, Boolean] },
|
|
8277
8307
|
animate: {},
|
|
8278
8308
|
exit: {},
|
|
8279
8309
|
variants: {},
|
|
8310
|
+
inherit: { type: Boolean },
|
|
8280
8311
|
style: {},
|
|
8281
8312
|
transformTemplate: {},
|
|
8282
8313
|
transition: {},
|
|
@@ -8290,6 +8321,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8290
8321
|
layoutRoot: { type: Boolean },
|
|
8291
8322
|
"data-framer-portal-id": {},
|
|
8292
8323
|
crossfade: { type: Boolean },
|
|
8324
|
+
layoutDependency: {},
|
|
8293
8325
|
onBeforeLayoutMeasure: {},
|
|
8294
8326
|
onLayoutMeasure: {},
|
|
8295
8327
|
onLayoutAnimationStart: {},
|
|
@@ -8613,11 +8645,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8613
8645
|
whilePress: {},
|
|
8614
8646
|
whileInView: {},
|
|
8615
8647
|
whileFocus: {},
|
|
8648
|
+
forwardMotionProps: { type: Boolean },
|
|
8616
8649
|
custom: {},
|
|
8617
8650
|
initial: { type: [String, Array, Object, Boolean], default: void 0 },
|
|
8618
8651
|
animate: { default: void 0 },
|
|
8619
8652
|
exit: {},
|
|
8620
8653
|
variants: {},
|
|
8654
|
+
inherit: { type: Boolean },
|
|
8621
8655
|
style: {},
|
|
8622
8656
|
transformTemplate: {},
|
|
8623
8657
|
transition: {},
|
|
@@ -8630,6 +8664,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8630
8664
|
layoutRoot: { type: Boolean, default: false },
|
|
8631
8665
|
"data-framer-portal-id": {},
|
|
8632
8666
|
crossfade: { type: Boolean, default: true },
|
|
8667
|
+
layoutDependency: {},
|
|
8633
8668
|
onBeforeLayoutMeasure: {},
|
|
8634
8669
|
onLayoutMeasure: {},
|
|
8635
8670
|
onLayoutAnimationStart: {},
|
|
@@ -10,17 +10,14 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
|
10
10
|
declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
|
|
11
11
|
mode: string;
|
|
12
12
|
initial: boolean;
|
|
13
|
-
unwrapElement: boolean;
|
|
14
13
|
anchorX: string;
|
|
15
14
|
}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
|
|
16
15
|
mode: string;
|
|
17
16
|
initial: boolean;
|
|
18
|
-
unwrapElement: boolean;
|
|
19
17
|
anchorX: string;
|
|
20
18
|
}>>>, {
|
|
21
19
|
initial: boolean;
|
|
22
20
|
mode: "wait" | "popLayout" | "sync";
|
|
23
|
-
unwrapElement: boolean | ((el: HTMLElement) => HTMLElement);
|
|
24
21
|
anchorX: "left" | "right";
|
|
25
22
|
}, {}>;
|
|
26
23
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
@@ -15,7 +15,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
15
15
|
as: {},
|
|
16
16
|
custom: {},
|
|
17
17
|
onExitComplete: {},
|
|
18
|
-
unwrapElement: { type: [Boolean, Function], default: false },
|
|
19
18
|
anchorX: { default: "left" }
|
|
20
19
|
},
|
|
21
20
|
setup(__props) {
|
|
@@ -29,6 +28,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
29
28
|
presenceContext.initial = void 0;
|
|
30
29
|
});
|
|
31
30
|
const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
|
|
31
|
+
function findMotionElement(el) {
|
|
32
|
+
let current = el;
|
|
33
|
+
while (current) {
|
|
34
|
+
if (mountedStates.get(current)) {
|
|
35
|
+
return current;
|
|
36
|
+
}
|
|
37
|
+
current = current.firstElementChild;
|
|
38
|
+
}
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
32
41
|
function enter(el) {
|
|
33
42
|
const state = mountedStates.get(el);
|
|
34
43
|
if (!state) {
|
|
@@ -46,29 +55,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
46
55
|
exitDom.clear();
|
|
47
56
|
});
|
|
48
57
|
function exit(el, done) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
var _a;
|
|
59
|
+
const motionEl = findMotionElement(el);
|
|
60
|
+
const state = mountedStates.get(motionEl);
|
|
61
|
+
if (!motionEl || !state) {
|
|
62
|
+
done();
|
|
63
|
+
if (exitDom.size === 0) {
|
|
64
|
+
(_a = props.onExitComplete) == null ? void 0 : _a.call(props);
|
|
54
65
|
}
|
|
66
|
+
return;
|
|
55
67
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return done();
|
|
59
|
-
}
|
|
60
|
-
exitDom.set(el, true);
|
|
61
|
-
removeDoneCallback(el);
|
|
68
|
+
exitDom.set(motionEl, true);
|
|
69
|
+
removeDoneCallback(motionEl);
|
|
62
70
|
addPopStyle(state);
|
|
63
71
|
function doneCallback(e) {
|
|
64
|
-
var
|
|
65
|
-
if ((
|
|
72
|
+
var _a2, _b;
|
|
73
|
+
if ((_a2 = e == null ? void 0 : e.detail) == null ? void 0 : _a2.isExit) {
|
|
66
74
|
const projection = state.visualElement.projection;
|
|
67
75
|
if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state.isSafeToRemove && !state.isVShow) {
|
|
68
76
|
return;
|
|
69
77
|
}
|
|
70
|
-
removeDoneCallback(
|
|
71
|
-
exitDom.delete(
|
|
78
|
+
removeDoneCallback(motionEl);
|
|
79
|
+
exitDom.delete(motionEl);
|
|
72
80
|
if (exitDom.size === 0) {
|
|
73
81
|
(_b = props.onExitComplete) == null ? void 0 : _b.call(props);
|
|
74
82
|
}
|
|
@@ -78,15 +86,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
78
86
|
removePopStyle(state);
|
|
79
87
|
}
|
|
80
88
|
done();
|
|
81
|
-
if (!
|
|
89
|
+
if (!motionEl.isConnected) {
|
|
82
90
|
state.unmount(true);
|
|
83
91
|
}
|
|
84
92
|
}
|
|
85
93
|
}
|
|
86
94
|
delay(() => {
|
|
87
95
|
state.setActive("exit", true);
|
|
88
|
-
doneCallbacks.set(
|
|
89
|
-
|
|
96
|
+
doneCallbacks.set(motionEl, doneCallback);
|
|
97
|
+
motionEl.addEventListener("motioncomplete", doneCallback);
|
|
90
98
|
});
|
|
91
99
|
}
|
|
92
100
|
const transitionProps = computed(() => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IntrinsicElementAttributes } from 'vue';
|
|
2
|
-
import {
|
|
3
|
-
export interface MotionProps<T extends
|
|
2
|
+
import { AsTag, ComponentProps, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '../../types';
|
|
3
|
+
export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Options<K> {
|
|
4
4
|
as?: T;
|
|
5
5
|
asChild?: boolean;
|
|
6
6
|
hover?: Options['hover'];
|
|
@@ -12,9 +12,10 @@ export interface MotionProps<T extends ElementType = 'div', K = unknown> extends
|
|
|
12
12
|
whilePress?: Options['whilePress'];
|
|
13
13
|
whileInView?: Options['whileInView'];
|
|
14
14
|
whileFocus?: Options['whileFocus'];
|
|
15
|
+
forwardMotionProps?: boolean;
|
|
15
16
|
}
|
|
16
|
-
declare const _default: <T extends
|
|
17
|
-
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (Omit<SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T]
|
|
17
|
+
declare const _default: <T extends AsTag = "div", K = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
18
|
+
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (Omit<T extends keyof IntrinsicElementAttributes ? SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T] : ComponentProps<T>, "asChild" | keyof Options<any>> & MotionProps<T, K>)> & import('vue').PublicProps;
|
|
18
19
|
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
19
20
|
attrs: any;
|
|
20
21
|
slots: {
|
|
@@ -26,11 +26,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
26
26
|
whilePress: {},
|
|
27
27
|
whileInView: {},
|
|
28
28
|
whileFocus: {},
|
|
29
|
+
forwardMotionProps: { type: Boolean },
|
|
29
30
|
custom: {},
|
|
30
31
|
initial: { type: [String, Array, Object, Boolean] },
|
|
31
32
|
animate: {},
|
|
32
33
|
exit: {},
|
|
33
34
|
variants: {},
|
|
35
|
+
inherit: { type: Boolean },
|
|
34
36
|
style: {},
|
|
35
37
|
transformTemplate: { type: Function },
|
|
36
38
|
transition: {},
|
|
@@ -44,6 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
44
46
|
layoutRoot: { type: Boolean },
|
|
45
47
|
"data-framer-portal-id": {},
|
|
46
48
|
crossfade: { type: Boolean },
|
|
49
|
+
layoutDependency: {},
|
|
47
50
|
onBeforeLayoutMeasure: { type: Function },
|
|
48
51
|
onLayoutMeasure: { type: Function },
|
|
49
52
|
onLayoutAnimationStart: { type: Function },
|
|
@@ -132,18 +135,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
132
135
|
return `${layoutGroup.id}-${props.layoutId}`;
|
|
133
136
|
return props.layoutId || void 0;
|
|
134
137
|
}
|
|
135
|
-
function
|
|
138
|
+
function getProps() {
|
|
136
139
|
return {
|
|
137
|
-
...attrs,
|
|
138
140
|
...props,
|
|
139
141
|
layoutId: getLayoutId(),
|
|
140
142
|
transition: props.transition ?? config.value.transition,
|
|
141
143
|
layoutGroup,
|
|
142
144
|
motionConfig: config.value,
|
|
143
145
|
inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
|
|
146
|
+
animatePresenceContext,
|
|
144
147
|
initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
|
|
145
148
|
};
|
|
146
149
|
}
|
|
150
|
+
function getMotionProps() {
|
|
151
|
+
return {
|
|
152
|
+
...attrs,
|
|
153
|
+
...getProps()
|
|
154
|
+
};
|
|
155
|
+
}
|
|
147
156
|
const state = new MotionState(
|
|
148
157
|
getMotionProps(),
|
|
149
158
|
parentState
|
|
@@ -169,7 +178,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
169
178
|
onUpdated(() => {
|
|
170
179
|
state.update(getMotionProps());
|
|
171
180
|
});
|
|
172
|
-
function
|
|
181
|
+
function getAttrs() {
|
|
173
182
|
const isSVG = state.visualElement.type === "svg";
|
|
174
183
|
const attrsProps = { ...attrs };
|
|
175
184
|
Object.keys(attrs).forEach((key) => {
|
|
@@ -214,6 +223,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
214
223
|
ref_key: "PrimitiveRef",
|
|
215
224
|
ref: PrimitiveRef,
|
|
216
225
|
"get-props": getProps,
|
|
226
|
+
"get-attrs": getAttrs,
|
|
217
227
|
as: _ctx.as,
|
|
218
228
|
"as-child": _ctx.asChild,
|
|
219
229
|
"data-motion-group": ((_a = unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { DefineComponent,
|
|
1
|
+
import { DefineComponent, IntrinsicElementAttributes } from 'vue';
|
|
2
2
|
import { MotionProps } from './Motion';
|
|
3
|
-
import { MotionHTMLAttributes } from '../../types';
|
|
4
|
-
type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;
|
|
3
|
+
import { ComponentProps, MotionHTMLAttributes } from '../../types';
|
|
5
4
|
type MotionComponentProps = {
|
|
6
|
-
create: <T extends DefineComponent>(T: any
|
|
5
|
+
create: <T extends DefineComponent>(T: any, options?: {
|
|
6
|
+
forwardMotionProps?: boolean;
|
|
7
|
+
}) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>;
|
|
7
8
|
};
|
|
8
9
|
type MotionNameSpace = {
|
|
9
10
|
[K in keyof IntrinsicElementAttributes]: DefineComponent<MotionProps<K, unknown> & MotionHTMLAttributes<K>>;
|
|
@@ -7,7 +7,7 @@ const motion = new Proxy(_sfc_main, {
|
|
|
7
7
|
return target[prop];
|
|
8
8
|
let motionComponent = componentCache.get(prop);
|
|
9
9
|
if (prop === "create") {
|
|
10
|
-
return (component) => {
|
|
10
|
+
return (component, { forwardMotionProps = false } = {}) => {
|
|
11
11
|
return defineComponent({
|
|
12
12
|
inheritAttrs: false,
|
|
13
13
|
name: `motion.${component.$name}`,
|
|
@@ -15,6 +15,7 @@ const motion = new Proxy(_sfc_main, {
|
|
|
15
15
|
return () => {
|
|
16
16
|
return h(_sfc_main, {
|
|
17
17
|
...attrs,
|
|
18
|
+
forwardMotionProps,
|
|
18
19
|
as: component,
|
|
19
20
|
asChild: false
|
|
20
21
|
}, slots);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Component,
|
|
2
|
-
|
|
1
|
+
import { Component, PropType } from 'vue';
|
|
2
|
+
import { AsTag } from '../../types';
|
|
3
3
|
export interface PrimitiveProps {
|
|
4
4
|
/**
|
|
5
5
|
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
@@ -26,6 +26,10 @@ export declare const Primitive: import('vue').DefineComponent<{
|
|
|
26
26
|
type: FunctionConstructor;
|
|
27
27
|
default: () => {};
|
|
28
28
|
};
|
|
29
|
+
getAttrs: {
|
|
30
|
+
type: FunctionConstructor;
|
|
31
|
+
default: () => {};
|
|
32
|
+
};
|
|
29
33
|
}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
30
34
|
[key: string]: any;
|
|
31
35
|
}>, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
@@ -41,8 +45,13 @@ export declare const Primitive: import('vue').DefineComponent<{
|
|
|
41
45
|
type: FunctionConstructor;
|
|
42
46
|
default: () => {};
|
|
43
47
|
};
|
|
48
|
+
getAttrs: {
|
|
49
|
+
type: FunctionConstructor;
|
|
50
|
+
default: () => {};
|
|
51
|
+
};
|
|
44
52
|
}>>, {
|
|
45
53
|
as: AsTag;
|
|
46
54
|
asChild: boolean;
|
|
47
55
|
getProps: Function;
|
|
56
|
+
getAttrs: Function;
|
|
48
57
|
}, {}>;
|
|
@@ -15,6 +15,10 @@ const Primitive = defineComponent({
|
|
|
15
15
|
getProps: {
|
|
16
16
|
type: Function,
|
|
17
17
|
default: () => ({})
|
|
18
|
+
},
|
|
19
|
+
getAttrs: {
|
|
20
|
+
type: Function,
|
|
21
|
+
default: () => ({})
|
|
18
22
|
}
|
|
19
23
|
},
|
|
20
24
|
setup(props, { attrs, slots }) {
|
|
@@ -22,10 +26,14 @@ const Primitive = defineComponent({
|
|
|
22
26
|
const SELF_CLOSING_TAGS = ["area", "img", "input"];
|
|
23
27
|
return () => {
|
|
24
28
|
const motionProps = props.getProps();
|
|
25
|
-
const
|
|
29
|
+
const motionAttrs = props.getAttrs();
|
|
30
|
+
let allAttrs = { ...motionAttrs, ...attrs };
|
|
26
31
|
if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
|
|
27
32
|
return h(asTag, allAttrs);
|
|
28
33
|
if (asTag !== "template") {
|
|
34
|
+
if (motionProps.forwardMotionProps) {
|
|
35
|
+
allAttrs = { ...motionProps, ...allAttrs };
|
|
36
|
+
}
|
|
29
37
|
return h(props.as, allAttrs, { default: slots.default });
|
|
30
38
|
}
|
|
31
39
|
return h(Slot, allAttrs, { default: slots.default });
|
|
@@ -41,8 +41,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
41
41
|
as: string;
|
|
42
42
|
axis: string;
|
|
43
43
|
}>>>, {
|
|
44
|
-
axis: "x" | "y";
|
|
45
44
|
as: keyof import('vue').IntrinsicElementAttributes;
|
|
45
|
+
axis: "x" | "y";
|
|
46
46
|
}, {}>, {
|
|
47
47
|
default?(_: {}): any;
|
|
48
48
|
}>;
|
|
@@ -24,11 +24,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
24
24
|
whilePress: {},
|
|
25
25
|
whileInView: {},
|
|
26
26
|
whileFocus: {},
|
|
27
|
+
forwardMotionProps: { type: Boolean },
|
|
27
28
|
custom: {},
|
|
28
29
|
initial: { type: [String, Array, Object, Boolean] },
|
|
29
30
|
animate: {},
|
|
30
31
|
exit: {},
|
|
31
32
|
variants: {},
|
|
33
|
+
inherit: { type: Boolean },
|
|
32
34
|
style: {},
|
|
33
35
|
transformTemplate: {},
|
|
34
36
|
transition: {},
|
|
@@ -42,6 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
42
44
|
layoutRoot: { type: Boolean },
|
|
43
45
|
"data-framer-portal-id": {},
|
|
44
46
|
crossfade: { type: Boolean },
|
|
47
|
+
layoutDependency: {},
|
|
45
48
|
onBeforeLayoutMeasure: {},
|
|
46
49
|
onLayoutMeasure: {},
|
|
47
50
|
onLayoutAnimationStart: {},
|
|
@@ -24,11 +24,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
24
24
|
whilePress: {},
|
|
25
25
|
whileInView: {},
|
|
26
26
|
whileFocus: {},
|
|
27
|
+
forwardMotionProps: { type: Boolean },
|
|
27
28
|
custom: {},
|
|
28
29
|
initial: { type: [String, Array, Object, Boolean], default: void 0 },
|
|
29
30
|
animate: { default: void 0 },
|
|
30
31
|
exit: {},
|
|
31
32
|
variants: {},
|
|
33
|
+
inherit: { type: Boolean },
|
|
32
34
|
style: {},
|
|
33
35
|
transformTemplate: {},
|
|
34
36
|
transition: {},
|
|
@@ -41,6 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
41
43
|
layoutRoot: { type: Boolean, default: false },
|
|
42
44
|
"data-framer-portal-id": {},
|
|
43
45
|
crossfade: { type: Boolean, default: true },
|
|
46
|
+
layoutDependency: {},
|
|
44
47
|
onBeforeLayoutMeasure: {},
|
|
45
48
|
onLayoutMeasure: {},
|
|
46
49
|
onLayoutAnimationStart: {},
|