@uzum-tech/ui 1.4.2 → 1.5.1

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

@@ -1,13 +1,21 @@
 import { VNodeChild } from 'vue';
 import { MaybeArray } from '../../_utils';
 export type StepsStatus = 'process' | 'finish' | 'error' | 'wait';
-export type StepsVariant = 'default' | 'history';
+export type StepsVariant = 'default' | 'history' | 'outline' | 'dotted';
 export type OnUpdateValue = MaybeArray<(current: number) => void>;
+export interface VariantConfig {
+    rendersSplitor?: boolean;
+    vertical?: boolean;
+    showDescription?: boolean;
+}
+export declare const defaultVariantConfig: Required<VariantConfig>;
+export declare const variantConfigs: Partial<Record<StepsVariant, VariantConfig>>;
 export type IconRenderer = {
     [K in StepsVariant]: Record<string, () => VNodeChild | null>;
 };
 export interface VariantBehaviors {
     variant: StepsVariant;
-    isVerticalOrHistory: boolean;
+    isVertical: boolean;
     shouldRenderSplitor: boolean;
+    showDescription: boolean;
 }

package/es/steps/src/interface.js

@@ -1 +1,10 @@
-export {};
+export const defaultVariantConfig = {
+    rendersSplitor: true,
+    vertical: false,
+    showDescription: true
+};
+export const variantConfigs = {
+    history: { vertical: true, rendersSplitor: true },
+    outline: { rendersSplitor: false, showDescription: false },
+    dotted: { rendersSplitor: true, showDescription: true }
+};

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

@@ -14,16 +14,117 @@ import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.c
 // --u-step-header-font-size
 // --u-step-header-font-weight
 // --u-step-icon-color
+// --u-indicator-border-radius--outline
+// --u-indicator-border-radius-finish--outline
+// --u-indicator-background-finish--outline
+// --u-indicator-icon-color--outline
+// --u-indicator-icon-color-finish--outline
+// --u-indicator-icon-size--outline
+// --u-indicator-index-font-size--outline
+// --u-step-header-font-size--dotted
+// --u-description-text-color--dotted
+// --u-indicator-color--dotted
+// --u-splitor-color--dotted
+// --u-splitor-color-finish--dotted
+// --u-indicator-size--dotted
+// --u-indicator-color-finish--dotted
 export default cB('steps', `
  width: 100%;
  display: flex;
-`, [cB('step', `
+`, [cM('outline-variant', `
+ gap: 16px;
+ width: fit-content;
+ `), cB('step', `
  position: relative;
  display: flex;
  flex: 1;
  `, [cM('disabled', 'cursor: not-allowed'), cM('clickable', `
  cursor: pointer;
- `), c('&:last-child', [cB('step-splitor', 'display: none;')])]), cB('step-splitor', `
+ `), c('&:last-child', [cB('step-splitor', 'display: none;')]), cM('outline-variant', [c('&', `
+ box-shadow: 0 0 0 2px var(--u-splitor-color);
+ display: flex;
+ height: var(--u-step-height);
+ padding: 0 12px 0 8px;
+ align-items: center;
+ gap: 12px; 
+ border-radius: var(--u-indicator-border-radius--outline);
+ `), cB('step-content-header', `
+ margin: 0px;
+ `), c('>', [cB('step-indicator', `
+ box-shadow: none;
+ border: none;
+ `, [cB('step-indicator-slot', `
+ `, [cE('index', `
+ font-size: var(--u-indicator-index-font-size--outline);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `), cB('base-icon', `
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `)])])]), cM('process-status', [cB('step-indicator', `
+ background-color: var(--u-indicator-icon-color--outline);
+ `, [cB('step-indicator-slot', [cE('index', `
+ color: var(--u-indicator-text-color--outline);
+ `), cB('base-icon', `
+ color: var(--u-indicator-icon-color--outline);
+ `)])])]), cM('finish-status', [`
+ box-shadow: 0 0 0 2px var(--u-indicator-border-color-finish--outline);
+ `, c('>', [cB('step-indicator', `
+ border-radius: var(--u-indicator-border-radius-finish--outline);
+ background-color: var(--u-indicator-background-finish--outline);
+ `, [cB('step-indicator-slot', `
+ height: var(--u-indicator-icon-size--outline);
+ width: var(--u-indicator-icon-size--outline);
+ font-size: var(--u-indicator-icon-size--outline);
+ line-height: var(--u-indicator-icon-size--outline);
+ `, [cB('base-icon', `
+ color: var(--u-indicator-icon-color-finish--outline);
+ `)])])])])]), cM('dotted-variant', [c('&', `
+ align-items: baseline;
+ `, [cM('process-status', [cB('step-indicator', [cB('step-indicator-slot', `
+ background-color: var(--u-indicator-color);
+ `), cB('step-splitor', `
+ background-color: var(--u-indicator-color);
+ `)])]), cM('finish-status', [cB('step-indicator', [cB('step-indicator-slot', `
+ background-color: var(--u-indicator-color-finish--dotted);
+ `), cB('step-splitor', `
+ background-color: var(--u-splitor-color-finish--dotted);
+ `)])]), cM('error-status', [cB('step-indicator', [cB('step-indicator-slot', `
+ background-color: var(--u-indicator-color);
+ `), cB('step-splitor', `
+ background-color: var(--u-splitor-color);
+ `)])])]), cB('step', `
+ align-items: baseline;
+ `), cB('step-indicator', `
+ background-color: transparent;
+ box-shadow: none;
+ width: var(--u-indicator-size--dotted);
+ height: var(--u-indicator-size--dotted);
+ `, [cB('step-indicator-slot', `
+ background-color: var(--u-indicator-color--dotted);
+ border-radius: 50%;
+ height: 10px;
+ width: 10px;
+ `)]), cB('step-content', `
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ margin-left: 6px;
+ `, [cB('step-content-header', `
+ margin: 0;
+ font-size: var(--u-step-header-font-size--dotted);
+ font-weight: 500;
+ `), cE('description', `
+ margin-left: 0;
+ color: var(--u-description-text-color--dotted);
+ font-size: var(--u-step-header-font-size--dotted);
+ font-weight: 500;
+ line-height: 24px;
+ `)])])]), cB('step-splitor', `
  background-color: var(--u-splitor-color);
  margin-top: calc(var(--u-step-header-font-size) / 2);
  height: 6px;
@@ -137,4 +238,15 @@ export default cB('steps', `
  margin: 0 !important;
  left: calc(var(--u-indicator-size) / 2);
  height: calc(100% - var(--u-indicator-size));
- `)])]), cB('step-content', [cE('description', 'margin-top: 8px;')])])])])])]);
+ `)])]), cB('step-content', [cE('description', 'margin-top: 8px;')])])])]), cM('outline-variant', [c('>', [cB('step', `
+ margin: 0;
+ padding: 0 12px 0 8px;
+ height: var(--u-step-height);
+ flex: auto;
+ `)])]), cM('dotted-variant', [c('>', [cB('step', [cB('step-splitor', `
+ background-color: var(--u-splitor-color--dotted);
+ bottom: -8px;
+ width: 2px;
+ left: calc(var(--u-indicator-size--dotted) / 2 - 1px);
+ height: calc(100% - var(--u-indicator-size--dotted)/2 - 10px);
+ `)])])])])]);

