@aloudata/aloudata-design 0.4.8-beta.5 → 0.4.8-beta.7

package/dist/Button/index.js

@@ -17,9 +17,9 @@ import { Button as AntdButton } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 var iconPrefixCls = 'aldicon';
-var ICON_LARGE = 24;
-var ICON_MIDDLE = 20;
-var ICON_SMALL = 16;
+var ICON_LARGE = 20;
+var ICON_MIDDLE = 16;
+var ICON_SMALL = 14;
 export var btnPrefix = 'ald-btn';
 export function getButtonType(buttonType) {
   if (!['primary', 'secondary', 'dangerous', 'text', 'link'].includes(buttonType)) {
@@ -44,7 +44,7 @@ export function getDangerStatus(buttonType) {
   return false;
 }
 export function getButtonSizeClass(ButtonSize) {
-  return ButtonSize === 'middle' || undefined ? "".concat(btnPrefix, "-middle") : "".concat(btnPrefix, "-").concat(ButtonSize);
+  return ['small', 'large'].includes(ButtonSize) ? "".concat(btnPrefix, "-").concat(ButtonSize) : "".concat(btnPrefix, "-middle");
 }
 export function getIconSize(ButtonSize) {
   if (ButtonSize === 'large') {
@@ -80,7 +80,7 @@ export var setIcon = function setIcon(iconNode, size, loading) {
   if (loading) {
     return /*#__PURE__*/React.createElement(LoadingLine, {
       spin: true,
-      size: ICON_LARGE,
+      size: getIconSize(size),
       className: classNames("".concat(iconPrefixCls, "-icon-left"), iconPrefixCls),
       fill: "currentColor"
     });

package/dist/Button/style/index.less

@@ -254,13 +254,14 @@
 
       .aldicon-icon-left {
         svg {
-          vertical-align: -2px;
+          vertical-align: -4px;
         }
       }
 
-      .aldicon-icon-left + span {
-        margin-left: @button-left-icon-margin-right-large;
-      }
+      gap:@button-left-icon-margin-right-large;
+      // .aldicon-icon-left + span {
+      //   margin-left: @button-left-icon-margin-right-large;
+      // }
     }
 
     &-middle {
@@ -284,13 +285,14 @@
 
       .aldicon-icon-left {
         svg {
-          vertical-align: -2px;
+          vertical-align: -3px;
         }
       }
 
-      .aldicon-icon-left + span {
-        margin-left: @button-left-icon-margin-right-middle;
-      }
+      gap:@button-left-icon-margin-right-middle;
+      // .aldicon-icon-left + span {
+      //   margin-left: @button-left-icon-margin-right-middle;
+      // }
     }
 
     &-small {
@@ -318,39 +320,41 @@
         }
       }
 
-      .aldicon-icon-left + span {
-        margin-left: @button-left-icon-margin-right-small;
-      }
+      gap:@button-left-icon-margin-right-small;
+      // .aldicon-icon-left + span {
+      //   margin-left: @button-left-icon-margin-right-small;
+      // }
     }
 
-    &-mini {
-      height: @button-height-mini;
-      padding: @button-border-padding-mini;
-      font-size: @button-text-size-mini;
-      line-height: 22px;
-      border-radius: @button-border-radius-mini;
-
-      &.ant-btn-icon-only {
-        min-width: @button-height-mini;
-        height: @button-height-mini;
-        border-radius: @button-border-radius-mini;
-      }
-
-      &.ant-btn-circle {
-        min-width: @button-height-mini;
-        height: @button-height-mini;
-        border-radius: 50%;
-      }
-
-      .aldicon-icon-left {
-        svg {
-          vertical-align: -2px;
-        }
-      }
-
-      .aldicon-icon-left + span {
-        margin-left: @button-left-icon-margin-right-mini;
-      }
-    }
+    // &-mini {
+    //   height: @button-height-mini;
+    //   padding: @button-border-padding-mini;
+    //   font-size: @button-text-size-mini;
+    //   line-height: 22px;
+    //   border-radius: @button-border-radius-mini;
+
+    //   &.ant-btn-icon-only {
+    //     min-width: @button-height-mini;
+    //     height: @button-height-mini;
+    //     border-radius: @button-border-radius-mini;
+    //   }
+
+    //   &.ant-btn-circle {
+    //     min-width: @button-height-mini;
+    //     height: @button-height-mini;
+    //     border-radius: 50%;
+    //   }
+
+    //   .aldicon-icon-left {
+    //     svg {
+    //       vertical-align: -2px;
+    //     }
+    //   }
+
+    //   gap:@button-left-icon-margin-right-mini;
+    //   // .aldicon-icon-left + span {
+    //   //   margin-left: @button-left-icon-margin-right-mini;
+    //   // }
+    // }
   }
 }

package/dist/Button/style/variables.less

@@ -6,27 +6,27 @@
 /** size控制 **/
 @button-height-large: 36px;
 @button-text-size-large: 16px;
-@button-border-radius-large: 8px;
-@button-border-padding-large: 6px 14px;
+@button-border-radius-large: 6px;
+@button-border-padding-large: 6px 24px;
 @button-left-icon-margin-right-large: 8px;
 
 @button-height-middle: 32px;
-@button-text-size-middle: 14px;
-@button-border-radius-middle: 8px;
-@button-border-padding-middle: 6px 12px;
-@button-left-icon-margin-right-middle: 8px;
+@button-text-size-middle: 13px;
+@button-border-radius-middle: 4px;
+@button-border-padding-middle: 6px 20px;
+@button-left-icon-margin-right-middle: 4px;
 
 @button-height-small: 28px;
 @button-text-size-small: 12px;
-@button-border-radius-small: 6px;
-@button-border-padding-small: 6px 10px;
+@button-border-radius-small: 4px;
+@button-border-padding-small: 6px 16px;
 @button-left-icon-margin-right-small: 4px;
 
-@button-height-mini: 24px;
-@button-text-size-mini: 12px;
-@button-border-radius-mini: 4px;
-@button-border-padding-mini: 0 7px;
-@button-left-icon-margin-right-mini: 4px;
+// @button-height-mini: 24px;
+// @button-text-size-mini: 12px;
+// @button-border-radius-mini: 4px;
+// @button-border-padding-mini: 0 7px;
+// @button-left-icon-margin-right-mini: 4px;
 
 /****  type控制  ****/
 @button-primary-bg-color: @B40;

package/dist/Empty/image/SearchSmall.js

@@ -14,6 +14,11 @@ var SearchSmall = function SearchSmall() {
     fill: "#EFF2F5",
     stroke: "#F9FAFB",
     strokeWidth: "5"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.4074 15.3333C17.1574 15.3333 15.3333 17.1574 15.3333 19.4074C15.3333 21.6575 17.1574 23.4815 19.4074 23.4815C20.5031 23.4815 21.4978 23.0489 22.23 22.3453C22.2466 22.3241 22.2646 22.3037 22.2842 22.2842C22.3037 22.2646 22.3241 22.2466 22.3453 22.23C23.0489 21.4978 23.4815 20.5031 23.4815 19.4074C23.4815 17.1574 21.6575 15.3333 19.4074 15.3333ZM23.6734 22.7306C24.3887 21.8138 24.8148 20.6603 24.8148 19.4074C24.8148 16.421 22.3938 14 19.4074 14C16.421 14 14 16.421 14 19.4074C14 22.3938 16.421 24.8148 19.4074 24.8148C20.6603 24.8148 21.8138 24.3887 22.7306 23.6734L24.8619 25.8047C25.1223 26.0651 25.5444 26.0651 25.8047 25.8047C26.0651 25.5444 26.0651 25.1223 25.8047 24.8619L23.6734 22.7306Z",
+    fill: "#667085"
   }));
 };
 

