bkui-vue 0.0.1-beta.121 → 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",
@@ -14902,8 +14903,8 @@ const virtualRenderProps = __spreadValues({
   className: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.string]).def(""),
   contentClassName: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.string]).def(""),
   contentStyle: PropTypes.object.def({}),
-  scrollXName: PropTypes.string.def("bk-scroll-x"),
-  scrollYName: PropTypes.string.def("bk-scroll-y"),
+  scrollXName: PropTypes.string.def(resolveClassName("F-scroll-x")),
+  scrollYName: PropTypes.string.def(resolveClassName("F-scroll-y")),
   groupItemCount: PropTypes.number.def(1),
   preloadItemCount: PropTypes.number.def(1),
   renderAs: PropTypes.string.def("div"),
@@ -15036,7 +15037,7 @@ var Component$d = defineComponent({
       renderAs,
       contentAs
     } = props;
-    const resolveClassName2 = (prop) => {
+    const resolvePropClassName = (prop) => {
       if (typeof prop === "string") {
         return [prop];
       }
@@ -15144,8 +15145,8 @@ var Component$d = defineComponent({
         display: isHidden ? "none" : "block"
       };
     });
-    const wrapperClass = computed(() => ["bk-virtual-render", props.scrollXName, props.scrollYName, ...resolveClassName2(props.className), props.scrollPosition === "container" ? "bk-virtual-content" : ""]);
-    const innerClass = computed(() => [props.scrollPosition === "content" ? "bk-virtual-content" : "", ...resolveClassName2(props.contentClassName)]);
+    const wrapperClass = computed(() => [resolveClassName("virtual-render"), props.scrollXName, props.scrollYName, ...resolvePropClassName(props.className), props.scrollPosition === "container" ? resolveClassName("virtual-content") : ""]);
+    const innerClass = computed(() => [props.scrollPosition === "content" ? resolveClassName("virtual-content") : "", ...resolvePropClassName(props.contentClassName)]);
     const vVirtualRender = resolveDirective("bkVirtualRender");
     const dirModifier = {
       lineHeight: props.lineHeight,
@@ -15172,7 +15173,7 @@ var Component$d = defineComponent({
       }, [(_f = (_e = (_d = ctx.slots).default) == null ? void 0 : _e.call(_d, {
         data: calcList.value
       })) != null ? _f : ""]), [[vVirtualRender, dirModifier]]), (_i = (_h = (_g = ctx.slots).afterContent) == null ? void 0 : _h.call(_g)) != null ? _i : "", h$1("div", {
-        class: ["bk-virtual-section"],
+        class: [resolveClassName("virtual-section")],
         style: innerStyle.value
       })]);
     };
@@ -15225,6 +15226,7 @@ const TABLE_ROW_ATTRIBUTE = {
   ROW_UID: "__$uuid",
   ROW_EXPAND: "__row_expand"
 };
+const SCROLLY_WIDTH = 4;
 const resolvePaginationOption = (propPagination, defVal) => {
   if (!!propPagination) {
     if (typeof propPagination === "object") {
@@ -15377,7 +15379,7 @@ const tableProps = {
   activeColumn: PropTypes.oneOfType([PropTypes.number.def(-1), PropTypes.arrayOf(PropTypes.number.def(-1))]),
   columnPick: PropTypes.commonType(["multi", "single", "disabled"], "columnPick").def("disabled"),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def("auto"),
-  minHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(200),
+  minHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(80),
   maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def("auto"),
   rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).def(40),
   headHeight: PropTypes.number.def(40),
@@ -16413,7 +16415,7 @@ var useFixedColumn = (props, colgroups, hasScrollY) => {
     right: (ignoreFirst = true) => colgroups.filter((col) => col.fixed === "right").reduce((offset2, curr, index) => {
       const outOffset = ignoreFirst && index === 0 ? offset2 : offset2 + getColumnReactWidth(curr);
       return outOffset;
-    }, hasScrollY ? 4 : 0)
+    }, hasScrollY ? SCROLLY_WIDTH : 0)
   };
   const reolveFixRightOffset = resolveFixOffset.right;
   const getFixedColumnStyleResolve = () => {
@@ -17015,8 +17017,18 @@ const useClass = (props, root, reactiveProp, pageData) => {
     [resolveClassName("table-footer")]: true,
     ["is-hidden"]: !props.pagination || !props.data.length
   }));
