Rating ​

<script setup lang="ts">
import { ref } from 'vue'
import { Rating } from 'frappe-ui'

const value = ref(0)
</script>

<template>
  <Rating v-model="value" label="Rate this article" />
</template>

<script setup lang="ts">
import { Rating } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-4 items-start">
    <Rating size="sm" :model-value="3" label="Small" />
    <Rating size="md" :model-value="3" label="Medium" />
    <Rating size="lg" :model-value="3" label="Large" />
    <Rating size="xl" :model-value="3" label="Extra large" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Rating } from 'frappe-ui'

const value = ref(3.5)
</script>

<template>
  <Rating v-model="value" :step="0.5" label="Half-star rating" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Rating } from 'frappe-ui'
import LucideHeart from '~icons/lucide/heart'
import LucideFlame from '~icons/lucide/flame'

const heart = ref(3.5)
const flame = ref(3)
const zap = ref(3)
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <Rating v-model="heart" :step="0.5" label="Hearts (red, half-step)">
      <template #icon="{ state }">
        <LucideHeart
          fill="currentColor"
          class="size-5"
          :class="{
            'text-red-500': state === 'filled',
            'text-red-200': state === 'preview',
            'text-red-300': state === 'removing',
            'text-gray-300 dark:text-gray-600': state === 'empty',
          }"
        />
      </template>
    </Rating>
    <Rating v-model="flame" :icon="LucideFlame" label="Flames (component)" />
    <Rating v-model="zap" icon="lucide-zap" label="Zap (lucide-* string)" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Rating } from 'frappe-ui'

const mood = ref(3)
const moods = ['😞', '🙁', '😐', '🙂', '😊']

const score = ref(2)
const scores = ['💩', '👎', '👌', '👍', '🔥']
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <Rating v-model="mood" label="How was your day?" size="lg">
      <template #icon="{ index, value, previewValue }">
        <span
          class="text-2xl leading-none transition-transform"
          :class="
            index === (previewValue ?? value) ? 'scale-110' : 'opacity-40'
          "
        >
          {{ moods[index - 1] }}
        </span>
      </template>
    </Rating>
    <Rating v-model="score" label="Rate this meal" size="lg">
      <template #icon="{ index, value, previewValue }">
        <span
          class="text-2xl leading-none"
          :class="
            index === (previewValue ?? value) ? '' : 'grayscale opacity-50'
          "
        >
          {{ scores[index - 1] }}
        </span>
      </template>
    </Rating>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Checkbox, Rating } from 'frappe-ui'

const value = ref(0)
const required = ref(true)
const showError = ref(false)

const error = computed(() =>
  showError.value ? 'Please rate before submitting.' : '',
)
</script>

<template>
  <div class="flex gap-8 items-center">
    <Rating
      v-model="value"
      label="Quality"
      description="How would you rate the experience?"
      :error="error"
      :required="required"
    />
    <div
      class="flex flex-col gap-2 items-start border-l border-outline-gray-2 pl-6"
    >
      <Checkbox v-model="required" label="required" />
      <Checkbox v-model="showError" label="show error" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Rating } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-4 items-start">
    <Rating label="Default" :model-value="3" />
    <Rating label="Required" required :model-value="3" />
    <Rating label="Disabled" disabled :model-value="3" />
    <Rating
      label="With error"
      error="Please rate before submitting."
      :model-value="3"
    />
  </div>
</template>