package/dist/Empty/style/index.less

@@ -46,12 +46,23 @@
       width:160px;
       height: 160px;
     }
+
+    .ald-empty-title{
+      margin-top: 20px;
+    }
   }
 
   &.ald-empty-small{
+    padding:24px;
+
     .ald-empty-image-wrap{
       width:40px;
       height: 40px;
+      
+    }
+
+    .ald-empty-title{
+      margin-top: 12px;
     }
   }
 }

package/dist/Menu/style/index.less

@@ -68,3 +68,74 @@
     }
   }
 }
+
+.ant-menu-submenu.ant-menu-submenu-popup.ant-menu{
+  .ant-menu-vertical {
+    border: none;
+  }
+
+  .ant-menu-item,
+  .ant-menu-submenu,
+  .ant-menu-item-selected {
+    margin: 0;
+    height: initial;
+    padding: 6px 12px;
+    line-height: 20px;
+    font-size: 13px;
+    width: 100%;
+    border-radius: 0;
+    border: none;
+    background-color: @BG100;
+    color: @NL0;
+    transition: none;
+
+    &:hover {
+      background-color: @BG90 !important;
+    }
+
+    &:active {
+      background-color: none;
+    }
+
+    &:not(.ant-menu-item-selected):active {
+      background-color: @BG90;
+    }
+
+    &.ant-menu-item-disabled {
+      color: @NL50 !important;
+      transition: none;
+      background-color: @BG100 !important;
+      cursor: default;
+    }
+
+    .ant-menu-submenu-title {
+      line-height: 20px;
+      font-size: 13px;
+      width: 100%;
+      padding:0;
+      height: initial;
+      margin:0;
+
+      &:hover{
+        background: none;
+      }
+    }
+  }
+
+  .ant-menu.ant-menu-sub{
+    padding:4px 0;
+  }
+
+  .ant-menu-title-content{
+    line-height: 20px;
+    font-size: 13px;
+    width: 100%;
+    padding:0;
+    height: initial;
+    margin:0;
+
+    &:hover{
+      background: none;
+    }
+  } 
+}

