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

package/components/progress/index.md

@@ -10,11 +10,17 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 类型 |`"bar"` | `"circle"` | `"bar"` |
-| percent | 当前百分比(0~100) | `Number` | `0` |
+| percent | 当前百分比(0~100) | `number` | `string` | `0` |
 | size | 尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
-| showOuterText | 是否展示后面的百分比 | `Boolean` | `true` |
-| showInnerText | 是否展示进度条上面的百分比 | `Boolean` | `false` |
+| showOuterText | 是否展示后面的百分比 | `boolean` | `true` |
+| showInnerText | 是否展示进度条上面的百分比 | `boolean` | `false` |
 | status | 进度条状态 | `"success"` | `"error"` | `"active"` | `"normal"` | `"warning"` | `"active"` |
-| strokeWidth | 进度条指示线的宽度，单位`px`，只对`type="circle"`圆形进度有效 | `Number` | `10` |
-| color | 进度条背景颜色，支持根据百分比自定义颜色。会覆盖status设置的颜色 | `String` | `Array` |`Function` | `undefined`
+| strokeWidth | 进度条指示线的宽度，单位`px`，只对`type="circle"`圆形进度有效 | `number` | `10` |
+| color | 进度条背景颜色，支持根据百分比自定义颜色。会覆盖status设置的颜色 | `string` | `Color[]` | `((percent: number) => string)` | `undefined`
 
+```ts
+type Color = {
+    percent: string | number
+    color: string
+}
+```

package/components/progress/styles.ts

@@ -62,9 +62,9 @@ const defaults = {
     }
 };
 
-let progress: any;
+let progress: typeof defaults;
 setDefault(() => {
-  progress = deepDefaults(theme, {progress: defaults}).progress;
+    progress = deepDefaults(theme, {progress: defaults}).progress;
 });
 
 export function makeStyles() {

package/components/radio/index.md

@@ -9,15 +9,12 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| value | 单选框取值，用于`v-model`进行双向绑定 | `*` | `false` |
-| trueValue | 单选框选中后的值 | `*` | `true` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| value | 单选框取值，用于`v-model`进行双向绑定 | `any` | `false` |
+| trueValue | 单选框选中后的值 | `any` | `true` |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | 当点击组件导致值变化时触发，与`$change:value`事件有所不同的是，该事件只会触发一次，而且一定是用户点击行为触发的 | `value` |
-| click | 原生`click`事件 | `Event` |
-| mouseneter | 原生`mouseenter`事件 | `Event` |
-| mouseleave | 原生`mouseleave`事件 | `Event` |
+| change | 当点击组件导致值变化时触发 | `(value: any, e: MouseEvent) => void` |

package/components/radio/index.vdt

@@ -1,5 +1,6 @@
 import {getRestProps} from '../utils';
 import {makeStyles} from './styles';
+import {Wave} from '../wave';
 
 const {
     className, disabled, trueValue, style,
@@ -41,17 +42,19 @@ const events = [
     ev-keypress={this.onKeypress}
     ev-click={this.fixClick}
 >
-    <span class="k-radio-wrapper">
-        <input
-            { ...getRestProps(this, rest) }
-            type="radio"
-            disabled={disabled}
-            value={trueValue}
-            tabindex="-1"
-            ref={this.elementRef}
-            checked={isChecked}
-            ev-click={this.onClick}
-        />
-    </span>
+    <Wave disabled={disabled} inset="-2px">
+        <span class="k-radio-wrapper">
+            <input
+                { ...getRestProps(this, rest) }
+                type="radio"
+                disabled={disabled}
+                value={trueValue}
+                tabindex="-1"
+                ref={this.elementRef}
+                checked={isChecked}
+                ev-click={this.onClick}
+            />
+        </span>
+    </Wave>
     <span class="k-radio-text" v-if={children}>{children}</span>
 </label>

package/components/radio/styles.ts

@@ -5,9 +5,9 @@ import '../../styles/global';
 
 const defaults = {
     width: '14px',
-    get borderColor() {
-        return theme.color.darkBorder;
-    },
+    get transition() { return theme.transition.small },
+    get borderColor() { return theme.color.darkBorder; },
+    get hoverBorderColor() { return theme.color.primary; },
     bgColor: '#fff',
     textGap: '8px',
     innerWidth: '8px',
@@ -21,7 +21,7 @@ const defaults = {
     }
 };
 
-let radio: any;
+let radio: typeof defaults;
 setDefault(() => {
     radio = deepDefaults(theme, {radio: defaults}).radio;
 });
@@ -33,13 +33,11 @@ export function makeStyles() {
         cursor: pointer;
         vertical-align: middle;
         .k-radio-wrapper {
-            display: inline-block;
             width: ${radio.width};
             height: ${radio.width};
-            vertical-align: middle;
             border: 1px solid ${radio.borderColor};
             border-radius: 50%;
-            transition: all ${theme.transition} ;
+            transition: all ${radio.transition} ;
             position: relative;
             background: ${radio.bgColor};
             flex: 0 0 auto;
@@ -57,7 +55,7 @@ export function makeStyles() {
                 border-radius: 50%;
                 background-color: ${radio.checkedColor};
                 transform: scale(0);
-                transition: all ${theme.transition};
+                transition: all ${radio.transition};
             }    
         }
         input {
@@ -68,8 +66,6 @@ export function makeStyles() {
             position: absolute;
         }    
         .k-radio-text {
-            vertical-align: middle;
-            display: inline-block;
             margin-left: ${radio.textGap};
             flex: 0 1 auto;
         }

package/components/rate/index.md

@@ -9,11 +9,11 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 组件取值 | `Number` | `0` |
-| count | 星星的个数 | `Number` | `5` |
-| disabled | 是否变为只读状态 | `Boolean` | `false` |
-| half | 是否支持选中半星 | `Boolean` | `false` |
-| clearable | 是否可以清空值 | `Boolean` | `false` |
+| value | 组件取值 | `number` | `0` |
+| count | 星星的个数 | `number` | `5` |
+| disabled | 是否变为只读状态 | `boolean` | `false` |
+| half | 是否支持选中半星 | `boolean` | `false` |
+| clearable | 是否可以清空值 | `boolean` | `false` |
 
 # 扩展点
 

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