@king-design/intact 3.0.0-beta.1 → 3.0.0-beta.2

package/components/table/column.vdt

@@ -4,7 +4,7 @@ import {Button} from '../button';
 import {Icon} from '../icon';
 import {Checkbox} from '../checkbox';
 import {makeGroupMenuStyles} from './styles';
-import {isStringOrNumber, get} from 'intact-shared';
+import {isStringOrNumber, get, isArray} from 'intact-shared';
 import {context as GroupContext} from './useGroup';
 import {context as SortableContext} from './useSortable';
 import {linkEvent} from 'intact';
@@ -16,7 +16,11 @@ import {Input} from '../input';
 import {_$} from '../../i18n';
 
 const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
-const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
+const {
+    onSelect, isChecked, keywords, filteredGroup,
+    onShow, reset, confirm, dropdownRef,
+    localGroupValue, isEmptyValue,
+} = this.group;
 
 <TableContext.Consumer>
     {checkType => {
@@ -35,14 +39,12 @@ const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
                                         }
 
                                         const groupValue = currentGroup && currentGroup[key];
-                                        const groupText = getGroupText(groupValue);
-
                                         const type = sort && sort.key === key && sort.type;
 
                                         let checked;
                                         return <th className={classNameObj}
                                             style={style}
-                                            title={isStringOrNumber(title) ? title + (groupText || '') : null}
+                                            title={isStringOrNumber(title) ? title : null}
                                             ev-click={sortable ? linkEvent(key, onChangeSort) : null}
                                             colspan={cols}
                                             rowspan={rows}
@@ -58,19 +60,19 @@ const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
                                             <div class="k-table-title">
                                                 <div class="k-table-title-text c-ellipsis">
                                                     <b:title>{title}</b:title>
-                                                    {groupText}
                                                 </div>
                                                 <Dropdown v-if={group}
                                                     position={{my: 'center top', at: 'center bottom+5', collision: 'flipfit'}}
                                                     key="dropdown"
                                                     trigger="click"
-                                                    ev-show={() => keywords.set('')}
+                                                    ev-show={() => onShow(groupValue)}
+                                                    ref={dropdownRef}
                                                 >
-                                                    <Button icon size="mini" class="k-table-group"
+                                                    <Icon class="k-icon-down-squared k-table-group"
                                                         ev-click={e => e._ignoreSortable = true}
-                                                    >
-                                                        <Icon class="ion-android-arrow-dropdown" />
-                                                    </Button>
+                                                        hoverable
+                                                        color={isEmptyValue(groupValue) ? null : 'primary'}
+                                                    />
                                                     <DropdownMenu class={{"k-table-group-dropdown": true, [makeGroupMenuStyles()]: true}}>
                                                         <div class="k-table-group-header">
                                                             <Input size="small" fluid
@@ -79,26 +81,35 @@ const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
                                                                 ev-$change:value={keywords.set}
                                                                 clearable
                                                             >
-                                                                <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+                                                                <b:suffix><Icon class="k-icon-search" /></b:suffix>
                                                             </Input>
                                                         </div>
                                                         <div class="k-table-group-body">
                                                             <DropdownItem v-for={filteredGroup.value}
-                                                                ev-select={() => onSelect($value.value, groupValue, onChange)}
+                                                                ev-select={() => onSelect($value.value, onChange)}
                                                                 hideOnSelect={!multiple}
-                                                                class={{'k-active': (checked = isChecked($value.value, groupValue))}}
+                                                                class={{'k-active': (checked = isChecked($value.value))}}
                                                             >
                                                                 <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
                                                                 <span v-else>{$value.label}</span>
                                                             </DropdownItem>
                                                         </div>
+                                                        <div class="k-table-group-footer" v-if={multiple}>
+                                                            <Button type="none" size="small"
+                                                                disabled={isEmptyValue(localGroupValue.value)}
+                                                                ev-click={reset}
+                                                            >重置</Button>
+                                                            <Button type="primary" size="small"
+                                                                ev-click={() => confirm(onChange)}
+                                                            >确定</Button>
+                                                        </div>
                                                     </DropdownMenu>
                                                 </Dropdown>
                                                 <div v-if={sortable}
                                                     class={{'k-column-sort': true, [`k-${type}`]: type}}
                                                 >
-                                                    <Icon class="ion-android-arrow-dropup k-asc" />
-                                                    <Icon class="ion-android-arrow-dropdown k-desc" />
+                                                    <Icon class="k-icon-up k-asc" size="mini" />
+                                                    <Icon class="k-icon-down k-desc" size="mini" />
                                                 </div>
                                             </div>
                                         </th>

package/components/table/demos/group.md

@@ -5,9 +5,10 @@ order: 18
 
 分组需要两个`group`来指定：
 
-1. 第一个是`Table`上的`group`属性，该属性指定当前分组的方式，形式为：`{key: ["分组的列的key"], value: ["当前列选择的分组的值"]}`
-2. 第二个是`TableColumn`的`group`属性，该属性指定当前列有哪些可选的分组方式，
-如果该列支持多选，还可以添加`multiple`属性，默认为单选。形式为：`[{label: "分组展示文案", value: "选择后的值"}]`
+1. 第一个是`Table`上的`group`属性，该属性指定当前分组的方式，形式为：`{key: ["分组的列的key"], value: ["当前列选择的分组的值"]}`。
+对于“全部”选项，`value`需要设为空字符串`""`，这样才能在选择“全部”的时候，不高亮筛选按钮
+2. 第二个是`TableColumn`的`group`属性，该属性指定当前列有哪些可选的分组方式，形式为：`[{label: "分组展示文案", value: "选择后的值"}]`。
+如果该列支持多选，还可以添加`multiple`属性，默认为单选
 
 当分组方式改变时，可以监听默认事件`$change:group`来执行自定义分组逻辑
 

package/components/table/demos/title.md

@@ -6,7 +6,7 @@ order: 2
 给表格定义复杂的表头内容，只需要通过`TableColumn` `title`扩展点传入自定义内容即可
 
 ```vdt
-import {Table, TableColumn, Tooltip} from 'kpc';
+import {Table, TableColumn, Tooltip, Icon} from 'kpc';
 
 <Table data={this.get('data')}>
     <TableColumn key="a"
@@ -14,9 +14,9 @@ import {Table, TableColumn, Tooltip} from 'kpc';
         sortable
     >
         <b:title>
-            <span title="自定义表头内容" class="middle title">自定义表头内容</span>
+            <span title="自定义表头内容" class="title">自定义表头内容</span>
             <Tooltip content="tooltip content">
-                <i class="ion-ios-help-outline middle"></i>
+                <Icon class="k-icon-question" />
             </Tooltip>
         </b:title>
     </TableColumn>
@@ -26,8 +26,6 @@ import {Table, TableColumn, Tooltip} from 'kpc';
 
 ```styl
 .k-table
-    .middle
-        vertical-align middle
     .title
         margin-right 8px
 ```

package/components/table/index.spec.ts

@@ -230,13 +230,30 @@ describe('Table', () => {
         const [item1, item2] = dropdown2.querySelectorAll<HTMLElement>('.k-checkbox');
         item1.click();
         await wait();
-        expect(instance.get('multipleGroup')).to.eql({status: ['active']});
+        expect(instance.get('multipleGroup')).to.eql({status: []});
         expect(table2.innerHTML).to.matchSnapshot();
         item2.click();
         await wait();
+        expect(instance.get('multipleGroup')).to.eql({status: []});
+
+        // click confirm
+        const [reset, confirm] = dropdown2.querySelectorAll<HTMLElement>('.k-table-group-footer .k-btn');
+        confirm.click();
+        await wait();
         expect(instance.get('multipleGroup')).to.eql({status: ['active', 'stopped']});
         expect(table2.innerHTML).to.matchSnapshot();
 
+        // click reset
+        dispatchEvent(icon2, 'click');
+        await wait();
+        expect(dropdown2.innerHTML).to.matchSnapshot();
+        reset.click();
+        await wait();
+        expect(dropdown2.innerHTML).to.matchSnapshot();
+        confirm.click();
+        await wait();
+        expect(instance.get('multipleGroup')).to.eql({status: []});
+
         // update group
         instance.set('statusGroup', [{label: 'label', value: 'value'}]);
         dispatchEvent(icon, 'click');

package/components/table/styles.ts

@@ -17,6 +17,7 @@ const defaults = {
     // head
     thead: {
         get bgColor() { return theme.color.bg },
+        get color() { return theme.color.lightBlack },
         padding: `0 5px 0 12px`,
         fontSize: `12px`,
         fontWeight: `bold`,
@@ -37,10 +38,9 @@ const defaults = {
 
     // group
     group: {
-        width: `14px`,
-        gap: `10px`,
-        color: `#a6a6a6`,
+        gap: `8px`,
         menuMaxHeight: '200px',
+        menuMinWidth: '200px',
         get activeColor() { return theme.color.primary },
         headerPadding: `8px`,
         get headerBorder() { return `1px solid ${theme.color.bg}` },
@@ -49,9 +49,9 @@ const defaults = {
     // sort
     sort: {
         iconHeight: `7px`,
-        gap: `10px`,
-        color: `#d0d5d9`,
-        disabledColor: `#ddd`,
+        gap: `8px`,
+        // color: `#d0d5d9`,
+        get enabledColor() { return theme.color.primary },
     },
 
     expandBgColor: '#fdfcff',
@@ -133,10 +133,11 @@ export function makeStyles() {
             display: inline-flex;
             align-items: center;
             max-width: 100%;
-            color: ${theme.color.lightBlack};
+            color: ${table.thead.color};
         }
         .k-table-title-text {
             flex: 1;
+            display: inline-flex;
         }
 
         // tbody
@@ -241,23 +242,7 @@ export function makeStyles() {
 
         // group
         .k-table-group {
-            width: ${table.group.width} !important;
-            height: ${table.group.width} !important;
             margin-left: ${table.group.gap};
-            position: relative;
-            color: ${table.group.color};
-            &:hover {
-                color: ${theme.color.primary};
-            }
-            .k-icon {
-                // position: absolute;
-                // top: -1px;
-                // left: 2px;
-                transition: transform ${table.transition};
-            }
-            &.k-dropdown-open .k-icon {
-                transform: rotate(180deg);
-            }
         } 
 
         // force checkbox / radio vertical align middle
@@ -278,12 +263,11 @@ export function makeStyles() {
                 display: block;
                 height: ${table.sort.iconHeight};
                 line-height: ${table.sort.iconHeight};
-                margin-left: ${table.sort.gap};
-                color: ${table.sort.color};
+                margin: 0 0 1px ${table.sort.gap};
             }
-            &.k-asc .k-icon.k-desc,
-            &.k-desc .k-icon.k-asc {
-                color: ${table.sort.disabledColor};
+            &.k-desc .k-icon.k-desc,
+            &.k-asc .k-icon.k-asc {
+                color: ${table.sort.enabledColor};
             }
         }
 
@@ -379,6 +363,7 @@ export function makeStyles() {
 export function makeGroupMenuStyles() {
     return css`
         max-height: ${table.group.menuMaxHeight};
+        min-width: ${table.group.menuMinWidth} !important;
         overflow: auto;
         .k-dropdown-item.k-active {
             color: ${table.group.activeColor};
@@ -387,5 +372,13 @@ export function makeGroupMenuStyles() {
             padding: ${table.group.headerPadding};
             border-bottom: ${table.group.headerBorder};
         }
+        .k-table-group-footer {
+            text-align: right;
+            border-top: ${table.group.headerBorder};
+            padding: 8px;
+            .k-btn {
+                margin-left: 8px;
+            }
+        }
     `
 }

package/components/table/useGroup.ts

@@ -1,9 +1,10 @@
-import {useInstance} from 'intact';
+import {useInstance, createRef} from 'intact';
 import type {TableColumn, TableColumnGroupItem} from './column';
-import {isNullOrUndefined} from 'intact-shared';
+import {isArray} from 'intact-shared';
 import {toggleArray} from  '../utils';
 import {createContext} from '../context';
 import {useState, watchState} from '../../hooks/useState';
+import type { Dropdown } from '../dropdown';
 
 type ContextValue = {
     groupValue: any
@@ -16,44 +17,50 @@ export function useGroup() {
     const instance = useInstance() as TableColumn;
     const keywords = useState<string>('');
     const filteredGroup = useState<TableColumnGroupItem[] | undefined>(instance.get('group'));
+    const localGroupValue = useState<any>(null); 
+    const dropdownRef = createRef<Dropdown>();
 
     instance.on('$receive:group', (group) => filteredGroup.set(group));
 
-    function onSelect(value: any, groupValue: any, onChange: ContextValue['onChange']) {
+    function onShow(groupValue: any) {
+        keywords.set('');
+        localGroupValue.set(groupValue);
+    }
+
+    function onSelect(value: any, onChange: ContextValue['onChange']) {
         const {multiple, key} = instance.get();
 
         if (multiple) {
-            value = toggleArray(groupValue, value);
+            // should click confirm button when it is multiple selection
+            localGroupValue.set(toggleArray(localGroupValue.value, value));
+        } else {
+            // change immediately when it is single selection
+            onChange(key, value);
         }
-        onChange(key, value);
     }
 
-    function isChecked(value: any, groupValue: any) {
+    function isChecked(value: any) {
         const {multiple} = instance.get();
+        const groupValue = localGroupValue.value;
         if (multiple) {
             return groupValue && groupValue.includes(value);
         }
         return groupValue === value;
     }
 
-    function getGroupText(groupValue: any) {
-        let {multiple, group} = instance.get();
-
-        if (isNullOrUndefined(groupValue)) return null;
-        if (!multiple) {
-            groupValue = [groupValue];
-        }
+    function confirm(onChange: ContextValue['onChange']) {
+        const {key} = instance.get();
+        onChange(key, localGroupValue.value);
+        dropdownRef.value!.hide(true);
+    }
 
-        if (group) {
-            const ret = group.filter(item => groupValue.includes(item.value))
-                .map(item => item.label)
-                .join(', ');
-            if (ret) {
-                return `(${ret})`;
-            }
-        }
+    function reset() {
+        localGroupValue.set([]);
+    }
 
-        return null;
+    function isEmptyValue(groupValue: any) {
+        const {multiple} = instance.get();
+        return !groupValue || multiple && (!isArray(groupValue) || groupValue.every(value => !value));
     }
 
     watchState(keywords, (v) => {
@@ -69,5 +76,16 @@ export function useGroup() {
         }
     });
 
-    return {onSelect, isChecked, getGroupText, keywords, filteredGroup};
+    return {
+        onSelect,
+        isChecked,
+        keywords,
+        filteredGroup,
+        onShow,
+        reset,
+        confirm,
+        dropdownRef,
+        localGroupValue,
+        isEmptyValue,
+    };
 }

package/components/tabs/index.vdt

@@ -1,6 +1,7 @@
 import {Button} from '../button';
 import {getRestProps} from '../utils';
 import {makeStyles} from './styles';
+import {Icon} from '../icon';
 
 const {className, children, vertical, size, type} = this.get();
 const {
@@ -25,7 +26,7 @@ const classNameObj = {
         disabled={!enablePrev.value}
         ev-click={prev}
     >
-        <i class={vertical ? "ion-ios-arrow-up" : "ion-ios-arrow-left"}></i>
+        <Icon class={vertical ? "k-icon-up" : "k-icon-left"} />
     </Button>
     <div class="k-tabs-scroll c-clearfix" ref={scrollRef}>
         <div class="k-tabs-wrapper"
@@ -43,6 +44,6 @@ const classNameObj = {
         disabled={!enableNext.value}
         ev-click={next}
     >
-        <i class={vertical ? "ion-ios-arrow-down" : "ion-ios-arrow-right"}></i>
+        <Icon class={vertical ? "k-icon-down" : "k-icon-right"} />
     </Button>
 </div>

package/components/tag/index.md

@@ -27,8 +27,39 @@ sidebar: doc
 | nowrap |  是否单行展示标签组，超出的部分会隐藏，仅展示隐藏数量 | `boolean` | `flase` |
 | draggable | 标签是否支持拖动排序 | `boolean` | `false` |
 
+# 扩展点
+
+## Tags
+
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| append | 追加到后面的元素，不参与到`Tags`对`Tag`的管理中  | - |
+
+
 # 事件
 
+## Tag
+
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | close | 标签关闭事件 | `(e: MouseEvent) => void` |
+
+## Tags
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| dragstart | 拖动开始 | `(v: TagsDragStartParam) => void` |
+| dragend | 拖动结束 | `(v: TagsDragEndParam) => void` |
+
+```ts
+type Key = string | number
+
+export type TagsDragStartParam = {
+    key: Key
+    from: number
+}
+
+export type TagsDragEndParam = TagsDragStartParam & {
+    to: number
+} 
+```

package/components/tag/styles.ts

@@ -155,12 +155,12 @@ export function makeTagsStyles() {
         overflow: hidden;
         &.k-nowrap {
             flex-wrap: nowrap;
-        }
-        .k-tag {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            flex-shrink: 0;
+            .k-tag {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex-shrink: 0;
+            }
         }
         .k-tags-more {
             cursor: default;

package/components/tag/tags.vdt

@@ -46,4 +46,5 @@ const vNodes = children.value;
             <div class={classNameObj}>{hiddenChildren.value}</div>
         </b:content>
     </Tooltip>
+    <b:append />
 </div>

package/components/tag/useNowrap.ts

@@ -32,7 +32,7 @@ export function useNowrap(originVNodes: State<VNode[]>) {
     useResizeObserver(containerRef, refresh);
 
     function refresh() {
-        if (!instance.get('nowrap')) return;
+        if (!instance.get('nowrap') || instance.$unmounted) return;
 
         const container = containerRef.value!;
         const containerWidth = container.offsetWidth;

package/components/transfer/index.vdt

@@ -5,6 +5,7 @@ import {Input} from '../input';
 import {Checkbox} from '../checkbox';
 import {Button} from '../button';
 import {Tree} from '../tree';
+import {Icon} from '../icon';
 
 const {
     data, className, keyName, labelName, 
@@ -45,7 +46,7 @@ const Panel = (model) => {
                 size="small"
             >
                 <b:prefix>
-                    <i class="ion-ios-search"></i>
+                    <Icon class="k-icon-search" size="small" />
                 </b:prefix>
             </Input>
         </b:filter>
@@ -83,7 +84,7 @@ const Panel = (model) => {
             type="primary"
             size="large"
         >
-            <i class="k-transfer-icon ion-ios-arrow-left" />
+            <Icon class="k-transfer-icon k-icon-left" />
         </Button>
         <Button circle icon 
             disabled={!enableAdd()}
@@ -91,7 +92,7 @@ const Panel = (model) => {
             type="primary"
             size="large"
         >
-            <i class="k-transfer-icon ion-ios-arrow-right" />
+            <Icon class="k-transfer-icon k-icon-right" />
         </Button>
     </div>
     {Panel('right')}

package/components/types.ts

@@ -8,6 +8,7 @@ export interface CommonInputHTMLAttributes {
     form?: string
     name?: string
     required?: boolean
+    maxlength?: string | number
     // value?: string
 }
 

package/components/upload/index.vdt

@@ -43,12 +43,12 @@ const handle = (
                     {_$('点击上传')}
                 </Button>
                 <div class="k-upload-area" v-else>
-                    <Icon class="k-icon-add-big" />
+                    <Icon class="k-icon-add-bold" />
                     <div innerHTML={_$('将文件拖到此处，或<a>点击上传</a>')}></div>
                 </div>
             </template>
             <div v-else class="k-upload-picture-card k-upload-add">
-                <Icon class="k-icon-add-big" size="large" />
+                <Icon class="k-icon-add-bold" size="large" />
                 <div>{_$('上传图片')}</div>
             </div>
         </b:content>
@@ -129,10 +129,10 @@ const {show, close, image, isShow} = this.showImage;
                     <div class="k-upload-name c-ellipsis">
                         <Icon class="k-upload-file-icon ion-document" />
                         <span class="k-upload-file-name">{$value.name}</span>
-                        <Icon class="k-upload-status-icon ion-ios-checkmark-outline" 
+                        <Icon class="k-upload-status-icon k-icon-success-fill" 
                             v-if={$value.status === UploadFileStatus.Done}
                         />
-                        <Icon class="k-upload-status-icon ion-ios-close-outline"
+                        <Icon class="k-upload-status-icon k-icon-error-fill"
                             v-else-if={$value.status === UploadFileStatus.Error}
                         />
                     </div>

package/es/components/button/styles.d.ts

@@ -24,7 +24,7 @@ declare const defaults: {
     link: {
         readonly color: string;
         readonly hoverColor: string;
-        readonly hoverBgColor: string;
+        hoverBgColor: string;
     };
     none: {
         readonly hoverBgColor: string;

package/es/components/button/styles.js

@@ -7,7 +7,7 @@ export var types = ['primary', 'warning', 'danger', 'active', 'success'];
 var sizes = ['large', 'small', 'mini'];
 var btnStyles = {
   get color() {
-    return theme.color.lightBlack;
+    return theme.color.text;
   },
 
   bgColor: '#fff',
@@ -181,9 +181,7 @@ var defaults = deepDefaults({
       return theme.color.linkHover;
     },
 
-    get hoverBgColor() {
-      return theme.color.hoverBg;
-    }
+    hoverBgColor: 'transparent' // get hoverBgColor() { return theme.color.hoverBg },
 
   },
   none: {
@@ -238,7 +236,7 @@ export function makeButtonStyles(_ref) {
   css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.k-icon{color:inherit;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
     return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link,&.k-flat{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}&.k-flat{background:", button.none.hoverBgColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-none,&.k-link,&.k-flat{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}&.k-flat{background:", button.none.hoverBgColor, ";}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none.k-disabled,&.k-link.k-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.k-btn-icon{width:", styles.height, ";}}");
   }), "&.k-btn-icon{width:", button.height, ";padding:0;.k-icon{margin:0;}}&.k-fluid{width:100%;padding:0;}&.k-circle{border-radius:calc(", button.large.height, " / 2);}&.k-loading{", _mapInstanceProperty(types).call(types, function (type) {

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

@@ -7,10 +7,10 @@ import { Icon } from '../icon';
 import { makeStyles } from './styles';
 import { linkEvent } from 'intact';
 var _$tmp0 = {
-  'className': 'ion-ios-arrow-left'
+  'className': 'k-icon-left'
 };
 var _$tmp1 = {
-  'className': 'ion-ios-arrow-right'
+  'className': 'k-icon-right'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

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

@@ -11,7 +11,7 @@ var _$tmp0 = {
   'rotate': true
 };
 var _$tmp1 = {
-  'className': 'k-cascader-arrow ion-ios-arrow-right'
+  'className': 'k-cascader-arrow k-icon-right'
 };
 var _$tmp2 = {
   'className': 'k-cascader'

package/es/components/collapse/item.vdt.js

@@ -39,7 +39,7 @@ export default function ($props, $blocks, $__proto__) {
 
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['title'](_$no)), _$cc(Icon, {
-    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['ion-ios-arrow-right'] = true, _$cn2)),
+    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['k-icon-right'] = true, _$cn2)),
     'hoverable': !disabled
   })], 0, _$cn(kls('title')), {
     'ev-click': this.toggle