@king-design/react 3.0.0-beta.0 → 3.0.0-beta.1

package/components/form/styles.js

@@ -8,12 +8,12 @@ var defaults = {
     gap: "24px",
     labelWidth: "80px",
 
-    get labelLineHeight() {
+    get labelHeight() {
       return theme.default.height;
     },
 
     labelTextAlign: 'right',
-    labelGap: '10px',
+    labelGap: '16px',
 
     get starColor() {
       return theme.color.danger;
@@ -50,12 +50,12 @@ setDefault(function () {
   }).form;
 });
 export function makeItemStyles() {
-  return /*#__PURE__*/css("display:table;position:relative;table-layout:fixed;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid{width:100%;}.k-form-label{display:table-cell;width:", form.item.labelWidth, ";text-align:", form.item.labelTextAlign, ";padding-right:", form.item.labelGap, ";line-height:", form.item.labelLineHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{display:table-cell;vertical-align:middle;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-inner{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-inner{border:none;}}.k-form-item{&,.k-form-content{display:block;width:auto;}}.k-form-append{display:table-cell;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;}.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, ";}.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-inner{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-inner{border:none;}}.k-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
 }
 export function makeFormStyles() {
   var _context;
 
-  return /*#__PURE__*/css("&.k-inline{.k-form-item{display:inline-block;vertical-align:top;margin-right:", form.item.inlineGap, ";}.k-form-label{width:auto;}}&.k-vertical{.k-form-item,.k-form-label,.k-form-content{display:block;}.k-form-label{width:auto;text-align:left;line-height:inherit;margin-bottom:", form.item.verticalLabelGap, ";}}", _mapInstanceProperty(_context = ['small', 'mini']).call(_context, function (size) {
+  return /*#__PURE__*/css("&.k-inline{.k-form-item{display:inline-flex;vertical-align:top;margin-right:", form.item.inlineGap, ";}.k-form-label{width:auto;}}&.k-vertical{.k-form-item{flex-direction:column;}.k-form-label{width:auto;text-align:left;padding:0;justify-content:start;margin-bottom:", form.item.verticalLabelGap, ";}}", _mapInstanceProperty(_context = ['small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.k-", size, "{.k-form-item:not(:last-of-type){margin-bottom:", form.item[size + "Gap"], ";}&.k-inline{.k-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
   }), ";");
 }

package/components/grid/useGutter.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { useInstance } from 'intact-react';
 import { createContext } from '../context';
-import { hasDocumentAvailable, isObject, isNullOrUndefined } from 'intact-shared';
-import { useState } from '../../hooks/useState';
-import { responsiveMap } from './constants';
-var enquire;
+import { hasDocumentAvailable, isObject, isNullOrUndefined } from 'intact-shared'; // import type * as EnquireJs from 'enquire.js';
 
-if (hasDocumentAvailable) {
-  enquire = require('enquire.js');
-}
+import enquire from 'enquire.js';
+import { useState } from '../../hooks/useState';
+import { responsiveMap } from './constants'; // let enquire: typeof EnquireJs;
+// if (hasDocumentAvailable) {
+// enquire = require('enquire.js');
+// }
 
 export var context = createContext(0);
 export function useGutter() {
@@ -22,7 +22,7 @@ export function useGutter() {
     xs: false
   });
 
-  if (enquire) {
+  if (hasDocumentAvailable) {
     var _loop = function _loop(key) {
       enquire.register(responsiveMap[key], {
         match: function match() {

package/components/input/index.d.ts

@@ -2,7 +2,7 @@ import { Component, TypeDefs } from 'intact-react';
 import { Sizes } from '../../styles/utils';
 import { CommonInputHTMLAttributes, Events } from '../types';
 export * from './search';
-declare type HTMLInputTypes = 'textarea' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | (string & {});
+export declare type HTMLInputTypes = 'textarea' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | (string & {});
 interface InputHTMLAttributes extends CommonInputHTMLAttributes {
     pattern?: string;
     dirname?: string;
@@ -20,7 +20,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     clearable?: boolean;
     disabled?: boolean;
     size?: Sizes;
-    rows?: string | number;
+    rows?: string | number | 'auto' | AutoRows;
     autoWidth?: boolean;
     fluid?: boolean;
     width?: number | string;
@@ -28,7 +28,14 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     frozenOnInput?: boolean;
     inline?: boolean;
     waveDisabled?: boolean;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    showPassword?: boolean;
+    flat?: boolean;
 }
+export declare type AutoRows = {
+    min?: number;
+    max?: number;
+};
 export interface InputEvents {
     clear: [MouseEvent];
     focus: [FocusEvent];
@@ -49,6 +56,8 @@ export declare class Input<V extends Value = Value> extends Component<InputProps
     private inputRef;
     private autoWidth;
     private frozen;
+    private autoRows;
+    private showPassword;
     focus(): void;
     blur(): void;
     select(): void;

package/components/input/index.js

@@ -4,9 +4,11 @@ import { __decorate } from "tslib";
 import { Component, createRef } from 'intact-react';
 import { sizes } from '../../styles/utils';
 import template from './index.vdt';
-import { bind } from '../utils';
+import { bind, selectValue } from '../utils';
 import { useAutoWidth } from './useAutoWidth';
 import { useFrozen } from './useFrozen';
+import { useAutoRows } from './useAutoRows';
+import { useShowPassword } from './useShowPassword';
 export * from './search';
 var typeDefs = {
   type: String,
@@ -17,21 +19,25 @@ var typeDefs = {
   clearable: Boolean,
   disabled: Boolean,
   size: sizes,
-  rows: [String, Number],
+  rows: [String, Number, 'auto', Object],
   autoWidth: Boolean,
   fluid: Boolean,
   width: [Number, String],
   stackClearIcon: Boolean,
   frozenOnInput: Boolean,
   inline: Boolean,
-  waveDisabled: Boolean
+  waveDisabled: Boolean,
+  resize: ['none', 'vertical', 'horizontal', 'both'],
+  showPassword: Boolean,
+  flat: Boolean
 };
 
 var defaults = function defaults() {
   return {
     type: 'text',
     size: 'default',
-    rows: 2
+    rows: 2,
+    resize: 'vertical'
   };
 };
 
@@ -57,6 +63,8 @@ export var Input = /*#__PURE__*/function (_Component) {
     _this.inputRef = createRef();
     _this.autoWidth = useAutoWidth();
     _this.frozen = useFrozen();
+    _this.autoRows = useAutoRows(_this.inputRef);
+    _this.showPassword = useShowPassword();
     return _this;
   }
 
@@ -71,15 +79,7 @@ export var Input = /*#__PURE__*/function (_Component) {
   };
 
   _proto.select = function select() {
-    var input = this.inputRef.value;
-
-    if (input.select) {
-      input.select();
-    } else if (input.setSelectionRange) {
-      // mobile safari
-      input.focus();
-      input.setSelectionRange(0, input.value.length);
-    }
+    selectValue(this.inputRef.value);
   };
 
   _proto.clear = function clear(e) {

package/components/input/index.spec.js

@@ -1,9 +1,16 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/input/demos/basic';
-import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { mount, unmount, dispatchEvent, wait, getElement } from '../../test/utils';
 import SearchDemo from '~/components/input/demos/search';
 import FrozenDemo from '~/components/input/demos/frozen';
+import AutoRowsDemo from '~/components/input/demos/autoRows';
+import PasswordDemo from '~/components/input/demos/password';
+import { Input } from './';
+import { Dialog } from '../dialog';
+import { Component } from 'intact-react';
 describe('Input', function () {
   afterEach(function () {
     unmount();
@@ -124,4 +131,165 @@ describe('Input', function () {
       }
     }, _callee3);
   })));
+  it('should auto expand or shrink textarea', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element, _element$querySelecto2, textarea1, textarea2;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(AutoRowsDemo), instance = _mount4[0], element = _mount4[1];
+            _element$querySelecto2 = element.querySelectorAll('textarea'), textarea1 = _element$querySelecto2[0], textarea2 = _element$querySelecto2[1]; // const lineHeight = parseInt(getComputedStyle(textarea1).lineHeight);
+
+            instance.set('value1', 'a\nb');
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            expect(textarea1.style.height).to.eql('50px');
+            instance.set('value1', 'a');
+            _context4.next = 9;
+            return wait();
+
+          case 9:
+            expect(textarea1.style.height).to.eql('32px');
+            instance.set('value2', 'a');
+            _context4.next = 13;
+            return wait();
+
+          case 13:
+            expect(textarea2.style.height).to.eql('68px');
+            instance.set('value2', 'a\nb\nc');
+            _context4.next = 17;
+            return wait();
+
+          case 17:
+            expect(textarea2.style.height).to.eql('68px');
+            instance.set('value2', 'a\nb\nc\nd');
+            _context4.next = 21;
+            return wait();
+
+          case 21:
+            expect(textarea2.style.height).to.eql('86px');
+            instance.set('value2', 'a\nb\nc\nd\ne\nf\ng\nh');
+            _context4.next = 25;
+            return wait();
+
+          case 25:
+            expect(textarea2.style.height).to.eql('104px');
+
+          case 26:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should show or hide password', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount5, instance, element, input, icon, inputInstance;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(PasswordDemo), instance = _mount5[0], element = _mount5[1];
+            input = element.querySelector('input');
+            icon = element.querySelector('.k-icon');
+            inputInstance = instance.refs.__demo;
+            icon.click();
+            _context5.next = 7;
+            return wait();
+
+          case 7:
+            expect(input.type).to.eql('text');
+            expect(element.innerHTML).to.matchSnapshot();
+            icon.click();
+            _context5.next = 12;
+            return wait();
+
+          case 12:
+            expect(input.type).to.eql('password');
+            expect(element.innerHTML).to.matchSnapshot(); // simulate receive type
+
+            inputInstance.$props.type = 'number';
+            inputInstance.trigger('$receive:type', 'number');
+            _context5.next = 18;
+            return wait();
+
+          case 18:
+            expect(input.type).to.eql('number');
+            expect(icon.parentElement.parentElement).to.eql(null);
+            expect(element.innerHTML).to.matchSnapshot(); // simulate receive showPassword
+
+            inputInstance.$props.type = 'password';
+            inputInstance.$props.showPassword = false;
+            inputInstance.trigger('$receive:type', 'password');
+            inputInstance.trigger('$receive:showPassword', false);
+            _context5.next = 27;
+            return wait();
+
+          case 27:
+            expect(input.type).to.eql('password');
+            expect(element.querySelector('.k-icon')).to.eql(null);
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 30:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('should set width when dialog show and input mounted', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, instance, dialog, width;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context6;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context6 = [this]).call(_context6, args)) || this;
+                _this.Dialog = Dialog;
+                _this.Input = Input;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  show: false
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Dialog = this.Dialog;\n                var Input = this.Input;\n                <Dialog value={this.get('show')}>\n                    <Input autoWidth placeholder=\"test\" v-if={this.get('show')} />\n                </Dialog>\n            ";
+            _mount6 = mount(Demo), instance = _mount6[0];
+            instance.set('show', true);
+            _context7.next = 6;
+            return wait(50);
+
+          case 6:
+            dialog = getElement('.k-dialog');
+            width = parseInt(dialog.querySelector('.k-input-inner').style.width);
+            expect(width).to.gt(1);
+
+          case 9:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee6);
+  })));
 });

package/components/input/index.vdt.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "type", "value", "defaultValue", "placeholder", "clearable", "disabled", "size", "rows", "autoWidth", "fluid", "width", "stackClearIcon", "frozenOnInput", "readonly", "inline", "waveDisabled", "ev-click", "ev-mounseenter", "ev-mouseleave"];
+var _excluded = ["className", "style", "type", "value", "defaultValue", "placeholder", "clearable", "disabled", "size", "rows", "autoWidth", "fluid", "width", "stackClearIcon", "frozenOnInput", "readonly", "inline", "waveDisabled", "resize", "flat", "ev-click", "ev-mounseenter", "ev-mouseleave"];
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, noop as _$no, createVNode as _$cv } from 'intact-react';
 import { Icon } from '../icon';
 import { addStyle, isTextBlock, getRestProps } from '../utils';
 import { makeStyles } from './styles';
-import { noop, isNullOrUndefined } from 'intact-shared';
+import { noop, isNullOrUndefined, isStringOrNumber } from 'intact-shared';
 import { Wave } from '../wave';
 import { context as ErrorContext } from '../form/useError';
 export default function ($props, $blocks, $__proto__) {
@@ -39,6 +40,8 @@ export default function ($props, $blocks, $__proto__) {
       readonly = _this$get.readonly,
       inline = _this$get.inline,
       waveDisabled = _this$get.waveDisabled,
+      resize = _this$get.resize,
+      flat = _flatInstanceProperty(_this$get),
       click = _this$get['ev-click'],
       mouseenter = _this$get['ev-mounseenter'],
       mouseleave = _this$get['ev-mouseleave'],
@@ -50,12 +53,19 @@ export default function ($props, $blocks, $__proto__) {
       startInput = _this$frozen.startInput,
       onInput = _this$frozen.onInput,
       endInput = _this$frozen.endInput;
+  var isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
   var classNameObj = (_classNameObj = {
     'k-input': true
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-group'] = $blocks.prepend || $blocks.append, _classNameObj['k-disabled'] = disabled, _classNameObj['k-with-prefix'] = $blocks.prefix, _classNameObj['k-with-suffix'] = $blocks.suffix, _classNameObj['k-clearable'] = clearable, _classNameObj['k-auto-width'] = autoWidth, _classNameObj['k-fluid'] = fluid, _classNameObj['k-stack-clear'] = stackClearIcon, _classNameObj['k-inline'] = inline, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-group'] = $blocks.prepend || $blocks.append, _classNameObj['k-disabled'] = disabled, _classNameObj['k-with-prefix'] = $blocks.prefix, _classNameObj['k-with-suffix'] = $blocks.suffix, _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-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj["k-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$showPassword = this.showPassword,
+      isShowPassword = _this$showPassword.isShow,
+      toggleShowPassword = _this$showPassword.toggleShow,
+      showPasswordType = _this$showPassword.type,
+      showPasswordIcon = _this$showPassword.showIcon;
   var _this$autoWidth = this.autoWidth,
       fakeRef = _this$autoWidth.fakeRef,
       fakeWidth = _this$autoWidth.width.value;
+  var height = this.autoRows;
   var inputValue = frozenOnInput && inputing ? originalValue : value;
   var hasInputValue = !isNullOrUndefined(inputValue);
   var hasValue = hasInputValue && inputValue !== '';
@@ -69,7 +79,7 @@ export default function ($props, $blocks, $__proto__) {
     placeholder: placeholder,
     disabled: disabled,
     ref: this.inputRef,
-    style: autoWidth ? {
+    style: autoWidth && fakeWidth ? {
       width: fakeWidth + 'px'
     } : undefined
   }); // if we pass value to input element, the input is controlled and the
@@ -100,11 +110,22 @@ export default function ($props, $blocks, $__proto__) {
           return block ? block.call($this, callBlock, data) : callBlock();
         }, __$blocks['prefix'](_$no)), 0, 'k-input-prefix') : undefined, type !== 'textarea' ? _$cv('input', _extends({}, inputProps, {
           'className': 'k-input-inner',
-          'type': type
+          'type': showPasswordType.value
         })) : _$cv('textarea', _extends({}, inputProps, {
           'className': 'k-input-inner k-textarea',
-          'rows': rows
-        })), $blocks.suffix || clearable && !disabled ? _$ce(2, 'div', [clearable && !disabled ? _$cc(Icon, {
+          'rows': isNotAutoRows ? rows : 1,
+          'style': height.value ? addStyle(inputProps.style, {
+            height: height.value + 'px'
+          }) : inputProps.style
+        })), $blocks.suffix || clearable && !disabled || showPasswordIcon.value ? _$ce(2, 'div', [showPasswordIcon.value ? [_$cc(Icon, {
+          'hoverable': true,
+          'className': _$cn({
+            "k-input-show-password": true,
+            "ion-eye-disabled": !isShowPassword.value,
+            "ion-eye": isShowPassword.value
+          }),
+          'ev-click': toggleShowPassword
+        }), ' '] : undefined, clearable && !disabled ? _$cc(Icon, {
           'className': _$cn({
             "k-input-clear ion-ios-close": true,
             "k-input-show": hasValue

package/components/input/styles.js

@@ -1,8 +1,10 @@
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
 import '../../styles/global';
+import { Input } from './';
 var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
@@ -58,7 +60,7 @@ var defaults = deepDefaults({
 
   // textarea
   get textareaPadding() {
-    return "5px " + input.paddingGap;
+    return "6px " + input.paddingGap;
   },
 
   // group
@@ -84,6 +86,17 @@ var defaults = deepDefaults({
   // search input
   search: {
     suffixMarginRight: '15px'
+  },
+  // flat
+  flat: {
+    get color() {
+      return theme.color.lightBlack;
+    },
+
+    get bgColor() {
+      return theme.color.bg;
+    }
+
   }
 }, sizes.reduce(function (memo, size) {
   var styles = theme[size];
@@ -110,12 +123,16 @@ setDefault(function () {
   }).input;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";vertical-align:middle;.k-input-wrapper{display:inline-block;width:100%;position:relative;}.k-input-inner{display:inline-block;width:100%;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";outline:none;position:relative;color:", input.color, ";&:hover{border:", input.hoverBorder, ";z-index:1;}&:focus{border:", input.focusBorder, ";z-index:1;}&::placeholder{color:", input.placeholderColor, ";}}&.k-fluid{width:100%;}.k-input-prefix,.k-input-suffix{position:absolute;top:50%;transform:translateY(-50%);z-index:2;color:", theme.color.lightBlack, ";line-height:1;}.k-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";+*{margin-left:", input.clearIconGap, ";}}&:hover .k-input-clear.k-input-show{opacity:1;pointer-events:all;}&.k-stack-clear{.k-input-clear{position:absolute;z-index:1;right:0;&.k-input-show+i{transition:opacity ", input.transition, ";}}&:hover{.k-input-clear.k-input-show+i{opacity:0;}}}&.k-group{display:table;.k-input-inner{border-radius:0;}.k-input-wrapper:first-child{.k-input-inner{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-wrapper:last-child{.k-input-inner{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}}.k-input-prepend,.k-input-append{display:table-cell;width:1px;vertical-align:middle;background-color:", input.groupBgColor, ";border:", input.border, ";text-align:center;white-space:nowrap;.k-btn{margin:-1px;border:none;&.k-none:hover{background:transparent;}}.k-select{margin:-1px;text-align:left;}}.k-input-prepend{&,.k-btn,.k-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-append{&,.k-btn,.k-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.k-input-padding{padding:0 ", input.groupPaddingGap, ";}.k-input-prepend{border-right:none;}.k-input-append{border-left:none;}&.k-disabled{color:", input.disabledColor, ";cursor:not-allowed;.k-input-inner{color:", input.disabledColor, ";border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  var _context;
+
+  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";vertical-align:middle;.k-input-wrapper{display:inline-block;width:100%;position:relative;}.k-input-inner{display:inline-block;width:100%;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";outline:none;position:relative;color:", input.color, ";&:hover{border:", input.hoverBorder, ";z-index:1;}&:focus{border:", input.focusBorder, ";z-index:1;}&::placeholder{color:", input.placeholderColor, ";}}&.k-fluid{width:100%;}.k-input-prefix,.k-input-suffix{position:absolute;top:50%;transform:translateY(-50%);z-index:2;color:", theme.color.lightBlack, ";line-height:1;}.k-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";+*{margin-left:", input.clearIconGap, ";}}&:hover .k-input-clear.k-input-show{opacity:1;pointer-events:all;}.k-input-show-password{color:", input.clearIconColor, ";}&.k-stack-clear{.k-input-clear{position:absolute;z-index:1;right:0;&.k-input-show+i{transition:opacity ", input.transition, ";}}&:hover{.k-input-clear.k-input-show+i{opacity:0;}}}&.k-group{display:table;.k-input-inner{border-radius:0;}.k-input-wrapper:first-child{.k-input-inner{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-wrapper:last-child{.k-input-inner{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}}.k-input-prepend,.k-input-append{display:table-cell;width:1px;vertical-align:middle;background-color:", input.groupBgColor, ";border:", input.border, ";text-align:center;white-space:nowrap;.k-btn{margin:-1px;border:none;&.k-none:hover{background:transparent;}}.k-select{margin:-1px;text-align:left;}}.k-input-prepend{&,.k-btn,.k-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-append{&,.k-btn,.k-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.k-input-padding{padding:0 ", input.groupPaddingGap, ";}.k-input-prepend{border-right:none;}.k-input-append{border-left:none;}&.k-flat{.k-input-inner{border:none;background:", _flatInstanceProperty(input).bgColor, ";color:", _flatInstanceProperty(input).color, ";}}&.k-disabled{color:", input.disabledColor, ";cursor:not-allowed;.k-input-inner{color:", input.disabledColor, ";border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
     var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.k-input-inner{height:", styles.height, ";line-height:", styles.height, ";font-size:", styles.fontSize, ";padding:0 ", styles.paddingGap, ";}.k-input-prefix{left:", styles.paddingGap, ";}.k-input-suffix{right:", styles.paddingGap, ";}&.k-with-prefix{.k-input-inner{padding-left:calc(", styles.paddingGap, " + 1rem + ", input.clearIconGap, ");}}&.k-with-suffix,&.k-clearable{.k-input-inner{padding-right:calc(", styles.paddingGap, " + 1rem + ", input.clearIconGap, ");}}&:not(.k-stack-clear).k-with-suffix.k-clearable{.k-input-inner{padding-right:calc(", styles.paddingGap, " + 2rem + ", input.clearIconGap, " * 2);}}");
     if (size === 'default') return sizeClassName;
     return /*#__PURE__*/css("&.k-", size, "{", sizeClassName, ";}");
-  }), "&.k-inline{.k-input-inner{height:auto;line-height:inherit;border:none;border-radius:0;padding:0;}}.k-textarea{padding:", input.textareaPadding, ";height:auto;line-height:1.5;vertical-align:top;}.k-input-fake{position:absolute;visibility:hidden;top:0;white-space:nowrap;}&.k-auto-width{width:auto;.k-input-inner{box-sizing:content-box;}}");
+  }), "&.k-inline{.k-input-inner{height:auto;line-height:inherit;border:none;border-radius:0;padding:0;}}.k-textarea{padding:", input.textareaPadding, ";height:auto;line-height:1.5;vertical-align:top;}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {
+    return /*#__PURE__*/css("&.k-resize-", type, "{.k-textarea{resize:", type, ";}}");
+  }), ".k-input-fake{position:absolute;visibility:hidden;top:0;white-space:nowrap;}&.k-auto-width{width:auto;max-width:100%;.k-input-inner{max-width:100%;box-sizing:content-box;}}");
 }
 export function makeSearchStyles() {
   return /*#__PURE__*/css("position:relative;display:inline-block;.k-input{transition:width ", input.transition, ";}.k-btn{position:absolute;top:0;right:0;z-index:1;}.k-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.k-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {

package/components/input/useAutoRows.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'intact-react';
+export declare function useAutoRows(inputRef: RefObject<HTMLInputElement>): import("../../hooks/useState").State<number>;

package/components/input/useAutoRows.js

@@ -0,0 +1,79 @@
+import { useInstance, onMounted } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { isObject } from 'intact-shared';
+export function useAutoRows(inputRef) {
+  var instance = useInstance();
+  var height = useState(0);
+  var lineHeight;
+  var paddingTop;
+  var paddingBottom;
+  var isBorderBox;
+
+  function getStyles() {
+    if (instance.get('type') === 'textarea') {
+      var styles = getComputedStyle(inputRef.value);
+      lineHeight = parseInt(styles.lineHeight);
+      paddingTop = parseInt(styles.paddingTop);
+      paddingBottom = parseInt(styles.paddingBottom);
+      isBorderBox = styles.boxSizing === 'border-box';
+    }
+  }
+
+  onMounted(getStyles);
+  instance.watch('type', getStyles, {
+    presented: true
+  });
+  instance.watch('value', adjust, {
+    inited: true,
+    presented: true
+  });
+  instance.watch('placeholder', adjust, {
+    inited: true,
+    presented: true
+  });
+  instance.watch('rows', adjust, {
+    inited: true,
+    presented: true
+  });
+  onMounted(adjust);
+
+  function adjust() {
+    var _instance$get = instance.get(),
+        rows = _instance$get.rows,
+        type = _instance$get.type;
+
+    if (type === 'textarea' && (rows === 'auto' || isObject(rows))) {
+      var textarea = inputRef.value;
+      var originheight = textarea.style.height; // we shuold remove height before get scrollHeight,
+      // otherwise we cannot shrink the height when we remove the text
+
+      textarea.style.height = '';
+      var scrollHeight = textarea.scrollHeight;
+      var lines = (scrollHeight - paddingTop - paddingBottom) / lineHeight;
+      textarea.style.height = originheight;
+      var actualLines = lines;
+
+      if (rows !== 'auto') {
+        var min = rows.min,
+            max = rows.max;
+
+        if (min && lines <= min) {
+          actualLines = min;
+        }
+
+        if (max && lines >= max) {
+          actualLines = max;
+        }
+      }
+
+      height.set(lineHeight * actualLines + (isBorderBox ? paddingTop + paddingBottom + 2
+      /* border */
+      : 0));
+      return;
+    }
+
+    height.set(0);
+  }
+
+  return height;
+}

package/components/input/useAutoWidth.js

@@ -1,4 +1,4 @@
-import { useInstance, createRef, onMounted } from 'intact-react';
+import { useInstance, createRef, onMounted, nextTick } from 'intact-react';
 import { useState } from '../../hooks/useState';
 export function useAutoWidth() {
   var instance = useInstance();
@@ -16,9 +16,15 @@ export function useAutoWidth() {
 
   function adjustWidth() {
     if (instance.get('autoWidth')) {
-      var _width = fakeRef.value.offsetWidth || 1;
+      nextTick(function () {
+        var fakeElem = fakeRef.value;
 
-      width.set(_width);
+        if (isVisible(fakeElem)) {
+          var _width = fakeElem.offsetWidth || 1;
+
+          width.set(_width);
+        }
+      });
     }
   }
 
@@ -26,4 +32,8 @@ export function useAutoWidth() {
     fakeRef: fakeRef,
     width: width
   };
+}
+
+function isVisible(elem) {
+  return elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
 }

package/components/input/useShowPassword.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLInputTypes } from './';
+export declare function useShowPassword(): {
+    isShow: import("../../hooks/useState").State<boolean>;
+    type: import("../../hooks/useState").State<HTMLInputTypes | undefined>;
+    toggleShow: () => void;
+    showIcon: import("../../hooks/useState").State<boolean>;
+};