// Helpers import { wrapInArray, sortItems, deepEqual, groupByProperty, searchItems } from '../../util/helpers'; import Vue from 'vue'; export default Vue.extend({ name: 'v-data', inheritAttrs: false, props: { items: { type: Array, default: () => [] }, options: { type: Object, default: () => ({}) }, sortBy: { type: [String, Array], default: () => [] }, sortDesc: { type: [Boolean, Array], default: () => [] }, customSort: { type: Function, default: sortItems }, mustSort: Boolean, multiSort: Boolean, page: { type: Number, default: 1 }, itemsPerPage: { type: Number, default: 10 }, groupBy: { type: [String, Array], default: () => [] }, groupDesc: { type: [Boolean, Array], default: () => [] }, locale: { type: String, default: 'en-US' }, disableSort: Boolean, disablePagination: Boolean, disableFiltering: Boolean, search: String, customFilter: { type: Function, default: searchItems }, serverItemsLength: { type: Number, default: -1 } }, data() { return { internalOptions: { page: this.page, itemsPerPage: this.itemsPerPage, sortBy: wrapInArray(this.sortBy), sortDesc: wrapInArray(this.sortDesc), groupBy: wrapInArray(this.groupBy), groupDesc: wrapInArray(this.groupDesc), mustSort: this.mustSort, multiSort: this.multiSort } }; }, computed: { itemsLength() { return this.serverItemsLength >= 0 ? this.serverItemsLength : this.filteredItems.length; }, pageCount() { return this.internalOptions.itemsPerPage === -1 ? 1 : Math.ceil(this.itemsLength / this.internalOptions.itemsPerPage); // TODO: can't use items.length here }, pageStart() { if (this.internalOptions.itemsPerPage === -1 || !this.items.length) return 0; return (this.internalOptions.page - 1) * this.internalOptions.itemsPerPage; }, pageStop() { if (this.internalOptions.itemsPerPage === -1) return this.itemsLength; if (!this.items.length) return 0; return Math.min(this.itemsLength, this.internalOptions.page * this.internalOptions.itemsPerPage); }, isGrouped() { return !!this.internalOptions.groupBy.length; }, pagination() { return { page: this.internalOptions.page, itemsPerPage: this.internalOptions.itemsPerPage, pageStart: this.pageStart, pageStop: this.pageStop, pageCount: this.pageCount, itemsLength: this.itemsLength }; }, filteredItems() { let items = this.items.slice(); if (!this.disableFiltering && this.serverItemsLength <= 0) { items = this.customFilter(items, this.search); } return items; }, computedItems() { let items = this.filteredItems.slice(); if (!this.disableSort && this.serverItemsLength <= 0) { items = this.sortItems(items); } if (!this.disablePagination && this.serverItemsLength <= 0) { items = this.paginateItems(items); } return items; }, groupedItems() { return this.isGrouped ? groupByProperty(this.computedItems, this.internalOptions.groupBy[0]) : null; }, scopedProps() { const props = { sort: this.sort, sortArray: this.sortArray, group: this.group, items: this.computedItems, options: this.internalOptions, updateOptions: this.updateOptions, pagination: this.pagination, groupedItems: this.groupedItems }; return props; } }, watch: { options: { handler(options, old) { if (deepEqual(options, old)) return; this.updateOptions(options); }, deep: true, immediate: true }, internalOptions: { handler(options, old) { if (deepEqual(options, old)) return; this.$emit('update:options', options); this.$emit('pagination', this.pagination); }, deep: true, immediate: true }, page(page) { this.updateOptions({ page }); }, 'internalOptions.page'(page) { this.$emit('update:page', page); }, itemsPerPage(itemsPerPage) { this.updateOptions({ itemsPerPage }); }, 'internalOptions.itemsPerPage'(itemsPerPage) { this.$emit('update:items-per-page', itemsPerPage); }, sortBy(sortBy) { this.updateOptions({ sortBy: wrapInArray(sortBy) }); }, 'internalOptions.sortBy'(sortBy, old) { !deepEqual(sortBy, old) && this.$emit('update:sort-by', Array.isArray(this.sortBy) ? sortBy : sortBy[0]); }, sortDesc(sortDesc) { this.updateOptions({ sortDesc: wrapInArray(sortDesc) }); }, 'internalOptions.sortDesc'(sortDesc, old) { !deepEqual(sortDesc, old) && this.$emit('update:sort-desc', Array.isArray(this.sortDesc) ? sortDesc : sortDesc[0]); }, groupBy(groupBy) { this.updateOptions({ groupBy: wrapInArray(groupBy) }); }, 'internalOptions.groupBy'(groupBy, old) { !deepEqual(groupBy, old) && this.$emit('update:group-by', Array.isArray(this.groupBy) ? groupBy : groupBy[0]); }, groupDesc(groupDesc) { this.updateOptions({ groupDesc: wrapInArray(groupDesc) }); }, 'internalOptions.groupDesc'(groupDesc, old) { !deepEqual(groupDesc, old) && this.$emit('update:group-desc', Array.isArray(this.groupDesc) ? groupDesc : groupDesc[0]); }, multiSort(multiSort) { this.updateOptions({ multiSort }); }, 'internalOptions.multiSort'(multiSort) { this.$emit('update:multi-sort', multiSort); }, mustSort(mustSort) { this.updateOptions({ mustSort }); }, 'internalOptions.mustSort'(mustSort) { this.$emit('update:must-sort', mustSort); }, pageCount: { handler(pageCount) { this.$emit('page-count', pageCount); }, immediate: true }, computedItems: { handler(computedItems) { this.$emit('current-items', computedItems); }, immediate: true } }, methods: { toggle(key, oldBy, oldDesc, page, mustSort, multiSort) { let by = oldBy.slice(); let desc = oldDesc.slice(); const byIndex = by.findIndex(k => k === key); if (byIndex < 0) { if (!multiSort) { by = []; desc = []; } by.push(key); desc.push(false); } else if (byIndex >= 0 && !desc[byIndex]) { desc[byIndex] = true; } else if (!mustSort) { by.splice(byIndex, 1); desc.splice(byIndex, 1); } else { desc[byIndex] = false; } // Reset page to 1 if sortBy or sortDesc have changed if (!deepEqual(by, oldBy) || !deepEqual(desc, oldDesc)) { page = 1; } return { by, desc, page }; }, group(key) { const { by: groupBy, desc: groupDesc, page } = this.toggle(key, this.internalOptions.groupBy, this.internalOptions.groupDesc, this.internalOptions.page, true, false); this.updateOptions({ groupBy, groupDesc, page }); }, sort(key) { if (Array.isArray(key)) return this.sortArray(key); const { by: sortBy, desc: sortDesc, page } = this.toggle(key, this.internalOptions.sortBy, this.internalOptions.sortDesc, this.internalOptions.page, this.mustSort, this.multiSort); this.updateOptions({ sortBy, sortDesc, page }); }, sortArray(sortBy) { const sortDesc = sortBy.map(s => { const i = this.internalOptions.sortBy.findIndex(k => k === s); return i > -1 ? this.internalOptions.sortDesc[i] : false; }); this.updateOptions({ sortBy, sortDesc }); }, updateOptions(options) { this.internalOptions = { ...this.internalOptions, ...options, page: Math.max(1, Math.min(options.page || this.internalOptions.page, this.pageCount)) }; }, sortItems(items) { const sortBy = this.internalOptions.groupBy.concat(this.internalOptions.sortBy); const sortDesc = this.internalOptions.groupDesc.concat(this.internalOptions.sortDesc); return this.customSort(items, sortBy, sortDesc, this.locale); }, paginateItems(items) { // Make sure we don't try to display non-existant page if items suddenly change // TODO: Could possibly move this to pageStart/pageStop? if (items.length < this.pageStart) this.internalOptions.page = 1; return items.slice(this.pageStart, this.pageStop); } }, render() { return this.$scopedSlots.default && this.$scopedSlots.default(this.scopedProps); } }); //# sourceMappingURL=VData.js.map