package/dist/Modal/index.js

@@ -3,7 +3,7 @@ var _excluded = ["className", "type", "loading", "size", "disabled", "shape"],
     _excluded3 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
     _excluded4 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
     _excluded5 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
-    _excluded6 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
+    _excluded6 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "className", "width"],
     _excluded7 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -91,6 +91,7 @@ var OriginModal = function OriginModal(props) {
     width: width || DEFAULT_WIDTH,
     closeIcon: closeIcon || /*#__PURE__*/React.createElement(CloseLLine, {
       size: 16,
+      fill: theme.NL40,
       className: "ald-modal-close"
     })
   }), children);
@@ -172,6 +173,7 @@ Modal.warning = function modalWarn(props) {
       _props$cancelButtonPr5 = props.cancelButtonProps,
       cancelButtonProps = _props$cancelButtonPr5 === void 0 ? {} : _props$cancelButtonPr5,
       okType = props.okType,
+      className = props.className,
       width = props.width,
       restProps = _objectWithoutProperties(props, _excluded6);
 
@@ -179,6 +181,7 @@ Modal.warning = function modalWarn(props) {
     okButtonProps: getButtonProps(okButtonProps, 'dangerous', okType),
     cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary', okType),
     width: width || DEFAULT_WIDTH,
+    className: classNames('ald-modal-warning', className),
     icon: icon || /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
       fill: [theme.SB40, theme.ND0],
       theme: "multi-color",

package/dist/Modal/style/index.less

@@ -17,9 +17,10 @@
   .ald-modal-title-container {
     display: flex;
     align-items: center;
+    gap: 12px;
 
     .ald-modal-text-container {
-      margin-left: 12px;
+      // margin-left: 12px;
       flex: 1;
     }
 
@@ -61,12 +62,12 @@
     font-size: 13px;
   }
 
-  .ant-modal-footer{
+  .ant-modal-footer {
     .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
       margin-bottom: 0;
       margin-inline-start: 12px;
     }
-  } 
+  }
 }
 
 .ant-modal-confirm {
@@ -75,15 +76,31 @@
       flex: 1;
       overflow: initial;
       margin-inline-start: 12px;
-  
+
       & + .ant-modal-confirm-content {
         margin-block-start: 16px;
-        margin-left:28px;
+        margin-left: 28px;
       }
     }
   }
 
-  .ant-modal-confirm-btns{
+  .ant-modal-confirm-btns {
     margin-block-start: 16px;
   }
 }
+
+.ald-modal-warning {
+  .ant-modal-confirm-btns {
+    .ald-btn {
+      background-color: @SB40;
+      border-color: @SB40;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: @SB40;
+        border-color: @SB40;
+      }
+    }
+  }
+}

package/dist/Select/index.js

@@ -28,13 +28,20 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+import { FoldDownFill } from '@aloudata/icons-react';
 import { Select as AntdSelect } from 'antd';
 import classNames from 'classnames';
 import List from 'rc-virtual-list';
-import React, { forwardRef, useEffect, useLayoutEffect, useMemo } from 'react';
+import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import Empty from "../Empty";
 import MultipleOption from "./components/MultipleOption";
 import SingleOption from "./components/SingleOption";
