@king-design/intact 2.0.0-beta.0 → 2.0.1

package/components/select/index.md

@@ -11,37 +11,44 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前选择的元素，可用`v-model`双向绑定 | `*` | `""` |
-| multiple | 是否支持多选 | `Boolean` | `false` |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| clearable | 是否可清空 | `Boolean` | `false` |
-| filterable | 是否支持筛选 | `Boolean` | `false` |
-| filter | 当支持筛选时，可以自定义筛选规则 | `Function` | `(keywords, props) => ...` |
-| creatable | 是否支持创建新的选项，可以配合`filterable`使用 | `Boolean` | `false` |
-| keywords | 如果支持筛选，当前关键词 | `String` | `undefined` |
-| placeholder | 占位文案 | `String` | `"请选择"` |
+| value | 当前选择的元素，可用`v-model`双向绑定 | `any` | `""` |
+| multiple | 是否支持多选 | `boolean` | `false` |
+| filterable | 是否支持筛选 | `boolean` | `false` |
+| loading | 数据加载状态 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| name | 表单元素的`name` | `string` | `undefined` |
 | size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| fluid | 是否宽度100% | `Boolean` | `false` |
-| width | 指定宽度，组件自动添加单位`px` | `Number` | `String` | `undefined` | 
-| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| inline | 展示内联模式，该模式下，组件没有边框，宽度和高度如同内联元素一样由内容撑开 | `Boolean` | `false` |
-| loading | 数据加载状态 | `Boolean` | `false` |
-| position | 定义弹层的位置 | `Object` | `{my: 'left top+8', at: 'left bottom'}` |
-| searchable | 是否将在弹出菜单中展示搜索框 | `Boolean` | `false` |
+| hideIcon | 是否隐藏后面的图标 | `boolean` | `false` |
+| clearable | 是否可清空 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| inline | 展示内联模式，该模式下，组件没有边框，宽度和高度如同内联元素一样由内容撑开 | `boolean` | `false` |
+| placeholder | 占位文案 | `string` | `"请选择"` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| width | 指定宽度，组件自动添加单位`px` | `number` | `string` | `undefined` | 
+| filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, props: any) => boolean` | `(keywords: string, props: any) => props.label.toLowerCase().includes(keywords) || props.value.toLowerCase().includes(keywords)` |
+| searchable | 是否将在弹出菜单中展示搜索框 | `boolean` | `false` |
+| creatable | 是否支持创建新的选项，可以配合`filterable`使用 | `boolean` | `false` |
+| labelMap | 建立值`value`到展示标签`label`的映射，可以在`value`不在`Option`集合中时，依然能够正确展示相应的`label` | `Map<any, string>` | `new Map()` |
+| card | 是否展示`card`模式 | `boolean` | `false` |
+| autoDisableArrow | 是否在没有更多可选项时，给箭头一个`disabled`状态来提示用户 | `boolean` | `false` |
+
+```ts
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
 
 ## Option
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 选中的值 | `*` | `undefined` |
-| label | 该值有两个作用，1. 当`children`不存在时，作为展示文案；2. 作为筛选的内容，不存在时，则使用`children`的文本作为筛选内容 | `String`  | `undefined` |
-| disabled | 是否禁用该项选择 | `Boolean` | `false` |
+| value | 选中的值 | `any` | `undefined` |
+| label | 该值有两个作用，1. 当`children`不存在时，作为展示文案；2. 作为筛选的内容，不存在时，则使用`children`的文本作为筛选内容 | `string`  | `undefined` |
+| disabled | 是否禁用该项选择 | `boolean` | `false` |
 
 ## OptionGroup
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| label | 分组标签名 | `String` &#124; `Number` &#124; `vNode` | `""` |
+| label | 分组标签名 | `string` &#124; `number` &#124; `VNode` | `undefined` |
 
 
 # 扩展点
@@ -50,24 +57,22 @@ sidebar: doc
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| value | 自定义选择结果的展示 | `value, label` |
-| values | 自定义多选的选择结果的展示 | `values, labels` |
+| value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
+| values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
+| prefix | 自定义输入款前面展示的内容 | - |
+| suffix | 自定义输入框后面展示的内容 | - |
 | menu | 自定义整个菜单的内容 | - |
 
