UNPKG

ivue-material-plus

Version:

A high quality UI components Library with Vue.js

437 lines (434 loc) 11.6 kB
import { reactive } from 'vue'; import { hasOwn } from '@vue/shared'; import { markNodeData, NODE_KEY } from '../utils.mjs'; import { throwError } from '../../../utils/error.mjs'; let nodeIdSeed = 0; const getPropsFromData = (node, prop) => { const props = node.store.props; const data = node.data || {}; const config = props[prop]; if (typeof config === "function") { return config(data, node); } else if (typeof config === "string") { return data[config]; } else if (typeof config === "undefined") { const dataProp = data[prop]; return dataProp === void 0 ? "" : dataProp; } }; const getChildState = (node) => { let all = true; let none = true; let allWithoutDisable = true; for (let i = 0; i < node.length; i++) { const nodeData = node[i]; if (nodeData.checked !== true || nodeData.indeterminate) { all = false; if (!nodeData.disabled) { allWithoutDisable = false; } } if (nodeData.checked !== false || nodeData.indeterminate) { none = false; } } return { all, none, allWithoutDisable, half: !all && !none }; }; const reInitChecked = (node) => { if (node.childNodes.length === 0 || node.loading) { return; } const { all, none, half } = getChildState(node.childNodes); if (all) { node.checked = true; node.indeterminate = false; } else if (half) { node.checked = false; node.indeterminate = true; } else if (none) { node.checked = false; node.indeterminate = false; } const parent = node.parent; if (!parent || parent.level === 0) { return; } if (!node.store.checkBoxStrictly) { reInitChecked(parent); } }; class Node { constructor(options) { this.data = null; this.id = nodeIdSeed++; this.visible = true; this.parent = null; this.expanded = false; this.isCurrent = false; this.canFocus = false; this.checked = false; this.indeterminate = false; for (const name in options) { if (hasOwn(options, name)) { this[name] = options[name]; } } this.childNodes = []; this.level = 0; this.loaded = false; this.loading = false; if (this.parent) { this.level = this.parent.level + 1; } } get key() { const nodeKey = this.store.key; if (this.data) { return this.data[nodeKey]; } return null; } get label() { return getPropsFromData(this, "label"); } get disabled() { return getPropsFromData(this, "disabled"); } get nextSibling() { const parent = this.parent; if (parent) { const index = parent.childNodes.indexOf(this); if (index) { return parent.childNodes[index + 1]; } } return null; } get prevSibling() { const parent = this.parent; if (parent) { const index = parent.childNodes.indexOf(this); if (index > -1) { return index > 0 ? parent.childNodes[index - 1] : null; } } return null; } initialize() { const store = this.store; if (!store) { throwError("ivue-tree", "[Node]store is required!"); } store.registerNode(this); const props = store.props; if (props && typeof props.isLeaf !== "undefined") { const isLeaf = getPropsFromData(this, "isLeaf"); if (typeof isLeaf === "boolean") { this.isLeafByUser = isLeaf; } } if (store.lazy !== true && this.data) { this.setData(this.data); if (store.defaultExpandAll) { this.expanded = true; this.canFocus = true; } } else if (this.level > 0 && store.lazy && store.defaultExpandAll) { this.expand(); } if (!Array.isArray(this.data)) { markNodeData(this, this.data); } if (!this.data) { return; } const defaultExpandedKeys = store.defaultExpandedKeys; const key = store.key; if (key && defaultExpandedKeys && defaultExpandedKeys.includes(this.key)) { this.expand(null, store.autoExpandParent); } if (key && store.currentNodeKey !== void 0 && this.key === store.currentNodeKey) { store.currentNode = this; store.currentNode.isCurrent = true; } if (store.lazy) { store.initDefaultCheckedNode(this); } this.updateLeafState(); if (this.parent && (this.level === 1 || this.parent.expanded === true)) { this.canFocus = true; } } setData(data) { if (!Array.isArray(data)) { markNodeData(this, data); } this.data = data; this.childNodes = []; let children; if (this.level === 0 && Array.isArray(this.data)) { children = this.data; } else { children = getPropsFromData(this, "children") || []; } for (let i = 0; i < children.length; i++) { this.insertChild({ data: children[i] }); } } insertChild(child, index, batch) { if (!child) { throwError("ivue-tree", "insertChild error: child is required"); } if (!(child instanceof Node)) { if (!batch) { const children = this.getChildren(true); if (!children.includes(child.data)) { if (typeof index === "undefined" || index < 0) { children.push(child.data); } else { children.splice(index, 0, child.data); } } } Object.assign(child, { parent: this, store: this.store }); child = reactive(new Node(child)); if (child instanceof Node) { child.initialize(); } } child.level = this.level + 1; if (typeof index === "undefined" || index < 0) { this.childNodes.push(child); } else { this.childNodes.splice(index, 0, child); } } getChildren(init = false) { if (this.level === 0) { return this.data; } const data = this.data; if (!data) { return null; } const props = this.store.props; let children = "children"; if (props) { children = props.children || "children"; } if (data[children] === void 0) { data[children] = null; } if (init && !data[children]) { data[children] = []; } return data[children]; } collapse() { this.expanded = false; this.childNodes.forEach((item) => { item.canFocus = false; }); } expand(callback, expandParent) { const done = () => { if (expandParent) { let parent = this.parent; while (parent.level > 0) { parent.expanded = true; parent = parent.parent; } } this.expanded = true; if (callback) { callback(); } this.childNodes.forEach((item) => { item.canFocus = true; }); }; if (this.shouldLoadData()) { this.loadData((data) => { if (Array.isArray(data)) { if (this.checked) { this.setChecked(true, true); } else if (!this.store.checkBoxStrictly) { reInitChecked(this); } done(); } }); } done(); } updateLeafState() { if (this.store.lazy === true && this.loaded !== true && typeof this.isLeafByUser !== "undefined") { this.isLeaf = this.isLeafByUser; return; } const childNodes = this.childNodes; if (!this.store.lazy || this.store.lazy === true && this.loaded === true) { this.isLeaf = !childNodes || childNodes.length === 0; return; } this.isLeaf = false; } setChecked(value, deep, recursion, passValue) { this.indeterminate = value === "half"; this.checked = value === true; if (this.store.checkBoxStrictly) { return; } if (!this.shouldLoadData()) { const { all, allWithoutDisable } = getChildState(this.childNodes); if (!this.isLeaf && !all && allWithoutDisable) { this.checked = false; value = false; } const handDeepChildNodes = () => { if (deep) { const childNodes = this.childNodes; for (let i = 0; i < childNodes.length; i++) { const child = childNodes[i]; passValue = passValue || value !== false; const isCheck = child.disabled ? child.checked : passValue; child.setChecked(isCheck, deep, true, passValue); } const { half, all: all2 } = getChildState(childNodes); if (!all2) { this.checked = all2; this.indeterminate = half; } } }; handDeepChildNodes(); } const parent = this.parent; if (!parent || parent.level === 0) return; if (!recursion) { reInitChecked(parent); } } shouldLoadData() { return this.store.lazy === true && this.store.load && !this.loaded; } createChildren(array, defaultProps = {}) { array.forEach((item) => { this.insertChild( Object.assign({ data: item }, defaultProps), void 0, true ); }); } loadData(callback, defaultProps = {}) { if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) { this.loading = true; const resolve = (children) => { this.childNodes = []; this.createChildren(children, defaultProps); this.loaded = true; this.loading = false; this.updateLeafState(); if (callback) { callback.call(this, children); } }; this.store.load(this, resolve); } else { if (callback) { callback.call(this); } } } removeChild(child) { const children = this.getChildren() || []; const dataIndex = children.indexOf(child.data); if (dataIndex > -1) { children.splice(dataIndex, 1); } const index = this.childNodes.indexOf(child); if (index > -1) { this.store && this.store.deregisterNode(child); child.parent = null; this.childNodes.splice(index, 1); } this.updateLeafState(); } updateChildren() { const newData = this.getChildren() || []; const oldData = this.childNodes.map((node) => node.data); const newDataMap = {}; const newNodes = []; newData.forEach((item, index) => { const key = item[NODE_KEY]; const isNodeExists = !!key && oldData.findIndex((data) => data[NODE_KEY] === key) >= 0; if (isNodeExists) { newDataMap[key] = { index, data: item }; } else { newNodes.push({ index, data: item }); } }); if (!this.store.lazy) { oldData.forEach((item) => { if (!newDataMap[item[NODE_KEY]]) { this.removeChildByData(item); } }); } newNodes.forEach(({ index, data }) => { this.insertChild({ data }, index); }); this.updateLeafState(); } contains(target, deep = true) { return (this.childNodes || []).some( (child) => child === target || deep && child.contains(target) ); } remove() { const parent = this.parent; if (parent) { parent.removeChild(this); } } insertBefore(child, ref) { let index; if (ref) { index = this.childNodes.indexOf(ref); } this.insertChild(child, index); } insertAfter(child, ref) { let index; if (ref) { index = this.childNodes.indexOf(ref); if (index !== -1) { index += 1; } } this.insertChild(child, index); } removeChildByData(data) { let targetNode = null; this.childNodes.forEach((item) => { if (item.data === data) { targetNode = item; } }); if (targetNode) { this.removeChild(targetNode); } } } export { Node as default }; //# sourceMappingURL=node.mjs.map