Fixed #3802 - Improve folder structure for nuxt configurations

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>