motion-v 0.13.0 → 0.13.1-alpha.1

package/dist/cjs/index.js

@@ -758,7 +758,7 @@ const createUnitType$1 = (unit) => ({
 });
 const degrees = /* @__PURE__ */ createUnitType$1("deg");
 const percent$1 = /* @__PURE__ */ createUnitType$1("%");
-const px = /* @__PURE__ */ createUnitType$1("px");
+const px$1 = /* @__PURE__ */ createUnitType$1("px");
 const vh = /* @__PURE__ */ createUnitType$1("vh");
 const vw = /* @__PURE__ */ createUnitType$1("vw");
 const progressPercentage = {
@@ -889,40 +889,40 @@ const filter = {
 };
 const browserNumberValueTypes = {
   // Border props
-  borderWidth: px,
-  borderTopWidth: px,
-  borderRightWidth: px,
-  borderBottomWidth: px,
-  borderLeftWidth: px,
-  borderRadius: px,
-  radius: px,
-  borderTopLeftRadius: px,
-  borderTopRightRadius: px,
-  borderBottomRightRadius: px,
-  borderBottomLeftRadius: px,
+  borderWidth: px$1,
+  borderTopWidth: px$1,
+  borderRightWidth: px$1,
+  borderBottomWidth: px$1,
+  borderLeftWidth: px$1,
+  borderRadius: px$1,
+  radius: px$1,
+  borderTopLeftRadius: px$1,
+  borderTopRightRadius: px$1,
+  borderBottomRightRadius: px$1,
+  borderBottomLeftRadius: px$1,
   // Positioning props
-  width: px,
-  maxWidth: px,
-  height: px,
-  maxHeight: px,
-  top: px,
-  right: px,
-  bottom: px,
-  left: px,
+  width: px$1,
+  maxWidth: px$1,
+  height: px$1,
+  maxHeight: px$1,
+  top: px$1,
+  right: px$1,
+  bottom: px$1,
+  left: px$1,
   // Spacing props
-  padding: px,
-  paddingTop: px,
-  paddingRight: px,
-  paddingBottom: px,
-  paddingLeft: px,
-  margin: px,
-  marginTop: px,
-  marginRight: px,
-  marginBottom: px,
-  marginLeft: px,
+  padding: px$1,
+  paddingTop: px$1,
+  paddingRight: px$1,
+  paddingBottom: px$1,
+  paddingLeft: px$1,
+  margin: px$1,
+  marginTop: px$1,
+  marginRight: px$1,
+  marginBottom: px$1,
+  marginLeft: px$1,
   // Misc
-  backgroundPositionX: px,
-  backgroundPositionY: px
+  backgroundPositionX: px$1,
+  backgroundPositionY: px$1
 };
 const transformValueTypes = {
   rotate: degrees,
@@ -936,19 +936,19 @@ const transformValueTypes = {
   skew: degrees,
   skewX: degrees,
   skewY: degrees,
-  distance: px,
-  translateX: px,
-  translateY: px,
-  translateZ: px,
-  x: px,
-  y: px,
-  z: px,
-  perspective: px,
-  transformPerspective: px,
+  distance: px$1,
+  translateX: px$1,
+  translateY: px$1,
+  translateZ: px$1,
+  x: px$1,
+  y: px$1,
+  z: px$1,
+  perspective: px$1,
+  transformPerspective: px$1,
   opacity: alpha,
   originX: progressPercentage,
   originY: progressPercentage,
-  originZ: px
+  originZ: px$1
 };
 const int = {
   ...number,
@@ -958,7 +958,7 @@ const numberValueTypes = {
   ...browserNumberValueTypes,
   ...transformValueTypes,
   zIndex: int,
-  size: px,
+  size: px$1,
   // SVG
   fillOpacity: alpha,
   strokeOpacity: alpha,
@@ -1083,7 +1083,7 @@ const readTransformValue = (instance, name) => {
 function convertTransformToNumber(value) {
   return parseFloat(value.trim());
 }
-const isNumOrPxType = (v) => v === number || v === px;
+const isNumOrPxType = (v) => v === number || v === px$1;
 const transformKeys = /* @__PURE__ */ new Set(["x", "y", "z"]);
 const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
@@ -1279,7 +1279,7 @@ const auto = {
   test: (v) => v === "auto",
   parse: (v) => v
 };
-const dimensionValueTypes = [number, px, percent$1, degrees, vw, vh, auto];
+const dimensionValueTypes = [number, px$1, percent$1, degrees, vw, vh, auto];
 const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
 class DOMKeyframesResolver extends KeyframeResolver {
   constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
@@ -3093,16 +3093,16 @@ const camelKeys = {
   offset: "strokeDashoffset",
   array: "strokeDasharray"
 };
-function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
+function buildSVGPath$1(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
   attrs.pathLength = 1;
   const keys2 = useDashCase ? dashKeys : camelKeys;
-  attrs[keys2.offset] = px.transform(-offset);
-  const pathLength = px.transform(length);
-  const pathSpacing = px.transform(spacing);
+  attrs[keys2.offset] = px$1.transform(-offset);
+  const pathLength = px$1.transform(length);
+  const pathSpacing = px$1.transform(spacing);
   attrs[keys2.array] = `${pathLength} ${pathSpacing}`;
 }
 function calcOrigin$1(origin, offset, size) {
-  return typeof origin === "string" ? origin : px.transform(offset + size * origin);
+  return typeof origin === "string" ? origin : px$1.transform(offset + size * origin);
 }
 function calcSVGTransformOrigin(dimensions, originX, originY) {
   const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
@@ -3146,7 +3146,7 @@ function buildSVGAttrs(state2, {
   if (attrScale !== void 0)
     attrs.scale = attrScale;
   if (pathLength !== void 0) {
-    buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
+    buildSVGPath$1(attrs, pathLength, pathSpacing, pathOffset, false);
   }
 }
 const camelCaseAttributes = /* @__PURE__ */ new Set([
@@ -4478,6 +4478,15 @@ const transformResetValue = {
   y: 0,
   z: 0
 };
+function createUnitType(unit) {
+  return {
+    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
+    parse: parseFloat,
+    transform: (v) => `${v}${unit}`
+  };
+}
+const percent = /* @__PURE__ */ createUnitType("%");
+const px = /* @__PURE__ */ createUnitType("px");
 const style = {
   get: (element, name) => {
     let value = isCssVar(name) ? element.style.getPropertyValue(name) : getComputedStyle(element)[name];
@@ -4537,15 +4546,12 @@ const SVG_STYLE_TO_ATTRIBUTES = {
   cy: true,
   r: true,
   d: true,
-  x: true,
-  y: true,
   x1: true,
   y1: true,
   x2: true,
   y2: true,
   points: true,
   pathLength: true,
-  transform: true,
   viewBox: true,
   width: true,
   height: true,
@@ -4569,19 +4575,31 @@ const SVG_STYLE_TO_ATTRIBUTES = {
   letterSpacing: true,
   vectorEffect: true
 };
+function buildSVGPath(attrs, length, spacing = 1, offset = 0) {
+  attrs.pathLength = 1;
+  attrs["stroke-dashoffset"] = px.transform(-offset);
+  const pathLength = px.transform(length);
+  const pathSpacing = px.transform(spacing);
+  attrs["stroke-dasharray"] = `${pathLength} ${pathSpacing}`;
+}
 function convertSvgStyleToAttributes(keyframes2) {
   const attributes = {};
   const styleProps = {};
+  let shouldBuildPath = false;
   for (const key in keyframes2) {
     if (key in SVG_STYLE_TO_ATTRIBUTES) {
-      const attrKey = SVG_STYLE_TO_ATTRIBUTES[key];
-      const attrName = typeof attrKey === "string" ? attrKey : key;
+      if (key === "pathLength") {
+        shouldBuildPath = true;
+      }
       const value = keyframes2[key];
-      attributes[attrName] = isMotionValue(value) ? value.get() : value;
+      attributes[key] = isMotionValue(value) ? value.get() : value;
     } else {
       styleProps[key] = keyframes2[key];
     }
   }
+  if (shouldBuildPath) {
+    buildSVGPath(attributes, attributes.pathLength, attributes.pathSpacing, attributes.pathOffset);
+  }
   return {
     attributes,
     style: styleProps
@@ -5136,14 +5154,6 @@ function createBox() {
 function eachAxis$1(callback) {
   return [callback("x"), callback("y")];
 }
-function createUnitType(unit) {
-  return {
-    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`
-  };
-}
-const percent = /* @__PURE__ */ createUnitType("%");
 function isWillChangeMotionValue(value) {
   return Boolean(isMotionValue(value) && value.add);
 }
@@ -5664,7 +5674,7 @@ const correctBorderRadius = {
     if (!node.target)
       return latest;
     if (typeof latest === "string") {
-      if (px.test(latest)) {
+      if (px$1.test(latest)) {
         latest = parseFloat(latest);
       } else {
         return latest;
@@ -5862,7 +5872,7 @@ function resolveMotionValue(value) {
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 const numBorders = borders.length;
 const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
-const isPx = (value) => typeof value === "number" || px.test(value);
+const isPx = (value) => typeof value === "number" || px$1.test(value);
 function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
   if (shouldCrossfadeOpacity) {
     target.opacity = mixNumber$2(
@@ -7952,9 +7962,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         ...isSVG ? {} : state2.visualElement.latestValues
       };
       if (isSVG) {
-        const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.isMounted() ? state2.target : state2.baseTarget);
+        const { attributes, style: style2 } = convertSvgStyleToAttributes({
+          ...state2.isMounted() ? state2.target : state2.baseTarget,
+          ...styleProps
+        });
         Object.assign(attrsProps, attributes);
-        Object.assign(styleProps, style2);
+        styleProps = style2;
       }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
@@ -7964,10 +7977,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
           touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
         });
       }
-      styleProps = createStyles({
-        ...styleProps,
-        ...props.style
-      });
+      styleProps = createStyles(styleProps);
       attrsProps.style = styleProps;
       return attrsProps;
     }
@@ -8396,9 +8406,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     });
     const attrs = vue.useAttrs();
     function bindProps() {
+      const { axis: axis2, values, "onUpdate:values": onUpdateValues, ...rest } = props;
       return {
         ...attrs,
-        ...props
+        ...rest
       };
     }
     return (_ctx, _cache) => {
@@ -8717,9 +8728,10 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     const { axis, registerItem, updateOrder } = context || {};
     const attrs = vue.useAttrs();
     function bindProps() {
+      const { value, ...rest } = props;
       return {
         ...attrs,
-        ...props,
+        ...rest,
         style: {
           ...style2.value,
           x: point2.x,

package/dist/es/components/motion/Motion.vue.mjs

@@ -190,9 +190,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ...isSVG ? {} : state.visualElement.latestValues
       };
       if (isSVG) {
-        const { attributes, style } = convertSvgStyleToAttributes(state.isMounted() ? state.target : state.baseTarget);
+        const { attributes, style } = convertSvgStyleToAttributes({
+          ...state.isMounted() ? state.target : state.baseTarget,
+          ...styleProps
+        });
         Object.assign(attrsProps, attributes);
-        Object.assign(styleProps, style);
+        styleProps = style;
       }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
@@ -202,10 +205,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
         });
       }
-      styleProps = createStyles({
-        ...styleProps,
-        ...props.style
-      });
+      styleProps = createStyles(styleProps);
       attrsProps.style = styleProps;
       return attrsProps;
     }

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

@@ -1,6 +1,6 @@
 import { MotionProps } from '../motion';
-import { ElementType } from '../../types';
-export interface GroupProps<T extends ElementType, K = unknown, V = unknown> extends MotionProps<T, K> {
+import { AsTag } from '../../types';
+export interface GroupProps<T extends AsTag, K, V> extends MotionProps<T, K> {
     /**
      * The axis to reorder along. By default, items will be draggable on this axis.
      * To make draggable on both axes, set `<Reorder.Item drag />`
@@ -34,38 +34,20 @@ export interface GroupProps<T extends ElementType, K = unknown, V = unknown> ext
      */
     'values': V[];
 }
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<GroupProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>>, {
-    as: string;
-    axis: string;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GroupProps<keyof import('vue').IntrinsicElementAttributes, unknown, unknown>>, {
-    as: string;
-    axis: string;
-}>>>, {
-    as: keyof import('vue').IntrinsicElementAttributes;
-    axis: "x" | "y";
-}, {}>, {
-    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, K, V>(__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> & GroupProps<AsTag, K, V>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?(_: {}): 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/Group.vue.mjs

@@ -119,9 +119,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const attrs = useAttrs();
     function bindProps() {
+      const { axis: axis2, values, "onUpdate:values": onUpdateValues, ...rest } = props;
       return {
         ...attrs,
-        ...props
+        ...rest
       };
     }
     return (_ctx, _cache) => {

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

@@ -96,9 +96,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { axis, registerItem, updateOrder } = context || {};
     const attrs = useAttrs();
     function bindProps() {
+      const { value, ...rest } = props;
       return {
         ...attrs,
-        ...props,
+        ...rest,
         style: {
           ...style.value,
           x: point.x,