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

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);
+    });
 });

package/components/input/index.ts

@@ -6,9 +6,11 @@ import {isNullOrUndefined, EMPTY_OBJ} from 'intact-shared';
 import {useAutoWidth} from './useAutoWidth';
 import {useFrozen} from './useFrozen';
 import {CommonInputHTMLAttributes, Events} from '../types';
+import {useAutoRows} from './useAutoRows';
+import { useShowPassword } from './useShowPassword';
 export * from './search';
 
-type HTMLInputTypes =
+export type HTMLInputTypes =
     | 'textarea' // for textarea
     | 'button'
     | 'checkbox'
@@ -56,7 +58,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     clearable?: boolean
     disabled?: boolean
     size?: Sizes
-    rows?: string | number
+    rows?: string | number | 'auto' | AutoRows
     autoWidth?: boolean
     fluid?: boolean
     width?: number | string
@@ -64,8 +66,15 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     frozenOnInput?: boolean
     inline?: boolean
     waveDisabled?: boolean
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+    showPassword?: boolean
 }
 
+export type AutoRows = {
+    min?: number
+    max?: number
+} 
+
 export interface InputEvents {
     clear: [MouseEvent]
     focus: [FocusEvent]
@@ -89,7 +98,7 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     clearable: Boolean,
     disabled: Boolean,
     size: sizes,
-    rows: [String, Number],
+    rows: [String, Number, 'auto', Object],
     autoWidth: Boolean,
     fluid: Boolean,
     width: [Number, String],
@@ -97,12 +106,15 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     frozenOnInput: Boolean,
     inline: Boolean,
     waveDisabled: Boolean,
+    resize: ['none', 'vertical', 'horizontal', 'both'],
+    showPassword: Boolean,
 }
 
 const defaults = (): Partial<InputProps> => ({
     type: 'text', // text | textarea
     size: 'default',
     rows: 2,
+    resize: 'vertical',
 });
 
 const events: Events<InputEvents> = {
@@ -121,6 +133,8 @@ export class Input<V extends Value = Value> extends Component<InputProps<V>, Inp
     private inputRef = createRef<HTMLInputElement>();
     private autoWidth = useAutoWidth();
     private frozen = useFrozen();
+    private autoRows = useAutoRows(this.inputRef);
+    private showPassword = useShowPassword();
 
     focus() {
         this.inputRef.value!.focus();

package/components/input/index.vdt

@@ -1,7 +1,7 @@
 import {Icon} from '../icon';
 import {addStyle, isTextBlock, getRestProps} from '../utils';
 import {makeStyles} from './styles';
-import {noop, isNullOrUndefined} from 'intact-shared';
+import {noop, isNullOrUndefined, isStringOrNumber} from 'intact-shared';
 import {Wave} from '../wave';
 import {context as ErrorContext} from '../form/useError';
 
@@ -9,7 +9,7 @@ const {
     className, style, type, value, defaultValue, placeholder,
     clearable, disabled, size, rows, autoWidth, fluid,
     width, stackClearIcon, frozenOnInput, readonly, inline,
-    waveDisabled,
+    waveDisabled, resize,
     
     'ev-click': click,
     'ev-mounseenter': mouseenter,
@@ -24,6 +24,8 @@ const {
     startInput, onInput, endInput
 } = this.frozen;
 
+const isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
+
 const classNameObj = {
     'k-input': true,
     [`k-${size}`]: size !== 'default',
@@ -36,11 +38,21 @@ const classNameObj = {
     'k-fluid': fluid,
     'k-stack-clear': stackClearIcon,
     'k-inline': inline,
+    [`k-resize-${resize}`]: type === 'textarea' && isNotAutoRows,
+    [`k-resize-none`]: type === 'textarea' && !isNotAutoRows,
     [className]: className,
     [makeStyles()]: true,
 }
 
+const {
+    isShow: isShowPassword,
+    toggleShow: toggleShowPassword,
+    type: showPasswordType,
+    showIcon: showPasswordIcon,
+} = this.showPassword;
+
 const {fakeRef, width: {value: fakeWidth}} = this.autoWidth;
+const height = this.autoRows;
 
 const inputValue = frozenOnInput && inputing ? originalValue : value;
 const hasInputValue = !isNullOrUndefined(inputValue);
@@ -55,7 +67,7 @@ const inputProps = {
     placeholder,
     disabled,
     ref: this.inputRef,
-    style: autoWidth ? {width: fakeWidth + 'px'} : undefined,
+    style: autoWidth && fakeWidth ? {width: fakeWidth + 'px'} : undefined,
 };
 // if we pass value to input element, the input is controlled and the
 // defaultValue does not work
@@ -90,14 +102,25 @@ if (hasInputValue) {
                     <input v-if={type !== 'textarea'}
                         {...inputProps}
                         class="k-input-inner" 
-                        type={type}
+                        type={showPasswordType.value}
                     />
                     <textarea v-else 
                         {...inputProps}
                         class="k-input-inner k-textarea"
-                        rows={rows}
+                        rows={isNotAutoRows ? rows : 1}
+                        style={height.value ? addStyle(inputProps.style, { height: height.value + 'px' }) : inputProps.style}
                     ></textarea>
-                    <div class="k-input-suffix" v-if={$blocks.suffix || clearable && !disabled}>
+                    <div class="k-input-suffix" v-if={$blocks.suffix || clearable && !disabled || showPasswordIcon.value}>
+                        <template v-if={showPasswordIcon.value}>
+                            <Icon hoverable
+                                class={{
+                                    "k-input-show-password": true,
+                                    "ion-eye-disabled": !isShowPassword.value,
+                                    "ion-eye": isShowPassword.value,
+                                }}
+                                ev-click={toggleShowPassword}
+                            />{' '}
+                        </template>
                         <Icon v-if={clearable && !disabled}
                             class={{
                                 "k-input-clear ion-ios-close": true, 

package/components/input/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
+import {Input} from './';
 
 const defaults = deepDefaults(
     {
@@ -24,7 +25,7 @@ const defaults = deepDefaults(
         clearIconGap: '3px',
         
         // textarea
-        get textareaPadding() { return `5px ${input.paddingGap}` },
+        get textareaPadding() { return `6px ${input.paddingGap}` },
 
         // group
         get groupBgColor() { return theme.color.bg },
@@ -129,6 +130,11 @@ export function makeStyles() {
             pointer-events: all;
         }
 
+        // show password
+        .k-input-show-password {
+            color: ${input.clearIconColor};
+        }
+
         // stack clear icon
         &.k-stack-clear {
             .k-input-clear {
@@ -282,6 +288,15 @@ export function makeStyles() {
             line-height: 1.5;
             vertical-align: top;
         }
+        ${(Input.typeDefs.resize as string[]).map(type => {
+            return css`
+                &.k-resize-${type} {
+                    .k-textarea {
+                        resize: ${type};
+                    }
+                }
+            `
+        })}
 
         // fake dom for get value's width
         .k-input-fake {
@@ -292,7 +307,9 @@ export function makeStyles() {
         }
         &.k-auto-width {
             width: auto;
+            max-width: 100%;
             .k-input-inner {
+                max-width: 100%;
                 box-sizing: content-box;
             }
         }

package/components/input/useAutoRows.ts

@@ -0,0 +1,65 @@
+import {useInstance, createRef, onMounted, RefObject, watch} from 'intact';
+import type {Input} from './';
+import {useState} from '../../hooks/useState';
+import { isObject } from 'intact-shared';
+
+export function useAutoRows(inputRef: RefObject<HTMLInputElement>) {
+    const instance = useInstance() as Input;
+    const height = useState<number>(0);
+
+    let lineHeight: number;
+    let paddingTop: number;
+    let paddingBottom: number;
+    let isBorderBox: boolean;
+
+    function getStyles() {
+        if (instance.get('type') === 'textarea') {
+            const styles = getComputedStyle(inputRef.value!);
+
+            lineHeight = parseInt(styles.lineHeight); 
+            paddingTop = parseInt(styles.paddingTop); 
+            paddingBottom = parseInt(styles.paddingBottom); 
+            isBorderBox = styles.boxSizing === 'border-box';
+        }
+    }
+
+    onMounted(getStyles);
+    instance.watch('type', getStyles, { presented: true });
+
+    instance.watch('value', adjust, {inited: true, presented: true});
+    instance.watch('placeholder', adjust, {inited: true, presented: true});
+    instance.watch('rows', adjust, {inited: true, presented: true});
+    onMounted(adjust);
+    
+    function adjust() {
+        const { rows, type } = instance.get();
+        if (type === 'textarea' && (rows === 'auto' || isObject(rows))) {
+            const textarea = inputRef.value!;
+            const originheight = textarea.style.height; 
+            // we shuold remove height before get scrollHeight,
+            // otherwise we cannot shrink the height when we remove the text
+            textarea.style.height = '';
+            const scrollHeight = textarea.scrollHeight;
+            const lines = (scrollHeight - paddingTop - paddingBottom) / lineHeight;
+            textarea.style.height = originheight;
+
+            let actualLines = lines;
+            if (rows !== 'auto') {
+                const { min, max } = rows;
+                if (min && lines <= min) {
+                    actualLines = min;
+                }
+                if (max && lines >= max) {
+                    actualLines = max;
+                }
+            }
+            height.set(lineHeight * actualLines + (isBorderBox ? paddingTop + paddingBottom + 2 /* border */ : 0));
+
+            return;
+        }
+
+        height.set(0);
+    }
+
+    return height;
+}

package/components/input/useAutoWidth.ts

@@ -1,4 +1,4 @@
-import {useInstance, createRef, onMounted} from 'intact';
+import {useInstance, createRef, onMounted, nextTick} from 'intact';
 import type {Input} from './';
 import {useState} from '../../hooks/useState';
 
@@ -13,10 +13,19 @@ export function useAutoWidth() {
 
     function adjustWidth() {
         if (instance.get('autoWidth')) {
-            const _width = fakeRef.value!.offsetWidth || 1;
-            width.set(_width);
+            nextTick(() => {
+                const fakeElem = fakeRef.value;
+                if (isVisible(fakeElem)) {
+                    const _width = fakeElem!.offsetWidth || 1;
+                    width.set(_width);
+                }
+            });
         }
     }
 
     return {fakeRef, width};
 }
+
+function isVisible(elem: HTMLDivElement | null) {
+    return elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+}

package/components/input/useShowPassword.ts

@@ -0,0 +1,27 @@
+import {useInstance, createRef, onMounted, RefObject, watch} from 'intact';
+import type {Input, HTMLInputTypes} from './';
+import {useState} from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
+
+export function useShowPassword() {
+    const instance = useInstance() as Input;
+    const isShow = useState(false);
+    const type = useState<HTMLInputTypes | undefined>(undefined);
+    const showIcon = useState(false);
+
+    instance.on('$receive:type', (_type) => {
+        type.set(_type);
+    });
+
+    useReceive<Input>(['type', 'showPassword'], () => {
+        const { showPassword, type } = instance.get();
+        showIcon.set(type === 'password' && !!showPassword);
+    });
+
+    function toggleShow() {
+        isShow.set(!isShow.value);
+        type.set(isShow.value ? 'text' : 'password');
+    }
+
+    return { isShow, type, toggleShow, showIcon };
+}

package/components/pagination/index.spec.ts

@@ -5,7 +5,7 @@ import DisableDemo from '~/components/pagination/demos/disable';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
 
 describe('Pagination', () => {
-    afterEach(() => unmount());
+    // afterEach(() => unmount());
 
     it('basic test', async () => {
         const [instance, element] = mount(BasicDemo);

package/components/pagination/index.ts

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

package/components/portal.ts

@@ -46,7 +46,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         nextVNode: VNodeComponentClass<this>,
         parentDom: Element,
         anchor: IntactDom | null,
-        mountedQueue: Function[]
+        mountedQueue: Function[] & { priority?: Function[] } // in React, it has priority property to add some prior functions
     ) {
         /**
          * In React, we cannot render real elements in mountedQueue.
@@ -56,7 +56,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         const nextProps = nextVNode.props!;
         const fakeContainer = document.createDocumentFragment();
 
-        mountedQueue.push(() => {
+        (mountedQueue.priority || mountedQueue).push(() => {
             const parentDom = this.$lastInput!.dom!.parentElement!;
             this.initContainer(nextProps.container, parentDom, anchor);
             this.container!.appendChild(fakeContainer);
@@ -79,7 +79,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         nextVNode: VNodeComponentClass<this>,
         parentDom: Element, 
         anchor: IntactDom | null,
-        mountedQueue: Function[],
+        mountedQueue: Function[] & { priority?: Function[] },
         force: boolean, 
     ) {
         // update container if it has changed
@@ -121,7 +121,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
 
         if (!this.container) {
             // in react, sometimes $update will be called before mountedQueue in $render
-            mountedQueue.push(update);
+            (mountedQueue.priority || mountedQueue).push(update);
         } else {
             update();
         }

package/components/position.ts

@@ -1,3 +1,5 @@
+import { isArray } from 'intact-shared';
+
 export type Options = {
     of?: Window | HTMLElement | Document | MouseEvent 
     at?: string | [string, string]
@@ -265,7 +267,9 @@ export default function position(elem: HTMLElement, options: Options) {
     } = getDimensions(target);
     const basePosition = Object.assign({}, targetOffset);
     // don't detect collison if the target is not in viewport
-    const collision = isInViewport(targetRect) ? (options.collision as string || 'flip').split(' ') : ['none', 'none'];
+    const collision = isInViewport(targetRect)
+        ? (!isArray(options.collision) ? (options.collision || 'flip').split(' ') : options.collision)
+        : ['none', 'none'];
     const offsets = {} as {my: [string, string], at: [string, string]};
     const within = getWithinInfo(options.within);
     const scrollInfo = getScrollInfo(within);

package/components/select/base.ts

@@ -12,7 +12,7 @@ import {SELECT} from './constants';
 import type {Input} from '../input';
 import {useShowHideEvents} from '../../hooks/useShowHideEvents';
 import {bind} from '../utils';
-import {Dropdown} from '../dropdown';
+import {Dropdown, DropdownProps} from '../dropdown';
 import {State} from '../../hooks/useState';
 import {useInput} from './useInput';
 import {Container} from '../portal';
@@ -36,6 +36,7 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     container?: Container
     width?: string | number
     show?: boolean
+    position?: DropdownProps['position']
 }
 
 export interface BaseSelectEvents {
@@ -68,6 +69,7 @@ const typeDefs: Required<TypeDefs<BaseSelectProps<any>>> = {
     container: [Function, String],
     width: [String, Number],
     show: Boolean,
+    position: Dropdown.typeDefs.position,
 };
 
 const defaults = (): Partial<BaseSelectProps<any>> => ({

package/components/select/base.vdt

@@ -15,6 +15,7 @@ const {
     clearable, filterable,
     className, container,
     inline, style, width, show,
+    position,
 } = this.get();
 
 const classNameObj = {
@@ -43,6 +44,7 @@ const {onFocusout, triggerRef} = this.focusout;
                 disabled={disabled}
                 container={container}
                 v-model="show"
+                position={position}
             >
                 <div {...getRestProps(this)} 
                     class={classNameObj}

package/components/select/index.md

@@ -32,8 +32,18 @@ sidebar: doc
 | card | 是否展示`card`模式 | `boolean` | `false` |
 | autoDisableArrow | 是否在没有更多可选项时，给箭头一个`disabled`状态来提示用户 | `boolean` | `false` |
 | show | 是否展示菜单项 | `boolean` | `false` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
 
 ```ts
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
 ```
 
@@ -60,7 +70,7 @@ export type Container = string | ((parentDom: Element, anchor: Node | null) => E
 | --- | --- | --- |
 | value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
 | values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
-| prefix | 自定义输入款前面展示的内容 | - |
+| prefix | 自定义输入框前面展示的内容 | - |
 | suffix | 自定义输入框后面展示的内容 | - |
 | menu | 自定义整个菜单的内容 | - |
 

package/components/table/cell.ts

@@ -35,11 +35,10 @@ export class TableCell extends Component<TableCellProps> {
 
         let isSame = true;
         for (const key in lastProps) {
-            if (lastProps[key] !== nextProps[key]) {
-                isSame = false;
-                break;
-            }
-            if (key === 'props' && nextProps.props.$blocks) {
+            if (
+                lastProps[key] !== nextProps[key] ||
+                key === 'props' && nextProps.props.$blocks
+            ) {
                 isSame = false;
                 break;
             }

package/components/table/demos/hideHeader.md

@@ -0,0 +1,33 @@
+---
+title: 隐藏表头
+order: 29
+---
+
+添加`hideHeader`属性，即可隐藏表头
+
+```vdt
+import {Table, TableColumn, Switch} from 'kpc';
+
+<div>
+    <p>hideHeader: <Switch v-model="hideHeader" /></p>
+    <Table data={this.get('data')} resizable hideHeader={this.get('hideHeader')}>
+        <TableColumn key="a" title="Title 1" />
+        <TableColumn key="b" title="Title 2" />
+    </Table>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [
+                {a: 'Cell 1-1', b: 'Cell 1-2'},
+                {a: 'Cell 2-1', b: 'Cell 2-2'}
+            ],
+            hideHeader: true,
+        };
+    }
+}
+```