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

package/components/input/demos/clearable.md

@@ -14,11 +14,11 @@ import {Input, Icon} from 'kpc';
     <Input value="disabled" clearable disabled />
     <br />
     <Input clearable placeholder="please enter">
-        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
     <br />
     <Input clearable stackClearIcon placeholder="please enter">
-        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
 </div>
 ```

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

@@ -0,0 +1,18 @@
+---
+title: 展示提示数字
+order: 11
+---
+
+添加`showCount`属性，展示字符长度提示数字
+
+```vdt
+import {Input} from 'kpc';
+
+<div>
+    <Input placeholder="Please enter" showCount />
+    <br /><br />
+    <Input placeholder="Please enter" showCount maxlength="10" />
+    <br /><br />
+    <Input type="textarea" placeholder="please enter" showCount maxlength="100" />
+</div>
+```

package/components/input/demos/size.md

@@ -6,8 +6,7 @@ order: 2
 添加`size`属性，定义如下尺寸：`large`, `default`，`small`，`mini`
 
 ```vdt
-import {Input} from 'kpc';
-import {Button} from 'kpc';
+import {Input, Button, Icon} from 'kpc';
 
 <div>
     <Input size="large" value="large" />
@@ -15,18 +14,21 @@ import {Button} from 'kpc';
     <Input value="default" />
     <br />
     <Input value="small" size="small" />
+    <br />
     <Input size="small" placeholder="please enter">
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
     </Input>
+    <br />
     <Input size="small" placeholder="please enter">
         <b:prefix><i class="ion-earth"></i></b:prefix>
-        <b:append><Button size="small" icon type="primary"><i class="ion-ios-search"></i></Button></b:append>
+        <b:append><Button size="small" icon type="primary"><Icon class="k-icon k-icon-search" size="small" /></Button></b:append>
     </Input>
+    <br />
     <Input size="small" placeholder="please enter" clearable>
         <b:append><Button type="primary" size="small">Search</Button></b:append>
     </Input>
