@uzum-tech/ui 1.8.0 → 1.8.2

package/es/modal/src/Modal.d.ts

@@ -152,16 +152,24 @@ export declare const modalProps: {
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -453,16 +461,24 @@ export declare const modalProps: {
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -754,16 +770,24 @@ export declare const modalProps: {
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -1141,16 +1165,24 @@ declare const _default: import("vue").DefineComponent<{
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -1442,16 +1474,24 @@ declare const _default: import("vue").DefineComponent<{
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -1743,16 +1783,24 @@ declare const _default: import("vue").DefineComponent<{
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -2151,16 +2199,24 @@ declare const _default: import("vue").DefineComponent<{
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -2452,16 +2508,24 @@ declare const _default: import("vue").DefineComponent<{
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -2753,16 +2817,24 @@ declare const _default: import("vue").DefineComponent<{
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;

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

@@ -77,16 +77,24 @@ declare const modalLight: import("../../_mixins").Theme<"Modal", {
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;

package/es/notification/src/Notification.d.ts

@@ -88,6 +88,11 @@ export declare const Notification: import("vue").DefineComponent<{
         '--u-meta-font-size': string;
         '--u-description-font-size': string;
         '--u-avatar-size': string;
+        '--u-icon-wrapper-color': string;
+        '--u-icon-wrapper-pulse-color': string;
+        iconColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;

package/es/notification/src/Notification.js

@@ -1,10 +1,12 @@
 import { h, defineComponent, computed, inject } from 'vue';
 import { getPadding } from 'seemly';
-import { InfoOutlineIcon } from '../../_internal/icons';
+import { SuccessIcon, InfoIcon } from '../../_internal/icons';
 import { createKey, keysOf, render } from '../../_utils';
-import { UBaseIcon, UBaseClose } from '../../_internal';
+import { UBaseClose } from '../../_internal';
 import { useConfig, useThemeClass, useRtl } from '../../_mixins';
 import { notificationProviderInjectionKey } from './context';
+import { UIconWrapper } from '../../icon-wrapper';
+import { UIcon } from '../../icon';
 export const notificationProps = {
     closable: {
         type: Boolean,
@@ -41,7 +43,7 @@ export const Notification = defineComponent({
         const rtlEnabledRef = useRtl('Notification', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { type } = props;
-            const { self: { borderRadius, titleFontWeight, titleLineHeight, lineHeight, fontSize, fontWeight, closeMargin, closeSize, width, padding, closeIconSize, closeBorderRadius, titleFontSize, metaFontSize, descriptionFontSize, descriptionFontWeight, descriptionLineHeight, avatarSize, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed, [createKey('iconColor', type)]: iconColor, [createKey('color', type)]: color, [createKey('textColor', type)]: textColor, [createKey('closeIconColor', type)]: closeIconColor, [createKey('closeIconColorHover', type)]: closeIconColorHover, [createKey('closeIconColorPressed', type)]: closeIconColorPressed, [createKey('titleTextColor', type)]: titleTextColor, [createKey('descriptionTextColor', type)]: descriptionTextColor, [createKey('actionTextColor', type)]: actionTextColor }, common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut } } = mergedThemeRef.value;
+            const { self: { borderRadius, titleFontWeight, titleLineHeight, lineHeight, fontSize, fontWeight, closeMargin, closeSize, width, padding, closeIconSize, closeBorderRadius, titleFontSize, metaFontSize, descriptionFontSize, descriptionFontWeight, descriptionLineHeight, avatarSize, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed, [createKey('iconColor', type)]: iconColor, [createKey('color', type)]: color, [createKey('textColor', type)]: textColor, [createKey('closeIconColor', type)]: closeIconColor, [createKey('closeIconColorHover', type)]: closeIconColorHover, [createKey('closeIconColorPressed', type)]: closeIconColorPressed, [createKey('titleTextColor', type)]: titleTextColor, [createKey('descriptionTextColor', type)]: descriptionTextColor, [createKey('actionTextColor', type)]: actionTextColor, [createKey('iconWrapperColor', type)]: iconWrapperColor, [createKey('iconWrapperPulseColor', type)]: iconWrapperPulseColor }, common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut } } = mergedThemeRef.value;
             const { left, right, top, bottom } = getPadding(padding);
             return {
                 '--u-color': color,
@@ -78,7 +80,12 @@ export const Notification = defineComponent({
                 '--u-padding-bottom': bottom,
                 '--u-meta-font-size': metaFontSize,
                 '--u-description-font-size': descriptionFontSize,
-                '--u-avatar-size': avatarSize
+                '--u-avatar-size': avatarSize,
+                '--u-icon-wrapper-color': iconWrapperColor,
+                '--u-icon-wrapper-pulse-color': iconWrapperPulseColor,
+                iconColor,
+                iconWrapperColor,
+                iconWrapperPulseColor
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -100,7 +107,9 @@ export const Notification = defineComponent({
     },
     render() {
         var _a;
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, cssVars } = this;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const { iconColor, iconWrapperColor, iconWrapperPulseColor } = cssVars;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { class: [`${mergedClsPrefix}-notification-wrapper`, this.themeClass], onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave, style: this.cssVars },
             h("div", { class: [
@@ -112,7 +121,8 @@ export const Notification = defineComponent({
                         [`${mergedClsPrefix}-notification--show-avatar`]: this.showAvatar
                     }
                 ], style: this.cssVars },
-                this.showAvatar ? (h("div", { class: `${mergedClsPrefix}-notification__avatar` }, this.avatar ? (render(this.avatar)) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => h(InfoOutlineIcon, null))))) : null,
+                this.showAvatar ? (this.avatar ? (h("div", { class: `${mergedClsPrefix}-notification__avatar` }, render(this.avatar))) : (h(UIconWrapper, { pulseSize: 52, size: 36, color: iconWrapperColor, pulseColor: iconWrapperPulseColor, variant: "pulse", borderRadius: 60 },
+                    h(UIcon, { color: iconColor, size: 24 }, () => this.type === 'success' ? h(SuccessIcon, null) : h(InfoIcon, null))))) : null,
                 this.closable ? (h(UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-notification__close`, onClick: this.handleCloseClick })) : null,
                 h("div", { ref: "bodyRef", class: `${mergedClsPrefix}-notification-main` },
                     this.title ? (h("div", { class: `${mergedClsPrefix}-notification-main__header` }, render(this.title))) : null,

package/es/notification/src/NotificationContainer.d.ts

@@ -40,6 +40,8 @@ export declare const NotificationContainer: import("vue").DefineComponent<{
             titleTextColor: string;
             descriptionTextColor: string;
             actionTextColor: string;
+            iconWrapperColor: string;
+            iconWrapperPulseColor: string;
             colorSuccess: string;
             iconColorSuccess: string;
             textColorSuccess: string;
@@ -51,6 +53,8 @@ export declare const NotificationContainer: import("vue").DefineComponent<{
             titleTextColorSuccess: string;
             descriptionTextColorSuccess: string;
             actionTextColorSuccess: string;
+            iconWrapperColorSuccess: string;
+            iconWrapperPulseColorSuccess: string;
             colorInfo: string;
             iconColorInfo: string;
             textColorInfo: string;
@@ -62,6 +66,8 @@ export declare const NotificationContainer: import("vue").DefineComponent<{
             titleTextColorInfo: string;
             descriptionTextColorInfo: string;
             actionTextColorInfo: string;
+            iconWrapperColorInfo: string;
+            iconWrapperPulseColorInfo: string;
             colorWarning: string;
             iconColorWarning: string;
             textColorWarning: string;
@@ -73,6 +79,8 @@ export declare const NotificationContainer: import("vue").DefineComponent<{
             titleTextColorWarning: string;
             descriptionTextColorWarning: string;
             actionTextColorWarning: string;
+            iconWrapperColorWarning: string;
+            iconWrapperPulseColorWarning: string;
             colorError: string;
             iconColorError: string;
             textColorError: string;
@@ -84,6 +92,8 @@ export declare const NotificationContainer: import("vue").DefineComponent<{
             titleTextColorError: string;
             descriptionTextColorError: string;
             actionTextColorError: string;
+            iconWrapperColorError: string;
+            iconWrapperPulseColorError: string;
             colorPrimary: string;
             iconColorPrimary: string;
             textColorPrimary: string;
@@ -95,6 +105,8 @@ export declare const NotificationContainer: import("vue").DefineComponent<{
             titleTextColorPrimary: string;
             descriptionTextColorPrimary: string;
             actionTextColorPrimary: string;
+            iconWrapperColorPrimary: string;
+            iconWrapperPulseColorPrimary: string;
             width: string;
             padding: string;
             closeBorderRadius: string;