@aloudata/aloudata-design 0.3.3 → 0.3.4

package/es/Radio/style/index.less

@@ -1 +1,349 @@
 @import '../../style/index.less';
+
+@radio-icon-button-padding-large: 10px;
+@radio-icon-button-padding-middle: 9px;
+@radio-icon-button-padding-small: 8px;
+@radio-group-height-large: 36px;
+@radio-group-height-middle: 32px;
+@radio-group-height-small: 28px;
+@radio-button-padding: 12px;
+
+// Radio组件基础样式
+.ald-radio-wrapper {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: start;
+  height: 20px;
+  padding: 0;
+  cursor: pointer;
+}
+
+.ald-radio {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.ald-radio-input {
+  position: absolute;
+  z-index: 1;
+  width: 1px;
+  height: 1px;
+  cursor: pointer;
+  opacity: 0;
+  inset: 0;
+}
+
+.ald-radio-inner {
+  position: relative;
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  border: 1px solid @NL90;
+  border-radius: 50%;
+}
+
+.ald-radio-desc {
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: @NL0;
+  font-weight: 400;
+}
+// 绘制选中时的圆圈样式
+.ald-radio-checked > .ald-radio-inner {
+  background-color: @B60;
+  border: 0;
+  transform: background 0.5s ease;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 6px;
+    height: 6px;
+    background-color: @ND0;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+  }
+}
+// 禁用状态下的样式
+.ald-radio-disabled > .ald-radio-inner {
+  background-color: @NL90;
+  border: 0;
+}
+
+.ald-radio-disabled.ald-radio-checked > .ald-radio-inner::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  background: @NL90;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  content: '';
+}
+// 禁用的样式
+.ald-radio-label.ald-radio-wrapper-disabled {
+  cursor: default;
+
+  .ald-radio-desc {
+    color: @NL60;
+  }
+}
+// RadioGroup基础样式
+.ald-radio-group {
+  position: relative;
+
+  .ald-radio-label .ald-radio-desc {
+    color: @NL30;
+    font-weight: 500;
+    font-size: @font-size-middle;
+    font-style: normal;
+  }
+
+  &.ald-radio-group-radio {
+    .ald-radio-desc {
+      color: @NL0;
+      font-weight: 400;
+    }
+  }
+
+  .ald-radio-wrapper:not(:first-child) {
+    margin-left: 16px;
+  }
+}
+
+// filled填充样式下的滑块样式
+.ald-radio-filled-slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 0;
+  height: 100%;
+  background: @BG100;
+  border: 1px solid @NL90;
+  border-radius: @border-radius-middle;
+  transition: width, left, height 0.3s, 0.3s, 0.3s ease;
+}
+
+// button状态下的样式
+.ald-radio-group-button,
+.ald-radio-group-icon-button {
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: min-content;
+  width: auto;
+  padding: 0;
+  overflow: hidden;
+
+  .ald-radio-label {
+    color: @NL30;
+    font-size: @font-size-middle;
+  }
+  // 按钮样式禁用的文字颜色
+  .ald-radio-wrapper-disabled {
+    .ald-radio-desc {
+      color: @NL80;
+    }
+  }
+  // border的样式
+  .ald-radio-button-wrapper-border {
+    padding: 0 @radio-button-padding - 1;
+  }
+
+  .ald-radio-button-wrapper-border,
+  .ald-radio-icon-button-wrapper-border {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background: @BG100;
+    border: 1px solid @NL90;
+    border-right: 1px solid transparent;
+    cursor: pointer;
+
+    &:first-child {
+      border-radius: 6px 0 0 6px;
+    }
+
+    &:last-child {
+      border-right: 1px solid @NL90;
+      border-radius: 0 6px 6px 0;
+    }
+
+    .ald-radio {
+      width: 0;
+
+      .ald-radio-input,
+      .ald-radio-inner {
+        width: 0;
+        border: 0;
+      }
+    }
+
+    .ald-radio-checked > .ald-radio-inner::after {
+      width: 0;
+    }
+  }
+
+  // button选中状态下的样式
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border {
+    background: @B98;
+    transition: background 0.5s ease;
+
+    .ald-radio-desc {
+      position: relative;
+      color: @NL0;
+      transition: text-shadow 0.5s ease;
+    }
+  }
+
+  // filled样式的button
+  .ald-radio-button-wrapper-filled {
+    padding: 0 @radio-button-padding;
+  }
+
+  .ald-radio-button-wrapper-filled,
+  .ald-radio-icon-button-wrapper-filled {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-color: @BG90;
+    cursor: pointer;
+
+    &:first-of-type {
+      border-radius: @border-radius-middle 0 0 @border-radius-middle;
+    }
+
+    &:last-of-type {
+      border-radius: 0 @border-radius-middle @border-radius-middle 0;
+    }
+
+    .ald-radio {
+      width: 0;
+
+      .ald-radio-input,
+      .ald-radio-inner {
+        width: 0;
+        border: 0;
+      }
+    }
+
+    .ald-radio-checked > .ald-radio-inner::after {
+      width: 0;
+    }
+  }
+
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-filled,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-filled {
+    position: relative;
+
+    .ald-radio-desc {
+      position: relative;
+      z-index: 2;
+      color: @NL0;
+    }
+  }
+  // 各种大小
+  &.ald-radio-group-middle {
+    height: @radio-group-height-middle;
+
+    .ald-radio-icon-button-wrapper-filled {
+      padding: 0 @radio-icon-button-padding-middle;
+    }
+
+    .ald-radio-icon-button-wrapper-border {
+      padding: 0 @radio-icon-button-padding-middle - 1;
+    }
+
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-middle;
+      }
+    }
+  }
+
+  &.ald-radio-group-small {
+    height: @radio-group-height-small;
+
+    .ald-radio-icon-button-wrapper-filled {
+      padding: 0 @radio-icon-button-padding-small;
+    }
+
+    .ald-radio-icon-button-wrapper-border {
+      padding: 0 @radio-icon-button-padding-small - 1;
+    }
+
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-small;
+      }
+    }
+
+    .ald-radio-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-filled,
+    .ald-radio-icon-button-wrapper-filled {
+      &:first-of-type {
+        border-radius: @border-radius-small 0 0 @border-radius-small;
+      }
+
+      &:last-of-type {
+        border-radius: 0 @border-radius-small 0 @border-radius-small 0;
+      }
+    }
+
+    .ald-radio-filled-slider {
+      border-radius: @border-radius-small;
+    }
+  }
+
+  &.ald-radio-group.ald-radio-group-large {
+    height: @radio-group-height-large;
+
+    .ald-radio-icon-button-wrapper-filled {
+      padding: 0 @radio-icon-button-padding-large;
+    }
+
+    .ald-radio-icon-button-wrapper-border {
+      padding: 0 @radio-icon-button-padding-large - 1;
+    }
+
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-large;
+      }
+    }
+
+    .ald-radio-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-filled,
+    .ald-radio-icon-button-wrapper-filled {
+      &:first-of-type {
+        border-radius: @border-radius-large 0 0 @border-radius-large;
+      }
+
+      &:last-of-type {
+        border-radius: 0 @border-radius-large @border-radius-large 0;
+      }
+    }
+
+    .ald-radio-filled-slider {
+      border-radius: @border-radius-large;
+    }
+  }
+}

package/es/Select/index.js

@@ -23,7 +23,7 @@ import DisabledContext from 'antd/lib/config-provider/DisabledContext';
 import { FormItemInputContext } from 'antd/lib/form/context';
 import { getTransitionDirection, getTransitionName } from 'antd/lib/_util/motion';
 import { getMergedStatus, getStatusClassNames } from 'antd/lib/_util/statusUtils';
-import defaultRenderEmpty from 'antd/lib/config-provider/defaultRenderEmpty';
+import defaultRenderEmpty from '../ConfigProvider/defaultRenderEmpty';
 import getIcons from './utils/iconUtil';
 var SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 

package/es/Select/style/index.less

@@ -1,6 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 @import './select.less';
 @import './variables.less';
+@import '../../Empty/style/index.less';
 
 .ald-select {
   .ant-select-selector:not(.ant-select-customize-input) {

package/es/Steps/components/ProcessIcon/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface IProcessIconProps {
     type: 'process' | 'wait';
 }

package/es/Table/Table.d.ts

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