@uzum-tech/ui 1.2.4 → 1.3.0

package/es/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/es/status/src/Status.js

@@ -1,10 +1,11 @@
 import { h, defineComponent, computed } from 'vue';
 import { UBaseIcon } from '../../_internal/icon';
-import { SuccessIcon, WarningIcon, ErrorIcon, InactiveIcon } from '../../_internal/icons';
+import { SuccessIcon, WarningIcon, ErrorIcon, InactiveIcon, InfoIcon } from '../../_internal/icons';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { resolveWrappedSlot } from '../../_utils';
 import { statusLight } from '../styles';
 import style from './styles/index.cssr';
-export const statusProps = Object.assign(Object.assign({}, useTheme.props), { color: String, type: {
+export const statusProps = Object.assign(Object.assign({}, useTheme.props), { color: String, filled: Boolean, noIcon: Boolean, type: {
         type: String,
         default: 'default'
     } });
@@ -14,28 +15,28 @@ export default defineComponent({
     setup(props, { slots }) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Status', '-status', style, statusLight, props, mergedClsPrefixRef);
-        const mergedRenderIconRef = computed(() => {
-            if (slots.icon) {
-                return slots.icon;
-            }
-            switch (props.type) {
-                case 'success':
-                    return () => h(SuccessIcon, null);
-                case 'warning':
-                    return () => h(WarningIcon, null);
-                case 'error':
-                    return () => h(ErrorIcon, null);
-                case 'default':
-                    return () => h(InactiveIcon, null);
-            }
-        });
+        const iconRenderer = {
+            success: () => h(SuccessIcon, null),
+            info: () => h(InfoIcon, null),
+            warning: () => h(WarningIcon, null),
+            error: () => h(ErrorIcon, null),
+            default: () => resolveWrappedSlot(slots.icon, (icon) => icon) ||
+                h(InactiveIcon, null)
+        };
+        const renderIcon = () => {
+            const renderer = iconRenderer[props.type] || iconRenderer.default;
+            return renderer();
+        };
         const cssVarsRef = 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;
@@ -46,10 +47,14 @@ export default 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
             };
         });
@@ -60,7 +65,7 @@ export default 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
@@ -72,10 +77,11 @@ export default defineComponent({
         return (h("div", { class: [
                 `${mergedClsPrefix}-status`,
                 `${mergedClsPrefix}-status--${this.type}`,
-                this.themeClass
+                this.themeClass,
+                { [`${mergedClsPrefix}-status--filled`]: this.filled }
             ], style: this.cssVars },
-            h("div", { class: `${mergedClsPrefix}-status__icon` },
-                h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })),
+            !this.noIcon && (h("div", { class: `${mergedClsPrefix}-status__icon` },
+                h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon }))),
             $slots.default && (h("span", { class: `${mergedClsPrefix}-status__description` }, $slots.default()))));
     }
 });

