bkui-vue 0.0.1-beta.343 → 0.0.1-beta.345

package/dist/index.esm.js

@@ -7354,6 +7354,41 @@ const observerResize$1 = (root, callbackFn, delay = 60, immediate = false) => {
   };
 };
 const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
+function checkOverflow(el) {
+  if (!el)
+    return false;
+  const createDom = (el2, css) => {
+    const dom = document.createElement("div");
+    const width = parseFloat(css.width) ? `${Math.ceil(parseFloat(css.width))}px` : css.width;
+    dom.style.cssText = `
+      width: ${width};
+      line-height: ${css["line-height"]};
+      font-size: ${css["font-size"]};
+      word-break: ${css["word-break"]};
+      padding: ${css.padding};
+    `;
+    dom.textContent = el2.textContent;
+    return dom;
+  };
+  let isOverflow = false;
+  try {
+    const css = window.getComputedStyle(el, null);
+    const lineClamp = css.webkitLineClamp;
+    if (lineClamp !== "none") {
+      const targetHeight = parseFloat(css.height);
+      const dom = createDom(el, css);
+      document.body.appendChild(dom);
+      const domHeight = window.getComputedStyle(dom, null).height;
+      document.body.removeChild(dom);
+      isOverflow = targetHeight < parseFloat(domHeight);
+    } else {
+      isOverflow = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
+    }
+  } catch (e) {
+    console.warn("There is an error when check element overflow state: ", e);
+  }
+  return isOverflow;
+}
 class BkMaskManager {
   constructor(config) {
     this.multiInstance = false;
@@ -7889,11 +7924,6 @@ var SizeEnum = /* @__PURE__ */ ((SizeEnum2) => {
   SizeEnum2["DEFAULT"] = "default";
   return SizeEnum2;
 })(SizeEnum || {});
-var RenderDirectiveEnum = /* @__PURE__ */ ((RenderDirectiveEnum2) => {
-  RenderDirectiveEnum2["IF"] = "if";
-  RenderDirectiveEnum2["SHOW"] = "show";
-  return RenderDirectiveEnum2;
-})(RenderDirectiveEnum || {});
 function renderDirectiveType() {
   return j("renderDirective", {
     default: "show"
@@ -9166,8 +9196,25 @@ var BreadcrumbItem = defineComponent({
     const classCtx = classes({
       "bk-breadcrumb-item": true
     }, `${props2.extCls || ""}`);
+    const renderSeparator = () => {
+      if (slots.separator) {
+        return slots.separator();
+      }
+      if (parent.separatorClass) {
+        return createVNode("i", {
+          "class": `bk-breadcrumb-separator ${parent.separatorClass}`
+        }, null);
+      }
+      if (parent.separator) {
+        return createVNode("span", {
+          "class": "bk-breadcrumb-separator",
+          "role": "presentation"
+        }, [parent == null ? void 0 : parent.separator]);
+      }
+      return null;
+    };
     return () => {
-      var _a, _b;
+      var _a;
       return createVNode("span", {
         "class": classCtx
       }, [createVNode("span", {
@@ -9175,12 +9222,7 @@ var BreadcrumbItem = defineComponent({
         "class": `bk-breadcrumb-item-inner ${props2.to ? "is-link" : ""}`,
         "role": "link",
         "onClick": handleClick
-      }, [(_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)]), (slots == null ? void 0 : slots.separator) ? (_b = slots == null ? void 0 : slots.separator) == null ? void 0 : _b.call(slots) : (parent == null ? void 0 : parent.separatorClass) ? createVNode("i", {
-        "class": `bk-breadcrumb-separator ${parent.separatorClass}`
-      }, null) : createVNode("span", {
-        "class": "bk-breadcrumb-separator",
-        "role": "presentation"
-      }, [parent == null ? void 0 : parent.separator])]);
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), renderSeparator()]);
     };
   }
 });
@@ -9337,10 +9379,10 @@ var Component$y = defineComponent({
         if (isHover.value && !props2.text)
           return "white";
         if (props2.text && props2.disabled)
-          return "";
+          return;
         return props2.hoverTheme || props2.theme;
       }
-      return ["", "default"].includes(props2.theme) ? "" : "white";
+      return !props2.theme ? void 0 : "white";
     });
     const loadingSize = computed(() => isText.value || props2.size === BkLoadingSize.Small ? BkLoadingSize.Mini : BkLoadingSize.Small);
     const handleClick = (e) => {
@@ -9798,6 +9840,7 @@ const useCheckbox = () => {
   } = currentInstance;
   const checkboxGroup = inject(checkboxGroupKey, EMPTY_OBJ);
   const isGroup = !isEmptyObj(checkboxGroup);
+  const inputRef = ref();
   const isChecked = ref(props2.checked);
   const isDisabled = computed(() => {
     if (isGroup && checkboxGroup.props.disabled) {
@@ -9805,6 +9848,19 @@ const useCheckbox = () => {
     }
     return props2.disabled;
   });
+  const triggerChange = () => {
+    const nextValue = isChecked.value ? props2.trueLabel : props2.falseLabel;
+    emit("update:modelValue", nextValue);
+    emit("change", nextValue);
+    if (isGroup) {
+      checkboxGroup.handleChange();
+    }
+    nextTick(() => {
+      if (inputRef.value.checked !== isChecked.value) {
+        inputRef.value.checked = isChecked.value;
+      }
+    });
+  };
   if (isGroup) {
     watch(() => checkboxGroup.props.modelValue, (modelValue) => {
       isChecked.value = modelValue.includes(props2.label);
@@ -9821,6 +9877,10 @@ const useCheckbox = () => {
       immediate: true
     });
   }
+  watch(() => props2.checked, () => {
+    isChecked.value = props2.checked;
+    triggerChange();
+  });
   const setChecked = (value = true) => {
     isChecked.value = value;
   };
@@ -9830,17 +9890,7 @@ const useCheckbox = () => {
     }
     const $targetInput = event.target;
     isChecked.value = $targetInput.checked;
-    const nextValue = isChecked.value ? props2.trueLabel : props2.falseLabel;
-    emit("update:modelValue", nextValue);
-    emit("change", nextValue);
-    if (isGroup) {
-      checkboxGroup.handleChange();
-    }
-    nextTick(() => {
-      if ($targetInput.checked !== isChecked.value) {
-        $targetInput.checked = isChecked.value;
-      }
-    });
+    triggerChange();
   };
   onMounted(() => {
     if (isGroup) {
@@ -9853,6 +9903,7 @@ const useCheckbox = () => {
     }
   });
   return {
+    inputRef,
     isChecked,
     isDisabled,
     setChecked,
@@ -9860,10 +9911,10 @@ const useCheckbox = () => {
   };
 };
 const checkboxProps = {
-  modelValue: PropTypes.oneOfType([String, Number, Boolean]).def(""),
+  modelValue: PropTypes.oneOfType([String, Number, Boolean]),
   label: PropTypes.oneOfType([String, Number, Boolean]),
   trueLabel: PropTypes.oneOfType([String, Number, Boolean]).def(true),
-  falseLabel: PropTypes.oneOfType([String, Number, Boolean]).def(""),
+  falseLabel: PropTypes.oneOfType([String, Number, Boolean]).def(false),
   disabled: PropTypes.bool.def(false),
   checked: PropTypes.bool.def(false),
   indeterminate: PropTypes.bool,
@@ -9880,12 +9931,14 @@ var Component$v = defineComponent({
       focus: handleFocus
     }] = useFocus$1();
     const {
+      inputRef,
       isChecked,
       isDisabled,
       setChecked,
       handleChange
     } = useCheckbox();
     return {
+      inputRef,
       isFocus,
       isChecked,
       isDisabled,
@@ -9917,6 +9970,7 @@ var Component$v = defineComponent({
     }, [createVNode("span", {
       "class": [resolveClassName("checkbox-input"), this.size]
     }, [createVNode("input", {
+      "ref": "inputRef",
       "role": "checkbox",
       "type": "checkbox",
       "class": "bk-checkbox-original",
@@ -10012,7 +10066,7 @@ const propsCollapsePanel = __spreadValues({
   content: PropTypes.string,
   disabled: PropTypes.bool.def(false),
   isFormList: PropTypes.bool.def(false),
-  renderDirective: renderDirectiveType().def(RenderDirectiveEnum.SHOW),
+  renderDirective: renderDirectiveType(),
   modelValue: PropTypes.bool.def(false)
 }, CollapsePanelEventProps);
 const trimArr$1 = function(s2) {
@@ -10310,7 +10364,7 @@ const propsMixin$1 = {
   direction: PropTypes.string,
   title: PropTypes.string.def(""),
   animateType: PropTypes.string.def("slide"),
-  renderDirective: renderDirectiveType,
+  renderDirective: renderDirectiveType(),
   beforeClose: PropTypes.custom(() => true),
   dialogType: dialogTypeUnion(),
   multiInstance: PropTypes.bool.def(true),
@@ -10723,6 +10777,11 @@ var Component$t = defineComponent({
       login
     };
     const renderImg = () => {
+      if (_$1.isFunction(slots.type)) {
+        return createVNode("div", {
+          "class": "bk-exception-img"
+        }, [slots.type()]);
+      }
       const imgSrc = images[props2.type] ? images[props2.type] : empty;
       return createVNode("div", {
         "class": "bk-exception-img"
@@ -17280,8 +17339,8 @@ const getSortFn = (column, sortType) => {
   const fieldName = column.field;
   const getVal = (row) => getRowText(row, fieldName, column);
   const sortFn0 = (a2, b2) => {
-    const val0 = getVal(a2);
-    const val1 = getVal(b2);
+    const val0 = getVal(a2) || "";
+    const val1 = getVal(b2) || "";
     if (typeof val0 === "number" && typeof val1 === "number") {
       return val0 - val1;
     }
@@ -17328,7 +17387,7 @@ const isRowSelectEnable = (props2, {
   isCheckAll
 }) => {
   if (typeof props2.isRowSelectEnable === "boolean") {
-    return props2.isRowSelectEnable;
+    return props2.isRowSelectEnable !== false;
   }
   if (typeof props2.isRowSelectEnable === "function") {
     return props2.isRowSelectEnable({
@@ -17442,7 +17501,7 @@ var TableCell = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": "cell",
+        "class": ["cell", props2.column.type],
         "ref": refRoot,
         "title": props2.title
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
@@ -18272,7 +18331,6 @@ class TableRender {
           var _a, _b;
           const cellStyle = [resolveFixedColumnStyle(column), ...formatPropAsArray(this.props.cellStyle, [column, index, row, rowIndex, this])];
           const tdCtxClass = {
-            cell: true,
             "expand-cell": column.type === "expand"
           };
           const cellKey = `__CELL_${rowIndex}_${index}`;
@@ -18880,7 +18938,6 @@ const useInit = (props2, targetColumns) => {
         hasChecked = true;
       }
     });
-    reactiveSchema.rowActions.set(TABLE_ROW_ATTRIBUTE.ROW_SELECTION_ALL, hasChecked && !hasUnchecked);
     reactiveSchema.rowActions.set(TABLE_ROW_ATTRIBUTE.ROW_SELECTION_INDETERMINATE, hasChecked && hasUnchecked);
   };
   const isSelectionEnable = () => props2.columns.some((col) => col.type === "selection");
@@ -18893,12 +18950,15 @@ const useInit = (props2, targetColumns) => {
     const isChecked = typeof checked === "boolean" ? checked : !isSelectionAll();
     reactiveSchema.rowActions.set(TABLE_ROW_ATTRIBUTE.ROW_SELECTION_ALL, isChecked);
     reactiveSchema.rowActions.set(TABLE_ROW_ATTRIBUTE.ROW_SELECTION_INDETERMINATE, false);
-    indexData.forEach((row) => {
+    indexData.forEach((row, index) => {
       var _a2;
-      const rowId = row[TABLE_ROW_ATTRIBUTE.ROW_UID];
-      const target = Object.assign({}, (_a2 = reactiveSchema.rowActions.get(rowId)) != null ? _a2 : {}, { isSelected: isChecked });
-      reactiveSchema.rowActions.set(rowId, target);
+      if (isRowSelectEnable(props2, { row, index, isCheckAll: false })) {
+        const rowId = row[TABLE_ROW_ATTRIBUTE.ROW_UID];
+        const target = Object.assign({}, (_a2 = reactiveSchema.rowActions.get(rowId)) != null ? _a2 : {}, { isSelected: isChecked });
+        reactiveSchema.rowActions.set(rowId, target);
+      }
     });
+    updateSelectionAll();
     updateIndexData(isChecked);
     asyncSelection(null, checked, true);
   };
@@ -18929,10 +18989,10 @@ const useInit = (props2, targetColumns) => {
     }
     return thenFn(row);
   };
-  const resolveSelection = (row, _rowId) => resolveSelectionRow(row, () => {
+  const resolveSelection = (row, _rowId, index) => resolveSelectionRow(row, () => {
     var _a2;
     const rowId = _rowId === void 0 ? row[TABLE_ROW_ATTRIBUTE.ROW_UID] : _rowId;
-    if (isSelectionAll()) {
+    if (isRowSelectEnable(props2, { row, index, isCheckAll: false }) && isSelectionAll()) {
       return true;
     }
     if (reactiveSchema.rowActions.has(rowId)) {
@@ -18953,22 +19013,30 @@ const useInit = (props2, targetColumns) => {
         [TABLE_ROW_ATTRIBUTE.ROW_INDEX]: index,
         [TABLE_ROW_ATTRIBUTE.ROW_UID]: rowId,
         [TABLE_ROW_ATTRIBUTE.ROW_EXPAND]: keepLocalAction ? isRowExpand(rowId) : false,
-        [TABLE_ROW_ATTRIBUTE.ROW_SELECTION]: resolveSelection(item, rowId),
+        [TABLE_ROW_ATTRIBUTE.ROW_SELECTION]: resolveSelection(item, rowId, index),
         [TABLE_ROW_ATTRIBUTE.ROW_SOURCE_DATA]: __spreadValues({}, item),
         [TABLE_ROW_ATTRIBUTE.ROW_SKIP_CFG]: cfg
       });
     }));
     initSelectionAllByData();
   };
+  const isRowChecked = (isRowCheckEnable, selectedAll, item, index) => {
+    const isChecked = resolveSelection(item, item[TABLE_ROW_ATTRIBUTE.ROW_UID], index);
+    if (isRowCheckEnable) {
+      return typeof selectedAll === "boolean" ? selectedAll : isChecked;
+    }
+    return isChecked;
+  };
   const updateIndexData = (selectedAll) => {
     let preRowId = null;
     const skipConfig = {};
     indexData.forEach((item, index) => {
       const rowId = item[TABLE_ROW_ATTRIBUTE.ROW_UID];
       const cfg = neepColspanOrRowspan.value ? getSkipConfig(item, rowId, index, skipConfig, preRowId) : {};
+      const isRowCheckEnable = isRowSelectEnable(props2, { row: item, index, isCheckAll: false });
       Object.assign(item, {
         [TABLE_ROW_ATTRIBUTE.ROW_EXPAND]: isRowExpand(item[TABLE_ROW_ATTRIBUTE.ROW_UID]),
-        [TABLE_ROW_ATTRIBUTE.ROW_SELECTION]: typeof selectedAll === "boolean" ? selectedAll : resolveSelection(item, item[TABLE_ROW_ATTRIBUTE.ROW_UID]),
+        [TABLE_ROW_ATTRIBUTE.ROW_SELECTION]: isRowChecked(isRowCheckEnable, selectedAll, item, index),
         [TABLE_ROW_ATTRIBUTE.ROW_SKIP_CFG]: cfg
       });
       preRowId = item[TABLE_ROW_ATTRIBUTE.ROW_UID];
@@ -19558,26 +19626,60 @@ const tagProps = () => ({
   collapseTags: {
     type: Boolean,
     default: false
+  },
+  tagOverflowTips: {
+    type: Object,
+    default: () => ({})
   }
 });
 var TagRender = defineComponent({
   name: "TagRender",
+  directives: {
+    bkTooltips: tooltips
+  },
   props: {
     node: PropTypes.object,
     displayKey: PropTypes.string,
     tpl: {
       type: Function
+    },
+    hasTips: {
+      type: Boolean,
+      default: false
+    },
+    tagOverflowTips: {
+      type: Object,
+      default: () => ({})
     }
   },
+  setup(props2) {
+    const tagRef = ref();
+    const isOverflow = ref(false);
+    const overflowTips = computed(() => __spreadValues({
+      boundary: "window",
+      theme: "light",
+      distance: 12,
+      content: props2.node[props2.displayKey],
+      disabled: props2.hasTips || !isOverflow.value
+    }, props2.tagOverflowTips));
+    onMounted(() => {
+      isOverflow.value = checkOverflow(tagRef.value);
+    });
+    return {
+      overflowTips,
+      tagRef
+    };
+  },
   render() {
     if (this.tpl) {
       return this.tpl(this.node, h$1, this);
     }
-    return createVNode("div", {
-      "class": "tag"
+    return withDirectives(createVNode("div", {
+      "class": "tag",
+      "ref": "tagRef"
     }, [createVNode("span", {
       "class": "text"
-    }, [this.node[this.displayKey]])]);
+    }, [this.node[this.displayKey]])]), [[resolveDirective("bk-tooltips"), this.overflowTips]]);
   }
 });
 var Component$d = defineComponent({
@@ -20049,7 +20151,7 @@ var Component$d = defineComponent({
         case "NumpadEnter":
           if (!props2.allowCreate && popoverProps.isShow || props2.allowCreate && state.focusItemIndex >= 0 && popoverProps.isShow) {
             handleTagSelected(pageState.curPageList[state.focusItemIndex], "select", e);
-          } else if (props2.allowCreate) {
+          } else if (props2.allowCreate && curInputValue.value.trim()) {
             handleTagSelected(curInputValue.value, "custom", e);
           }
           e.preventDefault();
@@ -20289,7 +20391,9 @@ var Component$d = defineComponent({
           }, [createVNode(TagRender, {
             "node": item,
             "tpl": this.tagTpl,
-            "displayKey": this.displayKey
+            "displayKey": this.displayKey,
+            "hasTips": !!this.tooltipKey,
+            "tagOverflowTips": this.tagOverflowTips
           }, null), this.showTagClose ? createVNode(error, {
             "class": "remove-tag",
             "onClick": this.handleTagRemove.bind(this, item, index)
@@ -20466,7 +20570,7 @@ const tabPanelProps = {
   visible: PropTypes.bool.def(true),
   disabled: PropTypes.bool,
   sortable: PropTypes.bool,
-  renderDirective: renderDirectiveType,
+  renderDirective: renderDirectiveType(),
   panel: PropTypes.string || PropTypes.func
 };
 var TabNav = defineComponent({
@@ -20597,12 +20701,12 @@ var TabNav = defineComponent({
         tabLabel
       } = item;
       const getNavItemClass = () => {
-        const classNames = ["bk-tab-header-item"];
+        const classNames = [resolveClassName("tab-header-item")];
         if (disabled) {
-          classNames.push("bk-tab-header--disabled");
+          classNames.push(resolveClassName("tab-header--disabled"));
         }
         if (active === name) {
-          classNames.push("bk-tab-header--active");
+          classNames.push(resolveClassName("tab-header--active"));
         }
         return classNames.join(" ");
       };
@@ -20632,7 +20736,7 @@ var TabNav = defineComponent({
         },
         "class": getNavItemClass()
       }, [createVNode("div", null, [tabLabel]), getValue(item.closable, closable) && createVNode(close$1, {
-        "class": "bk-tab-header-item-close",
+        "class": resolveClassName("tab-header-item-close"),
         "onClick": () => this.handleTabRemove(index, item)
       }, null)]);
     });
@@ -20651,9 +20755,9 @@ var TabNav = defineComponent({
       }
       if (list.length) {
         return createVNode("div", {
-          "class": "bk-tab-header-operation"
+          "class": resolveClassName("tab-header-operation")
         }, [list.map((item, index) => createVNode("div", {
-          "class": "bk-tab-header-item",
+          "class": resolveClassName("tab-header-item"),
           "key": index
         }, [item]))]);
       }
@@ -20663,11 +20767,11 @@ var TabNav = defineComponent({
       "style": {
         lineHeight: `${labelHeight}px`
       },
-      "class": "bk-tab-header"
+      "class": resolveClassName("tab-header")
     }, [createVNode("div", {
-      "class": "bk-tab-header-nav"
+      "class": resolveClassName("tab-header-nav")
     }, [renderNavs()]), renderSlot2(), typeof this.$slots.setting === "function" && createVNode("div", {
-      "class": "bk-tab-header-setting"
+      "class": resolveClassName("tab-header-setting")
     }, [this.$slots.setting()])]);
   }
 });
@@ -20842,7 +20946,7 @@ var Tab = defineComponent({
     return createVNode("div", {
       "class": getTabBoxClass()
     }, [getTabHeader(), createVNode("div", {
-      "class": "bk-tab-content"
+      "class": resolveClassName("tab-content")
     }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]);
   }
 });
@@ -20868,7 +20972,7 @@ var TabPanel = defineComponent({
     };
     return withDirectives(createVNode("div", {
       "ref": "content",
-      "class": "bk-tab-panel"
+      "class": resolveClassName("tab-panel")
     }, [getContent()]), [[vShow, active]]);
   }
 });