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

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/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';
 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/es/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/es/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/es/components/grid/useGutter.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { useInstance } from 'intact';
 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/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/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/es/components/input/index.js

@@ -4,7 +4,7 @@ import { __decorate } from "tslib";
 import { Component, createRef } from 'intact';
 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/es/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';
 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/es/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/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.d.ts

@@ -8,7 +8,7 @@ export interface PaginationProps {
     value?: number;
     limit?: number;
     limits?: number[];
-    noBorder?: boolean;
+    flat?: boolean;
     simple?: boolean;
     showTotal?: boolean;
     showGoto?: boolean;

package/es/components/pagination/index.js

@@ -12,7 +12,7 @@ var typeDefs = {
   value: Number,
   limit: Number,
   limits: Array,
-  noBorder: Boolean,
+  flat: Boolean,
   simple: Boolean,
   showTotal: Boolean,
   showGoto: Boolean,

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

@@ -6,11 +6,13 @@ import BasicDemo from '~/components/pagination/demos/basic';
 import GotoDemo from '~/components/pagination/demos/goto';
 import CurrentDemo from '~/components/pagination/demos/current';
 import DisableDemo from '~/components/pagination/demos/disable';
-import { mount, dispatchEvent, wait } from '../../test/utils';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact';
 import { Pagination } from '.';
 describe('Pagination', function () {
-  // afterEach(() => unmount());
+  afterEach(function () {
+    return unmount();
+  });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, pagination, btns, prev, next;
 

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import { createCommentVNode as _$ccv, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, createTextVNode as _$ct, createVNode as _$cv, className as _$cn, map as _$ma } from 'intact';
 import { getRestProps, mapChildren } from '../utils';
 import { ButtonGroup, Button } from '../button';
@@ -8,10 +9,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;
@@ -23,7 +24,7 @@ export default function ($props, $blocks, $__proto__) {
   var _this$get = this.get(),
       total = _this$get.total,
       size = _this$get.size,
-      noBorder = _this$get.noBorder,
+      flat = _flatInstanceProperty(_this$get),
       simple = _this$get.simple,
       className = _this$get.className,
       showTotal = _this$get.showTotal,
@@ -39,13 +40,8 @@ export default function ($props, $blocks, $__proto__) {
   if (!total) return _$ccv(' pagination ');
   var classNameObj = (_classNameObj = {
     'k-pagination': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-no-border'] = noBorder, _classNameObj['k-simple'] = simple, _classNameObj[makeStyles()] = true, _classNameObj);
-  var type = 'default';
-
-  if (noBorder || simple) {
-    type = 'none';
-  }
-
+  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-flat'] = flat, _classNameObj['k-simple'] = simple, _classNameObj[makeStyles()] = true, _classNameObj);
+  var type = flat ? 'flat' : simple ? 'none' : 'default';
   var totalPages = Math.ceil(total / limit) || 0;
 
   var paginationButton = function paginationButton(page) {
@@ -140,19 +136,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)
@@ -163,6 +161,7 @@ export default function ($props, $blocks, $__proto__) {
     'value': $this.get('value')
   }), !simple ? [showLimits ? _$ce(2, 'div', _$cc(Select, {
     'size': size,
+    'flat': flat,
     'children': _$ma(limits, function ($value, $key) {
       return _$cc(Option, {
         'value': $value,
@@ -175,12 +174,11 @@ export default function ($props, $blocks, $__proto__) {
       $this.set('limit', $v);
     },
     'value': $this.get('limit')
-  }), 2, 'k-pagination-limits') : undefined, showGoto ? _$ce(2, 'div', [_$ce(2, 'span', _$('跳至'), 0, 'c-middle'), _$cc(Input, {
+  }), 2, 'k-pagination-limits') : undefined, showGoto ? _$ce(2, 'div', [_$ce(2, 'span', _$('前往'), 0, 'c-middle'), _$cc(Input, {
     '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]);
+    'ev-change': this.goto,
+    'flat': flat
+  }), _$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,9 +64,9 @@ 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, ";}}}");
-  }), "&.k-no-border{.k-select{&,&:hover,&.k-show{border-color:transparent;}}}&.k-simple{.k-btn{margin:0;}.k-input-inner{text-align:center;}.k-pagination-text{vertical-align:middle;}}");
+  }), "&.k-flat{.k-select{&,&:hover,&.k-show{border-color:transparent;}}}&.k-simple{.k-btn{margin:0;}.k-input-inner{text-align:center;}.k-pagination-text{vertical-align:middle;}}");
 }