@king-design/react 3.0.0 → 3.0.1

package/components/dropdown/usePosition.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import { useInstance, findDomFromVNode } from 'intact-react';
 import { position } from '../position';
 import { noop } from 'intact-shared';
 import { isObject } from 'intact-shared';
+import { isEqualObject } from '../utils';
 export function usePosition() {
   var instance = useInstance();
   var positioned = {
@@ -18,7 +18,7 @@ export function usePosition() {
     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)) {
+      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) {
         return;
       }
 

package/components/form/styles.js

@@ -50,7 +50,7 @@ setDefault(function () {
   }).form;
 });
 export function makeItemStyles() {
-  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid>.k-form-content{flex:1;}.k-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-wrapper{border:none;}}.k-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
+  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid>.k-form-content{flex:1;}.k-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-wrapper{border:none;}}.k-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
 }
 export function makeFormStyles() {
   var _context;

package/components/layout/body.d.ts

@@ -2,6 +2,7 @@ import { Component } from 'intact-react';
 export declare class Body extends Component {
     static template: string | import("intact").Template<any>;
     private layout;
+    init(): void;
     private getClassNames;
     private getStyles;
 }

package/components/layout/body.js

@@ -1,8 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, inject } from 'intact-react';
+import { Component, inject, provide } from 'intact-react';
 import template from './template.vdt';
-import { LAYOUT, getStyle } from './helpers';
+import { LAYOUT, getStyle, BODY } from './helpers';
 import { addStyle } from '../utils';
 export var Body = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Body, _Component);
