66 lines
2.8 KiB
Vue
66 lines
2.8 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">
|
|
<Icon v-if="item.icon" :icon="item.icon" />
|
|
<span>{{ item.label }}</span>
|
|
<span v-if="item.kbd"> {{ item.kbd }} </span>
|
|
</DropdownMenuItem>
|
|
</template>
|
|
|
|
<template v-else-if="item.type === 'checkbox'">
|
|
<DropdownMenuCheckboxItem :disabled="item.disabled" :textValue="item.label" @update:checked="item.select">
|
|
<DropdownMenuItemIndicator>
|
|
<Icon icon="radix-icons:check" />
|
|
</DropdownMenuItemIndicator>
|
|
<span>{{ item.label }}</span>
|
|
<span v-if="item.kbd"> {{ item.kbd }} </span>
|
|
</DropdownMenuCheckboxItem>
|
|
</template>
|
|
|
|
<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>
|
|
<Icon v-if="item.icon" :icon="item.icon" />
|
|
<span>{{ item.label }}</span>
|
|
<Icon icon="radix-icons:chevron-right" />
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownContentRender :options="item.items" />
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
</template>
|
|
|
|
<template v-if="item.type === 'group'">
|
|
<DropdownMenuLabel>{{ item.label }}</DropdownMenuLabel>
|
|
<DropdownContetnRender :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/dist/iconify.js';
|
|
|
|
const { options } = defineProps<{
|
|
options: DropdownOption[]
|
|
}>();
|
|
</script> |