@king-design/intact 3.1.0-beta.2 → 3.1.0

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

@@ -1,10 +1,17 @@
 import { ProviderProps } from '../context';
+import { Component } from 'intact';
 export interface ConfigProps {
     classNamePrefix?: string;
 }
-declare const ConfigProvider: import("intact").ComponentConstructor<import("intact").Component<ProviderProps<ConfigProps>, {}, {}, {}>>, ConfigConsumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ConfigProps>, {}, {}, {}>>;
+declare const ConfigConsumer: import("intact").ComponentConstructor<Component<import("../context").ConsumerProps<ConfigProps>, {}, {}, {}>>;
 declare function useConfigContext(): {
     cls: (name: string) => string;
     readonly k: string;
 };
-export { ConfigProvider, ConfigConsumer, useConfigContext, };
+/**
+ * for vue/react type checking
+ */
+export declare class _ConfigProvider extends Component<ProviderProps<ConfigProps>> {
+}
+export declare const ConfigProvider: typeof _ConfigProvider;
+export { ConfigConsumer, useConfigContext, };

package/es/components/config/index.js

@@ -1,8 +1,8 @@
 import { createContext } from '../context';
-import { EMPTY_OBJ } from 'intact';
+import { EMPTY_OBJ, Component } from 'intact';
 
 var _createContext = createContext(EMPTY_OBJ),
-    ConfigProvider = _createContext.Provider,
+    Provider = _createContext.Provider,
     ConfigConsumer = _createContext.Consumer,
     useContext = _createContext.useContext;
 
@@ -20,4 +20,5 @@ function useConfigContext() {
   };
 }
 
-export { ConfigProvider, ConfigConsumer, useConfigContext };
+export var ConfigProvider = Provider;
+export { ConfigConsumer, useConfigContext };

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

@@ -7,6 +7,7 @@ export interface CopyProps {
 export interface CopyEvents {
     success: [string];
     error: [];
+    click: [MouseEvent];
 }
 export declare class Copy extends Component<CopyProps, CopyEvents> {
     static template: string | import("intact").Template<any>;

package/es/components/copy/index.js

@@ -17,7 +17,8 @@ var defaults = function defaults() {
 
 var events = {
   success: true,
-  error: true
+  error: true,
+  click: true
 };
 export var Copy = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Copy, _Component);

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

@@ -1,7 +1,12 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/copy/demos/basic';
-import { mount, unmount } from '../../test/utils';
+import { mount, unmount, wait } from '../../test/utils';
+import { Tooltip } from '../tooltip';
+import { Component } from 'intact';
+import { Copy } from '.';
 describe('Copy', function () {
   afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -49,4 +54,62 @@ describe('Copy', function () {
       }
     }, _callee2, null, [[2, 9]]);
   })));
+  it('wrap copy with tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount2, instance, element, text;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context3;
+
+                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(_context3 = [this]).call(_context3, args)) || this;
+                _this.Tooltip = Tooltip;
+                _this.Copy = Copy;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Tooltip, Copy } = this;\n                <Tooltip content=\"test\">\n                    <Copy text=\"test\" />\n                </Tooltip>\n            ";
+            _mount2 = mount(Demo), instance = _mount2[0], element = _mount2[1];
+            element.click();
+            _context4.next = 6;
+            return wait();
+
+          case 6:
+            _context4.prev = 6;
+            _context4.next = 9;
+            return navigator.clipboard.readText();
+
+          case 9:
+            text = _context4.sent;
+            expect(text).to.eql('test');
+            _context4.next = 16;
+            break;
+
+          case 13:
+            _context4.prev = 13;
+            _context4.t0 = _context4["catch"](6);
+            // Read permisson denied 
+            console.log(_context4.t0);
+
+          case 16:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3, null, [[6, 13]]);
+  })));
 });

package/es/components/copy/useCopy.d.ts

@@ -1,4 +1,4 @@
 export declare function useCopy(): {
-    startCopy: () => void;
+    startCopy: (e: MouseEvent) => void;
     success: import("../../hooks/useState").State<boolean>;
 };

package/es/components/copy/useCopy.js