@@ -23,6 +23,10 @@ export var Body = /*#__PURE__*/function (_Component) {
 
   var _proto = Body.prototype;
 
+  _proto.init = function init() {
+    provide(BODY, this);
+  };
+
   _proto.getClassNames = function getClassNames() {
     var _ref;
 
@@ -45,6 +49,7 @@ export var Body = /*#__PURE__*/function (_Component) {
 
     if (!hasFixedAside && !hasFixedHeader) return style;
     return addStyle(style, {
+      // FIXME: we must use padding instead of margin, otherwise the table's width is wired
       paddingLeft: hasFixedAside ? getStyle(asideWidth) : null,
       marginTop: hasFixedHeader ? getStyle(headerHeight) : null
     });

package/components/layout/header.d.ts

@@ -5,6 +5,8 @@ export interface HeaderProps {
     height?: number | string;
     style?: string | Record<string, string>;
     theme?: MenuProps['theme'];
+    blur?: boolean;
+    boxShadow?: boolean;
 }
 export declare class Header extends Component<HeaderProps> {
     static template: string | import("intact").Template<any>;

package/components/layout/header.js

@@ -9,7 +9,9 @@ var typeDefs = {
   fixed: Boolean,
   height: [Number, String],
   style: [String, Object],
-  theme: themes
+  theme: themes,
+  blur: Boolean,
+  boxShadow: Boolean
 };
 
 var defaults = function defaults() {
@@ -44,11 +46,15 @@ export var Header = /*#__PURE__*/function (_Component) {
     var _this$get = this.get(),
         className = _this$get.className,
         fixed = _this$get.fixed,
-        theme = _this$get.theme;
+        theme = _this$get.theme,
+        blur = _this$get.blur,
+        boxShadow = _this$get.boxShadow;
 
     return _ref = {
       'k-layout-header': true,
-      'k-fixed': fixed
+      'k-fixed': fixed,
+      'k-blur': blur,
+      'k-box-shadow': boxShadow
     }, _ref["k-" + theme] = true, _ref[className] = className, _ref[makeHeaderStyles()] = true, _ref;
   };
 

package/components/layout/helpers.d.ts

@@ -1,5 +1,6 @@
 export declare const ROOT_LAYOUT = "RootLayout";
 export declare const LAYOUT = "Layout";
+export declare const BODY = "LayoutBody";
 export declare const defaultHeight = "64px";
 export declare const defaultWidth = "200px";
 export declare function getStyle(height: number | string): string;

package/components/layout/helpers.js

@@ -1,6 +1,7 @@
 import { isNumber } from 'intact-shared';
 export var ROOT_LAYOUT = 'RootLayout';
 export var LAYOUT = 'Layout';
+export var BODY = 'LayoutBody';
 export var defaultHeight = "64px";
 export var defaultWidth = "200px";
 export function getStyle(height) {

package/components/layout/index.spec.d.ts

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

package/components/layout/index.spec.js

@@ -0,0 +1,53 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { mount, unmount } from '../../test/utils';
+import { Component } from 'intact-react';
+import { Layout, Header, Aside, Body } from './';
+describe('Layout', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('nest Layout in Body with fixed header', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+                _this.Layout = Layout;
+                _this.Header = Header;
+                _this.Aside = Aside;
+                _this.Body = Body;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Layout, Header, Aside, Body } = this;\n                <Layout>\n                    <Header fixed />\n                    <Body>\n                        <Layout>\n                            <Aside fixed />\n                            <Body>body</Body>\n                        </Layout>\n                    </Body>\n                </Layout>\n            ";
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/components/layout/layout.d.ts

@@ -9,6 +9,7 @@ export declare class Layout extends Component {
         asideWidth: string | number;
     };
     layout: Layout | null;
+    private body;
     init(): void;
     private getClassNames;
     private getStyles;

package/components/layout/layout.js

@@ -4,7 +4,7 @@ import { Component, inject, provide } from 'intact-react';
 import template from './template.vdt';
 import { makeLayoutStyles } from './styles';
 import { addStyle } from '../utils';
-import { ROOT_LAYOUT, LAYOUT, getStyle } from './helpers';
+import { ROOT_LAYOUT, LAYOUT, getStyle, BODY } from './helpers';
 import { useParse } from './useParse';
 export var Layout = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Layout, _Component);
@@ -21,6 +21,7 @@ export var Layout = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.parse = useParse();
     _this.layout = inject(LAYOUT, null);
+    _this.body = inject(BODY, null);
     return _this;
   }
 
@@ -52,7 +53,7 @@ export var Layout = /*#__PURE__*/function (_Component) {
   _proto.getStyles = function getStyles() {
     var style = this.get('style');
     var layout = this.layout;
-    if (!layout) return style;
+    if (!layout || this.body) return style;
 
     var _layout$parse = layout.parse(),
         hasFixedHeader = _layout$parse.hasFixedHeader,

package/components/layout/styles.js

@@ -1,7 +1,7 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults, getLeft } from '../../styles/utils';
+import { deepDefaults, getLeft, setAlpha } from '../../styles/utils';
 import '../../styles/global';
 import { menu } from '../menu/styles';
 var sizes = ['small', 'large'];
@@ -21,7 +21,7 @@ var defaults = {
 
   light: {
     get color() {
-      return menu.light.bgColor;
+      return menu.light.item.color;
     },
 
     get bgColor() {
@@ -35,7 +35,7 @@ var defaults = {
   },
   white: {
     get color() {
-      return menu.white.bgColor;
+      return menu.white.item.color;
     },
 
     get bgColor() {
@@ -68,10 +68,10 @@ export function makeLayoutStyles() {
   return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.k-has-aside{flex-direction:row;}.k-layout-footer{padding:", layout.footerPadding, ";}.k-layout-body{flex:1;}");
 }
 export function makeHeaderStyles() {
-  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.k-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.k-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}>.k-menu{background:transparent!important;}&.k-blur{backdrop-filter:blur(20px);background:", setAlpha(layout.bgColor, 0.1), ";}&.k-box-shadow{border-bottom:none!important;box-shadow:", theme.boxShadow, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
-    return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";}");
+    return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";&.k-blur{background:", setAlpha(styles.bgColor, 0.1), ";}}");
   }), ";");
 }
 export function makeAsideStyles() {

package/components/menu/styles.js

@@ -132,9 +132,9 @@ export function makeMenuStyles() {
 }
 export function makeTitleStyles() {
   var item = menu.item;
-  return /*#__PURE__*/css("display:flex;align-items:center;padding:", menu.item.padding, ";color:", menu.item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
+  return /*#__PURE__*/css("display:flex;align-items:center;padding:", item.padding, ";color:", item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
 }
 export function makeItemStyles() {
   var item = menu.item;
-  return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;}.k-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotateX(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
+  return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}}.k-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotateX(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
 }

package/components/menu/useDropdown.js

@@ -1,4 +1,4 @@
-import { useInstance, onBeforeMount, onBeforeUpdate, inject } from 'intact-react';
+import { useInstance, onBeforeMount, onBeforeUpdate, inject, createVNode } from 'intact-react';
 import { Menu } from './';
 import { Icon } from '../icon';
 import { isComponentVNode, eachChildren, isTextVNode, isStringOrNumberNotEmpty } from '../utils';
@@ -38,6 +38,11 @@ export function useDropdown(rootMenu, parentMenu) {
           iconVNode = vNode;
         }
       } else {
+        if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
+          // wrap with span for showing text ellipsis
+          vNode = createVNode('span', null, vNode);
+        }
+
         titleVNodes.push(vNode);
       }
     });

package/components/table/index.spec.js

@@ -1141,7 +1141,7 @@ describe('Table', function () {
             table = instance.refs.table;
             pagination = table.pagination.paginationRef;
             spy = sinon.spy();
-            table.on('changePage', spy); // check all
+            table.on('page', spy); // check all
 
             table.checkAll();
             expect(table.getCheckedData()).to.have.length(10); // next page

package/components/table/row.js

@@ -3,6 +3,7 @@ import { __decorate } from "tslib";
 import { Component } from 'intact-react';
 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/table/styles.js

@@ -107,5 +107,5 @@ export function makeStyles() {
   }), ">.k-pagination{margin:16px 0;}");
 }
 export function makeGroupMenuStyles() {
-  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";min-width:", table.group.menuMinWidth, "!important;overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.k-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.k-btn{margin-left:8px;}}");
+  return /*#__PURE__*/css("min-width:", table.group.menuMinWidth, "!important;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.k-table-group-body{max-height:", table.group.menuMaxHeight, ";overflow:auto;}.k-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.k-btn{margin-left:8px;}}");
 }

package/components/table/table.d.ts

@@ -54,7 +54,7 @@ export interface TableEvents<T = any, K extends TableRowKey = number> {
     uncheckRow: [T, number, K];
     checkAll: [];
     uncheckAll: [];
-    changePage: [PaginationChangeData];
+    page: [PaginationChangeData];
 }
 export interface TableBlocks<T = unknown> {
     empty: null;

package/components/table/table.js

@@ -87,7 +87,7 @@ var events = {
   uncheckRow: true,
   checkAll: true,
   uncheckAll: true,
-  changePage: true
+  page: true
 };
 export var Table = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Table, _Component);

package/components/table/usePagination.js

@@ -68,7 +68,7 @@ export function usePagination() {
       }));
     }
 
