@king-design/vue 3.0.0-beta.2 → 3.0.1

package/components/badge/styles.js

@@ -22,5 +22,5 @@ setDefault(function () {
   }).badge;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:75%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
+  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
 }

package/components/button/group.d.ts

@@ -4,6 +4,7 @@ export interface ButtonGroupProps {
     value?: any;
     checkType?: 'none' | 'radio' | 'checkbox';
     fluid?: boolean;
+    seperate?: boolean;
 }
 export declare class ButtonGroup extends Component<ButtonGroupProps> {
     static template: string | import("intact").Template<any>;

package/components/button/group.js

@@ -7,7 +7,8 @@ var typeDefs = {
   vertical: Boolean,
   value: null,
   fluid: Boolean,
-  checkType: ['none', 'radio', 'checkbox']
+  checkType: ['none', 'radio', 'checkbox'],
+  seperate: Boolean
 };
 
 var defaults = function defaults() {

package/components/button/group.vdt.js

@@ -13,12 +13,14 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       vertical = _this$get.vertical,
       children = _this$get.children,
-      fluid = _this$get.fluid;
+      fluid = _this$get.fluid,
+      seperate = _this$get.seperate;
 
   var classNameObj = (_classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,
-    'k-fluid': fluid
+    'k-fluid': fluid,
+    'k-seperate': seperate
   }, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles()] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)

package/components/button/index.vdt.js

@@ -78,7 +78,7 @@ export default function ($props, $blocks, $__proto__) {
   var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
   return _$cc(Wave, {
     'disabled': loading || disabled || type === 'none' || type === 'link',
-    'inset': '-2px',
+    'inset': type === 'flat' ? '-1px' : '-2px',
     'color': waveColor,
     'children': _$cc(DynamicButton, _extends({
       'className': _$cn(classNameObj),

package/components/button/styles.js

@@ -14,7 +14,7 @@ var btnStyles = {
   lineHeight: '1.15',
 
   get padding() {
-    return "0 " + theme.default.padding;
+    return "0 16px";
   },
 
   get borderColor() {
@@ -146,6 +146,13 @@ var btnSizeStyles = sizes.reduce(function (memo, size) {
     }
 
   };
+
+  if (size === 'large') {
+    Object.defineProperty(memo[size], 'padding', {
+      value: "0 24px"
+    });
+  }
+
   return memo;
 }, {});
 var defaults = deepDefaults({
@@ -255,13 +262,13 @@ export function makeButtonStyles(_ref) {
   }) + "\n                    }\n                }\n            ", ";"));
 }
 export function makeButtonGroupStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
-  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{>.k-btn{display:block;", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{flex-direction:column;>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
-  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}");
+  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.k-seperate{gap:8px;>.k-btn{border-radius:", button.borderRadius, "!important;}}");
 }

package/components/checkbox/styles.js

@@ -38,11 +38,11 @@ var defaults = {
 
   },
   inner: {
-    width: '5px',
+    width: '6px',
     height: '10px',
     top: '0px',
-    left: '5px',
-    border: '1px solid #fff'
+    left: '4px',
+    border: '2px solid #fff'
   },
   // disabled
   disabled: {
@@ -69,10 +69,6 @@ var defaults = {
       }
 
     }
-  },
-  // indeterminate
-  indeterminate: {
-    innerLeft: '4px'
   }
 };
 var checkbox;
@@ -82,5 +78,5 @@ setDefault(function () {
   }).checkbox;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}&:hover{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.k-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
 }

package/components/collapse/styles.js

@@ -32,9 +32,9 @@ setDefault(function () {
   }).collapse;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";transform-origin:center center 0;}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 }
 export function makeItemStyles() {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";transform-origin:left center 0;}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
 }

package/components/dropdown/dropdown.js

@@ -28,7 +28,8 @@ var typeDefs = {
 var defaults = function defaults() {
   return {
     trigger: 'hover',
-    of: 'self'
+    of: 'self',
+    value: false
   };
 };
 

package/components/dropdown/usePosition.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import { useInstance, findDomFromVNode } from 'intact-vue-next';
 import { position } from '../position';
 import { noop } from 'intact-shared';
 import { isObject } from 'intact-shared';
+import { isEqualObject } from '../utils';
 export function usePosition() {
   var instance = useInstance();
   var positioned = {
@@ -18,7 +18,7 @@ export function usePosition() {
     instance.watch(item, function (newValue, oldValue) {
       // return if object is the same
       if (isObject(newValue) && isObject(oldValue) && // is not event object
-      !(newValue instanceof Event) && _JSON$stringify(newValue) === _JSON$stringify(oldValue)) {
+      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) {
         return;
       }
 

package/components/form/index.spec.js

@@ -12,6 +12,7 @@ import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact-vue-next';
 import { Form, FormItem } from './';
 import { Input } from '../input';
+import { Select } from '../select';
 
 RemoteDemo.prototype.validateUserName = function (value) {
   // mock api
@@ -1317,4 +1318,48 @@ describe('Form', function () {
       }
     }, _callee7);
   })));
+  it('should not validate when select is disabled on init', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context10;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+                _this3.Form = Form;
+                _this3.FormItem = FormItem;
+                _this3.Select = Select;
+                return _this3;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Form, FormItem, Select} = this;\n                <Form ref=\"form\">\n                    <FormItem rules={{required: true}}>\n                        <Select disabled />\n                    </FormItem>\n                </Form>\n            ";
+            _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+            _context11.next = 5;
+            return wait(500);
+
+          case 5:
+            expect(element.querySelector('.k-form-error')).to.be.null;
+
+          case 6:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee8);
+  })));
 });

