@king-design/vue 2.1.1 → 2.1.3

package/components/dialog/index.spec.js

@@ -7,7 +7,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { var _context18; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context18 = Object.prototype.toString.call(o)).call(_context18, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { var _context20; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context20 = Object.prototype.toString.call(o)).call(_context20, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
@@ -594,7 +594,7 @@ describe('Dialog', function () {
     }, _callee12);
   })));
   it('should remove body style when destroy', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var Demo, _mount13, instance, element;
+    var Demo, _mount13, instance, element, style;
 
     return _regeneratorRuntime.wrap(function _callee13$(_context17) {
       while (1) {
@@ -642,14 +642,75 @@ describe('Dialog', function () {
             return wait();
 
           case 7:
-            expect(document.body.getAttribute('style')).to.be.null;
+            style = document.body.getAttribute('style');
+            expect(!!style).to.be.false;
 
-          case 8:
+          case 9:
           case "end":
             return _context17.stop();
         }
       }
     }, _callee13);
+  })));
+  it('should update position when change container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Demo, _mount14, instance, element, dialogDom, style;
+
+    return _regeneratorRuntime.wrap(function _callee14$(_context19) {
+      while (1) {
+        switch (_context19.prev = _context19.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component5) {
+              _inheritsLoose(Demo, _Component5);
+
+              function Demo() {
+                var _context18;
+
+                var _this5;
+
+                for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                  args[_key5] = arguments[_key5];
+                }
+
+                _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context18 = [this]).call(_context18, args)) || this;
+                _this5.Dialog = Dialog;
+                return _this5;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  container: function container(parentDom) {
+                    return parentDom;
+                  }
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Dialog = this.Dialog;\n                <Dialog value={true} container={this.get('container')} ref=\"dialog\">test</Dialog>\n            ";
+            _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
+            _context19.next = 5;
+            return wait();
+
+          case 5:
+            instance.set('container', undefined);
+            _context19.next = 8;
+            return wait();
+
+          case 8:
+            dialogDom = instance.refs.dialog.dialogRef.value;
+            style = dialogDom.style;
+            expect(style.left).not.eql('');
+            expect(style.top).not.eql(''); // should append to body
+
+            expect(dialogDom.closest('.k-dialog-wrapper').parentElement).to.eql(document.body);
+
+          case 13:
+          case "end":
+            return _context19.stop();
+        }
+      }
+    }, _callee14);
   }))); // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
   // const Test = {
   // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,

package/components/dialog/usePosition.js

@@ -5,6 +5,13 @@ export function usePosition(elementRef) {
   var instance = useInstance();
   instance.on(SHOW, center);
   instance.on('afterClose', onAfterLeave);
+  instance.watch('container', function () {
+    if (!instance.get('value')) return;
+    center();
+  }, {
+    presented: true,
+    inited: true
+  });
 
   function center() {
     position(elementRef.value, {

package/components/dropdown/dropdown.js

@@ -28,7 +28,8 @@ var typeDefs = {
 var defaults = function defaults() {
   return {
     trigger: 'hover',
-    of: 'self'
+    of: 'self',
+    value: false
   };
 };
 

package/components/dropdown/usePosition.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import { useInstance, findDomFromVNode } from 'intact-vue-next';
 import { position } from '../position';
-import { noop } from 'intact-shared';
-import { isObject } from 'intact-shared';
+import { noop, isObject, isFunction } from 'intact-shared';
+import { isEqualObject } from '../utils';
 export function usePosition() {
   var instance = useInstance();
   var positioned = {
@@ -16,19 +15,23 @@ 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) && // is not event object
-      !(newValue instanceof Event) && _JSON$stringify(newValue) === _JSON$stringify(oldValue)) {
-        return;
-      }
-
-      if (instance.get('value')) {
-        handle(noop);
-      }
+      if (!instance.get('value') || // return if object is the same
+      isObject(newValue) && isObject(oldValue) && // is not event object
+      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) return;
+      handle(noop);
     }, {
       presented: true,
       inited: true
     });
+  }); // watch container, it is not commonly used
+
+  instance.watch('container', function (newValue, oldValue) {
+    if (!instance.get('value') || // return if function is the same. Not rigorous!
+    isFunction(newValue) && isFunction(oldValue) && newValue.toString() === oldValue.toString()) return;
+    handle(noop);
+  }, {
+    presented: true,
+    inited: true
   }); // if the dropdown is nested, we must show child after parent has positioned
 
   function p(ofElement, parentFeedback) {

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/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';
@@ -49,7 +49,9 @@ export var Portal = /*#__PURE__*/function (_Component) {
     var nextProps = nextVNode.props;
     var fakeContainer = document.createDocumentFragment();
     (mountedQueue.priority || mountedQueue).push(function () {
-      var parentDom = _this2.$lastInput.dom.parentElement;
+      var parentDom = _this2.$lastInput.dom.parentElement; // maybe the <!-- portal --> has been removed by react, #938
+
+      if (!parentDom) return;
 
       _this2.initContainer(nextProps.container, parentDom, anchor);
 
@@ -95,7 +97,14 @@ export var Portal = /*#__PURE__*/function (_Component) {
   };
 
   _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);
   };
@@ -107,6 +116,9 @@ 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) {

package/components/table/row.js

@@ -3,6 +3,7 @@ import { __decorate } from "tslib";
 import { Component } from 'intact-vue-next';
 import template from './row.vdt';
 import { bind } from '../utils';
+import { isEqualObject } from '../utils';
 export var TableRow = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TableRow, _Component);
 
@@ -21,8 +22,14 @@ export var TableRow = /*#__PURE__*/function (_Component) {
     for (key in lastProps) {
       // ignore index
       if (key === 'index') continue;
+      var lastValue = lastProps[key];
+      var nextValue = nextProps[key]; // deeply compare for offsetMap
 
-      if (lastProps[key] !== nextProps[key]) {
+      if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+        continue;
+      }
+
+      if (lastValue !== nextValue) {
         isSame = false;
         break;
       }

package/components/tooltip/index.spec.js

@@ -15,6 +15,7 @@ import { Tooltip } from './';
 import { Dialog } from '../dialog';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
 import { tooltip as tooltipTheme } from './styles';
+import { Select, Option } from '../select';
 describe('Tooltip', function () {
   afterEach(function (done) {
     unmount();
@@ -685,4 +686,60 @@ describe('Tooltip', function () {
       }
     }, _callee11);
   })));
+  it('should not impact select when wrap select with tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var Demo, _mount12, instance, element, menu;
+
+    return _regeneratorRuntime.wrap(function _callee12$(_context17) {
+      while (1) {
+        switch (_context17.prev = _context17.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component5) {
+              _inheritsLoose(Demo, _Component5);
+
+              function Demo() {
+                var _context16;
+
+                var _this5;
+
+                for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                  args[_key5] = arguments[_key5];
+                }
+
+                _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context16 = [this]).call(_context16, args)) || this;
+                _this5.Tooltip = Tooltip;
+                _this5.Select = Select;
+                _this5.Option = Option;
+                return _this5;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Tooltip, Select, Option} = this;\n                <Tooltip>\n                    <Select>\n                        <Option value=\"1\">Option 1</Option>\n                        <Option value=\"2\">Option 2</Option>\n                    </Select>\n                </Tooltip>\n            ";
+            _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
+            dispatchEvent(element, 'mouseenter');
+            _context17.next = 6;
+            return wait();
+
+          case 6:
+            dispatchEvent(element, 'click');
+            _context17.next = 9;
+            return wait();
+
+          case 9:
+            menu = getElement(".k-select-menu");
+            dispatchEvent(element, 'mouseleave');
+            _context17.next = 13;
+            return wait(500);
+
+          case 13:
+            expect(menu.style.display).to.eql('');
+
+          case 14:
+          case "end":
+            return _context17.stop();
+        }
+      }
+    }, _callee12);
+  })));
 });

