@king-design/intact 2.0.0-beta.1 → 2.0.2

package/components/rate/styles.ts

@@ -5,6 +5,7 @@ import '../../styles/global';
 
 const defaults = {
     color: '#ccc',
+    get transition() { return theme.transition.middle },
     get activeColor() { return theme.color.warning },
     iconFontSize: '24px',
 
@@ -14,7 +15,7 @@ const defaults = {
     },
 };
 
-let rate: any;
+let rate: typeof defaults;
 setDefault(() => {
     rate = deepDefaults(theme, {rate: defaults}).rate;
 });
@@ -28,7 +29,7 @@ export function makeStyles() {
             cursor: pointer;
             position: relative;
             color: ${rate.color}; 
-            transition: all ${theme.transition};
+            transition: all ${rate.transition};
             &:hover {
                 transform: ${rate.item.hoverTransform};
             }

package/components/scrollSelect/index.md

@@ -9,11 +9,20 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前取值，可用`v-model`进行双向绑定 | `*` | `undefined` |
-| data | 组件的可选项 | `Array<Object> [{label, value}]` | `[]` |
-| disabled | 是否禁用组件 | `Boolean` | `false` |
-| disable | 定义选项禁用逻辑，返回`true`则禁用该项 | `Function` | `undefined` |
-| count | 渲染可选项的DOM的个数，如果选区较大，可以增大该值 | `Number` | `19` |
+| value | 当前取值，可用`v-model`进行双向绑定 | `T` | `undefined` |
+| count | 渲染可选项的DOM的个数，如果选区较大，可以增大该值 | `number` | `19` |
+| data | 组件的可选项 | `Data<T>` | `[]` |
+| disabled | 是否禁用组件 | `boolean` | `false` |
+| disable | 定义选项禁用逻辑，返回`true`则禁用该项 | `(v: T) => boolean` | `undefined` |
+
+```ts
+export type DataItem<T = any> = {
+    value: T 
+    label: Children 
+}
+
+type Data<T> = DataItem<T>[] | ((v: T) => DataItem<T>[])
+```
 
 # 扩展点
 

package/components/scrollSelect/styles.ts

@@ -12,18 +12,20 @@ type SizeStyles = {
 }
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     height: `125px`,
     item: {
         height: `30px`,
         get color() { return theme.color.text },
         get activeColor() { return theme.color.primary },
+        get hoverBgColor() { return theme.color.bg },
         activeFontSize: `1.1em`,
         get disabledColor() { return theme.color.disabled },
         border: `1px solid #e5e5e5`,
     }
 };
 
-let scrollSelect: any;
+let scrollSelect: typeof defaults;
 setDefault(() => {
     scrollSelect = deepDefaults(theme, {scrollSelect: defaults}).scrollSelect;
 });
