From fb65cdcef886f2a1cfb6a1a49d8e965779debf39 Mon Sep 17 00:00:00 2001
From: Alexandr <a.pashkevich22@gmail.com>
Date: Mon, 11 Jul 2022 15:49:24 +0300
Subject: [PATCH] feat: gap dropdown

---
 .../examples/DropdownPlacementExample.vue         | 15 +++++++++++++--
 .../Dropdown/composables/useDropdownClasses.ts    | 10 ++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/docs/guide/dropdown/examples/DropdownPlacementExample.vue b/docs/guide/dropdown/examples/DropdownPlacementExample.vue
index 6f69e78..3714ebd 100644
--- a/docs/guide/dropdown/examples/DropdownPlacementExample.vue
+++ b/docs/guide/dropdown/examples/DropdownPlacementExample.vue
@@ -12,8 +12,19 @@
           </template>
         </Button>
       </template>
-      <div class="p-2">
-        Padding content
+      <div class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+        <a href="#" aria-current="true" class="block w-full px-4 py-2 text-white bg-blue-700 border-b border-gray-200 rounded-t-lg cursor-pointer dark:bg-gray-800 dark:border-gray-600">
+          Profile
+        </a>
+        <a href="#" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+          Settings
+        </a>
+        <a href="#" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+          Messages
+        </a>
+        <a href="#" class="block w-full px-4 py-2 rounded-b-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+          Download
+        </a>
       </div>
     </dropdown>
     <dropdown placement="right" text="Right">
diff --git a/src/components/Dropdown/composables/useDropdownClasses.ts b/src/components/Dropdown/composables/useDropdownClasses.ts
index 44e15ae..deca50d 100644
--- a/src/components/Dropdown/composables/useDropdownClasses.ts
+++ b/src/components/Dropdown/composables/useDropdownClasses.ts
@@ -5,6 +5,8 @@ import type { DropdownPlacement } from '../types'
 
 const defaultDropdownClasses = 'absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700'
 
+const defaultGapInPx = 8
+
 const placementDropdownClasses: Record<DropdownPlacement, string> = {
     bottom: '',
     left: 'top-0',
@@ -20,16 +22,16 @@ export type UseDropdownClassesProps = {
 
 const placementCalculators: Record<DropdownPlacement, (rect: DOMRect) => string> = {
     bottom(rect: DOMRect): string {
-        return `bottom: -${rect.height}px;`
+        return `bottom: -${rect.height + defaultGapInPx}px;`
     },
     left(rect: DOMRect): string {
-        return `left: -${rect.width}px;`
+        return `left: -${rect.width + defaultGapInPx}px;`
     },
     right(rect: DOMRect): string {
-        return `right: -${rect.width}px;`
+        return `right: -${rect.width + defaultGapInPx}px;`
     },
     top(rect: DOMRect): string {
-        return `top: -${rect.height}px;`
+        return `top: -${rect.height + defaultGapInPx}px;`
     },
 
 }