@dtjoy/dt-design 1.0.5 → 1.0.7

package/lib/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/lib/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/lib/collapsible/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _configProvider = require("antd/es/config-provider");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _lodashEs = require("lodash-es");
 require("./style");
+var _context = require("antd/lib/config-provider/context");
+var _clsx = _interopRequireDefault(require("clsx"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
 class Collapsible extends _react.default.Component {
@@ -21,18 +21,11 @@ class Collapsible extends _react.default.Component {
     collapseHeight: 0,
     fade: false
   };
-  prefixCls = 'collapsible';
+  static displayName;
   foundation;
   domRef = /*#__PURE__*/_react.default.createRef();
   resizeObserver = null;
   hasBeenRendered = false;
-  static displayName;
-  // public cssClasses = {
-  //     PREFIX: 'ant-collapsible',
-  //     TRANSITION: 'ant-collapsible-transition',
-  //     WRAPPER: 'ant-collapsible-wrapper',
-  // };
-
   constructor(props) {
     super(props);
     this.state = {
@@ -42,7 +35,6 @@ class Collapsible extends _react.default.Component {
       isTransitioning: false,
       cacheIsOpen: this.props.isOpen || false
     };
-    this.prefixCls = `${(0, _configProvider.globalConfig)().getPrefixCls(this.prefixCls)}`;
     this.foundation = {
       updateDOMInRenderTree: val => this.setState({
         domInRenderTree: val
@@ -58,20 +50,6 @@ class Collapsible extends _react.default.Component {
       })
     };
   }
-  handleResize = entryList => {
-    const entry = entryList[0];
-    if (entry) {
-      const entryInfo = Collapsible.getEntryInfo(entry);
-      this.foundation.updateDOMHeight(entryInfo.height);
-      this.foundation.updateDOMInRenderTree(entryInfo.isShown);
-    }
-  };
-  isChildrenInRenderTree = () => {
-    if (this.domRef.current) {
-      return this.domRef.current.offsetHeight > 0;
-    }
-    return false;
-  };
   static getEntryInfo = entry => {
     let inRenderTree;
     if (entry.borderBoxSize) {
@@ -91,26 +69,6 @@ class Collapsible extends _react.default.Component {
       height
     };
   };
-  getDataAttr = props => {
-    const dataAttrs = {};
-    Object.keys(props).forEach(key => {
-      if (key.startsWith('data-')) {
-        dataAttrs[key] = String(props[key]);
-      }
-    });
-    return dataAttrs;
-  };
-  componentDidMount() {
-    this.resizeObserver = new ResizeObserver(this.handleResize);
-    if (this.domRef.current) {
-      this.resizeObserver.observe(this.domRef.current);
-    }
-    const domInRenderTree = this.isChildrenInRenderTree();
-    this.foundation.updateDOMInRenderTree(domInRenderTree);
-    if (domInRenderTree && this.domRef.current) {
-      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
-    }
-  }
   static getDerivedStateFromProps(props, prevState) {
     const newState = {};
     const isOpenChanged = props.isOpen !== prevState.cacheIsOpen;
@@ -125,6 +83,18 @@ class Collapsible extends _react.default.Component {
     newState.cacheIsOpen = props.isOpen;
     return newState;
   }
+  componentDidMount() {
+    // eslint-disable-next-line compat/compat
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    if (this.domRef.current) {
+      this.resizeObserver.observe(this.domRef.current);
+    }
+    const domInRenderTree = this.isChildrenInRenderTree();
+    this.foundation.updateDOMInRenderTree(domInRenderTree);
+    if (domInRenderTree && this.domRef.current) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
+    }
+  }
   componentDidUpdate(prevProps, prevState) {
     const changedPropKeys = Object.keys((0, _lodashEs.pick)(this.props, ['reCalcKey'])).filter(key => !(0, _lodashEs.isEqual)(this.props[key], prevProps[key]));
     const changedStateKeys = Object.keys((0, _lodashEs.pick)(this.state, ['domInRenderTree'])).filter(key => !(0, _lodashEs.isEqual)(this.state[key], prevState[key]));
@@ -141,7 +111,9 @@ class Collapsible extends _react.default.Component {
       this.resizeObserver = null;
     }
   }
-  render() {
+  renderCollapsible = ({
+    getPrefixCls
+  }) => {
     const {
       isOpen,
       collapseHeight,
@@ -153,13 +125,15 @@ class Collapsible extends _react.default.Component {
       id,
       keepDOM,
       lazyRender,
-      onMotionEnd
+      onMotionEnd,
+      prefixCls: customizePrefixCls
     } = this.props;
     const {
       domHeight,
       isTransitioning,
       visible
     } = this.state;
+    const prefixCls = getPrefixCls('splitter', customizePrefixCls);
     const wrapperStyle = {
       overflow: 'hidden',
       height: isOpen ? domHeight : collapseHeight,
@@ -167,8 +141,8 @@ class Collapsible extends _react.default.Component {
       transitionDuration: `${motion && isTransitioning ? duration : 0}ms`,
       ...style
     };
-    const wrapperCls = (0, _classnames.default)(`${this.prefixCls}-wrapper`, {
-      [`${this.prefixCls}-transition`]: motion && isTransitioning
+    const wrapperCls = (0, _clsx.default)(`${prefixCls}-wrapper`, {
+      [`${prefixCls}-transition`]: motion && isTransitioning
     }, className);
     const shouldRender = keepDOM && (lazyRender ? this.hasBeenRendered : true) || collapseHeight !== 0 || visible || isOpen;
     if (shouldRender && !this.hasBeenRendered) {
@@ -191,7 +165,33 @@ class Collapsible extends _react.default.Component {
       },
       id: id
     }, shouldRender && this.props.children));
+  };
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_context.ConfigConsumer, null, this.renderCollapsible);
   }
+  handleResize = entryList => {
+    const entry = entryList[0];
+    if (entry) {
+      const entryInfo = Collapsible.getEntryInfo(entry);
+      this.foundation.updateDOMHeight(entryInfo.height);
+      this.foundation.updateDOMInRenderTree(entryInfo.isShown);
+    }
+  };
+  isChildrenInRenderTree = () => {
+    if (this.domRef.current) {
+      return this.domRef.current.offsetHeight > 0;
+    }
+    return false;
+  };
+  getDataAttr = props => {
+    const dataAttrs = {};
+    Object.keys(props).forEach(key => {
+      if (key.startsWith('data-')) {
+        dataAttrs[key] = String(props[key]);
+      }
+    });
+    return dataAttrs;
+  };
 }
 if (process.env.NODE_ENV !== 'production') {
   Collapsible.displayName = 'Collapsible';

package/lib/collapsibleActionItems/index.js

@@ -9,8 +9,8 @@ var _icons = require("@ant-design/icons");
 var _ = require("./..");
 var _antd = require("antd");
 var _configProvider = require("antd/es/config-provider");
-var _classnames = _interopRequireDefault(require("classnames"));
 require("./style");
+var _clsx = _interopRequireDefault(require("clsx"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
 const CollapsibleActionItems = props => {
@@ -50,7 +50,7 @@ const CollapsibleActionItems = props => {
     onClick: info => onItemClick?.(info.key)
   }, actionItems.slice(maxCount - 1).map(item => getActionItemNode(item, true))) : null;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, className),
+    className: (0, _clsx.default)(prefixCls, className),
     style: style
   }, displayAction.map((actionItem, index) => {
     const showDivider = index < actionItems.length - 1;

package/lib/flex/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _configProvider = require("antd/es/config-provider");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _lodashEs = require("lodash-es");
 require("./style");
 var _gapSize = require("../_util/gapSize");
@@ -34,7 +34,7 @@ const Flex = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   } = _react.default.useContext(_configProvider.ConfigContext);
   const prefixCls = customizePrefixCls || (0, _configProvider.globalConfig)().getPrefixCls('flex');
   const [mergedVertical] = (0, _hooks.useOrientation)(orientation, vertical);
-  const mergedCls = (0, _classnames.default)(className, rootClassName, prefixCls, (0, _utils.default)(prefixCls, props), {
+  const mergedCls = (0, _clsx.default)(className, rootClassName, prefixCls, (0, _utils.default)(prefixCls, props), {
     [`${prefixCls}-rtl`]: ctxDirection === 'rtl',
     [`${prefixCls}-gap-${gap}`]: (0, _gapSize.isPresetSize)(gap),
     [`${prefixCls}-vertical`]: mergedVertical === 'vertical'

package/lib/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/lib/flex/utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.justifyContentValues = exports.flexWrapValues = exports.default = exports.alignItemsValues = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const flexWrapValues = exports.flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
 const justifyContentValues = exports.justifyContentValues = ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'left', 'right'];
@@ -31,7 +31,7 @@ const genClsJustify = (prefixCls, props) => {
   return justifyCls;
 };
 const createFlexClassNames = (prefixCls, props) => {
-  return (0, _classnames.default)({
+  return (0, _clsx.default)({
     ...genClsWrap(prefixCls, props),
     ...genClsAlign(prefixCls, props),
     ...genClsJustify(prefixCls, props)