@king-design/intact 2.0.0 → 2.0.3

package/README.md

@@ -1,18 +1,18 @@
 <div align="center">
 
-<a href="https://ksc-fe.github.io/kpc/" rel="nofollow">
-    <img src="/site/src/imgs/logo.png" alt="LOGO" width="150">
+<a href="https://design.ksyun.com" rel="nofollow">
+    <img src="/site/src/imgs/header_logo_x2.png" alt="LOGO" />
 </a>
 
 <p></p>
 
 [![Build Status](https://github.com/ksc-fe/kpc/workflows/Node.js%20CI/badge.svg?branch=master)](https://github.com/ksc-fe/kpc/actions?query=workflow%3A%22Node.js+CI%22)
 [![Codecov](https://codecov.io/gh/ksc-fe/kpc/branch/master/graphs/badge.svg)](https://codecov.io/gh/ksc-fe/kpc/branch/master)
-[![gzip size: js](http://img.badgesize.io/https://cdn.jsdelivr.net/npm/kpc/dist/kpc.min.js?compression=gzip&label=gzip%20size:%20js)](https://cdn.jsdelivr.net/npm/kpc/dist/)
-[![gzip size: css](http://img.badgesize.io/https://cdn.jsdelivr.net/npm/kpc/dist/kpc.css?compression=gzip&label=gzip%20size:%20css)](https://cdn.jsdelivr.net/npm/kpc/dist/)
+[![npm](https://img.shields.io/npm/v/@king-design/vue.svg)](https://www.npmjs.com/package/@king-design/vue)
 
-[![npm](https://img.shields.io/npm/dm/kpc.svg)](https://www.npmjs.com/package/kpc)
-[![npm](https://img.shields.io/npm/v/kpc.svg)](https://www.npmjs.com/package/kpc)
+[![npm](https://img.shields.io/npm/dm/@king-design/react.svg?label=react%20download)](https://www.npmjs.com/package/@king-design/react)
+[![npm](https://img.shields.io/npm/dm/@king-design/vue.svg?label=vue3%20download)](https://www.npmjs.com/package/@king-design/vue)
+[![npm](https://img.shields.io/npm/dm/@king-design/vue-legacy.svg?label=vue2%20download)](https://www.npmjs.com/package/@king-design/vue-legacy)
 
 </div>
 
@@ -20,11 +20,11 @@ English | [简体中文](./README-zh_CN.md)
 
 ## Features 
 
-* Support multiple frameworks: [Intact][1] / [Vue][2] / [React][3] / [Angular][4].
-* Complete custom theme system.
-* 360° locate popup layer.
+* Support multiple frameworks: [Intact][1] / [Vue][2] / [React][3].
+* Support TypeScript.
+* Change theme on runtime. 
 * Declarative form validation.
-* Excellent [documents](https://ksc-fe.github.io/kpc/) and design
+* Excellent [documents](https://design.ksyun.com) and design
 * 90% coverage unit tests.
 
 ## Browsers Support
@@ -38,7 +38,11 @@ English | [简体中文](./README-zh_CN.md)
 ### Installation
 
 ```shell
-npm install kpc-vue --save
+# Vue3
+npm install @king-design/vue --save
+
+# Vue2
+npm install @king-desing/vue-legacy --save
 ```
 
 ### Usage 
@@ -48,7 +52,7 @@ npm install kpc-vue --save
     <Button>Hello</Button>
 </template>
 <script>
-import {Button} from 'kpc-vue';
+import {Button} from '@king-design/vue';
 
 export default {
     components: {
@@ -63,114 +67,16 @@ export default {
 ### Installation 
 
 ```shell
-npm install kpc-react --save
+npm install @king-design/react--save
 ```
 
 ### Usage 
 
 ```jsx
-import React from 'react';
-import {Button} from 'kpc-react';
-
-class App extends React.Component {
-    render() {
-        return <Button>Hello</Button>
-    }
-}
-```
-
-## Intact
-
-### Installation 
-
-```shell
-npm install kpc --save
-```
-
-### Usage 
-
-```js
-import {Button} from 'kpc';
-
-<Button>Hello</Button>
-```
-
-## Angular
-
-Read [more][5]
+import {Button} from '@king-design/react';
 
-### Installation 
-
-```shell
-npm install kpc-angular -S
-```
-
-### Configure `webpack.config.js`
-
-You need use `@angular-builders/custom-webapck` to configure webpack, if your project initialized by Angular CLI.
-
-```js
-const path = require('path');
-
-module.exports = function(config) {
-  config.module.rules.find(rule => {
-    if (rule.test.toString() === '/\\.css$/') {
-      rule.exclude.push(path.resolve(__dirname, 'node_modules/kpc-angular'));
-      return true;
-    }
-  });
-
-  return config;
-};
-```
-
-### Usage 
-
-`src/app/app.module.ts`
-
-```ts
-import { KpcBrowserModule, KpcModule } from 'kpc-angular';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    KpcBrowserModule,
-    AppRoutingModule,
-    KpcModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule { }
-```
-
-```ts
-import { Component, ViewEncapsulation } from '@angular/core';
-import { MessageComponent } from 'kpc-angular';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <k-button type="primary" (click)="onClick()">Hello World</k-button>
-  `,
-  style: `
-    .k-button {
-      margin: 10px;
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AppComponent {
-  onClick() {
-    MessageComponent.success('Welcome to kpc world!');
-  }
+function App() {
+    return <Button>Hello</Button>
 }
 ```
 
@@ -187,10 +93,6 @@ Welcome to join us by QQ. Group Number: 529739732
 
 * [KPC Document](https://design.ksyun.com)
 * [Intact MVVM Framework][1]
-* [Vdt Template Engine](http://javey.github.io/vdt.js/)
-* [Intact-Vue Compatibility Layer](https://github.com/Javey/intact-vue)
-* [Intact-React Compatibility Layer](https://github.com/ksc-fe/intact-react)
-* [Intact-Angular Compatibility Layer](https://github.com/ksc-fe/intact-angular)
 
 ## Develop 
 

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/datepicker/index.vdt

@@ -76,12 +76,13 @@ const generatePanel = (flag) => {
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
             <div class="k-datepicker-shortcuts" v-if={shortcuts && shortcuts.length}>
-                <div v-for={shortcuts}
-                    class="k-datepicker-shortcut"
-                    ev-click={linkEvent($value, this.setByShortcut)}
-                >
-                    {isFunction($value.label) ? $value.label() : $value.label}
-                </div>
+                {shortcuts.map($value => {
+                    const label = isFunction($value.label) ? $value.label() : $value.label;
+                    return <div class="k-datepicker-shortcut c-ellipsis"
+                        title={label}
+                        ev-click={linkEvent($value, this.setByShortcut)}
+                    >{label}</div>
+                })}
             </div>
             <div class="k-datepicker-wrapper">
                 <div class="k-datepicker-calendars">

package/components/dropdown/dropdown.ts

@@ -244,11 +244,15 @@ 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;
+
             return {
                 vnode,
                 'ev-click': _props.onClick,
@@ -258,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(