straw-ui-vue 0.1.0

package/dist/components/st-sidebar-item/st-sidebar-item.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { cn as e } from "../../utils/cn.js";
+import { createElementBlock as t, createElementVNode as n, defineComponent as r, inject as i, nextTick as a, normalizeClass as o, normalizeStyle as s, onMounted as c, onUnmounted as l, openBlock as u, renderSlot as d, unref as f, useAttrs as p, useTemplateRef as m } from "vue";
+//#region src/components/st-sidebar-item/st-sidebar-item.vue?vue&type=script&setup=true&lang.ts
+var h = /*@__PURE__*/ r({
+	inheritAttrs: !1,
+	__name: "st-sidebar-item",
+	props: { label: {} },
+	setup(r) {
+		let h = r, g = p(), _ = `sidebar-item-${Math.random().toString(36).slice(2, 9)}`, v = m("labelExtractRef"), y = m("contentRef"), b = i("sidebarContext", null), x = e("st-sidebar-item", "scroll-mt-0"), S = e("st-sidebar-item__content");
+		return c(async () => {
+			if (await a(), !b || !y.value) return;
+			let e = h.label ?? "", t = v.value?.innerHTML ?? "";
+			b.registerItem({
+				id: _,
+				label: e,
+				labelHtml: t,
+				el: y.value
+			});
+		}), l(() => {
+			b?.unregisterItem(_);
+		}), (r, i) => (u(), t("div", {
+			id: _,
+			class: o(f(e)(f(x), f(g).class)),
+			style: s(f(g).style)
+		}, [n("div", {
+			ref_key: "labelExtractRef",
+			ref: v,
+			"aria-hidden": "true",
+			class: "hidden"
+		}, [d(r.$slots, "label")], 512), n("div", {
+			ref_key: "contentRef",
+			ref: y,
+			class: o(f(S))
+		}, [d(r.$slots, "default")], 2)], 6));
+	}
+});
+//#endregion
+export { h as default };

package/dist/components/st-sidebar-item/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 侧边栏项组件属性
+ */
+export interface StSidebarItemProps {
+	/** 项标签文本 */
+	label?: string;
+}
+
+/**
+ * 侧边栏项组件插槽类型
+ */
+export interface StSidebarItemSlots {
+	/** 标签插槽 */
+	label?: () => unknown;
+	/** 默认插槽 */
+	default?: () => unknown;
+}
+
+export {};

package/dist/components/st-sidebar-item.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../utils/with-install.cjs"),t=require("./st-sidebar-item/st-sidebar-item.vue.cjs");var n=e.withInstall(t.default);exports.StSidebarItem=n,exports.default=n;

package/dist/components/st-sidebar-item.js

@@ -0,0 +1,6 @@
+import { withInstall as e } from "../utils/with-install.js";
+import t from "./st-sidebar-item/st-sidebar-item.vue.js";
+//#region src/components/st-sidebar-item/index.ts
+var n = e(t);
+//#endregion
+export { n as StSidebarItem, n as default };

package/dist/components/st-sidebar.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../utils/with-install.cjs"),t=require("./st-sidebar/st-sidebar.vue.cjs");var n=e.withInstall(t.default);exports.StSidebar=n,exports.default=n;

package/dist/components/st-sidebar.js

@@ -0,0 +1,6 @@
+import { withInstall as e } from "../utils/with-install.js";
+import t from "./st-sidebar/st-sidebar.vue.js";
+//#region src/components/st-sidebar/index.ts
+var n = e(t);
+//#endregion
+export { n as StSidebar, n as default };

package/dist/components/st-splitter/index.d.ts

