Merge branch 'v4' of https://github.com/primefaces/primevue into v4

api-generator/components/dataviewlayoutoptions.js

@@ -1,35 +0,0 @@
-const DataViewLayoutOptionsProps = [
-    {
-        name: 'modelValue',
-        type: 'string',
-        default: 'null',
-        description: 'Value of the component.'
-    },
-    {
-        name: 'pt',
-        type: 'any',
-        default: 'null',
-        description: 'Used to pass attributes to DOM elements inside 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',
-        props: DataViewLayoutOptionsProps,
-        slots: DataViewLayoutOptionsSlots
-    }
-};

components/doc/codeeditor/templates.js

@@ -173,7 +173,6 @@ import ConfirmationService from 'primevue/confirmationservice';
 import ContextMenu from 'primevue/contextmenu';
 import DataTable from 'primevue/datatable';
 import DataView from 'primevue/dataview';
-import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions';
 import DeferredContent from 'primevue/deferredcontent';
 import Dialog from 'primevue/dialog';
 import DialogService from 'primevue/dialogservice'
@@ -294,7 +293,6 @@ app.component('ConfirmPopup', ConfirmPopup);
 app.component('ContextMenu', ContextMenu);
 app.component('DataTable', DataTable);
 app.component('DataView', DataView);
-app.component('DataViewLayoutOptions', DataViewLayoutOptions);
 app.component('DeferredContent', DeferredContent);
 app.component('Dialog', Dialog);
 app.component('Divider', Divider);

components/lib/config/PrimeVue.d.ts

@@ -26,7 +26,6 @@ import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
 import { ContextMenuPassThroughOptions } from '../contextmenu';
 import { DataTablePassThroughOptions } from '../datatable';
 import { DataViewPassThroughOptions } from '../dataview';
-import { DataViewLayoutOptionsPassThroughOptions } from '../dataviewlayoutoptions';
 import { DeferredContentPassThroughOptions } from '../deferredcontent';
 import { DialogPassThroughOptions } from '../dialog';
 import { DividerPassThroughOptions } from '../divider';
@@ -148,7 +147,6 @@ export interface PrimeVuePTOptions {
     contextmenu?: DefaultPassThrough<ContextMenuPassThroughOptions>;
     datatable?: DefaultPassThrough<DataTablePassThroughOptions>;
     dataview?: DefaultPassThrough<DataViewPassThroughOptions>;
-    dataviewlayoutoptions?: DefaultPassThrough<DataViewLayoutOptionsPassThroughOptions>;
     deferredcontent?: DefaultPassThrough<DeferredContentPassThroughOptions>;
     divider?: DefaultPassThrough<DividerPassThroughOptions>;
     dialog?: DefaultPassThrough<DialogPassThroughOptions>;

components/lib/datatable/BaseDataTable.vue

@@ -273,6 +273,17 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: Object,
+            default() {
+                return {
+                    addRule: { severity: 'info', text: true, size: 'small' },
+                    removeRule: { severity: 'danger', text: true, size: 'small' },
+                    apply: { size: 'small' },
+                    clear: { outlined: true, size: 'small' }
+                };
+            }
         }
     },
     style: DataTableStyle,

components/lib/datatable/ColumnFilter.vue

@@ -94,9 +94,7 @@
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
                                         :unstyled="unstyled"
-                                        text
+                                        v-bind="filterButtonProps.removeRule"
-                                        severity="danger"
-                                        size="small"
                                         :pt="getColumnPT('filterRemoveButton')"
                                     >
                                         <template #icon="iconProps">
@@ -114,9 +112,7 @@
                                 :class="cx('filterAddRuleButton')"
                                 @click="addConstraint()"
                                 :unstyled="unstyled"
-                                text
+                                v-bind="filterButtonProps.addRule"
-                                severity="info"
-                                size="small"
                                 :pt="getColumnPT('filterAddRuleButton')"
                             >
                                 <template #icon="iconProps">
@@ -132,13 +128,21 @@
                                 :label="clearButtonLabel"
                                 @click="clearFilter"
                                 :unstyled="unstyled"
