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,5 @@
import TreeV2 from './src/tree.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElTreeV2: SFCWithInstall<typeof TreeV2>;
export default ElTreeV2;
export type { TreeV2Instance } from './src/instance';

View File

@@ -0,0 +1,7 @@
import TreeV2 from './src/tree.mjs';
import { withInstall } from '../../utils/vue/install.mjs';
const ElTreeV2 = withInstall(TreeV2);
export { ElTreeV2, ElTreeV2 as default };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","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"],"names":[],"mappings":";;;AAEY,MAAC,QAAQ,GAAG,WAAW,CAAC,MAAM;;;;"}

View File

@@ -0,0 +1,15 @@
import type { CheckboxValueType } from 'element-plus/es/components/checkbox';
import type { Ref } from 'vue';
import type { Tree, TreeKey, TreeNode, TreeNodeData, TreeProps } from '../types';
export declare function useCheck(props: TreeProps, tree: Ref<Tree | undefined>): {
updateCheckedKeys: () => void;
toggleCheckbox: (node: TreeNode, isChecked: CheckboxValueType, nodeClick?: boolean, immediateUpdate?: boolean) => void;
isChecked: (node: TreeNode) => boolean;
isIndeterminate: (node: TreeNode) => boolean;
getCheckedKeys: (leafOnly?: boolean) => TreeKey[];
getCheckedNodes: (leafOnly?: boolean) => TreeNodeData[];
getHalfCheckedKeys: () => TreeKey[];
getHalfCheckedNodes: () => TreeNodeData[];
setChecked: (key: TreeKey, isChecked: boolean) => void;
setCheckedKeys: (keys: TreeKey[]) => void;
};

View File

