@king-design/intact 2.0.15 → 3.0.0-beta.0

package/es/components/dialog/styles.js

@@ -16,7 +16,7 @@ var defaults = {
   },
 
   padding: '0',
-  margin: '0 20px',
+  margin: '0 24px',
 
   get color() {
     return theme.color.text;
@@ -27,32 +27,33 @@ var defaults = {
   },
 
   get boxShadow() {
-    return theme.boxShadow;
+    return theme.largeBoxShadow;
   },
 
   // header
   header: {
-    fontSize: '16px',
+    fontSize: '14px',
+    fontWeight: '500',
 
     get color() {
       return theme.color.title;
     },
 
-    height: '61px',
-    border: "1px solid #eaeaea",
-    closeTop: '16px',
+    height: '52px',
+    border: "1px solid #e2e5e8",
+    closeTop: '9px',
     closeRight: '-9px',
-    closeIconFontSize: '44px'
+    closeIconFontSize: '16px'
   },
   // body
   body: {
-    padding: "20px"
+    padding: "24px"
   },
   // footer
   footer: {
-    padding: "20px 0",
-    btnGap: "12px",
-    border: "1px solid #eaeaea"
+    padding: "16px 0",
+    btnGap: "8px",
+    border: "1px solid #e2e5e8"
   },
   // transition
   transform: 'translateY(-10px) scale(1.05)',
@@ -62,12 +63,13 @@ var defaults = {
   miniWidth: '400px',
   // alert dialog
   alert: {
-    padding: "0 20px",
+    padding: "0 24px",
     bodyMarginTop: "-25px",
     tipIconMarginBottom: '10px',
     tipIconFontSize: '37px',
     tipIconLineHeight: '37px',
     // with title
+    titleFontWeight: '500',
     titleTipIconFontSize: '37px',
     titleFontSize: '14px',
     wrapperPaddingLeft: '8px',
@@ -85,7 +87,7 @@ export function makeDialogStyles() {
 
   return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.k-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.k-", size, "{width:", dialog[size + "Width"], ";}");
-  }), ".k-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;}.k-dialog-title{display:inline-block;}.k-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.k-icon{font-size:", dialog.header.closeIconFontSize, ";}}.k-dialog-body{padding:", dialog.body.padding, ";}.k-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.k-btn{margin-left:", dialog.footer.btnGap, ";}}");
+  }), ".k-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.k-dialog-title{display:inline-block;}.k-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.k-icon{font-size:", dialog.header.closeIconFontSize, ";}}.k-dialog-body{padding:", dialog.body.padding, ";}.k-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.k-btn{margin-left:", dialog.footer.btnGap, ";}}");
 }
 export function makeWrapperStyles() {
   // k-fade-leave-active will add position absolute to the styles
@@ -98,5 +100,5 @@ export function makeAlertStyles() {
   return /*#__PURE__*/css("&.k-alert-dialog{.k-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;position:relative;z-index:1;}.k-dialog-header,.k-dialog-footer{border:none;}.k-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.k-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
     var color = type === 'error' ? theme.color.danger : type === 'confirm' ? theme.color.primary : theme.color[type];
     return /*#__PURE__*/css("&.k-", type, "{.k-dialog-tip-icon{color:", color, ";}}");
-  }), " &:not(.k-confirm){.k-dialog-cancel{display:none;}}&.k-with-title{.k-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.k-dialog-tip-icon{float:left;.k-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.k-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.k-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";}}}");
+  }), " &:not(.k-confirm){.k-dialog-cancel{display:none;}}&.k-with-title{.k-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.k-dialog-tip-icon{float:left;.k-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.k-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.k-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";font-weight:", dialog.alert.titleFontWeight, ";}}}");
 }

package/es/components/drawer/styles.js

@@ -10,7 +10,7 @@ var defaults = {
   },
 
   get boxShadow() {
-    return theme.boxShadow;
+    return theme.largeBoxShadow;
   }
 
 };
