@zboson/ui 0.0.0-stage → 0.0.2

package/dist/splitter/SplitBar.js

@@ -0,0 +1,298 @@
+import { genCssVar } from "../theme/util/genStyleUtils.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import useLocale from "../locale/useLocale.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from "@zboson/icons";
+//#region src/splitter/SplitBar.tsx
+function getAriaLabel(icon, defaultLabel) {
+	const node = Array.isArray(icon) && icon.length === 1 ? icon[0] : icon;
+	return isVNode(node) && node.props?.["aria-label"] || defaultLabel;
+}
+function getValidNumber(num) {
+	return typeof num === "number" && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
+}
+const DOUBLE_CLICK_TIME_GAP = 300;
+const SplitBar = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const [locale] = useLocale("Splitter");
+	const { vertical, resizable, index, containerSize, ariaNow, ariaMin, ariaMax, prefixCls, rootPrefixCls, lazy } = toPropsRefs(props, "vertical", "resizable", "index", "containerSize", "ariaNow", "ariaMin", "ariaMax", "prefixCls", "rootPrefixCls", "lazy");
+	const splitBarPrefixCls = computed(() => `${prefixCls.value}-bar`);
+	const lastClickTimeRef = shallowRef(0);
+	const barVarName = computed(() => genCssVar(rootPrefixCls.value, "splitter")[0]);
+	const startPos = shallowRef();
+	const constrainedOffset = shallowRef(0);
+	const constrainedOffsetX = computed(() => vertical.value ? 0 : constrainedOffset.value);
+	const constrainedOffsetY = computed(() => vertical.value ? constrainedOffset.value : 0);
+	const onMouseDown = (event) => {
+		event.stopPropagation();
+		const currentTime = Date.now();
+		const timeGap = currentTime - lastClickTimeRef.value;
+		if (timeGap > 0 && timeGap < DOUBLE_CLICK_TIME_GAP) return;
+		lastClickTimeRef.value = currentTime;
+		if (resizable.value && event.currentTarget) {
+			startPos.value = [event.pageX, event.pageY];
+			props?.onOffsetStart?.(index.value);
+		}
+	};
+	const onTouchStart = (e) => {
+		if (resizable.value && e.touches.length === 1) {
+			const touch = e.touches[0];
+			startPos.value = [touch.pageX, touch.pageY];
+			props?.onOffsetStart?.(index.value);
+		}
+	};
+	const getConstrainedOffset = (rawOffset) => {
+		const currentPos = containerSize.value * ariaNow.value / 100;
+		const newPos = currentPos + rawOffset;
+		const minAllowed = Math.max(0, containerSize.value * ariaMin.value / 100);
+		const maxAllowed = Math.min(containerSize.value, containerSize.value * ariaMax.value / 100);
+		return Math.max(minAllowed, Math.min(maxAllowed, newPos)) - currentPos;
+	};
+	const handleLazyMove = (offsetX, offsetY) => {
+		constrainedOffset.value = getConstrainedOffset(vertical.value ? offsetY : offsetX);
+	};
+	const handleLazyEnd = () => {
+		props?.onOffsetUpdate?.(index.value, constrainedOffsetX.value, constrainedOffsetY.value, true);
+		constrainedOffset.value = 0;
+		props?.onOffsetEnd?.(true);
+	};
+	const getVisibilityClass = (mode) => {
+		switch (mode) {
+			case true: return `${splitBarPrefixCls.value}-collapse-bar-always-visible`;
+			case false: return `${splitBarPrefixCls.value}-collapse-bar-always-hidden`;
+			case "auto": return `${splitBarPrefixCls.value}-collapse-bar-hover-only`;
+		}
+	};
+	watch([
+		startPos,
+		index,
+		lazy
+	], (_n, _o, onCleanup) => {
+		if (!startPos.value) return;
+		const onMouseMove = (e) => {
+			const { pageX, pageY } = e;
+			const offsetX = pageX - startPos.value[0];
+			const offsetY = pageY - startPos.value[1];
+			if (lazy.value) handleLazyMove(offsetX, offsetY);
+			else props?.onOffsetUpdate?.(index.value, offsetX, offsetY);
+		};
+		const onMouseUp = () => {
+			if (lazy.value) handleLazyEnd();
+			else props?.onOffsetEnd?.();
+			startPos.value = void 0;
+		};
+		const handleTouchMove = (e) => {
+			if (e.touches.length === 1) {
+				const touch = e.touches[0];
+				const offsetX = touch.pageX - startPos.value[0];
+				const offsetY = touch.pageY - startPos.value[1];
+				if (lazy.value) handleLazyMove(offsetX, offsetY);
+				else props?.onOffsetUpdate?.(index.value, offsetX, offsetY);
+			}
+		};
+		const handleTouchEnd = () => {
+			if (lazy.value) handleLazyEnd();
+			else props?.onOffsetEnd?.();
+			startPos.value = void 0;
+		};
+		const eventHandlerMap = {
+			mousemove: onMouseMove,
+			mouseup: onMouseUp,
+			touchmove: handleTouchMove,
+			touchend: handleTouchEnd
+		};
+		for (const [event, handler] of Object.entries(eventHandlerMap)) window.addEventListener(event, handler);
+		onCleanup(() => {
+			for (const [event, handler] of Object.entries(eventHandlerMap)) window.removeEventListener(event, handler);
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	return () => {
+		const { collapsibleIcon, draggerClassName, draggerStyle, active, startCollapsible, showStartCollapsibleIcon, onCollapse, endCollapsible, showEndCollapsibleIcon } = props;
+		const transformStyle = { [barVarName.value("bar-preview-offset")]: `${constrainedOffset.value}px` };
+		const propCollapsibleIconStart = collapsibleIcon?.start;
+		const propCollapsibleIconEnd = collapsibleIcon?.end;
+		const collapsibleIconStart = getSlotPropsFnRun(slots, { collapsibleIconStart: propCollapsibleIconStart }, "collapsibleIconStart", false);
+		const collapsibleIconEnd = getSlotPropsFnRun(slots, { collapsibleIconEnd: propCollapsibleIconEnd }, "collapsibleIconEnd", false);
+		const draggerIcon = getSlotPropsFnRun(slots, props, "draggerIcon", false);
+		const renderIconsFn = () => {
+			let startIcon = null;
+			let endIcon = null;
+			const startCustomize = collapsibleIconStart !== void 0;
+			const endCustomize = collapsibleIconEnd !== void 0;
+			if (vertical.value) {
+				startIcon = startCustomize ? collapsibleIconStart : createVNode(UpOutlined, null, null);
+				endIcon = endCustomize ? collapsibleIconEnd : createVNode(DownOutlined, null, null);
+			} else {
+				startIcon = startCustomize ? collapsibleIconStart : createVNode(LeftOutlined, null, null);
+				endIcon = endCustomize ? collapsibleIconEnd : createVNode(RightOutlined, null, null);
+			}
+			return [
+				startIcon,
+				endIcon,
+				startCustomize,
+				endCustomize
+			];
+		};
+		const [startIcon, endIcon, startCustomize, endCustomize] = renderIconsFn();
+		const onCollapseKeyDown = (e, type) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onCollapse(index.value, type);
+			}
+		};
+		return createVNode("div", mergeProps(attrs, { "class": splitBarPrefixCls.value }), [
+			lazy.value && createVNode("div", {
+				"class": clsx(`${splitBarPrefixCls.value}-preview`, { [`${splitBarPrefixCls.value}-preview-active`]: !!constrainedOffset.value }),
+				"style": transformStyle
+			}, null),
+			createVNode("div", {
+				"style": draggerStyle,
+				"class": clsx(`${splitBarPrefixCls.value}-dragger`, {
+					[`${splitBarPrefixCls.value}-dragger-disabled`]: !resizable.value,
+					[`${splitBarPrefixCls.value}-dragger-active`]: active,
+					[`${splitBarPrefixCls.value}-dragger-customize`]: draggerIcon !== void 0
+				}, draggerClassName?.default, active && draggerClassName?.active),
+				"onMousedown": onMouseDown,
+				"onTouchstart": onTouchStart,
+				"onDblclick": () => props?.onDraggerDoubleClick?.(index.value),
+				"role": "separator",
+				"aria-disabled": !resizable.value,
+				"aria-orientation": vertical.value ? "horizontal" : "vertical",
+				"aria-valuenow": getValidNumber(ariaNow.value),
+				"aria-valuemin": getValidNumber(ariaMin.value),
+				"aria-valuemax": getValidNumber(ariaMax.value)
+			}, [draggerIcon !== void 0 ? createVNode("div", { "class": clsx(`${splitBarPrefixCls.value}-dragger-icon`) }, [draggerIcon]) : null]),
+			startCollapsible && createVNode("div", {
+				"class": clsx(`${splitBarPrefixCls.value}-collapse-bar`, `${splitBarPrefixCls.value}-collapse-bar-start`, { [`${splitBarPrefixCls.value}-collapse-bar-customize`]: startCustomize }, getVisibilityClass(showStartCollapsibleIcon)),
+				"role": "button",
+				"tabindex": 0,
+				"aria-label": getAriaLabel(startIcon, locale.value.toggleStartPanel),
+				"onClick": () => onCollapse(index.value, "start"),
+				"onKeydown": (e) => onCollapseKeyDown(e, "start")
+			}, [createVNode("span", { "class": clsx(`${splitBarPrefixCls.value}-collapse-icon`, `${splitBarPrefixCls.value}-collapse-start`) }, [startIcon])]),
+			endCollapsible && createVNode("div", {
+				"class": clsx(`${splitBarPrefixCls.value}-collapse-bar`, `${splitBarPrefixCls.value}-collapse-bar-end`, { [`${splitBarPrefixCls.value}-collapse-bar-customize`]: endCustomize }, getVisibilityClass(showEndCollapsibleIcon)),
+				"role": "button",
+				"tabindex": 0,
+				"aria-label": getAriaLabel(endIcon, locale.value.toggleEndPanel),
+				"onClick": () => onCollapse(index.value, "end"),
+				"onKeydown": (e) => onCollapseKeyDown(e, "end")
+			}, [createVNode("span", { "class": clsx(`${splitBarPrefixCls.value}-collapse-icon`, `${splitBarPrefixCls.value}-collapse-end`) }, [endIcon])])
+		]);
+	};
+}, {
+	props: {
+		index: {
+			type: Number,
+			required: true
+		},
+		active: {
+			type: Boolean,
+			required: true
+		},
+		draggerStyle: {
+			type: Object,
+			required: false
+		},
+		draggerClassName: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		rootPrefixCls: {
+			type: String,
+			required: true
+		},
+		resizable: {
+			type: Boolean,
+			required: true
+		},
+		startCollapsible: {
+			type: Boolean,
+			required: true
+		},
+		endCollapsible: {
+			type: Boolean,
+			required: true
+		},
+		draggerIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		collapsibleIcon: {
+			type: Object,
+			required: false
+		},
+		showStartCollapsibleIcon: {
+			type: [Boolean, String],
+			required: true
+		},
+		showEndCollapsibleIcon: {
+			type: [Boolean, String],
+			required: true
+		},
+		onDraggerDoubleClick: {
+			type: Function,
+			required: false
+		},
+		onOffsetStart: {
+			type: Function,
+			required: true
+		},
+		onOffsetUpdate: {
+			type: Function,
+			required: true
+		},
+		onOffsetEnd: {
+			type: Function,
+			required: true
+		},
+		onCollapse: {
+			type: Function,
+			required: true
+		},
+		vertical: {
+			type: Boolean,
+			required: true
+		},
+		ariaNow: {
+			type: Number,
+			required: true
+		},
+		ariaMin: {
+			type: Number,
+			required: true
+		},
+		ariaMax: {
+			type: Number,
+			required: true
+		},
+		lazy: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		containerSize: {
+			type: Number,
+			required: true
+		}
+	},
+	name: "SplitBar",
+	inheritAttrs: false
+});
+//#endregion
+export { SplitBar as default };

