bkui-vue 2.0.2-beta.7 → 2.0.2-beta.9

package/lib/index.js

@@ -3,5 +3,5 @@ export * from './hooks';
 export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
-export const version = "2.0.2-beta.7";
+export const version = "2.0.2-beta.9";
 window.__bkui_vue_version__ = version;

package/lib/tree/index.d.ts

@@ -44,6 +44,7 @@ declare const BkTree: {
             }>>;
             cache: boolean;
             deepAutoOpen?: string;
+            trigger?: string[];
         }>;
         offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
@@ -192,6 +193,7 @@ declare const BkTree: {
             }>>;
             cache: boolean;
             deepAutoOpen?: string;
+            trigger?: string[];
         }>;
         offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
@@ -365,6 +367,7 @@ declare const BkTree: {
             }>>;
             cache: boolean;
             deepAutoOpen?: string;
+            trigger?: string[];
         }>;
         offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
@@ -535,6 +538,7 @@ declare const BkTree: {
         }>>;
         cache: boolean;
         deepAutoOpen?: string;
+        trigger?: string[];
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
         default: number;

package/lib/tree/index.js

@@ -338,7 +338,12 @@ var treeProps = {
      * 可选值：once 只在初始化是执行一次
      * every 每次数据更新都执行
      */
-    deepAutoOpen: (0,external_vue_types_namespaceObject.toType)('columnType', {}).def(ColumnTypeEnum.ONCE)
+    deepAutoOpen: (0,external_vue_types_namespaceObject.toType)('columnType', {}).def(ColumnTypeEnum.ONCE),
+    /**
+     * 触发异步加载的时机
+     * 可选值：'expand', 'click', 'checked'
+     */
+    trigger: shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.oneOf(['expand', 'click', 'checked'])).def(null)
   }),
   /**
    * 每个节点偏移左侧距离
@@ -1460,6 +1465,14 @@ var use_node_action_this = undefined;
       deepUpdateChildNode(chid, attr, value);
     });
   };
+  var isRemoteFnExec = function isRemoteFnExec(event) {
+    var _props$async;
+    if ((_props$async = props.async) !== null && _props$async !== void 0 && (_props$async = _props$async.trigger) !== null && _props$async !== void 0 && _props$async.length) {
+      var _props$async2;
+      return (_props$async2 = props.async) === null || _props$async2 === void 0 ? void 0 : _props$async2.trigger.includes(event);
+    }
+    return true;
+  };
   var handleNodeItemCheckboxChange = function handleNodeItemCheckboxChange(item, value, event) {
     event === null || event === void 0 || event.preventDefault();
     event === null || event === void 0 || event.stopImmediatePropagation();
@@ -1477,7 +1490,7 @@ var use_node_action_this = undefined;
     }), flatData.data.filter(function (t) {
       return isIndeterminate(t);
     }));
-    handleNodeContentClick(item, event);
+    handleNodeContentClick(item, event, 'checked');
   };
   var isIndeterminate = function isIndeterminate(item) {
     return isNodeChecked(item) && getNodeAttr(item, NODE_ATTRIBUTES.IS_INDETERMINATE);
@@ -1487,6 +1500,7 @@ var use_node_action_this = undefined;
       return null;
     }
     return (0,external_vue_namespaceObject.createVNode)("span", {
+      "class": "node-check-box",
       "onClick": handleNodeCheckboxClick
     }, [(0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
       "indeterminate": isIndeterminate(item),
@@ -1586,25 +1600,27 @@ var use_node_action_this = undefined;
    * 节点点击
    * @param item
    */
