@king-design/intact 3.1.0-beta.3 → 3.1.1-beta.0

package/es/components/config/index.js

@@ -1,8 +1,8 @@
 import { createContext } from '../context';
-import { EMPTY_OBJ } from 'intact';
+import { EMPTY_OBJ, Component } from 'intact';
 
 var _createContext = createContext(EMPTY_OBJ),
-    ConfigProvider = _createContext.Provider,
+    Provider = _createContext.Provider,
     ConfigConsumer = _createContext.Consumer,
     useContext = _createContext.useContext;
 
@@ -20,4 +20,5 @@ function useConfigContext() {
   };
 }
 
-export { ConfigProvider, ConfigConsumer, useConfigContext };
+export var ConfigProvider = Provider;
+export { ConfigConsumer, useConfigContext };

package/es/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 _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 _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; }
 
@@ -19,7 +19,7 @@ import { __decorate } from "tslib";
 import { Component } from 'intact';
 import { Dialog, BaseDialog } from './';
 import { bind } from '../utils';
-import { getElement, mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { getElement, mount, unmount, dispatchEvent, wait, getElements } from '../../test/utils';
 import BasicDemo from '~/components/dialog/demos/basic';
 import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
 import TerminateDemo from '~/components/dialog/demos/terminate';
@@ -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,96 @@ describe('Dialog', function () {
             return wait();
 
           case 7:
-            expect(document.body.getAttribute('style')).to.be.null;
+            style = document.body.getAttribute('style');
+            expect(style === null || style === '').to.be.true;
 
-          case 8:
+          case 9:
           case "end":
             return _context17.stop();
         }
       }
     }, _callee13);
+  })));
+  it('show nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Test, Demo, _mount14, instance, element, _getElements, dialog1, dialog2;
+
+    return _regeneratorRuntime.wrap(function _callee14$(_context20) {
+      while (1) {
+        switch (_context20.prev = _context20.next) {
+          case 0:
+            Test = /*#__PURE__*/function (_Component5) {
+              _inheritsLoose(Test, _Component5);
+
+              function Test() {
+                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;
+              }
+
+              return Test;
+            }(Component);
+
+            Test.template = "\n                const { Dialog } = this;\n                <Dialog v-model=\"value\">test</Dialog>\n            ";
+
+            Demo = /*#__PURE__*/function (_Component6) {
+              _inheritsLoose(Demo, _Component6);
+
+              function Demo() {
+                var _context19;
+
+                var _this6;
+
+                for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                  args[_key6] = arguments[_key6];
+                }
+
+                _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context19 = [this]).call(_context19, args)) || this;
+                _this6.Test = Test;
+                _this6.Dialog = Dialog;
+                return _this6;
+              }
+
+              var _proto2 = Demo.prototype;
+
+              _proto2.showTest = function showTest() {
+                this.set('testShow', true);
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Test, Dialog } = this;\n                <Dialog v-model=\"show\">\n                    <div ev-click={this.showTest}>click</div>\n                    <Test v-model=\"testShow\" /> \n                </Dialog>\n            ";
+
+            __decorate([bind], Demo.prototype, "showTest", null);
+
+            _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
+            instance.set('show', true);
+            _context20.next = 9;
+            return wait();
+
+          case 9:
+            instance.showTest();
+            _context20.next = 12;
+            return wait();
+
+          case 12:
+            _getElements = getElements('.k-dialog'), dialog1 = _getElements[0], dialog2 = _getElements[1];
+            expect(dialog2.querySelector('.k-dialog-body').textContent).to.eql('test');
+
+          case 14:
+          case "end":
+            return _context20.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/es/components/dialog/styles.js

@@ -87,7 +87,7 @@ export function makeDialogStyles(k) {
 
   return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.", k, "-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", dialog[size + "Width"], ";}");
-  }), ".", k, "-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.", k, "-dialog-title{display:inline-block;}.", k, "-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.", k, "-icon{font-size:", dialog.header.closeIconFontSize, ";}}.", k, "-dialog-body{padding:", dialog.body.padding, ";}.", k, "-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.", k, "-btn{margin-left:", dialog.footer.btnGap, ";}}");
+  }), ".", k, "-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.", k, "-dialog-title{display:inline-block;}.", k, "-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.", k, "-icon{font-size:", dialog.header.closeIconFontSize, ";}}.", k, "-dialog-body{padding:", dialog.body.padding, ";position:relative;}.", k, "-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.", k, "-btn{margin-left:", dialog.footer.btnGap, ";}}");
 }
 export function makeWrapperStyles(k) {
   //.${k}-fade-leave-active will add position absolute to the styles
@@ -97,7 +97,7 @@ export function makeWrapperStyles(k) {
 export function makeAlertStyles(k) {
   var _context2;
 
-  return /*#__PURE__*/css("&.", k, "-alert-dialog{.", k, "-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;position:relative;z-index:1;}.", k, "-dialog-header,.", k, "-dialog-footer{border:none;}.", k, "-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.", k, "-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
+  return /*#__PURE__*/css("&.", k, "-alert-dialog{.", k, "-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;z-index:1;}.", k, "-dialog-header,.", k, "-dialog-footer{border:none;}.", k, "-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.", k, "-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
     var color = type === 'error' ? theme.color.danger : type === 'confirm' ? theme.color.primary : theme.color[type];
     return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-dialog-tip-icon{color:", color, ";}}");
   }), " &:not(.", k, "-confirm){.", k, "-dialog-cancel{display:none;}}&.", k, "-with-title{.", k, "-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.", k, "-dialog-tip-icon{float:left;.", k, "-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.", k, "-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.", k, "-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";font-weight:", dialog.alert.titleFontWeight, ";}}}");

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

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/drawer/demos/basic';
 import PlacementDemo from '~/components/drawer/demos/placement';
 import overlayDemo from '~/components/drawer/demos/overlay';
