motion-v 0.11.3 → 0.12.0-beta.1

package/dist/cjs/index.js

@@ -3295,7 +3295,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
   }
   return animations;
 }
-function isSVGElement$2(element) {
+function isSVGElement$1(element) {
   return element instanceof SVGElement && element.tagName !== "svg";
 }
 const createAxisDelta = () => ({
@@ -4244,7 +4244,7 @@ function createDOMVisualElement(element) {
       latestValues: {}
     }
   };
-  const node = isSVGElement$2(element) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
+  const node = isSVGElement$1(element) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
   node.mount(element);
   visualElementStore.set(element, node);
 }
@@ -5117,9 +5117,6 @@ function shallowCompare(next, prev) {
   }
   return true;
 }
-function getOptions(options, key) {
-  return options[key] ? { ...options, ...options[key], [key]: void 0 } : { ...options };
-}
 function isCssVar(name) {
   return name == null ? void 0 : name.startsWith("--");
 }
@@ -5185,7 +5182,7 @@ const svgElements = [
   "textPath"
 ];
 const svgElementSet = new Set(svgElements);
-function isSVGElement$1(as) {
+function isSVGElement(as) {
   return svgElementSet.has(as);
 }
 function isAnimateChanged(oldOptions, newOptions) {
@@ -6424,32 +6421,6 @@ class DragGesture extends Feature {
     this.removeListeners();
   }
 }
-function isSVGElement(element) {
-  return element instanceof SVGElement && element.tagName !== "svg";
-}
-class SVGFeature extends Feature {
-  mount() {
-    const instance = this.state.element;
-    if (!isSVGElement(instance)) {
-      return;
-    }
-    const visualElement = this.state.visualElement;
-    frame.read(() => {
-      try {
-        visualElement.renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
-      } catch (e) {
-        visualElement.renderState.dimensions = {
-          x: 0,
-          y: 0,
-          width: 0,
-          height: 0
-        };
-      }
-    });
-  }
-  unmount() {
-  }
-}
 function pixelsToPercent(pixels, axis) {
   if (axis.max === axis.min)
     return 0;
@@ -6562,16 +6533,12 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
-    var _a, _b;
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
     if (projection) {
       if (layoutGroup == null ? void 0 : layoutGroup.group) {
         layoutGroup.group.remove(projection);
       }
-      if ((_b = (_a = projection.getStack()) == null ? void 0 : _a.lead) == null ? void 0 : _b.animationProgress) {
-        return;
-      }
       this.didUpdate();
     }
   }
@@ -7056,7 +7023,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {
       if (this.instance)
         return;
-      this.isSVG = isSVGElement$2(instance);
+      this.isSVG = isSVGElement$1(instance);
       this.instance = instance;
       const { layoutId, layout, visualElement } = this.options;
       if (visualElement && !visualElement.current) {
@@ -8118,7 +8085,6 @@ class FeatureManager {
       new HoverGesture(state2),
       new PressGesture(state2),
       new InViewGesture(state2),
-      new SVGFeature(state2),
       new LayoutFeature(state2),
       new ProjectionFeature(state2),
       new PanGesture(state2),
@@ -8184,7 +8150,7 @@ class AnimationFeature extends Feature {
   }
 }
 function createVisualElement(Component, options) {
-  return isSVGElement$1(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
+  return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }
 function motionEvent(name, target, isExit) {
   return new CustomEvent(name, { detail: { target, isExit } });
@@ -8205,7 +8171,7 @@ function animateUpdates({
   if (directAnimate)
     animationOptions = resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
   else
-    animationOptions = resolveStateAnimation.call(this, controlActiveState, transition);
+    animationOptions = resolveStateAnimation.call(this, controlActiveState);
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
   const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, this.activeStates, isFallback);
   return executeAnimations.call(this, {
@@ -8221,21 +8187,18 @@ function resolveDirectAnimation(directAnimate, directTransition) {
   const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
   if (!variant)
     return {};
-  const transition = { ...this.options.transition, ...directTransition || variant.transition };
-  const animationOptions = {};
+  const transition = variant.transition || directTransition || this.options.transition || {};
   Object.entries(variant).forEach(([key, value]) => {
     if (key === "transition")
       return;
     this.target[key] = value;
-    animationOptions[key] = getOptions(transition, key);
   });
-  return animationOptions;
+  return transition;
 }
-function resolveStateAnimation(controlActiveState, transition) {
+function resolveStateAnimation(controlActiveState) {
   if (controlActiveState)
     this.activeStates = { ...this.activeStates, ...controlActiveState };
-  const transitionOptions = {};
-  let variantTransition = {};
+  let variantTransition = this.options.transition;
   let variant = {};
   STATE_TYPES.forEach((name) => {
     if (!this.activeStates[name] || isAnimationControls(this.options[name]))
@@ -8249,17 +8212,15 @@ function resolveStateAnimation(controlActiveState, transition) {
     if (!resolvedVariant)
       return;
     if (name !== "initial")
-      variantTransition = resolvedVariant.transition || this.options.transition;
+      variantTransition = resolvedVariant.transition || this.options.transition || {};
     variant = Object.assign(variant, resolvedVariant);
   });
-  Object.assign(transition, variantTransition);
   Object.entries(variant).forEach(([key, value]) => {
     if (key === "transition")
       return;
     this.target[key] = value;
-    transitionOptions[key] = getOptions(transition, key);
   });
-  return transitionOptions;
+  return variantTransition;
 }
 function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
   const factories = [];
@@ -8268,16 +8229,18 @@ function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
     if (!hasChanged(prevTarget[key], this.target[key]))
       return;
     (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
-    const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
-    const targetTransition = animationOptions[key];
-    factories.push(() => animate(
-      this.element,
-      { [key]: keyValue },
-      {
-        ...targetTransition,
-        delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
-      }
-    ));
+    const keyValue = this.target[key] === "none" && core.isDef(transformResetValue[key]) ? transformResetValue[key] : this.target[key];
+    factories.push(() => {
+      var _a2;
+      return animate(
+        this.element,
+        { [key]: keyValue },
+        {
+          ...animationOptions,
+          delay: (((_a2 = animationOptions[key]) == null ? void 0 : _a2.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
+        }
+      );
+    });
   });
   return factories;
 }
@@ -8434,7 +8397,7 @@ class MotionState {
     this.updateOptions();
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      this.startAnimation();
+      this.animateUpdates();
     }
     if (this.options.layoutId) {
       mountedLayoutIds.add(this.options.layoutId);
@@ -8874,11 +8837,10 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   props: {
     mode: { default: "sync" },
     initial: { type: Boolean, default: true },
-    multiple: { type: Boolean, default: false },
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: Boolean, default: false },
+    unwrapElement: { type: [Boolean, Function], default: false },
     anchorX: { default: "left" }
   },
   setup(__props) {
@@ -8910,7 +8872,11 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     });
     function exit(el, done) {
       if (props.unwrapElement) {
-        el = el.firstElementChild;
+        if (typeof props.unwrapElement === "function") {
+          el = props.unwrapElement(el) || el;
+        } else {
+          el = el.firstElementChild || el;
+        }
       }
       const state2 = mountedStates.get(el);
       if (!state2) {
@@ -8949,7 +8915,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       });
     }
     const transitionProps = vue.computed(() => {
-      if (props.multiple) {
+      if (props.mode !== "wait") {
         return {
           tag: props.as
         };
@@ -8959,7 +8925,8 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       };
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.multiple ? vue.TransitionGroup : vue.Transition), vue.mergeProps({ css: false }, transitionProps.value, {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.mode === "wait" ? vue.Transition : vue.TransitionGroup), vue.mergeProps({ css: false }, transitionProps.value, {
+        appear: "",
         onEnter: enter,
         onLeave: exit
       }), {
@@ -9483,6 +9450,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       }
       return axis.value;
     });
+    const isDragging2 = vue.ref(false);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$6), vue.mergeProps(bindProps(), {
         drag: drag.value,
@@ -9490,12 +9458,17 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
           const { velocity } = gesturePoint;
           velocity[vue.unref(axis)] && vue.unref(updateOrder)(_ctx.value, point2[vue.unref(axis)].get(), velocity[vue.unref(axis)]);
+          !isDragging2.value && (isDragging2.value = true);
           _ctx.onDrag && _ctx.onDrag(event, gesturePoint);
         }),
-        onLayoutMeasure: _cache[1] || (_cache[1] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
+        onDragEnd: _cache[1] || (_cache[1] = (event, gesturePoint) => {
+          isDragging2.value = false;
+          _ctx.onDragEnd && _ctx.onDragEnd(event, gesturePoint);
+        }),
+        onLayoutMeasure: _cache[2] || (_cache[2] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
       }), {
         default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default"),
+          vue.renderSlot(_ctx.$slots, "default", { isDragging: isDragging2.value }),
           vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
         ]),
         _: 3
@@ -9506,8 +9479,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
 const ReorderGroup = _sfc_main$3;
 const ReorderItem = _sfc_main$2;
 const Reorder = {
-  Group: ReorderGroup,
-  Item: ReorderItem
+  Group: _sfc_main$3,
+  Item: _sfc_main$2
 };
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "RowValue",

package/dist/es/components/animate-presence/AnimatePresence.d.ts

@@ -10,20 +10,17 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
     mode: string;
     initial: boolean;
-    multiple: boolean;
     unwrapElement: boolean;
     anchorX: string;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
     mode: string;
     initial: boolean;
-    multiple: boolean;
     unwrapElement: boolean;
     anchorX: string;
 }>>>, {
     initial: boolean;
     mode: "wait" | "popLayout" | "sync";
-    multiple: boolean;
-    unwrapElement: boolean;
+    unwrapElement: boolean | ((el: HTMLElement) => HTMLElement);
     anchorX: "left" | "right";
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/es/components/animate-presence/AnimatePresence.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onUnmounted, computed, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, onMounted, onUnmounted, computed, openBlock, createBlock, resolveDynamicComponent, Transition, TransitionGroup, mergeProps, withCtx, renderSlot } from "vue";
 import { mountedStates } from "../../state/motion-state.mjs";
 import { provideAnimatePresence, removeDoneCallback, doneCallbacks } from "../presence.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
@@ -12,11 +12,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     mode: { default: "sync" },
     initial: { type: Boolean, default: true },
-    multiple: { type: Boolean, default: false },
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: Boolean, default: false },
+    unwrapElement: { type: [Boolean, Function], default: false },
     anchorX: { default: "left" }
   },
   setup(__props) {
@@ -48,7 +47,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     function exit(el, done) {
       if (props.unwrapElement) {
-        el = el.firstElementChild;
+        if (typeof props.unwrapElement === "function") {
+          el = props.unwrapElement(el) || el;
+        } else {
+          el = el.firstElementChild || el;
+        }
       }
       const state = mountedStates.get(el);
       if (!state) {
@@ -87,7 +90,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     const transitionProps = computed(() => {
-      if (props.multiple) {
+      if (props.mode !== "wait") {
         return {
           tag: props.as
         };
@@ -97,7 +100,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(_ctx.multiple ? TransitionGroup : Transition), mergeProps({ css: false }, transitionProps.value, {
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.mode === "wait" ? Transition : TransitionGroup), mergeProps({ css: false }, transitionProps.value, {
+        appear: "",
         onEnter: enter,
         onLeave: exit
       }), {

package/dist/es/components/animate-presence/types.d.ts

@@ -1,10 +1,9 @@
 export interface AnimatePresenceProps {
     mode?: 'wait' | 'popLayout' | 'sync';
     initial?: boolean;
-    multiple?: boolean;
     as?: string;
     custom?: any;
     onExitComplete?: VoidFunction;
-    unwrapElement?: boolean;
+    unwrapElement?: boolean | ((el: HTMLElement) => HTMLElement);
     anchorX?: 'left' | 'right';
 }

package/dist/es/components/reorder/Item.d.ts

@@ -1,6 +1,6 @@
 import { MotionProps } from '../motion';
 import { ElementType } from '../../types';
-export interface GroupItemProps<T extends ElementType, K = unknown, V = unknown> extends MotionProps<T, K> {
+export interface GroupItemProps<T extends ElementType = 'li', K = unknown, V = unknown> extends MotionProps<T, K> {
     /**
      * The value in the list that this component represents.
      *
@@ -15,74 +15,22 @@ export interface GroupItemProps<T extends ElementType, K = unknown, V = unknown>
      */
     layout?: true | 'position';
 }
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<GroupItemProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>>, {
-    layout: boolean;
-    as: ElementType;
-    initial: any;
-    animate: any;
-    hover: any;
-    inView: any;
-    layoutId: any;
-    layoutScroll: boolean;
-    layoutRoot: boolean;
-    dragListener: boolean;
-    dragElastic: number;
-    dragMomentum: boolean;
-    whileDrag: any;
-    crossfade: boolean;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GroupItemProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>>, {
-    layout: boolean;
-    as: ElementType;
-    initial: any;
-    animate: any;
-    hover: any;
-    inView: any;
-    layoutId: any;
-    layoutScroll: boolean;
-    layoutRoot: boolean;
-    dragListener: boolean;
-    dragElastic: number;
-    dragMomentum: boolean;
-    whileDrag: any;
-    crossfade: boolean;
-}>>>, {
-    initial: import('../../types').VariantLabels | import('../../types').Variant | boolean;
-    animate: import('../../types').VariantLabels | import('../../types').Variant | import('../../animation/types').AnimationControls;
-    whileDrag: import('../../types').Options["whileDrag"];
-    layout: true | "position";
-    layoutId: string;
-    layoutScroll: boolean;
-    layoutRoot: boolean;
-    crossfade: boolean;
-    dragElastic: number;
-    dragMomentum: boolean;
-    dragListener: boolean;
-    as: keyof import('vue').IntrinsicElementAttributes;
-    hover: import('../../types').Options["hover"];
-    inView: import('../../types').Options["inView"];
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const _default: <T extends ElementType = "li", K = unknown, V = 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<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & GroupItemProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?(_: {
+            isDragging: boolean;
+        }): any;
     };
+    emit: {};
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};

package/dist/es/components/reorder/Item.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, useAttrs, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, toRefs, useAttrs, computed, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { useReorderContext } from "./context.mjs";
 import { useDefaultMotionValue } from "./utils.mjs";
 import { invariant } from "hey-listen";
@@ -110,6 +110,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return axis.value;
     });
+    const isDragging = ref(false);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(bindProps(), {
         drag: drag.value,
@@ -117,12 +118,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
           const { velocity } = gesturePoint;
           velocity[unref(axis)] && unref(updateOrder)(_ctx.value, point[unref(axis)].get(), velocity[unref(axis)]);
+          !isDragging.value && (isDragging.value = true);
           _ctx.onDrag && _ctx.onDrag(event, gesturePoint);
         }),
-        onLayoutMeasure: _cache[1] || (_cache[1] = (measured) => unref(registerItem)(_ctx.value, measured))
+        onDragEnd: _cache[1] || (_cache[1] = (event, gesturePoint) => {
+          isDragging.value = false;
+          _ctx.onDragEnd && _ctx.onDragEnd(event, gesturePoint);
+        }),
+        onLayoutMeasure: _cache[2] || (_cache[2] = (measured) => unref(registerItem)(_ctx.value, measured))
       }), {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default"),
+          renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value }),
           createTextVNode(" " + toDisplayString(warning()), 1)
         ]),
         _: 3