@wipco/sdui 0.1.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/meta.js ADDED
@@ -0,0 +1,2039 @@
1
+ // src/meta/builtin.ts
2
+ var ForEachMeta = {
3
+ name: "ForEach",
4
+ label: "\uBC18\uBCF5",
5
+ category: "logic",
6
+ icon: "copy",
7
+ description: '\uBC30\uC5F4\uC744 \uB3CC\uBA70 \uC790\uC2DD\uC744 \uBC18\uBCF5 \uB80C\uB354\uD55C\uB2E4. \uBC18\uBCF5 \uC548\uC5D0\uC11C\uB294 { "$item": "\uD544\uB4DC" }\uB85C \uD604\uC7AC \uD589\uC744, { "$index": true }\uB85C \uC778\uB371\uC2A4\uB97C \uCC38\uC870\uD55C\uB2E4.',
8
+ props: [
9
+ {
10
+ name: "source",
11
+ kind: "binding",
12
+ label: "\uBC18\uBCF5\uD560 \uBC30\uC5F4",
13
+ required: true,
14
+ bindable: true,
15
+ description: '{ "$state": "rows" } \uAC19\uC740 \uBC30\uC5F4 \uCC38\uC870. \uBC30\uC5F4\uC774 \uC544\uB2C8\uBA74 \uC544\uBB34\uAC83\uB3C4 \uADF8\uB9AC\uC9C0 \uC54A\uB294\uB2E4.',
16
+ group: "data"
17
+ }
18
+ ],
19
+ slots: [
20
+ {
21
+ name: "empty",
22
+ label: "\uBE44\uC5C8\uC744 \uB54C",
23
+ description: "\uBC30\uC5F4\uC774 \uBE44\uC5B4 \uC788\uC744 \uB54C \uB300\uC2E0 \uADF8\uB9B0\uB2E4. \uC5C6\uC73C\uBA74 \uC544\uBB34\uAC83\uB3C4 \uADF8\uB9AC\uC9C0 \uC54A\uB294\uB2E4."
24
+ }
25
+ ],
26
+ children: { accepts: true, text: true, label: "\uD589 \uD558\uB098\uC758 \uB0B4\uC6A9" },
27
+ preset: {
28
+ component: "ForEach",
29
+ props: { source: [{ id: "1", name: "\uD56D\uBAA9 A" }] },
30
+ children: [
31
+ {
32
+ component: "Row",
33
+ props: { justify: "between" },
34
+ children: [{ component: "Text", props: { preset: "body", value: { $item: "name" } } }]
35
+ }
36
+ ],
37
+ slots: {
38
+ empty: [{ component: "EmptyState", props: { title: "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4", tight: true } }]
39
+ }
40
+ },
41
+ resize: { kind: "none" }
42
+ };
43
+ var builtinComponentMeta = {
44
+ ForEach: ForEachMeta
45
+ };
46
+
47
+ // src/meta/core.ts
48
+ var styleProp = {
49
+ name: "style",
50
+ kind: "object",
51
+ label: "\uC778\uB77C\uC778 \uC2A4\uD0C0\uC77C",
52
+ description: "CSS \uC18D\uC131 \uAC1D\uCCB4. \uD3ED \uC81C\uD55C \uAC19\uC740 \uBBF8\uC138 \uC870\uC815\uC6A9\uC774\uACE0, \uBC30\uCE58\uB294 Row/Col/Grid\uB85C \uD478\uB294 \uD3B8\uC774 \uB0AB\uB2E4.",
53
+ group: "layout",
54
+ advanced: true
55
+ };
56
+ var classNameProp = {
57
+ name: "className",
58
+ kind: "string",
59
+ label: "\uCD94\uAC00 \uD074\uB798\uC2A4",
60
+ description: "styles.css\uC758 wp-* \uC720\uD2F8 \uD074\uB798\uC2A4\uB97C \uB367\uBD99\uC778\uB2E4.",
61
+ group: "layout",
62
+ advanced: true
63
+ };
64
+ var ActionsMeta = {
65
+ name: "Actions",
66
+ label: "\uC561\uC158 \uBB36\uC74C",
67
+ category: "layout",
68
+ icon: "list",
69
+ description: "\uC2AC\uB86F \uC548\uC5D0\uC11C \uBC84\uD2BC\uB4E4\uC744 \uD55C \uC904\uB85C \uBAA8\uC73C\uACE0 \uC815\uB82C\uD55C\uB2E4(flex:1\uB85C \uC2AC\uB86F \uD3ED\uC744 \uCC28\uC9C0).",
70
+ slotOnly: true,
71
+ props: [
72
+ {
73
+ name: "justify",
74
+ kind: "enum",
75
+ label: "\uAC00\uB85C \uC815\uB82C",
76
+ default: "end",
77
+ options: [
78
+ { value: "start", label: "\uC67C\uCABD" },
79
+ { value: "center", label: "\uAC00\uC6B4\uB370" },
80
+ { value: "end", label: "\uC624\uB978\uCABD" },
81
+ { value: "between", label: "\uC591\uB05D" }
82
+ ],
83
+ group: "layout"
84
+ },
85
+ styleProp,
86
+ classNameProp
87
+ ],
88
+ children: { accepts: true, text: false, label: "\uC815\uB82C\uD560 \uBC84\uD2BC\uB4E4" },
89
+ preset: {
90
+ component: "Actions",
91
+ props: { justify: "end" },
92
+ children: [
93
+ { component: "Button", props: { variant: "secondary" }, children: ["\uCDE8\uC18C"] },
94
+ { component: "Button", props: { variant: "primary" }, children: ["\uC800\uC7A5"] }
95
+ ]
96
+ },
97
+ resize: { kind: "none" }
98
+ };
99
+ var CardMeta = {
100
+ name: "Card",
101
+ label: "\uCE74\uB4DC",
102
+ category: "layout",
103
+ icon: "square-dashed",
104
+ description: "\uC81C\uBAA9\xB7\uBCF8\uBB38\xB7\uD478\uD130\uB97C \uAC00\uC9C4 \uD45C\uC900 \uCEE8\uD14C\uC774\uB108. \uD398\uC774\uC9C0 \uAD6C\uD68D\uC758 \uAE30\uBCF8 \uB2E8\uC704\uB2E4.",
105
+ props: [
106
+ { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
107
+ { name: "subtitle", kind: "node", label: "\uBD80\uC81C", slot: true, group: "content" },
108
+ {
109
+ name: "variant",
110
+ kind: "enum",
111
+ label: "\uD45C\uBA74",
112
+ default: "default",
113
+ options: [
114
+ { value: "default", label: "\uAE30\uBCF8" },
115
+ { value: "raised", label: "\uB5A0 \uC788\uC74C" },
116
+ { value: "flat", label: "\uD3C9\uBA74" },
117
+ { value: "sunken", label: "\uAC00\uB77C\uC549\uC74C" }
118
+ ],
119
+ group: "appearance"
120
+ },
121
+ {
122
+ name: "padding",
123
+ kind: "enum",
124
+ label: "\uC548\uCABD \uC5EC\uBC31",
125
+ default: "default",
126
+ description: "none\uC740 \uBCF8\uBB38 \uB798\uD37C\uB97C \uC5C6\uC564\uB2E4 \u2014 \uD45C\uB098 \uBAA9\uB85D\uC744 \uCE74\uB4DC\uC5D0 \uAF49 \uCC44\uC6B8 \uB54C \uC4F4\uB2E4.",
127
+ options: [
128
+ { value: "default", label: "\uAE30\uBCF8(20px)" },
129
+ { value: "tight", label: "\uC881\uAC8C(14px)" },
130
+ { value: "none", label: "\uC5C6\uC74C" }
131
+ ],
132
+ group: "appearance"
133
+ },
134
+ { name: "interactive", kind: "boolean", label: "\uD074\uB9AD \uAC00\uB2A5 \uD45C\uC2DC", default: false, group: "appearance" },
135
+ { name: "selected", kind: "boolean", label: "\uC120\uD0DD\uB428", default: false, bindable: true, group: "appearance" },
136
+ { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
137
+ styleProp,
138
+ classNameProp
139
+ ],
140
+ slots: [
141
+ { name: "actions", label: "\uD5E4\uB354 \uC6B0\uCE21 \uC561\uC158", description: "\uBC84\uD2BC\xB7Select \uB4F1", allow: ["Actions", "Button", "IconButton", "Select", "Badge", "Tag", "Row", "Show", "Can"] },
142
+ { name: "footer", label: "\uD478\uD130", description: "\uC6B0\uCE21 \uC815\uB82C \uC561\uC158 \uD589" }
143
+ ],
144
+ children: { accepts: true, text: true, label: "\uCE74\uB4DC \uBCF8\uBB38" },
145
+ preset: {
146
+ component: "Card",
147
+ props: { title: "\uCE74\uB4DC \uC81C\uBAA9" },
148
+ children: [{ component: "Text", props: { preset: "body" }, children: ["\uBCF8\uBB38 \uB0B4\uC6A9"] }]
149
+ },
150
+ resize: { kind: "style", axis: "both" }
151
+ };
152
+ var ColMeta = {
153
+ name: "Col",
154
+ label: "\uC138\uB85C \uBC30\uCE58",
155
+ category: "layout",
156
+ icon: "chevrons-up-down",
157
+ description: "\uC790\uC2DD\uC744 \uC138\uB85C\uB85C \uC313\uB294\uB2E4(.wp-col).",
158
+ props: [styleProp, classNameProp],
159
+ children: { accepts: true, text: true },
160
+ preset: {
161
+ component: "Col",
162
+ children: [{ component: "Text", props: { preset: "body" }, children: ["\uCCAB \uC904"] }]
163
+ },
164
+ resize: { kind: "style", axis: "both" }
165
+ };
166
+ var DividerMeta = {
167
+ name: "Divider",
168
+ label: "\uAD6C\uBD84\uC120",
169
+ category: "layout",
170
+ icon: "minus",
171
+ description: "\uAC00\uB85C \uAD6C\uBD84\uC120(hr).",
172
+ props: [styleProp],
173
+ children: { accepts: false },
174
+ preset: { component: "Divider" },
175
+ resize: { kind: "none" }
176
+ };
177
+ var GridMeta = {
178
+ name: "Grid",
179
+ label: "\uADF8\uB9AC\uB4DC",
180
+ category: "layout",
181
+ icon: "layout-dashboard",
182
+ description: "\uC790\uC2DD\uC744 \uC5F4\uB85C \uB098\uB208\uB2E4. template\uC744 \uC8FC\uBA74 columns \uD504\uB9AC\uC14B\uBCF4\uB2E4 \uC6B0\uC120\uD55C\uB2E4.",
183
+ props: [
184
+ {
185
+ name: "columns",
186
+ kind: "enum",
187
+ label: "\uC5F4 \uC218",
188
+ default: 3,
189
+ description: "wp-grid--N \uD504\uB9AC\uC14B. \uC2A4\uD399\uC5D0\uB294 \uBB38\uC790\uC5F4\uC774 \uC544\uB2C8\uB77C \uC22B\uC790\uB85C \uB4E4\uC5B4\uAC04\uB2E4.",
190
+ options: [
191
+ { value: 2, label: "2\uC5F4" },
192
+ { value: 3, label: "3\uC5F4" },
193
+ { value: 4, label: "4\uC5F4" }
194
+ ],
195
+ group: "layout"
196
+ },
197
+ {
198
+ name: "template",
199
+ kind: "string",
200
+ label: "\uCEE4\uC2A4\uD140 \uD2B8\uB799",
201
+ description: 'grid-template-columns \uAC12. \uC608: "minmax(0,1.6fr) minmax(0,1fr)". columns\uB97C \uBB34\uC2DC\uD55C\uB2E4.',
202
+ group: "layout"
203
+ },
204
+ styleProp,
205
+ classNameProp
206
+ ],
207
+ children: { accepts: true, text: false, label: "\uADF8\uB9AC\uB4DC \uCE78" },
208
+ preset: {
209
+ component: "Grid",
210
+ props: { columns: 2 },
211
+ children: [
212
+ { component: "Card", props: { title: "\uC67C\uCABD" }, children: [] },
213
+ { component: "Card", props: { title: "\uC624\uB978\uCABD" }, children: [] }
214
+ ]
215
+ },
216
+ resize: { kind: "enum", prop: "columns", values: ["2", "3", "4"], axis: "x" }
217
+ };
218
+ var PageHeadMeta = {
219
+ name: "PageHead",
220
+ label: "\uD398\uC774\uC9C0 \uD5E4\uB354",
221
+ category: "layout",
222
+ icon: "home",
223
+ description: "\uD398\uC774\uC9C0 \uC0C1\uB2E8\uC758 \uC81C\uBAA9\xB7\uBD80\uC81C\xB7\uC561\uC158 \uC601\uC5ED.",
224
+ props: [
225
+ { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
226
+ { name: "subtitle", kind: "node", label: "\uBD80\uC81C", slot: true, group: "content" }
227
+ ],
228
+ slots: [
229
+ { name: "actions", label: "\uC6B0\uCE21 \uC561\uC158", allow: ["Actions", "Button", "IconButton", "Row", "Show", "Can"] }
230
+ ],
231
+ // PageHeadProps에는 children이 없다 — 넣어도 렌더되지 않는다.
232
+ children: { accepts: false },
233
+ preset: { component: "PageHead", props: { title: "\uD398\uC774\uC9C0 \uC81C\uBAA9" } },
234
+ resize: { kind: "none" }
235
+ };
236
+ var RowMeta = {
237
+ name: "Row",
238
+ label: "\uAC00\uB85C \uBC30\uCE58",
239
+ category: "layout",
240
+ icon: "chevron-right",
241
+ description: "\uC790\uC2DD\uC744 \uAC00\uB85C\uB85C \uB298\uC5B4\uB193\uB294\uB2E4(.wp-row).",
242
+ props: [
243
+ {
244
+ name: "justify",
245
+ kind: "enum",
246
+ label: "\uAC00\uB85C \uC815\uB82C",
247
+ description: "\uC0DD\uB7B5\uD558\uBA74 \uC67C\uCABD \uC815\uB82C.",
248
+ options: [
249
+ { value: "start", label: "\uC67C\uCABD" },
250
+ { value: "center", label: "\uAC00\uC6B4\uB370" },
251
+ { value: "end", label: "\uC624\uB978\uCABD" },
252
+ { value: "between", label: "\uC591\uB05D" }
253
+ ],
254
+ group: "layout"
255
+ },
256
+ styleProp,
257
+ classNameProp
258
+ ],
259
+ children: { accepts: true, text: true },
260
+ preset: {
261
+ component: "Row",
262
+ props: { justify: "between" },
263
+ children: [
264
+ { component: "Text", props: { preset: "label" }, children: ["\uB77C\uBCA8"] },
265
+ { component: "Text", props: { preset: "body" }, children: ["\uAC12"] }
266
+ ]
267
+ },
268
+ resize: { kind: "style", axis: "both" }
269
+ };
270
+ var SectionMeta = {
271
+ name: "Section",
272
+ label: "\uC139\uC158",
273
+ category: "layout",
274
+ icon: "box",
275
+ description: "\uC81C\uBAA9(h4)\uC774 \uBD99\uC740 \uC138\uB85C \uAD6C\uD68D.",
276
+ props: [
277
+ { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
278
+ styleProp,
279
+ classNameProp
280
+ ],
281
+ children: { accepts: true, text: true },
282
+ preset: {
283
+ component: "Section",
284
+ props: { title: "\uC139\uC158 \uC81C\uBAA9" },
285
+ children: [{ component: "Text", props: { preset: "body" }, children: ["\uB0B4\uC6A9"] }]
286
+ },
287
+ resize: { kind: "style", axis: "both" }
288
+ };
289
+ var SpacerMeta = {
290
+ name: "Spacer",
291
+ label: "\uBE48 \uACF5\uAC04",
292
+ category: "layout",
293
+ icon: "minus",
294
+ description: "size\uB97C \uC8FC\uBA74 \uADF8\uB9CC\uD07C\uC758 \uACE0\uC815 \uAC04\uACA9, \uC8FC\uC9C0 \uC54A\uC73C\uBA74 flex:1\uB85C \uB0A8\uB294 \uACF5\uAC04\uC744 \uBC00\uC5B4\uB0B4\uB294 \uC5EC\uBC31(.wp-spacer).",
295
+ props: [
296
+ {
297
+ name: "size",
298
+ kind: "enum",
299
+ label: "\uAC04\uACA9 \uB2E8\uACC4",
300
+ description: '--wp-space-N \uD1A0\uD070 \uB2E8\uACC4. \uC8FC\uB294 \uC21C\uAC04 "\uB0A8\uB294 \uACF5\uAC04 \uBC00\uC5B4\uB0B4\uAE30"\uAC00 \uC544\uB2C8\uB77C \uACE0\uC815 \uAC04\uACA9\uC774 \uB41C\uB2E4. \uC2A4\uD399\uC5D0\uB294 \uBB38\uC790\uC5F4\uC774 \uC544\uB2C8\uB77C \uC22B\uC790\uB85C \uB4E4\uC5B4\uAC04\uB2E4.',
301
+ options: [
302
+ { value: 1, label: "1 \xB7 4px" },
303
+ { value: 2, label: "2 \xB7 8px" },
304
+ { value: 3, label: "3 \xB7 12px" },
305
+ { value: 4, label: "4 \xB7 16px" },
306
+ { value: 5, label: "5 \xB7 20px" },
307
+ { value: 6, label: "6 \xB7 24px" },
308
+ { value: 8, label: "8 \xB7 32px" }
309
+ ],
310
+ group: "layout"
311
+ }
312
+ ],
313
+ children: { accepts: false },
314
+ preset: { component: "Spacer" },
315
+ resize: { kind: "none" }
316
+ };
317
+ var TabsMeta = {
318
+ name: "Tabs",
319
+ label: "\uD0ED",
320
+ category: "layout",
321
+ icon: "file-text",
322
+ description: "\uD0ED \uBAA9\uB85D. \uD0ED \uB0B4\uC6A9\uC740 \uC790\uC2DD\uC774 \uC544\uB2C8\uB77C Show\uB85C \uC0C1\uD0DC\uC5D0 \uB530\uB77C \uAC08\uB77C \uADF8\uB9B0\uB2E4.",
323
+ props: [
324
+ {
325
+ name: "items",
326
+ kind: "array",
327
+ label: "\uD0ED \uBAA9\uB85D",
328
+ required: true,
329
+ group: "data",
330
+ item: [
331
+ { name: "value", kind: "string", label: "\uAC12", required: true },
332
+ { name: "label", kind: "node", label: "\uB77C\uBCA8", required: true },
333
+ { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58" },
334
+ { name: "count", kind: "number", label: "\uAC1C\uC218 \uBC30\uC9C0" }
335
+ ]
336
+ },
337
+ {
338
+ name: "value",
339
+ kind: "string",
340
+ label: "\uC120\uD0DD\uB41C \uAC12",
341
+ required: true,
342
+ bindable: true,
343
+ description: '\uBCF4\uD1B5 { "$state": "tab", "default": "all" }\uC744 \uBC14\uC778\uB529\uD55C\uB2E4.',
344
+ group: "data"
345
+ },
346
+ {
347
+ name: "onChange",
348
+ kind: "action",
349
+ label: "\uD0ED \uBCC0\uACBD",
350
+ eventArg: "\uC120\uD0DD\uB41C \uD0ED\uC758 value",
351
+ description: '{ "action": "setState", "key": "tab", "fromEvent": true }',
352
+ group: "behavior"
353
+ },
354
+ {
355
+ name: "size",
356
+ kind: "enum",
357
+ label: "\uD06C\uAE30",
358
+ default: "md",
359
+ options: [
360
+ { value: "md", label: "\uBCF4\uD1B5" },
361
+ { value: "lg", label: "\uD06C\uAC8C" }
362
+ ],
363
+ group: "appearance"
364
+ },
365
+ styleProp,
366
+ classNameProp
367
+ ],
368
+ // items 프롭으로 탭을 그린다 — 자식을 넣어도 렌더되지 않는다.
369
+ children: { accepts: false },
370
+ preset: {
371
+ component: "Tabs",
372
+ props: {
373
+ items: [
374
+ { value: "all", label: "\uC804\uCCB4" },
375
+ { value: "mine", label: "\uB0B4 \uAC83" }
376
+ ],
377
+ value: { $state: "tab", default: "all" },
378
+ onChange: { action: "setState", key: "tab", fromEvent: true }
379
+ }
380
+ },
381
+ resize: { kind: "enum", prop: "size", values: ["md", "lg"] }
382
+ };
383
+ var ButtonMeta = {
384
+ name: "Button",
385
+ label: "\uBC84\uD2BC",
386
+ category: "input",
387
+ icon: "play",
388
+ description: "\uB77C\uBCA8 \uBC84\uD2BC. \uC2A4\uD399\uC5D0\uC11C \uAC00\uC7A5 \uB9CE\uC774 \uC4F0\uB294 \uCEF4\uD3EC\uB10C\uD2B8\uB2E4(452\uD68C).",
389
+ props: [
390
+ {
391
+ name: "variant",
392
+ kind: "enum",
393
+ label: "\uC885\uB958",
394
+ default: "secondary",
395
+ bindable: true,
396
+ description: "\uC2A4\uD399\uC5D0\uC11C $state/$item \uBC14\uC778\uB529\uC73C\uB85C \uAC15\uC870\uB97C \uBC14\uAFB8\uB294 \uC6A9\uB840\uAC00 \uC788\uB2E4.",
397
+ options: [
398
+ { value: "primary", label: "\uC8FC\uC694(\uD30C\uB791)" },
399
+ { value: "secondary", label: "\uBCF4\uC870(\uC678\uACFD\uC120)" },
400
+ { value: "ghost", label: "\uD22C\uBA85" },
401
+ { value: "danger", label: "\uC704\uD5D8(\uBE68\uAC15)" },
402
+ { value: "link", label: "\uB9C1\uD06C" }
403
+ ],
404
+ group: "appearance"
405
+ },
406
+ {
407
+ name: "size",
408
+ kind: "enum",
409
+ label: "\uD06C\uAE30",
410
+ default: "md",
411
+ options: [
412
+ { value: "xs", label: "xs 24px" },
413
+ { value: "sm", label: "sm 28px" },
414
+ { value: "md", label: "md 32px" },
415
+ { value: "lg", label: "lg 40px" },
416
+ { value: "xl", label: "xl 48px" }
417
+ ],
418
+ group: "appearance"
419
+ },
420
+ { name: "icon", kind: "icon", label: "\uC120\uD589 \uC544\uC774\uCF58", group: "appearance" },
421
+ { name: "iconEnd", kind: "icon", label: "\uD6C4\uD589 \uC544\uC774\uCF58", group: "appearance" },
422
+ {
423
+ name: "loading",
424
+ kind: "boolean",
425
+ label: "\uCC98\uB9AC \uC911",
426
+ default: false,
427
+ bindable: true,
428
+ description: '\uB77C\uBCA8\uC744 \uC2A4\uD53C\uB108\uB85C \uBC14\uAFB8\uACE0 \uC785\uB825\uC744 \uB9C9\uB294\uB2E4. { "$state": "form.$submitting" }\uB97C \uC790\uC8FC \uAC74\uB2E4.',
429
+ group: "behavior"
430
+ },
431
+ { name: "block", kind: "boolean", label: "\uAC00\uB85C \uAF49 \uCC44\uC6C0", default: false, group: "layout" },
432
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
433
+ {
434
+ name: "type",
435
+ kind: "enum",
436
+ label: "HTML \uD0C0\uC785",
437
+ default: "button",
438
+ description: "Form \uC548\uC5D0\uC11C Enter \uC81C\uCD9C\uC744 \uBC1B\uC73C\uB824\uBA74 submit.",
439
+ options: [
440
+ { value: "button", label: "button" },
441
+ { value: "submit", label: "submit" },
442
+ { value: "reset", label: "reset" }
443
+ ],
444
+ group: "behavior",
445
+ advanced: true
446
+ },
447
+ { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
448
+ styleProp,
449
+ classNameProp
450
+ ],
451
+ children: { accepts: true, text: true, label: "\uBC84\uD2BC \uB77C\uBCA8" },
452
+ preset: {
453
+ component: "Button",
454
+ props: { variant: "secondary", size: "sm" },
455
+ children: ["\uBC84\uD2BC"]
456
+ },
457
+ resize: { kind: "enum", prop: "size", values: ["xs", "sm", "md", "lg", "xl"] }
458
+ };
459
+ var CheckboxMeta = {
460
+ name: "Checkbox",
461
+ label: "\uCCB4\uD06C\uBC15\uC2A4",
462
+ category: "input",
463
+ icon: "check",
464
+ description: "\uB2E8\uC77C \uCCB4\uD06C\uBC15\uC2A4. \uB77C\uBCA8\uACFC \uBCF4\uC870 \uC124\uBA85\uC744 \uC548\uC5D0 \uD488\uB294\uB2E4.",
465
+ props: [
466
+ { name: "checked", kind: "boolean", label: "\uCCB4\uD06C\uB428", bindable: true, group: "data" },
467
+ {
468
+ name: "onChange",
469
+ kind: "action",
470
+ label: "\uBCC0\uACBD",
471
+ eventArg: "\uCCB4\uD06C \uC5EC\uBD80(boolean)",
472
+ group: "behavior"
473
+ },
474
+ { name: "label", kind: "node", label: "\uB77C\uBCA8", slot: true, group: "content" },
475
+ { name: "description", kind: "node", label: "\uBCF4\uC870 \uC124\uBA85", slot: true, group: "content" },
476
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
477
+ classNameProp
478
+ ],
479
+ children: { accepts: false },
480
+ preset: {
481
+ component: "Checkbox",
482
+ props: {
483
+ label: "\uB3D9\uC758\uD569\uB2C8\uB2E4",
484
+ checked: { $state: "agree", default: false },
485
+ onChange: { action: "setState", key: "agree", fromEvent: true }
486
+ }
487
+ },
488
+ resize: { kind: "none" }
489
+ };
490
+ var DatePickerMeta = {
491
+ name: "DatePicker",
492
+ label: "\uB0A0\uC9DC \uC120\uD0DD",
493
+ category: "input",
494
+ icon: "calendar",
495
+ description: "\uB2E8\uC77C \uB0A0\uC9DC \uC120\uD0DD(YYYY-MM-DD). \uC678\uBD80 \uC758\uC874\uC131 \uC5C6\uB294 \uC790\uCCB4 \uB2EC\uB825\uC774\uB2E4.",
496
+ props: [
497
+ { name: "value", kind: "string", label: "\uAC12(YYYY-MM-DD)", bindable: true, group: "data" },
498
+ { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "YYYY-MM-DD \uBB38\uC790\uC5F4", group: "behavior" },
499
+ { name: "min", kind: "string", label: "\uCD5C\uC18C \uB0A0\uC9DC", description: "YYYY-MM-DD, \uD3EC\uD568", bindable: true, group: "validation" },
500
+ { name: "max", kind: "string", label: "\uCD5C\uB300 \uB0A0\uC9DC", description: "YYYY-MM-DD, \uD3EC\uD568", bindable: true, group: "validation" },
501
+ { name: "placeholder", kind: "string", label: "\uC548\uB0B4 \uBB38\uAD6C", group: "content" },
502
+ { name: "invalid", kind: "boolean", label: "\uC624\uB958 \uD45C\uC2DC", default: false, bindable: true, group: "validation" },
503
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
504
+ {
505
+ name: "size",
506
+ kind: "enum",
507
+ label: "\uD06C\uAE30",
508
+ default: "md",
509
+ options: [
510
+ { value: "sm", label: "sm 28px" },
511
+ { value: "md", label: "md 32px" },
512
+ { value: "lg", label: "lg 40px" }
513
+ ],
514
+ group: "appearance"
515
+ }
516
+ ],
517
+ children: { accepts: false },
518
+ preset: {
519
+ component: "DatePicker",
520
+ props: {
521
+ placeholder: "\uB0A0\uC9DC \uC120\uD0DD",
522
+ value: { $state: "date", default: "" },
523
+ onChange: { action: "setState", key: "date", fromEvent: true }
524
+ }
525
+ },
526
+ resize: { kind: "enum", prop: "size", values: ["sm", "md", "lg"] }
527
+ };
528
+ var DateRangePickerMeta = {
529
+ name: "DateRangePicker",
530
+ label: "\uAE30\uAC04 \uC120\uD0DD",
531
+ category: "input",
532
+ icon: "calendar",
533
+ description: "\uC2DC\uC791\xB7\uC885\uB8CC \uB0A0\uC9DC\uB97C \uD55C \uBC88\uC5D0 \uACE0\uB978\uB2E4. \uAC12\uC740 { from, to } \uAC1D\uCCB4\uB2E4.",
534
+ props: [
535
+ {
536
+ name: "value",
537
+ kind: "object",
538
+ label: "\uAC12",
539
+ bindable: true,
540
+ group: "data",
541
+ fields: [
542
+ { name: "from", kind: "string", label: "\uC2DC\uC791(YYYY-MM-DD)" },
543
+ { name: "to", kind: "string", label: "\uC885\uB8CC(YYYY-MM-DD)" }
544
+ ]
545
+ },
546
+ { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "{ from, to } \uAC1D\uCCB4", group: "behavior" },
547
+ { name: "min", kind: "string", label: "\uCD5C\uC18C \uB0A0\uC9DC", bindable: true, group: "validation" },
548
+ { name: "max", kind: "string", label: "\uCD5C\uB300 \uB0A0\uC9DC", bindable: true, group: "validation" },
549
+ { name: "invalid", kind: "boolean", label: "\uC624\uB958 \uD45C\uC2DC", default: false, bindable: true, group: "validation" },
550
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" }
551
+ ],
552
+ children: { accepts: false },
553
+ preset: {
554
+ component: "DateRangePicker",
555
+ props: {
556
+ value: { $state: "range", default: {} },
557
+ onChange: { action: "setState", key: "range", fromEvent: true }
558
+ }
559
+ },
560
+ resize: { kind: "none" }
561
+ };
562
+ var FieldMeta = {
563
+ name: "Field",
564
+ label: "\uD3FC \uD544\uB4DC",
565
+ category: "input",
566
+ icon: "file-text",
567
+ description: "\uB77C\uBCA8\xB7\uC548\uB0B4\xB7\uC624\uB958\uB97C \uAC10\uC2F8\uB294 \uD3FC \uD544\uB4DC \uB798\uD37C. \uC548\uC5D0 Input/Select \uB4F1\uC744 \uB123\uB294\uB2E4.",
568
+ props: [
569
+ { name: "label", kind: "node", label: "\uB77C\uBCA8", slot: true, group: "content" },
570
+ { name: "hint", kind: "node", label: "\uC548\uB0B4 \uBB38\uAD6C", description: "\uC624\uB958\uAC00 \uC5C6\uC744 \uB54C\uB9CC \uBCF4\uC778\uB2E4.", slot: true, group: "content" },
571
+ {
572
+ name: "error",
573
+ kind: "node",
574
+ label: "\uC624\uB958 \uBA54\uC2DC\uC9C0",
575
+ slot: true,
576
+ bindable: true,
577
+ description: 'Form \uAC80\uC99D \uACB0\uACFC\uB97C { "$state": "\uD3FCid.$errors.\uD544\uB4DC" }\uB85C \uAC74\uB2E4.',
578
+ group: "validation"
579
+ },
580
+ { name: "required", kind: "boolean", label: "\uD544\uC218 \uD45C\uC2DC(*)", default: false, group: "validation" },
581
+ { name: "htmlFor", kind: "string", label: "label\uC758 for", group: "behavior", advanced: true },
582
+ {
583
+ name: "layout",
584
+ kind: "enum",
585
+ label: "\uBC30\uCE58",
586
+ default: "stacked",
587
+ options: [
588
+ { value: "stacked", label: "\uC704\uC544\uB798" },
589
+ { value: "horizontal", label: "\uAC00\uB85C(132px \uB77C\uBCA8)" }
590
+ ],
591
+ group: "layout"
592
+ },
593
+ styleProp,
594
+ classNameProp
595
+ ],
596
+ children: { accepts: true, text: false, label: "\uC785\uB825 \uCEE8\uD2B8\uB864" },
597
+ preset: {
598
+ component: "Field",
599
+ props: { label: "\uB77C\uBCA8" },
600
+ children: [{ component: "Input", props: { placeholder: "\uC785\uB825" } }]
601
+ },
602
+ resize: { kind: "none" }
603
+ };
604
+ var FormMeta = {
605
+ name: "Form",
606
+ label: "\uD3FC",
607
+ category: "input",
608
+ icon: "save",
609
+ description: "\uD3FC \uCEE8\uD14C\uC774\uB108. \uD544\uB4DC \uAC12\uC740 \uD398\uC774\uC9C0 \uC0C1\uD0DC\uC758 `{id}.{\uD544\uB4DC}` \uD0A4\uC5D0 \uC0B4\uACE0, \uAC80\uC99D\xB7dirty \uCD94\uC801\xB7\uC81C\uCD9C\uC740 \uB80C\uB354\uB7EC\uAC00 \uB9E1\uB294\uB2E4.",
610
+ props: [
611
+ {
612
+ name: "id",
613
+ kind: "string",
614
+ label: "\uD3FC ID",
615
+ required: true,
616
+ description: "\uC0C1\uD0DC \uD0A4 \uC811\uB450\uC0AC\uC774\uC790 submitForm \uC561\uC158\uC758 \uB300\uC0C1. \uD398\uC774\uC9C0 \uC548\uC5D0\uC11C \uACE0\uC720\uD574\uC57C \uD55C\uB2E4.",
617
+ group: "data"
618
+ },
619
+ {
620
+ name: "initial",
621
+ kind: "object",
622
+ label: "\uCD08\uAE30\uAC12",
623
+ description: "{ \uD544\uB4DC\uBA85: \uAC12 } \u2014 \uCD5C\uCD08 \uB9C8\uC6B4\uD2B8\uC5D0\uC11C \uBE44\uC5B4 \uC788\uB294 \uD544\uB4DC\uC5D0\uB9CC \uC2DC\uB4DC\uD55C\uB2E4.",
624
+ group: "data"
625
+ },
626
+ {
627
+ name: "initialFromUrl",
628
+ kind: "object",
629
+ label: "URL \uD504\uB9AC\uD544",
630
+ description: "{ \uD544\uB4DC\uBA85: \uCFFC\uB9AC\uD30C\uB77C\uBBF8\uD130\uBA85 } \u2014 initial\uBCF4\uB2E4 \uC6B0\uC120\uD55C\uB2E4.",
631
+ group: "data",
632
+ advanced: true
633
+ },
634
+ {
635
+ name: "rules",
636
+ kind: "object",
637
+ label: "\uAC80\uC99D \uADDC\uCE59",
638
+ description: "{ \uD544\uB4DC\uBA85: \uADDC\uCE59\uBC30\uC5F4 }. \uADDC\uCE59\uC740 required/min/max/minLength/maxLength/pattern/notBeforeField/custom.",
639
+ group: "validation"
640
+ },
641
+ {
642
+ name: "labels",
643
+ kind: "object",
644
+ label: "\uD544\uB4DC \uB77C\uBCA8",
645
+ description: "{ \uD544\uB4DC\uBA85: \uB77C\uBCA8 } \u2014 \uC624\uB958 \uBA54\uC2DC\uC9C0\uC5D0 \uC4F0\uC778\uB2E4.",
646
+ group: "validation"
647
+ },
648
+ {
649
+ name: "guard",
650
+ kind: "boolean",
651
+ label: "\uC774\uD0C8 \uACBD\uACE0",
652
+ default: false,
653
+ description: "\uC791\uC131 \uC911(dirty)\uC5D0 \uC0C8\uB85C\uACE0\uCE68\xB7\uCC3D \uB2EB\uAE30\uB97C \uD558\uBA74 \uD655\uC778\uC744 \uB744\uC6B4\uB2E4.",
654
+ group: "behavior"
655
+ },
656
+ {
657
+ name: "onSubmit",
658
+ kind: "action",
659
+ label: "\uC81C\uCD9C",
660
+ description: "submitForm \uC561\uC158\uC744 \uAC74\uB2E4. Enter \uC81C\uCD9C\uB3C4 \uC774 \uACBD\uB85C\uB85C \uC628\uB2E4.",
661
+ group: "behavior"
662
+ },
663
+ styleProp,
664
+ classNameProp
665
+ ],
666
+ children: { accepts: true, text: false, label: "\uD3FC \uB0B4\uC6A9" },
667
+ preset: {
668
+ component: "Form",
669
+ props: {
670
+ id: "form1",
671
+ initial: { name: "" },
672
+ labels: { name: "\uC774\uB984" },
673
+ rules: { name: [{ rule: "required" }] },
674
+ onSubmit: { action: "submitForm", form: "form1", endpoint: "/api/example" }
675
+ },
676
+ children: [
677
+ {
678
+ component: "Field",
679
+ props: { label: "\uC774\uB984", required: true, error: { $state: "form1.$errors.name" } },
680
+ children: [
681
+ {
682
+ component: "Input",
683
+ props: {
684
+ value: { $state: "form1.name", default: "" },
685
+ onChange: { action: "setState", key: "form1.name", fromEvent: true }
686
+ }
687
+ }
688
+ ]
689
+ }
690
+ ]
691
+ },
692
+ resize: { kind: "none" }
693
+ };
694
+ var IconButtonMeta = {
695
+ name: "IconButton",
696
+ label: "\uC544\uC774\uCF58 \uBC84\uD2BC",
697
+ category: "input",
698
+ icon: "plus",
699
+ description: "\uC544\uC774\uCF58\uB9CC \uC788\uB294 \uBC84\uD2BC. \uC811\uADFC\uC131\uC744 \uC704\uD574 label\uC744 \uBC18\uB4DC\uC2DC \uC900\uB2E4.",
700
+ props: [
701
+ { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58", required: true, group: "content" },
702
+ {
703
+ name: "label",
704
+ kind: "string",
705
+ label: "\uC811\uADFC\uC131 \uB77C\uBCA8",
706
+ description: "aria-label\uACFC title\uC5D0 \uD568\uAED8 \uB4E4\uC5B4\uAC04\uB2E4. \uC5C6\uC73C\uBA74 \uC2A4\uD06C\uB9B0\uB9AC\uB354\uAC00 \uC77D\uC744 \uAC83\uC774 \uC5C6\uB2E4.",
707
+ group: "content"
708
+ },
709
+ {
710
+ name: "size",
711
+ kind: "enum",
712
+ label: "\uD06C\uAE30",
713
+ default: "md",
714
+ options: [
715
+ { value: "xs", label: "xs" },
716
+ { value: "sm", label: "sm" },
717
+ { value: "md", label: "md" }
718
+ ],
719
+ group: "appearance"
720
+ },
721
+ {
722
+ name: "variant",
723
+ kind: "enum",
724
+ label: "\uC885\uB958",
725
+ default: "ghost",
726
+ description: "\uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \uC5B4\uD718. \uAC19\uC740 \uC790\uB9AC\uC758 \uC61B \uC774\uB984 tone\uBCF4\uB2E4 \uC6B0\uC120\uD55C\uB2E4.",
727
+ options: [
728
+ { value: "ghost", label: "\uD22C\uBA85" },
729
+ { value: "outlined", label: "\uC678\uACFD\uC120" },
730
+ { value: "danger", label: "\uC704\uD5D8" }
731
+ ],
732
+ group: "appearance"
733
+ },
734
+ {
735
+ name: "tone",
736
+ kind: "enum",
737
+ label: "\uD1A4(\uC61B \uC774\uB984)",
738
+ default: "default",
739
+ description: 'variant\uAC00 \uC0DD\uAE30\uAE30 \uC804\uC758 \uC774\uB984. variant\uB97C \uC8FC\uBA74 \uBB34\uC2DC\uB418\uB2C8 \uC0C8\uB85C \uB9CC\uB4DC\uB294 \uB178\uB4DC\uB294 variant\uB97C \uC368\uB77C(tone="danger" = variant="danger").',
740
+ options: [
741
+ { value: "default", label: "\uAE30\uBCF8" },
742
+ { value: "danger", label: "\uC704\uD5D8" }
743
+ ],
744
+ group: "appearance",
745
+ advanced: true
746
+ },
747
+ { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
748
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
749
+ styleProp,
750
+ classNameProp
751
+ ],
752
+ children: { accepts: false },
753
+ preset: { component: "IconButton", props: { icon: "pencil", label: "\uC218\uC815", size: "sm" } },
754
+ resize: { kind: "enum", prop: "size", values: ["xs", "sm", "md"] }
755
+ };
756
+ var InputMeta = {
757
+ name: "Input",
758
+ label: "\uC785\uB825",
759
+ category: "input",
760
+ icon: "pencil",
761
+ description: "\uD55C \uC904 \uC785\uB825. \uB098\uBA38\uC9C0 \uD504\uB86D\uC740 <input>\uC5D0 \uADF8\uB300\uB85C \uC804\uB2EC\uB41C\uB2E4.",
762
+ props: [
763
+ { name: "value", kind: "string", label: "\uAC12", bindable: true, group: "data" },
764
+ {
765
+ name: "onChange",
766
+ kind: "action",
767
+ label: "\uBCC0\uACBD",
768
+ eventArg: "\uC785\uB825 \uAC12(\uBB38\uC790\uC5F4)",
769
+ description: '{ "action": "setState", "key": "\uD3FCid.\uD544\uB4DC", "fromEvent": true }',
770
+ group: "behavior"
771
+ },
772
+ {
773
+ name: "type",
774
+ kind: "enum",
775
+ label: "HTML \uD0C0\uC785",
776
+ default: "text",
777
+ options: [
778
+ { value: "text", label: "\uD14D\uC2A4\uD2B8" },
779
+ { value: "number", label: "\uC22B\uC790" },
780
+ { value: "date", label: "\uB0A0\uC9DC" },
781
+ { value: "datetime-local", label: "\uB0A0\uC9DC+\uC2DC\uAC01" },
782
+ { value: "time", label: "\uC2DC\uAC01" },
783
+ { value: "email", label: "\uC774\uBA54\uC77C" },
784
+ { value: "tel", label: "\uC804\uD654" },
785
+ { value: "password", label: "\uBE44\uBC00\uBC88\uD638" },
786
+ { value: "search", label: "\uAC80\uC0C9" },
787
+ { value: "url", label: "URL" }
788
+ ],
789
+ group: "behavior"
790
+ },
791
+ { name: "placeholder", kind: "string", label: "\uC548\uB0B4 \uBB38\uAD6C", group: "content" },
792
+ {
793
+ name: "size",
794
+ kind: "enum",
795
+ label: "\uD06C\uAE30",
796
+ default: "md",
797
+ options: [
798
+ { value: "sm", label: "sm 28px" },
799
+ { value: "md", label: "md 32px" },
800
+ { value: "lg", label: "lg 40px" }
801
+ ],
802
+ group: "appearance"
803
+ },
804
+ { name: "icon", kind: "icon", label: "\uC120\uD589 \uC544\uC774\uCF58", description: '\uC608: "search"', group: "appearance" },
805
+ { name: "invalid", kind: "boolean", label: "\uC624\uB958 \uD45C\uC2DC", default: false, bindable: true, group: "validation" },
806
+ { name: "mono", kind: "boolean", label: "\uACE0\uC815\uD3ED \uAE00\uAF34", default: false, description: "ID\xB7\uC88C\uD45C\xB7\uD574\uC2DC", group: "appearance" },
807
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
808
+ { name: "readOnly", kind: "boolean", label: "\uC77D\uAE30 \uC804\uC6A9", default: false, bindable: true, group: "behavior", advanced: true },
809
+ { name: "min", kind: "number", label: "\uCD5C\uC18C\uAC12", description: "type=number/date\uC758 \uD558\uD55C", group: "validation" },
810
+ { name: "max", kind: "number", label: "\uCD5C\uB300\uAC12", description: "type=number/date\uC758 \uC0C1\uD55C", group: "validation" },
811
+ { name: "step", kind: "number", label: "\uC99D\uAC10 \uB2E8\uC704", group: "validation", advanced: true },
812
+ { name: "title", kind: "string", label: "\uD234\uD301", group: "content", advanced: true },
813
+ {
814
+ name: "trailing",
815
+ kind: "string",
816
+ label: "\uD6C4\uD589 \uB2E8\uC704",
817
+ description: '\uC785\uB825 \uC624\uB978\uCABD \uB05D\uC5D0 \uACB9\uCCD0 \uADF8\uB9AC\uB294 \uB2E8\uC704 \uD45C\uC2DC. \uC608: "\uC6D0", "\uC704", "mm". \uB2E8\uC704\uB97C \uAC12 \uC548\uC5D0 \uC11E\uC9C0 \uC54A\uAE30 \uC704\uD55C \uC790\uB9AC\uB2E4. \uC544\uC774\uCF58 \uC774\uB984(\uC608: "eye")\uC744 \uC8FC\uBA74 \uAE00\uC790 \uB300\uC2E0 \uADF8 \uC544\uC774\uCF58\uC774 \uB098\uC628\uB2E4.',
818
+ group: "content"
819
+ },
820
+ styleProp,
821
+ classNameProp
822
+ ],
823
+ children: { accepts: false },
824
+ preset: {
825
+ component: "Input",
826
+ props: {
827
+ placeholder: "\uC785\uB825",
828
+ value: { $state: "value1", default: "" },
829
+ onChange: { action: "setState", key: "value1", fromEvent: true }
830
+ }
831
+ },
832
+ resize: { kind: "enum", prop: "size", values: ["sm", "md", "lg"] }
833
+ };
834
+ var SelectMeta = {
835
+ name: "Select",
836
+ label: "\uC120\uD0DD",
837
+ category: "input",
838
+ icon: "chevron-down",
839
+ description: "\uB2E8\uC77C \uC120\uD0DD \uB4DC\uB86D\uB2E4\uC6B4.",
840
+ props: [
841
+ {
842
+ name: "options",
843
+ kind: "array",
844
+ label: "\uC635\uC158",
845
+ required: true,
846
+ group: "data",
847
+ bindable: true,
848
+ item: [
849
+ { name: "value", kind: "string", label: "\uAC12", required: true },
850
+ { name: "label", kind: "string", label: "\uD45C\uC2DC", required: true },
851
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131" }
852
+ ]
853
+ },
854
+ { name: "value", kind: "string", label: "\uC120\uD0DD\uB41C \uAC12", bindable: true, group: "data" },
855
+ { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "\uC120\uD0DD\uB41C value", group: "behavior" },
856
+ { name: "placeholder", kind: "string", label: "\uBE48 \uCCAB \uC635\uC158", group: "content" },
857
+ {
858
+ name: "size",
859
+ kind: "enum",
860
+ label: "\uD06C\uAE30",
861
+ default: "md",
862
+ options: [
863
+ { value: "sm", label: "sm 28px" },
864
+ { value: "md", label: "md 32px" },
865
+ { value: "lg", label: "lg 40px" }
866
+ ],
867
+ group: "appearance"
868
+ },
869
+ { name: "invalid", kind: "boolean", label: "\uC624\uB958 \uD45C\uC2DC", default: false, bindable: true, group: "validation" },
870
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
871
+ { name: "aria-label", kind: "string", label: "\uC811\uADFC\uC131 \uB77C\uBCA8", description: "Field \uB77C\uBCA8\uC774 \uC5C6\uC744 \uB54C \uC4F4\uB2E4.", group: "content", advanced: true },
872
+ styleProp,
873
+ classNameProp
874
+ ],
875
+ children: { accepts: false },
876
+ preset: {
877
+ component: "Select",
878
+ props: {
879
+ options: [
880
+ { value: "a", label: "\uD56D\uBAA9 A" },
881
+ { value: "b", label: "\uD56D\uBAA9 B" }
882
+ ],
883
+ value: { $state: "select1", default: "a" },
884
+ onChange: { action: "setState", key: "select1", fromEvent: true }
885
+ }
886
+ },
887
+ resize: { kind: "enum", prop: "size", values: ["sm", "md", "lg"] }
888
+ };
889
+ var SwitchMeta = {
890
+ name: "Switch",
891
+ label: "\uD1A0\uAE00",
892
+ category: "input",
893
+ icon: "chevrons-up-down",
894
+ description: "\uCF1C\uAE30/\uB044\uAE30 \uD1A0\uAE00.",
895
+ props: [
896
+ { name: "checked", kind: "boolean", label: "\uCF1C\uC9D0", bindable: true, group: "data" },
897
+ { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "\uCF1C\uC9D0 \uC5EC\uBD80(boolean)", group: "behavior" },
898
+ { name: "label", kind: "node", label: "\uB77C\uBCA8", slot: true, group: "content" },
899
+ {
900
+ name: "size",
901
+ kind: "enum",
902
+ label: "\uD06C\uAE30",
903
+ default: "md",
904
+ options: [
905
+ { value: "sm", label: "\uC791\uAC8C" },
906
+ { value: "md", label: "\uBCF4\uD1B5" }
907
+ ],
908
+ group: "appearance"
909
+ },
910
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
911
+ classNameProp
912
+ ],
913
+ children: { accepts: false },
914
+ preset: {
915
+ component: "Switch",
916
+ props: {
917
+ label: "\uC54C\uB9BC \uBC1B\uAE30",
918
+ checked: { $state: "notify", default: false },
919
+ onChange: { action: "setState", key: "notify", fromEvent: true }
920
+ }
921
+ },
922
+ resize: { kind: "enum", prop: "size", values: ["sm", "md"] }
923
+ };
924
+ var TextareaMeta = {
925
+ name: "Textarea",
926
+ label: "\uC5EC\uB7EC \uC904 \uC785\uB825",
927
+ category: "input",
928
+ icon: "file-text",
929
+ description: "\uC5EC\uB7EC \uC904 \uD14D\uC2A4\uD2B8 \uC785\uB825.",
930
+ props: [
931
+ { name: "value", kind: "string", label: "\uAC12", bindable: true, group: "data" },
932
+ { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "\uC785\uB825 \uAC12(\uBB38\uC790\uC5F4)", group: "behavior" },
933
+ { name: "placeholder", kind: "string", label: "\uC548\uB0B4 \uBB38\uAD6C", group: "content" },
934
+ { name: "rows", kind: "number", label: "\uC904 \uC218", default: 3, group: "appearance" },
935
+ { name: "invalid", kind: "boolean", label: "\uC624\uB958 \uD45C\uC2DC", default: false, bindable: true, group: "validation" },
936
+ { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
937
+ styleProp,
938
+ classNameProp
939
+ ],
940
+ children: { accepts: false },
941
+ preset: {
942
+ component: "Textarea",
943
+ props: {
944
+ rows: 3,
945
+ placeholder: "\uB0B4\uC6A9\uC744 \uC785\uB825\uD558\uC138\uC694",
946
+ value: { $state: "memo", default: "" },
947
+ onChange: { action: "setState", key: "memo", fromEvent: true }
948
+ }
949
+ },
950
+ resize: { kind: "numeric", heightProp: "rows", unit: "row", axis: "y" }
951
+ };
952
+ var BadgeMeta = {
953
+ name: "Badge",
954
+ label: "\uBC30\uC9C0",
955
+ category: "display",
956
+ icon: "circle-check",
957
+ description: "\uC0C1\uD0DC\uB97C \uB098\uD0C0\uB0B4\uB294 \uC791\uC740 \uB77C\uBCA8.",
958
+ props: [
959
+ {
960
+ name: "tone",
961
+ kind: "enum",
962
+ label: "\uD1A4",
963
+ default: "neutral",
964
+ bindable: true,
965
+ options: [
966
+ { value: "neutral", label: "\uC911\uB9BD" },
967
+ { value: "info", label: "\uC815\uBCF4" },
968
+ { value: "success", label: "\uC131\uACF5" },
969
+ { value: "warning", label: "\uACBD\uACE0" },
970
+ { value: "danger", label: "\uC704\uD5D8" },
971
+ { value: "brand", label: "\uBE0C\uB79C\uB4DC" }
972
+ ],
973
+ group: "appearance"
974
+ },
975
+ { name: "dot", kind: "boolean", label: "\uC120\uD589 \uC810", default: false, description: "\uB77C\uC774\uBE0C\xB7\uC9C4\uD589 \uC0C1\uD0DC", group: "appearance" },
976
+ {
977
+ name: "size",
978
+ kind: "enum",
979
+ label: "\uD06C\uAE30",
980
+ default: "md",
981
+ options: [
982
+ { value: "md", label: "\uBCF4\uD1B5" },
983
+ { value: "lg", label: "\uD06C\uAC8C" }
984
+ ],
985
+ group: "appearance"
986
+ },
987
+ classNameProp
988
+ ],
989
+ children: { accepts: true, text: true, label: "\uBC30\uC9C0 \uBB38\uAD6C" },
990
+ preset: { component: "Badge", props: { tone: "success" }, children: ["\uC815\uC0C1"] },
991
+ resize: { kind: "enum", prop: "size", values: ["md", "lg"] }
992
+ };
993
+ var IconMeta = {
994
+ name: "Icon",
995
+ label: "\uC544\uC774\uCF58",
996
+ category: "display",
997
+ icon: "info",
998
+ description: "\uC2A4\uD2B8\uB85C\uD06C \uC544\uC774\uCF58. icons.ts\uC758 ICON_PATHS\uC5D0 \uC5C6\uB294 \uC774\uB984\uC740 \uC810\uC73C\uB85C \uB300\uCCB4\uB41C\uB2E4.",
999
+ props: [
1000
+ { name: "name", kind: "icon", label: "\uC544\uC774\uCF58 \uC774\uB984", required: true, group: "content" },
1001
+ { name: "size", kind: "number", label: "\uD06C\uAE30(px)", default: 16, group: "appearance" },
1002
+ { name: "strokeWidth", kind: "number", label: "\uC120 \uAD75\uAE30", default: 1.8, group: "appearance", advanced: true },
1003
+ classNameProp
1004
+ ],
1005
+ children: { accepts: false },
1006
+ preset: { component: "Icon", props: { name: "info", size: 16 } },
1007
+ resize: { kind: "numeric", widthProp: "size", heightProp: "size", unit: "px", axis: "both" }
1008
+ };
1009
+ var KeyValueListMeta = {
1010
+ name: "KeyValueList",
1011
+ label: "\uD0A4-\uAC12 \uBAA9\uB85D",
1012
+ category: "display",
1013
+ icon: "list",
1014
+ description: "\uC0C1\uC138 \uD328\uB110\xB7\uB2E4\uC774\uC5BC\uB85C\uADF8\uC758 \uD45C\uC900 \uC694\uC57D \uD45C\uD604(.wp-kv).",
1015
+ props: [
1016
+ {
1017
+ name: "source",
1018
+ kind: "binding",
1019
+ label: "\uAC12 \uC6D0\uCC9C \uAC1D\uCCB4",
1020
+ bindable: true,
1021
+ description: '\uBCF4\uD1B5 { "$state": "selectedRow" }. \uAC01 \uD56D\uBAA9\uC758 key\uB85C \uC5EC\uAE30\uC11C \uAC12\uC744 \uAEBC\uB0B8\uB2E4.',
1022
+ group: "data"
1023
+ },
1024
+ {
1025
+ name: "items",
1026
+ kind: "array",
1027
+ label: "\uD56D\uBAA9",
1028
+ required: true,
1029
+ group: "data",
1030
+ item: [
1031
+ { name: "label", kind: "node", label: "\uB77C\uBCA8", required: true },
1032
+ { name: "key", kind: "string", label: "source\uC758 \uD544\uB4DC", description: "\uC0DD\uB7B5\uD558\uBA74 value\uB97C \uADF8\uB300\uB85C \uC4F4\uB2E4." },
1033
+ { name: "value", kind: "node", label: "\uAC12", bindable: true },
1034
+ { name: "mono", kind: "boolean", label: "\uACE0\uC815\uD3ED \uAE00\uAF34" }
1035
+ ]
1036
+ },
1037
+ styleProp,
1038
+ classNameProp
1039
+ ],
1040
+ children: { accepts: false },
1041
+ preset: {
1042
+ component: "KeyValueList",
1043
+ props: {
1044
+ items: [
1045
+ { label: "\uC774\uB984", value: "\uD64D\uAE38\uB3D9" },
1046
+ { label: "\uC0C1\uD0DC", value: "\uC815\uC0C1" }
1047
+ ]
1048
+ }
1049
+ },
1050
+ resize: { kind: "style", axis: "x" }
1051
+ };
1052
+ var StatCardMeta = {
1053
+ name: "StatCard",
1054
+ label: "\uC9C0\uD45C \uCE74\uB4DC",
1055
+ category: "display",
1056
+ icon: "chart-column",
1057
+ description: "\uC22B\uC790 \uD558\uB098\uB97C \uAC15\uC870\uD558\uB294 \uCE74\uB4DC. \uB300\uC2DC\uBCF4\uB4DC\uC758 \uAE30\uBCF8 \uD0C0\uC77C\uC774\uB2E4.",
1058
+ props: [
1059
+ { name: "label", kind: "node", label: "\uB77C\uBCA8", required: true, slot: true, group: "content" },
1060
+ { name: "value", kind: "node", label: "\uAC12", required: true, slot: true, bindable: true, group: "data" },
1061
+ { name: "unit", kind: "string", label: "\uB2E8\uC704", description: '"GB", "\uAC74", "%"', group: "content" },
1062
+ { name: "delta", kind: "node", label: "\uBE44\uAD50 \uD14D\uC2A4\uD2B8", description: '"+12.4%"', slot: true, bindable: true, group: "content" },
1063
+ {
1064
+ name: "trend",
1065
+ kind: "enum",
1066
+ label: "\uCD94\uC138",
1067
+ default: "flat",
1068
+ bindable: true,
1069
+ options: [
1070
+ { value: "up", label: "\uC0C1\uC2B9" },
1071
+ { value: "down", label: "\uD558\uB77D" },
1072
+ { value: "flat", label: "\uBCF4\uD569" }
1073
+ ],
1074
+ group: "appearance"
1075
+ },
1076
+ { name: "icon", kind: "icon", label: "\uB77C\uBCA8 \uC55E \uC544\uC774\uCF58", group: "appearance" },
1077
+ { name: "footer", kind: "node", label: "\uD558\uB2E8 \uCEA1\uC158", slot: true, group: "content" },
1078
+ {
1079
+ name: "size",
1080
+ kind: "enum",
1081
+ label: "\uD06C\uAE30",
1082
+ default: "md",
1083
+ options: [
1084
+ { value: "sm", label: "\uC791\uAC8C" },
1085
+ { value: "md", label: "\uBCF4\uD1B5" }
1086
+ ],
1087
+ group: "appearance"
1088
+ },
1089
+ styleProp,
1090
+ classNameProp
1091
+ ],
1092
+ children: { accepts: false },
1093
+ preset: {
1094
+ component: "StatCard",
1095
+ props: { label: "\uCD1D \uC790\uC0B0", value: 128, unit: "\uB300", icon: "box", trend: "up", delta: "+4" }
1096
+ },
1097
+ resize: { kind: "enum", prop: "size", values: ["sm", "md"] }
1098
+ };
1099
+ var TagMeta = {
1100
+ name: "Tag",
1101
+ label: "\uD0DC\uADF8",
1102
+ category: "display",
1103
+ icon: "box",
1104
+ description: "\uBD84\uB958 \uB77C\uBCA8. \uC0C9 \uC810\uACFC \uC81C\uAC70 \uBC84\uD2BC\uC744 \uBD99\uC77C \uC218 \uC788\uB2E4.",
1105
+ props: [
1106
+ { name: "color", kind: "color", label: "\uC810 \uC0C9\uC0C1", description: "\uC120\uD589 \uC810\uC758 CSS \uC0C9\uC0C1", group: "appearance" },
1107
+ { name: "filled", kind: "boolean", label: "\uCC44\uC6C0", default: false, group: "appearance" },
1108
+ { name: "onRemove", kind: "action", label: "\uC81C\uAC70 \uD074\uB9AD", description: "\uC8FC\uBA74 \xD7 \uBC84\uD2BC\uC774 \uC0DD\uAE34\uB2E4.", group: "behavior" },
1109
+ classNameProp
1110
+ ],
1111
+ children: { accepts: true, text: true, label: "\uD0DC\uADF8 \uBB38\uAD6C" },
1112
+ preset: { component: "Tag", children: ["\uD0DC\uADF8"] },
1113
+ resize: { kind: "none" }
1114
+ };
1115
+ var TextMeta = {
1116
+ name: "Text",
1117
+ label: "\uD14D\uC2A4\uD2B8",
1118
+ category: "display",
1119
+ icon: "file-text",
1120
+ description: "styles.css\uC758 \uD0C0\uC785 \uD504\uB9AC\uC14B\uC744 \uC785\uD78C \uD14D\uC2A4\uD2B8.",
1121
+ props: [
1122
+ {
1123
+ name: "preset",
1124
+ kind: "enum",
1125
+ label: "\uD0C0\uC785 \uD504\uB9AC\uC14B",
1126
+ default: "body",
1127
+ options: [
1128
+ { value: "display-1", label: "\uB514\uC2A4\uD50C\uB808\uC774 1" },
1129
+ { value: "display-2", label: "\uB514\uC2A4\uD50C\uB808\uC774 2" },
1130
+ { value: "h1", label: "\uC81C\uBAA9 1" },
1131
+ { value: "h2", label: "\uC81C\uBAA9 2" },
1132
+ { value: "h3", label: "\uC81C\uBAA9 3" },
1133
+ { value: "h4", label: "\uC81C\uBAA9 4" },
1134
+ { value: "h5", label: "\uC81C\uBAA9 5" },
1135
+ { value: "h6", label: "\uC81C\uBAA9 6" },
1136
+ { value: "body-lg", label: "\uBCF8\uBB38 \uD06C\uAC8C" },
1137
+ { value: "body", label: "\uBCF8\uBB38" },
1138
+ { value: "body-sm", label: "\uBCF8\uBB38 \uC791\uAC8C" },
1139
+ { value: "caption", label: "\uCEA1\uC158" },
1140
+ { value: "label", label: "\uB77C\uBCA8" },
1141
+ { value: "overline", label: "\uC624\uBC84\uB77C\uC778" },
1142
+ { value: "micro", label: "\uB9C8\uC774\uD06C\uB85C" },
1143
+ { value: "metric", label: "\uC9C0\uD45C" },
1144
+ { value: "metric-sm", label: "\uC9C0\uD45C \uC791\uAC8C" },
1145
+ { value: "mono", label: "\uACE0\uC815\uD3ED" },
1146
+ { value: "mono-xs", label: "\uACE0\uC815\uD3ED \uC791\uAC8C" }
1147
+ ],
1148
+ group: "appearance"
1149
+ },
1150
+ {
1151
+ name: "as",
1152
+ kind: "enum",
1153
+ label: "HTML \uD0DC\uADF8",
1154
+ default: "p",
1155
+ description: "\uC778\uB77C\uC778\uC73C\uB85C \uC4F0\uB824\uBA74 span. \uC2DC\uB9E8\uD2F1\uACFC \uD504\uB9AC\uC14B\uC740 \uB530\uB85C \uACE0\uB97C \uC218 \uC788\uB2E4.",
1156
+ options: [
1157
+ { value: "p", label: "p" },
1158
+ { value: "span", label: "span" },
1159
+ { value: "div", label: "div" },
1160
+ { value: "h1", label: "h1" },
1161
+ { value: "h2", label: "h2" },
1162
+ { value: "h3", label: "h3" },
1163
+ { value: "h4", label: "h4" },
1164
+ { value: "h5", label: "h5" },
1165
+ { value: "h6", label: "h6" }
1166
+ ],
1167
+ group: "appearance"
1168
+ },
1169
+ {
1170
+ name: "value",
1171
+ kind: "node",
1172
+ label: "\uB0B4\uC6A9(\uAC12 \uBC14\uC778\uB529)",
1173
+ bindable: true,
1174
+ description: "children \uB300\uC2E0 \uC4F4\uB2E4. \uC0C1\uD0DC \uAC12\uC744 \uADF8\uB300\uB85C \uD758\uB824\uBCF4\uB0BC \uB54C \uC720\uC6A9\uD558\uB2E4.",
1175
+ group: "content"
1176
+ },
1177
+ styleProp,
1178
+ classNameProp
1179
+ ],
1180
+ children: { accepts: true, text: true, label: "\uD14D\uC2A4\uD2B8" },
1181
+ preset: { component: "Text", props: { preset: "body" }, children: ["\uD14D\uC2A4\uD2B8"] },
1182
+ resize: { kind: "style", axis: "x" }
1183
+ };
1184
+ var PaginationMeta = {
1185
+ name: "Pagination",
1186
+ label: "\uD398\uC774\uC9C0 \uC774\uB3D9",
1187
+ category: "data",
1188
+ icon: "chevron-right",
1189
+ description: '\uD398\uC774\uC9C0 \uBC88\uD638 \uBC14. total\uACFC pageSize\uB97C \uD568\uAED8 \uC8FC\uBA74 "1\u201310 / 240"\uC774 \uD45C\uC2DC\uB41C\uB2E4.',
1190
+ props: [
1191
+ { name: "page", kind: "number", label: "\uD604\uC7AC \uD398\uC774\uC9C0", required: true, default: 1, bindable: true, group: "data" },
1192
+ { name: "pageCount", kind: "number", label: "\uC804\uCCB4 \uD398\uC774\uC9C0 \uC218", required: true, default: 1, bindable: true, group: "data" },
1193
+ { name: "total", kind: "number", label: "\uC804\uCCB4 \uAC74\uC218", bindable: true, group: "data" },
1194
+ { name: "pageSize", kind: "number", label: "\uD398\uC774\uC9C0\uB2F9 \uAC74\uC218", bindable: true, group: "data" },
1195
+ { name: "onChange", kind: "action", label: "\uD398\uC774\uC9C0 \uBCC0\uACBD", eventArg: "\uC774\uB3D9\uD560 \uD398\uC774\uC9C0 \uBC88\uD638", group: "behavior" },
1196
+ classNameProp
1197
+ ],
1198
+ children: { accepts: false },
1199
+ preset: {
1200
+ component: "Pagination",
1201
+ props: {
1202
+ page: { $state: "page", default: 1 },
1203
+ pageCount: 5,
1204
+ onChange: { action: "setState", key: "page", fromEvent: true }
1205
+ }
1206
+ },
1207
+ resize: { kind: "none" }
1208
+ };
1209
+ var TableMeta = {
1210
+ name: "Table",
1211
+ label: "\uD45C",
1212
+ category: "data",
1213
+ icon: "list",
1214
+ description: "\uB2E8\uC21C \uD45C. \uCEEC\uB7FC\uACFC \uD589\uC744 \uD504\uB86D\uC73C\uB85C \uC8FC\uBA70, \uC790\uC2DD\uC740 \uBC1B\uC9C0 \uC54A\uB294\uB2E4.",
1215
+ props: [
1216
+ {
1217
+ name: "columns",
1218
+ kind: "array",
1219
+ label: "\uCEEC\uB7FC",
1220
+ required: true,
1221
+ group: "data",
1222
+ description: "TableColumn.render\uB294 \uD568\uC218\uB77C JSON \uC2A4\uD399\uC5D0\uC11C\uB294 \uC4F8 \uC218 \uC5C6\uB2E4 \u2014 \uBC30\uC9C0\uB294 badge\uB85C \uC120\uC5B8\uD55C\uB2E4.",
1223
+ item: [
1224
+ { name: "key", kind: "string", label: "\uD589\uC758 \uD544\uB4DC", required: true },
1225
+ { name: "header", kind: "node", label: "\uBA38\uB9AC\uAE00", required: true },
1226
+ { name: "width", kind: "string", label: "\uD3ED", description: '"180px", "22%"' },
1227
+ { name: "align", kind: "enum", label: "\uC815\uB82C", options: [{ value: "left", label: "\uC67C\uCABD" }, { value: "right", label: "\uC624\uB978\uCABD" }] },
1228
+ { name: "mono", kind: "boolean", label: "\uACE0\uC815\uD3ED \uAE00\uAF34" },
1229
+ { name: "strong", kind: "boolean", label: "\uAD75\uAC8C" },
1230
+ {
1231
+ name: "badge",
1232
+ kind: "object",
1233
+ label: "\uBC30\uC9C0\uB85C \uD45C\uC2DC",
1234
+ fields: [
1235
+ { name: "toneMap", kind: "object", label: "\uAC12 \u2192 \uD1A4" },
1236
+ { name: "labelMap", kind: "object", label: "\uAC12 \u2192 \uD45C\uC2DC \uBB38\uAD6C" }
1237
+ ]
1238
+ }
1239
+ ]
1240
+ },
1241
+ {
1242
+ name: "rows",
1243
+ kind: "binding",
1244
+ label: "\uD589 \uB370\uC774\uD130",
1245
+ required: true,
1246
+ bindable: true,
1247
+ description: '\uAC1D\uCCB4 \uBC30\uC5F4. \uBCF4\uD1B5 { "$state": "rows" }\uB97C \uAC74\uB2E4.',
1248
+ group: "data"
1249
+ },
1250
+ { name: "dense", kind: "boolean", label: "\uC870\uBC00\uD558\uAC8C", default: false, description: "\uD589 \uB192\uC774 40px \u2192 32px", group: "appearance" },
1251
+ { name: "hover", kind: "boolean", label: "\uD589 \uD638\uBC84 \uAC15\uC870", default: true, group: "appearance" },
1252
+ { name: "rowKey", kind: "string", label: "\uD589 key \uD544\uB4DC", default: "id", group: "data", advanced: true },
1253
+ { name: "onRowClick", kind: "action", label: "\uD589 \uD074\uB9AD", eventArg: "\uD589 \uAC1D\uCCB4 \uC804\uCCB4", group: "behavior" },
1254
+ { name: "empty", kind: "node", label: "\uBE48 \uBAA9\uB85D \uD45C\uC2DC", slot: true, description: "EmptyState \uAD8C\uC7A5", group: "content" },
1255
+ styleProp,
1256
+ classNameProp
1257
+ ],
1258
+ // 컬럼·행이 전부 프롭이다 — 자식을 넣어도 렌더되지 않는다.
1259
+ children: { accepts: false },
1260
+ preset: {
1261
+ component: "Table",
1262
+ props: {
1263
+ columns: [
1264
+ { key: "name", header: "\uC774\uB984" },
1265
+ { key: "value", header: "\uAC12", align: "right" }
1266
+ ],
1267
+ rows: [
1268
+ { id: "1", name: "\uD56D\uBAA9 A", value: 10 },
1269
+ { id: "2", name: "\uD56D\uBAA9 B", value: 20 }
1270
+ ]
1271
+ }
1272
+ },
1273
+ resize: { kind: "style", axis: "x" }
1274
+ };
1275
+ var searchCommonProps = [
1276
+ { name: "title", kind: "string", label: "\uBAA9\uB85D \uC81C\uBAA9", required: true, group: "content" },
1277
+ {
1278
+ name: "columns",
1279
+ kind: "array",
1280
+ label: "\uCEEC\uB7FC",
1281
+ required: true,
1282
+ group: "data",
1283
+ item: [
1284
+ { name: "key", kind: "string", label: "\uD589\uC758 \uD544\uB4DC", required: true },
1285
+ { name: "title", kind: "string", label: "\uBA38\uB9AC\uAE00", required: true },
1286
+ { name: "sortable", kind: "boolean", label: "\uC815\uB82C \uAC00\uB2A5" },
1287
+ { name: "textAlign", kind: "enum", label: "\uC815\uB82C", options: [{ value: "left", label: "\uC67C\uCABD" }, { value: "right", label: "\uC624\uB978\uCABD" }] },
1288
+ { name: "ratio", kind: "number", label: "\uD3ED \uBE44\uC728" },
1289
+ { name: "mono", kind: "boolean", label: "\uACE0\uC815\uD3ED \uAE00\uAF34" },
1290
+ { name: "strong", kind: "boolean", label: "\uAD75\uAC8C" },
1291
+ {
1292
+ name: "cell",
1293
+ kind: "object",
1294
+ label: "\uC140 \uD45C\uD604",
1295
+ description: 'type\uC744 "badge"\uB85C \uB450\uBA74 \uAC12\uC774 \uBC30\uC9C0\uB85C \uADF8\uB824\uC9C4\uB2E4.',
1296
+ fields: [
1297
+ { name: "type", kind: "enum", label: "\uD45C\uD604", options: [{ value: "badge", label: "\uBC30\uC9C0" }] },
1298
+ { name: "toneMap", kind: "object", label: "\uAC12 \u2192 \uD1A4" }
1299
+ ]
1300
+ }
1301
+ ]
1302
+ },
1303
+ {
1304
+ name: "fields",
1305
+ kind: "array",
1306
+ label: "\uC0C1\uC138 \uAC80\uC0C9 \uD544\uB4DC",
1307
+ group: "data",
1308
+ description: "\uD56D\uBAA9\uC758 \uC720\uD6A8\uD55C \uD544\uB4DC\uB294 type\uC5D0 \uB530\uB77C \uB2E4\uB974\uB2E4(text/select/dateRange/numberRange/cascading).",
1309
+ item: [
1310
+ {
1311
+ name: "type",
1312
+ kind: "enum",
1313
+ label: "\uC885\uB958",
1314
+ default: "text",
1315
+ options: [
1316
+ { value: "text", label: "\uD14D\uC2A4\uD2B8" },
1317
+ { value: "select", label: "\uB2E4\uC911 \uC120\uD0DD" },
1318
+ { value: "dateRange", label: "\uAE30\uAC04" },
1319
+ { value: "numberRange", label: "\uC22B\uC790 \uBC94\uC704" },
1320
+ { value: "cascading", label: "\uACC4\uCE35 \uB2E4\uC911 \uC120\uD0DD" }
1321
+ ]
1322
+ },
1323
+ { name: "key", kind: "string", label: "\uCFFC\uB9AC \uD0A4", required: true },
1324
+ { name: "label", kind: "string", label: "\uB77C\uBCA8", required: true },
1325
+ { name: "placeholder", kind: "string", label: "\uC548\uB0B4 \uBB38\uAD6C", description: "type=text" },
1326
+ { name: "options", kind: "array", label: "\uC635\uC158", description: "type=select/cascading" },
1327
+ { name: "allLabel", kind: "string", label: "\uC804\uCCB4 \uD56D\uBAA9 \uB77C\uBCA8", description: "type=select/cascading" },
1328
+ { name: "fromKey", kind: "string", label: "\uC2DC\uC791 \uCFFC\uB9AC \uD0A4", description: "type=dateRange/numberRange" },
1329
+ { name: "toKey", kind: "string", label: "\uC885\uB8CC \uCFFC\uB9AC \uD0A4", description: "type=dateRange/numberRange" },
1330
+ { name: "minPlaceholder", kind: "string", label: "\uCD5C\uC18C \uC548\uB0B4 \uBB38\uAD6C", description: "type=numberRange" },
1331
+ { name: "maxPlaceholder", kind: "string", label: "\uCD5C\uB300 \uC548\uB0B4 \uBB38\uAD6C", description: "type=numberRange" }
1332
+ ]
1333
+ },
1334
+ {
1335
+ name: "leftFilters",
1336
+ kind: "array",
1337
+ label: "\uC88C\uCE21 \uD544\uD130",
1338
+ group: "data",
1339
+ item: [
1340
+ { name: "key", kind: "string", label: "\uCFFC\uB9AC \uD0A4", required: true },
1341
+ { name: "label", kind: "string", label: "\uB77C\uBCA8", required: true },
1342
+ { name: "options", kind: "array", label: "\uC635\uC158", description: "{ key, label, value }" }
1343
+ ]
1344
+ },
1345
+ {
1346
+ name: "rightFilters",
1347
+ kind: "array",
1348
+ label: "\uC6B0\uCE21 \uD544\uD130",
1349
+ group: "data",
1350
+ item: [
1351
+ { name: "key", kind: "string", label: "\uCFFC\uB9AC \uD0A4", required: true },
1352
+ { name: "label", kind: "string", label: "\uB77C\uBCA8", required: true },
1353
+ { name: "options", kind: "array", label: "\uC635\uC158", description: "{ key, label, value }" }
1354
+ ]
1355
+ },
1356
+ {
1357
+ name: "gridCard",
1358
+ kind: "object",
1359
+ label: "\uADF8\uB9AC\uB4DC \uCE74\uB4DC \uAD6C\uC131",
1360
+ description: "\uC8FC\uBA74 \uACA9\uC790 \uBCF4\uAE30\uAC00 \uCF1C\uC9C4\uB2E4(disableGrid\uC758 \uAE30\uBCF8\uAC12\uC774 \uC774 \uAC12\uC758 \uC720\uBB34\uB2E4).",
1361
+ group: "data",
1362
+ fields: [
1363
+ { name: "titleKey", kind: "string", label: "\uC81C\uBAA9 \uD544\uB4DC", required: true },
1364
+ { name: "subtitleKey", kind: "string", label: "\uBD80\uC81C \uD544\uB4DC" },
1365
+ { name: "badge", kind: "object", label: "\uBC30\uC9C0", description: "{ key, toneMap }" },
1366
+ { name: "rows", kind: "array", label: "\uD589", description: "{ label, valueKey }" }
1367
+ ]
1368
+ },
1369
+ {
1370
+ name: "actions",
1371
+ kind: "array",
1372
+ label: "\uC120\uD0DD \uC561\uC158",
1373
+ group: "behavior",
1374
+ item: [
1375
+ { name: "label", kind: "string", label: "\uB77C\uBCA8", required: true },
1376
+ { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58" },
1377
+ {
1378
+ name: "variant",
1379
+ kind: "enum",
1380
+ label: "\uC885\uB958",
1381
+ options: [
1382
+ { value: "default", label: "\uAE30\uBCF8" },
1383
+ { value: "destructive", label: "\uC704\uD5D8" },
1384
+ { value: "outline", label: "\uC678\uACFD\uC120" }
1385
+ ]
1386
+ },
1387
+ { name: "run", kind: "action", label: "\uC2E4\uD589\uD560 \uC561\uC158", eventArg: "\uC120\uD0DD\uB41C \uD589 id \uBC30\uC5F4", required: true }
1388
+ ]
1389
+ },
1390
+ {
1391
+ name: "initialView",
1392
+ kind: "enum",
1393
+ label: "\uCD08\uAE30 \uBCF4\uAE30",
1394
+ options: [
1395
+ { value: "list", label: "\uBAA9\uB85D" },
1396
+ { value: "grid", label: "\uACA9\uC790" }
1397
+ ],
1398
+ group: "appearance"
1399
+ },
1400
+ { name: "disableGrid", kind: "boolean", label: "\uACA9\uC790 \uBCF4\uAE30 \uB044\uAE30", group: "appearance" },
1401
+ { name: "disableList", kind: "boolean", label: "\uBAA9\uB85D \uBCF4\uAE30 \uB044\uAE30", group: "appearance" },
1402
+ { name: "searchPlaceholder", kind: "string", label: "\uAC80\uC0C9\uCC3D \uC548\uB0B4 \uBB38\uAD6C", group: "content" },
1403
+ { name: "rowClick", kind: "action", label: "\uD589 \uD074\uB9AD", eventArg: "\uD589 \uAC1D\uCCB4 \uC804\uCCB4", group: "behavior" },
1404
+ {
1405
+ name: "virtual",
1406
+ kind: "boolean",
1407
+ label: "\uAC00\uC0C1 \uC2A4\uD06C\uB864",
1408
+ description: "true\uBA74 150\uD589\uBD80\uD130. \uC22B\uC790\uB97C \uC8FC\uBA74 \uADF8 \uAC12\uC774 \uC784\uACC4 \uD589\uC218\uAC00 \uB41C\uB2E4.",
1409
+ group: "behavior",
1410
+ advanced: true
1411
+ }
1412
+ ];
1413
+ var searchSlots = [
1414
+ {
1415
+ name: "headerActions",
1416
+ label: "\uD5E4\uB354 \uC6B0\uCE21 \uC561\uC158",
1417
+ allow: ["Actions", "Button", "IconButton", "Row", "Show", "Can"]
1418
+ }
1419
+ ];
1420
+ var SearchResultsMeta = {
1421
+ name: "SearchResults",
1422
+ label: "\uAC80\uC0C9 \uBAA9\uB85D",
1423
+ category: "data",
1424
+ icon: "search",
1425
+ description: "\uAC80\uC0C9\xB7\uD544\uD130\xB7\uC815\uB82C\xB7\uC120\uD0DD\uC774 \uBD99\uC740 \uBAA9\uB85D. \uB370\uC774\uD130\uB97C \uC2A4\uD399\uC5D0\uC11C \uD1B5\uC9F8\uB85C \uBC1B\uB294 \uB85C\uCEEC \uBAA8\uB4DC\uB2E4.",
1426
+ props: [
1427
+ {
1428
+ name: "data",
1429
+ kind: "binding",
1430
+ label: "\uD589 \uB370\uC774\uD130",
1431
+ required: true,
1432
+ bindable: true,
1433
+ description: "\uAC1D\uCCB4 \uBC30\uC5F4. \uAC01 \uD589\uC5D0 id\uAC00 \uC788\uC5B4\uC57C \uC120\uD0DD \uC561\uC158\uC774 \uB3D9\uC791\uD55C\uB2E4.",
1434
+ group: "data"
1435
+ },
1436
+ ...searchCommonProps
1437
+ ],
1438
+ slots: searchSlots,
1439
+ children: { accepts: false },
1440
+ preset: {
1441
+ component: "SearchResults",
1442
+ props: {
1443
+ title: "\uBAA9\uB85D",
1444
+ initialView: "list",
1445
+ searchPlaceholder: "\uAC80\uC0C9",
1446
+ columns: [
1447
+ { key: "name", title: "\uC774\uB984" },
1448
+ { key: "status", title: "\uC0C1\uD0DC" }
1449
+ ],
1450
+ data: [{ id: "1", name: "\uD56D\uBAA9 A", status: "\uC815\uC0C1" }]
1451
+ }
1452
+ },
1453
+ resize: { kind: "none" }
1454
+ };
1455
+ var RemoteSearchResultsMeta = {
1456
+ name: "RemoteSearchResults",
1457
+ label: "\uAC80\uC0C9 \uBAA9\uB85D(\uC11C\uBC84 \uD398\uC774\uC9D5)",
1458
+ category: "data",
1459
+ icon: "search",
1460
+ description: "SearchResults\uC640 \uAC19\uC740 \uD654\uBA74\uC774\uC9C0\uB9CC \uD398\uC774\uC9C0\uB9C8\uB2E4 endpoint\uB97C \uC870\uD68C\uD55C\uB2E4.",
1461
+ props: [
1462
+ {
1463
+ name: "endpoint",
1464
+ kind: "string",
1465
+ label: "\uC870\uD68C endpoint",
1466
+ required: true,
1467
+ description: "page/limit/search/\uD544\uB4DC\uD0A4 \uCFFC\uB9AC\uAC00 \uBD99\uACE0 { data, total } \uC751\uB2F5\uC744 \uAE30\uB300\uD55C\uB2E4.",
1468
+ group: "data"
1469
+ },
1470
+ { name: "pageSize", kind: "number", label: "\uD398\uC774\uC9C0\uB2F9 \uD589 \uC218", default: 10, group: "data" },
1471
+ ...searchCommonProps
1472
+ ],
1473
+ slots: searchSlots,
1474
+ children: { accepts: false },
1475
+ preset: {
1476
+ component: "RemoteSearchResults",
1477
+ props: {
1478
+ title: "\uBAA9\uB85D",
1479
+ endpoint: "/api/items",
1480
+ pageSize: 10,
1481
+ initialView: "list",
1482
+ searchPlaceholder: "\uAC80\uC0C9",
1483
+ columns: [
1484
+ { key: "name", title: "\uC774\uB984" },
1485
+ { key: "status", title: "\uC0C1\uD0DC" }
1486
+ ]
1487
+ }
1488
+ },
1489
+ resize: { kind: "none" }
1490
+ };
1491
+ var AlertMeta = {
1492
+ name: "Alert",
1493
+ label: "\uC54C\uB9BC \uBC15\uC2A4",
1494
+ category: "feedback",
1495
+ icon: "triangle-alert",
1496
+ description: "\uD398\uC774\uC9C0\uC5D0 \uC778\uB77C\uC778\uC73C\uB85C \uB193\uB294 \uC548\uB0B4\xB7\uACBD\uACE0 \uBC15\uC2A4.",
1497
+ props: [
1498
+ {
1499
+ name: "tone",
1500
+ kind: "enum",
1501
+ label: "\uD1A4",
1502
+ default: "info",
1503
+ bindable: true,
1504
+ options: [
1505
+ { value: "info", label: "\uC815\uBCF4" },
1506
+ { value: "success", label: "\uC131\uACF5" },
1507
+ { value: "warning", label: "\uACBD\uACE0" },
1508
+ { value: "danger", label: "\uC704\uD5D8" },
1509
+ { value: "neutral", label: "\uC911\uB9BD" }
1510
+ ],
1511
+ group: "appearance"
1512
+ },
1513
+ { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
1514
+ { name: "onClose", kind: "action", label: "\uB2EB\uAE30", description: "\uC8FC\uBA74 \xD7 \uBC84\uD2BC\uC774 \uC0DD\uAE34\uB2E4.", group: "behavior" },
1515
+ {
1516
+ name: "bar",
1517
+ kind: "boolean",
1518
+ label: "\uC88C\uCE21 \uC0C9 \uBC14",
1519
+ default: false,
1520
+ description: "\uD14C\uB450\uB9AC\uB97C \uC67C\uCABD \uC0C9 \uB9C9\uB300 \uD558\uB098\uB85C \uBC14\uAFB8\uACE0 \uBAA8\uC11C\uB9AC\uB97C \uAC01\uC9C0\uAC8C \uD3B8\uB2E4. \uD654\uBA74 \uD3ED\uC744 \uAC00\uB974\uB294 \uBC30\uB108\uB85C \uBCF4\uC5EC\uC57C \uD558\uB294 \uACF5\uC9C0\uC5D0 \uC4F4\uB2E4.",
1521
+ group: "appearance"
1522
+ },
1523
+ styleProp,
1524
+ classNameProp
1525
+ ],
1526
+ slots: [
1527
+ { name: "actions", label: "\uD558\uB2E8 \uC561\uC158", allow: ["Actions", "Button", "Row", "Show", "Can"] }
1528
+ ],
1529
+ children: { accepts: true, text: true, label: "\uBCF8\uBB38" },
1530
+ preset: {
1531
+ component: "Alert",
1532
+ props: { tone: "info", title: "\uC548\uB0B4" },
1533
+ children: ["\uC548\uB0B4 \uBB38\uAD6C\uC785\uB2C8\uB2E4."]
1534
+ },
1535
+ resize: { kind: "none" }
1536
+ };
1537
+ var DialogMeta = {
1538
+ name: "Dialog",
1539
+ label: "\uB2E4\uC774\uC5BC\uB85C\uADF8",
1540
+ category: "feedback",
1541
+ icon: "external-link",
1542
+ description: "\uBAA8\uB2EC. \uBCF4\uD1B5 Show(when: \uC0C1\uD0DC)\uB85C \uAC10\uC2F8 \uC5F4\uACE0 \uB2EB\uC73C\uBA70, onClose\uC5D0 close \uC561\uC158\uC744 \uAC74\uB2E4(Escape\xB7\uBC30\uACBD \uD074\uB9AD\uB3C4 \uC774 \uC561\uC158\uC744 \uBD80\uB978\uB2E4).",
1543
+ props: [
1544
+ { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
1545
+ { name: "subtitle", kind: "node", label: "\uBD80\uC81C", slot: true, group: "content" },
1546
+ { name: "icon", kind: "icon", label: "\uC81C\uBAA9 \uC55E \uC544\uC774\uCF58", group: "appearance" },
1547
+ {
1548
+ name: "tone",
1549
+ kind: "enum",
1550
+ label: "\uD1A4",
1551
+ default: "brand",
1552
+ options: [
1553
+ { value: "brand", label: "\uBE0C\uB79C\uB4DC" },
1554
+ { value: "danger", label: "\uC704\uD5D8" }
1555
+ ],
1556
+ group: "appearance"
1557
+ },
1558
+ {
1559
+ name: "size",
1560
+ kind: "enum",
1561
+ label: "\uD06C\uAE30",
1562
+ default: "md",
1563
+ options: [
1564
+ { value: "sm", label: "sm 380px" },
1565
+ { value: "md", label: "md 480px" },
1566
+ { value: "lg", label: "lg 680px" },
1567
+ { value: "xl", label: "xl 880px" }
1568
+ ],
1569
+ group: "appearance"
1570
+ },
1571
+ { name: "onClose", kind: "action", label: "\uB2EB\uAE30", group: "behavior" },
1572
+ styleProp,
1573
+ classNameProp
1574
+ ],
1575
+ slots: [
1576
+ { name: "footer", label: "\uD478\uD130 \uC561\uC158", description: "\uBCF4\uC870 \uBC84\uD2BC \uB2E4\uC74C \uC8FC \uBC84\uD2BC", allow: ["Actions", "Button", "Row", "Show", "Can"] }
1577
+ ],
1578
+ children: { accepts: true, text: true, label: "\uB2E4\uC774\uC5BC\uB85C\uADF8 \uBCF8\uBB38" },
1579
+ preset: {
1580
+ component: "Dialog",
1581
+ props: { title: "\uC81C\uBAA9", size: "md", onClose: { action: "close", key: "dialog1" } },
1582
+ children: [{ component: "Text", props: { preset: "body" }, children: ["\uB0B4\uC6A9"] }],
1583
+ slots: {
1584
+ footer: [
1585
+ {
1586
+ component: "Button",
1587
+ props: { variant: "secondary", onClick: { action: "close", key: "dialog1" } },
1588
+ children: ["\uB2EB\uAE30"]
1589
+ }
1590
+ ]
1591
+ }
1592
+ },
1593
+ resize: { kind: "enum", prop: "size", values: ["sm", "md", "lg", "xl"] }
1594
+ };
1595
+ var EmptyStateMeta = {
1596
+ name: "EmptyState",
1597
+ label: "\uBE48 \uC0C1\uD0DC",
1598
+ category: "feedback",
1599
+ icon: "square-dashed",
1600
+ description: "\uACB0\uACFC\uAC00 \uC5C6\uC744 \uB54C\uC758 \uC548\uB0B4. Table.empty\uB098 ForEach.empty \uC2AC\uB86F\uC5D0 \uC790\uC8FC \uB4E4\uC5B4\uAC04\uB2E4.",
1601
+ props: [
1602
+ { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58", default: "square-dashed", group: "appearance" },
1603
+ { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
1604
+ { name: "tight", kind: "boolean", label: "\uC881\uAC8C", default: false, group: "appearance" },
1605
+ styleProp,
1606
+ classNameProp
1607
+ ],
1608
+ slots: [{ name: "actions", label: "\uC561\uC158", allow: ["Actions", "Button", "Row", "Show", "Can"] }],
1609
+ children: { accepts: true, text: true, label: "\uC124\uBA85 \uBB38\uAD6C" },
1610
+ preset: {
1611
+ component: "EmptyState",
1612
+ props: { icon: "square-dashed", title: "\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", tight: true },
1613
+ children: ["\uC870\uAC74\uC744 \uBC14\uAFD4 \uB2E4\uC2DC \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694."]
1614
+ },
1615
+ resize: { kind: "none" }
1616
+ };
1617
+ var ProgressBarMeta = {
1618
+ name: "ProgressBar",
1619
+ label: "\uC9C4\uD589 \uB9C9\uB300",
1620
+ category: "feedback",
1621
+ icon: "minus",
1622
+ description: "0~100 \uC9C4\uD589\uB960. \uBC94\uC704\uB97C \uBC97\uC5B4\uB09C \uAC12\uC740 \uAD6C\uD604\uC5D0\uC11C \uC798\uB77C \uB0B8\uB2E4.",
1623
+ props: [
1624
+ { name: "value", kind: "number", label: "\uAC12(0~100)", required: true, bindable: true, group: "data" },
1625
+ {
1626
+ name: "tone",
1627
+ kind: "enum",
1628
+ label: "\uD1A4",
1629
+ default: "brand",
1630
+ bindable: true,
1631
+ options: [
1632
+ { value: "brand", label: "\uBE0C\uB79C\uB4DC" },
1633
+ { value: "success", label: "\uC131\uACF5" },
1634
+ { value: "warning", label: "\uACBD\uACE0" },
1635
+ { value: "danger", label: "\uC704\uD5D8" },
1636
+ { value: "info", label: "\uC815\uBCF4", description: "\uC2DC\uADF8\uB110 \uBE14\uB8E8 \u2014 \uBE0C\uB79C\uB4DC \uB124\uC774\uBE44(brand)\uC640 \uAD6C\uBD84\uB418\uB294 \uC911\uB9BD \uC9C4\uD589\uC0C9." }
1637
+ ],
1638
+ group: "appearance"
1639
+ },
1640
+ { name: "label", kind: "node", label: "\uB77C\uBCA8", slot: true, group: "content" },
1641
+ {
1642
+ name: "showValue",
1643
+ kind: "boolean",
1644
+ label: "\uAC12 \uD45C\uC2DC",
1645
+ default: false,
1646
+ description: "\uB77C\uBCA8 \uC904 \uC624\uB978\uCABD \uB05D\uC5D0 \uD604\uC7AC \uAC12\uC744 \uD37C\uC13C\uD2B8\uB85C \uC801\uB294\uB2E4. \uC5EC\uB7EC \uB9C9\uB300\uB97C \uC313\uC544 \uBE44\uAD50\uD560 \uB54C \uD544\uC694\uD558\uB2E4.",
1647
+ group: "appearance"
1648
+ },
1649
+ styleProp,
1650
+ classNameProp
1651
+ ],
1652
+ children: { accepts: false },
1653
+ preset: { component: "ProgressBar", props: { value: 60, tone: "brand", label: "\uC9C4\uD589\uB960" } },
1654
+ resize: { kind: "style", axis: "x" }
1655
+ };
1656
+ var SpinnerMeta = {
1657
+ name: "Spinner",
1658
+ label: "\uB85C\uB529 \uD45C\uC2DC",
1659
+ category: "feedback",
1660
+ icon: "refresh-cw",
1661
+ description: "\uD68C\uC804 \uB85C\uB529 \uD45C\uC2DC. label\uC744 \uC8FC\uBA74 \uC606\uC5D0 \uCEA1\uC158\uC774 \uBD99\uB294\uB2E4.",
1662
+ props: [
1663
+ {
1664
+ name: "size",
1665
+ kind: "enum",
1666
+ label: "\uD06C\uAE30",
1667
+ default: "md",
1668
+ options: [
1669
+ { value: "sm", label: "\uC791\uAC8C" },
1670
+ { value: "md", label: "\uBCF4\uD1B5" },
1671
+ { value: "lg", label: "\uD06C\uAC8C" }
1672
+ ],
1673
+ group: "appearance"
1674
+ },
1675
+ { name: "label", kind: "string", label: "\uC124\uBA85", description: "\uC811\uADFC\uC131 \uB77C\uBCA8 \uACB8 \uC606 \uCEA1\uC158", group: "content" },
1676
+ classNameProp
1677
+ ],
1678
+ children: { accepts: false },
1679
+ preset: { component: "Spinner", props: { size: "md", label: "\uBD88\uB7EC\uC624\uB294 \uC911" } },
1680
+ resize: { kind: "enum", prop: "size", values: ["sm", "md", "lg"] }
1681
+ };
1682
+ var ToastMeta = {
1683
+ name: "Toast",
1684
+ label: "\uD1A0\uC2A4\uD2B8",
1685
+ category: "feedback",
1686
+ icon: "info",
1687
+ // 렌더러가 toast 액션을 받아 .wp-toast-region에 직접 띄운다. 스펙에 직접 배치하면
1688
+ // 페이지 흐름 안에 박혀 버려 의도한 자리에 뜨지 않는다 — 그래서 팔레트에서 숨긴다.
1689
+ description: '\uC6B0\uD558\uB2E8 \uC77C\uC2DC \uC54C\uB9BC. \uC2A4\uD399\uC5D0\uC11C\uB294 \uC9C1\uC811 \uBC30\uCE58\uD558\uC9C0 \uB9D0\uACE0 { "action": "toast" }\uB85C \uB744\uC6B4\uB2E4.',
1690
+ hidden: true,
1691
+ props: [
1692
+ {
1693
+ name: "tone",
1694
+ kind: "enum",
1695
+ label: "\uD1A4",
1696
+ default: "info",
1697
+ options: [
1698
+ { value: "info", label: "\uC815\uBCF4" },
1699
+ { value: "success", label: "\uC131\uACF5" },
1700
+ { value: "warning", label: "\uACBD\uACE0" },
1701
+ { value: "danger", label: "\uC704\uD5D8" }
1702
+ ],
1703
+ group: "appearance"
1704
+ },
1705
+ { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
1706
+ { name: "onClose", kind: "action", label: "\uB2EB\uAE30", group: "behavior" },
1707
+ classNameProp
1708
+ ],
1709
+ children: { accepts: true, text: true, label: "\uBCF8\uBB38" },
1710
+ preset: { component: "Toast", props: { tone: "info", title: "\uC54C\uB9BC" }, children: ["\uB0B4\uC6A9"] },
1711
+ resize: { kind: "none" }
1712
+ };
1713
+ var CanMeta = {
1714
+ name: "Can",
1715
+ label: "\uAD8C\uD55C \uAC8C\uC774\uD2B8",
1716
+ category: "logic",
1717
+ icon: "lock",
1718
+ description: "\uAD8C\uD55C\uC774 \uC788\uC744 \uB54C\uB9CC \uC790\uC2DD\uC744 \uADF8\uB9B0\uB2E4. \uD310\uC815\uC740 \uD638\uC2A4\uD2B8 \uC571\uC774 \uC8FC\uC785\uD55C \uCF5C\uBC31\uC774 \uD558\uACE0, \uC774 \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uC9C8\uC758\uB9CC \uC704\uC784\uD55C\uB2E4.",
1719
+ props: [
1720
+ { name: "entity", kind: "string", label: "\uC5D4\uD2F0\uD2F0", required: true, description: '\uC608: "asset"', group: "data" },
1721
+ {
1722
+ name: "action",
1723
+ kind: "enum",
1724
+ label: "\uB3D9\uC791",
1725
+ default: "read",
1726
+ description: "\uD310\uC815\uAE30\uAC00 \uC544\uB294 \uBB38\uC790\uC5F4\uC774\uBA74 \uD6C4\uBCF4 \uBC16\uC758 \uAC12\uB3C4 \uC4F8 \uC218 \uC788\uB2E4.",
1727
+ options: [
1728
+ { value: "read", label: "\uC870\uD68C" },
1729
+ { value: "create", label: "\uC0DD\uC131" },
1730
+ { value: "update", label: "\uC218\uC815" },
1731
+ { value: "delete", label: "\uC0AD\uC81C" }
1732
+ ],
1733
+ group: "data"
1734
+ },
1735
+ { name: "scope", kind: "string", label: "\uC801\uC6A9 \uBC94\uC704", description: "\uC0DD\uB7B5\uD558\uBA74 \uD310\uC815\uAE30\uC758 \uAE30\uBCF8\uAC12", group: "data", advanced: true }
1736
+ ],
1737
+ slots: [{ name: "fallback", label: "\uCC28\uB2E8 \uC2DC \uB300\uCCB4 \uB0B4\uC6A9", description: "\uC0DD\uB7B5\uD558\uBA74 \uC544\uBB34\uAC83\uB3C4 \uADF8\uB9AC\uC9C0 \uC54A\uB294\uB2E4." }],
1738
+ children: { accepts: true, text: true, label: "\uAD8C\uD55C\uC774 \uC788\uC744 \uB54C \uBCF4\uC77C \uB0B4\uC6A9" },
1739
+ preset: {
1740
+ component: "Can",
1741
+ props: { entity: "asset", action: "create" },
1742
+ children: [{ component: "Button", props: { variant: "primary" }, children: ["\uB4F1\uB85D"] }]
1743
+ },
1744
+ resize: { kind: "none" }
1745
+ };
1746
+ var ShowMeta = {
1747
+ name: "Show",
1748
+ label: "\uC870\uAC74\uBD80 \uD45C\uC2DC",
1749
+ category: "logic",
1750
+ icon: "eye",
1751
+ description: "when\uC774 truthy\uC77C \uB54C\uB9CC \uC790\uC2DD\uC744 \uADF8\uB9B0\uB2E4. \uB2E4\uC774\uC5BC\uB85C\uADF8 \uC5F4\uACE0 \uB2EB\uAE30\uC758 \uD45C\uC900 \uC218\uB2E8\uC774\uB2E4.",
1752
+ props: [
1753
+ {
1754
+ name: "when",
1755
+ kind: "binding",
1756
+ label: "\uC870\uAC74",
1757
+ required: true,
1758
+ bindable: true,
1759
+ description: '{ "$state": "dialogOpen" } \uB610\uB294 { "$calc": { "op": "eq", "args": [...] } }',
1760
+ group: "data"
1761
+ }
1762
+ ],
1763
+ children: { accepts: true, text: true, label: "\uC870\uAC74\uC774 \uCC38\uC77C \uB54C \uBCF4\uC77C \uB0B4\uC6A9" },
1764
+ // 다이얼로그를 여닫는 것이 주 용도지만, 프리셋을 `when: false` + Dialog로 두면
1765
+ // 팔레트에서 끌어다 놓는 순간 화면에 아무것도 나타나지 않는다("드롭했는데 사라졌다").
1766
+ // 드롭 직후 보이는 쪽을 택하고, 다이얼로그 조합은 description에 적어 뒀다.
1767
+ preset: {
1768
+ component: "Show",
1769
+ props: { when: { $state: "show1", default: true } },
1770
+ children: [{ component: "Text", props: { preset: "body" }, children: ["\uC870\uAC74\uBD80 \uB0B4\uC6A9"] }]
1771
+ },
1772
+ resize: { kind: "none" }
1773
+ };
1774
+ var coreComponentMeta = {
1775
+ Actions: ActionsMeta,
1776
+ Alert: AlertMeta,
1777
+ Badge: BadgeMeta,
1778
+ Button: ButtonMeta,
1779
+ Can: CanMeta,
1780
+ Card: CardMeta,
1781
+ Checkbox: CheckboxMeta,
1782
+ Col: ColMeta,
1783
+ DatePicker: DatePickerMeta,
1784
+ DateRangePicker: DateRangePickerMeta,
1785
+ Dialog: DialogMeta,
1786
+ Divider: DividerMeta,
1787
+ EmptyState: EmptyStateMeta,
1788
+ Field: FieldMeta,
1789
+ Form: FormMeta,
1790
+ Grid: GridMeta,
1791
+ Icon: IconMeta,
1792
+ IconButton: IconButtonMeta,
1793
+ Input: InputMeta,
1794
+ KeyValueList: KeyValueListMeta,
1795
+ PageHead: PageHeadMeta,
1796
+ Pagination: PaginationMeta,
1797
+ ProgressBar: ProgressBarMeta,
1798
+ RemoteSearchResults: RemoteSearchResultsMeta,
1799
+ Row: RowMeta,
1800
+ SearchResults: SearchResultsMeta,
1801
+ Section: SectionMeta,
1802
+ Select: SelectMeta,
1803
+ Show: ShowMeta,
1804
+ Spacer: SpacerMeta,
1805
+ Spinner: SpinnerMeta,
1806
+ StatCard: StatCardMeta,
1807
+ Switch: SwitchMeta,
1808
+ Table: TableMeta,
1809
+ Tabs: TabsMeta,
1810
+ Tag: TagMeta,
1811
+ Text: TextMeta,
1812
+ Textarea: TextareaMeta,
1813
+ Toast: ToastMeta
1814
+ };
1815
+
1816
+ // src/meta/rich.ts
1817
+ var ChartMeta = {
1818
+ name: "Chart",
1819
+ label: "\uCC28\uD2B8",
1820
+ category: "data",
1821
+ icon: "chart-column",
1822
+ description: "recharts \uAE30\uBC18 \uCC28\uD2B8. recharts\uAC00 \uC124\uCE58\uB3FC \uC788\uC9C0 \uC54A\uC73C\uBA74 \uC548\uB0B4 \uD50C\uB808\uC774\uC2A4\uD640\uB354\uB85C \uB5A8\uC5B4\uC9C0\uACE0 \uB80C\uB354\uB294 \uACC4\uC18D\uB41C\uB2E4.",
1823
+ props: [
1824
+ {
1825
+ name: "type",
1826
+ kind: "enum",
1827
+ label: "\uC885\uB958",
1828
+ required: true,
1829
+ options: [
1830
+ { value: "bar", label: "\uB9C9\uB300" },
1831
+ { value: "line", label: "\uC120" },
1832
+ { value: "composed", label: "\uD63C\uD569", description: "\uC2DC\uB9AC\uC988\uB9C8\uB2E4 kind\uB85C \uB9C9\uB300/\uC120\uC744 \uACE0\uB978\uB2E4" },
1833
+ { value: "donut", label: "\uB3C4\uB11B" },
1834
+ { value: "pie", label: "\uD30C\uC774" }
1835
+ ],
1836
+ group: "appearance"
1837
+ },
1838
+ {
1839
+ name: "data",
1840
+ kind: "binding",
1841
+ label: "\uB370\uC774\uD130",
1842
+ required: true,
1843
+ bindable: true,
1844
+ description: "\uB808\uCF54\uB4DC \uBC30\uC5F4. \uAC01 \uB808\uCF54\uB4DC\uC5D0\uC11C xKey\uC640 \uC2DC\uB9AC\uC988 key\uB97C \uC77D\uB294\uB2E4.",
1845
+ group: "data"
1846
+ },
1847
+ {
1848
+ name: "xKey",
1849
+ kind: "string",
1850
+ label: "x\uCD95 \uD0A4",
1851
+ description: 'pie/donut\uC5D0\uC11C\uB294 \uC870\uAC01 \uC774\uB984 \uD0A4(\uAE30\uBCF8 "name").',
1852
+ group: "data"
1853
+ },
1854
+ {
1855
+ name: "series",
1856
+ kind: "array",
1857
+ label: "\uC2DC\uB9AC\uC988",
1858
+ required: true,
1859
+ group: "data",
1860
+ item: [
1861
+ { name: "key", kind: "string", label: "\uB370\uC774\uD130 \uD0A4", required: true },
1862
+ { name: "label", kind: "string", label: "\uBC94\uB840 \uC774\uB984", description: "\uC0DD\uB7B5\uD558\uBA74 key \uADF8\uB300\uB85C" },
1863
+ {
1864
+ name: "color",
1865
+ kind: "color",
1866
+ label: "\uC0C9",
1867
+ description: 'CSS \uC0C9\uC0C1 \uB610\uB294 "1"~"8"(\uC2DC\uB9AC\uC988 \uD1A0\uD070 \uBC88\uD638). \uC0DD\uB7B5\uD558\uBA74 \uC21C\uC11C\uB300\uB85C \uC790\uB3D9 \uBC30\uC815.'
1868
+ },
1869
+ {
1870
+ name: "kind",
1871
+ kind: "enum",
1872
+ label: "\uB9C8\uD06C",
1873
+ default: "bar",
1874
+ description: "type=composed \uC804\uC6A9",
1875
+ options: [
1876
+ { value: "bar", label: "\uB9C9\uB300" },
1877
+ { value: "line", label: "\uC120" },
1878
+ { value: "dashed-line", label: "\uC810\uC120" }
1879
+ ]
1880
+ },
1881
+ { name: "stack", kind: "string", label: "\uB204\uC801 \uADF8\uB8F9", description: "\uAC19\uC740 \uBB38\uC790\uC5F4\uB07C\uB9AC \uB9C9\uB300\uB97C \uC313\uB294\uB2E4." }
1882
+ ]
1883
+ },
1884
+ { name: "height", kind: "number", label: "\uB192\uC774(px)", default: 300, group: "layout" },
1885
+ {
1886
+ name: "valueFormat",
1887
+ kind: "enum",
1888
+ label: "\uAC12 \uD615\uC2DD",
1889
+ default: "number",
1890
+ description: "currency\uB294 \uC5B5/\uB9CC\uC73C\uB85C \uCD95\uC57D\uD55C\uB2E4(1.2\uC5B5, 3,400\uB9CC).",
1891
+ options: [
1892
+ { value: "number", label: "\uC22B\uC790" },
1893
+ { value: "currency", label: "\uAE08\uC561" },
1894
+ { value: "percent", label: "\uBC31\uBD84\uC728" }
1895
+ ],
1896
+ group: "appearance"
1897
+ },
1898
+ {
1899
+ name: "legend",
1900
+ kind: "boolean",
1901
+ label: "\uBC94\uB840",
1902
+ default: true,
1903
+ description: "\uB2E8\uC77C \uC2DC\uB9AC\uC988 \uCE74\uB974\uD14C\uC2DC\uC548 \uCC28\uD2B8\uB294 \uCF1C\uB3C4 \uC0DD\uB7B5\uB41C\uB2E4.",
1904
+ group: "appearance"
1905
+ },
1906
+ {
1907
+ name: "donutCenter",
1908
+ kind: "object",
1909
+ label: "\uB3C4\uB11B \uC911\uC559 \uBB38\uAD6C",
1910
+ group: "content",
1911
+ fields: [
1912
+ { name: "label", kind: "string", label: "\uB77C\uBCA8" },
1913
+ { name: "value", kind: "string", label: "\uAC12" }
1914
+ ]
1915
+ },
1916
+ { name: "emptyText", kind: "string", label: "\uB370\uC774\uD130 \uC5C6\uC74C \uBB38\uAD6C", group: "content" }
1917
+ ],
1918
+ children: { accepts: false },
1919
+ preset: {
1920
+ component: "Chart",
1921
+ props: {
1922
+ type: "bar",
1923
+ height: 300,
1924
+ xKey: "name",
1925
+ series: [{ key: "value", label: "\uAC12" }],
1926
+ data: [
1927
+ { name: "1\uC6D4", value: 12 },
1928
+ { name: "2\uC6D4", value: 18 }
1929
+ ]
1930
+ }
1931
+ },
1932
+ resize: { kind: "numeric", heightProp: "height", unit: "px", axis: "y" }
1933
+ };
1934
+ var MapPreviewMeta = {
1935
+ name: "MapPreview",
1936
+ label: "\uC9C0\uB3C4 \uBBF8\uB9AC\uBCF4\uAE30",
1937
+ category: "data",
1938
+ icon: "box",
1939
+ description: "OpenLayers \uAE30\uBC18 \uC704\uCE58 \uBBF8\uB9AC\uBCF4\uAE30. ol\uC774 \uC124\uCE58\uB3FC \uC788\uC9C0 \uC54A\uC73C\uBA74 \uC548\uB0B4 \uD50C\uB808\uC774\uC2A4\uD640\uB354\uB85C \uB5A8\uC5B4\uC9C0\uACE0, OSM \uD0C0\uC77C\uC740 \uB124\uD2B8\uC6CC\uD06C\uAC00 \uC788\uC5B4\uC57C \uBCF4\uC778\uB2E4.",
1940
+ props: [
1941
+ {
1942
+ name: "markers",
1943
+ kind: "array",
1944
+ label: "\uB9C8\uCEE4",
1945
+ required: true,
1946
+ bindable: true,
1947
+ description: "WGS84 \uC88C\uD45C. 3\uAC1C \uC774\uD558\uBA74 \uB77C\uBCA8\uC774 \uD56D\uC0C1 \uBCF4\uC774\uACE0, \uADF8 \uC774\uC0C1\uC774\uBA74 \uD638\uBC84 \uC2DC \uBCF4\uC778\uB2E4.",
1948
+ group: "data",
1949
+ item: [
1950
+ { name: "lat", kind: "number", label: "\uC704\uB3C4", required: true },
1951
+ { name: "lng", kind: "number", label: "\uACBD\uB3C4", required: true },
1952
+ { name: "label", kind: "string", label: "\uB77C\uBCA8" },
1953
+ {
1954
+ name: "tone",
1955
+ kind: "enum",
1956
+ label: "\uD1A4",
1957
+ options: [
1958
+ { value: "brand", label: "\uBE0C\uB79C\uB4DC" },
1959
+ { value: "danger", label: "\uC704\uD5D8" },
1960
+ { value: "info", label: "\uC815\uBCF4" }
1961
+ ]
1962
+ }
1963
+ ]
1964
+ },
1965
+ {
1966
+ name: "center",
1967
+ kind: "object",
1968
+ label: "\uC911\uC2EC \uC88C\uD45C",
1969
+ description: "\uC0DD\uB7B5\uD558\uBA74 \uB9C8\uCEE4 \uC804\uCCB4\uAC00 \uBCF4\uC774\uB3C4\uB85D \uB9DE\uCD98\uB2E4.",
1970
+ group: "data",
1971
+ fields: [
1972
+ { name: "lat", kind: "number", label: "\uC704\uB3C4", required: true },
1973
+ { name: "lng", kind: "number", label: "\uACBD\uB3C4", required: true }
1974
+ ]
1975
+ },
1976
+ {
1977
+ name: "zoom",
1978
+ kind: "number",
1979
+ label: "\uC90C \uB808\uBCA8",
1980
+ description: "\uC0DD\uB7B5\uD558\uBA74 \uB9C8\uCEE4 \uD558\uB098\uC77C \uB54C 15, \uC5EC\uB7FF\uC774\uBA74 fit \uACB0\uACFC.",
1981
+ group: "appearance"
1982
+ },
1983
+ { name: "height", kind: "number", label: "\uB192\uC774(px)", default: 280, group: "layout" },
1984
+ {
1985
+ name: "interactive",
1986
+ kind: "boolean",
1987
+ label: "\uC870\uC791 \uD5C8\uC6A9",
1988
+ default: true,
1989
+ description: "false\uBA74 \uD32C\xB7\uC90C\xB7\uD638\uBC84\uAC00 \uC7A0\uAE34 \uC815\uC801 \uBBF8\uB9AC\uBCF4\uAE30\uAC00 \uB41C\uB2E4.",
1990
+ group: "behavior"
1991
+ }
1992
+ ],
1993
+ children: { accepts: false },
1994
+ preset: {
1995
+ component: "MapPreview",
1996
+ props: {
1997
+ height: 280,
1998
+ markers: [{ lat: 37.5665, lng: 126.978, label: "\uC11C\uC6B8" }]
1999
+ }
2000
+ },
2001
+ resize: { kind: "numeric", heightProp: "height", unit: "px", axis: "y" }
2002
+ };
2003
+ var richComponentMeta = {
2004
+ Chart: ChartMeta,
2005
+ MapPreview: MapPreviewMeta
2006
+ };
2007
+
2008
+ // src/meta/index.ts
2009
+ var SDUI_CATEGORIES = [
2010
+ { id: "layout", label: "\uB808\uC774\uC544\uC6C3" },
2011
+ { id: "input", label: "\uC785\uB825" },
2012
+ { id: "display", label: "\uD45C\uC2DC" },
2013
+ { id: "data", label: "\uB370\uC774\uD130" },
2014
+ { id: "feedback", label: "\uD53C\uB4DC\uBC31" },
2015
+ { id: "logic", label: "\uB85C\uC9C1" }
2016
+ ];
2017
+ var allComponentMeta = {
2018
+ ...coreComponentMeta,
2019
+ ...richComponentMeta,
2020
+ ...builtinComponentMeta
2021
+ };
2022
+ function getComponentMeta(name, catalog = allComponentMeta) {
2023
+ return Object.hasOwn(catalog, name) ? catalog[name] : void 0;
2024
+ }
2025
+ function slotNamesOf(meta) {
2026
+ return [
2027
+ ...(meta.slots ?? []).map((slot) => slot.name),
2028
+ ...meta.props.filter((prop) => prop.slot === true).map((prop) => prop.name)
2029
+ ];
2030
+ }
2031
+ function paletteGroups(catalog = allComponentMeta) {
2032
+ const items = Object.values(catalog).filter((meta) => meta.hidden !== true);
2033
+ return SDUI_CATEGORIES.map((category) => ({
2034
+ ...category,
2035
+ items: items.filter((meta) => meta.category === category.id).sort((a, b) => a.label.localeCompare(b.label, "ko"))
2036
+ })).filter((group) => group.items.length > 0);
2037
+ }
2038
+
2039
+ export { ActionsMeta, AlertMeta, BadgeMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DividerMeta, EmptyStateMeta, FieldMeta, ForEachMeta, FormMeta, GridMeta, IconButtonMeta, IconMeta, InputMeta, KeyValueListMeta, MapPreviewMeta, PageHeadMeta, PaginationMeta, ProgressBarMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SearchResultsMeta, SectionMeta, SelectMeta, ShowMeta, SpacerMeta, SpinnerMeta, StatCardMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TextMeta, TextareaMeta, ToastMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf };