antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/splitter/Splitter.js

@@ -0,0 +1,217 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { useOrientation } from "../_util/hooks/useOrientation.js";
+import { devUseWarning, isDev } from "../_util/warning.js";
+import "../_util/hooks/index.js";
+import { toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import Panel_default from "./Panel.js";
+import { convertChildrenToItems } from "./hooks/useItems.js";
+import useResizable from "./hooks/useResizable.js";
+import useSizes from "./hooks/useSizes.js";
+import useResize from "./hooks/useResize.js";
+import SplitBar_default from "./SplitBar.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import { omit } from "es-toolkit";
+import ResizeObserver from "@v-c/resize-observer";
+
+//#region src/splitter/Splitter.tsx
+const Splitter = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) => {
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("splitter", props);
+	const { classes, styles, orientation, layout, vertical } = toPropsRefs(props, "classes", "styles", "orientation", "layout", "vertical");
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const [mergedOrientation, isVertical] = useOrientation(orientation, vertical, layout);
+	const isRTL = computed(() => direction.value === "rtl");
+	const reverse = computed(() => !isVertical.value && isRTL.value);
+	const items = shallowRef([]);
+	if (isDev) {
+		const warning = devUseWarning("Splitter");
+		const existSize = items.value.some((item) => item.size !== void 0);
+		const existUndefinedSize = items.value.some((item) => item.size === void 0);
+		if (existSize && existUndefinedSize) warning(false, "usage", "When part of `Splitter.Panel` has `size`, `onResize` is required or change `size` to `defaultSize`.");
+		warning.deprecated(!layout.value, "layout", "orientation");
+	}
+	const containerSize = shallowRef();
+	const onContainerResize = (size) => {
+		const { offsetWidth, offsetHeight } = size;
+		const _containerSize = isVertical.value ? offsetHeight : offsetWidth;
+		if (_containerSize === 0) return;
+		containerSize.value = _containerSize;
+	};
+	const [panelSizes, itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] = useSizes(items, containerSize);
+	const resizableInfos = useResizable(items, itemPxSizes, isRTL);
+	const [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex] = useResize(items, resizableInfos, itemPtgSizes, containerSize, updateSizes, isRTL);
+	const onInternalResizeStart = (index) => {
+		onOffsetStart(index);
+		emit("resizeStart", index);
+	};
+	const onInternalResizeUpdate = (index, offset, lazyEnd) => {
+		const nextSize = onOffsetUpdate(index, offset);
+		if (lazyEnd) emit("resizeEnd", index);
+		else emit("resize", nextSize);
+	};
+	const onInternalResizeEnd = (lazyEnd) => {
+		onOffsetEnd();
+		if (!lazyEnd) emit("resizeEnd", itemPxSizes.value);
+	};
+	const onInternalCollapse = (index, type) => {
+		const nextSizes = onCollapse(index, type);
+		emit("resize", nextSizes);
+		emit("resizeEnd", nextSizes);
+		const collapsed = nextSizes.map((size) => Math.abs(size) < Number.EPSILON);
+		emit("collapse", collapsed, nextSizes);
+		emit("update:collapse", collapsed);
+	};
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			vertical: isVertical.value,
+			orientation: mergedOrientation.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps), computed(() => ({ dragger: { _default: "default" } })));
+	const stackSizes = computed(() => {
+		const mergedSizes = [];
+		let stack = 0;
+		const len = items.value.length;
+		for (let i = 0; i < len; i += 1) {
+			stack += itemPtgSizes.value[i];
+			mergedSizes.push(stack);
+		}
+		return mergedSizes;
+	});
+	return () => {
+		const { rootClass, lazy, draggerIcon, collapsibleIcon } = props;
+		items.value = convertChildrenToItems(slots?.default?.() ?? []);
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const containerClassName = clsx(prefixCls.value, className, `${prefixCls.value}-${mergedOrientation.value}`, { [`${prefixCls.value}-rtl`]: isRTL.value }, rootClass, mergedClassNames.value.root, contextClassName.value, cssVarCls.value, rootCls.value, hashId.value);
+		const maskCls = `${prefixCls.value}-mask`;
+		const mergedStyle = {
+			...mergedStyles.value.root,
+			...contextStyle.value,
+			...style
+		};
+		return createVNode(ResizeObserver, { "onResize": onContainerResize }, { default: () => [createVNode("div", mergeProps(restAttrs, {
+			"style": mergedStyle,
+			"class": containerClassName
+		}), [items.value?.map?.((item, idx) => {
+			const panel = createVNode(Panel_default, mergeProps({
+				...omit(item, ["_$slots"]),
+				class: clsx(mergedClassNames.value.panel, item.class),
+				style: {
+					...mergedStyles.value.panel,
+					...item.style
+				}
+			}, {
+				"prefixCls": prefixCls.value,
+				"size": panelSizes.value[idx]
+			}), { default: () => [item._$slots?.default?.()] });
+			let splitBar = null;
+			const resizableInfo = resizableInfos.value[idx];
+			if (resizableInfo) {
+				const ariaMinStart = (stackSizes.value[idx - 1] || 0) + itemPtgMinSizes.value[idx];
+				const ariaMinEnd = (stackSizes.value[idx + 1] || 100) - itemPtgMaxSizes.value[idx + 1];
+				const ariaMaxStart = (stackSizes.value[idx - 1] || 0) + itemPtgMaxSizes.value[idx];
+				const ariaMaxEnd = (stackSizes.value[idx + 1] || 100) - itemPtgMinSizes.value[idx + 1];
+				splitBar = createVNode(SplitBar_default, {
+					"lazy": lazy,
+					"index": idx,
+					"active": movingIndex.value === idx,
+					"prefixCls": prefixCls.value,
+					"vertical": isVertical.value,
+					"resizable": resizableInfo.resizable,
+					"draggerStyle": mergedStyles.value.dragger,
+					"draggerClassName": mergedClassNames.value.dragger,
+					"draggerIcon": draggerIcon,
+					"collapsibleIcon": collapsibleIcon,
+					"ariaNow": stackSizes.value[idx] * 100,
+					"ariaMin": Math.max(ariaMinStart, ariaMinEnd) * 100,
+					"ariaMax": Math.min(ariaMaxStart, ariaMaxEnd) * 100,
+					"startCollapsible": resizableInfo.startCollapsible,
+					"endCollapsible": resizableInfo.endCollapsible,
+					"showStartCollapsibleIcon": resizableInfo.showStartCollapsibleIcon,
+					"showEndCollapsibleIcon": resizableInfo.showEndCollapsibleIcon,
+					"onOffsetStart": onInternalResizeStart,
+					"onOffsetUpdate": (index, offsetX, offsetY, lazyEnd) => {
+						let offset = isVertical.value ? offsetY : offsetX;
+						if (reverse.value) offset = -offset;
+						onInternalResizeUpdate(index, offset, lazyEnd);
+					},
+					"onOffsetEnd": onInternalResizeEnd,
+					"onCollapse": onInternalCollapse,
+					"containerSize": containerSize.value || 0
+				}, slots);
+			}
+			return createVNode(Fragment, { "key": `split-panel-${idx}` }, [panel, splitBar]);
+		}), typeof movingIndex.value === "number" && createVNode("div", {
+			"aria-hidden": true,
+			"class": clsx(maskCls, `${maskCls}-${mergedOrientation.value}`)
+		}, null)])] });
+	};
+}, {
+	emits: [
+		"resizeStart",
+		"resize",
+		"resizeEnd",
+		"collapse",
+		"update:collapse"
+	],
+	props: {
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		layout: {
+			type: String,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		},
+		draggerIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		collapsibleIcon: {
+			type: Object,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ASplitter",
+	inheritAttrs: false
+});
+var Splitter_default = Splitter;
+
+//#endregion
+export { Splitter_default as default };

package/dist/splitter/hooks/sizeUtil.js

@@ -0,0 +1,49 @@
+//#region src/splitter/hooks/sizeUtil.ts
+function autoPtgSizes(ptgSizes, minPtgSizes, maxPtgSizes) {
+	let currentTotalPtg = 0;
+	const undefinedIndexes = [];
+	ptgSizes.forEach((size, index) => {
+		if (size === void 0) undefinedIndexes.push(index);
+		else currentTotalPtg += size;
+	});
+	const restPtg = 1 - currentTotalPtg;
+	const undefinedCount = undefinedIndexes.length;
+	if (restPtg < 0) {
+		const scale = 1 / currentTotalPtg;
+		return ptgSizes.map((size) => size === void 0 ? 0 : size * scale);
+	}
+	let sumMin = 0;
+	let sumMax = 0;
+	let limitMin = 0;
+	let limitMax = 1;
+	for (const index of undefinedIndexes) {
+		const min = minPtgSizes[index] || 0;
+		const max = maxPtgSizes[index] || 1;
+		sumMin += min;
+		sumMax += max;
+		limitMin = Math.max(limitMin, min);
+		limitMax = Math.min(limitMax, max);
+	}
+	if (sumMin > 1 && sumMax < 1) {
+		const avg = 1 / undefinedCount;
+		return ptgSizes.map((size) => size === void 0 ? avg : size);
+	}
+	const restAvg = restPtg / undefinedCount;
+	if (limitMin <= restAvg && restAvg <= limitMax) return ptgSizes.map((size) => size === void 0 ? restAvg : size);
+	const result = [...ptgSizes];
+	let remain = restPtg - sumMin;
+	for (let i = 0; i < undefinedCount; i += 1) {
+		const index = undefinedIndexes[i];
+		const min = minPtgSizes[index] || 0;
+		const max = maxPtgSizes[index] || 1;
+		result[index] = min;
+		const canAdd = max - min;
+		const add = Math.min(canAdd, remain);
+		result[index] += add;
+		remain -= add;
+	}
+	return result;
+}
+
+//#endregion
+export { autoPtgSizes };

package/dist/splitter/hooks/useItems.js

@@ -0,0 +1,38 @@
+import { isVNode } from "vue";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/splitter/hooks/useItems.ts
+function getCollapsible(collapsible) {
+	if (collapsible === "") collapsible = true;
+	if (collapsible && typeof collapsible === "object") return {
+		...collapsible,
+		showCollapsibleIcon: collapsible.showCollapsibleIcon === void 0 ? "auto" : collapsible.showCollapsibleIcon
+	};
+	const mergedCollapsible = !!collapsible;
+	return {
+		start: mergedCollapsible,
+		end: mergedCollapsible,
+		showCollapsibleIcon: "auto"
+	};
+}
+/**
+* Convert `children` into `items`.
+*/
+function convertChildrenToItems(children) {
+	return filterEmpty(children).filter((item) => isVNode(item)).map((node) => {
+		const { props, children: children$1 } = node;
+		const defaultSize = props?.["default-size"] ?? props?.defaultSize;
+		const { collapsible, resizable,...restProps } = props ?? {};
+		const mergedResizable = resizable !== false;
+		return {
+			...restProps,
+			defaultSize,
+			resizable: mergedResizable,
+			collapsible: getCollapsible(collapsible),
+			_$slots: children$1
+		};
+	});
+}
+
+//#endregion
+export { convertChildrenToItems };

package/dist/splitter/hooks/useResizable.js

@@ -0,0 +1,59 @@
+import { computed } from "vue";
+
+//#region src/splitter/hooks/useResizable.ts
+function getShowCollapsibleIcon(prev, next) {
+	if (prev.collapsible && next.collapsible) {
+		if (prev.showCollapsibleIcon === true || next.showCollapsibleIcon === true) return true;
+		if (prev.showCollapsibleIcon === "auto" || next.showCollapsibleIcon === "auto") return "auto";
+		return false;
+	}
+	if (prev.collapsible) return prev.showCollapsibleIcon;
+	if (next.collapsible) return next.showCollapsibleIcon;
+	return false;
+}
+function useResizable(items, pxSizes, isRTL) {
+	return computed(() => {
+		const resizeInfos = [];
+		const itemsLen = items.value.length;
+		for (let i = 0; i < itemsLen - 1; i += 1) {
+			const prevItem = items.value[i];
+			const nextItem = items.value[i + 1];
+			const prevSize = pxSizes.value[i];
+			const nextSize = pxSizes.value[i + 1];
+			const { resizable: prevResizable = true, min: prevMin, collapsible: prevCollapsible } = prevItem;
+			const { resizable: nextResizable = true, min: nextMin, collapsible: nextCollapsible } = nextItem;
+			const mergedResizable = prevResizable && nextResizable && (prevSize !== 0 || !prevMin) && (nextSize !== 0 || !nextMin);
+			const prevEndCollapsible = !!prevCollapsible.end && prevSize > 0;
+			const nextStartExpandable = !!nextCollapsible.start && nextSize === 0 && prevSize > 0;
+			const startCollapsible = prevEndCollapsible || nextStartExpandable;
+			const nextStartCollapsible = !!nextCollapsible.start && nextSize > 0;
+			const prevEndExpandable = !!prevCollapsible.end && prevSize === 0 && nextSize > 0;
+			const endCollapsible = nextStartCollapsible || prevEndExpandable;
+			const showStartCollapsibleIcon = getShowCollapsibleIcon({
+				collapsible: prevEndCollapsible,
+				showCollapsibleIcon: prevCollapsible.showCollapsibleIcon
+			}, {
+				collapsible: nextStartExpandable,
+				showCollapsibleIcon: nextCollapsible.showCollapsibleIcon
+			});
+			const showEndCollapsibleIcon = getShowCollapsibleIcon({
+				collapsible: nextStartCollapsible,
+				showCollapsibleIcon: nextCollapsible.showCollapsibleIcon
+			}, {
+				collapsible: prevEndExpandable,
+				showCollapsibleIcon: prevCollapsible.showCollapsibleIcon
+			});
+			resizeInfos[i] = {
+				resizable: mergedResizable,
+				startCollapsible: !!(isRTL.value ? endCollapsible : startCollapsible),
+				endCollapsible: !!(isRTL.value ? startCollapsible : endCollapsible),
+				showStartCollapsibleIcon: isRTL.value ? showEndCollapsibleIcon : showStartCollapsibleIcon,
+				showEndCollapsibleIcon: isRTL.value ? showStartCollapsibleIcon : showEndCollapsibleIcon
+			};
+		}
+		return resizeInfos;
+	});
+}
+
+//#endregion
+export { useResizable as default };

package/dist/splitter/hooks/useResize.js

@@ -0,0 +1,113 @@
+import { getPtg } from "./useSizes.js";
+import { computed, shallowRef } from "vue";
+
+//#region src/splitter/hooks/useResize.ts
+/**
+* Handle user drag resize logic.
+*/
+function useResize(items, resizableInfos, percentSizes, containerSize, updateSizes, isRTL) {
+	const limitSizes = computed(() => items.value.map((item) => [item.min, item.max]));
+	const mergedContainerSize = computed(() => containerSize.value || 0);
+	const ptg2px = (ptg) => ptg * mergedContainerSize.value;
+	function getLimitSize(str, defaultLimit) {
+		if (typeof str === "string") return ptg2px(getPtg(str));
+		return str ?? defaultLimit;
+	}
+	const cacheSizes = shallowRef([]);
+	const cacheCollapsedSize = shallowRef([]);
+	/**
+	* When start drag, check the direct is `start` or `end`.
+	* This will handle when 2 splitter bar are in the same position.
+	*/
+	const movingIndex = shallowRef(null);
+	const getPxSizes = () => percentSizes.value.map(ptg2px);
+	const onOffsetStart = (index) => {
+		cacheSizes.value = getPxSizes();
+		movingIndex.value = {
+			index,
+			confirmed: false
+		};
+	};
+	const onOffsetUpdate = (index, offset) => {
+		let confirmedIndex = null;
+		if ((!movingIndex.value || !movingIndex.value.confirmed) && offset !== 0) {
+			if (offset > 0) {
+				confirmedIndex = index;
+				movingIndex.value = {
+					index,
+					confirmed: true
+				};
+			} else for (let i = index; i >= 0; i -= 1) if (cacheSizes.value[i] > 0 && resizableInfos.value[i].resizable) {
+				confirmedIndex = i;
+				movingIndex.value = {
+					index: i,
+					confirmed: true
+				};
+				break;
+			}
+		}
+		const mergedIndex = confirmedIndex ?? movingIndex.value?.index ?? index;
+		const numSizes = [...cacheSizes.value];
+		const nextIndex = mergedIndex + 1;
+		const startMinSize = getLimitSize(limitSizes.value[mergedIndex][0], 0);
+		const endMinSize = getLimitSize(limitSizes.value[nextIndex][0], 0);
+		const startMaxSize = getLimitSize(limitSizes.value[mergedIndex][1], mergedContainerSize.value);
+		const endMaxSize = getLimitSize(limitSizes.value[nextIndex][1], mergedContainerSize.value);
+		let mergedOffset = offset;
+		if (numSizes[mergedIndex] + mergedOffset < startMinSize) mergedOffset = startMinSize - numSizes[mergedIndex];
+		if (numSizes[nextIndex] - mergedOffset < endMinSize) mergedOffset = numSizes[nextIndex] - endMinSize;
+		if (numSizes[mergedIndex] + mergedOffset > startMaxSize) mergedOffset = startMaxSize - numSizes[mergedIndex];
+		if (numSizes[nextIndex] - mergedOffset > endMaxSize) mergedOffset = numSizes[nextIndex] - endMaxSize;
+		numSizes[mergedIndex] = numSizes[mergedIndex] + mergedOffset;
+		numSizes[nextIndex] = numSizes[nextIndex] - mergedOffset;
+		updateSizes(numSizes);
+		return numSizes;
+	};
+	const onOffsetEnd = () => {
+		movingIndex.value = null;
+	};
+	const onCollapse = (index, type) => {
+		const currentSizes = getPxSizes();
+		const adjustedType = isRTL.value ? type === "start" ? "end" : "start" : type;
+		const currentIndex = adjustedType === "start" ? index : index + 1;
+		const targetIndex = adjustedType === "start" ? index + 1 : index;
+		const currentSize = currentSizes[currentIndex];
+		const targetSize = currentSizes[targetIndex];
+		if (currentSize !== 0 && targetSize !== 0) {
+			currentSizes[currentIndex] = 0;
+			currentSizes[targetIndex] = currentSizes[targetIndex] + currentSize;
+			cacheCollapsedSize.value = [...cacheCollapsedSize.value];
+			cacheCollapsedSize.value[index] = currentSize;
+		} else {
+			const totalSize = currentSize + targetSize;
+			const currentSizeMin = getLimitSize(limitSizes.value[currentIndex][0], 0);
+			const currentSizeMax = getLimitSize(limitSizes.value[currentIndex][1], mergedContainerSize.value);
+			const targetSizeMin = getLimitSize(limitSizes.value[targetIndex][0], 0);
+			const targetSizeMax = getLimitSize(limitSizes.value[targetIndex][1], mergedContainerSize.value);
+			const limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax);
+			const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
+			const halfOffset = targetSizeMin || (limitEnd - limitStart) / 2;
+			const targetCacheCollapsedSize = cacheCollapsedSize.value[index];
+			const currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
+			if (targetCacheCollapsedSize && targetCacheCollapsedSize <= targetSizeMax && targetCacheCollapsedSize >= targetSizeMin && currentCacheCollapsedSize <= currentSizeMax && currentCacheCollapsedSize >= currentSizeMin) {
+				currentSizes[targetIndex] = targetCacheCollapsedSize;
+				currentSizes[currentIndex] = currentCacheCollapsedSize;
+			} else {
+				currentSizes[currentIndex] = currentSizes[currentIndex] - halfOffset;
+				currentSizes[targetIndex] = currentSizes[targetIndex] + halfOffset;
+			}
+		}
+		updateSizes(currentSizes);
+		return currentSizes;
+	};
+	return [
+		onOffsetStart,
+		onOffsetUpdate,
+		onOffsetEnd,
+		onCollapse,
+		computed(() => movingIndex.value?.index)
+	];
+}
+
+//#endregion
+export { useResize as default };