package/components/form/styles.js

@@ -50,7 +50,7 @@ setDefault(function () {
   }).form;
 });
 export function makeItemStyles() {
-  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-wrapper{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-wrapper{border:none;}}.k-form-append{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, ";flex-shrink:0;}.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-wrapper{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-wrapper{border:none;}}.k-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
 }
 export function makeFormStyles() {
   var _context;

package/components/icon/index.vdt.js

@@ -44,8 +44,9 @@ export default function ($props, $blocks, $__proto__) {
   }
 
   return _$cv('i', _extends({
-    'className': _$cn(classNameObj),
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
     'style': addStyle(style, _style)
-  }, getRestProps(this)), children);
+  }), children);
 }
 ;

package/components/layout/body.d.ts

@@ -2,6 +2,7 @@ import { Component } from 'intact-vue-next';
 export declare class Body extends Component {
     static template: string | import("intact").Template<any>;
     private layout;
+    init(): void;
     private getClassNames;
     private getStyles;
 }

package/components/layout/body.js

@@ -1,8 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, inject } from 'intact-vue-next';
+import { Component, inject, provide } from 'intact-vue-next';
 import template from './template.vdt';
-import { LAYOUT, getStyle } from './helpers';
+import { LAYOUT, getStyle, BODY } from './helpers';
 import { addStyle } from '../utils';
 export var Body = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Body, _Component);
