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

package/components/button/styles.ts

@@ -29,7 +29,7 @@ export const types = ['primary', 'warning', 'danger', 'active', 'success'] as co
 const sizes = ['large', 'small', 'mini'] as const;
 
 const btnStyles = {
-    get color() { return theme.color.text },
+    get color() { return theme.color.lightBlack },
     bgColor: '#fff',
     lineHeight: '1.15',
     get padding() { return `0 ${theme.default.padding}` },
@@ -171,6 +171,9 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             white-space: nowrap;
             transition: all ${button.transition};
             line-height: ${button.lineHeight};
+            .k-icon {
+                color: inherit;
+            }
             &:hover,
             &:focus {
                 border-color: ${button.hoverBorderColor};

package/components/card/styles.ts

@@ -6,7 +6,8 @@ import '../../styles/global';
 const defaults = {
     border: '1px solid #e5e5e5',
     padding: '16px',
-    boxShadow: '0 0 8px 0 rgba(0, 0, 0, .05)',
+    get boxShadow() { return theme.boxShadow },
+    get borderRadius() {return theme.largeBorderRadius},
     headerHeight: '48px',
     headerFontSize: '14px',
     bgColor: '#fff',
@@ -19,7 +20,7 @@ setDefault(() => {
 
 export function makeStyles() {
     return css`
-        border-radius: ${theme.borderRadius};
+        border-radius: ${card.borderRadius};
         background: ${card.bgColor};
         .k-card-header {
             height: ${card.headerHeight};

package/components/checkbox/styles.ts

@@ -4,10 +4,13 @@ import {deepDefaults, palette, getLeft}  from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
-    width: '14px',
-    get borderColor() { return theme.color.darkBorder },
+    width: '16px',
+    get borderColor() { return theme.color.border },
     get borderRadius() { return theme.borderRadius },
     get transition() { return theme.transition.small },
+    get hoverBorder() {
+        return `1px solid ${theme.color.primary}`
+    },
     bgColor: '#fff',
     
     // text
@@ -21,11 +24,12 @@ const defaults = {
         get bgColor() { return checkbox.checked.borderColor },
     },
 
+    
     inner: {
         width: '5px',
         height: '10px',
-        top: '-1px',
-        left: '4px',
+        top: '0px',
+        left: '5px',
         border: '1px solid #fff',
     },
 
@@ -34,12 +38,20 @@ 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 }, 
+        innerColor: '#fff',
+        checked:{
+            get borderColor() {
+                return palette(theme.color.primary, -3)
+            },
+            get bgColor() {
+                return palette(theme.color.primary, -3)
+            },
+        } 
     },
 
     // indeterminate
     indeterminate: {
-        innerLeft: '3px'
+        innerLeft: '4px',
     }
 };
 
@@ -79,6 +91,9 @@ export default function makeStyles() {
                 transform: rotate(45deg) scale(0);
                 transition: all ${checkbox.transition};
             }
+            &:hover {
+                border: ${checkbox.hoverBorder}
+            }
         }
 
         input {
@@ -113,6 +128,7 @@ export default function makeStyles() {
                     left: ${checkbox.indeterminate.innerLeft};
                 }
             }
+      
         }
         &.k-checked {
             .k-checkbox-wrapper {
@@ -120,6 +136,7 @@ export default function makeStyles() {
                     transform: rotate(45deg) scale(1);
                 }
             }
+        
         }
             
         // focus
@@ -146,6 +163,14 @@ export default function makeStyles() {
             input {
                 cursor: not-allowed;
             }
+            &.k-checked,
+            &.k-indeterminate {
+              .k-checkbox-wrapper {
+                  border-color: ${checkbox.disabled.checked.borderColor};
+                  background: ${checkbox.disabled.checked.bgColor};
+              }
+            }
+          
         }
     `;
 }

package/components/collapse/styles.ts

@@ -11,6 +11,9 @@ const defaults = {
     titleMarginRight: '8px',
     borderPadding: '0 24px',
     collBorder: '1px solid #eee',
+    get borderRadius() {
+        return theme.largeBorderRadius
+    },
 
     item: {
         borderBottom: '1px solid #e5e5e5',
@@ -37,7 +40,7 @@ export function makeStyles() {
         }
 
         &.k-border {
-            border-radius: ${theme.borderRadius};
+            border-radius: ${collapse.borderRadius};
             padding: ${collapse.borderPadding};
             border: ${collapse.collBorder};
         }

package/components/datepicker/styles.ts

@@ -23,7 +23,9 @@ const defaults = {
         },
 
         disabled: {
-            color: '#ccc',
+            get color() {
+                return theme.color.disabled
+            },
             hoverBgColor: 'none',
         },
 

package/components/dialog/base.vdt

@@ -48,23 +48,22 @@ const dialog = (
                         v-if={!hideClose && !$props.hideClose}
                         ev-mousedown={stopPropagation}
                     >
-                        <Icon class="ion-ios-close-empty" />
+                        <Icon class="k-icon-close" />
                     </Button>
                 </div>
                 <div class="k-dialog-body"><b:body>{children}</b:body></div>
                 <b:footer-wrapper>
                     <div class="k-dialog-footer">
                         <b:footer>
+                            <Button class="k-dialog-cancel" 
+                                ev-click={this.cancel}
+                            >{cancelText}</Button>
                             <Button class="k-dialog-ok" 
                                 type="primary"
                                 ev-click={this.ok} 
                                 loading={loading}
                                 disabled={disabledOk}
                             >{okText}</Button>
-                            <Button class="k-dialog-cancel" 
-                                type="secondary"
-                                ev-click={this.cancel}
-                            >{cancelText}</Button>
                         </b:footer>
                     </div>
                 </b:footer-wrapper>

package/components/dialog/styles.ts

@@ -9,32 +9,33 @@ const defaults = {
     get borderRadius() { return theme.borderRadius },
     get transition() { return theme.transition.large },
     padding: '0',
-    margin: '0 20px',
+    margin: '0 24px',
     get color() { return theme.color.text },
     get fontSize() { return theme.fontSize },
-    get boxShadow() { return theme.boxShadow },
+    get boxShadow() { return theme.largeBoxShadow },
 
     // header
     header: {
-        fontSize: '16px',
+        fontSize: '14px',
+        fontWeight: '500',
         get color() { return theme.color.title },
-        height: '61px',
-        border: `1px solid #eaeaea`,
-        closeTop: '16px',
+        height: '52px',
+        border: `1px solid #e2e5e8`,
+        closeTop: '9px',
         closeRight: '-9px',
-        closeIconFontSize: '44px',
+        closeIconFontSize: '16px',
     },
 
     // body
     body: {
-        padding: `20px`,
+        padding: `24px`,
     },
 
     // footer
     footer: {
-        padding: `20px 0`,
-        btnGap: `12px`,
-        border: `1px solid #eaeaea`,
+        padding: `16px 0`,
+        btnGap: `8px`,
+        border: `1px solid #e2e5e8`,
     },
 
     // transition
@@ -47,13 +48,14 @@ const defaults = {
 
     // alert dialog
     alert: {
-        padding: `0 20px`,
+        padding: `0 24px`,
         bodyMarginTop: `-25px`,
         tipIconMarginBottom: '10px',
         tipIconFontSize: '37px',
         tipIconLineHeight: '37px',
 
         // with title
+        titleFontWeight: '500',
         titleTipIconFontSize: '37px',
         titleFontSize: '14px',
         wrapperPaddingLeft: '8px',
@@ -117,6 +119,7 @@ export function makeDialogStyles() {
             font-size: ${dialog.header.fontSize};
             color: ${dialog.header.color};
             position: relative;
+            font-weight: ${dialog.header.fontWeight};
         }
         .k-dialog-title {
             display: inline-block;
@@ -128,6 +131,7 @@ export function makeDialogStyles() {
             .k-icon {
                 font-size: ${dialog.header.closeIconFontSize};
             }
+
         }
 
         // body
@@ -228,7 +232,8 @@ export function makeAlertStyles() {
                 .k-alert-dialog-title {
                     line-height: ${dialog.alert.tipIconLineHeight};
                     font-size: ${dialog.alert.titleFontSize};
-                }
+                    font-weight: ${dialog.alert.titleFontWeight};
+                }    
             }
         }
     ` 

package/components/drawer/styles.ts

@@ -11,7 +11,7 @@ export const placements = ['top', 'right', 'bottom', 'left'] as const;
 
 const defaults = {
     get transition() { return theme.transition.large },
-    get boxShadow() { return theme.boxShadow }
+    get boxShadow() { return theme.largeBoxShadow },
 };
 
 let drawer: typeof defaults;
@@ -21,8 +21,6 @@ setDefault(() => {
 
 export function makeStyles(overlay: boolean) {
     return css`
-        box-shadow: none;
-        border-radius: 0;
         position: fixed !important;
         background: transparent !important;
         box-shadow: none !important;
@@ -53,6 +51,7 @@ export function makeStyles(overlay: boolean) {
         ${placements.map((placement) => {
             let positionValue: string = '';
             let transformValue: string = '';
+            let borderRadius: string = '';
             placements.forEach((p) => {
                 // Set top to `0 !important` when overlay is false and placement is right or left
                 // Because dialog without overlay don't have positional parent element
@@ -63,16 +62,24 @@ export function makeStyles(overlay: boolean) {
                     : `${p}: 0;`;
             });
 
-            if(placement === 'left' || placement === 'right') {
+            if (placement === 'left' || placement === 'right') {
                 positionValue += 'height: 100% !important;';
-                transformValue = placement === 'left'
-                    ? 'translateX(-100%)'
-                    : 'translateX(100%)';
+                if (placement === 'left') {
+                    borderRadius = `0 ${theme.largeBorderRadius} ${theme.largeBorderRadius} 0`;
+                    transformValue = 'translateX(-100%)';
+                } else {
+                    borderRadius = `${theme.largeBorderRadius} 0 0 ${theme.largeBorderRadius}`;
+                    transformValue = 'translateX(100%)';
+                }
             } else {
                 positionValue += 'width: 100% !important;';
-                transformValue = placement === 'top'
-                    ? 'translateY(-100%)'
-                    : 'translateY(100%)';	
+                if (placement === 'top') {
+                    borderRadius = `0 0 ${theme.largeBorderRadius} ${theme.largeBorderRadius}`;
+                    transformValue = 'translateY(-100%)';
+                } else {
+                    borderRadius = `${theme.largeBorderRadius} ${theme.largeBorderRadius} 0 0`;
+                    transformValue = 'translateY(100%)';
+                }
             }
 
             return `
@@ -86,6 +93,9 @@ export function makeStyles(overlay: boolean) {
                             transform: ${transformValue};
                         }
                     }
+                    .k-drawer-content {
+                        border-radius: ${borderRadius};
+                    }
                 }
             `
         })}

package/components/dropdown/styles.ts

@@ -33,7 +33,7 @@ export function makeMenuStyles() {
         min-width: ${dropdown.menu.minWidth};
         background: ${dropdown.menu.bgColor};
         border-radius: ${dropdown.menu.borderRadius};
-        box-shadow: ${theme.boxShadow};
+        box-shadow: ${theme.middleBoxShadow};
         font-size: ${dropdown.menu.fontSize};
         z-index: ${dropdown.menu.zIndex};
         top: 0;

package/components/form/styles.ts

@@ -155,7 +155,7 @@ export function makeFormStyles() {
             return css`
                 &.k-${size} {
                     .k-form-item:not(:last-of-type) {
-                        margin: ${form.item[`${size}Gap` as const]}
+                        margin-bottom: ${form.item[`${size}Gap` as const]}
                     }
                     &.k-inline {
                         .k-form-item {

package/components/icon/demos/disabled.md

@@ -0,0 +1,21 @@
+---
+title: 禁用状态
+order: 2
+---
+
+添加`diasbled`属性
+
+```vdt
+import {Icon} from 'kpc';
+
+<div>
+    <Icon class="ion-happy-outline" disabled />
+    <Icon class="ion-happy-outline" disabled hoverable />
+    <Icon class="ion-happy-outline" disabled color="primary" />
+</div>
+```
+
+```styl
+.k-icon
+    margin-right 8px
+```

package/components/icon/demos/icons.md

@@ -1,6 +1,6 @@
 ---
 title: King-Design Icons
-order: 1
+order: 3
 ---
 
 
@@ -36,121 +36,92 @@ export default class extends Component {
     static defaults() {
         return {
             fonts: [
-                'alert',
-                'alarm',
-                'calendar',
-                'application',
-                'arrow-right',
-                'arrow-up',
-                'arrow-left',
-                'arrow-down',
-                'arrow-expand',
-                'arrow-left-circled',
-                'arrow-right-circled',
-                'close',
-                'bill',
-                'change',
-                'cloud-download',
-                'content-squared',
-                'cloud',
-                'arrow-move',
-                'code-download',
-                'cloud-server',
-                'arrow-shrink',
-                'clone',
-                'cloud-servers',
-                'cart',
-                'delete',
-                'fault-outline',
-                'calculate',
-                'arrow-swap',
-                'download',
-                'information',
-                'internet',
-                'edit',
-                'search',
-                'code-working',
-                'heart',
-                'content',
-                'cut',
-                'money-square',
-                'logout',
-                'cloud-upload',
-                'lock',
-                'corporate',
-                'truth-none',
-                'resize',
-                'protect',
-                'time',
-                'date',
-                'document-change',
-                'scanner',
-                'notification',
-                'notification-outline',
-                'silent',
-                'heart-outline',
-                'share',
-                'pay',
-                'picture',
-                'desktop',
-                'earphone',
-                'cube',
-                'user-verify',
-                'fault',
-                'location',
-                'down-squared',
-                'pay-dollar',
-                'paperclip',
-                'settings',
-                'home',
-                'more',
-                'phonecall',
-                'tag',
-                'truth-circled',
-                'refresh',
-                'watch',
-                'images',
-                'sort',
-                'money-circled',
-                'trade',
-                'star-outline',
-                'minus-circled',
-                'right',
-                'left',
-                'up',
-                'down',
-                'upward',
-                'up-circled',
-                'pin',
-                'hide',
-                'users',
-                'user',
-                'return-right',
-                'message',
-                'paper',
-                'phonecall-prohibit',
-                'speedometer',
-                'settings-horizontal',
-                'phone',
-                'star',
-                'play',
-                'refresh-lock',
-                'shield',
-                'panel',
-                'structure',
-                'settings-vertical',
-                'printer',
-                'stop',
-                'return-left',
-                'question',
-                'unlock',
-                'sound-off',
-                'up-squared',
-                'sound-on',
-                'upload',
-                'tool',
-                'visible',
-                'truth',
+                "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"
             ]
         }
     }

package/components/icon/index.md

@@ -13,3 +13,4 @@ sidebar: doc
 | color | 图标颜色 | `"default"` | `"primary"` | `"danger"` | `"warning"` | `"success"` | `string` | `undefined` |
 | rotate | 是否一直旋转图标 | `boolean` | `false` |
 | hoverable | 图标是否具有`hover`效果 | `boolean` | `false` |
+| disbaled | 是否展示disabled状态 | `boolean` | `false` |

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 = {};