@king-design/intact 2.0.1 → 2.0.4

package/components/cascader/index.spec.ts

@@ -5,6 +5,7 @@ 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', () => {
     afterEach(async () => {
@@ -146,4 +147,62 @@ describe('Cascader', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         expect(dropdown.innerText).to.eql('无数据');
     });
+
+    it('duplicated sub data', async () => {
+        class Demo extends Component {
+            static template = `const {Cascader} = this; <Cascader data={this.get('data')} v-model="value" />`;
+            static defaults() {
+                return {
+                    value: ['beijing', 'haidian'],
+                    data: [
+                        {
+                            value: 'beijing',
+                            label: '北京',
+                            children: [
+                                {
+                                    value: 'haidian',
+                                    label: '海淀区'
+                                },
+                            ]
+                        },
+                        {
+                            value: 'hunan',
+                            label: '湖南',
+                            children: [
+                                {
+                                    value: 'haidian',
+                                    label: '海淀区'
+                                },
+                            ]
+                        },
+                    ]
+                }
+            }
+            private Cascader = Cascader;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const [dropdown1, dropdown2] = getElements('.k-cascader-menu');
+        const [item1, item2] = dropdown1.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item1.classList.contains('k-selected')).to.be.true;
+        expect(item2.classList.contains('k-selected')).to.be.false;
+        const [item21] = dropdown2.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item21.classList.contains('k-selected')).to.be.true;
+
+        dispatchEvent(item2, 'click');
+        await wait();
+
+        const dropdown3 = getElement('.k-cascader-menu')!;
+        const [item31] = dropdown3.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item31.classList.contains('k-selected')).to.be.false;
+
+        dispatchEvent(item31, 'click');
+        await wait();
+        
+        expect(instance.get('value')).to.eql(['hunan', 'haidian']);
+        expect(element.textContent).to.eql('湖南 / 海淀区');
+    });
 });

package/components/cascader/index.vdt

@@ -11,7 +11,7 @@ const classNameObj = {
 };
 
 const {values, isShowed, isSelected, onSelect, toggleShowedValue} = this.value;
