@king-design/intact 2.0.17-beta.0 → 2.1.1

package/components/dropdown/dropdown.ts

@@ -11,7 +11,7 @@ import {
     createVNode,
     nextTick,
 } from 'intact';
-import {bind, isTextChildren} from '../utils';
+import {bind, isTextChildren, getRestProps} from '../utils';
 import {EMPTY_OBJ, isFunction, noop} from 'intact-shared';
 import {Options, position, Feedback} from '../position';
 import {cx} from '@emotion/css';
@@ -21,6 +21,7 @@ import {Portal, PortalProps} from '../portal';
 import {useShowHideEvents} from '../../hooks/useShowHideEvents';
 import {usePosition, FeedbackCallback} from './usePosition';
 import type {Events} from '../types';
+import { Virtual } from '../virtual';
 
 export type Position = Options 
 export type PositionShorthand = 'left' | 'bottom' | 'right' | 'top'
@@ -35,6 +36,7 @@ export interface DropdownProps {
     disabled?: boolean
     value?: boolean
     position?: Position | 'left' | 'bottom' | 'right' | 'top'
+    collison?: Position['collision']
     of?: 'self' | 'parent' | Event
     container?: PortalProps['container']
 }
@@ -45,6 +47,8 @@ export interface DropdownEvents {
     hide: []
     mouseenter: [MouseEvent]
     mouseleave: [MouseEvent]
+    click: [MouseEvent]
+    contextmenu: [MouseEvent]
     positioned: [Feedback]
 }
 
@@ -58,11 +62,11 @@ const typeDefs: Required<TypeDefs<DropdownProps>> = {
     // Event is undefined in NodeJs
     of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
     container: [String, Function],
+    collison: ['none', 'fit', 'flip', 'flipfit', Array],
 };
 
 const defaults = (): Partial<DropdownProps> => ({
     trigger: 'hover',
-    position: {},
     of: 'self',
 });
 
@@ -72,6 +76,8 @@ const events: Events<DropdownEvents> = {
     hide: true,
     mouseenter: true,
     mouseleave: true,
+    click: true,
+    contextmenu: true,
     positioned: true,
 };
 
@@ -105,28 +111,18 @@ export class Dropdown<
         }
 
         const [trigger, menu] = children as DropdownChildren;
-        const triggerType = this.get('trigger');
-        const props = this.initEventCallbacks(triggerType); 
-
-        const clonedTrigger = isTextChildren(trigger) ? 
-            createVNode('span', null, trigger) :
-            directClone(trigger);
-        const triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ);
-        // add a className for opening status
-        let className = trigger.className || triggerProps.className;
+        const props = this.initEventCallbacks(); 
+        let {className, value, container} = this.get();
         className = cx({
-            [className]: className,
-            'k-dropdown-open': this.get('value'),
+            'k-dropdown-open': value,
+            [className!]: !!className,
         });
-
-        clonedTrigger.props = {...triggerProps, ...props, className};
-        clonedTrigger.className = className;
-
+    
         this.menuVNode = menu;
 
         return [
-            clonedTrigger,
-            h(Portal, {children: menu, container: this.get('container')})
+            h(Virtual, {...props, ...getRestProps(this), className}, trigger),
+            h(Portal, {children: menu, container})
         ];
     };
 
@@ -136,8 +132,7 @@ export class Dropdown<
     public showedDropdown: Dropdown | null = null;
     public positionHook = usePosition();
 