@@ -21,9 +21,10 @@ setDefault(function () {
   }).drawer;
 });
 export function makeStyles(overlay) {
-  return /*#__PURE__*/css("box-shadow:none;border-radius:0;position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.k-drawer-content{transition:transform ", drawer.transition, ";}}.k-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.k-dialog-body{flex-grow:1;overflow:auto;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
+  return /*#__PURE__*/css("position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.k-drawer-content{transition:transform ", drawer.transition, ";}}.k-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.k-dialog-body{flex-grow:1;overflow:auto;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
     var positionValue = '';
     var transformValue = '';
+    var borderRadius = '';
     placements.forEach(function (p) {
       // Set top to `0 !important` when overlay is false and placement is right or left
       // Because dialog without overlay don't have positional parent element
@@ -32,12 +33,26 @@ export function makeStyles(overlay) {
 
     if (placement === 'left' || placement === 'right') {
       positionValue += 'height: 100% !important;';
-      transformValue = placement === 'left' ? 'translateX(-100%)' : 'translateX(100%)';
+
+      if (placement === 'left') {
+        borderRadius = "0 " + theme.largeBorderRadius + " " + theme.largeBorderRadius + " 0";
+        transformValue = 'translateX(-100%)';
+      } else {
+        borderRadius = theme.largeBorderRadius + " 0 0 " + theme.largeBorderRadius;
+        transformValue = 'translateX(100%)';
+      }
     } else {
       positionValue += 'width: 100% !important;';
-      transformValue = placement === 'top' ? 'translateY(-100%)' : 'translateY(100%)';
+
+      if (placement === 'top') {
+        borderRadius = "0 0 " + theme.largeBorderRadius + " " + theme.largeBorderRadius;
+        transformValue = 'translateY(-100%)';
+      } else {
+        borderRadius = theme.largeBorderRadius + " " + theme.largeBorderRadius + " 0 0";
+        transformValue = 'translateY(100%)';
+      }
     }
 
-    return "\n                &.k-" + placement + " {\n                    " + positionValue + "\n                    &.transition-enter-from,\n                    &.transition-leave-to,\n                    &.transition-appear-from {\n                        transform: none !important;\n                        .k-drawer-content {\n                            transform: " + transformValue + ";\n                        }\n                    }\n                }\n            ";
+    return "\n                &.k-" + placement + " {\n                    " + positionValue + "\n                    &.transition-enter-from,\n                    &.transition-leave-to,\n                    &.transition-appear-from {\n                        transform: none !important;\n                        .k-drawer-content {\n                            transform: " + transformValue + ";\n                        }\n                    }\n                    .k-drawer-content {\n                        border-radius: " + borderRadius + ";\n                    }\n                }\n            ";
   }), ";");
 }

package/es/components/dropdown/styles.js

@@ -49,7 +49,7 @@ setDefault(function () {
   }).dropdown;
 });
 export function makeMenuStyles() {
-  return /*#__PURE__*/css("position:absolute;min-width:", dropdown.menu.minWidth, ";background:", dropdown.menu.bgColor, ";border-radius:", dropdown.menu.borderRadius, ";box-shadow:", theme.boxShadow, ";font-size:", dropdown.menu.fontSize, ";z-index:", dropdown.menu.zIndex, ";top:0;left:0;.k-dropdown{display:block;}");
+  return /*#__PURE__*/css("position:absolute;min-width:", dropdown.menu.minWidth, ";background:", dropdown.menu.bgColor, ";border-radius:", dropdown.menu.borderRadius, ";box-shadow:", theme.middleBoxShadow, ";font-size:", dropdown.menu.fontSize, ";z-index:", dropdown.menu.zIndex, ";top:0;left:0;.k-dropdown{display:block;}");
 }
 export function makeItemStyles() {
   return /*#__PURE__*/css("padding:", dropdown.item.padding, ";cursor:pointer;white-space:nowrap;height:", dropdown.item.height, ";line-height:", dropdown.item.height, ";&.k-hover{background:", dropdown.item.hoverBgColor, ";}&:first-of-type{border-radius:", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, " 0 0;}&:last-of-type{border-radius:0 0 ", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, ";}&.k-disabled{background:", dropdown.item.disabledBgColor, ";color:", dropdown.item.disabledColor, ";cursor:not-allowed;}.k-checkbox,.k-radio{display:flex;margin:0 -", getRight(dropdown.item.padding), " 0 -", getLeft(dropdown.item.padding), ";padding:", dropdown.item.padding, ";}.k-checkbox-wrapper,.k-radio-wrapper{vertical-align:text-bottom;}.k-checkbox-text,.k-radio-text{vertical-align:baseline;}");

package/es/components/form/styles.js

@@ -56,6 +56,6 @@ export function makeFormStyles() {
   var _context;
 
   return /*#__PURE__*/css("&.k-inline{.k-form-item{display:inline-block;vertical-align:top;margin-right:", form.item.inlineGap, ";}.k-form-label{width:auto;}}&.k-vertical{.k-form-item,.k-form-label,.k-form-content{display:block;}.k-form-label{width:auto;text-align:left;line-height:inherit;margin-bottom:", form.item.verticalLabelGap, ";}}", _mapInstanceProperty(_context = ['small', 'mini']).call(_context, function (size) {
-    return /*#__PURE__*/css("&.k-", size, "{.k-form-item:not(:last-of-type){margin:", form.item[size + "Gap"], ";}&.k-inline{.k-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
+    return /*#__PURE__*/css("&.k-", size, "{.k-form-item:not(:last-of-type){margin-bottom:", form.item[size + "Gap"], ";}&.k-inline{.k-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
   }), ";");
 }

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

@@ -5,6 +5,7 @@ export interface IconProps {
     color?: string;
     rotate?: boolean;
     hoverable?: boolean;
+    disabled?: boolean;
 }
 export declare class Icon extends Component<IconProps> {
     static displayName: string;

package/es/components/icon/index.js

@@ -10,7 +10,8 @@ var typeDefs = {
   size: _concatInstanceProperty(_context = []).call(_context, sizes, ['default', String, Number]),
   color: String,
   rotate: Boolean,
-  hoverable: Boolean
+  hoverable: Boolean,
+  disabled: Boolean
 };
 
 var defaults = function defaults() {

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

@@ -16,12 +16,14 @@ export default function ($props, $blocks, $__proto__) {
       color = _this$get.color,
       rotate = _this$get.rotate,
       hoverable = _this$get.hoverable,
-      children = _this$get.children;
+      children = _this$get.children,
+      disabled = _this$get.disabled;
 
   var classNameObj = (_classNameObj = {
     'k-icon': true,
     'k-rotate': rotate,
-    'k-hoverable': hoverable
+    'k-hoverable': !disabled && hoverable,
+    'k-disabled': disabled
   }, _classNameObj[className] = className, _classNameObj);
   var _style = {};
 

package/es/components/icon/styles.js

@@ -11,6 +11,14 @@ var defaults = {
     return theme.transition.small;
   },
 
+  get disabledColor() {
+    return theme.color.disabled;
+  },
+
+  get color() {
+    return theme.color.lightBlack;
+  },
+
   fontSize: {
     default: '16px',
     large: '22px',
@@ -27,11 +35,11 @@ setDefault(function () {
 export var colors = ['primary', 'warning', 'danger', 'success'];
 export var sizes = ['large', 'small', 'mini'];
 export default function makeStyles(color) {
-  return /*#__PURE__*/css("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;", _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) {
     var _color = theme.color[color];
     return /*#__PURE__*/css("&.k-", color, "{color:", _color, ";&.k-hoverable:hover{color:", palette(_color, -2), ";}}");
-  }), " &.k-rotate:before{animation:", rotate, " 1s infinite linear;}&:before{position:relative;font-size:inherit;z-index:1;}&.k-hoverable{cursor:pointer;transition:color ", icon.transition, ";", color && "\n                &:hover {\n                    color: " + palette(color, -2) + " !important;\n                }\n            ", ";&:hover{color:", theme.color.primary, ";}}");
+  }), " &.k-rotate:before{animation:", rotate, " 1s infinite linear;}&:before{position:relative;font-size:inherit;z-index:1;}&.k-hoverable{cursor:pointer;transition:color ", icon.transition, ";", color && "\n                &:hover {\n                    color: " + palette(color, -2) + " !important;\n                }\n            ", ";&:hover{color:", theme.color.primary, ";}}&.k-disabled{cursor:not-allowed;color:", icon.disabledColor, "!important;}");
 }

package/es/components/input/styles.js

@@ -101,16 +101,6 @@ var defaults = deepDefaults({
     }
 
   };
-
-  if (size === 'large') {
-    // use default padding for large size
-    Object.defineProperty(memo.large, 'paddingGap', {
-      get: function get() {
-        return theme.default.padding;
-      }
-    });
-  }
-
   return memo;
 }, {}));
 var input;
@@ -120,7 +110,7 @@ setDefault(function () {
   }).input;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";vertical-align:middle;.k-input-wrapper{display:inline-block;width:100%;position:relative;}.k-input-inner{display:inline-block;width:100%;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";outline:none;position:relative;color:", input.color, ";&:hover{border:", input.hoverBorder, ";z-index:1;}&:focus{border:", input.focusBorder, ";z-index:1;}&::placeholder{color:", input.placeholderColor, ";}}&.k-fluid{width:100%;}.k-input-prefix,.k-input-suffix{position:absolute;top:50%;transform:translateY(-50%);z-index:2;}.k-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";+*{margin-left:", input.clearIconGap, ";}}&:hover .k-input-clear.k-input-show{opacity:1;pointer-events:all;}&.k-stack-clear{.k-input-clear{position:absolute;z-index:1;right:0;&.k-input-show+i{transition:opacity ", input.transition, ";}}&:hover{.k-input-clear.k-input-show+i{opacity:0;}}}&.k-group{display:table;.k-input-inner{border-radius:0;}.k-input-wrapper:first-child{.k-input-inner{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-wrapper:last-child{.k-input-inner{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}}.k-input-prepend,.k-input-append{display:table-cell;width:1px;vertical-align:middle;background-color:", input.groupBgColor, ";border:", input.border, ";text-align:center;white-space:nowrap;.k-btn{margin:-1px 0;border-radius:0;border:none;}.k-select{margin:-1px;text-align:left;}}.k-input-prepend{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";.k-select{z-index:1;.k-select-wrapper{border-radius:", theme.borderRadius, " 0 0 ", theme.borderRadius, ";}}}.k-input-append{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;.k-select{.k-select-wrapper{border-radius:0 ", theme.borderRadius, " ", theme.borderRadius, " 0;}}}.k-input-padding{padding:0 ", input.groupPaddingGap, ";}.k-input-prepend{border-right:none;}.k-input-append{border-left:none;}&.k-disabled{color:", input.disabledColor, ";cursor:not-allowed;.k-input-inner{color:", input.disabledColor, ";border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";vertical-align:middle;.k-input-wrapper{display:inline-block;width:100%;position:relative;}.k-input-inner{display:inline-block;width:100%;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";outline:none;position:relative;color:", input.color, ";&:hover{border:", input.hoverBorder, ";z-index:1;}&:focus{border:", input.focusBorder, ";z-index:1;}&::placeholder{color:", input.placeholderColor, ";}}&.k-fluid{width:100%;}.k-input-prefix,.k-input-suffix{position:absolute;top:50%;transform:translateY(-50%);z-index:2;color:", theme.color.lightBlack, ";line-height:1;}.k-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";+*{margin-left:", input.clearIconGap, ";}}&:hover .k-input-clear.k-input-show{opacity:1;pointer-events:all;}&.k-stack-clear{.k-input-clear{position:absolute;z-index:1;right:0;&.k-input-show+i{transition:opacity ", input.transition, ";}}&:hover{.k-input-clear.k-input-show+i{opacity:0;}}}&.k-group{display:table;.k-input-inner{border-radius:0;}.k-input-wrapper:first-child{.k-input-inner{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-wrapper:last-child{.k-input-inner{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}}.k-input-prepend,.k-input-append{display:table-cell;width:1px;vertical-align:middle;background-color:", input.groupBgColor, ";border:", input.border, ";text-align:center;white-space:nowrap;.k-btn{margin:-1px;border:none;&.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-disabled{color:", input.disabledColor, ";cursor:not-allowed;.k-input-inner{color:", input.disabledColor, ";border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
     var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.k-input-inner{height:", styles.height, ";line-height:", styles.height, ";font-size:", styles.fontSize, ";padding:0 ", styles.paddingGap, ";}.k-input-prefix{left:", styles.paddingGap, ";}.k-input-suffix{right:", styles.paddingGap, ";}&.k-with-prefix{.k-input-inner{padding-left:calc(", styles.paddingGap, " + 1rem + ", input.clearIconGap, ");}}&.k-with-suffix,&.k-clearable{.k-input-inner{padding-right:calc(", styles.paddingGap, " + 1rem + ", input.clearIconGap, ");}}&:not(.k-stack-clear).k-with-suffix.k-clearable{.k-input-inner{padding-right:calc(", styles.paddingGap, " + 2rem + ", input.clearIconGap, " * 2);}}");
     if (size === 'default') return sizeClassName;

package/es/components/message/message.js

@@ -45,7 +45,7 @@ export var Message = /*#__PURE__*/function (_Component) {
 
   Message.notice = function notice(content, duration, type) {
     if (duration === void 0) {
-      duration = 5000;
+      duration = 3000;
     }
 
     if (type === void 0) {

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

@@ -5,7 +5,8 @@ import { Icon } from '../icon';
 import { getRestProps } from '../utils';
 import { makeMessageStyles } from './styles';
 var _$tmp0 = {
-  'className': 'ion-ios-close-empty'
+  'className': 'k-icon-close',
+  'hoverable': true
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _$cn2;
@@ -23,12 +24,12 @@ export default function ($props, $blocks, $__proto__) {
 
   var classNameObj = (_classNameObj = {
     "k-message": true
-  }, _classNameObj["k-" + type] = type !== 'info', _classNameObj[makeMessageStyles()] = true, _classNameObj);
+  }, _classNameObj["k-" + type] = type, _classNameObj[makeMessageStyles()] = true, _classNameObj);
   var iconMap = {
-    info: 'information',
-    warning: 'alert',
-    success: 'truth-circled',
-    error: 'fault'
+    info: 'information-fill',
+    warning: 'warning-fill',
+    success: 'success-fill',
+    error: 'error-fill'
   };
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),

package/es/components/message/styles.js

@@ -9,6 +9,7 @@ var defaults = {
   },
 
   top: "10px",
+  left: "0px",
   transform: "translateY(-10px)",
 
   get bgColor() {
@@ -22,11 +23,10 @@ var defaults = {
   gap: "10px",
   boxShadow: 'none',
   padding: "7px 33px 8px 8px",
-  closeFontSize: "26px",
   fontSize: '12px',
 
   get color() {
-    return theme.color.ghost;
+    return theme.color.text;
   },
 
   minWidth: '400px',
@@ -39,10 +39,10 @@ var defaults = {
   },
 
   icon: {
-    color: "inherit",
-    fontSize: "14px",
+    // color: `inherit`,
+    fontSize: "18px",
     left: "16px",
-    top: "8px"
+    top: "7px"
   }
 };
 var message;
@@ -52,13 +52,13 @@ setDefault(function () {
   }).message;
 });
 export function makeMessagesStyles() {
-  return /*#__PURE__*/css("position:fixed;top:", message.top, ";width:100%;pointer-events:none;z-index:", theme.maxZIndex + 1, ";");
+  return /*#__PURE__*/css("position:fixed;top:", message.top, ";left:", message.left, ";width:100%;pointer-events:none;z-index:", theme.maxZIndex + 1, ";");
 }
 export function makeMessageStyles() {
   var _context;
 
-  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.k-message-container{display:inline-block;box-shadow:", message.boxShadow, ";background:", message.bgColor, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";border:", message.border, ";min-height:", message.minHeight, ";}.k-message-wrapper{position:relative;display:inline-block;&.k-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.k-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.k-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}.k-icon{font-size:", message.closeFontSize, ";}}.k-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";color:", message.icon.color, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['error', 'success', 'warning']).call(_context, function (type) {
+  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.k-message-container{display:inline-block;box-shadow:", message.boxShadow, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";min-height:", message.minHeight, ";}.k-message-wrapper{position:relative;display:inline-block;&.k-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.k-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.k-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}}.k-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', 'error', 'success', 'warning']).call(_context, function (type) {
     var color = theme.color[type === 'error' ? 'danger' : type];
-    return /*#__PURE__*/css("&.k-", type, "{.k-message-container{color:", color, ";border-color:", color, ";background:", palette(color, -4), ";}.k-message-close{color:", color, ";&:hover{color:", palette(color, 1), ";}}}");
+    return /*#__PURE__*/css("&.k-", type, "{.k-message-container{background:", palette(color, -4), ";}.k-message-icon{color:", color, ";}}");
   }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", message.transition, ",opacity ", message.transition, ";}&.transition-move{transition:transform ", message.transition, ";}");
 }

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

@@ -8,10 +8,10 @@ import { Icon } from '../icon';
 import { _$ } from '../../i18n';
 import { makeStyles } from './styles';
 var _$tmp0 = {
-  'className': 'ion-ios-arrow-left'
+  'className': 'k-icon-arrow-left'
 };
 var _$tmp1 = {
-  'className': 'ion-ios-arrow-right'
+  'className': 'k-icon-arrow-right'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
@@ -140,19 +140,21 @@ export default function ($props, $blocks, $__proto__) {
 
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [_$cc(ButtonGroup, {
+  }, getRestProps(this)), [showTotal && !simple ? _$ce(2, 'div', _$('共 {n} 条', {
+    n: total
+  }), 0, 'k-pagination-total') : undefined, _$cc(ButtonGroup, {
     'checkType': 'radio',
     'children': [_$cc(Button, {
       'icon': true,
       'size': size,
-      'type': type,
+      'type': 'none',
       'disabled': value <= 1 || !!(disablePage && disablePage(value - 1, limit)),
       'ev-click': this.prev,
       'children': _$cc(Icon, _$tmp0)
     }), paginationItems, _$cc(Button, {
       'icon': true,
       'size': size,
-      'type': type,
+      'type': 'none',
       'disabled': value >= totalPages || !!(disablePage && disablePage(value + 1, limit)),
       'ev-click': this.next,
       'children': _$cc(Icon, _$tmp1)
@@ -179,8 +181,6 @@ export default function ($props, $blocks, $__proto__) {
     'size': size,
     'value': value,
     'ev-change': this.goto
-  }), _$ce(2, 'span', _$('页'), 0, 'c-middle')], 4, 'k-pagination-goto') : undefined, showTotal ? _$ce(2, 'div', _$('共 {n} 条', {
-    n: total
-  }), 0, 'k-pagination-total') : undefined] : undefined]);
+  }), _$ce(2, 'span', _$('页'), 0, 'c-middle')], 4, 'k-pagination-goto') : undefined] : undefined]);
 }
 ;

