@king-design/intact 2.0.2 → 2.0.5

package/components/dropdown/dropdown.ts

@@ -244,10 +244,12 @@ export class Dropdown<
 
     private normalizeTriggerProps(props: any) {
         // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-        if ((this as any).$isReact || (this as any).$isVueNext) {
-            const vnode = props.vnode;
-            if (!vnode) return props;
+        const vnode = props.vnode;
+        if (!vnode) return props;
 
+        // maybe we render the intact component in react slot property, in this case
+        // the $isReact is false. so use the vnode $$typeof field as gauge
+        if (vnode.$$typeof || (this as any).$isVueNext) {
             const _props = vnode.props;
             if (!_props) return props;
 
@@ -260,9 +262,6 @@ export class Dropdown<
                 className: _props.className || _props.class /* vue-next */,
             };
         } else if ((this as any).$isVue) {
-            const vnode = props.vnode;
-            if (!vnode) return props;
-
             const data = vnode.data;
             const on = data && data.on || EMPTY_OBJ;
             const ret: Record<string, any> = {vnode};

package/components/portal.ts

@@ -100,7 +100,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
             }
         } else {
             mountedQueue.push(() => {
-                parentDom = this.$lastInput!.dom!.parentElement!;
+                const parentDom = this.$lastInput!.dom!.parentElement!;
                 this.initContainer(nextProps.container, parentDom, anchor);
 
                 mount(

package/components/skeleton/demos/animate.md

@@ -0,0 +1,30 @@
+---
+title: 动画效果
+order: 3
+---
+
+添加animated属性可显示动画效果。
+
+```vdt
+import {Skeleton} from 'kpc';
+
+<div>
+    <Skeleton loading={this.get('showSkeleton')} avator animated />
+</div>
+```
+
+```ts
+interface Props {
+    showSkeleton?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            showSkeleton: true
+        };
+    }
+}
+```

package/components/skeleton/demos/avator.md

@@ -0,0 +1,30 @@
+---
+title: 头像模式
+order: 2
+---
+
+avator属性可以用来将组件显示为头像模式。
+
+```vdt
+import {Skeleton} from 'kpc';
+
+<div>
+    <Skeleton loading={this.get('showSkeleton')} avator={true} />
+</div>
+```
+
+```ts
+interface Props {
+    showSkeleton?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            showSkeleton: true
+        };
+    }
+}
+```

package/components/skeleton/demos/basic.md

@@ -0,0 +1,30 @@
+---
+title: 基础用法
+order: 0
+---
+
+最简单的骨架屏用法，通过loading属性来控制骨架屏的显示或隐藏效果。也可以使用Spin来代替，但是在某些场景下能提供比Spin更好的视觉效果和用户体验。
+
+```vdt
+import {Skeleton} from 'kpc';
+
+<div>
+    <Skeleton loading={this.get('showSkeleton')} />
+</div>
+```
+
+```ts
+interface Props {
+    showSkeleton?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            showSkeleton: true
+        };
+    }
+}
+```

package/components/skeleton/demos/custom.md

@@ -0,0 +1,39 @@
+---
+title: 自定义样式
+order: 4
+---
+
+我们为SkeletonItem提供了`type`属性，默认具有"text" | "avator" | "image" | "button" | "input"几种类型。他们分别模拟了文本、头像、图片、按钮、输入框几种元素的外观。在提供的默认样式不能满足需求的时候，我们可以通过自定义模板来实现预期的效果。
+
+```vdt
+import {Skeleton, SkeletonItem} from 'kpc';
+
+<div>
+    <Skeleton loading={this.get('showSkeleton')} avator animated>
+        <SkeletonItem type="image"></SkeletonItem>
+        <div style="display: flex; justify-content: space-between; width: 200px; margin-top: 20px;">
+            <div>
+                <SkeletonItem type="button" style="height: 16px;"></SkeletonItem>
+                <SkeletonItem type="button" style="height: 16px; margin-top: 8px;"></SkeletonItem>
+            </div>
+            <SkeletonItem type="button"></SkeletonItem>
+        </div>
+    </Skeleton>
+</div>
+```
+
+```ts
+interface Props {
+    showSkeleton?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            showSkeleton: true
+        };
+    }
+}
+```

package/components/skeleton/demos/rows.md

@@ -0,0 +1,32 @@
+---
+title: 控制行数
+order: 1
+---
+
+可以根据需要，来控制骨架屏显示的行数，默认为2行。
+
+```vdt
+import {Skeleton} from 'kpc';
+
+<div>
+    <Skeleton loading={this.get('showSkeleton')} rows={this.get('rows')} />
+</div>
+```
+
+```ts
+interface Props {
+    showSkeleton?: boolean
+    rows?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            showSkeleton: true,
+            rows: 4
+        };
+    }
+}
+```

package/components/skeleton/index.md

@@ -0,0 +1,24 @@
+---
+title: 骨架屏
+category: 组件
+order: 2
+sidebar: doc
+---
+
+# 属性
+
+## Skeleton
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| loading | 是否显示骨架屏 | `boolean` | `false` |
+| rows | 完整长度的行数 | `number` | `2` |
+| animated | 是否显示动画 | `boolean` | `false` |
+| avator | 是否显示为头像模式 | `boolean` | `false` |
+| size | 骨架屏尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
+
+## SkeletonItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 骨架屏元素类型 | `"text"` | `"avator"` | `"image"` | `"button"` | `"input"` | `"text"` |

package/components/skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './skeleton';
+export * from './item';

package/components/skeleton/item.ts

@@ -0,0 +1,30 @@
+import {Component, TypeDefs} from 'intact';
+import template from './item.vdt';
+
+type ItemType = 'text' | 'avator' | 'image' | 'button' | 'input';
+
+export const ItemTypeMap: ItemType[] = ['text', 'avator', 'image', 'button', 'input'];
+
+export interface SkeletonItemProps {
+    type?: ItemType,
+}
+
+export interface SkeletonItemEvents {}
+
+export interface SkeletonItemBlocks {}
+
+const typeDefs: Required<TypeDefs<SkeletonItemProps>> = {
+    type: ItemTypeMap
+};
+
+const defaults = (): Partial<SkeletonItemProps> => ({
+    type: 'text'
+});
+
+export class SkeletonItem extends Component<SkeletonItemProps, SkeletonItemEvents, SkeletonItemBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+}
+
+

package/components/skeleton/item.vdt

@@ -0,0 +1,28 @@
+import {makeItemStyles} from './style';
+import {getRestProps} from '../utils';
+
+const {type} = this.get();
+
+const classNameObj = {
+    'k-skeleton-item': true,
+    [makeItemStyles()]: true
+};
+
+const ItemklsObj = {
+    'k-skeleton-item-box': true,
+    [`skeleton-item-${type}`]: true
+};
+
+const skeletonItem = <div class={ItemklsObj} {...getRestProps(this)}>
+    <svg
+        v-if={type === 'image'}
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z"
+        />
+    </svg>
+</div>;
+
+<div class={classNameObj}>{skeletonItem}</div>

package/components/skeleton/skeleton.ts

@@ -0,0 +1,33 @@
+import {Component, TypeDefs} from 'intact';
+import template from './skeleton.vdt';
+
+export interface SkeletonProps {
+    loading: boolean
+    animated?: boolean
+    rows?: number
+    avator?: boolean
+    size?: string
+}
+
+export interface SkeletonEvents {}
+
+export interface SkeletonBlocks {}
+
+const typeDefs: Required<TypeDefs<SkeletonProps>> = {
+    loading: Boolean,
+    animated: Boolean,
+    rows: Number,
+    avator: Boolean,
+    size: String
+};
+
+const defaults = (): Partial<SkeletonProps> => ({
+    rows: 2,
+    size: 'large'
+});
+
+export class Skeleton extends Component<SkeletonProps, SkeletonEvents, SkeletonBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+}

package/components/skeleton/skeleton.vdt

@@ -0,0 +1,32 @@
+import {SkeletonItem} from './item';
+import {makeStyles, kls} from './style';
+
+const {rows, avator, animated, children, loading, size} = this.get();
+
+const targetRows = typeof rows !== 'number'
+    ? 3
+    : rows < 1
+        ? 1
+        : parseInt(rows);
+
+const skeletonList = Array(targetRows + 2).fill();
+const skeletonItems = <SkeletonItem v-for={skeletonList}></SkeletonItem>;
+
+const classNameObj = {
+    'k-skeleton': true,
+    'k-animated': animated,
+    [makeStyles(size)]: true
+};
+
+<div class={classNameObj} v-if={loading}>
+    <template v-if={children}>
+        <div>{children}</div>
+    </template>
+    <template v-else>
+        <div v-if={avator} class={kls('avator-box')}>
+            <SkeletonItem type="avator"></SkeletonItem>
+            <div class="k-skeleton-items">{skeletonItems}</div>
+        </div>
+        <div class="k-skeleton-items" v-else>{skeletonItems}</div>
+    </template>
+</div>

package/components/skeleton/style.ts

@@ -0,0 +1,105 @@
+import {deepDefaults}  from '../../styles/utils';
+import { theme, setDefault } from '../../styles/theme';
+import {css, keyframes} from '@emotion/css';
+import '../../styles/global';
+
+export const kls = (className: string) => `k-skeleton-${className}`;
+
+type ItemSize = 'default' | 'large' | 'small' | 'mini';
+
+const defaults = {
+    item: {
+        bgColor: '#dcdde0'
+    }
+};
+
+let skeleton: typeof defaults;
+setDefault(() => {
+    skeleton = deepDefaults(theme, {skeleton: defaults}).skeleton;
+});
+
+export function makeStyles(size: ItemSize) {
+    return css`
+        &.k-animated {
+            .${kls('item')} {
+                & > .k-skeleton-item-box {
+                    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+                    background-size: 400% 100%;
+                    animation: ${skeletonLoading} 1.4s ease infinite;
+                }
+            }
+        }
+        .k-skeleton-items {
+            .${kls('item')}:first-child {
+                .skeleton-item-text {
+                    width: 33%;
+                }
+            }
+            .${kls('item')}:last-child {
+                .skeleton-item-text {
+                    width: 61%;
+                }
+            }    
+        }
+        .${kls('avator-box')} {
+            display: flex;
+            & > div:last-child {
+                flex-grow: 1;
+                padding-left: 20px;
+            }
+        }
+        .skeleton-item-button,
+        .skeleton-item-input {
+            height: ${theme[size].height}
+        }
+    `;
+}
+
+const skeletonLoading = keyframes`
+    0% {
+        background-position: 100% 50%;
+    }
+    to {
+        background-position: 0 50%;
+    }
+`;
+
+export function makeItemStyles() {
+    const skeletonItem = skeleton.item;
+    return css`
+        & > div {
+            background: ${skeletonItem.bgColor}
+        }        
+        .skeleton-item-text {
+            width: 100%;
+            height: 16px;
+            border-radius: 4px;
+            margin-top: 16px;
+        }
+        .skeleton-item-avator {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+        }
+        .skeleton-item-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 200px;
+            height: 200px;
+            & > svg {
+                width: 48px;
+                height: 48px;
+                fill: ${skeletonItem.bgColor};
+            }
+        }
+        .skeleton-item-button {
+            width: 64px;
+            background: ${skeletonItem.bgColor};
+        }
+        .skeleton-item-input {
+            width: 160px;
+            background: ${skeletonItem.bgColor};
+        }
+    `;
+}

package/components/table/cell.ts

@@ -39,6 +39,10 @@ export class TableCell extends Component<TableCellProps> {
                 isSame = false;
                 break;
             }
+            if (key === 'props' && nextProps.props.$blocks) {
+                isSame = false;
+                break;
+            }
         }
 
         if (!isSame) {

package/components/table/demos/basic.md

@@ -7,10 +7,16 @@ order: 0
 组件定义表格结构，详见”定义表格结构“说明
 
 ```vdt
-import {Table, TableColumn} from 'kpc';
+import {Table, TableColumn, Select, Option} from 'kpc';
 
 <Table data={this.get('data')} resizable>
-    <TableColumn key="a" title="Title 1" />
+    <TableColumn key="a" title="Title 1">
+        <b:template args="[data]">
+            <Select>
+                <Option value="a">test</Option>
+            </Select>
+        </b:template>
+    </TableColumn>
     <TableColumn key="b" title="Title 2" />
 </Table>
 ```

package/components/table/index.spec.ts

@@ -521,58 +521,42 @@ describe('Table', () => {
         expect(instance.get('checkedKeys')).to.eql([3, 4, 1, 2]);
     });
 
-    // it('should render dropdown in header of fixed table correctly in Vue', async () => {
-        // const Demo = {
-            // template: `
-                // <Table :data="data" style="width: 800px;">
-                    // <TableColumn key="a" width="300" fixed="left" />
-                    // <TableColumn key="b" width="300">
-                        // <template slot="title">
-                            // <Dropdown trigger="click" :container="dom => dom.parentElement.closest('.k-table')">
-                                // <Icon class="ion-ios-arrow-down" style="margin-left: 100px;" />
-                                // <DropdownMenu>
-                                    // <DropdownItem>1</DropdownItem>
-                                    // <DropdownItem>2</DropdownItem>
-                                    // <DropdownItem>3</DropdownItem>
-                                // </DropdownMenu>
-                            // </Dropdown>
-                        // </template>
-                    // </TableColumn>
-                    // <TableColumn key="c" width="300" fixed="right" />
-                // </Table>
-            // `,
-            // components: {
-                // Table,
-                // TableColumn,
-                // Dropdown,
-                // DropdownMenu,
-                // DropdownItem,
-                // Icon,
-            // },
-            // data() {
-                // return {
-                    // data: [
-                        // {a: 1, b: 1, c: 1},
-                        // {a: 2, b: 2, c: 2},
-                    // ],
-                // };
-            // }
-        // };
-        // const container = document.createElement('div');
-        // document.body.appendChild(container);
-        // const app = new Vue({
-            // render: h => h('Demo'),
-            // components: {
-                // Demo
-            // }
-        // }).$mount(container);
-
-        // // should show the first dropdown menu
-        // app.$el.querySelector('.k-icon').click();
-        // const dropdownMenu = app.$el.querySelectorAll('.k-dropdown-menu')[0];
-        // expect(dropdownMenu.style.display).to.eql('');
-
-        // app.$destroy();
-        // document.body.removeChild(app.$el);
-    // });
+    it('should update children in TableCell', async() => {
+        const update = sinon.spy();
+        class Test extends Component {
+            static template = `<div>test</div>`;
+            beforeUpdate() {
+                update();
+            }
+        }
+        class Demo extends Component<{data: any[], checkedKeys: number[]}> {
+            static template = `
+                const {Table, TableColumn, Test} = this;
+                <Table data={this.get('data')} ref="table">
+                    <TableColumn key="a">
+                        <b:template>
+                            <Test />
+                        </b:template>
+                    </TableColumn>
+                </Table>
+            `;
+            static defaults() {
+                return {
+                    data: [
+                        {a: 1},
+                        {a: 2},
+                    ],
+                };
+            }
+            private Table = Table;
+            private TableColumn = TableColumn;
+            private Test = Test;
+        }
+       
+        const [instance, element] = mount(Demo);
+        element.querySelector<HTMLElement>('tbody tr')!.click();
+
+        await wait();
+        expect(update.callCount).to.eql(1);
+    });
 });

