bkui-vue 0.0.2-beta.118 → 0.0.2-beta.119

package/lib/date-picker/date-picker.css

@@ -198,9 +198,6 @@
 .bk-date-picker-rel .clear-action:hover {
   color: var(--gray-color);
 }
-.bk-date-picker-rel .clear-action.hidden {
-  visibility: hidden;
-}
 .bk-date-picker-rel .icon-wrapper {
   position: absolute;
   top: 0;

package/lib/date-picker/date-picker.less

@@ -91,9 +91,6 @@
     &:hover {
       color: @gray-color;
     }
-    &.hidden {
-      visibility: hidden;
-    }
   }
 
   .icon-wrapper {

package/lib/date-picker/date-picker.variable.css

@@ -444,9 +444,6 @@
 .bk-date-picker-rel .clear-action:hover {
   color: var(--gray-color);
 }
-.bk-date-picker-rel .clear-action.hidden {
-  visibility: hidden;
-}
 .bk-date-picker-rel .icon-wrapper {
   position: absolute;
   top: 0;

package/lib/date-picker/index.js

@@ -2303,20 +2303,22 @@ var timeParts = ['hours', 'minutes', 'seconds'];
       var bindFunction = function bindFunction(type) {
         var domRef = getDomRef(type);
         domRef.addEventListener('wheel', (0,debounce_namespaceObject["default"])(function () {
+          // handleWheel(type);
           if (wheelStart.value === true) {
             // console.log('滚动了');
             wheelStart.value = false;
             wheelEnd.value = true;
             // 这里写开始滚动时调用的方法
-            handleWheel(type);
             wheelTimer.value = setTimeout(function () {
+              handleWheel(type);
               stopWheel(domRef);
-            }, 0);
+            }, 200);
           } else {
-            clearTimeout(wheelTimer);
+            clearTimeout(wheelTimer.value);
             wheelTimer.value = setTimeout(function () {
+              handleWheel(type);
               stopWheel(domRef);
-            }, 100);
+            }, 300);
           }
         }, 32), {
           passive: true
@@ -4341,6 +4343,11 @@ function date_picker_objectSpread(target) { for (var i = 1; i < arguments.length
         emit('input', now);
       }
     });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return state.internalValue;
