Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat(Slideover): add a header-actions slot
  • Loading branch information
Barbapapazes committed Jun 16, 2025
commit 3e7d05884959ebd97c1d4292db0d6ff2370ecf96
12 changes: 12 additions & 0 deletions playground/app/pages/components/slideover.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
19 changes: 11 additions & 8 deletions src/runtime/components/Slideover.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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
Expand Down