element-plus
Version:
A Component Library for Vue 3
60 lines (59 loc) • 2.14 kB
JavaScript
import { getClientXY } from "../../../../utils/dom/position.mjs";
import { clamp, isUndefined } from "lodash-unified";
import { computed, ref } from "vue";
//#region ../../packages/components/tabs/src/composables/use-tab-nav-touch.ts
const TOUCH_SCROLL_THRESHOLD = 5;
const useTabNavTouch = ({ scrollable, navOffset, navSize, navContainerSize, isHorizontal }) => {
const isTouchScrolling = ref(false);
const maxOffset = computed(() => Math.max(navSize.value - navContainerSize.value, 0));
let touchState;
let isMainAxisTouch;
const handleTouchStart = (event) => {
if (!scrollable.value || event.touches.length !== 1) return;
const { clientX, clientY } = getClientXY(event);
touchState = {
startX: clientX,
startY: clientY,
startOffset: navOffset.value
};
isMainAxisTouch = void 0;
};
const handleTouchMove = (event) => {
if (!touchState || !scrollable.value) return;
if (event.touches.length !== 1) {
handleTouchEnd();
return;
}
const { clientX, clientY } = getClientXY(event);
const deltaX = touchState.startX - clientX;
const deltaY = touchState.startY - clientY;
const mainAxisDelta = isHorizontal.value ? deltaX : deltaY;
const crossAxisDelta = isHorizontal.value ? deltaY : deltaX;
const mainAxisDistance = Math.abs(mainAxisDelta);
const crossAxisDistance = Math.abs(crossAxisDelta);
if (isUndefined(isMainAxisTouch)) {
if (Math.max(mainAxisDistance, crossAxisDistance) <= TOUCH_SCROLL_THRESHOLD) return;
isMainAxisTouch = mainAxisDistance > crossAxisDistance;
}
if (!isMainAxisTouch) return;
const nextOffset = clamp(touchState.startOffset + mainAxisDelta, 0, maxOffset.value);
if (maxOffset.value <= 0 || nextOffset === navOffset.value || !event.cancelable) return;
event.preventDefault();
isTouchScrolling.value = true;
navOffset.value = nextOffset;
};
const handleTouchEnd = () => {
touchState = void 0;
isMainAxisTouch = void 0;
isTouchScrolling.value = false;
};
return {
isTouchScrolling,
handleTouchStart,
handleTouchMove,
handleTouchEnd
};
};
//#endregion
export { useTabNavTouch };
//# sourceMappingURL=use-tab-nav-touch.mjs.map