Skip to content

Commit 35b7a60

Browse files
luisbeqjaluisbeqja
authored
feat(component): add radio component (#178)
* feat(component): create radio component #128 * feat(component): create radio component * feat(component): add radio comopnent headless * feat: inline radio headless component
1 parent 9cdf356 commit 35b7a60

File tree

8 files changed

+219
-0
lines changed

8 files changed

+219
-0
lines changed

‎apps/website/src/components/menu/menu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const Menu = component$<Props>(({ onClose$ }) => {
2727
},
2828
{ label: 'Drawer', path: `/docs/${appState.theme.toLowerCase()}/drawer` },
2929
{ label: 'Rating', path: `/docs/${appState.theme.toLowerCase()}/rating` },
30+
{ label: 'Radio', path: `/docs/${appState.theme.toLowerCase()}/radio` },
3031
{ label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },
3132
{ label: 'Select', path: `/docs/${appState.theme.toLowerCase()}/select` },
3233
{ label: 'Tabs', path: `/docs/${appState.theme.toLowerCase()}/tabs` },

‎apps/website/src/routes/docs/daisy/radio/index.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
2+
import { Radio } from '@qwik-ui/theme-daisy';
3+
4+
export default component$(() => {
5+
useStylesScoped$(`
6+
.container { width: 300px } Accordion {border: 1px solid white}
7+
.panel {
8+
display: flex;
9+
gap: 8px;
10+
flex-wrap: wrap;
11+
}
12+
`);
13+
14+
let radioValue = useSignal('primary');
15+
return (
16+
<>
17+
<div class="container">
18+
<h2>This is the documentation for the Radio</h2>
19+
<div class="panel mt-5 flex-col">
20+
<h2>Selected vatiant: {radioValue.value}</h2>
21+
<div>
22+
<Radio
23+
variant="primary"
24+
class="mt-5"
25+
name="radio"
26+
value="primary"
27+
onChange$={(e) => {
28+
radioValue.value = e.target.value;
29+
}}
30+
checked
31+
/>
32+
<Radio
33+
variant="secondary"
34+
class="mt-5"
35+
name="radio"
36+
value="secondary"
37+
onChange$={(e) => {
38+
radioValue.value = e.target.value;
39+
}}
40+
/>
41+
<Radio
42+
variant="accent"
43+
class="mt-5"
44+
name="radio"
45+
value="accent"
46+
onChange$={(e) => {
47+
radioValue.value = e.target.value;
48+
}}
49+
/>
50+
<Radio
51+
variant="info"
52+
class="mt-5"
53+
name="radio"
54+
value="info"
55+
onChange$={(e) => {
56+
radioValue.value = e.target.value;
57+
}}
58+
/>
59+
<Radio
60+
variant="success"
61+
class="mt-5"
62+
name="radio"
63+
value="success"
64+
onChange$={(e) => {
65+
radioValue.value = e.target.value;
66+
}}
67+
/>
68+
<Radio
69+
variant="warning"
70+
class="mt-5"
71+
name="radio"
72+
value="warning"
73+
onChange$={(e) => {
74+
radioValue.value = e.target.value;
75+
}}
76+
/>
77+
<Radio
78+
variant="error"
79+
class="mt-5"
80+
name="radio"
81+
value="error"
82+
onChange$={(e) => {
83+
radioValue.value = e.target.value;
84+
}}
85+
/>
86+
</div>
87+
88+
<h2 class="mt-5">Primary Example</h2>
89+
<div>
90+
<Radio
91+
variant="primary"
92+
name="radio-Selected"
93+
value="first"
94+
checked
95+
/>
96+
<Radio variant="primary" name="radio-Selected" value="second" />
97+
</div>
98+
</div>
99+
</div>
100+
</>
101+
);
102+
});

‎apps/website/src/routes/docs/headless/radio/index.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Radio } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
let radioValue = useSignal('first');
6+
7+
return (
8+
<div class="flex flex-col gap-3 mt-2">
9+
<h2>This is the documentation for the Radio</h2>
10+
<h3>Basic Example </h3>
11+
<div class="flex gap-1">
12+
<Radio name="one" />
13+
<Radio name="one" />
14+
<Radio name="one" />
15+
</div>
16+
17+
<h3 class="mt-5">Change value Example </h3>
18+
<p>Selected radio: {radioValue.value}</p>
19+
<div class="flex gap-1">
20+
<Radio
21+
name="two"
22+
value="first"
23+
checked
24+
onChange$={(e) => {
25+
radioValue.value = e.target.value;
26+
}}
27+
/>
28+
<Radio
29+
name="two"
30+
value="second"
31+
onChange$={(e) => {
32+
radioValue.value = e.target.value;
33+
}}
34+
/>
35+
<Radio
36+
name="two"
37+
value="third"
38+
onChange$={(e) => {
39+
radioValue.value = e.target.value;
40+
}}
41+
/>
42+
</div>
43+
</div>
44+
);
45+
});

