vft 0.0.327 → 0.0.329

package/es/components/steps/index.d.ts

@@ -11,6 +11,10 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<number>;
             default: number;
         };
+        contentPosition: {
+            type: import("vue").PropType<"top" | "bottom">;
+            default: string;
+        };
         alignCenter: {
             type: import("vue").PropType<boolean>;
         };
@@ -32,6 +36,7 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
     }, import("vue").PublicProps, {
         direction: "horizontal" | "vertical";
         active: number;
+        contentPosition: "top" | "bottom";
         finishStatus: "wait" | "process" | "finish" | "error" | "success";
         processStatus: "wait" | "process" | "finish" | "error" | "success";
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -53,6 +58,10 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<number>;
             default: number;
         };
+        contentPosition: {
+            type: import("vue").PropType<"top" | "bottom">;
+            default: string;
+        };
         alignCenter: {
             type: import("vue").PropType<boolean>;
         };
@@ -72,6 +81,7 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
     }>, {}, {}, {}, {}, {
         direction: "horizontal" | "vertical";
         active: number;
+        contentPosition: "top" | "bottom";
         finishStatus: "wait" | "process" | "finish" | "error" | "success";
         processStatus: "wait" | "process" | "finish" | "error" | "success";
     }>;
@@ -90,6 +100,10 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
         type: import("vue").PropType<number>;
         default: number;
     };
+    contentPosition: {
+        type: import("vue").PropType<"top" | "bottom">;
+        default: string;
+    };
     alignCenter: {
         type: import("vue").PropType<boolean>;
     };
@@ -111,6 +125,7 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
 }, string, {
     direction: "horizontal" | "vertical";
     active: number;
+    contentPosition: "top" | "bottom";
     finishStatus: "wait" | "process" | "finish" | "error" | "success";
     processStatus: "wait" | "process" | "finish" | "error" | "success";
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
@@ -124,7 +139,7 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
                 type: import("vue").PropType<string>;
             };
             icon: {
-                type: import("vue").PropType<import("vft/es/vft").IconProps>;
+                type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
             };
             description: {
                 type: import("vue").PropType<string>;
@@ -144,7 +159,7 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
                 type: import("vue").PropType<string>;
             };
             icon: {
-                type: import("vue").PropType<import("vft/es/vft").IconProps>;
+                type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
             };
             description: {
                 type: import("vue").PropType<string>;
@@ -161,7 +176,7 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<string>;
         };
         icon: {
-            type: import("vue").PropType<import("vft/es/vft").IconProps>;
+            type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
         };
         description: {
             type: import("vue").PropType<string>;
@@ -171,9 +186,11 @@ export declare const VftSteps: import("vft/es/utils").SFCWithInstall<{
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
-            icon?(_: {}): any;
+            top?(_: {}): any;
             title?(_: {}): any;
             description?(_: {}): any;
+            icon?(_: {}): any;
+            bottom?(_: {}): any;
         };
     });
 };
@@ -184,7 +201,7 @@ export declare const VftStep: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<string>;
         };
         icon: {
-            type: import("vue").PropType<import("vft/es/vft").IconProps>;
+            type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
         };
         description: {
             type: import("vue").PropType<string>;
@@ -204,7 +221,7 @@ export declare const VftStep: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<string>;
         };
         icon: {
-            type: import("vue").PropType<import("vft/es/vft").IconProps>;
+            type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
         };
         description: {
             type: import("vue").PropType<string>;
@@ -221,7 +238,7 @@ export declare const VftStep: import("vft/es/utils").SFCWithInstall<{
         type: import("vue").PropType<string>;
     };
     icon: {
-        type: import("vue").PropType<import("vft/es/vft").IconProps>;
+        type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
     };
     description: {
         type: import("vue").PropType<string>;
@@ -231,9 +248,11 @@ export declare const VftStep: import("vft/es/utils").SFCWithInstall<{
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
-        icon?(_: {}): any;
+        top?(_: {}): any;
         title?(_: {}): any;
         description?(_: {}): any;
+        icon?(_: {}): any;
+        bottom?(_: {}): any;
     };
 })>;
 export * from './types';

package/es/components/steps/item.vue.d.ts