-    private timer: number | undefined = undefined;
-    private triggerProps: any = null;
+    protected timer: number | undefined = undefined;
 
     init() {
         provide(DROPDOWN, this);
@@ -168,6 +163,12 @@ export class Dropdown<
         clearTimeout(this.timer);
         this.set('value', true);
 
+        // should show parent dropdown
+        const parentDropdown = this.dropdown;
+        if (parentDropdown) {
+            parentDropdown.show();
+        }
+
         if (shouldFocus) {
             nextTick(() => {
                 this.focusFirst();
@@ -179,9 +180,15 @@ export class Dropdown<
         if (this.get('disabled')) return;
         if (!this.get('value')) return;
 
+        const showedDropdown = this.showedDropdown;
+        if (showedDropdown) {
+            showedDropdown.hide(immediately);
+        }
+
         if (immediately) {
             this.set('value', false);
         } else {
+            clearTimeout(this.timer);
             this.timer = window.setTimeout(() => {
                 this.set('value', false);
             }, 200);
@@ -199,29 +206,27 @@ export class Dropdown<
 
     @bind
     private onEnter(e: MouseEvent) {
-        this.callOriginalCallback(e.type === 'click' ? 'ev-click' : 'ev-mouseenter', e);
-
         this.show();
+        this.trigger(e.type as 'mouseenter', e);
     }
 
     @bind 
     private onContextMenu(e: MouseEvent) {
-        this.callOriginalCallback('ev-contextmenu', e);
-
         e.preventDefault();
         this.set('of', e);
         this.show();
+        this.trigger('contextmenu', e);
     }
 
     @bind 
     private onLeave(e: MouseEvent) {
-        this.callOriginalCallback('ev-mouseleave', e);
-
         this.hide();
+        this.trigger(e.type as 'mouseleave', e);
     }
 
-    private initEventCallbacks(trigger: DropdownProps['trigger']) {
-        const props: Record<string, Function> = {};
+    private initEventCallbacks() {
+        const trigger = this.get('trigger');
+        const props: Record<string, Function | string> = {};
 
         switch (trigger) {
             case 'focus':
@@ -242,48 +247,6 @@ export class Dropdown<
 
         return props;
     }
-
-    private callOriginalCallback(name: string, e: MouseEvent) {
-        const callback = this.triggerProps[name];
-        const callbackOnDropdown = this.get<Function>(name);
-        if (isFunction(callback)) callback(e);
-        if (isFunction(callbackOnDropdown)) callbackOnDropdown(e);
-    }
-
-    private normalizeTriggerProps(props: any) {
-        // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-        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,
-                'ev-mouseenter': _props.onMouseEnter,
-                'ev-mouseleave': _props.onMouseLeave,
-                'ev-contextmenu': _props.onContextMenu,
-                className: _props.className || _props.class /* vue-next */,
-            };
-        } else if ((this as any).$isVue) {
-            const data = vnode.data;
-            const on = data && data.on || EMPTY_OBJ;
-            const ret: Record<string, any> = {vnode};
-            ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(event => {
-                const method = on[event];
-                if (method) {
-                    ret[`ev-${event}`] = method;
-                }
-            });
-            return ret;
-        }
-
-        return props;
-    }
 }
 
 function useDocumentClickForDropdown(dropdown: Dropdown) {

package/components/dropdown/index.spec.ts

@@ -4,6 +4,7 @@ import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
 import BasicDemo from '~/components/dropdown/demos/basic';
 import NestedDemo from '~/components/dropdown/demos/nested';
 import ContextMenuDemo from '~/components/dropdown/demos/contextmenu';
+import TooltipDemo from '~/components/dropdown/demos/tooltip'; 
 
 describe('Dropdown', () => {
     afterEach((done) => {
@@ -72,7 +73,8 @@ describe('Dropdown', () => {
         expect(dropdown.parentNode).to.exist;
     });
 
-    it('nested dropdown', async () => {
+    it('nested dropdown', async function() {
+        this.timeout(0);
         const [instance, element] = mount(NestedDemo);
 
         (element.firstElementChild as HTMLElement).click();
@@ -89,6 +91,20 @@ describe('Dropdown', () => {
         await wait(500);
         const hoverSubDropdown = getElement('.k-dropdown-menu')!;
         expect(hoverSubDropdown.innerHTML).to.matchSnapshot();
+
+        const [hoverItem1] = hoverSubDropdown.querySelectorAll<HTMLElement>('.k-dropdown-item');
+        dispatchEvent(hoverItem, 'mouseleave');
+        dispatchEvent(hoverItem1, 'mouseenter');
+        await wait(500);
+        const hoverSubDropdown1 = getElement('.k-dropdown-menu')!;
+        expect(hoverSubDropdown1.textContent).to.eql('item 1item 2');
+
+        const [hoverItem2] = hoverSubDropdown1.querySelectorAll<HTMLElement>('.k-dropdown-item');
+        dispatchEvent(hoverItem1, 'mouseleave');
+        dispatchEvent(hoverItem2, 'mouseenter');
+        await wait(1000);
+        const hoverSubDropdown2 = getElement('.k-dropdown-menu')!;
+        expect(hoverSubDropdown2 === hoverSubDropdown1).to.be.true;
     });
 
     it('hide on click document', async () => {
@@ -281,13 +297,13 @@ describe('Dropdown', () => {
         expect(parent.scrollTop).to.eql(item.offsetHeight * 2 - 40);
     });
 
-    it('trigger: focus', async() => {
+    it('focus trigger type', async () => {
         class Demo extends Component {
             static template = `
                 const {Dropdown, DropdownMenu, DropdownItem} = this;
                 <div>
                     <Dropdown trigger="focus">
-                        <input ref="trigger" />
+                        <input ref="trigger" ev-focusin={this.onFocus} />
                         <DropdownMenu>
                             <DropdownItem>test1</DropdownItem>
                             <DropdownItem>test2</DropdownItem>
@@ -298,12 +314,14 @@ describe('Dropdown', () => {
             private Dropdown = Dropdown;
             private DropdownItem = DropdownItem;
             private DropdownMenu = DropdownMenu;
+            public onFocus = sinon.spy((e: MouseEvent) => console.log(e));
         }
         const [instance] = mount(Demo);
 
         dispatchEvent(instance.refs.trigger, 'focusin');
         await wait(500);
         expect(getElement('.k-dropdown-menu')).to.be.exist;
+        expect(instance.onFocus.callCount).to.eql(1);
 
         // clicking anywhere should not hide menu
         dispatchEvent(document, 'click');
@@ -314,4 +332,35 @@ describe('Dropdown', () => {
         await wait(700);
         expect(getElement('.k-dropdown-menu')).to.not.be.exist;
     });
-});
+
+    it('wrap by tooltip', async () => {
+        const [instance, element] = mount(TooltipDemo);
+
+        dispatchEvent(element.firstChild as HTMLElement, 'mouseenter');
+        await wait();
+        const dropdown = getElement('.k-dropdown-menu')!;
+        const [item1, item2, item3, item4] = dropdown.querySelectorAll('.k-dropdown-item');
+
+        dispatchEvent(item1, 'mouseenter');
+        await wait();
+        expect(getElement('.k-tooltip-content')!.textContent).to.eql('item 1')
+
+        dispatchEvent(item1, 'mouseleave');
+        dispatchEvent(item3, 'mouseenter');
+        await wait();
+        expect(getElement('.k-tooltip-content')!.textContent).to.eql('disabled')
+
+        dispatchEvent(item3, 'mouseleave');
+        dispatchEvent(item4, 'mouseenter');
+        await wait();
+        expect(getElement('.k-tooltip-content')!.textContent).to.eql('This is a nested Dropdown.');
+
+        dispatchEvent(item4, 'click');
+        await wait();
+        expect(getElement('.k-dropdown-menu')!.textContent).to.eql('item 1item 2');
+
+        dispatchEvent(item4, 'mouseleave');
+        await wait(800);
+        expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+    });
+});

package/components/dropdown/item.ts

@@ -5,6 +5,7 @@ import {useItemKeyboard, MenuKeyboardMethods} from './useKeyboard';
 import {Dropdown, DROPDOWN} from './dropdown';
 import {DropdownMenu, DROPDOWN_MENU} from './menu';
 import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
+import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
 
 export interface DropdownItemProps {
     disabled?: boolean
@@ -52,21 +53,31 @@ export class DropdownItem extends Component<DropdownItemProps, DropdownItemEvent
     select() {
         if (this.parentDropdown) return;
 
+        // trigger select event firstly for Cascader update values
+        this.trigger('select');
+
         if (this.get('hideOnSelect')) {
             // hide all dropdowns
             let dropdown = this.dropdown;
             do { dropdown!.hide(true); }
             while (dropdown = dropdown!.dropdown);
         }
-
-        this.trigger('select');
     }
 
     hasSubMenu() {
-        // TODO: wrapped by Tooltip
-        const parent = this.$senior;
-        if (parent instanceof Dropdown) {
-            return parent
+        // wrapped by Dropdown rather than DropdownMenu
+        let parent = this.$senior;
+        while (parent) {
+            // Tooltip extends Dropdown, it's also a instance of Dropdown
+            // so use constructor to detect
+            // if (parent instanceof DropdownMenu) {
+            if (parent.constructor === ExportDropdownMenu) {
+                return; 
+            }
+            if (parent.constructor === ExportDropdown) {
+                return parent;
+            }
+            parent = parent.$senior;
         }
     }
 
@@ -104,4 +115,4 @@ function useKeyboardForDropdownItem(instance: DropdownItem) {
             instance.select();
         },
     });
-}
+}

package/components/dropdown/menu.ts

@@ -35,8 +35,8 @@ export class DropdownMenu<
     @bind
     protected onMouseEnter(e: MouseEvent) {
         const dropdown = this.dropdown!; 
-        dropdown!.show();
-        dropdown!.trigger('mouseenter', e);
+        dropdown.show();
+        dropdown.trigger('mouseenter', e);
     }
 
     @bind
@@ -78,4 +78,4 @@ function useKeyboardForDropdownMenu(dropdown: Dropdown) {
     });
 
     return {lock};
-}
+}

package/components/dropdown/usePosition.ts

@@ -2,6 +2,7 @@ import {useInstance, findDomFromVNode} from 'intact';
 import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
 import {noop} from 'intact-shared';
+import {isObject} from 'intact-shared';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
 
@@ -16,7 +17,16 @@ export function usePosition() {
     });
 
     (['of', 'position'] as const).forEach(item => {
-        instance.watch(item, () => {
+        instance.watch(item, (newValue, oldValue) => {
+            // return if object is the same
+            if (
+                isObject(newValue) && isObject(oldValue) &&
+                // is not event object
+                !(newValue instanceof Event) &&
+                JSON.stringify(newValue) === JSON.stringify(oldValue)
+            )  {
+                return;
+            }
             if (instance.get('value')) {
                 handle(noop);
             }
@@ -48,6 +58,7 @@ export function usePosition() {
         position(findDomFromVNode(instance.menuVNode!, true) as HTMLElement, {
             my: 'left top+8',
             at: 'left bottom',
+            collision: instance.get('collison'),
             ...pos,
             of: ofElement,
             using: _feedback => {

package/components/editable/index.ts

@@ -58,9 +58,23 @@ export class Editable<
     @bind
     private edit() {
         this.set('editing', true);
-        nextTick(() => {
-            this.inputRef.value!.select();
-        });
+        /**
+         * Intact will update in nextTick, but Vue will call
+         * call updated method in nextTick of this nextTick
+         * so we should do it after two nextTicks
+         * https://github.com/ksc-fe/kpc/issues/847
+         *
+         * use binding this.select to Input $mounted event instead
+         */
+        // nextTick(() => {
+            // nextTick(() => {
+                // this.inputRef.value!.select();
+            // });
+        // });
+    }
+
+    @bind select() {
+        this.inputRef.value!.select();
     }
 
     @bind

package/components/editable/index.vdt

@@ -33,6 +33,7 @@ const classNameObj = {
             ev-keydown={this.onKeydown}
             ref={this.inputRef}
             frozenOnInput
+            ev-$mounted={this.select}
         />
     </div>
 </div>

package/components/input/demos/autoRows.md

@@ -0,0 +1,44 @@
+---
+title: 文本框自适应高度
+order: 3.1
+---
+
+当`textarea`组件`rows`属性设置成`'auto'`时，组件的高度将会自适应，此时组件从1行高度开始，根据内容自动调整高度。
+你也可以通过对象`{min, max}`来设置文本框最小和最大的自动调整行数。
+
+> 自适应高度，文本框将禁用鼠标拖拽调整大小
+
+```vdt
+import {Input} from 'kpc';
+
+<div>
+    <Input
+        v-model="value1"
+        type="textarea"
+        placeholder="please enter"
+        fluid
+        rows="auto"
+    />
+    <br />
+    <br />
+    <Input
+        v-model="value2"
+        type="textarea"
+        placeholder="please enter"
+        fluid
+        rows={{min: 3, max: 5}}
+    />
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            value1: '',
+            value2: '',
+        }
+    }
+}
+```

package/components/input/demos/password.md

@@ -0,0 +1,12 @@
+---
+title: 密码框 
+order: 9
+---
+
+当`type="password"`时，添加`showPassword`属性，即可展示带显隐密码按钮的密码框
+
+```vdt
+import {Input} from 'kpc';
+
+<Input placeholder="password" type="password" showPassword ref="__demo" />
+```

package/components/input/demos/textarea.md

@@ -9,9 +9,9 @@ order: 3
 import {Input} from 'kpc';
 
 <div>
-    <Input type="textarea" placeholder="please enter" />
+    <Input type="textarea" placeholder="please enter" fluid />
     <br />
     <br />
-    <Input type="textarea" rows="5" placeholder="please enter" />
+    <Input type="textarea" rows="5" placeholder="please enter" fluid />
 </div>
 ```

package/components/input/index.md

@@ -27,6 +27,7 @@ sidebar: doc
 | stackClearIcon | 是否将清空按钮覆盖在`suffix`按钮上展示来节省空间 | `boolean` | `false` |
 | frozenOnInput | 是否在输入的过程中冻结`value`更新到视图 | `boolean` | `false` |
 | inline | 是否展示内联模式 | `boolean` | `flase` |
+| resize | 指定textarea输入框拖动调整大小的方向，默认只能垂直方向调整 | `"none"` | `"vertical"` | `"horizontal"` | `"both"`' | `"vertical"` |
 
 ## Search
 

package/components/input/index.spec.ts

@@ -1,7 +1,12 @@
 import BasicDemo from '~/components/input/demos/basic';
-import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
+import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
 import SearchDemo from '~/components/input/demos/search';
 import FrozenDemo from '~/components/input/demos/frozen';
+import AutoRowsDemo from '~/components/input/demos/autoRows';
+import PasswordDemo from '~/components/input/demos/password';
+import {Input} from './';
+import {Dialog} from '../dialog';
+import { Component } from 'intact';
 
 describe('Input', () => {
     afterEach(() => {unmount()});
@@ -70,4 +75,95 @@ describe('Input', () => {
         await wait();
         expect(input2.value).to.eql('#112233');
     });
+
+    it('should auto expand or shrink textarea', async () => {
+        const [instance, element] = mount(AutoRowsDemo);
+        const [textarea1, textarea2] = element.querySelectorAll('textarea');
+        // const lineHeight = parseInt(getComputedStyle(textarea1).lineHeight);
+
+        instance.set<string>('value1', 'a\nb');
+        await wait();
+        expect(textarea1.style.height).to.eql('50px');
+
+        instance.set<string>('value1', 'a');
+        await wait();
+        expect(textarea1.style.height).to.eql('32px');
+
+        instance.set<string>('value2', 'a');
+        await wait();
+        expect(textarea2.style.height).to.eql('68px');
+
+        instance.set<string>('value2', 'a\nb\nc')
+        await wait();
+        expect(textarea2.style.height).to.eql('68px');
+
+        instance.set<string>('value2', 'a\nb\nc\nd')
+        await wait();
+        expect(textarea2.style.height).to.eql('86px');
+
+        instance.set<string>('value2', 'a\nb\nc\nd\ne\nf\ng\nh')
+        await wait();
+        expect(textarea2.style.height).to.eql('104px');
+    });
+
+    it('should show or hide password', async () => {
+        const [instance, element] = mount(PasswordDemo);
+        const input = element.querySelector<HTMLInputElement>('input')!;
+        const icon = element.querySelector<HTMLElement>('.k-icon')!;
+        const inputInstance = instance.refs.__demo as Input;
+
+        icon.click();
+        await wait();
+        expect(input.type).to.eql('text');
+        expect(element.innerHTML).to.matchSnapshot();
+
+        icon.click();
+        await wait();
+        expect(input.type).to.eql('password');
+        expect(element.innerHTML).to.matchSnapshot();
+
+        // simulate receive type
+        inputInstance.$props.type = 'number';
+        (inputInstance as any).trigger('$receive:type', 'number');
+        await wait();
+        expect(input.type).to.eql('number');
+        expect(icon.parentElement!.parentElement).to.eql(null);
+        expect(element.innerHTML).to.matchSnapshot();
+
+        // simulate receive showPassword
+        inputInstance.$props.type = 'password';
+        inputInstance.$props.showPassword = false;
+        (inputInstance as any).trigger('$receive:type', 'password');
+        (inputInstance as any).trigger('$receive:showPassword', false);
+        await wait();
+        expect(input.type).to.eql('password');
+        expect(element.querySelector<HTMLElement>('.k-icon')).to.eql(null);
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+
+    it('should set width when dialog show and input mounted', async () => {
+        class Demo extends Component<{show: boolean}> {
+            static template = `
+                var Dialog = this.Dialog;
+                var Input = this.Input;
+                <Dialog value={this.get('show')}>
+                    <Input autoWidth placeholder="test" v-if={this.get('show')} />
+                </Dialog>
+            `;
+            static defaults() {
+                return {
+                    show: false,
+                };
+            }
+            private Dialog = Dialog;
+            private Input = Input;
+        }
+
+        const [instance] = mount(Demo);
+        instance.set('show', true);
+        await wait(50);
+        const dialog = getElement('.k-dialog')!;
+        const width = parseInt(dialog.querySelector<HTMLInputElement>('.k-input-inner')!.style.width);
+        expect(width).to.gt(1);
+    });
 });