‎packages/daisy/src/components/ratio/daisy.config.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const daisyConfig = {
2+
variants: {
3+
accent: 'radio-accent',
4+
error: 'radio-error',
5+
info: 'radio-info',
6+
primary: 'radio-primary',
7+
secondary: 'radio-secondary',
8+
success: 'radio-success',
9+
warning: 'radio-warning',
10+
},
11+
};

‎packages/daisy/src/components/ratio/radio.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {
2+
component$,
3+
PropFunction,
4+
QwikIntrinsicElements,
5+
QwikChangeEvent,
6+
} from '@builder.io/qwik';
7+
import { Radio as HeadlessRadio } from '@qwik-ui/headless';
8+
import { clsq } from '@qwik-ui/shared';
9+
import { daisyConfig } from './daisy.config';
10+
11+
export type HTMLRadioProps = QwikIntrinsicElements['input'];
12+
13+
export type DaisyRadioProps = {
14+
variant?: DaisyRadioVariants;
15+
name?: string;
16+
value?: string;
17+
onChange$?: PropFunction<(evt: QwikChangeEvent<HTMLInputElement>) => void>;
18+
};
19+
20+
export type DaisyRadioVariants =
21+
| 'primary'
22+
| 'secondary'
23+
| 'accent'
24+
| 'info'
25+
| 'success'
26+
| 'warning'
27+
| 'error';
28+
29+
export type RadioProps = HTMLRadioProps & DaisyRadioProps;
30+
31+
export const Radio = component$((props: RadioProps) => {
32+
const {
33+
variant = 'primary',
34+
class: classNames,
35+
value = 'first',
36+
name = 'radio-1',
37+
...rest
38+
} = props;
39+
40+
const { variants } = daisyConfig;
41+
42+
return (
43+
<HeadlessRadio
44+
{...rest}
45+
type="radio"
46+
name={name}
47+
class={clsq('radio mx-1', variants[variant], classNames)}
48+
value={value}
49+
></HeadlessRadio>
50+
);
51+
});

‎packages/daisy/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ export * from './components/tabs';
1111
export * from './components/toast/toast';
1212
export * from './components/toggle/toggle';
1313
export * from './components/tooltip/tooltip';
14+
export * from './components/ratio/radio';

‎packages/headless/src/components/radio/radio.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { component$, QwikIntrinsicElements } from '@builder.io/qwik';
2+
3+
export type RadioProps = QwikIntrinsicElements['input'];
4+
5+
export const Radio = component$((props: RadioProps) => (
6+
<input {...props} type="radio" />
7+
));

‎packages/headless/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ export * from './components/toast/toast';
1313
export * from './components/toggle/toggle';
1414
export * from './components/tooltip/tooltip';
1515
export * as Select from './components/select/select';
16+
export * from './components/radio/radio';

0 commit comments

Comments
 (0)