@king-design/intact 2.0.2 → 2.0.3

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/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/diagram/index.d.ts

@@ -10,7 +10,7 @@ export * from './shapes/rectangle';
 export * from './shapes/square';
 export * from './shapes/text';
 export * from './shapes/line';
-declare const DDiamond: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
+declare const DDiamond: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
 export { DDiamond, DTriangle, DCylinder, DCloud };
 export * from './layouts/layout';
 export * from './layouts/circle';

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

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

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

package/es/components/skeleton/item.js

@@ -0,0 +1,26 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './item.vdt';
+export var ItemTypeMap = ['text', 'avator', 'image', 'button', 'input'];
+var typeDefs = {
+  type: ItemTypeMap
+};
+
+var defaults = function defaults() {
+  return {
+    type: 'text'
+  };
+};
+
+export var SkeletonItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(SkeletonItem, _Component);
+
+  function SkeletonItem() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return SkeletonItem;
+}(Component);
+SkeletonItem.template = template;
+SkeletonItem.typeDefs = typeDefs;
+SkeletonItem.defaults = defaults;

package/es/components/skeleton/item.vdt.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact';
+import { makeItemStyles } from './style';
+import { getRestProps } from '../utils';
+var _$tmp0 = {
+  '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'
+};
+var _$tmp1 = {
+  'viewBox': '0 0 1024 1024',
+  'xmlns': 'http://www.w3.org/2000/svg'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _ItemklsObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      type = _this$get.type;
+
+  var classNameObj = (_classNameObj = {
+    'k-skeleton-item': true
+  }, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var ItemklsObj = (_ItemklsObj = {
+    'k-skeleton-item-box': true
+  }, _ItemklsObj["skeleton-item-" + type] = true, _ItemklsObj);
+
+  var skeletonItem = _$cv('div', _extends({
+    'className': _$cn(ItemklsObj)
+  }, getRestProps(this)), type === 'image' ? _$ce(512, 'svg', _$ce(2, 'path', null, 1, null, _$tmp0), 2, null, _$tmp1) : undefined);
+
+  return _$ce(2, 'div', skeletonItem, 0, _$cn(classNameObj));
+}
+;

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

@@ -0,0 +1,17 @@
+import { Component, TypeDefs } from 'intact';
+export interface SkeletonProps {
+    loading: boolean;
+    animated?: boolean;
+    rows?: number;
+    avator?: boolean;
+    size?: string;
+}
+export interface SkeletonEvents {
+}
+export interface SkeletonBlocks {
+}
+export declare class Skeleton extends Component<SkeletonProps, SkeletonEvents, SkeletonBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SkeletonProps>>;
+    static defaults: () => Partial<SkeletonProps>;
+}

package/es/components/skeleton/skeleton.js

@@ -0,0 +1,30 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './skeleton.vdt';
+var typeDefs = {
+  loading: Boolean,
+  animated: Boolean,
+  rows: Number,
+  avator: Boolean,
+  size: String
+};
+
+var defaults = function defaults() {
+  return {
+    rows: 2,
+    size: 'large'
+  };
+};
+
+export var Skeleton = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Skeleton, _Component);
+
+  function Skeleton() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Skeleton;
+}(Component);
+Skeleton.template = template;
+Skeleton.typeDefs = typeDefs;
+Skeleton.defaults = defaults;