@king-design/intact 2.1.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,6 +62,7 @@ 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> => ({
@@ -71,6 +76,8 @@ const events: Events<DropdownEvents> = {
     hide: true,
     mouseenter: true,
     mouseleave: true,
+    click: true,
+    contextmenu: true,
     positioned: true,
 };
 
@@ -104,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})
         ];
     };
 
@@ -135,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);
@@ -167,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();
@@ -178,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);
@@ -198,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':
@@ -241,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
@@ -64,10 +65,19 @@ export class DropdownItem extends Component<DropdownItemProps, DropdownItemEvent
     }
 
     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;
         }
     }
 
@@ -105,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

@@ -21,6 +21,8 @@ export function usePosition() {
             // 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;
@@ -56,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/menu/demos/collapse.md

@@ -64,7 +64,7 @@ export default class extends Component<Props> {
         return {
             expandedKeys: ['3'],
             selectedKey: '3-2',
-            collapse: false,
+            collapse: true,
             theme: 'dark'
         } as MenuProps;
     }

package/components/menu/index.spec.ts

@@ -1,4 +1,5 @@
 import {Component} from 'intact';
+import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
@@ -8,13 +9,17 @@ describe('Menu', () => {
     afterEach(() => unmount());
 
     it('expand and shrink sub menu', async () => {
-        const [instance, element] = mount(CollapseDemo);
+        const [instance, element] = mount(BasicDemo);
+
+        await wait();
 
+        // shrink
         const title = element.querySelector('.k-expanded .k-menu-title') as HTMLElement;
         title.click();
         await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql([]);
+
         title.click();
         await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
@@ -24,6 +29,9 @@ describe('Menu', () => {
     it('select', async () => {
         const [instance, element] = mount(CollapseDemo);
 
+        instance.set('collapse', false);
+        await wait();
+
         expect(element.innerHTML).to.matchSnapshot();
 
         const [title, disabledTitle] = element.querySelectorAll<HTMLElement>('.k-menu-title');

package/components/menu/item.ts

@@ -9,6 +9,7 @@ import {useDropdown} from './useDropdown';
 import {useRouter, navigate} from '../../hooks/useRouter';
 import {useRecordItem} from '../../hooks/useRecordComponent';
 import {MENU_RECORD_KEY, useHighlightItem} from './useHighlight';
+import {Events} from '../types';
 
 export interface MenuItemProps {
     key: Key 
@@ -32,11 +33,17 @@ const typeDefs: Required<TypeDefs<MenuItemProps>> = {
     disabled: Boolean,
 };
 
+const events: Events<MenuItemEvents> = {
+    click: true,
+    select: true,
+};
+
 export const MENU_ITEM = 'MenuItem';
 
 export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     static template = template;
     static typeDefs = typeDefs;
+    static events = events;
 
     public rootMenu = inject<Menu>(ROOT_MENU)!;
     public parentMenu = inject<Menu>(MENU)!;

package/components/pagination/index.spec.ts

@@ -3,6 +3,8 @@ import GotoDemo from '~/components/pagination/demos/goto';
 import CurrentDemo from '~/components/pagination/demos/current';
 import DisableDemo from '~/components/pagination/demos/disable';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
+import { Component } from 'intact';
+import { Pagination } from '.';
 
 describe('Pagination', () => {
     // afterEach(() => unmount());
@@ -89,4 +91,25 @@ describe('Pagination', () => {
         expect(input.value).to.eql('10');
         expect(instance.get('value2')).to.eql(10);
     });
+
+    it('should not set value to 0 when total is 0 on intialization', async () => {
+        class Demo extends Component {
+            static template = `
+                const { Pagination } = this;
+                <Pagination total={0} v-model="page" />
+            `;
+
+            static defaults() {
+                return {
+                    page: 1,
+                }
+            }
+
+            private Pagination = Pagination;
+        }
+
+        const [instance] = mount(Demo);
+        // await wait();
+        expect(instance.get('page')).to.eql(1);
+    });
 });

package/components/pagination/index.ts

@@ -100,7 +100,9 @@ export class Pagination extends Component<PaginationProps, PaginationEvents> {
         
         if (page > totalPages) {
             page = totalPages;
-        } else if (page < 1) {
+        } 
+        // perhaps totalPages is 0
+        if (page < 1) {
             page = 1;
         }
 

package/components/tooltip/content.ts

@@ -9,6 +9,7 @@ import template from './content.vdt';
 import {bind} from '../utils';
 import {Tooltip} from './tooltip';
 import {useArrow} from './useArrow';
+import { tooltip as tooltipTheme } from './styles';
 
 export interface TooltipContentProps extends DropdownMenuProps { } 
 export interface TooltipContentEvents extends DropdownMenuEvents { }
@@ -35,10 +36,23 @@ export class TooltipContent extends DropdownMenu<
     }
 
     @bind
-    private onEnter() {
+    private onEnter(elem: HTMLElement) {
+        // fix the width, https://github.com/ksc-fe/kpc/issues/873
+        const maxWidth = parseInt(tooltipTheme.maxWidth);
+        const width = elem.offsetWidth;
+        if (width === maxWidth) {
+            elem.style.width = `${width}px`;
+        }
         this.dropdown!.position();
     }
 
+    @bind
+    private onAfterLeave(elem: HTMLElement) {
+        // remove the position after leave, https://github.com/ksc-fe/kpc/issues/873
+        const style = elem.style;
+        style.left = style.top = style.width  = '';
+    }
+
     @bind
     protected onMouseEnter(e: MouseEvent) {
         const dropdown = this.dropdown as Tooltip; 

package/components/tooltip/content.vdt

@@ -22,7 +22,12 @@ const classNameObj = {
 
 <t:super
     value={!!value && !this.isEmptyChildren}
-    transition={{name: 'k-fade', onEnter: this.onEnter}}
+    transition={{
+        name: 'k-fade',
+        onEnter: this.onEnter,
+        onAfterLeave: this.onAfterLeave,
+        onLeaveCancelled: this.onAfterLeave,
+    }}
     class={classNameObj}
 >
     <b:children>

package/components/tooltip/index.spec.ts

@@ -6,8 +6,9 @@ import ContentDemo from '~/components/tooltip/demos/content';
 import ConfirmDemo from '~/components/tooltip/demos/confirm';
 import AlwaysDemo from '~/components/tooltip/demos/always';
 import {Tooltip} from './';
-import {Radio} from '../radio';
+import {Dialog} from '../dialog';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+import { tooltip as tooltipTheme } from './styles';
 
 describe('Tooltip', () => {
     afterEach((done) => {
@@ -352,4 +353,59 @@ describe('Tooltip', () => {
         console.log(JSON.stringify(content.getBoundingClientRect()));
         expect(content.getBoundingClientRect().top < 0).to.be.true;
     });
+
+    it('should add className', async () => {
+        class Demo extends Component {
+            static template = `
+                const Tooltip = this.Tooltip;
+                <div>
+                    <Tooltip content="hello" class="a">
+                        <div ref="test" class="b">test</div>
+                    </Tooltip>
+                </div>
+            `;
+            Tooltip = Tooltip;
+        }
+
+        const [instance, element] = mount(Demo);
+        const trigger = instance.refs.test;
+        expect(trigger.className).to.eql('b a');
+
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const dropdown = getElement('.k-tooltip-content')!;
+        expect(dropdown.classList.contains('a')).to.be.true;
+    });
+
+    it('should fix the width in small container', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Tooltip, Dialog} = this;
+                <div style="text-align: right; position: relative; width: 300px;">
+                    <Tooltip content="这是一段很长的描述文字，这是一段很长的描述文字" container={dom => dom}>
+                        <span class="trigger">test</span>
+                    </Tooltip>
+                </div>
+            `
+            private Tooltip = Tooltip;
+            private Dialog = Dialog;
+        }
+
+        const [instance, element] = mount(Demo);
+        const trigger = element.querySelector<HTMLDivElement>('.trigger')!;
+        const expecedWidth = parseInt(tooltipTheme.maxWidth);
+
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const content = getElement('.k-tooltip-content')!;
+        const width = content.offsetWidth;
+        expect(width).to.eql(expecedWidth);
+
+        dispatchEvent(trigger, 'mouseleave');
+        await wait();
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const newWidth = content.offsetWidth;
+        expect(newWidth).to.eql(width);
+    });
 });

package/components/tooltip/styles.ts

@@ -31,7 +31,7 @@ const defaults = {
     smallPadding: '4px',
 };
 
-let tooltip: typeof defaults;
+export let tooltip: typeof defaults;
 setDefault(() => {
     tooltip = deepDefaults(theme, {tooltip: defaults}).tooltip;
 });

package/components/tooltip/tooltip.ts

@@ -49,6 +49,7 @@ const defaults = (): Partial<TooltipProps> => ({
     showArrow: true,
     theme: 'dark',
     position: {my: 'center bottom-10', at: 'center top', collision: 'flipfit'},
+    collison: 'flipfit',
     hoverable: false,
     always: false,
     confirm: false,
@@ -72,6 +73,13 @@ export class Tooltip<
     static defaults = defaults;
     static events = events;
 
+    show(shouldFocus: boolean = false) {
+        if (this.get('disabled')) return;
+
+        clearTimeout(this.timer);
+        this.set('value', true);
+    }
+
     hide(immediately: boolean) {
         if (this.get('always')) return;