sigpro-ui/src/components/Rating.js

// components/Rating.js
import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js";

/**
 * Rating component
 * 
 * daisyUI classes used:
 * - rating, rating-half, rating-hidden
 * - mask, mask-star, mask-star-2, mask-heart, mask-circle
 * - pointer-events-none
 */
export const Rating = (props) => {
  const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;

  const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;

  return Tag(
    "div",
    {
      ...rest,
      class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className),
    },
    Array.from({ length: val(count) }, (_, i) => {
      const starValue = i + 1;
      return Tag("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);
            }
          }
        },
      });
    })
  );
};