package/es/steps/styles/light.d.ts

@@ -3,16 +3,21 @@ import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
     stepHeaderFontSizeSmall: string;
     stepHeaderFontSizeMedium: string;
+    stepHeaderFontSizeLarge: string;
     indicatorIndexFontSizeSmall: string;
     indicatorIndexFontSizeMedium: string;
     indicatorSizeSmall: string;
     indicatorSizeMedium: string;
+    indicatorSizeDotted: string;
     indicatorIconSizeSmall: string;
     indicatorIconSizeMedium: string;
+    indicatorIconSizeOutline: string;
     indicatorIconColorProcess: string;
     indicatorIconColorWait: string;
     indicatorIconColorFinish: string;
     indicatorIconColorError: string;
+    indicatorIconColorOutline: string;
+    indicatorIconColorFinishDotted: string;
     stepHeaderFontWeight: string;
     indicatorTextColorProcess: string;
     indicatorTextColorWait: string;
@@ -22,22 +27,31 @@ export declare const self: (vars: ThemeCommonVars) => {
     indicatorBorderColorWait: string;
     indicatorBorderColorFinish: string;
     indicatorBorderColorError: string;
+    indicatorBorderColorFinishOutline: string;
+    indicatorBorderRadiusOutline: string;
+    indicatorBorderRadiusFinishOutline: string;
     indicatorColorProcess: string;
     indicatorColorWait: string;
     indicatorColorFinish: string;
     indicatorColorError: string;
+    indicatorColorDotted: string;
+    indicatorBackgroundFinishOutline: string;
     splitorColorProcess: string;
     splitorColorWait: string;
     splitorColorFinish: string;
     splitorColorError: string;
+    splitorColorFinishDotted: string;
+    splitorColorDotted: string;
     headerTextColorProcess: string;
     headerTextColorWait: string;
     headerTextColorFinish: string;
     headerTextColorError: string;
     descriptionTextColorProcess: string;
     descriptionTextColorWait: string;
+    descriptionTextColorDotted: string;
     descriptionTextColorFinish: string;
     descriptionTextColorError: string;
+    stepHeight: string;
 };
 export type StepsThemeVars = ReturnType<typeof self>;
 declare const stepsLight: Theme<'Steps', StepsThemeVars>;

