Initiated Avatar Component

exports/avatar.d.ts

@@ -0,0 +1 @@
+export * from './components/avatar/Avatar';

exports/avatar.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/avatar/Avatar.vue');

exports/avatargroup.d.ts

@@ -0,0 +1 @@
+export * from './components/avatargroup/AvatarGroup';

exports/avatargroup.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/avatargroup/AvatarGroup.vue');

public/themes/saga-blue/theme.css

@@ -4283,6 +4283,15 @@
   background-color: rgba(0, 0, 0, 0.9);
 }
 
+.p-avatar {
+  background-color: #dee2e6;
+  border-radius: 3px;
+}
+
+.p-avatar-group .p-avatar {
+  border: 2px solid #ffffff;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;

public/themes/saga-green/theme.css

@@ -4283,6 +4283,15 @@
   background-color: rgba(0, 0, 0, 0.9);
 }
 
+.p-avatar {
+  background-color: #dee2e6;
+  border-radius: 3px;
+}
+
+.p-avatar-group .p-avatar {
+  border: 2px solid #ffffff;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;

public/themes/saga-orange/theme.css

@@ -4283,6 +4283,15 @@
   background-color: rgba(0, 0, 0, 0.9);
 }
 
+.p-avatar {
+  background-color: #dee2e6;
+  border-radius: 3px;
+}
+
+.p-avatar-group .p-avatar {
+  border: 2px solid #ffffff;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;

public/themes/saga-purple/theme.css

@@ -4283,6 +4283,15 @@
   background-color: rgba(0, 0, 0, 0.9);
 }
 
