feat: gap dropdown

docs/guide/dropdown/examples/DropdownPlacementExample.vue

@@ -12,8 +12,19 @@
           </template>
         </Button>
       </template>
-      <div class="p-2">
+      <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">
-        Padding content
+        <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">

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;`
     },
 
 }