BUILD BEFORE CHANGE NEW COMPONENTS WITH UI FUNCTION

src/ui/Rating.js

@@ -0,0 +1,41 @@
+// 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);
+            }
+          }
+        },
+      });
+    })
+  );
+};