@king-design/intact 2.0.0-beta.0

package/components/spinner/demos/step.md

@@ -0,0 +1,37 @@
+---
+title: 最大/小值及步长
+order: 1
+---
+
+`max`和`min`可指定取值范围，`step`指定步长
+
+```vdt
+import {Spinner} from 'kpc';
+
+<div>
+    <Spinner v-model="value1" max={10} min={0} step={1.2} />
+    <Spinner v-model="value2" max={10} min={-10} step={0.1} />
+</div>
+```
+
+```styl
+.k-spinner
+    margin-right 20px
+```
+
+```ts
+interface Props {
+    value1?: number
+    value2?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value1: 0,
+            value2: 0
+        };
+    }
+}
+```

package/components/spinner/demos/vertical.md

@@ -0,0 +1,23 @@
+---
+title: 竖直排列按钮
+order: 3
+---
+
+添加`vertical`属性，即可实现控制按钮竖直排列的数字输入框
+
+```vdt
+import {Spinner} from 'kpc';
+
+<div>
+    <Spinner max={5} min={-5} vertical size="large" />
+    <Spinner max={5} min={-5} vertical />
+    <Spinner max={5} min={-5} vertical size="small" />
+    <Spinner max={5} min={-5} vertical size="mini" />
+</div>
+```
+
+```styl
+.k-spinner
+    margin-right 16px
+```
+

package/components/spinner/index.md

@@ -0,0 +1,31 @@
+---
+title: 数字输入框
+category: 组件
+order: 6
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 组件的值，可用`v-model`进行双向绑定 | `Number` | `0` |
+| max | 最大值 | `Number` | `Number.POSITIVE_INFINITY` |
+| min | 最小值 | `Number` | `Number.NEGATIVE_INFINITY` | 
+| step | 步长，支持动态步长，详见示例 | `Number` | `Object` | `1` |
+| disabled | 是否禁用 | `Boolean` | `false` |
+| size | 尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
+| vertical | 控制按钮是否竖直排列 | `Boolean` | `false` |
+| precision | 控制展示精度，该值必须为正整数或0 | `Number` | `undefined` |
+| formatter | 定义格式化展示值的函数 | `Function` | `undefined` |
+| parser | 与`formatter`结合使用，定义解析格式化的值的函数 | `Function` | `undefined` |
+| prefix | 定义展示的值的前缀，优先级低于`formatter` | `String` | `undefined` |
+| suffix | 定义展示的值的后缀，优先级低于`formatter` | `String` | `undefined` |
+| width | 指定`Input`输入框的宽度 | `String` | `Number` | `undefined` |
+| forceStep | `value`值除了边界值，都必须被满足`min + step * n`(`n`为整数) | `Boolean` | `false` |
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在`input` `change`事件触发或者点击加减按钮改变`value`时触发 | `value` |

package/components/spinner/index.spec.ts

