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

package/components/tooltip/index.spec.js

@@ -9,10 +9,11 @@ import BasicDemo from '~/components/tooltip/demos/basic';
 import PositionDemo from '~/components/tooltip/demos/position';
 import TriggerDemo from '~/components/tooltip/demos/trigger';
 import ContentDemo from '~/components/tooltip/demos/content';
-import ConfirmDemo from '~/components/tooltip/demos/confirm';
 import AlwaysDemo from '~/components/tooltip/demos/always';
 import { Tooltip } from './';
+import { Dialog } from '../dialog';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { tooltip as tooltipTheme } from './styles';
 describe('Tooltip', function () {
   afterEach(function (done) {
     unmount();
@@ -250,7 +251,7 @@ describe('Tooltip', function () {
             return wait(500);
 
           case 13:
-            content1 = getElement('.k-tooltip-content'); //  should not hide when move mouse from button to tooltip content    
+            content1 = getElement('.k-tooltip-content'); //  should not hide when move mouse from button to tooltip content
 
             expect(content1).eql(content);
             dispatchEvent(canHover, 'mouseleave');
@@ -292,81 +293,30 @@ describe('Tooltip', function () {
       }
     }, _callee5);
   })));
-  it('should handle confirm tooltip corectly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-    var _mount6, instance, element, cancelCb, okCb, content, _Array$from5, btn;
+  it('should always show tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount6, element, content;
 
     return _regeneratorRuntime.wrap(function _callee6$(_context6) {
       while (1) {
         switch (_context6.prev = _context6.next) {
           case 0:
-            _mount6 = mount(ConfirmDemo), instance = _mount6[0], element = _mount6[1];
-            cancelCb = sinon.spy();
-            okCb = sinon.spy();
-
-            instance.refs.__test.on('cancel', cancelCb);
-
-            instance.refs.__test.on('ok', okCb);
-
-            dispatchEvent(element.children[0], 'click');
-            _context6.next = 8;
-            return wait();
-
-          case 8:
-            content = getElement('.k-tooltip-content');
-            expect(content.querySelector('.k-tooltip-buttons').outerHTML).to.matchSnapshot();
-            content.querySelector('.k-btn').click();
-            _context6.next = 13;
-            return wait(500);
-
-          case 13:
-            expect(content.style.display).eql('none');
-            dispatchEvent(element.firstElementChild, 'click');
-            _context6.next = 17;
-            return wait();
-
-          case 17:
-            content = getElement('.k-tooltip-content');
-            _Array$from5 = _Array$from2(content.querySelectorAll('.k-btn')), btn = _Array$from5[1];
-            btn.click();
-            _context6.next = 22;
-            return wait(500);
-
-          case 22:
-            expect(content.style.display).eql('none');
-            expect(cancelCb.callCount).eql(1);
-            expect(okCb.callCount).eql(1);
-
-          case 25:
-          case "end":
-            return _context6.stop();
-        }
-      }
-    }, _callee6);
-  })));
-  it('should always show tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var _mount7, element, content;
-
-    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-      while (1) {
-        switch (_context7.prev = _context7.next) {
-          case 0:
-            _mount7 = mount(AlwaysDemo), element = _mount7[1];
+            _mount6 = mount(AlwaysDemo), element = _mount6[1];
             content = getElement('.k-tooltip-content');
             expect(content.textContent).eql('hello');
             document.body.click();
-            _context7.next = 6;
+            _context6.next = 6;
             return wait(500);
 
           case 6:
             expect(getElement('.k-tooltip-content')).eql(content);
             element.querySelector('span').click();
-            _context7.next = 10;
+            _context6.next = 10;
             return wait(500);
 
           case 10:
             expect(getElement('.k-tooltip-content')).eql(content);
             dispatchEvent(content, 'mouseleave');
-            _context7.next = 14;
+            _context6.next = 14;
             return wait(600);
 
           case 14:
@@ -374,10 +324,10 @@ describe('Tooltip', function () {
 
           case 15:
           case "end":
-            return _context7.stop();
+            return _context6.stop();
         }
       }
-    }, _callee7);
+    }, _callee6);
   }))); // it('should hide tooltip when v-show is false in Vue', async () => {
   //     interface IData {
   //         show: boolean
