73 lines
4.6 KiB
Vue
73 lines
4.6 KiB
Vue
<template>
|
|
<template v-for="(item, idx) of options">
|
|
<template v-if="item.type === 'item'">
|
|
<DropdownMenuItem :disabled="item.disabled" :textValue="item.label" @select="item.select" :class="{'!pe-1': item.kbd}" class="cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
|
|
<Icon v-if="item.icon" :icon="item.icon" class="absolute left-1.5" />
|
|
<div class="flex flex-1 justify-between">
|
|
<span>{{ item.label }}</span>
|
|
<span v-if="item.kbd" class="mx-2 text-xs font-mono text-light-70 dark:text-dark-70 relative top-0.5"> {{ item.kbd }} </span>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</template>
|
|
|
|
<template v-else-if="item.type === 'checkbox'">
|
|
<DropdownMenuCheckboxItem :disabled="item.disabled" :textValue="item.label" v-model:checked="item.checked" @update:checked="item.select" class="cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
|
|
<span class="w-6 flex items-center justify-center">
|
|
<DropdownMenuItemIndicator>
|
|
<Icon icon="radix-icons:check" />
|
|
</DropdownMenuItemIndicator>
|
|
</span>
|
|
<div class="flex flex-1 justify-between">
|
|
<span>{{ item.label }}</span>
|
|
<span v-if="item.kbd" class="mx-2 text-xs font-mono text-light-70 dark:text-dark-70 relative top-0.5"> {{ item.kbd }} </span>
|
|
</div>
|
|
</DropdownMenuCheckboxItem>
|
|
</template>
|
|
|
|
<!-- TODO -->
|
|
<template v-if="item.type === 'radio'">
|
|
<DropdownMenuLabel>{{ item.label }}</DropdownMenuLabel>
|
|
<DropdownMenuRadioGroup @update:model-value="item.change">
|
|
<DropdownMenuRadioItem v-for="option in item.items" :disabled="(option as any)?.disabled ?? false" :value="(option as any)?.value ?? option">
|
|
<DropdownMenuItemIndicator>
|
|
<Icon icon="radix-icons:dot-filled" />
|
|
</DropdownMenuItemIndicator>
|
|
<span>{{ (option as any)?.label || option }}</span>
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
|
|
<DropdownMenuSeparator v-if="idx !== options.length - 1" />
|
|
</template>
|
|
|
|
<template v-if="item.type === 'submenu'">
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger class="group cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
|
|
<Icon v-if="item.icon" :icon="item.icon" />
|
|
<span>{{ item.label }}</span>
|
|
<Icon icon="radix-icons:chevron-right" class="absolute right-1" />
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">
|
|
<DropdownContentRender :options="item.items" />
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
</template>
|
|
|
|
<template v-if="item.type === 'group'">
|
|
<DropdownMenuLabel class="text-light-70 dark:text-dark-70 text-sm text-center pt-1">{{ item.label }}</DropdownMenuLabel>
|
|
<DropdownContentRender :options="item.items" />
|
|
|
|
<DropdownMenuSeparator v-if="idx !== options.length - 1" />
|
|
</template>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { DropdownOption } from './DropdownMenu.vue';
|
|
import { Icon } from '@iconify/vue';
|
|
|
|
const { options } = defineProps<{
|
|
options: DropdownOption[]
|
|
}>();
|
|
</script> |