Rating

import * as React from "react";
const ratingFixture = {
  id: "rating",
  value: 4,
  label: "Rate this trowel",
  readOnlyValue: 4.5,
  readOnlySize: "sm",
} satisfies {
  id: string;
  value: number;
  label: string;
  readOnlyValue: number;
  readOnlySize: "sm" | "md" | "lg";
};
 
import { Rating } from "@grassroot/ui-react";
 
export default function RatingDemo() {
  const [value, setValue] = React.useState(ratingFixture.value);
  return (
    <div>
      <Rating value={value} onChange={setValue} label={ratingFixture.label} />
      <Rating value={ratingFixture.readOnlyValue} readOnly size={ratingFixture.readOnlySize} />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const ratingFixture = {
  id: "rating",
  value: 4,
  label: "Rate this trowel",
  readOnlyValue: 4.5,
  readOnlySize: "sm",
} satisfies {
  id: string;
  value: number;
  label: string;
  readOnlyValue: number;
  readOnlySize: "sm" | "md" | "lg";
};
 
import { Rating } from "@grassroot/ui-vue";
 
const value = ref(ratingFixture.value);
</script>
 
<template>
  <div>
    <Rating v-model="value" :label="ratingFixture.label" />
    <Rating
      :model-value="ratingFixture.readOnlyValue"
      read-only
      :size="ratingFixture.readOnlySize"
    />
  </div>
</template>

import { Component, signal } from "@angular/core";
const ratingFixture = {
  id: "rating",
  value: 4,
  label: "Rate this trowel",
  readOnlyValue: 4.5,
  readOnlySize: "sm",
} satisfies {
  id: string;
  value: number;
  label: string;
  readOnlyValue: number;
  readOnlySize: "sm" | "md" | "lg";
};
 
import { GrassrootRating } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-rating-demo",
  standalone: true,
  imports: [GrassrootRating],
  template: `
    <div>
      <grassroot-rating
        [value]="value()"
        (valueChange)="value.set($event)"
        [label]="fixture.label"
      />
      <grassroot-rating
        [value]="fixture.readOnlyValue"
        [readOnly]="true"
        [size]="fixture.readOnlySize"
      />
    </div>
  `,
})
export class RatingDemoComponent {
  protected readonly fixture = ratingFixture;
  readonly value = signal(ratingFixture.value);
}
 
export default RatingDemoComponent;

<script lang="ts">
  import { Rating } from "@grassroot/ui-svelte";
  const ratingFixture = {
    id: "rating",
    value: 4,
    label: "Rate this trowel",
    readOnlyValue: 4.5,
    readOnlySize: "sm",
  } satisfies {
    id: string;
    value: number;
    label: string;
    readOnlyValue: number;
    readOnlySize: "sm" | "md" | "lg";
  };
 
  let value = $state(ratingFixture.value);
</script>
 
<div>
  <Rating {value} onChange={(next) => (value = next)} label={ratingFixture.label} /><Rating
    value={ratingFixture.readOnlyValue}
    readOnly
    size={ratingFixture.readOnlySize}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Rating } from "@grassroot/ui-solid";
const ratingFixture = {
  id: "rating",
  value: 4,
  label: "Rate this trowel",
  readOnlyValue: 4.5,
  readOnlySize: "sm",
} satisfies {
  id: string;
  value: number;
  label: string;
  readOnlyValue: number;
  readOnlySize: "sm" | "md" | "lg";
};
 
export default function RatingDemo() {
  const [value, setValue] = createSignal(ratingFixture.value);
 
  return (
    <div>
      <Rating value={value()} onChange={setValue} label={ratingFixture.label} />
      <Rating value={ratingFixture.readOnlyValue} readOnly size={ratingFixture.readOnlySize} />
    </div>
  );
}