@king-design/vue 3.1.2 → 3.1.3

package/__tests__/components/upload.spec.ts

@@ -0,0 +1,39 @@
+import {createApp, render, defineComponent, ref} from 'vue';
+import {mount, unmount, dispatchEvent, getElement, wait} from '@/test/utils';
+import {Upload} from '../../';
+
+describe('Upload', () => {
+    it('should handle bi-directional data binding for files', async () => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const test = shouldNotWarn():
+        const Demo = defineComponent({
+            setup() {
+                const files = ref([]);
+                return { files };
+            },
+            components: { Upload },
+            template: `<Upload v-model:files="files" :autoUpload="false" />{{ files }}`
+        });
+        const vue = createApp({
+            template: `<Demo /> `,
+            components: { Demo },
+        }).mount(container);
+
+        await wait();
+        test();
+
+        render(null, container);
+        document.body.removeChild(container);
+    });
+});
+
+function shouldNotWarn() {
+    const warn = console.warn;
+    const spy = sinon.spy((...args: any[]) => warn.apply(console, args));
+    console.warn = spy;
+    return () => {
+        expect(spy.callCount).to.eql(0);
+        console.warn = warn;
+    }
+}

package/components/collapse/item.vdt.js

@@ -27,7 +27,7 @@ export default function ($props, $blocks, $__proto__) {
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-collapse-item"] = true, _classNameObj[makeItemStyles(k)] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = isActive, _classNameObj[k + "-disabled"] = disabled, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [_$ce(2, 'div', [(_$blocks['title'] = function ($super) {
+  }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', (_$blocks['title'] = function ($super) {
     return title;
   }, __$blocks['title'] = function ($super, data) {
     var block = $blocks['title'];
@@ -37,11 +37,11 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['title'](_$no)), _$cc(Icon, {
+  }, __$blocks['title'](_$no)), 0, _$cn(k + "-collapse-title-wrapper")), _$cc(Icon, {
     'className': _$cn((_$cn2 = {}, _$cn2[k + "-collapse-arrow"] = true, _$cn2[k + "-icon-right"] = true, _$cn2)),
     'hoverable': true,
     'disabled': disabled
-  })], 0, _$cn(k + "-collapse-title"), {
+  })], 4, _$cn(k + "-collapse-title"), {
     'ev-click': this.toggle
   }), _$cc(Transition, _extends({
     'show': isActive

package/components/collapse/styles.js

@@ -9,7 +9,6 @@ var defaults = {
   },
 
   fontSize: '12px',
-  titleMarginRight: '8px',
   borderPadding: '0 24px',
   collBorder: '1px solid #eee',
 
@@ -19,7 +18,8 @@ var defaults = {
 
   item: {
     borderBottom: '1px solid #e5e5e5',
-    titleHeight: '40px'
+    titleHeight: '40px',
+    titleGap: '8px'
   }
 };
 var collapse;
@@ -31,9 +31,9 @@ setDefault(function () {
   makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{.", k, "-collapse-arrow{float:left;margin-right:", collapse.titleMarginRight, ";}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{>.", k, "-collapse-item>.", k, "-collapse-title{flex-direction:row-reverse;}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 });
 export var makeItemStyles = cache(function makeItemStyles(k) {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";display:flex;align-items:center;gap:", collapseItem.titleGap, ";.", k, "-collapse-title-wrapper{flex:1;}.", k, "-collapse-arrow{transition:transform ", collapse.transition, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
 });

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 _context21; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context21 = Object.prototype.toString.call(o)).call(_context21, 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 _context23; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context23 = Object.prototype.toString.call(o)).call(_context23, 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; }
 
@@ -732,6 +732,66 @@ describe('Dialog', function () {
         }
       }
     }, _callee14);
+  })));
+  it('should update position when change container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var Demo, _mount15, instance, element, dialogDom, style;
+
+    return _regeneratorRuntime.wrap(function _callee15$(_context22) {
+      while (1) {
+        switch (_context22.prev = _context22.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component7) {
+              _inheritsLoose(Demo, _Component7);
+
+              function Demo() {
+                var _context21;
+
+                var _this7;
+
+                for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                  args[_key7] = arguments[_key7];
+                }
+
+                _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
+                _this7.Dialog = Dialog;
+                return _this7;
+              }
+
+              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            ";
+            _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+            _context22.next = 5;
+            return wait();
+
+          case 5:
+            instance.set('container', undefined);
+            _context22.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 _context22.stop();
+        }
+      }
+    }, _callee15);
   }))); // 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/usePosition.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 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();
@@ -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) && isEqualObject(newValue, 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/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';
@@ -51,7 +51,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);
 
