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

60
docs/components/radio.md
View File

@@ -45,7 +45,7 @@ Radio supports all **daisyUI Radio classes**:
const BasicDemo = () => {
const selected = $('option1');
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Option 1',
name: 'basic-group',
@@ -67,7 +67,7 @@ const BasicDemo = () => {
inputValue: 'option3',
onclick: () => selected('option3')
}),
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
]);
};
mount(BasicDemo, '#demo-basic');
@@ -86,7 +86,7 @@ mount(BasicDemo, '#demo-basic');
const TooltipDemo = () => {
const selected = $('light');
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Light mode',
name: 'theme-group',
@@ -121,7 +121,7 @@ mount(TooltipDemo, '#demo-tooltip');
const DisabledDemo = () => {
const selected = $('enabled');
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Enabled option',
name: 'disabled-group',
@@ -168,9 +168,9 @@ const ReactiveDemo = () => {
{ value: 'red', label: 'Red' }
];
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'text-sm font-bold' }, 'Select size'),
Div({ class: 'flex gap-4' }, sizes.map(s =>
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'text-sm font-bold' }, 'Select size'),
div({ class: 'flex gap-4' }, sizes.map(s =>
Radio({
label: s.label,
name: 'size-group',
@@ -179,8 +179,8 @@ const ReactiveDemo = () => {
onclick: () => size(s.value)
})
)),
Div({ class: 'text-sm font-bold mt-2' }, 'Select color'),
Div({ class: 'flex gap-4' }, colors.map(c =>
div({ class: 'text-sm font-bold mt-2' }, 'Select color'),
div({ class: 'flex gap-4' }, colors.map(c =>
Radio({
label: c.label,
name: 'color-group',
@@ -189,7 +189,7 @@ const ReactiveDemo = () => {
onclick: () => color(c.value)
})
)),
Div({
div({
class: 'mt-4 p-4 rounded-lg text-center transition-all',
style: () => {
const sizeMap = { small: 'text-sm', medium: 'text-base', large: 'text-lg' };
@@ -215,9 +215,9 @@ mount(ReactiveDemo, '#demo-reactive');
const PaymentDemo = () => {
const method = $('credit');
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'text-sm font-bold' }, 'Payment method'),
Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'text-sm font-bold' }, 'Payment method'),
div({ class: 'flex flex-col gap-3' }, [
Radio({
label: '💳 Credit Card',
name: 'payment-group',
@@ -240,7 +240,7 @@ const PaymentDemo = () => {
onclick: () => method('wallet')
})
]),
Div({ class: 'alert alert-info mt-2' }, () => {
div({ class: 'alert alert-info mt-2' }, () => {
const messages = {
credit: 'You selected Credit Card. Enter your card details.',
bank: 'You selected Bank Transfer. Use the provided account number.',
@@ -268,10 +268,10 @@ const VariantsDemo = () => {
const secondary = $('secondary1');
const accent = $('accent1');
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'card bg-base-200 p-4' }, [
Div({ class: 'text-sm font-bold mb-2' }, 'Primary variant'),
Div({ class: 'flex gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'card bg-base-200 p-4' }, [
div({ class: 'text-sm font-bold mb-2' }, 'Primary variant'),
div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'primary-group',
@@ -290,9 +290,9 @@ const VariantsDemo = () => {
})
])
]),
Div({ class: 'card bg-base-200 p-4' }, [
Div({ class: 'text-sm font-bold mb-2' }, 'Secondary variant'),
Div({ class: 'flex gap-4' }, [
div({ class: 'card bg-base-200 p-4' }, [
div({ class: 'text-sm font-bold mb-2' }, 'Secondary variant'),
div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'secondary-group',
@@ -311,9 +311,9 @@ const VariantsDemo = () => {
})
])
]),
Div({ class: 'card bg-base-200 p-4' }, [
Div({ class: 'text-sm font-bold mb-2' }, 'Accent variant'),
Div({ class: 'flex gap-4' }, [
div({ class: 'card bg-base-200 p-4' }, [
div({ class: 'text-sm font-bold mb-2' }, 'Accent variant'),
div({ class: 'flex gap-4' }, [
Radio({
label: 'Option A',
name: 'accent-group',
@@ -364,8 +364,8 @@ const DynamicDemo = () => {
]
};
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'flex gap-4' }, [
Radio({
label: 'Cars',
name: 'category-group',
@@ -387,9 +387,9 @@ const DynamicDemo = () => {
}
})
]),
Div({ class: 'divider my-1' }),
Div({ class: 'text-sm font-bold' }, () => `Select ${category()}`),
Div({ class: 'flex flex-col gap-2' }, () =>
div({ class: 'divider my-1' }),
div({ class: 'text-sm font-bold' }, () => `Select ${category()}`),
div({ class: 'flex flex-col gap-2' }, () =>
options[category()].map(opt =>
Radio({
label: opt.label,
@@ -401,7 +401,7 @@ const DynamicDemo = () => {
)
),
() => selected()
? Div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
? div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
: null
]);
};