Refactor #5476 - For DataViewLayoutOptions

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/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"
-}

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

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',