-                                size="small"
+                                v-bind="filterButtonProps.clear"
-                                outlined
                                 :pt="getColumnPT('filterClearButton')"
                             ></CFButton>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
+                                <CFButton
+                                    v-if="!filterApplyTemplate"
+                                    type="button"
+                                    :class="cx('filterApplyButton')"
+                                    :label="applyButtonLabel"
+                                    @click="applyFilter()"
+                                    :unstyled="unstyled"
+                                    v-bind="filterButtonProps.apply"
+                                    :pt="getColumnPT('filterApplyButton')"
+                                ></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -275,6 +279,10 @@ export default {
             type: null,
             default: null
         },
+        filterButtonProps: {
+            type: null,
+            default: null
+        },
         column: null
     },
     data() {

components/lib/datatable/DataTable.d.ts

@@ -9,6 +9,7 @@
  */
 import { InputHTMLAttributes, TableHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonProps } from '../button';
 import { ColumnPassThroughOptionType } from '../column';
 import { ColumnGroupPassThroughOptionType } from '../columngroup';
 import { PaginatorPassThroughOptionType } from '../paginator';
@@ -159,6 +160,28 @@ export interface DataTableExportCSVOptions {
     selectionOnly: boolean;
 }
 
+/**
+ * Custom datatable filter button props options.
+ */
+export interface DataTableFilterButtonPropsOptions {
+    /**
+     * Add rule button props
+     */
+    addRule: ButtonProps | undefined;
+    /**
+     * Remove rule button props
+     */
+    removeRule: ButtonProps | undefined;
+    /**
+     * Apply button props
+     */
+    apply: ButtonProps | undefined;
+    /**
+     * Apply button props
+     */
+    clear: ButtonProps | undefined;
+}
+
 /**
  * Custom sort event.
  * @see {@link DataTableEmits.sort}
@@ -1130,6 +1153,16 @@ export interface DataTableProps {
      * Used to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
      */
     filterInputProps?: InputHTMLAttributes | undefined;
+    /**
+     * Used to pass all filter button property object
+     * @defaultValue {
+            addRule: { severity: 'info', text: true, size: 'small' },
+            removeRule: { severity: 'danger', text: true, size: 'small' },
+            apply: { size: 'small' },
+            clear: { outlined: true, size: 'small' }
+        }
+     */
+    filterButtonProps?: DataTableFilterButtonPropsOptions | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {DataTablePassThroughOptions}

components/lib/datatable/DataTable.vue

@@ -86,6 +86,7 @@
                             :filters="d_filters"
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
+                            :filterButtonProps="headerFilterButtonProps"
                             :filterInputProps="filterInputProps"
                             :first="d_first"
                             @column-click="onColumnHeaderClick($event)"
@@ -2069,6 +2070,17 @@ export default {
         groupRowSortField() {
             return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
         },
+        headerFilterButtonProps() {
+            return {
+                ...{
+                    addRule: { severity: 'info', text: true, size: 'small' },
+                    removeRule: { severity: 'danger', text: true, size: 'small' },
+                    apply: { size: 'small' },
+                    clear: { outlined: true, size: 'small' }
+                },
+                ...this.filterButtonProps
+            };
+        },
         virtualScrollerDisabled() {
             return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
         }

components/lib/datatable/HeaderCell.vue

@@ -58,6 +58,7 @@
                 :filters="filters"
                 :filtersStore="filtersStore"
                 :filterInputProps="filterInputProps"
+                :filterButtonProps="filterButtonProps"
                 @filter-change="$emit('filter-change', $event)"
                 @filter-apply="$emit('filter-apply')"
                 :filterMenuStyle="columnProp('filterMenuStyle')"
@@ -182,6 +183,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: null,
+            default: null
         }
     },
     data() {

components/lib/datatable/TableHeader.vue

@@ -29,6 +29,7 @@
                         :filterDisplay="filterDisplay"
                         :filtersStore="filtersStore"
                         :filterInputProps="filterInputProps"
+                        :filterButtonProps="filterButtonProps"
                         :first="first"
                         @filter-change="$emit('filter-change', $event)"
                         @filter-apply="$emit('filter-apply')"
@@ -69,6 +70,7 @@
                             :filters="filters"
                             :filtersStore="filtersStore"
                             :filterInputProps="filterInputProps"
+                            :filterButtonProps="filterButtonProps"
                             @filter-change="$emit('filter-change', $event)"
                             @filter-apply="$emit('filter-apply')"
                             :filterMenuStyle="columnProp(col, 'filterMenuStyle')"
@@ -231,6 +233,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: null,
+            default: null
         }
     },
     provide() {

components/lib/dataview/DataView.d.ts

@@ -328,7 +328,7 @@ export interface DataViewEmits {
 }
 
 /**
- * **PrimeVue - DataViewLayoutOptions**
+ * **PrimeVue - DataView**
  *
  * _DataView displays data in grid or list layout with pagination and sorting features._
  *

components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue

@@ -1,18 +0,0 @@
-<script>
-import BaseComponent from 'primevue/basecomponent';
-import DataViewLayoutOptionsStyle from 'primevue/dataviewlayoutoptions/style';
-
-export default {
-    name: 'BaseDataViewLayoutOptions',
-    extends: BaseComponent,
-    props: {
-        modelValue: String
-    },
-    style: DataViewLayoutOptionsStyle,
-    provide() {
-        return {
-            $parentInstance: this
-        };
-    }
-};
-</script>

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -1,185 +0,0 @@
-/**
- *
- * The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well.
- *
- * [Live Demo](https://www.primevue.org/dataview/)
- *
- * @module dataviewlayoutoptions
- *
- */
-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 =
-    | DataViewLayoutOptionsPassThroughAttributes
-    | ((options: DataViewLayoutOptionsPassThroughMethodOptions) => DataViewLayoutOptionsPassThroughAttributes | string)
-    | string
-    | null
-    | undefined;
-
-/**
- * Custom passthrough(pt) option method.
- */
-export interface DataViewLayoutOptionsPassThroughMethodOptions {
-    /**
-     * Defines instance.
-     */
-    instance: any;
-    /**
-     * Defines valid properties.
-     */
-    props: DataViewLayoutOptionsProps;
-    /**
-     * Defines current inline state.
-     */
-    state: DataViewLayoutOptionsState;
-    /**
-     * Defines valid attributes.
-     */
-    attrs: any;
-    /**
-     * Defines parent options.
-     */
-    parent: any;
-    /**
-     * Defines passthrough(pt) options in global config.
-     */
-    global: object | undefined;
-}
-
-/**
- * Custom passthrough(pt) options.
- * @see {@link DataViewLayoutOptionsProps.pt}
- */
-export interface DataViewLayoutOptionsPassThroughOptions {
-    /**
-     * Used to pass attributes to the root's DOM element.
-     * @see {@link SelectButtonPassThroughOptions}
-     */
-    root?: SelectButtonPassThroughOptions<DataViewLayoutOptionsSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the root's DOM element.
-     * @see {@link SelectButtonPassThroughOptions}
-     */
-    selectbutton?: SelectButtonPassThroughOptions<DataViewLayoutOptionsSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the list icon's DOM element.
-     */
-    listIcon?: DataViewLayoutOptionsPassThroughOptionType;
-    /**
-     * Used to pass attributes to the grid icon's DOM element.
-     */
-    gridIcon?: DataViewLayoutOptionsPassThroughOptionType;
-    /**
-     * Used to manage all lifecycle hooks.
-     * @see {@link BaseComponent.ComponentHooks}
-     */
-    hooks?: ComponentHooks;
-}
-
-/**
- * Custom passthrough attributes for each DOM elements
- */
-export interface DataViewLayoutOptionsPassThroughAttributes {
-    [key: string]: any;
-}
-
-/**
- * Defines current inline state in DataViewLayoutOptions component.
- */
-export interface DataViewLayoutOptionsState {
-    /**
-     * Default options of the component.
-     * @defaultValue ['list', 'grid']
-     */
-    options: string[];
-}
-
-/**
- * Custom shared passthrough(pt) option method.
- */
-export interface DataViewLayoutOptionsSharedPassThroughMethodOptions {
-    /**
-     * Defines valid properties.
-     */
-    props: DataViewLayoutOptionsProps;
-    /**
-     * Defines current inline state.
-     */
-    state: DataViewLayoutOptionsState;
-}
-
-/**
- * Defines valid properties in DataViewLayoutOptions component.
- */
-export interface DataViewLayoutOptionsProps {
-    /**
-     * Value of the component.
-     */
-    modelValue?: string | undefined;
-    /**
-     * Used to pass attributes to DOM elements inside the component.
-     * @type {DataViewLayoutOptionsPassThroughOptions}
-     */
-    pt?: PassThrough<DataViewLayoutOptionsPassThroughOptions>;
-    /**
-     * Used to configure passthrough(pt) options of the component.
-     * @type {PassThroughOptions}
-     */
-    ptOptions?: PassThroughOptions;
-    /**
-     * When enabled, it removes component related styles in the core.
-     * @defaultValue false
-     */
-    unstyled?: boolean;
-}
-
-/**
- * Defines valid slots in DataViewLayoutOptions component.
- */
-export interface DataViewLayoutOptionsSlots {
-    /**
-     * Custom list icon template.
-     */
-    listicon(): VNode[];
-    /**
-     * Custom grid icon template.
-     */
-    gridicon(): VNode[];
-}
-
-/**
- * Defines valid emits in DataViewLayoutOptions component.
- */
-export interface DataViewLayoutOptionsEmits {
-    /**
-     * Emitted when the value changes.
-     * @param {*} value - New value.
-     */
-    'update:modelValue'(value: string): void;
-}
-
-/**
- * **PrimeVue - DataViewLayoutOptions**
- *
- * _The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well._
- *
- * [Live Demo](https://www.primevue.org/dataview/)
- * --- ---
- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
- *
- * @group Component
- *
- */
-declare class DataViewLayoutOptions extends ClassComponent<DataViewLayoutOptionsProps, DataViewLayoutOptionsSlots, DataViewLayoutOptionsEmits> {}
-
-declare module 'vue' {
-    export interface GlobalComponents {
-        DataViewLayoutOptions: GlobalComponentConstructor<DataViewLayoutOptions>;
-    }
-}
-
-export default DataViewLayoutOptions;

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js

@@ -1,18 +0,0 @@
-import { mount } from '@vue/test-utils';
-import DataViewLayoutOptions from './DataViewLayoutOptions.vue';
-
-describe('DataViewLayoutOptions.vue', () => {
-    it('should exist', async () => {
-        const wrapper = mount(DataViewLayoutOptions, {
-            props: {
-                modelValue: 'grid'
-            }
-        });
-
-        expect(wrapper.find('.p-dataview-layout-options').exists()).toBe(true);
-
-        wrapper.vm.$emit('update:modelValue', 'list');
-
-        expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['list']);
-    });
-});

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue

