@aloudata/aloudata-design 2.0.0-beta.11 → 2.0.0-beta.13

package/dist/Select/style/status.less

@@ -11,12 +11,18 @@
 .ald-select.ald-select-primary {
   .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
 
+  &.ald-select-multiple .ant-select {
+    .ant-select-selector {
+      color: var(--alias-colors-text-selected, #126fdd);
+    }
+  }
+
   &.ald-select-fitted {
     .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
   }
 
   &:hover {
-    .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+    .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af), var(--alias-colors-bg-accent-gray-subtler-default, #F9FAFB),var(--alias-colors-text-default, #1f2937));
   }
 
   &:active {
@@ -28,12 +34,22 @@
 
     cursor: default;
 
-    .ant-select .ant-select-selector {
+    .ant-select {
       cursor: default;
 
+      .ant-select-selector {
+        cursor: default;
+      }
+
       .ant-select-selection-search input {
         cursor: default;
       }
+
+      .ant-select-arrow {
+        .ald-select-suffix-icon {
+          color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
+        }
+      }
     }
   }
 
@@ -73,6 +89,12 @@
         .ant-select-selection-search input {
           cursor: default;
         }
+
+        .ant-select-arrow {
+          .ald-select-suffix-icon {
+            color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
+          }
+        }
       }
     }
   }

package/dist/Table/style/index.less

@@ -70,7 +70,7 @@
   .ald-table-th-default {
     font-weight: 500;
     line-height: 16px;
-    padding: 0 var(--alias-spacing-200, 16px);
+    padding-left: var(--alias-spacing-200, 16px);
     font-size: 12px;
     overflow: hidden;
     height: 40px;
@@ -80,7 +80,7 @@
 
   .ald-table-td-default {
     line-height: 20px;
-    padding: 0 var(--alias-spacing-200, 16px);
+    padding-left: var(--alias-spacing-200, 16px);
     display: flex;
     align-items: center;
     height: 100%;

package/dist/Tooltip/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
 import AntdTooltip from 'antd/lib/tooltip';
 import classNames from 'classnames';
+import React from 'react';
 export default function Tooltip(props) {
   var children = props.children,
     title = props.title,
@@ -9,8 +9,10 @@ export default function Tooltip(props) {
     trigger = props.trigger,
     zIndex = props.zIndex,
     placement = props.placement,
-    mouseEnterDelay = props.mouseEnterDelay,
-    mouseLeaveDelay = props.mouseLeaveDelay,
+    _props$mouseEnterDela = props.mouseEnterDelay,
+    mouseEnterDelay = _props$mouseEnterDela === void 0 ? 0 : _props$mouseEnterDela,
+    _props$mouseLeaveDela = props.mouseLeaveDelay,
+    mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0 : _props$mouseLeaveDela,
     getPopupContainer = props.getPopupContainer,
     destroyTooltipOnHide = props.destroyTooltipOnHide,
     getTooltipContainer = props.getTooltipContainer,

package/dist/Tree/Tree.js

@@ -13,11 +13,10 @@ import { noop } from 'lodash';
 import RcTree from 'rc-tree';
 import * as React from 'react';
 import { ConfigContext } from "../ConfigProvider";
-import { ChevronDownLine, DragLine } from "../Icon";
+import { ArrowRightLightLine, DragLine } from "../Icon";
 import collapseMotion from "../_utils/motion";
 import dropIndicatorRender from "./utils/dropIndicator";
 import renderSwitcherIcon from "./utils/iconUtil";
-var TREE_SWITCH_LARGE_ICON_SIZE = 20;
 var TREE_SWITCH_CION_SIZE = 16;
 
 // [Legacy] Compatible for v3
@@ -100,7 +99,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       keyEntities = nodeProps.context.keyEntities,
       isLeaf = nodeProps.isLeaf;
     var level = ((_keyEntities = keyEntities[eventKey]) === null || _keyEntities === void 0 ? void 0 : _keyEntities.level) || 0;
-    var iconSize = size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE;
+    var iconSize = TREE_SWITCH_CION_SIZE;
     var indentWidth = isLeaf ? iconSize : 0;
     indentWidth += level * (iconSize / 2);
     return /*#__PURE__*/React.createElement("span", {
@@ -158,6 +157,15 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return treeData;
   }, [filterTreeNode, treeData]);
+  var noChildren = React.useMemo(function () {
+    if (newTreeData !== null && newTreeData !== void 0 && newTreeData.length) {
+      return newTreeData.every(function (node) {
+        var _node$children;
+        return !((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length);
+      });
+    }
+    return true;
+  }, [newTreeData]);
   return /*#__PURE__*/React.createElement(RcTree, _extends({
     itemHeight: 20,
     ref: ref,
@@ -165,7 +173,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, newProps, {
     prefixCls: prefixCls,
     treeData: newTreeData,
-    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _classNames), className),
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _defineProperty(_classNames, "".concat(prefixCls, "-no-children"), noChildren), _classNames), className),
     direction: direction,
     checkable: checkable ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-checkbox-inner")
@@ -174,10 +182,10 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // @ts-ignore
     ,
     switcherIcon: function switcherIcon(nodeProps) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ChevronDownLine, {
-        size: size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE,
-        color: '#a2a2a2'
-      }, "\u5C55\u5F00"), showLine, nodeProps, size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE));
+      return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ArrowRightLightLine, {
+        size: TREE_SWITCH_CION_SIZE,
+        color: '#9CA3AF'
+      }, "\u5C55\u5F00"), showLine, nodeProps, TREE_SWITCH_CION_SIZE));
     },
     draggable: draggableConfig
   }), children);

