@aloudata/aloudata-design 0.3.2 → 0.3.3

package/lib/Switch/style/index.less

@@ -1 +1,130 @@
 @import '../../style/index.less';
+
+@switch-handle-middle: @font-size-middle;
+@switch-handle-height-middle: @line-height-middle;
+@switch-handle-small: @font-size-small;
+@switch-handle-height-small: @line-height-small;
+@switch-handle-gap-middle: 3px;
+@switch-handle-gap-small: 2px;
+@switch-text-margin-left: 8px;
+@switch-aspect-ratio: 2; //宽高比
+@switch-height-radius-ratio: 2; //高度和边框圆角比
+
+.ald-switch {
+  display: inline-block;
+  font-size: 0;
+
+  .ald-switch-btn {
+    background: @NL90;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .ald-switch-text {
+    display: inline-flex;
+    align-items: center;
+    margin-left: @switch-text-margin-left;
+    color: @NL0;
+    vertical-align: middle;
+  }
+
+  &.ald-switch-checked {
+    .ald-switch-btn {
+      background-color: @B60;
+    }
+  }
+
+  &.ald-switch-disabled {
+    cursor: initial;
+
+    .ald-switch-btn {
+      cursor: initial;
+      opacity: 0.5;
+
+      * {
+        cursor: initial;
+      }
+    }
+
+    .ald-switch-text {
+      color: @NL60;
+    }
+  }
+
+  &.ald-switch-middle {
+    .ald-switch-btn {
+      width: @switch-handle-height-middle * @switch-aspect-ratio;
+      min-width: @switch-handle-height-middle * @switch-aspect-ratio;
+      height: @switch-handle-height-middle;
+      line-height: @switch-handle-height-middle;
+      border-radius: @switch-handle-height-middle / @switch-height-radius-ratio;
+
+      .ant-switch-handle {
+        top: @switch-handle-gap-middle;
+        left: @switch-handle-gap-middle;
+        width: @switch-handle-middle;
+        height: @switch-handle-middle;
+
+        .ant-switch-loading-icon {
+          width: @switch-handle-middle - 4px;
+          height: @switch-handle-middle - 4px;
+          font-size: @switch-handle-middle - 4px;
+        }
+      }
+    }
+
+    .ald-switch-text {
+      height: @switch-handle-height-middle;
+      font-size: @font-size-middle;
+      line-height: @switch-handle-height-middle;
+    }
+
+    &.ald-switch-checked {
+      .ant-switch-handle {
+        top: 3px;
+        left: calc(100% - @switch-handle-middle - @switch-handle-gap-middle);
+        width: @switch-handle-middle;
+        height: @switch-handle-middle;
+      }
+    }
+  }
+
+  &.ald-switch-small {
+    .ald-switch-btn {
+      width: @switch-handle-height-small * @switch-aspect-ratio;
+      min-width: @switch-handle-height-small * @switch-aspect-ratio;
+      height: @switch-handle-height-small;
+      line-height: @switch-handle-height-small;
+      border-radius: @switch-handle-height-small / @switch-height-radius-ratio;
+
+      .ant-switch-handle {
+        top: @switch-handle-gap-small;
+        left: @switch-handle-gap-small;
+        width: @switch-handle-small;
+        height: @switch-handle-small;
+
+        .ant-switch-loading-icon {
+          width: @switch-handle-small - 4px;
+          height: @switch-handle-small - 4px;
+          font-size: @switch-handle-small - 4px;
+        }
+      }
+    }
+
+    .ald-switch-text {
+      height: @switch-handle-height-small;
+      font-size: @font-size-small;
+      line-height: @switch-handle-height-small;
+    }
+
+    &.ald-switch-checked {
+      .ant-switch-handle {
+        left: calc(100% - @switch-handle-small - @switch-handle-gap-small);
+        width: @switch-handle-small;
+        height: @switch-handle-small;
+      }
+    }
+  }
+}

package/lib/Table/style/index.less

@@ -1,5 +1,5 @@
 @import '../../style/index.less';
-
+@import '../../Empty/style/index.less';
 @ald-iconfont-css-prefix: anticon;
 @table-row-height: 48px;
 

package/lib/Tabs/index.js

@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tabs;
 
+require("@aloudata/icons-react/styles/index.less");
+
+var _More2 = _interopRequireDefault(require("@aloudata/icons-react/es/icons/More"));
+
 require("antd/es/tabs/style");
 
 var _tabs = _interopRequireDefault(require("antd/es/tabs"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _More = _interopRequireDefault(require("../Icon/icons/More"));
-
 var _TabPane = _interopRequireDefault(require("./TabPane"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -47,7 +49,7 @@ function Tabs(props) {
   return /*#__PURE__*/_react.default.createElement(_tabs.default, Object.assign({
     moreIcon: /*#__PURE__*/_react.default.createElement("div", {
       className: "ald-tabs-moreIcon"
-    }, /*#__PURE__*/_react.default.createElement(_More.default, {
+    }, /*#__PURE__*/_react.default.createElement(_More2.default, {
       color: "currentColor"
     })),
     tabBarGutter: 24,

package/lib/Tabs/style/index.less

@@ -2,21 +2,21 @@
 @import '../../style/index.less';
 @import '../../Button/style/index.less';
 //status- default
-@Tabs-color: @NL30;
-@Tabs-fontWeight: 400;
+@tabs-color: @NL30;
+@tabs-fontWeight: 400;
 //active
-@Tabs-color-active: @B60;
-@Tabs-fontWeight-active: 600;
+@tabs-color-active: @B60;
+@tabs-fontWeight-active: 600;
 
 //middle - default
-@Tabs-fontSize: 14px;
-@Tabs-lineHeight: 20px;
-@Tabs-ink-link-bar-height: 2px;
+@tabs-font-size: 14px;
+@tabs-line-height: 20px;
+@tabs-ink-link-bar-height: 2px;
 //large
-@Tabs-fontSize-large: 16px;
-@Tabs-lineHeight-large: 24px;
-@Tabs-ink-link-bar-height-large: 3px;
-// @Tabs-
+@tabs-font-size-large: 16px;
+@tabs-line-height-large: 24px;
+@tabs-ink-link-bar-height-large: 3px;
+// @tabs-
 .ant-tabs.ald-tabs {
   &.ant-tabs {
     color: @NL30;
@@ -24,29 +24,29 @@
 
   .ant-tabs-tab {
     padding: 8px 0;
-    color: @Tabs-color;
-    font-weight: @Tabs-fontWeight;
-    font-size: @Tabs-fontSize;
-    line-height: @Tabs-lineHeight;
+    color: @tabs-color;
+    font-weight: @tabs-fontWeight;
+    font-size: @tabs-font-size;
+    line-height: @tabs-line-height;
 
     &:hover {
       color: inherit;
     }
 
     &.ant-tabs-tab-active {
-      font-weight: @Tabs-fontWeight-active;
+      font-weight: @tabs-fontWeight-active;
     }
   }
 
   .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-    color: @Tabs-color-active;
-    font-weight: @Tabs-fontWeight-active;
+    color: @tabs-color-active;
+    font-weight: @tabs-fontWeight-active;
     text-shadow: none;
   }
 
   .ant-tabs-ink-bar {
-    height: @Tabs-ink-link-bar-height;
-    background: @Tabs-color-active;
+    height: @tabs-ink-link-bar-height;
+    background: @tabs-color-active;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
   }
@@ -54,12 +54,12 @@
   /* large size */
   &.ant-tabs-large {
     .ant-tabs-tab {
-      font-size: @Tabs-fontSize-large;
-      line-height: @Tabs-lineHeight-large;
+      font-size: @tabs-font-size-large;
+      line-height: @tabs-line-height-large;
     }
 
     .ant-tabs-ink-bar {
-      height: @Tabs-ink-link-bar-height-large;
+      height: @tabs-ink-link-bar-height-large;
     }
 
     .ald-tabs-moreIcon {
@@ -71,8 +71,8 @@
 
   &.ald-tabs-default {
     .ant-tabs-tab {
-      font-size: @Tabs-fontSize;
-      line-height: @Tabs-lineHeight;
+      font-size: @tabs-font-size;
+      line-height: @tabs-line-height;
     }
 
     .ald-tabs-moreIcon {

package/lib/index.d.ts

@@ -1,13 +1,13 @@
 /// <reference path="../typings.d.ts" />
 export { default as Button } from './Button';
-export type { IButtonProps as ButtonProps, Size, ButtonType } from './Button';
+export type { IButtonProps as ButtonProps, ButtonType } from './Button';
 export { default as Dropdown } from './Dropdown';
 export type { ActionType, IDropdownProps as DropdownProps, PlacementType } from './Dropdown';
 export { MenuClickEventHandler } from 'rc-menu/lib/interface';
 export { default as Menu } from './Menu';
 export type { IMenuProps as MenuProps } from './Menu';
 export { default as Input } from './Input';
-export type { IInputProps as InputProps, TSize, InputRef, TextAreaRef } from './Input';
+export type { IInputProps as InputProps, InputRef, TextAreaRef } from './Input';
 export { default as Tabs } from './Tabs';
 export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
 export { default as Tooltip } from './Tooltip';
@@ -46,9 +46,9 @@ export type { SpaceProps } from './Space';
 export { default as Space } from './Space';
 export type { SpinProps } from './Spin';
 export { default as Spin } from './Spin';
-export type { SwitchProps } from './Switch';
+export type { ISwitchProps as SwitchProps } from './Switch';
 export { default as Switch } from './Switch';
-export type { StepProps, StepsProps } from './Steps';
+export type { IStepProps as StepProps, IStepsProps as StepsProps } from './Steps';
 export { default as Steps } from './Steps';
 export { default as Form } from './Form';
 export type { FormInstance, FormProps, FormItemProps } from './Form';
@@ -73,3 +73,5 @@ 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';
+export type { PageHeaderProps } from './PageHeader';
+export { default as PageHeader } from './PageHeader';

package/lib/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "Navigator", {
     return _Navigator.default;
   }
 });
+Object.defineProperty(exports, "PageHeader", {
+  enumerable: true,
+  get: function get() {
+    return _PageHeader.default;
+  }
+});
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
   get: function get() {
@@ -308,4 +314,6 @@ var _Avatar = _interopRequireDefault(require("./Avatar"));
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 
+var _PageHeader = _interopRequireDefault(require("./PageHeader"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/index.less

@@ -2,4 +2,4 @@
 @import './mixins/index.less';
 @import './themes/default/scrollBar.less';
 @import './themes/default/index.less';
-@import './mixins/index.less';
+@import './mixins/index.less';

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

@@ -3,34 +3,34 @@
 @ald-prefix: ant;
 
 
-// height rules
-@height-base: 28px;
-@height-lg: 32px;
-@height-sm: 22px;
-
-
+// base 不分大小写情况
 @border-radius-base: 8px;
-@border-radius-sm: 6px;
-@border-color-base: #e7e8e9; // 边框的基础色
-
-// color
-@primary-color: @B40; // 主色调
-@error-color: @SC40; // 错误色
-@success-color: @SA40; // 成功色
-@warning-color: @SB40; // 警告色
-@init-color: rgba(39, 40, 46, 0.5); // 默认颜色
-@adapt-table-border-color: rgba(39, 40, 46, 0.1); // 可拉伸表格的颜色
-@common-text-color: #27282e;
-@tableheader-bg: #f9f9f9; // 表头背景
-@primary-bg: #fff; // 主要背景色
-@btn-shadow: unset; // 取消btn的阴影,
-@text-shadow:unset; // 取消文字阴影
-
-
-@menu-item-font-size: 14px;
-
-
-//Select
-
-@select-placeholder-color: @NL50;
-@select-label-margin-right:4px;
+@line-height-base:20px;
+@font-size-base:14px;
+
+// large
+@font-size-large:16px;
+@line-height-large:24px;
+@padding-top-large:6px;
+@padding-bottom-large:6px;
+@padding-left-large:12px;
+@padding-right-large:12px;
+@border-radius-large:8px;
+
+// middle
+@font-size-middle:14px;
+@line-height-middle:20px;
+@padding-top-middle:6px;
+@padding-bottom-middle:6px;
+@padding-left-middle:12px;
+@padding-right-middle:12px;
+@border-radius-middle:6px;
+
+// small
+@font-size-small:12px;
+@line-height-small:16px;
+@padding-top-small:6px;
+@padding-bottom-small:6px;
+@padding-left-small:8px;
+@padding-right-small:8px;
+@border-radius-small:4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -52,6 +52,7 @@
     ]
   },
   "dependencies": {
+    "@aloudata/icons-react": "^0.0.7",
     "@ant-design/icons": "^4.7.0",
     "antd": "^4.21.5",
     "babel-preset-react-app": "^10.0.1",