-import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { mount, unmount, dispatchEvent, getElement, wait, getElements } from '../../test/utils';
 import { Component } from 'intact';
 import { Drawer } from '.';
 import { Dialog } from '../dialog';
@@ -165,7 +165,7 @@ describe('Drawer', function () {
     }, _callee4);
   })));
   it('nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-    var Demo, _mount4, instance, element;
+    var Demo, _mount4, instance, element, _getElements, dialog1, dialog2;
 
     return _regeneratorRuntime.wrap(function _callee5$(_context6) {
       while (1) {
@@ -198,9 +198,11 @@ describe('Drawer', function () {
             return wait();
 
           case 5:
-            expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+            // expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+            _getElements = getElements('.k-dialog'), dialog1 = _getElements[0], dialog2 = _getElements[1];
+            expect(dialog2.querySelector('.k-dialog-body').textContent).to.eql('Dialog');
 
-          case 6:
+          case 7:
           case "end":
             return _context6.stop();
         }

package/es/components/input/styles.js

@@ -132,7 +132,7 @@ setDefault(function () {
 export function makeStyles(k) {
   var _context;
 
-  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;border:none;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
     var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
     if (size === 'default') return sizeClassName;

package/es/components/portal.js

@@ -114,7 +114,13 @@ export var Portal = /*#__PURE__*/function (_Component) {
     if (!this.container) {
       if (this.$senior instanceof BaseDialog) {
         // Dialog and Drawer must be inserted into document.body
-        this.container = document.body;
+        // this.container = document.body;
+
+        /**
+         * @Modify https://github.com/ksc-fe/kpc/issues/915
+         * shoud insert to parent .k-dialog-wrapper to show nested dialog in Vue
+         */
+        this.container = parentDom.closest("." + this.config.k + "-dialog-wrapper") || document.body;
       } else {
         // find the closest dialog if exists
         this.container = parentDom.closest("." + this.config.k + "-dialog") || document.body;

package/es/components/table/exportTable.d.ts

@@ -1,3 +1,4 @@
 import { ComponentClass } from 'intact';
 import type { useColumns } from './useColumns';
 export declare function exportTable(getData: ReturnType<typeof useColumns>['getData'], data: any[] | undefined, childrenKey: string | undefined, parentComponet: ComponentClass, filename: string): Promise<string>;
+export declare function download(content: string, filename: string): void;

package/es/components/table/exportTable.js

@@ -1,6 +1,7 @@
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _URL from "@babel/runtime-corejs3/core-js/url";
 import { findDomFromVNode, createVNode as h, mount } from 'intact';
 import { loopDataWithChildrenKey } from './useTree';
 import { get, noop, isNullOrUndefined } from 'intact-shared';
@@ -10,17 +11,12 @@ export function exportTable(_x, _x2, _x3, _x4, _x5) {
 
 function _exportTable() {
   _exportTable = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(getData, data, childrenKey, parentComponet, filename) {
-    var download, collection, _getData, columns, cols, content;
+    var collection, _getData, columns, cols, content;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _context.next = 2;
-            return import('downloadjs');
-
-          case 2:
-            download = _context.sent.default;
             collection = [];
             _getData = getData(), columns = _getData.columns, cols = _getData.cols; // head
 
@@ -60,10 +56,10 @@ function _exportTable() {
               collection.push(rows.join(','));
             }, false);
             content = collection.join('\r\n');
-            download("\uFEFF" + content, filename + '.csv', 'text/comma-separated-values;charset=utf-8');
+            download(content, filename + '.csv');
             return _context.abrupt("return", content);
 
-          case 10:
+          case 7:
           case "end":
             return _context.stop();
         }
@@ -77,4 +73,33 @@ function pushTextContext(rows, dom, content) {
   var text = isNullOrUndefined(content) ? dom.textContent : content;
   text = '"' + String(_trimInstanceProperty(text).call(text)).replace(/"/g, '""') + '"';
   rows.push(text);
+}
+
+export function download(content, filename) {
+  if (navigator.msSaveBlob) {
+    // IE10+
+    var blob = new Blob([content], {
+      type: 'text/csv;charset=utf-8'
+    });
+    navigator.msSaveBlob(blob, filename);
+  } else {
+    var link = document.createElement('a');
+
+    if ('download' in link) {
+      var _blob = new Blob([content], {
+        type: 'text/csv;charset=utf-8'
+      });
+
+      var url = _URL.createObjectURL(_blob);
+
+      link.setAttribute('href', url);
+      link.setAttribute('download', filename);
+      link.style.display = 'none';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else {
+      window.open("data:text/csv,charset=utf-8,%EF%BB%BF" + encodeURI(content));
+    }
+  }
 }

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

@@ -24,6 +24,7 @@ import DraggableTable from '~/components/table/demos/draggable';
 import MergeCellDemo from '~/components/table/demos/mergeCell';
 import { AllCheckedStatus } from './useChecked';
 import PaginationDemo from '~/components/table/demos/pagination';
+import { download } from './exportTable';
 describe('Table', function () {
   afterEach(function () {
     unmount();
@@ -682,7 +683,7 @@ describe('Table', function () {
     }, _callee13);
   })));
   it('export', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-    var _mount15, instance, element, content, content1;
+    var _mount15, instance, element, content, content1, csv;
 
     return _regeneratorRuntime.wrap(function _callee14$(_context14) {
       while (1) {
@@ -705,9 +706,13 @@ describe('Table', function () {
 
           case 8:
             content1 = _context14.sent;
-            expect(content1.replace(/\r\n|\r/g, '\n')).to.matchSnapshot();
+            expect(content1.replace(/\r\n|\r/g, '\n')).to.matchSnapshot(); // it will be error codes if downloadjs exports below contents
+            // use custom download function instead
 
-          case 10:
+            csv = '"镜像名称","系统大小","镜像类型","状态","操作系统","创建时间","是否支持快速开机","可用区","镜像描述","关联快照"\r\n"a12321","20GB","普通镜像","错误 详情","centos-7","2023-11-23 15:54:10","否","--","--","q"';
+            download(csv, 'test.csv');
+
+          case 12:
           case "end":
             return _context14.stop();
         }

package/es/components/table/styles.js

@@ -89,7 +89,8 @@ var defaults = {
 
   // tree
   arrow: {
-    gap: "4px"
+    gap: "4px",
+    width: "16px"
   },
   resizeWidth: "5px",
   draggingOpacity: ".4"
@@ -102,7 +103,7 @@ setDefault(function () {
   }).table;
 });
 export function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
   }), ">.", k, "-pagination{margin:16px 0;}");
 }

package/es/components/tree/useExpanded.js

@@ -10,8 +10,23 @@ export function useExpanded(getNodes) {
     expandedKeys = new _Set(v);
   });
   onBeforeMount(function () {
-    if (instance.get('defaultExpandAll')) {
-      expandAll();
+    /**
+     * change the behavior
+     * if the data is undefined, we expand all keys after we received data
+     */
+    var _instance$get = instance.get(),
+        defaultExpandAll = _instance$get.defaultExpandAll,
+        data = _instance$get.data;
+
+    if (defaultExpandAll) {
+      if (data && data.length) {
+        expandAll();
+      } else {
+        instance.on("$receive:data", function cb() {
+          expandAll();
+          instance.off("$receive:data", cb);
+        });
+      }
     }
   });
 
@@ -21,13 +36,13 @@ export function useExpanded(getNodes) {
 
   function _toggle() {
     _toggle = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
-      var _instance$get2, load, key, expanded;
+      var _instance$get3, load, key, expanded;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _instance$get2 = instance.get(), load = _instance$get2.load;
+              _instance$get3 = instance.get(), load = _instance$get3.load;
               key = node.key;
               expanded = expandedKeys.has(key);
 
@@ -64,8 +79,8 @@ export function useExpanded(getNodes) {
   }
 
   function expandAll() {
-    var _instance$get = instance.get(),
-        load = _instance$get.load;
+    var _instance$get2 = instance.get(),
+        load = _instance$get2.load;
 
     var loop = function loop(nodes) {
       for (var i = 0; i < nodes.length; i++) {

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

@@ -2,7 +2,8 @@ import { Component, TypeDefs } from 'intact';
 import { UploadFileStatus } from './useUpload';
 import type { RequestError } from './ajaxUploader';
 import type { Events } from '../types';
-export type { RequestError, UploadFileStatus };
+export type { RequestError };
+export { UploadFileStatus };
 export interface UploadProps {
     accept?: string;
     files?: UploadFile[];
@@ -33,13 +34,13 @@ export interface UploadBlocks {
     tip: null;
 }
 export declare type UploadFile = {
-    status: UploadFileStatus;
+    status?: UploadFileStatus;
     type?: string;
     size?: number;
     name: string;
-    percent: number;
-    uid: number;
-    raw: File | Partial<UploadFile>;
+    percent?: number;
+    uid?: number | string;
+    raw?: File | Partial<UploadFile>;
     url?: string;
     request?: any;
 };

package/es/components/upload/index.js

@@ -10,6 +10,7 @@ import { bind } from '../utils';
 import { useDrag } from './useDrag';
 import { useShowImage } from './useShowImage';
 import { useConfigContext } from '../config';
+export { UploadFileStatus };
 var typeDefs = {
   accept: String,
   files: Array,

package/es/components/upload/useFiles.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _URL from "@babel/runtime-corejs3/core-js/url";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
@@ -20,20 +22,22 @@ export function useFiles(isValidType, upload) {
     var _files = _sliceInstanceProperty(files).call(files, 0);
 
     if (defaultFiles) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn("'defaultFiles' is deprecated, use 'files' instead for reactive updating.");
+      }
+
       defaultFiles.forEach(function (file) {
-        _files.push({
-          status: UploadFileStatus.Done,
-          name: file.name,
-          percent: 100,
-          uid: uid++,
-          raw: file,
-          url: file.url
-        });
+        _files.push(normalizeFile(file));
       });
       instance.set('files', _files);
     }
   }
 
+  instance.on("$receive:files", function (files) {
+    if (!files) return;
+    instance.set('files', _mapInstanceProperty(files).call(files, normalizeFile));
+  });
+
   function addFiles(_x) {
     return _addFiles.apply(this, arguments);
   }
@@ -205,4 +209,13 @@ export function useFiles(isValidType, upload) {
     addFiles: addFiles,
     removeFile: removeFile
   };
+}
+
+function normalizeFile(file) {
+  return _extends({
+    status: UploadFileStatus.Done,
+    percent: 100,
+    uid: uid++,
+    raw: file
+  }, file);
 }

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.0-beta.3
+ * @king-design v3.1.1-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -60,4 +60,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.1.0-beta.3";
+export declare const version = "3.1.1-beta.0";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.0-beta.3
+ * @king-design v3.1.1-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,5 +62,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.1.0-beta.3';
+export var version = '3.1.1-beta.0';
 /* generate end */

package/es/site/data/components/config/demos/basic/index.d.ts

@@ -0,0 +1,5 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+}

package/es/site/data/components/config/demos/basic/index.js

@@ -0,0 +1,17 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/config/demos/basic/react.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default class Demo extends React.Component {
+    render(): JSX.Element;
+}

package/es/site/data/components/config/demos/basic/react.js

@@ -0,0 +1,29 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import React from 'react';
+import { ConfigProvider, Button, Input } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(ConfigProvider, {
+      value: {
+        classNamePrefix: 'kd'
+      }
+    }, /*#__PURE__*/React.createElement(Button, null, "Button"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "8px"
+      }
+    }, /*#__PURE__*/React.createElement(Input, null)));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };