@king-design/react 3.0.0-beta.0 → 3.0.0-beta.2

package/components/datepicker/index.vdt.js

@@ -68,7 +68,7 @@ export default function ($props, $blocks, $__proto__) {
         }
 
         return _$cc(Tabs, {
-          'type': 'border-card',
+          'type': 'card',
           'value': panel.value,
           'ev-$change:value': panel.set,
           'children': [_$cc(Tab, {

package/components/datepicker/styles.js

@@ -83,7 +83,7 @@ export function makePanelStyles() {
   return /*#__PURE__*/css("display:flex;.k-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.k-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.k-datepicker-calendars{display:flex;}.k-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.k-tabs{border:none;.k-tabs-wrapper{float:none;}.k-tab{width:50%;}}}.k-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
 }
 export function makeCalendarStyles() {
-  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";&.k-hover{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
+  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-prev .k-icon,.k-next .k-icon{margin:0 -5px!important;}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.k-value{border-radius:", datepicker.item.borderRadius, ";}&.k-hover{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today .k-value{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today .k-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
 }
 export function makeTimeStyles() {
   return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-scroll-select{flex:1;height:305px;}");

package/components/datepicker/useValue.d.ts

@@ -1,13 +1,13 @@
 import { StateValueItem, DayjsValue } from './basepicker';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import type { useFormats } from './useFormats';
 import type { useDisabled } from './useDisabled';
 import { PanelFlags, usePanel } from './usePanel';
 export declare function useValue(formats: ReturnType<typeof useFormats>, disabled: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>): {
     format: () => string | string[];
     onConfirm: () => void;
-    onChangeTime: (date: Dayjs, flag: PanelFlags) => void;
-    getTimeValue: (flag: PanelFlags) => Dayjs | null | undefined;
+    onChangeTime: (date: dayjs.Dayjs, flag: PanelFlags) => void;
+    getTimeValue: (flag: PanelFlags) => dayjs.Dayjs | null | undefined;
     convertToDayjs: (v: import("./basepicker").Value | [import("./basepicker").Value, import("./basepicker").Value] | import("./basepicker").Value[] | [import("./basepicker").Value, import("./basepicker").Value][] | null | undefined) => DayjsValue;
     getDayjsValue: () => DayjsValue;
     value: import("../../hooks/useState").State<import("./basepicker").StateValue>;

package/components/datepicker/useValue.js

@@ -6,7 +6,9 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slic
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
 import { useInstance } from 'intact-react';
 import { useValue as useValueBase } from './basepicker';
+import dayjs from 'dayjs';
 import { last } from '../utils';
+import { endTime } from './helpers';
 import { PanelTypes, PanelFlags } from './usePanel';
 export function useValue(formats, disabled, panel) {
   var instance = useInstance();
@@ -41,21 +43,21 @@ export function useValue(formats, disabled, panel) {
         type = _instance$get3.type,
         range = _instance$get3.range;
 
-    var _value = v; // the datetime must be greater than minDate, #406
-
-    var minDate = disabled.minDate.value;
-
-    if (minDate && _value.isBefore(minDate)) {
-      _value = minDate;
-    }
+    var _value;
 
     if (range) {
       var oldValue = last(value.value);
 
       if (!oldValue || oldValue.length === 2) {
-        _value = [v];
+        /**
+         * if we select the first value or re-select the value
+         * no matter what the flag is, we should set flag to start panel
+         * #877
+         */
+        flag = PanelFlags.Start;
+        _value = [fixDatetimeWithMinDate(v)];
       } else {
-        _value = [oldValue[0], v];
+        _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
 
         _sortInstanceProperty(_value).call(_value, function (a, b) {
           return a.isAfter(b) ? 1 : -1;
@@ -63,6 +65,8 @@ export function useValue(formats, disabled, panel) {
       }
 
       instance.trigger('selecting', _value);
+    } else {
+      _value = fixDatetimeWithMinDate(v);
     }
 
     setValue(_value, false);
@@ -74,6 +78,31 @@ export function useValue(formats, disabled, panel) {
     }
   }
 
+  function fixDatetimeWithMinDate(v) {
+    // the datetime must be greater than minDate, #406
+    var minDate = disabled.minDate.value;
+
+    if (minDate && v.isBefore(minDate)) {
+      return minDate;
+    }
+
+    return v;
+  }
+
+  function fixDatetimeWithMaxDate(v) {
+    // the tiem of end datetime should be set to 23:59:59, #878
+    var maxDate = disabled.maxDate.value;
+    var date = v.toDate();
+    endTime(date);
+    v = dayjs(date);
+
+    if (maxDate && v.isAfter(maxDate)) {
+      return maxDate;
+    }
+
+    return v;
+  }
+
   return _extends({
     value: value,
     setValue: setValue,

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

@@ -12,7 +12,7 @@ export declare class DCallout extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -12,7 +12,7 @@ export declare class DCircle extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -12,7 +12,7 @@ export declare class DDocument extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -12,7 +12,7 @@ export declare class DEllipse extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -12,7 +12,7 @@ export declare class DHexagon extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -18,7 +18,7 @@ export declare class DImage extends DShape<DImageProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -12,7 +12,7 @@ export declare class DParallelogram extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -18,7 +18,7 @@ export declare class DRectangle extends DShape<DRectangleProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -13,7 +13,7 @@ export declare class DSquare extends DRectangle {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

@@ -12,7 +12,7 @@ export declare class DText extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/components/dialog/alert.vdt.js

@@ -41,11 +41,12 @@ export default function ($props, $blocks, $__proto__) {
     }), (_$blocks['body'] = function ($super) {
       return [_$ce(2, 'div', [!hideIcon && !icon ? _$cc(Icon, {
         'className': _$cn(iconClassName || {
-          "ion-ios-checkmark": type === 'success',
-          "ion-ios-information": type === 'warning',
-          "ion-ios-close": type === 'error',
-          "ion-ios-help": type === 'confirm'
-        })
+          "k-icon-success-fill": type === 'success',
+          "k-icon-warning-fill": type === 'warning',
+          "k-icon-error-fill": type === 'error',
+          "k-icon-question-fill": type === 'confirm'
+        }),
+        'color': type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type
       }) : undefined, icon], 0, 'k-dialog-tip-icon'), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, 'k-alert-dialog-title') : undefined, content], 0, 'k-alert-dialog-wrapper')];
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];

package/components/dialog/index.spec.js

@@ -201,7 +201,7 @@ describe('Dialog', function () {
     var _mount4 = mount(Demo),
         instance = _mount4[0];
 
-    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 确定取消');
+    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 取消确定');
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount5, instance, element, btn, dialog;
@@ -243,7 +243,7 @@ describe('Dialog', function () {
             return wait(500);
 
           case 20:
-            expect(document.body.getAttribute('style')).to.be.null;
+            expect(!!document.body.getAttribute('style')).to.be.false;
 
           case 21:
           case "end":
@@ -347,7 +347,7 @@ describe('Dialog', function () {
             return wait(500);
 
           case 18:
-            expect(document.body.getAttribute('style')).to.be.null;
+            expect(!!document.body.getAttribute('style')).to.be.false;
 
           case 19:
           case "end":
@@ -439,7 +439,7 @@ describe('Dialog', function () {
 
           case 4:
             dialog = expectDialog();
-            dialog.querySelector('.k-btn').click();
+            dialog.querySelector('.k-dialog-ok').click();
             _context12.next = 8;
             return wait();
 
@@ -472,7 +472,7 @@ describe('Dialog', function () {
 
           case 21:
             dialog = expectDialog();
-            dialog.querySelector('.k-btn').click();
+            dialog.querySelector('.k-dialog-ok').click();
             cb2 = sinon.spy();
             Dialog.confirm({
               content: 'test',
@@ -489,7 +489,7 @@ describe('Dialog', function () {
 
           case 31:
             expect(cb2.callCount).to.eql(0);
-            getElement('.k-dialog').querySelector('.k-btn').click();
+            getElement('.k-dialog').querySelector('.k-dialog-ok').click();
 
           case 33:
           case "end":

package/components/dialog/styles.js

@@ -43,7 +43,7 @@ var defaults = {
     border: "1px solid #e2e5e8",
     closeTop: '9px',
     closeRight: '-9px',
-    closeIconFontSize: '16px'
+    closeIconFontSize: '22px'
   },
   // body
   body: {

package/components/dropdown/dropdown.d.ts

@@ -3,6 +3,7 @@ import { Options, Feedback } from '../position';
 import { Portal, PortalProps } from '../portal';
 import { FeedbackCallback } from './usePosition';
 import type { Events } from '../types';
+import { Virtual } from '../virtual';
 export declare type Position = Options;
 export declare type PositionShorthand = 'left' | 'bottom' | 'right' | 'top';
 export declare const DROPDOWN = "Dropdown";
@@ -12,6 +13,7 @@ export interface DropdownProps {
     disabled?: boolean;
     value?: boolean;
     position?: Position | 'left' | 'bottom' | 'right' | 'top';
+    collison?: Position['collision'];
     of?: 'self' | 'parent' | Event;
     container?: PortalProps['container'];
 }
@@ -21,6 +23,8 @@ export interface DropdownEvents {
     hide: [];
     mouseenter: [MouseEvent];
     mouseleave: [MouseEvent];
+    click: [MouseEvent];
+    contextmenu: [MouseEvent];
     positioned: [Feedback];
 }
 export interface DropdownBlocks {
@@ -30,7 +34,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     static typeDefs: Required<TypeDefs<DropdownProps>>;
     static defaults: () => Partial<DropdownProps>;
     static events: Events<DropdownEvents>;
-    static template: (this: Dropdown) => (VNode<import("intact").VNodeTag> | VNode<typeof Portal>)[];
+    static template: (this: Dropdown) => (VNode<typeof Virtual> | VNode<typeof Portal>)[];
     menuVNode: VNode | null;
     dropdown: Dropdown | null;
     rootDropdown: Dropdown | null;
@@ -41,9 +45,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
             value: boolean;
         };
     };
-    protected alwaysPortal: boolean;
-    private timer;
-    private triggerProps;
+    protected timer: number | undefined;
     init(): void;
     show(shouldFocus?: boolean): void;
     hide(immediately?: boolean): void;
@@ -53,6 +55,4 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     private onContextMenu;
     private onLeave;
     private initEventCallbacks;
-    private callOriginalCallback;
-    private normalizeTriggerProps;
 }

package/components/dropdown/dropdown.js

@@ -3,14 +3,15 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import { __decorate } from "tslib";
-import { Component, createVNode as h, directClone, provide, inject, findDomFromVNode, createVNode, nextTick } from 'intact-react';
-import { bind, isTextChildren } from '../utils';
-import { EMPTY_OBJ, isFunction, noop } from 'intact-shared';
+import { Component, createVNode as h, provide, inject, findDomFromVNode, nextTick } from 'intact-react';
+import { bind, getRestProps } from '../utils';
+import { noop } from 'intact-shared';
 import { cx } from '@emotion/css';
 import { useDocumentClick, containsOrEqual } from '../../hooks/useDocumentClick';
 import { Portal } from '../portal';
 import { useShowHideEvents } from '../../hooks/useShowHideEvents';
 import { usePosition } from './usePosition';
+import { Virtual } from '../virtual';
 export var DROPDOWN = 'Dropdown';
 export var ROOT_DROPDOWN = 'RootDropdown';
 var typeDefs = {
@@ -20,13 +21,13 @@ var typeDefs = {
   position: [Object, 'left', 'bottom', 'right', 'top'],
   // Event is undefined in NodeJs
   of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
-  container: [String, Function]
+  container: [String, Function],
+  collison: ['none', 'fit', 'flip', 'flipfit', Array]
 };
 
 var defaults = function defaults() {
   return {
     trigger: 'hover',
-    position: {},
     of: 'self'
   };
 };
@@ -37,6 +38,8 @@ var events = {
   hide: true,
   mouseenter: true,
   mouseleave: true,
+  click: true,
+  contextmenu: true,
   positioned: true
 };
 export var Dropdown = /*#__PURE__*/function (_Component) {
@@ -57,9 +60,7 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     _this.rootDropdown = null;
     _this.showedDropdown = null;
     _this.positionHook = usePosition();
-    _this.alwaysPortal = false;
     _this.timer = undefined;
-    _this.triggerProps = null;
     return _this;
   }
 
@@ -97,7 +98,13 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
     if (this.get('disabled')) return;
     clearTimeout(this.timer);
-    this.set('value', true);
+    this.set('value', true); // should show parent dropdown
+
+    var parentDropdown = this.dropdown;
+
+    if (parentDropdown) {
+      parentDropdown.show();
+    }
 
     if (shouldFocus) {
       nextTick(function () {
@@ -115,10 +122,16 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
     if (this.get('disabled')) return;
     if (!this.get('value')) return;
+    var showedDropdown = this.showedDropdown;
+
+    if (showedDropdown) {
+      showedDropdown.hide(immediately);
+    }
 
     if (immediately) {
       this.set('value', false);
     } else {
+      clearTimeout(this.timer);
       this.timer = window.setTimeout(function () {
         _this4.set('value', false);
       }, 200);
@@ -138,23 +151,24 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
   };
 
   _proto.onEnter = function onEnter(e) {
-    this.callOriginalCallback(e.type === 'click' ? 'ev-click' : 'ev-mouseenter', e);
     this.show();
+    this.trigger(e.type, e);
   };
 
   _proto.onContextMenu = function onContextMenu(e) {
-    this.callOriginalCallback('ev-contextmenu', e);
     e.preventDefault();
     this.set('of', e);
     this.show();
+    this.trigger('contextmenu', e);
   };
 
   _proto.onLeave = function onLeave(e) {
-    this.callOriginalCallback('ev-mouseleave', e);
     this.hide();
+    this.trigger(e.type, e);
   };
 
-  _proto.initEventCallbacks = function initEventCallbacks(trigger) {
+  _proto.initEventCallbacks = function initEventCallbacks() {
+    var trigger = this.get('trigger');
     var props = {};
 
     switch (trigger) {
@@ -181,51 +195,6 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     return props;
   };
 
-  _proto.callOriginalCallback = function callOriginalCallback(name, e) {
-    var callback = this.triggerProps[name];
-    var callbackOnDropdown = this.get(name);
-    if (isFunction(callback)) callback(e);
-    if (isFunction(callbackOnDropdown)) callbackOnDropdown(e);
-  };
-
-  _proto.normalizeTriggerProps = function normalizeTriggerProps(props) {
-    // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-    var vnode = props.vnode;
-    if (!vnode) return props; // maybe we render the intact component in react slot property, in this case
-    // the $isReact is false. so use the vnode $$typeof field as gauge
-
-    if (vnode.$$typeof || this.$isVueNext) {
-      var _props = vnode.props;
-      if (!_props) return props;
-      return {
-        vnode: vnode,
-        'ev-click': _props.onClick,
-        'ev-mouseenter': _props.onMouseEnter,
-        'ev-mouseleave': _props.onMouseLeave,
-        'ev-contextmenu': _props.onContextMenu,
-        className: _props.className || _props.class
-        /* vue-next */
-
-      };
-    } else if (this.$isVue) {
-      var data = vnode.data;
-      var on = data && data.on || EMPTY_OBJ;
-      var ret = {
-        vnode: vnode
-      };
-      ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(function (event) {
-        var method = on[event];
-
-        if (method) {
-          ret["ev-" + event] = method;
-        }
-      });
-      return ret;
-    }
-
-    return props;
-  };
-
   return Dropdown;
 }(Component);
 Dropdown.$doubleVNodes = true;
@@ -255,23 +224,23 @@ Dropdown.template = function () {
   var _children = children,
       trigger = _children[0],
       menu = _children[1];
-  var triggerType = this.get('trigger');
-  var props = this.initEventCallbacks(triggerType);
-  var clonedTrigger = isTextChildren(trigger) ? createVNode('span', null, trigger) : directClone(trigger);
-  var triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ); // add a className for opening status
-
-  var className = trigger.className || triggerProps.className;
-  className = cx((_cx = {}, _cx[className] = className, _cx['k-dropdown-open'] = this.get('value'), _cx));
-  clonedTrigger.props = _extends({}, triggerProps, props, {
-    className: className
-  });
-  clonedTrigger.className = className;
+  var props = this.initEventCallbacks();
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      value = _this$get.value,
+      container = _this$get.container;
+
+  className = cx((_cx = {
+    'k-dropdown-open': value
+  }, _cx[className] = !!className, _cx));
   this.menuVNode = menu;
-  return [clonedTrigger, // wrap the root dropdown menu to Portal to render into body
-  this.alwaysPortal || !this.rootDropdown ? h(Portal, {
+  return [h(Virtual, _extends({}, props, getRestProps(this), {
+    className: className
+  }), trigger), h(Portal, {
     children: menu,
-    container: this.get('container')
-  }) : menu];
+    container: container
+  })];
 };
 
 __decorate([bind], Dropdown.prototype, "position", null);
@@ -288,9 +257,10 @@ function useDocumentClickForDropdown(dropdown) {
   };
 
   var _useDocumentClick = useDocumentClick(elementRef, function (e) {
-    // case 1: if click an trigger and the trigger type is hover, ignore it
-    // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
-    // case 3: if click on trigger and the trigger type is focus, do nothing 
+    // case 1: if click a trigger and its trigger type is hover, ignore it
+    // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
+    // case 3: if click on a trigger and its trigger type is focus, do nothing 
+    // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
     var trigger = dropdown.get('trigger');
     if (trigger === 'focus') return;
     var isHover = trigger === 'hover';
@@ -305,6 +275,7 @@ function useDocumentClickForDropdown(dropdown) {
       }
     }
 
+    if (isSubDropdownElement(e.target, dropdown)) return;
     dropdown.hide(true);
   }, true),
       addDocumentClick = _useDocumentClick[0],
@@ -314,6 +285,18 @@ function useDocumentClickForDropdown(dropdown) {
   dropdown.on('hide', removeDocumentClick);
 }
 
+function isSubDropdownElement(elem, dropdown) {
+  var showedDropdown = dropdown.showedDropdown;
+  if (!showedDropdown) return false;
+  var subMenuElement = findDomFromVNode(showedDropdown.menuVNode, true);
+
+  if (containsOrEqual(subMenuElement, elem)) {
+    return true;
+  }
+
+  return isSubDropdownElement(elem, showedDropdown);
+}
+
 function useHideLastMenuOnShow(dropdown) {
   var parentDropdown = dropdown.dropdown;
   dropdown.on('show', function () {