motion-v 0.13.1-alpha.0 → 0.13.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];
@@ -4566,19 +4575,27 @@ 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 = {};
   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;
       const value = keyframes2[key];
-      attributes[attrName] = isMotionValue(value) ? value.get() : value;
+      attributes[key] = isMotionValue(value) ? value.get() : value;
     } else {
       styleProps[key] = keyframes2[key];
     }
   }
+  if (attributes.pathLength) {
+    buildSVGPath(attributes, attributes.pathLength, attributes.pathSpacing, attributes.pathOffset);
+  }
   return {
     attributes,
     style: styleProps
@@ -5133,14 +5150,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);
 }
@@ -5661,7 +5670,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;
@@ -5859,7 +5868,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(
@@ -7964,8 +7973,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
           touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
         });
       }
-      styleProps = createStyles(styleProps);
-      attrsProps.style = styleProps;
+      attrsProps.style = createStyles(styleProps);
       return attrsProps;
     }
     const PrimitiveRef = vue.ref();

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

@@ -205,8 +205,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
         });
       }
-      styleProps = createStyles(styleProps);
-      attrsProps.style = styleProps;
+      attrsProps.style = createStyles(styleProps);
       return attrsProps;
     }
     const PrimitiveRef = ref();

package/dist/es/state/style.mjs

@@ -1,5 +1,6 @@
 import { isNumber, isCssVar } from "./utils.mjs";
 import { isTransform, transformAlias, transformDefinitions, buildTransformTemplate } from "./transform.mjs";
+import { px } from "../value/types/numbers/units.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const style = {
   get: (element, name) => {
@@ -89,19 +90,27 @@ 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(keyframes) {
   const attributes = {};
   const styleProps = {};
   for (const key in keyframes) {
     if (key in SVG_STYLE_TO_ATTRIBUTES) {
-      const attrKey = SVG_STYLE_TO_ATTRIBUTES[key];
-      const attrName = typeof attrKey === "string" ? attrKey : key;
       const value = keyframes[key];
-      attributes[attrName] = isMotionValue(value) ? value.get() : value;
+      attributes[key] = isMotionValue(value) ? value.get() : value;
     } else {
       styleProps[key] = keyframes[key];
     }
   }
+  if (attributes.pathLength) {
+    buildSVGPath(attributes, attributes.pathLength, attributes.pathSpacing, attributes.pathOffset);
+  }
   return {
     attributes,
     style: styleProps

package/dist/es/value/types/numbers/units.mjs

@@ -6,6 +6,8 @@ function createUnitType(unit) {
   };
 }
 const percent = /* @__PURE__ */ createUnitType("%");
+const px = /* @__PURE__ */ createUnitType("px");
 export {
-  percent
+  percent,
+  px
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.13.1-alpha.0",
+  "version": "0.13.1",
   "description": "",
   "author": "",
   "license": "MIT",