@v-c/tabs 0.0.2

package/dist/hooks/useAnimateConfig.js

@@ -0,0 +1,26 @@
+import { warning } from "@v-c/util/dist/warning";
+function useAnimateConfig(animated = {
+	inkBar: true,
+	tabPane: false
+}) {
+	let mergedAnimated;
+	if (animated === false) mergedAnimated = {
+		inkBar: false,
+		tabPane: false
+	};
+	else if (animated === true) mergedAnimated = {
+		inkBar: true,
+		tabPane: false
+	};
+	else mergedAnimated = {
+		inkBar: true,
+		...typeof animated === "object" ? animated : {}
+	};
+	if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === void 0) mergedAnimated.tabPane = true;
+	if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
+		if (process.env.NODE_ENV !== "production") warning(false, "`animated.tabPane` is true but `animated.tabPaneMotion` is not provided. Motion will not work.");
+		mergedAnimated.tabPane = false;
+	}
+	return mergedAnimated;
+}
+export { useAnimateConfig as default };

package/dist/hooks/useIndicator.cjs

@@ -0,0 +1,68 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
+__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
+function useIndicator(options) {
+	const { activeTabOffset, horizontal, rtl, indicator } = options;
+	const inkStyle = (0, vue.ref)();
+	const inkBarRafRef = (0, vue.ref)();
+	const getLength = (origin) => {
+		const size = indicator?.value?.size;
+		if (typeof size === "function") return size(origin);
+		if (typeof size === "number") return size;
+		return origin;
+	};
+	function cleanInkBarRaf() {
+		if (!inkBarRafRef.value) return;
+		__v_c_util_dist_raf.default.cancel(inkBarRafRef.value);
+	}
+	(0, vue.watch)([
+		() => activeTabOffset.value,
+		() => horizontal.value,
+		() => rtl.value,
+		() => indicator?.value
+	], async (_n, _o) => {
+		await (0, vue.nextTick)();
+		const align = indicator?.value?.align || "center";
+		const newInkStyle = {};
+		if (activeTabOffset.value) if (horizontal.value) {
+			newInkStyle.width = `${getLength(activeTabOffset.value.width)}px`;
+			const key = rtl.value ? "right" : "left";
+			if (align === "start") newInkStyle[key] = `${activeTabOffset.value[key]}px`;
+			if (align === "center") {
+				newInkStyle[key] = `${activeTabOffset.value[key] + activeTabOffset.value.width / 2}px`;
+				newInkStyle.transform = rtl.value ? "translateX(50%)" : "translateX(-50%)";
+			}
+			if (align === "end") {
+				newInkStyle[key] = `${activeTabOffset.value[key] + activeTabOffset.value.width}px`;
+				newInkStyle.transform = "translateX(-100%)";
+			}
+		} else {
+			newInkStyle.height = `${getLength(activeTabOffset.value.height)}px`;
+			if (align === "start") newInkStyle.top = `${activeTabOffset.value.top}px`;
+			if (align === "center") {
+				newInkStyle.top = `${activeTabOffset.value.top + activeTabOffset.value.height / 2}px`;
+				newInkStyle.transform = "translateY(-50%)";
+			}
+			if (align === "end") {
+				newInkStyle.top = `${activeTabOffset.value.top + activeTabOffset.value.height}px`;
+				newInkStyle.transform = "translateY(-100%)";
+			}
+		}
+		cleanInkBarRaf();
+		inkBarRafRef.value = (0, __v_c_util_dist_raf.default)(() => {
+			if (!(inkStyle.value && newInkStyle && Object.keys(newInkStyle).every((key) => {
+				const newValue = newInkStyle[key];
+				const oldValue = inkStyle.value?.[key];
+				return typeof newValue === "number" && typeof oldValue === "number" ? Math.round(newValue) === Math.round(oldValue) : newValue === oldValue;
+			}))) inkStyle.value = newInkStyle;
+		});
+	}, { immediate: true });
+	(0, vue.onUnmounted)(() => {
+		cleanInkBarRaf();
+	});
+	return inkStyle;
+}
+var useIndicator_default = useIndicator;
+exports.default = useIndicator_default;

package/dist/hooks/useIndicator.d.ts

