@rockshin/tao-ui 0.0.1

package/dist/components/splitter/splitter.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './splitter.css';
+export type SplitterSemanticPart = 'root' | 'panel' | 'dragger';
+export interface SplitterPanelProps {
+    defaultSize?: number | string;
+    size?: number | string;
+    min?: number | string;
+    max?: number | string;
+    collapsible?: boolean | {
+        start?: boolean;
+        end?: boolean;
+    };
+    resizable?: boolean;
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+export interface SplitterProps {
+    orientation?: 'horizontal' | 'vertical';
+    onResize?: (sizes: number[]) => void;
+    onResizeEnd?: (sizes: number[]) => void;
+    onResizeStart?: (sizes: number[]) => void;
+    className?: string;
+    classNames?: SemanticClassNames<SplitterSemanticPart>;
+    styles?: SemanticStyles<SplitterSemanticPart>;
+    children: ReactNode;
+}
+export declare function Panel(_props: SplitterPanelProps): ReactNode;
+export declare function Splitter({ orientation, onResize, onResizeEnd, onResizeStart, className, classNames, styles, children, }: SplitterProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Splitter {
+    var Panel: typeof import("./splitter").Panel;
+}

package/dist/components/splitter/splitter.js

@@ -0,0 +1,451 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../../utils/semantic.js";
+import "./splitter.css";
+function parseSize(value, total) {
+    if (void 0 === value) return;
+    if ('number' == typeof value) return value;
+    if (value.endsWith('%')) return parseFloat(value) / 100 * total;
+    return parseFloat(value);
+}
+function CollapseIcon(t0) {
+    const $ = c(3);
+    const { direction } = t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = /*#__PURE__*/ jsx("path", {
+            d: "M7.5 2.5L4 6l3.5 3.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        });
+        $[0] = t1;
+    } else t1 = $[0];
+    let t2;
+    if ($[1] !== direction) {
+        t2 = /*#__PURE__*/ jsx("svg", {
+            width: "12",
+            height: "12",
+            viewBox: "0 0 12 12",
+            fill: "none",
+            "aria-hidden": true,
+            "data-tao-collapse-direction": direction,
+            children: t1
+        });
+        $[1] = direction;
+        $[2] = t2;
+    } else t2 = $[2];
+    return t2;
+}
+function Panel(_props) {
+    return null;
+}
+function Splitter(t0) {
+    const $ = c(66);
+    const { orientation: t1, onResize, onResizeEnd, onResizeStart, className, classNames, styles, children } = t0;
+    const orientation = void 0 === t1 ? "horizontal" : t1;
+    const containerRef = useRef(null);
+    let panelChildren;
+    let panels;
+    if ($[0] !== children) {
+        panels = [];
+        panelChildren = [];
+        const childArray = Array.isArray(children) ? children : [
+            children
+        ];
+        for (const child of childArray)if (child && "object" == typeof child && "type" in child && child.type === Panel) {
+            panels.push(child.props);
+            panelChildren.push(child.props.children);
+        }
+        $[0] = children;
+        $[1] = panelChildren;
+        $[2] = panels;
+    } else {
+        panelChildren = $[1];
+        panels = $[2];
+    }
+    const panelCount = panels.length;
+    const isHorizontal = "horizontal" === orientation;
+    let t2;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = [];
+        $[3] = t2;
+    } else t2 = $[3];
+    const [sizes, setSizes] = useState(t2);
+    const [containerSize, setContainerSize] = useState(0);
+    const initialized = useRef(false);
+    let t3;
+    let t4;
+    if ($[4] !== isHorizontal) {
+        t3 = ()=>{
+            const el = containerRef.current;
+            if (!el) return;
+            const observer = new ResizeObserver((entries)=>{
+                const entry = entries[0];
+                if (!entry) return;
+                const total = isHorizontal ? entry.contentRect.width : entry.contentRect.height;
+                setContainerSize(total);
+            });
+            observer.observe(el);
+            return ()=>observer.disconnect();
+        };
+        t4 = [
+            isHorizontal
+        ];
+        $[4] = isHorizontal;
+        $[5] = t3;
+        $[6] = t4;
+    } else {
+        t3 = $[5];
+        t4 = $[6];
+    }
+    useEffect(t3, t4);
+    let t5;
+    if ($[7] !== containerSize || $[8] !== panelCount || $[9] !== panels || $[10] !== sizes.length) {
+        t5 = ()=>{
+            if (containerSize <= 0 || 0 === panelCount) return;
+            if (initialized.current && sizes.length === panelCount) return;
+            const draggerSpace = (panelCount - 1) * 1;
+            const available = containerSize - draggerSpace;
+            const newSizes = [];
+            let allocated = 0;
+            let unspecified = 0;
+            for(let i = 0; i < panelCount; i++){
+                const p = panels[i];
+                const controlled = void 0 !== p.size ? parseSize(p.size, available) : void 0;
+                const def = void 0 !== p.defaultSize ? parseSize(p.defaultSize, available) : void 0;
+                const s = controlled ?? def;
+                if (void 0 !== s) {
+                    newSizes.push(s);
+                    allocated += s;
+                } else {
+                    newSizes.push(-1);
+                    unspecified++;
+                }
+            }
+            const remaining = Math.max(0, available - allocated);
+            const perUnspecified = unspecified > 0 ? remaining / unspecified : 0;
+            for(let i_0 = 0; i_0 < newSizes.length; i_0++)if (newSizes[i_0] < 0) newSizes[i_0] = perUnspecified;
+            setSizes(newSizes);
+            initialized.current = true;
+        };
+        $[7] = containerSize;
+        $[8] = panelCount;
+        $[9] = panels;
+        $[10] = sizes.length;
+        $[11] = t5;
+    } else t5 = $[11];
+    let t6;
+    if ($[12] !== containerSize || $[13] !== panelCount) {
+        t6 = [
+            containerSize,
+            panelCount
+        ];
+        $[12] = containerSize;
+        $[13] = panelCount;
+        $[14] = t6;
+    } else t6 = $[14];
+    useEffect(t5, t6);
+    let t7;
+    if ($[15] !== containerSize || $[16] !== panelCount || $[17] !== panels || $[18] !== sizes) {
+        t7 = ()=>{
+            if (!initialized.current || sizes.length !== panelCount) return;
+            const draggerSpace_0 = (panelCount - 1) * 1;
+            const available_0 = containerSize - draggerSpace_0;
+            let changed = false;
+            const next = [
+                ...sizes
+            ];
+            for(let i_1 = 0; i_1 < panelCount; i_1++){
+                const controlled_0 = void 0 !== panels[i_1].size ? parseSize(panels[i_1].size, available_0) : void 0;
+                if (void 0 !== controlled_0 && Math.abs(controlled_0 - next[i_1]) > 0.5) {
+                    next[i_1] = controlled_0;
+                    changed = true;
+                }
+            }
+            if (changed) setSizes(next);
+        };
+        $[15] = containerSize;
+        $[16] = panelCount;
+        $[17] = panels;
+        $[18] = sizes;
+        $[19] = t7;
+    } else t7 = $[19];
+    useEffect(t7);
+    const dragging = useRef(null);
+    let t8;
+    if ($[20] !== containerSize || $[21] !== isHorizontal || $[22] !== onResize || $[23] !== onResizeEnd || $[24] !== onResizeStart || $[25] !== panelCount || $[26] !== panels || $[27] !== sizes) {
+        t8 = (index, e)=>{
+            e.preventDefault();
+            const pos = isHorizontal ? e.clientX : e.clientY;
+            dragging.current = {
+                index,
+                startPos: pos,
+                startSizes: [
+                    ...sizes
+                ]
+            };
+            onResizeStart?.(sizes);
+            const handleMove = (ev)=>{
+                if (!dragging.current) return;
+                const { index: idx, startPos, startSizes } = dragging.current;
+                const delta = (isHorizontal ? ev.clientX : ev.clientY) - startPos;
+                const draggerSpace_1 = (panelCount - 1) * 1;
+                const available_1 = containerSize - draggerSpace_1;
+                const leftIdx = idx;
+                const rightIdx = idx + 1;
+                const leftMin = parseSize(panels[leftIdx].min, available_1) ?? 0;
+                const leftMax = parseSize(panels[leftIdx].max, available_1);
+                const rightMin = parseSize(panels[rightIdx].min, available_1) ?? 0;
+                const rightMax = parseSize(panels[rightIdx].max, available_1);
+                let newLeft = startSizes[leftIdx] + delta;
+                let newRight;
+                const total_0 = startSizes[leftIdx] + startSizes[rightIdx];
+                if (void 0 !== leftMin) newLeft = Math.max(newLeft, leftMin);
+                if (void 0 !== leftMax) newLeft = Math.min(newLeft, leftMax);
+                newLeft = Math.max(0, newLeft);
+                if (void 0 !== rightMin) newLeft = Math.min(newLeft, total_0 - rightMin);
+                if (void 0 !== rightMax) newLeft = Math.max(newLeft, total_0 - rightMax);
+                newLeft = Math.max(0, Math.min(newLeft, total_0));
+                newRight = total_0 - newLeft;
+                const next_0 = [
+                    ...startSizes
+                ];
+                next_0[leftIdx] = newLeft;
+                next_0[rightIdx] = newRight;
+                setSizes(next_0);
+                onResize?.(next_0);
+            };
+            const handleUp = ()=>{
+                if (dragging.current) {
+                    dragging.current = null;
+                    document.removeEventListener("pointermove", handleMove);
+                    document.removeEventListener("pointerup", handleUp);
+                    setSizes((cur)=>{
+                        onResizeEnd?.(cur);
+                        return cur;
+                    });
+                }
+            };
+            document.addEventListener("pointermove", handleMove);
+            document.addEventListener("pointerup", handleUp);
+        };
+        $[20] = containerSize;
+        $[21] = isHorizontal;
+        $[22] = onResize;
+        $[23] = onResizeEnd;
+        $[24] = onResizeStart;
+        $[25] = panelCount;
+        $[26] = panels;
+        $[27] = sizes;
+        $[28] = t8;
+    } else t8 = $[28];
+    const handleDragStart = t8;
+    let t9;
+    if ($[29] !== containerSize || $[30] !== onResize || $[31] !== onResizeEnd || $[32] !== panelCount || $[33] !== panels) {
+        t9 = (index_0, direction)=>{
+            const draggerSpace_2 = (panelCount - 1) * 1;
+            const available_2 = containerSize - draggerSpace_2;
+            const targetIdx = "start" === direction ? index_0 : index_0 + 1;
+            const adjacentIdx = "start" === direction ? index_0 + 1 : index_0;
+            setSizes((prev)=>{
+                const next_1 = [
+                    ...prev
+                ];
+                const isCollapsed = next_1[targetIdx] <= 0;
+                if (isCollapsed) {
+                    const def_0 = parseSize(panels[targetIdx].defaultSize, available_2);
+                    const expandTo = def_0 ?? available_2 / panelCount;
+                    const take = Math.min(expandTo, next_1[adjacentIdx]);
+                    next_1[targetIdx] = take;
+                    next_1[adjacentIdx] = next_1[adjacentIdx] - take;
+                } else {
+                    next_1[adjacentIdx] = next_1[adjacentIdx] + next_1[targetIdx];
+                    next_1[targetIdx] = 0;
+                }
+                onResize?.(next_1);
+                onResizeEnd?.(next_1);
+                return next_1;
+            });
+        };
+        $[29] = containerSize;
+        $[30] = onResize;
+        $[31] = onResizeEnd;
+        $[32] = panelCount;
+        $[33] = panels;
+        $[34] = t9;
+    } else t9 = $[34];
+    const handleCollapse = t9;
+    let t10;
+    if ($[35] !== panels) {
+        t10 = function(index_1) {
+            const leftPanel = panels[index_1];
+            const rightPanel = panels[index_1 + 1];
+            let startCollapsible = false;
+            let endCollapsible = false;
+            if (true === leftPanel.collapsible) startCollapsible = true;
+            else if ("object" == typeof leftPanel.collapsible) {
+                if (leftPanel.collapsible.end) startCollapsible = true;
+            }
+            if (true === rightPanel.collapsible) endCollapsible = true;
+            else if ("object" == typeof rightPanel.collapsible) {
+                if (rightPanel.collapsible.start) endCollapsible = true;
+            }
+            return {
+                start: startCollapsible,
+                end: endCollapsible
+            };
+        };
+        $[35] = panels;
+        $[36] = t10;
+    } else t10 = $[36];
+    const getDraggerCollapse = t10;
+    if (sizes.length !== panelCount) {
+        const t11 = classNames?.root;
+        let t12;
+        if ($[37] !== className || $[38] !== t11) {
+            t12 = cx(t11, className);
+            $[37] = className;
+            $[38] = t11;
+            $[39] = t12;
+        } else t12 = $[39];
+        const t13 = styles?.root;
+        let t14;
+        if ($[40] !== orientation || $[41] !== t12 || $[42] !== t13) {
+            t14 = /*#__PURE__*/ jsx("div", {
+                ref: containerRef,
+                "data-tao-splitter": "",
+                "data-tao-orientation": orientation,
+                className: t12,
+                style: t13
+            });
+            $[40] = orientation;
+            $[41] = t12;
+            $[42] = t13;
+            $[43] = t14;
+        } else t14 = $[43];
+        return t14;
+    }
+    const t11 = classNames?.root;
+    let t12;
+    if ($[44] !== className || $[45] !== t11) {
+        t12 = cx(t11, className);
+        $[44] = className;
+        $[45] = t11;
+        $[46] = t12;
+    } else t12 = $[46];
+    const t13 = styles?.root;
+    let t14;
+    if ($[47] !== classNames?.dragger || $[48] !== classNames?.panel || $[49] !== getDraggerCollapse || $[50] !== handleCollapse || $[51] !== handleDragStart || $[52] !== isHorizontal || $[53] !== orientation || $[54] !== panelChildren || $[55] !== panelCount || $[56] !== panels || $[57] !== sizes || $[58] !== styles?.dragger || $[59] !== styles?.panel) {
+        t14 = panels.map((panel, i_2)=>{
+            const sizeStyle = isHorizontal ? {
+                width: sizes[i_2],
+                flexShrink: 0,
+                flexGrow: 0
+            } : {
+                height: sizes[i_2],
+                flexShrink: 0,
+                flexGrow: 0
+            };
+            const isCollapsed_0 = sizes[i_2] <= 0;
+            return /*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: "contents"
+                },
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        "data-tao-splitter-panel": "",
+                        "data-tao-collapsed": isCollapsed_0 || void 0,
+                        className: cx(classNames?.panel, panel.className),
+                        style: {
+                            ...sizeStyle,
+                            ...styles?.panel,
+                            ...panel.style
+                        },
+                        children: panelChildren[i_2]
+                    }),
+                    i_2 < panelCount - 1 && /*#__PURE__*/ jsxs("div", {
+                        "data-tao-splitter-dragger": "",
+                        "data-tao-orientation": orientation,
+                        className: cx(classNames?.dragger),
+                        style: styles?.dragger,
+                        onPointerDown: (e_0)=>{
+                            if ((panel.resizable ?? true) && (panels[i_2 + 1]?.resizable ?? true)) handleDragStart(i_2, e_0);
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                "data-tao-splitter-dragger-bar": ""
+                            }),
+                            (()=>{
+                                const { start, end } = getDraggerCollapse(i_2);
+                                return /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        start && /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            "data-tao-splitter-collapse": "",
+                                            "data-tao-collapse-direction": "start",
+                                            "data-tao-orientation": orientation,
+                                            "aria-label": "Collapse panel",
+                                            onClick: ()=>handleCollapse(i_2, "start"),
+                                            children: /*#__PURE__*/ jsx(CollapseIcon, {
+                                                direction: sizes[i_2] <= 0 ? "end" : "start",
+                                                orientation: orientation
+                                            })
+                                        }),
+                                        end && /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            "data-tao-splitter-collapse": "",
+                                            "data-tao-collapse-direction": "end",
+                                            "data-tao-orientation": orientation,
+                                            "aria-label": "Collapse panel",
+                                            onClick: ()=>handleCollapse(i_2, "end"),
+                                            children: /*#__PURE__*/ jsx(CollapseIcon, {
+                                                direction: sizes[i_2 + 1] <= 0 ? "start" : "end",
+                                                orientation: orientation
+                                            })
+                                        })
+                                    ]
+                                });
+                            })()
+                        ]
+                    })
+                ]
+            }, i_2);
+        });
+        $[47] = classNames?.dragger;
+        $[48] = classNames?.panel;
+        $[49] = getDraggerCollapse;
+        $[50] = handleCollapse;
+        $[51] = handleDragStart;
+        $[52] = isHorizontal;
+        $[53] = orientation;
+        $[54] = panelChildren;
+        $[55] = panelCount;
+        $[56] = panels;
+        $[57] = sizes;
+        $[58] = styles?.dragger;
+        $[59] = styles?.panel;
+        $[60] = t14;
+    } else t14 = $[60];
+    let t15;
+    if ($[61] !== orientation || $[62] !== t12 || $[63] !== t13 || $[64] !== t14) {
+        t15 = /*#__PURE__*/ jsx("div", {
+            ref: containerRef,
+            "data-tao-splitter": "",
+            "data-tao-orientation": orientation,
+            className: t12,
+            style: t13,
+            children: t14
+        });
+        $[61] = orientation;
+        $[62] = t12;
+        $[63] = t13;
+        $[64] = t14;
+        $[65] = t15;
+    } else t15 = $[65];
+    return t15;
+}
+Splitter.Panel = Panel;
+export { Panel, Splitter };