Update #3797 - Card updates

components/lib/card/Card.d.ts

@@ -10,10 +10,56 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type CardPassThroughOptionType = CardPassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CardProps.pt}
+ */
+export interface CardPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body's DOM element.
+     */
+    body?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the subtitle's DOM element.
+     */
+    subtitle?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: CardPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CardPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Card component.
  */
-export interface CardProps {}
+export interface CardProps {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CardPassThroughOptions}
+     */
+    pt?: CardPassThroughOptions;
+}
 
 /**
  * Defines valid slots in Card component.

components/lib/card/Card.vue

@@ -1,15 +1,19 @@
 <template>
-    <div class="p-card p-component">
-        <div v-if="$slots.header" class="p-card-header">
+    <div class="p-card p-component" v-bind="ptm('root')">
+        <div v-if="$slots.header" class="p-card-header" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
-        <div class="p-card-body">
-            <div v-if="$slots.title" class="p-card-title"><slot name="title"></slot></div>
-            <div v-if="$slots.subtitle" class="p-card-subtitle"><slot name="subtitle"></slot></div>
-            <div class="p-card-content">
+        <div class="p-card-body" v-bind="ptm('body')">
+            <div v-if="$slots.title" class="p-card-title" v-bind="ptm('title')">
+                <slot name="title"></slot>
+            </div>
+            <div v-if="$slots.subtitle" class="p-card-subtitle" v-bind="ptm('subtitle')">
+                <slot name="subtitle"></slot>
+            </div>
+            <div class="p-card-content" v-bind="ptm('content')">
                 <slot name="content"></slot>
             </div>
-            <div v-if="$slots.footer" class="p-card-footer">
+            <div v-if="$slots.footer" class="p-card-footer" v-bind="ptm('footer')">
                 <slot name="footer"></slot>
             </div>
         </div>
@@ -17,13 +21,10 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
+
 export default {
-    name: 'Card'
+    name: 'Card',
+    extends: ComponentBase
 };
 </script>
-
-<style>
-.p-card-header img {
-    width: 100%;
-}
-</style>