@net-advantage/nabs-ui-layout 0.69.0 → 0.71.0
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.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
export declare function hasLayoutSlotContent(value: unknown): boolean;
|
|
3
|
+
export declare function buildLayoutClassName(className?: string): string;
|
|
4
|
+
export declare function buildLayoutBodyClassName({ hasLeftSidePanel, hasRightSidePanel, }: {
|
|
5
|
+
hasLeftSidePanel: boolean;
|
|
6
|
+
hasRightSidePanel: boolean;
|
|
7
|
+
}): string;
|
|
8
|
+
export declare function buildLayoutStyle({ style, normalizedLeftPanelWidth, normalizedRightPanelWidth, }: {
|
|
9
|
+
style?: CSSProperties;
|
|
10
|
+
normalizedLeftPanelWidth?: string;
|
|
11
|
+
normalizedRightPanelWidth?: string;
|
|
12
|
+
}): CSSProperties;
|
|
13
|
+
export declare function toLayoutStateLabel({ hasHeader, hasFooter, hasLeftSidePanel, hasRightSidePanel, }: {
|
|
14
|
+
hasHeader: boolean;
|
|
15
|
+
hasFooter: boolean;
|
|
16
|
+
hasLeftSidePanel: boolean;
|
|
17
|
+
hasRightSidePanel: boolean;
|
|
18
|
+
}): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/nabs-ui-layout.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime");function t(e){if(e==null)return;if(typeof e==`number`)return`${e}px`;let t=e.trim();return t.length>0?t:void 0}function n({
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime");function t(e){if(e==null)return;if(typeof e==`number`)return`${e}px`;let t=e.trim();return t.length>0?t:void 0}function n(e){return e!=null&&e!==!1}function r(e){return[`nabs-ui-layout`,e??``].filter(Boolean).join(` `)}function i({hasLeftSidePanel:e,hasRightSidePanel:t}){return[`nabs-ui-layout__body`,e&&t?`nabs-ui-layout__body--with-both-panels`:``,e&&!t?`nabs-ui-layout__body--with-left-panel`:``,!e&&t?`nabs-ui-layout__body--with-right-panel`:``].filter(Boolean).join(` `)}function a({style:e,normalizedLeftPanelWidth:t,normalizedRightPanelWidth:n}){return{...e??{},...t?{"--nabs-ui-layout-left-panel-width":t}:{},...n?{"--nabs-ui-layout-right-panel-width":n}:{}}}function o({as:t=`div`,className:n=``,children:r,...i}){return(0,e.jsx)(t,{className:n,...i,children:r})}function s({header:s,footer:c,leftSidePanel:l,rightSidePanel:u,leftSidePanelWidth:d,rightSidePanelWidth:f,children:p,className:m=``,headerClassName:h=``,footerClassName:g=``,leftSidePanelClassName:_=``,rightSidePanelClassName:v=``,contentClassName:y=``,style:b,...x}){let S=n(s),C=n(c),w=n(l),T=n(u),E=i({hasLeftSidePanel:w,hasRightSidePanel:T});return(0,e.jsxs)(`div`,{className:r(m),style:a({style:b,normalizedLeftPanelWidth:t(d),normalizedRightPanelWidth:t(f)}),...x,children:[S?(0,e.jsx)(o,{as:`header`,className:`nabs-ui-layout__headerWrapper`,children:(0,e.jsx)(`div`,{className:[`nabs-ui-layout__header`,h].filter(Boolean).join(` `),children:s})}):null,(0,e.jsxs)(`div`,{className:E,children:[w?(0,e.jsx)(o,{as:`aside`,className:[`nabs-ui-layout__panel`,`nabs-ui-layout__panel--left`,_].filter(Boolean).join(` `),children:l}):null,(0,e.jsx)(o,{as:`section`,className:[`nabs-ui-layout__content`,y].filter(Boolean).join(` `),children:p}),T?(0,e.jsx)(o,{as:`aside`,className:[`nabs-ui-layout__panel`,`nabs-ui-layout__panel--right`,v].filter(Boolean).join(` `),children:u}):null]}),C?(0,e.jsx)(o,{as:`footer`,className:`nabs-ui-layout__footerWrapper`,children:(0,e.jsx)(`div`,{className:[`nabs-ui-layout__footer`,g].filter(Boolean).join(` `),children:c})}):null]})}exports.Layout=s;
|
package/dist/nabs-ui-layout.js
CHANGED
|
@@ -1,80 +1,103 @@
|
|
|
1
1
|
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
-
//#region src/
|
|
2
|
+
//#region src/layout.model.ts
|
|
3
3
|
function n(e) {
|
|
4
4
|
if (e == null) return;
|
|
5
5
|
if (typeof e == "number") return `${e}px`;
|
|
6
6
|
let t = e.trim();
|
|
7
7
|
return t.length > 0 ? t : void 0;
|
|
8
8
|
}
|
|
9
|
-
|
|
9
|
+
//#endregion
|
|
10
|
+
//#region src/layout.view-model.ts
|
|
11
|
+
function r(e) {
|
|
12
|
+
return e != null && e !== !1;
|
|
13
|
+
}
|
|
14
|
+
function i(e) {
|
|
15
|
+
return ["nabs-ui-layout", e ?? ""].filter(Boolean).join(" ");
|
|
16
|
+
}
|
|
17
|
+
function a({ hasLeftSidePanel: e, hasRightSidePanel: t }) {
|
|
18
|
+
return [
|
|
19
|
+
"nabs-ui-layout__body",
|
|
20
|
+
e && t ? "nabs-ui-layout__body--with-both-panels" : "",
|
|
21
|
+
e && !t ? "nabs-ui-layout__body--with-left-panel" : "",
|
|
22
|
+
!e && t ? "nabs-ui-layout__body--with-right-panel" : ""
|
|
23
|
+
].filter(Boolean).join(" ");
|
|
24
|
+
}
|
|
25
|
+
function o({ style: e, normalizedLeftPanelWidth: t, normalizedRightPanelWidth: n }) {
|
|
26
|
+
return {
|
|
27
|
+
...e ?? {},
|
|
28
|
+
...t ? { "--nabs-ui-layout-left-panel-width": t } : {},
|
|
29
|
+
...n ? { "--nabs-ui-layout-right-panel-width": n } : {}
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
//#endregion
|
|
33
|
+
//#region src/Layout.tsx
|
|
34
|
+
function s({ as: t = "div", className: n = "", children: r, ...i }) {
|
|
10
35
|
return /* @__PURE__ */ e(t, {
|
|
11
36
|
className: n,
|
|
12
37
|
...i,
|
|
13
38
|
children: r
|
|
14
39
|
});
|
|
15
40
|
}
|
|
16
|
-
function
|
|
17
|
-
let
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
!x && S ? "nabs-ui-layout__body--with-right-panel" : ""
|
|
22
|
-
].filter(Boolean).join(" "), w = ["nabs-ui-layout", d].filter(Boolean).join(" "), T = n(c), E = n(l);
|
|
41
|
+
function c({ header: c, footer: l, leftSidePanel: u, rightSidePanel: d, leftSidePanelWidth: f, rightSidePanelWidth: p, children: m, className: h = "", headerClassName: g = "", footerClassName: _ = "", leftSidePanelClassName: v = "", rightSidePanelClassName: y = "", contentClassName: b = "", style: x, ...S }) {
|
|
42
|
+
let C = r(c), w = r(l), T = r(u), E = r(d), D = a({
|
|
43
|
+
hasLeftSidePanel: T,
|
|
44
|
+
hasRightSidePanel: E
|
|
45
|
+
});
|
|
23
46
|
return /* @__PURE__ */ t("div", {
|
|
24
|
-
className:
|
|
25
|
-
style: {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
...
|
|
47
|
+
className: i(h),
|
|
48
|
+
style: o({
|
|
49
|
+
style: x,
|
|
50
|
+
normalizedLeftPanelWidth: n(f),
|
|
51
|
+
normalizedRightPanelWidth: n(p)
|
|
52
|
+
}),
|
|
53
|
+
...S,
|
|
31
54
|
children: [
|
|
32
|
-
|
|
55
|
+
C ? /* @__PURE__ */ e(s, {
|
|
33
56
|
as: "header",
|
|
34
57
|
className: "nabs-ui-layout__headerWrapper",
|
|
35
58
|
children: /* @__PURE__ */ e("div", {
|
|
36
|
-
className: ["nabs-ui-layout__header",
|
|
37
|
-
children:
|
|
59
|
+
className: ["nabs-ui-layout__header", g].filter(Boolean).join(" "),
|
|
60
|
+
children: c
|
|
38
61
|
})
|
|
39
62
|
}) : null,
|
|
40
63
|
/* @__PURE__ */ t("div", {
|
|
41
|
-
className:
|
|
64
|
+
className: D,
|
|
42
65
|
children: [
|
|
43
|
-
|
|
66
|
+
T ? /* @__PURE__ */ e(s, {
|
|
44
67
|
as: "aside",
|
|
45
68
|
className: [
|
|
46
69
|
"nabs-ui-layout__panel",
|
|
47
70
|
"nabs-ui-layout__panel--left",
|
|
48
|
-
|
|
71
|
+
v
|
|
49
72
|
].filter(Boolean).join(" "),
|
|
50
|
-
children:
|
|
73
|
+
children: u
|
|
51
74
|
}) : null,
|
|
52
|
-
/* @__PURE__ */ e(
|
|
75
|
+
/* @__PURE__ */ e(s, {
|
|
53
76
|
as: "section",
|
|
54
|
-
className: ["nabs-ui-layout__content",
|
|
55
|
-
children:
|
|
77
|
+
className: ["nabs-ui-layout__content", b].filter(Boolean).join(" "),
|
|
78
|
+
children: m
|
|
56
79
|
}),
|
|
57
|
-
|
|
80
|
+
E ? /* @__PURE__ */ e(s, {
|
|
58
81
|
as: "aside",
|
|
59
82
|
className: [
|
|
60
83
|
"nabs-ui-layout__panel",
|
|
61
84
|
"nabs-ui-layout__panel--right",
|
|
62
|
-
|
|
85
|
+
y
|
|
63
86
|
].filter(Boolean).join(" "),
|
|
64
|
-
children:
|
|
87
|
+
children: d
|
|
65
88
|
}) : null
|
|
66
89
|
]
|
|
67
90
|
}),
|
|
68
|
-
|
|
91
|
+
w ? /* @__PURE__ */ e(s, {
|
|
69
92
|
as: "footer",
|
|
70
93
|
className: "nabs-ui-layout__footerWrapper",
|
|
71
94
|
children: /* @__PURE__ */ e("div", {
|
|
72
|
-
className: ["nabs-ui-layout__footer",
|
|
73
|
-
children:
|
|
95
|
+
className: ["nabs-ui-layout__footer", _].filter(Boolean).join(" "),
|
|
96
|
+
children: l
|
|
74
97
|
})
|
|
75
98
|
}) : null
|
|
76
99
|
]
|
|
77
100
|
});
|
|
78
101
|
}
|
|
79
102
|
//#endregion
|
|
80
|
-
export {
|
|
103
|
+
export { c as Layout };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@net-advantage/nabs-ui-layout",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.71.0",
|
|
4
4
|
"description": "Reusable React layout control for the Nabs UI library.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/nabs-ui-layout.cjs",
|
|
@@ -25,11 +25,16 @@
|
|
|
25
25
|
"@types/react": "^19.0.0",
|
|
26
26
|
"@types/react-dom": "^19.0.0",
|
|
27
27
|
"@vitejs/plugin-react": "^6.0.1",
|
|
28
|
+
"@vitest/coverage-v8": "^3.2.4",
|
|
28
29
|
"react-dom": "^19.2.6",
|
|
29
|
-
"vite": "^8.0.12"
|
|
30
|
+
"vite": "^8.0.12",
|
|
31
|
+
"vitest": "^3.2.4"
|
|
30
32
|
},
|
|
31
33
|
"scripts": {
|
|
32
34
|
"build": "vite build",
|
|
33
|
-
"dev": "vite"
|
|
35
|
+
"dev": "vite",
|
|
36
|
+
"test:unit": "vitest run",
|
|
37
|
+
"test:unit:watch": "vitest",
|
|
38
|
+
"test:unit:coverage": "vitest run --coverage --coverage.reporter=html --coverage.reporter=json-summary --coverage.reporter=text-summary"
|
|
34
39
|
}
|
|
35
40
|
}
|