-
+    <br />
     <Input value="mini" size="mini" />
 </div>
 ```

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

package/components/input/index.ts

@@ -1,14 +1,16 @@
 import {Component, TypeDefs, createRef, watch, nextTick, onMounted, RefObject} from 'intact';
 import {Sizes, sizes} from '../../styles/utils';
 import template from './index.vdt';
-import {bind} from '../utils';
-import {isNullOrUndefined, EMPTY_OBJ} from 'intact-shared';
+import {bind, selectValue} from '../utils';
 import {useAutoWidth} from './useAutoWidth';
 import {useFrozen} from './useFrozen';
 import {CommonInputHTMLAttributes, Events} from '../types';
+import {useAutoRows} from './useAutoRows';
+import { useShowPassword } from './useShowPassword';
+import { useFocus } from './useFocus';
 export * from './search';
 
-type HTMLInputTypes =
+export type HTMLInputTypes =
     | 'textarea' // for textarea
     | 'button'
     | 'checkbox'
@@ -32,6 +34,7 @@ type HTMLInputTypes =
     | 'time'
     | 'url'
     | 'week'
+    | 'maxlength'
     | (string & {});
 
 interface InputHTMLAttributes extends CommonInputHTMLAttributes {
@@ -56,7 +59,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 +67,17 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     frozenOnInput?: boolean
     inline?: boolean
     waveDisabled?: boolean
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+    showPassword?: boolean
+    flat?: boolean
+    showCount?: boolean
 }
 
+export type AutoRows = {
+    min?: number
+    max?: number
+} 
+
 export interface InputEvents {
     clear: [MouseEvent]
     focus: [FocusEvent]
@@ -89,7 +101,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 +109,17 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     frozenOnInput: Boolean,
     inline: Boolean,
     waveDisabled: Boolean,
+    resize: ['none', 'vertical', 'horizontal', 'both'],
+    showPassword: Boolean,
+    flat: Boolean,
+    showCount: Boolean,
 }
 
 const defaults = (): Partial<InputProps> => ({
     type: 'text', // text | textarea
     size: 'default',
     rows: 2,
+    resize: 'vertical',
 });
 
 const events: Events<InputEvents> = {
@@ -121,6 +138,9 @@ 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();
+    private focusHook = useFocus();
 
     focus() {
         this.inputRef.value!.focus();
@@ -131,14 +151,7 @@ export class Input<V extends Value = Value> extends Component<InputProps<V>, Inp
     }
 
     select() {
-        const input = this.inputRef.value!;
-        if (input.select) {
-            input.select();
-        } else if (input.setSelectionRange) {
-            // mobile safari
-            input.focus();
-            input.setSelectionRange(0, input.value.length);
-        }
+        selectValue(this.inputRef.value!);
     }
 
     @bind

package/components/input/index.vdt

@@ -1,7 +1,7 @@
 import {Icon} from '../icon';
-import {addStyle, isTextBlock, getRestProps} from '../utils';
+import {addStyle, isTextBlock, getRestProps, stopPropagation} 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, flat, showCount, maxlength,
     
     'ev-click': click,
     'ev-mounseenter': mouseenter,
@@ -23,24 +23,38 @@ const {
     originalValue: {value: originalValue},
     startInput, onInput, endInput
 } = this.frozen;
+const { isFocus, focusInputOnClick }= this.focusHook;
+
+const isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
 
 const classNameObj = {
     'k-input': true,
     [`k-${size}`]: size !== 'default',
     'k-group': $blocks.prepend || $blocks.append,
     'k-disabled': disabled,
-    'k-with-prefix': $blocks.prefix,
-    'k-with-suffix': $blocks.suffix,
     'k-clearable': clearable,
     'k-auto-width': autoWidth,
     'k-fluid': fluid,
     'k-stack-clear': stackClearIcon,
     'k-inline': inline,
+    'k-flat': flat,
+    'k-type-textarea': type === 'textarea',
+    'k-focus': isFocus.value,
+    [`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);
@@ -54,8 +68,9 @@ const inputProps = {
     readOnly: readonly,
     placeholder,
     disabled,
+    maxLength: maxlength,
     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
@@ -82,36 +97,53 @@ if (hasInputValue) {
     }}
     <ErrorContext.Consumer defaultValue={false}>
         {isInvalid => {
-            return <Wave disabled={waveDisabled || disabled || isInvalid}>
-                <div class="k-input-wrapper">
+            return <Wave disabled={waveDisabled || disabled || isInvalid} inset="-2px">
+                <div class="k-input-wrapper" ev-click={focusInputOnClick}>
                     <div class="k-input-prefix" v-if={$blocks.prefix}>
                         <b:prefix />
                     </div>
                     <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 || showCount}
+                        ev-click={stopPropagation}
+                    >
+                        <template v-if={showPasswordIcon.value}>
+                            <Icon hoverable
+                                class={{
+                                    "k-input-show-password": true,
+                                    "k-icon-hidden": !isShowPassword.value,
+                                    "k-icon-visible": isShowPassword.value,
+                                }}
+                                ev-click={toggleShowPassword}
+                            />{' '}
+                        </template>
                         <Icon v-if={clearable && !disabled}
                             class={{
-                                "k-input-clear ion-ios-close": true, 
+                                "k-input-clear k-icon-error-fill": true, 
                                 "k-input-show": hasValue,
                             }}
                             ev-click={this.clear}
                             hoverable
                         />{' '}
+                        <span class="k-input-count" v-if={showCount}>
+                            {hasValue ? value.length : 0}
+                            <span v-if={maxlength}> / {maxlength}</span>
+                        </span>
                         <b:suffix />
                     </div>
-                    <div v-if={autoWidth}
-                        class="k-input-fake"
-                        ref={fakeRef}
-                    >{!hasValue ? placeholder : inputValue}</div>
+                    <div class="k-input-fake" v-if={autoWidth}>
+                        <span ref={fakeRef}>{!hasValue ? placeholder : inputValue}</span>
+                    </div>
                 </div>
             </Wave>
         }}

package/components/input/search.vdt

@@ -9,14 +9,12 @@ const {
     type, size, open, 
 } = this.get();
 
-const isTypeNotDefault = type !== 'default';
-
 const classNameObj = {
     'k-search': true,
     [className]: className,
     'k-open': open,
     'k-hide': !open,
-    [`k-${type}`]: isTypeNotDefault,
+    [`k-${type}`]: type,
     [makeSearchStyles()]: true,
 };
 
@@ -32,8 +30,7 @@ const classNameObj = {
         ev-$change:value={this.onChangeValue}
         readonly={!open}
         size={size}
-        class="k-with-suffix"
-        waveDisabled={isTypeNotDefault}
+        waveDisabled={type !== 'default'}
     />
     <Button icon type="none" ev-click={this.onClickBtn} size={size}>
         <Icon class="k-icon-search k-search-icon" />