@@ -8,7 +8,7 @@ export function useCopy() {
   var success = useState(false);
   var timer;
   return {
-    startCopy: function startCopy() {
+    startCopy: function startCopy(e) {
       var _instance$get = instance.get(),
           text = _instance$get.text,
           showMessage = _instance$get.showMessage;
@@ -30,6 +30,8 @@ export function useCopy() {
         success.set(false);
         instance.trigger('error');
       }
+
+      instance.trigger('click', e);
     },
     success: success
   };

package/es/components/dialog/base.js

@@ -142,7 +142,7 @@ export var BaseDialog = /*#__PURE__*/function (_Component) {
   };
 
   _proto.onClickWrapper = function onClickWrapper(e) {
-    if (this.get('closable')) {
+    if (this.get('closable') && e.target === this.overlayRef.value) {
       this.terminate();
     }
   };

package/es/components/dialog/base.vdt.js

@@ -123,15 +123,15 @@ export default function ($props, $blocks, $__proto__) {
 
   return _$cc(Portal, {
     'container': container,
-    'children': _$ce(2, 'div', [overlay ? _$cc(Transition, {
+    'children': _$ce(2, 'div', overlay ? _$cc(Transition, {
       'key': 'overlay',
       'show': overlay ? value : false,
       'appear': value,
       'name': 'k-fade',
-      'children': _$ce(2, 'div', null, 1, _$cn(k + "-dialog-overlay"), {
+      'children': _$ce(2, 'div', dialog, 0, _$cn(k + "-dialog-overlay"), {
         'ev-click': this.onClickWrapper
       }, null, this.overlayRef)
-    }, 'overlay') : undefined, dialog], 0, _$cn((_$cn2 = {}, _$cn2[k + "-dialog-wrapper"] = true, _$cn2[k + "-open"] = value, _$cn2[makeWrapperStyles(k)] = true, _$cn2)))
+    }, 'overlay') : dialog, 0, _$cn((_$cn2 = {}, _$cn2[k + "-dialog-wrapper"] = true, _$cn2[k + "-open"] = value, _$cn2[makeWrapperStyles(k)] = true, _$cn2)))
   });
 }
 ;

package/es/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 _context18; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context18 = Object.prototype.toString.call(o)).call(_context18, 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 _context21; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context21 = Object.prototype.toString.call(o)).call(_context21, 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; }
 
@@ -19,7 +19,7 @@ import { __decorate } from "tslib";
 import { Component } from 'intact';
 import { Dialog, BaseDialog } from './';
 import { bind } from '../utils';
-import { getElement, mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { getElement, mount, unmount, dispatchEvent, wait, getElements } from '../../test/utils';
 import BasicDemo from '~/components/dialog/demos/basic';
 import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
 import TerminateDemo from '~/components/dialog/demos/terminate';
@@ -594,7 +594,7 @@ describe('Dialog', function () {
     }, _callee12);
   })));
   it('should remove body style when destroy', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var Demo, _mount13, instance, element;
+    var Demo, _mount13, instance, element, style;
 
     return _regeneratorRuntime.wrap(function _callee13$(_context17) {
       while (1) {
@@ -642,14 +642,96 @@ describe('Dialog', function () {
             return wait();
 
           case 7:
-            expect(document.body.getAttribute('style')).to.be.null;
+            style = document.body.getAttribute('style');
+            expect(style === null || style === '').to.be.true;
 
-          case 8:
+          case 9:
           case "end":
             return _context17.stop();
         }
       }
     }, _callee13);
+  })));
+  it('show nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Test, Demo, _mount14, instance, element, _getElements, dialog1, dialog2;
+
+    return _regeneratorRuntime.wrap(function _callee14$(_context20) {
+      while (1) {
+        switch (_context20.prev = _context20.next) {
+          case 0:
+            Test = /*#__PURE__*/function (_Component5) {
+              _inheritsLoose(Test, _Component5);
+
+              function Test() {
+                var _context18;
+
+                var _this5;
+
+                for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                  args[_key5] = arguments[_key5];
+                }
+
+                _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context18 = [this]).call(_context18, args)) || this;
+                _this5.Dialog = Dialog;
+                return _this5;
+              }
+
+              return Test;
+            }(Component);
+
+            Test.template = "\n                const { Dialog } = this;\n                <Dialog v-model=\"value\">test</Dialog>\n            ";
+
+            Demo = /*#__PURE__*/function (_Component6) {
+              _inheritsLoose(Demo, _Component6);
+
+              function Demo() {
+                var _context19;
+
+                var _this6;
+
+                for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                  args[_key6] = arguments[_key6];
+                }
+
+                _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context19 = [this]).call(_context19, args)) || this;
+                _this6.Test = Test;
+                _this6.Dialog = Dialog;
+                return _this6;
+              }
+
+              var _proto2 = Demo.prototype;
+
+              _proto2.showTest = function showTest() {
+                this.set('testShow', true);
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Test, Dialog } = this;\n                <Dialog v-model=\"show\">\n                    <div ev-click={this.showTest}>click</div>\n                    <Test v-model=\"testShow\" /> \n                </Dialog>\n            ";
+
+            __decorate([bind], Demo.prototype, "showTest", null);
+
+            _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
+            instance.set('show', true);
+            _context20.next = 9;
+            return wait();
+
+          case 9:
+            instance.showTest();
+            _context20.next = 12;
+            return wait();
+
+          case 12:
+            _getElements = getElements('.k-dialog'), dialog1 = _getElements[0], dialog2 = _getElements[1];
+            expect(dialog2.querySelector('.k-dialog-body').textContent).to.eql('test');
+
+          case 14:
+          case "end":
+            return _context20.stop();
+        }
+      }
+    }, _callee14);
   }))); // 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/es/components/dialog/styles.js