@@ -401,7 +351,7 @@ describe('Tooltip', function () {
   //     document.body.appendChild(container);
   //     const app = new Vue({
   //         render: h => h(
-  //             'Test', 
+  //             'Test',
   //             {ref: 'test'}),
   //         components: {Test},
   //     }).$mount(container);
@@ -430,7 +380,7 @@ describe('Tooltip', function () {
   //             </div>
   //         `,
   //         components: {
-  //             Tooltip:  Tooltip as any, 
+  //             Tooltip:  Tooltip as any,
   //             Radio: Radio as any,
   //         },
   //         data: {
@@ -447,18 +397,18 @@ describe('Tooltip', function () {
   //     document.body.removeChild(app.$el);
   // });
 
-  it('should hide layer when we have disabled Tooltip and also hide on next updating', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var Demo, _mount8, i, content;
+  it('should hide layer when we have disabled Tooltip and also hide on next updating', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount7, i, content;
 
-    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
       while (1) {
-        switch (_context9.prev = _context9.next) {
+        switch (_context8.prev = _context8.next) {
           case 0:
             Demo = /*#__PURE__*/function (_Component) {
               _inheritsLoose(Demo, _Component);
 
               function Demo() {
-                var _context8;
+                var _context7;
 
                 var _this;
 
@@ -466,7 +416,7 @@ describe('Tooltip', function () {
                   args[_key] = arguments[_key];
                 }
 
-                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context8 = [this]).call(_context8, args)) || this;
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context7 = [this]).call(_context7, args)) || this;
                 _this.Tooltip = Tooltip;
                 return _this;
               }
@@ -482,23 +432,23 @@ describe('Tooltip', function () {
               };
             };
 
-            _mount8 = mount(Demo), i = _mount8[0];
+            _mount7 = mount(Demo), i = _mount7[0];
             dispatchEvent(i.refs.test, 'mouseenter');
-            _context9.next = 7;
+            _context8.next = 7;
             return wait();
 
           case 7:
             content = getElement('.k-tooltip-content');
             expect(content.textContent).eql('hello');
             i.set('disabled', true);
-            _context9.next = 12;
+            _context8.next = 12;
             return wait(500);
 
           case 12:
             content = getElement('.k-tooltip-content');
             expect(content).eql(undefined);
             i.set('disabled', false);
-            _context9.next = 17;
+            _context8.next = 17;
             return wait();
 
           case 17:
@@ -507,23 +457,23 @@ describe('Tooltip', function () {
 
           case 19:
           case "end":
-            return _context9.stop();
+            return _context8.stop();
         }
       }
-    }, _callee8);
+    }, _callee7);
   })));
-  it('should not detect collison when target is not in viewport', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var Demo, _mount9, i, content;
+  it('should not detect collison when target is not in viewport', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, i, content;
 
-    return _regeneratorRuntime.wrap(function _callee9$(_context11) {
+    return _regeneratorRuntime.wrap(function _callee8$(_context10) {
       while (1) {
-        switch (_context11.prev = _context11.next) {
+        switch (_context10.prev = _context10.next) {
           case 0:
             Demo = /*#__PURE__*/function (_Component2) {
               _inheritsLoose(Demo, _Component2);
 
               function Demo() {
-                var _context10;
+                var _context9;
 
                 var _this2;
 
@@ -531,7 +481,7 @@ describe('Tooltip', function () {
                   args[_key2] = arguments[_key2];
                 }
 
-                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
                 _this2.Tooltip = Tooltip;
                 return _this2;
               }
@@ -540,8 +490,10 @@ describe('Tooltip', function () {
 
               _proto.mounted = function mounted() {
                 var element = findDomFromVNode(this.$lastInput, true);
-                var windowHeight = window.innerHeight || document.documentElement.clientHeight;
-                element.parentNode.style.height = windowHeight * 2 + "px";
+                var style = element.style;
+                style.position = 'fixed';
+                style.top = '-200px'; // const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+                // (element.parentNode as HTMLElement).style.height = `${windowHeight * 2}px`;
               };
 
               return Demo;
@@ -555,27 +507,130 @@ describe('Tooltip', function () {
               };
             };
 
-            _mount9 = mount(Demo), i = _mount9[0];
-            _context11.next = 6;
-            return wait(500);
+            _mount8 = mount(Demo), i = _mount8[0]; // await wait(500);
+            // window.scrollTo(0, 10000);
 
-          case 6:
-            window.scrollTo(0, 10000);
             i.set('show', true);
-            _context11.next = 10;
+            _context10.next = 7;
             return wait(500);
 
-          case 10:
+          case 7:
             content = getElement('.k-tooltip-content');
             console.log(content.outerHTML);
             console.log(_JSON$stringify(content.getBoundingClientRect()));
             expect(content.getBoundingClientRect().top < 0).to.be.true;
 
-          case 14:
+          case 11:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('should add className', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, instance, element, trigger, dropdown;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context11;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
+                _this3.Tooltip = Tooltip;
+                return _this3;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const Tooltip = this.Tooltip;\n                <div>\n                    <Tooltip content=\"hello\" class=\"a\">\n                        <div ref=\"test\" class=\"b\">test</div>\n                    </Tooltip>\n                </div>\n            ";
+            _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
+            trigger = instance.refs.test;
+            expect(trigger.className).to.eql('b a');
+            dispatchEvent(trigger, 'mouseenter');
+            _context12.next = 8;
+            return wait();
+
+          case 8:
+            dropdown = getElement('.k-tooltip-content');
+            expect(dropdown.classList.contains('a')).to.be.true;
+
+          case 10:
           case "end":
-            return _context11.stop();
+            return _context12.stop();
         }
       }
     }, _callee9);
   })));
+  it('should fix the width in small container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, instance, element, trigger, expecedWidth, content, width, newWidth;
+
+    return _regeneratorRuntime.wrap(function _callee10$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context13;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+                _this4.Tooltip = Tooltip;
+                _this4.Dialog = Dialog;
+                return _this4;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Tooltip, Dialog} = this;\n                <div style=\"text-align: right; position: relative; width: 350px;\">\n                    <Tooltip content=\"\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\uFF0C\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\uFF0C\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\" container={dom => dom}>\n                        <span class=\"trigger\">test</span>\n                    </Tooltip>\n                </div>\n            ";
+            _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
+            trigger = element.querySelector('.trigger');
+            expecedWidth = parseInt(tooltipTheme.maxWidth);
+            dispatchEvent(trigger, 'mouseenter');
+            _context14.next = 8;
+            return wait();
+
+          case 8:
+            content = getElement('.k-tooltip-content');
+            width = content.offsetWidth;
+            expect(width).to.eql(expecedWidth);
+            dispatchEvent(trigger, 'mouseleave');
+            _context14.next = 14;
+            return wait();
+
+          case 14:
+            dispatchEvent(trigger, 'mouseenter');
+            _context14.next = 17;
+            return wait();
+
+          case 17:
+            newWidth = content.offsetWidth;
+            expect(newWidth).to.eql(width);
+
+          case 19:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee10);
+  })));
 });

package/components/tooltip/styles.d.ts

@@ -1,4 +1,27 @@
 import '../../styles/global';
+declare const defaults: {
+    padding: string;
+    readonly color: string;
+    bgColor: string;
+    lineHeight: number;
+    maxWidth: string;
+    readonly boxShadow: string;
+    arrow: {
+        borderColor: string;
+        width: string;
+    };
+    confirm: {
+        gaps: string;
+    };
+    dark: {
+        readonly bgColor: string;
+        color: string;
+        readonly arrowBorderColor: string;
+    };
+    smallPadding: string;
+};
+export declare let tooltip: typeof defaults;
 export declare type Theme = 'dark' | 'light';
 export declare const themes: Theme[];
 export default function makeStyles(): string;
+export {};

package/components/tooltip/styles.js

@@ -43,7 +43,7 @@ var defaults = {
   },
   smallPadding: '4px'
 };
