@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.1

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
@@ -63,7 +63,7 @@ function useKeyboardForDropdownMenu(dropdown: Dropdown) {
     const focus = () => focusByIndex(0);
 
     // In Cascader the menu may have been replaced by another menu, in this case,
-    // if the dropdown has showed on mount the menu, add keydown listener
+    // if the dropdown has showed while we mounted the menu, add keydown listener
     if (dropdown.get('value')) {
         onShow();
     }
@@ -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/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/form/item.vdt

@@ -68,7 +68,7 @@ const {ellipsis, message, errorRef} = this.error;
                     {message.value}
                 </div>
                 <Tooltip hoverable position="bottom">
-                    <Icon class="ion-ios-information-outline k-form-error-more" size="small" />
+                    <Icon class="ion-ios-information-outline k-form-error-more" size="small" color="inherit" />
                     <b:content>
                         {message.value}
                     </b:content>

package/components/form/styles.ts

@@ -7,9 +7,9 @@ const defaults = {
     item: {
         gap: `24px`,
         labelWidth: `80px`,
-        get labelLineHeight() { return theme.default.height },
+        get labelHeight() { return theme.default.height },
         labelTextAlign: 'right',
-        labelGap: '10px',
+        labelGap: '16px',
         get starColor() { return theme.color.danger },
         starGap: '3px',
 
@@ -40,29 +40,27 @@ setDefault(() => {
 
 export function makeItemStyles() {
     return css`
-        display: table;
+        display: flex;
         position: relative;
-        table-layout: fixed;
         &:not(:last-of-type) {
             margin-bottom: ${form.item.gap};
         }
-        &.k-fluid {
-            width: 100%;
+        &.k-fluid > .k-form-content {
+            flex: 1;
         }
         .k-form-label {
-            display: table-cell;
+            display: flex;
+            align-items: center;
+            justify-content: ${form.item.labelTextAlign === 'right' ? 'end' : 'start'};
             width: ${form.item.labelWidth};
-            text-align: ${form.item.labelTextAlign};
             padding-right: ${form.item.labelGap};
-            line-height: ${form.item.labelLineHeight};
+            max-height: ${form.item.labelHeight};
         }
         .k-form-star {
             color: ${form.item.starColor};
             margin-right: ${form.item.starGap};
         }
         .k-form-content {
-            display: table-cell;
-            vertical-align: middle;
             position: relative;
         }
 
@@ -106,17 +104,15 @@ export function makeItemStyles() {
         }
 
         // nested
-        .k-form-item {
-            &,
-            .k-form-content {
-                display: block;
-                width: auto;
-            }
-        }
+        // .k-form-item {
+            // &,
+            // .k-form-content {
+                // width: auto;
+            // }
+        // }
 
         // append
         .k-form-append {
-            display: table-cell;
             padding: ${form.item.appendPadding};
             vertical-align: middle;
         }
@@ -128,7 +124,7 @@ export function makeFormStyles() {
         // layout
         &.k-inline {
             .k-form-item {
-                display: inline-block;
+                display: inline-flex;
                 vertical-align: top;
                 margin-right: ${form.item.inlineGap};
             }
@@ -137,15 +133,14 @@ export function makeFormStyles() {
             }
         }
         &.k-vertical {
-            .k-form-item,
-            .k-form-label,
-            .k-form-content {
-                display: block;
+            .k-form-item {
+                flex-direction: column;
             }
             .k-form-label {
                 width: auto;
                 text-align: left;
-                line-height: inherit;
+                padding: 0;
+                justify-content: start;
                 margin-bottom: ${form.item.verticalLabelGap};
             }
         }

package/components/grid/useGutter.ts

@@ -1,15 +1,16 @@
 import {useInstance} from 'intact';
 import {createContext} from '../context';
 import {hasDocumentAvailable, isObject, isNullOrUndefined} from 'intact-shared';
-import type * as EnquireJs from 'enquire.js';
+// import type * as EnquireJs from 'enquire.js';
+import enquire from 'enquire.js';
 import type {Row} from './row';
 import {useState} from '../../hooks/useState';
 import {Breakpoint, responsiveMap} from './constants';
 
-let enquire: typeof EnquireJs;
-if (hasDocumentAvailable) {
-    enquire = require('enquire.js');
-}
+// let enquire: typeof EnquireJs;
+// if (hasDocumentAvailable) {
+    // enquire = require('enquire.js');
+// }
 
 export const context = createContext<number>(0);
 
@@ -24,7 +25,7 @@ export function useGutter() {
         xs: false,
     });
 
-    if (enquire) {
+    if (hasDocumentAvailable) {
         for (const key in responsiveMap) {
             enquire.register(responsiveMap[key as Breakpoint], {
                 match() {

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/flat.md

@@ -0,0 +1,16 @@
+---
+title: 扁平化样式 
+order: 10
+---
+
+添加`flat`属性，展示扁平化样式
+
+```vdt
+import {Input} from 'kpc';
+
+<div>
+    <Input placeholder="Please enter" flat />
+    <br /><br />
+    <Input placeholder="Please enter" flat value="disabled" disabled />
+</div>
+```

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