fix: Dropdown and Popover manual padding

nuxt · Apr 12, 2022 · 2e09939 · 2e09939 · vercel · Apr 12, 2022
1 parent 8bc4902
commit 2e09939
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/docs/pages/examples.vue b/docs/pages/examples.vue
@@ -100,7 +100,7 @@
         Popover:
       </div>
 
-      <UPopover panel-class="w-screen max-w-sm px-4 sm:px-0 transform" wrapper-class="inline-block relative">
+      <UPopover mode="hover" wrapper-class="inline-block relative">
         <template #default="{ open }">
           <UButton variant="secondary" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
             Open popover!

diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
@@ -131,7 +131,7 @@ export default {
       modifiers: [{
         name: 'offset',
         options: {
-          offset: [0, 8]
+          offset: 0
         }
       },
       {
@@ -221,7 +221,7 @@ export default {
       closeTimeout = closeTimeout || setTimeout(() => {
         menuApi.value.closeMenu && menuApi.value.closeMenu()
         closeTimeout = null
-      }, 200)
+      }, 0)
     }
 
     return {

diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
@@ -58,7 +58,7 @@ export default {
     },
     containerClass: {
       type: String,
-      default: 'z-10'
+      default: 'z-10 py-2'
     },
     panelClass: {
       type: String,
@@ -72,7 +72,7 @@ export default {
       modifiers: [{
         name: 'offset',
         options: {
-          offset: [0, 8]
+          offset: 0
         }
       },
       {
@@ -144,7 +144,7 @@ export default {
       closeTimeout = closeTimeout || setTimeout(() => {
         popoverApi.value.closePopover && popoverApi.value.closePopover()
         closeTimeout = null
-      }, 200)
+      }, 0)
     }
 
     return {

diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
@@ -292,7 +292,7 @@ const alertDialog = {
 
 const dropdown = {
   wrapper: 'relative inline-flex text-left',
-  container: 'w-48 z-20',
+  container: 'w-48 z-20 py-2',
   base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg',
   item: {
     base: 'group flex items-center gap-3 px-4 py-2 text-sm w-full',