package/es/steps/styles/light.js

@@ -1,19 +1,24 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { fontWeightStrong, fontBodySmall, fontBodyMedium, fontBodyLarge, textPrimary, brandPrimary500, staticRed, elementsTertiary, brandPrimary300, textSecondary, staticWhite, staticGreen } = vars;
+    const { fontWeightStrong, fontBodySmall, fontBodyMedium, fontBodyLarge, textPrimary, brandPrimary500, staticRed, elementsTertiary, brandPrimary300, textSecondary, staticWhite, staticGreen, brandPrimary50, elementsQuaternary, borderRadius, heightSmall, borderRadiusSmall } = vars;
     return {
         stepHeaderFontSizeSmall: fontBodySmall,
         stepHeaderFontSizeMedium: fontBodyMedium,
+        stepHeaderFontSizeLarge: fontBodyLarge,
         indicatorIndexFontSizeSmall: fontBodyMedium,
         indicatorIndexFontSizeMedium: fontBodyLarge,
         indicatorSizeSmall: '22px',
         indicatorSizeMedium: '28px',
+        indicatorSizeDotted: '24px',
         indicatorIconSizeSmall: '14px',
         indicatorIconSizeMedium: '18px',
+        indicatorIconSizeOutline: '12px',
         indicatorIconColorProcess: textPrimary,
         indicatorIconColorWait: textSecondary,
         indicatorIconColorFinish: staticGreen,
         indicatorIconColorError: staticRed,
+        indicatorIconColorOutline: elementsTertiary,
+        indicatorIconColorFinishDotted: brandPrimary500,
         stepHeaderFontWeight: fontWeightStrong,
         indicatorTextColorProcess: staticWhite,
         indicatorTextColorWait: textSecondary,
@@ -23,22 +28,31 @@ export const self = (vars) => {
         indicatorBorderColorWait: elementsTertiary,
         indicatorBorderColorFinish: brandPrimary300,
         indicatorBorderColorError: staticRed,
+        indicatorBorderColorFinishOutline: elementsQuaternary,
+        indicatorBorderRadiusOutline: borderRadius,
+        indicatorBorderRadiusFinishOutline: borderRadiusSmall,
         indicatorColorProcess: brandPrimary500,
         indicatorColorWait: elementsTertiary,
         indicatorColorFinish: brandPrimary300,
         indicatorColorError: staticRed,
+        indicatorColorDotted: brandPrimary50,
+        indicatorBackgroundFinishOutline: brandPrimary50,
         splitorColorProcess: brandPrimary500,
         splitorColorWait: elementsTertiary,
         splitorColorFinish: brandPrimary300,
         splitorColorError: staticRed,
+        splitorColorFinishDotted: brandPrimary500,
+        splitorColorDotted: brandPrimary50,
         headerTextColorProcess: textPrimary,
         headerTextColorWait: textSecondary,
         headerTextColorFinish: textPrimary,
         headerTextColorError: staticRed,
         descriptionTextColorProcess: textPrimary,
         descriptionTextColorWait: textSecondary,
+        descriptionTextColorDotted: textSecondary,
         descriptionTextColorFinish: textPrimary,
-        descriptionTextColorError: staticRed
+        descriptionTextColorError: staticRed,
+        stepHeight: heightSmall
     };
 };
 const stepsLight = {

package/es/theme-editor/src/ThemeEditor.d.ts

@@ -72,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         shadowDepth: string;
         fontFamily: string;
         fontFamilyMono: string;
+        fontFamilyWixMadeforDisplay: string;
         cubicBezierEaseInOut: string;
         cubicBezierEaseOut: string;
         cubicBezierEaseIn: string;
@@ -120,6 +121,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         closeLarge: string;
         closeHuge: string;
         closeBorderRadius: string;
+        codeBorder: string;
         name: "common";
     }>;
     theme: import("vue").ComputedRef<GlobalThemeOverrides>;

package/es/themes/dark.js

@@ -85,10 +85,12 @@ import { watermarkDark } from '../watermark/styles';
 import { toggleButtonDark } from '../toggle-button/styles';
 import { accountOptionDark } from '../_internal/account-option/styles';
 import { flexDark } from '../flex/styles';