+import theme from "../style/themes/default/themeColor.module.less";
+var suffixIconSizeMap = {
+  large: 20,
+  middle: 16,
+  small: 14
+};
 
 var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultiple, options, value, defaultValue) {
   if (typeof value !== 'undefined') {
@@ -92,9 +99,14 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       popupClassName = props.popupClassName,
       listHeight = props.listHeight,
-      listItemHeight = props.listItemHeight,
+      _props$listItemHeight = props.listItemHeight,
+      listItemHeight = _props$listItemHeight === void 0 ? 36 : _props$listItemHeight,
       _props$notFoundConten = props.notFoundContent,
-      notFoundContent = _props$notFoundConten === void 0 ? /*#__PURE__*/React.createElement(Empty, null) : _props$notFoundConten,
+      notFoundContent = _props$notFoundConten === void 0 ? /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SEARCH_SMALL,
+    size: "small",
+    title: "No data"
+  }) : _props$notFoundConten,
       value = props.value,
       _props$style = props.style,
       style = _props$style === void 0 ? {} : _props$style,
@@ -121,6 +133,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       prefixWidth = _React$useState6[0],
       setPrefixWidth = _React$useState6[1];
 
+  var updatedRef = useRef(false);
+
   var onMultipleOptionChange = function onMultipleOptionChange(option, selected) {
     var newOptions = [];
 
@@ -147,14 +161,24 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }), newOptions);
   };
 
+  var getListHeight = function getListHeight() {
+    if (typeof listHeight === 'number' && options !== null && options !== void 0 && options.length) {
+      if (listHeight <= options.length * listItemHeight) {
+        return listHeight;
+      }
+    }
+
+    return 0;
+  };
+
   var multipleRender = function multipleRender() {
     return /*#__PURE__*/React.createElement("div", {
       className: "ald-multiple-option-list"
     }, /*#__PURE__*/React.createElement(List, {
       data: options || [],
       "data-id": "list",
-      height: listHeight,
-      itemHeight: listItemHeight || 36,
+      height: getListHeight(),
+      itemHeight: listItemHeight,
       itemKey: "value"
     }, function (option) {
       var isSelected = selectedOptions.some(function (selectedOption) {
@@ -191,8 +215,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }, /*#__PURE__*/React.createElement(List, {
       data: options || [],
       "data-id": "list",
-      height: listHeight,
-      itemHeight: listItemHeight || 36,
+      height: getListHeight(),
+      itemHeight: listItemHeight,
       itemKey: "value"
     }, function (option) {
       var isSelected = selectedOptions.some(function (selectedOption) {
@@ -273,7 +297,11 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   useEffect(function () {
-    setSelectedOptions(getSelectedOptionsFromValue(isMultiple, options, value));
+    if (updatedRef.current) {
+      setSelectedOptions(getSelectedOptionsFromValue(isMultiple, options, value));
+    } else {
+      updatedRef.current = true;
+    }
   }, [value]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('ald-select', className, {
@@ -314,6 +342,10 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     style: {
       width: '100%'
     },
+    suffixIcon: /*#__PURE__*/React.createElement(FoldDownFill, {
+      size: suffixIconSizeMap[props.size || 'middle'],
+      fill: theme.NL50
+    }),
     onDropdownVisibleChange: function onDropdownVisibleChange(open) {
       setIsOpen(open);
 

package/dist/Select/style/index.less

@@ -23,9 +23,14 @@
   box-sizing: border-box;
   border: 1px solid @BG60;
   border-radius: 4px;
+  background-color: @BG100;
   // padding: 0 4px;
   cursor: pointer;
-  width:100%;
+  width: 100%;
+
+  .ant-select-selector {
+    color: @NL0;
+  }
 
   .ald-select-prefix {
     color: @NL40;
@@ -50,7 +55,6 @@
       border: none;
     }
   }
-
 }
 
 .ant-select-selection-overflow {

package/dist/Select/style/multiple.less

@@ -15,6 +15,8 @@
   // height: 20px;
   margin-left: 0;
   display: flex;
+  height: 36px;
+  box-sizing: border-box;
 
   &:hover{
     background-color: @BG90;

package/dist/Select/style/single.less

@@ -8,6 +8,8 @@
     display: flex;
     align-items: center;
     margin-left: 0;
+    height: 36px;
+    box-sizing: border-box;
 
     &:hover{
       background-color: @BG90;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.4.8-beta.5",
+  "version": "0.4.8-beta.7",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",