From 80478bbfe19ae4a4a5cf185403ee9a588aad5053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Fri, 2 Jun 2023 19:04:55 +0300
Subject: [PATCH] Refactor #3965 - For DataViewLayoutOptions

---
 .../BaseDataViewLayoutOptions.vue             | 35 +++++++++++++++++++
 .../DataViewLayoutOptions.d.ts                |  5 +++
 .../DataViewLayoutOptions.vue                 | 19 +++-------
 3 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue

diff --git a/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue b/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue
new file mode 100644
index 000000000..a97f4f0ee
--- /dev/null
+++ b/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue
@@ -0,0 +1,35 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+const classes = {
+    root: 'p-dataview-layout-options p-selectbutton p-buttonset',
+    listButton: ({ props }) => [
+        'p-button p-button-icon-only',
+        {
+            'p-highlight': props.modelValue === 'list'
+        }
+    ],
+    gridButton: ({ props }) => [
+        'p-button p-button-icon-only',
+        {
+            'p-highlight': props.modelValue === 'grid'
+        }
+    ]
+};
+
+export default {
+    name: 'BaseDataViewLayoutOptions',
+    extends: BaseComponent,
+    props: {
+        modelValue: String
+    },
+    css: {
+        classes
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
index c60aa10b7..2e8a3b498 100755
--- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
+++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
@@ -83,6 +83,11 @@ export interface DataViewLayoutOptionsProps {
      * @type {DataViewLayoutOptionsPassThroughOptions}
      */
     pt?: DataViewLayoutOptionsPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
index cf06764fa..6ec26683b 100755
--- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
+++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="p-dataview-layout-options p-selectbutton p-buttonset" role="group" v-bind="ptm('root')">
-        <button :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed" v-bind="ptm('listButton')">
+    <div :class="cx('root')" role="group" v-bind="ptm('root')">
+        <button :aria-label="listViewAriaLabel" :class="cx('listButton')" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed" v-bind="ptm('listButton')">
             <slot name="listicon">
                 <BarsIcon v-bind="ptm('listIcon')" />
             </slot>
         </button>
-        <button :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed" v-bind="ptm('gridButton')">
+        <button :aria-label="gridViewAriaLabel" :class="cx('gridButton')" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed" v-bind="ptm('gridButton')">
             <slot name="gridicon">
                 <ThLargeIcon v-bind="ptm('gridIcon')" />
             </slot>
@@ -14,17 +14,14 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseDataViewLayoutOptions from './BaseDataViewLayoutOptions.vue';
 import BarsIcon from 'primevue/icons/bars';
 import ThLargeIcon from 'primevue/icons/thlarge';
 
 export default {
     name: 'DataViewLayoutOptions',
-    extends: BaseComponent,
+    extends: BaseDataViewLayoutOptions,
     emits: ['update:modelValue'],
-    props: {
-        modelValue: String
-    },
     data() {
         return {
             isListButtonPressed: false,
@@ -45,12 +42,6 @@ export default {
         }
     },
     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;
         },