@@ -97,7 +99,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);
   };
@@ -109,6 +118,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/upload/useFiles.js

@@ -9,6 +9,7 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
 import { useInstance } from 'intact-vue-next';
 import { _$ } from '../../i18n';
 import { UploadFileStatus } from './useUpload';
+import { isEqualArray } from '../utils';
 var uid = 0;
 export function useFiles(isValidType, upload) {
   var instance = useInstance();
@@ -33,8 +34,8 @@ export function useFiles(isValidType, upload) {
     }
   }
 
-  instance.on("$receive:files", function (files) {
-    if (!files) return;
+  instance.on("$receive:files", function (files, oldFiles) {
+    if (!files || isEqualArray(files, oldFiles)) return;
     instance.set('files', _mapInstanceProperty(files).call(files, normalizeFile));
   });
 

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/vue",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "King-Design UI components for Vue3.0.",
   "keywords": [
     "component",
@@ -37,7 +37,7 @@
     "@emotion/css": "^11.5.0",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
-    "intact-vue-next": "3.0.23",
+    "intact-vue-next": "3.0.24",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",

package/styles/global.js

@@ -10,8 +10,13 @@ var slideDirections = {
   up: 'center bottom 0',
   left: 'right center 0',
   right: 'left center 0'
-}; // TODO: update global when theme changed
+};
 
-injectGlobal("html{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}::-webkit-scrollbar{width:10px;height:10px;background-color:#fff;}::-webkit-scrollbar-track{background-color:#fff;}::-webkit-scrollbar-thumb{background-color:#babac0;border-radius:16px;border:2px solid #fff;&:hover{background-color:#a0a0a5;}}::-webkit-scroll-button{display:none;}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
+if (!/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+  document.body.classList.add('k-customize-scrollbar');
+} // TODO: update global when theme changed
+
+
+injectGlobal("html{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}.k-customize-scrollbar{&::-webkit-scrollbar,*::-webkit-scrollbar{width:10px;height:10px;background-color:#fff;}&::-webkit-scrollbar-track,*::-webkit-scrollbar-track{background-color:#fff;}&::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb{background-color:#babac0;border-radius:16px;border:2px solid #fff;&:hover{background-color:#a0a0a5;}}&::-webkit-scroll-button,*::-webkit-scroll-button{display:none;}}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
   return /*#__PURE__*/css(".k-slide", direction, "-enter-from,.k-slide", direction, "-leave-to{transform-origin:", slideDirections[direction], ";opacity:0;transform:", direction === 'down' || direction === 'up' ? "scaleY(.8)" : 'scaleX(.8)', ";}.k-slide", direction, "-enter-active,.k-slide", direction, "-leave-active{transform-origin:", slideDirections[direction], ";transition:opacity ", theme.transition.large, ",transform ", theme.transition.large, "!important;}.k-slide", direction, "-leave-active{pointer-events:none;}");
 }), " .k-fade-enter-from,.k-fade-leave-to{opacity:0!important;}.k-fade-enter-active,.k-fade-leave-active{transition:opacity ", theme.transition.large, "!important;}.k-fade-leave-active:not(tr){position:absolute;}.k-fade-move{transition:transform ", theme.transition.large, "!important;}.k-scale-enter-from,.k-scale-leave-to{transform:scale(0);}.k-scale-enter-active,.k-scale-leave-active{transition:transform ", theme.transition.large, ";}.k-expand-enter-from,.k-expand-leave-to{opacity:0;overflow:hidden;}.k-expand-enter-active,.k-expand-leave-active{transition:all ", theme.transition.large, "!important;overflow:hidden;}.k-expand-move{transition:transform ", theme.transition.large, ";}.k-dropdown-enter-from,.k-dropdown-leave-to{opacity:0;transform:translateY(-20px);}.k-dropdown-enter-active,.k-dropdown-leave-active,.k-dropdown-move{transition:all ", theme.transition.large, ";}.k-dropdown-leave-active{position:absolute!important;}.k-dropdown-move{transition:transform ", theme.transition.large, ";}.k-fade-in-left-enter-from,.k-fade-in-left-leave-to{opacity:0;transform:translate3d(-15px, 0, 0);}.k-fade-in-left-enter-active,.k-fade-in-left-leave-active{transition:all ", theme.transition.large, ";}.k-fade-in-left-move{transition:transform ", theme.transition.large, ";}.k-fade-expand-enter-from,.k-fade-expand-leave-to{opacity:0;}.k-fade-expand-enter-active,.k-fade-expand-leave-active{transition:all ", theme.transition.large, ";}.c-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.c-hidden{display:none!important;}.c-middle{display:inline-block;vertical-align:middle;}");