@robot-admin/naive-ui-components 0.4.3 → 0.4.4

package/dist/C_SplitPane2.js

@@ -1,356 +1,2 @@
-import { t as C_Icon_default } from "./C_Icon2.js";
-import { t as export_helper_default } from "./export-helper.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, toRef, unref, withModifiers } from "vue";
-
-//#region src/components/C_SplitPane/composables/useSplitResize.ts
-/**
-* 分割面板拖拽调整逻辑
-*/
-function useSplitResize(options) {
-	const { containerRef, direction, defaultSize, minSize, maxSize, disabled, collapsible, step, onResize, onCollapse, onExpand, onDragStart, onDragEnd } = options;
-	/** 首面板当前大小（百分比） */
-	const panelSize = ref(defaultSize);
-	/** 是否正在拖拽 */
-	const isDragging = ref(false);
-	/** 折叠状态 */
-	const collapsedTarget = ref(null);
-	/** 折叠前记住的面板大小 */
-	const sizeBeforeCollapse = ref(defaultSize);
-	/** 首面板是否折叠 */
-	const isFirstCollapsed = computed(() => collapsedTarget.value === "first");
-	/** 第二面板是否折叠 */
-	const isSecondCollapsed = computed(() => collapsedTarget.value === "second");
-	/**
-	* 将大小限制在 min/max 范围内
-	*/
-	const clampSize = (size) => {
-		return Math.min(maxSize, Math.max(minSize, size));
-	};
-	/**
-	* 获取容器在分割方向上的总长度（px）
-	*/
-	const getContainerLength = () => {
-		const container = containerRef.value;
-		if (!container) return 0;
-		return direction.value === "horizontal" ? container.offsetWidth : container.offsetHeight;
-	};
-	/**
-	* 获取容器在分割方向上的起始坐标
-	*/
-	const getContainerStart = () => {
-		const container = containerRef.value;
-		if (!container) return 0;
-		const rect = container.getBoundingClientRect();
-		return direction.value === "horizontal" ? rect.left : rect.top;
-	};
-	/**
-	* 根据鼠标/触摸位置计算面板大小（百分比）
-	*/
-	const calcSizeFromPosition = (clientPos) => {
-		const containerLength = getContainerLength();
-		if (containerLength === 0) return panelSize.value;
-		return clampSize((clientPos - getContainerStart()) / containerLength * 100);
-	};
-	/**
-	* 获取事件的位置坐标
-	*/
-	const getClientPos = (e) => {
-		if (e instanceof TouchEvent) return direction.value === "horizontal" ? e.touches[0].clientX : e.touches[0].clientY;
-		return direction.value === "horizontal" ? e.clientX : e.clientY;
-	};
-	/**
-	* 更新面板大小
-	*/
-	const updateSize = (newSize) => {
-		const clamped = clampSize(newSize);
-		panelSize.value = clamped;
-		onResize?.(clamped, 100 - clamped);
-	};
-	const handleMouseMove = (e) => {
-		if (!isDragging.value || disabled.value) return;
-		e.preventDefault();
-		const newSize = calcSizeFromPosition(getClientPos(e));
-		if (collapsedTarget.value) collapsedTarget.value = null;
-		updateSize(newSize);
-	};
-	const handleMouseUp = () => {
-		if (!isDragging.value) return;
-		isDragging.value = false;
-		document.body.style.cursor = "";
-		document.body.style.userSelect = "";
-		onDragEnd?.(panelSize.value);
-		document.removeEventListener("mousemove", handleMouseMove);
-		document.removeEventListener("mouseup", handleMouseUp);
-		document.removeEventListener("touchmove", handleMouseMove);
-		document.removeEventListener("touchend", handleMouseUp);
-	};
-	const handleMouseDown = (e) => {
-		if (disabled.value) return;
-		e.preventDefault();
-		e.currentTarget?.focus();
-		isDragging.value = true;
-		document.body.style.cursor = direction.value === "horizontal" ? "col-resize" : "row-resize";
-		document.body.style.userSelect = "none";
-		onDragStart?.(panelSize.value);
-		document.addEventListener("mousemove", handleMouseMove);
-		document.addEventListener("mouseup", handleMouseUp);
-		document.addEventListener("touchmove", handleMouseMove, { passive: false });
-		document.addEventListener("touchend", handleMouseUp);
-	};
-	const handleDoubleClick = () => {
-		if (disabled.value || !collapsible.value) return;
-		toggle("first");
-	};
-	const collapse = (target = "first") => {
-		if (!collapsible.value || collapsedTarget.value === target) return;
-		if (!collapsedTarget.value) sizeBeforeCollapse.value = panelSize.value;
-		collapsedTarget.value = target;
-		if (target === "first") panelSize.value = 0;
-		else panelSize.value = 100;
-		onCollapse?.(target);
-		onResize?.(panelSize.value, 100 - panelSize.value);
-	};
-	const expand = () => {
-		if (!collapsedTarget.value) return;
-		const target = collapsedTarget.value;
-		collapsedTarget.value = null;
-		panelSize.value = sizeBeforeCollapse.value;
-		onExpand?.(target);
-		onResize?.(panelSize.value, 100 - panelSize.value);
-	};
-	const toggle = (target = "first") => {
-		if (collapsedTarget.value) expand();
-		else collapse(target);
-	};
-	/**
-	* 根据按键获取增量
-	*/
-	const getKeyDelta = (key, isHorizontal) => {
-		return {
-			ArrowLeft: isHorizontal ? -step : 0,
-			ArrowRight: isHorizontal ? step : 0,
-			ArrowUp: !isHorizontal ? -step : 0,
-			ArrowDown: !isHorizontal ? step : 0
-		}[key] ?? null;
-	};
-	const handleKeyDown = (e) => {
-		if (disabled.value) return;
-		if (e.key === "Home") {
-			updateSize(minSize);
-			e.preventDefault();
-			return;
-		}
-		if (e.key === "End") {
-			updateSize(maxSize);
-			e.preventDefault();
-			return;
-		}
-		const delta = getKeyDelta(e.key, direction.value === "horizontal");
-		if (delta === null || delta === 0) return;
-		e.preventDefault();
-		if (collapsedTarget.value) collapsedTarget.value = null;
-		updateSize(panelSize.value + delta);
-	};
-	const resetSize = () => {
-		collapsedTarget.value = null;
-		panelSize.value = defaultSize;
-		onResize?.(defaultSize, 100 - defaultSize);
-	};
-	const setSize = (size) => {
-		collapsedTarget.value = null;
-		updateSize(size);
-	};
-	const getPanelInfo = () => ({
-		first: {
-			size: panelSize.value,
-			collapsed: isFirstCollapsed.value
-		},
-		second: {
-			size: 100 - panelSize.value,
-			collapsed: isSecondCollapsed.value
-		}
-	});
-	onUnmounted(() => {
-		document.removeEventListener("mousemove", handleMouseMove);
-		document.removeEventListener("mouseup", handleMouseUp);
-		document.removeEventListener("touchmove", handleMouseMove);
-		document.removeEventListener("touchend", handleMouseUp);
-	});
-	return {
-		panelSize,
-		isDragging,
-		collapsedTarget,
-		isFirstCollapsed,
-		isSecondCollapsed,
-		handleMouseDown,
-		handleDoubleClick,
-		handleKeyDown,
-		collapse,
-		expand,
-		toggle,
-		resetSize,
-		setSize,
-		getPanelInfo
-	};
-}
-
-//#endregion
-//#region src/components/C_SplitPane/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = { class: "split-panel__content" };
-const _hoisted_2 = ["aria-orientation", "aria-valuenow"];
-const _hoisted_3 = { class: "split-gutter__visual" };
-const _hoisted_4 = { class: "split-gutter__dots" };
-const _hoisted_5 = ["title"];
-const _hoisted_6 = ["title"];
-const _hoisted_7 = { class: "split-panel__content" };
-var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "C_SplitPane",
-	__name: "index",
-	props: {
-		direction: { default: "horizontal" },
-		defaultSize: { default: 50 },
-		minSize: { default: 0 },
-		maxSize: { default: 100 },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		collapsible: {
-			type: Boolean,
-			default: true
-		},
-		showCollapseButton: {
-			type: Boolean,
-			default: true
-		},
-		gutterSize: { default: 6 },
-		step: { default: 2 }
-	},
-	emits: [
-		"resize",
-		"collapse",
-		"expand",
-		"drag-start",
-		"drag-end"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const containerRef = ref(null);
-		const { panelSize, isDragging, isFirstCollapsed, isSecondCollapsed, handleMouseDown, handleDoubleClick, handleKeyDown, collapse, expand, toggle, resetSize, setSize, getPanelInfo } = useSplitResize({
-			containerRef,
-			direction: toRef(props, "direction"),
-			defaultSize: props.defaultSize,
-			minSize: props.minSize,
-			maxSize: props.maxSize,
-			disabled: toRef(props, "disabled"),
-			collapsible: toRef(props, "collapsible"),
-			step: props.step,
-			onResize: (first, second) => emit("resize", first, second),
-			onCollapse: (target) => emit("collapse", target),
-			onExpand: (target) => emit("expand", target),
-			onDragStart: (size) => emit("drag-start", size),
-			onDragEnd: (size) => emit("drag-end", size)
-		});
-		const firstPanelStyle = computed(() => {
-			const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;
-			return props.direction === "horizontal" ? { width: sizeValue } : { height: sizeValue };
-		});
-		const secondPanelStyle = computed(() => {
-			const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;
-			return props.direction === "horizontal" ? { width: sizeValue } : { height: sizeValue };
-		});
-		const gutterStyle = computed(() => {
-			return props.direction === "horizontal" ? { width: `${props.gutterSize}px` } : { height: `${props.gutterSize}px` };
-		});
-		const collapseFirstIcon = computed(() => {
-			if (props.direction === "horizontal") return isFirstCollapsed.value ? "mdi:chevron-right" : "mdi:chevron-left";
-			return isFirstCollapsed.value ? "mdi:chevron-down" : "mdi:chevron-up";
-		});
-		const collapseSecondIcon = computed(() => {
-			if (props.direction === "horizontal") return isSecondCollapsed.value ? "mdi:chevron-left" : "mdi:chevron-right";
-			return isSecondCollapsed.value ? "mdi:chevron-up" : "mdi:chevron-down";
-		});
-		__expose({
-			collapse,
-			expand,
-			toggle,
-			resetSize,
-			getPanelInfo,
-			setSize
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "containerRef",
-				ref: containerRef,
-				class: normalizeClass(["c-split-pane", [`c-split-pane--${_ctx.direction}`, {
-					"c-split-pane--dragging": unref(isDragging),
-					"c-split-pane--disabled": _ctx.disabled,
-					"c-split-pane--collapsed-first": unref(isFirstCollapsed),
-					"c-split-pane--collapsed-second": unref(isSecondCollapsed)
-				}]])
-			}, [
-				createCommentVNode(" 首面板 "),
-				createElementVNode("div", {
-					class: "split-panel split-panel--first",
-					style: normalizeStyle(firstPanelStyle.value)
-				}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "first", {}, void 0, true)])], 4),
-				createCommentVNode(" 分割线手柄 "),
-				createElementVNode("div", {
-					class: "split-gutter",
-					style: normalizeStyle(gutterStyle.value),
-					role: "separator",
-					"aria-orientation": _ctx.direction === "horizontal" ? "vertical" : "horizontal",
-					"aria-valuenow": Math.round(unref(panelSize)),
-					"aria-valuemin": 0,
-					"aria-valuemax": 100,
-					tabindex: "0",
-					onMousedown: _cache[4] || (_cache[4] = (...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args)),
-					onTouchstart: _cache[5] || (_cache[5] = withModifiers((...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args), ["prevent"])),
-					onDblclick: _cache[6] || (_cache[6] = (...args) => unref(handleDoubleClick) && unref(handleDoubleClick)(...args)),
-					onKeydown: _cache[7] || (_cache[7] = (...args) => unref(handleKeyDown) && unref(handleKeyDown)(...args))
-				}, [
-					createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [(openBlock(), createElementBlock(Fragment, null, renderList(3, (i) => {
-						return createElementVNode("span", {
-							key: i,
-							class: "split-gutter__dot"
-						});
-					}), 64))])]),
-					createCommentVNode(" 折叠按钮 "),
-					_ctx.showCollapseButton && _ctx.collapsible ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
-						class: "split-gutter__collapse-btn split-gutter__collapse-btn--first",
-						title: unref(isFirstCollapsed) ? "展开首面板" : "折叠首面板",
-						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(toggle)("first"), ["stop"])),
-						onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
-					}, [createVNode(C_Icon_default, {
-						name: collapseFirstIcon.value,
-						size: 16,
-						color: "currentColor"
-					}, null, 8, ["name"])], 40, _hoisted_5), createElementVNode("button", {
-						class: "split-gutter__collapse-btn split-gutter__collapse-btn--second",
-						title: unref(isSecondCollapsed) ? "展开第二面板" : "折叠第二面板",
-						onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(toggle)("second"), ["stop"])),
-						onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
-					}, [createVNode(C_Icon_default, {
-						name: collapseSecondIcon.value,
-						size: 16,
-						color: "currentColor"
-					}, null, 8, ["name"])], 40, _hoisted_6)], 64)) : createCommentVNode("v-if", true)
-				], 44, _hoisted_2),
-				createCommentVNode(" 第二面板 "),
-				createElementVNode("div", {
-					class: "split-panel split-panel--second",
-					style: normalizeStyle(secondPanelStyle.value)
-				}, [createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "second", {}, void 0, true)])], 4)
-			], 2);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/C_SplitPane/index.vue
-var C_SplitPane_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-396d0f5b"]]);
-
-//#endregion
-export { useSplitResize as n, C_SplitPane_default as t };
+import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,onUnmounted as d,openBlock as f,ref as p,renderList as m,renderSlot as h,toRef as g,unref as _,withModifiers as v}from"vue";function y(e){let{containerRef:t,direction:n,defaultSize:i,minSize:a,maxSize:o,disabled:s,collapsible:c,step:l,onResize:u,onCollapse:f,onExpand:m,onDragStart:h,onDragEnd:g}=e,_=p(i),v=p(!1),y=p(null),b=p(i),x=r(()=>y.value===`first`),S=r(()=>y.value===`second`),C=e=>Math.min(o,Math.max(a,e)),w=()=>{let e=t.value;return e?n.value===`horizontal`?e.offsetWidth:e.offsetHeight:0},T=()=>{let e=t.value;if(!e)return 0;let r=e.getBoundingClientRect();return n.value===`horizontal`?r.left:r.top},E=e=>{let t=w();return t===0?_.value:C((e-T())/t*100)},D=e=>e instanceof TouchEvent?n.value===`horizontal`?e.touches[0].clientX:e.touches[0].clientY:n.value===`horizontal`?e.clientX:e.clientY,O=e=>{let t=C(e);_.value=t,u?.(t,100-t)},k=e=>{if(!v.value||s.value)return;e.preventDefault();let t=E(D(e));y.value&&=null,O(t)},A=()=>{v.value&&(v.value=!1,document.body.style.cursor=``,document.body.style.userSelect=``,g?.(_.value),document.removeEventListener(`mousemove`,k),document.removeEventListener(`mouseup`,A),document.removeEventListener(`touchmove`,k),document.removeEventListener(`touchend`,A))},j=e=>{s.value||(e.preventDefault(),e.currentTarget?.focus(),v.value=!0,document.body.style.cursor=n.value===`horizontal`?`col-resize`:`row-resize`,document.body.style.userSelect=`none`,h?.(_.value),document.addEventListener(`mousemove`,k),document.addEventListener(`mouseup`,A),document.addEventListener(`touchmove`,k,{passive:!1}),document.addEventListener(`touchend`,A))},M=()=>{s.value||!c.value||F(`first`)},N=(e=`first`)=>{!c.value||y.value===e||(y.value||(b.value=_.value),y.value=e,e===`first`?_.value=0:_.value=100,f?.(e),u?.(_.value,100-_.value))},P=()=>{if(!y.value)return;let e=y.value;y.value=null,_.value=b.value,m?.(e),u?.(_.value,100-_.value)},F=(e=`first`)=>{y.value?P():N(e)},I=(e,t)=>({ArrowLeft:t?-l:0,ArrowRight:t?l:0,ArrowUp:t?0:-l,ArrowDown:t?0:l})[e]??null;return d(()=>{document.removeEventListener(`mousemove`,k),document.removeEventListener(`mouseup`,A),document.removeEventListener(`touchmove`,k),document.removeEventListener(`touchend`,A)}),{panelSize:_,isDragging:v,collapsedTarget:y,isFirstCollapsed:x,isSecondCollapsed:S,handleMouseDown:j,handleDoubleClick:M,handleKeyDown:e=>{if(s.value)return;if(e.key===`Home`){O(a),e.preventDefault();return}if(e.key===`End`){O(o),e.preventDefault();return}let t=I(e.key,n.value===`horizontal`);t===null||t===0||(e.preventDefault(),y.value&&=null,O(_.value+t))},collapse:N,expand:P,toggle:F,resetSize:()=>{y.value=null,_.value=i,u?.(i,100-i)},setSize:e=>{y.value=null,O(e)},getPanelInfo:()=>({first:{size:_.value,collapsed:x.value},second:{size:100-_.value,collapsed:S.value}})}}const b={class:`split-panel__content`},x=[`aria-orientation`,`aria-valuenow`],S={class:`split-gutter__visual`},C={class:`split-gutter__dots`},w=[`title`],T=[`title`],E={class:`split-panel__content`};var D=t(c({name:`C_SplitPane`,__name:`index`,props:{direction:{default:`horizontal`},defaultSize:{default:50},minSize:{default:0},maxSize:{default:100},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},gutterSize:{default:6},step:{default:2}},emits:[`resize`,`collapse`,`expand`,`drag-start`,`drag-end`],setup(t,{expose:c,emit:d}){let D=t,O=d,k=p(null),{panelSize:A,isDragging:j,isFirstCollapsed:M,isSecondCollapsed:N,handleMouseDown:P,handleDoubleClick:F,handleKeyDown:I,collapse:L,expand:R,toggle:z,resetSize:B,setSize:V,getPanelInfo:H}=y({containerRef:k,direction:g(D,`direction`),defaultSize:D.defaultSize,minSize:D.minSize,maxSize:D.maxSize,disabled:g(D,`disabled`),collapsible:g(D,`collapsible`),step:D.step,onResize:(e,t)=>O(`resize`,e,t),onCollapse:e=>O(`collapse`,e),onExpand:e=>O(`expand`,e),onDragStart:e=>O(`drag-start`,e),onDragEnd:e=>O(`drag-end`,e)}),U=r(()=>{let e=`calc(${A.value}% - ${D.gutterSize/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),W=r(()=>{let e=`calc(${100-A.value}% - ${D.gutterSize/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),G=r(()=>D.direction===`horizontal`?{width:`${D.gutterSize}px`}:{height:`${D.gutterSize}px`}),K=r(()=>D.direction===`horizontal`?M.value?`mdi:chevron-right`:`mdi:chevron-left`:M.value?`mdi:chevron-down`:`mdi:chevron-up`),q=r(()=>D.direction===`horizontal`?N.value?`mdi:chevron-left`:`mdi:chevron-right`:N.value?`mdi:chevron-up`:`mdi:chevron-down`);return c({collapse:L,expand:R,toggle:z,resetSize:B,getPanelInfo:H,setSize:V}),(t,r)=>(f(),a(`div`,{ref_key:`containerRef`,ref:k,class:l([`c-split-pane`,[`c-split-pane--${t.direction}`,{"c-split-pane--dragging":_(j),"c-split-pane--disabled":t.disabled,"c-split-pane--collapsed-first":_(M),"c-split-pane--collapsed-second":_(N)}]])},[i(` 首面板 `),o(`div`,{class:`split-panel split-panel--first`,style:u(U.value)},[o(`div`,b,[h(t.$slots,`first`,{},void 0,!0)])],4),i(` 分割线手柄 `),o(`div`,{class:`split-gutter`,style:u(G.value),role:`separator`,"aria-orientation":t.direction===`horizontal`?`vertical`:`horizontal`,"aria-valuenow":Math.round(_(A)),"aria-valuemin":0,"aria-valuemax":100,tabindex:`0`,onMousedown:r[4]||=(...e)=>_(P)&&_(P)(...e),onTouchstart:r[5]||=v((...e)=>_(P)&&_(P)(...e),[`prevent`]),onDblclick:r[6]||=(...e)=>_(F)&&_(F)(...e),onKeydown:r[7]||=(...e)=>_(I)&&_(I)(...e)},[o(`div`,S,[o(`div`,C,[(f(),a(n,null,m(3,e=>o(`span`,{key:e,class:`split-gutter__dot`})),64))])]),i(` 折叠按钮 `),t.showCollapseButton&&t.collapsible?(f(),a(n,{key:0},[o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--first`,title:_(M)?`展开首面板`:`折叠首面板`,onClick:r[0]||=v(e=>_(z)(`first`),[`stop`]),onMousedown:r[1]||=v(()=>{},[`stop`])},[s(e,{name:K.value,size:16,color:`currentColor`},null,8,[`name`])],40,w),o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--second`,title:_(N)?`展开第二面板`:`折叠第二面板`,onClick:r[2]||=v(e=>_(z)(`second`),[`stop`]),onMousedown:r[3]||=v(()=>{},[`stop`])},[s(e,{name:q.value,size:16,color:`currentColor`},null,8,[`name`])],40,T)],64)):i(`v-if`,!0)],44,x),i(` 第二面板 `),o(`div`,{class:`split-panel split-panel--second`,style:u(W.value)},[o(`div`,E,[h(t.$slots,`second`,{},void 0,!0)])],4)],2))}}),[[`__scopeId`,`data-v-396d0f5b`]]);export{y as n,D as t};
 //# sourceMappingURL=C_SplitPane2.js.map

