@king-design/intact 3.1.3 → 3.1.4-beta.1

package/es/components/button/styles.js

@@ -242,16 +242,16 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
   return cx(
   /*#__PURE__*/
   // extract static styles to individual css method for performance
-  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) {
+  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{&,&: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, ";}}&.", 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) {
     var styles = button[type];
     return /*#__PURE__*/css("&.", k, "-", type, "{&,&:hover{background:", palette(styles.bgColor, -2), ";color:", palette(styles.color, -2), ";border-color:", palette(styles.borderColor, -2), ";}}");
-  }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";.", k, "-icon{color:inherit;}&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
     var _button$type = button[type],
         ghostColor = _button$type.ghostColor,
         borderColor = _button$type.borderColor;
@@ -264,13 +264,13 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
   }), ";.", k, "-icon-loading{margin-left:-1em;}}}"), ";"));
 });
 export var makeButtonGroupStyles = cache(function makeButtonGroupStyles(k) {
-  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) {
+  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):not(.", k, "-seperate){>.", 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{flex-direction:column;>.", k, "-btn{", _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:not(.", k, "-seperate){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;}}}&.", k, "-seperate{gap:8px;>.", k, "-btn{border-radius:", button.borderRadius, "!important;}}");
+  }), ";&: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;}");
 });

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

@@ -1,8 +1,10 @@
 import { Component, VNode, TypeDefs } from 'intact';
 export * from './column';
+import { Sizes } from '../types';
 export interface CardProps {
     title?: string | VNode;
     type?: 'shadow' | 'border' | 'none';
+    size?: Sizes;
 }
 export interface CardEvents {
 }

package/es/components/card/index.js

@@ -6,12 +6,14 @@ export * from './column';
 import { useConfigContext } from '../config';
 var typeDefs = {
   title: [String, VNode],
-  type: ['shadow', 'border', 'none']
+  type: ['shadow', 'border', 'none'],
+  size: String
 };
 
 var defaults = function defaults() {
   return {
-    type: 'shadow'
+    type: 'shadow',
+    size: 'default'
   };
 };
 

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

@@ -16,7 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       children = _this$get.children,
       className = _this$get.className,
       title = _this$get.title,
-      type = _this$get.type;
+      type = _this$get.type,
+      size = _this$get.size;
 
   var k = this.config.k;
   var hasHeader = $blocks.header || $blocks.title || title || $blocks.extra;
@@ -33,7 +34,7 @@ export default function ($props, $blocks, $__proto__) {
     }
   }
 
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-card"] = true, _classNameObj[k + "-shadow"] = type === 'shadow', _classNameObj[k + "-border"] = type === 'border', _classNameObj[k + "-none"] = type === 'none', _classNameObj[k + "-no-header"] = !hasHeader, _classNameObj[k + "-card-grid"] = hasColumn, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-card"] = true, _classNameObj[k + "-shadow"] = type === 'shadow', _classNameObj[k + "-border"] = type === 'border', _classNameObj[k + "-none"] = type === 'none', _classNameObj[k + "-no-header"] = !hasHeader, _classNameObj[k + "-card-grid"] = hasColumn, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [hasHeader ? _$ce(2, 'div', (_$blocks['header'] = function ($super) {

package/es/components/card/styles.js

@@ -1,3 +1,4 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
@@ -5,7 +6,7 @@ import '../../styles/global';
 import { cache } from '../utils';
 var defaults = {
   border: '1px solid #e5e5e5',
-  padding: '16px',
+  padding: '24px',
 
   get boxShadow() {
     return theme.boxShadow;
@@ -17,7 +18,19 @@ var defaults = {
 
   headerHeight: '48px',
   headerFontSize: '14px',
-  bgColor: '#fff'
+  bgColor: '#fff',
+  large: {
+    padding: '32px',
+    headerHeight: '48px'
+  },
+  small: {
+    padding: '16px',
+    headerHeight: '48px'
+  },
+  mini: {
+    padding: '8px',
+    headerHeight: '32px'
+  }
 };
 var card;
 setDefault(function () {
@@ -26,6 +39,12 @@ setDefault(function () {
   }).card;
   makeStyles == null ? void 0 : makeStyles.clearCache();
 });
+var sizes = ['large', 'small', 'mini'];
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.", k, "-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.", k, "-card-extra{float:right;height:100%;display:flex;align-items:center;}.", k, "-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.", k, "-shadow{box-shadow:", card.boxShadow, ";}&.", k, "-none{box-shadow:none;}&.", k, "-border{border:", card.border, ";.", k, "-card-header{border-bottom:", card.border, ";}.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-no-header{.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-card-grid{.", k, "-card-body{display:flex;padding:0;}&.", k, "-border{.", k, "-card-column:not(:last-of-type){border-right:", card.border, ";}}}.", k, "-card-column{display:flex;align-items:center;padding:", card.padding, ";&.", k, "-fluid{flex:1;}&.", k, "-center{justify-content:center;}}");
+  return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";padding:0 ", card.padding, ";display:flex;align-items:center;}.", k, "-card-title{font-size:", card.headerFontSize, ";flex:1;}.", k, "-card-extra{display:flex;align-items:center;}.", k, "-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.", k, "-shadow{box-shadow:", card.boxShadow, ";}&.", k, "-none{box-shadow:none;}&.", k, "-border{border:", card.border, ";.", k, "-card-header{border-bottom:", card.border, ";}.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-no-header{.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-card-grid{.", k, "-card-body{display:flex;padding:0;}&.", k, "-border{.", k, "-card-column:not(:last-of-type){border-right:", card.border, ";}}}.", k, "-card-column{display:flex;align-items:center;padding:", card.padding, ";&.", k, "-fluid{flex:1;}&.", k, "-center{justify-content:center;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var _card$size = card[size],
+        padding = _card$size.padding,
+        headerHeight = _card$size.headerHeight;
+    return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-card-header{padding:0 ", padding, ";height:", headerHeight, ";}.", k, "-card-body{padding:0 ", padding, " ", padding, ";}&.", k, "-border,&.", k, "-no-header{.", k, "-card-body{padding-top:", padding, ";}}.", k, "-card-column{padding:", padding, ";}}");
+  }), ";");
 });

package/es/components/carousel/useAutoplay.js

@@ -1,7 +1,7 @@
 import { useInstance, onBeforeUnmount } from 'intact';
 export function useAutoplay(next) {
   var instance = useInstance();
-  var timer;
+  var timer = null;
   var ms;
   instance.on('$receive:autoplay', function (v) {
     if (v === true) {
@@ -24,7 +24,10 @@ export function useAutoplay(next) {
   }
 
   function stop() {
-    window.clearTimeout(timer);
+    if (timer) {
+      window.clearTimeout(timer);
+      timer = null;
+    }
   }
 
   onBeforeUnmount(stop);

package/es/components/dropdown/usePosition.js

@@ -39,7 +39,6 @@ export function usePosition() {
     var pos = instance.get('position');
 
     switch (pos) {
-      case 'left':
       case 'left':
         pos = {
           my: 'right-10 center',

package/es/components/editable/styles.js

@@ -22,5 +22,5 @@ setDefault(function () {
 });
 export { editable };
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-wrapper{border:", editable.invalid.border, "!important;}}");
 });

package/es/components/icon/styles.js

@@ -39,7 +39,7 @@ export var sizes = ['large', 'small', 'mini'];
 export var makeStyles = cache(function makeStyles(k, color) {
   // create the global icon styles
   makeIconStyles(k);
-  return /*#__PURE__*/css("color:", icon.color, ";font-size:", icon.fontSize.default, ";line-height:1;", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("color:", icon.color, ";font-size:", icon.fontSize.default, ";line-height:1;font-weight:normal;", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var fontSize = icon.fontSize[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", fontSize, ";}");
   }), " ", _mapInstanceProperty(colors).call(colors, function (color) {

package/es/components/input/styles.js

@@ -135,7 +135,7 @@ setDefault(function () {
 export var makeStyles = cache(function makeStyles(k) {
   var _context;
 
-  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;max-width:100%;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
     var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
     if (size === 'default') return sizeClassName;

package/es/components/message/message.d.ts

@@ -10,6 +10,7 @@ export declare class Message extends Component<MessageProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<MessageProps>>;
     static defaults: () => Partial<MessageProps>;
+    static classNamePrefix: string;
     static notice(content: Children | Partial<MessageProps>, duration?: number, type?: MessageProps['type']): void;
     static info(content: Children | Partial<MessageProps>, duration?: number): void;
     static error(content: Children | Partial<MessageProps>, duration?: number): void;

package/es/components/message/message.js

@@ -54,16 +54,6 @@ export var Message = /*#__PURE__*/function (_Component) {
       type = 'info';
     }
 
-    if (!messages) {
-      var container = document.createElement('div');
-      document.body.append(container);
-      render(h(Messages, {
-        ref: function ref(i) {
-          return messages = i;
-        }
-      }), container);
-    }
-
     if (isObject(content) && !content.tag) {
       content = _extends({}, content, {
         type: type,
@@ -78,6 +68,17 @@ export var Message = /*#__PURE__*/function (_Component) {
       };
     }
 
+    if (!messages) {
+      var container = document.createElement('div');
+      document.body.append(container);
+      render(h(Messages, {
+        ref: function ref(i) {
+          return messages = i;
+        },
+        classNamePrefix: Message.classNamePrefix
+      }), container);
+    }
+
     messages.notice(h(Message, content));
   };
 
@@ -108,5 +109,6 @@ export var Message = /*#__PURE__*/function (_Component) {
 Message.template = template;
 Message.typeDefs = typeDefs;
 Message.defaults = defaults;
+Message.classNamePrefix = void 0;
 
 __decorate([bind], Message.prototype, "close", null);

package/es/components/message/message.vdt.js

@@ -16,7 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       content = _this$get.content,
       children = _this$get.children,
       closable = _this$get.closable,
-      hideIcon = _this$get.hideIcon;
+      hideIcon = _this$get.hideIcon,
+      classNamePrefix = _this$get.classNamePrefix;
 
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-message"] = true, _classNameObj[k + "-" + type] = type, _classNameObj[makeMessageStyles(k)] = true, _classNameObj);

package/es/components/message/messages.d.ts

@@ -1,7 +1,11 @@
-import { Component, VNodeComponentClass } from 'intact';
+import { Component, VNodeComponentClass, TypeDefs } from 'intact';
 import type { Message } from './message';
+export interface MessagesProps {
+    classNamePrefix?: string;
+}
 export declare class Messages extends Component {
     static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<MessagesProps>>;
     private messages;
     private config;
     notice(message: VNodeComponentClass<Message>): void;

package/es/components/message/messages.js

@@ -5,6 +5,9 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
 import { Component } from 'intact';
 import template from './messages.vdt';
 import { useConfigContext } from '../config';
+var typeDefs = {
+  classNamePrefix: String
+};
 export var Messages = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Messages, _Component);
 
@@ -48,4 +51,5 @@ export var Messages = /*#__PURE__*/function (_Component) {
 
   return Messages;
 }(Component);
-Messages.template = template;
+Messages.template = template;
+Messages.typeDefs = typeDefs;

package/es/components/message/messages.vdt.js

@@ -1,17 +1,23 @@
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, map as _$ma, className as _$cn } from 'intact';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, map as _$ma, className as _$cn } from 'intact';
 import { TransitionGroup, Transition } from 'intact';
 import { makeMessagesStyles } from './styles';
+import { ConfigProvider } from '../config';
 export default function ($props, $blocks, $__proto__) {
   var _$cn2;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-  var k = this.config.k;
-  return _$ce(2, 'div', _$cc(TransitionGroup, {
-    'children': _$ma(this.messages, function ($value, $key) {
-      return $value;
-    }, $this)
-  }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-messages"] = true, _$cn2[makeMessagesStyles(k)] = true, _$cn2)));
+  var k = this.get('classNamePrefix') || this.config.k;
+  return _$cc(ConfigProvider, {
+    'value': {
+      classNamePrefix: k
+    },
+    'children': _$ce(2, 'div', _$cc(TransitionGroup, {
+      'children': _$ma(this.messages, function ($value, $key) {
+        return $value;
+      }, $this)
+    }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-messages"] = true, _$cn2[makeMessagesStyles(k)] = true, _$cn2)))
+  });
 }
 ;

package/es/components/table/table.js

@@ -18,7 +18,7 @@ import { useExpandable } from './useExpandable';
 import { useSelected } from './useSelected';
 import { useTree } from './useTree';
 import { Tooltip } from '../tooltip/tooltip';
-import { useRestRowStatus } from './useRestRowStatus';
+import { useResetRowStatus } from './useResetRowStatus';
 import { exportTable as _exportTable } from './exportTable';
 import { useResizable } from './useResizable';
 import { useDraggable } from './useDraggable';
@@ -117,7 +117,7 @@ export var Table = /*#__PURE__*/function (_Component) {
     _this.sortable = useSortable();
     _this.expandable = useExpandable();
     _this.selected = useSelected();
-    _this.resetRowStatus = useRestRowStatus(_this.disableRow.getAllKeys);
+    _this.resetRowStatus = useResetRowStatus(_this.disableRow.getAllKeys);
     _this.draggable = useDraggable(_this.pagination.data);
     _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition);
     _this.config = useConfigContext();

package/es/components/table/useFixedColumns.js

@@ -89,7 +89,7 @@ export function useFixedColumns(getColumns, _ref, widthMap) {
   function updateScrollPositionOnResize() {
     var scrollDom = scrollRef.value;
 
-    if (scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
+    if (!hasFixed.value || scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
       scrollPosition.set(null);
     } else {
       setScrollPosition(scrollRef.value.scrollLeft);

package/es/components/table/{useRestRowStatus.d.ts → useResetRowStatus.d.ts}

@@ -1,4 +1,4 @@
 import type { TableRowKey } from './table';
-export declare function useRestRowStatus(getAllKeys: () => TableRowKey[]): {
+export declare function useResetRowStatus(getAllKeys: () => TableRowKey[]): {
     onRowBeforeUnmount: (key: TableRowKey) => void;
 };

package/es/components/table/{useRestRowStatus.js → useResetRowStatus.js}

@@ -2,7 +2,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/i
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import { useInstance, onBeforeUnmount, onUpdated } from 'intact';
 import { addOrRemove } from './useChecked';
-export function useRestRowStatus(getAllKeys) {
+export function useResetRowStatus(getAllKeys) {
   var instance = useInstance();
   var allUnmountedRows = [];
   var willUnmounted = false;

package/es/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'intact';
+import { Component, TypeDefs } from 'intact';
 export interface TabProps {
     value?: any;
     disabled?: boolean;
@@ -10,6 +10,7 @@ export interface TabEvents {
 }
 export declare class Tab extends Component<TabProps, TabEvents> {
     static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TabProps>>;
     private tabs;
     private config;
     private onClick;

package/es/components/tabs/tab.js

@@ -49,6 +49,7 @@ export var Tab = /*#__PURE__*/function (_Component) {
   return Tab;
 }(Component);
 Tab.template = template;
+Tab.typeDefs = typeDefs;
 
 __decorate([bind], Tab.prototype, "onClick", null);
 

package/es/components/wave/index.js

@@ -35,7 +35,7 @@ export var Wave = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.instance = null;
     _this.className = void 0;
-    _this.timer = 0;
+    _this.timer = null;
     _this.config = useConfigContext();
     return _this;
   }
@@ -95,7 +95,11 @@ export var Wave = /*#__PURE__*/function (_Component) {
     if (!node) return;
     node.classList.remove(this.className);
     node.removeEventListener('animationend', this.resetAnimation);
-    clearTimeout(this.timer);
+
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
   };
 
   return Wave;

package/es/hooks/useDelayClose.js

@@ -1,7 +1,7 @@
 import { onMounted, useInstance, onUnmounted } from 'intact';
 export function useDelayClose(close, duration) {
   var instance = useInstance();
-  var timer;
+  var timer = null;
 
   function delayClose() {
     if (duration) {
@@ -11,7 +11,7 @@ export function useDelayClose(close, duration) {
 
   function onMouseEnter(e) {
     instance.trigger('mouseenter', e);
-    clearTimeout(timer);
+    clear();
   }
 
   function onMouseLeave(e) {
@@ -20,14 +20,19 @@ export function useDelayClose(close, duration) {
     // so we must detect the $unmounted status here
 
     if (instance.$unmounted) return;
-    clearTimeout(timer);
+    clear();
     delayClose();
   }
 
+  function clear() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+
   onMounted(delayClose);
-  onUnmounted(function () {
-    clearTimeout(timer);
-  });
+  onUnmounted(clear);
   return {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave

package/es/hooks/useMouseOutsidable.js

@@ -9,7 +9,7 @@ export function useMouseOutsidable(elementRef, autoAdd) {
     autoAdd = true;
   }
 
-  var timer;
+  var timer = null;
 
   function onMouseDown() {
     document.addEventListener('click', onDocumentClick, true);
@@ -19,6 +19,7 @@ export function useMouseOutsidable(elementRef, autoAdd) {
   function onMouseUp() {
     timer = window.setTimeout(function () {
       document.removeEventListener('click', onDocumentClick, true);
+      timer = null;
     });
     document.removeEventListener('mouseup', onMouseUp);
   }
@@ -36,7 +37,10 @@ export function useMouseOutsidable(elementRef, autoAdd) {
   }
 
   onBeforeUnmount(function () {
-    clearTimeout(timer);
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
 
     if (autoAdd) {
       elementRef.value.removeEventListener('mousedown', onMouseDown);

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.3
+ * @king-design v3.1.4-beta.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -60,4 +60,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.1.3";
+export declare const version = "3.1.4-beta.1";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.3
+ * @king-design v3.1.4-beta.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,5 +62,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.1.3';
+export var version = '3.1.4-beta.1';
 /* generate end */

package/es/site/data/components/button/demos/disabled/react.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import React from 'react';
-import { Button } from '@king-design/react';
+import { Button, Icon } from '@king-design/react';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Demo, _React$Component);
@@ -21,8 +21,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       disabled: true,
       icon: true,
       circle: true
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "k-icon k-icon-search"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "k-icon-search"
     })), /*#__PURE__*/React.createElement(Button, {
       disabled: true,
       type: "link"

package/es/site/data/components/button/demos/ghost/react.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import React from 'react';
-import { Button } from '@king-design/react';
+import { Button, Icon } from '@king-design/react';
 import './index.styl';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
@@ -17,10 +17,14 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       className: "wrapper"
     }, /*#__PURE__*/React.createElement(Button, {
       ghost: true
-    }, "default"), /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "k-icon-left"
+    }), "default"), /*#__PURE__*/React.createElement(Button, {
       type: "primary",
       ghost: true
-    }, "primay"), /*#__PURE__*/React.createElement(Button, {
+    }, "primay", /*#__PURE__*/React.createElement(Icon, {
+      className: "k-icon-right"
+    })), /*#__PURE__*/React.createElement(Button, {
       type: "warning",
       ghost: true
     }, "warning"), /*#__PURE__*/React.createElement(Button, {