@@ -1,49 +0,0 @@
-<template>
-    <SelectButton :class="cx('root')" :modelValue="modelValue" :options="options" :allowEmpty="false" :unstyled="unstyled" :pt="{ ...ptm('selectbutton'), ...ptm('root') }" @update:modelValue="changeLayout">
-        <template #option="{ option }">
-            <slot v-if="option === 'list'" name="listicon">
-                <BarsIcon v-bind="ptm('listIcon')" />
-            </slot>
-            <slot v-else-if="option === 'grid'" name="gridicon">
-                <ThLargeIcon v-bind="ptm('gridIcon')" />
-            </slot>
-        </template>
-    </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 {
-    name: 'DataViewLayoutOptions',
-    extends: BaseDataViewLayoutOptions,
-    inheritAttrs: false,
-    emits: ['update:modelValue'],
-    data() {
-        return {
-            options: ['list', 'grid']
-        };
-    },
-    methods: {
-        changeLayout(layout) {
-            this.$emit('update:modelValue', layout);
-        }
-    },
-    computed: {
-        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;
-        }
-    },
-    components: {
-        SelectButton,
-        BarsIcon,
-        ThLargeIcon
-    }
-};
-</script>

components/lib/dataviewlayoutoptions/package.json

@@ -1,9 +0,0 @@
-{
-    "main": "./dataviewlayoutoptions.cjs.js",
-    "module": "./dataviewlayoutoptions.esm.js",
-    "unpkg": "./dataviewlayoutoptions.min.js",
-    "types": "./DataViewLayoutOptions.d.ts",
-    "browser": {
-        "./sfc": "./DataViewLayoutOptions.vue"
-    }
-}

