bkui-vue 2.0.2-beta.81 → 2.0.2-beta.82

package/lib/cascader/cascader.css

@@ -195,6 +195,8 @@
 }
 .bk-cascader .bk-cascader-name .bk-cascader-search-input {
   width: 100%;
+  min-width: 24px;
+  flex: 1;
   font-size: 12px;
   cursor: text;
   border: none;
@@ -213,11 +215,16 @@
 .bk-cascader .bk-cascader-name .cascader-tag-list {
   box-sizing: border-box;
   display: flex;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+  align-items: center;
   height: 32px;
   min-height: 30px;
   padding-top: 5px;
-  overflow: hidden;
+}
+.bk-cascader .bk-cascader-name .cascader-tag-list .bk-cascader-search-input {
+  height: 22px;
+  margin-bottom: 5px;
+  line-height: 22px;
 }
 .bk-cascader .bk-cascader-name .cascader-tag-list .tag-item {
   position: relative;
@@ -242,6 +249,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-cascader .bk-cascader-name .cascader-tag-list .bk-tag {
+  margin-bottom: 5px;
+}
 .bk-cascader-popover {
   border: 1px solid #dcdee5;
   border-radius: 2px;
@@ -302,6 +312,21 @@
   color: #979ba5;
   transform: translateY(-50%);
 }
+.bk-cascader-popover .bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .position-relative {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.bk-cascader-popover .bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .position-relative .text-ov {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-cascader-popover .bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .bk-cascader-node-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .bk-cascader-popover .bk-cascader-panel-wrapper .bk-cascader-panel-empty-wrapper {
   display: flex;
   align-items: center;

package/lib/cascader/cascader.d.ts

@@ -112,10 +112,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         width: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
-        }; /**
-         * Cascader 组件
-         * 用于展示级联选择器，支持多选、单选、搜索、远程加载等功能。
-         */
+        };
         height: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };
@@ -489,10 +486,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         width: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
-        }; /**
-         * Cascader 组件
-         * 用于展示级联选择器，支持多选、单选、搜索、远程加载等功能。
-         */
+        };
         height: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
         };

package/lib/cascader/cascader.less

@@ -144,6 +144,8 @@
 
     .@{bk-prefix}-cascader-search-input {
       width: 100%;
+      min-width: 24px;
+      flex: 1;
       font-size: 12px;
       cursor: text;
       border: none;
@@ -165,11 +167,18 @@
     .cascader-tag-list {
       box-sizing: border-box;
       display: flex;
-      flex-wrap: wrap;
+      flex-flow: row wrap;
+      align-items: center;
       height: @component-size-base;
       min-height: 30px;
       padding-top: 5px;
-      overflow: hidden;
+      // overflow: hidden; // remove this to allow wrap
+
+      .@{bk-prefix}-cascader-search-input {
+        height: 22px;
+        margin-bottom: 5px;
+        line-height: 22px;
+      }
 
       .tag-item {
         position: relative;
@@ -196,6 +205,10 @@
           white-space: nowrap;
         }
       }
+
+      .@{bk-prefix}-tag {
+        margin-bottom: 5px;
+      }
     }
   }
 }
@@ -263,6 +276,25 @@
           color: @gray-color;
           transform: translateY(-50%);
         }
