41 lines
2.0 KiB
Vue
41 lines
2.0 KiB
Vue
<template>
|
|
<Label class="py-4 flex flex-row justify-center items-center">
|
|
<span>{{ label }}</span>
|
|
<SelectRoot v-model="model">
|
|
<SelectTrigger :disabled="disabled" class="mx-4 inline-flex min-w-[160px] items-center justify-between px-3 text-sm font-semibold leading-none h-8 gap-1
|
|
bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none data-[placeholder]:font-normal
|
|
data-[placeholder]:text-light-50 dark:data-[placeholder]:text-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
|
|
hover:border-light-50 dark:hover:border-dark-50">
|
|
<SelectValue :placeholder="placeholder" />
|
|
<Icon icon="radix-icons:caret-down" class="h-4 w-4" />
|
|
</SelectTrigger>
|
|
|
|
<SelectPortal :disabled="disabled">
|
|
<SelectContent :position="position"
|
|
class="min-w-[160px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-40">
|
|
<SelectScrollUpButton>
|
|
<Icon icon="radix-icons:chevron-up" />
|
|
</SelectScrollUpButton>
|
|
<SelectViewport>
|
|
<slot />
|
|
</SelectViewport>
|
|
<SelectScrollDownButton>
|
|
<Icon icon="radix-icons:chevron-down" />
|
|
</SelectScrollDownButton>
|
|
</SelectContent>
|
|
</SelectPortal>
|
|
</SelectRoot>
|
|
</Label>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { SelectContent, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport } from 'radix-vue'
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
const { placeholder, disabled = false, position = 'popper', label } = defineProps<{
|
|
placeholder?: string
|
|
disabled?: boolean
|
|
position?: 'item-aligned' | 'popper'
|
|
label?: string
|
|
}>();
|
|
const model = defineModel<string>();
|
|
</script> |