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

package/components/spinner/styles.ts

@@ -2,15 +2,24 @@ import {css} from '@emotion/css';
 import {deepDefaults, sizes, palette} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
+import spin from '~/components/spin';
 
 const defaults = {
+    get borderRadius() { return theme.borderRadius },
+    get border() { return `1px solid ${theme.color.border}` },
+    get hoverBorderColor() { return theme.color.primary },
+    get hoverBtnBg() { return theme.color.bg },
+    get disabledBorderColor() { return theme.color.disabledBorder },
+    get disabledBg() { return theme.color.disabledBg },
+    get disabledColor() { return theme.color.disabled },
+
     default: {
         inputWidth: '46px',
-        iconFontSize: '24px'
+        iconFontSize: '16px'
     },
     large: {
         inputWidth: '60px',
-        iconFontSize: '32px'
+        iconFontSize: '24px'
     },
     small: {
         inputWidth: '32px',
@@ -46,39 +55,35 @@ export function makeStyles() {
     return css`
         display: inline-block;
         vertical-align: middle;
-        line-height: 1;
-        .k-spinner-btn {
-            vertical-align: top;
-            &:hover,
-            &:focus {
-                z-index: 1;
-                position: relative;
+        border: ${spinner.border};
+        border-radius: ${spinner.borderRadius};
+        &:hover {
+            border-color: ${spinner.hoverBorderColor};
+            .k-spinner-btn {
+                background: ${spinner.hoverBtnBg};
             }
-
-            &.k-left {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-                margin-right: -1px;
+            .k-left {
+                border-radius: ${spinner.borderRadius} 0 0 ${spinner.borderRadius};
             }
-            &.k-right {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-                margin-left: -1px;
+            .k-right {
+                border-radius: 0 ${spinner.borderRadius} ${spinner.borderRadius} 0;
             }
         }
         .k-spinner-input {
             width: ${spinner.default.inputWidth};
-            vertical-align: top;
             .k-input-inner {
                 text-align: center;
-                padding: 0;
+                border:none;
                 border-radius: 0;
+                &:hover,
+                &:focus {
+                    border: none
+                }
             }
         }
         .k-spinner-icon {
             font-size: ${spinner.default.iconFontSize};
         }
-        
         &.k-vertical {
             position: relative;
             font-size: 0;
@@ -86,31 +91,30 @@ export function makeStyles() {
                 position: absolute;
                 right: 0;
                 margin: 0;
-                height: calc(50% + 1px);
+                height: calc(50% - 2px);
                 line-height: 50%;
             }
             .k-spinner-icon {
-                line-height: 50% !important;
                 font-size: inherit !important;
             }
             .k-spinner-btn.k-left {
-                bottom: 0;
-                border-radius: 0 0 ${theme.borderRadius} 0;
+                bottom: 1px;
+                border-radius: 0 0 ${spinner.borderRadius} 0;
             }
             .k-spinner-btn.k-right {
-                top: 0;
-                border-radius: 0 ${theme.borderRadius} 0 0;
+                top: 1px;
+                border-radius: 0 ${spinner.borderRadius} 0 0;
             }
             .k-spinner-input {
                 font-size: 0;
                 .k-input-inner {
-                    border-radius: ${theme.borderRadius} 0 0 ${theme.borderRadius};
+                    border-radius: ${spinner.borderRadius} 0 0 ${spinner.borderRadius};
                 }
             }
             ${sizes.map(size => {
                 const generate = () => `
                     .k-spinner-input {
-                        padding-right: calc(${theme[size].height} - 1px);
+                        padding-right: ${theme[size].height};
                         width: ${spinner.vertical[size].width};
                     }
                 `
@@ -125,14 +129,10 @@ export function makeStyles() {
                 }
             })}
         }
-
+            
         &.k-disabled {
-            .k-spinner-btn {
-                &:hover,
-                &:focus {
-                    z-index: 0;
-                }
-            }
+            border-color: ${spinner.disabledBorderColor};
+            background: ${spinner.disabledBg};
         }
 
         ${sizes.map(size => {

package/components/steps/demos/basic.md

@@ -14,11 +14,12 @@ import {Steps, Step, Button} from 'kpc';
         <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
         <Step title="设置VPC" />
     </Steps>
+
     <Button type="primary" ev-click={this.previous}
         disabled={this.get('index') === 0}
     >Previous Step</Button>
     <Button type="primary" ev-click={this.next}
-        disabled={this.get('index') === 2}
+        disabled={this.get('index') === 3}
     >Next Step</Button>
 </div>
 ```

package/components/steps/demos/clickable.md

@@ -14,6 +14,12 @@ import {Steps, Step, Button} from 'kpc';
         <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
         <Step title="设置VPC" />
     </Steps>
+    <br />
+    <Steps v-model="index" type="line" clickable>
+        <Step title="选择配置">请选择主机的配置信息</Step>
+        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
+        <Step title="设置VPC" />
+    </Steps>
     <Button type="primary" ev-click={this.previous}
         disabled={this.get('index') === 0}
     >Previous Step</Button>

package/components/steps/demos/error.md

@@ -8,9 +8,29 @@ order: 1
 ```vdt
 import {Steps, Step} from 'kpc';
 
-<Steps value={1} status="error">
-    <Step title="选择配置">请选择主机的配置信息</Step>
-    <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
-    <Step title="设置VPC" />
-</Steps>
+<div>
+    <Steps value={1} status="error">
+        <Step title="选择配置">请选择主机的配置信息</Step>
+        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
+        <Step title="设置VPC" />
+    </Steps>
+
+    <br />
+    <br />
+
+    <Steps value={1} status="error" type="line">
+        <Step title="选择配置">请选择主机的配置信息</Step>
+        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
+        <Step title="设置VPC" />
+    </Steps>
+
+    <br />
+    <br />
+
+    <Steps value={1} status="error" type="simple">
+        <Step title="选择配置">请选择主机的配置信息</Step>
+        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
+        <Step title="设置VPC" />
+    </Steps>
+</div>
 ```

package/components/steps/demos/line.md

@@ -14,6 +14,11 @@ import {Steps, Step, Button} from 'kpc';
         <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
         <Step title="设置VPC" />
     </Steps>
+    <Steps v-model="index" type="line-compact">
+        <Step title="选择配置">请选择主机的配置信息</Step>
+        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
+        <Step title="设置VPC" />
+    </Steps>
 
     <Button type="primary" ev-click={this.previous}
         disabled={this.get('index') === 0}
@@ -21,16 +26,12 @@ import {Steps, Step, Button} from 'kpc';
     <Button type="primary" ev-click={this.next}
         disabled={this.get('index') === 2}
     >Next Step</Button>
-
-    <Steps value={1} status="error" type="line">
-        <Step title="选择配置">请选择主机的配置信息</Step>
-        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
-        <Step title="设置VPC" />
-    </Steps>
 </div>
 ```
 
 ```styl
+.k-steps
+    margin-bottom 16px
 .k-btn
     margin 20px 20px 20px 0
 ```

package/components/steps/demos/simple.md

@@ -21,12 +21,6 @@ import {Steps, Step, Button} from 'kpc';
     <Button type="primary" ev-click={this.next}
         disabled={this.get('index') === 2}
     >Next Step</Button>
-
-    <Steps value={1} status="error" type="simple">
-        <Step title="选择配置">请选择主机的配置信息</Step>
-        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
-        <Step title="设置VPC" />
-    </Steps>
 </div>
 ```
 

package/components/steps/index.md

@@ -13,7 +13,7 @@ sidebar: doc
 | --- | --- | --- | --- |
 | value | 标识当前第几步，从`0`开始 | `number` | `undefined` |
 | status | 步骤条的状态 | `"normal"` | `"error"` | `"normal"` |
-| type | 步骤条样式 | `"default"` | `"line"` | `"simple"` | `"default"` |
+| type | 步骤条样式 | `"default"` | `"line"` | `"simple"` | `"line-compact"` |`"default"` 
 | clickable | 是否支持快速切换【已完成】的步骤 | `boolean` | `false` |
 
 ## Step

package/components/steps/index.ts

@@ -5,15 +5,15 @@ export * from './step';
 
 export interface StepsProps {
     value?: number
-    status?: 'normal' | 'error'
-    type?: 'default' | 'line' | 'simple'
+    status?: 'normal' | 'error' | 'done'
+    type?: 'default' | 'line' | 'simple' | 'line-compact' | 'dot'
     clickable?: boolean
 }
 
 const typeDefs: Required<TypeDefs<StepsProps>> = {
     value: Number,
-    status: ['normal', 'error'],
-    type: ['default', 'line', 'simple'],
+    status: ['normal', 'error', 'done'],
+    type: ['default', 'line', 'simple','line-compact', 'dot'],
     clickable: Boolean
 };
 

package/components/steps/index.vdt

@@ -33,6 +33,7 @@ const width = (100 / stepIndex) + '%';
     value,
     status,
     width,
+    type,
     onChange: this.changeIndex 
 }}>
     <div class={classNameObj} {...getRestProps(this)}>{steps}</div>

package/components/steps/step.vdt

@@ -1,41 +1,44 @@
 import {linkEvent} from 'intact';
 import {getRestProps, addStyle} from '../utils';
-import {makeStepStyles} from './styles';
 import {context as StepsContext} from './context';
+import {Icon} from '../icon';
 
 const {children, title, index, className, style} = this.get();
 
 <StepsContext.Consumer>
-    {({value, status, width, onChange}) => {
+    {({value, status, width, onChange, type}) => {
         const selected = value === index;
         const error = selected && status === 'error';
+        const done = value > index;
         const classNameObj = {
             'k-step': true,
             'k-active': selected,
-            'k-done': value > index,
+            'k-done': done,
             'k-error': error,
             [className]: className,
-            [makeStepStyles()]: true,
         };
 
         return <div {...getRestProps(this)} 
             class={classNameObj}
-            style={addStyle(style, {width})} 
-            ev-click={linkEvent(index, onChange)}
+            style={style}
         >
-            <div class="k-step-tail"></div>
-            <div class="k-step-wrapper">
-                <div class="k-step-head">
-                    <div class="k-step-inner">
-                        <i class="k-step-icon ion-ios-close-empty" v-if={error}></i>
-                        <span v-else>{index + 1}</span>
-                    </div>
+            <div class="k-step-wrapper"
+                ev-click={linkEvent(index, onChange)}
+            >
+                <div class="k-step-mark">
+                    <Icon v-if={error && type !== 'simple'} class="k-icon-close-big" color="danger" />
+                    <Icon v-else-if={done && (type === 'line' || type === 'line-compact')}
+                        class="k-icon-check"
+                        color="primary"
+                    />
+                    <span v-else-if={type !== 'simple'}>{index + 1}</span>
                 </div>
                 <div class="k-step-main">
                     <div class="k-step-title">{title}</div>
                     <div class="k-step-content">{children}</div>
                 </div>
             </div>
+            <div class="k-step-tail"></div>
         </div>
     }}
 </StepsContext.Consumer>