@@ -0,0 +1,11 @@
+import { ComputedRef, CSSProperties, Ref } from 'vue';
+import { IndicatorConfig } from '../interface';
+import { TabOffset } from './useOffsets';
+interface UseIndicatorOptions {
+    activeTabOffset: ComputedRef<TabOffset> | Ref<TabOffset>;
+    horizontal: ComputedRef<boolean> | Ref<boolean>;
+    rtl: ComputedRef<boolean> | Ref<boolean>;
+    indicator?: ComputedRef<IndicatorConfig | undefined> | Ref<IndicatorConfig | undefined>;
+}
+declare function useIndicator(options: UseIndicatorOptions): Ref<CSSProperties | undefined, CSSProperties | undefined>;
+export default useIndicator;

package/dist/hooks/useIndicator.js

@@ -0,0 +1,65 @@
+import { nextTick, onUnmounted, ref, watch } from "vue";
+import raf from "@v-c/util/dist/raf";
+function useIndicator(options) {
+	const { activeTabOffset, horizontal, rtl, indicator } = options;
+	const inkStyle = ref();
+	const inkBarRafRef = ref();
+	const getLength = (origin) => {
+		const size = indicator?.value?.size;
+		if (typeof size === "function") return size(origin);
+		if (typeof size === "number") return size;
+		return origin;
+	};
+	function cleanInkBarRaf() {
+		if (!inkBarRafRef.value) return;
+		raf.cancel(inkBarRafRef.value);
+	}
+	watch([
+		() => activeTabOffset.value,
+		() => horizontal.value,
+		() => rtl.value,
+		() => indicator?.value
+	], async (_n, _o) => {
+		await nextTick();
+		const align = indicator?.value?.align || "center";
+		const newInkStyle = {};
+		if (activeTabOffset.value) if (horizontal.value) {
+			newInkStyle.width = `${getLength(activeTabOffset.value.width)}px`;
+			const key = rtl.value ? "right" : "left";
+			if (align === "start") newInkStyle[key] = `${activeTabOffset.value[key]}px`;
+			if (align === "center") {
+				newInkStyle[key] = `${activeTabOffset.value[key] + activeTabOffset.value.width / 2}px`;
+				newInkStyle.transform = rtl.value ? "translateX(50%)" : "translateX(-50%)";
+			}
+			if (align === "end") {
+				newInkStyle[key] = `${activeTabOffset.value[key] + activeTabOffset.value.width}px`;
+				newInkStyle.transform = "translateX(-100%)";
+			}
+		} else {
+			newInkStyle.height = `${getLength(activeTabOffset.value.height)}px`;
+			if (align === "start") newInkStyle.top = `${activeTabOffset.value.top}px`;
+			if (align === "center") {
+				newInkStyle.top = `${activeTabOffset.value.top + activeTabOffset.value.height / 2}px`;
+				newInkStyle.transform = "translateY(-50%)";
+			}
+			if (align === "end") {
+				newInkStyle.top = `${activeTabOffset.value.top + activeTabOffset.value.height}px`;
+				newInkStyle.transform = "translateY(-100%)";
+			}
+		}
+		cleanInkBarRaf();
+		inkBarRafRef.value = raf(() => {
+			if (!(inkStyle.value && newInkStyle && Object.keys(newInkStyle).every((key) => {
+				const newValue = newInkStyle[key];
+				const oldValue = inkStyle.value?.[key];
+				return typeof newValue === "number" && typeof oldValue === "number" ? Math.round(newValue) === Math.round(oldValue) : newValue === oldValue;
+			}))) inkStyle.value = newInkStyle;
+		});
+	}, { immediate: true });
+	onUnmounted(() => {
+		cleanInkBarRaf();
+	});
+	return inkStyle;
+}
+var useIndicator_default = useIndicator;
+export { useIndicator_default as default };

package/dist/hooks/useOffsets.cjs

