Refactor #3879 - For Avatar & AvatarGroup

api-generator/components/avatar.js

@@ -28,6 +28,12 @@ const AvatarProps = [
         type: 'string',
         default: 'square',
         description: 'Shape of the element, valid options are "square" and "circle".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/avatargroup.js

@@ -1,7 +1,47 @@
+const AvatarGroupProps = [
+    {
+        name: 'label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the text to display.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the icon to display.'
+    },
+    {
+        name: 'image',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the image to display.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Size of the element, valid options are "large" and "xlarge".'
+    },
+    {
+        name: 'shape',
+        type: 'string',
+        default: 'square',
+        description: 'Shape of the element, valid options are "square" and "circle".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     avatargroup: {
         name: 'AvatarGroup',
         'doc-url': 'avatar',
-        description: 'A set of Avatars can be displayed together using the AvatarGroup component.'
+        description: 'A set of Avatars can be displayed together using the AvatarGroup component.',
+        props: AvatarGroupProps
     }
 };

components/lib/avatar/Avatar.d.ts

@@ -9,6 +9,45 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AvatarPassThroughMethodOptions {
+    props: AvatarProps;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AvatarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AvatarProps.pt}
+ */
+export interface AvatarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: AvatarPassThroughOptionType;
+}
+
 /**
  * Defines valid properties in Avatar component.
  */
@@ -44,6 +83,11 @@ export interface AvatarProps {
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarPassThroughOptions}
+     */
+    pt?: AvatarPassThroughOptions;
 }
 
 /**

components/lib/avatar/Avatar.vue

@@ -1,18 +1,21 @@
 <template>
-    <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
+    <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
         <slot></slot>
         <template v-if="!$slots.default">
-            <span v-if="label" class="p-avatar-text">{{ label }}</span>
-            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-avatar-icon" />
-            <span v-else-if="icon" :class="['p-avatar-icon', icon]" />
-            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" />
+            <span v-if="label" class="p-avatar-text" v-bind="ptm('label')">{{ label }}</span>
+            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-avatar-icon" v-bind="ptm('icon')" />
+            <span v-else-if="icon" :class="['p-avatar-icon', icon]" v-bind="ptm('icon')" />
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
         </template>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Avatar',
+    extends: BaseComponent,
     emits: ['error'],
     props: {
         label: {

components/lib/avatargroup/AvatarGroup.d.ts

@@ -9,10 +9,36 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AvatarGroupPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AvatarGroupProps.pt}
+ */
+export interface AvatarGroupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AvatarGroupPassThroughOptionType;
+}
+
 /**
  * Defines valid properties in AvatarGroup component.
  */
-export interface AvatarGroupProps {}
+export interface AvatarGroupProps {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarGroupPassThroughOptions}
+     */
+    pt?: AvatarGroupPassThroughOptions;
+}
 
 /**
  * Defines valid slots in AvatarGroup component.

components/lib/avatargroup/AvatarGroup.vue

@@ -1,12 +1,15 @@
 <template>
-    <div class="p-avatar-group p-component">
+    <div class="p-avatar-group p-component" v-bind="ptm('root')">
         <slot></slot>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
-    name: 'AvatarGroup'
+    name: 'AvatarGroup',
+    extends: BaseComponent
 };
 </script>