@king-design/vue 2.1.0 → 2.1.2

package/components/dropdown/index.spec.js

@@ -8,6 +8,7 @@ import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import BasicDemo from '~/components/dropdown/demos/basic';
 import NestedDemo from '~/components/dropdown/demos/nested';
 import ContextMenuDemo from '~/components/dropdown/demos/contextmenu';
+import TooltipDemo from '~/components/dropdown/demos/tooltip';
 describe('Dropdown', function () {
   afterEach(function (done) {
     unmount();
@@ -113,42 +114,61 @@ describe('Dropdown', function () {
     }, _callee2);
   })));
   it('nested dropdown', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var _mount3, instance, element, dropdown, _dropdown$querySelect, hoverItem, clickItem, clickSubDropdown, hoverSubDropdown;
+    var _mount3, instance, element, dropdown, _dropdown$querySelect, hoverItem, clickItem, clickSubDropdown, hoverSubDropdown, _hoverSubDropdown$que, hoverItem1, hoverSubDropdown1, _hoverSubDropdown1$qu, hoverItem2, hoverSubDropdown2;
 
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
+            this.timeout(0);
             _mount3 = mount(NestedDemo), instance = _mount3[0], element = _mount3[1];
             element.firstElementChild.click();
-            _context4.next = 4;
+            _context4.next = 5;
             return wait();
 
-          case 4:
+          case 5:
             dropdown = getElement('.k-dropdown-menu');
             _dropdown$querySelect = dropdown.querySelectorAll(':scope > .k-dropdown-item'), hoverItem = _dropdown$querySelect[3], clickItem = _dropdown$querySelect[4];
             clickItem.click();
-            _context4.next = 9;
+            _context4.next = 10;
             return wait(500);
 
-          case 9:
+          case 10:
             clickSubDropdown = getElement('.k-dropdown-menu');
             expect(clickSubDropdown.innerHTML).to.matchSnapshot(); // should hide last sub-dropdown and show next
 
             dispatchEvent(hoverItem, 'mouseenter');
-            _context4.next = 14;
+            _context4.next = 15;
             return wait(500);
 
-          case 14:
+          case 15:
             hoverSubDropdown = getElement('.k-dropdown-menu');
             expect(hoverSubDropdown.innerHTML).to.matchSnapshot();
+            _hoverSubDropdown$que = hoverSubDropdown.querySelectorAll('.k-dropdown-item'), hoverItem1 = _hoverSubDropdown$que[0];
+            dispatchEvent(hoverItem, 'mouseleave');
+            dispatchEvent(hoverItem1, 'mouseenter');
+            _context4.next = 22;
+            return wait(500);
 
-          case 16:
+          case 22:
+            hoverSubDropdown1 = getElement('.k-dropdown-menu');
+            expect(hoverSubDropdown1.textContent).to.eql('item 1item 2');
+            _hoverSubDropdown1$qu = hoverSubDropdown1.querySelectorAll('.k-dropdown-item'), hoverItem2 = _hoverSubDropdown1$qu[0];
+            dispatchEvent(hoverItem1, 'mouseleave');
+            dispatchEvent(hoverItem2, 'mouseenter');
+            _context4.next = 29;
+            return wait(1000);
+
+          case 29:
+            hoverSubDropdown2 = getElement('.k-dropdown-menu');
+            expect(hoverSubDropdown2 === hoverSubDropdown1).to.be.true;
+
+          case 31:
           case "end":
             return _context4.stop();
         }
       }
-    }, _callee3);
+    }, _callee3, this);
   })));
   it('hide on click document', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount4, instance, element;
@@ -483,7 +503,7 @@ describe('Dropdown', function () {
       }
     }, _callee9);
   })));
