@uzum-tech/ui 0.1.2 → 1.0.0

package/es/modal/src/Modal.js

@@ -5,7 +5,7 @@ import { VLazyTeleport } from 'vueuc';
 import { getPreciseEventTarget } from 'seemly';
 import { dialogProviderInjectionKey } from '../../dialog/src/context';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { keep, call, warnOnce, useIsComposing, eventEffectNotPerformed } from '../../_utils';
+import { keep, call, warnOnce, useIsComposing, eventEffectNotPerformed, createKey } from '../../_utils';
 import { modalLight } from '../styles';
 import { presetProps, presetPropsKeys } from './presetProps';
 import UModalBodyWrapper from './BodyWrapper';
@@ -17,7 +17,7 @@ export const modalProps = Object.assign(Object.assign(Object.assign(Object.assig
     }, maskClosable: {
         type: Boolean,
         default: true
-    }, preset: String, to: [String, Object], displayDirective: {
+    }, to: [String, Object], displayDirective: {
         type: String,
         default: 'if'
     }, transformOrigin: {
@@ -175,12 +175,14 @@ export default defineComponent({
             transformOriginRef: toRef(props, 'transformOrigin')
         });
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseOut }, self: { boxShadow, color, textColor } } = themeRef.value;
+            const { size } = props;
+            const { common: { cubicBezierEaseOut }, self: { color, textColor, [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
@@ -221,7 +223,7 @@ export default defineComponent({
                         this.themeClass,
                         this.namespace
                     ], style: this.cssVars },
-                    h(UModalBodyWrapper, 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
+                    h(UModalBodyWrapper, 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 (h(Transition, { name: "fade-in-transition", key: "mask", appear: (_a = this.internalAppear) !== null && _a !== void 0 ? _a : this.isMounted }, {

package/es/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/es/modal/src/presetProps.js

@@ -1,6 +1,8 @@
 import { dialogProps } from '../../dialog/src/dialogProps';
-import { cardBaseProps } from '../../card/src/Card';
 import { keysOf } from '../../_utils';
-const presetProps = Object.assign(Object.assign({}, cardBaseProps), dialogProps);
+const presetProps = Object.assign(Object.assign({}, dialogProps), { presetDisabled: Boolean, size: {
+        type: String,
+        default: 'medium'
+    } });
 const presetPropsKeys = keysOf(presetProps);
 export { presetProps, presetPropsKeys };

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

@@ -3,7 +3,6 @@ import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr';
 import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
 // vars:
 // --u-bezier-ease-out
-// --u-box-shadow
 // --u-color
 // --u-text-color
 export default c([cB('modal-container', `
@@ -19,7 +18,7 @@ export default c([cB('modal-container', `
  right: 0;
  top: 0;
  bottom: 0;
- background-color: rgba(0, 0, 0, .4);
+ background-color: var(--u-modal-mask);
  `, [fadeInTransition({
   enterDuration: '.25s',
   leaveDuration: '.25s',
@@ -41,7 +40,7 @@ export default c([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);
  `, [fadeInScaleUpTransition({
   duration: '.25s',
   enterScale: '.5'

package/es/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/es/modal/styles/light.js

@@ -4,11 +4,14 @@ import { cardLight } from '../../card/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
 export 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'
     };
 };
 const modalLight = createTheme({

package/es/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/es/notification/src/Notification.js

@@ -1,17 +1,10 @@
 import { h, defineComponent, computed, inject } from 'vue';
 import { getPadding } from 'seemly';
-import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
+import { InfoOutlineIcon } from '../../_internal/icons';
 import { createKey, keysOf, render } from '../../_utils';
 import { UBaseIcon, UBaseClose } from '../../_internal';
 import { useConfig, useThemeClass, useRtl } from '../../_mixins';
 import { notificationProviderInjectionKey } from './context';
-const iconRenderMap = {
-    info: () => h(InfoIcon, null),
-    success: () => h(SuccessIcon, null),
-    warning: () => h(WarningIcon, null),
-    error: () => h(ErrorIcon, null),
-    default: () => null
-};
 export const notificationProps = {
     closable: {
         type: Boolean,
@@ -31,6 +24,7 @@ export const notificationProps = {
         type: Function,
         required: true
     },
+    hideIcon: Boolean,
     keepAliveOnHover: Boolean,
     onMouseenter: Function,
     onMouseleave: Function
@@ -47,21 +41,25 @@ export const Notification = defineComponent({
         const rtlEnabledRef = useRtl('Notification', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = 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, [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, [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 { left, right, top, bottom } = 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,
@@ -78,9 +76,9 @@ export const Notification = 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
@@ -89,7 +87,7 @@ export const Notification = defineComponent({
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             showAvatar: computed(() => {
-                return props.avatar || props.type !== 'default';
+                return props.avatar || !props.hideIcon;
             }),
             handleCloseClick() {
                 props.onClose();
@@ -114,7 +112,7 @@ 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)) : this.type !== 'default' ? (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconRenderMap[this.type]() })) : null)) : null,
+                this.showAvatar ? (h("div", { class: `${mergedClsPrefix}-notification__avatar` }, this.avatar ? (render(this.avatar)) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => h(InfoOutlineIcon, 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,