From 43c3f82ae5af04c4f1bfb2b53b2b13d27b8272ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 21 Apr 2023 15:04:27 +0300
Subject: [PATCH] Refactor #3879 - For Avatar & AvatarGroup

---
 api-generator/components/avatar.js          |  6 +++
 api-generator/components/avatargroup.js     | 42 +++++++++++++++++++-
 components/lib/avatar/Avatar.d.ts           | 44 +++++++++++++++++++++
 components/lib/avatar/Avatar.vue            | 13 +++---
 components/lib/avatargroup/AvatarGroup.d.ts | 28 ++++++++++++-
 components/lib/avatargroup/AvatarGroup.vue  |  7 +++-
 6 files changed, 131 insertions(+), 9 deletions(-)

diff --git a/api-generator/components/avatar.js b/api-generator/components/avatar.js
index d3eff8255..b0c96a8c6 100644
--- a/api-generator/components/avatar.js
+++ b/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.'
     }
 ];
 
diff --git a/api-generator/components/avatargroup.js b/api-generator/components/avatargroup.js
index 8b570a288..4168b6775 100644
--- a/api-generator/components/avatargroup.js
+++ b/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
     }
 };
diff --git a/components/lib/avatar/Avatar.d.ts b/components/lib/avatar/Avatar.d.ts
index 9e0bef653..09c5b0784 100644
--- a/components/lib/avatar/Avatar.d.ts
+++ b/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;
 }
 
 /**
diff --git a/components/lib/avatar/Avatar.vue b/components/lib/avatar/Avatar.vue
index 282ebfcce..71cc8291f 100644
--- a/components/lib/avatar/Avatar.vue
+++ b/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: {
diff --git a/components/lib/avatargroup/AvatarGroup.d.ts b/components/lib/avatargroup/AvatarGroup.d.ts
index 1cff7dd48..89a9d9c4a 100644
--- a/components/lib/avatargroup/AvatarGroup.d.ts
+++ b/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.
diff --git a/components/lib/avatargroup/AvatarGroup.vue b/components/lib/avatargroup/AvatarGroup.vue
index 2a3311455..9d0ae8ccb 100644
--- a/components/lib/avatargroup/AvatarGroup.vue
+++ b/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>