@v-c/tree 1.1.3 → 1.2.1
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/Tree.js +1 -0
- package/dist/TreeNode.js +3 -1
- package/dist/hooks/useTree.d.ts +9 -0
- package/dist/hooks/useTree.js +23 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -1
- package/dist/interface.d.ts +12 -1
- package/dist/util.js +3 -2
- package/package.json +2 -2
package/dist/Tree.js
CHANGED
|
@@ -197,6 +197,7 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
|
|
|
197
197
|
return flattenNodes.value.find(({ key }) => key === activeKey.value) || null;
|
|
198
198
|
});
|
|
199
199
|
const scrollTo = (scroll) => {
|
|
200
|
+
if (scroll && typeof scroll === "object" && "autoExpand" in scroll && scroll.autoExpand && props.expandedKeys === void 0) setExpandedKeys(arrAdd(expandedKeys.value, scroll.key));
|
|
200
201
|
listRef.value?.scrollTo(scroll);
|
|
201
202
|
};
|
|
202
203
|
expose({
|
package/dist/TreeNode.js
CHANGED
|
@@ -27,6 +27,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
|
|
|
27
27
|
if (typeof props.selectable === "boolean") return props.selectable;
|
|
28
28
|
return context.selectable;
|
|
29
29
|
});
|
|
30
|
+
const isUnselectable = computed(() => !context.checkable && !isSelectable.value);
|
|
30
31
|
const hasChildren = computed(() => {
|
|
31
32
|
const { children } = getEntity(context.keyEntities, props.eventKey) || {};
|
|
32
33
|
return Boolean((children || []).length);
|
|
@@ -74,10 +75,10 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
|
|
|
74
75
|
const onDragStart = (e) => {
|
|
75
76
|
e.stopPropagation();
|
|
76
77
|
dragNodeHighlight.value = true;
|
|
77
|
-
context.onNodeDragStart(e, props);
|
|
78
78
|
try {
|
|
79
79
|
e.dataTransfer?.setData("text/plain", "");
|
|
80
80
|
} catch {}
|
|
81
|
+
context.onNodeDragStart(e, props);
|
|
81
82
|
};
|
|
82
83
|
const onDragEnter = (e) => {
|
|
83
84
|
e.preventDefault();
|
|
@@ -225,6 +226,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
|
|
|
225
226
|
"aria-disabled": isDisabled.value,
|
|
226
227
|
"class": clsx(props.className, `${context.prefixCls}-treenode`, context.classNames?.item, {
|
|
227
228
|
[`${context.prefixCls}-treenode-disabled`]: isDisabled.value,
|
|
229
|
+
[`${context.prefixCls}-treenode-unselectable`]: isUnselectable.value,
|
|
228
230
|
[`${context.prefixCls}-treenode-switcher-${props.expanded ? "open" : "close"}`]: !memoizedIsLeaf.value,
|
|
229
231
|
[`${context.prefixCls}-treenode-checkbox-checked`]: props.checked,
|
|
230
232
|
[`${context.prefixCls}-treenode-checkbox-indeterminate`]: props.halfChecked,
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { MaybeRefOrGetter } from 'vue';
|
|
2
|
+
import { BasicDataNode, DataEntity, DataNode, FieldNames, Key } from '../interface';
|
|
3
|
+
export interface UseTreeConfig {
|
|
4
|
+
fieldNames?: MaybeRefOrGetter<FieldNames | undefined>;
|
|
5
|
+
}
|
|
6
|
+
export interface TreeInstance<TreeDataType extends DataNode | BasicDataNode = DataNode> {
|
|
7
|
+
getPath: (key: Key) => DataEntity<TreeDataType>[];
|
|
8
|
+
}
|
|
9
|
+
export default function useTree<TreeDataType extends DataNode | BasicDataNode = DataNode>(treeData: MaybeRefOrGetter<TreeDataType[]>, config?: UseTreeConfig): TreeInstance<TreeDataType>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import getEntity from "../utils/keyUtil.js";
|
|
2
|
+
import { convertDataToEntities } from "../utils/treeUtil.js";
|
|
3
|
+
import { computed, toValue } from "vue";
|
|
4
|
+
//#region src/hooks/useTree.ts
|
|
5
|
+
function useTree(treeData, config = {}) {
|
|
6
|
+
const { fieldNames } = config;
|
|
7
|
+
const keyEntities = computed(() => {
|
|
8
|
+
const { keyEntities } = convertDataToEntities(toValue(treeData), { fieldNames: toValue(fieldNames) });
|
|
9
|
+
return keyEntities;
|
|
10
|
+
});
|
|
11
|
+
const getPath = (key) => {
|
|
12
|
+
const path = [];
|
|
13
|
+
let entity = getEntity(keyEntities.value, key);
|
|
14
|
+
while (entity) {
|
|
15
|
+
path.unshift(entity);
|
|
16
|
+
entity = entity.parent;
|
|
17
|
+
}
|
|
18
|
+
return path;
|
|
19
|
+
};
|
|
20
|
+
return { getPath };
|
|
21
|
+
}
|
|
22
|
+
//#endregion
|
|
23
|
+
export { useTree as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { TreeInstance, UseTreeConfig, default as useTree } from './hooks/useTree';
|
|
1
2
|
import { BasicDataNode, DataEntity, DataNode, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, ScrollTo, TreeNodeProps } from './interface';
|
|
2
3
|
import { ExpandAction, TreeProps, TreeRef, default as Tree } from './Tree';
|
|
3
4
|
import { default as TreeNode } from './TreeNode';
|
|
4
5
|
export { UnstableContextKey } from './contextTypes';
|
|
5
|
-
export { TreeNode };
|
|
6
|
+
export { TreeNode, useTree };
|
|
6
7
|
export { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr } from './util.ts';
|
|
7
8
|
export { conductCheck } from './utils/conductUtil';
|
|
8
9
|
export { convertDataToEntities, convertTreeToData, fillFieldNames, flattenTreeData } from './utils/treeUtil';
|
|
9
|
-
export type { BasicDataNode, DataEntity, DataNode, EventDataNode, ExpandAction, FieldNames, FlattenNode, IconType, Key, KeyEntities, ScrollTo, TreeNodeProps, TreeProps, TreeRef, };
|
|
10
|
+
export type { BasicDataNode, DataEntity, DataNode, EventDataNode, ExpandAction, FieldNames, FlattenNode, IconType, Key, KeyEntities, ScrollTo, TreeInstance, TreeNodeProps, TreeProps, TreeRef, UseTreeConfig, };
|
|
10
11
|
type TreeType = typeof Tree & {
|
|
11
12
|
TreeNode: typeof TreeNode;
|
|
12
13
|
};
|
package/dist/index.js
CHANGED
|
@@ -4,8 +4,9 @@ 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
6
|
import Tree from "./Tree.js";
|
|
7
|
+
import useTree from "./hooks/useTree.js";
|
|
7
8
|
//#region src/index.ts
|
|
8
9
|
var ExportTree = Tree;
|
|
9
10
|
ExportTree.TreeNode = TreeNode;
|
|
10
11
|
//#endregion
|
|
11
|
-
export { TreeNode, UnstableContextKey, arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductCheck, conductExpandParent, convertDataToEntities, convertTreeToData, ExportTree as default, fillFieldNames, flattenTreeData, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr };
|
|
12
|
+
export { TreeNode, UnstableContextKey, arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductCheck, conductExpandParent, convertDataToEntities, convertTreeToData, ExportTree as default, fillFieldNames, flattenTreeData, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr, useTree };
|
package/dist/interface.d.ts
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import { MouseEventHandler } from '@v-c/util/dist/EventInterface';
|
|
2
2
|
import { Key as VCKey, VueNode } from '@v-c/util/dist/type';
|
|
3
|
+
import { ScrollTo as VirtualListScrollTo } from '@v-c/virtual-list';
|
|
3
4
|
import { CSSProperties, VNode } from 'vue';
|
|
4
|
-
export type { ScrollTo } from '@v-c/virtual-list';
|
|
5
5
|
export type Key = VCKey;
|
|
6
|
+
type VirtualListScrollConfig = Exclude<NonNullable<Parameters<VirtualListScrollTo>[0]>, number>;
|
|
7
|
+
type ScrollTarget = Extract<VirtualListScrollConfig, {
|
|
8
|
+
key: Key;
|
|
9
|
+
}>;
|
|
10
|
+
type TreeScrollConfig = (Exclude<VirtualListScrollConfig, ScrollTarget> & {
|
|
11
|
+
autoExpand?: never;
|
|
12
|
+
}) | (ScrollTarget & {
|
|
13
|
+
autoExpand?: boolean;
|
|
14
|
+
});
|
|
15
|
+
export type ScrollTo = (scroll?: number | TreeScrollConfig | null) => void;
|
|
6
16
|
/**
|
|
7
17
|
* Typescript not support `bigint` as index type yet.
|
|
8
18
|
* We use this to mark the `bigint` type is for `Key` usage.
|
|
@@ -120,3 +130,4 @@ export interface FieldNames {
|
|
|
120
130
|
key?: string;
|
|
121
131
|
children?: string;
|
|
122
132
|
}
|
|
133
|
+
export {};
|
package/dist/util.js
CHANGED
|
@@ -45,7 +45,8 @@ function calcDropPosition(event, dragNodeProps, targetNodeProps, indent, startMo
|
|
|
45
45
|
const rawDropLevelOffset = ((direction === "rtl" ? -1 : 1) * ((startMousePosition?.x || 0) - clientX) - 12) / indent;
|
|
46
46
|
const filteredExpandKeys = expandKeys.filter((key) => (getEntity(keyEntities, key)?.children || []).length);
|
|
47
47
|
let abstractDropNodeEntity = getEntity(keyEntities, targetNodeProps.eventKey);
|
|
48
|
-
|
|
48
|
+
const dropBeforeTarget = clientY < top + height / 2 && isFirstChild(abstractDropNodeEntity);
|
|
49
|
+
if (clientY < top + height / 2 && !dropBeforeTarget) {
|
|
49
50
|
const nodeIndex = flattenedNodes.findIndex(({ key }) => key === abstractDropNodeEntity.key);
|
|
50
51
|
const prevNodeKey = flattenedNodes[nodeIndex <= 0 ? 0 : nodeIndex - 1].key;
|
|
51
52
|
abstractDropNodeEntity = getEntity(keyEntities, prevNodeKey);
|
|
@@ -62,7 +63,7 @@ function calcDropPosition(event, dragNodeProps, targetNodeProps, indent, startMo
|
|
|
62
63
|
const abstractDragDataNode = dragNodeProps.data;
|
|
63
64
|
const abstractDropDataNode = abstractDropNodeEntity.node;
|
|
64
65
|
let dropAllowed = true;
|
|
65
|
-
if (
|
|
66
|
+
if (dropBeforeTarget && allowDrop({
|
|
66
67
|
dragNode: abstractDragDataNode,
|
|
67
68
|
dropNode: abstractDropDataNode,
|
|
68
69
|
dropPosition: -1
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/tree",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.1
|
|
4
|
+
"version": "1.2.1",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@v-c/util": "^1.1.0",
|
|
38
|
-
"@v-c/virtual-list": "^1.1.
|
|
38
|
+
"@v-c/virtual-list": "^1.1.1"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "vite build",
|