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

package/components/steps/styles.ts

@@ -4,75 +4,59 @@ import {deepDefaults}  from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
-    get transition() { return theme.transition.middle },
-    get height() { return theme.default.height }, 
-    get bgColor() { return theme.color.bg }, 
-    gutter: '10px',
-    gapTop: '-2px',
+    gap: '10px',
+    get titleColor() { return theme.color.title },
+    get desColor() { return theme.color.lightBlack },
+    get markColor() { return theme.color.placeholder },
+    get markborder() { return `1px solid ${theme.color.placeholder}` },
+    markBgColor: '#fff',
 
-    // head
-    head: {
-        innerWidth: '16px',
-        get innerBorder() { return `1px solid ${theme.color.placeholder}` },
-        iconFontSize: '24px',
-        paddingRight: '10px',
-    },
-
-    main: {
-        get color() { return theme.color.text }, 
-        get titlePaddingRight() { return steps.head.paddingRight },
-        contentFontSize: '12px',
+    default: {
+        get height() { return theme.default.height }, 
+        get bgColor() { return theme.color.bg },
+        markWidth: '16px',
     },
 
     // done
     done: {
-       get headColor() { return theme.color.primary }, 
-       get headInnerBorderColor() { return theme.color.primary },
-       headInnerBgColor: 'transparent',
-       get mainColor() { return theme.color.primary },
-       get simpleColor() { return theme.color.text }, 
+        get markColor() { return theme.color.primary }, 
+        get markBorderColor() { return theme.color.primary },
+        markBgColor: '#fff',
+        get mainColor() { return theme.color.primary },
     },
 
     // active
     active: {
-        headColor: '#fff',
-        get headInnerBorderColor() { return theme.color.primary }, 
-        get headInnerBgColor() { return theme.color.primary },
+        markColor: '#fff',
+        get markBorderColor() { return theme.color.primary }, 
+        get markBgColor() { return theme.color.primary },
         get mainColor() { return theme.color.primary }, 
-        get simpleColor() { return theme.color.primary }, 
     },
 
     // error
     error: {
-        get headColor() { return theme.color.danger }, 
-        get headInnerBorderColor() { return theme.color.danger }, 
-        headInnerBgColor: 'transparent',
+        get markColor() { return theme.color.danger }, 
+        get markBorderColor() { return theme.color.danger }, 
+        markBgColor: '#fff',
         get mainColor() { return theme.color.danger }, 
-        get simpleColor() { return theme.color.danger }, 
     },
 
     // line
     line: {
-        bgColor: '#fff',
-        mainContentGap: '5px 0 0',
-        get tailBgColor() { return theme.color.placeholder },
-        get doneTailBgColor() { return theme.color.primary }, 
-        innerWidth: '32px',
-        innerLineHeight: '30px',
-        innerFontSize: '18px',
-        headTop: '16px',
-        titleFontSize: '14px',
-        titleGopTop: '16px',
-        iconLineHeight: '30px',
-        tailTop: '16px',
-        width: '160px',
+        markWidth: '32px',
+        markFontSize: '24px',
+        get lineColor() { return theme.color.border},
+        titleGap: '16px',
+        descGap: '4px',
+        contentMaxWidth: '200px',
     },
 
     // simple
     simple: {
-        fontSize: '14px',
-        get color() { return theme.color.disabled }, 
-        headPaddingRight: '6px',
+        markWidth: '12px',
+        get markBgColor() { return theme.color.placeholder },
+        get doneMarkBgColor() { return theme.color.primary },
+        get errorMarkBgColor() { return theme.color.danger },
     }
 };
 