@@ -92,7 +92,7 @@ export function makeDialogStyles(k) {
 export function makeWrapperStyles(k) {
   //.${k}-fade-leave-active will add position absolute to the styles
   // so we must set fixed with important to .${k}-dialog-overlay
-  return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.", k, "-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);}");
+  return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.", k, "-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);overflow:auto;}");
 }
 export function makeAlertStyles(k) {
   var _context2;

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

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/drawer/demos/basic';
 import PlacementDemo from '~/components/drawer/demos/placement';
 import overlayDemo from '~/components/drawer/demos/overlay';
-import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { mount, unmount, dispatchEvent, getElement, wait, getElements } from '../../test/utils';
 import { Component } from 'intact';
 import { Drawer } from '.';
 import { Dialog } from '../dialog';
@@ -165,7 +165,7 @@ describe('Drawer', function () {
     }, _callee4);
   })));
   it('nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-    var Demo, _mount4, instance, element;
+    var Demo, _mount4, instance, element, _getElements, dialog1, dialog2;
 
     return _regeneratorRuntime.wrap(function _callee5$(_context6) {
       while (1) {
@@ -198,9 +198,11 @@ describe('Drawer', function () {
             return wait();
 
           case 5:
-            expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+            // expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+            _getElements = getElements('.k-dialog'), dialog1 = _getElements[0], dialog2 = _getElements[1];
+            expect(dialog2.querySelector('.k-dialog-body').textContent).to.eql('Dialog');
 
-          case 6:
+          case 7:
           case "end":
             return _context6.stop();
         }

package/es/components/input/styles.js

@@ -132,7 +132,7 @@ setDefault(function () {
 export function makeStyles(k) {
   var _context;
 
-  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;border:none;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
     var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
     if (size === 'default') return sizeClassName;

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

@@ -7,7 +7,7 @@ import { Icon } from '../icon';
 import { Menu } from './menu';
 import { getRestProps, expandAnimationCallbacks } from '../utils';
 import { isNullOrUndefined } from 'intact-shared';
-import { makeItemStyles, makeTitleStyles } from './styles';
+import { makeItemStyles, makeTitleStyles, makeNestedMenuStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -67,7 +67,27 @@ export default function ($props, $blocks, $__proto__) {
     'show': isExpanded,
     'key': 'subMenu'
   }, expandAnimationCallbacks, {
-    'children': subMenuVNode
+    'children': function () {
+      if (subMenuVNode) {
+        var _$cn3;
+
+        var paddingLeft = _this.parentMenu.get('_paddingLeft');
+
+        var _makeNestedMenuStyles = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft),
+            _classname = _makeNestedMenuStyles[0],
+            _paddingLeft = _makeNestedMenuStyles[1];
+
+        var _className = _$cn((_$cn3 = {}, _$cn3[_classname] = true, _$cn3[subMenuVNode.className] = subMenuVNode.className, _$cn3));
+
+        var clonedVNode = directClone(subMenuVNode);
+        clonedVNode.props = _extends({}, clonedVNode.props, {
+          className: _className,
+          _paddingLeft: _paddingLeft
+        });
+        clonedVNode.className = _className;
+        return clonedVNode;
+      }
+    }()
   }), 'subMenu')] : !subMenuVNode ? isTopItem && isCollapse ? _$cc(Tooltip, {
     'position': rootMenu.get('type') !== 'horizontal' ? 'right' : 'bottom',
     'theme': rootMenu.get('theme') === 'dark' ? 'dark' : 'light',

package/es/components/menu/menu.d.ts

@@ -9,6 +9,7 @@ export interface MenuProps<K extends Key = Key> {
     size?: 'large' | 'default' | 'small';
     accordion?: boolean;
     dot?: boolean;
+    _paddingLeft?: string;
 }
 export interface MenuEvents {
 }

package/es/components/menu/menu.js

@@ -12,7 +12,8 @@ var typeDefs = {
   type: ['vertical', 'horizontal'],
   size: ['large', 'default', 'small'],
   accordion: Boolean,
-  dot: Boolean
+  dot: Boolean,
+  _paddingLeft: String
 };
 
 var defaults = function defaults() {

package/es/components/menu/menu.vdt.js

@@ -44,7 +44,7 @@ export default function ($props, $blocks, $__proto__) {
   }), 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-header"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2))) : undefined, children];
   return !isDropdownMenu ? _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
-  }), [content, null]) : _$cc(DropdownMenu, _extends({}, getRestProps(this), {
+  }), content) : _$cc(DropdownMenu, _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'children': content
   }));

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

@@ -65,3 +65,4 @@ export { menu };
 export declare function makeMenuStyles(k: string): string;
 export declare function makeTitleStyles(k: string): string;
 export declare function makeItemStyles(k: string): string;
+export declare function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft?: string): string[];

package/es/components/menu/styles.js

@@ -122,7 +122,7 @@ export function makeMenuStyles(k) {
 
   // we must increase the priority by adding &.${k}-menu
   // to override the css of dropdownMenu
-  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}&:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu){width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu){.", k, "-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
+  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
     var styles = menu[theme];
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";.", k, "-menu-header{color:", styles.item.color, ";border-bottom:", styles.border, ";}.", k, "-menu-item{.", k, "-menu-title{color:", styles.item.color, ";&:hover{color:", styles.item.hoverColor, ";}}&.", k, "-highlighted{>.", k, "-menu-title{color:", styles.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", styles.item.disabledColor, "!important;}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", styles.subBgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", styles.border, ";}}}");
   }), " &.", k, "-white{.", k, "-menu-item.", k, "-active{>.", k, "-menu-title{color:", menu.white.active.color, "!important;background:", menu.white.active.bgColor, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