+    }, function (v) {
+      state.tmpValue = v;
+    });
     (0,external_vue_namespaceObject.onMounted)(function () {
       // 如果是 date-picker 那么 time-picker 就是回车模式
       if (props.type.indexOf('date') > -1) {
@@ -4409,7 +4416,6 @@ function date_picker_objectSpread(target) { for (var i = 1; i < arguments.length
       //   return;
       // }
       state.showClose = false;
-      emitChange(props.type);
       state.internalValue = state.tmpValue;
     };
     var emitChange = function emitChange(type) {
@@ -4922,7 +4928,9 @@ function time_picker_objectSpread(target) { for (var i = 1; i < arguments.length
       internalFocus: false,
       timeEnterMode: true,
       shortcut: shortcut,
-      onSelectionModeChange: onSelectionModeChange
+      onSelectionModeChange: onSelectionModeChange,
+      // for 编辑时，mouseleave 事件中缓存的 value
+      tmpValue: initialValue
     });
     function onSelectionModeChange(_type) {
       var type = _type;
@@ -5076,6 +5084,11 @@ function time_picker_objectSpread(target) { for (var i = 1; i < arguments.length
         emit('input', now);
       }
     });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return state.internalValue;
+    }, function (v) {
+      state.tmpValue = v;
+    });
     (0,external_vue_namespaceObject.onMounted)(function () {
       // 如果是 date-picker 那么 time-picker 就是回车模式
       if (props.type.indexOf('date') > -1) {
@@ -5144,6 +5157,7 @@ function time_picker_objectSpread(target) { for (var i = 1; i < arguments.length
       //   return;
       // }
       state.showClose = false;
+      state.internalValue = state.tmpValue;
     };
     var emitChange = function emitChange(type) {
       (0,external_vue_namespaceObject.nextTick)(function () {
@@ -5176,6 +5190,21 @@ function time_picker_objectSpread(target) { for (var i = 1; i < arguments.length
         state.forceInputRerender = state.forceInputRerender + 1;
       }
     };
+    var handleInputInput = function handleInputInput(e) {
+      var _props$disabledDate2;
+      var isArrayValue = props.type.includes('range') || props.multiple;
+      var oldValue = visualValue.value;
+      var newValue = e.target.value;
+      var newDate = parseDate(newValue, props.type, props.multiple, props.format);
+      var valueToTest = isArrayValue ? newDate : newDate[0];
+      var isDisabled = (_props$disabledDate2 = props.disabledDate) === null || _props$disabledDate2 === void 0 ? void 0 : _props$disabledDate2.call(props, valueToTest);
+      var isValidDate = newDate.reduce(function (valid, date) {
+        return valid && date instanceof Date;
+      }, true);
+      if (newValue !== oldValue && !isDisabled && isValidDate) {
+        state.tmpValue = newDate;
+      }
+    };
     var handleFocus = function handleFocus(e) {
       if (props.readonly) {
         return;
@@ -5377,6 +5406,7 @@ function time_picker_objectSpread(target) { for (var i = 1; i < arguments.length
       handleBlur: handleBlur,
       handleKeydown: handleKeydown,
       handleInputChange: handleInputChange,
+      handleInputInput: handleInputInput,
       handleClear: handleClear,
       handleTransferClick: handleTransferClick,
       onPick: onPick,
@@ -5455,7 +5485,8 @@ function time_picker_objectSpread(target) { for (var i = 1; i < arguments.length
       "onClick": this.handleFocus,
       "onBlur": this.handleBlur,
       "onKeydown": this.handleKeydown,
-      "onChange": this.handleInputChange
+      "onChange": this.handleInputChange,
+      "onInput": this.handleInputInput
     }, null), this.clearable && this.showClose ? (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Close, {
       "onClick": this.handleClear,
       "class": "clear-action"

package/lib/date-picker/time-picker.d.ts

@@ -173,6 +173,7 @@ declare const _default: import("vue").DefineComponent<{
     handleBlur: (e: any) => void;
     handleKeydown: (e: KeyboardEvent) => void;
     handleInputChange: (e: any) => void;
+    handleInputInput: (e: any) => void;
     handleClear: () => void;
     handleTransferClick: () => void;
     onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
@@ -197,6 +198,7 @@ declare const _default: import("vue").DefineComponent<{
     timeEnterMode: import("vue").Ref<boolean>;
     shortcut: import("vue").Ref<any>;
     onSelectionModeChange: import("vue").Ref<(_type: any) => SelectionModeType>;
+    tmpValue: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change")[], "change" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabledHours: {
         readonly type: ArrayConstructor;

package/lib/input/index.js

@@ -960,6 +960,7 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_inputEmit
     });
     var resizeObserver = new ResizeObserver(function () {
       onceInitSizeTextarea();
+      setOverflow();
     });
     (0,external_vue_namespaceObject.watch)(function () {
       return props.type;
@@ -990,12 +991,10 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_inputEmit
       (0,external_vue_namespaceObject.nextTick)(function () {
         return resizeTextarea();
       });
-      // TODO: 值变化时实时检测是否溢出
-      // isOverflow.value = detectOverflow();
+      setOverflow();
     });
-
     (0,external_vue_namespaceObject.onMounted)(function () {
-      isOverflow.value = detectOverflow();
+      setOverflow();
       resizeObserver.observe(inputRef.value);
       (0,external_vue_namespaceObject.nextTick)(function () {
         return resizeTextarea();
@@ -1023,6 +1022,9 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_inputEmit
       var _inputRef$value3, _inputRef$value4;
       return ((_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 ? void 0 : _inputRef$value3.scrollWidth) > ((_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 ? void 0 : _inputRef$value4.clientWidth) + 2;
     }
+    function setOverflow() {
+      isOverflow.value = detectOverflow();
+    }
     function clear() {
       if (props.disabled) return;
       var resetVal = isNumberInput.value ? props.min : '';
@@ -1036,7 +1038,6 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_inputEmit
     }
     function handleBlur(e) {
       isFocused.value = false;
-      isOverflow.value = detectOverflow();
       ctx.emit(EVENTS.BLUR, e);
       if (props.withValidate) {
         var _formItem$validate2;

package/lib/select/index.d.ts

@@ -568,6 +568,7 @@ declare const BkSelect: {
                     overflowTagIndex: import("vue").Ref<number>;
                     value: any;
                     inputRef: import("vue").Ref<HTMLElement>;
+                    overflowContent: import("vue").ComputedRef<string>;
                     handleRemoveTag: (val: string) => void;
                     focus: () => void;
                     blur: () => void;
@@ -649,6 +650,7 @@ declare const BkSelect: {
                 overflowTagIndex: import("vue").Ref<number>;
                 value: any;
                 inputRef: import("vue").Ref<HTMLElement>;
+                overflowContent: import("vue").ComputedRef<string>;
                 handleRemoveTag: (val: string) => void;
                 focus: () => void;
                 blur: () => void;
@@ -1337,6 +1339,7 @@ declare const BkSelect: {
                 overflowTagIndex: import("vue").Ref<number>;
                 value: any;
                 inputRef: import("vue").Ref<HTMLElement>;
+                overflowContent: import("vue").ComputedRef<string>;
                 handleRemoveTag: (val: string) => void;
                 focus: () => void;
                 blur: () => void;
@@ -1418,6 +1421,7 @@ declare const BkSelect: {
             overflowTagIndex: import("vue").Ref<number>;
             value: any;
             inputRef: import("vue").Ref<HTMLElement>;
+            overflowContent: import("vue").ComputedRef<string>;
             handleRemoveTag: (val: string) => void;
             focus: () => void;
             blur: () => void;
@@ -2051,6 +2055,7 @@ declare const BkSelect: {
             overflowTagIndex: import("vue").Ref<number>;
             value: any;
             inputRef: import("vue").Ref<HTMLElement>;
+            overflowContent: import("vue").ComputedRef<string>;
             handleRemoveTag: (val: string) => void;
             focus: () => void;
             blur: () => void;
@@ -2132,6 +2137,7 @@ declare const BkSelect: {
         overflowTagIndex: import("vue").Ref<number>;
         value: any;
         inputRef: import("vue").Ref<HTMLElement>;
+        overflowContent: import("vue").ComputedRef<string>;
         handleRemoveTag: (val: string) => void;
         focus: () => void;
         blur: () => void;

package/lib/select/index.js

@@ -483,7 +483,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["customRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.customRef, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["getCurrentInstance"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.getCurrentInstance, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["onBeforeMount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeMount, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["toRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRef, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["vModelText"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vModelText, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["customRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.customRef, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["getCurrentInstance"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.getCurrentInstance, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["onBeforeMount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeMount, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["resolveDirective"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.resolveDirective, ["toRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRef, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["vModelText"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vModelText, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
 ;// CONCATENATED MODULE: external "lodash/isEqual"
 var isEqual_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var isEqual_y = x => () => x
@@ -1029,7 +1029,7 @@ const merge_namespaceObject = merge_x({ ["default"]: () => __WEBPACK_EXTERNAL_MO
 ;// CONCATENATED MODULE: external "../directives"
 var external_directives_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_directives_y = x => () => x
-const external_directives_namespaceObject = external_directives_x({ ["clickoutside"]: () => __WEBPACK_EXTERNAL_MODULE__directives_9cc9ba10__.clickoutside });
+const external_directives_namespaceObject = external_directives_x({ ["bkTooltips"]: () => __WEBPACK_EXTERNAL_MODULE__directives_9cc9ba10__.bkTooltips, ["clickoutside"]: () => __WEBPACK_EXTERNAL_MODULE__directives_9cc9ba10__.clickoutside });
 ;// CONCATENATED MODULE: external "../input"
 var external_input_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_input_y = x => () => x
@@ -1088,8 +1088,12 @@ const external_tag_namespaceObject = external_tag_x({ ["default"]: () => __WEBPA
 
 
 
+
 /* harmony default export */ const selectTagInput = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'SelectTagInput',
+  directives: {
+    bkTooltips: external_directives_namespaceObject.bkTooltips
+  },
   props: {
     selected: {
       type: Array,
@@ -1118,6 +1122,11 @@ const external_tag_namespaceObject = external_tag_x({ ["default"]: () => __WEBPA
     var value = (0,external_vue_namespaceObject.ref)(modelValue.value);
     var inputRef = (0,external_vue_namespaceObject.ref)();
     var overflowTagIndex = (0,external_vue_namespaceObject.ref)(null);
+    var overflowContent = (0,external_vue_namespaceObject.computed)(function () {
+      return selected.value.slice(overflowTagIndex.value, selected.value.length).map(function (item) {
+        return item.label;
+      }).join(', ');
+    });
     (0,external_vue_namespaceObject.watch)(modelValue, function () {
       value.value = modelValue.value;
     });
@@ -1202,6 +1211,7 @@ const external_tag_namespaceObject = external_tag_x({ ["default"]: () => __WEBPA
       overflowTagIndex: overflowTagIndex,
       value: value,
       inputRef: inputRef,
+      overflowContent: overflowContent,
       handleRemoveTag: handleRemoveTag,
       focus: focus,
       blur: blur,
@@ -1252,7 +1262,7 @@ const external_tag_namespaceObject = external_tag_x({ ["default"]: () => __WEBPA
           return [(_this$select = _this.select) === null || _this$select === void 0 ? void 0 : _this$select.handleGetLabelByValue(item.value)];
         }
       });
-    }), (0,external_vue_namespaceObject.createVNode)(external_tag_namespaceObject["default"], {
+    }), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)(external_tag_namespaceObject["default"], {
       "class": this.resolveClassName('select-overflow-tag'),
       "style": {
         display: !!this.overflowTagIndex && this.collapseTags ? '' : 'none'
@@ -1262,7 +1272,10 @@ const external_tag_namespaceObject = external_tag_x({ ["default"]: () => __WEBPA
       "default": function _default() {
         return [(0,external_vue_namespaceObject.createTextVNode)("+"), _this.selected.length - _this.overflowTagIndex];
       }
-    }), (0,external_vue_namespaceObject.createVNode)("input", {
+    }), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), {
+      content: this.overflowContent,
+      disabled: !this.overflowTagIndex || !this.collapseTags
+    }]]), (0,external_vue_namespaceObject.createVNode)("input", {
       "class": this.resolveClassName('select-tag-input'),
       "ref": "inputRef",
       "type": "text",

package/lib/select/select.d.ts

@@ -442,6 +442,7 @@ declare const _default: import("vue").DefineComponent<{
             overflowTagIndex: import("vue").Ref<number>;
             value: any;
             inputRef: import("vue").Ref<HTMLElement>;
+            overflowContent: import("vue").ComputedRef<string>;
             handleRemoveTag: (val: string) => void;
             focus: () => void;
             blur: () => void;
@@ -523,6 +524,7 @@ declare const _default: import("vue").DefineComponent<{
         overflowTagIndex: import("vue").Ref<number>;
         value: any;
         inputRef: import("vue").Ref<HTMLElement>;
+        overflowContent: import("vue").ComputedRef<string>;
         handleRemoveTag: (val: string) => void;
         focus: () => void;
         blur: () => void;

package/lib/select/selectTagInput.d.ts

@@ -42,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{
     overflowTagIndex: import("vue").Ref<number>;
     value: any;
     inputRef: import("vue").Ref<HTMLElement>;
+    overflowContent: import("vue").ComputedRef<string>;
     handleRemoveTag: (val: string) => void;
     focus: () => void;
     blur: () => void;

package/lib/time-picker/index.d.ts

@@ -292,6 +292,7 @@ declare const BkTimePicker: {
             handleBlur: (e: any) => void;
             handleKeydown: (e: KeyboardEvent) => void;
             handleInputChange: (e: any) => void;
+            handleInputInput: (e: any) => void;
             handleClear: () => void;
             handleTransferClick: () => void;
             onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
@@ -316,6 +317,7 @@ declare const BkTimePicker: {
             timeEnterMode: import("vue").Ref<boolean>;
             shortcut: import("vue").Ref<any>;
             onSelectionModeChange: import("vue").Ref<(_type: any) => import("../../date-picker/src/interface").SelectionModeType>;
+            tmpValue: import("vue").Ref<any>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change")[], string, {
             type: import("../../date-picker/src/interface").PickerTypeType;
             width: number;
@@ -558,6 +560,7 @@ declare const BkTimePicker: {
         handleBlur: (e: any) => void;
         handleKeydown: (e: KeyboardEvent) => void;
         handleInputChange: (e: any) => void;
+        handleInputInput: (e: any) => void;
         handleClear: () => void;
         handleTransferClick: () => void;
         onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
@@ -582,6 +585,7 @@ declare const BkTimePicker: {
         timeEnterMode: import("vue").Ref<boolean>;
         shortcut: import("vue").Ref<any>;
         onSelectionModeChange: import("vue").Ref<(_type: any) => import("../../date-picker/src/interface").SelectionModeType>;
+        tmpValue: import("vue").Ref<any>;
     }> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
@@ -767,6 +771,7 @@ declare const BkTimePicker: {
     handleBlur: (e: any) => void;
     handleKeydown: (e: KeyboardEvent) => void;
     handleInputChange: (e: any) => void;
+    handleInputInput: (e: any) => void;
     handleClear: () => void;
     handleTransferClick: () => void;
     onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
@@ -791,6 +796,7 @@ declare const BkTimePicker: {
     timeEnterMode: import("vue").Ref<boolean>;
     shortcut: import("vue").Ref<any>;
     onSelectionModeChange: import("vue").Ref<(_type: any) => import("../../date-picker/src/interface").SelectionModeType>;
+    tmpValue: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change")[], "change" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change", {
     type: import("../../date-picker/src/interface").PickerTypeType;
     width: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.2-beta.118",
+  "version": "0.0.2-beta.119",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",