-  it('trigger: focus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+  it('focus trigger type', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
     var Demo, _mount9, instance;
 
     return _regeneratorRuntime.wrap(function _callee10$(_context14) {
@@ -506,39 +526,98 @@ describe('Dropdown', function () {
                 _this4.Dropdown = Dropdown;
                 _this4.DropdownItem = DropdownItem;
                 _this4.DropdownMenu = DropdownMenu;
+                _this4.onFocus = sinon.spy(function (e) {
+                  return console.log(e);
+                });
                 return _this4;
               }
 
               return Demo;
             }(Component);
 
-            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown trigger=\"focus\">\n                        <input ref=\"trigger\" />\n                        <DropdownMenu>\n                            <DropdownItem>test1</DropdownItem>\n                            <DropdownItem>test2</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown trigger=\"focus\">\n                        <input ref=\"trigger\" ev-focusin={this.onFocus} />\n                        <DropdownMenu>\n                            <DropdownItem>test1</DropdownItem>\n                            <DropdownItem>test2</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
             _mount9 = mount(Demo), instance = _mount9[0];
             dispatchEvent(instance.refs.trigger, 'focusin');
             _context14.next = 6;
             return wait(500);
 
           case 6:
-            expect(getElement('.k-dropdown-menu')).to.be.exist; // clicking anywhere should not hide menu
+            expect(getElement('.k-dropdown-menu')).to.be.exist;
+            expect(instance.onFocus.callCount).to.eql(1); // clicking anywhere should not hide menu
 
             dispatchEvent(document, 'click');
-            _context14.next = 10;
+            _context14.next = 11;
             return wait(500);
 
-          case 10:
+          case 11:
             expect(getElement('.k-dropdown-menu')).to.be.exist;
             dispatchEvent(instance.refs.trigger, 'focusout');
-            _context14.next = 14;
+            _context14.next = 15;
             return wait(700);
 
-          case 14:
+          case 15:
             expect(getElement('.k-dropdown-menu')).to.not.be.exist;
 
-          case 15:
+          case 16:
           case "end":
             return _context14.stop();
         }
       }
     }, _callee10);
   })));
+  it('wrap by tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _mount10, instance, element, dropdown, _dropdown$querySelect4, item1, item2, item3, item4;
+
+    return _regeneratorRuntime.wrap(function _callee11$(_context15) {
+      while (1) {
+        switch (_context15.prev = _context15.next) {
+          case 0:
+            _mount10 = mount(TooltipDemo), instance = _mount10[0], element = _mount10[1];
+            dispatchEvent(element.firstChild, 'mouseenter');
+            _context15.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            _dropdown$querySelect4 = dropdown.querySelectorAll('.k-dropdown-item'), item1 = _dropdown$querySelect4[0], item2 = _dropdown$querySelect4[1], item3 = _dropdown$querySelect4[2], item4 = _dropdown$querySelect4[3];
+            dispatchEvent(item1, 'mouseenter');
+            _context15.next = 9;
+            return wait();
+
+          case 9:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('item 1');
+            dispatchEvent(item1, 'mouseleave');
+            dispatchEvent(item3, 'mouseenter');
+            _context15.next = 14;
+            return wait();
+
+          case 14:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('disabled');
+            dispatchEvent(item3, 'mouseleave');
+            dispatchEvent(item4, 'mouseenter');
+            _context15.next = 19;
+            return wait();
+
+          case 19:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('This is a nested Dropdown.');
+            dispatchEvent(item4, 'click');
+            _context15.next = 23;
+            return wait();
+
+          case 23:
+            expect(getElement('.k-dropdown-menu').textContent).to.eql('item 1item 2');
+            dispatchEvent(item4, 'mouseleave');
+            _context15.next = 27;
+            return wait(800);
+
+          case 27:
+            expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+
+          case 28:
+          case "end":
+            return _context15.stop();
+        }
+      }
+    }, _callee11);
+  })));
 });

package/components/dropdown/item.d.ts

@@ -21,6 +21,6 @@ export declare class DropdownItem extends Component<DropdownItemProps, DropdownI
     private dropdownMenu;
     init(): void;
     select(): void;
-    hasSubMenu(): Dropdown<any, any, any> | undefined;
+    hasSubMenu(): undefined;
     private onClick;
 }

package/components/dropdown/item.js

@@ -5,8 +5,9 @@ import { Component, inject } from 'intact-vue-next';
 import template from './item.vdt';
 import { bind } from '../utils';
 import { useItemKeyboard } from './useKeyboard';
-import { Dropdown, DROPDOWN } from './dropdown';
+import { DROPDOWN } from './dropdown';
 import { DROPDOWN_MENU } from './menu';
