@king-design/vue 2.1.4 → 2.1.6

package/components/input/index.spec.js

@@ -17,224 +17,278 @@ describe('Input', function () {
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, input;
+
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
-          input = element.querySelector('input');
-          instance.refs.__test.focus();
-          input.value = 'test';
-          dispatchEvent(input, 'input');
-          _context.next = 7;
-          return wait();
-        case 7:
-          expect(instance.get('value')).eql('test');
-          instance.refs.__test.select();
-        case 9:
-        case "end":
-          return _context.stop();
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            input = element.querySelector('input');
+
+            instance.refs.__test.focus();
+
+            input.value = 'test';
+            dispatchEvent(input, 'input');
+            _context.next = 7;
+            return wait();
+
+          case 7:
+            expect(instance.get('value')).eql('test');
+
+            instance.refs.__test.select();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
       }
     }, _callee);
   })));
   it('search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var onSearch, _mount2, instance, element, btn, input, form;
+
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          onSearch = sinon.spy();
-          SearchDemo.prototype.search = onSearch;
-          _mount2 = mount(SearchDemo), instance = _mount2[0], element = _mount2[1];
-          expect(element.innerHTML).to.matchSnapshot();
-          btn = element.querySelector('.k-btn');
-          btn.click();
-          _context2.next = 8;
-          return wait();
-        case 8:
-          expect(element.innerHTML).to.matchSnapshot();
-          input = element.querySelector('input');
-          input.value = 'test';
-          dispatchEvent(input, 'input');
-          _context2.next = 14;
-          return wait();
-        case 14:
-          expect(element.innerHTML).to.matchSnapshot();
-          form = element.querySelector('form');
-          dispatchEvent(form, 'submit');
-          _context2.next = 19;
-          return wait();
-        case 19:
-          expect(onSearch.calledWith('test')).to.be.true;
-          btn.click();
-          _context2.next = 23;
-          return wait();
-        case 23:
-          expect(onSearch.callCount).to.eql(2);
-          expect(onSearch.calledWith('test')).to.be.true;
-          expect(element.innerHTML).to.matchSnapshot();
-          document.body.click();
-          _context2.next = 29;
-          return wait();
-        case 29:
-          expect(element.innerHTML).to.matchSnapshot();
-        case 30:
-        case "end":
-          return _context2.stop();
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            onSearch = sinon.spy();
+            SearchDemo.prototype.search = onSearch;
+            _mount2 = mount(SearchDemo), instance = _mount2[0], element = _mount2[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            btn = element.querySelector('.k-btn');
+            btn.click();
+            _context2.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+            input = element.querySelector('input');
+            input.value = 'test';
+            dispatchEvent(input, 'input');
+            _context2.next = 14;
+            return wait();
+
+          case 14:
+            expect(element.innerHTML).to.matchSnapshot();
+            form = element.querySelector('form');
+            dispatchEvent(form, 'submit');
+            _context2.next = 19;
+            return wait();
+
+          case 19:
+            expect(onSearch.calledWith('test')).to.be.true;
+            btn.click();
+            _context2.next = 23;
+            return wait();
+
+          case 23:
+            expect(onSearch.callCount).to.eql(2);
+            expect(onSearch.calledWith('test')).to.be.true;
+            expect(element.innerHTML).to.matchSnapshot();
+            document.body.click();
+            _context2.next = 29;
+            return wait();
+
+          case 29:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 30:
+          case "end":
+            return _context2.stop();
+        }
       }
     }, _callee2);
   })));
   it('should frozen value on input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount3, instance, element, _element$querySelecto, input1, input2;
+
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _mount3 = mount(FrozenDemo), instance = _mount3[0], element = _mount3[1];
-          _element$querySelecto = element.querySelectorAll('input'), input1 = _element$querySelecto[0], input2 = _element$querySelecto[1];
-          dispatchEvent(input2, 'focus');
-          input2.value = '#123';
-          dispatchEvent(input2, 'input');
-          _context3.next = 7;
-          return wait();
-        case 7:
-          expect(input1.value).to.eql('#112233');
-          expect(input2.value).to.eql('#123');
-          dispatchEvent(input2, 'blur');
-          _context3.next = 12;
-          return wait();
-        case 12:
-          expect(input2.value).to.eql('#112233');
-        case 13:
-        case "end":
-          return _context3.stop();
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(FrozenDemo), instance = _mount3[0], element = _mount3[1];
+            _element$querySelecto = element.querySelectorAll('input'), input1 = _element$querySelecto[0], input2 = _element$querySelecto[1];
+            dispatchEvent(input2, 'focus');
+            input2.value = '#123';
+            dispatchEvent(input2, 'input');
+            _context3.next = 7;
+            return wait();
+
+          case 7:
+            expect(input1.value).to.eql('#112233');
+            expect(input2.value).to.eql('#123');
+            dispatchEvent(input2, 'blur');
+            _context3.next = 12;
+            return wait();
+
+          case 12:
+            expect(input2.value).to.eql('#112233');
+
+          case 13:
+          case "end":
+            return _context3.stop();
+        }
       }
     }, _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();
