added dropdown component

2025-02-05 02:02:51 +03:30
parent f280495eac
commit 0de5cf62ec
1 changed files with 55 additions and 0 deletions
@@ -0,0 +1,55 @@
+<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>
+            <DropdownMenuContent
+                v-if="items"
+                class="min-w-[220px] w-full outline-none bg-white border border-gray-300 rounded-xl font-iran-yekan-x p-2 shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] 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-100 rounded-md 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>
+
+            <slot v-else name="content" />
+        </DropdownMenuPortal>
+    </DropdownMenuRoot>
+</template>