@dtjoy/dt-design 1.0.5 → 1.0.7

package/esm/button/style/index.less

@@ -3,132 +3,57 @@
 
 @btn-prefix-cls: ~'@{ant-prefix}-btn';
 
-.@{btn-prefix-cls} {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    // 引用中尺寸配置（核心：先调用混入，再取值）
-    .btn-size-middle();
-    padding: @padding;
-
-    // 图标样式
-    &__icon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        font-size: inherit;
-        line-height: 0;
-
-        .dtstack-icon {
-            font-size: inherit;
-        }
-
-        // 小尺寸图标
-        &--small {
-            .btn-size-small();
-            font-size: @icon-font-size;
-        }
-        // 中尺寸图标
-        &--middle {
-            .btn-size-middle();
-            font-size: @icon-font-size;
-        }
-        // 大尺寸图标
-        &--large {
-            .btn-size-large();
-            font-size: @icon-font-size;
-        }
-
-        // 图标与文字间距
-        & + .@{btn-prefix-cls}__text {
-            &--small {
-                .btn-size-small();
-                margin-left: @icon-text-margin;
-            }
-            &--middle {
-                .btn-size-middle();
-                margin-left: @icon-text-margin;
-            }
-            &--large {
-                .btn-size-large();
-                margin-left: @icon-text-margin;
-            }
-        }
-    }
-
-    // 文字样式
-    &__text {
-        display: inline-block;
-
-        &--small {
-            .btn-size-small();
-            font-size: @text-font-size;
-        }
-        &--middle {
-            .btn-size-middle();
-            font-size: @text-font-size;
-        }
-        &--large {
-            .btn-size-large();
-            font-size: @text-font-size;
-        }
-    }
-
-    // 尺寸变体
-    &-sm {
-        .btn-size-small();
-        padding: @padding;
-    }
-    &-lg {
-        .btn-size-large();
-        padding: @padding;
-    }
-
-    // 主要按钮
-    &-primary {
-        .btn-disabled-primary();
-        .generate-btn-disabled(@bg, @color, @border);
-
-        &:hover,
-        &:focus {
-            background-color: #225fdb;
-        }
-    }
-
-    // 次要按钮
-    &-secondary {
-        border-color: @primary-color;
-        color: @primary-color;
-
-        &:hover,
-        &:focus {
-            background-color: fade(@primary-color, 10%);
-        }
-
-        .btn-disabled-secondary-tertiary();
-        .generate-btn-disabled(@bg, @color, @border);
-    }
-
-    // 三级按钮
-    &-tertiary {
-        background-color: #f3f3f3;
-        border-color: @border-color-base;
-
-        &:hover,
-        &:focus {
-            background-color: fade(@primary-color, 10%);
-            border-color: @primary-color;
-            color: @primary-color;
-        }
+.ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  padding:  0;
+
+  .apply-btn-size(4px 16px; 14px; 16px; 8px);
+
+  &-sm {
+    .apply-btn-size(2px 12px; 12px; 12px; 2px);
+  }
+
+  &-lg {
+    .apply-btn-size(3px 40px; 14px; 18px; 8px);
+  }
+
+  &-circle {
+    padding-inline: 0;
+    border-radius: 50%;
+  }
+
+
+  // 主按钮
+  &-primary {
+    .btn-hover-variant(#fff; #225fdb; #225fdb);
+    .generate-btn-disabled(@disabled-color; #f9f9f9; @disabled-color);
+  }
+
+  // 次按钮
+  &-secondary {
+    color: @primary-color;
+    border-color: @primary-color;
+
+    .btn-hover-variant(@primary-color; fade(@primary-color, 10%); @primary-color);
+    .generate-btn-disabled(@primary-color-disabled; @disabled-color; @border-color-base);
+  }
+
+  // 三级按钮
+  &-tertiary {
+    background-color: #f3f3f3;
+    border-color: @border-color-base;
+
+    .btn-hover-variant(@primary-color; fade(@primary-color, 10%); @primary-color);
+    .generate-btn-disabled(@primary-color-disabled; @disabled-color; @border-color-base);
+  }
+
+  // 默认按钮
+  &-default {
+    .generate-btn-disabled(transparent; @disabled-color; @border-color-base);
+  }
+}
 
-        .btn-disabled-secondary-tertiary();
-        .generate-btn-disabled(@bg, @color, @border);
-    }
 
-    // 默认按钮
-    &-default {
-        .btn-disabled-default();
-        .generate-btn-disabled(@bg, @color, @border);
-    }
-}

