Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/panel/Panel.d.ts

@@ -0,0 +1,106 @@
+/**
+ *
+ * Panel is a container with the optional content toggle feature.
+ *
+ * [Live Demo](https://www.primevue.org/panel/)
+ *
+ * @module panel
+ *
+ */
+import { ButtonHTMLAttributes, VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Custom toggle event.
+ * @see {@link PanelEmits.toggle}
+ */
+export interface PanelToggleEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Collapsed state as a boolean
+     */
+    value: boolean;
+}
+
+/**
+ * Defines valid properties in Panel component.
+ */
+export interface PanelProps {
+    /**
+     * Header text of the panel.
+     */
+    header?: string;
+    /**
+     * Defines if content of panel can be expanded and collapsed.
+     * @defaultValue false
+     */
+    toggleable?: boolean;
+    /**
+     * Defines the initial state of panel content.
+     * @defaultValue false
+     */
+    collapsed?: boolean;
+    /**
+     * Uses to pass the custom value to read for the button inside the component.
+     */
+    toggleButtonProps?: ButtonHTMLAttributes | undefined;
+}
+
+/**
+ * Defines valid slots in Panel slots.
+ */
+export interface PanelSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+    /**
+     * Custom header template.
+     */
+    header(): VNode[];
+    /**
+     * Custom icons template.
+     */
+    icons(): VNode[];
+}
+
+/**
+ * Defines valid emits in Panel component.
+ */
+export interface PanelEmits {
+    /**
+     * Emitted when the collapsed changes.
+     * @param {boolean} value - New value.
+     */
+    'update:collapsed'(value: boolean): void;
+    /**
+     * Callback to invoke when a tab toggle.
+     * @param {PanelToggleEvent} event - Custom toggle event.
+     */
+    toggle(event: PanelToggleEvent): void;
+}
+
+/**
+ * **PrimeVue - Panel**
+ *
+ * _Panel is a container with the optional content toggle feature._
+ *
+ * [Live Demo](https://www.primevue.org/panel/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class Panel extends ClassComponent<PanelProps, PanelSlots, PanelEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Panel: GlobalComponentConstructor<Panel>;
+    }
+}
+
+export default Panel;

components/lib/panel/Panel.spec.js

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import Panel from './Panel.vue';
+
+describe('Panel.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Panel, {
+            props: {
+                header: 'PrimeVue'
+            },
+            slots: {
+                default: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>'
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-panel.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-panel-content').text()).toBe('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt');
+        expect(wrapper.find('.p-panel-title').text()).toBe('PrimeVue');
+    });
+
+    it('should be toggleable', async () => {
+        await wrapper.setProps({ toggleable: true });
+
+        expect(wrapper.find('.p-panel.p-component').classes()).toContain('p-panel-toggleable');
+
+        await wrapper.vm.toggle({});
+
+        expect(wrapper.emitted().toggle[0]).toEqual([{ originalEvent: {}, value: true }]);
+    });
+});

components/lib/panel/Panel.vue

@@ -0,0 +1,116 @@
+<template>
+    <div :class="containerClass">
+        <div class="p-panel-header">
+            <slot name="header">
+                <span v-if="header" :id="ariaId + '_header'" class="p-panel-title">{{ header }}</span>
+            </slot>
+            <div class="p-panel-icons">
+                <slot name="icons"></slot>
+                <button
+                    v-if="toggleable"
+                    :id="ariaId + '_header'"
+                    v-ripple
+                    type="button"
+                    role="button"
+                    class="p-panel-header-icon p-panel-toggler p-link"
+                    :aria-label="buttonAriaLabel"
+                    :aria-controls="ariaId + '_content'"
+                    :aria-expanded="!d_collapsed"
+                    @click="toggle"
+                    @keydown="onKeyDown"
+                    v-bind="toggleButtonProps"
+                >
+                    <span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }"></span>
+                </button>
+            </div>
+        </div>
+        <transition name="p-toggleable-content">
+            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
+                <div class="p-panel-content">
+                    <slot></slot>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import Ripple from 'primevue/ripple';
+import { UniqueComponentId } from 'primevue/utils';
+
+export default {
+    name: 'Panel',
+    emits: ['update:collapsed', 'toggle'],
+    props: {
+        header: String,
+        toggleable: Boolean,
+        collapsed: Boolean,
+        toggleButtonProps: {
+            type: null,
+            default: null
+        }
+    },
+    data() {
+        return {
+            d_collapsed: this.collapsed
+        };
+    },
+    watch: {
+        collapsed(newValue) {
+            this.d_collapsed = newValue;
+        }
+    },
+    methods: {
+        toggle(event) {
+            this.d_collapsed = !this.d_collapsed;
+            this.$emit('update:collapsed', this.d_collapsed);
+            this.$emit('toggle', {
+                originalEvent: event,
+                value: this.d_collapsed
+            });
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter' || event.code === 'Space') {
+                this.toggle(event);
+                event.preventDefault();
+            }
+        }
+    },
+    computed: {
+        ariaId() {
+            return UniqueComponentId();
+        },
+        containerClass() {
+            return ['p-panel p-component', { 'p-panel-toggleable': this.toggleable }];
+        },
+        buttonAriaLabel() {
+            return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
+        }
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>
+
+<style>
+.p-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.p-panel-title {
+    line-height: 1;
+}
+
+.p-panel-header-icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+</style>

components/lib/panel/package.json

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