-var tooltip;
+export var tooltip;
 setDefault(function () {
   tooltip = deepDefaults(theme, {
     tooltip: defaults
@@ -81,5 +81,5 @@ export default function makeStyles() {
       var borderDirection = directionMap[direction];
       return /*#__PURE__*/css("&.k-", direction, "{border-", borderDirection, "-color:", borderColor, ";&:before{border-", borderDirection, "-color:", bgColor, ";}}");
     }), ";}}");
-  }), ".k-tooltip-buttons{padding-top:", tooltip.confirm.gaps, ";.k-btn:last-of-type{margin-left:", tooltip.confirm.gaps, ";}}&.k-small{padding:", tooltip.smallPadding, ";}}");
+  }), ".k-tooltip-footer{padding-top:", tooltip.confirm.gaps, ";.k-btn:not(:first-of-type){margin-left:", tooltip.confirm.gaps, ";}}&.k-small{padding:", tooltip.smallPadding, ";}}");
 }

package/components/tooltip/tooltip.d.ts

@@ -23,6 +23,6 @@ export declare class Tooltip<T extends TooltipProps = TooltipProps, E extends To
     static typeDefs: Required<TypeDefs<TooltipProps>>;
     static defaults: () => Partial<TooltipProps>;
     static events: Events<TooltipEvents>;