@@ -1,30 +1,24 @@
-import type { StepItemProps } from './types';
-import type { Ref } from 'vue';
-export interface IStepsProps {
-    space: number | string;
-    active: number;
-    direction: string;
-    alignCenter: boolean;
-    simple: boolean;
-    finishStatus: string;
-    processStatus: string;
-}
+import type { StepItemProps, StepsProps } from './types';
+import type { Ref, VNode } from 'vue';
 export interface StepItemState {
     uid: number;
+    getVnode: () => VNode;
     currentStatus: string;
     setIndex: (val: number) => void;
     calcProgress: (status: string) => void;
 }
 export interface IStepsInject {
-    props: IStepsProps;
+    props: StepsProps;
     steps: Ref<StepItemState[]>;
     addStep: (item: StepItemState) => void;
-    removeStep: (uid: number) => void;
+    removeStep: (item: StepItemState) => void;
 }
 declare function __VLS_template(): {
-    icon?(_: {}): any;
+    top?(_: {}): any;
     title?(_: {}): any;
     description?(_: {}): any;
+    icon?(_: {}): any;
+    bottom?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<StepItemProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<StepItemProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/es/components/steps/item.vue2.js

@@ -1,136 +1,171 @@
-import { defineComponent as z, ref as k, inject as q, getCurrentInstance as A, onMounted as F, watch as G, onBeforeUnmount as H, reactive as J, computed as r, createElementBlock as d, openBlock as i, normalizeClass as a, normalizeStyle as D, createElementVNode as m, unref as s, createCommentVNode as W, renderSlot as C, createBlock as f, withCtx as O, resolveDynamicComponent as Q, toDisplayString as $, createTextVNode as x } from "vue";
+import { defineComponent as D, ref as w, inject as Y, getCurrentInstance as q, onMounted as F, watch as G, computed as i, reactive as H, onBeforeUnmount as Q, createElementBlock as a, openBlock as n, normalizeClass as l, normalizeStyle as z, createCommentVNode as S, createElementVNode as d, unref as t, renderSlot as p, createTextVNode as k, toDisplayString as y, createBlock as N, mergeProps as R } from "vue";
+import { VftIcon as V } from "../icon/index.js";
 import "@vueuse/core";
-import { isNumber as R } from "@vft/utils";
+import { singleAttrToObj as X, isNumber as Z } from "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as X } from "../../hooks/use-namespace/index.js";
+import { useNamespace as _ } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { VftIcon as g } from "../icon/index.js";
-const Y = z({
+import { STEPS_INJECTION_KEY as x } from "./tokens.js";
+const ee = D({
   name: "VftStep"
-}), oe = /* @__PURE__ */ z({
-  ...Y,
+}), ve = /* @__PURE__ */ D({
+  ...ee,
   props: {
     title: {},
     icon: {},
     description: {},
     status: {}
   },
-  setup(E) {
-    const P = E, t = X("step"), l = k(-1), w = k({}), p = k(""), n = q("VftSteps"), V = A();
+  setup(K) {
+    const I = K, s = _("step"), c = w(-1), B = w({}), m = w(""), o = Y(x), $ = q();
     F(() => {
       G(
         [
-          () => n.props.active,
-          () => n.props.processStatus,
-          () => n.props.finishStatus
+          () => o.props.active,
+          () => o.props.processStatus,
+          () => o.props.finishStatus
         ],
         ([e]) => {
           U(e);
         },
         { immediate: !0 }
       );
-    }), H(() => {
-      n.removeStep(I.uid);
     });
-    const u = r(() => P.status || p.value), j = r(() => {
-      const e = n.steps.value[l.value - 1];
+    const E = i(
+      () => X(I.icon, "icon")
+    ), r = i(() => I.status || m.value), O = i(() => {
+      const e = o.steps.value[c.value - 1];
       return e ? e.currentStatus : "wait";
-    }), S = r(() => n.props.alignCenter), B = r(() => n.props.direction === "vertical"), o = r(() => n.props.simple), y = r(() => n.steps.value.length), N = r(() => n.steps.value[y.value - 1]?.uid === V?.uid), v = r(() => o.value ? "" : n.props.space), K = r(() => [
-      t.b(),
-      t.is(o.value ? "simple" : n.props.direction),
-      t.is("flex", N.value && !v.value && !S.value),
-      t.is("center", S.value && !B.value && !o.value)
-    ]), L = r(() => {
+    }), h = i(() => o.props.alignCenter), P = i(() => o.props.direction === "vertical"), u = i(() => o.props.simple), g = i(() => o.props.contentPosition === "top"), C = i(() => o.steps.value.length), T = i(() => o.steps.value[C.value - 1]?.uid === $.uid), f = i(() => u.value ? "" : o.props.space), A = i(() => [
+      s.b(),
+      s.is(u.value ? "simple" : o.props.direction),
+      s.is("flex", T.value && !f.value && !h.value),
+      s.is("center", h.value && !P.value && !u.value),
+      s.is("content-top", g.value)
+    ]), J = i(() => {
       const e = {
-        flexBasis: R(v.value) ? `${v.value}px` : v.value ? v.value : `${100 / (y.value - (S.value ? 0 : 1))}%`
+        flexBasis: Z(f.value) ? `${f.value}px` : f.value ? f.value : `${100 / (C.value - (h.value ? 0 : 1))}%`
       };
-      return B.value || N.value && (e.maxWidth = `${100 / y.value}%`), e;
-    }), M = (e) => {
-      l.value = e;
-    }, T = (e) => {
-      const c = e === "wait", h = {
-        transitionDelay: `${c ? "-" : ""}${150 * l.value}ms`
-      }, b = e === n.props.processStatus || c ? 0 : 100;
-      h.borderWidth = b && !o.value ? "1px" : 0, h[n.props.direction === "vertical" ? "height" : "width"] = `${b}%`, w.value = h;
+      return P.value || T.value && (e.maxWidth = `${100 / C.value}%`), e;
+    }), L = (e) => {
+      c.value = e;
+    }, M = (e) => {
+      const v = e === "wait", b = {
+        transitionDelay: `${v ? "-" : ""}${150 * c.value}ms`
+      }, j = e === o.props.processStatus || v ? 0 : 100;
+      b.borderWidth = j && !u.value ? "1px" : 0, b[o.props.direction === "vertical" ? "height" : "width"] = `${j}%`, B.value = b;
     }, U = (e) => {
-      e > l.value ? p.value = n.props.finishStatus : e === l.value && j.value !== "error" ? p.value = n.props.processStatus : p.value = "wait";
-      const c = n.steps.value[l.value - 1];
-      c && c.calcProgress(p.value);
-    }, I = J({
-      uid: V.uid,
-      currentStatus: u,
-      setIndex: M,
-      calcProgress: T
+      e > c.value ? m.value = o.props.finishStatus : e === c.value && O.value !== "error" ? m.value = o.props.processStatus : m.value = "wait";
+      const v = o.steps.value[c.value - 1];
+      v && v.calcProgress(m.value);
+    }, W = H({
+      uid: $.uid,
+      getVnode: () => $.vnode,
+      currentStatus: r,
+      setIndex: L,
+      calcProgress: M
     });
-    return n.addStep(I), (e, c) => (i(), d("div", {
-      style: D(L.value),
-      class: a(K.value)
+    return o.addStep(W), Q(() => {
+      o.removeStep(W);
+    }), (e, v) => (n(), a("div", {
+      style: z(J.value),
+      class: l(A.value)
     }, [
-      m("div", {
-        class: a([s(t).e("head"), s(t).is(u.value)])
+      e.$slots.top ? (n(), a("div", {
+        key: 0,
+        class: l(t(s).e("top-slot"))
       }, [
-        o.value ? W("", !0) : (i(), d("div", {
+        p(e.$slots, "top")
+      ], 2)) : g.value ? (n(), a("div", {
+        key: 1,
+        class: l(t(s).e("main"))
+      }, [
+        d("div", {
+          class: l([t(s).e("title"), t(s).is(r.value)])
+        }, [
+          p(e.$slots, "title", {}, () => [
+            k(y(e.title), 1)
+          ])
+        ], 2),
+        u.value ? (n(), a("div", {
+          key: 0,
+          class: l(t(s).e("arrow"))
+        }, null, 2)) : S("", !0),
+        d("div", {
+          class: l([t(s).e("description"), t(s).is(r.value)])
+        }, [
+          p(e.$slots, "description", {}, () => [
+            k(y(e.description), 1)
+          ])
+        ], 2)
+      ], 2)) : S("", !0),
+      d("div", {
+        class: l([t(s).e("head"), t(s).is(r.value)])
+      }, [
+        u.value ? S("", !0) : (n(), a("div", {
           key: 0,
-          class: a(s(t).e("line"))
+          class: l(t(s).e("line"))
         }, [
-          m("i", {
-            class: a(s(t).e("line-inner")),
-            style: D(w.value)
+          d("i", {
+            class: l(t(s).e("line-inner")),
+            style: z(B.value)
           }, null, 6)
         ], 2)),
-        m("div", {
-          class: a([s(t).e("icon"), s(t).is(e.icon || e.$slots.icon ? "icon" : "text")])
+        d("div", {
+          class: l([t(s).e("icon"), t(s).is(e.icon || e.$slots.icon ? "icon" : "text")])
         }, [
-          C(e.$slots, "icon", {}, () => [
-            e.icon ? (i(), f(s(g), {
-              key: 0,
-              class: a(s(t).e("icon-inner"))
-            }, {
-              default: O(() => [
-                (i(), f(Q(e.icon)))
-              ]),
-              _: 1
-            }, 8, ["class"])) : u.value === "success" ? (i(), f(s(g), {
+          p(e.$slots, "icon", {}, () => [
+            E.value?.icon ? (n(), N(t(V), R({ key: 0 }, E.value, {
+              class: t(s).e("icon-inner")
+            }), null, 16, ["class"])) : r.value === "success" ? (n(), N(t(V), {
               key: 1,
-              class: a([s(t).e("icon-inner"), s(t).is("status")])
-            }, null, 8, ["class"])) : u.value === "error" ? (i(), f(s(g), {
+              class: l([t(s).e("icon-inner"), t(s).is("status")]),
+              icon: "icon-check"
+            }, null, 8, ["class"])) : r.value === "error" ? (n(), N(t(V), {
               key: 2,
-              class: a([s(t).e("icon-inner"), s(t).is("status")])
-            }, null, 8, ["class"])) : o.value ? W("", !0) : (i(), d("div", {
+              class: l([t(s).e("icon-inner"), t(s).is("status")]),
+              icon: "icon-close"
+            }, null, 8, ["class"])) : u.value ? S("", !0) : (n(), a("div", {
               key: 3,
-              class: a(s(t).e("icon-inner"))
-            }, $(l.value + 1), 3))
+              class: l(t(s).e("icon-inner"))
+            }, y(c.value + 1), 3))
           ])
         ], 2)
       ], 2),
-      m("div", {
-        class: a(s(t).e("main"))
+      e.$slots.bottom ? (n(), a("div", {
+        key: 2,
+        class: l(t(s).e("bottom-slot"))
+      }, [
+        p(e.$slots, "bottom")
+      ], 2)) : g.value ? S("", !0) : (n(), a("div", {
+        key: 3,
+        class: l(t(s).e("main"))
       }, [
-        m("div", {
-          class: a([s(t).e("title"), s(t).is(u.value)])
+        d("div", {
+          class: l([t(s).e("title"), t(s).is(r.value)])
         }, [
-          C(e.$slots, "title", {}, () => [
-            x($(e.title), 1)
+          p(e.$slots, "title", {}, () => [
+            k(y(e.title), 1)
           ])
         ], 2),
-        o.value ? (i(), d("div", {
+        u.value ? (n(), a("div", {
           key: 0,
-          class: a(s(t).e("arrow"))
-        }, null, 2)) : (i(), d("div", {
+          class: l(t(s).e("arrow"))
+        }, null, 2)) : (n(), a("div", {
           key: 1,
-          class: a([s(t).e("description"), s(t).is(u.value)])
+          class: l([t(s).e("description"), t(s).is(r.value)])
         }, [
-          C(e.$slots, "description", {}, () => [
-            x($(e.description), 1)
+          p(e.$slots, "description", {}, () => [
+            k(y(e.description), 1)
           ])
         ], 2))
-      ], 2)
+      ], 2))
     ], 6));
   }
 });
 export {
-  oe as default
+  ve as default
 };

package/es/components/steps/steps.vue.d.ts

@@ -7,6 +7,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     direction: string;
     finishStatus: string;
     processStatus: string;
+    contentPosition: string;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (newVal?: number | undefined, oldVal?: number | undefined) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepsProps>, {
@@ -14,11 +15,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     direction: string;
     finishStatus: string;
     processStatus: string;
+    contentPosition: string;
 }>>> & Readonly<{
     onChange?: ((newVal?: number | undefined, oldVal?: number | undefined) => any) | undefined;
 }>, {
     direction: "horizontal" | "vertical";
     active: number;
+    contentPosition: "top" | "bottom";
     finishStatus: "wait" | "process" | "finish" | "error" | "success";
     processStatus: "wait" | "process" | "finish" | "error" | "success";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/components/steps/steps.vue2.js

@@ -1,17 +1,19 @@
-import { defineComponent as p, getCurrentInstance as f, watch as i, provide as u, createElementBlock as h, openBlock as v, normalizeClass as C, unref as n, renderSlot as S } from "vue";
+import { defineComponent as p, getCurrentInstance as u, watch as n, provide as h, createElementBlock as S, openBlock as C, normalizeClass as v, unref as r, renderSlot as E, createVNode as _ } from "vue";
+import { CHANGE_EVENT as N } from "../../constants/event.js";
 import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as _ } from "../../hooks/use-namespace/index.js";
+import { useNamespace as B } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
-import { useOrderedChildren as g } from "../../hooks/use-ordered-children/index.js";
+import { useOrderedChildren as I } from "../../hooks/use-ordered-children/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-const B = p({
+import { STEPS_INJECTION_KEY as g } from "./tokens.js";
+const T = p({
   name: "vft-steps"
-}), $ = /* @__PURE__ */ p({
-  ...B,
+}), K = /* @__PURE__ */ p({
+  ...T,
   props: {
     space: {},
     active: { default: 0 },
@@ -19,31 +21,34 @@ const B = p({
     alignCenter: { type: Boolean },
     simple: { type: Boolean },
     finishStatus: { default: "finish" },
-    processStatus: { default: "process" }
+    processStatus: { default: "process" },
+    contentPosition: { default: "bottom" }
   },
   emits: ["change"],
-  setup(a, { emit: l }) {
-    const s = a, m = l, r = _("steps"), {
+  setup(a, { emit: m }) {
+    const s = a, l = m, i = B("steps"), {
       children: o,
-      addChild: c,
-      removeChild: d
-    } = g(f(), "ElStep");
-    return i(o, () => {
+      addChild: d,
+      removeChild: c,
+      ChildrenSorter: f
+    } = I(u(), "VftStep");
+    return n(o, () => {
       o.value.forEach((e, t) => {
         e.setIndex(t);
       });
-    }), u("VftSteps", { props: s, steps: o, addStep: c, removeStep: d }), i(
+    }), h(g, { props: s, steps: o, addStep: d, removeStep: c }), n(
       () => s.active,
       (e, t) => {
-        m("change", e, t);
+        l(N, e, t);
       }
-    ), (e, t) => (v(), h("div", {
-      class: C([n(r).b(), n(r).m(e.simple ? "simple" : e.direction)])
+    ), (e, t) => (C(), S("div", {
+      class: v([r(i).b(), r(i).m(e.simple ? "simple" : e.direction)])
     }, [
-      S(e.$slots, "default")
+      E(e.$slots, "default"),
+      _(r(f))
     ], 2));
   }
 });
 export {
-  $ as default
+  K as default
 };

package/es/components/steps/tokens.d.ts

@@ -0,0 +1 @@
+export declare const STEPS_INJECTION_KEY = "VftSteps";

package/es/components/steps/tokens.js

@@ -0,0 +1,4 @@
+const t = "VftSteps";
+export {
+  t as STEPS_INJECTION_KEY
+};

package/es/components/steps/types.d.ts

@@ -7,10 +7,12 @@ export interface StepsProps {
     simple?: boolean;
     finishStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
     processStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
+    /** 内容区域位置：'top' | 'bottom'，默认为 'bottom' */
+    contentPosition?: 'top' | 'bottom';
 }
 export interface StepItemProps {
     title?: string;
-    icon?: IconProps;
+    icon?: IconProps | string;
     description?: string;
     status?: '' | 'wait' | 'process' | 'finish' | 'error' | 'success';
 }