@king-design/vue 2.0.0-beta.1 → 2.0.2

package/components/form/item.vdt.js

@@ -5,6 +5,7 @@ import { Tooltip } from '../tooltip';
 import { Icon } from '../icon';
 import { Transition } from 'intact';
 import { makeItemStyles } from './styles';
+import { context as ErrorContext } from './useError';
 var _$tmp0 = {
   'className': 'ion-ios-information-outline k-form-error-more',
   'size': 'small'
@@ -77,17 +78,20 @@ export default function ($props, $blocks, $__proto__) {
   }, __$blocks['label'](_$no))], 0, 'k-form-label', {
     'htmlFor': htmlFor,
     'style': labelStyle
-  }) : undefined, _$ce(2, 'div', [(_$blocks['content'] = function ($super) {
-    return children;
-  }, __$blocks['content'] = function ($super, data) {
-    var block = $blocks['content'];
+  }) : undefined, _$ce(2, 'div', [_$cc(ErrorContext.Provider, {
+    'value': isDirty && !isValid,
+    'children': (_$blocks['content'] = function ($super) {
+      return children;
+    }, __$blocks['content'] = function ($super, data) {
+      var block = $blocks['content'];
 
-    var callBlock = function callBlock() {
-      return _$blocks['content'].call($this, $super, data);
-    };
+      var callBlock = function callBlock() {
+        return _$blocks['content'].call($this, $super, data);
+      };
 
-    return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['content'](_$no)), _$cc(Transition, {
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['content'](_$no))
+  }), _$cc(Transition, {
     'key': 'error',
     'name': 'k-fade',
     'children': isDirty && !isValid ? _$ce(2, 'div', [_$ce(2, 'div', message.value, 0, 'k-error-message c-ellipsis', null, null, errorRef), _$cc(Tooltip, {

package/components/form/useError.d.ts

@@ -1,7 +1,11 @@
+export declare const context: {
+    Provider: import('intact-vue-next').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+};
 export declare function useError(): {
     ellipsis: import("../../hooks/useState").State<boolean>;
     message: import("../../hooks/useState").State<string | undefined>;
-    errorRef: import('intact-vue-next').RefObject<HTMLDivElement>;
+    errorRef: import("intact").RefObject<HTMLDivElement>;
     getErrorMessage: (key: string) => string;
     getErrorClassName: (key: string) => string;
     reset: () => void;

package/components/form/useError.js

@@ -1,11 +1,13 @@
 import { useInstance, nextTick, createRef } from 'intact-vue-next';
 import { useState, watchState } from '../../hooks/useState';
 import { messages as globalMessages, classNames as globalClassNames } from './methods';
-import { isFunction } from 'intact-shared'; // enum MessageOrClassname {
+import { isFunction } from 'intact-shared';
+import { createContext } from '../context'; // enum MessageOrClassname {
 // Message,
 // ClassName,
 // }
 
+export var context = createContext();
 export function useError() {
   var instance = useInstance();
   var ellipsis = useState(false);

package/components/form/useValidate.js

@@ -64,7 +64,7 @@ export function useValidate(getErrorMessage, getErrorClassName, message, isDirty
 
         if (result !== true) {
           var ruleName = ruleNames[index];
-          return [false, result || getErrorMessage(ruleName), getErrorMessage(ruleName)];
+          return [false, result || getErrorMessage(ruleName), getErrorClassName(ruleName)];
         }
       }
 
@@ -77,7 +77,7 @@ export function useValidate(getErrorMessage, getErrorClassName, message, isDirty
         message = err;
       } else if (err) {
         message = err.message || getErrorMessage(err.name);
-        className = err.className || getErrorMessage(err.name);
+        className = err.className || getErrorClassName(err.name);
       }
 
       return [false, message, className];

package/components/grid/col.vdt.js

@@ -22,7 +22,7 @@ export default function ($props, $blocks, $__proto__) {
 
   return _$cc(GutterContext.Consumer, {
     'children': function children(gutter) {
-      var _extends2;
+      var _extends2, _$cn2;
 
       var classNameObj = _extends((_extends2 = {
         'k-col': true
@@ -33,7 +33,9 @@ export default function ($props, $blocks, $__proto__) {
         'className': _$cn(classNameObj)
       }, getRestProps(_this), {
         'style': newStyle
-      }), gutter ? _$ce(2, 'div', _children, 0, _$cn(className)) : _children);
+      }), gutter ? _$ce(2, 'div', _children, 0, _$cn((_$cn2 = {
+        'k-col-wrapper': true
+      }, _$cn2[className] = className, _$cn2))) : _children);
     }
   });
 }

package/components/grid/styles.js

@@ -24,7 +24,7 @@ export function makeRowStyles() {
 }
 var colsStyles = makeBreakpointsCols();
 export function makeColStyles() {
-  return /*#__PURE__*/css("position:relative;width:100%;", colsStyles, ";");
+  return /*#__PURE__*/css("position:relative;width:100%;.k-col-wrapper{height:100%;}", colsStyles, ";");
 }
 
 function makeBreakpointsCols() {

package/components/grid/useGutter.d.ts

@@ -1,6 +1,6 @@
 export declare const context: {
     Provider: import('intact-vue-next').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<number>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<number>, {}, {}, {}>>;
 };
 export declare function useGutter(): {
     getGutter: () => import("./constants").PrimitiveValue | null | undefined;

package/components/icon/index.vdt.js

@@ -15,7 +15,8 @@ export default function ($props, $blocks, $__proto__) {
       size = _this$get.size,
       color = _this$get.color,
       rotate = _this$get.rotate,
-      hoverable = _this$get.hoverable;
+      hoverable = _this$get.hoverable,
+      children = _this$get.children;
 
   var classNameObj = (_classNameObj = {
     'k-icon': true,
@@ -43,6 +44,6 @@ export default function ($props, $blocks, $__proto__) {
   return _$cv('i', _extends({
     'className': _$cn(classNameObj),
     'style': addStyle(style, _style)
-  }, getRestProps(this)));
+  }, getRestProps(this)), children);
 }
 ;

package/components/icon/styles.js

@@ -6,7 +6,11 @@ import { rotate } from '../../styles/keyframes';
 import '../../styles/fonts/iconfont';
 import '../../styles/fonts/ionicons';
 import '../../styles/global';
-var iconStyles = {
+var defaults = {
+  get transition() {
+    return theme.transition.small;
+  },
+
   fontSize: {
     default: '16px',
     large: '22px',
@@ -14,7 +18,6 @@ var iconStyles = {
     mini: '12px'
   }
 };
-var defaults = iconStyles;
 var icon;
 setDefault(function () {
   icon = deepDefaults(theme, {
@@ -25,9 +28,10 @@ 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("&.k-", size, "{font-size:", icon.fontSize[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{font-size:inherit;}&.k-hoverable{cursor:pointer;transition:color ", theme.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, ";}}");
 }

package/components/input/index.d.ts

@@ -27,6 +27,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     stackClearIcon?: boolean;
     frozenOnInput?: boolean;
     inline?: boolean;
+    waveDisabled?: boolean;
 }
 export interface InputEvents {
     clear: [MouseEvent];

package/components/input/index.js

@@ -23,7 +23,8 @@ var typeDefs = {
   width: [Number, String],
   stackClearIcon: Boolean,
   frozenOnInput: Boolean,
-  inline: Boolean
+  inline: Boolean,
+  waveDisabled: Boolean
 };
 
 var defaults = function defaults() {

package/components/input/index.vdt.js

@@ -1,13 +1,18 @@
 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", "ev-click", "ev-mounseenter", "ev-mouseleave"];
-import { createElementVNode as _$ce, className as _$cn, noop as _$no, createVNode as _$cv, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+var _excluded = ["className", "style", "type", "value", "defaultValue", "placeholder", "clearable", "disabled", "size", "rows", "autoWidth", "fluid", "width", "stackClearIcon", "frozenOnInput", "readonly", "inline", "waveDisabled", "ev-click", "ev-mounseenter", "ev-mouseleave"];
+import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, noop as _$no, createVNode as _$cv } from 'intact-vue-next';
 import { Icon } from '../icon';
 import { addStyle, isTextBlock, getRestProps } from '../utils';
 import { makeStyles } from './styles';
 import { noop, isNullOrUndefined } from 'intact-shared';
+import { Wave } from '../wave';
+import { context as ErrorContext } from '../form/useError';
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj, children, _children;
+  var _classNameObj,
+      children,
+      _this = this,
+      _children;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -33,6 +38,7 @@ export default function ($props, $blocks, $__proto__) {
       frozenOnInput = _this$get.frozenOnInput,
       readonly = _this$get.readonly,
       inline = _this$get.inline,
+      waveDisabled = _this$get.waveDisabled,
       click = _this$get['ev-click'],
       mouseenter = _this$get['ev-mounseenter'],
       mouseleave = _this$get['ev-mouseleave'],
@@ -77,39 +83,48 @@ export default function ($props, $blocks, $__proto__) {
   return _$ce(2, 'div', [$blocks.prepend ? (children = $blocks.prepend(noop), _$ce(2, 'div', children, 0, _$cn({
     "k-input-prepend": true,
     "k-input-padding": isTextBlock(children)
-  }))) : void 0, _$ce(2, 'div', [$blocks.prefix ? _$ce(2, 'div', (_$blocks['prefix'] = function ($super) {
-    return null;
-  }, __$blocks['prefix'] = function ($super, data) {
-    var block = $blocks['prefix'];
+  }))) : void 0, _$cc(ErrorContext.Consumer, {
+    'defaultValue': false,
+    'children': function children(isInvalid) {
+      return _$cc(Wave, {
+        'disabled': waveDisabled || disabled || isInvalid,
+        'children': _$ce(2, 'div', [$blocks.prefix ? _$ce(2, 'div', (_$blocks['prefix'] = function ($super) {
+          return null;
+        }, __$blocks['prefix'] = function ($super, data) {
+          var block = $blocks['prefix'];
 
-    var callBlock = function callBlock() {
-      return _$blocks['prefix'].call($this, $super, data);
-    };
+          var callBlock = function callBlock() {
+            return _$blocks['prefix'].call($this, $super, data);
+          };
 
-    return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['prefix'](_$no)), 0, 'k-input-prefix') : undefined, type !== 'textarea' ? _$cv('input', _extends({}, inputProps, {
-    'className': 'k-input-inner',
-    'type': type
-  })) : _$cv('textarea', _extends({}, inputProps, {
-    'className': 'k-input-inner k-textarea',
-    'rows': rows
-  })), $blocks.suffix || clearable && !disabled ? _$ce(2, 'div', [clearable && !disabled ? _$cc(Icon, {
-    'className': _$cn({
-      "k-input-clear ion-ios-close": true,
-      "k-input-show": hasValue
-    }),
-    'ev-click': this.clear
-  }) : undefined, ' ', (_$blocks['suffix'] = function ($super) {
-    return null;
-  }, __$blocks['suffix'] = function ($super, data) {
-    var block = $blocks['suffix'];
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['prefix'](_$no)), 0, 'k-input-prefix') : undefined, type !== 'textarea' ? _$cv('input', _extends({}, inputProps, {
+          'className': 'k-input-inner',
+          'type': type
+        })) : _$cv('textarea', _extends({}, inputProps, {
+          'className': 'k-input-inner k-textarea',
+          'rows': rows
+        })), $blocks.suffix || clearable && !disabled ? _$ce(2, 'div', [clearable && !disabled ? _$cc(Icon, {
+          'className': _$cn({
+            "k-input-clear ion-ios-close": true,
+            "k-input-show": hasValue
+          }),
+          'ev-click': _this.clear,
+          'hoverable': true
+        }) : undefined, ' ', (_$blocks['suffix'] = function ($super) {
+          return null;
+        }, __$blocks['suffix'] = function ($super, data) {
+          var block = $blocks['suffix'];
 
-    var callBlock = function callBlock() {
-      return _$blocks['suffix'].call($this, $super, data);
-    };
+          var callBlock = function callBlock() {
+            return _$blocks['suffix'].call($this, $super, data);
+          };
 
-    return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['suffix'](_$no))], 0, 'k-input-suffix') : undefined, autoWidth ? _$ce(2, 'div', !hasValue ? placeholder : inputValue, 0, 'k-input-fake', null, null, fakeRef) : undefined], 0, 'k-input-wrapper'), $blocks.append ? (_children = $blocks.append(noop), _$ce(2, 'div', _children, 0, _$cn({
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['suffix'](_$no))], 0, 'k-input-suffix') : undefined, autoWidth ? _$ce(2, 'div', !hasValue ? placeholder : inputValue, 0, 'k-input-fake', null, null, fakeRef) : undefined], 0, 'k-input-wrapper')
+      });
+    }
+  }), $blocks.append ? (_children = $blocks.append(noop), _$ce(2, 'div', _children, 0, _$cn({
     "k-input-append": true,
     "k-input-padding": isTextBlock(_children)
   }))) : void 0], 0, _$cn(classNameObj), {

package/components/input/search.vdt.js

@@ -23,9 +23,10 @@ export default function ($props, $blocks, $__proto__) {
       size = _this$get.size,
       open = _this$get.open;
 
+  var isTypeNotDefault = type !== 'default';
   var classNameObj = (_classNameObj = {
     'k-search': true
-  }, _classNameObj[className] = className, _classNameObj['k-open'] = open, _classNameObj['k-hide'] = !open, _classNameObj["k-" + type] = type !== 'default', _classNameObj[makeSearchStyles()] = true, _classNameObj);
+  }, _classNameObj[className] = className, _classNameObj['k-open'] = open, _classNameObj['k-hide'] = !open, _classNameObj["k-" + type] = isTypeNotDefault, _classNameObj[makeSearchStyles()] = true, _classNameObj);
   return _$cv('form', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'ev-submit': this.onSubmit,
@@ -38,7 +39,8 @@ export default function ($props, $blocks, $__proto__) {
     'ev-$change:value': this.onChangeValue,
     'readonly': !open,
     'size': size,
-    'className': 'k-with-suffix'
+    'className': 'k-with-suffix',
+    'waveDisabled': isTypeNotDefault
   }, null, this.inputRef), _$cc(Button, {
     'icon': true,
     'type': 'none',

package/components/input/styles.js

@@ -4,6 +4,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
 import '../../styles/global';
 var defaults = deepDefaults({
+  get transition() {
+    return theme.transition.middle;
+  },
+
   get fontSize() {
     return theme.default.fontSize;
   },
@@ -32,8 +36,9 @@ var defaults = deepDefaults({
     return "1px solid " + theme.color.primary;
   },
 
+  // get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
   get hoverBorder() {
-    return "1px solid " + theme.color.darkBorder;
+    return "1px solid " + theme.color.primary;
   },
 
   get borderRadius() {
@@ -115,7 +120,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 ", theme.transition, ",background ", theme.transition, ",box-shadow ", theme.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{display:inline-block;vertical-align:top;cursor:pointer;opacity:0;transition:opacity ", theme.transition, ";pointer-events:none;color:", input.clearIconColor, ";&:hover{color:", theme.color.primary, ";}+*{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 ", theme.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;}.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) {
     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;
@@ -123,7 +128,7 @@ export function makeStyles() {
   }), "&.k-inline{.k-input-inner{height:auto;line-height:inherit;border:none;border-radius:0;padding:0;}}.k-textarea{padding:", input.textareaPadding, ";height:auto;line-height:1.5;vertical-align:top;}.k-input-fake{position:absolute;visibility:hidden;top:0;white-space:nowrap;}&.k-auto-width{width:auto;.k-input-inner{box-sizing:content-box;}}");
 }
 export function makeSearchStyles() {
-  return /*#__PURE__*/css("position:relative;display:inline-block;.k-input{transition:width ", theme.transition, ";}.k-btn{position:absolute;top:0;right:0;z-index:1;}.k-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.k-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("position:relative;display:inline-block;.k-input{transition:width ", input.transition, ";}.k-btn{position:absolute;top:0;right:0;z-index:1;}.k-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.k-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {
     if (size == 'default') return;
     return /*#__PURE__*/css(".k-input.k-", size, "{width:", input[size].height, ";}");
   }), ";.k-input{width:", input.default.height, ";}.k-input-inner{padding:0!important;}}&.k-line{.k-input-inner{border-width:0;}&.k-open{.k-input-inner{border-bottom-width:1px;}}}");

package/components/layout/styles.d.ts

@@ -1,6 +1,6 @@
 import '../../styles/global';
 export declare const themes: readonly ["light", "dark", "white"];
-export declare function getCollapseWidth(): any;
+export declare function getCollapseWidth(): string;
 export declare function makeLayoutStyles(): string;
 export declare function makeHeaderStyles(): string;
 export declare function makeAsideStyles(): string;

package/components/layout/styles.js

@@ -7,6 +7,10 @@ import { menu } from '../menu/styles';
 var sizes = ['small', 'large'];
 export var themes = ['light', 'dark', 'white'];
 var defaults = {
+  get transition() {
+    return theme.transition.large;
+  },
+
   get color() {
     return menu.item.color;
   },
@@ -61,17 +65,17 @@ export function getCollapseWidth() {
   return layout.collapsedWidth;
 }
 export function makeLayoutStyles() {
-  return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", theme.transition, ";&.k-has-aside{flex-direction:row;}.k-layout-footer{padding:", layout.footerPadding, ";}.k-layout-body{flex:1;}");
+  return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.k-has-aside{flex-direction:row;}.k-layout-footer{padding:", layout.footerPadding, ";}.k-layout-body{flex:1;}");
 }
 export function makeHeaderStyles() {
-  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", theme.transition, ";&.k-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.k-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
     return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";}");
   }), ";");
 }
 export function makeAsideStyles() {
-  return /*#__PURE__*/css("transition:width ", theme.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("transition:width ", layout.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
     return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");

package/components/menu/index.spec.js

@@ -18,14 +18,14 @@ describe('Menu', function () {
             title = element.querySelector('.k-expanded .k-menu-title');
             title.click();
             _context.next = 5;
-            return wait(300);
+            return wait(500);
 
           case 5:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('expandedKeys')).to.eql([]);
             title.click();
             _context.next = 10;
-            return wait(300);
+            return wait(500);
 
           case 10:
             expect(element.outerHTML).to.matchSnapshot();
@@ -39,14 +39,14 @@ describe('Menu', function () {
     }, _callee);
   })));
   it('select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var _mount2, instance, element, menu, _element$querySelecto, title, disabledTitle, subTitle;
+    var _mount2, instance, element, _element$querySelecto, title, disabledTitle, subTitle;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
-            menu = instance.refs.__test;
+            expect(element.innerHTML).to.matchSnapshot();
             _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
             title.click();
             _context2.next = 6;
@@ -54,14 +54,14 @@ describe('Menu', function () {
 
           case 6:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('1');
+            expect(instance.get('selectedKey')).to.eql('1');
             disabledTitle.click();
             _context2.next = 11;
             return wait();
 
           case 11:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('1');
+            expect(instance.get('selectedKey')).to.eql('1');
             subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
             subTitle.click();
             _context2.next = 17;
@@ -69,9 +69,16 @@ describe('Menu', function () {
 
           case 17:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('3-1');
+            expect(instance.get('selectedKey')).to.eql('3-1'); // clear
 
-          case 19:
+            instance.set('selectedKey', '');
+            _context2.next = 22;
+            return wait();
+
+          case 22:
+            expect(element.querySelector('.k-highlighted')).to.be.null;
+
+          case 23:
           case "end":
             return _context2.stop();
         }

package/components/menu/item.d.ts

@@ -2,7 +2,7 @@ import { Component, TypeDefs, Key } from 'intact-vue-next';
 import { Menu } from './menu';
 export interface MenuItemProps {
     key: Key;
-    to?: string;
+    to?: string | object;
     dot?: boolean;
     disabled?: boolean;
 }
@@ -18,7 +18,6 @@ export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     parentMenu: Menu<Key>;
     parentMenuItem: MenuItem | null;
     private expanded;
-    private highlight;
     private dropdown;
     private router;
     init(): void;

package/components/menu/item.js

@@ -4,17 +4,18 @@ import { __decorate } from "tslib";
 import { Component, inject, provide } from 'intact-vue-next';
 import { ROOT_MENU, MENU } from './menu';
 import template from './item.vdt';
-import { bind, isExternalLink } from '../utils';
-import { useHighlight } from './useHighlight';
+import { bind } from '../utils';
 import { useExpanded } from './useExpanded';
 import { useDropdown } from './useDropdown';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter, navigate } from '../../hooks/useRouter';
+import { useRecordItem } from '../../hooks/useRecordComponent';
+import { MENU_RECORD_KEY } from './useHighlight';
 var typeDefs = {
   key: {
     type: [String, Number],
     required: true
   },
-  to: String,
+  to: [String, Object],
   dot: Boolean,
   disabled: Boolean
 };
@@ -36,7 +37,6 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
     _this.parentMenu = inject(MENU);
     _this.parentMenuItem = inject(MENU_ITEM, null);
     _this.expanded = useExpanded(_this.rootMenu, _this.parentMenu);
-    _this.highlight = useHighlight(_this.rootMenu, _this.parentMenuItem);
     _this.dropdown = useDropdown(_this.rootMenu, _this.parentMenu);
     _this.router = useRouter();
     return _this;
@@ -46,35 +46,28 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
 
   _proto.init = function init() {
     provide(MENU_ITEM, this);
+    useRecordItem(MENU_RECORD_KEY);
   };
 
   _proto.onClick = function onClick(hasSubMenu, e) {
     var _this$get = this.get(),
         disabled = _this$get.disabled,
-        to = _this$get.to;
+        to = _this$get.to,
+        key = _this$get.key;
 
     if (disabled) return;
 
     if (hasSubMenu) {
       this.expanded.toggle();
     } else {
-      this.highlight.select();
+      this.rootMenu.highlight.select(key);
     }
 
     this.trigger('click', e);
 
     if (!hasSubMenu) {
       this.trigger('select', this, e);
-
-      if (to) {
-        var router = this.router.value;
-
-        if (router && !isExternalLink(to)) {
-          router.push(to);
-        } else {
-          location.href = to;
-        }
-      }
+      navigate(this.router.value, to);
     }
   };
 

package/components/menu/item.vdt.js

@@ -32,9 +32,9 @@ export default function ($props, $blocks, $__proto__) {
       disabled = _this$get.disabled,
       dot = _this$get.dot;
 
-  var _this$highlight = this.highlight,
-      isHighlighted = _this$highlight.isHighlighted,
-      isSelected = _this$highlight.isSelected;
+  var _rootMenu$highlight = rootMenu.highlight,
+      isHighlighted = _rootMenu$highlight.isHighlighted,
+      isSelected = _rootMenu$highlight.isSelected;
   var isExpandedKey = this.expanded.isExpanded;
   var isExpanded = isExpandedKey(key);
 
@@ -50,7 +50,7 @@ export default function ($props, $blocks, $__proto__) {
 
   var classNameObj = (_classNameObj = {
     'k-menu-item': true
-  }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(), _classNameObj['k-highlighted'] = isHighlighted(), _classNameObj[makeItemStyles()] = true, _classNameObj);
+  }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(key), _classNameObj['k-highlighted'] = isHighlighted(key), _classNameObj[makeItemStyles()] = true, _classNameObj);
   var showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
 
   var title = function title(children) {

package/components/menu/menu.d.ts

@@ -1,4 +1,5 @@
 import { Component, TypeDefs, Key } from 'intact-vue-next';
+import { useHighlight } from './useHighlight';
 export interface MenuProps<K extends Key = Key> {
     expandedKeys?: K[];
     selectedKey?: K;
@@ -22,5 +23,7 @@ export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, M
     static defaults: () => Partial<MenuProps<Key>>;
     rootMenu: Menu<Key> | null;
     parentMenu: Menu<Key> | null;
+    subExpandedKeys?: Set<K>;
+    highlight?: ReturnType<typeof useHighlight>;
     init(): void;
 }