-    protected alwaysPortal: boolean;
+    show(shouldFocus?: boolean): void;
     hide(immediately: boolean): void;
 }

package/components/tooltip/tooltip.js

@@ -1,6 +1,5 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Dropdown } from '../dropdown/dropdown';
 import { _$ } from '../../i18n';
 import { themes } from './styles';
@@ -26,6 +25,7 @@ var defaults = function defaults() {
       at: 'center top',
       collision: 'flipfit'
     },
+    collison: 'flipfit',
     hoverable: false,
     always: false,
     confirm: false,
@@ -44,20 +44,20 @@ export var Tooltip = /*#__PURE__*/function (_Dropdown) {
   _inheritsLoose(Tooltip, _Dropdown);
 
   function Tooltip() {
-    var _context;
+    return _Dropdown.apply(this, arguments) || this;
+  }
 
-    var _this;
+  var _proto = Tooltip.prototype;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  _proto.show = function show(shouldFocus) {
+    if (shouldFocus === void 0) {
+      shouldFocus = false;
     }
 
-    _this = _Dropdown.call.apply(_Dropdown, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
-    _this.alwaysPortal = true;
-    return _this;
-  }
-
-  var _proto = Tooltip.prototype;
+    if (this.get('disabled')) return;
+    clearTimeout(this.timer);
+    this.set('value', true);
+  };
 
   _proto.hide = function hide(immediately) {
     if (this.get('always')) return;

package/components/transfer/index.vdt.js

@@ -8,6 +8,17 @@ import { Input } from '../input';
 import { Checkbox } from '../checkbox';
 import { Button } from '../button';
 import { Tree } from '../tree';
+import { Icon } from '../icon';
+var _$tmp0 = {
+  'className': 'k-icon-search',
+  'size': 'small'
+};
+var _$tmp1 = {
+  'className': 'k-transfer-icon k-icon-left'
+};
+var _$tmp2 = {
+  'className': 'k-transfer-icon k-icon-right'
+};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -73,7 +84,7 @@ export default function ($props, $blocks, $__proto__) {
               __$blocks = _$ex({}, $blocks);
 
           return (_$blocks['prefix'] = function ($super) {
-            return _$ce(2, 'i', null, 1, 'ion-ios-search');
+            return _$cc(Icon, _$tmp0);
           }, __$blocks['prefix'] = function ($super, data) {
             var block = $blocks['prefix'];
 
@@ -147,7 +158,7 @@ export default function ($props, $blocks, $__proto__) {
     'ev-click': remove,
     'type': 'primary',
     'size': 'large',
-    'children': _$ce(2, 'i', null, 1, 'k-transfer-icon ion-ios-arrow-left')
+    'children': _$cc(Icon, _$tmp1)
   }), _$cc(Button, {
     'circle': true,
     'icon': true,
@@ -155,7 +166,7 @@ export default function ($props, $blocks, $__proto__) {
     'ev-click': add,
     'type': 'primary',
     'size': 'large',
-    'children': _$ce(2, 'i', null, 1, 'k-transfer-icon ion-ios-arrow-right')
+    'children': _$cc(Icon, _$tmp2)
   })], 4, 'k-transfer-arrows'), Panel('right')]);
 }
 ;

package/components/types.d.ts

@@ -6,5 +6,6 @@ export interface CommonInputHTMLAttributes {
     form?: string;
     name?: string;
     required?: boolean;
+    maxlength?: string | number;
 }
 export declare type Events<T> = Record<keyof T, true>;

package/components/upload/index.spec.js