package/es/components/pagination/styles.js

@@ -23,7 +23,16 @@ var defaults = deepDefaults({
   gap: '16px',
   btn: {
     gap: '6px',
-    padding: '0 3px'
+    padding: '0 3px',
+
+    get borderRadius() {
+      return theme.borderRadius;
+    },
+
+    get hoverBgColor() {
+      return theme.color.hoverBg;
+    }
+
   },
   // goto
   goto: {
@@ -55,7 +64,7 @@ setDefault(function () {
   }).pagination;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";.k-pagination-limits,.k-pagination-goto,.k-pagination-total{margin-left:", pagination.gap, ";display:inline-block;vertical-align:middle;}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";>*{display:inline-block;vertical-align:middle;&:not(:first-child){margin-left:", pagination.gap, ";}}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";border-radius:", pagination.btn.borderRadius, "!important;&:last-of-type{margin:0!important;}&:hover{background:", pagination.btn.hoverBgColor, ";}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = pagination[size];
     var btnStyles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");

package/es/components/radio/styles.js

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
-import { deepDefaults } from '../../styles/utils';
+import { deepDefaults, palette } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var defaults = {
-  width: '14px',
+  width: '16px',
 
   get transition() {
     return theme.transition.small;
@@ -38,10 +38,20 @@ var defaults = {
       return theme.color.disabledBg;
     },
 
-    get innerColor() {
-      return theme.color.disabledBorder;
-    }
+    checked: {
+      get borderColor() {
+        return palette(theme.color.primary, -2);
+      },
+
+      get bgColor() {
+        return palette(theme.color.primary, -4);
+      },
 
+      get innerColor() {
+        return palette(theme.color.primary, -3);
+      }
+
+    }
   }
 };
 var radio;
@@ -51,5 +61,5 @@ setDefault(function () {
   }).radio;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";&:before{background:", radio.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}&:hover{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
 }

package/es/components/select/base.vdt.js

@@ -130,9 +130,10 @@ export default function ($props, $blocks, $__proto__) {
 
                     return block ? block.call($this, callBlock, data) : callBlock();
                   }, __$blocks['value'](_$no, [value[$key], $label])), 0, 'k-select-text'), _$cc(Icon, {
-                    'className': 'ion-ios-close k-select-close',
+                    'className': 'k-icon-close k-select-close',
                     'ev-click': this.delete.bind(this, $key),
-                    'hoverable': !disabled
+                    'hoverable': !disabled,
+                    'disabled': disabled
                   })], 4, 'k-select-tag', null, isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : undefined);
                 }, $this);
               }, __$blocks['values'] = function ($super, data) {
@@ -170,10 +171,8 @@ export default function ($props, $blocks, $__proto__) {
             'hoverable': true
           }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
             return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
-              'className': _$cn({
-                "k-select-arrow ion-ios-arrow-down": true,
-                'k-disabled': $props.isDisableArrow
-              })
+              'className': 'k-select-arrow ion-ios-arrow-down',
+              'disabled': $props.isDisableArrow
             }) : undefined;
           }, __$blocks['suffix'] = function ($super, data) {
             var block = $blocks['suffix'];

package/es/components/select/styles.js

@@ -33,10 +33,6 @@ var defaults = deepDefaults({
     return "1px solid " + theme.color.primary;
   },
 
-  get iconColor() {
-    return theme.color.placeholder;
-  },
-
   get activeColor() {
     return theme.color.primary;
   },
@@ -46,7 +42,6 @@ var defaults = deepDefaults({
   },
 
   suffixGap: '10px',
-  disabledArrowColor: '#e5e5e5',
   clearGap: "8px",
 
   get placeholderColor() {
@@ -94,7 +89,7 @@ var defaults = deepDefaults({
   },
   tag: {
     margin: "3px 8px 3px 0",
-    padding: "3px 8px",
+    padding: "1px 8px",
 
     get borderRadius() {
       return theme.borderRadius;
@@ -104,13 +99,13 @@ var defaults = deepDefaults({
       return theme.color.bg;
     },
 
-    disabledBgColor: '#eee',
+    disabledBgColor: '#f8f9fa',
     delete: {
       gap: "8px",
       fontSize: '14px',
 
       get color() {
-        return theme.color.placeholder;
+        return theme.color.lightBlack;
       }
 
     }
@@ -164,21 +159,6 @@ var defaults = deepDefaults({
     multipleGap: "1px",
     multipleMargin: "0 2px 1px 0"
   };
-
-  if (size === 'large') {
-    // use default padding for large size
-    Object.defineProperty(memo.large, 'padding', {
-      get: function get() {
-        return "0 " + theme.default.padding;
-      }
-    });
-    Object.defineProperty(memo.large, 'fontSize', {
-      get: function get() {
-        return theme.default.fontSize;
-      }
-    });
-  }
-
   return memo;
 }, {}));
 var select;
@@ -188,7 +168,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";width:100%;&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}.k-select-text{max-width:calc(100% - 18px);word-break:break-word;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";margin-top:2px;}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";width:100%;&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}.k-select-text{max-width:calc(100% - 18px);word-break:break-word;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;

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

@@ -6,16 +6,16 @@ import { Input } from '../input';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
 var _$tmp0 = {
-  'className': 'k-spinner-icon ion-ios-minus-empty'
+  'className': 'k-spinner-icon k-icon-minus-small'
 };
 var _$tmp1 = {
-  'className': 'k-spinner-icon ion-ios-arrow-down'
+  'className': 'k-spinner-icon k-icon-arrow-down'
 };
 var _$tmp2 = {
-  'className': 'k-spinner-icon ion-ios-plus-empty'
+  'className': 'k-spinner-icon k-icon-add-small'
 };
 var _$tmp3 = {
-  'className': 'k-spinner-icon ion-ios-arrow-up'
+  'className': 'k-spinner-icon k-icon-arrow-up'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
@@ -49,6 +49,7 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': this.isDisabledDecrease(),
     'className': 'k-spinner-btn k-left',
     'size': size,
+    'type': 'none',
     'children': !vertical ? _$cc(Icon, _$tmp0) : _$cc(Icon, _$tmp1)
   }), _$cc(Input, {
     'className': 'k-spinner-input',
@@ -65,6 +66,7 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': this.isDisabledIncrease(),
     'className': 'k-spinner-btn k-right',
     'size': size,
+    'type': 'none',
     'children': !vertical ? _$cc(Icon, _$tmp2) : _$cc(Icon, _$tmp3)
   })]);
 }