bkui-vue 2.1.0-dev-beta.10 → 2.1.0-dev-beta.12

package/lib/tree/props.d.ts

@@ -19,6 +19,49 @@ export type TreeNode = {
  */
 export type DropType = 'child' | 'move' | 'sort';
 export type DisableDropHandler = (data: TreeNode, type: DropType, target: TreeNode) => boolean;
+export type TreeDataChangeTrigger = 'async' | 'drag';
+export type TreeDataChangePayload = {
+    trigger: TreeDataChangeTrigger;
+    data: TreeNode[];
+    node: TreeNode;
+    targetNode?: TreeNode;
+    parentNode?: TreeNode | null;
+    oldParentNode?: TreeNode | null;
+    dropType?: DropType;
+    sourceIndex?: number;
+    targetIndex?: number;
+};
+export type TreeDataChangeHandler = (payload: TreeDataChangePayload) => void;
+export type TreeCheckedPayload = {
+    checkedNodes: TreeNode[];
+    indeterminateNodes: TreeNode[];
+};
+export type TreeSelectedPayload = {
+    selected: boolean;
+    node: TreeNode;
+};
+export type TreeDropPayload = {
+    event: unknown;
+    element: HTMLElement;
+    targetNode: TreeNode;
+    sourceNode: TreeNode;
+    data: TreeNode[];
+    parentNode?: TreeNode | null;
+    oldParentNode?: TreeNode | null;
+    dropType?: DropType;
+    sourceIndex?: number;
+    targetIndex?: number;
+};
+export type TreeDragSortPayload = {
+    sourceNode: TreeNode;
+    targetNode: TreeNode;
+    data: TreeNode[];
+    parentNode?: TreeNode | null;
+    oldParentNode?: TreeNode | null;
+    dropType?: DropType;
+    sourceIndex?: number;
+    targetIndex?: number;
+};
 /**
  * Tree Prop: prefixIcon function
  * @param {} isRoot 是否为分跟节点
@@ -102,6 +145,10 @@ export declare const treeProps: {
     prefixIcon: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
+    /**
+     * 当树数据需要由外部接管更新时的统一回调
+     */
+    onDataChange: PropType<TreeDataChangeHandler>;
     /**
      * 异步加载节点数据配置
      * @param callback 请求数据回调函数，函数返回 Promise
@@ -146,9 +193,7 @@ export declare const treeProps: {
      */
     disableDrop: PropType<DisableDropHandler>;
     /**
-     * 拖拽阈值
-     * 用于判断拖拽时鼠标位置与节点的距离
-     * 当鼠标位置与节点的距离大于此值时，才会触发拖拽
+     * 拖拽阈值：节点顶部/底部区域占比用于判定前后插入，中间区域作为目标子节点
      */
     dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -156,7 +201,7 @@ export declare const treeProps: {
         default: number;
     };
     /**
-     * 节点拖拽时可交换位置（开启拖拽可交换位置后将不支持改变层级）
+     * 节点拖拽时可调整前后顺序；拖拽到节点中部仍会添加为目标子节点
      */
     dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -275,6 +320,14 @@ export declare const treeProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否开启父子勾选级联；未传时沿用 checkStrictly 历史语义
+     */
+    cascade: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     /**
      * 是否开启监听Tree节点进入Tree容器可视区域
      */
@@ -282,8 +335,9 @@ export declare const treeProps: {
         default: boolean | (() => IIntersectionObserver);
     };
 };