@@ -136,5 +136,13 @@ export function makeTitleStyles(k) {
 }
 export function makeItemStyles(k) {
   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;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", 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, ";&: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, "-icon{color:inherit;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", 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);}");
+}
+export function makeNestedMenuStyles(k, hasIcon, parentPaddingLeft) {
+  if (parentPaddingLeft === void 0) {
+    parentPaddingLeft = getLeft(menu.item.padding);
+  }
+
+  var paddingLeft = "" + parentPaddingLeft + (hasIcon ? ' + ' + menu.icon.width : '') + " + " + menu.icon.gap;
+  return [/*#__PURE__*/css("&.", k, "-menu{width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", paddingLeft, ");}}"), paddingLeft];
 }

package/es/components/menu/useDropdown.js

@@ -31,16 +31,13 @@ export function useDropdown(rootMenu, parentMenu) {
     eachChildren(children, function (vNode) {
       if (isComponentVNode(vNode, Menu)) {
         subMenuVNode = vNode;
-      } else if (isTopItem && isCollapse) {
-        if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
-          tooltipContents.push(vNode);
-        } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
-          iconVNode = vNode;
-        }
       } else {
         if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
           // wrap with span for showing text ellipsis
           vNode = createVNode('span', null, vNode);
+          tooltipContents.push(vNode);
+        } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
+          iconVNode = vNode;
         }
 
         titleVNodes.push(vNode);

package/es/components/portal.js

@@ -114,7 +114,13 @@ export var Portal = /*#__PURE__*/function (_Component) {
     if (!this.container) {
       if (this.$senior instanceof BaseDialog) {
         // Dialog and Drawer must be inserted into document.body
-        this.container = document.body;
+        // this.container = document.body;
+
+        /**
+         * @Modify https://github.com/ksc-fe/kpc/issues/915
+         * shoud insert to parent .k-dialog-wrapper to show nested dialog in Vue
+         */
+        this.container = parentDom.closest("." + this.config.k + "-dialog-wrapper") || document.body;
       } else {
         // find the closest dialog if exists
         this.container = parentDom.closest("." + this.config.k + "-dialog") || document.body;

package/es/components/table/row.vdt.js

@@ -62,7 +62,7 @@ export default function ($props, $blocks, $__proto__) {
     }, getClassAndStyleForFixed({
       fixed: hasFixedLeft ? 'left' : false,
       className: [k + "-table-check"]
-    }, 0), spans), children));
+    }, 0, k), spans), children));
   };
 
   if (checkType === 'checkbox') {

package/es/components/table/styles.js

@@ -89,7 +89,8 @@ var defaults = {
 
   // tree
   arrow: {
-    gap: "4px"
+    gap: "4px",
+    width: "16px"
   },
   resizeWidth: "5px",
   draggingOpacity: ".4"
@@ -102,7 +103,7 @@ setDefault(function () {
   }).table;
 });
 export function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
   }), ">.", k, "-pagination{margin:16px 0;}");
 }

package/es/components/table/table.vdt.js

@@ -131,7 +131,7 @@ export default function ($props, $blocks, $__proto__) {
               return _$ce(2, 'tr', function () {
                 var ths = [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
                   fixed: hasFixedLeft ? 'left' : false
-                }, 0), {
+                }, 0, k), {
                   'rowspan': maxRows,
                   'key': '$checktype'
                 }), checkType === 'checkbox' ? _$cc(Checkbox, {

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

@@ -2,7 +2,8 @@ import { Component, Key, TypeDefs } from 'intact';
 import { DataItem, Node } from './useNodes';
 import { Mode } from './useDraggable';
 import type { Events } from '../types';
-export type { Node as TreeNode, DataItem as TreeDataItem, Mode as TreeMode, };
+export type { Node as TreeNode, DataItem as TreeDataItem, };
+export { Mode as TreeMode };
 export interface TreeProps<K extends Key = Key> {
     data?: DataItem<K>[];
     filter?: Filter<K>;
@@ -18,11 +19,11 @@ export interface TreeProps<K extends Key = Key> {
     showLine?: boolean;
     draggable?: boolean;
     allowDrag?: (node: Node<K>) => boolean;
-    allowDrop?: (node: Node<K>) => boolean;
+    allowDrop?: (node: Node<K>, srcNode: Node<K>, mode: Mode) => boolean;
 }
 export interface TreeEvents<K extends Key> {
     denydrag: [Node<K>];
-    denydrop: [Node<K>];
+    denydrop: [Node<K>, Node<K>, Mode];
     dragend: [DragEndData<K>];
     transitionEnd: [];
 }
@@ -54,5 +55,6 @@ export declare class Tree<K extends Key = Key> extends Component<TreeProps<K>, T
     expand(key: K): void;
     shrink(key: K): void;
     getNodes(): Node<K>[];
+    expandAll(): void;
     private onClick;
 }