motion-v 0.3.0 → 0.3.1-beta.1

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 "../external/.pnpm/framer-motion@11.11.11/external/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/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, provideMotion } from "./context.mjs";
+import { createStyles, convertSvgStyleToAttributes } 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: {},
@@ -35,64 +37,80 @@ const z = /* @__PURE__ */ f({
     onViewLeave: { type: Function }
   }, {
     as: "div",
-    asChild: !1,
+    asChild: false,
     initial: void 0,
     animate: void 0,
     hover: void 0,
     inView: void 0
   }),
-  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 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,
+        style: { ...createStyles(state.getTarget()), ...props.style }
       });
-    }), 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, props.style, state.getTarget());
+        }
+      }
+      styleProps = createStyles(styleProps);
+      attrsProps.style = createStyles(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) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        as: _ctx.as,
+        "as-child": _ctx.asChild
+      }, getProps()), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as", "as-child"]);
+    };
   }
 });
 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,6 @@
-import { createContext as o } from "../utils/createContext.mjs";
-const [e, i] = o("Motion");
+import { createContext } from "../utils/createContext.mjs";
+const [injectMotion, provideMotion] = createContext("Motion");
 export {
-  e as injectMotion,
-  i as provideMotion
+  injectMotion,
+  provideMotion
 };

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/constants/index.mjs

@@ -1,9 +1,10 @@
-const e = {
+const components = {
   motion: [
     "Motion",
     "MotionPresence"
   ]
-}, o = {
+};
+const utilities = {
   utilities: [
     "useTransform",
     "useTime",
@@ -14,6 +15,6 @@ const e = {
   ]
 };
 export {
-  e as components,
-  o as utilities
+  components,
+  utilities
 };

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/GroupPlaybackControls.mjs

@@ -0,0 +1,76 @@
+import { supportsScrollTimeline } from "../render/dom/scroll/supports.mjs";
+class GroupPlaybackControls {
+  constructor(animations) {
+    this.stop = () => this.runAll("stop");
+    this.animations = animations.filter(Boolean);
+  }
+  then(onResolve, onReject) {
+    return Promise.all(this.animations).then(onResolve).catch(onReject);
+  }
+  /**
+   * TODO: Filter out cancelled or stopped animations before returning
+   */
+  getAll(propName) {
+    return this.animations[0][propName];
+  }
+  setAll(propName, newValue) {
+    for (let i = 0; i < this.animations.length; i++) {
+      this.animations[i][propName] = newValue;
+    }
+  }
+  attachTimeline(timeline, fallback) {
+    const subscriptions = this.animations.map((animation) => {
+      if (supportsScrollTimeline() && animation.attachTimeline) {
+        return animation.attachTimeline(timeline);
+      } else {
+        return fallback(animation);
+      }
+    });
+    return () => {
+      subscriptions.forEach((cancel, i) => {
+        cancel && cancel();
+        this.animations[i].stop();
+      });
+    };
+  }
+  get time() {
+    return this.getAll("time");
+  }
+  set time(time) {
+    this.setAll("time", time);
+  }
+  get speed() {
+    return this.getAll("speed");
+  }
+  set speed(speed) {
+    this.setAll("speed", speed);
+  }
+  get startTime() {
+    return this.getAll("startTime");
+  }
+  get duration() {
+    let max = 0;
+    for (let i = 0; i < this.animations.length; i++) {
+      max = Math.max(max, this.animations[i].duration);
+    }
+    return max;
+  }
+  runAll(methodName) {
+    this.animations.forEach((controls) => controls[methodName]());
+  }
+  play() {
+    this.runAll("play");
+  }
+  pause() {
+    this.runAll("pause");
+  }
+  cancel() {
+    this.runAll("cancel");
+  }
+  complete() {
+    this.runAll("complete");
+  }
+}
+export {
+  GroupPlaybackControls
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs

@@ -0,0 +1,27 @@
+import { GroupPlaybackControls } from "../GroupPlaybackControls.mjs";
+import { animateSequence } from "./sequence.mjs";
+import { animateSubject } from "./subject.mjs";
+function isSequence(value) {
+  return Array.isArray(value) && Array.isArray(value[0]);
+}
+function createScopedAnimate(scope) {
+  function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
+    let animations = [];
+    if (isSequence(subjectOrSequence)) {
+      animations = animateSequence(subjectOrSequence, optionsOrKeyframes, scope);
+    } else {
+      animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
+    }
+    const animation = new GroupPlaybackControls(animations);
+    if (scope) {
+      scope.animations.push(animation);
+    }
+    return animation;
+  }
+  return scopedAnimate;
+}
+const animate = createScopedAnimate();
+export {
+  animate,
+  createScopedAnimate
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/resolve-subjects.mjs

@@ -0,0 +1,16 @@
+import { resolveElements } from "../../render/dom/utils/resolve-element.mjs";
+import { isDOMKeyframes } from "../utils/is-dom-keyframes.mjs";
+function resolveSubjects(subject, keyframes, scope, selectorCache) {
+  if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
+    return resolveElements(subject, scope, selectorCache);
+  } else if (subject instanceof NodeList) {
+    return Array.from(subject);
+  } else if (Array.isArray(subject)) {
+    return subject;
+  } else {
+    return [subject];
+  }
+}
+export {
+  resolveSubjects
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/sequence.mjs

@@ -0,0 +1,14 @@
+import { spring } from "../generators/spring/index.mjs";
+import { createAnimationsFromSequence } from "../sequence/create.mjs";
+import { animateSubject } from "./subject.mjs";
+function animateSequence(sequence, options, scope) {
+  const animations = [];
+  const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring });
+  animationDefinitions.forEach(({ keyframes, transition }, subject) => {
+    animations.push(...animateSubject(subject, keyframes, transition));
+  });
+  return animations;
+}
+export {
+  animateSequence
+};