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

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,12 @@ 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;
+            line-height: 1.4;
         }
 
         // tbody
@@ -241,23 +243,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 +264,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 +364,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 +373,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/table.ts

@@ -140,6 +140,7 @@ const defaults = (): Partial<TableProps> => ({
     indent: 32,
     minColWidth: 40,
     animation: true,
+    showIndeterminate: true,
 });
 
 const events: Events<TableEvents> = {

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,51 @@ 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(onChange: ContextValue['onChange']) {
+        localGroupValue.set([]);
+        confirm(onChange);
+    }
 
-        return null;
+    function isEmptyValue(groupValue: any) {
+        const {multiple} = instance.get();
+        return !groupValue || multiple && (!isArray(groupValue) || groupValue.every(value => !value));
     }
 
     watchState(keywords, (v) => {
@@ -69,5 +77,16 @@ export function useGroup() {
         }
     });
 
-    return {onSelect, isChecked, getGroupText, keywords, filteredGroup};
+    return {
+        onSelect,
+        isChecked,
+        keywords,
+        filteredGroup,
+        onShow,
+        reset,
+        confirm,
+        dropdownRef,
+        localGroupValue,
+        isEmptyValue,
+    };
 }

package/components/tabs/demos/closable.md

@@ -30,7 +30,7 @@ import {Tabs, Tab, Button, ButtonGroup, Icon} from 'kpc';
             key={$value.value}
             closable={$value.value !== 10}
         >
-            <Icon class="k-icon-paper" size={this.get('size')} style="margin-right: 8px;" />
+            <Icon class="k-icon-paper" size={this.get('size')} style="margin-right: 8px;" color="inherit" />
             {$value.label}
         </Tab>
     </Tabs>

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/tip/styles.ts

@@ -9,7 +9,7 @@ const defaults = {
         gap: '8px',
         fontWeight: '500'
     },
-    get color() { return theme.color.title },
+    get color() { return theme.color.text },
     get padding() { return `6px ${theme.default.padding}` },
 };
 

package/components/tooltip/index.spec.ts

@@ -8,6 +8,7 @@ import {Tooltip} from './';
 import {Dialog} from '../dialog';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
 import { tooltip as tooltipTheme } from './styles';
+import { Select, Option } from '../select';
 
 describe('Tooltip', () => {
     afterEach((done) => {
@@ -378,4 +379,33 @@ describe('Tooltip', () => {
         const newWidth = content.offsetWidth;
         expect(newWidth).to.eql(width);
     });
+
+    it('should not impact select when wrap select with tooltip', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Tooltip, Select, Option} = this;
+                <Tooltip>
+                    <Select>
+                        <Option value="1">Option 1</Option>
+                        <Option value="2">Option 2</Option>
+                    </Select>
+                </Tooltip>
+            `
+            private Tooltip = Tooltip;
+            private Select = Select;
+            private Option = Option;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'mouseenter');
+        await wait();
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const menu = getElement(".k-select-menu")!;
+        dispatchEvent(element, 'mouseleave');
+        await wait(500);
+
+        expect(menu.style.display).to.eql('');
+    });
 });

package/components/tooltip/tooltip.ts

@@ -86,6 +86,9 @@ export class Tooltip<
         if (this.get('hoverable')) {
             return super.hide(immediately);
         }
+        // tooltip can show any number sub-tooltips, we should not close the showed tooltip
+        // #885
+        this.showedDropdown = null;
         super.hide(true);
     }
 }

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/badge/styles.js

@@ -22,5 +22,5 @@ setDefault(function () {
   }).badge;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:75%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
+  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
 }

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

@@ -4,6 +4,7 @@ export interface ButtonGroupProps {
     value?: any;
     checkType?: 'none' | 'radio' | 'checkbox';
     fluid?: boolean;
+    seperate?: boolean;
 }
 export declare class ButtonGroup extends Component<ButtonGroupProps> {
     static template: string | import("intact").Template<any>;

package/es/components/button/group.js

@@ -7,7 +7,8 @@ var typeDefs = {
   vertical: Boolean,
   value: null,
   fluid: Boolean,
-  checkType: ['none', 'radio', 'checkbox']
+  checkType: ['none', 'radio', 'checkbox'],
+  seperate: Boolean
 };
 
 var defaults = function defaults() {

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

@@ -13,12 +13,14 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       vertical = _this$get.vertical,
       children = _this$get.children,
-      fluid = _this$get.fluid;
+      fluid = _this$get.fluid,
+      seperate = _this$get.seperate;
 
   var classNameObj = (_classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,
-    'k-fluid': fluid
+    'k-fluid': fluid,
+    'k-seperate': seperate
   }, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles()] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)

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

@@ -78,7 +78,7 @@ export default function ($props, $blocks, $__proto__) {
   var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
   return _$cc(Wave, {
     'disabled': loading || disabled || type === 'none' || type === 'link',
-    'inset': '-2px',
+    'inset': type === 'flat' ? '-1px' : '-2px',
     'color': waveColor,
     'children': _$cc(DynamicButton, _extends({
       'className': _$cn(classNameObj),

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,14 +7,14 @@ 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',
   lineHeight: '1.15',
 
   get padding() {
-    return "0 " + theme.default.padding;
+    return "0 16px";
   },
 
   get borderColor() {
@@ -146,6 +146,13 @@ var btnSizeStyles = sizes.reduce(function (memo, size) {
     }
 
   };
+
+  if (size === 'large') {
+    Object.defineProperty(memo[size], 'padding', {
+      value: "0 24px"
+    });
+  }
+
   return memo;
 }, {});
 var defaults = deepDefaults({
@@ -181,9 +188,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 +243,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) {
@@ -257,13 +262,13 @@ export function makeButtonStyles(_ref) {
   }) + "\n                    }\n                }\n            ", ";"));
 }
 export function makeButtonGroupStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
-  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{>.k-btn{display:block;", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{flex-direction:column;>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
-  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}");
+  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.k-seperate{gap:8px;>.k-btn{border-radius:", button.borderRadius, "!important;}}");
 }

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'