fix: dialog header-end slot

CyanSalt · Jul 17, 2023 · 763bf6c · 763bf6c
1 parent f54fce4
commit 763bf6c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -122,7 +122,7 @@ import { RCard } from 'roughness'
 <RSpace overflow>
 <RTable
   :columns="['name', 'parameters', 'description']"
-  :rows="['title', 'header-extra', 'default', 'footer']"
+  :rows="['title', 'header-end', 'default', 'footer']"
 >
   <template #body:*:name="{ row }">{{ row }}</template>
 
@@ -134,7 +134,7 @@ import { RCard } from 'roughness'
 
   </template>
 
-  <template #body:header-extra:description>
+  <template #body:header-end:description>
 
   The content of the card header after title.
 

diff --git a/src/dialog/index.vue b/src/dialog/index.vue
@@ -5,6 +5,7 @@ import RCard from '../card/index.vue'
 import type { GraphicsProps } from '../graphics/utils'
 import RIcon from '../icon/index.vue'
 import RLink from '../link/index.vue'
+import RSpace from '../space/index.vue'
 
 defineOptions({
   name: 'RDialog',
@@ -92,14 +93,18 @@ const nestingGraphicsOptions = $computed(() => {
       method="dialog"
       class="r-dialog__card"
     >
-      <template v-if="closable" #header-end>
-        <RLink
-          tag="button"
-          size="large"
-          class="r-dialog__close"
-        >
-          <RIcon name="x" size="large" />
-        </RLink>
+      <template #header-end>
+        <RSpace>
+          <slot name="header-end"></slot>
+          <RLink
+            v-if="closable"
+            tag="button"
+            size="large"
+            class="r-dialog__close"
+          >
+            <RIcon name="x" size="large" />
+          </RLink>
+        </RSpace>
       </template>
       <template #title>
         <slot name="title"></slot>