Refactor #3832 Refactor #3833 - For DataViewLayoutOptions

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
     }
 };

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.

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');
 

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>