Refactor #3965 - For DataView

components/lib/dataview/BaseDataView.vue

@@ -0,0 +1,100 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+const classes = {
+    root: ({ props }) => [
+        'p-dataview p-component',
+        {
+            'p-dataview-list': props.layout === 'list',
+            'p-dataview-grid': props.layout === 'grid'
+        }
+    ],
+    header: 'p-dataview-header',
+    paginatorTop: ({ instance }) => [{ 'p-paginator-top': instance.paginatorTop }],
+    content: 'p-dataview-content',
+    grid: 'p-grid p-nogutter grid grid-nogutter',
+    column: 'p-col col',
+    emptyMessage: 'p-dataview-emptymessage',
+    paginatorBottom: ({ instance }) => [{ 'p-paginator-bottom': instance.paginatorBottom }],
+    footer: 'p-dataview-footer'
+};
+
+export default {
+    name: 'BaseDataView',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: Array,
+            default: null
+        },
+        layout: {
+            type: String,
+            default: 'list'
+        },
+        rows: {
+            type: Number,
+            default: 0
+        },
+        first: {
+            type: Number,
+            default: 0
+        },
+        totalRecords: {
+            type: Number,
+            default: 0
+        },
+        paginator: {
+            type: Boolean,
+            default: false
+        },
+        paginatorPosition: {
+            type: String,
+            default: 'bottom'
+        },
+        alwaysShowPaginator: {
+            type: Boolean,
+            default: true
+        },
+        paginatorTemplate: {
+            type: String,
+            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+        },
+        pageLinkSize: {
+            type: Number,
+            default: 5
+        },
+        rowsPerPageOptions: {
+            type: Array,
+            default: null
+        },
+        currentPageReportTemplate: {
+            type: String,
+            default: '({currentPage} of {totalPages})'
+        },
+        sortField: {
+            type: [String, Function],
+            default: null
+        },
+        sortOrder: {
+            type: Number,
+            default: null
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        dataKey: {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/dataview/DataView.d.ts

@@ -202,6 +202,11 @@ export interface DataViewProps {
      * @type {DataViewPassThroughOptions}
      */
     pt?: DataViewPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/dataview/DataView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')">
-        <div v-if="$slots.header" class="p-dataview-header" v-bind="ptm('header')">
+        <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
         <DVPaginator
@@ -12,9 +12,10 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            :class="{ 'p-paginator-top': paginatorTop }"
+            :class="cx('paginatorTop')"
             :alwaysShow="alwaysShowPaginator"
             @page="onPage($event)"
+            :unstyled="unstyled"
             :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
@@ -24,14 +25,14 @@
                 <slot name="paginatorend"></slot>
             </template>
         </DVPaginator>
-        <div class="p-dataview-content" v-bind="ptm('content')">
+        <div :class="cx('content')" v-bind="ptm('content')">
-            <div class="p-grid p-nogutter grid grid-nogutter" v-bind="ptm('grid')">
+            <div :class="cx('grid')" v-bind="ptm('grid')">
                 <template v-for="(item, index) of items" :key="getKey(item, index)">
                     <slot v-if="$slots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
                     <slot v-if="$slots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
                 </template>
-                <div v-if="empty" class="p-col col" v-bind="ptm('column')">
+                <div v-if="empty" :class="cx('column')" v-bind="ptm('column')">
-                    <div class="p-dataview-emptymessage" v-bind="ptm('emptyMessage')">
+                    <div :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
                         <slot name="empty"></slot>
                     </div>
                 </div>
@@ -46,9 +47,10 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            :class="{ 'p-paginator-bottom': paginatorBottom }"
+            :class="cx('paginatorBottom')"
             :alwaysShow="alwaysShowPaginator"
             @page="onPage($event)"
+            :unstyled="unstyled"
             :pt="ptm('root')"
         >
             <template v-if="$slots.paginatorstart" #start>
@@ -58,87 +60,21 @@
                 <slot name="paginatorend"></slot>
             </template>
         </DVPaginator>
-        <div v-if="$slots.footer" class="p-dataview-footer" v-bind="ptm('footer')">
+        <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseDataView from './BaseDataView.vue';
 import Paginator from 'primevue/paginator';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'DataView',
-    extends: BaseComponent,
+    extends: BaseDataView,
     emits: ['update:first', 'update:rows', 'page'],
-    props: {
-        value: {
-            type: Array,
-            default: null
-        },
-        layout: {
-            type: String,
-            default: 'list'
-        },
-        rows: {
-            type: Number,
-            default: 0
-        },
-        first: {
-            type: Number,
-            default: 0
-        },
-        totalRecords: {
-            type: Number,
-            default: 0
-        },
-        paginator: {
-            type: Boolean,
-            default: false
-        },
-        paginatorPosition: {
-            type: String,
-            default: 'bottom'
-        },
-        alwaysShowPaginator: {
-            type: Boolean,
-            default: true
-        },
-        paginatorTemplate: {
-            type: String,
-            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
-        },
-        pageLinkSize: {
-            type: Number,
-            default: 5
-        },
-        rowsPerPageOptions: {
-            type: Array,
-            default: null
-        },
-        currentPageReportTemplate: {
-            type: String,
-            default: '({currentPage} of {totalPages})'
-        },
-        sortField: {
-            type: [String, Function],
-            default: null
-        },
-        sortOrder: {
-            type: Number,
-            default: null
-        },
-        lazy: {
-            type: Boolean,
-            default: false
-        },
-        dataKey: {
-            type: String,
-            default: null
-        }
-    },
     data() {
         return {
             d_first: this.first,
@@ -200,15 +136,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-dataview p-component',
-                {
-                    'p-dataview-list': this.layout === 'list',
-                    'p-dataview-grid': this.layout === 'grid'
-                }
-            ];
-        },
         getTotalRecords() {
             if (this.totalRecords) return this.totalRecords;
             else return this.value ? this.value.length : 0;