Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/message/Message.d.ts

@@ -0,0 +1,93 @@
+/**
+ *
+ * Message groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/message/)
+ *
+ * @module message
+ *
+ */
+import { ButtonHTMLAttributes, VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Defines valid properties in Message component.
+ */
+export interface MessageProps {
+    /**
+     * Severity level of the message.
+     * @defaultValue info
+     */
+    severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
+    /**
+     * Whether the message can be closed manually using the close icon.
+     * @defaultValue true
+     */
+    closable?: boolean | undefined;
+    /**
+     * When enabled, message is not removed automatically.
+     * @defaultValue true
+     */
+    sticky?: boolean | undefined;
+    /**
+     * Delay in milliseconds to close the message automatically.
+     * @defaultValue 3000
+     */
+    life?: number | undefined;
+    /**
+     * Display a custom icon for the message.
+     */
+    icon?: string | undefined;
+    /**
+     * Icon to display in the message close button.
+     * @defaultValue pi pi-times
+     */
+    closeIcon?: string | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the close button.
+     */
+    closeButtonProps?: ButtonHTMLAttributes | undefined;
+}
+
+/**
+ * Defines valid slots in Message slots.
+ */
+export interface MessageSlots {
+    /**
+     * Default custom slot.
+     */
+    default(): VNode[];
+}
+
+/**
+ * Defines valid emits in Message component.
+ */
+export interface MessageEmits {
+    /**
+     * Callback to invoke when a message is closed.
+     * @param {Event} event - Browser event.
+     */
+    close(event: Event): void;
+}
+
+/**
+ * **PrimeVue - Message**
+ *
+ * _Messages is used to display inline messages with various severities._
+ *
+ * [Live Demo](https://www.primevue.org/message/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class Message extends ClassComponent<MessageProps, MessageSlots, MessageEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Message: GlobalComponentConstructor<Message>;
+    }
+}
+
+export default Message;

components/lib/message/Message.spec.js

@@ -0,0 +1,77 @@
+import { config, mount } from '@vue/test-utils';
+import PrimeVue from 'primevue/config';
+import Message from './Message.vue';
+
+config.global.mocks = {
+    $primevue: {
+        config: {
+            locale: {
+                aria: {
+                    close: 'Close'
+                }
+            }
+        }
+    }
+};
+
+describe('Message.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Message, {
+            props: {
+                severity: 'error'
+            },
+            slots: {
+                default: 'Error Message Content'
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-message.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-message.p-component').classes()).toContain('p-message-error');
+        expect(wrapper.find('.p-message-text').text()).toContain('Error Message Content');
+    });
+
+    it('should close the message', async () => {
+        await wrapper.vm.close({});
+
+        expect(wrapper.vm.visible).toBe(false);
+        expect(wrapper.emitted().close[0]).toEqual([{}]);
+    });
+
+    it('should have custom close icon if provided', async () => {
+        await wrapper.setProps({ closeIcon: 'pi pi-discord' });
+        const icon = wrapper.find('.p-message-close-icon');
+
+        expect(icon.classes()).toContain('pi-discord');
+    });
+});
+
+describe('Message.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Message, {
+            plugins: [PrimeVue],
+            props: {
+                severity: 'error',
+                life: 3000,
+                sticky: false
+            },
+            stubs: {
+                transition: false
+            },
+            slots: {
+                default: 'Error Message Content'
+            }
+        });
+    });
+
+    it('should sticky and life works', () => {
+        setTimeout(() => {
+            expect(wrapper.vm.visible).toBe(false);
+        }, 3001);
+    });
+});

components/lib/message/Message.vue

@@ -0,0 +1,146 @@
+<template>
+    <transition name="p-message" appear>
+        <div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="p-message-wrapper">
+                <span :class="iconClass"></span>
+                <div class="p-message-text">
+                    <slot></slot>
+                </div>
+                <button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="closeButtonProps">
+                    <i :class="['p-message-close-icon', closeIcon]" />
+                </button>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import Ripple from 'primevue/ripple';
+
+export default {
+    name: 'Message',
+    emits: ['close'],
+    props: {
+        severity: {
+            type: String,
+            default: 'info'
+        },
+        closable: {
+            type: Boolean,
+            default: true
+        },
+        sticky: {
+            type: Boolean,
+            default: true
+        },
+        life: {
+            type: Number,
+            default: 3000
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+        closeIcon: {
+            type: String,
+            default: 'pi pi-times'
+        },
+        closeButtonProps: {
+            type: null,
+            default: null
+        }
+    },
+    timeout: null,
+    data() {
+        return {
+            visible: true
+        };
+    },
+    mounted() {
+        if (!this.sticky) {
+            this.x();
+        }
+    },
+    methods: {
+        close(event) {
+            this.visible = false;
+            this.$emit('close', event);
+        },
+        x() {
+            setTimeout(() => {
+                this.visible = false;
+            }, this.life);
+        }
+    },
+    computed: {
+        containerClass() {
+            return 'p-message p-component p-message-' + this.severity;
+        },
+        iconClass() {
+            return [
+                'p-message-icon pi',
+                this.icon
+                    ? this.icon
+                    : {
+                          'pi-info-circle': this.severity === 'info',
+                          'pi-check': this.severity === 'success',
+                          'pi-exclamation-triangle': this.severity === 'warn',
+                          'pi-times-circle': this.severity === 'error'
+                      }
+            ];
+        },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+        }
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>
+
+<style>
+.p-message-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.p-message-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-message-close.p-link {
+    margin-left: auto;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-message-enter-from {
+    opacity: 0;
+}
+
+.p-message-enter-active {
+    transition: opacity 0.3s;
+}
+
+.p-message.p-message-leave-from {
+    max-height: 1000px;
+}
+
+.p-message.p-message-leave-to {
+    max-height: 0;
+    opacity: 0;
+    margin: 0 !important;
+}
+
+.p-message-leave-active {
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
+}
+
+.p-message-leave-active .p-message-close {
+    display: none;
+}
+</style>

components/lib/message/package.json

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