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

package/lib/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/lib/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/lib/Select/utils/iconUtil.js

@@ -9,16 +9,12 @@ exports.default = getIcons;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
-
 var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
 
 var _CheckOutlined = _interopRequireDefault(require("@ant-design/icons/CheckOutlined"));
 
 var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
 
-var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
-
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -65,14 +61,11 @@ function getIcons(_ref) {
     mergedSuffixIcon = function mergedSuffixIcon(_ref2) {
       var open = _ref2.open,
           showSearch = _ref2.showSearch;
-
-      if (open && showSearch) {
-        return getSuffixIconNode( /*#__PURE__*/React.createElement(_SearchOutlined.default, {
-          className: iconCls
-        }));
-      }
-
-      return getSuffixIconNode( /*#__PURE__*/React.createElement(_DownOutlined.default, {
+      // if (open && showSearch) {
+      //   return getSuffixIconNode(<SearchOutlined className={iconCls} />);
+      // }
+      return getSuffixIconNode( /*#__PURE__*/React.createElement(_Icon.default, {
+        type: "arrows-down-line",
         className: iconCls
       }));
     };

package/lib/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;

package/lib/Table/Table.js

@@ -11,7 +11,11 @@ var _lodash = _interopRequireDefault(require("lodash"));
 
 var _classnames7 = _interopRequireDefault(require("classnames"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _SortDescendingLine = _interopRequireDefault(require("../Icon/icons/SortDescendingLine"));
+
+var _SortAscendingLine = _interopRequireDefault(require("../Icon/icons/SortAscendingLine"));
+
+var _Loading = _interopRequireDefault(require("../Icon/icons/Loading"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -19,13 +23,11 @@ var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls
 
 var _reactInfiniteScrollComponent = _interopRequireDefault(require("react-infinite-scroll-component"));
 
-var _Empty = _interopRequireDefault(require("./components/Empty"));
-
 var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
 
-var _reactTable = require("react-table");
+var _Empty = _interopRequireDefault(require("../Empty"));
 
-require("./style/index");
+var _reactTable = require("react-table");
 
 var _excluded = ["style"],
     _excluded2 = ["style"];
@@ -58,6 +60,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// import './style/index';
 var ARRAY_FIRST_INDEX = 0;
 var DEFAULT_ROW_WIDTH = 0;
 var DEFAULT_BODY_HEIGHT = 0;
@@ -353,13 +356,13 @@ function Table(props, ref) {
       return null;
     }
 
-    return desc ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    return desc ? /*#__PURE__*/_react.default.createElement(_SortDescendingLine.default, {
       className: "".concat(prefixCls, "-sortIcon"),
-      type: "sort_descending",
+      fill: "currentColor",
       size: 12
-    }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    }) : /*#__PURE__*/_react.default.createElement(_SortAscendingLine.default, {
       className: "".concat(prefixCls, "-sortIcon"),
-      type: "sort_ascending",
+      fill: "currentColor",
       size: 12
     });
   };
@@ -382,9 +385,10 @@ function Table(props, ref) {
 
   var LoadingNode = /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames7.default)("".concat(prefixCls, "-loading"))
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "waiting",
+  }, /*#__PURE__*/_react.default.createElement(_Loading.default, {
     size: 16,
+    fill: "currentColor",
+    spin: true,
     className: (0, _classnames7.default)("".concat(prefixCls, "-loading-icon"))
   }), "Loading");
 
@@ -394,7 +398,13 @@ function Table(props, ref) {
     }
 
     if (!loading && !rows.length) {
-      return /*#__PURE__*/_react.default.createElement(_Empty.default, null);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames7.default)("".concat(prefixCls, "-empty-icon"))
+      }, /*#__PURE__*/_react.default.createElement(_Empty.default, {
+        title: "No Data",
+        size: "large",
+        image: _Empty.default.PRESENTED_IMAGE_SIMPLE
+      }));
     }
 
     var renderRowList = function renderRowList() {

package/lib/Table/style/index.less

@@ -135,8 +135,15 @@
     }
   }
 
