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

58
docs/components/select.md
View File

@@ -49,9 +49,9 @@ Select supports all **daisyUI Select classes**:
const BasicDemo = () => {
const selected = $('apple');
return Div({ class: 'form-control w-full max-w-xs' }, [
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Choose a fruit')),
Select({
return div({ class: 'form-control w-full max-w-xs' }, [
label({ class: 'label' }, span({ class: 'label-text' }, 'Choose a fruit')),
select({
class: 'select select-bordered w-full',
value: selected,
onchange: (e) => selected(e.target.value)
@@ -82,10 +82,10 @@ mount(BasicDemo, '#demo-basic');
```javascript
const ReactiveDemo = () => {
const selected = $('small');
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Div({ class: 'form-control w-full max-w-xs' }, [
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Select size')),
Select({
return div({ class: 'flex flex-col gap-4 w-full' }, [
div({ class: 'form-control w-full max-w-xs' }, [
label({ class: 'label' }, span({ class: 'label-text' }, 'Select size')),
select({
class: 'select select-bordered w-full',
value: selected,
onchange: (e) => selected(e.target.value)
@@ -99,7 +99,7 @@ const ReactiveDemo = () => {
})
])
]),
Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
]);
};
mount(ReactiveDemo, '#demo-reactive');
@@ -116,9 +116,9 @@ mount(ReactiveDemo, '#demo-reactive');
```javascript
const DisabledDemo = () => {
return Div({ class: 'form-control w-full max-w-xs' }, [
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Country (disabled)')),
Select({
return div({ class: 'form-control w-full max-w-xs' }, [
label({ class: 'label' }, span({ class: 'label-text' }, 'Country (disabled)')),
select({
class: 'select select-bordered w-full',
value: 'mx',
disabled: true
@@ -161,10 +161,10 @@ const DynamicDemo = () => {
]
};
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Div({ class: 'form-control w-full max-w-xs' }, [
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Category')),
Select({
return div({ class: 'flex flex-col gap-4 w-full' }, [
div({ class: 'form-control w-full max-w-xs' }, [
label({ class: 'label' }, span({ class: 'label-text' }, 'Category')),
select({
class: 'select select-bordered w-full',
value: category,
onchange: (e) => {
@@ -180,9 +180,9 @@ const DynamicDemo = () => {
})
])
]),
Div({ class: 'form-control w-full max-w-xs' }, [
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Item')),
Select({
div({ class: 'form-control w-full max-w-xs' }, [
label({ class: 'label' }, span({ class: 'label-text' }, 'Item')),
select({
class: 'select select-bordered w-full',
value: selectedItem,
onchange: (e) => selectedItem(e.target.value)
@@ -192,7 +192,7 @@ const DynamicDemo = () => {
})
])
]),
() => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
() => selectedItem() ? div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
]);
};
mount(DynamicDemo, '#demo-dynamic');
@@ -213,10 +213,10 @@ const VariantsDemo = () => {
const secondary = $('option2');
const ghost = $('');
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'form-control w-full max-w-xs' }, [
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Primary Select')),
Select({
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'form-control w-full max-w-xs' }, [
label({ class: 'label' }, span({ class: 'label-text' }, 'Primary Select')),
select({
class: 'select select-primary w-full',
value: primary,
onchange: (e) => primary(e.target.value)
@@ -230,9 +230,9 @@ const VariantsDemo = () => {
})
])
]),
Div({ class: 'form-control w-full max-w-xs' }, [
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Secondary Select')),
Select({
div({ class: 'form-control w-full max-w-xs' }, [
label({ class: 'label' }, span({ class: 'label-text' }, 'Secondary Select')),
select({
class: 'select select-secondary w-full',
value: secondary,
onchange: (e) => secondary(e.target.value)
@@ -245,9 +245,9 @@ const VariantsDemo = () => {
})
])
]),
Div({ class: 'form-control w-full max-w-xs' }, [
Label({ class: 'label' }, Span({ class: 'label-text' }, 'Ghost Select')),
Select({
div({ class: 'form-control w-full max-w-xs' }, [
label({ class: 'label' }, span({ class: 'label-text' }, 'Ghost Select')),
select({
class: 'select select-ghost w-full',
value: ghost,
onchange: (e) => ghost(e.target.value)