package/es/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/es/status/src/interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -7,16 +7,20 @@ import { c, cB, cE } from '../../../_utils/cssr';
 // --u-text-color
 // --u-extra-text-color
 export default 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);
 `, [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;
  `, [c('&:last-child', `

package/es/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/es/status/styles/light.js

@@ -1,14 +1,16 @@
 import { commonLight } from '../../_styles/common';
 export 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/es/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/es/steps/src/Step.js

@@ -1,4 +1,5 @@
 import { h, defineComponent, computed, inject } from 'vue';
+import { Edit24Regular as EditIcon, CheckmarkCircle24Regular as HistoryFinishIcon, DismissCircle24Regular as HistoryErrorIcon } from '@vicons/fluent';
 import { CheckmarkIcon as FinishedIcon, CloseIcon as ErrorIcon } from '../../_internal/icons';
 import { UIconSwitchTransition, UBaseIcon } from '../../_internal';
 import { call, createKey, resolveSlot, resolveWrappedSlot, throwError } from '../../_utils';
@@ -10,6 +11,7 @@ export const stepProps = {
     description: String,
     disabled: Boolean,
     noIcon: Boolean,
+    variant: String,
     // index will be filled by parent steps, not user
     internalIndex: {
         type: Number,
@@ -25,38 +27,43 @@ export default defineComponent({
             throwError('step', '`u-step` must be placed inside `u-steps`.');
         const { inlineThemeDisabled } = useConfig();
         const { props: stepsProps, mergedThemeRef, mergedClsPrefixRef, stepsSlots } = USteps;
-        const verticalRef = computed(() => {
-            return stepsProps.vertical;
-        });
-        const noIconRef = computed(() => {
-            return props.noIcon;
+        const variantRef = computed(() => stepsProps.variant || 'default');
+        const noIconRef = computed(() => props.noIcon);
+        const variantBehaviors = computed(() => {
+            const variant = variantRef.value;
+            return {
+                variant,
+                isVerticalOrHistory: stepsProps.vertical || variant === 'history',
+                shouldRenderSplitor: !stepsProps.vertical && variant !== 'history'
+            };
         });
         const mergedStatusRef = 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 = computed(() => {
             const { value: status } = mergedStatusRef;
             const { size } = stepsProps;
-            const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [createKey('stepHeaderFontSize', size)]: stepHeaderFontSize, [createKey('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [createKey('indicatorSize', size)]: indicatorSize, [createKey('indicatorIconSize', size)]: indicatorIconSize, [createKey('indicatorTextColor', status)]: indicatorTextColor, [createKey('indicatorBorderColor', status)]: indicatorBorderColor, [createKey('headerTextColor', status)]: headerTextColor, [createKey('splitorColor', status)]: splitorColor, [createKey('indicatorColor', status)]: indicatorColor, [createKey('descriptionTextColor', status)]: descriptionTextColor } } = mergedThemeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [createKey('stepHeaderFontSize', size)]: stepHeaderFontSize, [createKey('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [createKey('indicatorSize', size)]: indicatorSize, [createKey('indicatorIconSize', size)]: indicatorIconSize, [createKey('indicatorTextColor', status)]: indicatorTextColor, [createKey('indicatorBorderColor', status)]: indicatorBorderColor, [createKey('headerTextColor', status)]: headerTextColor, [createKey('splitorColor', status)]: splitorColor, [createKey('indicatorColor', status)]: indicatorColor, [createKey('descriptionTextColor', status)]: descriptionTextColor, [createKey('indicatorIconColor', status)]: indicatorIconColor } } = mergedThemeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-description-text-color': descriptionTextColor,
@@ -69,7 +76,8 @@ export default 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
@@ -94,28 +102,51 @@ export default defineComponent({
                 }
                 : undefined;
         });
-        const renderInternalIndex = () => (h("div", { key: props.internalIndex, class: `${mergedClsPrefixRef.value}-step-indicator-slot__index` }, props.internalIndex));
-        const renderFinishIcon = () => (h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "finish" }, {
-            default: () => resolveSlot(stepsSlots['finish-icon'], () => [h(FinishedIcon, null)])
-        }));
-        const renderErrorIcon = () => (h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "error" }, {
-            default: () => resolveSlot(stepsSlots['error-icon'], () => [h(ErrorIcon, null)])
-        }));
+        const iconRenderer = {
+            history: {
+                finish: () => renderFinishIcon('history'),
+                error: () => renderErrorIcon('history'),
+                default: () => resolveWrappedSlot(slots.icon, (icon) => icon || renderHistoryIcon())
+            },
+            default: {
+                finish: () => renderFinishIcon(),
+                error: () => renderErrorIcon(),
+                default: () => resolveWrappedSlot(slots.icon, (icon) => icon || renderInternalIndex())
+            }
+        };
         const renderIcon = () => {
-            return 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') => (h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "finish" }, {
+            default: () => variant === 'history'
+                ? resolveSlot(stepsSlots['finish-icon'], () => [
+                    h(HistoryFinishIcon, null)
+                ])
+                : resolveSlot(stepsSlots['finish-icon'], () => [h(FinishedIcon, null)])
+        }));
+        const renderErrorIcon = (variant = 'default') => (h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "error" }, {
+            default: () => variant === 'history'
+                ? resolveSlot(stepsSlots['error-icon'], () => [
+                    h(HistoryErrorIcon, null)
+                ])
+                : resolveSlot(stepsSlots['error-icon'], () => [h(ErrorIcon, null)])
+        }));
+        const renderHistoryIcon = () => (h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "history" }, {
+            default: () => resolveSlot(stepsSlots['history-icon'], () => [h(EditIcon, null)])
+        }));
+        const renderInternalIndex = () => (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,
@@ -125,7 +156,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix, onRender, handleStepClick, disabled, renderIcon } = this;
+        const { mergedClsPrefix, onRender, handleStepClick, disabled, renderIcon, variantBehaviors, noIcon } = this;
         const descriptionNode = resolveWrappedSlot(this.$slots.default, (children) => {
             const mergedDescription = children || this.description;
             if (mergedDescription) {
@@ -140,17 +171,18 @@ export default 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 ? (h("div", { class: `${mergedClsPrefix}-step-indicator` },
+            variantBehaviors.isVerticalOrHistory || !noIcon ? (h("div", { class: `${mergedClsPrefix}-step-indicator` },
                 h("div", { class: `${mergedClsPrefix}-step-indicator-slot` },
                     h(UIconSwitchTransition, null, { default: renderIcon })),
-                this.vertical ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null)) : null,
+                variantBehaviors.isVerticalOrHistory ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null)) : null,
             h("div", { class: `${mergedClsPrefix}-step-content` },
-                h("div", { class: `${mergedClsPrefix}-step-content-header ${mergedClsPrefix}-step-content-header${this.noIcon ? '--column' : ''}` },
+                h("div", { class: `${mergedClsPrefix}-step-content-header ${mergedClsPrefix}-step-content-header${noIcon ? '--column' : ''}` },
                     h("div", { class: `${mergedClsPrefix}-step-content-header__title` }, resolveSlot(this.$slots.title, () => [this.title])),
-                    this.noIcon && !this.vertical ? (h("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` })) : null,
-                    !this.vertical && !this.noIcon ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
+                    noIcon && variantBehaviors.shouldRenderSplitor ? (h("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` })) : null,
+                    !noIcon && variantBehaviors.shouldRenderSplitor ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
                 descriptionNode)));
     }
 });