package/dist/C_SplitPane2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_SplitPane2.js","names":["direction","disabled","showCollapseButton","collapsible"],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n  /** 容器引用 */\r\n  containerRef: Ref<HTMLElement | null>;\r\n  /** 分割方向 */\r\n  direction: Ref<SplitDirection>;\r\n  /** 首面板默认大小（百分比） */\r\n  defaultSize: number;\r\n  /** 首面板最小大小（百分比） */\r\n  minSize: number;\r\n  /** 首面板最大大小（百分比） */\r\n  maxSize: number;\r\n  /** 是否禁用 */\r\n  disabled: Ref<boolean>;\r\n  /** 是否可折叠 */\r\n  collapsible: Ref<boolean>;\r\n  /** 键盘微调步长（百分比） */\r\n  step: number;\r\n  /** resize 回调 */\r\n  onResize?: (firstSize: number, secondSize: number) => void;\r\n  /** 折叠回调 */\r\n  onCollapse?: (target: CollapseTarget) => void;\r\n  /** 展开回调 */\r\n  onExpand?: (target: CollapseTarget) => void;\r\n  /** 拖拽开始回调 */\r\n  onDragStart?: (size: number) => void;\r\n  /** 拖拽结束回调 */\r\n  onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n  const {\r\n    containerRef,\r\n    direction,\r\n    defaultSize,\r\n    minSize,\r\n    maxSize,\r\n    disabled,\r\n    collapsible,\r\n    step,\r\n    onResize,\r\n    onCollapse,\r\n    onExpand,\r\n    onDragStart,\r\n    onDragEnd,\r\n  } = options;\r\n\r\n  /** 首面板当前大小（百分比） */\r\n  const panelSize = ref(defaultSize);\r\n  /** 是否正在拖拽 */\r\n  const isDragging = ref(false);\r\n  /** 折叠状态 */\r\n  const collapsedTarget = ref<CollapseTarget | null>(null);\r\n  /** 折叠前记住的面板大小 */\r\n  const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n  /** 首面板是否折叠 */\r\n  const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n  /** 第二面板是否折叠 */\r\n  const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n  /**\r\n   * 将大小限制在 min/max 范围内\r\n   */\r\n  const clampSize = (size: number): number => {\r\n    return Math.min(maxSize, Math.max(minSize, size));\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的总长度（px）\r\n   */\r\n  const getContainerLength = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    return direction.value === \"horizontal\"\r\n      ? container.offsetWidth\r\n      : container.offsetHeight;\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的起始坐标\r\n   */\r\n  const getContainerStart = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    const rect = container.getBoundingClientRect();\r\n    return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n  };\r\n\r\n  /**\r\n   * 根据鼠标/触摸位置计算面板大小（百分比）\r\n   */\r\n  const calcSizeFromPosition = (clientPos: number): number => {\r\n    const containerLength = getContainerLength();\r\n    if (containerLength === 0) return panelSize.value;\r\n\r\n    const containerStart = getContainerStart();\r\n    const offset = clientPos - containerStart;\r\n    const percentage = (offset / containerLength) * 100;\r\n\r\n    return clampSize(percentage);\r\n  };\r\n\r\n  /**\r\n   * 获取事件的位置坐标\r\n   */\r\n  const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n    if (e instanceof TouchEvent) {\r\n      return direction.value === \"horizontal\"\r\n        ? e.touches[0].clientX\r\n        : e.touches[0].clientY;\r\n    }\r\n    return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n  };\r\n\r\n  /**\r\n   * 更新面板大小\r\n   */\r\n  const updateSize = (newSize: number) => {\r\n    const clamped = clampSize(newSize);\r\n    panelSize.value = clamped;\r\n    onResize?.(clamped, 100 - clamped);\r\n  };\r\n\r\n  /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n  const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDragging.value || disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    const pos = getClientPos(e);\r\n    const newSize = calcSizeFromPosition(pos);\r\n\r\n    /* 拖拽过程中取消折叠状态 */\r\n    if (collapsedTarget.value) {\r\n      collapsedTarget.value = null;\r\n    }\r\n    updateSize(newSize);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    if (!isDragging.value) return;\r\n\r\n    isDragging.value = false;\r\n    document.body.style.cursor = \"\";\r\n    document.body.style.userSelect = \"\";\r\n\r\n    onDragEnd?.(panelSize.value);\r\n\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    /* preventDefault 会阻止默认聚焦行为，需手动 focus 以支持键盘控制 */\r\n    (e.currentTarget as HTMLElement)?.focus();\r\n    isDragging.value = true;\r\n\r\n    document.body.style.cursor =\r\n      direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n    document.body.style.userSelect = \"none\";\r\n\r\n    onDragStart?.(panelSize.value);\r\n\r\n    document.addEventListener(\"mousemove\", handleMouseMove);\r\n    document.addEventListener(\"mouseup\", handleMouseUp);\r\n    document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n    document.addEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  /* ─── 双击折叠 ──────────────────────────────── */\r\n  const handleDoubleClick = () => {\r\n    if (disabled.value || !collapsible.value) return;\r\n    toggle(\"first\");\r\n  };\r\n\r\n  /* ─── 折叠 / 展开 ───────────────────────────── */\r\n  const collapse = (target: CollapseTarget = \"first\") => {\r\n    if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n    /* 记住折叠前的大小 */\r\n    if (!collapsedTarget.value) {\r\n      sizeBeforeCollapse.value = panelSize.value;\r\n    }\r\n\r\n    collapsedTarget.value = target;\r\n\r\n    if (target === \"first\") {\r\n      panelSize.value = 0;\r\n    } else {\r\n      panelSize.value = 100;\r\n    }\r\n\r\n    onCollapse?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const expand = () => {\r\n    if (!collapsedTarget.value) return;\r\n\r\n    const target = collapsedTarget.value;\r\n    collapsedTarget.value = null;\r\n    panelSize.value = sizeBeforeCollapse.value;\r\n\r\n    onExpand?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const toggle = (target: CollapseTarget = \"first\") => {\r\n    if (collapsedTarget.value) {\r\n      expand();\r\n    } else {\r\n      collapse(target);\r\n    }\r\n  };\r\n\r\n  /* ─── 键盘微调 ──────────────────────────────── */\r\n  /**\r\n   * 根据按键获取增量\r\n   */\r\n  const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n    const keyMap: Record<string, number | null> = {\r\n      ArrowLeft: isHorizontal ? -step : 0,\r\n      ArrowRight: isHorizontal ? step : 0,\r\n      ArrowUp: !isHorizontal ? -step : 0,\r\n      ArrowDown: !isHorizontal ? step : 0,\r\n    };\r\n    return keyMap[key] ?? null;\r\n  };\r\n\r\n  const handleKeyDown = (e: KeyboardEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    /* Home / End 直接跳到极值 */\r\n    if (e.key === \"Home\") {\r\n      updateSize(minSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n    if (e.key === \"End\") {\r\n      updateSize(maxSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n\r\n    const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n    if (delta === null || delta === 0) return;\r\n\r\n    e.preventDefault();\r\n    if (collapsedTarget.value) collapsedTarget.value = null;\r\n    updateSize(panelSize.value + delta);\r\n  };\r\n\r\n  /* ─── 重置 / 查询 ───────────────────────────── */\r\n  const resetSize = () => {\r\n    collapsedTarget.value = null;\r\n    panelSize.value = defaultSize;\r\n    onResize?.(defaultSize, 100 - defaultSize);\r\n  };\r\n\r\n  const setSize = (size: number) => {\r\n    collapsedTarget.value = null;\r\n    updateSize(size);\r\n  };\r\n\r\n  const getPanelInfo = () => ({\r\n    first: {\r\n      size: panelSize.value,\r\n      collapsed: isFirstCollapsed.value,\r\n    },\r\n    second: {\r\n      size: 100 - panelSize.value,\r\n      collapsed: isSecondCollapsed.value,\r\n    },\r\n  });\r\n\r\n  /* 清理 */\r\n  onUnmounted(() => {\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  });\r\n\r\n  return {\r\n    panelSize,\r\n    isDragging,\r\n    collapsedTarget,\r\n    isFirstCollapsed,\r\n    isSecondCollapsed,\r\n    handleMouseDown,\r\n    handleDoubleClick,\r\n    handleKeyDown,\r\n    collapse,\r\n    expand,\r\n    toggle,\r\n    resetSize,\r\n    setSize,\r\n    getPanelInfo,\r\n  };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_SplitPane2.js","names":["direction","disabled","showCollapseButton","collapsible"],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n  /** 容器引用 */\r\n  containerRef: Ref<HTMLElement | null>;\r\n  /** 分割方向 */\r\n  direction: Ref<SplitDirection>;\r\n  /** 首面板默认大小（百分比） */\r\n  defaultSize: number;\r\n  /** 首面板最小大小（百分比） */\r\n  minSize: number;\r\n  /** 首面板最大大小（百分比） */\r\n  maxSize: number;\r\n  /** 是否禁用 */\r\n  disabled: Ref<boolean>;\r\n  /** 是否可折叠 */\r\n  collapsible: Ref<boolean>;\r\n  /** 键盘微调步长（百分比） */\r\n  step: number;\r\n  /** resize 回调 */\r\n  onResize?: (firstSize: number, secondSize: number) => void;\r\n  /** 折叠回调 */\r\n  onCollapse?: (target: CollapseTarget) => void;\r\n  /** 展开回调 */\r\n  onExpand?: (target: CollapseTarget) => void;\r\n  /** 拖拽开始回调 */\r\n  onDragStart?: (size: number) => void;\r\n  /** 拖拽结束回调 */\r\n  onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n  const {\r\n    containerRef,\r\n    direction,\r\n    defaultSize,\r\n    minSize,\r\n    maxSize,\r\n    disabled,\r\n    collapsible,\r\n    step,\r\n    onResize,\r\n    onCollapse,\r\n    onExpand,\r\n    onDragStart,\r\n    onDragEnd,\r\n  } = options;\r\n\r\n  /** 首面板当前大小（百分比） */\r\n  const panelSize = ref(defaultSize);\r\n  /** 是否正在拖拽 */\r\n  const isDragging = ref(false);\r\n  /** 折叠状态 */\r\n  const collapsedTarget = ref<CollapseTarget | null>(null);\r\n  /** 折叠前记住的面板大小 */\r\n  const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n  /** 首面板是否折叠 */\r\n  const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n  /** 第二面板是否折叠 */\r\n  const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n  /**\r\n   * 将大小限制在 min/max 范围内\r\n   */\r\n  const clampSize = (size: number): number => {\r\n    return Math.min(maxSize, Math.max(minSize, size));\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的总长度（px）\r\n   */\r\n  const getContainerLength = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    return direction.value === \"horizontal\"\r\n      ? container.offsetWidth\r\n      : container.offsetHeight;\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的起始坐标\r\n   */\r\n  const getContainerStart = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    const rect = container.getBoundingClientRect();\r\n    return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n  };\r\n\r\n  /**\r\n   * 根据鼠标/触摸位置计算面板大小（百分比）\r\n   */\r\n  const calcSizeFromPosition = (clientPos: number): number => {\r\n    const containerLength = getContainerLength();\r\n    if (containerLength === 0) return panelSize.value;\r\n\r\n    const containerStart = getContainerStart();\r\n    const offset = clientPos - containerStart;\r\n    const percentage = (offset / containerLength) * 100;\r\n\r\n    return clampSize(percentage);\r\n  };\r\n\r\n  /**\r\n   * 获取事件的位置坐标\r\n   */\r\n  const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n    if (e instanceof TouchEvent) {\r\n      return direction.value === \"horizontal\"\r\n        ? e.touches[0].clientX\r\n        : e.touches[0].clientY;\r\n    }\r\n    return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n  };\r\n\r\n  /**\r\n   * 更新面板大小\r\n   */\r\n  const updateSize = (newSize: number) => {\r\n    const clamped = clampSize(newSize);\r\n    panelSize.value = clamped;\r\n    onResize?.(clamped, 100 - clamped);\r\n  };\r\n\r\n  /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n  const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDragging.value || disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    const pos = getClientPos(e);\r\n    const newSize = calcSizeFromPosition(pos);\r\n\r\n    /* 拖拽过程中取消折叠状态 */\r\n    if (collapsedTarget.value) {\r\n      collapsedTarget.value = null;\r\n    }\r\n    updateSize(newSize);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    if (!isDragging.value) return;\r\n\r\n    isDragging.value = false;\r\n    document.body.style.cursor = \"\";\r\n    document.body.style.userSelect = \"\";\r\n\r\n    onDragEnd?.(panelSize.value);\r\n\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    /* preventDefault 会阻止默认聚焦行为，需手动 focus 以支持键盘控制 */\r\n    (e.currentTarget as HTMLElement)?.focus();\r\n    isDragging.value = true;\r\n\r\n    document.body.style.cursor =\r\n      direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n    document.body.style.userSelect = \"none\";\r\n\r\n    onDragStart?.(panelSize.value);\r\n\r\n    document.addEventListener(\"mousemove\", handleMouseMove);\r\n    document.addEventListener(\"mouseup\", handleMouseUp);\r\n    document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n    document.addEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  /* ─── 双击折叠 ──────────────────────────────── */\r\n  const handleDoubleClick = () => {\r\n    if (disabled.value || !collapsible.value) return;\r\n    toggle(\"first\");\r\n  };\r\n\r\n  /* ─── 折叠 / 展开 ───────────────────────────── */\r\n  const collapse = (target: CollapseTarget = \"first\") => {\r\n    if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n    /* 记住折叠前的大小 */\r\n    if (!collapsedTarget.value) {\r\n      sizeBeforeCollapse.value = panelSize.value;\r\n    }\r\n\r\n    collapsedTarget.value = target;\r\n\r\n    if (target === \"first\") {\r\n      panelSize.value = 0;\r\n    } else {\r\n      panelSize.value = 100;\r\n    }\r\n\r\n    onCollapse?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const expand = () => {\r\n    if (!collapsedTarget.value) return;\r\n\r\n    const target = collapsedTarget.value;\r\n    collapsedTarget.value = null;\r\n    panelSize.value = sizeBeforeCollapse.value;\r\n\r\n    onExpand?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const toggle = (target: CollapseTarget = \"first\") => {\r\n    if (collapsedTarget.value) {\r\n      expand();\r\n    } else {\r\n      collapse(target);\r\n    }\r\n  };\r\n\r\n  /* ─── 键盘微调 ──────────────────────────────── */\r\n  /**\r\n   * 根据按键获取增量\r\n   */\r\n  const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n    const keyMap: Record<string, number | null> = {\r\n      ArrowLeft: isHorizontal ? -step : 0,\r\n      ArrowRight: isHorizontal ? step : 0,\r\n      ArrowUp: !isHorizontal ? -step : 0,\r\n      ArrowDown: !isHorizontal ? step : 0,\r\n    };\r\n    return keyMap[key] ?? null;\r\n  };\r\n\r\n  const handleKeyDown = (e: KeyboardEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    /* Home / End 直接跳到极值 */\r\n    if (e.key === \"Home\") {\r\n      updateSize(minSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n    if (e.key === \"End\") {\r\n      updateSize(maxSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n\r\n    const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n    if (delta === null || delta === 0) return;\r\n\r\n    e.preventDefault();\r\n    if (collapsedTarget.value) collapsedTarget.value = null;\r\n    updateSize(panelSize.value + delta);\r\n  };\r\n\r\n  /* ─── 重置 / 查询 ───────────────────────────── */\r\n  const resetSize = () => {\r\n    collapsedTarget.value = null;\r\n    panelSize.value = defaultSize;\r\n    onResize?.(defaultSize, 100 - defaultSize);\r\n  };\r\n\r\n  const setSize = (size: number) => {\r\n    collapsedTarget.value = null;\r\n    updateSize(size);\r\n  };\r\n\r\n  const getPanelInfo = () => ({\r\n    first: {\r\n      size: panelSize.value,\r\n      collapsed: isFirstCollapsed.value,\r\n    },\r\n    second: {\r\n      size: 100 - panelSize.value,\r\n      collapsed: isSecondCollapsed.value,\r\n    },\r\n  });\r\n\r\n  /* 清理 */\r\n  onUnmounted(() => {\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  });\r\n\r\n  return {\r\n    panelSize,\r\n    isDragging,\r\n    collapsedTarget,\r\n    isFirstCollapsed,\r\n    isSecondCollapsed,\r\n    handleMouseDown,\r\n    handleDoubleClick,\r\n    handleKeyDown,\r\n    collapse,\r\n    expand,\r\n    toggle,\r\n    resetSize,\r\n    setSize,\r\n    getPanelInfo,\r\n  };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_Steps.cjs

@@ -1,4 +1 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_C_Steps = require('./C_Steps.js');
-
-exports.C_Steps = require_C_Steps.C_Steps_default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_Steps.js`);exports.C_Steps=e.t;

package/dist/C_Steps.js

@@ -1,3 +1 @@
-import { t as C_Steps_default } from "./C_Steps2.js";
-
-export { C_Steps_default as C_Steps };
+import{t as e}from"./C_Steps2.js";export{e as C_Steps};

package/dist/C_Steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Steps.js","names":["direction","steps","clickable"],"sources":["../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-steps\" :class=\"[`steps-${direction}`]\">\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i v-if=\"step.icon\" :class=\"step.icon\"></i>\r\n          <i v-else-if=\"getStatus(index) === 'finish'\" class=\"i-mdi:check\"></i>\r\n          <span v-else class=\"step-index\">{{ index + 1 }}</span>\r\n        </div>\r\n        <div v-if=\"index < steps.length - 1\" class=\"step-line\" />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div v-if=\"step.time\" class=\"step-time\">{{ step.time }}</div>\r\n        <div v-if=\"step.description\" class=\"step-description\">\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\ndefineOptions({ name: \"C_Steps\" });\r\n\r\nexport interface StepItem {\r\n  title: string;\r\n  description?: string;\r\n  time?: string;\r\n  icon?: string;\r\n  status?: \"wait\" | \"process\" | \"finish\" | \"error\";\r\n  disabled?: boolean;\r\n  detail?: string;\r\n}\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    steps: StepItem[];\r\n    current?: number;\r\n    direction?: \"horizontal\" | \"vertical\";\r\n    clickable?: boolean;\r\n  }>(),\r\n  {\r\n    current: 0,\r\n    direction: \"horizontal\",\r\n    clickable: false,\r\n  },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n  \"update:current\": [number];\r\n  change: [number];\r\n}>();\r\n\r\nconst getStatus = (index: number) => {\r\n  if (props.steps[index].status) {\r\n    return props.steps[index].status;\r\n  }\r\n  if (index < props.current) return \"finish\";\r\n  if (index === props.current) return \"process\";\r\n  return \"wait\";\r\n};\r\n\r\nconst handleClick = (index: number) => {\r\n  if (!props.clickable || props.steps[index].disabled) return;\r\n  emit(\"update:current\", index);\r\n  emit(\"change\", index);\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-steps\" :class=\"[`steps-${direction}`]\">\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i v-if=\"step.icon\" :class=\"step.icon\"></i>\r\n          <i v-else-if=\"getStatus(index) === 'finish'\" class=\"i-mdi:check\"></i>\r\n          <span v-else class=\"step-index\">{{ index + 1 }}</span>\r\n        </div>\r\n        <div v-if=\"index < steps.length - 1\" class=\"step-line\" />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div v-if=\"step.time\" class=\"step-time\">{{ step.time }}</div>\r\n        <div v-if=\"step.description\" class=\"step-description\">\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\ndefineOptions({ name: \"C_Steps\" });\r\n\r\nexport interface StepItem {\r\n  title: string;\r\n  description?: string;\r\n  time?: string;\r\n  icon?: string;\r\n  status?: \"wait\" | \"process\" | \"finish\" | \"error\";\r\n  disabled?: boolean;\r\n  detail?: string;\r\n}\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    steps: StepItem[];\r\n    current?: number;\r\n    direction?: \"horizontal\" | \"vertical\";\r\n    clickable?: boolean;\r\n  }>(),\r\n  {\r\n    current: 0,\r\n    direction: \"horizontal\",\r\n    clickable: false,\r\n  },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n  \"update:current\": [number];\r\n  change: [number];\r\n}>();\r\n\r\nconst getStatus = (index: number) => {\r\n  if (props.steps[index].status) {\r\n    return props.steps[index].status;\r\n  }\r\n  if (index < props.current) return \"finish\";\r\n  if (index === props.current) return \"process\";\r\n  return \"wait\";\r\n};\r\n\r\nconst handleClick = (index: number) => {\r\n  if (!props.clickable || props.steps[index].disabled) return;\r\n  emit(\"update:current\", index);\r\n  emit(\"change\", index);\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-steps\" :class=\"[`steps-${direction}`]\">\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i v-if=\"step.icon\" :class=\"step.icon\"></i>\r\n          <i v-else-if=\"getStatus(index) === 'finish'\" class=\"i-mdi:check\"></i>\r\n          <span v-else class=\"step-index\">{{ index + 1 }}</span>\r\n        </div>\r\n        <div v-if=\"index < steps.length - 1\" class=\"step-line\" />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div v-if=\"step.time\" class=\"step-time\">{{ step.time }}</div>\r\n        <div v-if=\"step.description\" class=\"step-description\">\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\ndefineOptions({ name: \"C_Steps\" });\r\n\r\nexport interface StepItem {\r\n  title: string;\r\n  description?: string;\r\n  time?: string;\r\n  icon?: string;\r\n  status?: \"wait\" | \"process\" | \"finish\" | \"error\";\r\n  disabled?: boolean;\r\n  detail?: string;\r\n}\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    steps: StepItem[];\r\n    current?: number;\r\n    direction?: \"horizontal\" | \"vertical\";\r\n    clickable?: boolean;\r\n  }>(),\r\n  {\r\n    current: 0,\r\n    direction: \"horizontal\",\r\n    clickable: false,\r\n  },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n  \"update:current\": [number];\r\n  change: [number];\r\n}>();\r\n\r\nconst getStatus = (index: number) => {\r\n  if (props.steps[index].status) {\r\n    return props.steps[index].status;\r\n  }\r\n  if (index < props.current) return \"finish\";\r\n  if (index === props.current) return \"process\";\r\n  return \"wait\";\r\n};\r\n\r\nconst handleClick = (index: number) => {\r\n  if (!props.clickable || props.steps[index].disabled) return;\r\n  emit(\"update:current\", index);\r\n  emit(\"change\", index);\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"qjBEmDA,IAAM,EAAQ,EAcR,EAAO,EAKP,EAAa,GACb,EAAM,MAAM,GAAO,OACd,EAAM,MAAM,GAAO,OAExB,EAAQ,EAAM,QAAgB,SAC9B,IAAU,EAAM,QAAgB,UAC7B,OAGH,EAAe,GAAkB,CACjC,CAAC,EAAM,WAAa,EAAM,MAAM,GAAO,WAC3C,EAAK,iBAAkB,EAAM,CAC7B,EAAK,SAAU,EAAM,4DA/Cf,MAAA,CA3BD,OAAA,EAAA,EAAA,gBAAK,CAAC,UAAS,CAAA,SAAmBA,EAAAA,YAAS,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA0BxC,EAAA,SAAA,MAAA,EAAA,EAAA,YAxBoBC,EAAAA,OAAhB,EAAM,gDAwBV,MAAA,CAvBH,IAAK,EACN,OAAA,EAAA,EAAA,gBAAK,CAAC,YAAW,CAAA,QACU,EAAU,EAAK,GAAA,CAAA,iBAAkCC,EAAAA,WAAS,CAAK,EAAK,SAAQ,CAAA,CAAA,CAAA,CAItG,QAAK,GAAE,EAAY,EAAK,4BASnB,MAPN,EAOM,EAAA,EAAA,EAAA,oBAFE,MAJN,EAIM,CAHK,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA6B,IAAA,OAAtB,OAAA,EAAA,EAAA,gBAAO,EAAK,KAAI,WACvB,EAAU,EAAK,GAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAwC,IAArE,EAAqE,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBACf,OAAtD,GAAA,EAAA,EAAA,iBAAmC,EAAK,EAAA,CAAA,EAAA,EAAA,CAAA,CAE/B,EAAQD,EAAAA,MAAM,OAAM,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA0B,MAAzD,EAAyD,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAQrD,MANN,EAMM,0BAL0C,MAA9C,GAAA,EAAA,EAAA,iBAA2B,EAAK,MAAK,CAAA,EAAA,CAC1B,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA6C,MAA7D,GAAA,EAAA,EAAA,iBAA2C,EAAK,KAAI,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CACzC,EAAK,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEV,MAFN,GAAA,EAAA,EAAA,iBACK,EAAK,YAAW,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA"}