1 | export const manifest = {
|
2 | name: 'radio',
|
3 | slots: [
|
4 | {
|
5 | description: 'Slot for default radio label',
|
6 | name: 'default'
|
7 | }
|
8 | ],
|
9 | events: [
|
10 | {
|
11 | description: 'Event emitted for setting the modelValue',
|
12 | name: 'update:modelValue'
|
13 | }
|
14 | ],
|
15 | props: [
|
16 | {
|
17 | name: 'color',
|
18 | type: [
|
19 | 'light',
|
20 | 'dark'
|
21 | ],
|
22 | default: 'light',
|
23 | description: 'The color variant of the radio'
|
24 | },
|
25 | {
|
26 | name: 'disabled',
|
27 | type: [
|
28 | 'Boolean'
|
29 | ],
|
30 | default: 'false',
|
31 | description: 'The disabled state of the radio'
|
32 | },
|
33 | {
|
34 | name: 'indeterminate',
|
35 | type: [
|
36 | 'Boolean'
|
37 | ],
|
38 | default: 'false',
|
39 | description: 'The indeterminate state of the radio'
|
40 | },
|
41 | {
|
42 | name: 'value',
|
43 | type: [],
|
44 | default: '\'\'',
|
45 | description: 'Used to set the radio value when used inside a radio group'
|
46 | },
|
47 | {
|
48 | name: 'modelValue',
|
49 | type: [],
|
50 | default: 'false',
|
51 | description: 'Used to set the radio value when used by itself'
|
52 | },
|
53 | {
|
54 | name: 'name',
|
55 | type: [
|
56 | 'String'
|
57 | ],
|
58 | default: 'uid()',
|
59 | description: 'The unique identifier of the radio'
|
60 | },
|
61 | {
|
62 | name: 'native',
|
63 | type: [
|
64 | 'Boolean'
|
65 | ],
|
66 | default: 'false',
|
67 | description: 'Displays the native browser radio input indicator'
|
68 | },
|
69 | {
|
70 | name: 'readonly',
|
71 | type: [
|
72 | 'Boolean'
|
73 | ],
|
74 | default: 'false',
|
75 | description: 'The readonly state of the radio'
|
76 | },
|
77 | {
|
78 | name: 'size',
|
79 | type: [
|
80 | 'sm',
|
81 | 'md',
|
82 | 'lg'
|
83 | ],
|
84 | default: 'md',
|
85 | description: 'The size variant of the radio'
|
86 | },
|
87 | {
|
88 | name: 'tabindex',
|
89 | type: [
|
90 | 'Number',
|
91 | 'String'
|
92 | ],
|
93 | default: '0',
|
94 | description: 'The tabindex of the radio'
|
95 | }
|
96 | ],
|
97 | css: {
|
98 | selector: '.radio',
|
99 | type: 'form',
|
100 | defaults: {
|
101 | size: 'md',
|
102 | color: 'light'
|
103 | },
|
104 | variables: [
|
105 | {
|
106 | name: 'background',
|
107 | type: 'color',
|
108 | value: 'color(\'white\')',
|
109 | description: 'The background of the radio component indicator'
|
110 | },
|
111 | {
|
112 | name: 'background--checked',
|
113 | type: 'color',
|
114 | value: 'color(\'primary\')',
|
115 | description: 'The background of the radio component indicator when checked'
|
116 | },
|
117 | {
|
118 | name: 'background--disabled',
|
119 | type: 'color',
|
120 | value: 'color(\'light-25\')',
|
121 | description: 'The background of the radio component indicator when disabled'
|
122 | },
|
123 | {
|
124 | name: 'background--checked-disabled',
|
125 | type: 'color',
|
126 | value: 'color(\'primary-25\')',
|
127 | description: 'The background of the radio component indicator when checked and disabled'
|
128 | },
|
129 | {
|
130 | name: 'border-color',
|
131 | type: 'color',
|
132 | value: 'color(\'light-55\')',
|
133 | description: 'The border-color of the radio component indicator'
|
134 | },
|
135 | {
|
136 | name: 'border-color--checked',
|
137 | type: 'color',
|
138 | value: 'color(\'primary-55\')',
|
139 | description: 'The border-color of the radio component indicator when checked'
|
140 | },
|
141 | {
|
142 | name: 'border-color--disabled',
|
143 | type: 'color',
|
144 | value: 'color(\'light\')',
|
145 | description: 'The border-color of the radio component indicator when disabled'
|
146 | },
|
147 | {
|
148 | name: 'border-color--checked-disabled',
|
149 | type: 'color',
|
150 | value: 'color(\'primary-30\')',
|
151 | description: 'The border-color of the radio component indicator when checked and disabled'
|
152 | },
|
153 | {
|
154 | name: 'border-style',
|
155 | type: '',
|
156 | value: 'var(--border-style)',
|
157 | description: 'The border style of the radio component indicator'
|
158 | },
|
159 | {
|
160 | name: 'border-top-width',
|
161 | type: '',
|
162 | value: 'var(--border-top-width)',
|
163 | description: 'The border top width of the radio component indicator'
|
164 | },
|
165 | {
|
166 | name: 'border-right-width',
|
167 | type: '',
|
168 | value: 'var(--border-right-width)',
|
169 | description: 'The border right width of the radio component indicator'
|
170 | },
|
171 | {
|
172 | name: 'border-bottom-width',
|
173 | type: '',
|
174 | value: 'var(--border-bottom-width)',
|
175 | description: 'The border bottom width of the radio component indicator'
|
176 | },
|
177 | {
|
178 | name: 'border-left-width',
|
179 | type: '',
|
180 | value: 'var(--border-left-width)',
|
181 | description: 'The border left width of the radio component indicator'
|
182 | },
|
183 | {
|
184 | name: 'border-width',
|
185 | type: '',
|
186 | value: 'var(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)',
|
187 | description: 'The border width of the radio component indicator'
|
188 | },
|
189 | {
|
190 | name: 'border-top-left-radius',
|
191 | type: '',
|
192 | value: '50%',
|
193 | description: 'The border top left radius of the radio component indicator'
|
194 | },
|
195 | {
|
196 | name: 'border-top-right-radius',
|
197 | type: '',
|
198 | value: '50%',
|
199 | description: 'The border top right radius of the radio component indicator'
|
200 | },
|
201 | {
|
202 | name: 'border-bottom-right-radius',
|
203 | type: '',
|
204 | value: '50%',
|
205 | description: 'The border bottom right radius of the radio component indicator'
|
206 | },
|
207 | {
|
208 | name: 'border-bottom-left-radius',
|
209 | type: '',
|
210 | value: '50%',
|
211 | description: 'The border bottom left radius of the radio component indicator'
|
212 | },
|
213 | {
|
214 | name: 'border-radius',
|
215 | type: '',
|
216 | value: 'var(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)',
|
217 | description: 'The border radius of the radio component indicator'
|
218 | },
|
219 | {
|
220 | name: 'box-shadow-offset-x',
|
221 | type: '',
|
222 | value: 'var(--box-shadow-offset-x)',
|
223 | description: 'The box shadow horizontal offset of the radio component indicator'
|
224 | },
|
225 | {
|
226 | name: 'box-shadow-offset-y',
|
227 | type: '',
|
228 | value: 'var(--box-shadow-offset-y)',
|
229 | description: 'The box shadow vertical offset of the radio component indicator'
|
230 | },
|
231 | {
|
232 | name: 'box-shadow-blur-radius',
|
233 | type: '',
|
234 | value: 'var(--box-shadow-blur-radius)',
|
235 | description: 'The box shadow blur radius of the radio component indicator'
|
236 | },
|
237 | {
|
238 | name: 'box-shadow-spread-radius',
|
239 | type: '',
|
240 | value: 'var(--box-shadow-spread-radius)',
|
241 | description: 'The box shadow spread radius of the radio component indicator'
|
242 | },
|
243 | {
|
244 | name: 'box-shadow-color',
|
245 | type: '',
|
246 | value: 'var(--box-shadow-color)',
|
247 | description: 'The box shadow spread radius of the radio component indicator'
|
248 | },
|
249 | {
|
250 | name: 'box-shadow',
|
251 | type: '',
|
252 | value: 'var(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)',
|
253 | description: 'The box shadow of the radio component indicator'
|
254 | },
|
255 | {
|
256 | name: 'color',
|
257 | type: 'color',
|
258 | value: 'color(\'white\')',
|
259 | description: 'The color of the radio component indicator icon'
|
260 | },
|
261 | {
|
262 | name: 'color--disabled',
|
263 | type: 'color',
|
264 | value: 'color(\'light-25\')',
|
265 | description: 'The color of the radio component indicator icon when disabled'
|
266 | },
|
267 | {
|
268 | name: 'margin-right',
|
269 | type: '',
|
270 | value: 'calc(var(--margin-right) / 2)',
|
271 | description: 'The right margin of the radio component indicator'
|
272 | },
|
273 | {
|
274 | name: 'size',
|
275 | type: 'size',
|
276 | value: '1rem',
|
277 | description: 'The size of the radio component indicator'
|
278 | },
|
279 | {
|
280 | name: 'checkmark--size',
|
281 | type: 'size',
|
282 | value: '8px',
|
283 | description: 'The size of the radio component indicator check mark icon'
|
284 | },
|
285 | {
|
286 | name: 'label--font-size',
|
287 | type: 'size',
|
288 | value: 'font-size()',
|
289 | description: 'The font size of the radio component label'
|
290 | },
|
291 | {
|
292 | name: 'label--color',
|
293 | type: 'color',
|
294 | value: 'contrast-color($color-light)',
|
295 | description: 'The label color of the radio component label'
|
296 | },
|
297 | {
|
298 | name: 'label--color--disabled',
|
299 | type: 'color',
|
300 | value: 'color(\'light-70\')',
|
301 | description: 'The label color of the radio component when disabled'
|
302 | }
|
303 | ],
|
304 | variants: [
|
305 | {
|
306 | name: 'light',
|
307 | type: 'variant',
|
308 | description: 'Variables for the light color variant',
|
309 | variables: [
|
310 | {
|
311 | name: 'background',
|
312 | type: '',
|
313 | value: 'color(\'white\')',
|
314 | description: 'The background of the radio component indicator, for the light color variant'
|
315 | },
|
316 | {
|
317 | name: 'background--checked',
|
318 | type: '',
|
319 | value: 'color(\'primary\')',
|
320 | description: 'The background of the radio component indicator when checked, for the light color variant'
|
321 | },
|
322 | {
|
323 | name: 'background--disabled',
|
324 | type: '',
|
325 | value: 'color(\'light-25\')',
|
326 | description: 'The background of the radio component indicator when disabled, for the light color variant'
|
327 | },
|
328 | {
|
329 | name: 'background--checked-disabled',
|
330 | type: '',
|
331 | value: 'color(\'primary-25\')',
|
332 | description: 'The background of the radio component indicator when checked and disabled, for the light color variant'
|
333 | },
|
334 | {
|
335 | name: 'border-color',
|
336 | type: '',
|
337 | value: 'color(\'light-55\')',
|
338 | description: 'The border-color of the radio component indicator, for the light color variant'
|
339 | },
|
340 | {
|
341 | name: 'border-color--checked',
|
342 | type: '',
|
343 | value: 'color(\'primary-55\')',
|
344 | description: 'The border-color of the radio component indicator when checked, for the light color variant'
|
345 | },
|
346 | {
|
347 | name: 'border-color--disabled',
|
348 | type: '',
|
349 | value: 'color(\'light\')',
|
350 | description: 'The border-color of the radio component indicator when disabled, for the light color variant'
|
351 | },
|
352 | {
|
353 | name: 'border-color--checked-disabled',
|
354 | type: '',
|
355 | value: 'color(\'primary-30\')',
|
356 | description: 'The border-color of the radio component indicator when checked and disabled, for the light color variant'
|
357 | },
|
358 | {
|
359 | name: 'color',
|
360 | type: '',
|
361 | value: 'color(\'white\')',
|
362 | description: 'The color of the radio component indicator icon, for the light color variant'
|
363 | },
|
364 | {
|
365 | name: 'color--disabled',
|
366 | type: '',
|
367 | value: 'color(\'light-25\')',
|
368 | description: 'The color of the radio component indicator icon when disabled, for the light color variant'
|
369 | },
|
370 | {
|
371 | name: 'label--color',
|
372 | type: '',
|
373 | value: 'contrast-color($color-light)',
|
374 | description: 'The label color of the radio component label, for the light color variant'
|
375 | },
|
376 | {
|
377 | name: 'label--color--disabled',
|
378 | type: '',
|
379 | value: 'color(\'light-70\')',
|
380 | description: 'The label color of the radio component when disabled, for the light color variant'
|
381 | }
|
382 | ]
|
383 | },
|
384 | {
|
385 | name: 'dark',
|
386 | type: 'variant',
|
387 | description: 'Variables for the dark color variant',
|
388 | variables: [
|
389 | {
|
390 | name: 'background',
|
391 | type: '',
|
392 | value: 'color(\'dark\')',
|
393 | description: 'The background of the radio component indicator, for the dark color variant'
|
394 | },
|
395 | {
|
396 | name: 'background--checked',
|
397 | type: '',
|
398 | value: 'color(\'primary\')',
|
399 | description: 'The background of the radio component indicator when checked, for the dark color variant'
|
400 | },
|
401 | {
|
402 | name: 'background--disabled',
|
403 | type: '',
|
404 | value: 'color(\'dark-25\')',
|
405 | description: 'The background of the radio component indicator when disabled, for the dark color variant'
|
406 | },
|
407 | {
|
408 | name: 'background--checked-disabled',
|
409 | type: '',
|
410 | value: 'color(\'primary-75\')',
|
411 | description: 'The background of the radio component indicator when checked and disabled, for the dark color variant'
|
412 | },
|
413 | {
|
414 | name: 'border-color',
|
415 | type: '',
|
416 | value: 'color(\'dark\')',
|
417 | description: 'The border-color of the radio component indicator, for the dark color variant'
|
418 | },
|
419 | {
|
420 | name: 'border-color--checked',
|
421 | type: '',
|
422 | value: 'color(\'primary-55\')',
|
423 | description: 'The border-color of the radio component indicator when checked, for the dark color variant'
|
424 | },
|
425 | {
|
426 | name: 'border-color--disabled',
|
427 | type: '',
|
428 | value: 'color(\'dark\')',
|
429 | description: 'The border-color of the radio component indicator when disabled, for the dark color variant'
|
430 | },
|
431 | {
|
432 | name: 'border-color--checked-disabled',
|
433 | type: '',
|
434 | value: 'color(\'primary-70\')',
|
435 | description: 'The border-color of the radio component indicator when checked and disabled, for the dark color variant'
|
436 | },
|
437 | {
|
438 | name: 'color',
|
439 | type: '',
|
440 | value: 'color(\'white\')',
|
441 | description: 'The color of the radio component indicator icon, for the dark color variant'
|
442 | },
|
443 | {
|
444 | name: 'color--disabled',
|
445 | type: '',
|
446 | value: 'color(\'dark-25\')',
|
447 | description: 'The color of the radio component indicator icon when disabled, for the dark color variant'
|
448 | },
|
449 | {
|
450 | name: 'label--color',
|
451 | type: '',
|
452 | value: 'contrast-color($color-dark)',
|
453 | description: 'The label color of the radio component label, for the dark color variant'
|
454 | },
|
455 | {
|
456 | name: 'label--color--disabled',
|
457 | type: '',
|
458 | value: 'color(\'dark-30\')',
|
459 | description: 'The label color of the radio component when disabled, for the dark color variant'
|
460 | }
|
461 | ]
|
462 | },
|
463 | {
|
464 | name: 'sm',
|
465 | type: 'variant',
|
466 | description: 'Variables for the sm size variant',
|
467 | variables: [
|
468 | {
|
469 | name: 'size',
|
470 | type: '',
|
471 | value: 'calc(#{1rem} * #{size-multiplier(\'sm\')})',
|
472 | description: 'The size of the radio component indicator, for the sm size variant'
|
473 | },
|
474 | {
|
475 | name: 'checkmark--size',
|
476 | type: '',
|
477 | value: 'calc(#{8px} * #{size-multiplier(\'sm\')})',
|
478 | description: 'The size of the radio component indicator check mark icon, for the sm size variant'
|
479 | },
|
480 | {
|
481 | name: 'label--font-size',
|
482 | type: '',
|
483 | value: 'calc(#{font-size()} * #{size-multiplier(\'sm\')})',
|
484 | description: 'The font size of the radio component label, for the sm size variant'
|
485 | }
|
486 | ]
|
487 | },
|
488 | {
|
489 | name: 'md',
|
490 | type: 'variant',
|
491 | description: 'Variables for the md size variant',
|
492 | variables: [
|
493 | {
|
494 | name: 'size',
|
495 | type: '',
|
496 | value: 'calc(#{1rem} * #{size-multiplier(\'md\')})',
|
497 | description: 'The size of the radio component indicator, for the md size variant'
|
498 | },
|
499 | {
|
500 | name: 'checkmark--size',
|
501 | type: '',
|
502 | value: 'calc(#{8px} * #{size-multiplier(\'md\')})',
|
503 | description: 'The size of the radio component indicator check mark icon, for the md size variant'
|
504 | },
|
505 | {
|
506 | name: 'label--font-size',
|
507 | type: '',
|
508 | value: 'calc(#{font-size()} * #{size-multiplier(\'md\')})',
|
509 | description: 'The font size of the radio component label, for the md size variant'
|
510 | }
|
511 | ]
|
512 | },
|
513 | {
|
514 | name: 'lg',
|
515 | type: 'variant',
|
516 | description: 'Variables for the lg size variant',
|
517 | variables: [
|
518 | {
|
519 | name: 'size',
|
520 | type: '',
|
521 | value: 'calc(#{1rem} * #{size-multiplier(\'lg\')})',
|
522 | description: 'The size of the radio component indicator, for the lg size variant'
|
523 | },
|
524 | {
|
525 | name: 'checkmark--size',
|
526 | type: '',
|
527 | value: 'calc(#{8px} * #{size-multiplier(\'lg\')})',
|
528 | description: 'The size of the radio component indicator check mark icon, for the lg size variant'
|
529 | },
|
530 | {
|
531 | name: 'label--font-size',
|
532 | type: '',
|
533 | value: 'calc(#{font-size()} * #{size-multiplier(\'lg\')})',
|
534 | description: 'The font size of the radio component label, for the lg size variant'
|
535 | }
|
536 | ]
|
537 | }
|
538 | ]
|
539 | }
|
540 | };
|
541 | export default manifest;
|
542 |
|
\ | No newline at end of file |