@@ -0,0 +1,88 @@
+export declare const StSplitter: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+            direction: import("./types.d.ts").SplitterDirection;
+        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, {
+            direction: import("./types.d.ts").SplitterDirection;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        direction: import("./types.d.ts").SplitterDirection;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    })>>, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        [x: string]: any;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+            direction: import("./types.d.ts").SplitterDirection;
+        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, {
+            direction: import("./types.d.ts").SplitterDirection;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        direction: import("./types.d.ts").SplitterDirection;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    })>>, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, {
+        [x: string]: any;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        direction: import("./types.d.ts").SplitterDirection;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, {
+        direction: import("./types.d.ts").SplitterDirection;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./types.d.ts").SplitterProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    direction: import("./types.d.ts").SplitterDirection;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    };
+})>>, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    [x: string]: any;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & (import("vue").VNodeProps & (import("vue").AllowedComponentProps & (import("vue").ComponentCustomProps & import("vue").Plugin)));
+export default StSplitter;
+export type * from './types.d.ts';
+export { useSplitter } from './useSplitter.ts';

package/dist/components/st-splitter/st-splitter.vue.cjs

@@ -0,0 +1 @@
+var e=require("./st-splitter.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;

package/dist/components/st-splitter/st-splitter.vue.d.ts

@@ -0,0 +1,16 @@
+import type { SplitterProps } from './types.d.ts';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SplitterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SplitterProps> & Readonly<{}>, {
+    direction: import("./types.d.ts").SplitterDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/st-splitter/st-splitter.vue.js

@@ -0,0 +1,5 @@
+import e from "./st-splitter.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/st-splitter/st-splitter.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/st-splitter/st-splitter.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const e=require("../../utils/cn.cjs"),t=require("./useSplitter.cjs");let n=require("vue");var r=(0,n.defineComponent)({name:`StSplitter`,inheritAttrs:!1,__name:`st-splitter`,props:{direction:{default:`horizontal`}},setup(r){let i=r,a=(0,n.useAttrs)(),o=(0,n.useTemplateRef)(`containerRef`),s=t.useSplitter((0,n.toRef)(i,`direction`));return(0,n.provide)(`splitterContext`,s),(0,n.onMounted)(()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{s.initializePanelSizes(o.value)})}),window.addEventListener(`resize`,s.updateFlexPanelSize)}),(0,n.onUnmounted)(()=>{window.removeEventListener(`resize`,s.updateFlexPanelSize)}),(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`containerRef`,ref:o,class:(0,n.normalizeClass)((0,n.unref)(e.cn)(`flex w-full h-full overflow-hidden box-border gap-0`,(0,n.unref)(s).direction.value===`horizontal`?`flex-row`:`flex-col`,(0,n.unref)(a).class)),style:(0,n.normalizeStyle)((0,n.unref)(a).style)},[(0,n.renderSlot)(t.$slots,`default`)],6))}});exports.default=r;

package/dist/components/st-splitter/st-splitter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,29 @@
+import { cn as e } from "../../utils/cn.js";
+import { useSplitter as t } from "./useSplitter.js";
+import { createElementBlock as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, onMounted as o, onUnmounted as s, openBlock as c, provide as l, renderSlot as u, toRef as d, unref as f, useAttrs as p, useTemplateRef as m } from "vue";
+//#region src/components/st-splitter/st-splitter.vue?vue&type=script&setup=true&lang.ts
+var h = /*@__PURE__*/ r({
+	name: "StSplitter",
+	inheritAttrs: !1,
+	__name: "st-splitter",
+	props: { direction: { default: "horizontal" } },
+	setup(r) {
+		let h = r, g = p(), _ = m("containerRef"), v = t(d(h, "direction"));
+		return l("splitterContext", v), o(() => {
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					v.initializePanelSizes(_.value);
+				});
+			}), window.addEventListener("resize", v.updateFlexPanelSize);
+		}), s(() => {
+			window.removeEventListener("resize", v.updateFlexPanelSize);
+		}), (t, r) => (c(), n("div", {
+			ref_key: "containerRef",
+			ref: _,
+			class: i(f(e)("flex w-full h-full overflow-hidden box-border gap-0", f(v).direction.value === "horizontal" ? "flex-row" : "flex-col", f(g).class)),
+			style: a(f(g).style)
+		}, [u(t.$slots, "default")], 6));
+	}
+});
+//#endregion
+export { h as default };

