motion-v 0.11.0-beta.5 → 0.11.0-beta.6

package/dist/cjs/index.js

@@ -4984,6 +4984,28 @@ function millisecondsToSeconds(milliseconds) {
 function getContextWindow({ current }) {
   return current ? current.ownerDocument.defaultView : null;
 }
+function getMotionElement(el) {
+  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
+    return getMotionElement(el.nextSibling);
+  return el;
+}
+function useDomRef() {
+  const dom = vue.ref(null);
+  const domProxy = new Proxy(dom, {
+    get(target, key) {
+      if (typeof key === "string" || typeof key === "symbol") {
+        return Reflect.get(target, key);
+      }
+      return void 0;
+    },
+    set(target, key, value) {
+      if (key === "value")
+        return Reflect.set(target, key, getMotionElement((value == null ? void 0 : value.$el) || value));
+      return true;
+    }
+  });
+  return domProxy;
+}
 const [injectMotion, provideMotion] = createContext("Motion");
 const [injectLayoutGroup, provideLayoutGroup] = createContext("LayoutGroup");
 function resolveVariant(definition, variants, custom) {
@@ -8400,11 +8422,6 @@ class MotionState {
     }
   }
 }
-function getMotionElement(el) {
-  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
-    return getMotionElement(el.nextSibling);
-  return el;
-}
 function checkMotionIsHidden(instance) {
   var _a;
   const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
@@ -9686,6 +9703,7 @@ exports.useAnimationControls = useAnimationControls;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useCombineMotionValues = useCombineMotionValues;
 exports.useComputed = useComputed;
+exports.useDomRef = useDomRef;
 exports.useDragControls = useDragControls;
 exports.useInView = useInView;
 exports.useLayoutGroup = useLayoutGroup;

package/dist/es/components/hooks/use-motion-elm.mjs

@@ -0,0 +1,9 @@
+import "vue";
+function getMotionElement(el) {
+  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
+    return getMotionElement(el.nextSibling);
+  return el;
+}
+export {
+  getMotionElement
+};

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

@@ -4,8 +4,9 @@ import { convertSvgStyleToAttributes, createStyles } from "../../state/style.mjs
 import { Primitive } from "./Primitive.mjs";
 import { MotionState } from "../../state/motion-state.mjs";
 import { injectAnimatePresence } from "../presence.mjs";
-import { getMotionElement, checkMotionIsHidden } from "./utils.mjs";
+import { checkMotionIsHidden } from "./utils.mjs";
 import { useMotionConfig } from "../motion-config/context.mjs";
+import { getMotionElement } from "../hooks/use-motion-elm.mjs";
 import { isMotionValue } from "../../utils/motion-value.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/es/components/motion/utils.d.ts

@@ -1,5 +1,4 @@
 import { ComponentPublicInstance } from 'vue';
-export declare function getMotionElement(el: HTMLElement): HTMLElement;
 /**
  * 检查是否是隐藏的 motion 元素
  * @param instance

package/dist/es/components/motion/utils.mjs

@@ -1,8 +1,4 @@
-function getMotionElement(el) {
-  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
-    return getMotionElement(el.nextSibling);
-  return el;
-}
+import { getMotionElement } from "../hooks/use-motion-elm.mjs";
 function checkMotionIsHidden(instance) {
   var _a;
   const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
@@ -10,6 +6,5 @@ function checkMotionIsHidden(instance) {
   return hasTransition && isHidden;
 }
 export {
-  checkMotionIsHidden,
-  getMotionElement
+  checkMotionIsHidden
 };

package/dist/es/index.mjs

@@ -62,6 +62,7 @@ import { useInView } from "./utils/use-in-view.mjs";
 import { useAnimationFrame } from "./utils/use-animation-frame.mjs";
 import { millisecondsToSeconds, secondsToMilliseconds } from "./utils/time-conversion.mjs";
 import { getContextWindow } from "./utils/get-context-window.mjs";
+import { useDomRef } from "./utils/use-dom-ref.mjs";
 export {
   default5 as AnimatePresence,
   default2 as LayoutGroup,
@@ -135,6 +136,7 @@ export {
   useAnimationFrame,
   useCombineMotionValues,
   useComputed,
+  useDomRef,
   useDragControls,
   useInView,
   useLayoutGroup,

package/dist/es/types/state.d.ts

@@ -32,8 +32,9 @@ export interface DragOptions {
     constraints?: false | Partial<BoundingBox>;
     dragSnapToOrigin?: boolean;
 }
+type TransformPropertiesWithoutTransition = Omit<TransformProperties, 'transition'>;
 export type MotionStyle = Partial<{
-    [K in keyof (Variant & TransformProperties)]: (Variant & TransformProperties)[K] | MotionValue;
+    [K in keyof (Variant & TransformPropertiesWithoutTransition)]: string | number | undefined | MotionValue;
 }>;
 export type ElementType = keyof IntrinsicElementAttributes;
 export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps, InViewProps, DragProps, PanProps, FocusProps {

package/dist/es/utils/index.d.ts

@@ -4,3 +4,4 @@ export * from './use-in-view';
 export * from './use-animation-frame';
 export * from './time-conversion';
 export * from './get-context-window';
+export * from './use-dom-ref';

package/dist/es/utils/use-dom-ref.d.ts

@@ -1 +1 @@
-export declare function useDomRef<T extends Element = any>(): import('vue').Ref<import('vue').UnwrapRef<T>>;
+export declare function useDomRef(): import('vue').Ref<any>;

package/dist/es/utils/use-dom-ref.mjs

@@ -0,0 +1,22 @@
+import { getMotionElement } from "../components/hooks/use-motion-elm.mjs";
+import { ref } from "vue";
+function useDomRef() {
+  const dom = ref(null);
+  const domProxy = new Proxy(dom, {
+    get(target, key) {
+      if (typeof key === "string" || typeof key === "symbol") {
+        return Reflect.get(target, key);
+      }
+      return void 0;
+    },
+    set(target, key, value) {
+      if (key === "value")
+        return Reflect.set(target, key, getMotionElement((value == null ? void 0 : value.$el) || value));
+      return true;
+    }
+  });
+  return domProxy;
+}
+export {
+  useDomRef
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.11.0-beta.5",
+  "version": "0.11.0-beta.6",
   "description": "",
   "author": "",
   "license": "MIT",