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

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/styles.ts

@@ -49,15 +49,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}>),
 )
@@ -112,6 +103,8 @@ export function makeStyles() {
             top: 50%;
             transform: translateY(-50%);
             z-index: 2;
+            color: ${theme.color.lightBlack};
+            line-height: 1;
         }
 
         // clearable
@@ -173,31 +166,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 {
@@ -256,6 +249,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/index.vdt

@@ -115,18 +115,22 @@ 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}>
@@ -142,10 +146,6 @@ let nextPage = value + 1;
             <span class="c-middle">{_$('跳至')}</span>
             <Input size={size} value={value} ev-change={this.goto}/>
             <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 {

package/components/radio/styles.ts

@@ -1,10 +1,10 @@
 import {css} from '@emotion/css';
-import {deepDefaults, darken} from '../../styles/utils';
+import {deepDefaults, darken, palette} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
 
 const defaults = {
-    width: '14px',
+    width: '16px',
     get transition() { return theme.transition.small },
     get borderColor() { return theme.color.darkBorder; },
     get hoverBorderColor() { return theme.color.primary; },
@@ -17,7 +17,17 @@ const defaults = {
         get color() { return theme.color.disabled },
         get borderColor() { return theme.color.disabledBorder },
         get bgColor() { return theme.color.disabledBg },
-        get innerColor() { return theme.color.disabledBorder },
+        checked: {
+            get borderColor() {
+                return palette(theme.color.primary, -2)
+            },
+            get bgColor() {
+                return palette(theme.color.primary, -4)
+            },
+            get innerColor() {
+                return palette(theme.color.primary, -3)
+            }
+        }
     }
 };
 
@@ -56,7 +66,10 @@ export function makeStyles() {
                 background-color: ${radio.checkedColor};
                 transform: scale(0);
                 transition: all ${radio.transition};
-            }    
+            }
+            &:hover {
+                border: 1px solid ${radio.hoverBorderColor};
+            }
         }
         input {
             width: 100%;
@@ -77,7 +90,7 @@ export function makeStyles() {
                 &:before {
                     transform: scale(1);
                 }    
-            }        
+            }           
         }            
 
         // focus
