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

68
docs/components/rating.md
View File

@@ -45,13 +45,13 @@ Rating supports all **daisyUI Rating classes**:
const BasicDemo = () => {
const rating = $(3);
return Div({ class: 'flex flex-col gap-2 items-center' }, [
return div({ class: 'flex flex-col gap-2 items-center' }, [
Rating({
value: rating,
count: 5,
onchange: (value) => rating(value)
}),
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
]);
};
mount(BasicDemo, '#demo-basic');
@@ -70,14 +70,14 @@ mount(BasicDemo, '#demo-basic');
const HeartDemo = () => {
const rating = $(4);
return Div({ class: 'flex flex-col gap-2 items-center' }, [
return div({ class: 'flex flex-col gap-2 items-center' }, [
Rating({
value: rating,
count: 5,
mask: 'mask-heart',
onchange: (value) => rating(value)
}),
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
]);
};
mount(HeartDemo, '#demo-heart');
@@ -96,14 +96,14 @@ mount(HeartDemo, '#demo-heart');
const Star2Demo = () => {
const rating = $(2);
return Div({ class: 'flex flex-col gap-2 items-center' }, [
return div({ class: 'flex flex-col gap-2 items-center' }, [
Rating({
value: rating,
count: 5,
mask: 'mask-star-2',
onchange: (value) => rating(value)
}),
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
]);
};
mount(Star2Demo, '#demo-star2');
@@ -122,13 +122,13 @@ mount(Star2Demo, '#demo-star2');
const ReadonlyDemo = () => {
const rating = $(4.5);
return Div({ class: 'flex flex-col gap-2 items-center' }, [
return div({ class: 'flex flex-col gap-2 items-center' }, [
Rating({
value: rating,
count: 5,
readonly: true
}),
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
]);
};
mount(ReadonlyDemo, '#demo-readonly');
@@ -151,27 +151,27 @@ const ReviewDemo = () => {
const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10;
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'text-lg font-bold' }, 'Product Review'),
Div({ class: 'flex flex-col gap-2' }, [
Div({ class: 'flex justify-between items-center' }, [
Span({ class: 'text-sm w-24' }, 'Quality:'),
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'text-lg font-bold' }, 'Product Review'),
div({ class: 'flex flex-col gap-2' }, [
div({ class: 'flex justify-between items-center' }, [
span({ class: 'text-sm w-24' }, 'Quality:'),
Rating({
value: quality,
count: 5,
onchange: (v) => quality(v)
})
]),
Div({ class: 'flex justify-between items-center' }, [
Span({ class: 'text-sm w-24' }, 'Price:'),
div({ class: 'flex justify-between items-center' }, [
span({ class: 'text-sm w-24' }, 'Price:'),
Rating({
value: price,
count: 5,
onchange: (v) => price(v)
})
]),
Div({ class: 'flex justify-between items-center' }, [
Span({ class: 'text-sm w-24' }, 'Support:'),
div({ class: 'flex justify-between items-center' }, [
span({ class: 'text-sm w-24' }, 'Support:'),
Rating({
value: support,
count: 5,
@@ -179,10 +179,10 @@ const ReviewDemo = () => {
})
])
]),
Div({ class: 'divider my-1' }),
Div({ class: 'flex justify-between items-center' }, [
Span({ class: 'font-bold' }, 'Overall:'),
Div({ class: 'text-2xl font-bold text-primary' }, () => average())
div({ class: 'divider my-1' }),
div({ class: 'flex justify-between items-center' }, [
span({ class: 'font-bold' }, 'Overall:'),
div({ class: 'text-2xl font-bold text-primary' }, () => average())
])
]);
};
@@ -200,21 +200,21 @@ mount(ReviewDemo, '#demo-review');
```javascript
const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-6' }, [
Div({ class: 'text-center' }, [
Div({ class: 'text-sm mb-2' }, 'Mask Star'),
return div({ class: 'flex flex-col gap-6' }, [
div({ class: 'text-center' }, [
div({ class: 'text-sm mb-2' }, 'Mask Star'),
Rating({ value: $(3), count: 5, mask: 'mask-star' })
]),
Div({ class: 'text-center' }, [
Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)'),
div({ class: 'text-center' }, [
div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)'),
Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
]),
Div({ class: 'text-center' }, [
Div({ class: 'text-sm mb-2' }, 'Mask Heart'),
div({ class: 'text-center' }, [
div({ class: 'text-sm mb-2' }, 'Mask Heart'),
Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' })
]),
Div({ class: 'text-center' }, [
Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
div({ class: 'text-center' }, [
div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
Rating({ value: $(3.5), count: 5, readonly: true })
])
]);
@@ -243,9 +243,9 @@ const FeedbackDemo = () => {
5: 'Excellent! 🎉'
};
return Div({ class: 'flex flex-col gap-4 items-center' }, [
Div({ class: 'text-center' }, [
Div({ class: 'text-sm mb-2' }, 'How was your experience?'),
return div({ class: 'flex flex-col gap-4 items-center' }, [
div({ class: 'text-center' }, [
div({ class: 'text-sm mb-2' }, 'How was your experience?'),
Rating({
value: rating,
count: 5,
@@ -262,7 +262,7 @@ const FeedbackDemo = () => {
})
]),
() => rating() > 0
? Div({ class: 'alert alert-soft text-center' }, [
? div({ class: 'alert alert-soft text-center' }, [
messages[rating()] || `Rating: ${rating()} stars`
])
: null