package/dist/splitter/Splitter.d.ts

@@ -0,0 +1,11 @@
+import { SplitterEmits, SplitterProps, SplitterSlots } from "./interface.js";
+import { SlotsType } from "vue";
+//#region src/splitter/Splitter.d.ts
+interface InternalSplitterProps extends SplitterProps, SplitterEmitsProps {}
+interface SplitterEmitsProps {}
+interface SplitterRef {
+  nativeElement: HTMLDivElement;
+}
+declare const Splitter: import("vue").DefineSetupFnComponent<InternalSplitterProps, SplitterEmits, SlotsType<SplitterSlots>, InternalSplitterProps, import("vue").PublicProps>;
+//#endregion
+export { InternalSplitterProps, SplitterEmitsProps, SplitterRef, Splitter as default };

package/dist/splitter/Splitter.js

@@ -0,0 +1,252 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useOrientation } from "../_util/hooks/useOrientation.js";
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import { InternalPanel } 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 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, attrs, expose }) => {
+	const { prefixCls, rootPrefixCls, 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(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");
+		warning.deprecated(!props.collapsibleIcon, "collapsibleIcon", "collapsible.icon");
+	}
+	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, reverse);
+	const [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex] = useResize(items, resizableInfos, itemPtgSizes, containerSize, updateSizes, isRTL);
+	const onInternalResizeStart = (index) => {
+		onOffsetStart(index);
+		props?.onResizeStart?.(itemPxSizes.value);
+	};
+	const onInternalResizeUpdate = (index, offset, lazyEnd) => {
+		const nextSizes = onOffsetUpdate(index, offset);
+		if (lazyEnd) props?.onResizeEnd?.(nextSizes);
+		else props?.onResize?.(nextSizes);
+	};
+	const onInternalResizeEnd = (lazyEnd) => {
+		onOffsetEnd();
+		if (!lazyEnd) props?.onResizeEnd?.(itemPxSizes.value);
+	};
+	const onInternalCollapse = (index, type) => {
+		const nextSizes = onCollapse(index, type);
+		props?.onResize?.(nextSizes);
+		props?.onResizeEnd?.(nextSizes);
+		const collapsed = nextSizes.map((size) => Math.abs(size) < Number.EPSILON);
+		props?.onCollapse?.(collapsed, nextSizes);
+		props?.["onUpdate:collapse"]?.(collapsed);
+	};
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			vertical: isVertical.value,
+			orientation: mergedOrientation.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, 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;
+	});
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
+	return () => {
+		const { rootClass, lazy, draggerIcon, collapsible, collapsibleIcon, destroyOnHidden } = props;
+		const mergedCollapsibleIcon = collapsible?.icon ?? collapsibleIcon;
+		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,
+			...style
+		};
+		return createVNode(ResizeObserver, { "onResize": onContainerResize }, { default: () => [createVNode("div", mergeProps({ "ref": nativeElementRef }, restAttrs, {
+			"style": mergedStyle,
+			"class": containerClassName
+		}), [items.value?.map?.((item, idx) => {
+			const panel = createVNode(InternalPanel, mergeProps({
+				...omit(item, ["_$slots"]),
+				class: clsx(mergedClassNames.value.panel, item.class),
+				style: {
+					...mergedStyles.value.panel,
+					...item.style
+				}
+			}, {
+				"prefixCls": prefixCls.value,
+				"size": panelSizes.value[idx],
+				"supportMotion": collapsible?.motion && movingIndex.value === void 0,
+				"destroyOnHidden": item.destroyOnHidden ?? destroyOnHidden
+			}), { default: () => [item._$slots?.default?.()] });
+			let splitBar = null;
+			const resizableInfo = resizableInfos.value[idx];
+			if (resizableInfo) {
+				const prevStackSize = Number.isFinite(stackSizes.value[idx - 1]) ? stackSizes.value[idx - 1] : 0;
+				const nextStackSize = Number.isFinite(stackSizes.value[idx + 1]) ? stackSizes.value[idx + 1] : 1;
+				const ariaMinStart = prevStackSize + itemPtgMinSizes.value[idx];
+				const ariaMinEnd = nextStackSize - itemPtgMaxSizes.value[idx + 1];
+				const ariaMaxStart = prevStackSize + itemPtgMaxSizes.value[idx];
+				const ariaMaxEnd = nextStackSize - itemPtgMinSizes.value[idx + 1];
+				splitBar = createVNode(SplitBar, {
+					"lazy": lazy,
+					"index": idx,
+					"active": movingIndex.value === idx,
+					"prefixCls": prefixCls.value,
+					"rootPrefixCls": rootPrefixCls.value,
+					"vertical": isVertical.value,
+					"resizable": resizableInfo.resizable,
+					"draggerStyle": mergedStyles.value.dragger,
+					"draggerClassName": mergedClassNames.value.dragger,
+					"draggerIcon": draggerIcon,
+					"collapsibleIcon": mergedCollapsibleIcon,
+					"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,
+					"onDraggerDoubleClick": props?.onDraggerDoubleClick,
+					"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)])] });
+	};
+}, {
+	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,
+			default: void 0
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		draggerIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		collapsible: {
+			type: Object,
+			required: false
+		},
+		collapsibleIcon: {
+			type: Object,
+			required: false
+		},
+		onDraggerDoubleClick: {
+			type: Function,
+			required: false
+		},
+		onResizeStart: {
+			type: Function,
+			required: false
+		},
+		onResize: {
+			type: Function,
+			required: false
+		},
+		onResizeEnd: {
+			type: Function,
+			required: false
+		},
+		onCollapse: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:collapse": {
+			type: Function,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ASplitter",
+	inheritAttrs: false
+});
+//#endregion
+export { Splitter as default };

package/dist/splitter/hooks/sizeUtil.d.ts

@@ -0,0 +1,5 @@
+//#region src/splitter/hooks/sizeUtil.d.ts
+type SizeUnit = number | undefined;
+declare function autoPtgSizes(ptgSizes: SizeUnit[], minPtgSizes: SizeUnit[], maxPtgSizes: SizeUnit[]): number[];
+//#endregion
+export { autoPtgSizes };

package/dist/splitter/hooks/sizeUtil.js

@@ -0,0 +1,72 @@
+//#region src/splitter/hooks/sizeUtil.ts
+function fitPtgSizes(sizes, minSizes, maxSizes) {
+	const mergedMinSizes = sizes.map((size, index) => size === 0 ? 0 : minSizes[index] ?? 0);
+	const mergedMaxSizes = sizes.map((size, index) => size === 0 ? 0 : maxSizes[index] ?? 1);
+	const invalidLimits = mergedMinSizes.some((min, index) => min > mergedMaxSizes[index]);
+	const totalMin = mergedMinSizes.reduce((sum, size) => sum + size, 0);
+	const totalMax = mergedMaxSizes.reduce((sum, size) => sum + size, 0);
+	if (invalidLimits || totalMin > 1 || totalMax < 1) return sizes;
+	const result = sizes.map((size, index) => Math.min(mergedMaxSizes[index], Math.max(mergedMinSizes[index], size)));
+	const total = result.reduce((sum, size) => sum + size, 0);
+	if (total === 1) return result;
+	const grow = total < 1;
+	const spaces = result.map((size, index) => grow ? mergedMaxSizes[index] - size : size - mergedMinSizes[index]);
+	const totalSpace = spaces.reduce((sum, space) => sum + space, 0);
+	const rest = 1 - total;
+	return result.map((size, index) => size + rest * (spaces[index] / totalSpace));
+}
+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 (ptgSizes.length && !undefinedIndexes.length && currentTotalPtg !== 1) {
+		if (currentTotalPtg === 0) {
+			const avg = 1 / ptgSizes.length;
+			return ptgSizes.map(() => avg);
+		}
+		const scale = 1 / currentTotalPtg;
+		return fitPtgSizes(ptgSizes.map((size) => size * scale), minPtgSizes, maxPtgSizes);
+	}
+	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.d.ts

@@ -0,0 +1,17 @@
+import { PanelProps } from "../interface.js";
+import { VNode } from "vue";
+//#region src/splitter/hooks/useItems.d.ts
+type ItemType = Omit<PanelProps, 'collapsible'> & {
+  collapsible: {
+    start?: boolean;
+    end?: boolean;
+    showCollapsibleIcon: 'auto' | boolean;
+  };
+  _$slots?: Record<string, any>;
+};
+/**
+ * Convert `children` into `items`.
+ */
+declare function convertChildrenToItems(children: VNode[]): ItemType[];
+//#endregion
+export { ItemType, convertChildrenToItems };

package/dist/splitter/hooks/useItems.js

@@ -0,0 +1,36 @@
+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 } = 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
+		};
+	});
+}
+//#endregion
+export { convertChildrenToItems };