+      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();
+      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];
+      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;
               }
-              _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
+
+              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();
+
+              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

@@ -10,60 +10,64 @@ import { Wave } from '../wave';
 import { context as ErrorContext } from '../form/useError';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
-    children,
-    _this = this,
-    _children;
+      children,
+      _this = this,
+      _children;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
+
   var _this$get = this.get(),
-    className = _this$get.className,
-    style = _this$get.style,
-    type = _this$get.type,
-    value = _this$get.value,
-    defaultValue = _this$get.defaultValue,
-    placeholder = _this$get.placeholder,
-    clearable = _this$get.clearable,
-    disabled = _this$get.disabled,
-    size = _this$get.size,
-    rows = _this$get.rows,
-    autoWidth = _this$get.autoWidth,
-    fluid = _this$get.fluid,
-    width = _this$get.width,
-    stackClearIcon = _this$get.stackClearIcon,
-    frozenOnInput = _this$get.frozenOnInput,
-    readonly = _this$get.readonly,
-    inline = _this$get.inline,
-    waveDisabled = _this$get.waveDisabled,
-    resize = _this$get.resize,
-    click = _this$get['ev-click'],
-    mouseenter = _this$get['ev-mounseenter'],
-    mouseleave = _this$get['ev-mouseleave'],
-    rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
+      className = _this$get.className,
+      style = _this$get.style,
+      type = _this$get.type,
+      value = _this$get.value,
+      defaultValue = _this$get.defaultValue,
+      placeholder = _this$get.placeholder,
+      clearable = _this$get.clearable,
+      disabled = _this$get.disabled,
+      size = _this$get.size,
+      rows = _this$get.rows,
+      autoWidth = _this$get.autoWidth,
+      fluid = _this$get.fluid,
+      width = _this$get.width,
+      stackClearIcon = _this$get.stackClearIcon,
+      frozenOnInput = _this$get.frozenOnInput,
+      readonly = _this$get.readonly,
+      inline = _this$get.inline,
+      waveDisabled = _this$get.waveDisabled,
+      resize = _this$get.resize,
+      click = _this$get['ev-click'],
+      mouseenter = _this$get['ev-mounseenter'],
+      mouseleave = _this$get['ev-mouseleave'],
+      rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
+
   var _this$frozen = this.frozen,
-    inputing = _this$frozen.inputing.value,
-    originalValue = _this$frozen.originalValue.value,
-    startInput = _this$frozen.startInput,
-    onInput = _this$frozen.onInput,
-    endInput = _this$frozen.endInput;
+      inputing = _this$frozen.inputing.value,
+      originalValue = _this$frozen.originalValue.value,
+      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["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;
+      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;
+      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 !== '';
+
   var inputProps = _extends({}, getRestProps(this, rest), {
     'ev-focus': startInput,
     'ev-blur': endInput,
@@ -76,12 +80,14 @@ export default function ($props, $blocks, $__proto__) {
     style: autoWidth && fakeWidth ? {
       width: fakeWidth + 'px'
     } : undefined
-  });
-  // if we pass value to input element, the input is controlled and the
+  }); // if we pass value to input element, the input is controlled and the
   // defaultValue does not work
+
+
   if (hasInputValue) {
     inputProps.value = inputValue;
   }
+
   return _$ce(2, 'div', [$blocks.prepend ? (children = $blocks.prepend(noop), _$ce(2, 'div', children, 0, _$cn({
     "k-input-prepend": true,
     "k-input-padding": isTextBlock(children)
@@ -94,9 +100,11 @@ export default function ($props, $blocks, $__proto__) {
           return null;
         }, __$blocks['prefix'] = function ($super, data) {
           var block = $blocks['prefix'];
+
           var callBlock = function callBlock() {
             return _$blocks['prefix'].call($this, $super, data);
           };
+
           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',
@@ -126,9 +134,11 @@ export default function ($props, $blocks, $__proto__) {
           return null;
         }, __$blocks['suffix'] = function ($super, data) {
           var block = $blocks['suffix'];
+
           var callBlock = function callBlock() {
             return _$blocks['suffix'].call($this, $super, data);
           };
+
           return block ? block.call($this, callBlock, data) : callBlock();
         }, __$blocks['suffix'](_$no))], 0, 'k-input-suffix') : undefined, autoWidth ? _$ce(2, 'div', !hasValue ? placeholder : inputValue, 0, 'k-input-fake', null, null, fakeRef) : undefined], 0, 'k-input-wrapper')
       });