package/dist/splitter/hooks/useSizes.js

@@ -0,0 +1,72 @@
+import { autoPtgSizes } from "./sizeUtil.js";
+import { computed, shallowRef, unref } from "vue";
+
+//#region src/splitter/hooks/useSizes.ts
+function getPtg(str) {
+	return Number(str.slice(0, -1)) / 100;
+}
+function isPtg(itemSize) {
+	return typeof itemSize === "string" && itemSize.endsWith("%");
+}
+/**
+* Save the size state.
+* Align the size into flex percentage base.
+*/
+function useSizes(items, containerSize) {
+	const propSizes = computed(() => items.value.map((item) => item.size));
+	const itemsCount = computed(() => items.value.length);
+	const mergedContainerSize = computed(() => unref(containerSize) || 0);
+	const ptg2px = (ptg) => ptg * mergedContainerSize.value;
+	const innerSizes = shallowRef([]);
+	let lastItemsCount = 0;
+	const sizes = computed(() => {
+		const currentCount = itemsCount.value;
+		const mergedSizes = [];
+		if (currentCount !== lastItemsCount) {
+			lastItemsCount = currentCount;
+			innerSizes.value = items.value?.map((item) => item.defaultSize);
+		}
+		for (let i = 0; i < currentCount; i += 1) mergedSizes[i] = propSizes.value?.[i] ?? innerSizes.value?.[i];
+		return mergedSizes;
+	});
+	const postPercentMinSizes = computed(() => {
+		return items.value.map((item) => {
+			if (isPtg(item.min)) return getPtg(item.min);
+			return (item.min || 0) / mergedContainerSize.value;
+		});
+	});
+	const postPercentMaxSizes = computed(() => {
+		return items.value.map((item) => {
+			if (isPtg(item.max)) return getPtg(item.max);
+			return (item.max || mergedContainerSize.value) / mergedContainerSize.value;
+		});
+	});
+	const postPercentSizes = computed(() => {
+		const ptgList = [];
+		for (let i = 0; i < itemsCount.value; i += 1) {
+			const itemSize = sizes.value[i];
+			if (isPtg(itemSize)) ptgList[i] = getPtg(itemSize);
+			else if (itemSize || itemSize === 0) {
+				const num = Number(itemSize);
+				if (!Number.isNaN(num)) ptgList[i] = num / mergedContainerSize.value;
+			} else ptgList[i] = void 0;
+		}
+		return autoPtgSizes(ptgList, postPercentMinSizes.value, postPercentMaxSizes.value);
+	});
+	const postPxSizes = computed(() => postPercentSizes.value.map(ptg2px));
+	const panelSizes = computed(() => containerSize?.value ? postPxSizes.value : sizes.value);
+	const setInnerSizes = (newSizes) => {
+		innerSizes.value = newSizes;
+	};
+	return [
+		panelSizes,
+		postPxSizes,
+		postPercentSizes,
+		postPercentMinSizes,
+		postPercentMaxSizes,
+		setInnerSizes
+	];
+}
+
+//#endregion
+export { useSizes as default, getPtg };