+import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
 var typeDefs = {
   disabled: Boolean,
   hideOnSelect: Boolean,
@@ -64,11 +65,22 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
   };
 
   _proto.hasSubMenu = function hasSubMenu() {
-    // TODO: wrapped by Tooltip
+    // wrapped by Dropdown rather than DropdownMenu
     var parent = this.$senior;
 
-    if (parent instanceof Dropdown) {
-      return parent;
+    while (parent) {
+      // Tooltip extends Dropdown, it's also a instance of Dropdown
+      // so use constructor to detect
+      // if (parent instanceof DropdownMenu) {
+      if (parent.constructor === ExportDropdownMenu) {
+        return;
+      }
+
+      if (parent.constructor === ExportDropdown) {
+        return parent;
+      }
+
+      parent = parent.$senior;
     }
   };
 

package/components/dropdown/usePosition.js

@@ -17,7 +17,8 @@ export function usePosition() {
   ['of', 'position'].forEach(function (item) {
     instance.watch(item, function (newValue, oldValue) {
       // return if object is the same
-      if (isObject(newValue) && isObject(oldValue) && _JSON$stringify(newValue) === _JSON$stringify(oldValue)) {
+      if (isObject(newValue) && isObject(oldValue) && // is not event object
+      !(newValue instanceof Event) && _JSON$stringify(newValue) === _JSON$stringify(oldValue)) {
         return;
       }
 
@@ -67,7 +68,8 @@ export function usePosition() {
 
     position(findDomFromVNode(instance.menuVNode, true), _extends({
       my: 'left top+8',
-      at: 'left bottom'
+      at: 'left bottom',
+      collision: instance.get('collison')
     }, pos, {
       of: ofElement,
       using: function using(_feedback) {

package/components/form/index.spec.js

@@ -8,10 +8,11 @@ import BasicDemo, { data as basicDemoData } from '~/components/form/demos/basic'
 import CustomDemo from '~/components/form/demos/custom';
 import VariableDemo from '~/components/form/demos/variable';
 import RemoteDemo from '~/components/form/demos/remote';
-import { mount, dispatchEvent, wait } from '../../test/utils';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact-vue-next';
 import { Form, FormItem } from './';
 import { Input } from '../input';
+import { Select } from '../select';
 
 RemoteDemo.prototype.validateUserName = function (value) {
   // mock api
@@ -29,7 +30,9 @@ RemoteDemo.prototype.validateUserName = function (value) {
 };
 
 describe('Form', function () {
-  // afterEach(() => unmount());
+  afterEach(function () {
+    return unmount();
+  });
   it('validate', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, form, item, input;
 
@@ -1315,4 +1318,48 @@ describe('Form', function () {
       }
     }, _callee7);
   })));
+  it('should not validate when select is disabled on init', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context10;
+
+                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(_context10 = [this]).call(_context10, args)) || this;
+                _this3.Form = Form;
+                _this3.FormItem = FormItem;
+                _this3.Select = Select;
+                return _this3;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Form, FormItem, Select} = this;\n                <Form ref=\"form\">\n                    <FormItem rules={{required: true}}>\n                        <Select disabled />\n                    </FormItem>\n                </Form>\n            ";
+            _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+            _context11.next = 5;
+            return wait(500);
+
+          case 5:
+            expect(element.querySelector('.k-form-error')).to.be.null;
+
+          case 6:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee8);
+  })));
 });

package/components/menu/index.spec.js

@@ -4,6 +4,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { Component } from 'intact-vue-next';
+import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
@@ -19,24 +20,29 @@ describe('Menu', function () {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _mount = mount(CollapseDemo), instance = _mount[0], element = _mount[1];
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            _context.next = 3;
+            return wait();
+
+          case 3:
+            // shrink
             title = element.querySelector('.k-expanded .k-menu-title');
             title.click();
-            _context.next = 5;
+            _context.next = 7;
             return wait(500);
 
-          case 5:
+          case 7:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('expandedKeys')).to.eql([]);
             title.click();
-            _context.next = 10;
+            _context.next = 12;
             return wait(500);
 
-          case 10:
+          case 12:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('expandedKeys')).to.eql(['3']);
 
-          case 12:
+          case 14:
           case "end":
             return _context.stop();
         }
@@ -51,39 +57,44 @@ describe('Menu', function () {
         switch (_context2.prev = _context2.next) {
           case 0:
             _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
+            instance.set('collapse', false);
+            _context2.next = 4;
+            return wait();
+
+          case 4:
             expect(element.innerHTML).to.matchSnapshot();
             _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
             title.click();
-            _context2.next = 6;
+            _context2.next = 9;
             return wait();
 
-          case 6:
+          case 9:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('selectedKey')).to.eql('1');
             disabledTitle.click();
-            _context2.next = 11;
+            _context2.next = 14;
             return wait();
 
-          case 11:
+          case 14:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('selectedKey')).to.eql('1');
             subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
             subTitle.click();
-            _context2.next = 17;
+            _context2.next = 20;
             return wait();
 
-          case 17:
+          case 20:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('selectedKey')).to.eql('3-1'); // clear
 
             instance.set('selectedKey', '');
-            _context2.next = 22;
+            _context2.next = 25;
             return wait();
 
-          case 22:
+          case 25:
             expect(element.querySelector('.k-highlighted')).to.be.null;
 
-          case 23:
+          case 26:
           case "end":
             return _context2.stop();
         }

package/components/menu/item.d.ts

@@ -1,5 +1,6 @@
 import { Component, TypeDefs, Key } from 'intact-vue-next';
 import { Menu } from './menu';
+import { Events } from '../types';
 export interface MenuItemProps {
     key: Key;
     to?: string | object;
@@ -14,6 +15,7 @@ export declare const MENU_ITEM = "MenuItem";
 export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<MenuItemProps>>;
+    static events: Events<MenuItemEvents>;
     rootMenu: Menu<Key>;
     parentMenu: Menu<Key>;
     parentMenuItem: MenuItem | null;

package/components/menu/item.js

@@ -19,6 +19,10 @@ var typeDefs = {
   dot: Boolean,
   disabled: Boolean
 };
+var events = {
+  click: true,
+  select: true
+};
 export var MENU_ITEM = 'MenuItem';
 export var MenuItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(MenuItem, _Component);
@@ -76,5 +80,6 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
 }(Component);
 MenuItem.template = template;
 MenuItem.typeDefs = typeDefs;
+MenuItem.events = events;
 
 __decorate([bind], MenuItem.prototype, "onClick", null);

package/components/pagination/index.js

@@ -105,7 +105,10 @@ export var Pagination = /*#__PURE__*/function (_Component) {
 
     if (page > totalPages) {
       page = totalPages;
-    } else if (page < 1) {
+    } // perhaps totalPages is 0
+
+
+    if (page < 1) {
       page = 1;
     }
 

package/components/pagination/index.spec.js

@@ -1,10 +1,14 @@
+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/pagination/demos/basic';
 import GotoDemo from '~/components/pagination/demos/goto';
 import CurrentDemo from '~/components/pagination/demos/current';
 import DisableDemo from '~/components/pagination/demos/disable';
 import { mount, dispatchEvent, wait } from '../../test/utils';
+import { Component } from 'intact-vue-next';
+import { Pagination } from '.';
 describe('Pagination', function () {
   // afterEach(() => unmount());
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -167,4 +171,49 @@ describe('Pagination', function () {
       }
     }, _callee4);
   })));