@@ -39,7 +41,7 @@ export function makeStyles() {
         user-select: none;
         position: relative;
         .k-scroll-select-wrapper {
-            transition: transform ${theme.transition};
+            transition: transform ${scrollSelect.transition};
         }
         &.k-dragging {
             .k-scroll-select-wrapper {
@@ -59,6 +61,9 @@ export function makeStyles() {
             color: ${scrollSelect.item.color};
             cursor: pointer;
             white-space: nowrap;
+            &:hover {
+                background: ${scrollSelect.item.hoverBgColor };
+            }
             &.k-active {
                 color: ${scrollSelect.item.activeColor};
                 font-size: ${scrollSelect.item.activeFontSize};

package/components/select/base.ts

@@ -22,7 +22,6 @@ import {isNullOrUndefined} from 'intact-shared';
 
 export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach = V | null> {
     value?: Multipe extends true ? V[] : Attach
-    // value?: any 
     multiple?: Multipe 
     filterable?: boolean
     loading?: boolean

package/components/select/base.vdt

@@ -1,10 +1,12 @@
 import {TransitionGroup, Transition} from 'intact';
 import {Input} from '../input';
 import {Icon} from '../icon';
-import {isNullOrUndefined} from 'intact-shared';
+import {isNullOrUndefined, isStringOrNumber} from 'intact-shared';
 import makeStyles from './styles';
 import {Dropdown} from '../dropdown';
 import {getRestProps, addStyle} from '../utils';
+import {Wave} from '../wave';
+import {context as ErrorContext} from '../form/useError';
 
 const {
     value, multiple,
@@ -34,115 +36,129 @@ const hasValue = this.hasValue();
 const {onInput, inputRef, keywords: {value: keywords}} = this.input;
 const {onFocusout, triggerRef} = this.focusout;
 
-<Dropdown
-    trigger="click"
-    ref={this.dropdownRef}
-    disabled={disabled}
-    container={container}
-    v-model="_show"
->
-    <div {...getRestProps(this)} 
-        class={classNameObj}
-        tabindex={disabled ? '-1' : '0'}
-        ev-keydown={this.onKeydown}
-        ev-focusout={onFocusout}
-        style={!isNullOrUndefined(width) ? addStyle(style, {width: `${width}px`}) : style}
-        ref={triggerRef}
-    >
-        <div class="k-select-prefix" v-if={$blocks.prefix}>
-            <b:prefix />
-        </div>
-        <div class="k-select-main">
-            <input type="hidden" value={value} name={name} key="hidden-input" />
-            {/* TODO: Need mode on Transition */}
-            <TransitionGroup name="k-fade" appear={false}>
-                <Input v-if={!multiple && filterable}
-                    value={_show ? keywords : label}
-                    ev-$change:value={onInput}
-                    disabled={disabled}
-                    placeholder={label || placeholder}
-                    ref={inputRef}
-                    size={size}
-                    fluid
-                    inline
-                    key="input"
-                    readonly={!_show}
-                />
-                <div class="k-select-placeholder c-ellipsis"
-                    v-else-if={!filterable && !hasValue}
-                    key="placeholder"
-                >{placeholder}</div>
-                <div class="k-select-value c-ellipsis" v-else-if={!multiple} key="value">
-                    <b:value params={[value, label]}>
-                        {label}
-                    </b:value>
-                </div>
-                <div v-else
-                    class={{
-                        "k-select-values": true,
-                        "k-with-values": $blocks.values,
-                    }}
-                    key="values"
+<ErrorContext.Consumer defaultValue={false}>
+    {isInvalid => {
+        return <Wave disabled={disabled || isInvalid || inline} inset="-2px">
+            <Dropdown
+                trigger="click"
+                ref={this.dropdownRef}
+                disabled={disabled}
+                container={container}
+                v-model="_show"
+            >
+                <div {...getRestProps(this)} 
+                    class={classNameObj}
+                    tabindex={disabled ? '-1' : '0'}
+                    ev-keydown={this.onKeydown}
+                    ev-focusout={onFocusout}
+                    style={!isNullOrUndefined(width) ? addStyle(style, {width: `${width}px`}) : style}
+                    ref={triggerRef}
                 >
-                    <TransitionGroup name="k-fade">
-                        <template>
-                            <b:values params={[value, label]}>
-                                <div class="k-select-tag"
-                                    v-for={label}
-                                    v-for-value="$label"
-                                    key={$label}
-                                >
-                                    <span class="k-select-text">
-                                        <b:value params={[value[$key], $label]}>
-                                            {$label}
-                                        </b:value>
-                                    </span>
-                                    <Icon class="ion-ios-close k-select-close"
-                                        ev-click={this.delete.bind(this, $key)}
-                                        hoverable={!disabled}
-                                    />
-                                </div>
-                            </b:values>
-                        </template>
-                    </TransitionGroup>
-                    <Input v-if={filterable}
-                        class="k-select-input"
-                        value={keywords}
-                        ev-$change:value={onInput}
-                        disabled={disabled}
-                        placeholder={!hasValue ? placeholder : ''}
-                        ref={inputRef}
-                        autoWidth
-                        inline
-                        size={size}
-                        key="filter"
-                        readonly={!_show}
-                    />
-                </div>
-            </TransitionGroup>
-        </div>
-        <span class="k-select-suffix" v-if={!hideIcon || clearable || loading || $blocks.suffix}>
-            <Icon v-if={clearable && !disabled}
-                class={{"k-select-clear ion-ios-close": true, "k-show": hasValue}}
-                ev-click={this.clear}
-                hoverable
-            />
-            <span class="k-select-suffix-icon">
-                <b:suffix>
-                    <Icon class="ion-load-c" rotate v-if={loading} />
-                    <Icon v-else-if={!hideIcon}
-                        class={{
-                            "k-select-arrow ion-ios-arrow-down": true,
-                            'k-disabled': $props.isDisableArrow 
-                        }}
-                    />
-                </b:suffix>
-            </span>
-        </span>
-    </div> 
-    <template>
-        <b:base-menu>
-            <div>should be implemeted</div>
-        </b:base-menu>
-    </template>
-</Dropdown>
+                    <div class="k-select-prefix" v-if={$blocks.prefix}>
+                        <b:prefix />
+                    </div>
+                    <div class="k-select-main">
+                        <input type="hidden" value={value} name={name} key="hidden-input" />
+                        {/* TODO: Need mode on Transition */}
+                        <TransitionGroup name="k-fade" appear={false}>
+                            <Input v-if={!multiple && filterable}
+                                value={_show ? keywords : label}
+                                ev-$change:value={onInput}
+                                disabled={disabled}
+                                placeholder={label || placeholder}
+                                ref={inputRef}
+                                size={size}
+                                fluid
+                                inline
+                                key="input"
+                                readonly={!_show}
+                                waveDisabled={true}
+                            />
+                            <div class="k-select-placeholder c-ellipsis"
+                                v-else-if={!filterable && !hasValue}
+                                key="placeholder"
+                            >{placeholder}</div>
+                            <div class="k-select-value c-ellipsis" v-else-if={!multiple} key="value">
+                                <b:value params={[value, label]}>
+                                    {label}
+                                </b:value>
+                            </div>
+                            <div v-else
+                                class={{
+                                    "k-select-values": true,
+                                    "k-with-values": $blocks.values,
+                                }}
+                                key="values"
+                            >
+                                <TransitionGroup name="k-fade">
+                                    <template>
+                                        <b:values params={[value, label]}>
+                                            <div class="k-select-tag"
+                                                v-for={label}
+                                                v-for-value="$label"
+                                                key={
+                                                    isStringOrNumber($label) ? 
+                                                        $label :
+                                                        isStringOrNumber(value[$key]) ?
+                                                            value[$key] :
+                                                            undefined
+                                                }
+                                            >
+                                                <span class="k-select-text">
+                                                    <b:value params={[value[$key], $label]}>
+                                                        {$label}
+                                                    </b:value>
+                                                </span>
+                                                <Icon class="ion-ios-close k-select-close"
+                                                    ev-click={this.delete.bind(this, $key)}
+                                                    hoverable={!disabled}
+                                                />
+                                            </div>
+                                        </b:values>
+                                    </template>
+                                </TransitionGroup>
+                                <Input v-if={filterable}
+                                    class="k-select-input"
+                                    value={keywords}
+                                    ev-$change:value={onInput}
+                                    disabled={disabled}
+                                    placeholder={!hasValue ? placeholder : ''}
+                                    ref={inputRef}
+                                    autoWidth
+                                    inline
+                                    size={size}
+                                    key="filter"
+                                    readonly={!_show}
+                                    waveDisabled={true}
+                                />
+                            </div>
+                        </TransitionGroup>
+                    </div>
+                    <span class="k-select-suffix" v-if={!hideIcon || clearable || loading || $blocks.suffix}>
+                        <Icon v-if={clearable && !disabled}
+                            class={{"k-select-clear ion-ios-close": true, "k-show": hasValue}}
+                            ev-click={this.clear}
+                            hoverable
+                        />
+                        <span class="k-select-suffix-icon">
+                            <b:suffix>
+                                <Icon class="ion-load-c" rotate v-if={loading} />
+                                <Icon v-else-if={!hideIcon}
+                                    class={{
+                                        "k-select-arrow ion-ios-arrow-down": true,
+                                        'k-disabled': $props.isDisableArrow 
+                                    }}
+                                />
+                            </b:suffix>
+                        </span>
+                    </span>
+                </div> 
+                <template>
+                    <b:base-menu>
+                        <div>should be implemeted</div>
+                    </b:base-menu>
+                </template>
+            </Dropdown>
+        </Wave>
+    }}
+</ErrorContext.Consumer>

package/components/select/demos/creatable.md

@@ -19,7 +19,7 @@ import {Select, Option} from 'kpc';
         <Option value="Sunday">星期天</Option>
     </Select>
     Day: {this.get('day')}
-    <br />
+    <br /><br />
     <Select v-model="days" filterable multiple creatable style="margin-right: 10px">
         <Option value="Monday">星期一</Option>
         <Option value="Tuesday">星期二</Option>

package/components/select/demos/customMenu.md

@@ -13,7 +13,7 @@ import {Select, Table, TableColumn, Input, Button, Icon} from 'kpc';
     ref="select"
 >
     <b:menu>
-        <Input placeholder="请输入关键字" size="small" fluid v-model="keywords">
+        <Input placeholder="请输入关键字" size="small" fluid v-model="keywords" waveDisabled={true}>
             <b:suffix><Icon class="ion-ios-search" /></b:suffix>
         </Input>
         <Table data={this.filter()}

package/components/select/demos/format.md

@@ -8,8 +8,7 @@ order: 5.1
 > 存在`value`扩展点时，不能指定`filterable`来筛选
 
 ```vdt
-import {Select, Option} from 'kpc';
-import {Icon} from 'kpc';
+import {Select, Option, Icon} from 'kpc';
 
 <div>
     <div class="item">
@@ -20,9 +19,6 @@ import {Icon} from 'kpc';
             >
                 <div style={{borderBottom: `1px ${$value} #666`}} class="line"></div>
             </Option>
-            <b:value args="[value, label]">
-                <div style={{borderBottom: `1px ${value} #666`}}></div>
-            </b:value>
         </Select>
         <div style={{border: `1px ${this.get('type')} #b2b2b2`}} class="rect">
             Rectangle
@@ -37,7 +33,7 @@ import {Icon} from 'kpc';
                 <Icon class={$value} />
             </Option>
             <b:value args="[value, label]">
-                <Icon class={value} />
+                <Icon class={value} style="vertical-align: middle;" />
                 <span class="c-middle">{value}</span>
             </b:value>
         </Select>
@@ -59,7 +55,7 @@ import {Icon} from 'kpc';
 ```
 
 ```styl
-/.line
+/.k-select-option .line
     margin-top 16px
 .item
     margin-bottom 16px

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';