@uzum-tech/ui 1.2.3 → 1.3.0

package/lib/status/src/Status.d.ts

@@ -1,9 +1,13 @@
 import { type PropType } from 'vue';
-import type { ExtractPublicPropTypes } from '../../_utils';
+import { type ExtractPublicPropTypes } from '../../_utils';
+import { StatusTypes } from './interface';
+import { VNodeChild } from 'vue';
 export declare const statusProps: {
     color: StringConstructor;
+    filled: BooleanConstructor;
+    noIcon: BooleanConstructor;
     type: {
-        type: PropType<"default" | "error" | "success" | "warning">;
+        type: PropType<StatusTypes>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Status", {
@@ -11,9 +15,11 @@ export declare const statusProps: {
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>;
@@ -22,9 +28,11 @@ export declare const statusProps: {
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>>;
@@ -33,9 +41,11 @@ export declare const statusProps: {
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>>;
@@ -43,8 +53,10 @@ export declare const statusProps: {
 export type StatusProps = ExtractPublicPropTypes<typeof statusProps>;
 declare const _default: import("vue").DefineComponent<{
     color: StringConstructor;
+    filled: BooleanConstructor;
+    noIcon: BooleanConstructor;
     type: {
-        type: PropType<"default" | "error" | "success" | "warning">;
+        type: PropType<StatusTypes>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Status", {
@@ -52,9 +64,11 @@ declare const _default: import("vue").DefineComponent<{
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>;
@@ -63,9 +77,11 @@ declare const _default: import("vue").DefineComponent<{
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>>;
@@ -74,30 +90,36 @@ declare const _default: import("vue").DefineComponent<{
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
-    mergedRenderIcon: import("vue").ComputedRef<import("vue").Slot<any> | (() => JSX.Element)>;
+    mergedRenderIcon: () => VNodeChild;
     cssVars: import("vue").ComputedRef<{
         '--u-bezier': string;
         '--u-text-color': string;
+        '--u-background-color': string;
         '--u-font-size': string;
         '--u-font-weight': string;
         '--u-line-height': string;
         '--u-icon-size': string;
+        '--u-icon-color': string;
         '--u-icon-spacing': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     color: StringConstructor;
+    filled: BooleanConstructor;
+    noIcon: BooleanConstructor;
     type: {
-        type: PropType<"default" | "error" | "success" | "warning">;
+        type: PropType<StatusTypes>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Status", {
@@ -105,9 +127,11 @@ declare const _default: import("vue").DefineComponent<{
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>;
@@ -116,9 +140,11 @@ declare const _default: import("vue").DefineComponent<{
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>>;
@@ -127,13 +153,17 @@ declare const _default: import("vue").DefineComponent<{
         lineHeight: string;
         fontWeight: string;
         iconSize: string;
+        iconColor: string;
         iconSpacing: string;
         textColor: string;
         successColor: string;
+        infoColor: string;
         warningColor: string;
         dangerColor: string;
     }, any>>>;
 }>>, {
-    type: "default" | "error" | "success" | "warning";
+    type: StatusTypes;
+    filled: boolean;
+    noIcon: boolean;
 }, {}>;
 export default _default;

package/lib/status/src/Status.js

@@ -8,9 +8,10 @@ const vue_1 = require("vue");
 const icon_1 = require("../../_internal/icon");
 const icons_1 = require("../../_internal/icons");
 const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.statusProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { color: String, type: {
+exports.statusProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { color: String, filled: Boolean, noIcon: Boolean, type: {
         type: String,
         default: 'default'
     } });
@@ -20,28 +21,28 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props, { slots }) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Status', '-status', index_cssr_1.default, styles_1.statusLight, props, mergedClsPrefixRef);
-        const mergedRenderIconRef = (0, vue_1.computed)(() => {
-            if (slots.icon) {
-                return slots.icon;
-            }
-            switch (props.type) {
-                case 'success':
-                    return () => (0, vue_1.h)(icons_1.SuccessIcon, null);
-                case 'warning':
-                    return () => (0, vue_1.h)(icons_1.WarningIcon, null);
-                case 'error':
-                    return () => (0, vue_1.h)(icons_1.ErrorIcon, null);
-                case 'default':
-                    return () => (0, vue_1.h)(icons_1.InactiveIcon, null);
-            }
-        });
+        const iconRenderer = {
+            success: () => (0, vue_1.h)(icons_1.SuccessIcon, null),
+            info: () => (0, vue_1.h)(icons_1.InfoIcon, null),
+            warning: () => (0, vue_1.h)(icons_1.WarningIcon, null),
+            error: () => (0, vue_1.h)(icons_1.ErrorIcon, null),
+            default: () => (0, _utils_1.resolveWrappedSlot)(slots.icon, (icon) => icon) ||
+                (0, vue_1.h)(icons_1.InactiveIcon, null)
+        };
+        const renderIcon = () => {
+            const renderer = iconRenderer[props.type] || iconRenderer.default;
+            return renderer();
+        };
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut }, self: { textColor, warningColor, dangerColor, successColor, iconSize, fontSize, lineHeight, fontWeight, iconSpacing } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { textColor, warningColor, dangerColor, successColor, infoColor, iconSize, iconColor, fontSize, lineHeight, fontWeight, iconSpacing } } = themeRef.value;
             let color = textColor;
             switch (props.type) {
                 case 'success':
                     color = successColor;
                     break;
+                case 'info':
+                    color = infoColor;
+                    break;
                 case 'warning':
                     color = warningColor;
                     break;
@@ -52,10 +53,14 @@ exports.default = (0, vue_1.defineComponent)({
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-text-color': props.color || color,
+                '--u-background-color': props.filled
+                    ? `${props.color || color}10`
+                    : 'transparent',
                 '--u-font-size': fontSize,
                 '--u-font-weight': fontWeight,
                 '--u-line-height': lineHeight,
                 '--u-icon-size': iconSize,
+                '--u-icon-color': iconColor || props.color || color,
                 '--u-icon-spacing': iconSpacing
             };
         });
@@ -66,7 +71,7 @@ exports.default = (0, vue_1.defineComponent)({
             : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            mergedRenderIcon: mergedRenderIconRef,
+            mergedRenderIcon: renderIcon,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -78,10 +83,11 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-status`,
                 `${mergedClsPrefix}-status--${this.type}`,
-                this.themeClass
+                this.themeClass,
+                { [`${mergedClsPrefix}-status--filled`]: this.filled }
             ], style: this.cssVars },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-status__icon` },
-                (0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })),
+            !this.noIcon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-status__icon` },
+                (0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon }))),
             $slots.default && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-status__description` }, $slots.default()))));
     }
 });

package/lib/status/src/interface.d.ts

@@ -0,0 +1,3 @@
+import { VNodeChild } from 'vue';
+export type StatusTypes = 'success' | 'info' | 'warning' | 'error' | 'default';
+export type IconRenderer = Record<StatusTypes, () => VNodeChild>;

package/lib/status/src/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/status/src/styles/index.cssr.js

@@ -12,16 +12,20 @@ const cssr_1 = require("../../../_utils/cssr");
 // --u-text-color
 // --u-extra-text-color
 exports.default = (0, cssr_1.cB)('status', `
- display: flex;
+ display: inline-flex;
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
  font-weight: var(--u-font-weight);
  color: var(--u-text-color);
+ padding: 2px 8px;
+ border-radius: 16px;
+ background-color: var(--u-background-color);
 `, [(0, cssr_1.cE)('icon', `
  display: flex;
  align-items: center;
  height: var(--u-line-height);
  font-size: var(--u-icon-size);
+ color: var(--u-icon-color);
  margin-right: var(--u-icon-spacing);
  flex-shrink: 0;
  `, [(0, cssr_1.c)('&:last-child', `

package/lib/status/styles/light.d.ts

@@ -5,9 +5,11 @@ export declare const self: (vars: ThemeCommonVars) => {
     lineHeight: string;
     fontWeight: string;
     iconSize: string;
+    iconColor: string;
     iconSpacing: string;
     textColor: string;
     successColor: string;
+    infoColor: string;
     warningColor: string;
     dangerColor: string;
 };

package/lib/status/styles/light.js

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { fontBodyMedium, lineHeightBodyMedium, fontWeightStrong, iconSmall, textSecondary, staticGreen, staticOrange, staticRed } = vars;
+    const { fontBodyMedium, lineHeightBodyMedium, fontWeightStrong, iconSmall, textSecondary, staticGreen, staticOrange, staticRed, staticDeepBlue } = vars;
     return {
         fontSize: fontBodyMedium,
         lineHeight: lineHeightBodyMedium,
         fontWeight: fontWeightStrong,
         iconSize: iconSmall,
+        iconColor: '',
         iconSpacing: '8px',
         textColor: textSecondary,
         successColor: staticGreen,
+        infoColor: staticDeepBlue,
         warningColor: staticOrange,
         dangerColor: staticRed
     };

package/lib/steps/src/Step.d.ts

@@ -1,11 +1,13 @@
 import { type PropType, VNodeChild } from 'vue';
+import type { StepsStatus, StepsVariant, VariantBehaviors } from './interface';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const stepProps: {
-    readonly status: PropType<"wait" | "error" | "finish" | "process">;
+    readonly status: PropType<StepsStatus>;
     readonly title: StringConstructor;
     readonly description: StringConstructor;
     readonly disabled: BooleanConstructor;
     readonly noIcon: BooleanConstructor;
+    readonly variant: PropType<StepsVariant>;
     readonly internalIndex: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -13,11 +15,12 @@ export declare const stepProps: {
 };
 export type StepProps = ExtractPublicPropTypes<typeof stepProps>;
 declare const _default: import("vue").DefineComponent<{
-    readonly status: PropType<"wait" | "error" | "finish" | "process">;
+    readonly status: PropType<StepsStatus>;
     readonly title: StringConstructor;
     readonly description: StringConstructor;
     readonly disabled: BooleanConstructor;
     readonly noIcon: BooleanConstructor;
+    readonly variant: PropType<StepsVariant>;
     readonly internalIndex: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -28,9 +31,10 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
-    vertical: import("vue").ComputedRef<boolean>;
+    variantBehaviors: import("vue").ComputedRef<VariantBehaviors>;
+    variant: import("vue").ComputedRef<StepsVariant>;
     noIcon: import("vue").ComputedRef<boolean>;
-    mergedStatus: import("vue").ComputedRef<"wait" | "error" | "finish" | "process">;
+    mergedStatus: import("vue").ComputedRef<StepsStatus>;
     handleStepClick: import("vue").ComputedRef<(() => void) | undefined>;
     cssVars: import("vue").ComputedRef<{
         '--u-bezier': string;
@@ -45,22 +49,24 @@ declare const _default: import("vue").DefineComponent<{
         '--u-splitor-color': string;
         '--u-step-header-font-size': string;
         '--u-step-header-font-weight': string;
+        '--u-step-icon-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly status: PropType<"wait" | "error" | "finish" | "process">;
+    readonly status: PropType<StepsStatus>;
     readonly title: StringConstructor;
     readonly description: StringConstructor;
     readonly disabled: BooleanConstructor;
     readonly noIcon: BooleanConstructor;
+    readonly variant: PropType<StepsVariant>;
     readonly internalIndex: {
         readonly type: NumberConstructor;
         readonly default: 0;
     };
 }>>, {
     readonly disabled: boolean;
-    readonly internalIndex: number;
     readonly noIcon: boolean;
+    readonly internalIndex: number;
 }, {}>;
 export default _default;

package/lib/steps/src/Step.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stepProps = void 0;
 const vue_1 = require("vue");
+const fluent_1 = require("@vicons/fluent");
 const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
@@ -13,6 +14,7 @@ exports.stepProps = {
     description: String,
     disabled: Boolean,
     noIcon: Boolean,
+    variant: String,
     // index will be filled by parent steps, not user
     internalIndex: {
         type: Number,
@@ -28,38 +30,43 @@ exports.default = (0, vue_1.defineComponent)({
             (0, _utils_1.throwError)('step', '`u-step` must be placed inside `u-steps`.');
         const { inlineThemeDisabled } = (0, _mixins_1.useConfig)();
         const { props: stepsProps, mergedThemeRef, mergedClsPrefixRef, stepsSlots } = USteps;
-        const verticalRef = (0, vue_1.computed)(() => {
-            return stepsProps.vertical;
-        });
-        const noIconRef = (0, vue_1.computed)(() => {
-            return props.noIcon;
+        const variantRef = (0, vue_1.computed)(() => stepsProps.variant || 'default');
+        const noIconRef = (0, vue_1.computed)(() => props.noIcon);
+        const variantBehaviors = (0, vue_1.computed)(() => {
+            const variant = variantRef.value;
+            return {
+                variant,
+                isVerticalOrHistory: stepsProps.vertical || variant === 'history',
+                shouldRenderSplitor: !stepsProps.vertical && variant !== 'history'
+            };
         });
         const mergedStatusRef = (0, vue_1.computed)(() => {
             const { status } = props;
-            if (status) {
+            if (status)
                 return status;
-            }
-            else {
-                const { internalIndex } = props;
-                const { current } = stepsProps;
+            const { internalIndex } = props;
+            const { current, status: stepsStatus } = stepsProps;
+            if (variantRef.value === 'history') {
                 if (current === undefined)
                     return 'process';
-                if (internalIndex < current) {
-                    return 'finish';
-                }
-                else if (internalIndex === current) {
-                    return stepsProps.status || 'process';
-                }
-                else if (internalIndex > current) {
-                    return 'wait';
-                }
+                if (internalIndex < current)
+                    return 'process';
+                if (internalIndex === current)
+                    return stepsStatus || 'process';
+                return 'wait';
             }
-            return 'process';
+            if (current === undefined)
+                return 'process';
+            if (internalIndex < current)
+                return 'finish';
+            if (internalIndex === current)
+                return stepsStatus || 'process';
+            return 'wait';
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { value: status } = mergedStatusRef;
             const { size } = stepsProps;
-            const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [(0, _utils_1.createKey)('stepHeaderFontSize', size)]: stepHeaderFontSize, [(0, _utils_1.createKey)('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [(0, _utils_1.createKey)('indicatorSize', size)]: indicatorSize, [(0, _utils_1.createKey)('indicatorIconSize', size)]: indicatorIconSize, [(0, _utils_1.createKey)('indicatorTextColor', status)]: indicatorTextColor, [(0, _utils_1.createKey)('indicatorBorderColor', status)]: indicatorBorderColor, [(0, _utils_1.createKey)('headerTextColor', status)]: headerTextColor, [(0, _utils_1.createKey)('splitorColor', status)]: splitorColor, [(0, _utils_1.createKey)('indicatorColor', status)]: indicatorColor, [(0, _utils_1.createKey)('descriptionTextColor', status)]: descriptionTextColor } } = mergedThemeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [(0, _utils_1.createKey)('stepHeaderFontSize', size)]: stepHeaderFontSize, [(0, _utils_1.createKey)('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [(0, _utils_1.createKey)('indicatorSize', size)]: indicatorSize, [(0, _utils_1.createKey)('indicatorIconSize', size)]: indicatorIconSize, [(0, _utils_1.createKey)('indicatorTextColor', status)]: indicatorTextColor, [(0, _utils_1.createKey)('indicatorBorderColor', status)]: indicatorBorderColor, [(0, _utils_1.createKey)('headerTextColor', status)]: headerTextColor, [(0, _utils_1.createKey)('splitorColor', status)]: splitorColor, [(0, _utils_1.createKey)('indicatorColor', status)]: indicatorColor, [(0, _utils_1.createKey)('descriptionTextColor', status)]: descriptionTextColor, [(0, _utils_1.createKey)('indicatorIconColor', status)]: indicatorIconColor } } = mergedThemeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-description-text-color': descriptionTextColor,
@@ -72,7 +79,8 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-indicator-text-color': indicatorTextColor,
                 '--u-splitor-color': splitorColor,
                 '--u-step-header-font-size': stepHeaderFontSize,
-                '--u-step-header-font-weight': stepHeaderFontWeight
+                '--u-step-header-font-weight': stepHeaderFontWeight,
+                '--u-step-icon-color': indicatorIconColor
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -97,28 +105,51 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 : undefined;
         });
-        const renderInternalIndex = () => ((0, vue_1.h)("div", { key: props.internalIndex, class: `${mergedClsPrefixRef.value}-step-indicator-slot__index` }, props.internalIndex));
-        const renderFinishIcon = () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "finish" }, {
-            default: () => (0, _utils_1.resolveSlot)(stepsSlots['finish-icon'], () => [(0, vue_1.h)(icons_1.CheckmarkIcon, null)])
-        }));
-        const renderErrorIcon = () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "error" }, {
-            default: () => (0, _utils_1.resolveSlot)(stepsSlots['error-icon'], () => [(0, vue_1.h)(icons_1.CloseIcon, null)])
-        }));
+        const iconRenderer = {
+            history: {
+                finish: () => renderFinishIcon('history'),
+                error: () => renderErrorIcon('history'),
+                default: () => (0, _utils_1.resolveWrappedSlot)(slots.icon, (icon) => icon || renderHistoryIcon())
+            },
+            default: {
+                finish: () => renderFinishIcon(),
+                error: () => renderErrorIcon(),
+                default: () => (0, _utils_1.resolveWrappedSlot)(slots.icon, (icon) => icon || renderInternalIndex())
+            }
+        };
         const renderIcon = () => {
-            return (0, _utils_1.resolveWrappedSlot)(slots.icon, (icon) => {
-                const mergedStatus = mergedStatusRef.value;
-                if (mergedStatus === 'finish')
-                    return renderFinishIcon();
-                if (mergedStatus === 'error')
-                    return renderErrorIcon();
-                return icon || renderInternalIndex();
-            });
+            const variant = variantBehaviors.value.variant;
+            const status = mergedStatusRef.value;
+            const rendererGroup = iconRenderer[variant] || iconRenderer.default;
+            if (status in rendererGroup) {
+                return rendererGroup[status]();
+            }
+            return rendererGroup.default();
         };
+        const renderFinishIcon = (variant = 'default') => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "finish" }, {
+            default: () => variant === 'history'
+                ? (0, _utils_1.resolveSlot)(stepsSlots['finish-icon'], () => [
+                    (0, vue_1.h)(fluent_1.CheckmarkCircle24Regular, null)
+                ])
+                : (0, _utils_1.resolveSlot)(stepsSlots['finish-icon'], () => [(0, vue_1.h)(icons_1.CheckmarkIcon, null)])
+        }));
+        const renderErrorIcon = (variant = 'default') => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "error" }, {
+            default: () => variant === 'history'
+                ? (0, _utils_1.resolveSlot)(stepsSlots['error-icon'], () => [
+                    (0, vue_1.h)(fluent_1.DismissCircle24Regular, null)
+                ])
+                : (0, _utils_1.resolveSlot)(stepsSlots['error-icon'], () => [(0, vue_1.h)(icons_1.CloseIcon, null)])
+        }));
+        const renderHistoryIcon = () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "history" }, {
+            default: () => (0, _utils_1.resolveSlot)(stepsSlots['history-icon'], () => [(0, vue_1.h)(fluent_1.Edit24Regular, null)])
+        }));
+        const renderInternalIndex = () => ((0, vue_1.h)("div", { key: props.internalIndex, class: `${mergedClsPrefixRef.value}-step-indicator-slot__index` }, props.internalIndex));
         return {
             renderIcon,
             stepsSlots,
             mergedClsPrefix: mergedClsPrefixRef,
-            vertical: verticalRef,
+            variantBehaviors,
+            variant: variantRef,
             noIcon: noIconRef,
             mergedStatus: mergedStatusRef,
             handleStepClick,
@@ -128,7 +159,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedClsPrefix, onRender, handleStepClick, disabled, renderIcon } = this;
+        const { mergedClsPrefix, onRender, handleStepClick, disabled, renderIcon, variantBehaviors, noIcon } = this;
         const descriptionNode = (0, _utils_1.resolveWrappedSlot)(this.$slots.default, (children) => {
             const mergedDescription = children || this.description;
             if (mergedDescription) {
@@ -143,17 +174,18 @@ exports.default = (0, vue_1.defineComponent)({
                 !disabled && handleStepClick && `${mergedClsPrefix}-step--clickable`,
                 this.themeClass,
                 descriptionNode && `${mergedClsPrefix}-step--show-description`,
-                `${mergedClsPrefix}-step--${this.mergedStatus}-status`
+                `${mergedClsPrefix}-step--${this.mergedStatus}-status`,
+                `${mergedClsPrefix}-step--${this.variant}-variant`
             ], style: this.cssVars, onClick: handleStepClick },
-            this.vertical || !this.noIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-indicator` },
+            variantBehaviors.isVerticalOrHistory || !noIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-indicator` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-indicator-slot` },
                     (0, vue_1.h)(_internal_1.UIconSwitchTransition, null, { default: renderIcon })),
-                this.vertical ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null)) : null,
+                variantBehaviors.isVerticalOrHistory ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null)) : null,
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content` },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content-header ${mergedClsPrefix}-step-content-header${this.noIcon ? '--column' : ''}` },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content-header ${mergedClsPrefix}-step-content-header${noIcon ? '--column' : ''}` },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content-header__title` }, (0, _utils_1.resolveSlot)(this.$slots.title, () => [this.title])),
-                    this.noIcon && !this.vertical ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` })) : null,
-                    !this.vertical && !this.noIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
+                    noIcon && variantBehaviors.shouldRenderSplitor ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` })) : null,
+                    !noIcon && variantBehaviors.shouldRenderSplitor ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
                 descriptionNode)));
     }
 });