package/dist/Tree/demo/basic/index.js

@@ -4,6 +4,7 @@ export default (function () {
   return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Tree, {
     size: "large",
     showIcon: true,
+    checkable: true,
     icon: 'icon',
     treeData: [{
       title: 'Parent 1',
@@ -33,6 +34,9 @@ export default (function () {
           disabled: true
         }]
       }]
+    }, {
+      title: 'Parent 2',
+      key: '1-1'
     }]
   }));
 });

package/dist/Tree/style/checkbox.less

@@ -1,7 +1,6 @@
-.aldCheckboxFn(@checkbox-prefix-cls: ~'ald-tree-checkbox') {
-  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
+.aldCheckboxFn() {
   // 一般状态
-  .@{checkbox-prefix-cls} {
+  .ald-tree-checkbox {
     .reset-component();
 
     position: relative;
@@ -22,11 +21,7 @@
       animation: ald-checkbox-effect 0.36s ease-in-out;
       animation-fill-mode: backwards;
       content: '';
-    }
-
-    &:hover::after,
-    .@{checkbox-prefix-cls}-wrapper:hover &::after {
-      visibility: hidden;
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
 
     &-inner {
@@ -38,7 +33,8 @@
       height: @checkbox-size;
       direction: ltr;
       background-color: @checkbox-check-bg;
-      border: 1px solid #dbdbdb;
+      border: 1px solid
+        var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
       border-radius: @checkbox-border-radius;
       border-collapse: separate;
       transition: all 0.3s;
@@ -54,7 +50,7 @@
         display: table;
         width: @check-width;
         height: @check-height;
-        border: 2px solid @checkbox-check-color;
+        border: 2px solid;
         border-top: 0;
         border-left: 0;
         transform: rotate(45deg) scale(0) translate(-50%, -50%);
@@ -62,6 +58,21 @@
         transition: all 0.1s @ease-in-back, opacity 0.1s;
         content: ' ';
       }
+
+      &:hover {
+        border-color: var(
+          --alias-colors-border-accent-gray-subtle-hover,
+          #9ca3af
+        );
+      }
+
+      &:active {
+        border-color: var(
+          --alias-colors-border-accent-gray-subtle-default,
+          #d1d5db
+        );
+        background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+      }
     }
 
     &-input {
@@ -76,10 +87,10 @@
   }
 
   // 选中状态
-  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
+  .ald-tree-checkbox-checked .ald-tree-checkbox-inner::after {
     position: absolute;
     display: table;
-    border: 2px solid @checkbox-color;
+    border: 2px solid var(--alias-colors-icon-inverse-default, #fff);
     border-top: 0;
     border-left: 0;
     transform: rotate(45deg) scale(1) translate(-50%, -50%);
@@ -88,30 +99,31 @@
     content: ' ';
   }
 
-  .@{checkbox-prefix-cls}-checked {
-    .@{checkbox-inner-prefix-cls} {
-      background-color: #f8f8f8;
+  .ald-tree-checkbox-checked {
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
   }
 
-  .@{checkbox-prefix-cls}-disabled {
+  .ald-tree-checkbox-disabled {
     cursor: initial;
 
-    &.@{checkbox-prefix-cls}-checked {
-      .@{checkbox-inner-prefix-cls}::after {
-        border-color: @disabled-color;
+    &.ald-tree-checkbox-checked {
+      .ald-tree-checkbox-inner::after {
+        border-color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
         animation-name: none;
       }
     }
 
-    .@{checkbox-prefix-cls}-input {
+    .ald-tree-checkbox-input {
       cursor: initial;
       pointer-events: none;
     }
 
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @input-disabled-bg;
-      // border-color: @border-color-base !important;
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+      border-color: var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1));
 
       &::after {
         border-color: @input-disabled-bg;
@@ -127,12 +139,12 @@
 
     // Not show highlight border of checkbox when disabled
     &:hover::after,
-    .@{checkbox-prefix-cls}-wrapper:hover &::after {
+    .ald-tree-checkbox-wrapper:hover &::after {
       visibility: hidden;
     }
   }
 
-  .@{checkbox-prefix-cls}-wrapper {
+  .ald-tree-checkbox-wrapper {
     .reset-component();
 
     display: inline-flex;
@@ -147,7 +159,7 @@
       content: '\a0';
     }
 
-    &.@{checkbox-prefix-cls}-wrapper-disabled {
+    &.ald-tree-checkbox-wrapper-disabled {
       cursor: initial;
     }
 
@@ -163,12 +175,12 @@
     }
   }
 
-  .@{checkbox-prefix-cls} + span {
+  .ald-tree-checkbox + span {
     padding-right: 8px;
     padding-left: 8px;
   }
 
-  .@{checkbox-prefix-cls}-group {
+  .ald-tree-checkbox-group {
     .reset-component();
 
     display: inline-block;
@@ -187,11 +199,13 @@
   }
 
   // 半选状态
-  .@{checkbox-prefix-cls}-indeterminate {
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @checkbox-check-bg;
+  .ald-tree-checkbox-indeterminate {
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
-    .@{checkbox-inner-prefix-cls}::after {
+
+    .ald-tree-checkbox-inner::after {
       @indeterminate-width: @checkbox-size - 8px;
       @indeterminate-height: @checkbox-size - 14px;
 
@@ -199,16 +213,23 @@
       left: 50%;
       width: @indeterminate-width;
       height: @indeterminate-height;
-      background-color: @checkbox-color;
+      background-color: var(--alias-colors-icon-inverse-default, #fff);
       border: 0;
       transform: translate(-50%, -50%) scale(1);
       opacity: 1;
       content: ' ';
     }
 
-    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
-      background-color: @disabled-color;
-      border-color: @disabled-color;
+    &.ald-tree-checkbox-disabled .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+      border-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+
+      &::after {
+        background-color: var(
+          --alias-colors-icon-disabled,
+          rgba(0, 0, 0, 0.25)
+        );
+      }
     }
   }
 }

package/dist/Tree/style/index.less

@@ -29,6 +29,17 @@
   .ald-tree-treenode.ald-tree-treenode-draggable {
     .ald-tree-draggable-icon {
       opacity: 1;
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+  }
+
+  &.ald-tree-no-children {
+    .ald-tree-switcher {
+      display: none;
     }
   }
 }
@@ -60,6 +71,10 @@
     }
   }
 
+  .ald-tree-checkbox {
+    margin: 0;
+  }
+
   .ald-tree-node-content-wrapper {
     padding: @tree-padding-default;
     line-height: @tree-line-height-default;
@@ -86,7 +101,7 @@
 
       .ald-tree-tab-leader {
         flex: 1;
-        border-top: 1px dashed #dbdbdb;
+        border-top: 1px dashed var(--alias-colors-border-default);
         height: 0;
         margin: 0 4px;
       }
@@ -142,9 +157,9 @@
 
 .ald-tree-treenode-switcher-open .ald-tree-switcher svg {
   transition: transform 0.2s;
+  transform: rotate(90deg);
 }
 
 .ald-tree-treenode-switcher-close .ald-tree-switcher svg {
-  transform: rotate(-90deg);
   transition: transform 0.2s;
 }

package/dist/Tree/style/var.less

@@ -29,7 +29,7 @@
 @normal-color: #d9d9d9;
 @border-radius-base: 2px;
 @tree-node-selected-bg: @primary-2;
-@checkbox-color: @primary-color;
+@checkbox-color: var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
 @checkbox-border-radius: @border-radius-sm;
 @checkbox-check-bg: transparent;
 @checkbox-border-width: @border-width-base;