@king-design/react 3.5.2 → 3.6.0

package/components/datepicker/useValueBase.js

@@ -0,0 +1,277 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import { useInstance } from 'intact-react';
+import { useState, watchState } from '../../hooks/useState';
+import dayjs from './dayjs';
+import { findValueIndex } from './helpers';
+import { isEqualArray, last } from '../utils';
+export function useValueBase(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInput, getEqualType, updateStateValue) {
+  var createDateByValueFormat = _ref.createDateByValueFormat,
+    createDateByShowFormat = _ref.createDateByShowFormat,
+    getShowString = _ref.getShowString,
+    getValueString = _ref.getValueString;
+  var isDisabled = _ref2.isDisabled,
+    minDate = _ref2.minDate;
+  // Normalize the value to multipe values, no matter it's multipe or not
+  var value = useState([]);
+  var instance = useInstance();
+  var dayjsValue = [];
+  instance.watch('value', function (newValue, oldValue) {
+    if (isEqualArray(newValue, oldValue)) return;
+    dayjsValue = convertToDayjs(newValue);
+    updateStateValue(dayjsValue, value);
+    // should update keywords
+    instance.resetKeywords();
+  });
+  watchState(value, function (value) {
+    // silently update the keywords to display the currently selected value 
+    instance.resetKeywords(true);
+    /**
+     * the position may changed after the input break line in multipe mode
+     * use Macro task instead of nextTick, because it has too many Micro tasks
+     */
+    setTimeout(function () {
+      instance.position();
+    });
+  });
+  instance.on('hide', function () {
+    // reset the value after hiding
+    value.set(_sliceInstanceProperty(dayjsValue).call(dayjsValue, 0));
+  });
+  watchState(instance.input.keywords, function (v) {
+    var _instance$get = instance.get(),
+      range = _instance$get.range,
+      multiple = _instance$get.multiple;
+    if (!multiple && v === '') return instance.set('value', null);
+    if (range) {
+      var _context;
+      var _v$split$map = _mapInstanceProperty(_context = v.split(/\s*~\s*/)).call(_context, function (s) {
+          return _trimInstanceProperty(s).call(s);
+        }),
+        start = _v$split$map[0],
+        end = _v$split$map[1];
+      if (start && end) {
+        var startDate = createDateByShowFormat(start);
+        if (!isValidDate(startDate)) {
+          return;
+        }
+        var endDate = createDateByShowFormat(end);
+        if (!isValidDate(endDate)) {
+          return;
+        }
+        if (endDate.isAfter(startDate)) {
+          updateValueOnInput([startDate, endDate]);
+        } else {
+          updateValueOnInput([endDate, startDate]);
+        }
+      }
+    } else {
+      var date = createDateByShowFormat(v);
+      if (isValidDate(date)) {
+        updateValueOnInput(date);
+      }
+    }
+  });
+  function convertToDayjs(v) {
+    if (!v || Array.isArray(v) && !v.length) return [];
+    var _instance$get2 = instance.get(),
+      multiple = _instance$get2.multiple;
+    if (!multiple) {
+      v = [v];
+    }
+    return _mapInstanceProperty(v).call(v, function (value) {
+      if (Array.isArray(value)) {
+        // range
+        return _mapInstanceProperty(value).call(value, createDateByValueFormat);
+      }
+      return createDateByValueFormat(value);
+    });
+  }
+  function convertToValueString(v) {
+    var results = _mapInstanceProperty(v).call(v, function (value) {
+      if (Array.isArray(value)) {
+        return _mapInstanceProperty(value).call(value, getValueString);
+      }
+      return getValueString(value);
+    });
+    if (!instance.get('multiple')) {
+      return results[0] || null;
+    }
+    return results;
+  }
+  function format() {
+    var _instance$get3 = instance.get(),
+      multiple = _instance$get3.multiple;
+    var labelValue = value.value;
+    if (multiple) {
+      labelValue = dayjsValue;
+    }
+    var results = _mapInstanceProperty(labelValue).call(labelValue, formatSingleValue);
+    if (!instance.get('multiple')) {
+      return results[0];
+    }
+    return results;
+  }
+  function formatSingleValue(value) {
+    if (Array.isArray(value)) {
+      if (value.length === 1) {
+        return getShowString(value[0]) + ' ~';
+      }
+      return _mapInstanceProperty(value).call(value, getShowString).join(' ~ ');
+    }
+    return getShowString(value);
+  }
+  function setSingleDate(v, fromInput) {
+    value.set([v]);
+    if (fromInput || shouldUpdateValue(v)) {
+      updateValue();
+    }
+  }
+  function addMultipeDate(v, fromInput) {
+    var _instance$get4 = instance.get(),
+      range = _instance$get4.range;
+    var _value = value.value;
+    _value = !_value ? [] : _sliceInstanceProperty(_value).call(_value);
+    if (range && v.length === 2) {
+      // pop the last value firstly, if it only has the start date 
+      var lastValue = last(_value);
+      if (lastValue && lastValue.length < 2) {
+        _value.pop();
+      }
+    }
+    if (_value.length > dayjsValue.length) {
+      // remove the temporary value added by selecting time directly
+      _value.pop();
+    }
+    var _shouldUpdateValue = true;
+    if (fromInput || shouldUpdateValue(v)) {
+      // if select the date/year/month, then toggle the value.
+      // if from input, treat the value as the final value
+      var index = findValueIndex(_value, v, getEqualType());
+      if (index > -1) {
+        _spliceInstanceProperty(_value).call(_value, index, 1);
+      } else {
+        _value.push(v);
+      }
+    } else {
+      // select the datetime, only push the value,
+      // and unique the array on click confirm button
+      _value.push(v);
+      _shouldUpdateValue = false;
+    }
+    value.set(_value);
+    if (_shouldUpdateValue) {
+      updateValue();
+    }
+  }
+  function setValue(v, fromInput) {
+    var multiple = instance.get('multiple');
+    if (multiple) {
+      addMultipeDate(v, fromInput);
+    } else {
+      setSingleDate(v, fromInput);
+    }
+  }
+  function updateValue() {
+    var _value = value.value;
+    var _instance$get5 = instance.get(),
+      range = _instance$get5.range;
+    if (range) {
+      // only fix the last value, since the others are already fixed 
+      var lastValue = last(_value);
+      if (lastValue) {
+        _sortInstanceProperty(lastValue).call(lastValue, function (a, b) {
+          return a.isAfter(b) ? 1 : -1;
+        });
+      }
+    }
+    var valueStr = convertToValueString(_value);
+    instance.set('value', valueStr);
+    instance.resetKeywords();
+  }
+  // TODO
+  function setMoment() {
+    var now = dayjs();
+    setValue(now, true);
+    instance.hide();
+  }
+  function unique() {
+    var _value = value.value;
+    var map = {};
+    var results = [];
+    _value.forEach(function (value) {
+      var key;
+      if (Array.isArray(value)) {
+        key = _mapInstanceProperty(value).call(value, getValueString).join(' ~ ');
+      } else {
+        key = getValueString(value);
+      }
+      if (!map[key]) {
+        map[key] = true;
+        results.push(value);
+      }
+    });
+    value.set(results);
+  }
+  function isValidDate(date) {
+    return date.isValid() && !isDisabled(date, getEqualType());
+  }
+  function onChangeTime(date, flag) {
+    var _context2;
+    var _instance$get6 = instance.get(),
+      range = _instance$get6.range,
+      multiple = _instance$get6.multiple;
+    var values = _sliceInstanceProperty(_context2 = value.value).call(_context2);
+    // maybe we select time directly
+    var lastIndex = Math.max(values.length - 1, 0);
+    if (allValuesUpdatedInMultipleMode()) {
+      // need add new value, if all value.value has updated to dayjsValue
+      lastIndex = values.length;
+    }
+    var _value = date;
+    if (range) {
+      _value = values[lastIndex];
+      if (_value) {
+        _value = _sliceInstanceProperty(_value).call(_value);
+      } else {
+        _value = [];
+      }
+      _value[flag] = date;
+      instance.trigger('selecting', _value, false);
+    }
+    values[lastIndex] = _value;
+    value.set(values);
+  }
+  function getTimeValue(flag) {
+    var _value = value.value;
+    if (!_value.length) return null;
+    var _instance$get7 = instance.get(),
+      range = _instance$get7.range,
+      min = _instance$get7.min;
+    var lastValue = last(_value);
+    return range ? lastValue[flag] : lastValue;
+  }
+  function getDayjsValue() {
+    return dayjsValue;
+  }
+  function allValuesUpdatedInMultipleMode() {
+    return instance.get('multiple') && value.value.length === dayjsValue.length;
+  }
+  return {
+    value: value,
+    format: format,
+    formatSingleValue: formatSingleValue,
+    onChangeTime: onChangeTime,
+    getTimeValue: getTimeValue,
+    setValue: setValue,
+    convertToDayjs: convertToDayjs,
+    getDayjsValue: getDayjsValue,
+    unique: unique,
+    setMoment: setMoment,
+    updateValue: updateValue,
+    allValuesUpdatedInMultipleMode: allValuesUpdatedInMultipleMode
+  };
+}

