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

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" />

package/components/input/styles.ts

@@ -45,6 +45,11 @@ const defaults = deepDefaults(
         flat: {
             get color() { return theme.color.lightBlack },
             get bgColor() { return theme.color.bg },
+        },
+
+        // count
+        count: {
+            get color() { return theme.color.placeholder },
         }
     },
     sizes.reduce((memo, size) => {
@@ -68,30 +73,35 @@ export function makeStyles() {
     return css`
         display: inline-block;
         width: ${input.width};
+        color: ${input.color};
         vertical-align: middle;
         .k-input-wrapper {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
             width: 100%;
             position: relative;
-        }
-        .k-input-inner {
-            display: inline-block;
-            width: 100%;
             border: ${input.border};
             background-color: ${input.bgColor};
             transition: border ${input.transition}, background ${input.transition}, box-shadow ${input.transition};
             border-radius: ${input.borderRadius};
-            outline: none;
-            position: relative;
-            color: ${input.color};
             &:hover {
                 border: ${input.hoverBorder};
                 z-index: 1;
             }
-            &:focus {
-                border: ${input.focusBorder};
-                z-index: 1;
-            }
+        }
+        &.k-focus .k-input-wrapper {
+            border: ${input.focusBorder};
+            z-index: 1;
+        }
+        .k-input-inner {
+            flex: 1;
+            outline: none;
+            color: inherit;
+            font-size: inherit;
+            border: none;
+            background: transparent;
+            padding: 0;
+            width: 0; // must set width to 0, otherwise it has min width
             &::placeholder {
                 color: ${input.placeholderColor};
             }
@@ -105,12 +115,17 @@ export function makeStyles() {
         // prefix & suffix
         .k-input-prefix,
         .k-input-suffix {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 2;
+            display: flex;
+            align-items: center;
+            gap: ${input.clearIconGap};
             color: ${theme.color.lightBlack};
-            line-height: 1;
+            position: relative;
+        }
+        .k-input-prefix {
+            margin-right: ${input.clearIconGap};
+        }
+        .k-input-suffix {
+            margin-left: ${input.clearIconGap};
         }
 
         // clearable
@@ -119,9 +134,6 @@ export function makeStyles() {
             transition: opacity ${input.transition};
             pointer-events: none;
             color: ${input.clearIconColor};
-            + * {
-                margin-left: ${input.clearIconGap};
-            }
         }
         &:hover .k-input-clear.k-input-show {
             opacity: 1;
@@ -139,12 +151,12 @@ export function makeStyles() {
                 position: absolute;
                 z-index: 1;
                 right: 0;
-                &.k-input-show + i {
+                &.k-input-show + * {
                     transition: opacity ${input.transition};
                 }
             }
             &:hover {
-                .k-input-clear.k-input-show + i {
+                .k-input-clear.k-input-show + * {
                     opacity: 0;
                 }
             }
@@ -152,29 +164,23 @@ export function makeStyles() {
 
         // group
         &.k-group {
-            display: table;
-            .k-input-inner {
+            display: inline-flex;
+            .k-input-wrapper {
                 border-radius: 0;
             }
             .k-input-wrapper:first-child {
-                .k-input-inner {
-                    border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
-                }
+                border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
             }
             .k-input-wrapper:last-child {
-                .k-input-inner {
-                    border-radius: 0 ${input.borderRadius} ${input.borderRadius} 0;
-                }
+                border-radius: 0 ${input.borderRadius} ${input.borderRadius} 0;
             }
         }
         .k-input-prepend,
         .k-input-append {
-            display: table-cell;
-            width: 1px;
-            vertical-align: middle;
+            display: inline-flex;
+            align-items: center;
             background-color: ${input.groupBgColor};
             border: ${input.border};
-            text-align: center;
             white-space: nowrap;
             .k-btn {
                 margin: -1px;
@@ -216,10 +222,10 @@ export function makeStyles() {
 
         // flat
         &.k-flat {
-            .k-input-inner {
+            color: ${input.flat.color};
+            .k-input-wrapper {
                 border: none;
                 background: ${input.flat.bgColor};
-                color: ${input.flat.color};
             }
         }
 
@@ -227,10 +233,11 @@ export function makeStyles() {
         &.k-disabled {
             color: ${input.disabledColor};
             cursor: not-allowed;
-            .k-input-inner {
-                color: ${input.disabledColor};
+            .k-input-wrapper {
                 border-color: ${input.disabledBorderColor};
                 background: ${input.disabledBgColor};
+            }
+            .k-input-inner {
                 cursor: not-allowed;
             }
         }
@@ -240,34 +247,10 @@ export function makeStyles() {
             const styles = input[size];
             const sizeClassName = css`
                 font-size: ${styles.fontSize};
-                .k-input-inner {
+                .k-input-wrapper {
                     height: ${styles.height};
-                    line-height: ${styles.height};
-                    font-size: ${styles.fontSize};
                     padding: 0 ${styles.paddingGap};
                 }
-                .k-input-prefix {
-                    left: ${styles.paddingGap};
-                }
-                .k-input-suffix {
-                    right: ${styles.paddingGap};
-                }
-                &.k-with-prefix {
-                    .k-input-inner {
-                        padding-left: calc(${styles.paddingGap} + 1rem + ${input.clearIconGap});
-                    }
-                }
-                &.k-with-suffix,
-                &.k-clearable {
-                    .k-input-inner {
-                        padding-right: calc(${styles.paddingGap} + 1rem + ${input.clearIconGap});
-                    }
-                }
-                &:not(.k-stack-clear).k-with-suffix.k-clearable {
-                    .k-input-inner {
-                        padding-right: calc(${styles.paddingGap} + 2rem + ${input.clearIconGap} * 2);
-                    }
-                }
             `;
             
             if (size === 'default') return sizeClassName;
@@ -280,9 +263,8 @@ export function makeStyles() {
 
         // inline
         &.k-inline {
-            .k-input-inner {
+            .k-input-wrapper {
                 height: auto;
-                line-height: inherit;
                 border: none;
                 border-radius: 0;
                 padding: 0;
@@ -290,11 +272,22 @@ export function makeStyles() {
         }
 
         // textarea
-        .k-textarea {
-            padding: ${input.textareaPadding};
-            height: auto;
-            line-height: 1.5;
-            vertical-align: top;
+        &.k-type-textarea {
+            .k-input-wrapper {
+                display: inline-block;
+                padding: 0;
+                height: auto;
+            }
+            .k-textarea {
+                width: 100%;
+                padding: ${input.textareaPadding};
+                line-height: 1.5;
+                vertical-align: top;
+            }
+            .k-input-suffix {
+                margin: 0;
+                justify-content: flex-end;
+            }
         }
         ${(Input.typeDefs.resize as string[]).map(type => {
             return css`
@@ -308,18 +301,23 @@ export function makeStyles() {
 
         // fake dom for get value's width
         .k-input-fake {
+            left: 0;
+            top: 0;
+            right: 0;
             position: absolute;
+            overflow: hidden;
+            width: 100%;
             visibility: hidden;
-            top: 0;
             white-space: nowrap;
         }
         &.k-auto-width {
             width: auto;
             max-width: 100%;
-            .k-input-inner {
-                max-width: 100%;
-                box-sizing: content-box;
-            }
+        }
+
+        // count
+        .k-input-count {
+            color: ${input.count.color};
         }
     `
 }
@@ -337,6 +335,9 @@ export function makeSearchStyles() {
             right: 0;
             z-index: 1;
         }
+        &.k-default .k-btn:hover {
+            background: transparent;
+        }
         .k-input-suffix {
             margin-right: ${input.search.suffixMarginRight};
         }
@@ -361,13 +362,16 @@ export function makeSearchStyles() {
 
         // line
         &.k-line {
-            .k-input-inner {
+            .k-input-wrapper {
                 border-width: 0;
             }
             &.k-open {
-                .k-input-inner {
+                .k-input-wrapper {
                     border-bottom-width: 1px;
                 }
+                .k-btn:hover {
+                    background: transparent;
+                }
             }
         }
     `

package/components/input/useFocus.ts

@@ -0,0 +1,17 @@
+import {useInstance, createRef, onMounted, nextTick} from 'intact';
+import type {Input} from './';
+import {useState} from '../../hooks/useState';
+
+export function useFocus() {
+    const instance = useInstance() as Input;
+    const isFocus = useState(false);
+
+    instance.on('focus', () => isFocus.set(true));
+    instance.on('blur', () => isFocus.set(false));
+
+    function focusInputOnClick(e: MouseEvent) {
+        instance.focus();
+    }
+
+    return { isFocus, focusInputOnClick }; 
+}

package/components/menu/item.vdt

@@ -35,7 +35,7 @@ const title = (children) => (
     >
         <Icon class="k-menu-dot ion-record" v-if={showDot} />
         <div class="k-menu-name">{children}</div>
-        <i class="k-menu-arrow ion-ios-arrow-down" v-if={subMenuVNode}></i>
+        <Icon class="k-menu-arrow k-icon-down" v-if={subMenuVNode} />
     </div>
 );
 

package/components/message/demos/config.md

@@ -1,5 +1,5 @@
 ---
-title: 隐藏Icon或关闭按钮
+title: 隐藏Icon或展示关闭按钮
 order: 1.1
 ---
 
@@ -32,7 +32,7 @@ export default class extends Component {
         Message[type]({
             content: type,
             duration: 3000,
-            closable: false,
+            closable: true,
             hideIcon: true,
         });
     }

package/components/message/index.md

@@ -15,7 +15,7 @@ sidebar: doc
 | content | 提示内容 | `string` | `VNode` | `undefined` |
 | duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `number` | `5000` |
 | type | 提示类型 | `"info"` | `"error"` | `"success"` | `"warning"`|
-| closable | 是否展示关闭按钮 | `boolean` | `true` |
+| closable | 是否展示关闭按钮 | `boolean` | `false` |
 | hideIcon | 是否隐藏文字前面的icon | `boolean` | `false` |
 
 # 静态方法

package/components/message/message.ts

@@ -33,7 +33,7 @@ let id = 0;
 const defaults = (): Partial<MessageProps> => ({
     duration: 5000,
     type: 'info',
-    closable: true,
+    closable: false,
 });
 
 let messages: Messages | null = null;

package/components/pagination/index.vdt

@@ -121,13 +121,13 @@ let nextPage = value + 1;
             type="none"
             disabled={value <= 1 || !!(disablePage && disablePage(value - 1, limit))}
             ev-click={this.prev}
-        ><Icon class="k-icon-arrow-left" /></Button>
+        ><Icon class="k-icon-left" /></Button>
         <template>{paginationItems}</template>
         <Button icon size={size}
             type="none"
             disabled={value >= totalPages || !!(disablePage && disablePage(value + 1, limit))}
             ev-click={this.next}
-        ><Icon class="k-icon-arrow-right" /></Button>
+        ><Icon class="k-icon-right" /></Button>
     </ButtonGroup>
 
     <template v-if={!simple}>

package/components/pagination/styles.ts

@@ -32,7 +32,7 @@ const defaults = deepDefaults(
             gap: '6px',
             padding: '0 3px',
             get borderRadius() { return theme.borderRadius },
-            get hoverBgColor() { return theme.color.hoverBg }
+            // get hoverBgColor() { return theme.color.hoverBg }
         },
         // goto
         goto: {
@@ -82,9 +82,6 @@ export function makeStyles() {
                 &:last-of-type {
                     margin: 0 !important;
                 }
-                &:hover {
-                    background: ${pagination.btn.hoverBgColor};
-                }
             }
             .k-icon {
                 font-size: 18px;

package/components/popover/styles.ts

@@ -3,7 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 
 const defaults = {
-    width: '240px',
+    width: '320px',
     padding: '8px 16px',
     gap: '8px',
     title: {

package/components/progress/index.vdt

@@ -90,7 +90,7 @@ const classNameObj = {
             } else {
                 switch (status) {
                     case 'success':
-                        icon = 'k-icon-truth';
+                        icon = 'k-icon-check';
                         break;
                     case 'error':
                     case 'warning':

package/components/radio/demos/basic.md

@@ -20,7 +20,7 @@ import {Radio} from 'kpc';
 
 ```styl
 .k-radio
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/radio/demos/group.md

@@ -18,7 +18,7 @@ import {Radio} from 'kpc';
 
 ```styl
 .k-radio
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/radio/demos/value.md

@@ -23,7 +23,7 @@ import {Radio} from 'kpc';
 
 ```styl
 .k-radio
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/radio/styles.ts

@@ -67,10 +67,13 @@ export function makeStyles() {
                 transform: scale(0);
                 transition: all ${radio.transition};
             }
-            &:hover {
+        }
+        &:hover {
+            .k-radio-wrapper {
                 border: 1px solid ${radio.hoverBorderColor};
             }
         }
+
         input {
             width: 100%;
             height: 100%;

package/components/scrollSelect/styles.ts

@@ -19,7 +19,7 @@ const defaults = {
         get color() { return theme.color.text },
         get activeColor() { return theme.color.primary },
         get hoverBgColor() { return theme.color.bg },
-        activeFontSize: `1.1em`,
+        activeFontSize: `1.3em`,
         get disabledColor() { return theme.color.disabled },
         border: `1px solid #e5e5e5`,
     }