@@ -0,0 +1,39 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var DEFAULT_SIZE = {
+	width: 0,
+	height: 0,
+	left: 0,
+	top: 0
+};
+function useOffsets(tabs, tabSizes, holderScrollWidth) {
+	const mapRef = (0, vue.shallowRef)(/* @__PURE__ */ new Map());
+	(0, vue.watch)([
+		() => tabs.value.map((tab) => tab.key).join("_"),
+		tabSizes,
+		holderScrollWidth
+	], () => {
+		const map = /* @__PURE__ */ new Map();
+		const firstKey = tabs.value[0]?.key;
+		const lastOffset = (firstKey ? tabSizes.value.get(firstKey) : void 0) || DEFAULT_SIZE;
+		const rightOffset = lastOffset.left + lastOffset.width;
+		for (let i = 0; i < tabs.value.length; i += 1) {
+			const { key } = tabs.value[i];
+			let data = tabSizes.value.get(key);
+			if (!data) {
+				const prevKey = tabs.value[i - 1]?.key;
+				data = (prevKey ? tabSizes.value.get(prevKey) : void 0) || DEFAULT_SIZE;
+			}
+			const entity = map.get(key) || {
+				...data,
+				right: 0
+			};
+			entity.right = rightOffset - entity.left - entity.width;
+			map.set(key, entity);
+		}
+		mapRef.value = map;
+	}, { immediate: true });
+	return mapRef;
+}
+exports.default = useOffsets;

package/dist/hooks/useOffsets.d.ts

@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+import { Tab } from '../interface';
+export interface TabOffset {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    right: number;
+}
+export type TabOffsetMap = Map<string, TabOffset>;
+export interface TabSize {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+}
+export type TabSizeMap = Map<string, TabSize>;
+export default function useOffsets(tabs: Ref<Tab[]>, tabSizes: Ref<TabSizeMap>, holderScrollWidth: Ref<number>): Ref<TabOffsetMap>;

package/dist/hooks/useOffsets.js

@@ -0,0 +1,37 @@
+import { shallowRef, watch } from "vue";
+var DEFAULT_SIZE = {
+	width: 0,
+	height: 0,
+	left: 0,
+	top: 0
+};
+function useOffsets(tabs, tabSizes, holderScrollWidth) {
+	const mapRef = shallowRef(/* @__PURE__ */ new Map());
+	watch([
+		() => tabs.value.map((tab) => tab.key).join("_"),
+		tabSizes,
+		holderScrollWidth
+	], () => {
+		const map = /* @__PURE__ */ new Map();
+		const firstKey = tabs.value[0]?.key;
+		const lastOffset = (firstKey ? tabSizes.value.get(firstKey) : void 0) || DEFAULT_SIZE;
+		const rightOffset = lastOffset.left + lastOffset.width;
+		for (let i = 0; i < tabs.value.length; i += 1) {
+			const { key } = tabs.value[i];
+			let data = tabSizes.value.get(key);
+			if (!data) {
+				const prevKey = tabs.value[i - 1]?.key;
+				data = (prevKey ? tabSizes.value.get(prevKey) : void 0) || DEFAULT_SIZE;
+			}
+			const entity = map.get(key) || {
+				...data,
+				right: 0
+			};
+			entity.right = rightOffset - entity.left - entity.width;
+			map.set(key, entity);
+		}
+		mapRef.value = map;
+	}, { immediate: true });
+	return mapRef;
+}
+export { useOffsets as default };

package/dist/hooks/useTouchMove.cjs

