motion-v 0.2.6 → 0.3.1-beta.1

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

@@ -0,0 +1,31 @@
+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(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;
+    }
+  });
+  domProxy.animations = [];
+  const animate = createScopedAnimate(domProxy);
+  onUnmounted(() => {
+    domProxy.animations.forEach((animation) => animation.stop());
+  });
+  return [domProxy, animate];
+}
+export {
+  useAnimate
+};

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

@@ -0,0 +1,71 @@
+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: true },
+    multiple: { type: Boolean, default: false },
+    as: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { initial } = toRefs(props);
+    provideAnimatePresence({
+      initial,
+      safeUnmount(el) {
+        return !doneCallbacks.has(el);
+      }
+    });
+    function enter(el) {
+      const state = mountedStates.get(el);
+      if (!state) {
+        return;
+      }
+      removeDoneCallback(el);
+      state.setActive("exit", false);
+    }
+    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();
+          }
+        }
+      }
+      doneCallbacks.set(el, doneCallback);
+      el.addEventListener("motioncomplete", doneCallback);
+      state.setActive("exit", true);
+    }
+    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 {
+  _sfc_main as default
+};

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

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

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

@@ -0,0 +1,116 @@
+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__ */ mergeDefaults({
+    as: {},
+    asChild: { type: Boolean },
+    custom: {},
+    inViewOptions: {},
+    inView: {},
+    press: {},
+    hover: {},
+    initial: { type: [String, Object, Boolean] },
+    animate: {},
+    exit: {},
+    variants: {},
+    style: {},
+    transformTemplate: { type: Function },
+    transition: {},
+    onMotionStart: { type: Function },
+    onMotionComplete: { type: Function },
+    onHoverStart: { type: Function },
+    onHoverEnd: { type: Function },
+    onPressStart: { type: Function },
+    onPressEnd: { type: Function },
+    onViewEnter: { type: Function },
+    onViewLeave: { type: Function }
+  }, {
+    as: "div",
+    asChild: false,
+    initial: void 0,
+    animate: void 0,
+    hover: void 0,
+    inView: void 0
+  }),
+  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(
+      {
+        ...attrs,
+        ...props
+      },
+      parentState
+    );
+    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 }
+      });
+    });
+    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 getProps() {
+      const attrsProps = { ...attrs };
+      Object.keys(attrs).forEach((key) => {
+        if (isMotionValue(attrs[key]))
+          attrsProps[key] = attrs[key].get();
+      });
+      let styleProps = {
+        ...props.style
+      };
+      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 (_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 {
+  _sfc_main as default
+};

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

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

package/dist/es/components/Primitive.mjs

@@ -0,0 +1,29 @@
+import { defineComponent, h } from "vue";
+import { Slot } from "./Slot.mjs";
+const Primitive = defineComponent({
+  name: "Primitive",
+  inheritAttrs: false,
+  props: {
+    asChild: {
+      type: Boolean,
+      default: false
+    },
+    as: {
+      type: [String, Object],
+      default: "div"
+    }
+  },
+  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 {
+  Primitive
+};

package/dist/es/components/Slot.mjs

@@ -0,0 +1,36 @@
+import { defineComponent, Comment, mergeProps, cloneVNode } from "vue";
+import { renderSlotFragments } from "./renderSlotFragments.mjs";
+const Slot = defineComponent({
+  name: "PrimitiveSlot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => {
+      var _a, _b;
+      if (!slots.default)
+        return null;
+      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 {
+  Slot
+};

package/dist/es/components/context.mjs

@@ -0,0 +1,6 @@
+import { createContext } from "../utils/createContext.mjs";
+const [injectMotion, provideMotion] = createContext("Motion");
+export {
+  injectMotion,
+  provideMotion
+};

package/dist/es/components/presence.mjs

@@ -0,0 +1,16 @@
+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 [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
+export {
+  doneCallbacks,
+  injectAnimatePresence,
+  provideAnimatePresence,
+  removeDoneCallback
+};

package/dist/es/components/renderSlotFragments.mjs

@@ -0,0 +1,13 @@
+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 {
+  renderSlotFragments
+};

package/dist/es/constants/index.mjs

@@ -0,0 +1,20 @@
+const components = {
+  motion: [
+    "Motion",
+    "MotionPresence"
+  ]
+};
+const utilities = {
+  utilities: [
+    "useTransform",
+    "useTime",
+    "useMotionTemplate",
+    "useSpring",
+    "useScroll",
+    "useMotionValue"
+  ]
+};
+export {
+  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
+};

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

@@ -0,0 +1,11 @@
+import { animateMotionValue } from "../interfaces/motion-value.mjs";
+import { motionValue } from "../../value/index.mjs";
+import { isMotionValue } from "../../value/utils/is-motion-value.mjs";
+function animateSingleValue(value, keyframes, options) {
+  const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
+  motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
+  return motionValue$1.animation;
+}
+export {
+  animateSingleValue
+};

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

@@ -0,0 +1,38 @@
+import { visualElementStore } from "../../render/store.mjs";
+import { invariant } from "../../utils/errors.mjs";
+import { isMotionValue } from "../../value/utils/is-motion-value.mjs";
+import { animateTarget } from "../interfaces/visual-element-target.mjs";
+import { createDOMVisualElement, createObjectVisualElement } from "../utils/create-visual-element.mjs";
+import { isDOMKeyframes } from "../utils/is-dom-keyframes.mjs";
+import { resolveSubjects } from "./resolve-subjects.mjs";
+import { animateSingleValue } from "./single-value.mjs";
+function isSingleValue(subject, keyframes) {
+  return isMotionValue(subject) || typeof subject === "number" || typeof subject === "string" && !isDOMKeyframes(keyframes);
+}
+function animateSubject(subject, keyframes, options, scope) {
+  const animations = [];
+  if (isSingleValue(subject, keyframes)) {
+    animations.push(animateSingleValue(subject, isDOMKeyframes(keyframes) ? keyframes.default || keyframes : keyframes, options ? options.default || options : options));
+  } else {
+    const subjects = resolveSubjects(subject, keyframes, scope);
+    const numSubjects = subjects.length;
+    invariant(Boolean(numSubjects), "No valid elements provided.");
+    for (let i = 0; i < numSubjects; i++) {
+      const thisSubject = subjects[i];
+      const createVisualElement = thisSubject instanceof Element ? createDOMVisualElement : createObjectVisualElement;
+      if (!visualElementStore.has(thisSubject)) {
+        createVisualElement(thisSubject);
+      }
+      const visualElement = visualElementStore.get(thisSubject);
+      const transition = { ...options };
+      if ("delay" in transition && typeof transition.delay === "function") {
+        transition.delay = transition.delay(i, numSubjects);
+      }
+      animations.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
+    }
+  }
+  return animations;
+}
+export {
+  animateSubject
+};