tntd 2.8.0-beta.2 → 3.0.0-beta

package/es/steps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/steps/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,oBAAoB,CAAA;AAE3B,cAAc,SAAS,CAAA;AAEvB,eAAe,KAAK,CAAA","sourcesContent":["import 'antd/es/steps/style'\nimport { Steps } from './steps'\nimport './style/index.less'\n\nexport * from './steps'\n\nexport default Steps\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/steps/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,SAAS,CAAA;AAChB,OAAO,wBAAwB,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,cAAc,SAAS,CAAA;AAEvB,eAAe,KAAK,CAAA","sourcesContent":["/*\n * @Author: 周泽飞 zefei.zhou@tongdun.net\n * @Date: 2024-03-15 11:12:18\n * @LastEditors: 周泽飞 zefei.zhou@tongdun.net\n * @LastEditTime: 2024-03-21 13:58:42\n * @FilePath: /tntd/packages/tntd/src/steps/index.ts\n * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\n */\nimport './style'\nimport './stepStyle/index.less'\nimport { Steps } from './steps'\n\nexport * from './steps'\n\nexport default Steps\n"]}

package/es/steps/stepStyle/icon.less

@@ -0,0 +1,51 @@
+.@{tnt-steps-cls}:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
+    .@{steps-prefix-cls}-item{
+        &-icon{
+            border: none;
+            font-weight: 500;
+            margin: 2px 12px 2px 0;
+            width: @td-steps-icon-size;
+            height: @td-steps-icon-size;
+            line-height: @td-steps-icon-size;
+            border-radius:@td-steps-icon-size;
+            >.@{steps-prefix-cls}-icon{
+                top:0;
+                i{
+                    font-size: @td-steps-icon-size;
+                    font-weight: normal;
+                }
+            }
+        }
+        &-finish.@{step-prefix-cls}-default-icon,
+        &-error.@{step-prefix-cls}-default-icon {
+            .@{steps-prefix-cls}-item-icon {
+                background-color: transparent;
+            }
+        }
+
+        &-wait.@{step-prefix-cls}-default-icon {
+            .@{steps-prefix-cls}-item-icon {
+                background-color: @fill-color-tertiary;
+            }
+        }
+    }
+
+   
+
+    &-small {
+        .@{steps-prefix-cls}-item{
+            &-icon{
+                width: @td-steps-small-icon-size;
+                height: @td-steps-small-icon-size;
+                line-height: @td-steps-small-icon-size;
+                border-radius:@td-steps-small-icon-size;
+                >.@{steps-prefix-cls}-icon{
+                    i{
+                        font-size: @td-steps-small-icon-size;
+                    }
+                }
+            }
+        }
+    }
+}
+

package/es/steps/stepStyle/index.less

