Fixed #5020 - Add caption option to passthrough options on Card

primefaces · Jan 3, 2024 · 8e1354d · 8e1354d
1 parent 4c57243
commit 8e1354d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/components/lib/card/Card.d.ts b/components/lib/card/Card.d.ts
@@ -31,6 +31,10 @@ export interface CardPassThroughOptions {
      * Used to pass attributes to the body's DOM element.
      */
     body?: CardPassThroughOptionType;
+    /**
+     * Used to pass attributes to the caption's DOM element.
+     */
+    caption?: CardPassThroughOptionType;
     /**
      * Used to pass attributes to the title's DOM element.
      */

diff --git a/components/lib/card/Card.vue b/components/lib/card/Card.vue
@@ -4,11 +4,13 @@
             <slot name="header"></slot>
         </div>
         <div :class="cx('body')" v-bind="ptm('body')">
-            <div v-if="$slots.title" :class="cx('title')" v-bind="ptm('title')">
-                <slot name="title"></slot>
-            </div>
-            <div v-if="$slots.subtitle" :class="cx('subtitle')" v-bind="ptm('subtitle')">
-                <slot name="subtitle"></slot>
+            <div v-if="$slots.title || $slots.subtitle" :class="cx('caption')" v-bind="ptm('caption')">
+                <div v-if="$slots.title" :class="cx('title')" v-bind="ptm('title')">
+                    <slot name="title"></slot>
+                </div>
+                <div v-if="$slots.subtitle" :class="cx('subtitle')" v-bind="ptm('subtitle')">
+                    <slot name="subtitle"></slot>
+                </div>
             </div>
             <div :class="cx('content')" v-bind="ptm('content')">
                 <slot name="content"></slot>

diff --git a/components/lib/card/style/CardStyle.js b/components/lib/card/style/CardStyle.js
@@ -4,6 +4,7 @@ const classes = {
     root: 'p-card p-component',
     header: 'p-card-header',
     body: 'p-card-body',
+    caption: 'p-card-caption',
     title: 'p-card-title',
     subtitle: 'p-card-subtitle',
     content: 'p-card-content',