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

package/components/input/index.vdt

@@ -2,12 +2,15 @@ import {Icon} from '../icon';
 import {addStyle, isTextBlock, getRestProps} from '../utils';
 import {makeStyles} from './styles';
 import {noop, isNullOrUndefined} from 'intact-shared';
+import {Wave} from '../wave';
+import {context as ErrorContext} from '../form/useError';
 
 const {
     className, style, type, value, defaultValue, placeholder,
     clearable, disabled, size, rows, autoWidth, fluid,
     width, stackClearIcon, frozenOnInput, readonly, inline,
-
+    waveDisabled,
+    
     'ev-click': click,
     'ev-mounseenter': mouseenter,
     'ev-mouseleave': mouseleave,
@@ -59,7 +62,6 @@ const inputProps = {
 if (hasInputValue) {
     inputProps.value = inputValue;
 }
-
 <div class={classNameObj}
     style={width != null ? addStyle(style, {width: `${width}px`}) : style} 
     ev-click={click}
@@ -75,45 +77,52 @@ if (hasInputValue) {
             <div class={{
                 "k-input-prepend": true, 
                 "k-input-padding": isTextBlock(children)
-           }}>{children}</div>
+        }}>{children}</div>
         }
     }}
-    <div class="k-input-wrapper">
-        <div class="k-input-prefix" v-if={$blocks.prefix}>
-            <b:prefix />
-        </div>
-        <input v-if={type !== 'textarea'}
-            {...inputProps}
-            class="k-input-inner" 
-            type={type}
-        />
-        <textarea v-else 
-            {...inputProps}
-            class="k-input-inner k-textarea"
-            rows={rows}
-        ></textarea>
-        <div class="k-input-suffix" v-if={$blocks.suffix || clearable && !disabled}>
-            <Icon v-if={clearable && !disabled}
-                class={{
-                    "k-input-clear ion-ios-close": true, 
-                    "k-input-show": hasValue,
-                }}
-                ev-click={this.clear}
-            />{' '}
-            <b:suffix />
-        </div>
-        <div v-if={autoWidth}
-            class="k-input-fake"
-            ref={fakeRef}
-        >{!hasValue ? placeholder : inputValue}</div>
-    </div>
+    <ErrorContext.Consumer defaultValue={false}>
+        {isInvalid => {
+            return <Wave disabled={waveDisabled || disabled || isInvalid}>
+                <div class="k-input-wrapper">
+                    <div class="k-input-prefix" v-if={$blocks.prefix}>
+                        <b:prefix />
+                    </div>
+                    <input v-if={type !== 'textarea'}
+                        {...inputProps}
+                        class="k-input-inner" 
+                        type={type}
+                    />
+                    <textarea v-else 
+                        {...inputProps}
+                        class="k-input-inner k-textarea"
+                        rows={rows}
+                    ></textarea>
+                    <div class="k-input-suffix" v-if={$blocks.suffix || clearable && !disabled}>
+                        <Icon v-if={clearable && !disabled}
+                            class={{
+                                "k-input-clear ion-ios-close": true, 
+                                "k-input-show": hasValue,
+                            }}
+                            ev-click={this.clear}
+                            hoverable
+                        />{' '}
+                        <b:suffix />
+                    </div>
+                    <div v-if={autoWidth}
+                        class="k-input-fake"
+                        ref={fakeRef}
+                    >{!hasValue ? placeholder : inputValue}</div>
+                </div>
+            </Wave>
+        }}
+    </ErrorContext.Consumer>
     {do {
         if ($blocks.append) {
             const children = $blocks.append(noop);
             <div class={{
                 "k-input-append": true, 
                 "k-input-padding": isTextBlock(children)
-           }}>{children}</div>
+            }}>{children}</div> 
         }
     }}
 </div>

package/components/input/search.vdt

@@ -9,12 +9,14 @@ const {
     type, size, open, 
 } = this.get();
 
