vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+390
@@ -0,0 +1,390 @@
|
||||
var _slicedToArray = function () { function sliceIterator(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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
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); } }
|
||||
|
||||
// Styles
|
||||
import '../../../src/stylus/components/_treeview.styl';
|
||||
// Components
|
||||
import VTreeviewNode, { VTreeviewNodeProps } from './VTreeviewNode';
|
||||
// Mixins
|
||||
import Themeable from '../../mixins/themeable';
|
||||
import { provide as RegistrableProvide } from '../../mixins/registrable';
|
||||
// Utils
|
||||
import { arrayDiff, deepEqual, getObjectValueByPath } from '../../util/helpers';
|
||||
import mixins from '../../util/mixins';
|
||||
import { consoleWarn } from '../../util/console';
|
||||
import { filterTreeItems, filterTreeItem } from './util/filterTreeItems';
|
||||
export default mixins(RegistrableProvide('treeview'), Themeable
|
||||
/* @vue/component */
|
||||
).extend({
|
||||
name: 'v-treeview',
|
||||
provide: function provide() {
|
||||
return { treeview: this };
|
||||
},
|
||||
|
||||
props: _extends({
|
||||
active: {
|
||||
type: Array,
|
||||
default: function _default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: function _default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
hoverable: Boolean,
|
||||
multipleActive: Boolean,
|
||||
open: {
|
||||
type: Array,
|
||||
default: function _default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
openAll: Boolean,
|
||||
returnObject: {
|
||||
type: Boolean,
|
||||
default: false // TODO: Should be true in next major
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: function _default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
search: String,
|
||||
filter: Function
|
||||
}, VTreeviewNodeProps),
|
||||
data: function data() {
|
||||
return {
|
||||
nodes: {},
|
||||
selectedCache: new Set(),
|
||||
activeCache: new Set(),
|
||||
openCache: new Set()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
excludedItems: function excludedItems() {
|
||||
var excluded = new Set();
|
||||
if (!this.search) return excluded;
|
||||
for (var i = 0; i < this.items.length; i++) {
|
||||
filterTreeItems(this.filter || filterTreeItem, this.items[i], this.search, this.itemKey, this.itemText, this.itemChildren, excluded);
|
||||
}
|
||||
return excluded;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
items: {
|
||||
handler: function handler() {
|
||||
var _this = this;
|
||||
|
||||
var oldKeys = Object.keys(this.nodes).map(function (k) {
|
||||
return getObjectValueByPath(_this.nodes[k].item, _this.itemKey);
|
||||
});
|
||||
var newKeys = this.getKeys(this.items);
|
||||
var diff = arrayDiff(newKeys, oldKeys);
|
||||
// We only want to do stuff if items have changed
|
||||
if (!diff.length && newKeys.length < oldKeys.length) return;
|
||||
// If nodes are removed we need to clear them from this.nodes
|
||||
diff.forEach(function (k) {
|
||||
return delete _this.nodes[k];
|
||||
});
|
||||
var oldSelectedCache = [].concat(_toConsumableArray(this.selectedCache));
|
||||
this.selectedCache = new Set();
|
||||
this.activeCache = new Set();
|
||||
this.openCache = new Set();
|
||||
this.buildTree(this.items);
|
||||
// Only emit selected if selection has changed
|
||||
// as a result of items changing. This fixes a
|
||||
// potential double emit when selecting a node
|
||||
// with dynamic children
|
||||
if (!deepEqual(oldSelectedCache, [].concat(_toConsumableArray(this.selectedCache)))) this.emitSelected();
|
||||
},
|
||||
|
||||
deep: true
|
||||
},
|
||||
active: function active(value) {
|
||||
this.handleNodeCacheWatcher(value, this.activeCache, this.updateActive, this.emitActive);
|
||||
},
|
||||
value: function value(_value) {
|
||||
this.handleNodeCacheWatcher(_value, this.selectedCache, this.updateSelected, this.emitSelected);
|
||||
},
|
||||
open: function open(value) {
|
||||
this.handleNodeCacheWatcher(value, this.openCache, this.updateOpen, this.emitOpen);
|
||||
}
|
||||
},
|
||||
created: function created() {
|
||||
var _this2 = this;
|
||||
|
||||
this.buildTree(this.items);
|
||||
this.value.forEach(function (key) {
|
||||
return _this2.updateSelected(key, true);
|
||||
});
|
||||
this.emitSelected();
|
||||
this.active.forEach(function (key) {
|
||||
return _this2.updateActive(key, true);
|
||||
});
|
||||
this.emitActive();
|
||||
},
|
||||
mounted: function mounted() {
|
||||
var _this3 = this;
|
||||
|
||||
// Save the developer from themselves
|
||||
if (this.$slots.prepend || this.$slots.append) {
|
||||
consoleWarn('The prepend and append slots require a slot-scope attribute', this);
|
||||
}
|
||||
if (this.openAll) {
|
||||
this.updateAll(true);
|
||||
} else {
|
||||
this.open.forEach(function (key) {
|
||||
return _this3.updateOpen(key, true);
|
||||
});
|
||||
this.emitOpen();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/** @public */
|
||||
updateAll: function updateAll(value) {
|
||||
var _this4 = this;
|
||||
|
||||
Object.keys(this.nodes).forEach(function (key) {
|
||||
return _this4.updateOpen(getObjectValueByPath(_this4.nodes[key].item, _this4.itemKey), value);
|
||||
});
|
||||
this.emitOpen();
|
||||
},
|
||||
getKeys: function getKeys(items) {
|
||||
var keys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var key = getObjectValueByPath(items[i], this.itemKey);
|
||||
keys.push(key);
|
||||
var children = getObjectValueByPath(items[i], this.itemChildren);
|
||||
if (children) {
|
||||
keys.push.apply(keys, _toConsumableArray(this.getKeys(children)));
|
||||
}
|
||||
}
|
||||
return keys;
|
||||
},
|
||||
buildTree: function buildTree(items) {
|
||||
var _this5 = this;
|
||||
|
||||
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i];
|
||||
var key = getObjectValueByPath(item, this.itemKey);
|
||||
var children = getObjectValueByPath(item, this.itemChildren, []);
|
||||
var oldNode = this.nodes.hasOwnProperty(key) ? this.nodes[key] : {
|
||||
isSelected: false, isIndeterminate: false, isActive: false, isOpen: false, vnode: null
|
||||
};
|
||||
var node = {
|
||||
vnode: oldNode.vnode,
|
||||
parent: parent,
|
||||
children: children.map(function (c) {
|
||||
return getObjectValueByPath(c, _this5.itemKey);
|
||||
}),
|
||||
item: item
|
||||
};
|
||||
this.buildTree(children, key);
|
||||
// This fixed bug with dynamic children resetting selected parent state
|
||||
if (!this.nodes.hasOwnProperty(key) && parent !== null && this.nodes.hasOwnProperty(parent)) {
|
||||
node.isSelected = this.nodes[parent].isSelected;
|
||||
node.isIndeterminate = this.nodes[parent].isIndeterminate;
|
||||
} else {
|
||||
node.isSelected = oldNode.isSelected;
|
||||
node.isIndeterminate = oldNode.isIndeterminate;
|
||||
}
|
||||
node.isActive = oldNode.isActive;
|
||||
node.isOpen = oldNode.isOpen;
|
||||
this.nodes[key] = !children.length ? node : this.calculateState(node, this.nodes);
|
||||
// Don't forget to rebuild cache
|
||||
if (this.nodes[key].isSelected) this.selectedCache.add(key);
|
||||
if (this.nodes[key].isActive) this.activeCache.add(key);
|
||||
if (this.nodes[key].isOpen) this.openCache.add(key);
|
||||
this.updateVnodeState(key);
|
||||
}
|
||||
},
|
||||
calculateState: function calculateState(node, state) {
|
||||
var counts = node.children.reduce(function (counts, child) {
|
||||
counts[0] += +Boolean(state[child].isSelected);
|
||||
counts[1] += +Boolean(state[child].isIndeterminate);
|
||||
return counts;
|
||||
}, [0, 0]);
|
||||
node.isSelected = !!node.children.length && counts[0] === node.children.length;
|
||||
node.isIndeterminate = !node.isSelected && (counts[0] > 0 || counts[1] > 0);
|
||||
return node;
|
||||
},
|
||||
emitOpen: function emitOpen() {
|
||||
this.emitNodeCache('update:open', this.openCache);
|
||||
},
|
||||
emitSelected: function emitSelected() {
|
||||
this.emitNodeCache('input', this.selectedCache);
|
||||
},
|
||||
emitActive: function emitActive() {
|
||||
this.emitNodeCache('update:active', this.activeCache);
|
||||
},
|
||||
emitNodeCache: function emitNodeCache(event, cache) {
|
||||
var _this6 = this;
|
||||
|
||||
this.$emit(event, this.returnObject ? [].concat(_toConsumableArray(cache)).map(function (key) {
|
||||
return _this6.nodes[key].item;
|
||||
}) : [].concat(_toConsumableArray(cache)));
|
||||
},
|
||||
handleNodeCacheWatcher: function handleNodeCacheWatcher(value, cache, updateFn, emitFn) {
|
||||
var _this7 = this;
|
||||
|
||||
value = this.returnObject ? value.map(function (v) {
|
||||
return getObjectValueByPath(v, _this7.itemKey);
|
||||
}) : value;
|
||||
var old = [].concat(_toConsumableArray(cache));
|
||||
if (deepEqual(old, value)) return;
|
||||
old.forEach(function (key) {
|
||||
return updateFn(key, false);
|
||||
});
|
||||
value.forEach(function (key) {
|
||||
return updateFn(key, true);
|
||||
});
|
||||
emitFn();
|
||||
},
|
||||
getDescendants: function getDescendants(key) {
|
||||
var _descendants;
|
||||
|
||||
var descendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
||||
|
||||
var children = this.nodes[key].children;
|
||||
(_descendants = descendants).push.apply(_descendants, _toConsumableArray(children));
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
descendants = this.getDescendants(children[i], descendants);
|
||||
}
|
||||
return descendants;
|
||||
},
|
||||
getParents: function getParents(key) {
|
||||
var parent = this.nodes[key].parent;
|
||||
var parents = [];
|
||||
while (parent !== null) {
|
||||
parents.push(parent);
|
||||
parent = this.nodes[parent].parent;
|
||||
}
|
||||
return parents;
|
||||
},
|
||||
register: function register(node) {
|
||||
var key = getObjectValueByPath(node.item, this.itemKey);
|
||||
this.nodes[key].vnode = node;
|
||||
this.updateVnodeState(key);
|
||||
},
|
||||
unregister: function unregister(node) {
|
||||
var key = getObjectValueByPath(node.item, this.itemKey);
|
||||
if (this.nodes[key]) this.nodes[key].vnode = null;
|
||||
},
|
||||
updateActive: function updateActive(key, isActive) {
|
||||
var _this8 = this;
|
||||
|
||||
if (!this.nodes.hasOwnProperty(key)) return;
|
||||
if (!this.multipleActive) {
|
||||
this.activeCache.forEach(function (active) {
|
||||
_this8.nodes[active].isActive = false;
|
||||
_this8.updateVnodeState(active);
|
||||
_this8.activeCache.delete(active);
|
||||
});
|
||||
}
|
||||
var node = this.nodes[key];
|
||||
if (!node) return;
|
||||
if (isActive) this.activeCache.add(key);else this.activeCache.delete(key);
|
||||
node.isActive = isActive;
|
||||
this.updateVnodeState(key);
|
||||
},
|
||||
updateSelected: function updateSelected(key, isSelected) {
|
||||
var _this9 = this;
|
||||
|
||||
if (!this.nodes.hasOwnProperty(key)) return;
|
||||
var changed = new Map();
|
||||
var descendants = [key].concat(_toConsumableArray(this.getDescendants(key)));
|
||||
descendants.forEach(function (descendant) {
|
||||
_this9.nodes[descendant].isSelected = isSelected;
|
||||
_this9.nodes[descendant].isIndeterminate = false;
|
||||
changed.set(descendant, isSelected);
|
||||
});
|
||||
var parents = this.getParents(key);
|
||||
parents.forEach(function (parent) {
|
||||
_this9.nodes[parent] = _this9.calculateState(_this9.nodes[parent], _this9.nodes);
|
||||
changed.set(parent, _this9.nodes[parent].isSelected);
|
||||
});
|
||||
var all = [key].concat(_toConsumableArray(descendants), _toConsumableArray(parents));
|
||||
all.forEach(this.updateVnodeState);
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = changed.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var _ref = _step.value;
|
||||
|
||||
var _ref2 = _slicedToArray(_ref, 2);
|
||||
|
||||
var _key = _ref2[0];
|
||||
var value = _ref2[1];
|
||||
|
||||
value === true ? this.selectedCache.add(_key) : this.selectedCache.delete(_key);
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator.return) {
|
||||
_iterator.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
updateOpen: function updateOpen(key, isOpen) {
|
||||
var _this10 = this;
|
||||
|
||||
if (!this.nodes.hasOwnProperty(key)) return;
|
||||
var node = this.nodes[key];
|
||||
var children = getObjectValueByPath(node.item, this.itemChildren);
|
||||
if (children && !children.length && node.vnode && !node.vnode.hasLoaded) {
|
||||
node.vnode.checkChildren().then(function () {
|
||||
return _this10.updateOpen(key, isOpen);
|
||||
});
|
||||
} else if (children && children.length) {
|
||||
node.isOpen = isOpen;
|
||||
node.isOpen ? this.openCache.add(key) : this.openCache.delete(key);
|
||||
this.updateVnodeState(key);
|
||||
}
|
||||
},
|
||||
updateVnodeState: function updateVnodeState(key) {
|
||||
var node = this.nodes[key];
|
||||
if (node && node.vnode) {
|
||||
node.vnode.isSelected = node.isSelected;
|
||||
node.vnode.isIndeterminate = node.isIndeterminate;
|
||||
node.vnode.isActive = node.isActive;
|
||||
node.vnode.isOpen = node.isOpen;
|
||||
}
|
||||
},
|
||||
isExcluded: function isExcluded(key) {
|
||||
return !!this.search && this.excludedItems.has(key);
|
||||
}
|
||||
},
|
||||
render: function render(h) {
|
||||
var children = this.items.length ? this.items.map(VTreeviewNode.options.methods.genChild.bind(this))
|
||||
/* istanbul ignore next */
|
||||
: this.$slots.default; // TODO: remove type annotation with TS 3.2
|
||||
return h('div', {
|
||||
staticClass: 'v-treeview',
|
||||
class: _extends({
|
||||
'v-treeview--hoverable': this.hoverable
|
||||
}, this.themeClasses)
|
||||
}, children);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTreeview.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+273
@@ -0,0 +1,273 @@
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = 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; }
|
||||
|
||||
// Components
|
||||
import { VExpandTransition } from '../transitions';
|
||||
import { VIcon } from '../VIcon';
|
||||
import VTreeviewNode from './VTreeviewNode';
|
||||
// Mixins
|
||||
import { inject as RegistrableInject } from '../../mixins/registrable';
|
||||
// Utils
|
||||
import mixins from '../../util/mixins';
|
||||
import { getObjectValueByPath } from '../../util/helpers';
|
||||
export var VTreeviewNodeProps = {
|
||||
activatable: Boolean,
|
||||
activeClass: {
|
||||
type: String,
|
||||
default: 'v-treeview-node--active'
|
||||
},
|
||||
selectable: Boolean,
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: 'accent'
|
||||
},
|
||||
indeterminateIcon: {
|
||||
type: String,
|
||||
default: '$vuetify.icons.checkboxIndeterminate'
|
||||
},
|
||||
onIcon: {
|
||||
type: String,
|
||||
default: '$vuetify.icons.checkboxOn'
|
||||
},
|
||||
offIcon: {
|
||||
type: String,
|
||||
default: '$vuetify.icons.checkboxOff'
|
||||
},
|
||||
expandIcon: {
|
||||
type: String,
|
||||
default: '$vuetify.icons.subgroup'
|
||||
},
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: '$vuetify.icons.loading'
|
||||
},
|
||||
itemKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
itemText: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
itemChildren: {
|
||||
type: String,
|
||||
default: 'children'
|
||||
},
|
||||
loadChildren: Function,
|
||||
openOnClick: Boolean,
|
||||
transition: Boolean
|
||||
};
|
||||
export default mixins(RegistrableInject('treeview')
|
||||
/* @vue/component */
|
||||
).extend({
|
||||
name: 'v-treeview-node',
|
||||
inject: {
|
||||
treeview: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props: _extends({
|
||||
item: {
|
||||
type: Object,
|
||||
default: function _default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}, VTreeviewNodeProps),
|
||||
data: function data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
isSelected: false,
|
||||
isIndeterminate: false,
|
||||
isActive: false,
|
||||
isLoading: false,
|
||||
hasLoaded: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
key: function key() {
|
||||
return getObjectValueByPath(this.item, this.itemKey);
|
||||
},
|
||||
children: function children() {
|
||||
return getObjectValueByPath(this.item, this.itemChildren);
|
||||
},
|
||||
text: function text() {
|
||||
return getObjectValueByPath(this.item, this.itemText);
|
||||
},
|
||||
scopedProps: function scopedProps() {
|
||||
return {
|
||||
item: this.item,
|
||||
leaf: !this.children,
|
||||
selected: this.isSelected,
|
||||
indeterminate: this.isIndeterminate,
|
||||
active: this.isActive,
|
||||
open: this.isOpen
|
||||
};
|
||||
},
|
||||
computedIcon: function computedIcon() {
|
||||
if (this.isIndeterminate) return this.indeterminateIcon;else if (this.isSelected) return this.onIcon;else return this.offIcon;
|
||||
},
|
||||
hasChildren: function hasChildren() {
|
||||
return !!this.children && (!!this.children.length || !!this.loadChildren);
|
||||
}
|
||||
},
|
||||
created: function created() {
|
||||
this.treeview.register(this);
|
||||
},
|
||||
beforeDestroy: function beforeDestroy() {
|
||||
this.treeview.unregister(this);
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkChildren: function checkChildren() {
|
||||
var _this = this;
|
||||
|
||||
return new Promise(function (resolve) {
|
||||
// TODO: Potential issue with always trying
|
||||
// to load children if response is empty?
|
||||
if (!_this.children || _this.children.length || !_this.loadChildren || _this.hasLoaded) return resolve();
|
||||
_this.isLoading = true;
|
||||
resolve(_this.loadChildren(_this.item));
|
||||
}).then(function () {
|
||||
_this.isLoading = false;
|
||||
_this.hasLoaded = true;
|
||||
});
|
||||
},
|
||||
open: function open() {
|
||||
this.isOpen = !this.isOpen;
|
||||
this.treeview.updateOpen(this.key, this.isOpen);
|
||||
this.treeview.emitOpen();
|
||||
},
|
||||
genLabel: function genLabel() {
|
||||
var children = [];
|
||||
if (this.$scopedSlots.label) children.push(this.$scopedSlots.label(this.scopedProps));else children.push(this.text);
|
||||
return this.$createElement('div', {
|
||||
slot: 'label',
|
||||
staticClass: 'v-treeview-node__label'
|
||||
}, children);
|
||||
},
|
||||
genContent: function genContent() {
|
||||
var children = [this.$scopedSlots.prepend && this.$scopedSlots.prepend(this.scopedProps), this.genLabel(), this.$scopedSlots.append && this.$scopedSlots.append(this.scopedProps)];
|
||||
return this.$createElement('div', {
|
||||
staticClass: 'v-treeview-node__content'
|
||||
}, children);
|
||||
},
|
||||
genToggle: function genToggle() {
|
||||
var _this2 = this;
|
||||
|
||||
return this.$createElement(VIcon, {
|
||||
staticClass: 'v-treeview-node__toggle',
|
||||
class: {
|
||||
'v-treeview-node__toggle--open': this.isOpen,
|
||||
'v-treeview-node__toggle--loading': this.isLoading
|
||||
},
|
||||
slot: 'prepend',
|
||||
on: {
|
||||
click: function click(e) {
|
||||
e.stopPropagation();
|
||||
if (_this2.isLoading) return;
|
||||
_this2.checkChildren().then(function () {
|
||||
return _this2.open();
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [this.isLoading ? this.loadingIcon : this.expandIcon]);
|
||||
},
|
||||
genCheckbox: function genCheckbox() {
|
||||
var _this3 = this;
|
||||
|
||||
return this.$createElement(VIcon, {
|
||||
staticClass: 'v-treeview-node__checkbox',
|
||||
props: {
|
||||
color: this.isSelected ? this.selectedColor : undefined
|
||||
},
|
||||
on: {
|
||||
click: function click(e) {
|
||||
e.stopPropagation();
|
||||
if (_this3.isLoading) return;
|
||||
_this3.checkChildren().then(function () {
|
||||
// We nextTick here so that items watch in VTreeview has a chance to run first
|
||||
_this3.$nextTick(function () {
|
||||
_this3.isSelected = !_this3.isSelected;
|
||||
_this3.isIndeterminate = false;
|
||||
_this3.treeview.updateSelected(_this3.key, _this3.isSelected);
|
||||
_this3.treeview.emitSelected();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [this.computedIcon]);
|
||||
},
|
||||
genNode: function genNode() {
|
||||
var _this4 = this;
|
||||
|
||||
var children = [this.genContent()];
|
||||
if (this.selectable) children.unshift(this.genCheckbox());
|
||||
if (this.hasChildren) children.unshift(this.genToggle());
|
||||
return this.$createElement('div', {
|
||||
staticClass: 'v-treeview-node__root',
|
||||
class: _defineProperty({}, this.activeClass, this.isActive),
|
||||
on: {
|
||||
click: function click() {
|
||||
if (_this4.openOnClick && _this4.children) {
|
||||
_this4.open();
|
||||
} else if (_this4.activatable) {
|
||||
_this4.isActive = !_this4.isActive;
|
||||
_this4.treeview.updateActive(_this4.key, _this4.isActive);
|
||||
_this4.treeview.emitActive();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, children);
|
||||
},
|
||||
genChild: function genChild(item) {
|
||||
return this.$createElement(VTreeviewNode, {
|
||||
key: getObjectValueByPath(item, this.itemKey),
|
||||
props: {
|
||||
activatable: this.activatable,
|
||||
activeClass: this.activeClass,
|
||||
item: item,
|
||||
selectable: this.selectable,
|
||||
selectedColor: this.selectedColor,
|
||||
expandIcon: this.expandIcon,
|
||||
indeterminateIcon: this.indeterminateIcon,
|
||||
offIcon: this.offIcon,
|
||||
onIcon: this.onIcon,
|
||||
loadingIcon: this.loadingIcon,
|
||||
itemKey: this.itemKey,
|
||||
itemText: this.itemText,
|
||||
itemChildren: this.itemChildren,
|
||||
loadChildren: this.loadChildren,
|
||||
transition: this.transition,
|
||||
openOnClick: this.openOnClick
|
||||
},
|
||||
scopedSlots: this.$scopedSlots
|
||||
});
|
||||
},
|
||||
genChildrenWrapper: function genChildrenWrapper() {
|
||||
if (!this.isOpen || !this.children) return null;
|
||||
var children = [this.children.map(this.genChild)];
|
||||
return this.$createElement('div', {
|
||||
staticClass: 'v-treeview-node__children'
|
||||
}, children);
|
||||
},
|
||||
genTransition: function genTransition() {
|
||||
return this.$createElement(VExpandTransition, [this.genChildrenWrapper()]);
|
||||
}
|
||||
},
|
||||
render: function render(h) {
|
||||
var children = [this.genNode()];
|
||||
if (this.transition) children.push(this.genTransition());else children.push(this.genChildrenWrapper());
|
||||
return h('div', {
|
||||
staticClass: 'v-treeview-node',
|
||||
class: {
|
||||
'v-treeview-node--leaf': !this.hasChildren,
|
||||
'v-treeview-node--click': this.openOnClick,
|
||||
'v-treeview-node--selected': this.isSelected,
|
||||
'v-treeview-node--excluded': this.treeview.isExcluded(this.key)
|
||||
}
|
||||
}, children);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTreeviewNode.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+10
@@ -0,0 +1,10 @@
|
||||
import VTreeview from './VTreeview';
|
||||
import VTreeviewNode from './VTreeviewNode';
|
||||
export { VTreeview, VTreeviewNode };
|
||||
export default {
|
||||
$_vuetify_subcomponents: {
|
||||
VTreeview: VTreeview,
|
||||
VTreeviewNode: VTreeviewNode
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VTreeview/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAP,MAAsB,aAAtB;AACA,OAAO,aAAP,MAA0B,iBAA1B;AAEA,SAAS,SAAT,EAAoB,aAApB;AAEA,eAAe;AACb,6BAAyB;AACvB,4BADuB;AAEvB;AAFuB;AADZ,CAAf","sourcesContent":["import VTreeview from './VTreeview'\nimport VTreeviewNode from './VTreeviewNode'\n\nexport { VTreeview, VTreeviewNode }\n\nexport default {\n $_vuetify_subcomponents: {\n VTreeview,\n VTreeviewNode\n }\n}\n"],"sourceRoot":""}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import { getObjectValueByPath } from '../../../util/helpers';
|
||||
export function filterTreeItem(item, search, textKey) {
|
||||
var text = getObjectValueByPath(item, textKey);
|
||||
return text.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1;
|
||||
}
|
||||
export function filterTreeItems(filter, item, search, idKey, textKey, childrenKey, excluded) {
|
||||
if (filter(item, search, textKey)) {
|
||||
return true;
|
||||
}
|
||||
var children = getObjectValueByPath(item, childrenKey);
|
||||
if (children) {
|
||||
var match = false;
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
if (filterTreeItems(filter, children[i], search, idKey, textKey, childrenKey, excluded)) {
|
||||
match = true;
|
||||
}
|
||||
}
|
||||
if (match) return true;
|
||||
}
|
||||
excluded.add(getObjectValueByPath(item, idKey));
|
||||
return false;
|
||||
}
|
||||
//# sourceMappingURL=filterTreeItems.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/VTreeview/util/filterTreeItems.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,uBAArC;AAIA,OAAM,SAAU,cAAV,CAA0B,IAA1B,EAAwC,MAAxC,EAAwD,OAAxD,EAAuE;AAC3E,QAAM,OAAO,qBAAqB,IAArB,EAA2B,OAA3B,CAAb;AAEA,WAAO,KAAK,iBAAL,GAAyB,OAAzB,CAAiC,OAAO,iBAAP,EAAjC,IAA+D,CAAC,CAAvE;AACD;AAED,OAAM,SAAU,eAAV,CACJ,MADI,EAEJ,IAFI,EAGJ,MAHI,EAIJ,KAJI,EAKJ,OALI,EAMJ,WANI,EAOJ,QAPI,EAO0B;AAE9B,QAAI,OAAO,IAAP,EAAa,MAAb,EAAqB,OAArB,CAAJ,EAAmC;AACjC,eAAO,IAAP;AACD;AAED,QAAM,WAAW,qBAAqB,IAArB,EAA2B,WAA3B,CAAjB;AAEA,QAAI,QAAJ,EAAc;AACZ,YAAI,QAAQ,KAAZ;AACA,aAAK,IAAI,IAAI,CAAb,EAAgB,IAAI,SAAS,MAA7B,EAAqC,GAArC,EAA0C;AACxC,gBAAI,gBAAgB,MAAhB,EAAwB,SAAS,CAAT,CAAxB,EAAqC,MAArC,EAA6C,KAA7C,EAAoD,OAApD,EAA6D,WAA7D,EAA0E,QAA1E,CAAJ,EAAyF;AACvF,wBAAQ,IAAR;AACD;AACF;AAED,YAAI,KAAJ,EAAW,OAAO,IAAP;AACZ;AAED,aAAS,GAAT,CAAa,qBAAqB,IAArB,EAA2B,KAA3B,CAAb;AAEA,WAAO,KAAP;AACD","sourcesContent":["import { getObjectValueByPath } from '../../../util/helpers'\n\nexport type FilterTreeItemFunction = (item: object, search: string, textKey: string) => boolean\n\nexport function filterTreeItem (item: object, search: string, textKey: string): boolean {\n const text = getObjectValueByPath(item, textKey)\n\n return text.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1\n}\n\nexport function filterTreeItems (\n filter: FilterTreeItemFunction,\n item: any,\n search: string,\n idKey: string,\n textKey: string,\n childrenKey: string,\n excluded: Set<string | number>\n): boolean {\n if (filter(item, search, textKey)) {\n return true\n }\n\n const children = getObjectValueByPath(item, childrenKey)\n\n if (children) {\n let match = false\n for (let i = 0; i < children.length; i++) {\n if (filterTreeItems(filter, children[i], search, idKey, textKey, childrenKey, excluded)) {\n match = true\n }\n }\n\n if (match) return true\n }\n\n excluded.add(getObjectValueByPath(item, idKey))\n\n return false\n}\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user