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>
146 lines (145 loc) • 4.75 kB
JavaScript
import { defineComponent, toRefs, useAttrs, computed, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
import { Motion } from "../motion/index.mjs";
import { useReorderContext } from "./context.mjs";
import { useDefaultMotionValue } from "./utils.mjs";
import { invariant } from "hey-listen";
import { useTransform } from "../../value/use-transform.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "ReorderItem",
inheritAttrs: false
},
__name: "Item",
props: {
value: {},
layout: { type: [Boolean, String], default: true },
as: { default: "li" },
asChild: { type: Boolean },
hover: { default: void 0 },
press: {},
inView: { default: void 0 },
focus: {},
whileDrag: { default: void 0 },
whileHover: {},
whilePress: {},
whileInView: {},
whileFocus: {},
forwardMotionProps: { type: Boolean },
ignoreStrict: { type: Boolean },
custom: {},
initial: { type: [String, Array, Object, Boolean], default: void 0 },
animate: { default: void 0 },
exit: {},
variants: {},
inherit: { type: Boolean },
style: {},
transformTemplate: {},
transition: {},
onAnimationComplete: {},
onUpdate: {},
onAnimationStart: {},
layoutId: { default: void 0 },
layoutScroll: { type: Boolean, default: false },
layoutRoot: { type: Boolean, default: false },
"data-framer-portal-id": {},
crossfade: { type: Boolean, default: true },
layoutDependency: {},
onBeforeLayoutMeasure: {},
onLayoutMeasure: {},
onLayoutAnimationStart: {},
onLayoutAnimationComplete: {},
globalPressTarget: { type: Boolean },
onPressStart: {},
onPress: {},
onPressCancel: {},
onHoverStart: {},
onHoverEnd: {},
inViewOptions: {},
onViewportEnter: {},
onViewportLeave: {},
drag: { type: [Boolean, String] },
dragSnapToOrigin: { type: Boolean },
dragDirectionLock: { type: Boolean },
dragPropagation: { type: Boolean },
dragConstraints: { type: [Boolean, Object] },
dragElastic: { type: [Boolean, Number, Object], default: 0.5 },
dragMomentum: { type: Boolean, default: true },
dragTransition: {},
dragListener: { type: Boolean, default: true },
dragControls: {},
onDragStart: {},
onDragEnd: {},
onDrag: {},
onDirectionLock: {},
onDragTransitionEnd: {},
onMeasureDragConstraints: {},
onPanSessionStart: {},
onPanStart: {},
onPan: {},
onPanEnd: {},
onFocus: {},
onBlur: {}
},
setup(__props) {
var _a, _b;
const props = __props;
const { style } = toRefs(props);
const context = useReorderContext(null);
const point = {
x: useDefaultMotionValue((_a = style.value) == null ? void 0 : _a.x),
y: useDefaultMotionValue((_b = style.value) == null ? void 0 : _b.y)
};
const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
function warning() {
invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
}
const { axis, registerItem, updateOrder } = context || {};
const attrs = useAttrs();
function bindProps() {
const { value, ...rest } = props;
return {
...attrs,
...rest,
style: {
...style.value,
x: point.x,
y: point.y,
zIndex
}
};
}
const drag = computed(() => {
if (props.drag) {
return props.drag;
}
return axis.value;
});
const isDragging = ref(false);
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Motion), mergeProps(bindProps(), {
drag: drag.value,
"drag-snap-to-origin": true,
onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
const { velocity } = gesturePoint;
velocity[unref(axis)] && unref(updateOrder)(_ctx.value, point[unref(axis)].get(), velocity[unref(axis)]);
!isDragging.value && (isDragging.value = true);
_ctx.onDrag && _ctx.onDrag(event, gesturePoint);
}),
onDragEnd: _cache[1] || (_cache[1] = (event, gesturePoint) => {
isDragging.value = false;
_ctx.onDragEnd && _ctx.onDragEnd(event, gesturePoint);
}),
onLayoutMeasure: _cache[2] || (_cache[2] = (measured) => unref(registerItem)(_ctx.value, measured))
}), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value }),
createTextVNode(" " + toDisplayString(warning()), 1)
]),
_: 3
}, 16, ["drag"]);
};
}
});
export {
_sfc_main as default
};