mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-05 09:12:27 +08:00
44e7117d4a
- 更新 avatar-image, badge, checkbox, input, switch 等组件 - 优化 dialog, pagination, select-item, tabs 等组件 - 调整 table-card, refresh-button 组件
39 lines
1.0 KiB
Vue
39 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { SelectItem as SelectItemPrimitive, SelectItemIndicator, SelectItemText } from 'radix-vue'
|
|
import { Check } from 'lucide-vue-next'
|
|
import { cn } from '@/lib/utils'
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
class?: string
|
|
value: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const itemClass = computed(() =>
|
|
cn(
|
|
'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-primary/10 focus:bg-primary/15 text-foreground transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
|
props.class
|
|
)
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<SelectItemPrimitive
|
|
:class="itemClass"
|
|
:value="value"
|
|
:disabled="disabled"
|
|
>
|
|
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
<SelectItemIndicator>
|
|
<Check class="h-4 w-4" />
|
|
</SelectItemIndicator>
|
|
</span>
|
|
<SelectItemText>
|
|
<slot />
|
|
</SelectItemText>
|
|
</SelectItemPrimitive>
|
|
</template>
|