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

package/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/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/components/context.d.ts

@@ -2,10 +2,13 @@ import { Component, ComponentConstructor } from 'intact-react';
 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 {};

package/components/context.js

@@ -53,14 +53,14 @@ export function createContext(defaultValue) {
       }
 
       _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
-      _this2.ref = inject(injectionKey);
+      _this2.ref = inject(injectionKey, null);
       return _this2;
     }
 
     return Consumer;
   }(Component);
 
-  Consumer.template = consumertemplate;
+  Consumer.template = consumerTemplate;
   return {
     Provider: Provider,
     Consumer: Consumer
@@ -71,8 +71,11 @@ function providerTemplate() {
   return this.$props.children;
 }
 
-function consumertemplate() {
-  return this.$props.children(this.ref.value);
+function consumerTemplate() {
+  var ref = this.ref;
+  var props = this.$props;
+  var value = ref && ref.value || props && props.value;
+  return this.$props.children(value);
 } // Maybe like legency context api of React
 // Error: Can not use it in multiple instances.
 // export function Context<T = any>(defaultValue?: T) {

package/components/datepicker/helpers.d.ts

@@ -1,7 +1,8 @@
 import dayjs, { Dayjs, OpUnitType } from 'dayjs';
 import { StateValueItem } from './basepicker';
-export declare function getNowDate(): dayjs.Dayjs;
+export declare function getNowDate(isEnd?: boolean): dayjs.Dayjs;
 export declare function clearTime(date: Date): void;
+export declare function endTime(date: Date): void;
 export declare function isEqual(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
 export declare function isLT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
 export declare function isGT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;

package/components/datepicker/helpers.js

@@ -2,10 +2,10 @@ import _construct from "@babel/runtime-corejs3/helpers/construct";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
 import dayjs from 'dayjs';
-export function getNowDate() {
+export function getNowDate(isEnd) {
   // only date without time
   var now = new Date();
-  clearTime(now);
+  isEnd ? endTime(now) : clearTime(now);
   return dayjs(now);
 }
 export function clearTime(date) {
@@ -14,6 +14,12 @@ export function clearTime(date) {
   date.setSeconds(0);
   date.setMilliseconds(0);
 }
+export function endTime(date) {
+  date.setHours(23);
+  date.setMinutes(59);
+  date.setSeconds(59);
+  date.setMilliseconds(999);
+}
 export function isEqual(a, b, type) {
   if (type === void 0) {
     type = 'date';

package/components/datepicker/index.spec.js

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

package/components/datepicker/index.vdt.js

@@ -1,4 +1,5 @@
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn, map as _$ma, createTextVNode as _$ct } from 'intact-react';
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn, createTextVNode as _$ct } from 'intact-react';
 import { linkEvent } from 'intact';
 import { DropdownMenu } from '../dropdown';
 import { DatepickerCalendar } from './calendar';
@@ -102,13 +103,17 @@ export default function ($props, $blocks, $__proto__) {
         __$blocks = _$ex({}, $blocks);
 
     return (_$blocks['base-menu'] = function ($super) {
+      var _this2 = this;
+
       return _$cc(DropdownMenu, {
         'className': _$cn(classNameObj),
-        'children': [shortcuts && shortcuts.length ? _$ce(2, 'div', _$ma(shortcuts, function ($value, $key) {
-          return _$ce(2, 'div', isFunction($value.label) ? $value.label() : $value.label, 0, 'k-datepicker-shortcut', {
-            'ev-click': linkEvent($value, this.setByShortcut)
+        'children': [shortcuts && shortcuts.length ? _$ce(2, 'div', _mapInstanceProperty(shortcuts).call(shortcuts, function ($value) {
+          var label = isFunction($value.label) ? $value.label() : $value.label;
+          return _$ce(2, 'div', label, 0, 'k-datepicker-shortcut c-ellipsis', {
+            'title': label,
+            'ev-click': linkEvent($value, _this2.setByShortcut)
           });
-        }, $this), 4, 'k-datepicker-shortcuts') : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, 'k-datepicker-calendars'), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
+        }), 0, 'k-datepicker-shortcuts') : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, 'k-datepicker-calendars'), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
           'type': 'primary',
           'size': 'small',
           'disabled': isDisabledConfirm(),

package/components/datepicker/styles.d.ts

@@ -1,5 +1,50 @@
 import '../../styles/global';
-declare let datepicker: any;
+declare const defaults: {
+    width: string;
+    padding: string;
+    border: string;
+    item: {
+        gutter: string;
+        height: string;
+        readonly hoverBgColor: string;
+        readonly exceedColor: string;
+        readonly todayBorder: string;
+        readonly borderRadius: string;
+        active: {
+            readonly bgColor: string;
+            color: string;
+            todayBorderColor: string;
+        };
+        disabled: {
+            color: string;
+            hoverBgColor: string;
+        };
+        range: {
+            readonly bgColor: string;
+        };
+    };
+    weekday: {
+        padding: string;
+    };
+    month: {
+        padding: string;
+        fontSize: string;
+        valueGap: string;
+    };
+    footer: {
+        padding: string;
+    };
+    shortcuts: {
+        width: string;
+        padding: string;
+        shortcut: {
+            readonly hoverBgcolor: string;
+            height: string;
+            padding: string;
+        };
+    };
+};
+declare let datepicker: typeof defaults;
 export { datepicker };
 export declare function makePanelStyles(): string;
 export declare function makeCalendarStyles(): string;

package/components/diagram/shapes/generateShapes.js

@@ -26,10 +26,10 @@ var shapes = {
 var components = {};
 
 var _loop = function _loop(key) {
-  var _class, _temp;
+  var _class;
 
   var value = shapes[key];
-  components[key] = (_temp = _class = /*#__PURE__*/function (_DShape) {
+  components[key] = (_class = /*#__PURE__*/function (_DShape) {
     _inheritsLoose(_class, _DShape);
 
     function _class() {
@@ -50,7 +50,7 @@ var _loop = function _loop(key) {
     };
 
     return _class;
-  }(DShape), _class.displayName = "D" + key, _temp);
+  }(DShape), _class.displayName = "D" + key, _class);
 };
 
 for (var key in shapes) {

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

@@ -6,10 +6,10 @@ export interface DLineProps extends DBaseProps {
     endArrow?: Arrow;
     startPoint?: Point;
     endPoint?: Point;
-    exit?: Point;
-    entry?: Point;
     from?: Key;
     to?: Key;
+    exit?: Point;
+    entry?: Point;
 }
 declare type Arrow = 'none' | 'classic' | 'classicThin' | 'block' | 'blockThin' | 'open' | 'openThin' | 'oval' | 'diamond' | 'diamondThin';
 declare type Point = [number, number];

package/components/diagram/shapes/line.js

@@ -12,7 +12,6 @@ var mxCell = mx.mxCell,
 var arrows = ['none', 'classic', 'classicThin', 'block', 'blockThin', 'open', 'openThin', 'oval', 'diamond', 'diamondThin'];
 
 var typeDefs = _extends({}, DBase.typeDefs, {
-  strokeStyle: ['solid', 'dashed', 'dotted'],
   type: ['rounded', 'sharp', 'curved', 'straight'],
   startArrow: arrows,
   endArrow: arrows,

package/components/dialog/base.d.ts

@@ -2,6 +2,7 @@ import { Component, TypeDefs } from 'intact-react';
 import { Sizes } from '../../styles/utils';
 import { Container } from '../portal';
 import { SHOW, HIDE } from './constants';
+import { setHooks } from './useFixBody';
 import type { Events } from '../types';
 export interface BaseDialogProps {
     title?: string;
@@ -42,6 +43,7 @@ export declare class BaseDialog<T extends BaseDialogProps = BaseDialogProps, E e
     static typeDefs: Required<TypeDefs<BaseDialogProps>>;
     static defaults: () => Partial<BaseDialogProps>;
     static events: Events<BaseDialogEvents>;
+    static setHooks: typeof setHooks;
     dialogRef: import("intact").RefObject<HTMLDivElement>;
     private overlayRef;
     private drag;

package/components/dialog/base.js

@@ -12,7 +12,7 @@ import { useMouseOutsidable } from '../../hooks/useMouseOutsidable';
 import { useDraggable } from './useDraggable';
 import { useEscClosable } from './useEscClosable';
 import { SHOW, HIDE, DIALOG } from './constants';
-import { useFixBody } from './useFixBody';
+import { useFixBody, setHooks } from './useFixBody';
 var typeDefs = {
   title: String,
   value: Boolean,
@@ -153,6 +153,7 @@ BaseDialog.template = template;
 BaseDialog.typeDefs = typeDefs;
 BaseDialog.defaults = defaults;
 BaseDialog.events = events;
+BaseDialog.setHooks = setHooks;
 
 __decorate([bind], BaseDialog.prototype, "terminate", null);
 

package/components/dialog/index.spec.js

@@ -7,7 +7,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { var _context17; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context17 = Object.prototype.toString.call(o)).call(_context17, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { var _context16; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context16 = Object.prototype.toString.call(o)).call(_context16, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
@@ -20,13 +20,12 @@ import { Dialog, BaseDialog } from './';
 import { getElement, mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import BasicDemo from '~/components/dialog/demos/basic';
 import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
-import AsyncOpenDemo from '~/components/dialog/demos/asyncOpen';
 import TerminateDemo from '~/components/dialog/demos/terminate';
 import DestroyDemo from '~/components/dialog/demos/destroy';
 describe('Dialog', function () {
   afterEach(function (done) {
     unmount();
-    setTimeout(done, 400);
+    setTimeout(done, 500);
   });
 
   function expectDialog() {
@@ -308,12 +307,12 @@ describe('Dialog', function () {
         switch (_context9.prev = _context9.next) {
           case 0:
             this.timeout(0);
-            req = require.context('~/components/dialog/demos', true, /^((?!async).)*index\.ts$/i);
+            req = require.context('~/components/dialog/demos', true, /^((?!static).)*index\.ts$/i);
             _iterator = _createForOfIteratorHelperLoose(_keysInstanceProperty(req).call(req));
 
           case 3:
             if ((_step = _iterator()).done) {
-              _context9.next = 18;
+              _context9.next = 16;
               break;
             }
 
@@ -324,39 +323,31 @@ describe('Dialog', function () {
               break;
             }
 
-            return _context9.abrupt("continue", 16);
+            return _context9.abrupt("continue", 14);
 
           case 7:
-            if (!/static/.test(item)) {
-              _context9.next = 9;
-              break;
-            }
-
-            return _context9.abrupt("continue", 16);
-
-          case 9:
             Demo = req(item).default;
             _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
             dispatchEvent(element.querySelector('.k-btn') || element, 'click');
-            _context9.next = 14;
+            _context9.next = 12;
             return wait();
 
-          case 14:
+          case 12:
             expectDialog();
             unmount();
 
-          case 16:
+          case 14:
             _context9.next = 3;
             break;
 
-          case 18:
-            _context9.next = 20;
+          case 16:
+            _context9.next = 18;
             return wait(500);
 
-          case 20:
+          case 18:
             expect(document.body.getAttribute('style')).to.be.null;
 
-          case 21:
+          case 19:
           case "end":
             return _context9.stop();
         }
@@ -394,42 +385,16 @@ describe('Dialog', function () {
       }
     }, _callee7);
   })));
-  it('async open', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var _mount9, instance, element, dialog;
+  it('drag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount9, instance, element, dialog, top, header;
 
     return _regeneratorRuntime.wrap(function _callee8$(_context11) {
       while (1) {
         switch (_context11.prev = _context11.next) {
           case 0:
-            this.timeout(0);
-            _mount9 = mount(AsyncOpenDemo), instance = _mount9[0], element = _mount9[1];
+            _mount9 = mount(BasicDemo), instance = _mount9[0], element = _mount9[1];
             dispatchEvent(element.firstChild, 'click');
-            expect(getElement('.k-dialog')).to.be.undefined;
-            _context11.next = 6;
-            return wait(3000);
-
-          case 6:
-            dialog = expectDialog(); // close
-
-            dispatchEvent(dialog.querySelector('.k-dialog-ok'), 'click');
-
-          case 8:
-          case "end":
-            return _context11.stop();
-        }
-      }
-    }, _callee8, this);
-  })));
-  it('drag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var _mount10, instance, element, dialog, top, header;
-
-    return _regeneratorRuntime.wrap(function _callee9$(_context12) {
-      while (1) {
-        switch (_context12.prev = _context12.next) {
-          case 0:
-            _mount10 = mount(BasicDemo), instance = _mount10[0], element = _mount10[1];
-            dispatchEvent(element.firstChild, 'click');
-            _context12.next = 4;
+            _context11.next = 4;
             return wait();
 
           case 4:
@@ -444,7 +409,7 @@ describe('Dialog', function () {
               clientY: -1
             });
             dispatchEvent(document, 'mouseup');
-            _context12.next = 12;
+            _context11.next = 12;
             return wait();
 
           case 12:
@@ -452,28 +417,28 @@ describe('Dialog', function () {
 
           case 13:
           case "end":
-            return _context12.stop();
+            return _context11.stop();
         }
       }
-    }, _callee9);
+    }, _callee8);
   })));
-  it('static methods', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+  it('static methods', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
     var cb, dialog, cb1, cb2, overlay;
-    return _regeneratorRuntime.wrap(function _callee10$(_context13) {
+    return _regeneratorRuntime.wrap(function _callee9$(_context12) {
       while (1) {
-        switch (_context13.prev = _context13.next) {
+        switch (_context12.prev = _context12.next) {
           case 0:
             cb = sinon.spy();
             Dialog.success({
               content: 'test'
             }).then(cb);
-            _context13.next = 4;
+            _context12.next = 4;
             return wait();
 
           case 4:
             dialog = expectDialog();
             dialog.querySelector('.k-btn').click();
-            _context13.next = 8;
+            _context12.next = 8;
             return wait();
 
           case 8:
@@ -484,13 +449,13 @@ describe('Dialog', function () {
               hideIcon: true,
               hideClose: false
             }).then(cb, cb1);
-            _context13.next = 13;
+            _context12.next = 13;
             return wait();
 
           case 13:
             dialog = expectDialog();
             dialog.querySelector('.k-dialog-cancel').click();
-            _context13.next = 17;
+            _context12.next = 17;
             return wait();
 
           case 17:
@@ -500,7 +465,7 @@ describe('Dialog', function () {
               title: 'error',
               content: 'test'
             });
-            _context13.next = 21;
+            _context12.next = 21;
             return wait();
 
           case 21:
@@ -511,13 +476,13 @@ describe('Dialog', function () {
               content: 'test',
               closable: false
             }).then(function () {}, cb2);
-            _context13.next = 27;
+            _context12.next = 27;
             return wait();
 
           case 27:
             overlay = getElement('.k-dialog-overlay');
             overlay.click();
-            _context13.next = 31;
+            _context12.next = 31;
             return wait();
 
           case 31:
@@ -526,34 +491,34 @@ describe('Dialog', function () {
 
           case 33:
           case "end":
-            return _context13.stop();
+            return _context12.stop();
         }
       }
-    }, _callee10);
+    }, _callee9);
   })));
-  it('should double check for closing dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-    var _mount11, instance, element, dialog, confirm;
+  it('should double check for closing dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var _mount10, instance, element, dialog, confirm;
 
-    return _regeneratorRuntime.wrap(function _callee11$(_context14) {
+    return _regeneratorRuntime.wrap(function _callee10$(_context13) {
       while (1) {
-        switch (_context14.prev = _context14.next) {
+        switch (_context13.prev = _context13.next) {
           case 0:
-            _mount11 = mount(TerminateDemo), instance = _mount11[0], element = _mount11[1];
+            _mount10 = mount(TerminateDemo), instance = _mount10[0], element = _mount10[1];
             element.firstChild.click();
-            _context14.next = 4;
+            _context13.next = 4;
             return wait();
 
           case 4:
             dialog = getElement('.k-dialog');
             dialog.querySelector('.k-dialog-close').click();
-            _context14.next = 8;
+            _context13.next = 8;
             return wait(500);
 
           case 8:
             expect(dialog.style.display).to.eql('');
             confirm = getElement('.k-alert-dialog');
             confirm.querySelector('.k-dialog-ok').click();
-            _context14.next = 13;
+            _context13.next = 13;
             return wait(500);
 
           case 13:
@@ -561,28 +526,28 @@ describe('Dialog', function () {
 
           case 14:
           case "end":
-            return _context14.stop();
+            return _context13.stop();
         }
       }
-    }, _callee11);
+    }, _callee10);
   })));
-  it('should remove body', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-    var _mount12, instance, element;
+  it('should remove body', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _mount11, instance, element;
 
-    return _regeneratorRuntime.wrap(function _callee12$(_context15) {
+    return _regeneratorRuntime.wrap(function _callee11$(_context14) {
       while (1) {
-        switch (_context15.prev = _context15.next) {
+        switch (_context14.prev = _context14.next) {
           case 0:
-            _mount12 = mount(DestroyDemo), instance = _mount12[0], element = _mount12[1];
+            _mount11 = mount(DestroyDemo), instance = _mount11[0], element = _mount11[1];
             expect(getElement('.k-dialog')).to.be.undefined;
             instance.set('show', true);
-            _context15.next = 5;
+            _context14.next = 5;
             return wait(500);
 
           case 5:
             expectDialog();
             instance.set('show', false);
-            _context15.next = 9;
+            _context14.next = 9;
             return wait(500);
 
           case 9:
@@ -590,21 +555,21 @@ describe('Dialog', function () {
 
           case 10:
           case "end":
-            return _context15.stop();
+            return _context14.stop();
         }
       }
-    }, _callee12);
+    }, _callee11);
   })));
-  it('should not close when click and move outside', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var _mount13, instance, element, dialog, wrapper;
+  it('should not close when click and move outside', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var _mount12, instance, element, dialog, wrapper;
 
-    return _regeneratorRuntime.wrap(function _callee13$(_context16) {
+    return _regeneratorRuntime.wrap(function _callee12$(_context15) {
       while (1) {
-        switch (_context16.prev = _context16.next) {
+        switch (_context15.prev = _context15.next) {
           case 0:
-            _mount13 = mount(BasicDemo), instance = _mount13[0], element = _mount13[1];
+            _mount12 = mount(BasicDemo), instance = _mount12[0], element = _mount12[1];
             element.firstChild.click();
-            _context16.next = 4;
+            _context15.next = 4;
             return wait();
 
           case 4:
@@ -613,7 +578,7 @@ describe('Dialog', function () {
             dispatchEvent(dialog, 'mousedown');
             dispatchEvent(wrapper, 'mouseup');
             dispatchEvent(wrapper, 'click');
-            _context16.next = 11;
+            _context15.next = 11;
             return wait(500);
 
           case 11:
@@ -621,10 +586,10 @@ describe('Dialog', function () {
 
           case 12:
           case "end":
-            return _context16.stop();
+            return _context15.stop();
         }
       }
-    }, _callee13);
+    }, _callee12);
   }))); // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
   // const Test = {
   // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,

package/components/dialog/styles.js

@@ -11,6 +11,10 @@ var defaults = {
     return theme.borderRadius;
   },
 
+  get transition() {
+    return theme.transition.large;
+  },
+
   padding: '0',
   margin: '0 20px',
 
@@ -79,7 +83,7 @@ setDefault(function () {
 export function makeDialogStyles() {
   var _context;
 
-  return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.k-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", theme.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
+  return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.k-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.k-", size, "{width:", dialog[size + "Width"], ";}");
   }), ".k-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;}.k-dialog-title{display:inline-block;}.k-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.k-icon{font-size:", dialog.header.closeIconFontSize, ";}}.k-dialog-body{padding:", dialog.body.padding, ";}.k-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.k-btn{margin-left:", dialog.footer.btnGap, ";}}");
 }