motion-v 0.2.6 → 0.3.1-beta.1

package/dist/es/state/style.mjs

@@ -0,0 +1,117 @@
+import { isNumber, isCssVar } from "./utils.mjs";
+import { isTransform, transformAlias, transformDefinitions, buildTransformTemplate } from "./transform.mjs";
+import { isMotionValue } from "../utils/motion-value.mjs";
+const style = {
+  get: (element, name) => {
+    let value = isCssVar(name) ? element.style.getPropertyValue(name) : getComputedStyle(element)[name];
+    if (!value && value !== "0") {
+      const definition = transformDefinitions.get(name);
+      if (definition)
+        value = definition.initialValue;
+    }
+    return value;
+  },
+  set: (element, name, value) => {
+    if (isCssVar(name)) {
+      element.style.setProperty(name, value);
+    } else {
+      element.style[name] = value;
+    }
+  }
+};
+function createStyles(keyframes) {
+  var _a;
+  const initialKeyframes = {};
+  const transforms = [];
+  for (let key in keyframes) {
+    let value = keyframes[key];
+    value = isMotionValue(value) ? value.get() : value;
+    if (isTransform(key)) {
+      if (key in transformAlias) {
+        key = transformAlias[key];
+      }
+    }
+    let initialKeyframe = Array.isArray(value) ? value[0] : value;
+    const definition = transformDefinitions.get(key);
+    if (definition) {
+      initialKeyframe = isNumber(value) ? (_a = definition.toDefaultUnit) == null ? void 0 : _a.call(definition, value) : value;
+      transforms.push([key, initialKeyframe]);
+    } else {
+      initialKeyframes[key] = initialKeyframe;
+    }
+  }
+  if (transforms.length) {
+    initialKeyframes.transform = buildTransformTemplate(transforms);
+  }
+  return initialKeyframes;
+}
+const SVG_STYLE_TO_ATTRIBUTES = {
+  fill: true,
+  stroke: true,
+  strokeWidth: true,
+  opacity: true,
+  fillOpacity: true,
+  strokeOpacity: true,
+  strokeLinecap: true,
+  strokeLinejoin: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  cx: true,
+  cy: true,
+  r: true,
+  d: true,
+  x: true,
+  y: true,
+  x1: true,
+  y1: true,
+  x2: true,
+  y2: true,
+  points: true,
+  pathLength: true,
+  transform: true,
+  viewBox: true,
+  width: true,
+  height: true,
+  preserveAspectRatio: true,
+  clipPath: true,
+  filter: true,
+  mask: true,
+  stopColor: true,
+  stopOpacity: true,
+  gradientTransform: true,
+  gradientUnits: true,
+  spreadMethod: true,
+  markerEnd: true,
+  markerMid: true,
+  markerStart: true,
+  textAnchor: true,
+  dominantBaseline: true,
+  fontFamily: true,
+  fontSize: true,
+  fontWeight: true,
+  letterSpacing: true,
+  vectorEffect: true
+};
+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;
+    } else {
+      styleProps[key] = keyframes[key];
+    }
+  }
+  return {
+    attributes,
+    style: styleProps
+  };
+}
+export {
+  convertSvgStyleToAttributes,
+  createStyles,
+  style
+};

package/dist/es/state/transform.mjs

