vuestic-ui
Version:
Vue 3 UI Framework
44 lines (43 loc) • 1.61 kB
JavaScript
import { ref } from "vue";
import { u as useEvent } from "../../composables/useEvent.mjs";
const useSplitDraggerProps = {
vertical: { type: Boolean, default: false },
disabled: { type: Boolean, default: false }
};
const useSplitDragger = (containerSizeComputed, splitterPositionComputed, props) => {
const isDragging = ref(false);
const dragStartPosition = ref(0);
const dragStartSplitterPosition = ref(0);
const currentSplitterPosition = ref(0);
const getEventPosition = (e, eventName) => {
const event = e.type === eventName ? e : e.changedTouches[0];
return props.vertical ? event.pageY : event.pageX;
};
const startDragging = (e) => {
if (props.disabled || !containerSizeComputed.value) {
return;
}
isDragging.value = true;
dragStartPosition.value = getEventPosition(e, "mousedown");
dragStartSplitterPosition.value = splitterPositionComputed.value;
};
const processDragging = (e) => {
if (!isDragging.value) {
return;
}
const currentPosition = getEventPosition(e, "mousemove");
const distance = currentPosition - dragStartPosition.value;
currentSplitterPosition.value = dragStartSplitterPosition.value + Math.floor(distance / containerSizeComputed.value * 100);
};
const stopDragging = () => {
isDragging.value = false;
};
useEvent(["mousemove", "touchmove"], processDragging);
useEvent(["mouseup", "touchcancel"], stopDragging);
return { isDragging, startDragging, currentSplitterPosition };
};
export {
useSplitDragger as a,
useSplitDraggerProps as u
};
//# sourceMappingURL=useSplitDragger.mjs.map