-  var handleTreeNodeClick = function handleTreeNodeClick(item, e) {
+  var handleTreeNodeClick = function handleTreeNodeClick(item, e, event) {
     var isOpen = isItemOpen(item);
     if (isOpen) {
       setNodeOpened(item, false, e, true);
       return;
     }
-    /** 如果是异步请求加载 */
-    asyncNodeClick(item)["finally"](function () {
-      if (getNodeAttr(item, NODE_ATTRIBUTES.IS_LOADING)) {
-        registerNextLoop('setNodeOpenedAfterLoading', {
-          type: 'once',
-          fn: function fn() {
-            return setNodeOpened(item, true, e, true);
-          }
-        });
-      } else {
-        setNodeOpened(item, true, e, true);
-      }
-    });
+    if (isRemoteFnExec(event)) {
+      /** 如果是异步请求加载 */
+      asyncNodeClick(item)["finally"](function () {
+        if (getNodeAttr(item, NODE_ATTRIBUTES.IS_LOADING)) {
+          registerNextLoop('setNodeOpenedAfterLoading', {
+            type: 'once',
+            fn: function fn() {
+              return setNodeOpened(item, true, e, true);
+            }
+          });
+        } else {
+          setNodeOpened(item, true, e, true);
+        }
+      });
+    }
   };
   /**
    * 点击树形节点展开、收起图标处理事件
@@ -1615,7 +1631,7 @@ var use_node_action_this = undefined;
     e.stopImmediatePropagation();
     e.stopPropagation();
     e.preventDefault();
-    handleTreeNodeClick(node, e);
+    handleTreeNodeClick(node, e, 'expand');
   };
   /**
    * 设置节点选中状态
@@ -1699,19 +1715,19 @@ var use_node_action_this = undefined;
    * 点击节点事件
    * @param item
    */
-  var handleNodeContentClick = function handleNodeContentClick(item, e) {
+  var handleNodeContentClick = function handleNodeContentClick(item, e, event) {
     var nodeActions = resolveNodeAction(item);
     if (nodeActions.includes('selected')) {
       setSelect(item, true, true, true);
     }
     if (nodeActions.includes('expand')) {
       if (!isNodeOpened(item)) {
-        handleTreeNodeClick(item, e);
+        handleTreeNodeClick(item, e, event);
       }
     }
     if (nodeActions.includes('collapse')) {
       if (isNodeOpened(item)) {
-        handleTreeNodeClick(item, e);
+        handleTreeNodeClick(item, e, event);
       }
     }
     if (nodeActions.includes('click')) {
@@ -1805,6 +1821,7 @@ var use_node_action_this = undefined;
   var renderTreeNode = function renderTreeNode(item) {
     var _ctx$slots$nodeAppend, _ctx$slots4;
     var showTree = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var child = getActionIcon(item);
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "key": getNodeId(item),
       "class": getNodeRowClass(item, flatData.schema),
@@ -1813,14 +1830,14 @@ var use_node_action_this = undefined;
       "style": getNodeItemStyle(item, props, flatData, showTree),
       "class": getNodeItemClass(item, flatData.schema, props, showTree),
       "onClick": function onClick(e) {
-        return handleNodeContentClick(item, e);
+        return handleNodeContentClick(item, e, 'click');
       }
     }, [(0,external_vue_namespaceObject.createVNode)("div", {
-      "class": [resolveClassName('node-action')],
+      "class": [resolveClassName('node-action'), child ? '' : 'empty-child'],
       "onClick": function onClick(e) {
         return handleNodeActionClick(e, item);
       }
-    }, [getActionIcon(item)]), (0,external_vue_namespaceObject.createVNode)("div", {
+    }, [child]), (0,external_vue_namespaceObject.createVNode)("div", {
       "class": resolveClassName('node-content')
     }, [[getCheckboxRender(item), getNodePrefixIcon(item)], (0,external_vue_namespaceObject.createVNode)("span", {
       "class": resolveClassName('node-text')
@@ -2650,6 +2667,7 @@ var use_tree_init_this = undefined;
       getNodePath = _useNodeAttribute.getNodePath,
       getNodeId = _useNodeAttribute.getNodeId,
       getNodeAttr = _useNodeAttribute.getNodeAttr,
+      getNodeById = _useNodeAttribute.getNodeById,
       getParentNode = _useNodeAttribute.getParentNode,
       getIntersectionResponse = _useNodeAttribute.getIntersectionResponse;
     var _useSearch = use_search(props),
@@ -2795,6 +2813,11 @@ var use_tree_init_this = undefined;
         return;
       }
     };
+    var setCheckedById = function setCheckedById(id) {
+      var checked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var triggerEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      setChecked(getNodeById(id), checked, triggerEvent);
+    };
     ctx.expose({
       handleTreeNodeClick: handleTreeNodeClick,
       isNodeChecked: isNodeChecked,
@@ -2804,6 +2827,7 @@ var use_tree_init_this = undefined;
       hasChildNode: hasChildNode,
       setOpen: setOpen,
       setChecked: setChecked,
+      setCheckedById: setCheckedById,
       setNodeAction: setNodeAction,
       setNodeOpened: setOpen,
       setSelect: setSelect,

package/lib/tree/props.d.ts

@@ -240,6 +240,7 @@ type AsyncOption = {
     callback: (item: any, cb: any) => Promise<VNode | string>;
     cache: boolean;
     deepAutoOpen?: string;
+    trigger?: string[];
 };
 export type IIntersectionObserver = {
     enabled: boolean;

package/lib/tree/tree.css

@@ -276,6 +276,20 @@
 .bk-tree-node:not(.is-root) {
   margin-left: calc(var(--depth)*var(--indent));
 }
+.bk-tree-node:not(.is-root).level-line .bk-node-action.empty-child {
+  position: relative;
+}
+.bk-tree-node:not(.is-root).level-line .bk-node-action.empty-child::before {
+  position: absolute;
+  top: calc(50% + 1px);
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 0;
+  pointer-events: none;
+  border-bottom: var(--level-line);
+  content: '';
+}
 .bk-tree-node:not(.is-root).level-line::before {
   position: absolute;
   top: calc(50% + 1px);
@@ -309,6 +323,7 @@
 .bk-tree-node .bk-node-action {
   margin-right: 6px;
   color: #979ba5;
+  min-width: 14px;
 }
 .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
@@ -319,6 +334,9 @@
   align-items: center;
   min-width: 0;
 }
+.bk-tree-node .bk-node-content .node-check-box {
+  display: inline-flex;
+}
 .bk-tree-node .bk-node-content .bk-checkbox {
   margin: 0;
 }

package/lib/tree/tree.d.ts

@@ -49,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         cache: boolean;
         deepAutoOpen?: string;
+        trigger?: string[];
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -186,6 +187,7 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         cache: boolean;
         deepAutoOpen?: string;
+        trigger?: string[];
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
         default: number;

package/lib/tree/tree.less

@@ -27,6 +27,25 @@
       margin-left: calc(var(--depth)*var(--indent));
 
       &.level-line {
+
+        .@{bk-prefix}-node-action {
+          &.empty-child {
+            position: relative;
+
+            &::before {
+              position: absolute;
+              top: calc(50% + 1px);
+              left: 0;
+              right: 0;
+              z-index: 1;
+              height: 0;
+              pointer-events: none;
+              border-bottom: var(--level-line);
+              content: '';
+            }
+          }
+        }
+
         &::before {
           position: absolute;
           top: calc(50% + 1px);
@@ -68,6 +87,7 @@
     .@{bk-prefix}-node-action {
       margin-right: 6px;
       color: #979ba5;
+      min-width: 14px;
     }
 
     .@{bk-prefix}-tree-icon {
@@ -80,6 +100,10 @@
       align-items: center;
       min-width: 0;
 
+      .node-check-box {
+        display: inline-flex;
+      }
+
       .@{bk-prefix}-checkbox {
         margin: 0;
 

package/lib/tree/tree.variable.css

@@ -406,6 +406,20 @@
 .bk-tree-node:not(.is-root) {
   margin-left: calc(var(--depth)*var(--indent));
 }
+.bk-tree-node:not(.is-root).level-line .bk-node-action.empty-child {
+  position: relative;
+}
+.bk-tree-node:not(.is-root).level-line .bk-node-action.empty-child::before {
+  position: absolute;
+  top: calc(50% + 1px);
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 0;
+  pointer-events: none;
+  border-bottom: var(--level-line);
+  content: '';
+}
 .bk-tree-node:not(.is-root).level-line::before {
   position: absolute;
   top: calc(50% + 1px);
@@ -439,6 +453,7 @@
 .bk-tree-node .bk-node-action {
   margin-right: 6px;
   color: #979ba5;
+  min-width: 14px;
 }
 .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
@@ -449,6 +464,9 @@
   align-items: center;
   min-width: 0;
 }
+.bk-tree-node .bk-node-content .node-check-box {
+  display: inline-flex;
+}
 .bk-tree-node .bk-node-content .bk-checkbox {
   margin: 0;
 }

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

@@ -2,7 +2,7 @@ import { TreeNode, TreePropTypes } from './props';
 import { IFlatData } from './util';
 declare const _default: (props: TreePropTypes, ctx: any, flatData: IFlatData, _renderData: any, initOption: any) => {
     renderTreeNode: (item: TreeNode, showTree?: boolean) => JSX.Element;
-    handleTreeNodeClick: (item: TreeNode, e: MouseEvent) => void;
+    handleTreeNodeClick: (item: TreeNode, e: MouseEvent, event?: string) => void;
     deepAutoOpen: () => void;
     asyncNodeClick: (item: TreeNode) => Promise<boolean> | Promise<void | Record<string, unknown>>;
     setNodeAction: (args: TreeNode | TreeNode[], action: string, value: unknown) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "2.0.2-beta.7",
+  "version": "2.0.2-beta.9",
   "workspaces": [
     "packages/**",
     "scripts/cli",