@aloudata/aloudata-design 0.3.0-beta.1 → 0.3.2

package/es/Modal/locale.d.ts

@@ -0,0 +1,7 @@
+export interface IModalLocale {
+    okText: string;
+    cancelText: string;
+    justOkText: string;
+}
+export declare function changeConfirmLocale(newLocale?: IModalLocale): void;
+export declare function getConfirmLocale(): IModalLocale;

package/es/Modal/locale.js

@@ -0,0 +1,20 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import defaultLocale from '../locale/default';
+
+var runtimeLocale = _objectSpread({}, defaultLocale.Modal);
+
+export function changeConfirmLocale(newLocale) {
+  if (newLocale) {
+    runtimeLocale = _objectSpread(_objectSpread({}, runtimeLocale), newLocale);
+  } else {
+    runtimeLocale = _objectSpread({}, defaultLocale.Modal);
+  }
+}
+export function getConfirmLocale() {
+  return runtimeLocale;
+}

package/es/Modal/style/index.less

@@ -8,8 +8,8 @@
 
   .ald-modal-close {
     position: relative;
-    top: -4px;
-    left: -10px;
+    top: 8px;
+    left: -16px;
   }
 
   .ant-modal-header {
@@ -105,7 +105,7 @@
     }
 
     .ant-btn-default {
-      padding: @Button-border-padding;
+      padding: @Button-border-padding-middle;
       color: @Button-secondary-color;
       background-color: @Button-secondary-bgColor;
       border: 1px solid;

package/es/Navigator/components/Header/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface IAppList {
     logoSrc: string;
 }

package/es/Navigator/components/Menu/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IMenuItem } from '../MenuItem';
 export type { IMenuItem } from '../MenuItem';
 interface IMenuProps {

package/es/Navigator/components/MenuItem/index.d.ts

@@ -7,7 +7,7 @@ export interface IMenuItem {
     groupTitle: string | null;
     children: IMenuItemContentProps[];
 }
-interface IMenuItemContentProps {
+export interface IMenuItemContentProps {
     menuIcon: React.ReactNode;
     content: string | React.ReactNode;
     key: string;

package/es/Navigator/index.d.ts

@@ -47,5 +47,5 @@ export interface INavigatorProps {
     }) => void;
 }
 export type { IMenuItem } from './components/Menu';
-export type { ISelectedMenuInfo } from './components/MenuItem';
+export type { ISelectedMenuInfo, IMenuItemContentProps } from './components/MenuItem';
 export default Navigator;

package/es/Navigator/style/index.less

@@ -67,26 +67,46 @@
         height: 48px;
         margin-top: 12px;
         padding: 0 12px;
-        .textStyle(@BG60, 14px, 48px, 600, normal);
+        .textStyle(@BG60, 14px, 48px, 400, normal);
       }
     }
 
     .ald-nav-menu-item {
+      position: relative;
       display: flex;
       align-items: center;
       height: 48px;
+      margin-bottom: 4px;
       padding: 0 12px;
       line-height: 48px;
       border-radius: 8px;
 
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        width: 0%;
+        height: inherit;
+        background: @ND80;
+        border-radius: inherit;
+        content: '';
+      }
+
       &-icon {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
         margin-right: 12px;
       }
 
       &-content {
+        position: relative;
+        z-index: 1;
         flex: 1;
         overflow: hidden;
-        .textStyle(@B95, 16px, 24px, 600, normal);
+        .textStyle(@B95, 16px, 24px, 400, normal);
 
         &-text {
           white-space: nowrap;
@@ -94,14 +114,18 @@
       }
 
       &:hover {
+        background-color: @ND90;
         cursor: pointer;
       }
 
       &.ald-nav-menu-item-selected {
-        background-color: @B60;
-
         .ald-nav-menu-item-content {
-          .textStyle(@ND0, 16px, 24px, 600, normal);
+          .textStyle(@ND0, 16px, 24px, 400, normal);
+        }
+
+        &::before {
+          animation: 0.26s linear 0s hoverBgChange;
+          animation-fill-mode: forwards;
         }
       }
     }
@@ -116,3 +140,20 @@
     }
   }
 }
+
+@keyframes hoverBgChange {
+  0% {
+    width: 0%;
+    background-color: @ND80;
+  }
+
+  90% {
+    width: 100%;
+    background-color: @ND80;
+  }
+
+  100% {
+    width: 100%;
+    background-color: @B40;
+  }
+}

package/es/Popover/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PopoverProps } from 'antd';
 export type { PopoverProps };
 declare function Popover(props: PopoverProps): JSX.Element;

