Quasar Rating element for NiceGUI

main.py

#!/usr/bin/env python3
from nicegui import Client, ui
from rating import Rating


@ui.page("/")
async def main(client: Client):
    def score_changed(event):
        stars = int(event['args'])
        wid_rating.props(f"value={stars}")
        lbl_rating.set_text(f"Rating: {stars}")

    with ui.column().classes('absolute-center items-center'):
        wid_rating = Rating(
            max=5,
            value=3,
            icon=["😕", "😐", "🙂", "😀", "🤩"],
            on_change=score_changed,
            color="primary",
            size="3em",
        )
        lbl_rating = ui.label(f"Rating: 3")

ui.run()

rating.js

export default {
    props: {
      name: String,
      icon: String,
      icon_selected: String,
      value: Number,
    },
    template: `<q-rating :name="name" :icon="icon" :icon-selected="icon_selected" :model-value="value" @click="handle_click"/>`,
    setup(props, { emit }) {
      const handle_click = () => {
        emit('click')
      }
      return {
        handle_click
      }
    }
  }

rating.py

from typing import Optional, Callable, Union
from nicegui.dependencies import register_component
from nicegui.element import Element

register_component("rating", __file__, "rating.js")


class Rating(Element):
    def __init__(
        self,
        *,
        name: Optional[str] = None,
        icon: Optional[Union[str, list[str]]] = None,
        value: Optional[int] = 0,
        icon_selected: Optional[Union[str, list[str]]] = None,
        icon_half: Optional[Union[str, list[str]]] = None,
        icon_aria_label: Optional[str] = None,
        max: Optional[int] = None,
        readonly: bool = False,
        disable: bool = False,
        size: Optional[str] = None,
        color: Optional[Union[str, list[str]]] = None,
        color_selected: Optional[Union[str, list[str]]] = None,
        color_half: Optional[Union[str, list[str]]] = None,
        no_dimming: bool = False,
        on_change: Optional[Callable] = None,
        on_click: Optional[Callable] = None,
    ) -> None:
        super().__init__("rating")
        if name:
            self._props["name"] = name
        if icon:
            self._props["icon"] = icon
        if icon_selected:
            self._props["icon-selected"] = icon_selected
        if value:
            self._props["value"] = value
        if icon_half:
            self._props["icon-half"] = icon_half
        if icon_aria_label:
            self._props["icon-aria-label"] = icon_aria_label
        if max:
            self._props["max"] = max
        if readonly:
            self._props["readonly"] = readonly
        if disable:
            self._props["disable"] = disable
        if size:
            self._props["size"] = size
        if color:
            self._props["color"] = color
        if color_selected:
            self._props["color-selected"] = color_selected
        if color_half:
            self._props["color-half"] = color_half
        if no_dimming:
            self._props["no-dimming"] = no_dimming
        if on_change:
            self.on("update:model-value", on_change)
        if on_click:
            self.on("click", on_click)

requirements.txt

nicegui==1.2.21