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

package/components/spinner/index.vdt

@@ -13,24 +13,27 @@ const classNameObj = {
     'k-vertical': vertical,
     [makeStyles()]: true,
 };
-const {decrease, increase, changeValue, onFocusin} = this.change;
+const {decrease, increase, onChangeValue, onFocusin} = this.change;
+const {showValue, onInput} = this.value;
 
 <div class={classNameObj} {...getRestProps(this)}>
     <Button icon ev-click={decrease}
         disabled={this.isDisabledDecrease()}
         class="k-spinner-btn k-left"
         size={size}
+        type="none"
+        tabindex="-1"
     >
-        <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"
         disabled={disabled} 
-        ev-change={changeValue}
+        ev-change={onChangeValue}
         ev-focusin={onFocusin}
-        value={this.value.showValue.value}
-        ev-input={this.onInput}
+        value={showValue.value}
+        ev-input={onInput}
         size={size}
         width={width}
     />
@@ -38,8 +41,10 @@ const {decrease, increase, changeValue, onFocusin} = this.change;
         disabled={this.isDisabledIncrease()}
         class="k-spinner-btn k-right"
         size={size}
+        type="none"
+        tabindex="-1"
     >
-        <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>

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/spinner/useChange.ts

@@ -24,7 +24,7 @@ export function useChange(
         fixAndTriggerChange(Number((value! - step).toFixed(10)), 0);
     }
 
