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

package/components/icon/index.ts

@@ -8,6 +8,7 @@ export interface IconProps {
     color?: string
     rotate?: boolean
     hoverable?: boolean,
+    disabled?: boolean,
 }
 
 const typeDefs: Required<TypeDefs<IconProps>> = {
@@ -15,6 +16,7 @@ const typeDefs: Required<TypeDefs<IconProps>> = {
     color: String,
     rotate: Boolean,
     hoverable: Boolean,
+    disabled: Boolean,
 };
 
 const defaults = (): Partial<IconProps> => ({

package/components/icon/index.vdt

@@ -1,12 +1,16 @@
 import {addStyle, getRestProps} from '../utils';
 import makeStyles from './styles';
 
-const {className, style, size, color, rotate, hoverable, children} = this.get();
+const {
+    className, style, size, color,
+    rotate, hoverable, children, disabled
+} = this.get();
 
 const classNameObj = {
     'k-icon': true,
     'k-rotate': rotate,
-    'k-hoverable': hoverable,
+    'k-hoverable': !disabled && hoverable,
+    'k-disabled': disabled,
     [className]: className,
 };
 const _style = {};

package/components/icon/styles.ts

@@ -10,7 +10,8 @@ import '../../styles/global';
 
 const defaults = {
     get transition() { return theme.transition.small },
-
+    get disabledColor() { return theme.color.disabled },
+    get color() { return theme.color.lightBlack },
     fontSize: {
         default: '16px',
         large: '22px',
@@ -29,6 +30,7 @@ export const sizes = ['large', 'small', 'mini'] as const;
 
 export default function makeStyles(color?: string) {
     return css`
+        color: ${icon.color};
         font-size: ${icon.fontSize.default};
         line-height: 1;
         // display: inline-block;
@@ -73,5 +75,10 @@ export default function makeStyles(color?: string) {
                 }
             `}
         }
+        // disabled
+        &.k-disabled {
+            cursor: not-allowed;
+            color: ${icon.disabledColor} !important;
+        }
     `;
 }

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

@@ -28,6 +28,7 @@ sidebar: doc
 | frozenOnInput | 是否在输入的过程中冻结`value`更新到视图 | `boolean` | `false` |
 | inline | 是否展示内联模式 | `boolean` | `flase` |
 | resize | 指定textarea输入框拖动调整大小的方向，默认只能垂直方向调整 | `"none"` | `"vertical"` | `"horizontal"` | `"both"`' | `"vertical"` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
 
 ## Search
 

package/components/input/index.ts

@@ -1,8 +1,7 @@
 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';
@@ -68,6 +67,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     waveDisabled?: boolean
     resize?: 'none' | 'vertical' | 'horizontal' | 'both'
     showPassword?: boolean
+    flat?: boolean
 }
 
 export type AutoRows = {
@@ -108,6 +108,7 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     waveDisabled: Boolean,
     resize: ['none', 'vertical', 'horizontal', 'both'],
     showPassword: Boolean,
+    flat: Boolean,
 }
 
 const defaults = (): Partial<InputProps> => ({
@@ -145,14 +146,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

@@ -9,7 +9,7 @@ const {
     className, style, type, value, defaultValue, placeholder,
     clearable, disabled, size, rows, autoWidth, fluid,
     width, stackClearIcon, frozenOnInput, readonly, inline,
-    waveDisabled, resize,
+    waveDisabled, resize, flat,
     
     'ev-click': click,
     'ev-mounseenter': mouseenter,
@@ -38,6 +38,7 @@ const classNameObj = {
     'k-fluid': fluid,
     'k-stack-clear': stackClearIcon,
     'k-inline': inline,
+    'k-flat': flat,
     [`k-resize-${resize}`]: type === 'textarea' && isNotAutoRows,
     [`k-resize-none`]: type === 'textarea' && !isNotAutoRows,
     [className]: className,

package/components/input/styles.ts

@@ -39,8 +39,13 @@ const defaults = deepDefaults(
         // search input
         search: {
             suffixMarginRight: '15px' 
-        }
+        },
 
+        // flat
+        flat: {
+            get color() { return theme.color.lightBlack },
+            get bgColor() { return theme.color.bg },
+        }
     },
     sizes.reduce((memo, size) => {
         const styles = theme[size];
@@ -50,15 +55,6 @@ const defaults = deepDefaults(
             get paddingGap() { return styles.padding },
         }
 
-        if (size === 'large') {
-            // use default padding for large size
-            Object.defineProperty(memo.large, 'paddingGap', {
-                get() {
-                    return theme.default.padding;
-                }
-            });
-        }
-
         return memo;
     }, {} as Record<Sizes, {fontSize: string, height: string, paddingGap: string}>),
 )
@@ -113,6 +109,8 @@ export function makeStyles() {
             top: 50%;
             transform: translateY(-50%);
             z-index: 2;
+            color: ${theme.color.lightBlack};
+            line-height: 1;
         }
 
         // clearable
@@ -179,31 +177,31 @@ export function makeStyles() {
             text-align: center;
             white-space: nowrap;
             .k-btn {
-                margin: -1px 0;
-                border-radius: 0;
+                margin: -1px;
                 border: none;
+                &.k-none:hover {
+                    background: transparent;
+                }
             }
-            // select
             .k-select {
                 margin: -1px;
                 text-align: left;
             }
         }
         .k-input-prepend {
-            border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
+            &,
+            .k-btn,
             .k-select {
                 z-index: 1;
-                .k-select-wrapper {
-                    border-radius: ${theme.borderRadius} 0 0 ${theme.borderRadius};
-                }
+                border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
             }
         }
         .k-input-append {
-            border-radius: 0 ${input.borderRadius} ${input.borderRadius} 0;
+            &,
+            .k-btn,
             .k-select {
-                .k-select-wrapper {
-                    border-radius: 0 ${theme.borderRadius} ${theme.borderRadius} 0;
-                }
+                z-index: 1;
+                border-radius: 0 ${input.borderRadius} ${input.borderRadius} 0;
             }
         }
         .k-input-padding {
@@ -216,6 +214,15 @@ export function makeStyles() {
             border-left: none;
         }
 
+        // flat
+        &.k-flat {
+            .k-input-inner {
+                border: none;
+                background: ${input.flat.bgColor};
+                color: ${input.flat.color};
+            }
+        }
+
         // disabled
         &.k-disabled {
             color: ${input.disabledColor};
@@ -262,6 +269,7 @@ export function makeStyles() {
                     }
                 }
             `;
+            
             if (size === 'default') return sizeClassName;
             return css`
                 &.k-${size} {

package/components/message/demos/basic.md

@@ -4,7 +4,7 @@ order: 0
 ---
 
 使用`Message`提供的静态方法，展示提示。包括：`info`, `error`, `warning`, `success`。
-提示默认会在5s后自动关闭
+提示默认会在3s后自动关闭
 
 ```vdt
 import {ButtonGroup, Button} from 'kpc';

package/components/message/demos/duration.md

@@ -20,15 +20,15 @@ import {bind} from 'kpc';
 
 export default class extends Component {
     static template = template;
-
+    
     @bind
     showMessage1() {
-        Message.info('close after 10s', 10000);
+        Message.info('close after 10s', 1000000);
     }
 
     @bind
     showMessage2() {
-        Message.info('stick message', 0);
+        Message.success('stick message', 0);
     }
 }
 ```

package/components/message/index.md

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

package/components/message/message.ts

@@ -16,7 +16,7 @@ import {bind} from '../utils';
 export interface MessageProps {
     content?: Children
     duration?: number
-    type?: 'info' | 'error' | 'success' | 'warning'
+    type?: 'info' | 'error' | 'success' | 'warning' 
     closable?: boolean
     hideIcon?: boolean
 }
@@ -45,7 +45,7 @@ export class Message extends Component<MessageProps> {
 
     static notice(
         content: Children | Partial<MessageProps>,
-        duration: number = 5000,
+        duration: number = 3000,
         type: MessageProps['type'] ='info'
     ) {
         if (!messages) {

package/components/message/message.vdt

@@ -7,15 +7,15 @@ const {type, content, children, closable, hideIcon} = this.get();
 
 const classNameObj = {
     "k-message": true,
-    [`k-${type}`]: type !== 'info',
+    [`k-${type}`]: type,
     [makeMessageStyles()]: true,
 };
 
 const iconMap = {
-    info: 'information',
-    warning: 'alert',
-    success: 'truth-circled',
-    error: 'fault',
+    info: 'information-fill',
+    warning: 'warning-fill',
+    success: 'success-fill',
+    error: 'error-fill',
 };
 
 <div {...getRestProps(this)}
@@ -43,7 +43,7 @@ const iconMap = {
             class="k-message-close"
             ev-click={this.close}
         >
-            <Icon class="ion-ios-close-empty" />
+            <Icon class="k-icon-close" hoverable />
         </Button>
     </div>
 </div>

package/components/message/styles.ts

@@ -6,15 +6,15 @@ import '../../styles/global';
 const defaults = {
     get transition() { return theme.transition.middle },
     top: `10px`,
+    left: `0px`,
     transform: `translateY(-10px)`,
     get bgColor() { return theme.color.bg },
     get borderRadius() { return theme.borderRadius },
     gap: `10px`,
     boxShadow: 'none',
     padding: `7px 33px 8px 8px`,
-    closeFontSize: `26px`,
     fontSize: '12px',
-    get color() { return theme.color.ghost },
+    get color() { return theme.color.text },
     minWidth: '400px',
     maxWidth: '700px',
     minHeight: '32px',
@@ -22,10 +22,10 @@ const defaults = {
     get border() { return `1px solid ${theme.color.border}` },
 
     icon: {
-        color: `inherit`,
-        fontSize: `14px`,
+        // color: `inherit`,
+        fontSize: `18px`,
         left: `16px`,
-        top: `8px`,
+        top: `7px`,
     },
 };
 
@@ -38,6 +38,7 @@ export function makeMessagesStyles() {
     return css`
         position: fixed;
         top: ${message.top};
+        left: ${message.left};
         width: 100%;
         pointer-events: none;
         z-index: ${theme.maxZIndex + 1};
@@ -53,7 +54,6 @@ export function makeMessageStyles() {
         .k-message-container {
             display: inline-block;
             box-shadow: ${message.boxShadow};
-            background: ${message.bgColor};
             border-radius: ${message.borderRadius};
             margin-bottom: ${message.gap};
             pointer-events: all;
@@ -61,7 +61,6 @@ export function makeMessageStyles() {
             max-width: ${message.maxWidth};
             position: relative;
             text-align: ${message.textAlign};
-            border: ${message.border};
             min-height: ${message.minHeight};
         }
         .k-message-wrapper {
@@ -86,36 +85,28 @@ export function makeMessageStyles() {
             &:hover {
                 background: none;
             }
-            .k-icon {
-                font-size: ${message.closeFontSize};
-            }
         }
         .k-message-icon {
             position: absolute;
             left: ${message.icon.left};
             top: ${message.icon.top};
-            color: ${message.icon.color};
             font-size: ${message.icon.fontSize};
         }
-        ${(['error', 'success', 'warning'] as const).map(type => {
+
+        ${(['info', 'error', 'success', 'warning'] as const).map(type => {
             const color = theme.color[type === 'error' ? 'danger' : type];
             return css`
                 &.k-${type} {
                     .k-message-container {
-                        color: ${color};
-                        border-color: ${color};
                         background: ${palette(color, -4)};
                     }
-                    .k-message-close {
+                    .k-message-icon {
                         color: ${color};
-                        &:hover {
-                            color: ${palette(color, 1)}
-                        }
                     }
                 }
             `
         })}
-
+        
         // transition
         &.transition-enter-from,
         &.transition-leave-to {

package/components/pagination/demos/flat.md

@@ -0,0 +1,22 @@
+---
+title: 无边框样式
+order: 1.1
+---
+
+添加`flat`属性，可以展示无边框的样式效果
+
+```vdt
+import {Pagination} from 'kpc';
+
+<div>
+    <Pagination flat total={200} size="large" showGoto />
+    <Pagination flat total={200} showGoto />
+    <Pagination flat total={200} size="small" showGoto />
+    <Pagination flat total={200} size="mini" showGoto />
+</div>
+```
+
+```styl
+.k-pagination
+    margin-bottom 20px
+```

package/components/pagination/index.md

@@ -15,7 +15,7 @@ sidebar: doc
 | value | 当前页码 | `number` | `1` |
 | limit | 页面条数 | `number` | `10` |
 | limits | 页面条数 | `Array<number>` | `[10, 20, 50]` |
-| noBorder | 是否展示无边框样式，默认有边框 | `boolean` | `false` |
+| flat | 是否展示无边框样式，默认有边框 | `boolean` | `false` |
 | simple | 是否展示简洁样式 | `boolean` | `false` |
 | showTotal | 显示总条数 | `boolean` | `true` |
 | showGoto | 显示快速跳转框 | `boolean` | `false` |

package/components/pagination/index.spec.ts

@@ -7,7 +7,7 @@ import { Component } from 'intact';
 import { Pagination } from '.';
 
 describe('Pagination', () => {
-    // afterEach(() => unmount());
+    afterEach(() => unmount());
 
     it('basic test', async () => {
         const [instance, element] = mount(BasicDemo);

package/components/pagination/index.ts

@@ -11,7 +11,7 @@ export interface PaginationProps {
     value?: number,
     limit?: number,
     limits?: number[],
-    noBorder?: boolean,
+    flat?: boolean,
     simple?: boolean,
     showTotal?: boolean,
     showGoto?: boolean,
@@ -36,7 +36,7 @@ const typeDefs: Required<TypeDefs<PaginationProps>> = {
     value: Number,
     limit: Number,
     limits: Array,
-    noBorder: Boolean,
+    flat: Boolean,
     simple: Boolean,
     showTotal: Boolean,
     showGoto: Boolean,

package/components/pagination/index.vdt

@@ -7,7 +7,7 @@ import {_$} from '../../i18n';
 import {makeStyles} from './styles';
 
 const {
-    total, size, noBorder, simple, 
+    total, size, flat, simple, 
     className, showTotal, showGoto,
     counts, value, limit, limits,
     showLimits, disableBtn, disablePage
@@ -19,15 +19,12 @@ const classNameObj = {
     'k-pagination': true,
     [className]: className,
     [`k-${size}`]: size !== 'default',
-    ['k-no-border']: noBorder,
+    ['k-flat']: flat,
     ['k-simple']: simple,
     [makeStyles()]: true,
 };
 
-let type = 'default';
-if (noBorder || simple) {
-    type = 'none';
-}
+const type = flat ? 'flat' : simple ? 'none' : 'default';
 
 const totalPages = (Math.ceil(total / limit)) || 0;
 
@@ -115,23 +112,27 @@ let nextPage = value + 1;
 }
 
 <div class={classNameObj} {...getRestProps(this)}>
+    <div v-if={showTotal && !simple} class="k-pagination-total">
+        {_$('共 {n} 条', {n: total})}
+    </div>
+
     <ButtonGroup checkType="radio" v-model="value">
         <Button icon size={size}
-            type={type}
+            type="none"
             disabled={value <= 1 || !!(disablePage && disablePage(value - 1, limit))}
             ev-click={this.prev}
-        ><Icon class="ion-ios-arrow-left" /></Button>
+        ><Icon class="k-icon-arrow-left" /></Button>
         <template>{paginationItems}</template>
         <Button icon size={size}
-            type={type}
+            type="none"
             disabled={value >= totalPages || !!(disablePage && disablePage(value + 1, limit))}
             ev-click={this.next}
-        ><Icon class="ion-ios-arrow-right" /></Button>
+        ><Icon class="k-icon-arrow-right" /></Button>
     </ButtonGroup>
 
     <template v-if={!simple}>
         <div class="k-pagination-limits" v-if={showLimits}>
-            <Select v-model="limit" size={size}>
+            <Select v-model="limit" size={size} flat={flat}>
                 <Option v-for={limits} value={$value}>
                     {_$('{n} 条 / 页', {n: $value})}
                 </Option>
@@ -139,13 +140,9 @@ let nextPage = value + 1;
         </div>
 
         <div class="k-pagination-goto" v-if={showGoto}>
-            <span class="c-middle">{_$('跳至')}</span>
-            <Input size={size} value={value} ev-change={this.goto}/>
+            <span class="c-middle">{_$('前往')}</span>
+            <Input size={size} value={value} ev-change={this.goto} flat={flat} />
             <span class="c-middle">{_$('页')}</span>
-        </div>
-
-        <div v-if={showTotal} class="k-pagination-total">
-            {_$('共 {n} 条', {n: total})}
-        </div>
+        </div>       
     </template>
 </div>

package/components/pagination/styles.ts

@@ -28,12 +28,12 @@ const defaults = deepDefaults(
     {
         get fontSize() { return theme.default.fontSize }, 
         gap: '16px',
-
         btn: {
             gap: '6px',
             padding: '0 3px',
+            get borderRadius() { return theme.borderRadius },
+            get hoverBgColor() { return theme.color.hoverBg }
         },
-
         // goto
         goto: {
             width: '60px',
@@ -60,32 +60,36 @@ setDefault(() => {
 export function makeStyles() {
     return css`
         font-size: ${pagination.fontSize};
-        .k-pagination-limits,
-        .k-pagination-goto,
-        .k-pagination-total {
-            margin-left: ${pagination.gap};
+        > * {   
             display: inline-block;
             vertical-align: middle;
+            &:not(:first-child) {
+                margin-left: ${pagination.gap};
+            }
         }
         .k-pagination-ellipsis {
             background-color: transparent;
             border-color: transparent;
         }
+
         .k-btns {
             .k-btn {
                 width: auto !important;
                 min-width: ${button.height};
                 padding: ${pagination.btn.padding};
                 margin-right: ${pagination.btn.gap};
+                border-radius: ${pagination.btn.borderRadius} !important;
                 &:last-of-type {
                     margin: 0 !important;
                 }
+                &:hover {
+                    background: ${pagination.btn.hoverBgColor};
+                }
             }
             .k-icon {
                 font-size: 18px;
             }
         }
-
         // goto   
         .k-pagination-goto {
             .k-input {
@@ -120,8 +124,8 @@ export function makeStyles() {
             `
         })}
 
-        // noBorder
-        &.k-no-border {
+        // flat 
+        &.k-flat {
             .k-select {
                 &,
                 &:hover,