UNPKG

22.1 kBJavaScriptView Raw
1export 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};
541export default manifest;
542//# sourceMappingURL=manifest.mjs.map
\No newline at end of file