@uzum-tech/ui 0.1.2 → 1.0.0

package/lib/modal/src/Modal.js

@@ -23,7 +23,7 @@ exports.modalProps = Object.assign(Object.assign(Object.assign(Object.assign({},
     }, maskClosable: {
         type: Boolean,
         default: true
-    }, preset: String, to: [String, Object], displayDirective: {
+    }, to: [String, Object], displayDirective: {
         type: String,
         default: 'if'
     }, transformOrigin: {
@@ -181,12 +181,14 @@ exports.default = (0, vue_1.defineComponent)({
             transformOriginRef: (0, vue_1.toRef)(props, 'transformOrigin')
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseOut }, self: { boxShadow, color, textColor } } = themeRef.value;
+            const { size } = props;
+            const { common: { cubicBezierEaseOut }, self: { color, textColor, [(0, _utils_1.createKey)('size', size)]: width, modalMask } } = themeRef.value;
             return {
                 '--u-bezier-ease-out': cubicBezierEaseOut,
-                '--u-box-shadow': boxShadow,
                 '--u-color': color,
-                '--u-text-color': textColor
+                '--u-text-color': textColor,
+                '--u-modal-size': width,
+                '--u-modal-mask': modalMask
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -227,7 +229,7 @@ exports.default = (0, vue_1.defineComponent)({
                         this.themeClass,
                         this.namespace
                     ], style: this.cssVars },
-                    (0, vue_1.h)(BodyWrapper_1.default, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: "bodyWrapper", displayDirective: this.displayDirective, show: this.show, preset: this.preset, autoFocus: this.autoFocus, trapFocus: this.trapFocus, blockScroll: this.blockScroll }, this.presetProps, { onEsc: this.handleEsc, onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: unstableShowMask ? undefined : this.handleClickoutside, renderMask: unstableShowMask
+                    (0, vue_1.h)(BodyWrapper_1.default, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: "bodyWrapper", displayDirective: this.displayDirective, show: this.show, autoFocus: this.autoFocus, trapFocus: this.trapFocus, blockScroll: this.blockScroll }, this.presetProps, { onEsc: this.handleEsc, onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: unstableShowMask ? undefined : this.handleClickoutside, renderMask: unstableShowMask
                             ? () => {
                                 var _a;
                                 return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", key: "mask", appear: (_a = this.internalAppear) !== null && _a !== void 0 ? _a : this.isMounted }, {

package/lib/modal/src/presetProps.d.ts

@@ -1,49 +1,37 @@
+import { PropType } from 'vue';
 declare const presetProps: {
-    icon: import("vue").PropType<() => import("vue").VNodeChild>;
+    presetDisabled: BooleanConstructor;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    icon: PropType<() => import("vue").VNodeChild>;
     type: {
-        readonly type: import("vue").PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";
     };
-    title: import("vue").PropType<string | (() => import("vue").VNodeChild)>;
+    title: PropType<string | (() => import("vue").VNodeChild)>;
     closable: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
     negativeText: StringConstructor;
     positiveText: StringConstructor;
-    positiveButtonProps: import("vue").PropType<import("../..").ButtonProps>;
-    negativeButtonProps: import("vue").PropType<import("../..").ButtonProps>;
-    content: import("vue").PropType<string | (() => import("vue").VNodeChild)>;
-    action: import("vue").PropType<() => import("vue").VNodeChild>;
+    positiveButtonProps: PropType<import("../..").ButtonProps>;
+    negativeButtonProps: PropType<import("../..").ButtonProps>;
+    content: PropType<string | (() => import("vue").VNodeChild)>;
+    action: PropType<() => import("vue").VNodeChild>;
+    body: PropType<() => import("vue").VNodeChild>;
     showIcon: {
         readonly type: BooleanConstructor;
-        readonly default: true;
+        readonly default: false;
     };
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
-    iconPlacement: import("vue").PropType<import("../../dialog/src/interface").IconPlacement>;
-    onPositiveClick: import("vue").PropType<(e: MouseEvent) => void>;
-    onNegativeClick: import("vue").PropType<(e: MouseEvent) => void>;
-    onClose: import("vue").PropType<() => void>;
-    contentStyle: import("vue").PropType<string | import("vue").CSSProperties>;
-    headerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
-    headerExtraStyle: import("vue").PropType<string | import("vue").CSSProperties>;
-    footerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
-    embedded: BooleanConstructor;
-    segmented: {
-        readonly type: import("vue").PropType<boolean | import("../../card/src/Card").CardSegmented>;
-        readonly default: false;
-    };
-    size: {
-        readonly type: import("vue").PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
-    hoverable: BooleanConstructor;
-    role: StringConstructor;
-    tag: {
-        readonly type: import("vue").PropType<keyof HTMLElementTagNameMap>;
-        readonly default: "div";
-    };
+    iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    onPositiveClick: PropType<(e: MouseEvent) => void>;
+    onNegativeClick: PropType<(e: MouseEvent) => void>;
+    onClose: PropType<() => void>;
 };
-declare const presetPropsKeys: ("type" | "tag" | "content" | "size" | "icon" | "title" | "role" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "iconPlacement" | "hoverable" | "embedded" | "headerExtraStyle" | "segmented" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];
+declare const presetPropsKeys: ("type" | "body" | "content" | "size" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "closable" | "onClose" | "iconPlacement" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick" | "presetDisabled")[];
 export { presetProps, presetPropsKeys };

package/lib/modal/src/presetProps.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.presetPropsKeys = exports.presetProps = void 0;
 const dialogProps_1 = require("../../dialog/src/dialogProps");
-const Card_1 = require("../../card/src/Card");
 const _utils_1 = require("../../_utils");
-const presetProps = Object.assign(Object.assign({}, Card_1.cardBaseProps), dialogProps_1.dialogProps);
+const presetProps = Object.assign(Object.assign({}, dialogProps_1.dialogProps), { presetDisabled: Boolean, size: {
+        type: String,
+        default: 'medium'
+    } });
 exports.presetProps = presetProps;
 const presetPropsKeys = (0, _utils_1.keysOf)(presetProps);
 exports.presetPropsKeys = presetPropsKeys;

package/lib/modal/src/styles/index.cssr.js

@@ -8,7 +8,6 @@ const fade_in_cssr_1 = require("../../../_styles/transitions/fade-in.cssr");
 const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr");
 // vars:
 // --u-bezier-ease-out
-// --u-box-shadow
 // --u-color
 // --u-text-color
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
@@ -24,7 +23,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
  right: 0;
  top: 0;
  bottom: 0;
- background-color: rgba(0, 0, 0, .4);
+ background-color: var(--u-modal-mask);
  `, [(0, fade_in_cssr_1.fadeInTransition)({
   enterDuration: '.25s',
   leaveDuration: '.25s',
@@ -46,7 +45,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
  align-self: center;
  color: var(--u-text-color);
  margin: auto;
- box-shadow: var(--u-box-shadow);
+ width: var(--u-modal-size, 512px);
  `, [(0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)({
   duration: '.25s',
   enterScale: '.5'

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

@@ -1,22 +1,26 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
+    modalMask: string;
     color: string;
     textColor: string;
-    boxShadow: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    sizeLarge: string;
 };
 export type ModalThemeVars = ReturnType<typeof self>;
 declare const modalLight: import("../../_mixins").Theme<"Modal", {
+    modalMask: string;
     color: string;
     textColor: string;
-    boxShadow: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    sizeLarge: string;
 }, {
     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
     }, any>;
     Dialog: import("../../_mixins").Theme<"Dialog", {
-        fontSize: string;
-        lineHeight: string;
         border: string;
         titleTextColor: string;
         textColor: string;
@@ -26,25 +30,29 @@ declare const modalLight: import("../../_mixins").Theme<"Modal", {
         closeIconColor: string;
         closeIconColorHover: string;
         closeIconColorPressed: string;
-        closeBorderRadius: string;
         iconColor: string;
         iconColorInfo: string;
         iconColorSuccess: string;
         iconColorWarning: string;
         iconColorError: string;
         borderRadius: string;
-        titleFontWeight: string;
         titleFontSize: string;
-        padding: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        subtitleFontSize: string;
+        subtitleFontWeight: string;
+        subtitleLineHeight: string;
+        closeIconSize: string;
+        closeSize: string;
         iconSize: string;
+        padding: string;
         actionSpace: string;
         contentMargin: string;
         iconMargin: string;
         iconMarginIconTop: string;
-        closeSize: string;
-        closeIconSize: string;
         closeMargin: string;
         closeMarginIconTop: string;
+        closeBorderRadius: string;
     }, {
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -72,7 +80,7 @@ declare const modalLight: import("../../_mixins").Theme<"Modal", {
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -259,41 +267,45 @@ declare const modalLight: import("../../_mixins").Theme<"Modal", {
         }, any>;
     }>;
     Card: import("../../_mixins").Theme<"Card", {
-        lineHeight: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        titleLineHeightSmall: string;
+        titleLineHeightMedium: string;
+        titleLineHeightLarge: string;
+        titleLineHeightHuge: string;
+        titleFontWeight: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        lineHeightHuge: string;
+        fontWeight: string;
+        closeIconSize: string;
+        closeSize: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
-        colorEmbeddedModal: string;
-        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
         actionColor: string;
-        titleFontWeight: string;
         closeColorHover: string;
         closeColorPressed: string;
-        closeBorderRadius: string;
         closeIconColor: string;
         closeIconColorHover: string;
         closeIconColorPressed: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
+        closeBorderRadius: string;
         boxShadow: string;
         borderRadius: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
         paddingHuge: string;
-        titleFontSizeSmall: string;
-        titleFontSizeMedium: string;
-        titleFontSizeLarge: string;
-        titleFontSizeHuge: string;
-        closeIconSize: string;
-        closeSize: string;
     }, any>;
 }>;
 export default modalLight;

package/lib/modal/styles/light.js

@@ -7,11 +7,14 @@ const styles_3 = require("../../card/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
-    const { modalColor, textColor2, boxShadow3 } = vars;
+    const { transparencyModal, containerPrimary, textPrimary } = vars;
     return {
-        color: modalColor,
-        textColor: textColor2,
-        boxShadow: boxShadow3
+        modalMask: transparencyModal,
+        color: containerPrimary,
+        textColor: textPrimary,
+        sizeSmall: '512px',
+        sizeMedium: '576px',
+        sizeLarge: '720px'
     };
 };
 exports.self = self;

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

@@ -5,7 +5,7 @@ export declare const notificationProps: {
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"default" | "error" | "primary" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -18,18 +18,19 @@ export declare const notificationProps: {
         readonly type: PropType<() => void>;
         readonly required: true;
     };
+    readonly hideIcon: BooleanConstructor;
     readonly keepAliveOnHover: BooleanConstructor;
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
 };
-export declare const notificationPropKeys: ("type" | "meta" | "content" | "description" | "onMouseenter" | "onMouseleave" | "title" | "action" | "avatar" | "closable" | "onClose" | "keepAliveOnHover")[];
+export declare const notificationPropKeys: ("type" | "meta" | "content" | "description" | "onMouseenter" | "onMouseleave" | "title" | "action" | "avatar" | "closable" | "onClose" | "keepAliveOnHover" | "hideIcon")[];
 export declare const Notification: import("vue").DefineComponent<{
     readonly closable: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"default" | "error" | "primary" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -42,6 +43,7 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly type: PropType<() => void>;
         readonly required: true;
     };
+    readonly hideIcon: BooleanConstructor;
     readonly keepAliveOnHover: BooleanConstructor;
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
@@ -53,16 +55,20 @@ export declare const Notification: import("vue").DefineComponent<{
     cssVars: import("vue").ComputedRef<{
         '--u-color': string;
         '--u-font-size': string;
+        '--u-font-weight': string;
         '--u-text-color': string;
         '--u-description-text-color': string;
+        '--u-description-font-weight': string;
+        '--u-description-line-height': string;
         '--u-action-text-color': string;
         '--u-title-text-color': string;
         '--u-title-font-weight': string;
+        '--u-title-line-height': string;
+        '--u-title-font-size': string;
         '--u-bezier': string;
         '--u-bezier-ease-out': string;
         '--u-bezier-ease-in': string;
         '--u-border-radius': string;
-        '--u-box-shadow': string;
         '--u-close-border-radius': string;
         '--u-close-color-hover': string;
         '--u-close-color-pressed': string;
@@ -79,9 +85,9 @@ export declare const Notification: import("vue").DefineComponent<{
         '--u-padding-right': string;
         '--u-padding-top': string;
         '--u-padding-bottom': string;
-        '--u-title-font-size': string;
         '--u-meta-font-size': string;
         '--u-description-font-size': string;
+        '--u-avatar-size': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -91,7 +97,7 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly type: PropType<"default" | "error" | "primary" | "info" | "success" | "warning">;
         readonly default: "default";
     };
     readonly avatar: PropType<() => VNodeChild>;
@@ -104,11 +110,13 @@ export declare const Notification: import("vue").DefineComponent<{
         readonly type: PropType<() => void>;
         readonly required: true;
     };
+    readonly hideIcon: BooleanConstructor;
     readonly keepAliveOnHover: BooleanConstructor;
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
 }>>, {
-    readonly type: "default" | "error" | "info" | "success" | "warning";
+    readonly type: "default" | "error" | "primary" | "info" | "success" | "warning";
     readonly closable: boolean;
     readonly keepAliveOnHover: boolean;
+    readonly hideIcon: boolean;
 }, {}>;

package/lib/notification/src/Notification.js

@@ -8,13 +8,6 @@ const _utils_1 = require("../../_utils");
 const _internal_1 = require("../../_internal");
 const _mixins_1 = require("../../_mixins");
 const context_1 = require("./context");
-const iconRenderMap = {
-    info: () => (0, vue_1.h)(icons_1.InfoIcon, null),
-    success: () => (0, vue_1.h)(icons_1.SuccessIcon, null),
-    warning: () => (0, vue_1.h)(icons_1.WarningIcon, null),
-    error: () => (0, vue_1.h)(icons_1.ErrorIcon, null),
-    default: () => null
-};
 exports.notificationProps = {
     closable: {
         type: Boolean,
@@ -34,6 +27,7 @@ exports.notificationProps = {
         type: Function,
         required: true
     },
+    hideIcon: Boolean,
     keepAliveOnHover: Boolean,
     onMouseenter: Function,
     onMouseleave: Function
@@ -50,21 +44,25 @@ exports.Notification = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, _mixins_1.useRtl)('Notification', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { type } = props;
-            const { self: { color, textColor, closeIconColor, closeIconColorHover, closeIconColorPressed, headerTextColor, descriptionTextColor, actionTextColor, borderRadius, headerFontWeight, boxShadow, lineHeight, fontSize, closeMargin, closeSize, width, padding, closeIconSize, closeBorderRadius, closeColorHover, closeColorPressed, titleFontSize, metaFontSize, descriptionFontSize, [(0, _utils_1.createKey)('iconColor', type)]: iconColor }, 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, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed, [(0, _utils_1.createKey)('iconColor', type)]: iconColor, [(0, _utils_1.createKey)('color', type)]: color, [(0, _utils_1.createKey)('textColor', type)]: textColor, [(0, _utils_1.createKey)('closeIconColor', type)]: closeIconColor, [(0, _utils_1.createKey)('closeIconColorHover', type)]: closeIconColorHover, [(0, _utils_1.createKey)('closeIconColorPressed', type)]: closeIconColorPressed, [(0, _utils_1.createKey)('titleTextColor', type)]: titleTextColor, [(0, _utils_1.createKey)('descriptionTextColor', type)]: descriptionTextColor, [(0, _utils_1.createKey)('actionTextColor', type)]: actionTextColor }, common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut } } = mergedThemeRef.value;
             const { left, right, top, bottom } = (0, seemly_1.getPadding)(padding);
             return {
                 '--u-color': color,
                 '--u-font-size': fontSize,
+                '--u-font-weight': fontWeight,
                 '--u-text-color': textColor,
                 '--u-description-text-color': descriptionTextColor,
+                '--u-description-font-weight': descriptionFontWeight,
+                '--u-description-line-height': descriptionLineHeight,
                 '--u-action-text-color': actionTextColor,
-                '--u-title-text-color': headerTextColor,
-                '--u-title-font-weight': headerFontWeight,
+                '--u-title-text-color': titleTextColor,
+                '--u-title-font-weight': titleFontWeight,
+                '--u-title-line-height': titleLineHeight,
+                '--u-title-font-size': titleFontSize,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-bezier-ease-out': cubicBezierEaseOut,
                 '--u-bezier-ease-in': cubicBezierEaseIn,
                 '--u-border-radius': borderRadius,
-                '--u-box-shadow': boxShadow,
                 '--u-close-border-radius': closeBorderRadius,
                 '--u-close-color-hover': closeColorHover,
                 '--u-close-color-pressed': closeColorPressed,
@@ -81,9 +79,9 @@ exports.Notification = (0, vue_1.defineComponent)({
                 '--u-padding-right': right,
                 '--u-padding-top': top,
                 '--u-padding-bottom': bottom,
-                '--u-title-font-size': titleFontSize,
                 '--u-meta-font-size': metaFontSize,
-                '--u-description-font-size': descriptionFontSize
+                '--u-description-font-size': descriptionFontSize,
+                '--u-avatar-size': avatarSize
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -92,7 +90,7 @@ exports.Notification = (0, vue_1.defineComponent)({
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             showAvatar: (0, vue_1.computed)(() => {
-                return props.avatar || props.type !== 'default';
+                return props.avatar || !props.hideIcon;
             }),
             handleCloseClick() {
                 props.onClose();
@@ -117,7 +115,7 @@ exports.Notification = (0, vue_1.defineComponent)({
                         [`${mergedClsPrefix}-notification--show-avatar`]: this.showAvatar
                     }
                 ], style: this.cssVars },
-                this.showAvatar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification__avatar` }, this.avatar ? ((0, _utils_1.render)(this.avatar)) : this.type !== 'default' ? ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconRenderMap[this.type]() })) : null)) : null,
+                this.showAvatar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification__avatar` }, this.avatar ? ((0, _utils_1.render)(this.avatar)) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, () => (0, vue_1.h)(icons_1.InfoOutlineIcon, null))))) : null,
                 this.closable ? ((0, vue_1.h)(_internal_1.UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-notification__close`, onClick: this.handleCloseClick })) : null,
                 (0, vue_1.h)("div", { ref: "bodyRef", class: `${mergedClsPrefix}-notification-main` },
                     this.title ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main__header` }, (0, _utils_1.render)(this.title))) : null,