@uzum-tech/ui 1.4.1 → 1.5.0

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(() => {

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

@@ -27,6 +27,7 @@ export declare const blockquoteProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -48,6 +49,8 @@ export declare const blockquoteProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -93,6 +96,7 @@ export declare const blockquoteProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -114,6 +118,8 @@ export declare const blockquoteProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -159,6 +165,7 @@ export declare const blockquoteProps: {
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -180,6 +187,8 @@ export declare const blockquoteProps: {
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -229,6 +238,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -250,6 +260,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -295,6 +307,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -316,6 +329,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -361,6 +376,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -382,6 +398,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -440,6 +458,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -461,6 +480,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -506,6 +527,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -527,6 +549,8 @@ declare const _default: import("vue").DefineComponent<{
         pTextColor3Depth: string;
         pLineHeight: string;
         pFontSize: string;
+        fontSize: string;
+        lineHeight: string;
         headerBarColor: string;
         headerBarColorPrimary: string;
         headerBarColorInfo: string;
@@ -572,6 +596,7 @@ declare const _default: import("vue").DefineComponent<{
         headerBarWidth5: string;
         headerBarWidth6: string;
         pMargin: string;
+        margin: string;
         liMargin: string;
         olPadding: string;
         ulPadding: string;
@@ -593,6 +618,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/blockquote.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 style from './styles/blockquote.cssr';
 import { typographyLight } from '../styles';
@@ -7,6 +7,9 @@ export default defineComponent({
     name: 'Blockquote',
     props: blockquoteProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            warn('blockquote', 'Blockquote component is deprecated, you should implement Blockquote locally in your component instead.');
+        }
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Typography', '-blockquote', style, typographyLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {