Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -0,0 +1,58 @@
+/**
+ *
+ * The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well.
+ *
+ * [Live Demo](https://www.primevue.org/dataview/)
+ *
+ * @module dataviewlayoutoptions
+ *
+ */
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Defines valid properties in DataViewLayoutOptions component.
+ */
+export interface DataViewLayoutOptionsProps {
+    /**
+     * Value of the component.
+     */
+    modelValue?: string | undefined;
+}
+
+/**
+ * Defines valid propslotserties in DataViewLayoutOptions component.
+ */
+export interface DataViewLayoutOptionsSlots {}
+
+/**
+ * Defines valid emits in DataViewLayoutOptions component.
+ */
+export interface DataViewLayoutOptionsEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {*} value - New value.
+     */
+    'update:modelValue'(value: string): void;
+}
+
+/**
+ * **PrimeVue - DataViewLayoutOptions**
+ *
+ * _The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well._
+ *
+ * [Live Demo](https://www.primevue.org/dataview/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class DataViewLayoutOptions extends ClassComponent<DataViewLayoutOptionsProps, DataViewLayoutOptionsSlots, DataViewLayoutOptionsEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        DataViewLayoutOptions: GlobalComponentConstructor<DataViewLayoutOptions>;
+    }
+}
+
+export default DataViewLayoutOptions;

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js

@@ -0,0 +1,32 @@
+import { config, mount } from '@vue/test-utils';
+import DataViewLayoutOptions from './DataViewLayoutOptions.vue';
+
+config.global.mocks = {
+    $primevue: {
+        config: {
+            locale: {
+                aria: {
+                    listView: 'listView',
+                    gridView: 'gridView'
+                }
+            }
+        }
+    }
+};
+
+describe('DataViewLayoutOptions.vue', () => {
+    it('should exist', async () => {
+        const wrapper = mount(DataViewLayoutOptions, {
+            props: {
+                modelValue: 'grid'
+            }
+        });
+
+        expect(wrapper.find('.p-dataview-layout-options').exists()).toBe(true);
+        expect(wrapper.find('.p-highlight > .pi-th-large').exists()).toBe(true);
+
+        wrapper.vm.$emit('update:modelValue', 'list');
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['list']);
+    });
+});

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="p-dataview-layout-options p-selectbutton p-buttonset" role="group">
+        <button :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed">
+            <i class="pi pi-bars"></i>
+        </button>
+        <button :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed">
+            <i class="pi pi-th-large"></i>
+        </button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataViewLayoutOptions',
+    emits: ['update:modelValue'],
+    props: {
+        modelValue: String
+    },
+    data() {
+        return {
+            isListButtonPressed: false,
+            isGridButtonPressed: false
+        };
+    },
+    methods: {
+        changeLayout(layout) {
+            this.$emit('update:modelValue', layout);
+
+            if (layout === 'list') {
+                this.isListButtonPressed = true;
+                this.isGridButtonPressed = false;
+            } else if (layout === 'grid') {
+                this.isGridButtonPressed = true;
+                this.isListButtonPressed = false;
+            }
+        }
+    },
+    computed: {
+        buttonListClass() {
+            return ['p-button p-button-icon-only', { 'p-highlight': this.modelValue === 'list' }];
+        },
+        buttonGridClass() {
+            return ['p-button p-button-icon-only', { 'p-highlight': this.modelValue === 'grid' }];
+        },
+        listViewAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listView : undefined;
+        },
+        gridViewAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.gridView : undefined;
+        }
+    }
+};
+</script>

components/lib/dataviewlayoutoptions/package.json

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