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>
145 lines (144 loc) • 4.18 kB
JavaScript
import { defineComponent, toRefs, onUpdated, onBeforeUpdate, useAttrs, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
import { Motion } from "../motion/index.mjs";
import { invariant } from "hey-listen";
import { reorderContextProvider } from "./context.mjs";
import { compareMin, checkReorder, getValue } from "./utils.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "ReorderGroup",
inheritAttrs: false
},
__name: "Group",
props: {
axis: { default: "y" },
"onUpdate:values": {},
values: {},
as: { default: "ul" },
asChild: { type: Boolean },
hover: {},
press: {},
inView: {},
focus: {},
whileDrag: {},
whileHover: {},
whilePress: {},
whileInView: {},
whileFocus: {},
forwardMotionProps: { type: Boolean },
ignoreStrict: { type: Boolean },
custom: {},
initial: { type: [String, Array, Object, Boolean] },
animate: {},
exit: {},
variants: {},
inherit: { type: Boolean },
style: {},
transformTemplate: {},
transition: {},
onAnimationComplete: {},
onUpdate: {},
onAnimationStart: {},
layout: { type: [Boolean, String] },
layoutId: {},
layoutScroll: { type: Boolean },
layoutRoot: { type: Boolean },
"data-framer-portal-id": {},
crossfade: { type: Boolean },
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] },
dragMomentum: { type: Boolean },
dragTransition: {},
dragListener: { type: Boolean },
dragControls: {},
onDragStart: {},
onDragEnd: {},
onDrag: {},
onDirectionLock: {},
onDragTransitionEnd: {},
onMeasureDragConstraints: {},
onPanSessionStart: {},
onPanStart: {},
onPan: {},
onPanEnd: {},
onFocus: {},
onBlur: {}
},
setup(__props) {
const props = __props;
const { axis } = toRefs(props);
let order = [];
let isReordering = false;
function warning() {
invariant(Boolean(props.values), "Reorder.Group must be provided a values prop");
}
onUpdated(() => {
isReordering = false;
});
onBeforeUpdate(() => {
order = [];
});
reorderContextProvider({
axis,
registerItem: (value, layout) => {
const idx = order.findIndex((entry) => value === entry.value);
if (idx !== -1) {
order[idx].layout = layout[axis.value];
} else {
order.push({ value, layout: layout[axis.value] });
}
order.sort(compareMin);
},
updateOrder: (item, offset, velocity) => {
var _a;
if (isReordering)
return;
const newOrder = checkReorder(order, item, offset, velocity);
if (order !== newOrder) {
isReordering = true;
(_a = props["onUpdate:values"]) == null ? void 0 : _a.call(
props,
newOrder.map(getValue).filter((value) => props.values.includes(value))
);
}
}
});
const attrs = useAttrs();
function bindProps() {
const { axis: axis2, values, "onUpdate:values": onUpdateValues, ...rest } = props;
return {
...attrs,
...rest
};
}
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Motion), normalizeProps(guardReactiveProps(bindProps())), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default"),
createTextVNode(" " + toDisplayString(warning()), 1)
]),
_: 3
}, 16);
};
}
});
export {
_sfc_main as default
};