@king-design/react 3.3.2 → 3.3.3

package/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-react').Template<any>;

package/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/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/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/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-react';
-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/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/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/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/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/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-react';
@@ -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/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/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-react';
+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-react';
 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/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, ";}}}");
 });

package/components/table/cell.vdt.js

@@ -5,6 +5,7 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { getTextByChildren } from '../utils';
 export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
@@ -37,6 +38,7 @@ export default function ($props, $blocks, $__proto__) {
     style || (style = {});
     style.paddingLeft = indent + "px";
   }
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-hidden"] = props.hidden, _classNameObj[className] = className, _classNameObj);
   return _$ce(2, 'td', [columnIndex === 0 && hasChildren ? _$cc(Button, {
     'type': 'none',
     'icon': true,
@@ -48,7 +50,7 @@ export default function ($props, $blocks, $__proto__) {
       'className': _$cn(k + "-icon-right"),
       'size': 'small'
     })
-  }) : undefined, children], 0, _$cn(className), {
+  }) : undefined, children], 0, _$cn(classNameObj), {
     'style': style,
     'title': getTextByChildren(children),
     'rowspan': rowspan,

package/components/table/column.d.ts

@@ -12,6 +12,7 @@ export interface TableColumnProps {
     exportTitle?: string;
     exportCell?: (data: any, index: number) => string;
     minWidth?: number;
+    hidden?: boolean;
     cols?: number;
     rows?: number;
     prevVNode?: VNodeComponentClass<TableColumn> | null;

package/components/table/column.js

@@ -20,6 +20,7 @@ var typeDefs = {
   exportTitle: String,
   exportCell: Function,
   minWidth: Number,
+  hidden: Boolean,
   // offset: null,
   cols: null,
   rows: null,

package/components/table/column.vdt.js

@@ -32,7 +32,8 @@ export default function ($props, $blocks, $__proto__) {
     key = _this$get.key,
     sortable = _this$get.sortable,
     cols = _this$get.cols,
-    rows = _this$get.rows;
+    rows = _this$get.rows,
+    hidden = _this$get.hidden;
   var _this$group = this.group,
     onSelect = _this$group.onSelect,
     isChecked = _this$group.isChecked,
@@ -66,7 +67,7 @@ export default function ($props, $blocks, $__proto__) {
                       var _getClassAndStyleForF = getClassAndStyleForFixed(_this.get(), offsetMap[key], k, checkType),
                         className = _getClassAndStyleForF.className,
                         style = _getClassAndStyleForF.style;
-                      var classNameObj = (_classNameObj = {}, _classNameObj[k + "-column-sortable"] = sortable, _classNameObj[className] = className, _classNameObj);
+                      var classNameObj = (_classNameObj = {}, _classNameObj[k + "-column-sortable"] = sortable, _classNameObj[k + "-hidden"] = hidden, _classNameObj[className] = className, _classNameObj);
                       var groupValue = currentGroup && currentGroup[key];
                       var type = sort && sort.key === key && sort.type;
                       var checked;

package/components/table/styles.js

@@ -90,7 +90,7 @@ setDefault(function () {
   makeGroupMenuStyles == null || makeGroupMenuStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
   }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}}");
 });

package/components/table/table.vdt.js

@@ -84,7 +84,7 @@ export default function ($props, $blocks, $__proto__) {
   var onStart = this.resizable.start;
   var colgroup = _$ce(2, 'colgroup', [checkType !== 'none' ? _$ce(2, 'col', null, 1, null, _$tmp0) : undefined, _$ma(cols, function ($value, $key) {
     var _$cn2;
-    return _$ce(2, 'col', null, 1, _$cn((_$cn2 = {}, _$cn2[$value.className] = $value.className, _$cn2)), {
+    return _$ce(2, 'col', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-hidden"] = $value.hidden, _$cn2[$value.className] = $value.className, _$cn2)), {
       'width': $value.width,
       'style': {
         width: getWidth($value.key)

package/components/table/useColumns.js

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

package/components/utils.js

@@ -263,7 +263,24 @@ export function strPad(str, length, pad) {
   }
   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
+ */
+var RAW = '__v_raw';
+function isProxy(value) {
+  return value ? !!value[RAW] : false;
+}
+function toRaw(observed) {
+  var raw = observed && observed[RAW];
+  return raw ? toRaw(raw) : observed;
+}
 export function isEqualArray(a, b) {
+  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;

package/i18n/en-US.js

@@ -1,3 +1,4 @@
+import _globalThis from "@babel/runtime-corejs3/core-js/global-this";
 var i18n = {
   // datepicker
   'yearMonthFormat': 'MM YYYY',
@@ -107,6 +108,9 @@ var i18n = {
   '复制': 'Copy'
 };
 export default i18n;
-if (typeof global.Kpc !== 'undefined') {
-  global.Kpc.localize(i18n);
+/**
+ * global does not exist in Vite, use standard object globalThis
+ */
+if (typeof _globalThis.Kpc !== 'undefined') {
+  _globalThis.Kpc.localize(i18n);
 }

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.3.2
+ * @king-design v3.3.3
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -63,7 +63,7 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
 export * from './components/wave';
-export declare const version = "3.3.2";
+export declare const version = "3.3.3";
 
 
 export {normalize} from 'intact-react';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.3.2
+ * @king-design v3.3.3
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -64,7 +64,7 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
 export * from './components/wave';
-export var version = '3.3.2';
+export var version = '3.3.3';
 /* generate end */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "King-Design UI components for React.",
   "keywords": [
     "component",
@@ -36,7 +36,7 @@
     "@emotion/css": "^11.5.0",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
-    "intact-react": "3.0.34",
+    "intact-react": "3.0.35",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",