@king-design/intact 3.6.0 → 3.6.2-beta.0

package/components/button/demos/basic.md

@@ -20,7 +20,6 @@ import {Button} from 'kpc';
     <Button type="flat">flat</Button>
     <Button color="red">custom</Button>
     <Button color="#0000ea">custom</Button>
-    <Button color="rgb(183, 18, 193)">custom</Button>
 </div>
 ```
 

package/components/copy/index.spec.ts

@@ -10,19 +10,18 @@ describe('Copy', () => {
     });
 
     it('should copy', async function() {
+        const spy = sinon.spy(navigator.clipboard, 'writeText');
         const [instance, element] = mount(BasicDemo);
         
         element.click();
-        try {
-            const text = await navigator.clipboard.readText();
-            expect(text).to.eql('Hello King Desgin!');
-        } catch (e) {
-            // Read permisson denied 
-            console.log(e);
-        }
+        await wait();
+        expect(spy.calledWith('Hello King Desgin!')).to.be.true;
+
+        spy.restore();
     });
 
     it('wrap copy with tooltip', async () => {
+        const spy = sinon.spy(navigator.clipboard, 'writeText');
         class Demo extends Component {
             static template = `
                 const { Tooltip, Copy } = this;
@@ -38,12 +37,8 @@ describe('Copy', () => {
 
         element.click();
         await wait();
-        try {
-            const text = await navigator.clipboard.readText();
-            expect(text).to.eql('test');
-        } catch (e) {
-            // Read permisson denied 
-            console.log(e);
-        }
+        expect(spy.calledWith('test')).to.be.true;
+
+        spy.restore();
     });
 });

package/components/datepicker/index.spec.ts

