@king-design/react 2.1.1 → 3.0.0-beta.1

package/components/diagram/shapes/image.d.ts

@@ -18,7 +18,7 @@ export declare class DImage extends DShape<DImageProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/parallelogram.d.ts

@@ -12,7 +12,7 @@ export declare class DParallelogram extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/rectangle.d.ts

@@ -18,7 +18,7 @@ export declare class DRectangle extends DShape<DRectangleProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/square.d.ts

@@ -13,7 +13,7 @@ export declare class DSquare extends DRectangle {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/diagram/shapes/text.d.ts

@@ -12,7 +12,7 @@ export declare class DText extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/dialog/alert.vdt.js

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

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/index.spec.js

@@ -201,7 +201,7 @@ describe('Dialog', function () {
     var _mount4 = mount(Demo),
         instance = _mount4[0];
 
-    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 确定取消');
+    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 取消确定');
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount5, instance, element, btn, dialog;
@@ -439,7 +439,7 @@ describe('Dialog', function () {
 
           case 4:
             dialog = expectDialog();
-            dialog.querySelector('.k-btn').click();
+            dialog.querySelector('.k-dialog-ok').click();
             _context12.next = 8;
             return wait();
 
@@ -472,7 +472,7 @@ describe('Dialog', function () {
 
           case 21:
             dialog = expectDialog();
-            dialog.querySelector('.k-btn').click();
+            dialog.querySelector('.k-dialog-ok').click();
             cb2 = sinon.spy();
             Dialog.confirm({
               content: 'test',
@@ -489,7 +489,7 @@ describe('Dialog', function () {
 
           case 31:
             expect(cb2.callCount).to.eql(0);
-            getElement('.k-dialog').querySelector('.k-btn').click();
+            getElement('.k-dialog').querySelector('.k-dialog-ok').click();
 
           case 33:
           case "end":

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/index.spec.js

@@ -8,7 +8,7 @@ import BasicDemo, { data as basicDemoData } from '~/components/form/demos/basic'
 import CustomDemo from '~/components/form/demos/custom';
 import VariableDemo from '~/components/form/demos/variable';
 import RemoteDemo from '~/components/form/demos/remote';
-import { mount, dispatchEvent, wait } from '../../test/utils';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact-react';
 import { Form, FormItem } from './';
 import { Input } from '../input';
@@ -29,7 +29,9 @@ RemoteDemo.prototype.validateUserName = function (value) {
 };
 
 describe('Form', function () {
-  // afterEach(() => unmount());
+  afterEach(function () {
+    return unmount();
+  });
   it('validate', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, form, item, input;
 

package/components/form/item.vdt.js

@@ -8,7 +8,8 @@ import { makeItemStyles } from './styles';
 import { context as ErrorContext } from './useError';
 var _$tmp0 = {
   'className': 'ion-ios-information-outline k-form-error-more',
-  'size': 'small'
+  'size': 'small',
+  'color': 'inherit'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _$cn2;

package/components/form/styles.js

@@ -8,12 +8,12 @@ var defaults = {
     gap: "24px",
     labelWidth: "80px",
 
-    get labelLineHeight() {
+    get labelHeight() {
       return theme.default.height;
     },
 
     labelTextAlign: 'right',
-    labelGap: '10px',
+    labelGap: '16px',
 
     get starColor() {
       return theme.color.danger;
@@ -50,12 +50,12 @@ setDefault(function () {
   }).form;
 });
 export function makeItemStyles() {
-  return /*#__PURE__*/css("display:table;position:relative;table-layout:fixed;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid{width:100%;}.k-form-label{display:table-cell;width:", form.item.labelWidth, ";text-align:", form.item.labelTextAlign, ";padding-right:", form.item.labelGap, ";line-height:", form.item.labelLineHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{display:table-cell;vertical-align:middle;position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-inner{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-inner{border:none;}}.k-form-item{&,.k-form-content{display:block;width:auto;}}.k-form-append{display:table-cell;padding:", form.item.appendPadding, ";vertical-align:middle;}");
+  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid>.k-form-content{flex:1;}.k-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-inner{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-inner{border:none;}}.k-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
 }
 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-inline{.k-form-item{display:inline-flex;vertical-align:top;margin-right:", form.item.inlineGap, ";}.k-form-label{width:auto;}}&.k-vertical{.k-form-item{flex-direction:column;}.k-form-label{width:auto;text-align:left;padding:0;justify-content:start;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-bottom:", form.item[size + "Gap"], ";}&.k-inline{.k-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
   }), ";");
 }

package/components/grid/useGutter.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { useInstance } from 'intact-react';
 import { createContext } from '../context';
-import { hasDocumentAvailable, isObject, isNullOrUndefined } from 'intact-shared';
-import { useState } from '../../hooks/useState';
-import { responsiveMap } from './constants';
-var enquire;
+import { hasDocumentAvailable, isObject, isNullOrUndefined } from 'intact-shared'; // import type * as EnquireJs from 'enquire.js';
 
-if (hasDocumentAvailable) {
-  enquire = require('enquire.js');
-}
+import enquire from 'enquire.js';
+import { useState } from '../../hooks/useState';
+import { responsiveMap } from './constants'; // let enquire: typeof EnquireJs;
+// if (hasDocumentAvailable) {
+// enquire = require('enquire.js');
+// }
 
 export var context = createContext(0);
 export function useGutter() {
@@ -22,7 +22,7 @@ export function useGutter() {
     xs: false
   });
 
-  if (enquire) {
+  if (hasDocumentAvailable) {
     var _loop = function _loop(key) {
       enquire.register(responsiveMap[key], {
         match: function match() {

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/index.d.ts

@@ -30,6 +30,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     waveDisabled?: boolean;
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     showPassword?: boolean;
+    flat?: boolean;
 }
 export declare type AutoRows = {
     min?: number;

package/components/input/index.js

@@ -4,7 +4,7 @@ import { __decorate } from "tslib";
 import { Component, createRef } from 'intact-react';
 import { sizes } from '../../styles/utils';
 import template from './index.vdt';
-import { bind } from '../utils';
+import { bind, selectValue } from '../utils';
 import { useAutoWidth } from './useAutoWidth';
 import { useFrozen } from './useFrozen';
 import { useAutoRows } from './useAutoRows';
@@ -28,7 +28,8 @@ var typeDefs = {
   inline: Boolean,
   waveDisabled: Boolean,
   resize: ['none', 'vertical', 'horizontal', 'both'],
-  showPassword: Boolean
+  showPassword: Boolean,
+  flat: Boolean
 };
 
 var defaults = function defaults() {
@@ -78,15 +79,7 @@ export var Input = /*#__PURE__*/function (_Component) {
   };
 
   _proto.select = function select() {
-    var input = this.inputRef.value;
-
-    if (input.select) {
-      input.select();
-    } else if (input.setSelectionRange) {
-      // mobile safari
-      input.focus();
-      input.setSelectionRange(0, input.value.length);
-    }
+    selectValue(this.inputRef.value);
   };
 
   _proto.clear = function clear(e) {

package/components/input/index.vdt.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "type", "value", "defaultValue", "placeholder", "clearable", "disabled", "size", "rows", "autoWidth", "fluid", "width", "stackClearIcon", "frozenOnInput", "readonly", "inline", "waveDisabled", "resize", "ev-click", "ev-mounseenter", "ev-mouseleave"];
+var _excluded = ["className", "style", "type", "value", "defaultValue", "placeholder", "clearable", "disabled", "size", "rows", "autoWidth", "fluid", "width", "stackClearIcon", "frozenOnInput", "readonly", "inline", "waveDisabled", "resize", "flat", "ev-click", "ev-mounseenter", "ev-mouseleave"];
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, noop as _$no, createVNode as _$cv } from 'intact-react';
 import { Icon } from '../icon';
 import { addStyle, isTextBlock, getRestProps } from '../utils';
@@ -40,6 +41,7 @@ export default function ($props, $blocks, $__proto__) {
       inline = _this$get.inline,
       waveDisabled = _this$get.waveDisabled,
       resize = _this$get.resize,
+      flat = _flatInstanceProperty(_this$get),
       click = _this$get['ev-click'],
       mouseenter = _this$get['ev-mounseenter'],
       mouseleave = _this$get['ev-mouseleave'],
@@ -54,7 +56,7 @@ export default function ($props, $blocks, $__proto__) {
   var isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
   var classNameObj = (_classNameObj = {
     'k-input': true
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-group'] = $blocks.prepend || $blocks.append, _classNameObj['k-disabled'] = disabled, _classNameObj['k-with-prefix'] = $blocks.prefix, _classNameObj['k-with-suffix'] = $blocks.suffix, _classNameObj['k-clearable'] = clearable, _classNameObj['k-auto-width'] = autoWidth, _classNameObj['k-fluid'] = fluid, _classNameObj['k-stack-clear'] = stackClearIcon, _classNameObj['k-inline'] = inline, _classNameObj["k-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj["k-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-group'] = $blocks.prepend || $blocks.append, _classNameObj['k-disabled'] = disabled, _classNameObj['k-with-prefix'] = $blocks.prefix, _classNameObj['k-with-suffix'] = $blocks.suffix, _classNameObj['k-clearable'] = clearable, _classNameObj['k-auto-width'] = autoWidth, _classNameObj['k-fluid'] = fluid, _classNameObj['k-stack-clear'] = stackClearIcon, _classNameObj['k-inline'] = inline, _classNameObj['k-flat'] = flat, _classNameObj["k-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj["k-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
   var _this$showPassword = this.showPassword,
       isShowPassword = _this$showPassword.isShow,
       toggleShowPassword = _this$showPassword.toggleShow,

package/components/input/styles.js

@@ -1,3 +1,4 @@
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
@@ -85,6 +86,17 @@ var defaults = deepDefaults({
   // search input
   search: {
     suffixMarginRight: '15px'
+  },
+  // flat
+  flat: {
+    get color() {
+      return theme.color.lightBlack;
+    },
+
+    get bgColor() {
+      return theme.color.bg;
+    }
+
   }
 }, sizes.reduce(function (memo, size) {
   var styles = theme[size];
@@ -102,16 +114,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;
@@ -123,7 +125,7 @@ setDefault(function () {
 export function makeStyles() {
   var _context;
 
-  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-input-show-password{color:", input.clearIconColor, ";}&.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-input-show-password{color:", input.clearIconColor, ";}&.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-flat{.k-input-inner{border:none;background:", _flatInstanceProperty(input).bgColor, ";color:", _flatInstanceProperty(input).color, ";}}&.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) {