@@ -0,0 +1,183 @@
import { ref, getCurrentInstance, watch, nextTick } from 'vue';
import { NODE_CHECK, NODE_CHECK_CHANGE, SetOperationEnum } from '../virtual-tree.mjs';
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 - 1; level >= 1; --level) {
const nodes = levelTreeNodeMap.get(level);
if (!nodes)
continue;
nodes.forEach((node) => {
const children = node.children;
if (children) {
let allChecked = true;
let hasChecked = false;
for (const childNode of children) {
const key = childNode.key;
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);
}
}
});
}
indeterminateKeys.value = indeterminateKeySet;
};
const isChecked = (node) => checkedKeys.value.has(node.key);
const isIndeterminate = (node) => indeterminateKeys.value.has(node.key);
const toggleCheckbox = (node, isChecked2, nodeClick = true, immediateUpdate = true) => {
const checkedKeySet = checkedKeys.value;
const toggle = (node2, checked) => {
checkedKeySet[checked ? SetOperationEnum.ADD : SetOperationEnum.DELETE](node2.key);
const children = node2.children;
if (!props.checkStrictly && children) {
children.forEach((childNode) => {
if (!childNode.disabled) {
toggle(childNode, checked);
}
});
}
};
toggle(node, isChecked2);
if (immediateUpdate) {
updateCheckedKeys();
}
if (nodeClick) {
afterNodeCheck(node, isChecked2);
}
};
const afterNodeCheck = (node, checked) => {
const { checkedNodes, checkedKeys: checkedKeys2 } = getChecked();
const { halfCheckedNodes, halfCheckedKeys } = getHalfChecked();
emit(NODE_CHECK, node.data, {
checkedKeys: checkedKeys2,
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 == null ? void 0 : 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 == null ? void 0 : 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, isChecked2) {
if ((tree == null ? void 0 : tree.value) && props.showCheckbox) {
const node = tree.value.treeNodeMap.get(key);
if (node) {
toggleCheckbox(node, isChecked2, false);
}
}
}
function _setCheckedKeys(keys) {
if (tree == null ? void 0 : tree.value) {
const { treeNodeMap } = tree.value;
if (props.showCheckbox && treeNodeMap && (keys == null ? void 0 : 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
};
}
export { useCheck };
//# sourceMappingURL=useCheck.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,8 @@
import type { Ref } from 'vue';
import type { Tree, TreeKey, TreeNode, TreeProps } from '../types';
export declare function useFilter(props: TreeProps, tree: Ref<Tree | undefined>): {
hiddenExpandIconKeySet: Ref<Set<TreeKey>>;
hiddenNodeKeySet: Ref<Set<TreeKey>>;
doFilter: (query: string) => Set<TreeKey> | undefined;
isForceHiddenExpandIcon: (node: TreeNode) => boolean;
};

View File

@@ -0,0 +1,76 @@
import { ref, computed } from 'vue';
import { isFunction } from '@vue/shared';
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) {
var _a;
if (!filterable.value) {
return;
}
const expandKeySet = /* @__PURE__ */ new Set();
const hiddenExpandIconKeys = hiddenExpandIconKeySet.value;
const hiddenKeys = hiddenNodeKeySet.value;
const family = [];
const nodes = ((_a = tree.value) == null ? void 0 : _a.treeNodes) || [];
const filter = props.filterMethod;
hiddenKeys.clear();
function traverse(nodes2) {
nodes2.forEach((node) => {
family.push(node);
if (filter == null ? void 0 : 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
};
}
export { useFilter };
//# sourceMappingURL=useFilter.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,202 @@
import type { Alignment as ScrollStrategy } from 'element-plus/es/components/virtual-list';
import type { SetupContext } from 'vue';
import type { treeEmits } from '../virtual-tree';
import type { CheckboxValueType } from 'element-plus/es/components/checkbox';
import type { Tree, TreeData, TreeKey, TreeNode, TreeNodeData, TreeProps } from '../types';
export declare function useTree(props: TreeProps, emit: SetupContext<typeof treeEmits>['emit']): {
tree: import("vue").ShallowRef<Tree | undefined>;
flattenTree: import("vue").ComputedRef<TreeNode[]>;
isNotEmpty: import("vue").ComputedRef<boolean>;
listRef: import("vue").Ref<import("vue").DefineComponent<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("element-plus/es/components/virtual-list").ItemSize) | (() => number | import("element-plus/es/components/virtual-list").ItemSize) | ((new (...args: any[]) => number | import("element-plus/es/components/virtual-list").ItemSize) | (() => number | import("element-plus/es/components/virtual-list").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}, {
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;
};
clientSize: import("vue").ComputedRef<string | number | undefined>;
estimatedTotalSize: import("vue").ComputedRef<number>;
windowStyle: import("vue").ComputedRef<(string | import("vue").CSSProperties | import("vue").StyleValue[] | {
[x: string]: string;
position: string;
WebkitOverflowScrolling: string;
willChange: string;
} | undefined)[]>;
windowRef: import("vue").Ref<HTMLElement | undefined>;
innerRef: import("vue").Ref<HTMLElement | undefined>;
innerStyle: import("vue").ComputedRef<{
height: string;
pointerEvents: string | undefined;
width: string;
}>;
itemsToRender: import("vue").ComputedRef<number[]>;
scrollbarRef: import("vue").Ref<any>;
states: import("vue").Ref<{
isScrolling: boolean;
scrollDir: string;
scrollOffset: number;
updateRequested: boolean;
isScrollbarDragging: boolean;
scrollbarAlwaysOn: boolean;
}>;
getItemStyle: (idx: number) => import("vue").CSSProperties;
onScroll: (e: Event) => void;
onScrollbarScroll: (distanceToGo: number, totalSteps: number) => void;
onWheel: (e: WheelEvent) => void;
scrollTo: (offset: number) => void;
scrollToItem: (idx: number, alignment?: ScrollStrategy) => void;
resetScrollTop: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "itemRendered")[], "scroll" | "itemRendered", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly className: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly containerElement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown, "div", boolean>;
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any[]) | (() => any[]) | ((new (...args: any[]) => any[]) | (() => any[]))[], unknown, unknown, () => [], boolean>;
readonly direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl", never, "ltr", false>;
readonly height: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly innerElement: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
readonly style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly useIsScrolling: BooleanConstructor;
readonly width: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
readonly cache: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 2, false>;
readonly estimatedItemSize: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", never, "vertical", false>;
readonly initScrollOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, never, never, 0, false>;
readonly total: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly itemSize: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => number | import("element-plus/es/components/virtual-list").ItemSize) | (() => number | import("element-plus/es/components/virtual-list").ItemSize) | ((new (...args: any[]) => number | import("element-plus/es/components/virtual-list").ItemSize) | (() => number | import("element-plus/es/components/virtual-list").ItemSize))[], never, never>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
onItemRendered?: ((...args: any[]) => any) | undefined;
}, {
readonly data: any[];
readonly direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
readonly layout: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
readonly className: string;
readonly containerElement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | Element) | (() => string | Element) | ((new (...args: any[]) => string | Element) | (() => string | Element))[], unknown, unknown>;
readonly innerElement: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
readonly perfMode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly useIsScrolling: boolean;
readonly scrollbarAlwaysOn: boolean;
readonly cache: number;
readonly initScrollOffset: number;
}> | undefined>;
getKey: (node: TreeNodeData) => TreeKey;
getChildren: (node: TreeNodeData) => TreeNodeData[];
toggleExpand: (node: TreeNode) => void;
toggleCheckbox: (node: TreeNode, isChecked: CheckboxValueType, nodeClick?: boolean, immediateUpdate?: boolean) => void;
isChecked: (node: TreeNode) => boolean;
isIndeterminate: (node: TreeNode) => boolean;
isDisabled: (node: TreeNode) => boolean;
isCurrent: (node: TreeNode) => boolean;
isForceHiddenExpandIcon: (node: TreeNode) => boolean;
handleNodeClick: (node: TreeNode, e: MouseEvent) => void;
handleNodeDrop: (node: TreeNode, e: DragEvent) => void;
handleNodeCheck: (node: TreeNode, checked: CheckboxValueType) => void;
getCurrentNode: () => TreeNodeData | undefined;
getCurrentKey: () => TreeKey | undefined;
setCurrentKey: (key: TreeKey) => void;
getCheckedKeys: (leafOnly?: boolean) => TreeKey[];
getCheckedNodes: (leafOnly?: boolean) => TreeNodeData[];
getHalfCheckedKeys: () => TreeKey[];
getHalfCheckedNodes: () => TreeNodeData[];
setChecked: (key: TreeKey, isChecked: boolean) => void;
setCheckedKeys: (keys: TreeKey[]) => void;
filter: (query: string) => void;
setData: (data: TreeData) => void;
getNode: (data: TreeKey | TreeNodeData) => TreeNode | undefined;
expandNode: (node: TreeNode) => void;
collapseNode: (node: TreeNode) => void;
setExpandedKeys: (keys: TreeKey[]) => void;
scrollToNode: (key: TreeKey, strategy?: ScrollStrategy) => void;
scrollTo: (offset: number) => void;
};

View File

@@ -0,0 +1,289 @@
import { ref, shallowRef, computed, watch } from 'vue';
import { TreeOptionsEnum, NODE_CLICK, NODE_DROP, CURRENT_CHANGE, NODE_EXPAND, NODE_COLLAPSE } from '../virtual-tree.mjs';
import { useCheck } from './useCheck.mjs';
import { useFilter } from './useFilter.mjs';
import { isObject } from '@vue/shared';
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(() => {
var _a;
return ((_a = props.props) == null ? void 0 : _a.value) || TreeOptionsEnum.KEY;
});
const childrenKey = computed(() => {
var _a;
return ((_a = props.props) == null ? void 0 : _a.children) || TreeOptionsEnum.CHILDREN;
});
const disabledKey = computed(() => {
var _a;
return ((_a = props.props) == null ? void 0 : _a.disabled) || TreeOptionsEnum.DISABLED;
});
const labelKey = computed(() => {
var _a;
return ((_a = props.props) == null ? void 0 : _a.label) || TreeOptionsEnum.LABEL;
});
const flattenTree = computed(() => {
var _a;
const expandedKeys = expandedKeySet.value;
const hiddenKeys = hiddenNodeKeySet.value;
const flattenNodes = [];
const nodes = ((_a = tree.value) == null ? void 0 : _a.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) {
var _a;
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, []);
}
(_a = levelTreeNodeMap.get(level)) == null ? void 0 : _a.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) {
const expandedKeys = expandedKeySet.value;
if (expandedKeys.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);
expandedKeySet.value.delete(node.key);
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 == null ? void 0 : treeNode.level)) {
keySet.delete(key);
treeNode.expanded = false;
}
});
}
keySet.add(node.key);
node.expanded = true;
emit(NODE_EXPAND, node.data, node);
}
function collapseNode(node) {
expandedKeySet.value.delete(node.key);
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() {
var _a, _b;
if (!currentKey.value)
return void 0;
return (_b = (_a = tree.value) == null ? void 0 : _a.treeNodeMap.get(currentKey.value)) == null ? void 0 : _b.data;
}
function getCurrentKey() {
return currentKey.value;
}
function setCurrentKey(key) {
currentKey.value = key;
}
function setData(data) {
tree.value = createTree(data);
}
function getNode(data) {
var _a;
const key = isObject(data) ? getKey(data) : data;
return (_a = tree.value) == null ? void 0 : _a.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) {
var _a;
(_a = listRef.value) == null ? void 0 : _a.scrollTo(offset);
}
watch(() => props.currentNodeKey, (key) => {
currentKey.value = key;
}, {
immediate: true
});
watch(() => props.defaultExpandedKeys, (key) => {
expandedKeySet.value = new Set(key);
}, {
immediate: true
});
watch(() => props.data, (data) => {
setData(data);
}, {
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
};
}
export { useTree };
//# sourceMappingURL=useTree.mjs.map

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -0,0 +1,2 @@
//# sourceMappingURL=instance.mjs.map

View File

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

View File

@@ -0,0 +1,20 @@
declare const _default: import("vue").DefineComponent<{
readonly node: {
readonly type: import("vue").PropType<import("./types").TreeNode>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: 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<{
readonly node: {
readonly type: import("vue").PropType<import("./types").TreeNode>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>>, {}>;
export default _default;

View File

@@ -0,0 +1,21 @@
import { defineComponent, inject, h } from 'vue';
import { ElText } from '../../text/index.mjs';
import { treeNodeContentProps, ROOT_TREE_INJECTION_KEY } from './virtual-tree.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
var ElNodeContent = 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 == null ? void 0 : tree.ctx.slots.default) ? tree.ctx.slots.default({ node, data }) : h(ElText, { tag: "span", truncated: true, class: ns.be("node", "label") }, () => [node == null ? void 0 : node.label]);
};
}
});
export { ElNodeContent as default };
//# sourceMappingURL=tree-node-content.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"tree-node-content.mjs","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"],"names":[],"mappings":";;;;;AAIA,oBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,mBAAmB;AAC3B,EAAE,KAAK,EAAE,oBAAoB;AAC7B,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,IAAI,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;AACjD,IAAI,MAAM,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AACpC,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AAC9B,MAAM,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;AAC5B,MAAM,OAAO,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAChO,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}

