@uzum-tech/ui 1.4.1 → 1.5.0

package/es/pagination/styles/light.js

@@ -4,7 +4,7 @@ import { inputLight } from '../../input/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
-    const { transparencySecondary, elementsPrimary, brandPrimary500, textSecondary, borderRadiusLarge, fontBodyMedium, fontBodyLarge, textPrimary, textTertiary } = vars;
+    const { brandPrimary100, transparencySecondary, elementsPrimary, brandPrimary500, textSecondary, borderRadius, fontBodyMedium, fontBodyLarge, textPrimary, textTertiary, elementsTertiary, elementsQuaternary } = vars;
     return {
         itemPaddingSmall: '0 4px',
         itemMarginSmall: '0 0 0 2px',
@@ -56,15 +56,15 @@ export const self = (vars) => {
         itemColor: '#0000',
         itemColorHover: transparencySecondary,
         itemColorPressed: transparencySecondary,
-        itemColorActive: '#0000',
-        itemColorActiveHover: transparencySecondary,
+        itemColorActive: brandPrimary100,
+        itemColorActiveHover: brandPrimary100,
         itemColorDisabled: '#0000',
         itemBorder: '0px',
         itemBorderHover: '0px',
         itemBorderPressed: '0px',
         itemBorderActive: '0px',
         itemBorderDisabled: '0px',
-        itemBorderRadius: borderRadiusLarge,
+        itemBorderRadius: borderRadius,
         itemSizeSmall: '24px',
         itemSizeMedium: '32px',
         itemSizeLarge: '40px',
@@ -75,7 +75,9 @@ export const self = (vars) => {
         jumperFontSizeMedium: fontBodyMedium,
         jumperFontSizeLarge: fontBodyLarge,
         jumperTextColor: textPrimary,
-        jumperTextColorDisabled: textTertiary
+        jumperTextColorDisabled: textTertiary,
+        paginationSizePickerBackground: elementsTertiary,
+        paginationSizePickerBorder: elementsQuaternary
     };
 };
 const paginationLight = createTheme({

package/es/spin/styles/light.js

@@ -1,14 +1,14 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { opacityDisabled, elementsPrimary, brandPrimary500, fontBodyMedium, fontBodySmall, fontBodyLarge, fontHeadingSmall, fontHeadingMedium, fontHeadingLarge } = vars;
+    const { opacityDisabled, elementsPrimary, brandPrimary500, fontBodyMedium, fontBodySmall, fontBodyLarge, fontHeadingSmall, fontTitleMedium, fontHeadingLarge } = vars;
     return {
         tertiaryColor: elementsPrimary,
         primaryColor: brandPrimary500,
         fontSize: fontBodyMedium,
         sizeTiny: fontBodySmall,
         sizeSmall: fontBodyLarge,
-        sizeMedium: fontHeadingSmall,
-        sizeLarge: fontHeadingMedium,
+        sizeMedium: fontTitleMedium,
+        sizeLarge: fontHeadingSmall,
         sizeHuge: fontHeadingLarge,
         opacitySpinning: opacityDisabled
     };

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

@@ -44,12 +44,29 @@ declare const _default: import("vue").DefineComponent<{
         '--u-indicator-color': string;
         '--u-indicator-icon-size': string;
         '--u-indicator-index-font-size': string;
+        '--u-indicator-index-font-size--outline': string;
         '--u-indicator-size': string;
+        '--u-indicator-size--dotted': string;
+        '--u-indicator-color--dotted': string;
         '--u-indicator-text-color': string;
+        '--u-indicator-text-color--outline': string;
         '--u-splitor-color': string;
+        '--u-splitor-color--dotted': string;
+        '--u-splitor-color-finish--dotted': string;
         '--u-step-header-font-size': string;
         '--u-step-header-font-weight': string;
         '--u-step-icon-color': string;
+        '--u-step-icon-color--outline': string;
+        '--u-indicator-background-finish--outline': string;
+        '--u-indicator-color-finish--dotted': string;
+        '--u-indicator-icon-size--outline': string;
+        '--u-indicator-border-color-finish--outline': string;
+        '--u-indicator-icon-color--outline': string;
+        '--u-indicator-border-radius--outline': string;
+        '--u-indicator-border-radius-finish--outline': string;
+        '--u-step-height': string;
+        '--u-description-text-color--dotted': string;
+        '--u-step-header-font-size--dotted': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;

package/es/steps/src/Step.js

@@ -1,4 +1,5 @@
 import { h, defineComponent, computed, inject } from 'vue';
+import { defaultVariantConfig, variantConfigs } from './interface';
 import { EditIcon, CheckmarkIcon as FinishedIcon, CloseIcon as ErrorIcon, CheckmarkCircleIcon as HistoryFinishIcon, DismissCircleIcon as HistoryErrorIcon } from '../../_internal/icons';
 import { UIconSwitchTransition, UBaseIcon } from '../../_internal';
 import { call, createKey, resolveSlot, resolveWrappedSlot, throwError } from '../../_utils';
@@ -30,10 +31,17 @@ export default defineComponent({
         const noIconRef = computed(() => props.noIcon);
         const variantBehaviors = computed(() => {
             const variant = variantRef.value;
+            const { vertical } = stepsProps;
+            const variantConfig = variantConfigs[variant] || {};
+            const config = Object.assign(Object.assign({}, defaultVariantConfig), variantConfig);
+            const isVertical = variantConfig.vertical !== undefined
+                ? variantConfig.vertical
+                : Boolean(vertical);
             return {
                 variant,
-                isVerticalOrHistory: stepsProps.vertical || variant === 'history',
-                shouldRenderSplitor: !stepsProps.vertical && variant !== 'history'
+                isVertical,
+                shouldRenderSplitor: config.rendersSplitor,
+                showDescription: config.showDescription
             };
         });
         const mergedStatusRef = computed(() => {
@@ -62,7 +70,7 @@ export default defineComponent({
         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, [createKey('indicatorIconColor', status)]: indicatorIconColor } } = 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, indicatorBackgroundFinishOutline, indicatorIconColorFinishDotted, indicatorIconSizeOutline, indicatorBorderColorFinishOutline, indicatorIconColorOutline, indicatorBorderRadiusOutline, indicatorBorderRadiusFinishOutline, stepHeight, indicatorSizeDotted, descriptionTextColorDotted, stepHeaderFontSizeLarge, splitorColorFinishDotted, indicatorColorDotted, splitorColorDotted, indicatorIndexFontSizeMedium } } = mergedThemeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-description-text-color': descriptionTextColor,
@@ -71,12 +79,29 @@ export default defineComponent({
                 '--u-indicator-color': indicatorColor,
                 '--u-indicator-icon-size': indicatorIconSize,
                 '--u-indicator-index-font-size': indicatorIndexFontSize,
+                '--u-indicator-index-font-size--outline': indicatorIndexFontSizeMedium,
                 '--u-indicator-size': indicatorSize,
+                '--u-indicator-size--dotted': indicatorSizeDotted,
+                '--u-indicator-color--dotted': indicatorColorDotted,
                 '--u-indicator-text-color': indicatorTextColor,
+                '--u-indicator-text-color--outline': headerTextColor,
                 '--u-splitor-color': splitorColor,
+                '--u-splitor-color--dotted': splitorColorDotted,
+                '--u-splitor-color-finish--dotted': splitorColorFinishDotted,
                 '--u-step-header-font-size': stepHeaderFontSize,
                 '--u-step-header-font-weight': stepHeaderFontWeight,
-                '--u-step-icon-color': indicatorIconColor
+                '--u-step-icon-color': indicatorIconColor,
+                '--u-step-icon-color--outline': headerTextColor,
+                '--u-indicator-background-finish--outline': indicatorBackgroundFinishOutline,
+                '--u-indicator-color-finish--dotted': indicatorIconColorFinishDotted,
+                '--u-indicator-icon-size--outline': indicatorIconSizeOutline,
+                '--u-indicator-border-color-finish--outline': indicatorBorderColorFinishOutline,
+                '--u-indicator-icon-color--outline': indicatorIconColorOutline,
+                '--u-indicator-border-radius--outline': indicatorBorderRadiusOutline,
+                '--u-indicator-border-radius-finish--outline': indicatorBorderRadiusFinishOutline,
+                '--u-step-height': stepHeight,
+                '--u-description-text-color--dotted': descriptionTextColorDotted,
+                '--u-step-header-font-size--dotted': stepHeaderFontSizeLarge
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -111,6 +136,16 @@ export default defineComponent({
                 finish: () => renderFinishIcon(),
                 error: () => renderErrorIcon(),
                 default: () => resolveWrappedSlot(slots.icon, (icon) => icon || renderInternalIndex())
+            },
+            outline: {
+                finish: () => renderFinishIcon('outline'),
+                error: () => renderErrorIcon('outline'),
+                default: () => resolveWrappedSlot(slots.icon, (icon) => icon || renderInternalIndex())
+            },
+            dotted: {
+                finish: () => null,
+                error: () => null,
+                default: () => null
             }
         };
         const renderIcon = () => {
@@ -123,18 +158,32 @@ export default defineComponent({
             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)])
+            default: () => {
+                switch (variant) {
+                    case 'history':
+                        return resolveSlot(stepsSlots['finish-icon'], () => [
+                            h(HistoryFinishIcon, null)
+                        ]);
+                    default:
+                        return 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)])
+            default: () => {
+                switch (variant) {
+                    case 'history':
+                        return resolveSlot(stepsSlots['error-icon'], () => [
+                            h(HistoryErrorIcon, null)
+                        ]);
+                    default:
+                        return resolveSlot(stepsSlots['error-icon'], () => [
+                            h(ErrorIcon, null)
+                        ]);
+                }
+            }
         }));
         const renderHistoryIcon = () => (h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "history" }, {
             default: () => resolveSlot(stepsSlots['history-icon'], () => [h(EditIcon, null)])
@@ -156,13 +205,15 @@ export default defineComponent({
     },
     render() {
         const { mergedClsPrefix, onRender, handleStepClick, disabled, renderIcon, variantBehaviors, noIcon } = this;
-        const descriptionNode = resolveWrappedSlot(this.$slots.default, (children) => {
-            const mergedDescription = children || this.description;
-            if (mergedDescription) {
-                return (h("div", { class: `${mergedClsPrefix}-step-content__description` }, mergedDescription));
-            }
-            return null;
-        });
+        const descriptionNode = variantBehaviors.showDescription
+            ? resolveWrappedSlot(this.$slots.default, (children) => {
+                const mergedDescription = children || this.description;
+                if (mergedDescription) {
+                    return (h("div", { class: `${mergedClsPrefix}-step-content__description` }, mergedDescription));
+                }
+                return null;
+            })
+            : null;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-step`,
@@ -173,15 +224,20 @@ export default defineComponent({
                 `${mergedClsPrefix}-step--${this.mergedStatus}-status`,
                 `${mergedClsPrefix}-step--${this.variant}-variant`
             ], style: this.cssVars, onClick: handleStepClick },
-            variantBehaviors.isVerticalOrHistory || !noIcon ? (h("div", { class: `${mergedClsPrefix}-step-indicator` },
+            !noIcon ? (h("div", { class: `${mergedClsPrefix}-step-indicator` },
                 h("div", { class: `${mergedClsPrefix}-step-indicator-slot` },
                     h(UIconSwitchTransition, null, { default: renderIcon })),
-                variantBehaviors.isVerticalOrHistory ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null)) : null,
+                variantBehaviors.isVertical &&
+                    variantBehaviors.shouldRenderSplitor ? (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${noIcon ? '--column' : ''}` },
                     h("div", { class: `${mergedClsPrefix}-step-content-header__title` }, resolveSlot(this.$slots.title, () => [this.title])),
-                    noIcon && variantBehaviors.shouldRenderSplitor ? (h("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` })) : null,
-                    !noIcon && variantBehaviors.shouldRenderSplitor ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
+                    noIcon &&
+                        !variantBehaviors.isVertical &&
+                        variantBehaviors.shouldRenderSplitor ? (h("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` })) : null,
+                    !noIcon &&
+                        variantBehaviors.shouldRenderSplitor &&
+                        !variantBehaviors.isVertical ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
                 descriptionNode)));
     }
 });