npm - @king-design/intact - Versions diffs - 3.0.0 → 3.0.1 - Mend

@king-design/intact 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/components/dropdown/usePosition.ts +2 -1
package/components/form/styles.ts +1 -0
package/components/layout/body.ts +7 -2
package/components/layout/demos/aside.md +1 -1
package/components/layout/demos/basic.md +29 -9
package/components/layout/header.ts +7 -1
package/components/layout/helpers.ts +1 -0
package/components/layout/index.md +2 -0
package/components/layout/index.spec.ts +32 -0
package/components/layout/layout.ts +4 -2
package/components/layout/styles.ts +19 -3
package/components/menu/styles.ts +8 -2
package/components/menu/useDropdown.ts +5 -1
package/components/table/demos/pagination.md +6 -0
package/components/table/index.md +1 -0
package/components/table/index.spec.ts +1 -1
package/components/table/row.ts +9 -1
package/components/table/styles.ts +4 -2
package/components/table/table.ts +2 -2
package/components/table/usePagination.ts +1 -1
package/components/utils.ts +15 -0
package/components/virtual.ts +4 -2
package/es/components/dropdown/usePosition.js +2 -2
package/es/components/form/styles.js +1 -1
package/es/components/layout/body.d.ts +1 -0
package/es/components/layout/body.js +7 -2
package/es/components/layout/header.d.ts +2 -0
package/es/components/layout/header.js +9 -3
package/es/components/layout/helpers.d.ts +1 -0
package/es/components/layout/helpers.js +1 -0
package/es/components/layout/index.spec.d.ts +1 -0
package/es/components/layout/index.spec.js +53 -0
package/es/components/layout/layout.d.ts +1 -0
package/es/components/layout/layout.js +3 -2
package/es/components/layout/styles.js +5 -5
package/es/components/menu/styles.js +2 -2
package/es/components/menu/useDropdown.js +6 -1
package/es/components/table/index.spec.js +1 -1
package/es/components/table/row.js +8 -1
package/es/components/table/styles.js +1 -1
package/es/components/table/table.d.ts +1 -1
package/es/components/table/table.js +1 -1
package/es/components/table/usePagination.js +1 -1
package/es/components/utils.d.ts +1 -0
package/es/components/utils.js +16 -0
package/es/components/virtual.js +5 -2
package/es/index.d.ts +2 -2
package/es/index.js +2 -2
package/es/site/data/components/layout/demos/aside/react.js +2 -1
package/es/site/data/components/layout/demos/basic/react.js +13 -4
package/es/site/data/components/table/demos/pagination/index.d.ts +4 -0
package/es/site/data/components/table/demos/pagination/index.js +11 -2
package/es/site/data/components/table/demos/pagination/react.d.ts +4 -0
package/es/site/data/components/table/demos/pagination/react.js +11 -3
package/es/styles/utils.d.ts +1 -0
package/es/styles/utils.js +3 -0
package/index.ts +2 -2
package/package.json +3 -3
package/styles/utils.ts +5 -1
package/es/site/data/components/menu/demos/collapse/react.d.ts +0 -11
package/es/site/data/components/menu/demos/size/react.d.ts +0 -7

package/components/dropdown/usePosition.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
 import {noop} from 'intact-shared';
 import {isObject} from 'intact-shared';
+import { isEqualObject } from '../utils';
 export type FeedbackCallback = (feedback: Feedback) => void;
@@ -23,7 +24,7 @@ export function usePosition() {
                 isObject(newValue) && isObject(oldValue) &&
                 // is not event object
                 !(newValue instanceof Event) &&
-                JSON.stringify(newValue) === JSON.stringify(oldValue)
+                isEqualObject(newValue, oldValue)
             )  {
                 return;
             }

package/components/form/styles.ts CHANGED Viewed