package/dist/splitter/index.d.ts

@@ -0,0 +1,8 @@
+import { InternalPanelProps, SplitterEmits, SplitterProps, SplitterSlots } from "./interface.js";
+import { Splitter } from "./Splitter.js";
+import * as vue102 from "vue";
+
+//#region src/splitter/index.d.ts
+declare const SplitterPanel: vue102.DefineSetupFnComponent<InternalPanelProps, {}, {}, InternalPanelProps & {}, vue102.PublicProps>;
+//#endregion
+export { SplitterPanel };

package/dist/splitter/index.js

@@ -0,0 +1,14 @@
+import Panel_default from "./Panel.js";
+import Splitter_default from "./Splitter.js";
+
+//#region src/splitter/index.tsx
+Splitter_default.Panel = Panel_default;
+Splitter_default.install = (app) => {
+	app.component(Splitter_default.name, Splitter_default);
+	app.component(Panel_default.name, Panel_default);
+};
+const SplitterPanel = Panel_default;
+var splitter_default = Splitter_default;
+
+//#endregion
+export { SplitterPanel, splitter_default as default };

package/dist/splitter/interface.d.ts

@@ -0,0 +1,68 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import { Orientation } from "../_util/hooks/useOrientation.js";
+import "../_util/hooks/index.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { ShowCollapsibleIconMode } from "./SplitBar.js";
+import { CSSProperties } from "vue";
+
+//#region src/splitter/interface.d.ts
+type DraggerSemantic = 'default' | 'active';
+type SplitterSemanticName = 'root' | 'panel';
+type SplitterClassNamesType = SemanticClassNamesType<SplitterProps, SplitterSemanticName, {
+  dragger?: string | SemanticClassNames<DraggerSemantic>;
+}>;
+type SplitterStylesType = SemanticStylesType<SplitterProps, SplitterSemanticName, {
+  dragger?: CSSProperties | SemanticStyles<DraggerSemantic>;
+}>;
+interface SplitterProps extends ComponentBaseProps {
+  classes?: SplitterClassNamesType;
+  styles?: SplitterStylesType;
+  /**
+   * @deprecated please use `orientation`
+   * @default horizontal
+   */
+  layout?: Orientation;
+  orientation?: Orientation;
+  vertical?: boolean;
+  draggerIcon?: VueNode;
+  collapsibleIcon?: {
+    start?: VueNode;
+    end?: VueNode;
+  };
+  lazy?: boolean;
+}
+interface SplitterEmits {
+  'resizeStart': (sizes: number[]) => void;
+  'resize': (sizes: number[]) => void;
+  'resizeEnd': (sizes: number[]) => void;
+  'collapse': (collapsed: boolean[], sizes: number[]) => void;
+  'update:collapse': (collapsed: boolean[]) => void;
+  [key: string]: (...args: any[]) => void;
+}
+interface SplitterSlots {
+  draggerIcon?: () => any;
+  collapsibleIconStart?: () => any;
+  collapsibleIconEnd?: () => any;
+  default?: () => any;
+}
+interface PanelProps {
+  class?: string;
+  style?: CSSProperties;
+  min?: number | string;
+  max?: number | string;
+  size?: number | string;
+  collapsible?: boolean | {
+    start?: boolean;
+    end?: boolean;
+    showCollapsibleIcon?: ShowCollapsibleIconMode;
+  };
+  resizable?: boolean;
+  defaultSize?: number | string;
+}
+interface InternalPanelProps extends PanelProps {
+  class?: string;
+  prefixCls?: string;
+}
+//#endregion
+export { InternalPanelProps, SplitterEmits, SplitterProps, SplitterSlots };

package/dist/splitter/style/index.d.ts

@@ -0,0 +1,29 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/splitter/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 拖拽标识元素大小
+   * @descEN Drag and drop the identity element size
+   * @deprecated Please use `splitBarDraggableSize` instead.
+   */
+  resizeSpinnerSize: number;
+  /**
+   * @desc 拖拽标识元素大小
+   * @descEN Drag and drop the identity element size
+   */
+  splitBarDraggableSize: number;
+  /**
+   * @desc 拖拽元素显示大小
+   * @descEN Drag the element display size
+   */
+  splitBarSize: number;
+  /**
+   * @desc 拖拽触发区域大小
+   * @descEN Drag and drop trigger area size
+   */
+  splitTriggerSize: number;
+}
+//#endregion
+export { ComponentToken };