package/components/datepicker/useWeeks.d.ts

@@ -0,0 +1,19 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { State } from '../../hooks/useState';
+import type { useStatus } from './useStatus';
+export declare function useWeeks(showDate: State<Dayjs>, status: ReturnType<typeof useStatus>, focusDate: State<Dayjs | null>): {
+    getWeeks: (now: Dayjs) => {
+        week: number;
+        days: {
+            isExceed: boolean;
+            label: number;
+            value: dayjs.Dayjs;
+            isActive: boolean;
+            isToday: boolean;
+            isDisabled: boolean;
+            isHover: boolean;
+            isInRange: boolean;
+        }[];
+    }[];
+    onClick: (day: Dayjs) => void;
+};

package/components/datepicker/useWeeks.js

@@ -0,0 +1,48 @@
+import { useInstance } from 'intact-react';
+export function useWeeks(showDate, status, focusDate) {
+  var instance = useInstance();
+  function getWeeks(now) {
+    var weeks = [];
+    // 从当前显示月份的月初开始，并调整到该周的开始  
+    var startOfMonth = showDate.value.startOf('month');
+    var start = startOfMonth.startOf('week');
+    var current = start;
+    var currentMonth = showDate.value.month();
+    // 遍历6周，以覆盖整个月份  
+    for (var weekIndex = 0; weekIndex < 6; weekIndex++) {
+      var weekNumber = current.week(); // 获取当前周的周数  
+      var days = [];
+      // 遍历一周的7天  
+      for (var i = 0; i < 7; i++) {
+        var day = current.add(i, 'day');
+        var isFirstOrLastDay = i === 0 || i === 6;
+        days.push({
+          isExceed: day.month() !== currentMonth,
+          label: day.date(),
+          value: day,
+          isActive: isFirstOrLastDay && status.isActive(day, 'week'),
+          isToday: day.isSame(now, 'week'),
+          isDisabled: status.isDisabled(day),
+          isHover: day.isSame(focusDate.value, 'week'),
+          isInRange: !isFirstOrLastDay && status.isActive(day, 'week')
+        });
+      }
+      // 每周的数据，包括周数和7天的信息  
+      weeks.push({
+        week: weekNumber,
+        days: days
+      });
+      current = current.add(1, 'week'); // 移动到下一周的开始  
+    }
+    return weeks;
+  }
+  function onClick(day) {
+    var weekStart = day.startOf('week');
+    showDate.set(weekStart); // 设置显示日期为周的开始  
+    instance.triggerChange(weekStart); // 触发日期改变事件  
+  }
+  return {
+    getWeeks: getWeeks,
+    onClick: onClick
+  };
+}

