motion-v 0.13.0-beta.4 → 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 +59 -25
- 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.vue.mjs +3 -0
- package/dist/es/components/reorder/Item.vue.mjs +3 -0
- package/dist/es/components/reorder/index.d.ts +118 -40
- 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 });
|
|
@@ -7431,7 +7439,8 @@ function animateUpdates({
|
|
|
7431
7439
|
});
|
|
7432
7440
|
}
|
|
7433
7441
|
function resolveDirectAnimation(directAnimate, directTransition) {
|
|
7434
|
-
|
|
7442
|
+
var _a;
|
|
7443
|
+
const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom || ((_a = this.options.animatePresenceContext) == null ? void 0 : _a.custom));
|
|
7435
7444
|
if (!variant)
|
|
7436
7445
|
return {};
|
|
7437
7446
|
const transition = variant.transition || directTransition || this.options.transition || {};
|
|
@@ -7779,11 +7788,13 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7779
7788
|
whilePress: {},
|
|
7780
7789
|
whileInView: {},
|
|
7781
7790
|
whileFocus: {},
|
|
7791
|
+
forwardMotionProps: { type: Boolean },
|
|
7782
7792
|
custom: {},
|
|
7783
7793
|
initial: { type: [String, Array, Object, Boolean] },
|
|
7784
7794
|
animate: {},
|
|
7785
7795
|
exit: {},
|
|
7786
7796
|
variants: {},
|
|
7797
|
+
inherit: { type: Boolean },
|
|
7787
7798
|
style: {},
|
|
7788
7799
|
transformTemplate: { type: Function },
|
|
7789
7800
|
transition: {},
|
|
@@ -7797,6 +7808,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7797
7808
|
layoutRoot: { type: Boolean },
|
|
7798
7809
|
"data-framer-portal-id": {},
|
|
7799
7810
|
crossfade: { type: Boolean },
|
|
7811
|
+
layoutDependency: {},
|
|
7800
7812
|
onBeforeLayoutMeasure: { type: Function },
|
|
7801
7813
|
onLayoutMeasure: { type: Function },
|
|
7802
7814
|
onLayoutAnimationStart: { type: Function },
|
|
@@ -7885,18 +7897,24 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7885
7897
|
return `${layoutGroup.id}-${props.layoutId}`;
|
|
7886
7898
|
return props.layoutId || void 0;
|
|
7887
7899
|
}
|
|
7888
|
-
function
|
|
7900
|
+
function getProps() {
|
|
7889
7901
|
return {
|
|
7890
|
-
...attrs,
|
|
7891
7902
|
...props,
|
|
7892
7903
|
layoutId: getLayoutId(),
|
|
7893
7904
|
transition: props.transition ?? config.value.transition,
|
|
7894
7905
|
layoutGroup,
|
|
7895
7906
|
motionConfig: config.value,
|
|
7896
7907
|
inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
|
|
7908
|
+
animatePresenceContext,
|
|
7897
7909
|
initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
|
|
7898
7910
|
};
|
|
7899
7911
|
}
|
|
7912
|
+
function getMotionProps() {
|
|
7913
|
+
return {
|
|
7914
|
+
...attrs,
|
|
7915
|
+
...getProps()
|
|
7916
|
+
};
|
|
7917
|
+
}
|
|
7900
7918
|
const state2 = new MotionState(
|
|
7901
7919
|
getMotionProps(),
|
|
7902
7920
|
parentState
|
|
@@ -7922,7 +7940,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7922
7940
|
vue.onUpdated(() => {
|
|
7923
7941
|
state2.update(getMotionProps());
|
|
7924
7942
|
});
|
|
7925
|
-
function
|
|
7943
|
+
function getAttrs() {
|
|
7926
7944
|
const isSVG = state2.visualElement.type === "svg";
|
|
7927
7945
|
const attrsProps = { ...attrs };
|
|
7928
7946
|
Object.keys(attrs).forEach((key) => {
|
|
@@ -7967,6 +7985,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7967
7985
|
ref_key: "PrimitiveRef",
|
|
7968
7986
|
ref: PrimitiveRef,
|
|
7969
7987
|
"get-props": getProps,
|
|
7988
|
+
"get-attrs": getAttrs,
|
|
7970
7989
|
as: _ctx.as,
|
|
7971
7990
|
"as-child": _ctx.asChild,
|
|
7972
7991
|
"data-motion-group": ((_a = vue.unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,
|
|
@@ -7987,7 +8006,7 @@ const motion = new Proxy(_sfc_main$6, {
|
|
|
7987
8006
|
return target[prop];
|
|
7988
8007
|
let motionComponent = componentCache.get(prop);
|
|
7989
8008
|
if (prop === "create") {
|
|
7990
|
-
return (component) => {
|
|
8009
|
+
return (component, { forwardMotionProps = false } = {}) => {
|
|
7991
8010
|
return vue.defineComponent({
|
|
7992
8011
|
inheritAttrs: false,
|
|
7993
8012
|
name: `motion.${component.$name}`,
|
|
@@ -7995,6 +8014,7 @@ const motion = new Proxy(_sfc_main$6, {
|
|
|
7995
8014
|
return () => {
|
|
7996
8015
|
return vue.h(_sfc_main$6, {
|
|
7997
8016
|
...attrs,
|
|
8017
|
+
forwardMotionProps,
|
|
7998
8018
|
as: component,
|
|
7999
8019
|
asChild: false
|
|
8000
8020
|
}, slots);
|
|
@@ -8090,7 +8110,6 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8090
8110
|
as: {},
|
|
8091
8111
|
custom: {},
|
|
8092
8112
|
onExitComplete: {},
|
|
8093
|
-
unwrapElement: { type: [Boolean, Function], default: false },
|
|
8094
8113
|
anchorX: { default: "left" }
|
|
8095
8114
|
},
|
|
8096
8115
|
setup(__props) {
|
|
@@ -8104,6 +8123,16 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8104
8123
|
presenceContext.initial = void 0;
|
|
8105
8124
|
});
|
|
8106
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
|
+
}
|
|
8107
8136
|
function enter(el) {
|
|
8108
8137
|
const state2 = mountedStates.get(el);
|
|
8109
8138
|
if (!state2) {
|
|
@@ -8121,29 +8150,28 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8121
8150
|
exitDom.clear();
|
|
8122
8151
|
});
|
|
8123
8152
|
function exit(el, done) {
|
|
8124
|
-
|
|
8125
|
-
|
|
8126
|
-
|
|
8127
|
-
|
|
8128
|
-
|
|
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);
|
|
8129
8160
|
}
|
|
8161
|
+
return;
|
|
8130
8162
|
}
|
|
8131
|
-
|
|
8132
|
-
|
|
8133
|
-
return done();
|
|
8134
|
-
}
|
|
8135
|
-
exitDom.set(el, true);
|
|
8136
|
-
removeDoneCallback(el);
|
|
8163
|
+
exitDom.set(motionEl, true);
|
|
8164
|
+
removeDoneCallback(motionEl);
|
|
8137
8165
|
addPopStyle(state2);
|
|
8138
8166
|
function doneCallback(e) {
|
|
8139
|
-
var
|
|
8140
|
-
if ((
|
|
8167
|
+
var _a2, _b;
|
|
8168
|
+
if ((_a2 = e == null ? void 0 : e.detail) == null ? void 0 : _a2.isExit) {
|
|
8141
8169
|
const projection = state2.visualElement.projection;
|
|
8142
8170
|
if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state2.isSafeToRemove && !state2.isVShow) {
|
|
8143
8171
|
return;
|
|
8144
8172
|
}
|
|
8145
|
-
removeDoneCallback(
|
|
8146
|
-
exitDom.delete(
|
|
8173
|
+
removeDoneCallback(motionEl);
|
|
8174
|
+
exitDom.delete(motionEl);
|
|
8147
8175
|
if (exitDom.size === 0) {
|
|
8148
8176
|
(_b = props.onExitComplete) == null ? void 0 : _b.call(props);
|
|
8149
8177
|
}
|
|
@@ -8153,15 +8181,15 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8153
8181
|
removePopStyle(state2);
|
|
8154
8182
|
}
|
|
8155
8183
|
done();
|
|
8156
|
-
if (!
|
|
8184
|
+
if (!motionEl.isConnected) {
|
|
8157
8185
|
state2.unmount(true);
|
|
8158
8186
|
}
|
|
8159
8187
|
}
|
|
8160
8188
|
}
|
|
8161
8189
|
delay(() => {
|
|
8162
8190
|
state2.setActive("exit", true);
|
|
8163
|
-
doneCallbacks.set(
|
|
8164
|
-
|
|
8191
|
+
doneCallbacks.set(motionEl, doneCallback);
|
|
8192
|
+
motionEl.addEventListener("motioncomplete", doneCallback);
|
|
8165
8193
|
});
|
|
8166
8194
|
}
|
|
8167
8195
|
const transitionProps = vue.computed(() => {
|
|
@@ -8273,11 +8301,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8273
8301
|
whilePress: {},
|
|
8274
8302
|
whileInView: {},
|
|
8275
8303
|
whileFocus: {},
|
|
8304
|
+
forwardMotionProps: { type: Boolean },
|
|
8276
8305
|
custom: {},
|
|
8277
8306
|
initial: { type: [String, Array, Object, Boolean] },
|
|
8278
8307
|
animate: {},
|
|
8279
8308
|
exit: {},
|
|
8280
8309
|
variants: {},
|
|
8310
|
+
inherit: { type: Boolean },
|
|
8281
8311
|
style: {},
|
|
8282
8312
|
transformTemplate: {},
|
|
8283
8313
|
transition: {},
|
|
@@ -8291,6 +8321,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8291
8321
|
layoutRoot: { type: Boolean },
|
|
8292
8322
|
"data-framer-portal-id": {},
|
|
8293
8323
|
crossfade: { type: Boolean },
|
|
8324
|
+
layoutDependency: {},
|
|
8294
8325
|
onBeforeLayoutMeasure: {},
|
|
8295
8326
|
onLayoutMeasure: {},
|
|
8296
8327
|
onLayoutAnimationStart: {},
|
|
@@ -8614,11 +8645,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8614
8645
|
whilePress: {},
|
|
8615
8646
|
whileInView: {},
|
|
8616
8647
|
whileFocus: {},
|
|
8648
|
+
forwardMotionProps: { type: Boolean },
|
|
8617
8649
|
custom: {},
|
|
8618
8650
|
initial: { type: [String, Array, Object, Boolean], default: void 0 },
|
|
8619
8651
|
animate: { default: void 0 },
|
|
8620
8652
|
exit: {},
|
|
8621
8653
|
variants: {},
|
|
8654
|
+
inherit: { type: Boolean },
|
|
8622
8655
|
style: {},
|
|
8623
8656
|
transformTemplate: {},
|
|
8624
8657
|
transition: {},
|
|
@@ -8631,6 +8664,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
8631
8664
|
layoutRoot: { type: Boolean, default: false },
|
|
8632
8665
|
"data-framer-portal-id": {},
|
|
8633
8666
|
crossfade: { type: Boolean, default: true },
|
|
8667
|
+
layoutDependency: {},
|
|
8634
8668
|
onBeforeLayoutMeasure: {},
|
|
8635
8669
|
onLayoutMeasure: {},
|
|
8636
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 });
|
|
@@ -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: {},
|