@wipco/sdui 0.7.0 → 0.8.1
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/DatePicker-BndreCPl.d.ts +35 -0
- package/dist/{chunk-XY2JKFAV.js → chunk-3PYMVHL3.js} +4 -2
- package/dist/{chunk-562QK2G3.js → chunk-4CZJF5PR.js} +4 -2
- package/dist/{chunk-73ZMMJRX.js → chunk-4IRLQWQC.js} +4 -2
- package/dist/{chunk-KAXPN6KT.js → chunk-5A7BWIGN.js} +8 -5
- package/dist/{chunk-B4A4KY4K.js → chunk-7AHNAX6T.js} +4 -2
- package/dist/{chunk-CRSY67TZ.js → chunk-B5JTXYDB.js} +19 -21
- package/dist/{chunk-7Y4J7EOK.js → chunk-BMZKZGJF.js} +3 -2
- package/dist/{chunk-63U54JAG.js → chunk-BT4HC3WR.js} +4 -2
- package/dist/{chunk-L4ORCIVN.js → chunk-JONNWN6N.js} +4 -2
- package/dist/{chunk-5O6PFLFJ.js → chunk-JWYBFODH.js} +4 -2
- package/dist/{chunk-TKB7H5DB.js → chunk-NIRR6KSQ.js} +1 -1
- package/dist/{chunk-USKRM22W.js → chunk-O4U7Y3XL.js} +3 -2
- package/dist/{chunk-H32WQHB7.js → chunk-OINKP2BE.js} +5 -3
- package/dist/{chunk-QBIVW7E6.js → chunk-SAN4IX6N.js} +77 -2
- package/dist/{chunk-57LLG32F.js → chunk-TBAIREB3.js} +5 -3
- package/dist/{chunk-2ARNY7WZ.js → chunk-TMAVD3WL.js} +4 -2
- package/dist/{chunk-HGFYXY7F.js → chunk-VK6KWB65.js} +4 -2
- package/dist/{chunk-GWVK3BHB.js → chunk-VV73LOAE.js} +5 -3
- package/dist/{chunk-J2DSDERS.js → chunk-WJEGCCPY.js} +4 -2
- package/dist/{chunk-TAFUDHIX.js → chunk-WLWWN5LW.js} +4 -2
- package/dist/{chunk-XMMYJSRV.js → chunk-WMPSOKNI.js} +4 -2
- package/dist/{chunk-Y3HYEWSY.js → chunk-X3DGYP4W.js} +4 -2
- package/dist/{chunk-DN5YNPJS.js → chunk-YFUQUWWH.js} +5 -3
- package/dist/{chunk-QZQDHSMD.js → chunk-Z3WGIFJP.js} +3 -2
- package/dist/{chunk-PJRXPMI3.js → chunk-ZH5MLOZS.js} +3 -2
- package/dist/index.d.ts +1044 -980
- package/dist/index.js +79 -36
- package/dist/{layout-BnYUuWC2.d.ts → layout-B1QrIBm6.d.ts} +59 -1
- package/dist/meta.d.ts +42 -1
- package/dist/meta.js +198 -57
- package/dist/rich.d.ts +2 -1
- package/dist/rich.js +4 -3
- package/dist/widgets/AutocompleteField.d.ts +6 -40
- package/dist/widgets/AutocompleteField.js +4 -3
- package/dist/widgets/ColumnBoard.d.ts +6 -14
- package/dist/widgets/ColumnBoard.js +3 -2
- package/dist/widgets/DiffView.d.ts +6 -11
- package/dist/widgets/DiffView.js +3 -2
- package/dist/widgets/Disclosure.d.ts +6 -9
- package/dist/widgets/Disclosure.js +3 -2
- package/dist/widgets/EventCalendar.d.ts +6 -1
- package/dist/widgets/EventCalendar.js +3 -2
- package/dist/widgets/ImageLightbox.d.ts +6 -10
- package/dist/widgets/ImageLightbox.js +3 -2
- package/dist/widgets/InlineEdit.d.ts +6 -10
- package/dist/widgets/InlineEdit.js +3 -2
- package/dist/widgets/JsonField.d.ts +6 -1
- package/dist/widgets/JsonField.js +3 -2
- package/dist/widgets/LiveClock.d.ts +6 -1
- package/dist/widgets/LiveClock.js +2 -1
- package/dist/widgets/OrgChart.d.ts +7 -3
- package/dist/widgets/OrgChart.js +3 -2
- package/dist/widgets/PeriodFilter.d.ts +6 -1
- package/dist/widgets/PeriodFilter.js +3 -2
- package/dist/widgets/PrintSheet.d.ts +6 -12
- package/dist/widgets/PrintSheet.js +3 -2
- package/dist/widgets/SearchableMultiPicker.d.ts +6 -11
- package/dist/widgets/SearchableMultiPicker.js +4 -3
- package/dist/widgets/SecureScreen.d.ts +6 -14
- package/dist/widgets/SecureScreen.js +3 -2
- package/dist/widgets/StackedMeter.d.ts +7 -3
- package/dist/widgets/StackedMeter.js +2 -1
- package/dist/widgets/Strip.d.ts +6 -10
- package/dist/widgets/Strip.js +2 -2
- package/dist/widgets/SummaryTable.d.ts +6 -9
- package/dist/widgets/SummaryTable.js +2 -1
- package/dist/widgets/TagMultiSelect.d.ts +6 -1
- package/dist/widgets/TagMultiSelect.js +3 -2
- package/dist/widgets/Timeline.d.ts +6 -10
- package/dist/widgets/Timeline.js +4 -3
- package/dist/widgets/TreePicker.d.ts +6 -1
- package/dist/widgets/TreePicker.js +4 -3
- package/dist/widgets/TreeView.d.ts +6 -1
- package/dist/widgets/TreeView.js +3 -2
- package/dist/widgets/index.d.ts +61 -61
- package/dist/widgets/index.js +44 -44
- package/package.json +1 -1
- package/dist/DatePicker-CTDcFR7V.d.ts +0 -48
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { DEV,
|
|
2
|
-
export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-
|
|
3
|
-
import {
|
|
4
|
-
export {
|
|
5
|
-
import {
|
|
6
|
-
export {
|
|
7
|
-
import {
|
|
8
|
-
export {
|
|
9
|
-
import React, { createContext,
|
|
1
|
+
import { DEV, HoistedStyle, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, DateRangePicker, DatePicker, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-5A7BWIGN.js';
|
|
2
|
+
export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-5A7BWIGN.js';
|
|
3
|
+
import { searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-NIRR6KSQ.js';
|
|
4
|
+
export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-NIRR6KSQ.js';
|
|
5
|
+
import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce, Dialog } from './chunk-B5JTXYDB.js';
|
|
6
|
+
export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-B5JTXYDB.js';
|
|
7
|
+
import { boxed, mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-SAN4IX6N.js';
|
|
8
|
+
export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle } from './chunk-SAN4IX6N.js';
|
|
9
|
+
import React, { createContext, useState, useMemo, useContext, useRef, useEffect, useCallback } from 'react';
|
|
10
10
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
11
11
|
|
|
12
12
|
// src/asset-url.ts
|
|
@@ -180,21 +180,42 @@ function Can({ entity, action = "read", scope, fallback = null, children }) {
|
|
|
180
180
|
}
|
|
181
181
|
return can({ entity, action: typeof action === "string" ? action : "read", scope }) ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
|
|
182
182
|
}
|
|
183
|
-
function
|
|
184
|
-
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
183
|
+
function paddingStyle(padding) {
|
|
184
|
+
const value = padding === void 0 ? void 0 : PADDING_CSS[padding];
|
|
185
|
+
return value === void 0 ? {} : { padding: value };
|
|
186
|
+
}
|
|
187
|
+
var PADDING_CSS = {
|
|
188
|
+
"2": "2px",
|
|
189
|
+
"4": "4px",
|
|
190
|
+
"8": "8px",
|
|
191
|
+
"12": "12px",
|
|
192
|
+
"16": "16px",
|
|
193
|
+
"20": "20px",
|
|
194
|
+
"24": "24px",
|
|
195
|
+
"32": "32px"
|
|
196
|
+
};
|
|
197
|
+
function Grid({
|
|
198
|
+
columns = 3,
|
|
199
|
+
template,
|
|
200
|
+
gap,
|
|
201
|
+
align,
|
|
202
|
+
justify,
|
|
203
|
+
wrap,
|
|
204
|
+
padding,
|
|
205
|
+
className,
|
|
206
|
+
style,
|
|
207
|
+
children
|
|
208
|
+
}) {
|
|
192
209
|
return /* @__PURE__ */ jsx(
|
|
193
210
|
"div",
|
|
194
211
|
{
|
|
195
|
-
className:
|
|
212
|
+
className: joinClass("wp-grid", !template && columnsClass(columns), className),
|
|
196
213
|
style: mergeStyle(
|
|
197
|
-
|
|
214
|
+
{
|
|
215
|
+
...template ? { gridTemplateColumns: template } : null,
|
|
216
|
+
...containerLayoutStyle({ gap, align, justify, wrap }),
|
|
217
|
+
...paddingStyle(padding)
|
|
218
|
+
},
|
|
198
219
|
style
|
|
199
220
|
),
|
|
200
221
|
children
|
|
@@ -205,7 +226,7 @@ function Row({ justify, gap, align, wrap, className, style, children }) {
|
|
|
205
226
|
return /* @__PURE__ */ jsx(
|
|
206
227
|
"div",
|
|
207
228
|
{
|
|
208
|
-
className:
|
|
229
|
+
className: joinClass("wp-row", justify === "between" && "wp-row--between", className),
|
|
209
230
|
style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
|
|
210
231
|
children
|
|
211
232
|
}
|
|
@@ -215,25 +236,31 @@ function Actions({ justify = "end", gap, align, wrap, className, style, children
|
|
|
215
236
|
return /* @__PURE__ */ jsx(
|
|
216
237
|
"div",
|
|
217
238
|
{
|
|
218
|
-
className:
|
|
239
|
+
className: joinClass("wp-row", className),
|
|
219
240
|
style: mergeStyle({ flex: 1, ...containerLayoutStyle({ gap, align, justify, wrap }) }, style),
|
|
220
241
|
children
|
|
221
242
|
}
|
|
222
243
|
);
|
|
223
244
|
}
|
|
224
245
|
function Col({ gap, align, justify, wrap, className, style, children }) {
|
|
225
|
-
return /* @__PURE__ */ jsx("div", { className:
|
|
246
|
+
return /* @__PURE__ */ jsx("div", { className: joinClass("wp-col", className), style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style), children });
|
|
226
247
|
}
|
|
227
248
|
var SPACER_STEPS = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6, 8]);
|
|
228
|
-
function Spacer({ size }) {
|
|
249
|
+
function Spacer({ size, className, style }) {
|
|
229
250
|
const step = size !== void 0 && SPACER_STEPS.has(Number(size)) ? Number(size) : void 0;
|
|
230
|
-
return /* @__PURE__ */ jsx(
|
|
251
|
+
return /* @__PURE__ */ jsx(
|
|
252
|
+
"div",
|
|
253
|
+
{
|
|
254
|
+
className: joinClass("wp-spacer", step !== void 0 && `wp-spacer--${step}`, className),
|
|
255
|
+
style
|
|
256
|
+
}
|
|
257
|
+
);
|
|
231
258
|
}
|
|
232
259
|
function Section({ title, gap, align, justify, wrap, className, style, children }) {
|
|
233
260
|
return /* @__PURE__ */ jsxs(
|
|
234
261
|
"section",
|
|
235
262
|
{
|
|
236
|
-
className:
|
|
263
|
+
className: joinClass("wp-col", className),
|
|
237
264
|
style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
|
|
238
265
|
children: [
|
|
239
266
|
title ? /* @__PURE__ */ jsx("h2", { className: "wp-h4", children: title }) : null,
|
|
@@ -242,30 +269,43 @@ function Section({ title, gap, align, justify, wrap, className, style, children
|
|
|
242
269
|
}
|
|
243
270
|
);
|
|
244
271
|
}
|
|
272
|
+
var TEXT_WRAP_CSS = {
|
|
273
|
+
normal: {},
|
|
274
|
+
preserve: { whiteSpace: "pre-wrap" },
|
|
275
|
+
anywhere: { whiteSpace: "pre-wrap", wordBreak: "break-all" }
|
|
276
|
+
};
|
|
245
277
|
function Text({
|
|
246
278
|
preset = "body",
|
|
247
279
|
as: Tag2 = "p",
|
|
248
280
|
weight,
|
|
249
281
|
textAlign,
|
|
282
|
+
wrap,
|
|
250
283
|
className,
|
|
251
284
|
style,
|
|
252
285
|
value,
|
|
253
286
|
children
|
|
254
287
|
}) {
|
|
255
|
-
return /* @__PURE__ */ jsx(
|
|
288
|
+
return /* @__PURE__ */ jsx(
|
|
289
|
+
Tag2,
|
|
290
|
+
{
|
|
291
|
+
className: joinClass(`wp-${preset}`, className),
|
|
292
|
+
style: mergeStyle({ ...typographyStyle({ weight, textAlign }), ...TEXT_WRAP_CSS[wrap ?? "normal"] }, style),
|
|
293
|
+
children: value ?? children
|
|
294
|
+
}
|
|
295
|
+
);
|
|
256
296
|
}
|
|
257
297
|
function KeyValueList({ source, items, className, style }) {
|
|
258
|
-
return /* @__PURE__ */ jsx("div", { className:
|
|
298
|
+
return /* @__PURE__ */ jsx("div", { className: joinClass("wp-kv", className), style, children: (items ?? []).map((item, index) => {
|
|
259
299
|
const raw = item.key ? source?.[item.key] : item.value;
|
|
260
300
|
const content = raw === null || raw === void 0 || raw === "" ? "\u2014" : raw;
|
|
261
301
|
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
262
302
|
/* @__PURE__ */ jsx("span", { className: "wp-kv__k", children: item.label }),
|
|
263
|
-
/* @__PURE__ */ jsx("span", { className:
|
|
303
|
+
/* @__PURE__ */ jsx("span", { className: joinClass("wp-kv__v", item.mono && "wp-mono"), children: content })
|
|
264
304
|
] }, index);
|
|
265
305
|
}) });
|
|
266
306
|
}
|
|
267
|
-
function PageHead({ title, subtitle, actions }) {
|
|
268
|
-
return /* @__PURE__ */ jsxs("div", { className: "wp-page-head", children: [
|
|
307
|
+
function PageHead({ title, subtitle, actions, className, style }) {
|
|
308
|
+
return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-page-head", className), style, children: [
|
|
269
309
|
/* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
|
|
270
310
|
title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: title }) : null,
|
|
271
311
|
subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: subtitle }) : null
|
|
@@ -276,8 +316,8 @@ function PageHead({ title, subtitle, actions }) {
|
|
|
276
316
|
function Show({ when, children }) {
|
|
277
317
|
return when ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
|
|
278
318
|
}
|
|
279
|
-
function Divider({ style }) {
|
|
280
|
-
return /* @__PURE__ */ jsx("hr", { className: "wp-divider", style });
|
|
319
|
+
function Divider({ style, className }) {
|
|
320
|
+
return /* @__PURE__ */ jsx("hr", { className: joinClass("wp-divider", className), style });
|
|
281
321
|
}
|
|
282
322
|
function toNumber(value) {
|
|
283
323
|
if (typeof value === "number") return Number.isFinite(value) ? value : null;
|
|
@@ -592,6 +632,7 @@ function SearchResults({
|
|
|
592
632
|
views,
|
|
593
633
|
pageSizes,
|
|
594
634
|
className,
|
|
635
|
+
style,
|
|
595
636
|
searchParams,
|
|
596
637
|
onParamsChange,
|
|
597
638
|
actions = [],
|
|
@@ -780,7 +821,7 @@ function SearchResults({
|
|
|
780
821
|
setSort((prev) => prev?.key === key ? prev.dir === "asc" ? { key, dir: "desc" } : null : { key, dir: "asc" });
|
|
781
822
|
};
|
|
782
823
|
const empty = /* @__PURE__ */ jsx(ResultEmptyState, { title });
|
|
783
|
-
return /* @__PURE__ */ jsxs("div", { className: ["wp-col", className].filter(Boolean).join(" "), "aria-label": title, children: [
|
|
824
|
+
return /* @__PURE__ */ jsxs("div", { className: ["wp-col", className].filter(Boolean).join(" "), style, "aria-label": title, children: [
|
|
784
825
|
!hideHeader ? /* @__PURE__ */ jsxs("div", { className: "wp-row wp-row--between", style: { flexWrap: "wrap" }, children: [
|
|
785
826
|
/* @__PURE__ */ jsxs("span", { className: "wp-caption", children: [
|
|
786
827
|
"\uCD1D ",
|
|
@@ -1102,7 +1143,7 @@ function mapActions(actions, dispatch) {
|
|
|
1102
1143
|
}
|
|
1103
1144
|
}));
|
|
1104
1145
|
}
|
|
1105
|
-
function
|
|
1146
|
+
function SduiSearchResultsImpl({
|
|
1106
1147
|
title,
|
|
1107
1148
|
data,
|
|
1108
1149
|
columns,
|
|
@@ -1149,7 +1190,7 @@ function SduiSearchResults({
|
|
|
1149
1190
|
}
|
|
1150
1191
|
);
|
|
1151
1192
|
}
|
|
1152
|
-
function
|
|
1193
|
+
function RemoteSearchResultsImpl({
|
|
1153
1194
|
title,
|
|
1154
1195
|
endpoint,
|
|
1155
1196
|
columns,
|
|
@@ -1220,6 +1261,8 @@ function RemoteSearchResults({
|
|
|
1220
1261
|
}
|
|
1221
1262
|
);
|
|
1222
1263
|
}
|
|
1264
|
+
var SduiSearchResults = boxed(SduiSearchResultsImpl, "SduiSearchResults");
|
|
1265
|
+
var RemoteSearchResults = boxed(RemoteSearchResultsImpl, "RemoteSearchResults");
|
|
1223
1266
|
function SduiDialog(props) {
|
|
1224
1267
|
const { onClose } = props;
|
|
1225
1268
|
useEffect(() => {
|
|
@@ -13,6 +13,7 @@ import React__default from 'react';
|
|
|
13
13
|
* 1. 컨테이너 전용 `gap` `wrap` `columns` — 자식에 그 개념이 없다
|
|
14
14
|
* 2. 컨테이너+자식 `align` ↔ `selfAlign` — CSS의 align-items/align-self 짝
|
|
15
15
|
* 3. 자식 전용 `grow` `shrink` `span` `truncate`
|
|
16
|
+
* `width` `maxWidth` `minWidth` `marginTop` `marginBottom` `pushEnd`
|
|
16
17
|
* 4. CSS가 상속함 `weight` `textAlign` — **JS는 아무것도 하지 않는다**
|
|
17
18
|
*
|
|
18
19
|
* 4번이 핵심이다. `font-weight`·`text-align`은 브라우저가 이미 자손에게 상속시킨다.
|
|
@@ -50,6 +51,24 @@ type SduiColumnsScale = 1 | 2 | 3 | 4 | 5 | 6;
|
|
|
50
51
|
*/
|
|
51
52
|
type SduiWeightScale = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
52
53
|
type SduiTextAlignScale = 'left' | 'center' | 'right';
|
|
54
|
+
/**
|
|
55
|
+
* 치수 척도 — **32px 격자**다. `full`만 예외로 `100%`를 뜻한다.
|
|
56
|
+
*
|
|
57
|
+
* ── 왜 자유 길이(`width?: string`)가 아닌가
|
|
58
|
+
* 실측: 스펙 85개에 남은 `style` 우회 75선언 중 50선언(67%)이 폭이었고, 값이
|
|
59
|
+
* 96·100·110·120·140·160·170·180·220·230·252·260·264·280px으로 **열넷**이었다.
|
|
60
|
+
* 같은 자리(입력칸 최대폭)에 160·170·180이 섞여 있는 식이라, 자유 길이를 프롭으로
|
|
61
|
+
* 올려 봐야 "픽셀로 만지다 디자인 규칙이 깨진다"는 상태가 프롭 이름만 바꿔 유지된다.
|
|
62
|
+
*
|
|
63
|
+
* ── 왜 하필 32의 배수인가
|
|
64
|
+
* 캔버스 크기 손잡이가 이미 카드류를 32px 배수로 스냅한다(`canvas/resize.ts`).
|
|
65
|
+
* 손잡이로 끌 때와 패널에서 고를 때의 값 집합이 다르면 한쪽으로 맞춘 화면이
|
|
66
|
+
* 다른 쪽에서 어긋나므로 같은 격자를 쓴다.
|
|
67
|
+
*
|
|
68
|
+
* 96에서 시작하는 이유: 그보다 좁은 실측값이 없다(최소 96px). 480에서 끊는 이유:
|
|
69
|
+
* 그보다 넓은 자리는 폭을 세지 않고 `grow`/`full`로 부모에 맡기는 편이 맞다.
|
|
70
|
+
*/
|
|
71
|
+
type SduiSizeScale = '96' | '128' | '160' | '192' | '224' | '256' | '288' | '320' | '384' | '480' | 'full';
|
|
53
72
|
/**
|
|
54
73
|
* 자기 루트가 flex/grid인 컴포넌트만 받는 축.
|
|
55
74
|
*
|
|
@@ -101,6 +120,24 @@ interface SduiChildLayoutProps {
|
|
|
101
120
|
selfAlign?: SduiAlignScale;
|
|
102
121
|
/** 한 줄로 잘라 말줄임(`.wp-truncate`). */
|
|
103
122
|
truncate?: boolean;
|
|
123
|
+
/** 고정 폭(`width`). `full`이면 부모 폭을 채운다. */
|
|
124
|
+
width?: SduiSizeScale;
|
|
125
|
+
/** 최대 폭(`max-width`). 넓은 화면에서 입력칸이 늘어지는 것을 막는 가장 흔한 쓰임이다. */
|
|
126
|
+
maxWidth?: SduiSizeScale;
|
|
127
|
+
/** 최소 폭(`min-width`). 좁아져도 이보다 줄지 않는다. */
|
|
128
|
+
minWidth?: SduiSizeScale;
|
|
129
|
+
/** 위쪽 바깥여백(`margin-top`). 간격 척도. */
|
|
130
|
+
marginTop?: SduiGapScale;
|
|
131
|
+
/** 아래쪽 바깥여백(`margin-bottom`). 간격 척도. */
|
|
132
|
+
marginBottom?: SduiGapScale;
|
|
133
|
+
/**
|
|
134
|
+
* 남는 공간을 앞쪽에 몰아 **자기만 끝으로 민다**(`margin-inline-start: auto`).
|
|
135
|
+
*
|
|
136
|
+
* 부모의 `justify="end"`와 다르다 — 저쪽은 자식 전부를 끝으로 보내고, 이쪽은
|
|
137
|
+
* 한 자식만 떼어 보낸다("왼쪽에 제목, 오른쪽에 버튼 하나"가 이 모양이다).
|
|
138
|
+
* 부모를 고칠 수 없는 자리(슬롯 안 등)에서도 쓸 수 있다.
|
|
139
|
+
*/
|
|
140
|
+
pushEnd?: boolean;
|
|
104
141
|
}
|
|
105
142
|
/** 렌더러가 가로채는 자식 축 프롭 이름. */
|
|
106
143
|
declare const CHILD_LAYOUT_PROPS: ReadonlySet<string>;
|
|
@@ -118,6 +155,27 @@ interface ChildLayoutResult {
|
|
|
118
155
|
* 하한을 푸는 표준 처방이고, 조상 시트를 건드리지 않으니 기존 화면이 움직이지 않는다.
|
|
119
156
|
*/
|
|
120
157
|
declare function childLayoutFrom(props: SduiChildLayoutProps): ChildLayoutResult | undefined;
|
|
158
|
+
/**
|
|
159
|
+
* 모든 어휘가 받아야 하는 두 프롭.
|
|
160
|
+
*
|
|
161
|
+
* ── 왜 이것이 따로 필요한가 (실측)
|
|
162
|
+
* 렌더러는 자식 축을 **모든 컴포넌트에서** 가로채 `props.style`·`props.className`으로 접는다.
|
|
163
|
+
* 그런데 컴포넌트가 그 둘을 자기 뿌리 DOM에 얹지 않으면 **아무 일도 일어나지 않는다.**
|
|
164
|
+
* 78종을 프리셋 그대로 그려 확인해 보니 38종이 그랬다 — `grow`·`selfAlign`을 줘도
|
|
165
|
+
* 조용히 무시되는 자리가 절반이었다. 편집기 속성 패널은 프롭을 보여 주므로,
|
|
166
|
+
* 사용자에게는 "설정했는데 안 먹는" 모양으로 보인다.
|
|
167
|
+
*
|
|
168
|
+
* `Show`·`Can`·`ForEach`는 예외다 — `dom.element: 'fragment'`라 얹을 DOM 박스가 없다.
|
|
169
|
+
* 그쪽은 프롭을 받지 않는 것이 옳고, 메타에서도 자식 축을 내보내지 않는다.
|
|
170
|
+
*/
|
|
171
|
+
interface SduiBoxProps {
|
|
172
|
+
style?: React__default.CSSProperties;
|
|
173
|
+
className?: string;
|
|
174
|
+
}
|
|
175
|
+
/** 컴포넌트가 스스로 정한 style 위에 바깥에서 온 style을 덮는다(바깥이 이긴다). */
|
|
176
|
+
declare function mergeStyle(own: React__default.CSSProperties | undefined, given: React__default.CSSProperties | undefined): React__default.CSSProperties | undefined;
|
|
177
|
+
/** 클래스 이름을 합친다. `false`·`undefined`·빈 문자열은 조건부 클래스라 떨군다. */
|
|
178
|
+
declare function joinClass(...parts: Array<string | false | null | undefined>): string | undefined;
|
|
121
179
|
/**
|
|
122
180
|
* `weight`/`textAlign` → 자기 요소의 style.
|
|
123
181
|
*
|
|
@@ -147,4 +205,4 @@ declare function typographyStyle(props: {
|
|
|
147
205
|
*/
|
|
148
206
|
declare const LAYOUT_CSS = "\n.wp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n.wp-grid--1{grid-template-columns:minmax(0,1fr)}\n.wp-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}\n.wp-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}\n@media (max-width:900px){.wp-grid--5,.wp-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media (max-width:600px){.wp-grid--5,.wp-grid--6{grid-template-columns:minmax(0,1fr)}}\n";
|
|
149
207
|
|
|
150
|
-
export { CHILD_LAYOUT_PROPS as C, LAYOUT_CSS as L, type
|
|
208
|
+
export { CHILD_LAYOUT_PROPS as C, LAYOUT_CSS as L, type SduiBoxProps as S, type SduiContainerLayoutProps as a, type SduiColumnsScale as b, type SduiGapScale as c, type SduiWeightScale as d, type SduiTextAlignScale as e, type SduiAlignScale as f, type SduiChildLayoutProps as g, type SduiSizeScale as h, type SduiSpanScale as i, childLayoutFrom as j, columnsClass as k, containerLayoutStyle as l, joinClass as m, mergeStyle as n, typographyStyle as t };
|
package/dist/meta.d.ts
CHANGED
|
@@ -214,6 +214,47 @@ interface SduiComponentMeta {
|
|
|
214
214
|
hidden?: boolean;
|
|
215
215
|
}
|
|
216
216
|
|
|
217
|
+
/**
|
|
218
|
+
* 자기 축 프롭 — **모든 컴포넌트가 갖는다.**
|
|
219
|
+
*
|
|
220
|
+
* ## 왜 한곳에 모았나 (실측)
|
|
221
|
+
*
|
|
222
|
+
* 렌더러는 자식 축을 컴포넌트를 가리지 않고 가로챈다({@link ../layout.ts}). 그런데
|
|
223
|
+
* 메타데이터는 컴포넌트마다 손으로 적고 있어서, **71종 중 10종에만** 적혀 있었다.
|
|
224
|
+
* 나머지 61종(`StatCard`·`Table`·`Chart`·`Badge`·`Textarea`·`Alert` …)은 런타임이
|
|
225
|
+
* 값을 받아 주는데도 편집기 속성 패널에 자리가 없었다 — "라이브러리는 되는데 편집기로는
|
|
226
|
+
* 못 하는" 기능이 61곳 있었다는 뜻이다.
|
|
227
|
+
*
|
|
228
|
+
* 컴포넌트마다 적는 방식으로는 새 컴포넌트가 들어올 때마다 같은 누락이 생긴다.
|
|
229
|
+
* 그래서 목록을 여기 한 벌 두고 {@link withSelfAxis}가 얹는다.
|
|
230
|
+
*
|
|
231
|
+
* ## 얹지 않는 것
|
|
232
|
+
*
|
|
233
|
+
* `dom.element: 'fragment'`인 어휘(`Show`·`Can`·`ForEach`)는 자기 DOM 박스가 없다.
|
|
234
|
+
* 프롭을 줘도 붙일 곳이 없어 조용히 사라지므로, 패널에 내는 것 자체가 거짓말이 된다.
|
|
235
|
+
*
|
|
236
|
+
* 컴포넌트가 **같은 이름을 이미 자기 뜻으로 쓰고 있으면** 그쪽을 남긴다
|
|
237
|
+
* (`Timeline.maxHeight`·`TreeView.maxHeight`가 그렇다). 덮어쓰면 기존 스펙이 깨진다.
|
|
238
|
+
*/
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* 자기 축 전부. 순서가 속성 패널의 순서가 된다 — 자주 쓰는 폭을 위에 둔다.
|
|
242
|
+
*
|
|
243
|
+
* `advanced`를 어디에 붙일지는 실측으로 갈랐다. 스펙 85개가 `style` 우회로 쓰던 것
|
|
244
|
+
* (폭·최대폭·위아래 여백)은 **자주 쓰는 것**이므로 접지 않고, 나머지는 접는다.
|
|
245
|
+
* 접힌 그룹은 "없는 것"처럼 보인다는 지적을 이미 받았다.
|
|
246
|
+
*/
|
|
247
|
+
declare const SELF_AXIS_PROPS: readonly SduiPropMeta[];
|
|
248
|
+
/**
|
|
249
|
+
* 컴포넌트 하나에 자기 축을 얹는다. 이미 같은 이름이 있으면 **원래 것을 남긴다.**
|
|
250
|
+
*
|
|
251
|
+
* 소비 앱이 자기 컴포넌트 메타를 만들 때도 이걸 통과시켜야 한다 — 안 그러면
|
|
252
|
+
* 그 컴포넌트만 편집기에서 폭·여백을 못 만지는 자리가 된다.
|
|
253
|
+
*/
|
|
254
|
+
declare function withSelfAxis(meta: SduiComponentMeta): SduiComponentMeta;
|
|
255
|
+
/** 카탈로그 전체에 얹는다. */
|
|
256
|
+
declare function withSelfAxisAll(catalog: Record<string, SduiComponentMeta>): Record<string, SduiComponentMeta>;
|
|
257
|
+
|
|
217
258
|
/**
|
|
218
259
|
* 기본 어휘(`defaultRegistry`) 41종의 빌더 메타데이터.
|
|
219
260
|
*
|
|
@@ -541,4 +582,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
|
|
|
541
582
|
items: SduiComponentMeta[];
|
|
542
583
|
}>;
|
|
543
584
|
|
|
544
|
-
export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta };
|
|
585
|
+
export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
|