@@ -100,8 +100,7 @@ describe('Upload', function () {
 
     var upload = instance.$lastInput.children;
     upload.on('success', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var remove, dialog, _dialog$querySelector, cancel, _dialog$querySelector2, ok;
-
+      var remove, dialog, cancel, ok;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -119,7 +118,7 @@ describe('Upload', function () {
 
             case 7:
               dialog = getElement('.k-dialog');
-              _dialog$querySelector = dialog.querySelectorAll('.k-dialog-footer .k-btn'), cancel = _dialog$querySelector[1];
+              cancel = dialog.querySelector('.k-dialog-footer .k-dialog-cancel');
               cancel.click();
               _context.next = 12;
               return wait(500);
@@ -132,7 +131,7 @@ describe('Upload', function () {
 
             case 16:
               dialog = getElement('.k-dialog');
-              _dialog$querySelector2 = dialog.querySelectorAll('.k-dialog-footer .k-btn'), ok = _dialog$querySelector2[0];
+              ok = dialog.querySelector('.k-dialog-footer .k-dialog-ok');
               ok.click();
               _context.next = 21;
               return wait(500);
@@ -222,7 +221,7 @@ describe('Upload', function () {
 
             case 2:
               expect(element.innerHTML.replace(/blob:[^"]*/g, '')).to.matchSnapshot();
-              view = element.querySelector('.k-upload-overlap');
+              view = element.querySelector('.k-upload-zoom');
               view.click();
               _context3.next = 7;
               return wait();
@@ -257,7 +256,7 @@ describe('Upload', function () {
         instance = _mount4[0],
         element = _mount4[1];
 
-    var upload = instance.$lastInput.children;
+    var upload = instance.refs.instance;
     upload.on('success', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
       return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {

package/components/upload/index.vdt.js

@@ -13,20 +13,20 @@ var _$tmp0 = {
   'className': 'k-icon-upload'
 };
 var _$tmp1 = {
-  'className': 'k-icon-add-big'
+  'className': 'k-icon-add-bold'
 };
 var _$tmp2 = {
-  'className': 'k-icon-add-big',
+  'className': 'k-icon-add-bold',
   'size': 'large'
 };
 var _$tmp3 = {
   'className': 'k-upload-file-icon ion-document'
 };
 var _$tmp4 = {
-  'className': 'k-upload-status-icon ion-ios-checkmark-outline'
+  'className': 'k-upload-status-icon k-icon-success-fill'
 };
 var _$tmp5 = {
-  'className': 'k-upload-status-icon ion-ios-close-outline'
+  'className': 'k-upload-status-icon k-icon-error-fill'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _$cn2;
@@ -131,7 +131,9 @@ export default function ($props, $blocks, $__proto__) {
           'className': 'k-upload-zoom ion-ios-eye-outline',
           'size': 'large',
           'hoverable': true,
-          'ev-click': linkEvent($value, show)
+          'ev-click': function evClick() {
+            return show($value);
+          }
         }), closeBtn($value, $key)], 0, 'k-upload-overlap k-upload-icons')
       })], 4, _$cn({
         "k-upload-picture k-upload-picture-card": true,

package/components/utils.d.ts

@@ -36,4 +36,6 @@ export declare const expandAnimationCallbacks: {
 export declare function throttle<T>(fn: (arg: T) => void, time: number, doAlways?: (arg: T) => void): (arg: T) => void;
 export declare function debounce(fn: Function, time: number, immediately?: boolean): () => any;
 export declare function nextFrame(fn: () => void): void;
+export declare function selectValue(elem: HTMLInputElement | HTMLTextAreaElement): void;
+export declare function swap(list: any[], from: number, to: number): any[];
 export {};

package/components/utils.js

@@ -183,12 +183,15 @@ export function findChildren(children, callback) {
 
         if (loop(vNode)) {
           found = vNode;
-          break;
+          return true;
         }
       }
-    } else {
-      return callback(children, ++index);
+    } else if (callback(children, ++index)) {
+      found = children;
+      return true;
     }
+
+    return false;
   };
 
   loop(children);
@@ -356,4 +359,22 @@ export function nextFrame(fn) {
   requestAnimationFrame(function () {
     requestAnimationFrame(fn);
   });
+}
+export function selectValue(elem) {
+  if (elem.select) {
+    elem.select();
+  } else if (elem.setSelectionRange) {
+    // mobile safari
+    elem.focus();
+    elem.setSelectionRange(0, elem.value.length);
+  }
+}
+export function swap(list, from, to) {
+  var newList = _sliceInstanceProperty(list).call(list, 0);
+
+  var item = _spliceInstanceProperty(newList).call(newList, from, 1)[0];
+
+  _spliceInstanceProperty(newList).call(newList, to, 0, item);
+
+  return newList;
 }