@king-design/intact 3.2.2-beta.0 → 3.3.1

package/styles/theme.ts

@@ -8,21 +8,25 @@ export function defaultTheme() {
             height: '40px',
             fontSize: '14px',
             padding: '16px',
+            margin: '16px',
         },
         default: {
             height: '32px',
             fontSize: '12px',
             padding: '12px',
+            margin: '12px',
         },
         small: {
             height: '24px',
             fontSize: '12px',
             padding: '8px',
+            margin: '8px',
         },
         mini: {
             height: '20px',
             fontSize: '12px',
             padding: '8px',
+            margin: '8px',
         },
         color: {
             primary: '#0091ea',

package/es/index.d.ts

@@ -1,63 +0,0 @@
-/*!
- * @king-design v3.2.2-beta.0
- *
- * Copyright (c) Kingsoft Cloud
- * Released under the MIT License
- *
- * Documentation available at
- * https://ksc-fe.github.io/kpc/
- */
-export { _$, localize } from './i18n';
-export { bind } from './components/utils';
-export { setTheme, theme } from './styles/theme';
-export * from './components/affix';
-export * from './components/badge';
-export * from './components/breadcrumb';
-export * from './components/button';
-export * from './components/card';
-export * from './components/carousel';
-export * from './components/cascader';
-export * from './components/checkbox';
-export * from './components/collapse';
-export * from './components/colorpicker';
-export * from './components/config';
-export * from './components/copy';
-export * from './components/datepicker';
-export * from './components/dialog';
-export * from './components/drawer';
-export * from './components/dropdown';
-export * from './components/editable';
-export * from './components/form';
-export * from './components/grid';
-export * from './components/icon';
-export * from './components/input';
-export * from './components/layout';
-export * from './components/menu';
-export * from './components/message';
-export * from './components/pagination';
-export * from './components/popover';
-export * from './components/progress';
-export * from './components/radio';
-export * from './components/rate';
-export * from './components/scrollSelect';
-export * from './components/select';
-export * from './components/skeleton';
-export * from './components/slider';
-export * from './components/spin';
-export * from './components/spinner';
-export * from './components/split';
-export * from './components/steps';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/tag';
-export * from './components/timeline';
-export * from './components/timepicker';
-export * from './components/tip';
-export * from './components/tooltip';
-export * from './components/transfer';
-export * from './components/tree';
-export * from './components/treeSelect';
-export * from './components/upload';
-export * from './components/wave';
-export declare const version = "3.2.2-beta.0";

package/es/index.js

@@ -1,65 +0,0 @@
-/*!
- * @king-design v3.2.2-beta.0
- *
- * Copyright (c) Kingsoft Cloud
- * Released under the MIT License
- *
- * Documentation available at
- * https://ksc-fe.github.io/kpc/
- */
-export { _$, localize } from './i18n';
-export { bind } from './components/utils';
-export { setTheme, theme } from './styles/theme';
-/* generate start */
-export * from './components/affix';
-export * from './components/badge';
-export * from './components/breadcrumb';
-export * from './components/button';
-export * from './components/card';
-export * from './components/carousel';
-export * from './components/cascader';
-export * from './components/checkbox';
-export * from './components/collapse';
-export * from './components/colorpicker';
-export * from './components/config';
-export * from './components/copy';
-export * from './components/datepicker';
-export * from './components/dialog';
-export * from './components/drawer';
-export * from './components/dropdown';
-export * from './components/editable';
-export * from './components/form';
-export * from './components/grid';
-export * from './components/icon';
-export * from './components/input';
-export * from './components/layout';
-export * from './components/menu';
-export * from './components/message';
-export * from './components/pagination';
-export * from './components/popover';
-export * from './components/progress';
-export * from './components/radio';
-export * from './components/rate';
-export * from './components/scrollSelect';
-export * from './components/select';
-export * from './components/skeleton';
-export * from './components/slider';
-export * from './components/spin';
-export * from './components/spinner';
-export * from './components/split';
-export * from './components/steps';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/tag';
-export * from './components/timeline';
-export * from './components/timepicker';
-export * from './components/tip';
-export * from './components/tooltip';
-export * from './components/transfer';
-export * from './components/tree';
-export * from './components/treeSelect';
-export * from './components/upload';
-export * from './components/wave';
-export var version = '3.2.2-beta.0';
-/* generate end */

package/es/packages/kpc-react/__tests__/components/cascader.spec.js

@@ -1,69 +0,0 @@
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import React, { useState } from 'react';
-import * as ReactDOM from 'react-dom';
-import { Cascader } from '../../';
-import { getElement, wait } from '../../../../test/utils';
-describe('Cascader', function () {
-  var container;
-  beforeEach(function () {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-  afterEach(function () {
-    ReactDOM.unmountComponentAtNode(container);
-    document.body.removeChild(container);
-  });
-  it('should hide all menu on selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var App, select, dropdown1, _dropdown1$querySelec, item1, dropdown2, _dropdown2$querySelec, item11;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          App = function _App() {
-            var _useState = useState([]),
-              value = _useState[0],
-              setValue = _useState[1];
-            return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Cascader, {
-              data: [{
-                value: 'a',
-                label: 'a',
-                children: [{
-                  value: 'b',
-                  label: 'b'
-                }]
-              }],
-              value: value,
-              filterable: true,
-              onChangeValue: function onChangeValue(v) {
-                setValue(v);
-              }
-            }));
-          };
-          ReactDOM.render( /*#__PURE__*/React.createElement(App, null), container);
-          select = container.querySelector('.k-cascader');
-          select.click();
-          _context.next = 6;
-          return wait();
-        case 6:
-          dropdown1 = getElement('.k-cascader-menu');
-          _dropdown1$querySelec = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec[0];
-          item1.click();
-          _context.next = 11;
-          return wait();
-        case 11:
-          dropdown2 = getElement('.k-cascader-menu');
-          _dropdown2$querySelec = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item11 = _dropdown2$querySelec[0];
-          item11.click();
-          _context.next = 16;
-          return wait(500);
-        case 16:
-          // should hide all menu
-          expect(dropdown1.style.display).to.eql('none');
-          expect(dropdown2.style.display).to.eql('none');
-        case 18:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })));
-});

