motion-v 0.3.0 → 0.4.0

package/dist/es/animation/use-animate.mjs

@@ -1,21 +1,31 @@
-import { ref as f, onUnmounted as m } from "vue";
-import { createScopedAnimate as s } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animate/index.mjs";
-function p() {
-  const o = f(null), e = new Proxy(o, {
-    get(n, t) {
-      if (typeof t == "string" || typeof t == "symbol")
-        return t === "current" ? Reflect.get(n, "value") : Reflect.get(n, t);
+import { ref, onUnmounted } from "vue";
+import { createScopedAnimate } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animate/index.mjs";
+function useAnimate() {
+  const dom = ref(null);
+  const domProxy = new Proxy(dom, {
+    get(target, key) {
+      if (typeof key === "string" || typeof key === "symbol") {
+        if (key === "current")
+          return Reflect.get(target, "value");
+        return Reflect.get(target, key);
+      }
+      return void 0;
     },
-    set(n, t, r) {
-      return t === "value" ? Reflect.set(n, t, (r == null ? void 0 : r.$el) || r) : t === "animations" ? Reflect.set(n, t, r) : !0;
+    set(target, key, value) {
+      if (key === "value")
+        return Reflect.set(target, key, (value == null ? void 0 : value.$el) || value);
+      if (key === "animations")
+        return Reflect.set(target, key, value);
+      return true;
     }
   });
-  e.animations = [];
-  const i = s(e);
-  return m(() => {
-    e.animations.forEach((n) => n.stop());
-  }), [e, i];
+  domProxy.animations = [];
+  const animate = createScopedAnimate(domProxy);
+  onUnmounted(() => {
+    domProxy.animations.forEach((animation) => animation.stop());
+  });
+  return [domProxy, animate];
 }
 export {
-  p as useAnimate
+  useAnimate
 };

package/dist/es/components/AnimatePresence.vue.mjs

@@ -1,53 +1,71 @@
-import { defineComponent as p, toRefs as v, openBlock as C, createBlock as A, resolveDynamicComponent as k, TransitionGroup as g, Transition as h, withCtx as y, renderSlot as B } from "vue";
-import { mountedStates as r } from "../state/motion-state.mjs";
-import { provideAnimatePresence as b, doneCallbacks as m, removeDoneCallback as i } from "./presence.mjs";
-const x = /* @__PURE__ */ p({
-  name: "AnimatePresence",
-  inheritAttrs: !0,
+import { defineComponent, toRefs, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, withCtx, renderSlot } from "vue";
+import { mountedStates } from "../state/motion-state.mjs";
+import { provideAnimatePresence, doneCallbacks, removeDoneCallback } from "./presence.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "AnimatePresence",
+    inheritAttrs: true
+  },
   __name: "AnimatePresence",
   props: {
     mode: { default: "sync" },
-    initial: { type: Boolean, default: !0 },
-    multiple: { type: Boolean, default: !1 },
+    initial: { type: Boolean, default: true },
+    multiple: { type: Boolean, default: false },
     as: {}
   },
-  setup(u) {
-    const l = u, { initial: c } = v(l);
-    b({
-      initial: c,
-      safeUnmount(e) {
-        return !m.has(e);
+  setup(__props) {
+    const props = __props;
+    const { initial } = toRefs(props);
+    provideAnimatePresence({
+      initial,
+      safeUnmount(el) {
+        return !doneCallbacks.has(el);
       }
     });
-    function f(e) {
-      const t = r.get(e);
-      t && (i(e), t.setActive("exit", !1));
+    function enter(el) {
+      const state = mountedStates.get(el);
+      if (!state) {
+        return;
+      }
+      removeDoneCallback(el);
+      state.setActive("exit", false);
     }
-    function d(e, t) {
-      const n = r.get(e);
-      if (!n)
-        return t();
-      i(e);
-      function a(o) {
-        var s;
-        (s = o == null ? void 0 : o.detail) != null && s.isExit && (i(e), t(), e.isConnected || n.unmount());
+    function exit(el, done) {
+      const state = mountedStates.get(el);
+      if (!state) {
+        return done();
+      }
+      removeDoneCallback(el);
+      function doneCallback(e) {
+        var _a;
+        if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
+          removeDoneCallback(el);
+          done();
+          if (!el.isConnected) {
+            state.unmount();
+          }
+        }
       }
-      m.set(e, a), e.addEventListener("motioncomplete", a), n.setActive("exit", !0);
+      doneCallbacks.set(el, doneCallback);
+      el.addEventListener("motioncomplete", doneCallback);
+      state.setActive("exit", true);
     }
-    return (e, t) => (C(), A(k(e.multiple ? g : h), {
-      tag: e.multiple ? e.as : void 0,
-      css: !1,
-      mode: e.mode === "wait" ? "out-in" : void 0,
-      onEnter: f,
-      onLeave: d
-    }, {
-      default: y(() => [
-        B(e.$slots, "default")
-      ]),
-      _: 3
-    }, 40, ["tag", "mode"]));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.multiple ? TransitionGroup : Transition), {
+        tag: _ctx.multiple ? _ctx.as : void 0,
+        css: false,
+        mode: _ctx.mode === "wait" ? "out-in" : void 0,
+        onEnter: enter,
+        onLeave: exit
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 40, ["tag", "mode"]);
+    };
   }
 });
 export {
-  x as default
+  _sfc_main as default
 };

package/dist/es/components/AnimatePresence.vue2.mjs

@@ -1,4 +1,4 @@
-import f from "./AnimatePresence.vue.mjs";
+import _sfc_main from "./AnimatePresence.vue.mjs";
 export {
-  f as default
+  _sfc_main as default
 };

package/dist/es/components/LayoutGroup.vue.mjs

@@ -0,0 +1,39 @@
+import { defineComponent, watch, renderSlot } from "vue";
+import { injectLayoutGroup, provideLayoutGroup, shouldInheritId, shouldInheritGroup } from "./context.mjs";
+import { nodeGroup } from "./group.mjs";
+import { useForceUpdate } from "./use-force-update.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LayoutGroup",
+  props: {
+    id: {},
+    inherit: { type: [Boolean, String] }
+  },
+  setup(__props) {
+    const props = __props;
+    const layoutGroup = injectLayoutGroup(null);
+    const [forceRender, key] = useForceUpdate();
+    function generateId() {
+      const upstreamId = layoutGroup == null ? void 0 : layoutGroup.id;
+      return shouldInheritId(props.inherit) && upstreamId ? props.id ? `${upstreamId}-${props.id}` : upstreamId : props.id;
+    }
+    function generateGroup() {
+      return shouldInheritGroup(props.inherit) ? (layoutGroup == null ? void 0 : layoutGroup.group) || nodeGroup() : nodeGroup();
+    }
+    const memoizedContext = {
+      id: generateId(),
+      group: generateGroup(),
+      forceRender,
+      key
+    };
+    watch(key, () => {
+      memoizedContext.id = generateId();
+    });
+    provideLayoutGroup(memoizedContext);
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/LayoutGroup.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./LayoutGroup.vue.mjs";
+export {
+  _sfc_main as default
+};

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

@@ -1,16 +1,18 @@
-import { defineComponent as f, mergeDefaults as v, ref as y, useAttrs as g, getCurrentInstance as h, onMounted as S, onUnmounted as M, onUpdated as F, openBlock as P, createBlock as b, unref as j, mergeProps as w, withCtx as C, renderSlot as V } from "vue";
-import { injectMotion as O, provideMotion as E } from "./context.mjs";
-import { createStyles as a, convertSvgStyleToAttributes as T } from "../state/style.mjs";
-import { Primitive as A } from "./Primitive.mjs";
-import { MotionState as B } from "../state/motion-state.mjs";
-import { isSVGElement as U } from "../state/utils.mjs";
-import { injectAnimatePresence as _ } from "./presence.mjs";
-import { isMotionValue as H } from "../utils/motion-value.mjs";
-const z = /* @__PURE__ */ f({
-  name: "Motion",
-  inheritAttrs: !1,
+import { defineComponent, mergeDefaults, ref, useAttrs, getCurrentInstance, onMounted, onUnmounted, onUpdated, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { injectMotion, injectLayoutGroup, provideMotion } from "./context.mjs";
+import { convertSvgStyleToAttributes, createStyles } from "../state/style.mjs";
+import { Primitive } from "./Primitive.mjs";
+import { MotionState } from "../state/motion-state.mjs";
+import { isSVGElement } from "../state/utils.mjs";
+import { injectAnimatePresence } from "./presence.mjs";
+import { isMotionValue } from "../utils/motion-value.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Motion",
+    inheritAttrs: false
+  },
   __name: "Motion",
-  props: /* @__PURE__ */ v({
+  props: /* @__PURE__ */ mergeDefaults({
     as: {},
     asChild: { type: Boolean },
     custom: {},
@@ -32,67 +34,95 @@ const z = /* @__PURE__ */ f({
     onPressStart: { type: Function },
     onPressEnd: { type: Function },
     onViewEnter: { type: Function },
-    onViewLeave: { type: Function }
+    onViewLeave: { type: Function },
+    layout: { type: Boolean },
+    layoutId: {},
+    layoutScroll: { type: Boolean },
+    layoutRoot: { type: Boolean },
+    "data-framer-portal-id": {}
   }, {
     as: "div",
-    asChild: !1,
+    asChild: false,
     initial: void 0,
     animate: void 0,
     hover: void 0,
-    inView: void 0
+    inView: void 0,
+    layout: false,
+    layoutId: void 0,
+    layoutScroll: false,
+    layoutRoot: false
   }),
-  setup(p) {
-    const t = p, { initial: l, safeUnmount: u } = _({ initial: y(void 0), safeUnmount: () => !0 }), c = O(null), o = g(), e = new B(
+  setup(__props) {
+    const props = __props;
+    const { initial: presenceInitial, safeUnmount } = injectAnimatePresence({ initial: ref(void 0), safeUnmount: () => true });
+    const parentState = injectMotion(null);
+    const attrs = useAttrs();
+    const layoutGroup = injectLayoutGroup({});
+    const state = new MotionState(
       {
-        ...o,
-        ...t
+        ...attrs,
+        ...props
       },
-      c
+      parentState
     );
-    E(e);
-    const i = h();
-    S(() => {
-      e.mount(i == null ? void 0 : i.vnode.el), e.update({
-        ...o,
-        ...t,
-        style: { ...a(e.getTarget()), ...t.style }
+    provideMotion(state);
+    const instance = getCurrentInstance();
+    onMounted(() => {
+      state.mount(instance == null ? void 0 : instance.vnode.el);
+      state.update({
+        ...attrs,
+        ...props
       });
-    }), M(() => {
-      u(i == null ? void 0 : i.vnode.el) && e.unmount();
-    }), F(() => {
-      e.update({
-        ...o,
-        ...t,
-        initial: l.value === !1 ? l.value : t.initial === !0 ? void 0 : t.initial
+    });
+    onUnmounted(() => {
+      if (safeUnmount(instance == null ? void 0 : instance.vnode.el))
+        state.unmount();
+    });
+    onUpdated(() => {
+      state.update({
+        ...attrs,
+        ...props,
+        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
-    function m() {
-      const n = { ...o };
-      Object.keys(o).forEach((r) => {
-        H(o[r]) && (n[r] = o[r].get());
+    function getProps() {
+      const attrsProps = { ...attrs };
+      Object.keys(attrs).forEach((key) => {
+        if (isMotionValue(attrs[key]))
+          attrsProps[key] = attrs[key].get();
       });
-      let s = {
-        ...t.style
+      let styleProps = {
+        ...props.style
       };
-      if (!e.isMounted())
-        if (U(t.as)) {
-          const { attributes: r, style: d } = T(e.getTarget());
-          Object.assign(n, r), Object.assign(s, d, t.style);
-        } else
-          Object.assign(s, t.style, e.getTarget());
-      return s = a(s), n.style = a(s), n;
+      if (!state.isMounted()) {
+        if (isSVGElement(props.as)) {
+          const { attributes, style } = convertSvgStyleToAttributes(state.getTarget());
+          Object.assign(attrsProps, attributes);
+          Object.assign(styleProps, style, props.style);
+        } else {
+          Object.assign(styleProps, state.getTarget(), props.style);
+        }
+      }
+      styleProps = createStyles(styleProps);
+      attrsProps.style = styleProps;
+      return attrsProps;
     }
-    return (n, s) => (P(), b(j(A), w({
-      as: n.as,
-      "as-child": n.asChild
-    }, m()), {
-      default: C(() => [
-        V(n.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["as", "as-child"]));
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        as: _ctx.as,
+        "as-child": _ctx.asChild
+      }, getProps(), {
+        "data-layout-group-key": (_b = (_a = unref(layoutGroup)) == null ? void 0 : _a.key) == null ? void 0 : _b.value
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as", "as-child", "data-layout-group-key"]);
+    };
   }
 });
 export {
-  z as default
+  _sfc_main as default
 };

package/dist/es/components/Motion.vue2.mjs

@@ -1,4 +1,4 @@
-import f from "./Motion.vue.mjs";
+import _sfc_main from "./Motion.vue.mjs";
 export {
-  f as default
+  _sfc_main as default
 };

package/dist/es/components/Primitive.mjs

@@ -1,23 +1,29 @@
-import { defineComponent as r, h as a } from "vue";
-import { Slot as f } from "./Slot.mjs";
-const d = r({
+import { defineComponent, h } from "vue";
+import { Slot } from "./Slot.mjs";
+const Primitive = defineComponent({
   name: "Primitive",
-  inheritAttrs: !1,
+  inheritAttrs: false,
   props: {
     asChild: {
       type: Boolean,
-      default: !1
+      default: false
     },
     as: {
       type: [String, Object],
       default: "div"
     }
   },
-  setup(t, { attrs: i, slots: n }) {
-    const e = t.asChild ? "template" : t.as;
-    return typeof e == "string" && ["area", "img", "input"].includes(e) ? () => a(e, i) : e !== "template" ? () => a(t.as, i, { default: n.default }) : () => a(f, i, { default: n.default });
+  setup(props, { attrs, slots }) {
+    const asTag = props.asChild ? "template" : props.as;
+    const SELF_CLOSING_TAGS = ["area", "img", "input"];
+    if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
+      return () => h(asTag, attrs);
+    if (asTag !== "template") {
+      return () => h(props.as, attrs, { default: slots.default });
+    }
+    return () => h(Slot, attrs, { default: slots.default });
   }
 });
 export {
-  d as Primitive
+  Primitive
 };

package/dist/es/components/Slot.mjs

@@ -1,27 +1,36 @@
-import { defineComponent as m, Comment as d, mergeProps as c, cloneVNode as u } from "vue";
-import { renderSlotFragments as a } from "./renderSlotFragments.mjs";
-const x = m({
+import { defineComponent, Comment, mergeProps, cloneVNode } from "vue";
+import { renderSlotFragments } from "./renderSlotFragments.mjs";
+const Slot = defineComponent({
   name: "PrimitiveSlot",
-  inheritAttrs: !1,
-  setup(h, { attrs: t, slots: i }) {
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
     return () => {
-      var f, l;
-      if (!i.default)
+      var _a, _b;
+      if (!slots.default)
         return null;
-      const e = a(i.default()), s = e.findIndex((o) => o.type !== d);
-      if (s === -1)
-        return e;
-      const r = e[s];
-      (f = r.props) == null || delete f.ref;
-      const p = r.props ? c(t, r.props) : t;
-      t.class && ((l = r.props) != null && l.class) && delete r.props.class;
-      const n = u(r, p);
-      for (const o in p)
-        o.startsWith("on") && (n.props || (n.props = {}), n.props[o] = p[o]);
-      return e.length === 1 ? n : (e[s] = n, e);
+      const childrens = renderSlotFragments(slots.default());
+      const firstNonCommentChildrenIndex = childrens.findIndex((child) => child.type !== Comment);
+      if (firstNonCommentChildrenIndex === -1)
+        return childrens;
+      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
+      (_a = firstNonCommentChildren.props) == null ? true : delete _a.ref;
+      const mergedProps = firstNonCommentChildren.props ? mergeProps(attrs, firstNonCommentChildren.props) : attrs;
+      if (attrs.class && ((_b = firstNonCommentChildren.props) == null ? void 0 : _b.class))
+        delete firstNonCommentChildren.props.class;
+      const cloned = cloneVNode(firstNonCommentChildren, mergedProps);
+      for (const prop in mergedProps) {
+        if (prop.startsWith("on")) {
+          cloned.props || (cloned.props = {});
+          cloned.props[prop] = mergedProps[prop];
+        }
+      }
+      if (childrens.length === 1)
+        return cloned;
+      childrens[firstNonCommentChildrenIndex] = cloned;
+      return childrens;
     };
   }
 });
 export {
-  x as Slot
+  Slot
 };

package/dist/es/components/context.mjs

@@ -1,6 +1,17 @@
-import { createContext as o } from "../utils/createContext.mjs";
-const [e, i] = o("Motion");
+import { createContext } from "../utils/createContext.mjs";
+const [injectMotion, provideMotion] = createContext("Motion");
+const [injectLayoutGroup, provideLayoutGroup] = createContext("LayoutGroup");
+function shouldInheritGroup(inherit) {
+  return inherit === true;
+}
+function shouldInheritId(inherit) {
+  return shouldInheritGroup(inherit === true) || inherit === "id";
+}
 export {
-  e as injectMotion,
-  i as provideMotion
+  injectLayoutGroup,
+  injectMotion,
+  provideLayoutGroup,
+  provideMotion,
+  shouldInheritGroup,
+  shouldInheritId
 };

package/dist/es/components/group.mjs

@@ -0,0 +1,30 @@
+function notify(node) {
+  return !node.isLayoutDirty && node.willUpdate(false);
+}
+function nodeGroup() {
+  const nodes = /* @__PURE__ */ new Set();
+  const subscriptions = /* @__PURE__ */ new WeakMap();
+  const dirtyAll = () => nodes.forEach(notify);
+  return {
+    add: (node) => {
+      nodes.add(node);
+      subscriptions.set(
+        node,
+        node.addEventListener("willUpdate", dirtyAll)
+      );
+    },
+    remove: (node) => {
+      nodes.delete(node);
+      const unsubscribe = subscriptions.get(node);
+      if (unsubscribe) {
+        unsubscribe();
+        subscriptions.delete(node);
+      }
+      dirtyAll();
+    },
+    dirty: dirtyAll
+  };
+}
+export {
+  nodeGroup
+};

package/dist/es/components/presence.mjs

@@ -1,13 +1,16 @@
-import { createContext as o } from "../utils/createContext.mjs";
-const t = /* @__PURE__ */ new Map();
-function r(e) {
-  const n = t.get(e);
-  n && e.removeEventListener("motioncomplete", n), t.delete(e);
+import { createContext } from "../utils/createContext.mjs";
+const doneCallbacks = /* @__PURE__ */ new Map();
+function removeDoneCallback(element) {
+  const prevDoneCallback = doneCallbacks.get(element);
+  if (prevDoneCallback) {
+    element.removeEventListener("motioncomplete", prevDoneCallback);
+  }
+  doneCallbacks.delete(element);
 }
-const [a, i] = o("AnimatePresenceContext");
+const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
 export {
-  t as doneCallbacks,
-  a as injectAnimatePresence,
-  i as provideAnimatePresence,
-  r as removeDoneCallback
+  doneCallbacks,
+  injectAnimatePresence,
+  provideAnimatePresence,
+  removeDoneCallback
 };

package/dist/es/components/renderSlotFragments.mjs

@@ -1,7 +1,13 @@
-import { Fragment as e } from "vue";
-function n(t) {
-  return t ? t.flatMap((r) => r.type === e ? n(r.children) : [r]) : [];
+import { Fragment } from "vue";
+function renderSlotFragments(children) {
+  if (!children)
+    return [];
+  return children.flatMap((child) => {
+    if (child.type === Fragment)
+      return renderSlotFragments(child.children);
+    return [child];
+  });
 }
 export {
-  n as renderSlotFragments
+  renderSlotFragments
 };

package/dist/es/components/use-force-update.mjs

@@ -0,0 +1,11 @@
+import { ref } from "vue";
+function useForceUpdate() {
+  const key = ref(0);
+  function forceUpdate() {
+    key.value++;
+  }
+  return [forceUpdate, key];
+}
+export {
+  useForceUpdate
+};

package/dist/es/constants/index.mjs

@@ -1,19 +1,26 @@
-const e = {
+const components = {
   motion: [
     "Motion",
-    "MotionPresence"
+    "MotionPresence",
+    "LayoutGroup"
   ]
-}, o = {
+};
+const utilities = {
   utilities: [
     "useTransform",
     "useTime",
     "useMotionTemplate",
     "useSpring",
     "useScroll",
-    "useMotionValue"
+    "useMotionValue",
+    "useVelocity",
+    "useAnimate",
+    "useInView",
+    "useAnimationFrame",
+    "useMotionValueEvent"
   ]
 };
 export {
-  e as components,
-  o as utilities
+  components,
+  utilities
 };