bkui-vue 2.1.0-dev-beta.11 → 2.1.0-dev-beta.13

package/lib/tree/props.d.ts

@@ -13,11 +13,19 @@ export type TreeNode = {
 };
 /**
  * 拖拽放置类型
- * - child: 作为目标节点的子节点
- * - move: 作为目标节点的同级节点（非排序模式）
- * - sort: 同父节点下排序（排序模式）
+ * - 同父级节点，落在目标节点前/后：dropType = 'sort'
+ * - 同父级节点，落在目标节点中间作为直接子节点：dropType = 'child'
+ * - 非同父级等其他情况：dropType = 'move'
+ * 非同父级等其他情况：dropType = 'move'
  */
 export type DropType = 'child' | 'move' | 'sort';
+/**
+ * 拖拽添加为子节点后，目标节点的展开状态
+ * - expand: 展开目标节点
+ * - collapse: 收起目标节点
+ * - inherit: 保持目标节点当前展开收起状态
+ */
+export type DragTargetOpenState = 'collapse' | 'expand' | 'inherit';
 export type DisableDropHandler = (data: TreeNode, type: DropType, target: TreeNode) => boolean;
 export type TreeDataChangeTrigger = 'async' | 'drag';
 export type TreeDataChangePayload = {
@@ -193,9 +201,7 @@ export declare const treeProps: {
      */
     disableDrop: PropType<DisableDropHandler>;
     /**
-     * 拖拽阈值
-     * 用于判断拖拽时鼠标位置与节点的距离
-     * 当鼠标位置与节点的距离大于此值时，才会触发拖拽
+     * 拖拽阈值：节点顶部/底部区域占比用于判定前后插入，中间区域作为目标子节点
      */
     dragThreshold: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -203,7 +209,7 @@ export declare const treeProps: {
         default: number;
     };
     /**
-     * 节点拖拽时可交换位置（开启拖拽可交换位置后将不支持改变层级）
+     * 节点拖拽时可调整前后顺序；拖拽到节点中部仍会添加为目标子节点
      */
     dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -219,6 +225,15 @@ export declare const treeProps: {
     dragSortMode: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    /**
+     * 拖拽添加为子节点后，目标节点的展开状态
+     * - expand: 展开目标节点
+     * - collapse: 收起目标节点
+     * - inherit: 保持目标节点当前展开收起状态
+     */
+    dragTargetOpenState: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
     /**
      * 节点是否可以选中
      */

package/lib/tree/tree.css

@@ -189,29 +189,6 @@
 .bk-tree .bk-node-row.is-selected:hover {
   background-color: #e1ecff;
 }
-.bk-tree .bk-node-row.drop-before::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: #2196F3;
-}
-.bk-tree .bk-node-row.drop-after::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: #2196F3;
-}
-.bk-tree .bk-node-row.drop-inner {
-  background-color: rgba(33, 150, 243, 0.1);
-  outline: 1px dashed #2196F3;
-  outline-offset: -1px;
-}
 .bk-tree-node {
   position: relative;
   display: flex;
@@ -297,68 +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 .insert-line {
+.bk-tree-drop-before,
+.bk-tree-drop-after,
+.bk-tree-drop-inner {
+  background-clip: content-box;
+}
+.bk-tree-drop-before::after,
+.bk-tree-drop-after::after {
   position: absolute;
+  right: 0;
+  left: var(--drop-line-left, 0);
+  display: block;
   height: 2px;
-  background: #2196F3;
-  display: none;
-  pointer-events: none;
-  z-index: 999;
-}
-.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-indicator.bk-tree-drop-line {
-  background: #3a84ff;
   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

@@ -85,6 +85,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     dragSortMode: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    dragTargetOpenState: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
     selectable: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -242,6 +245,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     dragSortMode: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    dragTargetOpenState: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
     selectable: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -338,6 +344,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     dragThreshold: number;
     dragSort: boolean;
     dragSortMode: string;
+    dragTargetOpenState: string;
     selectable: any;
     disabledFolderSelectable: boolean;
     showCheckbox: any;

package/lib/tree/tree.less

@@ -23,34 +23,6 @@
       }
     }
 
-    &.drop-before {
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background-color: #2196F3;
-      }
-    }
-    &.drop-after {
-      &::before {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background-color: #2196F3;
-      }
-    }
-
-    &.drop-inner {
-      background-color: rgba(33, 150, 243, 0.1);
-      outline: 1px dashed #2196F3;
-      outline-offset: -1px;
-    }
   }
 
   &-node {
@@ -161,83 +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;
     }
   }
 
-  &-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;
-    }
-  }
-
-  .insert-line {
-    position: absolute;
-    height: 2px;
-    background: #2196F3;
-    display: none;
-    pointer-events: none;
-    z-index: 999;
+    cursor: no-drop;
+    opacity: 0.5;
   }
-}
 
-.@{bk-prefix}-tree-drop-indicator {
-  position: fixed;
-  pointer-events: none;
-  z-index: 9999;
-
-  &.@{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;
   }
 
-  &.@{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

@@ -320,29 +320,6 @@
 .bk-tree .bk-node-row.is-selected:hover {
   background-color: #e1ecff;
 }
-.bk-tree .bk-node-row.drop-before::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: #2196F3;
-}
-.bk-tree .bk-node-row.drop-after::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: #2196F3;
-}
-.bk-tree .bk-node-row.drop-inner {
-  background-color: rgba(33, 150, 243, 0.1);
-  outline: 1px dashed #2196F3;
-  outline-offset: -1px;
-}
 .bk-tree-node {
   position: relative;
   display: flex;
@@ -428,68 +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 .insert-line {
+.bk-tree-drop-before,
+.bk-tree-drop-after,
+.bk-tree-drop-inner {
+  background-clip: content-box;
+}
+.bk-tree-drop-before::after,
+.bk-tree-drop-after::after {
   position: absolute;
+  right: 0;
+  left: var(--drop-line-left, 0);
+  display: block;
   height: 2px;
-  background: #2196F3;
-  display: none;
-  pointer-events: none;
-  z-index: 999;
-}
-.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-indicator.bk-tree-drop-line {
-  background: #3a84ff;
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "2.1.0-dev-beta.11",
+  "version": "2.1.0-dev-beta.13",
   "workspaces": [
     "packages/**",
     "scripts/cli",
@@ -135,7 +135,6 @@
     "js-calendar": "~1.2.3",
     "json-formatter-js": "~2.3.4",
     "lodash": "~4.17.21",
-    "sortablejs": "~1.15.7",
     "tinycolor2": "~1.6.0",
     "vue-types": "~4.1.1"
   }