package/components/table/useChecked.ts

@@ -202,7 +202,7 @@ export function useChecked(
     instance.on('$change:data', updateAllCheckedStatus);
 
     instance.on('clickRow', (data: any, index: number, key: TableRowKey) => {
-        if (instance.get('rowCheckable')) {
+        if (instance.get('rowCheckable') && instance.get('checkType') !== 'none') {
             toggleChecked(key, index);
         }
     });

package/components/tree/useFilter.ts

@@ -47,11 +47,10 @@ export function useFilter(getNodes: () => Node<Key>[], getExpandedKeys: () => Se
     }
 
     function updateFilterUpward(node: Node<Key> | null) {
-        if (!node) return;
+        if (!node || node.filter) return;
 
         // should expand the node 
         getExpandedKeys().add(node.key);
-        if (node.filter) return;
 
         node.filter = true;
         updateFilterUpward(node.parent);

package/es/components/dropdown/dropdown.js

@@ -163,9 +163,11 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
   _proto.normalizeTriggerProps = function normalizeTriggerProps(props) {
     // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-    if (this.$isReact || this.$isVueNext) {
-      var vnode = props.vnode;
-      if (!vnode) return props;
+    var vnode = props.vnode;
+    if (!vnode) return props; // maybe we render the intact component in react slot property, in this case
+    // the $isReact is false. so use the vnode $$typeof field as gauge
+
+    if (vnode.$$typeof || this.$isVueNext) {
       var _props = vnode.props;
       if (!_props) return props;
       return {
@@ -179,12 +181,10 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
       };
     } else if (this.$isVue) {
-      var _vnode = props.vnode;
-      if (!_vnode) return props;
-      var data = _vnode.data;
+      var data = vnode.data;
       var on = data && data.on || EMPTY_OBJ;
       var ret = {
-        vnode: _vnode
+        vnode: vnode
       };
       ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(function (event) {
         var method = on[event];

package/es/components/portal.js

@@ -81,7 +81,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
       }
     } else {
       mountedQueue.push(function () {
-        parentDom = _this2.$lastInput.dom.parentElement;
+        var parentDom = _this2.$lastInput.dom.parentElement;
 
         _this2.initContainer(nextProps.container, parentDom, anchor);
 

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

@@ -0,0 +1,2 @@
+export * from './skeleton';
+export * from './item';

package/es/components/skeleton/index.js

@@ -0,0 +1,2 @@
+export * from './skeleton';
+export * from './item';