package/es/Select/index.d.ts

@@ -14,9 +14,10 @@ export interface LabeledValue {
     label: React.ReactNode;
 }
 export declare type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
+export declare type SelectType = SizeType | 'mini';
 export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
     suffixIcon?: React.ReactNode;
-    size?: SizeType;
+    size?: SelectType;
     disabled?: boolean;
     mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
     bordered?: boolean;

package/es/Select/index.js

@@ -45,7 +45,8 @@ var InternalSelect = function InternalSelect(_ref, ref) {
       customDisabled = _ref.disabled,
       notFoundContent = _ref.notFoundContent,
       customStatus = _ref.status,
-      showArrow = _ref.showArrow,
+      _ref$showArrow = _ref.showArrow,
+      showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useContext = React.useContext(ConfigContext),

package/es/Select/rc-select/OptionList.js

@@ -39,7 +39,7 @@ import { isPlatformMac } from './utils/platformUtil';
 import useBaseProps from './hooks/useBaseProps';
 import SelectContext from './SelectContext';
 import Checkbox from '../../Checkbox';
-import Icon from '../../Icon';
+import CheckLine from '../../Icon/icons/CheckLine';
 import colors from '../../style/themes/default/themeColor.module.less';
 
 function isTitleType(content) {
@@ -382,10 +382,9 @@ var OptionList = function OptionList(_, ref) {
       style: style
     }), !multiple && /*#__PURE__*/React.createElement("div", {
       className: 'ald-select-single-check'
-    }, selected && /*#__PURE__*/React.createElement(Icon, {
+    }, selected && /*#__PURE__*/React.createElement(CheckLine, {
       color: colors.B60,
-      size: '1em',
-      type: "check"
+      size: '1em'
     })), multiple && /*#__PURE__*/React.createElement(Checkbox, {
       className: 'ald-select-multiple-checkbox',
       checked: selected,

package/es/Select/rc-select/Selector/MultipleSelector.js

@@ -48,7 +48,8 @@ var SelectSelector = function SelectSelector(props) {
       removeIcon = props.removeIcon,
       _props$maxTagCount = props.maxTagCount,
       maxTagCount = _props$maxTagCount === void 0 ? "responsive" : _props$maxTagCount,
-      maxTagTextLength = props.maxTagTextLength,
+      _props$maxTagTextLeng = props.maxTagTextLength,
+      maxTagTextLength = _props$maxTagTextLeng === void 0 ? 10 : _props$maxTagTextLeng,
       _props$maxTagPlacehol = props.maxTagPlaceholder,
       maxTagPlaceholder = _props$maxTagPlacehol === void 0 ? function (omittedValues) {
     return "\u7B49".concat(omittedValues.length, "\u9879");
@@ -160,6 +161,15 @@ var SelectSelector = function SelectSelector(props) {
   }
 
   function renderRest(omittedValues) {
+    if (omittedValues.length === values.length && omittedValues.length) {
+      var length = values.length;
+
+      var _content = "\u5DF2\u9009".concat(length, "\u9879");
+
+      return defaultRenderSelector(_content, _content, false);
+      ;
+    }
+
     var content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
     return defaultRenderSelector(content, content, false);
   } // >>> Input Node
@@ -215,7 +225,7 @@ var SelectSelector = function SelectSelector(props) {
   React.useEffect(function () {
     var prefixEl = prefixRef.current;
     var size = ['large', 'small', 'mini'].includes(props.size) ? props.size.toUpperCase() : 'MIDDLE';
-    var selectorPaddingLeft = parseInt(SelectStyle["SELECTOR_PADDING_LEFT"]);
+    var selectorPaddingLeft = parseInt(SelectStyle["SELECTOR_PADDING_HORIZONTAL_".concat(size)]);
 
     if (prefixEl) {
       var prefixOffsetWidth = prefixEl.offsetWidth;
@@ -224,7 +234,7 @@ var SelectSelector = function SelectSelector(props) {
     }
 
     return setPlaceholderLeft(selectorPaddingLeft);
-  }, []);
+  }, [values]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, selectionNode, !values.length && !inputValue && /*#__PURE__*/React.createElement("span", {
     className: classNames("".concat(selectionPrefixCls, "-placeholder"), 'ald-select-selection-placeholder', _defineProperty({}, "ald-select-selection-placeholder-prefix", prefix)),
     style: {

package/es/Select/rc-select/hooks/useOptions.d.ts

@@ -6,6 +6,6 @@ import type { FieldNames } from '../Select';
  */
 export default function useOptions<OptionType>(options: OptionType[], children: React.ReactNode, fieldNames: FieldNames, optionFilterProp: string, optionLabelProp: string): {
     options: OptionType[];
-    valueOptions: Map<React.ReactText, OptionType>;
+    valueOptions: Map<string | number, OptionType>;
     labelOptions: Map<React.ReactNode, OptionType>;
 };

package/es/Select/style/index.d.ts

@@ -1,4 +1,3 @@
-import 'antd/lib/style/index.less';
 import '../../Empty/style';
 import '../../style';
 import './index.less';

package/es/Select/style/index.js

@@ -1,4 +1,3 @@
-import 'antd/lib/style/index.less';
 import '../../Empty/style';
 import '../../style';
 import './index.less'; // style dependencies

package/es/Select/style/index.less

@@ -4,6 +4,7 @@
 
 .ald-select {
   .ant-select-selector:not(.ant-select-customize-input) {
+    background-color: @selector-bgColor-default;
     border-color: @selector-borderColor-default;
 
     .ald-select-selector-prefix {
@@ -22,6 +23,7 @@
   }
 
   &.ant-select-disabled .ant-select-selector:not(.ant-select-customize-input) {
+    background-color: @selector-bgColor-disabled;
     border-color: @selector-borderColor-disabled;
     cursor: initial;
 
@@ -44,11 +46,19 @@
     }
   }
 
+  &.ant-select-multiple.ant-select-disabled.ant-select:not(.ant-select-customize-input) {
+    .ant-select-selector {
+      background-color: @selector-bgColor-disabled;
+      border-color: @selector-borderColor-disabled;
+      cursor: initial;
+    }
+  }
+
   &:not(.ant-select-disabled):hover,
   &.ant-select.ant-select-focused:not(.ant-select-disabled) {
     .ant-select-selector {
       border-color: @selector-borderColor-active;
-      box-shadow: none;
+      box-shadow: 0 0 0 0.5px @B60;
 
       &:focus-visible {
         outline: none;
@@ -61,7 +71,9 @@
       .ant-select-selection-placeholder {
         color: @selector-placeholderColor-active;
       }
+    }
 
+    &.ant-select-open {
       .ant-select-selection-overflow,
       .ant-select-selection-item {
         color: @selector-valueColor-active;
@@ -69,14 +81,54 @@
         border: none;
       }
     }
+
+    &:not(.ant-select-open) {
+      .ant-select-selector {
+        border-color: @selector-borderColor-default;
+        box-shadow: none;
+
+        &:focus-visible {
+          outline: none;
+        }
+
+        .ald-select-selector-prefix {
+          color: @selector-labelColor-default;
+        }
+
+        .ant-select-selection-placeholder {
+          color: @selector-placeholderColor-default;
+        }
+      }
+    }
+  }
+
+  .ant-select-clear,
+  .ant-select-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @NL50;
+    font-size: inherit;
+  }
+
+  &.ant-select-disabled {
+    .ant-select-clear,
+    .ant-select-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: @NL60;
+      font-size: inherit;
+    }
   }
 
   &.ald-select-large {
+    font-size: @selector-fontSize-large;
+
     .ant-select-selector {
       align-items: center;
       height: @selector-height-large;
-      padding: 0 @selector-paddingLeft;
-      font-size: @selector-fontSize-large;
+      padding: 0 @selector-paddingHorizontal-large;
       line-height: @selector-lineHeight-large;
       border-radius: @selector-borderRadius-large;
 
@@ -91,14 +143,21 @@
         line-height: @selector-lineHeight-large;
       }
     }
+
+    &.ant-select-show-arrow {
+      .ant-select-selector {
+        padding-right: @selector-paddingHorizontal-large + @selector-fontSize-large;
+      }
+    }
   }
 
   &.ald-select-middle {
+    font-size: @selector-fontSize-middle;
+
     .ant-select-selector {
       align-items: center;
       height: @selector-height-middle;
-      padding: 0 @selector-paddingLeft;
-      font-size: @selector-fontSize-middle;
+      padding: 0 @selector-paddingHorizontal-middle;
       line-height: @selector-lineHeight-middle;
       border-radius: @selector-borderRadius-middle;
 
@@ -113,14 +172,21 @@
         line-height: @selector-lineHeight-middle;
       }
     }
+
+    &.ant-select-show-arrow {
+      .ant-select-selector {
+        padding-right: @selector-paddingHorizontal-middle + @selector-fontSize-middle;
+      }
+    }
   }
 
   &.ald-select-small {
+    font-size: @selector-fontSize-small;
+
     .ant-select-selector {
       align-items: center;
       height: @selector-height-small;
-      padding: 0 @selector-paddingLeft;
-      font-size: @selector-fontSize-small;
+      padding: 0 @selector-paddingHorizontal-small;
       line-height: @selector-lineHeight-small;
       border-radius: @selector-borderRadius-small;
 
@@ -135,14 +201,21 @@
         line-height: @selector-lineHeight-small;
       }
     }
+
+    &.ant-select-show-arrow {
+      .ant-select-selector {
+        padding-right: @selector-paddingHorizontal-small + @selector-fontSize-small;
+      }
+    }
   }
 
   &.ald-select-mini {
+    font-size: @selector-fontSize-mini;
+
     .ant-select-selector {
       align-items: center;
       height: @selector-height-mini;
-      padding: 0 @selector-paddingLeft;
-      font-size: @selector-fontSize-mini;
+      padding: 0 @selector-paddingHorizontal-mini;
       line-height: @selector-lineHeight-mini;
       border-radius: @selector-borderRadius-mini;
 
@@ -157,6 +230,12 @@
         line-height: @selector-lineHeight-mini;
       }
     }
+
+    &.ant-select-show-arrow {
+      .ant-select-selector {
+        padding-right: @selector-paddingHorizontal-mini + @selector-fontSize-mini;
+      }
+    }
   }
 
   &.ant-select-multiple {
@@ -195,6 +274,12 @@
             content: '，';
           }
         }
+
+        .ant-select-selection-search-input {
+          height: inherit;
+          line-height: inherit;
+          caret-color: @B60;
+        }
       }
 
       .ant-select-selection-overflow-item:first-of-type {
@@ -203,6 +288,10 @@
         }
       }
     }
+
+    .ant-select-selector::after {
+      height: 1.5715em;
+    }
   }
 }
 
