42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
items: string[]
|
|
label: string
|
|
display?: string
|
|
warning?: boolean
|
|
}>()
|
|
|
|
const model = defineModel<string>({ required: true })
|
|
|
|
const options = computed(() => props.items.map((item) => ({ label: item, value: item })))
|
|
const borderClass = computed(() => (props.warning ? 'border-warning' : 'border-accented'))
|
|
const shown = computed(() => props.display ?? model.value)
|
|
</script>
|
|
|
|
<template>
|
|
<USelectMenu
|
|
:model-value="model"
|
|
:items="options"
|
|
value-key="value"
|
|
label-key="label"
|
|
:search-input="false"
|
|
:aria-label="label"
|
|
color="neutral"
|
|
variant="outline"
|
|
class="w-full"
|
|
:ui="{
|
|
base: `h-11 rounded-none border ${borderClass} bg-default px-2.5 text-sm ring-0 data-[state=open]:border-primary data-[state=open]:ring-1 data-[state=open]:ring-primary lg:h-8`,
|
|
trailingIcon: 'size-3.5 text-muted',
|
|
content: 'min-w-(--reka-combobox-trigger-width)',
|
|
item: 'min-h-11 text-sm lg:min-h-8',
|
|
itemLeadingIcon: 'hidden',
|
|
itemTrailingIcon: 'hidden',
|
|
}"
|
|
@update:model-value="model = $event as string"
|
|
>
|
|
<span class="truncate text-highlighted">{{ shown }}</span>
|
|
</USelectMenu>
|
|
</template>
|