package/dist/components/st-splitter/types.d.ts

@@ -0,0 +1,192 @@
+import type { Ref } from 'vue';
+
+/**
+ * 分屏方向类型
+ * */
+export type SplitterDirection = 'horizontal' | 'vertical';
+
+/**
+ * 面板配置接口
+ * */
+export interface SplitterPanelConfig {
+	/**
+	 * 面板唯一标识
+	 * */
+	id: string;
+	/**
+	 * 当前尺寸
+	 * */
+	size: number;
+	/**
+	 * 最小尺寸
+	 * */
+	minSize?: number;
+	/**
+	 * 最大尺寸
+	 * */
+	maxSize?: number;
+	/**
+	 * 期望尺寸，用于恢复时使用
+	 * */
+	desiredSize?: number;
+	/**
+	 * 是否为弹性面板
+	 * */
+	flex?: boolean;
+	/**
+	 * 是否可见
+	 * */
+	visible: boolean;
+}
+
+/**
+ * 分屏组件属性接口
+ * */
+export interface SplitterProps {
+	/**
+	 * 分屏方向
+	 * */
+	direction?: SplitterDirection;
+}
+
+/**
+ * 分屏内部上下文接口 - 包含响应式状态
+ * */
+export interface SplitterInternalContext {
+	/**
+	 * 分屏方向
+	 * */
+	direction: Ref<SplitterDirection>;
+	/**
+	 * 面板列表
+	 * */
+	panels: Ref<SplitterPanelConfig[]>;
+	/**
+	 * 当前激活的分隔条索引
+	 * */
+	activeGutter: Ref<number | null>;
+	/**
+	 * 分隔条尺寸
+	 * */
+	gutterSize: number;
+	/**
+	 * 鼠标位置响应式引用
+	 * */
+	mousePosition: Ref<{ x: number; y: number } | null>;
+	/**
+	 * 当前悬浮的gutter索引
+	 * */
+	isHoveringGutter: Ref<number | null>;
+	/**
+	 * 注册面板
+	 * */
+	registerPanel: (panel: SplitterPanelConfig) => void;
+	/**
+	 * 注销面板
+	 * */
+	unregisterPanel: (id: string) => void;
+	/**
+	 * 更新面板可见性
+	 * */
+	updatePanelVisible: (id: string, visible: boolean) => void;
+	/**
+	 * 开始拖拽调整尺寸
+	 * */
+	startResize: (gutterIndex: number, event: MouseEvent) => void;
+	/**
+	 * 更新弹性面板尺寸
+	 * */
+	updateFlexPanelSize: () => void;
+	/**
+	 * 初始化面板尺寸
+	 * */
+	initializePanelSizes: (containerEl: HTMLElement | null) => void;
+	/**
+	 * 获取容器尺寸
+	 * */
+	getContainerSize: (containerEl?: HTMLElement | null) => number;
+}
+
+/**
+ * 拖拽状态接口
+ * */
+export interface DragState {
+	/**
+	 * 是否正在拖拽
+	 * */
+	isDragging: boolean;
+	/**
+	 * 拖拽的分隔条索引
+	 * */
+	gutterIndex: number;
+	/**
+	 * 起始X坐标
+	 * */
+	startX: number;
+	/**
+	 * 起始Y坐标
+	 * */
+	startY: number;
+	/**
+	 * 起始时各面板尺寸
+	 * */
+	startSizes: number[];
+	/**
+	 * 当前鼠标X坐标
+	 * */
+	currentX?: number;
+	/**
+	 * 当前鼠标Y坐标
+	 * */
+	currentY?: number;
+}
+
+/**
+ * 尺寸约束计算参数接口
+ * */
+export interface ConstrainedSizesOptions {
+	/**
+	 * 左面板期望尺寸
+	 * */
+	leftSize: number;
+	/**
+	 * 右面板期望尺寸
+	 * */
+	rightSize: number;
+	/**
+	 * 左面板最小尺寸
+	 * */
+	leftMin: number;
+	/**
+	 * 左面板最大尺寸
+	 * */
+	leftMax: number;
+	/**
+	 * 右面板最小尺寸
+	 * */
+	rightMin: number;
+	/**
+	 * 右面板最大尺寸
+	 * */
+	rightMax: number;
+	/**
+	 * 两面板总尺寸
+	 * */
+	totalSize: number;
+}
+
+/**
+ * 尺寸约束计算结果接口
+ * */
+export interface ConstrainedSizesResult {
+	/**
+	 * 约束后的左面板尺寸
+	 * */
+	leftSize: number;
+	/**
+	 * 约束后的右面板尺寸
+	 * */
+	rightSize: number;
+}
+
+export {};