+  it('should not set value to 0 when total is 0 on intialization', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount5, instance;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context5;
+
+                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(_context5 = [this]).call(_context5, args)) || this;
+                _this.Pagination = Pagination;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  page: 1
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Pagination } = this;\n                <Pagination total={0} v-model=\"page\" />\n            ";
+            _mount5 = mount(Demo), instance = _mount5[0]; // await wait();
+
+            expect(instance.get('page')).to.eql(1);
+
+          case 4:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee5);
+  })));
 });

package/components/tooltip/content.d.ts

@@ -12,6 +12,7 @@ export declare class TooltipContent extends DropdownMenu<TooltipContentProps, To
     private arrow;
     init(): void;
     private onEnter;
+    private onAfterLeave;
     protected onMouseEnter(e: MouseEvent): void;
     private ok;
     private cancel;

package/components/tooltip/content.js

@@ -5,6 +5,7 @@ import { DropdownMenu } from '../dropdown/menu';
 import template from './content.vdt';
 import { bind } from '../utils';
 import { useArrow } from './useArrow';
+import { tooltip as tooltipTheme } from './styles';
 export var TooltipContent = /*#__PURE__*/function (_DropdownMenu) {
   _inheritsLoose(TooltipContent, _DropdownMenu);
 
@@ -35,10 +36,24 @@ export var TooltipContent = /*#__PURE__*/function (_DropdownMenu) {
     });
   };
 
-  _proto.onEnter = function onEnter() {
+  _proto.onEnter = function onEnter(elem) {
+    // fix the width, https://github.com/ksc-fe/kpc/issues/873
+    var maxWidth = parseInt(tooltipTheme.maxWidth);
+    var width = elem.offsetWidth;
+
+    if (width === maxWidth) {
+      elem.style.width = width + "px";
+    }
+
     this.dropdown.position();
   };
 
+  _proto.onAfterLeave = function onAfterLeave(elem) {
+    // remove the position after leave, https://github.com/ksc-fe/kpc/issues/873
+    var style = elem.style;
+    style.left = style.top = style.width = '';
+  };
+
   _proto.onMouseEnter = function onMouseEnter(e) {
     var dropdown = this.dropdown;
 
@@ -67,6 +82,8 @@ TooltipContent.template = template;
 
 __decorate([bind], TooltipContent.prototype, "onEnter", null);
 
+__decorate([bind], TooltipContent.prototype, "onAfterLeave", null);
+
 __decorate([bind], TooltipContent.prototype, "onMouseEnter", null);
 
 __decorate([bind], TooltipContent.prototype, "ok", null);

package/components/tooltip/content.vdt.js

@@ -38,7 +38,9 @@ export default function ($props, $blocks, $__proto__) {
     'value': !!value && !this.isEmptyChildren,
     'transition': {
       name: 'k-fade',
-      onEnter: this.onEnter
+      onEnter: this.onEnter,
+      onAfterLeave: this.onAfterLeave,
+      onLeaveCancelled: this.onAfterLeave
     },
     'className': _$cn(classNameObj)
   }, function ($blocks) {