From 30beabe7b8ea4ed78b352f71f5d50f9a3fc4e0d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 7 Apr 2023 09:47:10 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For DataViewLayoutOptions

---
 .../components/dataviewlayoutoptions.js       | 24 ++++++++++++++++++-
 .../DataViewLayoutOptions.d.ts                | 14 +++++++++--
 .../DataViewLayoutOptions.spec.js             |  1 -
 .../DataViewLayoutOptions.vue                 | 15 ++++++++++--
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/api-generator/components/dataviewlayoutoptions.js b/api-generator/components/dataviewlayoutoptions.js
index 9e13d26db..e34ae325f 100644
--- a/api-generator/components/dataviewlayoutoptions.js
+++ b/api-generator/components/dataviewlayoutoptions.js
@@ -1,7 +1,29 @@
+const DataViewLayoutOptionsProps = [
+    {
+        name: 'modelValue',
+        type: 'string',
+        default: 'null',
+        description: 'Value of the component.'
+    }
+];
+
+const DataViewLayoutOptionsSlots = [
+    {
+        name: 'listicon',
+        description: 'Custom list icon template.'
+    },
+    {
+        name: 'gridicon',
+        description: 'Custom grid icon template.'
+    }
+];
+
 module.exports = {
     dataviewlayoutoptions: {
         name: 'DataViewLayoutOptions',
         description: 'When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView.',
-        'doc-url': 'dataview'
+        'doc-url': 'dataview',
+        props: DataViewLayoutOptionsProps,
+        slots: DataViewLayoutOptionsSlots
     }
 };
diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
index ccd8807d7..f463acb0f 100755
--- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
+++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
@@ -7,6 +7,7 @@
  * @module dataviewlayoutoptions
  *
  */
+import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 /**
@@ -20,9 +21,18 @@ export interface DataViewLayoutOptionsProps {
 }
 
 /**
- * Defines valid propslotserties in DataViewLayoutOptions component.
+ * Defines valid slots in DataViewLayoutOptions component.
  */
-export interface DataViewLayoutOptionsSlots {}
+export interface DataViewLayoutOptionsSlots {
+    /**
+     * Custom list icon template.
+     */
+    listicon(): VNode[];
+    /**
+     * Custom grid icon template.
+     */
+    gridicon(): VNode[];
+}
 
 /**
  * Defines valid emits in DataViewLayoutOptions component.
diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
index 38c6d5a1c..9e0f14dfd 100644
--- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
+++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
@@ -23,7 +23,6 @@ describe('DataViewLayoutOptions.vue', () => {
         });
 
         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');
 
diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
index dc84ae619..0b6ff0337 100755
--- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
+++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
@@ -1,15 +1,22 @@
 <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>
+            <slot name="listicon">
+                <BarsIcon />
+            </slot>
         </button>
         <button :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed">
-            <i class="pi pi-th-large"></i>
+            <slot name="gridicon">
+                <ThLargeIcon />
+            </slot>
         </button>
     </div>
 </template>
 
 <script>
+import BarsIcon from 'primevue/icon/bars';
+import ThLargeIcon from 'primevue/icon/thlarge';
+
 export default {
     name: 'DataViewLayoutOptions',
     emits: ['update:modelValue'],
@@ -48,6 +55,10 @@ export default {
         gridViewAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.gridView : undefined;
         }
+    },
+    components: {
+        BarsIcon: BarsIcon,
+        ThLargeIcon: ThLargeIcon
     }
 };
 </script>