package/dist/components/st-splitter/useSplitter.cjs

@@ -0,0 +1 @@
+let e=require("vue");function t(e){let{leftSize:t,rightSize:n,leftMin:r,leftMax:i,rightMin:a,rightMax:o,totalSize:s}=e;return t<r&&(t=r,n=s-r),t>i&&(t=i,n=s-i),n<a&&(n=a,t=s-a),n>o&&(n=o,t=s-o),{leftSize:t,rightSize:n}}function n(n){let r=(0,e.ref)([]),i=(0,e.ref)(null),a=(0,e.ref)(null),o=(0,e.ref)(null),s=(0,e.ref)(null),c=(0,e.ref)({isDragging:!1,gutterIndex:-1,startX:0,startY:0,startSizes:[]}),l=(0,e.computed)(()=>r.value.filter(e=>e.visible)),u=(0,e.computed)(()=>{let e=l.value,t=e.findIndex(e=>e.flex);return t>=0?t:e.length-1}),d=e=>{let t=e??s.value;if(!t)return 0;let r=getComputedStyle(t);if(n.value===`horizontal`){let e=parseFloat(r.paddingLeft)||0,n=parseFloat(r.paddingRight)||0;return t.clientWidth-e-n}else{let e=parseFloat(r.paddingTop)||0,n=parseFloat(r.paddingBottom)||0;return t.clientHeight-e-n}},f=()=>{let e=l.value.length;return e<=1?0:(e-1)*8},p=e=>{e&&(s.value=e);let t=l.value;if(t.length===0)return;let n=d();if(n<=0)return;let r=n-f();if(r<=0)return;let i=u.value,a=0;if(t.forEach((e,t)=>{t!==i&&(a+=e.desiredSize??200)}),a<=r){t.forEach((e,t)=>{t!==i&&(e.size=e.desiredSize??200)});let e=t.reduce((e,t,n)=>n===i?e:e+t.size,0),n=t[i];n&&(n.size=Math.max(n.minSize??0,r-e))}else{let e=r/(a+(t[i]?.desiredSize??200));t.forEach(t=>{t.size=(t.desiredSize??200)*e})}},m=()=>{let e=l.value;if(e.length===0)return;let t=d();if(t<=0)return;let n=f(),r=u.value,i=0;for(let t=0;t<e.length;t++)t!==r&&(i+=e[t].size);let a=e[r];if(a){let e=t-n-i,r=a.minSize??0;a.size=Math.max(r,e)}},h=e=>{r.value.push({...e,size:e.visible?e.size:0,desiredSize:e.size})},g=e=>{let t=r.value.findIndex(t=>t.id===e);t>-1&&r.value.splice(t,1)},_=(e,t)=>{let n=r.value.find(t=>t.id===e);n&&(n.visible=t,m())},v=(e,t)=>{t.preventDefault();let r=l.value;c.value={isDragging:!0,gutterIndex:e,startX:t.clientX,startY:t.clientY,startSizes:r.map(e=>e.size)},i.value=e,document.body.style.cursor=n.value===`horizontal`?`ew-resize`:`ns-resize`,document.addEventListener(`mousemove`,y),document.addEventListener(`mouseup`,b)},y=e=>{if(!c.value.isDragging)return;a.value={x:e.clientX,y:e.clientY};let r=n.value===`horizontal`?e.clientX-c.value.startX:e.clientY-c.value.startY,i=c.value.gutterIndex,o=l.value,s=o[i],u=o[i+1];if(!s||!u)return;let d=c.value.startSizes[i]+c.value.startSizes[i+1],{leftSize:f,rightSize:p}=t({leftSize:c.value.startSizes[i]+r,rightSize:c.value.startSizes[i+1]-r,leftMin:s.minSize??0,leftMax:s.maxSize??1/0,rightMin:u.minSize??0,rightMax:u.maxSize??1/0,totalSize:d});s.size=f,u.size=p},b=()=>{c.value.isDragging=!1,i.value=null,document.body.style.cursor=``,document.removeEventListener(`mousemove`,y),document.removeEventListener(`mouseup`,b)};return{direction:n,panels:r,activeGutter:i,gutterSize:8,mousePosition:a,isHoveringGutter:o,registerPanel:h,unregisterPanel:g,updatePanelVisible:_,startResize:v,updateFlexPanelSize:m,initializePanelSizes:p,getContainerSize:d}}exports.useSplitter=n;

