@aloudata/aloudata-design 1.10.14 → 2.0.0-beta.2

package/dist/Modal/style/index.less

@@ -1,195 +1,7 @@
-@import '../../IconButton/style/index.less';
 @import '../../style/index.less';
+@import '../../IconButton/style/index.less';
 @import '../../ScrollArea/style/index.less';
 @import '../../Button/style/index.less';
 @import './polyfill/index.less';
-
-.ald-modal.ald-modal {
-  animation-duration: 10ms !important;
-  // 移除缩放效果
-  &.ant-zoom-enter,
-  &.ant-zoom-leave {
-    animation-duration: 10ms !important;
-  }
-
-  .ant-modal-content {
-    padding: 0;
-    box-shadow: none;
-    border-radius: 4px;
-    border: 1px solid @BG60;
-    overflow: hidden;
-
-    .ant-modal-body {
-      min-height: 130px;
-      max-height: 68vh;
-      line-height: 20px;
-      font-size: 13px;
-      overflow-y: auto;
-      padding: 16px 20px;
-    }
-  }
-
-  .ald-modal-close {
-    position: relative;
-    // top: 5px;
-    // left: -4px;
-  }
-
-  .ald-modal-title-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .ald-modal-text-container {
-      // margin-left: 12px;
-      flex: 1;
-    }
-
-    .title {
-      color: @NL0;
-      font-weight: 600;
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    .subTitle {
-      margin-top: 4px;
-      color: @NL40;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 16px;
-    }
-  }
-
-  .ant-modal-header {
-    padding: 16px 20px;
-    margin-bottom: 0;
-
-    .ant-modal-title {
-      width: 95%;
-      color: @NL0;
-      font-weight: 600;
-      font-size: 16px;
-      font-family: 'PingFang SC', sans-serif;
-      font-style: normal;
-      line-height: 24px;
-    }
-  }
-
-  &.ald-modal-virtual-scroll-bar {
-    .ant-modal-body {
-      overflow: hidden;
-      padding: 0;
-    }
-
-    .ald-modal-body-wrap {
-      .ald-modal-body-wrap-inner {
-        max-height: 68vh;
-        padding: 0 23px;
-      }
-    }
-  }
-
-  &.ald-modal-padding-less {
-    .ant-modal-body {
-      padding: 0;
-    }
-  }
-
-  .ant-modal-footer {
-    position: relative;
-    margin-top: 0;
-    padding: 12px 20px;
-    background: #f4f4f4;
-
-    .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
-      margin-bottom: 0;
-      margin-left: 12px;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: var(--colors-gray-300, #e8e8e8);
-    }
-  }
-
-  .ant-modal-close-x {
-    width: 24px;
-    background-color: #fff;
-  }
-}
-
-.ald-modal-header-bottom-border {
-  .ant-modal-header {
-    border-bottom: 1px solid #dbdbdb;
-  }
-}
-
-.ald-modal-padding-less {
-  .ant-modal-content {
-    .ant-modal-body {
-      .ald-modal-body-wrap {
-        .ald-modal-body-wrap-inner {
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-
-.ald-modal.ant-modal-confirm {
-  .ant-modal-body {
-    padding-bottom: 12px !important;
-  }
-
-  .ant-modal-confirm-body > .i-icon {
-    & + .ant-modal-confirm-title {
-      flex: 1;
-      overflow: initial;
-      margin-inline-start: 12px;
-
-      & + .ant-modal-confirm-content {
-        margin-block-start: 16px;
-        margin-left: 28px;
-      }
-    }
-  }
-
-  .ant-modal-confirm-body {
-    display: block;
-
-    > span.anticon {
-      display: none;
-
-      + .ant-modal-confirm-title + .ant-modal-confirm-content {
-        margin-left: 40px;
-        margin-top: 4px;
-      }
-    }
-  }
-
-  .ant-modal-confirm-btns {
-    margin-block-start: 16px;
-  }
-}
-
-// .ald-modal.ald-modal-warning {
-//   .ant-modal-confirm-btns {
-//     .ald-btn {
-//       background-color: @SB40;
-//       border-color: @SB40;
-
-//       &:hover,
-//       &:active,
-//       &:focus {
-//         background-color: @SB40;
-//         border-color: @SB40;
-//       }
-//     }
-//   }
-// }
+@import './modal.less';
+@import './modalConfirm.less';

package/dist/Modal/style/modal.less

@@ -0,0 +1,132 @@
+.ald-modal.ald-modal {
+  animation-duration: 10ms !important;
+  // 移除缩放效果
+  &.ant-zoom-enter,
+  &.ant-zoom-leave {
+    animation-duration: 10ms !important;
+  }
+
+  .ant-modal-content {
+    padding: 0;
+    border-radius: var(--alias-radius-75, 6px);
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.04),
+      0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+
+    .ant-modal-close {
+      width: 24px;
+      height: 24px;
+      top: var(--alias-spacing-200, 16px);
+      right: var(--alias-spacing-250, 20px);
+
+      .ant-modal-close-x {
+        background-color: #fff;
+      }
+    }
+
+    .ant-modal-header {
+      padding: var(--alias-spacing-200, 16px) var(--alias-spacing-250, 20px);
+      margin-bottom: 0;
+      border-bottom: 1px solid var(--alias-colors-border-default, #e5e7eb);
+      background: var(--alias-colors-bg-skeleton-subtler, #fff);
+
+      .ant-modal-title {
+        width: 95%;
+        color: var(--alias-colors-text-strong, #111827);
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 24px;
+
+        .ald-modal-title-container {
+          display: flex;
+          align-items: center;
+          gap: var(--alias-spacing-100, 8px);
+
+          .ald-modal-text-container {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            gap: 4px;
+
+            .ald-modal-text-title {
+              color: var(--alias-colors-text-strong, #111827);
+              font-weight: 600;
+              font-size: 18px;
+              line-height: 28px;
+            }
+
+            .ald-modal-text-sub-title {
+              color: var(--alias-colors-text-subtle, #4b5563);
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 16px;
+            }
+          }
+        }
+      }
+    }
+
+    .ant-modal-body {
+      min-height: 130px;
+      max-height: 68vh;
+      line-height: 20px;
+      font-size: 14px;
+      overflow-y: auto;
+      padding: var(--alias-spacing-200, 16px) var(--alias-spacing-250, 20px);
+    }
+
+    .ant-modal-footer {
+      position: relative;
+      margin-top: 0;
+      padding: var(--alias-spacing-150, 12px) var(--alias-padding-300, 24px);
+      border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
+      background: var(--alias-colors-bg-skeleton-subtler, #fff);
+
+      .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+        margin-bottom: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &.ald-modal-virtual-scroll-bar {
+    .ant-modal-body {
+      overflow: hidden;
+      padding: 0;
+    }
+
+    .ald-modal-body-wrap {
+      .ald-modal-body-wrap-inner {
+        max-height: 68vh;
+        padding: 0 23px;
+      }
+    }
+  }
+
+  &.ald-modal-padding-less {
+    .ant-modal-body {
+      padding: 0;
+    }
+  }
+
+  &.ald-modal-hide-header-bottom-border {
+    .ant-modal-content {
+      .ant-modal-header {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.ald-modal-padding-less {
+  .ant-modal-content {
+    .ant-modal-body {
+      .ald-modal-body-wrap {
+        .ald-modal-body-wrap-inner {
+          padding: 0;
+        }
+      }
+    }
+  }
+}

package/dist/Modal/style/modalConfirm.less

@@ -0,0 +1,100 @@
+//
+.ald-modal.ant-modal-confirm {
+  .ant-modal-content {
+    .ant-modal-body {
+      padding-bottom: 12px !important;
+
+      .ant-modal-confirm-body-wrapper {
+        .ant-modal-confirm-body {
+          display: block;
+
+          .anticon {
+            display: none;
+          }
+
+          .ant-modal-confirm-title {
+            .ald-modal-title-container {
+              display: flex;
+              align-items: center;
+              gap: var(--alias-spacing-200, 16px);
+
+              .ald-modal-icon-container {
+                display: grid;
+                place-items: center;
+                width: 40px;
+                height: 40px;
+                border-radius: var(--global-grid-250, 20px);
+
+                &.ald-modal-cion-info-container {
+                  background: var(
+                    --alias-colors-bg-accent-blue-subtle-default,
+                    #d4e7fd
+                  );
+                }
+
+                &.ald-modal-cion-warning-container {
+                  background: var(
+                    --alias-colors-bg-accent-yellow-subtle-default,
+                    #fef9c3
+                  );
+                }
+
+                &.ald-modal-cion-success-container {
+                  background: var(
+                    --alias-colors-bg-accent-green-subtle-default,
+                    #dcfce7
+                  );
+                }
+
+                &.ald-modal-cion-confirm-container {
+                  background: var(
+                    --alias-colors-bg-accent-blue-subtle-default,
+                    #d4e7fd
+                  );
+                }
+
+                &.ald-modal-cion-error-container {
+                  background: var(
+                    --alias-colors-bg-accent-red-subtle-default,
+                    #fee2e2
+                  );
+                }
+              }
+
+              .ald-modal-text-container {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: var(--alias-spacing-100, 8px);
+                flex: 1 0 0;
+
+                .ald-modal-text-title {
+                  color: var(--alias-colors-text-strong, #111827);
+                  font-size: 18px;
+                  font-weight: 600;
+                  line-height: 28px;
+                }
+
+                .ald-modal-text-sub-title {
+                  color: var(--alias-colors-text-subtle, #4b5563);
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 20px;
+                }
+              }
+            }
+          }
+
+          .ant-modal-confirm-content {
+            margin-top: var(--alias-spacing-100, 8px);
+            margin-left: 56px;
+          }
+        }
+
+        .ant-modal-confirm-btns {
+          margin-block-start: 16px;
+        }
+      }
+    }
+  }
+}

package/dist/Pagination/index.js

@@ -12,7 +12,7 @@ import classnames from 'classnames';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import Button from "../Button";
-import { ChevronLeftLine, ChevronRightLine } from "../Icon";
+import { ChevronLeftLine, ChevronRightLine, Ellipsis } from "../Icon";
 function Pagination(props) {
   var _props$current = props.current,
     currPage = _props$current === void 0 ? 1 : _props$current,
@@ -54,7 +54,9 @@ function Pagination(props) {
       return /*#__PURE__*/React.createElement("span", {
         key: index,
         className: prefixCls('ellipsis')
-      }, "...");
+      }, /*#__PURE__*/React.createElement(Ellipsis, {
+        size: 20
+      }));
     }
     return /*#__PURE__*/React.createElement(Button, {
       key: index,

package/dist/Pagination/style/index.less

@@ -11,16 +11,23 @@
   &,
   &:focus,
   &:hover {
-    border: 1px solid #3271c9;
-    color: #3271c9;
+    border: 1px solid
+      var(--alias-colors-border-accent-blue-subtle-default, #7fb6f8);
+    color: var(--alias-colors-border-accent-blue-subtle-default, #7fb6f8);
+    background-color: var(--alias-colors-bg-selected-default, #e8f2fe);
   }
 }
 
 .ald-pagination-ellipsis {
   border: none;
-  color: #858585;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .ald-btn.ald-btn.ald-btn-secondary.ald-pagination-button {
-  font-weight: 400;
+  font-size: 12px;
+  font-weight: 500;
 }

package/dist/Popconfirm/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["okButtonProps", "cancelButtonProps", "okType", "icon"];
+var _excluded = ["okButtonProps", "cancelButtonProps", "okType", "rootClassName", "icon"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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; }
@@ -6,19 +6,19 @@ import { Popconfirm } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { btnPrefix, getButtonSizeClass, getButtonType, getDangerStatus, getShape } from "../Button";
-import { AlertTriangleDuotone } from "../Icon";
-import themeColor from "../style/themes/default/themeColor.module.less";
+import { AlertTriangleLine } from "../Icon";
 function MyPopconfirm(props) {
   var _props$okButtonProps = props.okButtonProps,
     okButtonProps = _props$okButtonProps === void 0 ? {} : _props$okButtonProps,
     _props$cancelButtonPr = props.cancelButtonProps,
     cancelButtonProps = _props$cancelButtonPr === void 0 ? {} : _props$cancelButtonPr,
     okType = props.okType,
+    rootClassName = props.rootClassName,
     _props$icon = props.icon,
-    icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
-      size: 16,
-      color: themeColor.SB40,
-      fill: themeColor.BG100
+    icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(AlertTriangleLine, {
+      size: 20,
+      color: "#D64343",
+      fill: "#fff"
     }) : _props$icon,
     restProps = _objectWithoutProperties(props, _excluded);
   function getButtonProps(buttonProps, defaultBtnType) {
@@ -42,6 +42,7 @@ function MyPopconfirm(props) {
   }
   return /*#__PURE__*/React.createElement(Popconfirm, _extends({}, restProps, {
     icon: icon,
+    rootClassName: classNames('ald-pop-confirm', rootClassName),
     okButtonProps: getButtonProps(okButtonProps, 'dangerous'),
     cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary'),
     description: null

package/dist/Popconfirm/style/index.less

@@ -1,19 +1,21 @@
 @import '../../style/index.less';
 @import '../../Button/style/index.less';
 
-.ant-popover.ant-popover .ant-popover-inner {
-  padding: 16px;
-  border-radius: 4px;
+.ald-pop-confirm.ant-popover.ant-popover .ant-popover-inner {
+  padding: 12px;
+  border-radius: 2px;
+  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0 4px 6px -2px rgba(16, 24, 40, 0.03);
 
   .ant-popover-inner-content {
     .ant-popconfirm-message {
-      padding-bottom: 16px;
+      padding-bottom: 12px;
       margin-bottom: 0;
       align-items: center;
     }
 
     .ant-popconfirm-buttons {
-      padding-top: 16px;
+      padding-top: 12px;
     }
   }
 }
@@ -29,7 +31,15 @@
     font-weight: 400;
     font-size: 13px;
     line-height: 20px;
-    color: @NL40;
+    color: var(--colors-gray-900, #171717);
     margin-inline-start: 4px;
+    margin-left: 4px !important;
+  }
+}
+
+.ald-pop-confirm.ant-popover.ant-popover .ant-popover-arrow {
+  &::after {
+    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08),
+      0 4px 6px -2px rgba(16, 24, 40, 0.03);
   }
 }

package/dist/Popover/style/index.less

@@ -1,33 +1,33 @@
 @import '../../style/index.less';
 
-.ald-popover.ald-popover {
-  .ant-popover-title {
-    min-width: 312px;
-    height: 24px;
-    min-height: 24px;
-    padding: 0;
-    color: @NL0;
-    font-weight: 600;
-    font-size: 16px;
-    font-family: 'PingFang SC', sans-serif;
-    font-style: normal;
-    line-height: 24px;
-    border-bottom-width: 0;
-  }
+// .ald-popover.ald-popover {
+//   .ant-popover-title {
+//     min-width: 312px;
+//     height: 24px;
+//     min-height: 24px;
+//     padding: 0;
+//     color: @NL0;
+//     font-weight: 600;
+//     font-size: 16px;
+//     font-family: 'PingFang SC', sans-serif;
+//     font-style: normal;
+//     line-height: 24px;
+//     border-bottom-width: 0;
+//   }
 
-  .ant-popover-inner-content {
-    min-height: 112px;
-    padding: 24px 0 0;
-    color: @NL0;
-    font-weight: 400;
-    font-size: 14px;
-    font-family: 'PingFang SC', sans-serif;
-    font-style: normal;
-    line-height: 20px;
-  }
+//   .ant-popover-inner-content {
+//     min-height: 112px;
+//     padding: 24px 0 0;
+//     color: @NL0;
+//     font-weight: 400;
+//     font-size: 14px;
+//     font-family: 'PingFang SC', sans-serif;
+//     font-style: normal;
+//     line-height: 20px;
+//   }
 
-  .ant-popover-inner {
-    padding: 16px 24px;
-    border-radius: 8px;
-  }
-}
+//   .ant-popover-inner {
+//     padding: 16px 24px;
+//     border-radius: 8px;
+//   }
+// }

package/dist/Radio/components/Group/index.js

@@ -16,7 +16,7 @@ export var RadioGroupContext = /*#__PURE__*/createContext({});
 export default function RadioGroup(props) {
   var children = props.children,
     _props$radioGroupStyl = props.radioGroupStyle,
-    radioGroupStyle = _props$radioGroupStyl === void 0 ? 'border' : _props$radioGroupStyl,
+    radioGroupStyle = _props$radioGroupStyl === void 0 ? 'filled' : _props$radioGroupStyl,
     _props$size = props.size,
     size = _props$size === void 0 ? 'middle' : _props$size,
     _props$type = props.type,
@@ -64,10 +64,8 @@ export default function RadioGroup(props) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: getWrapperClass()
-  }, children, (radioGroupStyle === 'filled' || radioGroupStyle === 'filter') && type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
-    className: classNames('ald-radio-filled-slider ', {
-      'ald-radio-filled-slider-filter': radioGroupStyle === 'filter'
-    }),
+  }, children, type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-radio-filled-slider'),
     ref: sliderRef
   }) : null));
 }

package/dist/Radio/components/Radio/index.js

@@ -9,6 +9,7 @@ import _ from 'lodash';
 import React, { useContext, useEffect, useRef } from 'react';
 import { getUUID } from "../../../_utils/hooks/useId";
 import { RadioGroupContext } from "../Group";
+var FILL_BUTTON_MARGIN = 4;
 export default function Radio(props) {
   var groupContext = useContext(RadioGroupContext);
   var labelRef = useRef(null);
@@ -63,7 +64,7 @@ export default function Radio(props) {
     var _groupContext$sliderR;
     if (radioProps.checked && groupContext !== null && groupContext !== void 0 && (_groupContext$sliderR = groupContext.sliderRef) !== null && _groupContext$sliderR !== void 0 && _groupContext$sliderR.current && labelRef !== null && labelRef !== void 0 && labelRef.current) {
       groupContext.sliderRef.current.style.left = "".concat(labelRef.current.offsetLeft, "px");
-      groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth, "px");
+      groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth - FILL_BUTTON_MARGIN, "px");
     }
   }, [groupContext.sliderRef, radioProps.checked]);
   var onChange = function onChange() {

package/dist/Radio/interface/radioGroup.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type TRadioGroupStyle = 'border' | 'filled' | 'borderPrimary' | 'filter';
+export type TRadioGroupStyle = 'filled';
 export type TRadioSize = 'large' | 'middle' | 'small' | 'default';
 export type TRadioType = 'radio' | 'button' | 'iconButton';
 export interface IRadioGroupProps {