natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

adapt new Input
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/components/checkbox.md
View File

@@ -77,7 +77,7 @@ mount(BasicDemo, '#demo-basic');
const ToggleDemo = () => {
const enabled = $(false);
return Div({ class: 'flex flex-col gap-4 w-full' }, [
return div({ class: 'flex flex-col gap-4 w-full' }, [
Checkbox({
label: 'Enable notifications',
value: enabled,
@@ -85,8 +85,8 @@ const ToggleDemo = () => {
onclick: () => enabled(!enabled())
}),
() => enabled()
? Div({ class: 'alert alert-success' }, 'Notifications are ON')
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
? div({ class: 'alert alert-success' }, 'Notifications are ON')
: div({ class: 'alert alert-soft' }, 'Notifications are OFF')
]);
};
mount(ToggleDemo, '#demo-toggle');
@@ -103,7 +103,7 @@ mount(ToggleDemo, '#demo-toggle');
```javascript
const DisabledDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
Checkbox({
label: 'Checked and disabled',
value: true,
@@ -148,13 +148,13 @@ const MultipleDemo = () => {
selectAll(allSelected);
};
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
Checkbox({
label: 'Select all',
value: selectAll,
onclick: () => toggleAll(!selectAll())
}),
Div({ class: 'divider my-1' }),
div({ class: 'divider my-1' }),
...options.map(opt => Checkbox({
label: opt.label,
value: opt.selected,
@@ -163,7 +163,7 @@ const MultipleDemo = () => {
updateSelectAll();
}
})),
Div({ class: 'mt-2 text-sm opacity-70' }, () => {
div({ class: 'mt-2 text-sm opacity-70' }, () => {
const count = options.filter(opt => opt.selected()).length;
return `${count} of ${options.length} selected`;
})
@@ -213,8 +213,8 @@ const VariantsDemo = () => {
const variant2 = $(false);
const variant3 = $(true);
return Div({ class: 'flex flex-col gap-3' }, [
Div({ class: 'flex items-center gap-4' }, [
return div({ class: 'flex flex-col gap-3' }, [
div({ class: 'flex items-center gap-4' }, [
Checkbox({
label: 'Primary',
value: variant1,
@@ -228,7 +228,7 @@ const VariantsDemo = () => {
onclick: () => variant2(!variant2())
})
]),
Div({ class: 'flex items-center gap-4' }, [
div({ class: 'flex items-center gap-4' }, [
Checkbox({
label: 'Accent',
value: variant3,
@@ -262,14 +262,14 @@ const FormDemo = () => {
const weekly = $(false);
const monthly = $(true);
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
Checkbox({
label: 'Subscribe to newsletter',
value: subscribe,
onclick: () => subscribe(!subscribe())
}),
() => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
() => subscribe() ? div({ class: 'ml-6 flex flex-col gap-2' }, [
Checkbox({
label: 'Weekly updates',
value: weekly,
@@ -282,9 +282,9 @@ const FormDemo = () => {
})
]) : null,
() => subscribe() && (weekly() || monthly())
? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
? div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
: subscribe()
? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
? div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
: null
]);
};