Refactor #3879 - For Avatar & AvatarGroup
parent
69d0f98f26
commit
43c3f82ae5
|
@ -28,6 +28,12 @@ const AvatarProps = [
|
||||||
type: 'string',
|
type: 'string',
|
||||||
default: 'square',
|
default: 'square',
|
||||||
description: 'Shape of the element, valid options are "square" and "circle".'
|
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.'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -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 = {
|
module.exports = {
|
||||||
avatargroup: {
|
avatargroup: {
|
||||||
name: 'AvatarGroup',
|
name: 'AvatarGroup',
|
||||||
'doc-url': 'avatar',
|
'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
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -9,6 +9,45 @@
|
||||||
import { VNode } from 'vue';
|
import { VNode } from 'vue';
|
||||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
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.
|
* 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.
|
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
|
||||||
*/
|
*/
|
||||||
'aria-labelledby'?: string | undefined;
|
'aria-labelledby'?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to DOM elements inside the component.
|
||||||
|
* @type {AvatarPassThroughOptions}
|
||||||
|
*/
|
||||||
|
pt?: AvatarPassThroughOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,18 +1,21 @@
|
||||||
<template>
|
<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>
|
<slot></slot>
|
||||||
<template v-if="!$slots.default">
|
<template v-if="!$slots.default">
|
||||||
<span v-if="label" class="p-avatar-text">{{ label }}</span>
|
<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" />
|
<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]" />
|
<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" />
|
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Avatar',
|
name: 'Avatar',
|
||||||
|
extends: BaseComponent,
|
||||||
emits: ['error'],
|
emits: ['error'],
|
||||||
props: {
|
props: {
|
||||||
label: {
|
label: {
|
||||||
|
|
|
@ -9,10 +9,36 @@
|
||||||
*/
|
*/
|
||||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
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.
|
* 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.
|
* Defines valid slots in AvatarGroup component.
|
||||||
|
|
|
@ -1,12 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="p-avatar-group p-component">
|
<div class="p-avatar-group p-component" v-bind="ptm('root')">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AvatarGroup'
|
name: 'AvatarGroup',
|
||||||
|
extends: BaseComponent
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue