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

309
docs/components/rating.md
View File

@@ -8,13 +8,27 @@ Star rating component with customizable count, icons, and read-only mode.
## Props
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- |
| `value` | `number \| Signal<number>` | `0` | Current rating value |
| `count` | `number \| Signal<number>` | `5` | Number of stars/items |
| `mask` | `string` | `'mask-star'` | Mask shape (mask-star, mask-star-2, mask-heart) |
| `readonly` | `boolean \| Signal<boolean>` | `false` | Disable interaction |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `value` | `number \| Signal<number>` | `0` | Current rating value |
| `count` | `number \| Signal<number>` | `5` | Number of stars/items |
| `mask` | `string` | `'mask-star'` | Mask shape (`mask-star`, `mask-star-2`, `mask-heart`) |
| `readonly` | `boolean \| Signal<boolean>` | `false` | Disable interaction |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `onchange` | `function` | `-` | Callback when rating changes |
## Styling
Rating supports all **daisyUI Rating classes**:
| Category | Keywords | Description |
| :--- | :--- | :--- |
| Base | `rating` | Base rating container |
| Color | `rating-primary`, `rating-secondary`, `rating-accent`, `rating-info`, `rating-success`, `rating-warning`, `rating-error` | Rating color variants |
| Size | `rating-xs`, `rating-sm`, `rating-md`, `rating-lg` | Rating scale |
| Mask | `mask-star`, `mask-star-2`, `mask-heart` | Rating icon shapes |
> For further details, check the [daisyUI Rating Documentation](https://daisyui.com/components/rating) – Full reference for CSS classes.
## Live Examples
@@ -120,40 +134,6 @@ const ReadonlyDemo = () => {
$mount(ReadonlyDemo, '#demo-readonly');
```
### Custom Count
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
</div>
</div>
```javascript
const CustomDemo = () => {
const rating = $(3);
const count = $(10);
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Div({ class: 'flex items-center gap-4' }, [
Span({ class: 'text-sm' }, 'Number of stars:'),
Input({
type: 'number',
value: count,
class: 'input input-sm w-24'
})
]),
Rating({
value: rating,
count: count,
onchange: (value) => rating(value)
}),
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
]);
};
$mount(CustomDemo, '#demo-custom');
```
### Product Review
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
@@ -179,7 +159,6 @@ const ReviewDemo = () => {
Rating({
value: quality,
count: 5,
size: 'sm',
onchange: (v) => quality(v)
})
]),
@@ -188,7 +167,6 @@ const ReviewDemo = () => {
Rating({
value: price,
count: 5,
size: 'sm',
onchange: (v) => price(v)
})
]),
@@ -197,7 +175,6 @@ const ReviewDemo = () => {
Rating({
value: support,
count: 5,
size: 'sm',
onchange: (v) => support(v)
})
])
@@ -229,7 +206,7 @@ const VariantsDemo = () => {
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-sm mb-2' }, 'Mask Star 2 (yellow)'),
Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
]),
Div({ class: 'text-center' }, [
@@ -257,7 +234,6 @@ $mount(VariantsDemo, '#demo-variants');
```javascript
const FeedbackDemo = () => {
const rating = $(0);
const feedback = $(false);
const messages = {
1: 'Very disappointed 😞',
@@ -275,7 +251,6 @@ const FeedbackDemo = () => {
count: 5,
onchange: (value) => {
rating(value);
feedback(true);
if (value >= 4) {
Toast('Thank you for your positive feedback!', 'alert-success', 2000);
} else if (value <= 2) {
@@ -294,242 +269,4 @@ const FeedbackDemo = () => {
]);
};
$mount(FeedbackDemo, '#demo-feedback');
```
<script>
(function() {
const initRatingExamples = () => {
// 1. Basic Rating
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => {
const rating = $(3);
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`)
]);
};
$mount(BasicDemo, basicTarget);
}
// 2. Heart Rating
const heartTarget = document.querySelector('#demo-heart');
if (heartTarget && !heartTarget.hasChildNodes()) {
const HeartDemo = () => {
const rating = $(4);
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`)
]);
};
$mount(HeartDemo, heartTarget);
}
// 3. Star with Outline
const star2Target = document.querySelector('#demo-star2');
if (star2Target && !star2Target.hasChildNodes()) {
const Star2Demo = () => {
const rating = $(2);
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`)
]);
};
$mount(Star2Demo, star2Target);
}
// 4. Read-only Rating
const readonlyTarget = document.querySelector('#demo-readonly');
if (readonlyTarget && !readonlyTarget.hasChildNodes()) {
const ReadonlyDemo = () => {
const rating = $(4.5);
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)')
]);
};
$mount(ReadonlyDemo, readonlyTarget);
}
// 5. Custom Count
const customTarget = document.querySelector('#demo-custom');
if (customTarget && !customTarget.hasChildNodes()) {
const CustomDemo = () => {
const rating = $(3);
const count = $(10);
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Div({ class: 'flex items-center gap-4' }, [
Span({ class: 'text-sm' }, 'Number of stars:'),
Input({
type: 'number',
value: count,
class: 'input input-sm w-24',
oninput: (e) => count(parseInt(e.target.value) || 1)
})
]),
Rating({
value: rating,
count: count,
onchange: (value) => rating(value)
}),
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
]);
};
$mount(CustomDemo, customTarget);
}
// 6. Product Review
const reviewTarget = document.querySelector('#demo-review');
if (reviewTarget && !reviewTarget.hasChildNodes()) {
const ReviewDemo = () => {
const quality = $(4);
const price = $(3);
const support = $(5);
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:'),
Rating({
value: quality,
count: 5,
size: 'sm',
onchange: (v) => quality(v)
})
]),
Div({ class: 'flex justify-between items-center' }, [
Span({ class: 'text-sm w-24' }, 'Price:'),
Rating({
value: price,
count: 5,
size: 'sm',
onchange: (v) => price(v)
})
]),
Div({ class: 'flex justify-between items-center' }, [
Span({ class: 'text-sm w-24' }, 'Support:'),
Rating({
value: support,
count: 5,
size: 'sm',
onchange: (v) => support(v)
})
])
]),
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())
])
]);
};
$mount(ReviewDemo, reviewTarget);
}
// 7. All Variants
const variantsTarget = document.querySelector('#demo-variants');
if (variantsTarget && !variantsTarget.hasChildNodes()) {
const VariantsDemo = () => {
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)' ),
Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
]),
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)'),
Rating({ value: $(3.5), count: 5, readonly: true })
])
]);
};
$mount(VariantsDemo, variantsTarget);
}
// 8. Interactive Feedback
const feedbackTarget = document.querySelector('#demo-feedback');
if (feedbackTarget && !feedbackTarget.hasChildNodes()) {
const FeedbackDemo = () => {
const rating = $(0);
const feedback = $(false);
const messages = {
1: 'Very disappointed 😞',
2: 'Could be better 😕',
3: 'Good 👍',
4: 'Very good 😊',
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?'),
Rating({
value: rating,
count: 5,
onchange: (value) => {
rating(value);
feedback(true);
if (value >= 4) {
Toast('Thank you for your positive feedback!', 'alert-success', 2000);
} else if (value <= 2) {
Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000);
} else {
Toast('Thanks for your rating!', 'alert-info', 2000);
}
}
})
]),
() => rating() > 0
? Div({ class: 'alert alert-soft text-center' }, [
messages[rating()] || `Rating: ${rating()} stars`
])
: null
]);
};
$mount(FeedbackDemo, feedbackTarget);
}
};
initRatingExamples();
if (window.$docsify) {
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
hook.doneEach(initRatingExamples);
});
}
})();
</script>
```