bkui-vue 0.0.1-beta.123 → 0.0.1-beta.124

package/dist/index.esm.js

@@ -9649,13 +9649,13 @@ const checkboxProps = {
   checked: PropTypes.bool.def(false),
   indeterminate: PropTypes.bool,
   beforeChange: PropTypes.func,
-  size: PropTypes.size()
+  size: PropTypes.size().def("large")
 };
 var Component$v = defineComponent({
   name: "Checkbox",
   props: checkboxProps,
   emits: ["update:modelValue", "change"],
-  setup() {
+  setup(props) {
     const [isFocus, {
       blur: handleBlur,
       focus: handleFocus
@@ -9673,7 +9673,8 @@ var Component$v = defineComponent({
       setChecked,
       handleBlur,
       handleFocus,
-      handleChange
+      handleChange,
+      size: props.size
     };
   },
   render() {
@@ -9687,7 +9688,7 @@ var Component$v = defineComponent({
     return createVNode("label", {
       "class": checkboxClass
     }, [createVNode("span", {
-      "class": "bk-checkbox-input"
+      "class": [resolveClassName("checkbox-input"), this.size]
     }, [createVNode("input", {
       "role": "checkbox",
       "type": "checkbox",
@@ -23781,13 +23782,15 @@ var EVENTS = /* @__PURE__ */ ((EVENTS2) => {
   EVENTS2["NODE_CLICK"] = "nodeClick";
   EVENTS2["NODE_COLLAPSE"] = "nodeCollapse";
   EVENTS2["NODE_EXPAND"] = "nodeExpand";
+  EVENTS2["NODE_CHECKED"] = "nodeChecked";
   return EVENTS2;
 })(EVENTS || {});
 const EMPTY = (..._args) => true;
 const TreeEmitEventsType = {
   ["nodeClick"]: EMPTY,
   ["nodeCollapse"]: EMPTY,
-  ["nodeExpand"]: EMPTY
+  ["nodeExpand"]: EMPTY,
+  ["nodeChecked"]: EMPTY
 };
 var NODE_ATTRIBUTES = /* @__PURE__ */ ((NODE_ATTRIBUTES2) => {
   NODE_ATTRIBUTES2["DEPTH"] = "__depth";
@@ -23866,6 +23869,8 @@ const treeProps = {
   draggable: PropTypes.bool.def(false),
   dragSort: PropTypes.bool.def(false),
   selectable: PropTypes.bool.def(true),
+  showCheckbox: PropTypes.bool.def(false),
+  showNodeTypeIcon: PropTypes.bool.def(true),
   selected: PropTypes.oneOfType([PropTypes.string, null, PropTypes.number, PropTypes.object]).def(null),
   autoCheckChildren: PropTypes.bool.def(true),
   autoOpenParentNode: PropTypes.bool.def(true)
@@ -23910,6 +23915,7 @@ var useNodeAttribute = (flatData, props) => {
     setNodeAttr(node, NODE_ATTRIBUTES.IS_LOADING, value);
   };
   const deleteNodeSchema = (id) => flatData.schema.delete(id);
+  const getParentNode2 = (node) => getSchemaVal2(getNodeParentId(node));
   const isItemOpen = (item) => {
     var _a;
     if (typeof item === "object") {
@@ -23963,6 +23969,7 @@ var useNodeAttribute = (flatData, props) => {
     getNodeParentId,
     getNodeParentIdById,
     getParentNodeData,
+    getParentNode: getParentNode2,
     setNodeAttr,
     getNodePath,
     isRootNode,
@@ -24151,6 +24158,8 @@ var useNodeAction = (props, ctx, flatData, renderData, schemaValues, initOption)
     isItemOpen,
     isNodeOpened,
     isNodeLoading,
+    isNodeChecked,
+    getParentNode: getParentNode2,
     resolveScopedSlotParam,
     extendNodeAttr
   } = useNodeAttribute(flatData, props);
@@ -24162,9 +24171,9 @@ var useNodeAction = (props, ctx, flatData, renderData, schemaValues, initOption)
     deepAutoOpen
   } = useNodeAsync(props, flatData);
   const getRootIcon = (item) => isItemOpen(item) ? createVNode(folderShapeOpen, {
-    "class": resolveClassName("tree-icon")
+    "class": [resolveClassName("tree-icon"), resolveClassName("node-prefix")]
   }, null) : createVNode(folder, {
-    "class": resolveClassName("tree-icon")
+    "class": [resolveClassName("tree-icon"), resolveClassName("node-prefix")]
   }, null);
   const renderPrefixVal = (val) => {
     if (typeof val === "string") {
@@ -24207,12 +24216,19 @@ var useNodeAction = (props, ctx, flatData, renderData, schemaValues, initOption)
     }
     if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
       if (hasChildNode(item) || item.async || !props.autoCheckChildren) {
-        return isItemOpen(item) ? createVNode(downShape, null, null) : createVNode(rightShape, null, null);
+        return isItemOpen(item) ? createVNode(downShape, {
+          "class": resolveClassName("node-prefix")
+        }, null) : createVNode(rightShape, {
+          "class": resolveClassName("node-prefix")
+        }, null);
       }
     }
     return null;
   };
   const getNodePrefixIcon = (item) => {
+    if (!props.showNodeTypeIcon) {
+      return null;
+    }
     if (ctx.slots.nodeType) {
       return ctx.slots.nodeType(extendNodeAttr(item));
     }
@@ -24225,11 +24241,40 @@ var useNodeAction = (props, ctx, flatData, renderData, schemaValues, initOption)
     }
     if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
       return isRootNode(item) || hasChildNode(item) ? getRootIcon(item) : createVNode(textFile, {
-        "class": resolveClassName("tree-icon")
+        "class": [resolveClassName("tree-icon"), resolveClassName("node-prefix")]
       }, null);
     }
     return null;
   };
+  const updateParentChecked = (item, isChecked) => {
+    const parent = getParentNode2(item);
+    const checked = isChecked || schemaValues.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).some((filterNode) => isNodeChecked(filterNode));
+    if (parent) {
+      setNodeAttr(parent, NODE_ATTRIBUTES.IS_CHECKED, checked);
+      if (!isRootNode(parent)) {
+        updateParentChecked(parent, isChecked);
+      }
+    }
+  };
+  const handleNodeItemCheckboxChange = (item, value) => {
+    setNodeAttr(item, NODE_ATTRIBUTES.IS_CHECKED, !!value);
+    schemaValues.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).forEach((filterNode) => setNodeAttr(filterNode, NODE_ATTRIBUTES.IS_CHECKED, !!value));
+    updateParentChecked(item, value);
+    ctx.emit(EVENTS.NODE_CHECKED, schemaValues.value.filter((t2) => isNodeChecked(t2)).map((n2) => n2[NODE_ATTRIBUTES.UUID]));
+  };
+  const isIndeterminate = (item) => isNodeChecked(item) && !schemaValues.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).every((filterNode) => isNodeChecked(filterNode));
+  const isNodeItemChecked = (item) => isNodeChecked(item) || schemaValues.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).some((filterNode) => isNodeChecked(filterNode));
+  const getCheckboxRender = (item) => {
+    if (!props.showCheckbox) {
+      return null;
+    }
+    return createVNode(BkCheckbox, {
+      "size": "small",
+      "modelValue": isNodeItemChecked(item),
+      "indeterminate": isIndeterminate(item),
+      "onChange": (val) => handleNodeItemCheckboxChange(item, val)
+    }, null);
+  };
   const setNodeOpened = (item, isOpen = null, e = null, fireEmit = true) => {
     const newVal = isOpen === null ? !isItemOpen(item) : !!isOpen;
     if (!newVal) {
@@ -24375,11 +24420,11 @@ var useNodeAction = (props, ctx, flatData, renderData, schemaValues, initOption)
       "style": getNodeItemStyle(item, props, flatData),
       "onClick": (e) => handleNodeContentClick(item, e)
     }, [createVNode("span", {
-      "class": resolveClassName("node-action"),
+      "class": [resolveClassName("node-action")],
       "onClick": (e) => handleNodeActionClick(e, item)
     }, [getActionIcon(item)]), createVNode("span", {
       "class": resolveClassName("node-content")
-    }, [[getNodePrefixIcon(item)], createVNode("span", {
+    }, [[getCheckboxRender(item), getNodePrefixIcon(item)], createVNode("span", {
       "class": resolveClassName("node-text")
     }, [(_c = (_b = (_a = ctx.slots).node) == null ? void 0 : _b.call(_a, extendNodeAttr(item))) != null ? _c : [getLabel(item, props)]]), (_e = (_d = ctx.slots).nodeAppend) == null ? void 0 : _e.call(_d, extendNodeAttr(item))]), getVirtualLines(item)])]);
   };
@@ -24562,6 +24607,7 @@ var useTreeInit = (props) => {
       data: data2,
       children
     } = props2;
+    const checkedList = [];
     const outputData = [];
     let order2 = 0;
     const schema = /* @__PURE__ */ new Map();
@@ -24651,6 +24697,10 @@ var useTreeInit = (props) => {
             Object.assign(item, {
               [NODE_ATTRIBUTES.UUID]: uuid2
             });
+            const isChecked = props2.showCheckbox && getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_CHECKED);
+            if (isChecked) {
+              checkedList.push(uuid2);
+            }
             schema.set(uuid2, {
               [NODE_ATTRIBUTES.DEPTH]: depth,
               [NODE_ATTRIBUTES.INDEX]: i2,
@@ -24663,7 +24713,7 @@ var useTreeInit = (props) => {
               [NODE_ATTRIBUTES.IS_SELECTED]: isCachedTreeNodeSelected(uuid2, item),
               [NODE_ATTRIBUTES.IS_MATCH]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_MATCH),
               [NODE_ATTRIBUTES.IS_OPEN]: isOpened,
-              [NODE_ATTRIBUTES.IS_CHECKED]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_CHECKED),
+              [NODE_ATTRIBUTES.IS_CHECKED]: isChecked,
               [NODE_ATTRIBUTES.IS_CACHED]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_CACHED),
               [NODE_ATTRIBUTES.IS_ASYNC]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_ASYNC),
               [NODE_ATTRIBUTES.IS_LOADING]: getCachedTreeNodeAttr(uuid2, item, NODE_ATTRIBUTES.IS_LOADING),
@@ -24682,6 +24732,14 @@ var useTreeInit = (props) => {
       }
     }
     flatten(treeData ? treeData : data2);
+    if (props2.showCheckbox) {
+      checkedList == null ? void 0 : checkedList.forEach((value) => {
+        Array.from(schema.values()).filter((t2) => t2[NODE_ATTRIBUTES.PATH].startsWith(schema.get(value)[NODE_ATTRIBUTES.PATH])).forEach((n2) => Object.assign(n2, {
+          [NODE_ATTRIBUTES.IS_CHECKED]: true
+        }));
+        loopUpdateNodeAttr(value, NODE_ATTRIBUTES.IS_CHECKED, true, () => true);
+      });
+    }
     return [outputData, schema];
   };
   const formatData = getFlatdata(props);