@@ -86,256 +70,310 @@ const stepStatus = ['done', 'active', 'error'] as const;
 export function makeStepsStyles() {
     return css`
         display: flex;
-        // default and line type
-        &.k-default,
-        &.k-line {
-            .k-step-head {
-                padding-right: ${steps.head.paddingRight};
+
+        ${makeCommonStyles()};
+
+        &.k-default {
+            ${makeDefaultStyles()};
+        }
+            
+        &.k-line,
+        &.k-line-compact,
+        &.k-simple {
+            ${makeLineStyles()};
+        }
+
+        &.k-line-compact {
+            ${makeLineCompactStyles()};
+        }
+
+        &.k-simple {
+            ${makeSimpleStyles()};
+        }
+
+        // clickable
+        &.k-clickable {
+            .k-done {
+                cursor: pointer;
             }
-            .k-step-inner {
-                width: ${steps.head.innerWidth};
-                height: ${steps.head.innerWidth}; 
-                line-height: calc(${steps.head.innerWidth} - 2px);
-                border-radius: 50%;
-                text-align: center;
-                border: ${steps.head.innerBorder};
+        }
+    `;
+}
+
+function makeDefaultStyles() {
+    const defaults = steps.default;
+
+    return css`
+        text-align: center;
+        height: ${defaults.height}; 
+        background: ${defaults.bgColor};
+
+        .k-step-wrapper {
+            ${center()};
+            height: 100%;
+        }
+        .k-step-mark {
+            width: ${defaults.markWidth};
+            height: ${defaults.markWidth}; 
+            margin-right: ${steps.gap};
+        }
+        .k-step-main {
+            display: flex;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        .k-step-title {
+            padding-right: ${steps.gap};
+        }
+
+        // tail
+        .k-step:last-of-type {
+            .k-step-tail {
+                display: none;
             }
-            .k-step-icon:before {
-                line-height: calc(${steps.head.innerWidth} - 2px);
+        } 
+        .k-step-tail {
+            position: absolute;
+            top: 0;
+            right: calc(-1 * (${defaults.height} / 2 + ${steps.gap}));
+            width: calc(${defaults.height} / 2 + ${steps.gap});
+            height: ${defaults.height}; 
+            overflow: hidden;
+            z-index: 1;
+            &:after, &:before {
+                content: '';
+                border-width: calc(${defaults.height} / 2 + ${steps.gap});
+                border-style: solid;
+                border-color: transparent;
+                position: absolute;
+                top: calc(-1 * ${steps.gap});
             }
-            .k-step-main {
-                color: ${steps.main.color}; 
+            &:after {
+                border-left-color: ${defaults.bgColor};
+                left: calc(-1 * ${steps.gap});
             }
-            .k-step-tail {
-                position: absolute;
+            &:before {
+                border-left-color: #fff;
+                left: 0;
             }
-            .k-step:last-of-type {
-                .k-step-tail {
-                    display: none;
-                }
-            } 
-            // step
-            ${stepStatus.map(status => {
-                const styles = steps[status];
-                return css`
-                    .k-${status} {
-                        .k-step-inner {
-                            color: ${styles.headColor};
-                            border-color: ${styles.headInnerBorderColor} !important;
-                            background: ${styles.headInnerBgColor};
-                        }
-                        .k-step-main {
-                            color: ${styles.mainColor};
-                        }
-                    }
-                `
-            })} 
         }
-            
-        // default and simple type
-        &.k-simple,
-        &.k-default {
+        .k-step:not(:first-of-type) {
+            padding-left: calc(${defaults.height} / 2 + ${steps.gap});
+        }
+    `
+}
+
+function makeLineStyles() {
+    const line = defaults.line;
+    return css`
+        .k-step {
+            display: flex;
+        }
+        .k-step-wrapper {
+            display: inline-block;
             text-align: center;
-            height: ${steps.height}; 
-            line-height: ${steps.height}; 
-            overflow: hidden;
-            .k-step-head,
-            .k-step-main,
-            .k-step-content,
-            .k-step-inner {
-                display: inline-block;
-            }
-            .k-step {
-                white-space: nowrap;
-            }
-            .k-step-wrapper {
-                overflow: hidden;
+            position: relative;
+        }
+        .k-step:last-of-type {
+            flex: 0 0 auto;
+        }
+        .k-step-mark {
+            width: ${line.markWidth};
+            height: ${line.markWidth};
+            position: relative;
+            z-index: 1;
+            &, .k-icon {
+                font-size: ${line.markFontSize};
             }
         }
-    
-        // default
-        &.k-default {
-            background: ${steps.bgColor};
-            .k-step-tail {
-                top: 0;
-                right: calc(-1 * (${steps.height} / 2 + ${steps.gutter}));
-                width: calc(${steps.height} / 2 + ${steps.gutter});
-                height: ${steps.height}; 
-                overflow: hidden;
-                z-index: 1;
-                &:after, &:before {
-                    content: '';
-                    border-width: calc(${steps.height} / 2 + ${steps.gutter});
-                    border-style: solid;
-                    border-color: transparent;
-                    position: absolute;
-                    top: calc(-1 * ${steps.gutter});
-                }
-                &:after {
-                    border-left-color: ${steps.bgColor};
-                    left: calc(-1 * ${steps.head.paddingRight});
-                }
-                &:before {
-                    border-left-color: ${steps.line.bgColor};
-                    left: 0;
-                }
+        .k-step-main {
+            padding-top: ${line.titleGap};
+        }
+        .k-step-title {
+            font-size: 14px;
+            color: ${theme.color.text};
+        }
+        .k-step-content {
+            margin-top: ${line.descGap};
+            color: ${theme.color.placeholder};
+            max-width: ${line.contentMaxWidth};
+        }
+        
+        // draw connected line
+        .k-step-wrapper {
+            &:before,
+            &:after {
+                content: '';
+                display: block;
+                height: 1px;
+                background: ${line.lineColor};
+                width: 50%;
+                position: absolute;
+                top: calc(${line.markWidth} / 2);
             }
-            .k-step-head,
-            .k-step-inner {
-                vertical-align: middle;
-                margin-top: ${steps.gapTop};
+            &:after {
+                right: 0;
             }
-            .k-step:not(:first-of-type) {
-                padding-left: calc(${steps.height} / 2 + ${steps.gutter});
+        }
+        .k-step {
+            &:first-of-type .k-step-wrapper:before,
+            &:last-of-type .k-step-wrapper:after {
+                background: transparent;
             }
         }
+        .k-step-tail {
+            flex: 1;
+            height: 1px;
+            background: ${line.lineColor};
+            margin-top: calc(${line.markWidth} / 2);
+        }
         
-        // line type
-        &.k-line {
-            .k-step {
-                width: auto !important;
-                &:last-of-type {
-                    flex: 0 0 auto;
-                    .k-step-wrapper {
-                        display: flex;
-                    }
-                    .k-step-title {
-                        padding-right: 0;
-                    }
+        // status
+        .k-step {
+            &.k-done {
+                .k-step-tail,
+                &:not(:last-of-type) .k-step-wrapper:after,
+                &:not(:first-of-type) .k-step-wrapper:before {
+                    background: ${theme.color.primary};
                 }
             }
-            .k-step-head {
-                background: ${steps.line.bgColor};
-                position: relative;
-                display: flex;
-                padding: 0;
-                &:before,
-                &:after {
-                    content: '';
-                    display: block;
-                    flex: 1;
-                    height: 1px;
-                    background: ${theme.color.placeholder};
-                    top: ${steps.line.headTop};
-                    position: relative;
+            &:not(:first-of-type).k-active {
+                .k-step-wrapper:before {
+                    background: ${theme.color.primary};
                 }
             }
-            .k-step-inner {
-                width: ${steps.line.innerWidth};
-                height: ${steps.line.innerWidth};
-                line-height: ${steps.line.innerLineHeight};
-                font-size: ${steps.line.innerFontSize};
+            &.k-active .k-step-title {
+                color: ${theme.color.primary};
             }
-            .k-step-main {
-                position: relative;
-                width: ${steps.line.width};
+            &.k-error .k-step-title {
+                color: ${theme.color.danger};
             }
-            .k-step-title {
-                line-height: ${steps.head.innerWidth};
-                background: ${steps.line.bgColor};
-                font-size: ${steps.line.titleFontSize};
-                padding: 0;
-                margin-top: ${steps.line.titleGopTop};
-            }
-            .k-step-content {
-                margin: ${steps.line.mainContentGap};
+        }
+    `;
+}
+
+function makeLineCompactStyles() {
+    const line = defaults.line;
+
+    return css`
+        .k-step-wrapper {
+            display: inline-flex;
+            text-align: left;
+            &:before, &:after {
+                display: none;
             }
-            .k-step-tail {
-                left: 0;
-                right: ${steps.head.paddingRight}; 
-                top: calc(${steps.head.innerWidth} / 2);
+        }
+        .k-step-main {
+            flex: 1;
+            padding: 0 0 0 ${line.titleGap};
+        }
+        .k-step-content {
+            margin: 0;
+        }
+        .k-step-tail {
+            margin-right: ${line.titleGap};
+        }
+        .k-step-title {
+            display: flex;
+            align-items: center;
+            height: ${line.markWidth};
+            &:after {
+                content: '';
+                display: block;
+                flex: 1;
                 height: 1px;
-                background: ${steps.line.tailBgColor};
-            }
-            .k-step:first-of-type .k-step-head:before,
-            .k-step:last-of-type .k-step-head:after {
-                background: transparent;
-            }
-            // done
-            .k-done {
-                .k-step-tail {
-                    background: ${steps.line.doneTailBgColor};
-                }
-                .k-step-head {
-                    &:before,
-                    &:after {
-                        background: ${theme.color.primary};
-                    }
-                }
+                background: ${line.lineColor};
+                margin-left: ${line.titleGap};
             }
-            .k-active {
-                .k-step-head {
-                    &:before {
-                        background: ${theme.color.primary};
-                    }
+        }
+        .k-step:last-of-type .k-step-title:after {
+            display: none;
+        }
+        // status
+        .k-step {
+            &.k-done {
+                .k-step-title:after {
+                    background: ${theme.color.primary};
                 }
             }
-            .k-step-icon:before {
-                line-height: ${steps.line.iconLineHeight};
-            }
-            .k-step-wrapper {
-                display: inline-block !important;
-                text-align: center;
-            }
-            .k-step-tail {
-                right: 0;
-                top: ${steps.line.tailTop};
+        }
+    `;
+}
+
+function makeSimpleStyles() {
+    const simple = defaults.simple;
+    return css`
+        .k-step-mark {
+            width: ${simple.markWidth};
+            height: ${simple.markWidth};
+            background: ${simple.markBgColor};
+        } 
+        .k-step-wrapper {
+            font-size: 0; // eliminate the gap
+            &:before,
+            &:after {
+                top: calc(${simple.markWidth} / 2);
             }
         }
-    
-        // simple type
-        &.k-simple {
-            font-size: ${steps.simple.fontSize};
-            .k-step,
-            .k-step-main {
-                color: ${steps.simple.color}; 
+        .k-step-main {
+            font-size: ${theme.default.fontSize};
+        }
+        .k-step-tail {
+            margin-top: calc(${simple.markWidth} / 2);
+        }
+        .k-step {
+            &.k-done {
+                .k-step-mark {
+                    background: ${simple.doneMarkBgColor};
+                }
             }
-            .k-step-head {
-                padding-right: ${steps.simple.headPaddingRight};
-                vertical-align: top;
+            &.k-error {
+                .k-step-mark {
+                    background: ${simple.errorMarkBgColor};
+                }
             }
+        }
+    `;
+}
+
+function center(flex: 'flex' | 'inline-flex' = 'flex') {
+    return css`
+        display: ${flex};
+        align-items: center;
+        justify-content: center;
+    `;
+}
+
+export function makeCommonStyles() {
+    return css`
+        .k-step {
+            position: relative; 
+            flex: 1;
+
+            // status 
             ${stepStatus.map(status => {
                 const styles = steps[status];
                 return css`
-                    .k-${status} {
-                        .k-step-main,
-                        .k-step-inner {
-                            color: ${styles.simpleColor}; 
+                    &.k-${status} {
+                        .k-step-mark {
+                            color: ${styles.markColor};
+                            border-color: ${styles.markBorderColor};
+                            background: ${styles.markBgColor};
+                        }
+                        .k-step-main {
+                            color: ${styles.mainColor};
                         }
                     }
                 `
             })} 
         }
-    
-        // clickable
-        &.k-clickable {
-            .k-done {
-                cursor: pointer;
-            }
+        .k-step-mark {
+            ${center('inline-flex')};
+            border: ${steps.markborder};
+            border-radius: 50%;
+            vertical-align: top;
+            color: ${steps.markColor};
+            background: ${steps.markBgColor};
         }
     `;
 }
-
-export function makeStepStyles() {
-    return css`
-        position: relative; 
-        flex: 1;
-        .k-step-icon:before {
-            font-size: ${steps.head.iconFontSize};
-        }
-        .k-step-title {
-            display: inline-block;
-            padding-right: ${steps.main.titlePaddingRight};
-            white-space: nowrap;
-        }
-        .k-step-content {
-            font-size: ${steps.main.contentFontSize};
-        }
-        .k-step-inner,
-        .k-step-main {
-            transition: all ${steps.transition};
-        }
-    `;
-}
-
-

package/components/switch/demos/basic.md

@@ -3,14 +3,13 @@ title: 基础用法
 order: 0
 ---
 
-通过`disabled`禁用组件，`v-model`进行数据双向绑定。
+通过`v-model`进行数据双向绑定。
 
 ```vdt
 import {Switch} from 'kpc';
 
 <div>
     <Switch v-model="value" />
-    <Switch disabled />
 </div>
 ```
 

package/components/switch/demos/disabled.md

@@ -0,0 +1,20 @@
+---
+title: 禁用状态
+order: 0.1
+---
+
+添加`disabled`属性
+
+```vdt
+import {Switch} from 'kpc';
+
+<div>
+    <Switch disabled />
+    <Switch value={true} disabled />
+</div>
+```
+
+```styl
+.k-switch
+    margin-right 20px
+```

package/components/switch/demos/onOff.md

@@ -16,6 +16,11 @@ import {Switch} from 'kpc';
         <b:on><i class="ion-ios-checkmark-empty"></i></b:on>
         <b:off><i class="ion-ios-close-empty"></i></b:off>
     </Switch>
+     <Switch on="开" off="关" flat/>
+    <Switch value={true} flat>
+        <b:on><i class="ion-ios-checkmark-empty"></i></b:on>
+        <b:off><i class="ion-ios-close-empty"></i></b:off>
+    </Switch>
 </div>
 ```