-    instance.trigger('changePage', data);
+    instance.trigger('page', data);
   }
 
   return {

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

@@ -290,6 +290,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 v3.0.0
+ * @king-design v3.0.1
  *
  * 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 declare const version = "3.0.0";
+export declare const version = "3.0.1";
 
 
 export {normalize} from 'intact-react';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.0.0
+ * @king-design v3.0.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -61,7 +61,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.0.0';
+export var version = '3.0.1';
 /* generate end */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "King-Design UI components for React.",
   "keywords": [
     "component",
@@ -37,7 +37,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-react": "3.0.19",
+    "intact-react": "3.0.21",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",

package/styles/utils.d.ts

@@ -10,5 +10,6 @@ export declare function palette(color: string, level: number): string;
 export declare function getLeft(padding: string): string;
 export declare function getRight(padding: string): string;
 export declare function darken(color: string, number: number): string;
+export declare function setAlpha(color: string, number: number): string;
 export declare type Sizes = 'large' | 'default' | 'small' | 'mini';
 export declare const sizes: Sizes[];

package/styles/utils.js

@@ -111,4 +111,7 @@ export function getRight(padding) {
 export function darken(color, number) {
   return tinycolor(color).darken(number).toHexString();
 }
+export function setAlpha(color, number) {
+  return tinycolor(color).setAlpha(number).toRgbString();
+}
 export var sizes = ['large', 'default', 'small', 'mini'];