package/components/datepicker/useYears.js

@@ -44,10 +44,13 @@ export function useYears(showDate, status, focusDate) {
   }
   function onClick(date) {
     showDate.set(date);
-    if (instance.datepicker.get('type') !== 'year') {
-      instance.type.set('month');
-    } else {
+    var datepickerType = instance.datepicker.get('type');
+    if (datepickerType === 'year') {
       instance.triggerChange(date);
+    } else if (datepickerType === 'quarter') {
+      instance.type.set('quarter');
+    } else {
+      instance.type.set('month');
     }
   }
   return {

package/components/dialog/useFixBody.js

@@ -1,72 +1,20 @@
-import _Set from "@babel/runtime-corejs3/core-js/set";
-import { useInstance, onBeforeUnmount } from 'intact-react';
-import { scrollbarWidth } from '../position';
+import { useInstance } from 'intact-react';
+import { useFixBody as useFixBodyHook, setHooks as setFixBodyHooks } from '../../hooks/useFixBody';
 import { SHOW } from './constants';
-var dialogs = new _Set();
-var originalStyle = null;
-var hooks = null;
 export function useFixBody(elementRef) {
   var instance = useInstance();
-  var fixedBody = false;
+  var fixBodyHook = useFixBodyHook();
   instance.on(SHOW, onEnter);
   instance.on('afterClose', onAfterLeave);
-  onBeforeUnmount(function () {
-    // should also remove body style when dialog is removed, #805
-    // if (fixedBody && instance.get('value')) {
-    if (fixedBody) {
-      // maybe HIDE event has not triggered
-      onClosed(instance);
-    }
-  });
   function onEnter() {
     if (instance.get('overlay')) {
-      fixedBody = true;
-      onOpen(instance);
+      fixBodyHook.onOpen();
     }
   }
   function onAfterLeave() {
-    if (fixedBody) {
-      fixedBody = false;
-      onClosed(instance);
-    }
+    fixBodyHook.onClose();
   }
 }
 export function setHooks(h) {
-  hooks = h;
-}
-function onOpen(dialog) {
-  var body = document.body;
-  if (dialogs.size === 0) {
-    var bodyStyle = body.style;
-    originalStyle = body.getAttribute('style');
-    bodyStyle.overflow = 'hidden';
-    var scrollBarWidth = shouldFixBody();
-    if (scrollBarWidth) {
-      bodyStyle.paddingRight = scrollBarWidth + "px";
-    }
-    if (hooks && hooks.onStart) {
-      hooks.onStart(scrollBarWidth);
-    }
-  }
-  dialogs.add(dialog);
-}
-function onClosed(dialog) {
-  var body = document.body;
-  dialogs.delete(dialog);
-  if (dialogs.size === 0) {
-    if (originalStyle) {
-      // console.log(originalStyle);
-      body.setAttribute('style', originalStyle);
-    } else {
-      body.removeAttribute('style');
-    }
-    if (hooks && hooks.onEnd) {
-      hooks.onEnd();
-    }
-  }
-}
-function shouldFixBody() {
-  if (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) {
-    return scrollbarWidth();
-  }
+  setFixBodyHooks(h);
 }

package/components/dropdown/dropdown.d.ts

@@ -16,6 +16,7 @@ export interface DropdownProps {
     collison?: Position['collision'];
     of?: 'self' | 'parent' | Event;
     container?: PortalProps['container'];
+    alwaysShowOnClick?: boolean;
 }
 export interface DropdownEvents {
     shouldFocus: [];

package/components/dropdown/dropdown.js

@@ -23,7 +23,8 @@ var typeDefs = {
   // Event is undefined in NodeJs
   of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
   container: [String, Function],
-  collison: ['none', 'fit', 'flip', 'flipfit', Array]
+  collison: ['none', 'fit', 'flip', 'flipfit', Array],
+  alwaysShowOnClick: Boolean
 };
 var defaults = function defaults() {
   return {
@@ -222,14 +223,16 @@ function useDocumentClickForDropdown(dropdown) {
       // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
       // case 3: if click on a trigger and its trigger type is focus, do nothing 
       // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
-      var trigger = dropdown.get('trigger');
+      var _dropdown$get = dropdown.get(),
+        trigger = _dropdown$get.trigger,
+        alwaysShowOnClick = _dropdown$get.alwaysShowOnClick;
       if (trigger === 'focus') return;
       var isHover = trigger === 'hover';
-      if (isHover || trigger === 'contextmenu') {
+      if (isHover || trigger === 'contextmenu' || alwaysShowOnClick) {
         var triggerDom = findDomFromVNode(dropdown.$lastInput, true);
         var target = e.target;
         if (containsOrEqual(triggerDom, target)) {
-          if (isHover) return;
+          if (isHover || alwaysShowOnClick) return;
           if (!isHover && e.type === 'contextmenu') return;
         }
       }

package/components/ellipsis/styles.js

@@ -6,5 +6,5 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k, maxLines) {
-  return /*#__PURE__*/css("width:100%;&.", k, "-multiline{.k-ellipsis-wrapper{white-space:normal;display:-webkit-box;-webkit-line-clamp:", maxLines, ";-webkit-box-orient:vertical;}}");
+  return /*#__PURE__*/css("width:100%;&.", k, "-multiline{.k-ellipsis-wrapper{white-space:normal;display:-webkit-box;-webkit-line-clamp:", maxLines, ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-clamp:", maxLines, ";box-orient:vertical;}}");
 });

package/components/form/styles.js

@@ -46,7 +46,7 @@ setDefault(function () {
   makeFormStyles == null || makeFormStyles.clearCache();
 });
 export var makeItemStyles = cache(function makeItemStyles(k) {
-  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.", k, "-fluid>.", k, "-form-content{flex:1;}.", k, "-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.", k, "-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.", k, "-form-content{position:relative;}.", k, "-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.", k, "-ellipsis{.", k, "-form-error-more{display:inline-block;}}}.", k, "-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.", k, "-invalid{.", k, "-input{.", k, "-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.", k, "-select,.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{border:", form.item.invalidBorder, "!important;}.", k, "-select .", k, "-input .", k, "-input-wrapper{border:none;}}.", k, "-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
+  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.", k, "-fluid>.", k, "-form-content{flex:1;min-width:0;}.", k, "-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.", k, "-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.", k, "-form-content{position:relative;}.", k, "-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.", k, "-ellipsis{.", k, "-form-error-more{display:inline-block;}}}.", k, "-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.", k, "-invalid{.", k, "-input{.", k, "-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.", k, "-select,.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{border:", form.item.invalidBorder, "!important;}.", k, "-select .", k, "-input .", k, "-input-wrapper{border:none;}}.", k, "-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
 });
 export var makeFormStyles = cache(function makeFormStyles(k) {
   var _context;

package/components/input/index.d.ts

@@ -64,5 +64,7 @@ export declare class Input<V extends Value = Value> extends Component<InputProps
     focus(): void;
     blur(): void;
     select(): void;
+    getStringWidth(str: string): Promise<number>;
+    getSelectionStart(): number | null;
     private clear;
 }

package/components/input/index.js

@@ -76,6 +76,12 @@ export var Input = /*#__PURE__*/function (_Component) {
   _proto.select = function select() {
     selectValue(this.inputRef.value);
   };
+  _proto.getStringWidth = function getStringWidth(str) {
+    return this.autoWidth.getStringWidth(str);
+  };
+  _proto.getSelectionStart = function getSelectionStart() {
+    return this.inputRef.value.selectionStart;
+  };
   _proto.clear = function clear(e) {
     this.set('value', '');
     this.focus();

package/components/input/index.spec.js

@@ -259,4 +259,49 @@ describe('Input', function () {
       }
     }, _callee7);
   })));
+  it('should handle textarea resize correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var ResizeDemo, _mount8, instance, element, inputElements, resizeNoneElement, resizeVerticalElement, resizeNoneAutoElement, textareas, textarea1, textarea2, computedStyle1, computedStyle2;
+    return _regeneratorRuntime.wrap(function _callee8$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          ResizeDemo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(ResizeDemo, _Component2);
+            function ResizeDemo() {
+              var _context9;
+              var _this2;
+              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+              }
+              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+              _this2.Input = Input;
+              return _this2;
+            }
+            return ResizeDemo;
+          }(Component);
+          ResizeDemo.template = "\n                const {Input} = this;\n                <div>\n                    <Input type=\"textarea\" resize=\"none\" placeholder=\"resize none\" />\n                    <Input type=\"textarea\" resize=\"vertical\" placeholder=\"resize vertical\" />\n                    <Input type=\"textarea\" resize=\"none\" rows=\"auto\" placeholder=\"resize none with auto rows\" />\n                </div>\n            ";
+          _mount8 = mount(ResizeDemo), instance = _mount8[0], element = _mount8[1];
+          inputElements = element.querySelectorAll('.k-input'); // should have k-resize-none class
+          resizeNoneElement = inputElements[0];
+          expect(resizeNoneElement.classList.contains('k-resize-none')).to.be.true;
+          expect(resizeNoneElement.classList.contains('k-resize-vertical')).to.be.false;
+          resizeVerticalElement = inputElements[1];
+          expect(resizeVerticalElement.classList.contains('k-resize-vertical')).to.be.true;
+          expect(resizeVerticalElement.classList.contains('k-resize-none')).to.be.false;
+          // resize="none" with rows="auto" (should have k-resize-none class)
+          resizeNoneAutoElement = inputElements[2];
+          expect(resizeNoneAutoElement.classList.contains('k-resize-none')).to.be.true;
+          // Test CSS computed styles to ensure resize is applied correctly
+          textareas = element.querySelectorAll('.k-textarea');
+          textarea1 = textareas[0];
+          textarea2 = textareas[1];
+          computedStyle1 = getComputedStyle(textarea1);
+          computedStyle2 = getComputedStyle(textarea2);
+          expect(computedStyle1.resize).to.eql('none');
+          expect(computedStyle2.resize).to.eql('vertical');
+        case 19:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee8);
+  })));
 });

