Refactor #5437 - For DataViewLayoutOptions

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -10,6 +10,7 @@
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
+import { SelectButtonPassThroughOptions } from '../selectbutton';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
 export declare type DataViewLayoutOptionsPassThroughOptionType =
@@ -56,24 +57,9 @@ export interface DataViewLayoutOptionsPassThroughMethodOptions {
 export interface DataViewLayoutOptionsPassThroughOptions {
     /**
      * Used to pass attributes to the root's DOM element.
+     * @see {@link SelectButtonPassThroughOptions}
      */
-    root?: DataViewLayoutOptionsPassThroughOptionType;
+    root?: SelectButtonPassThroughOptions<DataViewLayoutOptionsSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the list button's DOM element.
-     */
-    listButton?: DataViewLayoutOptionsPassThroughOptionType;
-    /**
-     * Used to pass attributes to the list icon's DOM element.
-     */
-    listIcon?: DataViewLayoutOptionsPassThroughOptionType;
-    /**
-     * Used to pass attributes to the grid button's DOM element.
-     */
-    gridButton?: DataViewLayoutOptionsPassThroughOptionType;
-    /**
-     * Used to pass attributes to the grid icon's DOM element.
-     */
-    gridIcon?: DataViewLayoutOptionsPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -93,15 +79,24 @@ export interface DataViewLayoutOptionsPassThroughAttributes {
  */
 export interface DataViewLayoutOptionsState {
     /**
-     * Current list button pressed state as a boolean.
+     * Default options of the component.
-     * @defaultValue false
+     * @defaultValue ['list', 'grid']
      */
-    isListButtonPressed: boolean;
+    options: string[];
+}
+
 /**
-     * Current grid button pressed state as a boolean.
+ * Custom shared passthrough(pt) option method.
-     * @defaultValue false
  */
-    isGridButtonPressed: boolean;
+export interface DataViewLayoutOptionsSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: DataViewLayoutOptionsProps;
+    /**
+     * Defines current inline state.
+     */
+    state: DataViewLayoutOptionsState;
 }
 
 /**

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue

@@ -1,21 +1,20 @@
 <template>
-    <div :class="cx('root')" role="group" v-bind="ptmi('root')">
+    <SelectButton :class="cx('root')" :modelValue="modelValue" :options="options" :allowEmpty="false" :unstyled="unstyled" @update:modelValue="changeLayout">
-        <button :aria-label="listViewAriaLabel" :class="cx('listButton')" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed" v-bind="ptm('listButton')">
+        <template #option="{ option }">
-            <slot name="listicon">
+            <slot v-if="option === 'list'" name="listicon">
                 <BarsIcon v-bind="ptm('listIcon')" />
             </slot>
-        </button>
+            <slot v-else-if="option === 'grid'" name="gridicon">
-        <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>
-        </button>
+        </template>
-    </div>
+    </SelectButton>
 </template>
 
 <script>
 import BarsIcon from 'primevue/icons/bars';
 import ThLargeIcon from 'primevue/icons/thlarge';
+import SelectButton from 'primevue/selectbutton';
 import BaseDataViewLayoutOptions from './BaseDataViewLayoutOptions.vue';
 
 export default {
@@ -25,21 +24,12 @@ export default {
     emits: ['update:modelValue'],
     data() {
         return {
-            isListButtonPressed: false,
+            options: ['list', 'grid']
-            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: {
@@ -51,8 +41,9 @@ export default {
         }
     },
     components: {
-        BarsIcon: BarsIcon,
+        SelectButton,
-        ThLargeIcon: ThLargeIcon
+        BarsIcon,
+        ThLargeIcon
     }
 };
 </script>

components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js

@@ -1,19 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: 'p-dataview-layout-options p-selectbutton p-button-group',
+    root: 'p-dataview-layout-options'
-    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 BaseStyle.extend({

components/lib/selectbutton/SelectButton.d.ts

@@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
+export declare type SelectButtonPassThroughOptionType<T = any> = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions<T>) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface SelectButtonPassThroughMethodOptions {
+export interface SelectButtonPassThroughMethodOptions<T = any> {
     /**
      * Defines instance.
      */
@@ -41,7 +41,7 @@ export interface SelectButtonPassThroughMethodOptions {
     /**
      * Defines parent options.
      */
-    parent: any;
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -52,19 +52,19 @@ export interface SelectButtonPassThroughMethodOptions {
  * Custom passthrough(pt) options.
  * @see {@link SelectButtonProps.pt}
  */
-export interface SelectButtonPassThroughOptions {
+export interface SelectButtonPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: SelectButtonPassThroughOptionType;
+    root?: SelectButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the button's DOM element.
      */
-    button?: SelectButtonPassThroughOptionType;
+    button?: SelectButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the label's DOM element.
      */
-    label?: SelectButtonPassThroughOptionType;
+    label?: SelectButtonPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/selectbutton/SelectButton.vue

@@ -5,7 +5,7 @@
             :key="getOptionRenderKey(option)"
             v-ripple
             :tabindex="findTabindex(option, i)"
-            :aria-label="getOptionLabel(option)"
+            :aria-label="getOptionLabel(option, i)"
             :role="multiple ? 'checkbox' : 'radio'"
             :aria-checked="isSelected(option)"
             :aria-disabled="isOptionDisabled(option)"
@@ -54,7 +54,11 @@ export default {
                 }
             }
         },
-        getOptionLabel(option) {
+        getOptionLabel(option, index) {
+            if (this.$parent.$name === 'DataViewLayoutOptions') {
+                return index === 0 ? this.$parent.listViewAriaLabel : this.$parent.gridViewAriaLabel;
+            }
+
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
         },
         getOptionValue(option) {

nuxt-vite.config.js

@@ -296,6 +296,7 @@ export default {
             'primevue/message': path.resolve(__dirname, './components/lib/message/Message.vue'),
             'primevue/tree': path.resolve(__dirname, './components/lib/tree/Tree.vue'),
             'primevue/badge': path.resolve(__dirname, './components/lib/badge/Badge.vue'),
+            'primevue/selectbutton': path.resolve(__dirname, './components/lib/selectbutton/SelectButton.vue'),
             'primevue/confirmationeventbus': path.resolve(__dirname, './components/lib/confirmationeventbus/ConfirmationEventBus.js'),
             'primevue/toasteventbus': path.resolve(__dirname, './components/lib/toasteventbus/ToastEventBus.js'),
             'primevue/overlayeventbus': path.resolve(__dirname, './components/lib/overlayeventbus/OverlayEventBus.js'),