package/components/tooltip/tooltip.js

@@ -64,7 +64,11 @@ export var Tooltip = /*#__PURE__*/function (_Dropdown) {
 
     if (this.get('hoverable')) {
       return _Dropdown.prototype.hide.call(this, immediately);
-    }
+    } // tooltip can show any number sub-tooltips, we should not close the showed tooltip
+    // #885
+
+
+    this.showedDropdown = null;
 
     _Dropdown.prototype.hide.call(this, true);
   };

package/components/utils.d.ts

@@ -24,6 +24,7 @@ export declare function range(start: number, end: number): number[];
 export declare function strPad(str: number | string, length: number, pad?: string): string;
 declare type EqualArrayValue = any | EqualArrayValue[];
 export declare function isEqualArray(a: EqualArrayValue, b: EqualArrayValue): boolean;
+export declare function isEqualObject(a: Record<string, any>, b: Record<string, any>): boolean;
 export declare function last<T>(arr: T[]): T | undefined;
 export declare const expandAnimationCallbacks: {
     name: string;

package/components/utils.js

@@ -287,6 +287,22 @@ export function isEqualArray(a, b) {
 
   return false;
 }
+export function isEqualObject(a, b) {
+  if (a === b) return true;
+
+  if (a && b) {
+    var keysA = _Object$keys(a);
+
+    var keysB = _Object$keys(b);
+
+    if (keysA.length !== keysB.length) return false;
+    return keysA.every(function (key) {
+      return a[key] === b[key];
+    });
+  }
+
+  return false;
+}
 export function last(arr) {
   return arr[arr.length - 1];
 }

package/components/virtual.js

@@ -82,14 +82,17 @@ export var Virtual = /*#__PURE__*/function (_Component) {
     /* vue2 vnode */
     ) {
       var data = vnode.data;
-      var on = data && data.on || EMPTY_OBJ;
+      if (!data) return props;
+      var on = data.on || EMPTY_OBJ;
       var _events = {};
 
       for (var _key2 in on) {
         _events["ev-" + _key2] = on[_key2];
       }
 
-      return _extends({}, props, _events);
+      return _extends({}, props, _events, {
+        className: data.staticClass
+      });
     }
 
     return props;

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.1.1
+ * @king-design v2.1.3
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,7 +57,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.1.1";
+export declare const version = "2.1.3";
 
 
 export {normalize} from 'intact-vue-next';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.1.1
+ * @king-design v2.1.3
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,7 +59,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.1.1';
+export var version = '2.1.3';
 /* generate end */
 
 export {normalize} from 'intact-vue-next';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/vue",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "King-Design UI components for Vue3.0.",
   "keywords": [
     "component",
@@ -38,7 +38,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-vue-next": "3.0.19",
+    "intact-vue-next": "3.0.26",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",