@king-design/intact 3.1.0-beta.1 → 3.1.0-beta.3

package/es/components/layout/aside.d.ts

@@ -5,6 +5,7 @@ export interface AsideProps {
     fixed?: boolean;
     theme?: MenuProps['theme'];
     width?: number | string;
+    collapsedWidth?: number | string;
 }
 export declare class Aside extends Component<AsideProps> {
     static template: string | import("intact").Template<any>;

package/es/components/layout/aside.js

@@ -10,7 +10,8 @@ var typeDefs = {
   collapse: Boolean,
   fixed: Boolean,
   theme: themes,
-  width: [Number, String]
+  width: [Number, String],
+  collapsedWidth: [Number, String]
 };
 
 var defaults = function defaults() {
@@ -44,10 +45,11 @@ export var Aside = /*#__PURE__*/function (_Component) {
     var _this$get = this.get(),
         fixed = _this$get.fixed,
         width = _this$get.width,
-        collapse = _this$get.collapse;
+        collapse = _this$get.collapse,
+        collapsedWidth = _this$get.collapsedWidth;
 
     var style = addStyle(this.get('style'), {
-      width: !collapse ? getStyle(width) : getCollapseWidth()
+      width: !collapse ? getStyle(width) : getCollapseWidth(collapsedWidth)
     });
     if (!fixed) return style;
 

package/es/components/layout/body.js

@@ -5,6 +5,7 @@ import template from './template.vdt';
 import { LAYOUT, getStyle, BODY } from './helpers';
 import { addStyle } from '../utils';
 import { useConfigContext } from '../config';
+import { makeBodyStyles } from './styles';
 export var Body = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Body, _Component);
 
@@ -36,7 +37,7 @@ export var Body = /*#__PURE__*/function (_Component) {
         className = _this$get.className;
 
     var k = this.config.k;
-    return _ref = {}, _ref[k + "-layout-body"] = true, _ref[className] = className, _ref;
+    return _ref = {}, _ref[k + "-layout-body"] = true, _ref[className] = className, _ref[makeBodyStyles(k)] = true, _ref;
   };
 
   _proto.getStyles = function getStyles() {

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

@@ -1,6 +1,7 @@
 import '../../styles/global';
 export declare const themes: readonly ["light", "dark", "white"];
-export declare function getCollapseWidth(): string;
+export declare function getCollapseWidth(collapsedWidth?: string | number): string;
 export declare function makeLayoutStyles(k: string): string;
 export declare function makeHeaderStyles(k: string): string;
 export declare function makeAsideStyles(k: string): string;
+export declare function makeBodyStyles(k: string): string;

package/es/components/layout/styles.js

@@ -4,6 +4,8 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, getLeft, setAlpha } from '../../styles/utils';
 import '../../styles/global';
 import { menu } from '../menu/styles';
+import { isNullOrUndefined } from 'intact-shared';
+import { getStyle } from './helpers';
 var sizes = ['small', 'large'];
 export var themes = ['light', 'dark', 'white'];
 var defaults = {
@@ -61,8 +63,8 @@ setDefault(function () {
     layout: defaults
   }).layout;
 });
-export function getCollapseWidth() {
-  return layout.collapsedWidth;
+export function getCollapseWidth(collapsedWidth) {
+  return isNullOrUndefined(collapsedWidth) ? layout.collapsedWidth : getStyle(collapsedWidth);
 }
 export function makeLayoutStyles(k) {
   return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.", k, "-has-aside{flex-direction:row;}.", k, "-layout-footer{padding:", layout.footerPadding, ";}.", k, "-layout-body{flex:1;}");
@@ -80,4 +82,7 @@ export function makeAsideStyles(k) {
     var styles = layout[theme];
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
   }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;}");
+}
+export function makeBodyStyles(k) {
+  return /*#__PURE__*/css("transition:padding-left ", layout.transition, ";");
 }

package/es/components/layout/useParse.js

@@ -31,7 +31,7 @@ export function useParse() {
         }
 
         if (props.collapse) {
-          asideWidth = getCollapseWidth();
+          asideWidth = getCollapseWidth(props.collapsedWidth);
         }
 
         if (props.fixed) {

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-left:", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", menu.item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", menu.item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
+  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", menu.item.height, ";&: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/message/styles.js

@@ -57,7 +57,7 @@ export function makeMessagesStyles(k) {
 export function makeMessageStyles(k) {
   var _context;
 
-  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.", k, "-message-container{display:inline-block;box-shadow:", message.boxShadow, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";min-height:", message.minHeight, ";}.", k, "-message-wrapper{position:relative;display:inline-block;&.", k, "-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.", k, "-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:bre.", k, "-word;word-wrap:bre.", k, "-word;}.", k, "-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}}.", k, "-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', 'error', 'success', 'warning']).call(_context, function (type) {
+  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.", k, "-message-container{display:inline-block;box-shadow:", message.boxShadow, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";min-height:", message.minHeight, ";}.", k, "-message-wrapper{position:relative;display:inline-block;&.", k, "-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.", k, "-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.", k, "-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}}.", k, "-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', 'error', 'success', 'warning']).call(_context, function (type) {
     var color = theme.color[type === 'error' ? 'danger' : type];
     return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-message-container{background:", palette(color, -4), ";}.", k, "-message-icon{color:", color, ";}}");
   }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", message.transition, ",opacity ", message.transition, ";}&.transition-move{transition:transform ", message.transition, ";}");

