@king-design/vue 2.1.2 → 2.1.4

package/components/pagination/index.spec.js

@@ -13,206 +13,166 @@ describe('Pagination', function () {
   // afterEach(() => unmount());
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, pagination, btns, prev, next;
-
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
-            pagination = element.querySelector('.k-pagination');
-            btns = pagination.querySelectorAll('.k-btns .k-btn');
-            prev = btns[0];
-            next = btns[btns.length - 1];
-            prev.click();
-            _context.next = 8;
-            return wait();
-
-          case 8:
-            expect(pagination.innerHTML).to.matchSnapshot();
-            expect(instance.get('value1')).to.eql(1);
-            next.click();
-            next.click();
-            _context.next = 14;
-            return wait();
-
-          case 14:
-            expect(pagination.innerHTML).to.matchSnapshot();
-            expect(instance.get('value1')).to.eql(3);
-            prev.click();
-            _context.next = 19;
-            return wait();
-
-          case 19:
-            expect(pagination.innerHTML).to.matchSnapshot();
-            expect(instance.get('value1')).to.eql(2);
-            pagination.querySelector('.k-pagination-ellipsis').click();
-            _context.next = 24;
-            return wait();
-
-          case 24:
-            expect(pagination.innerHTML).to.matchSnapshot();
-            expect(instance.get('value1')).to.eql(6);
-            pagination.querySelector('.k-pagination-ellipsis').click();
-            _context.next = 29;
-            return wait();
-
-          case 29:
-            expect(pagination.innerHTML).to.matchSnapshot();
-            expect(instance.get('value1')).to.eql(2); // change limit
-
-            instance.refs.__test.set('limit', 20);
-
-            _context.next = 34;
-            return wait();
-
-          case 34:
-            expect(pagination.innerHTML).to.matchSnapshot();
-            expect(instance.get('value1')).to.eql(1);
-
-          case 36:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+          pagination = element.querySelector('.k-pagination');
+          btns = pagination.querySelectorAll('.k-btns .k-btn');
+          prev = btns[0];
+          next = btns[btns.length - 1];
+          prev.click();
+          _context.next = 8;
+          return wait();
+        case 8:
+          expect(pagination.innerHTML).to.matchSnapshot();
+          expect(instance.get('value1')).to.eql(1);
+          next.click();
+          next.click();
+          _context.next = 14;
+          return wait();
+        case 14:
+          expect(pagination.innerHTML).to.matchSnapshot();
+          expect(instance.get('value1')).to.eql(3);
+          prev.click();
+          _context.next = 19;
+          return wait();
+        case 19:
+          expect(pagination.innerHTML).to.matchSnapshot();
+          expect(instance.get('value1')).to.eql(2);
+          pagination.querySelector('.k-pagination-ellipsis').click();
+          _context.next = 24;
+          return wait();
+        case 24:
+          expect(pagination.innerHTML).to.matchSnapshot();
+          expect(instance.get('value1')).to.eql(6);
+          pagination.querySelector('.k-pagination-ellipsis').click();
+          _context.next = 29;
+          return wait();
+        case 29:
+          expect(pagination.innerHTML).to.matchSnapshot();
+          expect(instance.get('value1')).to.eql(2);
+          // change limit
+          instance.refs.__test.set('limit', 20);
+          _context.next = 34;
+          return wait();
+        case 34:
+          expect(pagination.innerHTML).to.matchSnapshot();
+          expect(instance.get('value1')).to.eql(1);
+        case 36:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   })));
   it('goto test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, element, input;
-
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _mount2 = mount(GotoDemo), instance = _mount2[0], element = _mount2[1];
-            input = element.querySelector('.k-input-inner');
-            input.value = '45';
-            dispatchEvent(input, 'change');
-            _context2.next = 6;
-            return wait();
-
-          case 6:
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(instance.get('value')).to.eql(20);
-            input.value = '-10';
-            dispatchEvent(input, 'change');
-            _context2.next = 12;
-            return wait();
-
-          case 12:
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(instance.get('value')).to.eql(1);
-
-          case 14:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _mount2 = mount(GotoDemo), instance = _mount2[0], element = _mount2[1];
+          input = element.querySelector('.k-input-inner');
+          input.value = '45';
+          dispatchEvent(input, 'change');
+          _context2.next = 6;
+          return wait();
+        case 6:
+          expect(element.innerHTML).to.matchSnapshot();
+          expect(instance.get('value')).to.eql(20);
+          input.value = '-10';
+          dispatchEvent(input, 'change');
+          _context2.next = 12;
+          return wait();
+        case 12:
+          expect(element.innerHTML).to.matchSnapshot();
+          expect(instance.get('value')).to.eql(1);
+        case 14:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2);
   })));
   it('should trigger change event once', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var fn, _mount3, instance, element;
-
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            fn = CurrentDemo.prototype._fetch2 = sinon.spy(function () {
-              instance.forceUpdate();
-            });
-            _mount3 = mount(CurrentDemo), instance = _mount3[0], element = _mount3[1];
-            instance.set('value2', 2);
-            _context3.next = 5;
-            return wait();
-
-          case 5:
-            expect(fn.callCount).to.eql(1);
-            instance.set('limit', 50);
-            _context3.next = 9;
-            return wait();
-
-          case 9:
-            expect(fn.callCount).to.eql(2);
-            expect(fn.lastCall.lastArg).to.eql({
-              value: 1,
-              limit: 50
-            });
-
-          case 11:
-          case "end":
-            return _context3.stop();
-        }
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          fn = CurrentDemo.prototype._fetch2 = sinon.spy(function () {
+            instance.forceUpdate();
+          });
+          _mount3 = mount(CurrentDemo), instance = _mount3[0], element = _mount3[1];
+          instance.set('value2', 2);
+          _context3.next = 5;
+          return wait();
+        case 5:
+          expect(fn.callCount).to.eql(1);
+          instance.set('limit', 50);
+          _context3.next = 9;
+          return wait();
+        case 9:
+          expect(fn.callCount).to.eql(2);
+          expect(fn.lastCall.lastArg).to.eql({
+            value: 1,
+            limit: 50
+          });
+        case 11:
+        case "end":
+          return _context3.stop();
       }
     }, _callee3);
   })));
   it('should not goto disabled page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount4, instance, element, input;
-
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            _mount4 = mount(DisableDemo), instance = _mount4[0], element = _mount4[1];
-            input = element.querySelector('.k-input-inner');
-            dispatchEvent(input, 'focus');
-            input.value = '11';
-            dispatchEvent(input, 'change');
-            dispatchEvent(input, 'blur');
-            _context4.next = 8;
-            return wait();
-
-          case 8:
-            expect(input.value).to.eql('10');
-            expect(instance.get('value2')).to.eql(10);
-
-          case 10:
-          case "end":
-            return _context4.stop();
-        }
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _mount4 = mount(DisableDemo), instance = _mount4[0], element = _mount4[1];
+          input = element.querySelector('.k-input-inner');
+          dispatchEvent(input, 'focus');
+          input.value = '11';
+          dispatchEvent(input, 'change');
+          dispatchEvent(input, 'blur');
+          _context4.next = 8;
+          return wait();
+        case 8:
+          expect(input.value).to.eql('10');
+          expect(instance.get('value2')).to.eql(10);
+        case 10:
+        case "end":
+          return _context4.stop();
       }
     }, _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;