View File

@@ -0,0 +1,133 @@
import { defineComponent, inject, computed, openBlock, createElementBlock, normalizeClass, unref, withModifiers, createElementVNode, normalizeStyle, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, createVNode } from 'vue';
import { ElIcon } from '../../icon/index.mjs';
import { CaretRight } from '@element-plus/icons-vue';
import { ElCheckbox } from '../../checkbox/index.mjs';
import ElNodeContent from './tree-node-content.mjs';
import { treeNodeProps, treeNodeEmits, ROOT_TREE_INJECTION_KEY, NODE_CONTEXTMENU } from './virtual-tree.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { isFunction, isString } from '@vue/shared';
const __default__ = defineComponent({
name: "ElTreeNode"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: treeNodeProps,
emits: treeNodeEmits,
setup(__props, { emit }) {
const props = __props;
const tree = inject(ROOT_TREE_INJECTION_KEY);
const ns = useNamespace("tree");
const indent = computed(() => {
var _a;
return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16;
});
const icon = computed(() => {
var _a;
return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : CaretRight;
});
const getNodeClass = (node) => {
const nodeClassFunc = tree == null ? void 0 : 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) => {
var _a, _b, _c, _d;
if ((_c = (_b = (_a = tree == null ? void 0 : tree.instance) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props) == null ? void 0 : _c["onNodeContextmenu"]) {
event.stopPropagation();
event.preventDefault();
}
tree == null ? void 0 : tree.ctx.emit(NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node);
};
return (_ctx, _cache) => {
var _a, _b, _c;
return openBlock(), createElementBlock("div", {
ref: "node$",
class: normalizeClass([
unref(ns).b("node"),
unref(ns).is("expanded", _ctx.expanded),
unref(ns).is("current", _ctx.current),
unref(ns).is("focusable", !_ctx.disabled),
unref(ns).is("checked", !_ctx.disabled && _ctx.checked),
getNodeClass(_ctx.node)
]),
role: "treeitem",
tabindex: "-1",
"aria-expanded": _ctx.expanded,
"aria-disabled": _ctx.disabled,
"aria-checked": _ctx.checked,
"data-key": (_a = _ctx.node) == null ? void 0 : _a.key,
onClick: withModifiers(handleClick, ["stop"]),
onContextmenu: handleContextMenu,
onDragover: withModifiers(() => {
}, ["prevent"]),
onDragenter: withModifiers(() => {
}, ["prevent"]),
onDrop: withModifiers(handleDrop, ["stop"])
}, [
createElementVNode("div", {
class: normalizeClass(unref(ns).be("node", "content")),
style: normalizeStyle({
paddingLeft: `${(_ctx.node.level - 1) * unref(indent)}px`,
height: _ctx.itemSize + "px"
})
}, [
unref(icon) ? (openBlock(), createBlock(unref(ElIcon), {
key: 0,
class: normalizeClass([
unref(ns).is("leaf", !!((_b = _ctx.node) == null ? void 0 : _b.isLeaf)),
unref(ns).is("hidden", _ctx.hiddenExpandIcon),
{
expanded: !((_c = _ctx.node) == null ? void 0 : _c.isLeaf) && _ctx.expanded
},
unref(ns).be("node", "expand-icon")
]),
onClick: withModifiers(handleExpandIconClick, ["stop"])
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(unref(icon))))
]),
_: 1
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
_ctx.showCheckbox ? (openBlock(), createBlock(unref(ElCheckbox), {
key: 1,
"model-value": _ctx.checked,
indeterminate: _ctx.indeterminate,
disabled: _ctx.disabled,
onChange: handleCheckChange,
onClick: withModifiers(() => {
}, ["stop"])
}, null, 8, ["model-value", "indeterminate", "disabled", "onClick"])) : createCommentVNode("v-if", true),
createVNode(unref(ElNodeContent), {
node: { ..._ctx.node, expanded: _ctx.expanded }
}, null, 8, ["node"])
], 6)
], 42, ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick", "onDragover", "onDragenter", "onDrop"]);
};
}
});
var ElTreeNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tree-node.vue"]]);
export { ElTreeNode as default };
//# sourceMappingURL=tree-node.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,52 @@
import type { CheckboxValueType } from 'element-plus/es/components/checkbox';
import type { TreeNode } from './types';
declare const _default: import("vue").DefineComponent<{
readonly node: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TreeNode) | (() => TreeNode) | ((new (...args: any[]) => TreeNode) | (() => TreeNode))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{
readonly key: -1;
readonly level: -1;
readonly data: {};
}>, boolean>;
readonly expanded: BooleanConstructor;
readonly checked: BooleanConstructor;
readonly indeterminate: BooleanConstructor;
readonly showCheckbox: BooleanConstructor;
readonly disabled: BooleanConstructor;
readonly current: BooleanConstructor;
readonly hiddenExpandIcon: BooleanConstructor;
readonly itemSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
click: (node: TreeNode, e: MouseEvent) => void;
drop: (node: TreeNode, e: DragEvent) => void;
toggle: (node: TreeNode) => void;
check: (node: TreeNode, checked: CheckboxValueType) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly node: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TreeNode) | (() => TreeNode) | ((new (...args: any[]) => TreeNode) | (() => TreeNode))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{
readonly key: -1;
readonly level: -1;
readonly data: {};
}>, boolean>;
readonly expanded: BooleanConstructor;
readonly checked: BooleanConstructor;
readonly indeterminate: BooleanConstructor;
readonly showCheckbox: BooleanConstructor;
readonly disabled: BooleanConstructor;
readonly current: BooleanConstructor;
readonly hiddenExpandIcon: BooleanConstructor;
readonly itemSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
}>> & {
onDrop?: ((node: TreeNode, e: DragEvent) => any) | undefined;
onClick?: ((node: TreeNode, e: MouseEvent) => any) | undefined;
onToggle?: ((node: TreeNode) => any) | undefined;
onCheck?: ((node: TreeNode, checked: CheckboxValueType) => any) | undefined;
}, {
readonly disabled: boolean;
readonly expanded: boolean;
readonly current: boolean;
readonly indeterminate: boolean;
readonly checked: boolean;
readonly node: TreeNode;
readonly itemSize: number;
readonly showCheckbox: boolean;
readonly hiddenExpandIcon: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,142 @@
import { defineComponent, useSlots, computed, provide, getCurrentInstance, openBlock, createElementBlock, normalizeClass, unref, createBlock, withCtx, normalizeStyle, renderSlot, createElementVNode, toDisplayString } from 'vue';
import { useTree } from './composables/useTree.mjs';
import ElTreeNode from './tree-node.mjs';
import { treeProps, treeEmits, ROOT_TREE_INJECTION_KEY } from './virtual-tree.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import FixedSizeList from '../../virtual-list/src/components/fixed-size-list.mjs';
import { formItemContextKey } from '../../form/src/constants.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
const __default__ = defineComponent({
name: "ElTreeV2"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: treeProps,
emits: treeEmits,
setup(__props, { expose, emit }) {
const props = __props;
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")]: _ctx.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: _ctx.height,
"item-size": unref(treeNodeSize),
"perf-mode": _ctx.perfMode,
"scrollbar-always-on": _ctx.scrollbarAlwaysOn
}, {
default: withCtx(({ data, index, style }) => [
(openBlock(), createBlock(ElTreeNode, {
key: data[index].key,
style: normalizeStyle(style),
node: data[index],
expanded: data[index].expanded,
"show-checkbox": _ctx.showCheckbox,
checked: unref(isChecked)(data[index]),
indeterminate: unref(isIndeterminate)(data[index]),
"item-size": unref(treeNodeSize),
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", {}, () => {
var _a;
return [
createElementVNode("span", {
class: normalizeClass(unref(ns).e("empty-text"))
}, toDisplayString((_a = _ctx.emptyText) != null ? _a : unref(t)("el.tree.emptyText")), 3)
];
})
], 2))
], 2);
};
}
});
var TreeV2 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tree.vue"]]);
export { TreeV2 as default };
//# sourceMappingURL=tree.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"tree.mjs","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 { ROOT_TREE_INJECTION_KEY, treeEmits, treeProps } from './virtual-tree'\n\ndefineOptions({\n name: 'ElTreeV2',\n})\n\nconst props = defineProps(treeProps)\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"],"names":[],"mappings":";;;;;;;;;;mCAuDc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,IAAA,MAAM,YAAe,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,CAAA,CAAA;AAElD,IAAA,OAAA,CAAQ,uBAAyB,EAAA;AAAA,MAC/B,GAAK,EAAA;AAAA,QACH,IAAA;AAAA,QACA,KAAA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,UAAU,kBAAmB,EAAA;AAAA,KAC9B,CAAA,CAAA;AACD,IAAA,OAAA,CAAQ,oBAAoB,KAAS,CAAA,CAAA,CAAA;AACrC,IAAM,MAAA,EAAE,CAAE,EAAA,GAAI,SAAU,EAAA,CAAA;AACxB,IAAM,MAAA,EAAA,GAAK,aAAa,MAAM,CAAA,CAAA;AAC9B,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,uBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MAAA,cAAA;AAAA,MAEA,cAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,MACA,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,KACA,GAAA,OAAA,CAAA,KAAA,EAAA,IAAA,CAAA,CAAA;AAAA,IACF,MAAY,CAAA;AAEZ,MAAa,cAAA;AAAA,MACX,cAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,MACA,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,KACA,CAAA,CAAA;AAAA,IACF,OAAC,CAAA,IAAA,EAAA,MAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,159 @@
declare function __VLS_template(): {
empty?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./types").TreeData) | (() => import("./types").TreeData) | ((new (...args: any[]) => import("./types").TreeData) | (() => import("./types").TreeData))[], unknown, unknown, () => [], boolean>;
readonly emptyText: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly height: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
readonly props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./types").TreeOptionProps) | (() => import("./types").TreeOptionProps) | ((new (...args: any[]) => import("./types").TreeOptionProps) | (() => import("./types").TreeOptionProps))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{
readonly children: import("./virtual-tree").TreeOptionsEnum.CHILDREN;
readonly label: import("./virtual-tree").TreeOptionsEnum.LABEL;
readonly disabled: import("./virtual-tree").TreeOptionsEnum.DISABLED;
readonly value: import("./virtual-tree").TreeOptionsEnum.KEY;
readonly class: import("./virtual-tree").TreeOptionsEnum.CLASS;
}>, boolean>;
readonly highlightCurrent: BooleanConstructor;
readonly showCheckbox: BooleanConstructor;
readonly defaultCheckedKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./types").TreeKey[]) | (() => import("./types").TreeKey[]) | ((new (...args: any[]) => import("./types").TreeKey[]) | (() => import("./types").TreeKey[]))[], unknown, unknown, () => [], boolean>;
readonly checkStrictly: BooleanConstructor;
readonly defaultExpandedKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./types").TreeKey[]) | (() => import("./types").TreeKey[]) | ((new (...args: any[]) => import("./types").TreeKey[]) | (() => import("./types").TreeKey[]))[], unknown, unknown, () => [], boolean>;
readonly indent: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
readonly itemSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
readonly icon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly expandOnClickNode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly checkOnClickNode: BooleanConstructor;
readonly checkOnClickLeaf: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly currentNodeKey: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | number) | (() => import("./types").TreeKey) | ((new (...args: any[]) => string | number) | (() => import("./types").TreeKey))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly accordion: BooleanConstructor;
readonly filterMethod: {
readonly type: import("vue").PropType<import("./types").FilterMethod>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
}, {
toggleCheckbox: (node: import("./types").TreeNode, isChecked: import("element-plus").CheckboxValueType, nodeClick?: boolean, immediateUpdate?: boolean) => void;
getCurrentNode: () => import("./types").TreeNodeData | undefined;
getCurrentKey: () => import("./types").TreeKey | undefined;
setCurrentKey: (key: import("./types").TreeKey) => void;
getCheckedKeys: (leafOnly?: boolean) => import("./types").TreeKey[];
getCheckedNodes: (leafOnly?: boolean) => import("./types").TreeNodeData[];
getHalfCheckedKeys: () => import("./types").TreeKey[];
getHalfCheckedNodes: () => import("./types").TreeNodeData[];
setChecked: (key: import("./types").TreeKey, isChecked: boolean) => void;
setCheckedKeys: (keys: import("./types").TreeKey[]) => void;
filter: (query: string) => void;
setData: (data: import("./types").TreeData) => void;
getNode: (data: import("./types").TreeKey | import("./types").TreeNodeData) => import("./types").TreeNode | undefined;
expandNode: (node: import("./types").TreeNode) => void;
collapseNode: (node: import("./types").TreeNode) => void;
setExpandedKeys: (keys: import("./types").TreeKey[]) => void;
scrollToNode: (key: import("./types").TreeKey, strategy?: import("element-plus/es/components/virtual-list").Alignment) => void;
scrollTo: (offset: number) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
check: (data: import("element-plus").TreeNodeData, checkedInfo: import("./types").CheckedInfo) => void;
"current-change": (data: import("element-plus").TreeNodeData, node: import("./types").TreeNode) => void;
"node-drop": (data: import("element-plus").TreeNodeData, node: import("./types").TreeNode, e: DragEvent) => void;
"node-expand": (data: import("element-plus").TreeNodeData, node: import("./types").TreeNode) => void;
"check-change": (data: import("element-plus").TreeNodeData, checked: boolean) => void;
"node-click": (data: import("element-plus").TreeNodeData, node: import("./types").TreeNode, e: MouseEvent) => void;
"node-contextmenu": (evt: Event, data: import("element-plus").TreeNodeData, node: import("./types").TreeNode) => void;
"node-collapse": (data: import("element-plus").TreeNodeData, node: import("./types").TreeNode) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./types").TreeData) | (() => import("./types").TreeData) | ((new (...args: any[]) => import("./types").TreeData) | (() => import("./types").TreeData))[], unknown, unknown, () => [], boolean>;
readonly emptyText: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly height: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
readonly props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./types").TreeOptionProps) | (() => import("./types").TreeOptionProps) | ((new (...args: any[]) => import("./types").TreeOptionProps) | (() => import("./types").TreeOptionProps))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{
readonly children: import("./virtual-tree").TreeOptionsEnum.CHILDREN;
readonly label: import("./virtual-tree").TreeOptionsEnum.LABEL;
readonly disabled: import("./virtual-tree").TreeOptionsEnum.DISABLED;
readonly value: import("./virtual-tree").TreeOptionsEnum.KEY;
readonly class: import("./virtual-tree").TreeOptionsEnum.CLASS;
}>, boolean>;
readonly highlightCurrent: BooleanConstructor;
readonly showCheckbox: BooleanConstructor;
readonly defaultCheckedKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./types").TreeKey[]) | (() => import("./types").TreeKey[]) | ((new (...args: any[]) => import("./types").TreeKey[]) | (() => import("./types").TreeKey[]))[], unknown, unknown, () => [], boolean>;
readonly checkStrictly: BooleanConstructor;
readonly defaultExpandedKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./types").TreeKey[]) | (() => import("./types").TreeKey[]) | ((new (...args: any[]) => import("./types").TreeKey[]) | (() => import("./types").TreeKey[]))[], unknown, unknown, () => [], boolean>;
readonly indent: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
readonly itemSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
readonly icon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly expandOnClickNode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly checkOnClickNode: BooleanConstructor;
readonly checkOnClickLeaf: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly currentNodeKey: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | number) | (() => import("./types").TreeKey) | ((new (...args: any[]) => string | number) | (() => import("./types").TreeKey))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly accordion: BooleanConstructor;
readonly filterMethod: {
readonly type: import("vue").PropType<import("./types").FilterMethod>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
}>> & {
"onCurrent-change"?: ((data: import("element-plus").TreeNodeData, node: import("./types").TreeNode) => any) | undefined;
"onNode-expand"?: ((data: import("element-plus").TreeNodeData, node: import("./types").TreeNode) => any) | undefined;
onCheck?: ((data: import("element-plus").TreeNodeData, checkedInfo: import("./types").CheckedInfo) => any) | undefined;
"onNode-drop"?: ((data: import("element-plus").TreeNodeData, node: import("./types").TreeNode, e: DragEvent) => any) | undefined;
"onCheck-change"?: ((data: import("element-plus").TreeNodeData, checked: boolean) => any) | undefined;
"onNode-click"?: ((data: import("element-plus").TreeNodeData, node: import("./types").TreeNode, e: MouseEvent) => any) | undefined;
"onNode-contextmenu"?: ((evt: Event, data: import("element-plus").TreeNodeData, node: import("./types").TreeNode) => any) | undefined;
"onNode-collapse"?: ((data: import("element-plus").TreeNodeData, node: import("./types").TreeNode) => any) | undefined;
}, {
readonly data: import("./types").TreeData;
readonly height: number;
readonly props: import("./types").TreeOptionProps;
readonly checkStrictly: boolean;
readonly checkOnClickNode: boolean;
readonly checkOnClickLeaf: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly accordion: boolean;
readonly perfMode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly scrollbarAlwaysOn: boolean;
readonly itemSize: number;
readonly indent: number;
readonly defaultCheckedKeys: import("./types").TreeKey[];
readonly defaultExpandedKeys: import("./types").TreeKey[];
readonly showCheckbox: boolean;
readonly expandOnClickNode: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly highlightCurrent: boolean;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,45 @@
import type { ComponentInternalInstance, ExtractPropTypes, SetupContext, __ExtractPublicPropTypes } from 'vue';
import type { treeEmits, treeProps } from './virtual-tree';
export type TreeNodeData = Record<string, any>;
export type TreeData = TreeNodeData[];
export type TreeKey = string | number;
export interface TreeOptionProps {
children?: string;
label?: string;
value?: string;
disabled?: string;
class?: (data: TreeNodeData, node: TreeNode) => string | {
[key: string]: boolean;
};
}
export type TreeProps = ExtractPropTypes<typeof treeProps>;
export type TreePropsPublic = __ExtractPublicPropTypes<typeof treeProps>;
export interface TreeNode {
key: TreeKey;
level: number;
parent?: TreeNode;
children?: TreeNode[];
data: TreeNodeData;
disabled?: boolean;
label?: string;
isLeaf?: boolean;
expanded?: boolean;
}
export interface TreeContext {
ctx: Omit<SetupContext<typeof treeEmits>, 'expose' | 'attrs'>;
instance: ComponentInternalInstance;
props: TreeProps;
}
export interface Tree {
treeNodeMap: Map<TreeKey, TreeNode>;
levelTreeNodeMap: Map<number, TreeNode[]>;
treeNodes: TreeNode[];
maxLevel: number;
}
export type FilterMethod = (query: string, data: TreeNodeData, node: TreeNode) => boolean;
export interface CheckedInfo {
checkedKeys: TreeKey[];
checkedNodes: TreeData;
halfCheckedKeys: TreeKey[];
halfCheckedNodes: TreeData;
}

View File

@@ -0,0 +1,2 @@
//# sourceMappingURL=types.mjs.map

View File

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

View File

@@ -0,0 +1,111 @@
import type { CheckboxValueType } from 'element-plus/es/components/checkbox';
import type { InjectionKey } from 'vue';
import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type';
import type { CheckedInfo, FilterMethod, TreeContext, TreeData, TreeKey, TreeNode, TreeOptionProps } from './types';
export declare const ROOT_TREE_INJECTION_KEY: InjectionKey<TreeContext>;
export declare enum TreeOptionsEnum {
KEY = "id",
LABEL = "label",
CHILDREN = "children",
DISABLED = "disabled",
CLASS = ""
}
export declare const enum SetOperationEnum {
ADD = "add",
DELETE = "delete"
}
export declare const treeProps: {
readonly data: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TreeData) | (() => TreeData) | ((new (...args: any[]) => TreeData) | (() => TreeData))[], unknown, unknown, () => [], boolean>;
readonly emptyText: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly height: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
readonly props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TreeOptionProps) | (() => TreeOptionProps) | ((new (...args: any[]) => TreeOptionProps) | (() => TreeOptionProps))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{
readonly children: TreeOptionsEnum.CHILDREN;
readonly label: TreeOptionsEnum.LABEL;
readonly disabled: TreeOptionsEnum.DISABLED;
readonly value: TreeOptionsEnum.KEY;
readonly class: TreeOptionsEnum.CLASS;
}>, boolean>;
readonly highlightCurrent: BooleanConstructor;
readonly showCheckbox: BooleanConstructor;
readonly defaultCheckedKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TreeKey[]) | (() => TreeKey[]) | ((new (...args: any[]) => TreeKey[]) | (() => TreeKey[]))[], unknown, unknown, () => [], boolean>;
readonly checkStrictly: BooleanConstructor;
readonly defaultExpandedKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TreeKey[]) | (() => TreeKey[]) | ((new (...args: any[]) => TreeKey[]) | (() => TreeKey[]))[], unknown, unknown, () => [], boolean>;
readonly indent: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
readonly itemSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
readonly icon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly expandOnClickNode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly checkOnClickNode: BooleanConstructor;
readonly checkOnClickLeaf: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly currentNodeKey: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | number) | (() => TreeKey) | ((new (...args: any[]) => string | number) | (() => TreeKey))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly accordion: BooleanConstructor;
readonly filterMethod: {
readonly type: import("vue").PropType<FilterMethod>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly perfMode: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly scrollbarAlwaysOn: BooleanConstructor;
};
export declare const treeNodeProps: {
readonly node: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TreeNode) | (() => TreeNode) | ((new (...args: any[]) => TreeNode) | (() => TreeNode))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{
readonly key: -1;
readonly level: -1;
readonly data: {};
}>, boolean>;
readonly expanded: BooleanConstructor;
readonly checked: BooleanConstructor;
readonly indeterminate: BooleanConstructor;
readonly showCheckbox: BooleanConstructor;
readonly disabled: BooleanConstructor;
readonly current: BooleanConstructor;
readonly hiddenExpandIcon: BooleanConstructor;
readonly itemSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
};
export declare const treeNodeContentProps: {
readonly node: {
readonly type: import("vue").PropType<TreeNode>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
export declare const NODE_CLICK = "node-click";
export declare const NODE_DROP = "node-drop";
export declare const NODE_EXPAND = "node-expand";
export declare const NODE_COLLAPSE = "node-collapse";
export declare const CURRENT_CHANGE = "current-change";
export declare const NODE_CHECK = "check";
export declare const NODE_CHECK_CHANGE = "check-change";
export declare const NODE_CONTEXTMENU = "node-contextmenu";
export declare const treeEmits: {
"node-click": (data: TreeNodeData, node: TreeNode, e: MouseEvent) => MouseEvent;
"node-drop": (data: TreeNodeData, node: TreeNode, e: DragEvent) => DragEvent;
"node-expand": (data: TreeNodeData, node: TreeNode) => TreeNode;
"node-collapse": (data: TreeNodeData, node: TreeNode) => TreeNode;
"current-change": (data: TreeNodeData, node: TreeNode) => TreeNode;
check: (data: TreeNodeData, checkedInfo: CheckedInfo) => CheckedInfo;
"check-change": (data: TreeNodeData, checked: boolean) => boolean;
"node-contextmenu": (evt: Event, data: TreeNodeData, node: TreeNode) => TreeNode;
};
export declare const treeNodeEmits: {
click: (node: TreeNode, e: MouseEvent) => boolean;
drop: (node: TreeNode, e: DragEvent) => boolean;
toggle: (node: TreeNode) => boolean;
check: (node: TreeNode, checked: CheckboxValueType) => boolean;
};

View File

@@ -0,0 +1,138 @@
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { mutable } from '../../../utils/typescript.mjs';
import { iconPropType } from '../../../utils/vue/icon.mjs';
import { isBoolean } from '../../../utils/types.mjs';
const ROOT_TREE_INJECTION_KEY = Symbol();
const EMPTY_NODE = {
key: -1,
level: -1,
data: {}
};
var TreeOptionsEnum = /* @__PURE__ */ ((TreeOptionsEnum2) => {
TreeOptionsEnum2["KEY"] = "id";
TreeOptionsEnum2["LABEL"] = "label";
TreeOptionsEnum2["CHILDREN"] = "children";
TreeOptionsEnum2["DISABLED"] = "disabled";
TreeOptionsEnum2["CLASS"] = "";
return TreeOptionsEnum2;
})(TreeOptionsEnum || {});
var SetOperationEnum = /* @__PURE__ */ ((SetOperationEnum2) => {
SetOperationEnum2["ADD"] = "add";
SetOperationEnum2["DELETE"] = "delete";
return SetOperationEnum2;
})(SetOperationEnum || {});
const itemSize = {
type: Number,
default: 26
};
const treeProps = buildProps({
data: {
type: definePropType(Array),
default: () => mutable([])
},
emptyText: {
type: String
},
height: {
type: Number,
default: 200
},
props: {
type: definePropType(Object),
default: () => mutable({
children: "children" /* CHILDREN */,
label: "label" /* LABEL */,
disabled: "disabled" /* DISABLED */,
value: "id" /* KEY */,
class: "" /* 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
});
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)
};
export { CURRENT_CHANGE, 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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,5 @@
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/virtual-list/style/css';
import 'element-plus/es/components/text/style/css';

View File

@@ -0,0 +1,6 @@
import '../../base/style/css.mjs';
import 'element-plus/theme-chalk/el-tree.css';
import '../../checkbox/style/css.mjs';
import '../../virtual-list/style/css.mjs';
import '../../text/style/css.mjs';
//# sourceMappingURL=css.mjs.map

View File

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

View File

@@ -0,0 +1,5 @@
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/virtual-list/style';
import 'element-plus/es/components/text/style';

View File

@@ -0,0 +1,6 @@
import '../../base/style/index.mjs';
import 'element-plus/theme-chalk/src/tree.scss';
import '../../checkbox/style/index.mjs';
import '../../virtual-list/style/index.mjs';
import '../../text/style/index.mjs';
//# sourceMappingURL=index.mjs.map

View File

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