vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+65
@@ -0,0 +1,65 @@
|
||||
import ExpandTransitionGenerator from '../../transitions/expand-transition';
|
||||
import { getObjectValueByPath } from '../../../util/helpers';
|
||||
/* @vue/component */
|
||||
export default {
|
||||
methods: {
|
||||
genTBody: function genTBody() {
|
||||
var children = this.genItems();
|
||||
return this.$createElement('tbody', children);
|
||||
},
|
||||
genExpandedRow: function genExpandedRow(props) {
|
||||
var children = [];
|
||||
if (this.isExpanded(props.item)) {
|
||||
var expand = this.$createElement('div', {
|
||||
class: 'v-datatable__expand-content',
|
||||
key: getObjectValueByPath(props.item, this.itemKey)
|
||||
}, [this.$scopedSlots.expand(props)]);
|
||||
children.push(expand);
|
||||
}
|
||||
var transition = this.$createElement('transition-group', {
|
||||
class: 'v-datatable__expand-col',
|
||||
attrs: { colspan: this.headerColumns },
|
||||
props: {
|
||||
tag: 'td'
|
||||
},
|
||||
on: ExpandTransitionGenerator('v-datatable__expand-col--expanded')
|
||||
}, children);
|
||||
return this.genTR([transition], { class: 'v-datatable__expand-row' });
|
||||
},
|
||||
genFilteredItems: function genFilteredItems() {
|
||||
if (!this.$scopedSlots.items) {
|
||||
return null;
|
||||
}
|
||||
var rows = [];
|
||||
for (var index = 0, len = this.filteredItems.length; index < len; ++index) {
|
||||
var item = this.filteredItems[index];
|
||||
var props = this.createProps(item, index);
|
||||
var row = this.$scopedSlots.items(props);
|
||||
rows.push(this.hasTag(row, 'td') ? this.genTR(row, {
|
||||
key: this.itemKey ? getObjectValueByPath(props.item, this.itemKey) : index,
|
||||
attrs: { active: this.isSelected(item) }
|
||||
}) : row);
|
||||
if (this.$scopedSlots.expand) {
|
||||
var expandRow = this.genExpandedRow(props);
|
||||
rows.push(expandRow);
|
||||
}
|
||||
}
|
||||
return rows;
|
||||
},
|
||||
genEmptyItems: function genEmptyItems(content) {
|
||||
if (this.hasTag(content, 'tr')) {
|
||||
return content;
|
||||
} else if (this.hasTag(content, 'td')) {
|
||||
return this.genTR(content);
|
||||
} else {
|
||||
return this.genTR([this.$createElement('td', {
|
||||
class: {
|
||||
'text-xs-center': typeof content === 'string'
|
||||
},
|
||||
attrs: { colspan: this.headerColumns }
|
||||
}, content)]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=body.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/VDataTable/mixins/body.js"],"names":[],"mappings":"AAAA,OAAO,yBAAP,MAAsC,qCAAtC;AAEA,SAAS,oBAAT,QAAqC,uBAArC;AAEA;AACA,eAAe;AACb,aAAS;AACP,gBADO,sBACC;AACN,gBAAM,WAAW,KAAK,QAAL,EAAjB;AAEA,mBAAO,KAAK,cAAL,CAAoB,OAApB,EAA6B,QAA7B,CAAP;AACD,SALM;AAMP,sBANO,0BAMS,KANT,EAMc;AACnB,gBAAM,WAAW,EAAjB;AAEA,gBAAI,KAAK,UAAL,CAAgB,MAAM,IAAtB,CAAJ,EAAiC;AAC/B,oBAAM,SAAS,KAAK,cAAL,CAAoB,KAApB,EAA2B;AACxC,2BAAO,6BADiC;AAExC,yBAAK,qBAAqB,MAAM,IAA3B,EAAiC,KAAK,OAAtC;AAFmC,iBAA3B,EAGZ,CAAC,KAAK,YAAL,CAAkB,MAAlB,CAAyB,KAAzB,CAAD,CAHY,CAAf;AAKA,yBAAS,IAAT,CAAc,MAAd;AACD;AAED,gBAAM,aAAa,KAAK,cAAL,CAAoB,kBAApB,EAAwC;AACzD,uBAAO,yBADkD;AAEzD,uBAAO,EAAE,SAAS,KAAK,aAAhB,EAFkD;AAGzD,uBAAO;AACL,yBAAK;AADA,iBAHkD;AAMzD,oBAAI,0BAA0B,mCAA1B;AANqD,aAAxC,EAOhB,QAPgB,CAAnB;AASA,mBAAO,KAAK,KAAL,CAAW,CAAC,UAAD,CAAX,EAAyB,EAAE,OAAO,yBAAT,EAAzB,CAAP;AACD,SA5BM;AA6BP,wBA7BO,8BA6BS;AACd,gBAAI,CAAC,KAAK,YAAL,CAAkB,KAAvB,EAA8B;AAC5B,uBAAO,IAAP;AACD;AAED,gBAAM,OAAO,EAAb;AACA,iBAAK,IAAI,QAAQ,CAAZ,EAAe,MAAM,KAAK,aAAL,CAAmB,MAA7C,EAAqD,QAAQ,GAA7D,EAAkE,EAAE,KAApE,EAA2E;AACzE,oBAAM,OAAO,KAAK,aAAL,CAAmB,KAAnB,CAAb;AACA,oBAAM,QAAQ,KAAK,WAAL,CAAiB,IAAjB,EAAuB,KAAvB,CAAd;AACA,oBAAM,MAAM,KAAK,YAAL,CAAkB,KAAlB,CAAwB,KAAxB,CAAZ;AAEA,qBAAK,IAAL,CAAU,KAAK,MAAL,CAAY,GAAZ,EAAiB,IAAjB,IACN,KAAK,KAAL,CAAW,GAAX,EAAgB;AAChB,yBAAK,KAAK,OAAL,GAAe,qBAAqB,MAAM,IAA3B,EAAiC,KAAK,OAAtC,CAAf,GAAgE,KADrD;AAEhB,2BAAO,EAAE,QAAQ,KAAK,UAAL,CAAgB,IAAhB,CAAV;AAFS,iBAAhB,CADM,GAKN,GALJ;AAOA,oBAAI,KAAK,YAAL,CAAkB,MAAtB,EAA8B;AAC5B,wBAAM,YAAY,KAAK,cAAL,CAAoB,KAApB,CAAlB;AACA,yBAAK,IAAL,CAAU,SAAV;AACD;AACF;AAED,mBAAO,IAAP;AACD,SAtDM;AAuDP,qBAvDO,yBAuDQ,OAvDR,EAuDe;AACpB,gBAAI,KAAK,MAAL,CAAY,OAAZ,EAAqB,IAArB,CAAJ,EAAgC;AAC9B,uBAAO,OAAP;AACD,aAFD,MAEO,IAAI,KAAK,MAAL,CAAY,OAAZ,EAAqB,IAArB,CAAJ,EAAgC;AACrC,uBAAO,KAAK,KAAL,CAAW,OAAX,CAAP;AACD,aAFM,MAEA;AACL,uBAAO,KAAK,KAAL,CAAW,CAAC,KAAK,cAAL,CAAoB,IAApB,EAA0B;AAC3C,2BAAO;AACL,0CAAkB,OAAO,OAAP,KAAmB;AADhC,qBADoC;AAI3C,2BAAO,EAAE,SAAS,KAAK,aAAhB;AAJoC,iBAA1B,EAKhB,OALgB,CAAD,CAAX,CAAP;AAMD;AACF;AApEM;AADI,CAAf","sourcesContent":["import ExpandTransitionGenerator from '../../transitions/expand-transition'\n\nimport { getObjectValueByPath } from '../../../util/helpers'\n\n/* @vue/component */\nexport default {\n methods: {\n genTBody () {\n const children = this.genItems()\n\n return this.$createElement('tbody', children)\n },\n genExpandedRow (props) {\n const children = []\n\n if (this.isExpanded(props.item)) {\n const expand = this.$createElement('div', {\n class: 'v-datatable__expand-content',\n key: getObjectValueByPath(props.item, this.itemKey)\n }, [this.$scopedSlots.expand(props)])\n\n children.push(expand)\n }\n\n const transition = this.$createElement('transition-group', {\n class: 'v-datatable__expand-col',\n attrs: { colspan: this.headerColumns },\n props: {\n tag: 'td'\n },\n on: ExpandTransitionGenerator('v-datatable__expand-col--expanded')\n }, children)\n\n return this.genTR([transition], { class: 'v-datatable__expand-row' })\n },\n genFilteredItems () {\n if (!this.$scopedSlots.items) {\n return null\n }\n\n const rows = []\n for (let index = 0, len = this.filteredItems.length; index < len; ++index) {\n const item = this.filteredItems[index]\n const props = this.createProps(item, index)\n const row = this.$scopedSlots.items(props)\n\n rows.push(this.hasTag(row, 'td')\n ? this.genTR(row, {\n key: this.itemKey ? getObjectValueByPath(props.item, this.itemKey) : index,\n attrs: { active: this.isSelected(item) }\n })\n : row)\n\n if (this.$scopedSlots.expand) {\n const expandRow = this.genExpandedRow(props)\n rows.push(expandRow)\n }\n }\n\n return rows\n },\n genEmptyItems (content) {\n if (this.hasTag(content, 'tr')) {\n return content\n } else if (this.hasTag(content, 'td')) {\n return this.genTR(content)\n } else {\n return this.genTR([this.$createElement('td', {\n class: {\n 'text-xs-center': typeof content === 'string'\n },\n attrs: { colspan: this.headerColumns }\n }, content)])\n }\n }\n }\n}\n"],"sourceRoot":""}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
/* @vue/component */
|
||||
export default {
|
||||
methods: {
|
||||
genTFoot: function genTFoot() {
|
||||
if (!this.$slots.footer) {
|
||||
return null;
|
||||
}
|
||||
var footer = this.$slots.footer;
|
||||
var row = this.hasTag(footer, 'td') ? this.genTR(footer) : footer;
|
||||
return this.$createElement('tfoot', [row]);
|
||||
},
|
||||
genActionsFooter: function genActionsFooter() {
|
||||
if (this.hideActions) {
|
||||
return null;
|
||||
}
|
||||
return this.$createElement('div', {
|
||||
'class': this.classes
|
||||
}, this.genActions());
|
||||
}
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=foot.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/VDataTable/mixins/foot.js"],"names":[],"mappings":";AACA,eAAe;AACb,aAAS;AACP,gBADO,sBACC;AACN,gBAAI,CAAC,KAAK,MAAL,CAAY,MAAjB,EAAyB;AACvB,uBAAO,IAAP;AACD;AAED,gBAAM,SAAS,KAAK,MAAL,CAAY,MAA3B;AACA,gBAAM,MAAM,KAAK,MAAL,CAAY,MAAZ,EAAoB,IAApB,IAA4B,KAAK,KAAL,CAAW,MAAX,CAA5B,GAAiD,MAA7D;AAEA,mBAAO,KAAK,cAAL,CAAoB,OAApB,EAA6B,CAAC,GAAD,CAA7B,CAAP;AACD,SAVM;AAWP,wBAXO,8BAWS;AACd,gBAAI,KAAK,WAAT,EAAsB;AACpB,uBAAO,IAAP;AACD;AAED,mBAAO,KAAK,cAAL,CAAoB,KAApB,EAA2B;AAChC,yBAAS,KAAK;AADkB,aAA3B,EAEJ,KAAK,UAAL,EAFI,CAAP;AAGD;AAnBM;AADI,CAAf","sourcesContent":["/* @vue/component */\nexport default {\n methods: {\n genTFoot () {\n if (!this.$slots.footer) {\n return null\n }\n\n const footer = this.$slots.footer\n const row = this.hasTag(footer, 'td') ? this.genTR(footer) : footer\n\n return this.$createElement('tfoot', [row])\n },\n genActionsFooter () {\n if (this.hideActions) {\n return null\n }\n\n return this.$createElement('div', {\n 'class': this.classes\n }, this.genActions())\n }\n }\n}\n"],"sourceRoot":""}
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
import { consoleWarn } from '../../../util/console';
|
||||
import VCheckbox from '../../VCheckbox';
|
||||
import VIcon from '../../VIcon';
|
||||
/* @vue/component */
|
||||
export default {
|
||||
props: {
|
||||
sortIcon: {
|
||||
type: String,
|
||||
default: '$vuetify.icons.sort'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
genTHead: function genTHead() {
|
||||
var _this = this;
|
||||
|
||||
if (this.hideHeaders) return; // Exit Early since no headers are needed.
|
||||
var children = [];
|
||||
if (this.$scopedSlots.headers) {
|
||||
var row = this.$scopedSlots.headers({
|
||||
headers: this.headers,
|
||||
indeterminate: this.indeterminate,
|
||||
all: this.everyItem
|
||||
});
|
||||
children = [this.hasTag(row, 'th') ? this.genTR(row) : row, this.genTProgress()];
|
||||
} else {
|
||||
var _row = this.headers.map(function (o, i) {
|
||||
return _this.genHeader(o, _this.headerKey ? o[_this.headerKey] : i);
|
||||
});
|
||||
var checkbox = this.$createElement(VCheckbox, {
|
||||
props: {
|
||||
dark: this.dark,
|
||||
light: this.light,
|
||||
color: this.selectAll === true ? '' : this.selectAll,
|
||||
hideDetails: true,
|
||||
inputValue: this.everyItem,
|
||||
indeterminate: this.indeterminate
|
||||
},
|
||||
on: { change: this.toggle }
|
||||
});
|
||||
this.hasSelectAll && _row.unshift(this.$createElement('th', [checkbox]));
|
||||
children = [this.genTR(_row), this.genTProgress()];
|
||||
}
|
||||
return this.$createElement('thead', [children]);
|
||||
},
|
||||
genHeader: function genHeader(header, key) {
|
||||
var array = [this.$scopedSlots.headerCell ? this.$scopedSlots.headerCell({ header: header }) : header[this.headerText]];
|
||||
return this.$createElement.apply(this, ['th'].concat(_toConsumableArray(this.genHeaderData(header, array, key))));
|
||||
},
|
||||
genHeaderData: function genHeaderData(header, children, key) {
|
||||
var classes = ['column'];
|
||||
var data = {
|
||||
key: key,
|
||||
attrs: {
|
||||
role: 'columnheader',
|
||||
scope: 'col',
|
||||
width: header.width || null,
|
||||
'aria-label': header[this.headerText] || '',
|
||||
'aria-sort': 'none'
|
||||
}
|
||||
};
|
||||
if (header.sortable == null || header.sortable) {
|
||||
this.genHeaderSortingData(header, children, data, classes);
|
||||
} else {
|
||||
data.attrs['aria-label'] += ': Not sorted.'; // TODO: Localization
|
||||
}
|
||||
classes.push('text-xs-' + (header.align || 'left'));
|
||||
if (Array.isArray(header.class)) {
|
||||
classes.push.apply(classes, _toConsumableArray(header.class));
|
||||
} else if (header.class) {
|
||||
classes.push(header.class);
|
||||
}
|
||||
data.class = classes;
|
||||
return [data, children];
|
||||
},
|
||||
genHeaderSortingData: function genHeaderSortingData(header, children, data, classes) {
|
||||
var _this2 = this;
|
||||
|
||||
if (!('value' in header)) {
|
||||
consoleWarn('Headers must have a value property that corresponds to a value in the v-model array', this);
|
||||
}
|
||||
data.attrs.tabIndex = 0;
|
||||
data.on = {
|
||||
click: function click() {
|
||||
_this2.expanded = {};
|
||||
_this2.sort(header.value);
|
||||
},
|
||||
keydown: function keydown(e) {
|
||||
// check for space
|
||||
if (e.keyCode === 32) {
|
||||
e.preventDefault();
|
||||
_this2.sort(header.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
classes.push('sortable');
|
||||
var icon = this.$createElement(VIcon, {
|
||||
props: {
|
||||
small: true
|
||||
}
|
||||
}, this.sortIcon);
|
||||
if (!header.align || header.align === 'left') {
|
||||
children.push(icon);
|
||||
} else {
|
||||
children.unshift(icon);
|
||||
}
|
||||
var pagination = this.computedPagination;
|
||||
var beingSorted = pagination.sortBy === header.value;
|
||||
if (beingSorted) {
|
||||
classes.push('active');
|
||||
if (pagination.descending) {
|
||||
classes.push('desc');
|
||||
data.attrs['aria-sort'] = 'descending';
|
||||
data.attrs['aria-label'] += ': Sorted descending. Activate to remove sorting.'; // TODO: Localization
|
||||
} else {
|
||||
classes.push('asc');
|
||||
data.attrs['aria-sort'] = 'ascending';
|
||||
data.attrs['aria-label'] += ': Sorted ascending. Activate to sort descending.'; // TODO: Localization
|
||||
}
|
||||
} else {
|
||||
data.attrs['aria-label'] += ': Not sorted. Activate to sort ascending.'; // TODO: Localization
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=head.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+17
@@ -0,0 +1,17 @@
|
||||
/* @vue/component */
|
||||
export default {
|
||||
methods: {
|
||||
genTProgress: function genTProgress() {
|
||||
var col = this.$createElement('th', {
|
||||
staticClass: 'column',
|
||||
attrs: {
|
||||
colspan: this.headerColumns
|
||||
}
|
||||
}, [this.genProgress()]);
|
||||
return this.genTR([col], {
|
||||
staticClass: 'v-datatable__progress'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=progress.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/VDataTable/mixins/progress.js"],"names":[],"mappings":";AACA,eAAe;AACb,aAAS;AACP,oBADO,0BACK;AACV,gBAAM,MAAM,KAAK,cAAL,CAAoB,IAApB,EAA0B;AACpC,6BAAa,QADuB;AAEpC,uBAAO;AACL,6BAAS,KAAK;AADT;AAF6B,aAA1B,EAKT,CAAC,KAAK,WAAL,EAAD,CALS,CAAZ;AAOA,mBAAO,KAAK,KAAL,CAAW,CAAC,GAAD,CAAX,EAAkB;AACvB,6BAAa;AADU,aAAlB,CAAP;AAGD;AAZM;AADI,CAAf","sourcesContent":["/* @vue/component */\nexport default {\n methods: {\n genTProgress () {\n const col = this.$createElement('th', {\n staticClass: 'column',\n attrs: {\n colspan: this.headerColumns\n }\n }, [this.genProgress()])\n\n return this.genTR([col], {\n staticClass: 'v-datatable__progress'\n })\n }\n }\n}\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user