@king-design/intact 2.0.0 → 2.0.3

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/tooltip/index.spec.ts

@@ -50,7 +50,12 @@ describe('Tooltip', () => {
         const at = element.querySelector('.opera .k-btn') as HTMLElement;
         const {width, height, left, top} = at.getBoundingClientRect();
         const contains = (name: string) => expect(arrow.classList.contains(name)).to.be.true;
-        const eql = (a: number, b: number) => expect(Math.floor(a)).to.eql(Math.floor(b));
+        const eql = (a: number, b: number) => {
+            a = Math.floor(a);
+            b = Math.floor(b);
+            // Don't be entangled with the difference of 1 to 2 pixels
+            expect(a >= b - 1 && a <= b + 1).to.be.true;
+        };
 
         
         instance.set('position', 'left');

package/components/transfer/styles.ts

@@ -29,8 +29,7 @@ const defaults = {
         get hoverColor() { return theme.color.primary },
         bgColor: '#fff',
         hoverBgColor: 'transparent',
-        padding: '5px 16px',
-        get height() { return theme.default.height },
+        padding: '7px 16px',
         get descColor() { return theme.color.lightBlack },
     },
 
@@ -68,7 +67,6 @@ export function makeStyles() {
             .k-checkbox {
                 color: ${transfer.title.color}; 
                 font-size: ${transfer.title.fontSize};
-                display: block;
             }
         }
         .k-transfer-count {
@@ -84,7 +82,6 @@ export function makeStyles() {
             color: ${transfer.item.color};
             background: ${transfer.item.bgColor};
             user-select: none;
-            display: table;
             width: 100%;
             &:not(.k-disabled):hover {
                 background: ${transfer.item.hoverBgColor};
@@ -95,10 +92,7 @@ export function makeStyles() {
             }
             .k-checkbox {
                 padding: ${transfer.item.padding};
-                display: table-cell;
-                height: ${transfer.item.height};
-                vertical-align: middle;
-                white-space: nowrap;
+                display: flex;
             }
             p {
                 margin: 0;

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/cascader/index.spec.js

@@ -1,4 +1,6 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/cascader/demos/basic';
 import CustomDemo from '~/components/cascader/demos/custom';
@@ -6,6 +8,8 @@ import ChangeOnSelectDemo from '~/components/cascader/demos/changeOnSelect';
 import LoadDataDemo from '~/components/cascader/demos/loadData';
 import FilterDemo from '~/components/cascader/demos/filterable';
 import { mount, unmount, dispatchEvent, getElement, getElements, wait } from '../../test/utils';
+import { Cascader } from './';
+import { Component } from 'intact';
 describe('Cascader', function () {
   afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -278,4 +282,88 @@ describe('Cascader', function () {
       }
     }, _callee7);
   })));
+  it('duplicated sub data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount7, instance, element, _getElements2, dropdown1, dropdown2, _dropdown1$querySelec4, item1, item2, _dropdown2$querySelec3, item21, dropdown3, _dropdown3$querySelec2, item31;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context8;
+
+                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(_context8 = [this]).call(_context8, args)) || this;
+                _this.Cascader = Cascader;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: ['beijing', 'haidian'],
+                  data: [{
+                    value: 'beijing',
+                    label: '北京',
+                    children: [{
+                      value: 'haidian',
+                      label: '海淀区'
+                    }]
+                  }, {
+                    value: 'hunan',
+                    label: '湖南',
+                    children: [{
+                      value: 'haidian',
+                      label: '海淀区'
+                    }]
+                  }]
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "const {Cascader} = this; <Cascader data={this.get('data')} v-model=\"value\" />";
+            _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
+            dispatchEvent(element, 'click');
+            _context9.next = 6;
+            return wait();
+
+          case 6:
+            _getElements2 = getElements('.k-cascader-menu'), dropdown1 = _getElements2[0], dropdown2 = _getElements2[1];
+            _dropdown1$querySelec4 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec4[0], item2 = _dropdown1$querySelec4[1];
+            expect(item1.classList.contains('k-selected')).to.be.true;
+            expect(item2.classList.contains('k-selected')).to.be.false;
+            _dropdown2$querySelec3 = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item21 = _dropdown2$querySelec3[0];
+            expect(item21.classList.contains('k-selected')).to.be.true;
+            dispatchEvent(item2, 'click');
+            _context9.next = 15;
+            return wait();
+
+          case 15:
+            dropdown3 = getElement('.k-cascader-menu');
+            _dropdown3$querySelec2 = dropdown3.querySelectorAll(':scope > .k-dropdown-item'), item31 = _dropdown3$querySelec2[0];
+            expect(item31.classList.contains('k-selected')).to.be.false;
+            dispatchEvent(item31, 'click');
+            _context9.next = 21;
+            return wait();
+
+          case 21:
+            expect(instance.get('value')).to.eql(['hunan', 'haidian']);
+            expect(element.textContent).to.eql('湖南 / 海淀区');
+
+          case 23:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee8);
+  })));
 });

package/es/components/cascader/index.vdt.js

@@ -41,7 +41,7 @@ export default function ($props, $blocks, $__proto__) {
       onSelect = _this$value.onSelect,
       toggleShowedValue = _this$value.toggleShowedValue;
 
-  var Options = function Options(data, level, loaded) {
+  var Options = function Options(data, level, loaded, parentSelected) {
     if (!data.length) {
       if (!loaded) {
         return _$cc(Icon, _$tmp0);
@@ -53,7 +53,7 @@ export default function ($props, $blocks, $__proto__) {
     return _mapInstanceProperty(data).call(data, function (item, index) {
       var value = item.value;
       var showed = isShowed(value, level);
-      var selected = isSelected(value, level);
+      var selected = parentSelected && isSelected(value, level);
       var children = item.children;
 
       var Item = function Item() {
@@ -79,7 +79,7 @@ export default function ($props, $blocks, $__proto__) {
         'ev-show': _this.load.bind(null, item),
         'children': [Item(), _$cc(DropdownMenu, {
           'className': _$cn(classNameObj),
-          'children': showed ? Options(children, level + 1, item.loaded) : null
+          'children': showed ? Options(children, level + 1, item.loaded, selected) : null
         })]
       }) : Item();
     });
@@ -100,7 +100,7 @@ export default function ($props, $blocks, $__proto__) {
       return !filterable || !keywords ? _$cc(DropdownMenu, {
         'className': _$cn(classNameObj),
         'key': 'common',
-        'children': Options(data, 0, true)
+        'children': Options(data, 0, true, true)
       }, 'common') : _$cc(DropdownMenu, {
         'key': 'filter',
         'className': _$cn((_$cn2 = {

package/es/components/cascader/useLabel.js

@@ -1,4 +1,3 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import { useInstance } from 'intact';
 import { useBaseLabel } from '../select/useBaseLabel';
 export function useLabel() {
@@ -11,27 +10,24 @@ export function useLabel() {
     var labels = [];
     var length = value.length;
 
-    var loop = function loop(data) {
+    var loop = function loop(data, level) {
+      if (level === length) return;
+
       for (var i = 0; i < data.length; i++) {
         var item = data[i];
 
-        if (_includesInstanceProperty(value).call(value, item.value)) {
+        if (item.value === value[level]) {
           labels.push(item.label);
+          var children = item.children;
 
-          if (labels.length === length) {
-            return;
+          if (children) {
+            loop(children, level + 1);
           }
         }
-
-        var children = item.children;
-
-        if (children) {
-          loop(children);
-        }
       }
     };
 
-    loop(data);
+    loop(data, 0);
     return labels.length ? format(labels) : null;
   }