@ncds/ui-admin-mcp 1.0.0-alpha.2 → 1.0.0-alpha.20
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/bin/components.bundle.js +15 -19
- package/bin/definitions/external/editor.d.ts +50 -0
- package/bin/definitions/external/editor.js +53 -0
- package/bin/definitions/external/step-guide.d.ts +61 -0
- package/bin/definitions/external/step-guide.js +52 -0
- package/bin/definitions/instructions.md +194 -10
- package/bin/definitions/js-api.json +352 -0
- package/bin/definitions/rules.json +36 -4
- package/bin/definitions/tool-definitions.json +33 -9
- package/bin/overrides/composition.json +2500 -0
- package/bin/server.d.ts +5 -0
- package/bin/server.js +97 -33
- package/bin/server.mjs +0 -0
- package/bin/tools/external/editor.d.ts +18 -0
- package/bin/tools/external/editor.js +88 -0
- package/bin/tools/external/step-guide.d.ts +19 -0
- package/bin/tools/external/step-guide.js +79 -0
- package/bin/tools/getComponentProps.d.ts +3 -0
- package/bin/tools/getComponentProps.js +12 -3
- package/bin/tools/listCompositionOverrides.d.ts +61 -0
- package/bin/tools/listCompositionOverrides.js +156 -0
- package/bin/tools/ping.d.ts +1 -1
- package/bin/tools/renderToHtml.d.ts +38 -7
- package/bin/tools/renderToHtml.js +785 -110
- package/bin/tools/searchComponent.d.ts +5 -0
- package/bin/tools/searchComponent.js +3 -3
- package/bin/tools/validateHtml.d.ts +8 -6
- package/bin/tools/validateHtml.js +74 -6
- package/bin/types.d.ts +60 -1
- package/bin/utils/bemValidator.d.ts +16 -8
- package/bin/utils/bemValidator.js +16 -4
- package/bin/utils/compliance.d.ts +7 -6
- package/bin/utils/compliance.js +8 -4
- package/bin/utils/dataLoader.d.ts +43 -14
- package/bin/utils/dataLoader.js +125 -22
- package/bin/utils/domEnvironment.js +51 -0
- package/bin/utils/fuzzyMatch.d.ts +4 -0
- package/bin/utils/fuzzyMatch.js +13 -3
- package/bin/utils/logger.d.ts +5 -5
- package/bin/utils/logger.js +5 -5
- package/bin/utils/response.d.ts +4 -2
- package/bin/utils/response.js +15 -4
- package/bin/utils/tokenValidator.d.ts +4 -3
- package/bin/utils/tokenValidator.js +13 -11
- package/bin/version.d.ts +4 -2
- package/bin/version.js +4 -2
- package/data/_icons.json +357 -2
- package/data/_meta.json +4 -5
- package/data/_tokens.json +8 -8
- package/data/badge-group.json +181 -4
- package/data/badge.json +146 -14
- package/data/block-container.json +95 -0
- package/data/block-header.json +208 -0
- package/data/bread-crumb.json +38 -2
- package/data/button-group.json +59 -0
- package/data/button.json +124 -1
- package/data/carousel-arrow.json +6 -11
- package/data/carousel-number-group.json +2 -12
- package/data/checkbox.json +1 -1
- package/data/combo-box.json +32 -8
- package/data/data-grid.json +240 -0
- package/data/date-picker.json +22 -2
- package/data/divider.json +1 -1
- package/data/dot.json +2 -2
- package/data/dropdown.json +187 -20
- package/data/editor.json +85 -0
- package/data/empty-state.json +168 -3
- package/data/featured-icon.json +20 -5
- package/data/file-input.json +176 -10
- package/data/horizontal-tab.json +219 -3
- package/data/image-file-input.json +176 -10
- package/data/input-base.json +165 -4
- package/data/modal.json +266 -5
- package/data/notification.json +56 -40
- package/data/number-input.json +164 -4
- package/data/page-title.json +135 -0
- package/data/pagination.json +8 -4
- package/data/password-input.json +252 -13
- package/data/progress-bar.json +28 -8
- package/data/progress-circle.json +9 -6
- package/data/radio.json +4 -3
- package/data/range-date-picker-with-buttons.json +187 -7
- package/data/range-date-picker.json +186 -6
- package/data/select-box.json +48 -16
- package/data/select.json +35 -25
- package/data/slider.json +1 -1
- package/data/spinner.json +3 -4
- package/data/step-guide.json +130 -0
- package/data/switch.json +66 -6
- package/data/table.json +293 -0
- package/data/tag.json +68 -6
- package/data/textarea.json +1 -1
- package/data/toggle.json +2 -2
- package/data/tooltip.json +16 -3
- package/data/vertical-tab.json +220 -3
- package/package.json +27 -25
- package/bin/instructions.d.ts +0 -1
- package/bin/instructions.js +0 -14
- package/bin/tools/getComponentHtml.d.ts +0 -3
- package/bin/tools/getComponentHtml.js +0 -30
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"exportName": "RangeDatePickerWithButtons",
|
|
4
4
|
"importPath": "@ncds/ui-admin",
|
|
5
5
|
"jsRequired": false,
|
|
6
|
-
"category": "input",
|
|
6
|
+
"category": "forms-and-input",
|
|
7
7
|
"description": "기간 옵션 버튼이 내장된 RangeDatePicker 확장 컴포넌트로 빠른 기간 설정을 지원합니다",
|
|
8
8
|
"aliases": [
|
|
9
9
|
"기간 선택 버튼",
|
|
@@ -33,6 +33,25 @@
|
|
|
33
33
|
"range-date-picker",
|
|
34
34
|
"date-picker"
|
|
35
35
|
],
|
|
36
|
+
"usageExamples": {
|
|
37
|
+
"default": {
|
|
38
|
+
"startDateOptions": {
|
|
39
|
+
"currentDate": "2026-03-17"
|
|
40
|
+
},
|
|
41
|
+
"endDateOptions": {
|
|
42
|
+
"currentDate": "2026-03-24"
|
|
43
|
+
},
|
|
44
|
+
"currentButtonId": "7DAYS",
|
|
45
|
+
"periodKeys": [
|
|
46
|
+
"TODAY",
|
|
47
|
+
"7DAYS",
|
|
48
|
+
"1MONTHS",
|
|
49
|
+
"3MONTHS",
|
|
50
|
+
"1YEAR",
|
|
51
|
+
"ENTIRE"
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
36
55
|
"props": {
|
|
37
56
|
"currentButtonId": {
|
|
38
57
|
"type": "string",
|
|
@@ -40,9 +59,60 @@
|
|
|
40
59
|
"rawType": "keyof T & string"
|
|
41
60
|
},
|
|
42
61
|
"endDateOptions": {
|
|
43
|
-
"type": "
|
|
62
|
+
"type": "object",
|
|
44
63
|
"required": true,
|
|
45
|
-
"rawType": "import(\"/
|
|
64
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/forms-and-input/date-picker/DatePicker\").DatePickerProps",
|
|
65
|
+
"properties": {
|
|
66
|
+
"size": {
|
|
67
|
+
"type": "enum",
|
|
68
|
+
"required": false,
|
|
69
|
+
"values": [
|
|
70
|
+
"sm",
|
|
71
|
+
"xs"
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
"shouldFocus": {
|
|
75
|
+
"type": "boolean",
|
|
76
|
+
"required": false
|
|
77
|
+
},
|
|
78
|
+
"currentDate": {
|
|
79
|
+
"type": "string",
|
|
80
|
+
"required": true
|
|
81
|
+
},
|
|
82
|
+
"datePickerOptions": {
|
|
83
|
+
"type": "object",
|
|
84
|
+
"required": false,
|
|
85
|
+
"rawType": "Partial<import(\"/home/runner/_work/ncds/ncds/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/types/options\").BaseOptions> | undefined"
|
|
86
|
+
},
|
|
87
|
+
"destructive": {
|
|
88
|
+
"type": "string",
|
|
89
|
+
"required": false
|
|
90
|
+
},
|
|
91
|
+
"placeholder": {
|
|
92
|
+
"type": "string",
|
|
93
|
+
"required": false
|
|
94
|
+
},
|
|
95
|
+
"isEndDate": {
|
|
96
|
+
"type": "boolean",
|
|
97
|
+
"required": false
|
|
98
|
+
},
|
|
99
|
+
"className": {
|
|
100
|
+
"type": "string",
|
|
101
|
+
"required": false
|
|
102
|
+
},
|
|
103
|
+
"portal": {
|
|
104
|
+
"type": "boolean",
|
|
105
|
+
"required": false
|
|
106
|
+
},
|
|
107
|
+
"onChangeDate": {
|
|
108
|
+
"type": "function",
|
|
109
|
+
"required": true
|
|
110
|
+
},
|
|
111
|
+
"onValidationError": {
|
|
112
|
+
"type": "function",
|
|
113
|
+
"required": false
|
|
114
|
+
}
|
|
115
|
+
}
|
|
46
116
|
},
|
|
47
117
|
"onDateValidation": {
|
|
48
118
|
"type": "function",
|
|
@@ -54,7 +124,7 @@
|
|
|
54
124
|
"rawType": "T | undefined"
|
|
55
125
|
},
|
|
56
126
|
"periodKeys": {
|
|
57
|
-
"type": "
|
|
127
|
+
"type": "object",
|
|
58
128
|
"required": true,
|
|
59
129
|
"rawType": "(keyof T & string)[]"
|
|
60
130
|
},
|
|
@@ -72,9 +142,60 @@
|
|
|
72
142
|
"default": "xs"
|
|
73
143
|
},
|
|
74
144
|
"startDateOptions": {
|
|
75
|
-
"type": "
|
|
145
|
+
"type": "object",
|
|
76
146
|
"required": true,
|
|
77
|
-
"rawType": "import(\"/
|
|
147
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/forms-and-input/date-picker/DatePicker\").DatePickerProps",
|
|
148
|
+
"properties": {
|
|
149
|
+
"size": {
|
|
150
|
+
"type": "enum",
|
|
151
|
+
"required": false,
|
|
152
|
+
"values": [
|
|
153
|
+
"sm",
|
|
154
|
+
"xs"
|
|
155
|
+
]
|
|
156
|
+
},
|
|
157
|
+
"shouldFocus": {
|
|
158
|
+
"type": "boolean",
|
|
159
|
+
"required": false
|
|
160
|
+
},
|
|
161
|
+
"currentDate": {
|
|
162
|
+
"type": "string",
|
|
163
|
+
"required": true
|
|
164
|
+
},
|
|
165
|
+
"datePickerOptions": {
|
|
166
|
+
"type": "object",
|
|
167
|
+
"required": false,
|
|
168
|
+
"rawType": "Partial<import(\"/home/runner/_work/ncds/ncds/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/types/options\").BaseOptions> | undefined"
|
|
169
|
+
},
|
|
170
|
+
"destructive": {
|
|
171
|
+
"type": "string",
|
|
172
|
+
"required": false
|
|
173
|
+
},
|
|
174
|
+
"placeholder": {
|
|
175
|
+
"type": "string",
|
|
176
|
+
"required": false
|
|
177
|
+
},
|
|
178
|
+
"isEndDate": {
|
|
179
|
+
"type": "boolean",
|
|
180
|
+
"required": false
|
|
181
|
+
},
|
|
182
|
+
"className": {
|
|
183
|
+
"type": "string",
|
|
184
|
+
"required": false
|
|
185
|
+
},
|
|
186
|
+
"portal": {
|
|
187
|
+
"type": "boolean",
|
|
188
|
+
"required": false
|
|
189
|
+
},
|
|
190
|
+
"onChangeDate": {
|
|
191
|
+
"type": "function",
|
|
192
|
+
"required": true
|
|
193
|
+
},
|
|
194
|
+
"onValidationError": {
|
|
195
|
+
"type": "function",
|
|
196
|
+
"required": false
|
|
197
|
+
}
|
|
198
|
+
}
|
|
78
199
|
},
|
|
79
200
|
"useYesterdayAsEndDate": {
|
|
80
201
|
"type": "boolean",
|
|
@@ -83,7 +204,66 @@
|
|
|
83
204
|
},
|
|
84
205
|
"validationOption": {
|
|
85
206
|
"type": "object",
|
|
86
|
-
"required": false
|
|
207
|
+
"required": false,
|
|
208
|
+
"properties": {
|
|
209
|
+
"initDate": {
|
|
210
|
+
"type": "object",
|
|
211
|
+
"required": false,
|
|
212
|
+
"properties": {
|
|
213
|
+
"startDate": {
|
|
214
|
+
"type": "string",
|
|
215
|
+
"required": false
|
|
216
|
+
},
|
|
217
|
+
"endDate": {
|
|
218
|
+
"type": "string",
|
|
219
|
+
"required": false
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
"setting": {
|
|
224
|
+
"type": "object",
|
|
225
|
+
"required": false,
|
|
226
|
+
"properties": {
|
|
227
|
+
"unit": {
|
|
228
|
+
"type": "enum",
|
|
229
|
+
"required": true,
|
|
230
|
+
"values": [
|
|
231
|
+
"M",
|
|
232
|
+
"Q",
|
|
233
|
+
"d",
|
|
234
|
+
"day",
|
|
235
|
+
"days",
|
|
236
|
+
"h",
|
|
237
|
+
"hour",
|
|
238
|
+
"hours",
|
|
239
|
+
"m",
|
|
240
|
+
"millisecond",
|
|
241
|
+
"milliseconds",
|
|
242
|
+
"minute",
|
|
243
|
+
"minutes",
|
|
244
|
+
"month",
|
|
245
|
+
"months",
|
|
246
|
+
"ms",
|
|
247
|
+
"quarter",
|
|
248
|
+
"quarters",
|
|
249
|
+
"s",
|
|
250
|
+
"second",
|
|
251
|
+
"seconds",
|
|
252
|
+
"w",
|
|
253
|
+
"week",
|
|
254
|
+
"weeks",
|
|
255
|
+
"y",
|
|
256
|
+
"year",
|
|
257
|
+
"years"
|
|
258
|
+
]
|
|
259
|
+
},
|
|
260
|
+
"period": {
|
|
261
|
+
"type": "number",
|
|
262
|
+
"required": true
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
}
|
|
87
267
|
}
|
|
88
268
|
},
|
|
89
269
|
"html": {},
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"exportName": "RangeDatePicker",
|
|
4
4
|
"importPath": "@ncds/ui-admin",
|
|
5
5
|
"jsRequired": false,
|
|
6
|
-
"category": "input",
|
|
6
|
+
"category": "forms-and-input",
|
|
7
7
|
"description": "RangeDatePicker는 시작일~종료일 기간 범위를 선택해야 하는 경우 사용하는 복합 선택 위젯입니다. 검색 기간 설정, 노출 기간 설정, 이벤트 기간 설정 등 두 날짜의 쌍(Pair)이 필요한 모든 상황에서 사용합니다.",
|
|
8
8
|
"aliases": [
|
|
9
9
|
"범위날짜선택",
|
|
@@ -43,11 +43,81 @@
|
|
|
43
43
|
"date-picker",
|
|
44
44
|
"button-group"
|
|
45
45
|
],
|
|
46
|
+
"usageExamples": {
|
|
47
|
+
"default": {
|
|
48
|
+
"startDateOptions": {
|
|
49
|
+
"currentDate": "2026-03-01"
|
|
50
|
+
},
|
|
51
|
+
"endDateOptions": {
|
|
52
|
+
"currentDate": "2026-03-24"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
"withSize": {
|
|
56
|
+
"startDateOptions": {
|
|
57
|
+
"currentDate": "2026-03-01"
|
|
58
|
+
},
|
|
59
|
+
"endDateOptions": {
|
|
60
|
+
"currentDate": "2026-03-24"
|
|
61
|
+
},
|
|
62
|
+
"size": "sm"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
46
65
|
"props": {
|
|
47
66
|
"endDateOptions": {
|
|
48
|
-
"type": "
|
|
67
|
+
"type": "object",
|
|
49
68
|
"required": true,
|
|
50
|
-
"rawType": "import(\"/
|
|
69
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/forms-and-input/date-picker/DatePicker\").DatePickerProps",
|
|
70
|
+
"properties": {
|
|
71
|
+
"size": {
|
|
72
|
+
"type": "enum",
|
|
73
|
+
"required": false,
|
|
74
|
+
"values": [
|
|
75
|
+
"sm",
|
|
76
|
+
"xs"
|
|
77
|
+
]
|
|
78
|
+
},
|
|
79
|
+
"shouldFocus": {
|
|
80
|
+
"type": "boolean",
|
|
81
|
+
"required": false
|
|
82
|
+
},
|
|
83
|
+
"currentDate": {
|
|
84
|
+
"type": "string",
|
|
85
|
+
"required": true
|
|
86
|
+
},
|
|
87
|
+
"datePickerOptions": {
|
|
88
|
+
"type": "object",
|
|
89
|
+
"required": false,
|
|
90
|
+
"rawType": "Partial<import(\"/home/runner/_work/ncds/ncds/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/types/options\").BaseOptions> | undefined"
|
|
91
|
+
},
|
|
92
|
+
"destructive": {
|
|
93
|
+
"type": "string",
|
|
94
|
+
"required": false
|
|
95
|
+
},
|
|
96
|
+
"placeholder": {
|
|
97
|
+
"type": "string",
|
|
98
|
+
"required": false
|
|
99
|
+
},
|
|
100
|
+
"isEndDate": {
|
|
101
|
+
"type": "boolean",
|
|
102
|
+
"required": false
|
|
103
|
+
},
|
|
104
|
+
"className": {
|
|
105
|
+
"type": "string",
|
|
106
|
+
"required": false
|
|
107
|
+
},
|
|
108
|
+
"portal": {
|
|
109
|
+
"type": "boolean",
|
|
110
|
+
"required": false
|
|
111
|
+
},
|
|
112
|
+
"onChangeDate": {
|
|
113
|
+
"type": "function",
|
|
114
|
+
"required": true
|
|
115
|
+
},
|
|
116
|
+
"onValidationError": {
|
|
117
|
+
"type": "function",
|
|
118
|
+
"required": false
|
|
119
|
+
}
|
|
120
|
+
}
|
|
51
121
|
},
|
|
52
122
|
"onDateValidation": {
|
|
53
123
|
"type": "function",
|
|
@@ -63,13 +133,123 @@
|
|
|
63
133
|
"default": "xs"
|
|
64
134
|
},
|
|
65
135
|
"startDateOptions": {
|
|
66
|
-
"type": "
|
|
136
|
+
"type": "object",
|
|
67
137
|
"required": true,
|
|
68
|
-
"rawType": "import(\"/
|
|
138
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/forms-and-input/date-picker/DatePicker\").DatePickerProps",
|
|
139
|
+
"properties": {
|
|
140
|
+
"size": {
|
|
141
|
+
"type": "enum",
|
|
142
|
+
"required": false,
|
|
143
|
+
"values": [
|
|
144
|
+
"sm",
|
|
145
|
+
"xs"
|
|
146
|
+
]
|
|
147
|
+
},
|
|
148
|
+
"shouldFocus": {
|
|
149
|
+
"type": "boolean",
|
|
150
|
+
"required": false
|
|
151
|
+
},
|
|
152
|
+
"currentDate": {
|
|
153
|
+
"type": "string",
|
|
154
|
+
"required": true
|
|
155
|
+
},
|
|
156
|
+
"datePickerOptions": {
|
|
157
|
+
"type": "object",
|
|
158
|
+
"required": false,
|
|
159
|
+
"rawType": "Partial<import(\"/home/runner/_work/ncds/ncds/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/types/options\").BaseOptions> | undefined"
|
|
160
|
+
},
|
|
161
|
+
"destructive": {
|
|
162
|
+
"type": "string",
|
|
163
|
+
"required": false
|
|
164
|
+
},
|
|
165
|
+
"placeholder": {
|
|
166
|
+
"type": "string",
|
|
167
|
+
"required": false
|
|
168
|
+
},
|
|
169
|
+
"isEndDate": {
|
|
170
|
+
"type": "boolean",
|
|
171
|
+
"required": false
|
|
172
|
+
},
|
|
173
|
+
"className": {
|
|
174
|
+
"type": "string",
|
|
175
|
+
"required": false
|
|
176
|
+
},
|
|
177
|
+
"portal": {
|
|
178
|
+
"type": "boolean",
|
|
179
|
+
"required": false
|
|
180
|
+
},
|
|
181
|
+
"onChangeDate": {
|
|
182
|
+
"type": "function",
|
|
183
|
+
"required": true
|
|
184
|
+
},
|
|
185
|
+
"onValidationError": {
|
|
186
|
+
"type": "function",
|
|
187
|
+
"required": false
|
|
188
|
+
}
|
|
189
|
+
}
|
|
69
190
|
},
|
|
70
191
|
"validationOption": {
|
|
71
192
|
"type": "object",
|
|
72
|
-
"required": false
|
|
193
|
+
"required": false,
|
|
194
|
+
"properties": {
|
|
195
|
+
"initDate": {
|
|
196
|
+
"type": "object",
|
|
197
|
+
"required": false,
|
|
198
|
+
"properties": {
|
|
199
|
+
"startDate": {
|
|
200
|
+
"type": "string",
|
|
201
|
+
"required": false
|
|
202
|
+
},
|
|
203
|
+
"endDate": {
|
|
204
|
+
"type": "string",
|
|
205
|
+
"required": false
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
"setting": {
|
|
210
|
+
"type": "object",
|
|
211
|
+
"required": false,
|
|
212
|
+
"properties": {
|
|
213
|
+
"unit": {
|
|
214
|
+
"type": "enum",
|
|
215
|
+
"required": true,
|
|
216
|
+
"values": [
|
|
217
|
+
"M",
|
|
218
|
+
"Q",
|
|
219
|
+
"d",
|
|
220
|
+
"day",
|
|
221
|
+
"days",
|
|
222
|
+
"h",
|
|
223
|
+
"hour",
|
|
224
|
+
"hours",
|
|
225
|
+
"m",
|
|
226
|
+
"millisecond",
|
|
227
|
+
"milliseconds",
|
|
228
|
+
"minute",
|
|
229
|
+
"minutes",
|
|
230
|
+
"month",
|
|
231
|
+
"months",
|
|
232
|
+
"ms",
|
|
233
|
+
"quarter",
|
|
234
|
+
"quarters",
|
|
235
|
+
"s",
|
|
236
|
+
"second",
|
|
237
|
+
"seconds",
|
|
238
|
+
"w",
|
|
239
|
+
"week",
|
|
240
|
+
"weeks",
|
|
241
|
+
"y",
|
|
242
|
+
"year",
|
|
243
|
+
"years"
|
|
244
|
+
]
|
|
245
|
+
},
|
|
246
|
+
"period": {
|
|
247
|
+
"type": "number",
|
|
248
|
+
"required": true
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
73
253
|
}
|
|
74
254
|
},
|
|
75
255
|
"html": {},
|
package/data/select-box.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"exportName": "SelectBox",
|
|
4
4
|
"importPath": "@ncds/ui-admin",
|
|
5
5
|
"jsRequired": true,
|
|
6
|
-
"category": "input",
|
|
6
|
+
"category": "forms-and-input",
|
|
7
7
|
"description": "Selectbox는 목록(레이어) 중에서 하나 이상의 항목을 선택하는 입력 컴포넌트로, 선택 가능한 옵션이 3~30개 정도이며 공간 효율이 중요한 경우 사용합니다.",
|
|
8
8
|
"aliases": [
|
|
9
9
|
"셀렉트박스",
|
|
@@ -18,32 +18,38 @@
|
|
|
18
18
|
"placeholder",
|
|
19
19
|
"optionItems",
|
|
20
20
|
"multiple",
|
|
21
|
+
"maxSelection",
|
|
22
|
+
"최대 선택 개수",
|
|
23
|
+
"최대선택",
|
|
24
|
+
"선택 제한",
|
|
21
25
|
"react-hook-form",
|
|
22
26
|
"NCDS"
|
|
23
27
|
],
|
|
24
28
|
"hasChildren": true,
|
|
25
29
|
"whenToUse": [
|
|
26
|
-
"옵션 수 6개 이상 또는 공간 제약 시
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
30
|
+
"Selectbox는 옵션 수 6개 이상 또는 공간 제약 시 사용하며, 옵션 2개(180도 반대)는 Switch, 5개 이하+공간 충분은 Radio/Checkbox를 우선한다",
|
|
31
|
+
"다중 선택 시 '선택 완료' 버튼 필수",
|
|
32
|
+
"선택 가능한 옵션이 3~30개인 경우",
|
|
33
|
+
"화면 공간이 제한되어 Radio/Checkbox를 배치하기 어려운 경우",
|
|
34
|
+
"테이블 내부 등 컴팩트한 영역에서 옵션 선택이 필요한 경우",
|
|
35
|
+
"상태/분류/정렬 등 단일 선택이 필요한 경우",
|
|
36
|
+
"팀 멤버/태그/필터 등 다중 선택이 필요한 경우"
|
|
31
37
|
],
|
|
32
38
|
"forbiddenRules": [
|
|
33
39
|
"옵션 2개(180도 반대 의미)인데 Selectbox 사용 금지",
|
|
34
|
-
"옵션 수 5개
|
|
40
|
+
"옵션 수 5개 이하 & 공간 충분한데 Selectbox 남용 금지",
|
|
35
41
|
"30개 이상 옵션을 일반 Selectbox로만 제공 금지",
|
|
36
|
-
"다중 선택형에서 선택 완료 없이 즉시 확정 UX 혼용 금지",
|
|
37
|
-
"말줄임 Chips에 Tooltip 미제공 금지",
|
|
42
|
+
"다중 선택형에서 '선택 완료' 없이 즉시 확정 UX 혼용 금지",
|
|
43
|
+
"말줄임 처리된 Chips에 Tooltip 미제공 금지",
|
|
38
44
|
"Read only에서 레이어 열림 동작 제공 금지",
|
|
39
|
-
"Read only를 Disabled로 대체하여 값
|
|
45
|
+
"Read only를 Disabled로 대체하여 값 가독성을 떨어뜨리는 구성 지양",
|
|
40
46
|
"Disabled 상태에서 Tooltip/설명 없이 클릭 시도 유도 금지"
|
|
41
47
|
],
|
|
42
48
|
"seeAlso": [
|
|
43
49
|
"radio",
|
|
44
50
|
"checkbox",
|
|
45
51
|
"switch",
|
|
46
|
-
"input",
|
|
52
|
+
"input-base",
|
|
47
53
|
"tooltip"
|
|
48
54
|
],
|
|
49
55
|
"htmlElement": "div",
|
|
@@ -90,6 +96,10 @@
|
|
|
90
96
|
"required": false,
|
|
91
97
|
"default": "DEFAULT_MAX_HEIGHT"
|
|
92
98
|
},
|
|
99
|
+
"maxSelection": {
|
|
100
|
+
"type": "number",
|
|
101
|
+
"required": false
|
|
102
|
+
},
|
|
93
103
|
"multiple": {
|
|
94
104
|
"type": "boolean",
|
|
95
105
|
"required": false,
|
|
@@ -104,9 +114,25 @@
|
|
|
104
114
|
"required": false
|
|
105
115
|
},
|
|
106
116
|
"optionItems": {
|
|
107
|
-
"type": "
|
|
117
|
+
"type": "object",
|
|
108
118
|
"required": false,
|
|
109
|
-
"rawType": "import(\"/
|
|
119
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/types/dropdown/option\").OptionType[] | undefined",
|
|
120
|
+
"properties": {
|
|
121
|
+
"id": {
|
|
122
|
+
"type": "string",
|
|
123
|
+
"required": true,
|
|
124
|
+
"rawType": "string | number"
|
|
125
|
+
},
|
|
126
|
+
"label": {
|
|
127
|
+
"type": "string",
|
|
128
|
+
"required": true
|
|
129
|
+
},
|
|
130
|
+
"icon": {
|
|
131
|
+
"type": "function",
|
|
132
|
+
"required": false,
|
|
133
|
+
"semantic": "icon-component"
|
|
134
|
+
}
|
|
135
|
+
},
|
|
110
136
|
"default": "[]"
|
|
111
137
|
},
|
|
112
138
|
"placeholder": {
|
|
@@ -116,7 +142,8 @@
|
|
|
116
142
|
},
|
|
117
143
|
"register": {
|
|
118
144
|
"type": "object",
|
|
119
|
-
"required": false
|
|
145
|
+
"required": false,
|
|
146
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/node_modules/.pnpm/react-hook-form@7.72.0_react@18.2.0/node_modules/react-hook-form/dist/types/form\").UseFormRegisterReturn | undefined"
|
|
120
147
|
},
|
|
121
148
|
"size": {
|
|
122
149
|
"type": "enum",
|
|
@@ -137,15 +164,20 @@
|
|
|
137
164
|
],
|
|
138
165
|
"default": "default"
|
|
139
166
|
},
|
|
167
|
+
"usePortal": {
|
|
168
|
+
"type": "boolean",
|
|
169
|
+
"required": false
|
|
170
|
+
},
|
|
140
171
|
"value": {
|
|
141
|
-
"type": "
|
|
172
|
+
"type": "object",
|
|
142
173
|
"required": false,
|
|
143
|
-
"rawType": "import(\"/
|
|
174
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/types/dropdown/option\").OptionValue | undefined"
|
|
144
175
|
}
|
|
145
176
|
},
|
|
146
177
|
"html": {},
|
|
147
178
|
"bemClasses": [
|
|
148
179
|
"ncua-hint-text",
|
|
180
|
+
"ncua-select-dropdown--portal",
|
|
149
181
|
"ncua-selectbox",
|
|
150
182
|
"ncua-selectbox--disabled",
|
|
151
183
|
"ncua-selectbox--multiple",
|
package/data/select.json
CHANGED
|
@@ -3,31 +3,19 @@
|
|
|
3
3
|
"exportName": "Select",
|
|
4
4
|
"importPath": "@ncds/ui-admin",
|
|
5
5
|
"jsRequired": false,
|
|
6
|
-
"category": "input",
|
|
7
|
-
"description": "네이티브 HTML select
|
|
6
|
+
"category": "forms-and-input",
|
|
7
|
+
"description": "네이티브 HTML select 래퍼입니다. 대부분의 경우 select-box를 사용하세요. 네이티브 select가 명시적으로 필요한 경우에만 사용합니다.",
|
|
8
8
|
"aliases": [
|
|
9
|
-
"셀렉트",
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"정렬",
|
|
15
|
-
"필터",
|
|
16
|
-
"Select",
|
|
17
|
-
"SelectBox",
|
|
18
|
-
"셀렉트박스",
|
|
19
|
-
"Dropdown",
|
|
20
|
-
"드롭다운",
|
|
21
|
-
"옵션선택",
|
|
22
|
-
"placeholder",
|
|
23
|
-
"react-hook-form",
|
|
24
|
-
"Single Select"
|
|
9
|
+
"네이티브 셀렉트",
|
|
10
|
+
"native select",
|
|
11
|
+
"HTML select",
|
|
12
|
+
"기본 선택",
|
|
13
|
+
"react-hook-form"
|
|
25
14
|
],
|
|
26
15
|
"hasChildren": true,
|
|
27
16
|
"whenToUse": [
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"옵션 수 6개 이상이거나 공간이 제한적인 경우"
|
|
17
|
+
"네이티브 HTML select가 명시적으로 필요한 경우만",
|
|
18
|
+
"react-hook-form 등 폼 라이브러리와 직접 연동이 필요한 경우"
|
|
31
19
|
],
|
|
32
20
|
"forbiddenRules": [
|
|
33
21
|
"옵션 2개(반대 의미)이면 Switch 우선",
|
|
@@ -52,6 +40,11 @@
|
|
|
52
40
|
"required": false,
|
|
53
41
|
"default": false
|
|
54
42
|
},
|
|
43
|
+
"disabled": {
|
|
44
|
+
"type": "boolean",
|
|
45
|
+
"required": false,
|
|
46
|
+
"default": false
|
|
47
|
+
},
|
|
55
48
|
"disabledPlaceholder": {
|
|
56
49
|
"type": "boolean",
|
|
57
50
|
"required": false,
|
|
@@ -62,9 +55,25 @@
|
|
|
62
55
|
"required": false
|
|
63
56
|
},
|
|
64
57
|
"optionItems": {
|
|
65
|
-
"type": "
|
|
58
|
+
"type": "object",
|
|
66
59
|
"required": false,
|
|
67
|
-
"rawType": "import(\"/
|
|
60
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/types/dropdown/option\").OptionType[] | undefined",
|
|
61
|
+
"properties": {
|
|
62
|
+
"id": {
|
|
63
|
+
"type": "string",
|
|
64
|
+
"required": true,
|
|
65
|
+
"rawType": "string | number"
|
|
66
|
+
},
|
|
67
|
+
"label": {
|
|
68
|
+
"type": "string",
|
|
69
|
+
"required": true
|
|
70
|
+
},
|
|
71
|
+
"icon": {
|
|
72
|
+
"type": "function",
|
|
73
|
+
"required": false,
|
|
74
|
+
"semantic": "icon-component"
|
|
75
|
+
}
|
|
76
|
+
}
|
|
68
77
|
},
|
|
69
78
|
"placeholder": {
|
|
70
79
|
"type": "string",
|
|
@@ -72,7 +81,8 @@
|
|
|
72
81
|
},
|
|
73
82
|
"register": {
|
|
74
83
|
"type": "object",
|
|
75
|
-
"required": false
|
|
84
|
+
"required": false,
|
|
85
|
+
"rawType": "import(\"/home/runner/_work/ncds/ncds/node_modules/.pnpm/react-hook-form@7.72.0_react@18.2.0/node_modules/react-hook-form/dist/types/form\").UseFormRegisterReturn | undefined"
|
|
76
86
|
},
|
|
77
87
|
"size": {
|
|
78
88
|
"type": "enum",
|
|
@@ -82,7 +92,7 @@
|
|
|
82
92
|
"sm",
|
|
83
93
|
"xs"
|
|
84
94
|
],
|
|
85
|
-
"default": "
|
|
95
|
+
"default": "xs"
|
|
86
96
|
},
|
|
87
97
|
"type": {
|
|
88
98
|
"type": "enum",
|