package/es/components/select/styles.js

@@ -174,7 +174,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles(k) {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.", k, "-select-main{flex:1;min-width:0;}.", k, "-select-prefix,.", k, "-select-suffix{display:flex;align-items:center;position:relative;}.", k, "-select-suffix{margin-left:", select.suffixGap, ";}.", k, "-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.", k, "-input .", k, "-input-inner{background:transparent;}&.", k, "-fluid{width:100%;}.", k, "-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.", k, "-select-clear.", k, "-show{opacity:1;pointer-events:all;+.", k, "-select-suffix-icon{opacity:0;}}}.", k, "-select-suffix-icon{display:inline-flex;align-items:center;transition:opacity ", select.transition, ";}.", k, "-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.", k, "-dropdown-open{border:", select.focusBorder, ";.", k, "-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.", k, "-tags{padding:3px 0;}.", k, "-tag{word-break:bre.", k, "-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.", k, "-select-main{flex:1;min-width:0;}.", k, "-select-prefix,.", k, "-select-suffix{display:flex;align-items:center;position:relative;}.", k, "-select-suffix{margin-left:", select.suffixGap, ";}.", k, "-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.", k, "-input .", k, "-input-inner{background:transparent;}&.", k, "-fluid{width:100%;}.", k, "-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.", k, "-select-clear.", k, "-show{opacity:1;pointer-events:all;+.", k, "-select-suffix-icon{opacity:0;}}}.", k, "-select-suffix-icon{display:inline-flex;align-items:center;transition:opacity ", select.transition, ";}.", k, "-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.", k, "-dropdown-open{border:", select.focusBorder, ";.", k, "-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.", k, "-tags{padding:3px 0;}.", k, "-tag{word-break:break-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;

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

@@ -35,7 +35,7 @@ export default function ($props, $blocks, $__proto__) {
     }
   }
 
-  var _getClassAndStyleForF = getClassAndStyleForFixed(props, offset, checkType),
+  var _getClassAndStyleForF = getClassAndStyleForFixed(props, offset, k, checkType),
       className = _getClassAndStyleForF.className,
       style = _getClassAndStyleForF.style;
 

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

@@ -66,7 +66,7 @@ export default function ($props, $blocks, $__proto__) {
                     'children': function children(offsetMap) {
                       var _classNameObj, _$cn2, _$cn4;
 
-                      var _getClassAndStyleForF = getClassAndStyleForFixed(_this.get(), offsetMap[key], checkType),
+                      var _getClassAndStyleForF = getClassAndStyleForFixed(_this.get(), offsetMap[key], k, checkType),
                           className = _getClassAndStyleForF.className,
                           style = _getClassAndStyleForF.style;
 

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

@@ -102,7 +102,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:bre.", k, "-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{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/table/useFixedColumns.d.ts

@@ -16,7 +16,7 @@ export declare function useFixedColumns(getColumns: () => VNodeComponentClass<Ta
     getHasFixedLeft: () => boolean;
     getOffsetMap: () => Record<Key, number>;
 };
-export declare function getClassAndStyleForFixed({ className, fixed, align }: Props<TableColumnProps>, offset: number, checkType?: TableProps['checkType']): {
+export declare function getClassAndStyleForFixed({ className, fixed, align }: Props<TableColumnProps>, offset: number, k: string, checkType?: TableProps['checkType']): {
     className: string;
     style: {
         [x: string]: string;

package/es/components/table/useFixedColumns.js

@@ -121,7 +121,7 @@ export function useFixedColumns(getColumns, _ref, widthMap) {
     }
   };
 }
-export function getClassAndStyleForFixed(_ref2, offset, checkType) {
+export function getClassAndStyleForFixed(_ref2, offset, k, checkType) {
   var _cx, _ref3;
 
   var className = _ref2.className,
@@ -129,7 +129,7 @@ export function getClassAndStyleForFixed(_ref2, offset, checkType) {
       align = _ref2.align;
   var extraOffset = checkType && checkType !== 'none' && fixed === 'left' ? 40 : 0;
   return {
-    className: cx((_cx = {}, _cx[className] = !!className, _cx["k-fixed-" + fixed] = !!fixed, _cx["k-align-" + align] = !!align, _cx)),
+    className: cx((_cx = {}, _cx[className] = !!className, _cx[k + "-fixed-" + fixed] = !!fixed, _cx[k + "-align-" + align] = !!align, _cx)),
     style: fixed ? (_ref3 = {}, _ref3[fixed] = offset + extraOffset + "px", _ref3) : null
   };
 }

package/es/components/tooltip/styles.js

@@ -60,7 +60,7 @@ export default function makeStyles(k) {
   var arrowLong = tooltip.arrow.width;
   var arrowShort = "calc(" + arrowLong + " - 1px)"; // use &.${k}-tooltip-content to override css in dropdown menu
 
-  return /*#__PURE__*/css("&.", k, "-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:bre.", k, "-word;pointer-events:none;box-shadow:", tooltip.boxShadow, ";&.", k, "-hoverable,&.", k, "-always{pointer-events:all;}.", k, "-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.", k, "-top,&.", k, "-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.", k, "-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.", k, "-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.", k, "-left,&.", k, "-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.", k, "-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.", k, "-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("&.", k, "-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:break-word;pointer-events:none;box-shadow:", tooltip.boxShadow, ";&.", k, "-hoverable,&.", k, "-always{pointer-events:all;}.", k, "-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.", k, "-top,&.", k, "-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.", k, "-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.", k, "-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.", k, "-left,&.", k, "-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.", k, "-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.", k, "-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
     var _context;
 
     var borderColor;

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;
 }

package/es/components/tree/index.js

@@ -13,6 +13,7 @@ import { useFilter } from './useFilter';
 import { useDraggable, Mode } from './useDraggable';
 import { useTransitionEvent } from './useTransitionEvent';
 import { useConfigContext } from '../config';
+export { Mode as TreeMode };
 var typeDefs = {
   data: Array,
   filter: Function,
@@ -98,6 +99,10 @@ export var Tree = /*#__PURE__*/function (_Component) {
     return this.nodes.getNodes();
   };
 
+  _proto.expandAll = function expandAll() {
+    this.expanded.expandAll();
+  };
+
   _proto.onClick = function onClick(node) {
     if (node.data.disabled) return;
 

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

@@ -306,7 +306,7 @@ describe('Tree', function () {
     }, _callee6);
   })));
   it('draggable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var onDenyDrag, onDenyDrop, onDragEnd, _mount7, instance, element, disabled, nodes, notAllowed;
+    var onDenyDrag, onDenyDrop, onDragEnd, _mount7, instance, element, _element$querySelecto13, notAllowed, file1, file2, dir1, file3, dir2, disabled;
 
     return _regeneratorRuntime.wrap(function _callee7$(_context7) {
       while (1) {
@@ -320,53 +320,74 @@ describe('Tree', function () {
             DraggableDemo.prototype.onDenyDrop = onDenyDrop;
             DraggableDemo.prototype.onDragEnd = onDragEnd;
             _mount7 = mount(DraggableDemo), instance = _mount7[0], element = _mount7[1];
-            instance.set('expandedKeys', ['2', '2-1', '1', '1-1']);
+            instance.set('expandedKeys', ['guide']);
             _context7.next = 11;
             return wait(500);
 
           case 11:
-            // can not drag disabled item
-            disabled = element.querySelector('.k-disabled'); // dispatchEvent(disabled, 'mousedown');
+            _element$querySelecto13 = element.querySelectorAll('.k-tree-label'), notAllowed = _element$querySelecto13[0], file1 = _element$querySelecto13[1], file2 = _element$querySelecto13[2], dir1 = _element$querySelecto13[3], file3 = _element$querySelecto13[4], dir2 = _element$querySelecto13[5], disabled = _element$querySelecto13[6]; // can not drag disabled item
 
             dispatchEvent(disabled, 'dragstart');
-            expect(onDenyDrag.callCount).to.eql(1);
-            nodes = element.querySelectorAll('.k-tree-label'); // can not drag not-allowed item
-
-            notAllowed = nodes[2]; // dispatchEvent(notAllowed, 'mousedown');
+            expect(onDenyDrag.callCount).to.eql(1); // can not drag not-allowed item
 
             dispatchEvent(notAllowed, 'dragstart');
-            expect(onDenyDrag.callCount).to.eql(2); // drag insert
-
-            return _context7.abrupt("return", dragInsert(nodes[6], nodes[6]).then(function () {
-              // drag to self will do nothing
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(onDragEnd.callCount).to.eql(0);
-              return dragInsert(nodes[6], notAllowed);
-            }).then(function () {
-              // drag to not-allowed item will do nothing
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(onDragEnd.callCount).to.eql(0);
-              return dragInsert(nodes[6], disabled);
-            }).then(function () {
-              // drag to disabled item will do nothing
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(onDragEnd.callCount).to.eql(0);
-              return dragInsert(nodes[6], nodes[5], 'before');
-            }).then(function () {
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(onDragEnd.callCount).to.eql(1);
-              expect(instance.get('data')).to.matchSnapshot();
-              return dragInsert(nodes[6], nodes[5], 'after');
-            }).then(function () {
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(instance.get('data')).to.matchSnapshot();
-              return dragInsert(nodes[6], nodes[5]);
-            }).then(function () {
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(instance.get('data')).to.matchSnapshot();
-            }));
+            expect(onDenyDrag.callCount).to.eql(2);
+            _context7.next = 18;
+            return dragInsert(dir1, dir1);
+
+          case 18:
+            // drag to self will do nothing
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(0);
+            _context7.next = 22;
+            return dragInsert(file1, notAllowed);
+
+          case 22:
+            // drag to not-allowed item will do nothing
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(0);
+            _context7.next = 26;
+            return dragInsert(file1, disabled);
 
-          case 19:
+          case 26:
+            // drag to disabled item will do nothing
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(0);
+            _context7.next = 30;
+            return dragInsert(file2, file1, 'before');
+
+          case 30:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(1);
+            expect(instance.get('data')).to.matchSnapshot();
+            _context7.next = 35;
+            return dragInsert(file2, file1, 'after');
+
+          case 35:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(2);
+            expect(instance.get('data')).to.matchSnapshot();
+            _context7.next = 40;
+            return dragInsert(file1, dir1);
+
+          case 40:
+            expect(onDragEnd.callCount).to.eql(3);
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('data')).to.matchSnapshot();
+            _context7.next = 45;
+            return dragInsert(dir2, dir1);
+
+          case 45:
+            expect(onDragEnd.callCount).to.eql(3);
+            expect(onDenyDrag.callCount).to.eql(2);
+            _context7.next = 49;
+            return dragInsert(dir2, file3, 'before');
+
+          case 49:
+            expect(onDragEnd.callCount).to.eql(3);
+            expect(onDenyDrag.callCount).to.eql(2);
+
+          case 51:
           case "end":
             return _context7.stop();
         }

package/es/components/tree/styles.js

@@ -69,5 +69,5 @@ setDefault(function () {
   }).tree;
 });
 export function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", tree.fontSize, ";line-height:", tree.lineHeight, ";position:relative;.", k, "-tree-label{position:relative;display:flex;align-items:center;&.", k, "-before,&.", k, "-after{&:before{position:absolute;content:'';display:block;border-top:", tree.dragging.border, ";width:100%;left:0;}}&.", k, "-before:before{top:0;}&.", k, "-after:before{bottom:0;}&.", k, "-inner{background:", tree.selected.bgColor, ";}}.", k, "-tree-icon,.", k, "-tree-text{cursor:pointer;}.", k, "-tree-text{padding:", tree.textPadding, ";border-radius:", tree.borderRadius, ";flex:1;}.", k, "-tree-leaf{padding-left:", tree.leafIndent, ";}.", k, "-tree-icon{width:", tree.iconWidth, ";text-align:center;color:", tree.iconColor, ";&:before{transform:rotate(-90deg);transition:transform ", tree.transition, ";}}.", k, "-tree-checkbox{margin-right:", tree.checkboxGap, ";}&.", k, "-selectable{.", k, "-tree-node{&.", k, "-selected{>.", k, "-tree-label .", k, "-tree-text{background:", tree.selected.bgColor, "!important;}}}}.", k, "-tree-node{background:#fff;&:not(.", k, "-disabled){>.", k, "-tree-label .", k, "-tree-text:hover{background:", theme.color.bg, ";}}&.", k, "-expanded{>.", k, "-tree-label .", k, "-tree-icon:before{transform:rotate(0);}}&.", k, "-disabled{>.", k, "-tree-label{color:", tree.disabledColor, ";.", k, "-tree-text{cursor:not-allowed;}}}&.", k, "-dragging{background:", tree.dragging.bgColor, ";.", k, "-tree-node{background:", tree.dragging.bgColor, ";}}}.", k, "-tree{margin-left:", tree.marginLeft, ";padding-left:", tree.paddingLeft, ";}&.", k, "-line .", k, "-tree{border-left:", tree.line, ";}");
+  return /*#__PURE__*/css("font-size:", tree.fontSize, ";line-height:", tree.lineHeight, ";position:relative;.", k, "-tree-label{position:relative;display:flex;align-items:center;&.", k, "-before,&.", k, "-after{&:before{position:absolute;content:'';display:block;border-top:", tree.dragging.border, ";width:100%;left:0;}}&.", k, "-before:before{top:0;}&.", k, "-after:before{bottom:0;}&.", k, "-inner{background:", tree.selected.bgColor, ";}}.", k, "-tree-icon,.", k, "-tree-text{cursor:pointer;}.", k, "-tree-text{padding:", tree.textPadding, ";border-radius:", tree.borderRadius, ";flex:1;display:flex;align-items:center;}.", k, "-tree-leaf{padding-left:", tree.leafIndent, ";}.", k, "-tree-icon{width:", tree.iconWidth, ";text-align:center;color:", tree.iconColor, ";&:before{transform:rotate(-90deg);transition:transform ", tree.transition, ";}}.", k, "-tree-checkbox{margin-right:", tree.checkboxGap, ";}&.", k, "-selectable{.", k, "-tree-node{&.", k, "-selected{>.", k, "-tree-label .", k, "-tree-text{background:", tree.selected.bgColor, "!important;}}}}.", k, "-tree-node{background:#fff;&:not(.", k, "-disabled){>.", k, "-tree-label .", k, "-tree-text:hover{background:", theme.color.bg, ";}}&.", k, "-expanded{>.", k, "-tree-label .", k, "-tree-icon:before{transform:rotate(0);}}&.", k, "-disabled{>.", k, "-tree-label{color:", tree.disabledColor, ";.", k, "-tree-text{cursor:not-allowed;}}}&.", k, "-dragging{background:", tree.dragging.bgColor, ";.", k, "-tree-node{background:", tree.dragging.bgColor, ";}}}.", k, "-tree{margin-left:", tree.marginLeft, ";padding-left:", tree.paddingLeft, ";}&.", k, "-line .", k, "-tree{border-left:", tree.line, ";}");
 }

package/es/components/tree/useDraggable.js

@@ -57,18 +57,18 @@ export function useDraggable() {
     if (node !== overNode || newMode !== mode.value) {
       overNode = node;
       mode.set(newMode);
-      overKey.set(node.key); // if the node does not allow drop, prevent the dragging ndoe from inserting to it
-
-      if (mode.value === Mode.Inner) {
-        var _instance$get2 = instance.get(),
-            allowDrop = _instance$get2.allowDrop;
-
-        if (node.data.disabled || allowDrop && !allowDrop(node)) {
-          instance.trigger('denydrop', node);
-          valid = false;
-          return;
-        }
-      }
+      overKey.set(node.key); // if the node does not allow drop, prevent the dragging node from inserting to it
+      // if (mode.value === Mode.Inner) {
+
+      var _instance$get2 = instance.get(),
+          allowDrop = _instance$get2.allowDrop;
+
+      if (node.data.disabled || allowDrop && !allowDrop(node, draggingNode, newMode)) {
+        instance.trigger('denydrop', node, draggingNode, newMode);
+        valid = false;
+        return;
+      } // }
+
 
       valid = true;
     }

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

@@ -3,4 +3,5 @@ import type { Node } from './useNodes';
 export declare function useExpanded(getNodes: () => Node<Key>[]): {
     get: () => Set<Key>;
     toggle: (node: Node<Key>) => Promise<void>;
+    expandAll: () => void;
 };

package/es/components/tree/useExpanded.js

@@ -89,6 +89,7 @@ export function useExpanded(getNodes) {
     get: function get() {
       return expandedKeys;
     },
-    toggle: toggle
+    toggle: toggle,
+    expandAll: expandAll
   };
 }

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

@@ -5,6 +5,7 @@ export declare type DataItem<K extends Key> = {
     disabled?: boolean;
     loaded?: boolean;
     children?: DataItem<K>[];
+    [key: string]: any;
 };
 export declare function useNodes(): {
     getNodes: () => Node<Key>[];