vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge pull request #2671 from tugcekucukoglu/avatar-error 

Fixed #2670 - Avatar | New error event
pull/2672/head
Tuğçe Küçükoğlu 2022-06-14 17:14:11 +03:00 committed by GitHub
parent bd8af92a12 6386ffa015
commit e4bc062dfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
api-generator/components/avatar.js
View File

@ -31,10 +31,18 @@ const AvatarProps = [
}
];
const AvatarEvents = [
{
name: "error",
description: "Triggered when an error occurs while loading an image file."
}
];
module.exports = {
avatar: {
name: "Avatar",
description: "Avatar represents people using icons, labels and images.",
props: AvatarProps
props: AvatarProps,
events: AvatarEvents
}
};

4
src/components/avatar/Avatar.d.ts vendored
View File

@ -40,6 +40,10 @@ export interface AvatarSlots {
}
export declare type AvatarEmits = {
/**
* Triggered when an error occurs while loading an image file.
*/
error: () => void;
}
declare class Avatar extends ClassComponent<AvatarProps, AvatarSlots, AvatarEmits> { }

7
src/components/avatar/Avatar.vue
View File

@ -3,7 +3,7 @@
<slot>
<span class="p-avatar-text" v-if="label">{{label}}</span>
<span :class="iconClass" v-else-if="icon"></span>
<img :src="image" v-else-if="image">
<img :src="image" v-else-if="image" @error="onError">
</slot>
</div>
</template>
@ -33,6 +33,11 @@ export default {
default: "square"
}
},
methods: {
onError() {
this.$emit('error');
}
},
computed: {
containerClass() {
return ['p-avatar p-component', {

39
src/views/avatar/AvatarDoc.vue
View File

@ -40,6 +40,7 @@ import AvatarGroup from 'primevue/avatargroup';
&lt;Avatar image="user.png" /&gt;
&lt;Avatar label="+2" /&gt;
&lt;/AvatarGroup&gt;
</code></pre>
<h5>Shape</h5>
@ -60,7 +61,7 @@ import AvatarGroup from 'primevue/avatargroup';
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code>
&lt;Avatar&gt;
Content
Content
&lt;/Avatar&gt;
</code></pre>
@ -115,6 +116,26 @@ import AvatarGroup from 'primevue/avatargroup';
<h5>Properties of AvatarGroup</h5>
<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>error</td>
<td>-</td>
<td>Triggered when an error occurs while loading an image file.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of Avatar</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">
@ -236,7 +257,7 @@ export default {
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-12 md:col-4">
<div class="card">
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
@ -268,12 +289,12 @@ export default {
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Image - Badge</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Image - Badge</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
</div>
</div>
</div>
</template>
@ -333,7 +354,7 @@ export default {
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-12 md:col-4">
<div class="card">
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>