Refactor #3965 - For Avatar

components/lib/avatar/Avatar.d.ts

@@ -88,6 +88,11 @@ export interface AvatarProps {
      * @type {AvatarPassThroughOptions}
      */
     pt?: AvatarPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/avatar/Avatar.vue

@@ -1,100 +1,25 @@
 <template>
-    <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
+    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')" data-pc-name="avatar" data-pc-section="root">
         <slot>
-            <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')" />
+            <span v-if="label" :class="cx('label')" v-bind="ptm('label')" data-pc-section="label">{{ label }}</span>
+            <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" data-pc-section="icon" />
+            <span v-else-if="icon" :class="cx('icon')" v-bind="ptm('icon')" data-pc-section="icon" />
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" data-pc-section="image" />
         </slot>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseAvatar from './BaseAvatar';
 
 export default {
     name: 'Avatar',
-    extends: BaseComponent,
+    extends: BaseAvatar,
     emits: ['error'],
-    props: {
-        label: {
-            type: String,
-            default: null
-        },
-        icon: {
-            type: String,
-            default: null
-        },
-        image: {
-            type: String,
-            default: null
-        },
-        size: {
-            type: String,
-            default: 'normal'
-        },
-        shape: {
-            type: String,
-            default: 'square'
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     methods: {
         onError() {
             this.$emit('error');
         }
-    },
-    computed: {
-        containerClass() {
-            return [
-                'p-avatar p-component',
-                {
-                    'p-avatar-image': this.image != null,
-                    'p-avatar-circle': this.shape === 'circle',
-                    'p-avatar-lg': this.size === 'large',
-                    'p-avatar-xl': this.size === 'xlarge'
-                }
-            ];
-        }
     }
 };
 </script>
-
-<style>
-.p-avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    font-size: 1rem;
-}
-
-.p-avatar.p-avatar-image {
-    background-color: transparent;
-}
-
-.p-avatar.p-avatar-circle {
-    border-radius: 50%;
-}
-
-.p-avatar-circle img {
-    border-radius: 50%;
-}
-
-.p-avatar .p-avatar-icon {
-    font-size: 1rem;
-}
-
-.p-avatar img {
-    width: 100%;
-    height: 100%;
-}
-</style>

components/lib/avatar/BaseAvatar.vue

@@ -0,0 +1,98 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1rem;
+}
+
+.p-avatar.p-avatar-image {
+    background-color: transparent;
+}
+
+.p-avatar.p-avatar-circle {
+    border-radius: 50%;
+}
+
+.p-avatar-circle img {
+    border-radius: 50%;
+}
+
+.p-avatar .p-avatar-icon {
+    font-size: 1rem;
+}
+
+.p-avatar img {
+    width: 100%;
+    height: 100%;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-avatar p-component',
+        {
+            'p-avatar-image': props.image != null,
+            'p-avatar-circle': props.shape === 'circle',
+            'p-avatar-lg': props.size === 'large',
+            'p-avatar-xl': props.size === 'xlarge'
+        }
+    ],
+    label: 'p-avatar-text',
+    icon: ({ props }) => ['p-avatar-icon', props.icon]
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_divider_style', manual: true });
+
+export default {
+    name: 'BaseAvatar',
+    extends: BaseComponent,
+    props: {
+        label: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+        image: {
+            type: String,
+            default: null
+        },
+        size: {
+            type: String,
+            default: 'normal'
+        },
+        shape: {
+            type: String,
+            default: 'square'
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>