motion-v
Version:
<p align="center"> <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" /> </p> <h1 align="center">Motion for Vue</h1>
36 lines (35 loc) • 1.36 kB
JavaScript
import { useComputed } from "./use-computed.mjs";
import { useCombineMotionValues } from "./use-combine-values.mjs";
import { isRef, computed } from "vue";
import { transform } from "../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/utils/transform.mjs";
function useTransform(input, inputRangeOrTransformer, outputRange, options) {
if (typeof input === "function") {
return useComputed(input);
}
const transformer = typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : isRef(inputRangeOrTransformer) ? computed(() => transform(inputRangeOrTransformer.value, outputRange, options)) : transform(inputRangeOrTransformer, outputRange, options);
return Array.isArray(input) ? useListTransform(
input,
transformer
) : useListTransform([input], ([latest]) => {
if (isRef(transformer)) {
return transformer.value(latest);
}
return 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 isRef(transformer) ? transformer.value(latest) : transformer(latest);
});
subscribe(values);
return value;
}
export {
useTransform
};