Refactor #3965 - For DataView
Bahadır Sofuoğlu
parent
7031e1d6d4
commit
f46a6baa0d
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue