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

package/components/tree/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     fontSize: '12px',
     lineHeight: '24px',
     get hoverColor() { return theme.color.primary },
@@ -33,7 +34,7 @@ const defaults = {
     get line() { return `1px dashed ${theme.color.border}` },
 };
 
-let tree: any;
+let tree: typeof defaults;
 setDefault(() => {
     tree = deepDefaults(theme, {tree: defaults}).tree;
 });
@@ -87,8 +88,10 @@ export function makeStyles() {
             width: ${tree.iconWidth};
             text-align: center;
             color: ${tree.iconColor};
-            transform: rotate(-90deg);
-            transition: transform ${theme.transition};
+            &:before {
+                transform: rotate(-90deg);
+                transition: transform ${tree.transition};
+            }
         }
 
         .k-tree-checkbox {
@@ -114,7 +117,7 @@ export function makeStyles() {
                 }
             }
             &.k-expanded {
-                > .k-tree-label .k-tree-icon {
+                > .k-tree-label .k-tree-icon:before {
                     transform: rotate(0);
                 }
             }

package/components/treeSelect/index.md

@@ -11,30 +11,60 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前选择的元素，可用`v-model`双向绑定 | `*` | `""` |
-| multiple | 是否支持多选 | `Boolean` | `false` |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| clearable | 是否可清空 | `Boolean` | `false` |
-| filterable | 是否支持筛选 | `Boolean` | `false` |
-| filter | 当支持筛选时，可以自定义筛选规则 | `Function` | `undefined` |
-| 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'}` |
-| data | 要渲染的数据 | `Object` | `undefined` |
-| checkbox | 是否展示复选框 | `Boolean` | `false` |
-| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | `Function` | `undefined` |
-| defaultExpandAll | 是否默认展开所有节点 | `Boolean` | `true` |
-| uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `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` | 
+| data | 要渲染的数据 | `TreeDataItem<K>[]` | `undefined` |
+| uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `boolean` | `false` |
+| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: TreeNode<K>) => Proomise<void> &#124; void</code> | `undefined` |
+| showLine | 是否展示`Tree`的对齐线 | `boolean` | `true` |
+| defaultExpandAll | 是否默认展开所有节点 | `boolean` | `true` |
+| checkbox | 是否展示复选框 | `boolean` | `false` |
+| filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, data: TreeDataItem<K>) => boolean` | `undefined` |
+
+```ts
+import {Key, Children} from 'intact';
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+
+export type TreeDataItem<K extends Key> = {
+    label?: Children 
+    key?: K
+    disabled?: boolean
+    loaded?: boolean
+    children?: TreeDataItem<K>[]
+}
+
+```
 
 # 扩展点
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| value | 自定义选择结果的展示 | `value, label` |
+| value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
+| values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
+| prefix | 自定义输入款前面展示的内容 | - |
+| suffix | 自定义输入框后面展示的内容 | - |
+| menu | 自定义整个菜单的内容 | - |
 
+```ts
+import {Children} from 'intact';
+```
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| show | 菜单弹出时触发 | - |
+| hide | 菜单隐藏时触发 | - |

package/components/treeSelect/index.spec.ts

@@ -21,7 +21,7 @@ describe('TreeSelect', () => {
         (dropdown.querySelector('.k-tree-text') as HTMLElement).click();
         expect(instance.get('value')).to.eql('1');
 
-        await wait(300);
+        await wait(500);
         expect(getElement('.k-tree-select-menu')).to.be.undefined;
     });
 
@@ -39,7 +39,7 @@ describe('TreeSelect', () => {
         expect(instance.get('values')).to.eql(['1.1']);
 
         instance.set('values', ['1']);
-        await wait(300)
+        await wait(500)
         expect(dropdown.innerHTML).to.matchSnapshot();
         expect(element.innerHTML).to.matchSnapshot();
     });
@@ -73,7 +73,7 @@ describe('TreeSelect', () => {
         const input = element.querySelector('.k-input-inner') as HTMLInputElement;
         input.value = 'first';
         dispatchEvent(input, 'input');
-        await wait(300);
+        await wait(500);
         expect(dropdown.innerHTML).to.matchSnapshot();
 
         const [, text2] = dropdown.querySelectorAll('.k-tree-text');
@@ -103,11 +103,11 @@ describe('TreeSelect', () => {
         await wait();
         dispatchEvent(select, 'focusout');
 
-        await wait(300);
+        await wait(500);
         expect(element.querySelector('.k-form-error')).to.be.null;
 
         dispatchEvent(select, 'click');
-        await wait(300);
+        await wait(500);
         expect(element.querySelector('.k-form-error')).not.to.be.null;
     });
 });

package/components/treeSelect/styles.ts

@@ -4,11 +4,12 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     maxHeight: `400px`,
     padding: `3px 6px`,
 };
 
-let treeSelect: any;
+let treeSelect: typeof defaults;
 setDefault(() => {
     treeSelect = deepDefaults(theme, {treeSelect: defaults}).treeSelect;
 });
@@ -20,7 +21,7 @@ export function makeStyles() {
         padding: ${treeSelect.padding};
         overflow: auto;
         &:not([class*="-active"]) {
-            transition: left ${theme.transition}, top ${theme.transition};
+            transition: left ${treeSelect.transition}, top ${treeSelect.transition};
         }
     `;
 }

package/components/upload/index.md

@@ -9,23 +9,49 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| accept | `input`的[accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)属性，支持的文件的类型 | `String` | `undefined` |
-| multiple | `input`的`multiple`属性，是否支持多选 | `Boolean` | `false` |
+| accept | `input`的[accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)属性，支持的文件的类型 | `string` | `undefined` |
+| files | 所有已上传和待上传的文件列表 | `UploadFile[]` | `[]` |
+| defaultFiles | 指定初始化上传列表，见示例 | <code>(Partial&lt;UploadFile&gt; & Pick&lt;UploadFile, 'name' &#124; 'url'&gt;)[]</code> | `undefined` |
+| maxSize | 最大上传文件大小限制(kb)，默认无限制 | `number` | `undefined` |
+| limit | 最大上传文件数量限制，默认无限制 | `number` | `undefined` |
+| autoUpload | 是否选择文件后即自动上传 | `boolean` | `true` |
+| beforeRemove | 指定文件在删除之前的处理逻辑，如果该函数返回`false`，则取消删除，你也可以使用异步函数或返回`Promise`对象；组件会将当前文件(file)和文件列表(files)传给该函数 | `BeforeCallback` | `undefined` |
+| beforeUpload | 指定文件在开始上传之前的处理逻辑，如果该函数返回`false`，则取消上传，你也可以使用异步函数或返回`Promise`对象；组件会将当前文件(file)和文件列表(files)传给该函数 | `BeforeCallback` | `undefined` |
+| data | 指定上传附加的请求数据，可以为对象或者函数，为函数时，组件会将当前文件对象作为参数传入，函数应返回一个对象作为附加数据 | `DataObject` &#124; `DataFunction` | `undefined` |
+| action | 上传地址 | `string` | `undefined` |
+| headers | 指定上传的请求头 | <code>Record&lt;string &#124; number, string&gt;</code> | `undefined` |
+| name | 指定上传文件字段名，不存在时，组件默认会使用原始文件名 | `string` | `undefined` |
+| withCredentials | 指定跨域请求是是否允许传送cookie | `boolean` | `false` |
 | type | 组件风格 | `"select"` &#124; `"drag"` &#124; `"gallery"` | `"select"` |
-| autoUpload | 是否选择文件后即自动上传 | `Boolean` | `true` |
-| disabled | 是否禁用上传 | `Boolean` | `false` |
-| action | 上传地址 | `String` | `""` |
-| name | 指定上传文件字段名，不存在时，组件默认会使用原始文件名 | `String` | `undefined` |
-| headers | 指定上传的请求头 | `Object` | `undefined` |
-| data | 指定上传附加的请求数据，可以为对象或者函数，为函数时，组件会将当前文件对象作为参数传入，函数应返回一个对象作为附加数据 | `Object` &#124; `Function` | `undefined` |
-| withCredentials | 指定跨域请求是是否允许传送cookie | `Boolean` | `false` |
-| limit | 最大上传文件数量限制，默认无限制 | `Number` | `undefined` |
-| maxSize | 最大上传文件大小限制(kb)，默认无限制 | `Number` | `undefined` |
-| defaultFiles | 指定初始化上传列表，见示例 | `Array<Object>` | `undefined` |
-| beforeUpload | 指定文件在开始上传之前的处理逻辑，如果该函数返回`false`，则取消上传，你也可以使用异步函数或返回`Promise`对象；组件会将当前文件(file)和文件列表(files)传给该函数 | `Function` | `() => true` |
-| beforeRemove | 指定文件在删除之前的处理逻辑，如果该函数返回`false`，则取消删除，你也可以使用异步函数或返回`Promise`对象；组件会将当前文件(file)和文件列表(files)传给该函数 | `Function` | `() => true` |
-| files | 所有已上传和待上传的文件列表 | `Array` | `[]` |
-| directory | 是否支持上传文件夹 [caniuse](https://caniuse.com/#feat=input-file-directory) | `Boolean` | `false` |
+| directory | 是否支持上传文件夹 [caniuse](https://caniuse.com/#feat=input-file-directory) | `boolean` | `false` |
+| disabled | 是否禁用上传 | `boolean` | `false` |
+| multiple | `input`的`multiple`属性，是否支持多选 | `boolean` | `false` |
+
+```ts
+export type UploadFile = {
+    status: UploadFileStatus
+    type?: string
+    size?: number
+    name: string
+    percent: number
+    uid: number
+    raw: File | Partial<UploadFile>
+    url?: string
+    request?: any
+}
+
+export enum UploadFileStatus {
+    Done,
+    Ready,
+    NotReady,
+    Uploading,
+    Error,
+}
+
+type BeforeCallback = (file: UploadFile, files: UploadFile[]) => Promise<boolean> | boolean
+type DataObject = Record<string | number, any>
+type DataFunction = (file: UploadFile) => DataObject
+```
 
 # 扩展点
 
@@ -45,6 +71,16 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| error | 文件超出最大文件数量限制，超出文件大小限制，或者上传失败都会抛出该事件 | `Error, file, files` |
-| progress | 文件上传过程中会抛出该事件 | `Event, file, files` |
-| success | 文件上传成功时会抛出该事件 | `response, file, files` |
+| progress | 文件上传过程中会抛出该事件 | `(event: ProgressEvent, xml: XMLHttpRequest, file: UploadFile, files: UploadFile[]) => void` |
+| success | 文件上传成功时会抛出该事件 | `(res: any, xml: XMLHttpRequest, file: UploadFile, files: UploadFile[]) => void` |
+| error | 文件超出最大文件数量限制，超出文件大小限制，或者上传失败都会抛出该事件 | <code>(err: Error &#124; RequestError, file: File[] &#124; File &#124; UploadFile, files: UploadFile[]) => void</code> |
+
+```ts
+interface RequestError extends Error {
+    status: number
+    method: string
+    url: string
+    response: any
+    xhr: XMLHttpRequest
+}
+```

package/components/upload/index.spec.ts

@@ -52,7 +52,7 @@ describe('Upload', () => {
         unmount();
         respond = xhr => { xhr.respond(200) };
         this.xhr.restore();
-        setTimeout(done, 400);
+        setTimeout(done, 500);
     });
 
     it('basic', function(done) {

package/components/upload/index.ts

@@ -9,7 +9,7 @@ import {useShowImage} from './useShowImage';
 import type {RequestError} from './ajaxUploader';
 import type {Events} from '../types';
 
-export type {RequestError};
+export type {RequestError, UploadFileStatus};
 
 export interface UploadProps {
     accept?: string

package/components/upload/index.vdt

@@ -53,11 +53,10 @@ const handle = (
 
 const {removeFile} = this.files;
 const closeBtn = (value, index, icon) => (
-    <Button type="none" icon size="mini" class="k-upload-close"
+    <Icon class={{"k-upload-close": true, [icon]: true}}
         ev-click={() => removeFile(value, index)}
-    >
-        <Icon class={icon} />
-    </Button>
+        hoverable
+    />
 );
 
 const {show, close, image, isShow} = this.showImage;

package/components/upload/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     fontSize: '12px',
     tip: {
         gap: '16px',
@@ -73,7 +74,7 @@ const defaults = {
     }
 };
 
-let upload: any;
+let upload: typeof defaults;
 setDefault(() => {
     upload = deepDefaults(theme, {upload: defaults}).upload;
 });
@@ -149,7 +150,7 @@ export function makeStyles() {
                 border-radius: ${upload.drag.borderRadius};
                 cursor: pointer;
                 text-align: center;
-                transition: border-color ${theme.transition};
+                transition: border-color ${upload.transition};
                 &:hover {
                     border-color: ${upload.drag.hoverBorderColor};
                 }
@@ -198,7 +199,7 @@ export function makeStyles() {
                 right: ${upload.gallery.close.right};
                 display: inline-block;
                 opacity: 0;
-                transition: opacity ${theme.transition};
+                transition: opacity ${upload.transition};
                 pointer-events: none;
                 .k-icon {
                     font-size: ${upload.gallery.close.fontSize};
@@ -206,7 +207,7 @@ export function makeStyles() {
             }
             .k-upload-icons {
                 opacity: 0;
-                transition: opacity ${theme.transition};
+                transition: opacity ${upload.transition};
             }
             &:hover {
                 .k-upload-icons {

package/components/utils.ts

@@ -159,7 +159,7 @@ export function getRestProps<T>(component: Component<T>, props = component.get()
 }
 
 const externalLinkReg = /^(https?:)?\/\//;
-export function isExternalLink(to?: string) {
+export function isExternalLink(to?: string | object): to is string {
     if (!isString(to)) return false;
     return externalLinkReg.test(to);
 }

package/components/wave/index.ts

@@ -0,0 +1,94 @@
+import {Component, TypeDefs, findDomFromVNode, VNode, nextTick} from 'intact';
+import {isArray} from 'intact-shared';
+import {bind} from '../utils';
+import {makeStyles} from './styles';
+import {theme} from '../../styles/theme';
+
+export interface WaveProps {
+    disabled?: boolean
+    color?: string
+    inset?: string
+}
+
+const typeDefs: Required<TypeDefs<WaveProps>> = {
+    disabled: Boolean,
+    color: String,
+    inset: String,
+};
+
+const defaults = (): Partial<WaveProps> => ({
+    color: theme.color.primary,
+    inset: '-1px'
+});
+
+export class Wave extends Component<WaveProps> {
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static template = function(this: Wave) {
+        const children = this.get('children') as VNode;
+        if (process.env.NODE_ENV !== 'production') {
+            if (!children || (isArray(children) && children.length > 1)) {
+                throw new Error('Wave must receive only one Element children');
+            }
+        }
+        return children;
+    };
+
+    private instance: HTMLElement | null = null;
+    private className!: string;
+    private timer: number = 0;
+
+    private initClassName() {
+        const {color, inset} = this.get();
+        this.className = makeStyles(color || theme.color.primary, inset!);
+    }
+
+    @bind
+    mounted() {
+        const children = this.get('children') as VNode;
+        const node = findDomFromVNode(children, true) as HTMLElement;
+        if (!node || node.nodeType !== 1) {
+            return;
+        }
+
+        this.instance = node;
+        node.addEventListener('click', this.onClick);
+    }
+
+    beforeUnmount() {
+        if (this.instance) {
+            this.instance!.removeEventListener('click', this.onClick);
+        }
+        this.resetAnimation();
+    }
+
+    @bind
+    private onClick(e: Event) {
+        this.initClassName();
+
+        const {instance} = this;
+        const {disabled} = this.get();
+        const node = e.target as HTMLElement;
+
+        // 点击输入框中的icon时，此时输入框不需要动效
+        const isInput = instance!.classList.contains('k-input-wrapper');
+        if (disabled || isInput && node!.classList.contains('k-icon')) return;
+
+        this.resetAnimation();
+      
+        instance!.addEventListener('animationend', this.resetAnimation);
+        this.timer = window.setTimeout(() => {        
+            instance!.classList.add(this.className);
+        });
+    }
+
+    @bind
+    resetAnimation() {
+        const node = this.instance;
+        if (!node) return;
+
+        node.classList.remove(this.className);
+        node.removeEventListener('animationend', this.resetAnimation);
+        clearTimeout(this.timer);
+    }
+}

package/components/wave/styles.ts

@@ -0,0 +1,50 @@
+import {css, keyframes} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults, palette} from '../../styles/utils';
+import '../../styles/global';
+
+const defaults = {
+    inset: '-3px',
+};
+
+let wave: typeof defaults;
+setDefault(() => {
+    wave = deepDefaults(theme, {wave: defaults}).wave;
+});
+
+export function makeStyles(color: string, inset: string) {
+    const waveEffect = keyframes`
+        100% {
+            top: calc(${inset} + ${wave.inset});
+            bottom: calc(${inset} + ${wave.inset});
+            left: calc(${inset} + ${wave.inset});
+            right: calc(${inset} + ${wave.inset});
+            opacity: 0.05;
+        }
+    `;
+
+    return css`
+        position: relative;
+        &::after {
+            display: block;
+            content: '';
+            position: absolute;
+            top: ${inset};
+            bottom: ${inset};
+            left: ${inset};
+            right: ${inset};
+            opacity: 0.4;
+            border-radius: 4px;
+            z-index: 2;
+            animation: ${waveEffect} .2s ease-in;
+            animation-fill-mode: forwards;
+            border: 2px solid ${color};
+        }
+        &.k-circle,
+        &.k-radio-wrapper {
+            &:after {
+                border-radius: calc(${theme.large.height} / 2 + 4px);
+            }
+        }
+    `;
+}

package/es/components/breadcrumb/item.d.ts

@@ -1,6 +1,6 @@
 import { Component, TypeDefs } from 'intact';
 export interface BreadcrumbItemProps {
-    to?: string;
+    to?: string | object;
 }
 export declare class BreadcrumbItem extends Component<BreadcrumbItemProps> {
     static template: string | import("intact").Template<any>;

package/es/components/breadcrumb/item.js

@@ -4,10 +4,9 @@ import { __decorate } from "tslib";
 import { Component } from 'intact';
 import { bind } from '../utils';
 import template from './item.vdt';
-import { isExternalLink } from '../utils';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter, navigate } from '../../hooks/useRouter';
 var typeDefs = {
-  to: String
+  to: [String, Object]
 };
 export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(BreadcrumbItem, _Component);
@@ -29,17 +28,7 @@ export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
   var _proto = BreadcrumbItem.prototype;
 
   _proto.onClick = function onClick() {
-    var to = this.get('to');
-
-    if (to) {
-      var router = this.router.value;
-
-      if (router && !isExternalLink(to)) {
-        router.push(to);
-      } else {
-        window.location.href = to;
-      }
-    }
+    navigate(this.router.value, this.get('to'));
   };
 
   return BreadcrumbItem;

package/es/components/breadcrumb/styles.js

@@ -24,5 +24,5 @@ setDefault(function () {
   }).breadcrumb;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";.k-breadcrumb-item{display:inline-block;&:last-of-type .k-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.k-breadcrumb-link,.k-breadcrumb-link a{color:", breadcrumb.color, ";}a.k-breadcrumb-link:hover,.k-breadcrumb-link a:hover{color:", breadcrumb.hoverColor, ";}.k-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
+  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.k-breadcrumb-item{&:last-of-type .k-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.k-breadcrumb-link,.k-breadcrumb-link a{color:", breadcrumb.color, ";}a.k-breadcrumb-link,.k-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.k-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
 }

package/es/components/button/index.vdt.js

@@ -4,6 +4,8 @@ import { getRestProps } from '../utils';
 import { Icon } from '../icon';
 import { makeButtonStyles } from './styles';
 import { DynamicButton } from './dynamicButton';
+import { Wave } from '../wave';
+import { button as theme } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -72,22 +74,29 @@ export default function ($props, $blocks, $__proto__) {
   var buttonGroup = this.buttonGroup;
   var checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
   var isCheckType = checkType !== 'none';
-  return _$cc(DynamicButton, _extends({
-    'className': _$cn(classNameObj),
-    'tagName': tagName
-  }, getRestProps(this), {
-    'ref': this.elementRef,
-    'tabindex': disabled || loading ? '-1' : tabindex,
-    'ev-click': this.onClick,
-    'ev-mouseup': this.onMouseUp,
-    'htmlType': htmlType,
-    'name': isCheckType ? null : name,
-    'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, 'k-button-input', {
-      'type': checkType,
-      'name': name,
-      'checked': checked,
-      'tabindex': '-1'
-    }) : undefined]
-  }), null, this.elementRef);
+  var typeStyles = theme[type];
+  var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
+  return _$cc(Wave, {
+    'disabled': loading || disabled || type === 'none' || type === 'link',
+    'inset': '-2px',
+    'color': waveColor,
+    'children': _$cc(DynamicButton, _extends({
+      'className': _$cn(classNameObj),
+      'tagName': tagName
+    }, getRestProps(this), {
+      'ref': this.elementRef,
+      'tabindex': disabled || loading ? '-1' : tabindex,
+      'ev-click': this.onClick,
+      'ev-mouseup': this.onMouseUp,
+      'htmlType': htmlType,
+      'name': isCheckType ? null : name,
+      'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, 'k-button-input', {
+        'type': checkType,
+        'name': name,
+        'checked': checked,
+        'tabindex': '-1'
+      }) : undefined]
+    }), null, this.elementRef)
+  });
 }
 ;