chore: split props for Dropdown, ContextMenu and Popover

docs/pages/examples.vue

@@ -104,7 +104,7 @@
         </template>
 
         <template #panel>
-          <div class="p-4 u-bg-white border u-border-gray-200 rounded-md">
+          <div class="p-2">
             Panel
           </div>
         </template>
@@ -135,9 +135,9 @@
 
       <UCard class="relative" body-class="h-64" @click="isContextMenuOpen = false" @contextmenu.prevent="openContextMenu">
         <UContextMenu v-model="isContextMenuOpen" :virtual-element="virtualElement" width-class="w-48">
-          <UCard @click.stop>
+          <div class="p-2">
             Menu
-          </UCard>
+          </div>
         </UContextMenu>
       </UCard>
     </div>

src/runtime/components/elements/Dropdown.vue

@@ -17,7 +17,7 @@
 
     <div v-if="open && items.length" ref="container" :class="[containerClass, widthClass]" @mouseover="onMouseOver">
       <transition appear v-bind="transitionClass">
-        <MenuItems :class="baseClass" static>
+        <MenuItems :class="[baseClass, divideClass, ringClass, roundedClass, shadowClass, backgroundClass]" static>
           <div v-for="(subItems, index) of items" :key="index" :class="groupClass">
             <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
               <Component
@@ -104,6 +104,26 @@ const props = defineProps({
     type: String,
     default: () => $ui.dropdown.width
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.dropdown.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.dropdown.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.dropdown.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.dropdown.ring
+  },
+  divideClass: {
+    type: String,
+    default: () => $ui.dropdown.divide
+  },
   baseClass: {
     type: String,
     default: () => $ui.dropdown.base

src/runtime/components/overlays/ContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isOpen" ref="container" :class="[containerClass, widthClass]">
     <transition appear v-bind="transitionClass">
-      <div :class="baseClass">
+      <div :class="[baseClass, ringClass, roundedClass, shadowClass, backgroundClass]">
         <slot />
       </div>
     </transition>
@@ -38,6 +38,22 @@ const props = defineProps({
     type: String,
     default: () => $ui.contextMenu.width
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.contextMenu.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.contextMenu.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.contextMenu.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.contextMenu.ring
+  },
   baseClass: {
     type: String,
     default: () => $ui.contextMenu.base

src/runtime/components/overlays/Popover.vue

@@ -17,7 +17,7 @@
 
     <div v-if="open" ref="container" :class="[containerClass, widthClass]" @mouseover="onMouseOver">
       <transition appear v-bind="transitionClass">
-        <PopoverPanel :class="baseClass" static>
+        <PopoverPanel :class="[baseClass, ringClass, roundedClass, shadowClass, backgroundClass]" static>
           <slot name="panel" :open="open" :close="close" />
         </PopoverPanel>
       </transition>
@@ -62,6 +62,22 @@ const props = defineProps({
     type: String,
     default: () => $ui.popover.base
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.popover.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.popover.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.popover.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.popover.ring
+  },
   transitionClass: {
     type: Object,
     default: () => $ui.popover.transition

src/runtime/presets/default.ts

@@ -366,7 +366,12 @@ export default function defaultPreset (variantColors: string[]) {
     wrapper: 'relative inline-flex text-left',
     container: 'z-20',
     width: 'w-48',
-    base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg focus:outline-none',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'focus:outline-none',
+    divide: 'divide-y u-divide-gray-100',
     group: 'py-1',
     item: {
       base: 'group flex items-center gap-3 px-4 py-2 text-sm w-full',
@@ -538,7 +543,11 @@ export default function defaultPreset (variantColors: string[]) {
     wrapper: 'relative',
     container: 'z-20',
     width: '',
-    base: '',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'overflow-hidden focus:outline-none',
     transition: {
       enterActiveClass: 'transition ease-out duration-200',
       enterFromClass: 'opacity-0 translate-y-1',
@@ -556,7 +565,11 @@ export default function defaultPreset (variantColors: string[]) {
     wrapper: 'relative',
     container: 'z-20',
     width: '',
-    base: '',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'overflow-hidden focus:outline-none',
     transition: {
       enterActiveClass: 'transition ease-out duration-200',
       enterFromClass: 'opacity-0 translate-y-1',