+
+        // OverflowTitle wrapper constraint
+        .position-relative {
+          flex: 1;
+          min-width: 0; // Allow flex item to shrink below content size
+          overflow: hidden;
+
+          .text-ov {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .@{bk-prefix}-cascader-node-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
     }
     .@{bk-prefix}-cascader-panel-empty-wrapper {

package/lib/cascader/cascader.variable.css

@@ -326,6 +326,8 @@
 }
 .bk-cascader .bk-cascader-name .bk-cascader-search-input {
   width: 100%;
+  min-width: 24px;
+  flex: 1;
   font-size: 12px;
   cursor: text;
   border: none;
@@ -344,11 +346,16 @@
 .bk-cascader .bk-cascader-name .cascader-tag-list {
   box-sizing: border-box;
   display: flex;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+  align-items: center;
   height: 32px;
   min-height: 30px;
   padding-top: 5px;
-  overflow: hidden;
+}
+.bk-cascader .bk-cascader-name .cascader-tag-list .bk-cascader-search-input {
+  height: 22px;
+  margin-bottom: 5px;
+  line-height: 22px;
 }
 .bk-cascader .bk-cascader-name .cascader-tag-list .tag-item {
   position: relative;
@@ -373,6 +380,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-cascader .bk-cascader-name .cascader-tag-list .bk-tag {
+  margin-bottom: 5px;
+}
 .bk-cascader-popover {
   border: 1px solid #dcdee5;
   border-radius: 2px;
@@ -433,6 +443,21 @@
   color: #979ba5;
   transform: translateY(-50%);
 }
+.bk-cascader-popover .bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .position-relative {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.bk-cascader-popover .bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .position-relative .text-ov {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-cascader-popover .bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .bk-cascader-node-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .bk-cascader-popover .bk-cascader-panel-wrapper .bk-cascader-panel-empty-wrapper {
   display: flex;
   align-items: center;

package/lib/cascader/index.js

@@ -9,6 +9,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_overflow_title_051a85a5__ from "../overflow-title";
+import "../overflow-title/overflow-title.less";
 import "../popover/popover.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_select_1a0d1ad7__ from "../select";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_tag_d74826be__ from "../tag";
@@ -1552,6 +1554,14 @@ var src = __webpack_require__(668);
 var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var icon_y = x => () => x
 const icon_namespaceObject = icon_x({ ["AngleRight"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.AngleRight, ["AngleUp"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.AngleUp, ["Close"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Close, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Error, ["Spinner"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Spinner });
+;// CONCATENATED MODULE: external "../overflow-title"
+var overflow_title_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var overflow_title_y = x => () => x
+const overflow_title_namespaceObject = overflow_title_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_overflow_title_051a85a5__["default"] });
+;// CONCATENATED MODULE: external "../overflow-title/overflow-title.less"
+var overflow_title_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var overflow_title_less_y = x => () => x
+const overflow_title_less_namespaceObject = overflow_title_less_x({  });
 // EXTERNAL MODULE: external "../popover"
 var popover_ = __webpack_require__(563);
 ;// CONCATENATED MODULE: external "../popover/popover.less"
@@ -2422,6 +2432,8 @@ var Store = /*#__PURE__*/function () {
 
 
 
+
+
 /**
  * Cascader 组件
  * 用于展示级联选择器，支持多选、单选、搜索、远程加载等功能。
@@ -2785,6 +2797,21 @@ var Store = /*#__PURE__*/function () {
       }
       return acc;
     }, []);
+    // 定义renderInput函数
+    var renderInput = function renderInput() {
+      return (0,external_vue_.createVNode)("input", {
+        "ref": "inputRef",
+        "class": [_this.resolveClassName('cascader-search-input'), {
+          'is-disabled': _this.disabled
+        }],
+        "disabled": _this.disabled,
+        "placeholder": _this.calcuPlaceholder,
+        "type": "text",
+        "value": _this.searchKey,
+        "onBlur": _this.searchBlueHandler,
+        "onInput": _this.searchInputHandler
+      }, null);
+    };
     // 定义renderTags函数，用于渲染选中的tag
     var renderTags = function renderTags() {
       if (_this.limitOneLine) {
@@ -2819,7 +2846,7 @@ var Store = /*#__PURE__*/function () {
         "default": function _default() {
           return [(0,external_vue_.createTextVNode)("+"), _this.selectedTags.length - _this.overflowTagIndex];
         }
-      }), [[(0,external_vue_.resolveDirective)("bk-tooltips"), collapseTooltip.join(', ')]])]);
+      }), [[(0,external_vue_.resolveDirective)("bk-tooltips"), collapseTooltip.join(', ')]]), _this.filterable && renderInput()]);
     };
     var textRender = function textRender() {
       return (
@@ -2854,18 +2881,7 @@ var Store = /*#__PURE__*/function () {
             isShow: _this.isShowPanel
           }) : (0,external_vue_.createVNode)("div", {
             "class": [_this.resolveClassName('cascader-name'), _this.resolveClassName('scroll-y')]
-          }, [_this.multiple && _this.selectedTags.length > 0 && renderTags(), _this.filterable ? (_this.isCollapse || _this.selectedTags.length === 0) && (0,external_vue_.createVNode)("input", {
-            "ref": "inputRef",
-            "class": [_this.resolveClassName('cascader-search-input'), {
-              'is-disabled': _this.disabled
-            }],
-            "disabled": _this.disabled,
-            "placeholder": _this.calcuPlaceholder,
-            "type": "text",
-            "value": _this.searchKey,
-            "onBlur": _this.searchBlueHandler,
-            "onInput": _this.searchInputHandler
-          }, null) : textRender()]);
+          }, [_this.multiple && _this.selectedTags.length > 0 && renderTags(), _this.filterable ? _this.selectedTags.length === 0 && renderInput() : textRender()]);
         },
         content: function content() {
           var _this$$slots$extensio, _this$$slots;
@@ -2886,9 +2902,15 @@ var Store = /*#__PURE__*/function () {
             "suggestions": _this.suggestions
           }, {
             "default": function _default(scope) {
-              return _this.$slots["default"] ? _this.$slots["default"](scope) : (0,external_vue_.createVNode)("span", {
-                "class": _this.resolveClassName('cascader-node-name')
-              }, [scope.node.name]);
+              return _this.$slots["default"] ? _this.$slots["default"](scope) : (0,external_vue_.createVNode)(overflow_title_namespaceObject["default"], {
+                "type": "tips"
+              }, {
+                "default": function _default() {
+                  return [(0,external_vue_.createVNode)("span", {
+                    "class": _this.resolveClassName('cascader-node-name')
+                  }, [scope.node.name])];
+                }
+              });
             },
             panel: function panel(scope) {
               return _this.$slots.panel ? _this.$slots.panel(scope) : null;

package/lib/form/form.css

@@ -48,6 +48,7 @@
 .bk-form-item.is-error .bk-textarea,
 .bk-form-item.is-error .bk-cascader,
 .bk-form-item.is-error .bk-date-picker-editor,
+.bk-form-item.is-error .bk-select-tag,
 .bk-form-item.is-error .bk-tag-input {
   border-color: #ea3636;
   transition: all 0.15s;

package/lib/form/form.less

@@ -72,6 +72,7 @@
     .@{bk-prefix}-textarea,
     .@{bk-prefix}-cascader,
     .@{bk-prefix}-date-picker-editor,
+    .@{bk-prefix}-select-tag,
     .@{bk-prefix}-tag-input {
       border-color: #ea3636;
       transition: all .15s;

package/lib/form/form.variable.css

@@ -179,6 +179,7 @@
 .bk-form-item.is-error .bk-textarea,
 .bk-form-item.is-error .bk-cascader,
 .bk-form-item.is-error .bk-date-picker-editor,
+.bk-form-item.is-error .bk-select-tag,
 .bk-form-item.is-error .bk-tag-input {
   border-color: #ea3636;
   transition: all 0.15s;

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.81";
+export const version = "2.0.2-beta.82";
 window.__bkui_vue_version__ = version;

package/lib/popover/index.js

@@ -4852,7 +4852,6 @@ var popContainerId = "id_".concat(esm_browser_v4());
    * @returns
    */
   var handleClickOutside = function handleClickOutside(e) {
-    var hideIgnoreReference = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var target = e.target;
     if (isClickInside(target)) {
       e.preventDefault();
@@ -4878,7 +4877,7 @@ var popContainerId = "id_".concat(esm_browser_v4());
      * @param hideIgnoreReference - 是否忽略隐藏参考元素
      * @returns
      */
-    if (hideIgnoreReference) {
+    if (props.hideIgnoreReference) {
       setTimeout(function () {
         if (ReferenceClickSharedState[uniqKey]) {
           ReferenceClickSharedState[uniqKey] = false;

package/lib/popover/use-popover-init.d.ts

@@ -6,7 +6,7 @@ declare const _default: (props: any, ctx: any, { refReference, refContent, refAr
 }) => {
     onMountedFn: () => void;
     onUnmountedFn: () => void;
-    handleClickOutside: (e: MouseEvent, hideIgnoreReference?: boolean) => void;
+    handleClickOutside: (e: MouseEvent) => void;
     beforeInstanceUnmount: () => void;
     updateBoundary: () => void;
     initPopInstance: () => void;

package/lib/select/index.d.ts

@@ -774,6 +774,7 @@ declare const BkSelect: {
         preloadItemCount: import("vue").ComputedRef<number>;
         virtualRenderRef: import("vue").Ref<any>;
         setSelected: (data: object[]) => void;
+        handleExtensionClick: (e: MouseEvent) => void;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         modelValue: import("vue-types").VueTypeValidableDef<any>;
         multiple: import("vue-types").VueTypeValidableDef<boolean> & {
@@ -1964,6 +1965,7 @@ declare const BkSelect: {
         preloadItemCount: import("vue").ComputedRef<number>;
         virtualRenderRef: import("vue").Ref<any>;
         setSelected: (data: object[]) => void;
+        handleExtensionClick: (e: MouseEvent) => void;
     }, {}, {}, {}, {
         prefix: string;
         size: "default" | "small" | "large" | "huge";
@@ -2787,6 +2789,7 @@ declare const BkSelect: {
     preloadItemCount: import("vue").ComputedRef<number>;
     virtualRenderRef: import("vue").Ref<any>;
     setSelected: (data: object[]) => void;
+    handleExtensionClick: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change")[], "blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change", {
     prefix: string;
     size: "default" | "small" | "large" | "huge";

package/lib/select/index.js

@@ -4637,6 +4637,10 @@ function select_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { v
       var _virtualRenderRef$val;
       (_virtualRenderRef$val = virtualRenderRef.value) === null || _virtualRenderRef$val === void 0 || _virtualRenderRef$val.scrollTo(0, 1);
     };
+    // 处理扩展区域点击事件
+    var handleExtensionClick = function handleExtensionClick(e) {
+      e.stopPropagation();
+    };
     return {
       t: t,
       selected: selected,
@@ -4701,7 +4705,8 @@ function select_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { v
       isEnableVirtualRender: isEnableVirtualRender,
       preloadItemCount: preloadItemCount,
       virtualRenderRef: virtualRenderRef,
-      setSelected: setSelected
+      setSelected: setSelected,
+      handleExtensionClick: handleExtensionClick
     };
   },
   render: function render() {
@@ -4939,9 +4944,9 @@ function select_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { v
         "mode": "spin",
         "size": "mini",
         "theme": "primary"
-      }, null), (0,external_vue_namespaceObject.createVNode)("span", null, [_this.curContentText])]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
+      }, null), (0,external_vue_namespaceObject.createVNode)("span", null, [_this.curContentText])]), (0,external_vue_namespaceObject.createVNode)("div", {
         "class": _this.resolveClassName('select-content')
-      }, [(0,external_vue_namespaceObject.createVNode)("div", {
+      }, [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
         "ref": "scrollContainerRef",
         "style": {
           maxHeight: "".concat(_this.scrollHeight, "px"),
@@ -4959,9 +4964,10 @@ function select_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { v
         "mode": "spin",
         "size": "mini",
         "theme": "primary"
-      }, null), (0,external_vue_namespaceObject.createVNode)("span", null, [_this.localLoadingText])])])]), ((_this$$slots18 = _this.$slots) === null || _this$$slots18 === void 0 ? void 0 : _this$$slots18.extension) && (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _this.resolveClassName('select-extension')
-      }, [(_this$$slots19 = _this.$slots) === null || _this$$slots19 === void 0 ? void 0 : _this$$slots19.extension()])]), [[external_vue_namespaceObject.vShow, _this.isShowSelectContent]])]);
+      }, null), (0,external_vue_namespaceObject.createVNode)("span", null, [_this.localLoadingText])])])]), [[external_vue_namespaceObject.vShow, _this.isShowSelectContent]]), ((_this$$slots18 = _this.$slots) === null || _this$$slots18 === void 0 ? void 0 : _this$$slots18.extension) && (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": _this.resolveClassName('select-extension'),
+        "onClick": _this.handleExtensionClick
+      }, [(_this$$slots19 = _this.$slots) === null || _this$$slots19 === void 0 ? void 0 : _this$$slots19.extension()])])]);
     };
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "class": selectClass

package/lib/select/select.d.ts

@@ -761,6 +761,7 @@ declare const _default: import("vue").DefineComponent<{
     preloadItemCount: import("vue").ComputedRef<number>;
     virtualRenderRef: import("vue").Ref<any>;
     setSelected: (data: Array<object>) => void;
+    handleExtensionClick: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change")[], "blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: import("vue-types").VueTypeValidableDef<any>;
     multiple: import("vue-types").VueTypeValidableDef<boolean> & {

package/package.json

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