components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.d.ts

@@ -1,3 +0,0 @@
-import { BaseStyle } from '../../base/style';
-
-export interface DataViewLayoutOptionsStyle extends BaseStyle {}

components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js

@@ -1,10 +0,0 @@
-import BaseStyle from 'primevue/base/style';
-
-const classes = {
-    root: 'p-dataview-layout-options'
-};
-
-export default BaseStyle.extend({
-    name: 'dataviewlayoutoptions',
-    classes
-});

components/lib/dataviewlayoutoptions/style/package.json

@@ -1,6 +0,0 @@
-{
-    "main": "./dataviewlayoutoptionsstyle.cjs.js",
-    "module": "./dataviewlayoutoptionsstyle.esm.js",
-    "unpkg": "./dataviewlayoutoptionsstyle.min.js",
-    "types": "./DataViewLayoutOptionsStyle.d.ts"
-}

components/lib/listbox/Listbox.vue

@@ -11,7 +11,9 @@
             :data-p-hidden-accessible="true"
             :data-p-hidden-focusable="true"
         ></span>
+        <div :class="cx('header')">
             <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
+        </div>
         <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
             <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
                 <InputText

components/lib/orderlist/OrderList.d.ts

@@ -133,10 +133,6 @@ export interface OrderListPassThroughOptions {
      * Used to pass attributes to the container's DOM element.
      */
     container?: OrderListPassThroughOptionType;
-    /**
-     * Used to pass attributes to the header's DOM element.
-     */
-    header?: OrderListPassThroughOptionType;
     /**
      * Used to pass attributes to the Listbox component.
      * @see {@link ListboxPassThroughOptions}

components/lib/orderlist/OrderList.vue

@@ -55,9 +55,7 @@
             @change="onChangeSelection"
         >
             <template v-if="$slots.header" #header>
-                <div :class="cx('header')" v-bind="ptm('header')">
                 <slot name="header"></slot>
-                </div>
             </template>
             <template #option="{ option, index }">
                 <slot name="item" :item="option" :index="index" />

components/lib/orderlist/style/OrderListStyle.js

@@ -4,7 +4,6 @@ const classes = {
     root: 'p-orderlist p-component',
     controls: 'p-orderlist-controls',
     container: 'p-orderlist-list-container',
-    header: 'p-orderlist-header',
     list: 'p-orderlist-list',
     item: 'p-orderlist-item'
 };

components/lib/picklist/PickList.d.ts

@@ -172,10 +172,6 @@ export interface PickListPassThroughOptions {
      * Used to pass attributes to the source wrapper's DOM element.
      */
     sourceWrapper?: PickListPassThroughOptionType;
-    /**
-     * Used to pass attributes to the source header's DOM element.
-     */
-    sourceHeader?: PickListPassThroughOptionType;
     /**
      * Used to pass attributes to the source list's DOM element.
      */
@@ -204,10 +200,6 @@ export interface PickListPassThroughOptions {
      * Used to pass attributes to the target wrapper's DOM element.
      */
     targetWrapper?: PickListPassThroughOptionType;
-    /**
-     * Used to pass attributes to the target header's DOM element.
-     */
-    targetHeader?: PickListPassThroughOptionType;
     /**
      * Used to pass attributes to the target list's DOM element.
      */

components/lib/picklist/PickList.vue

@@ -56,9 +56,7 @@
                 data-pc-group-section="list"
             >
                 <template v-if="$slots.sourceheader" #header>
-                    <div :class="cx('sourceHeader')" v-bind="ptm('sourceHeader')" data-pc-group-section="header">
                     <slot name="sourceheader"></slot>
-                    </div>
                 </template>
                 <template #option="{ option, index }">
                     <slot name="item" :item="option" :index="index" />
@@ -121,9 +119,7 @@
                 data-pc-group-section="list"
             >
                 <template v-if="$slots.targetheader" #header>
-                    <div :class="cx('targetheader')" v-bind="ptm('targetheader')" data-pc-group-section="header">
                     <slot name="targetheader"></slot>
-                    </div>
                 </template>
                 <template #option="{ option, index }">
                     <slot name="item" :item="option" :index="index" />

components/lib/picklist/style/PickListStyle.js

@@ -4,11 +4,9 @@ const classes = {
     root: 'p-picklist p-component',
     sourceControls: 'p-picklist-buttons p-picklist-source-controls',
     sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
-    sourceHeader: 'p-picklist-header',
     sourceList: 'p-picklist-list p-picklist-source-list',
     buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
     targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
-    targetHeader: 'p-picklist-header',
     targetList: 'p-picklist-list p-picklist-target',
     item: 'p-picklist-item',
     targetControls: 'p-picklist-buttons p-picklist-target-controls'

components/lib/selectbutton/SelectButton.d.ts

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

components/lib/selectbutton/SelectButton.vue

@@ -1,26 +1,29 @@
 <template>
     <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
-        <button
+        <template v-for="(option, index) of options" :key="getOptionRenderKey(option)">
-            v-for="(option, i) of options"
+            <ToggleButton
-            :key="getOptionRenderKey(option)"
+                :modelValue="isSelected(option)"
-            v-ripple
+                :onLabel="getOptionLabel(option)"
-            :aria-pressed="isSelected(option)"
+                :offLabel="getOptionLabel(option)"
-            :aria-disabled="isOptionDisabled(option)"
+                :disabled="disabled"
-            :class="cx('button', { option })"
+                :invalid="invalid"
-            @click="onOptionSelect($event, option, i)"
+                :unstyled="unstyled"
-            v-bind="getPTOptions(option, 'button')"
+                @change="onOptionSelect($event, option, index)"
-            :data-p-highlight="isSelected(option)"
+                :pt="ptm('button')"
-            :data-p-disabled="isOptionDisabled(option)"
             >
-            <slot name="option" :option="option" :index="i" :class="cx('label')">
+                <template v-if="$slots.option" #default>
-                <span :class="cx('label')" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
+                    <slot name="option" :option="option" :index="index">
+                        <span v-bind="ptm('button')['label']">{{ getOptionLabel(option) }}</span>
                     </slot>
-        </button>
+                </template>
+            </ToggleButton>
+        </template>
     </div>
 </template>
 
 <script>
 import Ripple from 'primevue/ripple';
+import ToggleButton from 'primevue/togglebutton';
 import { ObjectUtils } from 'primevue/utils';
 import BaseSelectButton from './BaseSelectButton.vue';
 
@@ -103,6 +106,9 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        ToggleButton
     }
 };
 </script>

components/lib/togglebutton/ToggleButton.d.ts

@@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type ToggleButtonPassThroughOptionType = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
+export declare type ToggleButtonPassThroughOptionType<T = any> = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions<T = any>) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface ToggleButtonPassThroughMethodOptions {
+export interface ToggleButtonPassThroughMethodOptions<T = any> {
     /**
      * Defines instance.
      */
@@ -37,7 +37,7 @@ export interface ToggleButtonPassThroughMethodOptions {
     /**
      * Defines parent options.
      */
-    parent: any;
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -48,19 +48,19 @@ export interface ToggleButtonPassThroughMethodOptions {
  * Custom passthrough(pt) options.
  * @see {@link ToggleButtonProps.pt}
  */
-export interface ToggleButtonPassThroughOptions {
+export interface ToggleButtonPassThroughOptions<T = any>  {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: ToggleButtonPassThroughOptionType;
+    root?: ToggleButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the icon's DOM element.
      */
-    icon?: ToggleButtonPassThroughOptionType;
+    icon?: ToggleButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the label's DOM element.
      */
-    label?: ToggleButtonPassThroughOptionType;
+    label?: ToggleButtonPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -173,6 +173,10 @@ export interface ToggleButtonProps {
  * Defines valid slots in ToggleButton component.
  */
 export interface ToggleButtonSlots {
+    /**
+     * Custom content such as icons, images and text can be placed inside the button via the default slot.
+     */
+    default(): VNode[];
     /**
      * Custom icon template.
      * @param {Object} scope - icon slot's params.

components/lib/togglebutton/ToggleButton.vue

@@ -1,9 +1,11 @@
 <template>
     <button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
+        <slot>
             <slot name="icon" :value="modelValue" :class="cx('icon')">
                 <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
             </slot>
             <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
+        </slot>
     </button>
 </template>
 

doc/dataview/ImportDoc.vue

@@ -10,7 +10,6 @@ export default {
             code: {
                 basic: `
 import DataView from 'primevue/dataview';
-import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'   // optional
 `
             }
         };

doc/dataview/LayoutDoc.vue

@@ -1,15 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
+        <p>DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property.</p>
-            DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The helper <i>DataViewLayoutOptions</i> component can be used to switch between the modes however this component is optional and you may
-            use your own UI to switch modes as well.
-        </p>
     </DocSectionText>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
                 <div class="flex justify-content-end">
-                    <DataViewLayoutOptions v-model="layout" />
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                        </template>
+                    </SelectButton>
                 </div>
             </template>
 
@@ -95,12 +96,17 @@ export default {
         return {
             products: null,
             layout: 'grid',
+            options: ['list', 'grid'],
             code: {
                 basic: `
 <DataView :value="products" :layout="layout">
     <template #header>
         <div class="flex justify-content-end">
-            <DataViewLayoutOptions v-model="layout" />
+            <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                <template #option="{ option }">
+                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                </template>
+            </SelectButton>
         </div>
     </template>
 
@@ -181,7 +187,11 @@ export default {
         <DataView :value="products" :layout="layout">
             <template #header>
                 <div class="flex justify-content-end">
-                    <DataViewLayoutOptions v-model="layout" />
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                        </template>
+                    </SelectButton>
                 </div>
             </template>
 
@@ -265,7 +275,8 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid'
+            layout: 'grid',
+            options: ['list', 'grid'],
         }
     },
     mounted() {
@@ -297,7 +308,11 @@ export default {
         <DataView :value="products" :layout="layout">
             <template #header>
                 <div class="flex justify-content-end">
-                    <DataViewLayoutOptions v-model="layout" />
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                        </template>
+                    </SelectButton>
                 </div>
             </template>
 
@@ -384,6 +399,7 @@ onMounted(() => {
 
 const products = ref();
 const layout = ref('grid');
+const options = ref(['list', 'grid']);
 
 const getSeverity = (product) => {
     switch (product.inventoryStatus) {

doc/dataview/LoadingDoc.vue

@@ -6,7 +6,11 @@
         <DataView :value="products" :layout="layout">
             <template #header>
                 <div class="flex justify-content-end">
-                    <DataViewLayoutOptions v-model="layout" />
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                        </template>
+                    </SelectButton>
                 </div>
             </template>
 
@@ -68,12 +72,17 @@ export default {
         return {
             products: null,
             layout: 'grid',
+            options: ['list', 'grid'],
             code: {
                 basic: `
 <DataView :value="products" :layout="layout">
     <template #header>
         <div class="flex justify-content-end">
-            <DataViewLayoutOptions v-model="layout" />
+            <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                <template #option="{ option }">
+                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                </template>
+            </SelectButton>
         </div>
     </template>
 
@@ -130,7 +139,11 @@ export default {
         <DataView :value="products" :layout="layout">
             <template #header>
                 <div class="flex justify-content-end">
-                    <DataViewLayoutOptions v-model="layout" />
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                        </template>
+                    </SelectButton>
                 </div>
             </template>
 
@@ -190,7 +203,8 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid'
+            layout: 'grid',
+            options: ['list', 'grid'],
         }
     },
     mounted() {
@@ -222,7 +236,11 @@ export default {
         <DataView :value="products" :layout="layout">
             <template #header>
                 <div class="flex justify-content-end">
-                    <DataViewLayoutOptions v-model="layout" />
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
+                        </template>
+                    </SelectButton>
                 </div>
             </template>
 
@@ -285,6 +303,7 @@ onMounted(() => {
 
 const products = ref();
 const layout = ref('grid');
+const options = ref(['list', 'grid']);
 
 const getSeverity = (product) => {
     switch (product.inventoryStatus) {

doc/dataview/pt/index.vue

@@ -27,12 +27,6 @@ export default {
                     label: 'DataView PT Options',
                     component: DocApiTable,
                     data: getPTOption('DataView')
-                },
-                {
-                    id: 'pt.doc.dataviewlayoutoptions',
-                    label: 'DataViewLayoutOptions PT Options',
-                    component: DocApiTable,
-                    data: getPTOption('DataViewLayoutOptions')
                 }
             ]
         };

modules/nuxt-primevue/runtime/core/components/index.js

@@ -33,7 +33,7 @@ const form = [
 
 const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton'];
 
-const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'DataViewLayoutOptions', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller'];
+const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller'];
 
 const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'Stepper', 'StepperPanel', 'TabView', 'TabPanel', 'Toolbar'];
 

nuxt-vite.config.js

@@ -34,7 +34,6 @@ const STYLE_ALIAS = {
     'primevue/contextmenu/style': path.resolve(__dirname, './components/lib/contextmenu/style/ContextMenuStyle.js'),
     'primevue/datatable/style': path.resolve(__dirname, './components/lib/datatable/style/DataTableStyle.js'),
     'primevue/dataview/style': path.resolve(__dirname, './components/lib/dataview/style/DataViewStyle.js'),
-    'primevue/dataviewlayoutoptions/style': path.resolve(__dirname, './components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js'),
     'primevue/deferredcontent/style': path.resolve(__dirname, './components/lib/deferredcontent/style/DeferredContentStyle.js'),
     'primevue/dialog/style': path.resolve(__dirname, './components/lib/dialog/style/DialogStyle.js'),
     'primevue/divider/style': path.resolve(__dirname, './components/lib/divider/style/DividerStyle.js'),
@@ -296,7 +295,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/togglebutton': path.resolve(__dirname, './components/lib/togglebutton/ToggleButton.vue'),
             'primevue/listbox': path.resolve(__dirname, './components/lib/listbox/Listbox.vue'),
             'primevue/confirmationeventbus': path.resolve(__dirname, './components/lib/confirmationeventbus/ConfirmationEventBus.js'),
             'primevue/toasteventbus': path.resolve(__dirname, './components/lib/toasteventbus/ToastEventBus.js'),

pages/dataview/index.vue

@@ -4,7 +4,7 @@
         header="DataView"
         description="DataView displays data in grid or list layout with pagination and sorting features."
         :componentDocs="docs"
-        :apiDocs="['DataView', 'DataViewLayoutOptions']"
+        :apiDocs="['DataView']"
         :ptTabComponent="ptComponent"
         :themingDocs="themingDoc"
     />

rollup.config.js

@@ -99,7 +99,6 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/contextmenu/style': 'primevue.contextmenu.style',
     'primevue/datatable/style': 'primevue.datatable.style',
     'primevue/dataview/style': 'primevue.dataview.style',
-    'primevue/dataviewlayoutoptions/style': 'primevue.dataviewlayoutoptions.style',
     'primevue/deferredcontent/style': 'primevue.deferredcontent.style',
     'primevue/dialog/style': 'primevue.dialog.style',
     'primevue/divider/style': 'primevue.divider.style',
@@ -213,6 +212,8 @@ const CORE_DEPENDENCIES = {
     'primevue/menu': 'primevue.menu',
     'primevue/tieredmenu': 'primevue.tieredmenu',
     'primevue/badge': 'primevue.badge',
+    'primevue/listbox': 'primevue.listbox',
+    'primevue/togglebutton': 'primevue.togglebutton',
     ...CORE_PASSTHROUGH_DEPENDENCIES
 };