package/components/input/index.vdt.js

@@ -59,7 +59,7 @@ export default function ($props, $blocks, $__proto__) {
     focusInputOnClick = _this$focusHook.focusInputOnClick;
   var isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
   var k = this.config.k;
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-input"] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-group"] = $blocks.prepend || $blocks.append, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-clearable"] = clearable, _classNameObj[k + "-auto-width"] = autoWidth, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-stack-clear"] = stackClearIcon, _classNameObj[k + "-inline"] = inline, _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-type-textarea"] = type === 'textarea', _classNameObj[k + "-focus"] = isFocus.value, _classNameObj[k + "-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj[k + "-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-input"] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-group"] = $blocks.prepend || $blocks.append, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-clearable"] = clearable, _classNameObj[k + "-auto-width"] = autoWidth, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-stack-clear"] = stackClearIcon, _classNameObj[k + "-inline"] = inline, _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-type-textarea"] = type === 'textarea', _classNameObj[k + "-focus"] = isFocus.value, _classNameObj[k + "-resize-" + (isNotAutoRows ? resize : 'none')] = type === 'textarea', _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$showPassword = this.showPassword,
     isShowPassword = _this$showPassword.isShow,
     toggleShowPassword = _this$showPassword.toggleShow,
@@ -67,7 +67,8 @@ export default function ($props, $blocks, $__proto__) {
     showPasswordIcon = _this$showPassword.showIcon;
   var _this$autoWidth = this.autoWidth,
     fakeRef = _this$autoWidth.fakeRef,
-    fakeWidth = _this$autoWidth.width.value;
+    fakeWidth = _this$autoWidth.width.value,
+    forceShowFake = _this$autoWidth.forceShowFake;
   var height = this.autoRows;
   var inputValue = frozenOnInput && inputing ? originalValue : value;
   var hasInputValue = !isNullOrUndefined(inputValue);
@@ -133,7 +134,7 @@ export default function ($props, $blocks, $__proto__) {
           return block ? block.call($this, callBlock, data) : callBlock();
         }, __$blocks['suffix'](_$no))], 0, _$cn(k + "-input-suffix"), {
           'ev-click': stopPropagation
-        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'pre', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
+        }) : undefined, autoWidth || forceShowFake.value ? _$ce(2, 'div', _$ce(2, 'pre', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
           'ev-click': focusInputOnClick
         })
       });

