feat(Modal/Slideover): add actions slot

playground/app/pages/components/slideover.vue

@@ -141,5 +141,17 @@ function openSlideover() {
         <UButton label="Close with scoped slot close" @click="close" />
       </template>
     </USlideover>
+
+    <USlideover title="Slideover with header-actions slot" description="This slideover has a header-actions slot that can be used to add actions to the header.">
+      <UButton label="Open with header-actions slot" color="neutral" variant="outline" />
+
+      <template #header-actions>
+        <UButton color="neutral" variant="ghost" class="absolute top-4 end-12" icon="i-lucide:expand" />
+      </template>
+
+      <template #body>
+        <Placeholder class="h-full w-full" />
+      </template>
+    </USlideover>
   </div>
 </template>

src/runtime/components/Slideover.vue

@@ -60,14 +60,15 @@ export interface SlideoverEmits extends DialogRootEmits {
 }
 
 export interface SlideoverSlots {
-  default(props: { open: boolean }): any
-  content(props: { close: () => void }): any
-  header(props: { close: () => void }): any
-  title(props?: {}): any
-  description(props?: {}): any
-  close(props: { close: () => void, ui: { [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string } }): any
-  body(props: { close: () => void }): any
-  footer(props: { close: () => void }): any
+  'default'(props: { open: boolean }): any
+  'content'(props: { close: () => void }): any
+  'header'(props: { close: () => void }): any
+  'header-actions'(props: {}): any
+  'title'(props?: {}): any
+  'description'(props?: {}): any
+  'close'(props: { close: () => void, ui: { [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string } }): any
+  'body'(props: { close: () => void }): any
+  'footer'(props: { close: () => void }): any
 }
 </script>
 
@@ -174,6 +175,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
                 </DialogDescription>
               </div>
 
+              <slot name="header-actions" />
+
               <DialogClose v-if="props.close || !!slots.close" as-child>
                 <slot name="close" :close="close" :ui="ui">
                   <UButton