@king-design/vue 2.0.16 → 3.0.0-beta.0

package/components/button/styles.js

@@ -7,7 +7,7 @@ export var types = ['primary', 'warning', 'danger', 'active', 'success'];
 var sizes = ['large', 'small', 'mini'];
 var btnStyles = {
   get color() {
-    return theme.color.text;
+    return theme.color.lightBlack;
   },
 
   bgColor: '#fff',
@@ -235,7 +235,7 @@ export function makeButtonStyles(_ref) {
   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, ";&: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;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
     return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
   }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {

package/components/card/styles.js

@@ -5,7 +5,15 @@ import '../../styles/global';
 var defaults = {
   border: '1px solid #e5e5e5',
   padding: '16px',
-  boxShadow: '0 0 8px 0 rgba(0, 0, 0, .05)',
+
+  get boxShadow() {
+    return theme.boxShadow;
+  },
+
+  get borderRadius() {
+    return theme.largeBorderRadius;
+  },
+
   headerHeight: '48px',
   headerFontSize: '14px',
   bgColor: '#fff'
@@ -17,5 +25,5 @@ setDefault(function () {
   }).card;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("border-radius:", theme.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, ";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;}}");
 }

package/components/checkbox/styles.js

@@ -1,12 +1,12 @@
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults } from '../../styles/utils';
+import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
-  width: '14px',
+  width: '16px',
 
   get borderColor() {
-    return theme.color.darkBorder;
+    return theme.color.border;
   },
 
   get borderRadius() {
@@ -17,6 +17,10 @@ var defaults = {
     return theme.transition.small;
   },
 
+  get hoverBorder() {
+    return "1px solid " + theme.color.primary;
+  },
+
   bgColor: '#fff',
   // text
   text: {
@@ -36,8 +40,8 @@ var defaults = {
   inner: {
     width: '5px',
     height: '10px',
-    top: '-1px',
-    left: '4px',
+    top: '0px',
+    left: '5px',
     border: '1px solid #fff'
   },
   // disabled
@@ -54,14 +58,21 @@ var defaults = {
       return theme.color.disabledBg;
     },
 
-    get innerColor() {
-      return theme.color.disabledBorder;
-    }
+    innerColor: '#fff',
+    checked: {
+      get borderColor() {
+        return palette(theme.color.primary, -3);
+      },
+
+      get bgColor() {
+        return palette(theme.color.primary, -3);
+      }
 
+    }
   },
   // indeterminate
   indeterminate: {
-    innerLeft: '3px'
+    innerLeft: '4px'
   }
 };
 var checkbox;
@@ -71,5 +82,5 @@ setDefault(function () {
   }).checkbox;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}&:hover{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
 }

package/components/collapse/styles.js

@@ -14,6 +14,11 @@ var defaults = {
   titleMarginRight: '8px',
   borderPadding: '0 24px',
   collBorder: '1px solid #eee',
+
+  get borderRadius() {
+    return theme.largeBorderRadius;
+  },
+
   item: {
     borderBottom: '1px solid #e5e5e5',
     titleHeight: '40px',
@@ -27,7 +32,7 @@ setDefault(function () {
   }).collapse;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";transform-origin:center center 0;}}&.k-border{border-radius:", theme.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";transform-origin:center center 0;}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 }
 export function makeItemStyles() {
   var collapseItem = collapse.item;

package/components/datepicker/styles.d.ts

@@ -16,7 +16,7 @@ declare const defaults: {
             todayBorderColor: string;
         };
         disabled: {
-            color: string;
+            readonly color: string;
             hoverBgColor: string;
         };
         range: {

package/components/datepicker/styles.js

@@ -35,7 +35,10 @@ var defaults = {
       todayBorderColor: "transparent"
     },
     disabled: {
-      color: '#ccc',
+      get color() {
+        return theme.color.disabled;
+      },
+
       hoverBgColor: 'none'
     },
     range: {

package/components/dialog/base.vdt.js

@@ -7,7 +7,7 @@ import { Transition } from 'intact';
 import { getRestProps, stopPropagation } from '../utils';
 import { makeDialogStyles, makeWrapperStyles } from './styles';
 var _$tmp0 = {
-  'className': 'ion-ios-close-empty'
+  'className': 'k-icon-close'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _$cn2;
@@ -79,17 +79,16 @@ export default function ($props, $blocks, $__proto__) {
       }, __$blocks['body'](_$no)), 0, 'k-dialog-body'), (_$blocks['footer-wrapper'] = function ($super) {
         return _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
           return [_$cc(Button, {
+            'className': 'k-dialog-cancel',
+            'ev-click': this.cancel,
+            'children': cancelText
+          }), _$cc(Button, {
             'className': 'k-dialog-ok',
             'type': 'primary',
             'ev-click': this.ok,
             'loading': loading,
             'disabled': disabledOk,
             'children': okText
-          }), _$cc(Button, {
-            'className': 'k-dialog-cancel',
-            'type': 'secondary',
-            'ev-click': this.cancel,
-            'children': cancelText
           })];
         }, __$blocks['footer'] = function ($super, data) {
           var block = $blocks['footer'];

package/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/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/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/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/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/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/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/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/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/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/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/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/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]);
 }
 ;