Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/avatar/Avatar.d.ts

@@ -0,0 +1,87 @@
+/**
+ *
+ * Avatar represents people using icons, labels and images.
+ *
+ * - [Live Demo](https://primevue.org/avatar)
+ *
+ * @module avatar
+ */
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Defines valid properties in Avatar component.
+ */
+export interface AvatarProps {
+    /**
+     * Defines the text to display.
+     */
+    label?: string | undefined;
+    /**
+     * Defines the icon to display.
+     */
+    icon?: string | undefined;
+    /**
+     * Defines the image to display.
+     */
+    image?: string | undefined;
+    /**
+     * Size of the element.
+     * @defaultValue normal
+     */
+    size?: 'normal' | 'large' | 'xlarge' | undefined;
+    /**
+     * Shape of the element.
+     * @defaultValue square
+     */
+    shape?: 'square' | 'circle' | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+}
+
+/**
+ * Defines valid slots in Avatar component.
+ */
+export interface AvatarSlots {
+    /**
+     * Content can easily be customized with the default slot instead of using the built-in modes.
+     */
+    default(): VNode[];
+}
+
+/**
+ * Defines valid emits in Avatar component.
+ */
+export interface AvatarEmits {
+    /**
+     * Triggered when an error occurs while loading an image file.
+     */
+    error(): void;
+}
+
+/**
+ * **PrimeVue - Avatar**
+ *
+ * _Avatar represents people using icons, labels and images._
+ *
+ * [Live Demo](https://www.primevue.org/avatar/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class Avatar extends ClassComponent<AvatarProps, AvatarSlots, AvatarEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Avatar: GlobalComponentConstructor<Avatar>;
+    }
+}
+
+export default Avatar;

components/lib/avatar/Avatar.spec.js

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach } from 'vitest';
+import Avatar from './Avatar.vue';
+let wrapper = null;
+
+beforeEach(() => {
+    wrapper = mount(Avatar, {
+        props: {
+            label: 'T',
+            size: 'large',
+            shape: 'circle',
+            image: 'test'
+        }
+    });
+});
+
+describe('Avatar.vue', () => {
+    it('should exist', () => {
+        expect(wrapper.find('.p-avatar.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-avatar-lg').exists()).toBe(true);
+        expect(wrapper.find('.p-avatar-circle').exists()).toBe(true);
+        expect(wrapper.find('.p-avatar-text').exists()).toBe(true);
+        expect(wrapper.find('.p-avatar-text').text()).toBe('T');
+    });
+
+    it('should exist', async () => {
+        await wrapper.setProps({ image: 'imageTest' });
+        const image = wrapper.find('.p-avatar-image');
+
+        await wrapper.vm.onError();
+
+        expect(image.exists()).toBe(true);
+        expect(wrapper.emitted().error.length).toBe(1);
+    });
+});

components/lib/avatar/Avatar.vue

@@ -0,0 +1,99 @@
+<template>
+    <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
+        <slot>
+            <span v-if="label" class="p-avatar-text">{{ label }}</span>
+            <span v-else-if="icon" :class="iconClass"></span>
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" />
+        </slot>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Avatar',
+    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'
+                }
+            ];
+        },
+        iconClass() {
+            return ['p-avatar-icon', this.icon];
+        }
+    }
+};
+</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/package.json

@@ -0,0 +1,9 @@
+{
+  "main": "./avatar.cjs.js",
+  "module": "./avatar.esm.js",
+  "unpkg": "./avatar.min.js",
+  "types": "./Avatar.d.ts",
+  "browser": {
+    "./sfc": "./Avatar.vue"
+  }
+}