Rating 评分

<script setup lang="ts">
  import { ref } from 'vue'
  import { Rating, Stack, Text } from '@hina-ui/vue'

  const score = ref(0)
</script>

<template>
  <Stack gap="sm" align="start">
    <Rating v-model="score" aria-label="评分" />
    <Text tone="muted" size="sm">值：{{ score }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Rating, Stack, Text } from '@hina-ui/vue'

  const score = ref(2.5)
</script>

<template>
  <Stack gap="sm" align="start">
    <Rating v-model="score" :step="0.5" aria-label="评分" />
    <Text tone="muted" size="sm">值：{{ score }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Inline, Rating, Stack, Text } from '@hina-ui/vue'

  const score = ref(7)
</script>

<template>
  <Stack gap="md" align="start">
    <Inline gap="sm">
      <Rating v-model="score" :max="10" :stars="5" :step="0.5" aria-label="评分" />
      <Text tone="muted" size="sm">{{ score }} / 10</Text>
    </Inline>
    <Inline gap="sm">
      <Rating :model-value="8.6" :max="10" :stars="5" readonly />
      <Text tone="muted" size="sm">8.6 / 10 · 只读</Text>
    </Inline>
  </Stack>
</template>

<script setup lang="ts">
  import { Inline, Rating, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="sm">
    <Rating :model-value="4.3" readonly />
    <Text tone="muted" size="sm">4.3 分，共 128 人评分</Text>
  </Inline>
</template>

<script setup lang="ts">
  import { Rating, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack align="start">
    <Rating :model-value="3" size="sm" aria-label="小号" />
    <Rating :model-value="3" size="md" aria-label="中号" />
    <Rating :model-value="3" size="lg" aria-label="大号" />
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Rating, Stack } from '@hina-ui/vue'

  const fixed = ref(3)
</script>

<template>
  <Stack align="start">
    <Rating :model-value="3" disabled aria-label="已禁用" />
    <Rating v-model="fixed" :clearable="false" aria-label="不可清零" />
  </Stack>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Form, FormField, Rating, Text } from '@hina-ui/vue'

  const schema = v.object({
    score: v.pipe(v.number(), v.minValue(1, '请先打分')),
  })

  const values = reactive({ score: 0 })
  const saved = ref('')

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = JSON.stringify(data)
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="save">
    <FormField name="score" label="评分" required>
      <Rating v-model="values.score" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">提交评价</Button>
    <Text v-if="saved" tone="muted" size="sm">已提交：{{ saved }}</Text>
  </Form>
</template>