+import { actionCardDark } from '../action-card/styles';
 export const darkTheme = {
     name: 'dark',
     common: commonDark,
     AccountOption: accountOptionDark,
+    ActionCard: actionCardDark,
     Alert: alertDark,
     Anchor: anchorDark,
     AutoComplete: autoCompleteDark,

package/es/themes/light.js

@@ -87,10 +87,12 @@ import { watermarkLight } from '../watermark/styles';
 import { toggleButtonLight } from '../toggle-button/styles';
 import { accountOptionLight } from '../_internal/account-option/styles';
 import { flexLight } from '../flex/styles';
+import { actionCardLight } from '../action-card/styles';
 export const lightTheme = {
     name: 'light',
     common: commonLight,
     AccountOption: accountOptionLight,
+    ActionCard: actionCardLight,
     Alert: alertLight,
     Anchor: anchorLight,
     AutoComplete: autoCompleteLight,

package/es/toggle-button/src/ToggleButton.d.ts

@@ -17,6 +17,10 @@ export declare const toggleButtonProps: {
         type: PropType<"default" | "primary">;
         default: string;
     };
+    iconPosition: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
     size: PropType<"small" | "medium" | "large">;
     checked: {
         type: PropType<boolean | string | number | undefined>;
@@ -183,6 +187,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"default" | "primary">;
         default: string;
     };
+    iconPosition: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
     size: PropType<"small" | "medium" | "large">;
     checked: {
         type: PropType<boolean | string | number | undefined>;
@@ -391,6 +399,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"default" | "primary">;
         default: string;
     };
+    iconPosition: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
     size: PropType<"small" | "medium" | "large">;
     checked: {
         type: PropType<boolean | string | number | undefined>;
@@ -547,5 +559,6 @@ declare const _default: import("vue").DefineComponent<{
     checkedValue: string | number | boolean;
     uncheckedValue: string | number | boolean;
     viewType: "default" | "primary";
+    iconPosition: "top" | "bottom";
 }, {}>;
 export default _default;

package/es/toggle-button/src/ToggleButton.js

@@ -14,6 +14,9 @@ export const toggleButtonProps = Object.assign(Object.assign(Object.assign({}, u
     }, viewType: {
         type: String,
         default: 'default'
+    }, iconPosition: {
+        type: String,
+        default: 'top'
     } });
 export default defineComponent({
     name: 'ToggleButton',
@@ -97,9 +100,9 @@ export default defineComponent({
     },
     render() {
         var _a, _b, _c;
-        const { $slots, mergedClsPrefix, onRender, description, title, footer, mergedChecked, isCheckbox, mergedDisabled } = this;
+        const { $slots, mergedClsPrefix, onRender, description, title, footer, mergedChecked, isCheckbox, mergedDisabled, iconPosition } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
-        const iconNode = (h("div", { class: `${mergedClsPrefix}-toggle-button__icon` }, resolveSlot($slots.icon, () => [
+        const iconNode = (h("div", { class: `${mergedClsPrefix}-toggle-button__icon ${mergedClsPrefix}-toggle-button__icon--position-${iconPosition}` }, resolveSlot($slots.icon, () => [
             h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(Checkmark, null) })
         ])));
         const titleNode = (title || $slots.header) && (h("div", { class: `${mergedClsPrefix}-toggle-button__title` }, ((_a = $slots.header) === null || _a === void 0 ? void 0 : _a.call($slots)) || title));

package/es/toggle-button/src/styles/toggle-button.cssr.js

@@ -49,6 +49,9 @@ export default cB('toggle-button', `
  font-size: var(--u-icon-size);
  `), cB('icon', `
  font-size: var(--u-icon-size);
+ `), cM('position-bottom', `
+ bottom: 0;
+ top: auto;
  `)]), cE('input', `
  opacity: 0;
  pointer-events: none;

package/es/typography/src/a.d.ts

@@ -26,6 +26,7 @@ export declare const aProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -47,6 +48,8 @@ export declare const aProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -92,6 +95,7 @@ export declare const aProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -113,6 +117,8 @@ export declare const aProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -158,6 +164,7 @@ export declare const aProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -179,6 +186,8 @@ export declare const aProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -227,6 +236,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -248,6 +258,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -293,6 +305,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -314,6 +327,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -359,6 +374,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -380,6 +396,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -434,6 +452,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -455,6 +474,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -500,6 +521,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -521,6 +543,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -566,6 +590,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -587,6 +612,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;

package/es/typography/src/a.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed } from 'vue';
+import { h, defineComponent, computed, warn } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { typographyLight } from '../styles';
 import style from './styles/a.cssr';
@@ -7,6 +7,9 @@ export default defineComponent({
     name: 'A',
     props: aProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            warn('a', 'A component is deprecated, you should use `UText` instead.');
+        }
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Typography', '-a', style, typographyLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {