@dtjoy/dt-design 1.1.2 → 1.1.5

package/{esm/blockHeader → lib/block-header}/style/index.less

@@ -1,143 +1,167 @@
-@import '../../style/themes/index.less';
-
-@card_prefix: ~'@{ant-prefix}-block-header';
-
-.@{card_prefix} {
-    &__title {
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        &--large {
-            .title__box {
-                line-height: 24px;
-                .title__text {
-                    font-size: 16px;
-                }
-            }
-        }
-        &--middle {
-            .title__box {
-                line-height: 22px;
-                .title__text {
-                    font-size: 14px;
-                }
-            }
-        }
-        &--small {
-            .title__box {
-                line-height: 20px;
-                .title__text {
-                    font-size: 12px;
-                }
-            }
-        }
-        &--background {
-            padding: 0 12px;
-            background-color: #f9f9fa;
-            &.@{card_prefix}__title {
-                &--middle,
-                &--large {
-                    height: 40px;
-                }
-                &--small {
-                    height: 32px;
-                }
-            }
-        }
-        &--pointer {
-            cursor: pointer;
-        }
-        .title {
-            &__box {
-                flex: 1;
-                display: flex;
-                align-items: center;
-            }
-            &__addon-before {
-                margin-right: 8px;
-                color: @primary-color;
-                &--middle {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 20px;
-                }
-                &--small {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 16px;
-                }
-                &--large {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 20px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 24px;
-                }
-            }
-            &__tooltip {
-                display: flex;
-                margin-right: 4px;
-                font-size: 14px;
-                color: #b1b4c5;
-                cursor: pointer;
-            }
-            &__text {
-                color: @text-color;
-                font-weight: 500;
-                margin-right: 4px;
-            }
-            &__description {
-                display: flex;
-                align-items: center;
-                color: @label-color;
-                font-size: 12px;
-            }
-            &__addon-after {
-                color: @label-color;
-            }
-            &__collapse {
-                color: @label-color;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                user-select: none;
-                .collapse {
-                    &__text {
-                        font-size: 12px;
-                        margin: 0 4px;
-                    }
-                    &__icon {
-                        font-size: 16px;
-                        transition: transform 0.4s;
-                        &--down {
-                            transform: rotate(-180deg);
-                        }
-                        &--up {
-                            transform: rotate(0deg);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    &__content {
-        padding: 16px 24px;
-
-        // opacity: 0;
-        // height: 0;
-        // overflow: hidden;
-        // transition: opacity 0.5s ease, height 0.5s ease;
-        &--active {
-            // opacity: 1;
-            // height: auto;
-        }
-    }
-}
+@import '../../style/themes/index.less';
+
+@card_prefix: ~'@{ant-prefix}-block-header';
+
+.@{card_prefix} {
+    &__title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 4px;
+
+        &--large {
+            .title__box {
+                line-height: 24px;
+
+                .title__text {
+                    font-size: 16px;
+                }
+            }
+        }
+
+        &--middle {
+            .title__box {
+                line-height: 22px;
+
+                .title__text {
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &--small {
+            .title__box {
+                line-height: 20px;
+
+                .title__text {
+                    font-size: 12px;
+                }
+            }
+        }
+
+        &--background {
+            padding: 0 12px;
+            background-color: #f9f9fa;
+            &.@{card_prefix}__title {
+                &--middle,
+                &--large {
+                    height: 40px;
+                }
+
+                &--small {
+                    height: 32px;
+                }
+            }
+        }
+
+        &--pointer {
+            cursor: pointer;
+        }
+
+        .title {
+            &__box {
+                display: flex;
+                flex: 1;
+                align-items: center;
+            }
+
+            &__addon-before {
+                margin-right: 8px;
+                color: @primary-color;
+
+                &--middle {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 20px;
+                }
+
+                &--small {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 16px;
+                }
+
+                &--large {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 20px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 24px;
+                }
+            }
+
+            &__tooltip {
+                display: flex;
+                margin-right: 4px;
+                color: #b1b4c5;
+                font-size: 14px;
+                cursor: pointer;
+            }
+
+            &__text {
+                margin-right: 4px;
+                color: @text-color;
+                font-weight: 500;
+            }
+
+            &__description {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                font-size: 12px;
+            }
+
+            &__addon-after {
+                color: @label-color;
+            }
+
+            &__collapse {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                cursor: pointer;
+                user-select: none;
+
+                .collapse {
+                    &__text {
+                        margin: 0 4px;
+                        font-size: 12px;
+                    }
+
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+
+                        &--up {
+                            transform: rotate(0deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &__content {
+        padding: 16px 24px;
+
+        // opacity: 0;
+        // height: 0;
+        // overflow: hidden;
+        // transition: opacity 0.5s ease, height 0.5s ease;
+        &--active {
+            // opacity: 1;
+            // height: auto;
+        }
+    }
+}

package/lib/button/index.js

@@ -8,18 +8,33 @@ var _react = _interopRequireDefault(require("react"));
 var _antd = require("antd");
 var _clsx = _interopRequireDefault(require("clsx"));
 require("./style");
+var _excluded = ["className", "size", "type"];
 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); }
-function Button({
-  className,
-  size = 'middle',
-  type,
-  ...rest
-}) {
+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; }
+/** Map custom types to antd-compatible types */
+function mapButtonType(type) {
+  if (type === 'secondary' || type === 'tertiary') {
+    return 'default';
+  }
+  return type;
+}
+var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    type = _ref.type,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_antd.Button, _extends({
-    className: (0, _clsx.default)(className),
+    ref: ref,
+    className: (0, _clsx.default)(className, {
+      'dt-btn-secondary': type === 'secondary',
+      'dt-btn-tertiary': type === 'tertiary'
+    }),
     size: size,
-    type: type
+    type: mapButtonType(type)
   }, rest));
-}
+});
+Button.displayName = 'Button';
 var _default = exports.default = Button;

package/lib/button/style/index.less

@@ -1,59 +1,62 @@
-@import '../../style/themes/index.less';
-@import './mixin.less';
-
-@btn-prefix-cls: ~'@{ant-prefix}-btn';
-
-.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);
-  }
-}
-
-
+@import '../../style/themes/index.less';
+@import './mixin.less';
+
+@btn-prefix-cls: ~'dt-btn';
+
+.ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding:  0;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  .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 {
+    border-radius: 50%;
+    padding-inline: 0;
+  }
+
+
+  // 主按钮
+  &-primary {
+    .btn-hover-variant(#fff; #225fdb; #225fdb);
+    .generate-btn-disabled(@disabled-color; #f9f9f9; @disabled-color);
+  }
+
+  // 默认按钮
+  &-default {
+    .generate-btn-disabled(transparent; @disabled-color; @border-color-base);
+  }
+}
+
+// 自定义按钮类型：JS 侧为 secondary/tertiary 类型附加 dt-btn-secondary / dt-btn-tertiary 类
+.@{btn-prefix-cls} {
+  // 次按钮
+  &-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);
+  }
+}
+
+

package/lib/button/style/mixin.less

@@ -1,39 +1,40 @@
-// ===================== 按钮尺寸处理 =====================
-.apply-btn-size(@padding; @font-size; @icon-size: 16px; @gap: 8px) {
-  padding: @padding;
-  font-size: @font-size;
-
-  .anticon {
-    font-size: @icon-size;
-    + span {
-      margin-left: @gap;
-    }
-  }
-}
-
-// ===================== 禁用状态生成器 =====================
-// 参数: 背景色, 文字颜色, 边框颜色
-.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;
-  }
-}
-
-// ===================== 交互状态快捷配置 =====================
-.btn-hover-variant(@color; @bg; @border) {
-  &:hover,
-  &:focus {
-    color: @color;
-    background: @bg;
-    border-color: @border;
-  }
-}
+// ===================== 按钮尺寸处理 =====================
+.apply-btn-size(@padding; @font-size; @icon-size: 16px; @gap: 8px) {
+  padding: @padding;
+  font-size: @font-size;
+
+  .anticon {
+    font-size: @icon-size;
+
+    + span {
+      margin-left: @gap;
+    }
+  }
+}
+
+// ===================== 禁用状态生成器 =====================
+// 参数: 背景色, 文字颜色, 边框颜色
+.generate-btn-disabled(@bg; @color; @border) {
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active,
+  &[disabled]:focus {
+    color: @color;
+    text-shadow: none;
+    background: @bg;
+    border-color: @border;
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 1;
+  }
+}
+
+// ===================== 交互状态快捷配置 =====================
+.btn-hover-variant(@color; @bg; @border) {
+  &:hover,
+  &:focus {
+    color: @color;
+    background: @bg;
+    border-color: @border;
+  }
+}