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

package/components/slider/styles.ts

@@ -5,35 +5,36 @@ import '../../styles/global';
 
 const defaults = {
     get transition() { return theme.transition.middle },
-    height: '4px',
-    
-    bgColor: '#e5e5e5',
+    height: '6px',
+
+    bgColor: '#F0F2F4',
     get barColor() { return theme.color.primary },
-    borderRadius: '2px',
+    get borderRadius() { return theme.borderRadius },
 
     thumb: {
         height: '12px',
         width: '12px',
-        get border() { return `2px solid ${slider.barColor}` },
+        get border() { return `3px solid #fff` },
         borderRadius: '50%',
-        bgColor: '#fff',
-        hoverTransform: 'scale(1.5)',
-        hoverBgColor: '#fff',
-        disabledBgColor: '#fff',
+        get bgColor() { return slider.barColor },
+        hoverTransform: 'scale(1.25)',
+        get hoverBgColor() { return slider.barColor },
+        boxShadow: '0px 0px 5px 0px rgba(0, 0, 0, 0.08)',
     },
 
     endPadding: '10px 0 0',
 
     disabled: {
         get color() { return theme.color.disabled },
-        get bgColor() { return theme.color.disabledBg },
+        // might be calculate according to the bar color
+        bgColor: '#B5E3FF',
     },
 
     // spinnerWidth: '124px',
     spinnerGap: '16px',
 
     point: {
-        width: '8px',
+        width: '10px',
         get height() { return slider.point.width },
         bgColor: '#fff',
         borderRadius: '50%',
@@ -89,12 +90,14 @@ export function makeStyles() {
             z-index: 1;
         }
         .k-slider-thumb {
+            box-sizing: content-box;
             height: ${slider.thumb.height};
             width: ${slider.thumb.width};
             transition: all ${slider.transition};
             border: ${slider.thumb.border};
             border-radius: ${slider.thumb.borderRadius};
             background-color: ${slider.thumb.bgColor};
+            box-shadow: ${slider.thumb.boxShadow};
             outline: none;
             &:hover,
             &:focus {
@@ -113,6 +116,10 @@ export function makeStyles() {
         .k-slider-spinner {
             margin-left: ${slider.spinnerGap};
         }
+        .k-slider-spinner-sep {
+            display: inline-block;
+            margin: auto 8px;
+        }
 
         // dragging
         &.k-dragging {
@@ -131,10 +138,11 @@ export function makeStyles() {
                 cursor: not-allowed;
             }
             .k-slider-bar {
-                background-color: ${slider.disabled.color};
+                background-color: ${slider.disabled.bgColor};
             }
             .k-slider-thumb {
-                border-color: ${slider.disabled.color};
+                border-color: #fff;
+                background-color: ${slider.disabled.bgColor};
                 &:hover,
                 &:focus {
                     background-color: ${slider.disabled.bgColor};

package/components/slider/useValue.ts

@@ -29,7 +29,7 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
     }
 
     function fixValue(value: Value, fixShowValue: boolean) {
-        const fixedValue = getFixedValue(value); 
+        const fixedValue = getFixedValue(value);
         showValue.set(fixShowValue ? fixedValue: value);
         setValue(fixedValue);
     }
@@ -60,7 +60,7 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
     function fix(value: number): number {
         const {max, forceStep} = instance.get();
         const [step, min] = getStep(value);
-        
+
         if (min > max!) {
             if (process.env.NODE_ENV !== 'production') {
                 error(`[Slider] min must less than or equal to max, but got min: ${min} max: ${max}`);
@@ -71,11 +71,21 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
         return minMaxStep(value, min, max!, forceStep ? step : null);
     }
 
-    function onSpinnerChange(v: number) {
+    function onSpinnerChange(v: Value) {
         showValue.set(v);
         instance.set({value: v});
     }
 
+    function onLeftSpinnerChange(v: number) {
+        const secondValue = (showValue.value as Value<true>)[1];
+        onSpinnerChange([v, Math.max(v, secondValue)]);
+    }
+
+    function onRightSpinnerChange(v: number) {
+        const firstValue = (showValue.value as Value<true>)[0];
+        onSpinnerChange([Math.min(v, firstValue), v]);
+    }
+
     function triggerChangeEvent(oldValue: Value) {
         const {value} = instance.get();
         if (isEqualValue(value!, oldValue)) return;
@@ -86,6 +96,8 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
     return {
         showValue,
         onSpinnerChange,
+        onLeftSpinnerChange,
+        onRightSpinnerChange,
         setValue,
         triggerChangeEvent,
         fixValue,

package/components/spinner/index.md

@@ -37,4 +37,4 @@ export type StepFunction = (value: number) => number
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在`input` `change`事件触发或者点击加减按钮改变`value`时触发 | `(value: number) => void` |
+| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在输入框`change`事件触发或者点击加减按钮改变`value`时触发 | `(value: number) => void` |

package/components/spinner/index.ts

@@ -88,13 +88,4 @@ export class Spinner extends Component<SpinnerProps, SpinnerEvents> {
         const {value, max, disabled} = this.get();
         return disabled || value! >= max!;
     }
-
-    // we need change value as long as the input is valid, #213
-    @bind
-    private onInput(e: InputEvent) {
-        const val = (e.target as HTMLInputElement).value;
-        const {value} = this.value.getFixedValue(val.trim(), this.get('value')!);
-        this.value.showValue.set(val);
-        this.set({value});
-    }
 }

package/components/spinner/index.vdt

@@ -13,7 +13,8 @@ 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}
@@ -21,17 +22,18 @@ const {decrease, increase, changeValue, onFocusin} = this.change;
         class="k-spinner-btn k-left"
         size={size}
         type="none"
+        tabindex="-1"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus-small" />
-        <Icon v-else class="k-spinner-icon k-icon-arrow-down" />
+        <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus" />
+        <Icon v-else class="k-spinner-icon k-icon-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}
     />
@@ -40,8 +42,9 @@ const {decrease, increase, changeValue, onFocusin} = this.change;
         class="k-spinner-btn k-right"
         size={size}
         type="none"
+        tabindex="-1"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon k-icon-add-small" />
-        <Icon v-else class="k-spinner-icon k-icon-arrow-up" />
+        <Icon v-if={!vertical} class="k-spinner-icon k-icon-add" />
+        <Icon v-else class="k-spinner-icon k-icon-up" />
     </Button>
 </div>

package/components/spinner/styles.ts

@@ -71,15 +71,19 @@ export function makeStyles() {
         }
         .k-spinner-input {
             width: ${spinner.default.inputWidth};
-            .k-input-inner {
-                text-align: center;
+            .k-input-wrapper {
                 border:none;
                 border-radius: 0;
-                &:hover,
-                &:focus {
+                &:hover{
                     border: none
                 }
             }
+            &.k-focus .k-input-wrapper {
+                border: none;
+            }
+            .k-input-inner {
+                text-align: center;
+            }
         }
         .k-spinner-icon {
             font-size: ${spinner.default.iconFontSize};
@@ -106,8 +110,7 @@ export function makeStyles() {
                 border-radius: 0 ${spinner.borderRadius} 0 0;
             }
             .k-spinner-input {
-                font-size: 0;
-                .k-input-inner {
+                .k-input-wrapper {
                     border-radius: ${spinner.borderRadius} 0 0 ${spinner.borderRadius};
                 }
             }

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/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

@@ -15,6 +15,7 @@ sidebar: doc
 | status | 步骤条的状态 | `"normal"` | `"error"` | `"normal"` |
 | 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

@@ -8,13 +8,15 @@ export interface StepsProps {
     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', 'done'],
     type: ['default', 'line', 'simple','line-compact', 'dot'],
-    clickable: Boolean
+    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,12 @@ eachChildren(children, vNode => {
 });
 
 // add width
-const width = (100 / stepIndex) + '%'; 
+/* const width = (100 / stepIndex) + '%';  */
 
 <StepsContext.Provider value={{
     value,
     status,
-    width,
+    /* width, */
     type,
     onChange: this.changeIndex 
 }}>

package/components/steps/step.vdt

@@ -6,7 +6,7 @@ import {Icon} from '../icon';
 const {children, title, index, className, style} = this.get();
 
 <StepsContext.Consumer>
-    {({value, status, width, onChange, type}) => {
+    {({value, status, onChange, type}) => {
         const selected = value === index;
         const error = selected && status === 'error';
         const done = value > index;
@@ -26,9 +26,9 @@ const {children, title, index, className, style} = this.get();
                 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-if={error && type !== 'simple'} class="k-icon-close-bold" color="danger" />
                     <Icon v-else-if={done && (type === 'line' || type === 'line-compact')}
-                        class="k-icon-check"
+                        class="k-icon-check-bold"
                         color="primary"
                     />
                     <span v-else-if={type !== 'simple'}>{index + 1}</span>