-    function changeValue(e: Event) {
+    function onChangeValue(e: Event) {
         fixAndTriggerChange(
             (e.target as HTMLInputElement).value.trim(),
             instance.get('value')!,
@@ -42,5 +42,5 @@ export function useChange(
         }
     }
 
-    return {increase, decrease, changeValue, onFocusin};
+    return {increase, decrease, onChangeValue, onFocusin};
 }

package/components/spinner/useValue.ts

@@ -60,7 +60,15 @@ export function useValue(
         return {valueString, value};
     }
 
-    return {showValue, fixValue, getFixedValue};
+    // we need change value as long as the input is valid, #213
+    function onInput(e: InputEvent) {
+        const val = (e.target as HTMLInputElement).value;
+        const {value} = getFixedValue(val.trim(), instance.get('value')!);
+        showValue.set(val);
+        instance.set({value});
+    }
+
+    return {showValue, fixValue, getFixedValue, onInput};
 }
 
 /**

package/components/split/index.vdt

@@ -1,5 +1,7 @@
 import {makeStyles} from './style';
 import {kls} from './style';
+import { MemoBlock } from './memo';
+import { getRestProps } from '../utils';
 
 const {mode} = this.get();
 const {firstSize, lastSize} = this.size;
@@ -15,12 +17,16 @@ const classNameObj = {
 
 const stylePropName = mode === 'horizontal' ? 'width' : 'height';
 
-<div class={classNameObj} ref={elementRef}>
+<div class={classNameObj} ref={elementRef} {...getRestProps(this)}>
     <div class={kls('first')}
         ref={firstRef}
         style={{[stylePropName]: firstSize.value}}
     >
-        <b:first />
+        <MemoBlock block={$blocks.first}>
+            <template>
+                <b:first />
+            </template>
+        </MemoBlock>
     </div>
     <div class={kls('line-wrapper')} ev-mousedown={start}>
         <b:drag>
@@ -33,6 +39,10 @@ const stylePropName = mode === 'horizontal' ? 'width' : 'height';
         style={{[stylePropName]: lastSize.value}}
         ref={lastRef}
     >
-        <b:last />
+        <MemoBlock block={$blocks.last}>
+            <template>
+                <b:last />
+            </template>
+        </MemoBlock>
     </div>
 </div>

package/components/split/memo.ts

@@ -0,0 +1,29 @@
+import {Component, Props, VNodeComponentClass, IntactDom} from 'intact';
+
+interface MemoBlockProps {
+    block: Function
+}
+
+export class MemoBlock extends Component<MemoBlockProps> {
+    static template = function(this: MemoBlock) {
+        const props = this.$props;
+
+        return props.children;
+    }
+
+    $update(
+        lastVNode: VNodeComponentClass<this>,
+        nextVNode: VNodeComponentClass<this>,
+        parentDom: Element,
+        anchor: IntactDom | null,
+        mountedQueue: Function[],
+        force: boolean
+    ) {
+        const lastProps = lastVNode.props!;
+        const nextProps = nextVNode.props!;
+
+        if (lastProps.block === nextProps.block) return;
+
+        super.$update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+    }
+}

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/demos/vertical.md

@@ -0,0 +1,79 @@
+---
+title: 垂直排列 
+order: 4
+---
+
+添加`vertical`属性，即可垂直排列
+
+> `line` `line-compact`垂直排列模式下，展示相同
+
+```vdt
+import {Steps, Step, Button} from 'kpc';
+
+<div class="demo-wrapper">
+    <Steps v-model="index" vertical>
+        <Step title="选择配置">请选择主机的配置信息</Step>
+        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
+        <Step title="设置VPC" />
+    </Steps>
+
+    <Steps v-model="index" vertical type="line">
+        <Step title="选择配置">请选择主机的配置信息</Step>
+        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
+        <Step title="设置VPC" />
+    </Steps>
+
+    <Steps v-model="index" vertical type="line-compact">
+        <Step title="选择配置">请选择主机的配置信息</Step>
+        <Step title="选择弹性IP">请选择主机弹性IP的配置信息</Step>
+        <Step title="设置VPC" />
+    </Steps>
+
+    <Steps v-model="index" vertical type="simple">
+        <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>
+    <Button type="primary" ev-click={this.next}
+        disabled={this.get('index') === 3}
+    >Next Step</Button>
+</div>
+```
+
+```styl
+.demo-wrapper
+    display flex
+    gap 24px
+```
+
+```ts
+import {bind} from 'kpc';
+
+interface Props {
+    index?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            index: 0
+        };
+    }
+
+    @bind
+    previous() {
+        this.set('index', this.get('index')! - 1);
+    }
+
+    @bind
+    next() {
+        this.set('index', this.get('index')! + 1);
+    }
+}
+```

package/components/steps/index.md

@@ -13,8 +13,9 @@ 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` |
+| vertical | 是否垂直排列 | `boolean` | `false` |
 
 ## Step
 

package/components/steps/index.spec.ts

@@ -12,7 +12,7 @@ describe('Steps', () => {
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
 
-        const [step1, step2] = element.querySelectorAll<HTMLElement>('.k-step');
+        const [step1, step2] = element.querySelectorAll<HTMLElement>('.k-step-wrapper');
         step1.click();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();

package/components/steps/index.ts

@@ -5,16 +5,18 @@ 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
+    vertical?: boolean
 }
 
 const typeDefs: Required<TypeDefs<StepsProps>> = {
     value: Number,
-    status: ['normal', 'error'],
-    type: ['default', 'line', 'simple'],
-    clickable: Boolean
+    status: ['normal', 'error', 'done'],
+    type: ['default', 'line', 'simple','line-compact', 'dot'],
+    clickable: Boolean,
+    vertical: Boolean,
 };
 
 const defaults = (): Partial<StepsProps> => ({

package/components/steps/index.vdt

@@ -5,7 +5,7 @@ import {context as StepsContext} from './context';
 
 const {
     children, className, value,
-    status, type, clickable
+    status, type, clickable, vertical,
 } = this.get();
 
 const classNameObj = {
@@ -13,6 +13,7 @@ const classNameObj = {
     [className]: className,
     [`k-${type}`]: true,
     'k-clickable': clickable,
+    'k-vertical': vertical,
     [makeStepsStyles()]: true,
 };
 
@@ -27,12 +28,13 @@ eachChildren(children, vNode => {
 });
 
 // add width
-const width = (100 / stepIndex) + '%'; 
+/* const width = (100 / stepIndex) + '%';  */
 
 <StepsContext.Provider value={{
     value,
     status,
-    width,
+    /* 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, 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>