package/components/input/useAutoWidth.d.ts

@@ -1,4 +1,6 @@
 export declare function useAutoWidth(): {
     fakeRef: import('intact-react').RefObject<HTMLDivElement>;
     width: import("../../hooks/useState").State<number>;
+    forceShowFake: import("../../hooks/useState").State<boolean>;
+    getStringWidth: (str: string) => Promise<number>;
 };

package/components/input/useAutoWidth.js

@@ -1,9 +1,11 @@
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
 import { useInstance, createRef, onMounted, nextTick } from 'intact-react';
 import { useState } from '../../hooks/useState';
 export function useAutoWidth() {
   var instance = useInstance();
   var fakeRef = createRef();
   var width = useState(0);
+  var forceShowFake = useState(false);
   instance.watch('value', adjustWidth, {
     inited: true,
     presented: true
@@ -24,9 +26,25 @@ export function useAutoWidth() {
       });
     }
   }
+  function getStringWidth(str) {
+    forceShowFake.set(true);
+    return new _Promise(function (resolve) {
+      nextTick(function () {
+        var fakeElem = fakeRef.value;
+        var textNode = fakeElem.firstChild;
+        var oldStr = textNode.nodeValue;
+        textNode.nodeValue = str;
+        resolve(fakeElem.offsetWidth);
+        textNode.nodeValue = oldStr;
+        forceShowFake.set(false);
+      });
+    });
+  }
   return {
     fakeRef: fakeRef,
-    width: width
+    width: width,
+    forceShowFake: forceShowFake,
+    getStringWidth: getStringWidth
   };
 }
 function isVisible(elem) {