types: types infer

hrsdef · Jan 18, 2022 · e151165 · e151165
1 parent 24ace26
commit e151165
Show file tree

Hide file tree

Showing 55 changed files with 380 additions and 467 deletions.
diff --git a/components/slider/demos/basic.md b/components/slider/demos/basic.md
@@ -7,8 +7,7 @@ order: 0
 值不让它超出该范围
 
 ```vdt
-import {Slider} from 'kpc';
-import {Button} from 'kpc';
+import {Slider, Button} from 'kpc';
 
 <div>
     <Slider v-model="value1" min={this.get('min')} max={this.get('max')} unit="MB"/>

diff --git a/components/slider/demos/disabled.md b/components/slider/demos/disabled.md
@@ -10,6 +10,6 @@ import {Slider} from 'kpc';
 
 <div>
     <Slider disabled value={50} ref="__test" />
-    <Slider disabled isRange value={[55, 80]} min={50} max={100} />
+    <Slider disabled range value={[55, 80]} min={50} max={100} />
 </div>
 ```
diff --git a/components/slider/demos/dynamicStep.md b/components/slider/demos/dynamicStep.md
@@ -18,6 +18,6 @@ import {Slider} from 'kpc';
         '500': 50
     }}
     showTooltip
-    isShowStop
+    points 
 />
 ```
diff --git a/components/slider/demos/marks.md b/components/slider/demos/marks.md
@@ -13,12 +13,12 @@ import {Slider} from 'kpc';
 
 <div>
     <Slider min={1} max={12} value={6} 
-        isShowInput={false}
+        showInput={false}
         marks={this.get('marks')}
     />
     <Slider min={1} max={12} value={[2, 6]} 
-        isShowInput={false}
-        isRange
+        showInput={false}
+        range
         marks={this.get('marks')}
     />
 </div>

diff --git a/components/slider/demos/points.md b/components/slider/demos/points.md
@@ -10,9 +10,9 @@ order: 4
 import {Slider} from 'kpc';
 
 <div>
-    <Slider value={45} step={5} points isShowInput={false}/>
-    <Slider value={[0.3, 0.6]} min={0} max={1} step={0.1} isRange points />
-    <Slider value={45} step={5} isShowInput={false} 
+    <Slider value={45} step={5} points showInput={false}/>
+    <Slider value={[0.3, 0.6]} min={0} max={1} step={0.1} range points />
+    <Slider value={45} step={5} showInput={false} 
         points={[0, 35, 95, 100]}
     />
 </div>

diff --git a/components/slider/demos/range.md b/components/slider/demos/range.md
@@ -3,12 +3,12 @@ title: 范围选择
 order: 3
 ---
 
-指定`isRange`使组件支持范围选择，此时`v-model`绑定的数据为数组，并且不会展示`input`输入框。
+指定`range`使组件支持范围选择，此时`v-model`绑定的数据为数组，并且不会展示`input`输入框。
 
 ```vdt
 import {Slider} from 'kpc';
 
-<Slider isRange v-model="values" ev-change={(v) => console.log(v)}/>
+<Slider range v-model="values" ev-change={(v) => console.log(v)}/>
 ```
 
 ```ts

diff --git a/components/slider/demos/step.md b/components/slider/demos/step.md
@@ -12,7 +12,7 @@ order: 1
 import {Slider} from 'kpc';
 
 <div>
-    <Slider v-model="value1" step={5} isShowEnd={false} ref="__test" />
+    <Slider v-model="value1" step={5} showEnd={false} ref="__test" />
     <Slider v-model="value2" min={50} max={500} step={0.1} />
     <Slider value={0.234234} max={1} step={0} />
 </div>

diff --git a/components/slider/demos/tooltip.md b/components/slider/demos/tooltip.md
@@ -3,7 +3,7 @@ title: 展示提示气泡
 order: 6
 ---
 
