Mamalizz
55 lines
2.0 KiB
Vue
55 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
items?: DropdownItem[];
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
|
|
// state
|
|
|
|
const toggleState = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenuRoot v-model:open="toggleState" dir="rtl">
|
|
<DropdownMenuTrigger>
|
|
<slot name="trigger" />
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuPortal>
|
|
<slot v-if="!!$slots.content" name="content" />
|
|
<DropdownMenuContent
|
|
v-else
|
|
class="min-w-[220px] w-full divide-y divide-gray-300 outline-none bg-gray-50 border border-gray-300 rounded-2xl font-iran-yekan-x p-2 shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-10000"
|
|
:side-offset="5"
|
|
>
|
|
<DropdownMenuItem
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
@click="item.onClick"
|
|
:class="
|
|
item.itemClass ? item.itemClass : 'hover:!text-black'
|
|
"
|
|
class="group text-xs leading-none text-black hover:!bg-gray-200 cursor-pointer rounded-lg flex items-center justify-between py-3 px-1.5 relative select-none outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-black data-[highlighted]:text-white"
|
|
>
|
|
<span>
|
|
{{ item.title }}
|
|
</span>
|
|
<Icon
|
|
:name="item.icon"
|
|
:class="item.iconClass"
|
|
size="16"
|
|
class="**:stroke-black"
|
|
/>
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuArrow class="fill-white stroke-gray-300" />
|
|
</DropdownMenuContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuRoot>
|
|
</template>
|