@@ -23,6 +23,10 @@ export var Body = /*#__PURE__*/function (_Component) {
 
   var _proto = Body.prototype;
 
+  _proto.init = function init() {
+    provide(BODY, this);
+  };
+
   _proto.getClassNames = function getClassNames() {
     var _ref;
 
@@ -45,6 +49,7 @@ export var Body = /*#__PURE__*/function (_Component) {
 
     if (!hasFixedAside && !hasFixedHeader) return style;
     return addStyle(style, {
+      // FIXME: we must use padding instead of margin, otherwise the table's width is wired
       paddingLeft: hasFixedAside ? getStyle(asideWidth) : null,
       marginTop: hasFixedHeader ? getStyle(headerHeight) : null
     });

package/components/layout/header.d.ts

@@ -5,6 +5,8 @@ export interface HeaderProps {
     height?: number | string;
     style?: string | Record<string, string>;
     theme?: MenuProps['theme'];
+    blur?: boolean;
+    boxShadow?: boolean;
 }
 export declare class Header extends Component<HeaderProps> {
     static template: string | import("intact").Template<any>;

package/components/layout/header.js

@@ -9,7 +9,9 @@ var typeDefs = {
   fixed: Boolean,
   height: [Number, String],
   style: [String, Object],
-  theme: themes
+  theme: themes,
+  blur: Boolean,
+  boxShadow: Boolean
 };
 
 var defaults = function defaults() {
@@ -44,11 +46,15 @@ export var Header = /*#__PURE__*/function (_Component) {
     var _this$get = this.get(),
         className = _this$get.className,
         fixed = _this$get.fixed,
-        theme = _this$get.theme;
+        theme = _this$get.theme,
+        blur = _this$get.blur,
+        boxShadow = _this$get.boxShadow;
 
     return _ref = {
       'k-layout-header': true,
-      'k-fixed': fixed
+      'k-fixed': fixed,
+      'k-blur': blur,
+      'k-box-shadow': boxShadow
     }, _ref["k-" + theme] = true, _ref[className] = className, _ref[makeHeaderStyles()] = true, _ref;
   };
 

package/components/layout/helpers.d.ts

@@ -1,5 +1,6 @@
 export declare const ROOT_LAYOUT = "RootLayout";
 export declare const LAYOUT = "Layout";
+export declare const BODY = "LayoutBody";
 export declare const defaultHeight = "64px";
 export declare const defaultWidth = "200px";
 export declare function getStyle(height: number | string): string;

package/components/layout/helpers.js

@@ -1,6 +1,7 @@
 import { isNumber } from 'intact-shared';
 export var ROOT_LAYOUT = 'RootLayout';
 export var LAYOUT = 'Layout';
+export var BODY = 'LayoutBody';
 export var defaultHeight = "64px";
 export var defaultWidth = "200px";
 export function getStyle(height) {

package/components/layout/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/components/layout/index.spec.js

@@ -0,0 +1,53 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { mount, unmount } from '../../test/utils';
+import { Component } from 'intact-vue-next';
+import { Layout, Header, Aside, Body } from './';
+describe('Layout', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('nest Layout in Body with fixed header', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+                _this.Layout = Layout;
+                _this.Header = Header;
+                _this.Aside = Aside;
+                _this.Body = Body;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Layout, Header, Aside, Body } = this;\n                <Layout>\n                    <Header fixed />\n                    <Body>\n                        <Layout>\n                            <Aside fixed />\n                            <Body>body</Body>\n                        </Layout>\n                    </Body>\n                </Layout>\n            ";
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/components/layout/layout.d.ts

@@ -9,6 +9,7 @@ export declare class Layout extends Component {
         asideWidth: string | number;
     };
     layout: Layout | null;
+    private body;
     init(): void;
     private getClassNames;
     private getStyles;

package/components/layout/layout.js

@@ -4,7 +4,7 @@ import { Component, inject, provide } from 'intact-vue-next';
 import template from './template.vdt';
 import { makeLayoutStyles } from './styles';
 import { addStyle } from '../utils';
-import { ROOT_LAYOUT, LAYOUT, getStyle } from './helpers';
+import { ROOT_LAYOUT, LAYOUT, getStyle, BODY } from './helpers';
 import { useParse } from './useParse';
 export var Layout = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Layout, _Component);
@@ -21,6 +21,7 @@ export var Layout = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.parse = useParse();
     _this.layout = inject(LAYOUT, null);
+    _this.body = inject(BODY, null);
     return _this;
   }
 
@@ -52,7 +53,7 @@ export var Layout = /*#__PURE__*/function (_Component) {
   _proto.getStyles = function getStyles() {
     var style = this.get('style');
     var layout = this.layout;
-    if (!layout) return style;
+    if (!layout || this.body) return style;
 
     var _layout$parse = layout.parse(),
         hasFixedHeader = _layout$parse.hasFixedHeader,

package/components/layout/styles.js

@@ -1,7 +1,7 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults, getLeft } from '../../styles/utils';
+import { deepDefaults, getLeft, setAlpha } from '../../styles/utils';
 import '../../styles/global';
 import { menu } from '../menu/styles';
 var sizes = ['small', 'large'];
@@ -21,7 +21,7 @@ var defaults = {
 
   light: {
     get color() {
-      return menu.light.bgColor;
+      return menu.light.item.color;
     },
 
     get bgColor() {
@@ -35,7 +35,7 @@ var defaults = {
   },
   white: {
     get color() {
-      return menu.white.bgColor;
+      return menu.white.item.color;
     },
 
     get bgColor() {
@@ -68,10 +68,10 @@ export function makeLayoutStyles() {
   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 ", layout.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, ";}>.k-menu{background:transparent!important;}&.k-blur{backdrop-filter:blur(20px);background:", setAlpha(layout.bgColor, 0.1), ";}&.k-box-shadow{border-bottom:none!important;box-shadow:", theme.boxShadow, ";}", _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, ";}");
+    return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";&.k-blur{background:", setAlpha(styles.bgColor, 0.1), ";}}");
   }), ";");
 }
 export function makeAsideStyles() {

package/components/menu/styles.js

@@ -132,9 +132,9 @@ export function makeMenuStyles() {
 }
 export function makeTitleStyles() {
   var item = menu.item;
-  return /*#__PURE__*/css("display:flex;align-items:center;padding:", menu.item.padding, ";color:", menu.item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
+  return /*#__PURE__*/css("display:flex;align-items:center;padding:", item.padding, ";color:", item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
 }
 export function makeItemStyles() {
   var item = menu.item;
-  return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;}.k-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotateX(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
+  return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}}.k-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotateX(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
 }

package/components/menu/useDropdown.js

@@ -1,4 +1,4 @@
-import { useInstance, onBeforeMount, onBeforeUpdate, inject } from 'intact-vue-next';
+import { useInstance, onBeforeMount, onBeforeUpdate, inject, createVNode } from 'intact-vue-next';
 import { Menu } from './';
 import { Icon } from '../icon';
 import { isComponentVNode, eachChildren, isTextVNode, isStringOrNumberNotEmpty } from '../utils';
@@ -38,6 +38,11 @@ export function useDropdown(rootMenu, parentMenu) {
           iconVNode = vNode;
         }
       } else {
+        if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
+          // wrap with span for showing text ellipsis
+          vNode = createVNode('span', null, vNode);
+        }
+
         titleVNodes.push(vNode);
       }
     });

package/components/message/message.js

@@ -21,7 +21,7 @@ var defaults = function defaults() {
   return {
     duration: 5000,
     type: 'info',
-    closable: true
+    closable: false
   };
 };
 

package/components/pagination/styles.js

@@ -27,11 +27,8 @@ var defaults = deepDefaults({
 
     get borderRadius() {
       return theme.borderRadius;
-    },
+    } // get hoverBgColor() { return theme.color.hoverBg }
 
-    get hoverBgColor() {
-      return theme.color.hoverBg;
-    }
 
   },
   // goto
@@ -64,7 +61,7 @@ setDefault(function () {
   }).pagination;
 });
 export function makeStyles() {
-  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) {
+  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;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = pagination[size];
     var btnStyles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");

package/components/popover/styles.js

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 var defaults = {
-  width: '240px',
+  width: '320px',
   padding: '8px 16px',
   gap: '8px',
   title: {

package/components/radio/styles.js

@@ -61,5 +61,5 @@ setDefault(function () {
   }).radio;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}&:hover{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}&:hover{.k-radio-wrapper{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
 }

package/components/scrollSelect/styles.js

@@ -23,7 +23,7 @@ var defaults = {
       return theme.color.bg;
     },
 
-    activeFontSize: "1.1em",
+    activeFontSize: "1.3em",
 
     get disabledColor() {
       return theme.color.disabled;

package/components/select/base.vdt.js

@@ -16,6 +16,9 @@ var _$tmp0 = {
   'className': 'ion-load-c',
   'rotate': true
 };
+var _$tmp1 = {
+  'className': 'k-icon-search'
+};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -198,7 +201,7 @@ export default function ($props, $blocks, $__proto__) {
             'ev-click': _this.clear,
             'hoverable': true
           }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
-            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
+            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? filterable && show ? _$cc(Icon, _$tmp1) : _$cc(Icon, {
               'className': 'k-select-arrow k-icon-down',
               'disabled': $props.isDisableArrow
             }) : undefined;

package/components/select/styles.js

@@ -6,7 +6,7 @@ import { deepDefaults, sizes, getRight, getLeft } from '../../styles/utils';
 import '../../styles/global';
 var defaults = deepDefaults({
   get transition() {
-    return theme.transition.middle;
+    return theme.transition.large;
   },
 
   width: "300px",