package/es/packages/kpc-react/__tests__/components/dialog.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/es/packages/kpc-react/__tests__/components/dialog.spec.js

@@ -1,41 +0,0 @@
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Dialog, Icon } from '../../';
-import { getElement, wait } from '../../../../test/utils';
-describe('Dialog', function () {
-  var container;
-  beforeEach(function () {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-  afterEach(function () {
-    ReactDOM.unmountComponentAtNode(container);
-    document.body.removeChild(container);
-  });
-  it('should render vNode as content', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          Dialog.confirm({
-            content: /*#__PURE__*/React.createElement("div", null, "test"),
-            className: 'confirm-test',
-            icon: /*#__PURE__*/React.createElement(Icon, {
-              className: "test"
-            })
-          });
-          _context.next = 3;
-          return wait(100);
-        case 3:
-          expect(getElement('.confirm-test').innerHTML).to.matchSnapshot();
-          getElement('.confirm-test .k-primary').click();
-          _context.next = 7;
-          return wait(600);
-        case 7:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })));
-});

package/es/packages/kpc-react/__tests__/components/drawer.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/es/packages/kpc-react/__tests__/components/drawer.spec.js

@@ -1,214 +0,0 @@
-import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import React, { useState, useEffect } from 'react';
-import * as ReactDOM from 'react-dom';
-import { Drawer, Card, Button, Select, Option, Cascader } from '../../';
-import { Component } from 'intact-react';
-import { wait, dispatchEvent } from '../../../../test/utils';
-describe('Drawer', function () {
-  var container;
-  beforeEach(function () {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-  afterEach(function () {
-    ReactDOM.unmountComponentAtNode(container);
-    document.body.removeChild(container);
-  });
-  it('should render react element correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var Test, App;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          App = function _App() {
-            var _useState = useState(false),
-              show = _useState[0],
-              setShow = _useState[1];
-            return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
-              onClick: function onClick() {
-                return setShow(true);
-              }
-            }, "show"), /*#__PURE__*/React.createElement(Drawer, {
-              value: show,
-              mode: "destroy"
-            }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Test, null))));
-          };
-          Test = /*#__PURE__*/function (_Component) {
-            _inheritsLoose(Test, _Component);
-            function Test() {
-              return _Component.apply(this, arguments) || this;
-            }
-            var _proto = Test.prototype;
-            _proto.mounted = function mounted() {
-              expect(document.body.contains(this.refs.a));
-            };
-            return Test;
-          }(Component);
-          Test.template = "<div ref=\"a\">test</div>";
-          ReactDOM.render( /*#__PURE__*/React.createElement(App, null), container);
-        case 4:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })));
-  it('should handle event correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var click1, click2, click3, _document$querySelect, element1, element2, element3;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          click1 = sinon.spy(function () {
-            return console.log(1);
-          });
-          click2 = sinon.spy(function () {
-            return console.log(2);
-          });
-          click3 = sinon.spy(function () {
-            return console.log(3);
-          });
-          ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Drawer, {
-            value: true,
-            title: "1"
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "click",
-            onClick: click1
-          }, "click")), /*#__PURE__*/React.createElement(Drawer, {
-            value: true,
-            placement: "left",
-            title: "2",
-            onClose: function onClose() {
-              return console.log('click');
-            },
-            slotFooter: /*#__PURE__*/React.createElement(Button, {
-              onClick: function onClick(e) {
-                return console.log(1);
-              }
-            }, "click")
-          }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
-            className: "click",
-            onClick: click2
-          }, "click"))), /*#__PURE__*/React.createElement(Drawer, {
-            value: true,
-            title: "3"
-          }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
-            className: "click",
-            onClick: click3
-          }, "click"))))), container);
-          _document$querySelect = document.querySelectorAll('.click'), element1 = _document$querySelect[0], element2 = _document$querySelect[1], element3 = _document$querySelect[2];
-          dispatchEvent(element1, 'click');
-          _context2.next = 8;
-          return wait();
-        case 8:
-          expect(click1.callCount).to.eql(1);
-          dispatchEvent(element2, 'click');
-          _context2.next = 12;
-          return wait();
-        case 12:
-          expect(click2.callCount).to.eql(1);
-          dispatchEvent(element3, 'click');
-          _context2.next = 16;
-          return wait();
-        case 16:
-          expect(click3.callCount).to.eql(1);
-        case 17:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })));
-  it('$update call before mountedQueue in $receive', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var App;
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          App = function _App2() {
-            var _useState2 = useState(false),
-              state = _useState2[0],
-              setState = _useState2[1];
-            useEffect(function () {
-              setState(true);
-            }, []);
-            return /*#__PURE__*/React.createElement(Drawer, {
-              value: true,
-              mode: "destroy"
-            }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", null, "react element"), /*#__PURE__*/React.createElement(Select, {
-              container: function container(parentElement) {
-                return parentElement.closest('.k-dialog-body');
-              }
-            }, state ? /*#__PURE__*/React.createElement(Option, {
-              value: "1"
-            }, "1") : null))));
-          };
-          ReactDOM.render( /*#__PURE__*/React.createElement(App, null), container);
-          _context3.next = 4;
-          return wait();
-        case 4:
-          expect(document.querySelector('.k-dialog-body .k-select-menu').textContent).to.eql('1');
-        case 5:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  })));
-  it('reproduce #832', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-    var Test, Wrapper, App;
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          App = function _App3() {
-            var _useState4 = useState(false),
-              value = _useState4[0],
-              setValue = _useState4[1];
-            return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-              onClick: function onClick() {
-                return setValue(true);
-              },
-              className: "click"
-            }, "show"), /*#__PURE__*/React.createElement(Test, {
-              value: value
-            }));
-          };
-          Wrapper = function _Wrapper(props) {
-            return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
-              className: "test"
-            }, "a")), /*#__PURE__*/React.createElement("div", null, props.children));
-          };
-          Test = function _Test(_ref5) {
-            var value = _ref5.value;
-            var _useState3 = useState([]),
-              data = _useState3[0],
-              setData = _useState3[1];
-            useEffect(function () {
-              if (!value) return;
-              setData([{
-                value: 'beijing',
-                label: '北京',
-                children: [{
-                  value: 'haidian',
-                  label: '海淀区'
-                }, {
-                  value: 'chaoyang',
-                  label: '朝阳区'
-                }, {
-                  value: 'fengtai',
-                  label: '丰台区'
-                }]
-              }]);
-            }, [value]);
-            return /*#__PURE__*/React.createElement(Card, null, value && /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Cascader, {
-              data: data
-            })));
-          };
-          ReactDOM.render( /*#__PURE__*/React.createElement(App, null), container);
-          // const click = container.querySelector<HTMLElement>('.click')!;
-          // click.click();
-          // await wait();
-          // expect(container.querySelector<HTMLElement>('.test')).to.be.exist;
-        case 4:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  })));
-});