+const isTypeNotDefault = type !== 'default';
+
 const classNameObj = {
     'k-search': true,
     [className]: className,
     'k-open': open,
     'k-hide': !open,
-    [`k-${type}`]: type !== 'default',
+    [`k-${type}`]: isTypeNotDefault,
     [makeSearchStyles()]: true,
 };
 
@@ -31,6 +33,7 @@ const classNameObj = {
         readonly={!open}
         size={size}
         class="k-with-suffix"
+        waveDisabled={isTypeNotDefault}
     />
     <Button icon type="none" ev-click={this.onClickBtn} size={size}>
         <Icon class="k-icon-search k-search-icon" />

package/components/input/styles.ts

@@ -5,6 +5,7 @@ import '../../styles/global';
 
 const defaults = deepDefaults(
     {
+        get transition() { return theme.transition.middle },
         get fontSize() { return theme.default.fontSize },
         get height() { return theme.default.height },
         width: '300px',
@@ -13,7 +14,8 @@ const defaults = deepDefaults(
         bgColor: '#fff',
         get color() { return theme.color.text },
         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 borderRadius() { return theme.borderRadius },
         get placeholderColor() { return theme.color.placeholder },
 
@@ -60,7 +62,7 @@ const defaults = deepDefaults(
     }, {} as Record<Sizes, {fontSize: string, height: string, paddingGap: string}>),
 )
 
-let input: any;
+let input: typeof defaults;
 setDefault(() => {
     input = deepDefaults(theme, {input: defaults}).input;
 })
@@ -80,7 +82,7 @@ export function makeStyles() {
             width: 100%;
             border: ${input.border};
             background-color: ${input.bgColor};
-            transition: border ${theme.transition}, background ${theme.transition}, box-shadow ${theme.transition};
+            transition: border ${input.transition}, background ${input.transition}, box-shadow ${input.transition};
             border-radius: ${input.borderRadius};
             outline: none;
             position: relative;
@@ -114,16 +116,10 @@ export function makeStyles() {
 
         // clearable
         .k-input-clear {
-            display: inline-block;
-            vertical-align: top;
-            cursor: pointer;
             opacity: 0;
-            transition: opacity ${theme.transition};
+            transition: opacity ${input.transition};
             pointer-events: none;
             color: ${input.clearIconColor};
-            &:hover {
-                color: ${theme.color.primary};
-            }
             + * {
                 margin-left: ${input.clearIconGap};
             }
@@ -140,7 +136,7 @@ export function makeStyles() {
                 z-index: 1;
                 right: 0;
                 &.k-input-show + i {
-                    transition: opacity ${theme.transition};
+                    transition: opacity ${input.transition};
                 }
             }
             &:hover {
@@ -308,7 +304,7 @@ export function makeSearchStyles() {
         position: relative;
         display: inline-block;
         .k-input {
-            transition: width ${theme.transition};
+            transition: width ${input.transition};
         }
         .k-btn {
             position: absolute;

package/components/layout/demos/asideFix.md

@@ -5,8 +5,7 @@ iframe: 400
 ---
 
 给`Header`和`Aside`分别添加`fixed`属性，即可固定顶部或者侧边栏，组件会自动添加相应样式，无需手动
-添加样式。另外我们可以通过给`Aside`添加`size`属性，来控制侧边栏的宽度，给属性会自动应用到子组件
-`Menu`中
+添加样式。另外我们可以通过给`Aside`添加`width`属性，来控制侧边栏的宽度
 
 ```vdt
 import {
@@ -18,7 +17,7 @@ import {
 } from 'kpc';
 
 <Layout class="layout">
-    <Aside collapse={this.get('collapse')} fixed theme="white">
+    <Aside collapse={this.get('collapse')} fixed theme="white" width="260px">
         <div class="logo">LOGO</div>
         <Menu
             v-model:expandedKeys="expandedKeys" 

package/components/layout/index.md

@@ -11,15 +11,15 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| fixed | 是否固定头部 | `Boolean` | `false` |
+| fixed | 是否固定头部 | `boolean` | `false` |
 | theme | 主题颜色 | `"dark"` | `"light"` | `"white"` | `"dark"` |
-| height | 高度 | `String` | `Number` | `"64px"` |
+| height | 高度 | `string` | `number` | `"64px"` |
 
 ## Aside
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| fixed | 是否固定侧边栏 | `Boolean` | `false` |
-| collapse | 是否收起侧边栏 | `Boolean` | `false` |
+| fixed | 是否固定侧边栏 | `boolean` | `false` |
+| collapse | 是否收起侧边栏 | `boolean` | `false` |
 | theme | 主题颜色 | `"dark"` | `"light"` | `"white"` | `"dark"` |
-| width | 宽度 | `String` | `Number` | `"200px"` |
+| width | 宽度 | `string` | `number` | `"200px"` |

package/components/layout/styles.ts

@@ -8,6 +8,7 @@ const sizes = ['small', 'large'] as const;
 export const themes = ['light', 'dark', 'white'] as const;
 
 const defaults = {
+    get transition() { return theme.transition.large },
     get color() { return menu.item.color },
     get bgColor() { return menu.bgColor },
     light: {
@@ -26,7 +27,7 @@ const defaults = {
     // bodyMargin: '0 20px',
 };
 
-let layout: any;
+let layout: typeof defaults;
 setDefault(() => {
     layout = deepDefaults(theme, {layout: defaults}).layout;
 });
@@ -40,7 +41,7 @@ export function makeLayoutStyles() {
         display: flex;
         flex-direction: column;
         flex: 1;
-        transition: padding-left ${theme.transition};
+        transition: padding-left ${layout.transition};
         &.k-has-aside {
             flex-direction: row;
         }
@@ -60,7 +61,7 @@ export function makeHeaderStyles() {
         color: ${layout.color};
         background: ${layout.bgColor};
         left: 0;
-        transition: left ${theme.transition};
+        transition: left ${layout.transition};
         &.k-fixed {
             position: fixed;
             left: 0;
@@ -84,7 +85,7 @@ export function makeHeaderStyles() {
 
 export function makeAsideStyles() {
     return css`
-        transition: width ${theme.transition};
+        transition: width ${layout.transition};
         display: flex;
         flex-direction: column;
         background: ${layout.bgColor};

package/components/menu/index.md

@@ -11,22 +11,23 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| expandedKeys | 定义菜单展开项 | `Array` | `[]` |
-| selectedKey | 定义菜单选中项 | `String` | `""` |
-| theme | 定义菜单主题 | `"light"` | `"dark"` | `"dark"` |
-| collapse | 菜单是否折叠 | `Boolean` | `false` |
+| expandedKeys | 定义菜单展开项 | <code>(string &#124; number)[]</code> | `[]` |
+| selectedKey | 定义菜单选中项 | <code>string &#124; number</code> | `undefined` |
+| theme | 定义菜单主题 | `"light"` &#124; `"dark"` &#124; `"white"` | `"dark"` |
+| collapse | 菜单是否折叠 | `boolean` | `false` |
 | type | 定义菜单排列方式：垂直，水平 | `"vertical"` &#124; `"horizontal"` | `"vertical"` |
 | size | 定义菜单尺寸 | `"large"` &#124; `"default"` &#124; `"small"` | `"default"` |
-| accordion | 是否每次只能展开一项 | `Boolean` | `false` |
-| dot | 是否给菜单项前面添加圆点 | `Boolean` | `false` |
+| accordion | 是否每次只能展开一项 | `boolean` | `false` |
+| dot | 是否给菜单项前面添加圆点 | `boolean` | `false` |
 
 ## MenuItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| key | 定义全局唯一的`key`，用于标识每一项 | `String` | `undefined` |
-| to | 定义超链接菜单项，点击直接跳转 | `String` | `undefined` |
-| dot | 是否给当前菜单项前面添加圆点 | `Boolean` | `false` |
+| key | 定义全局唯一的`key`，用于标识每一项 | <code>string &#124; number</code> | `undefined` |
+| to | 定义超链接菜单项，点击直接跳转 | `string` &#124; `object` | `undefined` |
+| dot | 是否给当前菜单项前面添加圆点 | `boolean` | `false` |
+| disabled | 是否禁用当前项 | `boolean` | `false` |
 
 # 扩展点
 
@@ -42,5 +43,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| click | 点击菜单项触发，不管该菜单项是否包含子菜单 | `Event` |
-| select | 选中没有子菜单的菜单项触发 | `MenuItem, Event` |
+| select | 选中没有子菜单的菜单项触发 | `(menuItem: MenuItem, e: MouseEvent) => void` |

package/components/menu/index.spec.ts

@@ -11,11 +11,11 @@ describe('Menu', () => {
 
         const title = element.querySelector('.k-expanded .k-menu-title') as HTMLElement;
         title.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql([]);
         title.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql(['3']);
     });

package/components/menu/item.ts

@@ -2,16 +2,16 @@ import {Component, TypeDefs, inject, provide, VNode, Key} from 'intact';
 import {ROOT_MENU, MENU, Menu, MenuProps} from './menu'
 import {Dropdown, DropdownMenu} from '../dropdown';
 import template from './item.vdt';
-import {bind, isExternalLink} from '../utils';
+import {bind} from '../utils';
 import {useState} from '../../hooks/useState';
 import {useHighlight} from './useHighlight';
 import {useExpanded} from './useExpanded';
 import {useDropdown} from './useDropdown';
-import {useRouter} from '../../hooks/useRouter';
+import {useRouter, navigate} from '../../hooks/useRouter';
 
 export interface MenuItemProps {
     key: Key 
-    to?: string
+    to?: string | object
     dot?: boolean
     disabled?: boolean
 }
@@ -26,7 +26,7 @@ const typeDefs: Required<TypeDefs<MenuItemProps>> = {
         type: [String, Number],
         required: true,
     },
-    to: String,
+    to: [String, Object],
     dot: Boolean,
     disabled: Boolean,
 };
@@ -65,14 +65,7 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
 
         if (!hasSubMenu) {
             this.trigger('select', this, e);
-            if (to) {
-                const router = this.router.value;
-                if (router && !isExternalLink(to)) {
-                    router.push(to!);
-                } else {
-                    location.href = to!;
-                }
-            }
+            navigate(this.router.value, to);
         }
     }
 }

package/components/menu/styles.ts

@@ -6,6 +6,7 @@ import '../../styles/global';
 const sizes = ['large', 'small'] as const;
 
 const defaults = {
+    get transition() { return theme.transition.large },
     width: '200px',
     bgColor: '#262626',
     fontSize: '14px',
@@ -77,7 +78,7 @@ const defaults = {
     }
 };
 
-let menu: any;
+let menu: typeof defaults;
 setDefault(() => {
     menu = deepDefaults(theme, {menu: defaults}).menu;
 });
@@ -90,7 +91,7 @@ export function makeMenuStyles() {
     return css`
         &.k-menu {
             width: ${menu.width};
-            transition: width ${theme.transition};
+            transition: width ${menu.transition};
             background: ${menu.bgColor};
             font-size: ${menu.fontSize};
         }
@@ -243,7 +244,7 @@ export function makeItemStyles() {
         .k-menu-title {
             cursor: pointer;
             height: ${menu.item.height};
-            transition: all ${theme.transition};
+            transition: all ${menu.transition};
             &:hover {
                 color: ${menu.item.hoverColor};
             }
@@ -254,7 +255,7 @@ export function makeItemStyles() {
             align-items: center;
         }
         .k-menu-arrow {
-            transition: transform ${theme.transition};
+            transition: transform ${menu.transition};
             margin-left: ${menu.icon.gap};
         }
 
@@ -263,7 +264,7 @@ export function makeItemStyles() {
             > .k-menu-title {
                 color: ${menu.item.hoverColor};
                 .k-menu-arrow {
-                    transform: rotate(180deg);
+                    transform: rotateX(180deg);
                 }
             }
         }

package/components/message/index.md

@@ -5,45 +5,43 @@ order: 12
 sidebar: doc
 ---
 
-> 如果你在Vue下全局安装KPC，可以通过`this.$message`引用到`Message`组件，所以你可以这样调用它的
+> 如果你在Vue下全局安装@king-design，可以通过`this.$message`引用到`Message`组件，所以你可以这样调用它的
 > 方法：`this.$message.success('test')`
 
 # 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| content | 提示内容 | `String` | `VNode` | `undefined` |
-| duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `Number` | `5000` |
+| content | 提示内容 | `string` | `VNode` | `undefined` |
+| duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `number` | `5000` |
 | type | 提示类型 | `"info"` | `"error"` | `"success"` | `"warning"` | `"info"` |
-| closable | 是否展示关闭按钮 | `Boolean` | `true` |
-| hideIcon | 是否隐藏文字前面的icon | `Boolean` | `false` |
-| key | 组件的`key`，当作为组件而非静态方法调用时，必须指定 | `String` | - |
-| value | 用于标识是否展示，可用`v-model`建立双向绑定 | `Boolean` | false |
-
+| closable | 是否展示关闭按钮 | `boolean` | `true` |
+| hideIcon | 是否隐藏文字前面的icon | `boolean` | `false` |
 
 # 静态方法
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| info | 普通提示 | `content, duration` | `config` | - |
-| error | 错误提示 | `content, duration` | `config` | - |
-| success | 成功提示 | `content, duration` | `config` | - |
-| warning | 警告提示 | `content, duration` | `config` | - |
+| info | 普通提示 | <code>(content: string &#124; VNode &#124; Partial&lt;MessageProps&gt;, duration?: number) => void</code> | - |
+| error | 错误提示 | <code>(content: string &#124; VNode &#124; Partial&lt;MessageProps&gt;, duration?: number) => void</code> | - |
+| success | 成功提示 | <code>(content: string &#124; VNode &#124; Partial&lt;MessageProps&gt;, duration?: number) => void</code> | - |
+| warning | 警告提示 | <code>(content: string &#124; VNode &#124; Partial&lt;MessageProps&gt;, duration?: number) => void</code> | - |
 
 其中`content`和`duration`参数说明如下：
 
 | 参数名 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| content | 提示的内容 | `String` &#124; `VNode` | `undefined` |
-| duration | 提示展示多长时间后自动关闭，当传入`0`时，提示将会一直展示。单位ms | `Number` | `5000` |
-
-上述静态方法的另一种重载方式是，传入`Object`作为参数，此时`config`可以配置如下：
-
-| 属性名 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| content | 提示内容 | `String` &#124; `VNode` | `undefined` |
-| duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `Number` | `5000` |
-| type | 提示类型 | `"info"` &#124; `"error"` &#124; `"success"` &#124; `"warning"` | `"info"` |
-| closable | 是否展示关闭按钮 | `Boolean` | `true` |
-| hideIcon | 是否隐藏文字前面的icon | `Boolean` | `false` |
-
+| content | 提示的内容，或者你也可以直接传入类型为<code>Partial&lt;MessageProps&gt;</code>的配置 | `string` &#124; `VNode` &#124; `Partial<MessageProps>` | `undefined` |
+| duration | 提示展示多长时间后自动关闭，当传入`0`时，提示将会一直展示。单位ms | `bumber` | `5000` |
+
+```ts
+import {VNode} from 'intact';
+
+export interface MessageProps {
+    content?: string | VNode 
+    duration?: number
+    type?: 'info' | 'error' | 'success' | 'warning'
+    closable?: boolean
+    hideIcon?: boolean
+}
+```

package/components/message/index.spec.ts

@@ -42,7 +42,7 @@ describe('Message', () => {
         expect(message1).eql(message);
 
         dispatchEvent(message, 'mouseleave');
-        await wait(300);
+        await wait(500);
         message1 = getElement('.k-message');
         expect(message1).eql(message);
 

package/components/message/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     top: `10px`,
     transform: `translateY(-10px)`,
     get bgColor() { return theme.color.bg },
@@ -28,7 +29,7 @@ const defaults = {
     },
 };
 
-let message: any;
+let message: typeof defaults;
 setDefault(() => {
     message = deepDefaults(theme, {message: defaults}).message;
 });
@@ -82,6 +83,9 @@ export function makeMessageStyles() {
             position: absolute;
             right: 0;
             top: 0;
+            &:hover {
+                background: none;
+            }
             .k-icon {
                 font-size: ${message.closeFontSize};
             }
@@ -120,10 +124,10 @@ export function makeMessageStyles() {
         }
         &.transition-enter-active,
         &.transition-leave-active {
-            transition: transform ${theme.transition}, opacity ${theme.transition};
+            transition: transform ${message.transition}, opacity ${message.transition};
         }
         &.transition-move {
-            transition: transform ${theme.transition};
+            transition: transform ${message.transition};
         }
     `;
 }

package/components/pagination/index.md

@@ -10,27 +10,19 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | size | 尺寸 | `"large"` | `"default"` | `"mini"` | `"small"` | `"default"` |
-| counts | 展示按钮个数 | `Number` | `7` |
-| total | 数据总条数 | `Number` | `0` |
-| value | 当前页码 | `Number` | `1` |
-| limit | 页面条数 | `Number` | `10` |
-| limits | 页面条数 | `Array<Number>` | `[10, 20, 50]` |
-| noBorder | 是否展示无边框样式，默认有边框 | `Boolean` | `false` |
-| simple | 是否展示简洁样式 | `Boolean` | `false` |
-| showTotal | 显示总条数 | `Boolean` | `true` |
-| showGoto | 显示快速跳转框 | `Boolean` | `false` |
-| showLimits | 是否显示每页条数选择框 | `Boolean` | `true` |
-
-# 方法
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| changePage | 切换页码 | 要切换到的页码 | `undefined` |
-| prev | 上一页 | - | `undefined` |
-| next | 下一页 | - | `undefined` |
+| counts | 展示按钮个数 | `number` | `7` |
+| total | 数据总条数 | `number` | `0` |
+| value | 当前页码 | `number` | `1` |
+| limit | 页面条数 | `number` | `10` |
+| limits | 页面条数 | `Array<number>` | `[10, 20, 50]` |
+| noBorder | 是否展示无边框样式，默认有边框 | `boolean` | `false` |
+| simple | 是否展示简洁样式 | `boolean` | `false` |
+| showTotal | 显示总条数 | `boolean` | `true` |
+| showGoto | 显示快速跳转框 | `boolean` | `false` |
+| showLimits | 是否显示每页条数选择框 | `boolean` | `true` |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | `value`和`limit`变化时触发，同时变化不会重复触发 | `{value, limit}` |
+| change | `value`和`limit`变化时触发，同时变化不会重复触发 | `{value: number, limit: number}` |

package/components/pagination/styles.ts

@@ -52,7 +52,7 @@ const defaults = deepDefaults(
     }, {} as Record<Sizes, SizeStyles>)
 );
 
-let pagination: any;
+let pagination: typeof defaults;
 setDefault(() => {
     pagination = deepDefaults(theme, {pagination: defaults}).pagination;
 });
@@ -69,7 +69,7 @@ export function makeStyles() {
         }
         .k-pagination-ellipsis {
             background-color: transparent;
-            border: none;
+            border-color: transparent;
         }
         .k-btns {
             .k-btn {

package/components/progress/demos/customColor.md

@@ -3,7 +3,7 @@ title: 自定义颜色
 order: 3
 ---
 
-通过`color`设置进度条颜色， 类型`String` | `Array` | `Function`。
+通过`color`设置进度条颜色， 类型`string` | `Array` | `Function`。
 
 如果`color`设置为`Array`类型，它的数据格式如下：
 

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
+}
+```