Refactor #3965 - For DataView

components/lib/dataview/DataView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" v-bind="ptm('root')">
-        <div v-if="$slots.header" class="p-dataview-header" v-bind="ptm('header')">
+    <div :class="cx('root')" v-bind="ptm('root')">
+        <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="p-grid p-nogutter grid grid-nogutter" v-bind="ptm('grid')">
+        <div :class="cx('content')" v-bind="ptm('content')">
+            <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 class="p-dataview-emptymessage" v-bind="ptm('emptyMessage')">
+                <div v-if="empty" :class="cx('column')" v-bind="ptm('column')">
+                    <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;