+  &-empty-icon {
+    padding-top: 52px;
+  }
+
   &-init-loading {
     .ald-table-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       padding-top: 84px;
     }
   }

package/lib/Tabs/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { TabsProps } from 'antd';
 export declare type TabsSize = 'default' | 'large';
-export interface ITabsProps {
+export interface ITabsProps extends Omit<TabsProps, 'size'> {
     /**
      * @description 大小
      * @default default

package/lib/Tabs/index.js

@@ -13,11 +13,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _Button = _interopRequireDefault(require("../Button"));
+
 var _TabPane = _interopRequireDefault(require("./TabPane"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["size", "className", "adaptHeight"];
+var _excluded = ["size", "className", "popupClassName", "adaptHeight"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,6 +36,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function Tabs(props) {
   var size = props.size,
       className = props.className,
+      popupClassName = props.popupClassName,
       adaptHeight = props.adaptHeight,
       otherProps = _objectWithoutProperties(props, _excluded);
 
@@ -44,11 +47,15 @@ function Tabs(props) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_tabs.default, Object.assign({
-    moreIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: "more_vert",
-      size: 18
+    moreIcon: /*#__PURE__*/_react.default.createElement(_Button.default, {
+      size: "default",
+      type: "text",
+      icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        type: "more"
+      })
     }),
     tabBarGutter: 24,
+    popupClassName: (0, _classnames.default)(popupClassName, 'ald-tabs-dropdown'),
     className: (0, _classnames.default)('ald-tabs', className, {
       'ald-adapt-height': adaptHeight,
       'ald-tabs-default': size !== 'large'

package/lib/Tabs/style/index.less

@@ -1,5 +1,5 @@
 @import '../../style/index.less';
-
+@import '../../Button/style/index.less';
 //status- default
 @Tabs-color: @NL30;
 @Tabs-fontWeight: 400;
@@ -98,3 +98,37 @@
     }
   }
 }
+
+.ald-tabs-dropdown {
+  .ant-tabs-dropdown-menu {
+    padding: 4px;
+    border-radius: 6px;
+    box-shadow: @shadow-L;
+
+    .ant-tabs-dropdown-menu-item-active {
+      background-color: @NL97;
+    }
+
+    .ant-tabs-dropdown-menu-item {
+      padding: 8px 12px;
+      line-height: 20px;
+      border-radius: 6px;
+    }
+
+    .ant-tabs-dropdown-menu-item,
+    .ant-tabs-dropdown-menu-submenu-title {
+      &:hover {
+        background-color: @NL97;
+      }
+
+      &.ant-tabs-dropdown-menu-item-disabled {
+        color: @NL80;
+        cursor: default;
+
+        &:hover {
+          background-color: @BG100;
+        }
+      }
+    }
+  }
+}

package/lib/index.d.ts

@@ -68,3 +68,4 @@ export { default as Empty } from './Empty';
 export type { IEmptyProps as EmptyProps } from './Empty';
 export { default as Avatar } from './Avatar';
 export type { IAvatarProps as AvatarProps } from './Avatar';
+export { default as Icon } from './Icon';

package/lib/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "Form", {
     return _Form.default;
   }
 });
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function get() {
+    return _Icon.default;
+  }
+});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
@@ -284,4 +290,6 @@ var _Empty = _interopRequireDefault(require("./Empty"));
 
 var _Avatar = _interopRequireDefault(require("./Avatar"));
 
+var _Icon = _interopRequireDefault(require("./Icon"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/index.less

@@ -1,4 +1,5 @@
 @root-entry-name: default;
 @import './mixins/index.less';
+@import './themes/default/scrollBar.less';
 @import './themes/default/index.less';
 @import './mixins/index.less';

package/lib/style/themes/default/scrollBar.less

@@ -0,0 +1,13 @@
+::-webkit-scrollbar-thumb {
+  background: @NL90;
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  min-height: 12px;
+  background-color: transparent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.3.0-beta.1",
+  "version": "0.3.0",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",