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

package/components/icon/demos/icons.md

@@ -6,20 +6,25 @@ order: 3
 
 
 ```vdt
-import {Icon} from 'kpc';
+import {Icon, Input} from 'kpc';
 
-<div class="icons">
-    <div class="icon" v-for={this.get('fonts')}>
-        <Icon 
-            class={'k-icon-' + $value}
-            size="large"
-        />
-        <div>{'k-icon-' + $value}</div>
+<div>
+    <Input v-model="keywords" placeholder="Search icon" clearable />
+    <div class="icons">
+        <div class="icon" v-for={this.filter()}>
+            <Icon 
+                class={'k-icon-' + $value[0]}
+                size="large"
+            />
+            <div>{'k-icon-' + $value[0]}</div>
+        </div>
     </div>
 </div>
 ```
 
 ```styl
+.k-input
+    margin-bottom 16px
 .icons
     display flex
     flex-wrap wrap
@@ -30,100 +35,128 @@ import {Icon} from 'kpc';
 ```
 
 ```ts
-export default class extends Component {
+interface Props {
+    keywords?: string
+    fonts: string[][]
+}
+
+export default class extends Component<Props> {
     static template = template;
 
     static defaults() {
         return {
+            keywords: '',
             fonts: [
-                "tag",
-                "clone",
-                "information-fill",
-                "warning-fill",
-                "success-fill",
-                "error-fill",
-                "question-fill",
-                "information", 
-                "cloud", 
-                "pin", 
-                "home", 
-                "cut", 
-                "servers", 
-                "internet", 
-                "mail", 
-                "paper", 
-                "phone", 
-                "panel", 
-                "alarm", 
-                "notification-outline", 
-                "earphone", 
-                "settings-horizontal", 
-                "message", 
-                "heart-outline", 
-                "return-right", 
-                "picture", 
-                "logout", 
-                "all", 
-                "drag", 
-                "settings-vertical", 
-                "more", 
-                "more-circled", 
-                "folder", 
-                "unlock", 
-                "user", 
-                "folder-open", 
-                "lock", 
-                "users", 
-                "edit", 
-                "location", 
-                "delete", 
-                "edit2", 
-                "settings", 
-                "calendar", 
-                "search", 
-                "alert", 
-                "question", 
-                "zoom-in", 
-                "zoom-out",
-                "fault-outline", 
-                "truth-circled", 
-                "hide", 
-                "visible", 
-                "time", 
-                "refresh", 
-                "batchsearch", 
-                "refresh2", 
-                "upload", 
-                "download", 
-                "left-squared", 
-                "right-squared", 
-                "down-squared", 
-                "up-squared", 
-                "arrow-right-circled", 
-                "arrow-down-circled", 
-                "arrow-left-circled", 
-                "arrow-up-circled", 
-                "arrow-up-big", 
-                "arrow-left-big", 
-                "arrow-down", 
-                "arrow-right-big", 
-                "arrow-right", 
-                "sortfill", 
-                "arrow-left", 
-                "arrow-up", 
-                "arrow-down-big", 
-                "sort", 
-                "sortbig", 
-                "truth", 
-                "check", 
-                "close-big", 
-                "add-small",
-                "minus", 
-                "close", 
-                "minuss-mall", 
-                "add-big"
-            ]
-        }
+                ["information-fill"],
+                ["warning-fill"],
+                ["success-fill"],
+                ["error-fill"],
+                ["question-fill"],
+                ["heart-fill"],
+                ['heart'],
+                ['notification-fill'],
+                ['notification'],
+                ["information"], 
+                ["alert"],
+                ["question"],
+                ["zoom-in"],
+                ["zoom-out"],
+                ["close-outline"],
+                ["check-outline"],
+                ["time"],
+                ['right-circled', 'arrow'],
+                ['down-circled', 'arrow'],
+                ['right-circled', 'arrow'],
+                ['up-circled', 'arrow'],
+                ['right-squared', 'arrow'],
+                ['down-squared', 'arrow'],
+                ['left-squared', 'arrow'],
+                ['up-squared', 'arrow'],
+                ['right', 'arrow'],
+                ['down', 'arrow'],
+                ['left', 'arrow'],
+                ['up', 'arrow'],
+                ['right-bold', 'arrow'],
+                ['down-bold', 'arrow'],
+                ['left-bold', 'arrow'],
+                ['up-bold', 'arrow'],
+                ['sort'],
+                ['sort-bold'],
+                ['close'],
+                ['close-bold'],
+                ['check'],
+                ['check-bold'],
+                ['add'],
+                ['add-bold'],
+                ['minus'],
+                ['minus-bold'],
+                ['share'],
+                ['tag'],
+                ['clone'],
+                ['cloud'],
+                ['pin'],
+                ['home'],
+                ['cut'],
+                ['server'],
+                ['internet'],
+                ['mail'],
+                ['paper'],
+                ['phone'],
+                ['panel'],
+                ['alarm'],
+                ['earphone'],
+                ['settings-horizontal'],
+                ['settings-vertical'],
+                ['settings'],
+                ['message'],
+                ['return-right'],
+                ['picture'],
+                ['logout'],
+                ['all'],
+                ['drag'],
+                ['more'],
+                ['more-circled'],
+                ['folder'],
+                ['folder-open'],
+                ['lock'],
+                ['unlock'],
+                ['user'],
+                ['users'],
+                ['edit'],
+                ['location'],
+                ['delete'],
+                ['calendar'],
+                ['search'],
+                ['batchsearch'],
+                ['hidden'],
+                ['visible'],
+                ['refresh'],
+                ['upload'],
+                ['download'],
+            ],
+        } as Props
+    }
+
+    init() {
+        const fonts = this.get('fonts');
+        const map: Record<string, boolean> = {};
+        fonts.forEach(([font]) => {
+            if (map[font]) {
+                console.log('duplicated', font);
+            }
+            map[font] = true;
+        })
+    }
+
+    filter() {
+        const keywords = this.get('keywords')!.trim().toLowerCase();
+        const fonts = this.get('fonts');
+
+        if (!keywords) return fonts;
+
+        return fonts.filter((font) => {
+            return font[0].includes(keywords) || font[1] && font[1].includes(keywords);
+        });
     }
 }
 ```

