This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,7 @@
import Tree from './src/tree.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElTree: SFCWithInstall<typeof Tree>;
export default ElTree;
export * from './src/tree.type';
export * from './src/instance';
export * from './src/tokens';

16
node_modules/element-plus/lib/components/tree/index.js generated vendored Normal file
View File

@@ -0,0 +1,16 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tree = require('./src/tree.js');
var tokens = require('./src/tokens.js');
var install = require('../../utils/vue/install.js');
const ElTree = install.withInstall(tree["default"]);
exports.NODE_INSTANCE_INJECTION_KEY = tokens.NODE_INSTANCE_INJECTION_KEY;
exports.ROOT_TREE_INJECTION_KEY = tokens.ROOT_TREE_INJECTION_KEY;
exports.TREE_NODE_MAP_INJECTION_KEY = tokens.TREE_NODE_MAP_INJECTION_KEY;
exports.ElTree = ElTree;
exports["default"] = ElTree;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":["../../../../../packages/components/tree/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Tree from './src/tree.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElTree: SFCWithInstall<typeof Tree> = withInstall(Tree)\n\nexport default ElTree\n\nexport * from './src/tree.type'\nexport * from './src/instance'\nexport * from './src/tokens'\n"],"names":["withInstall","Tree"],"mappings":";;;;;;;;AAEY,MAAC,MAAM,GAAGA,mBAAW,CAACC,eAAI;;;;;;;;"}

View File

@@ -0,0 +1,2 @@
import type Tree from './tree.vue';
export type TreeInstance = InstanceType<typeof Tree> & unknown;

View File

@@ -0,0 +1,3 @@
'use strict';
//# sourceMappingURL=instance.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"instance.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

View File

@@ -0,0 +1,50 @@
import type TreeStore from './tree-store';
import type { Nullable } from 'element-plus/es/utils';
import type { FakeNode, TreeKey, TreeNodeChildState, TreeNodeData, TreeNodeLoadedDefaultProps, TreeNodeOptions } from '../tree.type';
export declare const getChildState: (node: Node[]) => TreeNodeChildState;
declare class Node {
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: TreeNodeData;
expanded: boolean;
parent: Node | null;
visible: boolean;
isCurrent: boolean;
store: TreeStore;
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: Node[];
loading: boolean;
constructor(options: TreeNodeOptions);
initialize(): void;
setData(data: TreeNodeData): void;
get label(): string;
get key(): TreeKey | null | undefined;
get disabled(): boolean;
get nextSibling(): Nullable<Node>;
get previousSibling(): Nullable<Node>;
contains(target: Node, deep?: boolean): boolean;
remove(): void;
insertChild(child?: FakeNode | Node, index?: number, batch?: boolean): void;
insertBefore(child: FakeNode | Node, ref: Node): void;
insertAfter(child: FakeNode | Node, ref: Node): void;
removeChild(child: Node): void;
removeChildByData(data: TreeNodeData | null): void;
expand(callback?: (() => void) | null, expandParent?: boolean): void;
doCreateChildren(array: TreeNodeData[], defaultProps?: TreeNodeLoadedDefaultProps): void;
collapse(): void;
shouldLoadData(): boolean;
updateLeafState(): void;
setChecked(value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean): void;
getChildren(forceInit?: boolean): TreeNodeData | TreeNodeData[] | null;
updateChildren(): void;
loadData(callback: (data?: TreeNodeData[]) => void, defaultProps?: TreeNodeLoadedDefaultProps): void;
eachNode(callback: (node: Node) => void): void;
reInitChecked(): void;
}
export default Node;

View File

@@ -0,0 +1,454 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var util = require('./util.js');
var shared = require('@vue/shared');
var types = require('../../../../utils/types.js');
const getChildState = (node) => {
let all = true;
let none = true;
let allWithoutDisable = true;
for (let i = 0, j = node.length; i < j; i++) {
const n = node[i];
if (n.checked !== true || n.indeterminate) {
all = false;
if (!n.disabled) {
allWithoutDisable = false;
}
}
if (n.checked !== false || n.indeterminate) {
none = false;
}
}
return { all, none, allWithoutDisable, half: !all && !none };
};
const reInitChecked = function(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.checkStrictly) {
reInitChecked(parent);
}
};
const getPropertyFromData = function(node, prop) {
const props = node.store.props;
const data = node.data || {};
const config = props[prop];
if (shared.isFunction(config)) {
return config(data, node);
} else if (shared.isString(config)) {
return data[config];
} else if (types.isUndefined(config)) {
const dataProp = data[prop];
return types.isUndefined(dataProp) ? "" : dataProp;
}
};
const setCanFocus = function(childNodes, focus) {
childNodes.forEach((item) => {
item.canFocus = focus;
setCanFocus(item.childNodes, focus);
});
};
let nodeIdSeed = 0;
class Node {
constructor(options) {
this.isLeafByUser = void 0;
this.isLeaf = void 0;
this.id = nodeIdSeed++;
this.text = null;
this.checked = false;
this.indeterminate = false;
this.data = null;
this.expanded = false;
this.parent = null;
this.visible = true;
this.isCurrent = false;
this.canFocus = false;
for (const name in options) {
if (shared.hasOwn(options, name)) {
this[name] = options[name];
}
}
this.level = 0;
this.loaded = false;
this.childNodes = [];
this.loading = false;
if (this.parent) {
this.level = this.parent.level + 1;
}
}
initialize() {
var _a;
const store = this.store;
if (!store) {
throw new Error("[Node]store is required!");
}
store.registerNode(this);
const props = store.props;
if (props && typeof props.isLeaf !== "undefined") {
const isLeaf = getPropertyFromData(this, "isLeaf");
if (types.isBoolean(isLeaf)) {
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.isLeafByUser) {
this.expand();
}
if (!shared.isArray(this.data)) {
util.markNodeData(this, this.data);
}
if (!this.data)
return;
const defaultExpandedKeys = store.defaultExpandedKeys;
const key = store.key;
if (key && !lodashUnified.isNil(this.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.level === 1 || ((_a = this.parent) == null ? void 0 : _a.expanded) === true)
this.canFocus = true;
}
setData(data) {
if (!shared.isArray(data)) {
util.markNodeData(this, data);
}
this.data = data;
this.childNodes = [];
let children;
if (this.level === 0 && shared.isArray(this.data)) {
children = this.data;
} else {
children = getPropertyFromData(this, "children") || [];
}
for (let i = 0, j = children.length; i < j; i++) {
this.insertChild({ data: children[i] });
}
}
get label() {
return getPropertyFromData(this, "label");
}
get key() {
const nodeKey = this.store.key;
if (this.data)
return this.data[nodeKey];
return null;
}
get disabled() {
return getPropertyFromData(this, "disabled");
}
get nextSibling() {
const parent = this.parent;
if (parent) {
const index = parent.childNodes.indexOf(this);
if (index > -1) {
return parent.childNodes[index + 1];
}
}
return null;
}
get previousSibling() {
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;
}
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);
}
}
insertChild(child, index, batch) {
if (!child)
throw new Error("InsertChild error: child is required.");
if (!(child instanceof Node)) {
if (!batch) {
const children = this.getChildren(true);
if (!(children == null ? void 0 : children.includes(child.data))) {
if (types.isUndefined(index) || index < 0) {
children == null ? void 0 : children.push(child.data);
} else {
children == null ? void 0 : children.splice(index, 0, child.data);
}
}
}
Object.assign(child, {
parent: this,
store: this.store
});
child = vue.reactive(new Node(child));
if (child instanceof Node) {
child.initialize();
}
}
child.level = this.level + 1;
if (types.isUndefined(index) || index < 0) {
this.childNodes.push(child);
} else {
this.childNodes.splice(index, 0, child);
}
this.updateLeafState();
}
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);
}
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();
}
removeChildByData(data) {
let targetNode = null;
for (let i = 0; i < this.childNodes.length; i++) {
if (this.childNodes[i].data === data) {
targetNode = this.childNodes[i];
break;
}
}
if (targetNode) {
this.removeChild(targetNode);
}
}
expand(callback, expandParent) {
const done = () => {
if (expandParent) {
let parent = this.parent;
while (parent && parent.level > 0) {
parent.expanded = true;
parent = parent.parent;
}
}
this.expanded = true;
if (callback)
callback();
setCanFocus(this.childNodes, true);
};
if (this.shouldLoadData()) {
this.loadData((data) => {
if (shared.isArray(data)) {
if (this.checked) {
this.setChecked(true, true);
} else if (!this.store.checkStrictly) {
reInitChecked(this);
}
done();
}
});
} else {
done();
}
}
doCreateChildren(array, defaultProps = {}) {
array.forEach((item) => {
this.insertChild(Object.assign({ data: item }, defaultProps), void 0, true);
});
}
collapse() {
this.expanded = false;
setCanFocus(this.childNodes, false);
}
shouldLoadData() {
return Boolean(this.store.lazy === true && this.store.load && !this.loaded);
}
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.checkStrictly)
return;
if (!(this.shouldLoadData() && !this.store.checkDescendants)) {
const { all, allWithoutDisable } = getChildState(this.childNodes);
if (!this.isLeaf && !all && allWithoutDisable) {
this.checked = false;
value = false;
}
const handleDescendants = () => {
if (deep) {
const childNodes = this.childNodes;
for (let i = 0, j = childNodes.length; i < j; 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;
}
}
};
if (this.shouldLoadData()) {
this.loadData(() => {
handleDescendants();
reInitChecked(this);
}, {
checked: value !== false
});
return;
} else {
handleDescendants();
}
}
const parent = this.parent;
if (!parent || parent.level === 0)
return;
if (!recursion) {
reInitChecked(parent);
}
}
getChildren(forceInit = 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 (types.isUndefined(data[children])) {
data[children] = null;
}
if (forceInit && !data[children]) {
data[children] = [];
}
return data[children];
}
updateChildren() {
const newData = this.getChildren() || [];
const oldData = this.childNodes.map((node) => node.data);
const newDataMap = {};
const newNodes = [];
newData.forEach((item, index) => {
const key = item[util.NODE_KEY];
const isNodeExists = !!key && oldData.findIndex((data) => (data == null ? void 0 : data[util.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 == null ? void 0 : item[util.NODE_KEY]])
this.removeChildByData(item);
});
}
newNodes.forEach(({ index, data }) => {
this.insertChild({ data }, index);
});
this.updateLeafState();
}
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.doCreateChildren(children, defaultProps);
this.loaded = true;
this.loading = false;
this.updateLeafState();
if (callback) {
callback.call(this, children);
}
};
const reject = () => {
this.loading = false;
};
this.store.load(this, resolve, reject);
} else {
if (callback) {
callback.call(this);
}
}
}
eachNode(callback) {
const arr = [this];
while (arr.length) {
const node = arr.shift();
arr.unshift(...node.childNodes);
callback(node);
}
}
reInitChecked() {
if (this.store.checkStrictly)
return;
reInitChecked(this);
}
}
exports["default"] = Node;
exports.getChildState = getChildState;
//# sourceMappingURL=node.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,51 @@
import Node from './node';
import type { FilterNodeMethodFunction, FilterValue, LoadFunction, TreeData, TreeKey, TreeNodeData, TreeOptionProps, TreeStoreNodesMap, TreeStoreOptions } from '../tree.type';
export default class TreeStore {
currentNode: Node | null;
currentNodeKey: TreeKey | null;
nodesMap: TreeStoreNodesMap;
root: Node;
data: TreeData;
lazy: boolean;
load?: LoadFunction;
filterNodeMethod?: FilterNodeMethodFunction;
key: TreeKey;
defaultCheckedKeys?: TreeKey[];
checkStrictly: boolean;
defaultExpandedKeys?: TreeKey[];
autoExpandParent: boolean;
defaultExpandAll: boolean;
checkDescendants: boolean;
props: TreeOptionProps;
constructor(options: TreeStoreOptions);
initialize(): void;
filter(value: FilterValue): void;
setData(newVal: TreeData): void;
getNode(data: TreeKey | TreeNodeData | Node): Node;
insertBefore(data: TreeNodeData, refData: TreeKey | TreeNodeData | Node): void;
insertAfter(data: TreeNodeData, refData: TreeKey | TreeNodeData | Node): void;
remove(data: TreeNodeData | Node): void;
append(data: TreeNodeData, parentData: TreeNodeData | TreeKey | Node): void;
_initDefaultCheckedNodes(): void;
_initDefaultCheckedNode(node: Node): void;
setDefaultCheckedKey(newVal: TreeKey[]): void;
registerNode(node: Node): void;
deregisterNode(node: Node): void;
getCheckedNodes(leafOnly?: boolean, includeHalfChecked?: boolean): TreeNodeData[];
getCheckedKeys(leafOnly?: boolean): TreeKey[];
getHalfCheckedNodes(): TreeNodeData[];
getHalfCheckedKeys(): TreeKey[];
_getAllNodes(): Node[];
updateChildren(key: TreeKey, data: TreeData): void;
_setCheckedKeys(key: TreeKey, leafOnly: boolean | undefined, checkedKeys: {
[key: string]: boolean;
}): void;
setCheckedNodes(array: Node[], leafOnly?: boolean): void;
setCheckedKeys(keys: TreeKey[], leafOnly?: boolean): void;
setDefaultExpandedKeys(keys: TreeKey[]): void;
setChecked(data: TreeKey | TreeNodeData, checked: boolean, deep: boolean): void;
getCurrentNode(): Node | null;
setCurrentNode(currentNode: Node): void;
setUserCurrentNode(node: Node, shouldAutoExpandParent?: boolean): void;
setCurrentNodeKey(key: TreeKey | null, shouldAutoExpandParent?: boolean): void;
}