package/dist/components/st-splitter/useSplitter.d.ts

@@ -0,0 +1,24 @@
+import type { Ref } from 'vue';
+import type { ConstrainedSizesOptions, ConstrainedSizesResult, SplitterDirection, SplitterInternalContext } from './types.d.ts';
+/**
+ * 限制数值在指定范围内
+ * @param value - 待限制的值
+ * @param min - 最小值
+ * @param max - 最大值
+ * @returns 限制后的值
+ * */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * 计算调整后的尺寸，考虑边界约束
+ * 确保左右面板尺寸都在各自的 min/max 范围内
+ * @param options - 尺寸约束计算参数
+ * @returns 约束后的左右面板尺寸
+ * */
+export declare function calculateConstrainedSizes(options: ConstrainedSizesOptions): ConstrainedSizesResult;
+/**
+ * 分屏组件 composable
+ * 每次调用都会创建独立的状态实例，支持多个分屏组件并存
+ * @param direction - 分屏方向的响应式引用
+ * @returns 分屏上下文对象
+ * */
+export declare function useSplitter(direction: Ref<SplitterDirection>): SplitterInternalContext;

package/dist/components/st-splitter/useSplitter.js

@@ -0,0 +1,129 @@
+import { computed as e, ref as t } from "vue";
+//#region src/components/st-splitter/useSplitter.ts
+function n(e) {
+	let { leftSize: t, rightSize: n, leftMin: r, leftMax: i, rightMin: a, rightMax: o, totalSize: s } = e;
+	return t < r && (t = r, n = s - r), t > i && (t = i, n = s - i), n < a && (n = a, t = s - a), n > o && (n = o, t = s - o), {
+		leftSize: t,
+		rightSize: n
+	};
+}
+function r(r) {
+	let i = t([]), a = t(null), o = t(null), s = t(null), c = t(null), l = t({
+		isDragging: !1,
+		gutterIndex: -1,
+		startX: 0,
+		startY: 0,
+		startSizes: []
+	}), u = e(() => i.value.filter((e) => e.visible)), d = e(() => {
+		let e = u.value, t = e.findIndex((e) => e.flex);
+		return t >= 0 ? t : e.length - 1;
+	}), f = (e) => {
+		let t = e ?? c.value;
+		if (!t) return 0;
+		let n = getComputedStyle(t);
+		if (r.value === "horizontal") {
+			let e = parseFloat(n.paddingLeft) || 0, r = parseFloat(n.paddingRight) || 0;
+			return t.clientWidth - e - r;
+		} else {
+			let e = parseFloat(n.paddingTop) || 0, r = parseFloat(n.paddingBottom) || 0;
+			return t.clientHeight - e - r;
+		}
+	}, p = () => {
+		let e = u.value.length;
+		return e <= 1 ? 0 : (e - 1) * 8;
+	}, m = (e) => {
+		e && (c.value = e);
+		let t = u.value;
+		if (t.length === 0) return;
+		let n = f();
+		if (n <= 0) return;
+		let r = n - p();
+		if (r <= 0) return;
+		let i = d.value, a = 0;
+		if (t.forEach((e, t) => {
+			t !== i && (a += e.desiredSize ?? 200);
+		}), a <= r) {
+			t.forEach((e, t) => {
+				t !== i && (e.size = e.desiredSize ?? 200);
+			});
+			let e = t.reduce((e, t, n) => n === i ? e : e + t.size, 0), n = t[i];
+			n && (n.size = Math.max(n.minSize ?? 0, r - e));
+		} else {
+			let e = r / (a + (t[i]?.desiredSize ?? 200));
+			t.forEach((t) => {
+				t.size = (t.desiredSize ?? 200) * e;
+			});
+		}
+	}, h = () => {
+		let e = u.value;
+		if (e.length === 0) return;
+		let t = f();
+		if (t <= 0) return;
+		let n = p(), r = d.value, i = 0;
+		for (let t = 0; t < e.length; t++) t !== r && (i += e[t].size);
+		let a = e[r];
+		if (a) {
+			let e = t - n - i, r = a.minSize ?? 0;
+			a.size = Math.max(r, e);
+		}
+	}, g = (e) => {
+		i.value.push({
+			...e,
+			size: e.visible ? e.size : 0,
+			desiredSize: e.size
+		});
+	}, _ = (e) => {
+		let t = i.value.findIndex((t) => t.id === e);
+		t > -1 && i.value.splice(t, 1);
+	}, v = (e, t) => {
+		let n = i.value.find((t) => t.id === e);
+		n && (n.visible = t, h());
+	}, y = (e, t) => {
+		t.preventDefault();
+		let n = u.value;
+		l.value = {
+			isDragging: !0,
+			gutterIndex: e,
+			startX: t.clientX,
+			startY: t.clientY,
+			startSizes: n.map((e) => e.size)
+		}, a.value = e, document.body.style.cursor = r.value === "horizontal" ? "ew-resize" : "ns-resize", document.addEventListener("mousemove", b), document.addEventListener("mouseup", x);
+	}, b = (e) => {
+		if (!l.value.isDragging) return;
+		o.value = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		let t = r.value === "horizontal" ? e.clientX - l.value.startX : e.clientY - l.value.startY, i = l.value.gutterIndex, a = u.value, s = a[i], c = a[i + 1];
+		if (!s || !c) return;
+		let d = l.value.startSizes[i] + l.value.startSizes[i + 1], { leftSize: f, rightSize: p } = n({
+			leftSize: l.value.startSizes[i] + t,
+			rightSize: l.value.startSizes[i + 1] - t,
+			leftMin: s.minSize ?? 0,
+			leftMax: s.maxSize ?? Infinity,
+			rightMin: c.minSize ?? 0,
+			rightMax: c.maxSize ?? Infinity,
+			totalSize: d
+		});
+		s.size = f, c.size = p;
+	}, x = () => {
+		l.value.isDragging = !1, a.value = null, document.body.style.cursor = "", document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", x);
+	};
+	return {
+		direction: r,
+		panels: i,
+		activeGutter: a,
+		gutterSize: 8,
+		mousePosition: o,
+		isHoveringGutter: s,
+		registerPanel: g,
+		unregisterPanel: _,
+		updatePanelVisible: v,
+		startResize: y,
+		updateFlexPanelSize: h,
+		initializePanelSizes: m,
+		getContainerSize: f
+	};
+}
+//#endregion
+export { r as useSplitter };