package/components/icon/styles.ts

@@ -57,9 +57,13 @@ export default function makeStyles(color?: string) {
             animation: ${rotate} 1s infinite linear;
         }
         &:before {
-            position: relative;
             font-size: inherit;
-            z-index: 1;
+            /**
+             * FIXME: Why add bellow two styles?
+             * https://github.com/ksc-fe/kpc/issues/876
+             */
+            // position: relative;
+            // z-index: 1;
         }
 
         // hoverable

package/components/input/demos/blocks.md

@@ -13,6 +13,7 @@ import {Input, Button, Icon} from 'kpc';
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append>
             <Button icon type="none">
@@ -20,6 +21,7 @@ import {Input, Button, Icon} from 'kpc';
             </Button>
         </b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append>
             <Button icon type="primary">
@@ -27,18 +29,21 @@ import {Input, Button, Icon} from 'kpc';
             </Button>
         </b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append><Button type="primary">搜索</Button></b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <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/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/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/index.md

@@ -29,6 +29,7 @@ sidebar: doc
 | inline | 是否展示内联模式 | `boolean` | `flase` |
 | resize | 指定textarea输入框拖动调整大小的方向，默认只能垂直方向调整 | `"none"` | `"vertical"` | `"horizontal"` | `"both"`' | `"vertical"` |
 | flat | 是否展示扁平样式 | `boolean` | `false` |
+| showCount | 是否展示字符长度提示数字 | `boolean` | `false` |
 
 ## Search
 

package/components/input/index.ts

@@ -7,6 +7,7 @@ import {useFrozen} from './useFrozen';
 import {CommonInputHTMLAttributes, Events} from '../types';
 import {useAutoRows} from './useAutoRows';
 import { useShowPassword } from './useShowPassword';
+import { useFocus } from './useFocus';
 export * from './search';
 
 export type HTMLInputTypes =
@@ -33,6 +34,7 @@ export type HTMLInputTypes =
     | 'time'
     | 'url'
     | 'week'
+    | 'maxlength'
     | (string & {});
 
 interface InputHTMLAttributes extends CommonInputHTMLAttributes {
@@ -68,6 +70,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     resize?: 'none' | 'vertical' | 'horizontal' | 'both'
     showPassword?: boolean
     flat?: boolean
+    showCount?: boolean
 }
 
 export type AutoRows = {
@@ -109,6 +112,7 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     resize: ['none', 'vertical', 'horizontal', 'both'],
     showPassword: Boolean,
     flat: Boolean,
+    showCount: Boolean,
 }
 
 const defaults = (): Partial<InputProps> => ({
@@ -136,6 +140,7 @@ export class Input<V extends Value = Value> extends Component<InputProps<V>, Inp
     private frozen = useFrozen();
     private autoRows = useAutoRows(this.inputRef);
     private showPassword = useShowPassword();
+    private focusHook = useFocus();
 
     focus() {
         this.inputRef.value!.focus();

package/components/input/index.vdt

@@ -1,5 +1,5 @@
 import {Icon} from '../icon';
-import {addStyle, isTextBlock, getRestProps} from '../utils';
+import {addStyle, isTextBlock, getRestProps, stopPropagation} from '../utils';
 import {makeStyles} from './styles';
 import {noop, isNullOrUndefined, isStringOrNumber} from 'intact-shared';
 import {Wave} from '../wave';
@@ -9,7 +9,7 @@ const {
     className, style, type, value, defaultValue, placeholder,
     clearable, disabled, size, rows, autoWidth, fluid,
     width, stackClearIcon, frozenOnInput, readonly, inline,
-    waveDisabled, resize, flat,
+    waveDisabled, resize, flat, showCount, maxlength,
     
     'ev-click': click,
     'ev-mounseenter': mouseenter,
@@ -23,6 +23,7 @@ const {
     originalValue: {value: originalValue},
     startInput, onInput, endInput
 } = this.frozen;
+const { isFocus, focusInputOnClick }= this.focusHook;
 
 const isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
 
@@ -31,14 +32,14 @@ const classNameObj = {
     [`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,
@@ -67,6 +68,7 @@ const inputProps = {
     readOnly: readonly,
     placeholder,
     disabled,
+    maxLength: maxlength,
     ref: this.inputRef,
     style: autoWidth && fakeWidth ? {width: fakeWidth + 'px'} : undefined,
 };
@@ -95,8 +97,8 @@ 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>
@@ -111,31 +113,37 @@ if (hasInputValue) {
                         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 || showPasswordIcon.value}>
+                    <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,
-                                    "ion-eye-disabled": !isShowPassword.value,
-                                    "ion-eye": isShowPassword.value,
+                                    "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" />