41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
// components/Rating.js
|
|
import { $html } from "sigpro";
|
|
import { val, ui, joinClass } from "../core/utils.js";
|
|
|
|
export const Rating = (props) => {
|
|
const { ui: uiProps, class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
|
|
|
|
const dynamicClasses = [
|
|
ui('rating', uiProps),
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
|
|
|
|
return $html(
|
|
"div",
|
|
{
|
|
...rest,
|
|
class: () => joinClass(`rating ${val(readonly) ? "pointer-events-none" : ""}`, dynamicClasses),
|
|
},
|
|
Array.from({ length: val(count) }, (_, i) => {
|
|
const starValue = i + 1;
|
|
return $html("input", {
|
|
type: "radio",
|
|
name: ratingGroup,
|
|
class: `mask ${mask}`,
|
|
checked: () => Math.round(val(value)) === starValue,
|
|
onchange: () => {
|
|
if (!val(readonly)) {
|
|
if (typeof onchange === "function") {
|
|
onchange(starValue);
|
|
}
|
|
else if (typeof value === "function") {
|
|
value(starValue);
|
|
}
|
|
}
|
|
},
|
|
});
|
|
})
|
|
);
|
|
}; |