mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #3802 - Improve folder structure for nuxt configurations
This commit is contained in:
mertsincan
parent
851950270b
commit
f5fe822afb
563 changed files with 1703 additions and 1095 deletions
230
components/lib/dataview/DataView.d.ts
vendored
Executable file
230
components/lib/dataview/DataView.d.ts
vendored
Executable file
|
|
@ -0,0 +1,230 @@
|
|||
/**
|
||||
*
|
||||
* DataView displays data in grid or list layout with pagination and sorting features.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/dataview/)
|
||||
*
|
||||
* @module dataview
|
||||
*
|
||||
*/
|
||||
import { VNode } from 'vue';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
/**
|
||||
* Custom page event.
|
||||
* @see {@link DataViewEmits.page}
|
||||
*/
|
||||
export interface DataViewPageEvent {
|
||||
/**
|
||||
* New page number
|
||||
*/
|
||||
page: number;
|
||||
/**
|
||||
* Index of first record
|
||||
*/
|
||||
first: number;
|
||||
/**
|
||||
* Number of rows to display in new page
|
||||
*/
|
||||
rows: number;
|
||||
/**
|
||||
* Total number of pages
|
||||
*/
|
||||
pageCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in DataView component. In addition to these, all properties of HTMLDivElement can be used in this component.
|
||||
*/
|
||||
export interface DataViewProps {
|
||||
/**
|
||||
* An array of objects to display.
|
||||
*/
|
||||
value?: any[] | undefined;
|
||||
/**
|
||||
* Layout of the items, valid values are 'list' and 'grid'.
|
||||
* @defaultValue list
|
||||
*/
|
||||
layout?: 'list' | 'grid' | undefined;
|
||||
/**
|
||||
* Number of rows to display per page.
|
||||
* @defaultValue 0
|
||||
*/
|
||||
rows?: number | undefined;
|
||||
/**
|
||||
* Index of the first record to render.
|
||||
* @defaultValue 0
|
||||
*/
|
||||
first?: number | undefined;
|
||||
/**
|
||||
* Number of total records, defaults to length of value when not defined.
|
||||
*/
|
||||
totalRecords?: number | undefined;
|
||||
/**
|
||||
* When specified as true, enables the pagination.
|
||||
* @defaultValue false
|
||||
*/
|
||||
paginator?: boolean | undefined;
|
||||
/**
|
||||
* Position of the paginator, options are 'top','bottom' or 'both'.
|
||||
* @defaultValue bottom
|
||||
*/
|
||||
paginatorPosition?: 'top' | 'bottom' | 'both' | undefined;
|
||||
/**
|
||||
* Whether to show it even there is only one page.
|
||||
* @defaultValue true
|
||||
*/
|
||||
alwaysShowPaginator?: boolean | undefined;
|
||||
/**
|
||||
* Template of the paginator. It can be customized using the template property using the predefined keys,
|
||||
*
|
||||
* - FirstPageLink
|
||||
* - PrevPageLink
|
||||
* - PageLinks
|
||||
* - NextPageLink
|
||||
* - LastPageLink
|
||||
* - RowsPerPageDropdown
|
||||
* - JumpToPageDropdown
|
||||
* - JumpToPageInput
|
||||
* - CurrentPageReport
|
||||
*
|
||||
* @defaultValue FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown
|
||||
*/
|
||||
paginatorTemplate?: string | undefined;
|
||||
/**
|
||||
* Number of page links to display.
|
||||
* @defaultValue 5
|
||||
*/
|
||||
pageLinkSize?: number | undefined;
|
||||
/**
|
||||
* Array of integer values to display inside rows per page dropdown.
|
||||
*/
|
||||
rowsPerPageOptions?: number[] | undefined;
|
||||
/**
|
||||
* Template of the current page report element. It displays information about the pagination state.
|
||||
*
|
||||
* - {currentPage}
|
||||
* - {totalPages}
|
||||
* - {rows}
|
||||
* - {first}
|
||||
* - {last}
|
||||
* - {totalRecords}
|
||||
*
|
||||
* @defaultValue '({currentPage} of {totalPages})'
|
||||
*/
|
||||
currentPageReportTemplate?: string | undefined;
|
||||
/**
|
||||
* Property name or a getter function of data to use in sorting by default.
|
||||
*/
|
||||
sortField?: string | ((item: any) => string) | undefined;
|
||||
/**
|
||||
* Order to sort the data by default.
|
||||
*/
|
||||
sortOrder?: number | undefined;
|
||||
/**
|
||||
* Defines if data is loaded and interacted with in lazy manner.
|
||||
* @defaultValue false
|
||||
*/
|
||||
lazy?: boolean | undefined;
|
||||
/**
|
||||
* Name of the data that uniquely identifies the a record in the data.
|
||||
*/
|
||||
dataKey: string | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid slots in DataView component.
|
||||
*/
|
||||
export interface DataViewSlots {
|
||||
/**
|
||||
* Custom header template.
|
||||
*/
|
||||
header(): VNode[];
|
||||
/**
|
||||
* Custom footer template.
|
||||
*/
|
||||
footer(): VNode[];
|
||||
/**
|
||||
* Custom empty template.
|
||||
*/
|
||||
empty(): VNode[];
|
||||
/**
|
||||
* Custom paginator start template.
|
||||
*/
|
||||
paginatorstart(): VNode[];
|
||||
/**
|
||||
* Custom paginator end template.
|
||||
*/
|
||||
paginatorend(): VNode[];
|
||||
/**
|
||||
* Custom list template.
|
||||
* @param {Object} scope - list slot's params.
|
||||
*/
|
||||
list(scope: {
|
||||
/**
|
||||
* Value of the component
|
||||
*/
|
||||
data: any;
|
||||
/**
|
||||
* Index of the grid
|
||||
*/
|
||||
index: number;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom list template.
|
||||
* @param {Object} scope - list slot's params.
|
||||
*/
|
||||
grid(scope: {
|
||||
/**
|
||||
* Value of the component
|
||||
*/
|
||||
data: any;
|
||||
/**
|
||||
* Index of the grid
|
||||
*/
|
||||
index: number;
|
||||
}): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid slots in DataView component.
|
||||
*/
|
||||
export interface DataViewEmits {
|
||||
/**
|
||||
* Emitted when the first changes.
|
||||
* @param {number} value - New value.
|
||||
*/
|
||||
'update:first'(value: number): void;
|
||||
/**
|
||||
* Emitted when the rows changes.
|
||||
* @param {number} value - New value.
|
||||
*/
|
||||
'update:rows'(value: number): void;
|
||||
/**
|
||||
* Callback to invoke when page changes, the event object contains information about the new state.
|
||||
* @param {DataViewPageEvent} event - Custom page event.
|
||||
*/
|
||||
page(event: DataViewPageEvent): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* **PrimeVue - DataViewLayoutOptions**
|
||||
*
|
||||
* _DataView displays data in grid or list layout with pagination and sorting features._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/dataview/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*
|
||||
*/
|
||||
declare class DataView extends ClassComponent<DataViewProps, DataViewSlots, DataViewEmits> {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface GlobalComponents {
|
||||
DataView: GlobalComponentConstructor<DataView>;
|
||||
}
|
||||
}
|
||||
|
||||
export default DataView;
|
||||
86
components/lib/dataview/DataView.spec.js
Normal file
86
components/lib/dataview/DataView.spec.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import PrimeVue from 'primevue/config';
|
||||
import DataView from './DataView.vue';
|
||||
|
||||
describe('DataView.vue', () => {
|
||||
it('should exist', () => {
|
||||
const wrapper = mount(DataView, {
|
||||
global: {
|
||||
plugins: [PrimeVue]
|
||||
},
|
||||
props: {
|
||||
value: [
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
}
|
||||
],
|
||||
layout: 'grid',
|
||||
paginator: true,
|
||||
rows: 3
|
||||
},
|
||||
slots: {
|
||||
grid: `
|
||||
<template #grid="slotProps">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="product-grid-item card">
|
||||
<div class="product-grid-item-top">
|
||||
<div>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.data.category}}</span>
|
||||
</div>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
</div>
|
||||
<div class="product-grid-item-content">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
|
||||
<div class="product-name">{{slotProps.data.name}}</div>
|
||||
<div class="product-description">{{slotProps.data.description}}</div>
|
||||
</div>
|
||||
<div class="product-grid-item-bottom">
|
||||
<span class="product-price">\${{slotProps.data.price}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.p-dataview.p-component').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-dataview-grid').exists()).toBe(true);
|
||||
expect(wrapper.findAll('.product-grid-item').length).toBe(3);
|
||||
expect(wrapper.find('.p-paginator.p-component').exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
244
components/lib/dataview/DataView.vue
Executable file
244
components/lib/dataview/DataView.vue
Executable file
|
|
@ -0,0 +1,244 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<div v-if="$slots.header" class="p-dataview-header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<DVPaginator
|
||||
v-if="paginatorTop"
|
||||
:rows="d_rows"
|
||||
:first="d_first"
|
||||
:totalRecords="getTotalRecords"
|
||||
:pageLinkSize="pageLinkSize"
|
||||
:template="paginatorTemplate"
|
||||
:rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate"
|
||||
:class="{ 'p-paginator-top': paginatorTop }"
|
||||
:alwaysShow="alwaysShowPaginator"
|
||||
@page="onPage($event)"
|
||||
>
|
||||
<template v-if="$slots.paginatorstart" #start>
|
||||
<slot name="paginatorstart"></slot>
|
||||
</template>
|
||||
<template v-if="$slots.paginatorend" #end>
|
||||
<slot name="paginatorend"></slot>
|
||||
</template>
|
||||
</DVPaginator>
|
||||
<div class="p-dataview-content">
|
||||
<div class="p-grid p-nogutter grid grid-nogutter">
|
||||
<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">
|
||||
<div class="p-dataview-emptymessage">
|
||||
<slot name="empty"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DVPaginator
|
||||
v-if="paginatorBottom"
|
||||
:rows="d_rows"
|
||||
:first="d_first"
|
||||
:totalRecords="getTotalRecords"
|
||||
:pageLinkSize="pageLinkSize"
|
||||
:template="paginatorTemplate"
|
||||
:rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate"
|
||||
:class="{ 'p-paginator-bottom': paginatorBottom }"
|
||||
:alwaysShow="alwaysShowPaginator"
|
||||
@page="onPage($event)"
|
||||
>
|
||||
<template v-if="$slots.paginatorstart" #start>
|
||||
<slot name="paginatorstart"></slot>
|
||||
</template>
|
||||
<template v-if="$slots.paginatorend" #end>
|
||||
<slot name="paginatorend"></slot>
|
||||
</template>
|
||||
</DVPaginator>
|
||||
<div v-if="$slots.footer" class="p-dataview-footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import Paginator from 'primevue/paginator';
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
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,
|
||||
d_rows: this.rows
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
first(newValue) {
|
||||
this.d_first = newValue;
|
||||
},
|
||||
rows(newValue) {
|
||||
this.d_rows = newValue;
|
||||
},
|
||||
sortField() {
|
||||
this.resetPage();
|
||||
},
|
||||
sortOrder() {
|
||||
this.resetPage();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getKey(item, index) {
|
||||
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
|
||||
},
|
||||
onPage(event) {
|
||||
this.d_first = event.first;
|
||||
this.d_rows = event.rows;
|
||||
|
||||
this.$emit('update:first', this.d_first);
|
||||
this.$emit('update:rows', this.d_rows);
|
||||
this.$emit('page', event);
|
||||
},
|
||||
sort() {
|
||||
if (this.value) {
|
||||
const value = [...this.value];
|
||||
|
||||
value.sort((data1, data2) => {
|
||||
let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
|
||||
let value2 = ObjectUtils.resolveFieldData(data2, this.sortField);
|
||||
let result = null;
|
||||
|
||||
if (value1 == null && value2 != null) result = -1;
|
||||
else if (value1 != null && value2 == null) result = 1;
|
||||
else if (value1 == null && value2 == null) result = 0;
|
||||
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
|
||||
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
|
||||
|
||||
return this.sortOrder * result;
|
||||
});
|
||||
|
||||
return value;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
resetPage() {
|
||||
this.d_first = 0;
|
||||
this.$emit('update:first', this.d_first);
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
empty() {
|
||||
return !this.value || this.value.length === 0;
|
||||
},
|
||||
paginatorTop() {
|
||||
return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
|
||||
},
|
||||
paginatorBottom() {
|
||||
return this.paginator && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both');
|
||||
},
|
||||
items() {
|
||||
if (this.value && this.value.length) {
|
||||
let data = this.value;
|
||||
|
||||
if (data && data.length && this.sortField) {
|
||||
data = this.sort();
|
||||
}
|
||||
|
||||
if (this.paginator) {
|
||||
const first = this.lazy ? 0 : this.d_first;
|
||||
|
||||
return data.slice(first, first + this.d_rows);
|
||||
} else {
|
||||
return data;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DVPaginator: Paginator
|
||||
}
|
||||
};
|
||||
</script>
|
||||
9
components/lib/dataview/package.json
Normal file
9
components/lib/dataview/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"main": "./dataview.cjs.js",
|
||||
"module": "./dataview.esm.js",
|
||||
"unpkg": "./dataview.min.js",
|
||||
"types": "./DataView.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./DataView.vue"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue