@v-c/tree 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DropIndicator.js +7 -11
- package/dist/Indent.js +6 -6
- package/dist/MotionTreeNode.js +8 -7
- package/dist/NodeList.d.ts +2 -0
- package/dist/NodeList.js +34 -30
- package/dist/Tree.d.ts +6 -3
- package/dist/Tree.js +33 -25
- package/dist/TreeNode.js +12 -7
- package/dist/contextTypes.d.ts +1 -1
- package/dist/contextTypes.js +5 -2
- package/dist/index.js +7 -6
- package/dist/inter.js +2 -0
- package/dist/util.js +2 -0
- package/dist/utils/conductUtil.js +2 -0
- package/dist/utils/diffUtil.js +2 -0
- package/dist/utils/keyUtil.js +2 -0
- package/dist/utils/treeUtil.d.ts +0 -1
- package/dist/utils/treeUtil.js +3 -4
- package/package.json +3 -3
package/dist/DropIndicator.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createVNode, defineComponent } from "vue";
|
|
2
|
-
|
|
2
|
+
//#region src/DropIndicator.tsx
|
|
3
|
+
var DropIndicator = /* @__PURE__ */ defineComponent((props) => {
|
|
3
4
|
return () => {
|
|
4
5
|
const style = {
|
|
5
6
|
pointerEvents: "none",
|
|
@@ -17,7 +18,6 @@ var DropIndicator_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
17
18
|
style.bottom = 0;
|
|
18
19
|
style.left = `${-props.dropLevelOffset * props.indent}px`;
|
|
19
20
|
break;
|
|
20
|
-
case 0:
|
|
21
21
|
default:
|
|
22
22
|
style.bottom = 0;
|
|
23
23
|
style.left = `${props.indent}px`;
|
|
@@ -27,22 +27,18 @@ var DropIndicator_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
27
27
|
};
|
|
28
28
|
}, {
|
|
29
29
|
props: {
|
|
30
|
-
dropPosition: {
|
|
31
|
-
required: true,
|
|
32
|
-
default: void 0
|
|
33
|
-
},
|
|
30
|
+
dropPosition: { required: true },
|
|
34
31
|
dropLevelOffset: {
|
|
35
32
|
type: Number,
|
|
36
|
-
required: true
|
|
37
|
-
default: void 0
|
|
33
|
+
required: true
|
|
38
34
|
},
|
|
39
35
|
indent: {
|
|
40
36
|
type: Number,
|
|
41
|
-
required: true
|
|
42
|
-
default: void 0
|
|
37
|
+
required: true
|
|
43
38
|
}
|
|
44
39
|
},
|
|
45
40
|
name: "DropIndicator",
|
|
46
41
|
inheritAttrs: false
|
|
47
42
|
});
|
|
48
|
-
|
|
43
|
+
//#endregion
|
|
44
|
+
export { DropIndicator as default };
|
package/dist/Indent.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { createVNode, defineComponent } from "vue";
|
|
2
2
|
import { clsx } from "@v-c/util";
|
|
3
|
-
|
|
3
|
+
//#region src/Indent.tsx
|
|
4
|
+
var Indent = /* @__PURE__ */ defineComponent((props) => {
|
|
4
5
|
return () => {
|
|
5
6
|
const { prefixCls, level, isStart, isEnd } = props;
|
|
6
7
|
const baseClassName = `${prefixCls}-indent-unit`;
|
|
@@ -21,13 +22,11 @@ var Indent_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
21
22
|
props: {
|
|
22
23
|
prefixCls: {
|
|
23
24
|
type: String,
|
|
24
|
-
required: true
|
|
25
|
-
default: void 0
|
|
25
|
+
required: true
|
|
26
26
|
},
|
|
27
27
|
level: {
|
|
28
28
|
type: Number,
|
|
29
|
-
required: true
|
|
30
|
-
default: void 0
|
|
29
|
+
required: true
|
|
31
30
|
},
|
|
32
31
|
isStart: {
|
|
33
32
|
type: Array,
|
|
@@ -43,4 +42,5 @@ var Indent_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
43
42
|
name: "Indent",
|
|
44
43
|
inheritAttrs: false
|
|
45
44
|
});
|
|
46
|
-
|
|
45
|
+
//#endregion
|
|
46
|
+
export { Indent as default };
|
package/dist/MotionTreeNode.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { TreeContextKey } from "./contextTypes.js";
|
|
2
2
|
import { getTreeNodeProps } from "./utils/treeUtil.js";
|
|
3
|
-
import
|
|
3
|
+
import TreeNode from "./TreeNode.js";
|
|
4
4
|
import { Transition, computed, createVNode, defineComponent, inject, mergeProps, onBeforeUnmount, ref, watch } from "vue";
|
|
5
5
|
import { clsx } from "@v-c/util";
|
|
6
6
|
import omit from "@v-c/util/dist/omit";
|
|
7
7
|
import { getTransitionProps } from "@v-c/util/dist/utils/transition";
|
|
8
|
-
|
|
8
|
+
//#region src/MotionTreeNode.tsx
|
|
9
|
+
var MotionTreeNode = /* @__PURE__ */ defineComponent((props) => {
|
|
9
10
|
const context = inject(TreeContextKey, null);
|
|
10
11
|
const prefixCls = computed(() => context?.prefixCls);
|
|
11
12
|
let hideTimer = null;
|
|
@@ -83,7 +84,7 @@ var MotionTreeNode_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
83
84
|
const restProps = { ...nodeData || {} };
|
|
84
85
|
delete restProps.children;
|
|
85
86
|
delete restProps.key;
|
|
86
|
-
return createVNode(
|
|
87
|
+
return createVNode(TreeNode, mergeProps(restProps, getTreeNodeProps(key, requiredProps), {
|
|
87
88
|
"title": title,
|
|
88
89
|
"active": active,
|
|
89
90
|
"data": nodeData,
|
|
@@ -94,7 +95,7 @@ var MotionTreeNode_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
94
95
|
}), null);
|
|
95
96
|
})])] });
|
|
96
97
|
}
|
|
97
|
-
return createVNode(
|
|
98
|
+
return createVNode(TreeNode, mergeProps(omit(props, [
|
|
98
99
|
"motion",
|
|
99
100
|
"motionNodes",
|
|
100
101
|
"motionType",
|
|
@@ -137,8 +138,7 @@ var MotionTreeNode_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
137
138
|
},
|
|
138
139
|
treeNodeRequiredProps: {
|
|
139
140
|
type: Object,
|
|
140
|
-
required: true
|
|
141
|
-
default: void 0
|
|
141
|
+
required: true
|
|
142
142
|
},
|
|
143
143
|
treeId: {
|
|
144
144
|
type: String,
|
|
@@ -320,4 +320,5 @@ var MotionTreeNode_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
320
320
|
name: "MotionTreeNode",
|
|
321
321
|
inheritAttrs: false
|
|
322
322
|
});
|
|
323
|
-
|
|
323
|
+
//#endregion
|
|
324
|
+
export { MotionTreeNode as default };
|
package/dist/NodeList.d.ts
CHANGED
|
@@ -34,6 +34,8 @@ export interface NodeListProps {
|
|
|
34
34
|
onKeyDown?: (e: KeyboardEvent) => void;
|
|
35
35
|
onFocus?: (e: FocusEvent) => void;
|
|
36
36
|
onBlur?: (e: FocusEvent) => void;
|
|
37
|
+
onMouseDown?: (e: MouseEvent) => void;
|
|
38
|
+
onMouseUp?: (e: MouseEvent) => void;
|
|
37
39
|
onActiveChange?: (key: Key | null) => void;
|
|
38
40
|
onListChangeStart?: () => void;
|
|
39
41
|
onListChangeEnd?: () => void;
|
package/dist/NodeList.js
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import { getKey,
|
|
2
|
-
import
|
|
1
|
+
import { getKey, getTreeNodeProps } from "./utils/treeUtil.js";
|
|
2
|
+
import MotionTreeNode from "./MotionTreeNode.js";
|
|
3
3
|
import { findExpandedKeys, getExpandRange } from "./utils/diffUtil.js";
|
|
4
4
|
import { Fragment, computed, createVNode, defineComponent, mergeProps, ref, shallowRef, watch } from "vue";
|
|
5
|
-
import useId from "@v-c/util/dist/hooks/useId";
|
|
5
|
+
import useId, { getId } from "@v-c/util/dist/hooks/useId";
|
|
6
6
|
import { toPropsRefs } from "@v-c/util/dist/props-util";
|
|
7
7
|
import VirtualList from "@v-c/virtual-list";
|
|
8
|
+
//#region src/NodeList.tsx
|
|
8
9
|
function itemKey(item) {
|
|
9
10
|
const { key, pos } = item;
|
|
10
11
|
return String(getKey(key, pos));
|
|
11
12
|
}
|
|
12
|
-
|
|
13
|
+
var MOTION_KEY = `VC_TREE_MOTION_${Math.random()}`;
|
|
13
14
|
var MotionNode = { key: MOTION_KEY };
|
|
14
|
-
|
|
15
|
+
var MotionEntity = {
|
|
15
16
|
key: MOTION_KEY,
|
|
16
17
|
level: 0,
|
|
17
18
|
index: 0,
|
|
@@ -33,7 +34,7 @@ function getMinimumRangeTransitionRange(list, virtual, height, itemHeight) {
|
|
|
33
34
|
if (virtual === false || !height || !itemHeight) return list;
|
|
34
35
|
return list.slice(0, Math.ceil(height / itemHeight) + 1);
|
|
35
36
|
}
|
|
36
|
-
var
|
|
37
|
+
var NodeList = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
|
|
37
38
|
const treeId = useId();
|
|
38
39
|
const listRef = ref();
|
|
39
40
|
const indentMeasurerRef = ref();
|
|
@@ -106,7 +107,7 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
|
|
|
106
107
|
});
|
|
107
108
|
const mergedData = computed(() => props.motion ? transitionData.value : props.data || []);
|
|
108
109
|
return () => {
|
|
109
|
-
const { motion, activeItem, focusable, disabled, tabIndex, prefixCls, virtual, itemHeight, height, scrollWidth, onScroll, onContextmenu, onKeyDown, onFocus, onBlur, onListChangeStart, onActiveChange } = props;
|
|
110
|
+
const { motion, activeItem, focusable, disabled, tabIndex, prefixCls, virtual, itemHeight, height, scrollWidth, onScroll, onContextmenu, onKeyDown, onFocus, onBlur, onMouseDown, onMouseUp, onListChangeStart, onActiveChange } = props;
|
|
110
111
|
return createVNode(Fragment, null, [createVNode("div", {
|
|
111
112
|
"class": `${prefixCls}-treenode`,
|
|
112
113
|
"aria-hidden": true,
|
|
@@ -134,13 +135,15 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
|
|
|
134
135
|
"ref": listRef,
|
|
135
136
|
"role": "tree",
|
|
136
137
|
"tabindex": focusable !== false && !disabled ? tabIndex : void 0,
|
|
137
|
-
"aria-activedescendant": activeItem ?
|
|
138
|
+
"aria-activedescendant": activeItem ? getId(treeId, activeItem.key) : void 0,
|
|
138
139
|
"style": props.style,
|
|
139
140
|
"onContextmenu": onContextmenu,
|
|
140
141
|
"onScroll": onScroll,
|
|
141
142
|
"onKeydown": onKeyDown,
|
|
142
143
|
"onFocus": onFocus,
|
|
143
144
|
"onBlur": onBlur,
|
|
145
|
+
"onMousedown": onMouseDown,
|
|
146
|
+
"onMouseup": onMouseUp,
|
|
144
147
|
"onVisibleChange": (originList) => {
|
|
145
148
|
if (motionType.value && originList.every((item) => itemKey(item) !== MOTION_KEY)) onMotionEnd();
|
|
146
149
|
}
|
|
@@ -152,7 +155,7 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
|
|
|
152
155
|
const restProps = { ...nodeData || {} };
|
|
153
156
|
delete restProps.key;
|
|
154
157
|
delete restProps.children;
|
|
155
|
-
return createVNode(
|
|
158
|
+
return createVNode(MotionTreeNode, mergeProps(restProps, treeNodeProps, {
|
|
156
159
|
"title": title,
|
|
157
160
|
"active": active,
|
|
158
161
|
"pos": pos,
|
|
@@ -174,8 +177,7 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
|
|
|
174
177
|
props: {
|
|
175
178
|
prefixCls: {
|
|
176
179
|
type: String,
|
|
177
|
-
required: true
|
|
178
|
-
default: void 0
|
|
180
|
+
required: true
|
|
179
181
|
},
|
|
180
182
|
style: {
|
|
181
183
|
required: false,
|
|
@@ -213,38 +215,31 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
|
|
|
213
215
|
},
|
|
214
216
|
expandedKeys: {
|
|
215
217
|
type: Array,
|
|
216
|
-
required: true
|
|
217
|
-
default: void 0
|
|
218
|
+
required: true
|
|
218
219
|
},
|
|
219
220
|
selectedKeys: {
|
|
220
221
|
type: Array,
|
|
221
|
-
required: true
|
|
222
|
-
default: void 0
|
|
222
|
+
required: true
|
|
223
223
|
},
|
|
224
224
|
checkedKeys: {
|
|
225
225
|
type: Array,
|
|
226
|
-
required: true
|
|
227
|
-
default: void 0
|
|
226
|
+
required: true
|
|
228
227
|
},
|
|
229
228
|
loadedKeys: {
|
|
230
229
|
type: Array,
|
|
231
|
-
required: true
|
|
232
|
-
default: void 0
|
|
230
|
+
required: true
|
|
233
231
|
},
|
|
234
232
|
loadingKeys: {
|
|
235
233
|
type: Array,
|
|
236
|
-
required: true
|
|
237
|
-
default: void 0
|
|
234
|
+
required: true
|
|
238
235
|
},
|
|
239
236
|
halfCheckedKeys: {
|
|
240
237
|
type: Array,
|
|
241
|
-
required: true
|
|
242
|
-
default: void 0
|
|
238
|
+
required: true
|
|
243
239
|
},
|
|
244
240
|
keyEntities: {
|
|
245
241
|
type: Object,
|
|
246
|
-
required: true
|
|
247
|
-
default: void 0
|
|
242
|
+
required: true
|
|
248
243
|
},
|
|
249
244
|
dragging: {
|
|
250
245
|
type: Boolean,
|
|
@@ -257,13 +252,11 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
|
|
|
257
252
|
Number,
|
|
258
253
|
null
|
|
259
254
|
],
|
|
260
|
-
required: true
|
|
261
|
-
default: void 0
|
|
255
|
+
required: true
|
|
262
256
|
},
|
|
263
257
|
dropPosition: {
|
|
264
258
|
type: [Number, null],
|
|
265
|
-
required: true
|
|
266
|
-
default: void 0
|
|
259
|
+
required: true
|
|
267
260
|
},
|
|
268
261
|
motion: {
|
|
269
262
|
type: Object,
|
|
@@ -310,6 +303,16 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
|
|
|
310
303
|
required: false,
|
|
311
304
|
default: void 0
|
|
312
305
|
},
|
|
306
|
+
onMouseDown: {
|
|
307
|
+
type: Function,
|
|
308
|
+
required: false,
|
|
309
|
+
default: void 0
|
|
310
|
+
},
|
|
311
|
+
onMouseUp: {
|
|
312
|
+
type: Function,
|
|
313
|
+
required: false,
|
|
314
|
+
default: void 0
|
|
315
|
+
},
|
|
313
316
|
onActiveChange: {
|
|
314
317
|
type: Function,
|
|
315
318
|
required: false,
|
|
@@ -339,4 +342,5 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
|
|
|
339
342
|
name: "NodeList",
|
|
340
343
|
inheritAttrs: false
|
|
341
344
|
});
|
|
342
|
-
|
|
345
|
+
//#endregion
|
|
346
|
+
export { MOTION_KEY, MotionEntity, NodeList as default };
|
package/dist/Tree.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VueNode } from '@v-c/util/dist/type';
|
|
2
2
|
import { CSSMotionProps } from '@v-c/util/dist/utils/transition';
|
|
3
3
|
import { CSSProperties } from 'vue';
|
|
4
|
-
import { DraggableConfig, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams } from './contextTypes';
|
|
4
|
+
import { DraggableConfig, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams, SemanticName } from './contextTypes';
|
|
5
5
|
import { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, IconType, Key, ScrollTo } from './interface';
|
|
6
6
|
import { AllowDrop } from './util';
|
|
7
7
|
export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
|
|
@@ -19,12 +19,13 @@ export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
|
|
|
19
19
|
export type DraggableFn = (node: DataNode) => boolean;
|
|
20
20
|
export type DraggableUnion = DraggableFn | boolean | DraggableConfig;
|
|
21
21
|
export type ExpandAction = false | 'click' | 'doubleClick';
|
|
22
|
+
export type { SemanticName } from './contextTypes';
|
|
22
23
|
export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
|
|
23
24
|
prefixCls?: string;
|
|
24
25
|
className?: string;
|
|
25
26
|
style?: CSSProperties;
|
|
26
|
-
styles?: Partial<Record<
|
|
27
|
-
classNames?: Partial<Record<
|
|
27
|
+
styles?: Partial<Record<SemanticName, CSSProperties>>;
|
|
28
|
+
classNames?: Partial<Record<SemanticName, string>>;
|
|
28
29
|
focusable?: boolean;
|
|
29
30
|
activeKey?: Key | null;
|
|
30
31
|
tabIndex?: number;
|
|
@@ -61,6 +62,8 @@ export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
|
|
|
61
62
|
prefixCls: string;
|
|
62
63
|
direction: Direction;
|
|
63
64
|
}) => any;
|
|
65
|
+
onMouseDown?: (e: MouseEvent) => void;
|
|
66
|
+
onMouseUp?: (e: MouseEvent) => void;
|
|
64
67
|
onFocus?: (e: FocusEvent) => void;
|
|
65
68
|
onBlur?: (e: FocusEvent) => void;
|
|
66
69
|
onKeyDown?: (e: KeyboardEvent) => void;
|
package/dist/Tree.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import DropIndicator from "./DropIndicator.js";
|
|
2
2
|
import { TreeContextKey } from "./contextTypes.js";
|
|
3
3
|
import getEntity from "./utils/keyUtil.js";
|
|
4
4
|
import { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getTreeNodeProps, isLeafNode, warningWithoutKey } from "./utils/treeUtil.js";
|
|
5
|
-
import
|
|
5
|
+
import NodeList, { MOTION_KEY, MotionEntity } from "./NodeList.js";
|
|
6
6
|
import { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, parseCheckedKeys, posToArr } from "./util.js";
|
|
7
7
|
import { conductCheck } from "./utils/conductUtil.js";
|
|
8
8
|
import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, onBeforeUnmount, provide, reactive, ref, shallowRef, watch, watchEffect } from "vue";
|
|
@@ -11,6 +11,7 @@ import pickAttrs from "@v-c/util/dist/pickAttrs";
|
|
|
11
11
|
import warning from "@v-c/util/dist/warning";
|
|
12
12
|
import useMergedState from "@v-c/util/dist/hooks/useMergedState";
|
|
13
13
|
import KeyCode from "@v-c/util/dist/KeyCode";
|
|
14
|
+
//#region src/Tree.tsx
|
|
14
15
|
var MAX_RETRY_TIMES = 10;
|
|
15
16
|
var defaultProps = {
|
|
16
17
|
prefixCls: "vc-tree",
|
|
@@ -34,7 +35,7 @@ var defaultProps = {
|
|
|
34
35
|
tabIndex: 0,
|
|
35
36
|
virtual: true
|
|
36
37
|
};
|
|
37
|
-
var
|
|
38
|
+
var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
|
|
38
39
|
const mergedPrefixCls = computed(() => props.prefixCls);
|
|
39
40
|
const mergedShowLine = computed(() => props.showLine);
|
|
40
41
|
const mergedShowIcon = computed(() => props.showIcon);
|
|
@@ -177,7 +178,7 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
177
178
|
const delayedDragEnterLogic = {};
|
|
178
179
|
const loadingRetryTimes = {};
|
|
179
180
|
const listRef = ref();
|
|
180
|
-
let
|
|
181
|
+
let focusedByMouse = false;
|
|
181
182
|
const getTreeNodeRequiredProps = computed(() => ({
|
|
182
183
|
expandedKeys: expandedKeys.value || [],
|
|
183
184
|
selectedKeys: selectedKeys.value || [],
|
|
@@ -219,12 +220,7 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
219
220
|
onActiveChange(item ? item.key : null);
|
|
220
221
|
}
|
|
221
222
|
function onFocus(e) {
|
|
222
|
-
if (
|
|
223
|
-
focusFromMouse = false;
|
|
224
|
-
props.onFocus?.(e);
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
|
-
if (!mergedDisabled.value && activeKey.value === null) {
|
|
223
|
+
if (!focusedByMouse && !mergedDisabled.value && activeKey.value === null) {
|
|
228
224
|
const visibleSelectedKey = selectedKeys.value.find((key) => {
|
|
229
225
|
return flattenNodes.value.some((nodeItem) => nodeItem.key === key);
|
|
230
226
|
});
|
|
@@ -234,10 +230,18 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
234
230
|
props.onFocus?.(e);
|
|
235
231
|
}
|
|
236
232
|
function onBlur(e) {
|
|
237
|
-
|
|
233
|
+
focusedByMouse = false;
|
|
238
234
|
onActiveChange(null);
|
|
239
235
|
props.onBlur?.(e);
|
|
240
236
|
}
|
|
237
|
+
function onMouseDown(e) {
|
|
238
|
+
focusedByMouse = true;
|
|
239
|
+
props.onMouseDown?.(e);
|
|
240
|
+
}
|
|
241
|
+
function onMouseUp(e) {
|
|
242
|
+
focusedByMouse = false;
|
|
243
|
+
props.onMouseUp?.(e);
|
|
244
|
+
}
|
|
241
245
|
function onNodeLoad(treeNode) {
|
|
242
246
|
const key = treeNode.key;
|
|
243
247
|
if (getEntity(keyEntities.value, key)?.children?.length) return;
|
|
@@ -288,17 +292,14 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
288
292
|
}
|
|
289
293
|
}
|
|
290
294
|
function triggerExpandActionExpand(e, treeNode) {
|
|
291
|
-
const expanded = treeNode.expanded;
|
|
292
295
|
const key = treeNode.key;
|
|
293
296
|
if (treeNode.isLeaf || e.shiftKey || e.metaKey || e.ctrlKey) return;
|
|
294
297
|
const node = flattenNodes.value.find((nodeItem) => nodeItem.key === key);
|
|
295
298
|
if (!node) return;
|
|
296
|
-
|
|
299
|
+
onNodeExpand(e, convertNodePropsToEventData({
|
|
297
300
|
...getTreeNodeProps(key, getTreeNodeRequiredProps.value),
|
|
298
301
|
data: node.data
|
|
299
|
-
});
|
|
300
|
-
setExpandedKeys(expanded ? arrDel(expandedKeys.value, key) : arrAdd(expandedKeys.value, key));
|
|
301
|
-
onNodeExpand(e, eventNode);
|
|
302
|
+
}));
|
|
302
303
|
}
|
|
303
304
|
const onNodeClick = (e, treeNode) => {
|
|
304
305
|
if (props.expandAction === "click") triggerExpandActionExpand(e, treeNode);
|
|
@@ -647,7 +648,7 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
647
648
|
indent: indent.value,
|
|
648
649
|
dropIndicatorRender: (diProps) => {
|
|
649
650
|
if (props.dropIndicatorRender) return props.dropIndicatorRender(diProps);
|
|
650
|
-
return createVNode(
|
|
651
|
+
return createVNode(DropIndicator, {
|
|
651
652
|
"dropPosition": diProps.dropPosition,
|
|
652
653
|
"dropLevelOffset": diProps.dropLevelOffset,
|
|
653
654
|
"indent": diProps.indent
|
|
@@ -719,15 +720,9 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
719
720
|
data: true
|
|
720
721
|
});
|
|
721
722
|
return createVNode("div", {
|
|
722
|
-
"onMousedown": () => {
|
|
723
|
-
focusFromMouse = true;
|
|
724
|
-
},
|
|
725
|
-
"onMouseup": () => {
|
|
726
|
-
focusFromMouse = false;
|
|
727
|
-
},
|
|
728
723
|
"class": clsx(mergedPrefixCls.value, props.className, props.rootClassName, { [`${mergedPrefixCls.value}-show-line`]: mergedShowLine.value }),
|
|
729
724
|
"style": props.rootStyle
|
|
730
|
-
}, [createVNode(
|
|
725
|
+
}, [createVNode(NodeList, mergeProps({
|
|
731
726
|
"ref": listRef,
|
|
732
727
|
"prefixCls": mergedPrefixCls.value,
|
|
733
728
|
"style": props.style,
|
|
@@ -744,6 +739,8 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
744
739
|
"tabIndex": mergedTabIndex.value,
|
|
745
740
|
"activeItem": getActiveItem.value,
|
|
746
741
|
"onFocus": onFocus,
|
|
742
|
+
"onMouseDown": onMouseDown,
|
|
743
|
+
"onMouseUp": onMouseUp,
|
|
747
744
|
"onBlur": onBlur,
|
|
748
745
|
"onKeyDown": onKeyDown,
|
|
749
746
|
"onActiveChange": onActiveChange,
|
|
@@ -940,6 +937,16 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
940
937
|
required: false,
|
|
941
938
|
default: void 0
|
|
942
939
|
},
|
|
940
|
+
onMouseDown: {
|
|
941
|
+
type: Function,
|
|
942
|
+
required: false,
|
|
943
|
+
default: void 0
|
|
944
|
+
},
|
|
945
|
+
onMouseUp: {
|
|
946
|
+
type: Function,
|
|
947
|
+
required: false,
|
|
948
|
+
default: void 0
|
|
949
|
+
},
|
|
943
950
|
onFocus: {
|
|
944
951
|
type: Function,
|
|
945
952
|
required: false,
|
|
@@ -1122,4 +1129,5 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
|
|
|
1122
1129
|
name: "Tree",
|
|
1123
1130
|
inheritAttrs: false
|
|
1124
1131
|
});
|
|
1125
|
-
|
|
1132
|
+
//#endregion
|
|
1133
|
+
export { Tree as default };
|
package/dist/TreeNode.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Indent from "./Indent.js";
|
|
2
2
|
import { TreeContextKey, UnstableContextKey } from "./contextTypes.js";
|
|
3
3
|
import getEntity from "./utils/keyUtil.js";
|
|
4
4
|
import { convertNodePropsToEventData, isLeafNode } from "./utils/treeUtil.js";
|
|
@@ -7,6 +7,7 @@ import { clsx } from "@v-c/util";
|
|
|
7
7
|
import { getId } from "@v-c/util/dist/hooks/useId";
|
|
8
8
|
import pickAttrs from "@v-c/util/dist/pickAttrs";
|
|
9
9
|
import { filterEmpty } from "@v-c/util/dist/props-util";
|
|
10
|
+
//#region src/TreeNode.tsx
|
|
10
11
|
var ICON_OPEN = "open";
|
|
11
12
|
var ICON_CLOSE = "close";
|
|
12
13
|
var defaultTitle = "---";
|
|
@@ -117,13 +118,17 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
|
|
|
117
118
|
};
|
|
118
119
|
const renderSwitcher = () => {
|
|
119
120
|
if (memoizedIsLeaf.value) {
|
|
120
|
-
const switcherIconDom
|
|
121
|
-
return switcherIconDom
|
|
121
|
+
const switcherIconDom = renderSwitcherIconDom(true);
|
|
122
|
+
return switcherIconDom !== false ? createVNode("span", {
|
|
123
|
+
"class": clsx(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher-noop`, context.classNames?.itemSwitcher),
|
|
124
|
+
"style": context.styles?.itemSwitcher
|
|
125
|
+
}, [switcherIconDom]) : null;
|
|
122
126
|
}
|
|
123
127
|
const switcherIconDom = renderSwitcherIconDom(false);
|
|
124
128
|
return switcherIconDom !== false ? createVNode("span", {
|
|
125
129
|
"onClick": onExpand,
|
|
126
|
-
"class": clsx(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher_${props.expanded ? ICON_OPEN : ICON_CLOSE}
|
|
130
|
+
"class": clsx(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher_${props.expanded ? ICON_OPEN : ICON_CLOSE}`, context.classNames?.itemSwitcher),
|
|
131
|
+
"style": context.styles?.itemSwitcher
|
|
127
132
|
}, [switcherIconDom]) : null;
|
|
128
133
|
};
|
|
129
134
|
const iconNode = computed(() => {
|
|
@@ -250,7 +255,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
|
|
|
250
255
|
"onDragend": isDraggable.value ? onDragEnd : void 0,
|
|
251
256
|
"onMousemove": props.onMouseMove
|
|
252
257
|
}, dataOrAriaAttributeProps.value), [
|
|
253
|
-
createVNode(
|
|
258
|
+
createVNode(Indent, {
|
|
254
259
|
"prefixCls": context.prefixCls,
|
|
255
260
|
"level": level.value,
|
|
256
261
|
"isStart": props.isStart || [],
|
|
@@ -454,5 +459,5 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
|
|
|
454
459
|
inheritAttrs: false
|
|
455
460
|
});
|
|
456
461
|
TreeNode.isTreeNode = true;
|
|
457
|
-
|
|
458
|
-
export {
|
|
462
|
+
//#endregion
|
|
463
|
+
export { TreeNode as default };
|
package/dist/contextTypes.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ export interface DropIndicatorRenderProps {
|
|
|
23
23
|
prefixCls: string;
|
|
24
24
|
direction: Direction;
|
|
25
25
|
}
|
|
26
|
-
export type SemanticName = 'itemIcon' | 'item' | 'itemTitle';
|
|
26
|
+
export type SemanticName = 'itemIcon' | 'item' | 'itemTitle' | 'itemSwitcher';
|
|
27
27
|
export interface TreeContextProps<TreeDataType extends BasicDataNode = DataNode> {
|
|
28
28
|
styles?: Partial<Record<SemanticName, CSSProperties>>;
|
|
29
29
|
classNames?: Partial<Record<SemanticName, string>>;
|
package/dist/contextTypes.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
//#region src/contextTypes.ts
|
|
2
|
+
var TreeContextKey = Symbol("TreeContext");
|
|
3
|
+
/** Internal usage, safe to remove. Do not use in prod */
|
|
4
|
+
var UnstableContextKey = Symbol("UnstableTreeContext");
|
|
5
|
+
//#endregion
|
|
3
6
|
export { TreeContextKey, UnstableContextKey };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { UnstableContextKey } from "./contextTypes.js";
|
|
2
2
|
import { convertDataToEntities, convertTreeToData, fillFieldNames, flattenTreeData } from "./utils/treeUtil.js";
|
|
3
|
-
import
|
|
3
|
+
import TreeNode from "./TreeNode.js";
|
|
4
4
|
import { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr } from "./util.js";
|
|
5
5
|
import { conductCheck } from "./utils/conductUtil.js";
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
ExportTree
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
import Tree from "./Tree.js";
|
|
7
|
+
//#region src/index.ts
|
|
8
|
+
var ExportTree = Tree;
|
|
9
|
+
ExportTree.TreeNode = TreeNode;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { TreeNode, UnstableContextKey, arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductCheck, conductExpandParent, convertDataToEntities, convertTreeToData, ExportTree as default, fillFieldNames, flattenTreeData, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr };
|
package/dist/inter.js
CHANGED
package/dist/util.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import getEntity from "./utils/keyUtil.js";
|
|
2
2
|
import warning from "@v-c/util/dist/warning";
|
|
3
|
+
//#region src/util.ts
|
|
3
4
|
function arrDel(list, value) {
|
|
4
5
|
if (!list) return [];
|
|
5
6
|
const clone = list.slice();
|
|
@@ -144,4 +145,5 @@ function conductExpandParent(keyList, keyEntities) {
|
|
|
144
145
|
});
|
|
145
146
|
return [...expandedKeys];
|
|
146
147
|
}
|
|
148
|
+
//#endregion
|
|
147
149
|
export { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import getEntity from "./keyUtil.js";
|
|
2
2
|
import warning from "@v-c/util/dist/warning";
|
|
3
|
+
//#region src/utils/conductUtil.ts
|
|
3
4
|
function removeFromCheckedKeys(halfCheckedKeys, checkedKeys) {
|
|
4
5
|
const filteredKeys = /* @__PURE__ */ new Set();
|
|
5
6
|
halfCheckedKeys.forEach((key) => {
|
|
@@ -103,4 +104,5 @@ function conductCheck(keyList, checked, keyEntities, getCheckDisabled) {
|
|
|
103
104
|
if (checked === true) return fillConductCheck(keys, levelEntities, maxLevel, syntheticGetCheckDisabled);
|
|
104
105
|
return cleanConductCheck(keys, checked.halfCheckedKeys, levelEntities, maxLevel, syntheticGetCheckDisabled);
|
|
105
106
|
}
|
|
107
|
+
//#endregion
|
|
106
108
|
export { conductCheck, isCheckDisabled };
|
package/dist/utils/diffUtil.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/utils/diffUtil.ts
|
|
1
2
|
function findExpandedKeys(prev = [], next = []) {
|
|
2
3
|
const prevLen = prev.length;
|
|
3
4
|
const nextLen = next.length;
|
|
@@ -31,4 +32,5 @@ function getExpandRange(shorter, longer, key) {
|
|
|
31
32
|
}
|
|
32
33
|
return longer.slice(longerStartIndex + 1);
|
|
33
34
|
}
|
|
35
|
+
//#endregion
|
|
34
36
|
export { findExpandedKeys, getExpandRange };
|
package/dist/utils/keyUtil.js
CHANGED
package/dist/utils/treeUtil.d.ts
CHANGED
|
@@ -61,5 +61,4 @@ export declare function getTreeNodeProps<TreeDataType extends BasicDataNode = Da
|
|
|
61
61
|
};
|
|
62
62
|
export declare function convertNodePropsToEventData<TreeDataType extends BasicDataNode = DataNode>(props: TreeNodeProps<TreeDataType>): EventDataNode<TreeDataType>;
|
|
63
63
|
export declare function isLeafNode<TreeDataType extends BasicDataNode = DataNode>(isLeaf: boolean | undefined, loadData: ((node: EventDataNode<TreeDataType>) => Promise<any>) | undefined, hasChildren: boolean, loaded: boolean | undefined): boolean;
|
|
64
|
-
export declare function getTreeNodeId(treeId: string, key: Key): string;
|
|
65
64
|
export {};
|
package/dist/utils/treeUtil.js
CHANGED
|
@@ -2,6 +2,7 @@ import getEntity from "./keyUtil.js";
|
|
|
2
2
|
import { toArray } from "@v-c/util/dist/Children/toArray";
|
|
3
3
|
import { omit } from "@v-c/util/dist/utils/omit";
|
|
4
4
|
import warning from "@v-c/util/dist/warning";
|
|
5
|
+
//#region src/utils/treeUtil.ts
|
|
5
6
|
function getPosition(level, index) {
|
|
6
7
|
return `${level}-${index}`;
|
|
7
8
|
}
|
|
@@ -215,7 +216,5 @@ function isLeafNode(isLeaf, loadData, hasChildren, loaded) {
|
|
|
215
216
|
if (isLeaf === false) return false;
|
|
216
217
|
return !!isLeaf || !loadData && !hasChildren || !!(loadData && loaded && !hasChildren);
|
|
217
218
|
}
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
}
|
|
221
|
-
export { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getKey, getPosition, getTreeNodeId, getTreeNodeProps, isLeafNode, isTreeNode, traverseDataNodes, warningWithoutKey };
|
|
219
|
+
//#endregion
|
|
220
|
+
export { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getKey, getPosition, getTreeNodeProps, isLeafNode, isTreeNode, traverseDataNodes, warningWithoutKey };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/tree",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.6",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"vue": "^3.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@v-c/util": "^1.0.
|
|
33
|
-
"@v-c/virtual-list": "^1.0.
|
|
32
|
+
"@v-c/util": "^1.0.19",
|
|
33
|
+
"@v-c/virtual-list": "^1.0.7"
|
|
34
34
|
},
|
|
35
35
|
"scripts": {
|
|
36
36
|
"build": "vite build",
|