@@ -38,10 +38,10 @@ function getDateString(date: number) {
 }
 
 describe('Datepicker', () => {
-    // afterEach(async () => {
-        // unmount();
-        // await wait(500);
-    // });
+    afterEach(async () => {
+        unmount();
+        await wait(500);
+    });
 
     describe('Pick', () => {
         it('date', async () => {
@@ -151,37 +151,37 @@ describe('Datepicker', () => {
             expect(+_month - 1).eql(month);
         });
 
-        it('week', async () => {  
-            const [instance, element] = mount(YearMonthDemo);   
-            const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
-            const weekInput = inputs[2];  
+        // it('week', async () => {  
+            // const [instance, element] = mount(YearMonthDemo);   
+            // const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
+            // const weekInput = inputs[2];  
               
-            weekInput.click();  
-            await wait();
+            // weekInput.click();  
+            // await wait();
 
-            const content = getElement('.k-datepicker-content')!; 
-            const weekItem = content.querySelector('.week-row:nth-child(1) .k-week-number') as HTMLElement;  
-            weekItem.click();  
+            // const content = getElement('.k-datepicker-content')!; 
+            // const weekItem = content.querySelector('.week-row:nth-child(1) .k-week-number') as HTMLElement;  
+            // weekItem.click();  
             
-            expect(instance.get<string>('week')).to.match(/^\d{4}-\d+周$/)
-        });
+            // expect(instance.get<string>('week')).to.match(/^\d{4}-\d+周$/)
+        // });
         
-        it('quarter', async () => {  
-            const [instance, element] = mount(YearMonthDemo);   
-            const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
-            const QuarterInput = inputs[3];  
+        // it('quarter', async () => {  
+            // const [instance, element] = mount(YearMonthDemo);   
+            // const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
+            // const QuarterInput = inputs[3];  
               
-            QuarterInput.click();  
-            await wait();  
-            const content = getElement('.k-datepicker-content')!;  
+            // QuarterInput.click();  
+            // await wait();  
+            // const content = getElement('.k-datepicker-content')!;  
               
-            // 选择第一个季度  
-            const quarterItem = content.querySelector('.k-calendar-item:nth-child(1)') as HTMLElement;  
-            quarterItem.click();  
+            // // 选择第一个季度  
+            // const quarterItem = content.querySelector('.k-calendar-item:nth-child(1)') as HTMLElement;  
+            // quarterItem.click();  
               
-            // 验证输入框的值是否包含Q1
-            expect(instance.get<string>('quarter')).to.include('Q1')  
-        }); 
+            // // 验证输入框的值是否包含Q1
+            // expect(instance.get<string>('quarter')).to.include('Q1')  
+        // }); 
         
     });
 
@@ -1120,6 +1120,33 @@ describe('Datepicker', () => {
             await wait();
             expect(fn.callCount).to.eql(4);
         });
+
+        it('should trigger change event once', async () => {
+            const change = sinon.spy(() => console.log('change'));
+            class Demo extends Component<{value: string}> {
+                static template = `
+                    const {Datepicker} = this;
+                    <Datepicker range ev-$change:value={this.onChange} v-model="value" clearable />
+                `;
+                private Datepicker = Datepicker;
+
+                onChange() {
+                    change();
+                }
+            }
+            const [instance, element] = mount(Demo);
+            const input = element.querySelector<HTMLInputElement>('.k-input-inner')!;
+
+            input.click();
+            await wait();
+            const calendar = getElement('.k-datepicker-content')!;
+            const [day1, day2] = calendar.querySelectorAll<HTMLElement>('.k-calendar-item:not(.k-exceed)');
+            day1.click();
+            await wait();
+            day2.click();
+            await wait();
+            expect(change.callCount).to.eql(1);
+        });
     });
 
     it('should disable some time pickers', async () => {

package/components/datepicker/useValueBase.ts

@@ -214,8 +214,11 @@ export function useValueBase(
         }
 
         const valueStr = convertToValueString(_value); 
-        instance.set('value', valueStr);
-        instance.resetKeywords();
+        // only trigger change event once
+        if (!isEqualArray(valueStr, instance.get('value'))) {
+            instance.set('value', valueStr);
+            instance.resetKeywords();
+        }
     }
 
     // TODO

package/components/dropdown/constants.ts

@@ -0,0 +1,25 @@
+import {Component} from 'intact';
+import type {DropdownItem} from './item';
+
+export interface ItemEvents {
+    onFocusin: () => void;
+    onFocusout: () => void;
+    onShowMenu: () => void;
+    onHideMenu: () => void;
+    onSelect: () => void;
+}
+
+export enum Direction {
+    Up,
+    Down
+}
+
+export type MenuKeyboardMethods = {
+    reset: () => void;
+    focus: (item: DropdownItem) => void;
+}
+
+export type ItemComponent = Component<{disabled: boolean}>
+
+export const ITEM_EVENTS = 'ItemEvents';
+export const MENU_KEYBOARD = 'MenuKeyboard';

package/components/dropdown/item.ts

@@ -1,10 +1,9 @@
 import {Component, TypeDefs, inject, VNodeComponentClass} from 'intact';
 import template from './item.vdt';
 import {bind} from '../utils';
-import {useItemKeyboard, MenuKeyboardMethods} from './useKeyboard';
+import {useItemKeyboard} from './useItemKeyboard';
 import {Dropdown, DROPDOWN} from './dropdown';
 import {type DropdownMenu, DROPDOWN_MENU} from './menu';
-import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
 import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
 import { useConfigContext } from '../config';
 import type { Tooltip } from '../tooltip/tooltip';

package/components/dropdown/menu.ts

@@ -3,7 +3,7 @@ import template from './menu.vdt';
 import {bind} from '../utils';
 import {Dropdown, DROPDOWN} from './dropdown';
 import {useTransition} from './useTransition';
-import {useMenuKeyboard} from './useKeyboard';
+import {useMenuKeyboard} from './useMenuKeyboard';
 import {useMouseOutsidable} from '../../hooks/useMouseOutsidable';
 import {FeedbackCallback} from './usePosition';
 import { useConfigContext } from '../config';

package/components/dropdown/useItemKeyboard.ts

@@ -0,0 +1,38 @@
+import {useInstance, inject} from 'intact';
+import {useRecordItem} from '../../hooks/useRecordComponent';
+import {useState} from '../../hooks/useState';
+import type {DropdownItem} from './item';
+import { ItemEvents, MENU_KEYBOARD, MenuKeyboardMethods, ITEM_EVENTS } from './constants';
+
+export function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>) {
+    const isFocus = useState(false);
+    const keyboard = inject<MenuKeyboardMethods>(MENU_KEYBOARD)!;
+    const instance = useInstance() as DropdownItem;
+
+    useRecordItem<DropdownItem, ItemEvents>(ITEM_EVENTS, instance, {
+        ...itemEvents,
+        onFocusin() {
+            isFocus.set(true);
+        },
+        onFocusout() {
+            isFocus.set(false);
+        },
+    });
+
+    return {
+        onMouseEnter(e: MouseEvent) {
+            instance.trigger('mouseenter', e);
+            if (instance.get('disabled')) return;
+            keyboard.focus(instance);
+        },
+
+        onMouseLeave(e: MouseEvent) {
+            instance.trigger('mouseleave', e);
+            keyboard.reset();
+            // If it is a virtual item, it needs to be reset manually because the DOM is reused.
+            isFocus.set(false);
+        },
+
+        isFocus,
+    }
+}

package/components/dropdown/{useKeyboard.ts → useMenuKeyboard.ts}

@@ -5,47 +5,21 @@ import {
     useInstance,
     findDomFromVNode,
     provide,
-    inject,
     Component,
-    Children,
-    VNodeComponentClass,
     isComponentClass,
     isComponentFunction,
     hasVNodeChildren,
     hasMultipleChildren,
     VNode,
 } from 'intact';
-import {useRecordParent, useRecordItem} from '../../hooks/useRecordComponent';
+import {useRecordParent} from '../../hooks/useRecordComponent';
 import {useKeyboard} from '../../hooks/useKeyboard';
-import {useState} from '../../hooks/useState';
-import {eachChildren, isComponentVNode} from '../utils';
+import {isComponentVNode} from '../utils';
 import {DropdownItem} from './item';
 // can not import DropdownMenu from index.ts, otherwise it will cause circle reference
 // import {DropdownMenu} from './';
 import {DropdownMenu} from './menu';
-
-interface ItemEvents {
-    onFocusin: () => void;
-    onFocusout: () => void;
-    onShowMenu: () => void;
-    onHideMenu: () => void;
-    onSelect: () => void;
-}
-
-export enum Direction {
-    Up,
-    Down
-}
-
-export type MenuKeyboardMethods = {
-    reset: () => void;
-    focus: (item: DropdownItem) => void;
-}
-
-type ItemComponent = Component<{disabled: boolean}>
-
-const ITEM_EVENTS = 'ItemEvents';
-const MENU_KEYBOARD = 'MenuKeyboard';
+import { ITEM_EVENTS, ItemEvents, Direction, MenuKeyboardMethods, MENU_KEYBOARD } from './constants';
 
 export function useMenuKeyboard() {
     const items: DropdownItem[] = [];
@@ -178,39 +152,6 @@ export function useMenuKeyboard() {
     ] as const;
 }
 
-export function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>) {
-    const isFocus = useState(false);
-    const keyboard = inject<MenuKeyboardMethods>(MENU_KEYBOARD)!;
-    const instance = useInstance() as DropdownItem;
-
-    useRecordItem<DropdownItem, ItemEvents>(ITEM_EVENTS, instance, {
-        ...itemEvents,
-        onFocusin() {
-            isFocus.set(true);
-        },
-        onFocusout() {
-            isFocus.set(false);
-        },
-    });
-
-    return {
-        onMouseEnter(e: MouseEvent) {
-            instance.trigger('mouseenter', e);
-            if (instance.get('disabled')) return;
-            keyboard.focus(instance);
-        },
-
-        onMouseLeave(e: MouseEvent) {
-            instance.trigger('mouseleave', e);
-            keyboard.reset();
-            // If it is a virtual item, it needs to be reset manually because the DOM is reused.
-            isFocus.set(false);
-        },
-
-        isFocus,
-    }
-}
-
 function fixIndex(index: number, max: number) {
     if (index > max) {
         index = 0;

package/components/form/form.ts

@@ -71,6 +71,10 @@ export class Form extends Component<FormProps, FormEvents> {
         });
     }
 
+    public getAllInvalidFormItems() {
+        return this.items.filter(item => !item.isValid());
+    }
+
     public submit(e: Event) {
         this.validate().then(valid => {
             if (valid) {

package/components/form/index.md

@@ -63,7 +63,8 @@ export declare type ClassName = string | ((value: any, param: any) => string)
 | --- | --- | --- | --- |
 | validate | 验证表单所有规则 | - | `Promise<boolean>`: `.then(valid => {})`，`valid`为`true`验证成功，否则失败 |
 | reset | 重置表单验证状态 | - | `undefined` |
-| getFirstInvalidFormItem | 获取第一条出错的`FormItem` | - | `FormItem` |
+| getFirstInvalidFormItem | 获取第一条校验失败的`FormItem` | - | `FormItem` |
+| getAllInvalidFormItems | 获取所有校验失败的`FormItem` | - | `FormItem[]` |
 
 # 静态方法
 

package/components/form/index.spec.ts

@@ -33,6 +33,8 @@ describe('Form', () => {
         expect(element.innerHTML).to.matchSnapshot();
         const item = form.getFirstInvalidFormItem()!;
         expect(item.get('label')).to.eql('Input');
+        const items = form.getAllInvalidFormItems();
+        expect(items.length).to.eql(10);
 
         instance.reset();
         await wait();

package/components/menu/demos/horizontal.md

@@ -27,7 +27,13 @@ import {Menu, MenuItem, Switch, Icon} from 'kpc';
                 </MenuItem>
             </Menu>
         </MenuItem>
-        <MenuItem key="4"><Icon class="ion-gear-b" />menu 4</MenuItem>
+        <MenuItem key="4">
+            <Icon class="ion-gear-b" />menu 4
+            <Menu>
+                <MenuItem key="4-1">sub menu 1</MenuItem>
+                <MenuItem key="4-2">sub menu 2</MenuItem>
+            </Menu>
+        </MenuItem>
     </Menu>
     <br /><br />
     <Switch 

package/components/menu/index.spec.ts

@@ -3,6 +3,7 @@ import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import CollapseArrowDemo from '~/components/menu/demos/showCollapseArrow';
+import HorizontalDemo from '~/components/menu/demos/horizontal';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
 import {Menu, MenuItem} from './';
 
@@ -190,4 +191,22 @@ describe('Menu', () => {
         expect(element.outerHTML).to.matchSnapshot();
         expect(getElement('.k-menu-arrow-box')).to.be.undefined;
     });
+
+    it('detecting pop-up position during rapid mouse hover over menus', async () => {
+        const [instance, element] = mount(HorizontalDemo);
+
+        const [, , menu3, menu4] = element.querySelectorAll<HTMLElement>('.k-menu-item-title');
+        dispatchEvent(menu3, 'mouseenter');
+        await wait(500);
+        const dropdownmenu1 = getElement('.k-dropdown-menu')!;
+        const top1 = dropdownmenu1.getBoundingClientRect().top;
+
+        dispatchEvent(menu3, 'mouseleave');
+        dispatchEvent(menu4, 'mouseenter');
+        await wait(1000);
+        const dropdownmenu2 = getElement('.k-dropdown-menu')!;
+        const top2 = dropdownmenu2.getBoundingClientRect().top;
+
+        expect(top1).to.eql(top2);
+    });
 });

package/components/menu/styles.ts

@@ -18,7 +18,7 @@ const defaults = {
     item: {
         height: '40px',
         padding: '0 12px',
-        bodyPadding: '0 4px',
+        bodyPadding: '4px',
         color: '#aeaeb9',
         hoverColor: '#fff',
         disabledColor: '#53535a',
@@ -292,6 +292,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
         &.${k}-dropdown-menu {
             width: fit-content;
             min-width: ${menu.dropdown.minWidth};
+            position: absolute;
             .${k}-menu-item-arrow {
                 transform: rotate(-90deg)
             }

package/components/select/index.spec.ts

@@ -12,9 +12,9 @@ import SearchableDemo from '~/components/select/demos/searchable';
 import ImmutableDemo from '~/components/select/demos/immutable';
 
 describe('Select', () => {
-    afterEach((done) => {
+    afterEach(async () => {
         unmount();
-        setTimeout(done, 500);
+        await wait(500);
     });
 
     it('should select value correctly', async () => {
@@ -188,6 +188,39 @@ describe('Select', () => {
         expect(dropdown2.innerHTML).to.matchSnapshot();
     });
 
+    it('should select the first card of group on filtering', async () => {
+        const [instance, element] = mount(GroupDemo);
+
+        instance.set<string>('day', 'Saturday');
+        await wait();
+        const [, trigger] = element.querySelectorAll<HTMLElement>('.k-select');
+        trigger.click();
+        await wait();
+        const dropdown = getElement('.k-select-menu')!;
+        defaultStatusTest();
+
+        // filter
+        const input = trigger.querySelector('.k-input-inner') as HTMLInputElement;
+        input.value = 'm';
+        dispatchEvent(input, 'input');
+        await wait();
+        const firstTab = dropdown.querySelector('.k-tab') as HTMLElement;
+        expect(firstTab.classList.contains('k-active')).to.eql(true);
+
+        // clear
+        input.value = '';
+        dispatchEvent(input, 'input');
+        await wait();
+        defaultStatusTest();
+
+        function defaultStatusTest() {
+            const secondTab = dropdown.querySelector('.k-tab:nth-child(2)') as HTMLElement;
+            const item = dropdown.querySelector('.k-dropdown-item') as HTMLElement;
+            expect(secondTab.classList.contains('k-active')).to.eql(true);
+            expect(item.classList.contains('k-active')).to.eql(true);
+        }
+    });
+
     it('keyboard operations', async () => {
         const [instance, element] = mount(BasicDemo);
 

package/components/select/menu.ts

@@ -12,7 +12,7 @@ export class SelectMenu extends Component<{values: any[]}> {
     static template = template;
 
     public select: Select<any, boolean> = inject(SELECT)!;
-    private card = useCard(this.select.label.activeIndices);
+    private card = useCard(this.select.label.activeIndices, this.select.input.keywords);
     private searchable = useSearchable();
     private config = useConfigContext();
 }

package/components/select/useCard.ts

@@ -2,13 +2,31 @@ import {Component, TypeDefs, useInstance, Children, Blocks, createRef, NonNullab
 import {eachChildren, isComponentVNode, last} from '../utils';
 import {EMPTY_OBJ} from 'intact-shared';
 import {OptionGroup} from './group';
-import {useState} from '../../hooks/useState';
+import {useState, State, watchState} from '../../hooks/useState';
+import type { SelectMenu } from './menu';
 
-export function useCard(defaultActiveIndex: NonNullableRefObject<number[]>) {
-    const children = useInstance()!.get('children');
+export function useCard(
+    defaultActiveIndex: NonNullableRefObject<number[]>,
+    keywords: State<string>
+) {
+    const instance = useInstance() as SelectMenu;
     const activeIndex = useState<number>(last(defaultActiveIndex.value) || 0);
 
-    function process(children: Children) {
+    watchState(keywords, (keywords) => {
+        if (keywords) {
+            activeIndex.set(0);
+        } else {
+            setDefaultActiveIndex();
+        }
+    });
+
+    instance.select.on('show', setDefaultActiveIndex);
+
+    function setDefaultActiveIndex() {
+        activeIndex.set(last(defaultActiveIndex.value) || 0);
+    }
+
+    function process(children: Children, isSearching: boolean) {
         const groupLabels: Children[] | Blocks[string][] = [];
         const _children: Children[] = [];
         let index = 0;

package/components/spinner/index.spec.ts

@@ -227,6 +227,24 @@ describe('Spinner', () => {
         expect(instance.get('value1')).to.eql(8.4);
     });
 
+    it('forceStep without min value', async () => {
+        class Demo extends Component {
+            static template = `const {Spinner} = this;
+                <Spinner step={1} v-model="value" forceStep />
+            `;
+            static defaults() {
+                return {value: 1};
+            }
+            private Spinner = Spinner;
+        }
+        const [instance, element] = mount(Demo);
+        expect(instance.get('value')).to.eql(1);
+
+        instance.set<number>('value', -1);
+        await wait();
+        expect(instance.get('value')).to.eql(-1);
+    });
+
     it('dynamic step', async () => {
         const [instance, element] = mount(DynamicStepDemo);
 

package/components/spinner/useValue.ts

@@ -78,7 +78,8 @@ export function minMaxStep(value: number, min: number, max: number, step: number
     if (value >= max) return max;
     if (value <= min) return min;
     if (step) {
-        value = Number((Math.round((value - min) / step) * step + min).toFixed(10))
+        let _min = min === -Infinity ? 0 : min;
+        value = Number((Math.round((value - _min) / step) * step + _min).toFixed(10))
         // value = Number((Math.round(value / step) * step).toFixed(10))
         return minMaxStep(value, min, max, null);
     }