-给组件添加`isShowTooltip`可以在滑块上展示气泡提示，默认展示当前值，我们也可以通过`tooltip`扩展点自定义展示内容；
+给组件添加`showTooltip`可以在滑块上展示气泡提示，默认展示当前值，我们也可以通过`tooltip`扩展点自定义展示内容；
 当添加`always`属性时，将一直展示提示气泡。通过`tooltipProps`可以设置`Tooltip`的所有属性
 
 > `tooltip`扩展点和`Tooltip`组件的`content`扩展点行为一样，如果你传入空的内容，则不会展示气泡
@@ -12,20 +12,20 @@ order: 6
 import {Slider} from 'kpc';
 
 <div>
-    <Slider v-model="value1" min={50} max={500} isShowTooltip />
-    <Slider v-model="values" isRange isShowTooltip />
+    <Slider v-model="value1" min={50} max={500} showTooltip />
+    <Slider v-model="values" range showTooltip />
     <Slider v-model="value2" min={1} max={12}
-        isShowInput={false}
+        showInput={false}
         marks={this.get('marks')}
-        isShowTooltip
+        showTooltip
         always
     >
         <b:tooltip args="value">
             <span v-if={value > 9}>满{value - 9}年，优惠{(value - 9) * 2}个月</span>
         </b:tooltip>
     </Slider>
     <Slider v-model="value3" min={50} max={500}
-        isShowTooltip
+        showTooltip
         always
         tooltipProps={{'theme': 'light', 'size': 'small'}}
     />
