| 1 | <script setup lang="ts"> |
| 2 | import { useVModel } from '@vueuse/core' |
| 3 | |
| 4 | const props = defineProps<{ |
| 5 | value: number |
| 6 | label?: string |
| 7 | active?: boolean |
| 8 | controls?: boolean |
| 9 | }>() |
| 10 | |
| 11 | const emit = defineEmits<{ |
| 12 | (e: any): void |
| 13 | }>() |
| 14 | const num = useVModel(props, 'value', emit) |
| 15 | </script> |
| 16 | |
| 17 | <template> |
| 18 | <div |
| 19 | class="w-16 h-16 rounded-xl text-white overflow-hidden" |
| 20 | style="background-image: radial-gradient(farthest-corner at 0 0, var(--un-gradient-from) 30%, var(--un-gradient-to))" |
| 21 | > |
| 22 | <div |
| 23 | style="background-image: radial-gradient(farthest-corner at 0 0, var(--un-gradient-from) 30%, var(--un-gradient-to))" |
| 24 | class="absolute w-full h-full from-orange-400 to-red-400 opacity-0 transition duration-400 ease-in pointer-events-none" |
| 25 | :class="active ? '!opacity-100 !duration-10' : ''" |
| 26 | /> |
| 27 | <slot> |
| 28 | <div class="absolute left-0 top-0 px-2 py-0.5 opacity-40"> |
| 29 | {{ label }} |
| 30 | </div> |
| 31 | <div class="absolute w-full h-full flex z-10"> |
| 32 | <div class="m-auto text-2xl leading-0.8em" :class="controls ? 'pl-2' : ''"> |
| 33 | {{ value }} |
| 34 | </div> |
| 35 | <div v-if="controls" class="grid grid-rows-2 text-xl"> |
| 36 | <mdi:menu-up-outline |
| 37 | class="mt-auto opacity-50 hover:opacity-100 pr-1 cursor-pointer" |
| 38 | @click="num += 1" |
| 39 | /> |
| 40 | <mdi:menu-down-outline |
| 41 | class="opacity-50 hover:opacity-100 pr-1 cursor-pointer" |
| 42 | @click="num -= 1" |
| 43 | /> |
| 44 | </div> |
| 45 | </div> |
| 46 | </slot> |
| 47 | </div> |
| 48 | </template> |
| 49 |