@king-design/intact 3.3.2 → 3.4.0-beta.0

package/components/table/index.spec.ts

@@ -15,6 +15,7 @@ import ScrollToRowDemo from '~/components/table/demos/scrollToRow';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
 import {Component} from 'intact';
 import {Table, TableColumn} from './';
+import { bind } from '../utils';
 import DraggableTable from '~/components/table/demos/draggable';
 import MergeCellDemo from '~/components/table/demos/mergeCell';
 import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
@@ -186,6 +187,68 @@ describe('Table', () => {
         expect(table2.outerHTML).to.matchSnapshot();
     });
 
+    it('append a row in merged table', async () => {
+        let uniqueId = 0;
+        class Demo extends Component<{data: any[]}> {
+            static template = `
+                const {Table, TableColumn} = this;
+                const { data } = this.get();
+                <Table data={data} merge={this.merge} rowKey={data => data.uniqueId} animation={false}>
+                    <TableColumn title="名称" key="Name" />
+                    <TableColumn title="头衔" key="Title" />
+                    <TableColumn title="uniqueId" key="uniqueId" />
+                </Table>
+            `
+
+            private Table = Table;
+            private TableColumn = TableColumn;
+
+            static defaults() {
+                return {
+                    data: [
+                        {
+                            Name: '刘备',
+                            Title: '大哥',
+                            uniqueId: 0, 
+                        },
+                    ]
+                }
+            }
+
+            @bind
+            merge(row: any, column: any, rowIndex: number, columnIndex: number) {
+                const { data } = this.get();
+                for (let i = 0; i < data.length; i++) {
+                    const mergeIndex = data.findIndex((item: any, index: number) => {
+                        return index > i && item.Name !== data[i]?.Name;
+                    });
+                    const allSame = data.every((item: any, index: number) => {
+                        if (index > i) {
+                            return item.Name === data[i].Name;
+                        }
+                        return true;
+                    });
+                    if ([0, 1, 2].includes(columnIndex) && rowIndex === i) {
+                        if (mergeIndex === -1 && allSame) {
+                            return { rowspan: data.length - i };
+                        }
+                        if (mergeIndex > -1) {
+                            return { rowspan: mergeIndex - i };
+                        }
+                    }
+                }
+            }
+        }
+
+        const [instance, element] = mount(Demo);
+
+        const { data } = instance.get();
+        instance.set('data', [...data, { ...data[data.length - 1], uniqueId: ++uniqueId }]);
+
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+
     it('sort', async () => {
         const [instance, element] = mount(SortDemo);
 

package/components/table/styles.ts

@@ -313,10 +313,13 @@ export const makeStyles = cache(function makeStyles(k: string) {
             background: ${table.selectedBgColor};
         }
 
-        // tree
-        // tr.${k}-hidden {
-            // display: none;
+        // hidden cell
+        // col.${k}-hidden, tr > .${k}-hidden {
+        //     display: none;
         // }
+        .${k}-hidden {
+            display: none;
+        }
         .${k}-table-arrow {
             width: ${table.arrow.width} !important;
             margin-right: ${table.arrow.gap};

package/components/table/table.vdt

@@ -57,7 +57,10 @@ const colgroup = (
         <col v-for={cols} 
             width={$value.width}
             style={{width: getWidth($value.key)}}
-            class={{[$value.className]: $value.className}}
+            class={{
+                [`${k}-hidden`]: $value.hidden,
+                [$value.className]: $value.className
+            }}
         />
     </colgroup>
 );
@@ -176,7 +179,6 @@ const tbody = (
                             </Tooltip>
                         );
                     }
-
                     rows.push(row);
                     if ($blocks.expand) {
                         const expanded = isExpanded(key);

package/components/table/useChecked.ts

@@ -210,7 +210,8 @@ export function useChecked(
         instance.trigger(isChecked ? 'checkRow' : 'uncheckRow', data.value![rowIndex], rowIndex, key);
     }
 
-    instance.on('$receive:children', updateAllCheckedStatus);
+    // instance.on('$receive:children', updateAllCheckedStatus);
+    useReceive(['children'], updateAllCheckedStatus);
     instance.on('$change:checkedKeys', updateAllCheckedStatus);
     // for draggable
     watchState(data, updateAllCheckedStatus);

package/components/table/useColumns.ts

@@ -84,7 +84,7 @@ export function useColumns() {
             props.children = null;
             props.cols = 1;
             cols.push(props);
-            maxCols++;
+            if(!props.hidden) maxCols++;
             Object.defineProperty(props, 'rows', {
                 get() {
                     return maxRows - row;

package/components/table/useDisableRow.ts

@@ -2,6 +2,7 @@ import {useInstance} from 'intact';
 import type {Table, TableRowKey, TableCheckType} from './table';
 import type {useTree} from './useTree';
 import { State, watchState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
 
 export function useDisableRow(
     loopData: ReturnType<typeof useTree>['loopData'],
@@ -48,7 +49,8 @@ export function useDisableRow(
         return allKeys;
     }
 
-    instance.on('$receive:children', setDisabledKeys);
+    // instance.on('$receive:children', setDisabledKeys);
+    useReceive(['children'], setDisabledKeys);
     watchState(data, setDisabledKeys);
 
     return {isDisabled, getEnableKeys, isDisabledKey, getAllKeys};

package/components/table/useMerge.ts

@@ -2,6 +2,7 @@ import {useInstance, Props} from 'intact';
 import type {Table, TableRowKey, TableCheckType} from './table';
 import type {TableColumnProps} from './column';
 import { State, watchState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
 
 export type TableMerge<T = any, CheckType = 'checkbox'> = (
     row: T,
@@ -100,7 +101,11 @@ export function useMerge(
         return grid;
     }
 
-    instance.on('$receive:children', handleSpans);
+    /**
+     * https://github.com/ksc-fe/kpc/issues/1008
+     */
+    // instance.on('$receive:children', handleSpans);
+    useReceive(['children'], handleSpans);
     watchState(data, handleSpans);
 
     return {getGrid};

package/components/utils.ts

@@ -293,9 +293,28 @@ export function strPad(str: number | string, length: number, pad: string = '0')
     return str;
 }
 
+/**
+ * 在vue3.0中，数组会转成Proxy对象，需要获取原始数据比较
+ * https://github.com/ksc-fe/kpc/issues/985
+ * https://github.com/vuejs/core/blob/main/packages/reactivity/src/reactive.ts
+ */
+const RAW = '__v_raw';
+function isProxy(value: any): boolean {
+    return value ? !!value[RAW] : false
+}
+function toRaw<T>(observed: T): T {
+    const raw = observed && (observed as any)[RAW]
+    return raw ? toRaw(raw) : observed
+}
 type EqualArrayValue = any | EqualArrayValue[]
 export function isEqualArray(a: EqualArrayValue, b: EqualArrayValue): boolean {
     if (a === b) return true;
+
+    // for vue3.0 Proxy object
+    if (isProxy(a)) a = toRaw(a);
+    if (isProxy(b)) b = toRaw(b);
+    if (a === b) return true;
+
     if (Array.isArray(a) && Array.isArray(b)) {
         if (a.length !== b.length) return false;
         return a.every((value, index) => isEqualArray(value, b[index]));

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

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

package/es/components/button/group.js

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

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

@@ -18,6 +18,7 @@ export interface ButtonProps extends ButtonHTMLAttributes {
     size?: Sizes;
     icon?: boolean;
     circle?: boolean;
+    color?: string;
     loading?: boolean;
     disabled?: boolean;
     fluid?: boolean;

package/es/components/button/index.js

@@ -12,6 +12,7 @@ var typeDefs = {
   size: ['large', 'default', 'small', 'mini'],
   icon: Boolean,
   circle: Boolean,
+  color: String,
   loading: Boolean,
   disabled: Boolean,
   fluid: Boolean,

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

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createUnknownComponentVNode as _$cc, className as _$cn, createElementVNode as _$ce } from 'intact';
-import { getRestProps } from '../utils';
+import { addStyle, 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;
+  var _classNameObj, _buttonGroup$get;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
@@ -27,7 +27,9 @@ export default function ($props, $blocks, $__proto__) {
     loading = _this$get.loading,
     disabled = _this$get.disabled,
     name = _this$get.name,
-    ghost = _this$get.ghost;
+    ghost = _this$get.ghost,
+    color = _this$get.color,
+    style = _this$get.style;
   var _this$config = this.config,
     cls = _this$config.cls,
     k = _this$config.k;
@@ -53,7 +55,7 @@ export default function ($props, $blocks, $__proto__) {
       }
     });
   }
-  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = true, _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = !color, _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[cls('custom')] = color, _classNameObj[makeButtonStyles(k, iconSide, color)] = true, _classNameObj);
   var loadingIcon = _$cc(Icon, {
     'className': _$cn("ion-load-c " + k + "-icon-loading"),
     'size': size /*loadingSizeMap[size]*/,
@@ -61,10 +63,14 @@ export default function ($props, $blocks, $__proto__) {
     'rotate': true
   }, 'k-loading');
   var buttonGroup = this.buttonGroup;
-  var checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
+  var checkType = (_buttonGroup$get = buttonGroup == null ? void 0 : buttonGroup.get('checkType')) != null ? _buttonGroup$get : 'none';
+  var btnWidth = buttonGroup == null ? void 0 : buttonGroup.get('btnWidth');
+  var _style = {
+    width: typeof btnWidth === 'number' ? btnWidth + "px" : btnWidth
+  };
   var isCheckType = checkType !== 'none';
   var typeStyles = theme[type];
-  var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
+  var waveColor = typeStyles && typeStyles.borderColor || color || theme.primary.borderColor;
   return _$cc(Wave, {
     'disabled': loading || disabled || type === 'none' || type === 'link',
     'inset': type === 'flat' ? '-1px' : '-2px',
@@ -73,6 +79,7 @@ export default function ($props, $blocks, $__proto__) {
       'className': _$cn(classNameObj),
       'tagName': tagName
     }, getRestProps(this), {
+      'style': btnWidth ? addStyle(style, _style) : style,
       'ref': this.elementRef,
       'tabindex': disabled || loading ? '-1' : tabindex,
       'ev-click': this.onClick,

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

@@ -84,7 +84,7 @@ declare const defaults: {
 declare let button: typeof defaults;
 export { button };
 export declare const makeButtonStyles: {
-    (k: string, iconSide?: string | undefined): string;
+    (k: string, iconSide?: string | undefined, color?: string | undefined): string;
     clearCache(): {};
 };
 export declare const makeButtonGroupStyles: {

package/es/components/button/styles.js

@@ -190,7 +190,7 @@ setDefault(function () {
   makeButtonGroupStyles == null || makeButtonGroupStyles.clearCache();
 });
 export { button };
-export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
+export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide, color) {
   var _button = button,
     secondary = _button.secondary,
     link = _button.link;
@@ -200,7 +200,7 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
   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;}&.", k, "-default,&.", k, "-none,&.", k, "-flat{.", k, "-icon{color:", theme.color.lightBlack, ";}&:hover{.", 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, "-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{.", k, "-icon{color:inherit;}&,&: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) {
+  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}", color && /*#__PURE__*/css("&.", k, "-custom{color:", color, ";border-color:", color, ";&:hover,&:focus{background:", palette(color, -4), ";}&:active{background:", palette(color, -3), ";}}"), " &.", 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{.", k, "-icon{color:inherit;}&,&: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) {
@@ -211,7 +211,7 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
       ghostColor = _button$type.ghostColor,
       borderColor = _button$type.borderColor;
     return /*#__PURE__*/css("&.", k, "-", type, "{color:", ghostColor, ";border-color:", borderColor, ";&:hover{color:", palette(ghostColor, -1), ";border-color:", palette(ghostColor, -1), ";}&:active{color:", palette(ghostColor, 1), ";border-color:", palette(ghostColor, 1), ";}}");
-  }), "&.", k, "-disabled{&,&:hover{color:", button.disabled.color, ";border-color:", button.disabled.ghostBorderColor, ";background:transparent;}}}"),
+  }), " ", color && /*#__PURE__*/css("&.", k, "-custom{color:", color, ";border-color:", color, ";&:hover{color:", palette(color, -1), ";border-color:", palette(color, -1), ";}&:active{color:", palette(color, 1), ";border-color:", palette(color, 1), ";}}"), "&.", k, "-disabled{&,&:hover{color:", button.disabled.color, ";border-color:", button.disabled.ghostBorderColor, ";background:transparent;}}}"),
   /*#__PURE__*/
   // dynamic styles
   css(".", k, "-icon{", iconSide === 'right' ? "margin-left: " + button.icon.gap + ";" : "margin-right: " + button.icon.gap + ";", ";}", !iconSide && /*#__PURE__*/css("&.", k, "-loading{&:not(.", k, "-btn-icon){padding-left:calc(", getLeft(button.padding), " + 1em);", _mapInstanceProperty(sizes).call(sizes, function (size) {

package/es/components/dialog/alert.vdt.js

@@ -34,8 +34,8 @@ export default function ($props, $blocks, $__proto__) {
     }), (_$blocks['body'] = function ($super) {
       var _ref;
       return [_$ce(2, 'div', [!hideIcon && !icon ? _$cc(Icon, {
-        'className': _$cn(iconClassName || (_ref = {}, _ref[k + "-icon-success-fill"] = type === 'success', _ref[k + "-icon-warning-fill"] = type === 'warning', _ref[k + "-icon-error-fill"] = type === 'error', _ref[k + "-icon-question-fill"] = type === 'confirm', _ref)),
-        'color': type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type
+        'className': _$cn(iconClassName || (_ref = {}, _ref[k + "-icon-success-fill"] = type === 'success', _ref[k + "-icon-warning-fill"] = type === 'warning' || type === 'confirm', _ref[k + "-icon-error-fill"] = type === 'error', _ref)),
+        'color': type === 'error' ? 'danger' : type === 'confirm' ? 'warning' : type
       }) : undefined, icon], 0, _$cn(k + "-dialog-tip-icon")), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, _$cn(k + "-alert-dialog-title")) : undefined, content], 0, _$cn(k + "-alert-dialog-wrapper"))];
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];

package/es/components/switch/index.d.ts

@@ -12,6 +12,8 @@ export interface SwitchProps<True = any, False = any> {
     height?: number | string;
     size?: Sizes;
     disabled?: boolean;
+    loading?: boolean;
+    beforeChange?: (value: True | False | undefined) => boolean | Promise<boolean>;
 }
 export interface SwitchEvents {
     click: [MouseEvent];
@@ -32,7 +34,7 @@ export declare class Switch<True = true, False = false> extends Component<Switch
     private onClick;
     private onClickOnHandle;
     private onKeypress;
-    toggle(isKeypress: boolean): void;
+    toggle(isKeypress: boolean): Promise<void>;
     isChecked(): boolean;
     check(): void;
     uncheck(): void;

package/es/components/switch/index.js

@@ -1,4 +1,6 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { __decorate } from "tslib";
 import { Component, createRef } from 'intact';
@@ -17,14 +19,17 @@ var typeDefs = {
   width: [Number, String],
   height: [Number, String],
   size: sizes,
-  disabled: Boolean
+  disabled: Boolean,
+  loading: Boolean,
+  beforeChange: Function
 };
 var defaults = function defaults() {
   return {
     value: false,
     trueValue: true,
     falseValue: false,
-    size: 'default'
+    size: 'default',
+    loading: false
   };
 };
 var events = {
@@ -62,18 +67,65 @@ export var Switch = /*#__PURE__*/function (_Component) {
       this.toggle(true);
     }
   };
-  _proto.toggle = function toggle(isKeypress) {
-    if (this.get('disabled')) return;
-    // if is not keypress, we blur it to remove focus style
-    if (!isKeypress) {
-      this.elementRef.value.blur();
+  _proto.toggle = /*#__PURE__*/function () {
+    var _toggle = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(isKeypress) {
+      var _this$get, disabled, beforeChange, value, ret;
+      return _regeneratorRuntime.wrap(function _callee$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _this$get = this.get(), disabled = _this$get.disabled, beforeChange = _this$get.beforeChange, value = _this$get.value;
+            if (!disabled) {
+              _context2.next = 3;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 3:
+            // if is not keypress, we blur it to remove focus style
+            if (!isKeypress) {
+              this.elementRef.value.blur();
+            }
+            if (!beforeChange) {
+              _context2.next = 15;
+              break;
+            }
+            this.set({
+              disabled: true,
+              loading: true
+            });
+            _context2.prev = 6;
+            _context2.next = 9;
+            return beforeChange(value);
+          case 9:
+            ret = _context2.sent;
+            if (ret) {
+              _context2.next = 12;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 12:
+            _context2.prev = 12;
+            this.set({
+              disabled: false,
+              loading: false
+            });
+            return _context2.finish(12);
+          case 15:
+            if (this.isChecked()) {
+              this.uncheck();
+            } else {
+              this.check();
+            }
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee, this, [[6,, 12, 15]]);
+    }));
+    function toggle(_x) {
+      return _toggle.apply(this, arguments);
     }
-    if (this.isChecked()) {
-      this.uncheck();
-    } else {
-      this.check();
-    }
-  };
+    return toggle;
+  }();
   _proto.isChecked = function isChecked() {
     return this.get('value') === this.get('trueValue');
   };

package/es/components/switch/index.spec.js

@@ -4,6 +4,7 @@ import BasicDemo from '~/components/switch/demos/basic';
 import DisabledDemo from '~/components/switch/demos/disabled';
 import ValueDemo from '~/components/switch/demos/value';
 import WidthHeightDemo from '~/components/switch/demos/widthHeight';
+import BeforeChangeDemo from '~/components/switch/demos/beforeChange';
 import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 describe('Switch', function () {
   afterEach(function () {
@@ -239,4 +240,24 @@ describe('Switch', function () {
       }
     }, _callee6);
   })));
+  it('beforeChange', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, instance, element, _element$querySelecto5, el1, el2;
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _mount7 = mount(BeforeChangeDemo), instance = _mount7[0], element = _mount7[1];
+          _element$querySelecto5 = element.querySelectorAll('.k-switch'), el1 = _element$querySelecto5[0], el2 = _element$querySelecto5[1];
+          el1.click();
+          el2.click();
+          _context7.next = 6;
+          return wait(1000);
+        case 6:
+          expect(instance.get('value1')).to.be.true;
+          expect(instance.get('value2')).to.be.false;
+        case 8:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
 });

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

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _Object$assign from "@babel/runtime-corejs3/core-js/object/assign";
-import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, isChecked as _$isc, linkEvent as _$le, setCheckboxModel as _$scm, noop as _$no } from 'intact';
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, isChecked as _$isc, linkEvent as _$le, setCheckboxModel as _$scm, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact';
 import { makeStyles } from './styles';
 import { addStyle, getRestProps } from '../utils';
+import { Icon } from '../icon';
 var _$tmp0 = {
   'src': 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
 };
@@ -25,7 +26,8 @@ export default function ($props, $blocks, $__proto__) {
     width = _this$get.width,
     height = _this$get.height,
     size = _this$get.size,
-    disabled = _this$get.disabled;
+    disabled = _this$get.disabled,
+    loading = _this$get.loading;
   var _this$draggable = this.draggable,
     start = _this$draggable.start,
     dragging = _this$draggable.dragging,
@@ -36,6 +38,7 @@ export default function ($props, $blocks, $__proto__) {
   var onStyle;
   var offStyle;
   var barStyle;
+  var iconStyle;
   if (width || height) {
     var _style = {};
     onStyle = {};
@@ -60,6 +63,9 @@ export default function ($props, $blocks, $__proto__) {
       barStyle = {
         width: value === trueValue ? '100%' : height + "px"
       };
+      iconStyle = {
+        fontSize: height * 0.7 + "px"
+      };
     }
     style = addStyle(style, _style);
   }
@@ -106,10 +112,14 @@ export default function ($props, $blocks, $__proto__) {
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['on'](_$no)), 0, _$cn(k + "-switch-on"), {
     'style': onStyle
-  }) : undefined, _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'img', null, 1, null, _$tmp0), 2, _$cn(k + "-switch-handle"), {
+  }) : undefined, _$ce(2, 'div', [loading ? _$cc(Icon, {
+    'className': _$cn(k + "-switch-icon ion-load-c"),
+    'rotate': true,
+    'style': iconStyle
+  }) : undefined, _$ce(2, 'div', _$ce(2, 'img', null, 1, null, _$tmp0), 2, _$cn(k + "-switch-handle"), {
     'ev-click': this.onClickOnHandle,
     'ev-mousedown': start
-  }), 2, _$cn(k + "-switch-wrapper"))], 0, _$cn(k + "-switch-bar"), {
+  })], 0, _$cn(k + "-switch-wrapper"))], 0, _$cn(k + "-switch-bar"), {
     'style': barStyle
   }, null, barRef)]);
 }

package/es/components/switch/styles.js

@@ -34,25 +34,29 @@ var defaults = {
   default: {
     width: "45px",
     height: "24px",
-    padding: "3px"
+    padding: "3px",
+    iconSize: "16px"
   },
   // large
   large: {
     width: "58px",
     height: "30px",
-    padding: "3px"
+    padding: "3px",
+    iconSize: "20px"
   },
   // small
   small: {
     width: "30px",
     height: "16px",
-    padding: "2px"
+    padding: "2px",
+    iconSize: "10px"
   },
   // mini
   mini: {
     width: "18px",
     height: "10px",
-    padding: "1px"
+    padding: "1px",
+    iconSize: "6px"
   },
   // disabled
   get disabledBgColor() {
@@ -67,11 +71,12 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;box-sizing:content-box;transition:background ", kswitch.transition, ";input{opacity:0;position:absolute;}.", k, "-switch-bar,.", k, "-switch-off{box-sizing:border-box;}.", k, "-switch-bar{position:absolute;text-align:right;overflow:hidden;}.", k, "-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.", k, "-switch-bar,.", k, "-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", kswitch.transition, ";}&:hover{&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.hoverBgColor, ";}}.", k, "-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", kswitch.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.", k, "-switch-on,.", k, "-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.", k, "-dragging{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.bgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;box-sizing:content-box;transition:background ", kswitch.transition, ";input{opacity:0;position:absolute;}.", k, "-switch-bar,.", k, "-switch-off{box-sizing:border-box;}.", k, "-switch-bar{position:absolute;text-align:right;overflow:hidden;}.", k, "-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.", k, "-switch-bar,.", k, "-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", kswitch.transition, ";}&:hover{&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.hoverBgColor, ";}}.", k, "-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", kswitch.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.", k, "-switch-icon{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}.", k, "-switch-on,.", k, "-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.", k, "-dragging{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.bgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var _kswitch$size = kswitch[size],
       width = _kswitch$size.width,
       height = _kswitch$size.height,
-      padding = _kswitch$size.padding;
-    return /*#__PURE__*/css("&.", k, "-", size, ",&.", k, "-", size, " .", k, "-switch-on,&.", k, "-", size, " .", k, "-switch-off{width:", width, ";height:", height, ";}&.", k, "-", size, "{border-radius:", height, ";.", k, "-switch-bar{width:", height, ";border-radius:", height, ";}.", k, "-switch-wrapper{padding:", padding, ";}.", k, "-switch-on,.", k, "-switch-off{line-height:", height, ";left:0;}.", k, "-switch-on{padding:0 ", height, " 0 calc(", height, " / 3);}.", k, "-switch-off{padding:0 calc(", height, " / 3) 0 ", height, ";}}");
+      padding = _kswitch$size.padding,
+      iconSize = _kswitch$size.iconSize;
+    return /*#__PURE__*/css("&.", k, "-", size, ",&.", k, "-", size, " .", k, "-switch-on,&.", k, "-", size, " .", k, "-switch-off{width:", width, ";height:", height, ";}&.", k, "-", size, "{border-radius:", height, ";.", k, "-switch-bar{width:", height, ";border-radius:", height, ";}.", k, "-switch-wrapper{padding:", padding, ";}.", k, "-switch-on,.", k, "-switch-off{line-height:", height, ";left:0;}.", k, "-switch-on{padding:0 ", height, " 0 calc(", height, " / 3);}.", k, "-switch-off{padding:0 calc(", height, " / 3) 0 ", height, ";}.", k, "-switch-icon{font-size:", iconSize, ";}}");
   }), "&.", k, "-checked{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.bgColor, ";}.", k, "-switch-bar{width:100%;}&:hover{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.hoverBgColor, ";}}}&.", k, "-disabled{&,.", k, "-switch-handle{cursor:not-allowed;}&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.disabledBgColor, ";}&.", k, "-checked{&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.disabledBgColor, ";}}}");
 });