@@ -0,0 +1,119 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var MIN_SWIPE_DISTANCE = .1;
+var STOP_SWIPE_DISTANCE = .01;
+var REFRESH_INTERVAL = 20;
+var SPEED_OFF_MULTIPLE = .995 ** REFRESH_INTERVAL;
+function useTouchMove(elRef, onOffset) {
+	const touchPosition = (0, vue.ref)(null);
+	const lastTimestamp = (0, vue.ref)(0);
+	const lastTimeDiff = (0, vue.ref)(0);
+	const lastOffset = (0, vue.ref)(null);
+	const motionRef = (0, vue.ref)();
+	const lastWheelDirectionRef = (0, vue.ref)();
+	function onTouchStart(e) {
+		const { screenX, screenY } = e.touches[0];
+		touchPosition.value = {
+			x: screenX,
+			y: screenY
+		};
+		if (motionRef.value != null) window.clearInterval(motionRef.value);
+	}
+	function onTouchMove(e) {
+		if (!touchPosition.value) return;
+		const { screenX, screenY } = e.touches[0];
+		const prev = touchPosition.value;
+		touchPosition.value = {
+			x: screenX,
+			y: screenY
+		};
+		const offsetX = screenX - prev.x;
+		const offsetY = screenY - prev.y;
+		onOffset(offsetX, offsetY);
+		const now = Date.now();
+		lastTimeDiff.value = now - lastTimestamp.value;
+		lastTimestamp.value = now;
+		lastOffset.value = {
+			x: offsetX,
+			y: offsetY
+		};
+	}
+	function onTouchEnd() {
+		if (!touchPosition.value) return;
+		touchPosition.value = null;
+		const lo = lastOffset.value;
+		lastOffset.value = null;
+		if (lo) {
+			const distanceX = lo.x / (lastTimeDiff.value || 1);
+			const distanceY = lo.y / (lastTimeDiff.value || 1);
+			const absX = Math.abs(distanceX);
+			const absY = Math.abs(distanceY);
+			if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
+			let currentX = distanceX;
+			let currentY = distanceY;
+			motionRef.value = window.setInterval(() => {
+				if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
+					if (motionRef.value != null) window.clearInterval(motionRef.value);
+					return;
+				}
+				currentX *= SPEED_OFF_MULTIPLE;
+				currentY *= SPEED_OFF_MULTIPLE;
+				onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL);
+			}, REFRESH_INTERVAL);
+		}
+	}
+	function onWheel(e) {
+		const { deltaX, deltaY } = e;
+		let mixed = 0;
+		const absX = Math.abs(deltaX);
+		const absY = Math.abs(deltaY);
+		if (absX === absY) mixed = lastWheelDirectionRef.value === "x" ? deltaX : deltaY;
+		else if (absX > absY) {
+			mixed = deltaX;
+			lastWheelDirectionRef.value = "x";
+		} else {
+			mixed = deltaY;
+			lastWheelDirectionRef.value = "y";
+		}
+		if (onOffset(-mixed, -mixed)) e.preventDefault();
+	}
+	const touchEventsRef = (0, vue.ref)();
+	touchEventsRef.value = {
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		onWheel
+	};
+	(0, vue.onMounted)(() => {
+		function onProxyTouchStart(e) {
+			touchEventsRef.value?.onTouchStart(e);
+		}
+		function onProxyTouchMove(e) {
+			touchEventsRef.value?.onTouchMove(e);
+		}
+		function onProxyTouchEnd(e) {
+			touchEventsRef.value?.onTouchEnd(e);
+		}
+		function onProxyWheel(e) {
+			touchEventsRef.value?.onWheel(e);
+		}
+		document.addEventListener("touchmove", onProxyTouchMove, { passive: false });
+		document.addEventListener("touchend", onProxyTouchEnd, { passive: true });
+		const el = elRef.value;
+		if (el) {
+			el.addEventListener("touchstart", onProxyTouchStart, { passive: true });
+			el.addEventListener("wheel", onProxyWheel, { passive: false });
+		}
+		(0, vue.onUnmounted)(() => {
+			document.removeEventListener("touchmove", onProxyTouchMove);
+			document.removeEventListener("touchend", onProxyTouchEnd);
+			if (el) {
+				el.removeEventListener("touchstart", onProxyTouchStart);
+				el.removeEventListener("wheel", onProxyWheel);
+			}
+			if (motionRef.value != null) window.clearInterval(motionRef.value);
+		});
+	});
+}
+exports.default = useTouchMove;

package/dist/hooks/useTouchMove.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export default function useTouchMove(elRef: Ref<HTMLDivElement | null>, onOffset: (offsetX: number, offsetY: number) => boolean): void;

package/dist/hooks/useTouchMove.js

