@uzum-tech/ui 1.4.1 → 1.5.0

package/lib/pagination/styles/light.js

@@ -7,7 +7,7 @@ const styles_3 = require("../../input/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 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',
@@ -59,15 +59,15 @@ 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',
@@ -78,7 +78,9 @@ const self = (vars) => {
         jumperFontSizeMedium: fontBodyMedium,
         jumperFontSizeLarge: fontBodyLarge,
         jumperTextColor: textPrimary,
-        jumperTextColorDisabled: textTertiary
+        jumperTextColorDisabled: textTertiary,
+        paginationSizePickerBackground: elementsTertiary,
+        paginationSizePickerBorder: elementsQuaternary
     };
 };
 exports.self = self;

package/lib/spin/styles/light.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 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/lib/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/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 interface_1 = require("./interface");
 const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
@@ -33,10 +34,17 @@ exports.default = (0, vue_1.defineComponent)({
         const noIconRef = (0, vue_1.computed)(() => props.noIcon);
         const variantBehaviors = (0, vue_1.computed)(() => {
             const variant = variantRef.value;
+            const { vertical } = stepsProps;
+            const variantConfig = interface_1.variantConfigs[variant] || {};
+            const config = Object.assign(Object.assign({}, interface_1.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 = (0, vue_1.computed)(() => {
@@ -65,7 +73,7 @@ exports.default = (0, vue_1.defineComponent)({
         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, [(0, _utils_1.createKey)('indicatorIconColor', status)]: indicatorIconColor } } = 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, 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,
@@ -74,12 +82,29 @@ exports.default = (0, vue_1.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
@@ -114,6 +139,16 @@ exports.default = (0, vue_1.defineComponent)({
                 finish: () => renderFinishIcon(),
                 error: () => renderErrorIcon(),
                 default: () => (0, _utils_1.resolveWrappedSlot)(slots.icon, (icon) => icon || renderInternalIndex())
+            },
+            outline: {
+                finish: () => renderFinishIcon('outline'),
+                error: () => renderErrorIcon('outline'),
+                default: () => (0, _utils_1.resolveWrappedSlot)(slots.icon, (icon) => icon || renderInternalIndex())
+            },
+            dotted: {
+                finish: () => null,
+                error: () => null,
+                default: () => null
             }
         };
         const renderIcon = () => {
@@ -126,18 +161,32 @@ exports.default = (0, vue_1.defineComponent)({
             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)(icons_1.CheckmarkCircleIcon, null)
-                ])
-                : (0, _utils_1.resolveSlot)(stepsSlots['finish-icon'], () => [(0, vue_1.h)(icons_1.CheckmarkIcon, null)])
+            default: () => {
+                switch (variant) {
+                    case 'history':
+                        return (0, _utils_1.resolveSlot)(stepsSlots['finish-icon'], () => [
+                            (0, vue_1.h)(icons_1.CheckmarkCircleIcon, null)
+                        ]);
+                    default:
+                        return (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)(icons_1.DismissCircleIcon, null)
-                ])
-                : (0, _utils_1.resolveSlot)(stepsSlots['error-icon'], () => [(0, vue_1.h)(icons_1.CloseIcon, null)])
+            default: () => {
+                switch (variant) {
+                    case 'history':
+                        return (0, _utils_1.resolveSlot)(stepsSlots['error-icon'], () => [
+                            (0, vue_1.h)(icons_1.DismissCircleIcon, null)
+                        ]);
+                    default:
+                        return (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)(icons_1.EditIcon, null)])
@@ -159,13 +208,15 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         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) {
-                return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content__description` }, mergedDescription));
-            }
-            return null;
-        });
+        const descriptionNode = variantBehaviors.showDescription
+            ? (0, _utils_1.resolveWrappedSlot)(this.$slots.default, (children) => {
+                const mergedDescription = children || this.description;
+                if (mergedDescription) {
+                    return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content__description` }, mergedDescription));
+                }
+                return null;
+            })
+            : null;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-step`,
@@ -176,15 +227,20 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-step--${this.mergedStatus}-status`,
                 `${mergedClsPrefix}-step--${this.variant}-variant`
             ], style: this.cssVars, onClick: handleStepClick },
-            variantBehaviors.isVerticalOrHistory || !noIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-indicator` },
+            !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 })),
-                variantBehaviors.isVerticalOrHistory ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null)) : null,
+                variantBehaviors.isVertical &&
+                    variantBehaviors.shouldRenderSplitor ? ((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${noIcon ? '--column' : ''}` },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content-header__title` }, (0, _utils_1.resolveSlot)(this.$slots.title, () => [this.title])),
-                    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),
+                    noIcon &&
+                        !variantBehaviors.isVertical &&
+                        variantBehaviors.shouldRenderSplitor ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` })) : null,
+                    !noIcon &&
+                        variantBehaviors.shouldRenderSplitor &&
+                        !variantBehaviors.isVertical ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
                 descriptionNode)));
     }
 });