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 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 });
@@ -7431,7 +7439,8 @@ function animateUpdates({
7431
7439
  });
7432
7440
  }
7433
7441
  function resolveDirectAnimation(directAnimate, directTransition) {
7434
- 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));
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 getMotionProps() {
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 getProps() {
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
- if (props.unwrapElement) {
8125
- if (typeof props.unwrapElement === "function") {
8126
- el = props.unwrapElement(el) || el;
8127
- } else {
8128
- 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);
8129
8160
  }
8161
+ return;
8130
8162
  }
8131
- const state2 = mountedStates.get(el);
8132
- if (!state2) {
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 _a, _b;
8140
- 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) {
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(el);
8146
- exitDom.delete(el);
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 (!el.isConnected) {
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(el, doneCallback);
8164
- el.addEventListener("motioncomplete", doneCallback);
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
- 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 });
@@ -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: {},