@king-design/intact 2.0.16 → 2.1.0

package/es/components/cascader/useLoad.js

@@ -1,7 +1,7 @@
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { useInstance } from 'intact';
-export function useLoad() {
+export function useLoad(getField) {
   var instance = useInstance();
 
   function loadData(_x) {
@@ -10,7 +10,7 @@ export function useLoad() {
 
   function _loadData() {
     _loadData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
-      var _instance$get, loadData;
+      var _instance$get, loadData, children;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -26,19 +26,21 @@ export function useLoad() {
               return _context.abrupt("return");
 
             case 3:
-              if (!(item.children && !item.children.length && !item.loaded)) {
-                _context.next = 8;
+              children = getField(item, 'children');
+
+              if (!(children && !children.length && !item.loaded)) {
+                _context.next = 9;
                 break;
               }
 
-              _context.next = 6;
+              _context.next = 7;
               return loadData(item);
 
-            case 6:
+            case 7:
               item.loaded = true;
               instance.forceUpdate();
 
-            case 8:
+            case 9:
             case "end":
               return _context.stop();
           }

package/es/components/colorpicker/index.d.ts

@@ -1,6 +1,7 @@
 import { Component, TypeDefs } from 'intact';
 import { Sizes } from '../../styles/utils';
 import { Container } from '../portal';
+import { DropdownProps } from '../dropdown';
 export interface ColorpickerProps {
     value: string;
     presets?: string[];
@@ -8,6 +9,7 @@ export interface ColorpickerProps {
     disabled?: boolean;
     container?: Container;
     show?: boolean;
+    position?: DropdownProps['position'];
 }
 export interface ColorpickerEvents {
 }

package/es/components/colorpicker/index.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import { Component } from 'intact';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
+import { Dropdown } from '../dropdown';
 var typeDefs = {
   value: {
     type: String,
@@ -11,13 +12,17 @@ var typeDefs = {
   size: sizes,
   disabled: Boolean,
   container: [Function, String],
-  show: Boolean
+  show: Boolean,
+  position: Dropdown.typeDefs.position
 };
 
 var defaults = function defaults() {
   return {
     presets: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'],
-    size: 'default'
+    size: 'default',
+    position: {
+      collision: 'fit'
+    }
   };
 };
 

package/es/components/colorpicker/index.vdt.js

@@ -19,7 +19,8 @@ export default function ($props, $blocks, $__proto__) {
       value = _this$get.value,
       size = _this$get.size,
       disabled = _this$get.disabled,
-      container = _this$get.container;
+      container = _this$get.container,
+      position = _this$get.position;
 
   var classNameObj = (_classNameObj = {
     'k-colorpicker': true
@@ -27,11 +28,7 @@ export default function ($props, $blocks, $__proto__) {
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), _$cc(Dropdown, {
-    'position': {
-      my: 'left top+8',
-      at: 'left bottom',
-      collision: 'flip'
-    },
+    'position': position,
     'trigger': 'click',
     'disabled': disabled,
     'container': container,

package/es/components/dialog/index.spec.js

@@ -243,7 +243,7 @@ describe('Dialog', function () {
             return wait(500);
 
           case 20:
-            expect(document.body.getAttribute('style')).to.be.null;
+            expect(!!document.body.getAttribute('style')).to.be.false;
 
           case 21:
           case "end":
@@ -347,7 +347,7 @@ describe('Dialog', function () {
             return wait(500);
 
           case 18:
-            expect(document.body.getAttribute('style')).to.be.null;
+            expect(!!document.body.getAttribute('style')).to.be.false;
 
           case 19:
           case "end":

package/es/components/dropdown/dropdown.d.ts

@@ -41,7 +41,6 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
             value: boolean;
         };
     };
-    protected alwaysPortal: boolean;
     private timer;
     private triggerProps;
     init(): void;

package/es/components/dropdown/dropdown.js

@@ -26,7 +26,6 @@ var typeDefs = {
 var defaults = function defaults() {
   return {
     trigger: 'hover',
-    position: {},
     of: 'self'
   };
 };
@@ -57,7 +56,6 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     _this.rootDropdown = null;
     _this.showedDropdown = null;
     _this.positionHook = usePosition();
-    _this.alwaysPortal = false;
     _this.timer = undefined;
     _this.triggerProps = null;
     return _this;
@@ -267,11 +265,10 @@ Dropdown.template = function () {
   });
   clonedTrigger.className = className;
   this.menuVNode = menu;
-  return [clonedTrigger, // wrap the root dropdown menu to Portal to render into body
-  this.alwaysPortal || !this.rootDropdown ? h(Portal, {
+  return [clonedTrigger, h(Portal, {
     children: menu,
     container: this.get('container')
-  }) : menu];
+  })];
 };
 
 __decorate([bind], Dropdown.prototype, "position", null);
@@ -288,9 +285,10 @@ function useDocumentClickForDropdown(dropdown) {
   };
 
   var _useDocumentClick = useDocumentClick(elementRef, function (e) {
-    // case 1: if click an trigger and the trigger type is hover, ignore it
-    // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
-    // case 3: if click on trigger and the trigger type is focus, do nothing 
+    // case 1: if click a trigger and its trigger type is hover, ignore it
+    // 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');
     if (trigger === 'focus') return;
     var isHover = trigger === 'hover';
@@ -305,6 +303,7 @@ function useDocumentClickForDropdown(dropdown) {
       }
     }
 
+    if (isSubDropdownElement(e.target, dropdown)) return;
     dropdown.hide(true);
   }, true),
       addDocumentClick = _useDocumentClick[0],
@@ -314,6 +313,18 @@ function useDocumentClickForDropdown(dropdown) {
   dropdown.on('hide', removeDocumentClick);
 }
 
+function isSubDropdownElement(elem, dropdown) {
+  var showedDropdown = dropdown.showedDropdown;
+  if (!showedDropdown) return false;
+  var subMenuElement = findDomFromVNode(showedDropdown.menuVNode, true);
+
+  if (containsOrEqual(subMenuElement, elem)) {
+    return true;
+  }
+
+  return isSubDropdownElement(elem, showedDropdown);
+}
+
 function useHideLastMenuOnShow(dropdown) {
   var parentDropdown = dropdown.dropdown;
   dropdown.on('show', function () {

package/es/components/dropdown/item.js

@@ -49,7 +49,9 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
   };
 
   _proto.select = function select() {
-    if (this.parentDropdown) return;
+    if (this.parentDropdown) return; // trigger select event firstly for Cascader update values
+
+    this.trigger('select');
 
     if (this.get('hideOnSelect')) {
       // hide all dropdowns
@@ -59,8 +61,6 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
         dropdown.hide(true);
       } while (dropdown = dropdown.dropdown);
     }
-
-    this.trigger('select');
   };
 
   _proto.hasSubMenu = function hasSubMenu() {

package/es/components/dropdown/menu.js

@@ -85,7 +85,7 @@ function useKeyboardForDropdownMenu(dropdown) {
   var focus = function focus() {
     return focusByIndex(0);
   }; // In Cascader the menu may have been replaced by another menu, in this case,
-  // if the dropdown has showed on mount the menu, add keydown listener
+  // if the dropdown has showed while we mounted the menu, add keydown listener
 
 
   if (dropdown.get('value')) {

package/es/components/dropdown/usePosition.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import { useInstance, findDomFromVNode } from 'intact';
 import { position } from '../position';
 import { noop } from 'intact-shared';
+import { isObject } from 'intact-shared';
 export function usePosition() {
   var instance = useInstance();
   var positioned = {
@@ -13,7 +15,12 @@ export function usePosition() {
     }
   });
   ['of', 'position'].forEach(function (item) {
-    instance.watch(item, function () {
+    instance.watch(item, function (newValue, oldValue) {
+      // return if object is the same
+      if (isObject(newValue) && isObject(oldValue) && _JSON$stringify(newValue) === _JSON$stringify(oldValue)) {
+        return;
+      }
+
       if (instance.get('value')) {
         handle(noop);
       }

package/es/components/editable/index.d.ts

@@ -22,6 +22,7 @@ export declare class Editable<V extends Value = Value> extends Component<Editabl
     static events: Events<EditableEvents<Value>>;
     private inputRef;
     private edit;
+    select(): void;
     private onBlur;
     private onKeydown;
     private setValue;

package/es/components/editable/index.js

@@ -2,7 +2,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
 import { __decorate } from "tslib";
-import { Component, createRef, nextTick } from 'intact';
+import { Component, createRef } from 'intact';
 import template from './index.vdt';
 import { _$ } from '../../i18n';
 import { bind } from '../utils';
@@ -49,12 +49,24 @@ export var Editable = /*#__PURE__*/function (_Component) {
   var _proto = Editable.prototype;
 
   _proto.edit = function edit() {
-    var _this2 = this;
-
     this.set('editing', true);
-    nextTick(function () {
-      _this2.inputRef.value.select();
-    });
+    /**
+     * Intact will update in nextTick, but Vue will call
+     * call updated method in nextTick of this nextTick
+     * so we should do it after two nextTicks
+     * https://github.com/ksc-fe/kpc/issues/847
+     *
+     * use binding this.select to Input $mounted event instead
+     */
+    // nextTick(() => {
+    // nextTick(() => {
+    // this.inputRef.value!.select();
+    // });
+    // });
+  };
+
+  _proto.select = function select() {
+    this.inputRef.value.select();
   };
 
   _proto.onBlur = function onBlur(e) {
@@ -124,6 +136,8 @@ Editable.events = events;
 
 __decorate([bind], Editable.prototype, "edit", null);
 
+__decorate([bind], Editable.prototype, "select", null);
+
 __decorate([bind], Editable.prototype, "onBlur", null);
 
 __decorate([bind], Editable.prototype, "onKeydown", null);

package/es/components/editable/index.vdt.js

@@ -40,7 +40,8 @@ export default function ($props, $blocks, $__proto__) {
     'ev-blur': this.onBlur,
     'ev-keydown': this.onKeydown,
     'ref': this.inputRef,
-    'frozenOnInput': true
+    'frozenOnInput': true,
+    'ev-$mounted': this.select
   }, null, this.inputRef), 0, 'c-ellipsis')]);
 }
 ;

package/es/components/input/index.d.ts

@@ -2,7 +2,7 @@ import { Component, TypeDefs } from 'intact';
 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,13 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     frozenOnInput?: boolean;
     inline?: boolean;
     waveDisabled?: boolean;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    showPassword?: boolean;
 }
+export declare type AutoRows = {
+    min?: number;
+    max?: number;
+};
 export interface InputEvents {
     clear: [MouseEvent];
     focus: [FocusEvent];
@@ -49,6 +55,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/es/components/input/index.js

@@ -7,6 +7,8 @@ import template from './index.vdt';
 import { bind } 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,24 @@ 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
 };
 
 var defaults = function defaults() {
   return {
     type: 'text',
     size: 'default',
-    rows: 2
+    rows: 2,
+    resize: 'vertical'
   };
 };
 
@@ -57,6 +62,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;
   }
 

package/es/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';
 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);
+  })));
 });