View File

@@ -0,0 +1,336 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var node = require('./node.js');
var util = require('./util.js');
var shared = require('@vue/shared');
var types = require('../../../../utils/types.js');
class TreeStore {
constructor(options) {
this.lazy = false;
this.checkStrictly = false;
this.autoExpandParent = false;
this.defaultExpandAll = false;
this.checkDescendants = false;
this.currentNode = null;
this.currentNodeKey = null;
for (const option in options) {
if (shared.hasOwn(options, option)) {
this[option] = options[option];
}
}
this.nodesMap = {};
}
initialize() {
this.root = new node["default"]({
data: this.data,
store: this
});
this.root.initialize();
if (this.lazy && this.load) {
const loadFn = this.load;
loadFn(this.root, (data) => {
this.root.doCreateChildren(data);
this._initDefaultCheckedNodes();
}, shared.NOOP);
} else {
this._initDefaultCheckedNodes();
}
}
filter(value) {
const filterNodeMethod = this.filterNodeMethod;
const lazy = this.lazy;
const traverse = async function(node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
for (const [index, child] of childNodes.entries()) {
child.visible = !!(filterNodeMethod == null ? void 0 : filterNodeMethod.call(child, value, child.data, child));
if (index % 80 === 0 && index > 0) {
await vue.nextTick();
}
await traverse(child);
}
if (!node.visible && childNodes.length) {
let allHidden = true;
allHidden = !childNodes.some((child) => child.visible);
if (node.root) {
node.root.visible = allHidden === false;
} else {
node.visible = allHidden === false;
}
}
if (!value)
return;
if (node.visible && !node.isLeaf) {
if (!lazy || node.loaded) {
node.expand();
}
}
};
traverse(this);
}
setData(newVal) {
const instanceChanged = newVal !== this.root.data;
if (instanceChanged) {
this.nodesMap = {};
this.root.setData(newVal);
this._initDefaultCheckedNodes();
this.setCurrentNodeKey(this.currentNodeKey);
} else {
this.root.updateChildren();
}
}
getNode(data) {
if (data instanceof node["default"])
return data;
const key = shared.isObject(data) ? util.getNodeKey(this.key, data) : data;
return this.nodesMap[key] || null;
}
insertBefore(data, refData) {
var _a;
const refNode = this.getNode(refData);
(_a = refNode.parent) == null ? void 0 : _a.insertBefore({ data }, refNode);
}
insertAfter(data, refData) {
var _a;
const refNode = this.getNode(refData);
(_a = refNode.parent) == null ? void 0 : _a.insertAfter({ data }, refNode);
}
remove(data) {
const node = this.getNode(data);
if (node && node.parent) {
if (node === this.currentNode) {
this.currentNode = null;
}
node.parent.removeChild(node);
}
}
append(data, parentData) {
const parentNode = !types.isPropAbsent(parentData) ? this.getNode(parentData) : this.root;
if (parentNode) {
parentNode.insertChild({ data });
}
}
_initDefaultCheckedNodes() {
const defaultCheckedKeys = this.defaultCheckedKeys || [];
const nodesMap = this.nodesMap;
defaultCheckedKeys.forEach((checkedKey) => {
const node = nodesMap[checkedKey];
if (node) {
node.setChecked(true, !this.checkStrictly);
}
});
}
_initDefaultCheckedNode(node) {
const defaultCheckedKeys = this.defaultCheckedKeys || [];
if (!lodashUnified.isNil(node.key) && defaultCheckedKeys.includes(node.key)) {
node.setChecked(true, !this.checkStrictly);
}
}
setDefaultCheckedKey(newVal) {
if (newVal !== this.defaultCheckedKeys) {
this.defaultCheckedKeys = newVal;
this._initDefaultCheckedNodes();
}
}
registerNode(node) {
const key = this.key;
if (!node || !node.data)
return;
if (!key) {
this.nodesMap[node.id] = node;
} else {
const nodeKey = node.key;
if (!lodashUnified.isNil(nodeKey))
this.nodesMap[nodeKey] = node;
}
}
deregisterNode(node) {
const key = this.key;
if (!key || !node || !node.data)
return;
node.childNodes.forEach((child) => {
this.deregisterNode(child);
});
delete this.nodesMap[node.key];
}
getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
const checkedNodes = [];
const traverse = function(node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach((child) => {
if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
checkedNodes.push(child.data);
}
traverse(child);
});
};
traverse(this);
return checkedNodes;
}
getCheckedKeys(leafOnly = false) {
return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]);
}
getHalfCheckedNodes() {
const nodes = [];
const traverse = function(node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach((child) => {
if (child.indeterminate) {
nodes.push(child.data);
}
traverse(child);
});
};
traverse(this);
return nodes;
}
getHalfCheckedKeys() {
return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);
}
_getAllNodes() {
const allNodes = [];
const nodesMap = this.nodesMap;
for (const nodeKey in nodesMap) {
if (shared.hasOwn(nodesMap, nodeKey)) {
allNodes.push(nodesMap[nodeKey]);
}
}
return allNodes;
}
updateChildren(key, data) {
const node = this.nodesMap[key];
if (!node)
return;
const childNodes = node.childNodes;
for (let i = childNodes.length - 1; i >= 0; i--) {
const child = childNodes[i];
this.remove(child.data);
}
for (let i = 0, j = data.length; i < j; i++) {
const child = data[i];
this.append(child, node.data);
}
}
_setCheckedKeys(key, leafOnly = false, checkedKeys) {
const allNodes = this._getAllNodes().sort((a, b) => a.level - b.level);
const cache = /* @__PURE__ */ Object.create(null);
const keys = Object.keys(checkedKeys);
allNodes.forEach((node) => node.setChecked(false, false));
const cacheCheckedChild = (node) => {
node.childNodes.forEach((child) => {
var _a;
cache[child.data[key]] = true;
if ((_a = child.childNodes) == null ? void 0 : _a.length) {
cacheCheckedChild(child);
}
});
};
for (let i = 0, j = allNodes.length; i < j; i++) {
const node = allNodes[i];
const nodeKey = node.data[key].toString();
const checked = keys.includes(nodeKey);
if (!checked) {
if (node.checked && !cache[nodeKey]) {
node.setChecked(false, false);
}
continue;
}
if (node.childNodes.length) {
cacheCheckedChild(node);
}
if (node.isLeaf || this.checkStrictly) {
node.setChecked(true, false);
continue;
}
node.setChecked(true, true);
if (leafOnly) {
node.setChecked(false, false);
const traverse = function(node2) {
const childNodes = node2.childNodes;
childNodes.forEach((child) => {
if (!child.isLeaf) {
child.setChecked(false, false);
}
traverse(child);
});
};
traverse(node);
}
}
}
setCheckedNodes(array, leafOnly = false) {
const key = this.key;
const checkedKeys = {};
array.forEach((item) => {
checkedKeys[(item || {})[key]] = true;
});
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
setCheckedKeys(keys, leafOnly = false) {
this.defaultCheckedKeys = keys;
const key = this.key;
const checkedKeys = {};
keys.forEach((key2) => {
checkedKeys[key2] = true;
});
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
setDefaultExpandedKeys(keys) {
keys = keys || [];
this.defaultExpandedKeys = keys;
keys.forEach((key) => {
const node = this.getNode(key);
if (node)
node.expand(null, this.autoExpandParent);
});
}
setChecked(data, checked, deep) {
const node = this.getNode(data);
if (node) {
node.setChecked(!!checked, deep);
}
}
getCurrentNode() {
return this.currentNode;
}
setCurrentNode(currentNode) {
const prevCurrentNode = this.currentNode;
if (prevCurrentNode) {
prevCurrentNode.isCurrent = false;
}
this.currentNode = currentNode;
this.currentNode.isCurrent = true;
}
setUserCurrentNode(node, shouldAutoExpandParent = true) {
var _a;
const key = node[this.key];
const currNode = this.nodesMap[key];
this.setCurrentNode(currNode);
if (shouldAutoExpandParent && this.currentNode && this.currentNode.level > 1) {
(_a = this.currentNode.parent) == null ? void 0 : _a.expand(null, true);
}
}
setCurrentNodeKey(key, shouldAutoExpandParent = true) {
var _a;
this.currentNodeKey = key;
if (types.isPropAbsent(key)) {
this.currentNode && (this.currentNode.isCurrent = false);
this.currentNode = null;
return;
}
const node = this.getNode(key);
if (node) {
this.setCurrentNode(node);
if (shouldAutoExpandParent && this.currentNode && this.currentNode.level > 1) {
(_a = this.currentNode.parent) == null ? void 0 : _a.expand(null, true);
}
}
}
}
exports["default"] = TreeStore;
//# sourceMappingURL=tree-store.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,240 @@
import type { InjectionKey, Ref, SetupContext } from 'vue';
import type { AllowDragFunction, AllowDropFunction, FakeNode, NodeDropType } from '../tree.type';
import type TreeStore from './tree-store';
import type Node from './node';
interface TreeNode {
node: Node;
$el?: HTMLElement;
}
interface DragOptions {
event: DragEvent;
treeNode: TreeNode;
}
interface Props {
props: {
allowDrag?: AllowDragFunction;
allowDrop?: AllowDropFunction;
};
ctx: SetupContext<string[]>;
el$: Ref<HTMLElement | null>;
dropIndicator$: Ref<HTMLElement | null>;
store: Ref<TreeStore>;
}
export interface DragEvents {
treeNodeDragStart: (options: DragOptions) => void;
treeNodeDragOver: (options: DragOptions) => void;
treeNodeDragEnd: (event: DragEvent) => void;
}
export declare const dragEventsKey: InjectionKey<DragEvents>;
export declare function useDragNodeHandler({ props, ctx, el$, dropIndicator$, store, }: Props): {
dragState: Ref<{
allowDrop: boolean;
dropType: NodeDropType | null;
draggingNode: {
node: {
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: import("../tree.type").TreeNodeData;
expanded: boolean;
parent: any | null;
visible: boolean;
isCurrent: boolean;
store: {
currentNode: any | null;
currentNodeKey: import("../tree.type").TreeKey | null;
nodesMap: import("../tree.type").TreeStoreNodesMap;
root: any;
data: import("../tree.type").TreeNodeData[];
lazy: boolean;
load?: import("../tree.type").LoadFunction | undefined;
filterNodeMethod?: import("../tree.type").FilterNodeMethodFunction | undefined;
key: import("../tree.type").TreeKey;
defaultCheckedKeys?: import("../tree.type").TreeKey[] | undefined;
checkStrictly: boolean;
defaultExpandedKeys?: import("../tree.type").TreeKey[] | undefined;
autoExpandParent: boolean;
defaultExpandAll: boolean;
checkDescendants: boolean;
props: {
children?: string | undefined;
label?: (string | ((data: import("../tree.type").TreeNodeData, node: Node) => string)) | undefined;
disabled?: (string | ((data: import("../tree.type").TreeNodeData, node: Node) => boolean)) | undefined;
isLeaf?: (string | ((data: import("../tree.type").TreeNodeData, node: Node) => boolean)) | undefined;
class?: ((data: import("../tree.type").TreeNodeData, node: Node) => string | {
[key: string]: boolean;
}) | undefined;
};
initialize: () => void;
filter: (value: import("../tree.type").FilterValue) => void;
setData: (newVal: import("../tree.type").TreeData) => void;
getNode: (data: import("../tree.type").TreeKey | import("../tree.type").TreeNodeData | Node) => Node;
insertBefore: (data: import("../tree.type").TreeNodeData, refData: import("../tree.type").TreeKey | import("../tree.type").TreeNodeData | Node) => void;
insertAfter: (data: import("../tree.type").TreeNodeData, refData: import("../tree.type").TreeKey | import("../tree.type").TreeNodeData | Node) => void;
remove: (data: import("../tree.type").TreeNodeData | Node) => void;
append: (data: import("../tree.type").TreeNodeData, parentData: import("../tree.type").TreeNodeData | import("../tree.type").TreeKey | Node) => void;
_initDefaultCheckedNodes: () => void;
_initDefaultCheckedNode: (node: Node) => void;
setDefaultCheckedKey: (newVal: import("../tree.type").TreeKey[]) => void;
registerNode: (node: Node) => void;
deregisterNode: (node: Node) => void;
getCheckedNodes: (leafOnly?: boolean, includeHalfChecked?: boolean) => import("../tree.type").TreeNodeData[];
getCheckedKeys: (leafOnly?: boolean) => import("../tree.type").TreeKey[];
getHalfCheckedNodes: () => import("../tree.type").TreeNodeData[];
getHalfCheckedKeys: () => import("../tree.type").TreeKey[];
_getAllNodes: () => Node[];
updateChildren: (key: import("../tree.type").TreeKey, data: import("../tree.type").TreeData) => void;
_setCheckedKeys: (key: import("../tree.type").TreeKey, leafOnly: boolean | undefined, checkedKeys: {
[key: string]: boolean;
}) => void;
setCheckedNodes: (array: Node[], leafOnly?: boolean) => void;
setCheckedKeys: (keys: import("../tree.type").TreeKey[], leafOnly?: boolean) => void;
setDefaultExpandedKeys: (keys: import("../tree.type").TreeKey[]) => void;
setChecked: (data: import("../tree.type").TreeKey | import("../tree.type").TreeNodeData, checked: boolean, deep: boolean) => void;
getCurrentNode: () => Node | null;
setCurrentNode: (currentNode: Node) => void;
setUserCurrentNode: (node: Node, shouldAutoExpandParent?: boolean) => void;
setCurrentNodeKey: (key: import("../tree.type").TreeKey | null, shouldAutoExpandParent?: boolean) => void;
};
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: any[];
loading: boolean;
initialize: () => void;
setData: (data: import("../tree.type").TreeNodeData) => void;
readonly label: string;
readonly key: import("../tree.type").TreeKey | null | undefined;
readonly disabled: boolean;
readonly nextSibling: any | null;
readonly previousSibling: any | null;
contains: (target: Node, deep?: boolean) => boolean;
remove: () => void;
insertChild: (child?: FakeNode | Node, index?: number, batch?: boolean) => void;
insertBefore: (child: FakeNode | Node, ref: Node) => void;
insertAfter: (child: FakeNode | Node, ref: Node) => void;
removeChild: (child: Node) => void;
removeChildByData: (data: import("../tree.type").TreeNodeData | null) => void;
expand: (callback?: (() => void) | null, expandParent?: boolean) => void;
doCreateChildren: (array: import("../tree.type").TreeNodeData[], defaultProps?: import("../tree.type").TreeNodeLoadedDefaultProps) => void;
collapse: () => void;
shouldLoadData: () => boolean;
updateLeafState: () => void;
setChecked: (value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean) => void;
getChildren: (forceInit?: boolean) => import("../tree.type").TreeNodeData | import("../tree.type").TreeNodeData[] | null;
updateChildren: () => void;
loadData: (callback: (data?: import("../tree.type").TreeNodeData[]) => void, defaultProps?: import("../tree.type").TreeNodeLoadedDefaultProps) => void;
eachNode: (callback: (node: Node) => void) => void;
reInitChecked: () => void;
};
$el?: HTMLElement | undefined;
} | null;
showDropIndicator: boolean;
dropNode: {
node: {
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: import("../tree.type").TreeNodeData;
expanded: boolean;
parent: any | null;
visible: boolean;
isCurrent: boolean;
store: {
currentNode: any | null;
currentNodeKey: import("../tree.type").TreeKey | null;
nodesMap: import("../tree.type").TreeStoreNodesMap;
root: any;
data: import("../tree.type").TreeNodeData[];
lazy: boolean;
load?: import("../tree.type").LoadFunction | undefined;
filterNodeMethod?: import("../tree.type").FilterNodeMethodFunction | undefined;
key: import("../tree.type").TreeKey;
defaultCheckedKeys?: import("../tree.type").TreeKey[] | undefined;
checkStrictly: boolean;
defaultExpandedKeys?: import("../tree.type").TreeKey[] | undefined;
autoExpandParent: boolean;
defaultExpandAll: boolean;
checkDescendants: boolean;
props: {
children?: string | undefined;
label?: (string | ((data: import("../tree.type").TreeNodeData, node: Node) => string)) | undefined;
disabled?: (string | ((data: import("../tree.type").TreeNodeData, node: Node) => boolean)) | undefined;
isLeaf?: (string | ((data: import("../tree.type").TreeNodeData, node: Node) => boolean)) | undefined;
class?: ((data: import("../tree.type").TreeNodeData, node: Node) => string | {
[key: string]: boolean;
}) | undefined;
};
initialize: () => void;
filter: (value: import("../tree.type").FilterValue) => void;
setData: (newVal: import("../tree.type").TreeData) => void;
getNode: (data: import("../tree.type").TreeKey | import("../tree.type").TreeNodeData | Node) => Node;
insertBefore: (data: import("../tree.type").TreeNodeData, refData: import("../tree.type").TreeKey | import("../tree.type").TreeNodeData | Node) => void;
insertAfter: (data: import("../tree.type").TreeNodeData, refData: import("../tree.type").TreeKey | import("../tree.type").TreeNodeData | Node) => void;
remove: (data: import("../tree.type").TreeNodeData | Node) => void;
append: (data: import("../tree.type").TreeNodeData, parentData: import("../tree.type").TreeNodeData | import("../tree.type").TreeKey | Node) => void;
_initDefaultCheckedNodes: () => void;
_initDefaultCheckedNode: (node: Node) => void;
setDefaultCheckedKey: (newVal: import("../tree.type").TreeKey[]) => void;
registerNode: (node: Node) => void;
deregisterNode: (node: Node) => void;
getCheckedNodes: (leafOnly?: boolean, includeHalfChecked?: boolean) => import("../tree.type").TreeNodeData[];
getCheckedKeys: (leafOnly?: boolean) => import("../tree.type").TreeKey[];
getHalfCheckedNodes: () => import("../tree.type").TreeNodeData[];
getHalfCheckedKeys: () => import("../tree.type").TreeKey[];
_getAllNodes: () => Node[];
updateChildren: (key: import("../tree.type").TreeKey, data: import("../tree.type").TreeData) => void;
_setCheckedKeys: (key: import("../tree.type").TreeKey, leafOnly: boolean | undefined, checkedKeys: {
[key: string]: boolean;
}) => void;
setCheckedNodes: (array: Node[], leafOnly?: boolean) => void;
setCheckedKeys: (keys: import("../tree.type").TreeKey[], leafOnly?: boolean) => void;
setDefaultExpandedKeys: (keys: import("../tree.type").TreeKey[]) => void;
setChecked: (data: import("../tree.type").TreeKey | import("../tree.type").TreeNodeData, checked: boolean, deep: boolean) => void;
getCurrentNode: () => Node | null;
setCurrentNode: (currentNode: Node) => void;
setUserCurrentNode: (node: Node, shouldAutoExpandParent?: boolean) => void;
setCurrentNodeKey: (key: import("../tree.type").TreeKey | null, shouldAutoExpandParent?: boolean) => void;
};
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: any[];
loading: boolean;
initialize: () => void;
setData: (data: import("../tree.type").TreeNodeData) => void;
readonly label: string;
readonly key: import("../tree.type").TreeKey | null | undefined;
readonly disabled: boolean;
readonly nextSibling: any | null;
readonly previousSibling: any | null;
contains: (target: Node, deep?: boolean) => boolean;
remove: () => void;
insertChild: (child?: FakeNode | Node, index?: number, batch?: boolean) => void;
insertBefore: (child: FakeNode | Node, ref: Node) => void;
insertAfter: (child: FakeNode | Node, ref: Node) => void;
removeChild: (child: Node) => void;
removeChildByData: (data: import("../tree.type").TreeNodeData | null) => void;
expand: (callback?: (() => void) | null, expandParent?: boolean) => void;
doCreateChildren: (array: import("../tree.type").TreeNodeData[], defaultProps?: import("../tree.type").TreeNodeLoadedDefaultProps) => void;
collapse: () => void;
shouldLoadData: () => boolean;
updateLeafState: () => void;
setChecked: (value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean) => void;
getChildren: (forceInit?: boolean) => import("../tree.type").TreeNodeData | import("../tree.type").TreeNodeData[] | null;
updateChildren: () => void;
loadData: (callback: (data?: import("../tree.type").TreeNodeData[]) => void, defaultProps?: import("../tree.type").TreeNodeLoadedDefaultProps) => void;
eachNode: (callback: (node: Node) => void) => void;
reInitChecked: () => void;
};
$el?: HTMLElement | undefined;
} | null;
}>;
};
export {};

View File

@@ -0,0 +1,177 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../../../hooks/use-namespace/index.js');
var shared = require('@vue/shared');
var style = require('../../../../utils/dom/style.js');
const dragEventsKey = Symbol("dragEvents");
function useDragNodeHandler({
props,
ctx,
el$,
dropIndicator$,
store
}) {
const ns = index.useNamespace("tree");
const dragState = vue.ref({
showDropIndicator: false,
draggingNode: null,
dropNode: null,
allowDrop: true,
dropType: null
});
const treeNodeDragStart = ({ event, treeNode }) => {
if (!event.dataTransfer)
return;
if (shared.isFunction(props.allowDrag) && !props.allowDrag(treeNode.node)) {
event.preventDefault();
return false;
}
event.dataTransfer.effectAllowed = "move";
try {
event.dataTransfer.setData("text/plain", "");
} catch (e) {
}
dragState.value.draggingNode = treeNode;
ctx.emit("node-drag-start", treeNode.node, event);
};
const treeNodeDragOver = ({ event, treeNode }) => {
if (!event.dataTransfer)
return;
const dropNode = treeNode;
const oldDropNode = dragState.value.dropNode;
if (oldDropNode && oldDropNode.node.id !== dropNode.node.id) {
style.removeClass(oldDropNode.$el, ns.is("drop-inner"));
}
const draggingNode = dragState.value.draggingNode;
if (!draggingNode || !dropNode)
return;
let dropPrev = true;
let dropInner = true;
let dropNext = true;
let userAllowDropInner = true;
if (shared.isFunction(props.allowDrop)) {
dropPrev = props.allowDrop(draggingNode.node, dropNode.node, "prev");
userAllowDropInner = dropInner = props.allowDrop(draggingNode.node, dropNode.node, "inner");
dropNext = props.allowDrop(draggingNode.node, dropNode.node, "next");
}
event.dataTransfer.dropEffect = dropInner || dropPrev || dropNext ? "move" : "none";
if ((dropPrev || dropInner || dropNext) && (oldDropNode == null ? void 0 : oldDropNode.node.id) !== dropNode.node.id) {
if (oldDropNode) {
ctx.emit("node-drag-leave", draggingNode.node, oldDropNode.node, event);
}
ctx.emit("node-drag-enter", draggingNode.node, dropNode.node, event);
}
if (dropPrev || dropInner || dropNext) {
dragState.value.dropNode = dropNode;
} else {
dragState.value.dropNode = null;
}
if (dropNode.node.nextSibling === draggingNode.node) {
dropNext = false;
}
if (dropNode.node.previousSibling === draggingNode.node) {
dropPrev = false;
}
if (dropNode.node.contains(draggingNode.node, false)) {
dropInner = false;
}
if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
dropPrev = false;
dropInner = false;
dropNext = false;
}
const dropEl = dropNode.$el;
const targetPosition = dropEl.querySelector(`.${ns.be("node", "content")}`).getBoundingClientRect();
const treePosition = el$.value.getBoundingClientRect();
let dropType;
const prevPercent = dropPrev ? dropInner ? 0.25 : dropNext ? 0.45 : 1 : Number.NEGATIVE_INFINITY;
const nextPercent = dropNext ? dropInner ? 0.75 : dropPrev ? 0.55 : 0 : Number.POSITIVE_INFINITY;
let indicatorTop = -9999;
const distance = event.clientY - targetPosition.top;
if (distance < targetPosition.height * prevPercent) {
dropType = "before";
} else if (distance > targetPosition.height * nextPercent) {
dropType = "after";
} else if (dropInner) {
dropType = "inner";
} else {
dropType = "none";
}
const iconPosition = dropEl.querySelector(`.${ns.be("node", "expand-icon")}`).getBoundingClientRect();
const dropIndicator = dropIndicator$.value;
if (dropType === "before") {
indicatorTop = iconPosition.top - treePosition.top;
} else if (dropType === "after") {
indicatorTop = iconPosition.bottom - treePosition.top;
}
dropIndicator.style.top = `${indicatorTop}px`;
dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`;
if (dropType === "inner") {
style.addClass(dropEl, ns.is("drop-inner"));
} else {
style.removeClass(dropEl, ns.is("drop-inner"));
}
dragState.value.showDropIndicator = dropType === "before" || dropType === "after";
dragState.value.allowDrop = dragState.value.showDropIndicator || userAllowDropInner;
dragState.value.dropType = dropType;
ctx.emit("node-drag-over", draggingNode.node, dropNode.node, event);
};
const treeNodeDragEnd = (event) => {
var _a, _b;
const { draggingNode, dropType, dropNode } = dragState.value;
event.preventDefault();
if (event.dataTransfer) {
event.dataTransfer.dropEffect = "move";
}
if ((draggingNode == null ? void 0 : draggingNode.node.data) && dropNode) {
const draggingNodeCopy = { data: draggingNode.node.data };
if (dropType !== "none") {
draggingNode.node.remove();
}
if (dropType === "before") {
(_a = dropNode.node.parent) == null ? void 0 : _a.insertBefore(draggingNodeCopy, dropNode.node);
} else if (dropType === "after") {
(_b = dropNode.node.parent) == null ? void 0 : _b.insertAfter(draggingNodeCopy, dropNode.node);
} else if (dropType === "inner") {
dropNode.node.insertChild(draggingNodeCopy);
}
if (dropType !== "none") {
store.value.registerNode(draggingNodeCopy);
if (store.value.key) {
draggingNode.node.eachNode((node) => {
var _a2;
(_a2 = store.value.nodesMap[node.data[store.value.key]]) == null ? void 0 : _a2.setChecked(node.checked, !store.value.checkStrictly);
});
}
}
style.removeClass(dropNode.$el, ns.is("drop-inner"));
ctx.emit("node-drag-end", draggingNode.node, dropNode.node, dropType, event);
if (dropType !== "none") {
ctx.emit("node-drop", draggingNode.node, dropNode.node, dropType, event);
}
}
if (draggingNode && !dropNode) {
ctx.emit("node-drag-end", draggingNode.node, null, dropType, event);
}
dragState.value.showDropIndicator = false;
dragState.value.draggingNode = null;
dragState.value.dropNode = null;
dragState.value.allowDrop = true;
};
vue.provide(dragEventsKey, {
treeNodeDragStart,
treeNodeDragOver,
treeNodeDragEnd
});
return {
dragState
};
}
exports.dragEventsKey = dragEventsKey;
exports.useDragNodeHandler = useDragNodeHandler;
//# sourceMappingURL=useDragNode.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,7 @@
import type TreeStore from './tree-store';
import type { Ref } from 'vue';
interface UseKeydownOption {
el$: Ref<HTMLElement | null>;
}
export declare function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>): void;
export {};

View File

@@ -0,0 +1,101 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var index = require('../../../../hooks/use-namespace/index.js');
var aria = require('../../../../constants/aria.js');
function useKeydown({ el$ }, store) {
const ns = index.useNamespace("tree");
vue.onMounted(() => {
initTabIndex();
});
vue.onUpdated(() => {
const checkboxItems = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
checkboxItems.forEach((checkbox) => {
checkbox.setAttribute("tabindex", "-1");
});
});
function canNodeFocus(treeItems, nextIndex) {
var _a, _b;
const currentNode = store.value.getNode(treeItems[nextIndex].dataset.key);
return currentNode.canFocus && currentNode.visible && (((_a = currentNode.parent) == null ? void 0 : _a.expanded) || ((_b = currentNode.parent) == null ? void 0 : _b.level) === 0);
}
const handleKeydown = (ev) => {
const currentItem = ev.target;
if (!currentItem.className.includes(ns.b("node")))
return;
const code = ev.code;
const treeItems = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
const currentIndex = treeItems.indexOf(currentItem);
let nextIndex;
if ([aria.EVENT_CODE.up, aria.EVENT_CODE.down].includes(code)) {
ev.preventDefault();
if (code === aria.EVENT_CODE.up) {
nextIndex = currentIndex === -1 ? 0 : currentIndex !== 0 ? currentIndex - 1 : treeItems.length - 1;
const startIndex = nextIndex;
while (true) {
if (canNodeFocus(treeItems, nextIndex)) {
break;
}
nextIndex--;
if (nextIndex === startIndex) {
nextIndex = -1;
break;
}
if (nextIndex < 0) {
nextIndex = treeItems.length - 1;
}
}
} else {
nextIndex = currentIndex === -1 ? 0 : currentIndex < treeItems.length - 1 ? currentIndex + 1 : 0;
const startIndex = nextIndex;
while (true) {
if (canNodeFocus(treeItems, nextIndex)) {
break;
}
nextIndex++;
if (nextIndex === startIndex) {
nextIndex = -1;
break;
}
if (nextIndex >= treeItems.length) {
nextIndex = 0;
}
}
}
nextIndex !== -1 && treeItems[nextIndex].focus();
}
if ([aria.EVENT_CODE.left, aria.EVENT_CODE.right].includes(code)) {
ev.preventDefault();
currentItem.click();
}
const hasInput = currentItem.querySelector('[type="checkbox"]');
if ([aria.EVENT_CODE.enter, aria.EVENT_CODE.numpadEnter, aria.EVENT_CODE.space].includes(code) && hasInput) {
ev.preventDefault();
hasInput.click();
}
};
core.useEventListener(el$, "keydown", handleKeydown);
const initTabIndex = () => {
var _a;
if (!el$.value)
return;
const treeItems = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
const checkboxItems = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
checkboxItems.forEach((checkbox) => {
checkbox.setAttribute("tabindex", "-1");
});
const checkedItem = el$.value.querySelectorAll(`.${ns.is("checked")}[role=treeitem]`);
if (checkedItem.length) {
checkedItem[0].setAttribute("tabindex", "0");
return;
}
(_a = treeItems[0]) == null ? void 0 : _a.setAttribute("tabindex", "0");
};
}
exports.useKeydown = useKeydown;
//# sourceMappingURL=useKeydown.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,9 @@
import type Node from '../model/node';
interface Props {
node?: Node;
accordion: boolean;
}
export declare function useNodeExpandEventBroadcast(props: Props): {
broadcastExpanded: (node?: Node) => void;
};
export {};

View File

@@ -0,0 +1,35 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var tokens = require('../tokens.js');
function useNodeExpandEventBroadcast(props) {
const parentNodeMap = vue.inject(tokens.TREE_NODE_MAP_INJECTION_KEY, null);
const currentNodeMap = {
treeNodeExpand: (node) => {
var _a;
if (props.node !== node) {
(_a = props.node) == null ? void 0 : _a.collapse();
}
},
children: []
};
if (parentNodeMap) {
parentNodeMap.children.push(currentNodeMap);
}
vue.provide(tokens.TREE_NODE_MAP_INJECTION_KEY, currentNodeMap);
return {
broadcastExpanded: (node) => {
if (!props.accordion)
return;
for (const childNode of currentNodeMap.children) {
childNode.treeNodeExpand(node);
}
}
};
}
exports.useNodeExpandEventBroadcast = useNodeExpandEventBroadcast;
//# sourceMappingURL=useNodeExpandEventBroadcast.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"useNodeExpandEventBroadcast.js","sources":["../../../../../../../packages/components/tree/src/model/useNodeExpandEventBroadcast.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport { TREE_NODE_MAP_INJECTION_KEY } from '../tokens'\n\nimport type Node from '../model/node'\n\ninterface NodeMap {\n treeNodeExpand(node?: Node): void\n children: NodeMap[]\n}\n\ninterface Props {\n node?: Node\n accordion: boolean\n}\n\nexport function useNodeExpandEventBroadcast(props: Props) {\n const parentNodeMap = inject(\n TREE_NODE_MAP_INJECTION_KEY,\n null\n ) as NodeMap | null\n const currentNodeMap: NodeMap = {\n treeNodeExpand: (node) => {\n if (props.node !== node) {\n props.node?.collapse()\n }\n },\n children: [],\n }\n\n if (parentNodeMap) {\n parentNodeMap.children.push(currentNodeMap)\n }\n\n provide(TREE_NODE_MAP_INJECTION_KEY, currentNodeMap)\n\n return {\n broadcastExpanded: (node?: Node): void => {\n if (!props.accordion) return\n for (const childNode of currentNodeMap.children) {\n childNode.treeNodeExpand(node)\n }\n },\n }\n}\n"],"names":["inject","TREE_NODE_MAP_INJECTION_KEY","provide"],"mappings":";;;;;;;AAEO,SAAS,2BAA2B,CAAC,KAAK,EAAE;AACnD,EAAE,MAAM,aAAa,GAAGA,UAAM,CAACC,kCAA2B,EAAE,IAAI,CAAC,CAAC;AAClE,EAAE,MAAM,cAAc,GAAG;AACzB,IAAI,cAAc,EAAE,CAAC,IAAI,KAAK;AAC9B,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;AAC/B,QAAQ,CAAC,EAAE,GAAG,KAAK,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;AAC3D,OAAO;AACP,KAAK;AACL,IAAI,QAAQ,EAAE,EAAE;AAChB,GAAG,CAAC;AACJ,EAAE,IAAI,aAAa,EAAE;AACrB,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAChD,GAAG;AACH,EAAEC,WAAO,CAACD,kCAA2B,EAAE,cAAc,CAAC,CAAC;AACvD,EAAE,OAAO;AACT,IAAI,iBAAiB,EAAE,CAAC,IAAI,KAAK;AACjC,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS;AAC1B,QAAQ,OAAO;AACf,MAAM,KAAK,MAAM,SAAS,IAAI,cAAc,CAAC,QAAQ,EAAE;AACvD,QAAQ,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AACvC,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ;;;;"}

View File

@@ -0,0 +1,7 @@
import type { SetupContext } from 'vue';
import type Node from './node';
import type { RootTreeType, TreeKey, TreeNodeData } from '../tree.type';
export declare const NODE_KEY = "$treeNodeId";
export declare const markNodeData: (node: Node, data: TreeNodeData | null) => void;
export declare const getNodeKey: (key: TreeKey | undefined, data: TreeNodeData) => any;
export declare const handleCurrentChange: (store: RootTreeType["store"], emit: SetupContext["emit"], setCurrent: () => void) => void;

View File

@@ -0,0 +1,30 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const NODE_KEY = "$treeNodeId";
const markNodeData = function(node, data) {
if (!data || data[NODE_KEY])
return;
Object.defineProperty(data, NODE_KEY, {
value: node.id,
enumerable: false,
configurable: false,
writable: false
});
};
const getNodeKey = (key, data) => data == null ? void 0 : data[key || NODE_KEY];
const handleCurrentChange = (store, emit, setCurrent) => {
const preCurrentNode = store.value.currentNode;
setCurrent();
const currentNode = store.value.currentNode;
if (preCurrentNode === currentNode)
return;
emit("current-change", currentNode ? currentNode.data : null, currentNode);
};
exports.NODE_KEY = NODE_KEY;
exports.getNodeKey = getNodeKey;
exports.handleCurrentChange = handleCurrentChange;
exports.markNodeData = markNodeData;
//# sourceMappingURL=util.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"util.js","sources":["../../../../../../../packages/components/tree/src/model/util.ts"],"sourcesContent":["import type { SetupContext } from 'vue'\nimport type Node from './node'\nimport type { RootTreeType, TreeKey, TreeNodeData } from '../tree.type'\n\nexport const NODE_KEY = '$treeNodeId'\n\nexport const markNodeData = function (\n node: Node,\n data: TreeNodeData | null\n): void {\n if (!data || data[NODE_KEY]) return\n Object.defineProperty(data, NODE_KEY, {\n value: node.id,\n enumerable: false,\n configurable: false,\n writable: false,\n })\n}\n\nexport const getNodeKey = (key: TreeKey | undefined, data: TreeNodeData) =>\n data?.[key || NODE_KEY]\n\nexport const handleCurrentChange = (\n store: RootTreeType['store'],\n emit: SetupContext['emit'],\n setCurrent: () => void\n) => {\n const preCurrentNode = store.value.currentNode\n setCurrent()\n const currentNode = store.value.currentNode\n if (preCurrentNode === currentNode) return\n\n emit('current-change', currentNode ? currentNode.data : null, currentNode)\n}\n"],"names":[],"mappings":";;;;AAAY,MAAC,QAAQ,GAAG,cAAc;AAC1B,MAAC,YAAY,GAAG,SAAS,IAAI,EAAE,IAAI,EAAE;AACjD,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;AAC7B,IAAI,OAAO;AACX,EAAE,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE;AACxC,IAAI,KAAK,EAAE,IAAI,CAAC,EAAE;AAClB,IAAI,UAAU,EAAE,KAAK;AACrB,IAAI,YAAY,EAAE,KAAK;AACvB,IAAI,QAAQ,EAAE,KAAK;AACnB,GAAG,CAAC,CAAC;AACL,EAAE;AACU,MAAC,UAAU,GAAG,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,QAAQ,EAAE;AAC3E,MAAC,mBAAmB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,KAAK;AAChE,EAAE,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;AACjD,EAAE,UAAU,EAAE,CAAC;AACf,EAAE,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;AAC9C,EAAE,IAAI,cAAc,KAAK,WAAW;AACpC,IAAI,OAAO;AACX,EAAE,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,WAAW,CAAC,IAAI,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7E;;;;;;;"}

View File

@@ -0,0 +1,3 @@
export declare const ROOT_TREE_INJECTION_KEY = "RootTree";
export declare const NODE_INSTANCE_INJECTION_KEY = "NodeInstance";
export declare const TREE_NODE_MAP_INJECTION_KEY = "TreeNodeMap";

View File

@@ -0,0 +1,12 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const ROOT_TREE_INJECTION_KEY = "RootTree";
const NODE_INSTANCE_INJECTION_KEY = "NodeInstance";
const TREE_NODE_MAP_INJECTION_KEY = "TreeNodeMap";
exports.NODE_INSTANCE_INJECTION_KEY = NODE_INSTANCE_INJECTION_KEY;
exports.ROOT_TREE_INJECTION_KEY = ROOT_TREE_INJECTION_KEY;
exports.TREE_NODE_MAP_INJECTION_KEY = TREE_NODE_MAP_INJECTION_KEY;
//# sourceMappingURL=tokens.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"tokens.js","sources":["../../../../../../packages/components/tree/src/tokens.ts"],"sourcesContent":["export const ROOT_TREE_INJECTION_KEY = 'RootTree'\n\nexport const NODE_INSTANCE_INJECTION_KEY = 'NodeInstance'\n\nexport const TREE_NODE_MAP_INJECTION_KEY = 'TreeNodeMap'\n"],"names":[],"mappings":";;;;AAAY,MAAC,uBAAuB,GAAG,WAAW;AACtC,MAAC,2BAA2B,GAAG,eAAe;AAC9C,MAAC,2BAA2B,GAAG;;;;;;"}

View File

@@ -0,0 +1,36 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index$1 = require('../../text/index.js');
var tokens = require('./tokens.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
const _sfc_main = vue.defineComponent({
name: "ElTreeNodeContent",
props: {
node: {
type: Object,
required: true
},
renderContent: Function
},
setup(props) {
const ns = index.useNamespace("tree");
const nodeInstance = vue.inject(tokens.NODE_INSTANCE_INJECTION_KEY);
const tree = vue.inject(tokens.ROOT_TREE_INJECTION_KEY);
return () => {
const node = props.node;
const { data, store } = node;
return props.renderContent ? props.renderContent(vue.h, { _self: nodeInstance, node, data, store }) : vue.renderSlot(tree.ctx.slots, "default", { node, data }, () => [
vue.h(index$1.ElText, { tag: "span", truncated: true, class: ns.be("node", "label") }, () => [node.label])
]);
};
}
});
var NodeContent = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "tree-node-content.vue"]]);
exports["default"] = NodeContent;
//# sourceMappingURL=tree-node-content.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"tree-node-content.js","sources":["../../../../../../packages/components/tree/src/tree-node-content.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h, inject, renderSlot } from 'vue'\nimport ElText from '@element-plus/components/text'\nimport { useNamespace } from '@element-plus/hooks'\nimport { NODE_INSTANCE_INJECTION_KEY, ROOT_TREE_INJECTION_KEY } from './tokens'\n\nimport type { ComponentInternalInstance } from 'vue'\nimport type { RootTreeType } from './tree.type'\n\nexport default defineComponent({\n name: 'ElTreeNodeContent',\n props: {\n node: {\n type: Object,\n required: true,\n },\n renderContent: Function,\n },\n setup(props) {\n const ns = useNamespace('tree')\n const nodeInstance = inject<ComponentInternalInstance>(\n NODE_INSTANCE_INJECTION_KEY\n )\n const tree = inject<RootTreeType>(ROOT_TREE_INJECTION_KEY)!\n return () => {\n const node = props.node\n const { data, store } = node\n return props.renderContent\n ? props.renderContent(h, { _self: nodeInstance, node, data, store })\n : renderSlot(tree.ctx.slots, 'default', { node, data }, () => [\n h(\n ElText,\n { tag: 'span', truncated: true, class: ns.be('node', 'label') },\n () => [node.label]\n ),\n ])\n }\n },\n})\n</script>\n"],"names":["defineComponent","useNamespace","inject","NODE_INSTANCE_INJECTION_KEY","ROOT_TREE_INJECTION_KEY","h","renderSlot","ElText","_export_sfc"],"mappings":";;;;;;;;;;AASA,MAAK,YAAaA,mBAAa,CAAA;AAAA,EAC7B,IAAM,EAAA,mBAAA;AAAA,EACN,KAAO,EAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,MAAA;AAAA,MACN,QAAU,EAAA,IAAA;AAAA,KACZ;AAAA,IACA,aAAe,EAAA,QAAA;AAAA,GACjB;AAAA,EACA,MAAM,KAAO,EAAA;AACX,IAAM,MAAA,EAAA,GAAKC,mBAAa,MAAM,CAAA,CAAA;AAC9B,IAAA,MAAM,YAAe,GAAAC,UAAA,CAAAC,kCAAA,CAAA,CAAA;AAAA,IACnB,MAAA,IAAA,GAAAD,UAAA,CAAAE,8BAAA,CAAA,CAAA;AAAA,IACF,OAAA,MAAA;AACA,MAAM,MAAA,IAAA,QAA4B,CAAuB,IAAA,CAAA;AACzD,MAAA,MAAa,EAAA,IAAA,EAAA,KAAA,EAAA,GAAA,IAAA,CAAA;AACX,MAAA,aAAa,aAAM,GAAA,KAAA,CAAA,aAAA,CAAAC,KAAA,EAAA,EAAA,KAAA,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,KAAA,EAAA,CAAA,GAAAC,cAAA,CAAA,IAAA,CAAA,GAAA,CAAA,KAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,MAAA;AACnB,QAAMD,KAAA,CAAAE,cAAQ,EAAA,EAAA,GAAA,EAAA,MAAU,EAAA,SAAA,EAAA,IAAA,EAAA,KAAA,EAAA,EAAA,CAAA,EAAA,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,MAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AACxB,OAAO,CAAA,CAAA;AAEyD,KAC1D,CAAA;AAAA,GACE;AAAA,CACA,CAAA,CAAA;AACiB,kBACnB,gBAAAC,iCAAA,CAAA,SAAA,EAAA,CAAA,CAAA,QAAA,EAAA,uBAAA,CAAA,CAAA,CAAA;;;;"}

View File

@@ -0,0 +1,14 @@
declare const _default: import("vue").DefineComponent<{
node: {
type: ObjectConstructor;
required: true;
};
renderContent: FunctionConstructor;
}, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
node: {
type: ObjectConstructor;
required: true;
};
renderContent: FunctionConstructor;
}>>, {}>;
export default _default;

View File

@@ -0,0 +1,321 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../collapse-transition/index.js');
var index$1 = require('../../checkbox/index.js');
var index$2 = require('../../icon/index.js');
var iconsVue = require('@element-plus/icons-vue');
var treeNodeContent = require('./tree-node-content.js');
var util = require('./model/util.js');
var useNodeExpandEventBroadcast = require('./model/useNodeExpandEventBroadcast.js');
var useDragNode = require('./model/useDragNode.js');
var node = require('./model/node.js');
var tokens = require('./tokens.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index$3 = require('../../../hooks/use-namespace/index.js');
var shared = require('@vue/shared');
const _sfc_main = vue.defineComponent({
name: "ElTreeNode",
components: {
ElCollapseTransition: index.ElCollapseTransition,
ElCheckbox: index$1.ElCheckbox,
NodeContent: treeNodeContent["default"],
ElIcon: index$2.ElIcon,
Loading: iconsVue.Loading
},
props: {
node: {
type: node["default"],
default: () => ({})
},
props: {
type: Object,
default: () => ({})
},
accordion: Boolean,
renderContent: Function,
renderAfterExpand: Boolean,
showCheckbox: Boolean
},
emits: ["node-expand"],
setup(props, ctx) {
const ns = index$3.useNamespace("tree");
const { broadcastExpanded } = useNodeExpandEventBroadcast.useNodeExpandEventBroadcast(props);
const tree = vue.inject(tokens.ROOT_TREE_INJECTION_KEY);
const expanded = vue.ref(false);
const childNodeRendered = vue.ref(false);
const oldChecked = vue.ref();
const oldIndeterminate = vue.ref();
const node$ = vue.ref();
const dragEvents = vue.inject(useDragNode.dragEventsKey);
const instance = vue.getCurrentInstance();
vue.provide(tokens.NODE_INSTANCE_INJECTION_KEY, instance);
if (props.node.expanded) {
expanded.value = true;
childNodeRendered.value = true;
}
const childrenKey = tree.props.props["children"] || "children";
vue.watch(() => {
var _a;
const children = (_a = props.node.data) == null ? void 0 : _a[childrenKey];
return children && [...children];
}, () => {
props.node.updateChildren();
});
vue.watch(() => props.node.indeterminate, (val) => {
handleSelectChange(props.node.checked, val);
});
vue.watch(() => props.node.checked, (val) => {
handleSelectChange(val, props.node.indeterminate);
});
vue.watch(() => props.node.childNodes.length, () => props.node.reInitChecked());
vue.watch(() => props.node.expanded, (val) => {
vue.nextTick(() => expanded.value = val);
if (val) {
childNodeRendered.value = true;
}
});
const getNodeKey = (node) => {
return util.getNodeKey(tree.props.nodeKey, node.data);
};
const getNodeClass = (node) => {
const nodeClassFunc = props.props.class;
if (!nodeClassFunc) {
return {};
}
let className;
if (shared.isFunction(nodeClassFunc)) {
const { data } = node;
className = nodeClassFunc(data, node);
} else {
className = nodeClassFunc;
}
if (shared.isString(className)) {
return { [className]: true };
} else {
return className;
}
};
const handleSelectChange = (checked, indeterminate) => {
if (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) {
tree.ctx.emit("check-change", props.node.data, checked, indeterminate);
}
oldChecked.value = checked;
oldIndeterminate.value = indeterminate;
};
const handleClick = (e) => {
util.handleCurrentChange(tree.store, tree.ctx.emit, () => {
var _a;
const nodeKeyProp = (_a = tree == null ? void 0 : tree.props) == null ? void 0 : _a.nodeKey;
if (nodeKeyProp) {
const curNodeKey = getNodeKey(props.node);
tree.store.value.setCurrentNodeKey(curNodeKey);
} else {
tree.store.value.setCurrentNode(props.node);
}
});
tree.currentNode.value = props.node;
if (tree.props.expandOnClickNode) {
handleExpandIconClick();
}
if ((tree.props.checkOnClickNode || props.node.isLeaf && tree.props.checkOnClickLeaf && props.showCheckbox) && !props.node.disabled) {
handleCheckChange(!props.node.checked);
}
tree.ctx.emit("node-click", props.node.data, props.node, instance, e);
};
const handleContextMenu = (event) => {
var _a;
if ((_a = tree.instance.vnode.props) == null ? void 0 : _a["onNodeContextmenu"]) {
event.stopPropagation();
event.preventDefault();
}
tree.ctx.emit("node-contextmenu", event, props.node.data, props.node, instance);
};
const handleExpandIconClick = () => {
if (props.node.isLeaf)
return;
if (expanded.value) {
tree.ctx.emit("node-collapse", props.node.data, props.node, instance);
props.node.collapse();
} else {
props.node.expand(() => {
ctx.emit("node-expand", props.node.data, props.node, instance);
});
}
};
const handleCheckChange = (value) => {
props.node.setChecked(value, !(tree == null ? void 0 : tree.props.checkStrictly));
vue.nextTick(() => {
const store = tree.store.value;
tree.ctx.emit("check", props.node.data, {
checkedNodes: store.getCheckedNodes(),
checkedKeys: store.getCheckedKeys(),
halfCheckedNodes: store.getHalfCheckedNodes(),
halfCheckedKeys: store.getHalfCheckedKeys()
});
});
};
const handleChildNodeExpand = (nodeData, node, instance2) => {
broadcastExpanded(node);
tree.ctx.emit("node-expand", nodeData, node, instance2);
};
const handleDragStart = (event) => {
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragStart({ event, treeNode: props });
};
const handleDragOver = (event) => {
event.preventDefault();
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragOver({
event,
treeNode: { $el: node$.value, node: props.node }
});
};
const handleDrop = (event) => {
event.preventDefault();
};
const handleDragEnd = (event) => {
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragEnd(event);
};
return {
ns,
node$,
tree,
expanded,
childNodeRendered,
oldChecked,
oldIndeterminate,
getNodeKey,
getNodeClass,
handleSelectChange,
handleClick,
handleContextMenu,
handleExpandIconClick,
handleCheckChange,
handleChildNodeExpand,
handleDragStart,
handleDragOver,
handleDrop,
handleDragEnd,
CaretRight: iconsVue.CaretRight
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_loading = vue.resolveComponent("loading");
const _component_node_content = vue.resolveComponent("node-content");
const _component_el_tree_node = vue.resolveComponent("el-tree-node");
const _component_el_collapse_transition = vue.resolveComponent("el-collapse-transition");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref: "node$",
class: vue.normalizeClass([
_ctx.ns.b("node"),
_ctx.ns.is("expanded", _ctx.expanded),
_ctx.ns.is("current", _ctx.node.isCurrent),
_ctx.ns.is("hidden", !_ctx.node.visible),
_ctx.ns.is("focusable", !_ctx.node.disabled),
_ctx.ns.is("checked", !_ctx.node.disabled && _ctx.node.checked),
_ctx.getNodeClass(_ctx.node)
]),
role: "treeitem",
tabindex: "-1",
"aria-expanded": _ctx.expanded,
"aria-disabled": _ctx.node.disabled,
"aria-checked": _ctx.node.checked,
draggable: _ctx.tree.props.draggable,
"data-key": _ctx.getNodeKey(_ctx.node),
onClick: vue.withModifiers(_ctx.handleClick, ["stop"]),
onContextmenu: _ctx.handleContextMenu,
onDragstart: vue.withModifiers(_ctx.handleDragStart, ["stop"]),
onDragover: vue.withModifiers(_ctx.handleDragOver, ["stop"]),
onDragend: vue.withModifiers(_ctx.handleDragEnd, ["stop"]),
onDrop: vue.withModifiers(_ctx.handleDrop, ["stop"])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.be("node", "content")),
style: vue.normalizeStyle({ paddingLeft: (_ctx.node.level - 1) * _ctx.tree.props.indent + "px" })
}, [
_ctx.tree.props.icon || _ctx.CaretRight ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 0,
class: vue.normalizeClass([
_ctx.ns.be("node", "expand-icon"),
_ctx.ns.is("leaf", _ctx.node.isLeaf),
{
expanded: !_ctx.node.isLeaf && _ctx.expanded
}
]),
onClick: vue.withModifiers(_ctx.handleExpandIconClick, ["stop"])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tree.props.icon || _ctx.CaretRight)))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
_ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
key: 1,
"model-value": _ctx.node.checked,
indeterminate: _ctx.node.indeterminate,
disabled: !!_ctx.node.disabled,
onClick: vue.withModifiers(() => {
}, ["stop"]),
onChange: _ctx.handleCheckChange
}, null, 8, ["model-value", "indeterminate", "disabled", "onClick", "onChange"])) : vue.createCommentVNode("v-if", true),
_ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 2,
class: vue.normalizeClass([_ctx.ns.be("node", "loading-icon"), _ctx.ns.is("loading")])
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_loading)
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_node_content, {
node: _ctx.node,
"render-content": _ctx.renderContent
}, null, 8, ["node", "render-content"])
], 6),
vue.createVNode(_component_el_collapse_transition, null, {
default: vue.withCtx(() => [
!_ctx.renderAfterExpand || _ctx.childNodeRendered ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.ns.be("node", "children")),
role: "group",
"aria-expanded": _ctx.expanded,
onClick: vue.withModifiers(() => {
}, ["stop"])
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.childNodes, (child) => {
return vue.openBlock(), vue.createBlock(_component_el_tree_node, {
key: _ctx.getNodeKey(child),
"render-content": _ctx.renderContent,
"render-after-expand": _ctx.renderAfterExpand,
"show-checkbox": _ctx.showCheckbox,
node: child,
accordion: _ctx.accordion,
props: _ctx.props,
onNodeExpand: _ctx.handleChildNodeExpand
}, null, 8, ["render-content", "render-after-expand", "show-checkbox", "node", "accordion", "props", "onNodeExpand"]);
}), 128))
], 10, ["aria-expanded", "onClick"])), [
[vue.vShow, _ctx.expanded]
]) : vue.createCommentVNode("v-if", true)
]),
_: 1
})
], 42, ["aria-expanded", "aria-disabled", "aria-checked", "draggable", "data-key", "onClick", "onContextmenu", "onDragstart", "onDragover", "onDragend", "onDrop"])), [
[vue.vShow, _ctx.node.visible]
]);
}
var ElTreeNode = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "tree-node.vue"]]);
exports["default"] = ElTreeNode;
//# sourceMappingURL=tree-node.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,80 @@
import Node from './model/node';
import type { ComponentInternalInstance, PropType } from 'vue';
import type { RootTreeType, TreeNodeData, TreeOptionProps } from './tree.type';
import type { CheckboxValueType } from 'element-plus/es/components/checkbox';
declare const _default: import("vue").DefineComponent<{
node: {
type: typeof Node;
default: () => {};
};
props: {
type: PropType<TreeOptionProps>;
default: () => {};
};
accordion: BooleanConstructor;
renderContent: FunctionConstructor;
renderAfterExpand: BooleanConstructor;
showCheckbox: BooleanConstructor;
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
node$: import("vue").Ref<HTMLElement | undefined>;
tree: RootTreeType;
expanded: import("vue").Ref<boolean>;
childNodeRendered: import("vue").Ref<boolean>;
oldChecked: import("vue").Ref<boolean | undefined>;
oldIndeterminate: import("vue").Ref<boolean | undefined>;
getNodeKey: (node: Node) => any;
getNodeClass: (node: Node) => {
[key: string]: boolean;
};
handleSelectChange: (checked: boolean, indeterminate: boolean) => void;
handleClick: (e: MouseEvent) => void;
handleContextMenu: (event: Event) => void;
handleExpandIconClick: () => void;
handleCheckChange: (value: CheckboxValueType) => void;
handleChildNodeExpand: (nodeData: TreeNodeData, node: Node, instance: ComponentInternalInstance) => void;
handleDragStart: (event: DragEvent) => void;
handleDragOver: (event: DragEvent) => void;
handleDrop: (event: DragEvent) => void;
handleDragEnd: (event: DragEvent) => void;
CaretRight: any;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "node-expand"[], "node-expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
node: {
type: typeof Node;
default: () => {};
};
props: {
type: PropType<TreeOptionProps>;
default: () => {};
};
accordion: BooleanConstructor;
renderContent: FunctionConstructor;
renderAfterExpand: BooleanConstructor;
showCheckbox: BooleanConstructor;
}>> & {
"onNode-expand"?: ((...args: any[]) => any) | undefined;
}, {
props: TreeOptionProps;
node: Node;
accordion: boolean;
renderAfterExpand: boolean;
showCheckbox: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,348 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var token = require('../../select/src/token.js');
var treeStore = require('./model/tree-store.js');
var util = require('./model/util.js');
var treeNode = require('./tree-node.js');
var useNodeExpandEventBroadcast = require('./model/useNodeExpandEventBroadcast.js');
var useDragNode = require('./model/useDragNode.js');
var useKeydown = require('./model/useKeydown.js');
var tokens = require('./tokens.js');
var lodashUnified = require('lodash-unified');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var runtime = require('../../../utils/vue/props/runtime.js');
var icon = require('../../../utils/vue/icon.js');
var index = require('../../../hooks/use-locale/index.js');
var index$1 = require('../../../hooks/use-namespace/index.js');
var constants = require('../../form/src/constants.js');
const _sfc_main = vue.defineComponent({
name: "ElTree",
components: { ElTreeNode: treeNode["default"] },
props: {
data: {
type: runtime.definePropType(Array),
default: () => []
},
emptyText: {
type: String
},
renderAfterExpand: {
type: Boolean,
default: true
},
nodeKey: String,
checkStrictly: Boolean,
defaultExpandAll: Boolean,
expandOnClickNode: {
type: Boolean,
default: true
},
checkOnClickNode: Boolean,
checkOnClickLeaf: {
type: Boolean,
default: true
},
checkDescendants: Boolean,
autoExpandParent: {
type: Boolean,
default: true
},
defaultCheckedKeys: Array,
defaultExpandedKeys: Array,
currentNodeKey: [String, Number],
renderContent: {
type: runtime.definePropType(Function)
},
showCheckbox: Boolean,
draggable: Boolean,
allowDrag: {
type: runtime.definePropType(Function)
},
allowDrop: {
type: runtime.definePropType(Function)
},
props: {
type: Object,
default: () => ({
children: "children",
label: "label",
disabled: "disabled"
})
},
lazy: Boolean,
highlightCurrent: Boolean,
load: Function,
filterNodeMethod: Function,
accordion: Boolean,
indent: {
type: Number,
default: 18
},
icon: {
type: icon.iconPropType
}
},
emits: [
"check-change",
"current-change",
"node-click",
"node-contextmenu",
"node-collapse",
"node-expand",
"check",
"node-drag-start",
"node-drag-end",
"node-drop",
"node-drag-leave",
"node-drag-enter",
"node-drag-over"
],
setup(props, ctx) {
const { t } = index.useLocale();
const ns = index$1.useNamespace("tree");
const selectInfo = vue.inject(token.selectKey, null);
const store = vue.ref(new treeStore["default"]({
key: props.nodeKey,
data: props.data,
lazy: props.lazy,
props: props.props,
load: props.load,
currentNodeKey: props.currentNodeKey,
checkStrictly: props.checkStrictly,
checkDescendants: props.checkDescendants,
defaultCheckedKeys: props.defaultCheckedKeys,
defaultExpandedKeys: props.defaultExpandedKeys,
autoExpandParent: props.autoExpandParent,
defaultExpandAll: props.defaultExpandAll,
filterNodeMethod: props.filterNodeMethod
}));
store.value.initialize();
const root = vue.ref(store.value.root);
const currentNode = vue.ref(null);
const el$ = vue.ref(null);
const dropIndicator$ = vue.ref(null);
const { broadcastExpanded } = useNodeExpandEventBroadcast.useNodeExpandEventBroadcast(props);
const { dragState } = useDragNode.useDragNodeHandler({
props,
ctx,
el$,
dropIndicator$,
store
});
useKeydown.useKeydown({ el$ }, store);
const isEmpty = vue.computed(() => {
const { childNodes } = root.value;
const hasFilteredOptions = selectInfo ? selectInfo.hasFilteredOptions !== 0 : false;
return (!childNodes || childNodes.length === 0 || childNodes.every(({ visible }) => !visible)) && !hasFilteredOptions;
});
vue.watch(() => props.currentNodeKey, (newVal) => {
store.value.setCurrentNodeKey(newVal != null ? newVal : null);
});
vue.watch(() => props.defaultCheckedKeys, (newVal, oldVal) => {
if (lodashUnified.isEqual(newVal, oldVal))
return;
store.value.setDefaultCheckedKey(newVal != null ? newVal : []);
});
vue.watch(() => props.defaultExpandedKeys, (newVal) => {
store.value.setDefaultExpandedKeys(newVal != null ? newVal : []);
});
vue.watch(() => props.data, (newVal) => {
store.value.setData(newVal);
}, { deep: true });
vue.watch(() => props.checkStrictly, (newVal) => {
store.value.checkStrictly = newVal;
});
const filter = (value) => {
if (!props.filterNodeMethod)
throw new Error("[Tree] filterNodeMethod is required when filter");
store.value.filter(value);
};
const getNodeKey = (node) => {
return util.getNodeKey(props.nodeKey, node.data);
};
const getNodePath = (data) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in getNodePath");
const node = store.value.getNode(data);
if (!node)
return [];
const path = [node.data];
let parent = node.parent;
while (parent && parent !== root.value) {
path.push(parent.data);
parent = parent.parent;
}
return path.reverse();
};
const getCheckedNodes = (leafOnly, includeHalfChecked) => {
return store.value.getCheckedNodes(leafOnly, includeHalfChecked);
};
const getCheckedKeys = (leafOnly) => {
return store.value.getCheckedKeys(leafOnly);
};
const getCurrentNode = () => {
const currentNode2 = store.value.getCurrentNode();
return currentNode2 ? currentNode2.data : null;
};
const getCurrentKey = () => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in getCurrentKey");
const currentNode2 = getCurrentNode();
return currentNode2 ? currentNode2[props.nodeKey] : null;
};
const setCheckedNodes = (nodes, leafOnly) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCheckedNodes");
store.value.setCheckedNodes(nodes, leafOnly);
};
const setCheckedKeys = (keys, leafOnly) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCheckedKeys");
store.value.setCheckedKeys(keys, leafOnly);
};
const setChecked = (data, checked, deep) => {
store.value.setChecked(data, checked, deep);
};
const getHalfCheckedNodes = () => {
return store.value.getHalfCheckedNodes();
};
const getHalfCheckedKeys = () => {
return store.value.getHalfCheckedKeys();
};
const setCurrentNode = (node, shouldAutoExpandParent = true) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCurrentNode");
util.handleCurrentChange(store, ctx.emit, () => {
broadcastExpanded(node);
store.value.setUserCurrentNode(node, shouldAutoExpandParent);
});
};
const setCurrentKey = (key, shouldAutoExpandParent = true) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCurrentKey");
util.handleCurrentChange(store, ctx.emit, () => {
broadcastExpanded();
store.value.setCurrentNodeKey(key != null ? key : null, shouldAutoExpandParent);
});
};
const getNode = (data) => {
return store.value.getNode(data);
};
const remove = (data) => {
store.value.remove(data);
};
const append = (data, parentNode) => {
store.value.append(data, parentNode);
};
const insertBefore = (data, refNode) => {
store.value.insertBefore(data, refNode);
};
const insertAfter = (data, refNode) => {
store.value.insertAfter(data, refNode);
};
const handleNodeExpand = (nodeData, node, instance) => {
broadcastExpanded(node);
ctx.emit("node-expand", nodeData, node, instance);
};
const updateKeyChildren = (key, data) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in updateKeyChild");
store.value.updateChildren(key, data);
};
vue.provide(tokens.ROOT_TREE_INJECTION_KEY, {
ctx,
props,
store,
root,
currentNode,
instance: vue.getCurrentInstance()
});
vue.provide(constants.formItemContextKey, void 0);
return {
ns,
store,
root,
currentNode,
dragState,
el$,
dropIndicator$,
isEmpty,
filter,
getNodeKey,
getNodePath,
getCheckedNodes,
getCheckedKeys,
getCurrentNode,
getCurrentKey,
setCheckedNodes,
setCheckedKeys,
setChecked,
getHalfCheckedNodes,
getHalfCheckedKeys,
setCurrentNode,
setCurrentKey,
t,
getNode,
remove,
append,
insertBefore,
insertAfter,
handleNodeExpand,
updateKeyChildren
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tree_node = vue.resolveComponent("el-tree-node");
return vue.openBlock(), vue.createElementBlock("div", {
ref: "el$",
class: vue.normalizeClass([
_ctx.ns.b(),
_ctx.ns.is("dragging", !!_ctx.dragState.draggingNode),
_ctx.ns.is("drop-not-allow", !_ctx.dragState.allowDrop),
_ctx.ns.is("drop-inner", _ctx.dragState.dropType === "inner"),
{ [_ctx.ns.m("highlight-current")]: _ctx.highlightCurrent }
]),
role: "tree"
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.root.childNodes, (child) => {
return vue.openBlock(), vue.createBlock(_component_el_tree_node, {
key: _ctx.getNodeKey(child),
node: child,
props: _ctx.props,
accordion: _ctx.accordion,
"render-after-expand": _ctx.renderAfterExpand,
"show-checkbox": _ctx.showCheckbox,
"render-content": _ctx.renderContent,
onNodeExpand: _ctx.handleNodeExpand
}, null, 8, ["node", "props", "accordion", "render-after-expand", "show-checkbox", "render-content", "onNodeExpand"]);
}), 128)),
_ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.ns.e("empty-block"))
}, [
vue.renderSlot(_ctx.$slots, "empty", {}, () => {
var _a;
return [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.ns.e("empty-text"))
}, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 3)
];
})
], 2)) : vue.createCommentVNode("v-if", true),
vue.withDirectives(vue.createElementVNode("div", {
ref: "dropIndicator$",
class: vue.normalizeClass(_ctx.ns.e("drop-indicator"))
}, null, 2), [
[vue.vShow, _ctx.dragState.showDropIndicator]
])
], 2);
}
var Tree = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "tree.vue"]]);
exports["default"] = Tree;
//# sourceMappingURL=tree.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,102 @@
import type { Component, ComponentInternalInstance, Ref, SetupContext, VNode, h } from 'vue';
import type Node from './model/node';
import type TreeStore from './model/tree-store';
export interface RootTreeType {
ctx: SetupContext<any>;
props: TreeComponentProps;
store: Ref<TreeStore>;
root: Ref<Node>;
currentNode: Ref<Node>;
instance: ComponentInternalInstance;
}
export type hType = typeof h;
export type TreeData = TreeNodeData[];
export type TreeKey = string | number;
export interface FakeNode {
data: TreeNodeData;
}
export type TreeNodeData = Record<string, any>;
export interface TreeNodeLoadedDefaultProps {
checked?: boolean;
}
export interface TreeNodeChildState {
all: boolean;
none: boolean;
allWithoutDisable: boolean;
half: boolean;
}
export interface TreeNodeOptions {
data: TreeNodeData;
store: TreeStore;
parent?: Node;
}
export interface TreeStoreNodesMap {
[key: string]: Node;
}
export interface TreeStoreOptions {
key?: TreeKey;
data: TreeData;
lazy: boolean;
props: TreeOptionProps;
load?: LoadFunction;
currentNodeKey?: TreeKey;
checkStrictly: boolean;
checkDescendants: boolean;
defaultCheckedKeys?: TreeKey[];
defaultExpandedKeys?: TreeKey[];
autoExpandParent: boolean;
defaultExpandAll: boolean;
filterNodeMethod?: FilterNodeMethodFunction;
}
export interface TreeOptionProps {
children?: string;
label?: string | ((data: TreeNodeData, node: Node) => string);
disabled?: string | ((data: TreeNodeData, node: Node) => boolean);
isLeaf?: string | ((data: TreeNodeData, node: Node) => boolean);
class?: (data: TreeNodeData, node: Node) => string | {
[key: string]: boolean;
};
}
export type RenderContentFunction = (h: hType, context: RenderContentContext) => VNode | VNode[];
export interface RenderContentContext {
_self: ComponentInternalInstance;
node: Node;
data: TreeNodeData;
store: TreeStore;
}
export type AllowDragFunction = (node: Node) => boolean;
export type AllowDropType = 'inner' | 'prev' | 'next';
export type AllowDropFunction = (draggingNode: Node, dropNode: Node, type: AllowDropType) => boolean;
export type LoadFunction = (rootNode: Node, loadedCallback: (data: TreeData) => void, stopLoading: () => void) => void;
export type FilterValue = any;
export type FilterNodeMethodFunction = (value: FilterValue, data: TreeNodeData, child: Node) => boolean;
export interface TreeComponentProps {
data: TreeData;
emptyText: string;
renderAfterExpand: boolean;
nodeKey: string;
checkStrictly: boolean;
expandOnClickNode: boolean;
defaultExpandAll: boolean;
checkOnClickNode: boolean;
checkOnClickLeaf: boolean;
checkDescendants: boolean;
autoExpandParent: boolean;
defaultCheckedKeys: TreeKey[];
defaultExpandedKeys: TreeKey[];
currentNodeKey: TreeKey;
renderContent: RenderContentFunction;
showCheckbox: boolean;
draggable: boolean;
allowDrag: AllowDragFunction;
allowDrop: AllowDropFunction;
props: TreeOptionProps;
lazy: boolean;
highlightCurrent: boolean;
load: LoadFunction;
filterNodeMethod: FilterNodeMethodFunction;
accordion: boolean;
indent: number;
icon: string | Component;
}
export type NodeDropType = 'before' | 'after' | 'inner' | 'none';

View File

@@ -0,0 +1,3 @@
'use strict';
//# sourceMappingURL=tree.type.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"tree.type.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

View File

@@ -0,0 +1,524 @@
import type Node from './model/node';
import type { ComponentInternalInstance, PropType } from 'vue';
import type { Nullable } from 'element-plus/es/utils';
import type { AllowDragFunction, AllowDropFunction, FilterValue, RenderContentFunction, TreeComponentProps, TreeData, TreeKey, TreeNodeData } from './tree.type';
declare const _default: import("vue").DefineComponent<{
data: {
type: PropType<TreeData>;
default: () => never[];
};
emptyText: {
type: StringConstructor;
};
renderAfterExpand: {
type: BooleanConstructor;
default: boolean;
};
nodeKey: StringConstructor;
checkStrictly: BooleanConstructor;
defaultExpandAll: BooleanConstructor;
expandOnClickNode: {
type: BooleanConstructor;
default: boolean;
};
checkOnClickNode: BooleanConstructor;
checkOnClickLeaf: {
type: BooleanConstructor;
default: boolean;
};
checkDescendants: BooleanConstructor;
autoExpandParent: {
type: BooleanConstructor;
default: boolean;
};
defaultCheckedKeys: PropType<TreeComponentProps["defaultCheckedKeys"]>;
defaultExpandedKeys: PropType<TreeComponentProps["defaultExpandedKeys"]>;
currentNodeKey: PropType<string | number>;
renderContent: {
type: PropType<RenderContentFunction>;
};
showCheckbox: BooleanConstructor;
draggable: BooleanConstructor;
allowDrag: {
type: PropType<AllowDragFunction>;
};
allowDrop: {
type: PropType<AllowDropFunction>;
};
props: {
type: PropType<TreeComponentProps["props"]>;
default: () => {
children: string;
label: string;
disabled: string;
};
};
lazy: BooleanConstructor;
highlightCurrent: BooleanConstructor;
load: PropType<TreeComponentProps["load"]>;
filterNodeMethod: PropType<TreeComponentProps["filterNodeMethod"]>;
accordion: BooleanConstructor;
indent: {
type: NumberConstructor;
default: number;
};
icon: {
type: PropType<string | import("vue").Component>;
};
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
store: import("vue").Ref<{
currentNode: {
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: TreeNodeData;
expanded: boolean;
parent: any | null;
visible: boolean;
isCurrent: boolean;
store: any;
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: any[];
loading: boolean;
initialize: () => void;
setData: (data: TreeNodeData) => void;
readonly label: string;
readonly key: TreeKey | null | undefined;
readonly disabled: boolean;
readonly nextSibling: any | null;
readonly previousSibling: any | null;
contains: (target: Node, deep?: boolean) => boolean;
remove: () => void;
insertChild: (child?: import("./tree.type").FakeNode | Node, index?: number, batch?: boolean) => void;
insertBefore: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
insertAfter: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
removeChild: (child: Node) => void;
removeChildByData: (data: TreeNodeData | null) => void;
expand: (callback?: (() => void) | null, expandParent?: boolean) => void;
doCreateChildren: (array: TreeNodeData[], defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
collapse: () => void;
shouldLoadData: () => boolean;
updateLeafState: () => void;
setChecked: (value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean) => void;
getChildren: (forceInit?: boolean) => TreeNodeData | TreeNodeData[] | null;
updateChildren: () => void;
loadData: (callback: (data?: TreeNodeData[]) => void, defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
eachNode: (callback: (node: Node) => void) => void;
reInitChecked: () => void;
} | null;
currentNodeKey: TreeKey | null;
nodesMap: import("./tree.type").TreeStoreNodesMap;
root: {
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: TreeNodeData;
expanded: boolean;
parent: any | null;
visible: boolean;
isCurrent: boolean;
store: any;
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: any[];
loading: boolean;
initialize: () => void;
setData: (data: TreeNodeData) => void;
readonly label: string;
readonly key: TreeKey | null | undefined;
readonly disabled: boolean;
readonly nextSibling: any | null;
readonly previousSibling: any | null;
contains: (target: Node, deep?: boolean) => boolean;
remove: () => void;
insertChild: (child?: import("./tree.type").FakeNode | Node, index?: number, batch?: boolean) => void;
insertBefore: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
insertAfter: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
removeChild: (child: Node) => void;
removeChildByData: (data: TreeNodeData | null) => void;
expand: (callback?: (() => void) | null, expandParent?: boolean) => void;
doCreateChildren: (array: TreeNodeData[], defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
collapse: () => void;
shouldLoadData: () => boolean;
updateLeafState: () => void;
setChecked: (value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean) => void;
getChildren: (forceInit?: boolean) => TreeNodeData | TreeNodeData[] | null;
updateChildren: () => void;
loadData: (callback: (data?: TreeNodeData[]) => void, defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
eachNode: (callback: (node: Node) => void) => void;
reInitChecked: () => void;
};
data: TreeNodeData[];
lazy: boolean;
load?: import("./tree.type").LoadFunction | undefined;
filterNodeMethod?: import("./tree.type").FilterNodeMethodFunction | undefined;
key: TreeKey;
defaultCheckedKeys?: TreeKey[] | undefined;
checkStrictly: boolean;
defaultExpandedKeys?: TreeKey[] | undefined;
autoExpandParent: boolean;
defaultExpandAll: boolean;
checkDescendants: boolean;
props: {
children?: string | undefined;
label?: (string | ((data: TreeNodeData, node: Node) => string)) | undefined;
disabled?: (string | ((data: TreeNodeData, node: Node) => boolean)) | undefined;
isLeaf?: (string | ((data: TreeNodeData, node: Node) => boolean)) | undefined;
class?: ((data: TreeNodeData, node: Node) => string | {
[key: string]: boolean;
}) | undefined;
};
initialize: () => void;
filter: (value: FilterValue) => void;
setData: (newVal: TreeData) => void;
getNode: (data: TreeKey | TreeNodeData | Node) => Node;
insertBefore: (data: TreeNodeData, refData: TreeKey | TreeNodeData | Node) => void;
insertAfter: (data: TreeNodeData, refData: TreeKey | TreeNodeData | Node) => void;
remove: (data: TreeNodeData | Node) => void;
append: (data: TreeNodeData, parentData: TreeNodeData | TreeKey | Node) => void;
_initDefaultCheckedNodes: () => void;
_initDefaultCheckedNode: (node: Node) => void;
setDefaultCheckedKey: (newVal: TreeKey[]) => void;
registerNode: (node: Node) => void;
deregisterNode: (node: Node) => void;
getCheckedNodes: (leafOnly?: boolean, includeHalfChecked?: boolean) => TreeNodeData[];
getCheckedKeys: (leafOnly?: boolean) => TreeKey[];
getHalfCheckedNodes: () => TreeNodeData[];
getHalfCheckedKeys: () => TreeKey[];
_getAllNodes: () => Node[];
updateChildren: (key: TreeKey, data: TreeData) => void;
_setCheckedKeys: (key: TreeKey, leafOnly: boolean | undefined, checkedKeys: {
[key: string]: boolean;
}) => void;
setCheckedNodes: (array: Node[], leafOnly?: boolean) => void;
setCheckedKeys: (keys: TreeKey[], leafOnly?: boolean) => void;
setDefaultExpandedKeys: (keys: TreeKey[]) => void;
setChecked: (data: TreeKey | TreeNodeData, checked: boolean, deep: boolean) => void;
getCurrentNode: () => Node | null;
setCurrentNode: (currentNode: Node) => void;
setUserCurrentNode: (node: Node, shouldAutoExpandParent?: boolean) => void;
setCurrentNodeKey: (key: TreeKey | null, shouldAutoExpandParent?: boolean) => void;
}>;
root: import("vue").Ref<{
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: TreeNodeData;
expanded: boolean;
parent: any | null;
visible: boolean;
isCurrent: boolean;
store: any;
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: any[];
loading: boolean;
initialize: () => void;
setData: (data: TreeNodeData) => void;
readonly label: string;
readonly key: TreeKey | null | undefined;
readonly disabled: boolean;
readonly nextSibling: any | null;
readonly previousSibling: any | null;
contains: (target: Node, deep?: boolean) => boolean;
remove: () => void;
insertChild: (child?: import("./tree.type").FakeNode | Node, index?: number, batch?: boolean) => void;
insertBefore: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
insertAfter: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
removeChild: (child: Node) => void;
removeChildByData: (data: TreeNodeData | null) => void;
expand: (callback?: (() => void) | null, expandParent?: boolean) => void;
doCreateChildren: (array: TreeNodeData[], defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
collapse: () => void;
shouldLoadData: () => boolean;
updateLeafState: () => void;
setChecked: (value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean) => void;
getChildren: (forceInit?: boolean) => TreeNodeData | TreeNodeData[] | null;
updateChildren: () => void;
loadData: (callback: (data?: TreeNodeData[]) => void, defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
eachNode: (callback: (node: Node) => void) => void;
reInitChecked: () => void;
}>;
currentNode: import("vue").Ref<{
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: TreeNodeData;
expanded: boolean;
parent: any | null;
visible: boolean;
isCurrent: boolean;
store: any;
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: any[];
loading: boolean;
initialize: () => void;
setData: (data: TreeNodeData) => void;
readonly label: string;
readonly key: TreeKey | null | undefined;
readonly disabled: boolean;
readonly nextSibling: any | null;
readonly previousSibling: any | null;
contains: (target: Node, deep?: boolean) => boolean;
remove: () => void;
insertChild: (child?: import("./tree.type").FakeNode | Node, index?: number, batch?: boolean) => void;
insertBefore: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
insertAfter: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
removeChild: (child: Node) => void;
removeChildByData: (data: TreeNodeData | null) => void;
expand: (callback?: (() => void) | null, expandParent?: boolean) => void;
doCreateChildren: (array: TreeNodeData[], defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
collapse: () => void;
shouldLoadData: () => boolean;
updateLeafState: () => void;
setChecked: (value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean) => void;
getChildren: (forceInit?: boolean) => TreeNodeData | TreeNodeData[] | null;
updateChildren: () => void;
loadData: (callback: (data?: TreeNodeData[]) => void, defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
eachNode: (callback: (node: Node) => void) => void;
reInitChecked: () => void;
} | null>;
dragState: import("vue").Ref<{
allowDrop: boolean;
dropType: import("./tree.type").NodeDropType | null;
draggingNode: {
node: {
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: TreeNodeData;
expanded: boolean;
parent: any | null;
visible: boolean;
isCurrent: boolean;
store: any;
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: any[];
loading: boolean;
initialize: () => void;
setData: (data: TreeNodeData) => void;
readonly label: string;
readonly key: TreeKey | null | undefined;
readonly disabled: boolean;
readonly nextSibling: any | null;
readonly previousSibling: any | null;
contains: (target: Node, deep?: boolean) => boolean;
remove: () => void;
insertChild: (child?: import("./tree.type").FakeNode | Node, index?: number, batch?: boolean) => void;
insertBefore: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
insertAfter: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
removeChild: (child: Node) => void;
removeChildByData: (data: TreeNodeData | null) => void;
expand: (callback?: (() => void) | null, expandParent?: boolean) => void;
doCreateChildren: (array: TreeNodeData[], defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
collapse: () => void;
shouldLoadData: () => boolean;
updateLeafState: () => void;
setChecked: (value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean) => void;
getChildren: (forceInit?: boolean) => TreeNodeData | TreeNodeData[] | null;
updateChildren: () => void;
loadData: (callback: (data?: TreeNodeData[]) => void, defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
eachNode: (callback: (node: Node) => void) => void;
reInitChecked: () => void;
};
$el?: HTMLElement | undefined;
} | null;
showDropIndicator: boolean;
dropNode: {
node: {
id: number;
text: string | null;
checked: boolean;
indeterminate: boolean;
data: TreeNodeData;
expanded: boolean;
parent: any | null;
visible: boolean;
isCurrent: boolean;
store: any;
isLeafByUser: boolean | undefined;
isLeaf: boolean | undefined;
canFocus: boolean;
level: number;
loaded: boolean;
childNodes: any[];
loading: boolean;
initialize: () => void;
setData: (data: TreeNodeData) => void;
readonly label: string;
readonly key: TreeKey | null | undefined;
readonly disabled: boolean;
readonly nextSibling: any | null;
readonly previousSibling: any | null;
contains: (target: Node, deep?: boolean) => boolean;
remove: () => void;
insertChild: (child?: import("./tree.type").FakeNode | Node, index?: number, batch?: boolean) => void;
insertBefore: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
insertAfter: (child: import("./tree.type").FakeNode | Node, ref: Node) => void;
removeChild: (child: Node) => void;
removeChildByData: (data: TreeNodeData | null) => void;
expand: (callback?: (() => void) | null, expandParent?: boolean) => void;
doCreateChildren: (array: TreeNodeData[], defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
collapse: () => void;
shouldLoadData: () => boolean;
updateLeafState: () => void;
setChecked: (value?: boolean | string, deep?: boolean, recursion?: boolean, passValue?: boolean) => void;
getChildren: (forceInit?: boolean) => TreeNodeData | TreeNodeData[] | null;
updateChildren: () => void;
loadData: (callback: (data?: TreeNodeData[]) => void, defaultProps?: import("./tree.type").TreeNodeLoadedDefaultProps) => void;
eachNode: (callback: (node: Node) => void) => void;
reInitChecked: () => void;
};
$el?: HTMLElement | undefined;
} | null;
}>;
el$: import("vue").Ref<Nullable<HTMLElement>>;
dropIndicator$: import("vue").Ref<Nullable<HTMLElement>>;
isEmpty: import("vue").ComputedRef<boolean>;
filter: (value: FilterValue) => void;
getNodeKey: (node: Node) => any;
getNodePath: (data: TreeKey | TreeNodeData) => TreeNodeData[];
getCheckedNodes: (leafOnly?: boolean, includeHalfChecked?: boolean) => TreeNodeData[];
getCheckedKeys: (leafOnly?: boolean) => TreeKey[];
getCurrentNode: () => TreeNodeData | null;
getCurrentKey: () => TreeKey | null;
setCheckedNodes: (nodes: Node[], leafOnly?: boolean) => void;
setCheckedKeys: (keys: TreeKey[], leafOnly?: boolean) => void;
setChecked: (data: TreeKey | TreeNodeData, checked: boolean, deep: boolean) => void;
getHalfCheckedNodes: () => TreeNodeData[];
getHalfCheckedKeys: () => TreeKey[];
setCurrentNode: (node: Node, shouldAutoExpandParent?: boolean) => void;
setCurrentKey: (key?: TreeKey, shouldAutoExpandParent?: boolean) => void;
t: import("element-plus/es/hooks").Translator;
getNode: (data: TreeKey | TreeNodeData) => Node;
remove: (data: TreeNodeData | Node) => void;
append: (data: TreeNodeData, parentNode: TreeNodeData | TreeKey | Node) => void;
insertBefore: (data: TreeNodeData, refNode: TreeKey | TreeNodeData | Node) => void;
insertAfter: (data: TreeNodeData, refNode: TreeKey | TreeNodeData | Node) => void;
handleNodeExpand: (nodeData: TreeNodeData, node: Node, instance: ComponentInternalInstance) => void;
updateKeyChildren: (key: TreeKey, data: TreeData) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
data: {
type: PropType<TreeData>;
default: () => never[];
};
emptyText: {
type: StringConstructor;
};
renderAfterExpand: {
type: BooleanConstructor;
default: boolean;
};
nodeKey: StringConstructor;
checkStrictly: BooleanConstructor;
defaultExpandAll: BooleanConstructor;
expandOnClickNode: {
type: BooleanConstructor;
default: boolean;
};
checkOnClickNode: BooleanConstructor;
checkOnClickLeaf: {
type: BooleanConstructor;
default: boolean;
};
checkDescendants: BooleanConstructor;
autoExpandParent: {
type: BooleanConstructor;
default: boolean;
};
defaultCheckedKeys: PropType<TreeComponentProps["defaultCheckedKeys"]>;
defaultExpandedKeys: PropType<TreeComponentProps["defaultExpandedKeys"]>;
currentNodeKey: PropType<string | number>;
renderContent: {
type: PropType<RenderContentFunction>;
};
showCheckbox: BooleanConstructor;
draggable: BooleanConstructor;
allowDrag: {
type: PropType<AllowDragFunction>;
};
allowDrop: {
type: PropType<AllowDropFunction>;
};
props: {
type: PropType<TreeComponentProps["props"]>;
default: () => {
children: string;
label: string;
disabled: string;
};
};
lazy: BooleanConstructor;
highlightCurrent: BooleanConstructor;
load: PropType<TreeComponentProps["load"]>;
filterNodeMethod: PropType<TreeComponentProps["filterNodeMethod"]>;
accordion: BooleanConstructor;
indent: {
type: NumberConstructor;
default: number;
};
icon: {
type: PropType<string | import("vue").Component>;
};
}>> & {
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
}, {
data: TreeData;
props: import("./tree.type").TreeOptionProps;
draggable: boolean;
checkStrictly: boolean;
lazy: boolean;
checkOnClickNode: boolean;
checkOnClickLeaf: boolean;
accordion: boolean;
defaultExpandAll: boolean;
indent: number;
autoExpandParent: boolean;
checkDescendants: boolean;
renderAfterExpand: boolean;
showCheckbox: boolean;
expandOnClickNode: boolean;
highlightCurrent: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,4 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/theme-chalk/el-tree.css';
import 'element-plus/es/components/checkbox/style/css';
import 'element-plus/es/components/text/style/css';

View File

@@ -0,0 +1,8 @@
'use strict';
require('../../base/style/css.js');
require('element-plus/theme-chalk/el-tree.css');
require('../../checkbox/style/css.js');
require('../../text/style/css.js');
//# sourceMappingURL=css.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

View File

@@ -0,0 +1,4 @@
import 'element-plus/es/components/base/style';
import 'element-plus/theme-chalk/src/tree.scss';
import 'element-plus/es/components/checkbox/style';
import 'element-plus/es/components/text/style';

View File

@@ -0,0 +1,8 @@
'use strict';
require('../../base/style/index.js');
require('element-plus/theme-chalk/src/tree.scss');
require('../../checkbox/style/index.js');
require('../../text/style/index.js');
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}