+type AsyncLoadCallback = (item: TreeNode, cb: (data: TreeNode | TreeNode[]) => Promise<unknown> | unknown, data?: unknown) => Promise<TreeNode | TreeNode[]> | TreeNode | TreeNode[];
 type AsyncOption = {
-    callback: (item: any, cb: any) => Promise<VNode | string>;
+    callback: AsyncLoadCallback;
     cache: boolean;
     deepAutoOpen?: string;
     trigger?: string[];

package/lib/tree/tree.css

@@ -274,60 +274,49 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-tree-drop-active {
-  background: #f5f7fa;
+.bk-tree-node-draggable {
+  cursor: grab;
+  user-select: none;
 }
-.bk-tree-drop-disabled {
-  background: #ffd5d5;
+.bk-tree-node-draggable:hover {
+  background-color: #f5f7fa;
 }
-.bk-tree-drop-disabled .bk-tree-node {
+.bk-tree-drop-disabled {
   cursor: no-drop;
-}
-.bk-tree-ghost {
   opacity: 0.5;
-  background: #c8ebfb;
-}
-.bk-tree-chosen {
-  background: #e1ecff;
 }
 .bk-tree-drag {
-  opacity: 0.8;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  opacity: 0.85;
   cursor: grabbing;
 }
-.bk-tree-drag-disabled .bk-node-row {
+.bk-tree-drag-disabled {
   cursor: no-drop;
   opacity: 0.5;
 }
-.bk-tree-drop-indicator {
-  position: fixed;
-  pointer-events: none;
-  z-index: 9999;
-}
-.bk-tree-drop-indicator.bk-tree-drop-inner {
-  background: rgba(33, 150, 243, 0.06);
-  outline: 2px dashed #3a84ff;
-  outline-offset: -2px;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(58, 132, 255, 0.1);
+.bk-tree-drop-before,
+.bk-tree-drop-after,
+.bk-tree-drop-inner {
+  background-clip: content-box;
 }
-.bk-tree-drop-indicator.bk-tree-drop-line {
-  background: #3a84ff;
+.bk-tree-drop-before::after,
+.bk-tree-drop-after::after {
+  position: absolute;
+  right: 0;
+  left: var(--drop-line-left, 0);
+  display: block;
+  height: 2px;
   border-radius: 1px;
-}
-.bk-tree-drop-indicator.bk-tree-drop-line::before,
-.bk-tree-drop-indicator.bk-tree-drop-line::after {
+  background-color: #3a84ff;
   content: '';
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #3a84ff;
-  top: -2px;
+  pointer-events: none;
 }
-.bk-tree-drop-indicator.bk-tree-drop-line::before {
-  left: 0;
+.bk-tree-drop-before::after {
+  top: -1px;
 }
-.bk-tree-drop-indicator.bk-tree-drop-line::after {
-  right: 0;
+.bk-tree-drop-after::after {
+  bottom: -1px;
+}
+.bk-tree-drop-inner {
+  background-color: rgba(58, 132, 255, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(58, 132, 255, 0.28);
 }

package/lib/tree/tree.d.ts

@@ -1,4 +1,4 @@
-import { TreePropTypes as defineTypes } from './props';
+import { TreePropTypes as defineTypes, TreeNode } from './props';
 export type TreePropTypes = defineTypes;
 export type ITreeScrollTopOption = {
     id?: string;
@@ -43,10 +43,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     prefixIcon: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
+    onDataChange: import("vue").PropType<import("./props").TreeDataChangeHandler>;
     async: import("vue-types").VueTypeShape<{
-        callback: (item: any, cb: any) => Promise<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>>;
+        callback: (item: TreeNode, cb: (data: TreeNode | TreeNode[]) => unknown, data?: unknown) => TreeNode | TreeNode[] | Promise<TreeNode | TreeNode[]>;
         cache: boolean;
         deepAutoOpen?: string;
         trigger?: string[];
@@ -139,14 +138,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         default: boolean;
     };
+    cascade: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     intersectionObserver: import("vue-types").VueTypeDef<boolean | import("./props").IIntersectionObserver> & {
         default: boolean | (() => import("./props").IIntersectionObserver);
     };
 }>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    nodeAsyncLoad: (..._args: any[]) => boolean;
+    nodeAsyncLoadError: (..._args: any[]) => boolean;
     nodeClick: (..._args: any[]) => boolean;
     nodeCollapse: (..._args: any[]) => boolean;
     nodeExpand: (..._args: any[]) => boolean;
     nodeChecked: (..._args: any[]) => boolean;
+    nodeDataChange: (..._args: any[]) => boolean;
     nodeDragStart: (..._args: any[]) => boolean;
     nodeDragOver: (..._args: any[]) => boolean;
     nodeDragLeave: (..._args: any[]) => boolean;
@@ -193,10 +200,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     prefixIcon: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
+    onDataChange: import("vue").PropType<import("./props").TreeDataChangeHandler>;
     async: import("vue-types").VueTypeShape<{
-        callback: (item: any, cb: any) => Promise<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>>;
+        callback: (item: TreeNode, cb: (data: TreeNode | TreeNode[]) => unknown, data?: unknown) => TreeNode | TreeNode[] | Promise<TreeNode | TreeNode[]>;
         cache: boolean;
         deepAutoOpen?: string;
         trigger?: string[];
@@ -289,13 +295,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         default: boolean;
     };
+    cascade: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     intersectionObserver: import("vue-types").VueTypeDef<boolean | import("./props").IIntersectionObserver> & {
         default: boolean | (() => import("./props").IIntersectionObserver);
     };
 }>> & Readonly<{
+    onNodeAsyncLoad?: (...args: any[]) => any;
+    onNodeAsyncLoadError?: (...args: any[]) => any;
     onNodeChecked?: (...args: any[]) => any;
     onNodeClick?: (...args: any[]) => any;
     onNodeCollapse?: (...args: any[]) => any;
+    onNodeDataChange?: (...args: any[]) => any;
     onNodeDragLeave?: (...args: any[]) => any;
     onNodeDragOver?: (...args: any[]) => any;
     onNodeDragSort?: (...args: any[]) => any;
@@ -335,5 +349,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     nodeContentAction: any;
     keepSlotData: boolean;
     checkStrictly: boolean;
+    cascade: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/tree/tree.less

@@ -22,6 +22,7 @@
         background-color: #e1ecff;
       }
     }
+
   }
 
   &-node {
@@ -132,80 +133,61 @@
     }
   }
 
-  &-drop-active {
-    background: #f5f7fa;
-  }
+  &-node-draggable {
+    cursor: grab;
+    user-select: none;
 
-  &-drop-disabled {
-    background: #ffd5d5;
-    .@{bk-prefix}-tree-node {
-      cursor: no-drop;
+    &:hover {
+      background-color: #f5f7fa;
     }
   }
 
-  // SortableJS ghost/chosen/drag 样式
-  &-ghost {
+  &-drop-disabled {
+    cursor: no-drop;
     opacity: 0.5;
-    background: #c8ebfb;
-  }
-
-  &-chosen {
-    background: #e1ecff;
   }
 
   &-drag {
-    opacity: 0.8;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0.85;
     cursor: grabbing;
   }
 
   &-drag-disabled {
-    .@{bk-prefix}-node-row {
-      cursor: no-drop;
-      opacity: 0.5;
-    }
+    cursor: no-drop;
+    opacity: 0.5;
   }
-}
 
-// 拖拽放置指示器（overlay 方式，挂载在 body 上）
-// sort/move 类型：水平线 + 两端圆点，指示同级插入位置
-// child 类型：高亮边框 + 浅色背景，指示嵌入为子节点
-.@{bk-prefix}-tree-drop-indicator {
-  position: fixed;
-  pointer-events: none;
-  z-index: 9999;
-
-  // child 类型：嵌入为子节点的指示器
-  &.@{bk-prefix}-tree-drop-inner {
-    background: rgba(33, 150, 243, 0.06);
-    outline: 2px dashed #3a84ff;
-    outline-offset: -2px;
-    border-radius: 2px;
-    box-shadow: inset 0 0 0 1px rgba(58, 132, 255, 0.1);
+  &-drop-before,
+  &-drop-after,
+  &-drop-inner {
+    background-clip: content-box;
   }
 
-  // sort/move 类型：同级插入的水平线指示器
-  &.@{bk-prefix}-tree-drop-line {
-    background: #3a84ff;
-    border-radius: 1px;
-
-    &::before,
+  &-drop-before,
+  &-drop-after {
     &::after {
-      content: '';
       position: absolute;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: #3a84ff;
-      top: -2px;
+      right: 0;
+      left: var(--drop-line-left, 0);
+      display: block;
+      height: 2px;
+      border-radius: 1px;
+      background-color: #3a84ff;
+      content: '';
+      pointer-events: none;
     }
+  }
 
-    &::before {
-      left: 0;
-    }
+  &-drop-before::after {
+    top: -1px;
+  }
 
-    &::after {
-      right: 0;
-    }
+  &-drop-after::after {
+    bottom: -1px;
+  }
+
+  &-drop-inner {
+    background-color: rgba(58, 132, 255, 0.08);
+    box-shadow: inset 0 0 0 1px rgba(58, 132, 255, 0.28);
   }
 }

package/lib/tree/tree.variable.css

@@ -405,60 +405,49 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-tree-drop-active {
-  background: #f5f7fa;
+.bk-tree-node-draggable {
+  cursor: grab;
+  user-select: none;
 }
-.bk-tree-drop-disabled {
-  background: #ffd5d5;
+.bk-tree-node-draggable:hover {
+  background-color: #f5f7fa;
 }
-.bk-tree-drop-disabled .bk-tree-node {
+.bk-tree-drop-disabled {
   cursor: no-drop;
-}
-.bk-tree-ghost {
   opacity: 0.5;
-  background: #c8ebfb;
-}
-.bk-tree-chosen {
-  background: #e1ecff;
 }
 .bk-tree-drag {
-  opacity: 0.8;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  opacity: 0.85;
   cursor: grabbing;
 }
-.bk-tree-drag-disabled .bk-node-row {
+.bk-tree-drag-disabled {
   cursor: no-drop;
   opacity: 0.5;
 }
-.bk-tree-drop-indicator {
-  position: fixed;
-  pointer-events: none;
-  z-index: 9999;
-}
-.bk-tree-drop-indicator.bk-tree-drop-inner {
-  background: rgba(33, 150, 243, 0.06);
-  outline: 2px dashed #3a84ff;
-  outline-offset: -2px;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(58, 132, 255, 0.1);
+.bk-tree-drop-before,
+.bk-tree-drop-after,
+.bk-tree-drop-inner {
+  background-clip: content-box;
 }
-.bk-tree-drop-indicator.bk-tree-drop-line {
-  background: #3a84ff;
+.bk-tree-drop-before::after,
+.bk-tree-drop-after::after {
+  position: absolute;
+  right: 0;
+  left: var(--drop-line-left, 0);
+  display: block;
+  height: 2px;
   border-radius: 1px;
-}
-.bk-tree-drop-indicator.bk-tree-drop-line::before,
-.bk-tree-drop-indicator.bk-tree-drop-line::after {
+  background-color: #3a84ff;
   content: '';
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #3a84ff;
-  top: -2px;
+  pointer-events: none;
 }
-.bk-tree-drop-indicator.bk-tree-drop-line::before {
-  left: 0;
+.bk-tree-drop-before::after {
+  top: -1px;
 }
-.bk-tree-drop-indicator.bk-tree-drop-line::after {
-  right: 0;
+.bk-tree-drop-after::after {
+  bottom: -1px;
+}
+.bk-tree-drop-inner {
+  background-color: rgba(58, 132, 255, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(58, 132, 255, 0.28);
 }

package/lib/tree/use-intersection-observer.d.ts

@@ -6,7 +6,7 @@ type IntersectionObserverOptions = {
 };
 type IntersectionObserverResponseValue = {
     level: number;
-    node: Record<string, any>;
+    node: Record<string, unknown>;
     index: number;
     entry: IntersectionObserverEntry;
 };

package/lib/tree/use-node-action.d.ts

@@ -4,13 +4,13 @@ declare const _default: (props: TreePropTypes, ctx: any, flatData: IFlatData, _r
     renderTreeNode: (item: TreeNode, showTree?: boolean) => JSX.Element;
     handleTreeNodeClick: (item: TreeNode, e: MouseEvent, event?: string) => void;
     deepAutoOpen: () => void;
-    asyncNodeClick: (item: TreeNode) => Promise<boolean> | Promise<void | Record<string, unknown>>;
+    asyncNodeClick: (item: TreeNode) => Promise<boolean | (TreeNode | TreeNode[])>;
     setNodeAction: (args: TreeNode | TreeNode[], action: string, value: unknown) => void;
     setNodeOpened: (item: TreeNode, isOpen?: any, e?: MouseEvent, fireEmit?: boolean) => void;
     setSelect: (nodes: TreeNode | TreeNode[], selected?: boolean, autoOpen?: boolean, triggerEvent?: boolean, event?: string) => void;
     setOpen: (item: TreeNode, isOpen?: boolean, autoOpenParents?: boolean) => void;
     setNodeAttribute: (node: TreeNode, attrName: string | string[], value: (boolean | number | string)[] | boolean | number | string, loopParent?: boolean) => void;
-    isIndeterminate: (item: TreeNode) => any;
+    isIndeterminate: (item: TreeNode) => boolean;
     deepUpdateChildNode: (node: TreeNode, attr: string | string[], value: unknown | unknown[]) => void;
     updateParentChecked: (item: TreeNode, isChecked: any) => void;
 };

package/lib/tree/use-node-async.d.ts

@@ -1,6 +1,16 @@
-import { TreeNode } from './props';
-declare const _default: (props: any, flatData: any) => {
-    asyncNodeClick: (item: TreeNode) => Promise<boolean> | Promise<void | Record<string, unknown>>;
+import { EVENTS } from './constant';
+import { TreeDataChangePayload, TreeNode, TreePropTypes } from './props';
+import { IFlatData } from './util';
+type TreeContext = {
+    emit: (event: EVENTS, ...args: unknown[]) => void;
+};
+type AsyncLoadResponse = TreeNode | TreeNode[];
+export type UseNodeAsyncOptions = {
+    getTreeData?: () => TreeNode[];
+    onTreeDataChange?: (payload: TreeDataChangePayload) => void;
+};
+declare const _default: (props: TreePropTypes, flatData: IFlatData, ctx?: TreeContext, options?: UseNodeAsyncOptions) => {
+    asyncNodeClick: (item: TreeNode) => Promise<boolean | AsyncLoadResponse>;
     deepAutoOpen: () => void;
 };
 export default _default;