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 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 allAttrs = { ...motionProps, ...attrs };
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
- return Boolean(this.state.options.whilePress);
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
- const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
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 getMotionProps() {
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 getProps() {
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
- if (props.unwrapElement) {
8124
- if (typeof props.unwrapElement === "function") {
8125
- el = props.unwrapElement(el) || el;
8126
- } else {
8127
- el = el.firstElementChild || el;
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
- const state2 = mountedStates.get(el);
8131
- if (!state2) {
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 _a, _b;
8139
- if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
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(el);
8145
- exitDom.delete(el);
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 (!el.isConnected) {
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(el, doneCallback);
8163
- el.addEventListener("motioncomplete", doneCallback);
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
- if (props.unwrapElement) {
50
- if (typeof props.unwrapElement === "function") {
51
- el = props.unwrapElement(el) || el;
52
- } else {
53
- el = el.firstElementChild || el;
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
- const state = mountedStates.get(el);
57
- if (!state) {
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 _a, _b;
65
- if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
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(el);
71
- exitDom.delete(el);
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 (!el.isConnected) {
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(el, doneCallback);
89
- el.addEventListener("motioncomplete", doneCallback);
96
+ doneCallbacks.set(motionEl, doneCallback);
97
+ motionEl.addEventListener("motioncomplete", doneCallback);
90
98
  });
91
99
  }
92
100
  const transitionProps = computed(() => {
@@ -4,6 +4,5 @@ export interface AnimatePresenceProps {
4
4
  as?: string;
5
5
  custom?: any;
6
6
  onExitComplete?: VoidFunction;
7
- unwrapElement?: boolean | ((el: HTMLElement) => HTMLElement);
8
7
  anchorX?: 'left' | 'right';
9
8
  }
@@ -1,6 +1,6 @@
1
1
  import { IntrinsicElementAttributes } from 'vue';
2
- import { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '../../types';
3
- export interface MotionProps<T extends ElementType = 'div', K = unknown> extends Options<K> {
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 ElementType = "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<{
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], "asChild" | keyof Options<any>> & MotionProps<T, K>)> & import('vue').PublicProps;
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 getMotionProps() {
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 getProps() {
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, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue';
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) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>;
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, IntrinsicElementAttributes, PropType } from 'vue';
2
- export type AsTag = keyof IntrinsicElementAttributes | ({} & string);
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 allAttrs = { ...motionProps, ...attrs };
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: {},