@aloudata/aloudata-design 2.6.3 → 2.7.0

package/dist/Badge/index.d.ts

@@ -1,3 +1,18 @@
-import { Badge, BadgeProps } from 'antd';
-export type { BadgeProps };
-export default Badge;
+import React from 'react';
+export interface BadgeProps {
+    /**
+     * 展示的文本内容
+     */
+    count: string | number;
+    /**
+     * 状态
+     */
+    status?: 'success' | 'error' | 'default' | 'info' | 'warning';
+    /**
+     * 大小
+     */
+    size?: 'default' | 'large';
+    className?: string;
+    onClick?: React.MouseEventHandler;
+}
+export default function Badge(props: BadgeProps): React.JSX.Element;

package/dist/Badge/index.js

@@ -1,2 +1,45 @@
-import { Badge } from 'antd';
-export default Badge;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import classNames from 'classnames';
+import React from 'react';
+export default function Badge(props) {
+  var _classNames;
+  var count = props.count,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'default' : _props$status,
+    size = props.size,
+    className = props.className,
+    onClick = props.onClick;
+  var status2ColorMap = {
+    success: {
+      color: '#15803D',
+      backgroundColor: '#BBF7D0'
+    },
+    error: {
+      color: '#B91C1C',
+      backgroundColor: '#FECACA'
+    },
+    default: {
+      color: '#374151',
+      backgroundColor: '#E5E7EB'
+    },
+    info: {
+      color: '#0F59B1',
+      backgroundColor: '#A9CFFB'
+    },
+    warning: {
+      color: '#A16207',
+      backgroundColor: '#FEF08A'
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-badge', (_classNames = {}, _defineProperty(_classNames, 'ald-badge-large', size === 'large'), _defineProperty(_classNames, 'ald-badge-clickable', typeof onClick === 'function'), _classNames), className),
+    style: {
+      color: status2ColorMap[status].color,
+      backgroundColor: status2ColorMap[status].backgroundColor
+    },
+    onClick: onClick
+  }, count);
+}

package/dist/Badge/style/index.less

@@ -1 +1,24 @@
 @import '../../style/index.less';
+
+.ald-badge {
+  display: inline-flex;
+  padding: var(--alias-padding-25, 2px) var(--alias-padding-75, 6px);
+  align-items: center;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 99px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+
+  &.ald-badge-large {
+    font-size: 14px;
+    line-height: 20px;
+    min-width: 24px;
+    height: 24px;
+  }
+
+  &.ald-badge-clickable {
+    cursor: pointer;
+  }
+}

package/dist/Form/style/index.less

@@ -3,6 +3,14 @@
 .ant-form {
   &.ant-form {
     font-size: 14px;
+
+    &.ant-form-vertical {
+      .ant-form-item {
+        .ant-form-item-label label {
+          font-size: 12px;
+        }
+      }
+    }
   }
 
   .ant-form-item {
@@ -33,9 +41,7 @@
           margin-left: var(--alias-spacing-25, 2px);
         }
 
-        &.ant-form-item-required:not(
-            .ant-form-item-required-mark-optional
-          )::before {
+        &.ant-form-item-required::before {
           width: 8px;
           margin-right: var(--alias-spacing-25, 2px);
           color: var(--alias-colors-text-danger, #b91c1c);

package/dist/OverflowCount/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BadgeProps } from '../Badge';
+interface OverflowCountProps<T> {
+    /**
+     * 数据
+     */
+    data: T[];
+    /**
+     * 渲染单条数据的方法
+     */
+    renderItem: (item: T) => React.ReactNode;
+    /**
+     * 徽标样式
+     */
+    badge?: Omit<BadgeProps, 'count'>;
+    /**
+     * 浮窗样式
+     */
+    popupClassName?: string;
+    /**
+     * 后缀元素
+     */
+    suffix?: React.ReactNode;
+    size?: 'small' | 'default';
+}
+declare function OverflowCount<T = unknown>(props: OverflowCountProps<T>): React.JSX.Element;
+export default OverflowCount;
+export declare function prefixCls(className: string): string;

package/dist/OverflowCount/index.js

@@ -0,0 +1,77 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
+import Overflow from 'rc-overflow';
+import React, { useCallback, useState } from 'react';
+import Badge from "../Badge";
+import Popover from "../Popover";
+function OverflowCount(props) {
+  var data = props.data,
+    propsRenderItem = props.renderItem,
+    _props$popupClassName = props.popupClassName,
+    popupClassName = _props$popupClassName === void 0 ? '' : _props$popupClassName,
+    badge = props.badge,
+    size = props.size,
+    suffix = props.suffix;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPopupOpen = _useState2[0],
+    setIsPopupOpen = _useState2[1];
+  var itemClassName = classNames(prefixCls('item'), _defineProperty({}, prefixCls('item-small'), size === 'small'));
+  var renderItem = useCallback(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: itemClassName
+    }, propsRenderItem(item));
+  }, [propsRenderItem, itemClassName]);
+  var renderRest = useCallback(function (omittedItems) {
+    var itemNodes = omittedItems.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: itemClassName
+      }, propsRenderItem(item));
+    });
+    if (omittedItems.length === 0) {
+      // 因为没有其他 api 监听超过的量的变化，只能在 render 阶段处理
+      setIsPopupOpen(false);
+    }
+    return /*#__PURE__*/React.createElement(Popover, {
+      content: /*#__PURE__*/React.createElement("div", {
+        className: classNames(prefixCls('popup-container'), _defineProperty({}, prefixCls('popup-container-small'), size === 'small'), popupClassName)
+      }, itemNodes),
+      trigger: 'hover',
+      open: isPopupOpen,
+      onOpenChange: function onOpenChange(open) {
+        return setIsPopupOpen(open);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: prefixCls('rest-btn')
+    }, /*#__PURE__*/React.createElement(Badge, _extends({
+      count: "+".concat(omittedItems.length),
+      status: "info"
+    }, badge))));
+  }, [badge, popupClassName, propsRenderItem, itemClassName, size, isPopupOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls('container'))
+  }, /*#__PURE__*/React.createElement(Overflow, {
+    data: data,
+    renderItem: renderItem,
+    renderRest: renderRest,
+    maxCount: "responsive",
+    className: prefixCls('overflow'),
+    suffix: suffix
+  }));
+}
+export default OverflowCount;
+var ALD_PREFIX = 'ald-overflow-count';
+export function prefixCls(className) {
+  return "".concat(ALD_PREFIX, "-").concat(className);
+}