@@ -34,10 +34,10 @@ import {Slider} from 'kpc';
 
 ```ts
 interface Props {
-    value1: number
-    values: [number, number]
-    value2: number
-    value3: number
+    value1?: number
+    values?: [number, number]
+    value2?: number
+    value3?: number
 }
 
 export default class extends Component<Props> {

diff --git a/components/slider/index.md b/components/slider/index.md
@@ -12,14 +12,15 @@ sidebar: doc
 | min | 最小值 | `Number` | 0 |
 | max | 最大值 | `Number` | 100 |
 | value | 当前值，可用`v-model`双向绑定 | `Number` &#124; `Array` | `min` |
+| range | 是否是范围选择 | `Boolean` | `false` |
 | unit | 单位，用于刻度展示 | `String` | `""` |
-| isShowEnd | 是否展示最小值和最大值刻度 | `Boolean` | `true` |
-| isShowInput | 是否展示输入框 | `Boolean` | `true` |
+| showEnd | 是否展示最小值和最大值刻度 | `Boolean` | `true` |
+| showInput | 是否展示输入框 | `Boolean` | `true` |
 | step | 步长，支持动态步长，详见示例 | `Number` &#124; `Object` | `1` |
 | forceStep | 是否限制`value`除边界之外，满足`min + step * n`(`n`为整数) | `Boolean` | `true` |
 | points | 是否展示间隔点，或者指定哪些值展示间隔点 | `boolean` &#124; `number[]` | `false` |
 | marks | 标注刻度 | `Object` | `undefined` |
-| isShowTooltip | 是否展示提示气泡，默认不展示 | `Boolean` | `false` |
+| showTooltip | 是否展示提示气泡，默认不展示 | `Boolean` | `false` |
 | always | 当展示气泡时，是否一直展示 | `Boolean` | `false` |
 | animate | 滑块的移动是否使用缓动动画 | `Boolean` | `true` |
 | tooltipProps | 设置`Tooltip`的所有属性 | `Object` | `undefined` |

diff --git a/components/slider/index.ts b/components/slider/index.ts
@@ -17,15 +17,15 @@ export interface SliderProps {
     max?: number
     min?: number
     value?: Value
-    isRange?: boolean
+    range?: boolean
     unit?: string
-    isShowEnd?: boolean
-    isShowInput?: boolean
+    showEnd?: boolean
+    showInput?: boolean
     step?: number | StepObject | StepFunction
     points?: number[] | boolean
     marks?: Marks
     disabled?: boolean
-    isShowTooltip?: boolean
+    showTooltip?: boolean
     always?: boolean
     animate?: boolean
     tooltipProps?: TooltipProps
@@ -45,15 +45,15 @@ const typeDefs: Required<TypeDefs<SliderProps>> = {
     max: Number,
     min: Number,
     value: [Number, Array],
-    isRange: Boolean,
+    range: Boolean,
     unit: String,
-    isShowEnd: Boolean,
-    isShowInput: Boolean,
+    showEnd: Boolean,
+    showInput: Boolean,
     step: [Number, Object, Function],
     points: [Array, Boolean],
     marks: Object,
     disabled: Boolean,
-    isShowTooltip: Boolean,
+    showTooltip: Boolean,
     always: Boolean,
     animate: Boolean,
     tooltipProps: Object,
@@ -67,8 +67,8 @@ const defaults = (): Partial<SliderProps> => ({
     min: 0,
     value: 0,
     unit: '',
-    isShowEnd: true,
-    isShowInput: true,
+    showEnd: true,
+    showInput: true,
     step: defaultStep,
     animate: true,
     forceStep: true,

diff --git a/components/slider/index.vdt b/components/slider/index.vdt
@@ -6,10 +6,10 @@ import {makeStyles} from './styles';
 
 const {
     disabled, className, max,
-    min, unit, isShowInput,
-    isRange, step, value,
-    spinnerProps, isShowEnd,
-    isShowTooltip, animate, forceStep
+    min, unit, showInput,
+    range, step, value,
+    spinnerProps, showEnd,
+    showTooltip, animate, forceStep
 } = this.get();
 const {
     onStart, trackRef, dragging,
@@ -35,7 +35,7 @@ const createThumb = (thumbStyle, isFirst, ref, value, tooltipRef) => {
     return (
         <div class="k-slider-thumb-wrapper" style={thumbStyle}>
             <Tooltip
-                disabled={!isShowTooltip}
+                disabled={!showTooltip}
                 ref={tooltipRef}
                 {...tooltipProps}
                 class="k-slider-tooltip"
@@ -67,10 +67,10 @@ const marks = this.marks();
                     thumbFirstStyle,
                     true,
                     firstThumbRef,
-                    isRange ? value[0] : value,
+                    range ? value[0] : value,
                     firstTooltipRef,
                 )}
-                <template v-if={isRange}>
+                <template v-if={range}>
                     {createThumb(
                         thumbSecondStyle,
                         false,
@@ -92,12 +92,12 @@ const marks = this.marks();
                 class={{'k-active': $value.active}}
             >{$value.text}</span>
         </div>
-        <div class="k-slider-ends" v-else-if={isShowEnd}>
+        <div class="k-slider-ends" v-else-if={showEnd}>
             <span ev-click={linkEvent(min, setOneValue)}>{min + unit}</span>
             <span ev-click={linkEvent(max, setOneValue)}>{max + unit}</span>
         </div>
     </div>
-    <div class="k-slider-spinner" v-if={isShowInput && !isRange}>
+    <div class="k-slider-spinner" v-if={showInput && !range}>
         <Spinner
             disabled={disabled}
             max={max}

diff --git a/components/slider/useClick.ts b/components/slider/useClick.ts
@@ -15,7 +15,7 @@ export function useClick(
         if (instance.get('disabled')) return;
 
         let newValue: Value = getSlidingValue(e.clientX);
-        if (instance.get('isRange')) {
+        if (instance.get('range')) {
             newValue = generateRangeValue(newValue);
         }
 
@@ -36,7 +36,7 @@ export function useClick(
         if (instance.get('disabled')) return;
 
         let newValue: Value = v;
-        if (instance.get('isRange')) {
+        if (instance.get('range')) {
             newValue = generateRangeValue(v);
         }
         showValue.set(newValue);

diff --git a/components/slider/useDraggable.ts b/components/slider/useDraggable.ts
@@ -61,9 +61,9 @@ export function useDraggable(
     }
 
     function getNewValue(value: number): Value {
-        const {isRange, value: oldValue} = instance.get();
+        const {range, value: oldValue} = instance.get();
 
-        if (!isRange) return value;
+        if (!range) return value;
 
         const [min, max] = oldValue as [number, number];
         if (isFirst) {

diff --git a/components/slider/useKeyboard.ts b/components/slider/useKeyboard.ts
@@ -18,11 +18,11 @@ export function useKeyboard(
     function onKeydown({keyCode}: KeyboardEvent) {
         if (instance.get('disabled')) return;
 
-        let {value, isRange} = instance.get();
+        let {value, range} = instance.get();
         // remain the old value to detect whether it changed to trigger change event
         oldValue = value!;
 
-        if (isRange) {
+        if (range) {
             const [min, max] = value as [number, number];
             value = isFirst() ? min : max;
         }

diff --git a/components/slider/useMarks.ts b/components/slider/useMarks.ts
@@ -45,9 +45,9 @@ export function useMarks() {
     instance.on('$change:value', addText);
 
     function addText() {
-        const {value, isRange} = instance.get();
+        const {value, range} = instance.get();
         marks.forEach(mark => {
-            const active = !isRange ?
+            const active = !range ?
                 mark.value === value as number :
                 (value as [number, number]).includes(mark.value);
 

diff --git a/components/slider/usePoints.ts b/components/slider/usePoints.ts
@@ -71,10 +71,10 @@ export function usePoints(
     } 
 
     function addActive() {
-        const {isRange} = instance.get();
+        const {range} = instance.get();
         const value = showValue.value;
         points.forEach(point => {
-            point.active = !isRange ?
+            point.active = !range ?
                 point.value <= (value as number) :
                 point.value >= (value as [number, number])[0] &&
                 point.value <= (value as [number, number])[1];

diff --git a/components/slider/useStyles.ts b/components/slider/useStyles.ts
@@ -12,11 +12,11 @@ export function useStyles(showValue: State<Value>) {
     let thumbSecondStyle: Style;
 
     function updateStyle() {
-        const {max, min, isRange} = instance.get();
+        const {max, min, range} = instance.get();
         const total = max! - min!;
 
         if (total > 0) {
-            if (isRange) {
+            if (range) {
                 const [first, second] = showValue.value as [number, number];
                 barStyle = {
                     width: toPercent(Math.abs(second - first), total),

diff --git a/components/slider/useValue.ts b/components/slider/useValue.ts
@@ -39,10 +39,10 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
     }
 
     function getFixedValue(value: Value): Value {
-        const {min, isRange} = instance.get();
+        const {min, range} = instance.get();
 
         let fixedValue: Value;
-        if (isRange) {
+        if (range) {
             if (!Array.isArray(value)) {
                 const tmp = fix(value);
                 fixedValue = [tmp, tmp];

diff --git a/components/spin/demos/basic.md b/components/spin/demos/basic.md
@@ -9,7 +9,7 @@ order: 0
 import {Spin} from 'kpc';
 
 <div>
-    <Spin v-for={['large', 'default', 'small', 'mini']}
+    <Spin v-for={this.get('sizes')}
         size={$value}
     />
 </div>
@@ -19,3 +19,14 @@ import {Spin} from 'kpc';
 .k-spin
     margin-right 16px
 ```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            sizes: ['large', 'default', 'small', 'mini'] as const
+        }
+    }
+}
+```
diff --git a/components/spinner/demos/basic.md b/components/spinner/demos/basic.md
@@ -18,3 +18,18 @@ import {Spinner} from 'kpc';
 .k-spinner
     margin-right 20px
 ```
+
+```ts
+interface Props {
+    value?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value: 0,
+        };
+    }
+}
+```