@@ -55,6 +55,7 @@ export function makeItemStyles() {
             width: ${form.item.labelWidth};
             padding-right: ${form.item.labelGap};
             max-height: ${form.item.labelHeight};
+            flex-shrink: 0;
         }
         .k-form-star {
             color: ${form.item.starColor};

package/components/layout/body.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import {Component, inject} from 'intact';
+import {Component, inject, provide} from 'intact';
 import template from './template.vdt';
-import {LAYOUT, getStyle} from './helpers';
+import {LAYOUT, getStyle, BODY} from './helpers';
 import type {Layout} from './layout';
 import {addStyle} from '../utils';
@@ -9,6 +9,10 @@ export class Body extends Component {
     private layout = inject<Layout>(LAYOUT)!;
+    init() {
+        provide(BODY, this);
+    }
     private getClassNames() {
         const {className} = this.get();
         return {
@@ -24,6 +28,7 @@ export class Body extends 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/demos/aside.md CHANGED Viewed

@@ -47,7 +47,7 @@ import {
     </Aside>
     <Layout>
         <Header>
-            <Button type="none" size="large" style="height: 64px" ev-click={this.toggle}>
+            <Button type="none" size="large" style="height: 64px" ev-click={this.toggle} ghost>
                 <Icon class="ion-navicon" size="30"/>
             </Button>
         </Header>

package/components/layout/demos/basic.md CHANGED Viewed

@@ -21,9 +21,9 @@ import {Icon} from 'kpc';
 import {Breadcrumb, BreadcrumbItem} from 'kpc';
 <Layout class="layout">
-    <Header class="header">
+    <Header class="header" blur boxShadow theme="white" height="54px" fixed>
         <div class="logo">LOGO</div>
-        <Menu type="horizontal">
+        <Menu type="horizontal" theme="white">
             <MenuItem key="1">menu 1</MenuItem>
             <MenuItem key="2" disabled>menu 2</MenuItem>
             <MenuItem key="3">
@@ -45,7 +45,7 @@ import {Breadcrumb, BreadcrumbItem} from 'kpc';
         </Menu>
     </Header>
     <Layout>
-        <Aside theme="light">
+        <Aside theme="light" fixed>
             <Menu
                 v-model:expandedKeys="expandedKeys"
                 v-model:selectedKey="selectedKey"
@@ -74,11 +74,29 @@ import {Breadcrumb, BreadcrumbItem} from 'kpc';
             </Menu>
         </Aside>
         <Body>
-            <Breadcrumb>
-                <BreadcrumbItem>Home</BreadcrumbItem>
-                <BreadcrumbItem>Detail</BreadcrumbItem>
-            </Breadcrumb>
-            <div>content</div>
+            <div class="content">
+                <Breadcrumb>
+                    <BreadcrumbItem>Home</BreadcrumbItem>
+                    <BreadcrumbItem>Detail</BreadcrumbItem>
+                </Breadcrumb>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+            </div>
         </Body>
     </Layout>
 </Layout>
@@ -92,8 +110,10 @@ import {Breadcrumb, BreadcrumbItem} from 'kpc';
     text-align center
     background gray
     margin 0 20px
+.content
+    padding: 20px
 .k-breadcrumb
-    margin 20px 0
+    margin-bottom 20px
 ```
 ```ts

package/components/layout/header.ts CHANGED Viewed

@@ -12,6 +12,8 @@ export interface HeaderProps {
     height?: number | string
     style?: string | Record<string, string>
     theme?: MenuProps['theme']
+    blur?: boolean
+    boxShadow?: boolean
 }
 const typeDefs: Required<TypeDefs<HeaderProps>> = {
@@ -19,6 +21,8 @@ const typeDefs: Required<TypeDefs<HeaderProps>> = {
     height: [Number, String],
     style: [String, Object],
     theme: themes,
+    blur: Boolean,
+    boxShadow: Boolean,
 };
 const defaults = (): Partial<HeaderProps> => ({
@@ -34,10 +38,12 @@ export class Header extends Component<HeaderProps> {
     private rootLayout = inject<Layout>(ROOT_LAYOUT)!;
     private getClassNames() {
-        const {className, fixed, theme} = this.get();
+        const {className, fixed, theme, blur, boxShadow} = this.get();
         return {
             'k-layout-header': true,
             'k-fixed': fixed,
+            'k-blur': blur,
+            'k-box-shadow': boxShadow,
             [`k-${theme!}`]: true,
             [className as string]: className,
             [makeHeaderStyles()]: true,

package/components/layout/helpers.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import {isNumber} from 'intact-shared';
 export const ROOT_LAYOUT = 'RootLayout';
 export const LAYOUT = 'Layout';
+export const BODY = 'LayoutBody';
 export const defaultHeight = `64px`;
 export const defaultWidth = `200px`;

package/components/layout/index.md CHANGED Viewed

@@ -14,6 +14,8 @@ sidebar: doc
 | fixed | 是否固定头部 | `boolean` | `false` |
 | theme | 主题颜色 | `"dark"` &#124; `"light"` &#124; `"white"` | `"dark"` |
 | height | 高度 | `string` &#124; `number` | `"64px"` |
+| blur | 是否高斯模糊背景 | `boolean` | `false` |
+| boxShadow | 是否展示阴影 | `boolean` | `false` |
 ## Aside

package/components/layout/index.spec.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
+import { Component } from 'intact';
+import { Layout, Header, Aside, Body } from './';
+describe('Layout', () => {
+    afterEach(() => {unmount()});
+    it('nest Layout in Body with fixed header', async () => {
+        class Demo extends Component {
+            static template = `
+                const { Layout, Header, Aside, Body } = this;
+                <Layout>
+                    <Header fixed />
+                    <Body>
+                        <Layout>
+                            <Aside fixed />
+                            <Body>body</Body>
+                        </Layout>
+                    </Body>
+                </Layout>
+            `;
+            Layout = Layout;
+            Header = Header;
+            Aside = Aside;
+            Body = Body;
+        }
+        const [instance, element] = mount(Demo);
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+});

package/components/layout/layout.ts CHANGED Viewed

@@ -2,14 +2,16 @@ import {Component, TypeDefs, inject, provide} from 'intact';
 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';
+import type { Body } from './body';
 export class Layout extends Component {
     static template = template;
     public parse = useParse();
     public layout = inject<Layout | null>(LAYOUT, null);
+    private body = inject<Body | null>(BODY, null);
     init() {
         provide(LAYOUT, this);
@@ -32,7 +34,7 @@ export class Layout extends Component {
     private getStyles() {
         const style = this.get<string>('style');
         const layout = this.layout;
-        if (!layout) return style;
+        if (!layout || this.body) return style;
         const {hasFixedHeader, headerHeight, hasFixedAside, asideWidth} = layout.parse();
         if (!hasFixedHeader && !hasFixedAside) return style;

package/components/layout/styles.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 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';
@@ -12,12 +12,12 @@ const defaults = {
     get color() { return menu.item.color },
     get bgColor() { return menu.bgColor },
     light: {
-        get color() { return menu.light.bgColor },
+        get color() { return menu.light.item.color },
         get bgColor() { return menu.light.bgColor },
         get border() { return menu.light.border },
     },
     white: {
-        get color() { return menu.white.bgColor },
+        get color() { return menu.white.item.color },
         get bgColor() { return menu.white.bgColor },
         get border() { return menu.white.border },
     },
@@ -69,6 +69,19 @@ export function makeHeaderStyles() {
             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};
+        }
         ${themes.map(theme => {
             if (theme === 'dark') return;
             const styles = layout[theme];
@@ -77,6 +90,9 @@ export function makeHeaderStyles() {
                     background: ${styles.bgColor};
                     color: ${styles.color};
                     border-bottom: ${styles.border};
+                    &.k-blur {
+                        background: ${setAlpha(styles.bgColor, 0.1)};
+                    }
                 }
             `
         })}

package/components/menu/styles.ts CHANGED Viewed

@@ -230,8 +230,8 @@ export function makeTitleStyles() {
     return css`
         display: flex;
         align-items: center;
-        padding: ${menu.item.padding};
-        color: ${menu.item.color};
+        padding: ${item.padding};
+        color: ${item.color};
         white-space: nowrap;
         overflow: hidden;
         flex-wrap: nowrap;
@@ -253,6 +253,12 @@ export function makeItemStyles() {
             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};

package/components/menu/useDropdown.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import {useInstance, VNodeComponentClass, onBeforeMount, onBeforeUpdate, inject} from 'intact';
+import {useInstance, VNodeComponentClass, onBeforeMount, onBeforeUpdate, inject, createVNode} from 'intact';
 import {Menu, MenuItem, MenuProps} from './';
 import {Icon} from '../icon';
 import {
@@ -52,6 +52,10 @@ export function useDropdown(rootMenu: Menu, parentMenu: Menu) {
                     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/demos/pagination.md CHANGED Viewed

@@ -17,6 +17,7 @@ import {Table, TableColumn, Switch} from 'kpc';
     ref="table"
     draggable
     rowKey={item => item.name}
+    ev-page={this.onChangePage}
 >
     <TableColumn title="Name" key="name" />
     <TableColumn title="IP" key="ip" />
@@ -49,5 +50,10 @@ export default class extends Component {
             data,
         };
     }
+    @bind
+    onChangePage(data: { value: number, limit: number }) {
+        console.log(data);
+    }
 }
 ```

package/components/table/index.md CHANGED Viewed

@@ -167,3 +167,4 @@ export type TableColumnGroupItem = {
 | uncheckRow | 手动取消选中某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
 | checkAll | 手动全选触发 | `() => void` |
 | uncheckAll | 手动取消全选触发 | `() => void` |
+| page | 当内置翻页改变页码或每页数量时触发 | `({value: number, limit: number}) => void` |

package/components/table/index.spec.ts CHANGED Viewed

@@ -606,7 +606,7 @@ describe('Table', () => {
         const pagination = table.pagination.paginationRef;
         const spy = sinon.spy();
-        table.on('changePage', spy);
+        table.on('page', spy);
         // check all
         table.checkAll();

package/components/table/row.ts CHANGED Viewed

@@ -12,6 +12,7 @@ import type {TableColumnProps} from './column';
 import type {TableProps, TableRowKey} from './table';
 import {bind} from '../utils';
 import type {TableGrid} from './useMerge';
+import { isEqualObject } from '../utils';
 export interface TableRowProps {
     key: TableRowKey
@@ -65,7 +66,14 @@ export class TableRow extends Component<TableRowProps> {
         for (key in lastProps) {
             // ignore index
             if (key === 'index') continue;
-            if (lastProps[key] !== nextProps[key]) {
+            const lastValue = lastProps[key];
+            const nextValue = nextProps[key];
+            // deeply compare for offsetMap
+            if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+                continue;
+            }
+            if (lastValue !== nextValue) {
                 isSame = false;
                 break;
             }

package/components/table/styles.ts CHANGED Viewed

@@ -363,9 +363,7 @@ export function makeStyles() {
 export function makeGroupMenuStyles() {
     return css`
-        max-height: ${table.group.menuMaxHeight};
         min-width: ${table.group.menuMinWidth} !important;
-        overflow: auto;
         .k-dropdown-item.k-active {
             color: ${table.group.activeColor};
         }
@@ -373,6 +371,10 @@ export function makeGroupMenuStyles() {
             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};

package/components/table/table.ts CHANGED Viewed

@@ -74,7 +74,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> {
@@ -151,7 +151,7 @@ const events: Events<TableEvents> = {
     uncheckRow: true,
     checkAll: true,
     uncheckAll: true,
-    changePage: true,
+    page: true,
 };
 export class Table<

package/components/table/usePagination.ts CHANGED Viewed

@@ -64,7 +64,7 @@ export function usePagination() {
             });
         }
-        instance.trigger('changePage', data);
+        instance.trigger('page', data);
     }
     return { data, value, limit, onChange, paginationRef };

package/components/utils.ts CHANGED Viewed

@@ -291,6 +291,21 @@ export function isEqualArray(a: EqualArrayValue, b: EqualArrayValue): boolean {
     return false;
 }
+export function isEqualObject(a: Record<string, any>, b: Record<string, any>): boolean {
+    if (a === b) return true;
+    if (a && b) {
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length) return false;
+        return keysA.every((key) => {
+            return a[key] === b[key];
+        });
+    }
+    return false;
+}
 export function last<T>(arr: T[]): T | undefined {
     return arr[arr.length - 1];
 }

package/components/virtual.ts CHANGED Viewed

@@ -64,13 +64,15 @@ export class Virtual extends Component<any> {
             return {...props, ...events, className: _props.className || _props.class /* vue-next */};
         } else if (hasOwn.call(vnode, 'componentOptions') /* vue2 vnode */) {
             const data = vnode.data;
-            const on = data && data.on || EMPTY_OBJ;
+            if (!data) return props;
+            const on = data.on || EMPTY_OBJ;
             const events: Record<string, Function> = {};
             for (let key in on) {
                 events[`ev-${key}`] = on[key];
             }
-            return {...props, ...events};
+            return {...props, ...events, className: data.staticClass};
         }
         return props;

package/es/components/dropdown/usePosition.js CHANGED Viewed

@@ -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';
 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/es/components/form/styles.js CHANGED Viewed

@@ -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/es/components/layout/body.d.ts CHANGED Viewed

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

package/es/components/layout/body.js CHANGED Viewed

@@ -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';
+import { Component, inject, provide } from 'intact';
 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/es/components/layout/header.d.ts CHANGED Viewed

@@ -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/es/components/layout/header.js CHANGED Viewed

@@ -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/es/components/layout/helpers.d.ts CHANGED Viewed

@@ -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/es/components/layout/helpers.js CHANGED Viewed

@@ -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/es/components/layout/index.spec.d.ts ADDED Viewed

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

package/es/components/layout/index.spec.js ADDED Viewed

@@ -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';
+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/es/components/layout/layout.d.ts CHANGED Viewed

@@ -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/es/components/layout/layout.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { Component, inject, provide } from 'intact';
 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/es/components/layout/styles.js CHANGED Viewed

@@ -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/es/components/menu/styles.js CHANGED Viewed

@@ -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/es/components/menu/useDropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useInstance, onBeforeMount, onBeforeUpdate, inject } from 'intact';
+import { useInstance, onBeforeMount, onBeforeUpdate, inject, createVNode } from 'intact';
 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/es/components/table/index.spec.js CHANGED Viewed

@@ -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/es/components/table/row.js CHANGED Viewed

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

@@ -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/es/components/table/table.d.ts CHANGED Viewed

@@ -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/es/components/table/table.js CHANGED Viewed

@@ -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/es/components/table/usePagination.js CHANGED Viewed

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

package/es/components/utils.d.ts CHANGED Viewed

@@ -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/es/components/utils.js CHANGED Viewed

@@ -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/es/components/virtual.js CHANGED Viewed

@@ -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/es/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.0.0
+ * @king-design v3.0.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,4 +59,4 @@ 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";

package/es/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.0.0
+ * @king-design v3.0.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -61,5 +61,5 @@ 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 */

package/es/site/data/components/layout/demos/aside/react.js CHANGED Viewed

@@ -98,7 +98,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       style: {
         "height": "64px"
       },
-      onClick: this.toggle
+      onClick: this.toggle,
+      ghost: true
     }, /*#__PURE__*/React.createElement(Icon, {
       className: "ion-navicon",
       size: "30"

package/es/site/data/components/layout/demos/basic/react.js CHANGED Viewed

@@ -35,11 +35,17 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     return /*#__PURE__*/React.createElement(Layout, {
       className: "layout"
     }, /*#__PURE__*/React.createElement(Header, {
-      className: "header"
+      className: "header",
+      blur: true,
+      boxShadow: true,
+      theme: "white",
+      height: "54px",
+      fixed: true
     }, /*#__PURE__*/React.createElement("div", {
       className: "logo"
     }, "LOGO"), /*#__PURE__*/React.createElement(Menu, {
-      type: "horizontal"
+      type: "horizontal",
+      theme: "white"
     }, /*#__PURE__*/React.createElement(MenuItem, {
       key: "1"
     }, "menu 1"), /*#__PURE__*/React.createElement(MenuItem, {
@@ -63,7 +69,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, "option 2"))))), /*#__PURE__*/React.createElement(MenuItem, {
       key: "4"
     }, "menu 4"))), /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Aside, {
-      theme: "light"
+      theme: "light",
+      fixed: true
     }, /*#__PURE__*/React.createElement(Menu, {
       expandedKeys: this.state.expandedKeys,
       onChangeExpandedKeys: function onChangeExpandedKeys(expandedKeys) {
@@ -113,7 +120,9 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       key: "4"
     }, /*#__PURE__*/React.createElement(Icon, {
       className: "ion-gear-b"
-    }), "menu 4"))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Home"), /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Detail")), /*#__PURE__*/React.createElement("div", null, "content"))));
+    }), "menu 4"))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement("div", {
+      className: "content"
+    }, /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Home"), /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Detail")), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content"), /*#__PURE__*/React.createElement("div", null, "content")))));
   };
   return Demo;

package/es/site/data/components/table/demos/pagination/index.d.ts CHANGED Viewed

@@ -9,4 +9,8 @@ export default class extends Component {
     static defaults(): {
         data: DataItem[];
     };
+    onChangePage(data: {
+        value: number;
+        limit: number;
+    }): void;
 }

package/es/site/data/components/table/demos/pagination/index.js CHANGED Viewed

@@ -3,10 +3,11 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 var _context;
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { __decorate } from "tslib";
 export { default as data } from './index.json';
 import { Component } from 'intact';
 import template from './index.vdt';
-import { range } from 'kpc/components/utils';
+import { range, bind } from 'kpc/components/utils';
 var data = _mapInstanceProperty(_context = range(1, 20)).call(_context, function (item) {
   return {
@@ -28,8 +29,16 @@ var default_1 = /*#__PURE__*/function (_Component) {
     };
   };
+  var _proto = default_1.prototype;
+  _proto.onChangePage = function onChangePage(data) {
+    console.log(data);
+  };
   return default_1;
 }(Component);
 default_1.template = template;
-export { default_1 as default };
+export { default_1 as default };
+__decorate([bind], default_1.prototype, "onChangePage", null);

package/es/site/data/components/table/demos/pagination/react.d.ts CHANGED Viewed

@@ -11,6 +11,10 @@ export default class Demo extends React.Component<{}, Props> {
         data: DataItem[];
     };
     private table;
+    onChangePage(data: {
+        value: number;
+        limit: number;
+    }): void;
     render(): JSX.Element;
 }
 export {};

package/es/site/data/components/table/demos/pagination/react.js CHANGED Viewed

@@ -4,9 +4,10 @@ var _context;
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
 import React from 'react';
 import { Table, TableColumn } from '@king-design/react';
-import { range } from '@king-design/react/components/utils';
+import { range, bind } from '@king-design/react/components/utils';
 var data = _mapInstanceProperty(_context = range(1, 20)).call(_context, function (item) {
   return {
@@ -37,6 +38,10 @@ var Demo = /*#__PURE__*/function (_React$Component) {
   var _proto = Demo.prototype;
+  _proto.onChangePage = function onChangePage(data) {
+    console.log(data);
+  };
   _proto.render = function render() {
     var _this2 = this;
@@ -49,7 +54,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       draggable: true,
       rowKey: function rowKey(item) {
         return item.name;
-      }
+      },
+      onPage: this.onChangePage
     }, /*#__PURE__*/React.createElement(TableColumn, {
       title: "Name",
       key: "name"
@@ -62,4 +68,6 @@ var Demo = /*#__PURE__*/function (_React$Component) {
   return Demo;
 }(React.Component);
-export { Demo as default };
+export { Demo as default };
+__decorate([bind], Demo.prototype, "onChangePage", null);

package/es/styles/utils.d.ts CHANGED Viewed

@@ -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/es/styles/utils.js CHANGED Viewed

@@ -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'];

package/index.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.0.0
+ * @king-design v3.0.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -64,6 +64,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export const version = '3.0.0';
+export const version = '3.0.1';
 /* generate end */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "engines": {
@@ -120,7 +120,7 @@
     "highlight.js": "^10.4.1",
     "history": "^5.0.0",
     "html-webpack-plugin": "5.3.1",
-    "intact-react": "^3.0.19",
+    "intact-react": "^3.0.21",
     "istanbul-instrumenter-loader": "^3.0.0",
     "js-yaml": "^4.1.0",
     "karma": "^6.3.2",
@@ -179,7 +179,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.16.0",
     "@emotion/css": "^11.5.0",
-    "@king-design/react": "^3.0.0",
+    "@king-design/react": "^3.0.1",
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",

package/styles/utils.ts CHANGED Viewed

@@ -103,5 +103,9 @@ export function darken(color: string, number: number) {
     return tinycolor(color).darken(number).toHexString()
 }
+export function setAlpha(color: string, number: number) {
+    return tinycolor(color).setAlpha(number).toRgbString();
+}
 export type Sizes = 'large' | 'default' | 'small' | 'mini';
-export const sizes: Sizes[] = ['large', 'default', 'small', 'mini'];
+export const sizes: Sizes[] = ['large', 'default', 'small', 'mini'];

package/es/site/data/components/menu/demos/collapse/react.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-import React from 'react';
-import { MenuProps } from '@king-design/react';
-interface Props extends MenuProps {
-}
-export default class Demo extends React.Component<{}, Props> {
-    state: MenuProps<import("misstime").Key>;
-    private __test;
-    setTheme(theme?: string): void;
-    render(): JSX.Element;
-}
-export {};

package/es/site/data/components/menu/demos/size/react.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import React from 'react';
-import './index.styl';
-import type { MenuProps } from '@king-design/react';
-export default class Demo extends React.Component {
-    state: MenuProps<import("misstime").Key>;
-    render(): JSX.Element;
-}