package/esm/button/style/mixin.less

@@ -1,47 +1,39 @@
-.btn-size-small() {
-    @padding: 2px 12px;
-    @icon-font-size: 12px;
-    @text-font-size: 12px;
-    @icon-text-margin: 2px;
-}
-.btn-size-middle() {
-    @padding: 4px 16px;
-    @icon-font-size: 16px;
-    @text-font-size: 14px;
-    @icon-text-margin: 8px;
-}
-.btn-size-large() {
-    @padding: 3px 40px;
-    @icon-font-size: 18px;
-    @text-font-size: 14px;
-    @icon-text-margin: 8px;
-}
+// ===================== 按钮尺寸处理 =====================
+.apply-btn-size(@padding; @font-size; @icon-size: 16px; @gap: 8px) {
+  padding: @padding;
+  font-size: @font-size;
 
-// 禁用状态配置（同样用混入）
-.btn-disabled-primary() {
-    @bg: @disabled-color;
-    @color: #F9F9F9;
-    @border: @disabled-color;
-}
-.btn-disabled-secondary-tertiary() {
-    @bg: @primary-color-disabled;
-    @color: @disabled-color;
-    @border: @border-color-base;
+  .anticon {
+    font-size: @icon-size;
+    + span {
+      margin-left: @gap;
+    }
+  }
 }
-.btn-disabled-default() {
-    @bg: transparent;
-    @color: @disabled-color;
-    @border: @border-color-base;
+
+// ===================== 禁用状态生成器 =====================
+// 参数: 背景色, 文字颜色, 边框颜色
+.generate-btn-disabled(@bg; @color; @border) {
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active,
+  &[disabled]:focus {
+    color: @color;
+    background: @bg;
+    border-color: @border;
+    cursor: not-allowed;
+    opacity: 1;
+    box-shadow: none;
+    text-shadow: none;
+  }
 }
 
-// ===================== 工具混入 =====================
-.generate-btn-disabled(@bg, @color, @border) {
-    &[disabled],
-    &[disabled]:hover {
-        background: @bg;
-        color: @color;
-        border-color: @border;
-        cursor: not-allowed;
-        opacity: 1;
-    }
+// ===================== 交互状态快捷配置 =====================
+.btn-hover-variant(@color; @bg; @border) {
+  &:hover,
+  &:focus {
+    color: @color;
+    background: @bg;
+    border-color: @border;
+  }
 }

package/esm/collapsible/index.js

@@ -16,28 +16,70 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
-import { globalConfig } from 'antd/es/config-provider';
-import classNames from 'classnames';
 import { isEqual, pick } from 'lodash-es';
 import "./style";
+import { ConfigConsumer } from 'antd/lib/config-provider/context';
+import clsx from 'clsx';
 var Collapsible = /*#__PURE__*/function (_React$Component) {
   _inherits(Collapsible, _React$Component);
   var _super = _createSuper(Collapsible);
-  // public cssClasses = {
-  //     PREFIX: 'ant-collapsible',
-  //     TRANSITION: 'ant-collapsible-transition',
-  //     WRAPPER: 'ant-collapsible-wrapper',
-  // };
-
   function Collapsible(_props) {
     var _this;
     _classCallCheck(this, Collapsible);
     _this = _super.call(this, _props);
-    _defineProperty(_assertThisInitialized(_this), "prefixCls", 'collapsible');
     _defineProperty(_assertThisInitialized(_this), "foundation", void 0);
     _defineProperty(_assertThisInitialized(_this), "domRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "resizeObserver", null);
     _defineProperty(_assertThisInitialized(_this), "hasBeenRendered", false);
+    _defineProperty(_assertThisInitialized(_this), "renderCollapsible", function (_ref) {
+      var getPrefixCls = _ref.getPrefixCls;
+      var _this$props = _this.props,
+        isOpen = _this$props.isOpen,
+        collapseHeight = _this$props.collapseHeight,
+        fade = _this$props.fade,
+        motion = _this$props.motion,
+        duration = _this$props.duration,
+        style = _this$props.style,
+        className = _this$props.className,
+        id = _this$props.id,
+        keepDOM = _this$props.keepDOM,
+        lazyRender = _this$props.lazyRender,
+        onMotionEnd = _this$props.onMotionEnd,
+        customizePrefixCls = _this$props.prefixCls;
+      var _this$state = _this.state,
+        domHeight = _this$state.domHeight,
+        isTransitioning = _this$state.isTransitioning,
+        visible = _this$state.visible;
+      var prefixCls = getPrefixCls('splitter', customizePrefixCls);
+      var wrapperStyle = _objectSpread({
+        overflow: 'hidden',
+        height: isOpen ? domHeight : collapseHeight,
+        opacity: isOpen || !fade || collapseHeight !== 0 ? 1 : 0,
+        transitionDuration: "".concat(motion && isTransitioning ? duration : 0, "ms")
+      }, style);
+      var wrapperCls = clsx("".concat(prefixCls, "-wrapper"), _defineProperty({}, "".concat(prefixCls, "-transition"), motion && isTransitioning), className);
+      var shouldRender = keepDOM && (lazyRender ? _this.hasBeenRendered : true) || collapseHeight !== 0 || visible || isOpen;
+      if (shouldRender && !_this.hasBeenRendered) {
+        _this.hasBeenRendered = true;
+      }
+      return /*#__PURE__*/React.createElement("div", _extends({
+        className: wrapperCls,
+        style: wrapperStyle,
+        onTransitionEnd: function onTransitionEnd() {
+          if (!isOpen) {
+            _this.foundation.updateVisible(false);
+          }
+          _this.foundation.updateIsTransitioning(false);
+          onMotionEnd === null || onMotionEnd === void 0 || onMotionEnd();
+        }
+      }, _this.getDataAttr(_this.props)), /*#__PURE__*/React.createElement("div", {
+        ref: _this.domRef,
+        style: {
+          overflow: 'hidden'
+        },
+        id: id
+      }, shouldRender && _this.props.children));
+    });
     _defineProperty(_assertThisInitialized(_this), "handleResize", function (entryList) {
       var entry = entryList[0];
       if (entry) {
@@ -68,7 +110,6 @@ var Collapsible = /*#__PURE__*/function (_React$Component) {
       isTransitioning: false,
       cacheIsOpen: _this.props.isOpen || false
     };
-    _this.prefixCls = "".concat(globalConfig().getPrefixCls(_this.prefixCls));
     _this.foundation = {
       updateDOMInRenderTree: function updateDOMInRenderTree(val) {
         return _this.setState({
@@ -96,6 +137,7 @@ var Collapsible = /*#__PURE__*/function (_React$Component) {
   _createClass(Collapsible, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      // eslint-disable-next-line compat/compat
       this.resizeObserver = new ResizeObserver(this.handleResize);
       if (this.domRef.current) {
         this.resizeObserver.observe(this.domRef.current);
@@ -134,51 +176,7 @@ var Collapsible = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-      var _this$props = this.props,
-        isOpen = _this$props.isOpen,
-        collapseHeight = _this$props.collapseHeight,
-        fade = _this$props.fade,
-        motion = _this$props.motion,
-        duration = _this$props.duration,
-        style = _this$props.style,
-        className = _this$props.className,
-        id = _this$props.id,
-        keepDOM = _this$props.keepDOM,
-        lazyRender = _this$props.lazyRender,
-        onMotionEnd = _this$props.onMotionEnd;
-      var _this$state = this.state,
-        domHeight = _this$state.domHeight,
-        isTransitioning = _this$state.isTransitioning,
-        visible = _this$state.visible;
-      var wrapperStyle = _objectSpread({
-        overflow: 'hidden',
-        height: isOpen ? domHeight : collapseHeight,
-        opacity: isOpen || !fade || collapseHeight !== 0 ? 1 : 0,
-        transitionDuration: "".concat(motion && isTransitioning ? duration : 0, "ms")
-      }, style);
-      var wrapperCls = classNames("".concat(this.prefixCls, "-wrapper"), _defineProperty({}, "".concat(this.prefixCls, "-transition"), motion && isTransitioning), className);
-      var shouldRender = keepDOM && (lazyRender ? this.hasBeenRendered : true) || collapseHeight !== 0 || visible || isOpen;
-      if (shouldRender && !this.hasBeenRendered) {
-        this.hasBeenRendered = true;
-      }
-      return /*#__PURE__*/React.createElement("div", _extends({
-        className: wrapperCls,
-        style: wrapperStyle,
-        onTransitionEnd: function onTransitionEnd() {
-          if (!isOpen) {
-            _this3.foundation.updateVisible(false);
-          }
-          _this3.foundation.updateIsTransitioning(false);
-          onMotionEnd === null || onMotionEnd === void 0 || onMotionEnd();
-        }
-      }, this.getDataAttr(this.props)), /*#__PURE__*/React.createElement("div", {
-        ref: this.domRef,
-        style: {
-          overflow: 'hidden'
-        },
-        id: id
-      }, shouldRender && this.props.children));
+      return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderCollapsible);
     }
   }], [{
     key: "getDerivedStateFromProps",

package/esm/collapsibleActionItems/index.js

@@ -4,8 +4,8 @@ import { EllipsisOutlined } from '@ant-design/icons';
 import { Button } from "./..";
 import { Divider, Dropdown, Menu } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
-import classNames from 'classnames';
 import "./style";
+import clsx from 'clsx';
 var CollapsibleActionItems = function CollapsibleActionItems(props) {
   var actionItems = props.actionItems,
     _props$maxCount = props.maxCount,
@@ -53,7 +53,7 @@ var CollapsibleActionItems = function CollapsibleActionItems(props) {
     return getActionItemNode(item, true);
   })) : null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, className),
+    className: clsx(prefixCls, className),
     style: style
   }, displayAction.map(function (actionItem, index) {
     var showDivider = index < actionItems.length - 1;

package/esm/flex/index.js

@@ -16,7 +16,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 import React from 'react';
 import { ConfigContext, globalConfig } from 'antd/es/config-provider';
-import clsx from 'classnames';
+import clsx from 'clsx';
 import { omit } from 'lodash-es';
 import "./style";
 import { isPresetSize } from "../_util/gapSize";

package/esm/flex/style/index.less

@@ -1,77 +1,77 @@
-@import '../../style/themes/index.less';
-
-@flex-prefix-cls: ~'@{ant-prefix}-flex';
-
-// 属性与值的映射
-@align-items-values: {
-    stretch: stretch;
-    flex-start: flex-start;
-    center: center;
-    flex-end: flex-end;
-    baseline: baseline;
-};
-
-@justify-content-values: {
-    flex-start: flex-start;
-    center: center;
-    flex-end: flex-end;
-    space-between: space-between;
-    space-around: space-around;
-    space-evenly: space-evenly;
-};
-
-@flex-wrap-values: {
-    nowrap: nowrap;
-    wrap: wrap;
-    wrap-reverse: wrap-reverse;
-};
-
-.@{flex-prefix-cls} {
-    display: flex;
-    margin: 0;
-    padding: 0;
-
-    // 方向
-    &-vertical {
-        flex-direction: column;
-    }
-    &-rtl {
-        direction: rtl;
-    }
-    &:empty {
-        display: none;
-    }
-
-    // 间距 (Gap)
-    &-gap-small {
-        gap: @padding-xs;
-    }
-    &-gap-middle {
-        gap: @padding-md;
-    }
-    &-gap-large {
-        gap: @padding-lg;
-    }
-
-    // 使用 Loops/Each 抽象重复代码
-    // flex-wrap
-    each(@flex-wrap-values, .(@value, @key) {
-        &-wrap-@{key} {
-            flex-wrap: @value;
-        }
-    });
-
-    // align-items
-    each(@align-items-values, .(@value, @key) {
-        &-align-@{key} {
-            align-items: @value;
-        }
-    });
-
-    // justify-content
-    each(@justify-content-values, .(@value, @key) {
-        &-justify-@{key} {
-            justify-content: @value;
-        }
-    });
+@import '../../style/themes/index.less';
+
+@flex-prefix-cls: ~'@{ant-prefix}-flex';
+
+// 属性与值的映射
+@align-items-values: {
+    stretch: stretch;
+    flex-start: flex-start;
+    center: center;
+    flex-end: flex-end;
+    baseline: baseline;
+};
+
+@justify-content-values: {
+    flex-start: flex-start;
+    center: center;
+    flex-end: flex-end;
+    space-between: space-between;
+    space-around: space-around;
+    space-evenly: space-evenly;
+};
+
+@flex-wrap-values: {
+    nowrap: nowrap;
+    wrap: wrap;
+    wrap-reverse: wrap-reverse;
+};
+
+.@{flex-prefix-cls} {
+    display: flex;
+    margin: 0;
+    padding: 0;
+
+    // 方向
+    &-vertical {
+        flex-direction: column;
+    }
+    &-rtl {
+        direction: rtl;
+    }
+    &:empty {
+        display: none;
+    }
+
+    // 间距 (Gap)
+    &-gap-small {
+        gap: @padding-xs;
+    }
+    &-gap-middle {
+        gap: @padding-md;
+    }
+    &-gap-large {
+        gap: @padding-lg;
+    }
+
+    // 使用 Loops/Each 抽象重复代码
+    // flex-wrap
+    each(@flex-wrap-values, .(@value, @key) {
+        &-wrap-@{key} {
+            flex-wrap: @value;
+        }
+    });
+
+    // align-items
+    each(@align-items-values, .(@value, @key) {
+        &-align-@{key} {
+            align-items: @value;
+        }
+    });
+
+    // justify-content
+    each(@justify-content-values, .(@value, @key) {
+        &-justify-@{key} {
+            justify-content: @value;
+        }
+    });
 }

package/esm/flex/utils.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import clsx from 'classnames';
+import clsx from 'clsx';
 export var flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
 export var justifyContentValues = ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'left', 'right'];
 export var alignItemsValues = ['center', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'baseline', 'normal', 'stretch'];

package/esm/formList/index.js

@@ -14,19 +14,19 @@ import React, { useMemo } from 'react';
 import { Utils } from '@dtinsight/dt-utils';
 import { Form, Table } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import "./style";
 
-/**
- * Override NamePath parameters type
+/**
+ * Override NamePath parameters type
  */
 
-/**
- * Override PanelRender type
+/**
+ * Override PanelRender type
  */
 
-/**
- * Form.Table 组件类型
+/**
+ * Form.Table 组件类型
  */
 
 export default function InternalTable(_ref) {
@@ -85,9 +85,11 @@ export default function InternalTable(_ref) {
         return _typeof(rule) === 'object' && rule.required;
       }));
       return _objectSpread(_objectSpread({}, cols), {}, {
-        title: /*#__PURE__*/React.createElement(React.Fragment, null, isRequired && /*#__PURE__*/React.createElement("span", {
-          className: "dtc-form__table__column--required"
-        }), cols.title),
+        title: function title() {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, isRequired && /*#__PURE__*/React.createElement("span", {
+            className: "dtc-form__table__column--required"
+          }), typeof cols.title === 'function' ? cols.title.apply(cols, arguments) : cols.title);
+        },
         render: function render(_, fieldData) {
           var currentNamePath = [fieldData.name, cols.dataIndex].filter(Utils.checkExist).flat();
           var rules = rawRules === null || rawRules === void 0 ? void 0 : rawRules.map(function (rule) {
@@ -124,7 +126,7 @@ export default function InternalTable(_ref) {
     initialValue: initialValue
   }, function (fields, ope, meta) {
     return /*#__PURE__*/React.createElement(Table, _extends({
-      className: classnames(prefixCls, tableClassName),
+      className: clsx(prefixCls, tableClassName),
       rowKey: "key",
       dataSource: fields,
       pagination: false,