@owp/core 2.5.3 → 2.5.4
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/_virtual/index11.js +2 -2
- package/dist/_virtual/index13.js +2 -2
- package/dist/_virtual/index14.js +2 -2
- package/dist/_virtual/index15.js +2 -2
- package/dist/components/OwpMrtTable/OwpMrtTable.js +250 -258
- package/dist/components/OwpMrtTable/OwpMrtTable.js.map +1 -1
- package/dist/components/OwpSnackbarContent/OwpSnackbarContent.js +166 -0
- package/dist/components/OwpSnackbarContent/OwpSnackbarContent.js.map +1 -0
- package/dist/components/OwpTable/OwpDataTable.js +316 -288
- package/dist/components/OwpTable/OwpDataTable.js.map +1 -1
- package/dist/components/OwpTable/OwpFieldTable.js +102 -58
- package/dist/components/OwpTable/OwpFieldTable.js.map +1 -1
- package/dist/components/OwpTable/OwpTable.js +163 -164
- package/dist/components/OwpTable/OwpTable.js.map +1 -1
- package/dist/components/OwpTable/internal/treeGridTableStyle.js +77 -0
- package/dist/components/OwpTable/internal/treeGridTableStyle.js.map +1 -0
- package/dist/components/OwpTreeGrid/OwpTreeGrid.js +197 -252
- package/dist/components/OwpTreeGrid/OwpTreeGrid.js.map +1 -1
- package/dist/components/OwpTreeGrid/internal/treeGridRuntime.js +172 -131
- package/dist/components/OwpTreeGrid/internal/treeGridRuntime.js.map +1 -1
- package/dist/components/OwpTreeGrid/internal/treeGridTheme.js +462 -0
- package/dist/components/OwpTreeGrid/internal/treeGridTheme.js.map +1 -0
- package/dist/configs/defaultConfig.js +67 -44
- package/dist/configs/defaultConfig.js.map +1 -1
- package/dist/constants/gridTheme.js +60 -10
- package/dist/constants/gridTheme.js.map +1 -1
- package/dist/constants/tableTheme.js +16 -0
- package/dist/constants/tableTheme.js.map +1 -0
- package/dist/constants/treeGrid.js +44 -26
- package/dist/constants/treeGrid.js.map +1 -1
- package/dist/constants.js +21 -20
- package/dist/contexts/OwpUiProvider.js +59 -38
- package/dist/contexts/OwpUiProvider.js.map +1 -1
- package/dist/index.js +111 -110
- package/dist/layout/components/toolbar/ToolbarLayout.js +5 -4
- package/dist/layout/components/toolbar/ToolbarLayout.js.map +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/CODE128/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/CODE39/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/CODE93/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/EAN_UPC/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/GenericBarcode/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/ITF/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/MSI/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/codabar/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/pharmacode/index.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/renderers/index.js +1 -1
- package/dist/types/components/OwpSnackbarContent/OwpSnackbarContent.d.ts +2 -0
- package/dist/types/components/OwpTable/OwpTable.d.ts +3 -1
- package/dist/types/components/OwpTable/internal/treeGridTableStyle.d.ts +105 -0
- package/dist/types/components/OwpTreeGrid/internal/treeGridRuntime.d.ts +5 -1
- package/dist/types/components/OwpTreeGrid/internal/treeGridTheme.d.ts +20 -0
- package/dist/types/configs/defaultConfig.d.ts +22 -0
- package/dist/types/constants/gridTheme.d.ts +58 -0
- package/dist/types/constants/tableTheme.d.ts +18 -0
- package/dist/types/constants/treeGrid.d.ts +5 -0
- package/dist/types/types/OwpGridThemeTypes.d.ts +34 -0
- package/dist/types/types/OwpSettingsTypes.d.ts +9 -0
- package/dist/types/types/OwpTableThemeTypes.d.ts +16 -0
- package/dist/types/types/index.d.ts +3 -2
- package/dist/types/utils/treeGridUtil.d.ts +1 -0
- package/dist/utils/exceljsBrowser.js +45 -48
- package/dist/utils/exceljsBrowser.js.map +1 -1
- package/dist/utils/treeGridUtil.js +66 -66
- package/dist/utils/treeGridUtil.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,233 +1,232 @@
|
|
|
1
1
|
var L = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
import { jsxs as
|
|
4
|
-
import { resolveOwpGridTheme as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import O from "@
|
|
2
|
+
var d = (o, e) => L(o, "name", { value: e, configurable: !0 });
|
|
3
|
+
import { jsxs as c, jsx as m, Fragment as S } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
|
|
4
|
+
import { resolveOwpGridTheme as y } from "../../constants/gridTheme.js";
|
|
5
|
+
import { resolveOwpTableTheme as B } from "../../constants/tableTheme.js";
|
|
6
|
+
import { getTreeGridFontFaceStyles as M } from "../../constants/treeGrid.js";
|
|
7
|
+
import { useGetCurrentSettings as G } from "../../hooks/useOwpSettings.js";
|
|
8
|
+
import { Typography as _, styled as v, Divider as z } from "@mui/material";
|
|
9
|
+
import { clsx as O } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
|
|
10
|
+
import A from "@mui/material/GlobalStyles";
|
|
10
11
|
import D from "@mui/material/Paper";
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import { useMemo as
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
|
|
12
|
+
import j from "@mui/material/Table";
|
|
13
|
+
import I from "@mui/material/TableBody";
|
|
14
|
+
import g from "@mui/material/TableCell";
|
|
15
|
+
import W from "@mui/material/TableContainer";
|
|
16
|
+
import F from "@mui/material/TableHead";
|
|
17
|
+
import H from "@mui/material/TableRow";
|
|
18
|
+
import { useMemo as T } from "react";
|
|
19
|
+
import { getTreeGridContainerSx as K, getTreeGridBodyRowSx as N, TREEGRID_TABLE_BODY_BORDER_COLOR as Y, getTreeGridBodyCellSx as q, TREEGRID_TABLE_HEADER_BORDER_COLOR as J, getTreeGridHeaderCellSx as Q, getTreeGridCellBaseSx as V } from "./internal/treeGridTableStyle.js";
|
|
20
|
+
import { isNumber as X } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/predicate/isNumber.js";
|
|
21
|
+
import { isArray as u } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/predicate/isArray.js";
|
|
22
|
+
import { isEmpty as Z } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/predicate/isEmpty.js";
|
|
23
|
+
const R = /* @__PURE__ */ d((o) => o ? Object.keys(o).filter((e) => !e.includes("Span")) : [], "getTableColumnKeys"), w = /* @__PURE__ */ d((o, e) => o[`${e}Sx`] ?? {}, "getTableCellSx"), x = /* @__PURE__ */ d((o, e, r) => o[`${e}${r}`] ?? void 0, "getTableCellSpan"), k = /* @__PURE__ */ d((...o) => o.reduce((e, r) => r ? [...e, ...u(r) ? r : [r]] : e, []), "mergeSx"), P = {
|
|
22
24
|
border: 0,
|
|
23
25
|
borderRadius: 0,
|
|
24
26
|
overflow: "visible"
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
/* @__PURE__ */ d(G, {}),
|
|
41
|
-
/* @__PURE__ */ f(E, { className: "w-full py-8 pr-12", align: "right", children: [
|
|
27
|
+
}, $ = {
|
|
28
|
+
header: {
|
|
29
|
+
backgroundColor: "",
|
|
30
|
+
color: "inherit",
|
|
31
|
+
fontSize: "1.7rem",
|
|
32
|
+
fontWeight: 600
|
|
33
|
+
},
|
|
34
|
+
cell: {
|
|
35
|
+
fontSize: "1.7rem"
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
function U({ totalCount: o }) {
|
|
39
|
+
return /* @__PURE__ */ c(S, { children: [
|
|
40
|
+
/* @__PURE__ */ m(z, {}),
|
|
41
|
+
/* @__PURE__ */ c(_, { className: "w-full py-8 pr-12", align: "right", children: [
|
|
42
42
|
"전체: ",
|
|
43
|
-
|
|
43
|
+
X(o) ? o.toLocaleString() : 0,
|
|
44
44
|
" 건"
|
|
45
45
|
] })
|
|
46
46
|
] });
|
|
47
47
|
}
|
|
48
|
-
|
|
49
|
-
const
|
|
48
|
+
d(U, "OwpTableTotalCount");
|
|
49
|
+
const ee = /* @__PURE__ */ d(({
|
|
50
50
|
canBodyFullHeight: o,
|
|
51
51
|
canUseTreeGridStyle: e,
|
|
52
52
|
children: r,
|
|
53
|
-
className:
|
|
54
|
-
containerProps:
|
|
55
|
-
footerSlot:
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
className: b,
|
|
54
|
+
containerProps: l,
|
|
55
|
+
footerSlot: a,
|
|
56
|
+
tableTheme: i,
|
|
57
|
+
tableLayout: n,
|
|
58
|
+
...f
|
|
58
59
|
}) => {
|
|
59
|
-
const
|
|
60
|
+
const t = G(), p = T(
|
|
61
|
+
() => {
|
|
62
|
+
var s, h;
|
|
63
|
+
return y((h = (s = t == null ? void 0 : t.theme) == null ? void 0 : s.main) == null ? void 0 : h.grid);
|
|
64
|
+
},
|
|
65
|
+
[t]
|
|
66
|
+
), E = T(
|
|
60
67
|
() => {
|
|
61
|
-
var
|
|
62
|
-
return
|
|
68
|
+
var s, h;
|
|
69
|
+
return i ?? B((h = (s = t == null ? void 0 : t.theme) == null ? void 0 : s.main) == null ? void 0 : h.table, $);
|
|
63
70
|
},
|
|
64
|
-
[
|
|
71
|
+
[t, i]
|
|
65
72
|
);
|
|
66
|
-
return /* @__PURE__ */
|
|
67
|
-
e && /* @__PURE__ */
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
|
|
73
|
+
return /* @__PURE__ */ c(S, { children: [
|
|
74
|
+
e && /* @__PURE__ */ m(A, { styles: M() }),
|
|
75
|
+
/* @__PURE__ */ c(
|
|
76
|
+
W,
|
|
70
77
|
{
|
|
71
78
|
component: D,
|
|
72
79
|
variant: "outlined",
|
|
73
|
-
...
|
|
74
|
-
sx:
|
|
75
|
-
e &&
|
|
80
|
+
...l,
|
|
81
|
+
sx: k(
|
|
82
|
+
e && P,
|
|
83
|
+
e && K(p),
|
|
76
84
|
o && { height: "100%" },
|
|
77
|
-
|
|
85
|
+
l == null ? void 0 : l.sx
|
|
78
86
|
),
|
|
79
87
|
children: [
|
|
80
|
-
/* @__PURE__ */
|
|
81
|
-
|
|
88
|
+
/* @__PURE__ */ m(
|
|
89
|
+
oe,
|
|
82
90
|
{
|
|
83
|
-
...
|
|
91
|
+
...f,
|
|
84
92
|
canBodyFullHeight: o,
|
|
85
93
|
canUseTreeGridStyle: e,
|
|
86
|
-
|
|
87
|
-
|
|
94
|
+
tableTheme: E,
|
|
95
|
+
treeGridTheme: p,
|
|
96
|
+
className: O(
|
|
88
97
|
o && "h-full",
|
|
89
|
-
|
|
90
|
-
|
|
98
|
+
n === "fixed" ? "table-fixed" : n === "auto" ? "table-auto" : "",
|
|
99
|
+
b
|
|
91
100
|
),
|
|
92
101
|
children: r
|
|
93
102
|
}
|
|
94
103
|
),
|
|
95
|
-
|
|
104
|
+
a
|
|
96
105
|
]
|
|
97
106
|
}
|
|
98
107
|
)
|
|
99
108
|
] });
|
|
100
|
-
}, "StyledTable"),
|
|
101
|
-
shouldForwardProp: /* @__PURE__ */
|
|
102
|
-
})(
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
},
|
|
108
|
-
...e && {
|
|
109
|
-
"& .MuiTableBody-root": {
|
|
109
|
+
}, "StyledTable"), oe = v(j, {
|
|
110
|
+
shouldForwardProp: /* @__PURE__ */ d((o) => o !== "canBodyFullHeight" && o !== "canUseTreeGridStyle" && o !== "tableTheme" && o !== "treeGridTheme", "shouldForwardProp")
|
|
111
|
+
})(
|
|
112
|
+
({ theme: o, canBodyFullHeight: e, canUseTreeGridStyle: r, tableTheme: b, treeGridTheme: l }) => {
|
|
113
|
+
const a = l ?? y(), i = b ?? $;
|
|
114
|
+
return {
|
|
115
|
+
...e && {
|
|
110
116
|
height: "100%"
|
|
111
117
|
},
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
"& th": r ? {
|
|
130
|
-
...F(
|
|
131
|
-
t.header.fontSize,
|
|
132
|
-
t.header.fontWeight
|
|
133
|
-
),
|
|
134
|
-
backgroundColor: t.header.backgroundColor,
|
|
135
|
-
borderTop: "1px solid #6F7F94",
|
|
136
|
-
borderBottom: "1px solid #6F7F94",
|
|
137
|
-
borderLeft: 0,
|
|
138
|
-
borderRight: "1px solid #6F7F94",
|
|
139
|
-
color: t.header.color,
|
|
140
|
-
height: t.header.height,
|
|
141
|
-
minHeight: t.header.height,
|
|
142
|
-
padding: "7px 2px 6px 10px",
|
|
143
|
-
"&:first-of-type": {
|
|
144
|
-
borderLeft: "1px solid #6F7F94"
|
|
145
|
-
}
|
|
146
|
-
} : {
|
|
147
|
-
backgroundColor: o.palette.grey[200],
|
|
148
|
-
fontWeight: 600
|
|
149
|
-
},
|
|
150
|
-
"& td": r ? {
|
|
151
|
-
borderBottom: "1px solid #CDD8E4",
|
|
152
|
-
borderLeft: 0,
|
|
153
|
-
borderRight: "1px solid #CDD8E4",
|
|
154
|
-
color: "#111112",
|
|
155
|
-
fontSize: t.cell.fontSize,
|
|
156
|
-
padding: "7px 10px 6px",
|
|
157
|
-
"&:first-of-type": {
|
|
158
|
-
borderLeft: "1px solid #CDD8E4"
|
|
159
|
-
}
|
|
160
|
-
} : {},
|
|
161
|
-
...r && {
|
|
162
|
-
"& tbody > tr:first-of-type > th:first-of-type": {
|
|
163
|
-
borderTopLeftRadius: "inherit"
|
|
118
|
+
...e && {
|
|
119
|
+
"& .MuiTableBody-root": {
|
|
120
|
+
height: "100%"
|
|
121
|
+
},
|
|
122
|
+
"& .MuiTableBody-root > .MuiTableRow-root": {
|
|
123
|
+
height: "100%"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
"& .MuiTableCell-root": r ? {
|
|
127
|
+
...V(a)
|
|
128
|
+
} : {
|
|
129
|
+
fontSize: i.cell.fontSize,
|
|
130
|
+
padding: "7px 10px",
|
|
131
|
+
borderLeft: "none",
|
|
132
|
+
borderRight: "none"
|
|
164
133
|
},
|
|
165
|
-
|
|
166
|
-
|
|
134
|
+
...!r && {
|
|
135
|
+
"& .MuiTableRow-root > .MuiTableCell-root + .MuiTableCell-root": {
|
|
136
|
+
borderLeft: `1px solid ${o.palette.divider}`
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
"& th": r ? {
|
|
140
|
+
...Q(a),
|
|
141
|
+
"&:first-of-type": {
|
|
142
|
+
borderLeft: `1px solid ${J}`
|
|
143
|
+
}
|
|
144
|
+
} : {
|
|
145
|
+
backgroundColor: i.header.backgroundColor || o.palette.grey[200],
|
|
146
|
+
color: i.header.color,
|
|
147
|
+
fontSize: i.header.fontSize,
|
|
148
|
+
fontWeight: i.header.fontWeight
|
|
149
|
+
},
|
|
150
|
+
"& td": r ? {
|
|
151
|
+
...q(a),
|
|
152
|
+
"&:first-of-type": {
|
|
153
|
+
borderLeft: `1px solid ${Y}`
|
|
154
|
+
}
|
|
155
|
+
} : {},
|
|
156
|
+
...r && {
|
|
157
|
+
"& tbody > .MuiTableRow-root": N(a)
|
|
158
|
+
},
|
|
159
|
+
...r && {
|
|
160
|
+
"& tbody > tr:first-of-type > th:first-of-type": {
|
|
161
|
+
borderTopLeftRadius: "inherit"
|
|
162
|
+
},
|
|
163
|
+
"& tbody > tr:first-of-type > td:last-of-type": {
|
|
164
|
+
borderTopRightRadius: "inherit"
|
|
165
|
+
}
|
|
167
166
|
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
167
|
+
};
|
|
168
|
+
}
|
|
169
|
+
), C = v(H)`
|
|
171
170
|
/* &:last-child th,
|
|
172
171
|
&:last-child td {
|
|
173
172
|
border-bottom: 0;
|
|
174
173
|
} */
|
|
175
174
|
`;
|
|
176
|
-
function
|
|
175
|
+
function Se({
|
|
177
176
|
canTotalCountRow: o = !1,
|
|
178
177
|
headers: e,
|
|
179
178
|
rows: r,
|
|
180
|
-
totalCount:
|
|
181
|
-
...
|
|
179
|
+
totalCount: b,
|
|
180
|
+
...l
|
|
182
181
|
}) {
|
|
183
|
-
const
|
|
184
|
-
() =>
|
|
182
|
+
const a = T(
|
|
183
|
+
() => u(e) ? e : Z(e) ? [] : [e],
|
|
185
184
|
[e]
|
|
186
|
-
),
|
|
187
|
-
() =>
|
|
185
|
+
), i = T(
|
|
186
|
+
() => R(u(e) ? e[0] : e),
|
|
188
187
|
[e]
|
|
189
188
|
);
|
|
190
|
-
return /* @__PURE__ */
|
|
191
|
-
|
|
189
|
+
return /* @__PURE__ */ c(
|
|
190
|
+
ee,
|
|
192
191
|
{
|
|
193
|
-
...
|
|
194
|
-
footerSlot: o ? /* @__PURE__ */
|
|
195
|
-
className:
|
|
192
|
+
...l,
|
|
193
|
+
footerSlot: o ? /* @__PURE__ */ m(U, { totalCount: typeof b > "u" ? r.length : b }) : void 0,
|
|
194
|
+
className: O(l.tableLayout && "w-full", l.className),
|
|
196
195
|
children: [
|
|
197
|
-
/* @__PURE__ */
|
|
198
|
-
|
|
196
|
+
/* @__PURE__ */ m(F, { children: a.map((n, f) => /* @__PURE__ */ m(C, { children: R(n).map((t) => /* @__PURE__ */ m(
|
|
197
|
+
g,
|
|
199
198
|
{
|
|
200
199
|
className: "whitespace-pre-wrap",
|
|
201
|
-
sx:
|
|
202
|
-
colSpan:
|
|
203
|
-
rowSpan:
|
|
200
|
+
sx: w(n, t),
|
|
201
|
+
colSpan: x(n, t, "ColSpan"),
|
|
202
|
+
rowSpan: x(n, t, "RowSpan"),
|
|
204
203
|
align: "center",
|
|
205
|
-
children:
|
|
204
|
+
children: n[t]
|
|
206
205
|
},
|
|
207
|
-
`table-header-${
|
|
208
|
-
)) }, `table-header-${
|
|
209
|
-
/* @__PURE__ */
|
|
210
|
-
const
|
|
211
|
-
return /* @__PURE__ */
|
|
212
|
-
|
|
206
|
+
`table-header-${f}-${t}`
|
|
207
|
+
)) }, `table-header-${f}`)) }),
|
|
208
|
+
/* @__PURE__ */ m(I, { children: r.map((n, f) => {
|
|
209
|
+
const t = n;
|
|
210
|
+
return /* @__PURE__ */ m(C, { children: i.map((p) => /* @__PURE__ */ m(
|
|
211
|
+
g,
|
|
213
212
|
{
|
|
214
213
|
className: "whitespace-pre-wrap h-64",
|
|
215
|
-
sx:
|
|
214
|
+
sx: w(t, p),
|
|
216
215
|
align: "center",
|
|
217
|
-
children:
|
|
216
|
+
children: t[p]
|
|
218
217
|
},
|
|
219
|
-
`table-row-cell-${
|
|
220
|
-
)) }, `table-row-${
|
|
218
|
+
`table-row-cell-${f}-${p}`
|
|
219
|
+
)) }, `table-row-${f}`);
|
|
221
220
|
}) })
|
|
222
221
|
]
|
|
223
222
|
}
|
|
224
223
|
);
|
|
225
224
|
}
|
|
226
|
-
|
|
225
|
+
d(Se, "OwpTable");
|
|
227
226
|
export {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
227
|
+
Se as OwpTable,
|
|
228
|
+
U as OwpTableTotalCount,
|
|
229
|
+
ee as StyledTable,
|
|
230
|
+
C as StyledTableRow
|
|
232
231
|
};
|
|
233
232
|
//# sourceMappingURL=OwpTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OwpTable.js","sources":["../../../src/components/OwpTable/OwpTable.tsx"],"sourcesContent":["import {\n resolveOwpGridTheme,\n type OwpResolvedGridThemeConfigType,\n} from '@/constants/gridTheme';\nimport {\n getTreeGridFontFaceStyles,\n TREEGRID_FONT_FAMILY_STACK,\n} from '@/constants/treeGrid';\nimport { useGetCurrentSettings } from '@/hooks/useOwpSettings';\nimport { Divider, styled, Typography, type SxProps, type Theme } from '@mui/material';\nimport clsx from 'clsx';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport Paper from '@mui/material/Paper';\nimport Table, { type TableProps } from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableContainer, { type TableContainerProps } from '@mui/material/TableContainer';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport { isArray, isEmpty, isNumber } from 'es-toolkit/compat';\nimport { type ReactNode, useMemo } from 'react';\n\ntype OwpTableCellValue = string | number;\ntype OwpTableHeaderRow = Record<string, OwpTableCellValue>;\ntype OwpTableRowData = Record<string, unknown>;\n\nconst getTableColumnKeys = (row?: Record<string, unknown>) => {\n if (!row) {\n return [];\n }\n\n return Object.keys(row).filter((keyName) => !keyName.includes('Span'));\n};\n\nconst getTableCellSx = (row: Record<string, unknown>, keyName: string) => {\n return (row[`${keyName}Sx`] as SxProps<Theme>) ?? {};\n};\n\nconst getTableCellSpan = (\n row: Record<string, unknown>,\n keyName: string,\n spanType: 'ColSpan' | 'RowSpan',\n) => {\n return (row[`${keyName}${spanType}`] as number | undefined) ?? undefined;\n};\n\nconst mergeSx = (...styles: Array<SxProps<Theme> | undefined | false>): SxProps<Theme> =>\n styles.reduce<Array<Exclude<SxProps<Theme>, readonly unknown[]>>>((acc, style) => {\n if (!style) {\n return acc;\n }\n\n return [...acc, ...(isArray(style) ? style : [style])];\n }, []) as SxProps<Theme>;\n\nconst treeGridContainerSx = {\n border: 0,\n borderRadius: 0,\n overflow: 'visible',\n} as const;\n\nconst getTreeGridTypographySx = (\n fontSize: number | string,\n fontWeight: number | string = 'normal',\n) => ({\n fontFamily: TREEGRID_FONT_FAMILY_STACK,\n fontSize,\n fontWeight,\n lineHeight: '16px',\n});\n\nconst getTreeGridCellBaseSx = (treeGridTheme: OwpResolvedGridThemeConfigType) => ({\n ...getTreeGridTypographySx(treeGridTheme.cell.fontSize),\n boxSizing: 'border-box',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n verticalAlign: 'middle',\n whiteSpace: 'nowrap',\n});\n\ninterface StyledTableProps extends TableProps {\n canBodyFullHeight?: boolean;\n canUseTreeGridStyle?: boolean;\n containerProps?: TableContainerProps;\n footerSlot?: ReactNode;\n tableLayout?: 'auto' | 'fixed';\n treeGridTheme?: OwpResolvedGridThemeConfigType;\n title?: string;\n children: ReactNode;\n}\n\ntype StyledTableInnerProps = Pick<\n StyledTableProps,\n 'canBodyFullHeight' | 'canUseTreeGridStyle' | 'treeGridTheme'\n>;\n\n/**\n * 총 row 수 표시 영역\n * @param totalCount 전체 row 수\n */\nexport function OwpTableTotalCount({ totalCount }: { totalCount?: number }) {\n return (\n <>\n <Divider />\n <Typography className=\"w-full py-8 pr-12\" align=\"right\">\n 전체: {isNumber(totalCount) ? totalCount.toLocaleString() : 0} 건\n </Typography>\n </>\n );\n}\n\n/**\n * StyledTable 스타일 컴포넌트\n * @param canBodyFullHeight body full height 사용 여부\n * @param canUseTreeGridStyle TreeGrid 스타일 사용 여부\n * @param children 하위 콘텐츠\n * @param containerProps containerProps props\n * @param footerSlot footer 영역\n * @param tableLayout tableLayout 값\n */\nexport const StyledTable = ({\n canBodyFullHeight,\n canUseTreeGridStyle,\n children,\n className,\n containerProps,\n footerSlot,\n tableLayout,\n ...tableProps\n}: StyledTableProps) => {\n const currentSettings = useGetCurrentSettings();\n const treeGridTheme = useMemo(\n () => resolveOwpGridTheme(currentSettings?.theme?.main?.grid),\n [currentSettings],\n );\n\n return (\n <>\n {canUseTreeGridStyle && <GlobalStyles styles={getTreeGridFontFaceStyles()} />}\n <TableContainer\n component={Paper}\n variant=\"outlined\"\n {...containerProps}\n sx={mergeSx(\n canUseTreeGridStyle && treeGridContainerSx,\n canBodyFullHeight && { height: '100%' },\n containerProps?.sx,\n )}\n >\n <StyledTableInner\n {...tableProps}\n canBodyFullHeight={canBodyFullHeight}\n canUseTreeGridStyle={canUseTreeGridStyle}\n treeGridTheme={treeGridTheme}\n className={clsx(\n canBodyFullHeight && 'h-full',\n tableLayout === 'fixed' ? 'table-fixed' : tableLayout === 'auto' ? 'table-auto' : '',\n className,\n )}\n >\n {children}\n </StyledTableInner>\n {footerSlot}\n </TableContainer>\n </>\n );\n};\n\nconst StyledTableInner = styled(Table, {\n shouldForwardProp: (prop) =>\n prop !== 'canBodyFullHeight' && prop !== 'canUseTreeGridStyle' && prop !== 'treeGridTheme',\n})<StyledTableInnerProps>(({ theme, canBodyFullHeight, canUseTreeGridStyle, treeGridTheme }) => {\n const resolvedTreeGridTheme = treeGridTheme ?? resolveOwpGridTheme();\n\n return {\n ...(canBodyFullHeight && {\n height: '100%',\n }),\n ...(canBodyFullHeight && {\n '& .MuiTableBody-root': {\n height: '100%',\n },\n '& .MuiTableBody-root > .MuiTableRow-root': {\n height: '100%',\n },\n }),\n '& .MuiTableCell-root': canUseTreeGridStyle\n ? {\n ...getTreeGridCellBaseSx(resolvedTreeGridTheme),\n }\n : {\n fontSize: '1.7rem',\n padding: '7px 10px',\n borderLeft: 'none',\n borderRight: 'none',\n },\n ...(!canUseTreeGridStyle && {\n '& .MuiTableRow-root > .MuiTableCell-root + .MuiTableCell-root': {\n borderLeft: `1px solid ${theme.palette.divider}`,\n },\n }),\n '& th': canUseTreeGridStyle\n ? {\n ...getTreeGridTypographySx(\n resolvedTreeGridTheme.header.fontSize,\n resolvedTreeGridTheme.header.fontWeight,\n ),\n backgroundColor: resolvedTreeGridTheme.header.backgroundColor,\n borderTop: '1px solid #6F7F94',\n borderBottom: '1px solid #6F7F94',\n borderLeft: 0,\n borderRight: '1px solid #6F7F94',\n color: resolvedTreeGridTheme.header.color,\n height: resolvedTreeGridTheme.header.height,\n minHeight: resolvedTreeGridTheme.header.height,\n padding: '7px 2px 6px 10px',\n '&:first-of-type': {\n borderLeft: '1px solid #6F7F94',\n },\n }\n : {\n backgroundColor: theme.palette.grey[200],\n fontWeight: 600,\n },\n '& td': canUseTreeGridStyle\n ? {\n borderBottom: '1px solid #CDD8E4',\n borderLeft: 0,\n borderRight: '1px solid #CDD8E4',\n color: '#111112',\n fontSize: resolvedTreeGridTheme.cell.fontSize,\n padding: '7px 10px 6px',\n '&:first-of-type': {\n borderLeft: '1px solid #CDD8E4',\n },\n }\n : {},\n ...(canUseTreeGridStyle && {\n '& tbody > tr:first-of-type > th:first-of-type': {\n borderTopLeftRadius: 'inherit',\n },\n '& tbody > tr:first-of-type > td:last-of-type': {\n borderTopRightRadius: 'inherit',\n },\n }),\n };\n});\n\nexport const StyledTableRow = styled(TableRow)`\n /* &:last-child th,\n &:last-child td {\n border-bottom: 0;\n } */\n`;\n\ninterface OwpTableProps<T> extends Omit<StyledTableProps, 'children'> {\n canTotalCountRow?: boolean;\n headers: OwpTableHeaderRow | OwpTableHeaderRow[];\n rows: T[];\n totalCount?: number;\n}\n\n/**\n * OwpTable 컴포넌트\n * @param canTotalCountRow 전체 row 수 표시 여부\n * @param headers headers 값\n * @param rows 행 데이터 목록\n * @param totalCount 전체 row 수\n */\nexport function OwpTable<T>({\n canTotalCountRow = false,\n headers,\n rows,\n totalCount,\n ...restTableProps\n}: OwpTableProps<T>) {\n const resolvedHeaderRows = useMemo(\n () => (isArray(headers) ? headers : isEmpty(headers) ? [] : [headers]),\n [headers],\n );\n const commonKeyListData = useMemo(\n () => getTableColumnKeys(isArray(headers) ? headers[0] : headers),\n [headers],\n );\n\n return (\n <StyledTable\n {...restTableProps}\n footerSlot={\n canTotalCountRow ? (\n <OwpTableTotalCount totalCount={typeof totalCount === 'undefined' ? rows.length : totalCount} />\n ) : undefined\n }\n className={clsx(restTableProps.tableLayout && 'w-full', restTableProps.className)}\n >\n <TableHead>\n {resolvedHeaderRows.map((headerData, index) => (\n <StyledTableRow key={`table-header-${index}`}>\n {getTableColumnKeys(headerData).map((keyName) => (\n <TableCell\n key={`table-header-${index}-${keyName}`}\n className=\"whitespace-pre-wrap\"\n sx={getTableCellSx(headerData, keyName)}\n colSpan={getTableCellSpan(headerData, keyName, 'ColSpan')}\n rowSpan={getTableCellSpan(headerData, keyName, 'RowSpan')}\n align=\"center\"\n >\n {headerData[keyName]}\n </TableCell>\n ))}\n </StyledTableRow>\n ))}\n </TableHead>\n <TableBody>\n {rows.map((row, index) => {\n const currentRow = row as OwpTableRowData;\n\n return (\n <StyledTableRow key={`table-row-${index}`}>\n {commonKeyListData.map((keyName) => (\n <TableCell\n key={`table-row-cell-${index}-${keyName}`}\n className=\"whitespace-pre-wrap h-64\"\n sx={getTableCellSx(currentRow, keyName)}\n align=\"center\"\n >\n {currentRow[keyName] as ReactNode}\n </TableCell>\n ))}\n </StyledTableRow>\n );\n })}\n </TableBody>\n </StyledTable>\n );\n}\n"],"names":["getTableColumnKeys","__name","row","keyName","getTableCellSx","getTableCellSpan","spanType","mergeSx","styles","acc","style","isArray","treeGridContainerSx","getTreeGridTypographySx","fontSize","fontWeight","TREEGRID_FONT_FAMILY_STACK","getTreeGridCellBaseSx","treeGridTheme","OwpTableTotalCount","totalCount","jsxs","Fragment","jsx","Divider","Typography","isNumber","StyledTable","canBodyFullHeight","canUseTreeGridStyle","children","className","containerProps","footerSlot","tableLayout","tableProps","currentSettings","useGetCurrentSettings","useMemo","resolveOwpGridTheme","_b","_a","GlobalStyles","getTreeGridFontFaceStyles","TableContainer","Paper","StyledTableInner","clsx","styled","Table","prop","theme","resolvedTreeGridTheme","StyledTableRow","TableRow","OwpTable","canTotalCountRow","headers","rows","restTableProps","resolvedHeaderRows","isEmpty","commonKeyListData","TableHead","headerData","index","TableCell","TableBody","currentRow"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAqB,gBAAAC,EAAA,CAACC,MACrBA,IAIE,OAAO,KAAKA,CAAG,EAAE,OAAO,CAACC,MAAY,CAACA,EAAQ,SAAS,MAAM,CAAC,IAH5D,CAAA,GAFgB,uBAQrBC,IAAiB,gBAAAH,EAAA,CAACC,GAA8BC,MAC5CD,EAAI,GAAGC,CAAO,IAAI,KAAwB,CAAA,GAD7B,mBAIjBE,IAAmB,gBAAAJ,EAAA,CACvBC,GACAC,GACAG,MAEQJ,EAAI,GAAGC,CAAO,GAAGG,CAAQ,EAAE,KAA4B,QALxC,qBAQnBC,IAAU,gBAAAN,EAAA,IAAIO,MAClBA,EAAO,OAA2D,CAACC,GAAKC,MACjEA,IAIE,CAAC,GAAGD,GAAK,GAAIE,EAAQD,CAAK,IAAIA,IAAQ,CAACA,CAAK,CAAE,IAH5CD,GAIR,EAAE,GAPS,YASVG,IAAsB;AAAA,EAC1B,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AACZ,GAEMC,IAA0B,gBAAAZ,EAAA,CAC9Ba,GACAC,IAA8B,cAC1B;AAAA,EACJ,YAAYC;AAAA,EACZ,UAAAF;AAAA,EACA,YAAAC;AAAA,EACA,YAAY;AACd,IARgC,4BAU1BE,IAAwB,gBAAAhB,EAAA,CAACiB,OAAmD;AAAA,EAChF,GAAGL,EAAwBK,EAAc,KAAK,QAAQ;AAAA,EACtD,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AACd,IAP8B;AA6BvB,SAASC,EAAmB,EAAE,YAAAC,KAAuC;AAC1E,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAQ;AAAA,IACT,gBAAAH,EAACI,GAAA,EAAW,WAAU,qBAAoB,OAAM,SAAQ,UAAA;AAAA,MAAA;AAAA,MACjDC,EAASN,CAAU,IAAIA,EAAW,mBAAmB;AAAA,MAAE;AAAA,IAAA,EAAA,CAC9D;AAAA,EAAA,GACF;AAEJ;AATgBnB,EAAAkB,GAAA;AAoBT,MAAMQ,IAAc,gBAAA1B,EAAA,CAAC;AAAA,EAC1B,mBAAA2B;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAkBC,EAAA,GAClBnB,IAAgBoB;AAAA,IACpB,MAAA;;AAAM,aAAAC,GAAoBC,KAAAC,IAAAL,KAAA,gBAAAA,EAAiB,UAAjB,gBAAAK,EAAwB,SAAxB,gBAAAD,EAA8B,IAAI;AAAA;AAAA,IAC5D,CAACJ,CAAe;AAAA,EAAA;AAGlB,SACE,gBAAAf,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAO,KAAuB,gBAAAN,EAACmB,GAAA,EAAa,QAAQC,EAAA,EAA0B,CAAG;AAAA,IAC3E,gBAAAtB;AAAA,MAACuB;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,QACX,SAAQ;AAAA,QACP,GAAGb;AAAA,QACJ,IAAIzB;AAAA,UACFsB,KAAuBjB;AAAA,UACvBgB,KAAqB,EAAE,QAAQ,OAAA;AAAA,UAC/BI,KAAA,gBAAAA,EAAgB;AAAA,QAAA;AAAA,QAGlB,UAAA;AAAA,UAAA,gBAAAT;AAAA,YAACuB;AAAA,YAAA;AAAA,cACE,GAAGX;AAAA,cACJ,mBAAAP;AAAA,cACA,qBAAAC;AAAA,cACA,eAAAX;AAAA,cACA,WAAW6B;AAAA,gBACTnB,KAAqB;AAAA,gBACrBM,MAAgB,UAAU,gBAAgBA,MAAgB,SAAS,eAAe;AAAA,gBAClFH;AAAA,cAAA;AAAA,cAGD,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,GA9C2B,gBAgDrBa,IAAmBE,EAAOC,GAAO;AAAA,EACrC,mBAAmB,gBAAAhD,EAAA,CAACiD,MAClBA,MAAS,uBAAuBA,MAAS,yBAAyBA,MAAS,iBAD1D;AAErB,CAAC,EAAyB,CAAC,EAAE,OAAAC,GAAO,mBAAAvB,GAAmB,qBAAAC,GAAqB,eAAAX,QAAoB;AAC9F,QAAMkC,IAAwBlC,KAAiBqB,EAAA;AAE/C,SAAO;AAAA,IACL,GAAIX,KAAqB;AAAA,MACvB,QAAQ;AAAA,IAAA;AAAA,IAEV,GAAIA,KAAqB;AAAA,MACvB,wBAAwB;AAAA,QACtB,QAAQ;AAAA,MAAA;AAAA,MAEV,4CAA4C;AAAA,QAC1C,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,wBAAwBC,IACpB;AAAA,MACE,GAAGZ,EAAsBmC,CAAqB;AAAA,IAAA,IAEhD;AAAA,MACE,UAAU;AAAA,MACV,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IAAA;AAAA,IAEnB,GAAI,CAACvB,KAAuB;AAAA,MAC1B,iEAAiE;AAAA,QAC/D,YAAY,aAAasB,EAAM,QAAQ,OAAO;AAAA,MAAA;AAAA,IAChD;AAAA,IAEF,QAAQtB,IACJ;AAAA,MACE,GAAGhB;AAAA,QACDuC,EAAsB,OAAO;AAAA,QAC7BA,EAAsB,OAAO;AAAA,MAAA;AAAA,MAE/B,iBAAiBA,EAAsB,OAAO;AAAA,MAC9C,WAAW;AAAA,MACX,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,OAAOA,EAAsB,OAAO;AAAA,MACpC,QAAQA,EAAsB,OAAO;AAAA,MACrC,WAAWA,EAAsB,OAAO;AAAA,MACxC,SAAS;AAAA,MACT,mBAAmB;AAAA,QACjB,YAAY;AAAA,MAAA;AAAA,IACd,IAEF;AAAA,MACE,iBAAiBD,EAAM,QAAQ,KAAK,GAAG;AAAA,MACvC,YAAY;AAAA,IAAA;AAAA,IAElB,QAAQtB,IACJ;AAAA,MACE,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,OAAO;AAAA,MACP,UAAUuB,EAAsB,KAAK;AAAA,MACrC,SAAS;AAAA,MACT,mBAAmB;AAAA,QACjB,YAAY;AAAA,MAAA;AAAA,IACd,IAEF,CAAA;AAAA,IACJ,GAAIvB,KAAuB;AAAA,MACzB,iDAAiD;AAAA,QAC/C,qBAAqB;AAAA,MAAA;AAAA,MAEvB,gDAAgD;AAAA,QAC9C,sBAAsB;AAAA,MAAA;AAAA,IACxB;AAAA,EACF;AAEJ,CAAC,GAEYwB,IAAiBL,EAAOM,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBtC,SAASC,GAAY;AAAA,EAC1B,kBAAAC,IAAmB;AAAA,EACnB,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAtC;AAAA,EACA,GAAGuC;AACL,GAAqB;AACnB,QAAMC,IAAqBtB;AAAA,IACzB,MAAO3B,EAAQ8C,CAAO,IAAIA,IAAUI,EAAQJ,CAAO,IAAI,KAAK,CAACA,CAAO;AAAA,IACpE,CAACA,CAAO;AAAA,EAAA,GAEJK,IAAoBxB;AAAA,IACxB,MAAMtC,EAAmBW,EAAQ8C,CAAO,IAAIA,EAAQ,CAAC,IAAIA,CAAO;AAAA,IAChE,CAACA,CAAO;AAAA,EAAA;AAGV,SACE,gBAAApC;AAAA,IAACM;AAAA,IAAA;AAAA,MACE,GAAGgC;AAAA,MACJ,YACEH,IACE,gBAAAjC,EAACJ,GAAA,EAAmB,YAAY,OAAOC,IAAe,MAAcsC,EAAK,SAAStC,EAAA,CAAY,IAC5F;AAAA,MAEN,WAAW2B,EAAKY,EAAe,eAAe,UAAUA,EAAe,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAA,gBAAApC,EAACwC,GAAA,EACE,UAAAH,EAAmB,IAAI,CAACI,GAAYC,MACnC,gBAAA1C,EAAC8B,GAAA,EACE,UAAArD,EAAmBgE,CAAU,EAAE,IAAI,CAAC7D,MACnC,gBAAAoB;AAAA,UAAC2C;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,IAAI9D,EAAe4D,GAAY7D,CAAO;AAAA,YACtC,SAASE,EAAiB2D,GAAY7D,GAAS,SAAS;AAAA,YACxD,SAASE,EAAiB2D,GAAY7D,GAAS,SAAS;AAAA,YACxD,OAAM;AAAA,YAEL,YAAWA,CAAO;AAAA,UAAA;AAAA,UAPd,gBAAgB8D,CAAK,IAAI9D,CAAO;AAAA,QAAA,CASxC,EAAA,GAZkB,gBAAgB8D,CAAK,EAa1C,CACD,EAAA,CACH;AAAA,0BACCE,GAAA,EACE,UAAAT,EAAK,IAAI,CAACxD,GAAK+D,MAAU;AACxB,gBAAMG,IAAalE;AAEnB,iBACE,gBAAAqB,EAAC8B,GAAA,EACE,UAAAS,EAAkB,IAAI,CAAC3D,MACtB,gBAAAoB;AAAA,YAAC2C;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,IAAI9D,EAAegE,GAAYjE,CAAO;AAAA,cACtC,OAAM;AAAA,cAEL,YAAWA,CAAO;AAAA,YAAA;AAAA,YALd,kBAAkB8D,CAAK,IAAI9D,CAAO;AAAA,UAAA,CAO1C,KAVkB,aAAa8D,CAAK,EAWvC;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAlEgBhE,EAAAsD,IAAA;"}
|
|
1
|
+
{"version":3,"file":"OwpTable.js","sources":["../../../src/components/OwpTable/OwpTable.tsx"],"sourcesContent":["import {\n resolveOwpGridTheme,\n type OwpResolvedGridThemeConfigType,\n} from '@/constants/gridTheme';\nimport {\n resolveOwpTableTheme,\n type OwpResolvedTableThemeConfigType,\n} from '@/constants/tableTheme';\nimport { getTreeGridFontFaceStyles } from '@/constants/treeGrid';\nimport { useGetCurrentSettings } from '@/hooks/useOwpSettings';\nimport { Divider, styled, Typography, type SxProps, type Theme } from '@mui/material';\nimport clsx from 'clsx';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport Paper from '@mui/material/Paper';\nimport Table, { type TableProps } from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableContainer, { type TableContainerProps } from '@mui/material/TableContainer';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport { isArray, isEmpty, isNumber } from 'es-toolkit/compat';\nimport { type ReactNode, useMemo } from 'react';\nimport {\n getTreeGridBodyCellSx,\n getTreeGridBodyRowSx,\n getTreeGridCellBaseSx,\n getTreeGridContainerSx,\n getTreeGridHeaderCellSx,\n TREEGRID_TABLE_BODY_BORDER_COLOR,\n TREEGRID_TABLE_HEADER_BORDER_COLOR,\n} from './internal/treeGridTableStyle';\n\ntype OwpTableCellValue = string | number;\ntype OwpTableHeaderRow = Record<string, OwpTableCellValue>;\ntype OwpTableRowData = Record<string, unknown>;\n\nconst getTableColumnKeys = (row?: Record<string, unknown>) => {\n if (!row) {\n return [];\n }\n\n return Object.keys(row).filter((keyName) => !keyName.includes('Span'));\n};\n\nconst getTableCellSx = (row: Record<string, unknown>, keyName: string) => {\n return (row[`${keyName}Sx`] as SxProps<Theme>) ?? {};\n};\n\nconst getTableCellSpan = (\n row: Record<string, unknown>,\n keyName: string,\n spanType: 'ColSpan' | 'RowSpan',\n) => {\n return (row[`${keyName}${spanType}`] as number | undefined) ?? undefined;\n};\n\nconst mergeSx = (...styles: Array<SxProps<Theme> | undefined | false>): SxProps<Theme> =>\n styles.reduce<Array<Exclude<SxProps<Theme>, readonly unknown[]>>>((acc, style) => {\n if (!style) {\n return acc;\n }\n\n return [...acc, ...(isArray(style) ? style : [style])];\n }, []) as SxProps<Theme>;\n\nconst treeGridContainerSx = {\n border: 0,\n borderRadius: 0,\n overflow: 'visible',\n} as const;\n\nconst defaultStyledTableTheme = {\n header: {\n backgroundColor: '',\n color: 'inherit',\n fontSize: '1.7rem',\n fontWeight: 600,\n },\n cell: {\n fontSize: '1.7rem',\n },\n} satisfies OwpResolvedTableThemeConfigType;\n\ninterface StyledTableProps extends TableProps {\n canBodyFullHeight?: boolean;\n canUseTreeGridStyle?: boolean;\n containerProps?: TableContainerProps;\n footerSlot?: ReactNode;\n tableTheme?: OwpResolvedTableThemeConfigType;\n tableLayout?: 'auto' | 'fixed';\n treeGridTheme?: OwpResolvedGridThemeConfigType;\n title?: string;\n children: ReactNode;\n}\n\ntype StyledTableInnerProps = Pick<\n StyledTableProps,\n 'canBodyFullHeight' | 'canUseTreeGridStyle' | 'tableTheme' | 'treeGridTheme'\n>;\n\n/**\n * 총 row 수 표시 영역\n * @param totalCount 전체 row 수\n */\nexport function OwpTableTotalCount({ totalCount }: { totalCount?: number }) {\n return (\n <>\n <Divider />\n <Typography className=\"w-full py-8 pr-12\" align=\"right\">\n 전체: {isNumber(totalCount) ? totalCount.toLocaleString() : 0} 건\n </Typography>\n </>\n );\n}\n\n/**\n * StyledTable 스타일 컴포넌트\n * @param canBodyFullHeight body full height 사용 여부\n * @param canUseTreeGridStyle TreeGrid 스타일 사용 여부\n * @param children 하위 콘텐츠\n * @param containerProps containerProps props\n * @param footerSlot footer 영역\n * @param tableLayout tableLayout 값\n */\nexport const StyledTable = ({\n canBodyFullHeight,\n canUseTreeGridStyle,\n children,\n className,\n containerProps,\n footerSlot,\n tableTheme: tableThemeProp,\n tableLayout,\n ...tableProps\n}: StyledTableProps) => {\n const currentSettings = useGetCurrentSettings();\n const treeGridTheme = useMemo(\n () => resolveOwpGridTheme(currentSettings?.theme?.main?.grid),\n [currentSettings],\n );\n const tableTheme = useMemo(\n () =>\n tableThemeProp ??\n resolveOwpTableTheme(currentSettings?.theme?.main?.table, defaultStyledTableTheme),\n [currentSettings, tableThemeProp],\n );\n\n return (\n <>\n {canUseTreeGridStyle && <GlobalStyles styles={getTreeGridFontFaceStyles()} />}\n <TableContainer\n component={Paper}\n variant=\"outlined\"\n {...containerProps}\n sx={mergeSx(\n canUseTreeGridStyle && treeGridContainerSx,\n canUseTreeGridStyle && getTreeGridContainerSx(treeGridTheme),\n canBodyFullHeight && { height: '100%' },\n containerProps?.sx,\n )}\n >\n <StyledTableInner\n {...tableProps}\n canBodyFullHeight={canBodyFullHeight}\n canUseTreeGridStyle={canUseTreeGridStyle}\n tableTheme={tableTheme}\n treeGridTheme={treeGridTheme}\n className={clsx(\n canBodyFullHeight && 'h-full',\n tableLayout === 'fixed' ? 'table-fixed' : tableLayout === 'auto' ? 'table-auto' : '',\n className,\n )}\n >\n {children}\n </StyledTableInner>\n {footerSlot}\n </TableContainer>\n </>\n );\n};\n\nconst StyledTableInner = styled(Table, {\n shouldForwardProp: (prop) =>\n prop !== 'canBodyFullHeight' &&\n prop !== 'canUseTreeGridStyle' &&\n prop !== 'tableTheme' &&\n prop !== 'treeGridTheme',\n})<StyledTableInnerProps>(\n ({ theme, canBodyFullHeight, canUseTreeGridStyle, tableTheme, treeGridTheme }) => {\n const resolvedTreeGridTheme = treeGridTheme ?? resolveOwpGridTheme();\n const resolvedTableTheme = tableTheme ?? defaultStyledTableTheme;\n\n return {\n ...(canBodyFullHeight && {\n height: '100%',\n }),\n ...(canBodyFullHeight && {\n '& .MuiTableBody-root': {\n height: '100%',\n },\n '& .MuiTableBody-root > .MuiTableRow-root': {\n height: '100%',\n },\n }),\n '& .MuiTableCell-root': canUseTreeGridStyle\n ? {\n ...getTreeGridCellBaseSx(resolvedTreeGridTheme),\n }\n : {\n fontSize: resolvedTableTheme.cell.fontSize,\n padding: '7px 10px',\n borderLeft: 'none',\n borderRight: 'none',\n },\n ...(!canUseTreeGridStyle && {\n '& .MuiTableRow-root > .MuiTableCell-root + .MuiTableCell-root': {\n borderLeft: `1px solid ${theme.palette.divider}`,\n },\n }),\n '& th': canUseTreeGridStyle\n ? {\n ...getTreeGridHeaderCellSx(resolvedTreeGridTheme),\n '&:first-of-type': {\n borderLeft: `1px solid ${TREEGRID_TABLE_HEADER_BORDER_COLOR}`,\n },\n }\n : {\n backgroundColor: resolvedTableTheme.header.backgroundColor || theme.palette.grey[200],\n color: resolvedTableTheme.header.color,\n fontSize: resolvedTableTheme.header.fontSize,\n fontWeight: resolvedTableTheme.header.fontWeight,\n },\n '& td': canUseTreeGridStyle\n ? {\n ...getTreeGridBodyCellSx(resolvedTreeGridTheme),\n '&:first-of-type': {\n borderLeft: `1px solid ${TREEGRID_TABLE_BODY_BORDER_COLOR}`,\n },\n }\n : {},\n ...(canUseTreeGridStyle && {\n '& tbody > .MuiTableRow-root': getTreeGridBodyRowSx(resolvedTreeGridTheme),\n }),\n ...(canUseTreeGridStyle && {\n '& tbody > tr:first-of-type > th:first-of-type': {\n borderTopLeftRadius: 'inherit',\n },\n '& tbody > tr:first-of-type > td:last-of-type': {\n borderTopRightRadius: 'inherit',\n },\n }),\n };\n },\n);\n\nexport const StyledTableRow = styled(TableRow)`\n /* &:last-child th,\n &:last-child td {\n border-bottom: 0;\n } */\n`;\n\ninterface OwpTableProps<T> extends Omit<StyledTableProps, 'children'> {\n canTotalCountRow?: boolean;\n headers: OwpTableHeaderRow | OwpTableHeaderRow[];\n rows: T[];\n totalCount?: number;\n}\n\n/**\n * OwpTable 컴포넌트\n * @param canTotalCountRow 전체 row 수 표시 여부\n * @param headers headers 값\n * @param rows 행 데이터 목록\n * @param totalCount 전체 row 수\n */\nexport function OwpTable<T>({\n canTotalCountRow = false,\n headers,\n rows,\n totalCount,\n ...restTableProps\n}: OwpTableProps<T>) {\n const resolvedHeaderRows = useMemo(\n () => (isArray(headers) ? headers : isEmpty(headers) ? [] : [headers]),\n [headers],\n );\n const commonKeyListData = useMemo(\n () => getTableColumnKeys(isArray(headers) ? headers[0] : headers),\n [headers],\n );\n\n return (\n <StyledTable\n {...restTableProps}\n footerSlot={\n canTotalCountRow ? (\n <OwpTableTotalCount totalCount={typeof totalCount === 'undefined' ? rows.length : totalCount} />\n ) : undefined\n }\n className={clsx(restTableProps.tableLayout && 'w-full', restTableProps.className)}\n >\n <TableHead>\n {resolvedHeaderRows.map((headerData, index) => (\n <StyledTableRow key={`table-header-${index}`}>\n {getTableColumnKeys(headerData).map((keyName) => (\n <TableCell\n key={`table-header-${index}-${keyName}`}\n className=\"whitespace-pre-wrap\"\n sx={getTableCellSx(headerData, keyName)}\n colSpan={getTableCellSpan(headerData, keyName, 'ColSpan')}\n rowSpan={getTableCellSpan(headerData, keyName, 'RowSpan')}\n align=\"center\"\n >\n {headerData[keyName]}\n </TableCell>\n ))}\n </StyledTableRow>\n ))}\n </TableHead>\n <TableBody>\n {rows.map((row, index) => {\n const currentRow = row as OwpTableRowData;\n\n return (\n <StyledTableRow key={`table-row-${index}`}>\n {commonKeyListData.map((keyName) => (\n <TableCell\n key={`table-row-cell-${index}-${keyName}`}\n className=\"whitespace-pre-wrap h-64\"\n sx={getTableCellSx(currentRow, keyName)}\n align=\"center\"\n >\n {currentRow[keyName] as ReactNode}\n </TableCell>\n ))}\n </StyledTableRow>\n );\n })}\n </TableBody>\n </StyledTable>\n );\n}\n"],"names":["getTableColumnKeys","__name","row","keyName","getTableCellSx","getTableCellSpan","spanType","mergeSx","styles","acc","style","isArray","treeGridContainerSx","defaultStyledTableTheme","OwpTableTotalCount","totalCount","jsxs","Fragment","jsx","Divider","Typography","isNumber","StyledTable","canBodyFullHeight","canUseTreeGridStyle","children","className","containerProps","footerSlot","tableThemeProp","tableLayout","tableProps","currentSettings","useGetCurrentSettings","treeGridTheme","useMemo","resolveOwpGridTheme","_b","_a","tableTheme","resolveOwpTableTheme","GlobalStyles","getTreeGridFontFaceStyles","TableContainer","Paper","getTreeGridContainerSx","StyledTableInner","clsx","styled","Table","prop","theme","resolvedTreeGridTheme","resolvedTableTheme","getTreeGridCellBaseSx","getTreeGridHeaderCellSx","TREEGRID_TABLE_HEADER_BORDER_COLOR","getTreeGridBodyCellSx","TREEGRID_TABLE_BODY_BORDER_COLOR","getTreeGridBodyRowSx","StyledTableRow","TableRow","OwpTable","canTotalCountRow","headers","rows","restTableProps","resolvedHeaderRows","isEmpty","commonKeyListData","TableHead","headerData","index","TableCell","TableBody","currentRow"],"mappings":"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"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
var g = Object.defineProperty;
|
|
2
|
+
var l = (o, r) => g(o, "name", { value: r, configurable: !0 });
|
|
3
|
+
import { TREEGRID_FONT_FAMILY_STACK as n } from "../../../constants/treeGrid.js";
|
|
4
|
+
const d = "#6F7F94", c = "#CDD8E4", s = /* @__PURE__ */ l((o) => ({
|
|
5
|
+
backgroundColor: o.body.backgroundColor,
|
|
6
|
+
color: o.body.color
|
|
7
|
+
}), "getTreeGridContainerSx"), a = /* @__PURE__ */ l((o, r = "normal") => ({
|
|
8
|
+
fontFamily: n,
|
|
9
|
+
fontSize: o,
|
|
10
|
+
fontWeight: r,
|
|
11
|
+
lineHeight: "16px"
|
|
12
|
+
}), "getTreeGridTypographySx"), C = /* @__PURE__ */ l((o) => ({
|
|
13
|
+
...a(o.cell.fontSize),
|
|
14
|
+
boxSizing: "border-box",
|
|
15
|
+
overflow: "hidden",
|
|
16
|
+
textOverflow: "ellipsis",
|
|
17
|
+
verticalAlign: "middle",
|
|
18
|
+
whiteSpace: "nowrap"
|
|
19
|
+
}), "getTreeGridCellBaseSx"), x = /* @__PURE__ */ l((o) => ({
|
|
20
|
+
...a(
|
|
21
|
+
o.header.fontSize,
|
|
22
|
+
o.header.fontWeight
|
|
23
|
+
),
|
|
24
|
+
backgroundColor: o.header.backgroundColor,
|
|
25
|
+
borderTop: `1px solid ${d}`,
|
|
26
|
+
borderBottom: `1px solid ${d}`,
|
|
27
|
+
borderLeft: 0,
|
|
28
|
+
borderRight: `1px solid ${d}`,
|
|
29
|
+
color: o.header.color,
|
|
30
|
+
height: o.header.height,
|
|
31
|
+
minHeight: o.header.height,
|
|
32
|
+
padding: "7px 2px 6px 10px"
|
|
33
|
+
}), "getTreeGridHeaderCellSx"), k = /* @__PURE__ */ l((o) => ({
|
|
34
|
+
...C(o),
|
|
35
|
+
backgroundColor: o.row.backgroundColor,
|
|
36
|
+
borderBottom: `1px solid ${c}`,
|
|
37
|
+
borderLeft: 0,
|
|
38
|
+
borderRight: `1px solid ${c}`,
|
|
39
|
+
color: o.body.color,
|
|
40
|
+
fontSize: o.cell.fontSize,
|
|
41
|
+
padding: "7px 10px 6px"
|
|
42
|
+
}), "getTreeGridBodyCellSx"), R = /* @__PURE__ */ l((o, r) => {
|
|
43
|
+
const e = r != null && r.selected ? o.state.selectedRowBackgroundColor : o.row.backgroundColor, t = r != null && r.selected ? o.state.selectedRowBackgroundColor : o.state.hoverRowBackgroundColor;
|
|
44
|
+
return {
|
|
45
|
+
"& > td": {
|
|
46
|
+
backgroundColor: e
|
|
47
|
+
},
|
|
48
|
+
...(r == null ? void 0 : r.canHover) && {
|
|
49
|
+
"&:hover > td": {
|
|
50
|
+
backgroundColor: t
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"&.Mui-selected > td": {
|
|
54
|
+
backgroundColor: o.state.selectedRowBackgroundColor
|
|
55
|
+
},
|
|
56
|
+
"&.Mui-selected:hover > td": {
|
|
57
|
+
backgroundColor: o.state.selectedRowBackgroundColor
|
|
58
|
+
},
|
|
59
|
+
"&:focus-within > td": {
|
|
60
|
+
backgroundColor: o.state.focusedRowBackgroundColor
|
|
61
|
+
},
|
|
62
|
+
"& > td:focus-within": {
|
|
63
|
+
backgroundColor: o.state.focusedCellBackgroundColor
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
}, "getTreeGridBodyRowSx");
|
|
67
|
+
export {
|
|
68
|
+
c as TREEGRID_TABLE_BODY_BORDER_COLOR,
|
|
69
|
+
d as TREEGRID_TABLE_HEADER_BORDER_COLOR,
|
|
70
|
+
k as getTreeGridBodyCellSx,
|
|
71
|
+
R as getTreeGridBodyRowSx,
|
|
72
|
+
C as getTreeGridCellBaseSx,
|
|
73
|
+
s as getTreeGridContainerSx,
|
|
74
|
+
x as getTreeGridHeaderCellSx,
|
|
75
|
+
a as getTreeGridTypographySx
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=treeGridTableStyle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"treeGridTableStyle.js","sources":["../../../../src/components/OwpTable/internal/treeGridTableStyle.ts"],"sourcesContent":["import type { OwpResolvedGridThemeConfigType } from '@/constants/gridTheme';\nimport { TREEGRID_FONT_FAMILY_STACK } from '@/constants/treeGrid';\n\nexport const TREEGRID_TABLE_HEADER_BORDER_COLOR = '#6F7F94';\nexport const TREEGRID_TABLE_BODY_BORDER_COLOR = '#CDD8E4';\n\n/**\n * TreeGrid 컨테이너 색상 매핑\n * @param treeGridTheme Grid theme 값\n */\nexport const getTreeGridContainerSx = (\n treeGridTheme: OwpResolvedGridThemeConfigType,\n) => ({\n backgroundColor: treeGridTheme.body.backgroundColor,\n color: treeGridTheme.body.color,\n});\n\n/**\n * TreeGrid 타이포그래피 매핑\n * @param fontSize 폰트 크기\n * @param fontWeight 폰트 두께\n */\nexport const getTreeGridTypographySx = (\n fontSize: number | string,\n fontWeight: number | string = 'normal',\n) => ({\n fontFamily: TREEGRID_FONT_FAMILY_STACK,\n fontSize,\n fontWeight,\n lineHeight: '16px',\n});\n\n/**\n * TreeGrid 공통 셀 스타일 매핑\n * @param treeGridTheme Grid theme 값\n */\nexport const getTreeGridCellBaseSx = (treeGridTheme: OwpResolvedGridThemeConfigType) => ({\n ...getTreeGridTypographySx(treeGridTheme.cell.fontSize),\n boxSizing: 'border-box',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n verticalAlign: 'middle',\n whiteSpace: 'nowrap',\n});\n\n/**\n * TreeGrid header 셀 스타일 매핑\n * @param treeGridTheme Grid theme 값\n */\nexport const getTreeGridHeaderCellSx = (\n treeGridTheme: OwpResolvedGridThemeConfigType,\n) => ({\n ...getTreeGridTypographySx(\n treeGridTheme.header.fontSize,\n treeGridTheme.header.fontWeight,\n ),\n backgroundColor: treeGridTheme.header.backgroundColor,\n borderTop: `1px solid ${TREEGRID_TABLE_HEADER_BORDER_COLOR}`,\n borderBottom: `1px solid ${TREEGRID_TABLE_HEADER_BORDER_COLOR}`,\n borderLeft: 0,\n borderRight: `1px solid ${TREEGRID_TABLE_HEADER_BORDER_COLOR}`,\n color: treeGridTheme.header.color,\n height: treeGridTheme.header.height,\n minHeight: treeGridTheme.header.height,\n padding: '7px 2px 6px 10px',\n});\n\n/**\n * TreeGrid body 셀 스타일 매핑\n * @param treeGridTheme Grid theme 값\n */\nexport const getTreeGridBodyCellSx = (\n treeGridTheme: OwpResolvedGridThemeConfigType,\n) => ({\n ...getTreeGridCellBaseSx(treeGridTheme),\n backgroundColor: treeGridTheme.row.backgroundColor,\n borderBottom: `1px solid ${TREEGRID_TABLE_BODY_BORDER_COLOR}`,\n borderLeft: 0,\n borderRight: `1px solid ${TREEGRID_TABLE_BODY_BORDER_COLOR}`,\n color: treeGridTheme.body.color,\n fontSize: treeGridTheme.cell.fontSize,\n padding: '7px 10px 6px',\n});\n\n/**\n * TreeGrid body row 상태 스타일 매핑\n * @param treeGridTheme Grid theme 값\n * @param options hover, selected 여부\n */\nexport const getTreeGridBodyRowSx = (\n treeGridTheme: OwpResolvedGridThemeConfigType,\n options?: {\n canHover?: boolean;\n selected?: boolean;\n },\n) => {\n const defaultBackgroundColor = options?.selected\n ? treeGridTheme.state.selectedRowBackgroundColor\n : treeGridTheme.row.backgroundColor;\n const hoverBackgroundColor = options?.selected\n ? treeGridTheme.state.selectedRowBackgroundColor\n : treeGridTheme.state.hoverRowBackgroundColor;\n\n return {\n '& > td': {\n backgroundColor: defaultBackgroundColor,\n },\n ...(options?.canHover && {\n '&:hover > td': {\n backgroundColor: hoverBackgroundColor,\n },\n }),\n '&.Mui-selected > td': {\n backgroundColor: treeGridTheme.state.selectedRowBackgroundColor,\n },\n '&.Mui-selected:hover > td': {\n backgroundColor: treeGridTheme.state.selectedRowBackgroundColor,\n },\n '&:focus-within > td': {\n backgroundColor: treeGridTheme.state.focusedRowBackgroundColor,\n },\n '& > td:focus-within': {\n backgroundColor: treeGridTheme.state.focusedCellBackgroundColor,\n },\n };\n};\n"],"names":["TREEGRID_TABLE_HEADER_BORDER_COLOR","TREEGRID_TABLE_BODY_BORDER_COLOR","getTreeGridContainerSx","__name","treeGridTheme","getTreeGridTypographySx","fontSize","fontWeight","TREEGRID_FONT_FAMILY_STACK","getTreeGridCellBaseSx","getTreeGridHeaderCellSx","getTreeGridBodyCellSx","getTreeGridBodyRowSx","options","defaultBackgroundColor","hoverBackgroundColor"],"mappings":";;;AAGO,MAAMA,IAAqC,WACrCC,IAAmC,WAMnCC,IAAyB,gBAAAC,EAAA,CACpCC,OACI;AAAA,EACJ,iBAAiBA,EAAc,KAAK;AAAA,EACpC,OAAOA,EAAc,KAAK;AAC5B,IALsC,2BAYzBC,IAA0B,gBAAAF,EAAA,CACrCG,GACAC,IAA8B,cAC1B;AAAA,EACJ,YAAYC;AAAA,EACZ,UAAAF;AAAA,EACA,YAAAC;AAAA,EACA,YAAY;AACd,IARuC,4BAc1BE,IAAwB,gBAAAN,EAAA,CAACC,OAAmD;AAAA,EACvF,GAAGC,EAAwBD,EAAc,KAAK,QAAQ;AAAA,EACtD,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AACd,IAPqC,0BAaxBM,IAA0B,gBAAAP,EAAA,CACrCC,OACI;AAAA,EACJ,GAAGC;AAAA,IACDD,EAAc,OAAO;AAAA,IACrBA,EAAc,OAAO;AAAA,EAAA;AAAA,EAEvB,iBAAiBA,EAAc,OAAO;AAAA,EACtC,WAAW,aAAaJ,CAAkC;AAAA,EAC1D,cAAc,aAAaA,CAAkC;AAAA,EAC7D,YAAY;AAAA,EACZ,aAAa,aAAaA,CAAkC;AAAA,EAC5D,OAAOI,EAAc,OAAO;AAAA,EAC5B,QAAQA,EAAc,OAAO;AAAA,EAC7B,WAAWA,EAAc,OAAO;AAAA,EAChC,SAAS;AACX,IAhBuC,4BAsB1BO,IAAwB,gBAAAR,EAAA,CACnCC,OACI;AAAA,EACJ,GAAGK,EAAsBL,CAAa;AAAA,EACtC,iBAAiBA,EAAc,IAAI;AAAA,EACnC,cAAc,aAAaH,CAAgC;AAAA,EAC3D,YAAY;AAAA,EACZ,aAAa,aAAaA,CAAgC;AAAA,EAC1D,OAAOG,EAAc,KAAK;AAAA,EAC1B,UAAUA,EAAc,KAAK;AAAA,EAC7B,SAAS;AACX,IAXqC,0BAkBxBQ,IAAuB,gBAAAT,EAAA,CAClCC,GACAS,MAIG;AACH,QAAMC,IAAyBD,KAAA,QAAAA,EAAS,WACpCT,EAAc,MAAM,6BACpBA,EAAc,IAAI,iBAChBW,IAAuBF,KAAA,QAAAA,EAAS,WAClCT,EAAc,MAAM,6BACpBA,EAAc,MAAM;AAExB,SAAO;AAAA,IACL,UAAU;AAAA,MACR,iBAAiBU;AAAA,IAAA;AAAA,IAEnB,IAAID,KAAA,gBAAAA,EAAS,aAAY;AAAA,MACvB,gBAAgB;AAAA,QACd,iBAAiBE;AAAA,MAAA;AAAA,IACnB;AAAA,IAEF,uBAAuB;AAAA,MACrB,iBAAiBX,EAAc,MAAM;AAAA,IAAA;AAAA,IAEvC,6BAA6B;AAAA,MAC3B,iBAAiBA,EAAc,MAAM;AAAA,IAAA;AAAA,IAEvC,uBAAuB;AAAA,MACrB,iBAAiBA,EAAc,MAAM;AAAA,IAAA;AAAA,IAEvC,uBAAuB;AAAA,MACrB,iBAAiBA,EAAc,MAAM;AAAA,IAAA;AAAA,EACvC;AAEJ,GApCoC;"}
|