first commit
This commit is contained in:
root
+9
@@ -0,0 +1,9 @@
|
||||
import { SFCWithInstall } from "../../utils/vue/typescript.js";
|
||||
import "../../utils/index.js";
|
||||
import { _default } from "./src/tree.vue.js";
|
||||
import { TreeV2Instance } from "./src/instance.js";
|
||||
|
||||
//#region ../../packages/components/tree-v2/index.d.ts
|
||||
declare const ElTreeV2: SFCWithInstall<typeof _default>;
|
||||
//#endregion
|
||||
export { ElTreeV2, ElTreeV2 as default, type TreeV2Instance };
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { withInstall } from "../../utils/vue/install.mjs";
|
||||
import tree_default from "./src/tree.mjs";
|
||||
|
||||
//#region ../../packages/components/tree-v2/index.ts
|
||||
const ElTreeV2 = withInstall(tree_default);
|
||||
|
||||
//#endregion
|
||||
export { ElTreeV2, ElTreeV2 as default };
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.mjs","names":["TreeV2"],"sources":["../../../../../packages/components/tree-v2/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport TreeV2 from './src/tree.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElTreeV2: SFCWithInstall<typeof TreeV2> = withInstall(TreeV2)\nexport default ElTreeV2\n\nexport type { TreeV2Instance } from './src/instance'\n"],"mappings":";;;;AAKA,MAAa,WAA0C,YAAYA,aAAO"}
|
||||
Generated
Vendored
+169
@@ -0,0 +1,169 @@
|
||||
import { NODE_CHECK, NODE_CHECK_CHANGE, SetOperationEnum } from "../virtual-tree.mjs";
|
||||
import { getCurrentInstance, nextTick, ref, watch } from "vue";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/composables/useCheck.ts
|
||||
function useCheck(props, tree) {
|
||||
const checkedKeys = ref(/* @__PURE__ */ new Set());
|
||||
const indeterminateKeys = ref(/* @__PURE__ */ new Set());
|
||||
const { emit } = getCurrentInstance();
|
||||
watch([() => tree.value, () => props.defaultCheckedKeys], () => {
|
||||
return nextTick(() => {
|
||||
_setCheckedKeys(props.defaultCheckedKeys);
|
||||
});
|
||||
}, { immediate: true });
|
||||
const updateCheckedKeys = () => {
|
||||
if (!tree.value || !props.showCheckbox || props.checkStrictly) return;
|
||||
const { levelTreeNodeMap, maxLevel } = tree.value;
|
||||
const checkedKeySet = checkedKeys.value;
|
||||
const indeterminateKeySet = /* @__PURE__ */ new Set();
|
||||
for (let level = maxLevel; level >= 1; --level) {
|
||||
const nodes = levelTreeNodeMap.get(level);
|
||||
if (!nodes) continue;
|
||||
nodes.forEach((node) => {
|
||||
const children = node.children;
|
||||
let isEffectivelyChecked = !node.isLeaf || node.disabled || checkedKeySet.has(node.key);
|
||||
if (children) {
|
||||
let allChecked = true;
|
||||
let hasChecked = false;
|
||||
for (const childNode of children) {
|
||||
const key = childNode.key;
|
||||
if (!childNode.isEffectivelyChecked) isEffectivelyChecked = false;
|
||||
if (checkedKeySet.has(key)) hasChecked = true;
|
||||
else if (indeterminateKeySet.has(key)) {
|
||||
allChecked = false;
|
||||
hasChecked = true;
|
||||
break;
|
||||
} else allChecked = false;
|
||||
}
|
||||
if (allChecked) checkedKeySet.add(node.key);
|
||||
else if (hasChecked) {
|
||||
indeterminateKeySet.add(node.key);
|
||||
checkedKeySet.delete(node.key);
|
||||
} else {
|
||||
checkedKeySet.delete(node.key);
|
||||
indeterminateKeySet.delete(node.key);
|
||||
}
|
||||
}
|
||||
node.isEffectivelyChecked = isEffectivelyChecked;
|
||||
});
|
||||
}
|
||||
indeterminateKeys.value = indeterminateKeySet;
|
||||
};
|
||||
const isChecked = (node) => checkedKeys.value.has(node.key);
|
||||
const isIndeterminate = (node) => indeterminateKeys.value.has(node.key);
|
||||
const toggleCheckbox = (node, isChecked, nodeClick = true, immediateUpdate = true) => {
|
||||
const checkedKeySet = checkedKeys.value;
|
||||
const children = node.children;
|
||||
if (!props.checkStrictly && nodeClick && children?.length) isChecked = children.some((node) => !node.isEffectivelyChecked);
|
||||
const toggle = (node, checked) => {
|
||||
checkedKeySet[checked ? SetOperationEnum.ADD : SetOperationEnum.DELETE](node.key);
|
||||
const children = node.children;
|
||||
if (!props.checkStrictly && children) children.forEach((childNode) => {
|
||||
if (!childNode.disabled || childNode.children) toggle(childNode, checked);
|
||||
});
|
||||
};
|
||||
toggle(node, isChecked);
|
||||
if (immediateUpdate) updateCheckedKeys();
|
||||
if (nodeClick) afterNodeCheck(node, isChecked);
|
||||
};
|
||||
const afterNodeCheck = (node, checked) => {
|
||||
const { checkedNodes, checkedKeys } = getChecked();
|
||||
const { halfCheckedNodes, halfCheckedKeys } = getHalfChecked();
|
||||
emit(NODE_CHECK, node.data, {
|
||||
checkedKeys,
|
||||
checkedNodes,
|
||||
halfCheckedKeys,
|
||||
halfCheckedNodes
|
||||
});
|
||||
emit(NODE_CHECK_CHANGE, node.data, checked);
|
||||
};
|
||||
function getCheckedKeys(leafOnly = false) {
|
||||
return getChecked(leafOnly).checkedKeys;
|
||||
}
|
||||
function getCheckedNodes(leafOnly = false) {
|
||||
return getChecked(leafOnly).checkedNodes;
|
||||
}
|
||||
function getHalfCheckedKeys() {
|
||||
return getHalfChecked().halfCheckedKeys;
|
||||
}
|
||||
function getHalfCheckedNodes() {
|
||||
return getHalfChecked().halfCheckedNodes;
|
||||
}
|
||||
function getChecked(leafOnly = false) {
|
||||
const checkedNodes = [];
|
||||
const keys = [];
|
||||
if (tree?.value && props.showCheckbox) {
|
||||
const { treeNodeMap } = tree.value;
|
||||
checkedKeys.value.forEach((key) => {
|
||||
const node = treeNodeMap.get(key);
|
||||
if (node && (!leafOnly || leafOnly && node.isLeaf)) {
|
||||
keys.push(key);
|
||||
checkedNodes.push(node.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
return {
|
||||
checkedKeys: keys,
|
||||
checkedNodes
|
||||
};
|
||||
}
|
||||
function getHalfChecked() {
|
||||
const halfCheckedNodes = [];
|
||||
const halfCheckedKeys = [];
|
||||
if (tree?.value && props.showCheckbox) {
|
||||
const { treeNodeMap } = tree.value;
|
||||
indeterminateKeys.value.forEach((key) => {
|
||||
const node = treeNodeMap.get(key);
|
||||
if (node) {
|
||||
halfCheckedKeys.push(key);
|
||||
halfCheckedNodes.push(node.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
return {
|
||||
halfCheckedNodes,
|
||||
halfCheckedKeys
|
||||
};
|
||||
}
|
||||
function setCheckedKeys(keys) {
|
||||
checkedKeys.value.clear();
|
||||
indeterminateKeys.value.clear();
|
||||
nextTick(() => {
|
||||
_setCheckedKeys(keys);
|
||||
});
|
||||
}
|
||||
function setChecked(key, isChecked) {
|
||||
if (tree?.value && props.showCheckbox) {
|
||||
const node = tree.value.treeNodeMap.get(key);
|
||||
if (node) toggleCheckbox(node, isChecked, false);
|
||||
}
|
||||
}
|
||||
function _setCheckedKeys(keys) {
|
||||
if (tree?.value) {
|
||||
const { treeNodeMap } = tree.value;
|
||||
if (props.showCheckbox && treeNodeMap && keys?.length > 0) {
|
||||
for (const key of keys) {
|
||||
const node = treeNodeMap.get(key);
|
||||
if (node && !isChecked(node)) toggleCheckbox(node, true, false, false);
|
||||
}
|
||||
updateCheckedKeys();
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
updateCheckedKeys,
|
||||
toggleCheckbox,
|
||||
isChecked,
|
||||
isIndeterminate,
|
||||
getCheckedKeys,
|
||||
getCheckedNodes,
|
||||
getHalfCheckedKeys,
|
||||
getHalfCheckedNodes,
|
||||
setChecked,
|
||||
setCheckedKeys
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
export { useCheck };
|
||||
//# sourceMappingURL=useCheck.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+64
@@ -0,0 +1,64 @@
|
||||
import { isFunction } from "../../../../utils/types.mjs";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/composables/useFilter.ts
|
||||
function useFilter(props, tree) {
|
||||
const hiddenNodeKeySet = ref(/* @__PURE__ */ new Set([]));
|
||||
const hiddenExpandIconKeySet = ref(/* @__PURE__ */ new Set([]));
|
||||
const filterable = computed(() => {
|
||||
return isFunction(props.filterMethod);
|
||||
});
|
||||
function doFilter(query) {
|
||||
if (!filterable.value) return;
|
||||
const expandKeySet = /* @__PURE__ */ new Set();
|
||||
const hiddenExpandIconKeys = hiddenExpandIconKeySet.value;
|
||||
const hiddenKeys = hiddenNodeKeySet.value;
|
||||
const family = [];
|
||||
const nodes = tree.value?.treeNodes || [];
|
||||
const filter = props.filterMethod;
|
||||
hiddenKeys.clear();
|
||||
function traverse(nodes) {
|
||||
nodes.forEach((node) => {
|
||||
family.push(node);
|
||||
if (filter?.(query, node.data, node)) family.forEach((member) => {
|
||||
expandKeySet.add(member.key);
|
||||
member.expanded = true;
|
||||
});
|
||||
else {
|
||||
node.expanded = false;
|
||||
if (node.isLeaf) hiddenKeys.add(node.key);
|
||||
}
|
||||
const children = node.children;
|
||||
if (children) traverse(children);
|
||||
if (!node.isLeaf) {
|
||||
if (!expandKeySet.has(node.key)) hiddenKeys.add(node.key);
|
||||
else if (children) {
|
||||
let allHidden = true;
|
||||
for (const childNode of children) if (!hiddenKeys.has(childNode.key)) {
|
||||
allHidden = false;
|
||||
break;
|
||||
}
|
||||
if (allHidden) hiddenExpandIconKeys.add(node.key);
|
||||
else hiddenExpandIconKeys.delete(node.key);
|
||||
}
|
||||
}
|
||||
family.pop();
|
||||
});
|
||||
}
|
||||
traverse(nodes);
|
||||
return expandKeySet;
|
||||
}
|
||||
function isForceHiddenExpandIcon(node) {
|
||||
return hiddenExpandIconKeySet.value.has(node.key);
|
||||
}
|
||||
return {
|
||||
hiddenExpandIconKeySet,
|
||||
hiddenNodeKeySet,
|
||||
doFilter,
|
||||
isForceHiddenExpandIcon
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
export { useFilter };
|
||||
//# sourceMappingURL=useFilter.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"useFilter.mjs","names":[],"sources":["../../../../../../../packages/components/tree-v2/src/composables/useFilter.ts"],"sourcesContent":["import { computed, ref } from 'vue'\nimport { isFunction } from '@element-plus/utils'\n\nimport type { Ref } from 'vue'\nimport type { Tree, TreeKey, TreeNode, TreeProps } from '../types'\n\n// When the data volume is very large using filter will cause lag\n// I haven't found a better way to optimize it for now\n// Maybe this problem should be left to the server side\nexport function useFilter(props: TreeProps, tree: Ref<Tree | undefined>) {\n const hiddenNodeKeySet = ref<Set<TreeKey>>(new Set([]))\n const hiddenExpandIconKeySet = ref<Set<TreeKey>>(new Set([]))\n\n const filterable = computed(() => {\n return isFunction(props.filterMethod)\n })\n\n function doFilter(query: string) {\n if (!filterable.value) {\n return\n }\n const expandKeySet = new Set<TreeKey>()\n const hiddenExpandIconKeys = hiddenExpandIconKeySet.value\n const hiddenKeys = hiddenNodeKeySet.value\n const family: TreeNode[] = []\n const nodes = tree.value?.treeNodes || []\n const filter = props.filterMethod\n hiddenKeys.clear()\n function traverse(nodes: TreeNode[]) {\n nodes.forEach((node) => {\n family.push(node)\n if (filter?.(query, node.data, node)) {\n family.forEach((member) => {\n expandKeySet.add(member.key)\n member.expanded = true\n })\n } else {\n node.expanded = false\n if (node.isLeaf) {\n hiddenKeys.add(node.key)\n }\n }\n const children = node.children\n if (children) {\n traverse(children)\n }\n if (!node.isLeaf) {\n if (!expandKeySet.has(node.key)) {\n hiddenKeys.add(node.key)\n } else if (children) {\n // If all child nodes are hidden, then the expand icon will be hidden\n let allHidden = true\n for (const childNode of children) {\n if (!hiddenKeys.has(childNode.key)) {\n allHidden = false\n break\n }\n }\n if (allHidden) {\n hiddenExpandIconKeys.add(node.key)\n } else {\n hiddenExpandIconKeys.delete(node.key)\n }\n }\n }\n family.pop()\n })\n }\n traverse(nodes)\n return expandKeySet\n }\n\n function isForceHiddenExpandIcon(node: TreeNode): boolean {\n return hiddenExpandIconKeySet.value.has(node.key)\n }\n\n return {\n hiddenExpandIconKeySet,\n hiddenNodeKeySet,\n doFilter,\n isForceHiddenExpandIcon,\n }\n}\n"],"mappings":";;;;AASA,SAAgB,UAAU,OAAkB,MAA6B;CACvE,MAAM,mBAAmB,oBAAkB,IAAI,IAAI,EAAE,CAAC,CAAC;CACvD,MAAM,yBAAyB,oBAAkB,IAAI,IAAI,EAAE,CAAC,CAAC;CAE7D,MAAM,aAAa,eAAe;AAChC,SAAO,WAAW,MAAM,aAAa;GACrC;CAEF,SAAS,SAAS,OAAe;AAC/B,MAAI,CAAC,WAAW,MACd;EAEF,MAAM,+BAAe,IAAI,KAAc;EACvC,MAAM,uBAAuB,uBAAuB;EACpD,MAAM,aAAa,iBAAiB;EACpC,MAAM,SAAqB,EAAE;EAC7B,MAAM,QAAQ,KAAK,OAAO,aAAa,EAAE;EACzC,MAAM,SAAS,MAAM;AACrB,aAAW,OAAO;EAClB,SAAS,SAAS,OAAmB;AACnC,SAAM,SAAS,SAAS;AACtB,WAAO,KAAK,KAAK;AACjB,QAAI,SAAS,OAAO,KAAK,MAAM,KAAK,CAClC,QAAO,SAAS,WAAW;AACzB,kBAAa,IAAI,OAAO,IAAI;AAC5B,YAAO,WAAW;MAClB;SACG;AACL,UAAK,WAAW;AAChB,SAAI,KAAK,OACP,YAAW,IAAI,KAAK,IAAI;;IAG5B,MAAM,WAAW,KAAK;AACtB,QAAI,SACF,UAAS,SAAS;AAEpB,QAAI,CAAC,KAAK,QACR;SAAI,CAAC,aAAa,IAAI,KAAK,IAAI,CAC7B,YAAW,IAAI,KAAK,IAAI;cACf,UAAU;MAEnB,IAAI,YAAY;AAChB,WAAK,MAAM,aAAa,SACtB,KAAI,CAAC,WAAW,IAAI,UAAU,IAAI,EAAE;AAClC,mBAAY;AACZ;;AAGJ,UAAI,UACF,sBAAqB,IAAI,KAAK,IAAI;UAElC,sBAAqB,OAAO,KAAK,IAAI;;;AAI3C,WAAO,KAAK;KACZ;;AAEJ,WAAS,MAAM;AACf,SAAO;;CAGT,SAAS,wBAAwB,MAAyB;AACxD,SAAO,uBAAuB,MAAM,IAAI,KAAK,IAAI;;AAGnD,QAAO;EACL;EACA;EACA;EACA;EACD"}
|
||||
Generated
Vendored
+244
@@ -0,0 +1,244 @@
|
||||
import { isObject } from "../../../../utils/types.mjs";
|
||||
import { CURRENT_CHANGE, NODE_CLICK, NODE_COLLAPSE, NODE_DROP, NODE_EXPAND, TreeOptionsEnum } from "../virtual-tree.mjs";
|
||||
import { useCheck } from "./useCheck.mjs";
|
||||
import { useFilter } from "./useFilter.mjs";
|
||||
import { computed, ref, shallowRef, watch } from "vue";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/composables/useTree.ts
|
||||
function useTree(props, emit) {
|
||||
const expandedKeySet = ref(/* @__PURE__ */ new Set());
|
||||
const currentKey = ref();
|
||||
const tree = shallowRef();
|
||||
const listRef = ref();
|
||||
const { isIndeterminate, isChecked, toggleCheckbox, getCheckedKeys, getCheckedNodes, getHalfCheckedKeys, getHalfCheckedNodes, setChecked, setCheckedKeys } = useCheck(props, tree);
|
||||
const { doFilter, hiddenNodeKeySet, isForceHiddenExpandIcon } = useFilter(props, tree);
|
||||
const valueKey = computed(() => {
|
||||
return props.props?.value || TreeOptionsEnum.KEY;
|
||||
});
|
||||
const childrenKey = computed(() => {
|
||||
return props.props?.children || TreeOptionsEnum.CHILDREN;
|
||||
});
|
||||
const disabledKey = computed(() => {
|
||||
return props.props?.disabled || TreeOptionsEnum.DISABLED;
|
||||
});
|
||||
const labelKey = computed(() => {
|
||||
return props.props?.label || TreeOptionsEnum.LABEL;
|
||||
});
|
||||
const flattenTree = computed(() => {
|
||||
const expandedKeys = expandedKeySet.value;
|
||||
const hiddenKeys = hiddenNodeKeySet.value;
|
||||
const flattenNodes = [];
|
||||
const nodes = tree.value?.treeNodes || [];
|
||||
const stack = [];
|
||||
for (let i = nodes.length - 1; i >= 0; --i) stack.push(nodes[i]);
|
||||
while (stack.length) {
|
||||
const node = stack.pop();
|
||||
if (hiddenKeys.has(node.key)) continue;
|
||||
flattenNodes.push(node);
|
||||
if (node.children && expandedKeys.has(node.key)) for (let i = node.children.length - 1; i >= 0; --i) stack.push(node.children[i]);
|
||||
}
|
||||
return flattenNodes;
|
||||
});
|
||||
const isNotEmpty = computed(() => {
|
||||
return flattenTree.value.length > 0;
|
||||
});
|
||||
function createTree(data) {
|
||||
const treeNodeMap = /* @__PURE__ */ new Map();
|
||||
const levelTreeNodeMap = /* @__PURE__ */ new Map();
|
||||
let maxLevel = 1;
|
||||
function traverse(nodes, level = 1, parent = void 0) {
|
||||
const siblings = [];
|
||||
for (const rawNode of nodes) {
|
||||
const value = getKey(rawNode);
|
||||
const node = {
|
||||
level,
|
||||
key: value,
|
||||
data: rawNode
|
||||
};
|
||||
node.label = getLabel(rawNode);
|
||||
node.parent = parent;
|
||||
const children = getChildren(rawNode);
|
||||
node.disabled = getDisabled(rawNode);
|
||||
node.isLeaf = !children || children.length === 0;
|
||||
node.expanded = expandedKeySet.value.has(value);
|
||||
if (children && children.length) node.children = traverse(children, level + 1, node);
|
||||
siblings.push(node);
|
||||
treeNodeMap.set(value, node);
|
||||
if (!levelTreeNodeMap.has(level)) levelTreeNodeMap.set(level, []);
|
||||
levelTreeNodeMap.get(level)?.push(node);
|
||||
}
|
||||
if (level > maxLevel) maxLevel = level;
|
||||
return siblings;
|
||||
}
|
||||
const treeNodes = traverse(data);
|
||||
return {
|
||||
treeNodeMap,
|
||||
levelTreeNodeMap,
|
||||
maxLevel,
|
||||
treeNodes
|
||||
};
|
||||
}
|
||||
function filter(query) {
|
||||
const keys = doFilter(query);
|
||||
if (keys) expandedKeySet.value = keys;
|
||||
}
|
||||
function getChildren(node) {
|
||||
return node[childrenKey.value];
|
||||
}
|
||||
function getKey(node) {
|
||||
if (!node) return "";
|
||||
return node[valueKey.value];
|
||||
}
|
||||
function getDisabled(node) {
|
||||
return node[disabledKey.value];
|
||||
}
|
||||
function getLabel(node) {
|
||||
return node[labelKey.value];
|
||||
}
|
||||
function toggleExpand(node) {
|
||||
if (expandedKeySet.value.has(node.key)) collapseNode(node);
|
||||
else expandNode(node);
|
||||
}
|
||||
function setExpandedKeys(keys) {
|
||||
const expandedKeys = /* @__PURE__ */ new Set();
|
||||
const nodeMap = tree.value.treeNodeMap;
|
||||
expandedKeySet.value.forEach((key) => {
|
||||
const node = nodeMap.get(key);
|
||||
if (node) node.expanded = false;
|
||||
});
|
||||
keys.forEach((k) => {
|
||||
let node = nodeMap.get(k);
|
||||
while (node && !expandedKeys.has(node.key)) {
|
||||
expandedKeys.add(node.key);
|
||||
node.expanded = true;
|
||||
node = node.parent;
|
||||
}
|
||||
});
|
||||
expandedKeySet.value = expandedKeys;
|
||||
}
|
||||
function handleNodeClick(node, e) {
|
||||
emit(NODE_CLICK, node.data, node, e);
|
||||
handleCurrentChange(node);
|
||||
if (props.expandOnClickNode) toggleExpand(node);
|
||||
if (props.showCheckbox && (props.checkOnClickNode || node.isLeaf && props.checkOnClickLeaf) && !node.disabled) toggleCheckbox(node, !isChecked(node), true);
|
||||
}
|
||||
function handleNodeDrop(node, e) {
|
||||
emit(NODE_DROP, node.data, node, e);
|
||||
}
|
||||
function handleCurrentChange(node) {
|
||||
if (!isCurrent(node)) {
|
||||
currentKey.value = node.key;
|
||||
emit(CURRENT_CHANGE, node.data, node);
|
||||
}
|
||||
}
|
||||
function handleNodeCheck(node, checked) {
|
||||
toggleCheckbox(node, checked);
|
||||
}
|
||||
function expandNode(node) {
|
||||
const keySet = expandedKeySet.value;
|
||||
if (tree.value && props.accordion) {
|
||||
const { treeNodeMap } = tree.value;
|
||||
keySet.forEach((key) => {
|
||||
const treeNode = treeNodeMap.get(key);
|
||||
if (node && node.level === treeNode?.level) {
|
||||
keySet.delete(key);
|
||||
treeNode.expanded = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
keySet.add(node.key);
|
||||
const _node = getNode(node.key);
|
||||
if (_node) {
|
||||
_node.expanded = true;
|
||||
emit(NODE_EXPAND, _node.data, _node);
|
||||
}
|
||||
}
|
||||
function collapseNode(node) {
|
||||
expandedKeySet.value.delete(node.key);
|
||||
const _node = getNode(node.key);
|
||||
if (_node) {
|
||||
_node.expanded = false;
|
||||
emit(NODE_COLLAPSE, _node.data, _node);
|
||||
}
|
||||
}
|
||||
function isDisabled(node) {
|
||||
return !!node.disabled;
|
||||
}
|
||||
function isCurrent(node) {
|
||||
const current = currentKey.value;
|
||||
return current !== void 0 && current === node.key;
|
||||
}
|
||||
function getCurrentNode() {
|
||||
if (!currentKey.value) return void 0;
|
||||
return tree.value?.treeNodeMap.get(currentKey.value)?.data;
|
||||
}
|
||||
function getCurrentKey() {
|
||||
return currentKey.value;
|
||||
}
|
||||
function setCurrentKey(key) {
|
||||
currentKey.value = key;
|
||||
}
|
||||
function setData(data) {
|
||||
tree.value = createTree(data);
|
||||
}
|
||||
function getNode(data) {
|
||||
const key = isObject(data) ? getKey(data) : data;
|
||||
return tree.value?.treeNodeMap.get(key);
|
||||
}
|
||||
function scrollToNode(key, strategy = "auto") {
|
||||
const node = getNode(key);
|
||||
if (node && listRef.value) listRef.value.scrollToItem(flattenTree.value.indexOf(node), strategy);
|
||||
}
|
||||
function scrollTo(offset) {
|
||||
listRef.value?.scrollTo(offset);
|
||||
}
|
||||
watch(() => props.currentNodeKey, (key) => {
|
||||
currentKey.value = key;
|
||||
}, { immediate: true });
|
||||
watch(() => props.defaultExpandedKeys, (keys) => {
|
||||
setExpandedKeys(keys || []);
|
||||
});
|
||||
watch(() => props.data, (data) => {
|
||||
setData(data);
|
||||
setExpandedKeys(props.defaultExpandedKeys || []);
|
||||
}, { immediate: true });
|
||||
return {
|
||||
tree,
|
||||
flattenTree,
|
||||
isNotEmpty,
|
||||
listRef,
|
||||
getKey,
|
||||
getChildren,
|
||||
toggleExpand,
|
||||
toggleCheckbox,
|
||||
isChecked,
|
||||
isIndeterminate,
|
||||
isDisabled,
|
||||
isCurrent,
|
||||
isForceHiddenExpandIcon,
|
||||
handleNodeClick,
|
||||
handleNodeDrop,
|
||||
handleNodeCheck,
|
||||
getCurrentNode,
|
||||
getCurrentKey,
|
||||
setCurrentKey,
|
||||
getCheckedKeys,
|
||||
getCheckedNodes,
|
||||
getHalfCheckedKeys,
|
||||
getHalfCheckedNodes,
|
||||
setChecked,
|
||||
setCheckedKeys,
|
||||
filter,
|
||||
setData,
|
||||
getNode,
|
||||
expandNode,
|
||||
collapseNode,
|
||||
setExpandedKeys,
|
||||
scrollToNode,
|
||||
scrollTo
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
export { useTree };
|
||||
//# sourceMappingURL=useTree.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+6
@@ -0,0 +1,6 @@
|
||||
import { _default } from "./tree.vue.js";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/instance.d.ts
|
||||
type TreeV2Instance = InstanceType<typeof _default> & unknown;
|
||||
//#endregion
|
||||
export { TreeV2Instance };
|
||||
Generated
Vendored
+30
@@ -0,0 +1,30 @@
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { ElText } from "../../text/index.mjs";
|
||||
import { ROOT_TREE_INJECTION_KEY, treeNodeContentProps } from "./virtual-tree.mjs";
|
||||
import { defineComponent, h, inject } from "vue";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/tree-node-content.ts
|
||||
var tree_node_content_default = defineComponent({
|
||||
name: "ElTreeNodeContent",
|
||||
props: treeNodeContentProps,
|
||||
setup(props) {
|
||||
const tree = inject(ROOT_TREE_INJECTION_KEY);
|
||||
const ns = useNamespace("tree");
|
||||
return () => {
|
||||
const node = props.node;
|
||||
const { data } = node;
|
||||
return tree?.ctx.slots.default ? tree.ctx.slots.default({
|
||||
node,
|
||||
data
|
||||
}) : h(ElText, {
|
||||
tag: "span",
|
||||
truncated: true,
|
||||
class: ns.be("node", "label")
|
||||
}, () => [node?.label]);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
export { tree_node_content_default as default };
|
||||
//# sourceMappingURL=tree-node-content.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"tree-node-content.mjs","names":[],"sources":["../../../../../../packages/components/tree-v2/src/tree-node-content.ts"],"sourcesContent":["import { defineComponent, h, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport ElText from '@element-plus/components/text'\nimport { ROOT_TREE_INJECTION_KEY, treeNodeContentProps } from './virtual-tree'\n\nexport default defineComponent({\n name: 'ElTreeNodeContent',\n props: treeNodeContentProps,\n setup(props) {\n const tree = inject(ROOT_TREE_INJECTION_KEY)\n const ns = useNamespace('tree')\n return () => {\n const node = props.node\n const { data } = node!\n return tree?.ctx.slots.default\n ? 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"],"mappings":";;;;;;AAKA,gCAAe,gBAAgB;CAC7B,MAAM;CACN,OAAO;CACP,MAAM,OAAO;EACX,MAAM,OAAO,OAAO,wBAAwB;EAC5C,MAAM,KAAK,aAAa,OAAO;AAC/B,eAAa;GACX,MAAM,OAAO,MAAM;GACnB,MAAM,EAAE,SAAS;AACjB,UAAO,MAAM,IAAI,MAAM,UACnB,KAAK,IAAI,MAAM,QAAQ;IAAE;IAAM;IAAM,CAAC,GACtC,EACE,QACA;IAAE,KAAK;IAAQ,WAAW;IAAM,OAAO,GAAG,GAAG,QAAQ,QAAQ;IAAE,QACzD,CAAC,MAAM,MAAM,CACpB;;;CAGV,CAAC"}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
import tree_node_vue_vue_type_script_setup_true_lang_default from "./tree-node.vue_vue_type_script_setup_true_lang.mjs";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/tree-node.vue
|
||||
var tree_node_default = tree_node_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//#endregion
|
||||
export { tree_node_default as default };
|
||||
//# sourceMappingURL=tree-node.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"tree-node.mjs","names":[],"sources":["../../../../../../packages/components/tree-v2/src/tree-node.vue"],"sourcesContent":["<template>\n <div\n ref=\"node$\"\n :class=\"[\n ns.b('node'),\n ns.is('expanded', expanded),\n ns.is('current', current),\n ns.is('focusable', !disabled),\n ns.is('checked', !disabled && checked),\n getNodeClass(node),\n ]\"\n role=\"treeitem\"\n tabindex=\"-1\"\n :aria-expanded=\"expanded\"\n :aria-disabled=\"disabled\"\n :aria-checked=\"checked\"\n :data-key=\"node?.key\"\n @click.stop=\"handleClick\"\n @contextmenu=\"handleContextMenu\"\n @dragover.prevent\n @dragenter.prevent\n @drop.stop=\"handleDrop\"\n >\n <div\n :class=\"ns.be('node', 'content')\"\n :style=\"{\n paddingLeft: `${(node.level - 1) * indent}px`,\n height: itemSize + 'px',\n }\"\n >\n <el-icon\n v-if=\"icon\"\n :class=\"[\n ns.is('leaf', !!node?.isLeaf),\n ns.is('hidden', hiddenExpandIcon),\n {\n expanded: !node?.isLeaf && expanded,\n },\n ns.be('node', 'expand-icon'),\n ]\"\n @click.stop=\"handleExpandIconClick\"\n >\n <component :is=\"icon\" />\n </el-icon>\n <el-checkbox\n v-if=\"showCheckbox\"\n :model-value=\"checked\"\n :indeterminate=\"indeterminate\"\n :disabled=\"disabled\"\n @change=\"handleCheckChange\"\n @click.stop\n />\n <el-node-content :node=\"{ ...node, expanded }\" />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { CaretRight } from '@element-plus/icons-vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isFunction, isString, mutable } from '@element-plus/utils'\nimport ElNodeContent from './tree-node-content'\nimport {\n EMPTY_NODE,\n NODE_CONTEXTMENU,\n ROOT_TREE_INJECTION_KEY,\n treeNodeEmits,\n} from './virtual-tree'\n\nimport type { TreeNode, TreeNodeProps } from './types'\nimport type { CheckboxValueType } from '@element-plus/components/checkbox'\n\ndefineOptions({\n name: 'ElTreeNode',\n})\n\nconst props = withDefaults(defineProps<TreeNodeProps>(), {\n node: () => mutable(EMPTY_NODE),\n itemSize: 26,\n})\nconst emit = defineEmits(treeNodeEmits)\n\nconst tree = inject(ROOT_TREE_INJECTION_KEY)\nconst ns = useNamespace('tree')\n\nconst indent = computed(() => tree?.props.indent ?? 16)\nconst icon = computed(() => tree?.props.icon ?? CaretRight)\n\nconst getNodeClass = (node: TreeNode) => {\n const nodeClassFunc = tree?.props.props?.class\n if (!nodeClassFunc) return {}\n\n let className\n if (isFunction(nodeClassFunc)) {\n const { data } = node\n className = nodeClassFunc(data, node)\n } else {\n className = nodeClassFunc\n }\n\n return isString(className) ? { [className]: true } : className\n}\n\nconst handleClick = (e: MouseEvent) => {\n emit('click', props.node, e)\n}\nconst handleDrop = (e: DragEvent) => {\n emit('drop', props.node, e)\n}\nconst handleExpandIconClick = () => {\n emit('toggle', props.node)\n}\nconst handleCheckChange = (value: CheckboxValueType) => {\n emit('check', props.node, value)\n}\n\nconst handleContextMenu = (event: Event) => {\n if (tree?.instance?.vnode?.props?.['onNodeContextmenu']) {\n event.stopPropagation()\n event.preventDefault()\n }\n tree?.ctx.emit(NODE_CONTEXTMENU, event, props.node?.data, props.node)\n}\n</script>\n"],"mappings":""}
|
||||
Generated
Vendored
+123
@@ -0,0 +1,123 @@
|
||||
import { isFunction, isString } from "../../../utils/types.mjs";
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { ElIcon } from "../../icon/index.mjs";
|
||||
import { ElCheckbox } from "../../checkbox/index.mjs";
|
||||
import { NODE_CONTEXTMENU, ROOT_TREE_INJECTION_KEY, treeNodeEmits, treeNodeProps } from "./virtual-tree.mjs";
|
||||
import tree_node_content_default from "./tree-node-content.mjs";
|
||||
import { CaretRight } from "@element-plus/icons-vue";
|
||||
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, resolveDynamicComponent, unref, withCtx, withModifiers } from "vue";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/tree-node.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = [
|
||||
"aria-expanded",
|
||||
"aria-disabled",
|
||||
"aria-checked",
|
||||
"data-key"
|
||||
];
|
||||
var tree_node_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElTreeNode",
|
||||
__name: "tree-node",
|
||||
props: treeNodeProps,
|
||||
emits: treeNodeEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const tree = inject(ROOT_TREE_INJECTION_KEY);
|
||||
const ns = useNamespace("tree");
|
||||
const indent = computed(() => tree?.props.indent ?? 16);
|
||||
const icon = computed(() => tree?.props.icon ?? CaretRight);
|
||||
const getNodeClass = (node) => {
|
||||
const nodeClassFunc = tree?.props.props?.class;
|
||||
if (!nodeClassFunc) return {};
|
||||
let className;
|
||||
if (isFunction(nodeClassFunc)) {
|
||||
const { data } = node;
|
||||
className = nodeClassFunc(data, node);
|
||||
} else className = nodeClassFunc;
|
||||
return isString(className) ? { [className]: true } : className;
|
||||
};
|
||||
const handleClick = (e) => {
|
||||
emit("click", props.node, e);
|
||||
};
|
||||
const handleDrop = (e) => {
|
||||
emit("drop", props.node, e);
|
||||
};
|
||||
const handleExpandIconClick = () => {
|
||||
emit("toggle", props.node);
|
||||
};
|
||||
const handleCheckChange = (value) => {
|
||||
emit("check", props.node, value);
|
||||
};
|
||||
const handleContextMenu = (event) => {
|
||||
if (tree?.instance?.vnode?.props?.["onNodeContextmenu"]) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
tree?.ctx.emit(NODE_CONTEXTMENU, event, props.node?.data, props.node);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
ref: "node$",
|
||||
class: normalizeClass([
|
||||
unref(ns).b("node"),
|
||||
unref(ns).is("expanded", __props.expanded),
|
||||
unref(ns).is("current", __props.current),
|
||||
unref(ns).is("focusable", !__props.disabled),
|
||||
unref(ns).is("checked", !__props.disabled && __props.checked),
|
||||
getNodeClass(__props.node)
|
||||
]),
|
||||
role: "treeitem",
|
||||
tabindex: "-1",
|
||||
"aria-expanded": __props.expanded,
|
||||
"aria-disabled": __props.disabled,
|
||||
"aria-checked": __props.checked,
|
||||
"data-key": __props.node?.key,
|
||||
onClick: withModifiers(handleClick, ["stop"]),
|
||||
onContextmenu: handleContextMenu,
|
||||
onDragover: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
|
||||
onDragenter: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
|
||||
onDrop: withModifiers(handleDrop, ["stop"])
|
||||
}, [createElementVNode("div", {
|
||||
class: normalizeClass(unref(ns).be("node", "content")),
|
||||
style: normalizeStyle({
|
||||
paddingLeft: `${(__props.node.level - 1) * indent.value}px`,
|
||||
height: __props.itemSize + "px"
|
||||
})
|
||||
}, [
|
||||
icon.value ? (openBlock(), createBlock(unref(ElIcon), {
|
||||
key: 0,
|
||||
class: normalizeClass([
|
||||
unref(ns).is("leaf", !!__props.node?.isLeaf),
|
||||
unref(ns).is("hidden", __props.hiddenExpandIcon),
|
||||
{ expanded: !__props.node?.isLeaf && __props.expanded },
|
||||
unref(ns).be("node", "expand-icon")
|
||||
]),
|
||||
onClick: withModifiers(handleExpandIconClick, ["stop"])
|
||||
}, {
|
||||
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(icon.value)))]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
||||
__props.showCheckbox ? (openBlock(), createBlock(unref(ElCheckbox), {
|
||||
key: 1,
|
||||
"model-value": __props.checked,
|
||||
indeterminate: __props.indeterminate,
|
||||
disabled: __props.disabled,
|
||||
onChange: handleCheckChange,
|
||||
onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
|
||||
}, null, 8, [
|
||||
"model-value",
|
||||
"indeterminate",
|
||||
"disabled"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
createVNode(unref(tree_node_content_default), { node: {
|
||||
...__props.node,
|
||||
expanded: __props.expanded
|
||||
} }, null, 8, ["node"])
|
||||
], 6)], 42, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
export { tree_node_vue_vue_type_script_setup_true_lang_default as default };
|
||||
//# sourceMappingURL=tree-node.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+8
@@ -0,0 +1,8 @@
|
||||
import tree_vue_vue_type_script_setup_true_lang_default from "./tree.vue_vue_type_script_setup_true_lang.mjs";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/tree.vue
|
||||
var tree_default = tree_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//#endregion
|
||||
export { tree_default as default };
|
||||
//# sourceMappingURL=tree.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"tree.mjs","names":[],"sources":["../../../../../../packages/components/tree-v2/src/tree.vue"],"sourcesContent":["<template>\n <div\n :class=\"[ns.b(), { [ns.m('highlight-current')]: highlightCurrent }]\"\n role=\"tree\"\n >\n <fixed-size-list\n v-if=\"isNotEmpty\"\n ref=\"listRef\"\n :class-name=\"ns.b('virtual-list')\"\n :data=\"flattenTree\"\n :total=\"flattenTree.length\"\n :height=\"height\"\n :item-size=\"treeNodeSize\"\n :perf-mode=\"perfMode\"\n :scrollbar-always-on=\"scrollbarAlwaysOn\"\n >\n <template #default=\"{ data, index, style }\">\n <el-tree-node\n :key=\"data[index].key\"\n :style=\"style\"\n :node=\"data[index]\"\n :expanded=\"data[index].expanded\"\n :show-checkbox=\"showCheckbox\"\n :checked=\"isChecked(data[index])\"\n :indeterminate=\"isIndeterminate(data[index])\"\n :item-size=\"treeNodeSize\"\n :disabled=\"isDisabled(data[index])\"\n :current=\"isCurrent(data[index])\"\n :hidden-expand-icon=\"isForceHiddenExpandIcon(data[index])\"\n @click=\"handleNodeClick\"\n @toggle=\"toggleExpand\"\n @check=\"handleNodeCheck\"\n @drop=\"handleNodeDrop\"\n />\n </template>\n </fixed-size-list>\n <div v-else :class=\"ns.e('empty-block')\">\n <slot name=\"empty\">\n <span :class=\"ns.e('empty-text')\">\n {{ emptyText ?? t('el.tree.emptyText') }}\n </span>\n </slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, getCurrentInstance, provide, useSlots } from 'vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { formItemContextKey } from '@element-plus/components/form'\nimport { FixedSizeList } from '@element-plus/components/virtual-list'\nimport { useTree } from './composables/useTree'\nimport ElTreeNode from './tree-node.vue'\nimport {\n ROOT_TREE_INJECTION_KEY,\n TreeOptionsEnum,\n treeEmits,\n} from './virtual-tree'\nimport { mutable } from '@element-plus/utils'\n\nimport type { TreeProps } from './types'\n\ndefineOptions({\n name: 'ElTreeV2',\n})\n\nconst props = withDefaults(defineProps<TreeProps>(), {\n data: () => mutable([]),\n height: 200,\n props: () =>\n mutable({\n children: TreeOptionsEnum.CHILDREN,\n label: TreeOptionsEnum.LABEL,\n disabled: TreeOptionsEnum.DISABLED,\n value: TreeOptionsEnum.KEY,\n class: TreeOptionsEnum.CLASS,\n }),\n defaultCheckedKeys: () => mutable([]),\n defaultExpandedKeys: () => mutable([]),\n indent: 16,\n itemSize: 26,\n expandOnClickNode: true,\n checkOnClickLeaf: true,\n perfMode: true,\n})\nconst emit = defineEmits(treeEmits)\n\nconst slots = useSlots()\n\nconst treeNodeSize = computed(() => props.itemSize)\n\nprovide(ROOT_TREE_INJECTION_KEY, {\n ctx: {\n emit,\n slots,\n },\n props,\n instance: getCurrentInstance()!,\n})\nprovide(formItemContextKey, undefined)\nconst { t } = useLocale()\nconst ns = useNamespace('tree')\nconst {\n flattenTree,\n isNotEmpty,\n listRef,\n toggleExpand,\n isIndeterminate,\n isChecked,\n isDisabled,\n isCurrent,\n isForceHiddenExpandIcon,\n handleNodeClick,\n handleNodeDrop,\n handleNodeCheck,\n // expose\n toggleCheckbox,\n getCurrentNode,\n getCurrentKey,\n setCurrentKey,\n getCheckedKeys,\n getCheckedNodes,\n getHalfCheckedKeys,\n getHalfCheckedNodes,\n setChecked,\n setCheckedKeys,\n filter,\n setData,\n getNode,\n expandNode,\n collapseNode,\n setExpandedKeys,\n scrollToNode,\n scrollTo,\n} = useTree(props, emit)\n\ndefineExpose({\n toggleCheckbox,\n getCurrentNode,\n getCurrentKey,\n setCurrentKey,\n getCheckedKeys,\n getCheckedNodes,\n getHalfCheckedKeys,\n getHalfCheckedNodes,\n setChecked,\n setCheckedKeys,\n filter,\n setData,\n getNode,\n expandNode,\n collapseNode,\n setExpandedKeys,\n scrollToNode,\n scrollTo,\n})\n</script>\n"],"mappings":""}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
import { CheckboxValueType } from "../../checkbox/src/checkbox.js";
|
||||
import { Alignment } from "../../virtual-list/src/types.js";
|
||||
import "../../virtual-list/index.js";
|
||||
import { TreeNodeData } from "../../tree/src/tree.type.js";
|
||||
import { CheckedInfo, TreeData, TreeKey, TreeNode, TreeNodeData as TreeNodeData$1, TreeOptionProps, TreeProps } from "./types.js";
|
||||
import "../../../index.js";
|
||||
import * as vue from "vue";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/tree.vue.d.ts
|
||||
declare var __VLS_20: {};
|
||||
type __VLS_Slots = {} & {
|
||||
empty?: (props: typeof __VLS_20) => any;
|
||||
};
|
||||
declare const __VLS_base: vue.DefineComponent<TreeProps, {
|
||||
toggleCheckbox: (node: TreeNode, isChecked: CheckboxValueType, nodeClick?: boolean, immediateUpdate?: boolean) => void;
|
||||
getCurrentNode: () => TreeNodeData$1 | undefined;
|
||||
getCurrentKey: () => TreeKey | undefined;
|
||||
setCurrentKey: (key: TreeKey) => void;
|
||||
getCheckedKeys: (leafOnly?: boolean) => TreeKey[];
|
||||
getCheckedNodes: (leafOnly?: boolean) => TreeNodeData$1[];
|
||||
getHalfCheckedKeys: () => TreeKey[];
|
||||
getHalfCheckedNodes: () => TreeNodeData$1[];
|
||||
setChecked: (key: TreeKey, isChecked: boolean) => void;
|
||||
setCheckedKeys: (keys: TreeKey[]) => void;
|
||||
filter: (query: string) => void;
|
||||
setData: (data: TreeData) => void;
|
||||
getNode: (data: TreeKey | TreeNodeData$1) => TreeNode | undefined;
|
||||
expandNode: (node: TreeNode) => void;
|
||||
collapseNode: (node: TreeNode) => void;
|
||||
setExpandedKeys: (keys: TreeKey[]) => void;
|
||||
scrollToNode: (key: TreeKey, strategy?: Alignment) => void;
|
||||
scrollTo: (offset: number) => void;
|
||||
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
||||
"current-change": (data: TreeNodeData, node: TreeNode) => void;
|
||||
"node-expand": (data: TreeNodeData, node: TreeNode) => void;
|
||||
"node-click": (data: TreeNodeData, node: TreeNode, e: MouseEvent) => void;
|
||||
"node-drop": (data: TreeNodeData, node: TreeNode, e: DragEvent) => void;
|
||||
"node-collapse": (data: TreeNodeData, node: TreeNode) => void;
|
||||
check: (data: TreeNodeData, checkedInfo: CheckedInfo) => void;
|
||||
"check-change": (data: TreeNodeData, checked: boolean) => void;
|
||||
"node-contextmenu": (evt: Event, data: TreeNodeData, node: TreeNode) => void;
|
||||
}, string, vue.PublicProps, Readonly<TreeProps> & Readonly<{
|
||||
"onCurrent-change"?: ((data: TreeNodeData, node: TreeNode) => any) | undefined;
|
||||
"onNode-expand"?: ((data: TreeNodeData, node: TreeNode) => any) | undefined;
|
||||
"onCheck-change"?: ((data: TreeNodeData, checked: boolean) => any) | undefined;
|
||||
"onNode-click"?: ((data: TreeNodeData, node: TreeNode, e: MouseEvent) => any) | undefined;
|
||||
"onNode-contextmenu"?: ((evt: Event, data: TreeNodeData, node: TreeNode) => any) | undefined;
|
||||
"onNode-collapse"?: ((data: TreeNodeData, node: TreeNode) => any) | undefined;
|
||||
onCheck?: ((data: TreeNodeData, checkedInfo: CheckedInfo) => any) | undefined;
|
||||
"onNode-drop"?: ((data: TreeNodeData, node: TreeNode, e: DragEvent) => any) | undefined;
|
||||
}>, {
|
||||
props: TreeOptionProps;
|
||||
checkOnClickLeaf: boolean;
|
||||
data: TreeData;
|
||||
height: number;
|
||||
perfMode: boolean;
|
||||
itemSize: number;
|
||||
indent: number;
|
||||
expandOnClickNode: boolean;
|
||||
defaultCheckedKeys: TreeKey[];
|
||||
defaultExpandedKeys: TreeKey[];
|
||||
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default };
|
||||
Generated
Vendored
+120
@@ -0,0 +1,120 @@
|
||||
import { useLocale } from "../../../hooks/use-locale/index.mjs";
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { formItemContextKey } from "../../form/src/constants.mjs";
|
||||
import FixedSizeList from "../../virtual-list/src/components/fixed-size-list.mjs";
|
||||
import { ROOT_TREE_INJECTION_KEY, treeEmits, treeProps } from "./virtual-tree.mjs";
|
||||
import { useTree } from "./composables/useTree.mjs";
|
||||
import tree_node_default from "./tree-node.mjs";
|
||||
import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/tree.vue?vue&type=script&setup=true&lang.ts
|
||||
var tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElTreeV2",
|
||||
__name: "tree",
|
||||
props: treeProps,
|
||||
emits: treeEmits,
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const slots = useSlots();
|
||||
const treeNodeSize = computed(() => props.itemSize);
|
||||
provide(ROOT_TREE_INJECTION_KEY, {
|
||||
ctx: {
|
||||
emit,
|
||||
slots
|
||||
},
|
||||
props,
|
||||
instance: getCurrentInstance()
|
||||
});
|
||||
provide(formItemContextKey, void 0);
|
||||
const { t } = useLocale();
|
||||
const ns = useNamespace("tree");
|
||||
const { flattenTree, isNotEmpty, listRef, toggleExpand, isIndeterminate, isChecked, isDisabled, isCurrent, isForceHiddenExpandIcon, handleNodeClick, handleNodeDrop, handleNodeCheck, toggleCheckbox, getCurrentNode, getCurrentKey, setCurrentKey, getCheckedKeys, getCheckedNodes, getHalfCheckedKeys, getHalfCheckedNodes, setChecked, setCheckedKeys, filter, setData, getNode, expandNode, collapseNode, setExpandedKeys, scrollToNode, scrollTo } = useTree(props, emit);
|
||||
__expose({
|
||||
toggleCheckbox,
|
||||
getCurrentNode,
|
||||
getCurrentKey,
|
||||
setCurrentKey,
|
||||
getCheckedKeys,
|
||||
getCheckedNodes,
|
||||
getHalfCheckedKeys,
|
||||
getHalfCheckedNodes,
|
||||
setChecked,
|
||||
setCheckedKeys,
|
||||
filter,
|
||||
setData,
|
||||
getNode,
|
||||
expandNode,
|
||||
collapseNode,
|
||||
setExpandedKeys,
|
||||
scrollToNode,
|
||||
scrollTo
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass([unref(ns).b(), { [unref(ns).m("highlight-current")]: __props.highlightCurrent }]),
|
||||
role: "tree"
|
||||
}, [unref(isNotEmpty) ? (openBlock(), createBlock(unref(FixedSizeList), {
|
||||
key: 0,
|
||||
ref_key: "listRef",
|
||||
ref: listRef,
|
||||
"class-name": unref(ns).b("virtual-list"),
|
||||
data: unref(flattenTree),
|
||||
total: unref(flattenTree).length,
|
||||
height: __props.height,
|
||||
"item-size": treeNodeSize.value,
|
||||
"perf-mode": __props.perfMode,
|
||||
"scrollbar-always-on": __props.scrollbarAlwaysOn
|
||||
}, {
|
||||
default: withCtx(({ data, index, style }) => [(openBlock(), createBlock(tree_node_default, {
|
||||
key: data[index].key,
|
||||
style: normalizeStyle(style),
|
||||
node: data[index],
|
||||
expanded: data[index].expanded,
|
||||
"show-checkbox": __props.showCheckbox,
|
||||
checked: unref(isChecked)(data[index]),
|
||||
indeterminate: unref(isIndeterminate)(data[index]),
|
||||
"item-size": treeNodeSize.value,
|
||||
disabled: unref(isDisabled)(data[index]),
|
||||
current: unref(isCurrent)(data[index]),
|
||||
"hidden-expand-icon": unref(isForceHiddenExpandIcon)(data[index]),
|
||||
onClick: unref(handleNodeClick),
|
||||
onToggle: unref(toggleExpand),
|
||||
onCheck: unref(handleNodeCheck),
|
||||
onDrop: unref(handleNodeDrop)
|
||||
}, null, 8, [
|
||||
"style",
|
||||
"node",
|
||||
"expanded",
|
||||
"show-checkbox",
|
||||
"checked",
|
||||
"indeterminate",
|
||||
"item-size",
|
||||
"disabled",
|
||||
"current",
|
||||
"hidden-expand-icon",
|
||||
"onClick",
|
||||
"onToggle",
|
||||
"onCheck",
|
||||
"onDrop"
|
||||
]))]),
|
||||
_: 1
|
||||
}, 8, [
|
||||
"class-name",
|
||||
"data",
|
||||
"total",
|
||||
"height",
|
||||
"item-size",
|
||||
"perf-mode",
|
||||
"scrollbar-always-on"
|
||||
])) : (openBlock(), createElementBlock("div", {
|
||||
key: 1,
|
||||
class: normalizeClass(unref(ns).e("empty-block"))
|
||||
}, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("span", { class: normalizeClass(unref(ns).e("empty-text")) }, toDisplayString(__props.emptyText ?? unref(t)("el.tree.emptyText")), 3)])], 2))], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
export { tree_vue_vue_type_script_setup_true_lang_default as default };
|
||||
//# sourceMappingURL=tree.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+76
@@ -0,0 +1,76 @@
|
||||
import { IconPropType } from "../../../utils/vue/icon.js";
|
||||
import "../../../utils/index.js";
|
||||
import "./virtual-tree.js";
|
||||
import { ComponentInternalInstance, ExtractPublicPropTypes, SetupContext } from "vue";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/types.d.ts
|
||||
type TreeNodeData = Record<string, any>;
|
||||
type TreeData = TreeNodeData[];
|
||||
type TreeKey = string | number;
|
||||
interface TreeOptionProps {
|
||||
children?: string;
|
||||
label?: string;
|
||||
value?: string;
|
||||
disabled?: string;
|
||||
class?: ((data: TreeNodeData, node: TreeNode) => string | {
|
||||
[key: string]: boolean;
|
||||
}) | string;
|
||||
}
|
||||
interface TreeProps {
|
||||
data?: TreeData;
|
||||
emptyText?: string;
|
||||
height?: number;
|
||||
props?: TreeOptionProps;
|
||||
highlightCurrent?: boolean;
|
||||
showCheckbox?: boolean;
|
||||
defaultCheckedKeys?: TreeKey[];
|
||||
checkStrictly?: boolean;
|
||||
defaultExpandedKeys?: TreeKey[];
|
||||
indent?: number;
|
||||
itemSize?: number;
|
||||
icon?: IconPropType;
|
||||
expandOnClickNode?: boolean;
|
||||
checkOnClickNode?: boolean;
|
||||
checkOnClickLeaf?: boolean;
|
||||
currentNodeKey?: string | number;
|
||||
accordion?: boolean;
|
||||
filterMethod?: FilterMethod;
|
||||
perfMode?: boolean;
|
||||
/**
|
||||
* @description always show scrollbar
|
||||
*/
|
||||
scrollbarAlwaysOn?: boolean;
|
||||
}
|
||||
interface TreeNode {
|
||||
key: TreeKey;
|
||||
level: number;
|
||||
parent?: TreeNode;
|
||||
children?: TreeNode[];
|
||||
data: TreeNodeData;
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
isLeaf?: boolean;
|
||||
expanded?: boolean;
|
||||
/**
|
||||
* Determines whether the current tree node is effectively checked.
|
||||
*
|
||||
* Rules:
|
||||
* 1. A disabled leaf node is always considered checked.
|
||||
* 2. A non-disabled leaf node reflects its actual checked state.
|
||||
* 3. A non-leaf node is considered checked only when:
|
||||
* - All of its child nodes are effectively checked, and
|
||||
* - Each child follows the same evaluation rules:
|
||||
* - Disabled leaf nodes follow rule #1.
|
||||
* - Non-leaf child nodes are recursively evaluated under this rule (#3).
|
||||
*/
|
||||
isEffectivelyChecked?: boolean;
|
||||
}
|
||||
type FilterMethod = (query: string, data: TreeNodeData, node: TreeNode) => boolean;
|
||||
interface CheckedInfo {
|
||||
checkedKeys: TreeKey[];
|
||||
checkedNodes: TreeData;
|
||||
halfCheckedKeys: TreeKey[];
|
||||
halfCheckedNodes: TreeData;
|
||||
}
|
||||
//#endregion
|
||||
export { CheckedInfo, TreeData, TreeKey, TreeNode, TreeNodeData, TreeOptionProps, TreeProps };
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import "../../../utils/index.js";
|
||||
import "../../checkbox/index.js";
|
||||
import "../../tree/src/tree.type.js";
|
||||
import "./types.js";
|
||||
import { InjectionKey } from "vue";
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
import { isBoolean } from "../../../utils/types.mjs";
|
||||
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { iconPropType } from "../../../utils/vue/icon.mjs";
|
||||
import { mutable } from "../../../utils/typescript.mjs";
|
||||
|
||||
//#region ../../packages/components/tree-v2/src/virtual-tree.ts
|
||||
const ROOT_TREE_INJECTION_KEY = Symbol();
|
||||
const EMPTY_NODE = {
|
||||
key: -1,
|
||||
level: -1,
|
||||
data: {}
|
||||
};
|
||||
let TreeOptionsEnum = /* @__PURE__ */ function(TreeOptionsEnum) {
|
||||
TreeOptionsEnum["KEY"] = "id";
|
||||
TreeOptionsEnum["LABEL"] = "label";
|
||||
TreeOptionsEnum["CHILDREN"] = "children";
|
||||
TreeOptionsEnum["DISABLED"] = "disabled";
|
||||
TreeOptionsEnum["CLASS"] = "";
|
||||
return TreeOptionsEnum;
|
||||
}({});
|
||||
let SetOperationEnum = /* @__PURE__ */ function(SetOperationEnum) {
|
||||
SetOperationEnum["ADD"] = "add";
|
||||
SetOperationEnum["DELETE"] = "delete";
|
||||
return SetOperationEnum;
|
||||
}({});
|
||||
const itemSize = {
|
||||
type: Number,
|
||||
default: 26
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `TreeProps` instead.
|
||||
*/
|
||||
const treeProps = buildProps({
|
||||
data: {
|
||||
type: definePropType(Array),
|
||||
default: () => mutable([])
|
||||
},
|
||||
emptyText: { type: String },
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
props: {
|
||||
type: definePropType(Object),
|
||||
default: () => mutable({
|
||||
children: TreeOptionsEnum.CHILDREN,
|
||||
label: TreeOptionsEnum.LABEL,
|
||||
disabled: TreeOptionsEnum.DISABLED,
|
||||
value: TreeOptionsEnum.KEY,
|
||||
class: TreeOptionsEnum.CLASS
|
||||
})
|
||||
},
|
||||
highlightCurrent: Boolean,
|
||||
showCheckbox: Boolean,
|
||||
defaultCheckedKeys: {
|
||||
type: definePropType(Array),
|
||||
default: () => mutable([])
|
||||
},
|
||||
checkStrictly: Boolean,
|
||||
defaultExpandedKeys: {
|
||||
type: definePropType(Array),
|
||||
default: () => mutable([])
|
||||
},
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 16
|
||||
},
|
||||
itemSize,
|
||||
icon: { type: iconPropType },
|
||||
expandOnClickNode: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkOnClickNode: Boolean,
|
||||
checkOnClickLeaf: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
currentNodeKey: { type: definePropType([String, Number]) },
|
||||
accordion: Boolean,
|
||||
filterMethod: { type: definePropType(Function) },
|
||||
perfMode: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
scrollbarAlwaysOn: Boolean
|
||||
});
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `TreeNodeProps` instead.
|
||||
*/
|
||||
const treeNodeProps = buildProps({
|
||||
node: {
|
||||
type: definePropType(Object),
|
||||
default: () => mutable(EMPTY_NODE)
|
||||
},
|
||||
expanded: Boolean,
|
||||
checked: Boolean,
|
||||
indeterminate: Boolean,
|
||||
showCheckbox: Boolean,
|
||||
disabled: Boolean,
|
||||
current: Boolean,
|
||||
hiddenExpandIcon: Boolean,
|
||||
itemSize
|
||||
});
|
||||
const treeNodeContentProps = buildProps({ node: {
|
||||
type: definePropType(Object),
|
||||
required: true
|
||||
} });
|
||||
const NODE_CLICK = "node-click";
|
||||
const NODE_DROP = "node-drop";
|
||||
const NODE_EXPAND = "node-expand";
|
||||
const NODE_COLLAPSE = "node-collapse";
|
||||
const CURRENT_CHANGE = "current-change";
|
||||
const NODE_CHECK = "check";
|
||||
const NODE_CHECK_CHANGE = "check-change";
|
||||
const NODE_CONTEXTMENU = "node-contextmenu";
|
||||
const treeEmits = {
|
||||
[NODE_CLICK]: (data, node, e) => data && node && e,
|
||||
[NODE_DROP]: (data, node, e) => data && node && e,
|
||||
[NODE_EXPAND]: (data, node) => data && node,
|
||||
[NODE_COLLAPSE]: (data, node) => data && node,
|
||||
[CURRENT_CHANGE]: (data, node) => data && node,
|
||||
[NODE_CHECK]: (data, checkedInfo) => data && checkedInfo,
|
||||
[NODE_CHECK_CHANGE]: (data, checked) => data && isBoolean(checked),
|
||||
[NODE_CONTEXTMENU]: (evt, data, node) => evt && data && node
|
||||
};
|
||||
const treeNodeEmits = {
|
||||
click: (node, e) => !!(node && e),
|
||||
drop: (node, e) => !!(node && e),
|
||||
toggle: (node) => !!node,
|
||||
check: (node, checked) => node && isBoolean(checked)
|
||||
};
|
||||
|
||||
//#endregion
|
||||
export { CURRENT_CHANGE, EMPTY_NODE, NODE_CHECK, NODE_CHECK_CHANGE, NODE_CLICK, NODE_COLLAPSE, NODE_CONTEXTMENU, NODE_DROP, NODE_EXPAND, ROOT_TREE_INJECTION_KEY, SetOperationEnum, TreeOptionsEnum, treeEmits, treeNodeContentProps, treeNodeEmits, treeNodeProps, treeProps };
|
||||
//# sourceMappingURL=virtual-tree.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+5
@@ -0,0 +1,5 @@
|
||||
import "../../base/style/css.mjs";
|
||||
import "../../checkbox/style/css.mjs";
|
||||
import "../../virtual-list/style/css.mjs";
|
||||
import "../../text/style/css.mjs";
|
||||
import "element-plus/theme-chalk/el-tree.css";
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import "../../base/style/index.mjs";
|
||||
import "../../checkbox/style/index.mjs";
|
||||
import "../../virtual-list/style/index.mjs";
|
||||
import "../../text/style/index.mjs";
|
||||
import "element-plus/theme-chalk/src/tree.scss";
|
||||
Reference in New Issue
Block a user