@king-design/intact 2.0.0-beta.1 → 2.0.0

package/components/wave/index.ts

@@ -0,0 +1,94 @@
+import {Component, TypeDefs, findDomFromVNode, VNode, nextTick} from 'intact';
+import {isArray} from 'intact-shared';
+import {bind} from '../utils';
+import {makeStyles} from './styles';
+import {theme} from '../../styles/theme';
+
+export interface WaveProps {
+    disabled?: boolean
+    color?: string
+    inset?: string
+}
+
+const typeDefs: Required<TypeDefs<WaveProps>> = {
+    disabled: Boolean,
+    color: String,
+    inset: String,
+};
+
+const defaults = (): Partial<WaveProps> => ({
+    color: theme.color.primary,
+    inset: '-1px'
+});
+
+export class Wave extends Component<WaveProps> {
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static template = function(this: Wave) {
+        const children = this.get('children') as VNode;
+        if (process.env.NODE_ENV !== 'production') {
+            if (!children || (isArray(children) && children.length > 1)) {
+                throw new Error('Wave must receive only one Element children');
+            }
+        }
+        return children;
+    };
+
+    private instance: HTMLElement | null = null;
+    private className!: string;
+    private timer: number = 0;
+
+    private initClassName() {
+        const {color, inset} = this.get();
+        this.className = makeStyles(color || theme.color.primary, inset!);
+    }
+
+    @bind
+    mounted() {
+        const children = this.get('children') as VNode;
+        const node = findDomFromVNode(children, true) as HTMLElement;
+        if (!node || node.nodeType !== 1) {
+            return;
+        }
+
+        this.instance = node;
+        node.addEventListener('click', this.onClick);
+    }
+
+    beforeUnmount() {
+        if (this.instance) {
+            this.instance!.removeEventListener('click', this.onClick);
+        }
+        this.resetAnimation();
+    }
+
+    @bind
+    private onClick(e: Event) {
+        this.initClassName();
+
+        const {instance} = this;
+        const {disabled} = this.get();
+        const node = e.target as HTMLElement;
+
+        // 点击输入框中的icon时，此时输入框不需要动效
+        const isInput = instance!.classList.contains('k-input-wrapper');
+        if (disabled || isInput && node!.classList.contains('k-icon')) return;
+
+        this.resetAnimation();
+      
+        instance!.addEventListener('animationend', this.resetAnimation);
+        this.timer = window.setTimeout(() => {        
+            instance!.classList.add(this.className);
+        });
+    }
+
+    @bind
+    resetAnimation() {
+        const node = this.instance;
+        if (!node) return;
+
+        node.classList.remove(this.className);
+        node.removeEventListener('animationend', this.resetAnimation);
+        clearTimeout(this.timer);
+    }
+}

package/components/wave/styles.ts

@@ -0,0 +1,50 @@
+import {css, keyframes} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults, palette} from '../../styles/utils';
+import '../../styles/global';
+
+const defaults = {
+    inset: '-3px',
+};
+
+let wave: typeof defaults;
+setDefault(() => {
+    wave = deepDefaults(theme, {wave: defaults}).wave;
+});
+
+export function makeStyles(color: string, inset: string) {
+    const waveEffect = keyframes`
+        100% {
+            top: calc(${inset} + ${wave.inset});
+            bottom: calc(${inset} + ${wave.inset});
+            left: calc(${inset} + ${wave.inset});
+            right: calc(${inset} + ${wave.inset});
+            opacity: 0.05;
+        }
+    `;
+
+    return css`
+        position: relative;
+        &::after {
+            display: block;
+            content: '';
+            position: absolute;
+            top: ${inset};
+            bottom: ${inset};
+            left: ${inset};
+            right: ${inset};
+            opacity: 0.4;
+            border-radius: 4px;
+            z-index: 2;
+            animation: ${waveEffect} .2s ease-in;
+            animation-fill-mode: forwards;
+            border: 2px solid ${color};
+        }
+        &.k-circle,
+        &.k-radio-wrapper {
+            &:after {
+                border-radius: calc(${theme.large.height} / 2 + 4px);
+            }
+        }
+    `;
+}