+```ts
+import {Children} from 'intact';
+```
+
 ## OptionGroup
 
 | 名称 | 说明 |
 | --- | --- |
 | label | 定义复杂的分组标签名 |
 
-# 方法
-
-## Select
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| show | 展开菜单 | - | `undefined` |
-| hide | 隐藏菜单 | - | `undefined` |
 
 # 事件
 

package/components/select/index.spec.ts

@@ -13,7 +13,7 @@ import SearchableDemo from '~/components/select/demos/searchable';
 describe('Select', () => {
     afterEach((done) => {
         unmount();
-        setTimeout(done, 400);
+        setTimeout(done, 500);
     });
 
     it('should select value correctly', async () => {

package/components/select/menu.vdt

@@ -59,6 +59,7 @@ if (searchable) {
                     value={keywords.value}
                     ev-$change:value={onInput}
                     clearable
+                    waveDisabled={true}
                 >
                     <b:suffix><Icon class="ion-ios-search" /></b:suffix>
                 </Input>

package/components/select/styles.ts

@@ -13,13 +13,15 @@ type SizeStyles = {
 
 const defaults = deepDefaults(
     {
+        get transition() { return theme.transition.middle },
         width: `300px`,
         get height() { return theme.default.height },
         bgColor: '#fff',
         get fontSize() { return theme.default.fontSize },
         get border() { return `1px solid ${theme.color.border}` },
         get focusBorder() { return `1px solid ${theme.color.primary}` },
-        get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
+        // get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
+        get hoverBorder() { return `1px solid ${theme.color.primary}` },
         get iconColor() { return theme.color.placeholder },
         get activeColor() { return theme.color.primary },
         get borderRadius() { return theme.borderRadius },
@@ -56,7 +58,7 @@ const defaults = deepDefaults(
         },
         tag: {
             margin: `3px 8px 3px 0`,
-            padding: `4px 8px`,
+            padding: `5px 8px`,
             get borderRadius() { return theme.borderRadius },
             get bgColor() { return theme.color.bg },
             disabledBgColor: '#eee',
@@ -122,7 +124,7 @@ const defaults = deepDefaults(
     }, {} as Record<Sizes, SizeStyles>)
 );
 
-let select: any;
+let select: typeof defaults;
 setDefault(() => {
     select = deepDefaults(theme, {select: defaults}).select;
 });
@@ -138,7 +140,7 @@ export default function makeStyles() {
         outline: none;
         border: ${select.border};
         background: ${select.bgColor};
-        transition: border ${theme.transition}, background ${theme.transition}, box-shadow ${theme.transition};
+        transition: border ${select.transition}, background ${select.transition}, box-shadow ${select.transition};
         border-radius: ${select.borderRadius};
         .k-select-main {
             flex: 1;
@@ -146,6 +148,7 @@ export default function makeStyles() {
         .k-select-prefix,
         .k-select-suffix {
             color: ${select.iconColor};
+            position: relative;
         }
         .k-select-suffix {
             margin-left: ${select.suffixGap};
@@ -163,10 +166,13 @@ export default function makeStyles() {
         // clearable
         .k-select-clear {
             opacity: 0;
-            transition: opacity ${theme.transition}, color ${theme.transition} !important;
+            transition: opacity ${select.transition}, color ${select.transition} !important;
             pointer-events: none;
             position: absolute;
             z-index: 1;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
         }
         &:hover {
             border: ${select.hoverBorder};
@@ -180,12 +186,12 @@ export default function makeStyles() {
         }
         .k-select-suffix-icon {
             display: inline-block;
-            transition: opacity ${theme.transition};
+            transition: opacity ${select.transition};
         }
 
         .k-select-arrow {
             display: inline-block;
-            transition: transform ${theme.transition};
+            transition: transform ${select.transition};
             &.k-disabled {
                 color: ${select.disabledArrowColor};
             }
@@ -195,7 +201,7 @@ export default function makeStyles() {
         &.k-dropdown-open {
             border: ${select.focusBorder};
             .k-select-arrow {
-                transform: rotate(180deg);
+                transform: rotateX(180deg);
             }
         }
         &:focus {
@@ -278,7 +284,7 @@ export function makeMenuStyles() {
         max-height: ${select.menuMaxHeight};
         overflow: auto;
         &:not([class*="-active"]) {
-            transition: left ${theme.transition}, top ${theme.transition};
+            transition: left ${select.transition}, top ${select.transition};
         }
         .k-select-empty {
             padding: ${select.empty.padding};

package/components/slider/demos/marks.md

@@ -4,9 +4,9 @@ order: 5
 ---
 
 通过`marks`属性，可以给`Slider`标注刻度，该属性类型为`Object`，`key`表示组件的值，`value`为该
-值对应展示的标注文案。如果`value`为`String`类型，则直接展示成文案；如果`value`为`Array`，则数组
+值对应展示的标注文案。如果`value`为`string`类型，则直接展示成文案；如果`value`为`Array`，则数组
 第一项为未选中状态的文案，第二项为选中状态的文案，如果没有定义第二项，则会取第一项作为选中状态的文案，
-此时与`value`为`String`类型的表现是一样的。
+此时与`value`为`string`类型的表现是一样的。
 
 ```vdt
 import {Slider} from 'kpc';

package/components/slider/index.md

@@ -9,30 +9,45 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| min | 最小值 | `Number` | 0 |
-| max | 最大值 | `Number` | 100 |
-| value | 当前值，可用`v-model`双向绑定 | `Number` | `Array` | `min` |
-| range | 是否是范围选择 | `Boolean` | `false` |
-| unit | 单位，用于刻度展示 | `String` | `""` |
-| showEnd | 是否展示最小值和最大值刻度 | `Boolean` | `true` |
-| showInput | 是否展示输入框 | `Boolean` | `true` |
-| step | 步长，支持动态步长，详见示例 | `Number` | `Object` | `1` |
-| forceStep | 是否限制`value`除边界之外，满足`min + step * n`(`n`为整数) | `Boolean` | `true` |
+| max | 最大值 | `number` | 100 |
+| min | 最小值 | `number` | 0 |
+| value | 当前值，可用`v-model`双向绑定 | `number` | `[number, number]` | `0` |
+| range | 是否是范围选择 | `boolean` | `false` |
+| unit | 单位，用于刻度展示 | `string` | `""` |
+| showEnd | 是否展示最小值和最大值刻度 | `boolean` | `true` |
+| showInput | 是否展示输入框 | `boolean` | `true` |
+| step | 步长，支持动态步长，详见示例 | `number` | `StepObject` | `StepFunction` | `1` |
 | points | 是否展示间隔点，或者指定哪些值展示间隔点 | `boolean` | `number[]` | `false` |
-| marks | 标注刻度 | `Object` | `undefined` |
-| showTooltip | 是否展示提示气泡，默认不展示 | `Boolean` | `false` |
-| always | 当展示气泡时，是否一直展示 | `Boolean` | `false` |
-| animate | 滑块的移动是否使用缓动动画 | `Boolean` | `true` |
-| tooltipProps | 设置`Tooltip`的所有属性 | `Object` | `undefined` |
+| marks | 标注刻度 | `Marks` | `undefined` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| showTooltip | 是否展示提示气泡，默认不展示 | `boolean` | `false` |
+| always | 当展示气泡时，是否一直展示 | `boolean` | `false` |
+| animate | 滑块的移动是否使用缓动动画 | `boolean` | `true` |
+| tooltipProps | 设置内置的`Tooltip`的所有属性 | `TooltipProps`见[Tooltip](/components/tooltip/) | `undefined` |
+| spinnerProps | 设置内置的`Spinner`的所有属性 | `SpinnerProps`见[Spinner](/components/spinner/) | `undefined` |
+| forceStep | 是否限制`value`除边界之外，满足`min + step * n`(`n`为整数) | `boolean` | `true` |
+
+```ts
+export type StepObject = {
+    [key in number]: number
+} & {
+    $?: number
+}
+export type StepFunction = (value: number) => number
+
+type MarkKey = string | number
+type MarkValue = MarkKey | [MarkKey] | [MarkKey, MarkKey]
+type Marks = Record<MarkKey, MarkValue>
+```
 
 # 扩展点
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| tooltip | 当展示提示气泡，定义气泡的内容，和`Tooltip`组件行为一样，如果你传入空的内容，则不会展示气泡 | 当前组件取值`value` |
+| tooltip | 当展示提示气泡，定义气泡的内容，和`Tooltip`组件行为一样，如果你传入空的内容，则不会展示气泡 | <code>(value: number &#124; [number, number]) => Children</code> |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | 当值`value`变化时触发，和`$change:value`默认事件不同的是，拖动过程中不会触发，而是拖动结束触发 | `value` |
+| change | 当值`value`变化时触发，拖动过程中不会触发，而是拖动结束触发 | <code>(newValue: number &#124; [number, number], oldValue: number &#124; [number, number]) => void</code> |

package/components/slider/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     height: '4px',
     
     bgColor: '#e5e5e5',
@@ -46,7 +47,7 @@ const defaults = {
     }
 };
 
-let slider: any;
+let slider: typeof defaults;
 setDefault(() => {
     slider = deepDefaults(theme, {slider: defaults}).slider;
 });
@@ -78,19 +79,19 @@ export function makeStyles() {
             position: absolute;
             height: 100%;
             border-radius: ${slider.borderRadius};
-            transition: all ${theme.transition};
+            transition: all ${slider.transition};
         }
         .k-slider-thumb-wrapper {
             position: absolute;
             top: 50%;
             transform: translate(-50%, -50%);
-            transition: left ${theme.transition};
+            transition: left ${slider.transition};
             z-index: 1;
         }
         .k-slider-thumb {
             height: ${slider.thumb.height};
             width: ${slider.thumb.width};
-            transition: all ${theme.transition};
+            transition: all ${slider.transition};
             border: ${slider.thumb.border};
             border-radius: ${slider.thumb.borderRadius};
             background-color: ${slider.thumb.bgColor};

package/components/spin/index.md

@@ -10,8 +10,8 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| center | 是否居中展示，需要父元素为定位元素 | `Boolean` | `false` |
-| overlay | 是否展示带遮罩层的加载动画，需要父元素为定位元素 | `Boolean` | `false` |
+| center | 是否居中展示，需要父元素为定位元素 | `boolean` | `false` |
+| overlay | 是否展示带遮罩层的加载动画，需要父元素为定位元素 | `boolean` | `false` |
 
 # 扩展点
 

package/components/spin/styles.ts

@@ -13,7 +13,7 @@ const defaults = {
     miniWidth: `24px`,
 };
 
-let spin: any;
+let spin: typeof defaults;
 setDefault(() => {
     spin = deepDefaults(theme, {spin: defaults}).spin;
 });

package/components/spinner/index.md

@@ -9,23 +9,32 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 组件的值，可用`v-model`进行双向绑定 | `Number` | `0` |
-| max | 最大值 | `Number` | `Number.POSITIVE_INFINITY` |
-| min | 最小值 | `Number` | `Number.NEGATIVE_INFINITY` | 
-| step | 步长，支持动态步长，详见示例 | `Number` | `Object` | `1` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| value | 组件的值，可用`v-model`进行双向绑定 | `number` | `0` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| max | 最大值 | `number` | `Number.POSITIVE_INFINITY` |
+| min | 最小值 | `number` | `Number.NEGATIVE_INFINITY` | 
+| step | 步长，支持动态步长，详见示例 | `number` | `StepObject` | `StepFunction` | `1` |
 | 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` |
+| vertical | 控制按钮是否竖直排列 | `boolean` | `false` |
+| precision | 控制展示精度，该值必须为正整数或0 | `number` | `undefined` |
+| formatter | 定义格式化展示值的函数 | `(value: number) => string` | `undefined` |
+| parser | 与`formatter`结合使用，定义解析格式化的值的函数 | `(value: string) => number` | `undefined` |
+| prefix | 定义展示的值的前缀，优先级低于`formatter` | `string` | `undefined` |
+| suffix | 定义展示的值的后缀，优先级低于`formatter` | `string` | `undefined` |
+| width | 指定`Input`输入框的宽度 | `string` | `number` | `undefined` |
+| forceStep | `value`值除了边界值，都必须被满足`min + step * n`(`n`为整数) | `boolean` | `false` |
+
+```ts
+export type StepObject = {
+    [key in number]: number
+} & {
+    $?: number
+}
+export type StepFunction = (value: number) => number
+```
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在`input` `change`事件触发或者点击加减按钮改变`value`时触发 | `value` |
+| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在`input` `change`事件触发或者点击加减按钮改变`value`时触发 | `(value: number) => void` |

package/components/spinner/index.ts

@@ -9,8 +9,8 @@ import {useChange} from './useChange';
 import type {Events} from '../types';
 
 export interface SpinnerProps {
-    disabled?: boolean,
     value?: number,
+    disabled?: boolean,
     max?: number,
     min?: number,
     step?: number | StepObject | StepFunction,
@@ -39,8 +39,8 @@ type Formatter = (value: number) => string
 type Parser = (value: string) => number
 
 const typeDefs: Required<TypeDefs<SpinnerProps>> = {
-    disabled: Boolean,
     value: Number,
+    disabled: Boolean,
     max: Number,
     min: Number,
     step: [Number, Object, Function],

package/components/spinner/styles.ts

@@ -37,7 +37,7 @@ const defaults = {
     }
 };
 
-let spinner: any;
+let spinner: typeof defaults;
 setDefault(() => {
     spinner = deepDefaults(theme, {spinner: defaults}).spinner;
 });

package/components/split/index.md

@@ -10,10 +10,10 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | mode | 指定分割模式，`horizontal`水平分割；`vertical`垂直分割 | `"horizontal"` | `"vertical"` | `"horizontal"` |
-| firstSize | 指定第一个面板的大小，需要带单位 | `String` | `"auto"` |
-| lastSize | 指定第二个面板的大小，需要带单位 | `String` | `"auto"` |
-| min | 指定面板最小尺寸，不用带单位，可以通过百分比指定 | `Number` | `String` | `0` |
-| max | 指定面板最大尺寸，不用带单位，可以通过百分比指定 | `Number` | `String` | `"100%-6"` |
+| firstSize | 指定第一个面板的大小，需要带单位 | `string` | `"auto"` |
+| lastSize | 指定第二个面板的大小，需要带单位 | `string` | `"auto"` |
+| min | 指定面板最小尺寸，不用带单位，可以通过百分比指定 | `number` | `string` | `0` |
+| max | 指定面板最大尺寸，不用带单位，可以通过百分比指定 | `number` | `string` | `"100%-6"` |
 
 # 扩展点
 
@@ -27,6 +27,6 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| moveStart | 开始拖动面板分割线时触发 | `Event` |
-| moving | 拖动面板分割线的过程中触发 | `Event` |
-| moveEnd | 拖动面板分割线结束时触发 | `Event` |
+| moveStart | 开始拖动面板分割线时触发 | `(e: MouseEvent) => void` |
+| moving | 拖动面板分割线的过程中触发 | `(e: MouseEvent) => void` |
+| moveEnd | 拖动面板分割线结束时触发 | `(e?: MouseEvent) => void` |

package/components/split/style.ts

@@ -14,7 +14,7 @@ const defaults = {
     dragLiensGutter: 5,
     get bgColor() { return theme.color.bg },
     get baseBorder() { return `1px solid ${theme.color.border}` },
-    get transition() { return theme.transition },
+    get transition() { return theme.transition.middle },
     get boderColor() { return theme.color.border },
     get dragLineMargin(): string {
         return `-${split.dragLinesCount * (split.dragLiensGutter + 1) / 2}px`;
@@ -34,7 +34,7 @@ const defaults = {
     }
 };
 
-let split: any;
+let split: typeof defaults;
 setDefault(() => {
     split = deepDefaults(theme, {split: defaults}).split;
 });

package/components/steps/index.md

@@ -11,13 +11,13 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 标识当前第几步，从`0`开始 | `Number` | `undefined` |
+| value | 标识当前第几步，从`0`开始 | `number` | `undefined` |
 | status | 步骤条的状态 | `"normal"` | `"error"` | `"normal"` |
 | type | 步骤条样式 | `"default"` | `"line"` | `"simple"` | `"default"` |
-| clickable | 是否支持快速切换【已完成】的步骤 | `Boolean` | `false` |
+| clickable | 是否支持快速切换【已完成】的步骤 | `boolean` | `false` |
 
 ## Step
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 标题 | `String` | `undefined` |
+| title | 标题 | `string` | `undefined` |

package/components/steps/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults}  from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     get height() { return theme.default.height }, 
     get bgColor() { return theme.color.bg }, 
     gutter: '10px',
@@ -75,7 +76,7 @@ const defaults = {
     }
 };
 
-let steps: any;
+let steps: typeof defaults;
 setDefault(() => {
     steps = deepDefaults(theme, {steps: defaults}).steps;
 });
@@ -332,7 +333,7 @@ export function makeStepStyles() {
         }
         .k-step-inner,
         .k-step-main {
-            transition: all ${theme.transition};
+            transition: all ${steps.transition};
         }
     `;
 }

package/components/switch/index.md

@@ -12,16 +12,16 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| name | 可定义当前开关的名称 | `String` | `undefined` |
-| on | 定义开启时显示文案 | `String` | `undefined` |
-| off | 定义关闭时显示文案 | `String` | `undefined` |
-| width | 开关的宽度 | `Number` | `undefined` |
-| height | 开关的高度 | `Number` | `undefined` |
-| size | 开关的型号 | `String` | `"default"` |
-| disabled | 控制禁用 | `Boolean` | `false` |
-| value | 开关当前值，可用`v-model`双向绑定 | `*` | `false` |
-| trueValue | 开启时的值 | `*` | `true` |
-| falseValue | 关闭时的值 | `*` | `false` |
+| name | 可定义当前开关的名称 | `string` | `undefined` |
+| on | 定义开启时显示文案 | `string` | `undefined` |
+| off | 定义关闭时显示文案 | `string` | `undefined` |
+| value | 开关当前值，可用`v-model`双向绑定 | `any` | `false` |
+| trueValue | 开启时的值 | `any` | `true` |
+| falseValue | 关闭时的值 | `any` | `false` |
+| width | 开关的宽度 | `number` | `string` | `undefined` |
+| height | 开关的高度 | `number` | `string` | `undefined` |
+| size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| disabled | 控制禁用 | `boolean` | `false` |
 
 # 扩展点
 
@@ -29,12 +29,3 @@ sidebar: doc
 | --- | --- |
 | on | 扩展开启时的文案 |
 | off | 扩展关闭时的文案 |
-
-
-# 方法
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| isChecked | 判断是否开启 | - | `Boolean` |
-| check | 开启按钮 | - | `undefined` |
-| uncheck | 关闭按钮 | - | `undefined` |

package/components/switch/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults, sizes} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     bgColor: `#fff`,
     fontSize: `12px`,
     get color() { return theme.color.text },
@@ -51,7 +52,7 @@ const defaults = {
     get disabledBgColor() { return theme.color.disabledBg },
 };
 
-let kswitch: any;
+let kswitch: typeof defaults;
 setDefault(() => {
     kswitch = deepDefaults(theme, {switch: defaults}).switch;
 });
@@ -90,14 +91,14 @@ export function makeStyles() {
         .k-switch-wrapper {
             height: 100%;
             background: ${kswitch.bgColor};
-            transition: all ${theme.transition};
+            transition: all ${kswitch.transition};
         }
         .k-switch-handle {
             border-radius: ${kswitch.handleBorderRadius};
             background: ${kswitch.handleBgColor};
             height: 100%;
             cursor: pointer;
-            transition: left ${theme.transition};
+            transition: left ${kswitch.transition};
             display: inline-block;
             img {
                 height: 100%;
@@ -119,7 +120,7 @@ export function makeStyles() {
             .k-switch-bar,
             .k-switch-wrapper {
                 background: ${kswitch.checkedBgColor};
-                transition: background ${theme.transition};
+                transition: background ${kswitch.transition};
             }
         }
         &:focus {