@@ -94,14 +107,20 @@ export function makeStyles() {
             cursor: not-allowed;
             .k-radio-wrapper {
                 border-color: ${radio.disabled.borderColor};
-                background: ${radio.disabled.bgColor};
-                &:before {
-                    background: ${radio.disabled.innerColor};
-                }    
+                background: ${radio.disabled.bgColor};   
             }
             input {
                 cursor: not-allowed;
             }
+            &.k-checked {
+                .k-radio-wrapper {
+                    border-color: ${radio.disabled.checked.borderColor};
+                    background: ${radio.disabled.checked.bgColor};
+                    &:before {
+                        background: ${radio.disabled.checked.innerColor};
+                    }    
+                }
+            }
         }            
     `;
 }

package/components/select/base.vdt

@@ -107,9 +107,10 @@ const {onFocusout, triggerRef} = this.focusout;
                                                         {$label}
                                                     </b:value>
                                                 </span>
-                                                <Icon class="ion-ios-close k-select-close"
+                                                <Icon class="k-icon-close k-select-close"
                                                     ev-click={this.delete.bind(this, $key)}
                                                     hoverable={!disabled}
+                                                    disabled={disabled}
                                                 />
                                             </div>
                                         </b:values>
@@ -142,10 +143,8 @@ const {onFocusout, triggerRef} = this.focusout;
                             <b:suffix>
                                 <Icon class="ion-load-c" rotate v-if={loading} />
                                 <Icon v-else-if={!hideIcon}
-                                    class={{
-                                        "k-select-arrow ion-ios-arrow-down": true,
-                                        'k-disabled': $props.isDisableArrow 
-                                    }}
+                                    class="k-select-arrow ion-ios-arrow-down"
+                                    disabled={$props.isDisableArrow}
                                 />
                             </b:suffix>
                         </span>

package/components/select/index.md

@@ -60,7 +60,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/select/styles.ts

@@ -22,11 +22,9 @@ const defaults = deepDefaults(
         get focusBorder() { return `1px solid ${theme.color.primary}` },
         // get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
         get hoverBorder() { return `1px solid ${theme.color.primary}` },
-        get iconColor() { return theme.color.placeholder },
         get activeColor() { return theme.color.primary },
         get borderRadius() { return theme.borderRadius },
         suffixGap: '10px',
-        disabledArrowColor: '#e5e5e5',
 
         clearGap: `8px`,
         get placeholderColor() { return theme.color.placeholder },
@@ -58,15 +56,15 @@ const defaults = deepDefaults(
         },
         tag: {
             margin: `3px 8px 3px 0`,
-            padding: `3px 8px`,
+            padding: `1px 8px`,
             get borderRadius() { return theme.borderRadius },
             get bgColor() { return theme.color.bg },
-            disabledBgColor: '#eee',
+            disabledBgColor: '#f8f9fa',
 
             delete: {
                 gap: `8px`,
                 fontSize: '14px',
-                get color() { return theme.color.placeholder },
+                get color() { return theme.color.lightBlack },
             }
         },
 
@@ -106,20 +104,6 @@ const defaults = deepDefaults(
             multipleMargin: `0 2px 1px 0`,
         }
 
-        if (size === 'large') {
-            // use default padding for large size
-            Object.defineProperty(memo.large, 'padding', {
-                get() {
-                    return `0 ${theme.default.padding}`;
-                }
-            });
-            Object.defineProperty(memo.large, 'fontSize', {
-                get() {
-                    return theme.default.fontSize;
-                }
-            });
-        }
-
         return memo;
     }, {} as Record<Sizes, SizeStyles>)
 );
@@ -148,11 +132,11 @@ export default function makeStyles() {
         }
         .k-select-prefix,
         .k-select-suffix {
-            color: ${select.iconColor};
             position: relative;
         }
         .k-select-suffix {
             margin-left: ${select.suffixGap};
+            margin-top: 2px;
         }
 
         .k-select-placeholder {
@@ -193,9 +177,6 @@ export default function makeStyles() {
         .k-select-arrow {
             display: inline-block;
             transition: transform ${select.transition};
-            &.k-disabled {
-                color: ${select.disabledArrowColor};
-            }
         }
 
         // show
@@ -246,11 +227,7 @@ export default function makeStyles() {
         .k-select-close {
             margin-left: ${select.tag.delete.gap};
             font-size: ${select.tag.delete.fontSize};
-            color: ${select.tag.delete.color};
         }
-        // .k-select-input {
-            // margin-right: ${getRight(select.tag.margin)};
-        // }
 
         // size
         ${sizes.map(size => {

package/components/spinner/index.vdt

@@ -20,9 +20,10 @@ const {decrease, increase, changeValue, onFocusin} = this.change;
         disabled={this.isDisabledDecrease()}
         class="k-spinner-btn k-left"
         size={size}
+        type="none"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon ion-ios-minus-empty" />
-        <Icon v-else class="k-spinner-icon ion-ios-arrow-down" />
+        <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus-small" />
+        <Icon v-else class="k-spinner-icon k-icon-arrow-down" />
     </Button>
     <Input
         class="k-spinner-input"
@@ -38,8 +39,9 @@ const {decrease, increase, changeValue, onFocusin} = this.change;
         disabled={this.isDisabledIncrease()}
         class="k-spinner-btn k-right"
         size={size}
+        type="none"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon ion-ios-plus-empty" />
-        <Icon v-else class="k-spinner-icon ion-ios-arrow-up" />
+        <Icon v-if={!vertical} class="k-spinner-icon k-icon-add-small" />
+        <Icon v-else class="k-spinner-icon k-icon-arrow-up" />
     </Button>
 </div>