package/es/components/breadcrumb/item.d.ts

@@ -1,6 +1,6 @@
 import { Component, TypeDefs } from 'intact';
 export interface BreadcrumbItemProps {
-    to?: string;
+    to?: string | object;
 }
 export declare class BreadcrumbItem extends Component<BreadcrumbItemProps> {
     static template: string | import("intact").Template<any>;

package/es/components/breadcrumb/item.js

@@ -4,10 +4,9 @@ import { __decorate } from "tslib";
 import { Component } from 'intact';
 import { bind } from '../utils';
 import template from './item.vdt';
-import { isExternalLink } from '../utils';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter, navigate } from '../../hooks/useRouter';
 var typeDefs = {
-  to: String
+  to: [String, Object]
 };
 export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(BreadcrumbItem, _Component);
@@ -29,17 +28,7 @@ export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
   var _proto = BreadcrumbItem.prototype;
 
   _proto.onClick = function onClick() {
-    var to = this.get('to');
-
-    if (to) {
-      var router = this.router.value;
-
-      if (router && !isExternalLink(to)) {
-        router.push(to);
-      } else {
-        window.location.href = to;
-      }
-    }
+    navigate(this.router.value, this.get('to'));
   };
 
   return BreadcrumbItem;

package/es/components/breadcrumb/styles.js

@@ -24,5 +24,5 @@ setDefault(function () {
   }).breadcrumb;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";.k-breadcrumb-item{display:inline-block;&:last-of-type .k-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.k-breadcrumb-link,.k-breadcrumb-link a{color:", breadcrumb.color, ";}a.k-breadcrumb-link:hover,.k-breadcrumb-link a:hover{color:", breadcrumb.hoverColor, ";}.k-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
+  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.k-breadcrumb-item{&:last-of-type .k-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.k-breadcrumb-link,.k-breadcrumb-link a{color:", breadcrumb.color, ";}a.k-breadcrumb-link,.k-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.k-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
 }

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

@@ -4,6 +4,8 @@ import { getRestProps } from '../utils';
 import { Icon } from '../icon';
 import { makeButtonStyles } from './styles';
 import { DynamicButton } from './dynamicButton';
+import { Wave } from '../wave';
+import { button as theme } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -72,22 +74,29 @@ export default function ($props, $blocks, $__proto__) {
   var buttonGroup = this.buttonGroup;
   var checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
   var isCheckType = checkType !== 'none';
-  return _$cc(DynamicButton, _extends({
-    'className': _$cn(classNameObj),
-    'tagName': tagName
-  }, getRestProps(this), {
-    'ref': this.elementRef,
-    'tabindex': disabled || loading ? '-1' : tabindex,
-    'ev-click': this.onClick,
-    'ev-mouseup': this.onMouseUp,
-    'htmlType': htmlType,
-    'name': isCheckType ? null : name,
-    'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, 'k-button-input', {
-      'type': checkType,
-      'name': name,
-      'checked': checked,
-      'tabindex': '-1'
-    }) : undefined]
-  }), null, this.elementRef);
+  var typeStyles = theme[type];
+  var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
+  return _$cc(Wave, {
+    'disabled': loading || disabled || type === 'none' || type === 'link',
+    'inset': '-2px',
+    'color': waveColor,
+    'children': _$cc(DynamicButton, _extends({
+      'className': _$cn(classNameObj),
+      'tagName': tagName
+    }, getRestProps(this), {
+      'ref': this.elementRef,
+      'tabindex': disabled || loading ? '-1' : tabindex,
+      'ev-click': this.onClick,
+      'ev-mouseup': this.onMouseUp,
+      'htmlType': htmlType,
+      'name': isCheckType ? null : name,
+      'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, 'k-button-input', {
+        'type': checkType,
+        'name': name,
+        'checked': checked,
+        'tabindex': '-1'
+      }) : undefined]
+    }), null, this.elementRef)
+  });
 }
 ;