@@ -0,0 +1,68 @@
+import "@vueuse/core";
+import { noopReturn } from "./utils.mjs";
+const rotation = {
+  syntax: "<angle>",
+  initialValue: "0deg",
+  toDefaultUnit: (v) => `${v}deg`
+};
+const baseTransformProperties = {
+  translate: {
+    syntax: "<length-percentage>",
+    initialValue: "0px",
+    toDefaultUnit: (v) => `${v}px`
+  },
+  rotate: rotation,
+  scale: {
+    syntax: "<number>",
+    initialValue: 1,
+    toDefaultUnit: noopReturn
+  },
+  skew: rotation
+};
+const order = ["translate", "scale", "rotate", "skew"];
+const axes = ["", "X", "Y", "Z"];
+const transformDefinitions = /* @__PURE__ */ new Map();
+const transforms = ["transformPerspective", "x", "y", "z", "translateX", "translateY", "translateZ", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skew", "skewX", "skewY"];
+order.forEach((name) => {
+  axes.forEach((axis) => {
+    transforms.push(name + axis);
+    transformDefinitions.set(
+      name + axis,
+      baseTransformProperties[name]
+    );
+  });
+});
+const transformLookup = new Set(transforms);
+const isTransform = (name) => transformLookup.has(name);
+const transformAlias = {
+  x: "translateX",
+  y: "translateY",
+  z: "translateZ"
+};
+function compareTransformOrder([a], [b]) {
+  return transforms.indexOf(a) - transforms.indexOf(b);
+}
+function transformListToString(template, [name, value]) {
+  return `${template} ${name}(${value})`;
+}
+function buildTransformTemplate(transforms2) {
+  return transforms2.sort(compareTransformOrder).reduce(transformListToString, "").trim();
+}
+const transformResetValue = {
+  translate: [0, 0],
+  rotate: 0,
+  scale: 1,
+  skew: 0,
+  x: 0,
+  y: 0,
+  z: 0
+};
+export {
+  axes,
+  buildTransformTemplate,
+  compareTransformOrder,
+  isTransform,
+  transformAlias,
+  transformDefinitions,
+  transformResetValue
+};

package/dist/es/state/utils.mjs

@@ -0,0 +1,119 @@
+function resolveVariant(definition, variants, custom) {
+  if (typeof definition === "object") {
+    return definition;
+  } else if (definition && variants) {
+    const variant = variants[definition];
+    return typeof variant === "function" ? variant(custom) : variant;
+  }
+}
+function hasChanged(a, b) {
+  if (typeof a !== typeof b)
+    return true;
+  if (Array.isArray(a) && Array.isArray(b))
+    return !shallowCompare(a, b);
+  return a !== b;
+}
+function shallowCompare(next, prev) {
+  const prevLength = prev.length;
+  if (prevLength !== next.length)
+    return false;
+  for (let i = 0; i < prevLength; i++) {
+    if (prev[i] !== next[i])
+      return false;
+  }
+  return true;
+}
+function addUniqueItem(array, item) {
+  !array.includes(item) && array.push(item);
+}
+function removeItem(array, item) {
+  const index = array.indexOf(item);
+  index !== -1 && array.splice(index, 1);
+}
+function getOptions(options, key) {
+  return options[key] ? { ...options, ...options[key] } : { ...options };
+}
+function isCssVar(name) {
+  return name == null ? void 0 : name.startsWith("--");
+}
+function noop() {
+}
+const noopReturn = (v) => v;
+function isNumber(value) {
+  return typeof value === "number";
+}
+const svgElements = [
+  "animate",
+  "circle",
+  "defs",
+  "desc",
+  "ellipse",
+  "g",
+  "image",
+  "line",
+  "filter",
+  "marker",
+  "mask",
+  "metadata",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "rect",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "tspan",
+  "use",
+  "view",
+  "clipPath",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "foreignObject",
+  "linearGradient",
+  "radialGradient",
+  "textPath"
+];
+const svgElementSet = new Set(svgElements);
+function isSVGElement(as) {
+  return svgElementSet.has(as);
+}
+export {
+  addUniqueItem,
+  getOptions,
+  hasChanged,
+  isCssVar,
+  isNumber,
+  isSVGElement,
+  noop,
+  noopReturn,
+  removeItem,
+  resolveVariant,
+  shallowCompare,
+  svgElements
+};

package/dist/es/utils/createContext.mjs

@@ -0,0 +1,25 @@
+import { inject, provide } from "vue";
+function createContext(providerComponentName, contextName) {
+  const symbolDescription = typeof providerComponentName === "string" && !contextName ? `${providerComponentName}Context` : contextName;
+  const injectionKey = Symbol(symbolDescription);
+  const injectContext = (fallback) => {
+    const context = inject(injectionKey, fallback);
+    if (context)
+      return context;
+    if (context === null)
+      return context;
+    throw new Error(
+      `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${Array.isArray(providerComponentName) ? `one of the following components: ${providerComponentName.join(
+        ", "
+      )}` : `\`${providerComponentName}\``}`
+    );
+  };
+  const provideContext = (contextValue) => {
+    provide(injectionKey, contextValue);
+    return contextValue;
+  };
+  return [injectContext, provideContext];
+}
+export {
+  createContext
+};

package/dist/es/utils/events.mjs

@@ -0,0 +1,8 @@
+function dispatchPointerEvent(element, name, event) {
+  element.dispatchEvent(
+    new CustomEvent(name, { detail: { originalEvent: event } })
+  );
+}
+export {
+  dispatchPointerEvent
+};

package/dist/es/utils/motion-value.mjs

@@ -0,0 +1,6 @@
+function isMotionValue(value) {
+  return Boolean(value && value.getVelocity);
+}
+export {
+  isMotionValue
+};

package/dist/es/utils/use-animation-frame.mjs

@@ -0,0 +1,20 @@
+import { onBeforeUpdate, onUnmounted } from "vue";
+import { frame, cancelFrame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+function useAnimationFrame(callback) {
+  let initialTimestamp = 0;
+  const provideTimeSinceStart = ({ timestamp, delta }) => {
+    if (!initialTimestamp)
+      initialTimestamp = timestamp;
+    callback(timestamp - initialTimestamp, delta);
+  };
+  const cancel = () => cancelFrame(provideTimeSinceStart);
+  onBeforeUpdate(() => {
+    cancel();
+    frame.update(provideTimeSinceStart, true);
+  });
+  onUnmounted(() => cancel());
+  frame.update(provideTimeSinceStart, true);
+}
+export {
+  useAnimationFrame
+};

package/dist/es/utils/use-in-view.mjs

@@ -0,0 +1,25 @@
+import { ref, watch, isRef, unref } from "vue";
+import { inView } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+function useInView(domRef, options) {
+  const isInView = ref(false);
+  watch([domRef, () => isRef(options) ? options.value : options], (_v1, _v2) => {
+    const realOptions = unref(options) || {};
+    const { once } = realOptions;
+    if (!domRef.value || once && isInView.value) {
+      return;
+    }
+    const onEnter = () => {
+      isInView.value = true;
+      return once ? void 0 : () => {
+        isInView.value = false;
+      };
+    };
+    return inView(domRef.value, onEnter, realOptions);
+  }, {
+    immediate: true
+  });
+  return isInView;
+}
+export {
+  useInView
+};

package/dist/es/value/use-combine-values.mjs

@@ -0,0 +1,27 @@
+import { onUnmounted } from "vue";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { cancelFrame, frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+function useCombineMotionValues(combineValues) {
+  const value = motionValue(combineValues());
+  const updateValue = () => value.set(combineValues());
+  const scheduleUpdate = () => frame.preRender(updateValue, false, true);
+  let subscriptions;
+  const subscribe = (values) => {
+    subscriptions = values.map((v) => v.on("change", scheduleUpdate));
+  };
+  const unsubscribe = () => {
+    subscriptions.forEach((unsubscribe2) => unsubscribe2());
+    cancelFrame(updateValue);
+  };
+  onUnmounted(() => {
+    unsubscribe();
+  });
+  return {
+    subscribe,
+    unsubscribe,
+    value
+  };
+}
+export {
+  useCombineMotionValues
+};

package/dist/es/value/use-computed.mjs

@@ -0,0 +1,20 @@
+import { useCombineMotionValues } from "./use-combine-values.mjs";
+import { collectMotionValues } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { onBeforeUpdate } from "vue";
+function useComputed(computed) {
+  collectMotionValues.current = [];
+  const { value, subscribe, unsubscribe } = useCombineMotionValues(computed);
+  subscribe(collectMotionValues.current);
+  collectMotionValues.current = void 0;
+  onBeforeUpdate(() => {
+    unsubscribe();
+    collectMotionValues.current = [];
+    computed();
+    subscribe(collectMotionValues.current);
+    collectMotionValues.current = void 0;
+  });
+  return value;
+}
+export {
+  useComputed
+};

package/dist/es/value/use-motion-template.mjs

@@ -0,0 +1,22 @@
+import { useCombineMotionValues } from "./use-combine-values.mjs";
+import { isMotionValue } from "../utils/motion-value.mjs";
+function useMotionTemplate(fragments, ...values) {
+  const numFragments = fragments.length;
+  function buildValue() {
+    let output = "";
+    for (let i = 0; i < numFragments; i++) {
+      output += fragments[i];
+      const value2 = values[i];
+      if (value2) {
+        output += isMotionValue(value2) ? value2.get() : value2;
+      }
+    }
+    return output;
+  }
+  const { value, subscribe } = useCombineMotionValues(buildValue);
+  subscribe(values.filter(isMotionValue));
+  return value;
+}
+export {
+  useMotionTemplate
+};

package/dist/es/value/use-scroll.mjs

@@ -0,0 +1,56 @@
+import { onMounted, onUnmounted, watch } from "vue";
+import { warning } from "../external/.pnpm/hey-listen@1.0.8/external/hey-listen/dist/hey-listen.es.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { scroll } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+function refWarning(name, ref) {
+  warning(
+    Boolean(!ref || ref.value),
+    `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref.`
+  );
+}
+function createScrollMotionValues() {
+  return {
+    scrollX: motionValue(0),
+    scrollY: motionValue(0),
+    scrollXProgress: motionValue(0),
+    scrollYProgress: motionValue(0)
+  };
+}
+function useScroll({
+  container,
+  target,
+  ...options
+} = {}) {
+  const values = createScrollMotionValues();
+  let cleanup;
+  const setupScroll = () => {
+    cleanup == null ? void 0 : cleanup();
+    cleanup = scroll(
+      (_progress, { x, y }) => {
+        values.scrollX.set(x.current);
+        values.scrollXProgress.set(x.progress);
+        values.scrollY.set(y.current);
+        values.scrollYProgress.set(y.progress);
+      },
+      {
+        ...options,
+        container: (container == null ? void 0 : container.value) ?? void 0,
+        target: (target == null ? void 0 : target.value) ?? void 0
+      }
+    );
+  };
+  onMounted(() => {
+    refWarning("target", target);
+    refWarning("container", container);
+    setupScroll();
+  });
+  onUnmounted(() => cleanup == null ? void 0 : cleanup());
+  watch(
+    () => [container == null ? void 0 : container.value, target == null ? void 0 : target.value, options.offset],
+    setupScroll
+  );
+  return values;
+}
+export {
+  useScroll
+};

package/dist/es/value/use-spring.mjs

@@ -0,0 +1,59 @@
+import { watch, onBeforeUnmount } from "vue";
+import { animateValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { frame, frameData } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { isMotionValue } from "../utils/motion-value.mjs";
+function toNumber(v) {
+  if (typeof v === "number")
+    return v;
+  return parseFloat(v);
+}
+function useSpring(source, config = {}) {
+  let activeSpringAnimation = null;
+  const value = motionValue(
+    isMotionValue(source) ? toNumber(source.get()) : source
+  );
+  let latestValue = value.get();
+  let latestSetter = () => {
+  };
+  const stopAnimation = () => {
+    if (activeSpringAnimation) {
+      activeSpringAnimation.stop();
+      activeSpringAnimation = null;
+    }
+  };
+  const startAnimation = () => {
+    const animation = activeSpringAnimation;
+    if ((animation == null ? void 0 : animation.time) === 0) {
+      animation.sample(frameData.delta);
+    }
+    stopAnimation();
+    activeSpringAnimation = animateValue({
+      keyframes: [value.get(), latestValue],
+      velocity: value.getVelocity(),
+      type: "spring",
+      restDelta: 1e-3,
+      restSpeed: 0.01,
+      ...config,
+      onUpdate: latestSetter
+    });
+  };
+  watch(() => JSON.stringify(config), () => {
+    const cleanup = value.attach((v, set) => {
+      latestValue = v;
+      latestSetter = set;
+      frame.update(startAnimation);
+      return value.get();
+    }, stopAnimation);
+    onBeforeUnmount(() => cleanup());
+  }, { immediate: true });
+  if (isMotionValue(source)) {
+    source.on("change", (v) => {
+      value.set(toNumber(v));
+    });
+  }
+  return value;
+}
+export {
+  useSpring
+};

package/dist/es/value/use-time.mjs

@@ -0,0 +1,10 @@
+import { useAnimationFrame } from "../utils/use-animation-frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+function useTime() {
+  const time = motionValue(0);
+  useAnimationFrame((t) => time.set(t));
+  return time;
+}
+export {
+  useTime
+};

package/dist/es/value/use-transform.mjs

@@ -0,0 +1,29 @@
+import { useComputed } from "./use-computed.mjs";
+import { useCombineMotionValues } from "./use-combine-values.mjs";
+import { transform } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/transform.mjs";
+function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+  if (typeof input === "function") {
+    return useComputed(input);
+  }
+  const transformer = typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : transform(inputRangeOrTransformer, outputRange, options);
+  return Array.isArray(input) ? useListTransform(
+    input,
+    transformer
+  ) : useListTransform([input], ([latest]) => transformer(latest));
+}
+function useListTransform(values, transformer) {
+  const latest = [];
+  const { value, subscribe } = useCombineMotionValues(() => {
+    latest.length = 0;
+    const numValues = values.length;
+    for (let i = 0; i < numValues; i++) {
+      latest[i] = values[i].get();
+    }
+    return transformer(latest);
+  });
+  subscribe(values);
+  return value;
+}
+export {
+  useTransform
+};

package/dist/src/animation/index.d.ts

@@ -0,0 +1 @@
+export * from './use-animate';

package/dist/src/animation/use-animate.d.ts

@@ -0,0 +1,8 @@
+import { AnimationPlaybackControls } from 'framer-motion';
+import { Ref, UnwrapRef } from 'vue';
+import { createScopedAnimate } from 'framer-motion/dom';
+type Scope = Ref<UnwrapRef<Element>> & {
+    animations: AnimationPlaybackControls[];
+};
+export declare function useAnimate<T extends Element = any>(): [Scope, ReturnType<typeof createScopedAnimate>];
+export {};

package/dist/src/components/Motion.d.ts

@@ -1,11 +1,11 @@
 import { IntrinsicElementAttributes } from 'vue';
 import { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '../types';
-export interface MotionProps<T extends ElementType = 'div'> extends Options {
+export interface MotionProps<T extends ElementType = 'div', K = unknown> extends Options<K> {
     as?: T;
     asChild?: boolean;
 }
-declare const _default: <T extends ElementType = "div">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (Omit<SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T], keyof Options | "asChild"> & MotionProps<T>)> & import('vue').PublicProps;
+declare const _default: <T extends ElementType = "div", K = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (Omit<SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T], "asChild" | keyof Options<any>> & MotionProps<T, K>)> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

package/dist/src/features/events.d.ts

@@ -1,4 +1,4 @@
-import { Feature } from './feature';
+import { Feature } from '.';
 export declare class EventFeature extends Feature {
     private handlers;
     mount(): void;

package/dist/src/features/feature-manager.d.ts

@@ -0,0 +1,9 @@
+import { Feature } from '.';
+import { MotionState } from '../state';
+export declare class FeatureManager {
+    features: Feature[];
+    constructor(state: MotionState);
+    mount(): void;
+    unmount(): void;
+    update(): void;
+}