@seedgrid/fe-components 2026.3.28 → 2026.3.31-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/layout/SgPanel.d.ts +9 -5
- package/dist/layout/SgPanel.d.ts.map +1 -1
- package/dist/layout/SgPanel.js +23 -58
- package/dist/layout/SgScreen.d.ts.map +1 -1
- package/dist/layout/SgScreen.js +43 -12
- package/dist/layout/sgDocking.d.ts +24 -0
- package/dist/layout/sgDocking.d.ts.map +1 -0
- package/dist/layout/sgDocking.js +138 -0
- package/dist/sandbox.cjs +38 -38
- package/package.json +1 -1
- package/dist/layout/SgMainPanel.d.ts +0 -11
- package/dist/layout/SgMainPanel.d.ts.map +0 -1
- package/dist/layout/SgMainPanel.js +0 -92
package/package.json
CHANGED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
export type SgMainPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
3
|
-
gap?: number | string;
|
|
4
|
-
padding?: number | string;
|
|
5
|
-
children?: React.ReactNode;
|
|
6
|
-
};
|
|
7
|
-
export declare function SgMainPanel(props: Readonly<SgMainPanelProps>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export declare namespace SgMainPanel {
|
|
9
|
-
var displayName: string;
|
|
10
|
-
}
|
|
11
|
-
//# sourceMappingURL=SgMainPanel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SgMainPanel.d.ts","sourceRoot":"","sources":["../../src/layout/SgMainPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CA4H5D;yBA5He,WAAW"}
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
function cn(...parts) {
|
|
5
|
-
return parts.filter(Boolean).join(" ");
|
|
6
|
-
}
|
|
7
|
-
function toCssSpace(value) {
|
|
8
|
-
if (value === undefined || value === null)
|
|
9
|
-
return undefined;
|
|
10
|
-
return typeof value === "number" ? `${value}px` : value;
|
|
11
|
-
}
|
|
12
|
-
function toCssPercent(value) {
|
|
13
|
-
if (value === undefined || value === null)
|
|
14
|
-
return undefined;
|
|
15
|
-
return typeof value === "number" ? `${value}%` : value;
|
|
16
|
-
}
|
|
17
|
-
function cloneWithLayout(node, key, extraStyle, extraClassName) {
|
|
18
|
-
if (!React.isValidElement(node)) {
|
|
19
|
-
return (_jsx("div", { style: extraStyle, className: extraClassName, children: node }, key));
|
|
20
|
-
}
|
|
21
|
-
const element = node;
|
|
22
|
-
const mergedStyle = { ...(element.props.style ?? {}), ...extraStyle };
|
|
23
|
-
return React.cloneElement(element, {
|
|
24
|
-
key: element.key ?? key,
|
|
25
|
-
className: cn(element.props.className, extraClassName),
|
|
26
|
-
style: mergedStyle
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
export function SgMainPanel(props) {
|
|
30
|
-
const { gap = 0, padding, className, style, children, ...rest } = props;
|
|
31
|
-
const allItems = React.Children.toArray(children).map((node, index) => {
|
|
32
|
-
const key = (React.isValidElement(node) ? node.key : null) ?? `dock-${index}`;
|
|
33
|
-
if (!React.isValidElement(node)) {
|
|
34
|
-
return { key, node, align: "client" };
|
|
35
|
-
}
|
|
36
|
-
return {
|
|
37
|
-
key,
|
|
38
|
-
node,
|
|
39
|
-
align: node.props.align ?? "client",
|
|
40
|
-
width: node.props.width,
|
|
41
|
-
height: node.props.height
|
|
42
|
-
};
|
|
43
|
-
});
|
|
44
|
-
const top = allItems.filter((item) => item.align === "top");
|
|
45
|
-
const bottom = allItems.filter((item) => item.align === "bottom");
|
|
46
|
-
const left = allItems.filter((item) => item.align === "left");
|
|
47
|
-
const right = allItems.filter((item) => item.align === "right");
|
|
48
|
-
const client = allItems.filter((item) => item.align === "client");
|
|
49
|
-
const gapCss = toCssSpace(gap);
|
|
50
|
-
const dockGapStyle = gapCss !== undefined ? { gap: gapCss } : undefined;
|
|
51
|
-
return (_jsxs("div", { className: cn("flex h-full w-full min-h-0 min-w-0 flex-col", className), style: {
|
|
52
|
-
...style,
|
|
53
|
-
padding: toCssSpace(padding),
|
|
54
|
-
...(dockGapStyle ?? null)
|
|
55
|
-
}, ...rest, children: [top.map((item, index) => {
|
|
56
|
-
const heightCss = toCssPercent(item.height);
|
|
57
|
-
return cloneWithLayout(item.node, item.key ?? `top-${index}`, {
|
|
58
|
-
width: "100%",
|
|
59
|
-
...(heightCss !== undefined
|
|
60
|
-
? { height: heightCss, flex: `0 0 ${heightCss}` }
|
|
61
|
-
: { flex: "0 0 auto" })
|
|
62
|
-
}, "w-full");
|
|
63
|
-
}), _jsxs("div", { className: "flex flex-1 min-h-0 min-w-0", style: dockGapStyle, children: [left.map((item, index) => {
|
|
64
|
-
const widthCss = toCssPercent(item.width);
|
|
65
|
-
return cloneWithLayout(item.node, item.key ?? `left-${index}`, {
|
|
66
|
-
height: "100%",
|
|
67
|
-
...(widthCss !== undefined
|
|
68
|
-
? { width: widthCss, flex: `0 0 ${widthCss}` }
|
|
69
|
-
: { flex: "0 0 auto" })
|
|
70
|
-
}, "h-full min-h-0");
|
|
71
|
-
}), _jsx("div", { className: "flex flex-1 min-h-0 min-w-0", style: dockGapStyle, children: client.map((item, index) => (_jsx("div", { className: "flex-1 min-h-0 min-w-0", children: cloneWithLayout(item.node, item.key ?? `client-inner-${index}`, {
|
|
72
|
-
width: "100%",
|
|
73
|
-
height: "100%"
|
|
74
|
-
}, "h-full w-full") }, item.key ?? `client-${index}`))) }), right.map((item, index) => {
|
|
75
|
-
const widthCss = toCssPercent(item.width);
|
|
76
|
-
return cloneWithLayout(item.node, item.key ?? `right-${index}`, {
|
|
77
|
-
height: "100%",
|
|
78
|
-
...(widthCss !== undefined
|
|
79
|
-
? { width: widthCss, flex: `0 0 ${widthCss}` }
|
|
80
|
-
: { flex: "0 0 auto" })
|
|
81
|
-
}, "h-full min-h-0");
|
|
82
|
-
})] }), bottom.map((item, index) => {
|
|
83
|
-
const heightCss = toCssPercent(item.height);
|
|
84
|
-
return cloneWithLayout(item.node, item.key ?? `bottom-${index}`, {
|
|
85
|
-
width: "100%",
|
|
86
|
-
...(heightCss !== undefined
|
|
87
|
-
? { height: heightCss, flex: `0 0 ${heightCss}` }
|
|
88
|
-
: { flex: "0 0 auto" })
|
|
89
|
-
}, "w-full");
|
|
90
|
-
})] }));
|
|
91
|
-
}
|
|
92
|
-
SgMainPanel.displayName = "SgMainPanel";
|