package/es/components/button/styles.d.ts

@@ -1,6 +1,87 @@
 import '../../styles/global';
+declare type TypeStyles = {
+    color: string;
+    bgColor: string;
+    borderColor: string;
+    hoverBorderColor: string;
+    ghostColor: string;
+};
+declare type SizeStyles = {
+    fontSize: string;
+    height: string;
+    padding: string;
+};
 export declare const types: readonly ["primary", "warning", "danger", "active", "success"];
-declare let button: any;
+declare const defaults: {
+    readonly transition: string;
+    active: TypeStyles;
+    secondary: {
+        readonly color: string;
+        readonly borderColor: string;
+        readonly hoverBgColor: string;
+        readonly activeBgColor: string;
+    };
+    link: {
+        readonly color: string;
+        readonly hoverColor: string;
+        readonly hoverBgColor: string;
+    };
+    none: {
+        readonly hoverBgColor: string;
+    };
+    group: {
+        primary: {
+            readonly borderColor: string;
+        };
+        warning: {
+            readonly borderColor: string;
+        };
+        danger: {
+            readonly borderColor: string;
+        };
+        success: {
+            readonly borderColor: string;
+        };
+    };
+} & {
+    readonly color: string;
+    bgColor: string;
+    lineHeight: string;
+    readonly padding: string;
+    readonly borderColor: string;
+    readonly borderRadius: string;
+    readonly fontSize: string;
+    readonly height: string;
+    readonly hoverBorderColor: string;
+    readonly hoverColor: string;
+    ghost: {
+        color: string;
+        readonly hoverColor: string;
+        borderColor: string;
+        readonly hoverBorderColor: string;
+    };
+    icon: {
+        gap: string;
+        fontSize: string;
+    };
+    disabled: {
+        readonly color: string;
+        readonly bgColor: string;
+        readonly borderColor: string;
+        readonly ghostBorderColor: string;
+    };
+} & {
+    primary: TypeStyles;
+    warning: TypeStyles;
+    danger: TypeStyles;
+    success: TypeStyles;
+    active: TypeStyles;
+} & {
+    small: SizeStyles;
+    large: SizeStyles;
+    mini: SizeStyles;
+};
+declare let button: typeof defaults;
 export { button };
 export declare function makeButtonStyles({ iconSide }: {
     iconSide?: string;

package/es/components/button/styles.js

@@ -149,6 +149,10 @@ var btnSizeStyles = sizes.reduce(function (memo, size) {
   return memo;
 }, {});
 var defaults = deepDefaults({
+  get transition() {
+    return theme.transition.middle;
+  },
+
   active: btnActiveStyles,
   secondary: {
     get color() {
@@ -175,6 +179,16 @@ var defaults = deepDefaults({
 
     get hoverColor() {
       return theme.color.linkHover;
+    },
+
+    get hoverBgColor() {
+      return theme.color.hoverBg;
+    }
+
+  },
+  none: {
+    get hoverBgColor() {
+      return theme.color.bg;
     }
 
   },
@@ -221,10 +235,10 @@ export function makeButtonStyles(_ref) {
   return cx(
   /*#__PURE__*/
   // extract static styles to individual css method for performance
-  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", theme.transition, ";line-height:", button.lineHeight, ";&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
+  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
     return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link{&,&:hover{border:none;background:transparent;}&.k-active{color:", theme.color.primary, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.k-btn-icon{width:", styles.height, ";}}");
   }), "&.k-btn-icon{width:", button.height, ";padding:0;.k-icon{margin:0;}}&.k-fluid{width:100%;padding:0;}&.k-circle{border-radius:calc(", button.large.height, " / 2);}&.k-loading{", _mapInstanceProperty(types).call(types, function (type) {

package/es/components/card/styles.js

@@ -5,7 +5,7 @@ import '../../styles/global';
 var defaults = {
   border: '1px solid #e5e5e5',
   padding: '16px',
-  boxShadow: '0 0 20px 0 rgba(0, 0, 0, .06)',
+  boxShadow: '0 0 8px 0 rgba(0, 0, 0, .05)',
   headerHeight: '48px',
   headerFontSize: '14px',
   bgColor: '#fff'

package/es/components/carousel/styles.js

@@ -3,7 +3,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
-  transition: ".5s ease",
+  get transition() {
+    return theme.transition.large;
+  },
+
   height: "300px",
   indicator: {
     bottom: "8px",

package/es/components/carousel/useSlide.js

@@ -48,7 +48,7 @@ export function useSlide(getItems, getItemsWithCloned) {
 
   function _translateToItem() {
     _translateToItem = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, oldIndex, newIndex, keepDirection) {
-      var itemsWithCloned, length;
+      var itemsWithCloned, length, lengthWithCloned;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -62,7 +62,7 @@ export function useSlide(getItems, getItemsWithCloned) {
 
             case 2:
               if (!keepDirection) {
-                _context.next = 13;
+                _context.next = 14;
                 break;
               }
 
@@ -75,25 +75,26 @@ export function useSlide(getItems, getItemsWithCloned) {
               }
 
               _context.next = 8;
-              return setTranslate(itemsWithCloned[0], false);
+              return setTranslate(itemsWithCloned[(itemsWithCloned.length - length) / 2 - 1], false);
 
             case 8:
-              _context.next = 13;
+              _context.next = 14;
               break;
 
             case 10:
               if (!(oldIndex === 0 && newIndex === length - 1)) {
-                _context.next = 13;
+                _context.next = 14;
                 break;
               }
 
-              _context.next = 13;
-              return setTranslate(itemsWithCloned[itemsWithCloned.length - 1], false);
+              lengthWithCloned = itemsWithCloned.length;
+              _context.next = 14;
+              return setTranslate(itemsWithCloned[lengthWithCloned - (lengthWithCloned - length) / 2], false);
 
-            case 13:
+            case 14:
               setTranslate(item, true);
 
-            case 14:
+            case 15:
             case "end":
               return _context.stop();
           }

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

@@ -14,7 +14,7 @@ describe('Cascader', function () {
           case 0:
             unmount();
             _context.next = 3;
-            return wait(400);
+            return wait(500);
 
           case 3:
           case "end":

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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["className", "disabled", "falseValue", "children", "value", "trueValue", "style", "indeterminate", "title"];
-import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact';
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact';
 import { getRestProps } from '../utils';
 import makeStyles from './styles';
+import { Wave } from '../wave';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -51,15 +52,19 @@ export default function ($props, $blocks, $__proto__) {
     'title': title,
     'ev-click': this.onClick,
     'ev-keypress': this.onKeypress
-  }, events), [_$ce(2, 'span', _$cv('input', _extends({
-    'type': 'checkbox',
-    'checked': isChecked,
-    'value': trueValue,
-    'trueValue': trueValue,
-    'falseValue': falseValue,
+  }, events), [_$cc(Wave, {
     'disabled': disabled,
-    'tabindex': '-1',
-    'ref': this.inputRef
-  }, getRestProps(this, rest))), 2, 'k-checkbox-wrapper'), children ? _$ce(2, 'span', children, 0, 'k-checkbox-text') : undefined]);
+    'inset': '-2px',
+    'children': _$ce(2, 'span', _$cv('input', _extends({
+      'type': 'checkbox',
+      'checked': isChecked,
+      'value': trueValue,
+      'trueValue': trueValue,
+      'falseValue': falseValue,
+      'disabled': disabled,
+      'tabindex': '-1',
+      'ref': this.inputRef
+    }, getRestProps(this, rest))), 2, 'k-checkbox-wrapper')
+  }), children ? _$ce(2, 'span', children, 0, 'k-checkbox-text') : undefined]);
 }
 ;

package/es/components/checkbox/styles.js

@@ -14,7 +14,7 @@ var defaults = {
   },
 
   get transition() {
-    return theme.transition;
+    return theme.transition.small;
   },
 
   bgColor: '#fff',
@@ -71,5 +71,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{display:inline-block;width:", checkbox.width, ";height:", checkbox.width, ";vertical-align:middle;border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{vertical-align:middle;margin-left:", checkbox.text.gap, ";display:inline-block;flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}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;}}");
 }

package/es/components/collapse/item.vdt.js

@@ -39,7 +39,8 @@ export default function ($props, $blocks, $__proto__) {
 
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['title'](_$no)), _$cc(Icon, {
-    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['ion-ios-arrow-right'] = true, _$cn2))
+    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['ion-ios-arrow-right'] = true, _$cn2)),
+    'hoverable': !disabled
   })], 0, _$cn(kls('title')), {
     'ev-click': this.toggle
   }), _$cc(Transition, _extends({

package/es/components/collapse/styles.js

@@ -6,6 +6,10 @@ export var kls = function kls(className) {
   return "k-collapse-" + className;
 };
 var defaults = {
+  get transition() {
+    return theme.transition.large;
+  },
+
   fontSize: '12px',
   titleMarginRight: '8px',
   borderPadding: '0 24px',
@@ -27,5 +31,5 @@ export function makeStyles() {
 }
 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 ", theme.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", theme.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, ";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;}}");
 }

package/es/components/colorpicker/index.d.ts

@@ -1,10 +1,12 @@
 import { Component, TypeDefs } from 'intact';
 import { Sizes } from '../../styles/utils';
+import { Container } from '../portal';
 export interface ColorpickerProps {
     value: string;
     presets?: string[];
     size?: Sizes;
     disabled?: boolean;
+    container?: Container;
 }
 export interface ColorpickerEvents {
 }

package/es/components/colorpicker/index.js

@@ -9,7 +9,8 @@ var typeDefs = {
   },
   presets: Array,
   size: sizes,
-  disabled: Boolean
+  disabled: Boolean,
+  container: [Function, String]
 };
 
 var defaults = function defaults() {

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

@@ -38,7 +38,7 @@ describe('Colorpicker', function () {
           case 0:
             unmount();
             _context2.next = 3;
-            return wait(400);
+            return wait(500);
 
           case 3:
           case "end":

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

@@ -18,7 +18,8 @@ export default function ($props, $blocks, $__proto__) {
       presets = _this$get.presets,
       value = _this$get.value,
       size = _this$get.size,
-      disabled = _this$get.disabled;
+      disabled = _this$get.disabled,
+      container = _this$get.container;
 
   var classNameObj = (_classNameObj = {
     'k-colorpicker': true
@@ -33,6 +34,7 @@ export default function ($props, $blocks, $__proto__) {
     },
     'trigger': 'click',
     'disabled': disabled,
+    'container': container,
     'children': [_$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-inner', {
       'style': {
         backgroundColor: value

package/es/components/context.d.ts

@@ -2,10 +2,13 @@ import { Component, ComponentConstructor } from 'intact';
 export interface ProviderProps<T> {
     value?: T;
 }
+export interface ConsumerProps<T> {
+    defaultValue?: T;
+}
 declare type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>>;
-declare type ConsumerConstructor = ComponentConstructor<Component<{}>>;
+declare type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerProps<T>>>;
 export declare function createContext<T = any>(defaultValue?: T): {
     Provider: ProviderConstructor<T>;
-    Consumer: ConsumerConstructor;
+    Consumer: ConsumerConstructor<T>;
 };
 export {};