opendesk

1<template>
2  <div class="flex w-max flex-row-reverse gap-1">
3    <svg
4      v-for="i in [1, 0.8, 0.6, 0.4, 0.2]"
5      :key="i"
6      class="-all peer fill-ink-gray-3"
7      :class="{
8        ['fill-ink-yellow-5']: i <= rating,
9        'cursor-pointer': !static,
10        'hover:fill-ink-yellow-2': i > rating && !static,
11        'peer-hover:fill-ink-yellow-2': i > rating && !static,
12      }"
13      height="16px"
14      width="16px"
15      version="1.1"
16      xmlns="http://www.w3.org/2000/svg"
17      xmlns:xlink="http://www.w3.org/1999/xlink"
18      viewBox="0 0 47.94 47.94"
19      xml:space="preserve"
20      @click="updateRating(i)"
21    >
22      <path
23        d="M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757
24          c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042
25          c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685
26          c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528
27          c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956
28          C22.602,0.567,25.338,0.567,26.285,2.486z"
29      />
30    </svg>
31  </div>
32</template>
33
34<script setup lang="ts">
35interface P {
36  rating: number;
37  static?: boolean;
38}
39
40const props = withDefaults(defineProps<P>(), {
41  static: true,
42});
43
44const modelValue = defineModel();
45
46function updateRating(value: number) {
47  if (props.static) return;
48  modelValue.value = value;
49}
50</script>
51