@@ -0,0 +1,177 @@
+@import './variables.less';
+@steps-prefix-cls: ~'@{ant-prefix}-steps';
+@step-prefix-cls: ~'@{ant-prefix}-step';
+@tnt-steps-cls: ~'tnt-steps';
+@tnt-step-cls: ~'tnt-step';
+
+.ellipsis{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.@{tnt-steps-cls} .@{steps-prefix-cls}{
+    &-description,
+    &-item-description {
+        font-size: @font-size-sm;
+        line-height: @td-steps-desc-height;
+        word-break: break-all;
+        color: tint(@text-color, 50%) !important;
+    }
+    &-item-title {
+        line-height: @td-steps-title-height;
+    }
+}
+
+// 水平 非点状步骤条 非导航模式
+.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
+    .@{steps-prefix-cls}-item{
+        padding-top: 18px;
+        padding-bottom: 18px;
+        &-container{
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            min-height: @nav-min-height;
+            &::after{
+                content: '';
+                flex:1;
+                height:2px;
+                border-radius: 2px;
+                min-width: 8px;
+                margin-left:32px;
+                margin-top: calc(@nav-min-height / 2 - 1px);
+            }
+        }
+
+        &-finish > .@{steps-prefix-cls}-item-container {
+            &::after {
+              border-top: 2px solid @finish-border-color;
+            }
+        }
+
+        &-wait, &-error, &-process {
+            > .@{steps-prefix-cls}-item-container {
+                &::after {
+                  border: 2px solid transparent;
+                  background-color: @border-color;
+                  mask: url(../assets/horizontal_line.svg) repeat-x 0 0;
+                  -webkit-mask:url(../assets/horizontal_line.svg) repeat-x 0 0;
+                  background-size: 8px 2px;
+                }
+              }
+        }
+
+        &-content{
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            font-family: "PingFang SC";
+            min-height: @nav-min-height;
+            // 左侧圆形图标 12的margin边距  线条至少保留8px长
+            max-width: calc(100% - @td-steps-icon-size - 12px - 32px - 8px);
+        }
+
+        &-title {
+            width: 100%;
+            padding-right:0;
+            &::after{
+                display: none;
+            }
+            >.tntd-ellipsis, >.tnt-ellipsis{
+                align-items: center;
+            }
+            .ellipsis
+        }
+
+        .@{step-prefix-cls}-ellipsis-subtitle{
+            font-size: @font-size-sm;
+            color: tint(@text-color, 50%);
+            margin-left: 2px;
+        }
+
+        &-subtitle {
+            font-size: @font-size-sm;
+            max-width: 30%;
+            color: tint(@text-color, 50%);
+            .ellipsis;
+        }
+
+        // 最后一个处理
+        &:last-child > .@{steps-prefix-cls}-item-container {
+            &::after{
+                display: none;
+            }
+            .@{steps-prefix-cls}-item-content {
+                max-width: inherit;
+                flex:none;
+            }
+        }
+    }
+
+    &-small{
+        .@{steps-prefix-cls}-item {
+            padding-top: 10px;
+            padding-bottom: 10px;
+            &-container{
+                min-height: @nav-small-min-height;
+                &::after{
+                    margin-top: calc(@nav-small-min-height / 2 - 1px);
+                }
+            }
+            &-content{
+                min-height: @nav-small-min-height;
+                max-width: calc(100% - @td-steps-small-icon-size - 12px - 32px - 8px);
+            }
+        }
+    }
+
+    &:not(.@{steps-prefix-cls}-label-vertical) {
+        .@{steps-prefix-cls}-item:not(:last-child) {
+            margin-right: 32px;
+        }
+    }
+}
+
+// 水平 非点状步骤条
+.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
+    &.@{steps-prefix-cls}-background{
+        border-radius: @border-radius-base @border-radius-base 0px 0px;
+        background: linear-gradient(90deg, #F5F7FD 9.61%, #FBFDFF 81.1%);
+        position: relative;
+        padding-left:100px;
+        padding-right: 100px;
+        overflow: hidden;
+
+        &::before{
+            content: '';
+            background-color: @primary-color;
+            mask: url(../assets/background_left.svg) no-repeat 0 0;
+            -webkit-mask:url(../assets/background_left.svg) no-repeat 0 0;
+            width: 157px;
+            height: 103px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            pointer-events: none;
+        }
+        &::after{
+            content: '';
+            background-color: @primary-color;
+            mask: url(../assets/background_right.svg) no-repeat 0 0;
+            -webkit-mask:url(../assets/background_right.svg) no-repeat 0 0;
+            width: 131px;
+            height: 80px;
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+        }
+    }
+}
+
+@import "./icon.less";
+@import "./vertical.less";
+@import "./nav.less";
+@import "./progress-dot.less";

package/es/steps/stepStyle/nav.less

@@ -0,0 +1,73 @@
+
+.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}-navigation.@{steps-prefix-cls} {
+    padding-top: 0;
+    .@{steps-prefix-cls}-item {
+        &-container{
+            padding-bottom:0;
+            margin-left: -@td-steps-icon-size / 2;
+            &::after{
+                display: none;
+            }
+        }
+        &-content{
+            max-width: calc(100% - @td-steps-icon-size - 12px - 48px );
+        }
+         // 最后一个处理
+         &:last-child > .@{steps-prefix-cls}-item-container {
+            .@{steps-prefix-cls}-item-content {
+                max-width: calc(100% - @td-steps-icon-size - 12px - 48px );
+            }
+        }
+
+        &::before {
+            content: '';
+            height: 1px;
+            left: -10px;
+        }
+
+        &-active::before {
+            content: '';
+            width: calc(100% + 20px);
+        }
+    }
+
+    &.@{steps-prefix-cls}-background{
+        .@{steps-prefix-cls}-item{
+           &:not(:last-child){
+                margin-right: 48px;
+           }
+            &::after{
+                content:"";
+                margin-left: 12px;
+                margin-top: 34px;
+                top: 0;
+                border: 1px solid @text-color-tertiary;
+                border-bottom: none;
+                border-left: none;
+            }
+        }
+    }
+
+    &-small{
+        &.@{steps-prefix-cls}-background{
+            .@{steps-prefix-cls}-item{
+                &::after{
+                    content:"";
+                    margin-top: 18px;
+                }
+
+                &-content{
+                    max-width: calc(100% - @td-steps-small-icon-size - 12px - 48px );
+                }
+                 // 最后一个处理
+                 &:last-child > .@{steps-prefix-cls}-item-container {
+                    .@{steps-prefix-cls}-item-content {
+                        max-width: calc(100% - @td-steps-small-icon-size - 12px - 48px );
+                    }
+                }
+
+            }
+        }
+    }
+}
+

package/es/steps/stepStyle/progress-dot.less

@@ -0,0 +1,10 @@
+.@{tnt-steps-cls}.@{steps-prefix-cls}-dot,
+.@{tnt-steps-cls}.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
+  .@{steps-prefix-cls}-item {
+    &-tail {
+        &::after {
+            height: 2px;
+        }
+    }
+  }
+}

package/es/steps/stepStyle/variables.less

@@ -0,0 +1,8 @@
+@td-steps-icon-size: 40px;
+@td-steps-small-icon-size: 24px;
+@td-steps-title-height: 24px;
+@td-steps-desc-height: 20px;
+@nav-min-height: 44px;
+@nav-small-min-height: 28px;
+@finish-border-color:  @primary-color;
+

package/es/steps/stepStyle/vertical.less

@@ -0,0 +1,41 @@
+.@{tnt-steps-cls}.@{steps-prefix-cls}-vertical:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation):not(.@{steps-prefix-cls}-small).@{steps-prefix-cls}{
+    .@{steps-prefix-cls}-item{
+        &-icon  >.@{steps-prefix-cls}-icon{
+            i{
+                vertical-align: middle;
+            }
+        }
+
+        &-content {
+            min-height: 94px;
+        }
+
+        > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail{
+            padding: calc(@td-steps-icon-size + 15px) 0 15px;
+            left: 18px;
+            &::after{
+                width:0;
+                border-radius: 2px;
+                background-color: transparent;
+            }
+        }
+
+        &-finish > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+            &::after {
+                border-left: 2px solid @finish-border-color;
+            }
+        }
+
+        &-wait, &-error, &-process {
+            > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+                &::after {
+                  border-left: 2px solid transparent;
+                  background-color: @border-color;
+                  mask: url(../assets/vertical_line.svg) repeat-y 0 0;
+                  -webkit-mask:url(../assets/vertical_line.svg) repeat-y 0 0;
+                }
+            }
+        }
+    }
+}
+

package/es/steps/steps.js

@@ -8,55 +8,81 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import Icon from '../icon';
+import Ellipsis from '../ellipsis';
 import { ConfigConsumer } from 'antd/es/config-provider';
 import { default as AntdSteps } from 'antd/es/steps';
 export * from 'antd/es/steps';
 export function Steps(_a) {
   var {
       className,
-      type,
-      children
+      size,
+      showBackground = true,
+      labelPlacement
     } = _a,
-    rest = __rest(_a, ["className", "type", "children"]);
-  let navContainDesc = false;
-  if (children) {
-    if (Array.isArray(children)) {
-      navContainDesc = children.some(child => {
-        if (child && child instanceof Object && child.props && child.props instanceof Object) {
-          return child.props.description;
-        }
-      });
-    }
-  }
+    rest = __rest(_a, ["className", "size", "showBackground", "labelPlacement"]);
   return React.createElement(ConfigConsumer, null, ({
     getPrefixCls
   }) => {
     const prefixCls = getPrefixCls('steps');
+    const tdSteps = !labelPlacement || labelPlacement === 'horizontal';
+    let iconsInfo = {};
+    if (tdSteps) {
+      iconsInfo = {
+        icons: {
+          finish: React.createElement(Icon, {
+            type: size === 'small' ? 'check-circle' : 'step-check',
+            className: `${prefixCls}-finish-icon`
+          }),
+          error: React.createElement(Icon, {
+            type: "close-circle",
+            className: `${prefixCls}-error-icon`
+          })
+        }
+      };
+    }
     return React.createElement(AntdSteps, Object.assign({
-      className: classNames(prefixCls, {
-        [`${prefixCls}-tntd-navigation`]: type === 'navigation',
-        [`${prefixCls}-tntd-navigation-contain-desc`]: type === 'navigation' && navContainDesc
-      }, className),
-      type: type,
-      children: children
+      className: classNames(className, {
+        ['tnt-steps']: tdSteps,
+        [`${prefixCls}-background`]: (!(rest === null || rest === void 0 ? void 0 : rest.direction) || (rest === null || rest === void 0 ? void 0 : rest.direction) === 'horizontal') && showBackground // 水平方向的才支持背景图
+      })
+    }, iconsInfo, {
+      size: size,
+      labelPlacement: labelPlacement
     }, rest));
   });
 }
 Steps.Step = function (_a) {
   var {
-      description,
-      className
+      className,
+      title,
+      subTitle,
+      titleEllipsis = true
     } = _a,
-    rest = __rest(_a, ["description", "className"]);
+    rest = __rest(_a, ["className", "title", "subTitle", "titleEllipsis"]);
   return React.createElement(ConfigConsumer, null, ({
     getPrefixCls
   }) => {
     const prefixCls = getPrefixCls('step');
+    const stepTitle = {
+      title,
+      subTitle
+    };
+    if (titleEllipsis) {
+      stepTitle.title = React.createElement(Ellipsis, {
+        suffix: React.createElement(Ellipsis, {
+          widthLimit: "30%",
+          title: subTitle,
+          className: `${prefixCls}-ellipsis-subtitle`
+        }),
+        title: title
+      });
+      stepTitle.subTitle = null;
+    }
     return React.createElement(AntdSteps.Step, Object.assign({
-      className: classNames(prefixCls, {
-        [`${prefixCls}-tntd-navigation-desc`]: !!description
-      }, className),
-      description: description
-    }, rest));
+      className: classNames('tnt-step', className, {
+        [`${prefixCls}-default-icon`]: !(rest === null || rest === void 0 ? void 0 : rest.icon)
+      })
+    }, rest, stepTitle));
   });
 };

package/es/steps/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","sourceRoot":"","sources":["../../src/steps/steps.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,eAAe,CAAA;AAEpD,cAAc,eAAe,CAAA;AAM7B,MAAM,UAAU,KAAK,CAAC,EAAkD;QAAlD,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,OAAuB,EAAlB,IAAI,cAApC,iCAAsC,CAAF;IACxD,IAAI,cAAc,GAAY,KAAK,CAAA;IACnC,IAAI,QAAQ,EAAE;QACZ,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC3B,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACvC,IAAI,KAAK,IAAI,KAAK,YAAY,MAAM,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,YAAY,MAAM,EAAE;oBACpF,OAAO,KAAK,CAAC,KAAK,CAAC,WAAW,CAAA;iBAC/B;YACH,CAAC,CAAC,CAAA;SACH;KACF;IACD,OAAO,CACL,oBAAC,cAAc,QACZ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;QACpB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,CAAA;QACvC,OAAO,CACL,oBAAC,SAAS,kBACR,SAAS,EAAE,UAAU,CACnB,SAAS,EACT;gBACE,CAAC,GAAG,SAAS,kBAAkB,CAAC,EAAE,IAAI,KAAK,YAAY;gBACvD,CAAC,GAAG,SAAS,+BAA+B,CAAC,EAC3C,IAAI,KAAK,YAAY,IAAI,cAAc;aAC1C,EACD,SAAS,CACV,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IACd,IAAI,EACR,CACH,CAAA;IACH,CAAC,CACc,CAClB,CAAA;AACH,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,UAAU,EAAkD;QAAlD,EAAE,WAAW,EAAE,SAAS,OAA0B,EAArB,IAAI,cAAjC,4BAAmC,CAAF;IACtD,OAAO,CACL,oBAAC,cAAc,QACZ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;QACpB,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,CAAA;QACtC,OAAO,CACL,oBAAC,SAAS,CAAC,IAAI,kBACb,SAAS,EAAE,UAAU,CACnB,SAAS,EACT;gBACE,CAAC,GAAG,SAAS,uBAAuB,CAAC,EAAE,CAAC,CAAC,WAAW;aACrD,EACD,SAAS,CACV,EACD,WAAW,EAAE,WAAW,IACpB,IAAI,EACR,CACH,CAAA;IACH,CAAC,CACc,CAClB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import type { StepsProps as AntdStepsProps } from 'antd/es/steps'\nimport type { StepProps as AntdStepProps } from 'antd/es/steps'\nimport classNames from 'classnames'\nimport React, { ReactNode } from 'react'\n\nimport { ConfigConsumer } from 'antd/es/config-provider'\nimport { default as AntdSteps } from 'antd/es/steps'\n\nexport * from 'antd/es/steps'\n\nexport interface StepsProps extends AntdStepsProps {\n  children?: Array<React.ReactElement>\n}\n\nexport function Steps({ className, type, children, ...rest }: StepsProps) {\n  let navContainDesc: boolean = false\n  if (children) {\n    if (Array.isArray(children)) {\n      navContainDesc = children.some((child) => {\n        if (child && child instanceof Object && child.props && child.props instanceof Object) {\n          return child.props.description\n        }\n      })\n    }\n  }\n  return (\n    <ConfigConsumer>\n      {({ getPrefixCls }) => {\n        const prefixCls = getPrefixCls('steps')\n        return (\n          <AntdSteps\n            className={classNames(\n              prefixCls,\n              {\n                [`${prefixCls}-tntd-navigation`]: type === 'navigation',\n                [`${prefixCls}-tntd-navigation-contain-desc`]:\n                  type === 'navigation' && navContainDesc,\n              },\n              className\n            )}\n            type={type}\n            children={children}\n            {...rest}\n          />\n        )\n      }}\n    </ConfigConsumer>\n  )\n}\n\nSteps.Step = function ({ description, className, ...rest }: AntdStepProps) {\n  return (\n    <ConfigConsumer>\n      {({ getPrefixCls }) => {\n        const prefixCls = getPrefixCls('step')\n        return (\n          <AntdSteps.Step\n            className={classNames(\n              prefixCls,\n              {\n                [`${prefixCls}-tntd-navigation-desc`]: !!description,\n              },\n              className\n            )}\n            description={description}\n            {...rest}\n          />\n        )\n      }}\n    </ConfigConsumer>\n  )\n}\n"]}
+{"version":3,"file":"steps.js","sourceRoot":"","sources":["../../src/steps/steps.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * @Author: 周泽飞 zefei.zhou@tongdun.net\n * @Date: 2024-03-18 19:40:01\n * @LastEditors: 周泽飞 zefei.zhou@tongdun.net\n * @LastEditTime: 2024-03-21 19:32:15\n * @FilePath: /tntd/packages/tntd/src/steps/steps.tsx\n * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\n */\nimport type { StepsProps as AntdStepsProps } from 'antd/es/steps'\nimport type { StepProps as AntdStepProps } from 'antd/es/steps'\nimport classNames from 'classnames'\nimport React from 'react'\nimport Icon from '../icon'\nimport Ellipsis from '../ellipsis'\n\nimport { ConfigConsumer } from 'antd/es/config-provider'\nimport { default as AntdSteps } from 'antd/es/steps'\n\nexport * from 'antd/es/steps'\n\nexport interface StepsProps extends AntdStepsProps {\n  showBackground?: boolean\n  children?: Array<React.ReactElement>\n  icons?: { finish: Element; error: Element }\n}\nexport interface StepProps extends AntdStepProps {\n  titleEllipsis?: boolean\n}\n\nexport function Steps({\n  className,\n  size,\n  showBackground = true,\n  labelPlacement,\n  ...rest\n}: StepsProps) {\n  return (\n    <ConfigConsumer>\n      {({ getPrefixCls }) => {\n        const prefixCls = getPrefixCls('steps')\n        const tdSteps = !labelPlacement || labelPlacement === 'horizontal'\n\n        let iconsInfo: object = {}\n        if (tdSteps) {\n          iconsInfo = {\n            icons: {\n              finish: (\n                <Icon\n                  type={size === 'small' ? 'check-circle' : 'step-check'}\n                  className={`${prefixCls}-finish-icon`}\n                />\n              ),\n              error: <Icon type=\"close-circle\" className={`${prefixCls}-error-icon`} />,\n            },\n          }\n        }\n\n        return (\n          <AntdSteps\n            className={classNames(className, {\n              ['tnt-steps']: tdSteps,\n              [`${prefixCls}-background`]:\n                (!rest?.direction || rest?.direction === 'horizontal') && showBackground, // 水平方向的才支持背景图\n            })}\n            {...iconsInfo}\n            size={size}\n            labelPlacement={labelPlacement}\n            {...rest}\n          />\n        )\n      }}\n    </ConfigConsumer>\n  )\n}\n\nSteps.Step = function ({ className, title, subTitle, titleEllipsis = true, ...rest }: StepProps) {\n  return (\n    <ConfigConsumer>\n      {({ getPrefixCls }) => {\n        const prefixCls = getPrefixCls('step')\n        const stepTitle = {\n          title,\n          subTitle,\n        }\n\n        if (titleEllipsis) {\n          stepTitle.title = (\n            <Ellipsis\n              suffix={\n                <Ellipsis\n                  widthLimit=\"30%\"\n                  title={subTitle}\n                  className={`${prefixCls}-ellipsis-subtitle`}\n                />\n              }\n              title={title}\n            />\n          )\n          stepTitle.subTitle = null\n        }\n\n        return (\n          <AntdSteps.Step\n            className={classNames('tnt-step', className, {\n              [`${prefixCls}-default-icon`]: !rest?.icon,\n            })}\n            {...rest}\n            {...stepTitle}\n          />\n        )\n      }}\n    </ConfigConsumer>\n  )\n}\n"]}