package/es/packages/kpc-react/__tests__/components/dropdown.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/es/packages/kpc-react/__tests__/components/dropdown.spec.js

@@ -1,124 +0,0 @@
-import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import React, { createRef } from 'react';
-import * as ReactDOM from 'react-dom';
-import { Dropdown, DropdownMenu, DropdownItem, Dialog, Layout } from '../../';
-import { getElement, wait } from '../../../../test/utils';
-import { Component } from 'intact-react';
-describe('Dropdown', function () {
-  it('should save original events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var click, container, button;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          click = sinon.spy(function () {
-            return console.log(1);
-          });
-          container = document.createElement('div');
-          document.body.appendChild(container);
-          button = /*#__PURE__*/createRef();
-          ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement("button", {
-            onClick: click,
-            ref: button
-          }, "hover"), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3")))), container);
-          button.current.click();
-          expect(click.callCount).to.eql(1);
-          _context.next = 9;
-          return wait();
-        case 9:
-          expect(getElement('.k-dropdown-menu')).to.be.exist;
-          ReactDOM.unmountComponentAtNode(container);
-          document.body.removeChild(container);
-        case 12:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })));
-  it('reproduce #764', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var _mounted, _updated, Demo, FooDialog, Foo, set, Test, container;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _mounted = sinon.spy(function () {
-            return console.log('mounted');
-          });
-          _updated = sinon.spy(function () {
-            return console.log('updated');
-          });
-          Demo = /*#__PURE__*/function (_Component) {
-            _inheritsLoose(Demo, _Component);
-            function Demo() {
-              return _Component.apply(this, arguments) || this;
-            }
-            var _proto = Demo.prototype;
-            _proto.mounted = function mounted() {
-              _mounted();
-            };
-            _proto.updated = function updated() {
-              _updated();
-            };
-            return Demo;
-          }(Component);
-          Demo.template = "<div>demo {this.get('title')}</div>";
-          FooDialog = function FooDialog() {
-            var _React$useState = React.useState({
-                title: '0'
-              }),
-              title = _React$useState[0],
-              setTitle = _React$useState[1];
-            React.useEffect(function () {
-              setTitle({
-                title: '1'
-              });
-            }, []);
-            return /*#__PURE__*/React.createElement(Dialog, {
-              title: title.title,
-              value: true
-            }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Demo, {
-              title: title.title
-            })));
-          };
-          Foo = function Foo(_ref3) {
-            var data = _ref3.data;
-            return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FooDialog, null));
-          };
-          Test = function Test() {
-            var _React$useState2 = React.useState(false),
-              isFoo = _React$useState2[0],
-              setIsFoo = _React$useState2[1];
-            var _React$useState3 = React.useState([{
-                label: 1,
-                key: 1
-              }]),
-              data = _React$useState3[0],
-              setData = _React$useState3[1];
-            set = setIsFoo;
-            return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement("div", {
-              onClick: function onClick() {
-                return setIsFoo(!isFoo);
-              }
-            }, "toggle"), isFoo ? /*#__PURE__*/React.createElement(Foo, {
-              key: "foo",
-              data: data
-            }) : /*#__PURE__*/React.createElement("div", null, "test"));
-          };
-          container = document.createElement('div');
-          document.body.appendChild(container);
-          ReactDOM.render( /*#__PURE__*/React.createElement(Test, null), container);
-          set(true);
-          _context2.next = 13;
-          return wait(0);
-        case 13:
-          expect(getElement('.k-dialog')).to.be.exist;
-          expect(_mounted.calledBefore(_updated)).to.be.true;
-          ReactDOM.unmountComponentAtNode(container);
-          document.body.removeChild(container);
-        case 17:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })));
-});

package/es/packages/kpc-react/__tests__/components/menu.spec.d.ts

@@ -1 +0,0 @@
-export {};