heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated dropdown

Browse Source
This commit is contained in:
Mamalizz
2025-02-06 22:56:20 +03:30
parent 8c227f7cb5
commit f3bb6c3480
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Dropdown.vue
+5 -6
View File
@@ -2,7 +2,7 @@
// types
type Props = {
items: DropdownItem[];
items?: DropdownItem[];
};
// props
@@ -21,9 +21,10 @@ const toggleState = ref(false);
</DropdownMenuTrigger>
<DropdownMenuPortal>
<slot v-if="!!$slots.content" name="content" />
<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"
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
@@ -33,7 +34,7 @@ const toggleState = ref(false);
: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"
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 }}
@@ -48,8 +49,6 @@ const toggleState = ref(false);
<DropdownMenuArrow class="fill-white stroke-gray-300" />
</DropdownMenuContent>
<slot v-else name="content" />
</DropdownMenuPortal>
</DropdownMenuRoot>
</template>