@@ -210,9 +299,15 @@
   .ald-select-item {
     display: flex;
     align-items: center;
-    padding: 0 4px;
+    margin: 0 4px;
+    padding: 0;
     font-size: 14px;
     background-color: @select-option-bgColor;
+    border-radius: 6px;
+
+    &:hover {
+      background-color: @select-option-bgColor-hover;
+    }
 
     .ald-select-single-check {
       display: flex;

package/es/Select/style/variables.less

@@ -1,54 +1,65 @@
 /* stylelint-disable property-no-unknown */
 @import '../../style/index.less';
 
-@selector-paddingLeft: 11px;
-
 // large size
 @selector-height-large: 40px;
 @selector-borderRadius-large: 8px;
 @selector-fontSize-large: 16px;
 @selector-lineHeight-large: 24px;
 @prefix-marginRight-large: 8px;
+@selector-paddingHorizontal-large: 11px;
+
 // medium size
 @selector-height-middle: 32px;
 @selector-borderRadius-middle: 6px;
 @selector-fontSize-middle: 14px;
 @selector-lineHeight-middle: 20px;
-@prefix-marginRight-middle: 4px;
+@prefix-marginRight-middle: 8px;
+@selector-paddingHorizontal-middle: 11px;
+
 // small size
 @selector-height-small: 28px;
 @selector-borderRadius-small: 4px;
 @selector-fontSize-small: 12px;
 @selector-lineHeight-small: 16px;
 @prefix-marginRight-small: 4px;
+@selector-paddingHorizontal-small: 7px;
 // mini size
 @selector-height-mini: 24px;
 @selector-borderRadius-mini: 4px;
 @selector-fontSize-mini: 12px;
 @selector-lineHeight-mini: 16px;
 @prefix-marginRight-mini: 4px;
+@selector-paddingHorizontal-mini: 7px;
 
 //default status
 @selector-borderColor-default: @NL90;
-@selector-placeholderColor-default: @NL70;
+@selector-placeholderColor-default: @NL80;
 @selector-valueColor-default: @NL0;
 @selector-labelColor-default: @NL50;
+@selector-bgColor-default: @BG97;
 //active status
 @selector-borderColor-active: @B60;
-@selector-placeholderColor-active: @NL70;
+@selector-placeholderColor-active: @NL80;
 @selector-valueColor-active: @NL50;
 @selector-labelColor-active: @NL50;
+@selector-bgColor-active: @BG97;
 //disable status
 @selector-borderColor-disabled: @NL90;
-@selector-placeholderColor-disabled: @NL70;
-@selector-valueColor-disabled: @NL50;
-@selector-labelColor-disabled: @NL50;
+@selector-placeholderColor-disabled: @NL80;
+@selector-valueColor-disabled: @NL60;
+@selector-labelColor-disabled: @NL60;
+@selector-bgColor-disabled: @BG95;
 //-----option
 @select-option-bgColor: @BG100;
 @select-option-color: @NL0;
+@select-option-bgColor-hover: @NL97;
 
 :export {
-  SELECTOR_PADDING_LEFT: @selector-paddingLeft;
+  SELECTOR_PADDING_HORIZONTAL_LARGE: @selector-paddingHorizontal-large;
+  SELECTOR_PADDING_HORIZONTAL_MIDDLE: @selector-paddingHorizontal-middle;
+  SELECTOR_PADDING_HORIZONTAL_SMALL: @selector-paddingHorizontal-small;
+  SELECTOR_PADDING_HORIZONTAL_MINI: @selector-paddingHorizontal-mini;
   PREFIX_MARGIN_RIGHT_LARGE: @prefix-marginRight-large;
   PREFIX_MARGIN_RIGHT_MIDDLE: @prefix-marginRight-middle;
   PREFIX_MARGIN_RIGHT_SMALL: @prefix-marginRight-small;

package/es/Select/style/variables.less.d.ts

@@ -89,7 +89,10 @@ interface CssExports {
   'SC90': string;
   'SC95': string;
   'SC98': string;
-  'SELECTOR_PADDING_LEFT': string;
+  'SELECTOR_PADDING_HORIZONTAL_LARGE': string;
+  'SELECTOR_PADDING_HORIZONTAL_MIDDLE': string;
+  'SELECTOR_PADDING_HORIZONTAL_MINI': string;
+  'SELECTOR_PADDING_HORIZONTAL_SMALL': string;
   'SHADOW_L': string;
   'WHITE': string;
 }

package/es/Select/utils/iconUtil.d.ts

@@ -18,7 +18,7 @@ export default function getIcons({ suffixIcon, clearIcon, menuItemSelectedIcon,
         open: boolean;
         showSearch: boolean;
     }) => JSX.Element);
-    itemIcon: {} | null;
-    removeIcon: {} | null;
+    itemIcon: number | boolean | JSX.Element | React.ReactFragment | ((props: any) => React.ReactNode) | null;
+    removeIcon: number | boolean | JSX.Element | React.ReactFragment | ((props: any) => React.ReactNode) | null;
 };
 export {};

package/es/Select/utils/iconUtil.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import DownOutlined from '@ant-design/icons/DownOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-import SearchOutlined from '@ant-design/icons/SearchOutlined';
-import Icon from '../../Icon';
+import CancelFill from '../../Icon/icons/CancelFill';
+import Color from '../../style/themes/default/themeColor.module.less';
+import ArrowsDownLine from '../../Icon/icons/ArrowsDownLine';
 export default function getIcons(_ref) {
   var suffixIcon = _ref.suffixIcon,
       clearIcon = _ref.clearIcon,
@@ -43,14 +43,11 @@ export default function getIcons(_ref) {
     mergedSuffixIcon = function mergedSuffixIcon(_ref2) {
       var open = _ref2.open,
           showSearch = _ref2.showSearch;
-
-      if (open && showSearch) {
-        return getSuffixIconNode( /*#__PURE__*/React.createElement(SearchOutlined, {
-          className: iconCls
-        }));
-      }
-
-      return getSuffixIconNode( /*#__PURE__*/React.createElement(DownOutlined, {
+      // if (open && showSearch) {
+      //   return getSuffixIconNode(<SearchOutlined className={iconCls} />);
+      // }
+      return getSuffixIconNode( /*#__PURE__*/React.createElement(ArrowsDownLine, {
+        color: Color.NL50,
         className: iconCls
       }));
     };
@@ -72,8 +69,8 @@ export default function getIcons(_ref) {
   if (removeIcon !== undefined) {
     mergedRemoveIcon = removeIcon;
   } else {
-    mergedRemoveIcon = /*#__PURE__*/React.createElement(Icon, {
-      type: 'close',
+    mergedRemoveIcon = /*#__PURE__*/React.createElement(CancelFill, {
+      color: Color.NL50,
       size: '1em'
     });
   }

package/es/Table/Table.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
 import { ITableProps } from './interface';
-import './style/index';
 declare function Table<RecordType extends object = any>(props: ITableProps<RecordType>, ref?: React.Ref<unknown>): ReactElement;
 declare const _default: typeof Table;
 export default _default;