Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/fieldset/Fieldset.d.ts

@@ -0,0 +1,102 @@
+/**
+ *
+ * Fieldset is a grouping component with the optional content toggle feature.
+ *
+ * [Live Demo](https://www.primevue.org/fieldset/)
+ *
+ * @module fieldset
+ *
+ */
+import { AnchorHTMLAttributes, VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Custom toggle event.
+ * @see {@link FieldsetEmits.toggle}
+ */
+export interface FieldsetToggleEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Collapsed state as a boolean
+     */
+    value: boolean;
+}
+
+/**
+ * Defines valid properties in Fieldset component.
+ */
+export interface FieldsetProps {
+    /**
+     * Header text of the fieldset.
+     */
+    legend?: string | undefined;
+    /**
+     * When specified, content can toggled by clicking the legend.
+     * @defaultValue false
+     */
+    toggleable?: boolean | undefined;
+    /**
+     * Defines the default visibility state of the content.
+     * @defaultValue false
+     */
+    collapsed?: boolean | undefined;
+    /**
+     * Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.
+     */
+    toggleButtonProps?: AnchorHTMLAttributes | undefined;
+}
+
+/**
+ * Defines valid slots in Fieldset slots.
+ */
+export interface FieldsetSlots {
+    /**
+     * Default content slot.
+     */
+    default: () => VNode[];
+    /**
+     * Custom legend template.
+     */
+    legend: () => VNode[];
+}
+
+/**
+ * Defines valid emits in Fildset component.
+ */
+export interface FieldsetEmits {
+    /**
+     * Emitted when the collapsed changes.
+     * @param {boolean} value - New value.
+     */
+    'update:collapsed'(value: boolean): void;
+    /**
+     * Callback to invoke when a tab gets expanded or collapsed.
+     * @param {FieldsetToggleEvent} event - Custom toggle event.
+     */
+    toggle(event: FieldsetToggleEvent): void;
+}
+
+/**
+ * **PrimeVue - Fieldset**
+ *
+ * _Fieldset is a grouping component with the optional content toggle feature._
+ *
+ * [Live Demo](https://www.primevue.org/fieldset/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class Fieldset extends ClassComponent<FieldsetProps, FieldsetSlots, FieldsetEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Fieldset: GlobalComponentConstructor<Fieldset>;
+    }
+}
+
+export default Fieldset;

components/lib/fieldset/Fieldset.spec.js

@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils';
+import Fieldset from './Fieldset.vue';
+
+describe('Fieldset.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Fieldset, {
+            props: {
+                legend: 'Header',
+                toggleable: true,
+                collapsed: true
+            },
+            slots: {
+                default: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>`
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-fieldset.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-fieldset-legend').exists()).toBe(true);
+        expect(wrapper.find('.p-toggleable-content').exists()).toBe(true);
+    });
+
+    it('toggleable check', async () => {
+        await wrapper.setProps({ collapsed: false });
+        wrapper.vm.toggle({});
+        expect(wrapper.emitted()['update:collapsed'][0]).toEqual([true]);
+    });
+});

components/lib/fieldset/Fieldset.vue

@@ -0,0 +1,120 @@
+<template>
+    <fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]">
+        <legend class="p-fieldset-legend">
+            <slot v-if="!toggleable" name="legend">
+                <span :id="ariaId + '_header'" class="p-fieldset-legend-text">{{ legend }}</span>
+            </slot>
+            <a
+                v-if="toggleable"
+                :id="ariaId + '_header'"
+                v-ripple
+                tabindex="0"
+                role="button"
+                :aria-controls="ariaId + '_content'"
+                :aria-expanded="!d_collapsed"
+                :aria-label="buttonAriaLabel"
+                @click="toggle"
+                @keydown="onKeyDown"
+                v-bind="toggleButtonProps"
+            >
+                <span :class="iconClass"></span>
+                <slot name="legend">
+                    <span class="p-fieldset-legend-text">{{ legend }}</span>
+                </slot>
+            </a>
+        </legend>
+        <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-fieldset-content">
+                    <slot></slot>
+                </div>
+            </div>
+        </transition>
+    </fieldset>
+</template>
+
+<script>
+import Ripple from 'primevue/ripple';
+import { UniqueComponentId } from 'primevue/utils';
+
+export default {
+    name: 'Fieldset',
+    emits: ['update:collapsed', 'toggle'],
+    props: {
+        legend: 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: {
+        iconClass() {
+            return [
+                'p-fieldset-toggler pi ',
+                {
+                    'pi-minus': !this.d_collapsed,
+                    'pi-plus': this.d_collapsed
+                }
+            ];
+        },
+        ariaId() {
+            return UniqueComponentId();
+        },
+        buttonAriaLabel() {
+            return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.legend;
+        }
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>
+
+<style>
+.p-fieldset-legend > a,
+.p-fieldset-legend > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-fieldset-toggleable .p-fieldset-legend a {
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+    text-decoration: none;
+}
+
+.p-fieldset-legend-text {
+    line-height: 1;
+}
+</style>

components/lib/fieldset/package.json

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