@reopt-ai/opt-ui 1.11.0 → 1.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COMPONENT_CATALOG.md +495 -230
- package/README.md +43 -5
- package/dist/core/index.cjs +2 -2
- package/dist/core/index.d.cts +2 -2
- package/dist/core/index.d.ts +2 -2
- package/dist/core/index.js +2 -2
- package/dist/docs/02-components/01-core.md +154 -85
- package/dist/docs/02-components/02-visuals.md +1 -1
- package/dist/docs/02-components/03-shells.md +349 -149
- package/dist/docs/02-components/04-surfaces.md +1 -1
- package/dist/docs/02-components/index.md +5 -5
- package/dist/docs/03-recipes/02-dashboards.md +126 -10
- package/dist/{field-sidebar-B5SQC35J.d.cts → field-sidebar-CrYlRZew.d.ts} +164 -154
- package/dist/{field-sidebar-DAuN4jPV.cjs → field-sidebar-oa6zOmcd.cjs} +1540 -1537
- package/dist/{field-sidebar-CBeWE8xX.d.ts → field-sidebar-uXmoyvd7.d.cts} +164 -154
- package/dist/{field-sidebar-BXl5RJ3q.js → field-sidebar-zkkqC7__.js} +1541 -1540
- package/dist/id-registry.cjs +78 -6
- package/dist/id-registry.d.cts +1 -2
- package/dist/id-registry.d.ts +1 -2
- package/dist/id-registry.js +78 -8
- package/dist/id-registry.json +168 -19
- package/dist/index.cjs +1127 -224
- package/dist/index.d.cts +567 -58
- package/dist/index.d.ts +567 -58
- package/dist/index.js +1118 -227
- package/dist/{key-pad-menu-BxTy_u0Q.d.cts → key-pad-menu-CwcY_Vps.d.cts} +2 -3
- package/dist/{key-pad-menu-wXkWn1I1.js → key-pad-menu-Di2aRGbM.js} +4 -6
- package/dist/{key-pad-menu-Cg6rZBie.cjs → key-pad-menu-SItoHPLu.cjs} +1 -1
- package/dist/{key-pad-menu-u5GTJl9B.d.ts → key-pad-menu-WBJShCJn.d.ts} +3 -4
- package/dist/meta.cjs +894 -28
- package/dist/meta.d.cts +12 -36
- package/dist/meta.d.ts +12 -36
- package/dist/meta.js +894 -30
- package/dist/query.d.cts +1 -2
- package/dist/query.d.ts +1 -2
- package/dist/query.js +0 -2
- package/dist/shells/index.cjs +1 -1
- package/dist/shells/index.d.cts +1 -1
- package/dist/shells/index.d.ts +1 -1
- package/dist/shells/index.js +1 -1
- package/dist/tailwind.css +7 -0
- package/dist/{text-truncate-DW78lg4S.d.cts → text-truncate-CQyfUZvq.d.cts} +31 -3
- package/dist/{text-truncate-DW78lg4S.d.ts → text-truncate-CQyfUZvq.d.ts} +31 -3
- package/dist/{text-truncate-C17HHCR-.js → text-truncate-DSuZECy0.js} +43 -10
- package/dist/{text-truncate-BZdL1k5Z.cjs → text-truncate-I1XLWmRa.cjs} +48 -7
- package/dist/theme/server.d.cts +1 -2
- package/dist/theme/server.d.ts +1 -2
- package/dist/theme/server.js +0 -2
- package/dist/visuals/index.js +0 -1
- package/package.json +4 -3
- package/dist/field-sidebar-B5SQC35J.d.cts.map +0 -1
- package/dist/field-sidebar-BXl5RJ3q.js.map +0 -1
- package/dist/field-sidebar-CBeWE8xX.d.ts.map +0 -1
- package/dist/id-registry.d.cts.map +0 -1
- package/dist/id-registry.d.ts.map +0 -1
- package/dist/id-registry.js.map +0 -1
- package/dist/index.d.cts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/key-pad-menu-BxTy_u0Q.d.cts.map +0 -1
- package/dist/key-pad-menu-u5GTJl9B.d.ts.map +0 -1
- package/dist/key-pad-menu-wXkWn1I1.js.map +0 -1
- package/dist/meta.d.cts.map +0 -1
- package/dist/meta.d.ts.map +0 -1
- package/dist/meta.js.map +0 -1
- package/dist/query.d.cts.map +0 -1
- package/dist/query.d.ts.map +0 -1
- package/dist/query.js.map +0 -1
- package/dist/text-truncate-C17HHCR-.js.map +0 -1
- package/dist/text-truncate-DW78lg4S.d.cts.map +0 -1
- package/dist/text-truncate-DW78lg4S.d.ts.map +0 -1
- package/dist/theme/server.d.cts.map +0 -1
- package/dist/theme/server.d.ts.map +0 -1
- package/dist/theme/server.js.map +0 -1
package/dist/meta.js
CHANGED
|
@@ -2,7 +2,7 @@ const coreMetas = [
|
|
|
2
2
|
{
|
|
3
3
|
name: "FieldToken",
|
|
4
4
|
category: "core",
|
|
5
|
-
description: "필드 타입을
|
|
5
|
+
description: "필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.",
|
|
6
6
|
slug: "field-token",
|
|
7
7
|
exports: [
|
|
8
8
|
"FieldToken",
|
|
@@ -45,6 +45,17 @@ const coreMetas = [
|
|
|
45
45
|
default: "false",
|
|
46
46
|
description: "인접 텍스트가 타입을 이미 말할 때 접근성 트리에서 제외"
|
|
47
47
|
},
|
|
48
|
+
{
|
|
49
|
+
name: "withLabel",
|
|
50
|
+
type: "boolean",
|
|
51
|
+
default: "false",
|
|
52
|
+
description: "글리프 옆에 타입 이름을 함께 표시"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: "label",
|
|
56
|
+
type: "string",
|
|
57
|
+
description: "withLabel이 표시할 문구. 기본값은 타입 이름"
|
|
58
|
+
},
|
|
48
59
|
{
|
|
49
60
|
name: "className",
|
|
50
61
|
type: "string",
|
|
@@ -720,7 +731,7 @@ const coreMetas = [
|
|
|
720
731
|
},
|
|
721
732
|
{
|
|
722
733
|
name: "variant",
|
|
723
|
-
type: "\"heading-1\"
|
|
734
|
+
type: "\"heading-1\" | \"heading-2\" | \"heading-3\" | \"heading-4\" | \"heading-5\" | \"heading-6\" | \"display-1\" | \"display-2\" | \"display-3\"",
|
|
724
735
|
description: "시각적 제목 역할"
|
|
725
736
|
},
|
|
726
737
|
{
|
|
@@ -2725,10 +2736,19 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
2725
2736
|
type: "string",
|
|
2726
2737
|
description: "스위치 레이블"
|
|
2727
2738
|
},
|
|
2739
|
+
{
|
|
2740
|
+
name: "hint",
|
|
2741
|
+
type: "string",
|
|
2742
|
+
description: "레이블 아래 보조 설명 텍스트"
|
|
2743
|
+
},
|
|
2728
2744
|
{
|
|
2729
2745
|
name: "description",
|
|
2730
2746
|
type: "string",
|
|
2731
|
-
description: "레이블 아래 설명 텍스트"
|
|
2747
|
+
description: "레이블 아래 설명 텍스트",
|
|
2748
|
+
deprecated: {
|
|
2749
|
+
since: "1.9.0",
|
|
2750
|
+
replacement: "hint"
|
|
2751
|
+
}
|
|
2732
2752
|
},
|
|
2733
2753
|
{
|
|
2734
2754
|
name: "checked",
|
|
@@ -3402,10 +3422,19 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
3402
3422
|
type: "string",
|
|
3403
3423
|
description: "체크박스 레이블"
|
|
3404
3424
|
},
|
|
3425
|
+
{
|
|
3426
|
+
name: "hint",
|
|
3427
|
+
type: "string",
|
|
3428
|
+
description: "레이블 아래 보조 설명 텍스트"
|
|
3429
|
+
},
|
|
3405
3430
|
{
|
|
3406
3431
|
name: "description",
|
|
3407
3432
|
type: "string",
|
|
3408
|
-
description: "레이블 아래 설명 텍스트"
|
|
3433
|
+
description: "레이블 아래 설명 텍스트",
|
|
3434
|
+
deprecated: {
|
|
3435
|
+
since: "1.9.0",
|
|
3436
|
+
replacement: "hint"
|
|
3437
|
+
}
|
|
3409
3438
|
},
|
|
3410
3439
|
{
|
|
3411
3440
|
name: "checked",
|
|
@@ -3539,10 +3568,19 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
3539
3568
|
type: "string",
|
|
3540
3569
|
description: "라디오 레이블"
|
|
3541
3570
|
},
|
|
3571
|
+
{
|
|
3572
|
+
name: "hint",
|
|
3573
|
+
type: "string",
|
|
3574
|
+
description: "레이블 아래 보조 설명 텍스트"
|
|
3575
|
+
},
|
|
3542
3576
|
{
|
|
3543
3577
|
name: "description",
|
|
3544
3578
|
type: "string",
|
|
3545
|
-
description: "레이블 아래 설명 텍스트"
|
|
3579
|
+
description: "레이블 아래 설명 텍스트",
|
|
3580
|
+
deprecated: {
|
|
3581
|
+
since: "1.9.0",
|
|
3582
|
+
replacement: "hint"
|
|
3583
|
+
}
|
|
3546
3584
|
},
|
|
3547
3585
|
{
|
|
3548
3586
|
name: "size",
|
|
@@ -3613,7 +3651,7 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
3613
3651
|
},
|
|
3614
3652
|
{
|
|
3615
3653
|
name: "onComparisonChange",
|
|
3616
|
-
type: "(
|
|
3654
|
+
type: "(mode: ComparisonMode | null) => void",
|
|
3617
3655
|
description: "비교 모드 변경 콜백"
|
|
3618
3656
|
},
|
|
3619
3657
|
{
|
|
@@ -4301,7 +4339,12 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
4301
4339
|
{
|
|
4302
4340
|
name: "autoSaveId",
|
|
4303
4341
|
type: "string",
|
|
4304
|
-
description: "id의 deprecated 별칭"
|
|
4342
|
+
description: "id의 deprecated 별칭",
|
|
4343
|
+
deprecated: {
|
|
4344
|
+
since: "1.6.0",
|
|
4345
|
+
replacement: "id",
|
|
4346
|
+
reason: "id + defaultLayout + onLayoutChanged 조합으로 대체되었습니다."
|
|
4347
|
+
}
|
|
4305
4348
|
},
|
|
4306
4349
|
{
|
|
4307
4350
|
name: "className",
|
|
@@ -4948,6 +4991,194 @@ const MyDashboard = createBlock<MyDashboardProps>(
|
|
|
4948
4991
|
}
|
|
4949
4992
|
] },
|
|
4950
4993
|
testDescribe: "ShaderSurface"
|
|
4994
|
+
},
|
|
4995
|
+
{
|
|
4996
|
+
name: "Callout",
|
|
4997
|
+
category: "core",
|
|
4998
|
+
description: "페이지에 머무는 인페이지 고지. Alert와 달리 dismiss가 없고, 조건이 참인 동안 레이아웃의 일부로 남습니다.",
|
|
4999
|
+
slug: "callout",
|
|
5000
|
+
exports: ["Callout"],
|
|
5001
|
+
props: { Callout: [
|
|
5002
|
+
{
|
|
5003
|
+
name: "tone",
|
|
5004
|
+
type: "\"info\" | \"success\" | \"warning\" | \"danger\" | \"neutral\"",
|
|
5005
|
+
default: "\"info\"",
|
|
5006
|
+
description: "고지의 성격"
|
|
5007
|
+
},
|
|
5008
|
+
{
|
|
5009
|
+
name: "title",
|
|
5010
|
+
type: "ReactNode",
|
|
5011
|
+
description: "한 줄 제목"
|
|
5012
|
+
},
|
|
5013
|
+
{
|
|
5014
|
+
name: "icon",
|
|
5015
|
+
type: "ReactNode",
|
|
5016
|
+
description: "tone 기본 글리프 대체. null이면 글리프 없음"
|
|
5017
|
+
},
|
|
5018
|
+
{
|
|
5019
|
+
name: "action",
|
|
5020
|
+
type: "ReactNode",
|
|
5021
|
+
description: "다음 한 걸음. 둘 이상이면 고지가 아니라 폼"
|
|
5022
|
+
},
|
|
5023
|
+
{
|
|
5024
|
+
name: "size",
|
|
5025
|
+
type: "\"sm\" | \"md\"",
|
|
5026
|
+
default: "\"md\"",
|
|
5027
|
+
description: "밀도"
|
|
5028
|
+
},
|
|
5029
|
+
{
|
|
5030
|
+
name: "children",
|
|
5031
|
+
type: "ReactNode",
|
|
5032
|
+
description: "본문"
|
|
5033
|
+
}
|
|
5034
|
+
] },
|
|
5035
|
+
usage: {
|
|
5036
|
+
bestPractices: ["조건이 참인 동안 계속 보여야 하는 안내에 사용합니다 (정리할 신규 N개, 표본 기반 수치)."],
|
|
5037
|
+
avoid: ["방금 일어난 일을 알릴 때는 Alert를 씁니다. Callout에는 dismiss가 없습니다."]
|
|
5038
|
+
},
|
|
5039
|
+
testDescribe: "Callout"
|
|
5040
|
+
},
|
|
5041
|
+
{
|
|
5042
|
+
name: "StatusDot",
|
|
5043
|
+
category: "core",
|
|
5044
|
+
description: "점 + 텍스트로 상태를 표현합니다. 라벨이 필수라 색만으로 상태를 말할 수 없습니다.",
|
|
5045
|
+
slug: "status-dot",
|
|
5046
|
+
exports: ["StatusDot"],
|
|
5047
|
+
props: { StatusDot: [
|
|
5048
|
+
{
|
|
5049
|
+
name: "tone",
|
|
5050
|
+
type: "\"neutral\" | \"muted\" | \"info\" | \"success\" | \"warning\" | \"danger\"",
|
|
5051
|
+
default: "\"neutral\"",
|
|
5052
|
+
description: "점 색상"
|
|
5053
|
+
},
|
|
5054
|
+
{
|
|
5055
|
+
name: "size",
|
|
5056
|
+
type: "\"sm\" | \"md\"",
|
|
5057
|
+
default: "\"md\"",
|
|
5058
|
+
description: "점과 글자 크기"
|
|
5059
|
+
},
|
|
5060
|
+
{
|
|
5061
|
+
name: "children",
|
|
5062
|
+
type: "ReactNode",
|
|
5063
|
+
required: true,
|
|
5064
|
+
description: "상태 라벨. 필수 — 색은 상태가 아닙니다"
|
|
5065
|
+
},
|
|
5066
|
+
{
|
|
5067
|
+
name: "hint",
|
|
5068
|
+
type: "string",
|
|
5069
|
+
description: "판정 기준 툴팁"
|
|
5070
|
+
}
|
|
5071
|
+
] },
|
|
5072
|
+
usage: {
|
|
5073
|
+
bestPractices: ["표의 상태 컬럼처럼 행마다 반복되는 자리에 씁니다. 점은 장식이고 의미는 텍스트가 담습니다."],
|
|
5074
|
+
avoid: ["사람이 붙인 라벨(태그, 카테고리)에는 Badge를 씁니다. StatusDot은 관측된 상태용입니다."]
|
|
5075
|
+
},
|
|
5076
|
+
testDescribe: "StatusDot"
|
|
5077
|
+
},
|
|
5078
|
+
{
|
|
5079
|
+
name: "CopyButton",
|
|
5080
|
+
category: "core",
|
|
5081
|
+
description: "값을 클립보드에 올리고 성공 여부를 알립니다. 클립보드 거부를 삼키지 않습니다.",
|
|
5082
|
+
slug: "copy-button",
|
|
5083
|
+
exports: ["CopyButton"],
|
|
5084
|
+
props: { CopyButton: [
|
|
5085
|
+
{
|
|
5086
|
+
name: "value",
|
|
5087
|
+
type: "string",
|
|
5088
|
+
required: true,
|
|
5089
|
+
description: "복사할 텍스트"
|
|
5090
|
+
},
|
|
5091
|
+
{
|
|
5092
|
+
name: "variant",
|
|
5093
|
+
type: "\"icon\" | \"text\"",
|
|
5094
|
+
default: "\"icon\"",
|
|
5095
|
+
description: "글리프만 / 글리프 + 라벨"
|
|
5096
|
+
},
|
|
5097
|
+
{
|
|
5098
|
+
name: "size",
|
|
5099
|
+
type: "\"sm\" | \"md\"",
|
|
5100
|
+
default: "\"md\"",
|
|
5101
|
+
description: "버튼 크기"
|
|
5102
|
+
},
|
|
5103
|
+
{
|
|
5104
|
+
name: "feedbackDuration",
|
|
5105
|
+
type: "number",
|
|
5106
|
+
default: "1500",
|
|
5107
|
+
description: "확인 상태 유지 시간 (ms)"
|
|
5108
|
+
},
|
|
5109
|
+
{
|
|
5110
|
+
name: "onCopy",
|
|
5111
|
+
type: "(ok: boolean) => void",
|
|
5112
|
+
description: "실제로 복사됐는지 — 비보안 컨텍스트·권한 거부에서 false"
|
|
5113
|
+
},
|
|
5114
|
+
{
|
|
5115
|
+
name: "labels",
|
|
5116
|
+
type: "CopyButtonLabels",
|
|
5117
|
+
description: "copy / copied / failed 문구"
|
|
5118
|
+
}
|
|
5119
|
+
] },
|
|
5120
|
+
testDescribe: "CopyButton"
|
|
5121
|
+
},
|
|
5122
|
+
{
|
|
5123
|
+
name: "SegmentedControl",
|
|
5124
|
+
category: "core",
|
|
5125
|
+
description: "선택지를 모두 보여주는 단일 선택 컨트롤. radio-group 프리미티브 위에 올려 화살표 키가 동작합니다.",
|
|
5126
|
+
slug: "segmented-control",
|
|
5127
|
+
exports: ["SegmentedControl"],
|
|
5128
|
+
props: { SegmentedControl: [
|
|
5129
|
+
{
|
|
5130
|
+
name: "options",
|
|
5131
|
+
type: "SegmentedControlOption<T>[]",
|
|
5132
|
+
required: true,
|
|
5133
|
+
description: "세그먼트 목록 (value / label / icon / badge / disabled)"
|
|
5134
|
+
},
|
|
5135
|
+
{
|
|
5136
|
+
name: "value",
|
|
5137
|
+
type: "T",
|
|
5138
|
+
required: true,
|
|
5139
|
+
description: "선택된 값"
|
|
5140
|
+
},
|
|
5141
|
+
{
|
|
5142
|
+
name: "onChange",
|
|
5143
|
+
type: "(value: T) => void",
|
|
5144
|
+
required: true,
|
|
5145
|
+
description: "선택 변경"
|
|
5146
|
+
},
|
|
5147
|
+
{
|
|
5148
|
+
name: "size",
|
|
5149
|
+
type: "\"sm\" | \"md\"",
|
|
5150
|
+
default: "\"md\"",
|
|
5151
|
+
description: "컨트롤 크기"
|
|
5152
|
+
},
|
|
5153
|
+
{
|
|
5154
|
+
name: "fullWidth",
|
|
5155
|
+
type: "boolean",
|
|
5156
|
+
default: "false",
|
|
5157
|
+
description: "컨테이너를 균등 분할"
|
|
5158
|
+
},
|
|
5159
|
+
{
|
|
5160
|
+
name: "disabled",
|
|
5161
|
+
type: "boolean",
|
|
5162
|
+
default: "false",
|
|
5163
|
+
description: "전체 비활성"
|
|
5164
|
+
},
|
|
5165
|
+
{
|
|
5166
|
+
name: "aria-label",
|
|
5167
|
+
type: "string",
|
|
5168
|
+
required: true,
|
|
5169
|
+
description: "radiogroup 이름. 필수"
|
|
5170
|
+
},
|
|
5171
|
+
{
|
|
5172
|
+
name: "className",
|
|
5173
|
+
type: "string",
|
|
5174
|
+
description: "추가 CSS 클래스"
|
|
5175
|
+
}
|
|
5176
|
+
] },
|
|
5177
|
+
usage: {
|
|
5178
|
+
bestPractices: ["정확히 하나가 참이고 선택지가 적을 때 씁니다 (이벤트 | 속성)."],
|
|
5179
|
+
avoid: ["여러 개를 동시에 켤 수 있으면 ToggleGroup을 씁니다.", "선택지가 많으면 Select를 씁니다."]
|
|
5180
|
+
},
|
|
5181
|
+
testDescribe: "SegmentedControl"
|
|
4951
5182
|
}
|
|
4952
5183
|
];
|
|
4953
5184
|
//#endregion
|
|
@@ -4967,6 +5198,14 @@ const shellMetas = [
|
|
|
4967
5198
|
required: true,
|
|
4968
5199
|
description: "FAQ 항목 배열. { id, question, answer }"
|
|
4969
5200
|
}] },
|
|
5201
|
+
ariaRole: "region",
|
|
5202
|
+
keyboardShortcuts: [{
|
|
5203
|
+
keys: "↑ ↓",
|
|
5204
|
+
action: "질문 사이 포커스 이동"
|
|
5205
|
+
}, {
|
|
5206
|
+
keys: "Enter / Space",
|
|
5207
|
+
action: "답변 펼치기 또는 접기"
|
|
5208
|
+
}],
|
|
4970
5209
|
dependencies: [{
|
|
4971
5210
|
slug: "disclosure",
|
|
4972
5211
|
category: "core"
|
|
@@ -5288,6 +5527,25 @@ const fields = [
|
|
|
5288
5527
|
slug: "kbd",
|
|
5289
5528
|
category: "core"
|
|
5290
5529
|
}],
|
|
5530
|
+
ariaRole: "menubar",
|
|
5531
|
+
keyboardShortcuts: [
|
|
5532
|
+
{
|
|
5533
|
+
keys: "← →",
|
|
5534
|
+
action: "상위 메뉴 사이 포커스 이동"
|
|
5535
|
+
},
|
|
5536
|
+
{
|
|
5537
|
+
keys: "Enter / Space / ↓",
|
|
5538
|
+
action: "메뉴 열기"
|
|
5539
|
+
},
|
|
5540
|
+
{
|
|
5541
|
+
keys: "↑ ↓",
|
|
5542
|
+
action: "열린 메뉴 항목 이동"
|
|
5543
|
+
},
|
|
5544
|
+
{
|
|
5545
|
+
keys: "Escape",
|
|
5546
|
+
action: "메뉴 닫고 트리거로 복귀"
|
|
5547
|
+
}
|
|
5548
|
+
],
|
|
5291
5549
|
testDescribe: "AppMenubar"
|
|
5292
5550
|
},
|
|
5293
5551
|
{
|
|
@@ -5299,7 +5557,7 @@ const fields = [
|
|
|
5299
5557
|
props: { CommandPalette: [
|
|
5300
5558
|
{
|
|
5301
5559
|
name: "commands",
|
|
5302
|
-
type: "Omit<
|
|
5560
|
+
type: "Omit<CommandDef, \"action\">[]",
|
|
5303
5561
|
required: true,
|
|
5304
5562
|
description: "커맨드 목록. { id, label, group, shortcut? }"
|
|
5305
5563
|
},
|
|
@@ -5317,7 +5575,7 @@ const fields = [
|
|
|
5317
5575
|
},
|
|
5318
5576
|
{
|
|
5319
5577
|
name: "onSelect",
|
|
5320
|
-
type: "(command: Omit<
|
|
5578
|
+
type: "(command: Omit<CommandDef, \"action\">) => void",
|
|
5321
5579
|
description: "커맨드 선택 핸들러"
|
|
5322
5580
|
},
|
|
5323
5581
|
{
|
|
@@ -5372,13 +5630,13 @@ const fields = [
|
|
|
5372
5630
|
props: { CommandPaletteTrigger: [
|
|
5373
5631
|
{
|
|
5374
5632
|
name: "commands",
|
|
5375
|
-
type: "Omit<
|
|
5633
|
+
type: "Omit<CommandDef, \"action\">[]",
|
|
5376
5634
|
required: true,
|
|
5377
5635
|
description: "커맨드 목록"
|
|
5378
5636
|
},
|
|
5379
5637
|
{
|
|
5380
5638
|
name: "onSelect",
|
|
5381
|
-
type: "(command: Omit<
|
|
5639
|
+
type: "(command: Omit<CommandDef, \"action\">) => void",
|
|
5382
5640
|
description: "커맨드 선택 핸들러"
|
|
5383
5641
|
},
|
|
5384
5642
|
{
|
|
@@ -5524,7 +5782,7 @@ const fields = [
|
|
|
5524
5782
|
{
|
|
5525
5783
|
name: "DataTable",
|
|
5526
5784
|
category: "shell",
|
|
5527
|
-
description: "제네릭 데이터 테이블.
|
|
5785
|
+
description: "제네릭 데이터 테이블. 제목은 opt-in이고 ariaLabel로 grid를 이름 붙이며, 동적 컬럼·안전 정렬·키보드 리사이즈·Composite 탐색을 지원합니다.",
|
|
5528
5786
|
slug: "data-table",
|
|
5529
5787
|
exports: ["DataTable"],
|
|
5530
5788
|
keyboardShortcuts: [
|
|
@@ -5592,8 +5850,12 @@ const fields = [
|
|
|
5592
5850
|
{
|
|
5593
5851
|
name: "title",
|
|
5594
5852
|
type: "string",
|
|
5595
|
-
|
|
5596
|
-
|
|
5853
|
+
description: "테이블 위에 표시할 제목. 생략하면 제목 영역을 렌더하지 않음"
|
|
5854
|
+
},
|
|
5855
|
+
{
|
|
5856
|
+
name: "ariaLabel",
|
|
5857
|
+
type: "string",
|
|
5858
|
+
description: "보이는 제목이 없을 때 grid에 제공할 접근 가능한 이름"
|
|
5597
5859
|
},
|
|
5598
5860
|
{
|
|
5599
5861
|
name: "onRowClick",
|
|
@@ -5603,7 +5865,7 @@ const fields = [
|
|
|
5603
5865
|
{
|
|
5604
5866
|
name: "emptyMessage",
|
|
5605
5867
|
type: "string",
|
|
5606
|
-
default: "\"
|
|
5868
|
+
default: "\"No data available\"",
|
|
5607
5869
|
description: "데이터 없을 때 표시할 메시지"
|
|
5608
5870
|
}
|
|
5609
5871
|
],
|
|
@@ -5853,7 +6115,7 @@ const data = [
|
|
|
5853
6115
|
},
|
|
5854
6116
|
{
|
|
5855
6117
|
name: "onFilterChange",
|
|
5856
|
-
type: "(filterId: string, value: string | string[]) => void",
|
|
6118
|
+
type: "(filterId: string, value: string | string[] | boolean) => void",
|
|
5857
6119
|
description: "필터 변경 핸들러"
|
|
5858
6120
|
},
|
|
5859
6121
|
{
|
|
@@ -6044,7 +6306,7 @@ const filters = [
|
|
|
6044
6306
|
},
|
|
6045
6307
|
{
|
|
6046
6308
|
name: "onSubmit",
|
|
6047
|
-
type: "(values: { email
|
|
6309
|
+
type: "(values: { email: string; password: string; confirmPassword?: string; rememberMe?: boolean; mode: \"login\" | \"signup\" }) => void",
|
|
6048
6310
|
description: "제출 핸들러"
|
|
6049
6311
|
},
|
|
6050
6312
|
{
|
|
@@ -6209,7 +6471,7 @@ const filters = [
|
|
|
6209
6471
|
},
|
|
6210
6472
|
{
|
|
6211
6473
|
name: "onSubmit",
|
|
6212
|
-
type: "(values: { title
|
|
6474
|
+
type: "(values: { title: string; description: string; file: File | null }) => void",
|
|
6213
6475
|
description: "제출 핸들러"
|
|
6214
6476
|
},
|
|
6215
6477
|
{
|
|
@@ -6577,10 +6839,78 @@ const filters = [
|
|
|
6577
6839
|
{
|
|
6578
6840
|
name: "PropertyExplorer",
|
|
6579
6841
|
category: "shell",
|
|
6580
|
-
description: "
|
|
6842
|
+
description: "검색 가능한 속성 목록을 그룹별로 표시하고, 숨김 상태와 호출자 소유의 명시적인 편집 액션을 함께 제공합니다.",
|
|
6581
6843
|
slug: "property-explorer",
|
|
6582
6844
|
exports: ["PropertyExplorer"],
|
|
6583
|
-
props: {
|
|
6845
|
+
props: {
|
|
6846
|
+
PropertyExplorer: [
|
|
6847
|
+
{
|
|
6848
|
+
name: "groups",
|
|
6849
|
+
type: "PropertyGroup[]",
|
|
6850
|
+
required: true,
|
|
6851
|
+
description: "그룹별 속성 목록. 각 속성은 dataType과 hidden 상태를 포함 가능"
|
|
6852
|
+
},
|
|
6853
|
+
{
|
|
6854
|
+
name: "onSelect",
|
|
6855
|
+
type: "(property: PropertyDef) => void",
|
|
6856
|
+
description: "속성 선택"
|
|
6857
|
+
},
|
|
6858
|
+
{
|
|
6859
|
+
name: "onEdit",
|
|
6860
|
+
type: "(property: PropertyDef) => void",
|
|
6861
|
+
description: "행에 명시적인 편집 버튼을 표시하고 선택한 속성을 전달"
|
|
6862
|
+
},
|
|
6863
|
+
{
|
|
6864
|
+
name: "className",
|
|
6865
|
+
type: "string",
|
|
6866
|
+
description: "추가 CSS 클래스"
|
|
6867
|
+
},
|
|
6868
|
+
{
|
|
6869
|
+
name: "labels",
|
|
6870
|
+
type: "PropertyExplorerLabels",
|
|
6871
|
+
description: "검색·빈 상태·편집·숨김 문구"
|
|
6872
|
+
}
|
|
6873
|
+
],
|
|
6874
|
+
PropertyDef: [
|
|
6875
|
+
{
|
|
6876
|
+
name: "name",
|
|
6877
|
+
type: "string",
|
|
6878
|
+
required: true,
|
|
6879
|
+
description: "속성 이름"
|
|
6880
|
+
},
|
|
6881
|
+
{
|
|
6882
|
+
name: "type",
|
|
6883
|
+
type: "string",
|
|
6884
|
+
required: true,
|
|
6885
|
+
description: "원본 스키마 타입"
|
|
6886
|
+
},
|
|
6887
|
+
{
|
|
6888
|
+
name: "dataType",
|
|
6889
|
+
type: "FieldDataType",
|
|
6890
|
+
description: "호출자가 이미 판정한 opt-ui 필드 타입"
|
|
6891
|
+
},
|
|
6892
|
+
{
|
|
6893
|
+
name: "description",
|
|
6894
|
+
type: "string",
|
|
6895
|
+
description: "속성 설명"
|
|
6896
|
+
},
|
|
6897
|
+
{
|
|
6898
|
+
name: "exampleValue",
|
|
6899
|
+
type: "string",
|
|
6900
|
+
description: "예시 값"
|
|
6901
|
+
},
|
|
6902
|
+
{
|
|
6903
|
+
name: "eventCount",
|
|
6904
|
+
type: "number",
|
|
6905
|
+
description: "관측 이벤트 수"
|
|
6906
|
+
},
|
|
6907
|
+
{
|
|
6908
|
+
name: "hidden",
|
|
6909
|
+
type: "boolean",
|
|
6910
|
+
description: "피커에서는 숨기되 탐색기에서는 흐리게 표시할 상태"
|
|
6911
|
+
}
|
|
6912
|
+
]
|
|
6913
|
+
},
|
|
6584
6914
|
dependencies: [{
|
|
6585
6915
|
slug: "input",
|
|
6586
6916
|
category: "core"
|
|
@@ -6739,10 +7069,74 @@ const filters = [
|
|
|
6739
7069
|
{
|
|
6740
7070
|
name: "EventMetaEditor",
|
|
6741
7071
|
category: "shell",
|
|
6742
|
-
description: "이벤트
|
|
7072
|
+
description: "기본 이벤트 메타와 호출자 소유 섹션을 한 폼에서 편집하고, footer의 한 액션으로 함께 저장할 수 있습니다.",
|
|
6743
7073
|
slug: "event-meta-editor",
|
|
6744
7074
|
exports: ["EventMetaEditor"],
|
|
6745
|
-
props: {
|
|
7075
|
+
props: {
|
|
7076
|
+
EventMetaEditor: [
|
|
7077
|
+
{
|
|
7078
|
+
name: "value",
|
|
7079
|
+
type: "EventMeta",
|
|
7080
|
+
required: true,
|
|
7081
|
+
description: "편집 중인 이벤트 메타데이터"
|
|
7082
|
+
},
|
|
7083
|
+
{
|
|
7084
|
+
name: "onChange",
|
|
7085
|
+
type: "(meta: EventMeta) => void",
|
|
7086
|
+
required: true,
|
|
7087
|
+
description: "메타데이터 변경"
|
|
7088
|
+
},
|
|
7089
|
+
{
|
|
7090
|
+
name: "icons",
|
|
7091
|
+
type: "IconDef[]",
|
|
7092
|
+
description: "선택 가능한 아이콘"
|
|
7093
|
+
},
|
|
7094
|
+
{
|
|
7095
|
+
name: "sections",
|
|
7096
|
+
type: "EventMetaEditorSection[]",
|
|
7097
|
+
description: "기본 여섯 필드 뒤에 렌더할 호출자 소유 섹션"
|
|
7098
|
+
},
|
|
7099
|
+
{
|
|
7100
|
+
name: "footer",
|
|
7101
|
+
type: "ReactNode",
|
|
7102
|
+
description: "내장 필드와 추가 섹션을 함께 저장하는 마지막 액션 영역"
|
|
7103
|
+
},
|
|
7104
|
+
{
|
|
7105
|
+
name: "className",
|
|
7106
|
+
type: "string",
|
|
7107
|
+
description: "추가 CSS 클래스"
|
|
7108
|
+
},
|
|
7109
|
+
{
|
|
7110
|
+
name: "labels",
|
|
7111
|
+
type: "EventMetaEditorLabels",
|
|
7112
|
+
description: "필드 레이블과 placeholder 문구"
|
|
7113
|
+
}
|
|
7114
|
+
],
|
|
7115
|
+
EventMetaEditorSection: [
|
|
7116
|
+
{
|
|
7117
|
+
name: "id",
|
|
7118
|
+
type: "string",
|
|
7119
|
+
required: true,
|
|
7120
|
+
description: "섹션 키"
|
|
7121
|
+
},
|
|
7122
|
+
{
|
|
7123
|
+
name: "title",
|
|
7124
|
+
type: "ReactNode",
|
|
7125
|
+
description: "섹션 제목"
|
|
7126
|
+
},
|
|
7127
|
+
{
|
|
7128
|
+
name: "description",
|
|
7129
|
+
type: "ReactNode",
|
|
7130
|
+
description: "섹션 변경이 미치는 영향 안내"
|
|
7131
|
+
},
|
|
7132
|
+
{
|
|
7133
|
+
name: "children",
|
|
7134
|
+
type: "ReactNode",
|
|
7135
|
+
required: true,
|
|
7136
|
+
description: "호출자가 소유하는 필드"
|
|
7137
|
+
}
|
|
7138
|
+
]
|
|
7139
|
+
},
|
|
6746
7140
|
dependencies: [
|
|
6747
7141
|
{
|
|
6748
7142
|
slug: "input",
|
|
@@ -6806,7 +7200,7 @@ const filters = [
|
|
|
6806
7200
|
},
|
|
6807
7201
|
{
|
|
6808
7202
|
name: "onSave",
|
|
6809
|
-
type: "(report: { name
|
|
7203
|
+
type: "(report: { name: string; description: string; chartType: ReportBuilderChartType; dataSourceId: string }) => void",
|
|
6810
7204
|
description: "저장 콜백"
|
|
6811
7205
|
},
|
|
6812
7206
|
{
|
|
@@ -7664,7 +8058,7 @@ const filters = [
|
|
|
7664
8058
|
props: { AsyncCombobox: [
|
|
7665
8059
|
{
|
|
7666
8060
|
name: "onSearch",
|
|
7667
|
-
type: "(
|
|
8061
|
+
type: "(query: string) => Promise<string[]>",
|
|
7668
8062
|
required: true,
|
|
7669
8063
|
description: "검색 콜백"
|
|
7670
8064
|
},
|
|
@@ -7684,7 +8078,11 @@ const filters = [
|
|
|
7684
8078
|
name: "placeholder",
|
|
7685
8079
|
type: "string",
|
|
7686
8080
|
default: "\"Search…\"",
|
|
7687
|
-
description: "플레이스홀더"
|
|
8081
|
+
description: "플레이스홀더",
|
|
8082
|
+
deprecated: {
|
|
8083
|
+
since: "1.9.0",
|
|
8084
|
+
replacement: "labels.placeholder"
|
|
8085
|
+
}
|
|
7688
8086
|
},
|
|
7689
8087
|
{
|
|
7690
8088
|
name: "onSelect",
|
|
@@ -7699,7 +8097,11 @@ const filters = [
|
|
|
7699
8097
|
{
|
|
7700
8098
|
name: "loadingText",
|
|
7701
8099
|
type: "string",
|
|
7702
|
-
description: "로딩
|
|
8100
|
+
description: "로딩 문구",
|
|
8101
|
+
deprecated: {
|
|
8102
|
+
since: "1.9.0",
|
|
8103
|
+
replacement: "labels.loading"
|
|
8104
|
+
}
|
|
7703
8105
|
}
|
|
7704
8106
|
] },
|
|
7705
8107
|
dependencies: [{
|
|
@@ -7735,6 +8137,14 @@ const filters = [
|
|
|
7735
8137
|
description: "커스텀 CSS 클래스"
|
|
7736
8138
|
}
|
|
7737
8139
|
] },
|
|
8140
|
+
ariaRole: "tablist",
|
|
8141
|
+
keyboardShortcuts: [{
|
|
8142
|
+
keys: "↑ ↓",
|
|
8143
|
+
action: "세로 탭 사이 이동 및 선택"
|
|
8144
|
+
}, {
|
|
8145
|
+
keys: "Home / End",
|
|
8146
|
+
action: "첫 번째 또는 마지막 탭으로 이동"
|
|
8147
|
+
}],
|
|
7738
8148
|
dependencies: [{
|
|
7739
8149
|
slug: "tabs",
|
|
7740
8150
|
category: "core"
|
|
@@ -7807,12 +8217,30 @@ const filters = [
|
|
|
7807
8217
|
default: "24",
|
|
7808
8218
|
description: "들여쓰기 크기 (px)"
|
|
7809
8219
|
},
|
|
8220
|
+
{
|
|
8221
|
+
name: "getRowLabel",
|
|
8222
|
+
type: "(node: TreeNode<T>) => string",
|
|
8223
|
+
description: "행별 펼침/접기 컨트롤의 접근 가능한 이름 생성기"
|
|
8224
|
+
},
|
|
8225
|
+
{
|
|
8226
|
+
name: "aria-label",
|
|
8227
|
+
type: "string",
|
|
8228
|
+
description: "표의 접근 가능한 이름"
|
|
8229
|
+
},
|
|
7810
8230
|
{
|
|
7811
8231
|
name: "className",
|
|
7812
8232
|
type: "string",
|
|
7813
8233
|
description: "커스텀 CSS 클래스"
|
|
7814
8234
|
}
|
|
7815
8235
|
] },
|
|
8236
|
+
ariaRole: "table",
|
|
8237
|
+
keyboardShortcuts: [{
|
|
8238
|
+
keys: "Tab",
|
|
8239
|
+
action: "펼침/접기 컨트롤 사이 이동"
|
|
8240
|
+
}, {
|
|
8241
|
+
keys: "Enter / Space",
|
|
8242
|
+
action: "하위 행 펼치기 또는 접기"
|
|
8243
|
+
}],
|
|
7816
8244
|
dependencies: [{
|
|
7817
8245
|
slug: "data-table",
|
|
7818
8246
|
category: "shells"
|
|
@@ -7876,7 +8304,7 @@ const filters = [
|
|
|
7876
8304
|
},
|
|
7877
8305
|
{
|
|
7878
8306
|
name: "onDragEnd",
|
|
7879
|
-
type: "(itemId,
|
|
8307
|
+
type: "(itemId: string, fromColumnId: string, toColumnId: string, toIndex: number) => void",
|
|
7880
8308
|
required: true,
|
|
7881
8309
|
description: "드래그 완료 콜백"
|
|
7882
8310
|
},
|
|
@@ -8112,7 +8540,7 @@ const filters = [
|
|
|
8112
8540
|
},
|
|
8113
8541
|
{
|
|
8114
8542
|
name: "onImport",
|
|
8115
|
-
type: "(mapping, data) => void",
|
|
8543
|
+
type: "(mapping: Record<string, string>, data: string[][]) => void",
|
|
8116
8544
|
required: true,
|
|
8117
8545
|
description: "임포트 확정 콜백"
|
|
8118
8546
|
},
|
|
@@ -8164,12 +8592,32 @@ const filters = [
|
|
|
8164
8592
|
default: "\"Menu\"",
|
|
8165
8593
|
description: "트리거 버튼 텍스트"
|
|
8166
8594
|
},
|
|
8595
|
+
{
|
|
8596
|
+
name: "aria-label",
|
|
8597
|
+
type: "string",
|
|
8598
|
+
description: "열린 메가 메뉴 탐색 영역의 접근 가능한 이름"
|
|
8599
|
+
},
|
|
8167
8600
|
{
|
|
8168
8601
|
name: "className",
|
|
8169
8602
|
type: "string",
|
|
8170
8603
|
description: "커스텀 CSS 클래스"
|
|
8171
8604
|
}
|
|
8172
8605
|
] },
|
|
8606
|
+
ariaRole: "navigation",
|
|
8607
|
+
keyboardShortcuts: [
|
|
8608
|
+
{
|
|
8609
|
+
keys: "Enter / Space",
|
|
8610
|
+
action: "메가 메뉴 열기"
|
|
8611
|
+
},
|
|
8612
|
+
{
|
|
8613
|
+
keys: "Tab",
|
|
8614
|
+
action: "메뉴 링크와 액션 사이 이동"
|
|
8615
|
+
},
|
|
8616
|
+
{
|
|
8617
|
+
keys: "Escape",
|
|
8618
|
+
action: "메가 메뉴 닫기"
|
|
8619
|
+
}
|
|
8620
|
+
],
|
|
8173
8621
|
dependencies: [{
|
|
8174
8622
|
slug: "popover",
|
|
8175
8623
|
category: "core"
|
|
@@ -8766,6 +9214,16 @@ const messages = [
|
|
|
8766
9214
|
slug: "time-series-panel",
|
|
8767
9215
|
exports: ["TimeSeriesPanel"],
|
|
8768
9216
|
props: { TimeSeriesPanel: [
|
|
9217
|
+
{
|
|
9218
|
+
name: "title",
|
|
9219
|
+
type: "ReactNode",
|
|
9220
|
+
description: "패널 제목. aria-label이 없으면 region 이름으로 연결됩니다"
|
|
9221
|
+
},
|
|
9222
|
+
{
|
|
9223
|
+
name: "description",
|
|
9224
|
+
type: "ReactNode",
|
|
9225
|
+
description: "패널 보조 설명"
|
|
9226
|
+
},
|
|
8769
9227
|
{
|
|
8770
9228
|
name: "data",
|
|
8771
9229
|
type: "TimeSeriesPoint[]",
|
|
@@ -8812,6 +9270,11 @@ const messages = [
|
|
|
8812
9270
|
type: "number",
|
|
8813
9271
|
default: "280",
|
|
8814
9272
|
description: "차트 높이"
|
|
9273
|
+
},
|
|
9274
|
+
{
|
|
9275
|
+
name: "aria-label",
|
|
9276
|
+
type: "string",
|
|
9277
|
+
description: "제목 대신 사용할 패널 region의 접근 가능한 이름"
|
|
8815
9278
|
}
|
|
8816
9279
|
] },
|
|
8817
9280
|
ariaRole: "region",
|
|
@@ -8995,9 +9458,410 @@ const messages = [
|
|
|
8995
9458
|
] },
|
|
8996
9459
|
ariaRole: "complementary",
|
|
8997
9460
|
testDescribe: "FieldSidebar"
|
|
9461
|
+
},
|
|
9462
|
+
{
|
|
9463
|
+
name: "InspectorLayout",
|
|
9464
|
+
category: "shells",
|
|
9465
|
+
description: "목록과 인스펙터의 2-pane 레이아웃. 넓으면 밀어내고(push) 좁으면 덮으며(overlay), 닫을 때 포커스를 열었던 자리로 되돌립니다.",
|
|
9466
|
+
slug: "inspector-layout",
|
|
9467
|
+
exports: ["InspectorLayout"],
|
|
9468
|
+
props: { InspectorLayout: [
|
|
9469
|
+
{
|
|
9470
|
+
name: "children",
|
|
9471
|
+
type: "ReactNode",
|
|
9472
|
+
required: true,
|
|
9473
|
+
description: "목록. 인스펙터가 열려도 마운트와 스크롤을 유지"
|
|
9474
|
+
},
|
|
9475
|
+
{
|
|
9476
|
+
name: "inspector",
|
|
9477
|
+
type: "ReactNode",
|
|
9478
|
+
description: "인스펙터 내용. 닫혀 있으면 렌더하지 않음"
|
|
9479
|
+
},
|
|
9480
|
+
{
|
|
9481
|
+
name: "open",
|
|
9482
|
+
type: "boolean",
|
|
9483
|
+
required: true,
|
|
9484
|
+
description: "열림"
|
|
9485
|
+
},
|
|
9486
|
+
{
|
|
9487
|
+
name: "onClose",
|
|
9488
|
+
type: "() => void",
|
|
9489
|
+
required: true,
|
|
9490
|
+
description: "닫기"
|
|
9491
|
+
},
|
|
9492
|
+
{
|
|
9493
|
+
name: "title",
|
|
9494
|
+
type: "ReactNode",
|
|
9495
|
+
description: "인스펙터 제목"
|
|
9496
|
+
},
|
|
9497
|
+
{
|
|
9498
|
+
name: "description",
|
|
9499
|
+
type: "ReactNode",
|
|
9500
|
+
description: "제목 아래 한 줄"
|
|
9501
|
+
},
|
|
9502
|
+
{
|
|
9503
|
+
name: "actions",
|
|
9504
|
+
type: "ReactNode",
|
|
9505
|
+
description: "닫기 버튼 옆 컨트롤"
|
|
9506
|
+
},
|
|
9507
|
+
{
|
|
9508
|
+
name: "footer",
|
|
9509
|
+
type: "ReactNode",
|
|
9510
|
+
description: "인스펙터 하단"
|
|
9511
|
+
},
|
|
9512
|
+
{
|
|
9513
|
+
name: "breakpoint",
|
|
9514
|
+
type: "\"lg\" | \"xl\" | \"2xl\"",
|
|
9515
|
+
default: "\"xl\"",
|
|
9516
|
+
description: "이 폭 이상이면 push"
|
|
9517
|
+
},
|
|
9518
|
+
{
|
|
9519
|
+
name: "width",
|
|
9520
|
+
type: "\"sm\" | \"md\" | \"lg\"",
|
|
9521
|
+
default: "\"md\"",
|
|
9522
|
+
description: "push 레이아웃에서의 인스펙터 폭"
|
|
9523
|
+
},
|
|
9524
|
+
{
|
|
9525
|
+
name: "labels",
|
|
9526
|
+
type: "InspectorLayoutLabels",
|
|
9527
|
+
description: "닫기 버튼 등 인스펙터 문구"
|
|
9528
|
+
},
|
|
9529
|
+
{
|
|
9530
|
+
name: "className",
|
|
9531
|
+
type: "string",
|
|
9532
|
+
description: "추가 CSS 클래스"
|
|
9533
|
+
}
|
|
9534
|
+
] },
|
|
9535
|
+
usage: {
|
|
9536
|
+
bestPractices: ["목록 → 상세 → 목록 왕복이 잦은 화면에 씁니다. 다이얼로그는 목록을 가져가 버립니다."],
|
|
9537
|
+
avoid: ["확인이 필요한 파괴적 작업에는 ConfirmDialog를 씁니다.", "포커스 복귀를 직접 다루지 않습니다. Flyout이 소유하며, 부모가 겹쳐 잡으면 패널을 열었던 요소로 오인합니다."]
|
|
9538
|
+
},
|
|
9539
|
+
testDescribe: "InspectorLayout"
|
|
9540
|
+
},
|
|
9541
|
+
{
|
|
9542
|
+
name: "QueryFilterBar",
|
|
9543
|
+
category: "shells",
|
|
9544
|
+
description: "QueryBar와 필터 버튼이 하나의 Query를 공유합니다. 버튼은 상태를 갖지 않고 Query를 읽어 활성 여부를 계산합니다.",
|
|
9545
|
+
slug: "query-filter-bar",
|
|
9546
|
+
exports: ["QueryFilterBar", "hasActiveQuery"],
|
|
9547
|
+
props: { QueryFilterBar: [
|
|
9548
|
+
{
|
|
9549
|
+
name: "value",
|
|
9550
|
+
type: "Query",
|
|
9551
|
+
required: true,
|
|
9552
|
+
description: "필터 상태 전부"
|
|
9553
|
+
},
|
|
9554
|
+
{
|
|
9555
|
+
name: "onChange",
|
|
9556
|
+
type: "(query: Query) => void",
|
|
9557
|
+
required: true,
|
|
9558
|
+
description: "Query 변경"
|
|
9559
|
+
},
|
|
9560
|
+
{
|
|
9561
|
+
name: "filters",
|
|
9562
|
+
type: "QueryFilterDef[]",
|
|
9563
|
+
required: true,
|
|
9564
|
+
description: "필터 컨트롤 정의 (is / field_value_selection / field_value_toggle)"
|
|
9565
|
+
},
|
|
9566
|
+
{
|
|
9567
|
+
name: "fields",
|
|
9568
|
+
type: "QueryField[]",
|
|
9569
|
+
description: "텍스트 입력 자동완성"
|
|
9570
|
+
},
|
|
9571
|
+
{
|
|
9572
|
+
name: "actions",
|
|
9573
|
+
type: "ReactNode",
|
|
9574
|
+
description: "필터 행 끝 슬롯"
|
|
9575
|
+
},
|
|
9576
|
+
{
|
|
9577
|
+
name: "showClauses",
|
|
9578
|
+
type: "boolean",
|
|
9579
|
+
default: "true",
|
|
9580
|
+
description: "절을 제거 가능한 칩으로 표시"
|
|
9581
|
+
},
|
|
9582
|
+
{
|
|
9583
|
+
name: "live",
|
|
9584
|
+
type: "boolean",
|
|
9585
|
+
default: "false",
|
|
9586
|
+
description: "매 입력마다 커밋"
|
|
9587
|
+
},
|
|
9588
|
+
{
|
|
9589
|
+
name: "disabled",
|
|
9590
|
+
type: "boolean",
|
|
9591
|
+
default: "false",
|
|
9592
|
+
description: "전체 비활성"
|
|
9593
|
+
},
|
|
9594
|
+
{
|
|
9595
|
+
name: "queryBarLabels",
|
|
9596
|
+
type: "QueryBarLabels",
|
|
9597
|
+
description: "QueryBar로 통과되는 나머지 문구. placeholder/ariaLabel은 labels가 이깁니다"
|
|
9598
|
+
},
|
|
9599
|
+
{
|
|
9600
|
+
name: "labels",
|
|
9601
|
+
type: "QueryFilterBarLabels",
|
|
9602
|
+
description: "검색·필터·초기화 문구"
|
|
9603
|
+
},
|
|
9604
|
+
{
|
|
9605
|
+
name: "className",
|
|
9606
|
+
type: "string",
|
|
9607
|
+
description: "추가 CSS 클래스"
|
|
9608
|
+
}
|
|
9609
|
+
] },
|
|
9610
|
+
usage: {
|
|
9611
|
+
bestPractices: ["URL에 Query 한 줄만 실어 필터 상태 전체를 공유 가능하게 만듭니다."],
|
|
9612
|
+
avoid: ["필터 버튼이 자체 상태를 갖게 하지 않습니다. 진실 원천이 둘로 갈라집니다."]
|
|
9613
|
+
},
|
|
9614
|
+
testDescribe: "QueryFilterBar"
|
|
9615
|
+
},
|
|
9616
|
+
{
|
|
9617
|
+
name: "CatalogFrame",
|
|
9618
|
+
category: "shells",
|
|
9619
|
+
description: "카탈로그 목록의 공통 뼈대. 헤더·통계·고지·필터·인스펙터·페이지네이션·일괄 작업과 빈/에러 상태를 담고, 필터나 페이지가 바뀌면 선택을 비웁니다.",
|
|
9620
|
+
slug: "catalog-frame",
|
|
9621
|
+
exports: [
|
|
9622
|
+
"CatalogFrame",
|
|
9623
|
+
"CatalogRowActions",
|
|
9624
|
+
"CatalogCellControls"
|
|
9625
|
+
],
|
|
9626
|
+
props: {
|
|
9627
|
+
CatalogFrame: [
|
|
9628
|
+
{
|
|
9629
|
+
name: "children",
|
|
9630
|
+
type: "ReactNode",
|
|
9631
|
+
required: true,
|
|
9632
|
+
description: "테이블. 빈/에러 상태에서는 대체됨"
|
|
9633
|
+
},
|
|
9634
|
+
{
|
|
9635
|
+
name: "isEmpty",
|
|
9636
|
+
type: "boolean",
|
|
9637
|
+
required: true,
|
|
9638
|
+
description: "테이블이 0행인지"
|
|
9639
|
+
},
|
|
9640
|
+
{
|
|
9641
|
+
name: "query",
|
|
9642
|
+
type: "Query",
|
|
9643
|
+
required: true,
|
|
9644
|
+
description: "필터 상태"
|
|
9645
|
+
},
|
|
9646
|
+
{
|
|
9647
|
+
name: "onQueryChange",
|
|
9648
|
+
type: "(query: Query) => void",
|
|
9649
|
+
required: true,
|
|
9650
|
+
description: "Query 변경"
|
|
9651
|
+
},
|
|
9652
|
+
{
|
|
9653
|
+
name: "filters",
|
|
9654
|
+
type: "QueryFilterDef[]",
|
|
9655
|
+
description: "필터 정의"
|
|
9656
|
+
},
|
|
9657
|
+
{
|
|
9658
|
+
name: "stats",
|
|
9659
|
+
type: "StatCardType[]",
|
|
9660
|
+
description: "통계 카드"
|
|
9661
|
+
},
|
|
9662
|
+
{
|
|
9663
|
+
name: "onStatClick",
|
|
9664
|
+
type: "(stat: StatCardType) => void",
|
|
9665
|
+
description: "카드 클릭 = 필터"
|
|
9666
|
+
},
|
|
9667
|
+
{
|
|
9668
|
+
name: "notice",
|
|
9669
|
+
type: "ReactNode",
|
|
9670
|
+
description: "목록 위 고지"
|
|
9671
|
+
},
|
|
9672
|
+
{
|
|
9673
|
+
name: "emptyActions",
|
|
9674
|
+
type: "ReactNode",
|
|
9675
|
+
description: "필터 없는 빈 상태의 다음 행동 (필터된 빈 상태는 필터 지우기 유지)"
|
|
9676
|
+
},
|
|
9677
|
+
{
|
|
9678
|
+
name: "header",
|
|
9679
|
+
type: "ReactNode",
|
|
9680
|
+
description: "헤더 슬롯"
|
|
9681
|
+
},
|
|
9682
|
+
{
|
|
9683
|
+
name: "actions",
|
|
9684
|
+
type: "ReactNode",
|
|
9685
|
+
description: "액션 슬롯"
|
|
9686
|
+
},
|
|
9687
|
+
{
|
|
9688
|
+
name: "toolbar",
|
|
9689
|
+
type: "ReactNode",
|
|
9690
|
+
description: "통계와 필터 사이 컨트롤 (스코프 세그먼트 등)"
|
|
9691
|
+
},
|
|
9692
|
+
{
|
|
9693
|
+
name: "inspector",
|
|
9694
|
+
type: "ReactNode",
|
|
9695
|
+
description: "인스펙터 내용"
|
|
9696
|
+
},
|
|
9697
|
+
{
|
|
9698
|
+
name: "inspectorOpen",
|
|
9699
|
+
type: "boolean",
|
|
9700
|
+
required: true,
|
|
9701
|
+
description: "인스펙터 열림"
|
|
9702
|
+
},
|
|
9703
|
+
{
|
|
9704
|
+
name: "onInspectorClose",
|
|
9705
|
+
type: "() => void",
|
|
9706
|
+
required: true,
|
|
9707
|
+
description: "인스펙터 닫기"
|
|
9708
|
+
},
|
|
9709
|
+
{
|
|
9710
|
+
name: "inspectorTitle",
|
|
9711
|
+
type: "ReactNode",
|
|
9712
|
+
description: "인스펙터 제목"
|
|
9713
|
+
},
|
|
9714
|
+
{
|
|
9715
|
+
name: "inspectorDescription",
|
|
9716
|
+
type: "ReactNode",
|
|
9717
|
+
description: "인스펙터 설명"
|
|
9718
|
+
},
|
|
9719
|
+
{
|
|
9720
|
+
name: "inspectorActions",
|
|
9721
|
+
type: "ReactNode",
|
|
9722
|
+
description: "인스펙터 헤더 컨트롤"
|
|
9723
|
+
},
|
|
9724
|
+
{
|
|
9725
|
+
name: "inspectorFooter",
|
|
9726
|
+
type: "ReactNode",
|
|
9727
|
+
description: "인스펙터 하단"
|
|
9728
|
+
},
|
|
9729
|
+
{
|
|
9730
|
+
name: "inspectorWidth",
|
|
9731
|
+
type: "\"sm\" | \"md\" | \"lg\"",
|
|
9732
|
+
description: "push 레이아웃 폭"
|
|
9733
|
+
},
|
|
9734
|
+
{
|
|
9735
|
+
name: "page",
|
|
9736
|
+
type: "number",
|
|
9737
|
+
default: "1",
|
|
9738
|
+
description: "현재 페이지"
|
|
9739
|
+
},
|
|
9740
|
+
{
|
|
9741
|
+
name: "pageSize",
|
|
9742
|
+
type: "number",
|
|
9743
|
+
default: "50",
|
|
9744
|
+
description: "페이지 크기"
|
|
9745
|
+
},
|
|
9746
|
+
{
|
|
9747
|
+
name: "totalCount",
|
|
9748
|
+
type: "number",
|
|
9749
|
+
description: "필터 반영 총 개수"
|
|
9750
|
+
},
|
|
9751
|
+
{
|
|
9752
|
+
name: "onPageChange",
|
|
9753
|
+
type: "(page: number) => void",
|
|
9754
|
+
description: "페이지 변경"
|
|
9755
|
+
},
|
|
9756
|
+
{
|
|
9757
|
+
name: "selectedKeys",
|
|
9758
|
+
type: "string[]",
|
|
9759
|
+
description: "선택된 행"
|
|
9760
|
+
},
|
|
9761
|
+
{
|
|
9762
|
+
name: "onSelectionChange",
|
|
9763
|
+
type: "(keys: string[]) => void",
|
|
9764
|
+
description: "선택 변경. 필터·페이지가 바뀌면 프레임이 비웁니다"
|
|
9765
|
+
},
|
|
9766
|
+
{
|
|
9767
|
+
name: "bulkActions",
|
|
9768
|
+
type: "FloatingAction[]",
|
|
9769
|
+
description: "일괄 작업"
|
|
9770
|
+
},
|
|
9771
|
+
{
|
|
9772
|
+
name: "onBulkAction",
|
|
9773
|
+
type: "(actionId: string) => void",
|
|
9774
|
+
description: "일괄 작업 실행"
|
|
9775
|
+
},
|
|
9776
|
+
{
|
|
9777
|
+
name: "error",
|
|
9778
|
+
type: "ReactNode",
|
|
9779
|
+
description: "읽기 실패. 빈 목록과 다른 답"
|
|
9780
|
+
},
|
|
9781
|
+
{
|
|
9782
|
+
name: "onRetry",
|
|
9783
|
+
type: "() => void",
|
|
9784
|
+
description: "재시도"
|
|
9785
|
+
},
|
|
9786
|
+
{
|
|
9787
|
+
name: "labels",
|
|
9788
|
+
type: "CatalogFrameLabels",
|
|
9789
|
+
description: "빈/필터된 빈/에러 문구"
|
|
9790
|
+
},
|
|
9791
|
+
{
|
|
9792
|
+
name: "className",
|
|
9793
|
+
type: "string",
|
|
9794
|
+
description: "추가 CSS 클래스"
|
|
9795
|
+
}
|
|
9796
|
+
],
|
|
9797
|
+
CatalogRowActions: [
|
|
9798
|
+
{
|
|
9799
|
+
name: "item",
|
|
9800
|
+
type: "T",
|
|
9801
|
+
required: true,
|
|
9802
|
+
description: "이 행의 항목"
|
|
9803
|
+
},
|
|
9804
|
+
{
|
|
9805
|
+
name: "actions",
|
|
9806
|
+
type: "CatalogRowAction<T>[]",
|
|
9807
|
+
required: true,
|
|
9808
|
+
description: "행 액션"
|
|
9809
|
+
},
|
|
9810
|
+
{
|
|
9811
|
+
name: "visibleCount",
|
|
9812
|
+
type: "number",
|
|
9813
|
+
default: "2",
|
|
9814
|
+
description: "오버플로 전에 노출할 개수. available 필터링 후에 적용됨"
|
|
9815
|
+
},
|
|
9816
|
+
{
|
|
9817
|
+
name: "labels",
|
|
9818
|
+
type: "CatalogRowActionsLabels",
|
|
9819
|
+
description: "그룹·오버플로 라벨"
|
|
9820
|
+
}
|
|
9821
|
+
],
|
|
9822
|
+
CatalogRowAction: [
|
|
9823
|
+
{
|
|
9824
|
+
name: "id",
|
|
9825
|
+
type: "string",
|
|
9826
|
+
required: true,
|
|
9827
|
+
description: "액션 키"
|
|
9828
|
+
},
|
|
9829
|
+
{
|
|
9830
|
+
name: "label",
|
|
9831
|
+
type: "string",
|
|
9832
|
+
required: true,
|
|
9833
|
+
description: "액션 문구"
|
|
9834
|
+
},
|
|
9835
|
+
{
|
|
9836
|
+
name: "icon",
|
|
9837
|
+
type: "ReactNode",
|
|
9838
|
+
description: "선택적 액션 아이콘"
|
|
9839
|
+
},
|
|
9840
|
+
{
|
|
9841
|
+
name: "onSelect",
|
|
9842
|
+
type: "(item: T) => void",
|
|
9843
|
+
required: true,
|
|
9844
|
+
description: "행과 함께 호출되는 액션"
|
|
9845
|
+
},
|
|
9846
|
+
{
|
|
9847
|
+
name: "available",
|
|
9848
|
+
type: "(item: T) => boolean",
|
|
9849
|
+
description: "이 행에 적용되지 않는 액션을 비활성화 대신 제거"
|
|
9850
|
+
}
|
|
9851
|
+
],
|
|
9852
|
+
CatalogCellControls: [{
|
|
9853
|
+
name: "children",
|
|
9854
|
+
type: "ReactNode",
|
|
9855
|
+
required: true,
|
|
9856
|
+
description: "행 클릭으로 새면 안 되는 셀 컨트롤"
|
|
9857
|
+
}]
|
|
9858
|
+
},
|
|
9859
|
+
usage: {
|
|
9860
|
+
bestPractices: ["카탈로그 성격의 목록 화면은 이 프레임 위에 컬럼 정의와 labels만 얹습니다."],
|
|
9861
|
+
avoid: ["선택 초기화를 호출자에게 맡기지 않습니다 — 보이지 않는 행에 일괄 작업이 적용됩니다."]
|
|
9862
|
+
},
|
|
9863
|
+
testDescribe: "CatalogFrame"
|
|
8998
9864
|
}
|
|
8999
9865
|
];
|
|
9000
9866
|
//#endregion
|
|
9001
9867
|
export { coreMetas, shellMetas, visualMetas };
|
|
9002
|
-
|
|
9003
|
-
//# sourceMappingURL=meta.js.map
|