+.p-avatar {
+  background-color: #dee2e6;
+  border-radius: 3px;
+}
+
+.p-avatar-group .p-avatar {
+  border: 2px solid #ffffff;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;

src/AppMenu.vue

@@ -248,6 +248,7 @@
 
             <div class="menu-category">Misc</div>
             <div class="menu-items">
+                <router-link to="/avatar">Avatar <span class="p-tag">New</span></router-link>
                 <router-link to="/badge">Badge</router-link>
                 <router-link to="/blockui">BlockUI</router-link>
                 <router-link to="/divider">Divider <span class="p-tag">New</span></router-link>

src/components/avatar/Avatar.d.ts

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+declare class Avatar extends Vue {
+    letter?: string;
+    icon?: string;
+    image?: string;
+}
+
+export default Avatar;

src/components/avatar/Avatar.vue

@@ -0,0 +1,110 @@
+<template>
+    <div :class="containerClass">
+        <slot>
+            <span class="p-avatar-letter" v-if="letter">{{letter}}</span>
+            <span :class="getIconClass()" v-else-if="icon"></span>
+            <img :src="image" v-else-if="image">
+        </slot>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        letter: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+        image: {
+            type: String,
+            default: null
+        },
+        size: {
+            type: String,
+            default: 'normal'
+        },
+        shape: {
+            type: String,
+            default: "square"
+        }
+    },
+    methods: {
+        getIconClass() {
+            return ['p-avatar-icon', this.icon];
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-avatar p-component', {
+                'p-avatar-image': this.image != null,
+                'p-avatar-circle': this.shape === 'circle',
+                'p-avatar-sm': this.size === 'small',
+                '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-circle {
+    border-radius: 50%;
+}
+
+.p-avatar .p-avatar-icon {
+    font-size: 1rem;
+}
+
+.p-avatar img {
+    width: 100%;
+    height: 100%;
+}
+
+.p-avatar.p-avatar-sm {
+    width: 1rem;
+    height: 1rem;
+    font-size: .75rem;
+}
+
+.p-avatar-sm .p-avatar-icon {
+    font-size: .75rem;
+}
+
+.p-avatar.p-avatar-lg {
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.5rem;
+}
+
+.p-avatar-lg .p-avatar-icon {
+    font-size: 1.5rem;
+}
+
+.p-avatar.p-avatar-xl {
+    width: 4rem;
+    height: 4rem;
+    font-size: 2rem;
+}
+
+.p-avatar-xl .p-avatar-icon {
+    font-size: 2rem;
+}
+</style>

src/components/avatargroup/AvatarGroup.d.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+declare class AvatarGroup extends Vue {}
+
+export default AvatarGroup;

src/components/avatargroup/AvatarGroup.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="p-avatar-group p-component">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+.p-avatar-group .p-avatar + .p-avatar {
+    margin-left: -1rem;
+}
+
+.p-avatar-group {
+    display: flex;
+    align-items: center;
+}
+</style>

src/components/divider/Divider.vue

@@ -10,15 +10,15 @@
 export default {
     props: {
         align: {
-            mode: String,
+            type: String,
             default: null
         },
         layout: {
-            mode: String,
+            type: String,
             default: 'horizontal'
         },
         type: {
-            mode: String,
+            type: String,
             default: 'solid'
         }
     },

src/main.js

@@ -5,6 +5,8 @@ import App from './App.vue';
 import AutoComplete from './components/autocomplete/AutoComplete';
 import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordiontab/AccordionTab';
+import Avatar from './components/avatar/Avatar';
+import AvatarGroup from './components/avatargroup/AvatarGroup';
 import BlockUI from './components/blockui/BlockUI';
 import Breadcrumb from './components/breadcrumb/Breadcrumb';
 import Button from './components/button/Button';
@@ -112,6 +114,8 @@ app.directive('ripple', Ripple);
 
 app.component('Accordion', Accordion);
 app.component('AccordionTab', AccordionTab);
+app.component('Avatar', Avatar);
+app.component('AvatarGroup', AvatarGroup);
 app.component('AutoComplete', AutoComplete);
 app.component('BlockUI', BlockUI);
 app.component('Breadcrumb', Breadcrumb);

src/router/index.js

@@ -17,6 +17,11 @@ const routes = [
         name: 'accessibility',
         component: () => import('../views/accessibility/AccessibilityDemo.vue')
     },
+    {
+        path: '/avatar',
+        name: 'avatar',
+        component: () => import('../views/avatar/AvatarDemo.vue')
+    },
     {
         path: '/support',
         name: 'support',

src/views/avatar/AvatarDemo.vue

@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Avatar</h1>
+                <p>Avatar represents people using icons, letters and images.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="p-grid">
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>Letter</h5>
+                        <Avatar letter="P" class="p-mr-2" size="xlarge" />
+                        <Avatar letter="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                        <Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>Letter - Circle</h5>
+                        <Avatar letter="P" class="p-mr-2" size="xlarge" shape="circle" />
+                        <Avatar letter="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+                        <Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
+                    </div>
+                </div>
+            </div>
+           
+            <div class="p-grid">
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>Icon</h5>
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                        <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>Icon - Circle</h5>
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
+                        <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="p-grid">
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>Image</h5>
+                        <Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" />
+                        <Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" />
+                        <Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" />
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>Group</h5>
+                        <AvatarGroup class="p-mb-3">
+                            <Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/>
+                            <Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/>
+                            <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
+                            <Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/>
+                            <Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/>
+                            <Avatar letter="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff; font-size: 1rem" />
+                        </AvatarGroup>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+
+        <AvatarDoc />
+    </div>
+</template>
+
+<script>
+import AvatarDoc from './AvatarDoc';
+
+export default {
+    components: {
+        'AvatarDoc': AvatarDoc
+    }
+}
+</script>

src/views/avatar/AvatarDoc.vue

@@ -0,0 +1,71 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import Avatar from 'primevue/avatar';
+import AvatarGroup from 'primevue/avatargroup';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
+<pre v-code>
+<code>
+
+
+</code></pre>
+
+				<h5>Properties</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+
+</template>
+</code></pre>
+
+			</TabPanel>
+		</TabView>
+	</div>
+</template>