@@ -0,0 +1,301 @@
+import StepDemo from '~/components/spinner/demos/step';
+import PrecisionDemo from '~/components/spinner/demos/precision';
+import {mount, unmount, dispatchEvent, wait, fakeError} from '../../test/utils';
+import {Spinner} from '../spinner';
+import {Component} from 'intact';
+import FormatterDemo from '~/components/spinner/demos/formatter';
+import ForceStepDemo from '~/components/spinner/demos/forceStep';
+import DynamicStepDemo from '~/components/spinner/demos/dynamicStep';
+
+describe('Spinner', () => {
+    afterEach(() => unmount());
+
+    it('step/max/min test', async () => {
+        const [instance, element] = mount(StepDemo);
+
+        const [prev, next] = element.querySelectorAll<HTMLElement>('.k-btn');
+        const input = element.querySelector('.k-input-inner') as HTMLInputElement;
+        next.click();
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(input.value).to.eql('1.2');
+        prev.click();
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(input.value).to.eql('0');
+
+        input.value = '9.9';
+        dispatchEvent(input, 'change');
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(input.value).eql('9.9');
+        prev.click();
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(input.value).eql('8.7');
+
+        input.value = '19.9';
+        dispatchEvent(input, 'change');
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(input.value).eql('10');
+
+        input.value = 'x19.9';
+        // to make the _input eql 'x19.9', then lead change
+        dispatchEvent(input, 'input');
+        dispatchEvent(input, 'change');
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(input.value).to.eql('10');
+
+        input.value = '-10';
+        dispatchEvent(input, 'change');
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(input.value).to.eql('0');
+
+        // should not disable btns, when value is between min and max
+        input.value = '9.9';
+        dispatchEvent(input, 'change');
+        next.click();
+        await wait();
+        expect(input.value).to.eql('10');
+        expect(element.innerHTML).to.matchSnapshot();
+        input.value = '0.1';
+        dispatchEvent(input, 'change');
+        prev.click();
+        await wait();
+        expect(input.value).to.eql('0');
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+
+    it('precision', async () => {
+        const [instance, element] = mount(PrecisionDemo);
+
+        const [spinner1, spinner2] = element.querySelectorAll<HTMLElement>('.k-spinner');
+        const input1 = spinner1.querySelector('.k-input-inner') as HTMLInputElement;
+        input1.value = '0.6';
+        dispatchEvent(input1, 'input');
+        dispatchEvent(input1, 'change');
+        await wait();
+        expect(spinner1.innerHTML).to.matchSnapshot();
+        expect(input1.value).to.eql('1');
+        expect(instance.get('value1')).to.eql(1);
+
+        const input2 = spinner2.querySelector('.k-input-inner') as HTMLInputElement;
+        // expect(input2.value).to.eql('0.0');
+        input2.value = '0.61';
+        dispatchEvent(input2, 'input');
+        dispatchEvent(input2, 'change');
+        await wait();
+        expect(input2.value).to.eql('0.6');
+    });
+
+    it('should change value as long as the input is valid', async () => {
+        const [instance, element] = mount(PrecisionDemo);
+
+        const input = element.querySelector('input') as HTMLInputElement;
+        input.value = '01';
+        dispatchEvent(input, 'input');
+        await wait();
+        expect(instance.get('value1')).to.eql(1);
+
+        input.value = 'xx';
+        dispatchEvent(input, 'input');
+        await wait();
+        expect(instance.get('value1')).to.eql(1);
+
+        input.value = '100';
+        dispatchEvent(input, 'input');
+        await wait();
+        expect(instance.get('value1')).to.eql(10);
+    });
+
+    it('should log error when max < min', () => {
+         class Demo extends Component {
+            static template = `
+                const {Spinner} = this;
+                <Spinner min={20}
+                    max={0}
+                    step={undefined}
+                    value={1}
+                />
+            `;
+            private Spinner = Spinner;
+        }
+        const test = fakeError();
+        const [instance, element] = mount(Demo);
+        expect(element.innerHTML).to.matchSnapshot();
+        test('[Spinner] min must less than or equal to max, but got min: 20 max: 0')
+    });
+
+    it('should format value', async () => {
+        const [instance, element] = mount(FormatterDemo);
+
+        const [input1, input2] = element.querySelectorAll<HTMLInputElement>('input');
+        expect(input1.value).to.eql('￥1,000');
+        expect(input2.value).to.eql('增长率 78%');
+
+        // increase / decrease
+        const increase = element.querySelector('.k-left') as HTMLElement;
+        increase.click();
+        await wait();
+        expect(input1.value).to.eql('￥999');
+        const decrease = element.querySelectorAll<HTMLElement>('.k-right')[1];
+        decrease.click();
+        await wait();
+        expect(input2.value).to.eql('增长率 79%');
+
+        // input
+        input1.value = '9999';
+        dispatchEvent(input1, 'input');
+        dispatchEvent(input1, 'change');
+        await wait();
+        expect(input1.value).to.eql('￥9,999');
+        expect(instance.get('money')).to.eql(9999);
+
+        input2.value = '99';
+        dispatchEvent(input2, 'input');
+        dispatchEvent(input1, 'change');
+        await wait();
+        expect(input2.value).to.eql('99');
+        expect(instance.get('percent')).to.eql(99);
+        dispatchEvent(input2, 'change');
+        await wait();
+        expect(input2.value).to.eql('增长率 99%');
+    });
+
+    it('should trigger change event correctly', async () => {
+        const onChange = sinon.spy((v: number) => console.log(v));
+         class Demo extends Component {
+            static template = `
+                const {Spinner} = this;
+                <Spinner ev-change={this._onChange} />
+            `;
+            private Spinner = Spinner;
+            _onChange(v: number) {
+                onChange(v);
+            }
+        }
+        const [instance, element] = mount(Demo);
+
+         // increase / decrease
+        const increase = element.querySelector('.k-left') as HTMLElement;
+        increase.click();
+        expect(onChange.callCount).to.eql(1);
+        expect(onChange.calledWith(-1)).to.be.true;
+        const decrease = element.querySelector('.k-right') as HTMLElement;
+        decrease.click();
+        expect(onChange.callCount).to.eql(2);
+        expect(onChange.calledWith(0)).to.be.true;
+
+        const input = element.querySelector('input') as HTMLInputElement;
+        dispatchEvent(input, 'focus');
+        input.value = '1';
+        dispatchEvent(input, 'input');
+        input.value = '12';
+        dispatchEvent(input, 'input');
+        dispatchEvent(input, 'change');
+        await wait();
+        expect(onChange.callCount).to.eql(3);
+        expect(onChange.calledWith(12)).to.be.true;
+    });
+
+    it('should be min + step * n', async () => {
+        const [instance, element] = mount(ForceStepDemo);
+
+        const [prev, next] = element.querySelectorAll<HTMLElement>('.k-btn');
+        const input = element.querySelector('.k-input-inner') as HTMLInputElement;
+
+        input.value = '1';
+        dispatchEvent(input, 'change');
+        await wait();
+        expect(instance.get('value1')).to.eql(1.2);
+
+        input.value = '9.9';
+        dispatchEvent(input, 'change');
+        await wait();
+        expect(instance.get('value1')).to.eql(9.6);
+
+        input.value = '10';
+        dispatchEvent(input, 'change');
+        await wait();
+        expect(instance.get('value1')).to.eql(10);
+
+        prev.click();
+        await wait();
+        expect(instance.get('value1')).to.eql(8.4);
+    });
+
+    it('dynamic step', async () => {
+        const [instance, element] = mount(DynamicStepDemo);
+
+        const btns = element.querySelectorAll<HTMLElement>('.k-btn');
+
+        async function test(index: number) {
+            const [prev, next] = index === 1 ? btns : Array.from(btns).slice(2);
+            const model = `value${index}`;
+
+            prev.click();
+            await wait();
+            expect(instance.get(model)).to.eql(-1);
+
+            instance.set<number>(model, -5);
+            await wait();
+            prev.click();
+            await wait();
+            expect(instance.get(model)).to.eql(-10);
+
+            next.click();
+            await wait();
+            expect(instance.get(model)).to.eql(-5);
+
+            next.click();
+            await wait();
+            expect(instance.get(model)).to.eql(-4);
+
+            instance.set<number>(model, 5);
+            await wait();
+            next.click();
+            await wait();
+            expect(instance.get(model)).to.eql(10);
+
+            prev.click();
+            await wait();
+            expect(instance.get(model)).to.eql(5);
+
+            prev.click();
+            await wait();
+            expect(instance.get(model)).to.eql(4);
+        }
+
+        await test(1);
+        // test(2);
+    });
+
+    it('should set correct value with dynamic step when min is not equal 0', async () => {
+        class Demo extends Component {
+            static template = `const {Spinner} = this; <Spinner min={30}
+                max={500}
+                step={{100: 10, 500: 50}}
+                v-model="value"
+                forceStep
+            />`;
+            static defaults() {
+                return {value: 100};
+            }
+            private Spinner = Spinner;
+        }
+        const [instance, element] = mount(Demo);
+        const [prev, next] = element.querySelectorAll<HTMLElement>('.k-btn');
+        next.click();
+        await wait();
+        expect(instance.get('value')).to.eql(150);
+        prev.click();
+        await wait();
+        expect(instance.get('value')).to.eql(100);
+        prev.click();
+        await wait();
+        expect(instance.get('value')).to.eql(90);
+    });
+});

package/components/spinner/index.ts

@@ -0,0 +1,100 @@
+import {Component, TypeDefs} from 'intact';
+import template from './index.vdt';
+import {bind} from '../utils';
+import {sizes, Sizes} from '../../styles/utils';
+import {useStep} from './useStep';
+import {useFormatter} from './useFormatter';
+import {useValue} from'./useValue';
+import {useChange} from './useChange';
+import type {Events} from '../types';
+
+export interface SpinnerProps {
+    disabled?: boolean,
+    value?: number,
+    max?: number,
+    min?: number,
+    step?: number | StepObject | StepFunction,
+    size?: Sizes,
+    vertical?: boolean,
+    precision?: number,
+    formatter?: Formatter,
+    parser?: Parser,
+    prefix?: string,
+    suffix?: string,
+    width?: string | number,
+    forceStep?: boolean,
+}
+
+export interface SpinnerEvents {
+    change: [number, number | undefined]
+}
+
+export type StepObject = {
+    [key in number]: number
+} & {
+    $?: number
+}
+export type StepFunction = (value: number) => number
+type Formatter = (value: number) => string
+type Parser = (value: string) => number
+
+const typeDefs: Required<TypeDefs<SpinnerProps>> = {
+    disabled: Boolean,
+    value: Number,
+    max: Number,
+    min: Number,
+    step: [Number, Object, Function],
+    size: sizes,
+    vertical: Boolean,
+    precision: Number,
+    formatter: Function,
+    parser: Function,
+    prefix: String,
+    suffix: String,
+    width: [String, Number],
+    forceStep: Boolean,
+};
+
+const defaultStep = 1;
+const defaults = (): Partial<SpinnerProps> => ({
+    value: 0,
+    max: Number.POSITIVE_INFINITY,
+    min: Number.NEGATIVE_INFINITY,
+    step: defaultStep,
+    size: 'default'
+});
+
+const events: Events<SpinnerEvents> =  {
+    change: true,
+};
+
+export class Spinner extends Component<SpinnerProps, SpinnerEvents> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static events = events;
+
+    private step = useStep<Spinner>(defaultStep);
+    private formatter = useFormatter();
+    private value = useValue(this.step, this.formatter);
+    private change = useChange(this.step, this.value.fixValue);
+
+    private isDisabledDecrease(): boolean {
+        const {value, min, disabled} = this.get();
+        return disabled || value! <= min!;
+    }
+
+    private isDisabledIncrease(): boolean {
+        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

@@ -0,0 +1,45 @@
+import {Button} from '../button';
+import {Icon} from '../icon';
+import {Input} from '../input';
+import {getRestProps} from '../utils';
+import {makeStyles} from './styles';
+
+const {className, disabled, size, vertical, value, width} = this.get();
+const classNameObj = {
+    'k-spinner': true,
+    'k-disabled': disabled,
+    [`k-${size}`]: size !== 'default',
+    [className]: className,
+    'k-vertical': vertical,
+    [makeStyles()]: true,
+};
+const {decrease, increase, changeValue, onFocusin} = this.change;
+
+<div class={classNameObj} {...getRestProps(this)}>
+    <Button icon ev-click={decrease}
+        disabled={this.isDisabledDecrease()}
+        class="k-spinner-btn k-left"
+        size={size}
+    >
+        <Icon v-if={!vertical} class="k-spinner-icon ion-ios-minus-empty" />
+        <Icon v-else class="k-spinner-icon ion-ios-arrow-down" />
+    </Button>
+    <Input
+        class="k-spinner-input"
+        disabled={disabled} 
+        ev-change={changeValue}
+        ev-focusin={onFocusin}
+        value={this.value.showValue.value}
+        ev-input={this.onInput}
+        size={size}
+        width={width}
+    />
+    <Button icon ev-click={increase}
+        disabled={this.isDisabledIncrease()}
+        class="k-spinner-btn k-right"
+        size={size}
+    >
+        <Icon v-if={!vertical} class="k-spinner-icon ion-ios-plus-empty" />
+        <Icon v-else class="k-spinner-icon ion-ios-arrow-up" />
+    </Button>
+</div>

package/components/spinner/styles.ts

@@ -0,0 +1,159 @@
+import {css} from '@emotion/css';
+import {deepDefaults, sizes, palette} from '../../styles/utils';
+import {theme, setDefault} from '../../styles/theme';
+import '../../styles/global';
+
+const defaults = {
+    default: {
+        inputWidth: '46px',
+        iconFontSize: '24px'
+    },
+    large: {
+        inputWidth: '60px',
+        iconFontSize: '32px'
+    },
+    small: {
+        inputWidth: '32px',
+        iconFontSize: '18px'
+    },
+    mini: {
+        inputWidth: '26px',
+        iconFontSize: '14px'
+    },
+
+    vertical: {
+        default: {
+            width: '108px',
+        },
+        large: {
+            width: '138px',
+        },
+        small: {
+            width: '78px',
+        },
+        mini: {
+            width: '56px',
+        }
+    }
+};
+
+let spinner: any;
+setDefault(() => {
+    spinner = deepDefaults(theme, {spinner: defaults}).spinner;
+});
+
+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;
+            }
+
+            &.k-left {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                margin-right: -1px;
+            }
+            &.k-right {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                margin-left: -1px;
+            }
+        }
+        .k-spinner-input {
+            width: ${spinner.default.inputWidth};
+            vertical-align: top;
+            .k-input-inner {
+                text-align: center;
+                padding: 0;
+                border-radius: 0;
+            }
+        }
+        .k-spinner-icon {
+            font-size: ${spinner.default.iconFontSize};
+        }
+        
+        &.k-vertical {
+            position: relative;
+            font-size: 0;
+            .k-spinner-btn {
+                position: absolute;
+                right: 0;
+                margin: 0;
+                height: calc(50% + 1px);
+                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;
+            }
+            .k-spinner-btn.k-right {
+                top: 0;
+                border-radius: 0 ${theme.borderRadius} 0 0;
+            }
+            .k-spinner-input {
+                font-size: 0;
+                .k-input-inner {
+                    border-radius: ${theme.borderRadius} 0 0 ${theme.borderRadius};
+                }
+            }
+            ${sizes.map(size => {
+                const generate = () => `
+                    .k-spinner-input {
+                        padding-right: calc(${theme[size].height} - 1px);
+                        width: ${spinner.vertical[size].width};
+                    }
+                `
+                if (size === 'default') {
+                    return generate();
+                } else {
+                    return `
+                        &.k-${size} {
+                            ${generate()}
+                        }
+                    `;
+                }
+            })}
+        }
+
+        &.k-disabled {
+            .k-spinner-btn {
+                &:hover,
+                &:focus {
+                    z-index: 0;
+                }
+            }
+        }
+
+        ${sizes.map(size => {
+            const styles = spinner[size];
+            const generate = () => `
+                .k-spinner-icon {
+                    font-size: ${styles.iconFontSize};
+                }
+                .k-spinner-input {
+                    width: ${styles.inputWidth};
+                }
+            `;
+            if (size === 'default') {
+                return generate();
+            } else {
+                return `
+                    &.k-${size} {
+                        ${generate()}
+                    }
+                `;
+            }
+        })}
+    `;
+}