"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; require("../../../src/components/VDataTable/VDataTable.sass"); var _VData = require("../VData"); var _VDataIterator = require("../VDataIterator"); var _VBtn = _interopRequireDefault(require("../VBtn")); var _VDataTableHeader = _interopRequireDefault(require("./VDataTableHeader")); var _VIcon = _interopRequireDefault(require("../VIcon")); var _VProgressLinear = _interopRequireDefault(require("../VProgressLinear")); var _Row = _interopRequireDefault(require("./Row")); var _RowGroup = _interopRequireDefault(require("./RowGroup")); var _VSimpleCheckbox = _interopRequireDefault(require("../VCheckbox/VSimpleCheckbox")); var _VSimpleTable = _interopRequireDefault(require("./VSimpleTable")); var _MobileRow = _interopRequireDefault(require("./MobileRow")); var _ripple = _interopRequireDefault(require("../../directives/ripple")); var _helpers = require("../../util/helpers"); var _console = require("../../util/console"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function filterFn(item, search, filter) { return function (header) { var value = (0, _helpers.getObjectValueByPath)(item, header.value); return header.filter ? header.filter(value, search, item) : filter(value, search, item); }; } function searchTableItems(items, search, headersWithCustomFilters, headersWithoutCustomFilters, customFilter) { var filtered = items; search = typeof search === 'string' ? search.trim() : null; if (search && headersWithoutCustomFilters.length) { filtered = items.filter(function (item) { return headersWithoutCustomFilters.some(filterFn(item, search, customFilter)); }); } if (headersWithCustomFilters.length) { filtered = filtered.filter(function (item) { return headersWithCustomFilters.every(filterFn(item, search, _helpers.defaultFilter)); }); } return filtered; } /* @vue/component */ var _default = _VDataIterator.VDataIterator.extend({ name: 'v-data-table', // https://github.com/vuejs/vue/issues/6872 directives: { ripple: _ripple.default }, props: { headers: { type: Array }, showSelect: Boolean, showExpand: Boolean, showGroupBy: Boolean, // TODO: Fix // virtualRows: Boolean, mobileBreakpoint: { type: Number, default: 600 }, height: [Number, String], hideDefaultHeader: Boolean, caption: String, dense: Boolean, headerProps: Object, calculateWidths: Boolean, fixedHeader: Boolean, headersLength: Number, expandIcon: { type: String, default: '$vuetify.icons.expand' }, customFilter: { type: Function, default: _helpers.defaultFilter } }, data: function data() { return { internalGroupBy: [], openCache: {}, widths: [] }; }, computed: { computedHeaders: function computedHeaders() { var _this = this; if (!this.headers) return []; var headers = this.headers.filter(function (h) { return h.value === undefined || !_this.internalGroupBy.find(function (v) { return v === h.value; }); }); var defaultHeader = { text: '', sortable: false, width: '1px' }; if (this.showSelect) { var index = headers.findIndex(function (h) { return h.value === 'data-table-select'; }); if (index < 0) headers.unshift(_objectSpread({}, defaultHeader, { value: 'data-table-select' }));else headers.splice(index, 1, _objectSpread({}, defaultHeader, {}, headers[index])); } if (this.showExpand) { var _index = headers.findIndex(function (h) { return h.value === 'data-table-expand'; }); if (_index < 0) headers.unshift(_objectSpread({}, defaultHeader, { value: 'data-table-expand' }));else headers.splice(_index, 1, _objectSpread({}, defaultHeader, {}, headers[_index])); } return headers; }, computedHeadersLength: function computedHeadersLength() { return this.headersLength || this.computedHeaders.length; }, isMobile: function isMobile() { return this.$vuetify.breakpoint.width < this.mobileBreakpoint; }, columnSorters: function columnSorters() { return this.computedHeaders.reduce(function (acc, header) { if (header.sort) acc[header.value] = header.sort; return acc; }, {}); }, headersWithCustomFilters: function headersWithCustomFilters() { return this.computedHeaders.filter(function (header) { return header.filter; }); }, headersWithoutCustomFilters: function headersWithoutCustomFilters() { return this.computedHeaders.filter(function (header) { return !header.filter; }); } }, created: function created() { var _this2 = this; var breakingProps = [['sort-icon', 'header-props.sort-icon'], ['hide-headers', 'hide-default-header'], ['select-all', 'show-select']]; /* istanbul ignore next */ breakingProps.forEach(function (_ref) { var _ref2 = _slicedToArray(_ref, 2), original = _ref2[0], replacement = _ref2[1]; if (_this2.$attrs.hasOwnProperty(original)) (0, _console.breaking)(original, replacement, _this2); }); }, mounted: function mounted() { // if ((!this.sortBy || !this.sortBy.length) && (!this.options.sortBy || !this.options.sortBy.length)) { // const firstSortable = this.headers.find(h => !('sortable' in h) || !!h.sortable) // if (firstSortable) this.updateOptions({ sortBy: [firstSortable.value], sortDesc: [false] }) // } if (this.calculateWidths) { window.addEventListener('resize', this.calcWidths); this.calcWidths(); } }, beforeDestroy: function beforeDestroy() { if (this.calculateWidths) { window.removeEventListener('resize', this.calcWidths); } }, methods: { calcWidths: function calcWidths() { this.widths = Array.from(this.$el.querySelectorAll('th')).map(function (e) { return e.clientWidth; }); }, customFilterWithColumns: function customFilterWithColumns(items, search) { return searchTableItems(items, search, this.headersWithCustomFilters, this.headersWithoutCustomFilters, this.customFilter); }, customSortWithHeaders: function customSortWithHeaders(items, sortBy, sortDesc, locale) { return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters); }, createItemProps: function createItemProps(item) { var props = _VDataIterator.VDataIterator.options.methods.createItemProps.call(this, item); return Object.assign(props, { headers: this.computedHeaders }); }, genCaption: function genCaption(props) { if (this.caption) return [this.$createElement('caption', [this.caption])]; return (0, _helpers.getSlot)(this, 'caption', props, true); }, genColgroup: function genColgroup(props) { var _this3 = this; return this.$createElement('colgroup', this.computedHeaders.map(function (header) { return _this3.$createElement('col', { class: { divider: header.divider }, style: { width: header.width } }); })); }, genLoading: function genLoading() { var progress = this.$slots['progress'] ? this.$slots.progress : this.$createElement(_VProgressLinear.default, { props: { color: this.loading === true ? 'primary' : this.loading, height: 2, indeterminate: true } }); var th = this.$createElement('th', { staticClass: 'column', attrs: { colspan: this.computedHeadersLength } }, [progress]); var tr = this.$createElement('tr', { staticClass: 'v-data-table__progress' }, [th]); return this.$createElement('thead', [tr]); }, genHeaders: function genHeaders(props) { var data = { props: _objectSpread({}, this.headerProps, { headers: this.computedHeaders, options: props.options, mobile: this.isMobile, showGroupBy: this.showGroupBy, someItems: this.someItems, everyItem: this.everyItem, singleSelect: this.singleSelect, disableSort: this.disableSort }), on: { sort: props.sort, group: props.group, 'toggle-select-all': this.toggleSelectAll } }; var children = [(0, _helpers.getSlot)(this, 'header', data)]; if (!this.hideDefaultHeader) { var scopedSlots = (0, _helpers.getPrefixedScopedSlots)('header.', this.$scopedSlots); children.push(this.$createElement(_VDataTableHeader.default, _objectSpread({}, data, { scopedSlots: scopedSlots }))); } if (this.loading) children.push(this.genLoading()); return children; }, genEmptyWrapper: function genEmptyWrapper(content) { return this.$createElement('tr', [this.$createElement('td', { attrs: { colspan: this.computedHeadersLength } }, content)]); }, genItems: function genItems(items, props) { var empty = this.genEmpty(props.pagination.itemsLength); if (empty) return [empty]; return props.groupedItems ? this.genGroupedRows(props.groupedItems, props) : this.genRows(items, props); }, genGroupedRows: function genGroupedRows(groupedItems, props) { var _this4 = this; var groups = Object.keys(groupedItems || {}); return groups.map(function (group) { if (!_this4.openCache.hasOwnProperty(group)) _this4.$set(_this4.openCache, group, true); if (_this4.$scopedSlots.group) { return _this4.$scopedSlots.group({ group: group, options: props.options, items: groupedItems[group], headers: _this4.computedHeaders }); } else { return _this4.genDefaultGroupedRow(group, groupedItems[group], props); } }); }, genDefaultGroupedRow: function genDefaultGroupedRow(group, items, props) { var _this5 = this; var isOpen = !!this.openCache[group]; var children = [this.$createElement('template', { slot: 'row.content' }, this.genDefaultRows(items, props))]; if (this.$scopedSlots['group.header']) { children.unshift(this.$createElement('template', { slot: 'column.header' }, [this.$scopedSlots['group.header']({ group: group, groupBy: props.options.groupBy, items: items, headers: this.computedHeaders })])); } else { var toggle = this.$createElement(_VBtn.default, { staticClass: 'ma-0', props: { icon: true, small: true }, on: { click: function click() { return _this5.$set(_this5.openCache, group, !_this5.openCache[group]); } } }, [this.$createElement(_VIcon.default, [isOpen ? 'remove' : 'add'])]); var remove = this.$createElement(_VBtn.default, { staticClass: 'ma-0', props: { icon: true, small: true }, on: { click: function click() { return props.updateOptions({ groupBy: [], groupDesc: [] }); } } }, [this.$createElement(_VIcon.default, ['close'])]); var column = this.$createElement('td', { staticClass: 'text-start', attrs: { colspan: this.computedHeadersLength } }, [toggle, "".concat(props.options.groupBy[0], ": ").concat(group), remove]); children.unshift(this.$createElement('template', { slot: 'column.header' }, [column])); } if (this.$scopedSlots['group.summary']) { children.push(this.$createElement('template', { slot: 'column.summary' }, [this.$scopedSlots['group.summary']({ group: group, groupBy: props.options.groupBy, items: items, headers: this.computedHeaders })])); } return this.$createElement(_RowGroup.default, { key: group, props: { value: isOpen } }, children); }, genRows: function genRows(items, props) { return this.$scopedSlots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props); }, genScopedRows: function genScopedRows(items, props) { var rows = []; for (var i = 0; i < items.length; i++) { var item = items[i]; rows.push(this.$scopedSlots.item(this.createItemProps(item))); if (this.isExpanded(item)) { rows.push(this.$scopedSlots['expanded-item']({ item: item, headers: this.computedHeaders })); } } return rows; }, genDefaultRows: function genDefaultRows(items, props) { var _this6 = this; return this.$scopedSlots['expanded-item'] ? items.map(function (item) { return _this6.genDefaultExpandedRow(item); }) : items.map(function (item) { return _this6.genDefaultSimpleRow(item); }); }, genDefaultExpandedRow: function genDefaultExpandedRow(item) { var isExpanded = this.isExpanded(item); var headerRow = this.genDefaultSimpleRow(item, isExpanded ? 'expanded expanded__row' : null); var expandedRow = this.$createElement('tr', { staticClass: 'expanded expanded__content' }, [this.$scopedSlots['expanded-item']({ item: item, headers: this.computedHeaders })]); return this.$createElement(_RowGroup.default, { props: { value: isExpanded } }, [this.$createElement('template', { slot: 'row.header' }, [headerRow]), this.$createElement('template', { slot: 'row.content' }, [expandedRow])]); }, genDefaultSimpleRow: function genDefaultSimpleRow(item) { var _this7 = this; var classes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var scopedSlots = (0, _helpers.getPrefixedScopedSlots)('item.', this.$scopedSlots); var data = this.createItemProps(item); if (this.showSelect) { var slot = scopedSlots['data-table-select']; scopedSlots['data-table-select'] = slot ? function () { return slot(data); } : function () { return _this7.$createElement(_VSimpleCheckbox.default, { staticClass: 'v-data-table__checkbox', props: { value: data.isSelected }, on: { input: function input(val) { return data.select(val); } } }); }; } if (this.showExpand) { var _slot = scopedSlots['data-table-expand']; scopedSlots['data-table-expand'] = _slot ? function () { return _slot(data); } : function () { return _this7.$createElement(_VIcon.default, { staticClass: 'v-data-table__expand-icon', class: { 'v-data-table__expand-icon--active': data.isExpanded }, on: { click: function click(e) { e.stopPropagation(); data.expand(!data.isExpanded); } } }, [_this7.expandIcon]); }; } return this.$createElement(this.isMobile ? _MobileRow.default : _Row.default, { key: (0, _helpers.getObjectValueByPath)(item, this.itemKey), class: classes, props: { headers: this.computedHeaders, item: item, rtl: this.$vuetify.rtl }, scopedSlots: scopedSlots, on: { click: function click() { return _this7.$emit('click:row', item); } } }); }, genBody: function genBody(props) { var data = _objectSpread({}, props, { isMobile: this.isMobile, headers: this.computedHeaders }); if (this.$scopedSlots.body) { return this.$scopedSlots.body(data); } return this.$createElement('tbody', [(0, _helpers.getSlot)(this, 'body.prepend', data, true), this.genItems(props.items, props), (0, _helpers.getSlot)(this, 'body.append', data, true)]); }, genFooters: function genFooters(props) { var data = { props: _objectSpread({ options: props.options, pagination: props.pagination, itemsPerPageText: '$vuetify.dataTable.itemsPerPageText' }, this.footerProps), on: { 'update:options': function updateOptions(value) { return props.updateOptions(value); } }, widths: this.widths, headers: this.computedHeaders }; var children = [(0, _helpers.getSlot)(this, 'footer', data, true)]; if (!this.hideDefaultFooter) { children.push(this.$createElement(_VDataIterator.VDataFooter, data)); } return children; }, genDefaultScopedSlot: function genDefaultScopedSlot(props) { var simpleProps = { height: this.height, fixedHeader: this.fixedHeader, dense: this.dense }; // if (this.virtualRows) { // return this.$createElement(VVirtualTable, { // props: Object.assign(simpleProps, { // items: props.items, // height: this.height, // rowHeight: this.dense ? 24 : 48, // headerHeight: this.dense ? 32 : 48, // // TODO: expose rest of props from virtual table? // }), // scopedSlots: { // items: ({ items }) => this.genItems(items, props) as any, // }, // }, [ // this.proxySlot('body.before', [this.genCaption(props), this.genHeaders(props)]), // this.proxySlot('bottom', this.genFooters(props)), // ]) // } return this.$createElement(_VSimpleTable.default, { props: simpleProps }, [this.proxySlot('top', (0, _helpers.getSlot)(this, 'top', props, true)), this.genCaption(props), this.genColgroup(props), this.genHeaders(props), this.genBody(props), this.proxySlot('bottom', this.genFooters(props))]); }, proxySlot: function proxySlot(slot, content) { return this.$createElement('template', { slot: slot }, content); } }, render: function render() { var _this8 = this; return this.$createElement(_VData.VData, { props: _objectSpread({}, this.$props, { customFilter: this.customFilterWithColumns, customSort: this.customSortWithHeaders }), on: { 'update:options': function updateOptions(v, old) { _this8.internalGroupBy = v.groupBy || []; !(0, _helpers.deepEqual)(v, old) && _this8.$emit('update:options', v); }, 'update:page': function updatePage(v) { return _this8.$emit('update:page', v); }, 'update:items-per-page': function updateItemsPerPage(v) { return _this8.$emit('update:items-per-page', v); }, 'update:sort-by': function updateSortBy(v) { return _this8.$emit('update:sort-by', v); }, 'update:sort-desc': function updateSortDesc(v) { return _this8.$emit('update:sort-desc', v); }, 'update:group-by': function updateGroupBy(v) { return _this8.$emit('update:group-by', v); }, 'update:group-desc': function updateGroupDesc(v) { return _this8.$emit('update:group-desc', v); }, pagination: function pagination(v, old) { return !(0, _helpers.deepEqual)(v, old) && _this8.$emit('pagination', v); }, 'current-items': function currentItems(v) { _this8.internalCurrentItems = v; _this8.$emit('current-items', v); }, 'page-count': function pageCount(v) { return _this8.$emit('page-count', v); } }, scopedSlots: { default: this.genDefaultScopedSlot } }); } }); exports.default = _default; //# sourceMappingURL=VDataTable.js.map