@@ -0,0 +1,117 @@
+import { onMounted, onUnmounted, ref } from "vue";
+var MIN_SWIPE_DISTANCE = .1;
+var STOP_SWIPE_DISTANCE = .01;
+var REFRESH_INTERVAL = 20;
+var SPEED_OFF_MULTIPLE = .995 ** REFRESH_INTERVAL;
+function useTouchMove(elRef, onOffset) {
+	const touchPosition = ref(null);
+	const lastTimestamp = ref(0);
+	const lastTimeDiff = ref(0);
+	const lastOffset = ref(null);
+	const motionRef = ref();
+	const lastWheelDirectionRef = ref();
+	function onTouchStart(e) {
+		const { screenX, screenY } = e.touches[0];
+		touchPosition.value = {
+			x: screenX,
+			y: screenY
+		};
+		if (motionRef.value != null) window.clearInterval(motionRef.value);
+	}
+	function onTouchMove(e) {
+		if (!touchPosition.value) return;
+		const { screenX, screenY } = e.touches[0];
+		const prev = touchPosition.value;
+		touchPosition.value = {
+			x: screenX,
+			y: screenY
+		};
+		const offsetX = screenX - prev.x;
+		const offsetY = screenY - prev.y;
+		onOffset(offsetX, offsetY);
+		const now = Date.now();
+		lastTimeDiff.value = now - lastTimestamp.value;
+		lastTimestamp.value = now;
+		lastOffset.value = {
+			x: offsetX,
+			y: offsetY
+		};
+	}
+	function onTouchEnd() {
+		if (!touchPosition.value) return;
+		touchPosition.value = null;
+		const lo = lastOffset.value;
+		lastOffset.value = null;
+		if (lo) {
+			const distanceX = lo.x / (lastTimeDiff.value || 1);
+			const distanceY = lo.y / (lastTimeDiff.value || 1);
+			const absX = Math.abs(distanceX);
+			const absY = Math.abs(distanceY);
+			if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
+			let currentX = distanceX;
+			let currentY = distanceY;
+			motionRef.value = window.setInterval(() => {
+				if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
+					if (motionRef.value != null) window.clearInterval(motionRef.value);
+					return;
+				}
+				currentX *= SPEED_OFF_MULTIPLE;
+				currentY *= SPEED_OFF_MULTIPLE;
+				onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL);
+			}, REFRESH_INTERVAL);
+		}
+	}
+	function onWheel(e) {
+		const { deltaX, deltaY } = e;
+		let mixed = 0;
+		const absX = Math.abs(deltaX);
+		const absY = Math.abs(deltaY);
+		if (absX === absY) mixed = lastWheelDirectionRef.value === "x" ? deltaX : deltaY;
+		else if (absX > absY) {
+			mixed = deltaX;
+			lastWheelDirectionRef.value = "x";
+		} else {
+			mixed = deltaY;
+			lastWheelDirectionRef.value = "y";
+		}
+		if (onOffset(-mixed, -mixed)) e.preventDefault();
+	}
+	const touchEventsRef = ref();
+	touchEventsRef.value = {
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		onWheel
+	};
+	onMounted(() => {
+		function onProxyTouchStart(e) {
+			touchEventsRef.value?.onTouchStart(e);
+		}
+		function onProxyTouchMove(e) {
+			touchEventsRef.value?.onTouchMove(e);
+		}
+		function onProxyTouchEnd(e) {
+			touchEventsRef.value?.onTouchEnd(e);
+		}
+		function onProxyWheel(e) {
+			touchEventsRef.value?.onWheel(e);
+		}
+		document.addEventListener("touchmove", onProxyTouchMove, { passive: false });
+		document.addEventListener("touchend", onProxyTouchEnd, { passive: true });
+		const el = elRef.value;
+		if (el) {
+			el.addEventListener("touchstart", onProxyTouchStart, { passive: true });
+			el.addEventListener("wheel", onProxyWheel, { passive: false });
+		}
+		onUnmounted(() => {
+			document.removeEventListener("touchmove", onProxyTouchMove);
+			document.removeEventListener("touchend", onProxyTouchEnd);
+			if (el) {
+				el.removeEventListener("touchstart", onProxyTouchStart);
+				el.removeEventListener("wheel", onProxyWheel);
+			}
+			if (motionRef.value != null) window.clearInterval(motionRef.value);
+		});
+	});
+}
+export { useTouchMove as default };

package/dist/hooks/useVisibleRange.cjs

@@ -0,0 +1,51 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var DEFAULT_SIZE = {
+	width: 0,
+	height: 0,
+	left: 0,
+	top: 0,
+	right: 0
+};
+function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, { tabs, tabPosition, rtl }) {
+	const isHorizontal = (0, vue.computed)(() => tabPosition.value === "top" || tabPosition.value === "bottom");
+	const charUnit = (0, vue.computed)(() => isHorizontal.value ? "width" : "height");
+	const position = (0, vue.computed)(() => isHorizontal.value ? rtl.value ? "right" : "left" : "top");
+	const transformSize = (0, vue.computed)(() => isHorizontal.value ? Math.abs(transform.value) : -transform.value);
+	const rangeRef = (0, vue.shallowRef)([0, 0]);
+	(0, vue.watch)([
+		tabOffsets,
+		visibleTabContentValue,
+		tabContentSizeValue,
+		addNodeSizeValue,
+		operationNodeSizeValue,
+		transformSize,
+		tabPosition,
+		rtl,
+		() => tabs.value.map((tab) => tab.key).join("_")
+	], () => {
+		const list = tabs.value;
+		if (!list.length) {
+			rangeRef.value = [0, 0];
+			return;
+		}
+		const len = list.length;
+		let endIndex = len;
+		for (let i = 0; i < len; i += 1) {
+			const offset = tabOffsets.value.get(list[i].key) || DEFAULT_SIZE;
+			if (Math.floor(offset[position.value] + offset[charUnit.value]) > Math.floor(transformSize.value + visibleTabContentValue.value)) {
+				endIndex = i - 1;
+				break;
+			}
+		}
+		let startIndex = 0;
+		for (let i = len - 1; i >= 0; i -= 1) if ((tabOffsets.value.get(list[i].key) || DEFAULT_SIZE)[position.value] < transformSize.value) {
+			startIndex = i + 1;
+			break;
+		}
+		rangeRef.value = startIndex > endIndex ? [0, -1] : [startIndex, endIndex];
+	}, { immediate: true });
+	return rangeRef;
+}
+exports.default = useVisibleRange;

