Dev cleaning (#106)
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
|
||||
import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import SelectContent from './SelectContent.vue'
|
||||
import SelectGroup from './SelectGroup.vue'
|
||||
import SelectItem from './SelectItem.vue'
|
||||
import SelectSeparator from './SelectSeparator.vue'
|
||||
import SelectTrigger from './SelectTrigger.vue'
|
||||
import SelectValue from './SelectValue.vue'
|
||||
|
||||
interface Item {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const props = defineProps<
|
||||
SelectRootProps & {
|
||||
items: Item[]
|
||||
iconName?: string
|
||||
placeholder?: string
|
||||
label?: string
|
||||
separator?: boolean
|
||||
}
|
||||
>()
|
||||
const emits = defineEmits<SelectRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SelectRoot v-bind="forwarded">
|
||||
<SelectTrigger :icon-name="iconName" class="flex justify-between items-center">
|
||||
<SelectValue :placeholder="placeholder" />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent class="rounded border bg-white">
|
||||
<SelectGroup>
|
||||
<SelectLabel v-if="label" class="px-2 py-1 text-sm font-semibold">
|
||||
{{ label }}
|
||||
</SelectLabel>
|
||||
|
||||
<SelectItem
|
||||
v-for="item in items"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
class="cursor-pointer px-2 py-1 hover:bg-gray-100"
|
||||
>
|
||||
{{ item.label }}
|
||||
</SelectItem>
|
||||
|
||||
<SelectSeparator v-if="separator" class="my-1 h-px bg-gray-200" />
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</SelectRoot>
|
||||
</template>
|
||||
Reference in New Issue
Block a user