-const Options = (data, level, loaded) => {
+const Options = (data, level, loaded, parentSelected) => {
     if (!data.length) {
         if (!loaded) {
             return <Icon class="ion-load-c k-cascader-loading" rotate />
@@ -23,7 +23,7 @@ const Options = (data, level, loaded) => {
     return data.map((item, index) => {
         const value = item.value;
         const showed = isShowed(value, level);
-        const selected = isSelected(value, level);
+        const selected = parentSelected && isSelected(value, level);
         const children = item.children;
 
         const Item = () => {
@@ -58,7 +58,7 @@ const Options = (data, level, loaded) => {
                 >
                     {Item()}
                     <DropdownMenu class={classNameObj}>
-                        {showed ? Options(children, level + 1, item.loaded) : null}
+                        {showed ? Options(children, level + 1, item.loaded, selected) : null}
                     </DropdownMenu>
                 </Dropdown> :
                 Item()
@@ -74,7 +74,7 @@ const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
             class={classNameObj}
             key="common"
         >
-            {Options(data, 0, true)}
+            {Options(data, 0, true, true)}
         </DropdownMenu>
         <DropdownMenu v-else
             key="filter"

package/components/cascader/useLabel.ts

@@ -14,23 +14,23 @@ export function useLabel() {
         const {format} = instance.get();
         const labels: string[] = [];
         const length = value.length;
-        const loop = (data: CascaderStringData[]) => {
+        const loop = (data: CascaderStringData[], level: number) => {
+            if (level === length) return;
+
             for (let i = 0; i < data.length; i++) {
                 const item = data[i];
-                if (value.includes(item.value)) {
+                if (item.value === value[level]) {
                     labels.push(item.label); 
-                    if (labels.length === length) {
-                        return;
+
+                    const children = item.children;
+                    if (children) {
+                        loop(children, level + 1);
                     }
                 }
-                const children = item.children;
-                if (children) {
-                    loop(children);
-                }
             }
         };
 
-        loop(data);
+        loop(data, 0);
 
         return labels.length ? format!(labels) : null;
     }

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

@@ -21,7 +21,7 @@ RemoteDemo.prototype.validateUserName = function(value) {
 };
 
 describe('Form', () => {
-    afterEach(() => unmount());
+    // afterEach(() => unmount());
 
     it('validate', async () => {
         const [instance, element] = mount(BasicDemo, null, basicDemoData);

package/components/menu/demos/collapse.md

@@ -24,7 +24,8 @@ import {Menu, MenuItem, Switch, Icon} from 'kpc';
         falseValue="dark"
     />
     <br /><br />
-    <Menu v-model:expandedKeys="expandedKeys" 
+    <Menu v-model:expandedKeys="expandedKeys"
+        v-model:selectedKey="selectedKey"
         collapse={this.get('collapse')}
         theme={this.get('theme')}
         ref="__test"
@@ -62,6 +63,7 @@ export default class extends Component<Props> {
     static defaults() {
         return {
             expandedKeys: ['3'],
+            selectedKey: '3-2',
             collapse: false,
             theme: 'dark'
         } as MenuProps;

package/components/menu/index.spec.ts

@@ -22,23 +22,29 @@ describe('Menu', () => {
 
     it('select', async () => {
         const [instance, element] = mount(CollapseDemo);
-        const menu = instance.refs.__test as Menu;
+
+        expect(element.innerHTML).to.matchSnapshot();
 
         const [title, disabledTitle] = element.querySelectorAll<HTMLElement>('.k-menu-title');
         title.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('1');
+        expect(instance.get('selectedKey')).to.eql('1');
         disabledTitle.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('1');
+        expect(instance.get('selectedKey')).to.eql('1');
 
         const subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title') as HTMLElement;
         subTitle.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('3-1');
+        expect(instance.get('selectedKey')).to.eql('3-1');
+
+        // clear
+        instance.set('selectedKey', '');
+        await wait();
+        expect(element.querySelector('.k-highlighted')).to.be.null;
     });
 
     it('collapse', async () => {

package/components/menu/item.ts

@@ -4,10 +4,11 @@ import {Dropdown, DropdownMenu} from '../dropdown';
 import template from './item.vdt';
 import {bind} from '../utils';
 import {useState} from '../../hooks/useState';
-import {useHighlight} from './useHighlight';
 import {useExpanded} from './useExpanded';
 import {useDropdown} from './useDropdown';
 import {useRouter, navigate} from '../../hooks/useRouter';
+import {useRecordItem} from '../../hooks/useRecordComponent';
+import {MENU_RECORD_KEY} from './useHighlight';
 
 export interface MenuItemProps {
     key: Key 
@@ -42,23 +43,23 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     public parentMenuItem = inject<MenuItem | null>(MENU_ITEM, null);
 
     private expanded = useExpanded(this.rootMenu, this.parentMenu);
-    private highlight = useHighlight(this.rootMenu, this.parentMenuItem);
     private dropdown = useDropdown(this.rootMenu, this.parentMenu);
     private router = useRouter();
 
     init() {
         provide(MENU_ITEM, this);
+        useRecordItem(MENU_RECORD_KEY);
     }
 
     @bind
     public onClick(hasSubMenu: Menu, e: MouseEvent) {
-        const {disabled, to} = this.get();
+        const {disabled, to, key} = this.get();
         if (disabled) return;
         
         if (hasSubMenu) {
             this.expanded.toggle();
         } else {
-            this.highlight.select();
+            this.rootMenu.highlight!.select(key);
         }
 
         this.trigger('click', e);

package/components/menu/item.vdt

@@ -10,7 +10,7 @@ import {makeItemStyles, makeTitleStyles} from './styles';
 const rootMenu = this.rootMenu;
 const {theme, type, dot: rootDot} = rootMenu.get();
 const {children, key, className, disabled, dot} = this.get();
-const {isHighlighted, isSelected} = this.highlight;
+const {isHighlighted, isSelected} = rootMenu.highlight;
 const {isExpanded: isExpandedKey} = this.expanded;
 const isExpanded = isExpandedKey(key);
 const {
@@ -23,8 +23,8 @@ const classNameObj = {
     [className]: className,
     'k-expanded': isExpanded, 
     'k-disabled': disabled,
-    'k-active':  isSelected(), 
-    'k-highlighted': isHighlighted(),
+    'k-active':  isSelected(key), 
+    'k-highlighted': isHighlighted(key),
     [makeItemStyles()]: true,
 };
 

package/components/menu/menu.ts

@@ -1,5 +1,6 @@
 import {Component, TypeDefs, provide, inject, Key} from 'intact';
 import template from './menu.vdt';
+import {useHighlight} from './useHighlight';
 
 export interface MenuProps<K extends Key = Key> {
     expandedKeys?: K[]
@@ -46,6 +47,8 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
 
     public rootMenu = inject<Menu | null>(ROOT_MENU, null);
     public parentMenu = inject<Menu | null>(MENU, null);
+    public subExpandedKeys?: Set<K>;
+    public highlight?: ReturnType<typeof useHighlight>;
 
     init() {
         provide(MENU, this);
@@ -53,6 +56,7 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
         // is root menu or not
         if (!this.rootMenu) {
             provide(ROOT_MENU, this);
+            this.highlight = useHighlight();
         }
     }
 }

package/components/menu/useExpanded.ts

@@ -3,7 +3,7 @@ import type {Menu, MenuItem} from './';
 import {inArray, addOrRemove} from '../table/useChecked';
 import {isDropdown} from './useDropdown';
 
-export function useExpanded(rootMenu: Menu, parentMenu: Menu & {subExpandedKeys?: Set<Key>}) {
+export function useExpanded(rootMenu: Menu, parentMenu: Menu) {
     const instance = useInstance() as MenuItem;
 
     onBeforeUnmount(removeSubExpandedKey);

package/components/menu/useHighlight.ts

@@ -1,52 +1,57 @@
-import {useInstance, createRef, onMounted, onUpdated, onUnmounted, Key} from 'intact';
+import {useInstance, Key} from 'intact';
 import type {Menu, MenuItem} from './';
+import {useRecordParent} from '../../hooks/useRecordComponent';
 import {inArray} from '../table/useChecked';
-// import {isEqualArray} from '../utils';
-
-export function useHighlight(
-    rootMenu: Menu & {highlightedKeys?: Key[]},
-    parentMenuItem: MenuItem | null
-) {
-    const instance = useInstance() as MenuItem;
-
-    // we can not watch selectedKey on before initializing rootMenu
-    // because rootMenu has initialized
-    // so call updateStatus here
-    updateStatus(rootMenu.get('selectedKey'));
-    rootMenu.watch('selectedKey', updateStatus);
-
-    function updateStatus(v: Key | undefined) {
-        const {key} = instance.get();
-        if (v !== key) return;
-
-        const items = [];
-        let parentItem = parentMenuItem;
-        while (parentItem) {
-            items.push(parentItem);
-            parentItem = parentItem.parentMenuItem;
+import {useState} from '../../hooks/useState';
+
+export const MENU_RECORD_KEY = 'MenuKeys';
+
+export function useHighlight() {
+    const instance = useInstance() as Menu;
+    const menuItems = useRecordParent<MenuItem>(MENU_RECORD_KEY);
+    const highlightedKeys = useState<Key[]>([]);
+
+    instance.watch('selectedKey', updateStatus, {presented: true});
+
+    function updateStatus(newValue: Key | undefined) {
+        for (let i = 0; i < menuItems.length; i++) {
+            const menuItem = menuItems[i];
+            const key = menuItem.get('key');
+
+            if (newValue !== key) continue;
+
+            const items = [];
+            let parentItem = menuItem.parentMenuItem;
+            while (parentItem) {
+                items.push(parentItem);
+                parentItem = parentItem.parentMenuItem;
+            }
+            
+            const expandedKeys = new Set(instance.get('expandedKeys'));
+            highlightedKeys.set(items.map(item => {
+                const key = item.get('key');
+                expandedKeys.add(key);
+                return key;
+            }));
+            instance.set('expandedKeys', Array.from(expandedKeys))
+
+            return;
         }
-        
-        const expandedKeys = new Set(rootMenu.get('expandedKeys'));
-        const highlightedKeys = items.map(item => {
-            const key = item.get('key');
-            expandedKeys.add(key);
-            return key;
-        });
-        rootMenu.highlightedKeys = highlightedKeys;
-        rootMenu.set('expandedKeys', Array.from(expandedKeys))
+
+        highlightedKeys.set([]);
     }
 
-    function isHighlighted() {
-        return inArray(rootMenu.highlightedKeys, instance.get('key'));
+    function isHighlighted(key: Key) {
+        return inArray(highlightedKeys.value, key);
     }
 
-    function select() {
-        rootMenu.set('selectedKey', instance.get('key'));
+    function select(key: Key) {
+        instance.set('selectedKey', key);
     }
 
-    function isSelected() {
-        return rootMenu.get('selectedKey') === instance.get('key');
+    function isSelected(key: Key) {
+        return instance.get('selectedKey') === key;
     }
 
-    return {isHighlighted, updateStatus, select, isSelected};
+    return {isHighlighted, select, isSelected};
 }

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;
+}
+
+