package/dist/hooks/useVisibleRange.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+import { Tab, TabNavListProps } from '../interface';
+export interface TabOffsetInfo {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    right: number;
+}
+export type TabOffsetMap = Map<string, TabOffsetInfo>;
+export type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
+export default function useVisibleRange(tabOffsets: Ref<TabOffsetMap>, visibleTabContentValue: Ref<number>, transform: Ref<number>, tabContentSizeValue: Ref<number>, addNodeSizeValue: Ref<number>, operationNodeSizeValue: Ref<number>, { tabs, tabPosition, rtl, }: {
+    tabs: Ref<Tab[]>;
+} & {
+    tabPosition: Ref<TabNavListProps['tabPosition']>;
+    rtl: Ref<boolean>;
+}): Ref<[visibleStart: number, visibleEnd: number]>;

package/dist/hooks/useVisibleRange.js

@@ -0,0 +1,49 @@
+import { computed, shallowRef, watch } from "vue";
+var DEFAULT_SIZE = {
+	width: 0,
+	height: 0,
+	left: 0,
+	top: 0,
+	right: 0
+};
+function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, { tabs, tabPosition, rtl }) {
+	const isHorizontal = computed(() => tabPosition.value === "top" || tabPosition.value === "bottom");
+	const charUnit = computed(() => isHorizontal.value ? "width" : "height");
+	const position = computed(() => isHorizontal.value ? rtl.value ? "right" : "left" : "top");
+	const transformSize = computed(() => isHorizontal.value ? Math.abs(transform.value) : -transform.value);
+	const rangeRef = shallowRef([0, 0]);
+	watch([
+		tabOffsets,
+		visibleTabContentValue,
+		tabContentSizeValue,
+		addNodeSizeValue,
+		operationNodeSizeValue,
+		transformSize,
+		tabPosition,
+		rtl,
+		() => tabs.value.map((tab) => tab.key).join("_")
+	], () => {
+		const list = tabs.value;
+		if (!list.length) {
+			rangeRef.value = [0, 0];
+			return;
+		}
+		const len = list.length;
+		let endIndex = len;
+		for (let i = 0; i < len; i += 1) {
+			const offset = tabOffsets.value.get(list[i].key) || DEFAULT_SIZE;
+			if (Math.floor(offset[position.value] + offset[charUnit.value]) > Math.floor(transformSize.value + visibleTabContentValue.value)) {
+				endIndex = i - 1;
+				break;
+			}
+		}
+		let startIndex = 0;
+		for (let i = len - 1; i >= 0; i -= 1) if ((tabOffsets.value.get(list[i].key) || DEFAULT_SIZE)[position.value] < transformSize.value) {
+			startIndex = i + 1;
+			break;
+		}
+		rangeRef.value = startIndex > endIndex ? [0, -1] : [startIndex, endIndex];
+	}, { immediate: true });
+	return rangeRef;
+}
+export { useVisibleRange as default };

package/dist/index.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_Tabs = require("./Tabs.cjs");
+var src_default = require_Tabs.default;
+exports.default = src_default;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { TabPaneProps, TabsProps } from './interface';
+import { default as Tabs } from './Tabs.vue';
+export type { TabPaneProps, TabsProps };
+export type { AnimatedConfig, EditableConfig, GetIndicatorSize, MoreProps, Tab } from './interface';
+export default Tabs;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Tabs_default from "./Tabs.js";
+var src_default = Tabs_default;
+export { src_default as default };