@wipco/sdui 0.6.0 → 0.8.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.
- package/dist/DatePicker-BndreCPl.d.ts +35 -0
- package/dist/{chunk-FGRR3ROJ.js → chunk-27APKNEI.js} +8 -5
- package/dist/{chunk-SEBPBUZR.js → chunk-5RWAK5QO.js} +4 -2
- package/dist/{chunk-ZQR3ULVH.js → chunk-6ALDY64N.js} +5 -3
- package/dist/{chunk-ZUCI34QY.js → chunk-6FADQ2SU.js} +63 -21
- package/dist/{chunk-KBHI3IUR.js → chunk-6ZUWN2QX.js} +4 -2
- package/dist/{chunk-RH7ESUE6.js → chunk-7MRAY6UD.js} +4 -2
- package/dist/{chunk-DGPRX4MU.js → chunk-7Y6UFAYZ.js} +4 -2
- package/dist/{chunk-7Y4J7EOK.js → chunk-BMZKZGJF.js} +3 -2
- package/dist/{chunk-WNYWTFGW.js → chunk-CEFOZOOM.js} +4 -2
- package/dist/{chunk-56KKWLNI.js → chunk-H7V35NC2.js} +5 -3
- package/dist/{chunk-MSAV4J4I.js → chunk-I5GNJDHQ.js} +5 -3
- package/dist/{chunk-ZNITJ4KK.js → chunk-IKLBICOJ.js} +4 -2
- package/dist/{chunk-LZJTKVMO.js → chunk-KL554MEM.js} +4 -2
- package/dist/{chunk-4SU2KYPU.js → chunk-KPDUJFVD.js} +4 -2
- package/dist/{chunk-USKRM22W.js → chunk-O4U7Y3XL.js} +3 -2
- package/dist/{chunk-MOIU7MUA.js → chunk-OM63D4UH.js} +5 -3
- package/dist/{chunk-Q6SBH63R.js → chunk-QTNIUMSM.js} +4 -2
- package/dist/{chunk-WVRCIVAD.js → chunk-RQ2FWV24.js} +4 -2
- package/dist/{chunk-QBIVW7E6.js → chunk-SAN4IX6N.js} +77 -2
- package/dist/{chunk-AROOQ5W6.js → chunk-VCX2XEF6.js} +4 -2
- package/dist/{chunk-OOHHW4K4.js → chunk-VPVCVSFH.js} +4 -2
- package/dist/{chunk-KADFN76X.js → chunk-WUTCZCQH.js} +1 -1
- package/dist/{chunk-APCXOCAO.js → chunk-YMWU4F7E.js} +4 -2
- 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 +1045 -965
- package/dist/index.js +82 -47
- package/dist/{layout-BnYUuWC2.d.ts → layout-B1QrIBm6.d.ts} +59 -1
- package/dist/meta.d.ts +42 -1
- package/dist/meta.js +215 -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.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { CSSProperties, ReactNode, ComponentType } from 'react';
|
|
3
|
-
import { D as DatePicker, a as DateRangePicker } from './DatePicker-CTDcFR7V.js';
|
|
4
|
-
export { b as DatePickerProps, c as DateRangePickerProps, d as DateRangeValue } from './DatePicker-CTDcFR7V.js';
|
|
5
|
-
import { S as SduiContainerLayoutProps, a as SduiColumnsScale, b as SduiWeightScale, c as SduiTextAlignScale } from './layout-BnYUuWC2.js';
|
|
6
|
-
export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, d as SduiAlignScale, e as SduiChildLayoutProps, f as SduiGapScale, g as SduiSpanScale, h as childLayoutFrom, i as columnsClass, j as containerLayoutStyle, t as typographyStyle } from './layout-BnYUuWC2.js';
|
|
7
3
|
import { S as SduiAction, a as SduiPropValue, b as SduiRule, c as SduiPage } from './types-D5Tkrynd.js';
|
|
8
4
|
export { d as SduiCalcRef, e as SduiChild, f as SduiIndexRef, g as SduiItemRef, h as SduiNode, i as SduiScalar, j as SduiStateRef } from './types-D5Tkrynd.js';
|
|
5
|
+
import { S as SduiBoxProps, a as SduiContainerLayoutProps, b as SduiColumnsScale, c as SduiGapScale, d as SduiWeightScale, e as SduiTextAlignScale } from './layout-B1QrIBm6.js';
|
|
6
|
+
export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, f as SduiAlignScale, g as SduiChildLayoutProps, h as SduiSizeScale, i as SduiSpanScale, j as childLayoutFrom, k as columnsClass, l as containerLayoutStyle, m as joinClass, n as mergeStyle, t as typographyStyle } from './layout-B1QrIBm6.js';
|
|
7
|
+
import { D as DatePickerProps, a as DateRangePickerProps } from './DatePicker-BndreCPl.js';
|
|
8
|
+
export { b as DatePicker, c as DateRangePicker, d as DateRangeValue } from './DatePicker-BndreCPl.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* 호스트 앱 연결점 — ERP에서는 라우터·erpFetch·SSE가 하던 일을
|
|
@@ -141,1085 +141,1121 @@ declare function useSduiAssetResolver(): SduiAssetResolver;
|
|
|
141
141
|
*/
|
|
142
142
|
declare function useSduiSandbox(): boolean;
|
|
143
143
|
|
|
144
|
+
/** SduiRenderer가 제공하는 액션 디스패처. 레지스트리의 복합 컴포넌트가 선언적 액션을 실행할 때 쓴다. */
|
|
145
|
+
type SduiDispatch = (action: SduiAction, eventValue?: unknown) => void;
|
|
146
|
+
declare function useSduiDispatch(): SduiDispatch;
|
|
147
|
+
|
|
144
148
|
/**
|
|
145
|
-
*
|
|
146
|
-
* 판정 자체는 하지 않는다. 호스트가 주입한 콜백(permission.tsx)에 질의만 위임한다.
|
|
149
|
+
* 목록 원격 조회 어댑터.
|
|
147
150
|
*
|
|
148
|
-
*
|
|
149
|
-
*
|
|
150
|
-
*
|
|
151
|
-
*
|
|
151
|
+
* core는 특정 HTTP 클라이언트에 묶이지 않는다 — ERP는 SWR(useErpQuery)로 조회했지만
|
|
152
|
+
* 라이브러리는 "endpoint + 파라미터 → { data, total }" 한 줄짜리 계약만 요구하고,
|
|
153
|
+
* 호스트가 자기 클라이언트(TanStack Query, SWR, 사내 fetch 래퍼…)를 끼워 넣는다.
|
|
154
|
+
*
|
|
155
|
+
* 조회 함수를 고르는 순서는 셋이다:
|
|
156
|
+
*
|
|
157
|
+
* 1. `SduiSearchDataProvider`로 **명시 주입**한 fetcher — 가장 세다. 조회를 통째로 소유하는
|
|
158
|
+
* 소비자(ERP RemoteSearchResults 등)의 뜻을 다른 무엇도 덮지 않는다.
|
|
159
|
+
* 2. 렌더러 어댑터의 `fetch` — 호스트가 자기 인증·에러 처리를 꽂아 둔 자리다. 여기를 거치면
|
|
160
|
+
* 소비 앱은 세션 규약을 그대로 태우고, 편집기 캔버스처럼 어댑터로 바깥을 막아 둔
|
|
161
|
+
* 자리에서는 목록 조회도 **함께 막힌다**. 예전에는 이 경로만 잠금 밖이라, 캔버스가
|
|
162
|
+
* 뜨는 것만으로 저장하지도 않은 스펙이 운영 API를 세션 쿠키와 함께 때렸다.
|
|
163
|
+
* 3. 둘 다 없으면 브라우저 fetch(어댑터를 안 준 SduiRenderer와 같은 정책) — 감싸지 않은
|
|
164
|
+
* 드롭인 소비자의 동작을 바꾸지 않기 위한 폴백이다.
|
|
152
165
|
*/
|
|
153
166
|
|
|
154
|
-
interface
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
167
|
+
interface SearchRow {
|
|
168
|
+
id: string;
|
|
169
|
+
[key: string]: unknown;
|
|
170
|
+
}
|
|
171
|
+
interface SearchPage {
|
|
172
|
+
data: SearchRow[];
|
|
173
|
+
total: number;
|
|
174
|
+
}
|
|
175
|
+
/**
|
|
176
|
+
* 목록 한 페이지를 가져온다. 실패하면 Error(사용자에게 보여줄 메시지)를 던진다.
|
|
177
|
+
* signal은 파라미터가 바뀌거나 언마운트될 때 중단 신호로 넘어온다.
|
|
178
|
+
*/
|
|
179
|
+
type SearchFetcher = (endpoint: string, params: URLSearchParams, signal: AbortSignal) => Promise<SearchPage>;
|
|
180
|
+
declare function SduiSearchDataProvider({ fetcher, children, }: {
|
|
181
|
+
fetcher: SearchFetcher;
|
|
163
182
|
children?: React__default.ReactNode;
|
|
183
|
+
}): React__default.JSX.Element;
|
|
184
|
+
declare function useSearchFetcher(): SearchFetcher;
|
|
185
|
+
interface RemotePageState {
|
|
186
|
+
page: SearchPage;
|
|
187
|
+
isLoading: boolean;
|
|
188
|
+
error: Error | null;
|
|
189
|
+
reload: () => void;
|
|
164
190
|
}
|
|
165
|
-
declare function Can({ entity, action, scope, fallback, children }: CanProps): React__default.JSX.Element;
|
|
166
|
-
|
|
167
191
|
/**
|
|
168
|
-
*
|
|
169
|
-
*
|
|
170
|
-
*
|
|
192
|
+
* endpoint+params 조회 훅. 라이브러리 안에 캐시를 두지 않는다(호스트 클라이언트의 몫) —
|
|
193
|
+
* 대신 직전 페이지를 유지해(keepPreviousData 상당) 페이지 이동 중 목록이 깜빡이지 않게 한다.
|
|
194
|
+
*
|
|
195
|
+
* 중단 신호는 fetcher에 넘기지만 호스트가 무시할 수도 있다(어댑터 계약상 선택 사항) —
|
|
196
|
+
* 그래서 늦게 도착한 응답은 아래 `alive` 검사로 한 번 더 버린다.
|
|
171
197
|
*/
|
|
198
|
+
declare function useRemoteSearchPage(endpoint: string, params: URLSearchParams): RemotePageState;
|
|
172
199
|
|
|
173
|
-
interface IconProps extends React__default.SVGAttributes<SVGSVGElement> {
|
|
174
|
-
/** kebab-case Lucide 이름 — "scan-line", "layers", "circle-alert". */
|
|
175
|
-
name: string;
|
|
176
|
-
/** 픽셀 박스. 기본 18. */
|
|
177
|
-
size?: number;
|
|
178
|
-
/** 기본 1.5. 32px 위에서만 2를 쓴다. */
|
|
179
|
-
strokeWidth?: number;
|
|
180
|
-
/** 주면 role="img" + aria-label. 장식 아이콘은 생략한다. */
|
|
181
|
-
title?: string;
|
|
182
|
-
}
|
|
183
200
|
/**
|
|
184
|
-
*
|
|
201
|
+
* 검색 툴바 — ERP `app/components/search/SearchToolbar.tsx`의 계약(타입·헬퍼·동작)을
|
|
202
|
+
* 그대로 옮긴 것. 스펙 호환이 목적이므로 값 규칙(쉼표 다중값, 느슨한 검색, 범위 키 이름)은
|
|
203
|
+
* 한 글자도 바꾸지 않았다.
|
|
185
204
|
*
|
|
186
|
-
*
|
|
187
|
-
*
|
|
188
|
-
*
|
|
205
|
+
* - 검색 버튼은 두지 않는다(Enter로 검색) — 시안 규칙 유지
|
|
206
|
+
* - 상세검색은 아이콘 버튼 → 드롭다운 패널(초기화/적용)
|
|
207
|
+
* - 적용된 조건은 칩(Tag)으로 나열되고, 다중 선택 칩은 값 하나씩 제거된다
|
|
189
208
|
*/
|
|
190
|
-
|
|
191
|
-
interface
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
/** xs 24 · sm 28 · md 32(기본) · lg 40 · xl 48 px */
|
|
195
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
196
|
-
/** 선행 아이콘 이름 */
|
|
197
|
-
icon?: string;
|
|
198
|
-
/** 후행 아이콘 이름 */
|
|
199
|
-
iconEnd?: string;
|
|
200
|
-
/**
|
|
201
|
-
* 라벨을 감추고 스피너를 돌린다.
|
|
202
|
-
*
|
|
203
|
-
* 스피너는 **CSS가 그린다**(`.wp-btn--loading::after`) — 엘리먼트를 따로 넣지 않는다.
|
|
204
|
-
* 예전엔 `<span class="wp-spinner">`를 렌더했는데, 같은 클래스에 ::after 규칙을 가진
|
|
205
|
-
* 디자인 시스템 스타일시트와 겹치면 원이 두 개 돈다. 그릴 주체를 CSS 한쪽으로 모은다.
|
|
206
|
-
*/
|
|
207
|
-
loading?: boolean;
|
|
208
|
-
block?: boolean;
|
|
209
|
-
disabled?: boolean;
|
|
210
|
-
/**
|
|
211
|
-
* 다른 태그로 렌더한다. 링크로 보내야 하는 자리(SSO 이동 등)는 `as="a"` + `href`다 —
|
|
212
|
-
* `<button>`에 href를 달면 아무 데도 가지 않는다.
|
|
213
|
-
*
|
|
214
|
-
* button이 아닐 때는 `disabled` 속성이 없으므로 비활성은 `aria-disabled`로만 알린다
|
|
215
|
-
* (그래서 button일 때도 둘 다 붙인다 — 표기가 태그에 따라 달라지지 않게).
|
|
216
|
-
*/
|
|
217
|
-
as?: 'button' | 'a' | 'span';
|
|
218
|
-
children?: React__default.ReactNode;
|
|
219
|
-
}
|
|
220
|
-
declare function Button({ variant, size, icon, iconEnd, loading, block, disabled, as, children, className, ...rest }: ButtonProps): React__default.JSX.Element;
|
|
221
|
-
interface IconButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
222
|
-
icon: string;
|
|
223
|
-
/** 접근성 라벨(필수 권장) — title이자 aria-label이 된다. */
|
|
224
|
-
label?: string;
|
|
225
|
-
/** xs 24 · sm 28 · md 32(기본) · lg 40 px 정사각 */
|
|
226
|
-
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
227
|
-
/**
|
|
228
|
-
* 예전 이름. `variant`를 주지 않았을 때만 쓰인다 — `variant` 주석 참고.
|
|
229
|
-
* @deprecated `variant`로 옮겨라. `tone="danger"`는 `variant="danger"`와 같다.
|
|
230
|
-
*/
|
|
231
|
-
tone?: 'default' | 'danger';
|
|
232
|
-
/**
|
|
233
|
-
* 디자인 시스템 어휘. ghost = 투명(기본) · outlined = 하드라인 테두리 ·
|
|
234
|
-
* solid = 채움 · danger = 빨강 · onchrome = 네이비 사이드바/탑바 위.
|
|
235
|
-
*
|
|
236
|
-
* 같은 자리를 가리키는 프롭이 `tone`과 둘로 갈라져 있는데 **variant가 이긴다** —
|
|
237
|
-
* 스펙과 디자인 시스템 문서가 쓰는 이름이 이쪽이고, 값 어휘도 넓다(outlined는 tone에 없다).
|
|
238
|
-
* variant를 주지 않으면 tone이 그대로 먹으므로 tone만 쓰던 코드는 그대로 돈다.
|
|
239
|
-
*/
|
|
240
|
-
variant?: 'ghost' | 'outlined' | 'solid' | 'danger' | 'onchrome';
|
|
241
|
-
/** 토글 상태 — aria-pressed로 나가고 선택 틴트를 입는다. */
|
|
242
|
-
pressed?: boolean;
|
|
243
|
-
disabled?: boolean;
|
|
244
|
-
}
|
|
245
|
-
declare function IconButton({ icon, label, size, tone, variant, pressed, disabled, className, type, ...rest }: IconButtonProps): React__default.JSX.Element;
|
|
246
|
-
interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
247
|
-
/** sm 28 · md 32(기본) · lg 40 px */
|
|
248
|
-
size?: 'sm' | 'md' | 'lg';
|
|
249
|
-
/** 선행 아이콘 이름 (예: "search") */
|
|
250
|
-
icon?: string;
|
|
251
|
-
/** 빨간 테두리 — Field error와 함께 사용 */
|
|
252
|
-
invalid?: boolean;
|
|
253
|
-
/** 고정폭 글꼴 — ID, 좌표, 해시 */
|
|
254
|
-
mono?: boolean;
|
|
255
|
-
/**
|
|
256
|
-
* 입력 오른쪽 끝에 겹쳐 그리는 후행 표시.
|
|
257
|
-
*
|
|
258
|
-
* **문자열은 아이콘 이름으로 읽는다** — `trailing="eye"`(비밀번호 보기)가 원래 용례다.
|
|
259
|
-
* 등록되지 않은 이름이면 Icon이 null을 내므로 자리만 남는다. 단위 글자("원", "mm")를
|
|
260
|
-
* 넣고 싶으면 문자열이 아니라 노드로 줘라: `trailing={<span>원</span>}`.
|
|
261
|
-
*/
|
|
262
|
-
trailing?: React__default.ReactNode;
|
|
209
|
+
|
|
210
|
+
interface SearchOption {
|
|
211
|
+
label: string;
|
|
212
|
+
value: string;
|
|
263
213
|
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
invalid?: boolean;
|
|
267
|
-
rows?: number;
|
|
214
|
+
interface CascadingSearchOption extends SearchOption {
|
|
215
|
+
children?: CascadingSearchOption[];
|
|
268
216
|
}
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
217
|
+
type SearchField = {
|
|
218
|
+
type?: 'text';
|
|
219
|
+
key: string;
|
|
272
220
|
label: string;
|
|
273
|
-
disabled?: boolean;
|
|
274
|
-
}
|
|
275
|
-
interface SelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
|
|
276
|
-
options: SelectOption[];
|
|
277
|
-
size?: 'sm' | 'md' | 'lg';
|
|
278
|
-
invalid?: boolean;
|
|
279
|
-
/** 비어 있는 첫 옵션 */
|
|
280
221
|
placeholder?: string;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
222
|
+
} | {
|
|
223
|
+
/** 다중 선택 — 값은 쉼표로 합쳐 저장한다 */
|
|
224
|
+
type: 'select';
|
|
225
|
+
key: string;
|
|
226
|
+
label: string;
|
|
227
|
+
options: SearchOption[];
|
|
228
|
+
allLabel?: string;
|
|
229
|
+
} | {
|
|
230
|
+
type: 'dateRange';
|
|
231
|
+
key: string;
|
|
232
|
+
label: string;
|
|
233
|
+
fromKey?: string;
|
|
234
|
+
toKey?: string;
|
|
235
|
+
} | {
|
|
236
|
+
type: 'numberRange';
|
|
237
|
+
key: string;
|
|
238
|
+
label: string;
|
|
239
|
+
fromKey?: string;
|
|
240
|
+
toKey?: string;
|
|
241
|
+
minPlaceholder?: string;
|
|
242
|
+
maxPlaceholder?: string;
|
|
243
|
+
} | {
|
|
286
244
|
/**
|
|
287
|
-
*
|
|
288
|
-
*
|
|
289
|
-
* HTML 속성이 아니라 DOM 프로퍼티라 ref로 직접 넣어야 한다(마크업에 남지 않는다).
|
|
290
|
-
* 글리프도 체크가 아니라 빼기로 바뀐다.
|
|
245
|
+
* 계층 다중 선택 — 단계별 체크박스 목록 체인. 선택된 값들을 쉼표로 합쳐 저장하며,
|
|
246
|
+
* 부모를 선택하면 그 자손 선택은 제거되고 자손을 선택하면 그 조상 선택이 제거된다.
|
|
291
247
|
*/
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
248
|
+
type: 'cascading';
|
|
249
|
+
key: string;
|
|
250
|
+
label: string;
|
|
251
|
+
options: CascadingSearchOption[];
|
|
252
|
+
allLabel?: string;
|
|
253
|
+
};
|
|
254
|
+
type SearchValues = Record<string, string>;
|
|
255
|
+
declare function splitMultiValue(value: string): string[];
|
|
256
|
+
declare function joinMultiValue(values: string[]): string;
|
|
257
|
+
declare function normalizeSearchText(value: string): string;
|
|
258
|
+
declare function includesLooseSearch(text: string, keyword: string): boolean;
|
|
259
|
+
/** 필드가 점유하는 파라미터 키 전체 — 범위 필드는 From/To(Min/Max) 두 개다 */
|
|
260
|
+
declare function searchFieldKeys(fields: SearchField[]): string[];
|
|
261
|
+
declare function searchValuesFromParams(fields: SearchField[], params: URLSearchParams): SearchValues;
|
|
262
|
+
declare function cleanSearchValues(fields: SearchField[], values: SearchValues): SearchValues;
|
|
263
|
+
/**
|
|
264
|
+
* 값 → 자기 자신을 포함한 조상 값 목록(루트→자신 순).
|
|
265
|
+
* SearchResults의 클라이언트 필터링에서 "부모 선택 = 자손 값 매칭"을 구현할 때 쓴다.
|
|
266
|
+
*/
|
|
267
|
+
declare function cascadingValuePaths(options: CascadingSearchOption[]): Map<string, string[]>;
|
|
268
|
+
interface SearchToolbarProps {
|
|
269
|
+
search: string;
|
|
270
|
+
onSearchChange: (value: string) => void;
|
|
271
|
+
onSearch: (search: string, advancedValues: SearchValues) => void;
|
|
272
|
+
advancedFields?: SearchField[];
|
|
273
|
+
advancedValues?: SearchValues;
|
|
274
|
+
placeholder?: string;
|
|
275
|
+
className?: string;
|
|
276
|
+
/** 필터 전용 모드: 검색 입력창 없이 상세검색 버튼+칩만 보여준다 */
|
|
277
|
+
hideSearchInput?: boolean;
|
|
300
278
|
}
|
|
301
|
-
declare function
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
actions?: React__default.ReactNode;
|
|
320
|
-
/** 우측 정렬 푸터 행 */
|
|
321
|
-
footer?: React__default.ReactNode;
|
|
322
|
-
variant?: 'default' | 'raised' | 'flat' | 'sunken';
|
|
323
|
-
selected?: boolean;
|
|
324
|
-
interactive?: boolean;
|
|
325
|
-
/** default 20px · tight 14px · none(테이블, 리스트) */
|
|
326
|
-
padding?: 'default' | 'tight' | 'none';
|
|
327
|
-
children?: React__default.ReactNode;
|
|
328
|
-
}
|
|
329
|
-
declare function Card({ title, subtitle, actions, footer, variant, selected, interactive, padding, children, className, ...rest }: CardProps): React__default.JSX.Element;
|
|
330
|
-
interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
|
|
331
|
-
tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
|
|
332
|
-
/** 선행 5px 점 — 라이브/진행 상태 */
|
|
333
|
-
dot?: boolean;
|
|
334
|
-
size?: 'md' | 'lg';
|
|
335
|
-
children?: React__default.ReactNode;
|
|
336
|
-
}
|
|
337
|
-
declare function Badge({ tone, dot, size, children, className, ...rest }: BadgeProps): React__default.JSX.Element;
|
|
338
|
-
interface TagProps extends React__default.HTMLAttributes<HTMLSpanElement> {
|
|
339
|
-
/** 선행 점의 CSS 색상 */
|
|
340
|
-
color?: string;
|
|
341
|
-
filled?: boolean;
|
|
342
|
-
onRemove?: (e: React__default.MouseEvent) => void;
|
|
343
|
-
children?: React__default.ReactNode;
|
|
344
|
-
}
|
|
345
|
-
declare function Tag({ color, filled, onRemove, children, className, ...rest }: TagProps): React__default.JSX.Element;
|
|
346
|
-
interface AlertProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
347
|
-
tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
348
|
-
title?: React__default.ReactNode;
|
|
349
|
-
children?: React__default.ReactNode;
|
|
350
|
-
actions?: React__default.ReactNode;
|
|
351
|
-
onClose?: () => void;
|
|
352
|
-
/**
|
|
353
|
-
* 테두리를 왼쪽 색 막대 하나로 바꾼다(모서리도 각지게 편다).
|
|
354
|
-
*
|
|
355
|
-
* 화면 맨 위에 놓여 먼저 읽혀야 하는 공지 — 개인정보 보호 안내, 업로드 절차 안내처럼
|
|
356
|
-
* 카드 안의 알림이 아니라 화면 폭을 가르는 배너로 보여야 하는 자리에 쓴다.
|
|
357
|
-
*/
|
|
358
|
-
bar?: boolean;
|
|
359
|
-
}
|
|
360
|
-
declare function Alert({ tone, title, children, actions, onClose, bar, className, ...rest }: AlertProps): React__default.JSX.Element;
|
|
361
|
-
interface ToastProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
362
|
-
tone?: 'info' | 'success' | 'warning' | 'danger';
|
|
363
|
-
title?: React__default.ReactNode;
|
|
364
|
-
children?: React__default.ReactNode;
|
|
365
|
-
/** 인라인 액션 하나 — 되돌리기 같은 것. Button variant="link"를 넣는다. */
|
|
366
|
-
action?: React__default.ReactNode;
|
|
367
|
-
onClose?: () => void;
|
|
368
|
-
}
|
|
369
|
-
/** 우하단 일시 알림. .wp-toast-region 안에 렌더링된다. */
|
|
370
|
-
declare function Toast({ tone, title, children, action, onClose, className, ...rest }: ToastProps): React__default.JSX.Element;
|
|
371
|
-
interface TabItem {
|
|
372
|
-
value: string;
|
|
373
|
-
label: React__default.ReactNode;
|
|
279
|
+
declare function SearchToolbar({ search, onSearchChange, onSearch, advancedFields, advancedValues, placeholder, className, hideSearchInput, }: SearchToolbarProps): React__default.JSX.Element;
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* 검색 결과 목록 — ERP `app/components/search/SearchResults.tsx`의 계약을 그대로 가져온 포팅.
|
|
283
|
+
* - 목록(Table)/카드 그리드(Card) 전환, 정렬, 좌/우 필터, 선택 후 일괄 액션, 페이지네이션
|
|
284
|
+
* - 데이터 가공(검색·필터·정렬·페이지 슬라이스)은 로컬 데이터 기준 클라이언트에서 수행하며,
|
|
285
|
+
* 서버 페이징으로 넘어가면 params를 그대로 백엔드 질의로 옮기면 된다
|
|
286
|
+
*
|
|
287
|
+
* ERP와 다른 점은 하나뿐이다: 검색/필터/페이지 파라미터를 URL에 직접 쓰지 않고
|
|
288
|
+
* `searchParams` + `onParamsChange`로만 다룬다(controlled). core는 라우터를 알지 않으며,
|
|
289
|
+
* 한 페이지에 목록이 여러 개 있어도 서로의 URL을 오염시키지 않는다.
|
|
290
|
+
*/
|
|
291
|
+
|
|
292
|
+
/** DS Badge 톤 */
|
|
293
|
+
type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
|
|
294
|
+
interface SearchAction<T> {
|
|
295
|
+
label: string;
|
|
296
|
+
onClick: (selectedItems: T[]) => void | Promise<void>;
|
|
374
297
|
icon?: string;
|
|
375
|
-
|
|
376
|
-
}
|
|
377
|
-
interface TabsProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
378
|
-
items: TabItem[];
|
|
379
|
-
value: string;
|
|
380
|
-
onChange?: (value: string) => void;
|
|
381
|
-
size?: 'md' | 'lg';
|
|
382
|
-
/** 네이비 탑바 위 — 밝은 글자, 빨간 인디케이터. */
|
|
383
|
-
onChrome?: boolean;
|
|
298
|
+
variant?: 'default' | 'destructive' | 'outline';
|
|
384
299
|
}
|
|
385
|
-
|
|
386
|
-
interface TableColumn {
|
|
300
|
+
interface SearchColumn<T> {
|
|
387
301
|
key: string;
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
302
|
+
title: string;
|
|
303
|
+
sortable?: boolean;
|
|
304
|
+
/** DS Table은 left/right만 지원한다 */
|
|
305
|
+
textAlign?: 'left' | 'right';
|
|
306
|
+
/** 상대 폭 — 전체 ratio 합 대비 % 폭으로 환산된다 */
|
|
307
|
+
ratio?: number;
|
|
392
308
|
mono?: boolean;
|
|
393
309
|
strong?: boolean;
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
/**
|
|
397
|
-
* 셀 값을 Badge로 렌더링 — JSON 스펙에서 쓸 수 있는 선언적 지정.
|
|
398
|
-
* toneMap: 값 → tone, labelMap: 값 → 표시 텍스트(생략 시 값 그대로)
|
|
399
|
-
*/
|
|
400
|
-
badge?: {
|
|
401
|
-
toneMap?: Record<string, string>;
|
|
402
|
-
labelMap?: Record<string, string>;
|
|
403
|
-
};
|
|
404
|
-
/** 프로그래매틱 사용 전용 — JSON 스펙에서는 쓸 수 없다 */
|
|
405
|
-
render?: (row: any, index: number) => React__default.ReactNode;
|
|
310
|
+
accessor?: (item: T) => string | number | Date | null | undefined;
|
|
311
|
+
render?: (item: T) => React__default.ReactNode;
|
|
406
312
|
}
|
|
407
|
-
interface
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
dense?: boolean;
|
|
412
|
-
hover?: boolean;
|
|
413
|
-
/** 스크롤 본문용 고정 헤더 */
|
|
414
|
-
sticky?: boolean;
|
|
415
|
-
/** 현재 정렬 상태 — 해당 컬럼 헤더의 화살표 방향을 정한다 */
|
|
416
|
-
sort?: {
|
|
313
|
+
interface SearchFilter {
|
|
314
|
+
key: string;
|
|
315
|
+
label: string;
|
|
316
|
+
options: {
|
|
417
317
|
key: string;
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
onSort?: (key: string) => void;
|
|
422
|
-
/** 선택된 행의 rowKey 값 — 해당 행에 aria-selected가 붙고 하이라이트된다 */
|
|
423
|
-
selectedIds?: any[];
|
|
424
|
-
/** 행 key와 선택에 쓸 필드. 기본 "id" */
|
|
425
|
-
rowKey?: string;
|
|
426
|
-
onRowClick?: (row: any) => void;
|
|
427
|
-
/** rows가 비었을 때 대신 렌더링 — EmptyState 권장 */
|
|
428
|
-
empty?: React__default.ReactNode;
|
|
318
|
+
label: string;
|
|
319
|
+
value: string;
|
|
320
|
+
}[];
|
|
429
321
|
}
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
322
|
+
/**
|
|
323
|
+
* 목록/카드 전환 버튼 한 칸.
|
|
324
|
+
*
|
|
325
|
+
* 예전에는 이 두 칸(`목록`/`카드`)이 코드에 박혀 있어 스펙이 라벨·아이콘·순서를
|
|
326
|
+
* 바꿀 수 없었고, `disableGrid`/`disableList`로 **끄는 것만** 가능했다.
|
|
327
|
+
* 이제 `views`로 목록 자체를 정할 수 있고, 두 disable 프롭은 그 축약형으로 남는다.
|
|
328
|
+
*/
|
|
329
|
+
interface SearchViewItem {
|
|
330
|
+
value: 'grid' | 'list';
|
|
331
|
+
/** 생략 시 기본 아이콘 — list=list, grid=layout-grid */
|
|
439
332
|
icon?: string;
|
|
440
|
-
|
|
441
|
-
|
|
333
|
+
/** 생략 시 기본 라벨 — list=목록, grid=카드 */
|
|
334
|
+
label?: string;
|
|
442
335
|
}
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
actions?: React__default.ReactNode;
|
|
449
|
-
tight?: boolean;
|
|
336
|
+
interface GridCardRow<T> {
|
|
337
|
+
icon?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
|
|
338
|
+
label?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
|
|
339
|
+
value?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
|
|
340
|
+
show?: (item: T) => boolean;
|
|
450
341
|
}
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
342
|
+
interface GridCardConfig<T> {
|
|
343
|
+
title: (item: T) => React__default.ReactNode;
|
|
344
|
+
subtitle?: (item: T) => React__default.ReactNode;
|
|
345
|
+
badge?: (item: T) => {
|
|
346
|
+
text: React__default.ReactNode;
|
|
347
|
+
variant?: BadgeTone;
|
|
348
|
+
} | null;
|
|
349
|
+
actions?: (item: T) => React__default.ReactNode;
|
|
350
|
+
rows?: GridCardRow<T>[];
|
|
351
|
+
leftRows?: GridCardRow<T>[];
|
|
352
|
+
rightRows?: GridCardRow<T>[];
|
|
353
|
+
note?: (item: T) => React__default.ReactNode | null;
|
|
457
354
|
}
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
/** 사선 해치 애니메이션 — 진행 중인 작업에만 */
|
|
469
|
-
striped?: boolean;
|
|
470
|
-
label?: React__default.ReactNode;
|
|
355
|
+
interface SearchResultsProps<T> {
|
|
356
|
+
item: {
|
|
357
|
+
data: T[];
|
|
358
|
+
total: number;
|
|
359
|
+
};
|
|
360
|
+
columns: SearchColumn<T>[];
|
|
361
|
+
gridConfig?: GridCardConfig<T>;
|
|
362
|
+
leftFilters?: SearchFilter[];
|
|
363
|
+
rightFilters?: SearchFilter[];
|
|
364
|
+
initialView?: 'grid' | 'list';
|
|
471
365
|
/**
|
|
472
|
-
*
|
|
473
|
-
*
|
|
474
|
-
*
|
|
475
|
-
* 자리(공정별 진척 목록 등)에서 필요하다. 라벨이 있으면 라벨 줄 오른쪽 끝에,
|
|
476
|
-
* 라벨이 없으면 막대 오른쪽 옆(.wp-meter-row)에 붙는다.
|
|
366
|
+
* 노출할 보기 목록. 생략하면 목록/카드 두 칸이 기본값이고,
|
|
367
|
+
* 그때만 `disableGrid`/`disableList`가 목록을 깎는다(둘 다 오면 views가 이긴다).
|
|
368
|
+
* 한 칸만 남으면 전환 버튼 자체를 그리지 않는다.
|
|
477
369
|
*/
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
interface PaginationProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
482
|
-
page: number;
|
|
483
|
-
pageCount: number;
|
|
484
|
-
total?: number;
|
|
485
|
-
pageSize?: number;
|
|
486
|
-
onChange?: (page: number) => void;
|
|
487
|
-
}
|
|
488
|
-
declare function Pagination({ page, pageCount, total, pageSize, onChange, className, ...rest }: PaginationProps): React__default.JSX.Element;
|
|
489
|
-
interface DialogProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
490
|
-
title?: React__default.ReactNode;
|
|
491
|
-
subtitle?: React__default.ReactNode;
|
|
492
|
-
/** 타이틀 좌측 마크 안의 아이콘 이름 */
|
|
493
|
-
icon?: string;
|
|
494
|
-
tone?: 'brand' | 'danger';
|
|
495
|
-
/** sm 380 · md 480(기본) · lg 680 · xl 880 px */
|
|
496
|
-
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
497
|
-
/** 우측 정렬 액션 행 — 보조 버튼 다음 주 버튼 */
|
|
498
|
-
footer?: React__default.ReactNode;
|
|
499
|
-
onClose?: () => void;
|
|
500
|
-
children?: React__default.ReactNode;
|
|
501
|
-
}
|
|
502
|
-
/** 모달 본체. 오버레이가 가장 가까운 포지셔닝 조상을 채운다 — SDUI에서는 SduiDialog 래퍼가 뷰포트에 고정한다. */
|
|
503
|
-
declare function Dialog({ title, subtitle, icon, tone, size, footer, onClose, children, className, ...rest }: DialogProps): React__default.JSX.Element;
|
|
504
|
-
/** 배타 뷰 전환 스위치. 항목 2~4개까지, 그보다 많으면 Select다. */
|
|
505
|
-
interface SegmentedItem {
|
|
506
|
-
value: string;
|
|
507
|
-
label?: string;
|
|
508
|
-
/** 앞에 붙일 아이콘 이름 */
|
|
509
|
-
icon?: string;
|
|
510
|
-
}
|
|
511
|
-
interface SegmentedControlProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
512
|
-
items: SegmentedItem[];
|
|
513
|
-
value: string;
|
|
514
|
-
onChange?: (value: string) => void;
|
|
515
|
-
/** md(24px 항목, 기본) · lg(30px) */
|
|
516
|
-
size?: 'md' | 'lg';
|
|
370
|
+
views?: SearchViewItem[];
|
|
371
|
+
/** 페이지당 건수 선택지. 생략 시 [10, 20, 50, 100]. 첫 값이 기본 페이지 크기다. */
|
|
372
|
+
pageSizes?: number[];
|
|
517
373
|
className?: string;
|
|
374
|
+
/** 바깥에서 온 인라인 style — 자기 축(폭·여백)이 이 컴포넌트에도 닿게 하는 통로다. */
|
|
375
|
+
style?: React__default.CSSProperties;
|
|
376
|
+
/** 검색/필터/페이지 파라미터 (controlled) */
|
|
377
|
+
searchParams: URLSearchParams;
|
|
378
|
+
onParamsChange: (next: URLSearchParams) => void;
|
|
379
|
+
/** 선택 액션 — 있으면 체크박스 선택이 활성화된다 */
|
|
380
|
+
actions?: SearchAction<T>[];
|
|
381
|
+
disableGrid?: boolean;
|
|
382
|
+
disableList?: boolean;
|
|
383
|
+
onRowClick?: (item: T) => void;
|
|
384
|
+
/** 화면에는 카운트만 표시 — 접근성 레이블·빈 상태 문구에 사용 */
|
|
385
|
+
title: string;
|
|
386
|
+
headerActions?: React__default.ReactNode;
|
|
387
|
+
isLoading?: boolean;
|
|
388
|
+
hideHeader?: boolean;
|
|
389
|
+
advancedSearchFields?: SearchField[];
|
|
390
|
+
searchPlaceholder?: string;
|
|
391
|
+
/**
|
|
392
|
+
* 가상 스크롤(대용량 목록) — true면 기본 임계값 150행, 숫자면 그 값이 임계값.
|
|
393
|
+
* 목록 뷰에서 행 수가 임계값을 넘으면 페이지 슬라이스 대신 전체 목록을 창 렌더한다
|
|
394
|
+
* (서버 페이징 모드에서는 현재 응답 분량만 가상화).
|
|
395
|
+
*/
|
|
396
|
+
virtual?: boolean | number;
|
|
518
397
|
}
|
|
519
398
|
/**
|
|
520
|
-
*
|
|
399
|
+
* 스펙이 준 페이지 크기 목록을 다듬는다 — 양의 정수만, 중복 제거, 오름차순.
|
|
400
|
+
* 쓸 값이 하나도 없으면 undefined를 돌려 기본 선택지를 쓰게 한다.
|
|
401
|
+
*/
|
|
402
|
+
declare function normalizePageSizes(sizes: number[] | undefined): number[] | undefined;
|
|
403
|
+
declare function SearchResults<T extends {
|
|
404
|
+
id: string;
|
|
405
|
+
}>({ item, columns, gridConfig, leftFilters, rightFilters, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields, searchPlaceholder, virtual, }: SearchResultsProps<T>): React__default.JSX.Element;
|
|
406
|
+
|
|
407
|
+
/**
|
|
408
|
+
* 셀 표현 어휘 — 목록 컬럼의 셀과 카드 행의 값이 **같은 규칙**을 쓴다.
|
|
521
409
|
*
|
|
522
|
-
* `
|
|
523
|
-
*
|
|
410
|
+
* 예전에는 스펙이 고를 수 있는 표현이 `badge` 하나뿐이었고 나머지는 `row[key]` 원문
|
|
411
|
+
* 출력이었다. 밑에 깔린 `SearchColumn.render`는 임의의 노드를 그릴 수 있는데 스펙에는
|
|
412
|
+
* 그 역량이 두 종류(원문/배지)로만 열려 있었다는 뜻이다. 여기서 그 구멍을 메운다.
|
|
413
|
+
*
|
|
414
|
+
* 규약 두 가지:
|
|
415
|
+
* - **모르는 type은 원문으로 강등한다.** 스펙은 신뢰할 수 없는 입력이고, 컬럼 하나 때문에
|
|
416
|
+
* 목록 전체가 비면 안 된다. 판별 유니언이라 새 type을 더해도 옛 스펙은 그대로 돈다.
|
|
417
|
+
* - **값을 해석하지 못하면 원문을 그대로 낸다.** ERP는 이미 서식된 문자열(`"12,400,000"`,
|
|
418
|
+
* `"2026-07-31 09:00"`)을 내려주는 자리가 많아, 파싱 실패를 빈칸으로 만들면 퇴행이다.
|
|
524
419
|
*/
|
|
525
|
-
|
|
526
|
-
/**
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
src?: string;
|
|
532
|
-
/** hex(기본, 심볼 실루엣) · round(사람) · square(자산) */
|
|
533
|
-
shape?: 'hex' | 'round' | 'square';
|
|
534
|
-
/** xs 20 · sm 24 · md 28(기본) · lg 36 · xl 48 px */
|
|
535
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
536
|
-
/** brand 네이비(기본) · muted 회색 · accent 레드 */
|
|
537
|
-
tone?: 'brand' | 'muted' | 'accent';
|
|
538
|
-
className?: string;
|
|
539
|
-
}
|
|
540
|
-
/** 사람/자산 표식. 기본은 육각형 — 심볼의 실루엣이다. */
|
|
541
|
-
declare function Avatar({ name, src, shape, size, tone, className, ...rest }: AvatarProps): React__default.JSX.Element;
|
|
542
|
-
/** 프로젝트에서 개별 객체까지의 위치. 4단계를 넘으면 가운데를 접는다. */
|
|
543
|
-
interface BreadcrumbItem {
|
|
544
|
-
label: React__default.ReactNode;
|
|
545
|
-
href?: string;
|
|
546
|
-
icon?: string;
|
|
547
|
-
onClick?: () => void;
|
|
420
|
+
|
|
421
|
+
/** ProgressBar가 받는 톤 */
|
|
422
|
+
type MeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'info';
|
|
423
|
+
/** 값을 그대로 출력한다. cell을 생략한 것과 같으며, 명시하고 싶을 때 쓴다. */
|
|
424
|
+
interface SduiTextCell {
|
|
425
|
+
type: 'text';
|
|
548
426
|
}
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
427
|
+
/** 값을 배지로. 톤은 값별 매핑(없는 값은 neutral). */
|
|
428
|
+
interface SduiBadgeCell {
|
|
429
|
+
type: 'badge';
|
|
430
|
+
toneMap?: Record<string, BadgeTone>;
|
|
552
431
|
}
|
|
553
|
-
/**
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
description?: React__default.ReactNode;
|
|
559
|
-
disabled?: boolean;
|
|
432
|
+
/** 값을 태그로. 선행 점 색은 값별 매핑(CSS 색상 문자열). */
|
|
433
|
+
interface SduiTagCell {
|
|
434
|
+
type: 'tag';
|
|
435
|
+
colorMap?: Record<string, string>;
|
|
436
|
+
filled?: boolean;
|
|
560
437
|
}
|
|
561
|
-
/**
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
438
|
+
/**
|
|
439
|
+
* 값을 링크로. `to`는 `/assets/{id}` 처럼 행의 필드를 `{키}`로 끼워 넣는 경로 템플릿이고,
|
|
440
|
+
* 클릭하면 navigate 액션이 나간다(렌더러가 대상 안전성을 다시 검사한다).
|
|
441
|
+
*/
|
|
442
|
+
interface SduiLinkCell {
|
|
443
|
+
type: 'link';
|
|
444
|
+
to: string;
|
|
445
|
+
/** 링크 문구로 쓸 필드 — 생략하면 컬럼 자신의 값 */
|
|
446
|
+
labelKey?: string;
|
|
567
447
|
icon?: string;
|
|
568
|
-
meta?: React__default.ReactNode;
|
|
569
|
-
href?: string;
|
|
570
|
-
}
|
|
571
|
-
interface SidebarNavSection {
|
|
572
|
-
label?: React__default.ReactNode;
|
|
573
|
-
items: SidebarNavItem[];
|
|
574
|
-
}
|
|
575
|
-
interface SidebarNavProps extends Omit<React__default.HTMLAttributes<HTMLElement>, 'onSelect'> {
|
|
576
|
-
sections: SidebarNavSection[];
|
|
577
|
-
value?: string;
|
|
578
|
-
onSelect?: (value: string) => void;
|
|
579
|
-
/** 아이콘만 남기는 56px 레일 */
|
|
580
|
-
collapsed?: boolean;
|
|
581
|
-
/** 흰 표면(설정 하위 내비) 위에 쓰는 밝은 변형 */
|
|
582
|
-
light?: boolean;
|
|
583
|
-
className?: string;
|
|
584
448
|
}
|
|
585
|
-
/**
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
593
|
-
/** 여러 줄 허용(최대 240px) */
|
|
594
|
-
wrap?: boolean;
|
|
595
|
-
children?: React__default.ReactNode;
|
|
596
|
-
className?: string;
|
|
449
|
+
/** 값을 진행 막대로. 분모는 maxKey(행의 필드) → max → 100 순으로 정한다. */
|
|
450
|
+
interface SduiProgressCell {
|
|
451
|
+
type: 'progress';
|
|
452
|
+
max?: number;
|
|
453
|
+
maxKey?: string;
|
|
454
|
+
tone?: MeterTone;
|
|
455
|
+
showValue?: boolean;
|
|
597
456
|
}
|
|
598
|
-
/**
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
template?: string;
|
|
606
|
-
className?: string;
|
|
607
|
-
style?: React__default.CSSProperties;
|
|
608
|
-
children?: React__default.ReactNode;
|
|
457
|
+
/** 값을 아이콘으로. iconMap에 없는 값은 icon(공통 기본)으로, 그것도 없으면 원문으로. */
|
|
458
|
+
interface SduiIconCell {
|
|
459
|
+
type: 'icon';
|
|
460
|
+
iconMap?: Record<string, string>;
|
|
461
|
+
icon?: string;
|
|
462
|
+
/** 아이콘 뒤에 값도 적는다 */
|
|
463
|
+
withLabel?: boolean;
|
|
609
464
|
}
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
465
|
+
/**
|
|
466
|
+
* 숫자 서식(ko-KR 천단위) + 접두/접미. 통화는 `{ type:'number', suffix:'원' }`이다 —
|
|
467
|
+
* `currency` 타입을 따로 두지 않은 이유는 ERP가 원화 단일이고, 그 자리에 필요한 것이
|
|
468
|
+
* 통화 기호가 아니라 "단위 문자열"이기 때문이다(원·건·개·%·kg).
|
|
469
|
+
*/
|
|
470
|
+
interface SduiNumberCell {
|
|
471
|
+
type: 'number';
|
|
472
|
+
/** 소수 자릿수 (기본 0) */
|
|
473
|
+
digits?: number;
|
|
474
|
+
prefix?: string;
|
|
475
|
+
suffix?: string;
|
|
618
476
|
}
|
|
619
|
-
|
|
620
|
-
interface
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
className?: string;
|
|
624
|
-
style?: React__default.CSSProperties;
|
|
625
|
-
children?: React__default.ReactNode;
|
|
477
|
+
/** 날짜 서식(ko-KR). 파싱되지 않는 값은 원문 그대로. */
|
|
478
|
+
interface SduiDateCell {
|
|
479
|
+
type: 'date';
|
|
480
|
+
format?: 'date' | 'datetime' | 'time';
|
|
626
481
|
}
|
|
482
|
+
type SduiCell = SduiTextCell | SduiBadgeCell | SduiTagCell | SduiLinkCell | SduiProgressCell | SduiIconCell | SduiNumberCell | SduiDateCell;
|
|
627
483
|
/**
|
|
628
|
-
*
|
|
629
|
-
*
|
|
630
|
-
* `justify = 'end'`가 **2단(타입별 기본)의 실제 사례**다. 전역 기본은 `.wp-row`의
|
|
631
|
-
* `flex-start`인데 이 타입만 `end`로 시작하고, 스펙이 `justify`를 주면 그것이 이긴다.
|
|
484
|
+
* 셀 스펙 → 렌더 함수. `undefined`를 돌려주면 호출자가 원문을 그대로 출력한다
|
|
485
|
+
* (표에서는 `<td>{row[key]}</td>`, 카드에서는 값 문자열).
|
|
632
486
|
*/
|
|
633
|
-
declare function
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
487
|
+
declare function cellRenderer(cell: SduiCell | undefined, key: string, dispatch: SduiDispatch): ((row: SearchRow) => React__default.ReactNode) | undefined;
|
|
488
|
+
|
|
489
|
+
/** JSON 컬럼 정의 — render 함수 대신 선언적 cell 스펙을 쓴다 */
|
|
490
|
+
interface SduiSearchColumn {
|
|
491
|
+
key: string;
|
|
492
|
+
title: string;
|
|
493
|
+
sortable?: boolean;
|
|
494
|
+
/** DS Table은 left/right만 지원 */
|
|
495
|
+
textAlign?: 'left' | 'right';
|
|
496
|
+
ratio?: number;
|
|
497
|
+
mono?: boolean;
|
|
498
|
+
strong?: boolean;
|
|
499
|
+
/** 셀 표현. 생략하면 row[key]를 그대로 출력한다 — 어휘는 `cells.tsx` 참고 */
|
|
500
|
+
cell?: SduiCell;
|
|
638
501
|
}
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
502
|
+
/**
|
|
503
|
+
* 카드 행 표시 조건.
|
|
504
|
+
* `key`만 주면 "그 값이 비어 있지 않을 때"다. 값이 없는 행을 감춰 카드 높이가
|
|
505
|
+
* 들쭉날쭉해지지 않게 하는 것이 주 용도라 그것이 기본 의미다.
|
|
506
|
+
*/
|
|
507
|
+
interface SduiRowCondition {
|
|
508
|
+
key: string;
|
|
509
|
+
equals?: string | number | boolean;
|
|
510
|
+
in?: Array<string | number>;
|
|
511
|
+
notEmpty?: boolean;
|
|
648
512
|
}
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
513
|
+
interface SduiGridCardRow {
|
|
514
|
+
label?: string;
|
|
515
|
+
valueKey: string;
|
|
516
|
+
/** 라벨 앞 아이콘 */
|
|
517
|
+
icon?: string;
|
|
518
|
+
/** 값 표현 — 컬럼 셀과 같은 어휘 */
|
|
519
|
+
cell?: SduiCell;
|
|
520
|
+
/** 조건부 행 */
|
|
521
|
+
showWhen?: SduiRowCondition;
|
|
655
522
|
}
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
/**
|
|
663
|
-
* 글자 굵기 — `preset`이 정한 굵기를 이 자리에서만 뒤집는다.
|
|
664
|
-
* 프리셋 19종이 크기·굵기·정렬을 묶어 놔 "본문 크기인데 굵게"를 만들 수 없던 것을 푼다.
|
|
665
|
-
*/
|
|
666
|
-
weight?: SduiWeightScale;
|
|
667
|
-
/** 글자 정렬. */
|
|
668
|
-
textAlign?: SduiTextAlignScale;
|
|
669
|
-
className?: string;
|
|
670
|
-
style?: React__default.CSSProperties;
|
|
671
|
-
/** children 대신 쓸 수 있는 내용 — 상태 바인딩({ "$state": ... })에 유용 */
|
|
672
|
-
value?: React__default.ReactNode;
|
|
673
|
-
children?: React__default.ReactNode;
|
|
523
|
+
/** 카드 우상단 버튼 — 이벤트 값으로 행 객체 전체가 전달된다 */
|
|
524
|
+
interface SduiGridCardAction {
|
|
525
|
+
label: string;
|
|
526
|
+
icon?: string;
|
|
527
|
+
variant?: 'default' | 'destructive' | 'outline';
|
|
528
|
+
run: SduiAction | SduiAction[];
|
|
674
529
|
}
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
530
|
+
interface SduiGridCard {
|
|
531
|
+
titleKey: string;
|
|
532
|
+
subtitleKey?: string;
|
|
533
|
+
badge?: {
|
|
534
|
+
key: string;
|
|
535
|
+
toneMap?: Record<string, BadgeTone>;
|
|
536
|
+
};
|
|
537
|
+
/** 한 열로 쌓는 행 */
|
|
538
|
+
rows?: SduiGridCardRow[];
|
|
539
|
+
/** 두 열 배치 — 좌/우 각각의 행 목록. rows와 함께 쓰면 두 열이 위, rows가 아래다 */
|
|
540
|
+
leftRows?: SduiGridCardRow[];
|
|
541
|
+
rightRows?: SduiGridCardRow[];
|
|
542
|
+
/** 카드 맨 아래 보조 문구로 쓸 필드 */
|
|
543
|
+
noteKey?: string;
|
|
544
|
+
actions?: SduiGridCardAction[];
|
|
687
545
|
}
|
|
688
|
-
interface
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
546
|
+
interface SduiSearchAction {
|
|
547
|
+
label: string;
|
|
548
|
+
icon?: string;
|
|
549
|
+
variant?: 'default' | 'destructive' | 'outline';
|
|
550
|
+
/** 실행할 선언적 액션 — 이벤트 값으로 선택된 행 id 배열이 전달된다 */
|
|
551
|
+
run: SduiAction | SduiAction[];
|
|
694
552
|
}
|
|
695
|
-
/**
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
553
|
+
/** 두 어댑터가 공유하는 선언적 프롭 */
|
|
554
|
+
interface SduiSearchCommonProps {
|
|
555
|
+
title: string;
|
|
556
|
+
columns: SduiSearchColumn[];
|
|
557
|
+
fields?: SearchField[];
|
|
558
|
+
leftFilters?: SearchFilter[];
|
|
559
|
+
rightFilters?: SearchFilter[];
|
|
560
|
+
gridCard?: SduiGridCard;
|
|
561
|
+
actions?: SduiSearchAction[];
|
|
562
|
+
initialView?: 'grid' | 'list';
|
|
563
|
+
/**
|
|
564
|
+
* 노출할 보기 목록(라벨·아이콘·순서). 생략하면 목록/카드 두 칸이 기본이다.
|
|
565
|
+
* gridCard 없이 카드 보기를 넣으면 빈 카드가 나오므로 여기서 걸러낸다.
|
|
566
|
+
*/
|
|
567
|
+
views?: SearchViewItem[];
|
|
568
|
+
/** 페이지당 건수 선택지. 생략 시 [10, 20, 50, 100] */
|
|
569
|
+
pageSizes?: number[];
|
|
570
|
+
disableGrid?: boolean;
|
|
571
|
+
disableList?: boolean;
|
|
572
|
+
searchPlaceholder?: string;
|
|
573
|
+
/** 행 클릭 시 실행할 액션 — 이벤트 값으로 행 객체 전체가 전달된다 */
|
|
574
|
+
rowClick?: SduiAction | SduiAction[];
|
|
575
|
+
/** 렌더러의 slots.headerActions가 이 프롭으로 들어온다 */
|
|
576
|
+
headerActions?: React__default.ReactNode;
|
|
577
|
+
/** 가상 스크롤 — true면 기본 임계값 150행, 숫자면 그 값이 임계값 (JSON 직렬화 가능) */
|
|
578
|
+
virtual?: boolean | number;
|
|
702
579
|
}
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
/** 보통 상태 참조({ "$state": ... })를 바인딩한다. truthy면 children을 렌더링. */
|
|
706
|
-
when?: unknown;
|
|
707
|
-
children?: React__default.ReactNode;
|
|
580
|
+
interface SduiSearchResultsProps extends SduiSearchCommonProps {
|
|
581
|
+
data: SearchRow[];
|
|
708
582
|
}
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
583
|
+
interface RemoteSearchResultsProps extends SduiSearchCommonProps {
|
|
584
|
+
/**
|
|
585
|
+
* 목록 endpoint — page/limit/search/필드키 쿼리를 붙여 조회하고
|
|
586
|
+
* `{ data: Row[]; total: number }`를 기대한다. 조회 자체는 어댑터(SearchFetcher)가 한다.
|
|
587
|
+
*/
|
|
588
|
+
endpoint: string;
|
|
589
|
+
/** 페이지당 행 수 (기본 10) — limit 파라미터의 초기값 */
|
|
590
|
+
pageSize?: number;
|
|
591
|
+
}
|
|
592
|
+
/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ../boxed.tsx}에 있다. */
|
|
593
|
+
declare const SduiSearchResults: React__default.FC<SduiSearchResultsProps & SduiBoxProps>;
|
|
594
|
+
/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ../boxed.tsx}에 있다. */
|
|
595
|
+
declare const RemoteSearchResults: React__default.FC<RemoteSearchResultsProps & SduiBoxProps>;
|
|
719
596
|
|
|
720
597
|
/**
|
|
721
|
-
* 목록
|
|
722
|
-
*
|
|
723
|
-
* core는 특정 HTTP 클라이언트에 묶이지 않는다 — ERP는 SWR(useErpQuery)로 조회했지만
|
|
724
|
-
* 라이브러리는 "endpoint + 파라미터 → { data, total }" 한 줄짜리 계약만 요구하고,
|
|
725
|
-
* 호스트가 자기 클라이언트(TanStack Query, SWR, 사내 fetch 래퍼…)를 끼워 넣는다.
|
|
726
|
-
*
|
|
727
|
-
* 조회 함수를 고르는 순서는 셋이다:
|
|
598
|
+
* 목록 표 — SearchResults 전용. 내장 `Table`은 정렬 헤더·선택 표시·가상 스크롤을
|
|
599
|
+
* 다루지 않으므로, 같은 wp-table 마크업/클래스를 유지한 채 그 세 가지를 더한 변형이다.
|
|
728
600
|
*
|
|
729
|
-
*
|
|
730
|
-
*
|
|
731
|
-
*
|
|
732
|
-
*
|
|
733
|
-
* 자리에서는 목록 조회도 **함께 막힌다**. 예전에는 이 경로만 잠금 밖이라, 캔버스가
|
|
734
|
-
* 뜨는 것만으로 저장하지도 않은 스펙이 운영 API를 세션 쿠키와 함께 때렸다.
|
|
735
|
-
* 3. 둘 다 없으면 브라우저 fetch(어댑터를 안 준 SduiRenderer와 같은 정책) — 감싸지 않은
|
|
736
|
-
* 드롭인 소비자의 동작을 바꾸지 않기 위한 폴백이다.
|
|
601
|
+
* 가상 스크롤은 **의존성 없이** 직접 구현한다(core는 무거운 외부 의존성을 갖지 않는다).
|
|
602
|
+
* ERP는 @tanstack/react-virtual을 썼지만, 여기서 필요한 건 "고정 행 높이 목록의 창"뿐이라
|
|
603
|
+
* scrollTop → 인덱스 범위 계산으로 충분하다. 렌더 범위 밖은 상/하단 스페이서 행으로 대체한다
|
|
604
|
+
* (<table> 마크업에서 transform 대신 안전하게 동작하는 방식).
|
|
737
605
|
*/
|
|
738
606
|
|
|
739
|
-
interface
|
|
740
|
-
|
|
741
|
-
|
|
607
|
+
interface ResultTableColumn<T> {
|
|
608
|
+
key: string;
|
|
609
|
+
header: React__default.ReactNode;
|
|
610
|
+
sortable?: boolean;
|
|
611
|
+
/** right → 우측 정렬 + tabular numerals (wp-table__num) */
|
|
612
|
+
align?: 'left' | 'right';
|
|
613
|
+
/** 고정폭 글꼴 셀 (wp-table__mono) */
|
|
614
|
+
mono?: boolean;
|
|
615
|
+
/** 강조 셀 (wp-table__strong) */
|
|
616
|
+
strong?: boolean;
|
|
617
|
+
/** CSS width — "180px", "22%" */
|
|
618
|
+
width?: string;
|
|
619
|
+
render?: (row: T, index: number) => React__default.ReactNode;
|
|
742
620
|
}
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
621
|
+
type SortDir = 'asc' | 'desc';
|
|
622
|
+
interface ResultTableProps<T extends {
|
|
623
|
+
id: string;
|
|
624
|
+
}> {
|
|
625
|
+
columns: ResultTableColumn<T>[];
|
|
626
|
+
rows: T[];
|
|
627
|
+
sort?: {
|
|
628
|
+
key: string;
|
|
629
|
+
dir: SortDir;
|
|
630
|
+
};
|
|
631
|
+
onSort?: (key: string) => void;
|
|
632
|
+
onRowClick?: (row: T) => void;
|
|
633
|
+
selectedIds?: string[];
|
|
634
|
+
/** rows가 비었을 때 표 대신 렌더 */
|
|
635
|
+
empty?: React__default.ReactNode;
|
|
636
|
+
/** true면 스크롤 창 안에서 보이는 행만 렌더한다 */
|
|
637
|
+
virtual?: boolean;
|
|
638
|
+
/** 가상 스크롤 컨테이너 높이(px). 기본 560 */
|
|
639
|
+
height?: number;
|
|
640
|
+
/** 가상 스크롤 행 높이(px) 초기 추정치. 첫 렌더 후 실측값으로 대체된다 — 기본 41(wp-table 기본 행) */
|
|
641
|
+
rowHeight?: number;
|
|
746
642
|
}
|
|
643
|
+
declare function ResultTable<T extends {
|
|
644
|
+
id: string;
|
|
645
|
+
}>({ columns, rows, sort, onSort, onRowClick, selectedIds, empty, virtual, height, rowHeight, }: ResultTableProps<T>): React__default.JSX.Element;
|
|
646
|
+
|
|
747
647
|
/**
|
|
748
|
-
*
|
|
749
|
-
*
|
|
648
|
+
* 권한 게이트 — 통과하면 children, 실패하면 fallback 슬롯(없으면 아무 것도)을 렌더한다.
|
|
649
|
+
* 판정 자체는 하지 않는다. 호스트가 주입한 콜백(permission.tsx)에 질의만 위임한다.
|
|
650
|
+
*
|
|
651
|
+
* 스펙 예 (ERP 85개 페이지 중 56개가 쓰는 형태 그대로):
|
|
652
|
+
* { "component": "Can",
|
|
653
|
+
* "props": { "entity": "asset", "action": "create" },
|
|
654
|
+
* "children": [ { "component": "Button", ... } ] }
|
|
750
655
|
*/
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
656
|
+
|
|
657
|
+
interface CanProps {
|
|
658
|
+
/** 대상 엔티티 식별자 */
|
|
659
|
+
entity: string;
|
|
660
|
+
/** 수행 동작 — 생략 시 'read'(ERP Can과 같은 기본값) */
|
|
661
|
+
action?: string;
|
|
662
|
+
/** 최소 적용 범위 — 생략 시 호스트 판정기의 기본값을 따른다 */
|
|
663
|
+
scope?: string;
|
|
664
|
+
/** 차단 시 대신 보여줄 내용 (JSON에서는 slots.fallback) */
|
|
665
|
+
fallback?: React__default.ReactNode;
|
|
754
666
|
children?: React__default.ReactNode;
|
|
755
|
-
}): React__default.JSX.Element;
|
|
756
|
-
declare function useSearchFetcher(): SearchFetcher;
|
|
757
|
-
interface RemotePageState {
|
|
758
|
-
page: SearchPage;
|
|
759
|
-
isLoading: boolean;
|
|
760
|
-
error: Error | null;
|
|
761
|
-
reload: () => void;
|
|
762
667
|
}
|
|
668
|
+
declare function Can({ entity, action, scope, fallback, children }: CanProps): React__default.JSX.Element;
|
|
669
|
+
|
|
763
670
|
/**
|
|
764
|
-
*
|
|
765
|
-
*
|
|
766
|
-
*
|
|
767
|
-
* 중단 신호는 fetcher에 넘기지만 호스트가 무시할 수도 있다(어댑터 계약상 선택 사항) —
|
|
768
|
-
* 그래서 늦게 도착한 응답은 아래 `alive` 검사로 한 번 더 버린다.
|
|
671
|
+
* 내장 기본 컴포넌트 세트 — WIPCO 디자인 시스템(wp-* 토큰)을 따르는
|
|
672
|
+
* 독립 구현. ERP 디자인 시스템과 같은 프롭 규약을 쓰므로 스펙이 호환된다.
|
|
673
|
+
* 스타일은 styles.css 한 파일이 담당한다.
|
|
769
674
|
*/
|
|
770
|
-
declare function useRemoteSearchPage(endpoint: string, params: URLSearchParams): RemotePageState;
|
|
771
675
|
|
|
676
|
+
interface IconProps extends React__default.SVGAttributes<SVGSVGElement> {
|
|
677
|
+
/** kebab-case Lucide 이름 — "scan-line", "layers", "circle-alert". */
|
|
678
|
+
name: string;
|
|
679
|
+
/** 픽셀 박스. 기본 18. */
|
|
680
|
+
size?: number;
|
|
681
|
+
/** 기본 1.5. 32px 위에서만 2를 쓴다. */
|
|
682
|
+
strokeWidth?: number;
|
|
683
|
+
/** 주면 role="img" + aria-label. 장식 아이콘은 생략한다. */
|
|
684
|
+
title?: string;
|
|
685
|
+
}
|
|
772
686
|
/**
|
|
773
|
-
*
|
|
774
|
-
* 그대로 옮긴 것. 스펙 호환이 목적이므로 값 규칙(쉼표 다중값, 느슨한 검색, 범위 키 이름)은
|
|
775
|
-
* 한 글자도 바꾸지 않았다.
|
|
687
|
+
* 스트로크 아이콘. 130종을 24px 그리드 위에 그린다.
|
|
776
688
|
*
|
|
777
|
-
*
|
|
778
|
-
*
|
|
779
|
-
*
|
|
689
|
+
* **등록되지 않은 이름은 `null`이다** — 예전엔 점(●)으로 대체했는데, 그러면 스펙 오타나
|
|
690
|
+
* 아직 안 넣은 이름이 "없던 자국"으로 화면에 남는다. 빠진 아이콘은 비어 보이는 편이
|
|
691
|
+
* 낫고, 어차피 잘못된 이름은 check-meta가 팔레트 쪽에서 잡는다.
|
|
780
692
|
*/
|
|
781
|
-
|
|
782
|
-
interface
|
|
783
|
-
|
|
784
|
-
|
|
693
|
+
declare function Icon({ name, size, strokeWidth, className, style, title, ...rest }: IconProps): React__default.JSX.Element | null;
|
|
694
|
+
interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
695
|
+
/** primary = WIPCO Blue, secondary = 외곽선(기본), ghost = 투명, danger = WIPCO Red, link = 인라인 */
|
|
696
|
+
variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
|
|
697
|
+
/** xs 24 · sm 28 · md 32(기본) · lg 40 · xl 48 px */
|
|
698
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
699
|
+
/** 선행 아이콘 이름 */
|
|
700
|
+
icon?: string;
|
|
701
|
+
/** 후행 아이콘 이름 */
|
|
702
|
+
iconEnd?: string;
|
|
703
|
+
/**
|
|
704
|
+
* 라벨을 감추고 스피너를 돌린다.
|
|
705
|
+
*
|
|
706
|
+
* 스피너는 **CSS가 그린다**(`.wp-btn--loading::after`) — 엘리먼트를 따로 넣지 않는다.
|
|
707
|
+
* 예전엔 `<span class="wp-spinner">`를 렌더했는데, 같은 클래스에 ::after 규칙을 가진
|
|
708
|
+
* 디자인 시스템 스타일시트와 겹치면 원이 두 개 돈다. 그릴 주체를 CSS 한쪽으로 모은다.
|
|
709
|
+
*/
|
|
710
|
+
loading?: boolean;
|
|
711
|
+
block?: boolean;
|
|
712
|
+
disabled?: boolean;
|
|
713
|
+
/**
|
|
714
|
+
* 다른 태그로 렌더한다. 링크로 보내야 하는 자리(SSO 이동 등)는 `as="a"` + `href`다 —
|
|
715
|
+
* `<button>`에 href를 달면 아무 데도 가지 않는다.
|
|
716
|
+
*
|
|
717
|
+
* button이 아닐 때는 `disabled` 속성이 없으므로 비활성은 `aria-disabled`로만 알린다
|
|
718
|
+
* (그래서 button일 때도 둘 다 붙인다 — 표기가 태그에 따라 달라지지 않게).
|
|
719
|
+
*/
|
|
720
|
+
as?: 'button' | 'a' | 'span';
|
|
721
|
+
/**
|
|
722
|
+
* 버튼 **안쪽** 내용(아이콘·글자)의 가로 정렬. 기본은 가운데다.
|
|
723
|
+
*
|
|
724
|
+
* `block`으로 폭을 늘리거나 `width`를 준 버튼에서만 뜻이 있다 — 그전에는 버튼이
|
|
725
|
+
* 내용만큼만 넓어 정렬할 여백이 없다. 실측: 스펙 85개가 `style.justifyContent:
|
|
726
|
+
* 'flex-start'`로 4번 손으로 쓰고 있었고, 전부 폭을 늘린 버튼이었다.
|
|
727
|
+
*/
|
|
728
|
+
justify?: 'start' | 'center' | 'end' | 'between';
|
|
729
|
+
children?: React__default.ReactNode;
|
|
785
730
|
}
|
|
786
|
-
|
|
787
|
-
|
|
731
|
+
declare function Button({ variant, size, icon, iconEnd, loading, block, disabled, as, justify, children, className, style, ...rest }: ButtonProps): React__default.JSX.Element;
|
|
732
|
+
interface IconButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
733
|
+
icon: string;
|
|
734
|
+
/** 접근성 라벨(필수 권장) — title이자 aria-label이 된다. */
|
|
735
|
+
label?: string;
|
|
736
|
+
/** xs 24 · sm 28 · md 32(기본) · lg 40 px 정사각 */
|
|
737
|
+
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
738
|
+
/**
|
|
739
|
+
* 예전 이름. `variant`를 주지 않았을 때만 쓰인다 — `variant` 주석 참고.
|
|
740
|
+
* @deprecated `variant`로 옮겨라. `tone="danger"`는 `variant="danger"`와 같다.
|
|
741
|
+
*/
|
|
742
|
+
tone?: 'default' | 'danger';
|
|
743
|
+
/**
|
|
744
|
+
* 디자인 시스템 어휘. ghost = 투명(기본) · outlined = 하드라인 테두리 ·
|
|
745
|
+
* solid = 채움 · danger = 빨강 · onchrome = 네이비 사이드바/탑바 위.
|
|
746
|
+
*
|
|
747
|
+
* 같은 자리를 가리키는 프롭이 `tone`과 둘로 갈라져 있는데 **variant가 이긴다** —
|
|
748
|
+
* 스펙과 디자인 시스템 문서가 쓰는 이름이 이쪽이고, 값 어휘도 넓다(outlined는 tone에 없다).
|
|
749
|
+
* variant를 주지 않으면 tone이 그대로 먹으므로 tone만 쓰던 코드는 그대로 돈다.
|
|
750
|
+
*/
|
|
751
|
+
variant?: 'ghost' | 'outlined' | 'solid' | 'danger' | 'onchrome';
|
|
752
|
+
/** 토글 상태 — aria-pressed로 나가고 선택 틴트를 입는다. */
|
|
753
|
+
pressed?: boolean;
|
|
754
|
+
disabled?: boolean;
|
|
788
755
|
}
|
|
789
|
-
type
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
/**
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
options: SearchOption[];
|
|
800
|
-
allLabel?: string;
|
|
801
|
-
} | {
|
|
802
|
-
type: 'dateRange';
|
|
803
|
-
key: string;
|
|
804
|
-
label: string;
|
|
805
|
-
fromKey?: string;
|
|
806
|
-
toKey?: string;
|
|
807
|
-
} | {
|
|
808
|
-
type: 'numberRange';
|
|
809
|
-
key: string;
|
|
810
|
-
label: string;
|
|
811
|
-
fromKey?: string;
|
|
812
|
-
toKey?: string;
|
|
813
|
-
minPlaceholder?: string;
|
|
814
|
-
maxPlaceholder?: string;
|
|
815
|
-
} | {
|
|
756
|
+
declare function IconButton({ icon, label, size, tone, variant, pressed, disabled, className, type, ...rest }: IconButtonProps): React__default.JSX.Element;
|
|
757
|
+
interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
758
|
+
/** sm 28 · md 32(기본) · lg 40 px */
|
|
759
|
+
size?: 'sm' | 'md' | 'lg';
|
|
760
|
+
/** 선행 아이콘 이름 (예: "search") */
|
|
761
|
+
icon?: string;
|
|
762
|
+
/** 빨간 테두리 — Field error와 함께 사용 */
|
|
763
|
+
invalid?: boolean;
|
|
764
|
+
/** 고정폭 글꼴 — ID, 좌표, 해시 */
|
|
765
|
+
mono?: boolean;
|
|
816
766
|
/**
|
|
817
|
-
*
|
|
818
|
-
*
|
|
767
|
+
* 입력 오른쪽 끝에 겹쳐 그리는 후행 표시.
|
|
768
|
+
*
|
|
769
|
+
* **문자열은 아이콘 이름으로 읽는다** — `trailing="eye"`(비밀번호 보기)가 원래 용례다.
|
|
770
|
+
* 등록되지 않은 이름이면 Icon이 null을 내므로 자리만 남는다. 단위 글자("원", "mm")를
|
|
771
|
+
* 넣고 싶으면 문자열이 아니라 노드로 줘라: `trailing={<span>원</span>}`.
|
|
819
772
|
*/
|
|
820
|
-
|
|
821
|
-
|
|
773
|
+
trailing?: React__default.ReactNode;
|
|
774
|
+
}
|
|
775
|
+
declare function Input({ size, icon, invalid, mono, trailing, className, style, ...rest }: InputProps): React__default.JSX.Element;
|
|
776
|
+
interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
777
|
+
invalid?: boolean;
|
|
778
|
+
rows?: number;
|
|
779
|
+
}
|
|
780
|
+
declare function Textarea({ invalid, rows, className, ...rest }: TextareaProps): React__default.JSX.Element;
|
|
781
|
+
interface SelectOption {
|
|
782
|
+
value: string;
|
|
822
783
|
label: string;
|
|
823
|
-
|
|
824
|
-
allLabel?: string;
|
|
825
|
-
};
|
|
826
|
-
type SearchValues = Record<string, string>;
|
|
827
|
-
declare function splitMultiValue(value: string): string[];
|
|
828
|
-
declare function joinMultiValue(values: string[]): string;
|
|
829
|
-
declare function normalizeSearchText(value: string): string;
|
|
830
|
-
declare function includesLooseSearch(text: string, keyword: string): boolean;
|
|
831
|
-
/** 필드가 점유하는 파라미터 키 전체 — 범위 필드는 From/To(Min/Max) 두 개다 */
|
|
832
|
-
declare function searchFieldKeys(fields: SearchField[]): string[];
|
|
833
|
-
declare function searchValuesFromParams(fields: SearchField[], params: URLSearchParams): SearchValues;
|
|
834
|
-
declare function cleanSearchValues(fields: SearchField[], values: SearchValues): SearchValues;
|
|
835
|
-
/**
|
|
836
|
-
* 값 → 자기 자신을 포함한 조상 값 목록(루트→자신 순).
|
|
837
|
-
* SearchResults의 클라이언트 필터링에서 "부모 선택 = 자손 값 매칭"을 구현할 때 쓴다.
|
|
838
|
-
*/
|
|
839
|
-
declare function cascadingValuePaths(options: CascadingSearchOption[]): Map<string, string[]>;
|
|
840
|
-
interface SearchToolbarProps {
|
|
841
|
-
search: string;
|
|
842
|
-
onSearchChange: (value: string) => void;
|
|
843
|
-
onSearch: (search: string, advancedValues: SearchValues) => void;
|
|
844
|
-
advancedFields?: SearchField[];
|
|
845
|
-
advancedValues?: SearchValues;
|
|
846
|
-
placeholder?: string;
|
|
847
|
-
className?: string;
|
|
848
|
-
/** 필터 전용 모드: 검색 입력창 없이 상세검색 버튼+칩만 보여준다 */
|
|
849
|
-
hideSearchInput?: boolean;
|
|
784
|
+
disabled?: boolean;
|
|
850
785
|
}
|
|
851
|
-
declare function SearchToolbar({ search, onSearchChange, onSearch, advancedFields, advancedValues, placeholder, className, hideSearchInput, }: SearchToolbarProps): React__default.JSX.Element;
|
|
852
|
-
|
|
853
786
|
/**
|
|
854
|
-
*
|
|
855
|
-
* - 목록(Table)/카드 그리드(Card) 전환, 정렬, 좌/우 필터, 선택 후 일괄 액션, 페이지네이션
|
|
856
|
-
* - 데이터 가공(검색·필터·정렬·페이지 슬라이스)은 로컬 데이터 기준 클라이언트에서 수행하며,
|
|
857
|
-
* 서버 페이징으로 넘어가면 params를 그대로 백엔드 질의로 옮기면 된다
|
|
787
|
+
* 자유 형식 옵션 — `valueKey`/`labelKey`가 가리키는 키로 읽는다.
|
|
858
788
|
*
|
|
859
|
-
*
|
|
860
|
-
*
|
|
861
|
-
*
|
|
789
|
+
* `AutocompleteOption`과 같은 모양(`Record<string, unknown>`)으로 맞췄다. 두 어휘가
|
|
790
|
+
* 같은 자리에서 같은 프롭 이름을 쓰는데 옵션 타입만 다르면 스펙 작성자가 둘 사이를
|
|
791
|
+
* 옮길 때마다 다시 배워야 한다.
|
|
862
792
|
*/
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
793
|
+
type SelectOptionRecord = Record<string, unknown>;
|
|
794
|
+
interface SelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
|
|
795
|
+
/**
|
|
796
|
+
* 옵션 목록. 기본은 `{value, label}`이고, 도메인 객체(`{id, title, …}`)를 그대로
|
|
797
|
+
* 넘길 거면 `valueKey`/`labelKey`로 읽을 키를 알려 준다.
|
|
798
|
+
*/
|
|
799
|
+
options: (SelectOption | SelectOptionRecord)[];
|
|
800
|
+
/** 옵션에서 값을 읽을 키. 기본 'value'. */
|
|
801
|
+
valueKey?: string;
|
|
802
|
+
/** 옵션에서 표시 라벨을 읽을 키. 기본 'label'. */
|
|
803
|
+
labelKey?: string;
|
|
804
|
+
size?: 'sm' | 'md' | 'lg';
|
|
805
|
+
invalid?: boolean;
|
|
806
|
+
/** 비어 있는 첫 옵션 */
|
|
807
|
+
placeholder?: string;
|
|
808
|
+
}
|
|
809
|
+
declare function Select({ options, valueKey, labelKey, size, invalid, placeholder, className, ...rest }: SelectProps): React__default.JSX.Element;
|
|
810
|
+
interface CheckboxProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
|
|
811
|
+
label?: React__default.ReactNode;
|
|
812
|
+
description?: React__default.ReactNode;
|
|
813
|
+
/**
|
|
814
|
+
* 부분 선택 — 전체선택 체크박스의 "일부만 골랐다" 상태.
|
|
815
|
+
*
|
|
816
|
+
* HTML 속성이 아니라 DOM 프로퍼티라 ref로 직접 넣어야 한다(마크업에 남지 않는다).
|
|
817
|
+
* 글리프도 체크가 아니라 빼기로 바뀐다.
|
|
818
|
+
*/
|
|
819
|
+
indeterminate?: boolean;
|
|
820
|
+
disabled?: boolean;
|
|
821
|
+
}
|
|
822
|
+
declare function Checkbox({ label, description, indeterminate, disabled, className, ...rest }: CheckboxProps): React__default.JSX.Element;
|
|
823
|
+
interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
824
|
+
label?: React__default.ReactNode;
|
|
825
|
+
size?: 'sm' | 'md';
|
|
826
|
+
disabled?: boolean;
|
|
827
|
+
}
|
|
828
|
+
declare function Switch({ label, size, disabled, className, ...rest }: SwitchProps): React__default.JSX.Element;
|
|
829
|
+
interface FieldProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
830
|
+
label?: React__default.ReactNode;
|
|
831
|
+
/** 에러가 없을 때 보여줄 안내 한 줄 */
|
|
832
|
+
hint?: React__default.ReactNode;
|
|
833
|
+
/** hint를 대체하고 빨간색으로 표시 */
|
|
834
|
+
error?: React__default.ReactNode;
|
|
835
|
+
required?: boolean;
|
|
836
|
+
htmlFor?: string;
|
|
837
|
+
/** stacked(기본) 또는 horizontal(132px 라벨 컬럼) */
|
|
838
|
+
layout?: 'stacked' | 'horizontal';
|
|
839
|
+
children?: React__default.ReactNode;
|
|
840
|
+
}
|
|
841
|
+
declare function Field({ label, hint, error, required, htmlFor, layout, children, className, ...rest }: FieldProps): React__default.JSX.Element;
|
|
842
|
+
interface CardProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
843
|
+
title?: React__default.ReactNode;
|
|
844
|
+
subtitle?: React__default.ReactNode;
|
|
845
|
+
/** 헤더 우측 — 버튼, Select 등 */
|
|
846
|
+
actions?: React__default.ReactNode;
|
|
847
|
+
/** 우측 정렬 푸터 행 */
|
|
848
|
+
footer?: React__default.ReactNode;
|
|
849
|
+
variant?: 'default' | 'raised' | 'flat' | 'sunken';
|
|
850
|
+
selected?: boolean;
|
|
851
|
+
interactive?: boolean;
|
|
852
|
+
/** default 20px · tight 14px · none(테이블, 리스트) */
|
|
853
|
+
padding?: 'default' | 'tight' | 'none';
|
|
854
|
+
children?: React__default.ReactNode;
|
|
855
|
+
}
|
|
856
|
+
declare function Card({ title, subtitle, actions, footer, variant, selected, interactive, padding, children, className, ...rest }: CardProps): React__default.JSX.Element;
|
|
857
|
+
interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
|
|
858
|
+
tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
|
|
859
|
+
/** 선행 5px 점 — 라이브/진행 상태 */
|
|
860
|
+
dot?: boolean;
|
|
861
|
+
size?: 'md' | 'lg';
|
|
862
|
+
children?: React__default.ReactNode;
|
|
863
|
+
}
|
|
864
|
+
declare function Badge({ tone, dot, size, children, className, ...rest }: BadgeProps): React__default.JSX.Element;
|
|
865
|
+
interface TagProps extends React__default.HTMLAttributes<HTMLSpanElement> {
|
|
866
|
+
/** 선행 점의 CSS 색상 */
|
|
867
|
+
color?: string;
|
|
868
|
+
filled?: boolean;
|
|
869
|
+
onRemove?: (e: React__default.MouseEvent) => void;
|
|
870
|
+
children?: React__default.ReactNode;
|
|
871
|
+
}
|
|
872
|
+
declare function Tag({ color, filled, onRemove, children, className, ...rest }: TagProps): React__default.JSX.Element;
|
|
873
|
+
interface AlertProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
874
|
+
tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
875
|
+
title?: React__default.ReactNode;
|
|
876
|
+
children?: React__default.ReactNode;
|
|
877
|
+
actions?: React__default.ReactNode;
|
|
878
|
+
onClose?: () => void;
|
|
879
|
+
/**
|
|
880
|
+
* 테두리를 왼쪽 색 막대 하나로 바꾼다(모서리도 각지게 편다).
|
|
881
|
+
*
|
|
882
|
+
* 화면 맨 위에 놓여 먼저 읽혀야 하는 공지 — 개인정보 보호 안내, 업로드 절차 안내처럼
|
|
883
|
+
* 카드 안의 알림이 아니라 화면 폭을 가르는 배너로 보여야 하는 자리에 쓴다.
|
|
884
|
+
*/
|
|
885
|
+
bar?: boolean;
|
|
886
|
+
}
|
|
887
|
+
declare function Alert({ tone, title, children, actions, onClose, bar, className, ...rest }: AlertProps): React__default.JSX.Element;
|
|
888
|
+
interface ToastProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
889
|
+
tone?: 'info' | 'success' | 'warning' | 'danger';
|
|
890
|
+
title?: React__default.ReactNode;
|
|
891
|
+
children?: React__default.ReactNode;
|
|
892
|
+
/** 인라인 액션 하나 — 되돌리기 같은 것. Button variant="link"를 넣는다. */
|
|
893
|
+
action?: React__default.ReactNode;
|
|
894
|
+
onClose?: () => void;
|
|
895
|
+
}
|
|
896
|
+
/** 우하단 일시 알림. .wp-toast-region 안에 렌더링된다. */
|
|
897
|
+
declare function Toast({ tone, title, children, action, onClose, className, ...rest }: ToastProps): React__default.JSX.Element;
|
|
898
|
+
interface TabItem {
|
|
899
|
+
value: string;
|
|
900
|
+
label: React__default.ReactNode;
|
|
869
901
|
icon?: string;
|
|
870
|
-
|
|
902
|
+
count?: number;
|
|
871
903
|
}
|
|
872
|
-
interface
|
|
904
|
+
interface TabsProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
905
|
+
items: TabItem[];
|
|
906
|
+
value: string;
|
|
907
|
+
onChange?: (value: string) => void;
|
|
908
|
+
size?: 'md' | 'lg';
|
|
909
|
+
/** 네이비 탑바 위 — 밝은 글자, 빨간 인디케이터. */
|
|
910
|
+
onChrome?: boolean;
|
|
911
|
+
}
|
|
912
|
+
declare function Tabs({ items, value, onChange, size, onChrome, className, ...rest }: TabsProps): React__default.JSX.Element;
|
|
913
|
+
interface TableColumn {
|
|
873
914
|
key: string;
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
/** 상대 폭 — 전체 ratio 합 대비 % 폭으로 환산된다 */
|
|
879
|
-
ratio?: number;
|
|
915
|
+
header: React__default.ReactNode;
|
|
916
|
+
/** CSS 폭 — "180px", "22%" */
|
|
917
|
+
width?: string;
|
|
918
|
+
align?: 'left' | 'right';
|
|
880
919
|
mono?: boolean;
|
|
881
920
|
strong?: boolean;
|
|
882
|
-
|
|
883
|
-
|
|
921
|
+
/** 헤더를 정렬 버튼으로 만든다. 실제 정렬은 `sort`·`onSort`가 담당한다. */
|
|
922
|
+
sortable?: boolean;
|
|
923
|
+
/**
|
|
924
|
+
* 셀 값을 Badge로 렌더링 — JSON 스펙에서 쓸 수 있는 선언적 지정.
|
|
925
|
+
* toneMap: 값 → tone, labelMap: 값 → 표시 텍스트(생략 시 값 그대로)
|
|
926
|
+
*/
|
|
927
|
+
badge?: {
|
|
928
|
+
toneMap?: Record<string, string>;
|
|
929
|
+
labelMap?: Record<string, string>;
|
|
930
|
+
};
|
|
931
|
+
/** 프로그래매틱 사용 전용 — JSON 스펙에서는 쓸 수 없다 */
|
|
932
|
+
render?: (row: any, index: number) => React__default.ReactNode;
|
|
933
|
+
}
|
|
934
|
+
interface TableProps extends React__default.TableHTMLAttributes<HTMLTableElement> {
|
|
935
|
+
columns: TableColumn[];
|
|
936
|
+
rows: any[];
|
|
937
|
+
/** 40px 대신 32px 행 */
|
|
938
|
+
dense?: boolean;
|
|
939
|
+
hover?: boolean;
|
|
940
|
+
/** 스크롤 본문용 고정 헤더 */
|
|
941
|
+
sticky?: boolean;
|
|
942
|
+
/** 현재 정렬 상태 — 해당 컬럼 헤더의 화살표 방향을 정한다 */
|
|
943
|
+
sort?: {
|
|
944
|
+
key: string;
|
|
945
|
+
dir: 'asc' | 'desc';
|
|
946
|
+
};
|
|
947
|
+
/** 정렬 헤더를 눌렀을 때. 주지 않으면 sortable 컬럼도 버튼이 되지 않는다 */
|
|
948
|
+
onSort?: (key: string) => void;
|
|
949
|
+
/** 선택된 행의 rowKey 값 — 해당 행에 aria-selected가 붙고 하이라이트된다 */
|
|
950
|
+
selectedIds?: any[];
|
|
951
|
+
/** 행 key와 선택에 쓸 필드. 기본 "id" */
|
|
952
|
+
rowKey?: string;
|
|
953
|
+
onRowClick?: (row: any) => void;
|
|
954
|
+
/** rows가 비었을 때 대신 렌더링 — EmptyState 권장 */
|
|
955
|
+
empty?: React__default.ReactNode;
|
|
956
|
+
}
|
|
957
|
+
declare function Table({ columns, rows, dense, hover, sticky, sort, onSort, selectedIds, rowKey, onRowClick, empty, className, ...rest }: TableProps): React__default.JSX.Element;
|
|
958
|
+
interface StatCardProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
959
|
+
label: React__default.ReactNode;
|
|
960
|
+
value: React__default.ReactNode;
|
|
961
|
+
/** 단위 접미사 — "GB", "건", "%" */
|
|
962
|
+
unit?: string;
|
|
963
|
+
/** 비교 텍스트 — "+12.4%" */
|
|
964
|
+
delta?: React__default.ReactNode;
|
|
965
|
+
trend?: 'up' | 'down' | 'flat';
|
|
966
|
+
icon?: string;
|
|
967
|
+
footer?: React__default.ReactNode;
|
|
968
|
+
size?: 'md' | 'sm';
|
|
969
|
+
}
|
|
970
|
+
declare function StatCard({ label, value, unit, delta, trend, icon, footer, size, className, ...rest }: StatCardProps): React__default.JSX.Element;
|
|
971
|
+
interface EmptyStateProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
972
|
+
icon?: string;
|
|
973
|
+
title?: React__default.ReactNode;
|
|
974
|
+
children?: React__default.ReactNode;
|
|
975
|
+
actions?: React__default.ReactNode;
|
|
976
|
+
tight?: boolean;
|
|
977
|
+
}
|
|
978
|
+
declare function EmptyState({ icon, title, children, actions, tight, className, ...rest }: EmptyStateProps): React__default.JSX.Element;
|
|
979
|
+
interface SpinnerProps extends React__default.HTMLAttributes<HTMLSpanElement> {
|
|
980
|
+
size?: 'sm' | 'md' | 'lg';
|
|
981
|
+
/** 네이비/뷰어 표면 위 — 밝은 테두리로 뒤집는다. */
|
|
982
|
+
inverse?: boolean;
|
|
983
|
+
label?: string;
|
|
984
|
+
}
|
|
985
|
+
declare function Spinner({ size, inverse, label, className, ...rest }: SpinnerProps): React__default.JSX.Element;
|
|
986
|
+
interface ProgressBarProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
987
|
+
/** 0~`max` */
|
|
988
|
+
value: number;
|
|
989
|
+
/** 기본 100. 용량 게이지처럼 분모가 100이 아닌 자리에 쓴다 */
|
|
990
|
+
max?: number;
|
|
991
|
+
/** danger 임계 강조 등 */
|
|
992
|
+
tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info';
|
|
993
|
+
/** sm 4 · md 6(기본) · lg 8 px */
|
|
994
|
+
size?: 'sm' | 'md' | 'lg';
|
|
995
|
+
/** 사선 해치 애니메이션 — 진행 중인 작업에만 */
|
|
996
|
+
striped?: boolean;
|
|
997
|
+
label?: React__default.ReactNode;
|
|
998
|
+
/**
|
|
999
|
+
* 현재 값을 퍼센트로 적는다.
|
|
1000
|
+
*
|
|
1001
|
+
* 막대만으로는 82%와 91%를 구분할 수 없어서, 여러 개를 세로로 쌓아 비교하는
|
|
1002
|
+
* 자리(공정별 진척 목록 등)에서 필요하다. 라벨이 있으면 라벨 줄 오른쪽 끝에,
|
|
1003
|
+
* 라벨이 없으면 막대 오른쪽 옆(.wp-meter-row)에 붙는다.
|
|
1004
|
+
*/
|
|
1005
|
+
showValue?: boolean;
|
|
884
1006
|
}
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
}[];
|
|
1007
|
+
declare function ProgressBar({ value, max, tone, size, striped, showValue, label, className, ...rest }: ProgressBarProps): React__default.JSX.Element;
|
|
1008
|
+
interface PaginationProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1009
|
+
page: number;
|
|
1010
|
+
pageCount: number;
|
|
1011
|
+
total?: number;
|
|
1012
|
+
pageSize?: number;
|
|
1013
|
+
onChange?: (page: number) => void;
|
|
893
1014
|
}
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
* 이제 `views`로 목록 자체를 정할 수 있고, 두 disable 프롭은 그 축약형으로 남는다.
|
|
900
|
-
*/
|
|
901
|
-
interface SearchViewItem {
|
|
902
|
-
value: 'grid' | 'list';
|
|
903
|
-
/** 생략 시 기본 아이콘 — list=list, grid=layout-grid */
|
|
1015
|
+
declare function Pagination({ page, pageCount, total, pageSize, onChange, className, ...rest }: PaginationProps): React__default.JSX.Element;
|
|
1016
|
+
interface DialogProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1017
|
+
title?: React__default.ReactNode;
|
|
1018
|
+
subtitle?: React__default.ReactNode;
|
|
1019
|
+
/** 타이틀 좌측 마크 안의 아이콘 이름 */
|
|
904
1020
|
icon?: string;
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
show?: (item: T) => boolean;
|
|
1021
|
+
tone?: 'brand' | 'danger';
|
|
1022
|
+
/** sm 380 · md 480(기본) · lg 680 · xl 880 px */
|
|
1023
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
1024
|
+
/** 우측 정렬 액션 행 — 보조 버튼 다음 주 버튼 */
|
|
1025
|
+
footer?: React__default.ReactNode;
|
|
1026
|
+
onClose?: () => void;
|
|
1027
|
+
children?: React__default.ReactNode;
|
|
913
1028
|
}
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
rows?: GridCardRow<T>[];
|
|
923
|
-
leftRows?: GridCardRow<T>[];
|
|
924
|
-
rightRows?: GridCardRow<T>[];
|
|
925
|
-
note?: (item: T) => React__default.ReactNode | null;
|
|
1029
|
+
/** 모달 본체. 오버레이가 가장 가까운 포지셔닝 조상을 채운다 — SDUI에서는 SduiDialog 래퍼가 뷰포트에 고정한다. */
|
|
1030
|
+
declare function Dialog({ title, subtitle, icon, tone, size, footer, onClose, children, className, ...rest }: DialogProps): React__default.JSX.Element;
|
|
1031
|
+
/** 배타 뷰 전환 스위치. 항목 2~4개까지, 그보다 많으면 Select다. */
|
|
1032
|
+
interface SegmentedItem {
|
|
1033
|
+
value: string;
|
|
1034
|
+
label?: string;
|
|
1035
|
+
/** 앞에 붙일 아이콘 이름 */
|
|
1036
|
+
icon?: string;
|
|
926
1037
|
}
|
|
927
|
-
interface
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
gridConfig?: GridCardConfig<T>;
|
|
934
|
-
leftFilters?: SearchFilter[];
|
|
935
|
-
rightFilters?: SearchFilter[];
|
|
936
|
-
initialView?: 'grid' | 'list';
|
|
937
|
-
/**
|
|
938
|
-
* 노출할 보기 목록. 생략하면 목록/카드 두 칸이 기본값이고,
|
|
939
|
-
* 그때만 `disableGrid`/`disableList`가 목록을 깎는다(둘 다 오면 views가 이긴다).
|
|
940
|
-
* 한 칸만 남으면 전환 버튼 자체를 그리지 않는다.
|
|
941
|
-
*/
|
|
942
|
-
views?: SearchViewItem[];
|
|
943
|
-
/** 페이지당 건수 선택지. 생략 시 [10, 20, 50, 100]. 첫 값이 기본 페이지 크기다. */
|
|
944
|
-
pageSizes?: number[];
|
|
1038
|
+
interface SegmentedControlProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1039
|
+
items: SegmentedItem[];
|
|
1040
|
+
value: string;
|
|
1041
|
+
onChange?: (value: string) => void;
|
|
1042
|
+
/** md(24px 항목, 기본) · lg(30px) */
|
|
1043
|
+
size?: 'md' | 'lg';
|
|
945
1044
|
className?: string;
|
|
946
|
-
/** 검색/필터/페이지 파라미터 (controlled) */
|
|
947
|
-
searchParams: URLSearchParams;
|
|
948
|
-
onParamsChange: (next: URLSearchParams) => void;
|
|
949
|
-
/** 선택 액션 — 있으면 체크박스 선택이 활성화된다 */
|
|
950
|
-
actions?: SearchAction<T>[];
|
|
951
|
-
disableGrid?: boolean;
|
|
952
|
-
disableList?: boolean;
|
|
953
|
-
onRowClick?: (item: T) => void;
|
|
954
|
-
/** 화면에는 카운트만 표시 — 접근성 레이블·빈 상태 문구에 사용 */
|
|
955
|
-
title: string;
|
|
956
|
-
headerActions?: React__default.ReactNode;
|
|
957
|
-
isLoading?: boolean;
|
|
958
|
-
hideHeader?: boolean;
|
|
959
|
-
advancedSearchFields?: SearchField[];
|
|
960
|
-
searchPlaceholder?: string;
|
|
961
|
-
/**
|
|
962
|
-
* 가상 스크롤(대용량 목록) — true면 기본 임계값 150행, 숫자면 그 값이 임계값.
|
|
963
|
-
* 목록 뷰에서 행 수가 임계값을 넘으면 페이지 슬라이스 대신 전체 목록을 창 렌더한다
|
|
964
|
-
* (서버 페이징 모드에서는 현재 응답 분량만 가상화).
|
|
965
|
-
*/
|
|
966
|
-
virtual?: boolean | number;
|
|
967
1045
|
}
|
|
968
1046
|
/**
|
|
969
|
-
*
|
|
970
|
-
* 쓸 값이 하나도 없으면 undefined를 돌려 기본 선택지를 쓰게 한다.
|
|
971
|
-
*/
|
|
972
|
-
declare function normalizePageSizes(sizes: number[] | undefined): number[] | undefined;
|
|
973
|
-
declare function SearchResults<T extends {
|
|
974
|
-
id: string;
|
|
975
|
-
}>({ item, columns, gridConfig, leftFilters, rightFilters, initialView, views, pageSizes, className, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields, searchPlaceholder, virtual, }: SearchResultsProps<T>): React__default.JSX.Element;
|
|
976
|
-
|
|
977
|
-
/**
|
|
978
|
-
* 셀 표현 어휘 — 목록 컬럼의 셀과 카드 행의 값이 **같은 규칙**을 쓴다.
|
|
979
|
-
*
|
|
980
|
-
* 예전에는 스펙이 고를 수 있는 표현이 `badge` 하나뿐이었고 나머지는 `row[key]` 원문
|
|
981
|
-
* 출력이었다. 밑에 깔린 `SearchColumn.render`는 임의의 노드를 그릴 수 있는데 스펙에는
|
|
982
|
-
* 그 역량이 두 종류(원문/배지)로만 열려 있었다는 뜻이다. 여기서 그 구멍을 메운다.
|
|
1047
|
+
* 목록/카드, 2D/3D, 일/주/월처럼 하나만 고르는 뷰 전환.
|
|
983
1048
|
*
|
|
984
|
-
*
|
|
985
|
-
*
|
|
986
|
-
* 목록 전체가 비면 안 된다. 판별 유니언이라 새 type을 더해도 옛 스펙은 그대로 돈다.
|
|
987
|
-
* - **값을 해석하지 못하면 원문을 그대로 낸다.** ERP는 이미 서식된 문자열(`"12,400,000"`,
|
|
988
|
-
* `"2026-07-31 09:00"`)을 내려주는 자리가 많아, 파싱 실패를 빈칸으로 만들면 퇴행이다.
|
|
1049
|
+
* `search/SearchResults.tsx`가 "라이브러리에 SegmentedControl이 없다"는 이유로
|
|
1050
|
+
* 안에 `ViewToggle` 사본을 들고 있었다. 이 컴포넌트가 그 사본의 원본이다.
|
|
989
1051
|
*/
|
|
990
|
-
|
|
991
|
-
/**
|
|
992
|
-
|
|
993
|
-
/**
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
/**
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
type: 'tag';
|
|
1005
|
-
colorMap?: Record<string, string>;
|
|
1006
|
-
filled?: boolean;
|
|
1052
|
+
declare function SegmentedControl({ items, value, onChange, size, className, ...rest }: SegmentedControlProps): React__default.JSX.Element;
|
|
1053
|
+
/** 사람·팀·자산의 신원 표식. */
|
|
1054
|
+
interface AvatarProps extends React__default.HTMLAttributes<HTMLSpanElement> {
|
|
1055
|
+
/** 이니셜과 title에 쓰인다 */
|
|
1056
|
+
name?: string;
|
|
1057
|
+
/** 이미지 URL — 있으면 이니셜을 대신한다 */
|
|
1058
|
+
src?: string;
|
|
1059
|
+
/** hex(기본, 심볼 실루엣) · round(사람) · square(자산) */
|
|
1060
|
+
shape?: 'hex' | 'round' | 'square';
|
|
1061
|
+
/** xs 20 · sm 24 · md 28(기본) · lg 36 · xl 48 px */
|
|
1062
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
1063
|
+
/** brand 네이비(기본) · muted 회색 · accent 레드 */
|
|
1064
|
+
tone?: 'brand' | 'muted' | 'accent';
|
|
1065
|
+
className?: string;
|
|
1007
1066
|
}
|
|
1008
|
-
/**
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
to: string;
|
|
1015
|
-
/** 링크 문구로 쓸 필드 — 생략하면 컬럼 자신의 값 */
|
|
1016
|
-
labelKey?: string;
|
|
1067
|
+
/** 사람/자산 표식. 기본은 육각형 — 심볼의 실루엣이다. */
|
|
1068
|
+
declare function Avatar({ name, src, shape, size, tone, className, ...rest }: AvatarProps): React__default.JSX.Element;
|
|
1069
|
+
/** 프로젝트에서 개별 객체까지의 위치. 4단계를 넘으면 가운데를 접는다. */
|
|
1070
|
+
interface BreadcrumbItem {
|
|
1071
|
+
label: React__default.ReactNode;
|
|
1072
|
+
href?: string;
|
|
1017
1073
|
icon?: string;
|
|
1074
|
+
onClick?: () => void;
|
|
1018
1075
|
}
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
max?: number;
|
|
1023
|
-
maxKey?: string;
|
|
1024
|
-
tone?: MeterTone;
|
|
1025
|
-
showValue?: boolean;
|
|
1076
|
+
interface BreadcrumbProps extends React__default.HTMLAttributes<HTMLElement> {
|
|
1077
|
+
items: BreadcrumbItem[];
|
|
1078
|
+
className?: string;
|
|
1026
1079
|
}
|
|
1027
|
-
/**
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1080
|
+
/** 계보 표시. 마지막 항목은 현재 객체이므로 링크가 아니다. */
|
|
1081
|
+
declare function Breadcrumb({ items, className, ...rest }: BreadcrumbProps): React__default.JSX.Element;
|
|
1082
|
+
/** 후보가 전부 보이는 배타 선택. 5개 이상이면 Select다. */
|
|
1083
|
+
interface RadioProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
|
|
1084
|
+
label?: React__default.ReactNode;
|
|
1085
|
+
description?: React__default.ReactNode;
|
|
1086
|
+
disabled?: boolean;
|
|
1034
1087
|
}
|
|
1035
|
-
/**
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
prefix?: string;
|
|
1045
|
-
suffix?: string;
|
|
1088
|
+
/** 2~4개 후보를 다 보여 주는 라디오. Checkbox와 마크업을 공유한다(.wp-check). */
|
|
1089
|
+
declare function Radio({ label, description, disabled, className, ...rest }: RadioProps): React__default.JSX.Element;
|
|
1090
|
+
/** 주 내비게이션 목록. 활성 항목에 빨간 에지 마커가 붙는다. */
|
|
1091
|
+
interface SidebarNavItem {
|
|
1092
|
+
value: string;
|
|
1093
|
+
label: React__default.ReactNode;
|
|
1094
|
+
icon?: string;
|
|
1095
|
+
meta?: React__default.ReactNode;
|
|
1096
|
+
href?: string;
|
|
1046
1097
|
}
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
format?: 'date' | 'datetime' | 'time';
|
|
1098
|
+
interface SidebarNavSection {
|
|
1099
|
+
label?: React__default.ReactNode;
|
|
1100
|
+
items: SidebarNavItem[];
|
|
1051
1101
|
}
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
*/
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
* 백엔드는 이 프롭 형태(전부 직렬화 가능)를 그대로 내려주면 된다.
|
|
1062
|
-
* 레지스트리에는 "SearchResults" / "RemoteSearchResults"로 등록된다.
|
|
1063
|
-
*
|
|
1064
|
-
* 선언적 스펙 → 함수 프롭 변환(cell.badge → render, run → onClick)은 전부 여기서 일어난다.
|
|
1065
|
-
* 액션 실행은 useSduiDispatch로 렌더러에 되돌려 준다.
|
|
1066
|
-
*/
|
|
1067
|
-
|
|
1068
|
-
/** JSON 컬럼 정의 — render 함수 대신 선언적 cell 스펙을 쓴다 */
|
|
1069
|
-
interface SduiSearchColumn {
|
|
1070
|
-
key: string;
|
|
1071
|
-
title: string;
|
|
1072
|
-
sortable?: boolean;
|
|
1073
|
-
/** DS Table은 left/right만 지원 */
|
|
1074
|
-
textAlign?: 'left' | 'right';
|
|
1075
|
-
ratio?: number;
|
|
1076
|
-
mono?: boolean;
|
|
1077
|
-
strong?: boolean;
|
|
1078
|
-
/** 셀 표현. 생략하면 row[key]를 그대로 출력한다 — 어휘는 `cells.tsx` 참고 */
|
|
1079
|
-
cell?: SduiCell;
|
|
1102
|
+
interface SidebarNavProps extends Omit<React__default.HTMLAttributes<HTMLElement>, 'onSelect'> {
|
|
1103
|
+
sections: SidebarNavSection[];
|
|
1104
|
+
value?: string;
|
|
1105
|
+
onSelect?: (value: string) => void;
|
|
1106
|
+
/** 아이콘만 남기는 56px 레일 */
|
|
1107
|
+
collapsed?: boolean;
|
|
1108
|
+
/** 흰 표면(설정 하위 내비) 위에 쓰는 밝은 변형 */
|
|
1109
|
+
light?: boolean;
|
|
1110
|
+
className?: string;
|
|
1080
1111
|
}
|
|
1081
|
-
/**
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1112
|
+
/** 네이비 사이드바의 주 내비게이션. 섹션 + 항목. */
|
|
1113
|
+
declare function SidebarNav({ sections, value, onSelect, collapsed, light, className, ...rest }: SidebarNavProps): React__default.JSX.Element;
|
|
1114
|
+
/** 아이콘 전용 컨트롤·잘린 값에 붙이는 hover/focus 힌트. */
|
|
1115
|
+
interface TooltipProps extends React__default.HTMLAttributes<HTMLSpanElement> {
|
|
1116
|
+
label: React__default.ReactNode;
|
|
1117
|
+
/** 단축키 칩, 예: "⌘K" */
|
|
1118
|
+
shortcut?: string;
|
|
1119
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
1120
|
+
/** 여러 줄 허용(최대 240px) */
|
|
1121
|
+
wrap?: boolean;
|
|
1122
|
+
children?: React__default.ReactNode;
|
|
1123
|
+
className?: string;
|
|
1091
1124
|
}
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1125
|
+
/** hover 힌트. 트리거를 감싸며 위치는 CSS가 잡는다 — 포털을 쓰지 않는다. */
|
|
1126
|
+
declare function Tooltip({ label, shortcut, placement, wrap, children, className, ...rest }: TooltipProps): React__default.JSX.Element;
|
|
1127
|
+
|
|
1128
|
+
interface GridProps extends SduiContainerLayoutProps {
|
|
1129
|
+
/** wp-grid--N 프리셋 (1~6) */
|
|
1130
|
+
columns?: SduiColumnsScale;
|
|
1131
|
+
/** 커스텀 트랙 — grid-template-columns 값. columns보다 우선 */
|
|
1132
|
+
template?: string;
|
|
1133
|
+
/**
|
|
1134
|
+
* 안쪽 여백(`padding`). `Card`가 이미 갖고 있던 것을 여기에도 연다 —
|
|
1135
|
+
* 실측: 스펙이 `style.padding`으로 두 번 손으로 쓰고 있었고, 둘 다 그리드 자체의
|
|
1136
|
+
* 안쪽 여백이었다. `gap`은 자식 **사이**라 이 자리를 대신하지 못한다.
|
|
1137
|
+
*/
|
|
1138
|
+
padding?: SduiGapScale;
|
|
1139
|
+
className?: string;
|
|
1140
|
+
style?: React__default.CSSProperties;
|
|
1141
|
+
children?: React__default.ReactNode;
|
|
1101
1142
|
}
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1143
|
+
declare function Grid({ columns, template, gap, align, justify, wrap, padding, className, style, children, }: GridProps): React__default.JSX.Element;
|
|
1144
|
+
type Justify = 'start' | 'center' | 'end' | 'between';
|
|
1145
|
+
interface RowProps extends SduiContainerLayoutProps {
|
|
1146
|
+
/** 가로 정렬 (기본 start) */
|
|
1147
|
+
justify?: Justify;
|
|
1148
|
+
className?: string;
|
|
1149
|
+
style?: React__default.CSSProperties;
|
|
1150
|
+
children?: React__default.ReactNode;
|
|
1108
1151
|
}
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
/** 한 열로 쌓는 행 */
|
|
1117
|
-
rows?: SduiGridCardRow[];
|
|
1118
|
-
/** 두 열 배치 — 좌/우 각각의 행 목록. rows와 함께 쓰면 두 열이 위, rows가 아래다 */
|
|
1119
|
-
leftRows?: SduiGridCardRow[];
|
|
1120
|
-
rightRows?: SduiGridCardRow[];
|
|
1121
|
-
/** 카드 맨 아래 보조 문구로 쓸 필드 */
|
|
1122
|
-
noteKey?: string;
|
|
1123
|
-
actions?: SduiGridCardAction[];
|
|
1152
|
+
declare function Row({ justify, gap, align, wrap, className, style, children }: RowProps): React__default.JSX.Element;
|
|
1153
|
+
interface ActionsProps extends SduiContainerLayoutProps {
|
|
1154
|
+
/** 가로 정렬 — 기본 end(우측) */
|
|
1155
|
+
justify?: Justify;
|
|
1156
|
+
className?: string;
|
|
1157
|
+
style?: React__default.CSSProperties;
|
|
1158
|
+
children?: React__default.ReactNode;
|
|
1124
1159
|
}
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1160
|
+
/**
|
|
1161
|
+
* 액션 버튼 묶음 — 슬롯 안에서 정렬을 제어한다(flex:1로 슬롯 폭 차지).
|
|
1162
|
+
*
|
|
1163
|
+
* `justify = 'end'`가 **2단(타입별 기본)의 실제 사례**다. 전역 기본은 `.wp-row`의
|
|
1164
|
+
* `flex-start`인데 이 타입만 `end`로 시작하고, 스펙이 `justify`를 주면 그것이 이긴다.
|
|
1165
|
+
*/
|
|
1166
|
+
declare function Actions({ justify, gap, align, wrap, className, style, children }: ActionsProps): React__default.JSX.Element;
|
|
1167
|
+
interface ColProps extends SduiContainerLayoutProps {
|
|
1168
|
+
className?: string;
|
|
1169
|
+
style?: React__default.CSSProperties;
|
|
1170
|
+
children?: React__default.ReactNode;
|
|
1131
1171
|
}
|
|
1132
|
-
|
|
1133
|
-
interface
|
|
1134
|
-
title: string;
|
|
1135
|
-
columns: SduiSearchColumn[];
|
|
1136
|
-
fields?: SearchField[];
|
|
1137
|
-
leftFilters?: SearchFilter[];
|
|
1138
|
-
rightFilters?: SearchFilter[];
|
|
1139
|
-
gridCard?: SduiGridCard;
|
|
1140
|
-
actions?: SduiSearchAction[];
|
|
1141
|
-
initialView?: 'grid' | 'list';
|
|
1172
|
+
declare function Col({ gap, align, justify, wrap, className, style, children }: ColProps): React__default.JSX.Element;
|
|
1173
|
+
interface SpacerProps {
|
|
1142
1174
|
/**
|
|
1143
|
-
*
|
|
1144
|
-
*
|
|
1175
|
+
* 간격 토큰 단계(`--wp-space-N`). 주면 "남는 공간 밀어내기"가 아니라
|
|
1176
|
+
* 그만큼의 **고정 간격**이 된다 — Card 본문처럼 gap이 이미 걸린 세로 묶음 안에서
|
|
1177
|
+
* 한 덩어리를 다음 덩어리와 더 떼어 놓을 때 쓴다.
|
|
1178
|
+
* 토큰에 없는 단계를 주면 무시하고 기존 flex 채움으로 돌아간다.
|
|
1145
1179
|
*/
|
|
1146
|
-
|
|
1147
|
-
/** 페이지당 건수 선택지. 생략 시 [10, 20, 50, 100] */
|
|
1148
|
-
pageSizes?: number[];
|
|
1149
|
-
disableGrid?: boolean;
|
|
1150
|
-
disableList?: boolean;
|
|
1151
|
-
searchPlaceholder?: string;
|
|
1152
|
-
/** 행 클릭 시 실행할 액션 — 이벤트 값으로 행 객체 전체가 전달된다 */
|
|
1153
|
-
rowClick?: SduiAction | SduiAction[];
|
|
1154
|
-
/** 렌더러의 slots.headerActions가 이 프롭으로 들어온다 */
|
|
1155
|
-
headerActions?: React__default.ReactNode;
|
|
1156
|
-
/** 가상 스크롤 — true면 기본 임계값 150행, 숫자면 그 값이 임계값 (JSON 직렬화 가능) */
|
|
1157
|
-
virtual?: boolean | number;
|
|
1180
|
+
size?: 1 | 2 | 3 | 4 | 5 | 6 | 8;
|
|
1158
1181
|
}
|
|
1159
|
-
|
|
1160
|
-
|
|
1182
|
+
declare function Spacer({ size, className, style }: SpacerProps & SduiBoxProps): React__default.JSX.Element;
|
|
1183
|
+
interface SectionProps extends SduiContainerLayoutProps {
|
|
1184
|
+
title?: React__default.ReactNode;
|
|
1185
|
+
className?: string;
|
|
1186
|
+
style?: React__default.CSSProperties;
|
|
1187
|
+
children?: React__default.ReactNode;
|
|
1161
1188
|
}
|
|
1162
|
-
declare function
|
|
1163
|
-
|
|
1189
|
+
declare function Section({ title, gap, align, justify, wrap, className, style, children }: SectionProps): React__default.JSX.Element;
|
|
1190
|
+
type TextPreset = 'display-1' | 'display-2' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-lg' | 'body' | 'body-sm' | 'caption' | 'label' | 'overline' | 'micro' | 'metric' | 'metric-sm' | 'mono' | 'mono-xs';
|
|
1191
|
+
interface TextProps {
|
|
1192
|
+
/** styles.css의 .wp-* 타입 프리셋 이름 */
|
|
1193
|
+
preset?: TextPreset;
|
|
1194
|
+
as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
1164
1195
|
/**
|
|
1165
|
-
*
|
|
1166
|
-
*
|
|
1196
|
+
* 글자 굵기 — `preset`이 정한 굵기를 이 자리에서만 뒤집는다.
|
|
1197
|
+
* 프리셋 19종이 크기·굵기·정렬을 묶어 놔 "본문 크기인데 굵게"를 만들 수 없던 것을 푼다.
|
|
1167
1198
|
*/
|
|
1168
|
-
|
|
1169
|
-
/**
|
|
1170
|
-
|
|
1199
|
+
weight?: SduiWeightScale;
|
|
1200
|
+
/** 글자 정렬. */
|
|
1201
|
+
textAlign?: SduiTextAlignScale;
|
|
1202
|
+
/**
|
|
1203
|
+
* 줄바꿈 규칙.
|
|
1204
|
+
*
|
|
1205
|
+
* - `normal`(기본) — 브라우저 기본. 원문의 줄바꿈은 공백 하나로 접힌다.
|
|
1206
|
+
* - `preserve` — 원문의 줄바꿈·연속 공백을 그대로 둔다(`white-space: pre-wrap`).
|
|
1207
|
+
* 서버가 준 사유·비고처럼 사람이 줄을 나눠 쓴 글에 쓴다.
|
|
1208
|
+
* - `anywhere` — `preserve`에 더해 **긴 토큰을 글자 단위로 끊는다**(`word-break: break-all`).
|
|
1209
|
+
* 공백 없는 ID·URL·해시가 묶음 밖으로 삐져나가는 것을 막는다.
|
|
1210
|
+
*
|
|
1211
|
+
* 실측: 스펙 85개가 `style`로 `pre-wrap` 2번, `break-all` 2번을 손으로 쓰고 있었고
|
|
1212
|
+
* 넷이 같은 두 자리(감사 로그·JSON 미리보기)였다.
|
|
1213
|
+
*/
|
|
1214
|
+
wrap?: 'normal' | 'preserve' | 'anywhere';
|
|
1215
|
+
className?: string;
|
|
1216
|
+
style?: React__default.CSSProperties;
|
|
1217
|
+
/** children 대신 쓸 수 있는 내용 — 상태 바인딩({ "$state": ... })에 유용 */
|
|
1218
|
+
value?: React__default.ReactNode;
|
|
1219
|
+
children?: React__default.ReactNode;
|
|
1171
1220
|
}
|
|
1172
|
-
declare function RemoteSearchResults({ title, endpoint, columns, fields, leftFilters, rightFilters, gridCard, actions, initialView, views, pageSizes, disableGrid, disableList, searchPlaceholder, rowClick, headerActions, virtual, pageSize, }: RemoteSearchResultsProps): React__default.JSX.Element;
|
|
1173
|
-
|
|
1174
1221
|
/**
|
|
1175
|
-
*
|
|
1176
|
-
*
|
|
1177
|
-
*
|
|
1178
|
-
* 가상 스크롤은 **의존성 없이** 직접 구현한다(core는 무거운 외부 의존성을 갖지 않는다).
|
|
1179
|
-
* ERP는 @tanstack/react-virtual을 썼지만, 여기서 필요한 건 "고정 행 높이 목록의 창"뿐이라
|
|
1180
|
-
* scrollTop → 인덱스 범위 계산으로 충분하다. 렌더 범위 밖은 상/하단 스페이서 행으로 대체한다
|
|
1181
|
-
* (<table> 마크업에서 transform 대신 안전하게 동작하는 방식).
|
|
1222
|
+
* `weight`·`textAlign`은 **이 요소에만** 붙는다. 자손에게 내려보내는 코드는 없다 —
|
|
1223
|
+
* 그 일은 CSS 상속이 이미 하고 있고, JS로 다시 하면 `Show`/`Can` 같은 fragment 노드
|
|
1224
|
+
* 때문에 스펙 트리의 부모와 실제 DOM 부모가 어긋나 조용히 틀린 값이 내려간다(layout.ts 주석).
|
|
1182
1225
|
*/
|
|
1183
|
-
|
|
1184
|
-
interface
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
align?: 'left' | 'right';
|
|
1190
|
-
/** 고정폭 글꼴 셀 (wp-table__mono) */
|
|
1226
|
+
declare function Text({ preset, as: Tag, weight, textAlign, wrap, className, style, value, children, }: TextProps): React__default.JSX.Element;
|
|
1227
|
+
interface KeyValueItem {
|
|
1228
|
+
label: React__default.ReactNode;
|
|
1229
|
+
/** source에서 꺼낼 필드 키. 생략하면 value를 그대로 출력 */
|
|
1230
|
+
key?: string;
|
|
1231
|
+
value?: React__default.ReactNode;
|
|
1191
1232
|
mono?: boolean;
|
|
1192
|
-
/** 강조 셀 (wp-table__strong) */
|
|
1193
|
-
strong?: boolean;
|
|
1194
|
-
/** CSS width — "180px", "22%" */
|
|
1195
|
-
width?: string;
|
|
1196
|
-
render?: (row: T, index: number) => React__default.ReactNode;
|
|
1197
1233
|
}
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
sort?: {
|
|
1205
|
-
key: string;
|
|
1206
|
-
dir: SortDir;
|
|
1207
|
-
};
|
|
1208
|
-
onSort?: (key: string) => void;
|
|
1209
|
-
onRowClick?: (row: T) => void;
|
|
1210
|
-
selectedIds?: string[];
|
|
1211
|
-
/** rows가 비었을 때 표 대신 렌더 */
|
|
1212
|
-
empty?: React__default.ReactNode;
|
|
1213
|
-
/** true면 스크롤 창 안에서 보이는 행만 렌더한다 */
|
|
1214
|
-
virtual?: boolean;
|
|
1215
|
-
/** 가상 스크롤 컨테이너 높이(px). 기본 560 */
|
|
1216
|
-
height?: number;
|
|
1217
|
-
/** 가상 스크롤 행 높이(px) 초기 추정치. 첫 렌더 후 실측값으로 대체된다 — 기본 41(wp-table 기본 행) */
|
|
1218
|
-
rowHeight?: number;
|
|
1234
|
+
interface KeyValueListProps {
|
|
1235
|
+
/** 값의 원천 객체 — 보통 상태 바인딩({ "$state": "selectedOrder" })을 넣는다 */
|
|
1236
|
+
source?: Record<string, unknown> | null;
|
|
1237
|
+
items: KeyValueItem[];
|
|
1238
|
+
className?: string;
|
|
1239
|
+
style?: React__default.CSSProperties;
|
|
1219
1240
|
}
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1241
|
+
/** 키-값 요약 목록 (.wp-kv) — 상세 다이얼로그·패널의 표준 표현. */
|
|
1242
|
+
declare function KeyValueList({ source, items, className, style }: KeyValueListProps): React__default.JSX.Element;
|
|
1243
|
+
interface PageHeadProps {
|
|
1244
|
+
title?: React__default.ReactNode;
|
|
1245
|
+
subtitle?: React__default.ReactNode;
|
|
1246
|
+
/** 우측 액션 영역 (JSON에서는 slots.actions로 전달) */
|
|
1247
|
+
actions?: React__default.ReactNode;
|
|
1248
|
+
}
|
|
1249
|
+
declare function PageHead({ title, subtitle, actions, className, style }: PageHeadProps & SduiBoxProps): React__default.JSX.Element;
|
|
1250
|
+
interface ShowProps {
|
|
1251
|
+
/** 보통 상태 참조({ "$state": ... })를 바인딩한다. truthy면 children을 렌더링. */
|
|
1252
|
+
when?: unknown;
|
|
1253
|
+
children?: React__default.ReactNode;
|
|
1254
|
+
}
|
|
1255
|
+
/** 조건부 렌더링 — Dialog 등을 상태로 열고 닫을 때 사용. */
|
|
1256
|
+
declare function Show({ when, children }: ShowProps): React__default.JSX.Element | null;
|
|
1257
|
+
/** 가로 구분선 */
|
|
1258
|
+
declare function Divider({ style, className }: SduiBoxProps): React__default.JSX.Element;
|
|
1223
1259
|
|
|
1224
1260
|
/**
|
|
1225
1261
|
* Dialog + 표준 닫기 UX(Escape·배경 클릭). 레지스트리의 "Dialog"는 이 래퍼다.
|
|
@@ -1398,8 +1434,8 @@ declare const defaultRegistry: {
|
|
|
1398
1434
|
Button: typeof Button;
|
|
1399
1435
|
Card: typeof Card;
|
|
1400
1436
|
Checkbox: typeof Checkbox;
|
|
1401
|
-
DatePicker:
|
|
1402
|
-
DateRangePicker:
|
|
1437
|
+
DatePicker: React.FC<DatePickerProps & SduiBoxProps>;
|
|
1438
|
+
DateRangePicker: React.FC<DateRangePickerProps & SduiBoxProps>;
|
|
1403
1439
|
Dialog: typeof SduiDialog;
|
|
1404
1440
|
EmptyState: typeof EmptyState;
|
|
1405
1441
|
Field: typeof Field;
|
|
@@ -1432,8 +1468,8 @@ declare const defaultRegistry: {
|
|
|
1432
1468
|
Can: typeof Can;
|
|
1433
1469
|
SortableList: typeof SortableList;
|
|
1434
1470
|
SortHandle: typeof SortHandle;
|
|
1435
|
-
SearchResults:
|
|
1436
|
-
RemoteSearchResults:
|
|
1471
|
+
SearchResults: React.FC<SduiSearchResultsProps & SduiBoxProps>;
|
|
1472
|
+
RemoteSearchResults: React.FC<RemoteSearchResultsProps & SduiBoxProps>;
|
|
1437
1473
|
};
|
|
1438
1474
|
/**
|
|
1439
1475
|
* 기본 어휘에 앱 고유 컴포넌트를 더한 레지스트리를 만든다.
|
|
@@ -1552,6 +1588,50 @@ interface SduiRuntime {
|
|
|
1552
1588
|
}
|
|
1553
1589
|
declare function useSduiRuntime(): SduiRuntime;
|
|
1554
1590
|
|
|
1591
|
+
/**
|
|
1592
|
+
* `boxed()` — 어떤 컴포넌트든 바깥에서 온 `style`·`className`을 자기 뿌리에 얹게 만든다.
|
|
1593
|
+
*
|
|
1594
|
+
* ## 왜 필요한가 (실측)
|
|
1595
|
+
*
|
|
1596
|
+
* 렌더러는 자식 축(`grow`·`selfAlign`·`width`·`marginTop` …)을 **모든 컴포넌트에서**
|
|
1597
|
+
* 가로채 `props.style`·`props.className`으로 접는다({@link ./layout.ts}). 그런데 받는 쪽이
|
|
1598
|
+
* 그 둘을 자기 뿌리 DOM에 얹지 않으면 값은 그대로 버려진다.
|
|
1599
|
+
*
|
|
1600
|
+
* ERP 카탈로그 78종을 프리셋 그대로 그려 본 결과 **38종이 그랬다.** 편집기 속성 패널은
|
|
1601
|
+
* 프롭을 정상적으로 보여 주므로, 쓰는 사람에게는 "설정은 했는데 화면이 안 변하는" 모양이 된다.
|
|
1602
|
+
* 절반이 그 상태였다.
|
|
1603
|
+
*
|
|
1604
|
+
* ## 왜 파일마다 뿌리를 고치지 않았나
|
|
1605
|
+
*
|
|
1606
|
+
* 위젯 21종의 뿌리는 제각각이고 **조기 반환이 흔하다** — `Timeline`은 항목이 없을 때 다른
|
|
1607
|
+
* 뿌리를 내고, `Disclosure`·`SecureScreen`은 상태에 따라 갈린다. 손으로 고치면 그중 하나를
|
|
1608
|
+
* 빠뜨렸을 때 "어떤 상태에서만 안 먹는" 형태로 남고, 그건 지금 상태보다 찾기 어렵다.
|
|
1609
|
+
* 여기서 한 번 감싸면 **반환된 것이 무엇이든** 같은 규칙으로 얹힌다.
|
|
1610
|
+
*
|
|
1611
|
+
* ## 규칙
|
|
1612
|
+
*
|
|
1613
|
+
* - 바깥에서 온 값이 **이긴다**(`style`은 뒤에 펼치고, `className`은 뒤에 붙는다).
|
|
1614
|
+
* 자식 축은 "이 자리에서만 예외로 이렇게" 하려는 지정이므로 컴포넌트 기본값을 눌러야 한다.
|
|
1615
|
+
* - 뿌리가 `null`이면 아무것도 하지 않는다(조건부로 아무것도 안 그리는 컴포넌트).
|
|
1616
|
+
* - 뿌리가 Fragment면 **첫 엘리먼트 자식**에 얹는다. 부모의 배치 흐름에 실제로 놓이는 것이
|
|
1617
|
+
* 그것이기 때문이다 — `ImageLightbox`·`SearchableMultiPicker`가 `<>{트리거}{오버레이}</>`
|
|
1618
|
+
* 모양이고, 오버레이는 `position: fixed`라 폭·여백을 줘도 뜻이 없다.
|
|
1619
|
+
* - 그마저 없으면(전부 텍스트거나 비었으면) 조용히 지나간다 — 감싸기 **전과 같은** 결과다.
|
|
1620
|
+
* `Show`·`Can`·`ForEach`가 그런 컴포넌트이고, 그쪽은 애초에 감싸지 않는다.
|
|
1621
|
+
*
|
|
1622
|
+
* ## 안쪽 컴포넌트를 함수로 직접 부르는 것에 대하여
|
|
1623
|
+
*
|
|
1624
|
+
* 뿌리 엘리먼트에 손을 대려면 그것을 **손에 쥐어야** 한다. `<Inner …/>`로 엘리먼트를 만들면
|
|
1625
|
+
* 타입이 `Inner`인 엘리먼트가 나올 뿐이라 복제해 봐야 지금과 똑같이 무시된다. 그래서
|
|
1626
|
+
* `Inner(props)`로 부른다.
|
|
1627
|
+
*
|
|
1628
|
+
* 이 호출이 안전한 조건은 **평범한 함수 컴포넌트**라는 것이다. 훅은 조건 없이 한 번만 부르므로
|
|
1629
|
+
* 순서가 어긋나지 않고, 상태는 `Wrapped`에 붙어 그대로 동작한다. `memo`·`forwardRef`·클래스는
|
|
1630
|
+
* 이렇게 부를 수 없으므로 그때는 **감싸지 않고 그대로 돌려준다** — 잘못 감싸느니 예전 동작이 낫다.
|
|
1631
|
+
*/
|
|
1632
|
+
|
|
1633
|
+
declare function boxed<P extends object>(Inner: React__default.ComponentType<P>, displayName?: string): React__default.FC<P & SduiBoxProps>;
|
|
1634
|
+
|
|
1555
1635
|
interface Props {
|
|
1556
1636
|
name: string;
|
|
1557
1637
|
children: React__default.ReactNode;
|
|
@@ -1571,4 +1651,4 @@ declare class NodeErrorBoundary extends React__default.Component<Props, State> {
|
|
|
1571
1651
|
render(): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
|
|
1572
1652
|
}
|
|
1573
1653
|
|
|
1574
|
-
export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator,
|
|
1654
|
+
export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };
|