Implemented Avatar
Cagatay Civici
parent
19e49e852b
commit
7e5e5f6650
|
|
@ -22,6 +22,10 @@
|
|||
"name": "Components",
|
||||
"icon": "pi pi-compass",
|
||||
"children": [
|
||||
{
|
||||
"name": "Avatar",
|
||||
"to": "/avatar"
|
||||
},
|
||||
{
|
||||
"name": "Checkbox",
|
||||
"to": "/checkbox"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<AvatarGroup>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
|
||||
<Avatar label="+2" shape="circle" />
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
import AvatarGroup from '@/volt/avatargroup';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<AvatarGroup>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
|
||||
<Avatar label="+2" shape="circle" />
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
import AvatarGroup from '@/volt/avatargroup';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<div class="flex-auto">
|
||||
<h5>Icon</h5>
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
|
||||
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Circle</h5>
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
|
||||
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Badge</h5>
|
||||
<OverlayBadge value="4" severity="danger" class="inline-flex">
|
||||
<Avatar icon="pi pi-user" size="xlarge" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<div class="flex-auto">
|
||||
<h5>Icon</h5>
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
|
||||
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Circle</h5>
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
|
||||
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Badge</h5>
|
||||
<OverlayBadge value="4" severity="danger" class="inline-flex">
|
||||
<Avatar icon="pi pi-user" size="xlarge" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Use the <i>image</i> property to display an image as an Avatar.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<div class="flex-auto">
|
||||
<h5>Image</h5>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Badge</h5>
|
||||
<OverlayBadge value="4" severity="danger" class="inline-flex">
|
||||
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Gravatar</h5>
|
||||
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<div class="flex-auto">
|
||||
<h5>Image</h5>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Badge</h5>
|
||||
<OverlayBadge value="4" severity="danger" class="inline-flex">
|
||||
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Gravatar</h5>
|
||||
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" lang="script" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: `import InputText from '@/volt/inputtext';
|
||||
`
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A letter Avatar is defined with the <i>label</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<div class="flex-auto">
|
||||
<h5>Label</h5>
|
||||
<Avatar label="P" class="mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
|
||||
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Circle</h5>
|
||||
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
|
||||
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Badge</h5>
|
||||
<OverlayBadge value="4" severity="danger" class="inline-flex">
|
||||
<Avatar label="U" size="xlarge" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<div class="flex-auto">
|
||||
<h5>Label</h5>
|
||||
<Avatar label="P" class="mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
|
||||
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Circle</h5>
|
||||
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
|
||||
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<h5>Badge</h5>
|
||||
<OverlayBadge value="4" severity="danger" class="inline-flex">
|
||||
<Avatar label="U" size="xlarge" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -24,5 +24,9 @@ const code = ref(`
|
|||
<Chip label="Thriller" removable />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Chip from '@/volt/chip';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -34,5 +34,9 @@ const code = ref(`
|
|||
</Chip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Chip from '@/volt/chip';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,5 +24,9 @@ const code = ref(`
|
|||
<Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Chip from '@/volt/chip';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,5 +24,9 @@ const code = ref(`
|
|||
</Chip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Chip from '@/volt/chip';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
|
||||
import IconDoc from '@/doc/avatar/IconDoc.vue';
|
||||
import ImageDoc from '@/doc/avatar/ImageDoc.vue';
|
||||
import ImportDoc from '@/doc/avatar/ImportDoc.vue';
|
||||
import LabelDoc from '@/doc/avatar/LabelDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'label',
|
||||
label: 'Label',
|
||||
component: LabelDoc
|
||||
},
|
||||
{
|
||||
id: 'icon',
|
||||
label: 'Icon',
|
||||
component: IconDoc
|
||||
},
|
||||
{
|
||||
id: 'image',
|
||||
label: 'Image',
|
||||
component: ImageDoc
|
||||
},
|
||||
{
|
||||
id: 'avatargroup',
|
||||
label: 'AvatarGroup',
|
||||
component: AvatarGroupDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,6 +11,7 @@ export default {
|
|||
addVariant('p-invalid', '&[data-p~="invalid"]');
|
||||
addVariant('p-small', '&[data-p~="small"]');
|
||||
addVariant('p-large', '&[data-p~="large"]');
|
||||
addVariant('p-xlarge', '&[data-p~="xlarge"]');
|
||||
addVariant('p-fluid', '&[data-p~="fluid"]');
|
||||
addVariant('p-filled', '&[data-p~="filled"]');
|
||||
addVariant('p-horizontal', '&[data-p~="horizontal"]');
|
||||
|
|
@ -28,6 +29,7 @@ export default {
|
|||
addVariant('p-focus-visible', '&[data-p~="focus-visible"]');
|
||||
addVariant('p-readonly', '&[data-p~="readonly"]');
|
||||
addVariant('p-removable', '&[data-p~="removable"]');
|
||||
addVariant('p-circle', '&[data-p~="circle"]');
|
||||
})
|
||||
],
|
||||
theme: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<Avatar
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||
</template>
|
||||
</Avatar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from 'primevue/avatar';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: `inline-flex items-center justify-center
|
||||
w-8 h-8 text-base rounded-md
|
||||
bg-surface-200 dark:bg-surface-700
|
||||
has-[img]:bg-transparent
|
||||
p-circle:rounded-full
|
||||
p-large:w-12 p-large:h-12 p-large:text-2xl
|
||||
p-xlarge:w-16 p-xlarge:h-16 p-xlarge:text-[2rem]`,
|
||||
label: ``,
|
||||
icon: `text-base p-large:text-2xl p-xlarge:text-[2rem]`,
|
||||
image: `p-circle:rounded-full w-full h-full`
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<AvatarGroup
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||
</template>
|
||||
</AvatarGroup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AvatarGroup from 'primevue/avatargroup';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: `flex items-center *:border-2 *:border-surface-200 dark:*:border-surface-700 *:-ms-3`
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
<template>
|
||||
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptmi('root')">
|
||||
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptmi('root')" :data-p="dataP">
|
||||
<slot>
|
||||
<span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
|
||||
<span v-if="label" :class="cx('label')" v-bind="ptm('label')" :data-p="dataP">{{ label }}</span>
|
||||
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
|
||||
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
|
||||
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
|
||||
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" :data-p="dataP" />
|
||||
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" :data-p="dataP" />
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cn } from '@primeuix/utils';
|
||||
import BaseAvatar from './BaseAvatar.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -21,6 +22,14 @@ export default {
|
|||
onError(event) {
|
||||
this.$emit('error', event);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataP() {
|
||||
return cn({
|
||||
[this.shape]: this.shape,
|
||||
[this.size]: this.size
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue