This commit is contained in:
2022-07-21 03:28:35 +00:00
parent d7c883d6df
commit 51b34b0e1d
30103 changed files with 4152204 additions and 23 deletions
+60
View File
@@ -0,0 +1,60 @@
import Vue from 'vue';
import { getObjectValueByPath } from '../../util/helpers';
export default Vue.extend({
name: 'row',
functional: true,
props: {
headers: Array,
item: Object,
rtl: Boolean
},
render(h, {
props,
slots,
data
}) {
const computedSlots = slots();
const columns = props.headers.map(header => {
const classes = {
'v-data-table__mobile-row': true
};
const children = [];
const value = getObjectValueByPath(props.item, header.value);
const slotName = header.value;
const scopedSlot = data.scopedSlots && data.scopedSlots[slotName];
const regularSlot = computedSlots[slotName];
if (scopedSlot) {
children.push(scopedSlot({
item: props.item,
header,
value
}));
} else if (regularSlot) {
children.push(regularSlot);
} else {
children.push(value == null ? value : String(value));
}
const mobileRowChildren = [h('div', {
staticClass: 'v-data-table__mobile-row__cell'
}, children)];
if (header.value !== 'dataTableSelect') {
mobileRowChildren.unshift(h('div', {
staticClass: 'v-data-table__mobile-row__header'
}, [header.text]));
}
return h('td', {
class: classes
}, mobileRowChildren);
});
return h('tr', { ...data,
staticClass: 'v-data-table__mobile-table-row'
}, columns);
}
});
//# sourceMappingURL=MobileRow.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../../../src/components/VDataTable/MobileRow.ts"],"names":[],"mappings":"AAAA,OAAO,GAAP,MAAqC,KAArC;AACA,SAAS,oBAAT,QAAqC,oBAArC;AAGA,eAAe,GAAG,CAAC,MAAJ,CAAW;AACxB,EAAA,IAAI,EAAE,KADkB;AAGxB,EAAA,UAAU,EAAE,IAHY;AAKxB,EAAA,KAAK,EAAE;AACL,IAAA,OAAO,EAAE,KADJ;AAEL,IAAA,IAAI,EAAE,MAFD;AAGL,IAAA,GAAG,EAAE;AAHA,GALiB;;AAWxB,EAAA,MAAM,CAAE,CAAF,EAAK;AAAE,IAAA,KAAF;AAAS,IAAA,KAAT;AAAgB,IAAA;AAAhB,GAAL,EAA2B;AAC/B,UAAM,aAAa,GAAG,KAAK,EAA3B;AAEA,UAAM,OAAO,GAAY,KAAK,CAAC,OAAN,CAAc,GAAd,CAAmB,MAAD,IAA4B;AACrE,YAAM,OAAO,GAAG;AACd,oCAA4B;AADd,OAAhB;AAIA,YAAM,QAAQ,GAAG,EAAjB;AACA,YAAM,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC,IAAP,EAAa,MAAM,CAAC,KAApB,CAAlC;AAEA,YAAM,QAAQ,GAAG,MAAM,CAAC,KAAxB;AACA,YAAM,UAAU,GAAG,IAAI,CAAC,WAAL,IAAoB,IAAI,CAAC,WAAL,CAAiB,QAAjB,CAAvC;AACA,YAAM,WAAW,GAAG,aAAa,CAAC,QAAD,CAAjC;;AAEA,UAAI,UAAJ,EAAgB;AACd,QAAA,QAAQ,CAAC,IAAT,CAAc,UAAU,CAAC;AAAE,UAAA,IAAI,EAAE,KAAK,CAAC,IAAd;AAAoB,UAAA,MAApB;AAA4B,UAAA;AAA5B,SAAD,CAAxB;AACD,OAFD,MAEO,IAAI,WAAJ,EAAiB;AACtB,QAAA,QAAQ,CAAC,IAAT,CAAc,WAAd;AACD,OAFM,MAEA;AACL,QAAA,QAAQ,CAAC,IAAT,CAAc,KAAK,IAAI,IAAT,GAAgB,KAAhB,GAAwB,MAAM,CAAC,KAAD,CAA5C;AACD;;AAED,YAAM,iBAAiB,GAAG,CACxB,CAAC,CAAC,KAAD,EAAQ;AACP,QAAA,WAAW,EAAE;AADN,OAAR,EAEE,QAFF,CADuB,CAA1B;;AAMA,UAAI,MAAM,CAAC,KAAP,KAAiB,iBAArB,EAAwC;AACtC,QAAA,iBAAiB,CAAC,OAAlB,CACE,CAAC,CAAC,KAAD,EAAQ;AACP,UAAA,WAAW,EAAE;AADN,SAAR,EAEE,CAAC,MAAM,CAAC,IAAR,CAFF,CADH;AAKD;;AAED,aAAO,CAAC,CAAC,IAAD,EAAO;AAAE,QAAA,KAAK,EAAE;AAAT,OAAP,EAA2B,iBAA3B,CAAR;AACD,KAnCwB,CAAzB;AAqCA,WAAO,CAAC,CAAC,IAAD,EAAO,EAAE,GAAG,IAAL;AAAW,MAAA,WAAW,EAAE;AAAxB,KAAP,EAAmE,OAAnE,CAAR;AACD;;AApDuB,CAAX,CAAf","sourcesContent":["import Vue, { VNode, PropType } from 'vue'\nimport { getObjectValueByPath } from '../../util/helpers'\nimport { DataTableHeader } from 'vuetify/types'\n\nexport default Vue.extend({\n name: 'row',\n\n functional: true,\n\n props: {\n headers: Array as PropType<DataTableHeader[]>,\n item: Object,\n rtl: Boolean,\n },\n\n render (h, { props, slots, data }): VNode {\n const computedSlots = slots()\n\n const columns: VNode[] = props.headers.map((header: DataTableHeader) => {\n const classes = {\n 'v-data-table__mobile-row': true,\n }\n\n const children = []\n const value = getObjectValueByPath(props.item, header.value)\n\n const slotName = header.value\n const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]\n const regularSlot = computedSlots[slotName]\n\n if (scopedSlot) {\n children.push(scopedSlot({ item: props.item, header, value }))\n } else if (regularSlot) {\n children.push(regularSlot)\n } else {\n children.push(value == null ? value : String(value))\n }\n\n const mobileRowChildren = [\n h('div', {\n staticClass: 'v-data-table__mobile-row__cell',\n }, children),\n ]\n\n if (header.value !== 'dataTableSelect') {\n mobileRowChildren.unshift(\n h('div', {\n staticClass: 'v-data-table__mobile-row__header',\n }, [header.text])\n )\n }\n\n return h('td', { class: classes }, mobileRowChildren)\n })\n\n return h('tr', { ...data, staticClass: 'v-data-table__mobile-table-row' }, columns)\n },\n})\n"],"sourceRoot":"","file":"MobileRow.js"}
+51
View File
@@ -0,0 +1,51 @@
// Types
import Vue from 'vue'; // Utils
import { getObjectValueByPath } from '../../util/helpers';
export default Vue.extend({
name: 'row',
functional: true,
props: {
headers: Array,
item: Object,
rtl: Boolean
},
render(h, {
props,
slots,
data
}) {
const computedSlots = slots();
const columns = props.headers.map(header => {
const children = [];
const value = getObjectValueByPath(props.item, header.value);
const slotName = header.value;
const scopedSlot = data.scopedSlots && data.scopedSlots[slotName];
const regularSlot = computedSlots[slotName];
if (scopedSlot) {
children.push(scopedSlot({
item: props.item,
header,
value
}));
} else if (regularSlot) {
children.push(regularSlot);
} else {
children.push(value == null ? value : String(value));
}
const textAlign = `text-${header.align || 'start'}`;
return h('td', {
class: {
[textAlign]: true,
'v-data-table__divider': header.divider
}
}, children);
});
return h('tr', data, columns);
}
});
//# sourceMappingURL=Row.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../../../src/components/VDataTable/Row.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,GAAP,MAAqC,KAArC,C,CAGA;;AACA,SAAS,oBAAT,QAAqC,oBAArC;AAEA,eAAe,GAAG,CAAC,MAAJ,CAAW;AACxB,EAAA,IAAI,EAAE,KADkB;AAGxB,EAAA,UAAU,EAAE,IAHY;AAKxB,EAAA,KAAK,EAAE;AACL,IAAA,OAAO,EAAE,KADJ;AAEL,IAAA,IAAI,EAAE,MAFD;AAGL,IAAA,GAAG,EAAE;AAHA,GALiB;;AAWxB,EAAA,MAAM,CAAE,CAAF,EAAK;AAAE,IAAA,KAAF;AAAS,IAAA,KAAT;AAAgB,IAAA;AAAhB,GAAL,EAA2B;AAC/B,UAAM,aAAa,GAAG,KAAK,EAA3B;AAEA,UAAM,OAAO,GAAY,KAAK,CAAC,OAAN,CAAc,GAAd,CAAmB,MAAD,IAA4B;AACrE,YAAM,QAAQ,GAAG,EAAjB;AACA,YAAM,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC,IAAP,EAAa,MAAM,CAAC,KAApB,CAAlC;AAEA,YAAM,QAAQ,GAAG,MAAM,CAAC,KAAxB;AACA,YAAM,UAAU,GAAG,IAAI,CAAC,WAAL,IAAoB,IAAI,CAAC,WAAL,CAAiB,QAAjB,CAAvC;AACA,YAAM,WAAW,GAAG,aAAa,CAAC,QAAD,CAAjC;;AAEA,UAAI,UAAJ,EAAgB;AACd,QAAA,QAAQ,CAAC,IAAT,CAAc,UAAU,CAAC;AAAE,UAAA,IAAI,EAAE,KAAK,CAAC,IAAd;AAAoB,UAAA,MAApB;AAA4B,UAAA;AAA5B,SAAD,CAAxB;AACD,OAFD,MAEO,IAAI,WAAJ,EAAiB;AACtB,QAAA,QAAQ,CAAC,IAAT,CAAc,WAAd;AACD,OAFM,MAEA;AACL,QAAA,QAAQ,CAAC,IAAT,CAAc,KAAK,IAAI,IAAT,GAAgB,KAAhB,GAAwB,MAAM,CAAC,KAAD,CAA5C;AACD;;AAED,YAAM,SAAS,GAAG,QAAQ,MAAM,CAAC,KAAP,IAAgB,OAAO,EAAjD;AAEA,aAAO,CAAC,CAAC,IAAD,EAAO;AACb,QAAA,KAAK,EAAE;AACL,WAAC,SAAD,GAAa,IADR;AAEL,mCAAyB,MAAM,CAAC;AAF3B;AADM,OAAP,EAKL,QALK,CAAR;AAMD,KAxBwB,CAAzB;AA0BA,WAAO,CAAC,CAAC,IAAD,EAAO,IAAP,EAAa,OAAb,CAAR;AACD;;AAzCuB,CAAX,CAAf","sourcesContent":["// Types\nimport Vue, { VNode, PropType } from 'vue'\nimport { DataTableHeader } from 'vuetify/types'\n\n// Utils\nimport { getObjectValueByPath } from '../../util/helpers'\n\nexport default Vue.extend({\n name: 'row',\n\n functional: true,\n\n props: {\n headers: Array as PropType<DataTableHeader[]>,\n item: Object,\n rtl: Boolean,\n },\n\n render (h, { props, slots, data }): VNode {\n const computedSlots = slots()\n\n const columns: VNode[] = props.headers.map((header: DataTableHeader) => {\n const children = []\n const value = getObjectValueByPath(props.item, header.value)\n\n const slotName = header.value\n const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]\n const regularSlot = computedSlots[slotName]\n\n if (scopedSlot) {\n children.push(scopedSlot({ item: props.item, header, value }))\n } else if (regularSlot) {\n children.push(regularSlot)\n } else {\n children.push(value == null ? value : String(value))\n }\n\n const textAlign = `text-${header.align || 'start'}`\n\n return h('td', {\n class: {\n [textAlign]: true,\n 'v-data-table__divider': header.divider,\n },\n }, children)\n })\n\n return h('tr', data, columns)\n },\n})\n"],"sourceRoot":"","file":"Row.js"}
+50
View File
@@ -0,0 +1,50 @@
import Vue from 'vue';
export default Vue.extend({
name: 'row-group',
functional: true,
props: {
value: {
type: Boolean,
default: true
},
headerClass: {
type: String,
default: 'v-row-group__header'
},
contentClass: String,
summaryClass: {
type: String,
default: 'v-row-group__summary'
}
},
render(h, {
slots,
props
}) {
const computedSlots = slots();
const children = [];
if (computedSlots['column.header']) {
children.push(h('tr', {
staticClass: props.headerClass
}, computedSlots['column.header']));
} else if (computedSlots['row.header']) {
children.push(...computedSlots['row.header']);
}
if (computedSlots['row.content'] && props.value) children.push(...computedSlots['row.content']);
if (computedSlots['column.summary']) {
children.push(h('tr', {
staticClass: props.summaryClass
}, computedSlots['column.summary']));
} else if (computedSlots['row.summary']) {
children.push(...computedSlots['row.summary']);
}
return children;
}
});
//# sourceMappingURL=RowGroup.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../../../src/components/VDataTable/RowGroup.ts"],"names":[],"mappings":"AAAA,OAAO,GAAP,MAA2B,KAA3B;AAEA,eAAe,GAAG,CAAC,MAAJ,CAAW;AACxB,EAAA,IAAI,EAAE,WADkB;AAGxB,EAAA,UAAU,EAAE,IAHY;AAKxB,EAAA,KAAK,EAAE;AACL,IAAA,KAAK,EAAE;AACL,MAAA,IAAI,EAAE,OADD;AAEL,MAAA,OAAO,EAAE;AAFJ,KADF;AAKL,IAAA,WAAW,EAAE;AACX,MAAA,IAAI,EAAE,MADK;AAEX,MAAA,OAAO,EAAE;AAFE,KALR;AASL,IAAA,YAAY,EAAE,MATT;AAUL,IAAA,YAAY,EAAE;AACZ,MAAA,IAAI,EAAE,MADM;AAEZ,MAAA,OAAO,EAAE;AAFG;AAVT,GALiB;;AAqBxB,EAAA,MAAM,CAAE,CAAF,EAAK;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,GAAL,EAAqB;AACzB,UAAM,aAAa,GAAG,KAAK,EAA3B;AACA,UAAM,QAAQ,GAAG,EAAjB;;AAEA,QAAI,aAAa,CAAC,eAAD,CAAjB,EAAoC;AAClC,MAAA,QAAQ,CAAC,IAAT,CAAc,CAAC,CAAC,IAAD,EAAO;AACpB,QAAA,WAAW,EAAE,KAAK,CAAC;AADC,OAAP,EAEZ,aAAa,CAAC,eAAD,CAFD,CAAf;AAGD,KAJD,MAIO,IAAI,aAAa,CAAC,YAAD,CAAjB,EAAiC;AACtC,MAAA,QAAQ,CAAC,IAAT,CAAc,GAAG,aAAa,CAAC,YAAD,CAA9B;AACD;;AAED,QAAI,aAAa,CAAC,aAAD,CAAb,IAAgC,KAAK,CAAC,KAA1C,EAAiD,QAAQ,CAAC,IAAT,CAAc,GAAG,aAAa,CAAC,aAAD,CAA9B;;AAEjD,QAAI,aAAa,CAAC,gBAAD,CAAjB,EAAqC;AACnC,MAAA,QAAQ,CAAC,IAAT,CAAc,CAAC,CAAC,IAAD,EAAO;AACpB,QAAA,WAAW,EAAE,KAAK,CAAC;AADC,OAAP,EAEZ,aAAa,CAAC,gBAAD,CAFD,CAAf;AAGD,KAJD,MAIO,IAAI,aAAa,CAAC,aAAD,CAAjB,EAAkC;AACvC,MAAA,QAAQ,CAAC,IAAT,CAAc,GAAG,aAAa,CAAC,aAAD,CAA9B;AACD;;AAED,WAAO,QAAP;AACD;;AA5CuB,CAAX,CAAf","sourcesContent":["import Vue, { VNode } from 'vue'\n\nexport default Vue.extend({\n name: 'row-group',\n\n functional: true,\n\n props: {\n value: {\n type: Boolean,\n default: true,\n },\n headerClass: {\n type: String,\n default: 'v-row-group__header',\n },\n contentClass: String,\n summaryClass: {\n type: String,\n default: 'v-row-group__summary',\n },\n },\n\n render (h, { slots, props }): VNode {\n const computedSlots = slots()\n const children = []\n\n if (computedSlots['column.header']) {\n children.push(h('tr', {\n staticClass: props.headerClass,\n }, computedSlots['column.header']))\n } else if (computedSlots['row.header']) {\n children.push(...computedSlots['row.header'])\n }\n\n if (computedSlots['row.content'] && props.value) children.push(...computedSlots['row.content'])\n\n if (computedSlots['column.summary']) {\n children.push(h('tr', {\n staticClass: props.summaryClass,\n }, computedSlots['column.summary']))\n } else if (computedSlots['row.summary']) {\n children.push(...computedSlots['row.summary'])\n }\n\n return children as any\n },\n})\n"],"sourceRoot":"","file":"RowGroup.js"}
+592
View File
@@ -0,0 +1,592 @@
import "../../../src/components/VDataTable/VDataTable.sass"; // Components
import { VData } from '../VData';
import { VDataFooter, VDataIterator } from '../VDataIterator';
import VBtn from '../VBtn';
import VDataTableHeader from './VDataTableHeader'; // import VVirtualTable from './VVirtualTable'
import VIcon from '../VIcon';
import Row from './Row';
import RowGroup from './RowGroup';
import VSimpleCheckbox from '../VCheckbox/VSimpleCheckbox';
import VSimpleTable from './VSimpleTable';
import MobileRow from './MobileRow'; // Mixins
import Loadable from '../../mixins/loadable'; // Directives
import ripple from '../../directives/ripple'; // Helpers
import mixins from '../../util/mixins';
import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, defaultFilter, camelizeObjectKeys, getPropertyFromItem } from '../../util/helpers';
import { breaking } from '../../util/console';
import { mergeClasses } from '../../util/mergeData';
function filterFn(item, search, filter) {
return header => {
const value = getObjectValueByPath(item, header.value);
return header.filter ? header.filter(value, search, item) : filter(value, search, item);
};
}
function searchTableItems(items, search, headersWithCustomFilters, headersWithoutCustomFilters, customFilter) {
search = typeof search === 'string' ? search.trim() : null;
return items.filter(item => {
// Headers with custom filters are evaluated whether or not a search term has been provided.
// We need to match every filter to be included in the results.
const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter)); // Headers without custom filters are only filtered by the `search` property if it is defined.
// We only need a single column to match the search term to be included in the results.
const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter));
return matchesColumnFilters && matchesSearchTerm;
});
}
/* @vue/component */
export default mixins(VDataIterator, Loadable).extend({
name: 'v-data-table',
// https://github.com/vuejs/vue/issues/6872
directives: {
ripple
},
props: {
headers: {
type: Array,
default: () => []
},
showSelect: Boolean,
showExpand: Boolean,
showGroupBy: Boolean,
// TODO: Fix
// virtualRows: Boolean,
height: [Number, String],
hideDefaultHeader: Boolean,
caption: String,
dense: Boolean,
headerProps: Object,
calculateWidths: Boolean,
fixedHeader: Boolean,
headersLength: Number,
expandIcon: {
type: String,
default: '$expand'
},
customFilter: {
type: Function,
default: defaultFilter
},
itemClass: {
type: [String, Function],
default: () => ''
},
loaderHeight: {
type: [Number, String],
default: 4
}
},
data() {
return {
internalGroupBy: [],
openCache: {},
widths: []
};
},
computed: {
computedHeaders() {
if (!this.headers) return [];
const headers = this.headers.filter(h => h.value === undefined || !this.internalGroupBy.find(v => v === h.value));
const defaultHeader = {
text: '',
sortable: false,
width: '1px'
};
if (this.showSelect) {
const index = headers.findIndex(h => h.value === 'data-table-select');
if (index < 0) headers.unshift({ ...defaultHeader,
value: 'data-table-select'
});else headers.splice(index, 1, { ...defaultHeader,
...headers[index]
});
}
if (this.showExpand) {
const index = headers.findIndex(h => h.value === 'data-table-expand');
if (index < 0) headers.unshift({ ...defaultHeader,
value: 'data-table-expand'
});else headers.splice(index, 1, { ...defaultHeader,
...headers[index]
});
}
return headers;
},
colspanAttrs() {
return this.isMobile ? undefined : {
colspan: this.headersLength || this.computedHeaders.length
};
},
columnSorters() {
return this.computedHeaders.reduce((acc, header) => {
if (header.sort) acc[header.value] = header.sort;
return acc;
}, {});
},
headersWithCustomFilters() {
return this.headers.filter(header => header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true));
},
headersWithoutCustomFilters() {
return this.headers.filter(header => !header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true));
},
sanitizedHeaderProps() {
return camelizeObjectKeys(this.headerProps);
},
computedItemsPerPage() {
const itemsPerPage = this.options && this.options.itemsPerPage ? this.options.itemsPerPage : this.itemsPerPage;
const itemsPerPageOptions = this.sanitizedFooterProps.itemsPerPageOptions;
if (itemsPerPageOptions && !itemsPerPageOptions.find(item => typeof item === 'number' ? item === itemsPerPage : item.value === itemsPerPage)) {
const firstOption = itemsPerPageOptions[0];
return typeof firstOption === 'object' ? firstOption.value : firstOption;
}
return itemsPerPage;
}
},
created() {
const breakingProps = [['sort-icon', 'header-props.sort-icon'], ['hide-headers', 'hide-default-header'], ['select-all', 'show-select']];
/* istanbul ignore next */
breakingProps.forEach(([original, replacement]) => {
if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this);
});
},
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() {
if (this.calculateWidths) {
window.removeEventListener('resize', this.calcWidths);
}
},
methods: {
calcWidths() {
this.widths = Array.from(this.$el.querySelectorAll('th')).map(e => e.clientWidth);
},
customFilterWithColumns(items, search) {
return searchTableItems(items, search, this.headersWithCustomFilters, this.headersWithoutCustomFilters, this.customFilter);
},
customSortWithHeaders(items, sortBy, sortDesc, locale) {
return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters);
},
createItemProps(item) {
const props = VDataIterator.options.methods.createItemProps.call(this, item);
return Object.assign(props, {
headers: this.computedHeaders
});
},
genCaption(props) {
if (this.caption) return [this.$createElement('caption', [this.caption])];
return getSlot(this, 'caption', props, true);
},
genColgroup(props) {
return this.$createElement('colgroup', this.computedHeaders.map(header => {
return this.$createElement('col', {
class: {
divider: header.divider
}
});
}));
},
genLoading() {
const th = this.$createElement('th', {
staticClass: 'column',
attrs: this.colspanAttrs
}, [this.genProgress()]);
const tr = this.$createElement('tr', {
staticClass: 'v-data-table__progress'
}, [th]);
return this.$createElement('thead', [tr]);
},
genHeaders(props) {
const data = {
props: { ...this.sanitizedHeaderProps,
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
}
};
const children = [getSlot(this, 'header', data)];
if (!this.hideDefaultHeader) {
const scopedSlots = getPrefixedScopedSlots('header.', this.$scopedSlots);
children.push(this.$createElement(VDataTableHeader, { ...data,
scopedSlots
}));
}
if (this.loading) children.push(this.genLoading());
return children;
},
genEmptyWrapper(content) {
return this.$createElement('tr', {
staticClass: 'v-data-table__empty-wrapper'
}, [this.$createElement('td', {
attrs: this.colspanAttrs
}, content)]);
},
genItems(items, props) {
const empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength);
if (empty) return [empty];
return props.groupedItems ? this.genGroupedRows(props.groupedItems, props) : this.genRows(items, props);
},
genGroupedRows(groupedItems, props) {
return groupedItems.map(group => {
if (!this.openCache.hasOwnProperty(group.name)) this.$set(this.openCache, group.name, true);
if (this.$scopedSlots.group) {
return this.$scopedSlots.group({
group: group.name,
options: props.options,
items: group.items,
headers: this.computedHeaders
});
} else {
return this.genDefaultGroupedRow(group.name, group.items, props);
}
});
},
genDefaultGroupedRow(group, items, props) {
const isOpen = !!this.openCache[group];
const children = [this.$createElement('template', {
slot: 'row.content'
}, this.genRows(items, props))];
const toggleFn = () => this.$set(this.openCache, group, !this.openCache[group]);
const removeFn = () => props.updateOptions({
groupBy: [],
groupDesc: []
});
if (this.$scopedSlots['group.header']) {
children.unshift(this.$createElement('template', {
slot: 'column.header'
}, [this.$scopedSlots['group.header']({
group,
groupBy: props.options.groupBy,
items,
headers: this.computedHeaders,
isOpen,
toggle: toggleFn,
remove: removeFn
})]));
} else {
const toggle = this.$createElement(VBtn, {
staticClass: 'ma-0',
props: {
icon: true,
small: true
},
on: {
click: toggleFn
}
}, [this.$createElement(VIcon, [isOpen ? '$minus' : '$plus'])]);
const remove = this.$createElement(VBtn, {
staticClass: 'ma-0',
props: {
icon: true,
small: true
},
on: {
click: removeFn
}
}, [this.$createElement(VIcon, ['$close'])]);
const column = this.$createElement('td', {
staticClass: 'text-start',
attrs: this.colspanAttrs
}, [toggle, `${props.options.groupBy[0]}: ${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,
groupBy: props.options.groupBy,
items,
headers: this.computedHeaders,
isOpen,
toggle: toggleFn
})]));
}
return this.$createElement(RowGroup, {
key: group,
props: {
value: isOpen
}
}, children);
},
genRows(items, props) {
return this.$scopedSlots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props);
},
genScopedRows(items, props) {
const rows = [];
for (let i = 0; i < items.length; i++) {
const item = items[i];
rows.push(this.$scopedSlots.item({ ...this.createItemProps(item),
index: i
}));
if (this.isExpanded(item)) {
rows.push(this.$scopedSlots['expanded-item']({
item,
headers: this.computedHeaders
}));
}
}
return rows;
},
genDefaultRows(items, props) {
return this.$scopedSlots['expanded-item'] ? items.map(item => this.genDefaultExpandedRow(item)) : items.map(item => this.genDefaultSimpleRow(item));
},
genDefaultExpandedRow(item) {
const isExpanded = this.isExpanded(item);
const classes = {
'v-data-table__expanded v-data-table__expanded__row': isExpanded
};
const headerRow = this.genDefaultSimpleRow(item, classes);
const expandedRow = this.$createElement('tr', {
staticClass: 'v-data-table__expanded v-data-table__expanded__content'
}, [this.$scopedSlots['expanded-item']({
item,
headers: this.computedHeaders
})]);
return this.$createElement(RowGroup, {
props: {
value: isExpanded
}
}, [this.$createElement('template', {
slot: 'row.header'
}, [headerRow]), this.$createElement('template', {
slot: 'row.content'
}, [expandedRow])]);
},
genDefaultSimpleRow(item, classes = {}) {
const scopedSlots = getPrefixedScopedSlots('item.', this.$scopedSlots);
const data = this.createItemProps(item);
if (this.showSelect) {
const slot = scopedSlots['data-table-select'];
scopedSlots['data-table-select'] = slot ? () => slot(data) : () => this.$createElement(VSimpleCheckbox, {
staticClass: 'v-data-table__checkbox',
props: {
value: data.isSelected,
disabled: !this.isSelectable(item)
},
on: {
input: val => data.select(val)
}
});
}
if (this.showExpand) {
const slot = scopedSlots['data-table-expand'];
scopedSlots['data-table-expand'] = slot ? () => slot(data) : () => this.$createElement(VIcon, {
staticClass: 'v-data-table__expand-icon',
class: {
'v-data-table__expand-icon--active': data.isExpanded
},
on: {
click: e => {
e.stopPropagation();
data.expand(!data.isExpanded);
}
}
}, [this.expandIcon]);
}
return this.$createElement(this.isMobile ? MobileRow : Row, {
key: getObjectValueByPath(item, this.itemKey),
class: mergeClasses({ ...classes,
'v-data-table__selected': data.isSelected
}, getPropertyFromItem(item, this.itemClass)),
props: {
headers: this.computedHeaders,
item,
rtl: this.$vuetify.rtl
},
scopedSlots,
on: {
// TODO: for click, the first argument should be the event, and the second argument should be data,
// but this is a breaking change so it's for v3
click: () => this.$emit('click:row', item, data),
contextmenu: event => this.$emit('contextmenu:row', event, data),
dblclick: event => this.$emit('dblclick:row', event, data)
}
});
},
genBody(props) {
const data = { ...props,
expand: this.expand,
headers: this.computedHeaders,
isExpanded: this.isExpanded,
isMobile: this.isMobile,
isSelected: this.isSelected,
select: this.select
};
if (this.$scopedSlots.body) {
return this.$scopedSlots.body(data);
}
return this.$createElement('tbody', [getSlot(this, 'body.prepend', data, true), this.genItems(props.items, props), getSlot(this, 'body.append', data, true)]);
},
genFooters(props) {
const data = {
props: {
options: props.options,
pagination: props.pagination,
itemsPerPageText: '$vuetify.dataTable.itemsPerPageText',
...this.sanitizedFooterProps
},
on: {
'update:options': value => props.updateOptions(value)
},
widths: this.widths,
headers: this.computedHeaders
};
const children = [getSlot(this, 'footer', data, true)];
if (!this.hideDefaultFooter) {
children.push(this.$createElement(VDataFooter, { ...data,
scopedSlots: getPrefixedScopedSlots('footer.', this.$scopedSlots)
}));
}
return children;
},
genDefaultScopedSlot(props) {
const 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, {
props: simpleProps
}, [this.proxySlot('top', getSlot(this, 'top', props, true)), this.genCaption(props), this.genColgroup(props), this.genHeaders(props), this.genBody(props), this.proxySlot('bottom', this.genFooters(props))]);
},
proxySlot(slot, content) {
return this.$createElement('template', {
slot
}, content);
}
},
render() {
return this.$createElement(VData, {
props: { ...this.$props,
customFilter: this.customFilterWithColumns,
customSort: this.customSortWithHeaders,
itemsPerPage: this.computedItemsPerPage
},
on: {
'update:options': (v, old) => {
this.internalGroupBy = v.groupBy || [];
!deepEqual(v, old) && this.$emit('update:options', v);
},
'update:page': v => this.$emit('update:page', v),
'update:items-per-page': v => this.$emit('update:items-per-page', v),
'update:sort-by': v => this.$emit('update:sort-by', v),
'update:sort-desc': v => this.$emit('update:sort-desc', v),
'update:group-by': v => this.$emit('update:group-by', v),
'update:group-desc': v => this.$emit('update:group-desc', v),
pagination: (v, old) => !deepEqual(v, old) && this.$emit('pagination', v),
'current-items': v => {
this.internalCurrentItems = v;
this.$emit('current-items', v);
},
'page-count': v => this.$emit('page-count', v)
},
scopedSlots: {
default: this.genDefaultScopedSlot
}
});
}
});
//# sourceMappingURL=VDataTable.js.map
File diff suppressed because one or more lines are too long
+42
View File
@@ -0,0 +1,42 @@
// Styles
import "../../../src/components/VDataTable/VDataTableHeader.sass"; // Components
import VDataTableHeaderMobile from './VDataTableHeaderMobile';
import VDataTableHeaderDesktop from './VDataTableHeaderDesktop'; // Mixins
import header from './mixins/header'; // Utilities
import dedupeModelListeners from '../../util/dedupeModelListeners';
import mergeData from '../../util/mergeData';
import rebuildSlots from '../../util/rebuildFunctionalSlots'; // Types
import Vue from 'vue';
/* @vue/component */
export default Vue.extend({
name: 'v-data-table-header',
functional: true,
props: { ...header.options.props,
mobile: Boolean
},
render(h, {
props,
data,
slots
}) {
dedupeModelListeners(data);
const children = rebuildSlots(slots(), h);
data = mergeData(data, {
props
});
if (props.mobile) {
return h(VDataTableHeaderMobile, data, children);
} else {
return h(VDataTableHeaderDesktop, data, children);
}
}
});
//# sourceMappingURL=VDataTableHeader.js.map
@@ -0,0 +1 @@
{"version":3,"sources":["../../../src/components/VDataTable/VDataTableHeader.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,0DAAP,C,CAEA;;AACA,OAAO,sBAAP,MAAmC,0BAAnC;AACA,OAAO,uBAAP,MAAoC,2BAApC,C,CAEA;;AACA,OAAO,MAAP,MAAmB,iBAAnB,C,CAEA;;AACA,OAAO,oBAAP,MAAiC,iCAAjC;AACA,OAAO,SAAP,MAAsB,sBAAtB;AACA,OAAO,YAAP,MAAyB,mCAAzB,C,CAEA;;AACA,OAAO,GAAP,MAAgB,KAAhB;AAEA;;AACA,eAAe,GAAG,CAAC,MAAJ,CAAW;AACxB,EAAA,IAAI,EAAE,qBADkB;AAGxB,EAAA,UAAU,EAAE,IAHY;AAKxB,EAAA,KAAK,EAAE,EACL,GAAG,MAAM,CAAC,OAAP,CAAe,KADb;AAEL,IAAA,MAAM,EAAE;AAFH,GALiB;;AAUxB,EAAA,MAAM,CAAE,CAAF,EAAK;AAAE,IAAA,KAAF;AAAS,IAAA,IAAT;AAAe,IAAA;AAAf,GAAL,EAA2B;AAC/B,IAAA,oBAAoB,CAAC,IAAD,CAApB;AACA,UAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAN,EAAU,CAAV,CAA7B;AAEA,IAAA,IAAI,GAAG,SAAS,CAAC,IAAD,EAAO;AAAE,MAAA;AAAF,KAAP,CAAhB;;AAEA,QAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,aAAO,CAAC,CAAC,sBAAD,EAAyB,IAAzB,EAA+B,QAA/B,CAAR;AACD,KAFD,MAEO;AACL,aAAO,CAAC,CAAC,uBAAD,EAA0B,IAA1B,EAAgC,QAAhC,CAAR;AACD;AACF;;AArBuB,CAAX,CAAf","sourcesContent":["// Styles\nimport './VDataTableHeader.sass'\n\n// Components\nimport VDataTableHeaderMobile from './VDataTableHeaderMobile'\nimport VDataTableHeaderDesktop from './VDataTableHeaderDesktop'\n\n// Mixins\nimport header from './mixins/header'\n\n// Utilities\nimport dedupeModelListeners from '../../util/dedupeModelListeners'\nimport mergeData from '../../util/mergeData'\nimport rebuildSlots from '../../util/rebuildFunctionalSlots'\n\n// Types\nimport Vue from 'vue'\n\n/* @vue/component */\nexport default Vue.extend({\n name: 'v-data-table-header',\n\n functional: true,\n\n props: {\n ...header.options.props,\n mobile: Boolean,\n },\n\n render (h, { props, data, slots }) {\n dedupeModelListeners(data)\n const children = rebuildSlots(slots(), h)\n\n data = mergeData(data, { props })\n\n if (props.mobile) {\n return h(VDataTableHeaderMobile, data, children)\n } else {\n return h(VDataTableHeaderDesktop, data, children)\n }\n },\n})\n"],"sourceRoot":"","file":"VDataTableHeader.js"}
@@ -0,0 +1,110 @@
import mixins from '../../util/mixins';
import header from './mixins/header';
import { wrapInArray, convertToUnit } from '../../util/helpers';
export default mixins(header).extend({
name: 'v-data-table-header-desktop',
methods: {
genGroupByToggle(header) {
return this.$createElement('span', {
on: {
click: e => {
e.stopPropagation();
this.$emit('group', header.value);
}
}
}, ['group']);
},
getAria(beingSorted, isDesc) {
const $t = key => this.$vuetify.lang.t(`$vuetify.dataTable.ariaLabel.${key}`);
let ariaSort = 'none';
let ariaLabel = [$t('sortNone'), $t('activateAscending')];
if (!beingSorted) {
return {
ariaSort,
ariaLabel: ariaLabel.join(' ')
};
}
if (isDesc) {
ariaSort = 'descending';
ariaLabel = [$t('sortDescending'), $t(this.options.mustSort ? 'activateAscending' : 'activateNone')];
} else {
ariaSort = 'ascending';
ariaLabel = [$t('sortAscending'), $t('activateDescending')];
}
return {
ariaSort,
ariaLabel: ariaLabel.join(' ')
};
},
genHeader(header) {
const data = {
attrs: {
role: 'columnheader',
scope: 'col',
'aria-label': header.text || ''
},
style: {
width: convertToUnit(header.width),
minWidth: convertToUnit(header.width)
},
class: [`text-${header.align || 'start'}`, ...wrapInArray(header.class), header.divider && 'v-data-table__divider'],
on: {}
};
const children = [];
if (header.value === 'data-table-select' && !this.singleSelect) {
return this.$createElement('th', data, [this.genSelectAll()]);
}
children.push(this.$scopedSlots[header.value] ? this.$scopedSlots[header.value]({
header
}) : this.$createElement('span', [header.text]));
if (!this.disableSort && (header.sortable || !header.hasOwnProperty('sortable'))) {
data.on['click'] = () => this.$emit('sort', header.value);
const sortIndex = this.options.sortBy.findIndex(k => k === header.value);
const beingSorted = sortIndex >= 0;
const isDesc = this.options.sortDesc[sortIndex];
data.class.push('sortable');
const {
ariaLabel,
ariaSort
} = this.getAria(beingSorted, isDesc);
data.attrs['aria-label'] += `${header.text ? ': ' : ''}${ariaLabel}`;
data.attrs['aria-sort'] = ariaSort;
if (beingSorted) {
data.class.push('active');
data.class.push(isDesc ? 'desc' : 'asc');
}
if (header.align === 'end') children.unshift(this.genSortIcon());else children.push(this.genSortIcon());
if (this.options.multiSort && beingSorted) {
children.push(this.$createElement('span', {
class: 'v-data-table-header__sort-badge'
}, [String(sortIndex + 1)]));
}
}
if (this.showGroupBy && header.groupable !== false) children.push(this.genGroupByToggle(header));
return this.$createElement('th', data, children);
}
},
render() {
return this.$createElement('thead', {
staticClass: 'v-data-table-header'
}, [this.$createElement('tr', this.headers.map(header => this.genHeader(header)))]);
}
});
//# sourceMappingURL=VDataTableHeaderDesktop.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,95 @@
import mixins from '../../util/mixins';
import VSelect from '../VSelect/VSelect';
import VChip from '../VChip';
import header from './mixins/header';
import { wrapInArray } from '../../util/helpers';
export default mixins(header).extend({
name: 'v-data-table-header-mobile',
props: {
sortByText: {
type: String,
default: '$vuetify.dataTable.sortBy'
}
},
methods: {
genSortChip(props) {
const children = [props.item.text];
const sortIndex = this.options.sortBy.findIndex(k => k === props.item.value);
const beingSorted = sortIndex >= 0;
const isDesc = this.options.sortDesc[sortIndex];
children.push(this.$createElement('div', {
staticClass: 'v-chip__close',
class: {
sortable: true,
active: beingSorted,
asc: beingSorted && !isDesc,
desc: beingSorted && isDesc
}
}, [this.genSortIcon()]));
return this.$createElement(VChip, {
staticClass: 'sortable',
on: {
click: e => {
e.stopPropagation();
this.$emit('sort', props.item.value);
}
}
}, children);
},
genSortSelect(items) {
return this.$createElement(VSelect, {
props: {
label: this.$vuetify.lang.t(this.sortByText),
items,
hideDetails: true,
multiple: this.options.multiSort,
value: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
menuProps: {
closeOnContentClick: true
}
},
on: {
change: v => this.$emit('sort', v)
},
scopedSlots: {
selection: props => this.genSortChip(props)
}
});
}
},
render(h) {
const children = [];
const header = this.headers.find(h => h.value === 'data-table-select');
if (header && !this.singleSelect) {
children.push(this.$createElement('div', {
class: ['v-data-table-header-mobile__select', ...wrapInArray(header.class)],
attrs: {
width: header.width
}
}, [this.genSelectAll()]));
}
const sortHeaders = this.headers.filter(h => h.sortable !== false && h.value !== 'data-table-select').map(h => ({
text: h.text,
value: h.value
}));
if (!this.disableSort && sortHeaders.length) {
children.push(this.genSortSelect(sortHeaders));
}
const th = h('th', [h('div', {
staticClass: 'v-data-table-header-mobile__wrapper'
}, children)]);
const tr = h('tr', [th]);
return h('thead', {
staticClass: 'v-data-table-header v-data-table-header-mobile'
}, [tr]);
}
});
//# sourceMappingURL=VDataTableHeaderMobile.js.map
File diff suppressed because one or more lines are too long
+137
View File
@@ -0,0 +1,137 @@
// Styles
import "../../../src/components/VDataTable/VEditDialog.sass"; // Mixins
import Returnable from '../../mixins/returnable';
import Themeable from '../../mixins/themeable'; // Utils
import { keyCodes } from '../../util/helpers'; // Component
import VBtn from '../VBtn';
import VMenu from '../VMenu';
import mixins from '../../util/mixins';
/* @vue/component */
export default mixins(Returnable, Themeable).extend({
name: 'v-edit-dialog',
props: {
cancelText: {
default: 'Cancel'
},
large: Boolean,
eager: Boolean,
persistent: Boolean,
saveText: {
default: 'Save'
},
transition: {
type: String,
default: 'slide-x-reverse-transition'
}
},
data() {
return {
isActive: false
};
},
watch: {
isActive(val) {
if (val) {
this.$emit('open');
setTimeout(this.focus, 50); // Give DOM time to paint
} else {
this.$emit('close');
}
}
},
methods: {
cancel() {
this.isActive = false;
this.$emit('cancel');
},
focus() {
const input = this.$refs.content.querySelector('input');
input && input.focus();
},
genButton(fn, text) {
return this.$createElement(VBtn, {
props: {
text: true,
color: 'primary',
light: true
},
on: {
click: fn
}
}, text);
},
genActions() {
return this.$createElement('div', {
class: 'v-small-dialog__actions'
}, [this.genButton(this.cancel, this.cancelText), this.genButton(() => {
this.save(this.returnValue);
this.$emit('save');
}, this.saveText)]);
},
genContent() {
return this.$createElement('div', {
staticClass: 'v-small-dialog__content',
on: {
keydown: e => {
const input = this.$refs.content.querySelector('input');
e.keyCode === keyCodes.esc && this.cancel();
if (e.keyCode === keyCodes.enter && input) {
this.save(input.value);
this.$emit('save');
}
}
},
ref: 'content'
}, [this.$slots.input]);
}
},
render(h) {
return h(VMenu, {
staticClass: 'v-small-dialog',
class: this.themeClasses,
props: {
contentClass: 'v-small-dialog__menu-content',
transition: this.transition,
origin: 'top right',
right: true,
value: this.isActive,
closeOnClick: !this.persistent,
closeOnContentClick: false,
eager: this.eager,
light: this.light,
dark: this.dark
},
on: {
input: val => this.isActive = val
},
scopedSlots: {
activator: ({
on
}) => {
return h('div', {
staticClass: 'v-small-dialog__activator',
on
}, [h('span', {
staticClass: 'v-small-dialog__activator__content'
}, this.$slots.default)]);
}
}
}, [this.genContent(), this.large ? this.genActions() : null]);
}
});
//# sourceMappingURL=VEditDialog.js.map
File diff suppressed because one or more lines are too long
+43
View File
@@ -0,0 +1,43 @@
import "../../../src/components/VDataTable/VSimpleTable.sass";
import { convertToUnit } from '../../util/helpers';
import Themeable from '../../mixins/themeable';
import mixins from '../../util/mixins';
export default mixins(Themeable).extend({
name: 'v-simple-table',
props: {
dense: Boolean,
fixedHeader: Boolean,
height: [Number, String]
},
computed: {
classes() {
return {
'v-data-table--dense': this.dense,
'v-data-table--fixed-height': !!this.height && !this.fixedHeader,
'v-data-table--fixed-header': this.fixedHeader,
...this.themeClasses
};
}
},
methods: {
genWrapper() {
return this.$slots.wrapper || this.$createElement('div', {
staticClass: 'v-data-table__wrapper',
style: {
height: convertToUnit(this.height)
}
}, [this.$createElement('table', this.$slots.default)]);
}
},
render(h) {
return h('div', {
staticClass: 'v-data-table',
class: this.classes
}, [this.$slots.top, this.genWrapper(), this.$slots.bottom]);
}
});
//# sourceMappingURL=VSimpleTable.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../../../src/components/VDataTable/VSimpleTable.ts"],"names":[],"mappings":"AAAA,OAAO,sDAAP;AAEA,SAAS,aAAT,QAA8B,oBAA9B;AACA,OAAO,SAAP,MAAsB,wBAAtB;AACA,OAAO,MAAP,MAAmB,mBAAnB;AAGA,eAAe,MAAM,CAAC,SAAD,CAAN,CAAkB,MAAlB,CAAyB;AACtC,EAAA,IAAI,EAAE,gBADgC;AAGtC,EAAA,KAAK,EAAE;AACL,IAAA,KAAK,EAAE,OADF;AAEL,IAAA,WAAW,EAAE,OAFR;AAGL,IAAA,MAAM,EAAE,CAAC,MAAD,EAAS,MAAT;AAHH,GAH+B;AAStC,EAAA,QAAQ,EAAE;AACR,IAAA,OAAO,GAAA;AACL,aAAO;AACL,+BAAuB,KAAK,KADvB;AAEL,sCAA8B,CAAC,CAAC,KAAK,MAAP,IAAiB,CAAC,KAAK,WAFhD;AAGL,sCAA8B,KAAK,WAH9B;AAIL,WAAG,KAAK;AAJH,OAAP;AAMD;;AARO,GAT4B;AAoBtC,EAAA,OAAO,EAAE;AACP,IAAA,UAAU,GAAA;AACR,aAAO,KAAK,MAAL,CAAY,OAAZ,IAAuB,KAAK,cAAL,CAAoB,KAApB,EAA2B;AACvD,QAAA,WAAW,EAAE,uBAD0C;AAEvD,QAAA,KAAK,EAAE;AACL,UAAA,MAAM,EAAE,aAAa,CAAC,KAAK,MAAN;AADhB;AAFgD,OAA3B,EAK3B,CACD,KAAK,cAAL,CAAoB,OAApB,EAA6B,KAAK,MAAL,CAAY,OAAzC,CADC,CAL2B,CAA9B;AAQD;;AAVM,GApB6B;;AAiCtC,EAAA,MAAM,CAAE,CAAF,EAAG;AACP,WAAO,CAAC,CAAC,KAAD,EAAQ;AACd,MAAA,WAAW,EAAE,cADC;AAEd,MAAA,KAAK,EAAE,KAAK;AAFE,KAAR,EAGL,CACD,KAAK,MAAL,CAAY,GADX,EAED,KAAK,UAAL,EAFC,EAGD,KAAK,MAAL,CAAY,MAHX,CAHK,CAAR;AAQD;;AA1CqC,CAAzB,CAAf","sourcesContent":["import './VSimpleTable.sass'\n\nimport { convertToUnit } from '../../util/helpers'\nimport Themeable from '../../mixins/themeable'\nimport mixins from '../../util/mixins'\nimport { VNode } from 'vue'\n\nexport default mixins(Themeable).extend({\n name: 'v-simple-table',\n\n props: {\n dense: Boolean,\n fixedHeader: Boolean,\n height: [Number, String],\n },\n\n computed: {\n classes (): Record<string, boolean> {\n return {\n 'v-data-table--dense': this.dense,\n 'v-data-table--fixed-height': !!this.height && !this.fixedHeader,\n 'v-data-table--fixed-header': this.fixedHeader,\n ...this.themeClasses,\n }\n },\n },\n\n methods: {\n genWrapper () {\n return this.$slots.wrapper || this.$createElement('div', {\n staticClass: 'v-data-table__wrapper',\n style: {\n height: convertToUnit(this.height),\n },\n }, [\n this.$createElement('table', this.$slots.default),\n ])\n },\n },\n\n render (h): VNode {\n return h('div', {\n staticClass: 'v-data-table',\n class: this.classes,\n }, [\n this.$slots.top,\n this.genWrapper(),\n this.$slots.bottom,\n ])\n },\n})\n"],"sourceRoot":"","file":"VSimpleTable.js"}
+153
View File
@@ -0,0 +1,153 @@
import "../../../src/components/VDataTable/VVirtualTable.sass"; // Components
import VSimpleTable from './VSimpleTable';
import mixins from '../../util/mixins'; // Utiltiies
import { convertToUnit, debounce } from '../../util/helpers'; // Types
const baseMixins = mixins(VSimpleTable);
export default baseMixins.extend().extend({
name: 'v-virtual-table',
props: {
chunkSize: {
type: Number,
default: 25
},
headerHeight: {
type: Number,
default: 48
},
items: {
type: Array,
default: () => []
},
rowHeight: {
type: Number,
default: 48
}
},
data: () => ({
scrollTop: 0,
oldChunk: 0,
scrollDebounce: null,
invalidateCache: false
}),
computed: {
itemsLength() {
return this.items.length;
},
totalHeight() {
return this.itemsLength * this.rowHeight + this.headerHeight;
},
topIndex() {
return Math.floor(this.scrollTop / this.rowHeight);
},
chunkIndex() {
return Math.floor(this.topIndex / this.chunkSize);
},
startIndex() {
return Math.max(0, this.chunkIndex * this.chunkSize - this.chunkSize);
},
offsetTop() {
return Math.max(0, this.startIndex * this.rowHeight);
},
stopIndex() {
return Math.min(this.startIndex + this.chunkSize * 3, this.itemsLength);
},
offsetBottom() {
return Math.max(0, (this.itemsLength - this.stopIndex - this.startIndex) * this.rowHeight);
}
},
watch: {
chunkIndex(newValue, oldValue) {
this.oldChunk = oldValue;
},
items() {
this.cachedItems = null;
this.$refs.table.scrollTop = 0;
}
},
created() {
this.cachedItems = null;
},
mounted() {
this.scrollDebounce = debounce(this.onScroll, 50);
this.$refs.table.addEventListener('scroll', this.scrollDebounce, {
passive: true
});
},
beforeDestroy() {
this.$refs.table.removeEventListener('scroll', this.scrollDebounce);
},
methods: {
createStyleHeight(height) {
return {
height: `${height}px`
};
},
genBody() {
if (this.cachedItems === null || this.chunkIndex !== this.oldChunk) {
this.cachedItems = this.genItems();
this.oldChunk = this.chunkIndex;
}
return this.$createElement('tbody', [this.$createElement('tr', {
style: this.createStyleHeight(this.offsetTop)
}), this.cachedItems, this.$createElement('tr', {
style: this.createStyleHeight(this.offsetBottom)
})]);
},
genItems() {
return this.$scopedSlots.items({
items: this.items.slice(this.startIndex, this.stopIndex)
});
},
onScroll(e) {
const target = e.target;
this.scrollTop = target.scrollTop;
},
genTable() {
return this.$createElement('div', {
ref: 'table',
staticClass: 'v-virtual-table__table'
}, [this.$createElement('table', [this.$slots['body.before'], this.genBody(), this.$slots['body.after']])]);
},
genWrapper() {
return this.$createElement('div', {
staticClass: 'v-virtual-table__wrapper',
style: {
height: convertToUnit(this.height)
}
}, [this.genTable()]);
}
},
render(h) {
return h('div', {
staticClass: 'v-data-table v-virtual-table',
class: this.classes
}, [this.$slots.top, this.genWrapper(), this.$slots.bottom]);
}
});
//# sourceMappingURL=VVirtualTable.js.map
File diff suppressed because one or more lines are too long
+19
View File
@@ -0,0 +1,19 @@
import { createSimpleFunctional } from '../../util/helpers';
import VDataTable from './VDataTable';
import VDataTableHeader from './VDataTableHeader';
import VEditDialog from './VEditDialog';
import VSimpleTable from './VSimpleTable';
import VVirtualTable from './VVirtualTable';
const VTableOverflow = createSimpleFunctional('v-table__overflow');
export { VDataTable, VEditDialog, VTableOverflow, VDataTableHeader, VSimpleTable, VVirtualTable };
export default {
$_vuetify_subcomponents: {
VDataTable,
VDataTableHeader,
VEditDialog,
VTableOverflow,
VSimpleTable,
VVirtualTable
}
};
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../../../src/components/VDataTable/index.ts"],"names":[],"mappings":"AAAA,SAAS,sBAAT,QAAuC,oBAAvC;AAEA,OAAO,UAAP,MAAuB,cAAvB;AACA,OAAO,gBAAP,MAA6B,oBAA7B;AACA,OAAO,WAAP,MAAwB,eAAxB;AACA,OAAO,YAAP,MAAyB,gBAAzB;AACA,OAAO,aAAP,MAA0B,iBAA1B;AAEA,MAAM,cAAc,GAAG,sBAAsB,CAAC,mBAAD,CAA7C;AAEA,SAAS,UAAT,EAAqB,WAArB,EAAkC,cAAlC,EAAkD,gBAAlD,EAAoE,YAApE,EAAkF,aAAlF;AAEA,eAAe;AACb,EAAA,uBAAuB,EAAE;AACvB,IAAA,UADuB;AAEvB,IAAA,gBAFuB;AAGvB,IAAA,WAHuB;AAIvB,IAAA,cAJuB;AAKvB,IAAA,YALuB;AAMvB,IAAA;AANuB;AADZ,CAAf","sourcesContent":["import { createSimpleFunctional } from '../../util/helpers'\n\nimport VDataTable from './VDataTable'\nimport VDataTableHeader from './VDataTableHeader'\nimport VEditDialog from './VEditDialog'\nimport VSimpleTable from './VSimpleTable'\nimport VVirtualTable from './VVirtualTable'\n\nconst VTableOverflow = createSimpleFunctional('v-table__overflow')\n\nexport { VDataTable, VEditDialog, VTableOverflow, VDataTableHeader, VSimpleTable, VVirtualTable }\n\nexport default {\n $_vuetify_subcomponents: {\n VDataTable,\n VDataTableHeader,\n VEditDialog,\n VTableOverflow,\n VSimpleTable,\n VVirtualTable,\n },\n}\n"],"sourceRoot":"","file":"index.js"}
+71
View File
@@ -0,0 +1,71 @@
import VIcon from '../../VIcon';
import VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox';
import ripple from '../../../directives/ripple';
import mixins from '../../../util/mixins';
export default mixins().extend({
// https://github.com/vuejs/vue/issues/6872
directives: {
ripple
},
props: {
headers: {
type: Array,
default: () => []
},
options: {
type: Object,
default: () => ({
page: 1,
itemsPerPage: 10,
sortBy: [],
sortDesc: [],
groupBy: [],
groupDesc: [],
multiSort: false,
mustSort: false
})
},
sortIcon: {
type: String,
default: '$sort'
},
everyItem: Boolean,
someItems: Boolean,
showGroupBy: Boolean,
singleSelect: Boolean,
disableSort: Boolean
},
methods: {
genSelectAll() {
const data = {
props: {
value: this.everyItem,
indeterminate: !this.everyItem && this.someItems
},
on: {
input: v => this.$emit('toggle-select-all', v)
}
};
if (this.$scopedSlots['data-table-select']) {
return this.$scopedSlots['data-table-select'](data);
}
return this.$createElement(VSimpleCheckbox, {
staticClass: 'v-data-table__checkbox',
...data
});
},
genSortIcon() {
return this.$createElement(VIcon, {
staticClass: 'v-data-table-header__icon',
props: {
size: 18
}
}, [this.sortIcon]);
}
}
});
//# sourceMappingURL=header.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../../../../src/components/VDataTable/mixins/header.ts"],"names":[],"mappings":"AACA,OAAO,KAAP,MAAkB,aAAlB;AACA,OAAO,eAAP,MAA4B,iCAA5B;AACA,OAAO,MAAP,MAAmB,4BAAnB;AAGA,OAAO,MAAP,MAAmB,sBAAnB;AASA,eAAe,MAAM,GAAY,MAAlB,CAAyB;AACtC;AACA,EAAA,UAAU,EAAE;AACV,IAAA;AADU,GAF0B;AAMtC,EAAA,KAAK,EAAE;AACL,IAAA,OAAO,EAAE;AACP,MAAA,IAAI,EAAE,KADC;AAEP,MAAA,OAAO,EAAE,MAAO;AAFT,KADJ;AAKL,IAAA,OAAO,EAAE;AACP,MAAA,IAAI,EAAE,MADC;AAEP,MAAA,OAAO,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,CADQ;AAEd,QAAA,YAAY,EAAE,EAFA;AAGd,QAAA,MAAM,EAAE,EAHM;AAId,QAAA,QAAQ,EAAE,EAJI;AAKd,QAAA,OAAO,EAAE,EALK;AAMd,QAAA,SAAS,EAAE,EANG;AAOd,QAAA,SAAS,EAAE,KAPG;AAQd,QAAA,QAAQ,EAAE;AARI,OAAP;AAFF,KALJ;AAkBL,IAAA,QAAQ,EAAE;AACR,MAAA,IAAI,EAAE,MADE;AAER,MAAA,OAAO,EAAE;AAFD,KAlBL;AAsBL,IAAA,SAAS,EAAE,OAtBN;AAuBL,IAAA,SAAS,EAAE,OAvBN;AAwBL,IAAA,WAAW,EAAE,OAxBR;AAyBL,IAAA,YAAY,EAAE,OAzBT;AA0BL,IAAA,WAAW,EAAE;AA1BR,GAN+B;AAmCtC,EAAA,OAAO,EAAE;AACP,IAAA,YAAY,GAAA;AACV,YAAM,IAAI,GAAG;AACX,QAAA,KAAK,EAAE;AACL,UAAA,KAAK,EAAE,KAAK,SADP;AAEL,UAAA,aAAa,EAAE,CAAC,KAAK,SAAN,IAAmB,KAAK;AAFlC,SADI;AAKX,QAAA,EAAE,EAAE;AACF,UAAA,KAAK,EAAG,CAAD,IAAgB,KAAK,KAAL,CAAW,mBAAX,EAAgC,CAAhC;AADrB;AALO,OAAb;;AAUA,UAAI,KAAK,YAAL,CAAkB,mBAAlB,CAAJ,EAA4C;AAC1C,eAAO,KAAK,YAAL,CAAkB,mBAAlB,EAAwC,IAAxC,CAAP;AACD;;AAED,aAAO,KAAK,cAAL,CAAoB,eAApB,EAAqC;AAC1C,QAAA,WAAW,EAAE,wBAD6B;AAE1C,WAAG;AAFuC,OAArC,CAAP;AAID,KApBM;;AAqBP,IAAA,WAAW,GAAA;AACT,aAAO,KAAK,cAAL,CAAoB,KAApB,EAA2B;AAChC,QAAA,WAAW,EAAE,2BADmB;AAEhC,QAAA,KAAK,EAAE;AACL,UAAA,IAAI,EAAE;AADD;AAFyB,OAA3B,EAKJ,CAAC,KAAK,QAAN,CALI,CAAP;AAMD;;AA5BM;AAnC6B,CAAzB,CAAf","sourcesContent":["import { VDataTable } from '../'\nimport VIcon from '../../VIcon'\nimport VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox'\nimport ripple from '../../../directives/ripple'\n\nimport Vue, { PropType } from 'vue'\nimport mixins from '../../../util/mixins'\nimport { DataOptions, DataTableHeader } from 'vuetify/types'\n\ntype VDataTableInstance = InstanceType<typeof VDataTable>\n\ninterface options extends Vue {\n dataTable: VDataTableInstance\n}\n\nexport default mixins<options>().extend({\n // https://github.com/vuejs/vue/issues/6872\n directives: {\n ripple,\n },\n\n props: {\n headers: {\n type: Array as PropType<DataTableHeader[]>,\n default: () => ([]),\n },\n options: {\n type: Object as PropType<DataOptions>,\n default: () => ({\n page: 1,\n itemsPerPage: 10,\n sortBy: [],\n sortDesc: [],\n groupBy: [],\n groupDesc: [],\n multiSort: false,\n mustSort: false,\n }),\n },\n sortIcon: {\n type: String,\n default: '$sort',\n },\n everyItem: Boolean,\n someItems: Boolean,\n showGroupBy: Boolean,\n singleSelect: Boolean,\n disableSort: Boolean,\n },\n\n methods: {\n genSelectAll () {\n const data = {\n props: {\n value: this.everyItem,\n indeterminate: !this.everyItem && this.someItems,\n },\n on: {\n input: (v: boolean) => this.$emit('toggle-select-all', v),\n },\n }\n\n if (this.$scopedSlots['data-table-select']) {\n return this.$scopedSlots['data-table-select']!(data)\n }\n\n return this.$createElement(VSimpleCheckbox, {\n staticClass: 'v-data-table__checkbox',\n ...data,\n })\n },\n genSortIcon () {\n return this.$createElement(VIcon, {\n staticClass: 'v-data-table-header__icon',\n props: {\n size: 18,\n },\n }, [this.sortIcon])\n },\n },\n})\n"],"sourceRoot":"","file":"header.js"}