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

Docs Updated

Browse Source
This commit is contained in:
natxocc
2026-04-03 01:41:07 +02:00
parent b0629ef3d0
commit 257107e198
42 changed files with 1529 additions and 6255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

417
docs/components/radio.md
View File

@@ -8,16 +8,27 @@ Radio button component with label, tooltip support, and reactive group selection
## Props
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
| `label` | `string` | `-` | Label text for the radio button |
| `value` | `string \| Signal<string>` | `-` | Selected value signal for the group |
| `radioValue` | `string` | `-` | Value of this radio button |
| `name` | `string` | `-` | Group name (all radios in group should share this) |
| `tooltip` | `string` | `-` | Tooltip text on hover |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `onclick` | `function` | `-` | Click event handler |
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `label` | `string` | `-` | Label text for the radio button |
| `value` | `string \| Signal<string>` | `-` | Selected value signal for the group |
| `inputValue` | `string` | `-` | Value of this radio button |
| `name` | `string` | `-` | Group name (all radios in group should share this) |
| `tooltip` | `string` | `-` | Tooltip text on hover |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `onclick` | `function` | `-` | Click event handler |
## Styling
Radio supports all **daisyUI Radio classes**:
| Category | Keywords | Description |
| :--- | :--- | :--- |
| Color | `radio-primary`, `radio-secondary`, `radio-accent`, `radio-info`, `radio-success`, `radio-warning`, `radio-error` | Radio color variants |
| Size | `radio-xs`, `radio-sm`, `radio-md`, `radio-lg` | Radio scale |
> For further details, check the [daisyUI Radio Documentation](https://daisyui.com/components/radio) – Full reference for CSS classes.
## Live Examples
@@ -39,21 +50,21 @@ const BasicDemo = () => {
label: 'Option 1',
name: 'basic-group',
value: selected,
radioValue: 'option1',
inputValue: 'option1',
onclick: () => selected('option1')
}),
Radio({
label: 'Option 2',
name: 'basic-group',
value: selected,
radioValue: 'option2',
inputValue: 'option2',
onclick: () => selected('option2')
}),
Radio({
label: 'Option 3',
name: 'basic-group',
value: selected,
radioValue: 'option3',
inputValue: 'option3',
onclick: () => selected('option3')
}),
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
@@ -80,7 +91,7 @@ const TooltipDemo = () => {
label: 'Light mode',
name: 'theme-group',
value: selected,
radioValue: 'light',
inputValue: 'light',
tooltip: 'Light theme with white background',
onclick: () => selected('light')
}),
@@ -88,7 +99,7 @@ const TooltipDemo = () => {
label: 'Dark mode',
name: 'theme-group',
value: selected,
radioValue: 'dark',
inputValue: 'dark',
tooltip: 'Dark theme with black background',
onclick: () => selected('dark')
})
@@ -115,14 +126,14 @@ const DisabledDemo = () => {
label: 'Enabled option',
name: 'disabled-group',
value: selected,
radioValue: 'enabled',
inputValue: 'enabled',
onclick: () => selected('enabled')
}),
Radio({
label: 'Disabled option (cannot select)',
name: 'disabled-group',
value: selected,
radioValue: 'disabled',
inputValue: 'disabled',
disabled: true,
onclick: () => selected('disabled')
})
@@ -164,7 +175,7 @@ const ReactiveDemo = () => {
label: s.label,
name: 'size-group',
value: size,
radioValue: s.value,
inputValue: s.value,
onclick: () => size(s.value)
})
)),
@@ -174,7 +185,7 @@ const ReactiveDemo = () => {
label: c.label,
name: 'color-group',
value: color,
radioValue: c.value,
inputValue: c.value,
onclick: () => color(c.value)
})
)),
@@ -211,21 +222,21 @@ const PaymentDemo = () => {
label: '💳 Credit Card',
name: 'payment-group',
value: method,
radioValue: 'credit',
inputValue: 'credit',
onclick: () => method('credit')
}),
Radio({
label: '🏦 Bank Transfer',
name: 'payment-group',
value: method,
radioValue: 'bank',
inputValue: 'bank',
onclick: () => method('bank')
}),
Radio({
label: '📱 Digital Wallet',
name: 'payment-group',
value: method,
radioValue: 'wallet',
inputValue: 'wallet',
onclick: () => method('wallet')
})
]),
@@ -265,7 +276,7 @@ const VariantsDemo = () => {
label: 'Option A',
name: 'primary-group',
value: primary,
radioValue: 'primary1',
inputValue: 'primary1',
class: 'radio-primary',
onclick: () => primary('primary1')
}),
@@ -273,7 +284,7 @@ const VariantsDemo = () => {
label: 'Option B',
name: 'primary-group',
value: primary,
radioValue: 'primary2',
inputValue: 'primary2',
class: 'radio-primary',
onclick: () => primary('primary2')
})
@@ -286,7 +297,7 @@ const VariantsDemo = () => {
label: 'Option A',
name: 'secondary-group',
value: secondary,
radioValue: 'secondary1',
inputValue: 'secondary1',
class: 'radio-secondary',
onclick: () => secondary('secondary1')
}),
@@ -294,7 +305,7 @@ const VariantsDemo = () => {
label: 'Option B',
name: 'secondary-group',
value: secondary,
radioValue: 'secondary2',
inputValue: 'secondary2',
class: 'radio-secondary',
onclick: () => secondary('secondary2')
})
@@ -307,7 +318,7 @@ const VariantsDemo = () => {
label: 'Option A',
name: 'accent-group',
value: accent,
radioValue: 'accent1',
inputValue: 'accent1',
class: 'radio-accent',
onclick: () => accent('accent1')
}),
@@ -315,7 +326,7 @@ const VariantsDemo = () => {
label: 'Option B',
name: 'accent-group',
value: accent,
radioValue: 'accent2',
inputValue: 'accent2',
class: 'radio-accent',
onclick: () => accent('accent2')
})
@@ -359,7 +370,7 @@ const DynamicDemo = () => {
label: 'Cars',
name: 'category-group',
value: category,
radioValue: 'cars',
inputValue: 'cars',
onclick: () => {
category('cars');
selected('');
@@ -369,7 +380,7 @@ const DynamicDemo = () => {
label: 'Colors',
name: 'category-group',
value: category,
radioValue: 'colors',
inputValue: 'colors',
onclick: () => {
category('colors');
selected('');
@@ -384,7 +395,7 @@ const DynamicDemo = () => {
label: opt.label,
name: 'dynamic-option-group',
value: selected,
radioValue: opt.value,
inputValue: opt.value,
onclick: () => selected(opt.value)
})
)
@@ -395,346 +406,4 @@ const DynamicDemo = () => {
]);
};
$mount(DynamicDemo, '#demo-dynamic');
```
<script>
(function() {
const initRadioExamples = () => {
// 1. Basic Radio Group
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => {
const selected = $('option1');
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Option 1',
name: 'basic-group',
value: selected,
radioValue: 'option1',
onclick: () => selected('option1')
}),
Radio({
label: 'Option 2',
name: 'basic-group',
value: selected,
radioValue: 'option2',
onclick: () => selected('option2')
}),
Radio({
label: 'Option 3',
name: 'basic-group',
value: selected,
radioValue: 'option3',
onclick: () => selected('option3')
}),
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
]);
};
$mount(BasicDemo, basicTarget);
}
// 2. With Tooltip
const tooltipTarget = document.querySelector('#demo-tooltip');
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
const TooltipDemo = () => {
const selected = $('light');
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Light mode',
name: 'theme-group',
value: selected,
radioValue: 'light',
tooltip: 'Light theme with white background',
onclick: () => selected('light')
}),
Radio({
label: 'Dark mode',
name: 'theme-group',
value: selected,
radioValue: 'dark',
tooltip: 'Dark theme with black background',
onclick: () => selected('dark')
})
]);
};
$mount(TooltipDemo, tooltipTarget);
}
// 3. Disabled State
const disabledTarget = document.querySelector('#demo-disabled');
if (disabledTarget && !disabledTarget.hasChildNodes()) {
const DisabledDemo = () => {
const selected = $('enabled');
return Div({ class: 'flex flex-col gap-3' }, [
Radio({
label: 'Enabled option',
name: 'disabled-group',
value: selected,
radioValue: 'enabled',
onclick: () => selected('enabled')
}),
Radio({
label: 'Disabled option (cannot select)',
name: 'disabled-group',
value: selected,
radioValue: 'disabled',
disabled: true,
onclick: () => selected('disabled')
})
]);
};
$mount(DisabledDemo, disabledTarget);
}
// 4. Reactive Preview
const reactiveTarget = document.querySelector('#demo-reactive');
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
const ReactiveDemo = () => {
const size = $('medium');
const color = $('blue');
const sizes = [
{ value: 'small', label: 'Small' },
{ value: 'medium', label: 'Medium' },
{ value: 'large', label: 'Large' }
];
const colors = [
{ value: 'blue', label: 'Blue' },
{ value: 'green', label: 'Green' },
{ 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 =>
Radio({
label: s.label,
name: 'size-group',
value: size,
radioValue: s.value,
onclick: () => size(s.value)
})
)),
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',
value: color,
radioValue: c.value,
onclick: () => color(c.value)
})
)),
Div({
class: 'mt-4 p-4 rounded-lg text-center transition-all',
style: () => {
const sizeMap = { small: 'text-sm', medium: 'text-base', large: 'text-lg' };
const colorMap = { blue: '#3b82f6', green: '#10b981', red: '#ef4444' };
return `background-color: ${colorMap[color()]}; color: white; ${sizeMap[size()]}`;
}
}, () => `${size()} ${color()} preview`)
]);
};
$mount(ReactiveDemo, reactiveTarget);
}
// 5. Payment Method Selection
const paymentTarget = document.querySelector('#demo-payment');
if (paymentTarget && !paymentTarget.hasChildNodes()) {
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' }, [
Radio({
label: '💳 Credit Card',
name: 'payment-group',
value: method,
radioValue: 'credit',
onclick: () => method('credit')
}),
Radio({
label: '🏦 Bank Transfer',
name: 'payment-group',
value: method,
radioValue: 'bank',
onclick: () => method('bank')
}),
Radio({
label: '📱 Digital Wallet',
name: 'payment-group',
value: method,
radioValue: 'wallet',
onclick: () => method('wallet')
})
]),
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.',
wallet: 'You selected Digital Wallet. Scan the QR code to pay.'
};
return messages[method()];
})
]);
};
$mount(PaymentDemo, paymentTarget);
}
// 6. All Variants
const variantsTarget = document.querySelector('#demo-variants');
if (variantsTarget && !variantsTarget.hasChildNodes()) {
const VariantsDemo = () => {
const primary = $('primary1');
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' }, [
Radio({
label: 'Option A',
name: 'primary-group',
value: primary,
radioValue: 'primary1',
class: 'radio-primary',
onclick: () => primary('primary1')
}),
Radio({
label: 'Option B',
name: 'primary-group',
value: primary,
radioValue: 'primary2',
class: 'radio-primary',
onclick: () => primary('primary2')
})
])
]),
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',
value: secondary,
radioValue: 'secondary1',
class: 'radio-secondary',
onclick: () => secondary('secondary1')
}),
Radio({
label: 'Option B',
name: 'secondary-group',
value: secondary,
radioValue: 'secondary2',
class: 'radio-secondary',
onclick: () => secondary('secondary2')
})
])
]),
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',
value: accent,
radioValue: 'accent1',
class: 'radio-accent',
onclick: () => accent('accent1')
}),
Radio({
label: 'Option B',
name: 'accent-group',
value: accent,
radioValue: 'accent2',
class: 'radio-accent',
onclick: () => accent('accent2')
})
])
])
]);
};
$mount(VariantsDemo, variantsTarget);
}
// 7. Dynamic Options
const dynamicTarget = document.querySelector('#demo-dynamic');
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
const DynamicDemo = () => {
const category = $('cars');
const selected = $('');
const options = {
cars: [
{ value: 'sedan', label: 'Sedan' },
{ value: 'suv', label: 'SUV' },
{ value: 'sports', label: 'Sports' }
],
colors: [
{ value: 'red', label: 'Red' },
{ value: 'blue', label: 'Blue' },
{ value: 'black', label: 'Black' }
]
};
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex gap-4' }, [
Radio({
label: 'Cars',
name: 'category-group',
value: category,
radioValue: 'cars',
onclick: () => {
category('cars');
selected('');
}
}),
Radio({
label: 'Colors',
name: 'category-group',
value: category,
radioValue: 'colors',
onclick: () => {
category('colors');
selected('');
}
})
]),
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,
name: 'dynamic-option-group',
value: selected,
radioValue: opt.value,
onclick: () => selected(opt.value)
})
)
),
() => selected()
? Div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
: null
]);
};
$mount(DynamicDemo, dynamicTarget);
}
};
initRadioExamples();
if (window.$docsify) {
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
hook.doneEach(initRadioExamples);
});
}
})();
</script>
```