package/es/steps/style/compatibility.less

@@ -0,0 +1,50 @@
+.@{steps-prefix-cls}-flex-not-supported {
+  &.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
+    .@{steps-prefix-cls}-item {
+      margin-left: -16px;
+      padding-left: 16px;
+      background: @steps-background;
+    }
+
+    &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item {
+      margin-left: -12px;
+      padding-left: 12px;
+    }
+  }
+
+  &.@{steps-prefix-cls}-dot {
+    .@{steps-prefix-cls}-item {
+      &:last-child {
+        overflow: hidden;
+
+        .@{steps-prefix-cls}-icon-dot::after {
+          right: -200px;
+          width: 200px;
+        }
+      }
+
+      .@{steps-prefix-cls}-icon-dot::before,
+      .@{steps-prefix-cls}-icon-dot::after {
+        position: absolute;
+        top: 0;
+        left: -10px;
+        width: 10px;
+        height: 8px;
+        background: @steps-background;
+        content: '';
+      }
+
+      .@{steps-prefix-cls}-icon-dot::after {
+        right: -10px;
+        left: auto;
+      }
+    }
+
+    .@{steps-prefix-cls}-item-wait
+      .@{steps-prefix-cls}-item-icon
+      > .@{steps-prefix-cls}-icon
+      .@{steps-prefix-cls}-icon-dot {
+      background: #ccc;
+    }
+  }
+}

package/es/steps/style/custom-icon.less

@@ -0,0 +1,31 @@
+.@{steps-prefix-cls}-item-custom {
+  .@{steps-prefix-cls}-item-icon {
+    height: auto;
+    background: none;
+    border: 0;
+    > .@{steps-prefix-cls}-icon {
+      top: 0;
+      left: 0.5px;
+      width: @steps-icon-size;
+      height: @steps-icon-size;
+      font-size: 24px;
+      line-height: @steps-icon-size;
+    }
+  }
+  &.@{steps-prefix-cls}-item-process {
+    .@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
+      color: @process-icon-color;
+    }
+  }
+}
+
+// Only adjust horizontal customize icon width
+.@{steps-prefix-cls} {
+  &:not(.@{steps-prefix-cls}-vertical) {
+    .@{steps-prefix-cls}-item-custom {
+      .@{steps-prefix-cls}-item-icon {
+        width: auto;
+      }
+    }
+  }
+}

package/es/steps/style/index.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: 周泽飞 zefei.zhou@tongdun.net
+ * @Date: 2024-03-14 13:35:59
+ * @LastEditors: 周泽飞 zefei.zhou@tongdun.net
+ * @LastEditTime: 2024-03-21 13:57:36
+ * @FilePath: /tntd/packages/tntd/src/steps/style/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import '../../style/index.less';
+import './index.less';

package/es/steps/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/steps/style/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,wBAAwB,CAAA;AAC/B,OAAO,cAAc,CAAA","sourcesContent":["/*\n * @Author: 周泽飞 zefei.zhou@tongdun.net\n * @Date: 2024-03-14 13:35:59\n * @LastEditors: 周泽飞 zefei.zhou@tongdun.net\n * @LastEditTime: 2024-03-21 13:57:36\n * @FilePath: /tntd/packages/tntd/src/steps/style/index.tsx\n * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\n */\nimport '../../style/index.less'\nimport './index.less'\n"]}