+      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];
               }
-
-              Demo.defaults = function defaults() {
-                return {
-                  page: 1
-                };
+              _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();
-        }
+            };
+            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/pagination/index.vdt.js

@@ -15,52 +15,43 @@ var _$tmp1 = {
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      total = _this$get.total,
-      size = _this$get.size,
-      noBorder = _this$get.noBorder,
-      simple = _this$get.simple,
-      className = _this$get.className,
-      showTotal = _this$get.showTotal,
-      showGoto = _this$get.showGoto,
-      counts = _this$get.counts,
-      value = _this$get.value,
-      limit = _this$get.limit,
-      limits = _this$get.limits,
-      showLimits = _this$get.showLimits,
-      disableBtn = _this$get.disableBtn,
-      disablePage = _this$get.disablePage;
-
+    total = _this$get.total,
+    size = _this$get.size,
+    noBorder = _this$get.noBorder,
+    simple = _this$get.simple,
+    className = _this$get.className,
+    showTotal = _this$get.showTotal,
+    showGoto = _this$get.showGoto,
+    counts = _this$get.counts,
+    value = _this$get.value,
+    limit = _this$get.limit,
+    limits = _this$get.limits,
+    showLimits = _this$get.showLimits,
+    disableBtn = _this$get.disableBtn,
+    disablePage = _this$get.disablePage;
   if (!total) return _$ccv(' pagination ');
   var classNameObj = (_classNameObj = {
     'k-pagination': true
   }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-no-border'] = noBorder, _classNameObj['k-simple'] = simple, _classNameObj[makeStyles()] = true, _classNameObj);
   var type = 'default';
-
   if (noBorder || simple) {
     type = 'none';
   }
-
   var totalPages = Math.ceil(total / limit) || 0;
-
   var paginationButton = function paginationButton(page) {
     var disabled = false;
-
     if (page !== value) {
       if (disablePage) {
         disabled || (disabled = !!disablePage(page, limit));
       }
-
       if (disableBtn) {
         disabled || (disabled = !!disableBtn(page, limit));
       }
     }
-
     return _$cc(Button, {
       'type': type,
       'size': size,
@@ -70,7 +61,6 @@ export default function ($props, $blocks, $__proto__) {
       'children': page
     });
   };
-
   var paginationDot = function paginationDot(callback) {
     return _$cc(Button, {
       'type': type,
@@ -81,22 +71,18 @@ export default function ($props, $blocks, $__proto__) {
       'children': '...'
     });
   };
-
   var paginationItems = [];
   var minCount = Math.ceil(counts / 2);
   var maxCount = totalPages - minCount;
   var prevPage = value - 1;
   var nextPage = value + 1;
-
   if (!simple) {
     if (totalPages > counts) {
       if (value <= minCount) {
         var max = counts - 2;
-
         for (var i = 1; i <= max; i++) {
           paginationItems.push(paginationButton(i));
         }
-
         paginationItems.push(paginationDot(this.fastNext));
         paginationItems.push(paginationButton(totalPages));
       } else if (value > minCount && value <= maxCount) {
@@ -105,21 +91,16 @@ export default function ($props, $blocks, $__proto__) {
         var midCount = counts - 4;
         var mid = Math.floor(midCount / 2);
         var min = value - mid;
-
         var _max = midCount % 2 === 1 ? value + mid : value + mid - 1;
-
         for (var _i = min; _i <= _max; _i++) {
           paginationItems.push(paginationButton(_i));
         }
-
         paginationItems.push(paginationDot(this.fastNext));
         paginationItems.push(paginationButton(totalPages));
       } else {
         paginationItems.push(paginationButton(1));
         paginationItems.push(paginationDot(this.fastPrev));
-
         var _min = totalPages - counts + 3;
-
         for (var _i2 = _min; _i2 <= totalPages; _i2++) {
           paginationItems.push(paginationButton(_i2));
         }
@@ -137,7 +118,6 @@ export default function ($props, $blocks, $__proto__) {
       'ev-change': this.goto
     }), _$ce(2, 'span', [_$ct(' / '), totalPages], 0, 'k-pagination-text')];
   }
-
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [_$cc(ButtonGroup, {

package/components/pagination/styles.js

@@ -19,7 +19,6 @@ var defaults = deepDefaults({
   get fontSize() {
     return theme.default.fontSize;
   },
-
   gap: '16px',
   btn: {
     gap: '6px',
@@ -36,15 +35,12 @@ var defaults = deepDefaults({
     get fontSize() {
       return styles.fontSize;
     },
-
     get btnGap() {
       return btnGapMap[size];
     },
-
     get iconFontSize() {
       return iconFontSizeMap[size];
     }
-
   };
   return memo;
 }, {}));

package/components/portal.d.ts

@@ -2,7 +2,7 @@ import { Component, VNodeComponentClass, IntactDom, TypeDefs } from 'intact-vue-
 export interface PortalProps {
     container?: Container;
 }
-export declare type Container = string | ((parentDom: Element, anchor: IntactDom | null) => Element);
+export type Container = string | ((parentDom: Element, anchor: IntactDom | null) => Element);
 export declare class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     static template(this: Portal): import("intact").VNodeTextElement;
     static typeDefs: Required<TypeDefs<PortalProps>>;

package/components/portal.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject } from 'intact-vue-next';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, unmount, removeVNodeDom } from 'intact-vue-next';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
 import { BaseDialog } from './dialog/base';
@@ -9,16 +9,12 @@ var typeDefs = {
 };
 export var Portal = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Portal, _Component);
-
   function Portal() {
     var _context;
-
     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(_context = [this]).call(_context, args)) || this;
     _this.container = null;
     _this.dialog = inject(DIALOG, null);
@@ -27,21 +23,16 @@ export var Portal = /*#__PURE__*/function (_Component) {
     _this.$isPortal = true;
     return _this;
   }
-
   Portal.template = function template() {
     if (process.env.NODE_ENV === 'production') {
       return createTextVNode('');
     }
-
     return createCommentVNode('portal');
   };
-
   var _proto = Portal.prototype;
-
   _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue // in React, it has priority property to add some prior functions
   ) {
     var _this2 = this;
-
     /**
      * In React, we cannot render real elements in mountedQueue.
      * Because the rendering time of react element is uncontrollable
@@ -50,42 +41,33 @@ export var Portal = /*#__PURE__*/function (_Component) {
     var fakeContainer = document.createDocumentFragment();
     (mountedQueue.priority || mountedQueue).push(function () {
       var parentDom = _this2.$lastInput.dom.parentElement;
-
+      // maybe the <!-- portal --> has been removed by react, #938
+      if (!parentDom) return;
       _this2.initContainer(nextProps.container, parentDom, anchor);
-
       _this2.container.appendChild(fakeContainer);
     });
     mount(nextProps.children, fakeContainer, this, this.$SVG, null, mountedQueue);
-
     _Component.prototype.$render.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue);
   };
-
   _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
     var _this3 = this;
-
     // update container if it has changed
     var lastProps = lastVNode.props;
     var nextProps = nextVNode.props;
-
     var update = function update() {
       var lastContainer = _this3.container;
-
       if (lastProps.container !== nextProps.container) {
         _this3.initContainer(nextProps.container, parentDom, anchor);
       }
-
       var nextContainer = _this3.container;
-
       if (lastContainer === nextContainer) {
         patch(lastProps.children, nextProps.children, nextContainer, _this3, _this3.$SVG, anchor, mountedQueue, false);
       } else {
         remove(lastProps.children, lastContainer, false);
         mount(nextProps.children, nextContainer, _this3, _this3.$SVG, anchor, mountedQueue);
       }
-
       _Component.prototype.$update.call(_this3, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
     };
-
     if (!this.container) {
       // in react, sometimes $update will be called before mountedQueue in $render
       (mountedQueue.priority || mountedQueue).push(update);
@@ -93,13 +75,16 @@ export var Portal = /*#__PURE__*/function (_Component) {
       update();
     }
   };
-
   _proto.$unmount = function $unmount(vNode, nextVNode) {
-    remove(vNode.props.children, this.container, false); // removeVNodeDom(vNode.props!.children as VNode, this.container!);
-
+    var children = vNode.props.children;
+    unmount(children, null);
+    if (this.container) {
+      // maybe the <!-- portal --> has been removed by react, #938
+      // remove(children, this.container, false);
+      removeVNodeDom(children, this.container);
+    }
     _Component.prototype.$unmount.call(this, vNode, nextVNode);
   };
-
   _proto.initContainer = function initContainer(container, parentDom, anchor) {
     if (container) {
       if (isString(container)) {
@@ -107,8 +92,10 @@ export var Portal = /*#__PURE__*/function (_Component) {
       } else {
         this.container = container(parentDom, anchor);
       }
+    } else {
+      // let below logic to set container to default if container does not exist.
+      this.container = null;
     }
-
     if (!this.container) {
       if (this.$senior instanceof BaseDialog) {
         // Dialog and Drawer must be inserted into document.body
@@ -127,10 +114,8 @@ export var Portal = /*#__PURE__*/function (_Component) {
       // } else {
       // this.container = document.body;
       // }
-
     }
   };
-
   return Portal;
 }(Component);
 Portal.typeDefs = typeDefs;