+  const resolveWidth2 = () => {
+    if (props.columns.every((col) => /^\d+\.?\d*(px)?$/ig.test(`${col.width}`))) {
+      const rectWidth = props.columns.reduce((width, col) => width + Number(`${col.width}`.replace(/px/ig, "")), 0);
+      const offset2 = hasScrollY.value ? SCROLLY_WIDTH : 0;
+      return `${rectWidth + offset2}px`;
+    }
+    return "100%";
+  };
   const wrapperStyle = computed(() => ({
-    minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
+    minHeight: resolveNumberOrStringToPix(props.minHeight, "auto"),
+    width: resolveWidth2(),
+    maxWidth: "100%"
   }));
   const resolvePropHeight = (height, defaultValue) => {
     const strHeight = String(height);
@@ -17065,7 +17077,7 @@ const useClass = (props, root, reactiveProp, pageData) => {
   const getColumnsWidthOffsetWidth = () => {
     let offsetWidth = 0;
     if (hasScrollY.value) {
-      offsetWidth = offsetWidth + 4;
+      offsetWidth = offsetWidth + SCROLLY_WIDTH;
     }
     if (props.border.includes(BORDER_OPTION.OUTER) && !props.border.includes(BORDER_OPTION.NONE)) {
       offsetWidth = offsetWidth + 2;
@@ -17314,9 +17326,11 @@ var Component$b = defineComponent({
     };
     onMounted(() => {
       observerIns = observerResize(root.value, () => {
-        if (props.height === "100%") {
+        if (props.height === "100%" || props.height === "auto") {
           resetTableHeight(root.value);
         }
+        const offset2 = getColumnsWidthOffsetWidth();
+        resolveColumnWidth(root.value, colgroups, 20, offset2);
       }, 60, true);
       observerIns.start();
     });
@@ -17328,9 +17342,9 @@ var Component$b = defineComponent({
     ctx.expose({
       setRowExpand
     });
-    const tableBodyClass = __spreadProps(__spreadValues({}, contentClass), {
+    const tableBodyClass = computed(() => __spreadProps(__spreadValues({}, contentClass), {
       "__is-empty": !pageData.length
-    });
+    }));
     const tableBodyContentClass = {
       [resolveClassName("table-body-content")]: true,
       "with-virtual-render": props.virtualEnabled
@@ -17349,6 +17363,10 @@ var Component$b = defineComponent({
     const {
       renderScrollLoading
     } = useScrollLoading(props, ctx);
+    const scrollClass = props.virtualEnabled ? {} : {
+      scrollXName: "",
+      scrollYName: ""
+    };
     return () => createVNode("div", {
       "class": tableClass.value,
       "style": wrapperStyle.value,
@@ -17358,18 +17376,19 @@ var Component$b = defineComponent({
         "class": headClass,
         "style": headStyle.value
       }, [tableRender.renderTableHeadSchema()]),
-      createVNode(BkVirtualRender, {
+      createVNode(BkVirtualRender, mergeProps({
         "ref": refVirtualRender,
         "lineHeight": tableRender.getRowHeight,
-        "class": tableBodyClass,
+        "class": tableBodyClass.value,
         "style": contentStyle,
-        "list": pageData,
+        "list": pageData
+      }, scrollClass, {
         "contentClassName": tableBodyContentClass,
         "onContentScroll": handleScrollChanged,
         "throttleDelay": 0,
         "scrollEvent": true,
         "enabled": props.virtualEnabled
-      }, {
+      }), {
         default: (scope) => tableRender.renderTableBodySchema(scope.data || props.data)
       }),
       createVNode("div", {
@@ -23763,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";
@@ -23848,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)
@@ -23892,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") {
@@ -23945,6 +23969,7 @@ var useNodeAttribute = (flatData, props) => {
     getNodeParentId,
     getNodeParentIdById,
     getParentNodeData,
+    getParentNode: getParentNode2,
     setNodeAttr,
     getNodePath,
     isRootNode,
@@ -24133,6 +24158,8 @@ var useNodeAction = (props, ctx, flatData, renderData, schemaValues, initOption)
     isItemOpen,
     isNodeOpened,
     isNodeLoading,
+    isNodeChecked,
+    getParentNode: getParentNode2,
     resolveScopedSlotParam,
     extendNodeAttr
   } = useNodeAttribute(flatData, props);
@@ -24144,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") {
@@ -24189,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));
     }
@@ -24207,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) {
@@ -24357,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)])]);
   };
@@ -24544,6 +24607,7 @@ var useTreeInit = (props) => {
       data: data2,
       children
     } = props2;
+    const checkedList = [];
     const outputData = [];
     let order2 = 0;
     const schema = /* @__PURE__ */ new Map();
@@ -24633,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,
@@ -24645,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),
@@ -24664,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);