package/dist/OverflowCount/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/dist/OverflowCount/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.less";

package/dist/OverflowCount/style/index.less

@@ -0,0 +1,51 @@
+@import '../../style/index.less';
+@import '../../Badge/style/index.less';
+@import '../../Popover/style/index.less';
+
+.ald-overflow-count-container {
+  width: 100%;
+
+  .ald-overflow-count-overflow {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    max-width: 100%;
+    align-items: center;
+  }
+
+  .ald-overflow-count-rest-btn {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .rc-overflow-item,
+  .rc-overflow-item-rest,
+  .rc-overflow-item-suffix {
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+}
+
+.ald-overflow-count-item {
+  padding-right: 6px;
+
+  &.ald-overflow-count-small {
+    padding-right: 4px;
+  }
+}
+
+.ald-overflow-count-popup-container {
+  width: 360px;
+  max-height: 300px;
+  overflow: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 6px;
+
+  &.ald-overflow-count-popup-container-small {
+    row-gap: 4px;
+  }
+}

package/dist/Switch/style/index.less

@@ -68,6 +68,10 @@
     cursor: initial;
     pointer-events: none;
 
+    .ald-switch-btn {
+      opacity: 0.4;
+    }
+
     .ald-switch-text {
       opacity: 0.5;
       color: #171717;

package/dist/Table/style/index.less

@@ -6,27 +6,25 @@
 
 @header-height: 40px;
 
-@ald: ~'ald-table-';
-
-.@{ald}container {
+.ald-table-container {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.@{ald}main {
+.ald-table-main {
   width: 100%;
   font-size: 13px;
   line-height: 20px;
   background: #fff;
   color: var(--alias-colors-text-subtle, #4b5563);
 
-  .@{ald}content {
+  .ald-table-content {
     display: flex;
     flex-direction: column;
     border-spacing: 0;
 
-    .@{ald}spin {
+    .ald-table-spin {
       position: absolute;
       top: 0;
       left: 0;
@@ -40,7 +38,7 @@
       }
     }
 
-    .@{ald}spin-mask {
+    .ald-table-spin-mask {
       position: absolute;
       top: 0;
       left: 0;
@@ -52,7 +50,7 @@
     }
   }
 
-  .@{ald}resizer {
+  .ald-table-resizer {
     position: absolute;
     right: 0;
     top: 0;
@@ -76,36 +74,36 @@
     }
   }
 
-  .@{ald}overflow-x {
+  .ald-table-overflow-x {
     overflow-x: hidden;
   }
 
-  .@{ald}tr {
+  .ald-table-tr {
     display: flex;
   }
 
-  .@{ald}th,
-  .@{ald}td {
+  .ald-table-th,
+  .ald-table-td {
     position: relative;
     border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
     flex: 0 0 auto;
 
-    &.@{ald}fixed-left,
-    &.@{ald}fixed-right {
+    &.ald-table-fixed-left,
+    &.ald-table-fixed-right {
       position: sticky;
       z-index: 2;
     }
   }
 
-  .@{ald}no-border-tr {
-    .@{ald}td {
+  .ald-table-no-border-tr {
+    .ald-table-td {
       border-bottom: none;
     }
   }
 
-  .@{ald}td {
-    &.@{ald}fixed-left,
-    &.@{ald}fixed-right {
+  .ald-table-td {
+    &.ald-table-fixed-left,
+    &.ald-table-fixed-right {
       background-color: #fff;
     }
   }
@@ -140,23 +138,23 @@
     }
   }
 
-  &.@{ald}ping-left {
-    .@{ald}fixed-left {
+  &.ald-table-ping-left {
+    .ald-table-fixed-left {
       .fixed-left-shadow();
     }
   }
 
-  &.@{ald}ping-right {
-    .@{ald}fixed-right {
+  &.ald-table-ping-right {
+    .ald-table-fixed-right {
       .fixed-right-shadow();
     }
   }
 
-  .@{ald}th {
+  .ald-table-th {
     background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
   }
 
-  .@{ald}th-default {
+  .ald-table-th-default {
     font-weight: 500;
     line-height: 16px;
     padding: @td-padding-size;
@@ -168,7 +166,7 @@
     color: var(--alias-colors-text-subtle, #4b5563);
   }
 
-  .@{ald}td-default {
+  .ald-table-td-default {
     line-height: 20px;
     padding-left: @td-padding-size;
     display: flex;
@@ -179,27 +177,27 @@
     overflow: hidden;
   }
 
-  .@{ald}td-ellipsis-content {
+  .ald-table-td-ellipsis-content {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .@{ald}sticky {
+  .ald-table-sticky {
     position: sticky;
     top: 0;
     // 需要大于 Spin 的 z-index，Spin 的 z-index 为4
     z-index: 5;
   }
 
-  .@{ald}body {
+  .ald-table-body {
     min-height: 96px;
 
-    .@{ald}tr {
-      &.@{ald}row-hover:hover {
+    .ald-table-tr {
+      &.ald-table-row-hover:hover {
         cursor: pointer;
 
-        .@{ald}td {
+        .ald-table-td {
           background-color: var(
             --alias-colors-bg-interaction-hover,
             rgba(0, 0, 0, 0.05)
@@ -212,21 +210,21 @@
   @td-padding-size: 16px;
 
   /** Tree Table **/
-  .@{ald}expandable-td {
+  .ald-table-expandable-td {
     display: flex;
     width: 100%;
     align-items: center;
     padding-left: @td-padding-size;
 
-    .@{ald}indent-list {
+    .ald-table-indent-list {
       display: flex;
     }
 
-    .@{ald}indent-item {
+    .ald-table-indent-item {
       width: 10px;
     }
 
-    .@{ald}expand-btn {
+    .ald-table-expand-btn {
       width: 16px;
       cursor: pointer;
       margin-right: 6px;
@@ -235,13 +233,13 @@
       align-items: center;
     }
 
-    .@{ald}td-default {
+    .ald-table-td-default {
       padding-left: 0;
     }
   }
 }
 
-.@{ald}align {
+.ald-table-align {
   &-left {
     text-align: left;
     justify-content: left;
@@ -258,34 +256,34 @@
   }
 }
 
-.@{ald}pagination {
+.ald-table-pagination {
   padding-top: 16px;
   display: flex;
   justify-content: end;
   border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
 }
 
-.@{ald}loading {
+.ald-table-loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 
-  .@{ald}loading-inner {
+  .ald-table-loading-inner {
     width: 100%;
   }
 }
 
-.@{ald}overflow-hidden {
+.ald-table-overflow-hidden {
   overflow: hidden;
   height: 100%;
 }
 
-.@{ald}header {
+.ald-table-header {
   background-color: #fff;
 }
 
-.@{ald}header-scroll-placeholder {
+.ald-table-header-scroll-placeholder {
   height: @header-height;
   position: sticky;
   right: 0;
@@ -294,24 +292,24 @@
   flex: 0 0 auto;
 }
 
-.@{ald}body-scroll {
+.ald-table-body-scroll {
   overflow: auto;
   height: 100%;
 
-  &.@{ald}scroll-y {
+  &.ald-table-scroll-y {
     overflow-y: scroll;
   }
 
-  &.@{ald}scroll-hidden {
+  &.ald-table-scroll-hidden {
     overflow: hidden;
   }
 }
 
-.@{ald}empty {
+.ald-table-empty {
   margin-top: 80px;
   overflow: hidden;
 
-  &.@{ald}empty-small {
+  &.ald-table-empty-small {
     margin-top: 20px;
   }
 }

package/dist/Tag/index.d.ts

@@ -1,3 +1,37 @@
-import { Tag, TagProps, TagType } from 'antd';
-export type { TagProps, TagType };
-export default Tag;
+import React, { MouseEventHandler } from 'react';
+export interface TagProps {
+    children: React.ReactNode;
+    onClick?: MouseEventHandler;
+    /**
+     * 是否可关闭
+     */
+    closable?: boolean;
+    /**
+     * 关闭回调
+     */
+    onClose?: MouseEventHandler;
+    status?: 'default' | 'info' | 'success' | 'warning' | 'error';
+    /**
+     * 自定义颜色
+     */
+    color?: string;
+    /**
+     * icon 图标
+     */
+    icon?: React.ReactNode;
+    /**
+     * 大小
+     */
+    size?: 'large' | 'default' | 'small';
+    /**
+     * 风格，填充、默认、线框
+     */
+    mode?: 'fill' | 'default' | 'border';
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    className?: string;
+}
+export default function Tag(props: TagProps): React.JSX.Element;
+export declare function prefixCls(className: string): string;