naive-ui 2.28.3 → 2.29.0

package/lib/locales/common/nlNL.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const nlNL = {
+    name: 'nl-NL',
+    global: {
+        undo: 'Ongedaan Maken',
+        redo: 'Opnieuw Doen',
+        confirm: 'Bevestig'
+    },
+    Popconfirm: {
+        positiveText: 'Bevestig',
+        negativeText: 'Annuleer'
+    },
+    Cascader: {
+        placeholder: 'Selecteer a.u.b.',
+        loading: 'Laden',
+        loadingRequiredMessage: (label) => `Laad alle afstammelingen van ${label} alvorens het te selecteren.`
+    },
+    Time: {
+        dateFormat: 'dd/MM/yyyy',
+        dateTimeFormat: 'dd/MM/yyyy HH:mm:ss'
+    },
+    DatePicker: {
+        yearFormat: 'yyyy',
+        monthFormat: 'MMM',
+        dayFormat: 'eeeeee',
+        yearTypeFormat: 'yyyy',
+        monthTypeFormat: 'MM/yyyy',
+        dateFormat: 'dd/MM/yyyy',
+        dateTimeFormat: 'dd/MM/yyyy HH:mm:ss',
+        quarterFormat: 'qqq yyyy',
+        clear: 'Wis',
+        now: 'Nu',
+        confirm: 'Bevestig',
+        selectTime: 'Selecteer Uur',
+        selectDate: 'Selecteer Datum',
+        datePlaceholder: 'Selecteer Datum',
+        datetimePlaceholder: 'Selecteer Dag en Uur',
+        monthPlaceholder: 'Selecteer Maand',
+        yearPlaceholder: 'Selecteer Jaar',
+        quarterPlaceholder: 'Selecteer Kwartaal',
+        startDatePlaceholder: 'Begindatum',
+        endDatePlaceholder: 'Einddatum',
+        startDatetimePlaceholder: 'Begindatum en Uur',
+        endDatetimePlaceholder: 'Einddatum en Uur',
+        startMonthPlaceholder: 'Begin Maand',
+        endMonthPlaceholder: 'Eind Maand',
+        monthBeforeYear: true,
+        firstDayOfWeek: 0,
+        today: 'Vandaag'
+    },
+    DataTable: {
+        checkTableAll: 'Selecteer alles in de tabel',
+        uncheckTableAll: 'Alles in de tabel deselecteren',
+        confirm: 'Bevestig',
+        clear: 'Wis'
+    },
+    Transfer: {
+        sourceTitle: 'Bron',
+        targetTitle: 'Doel'
+    },
+    Empty: {
+        description: 'Geen Data'
+    },
+    Select: {
+        placeholder: 'Selecteer a.u.b.'
+    },
+    TimePicker: {
+        placeholder: 'Selecteer Uur',
+        positiveText: 'OK',
+        negativeText: 'Annuleer',
+        now: 'Nu'
+    },
+    Pagination: {
+        goto: 'Ga naar',
+        selectionSuffix: 'pagina'
+    },
+    DynamicTags: {
+        add: 'Toevoegen'
+    },
+    Log: {
+        loading: 'Laden'
+    },
+    Input: {
+        placeholder: 'Invoeren a.u.b.'
+    },
+    InputNumber: {
+        placeholder: 'Invoeren a.u.b.'
+    },
+    DynamicInput: {
+        create: 'Creëer'
+    },
+    ThemeEditor: {
+        title: 'Thema Bewerker',
+        clearAllVars: 'Wis Alle Variabelen',
+        clearSearch: 'Wis Zoekopdracht',
+        filterCompName: 'Filter Componentsnaam',
+        filterVarName: 'Filter Variablenaam',
+        import: 'Importen',
+        export: 'Exporteren',
+        restore: 'Reset naar Standaard'
+    },
+    Image: {
+        tipPrevious: 'Vorige afbeelding (←)',
+        tipNext: 'Volgende afbeelding (→)',
+        tipCounterclockwise: 'Tegen de klok in',
+        tipClockwise: 'Met de klok mee',
+        tipZoomOut: 'Uitzoomen',
+        tipZoomIn: 'Inzoomen',
+        tipClose: 'Sluiten (Esc)'
+    }
+};
+exports.default = nlNL;

package/lib/locales/date/enUS.d.ts

@@ -1,7 +1,7 @@
-import type { Locale } from 'date-fns';
+import enUS from 'date-fns/locale/en-US';
 interface NDateLocale {
     name: string;
-    locale: Locale;
+    locale: typeof enUS;
 }
 declare const dateEnUs: NDateLocale;
 export { NDateLocale };

package/lib/locales/date/nlNL.d.ts

@@ -0,0 +1,3 @@
+import { NDateLocale } from './enUS';
+declare const dateNlNL: NDateLocale;
+export default dateNlNL;

package/lib/locales/date/nlNL.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const nl_1 = __importDefault(require("date-fns/locale/nl"));
+const dateNlNL = {
+    name: 'nl-NL',
+    locale: nl_1.default
+};
+exports.default = dateNlNL;

package/lib/locales/index.d.ts

@@ -8,6 +8,7 @@ export { default as koKR } from './common/koKR';
 export { default as idID } from './common/idID';
 export { default as deDE } from './common/deDE';
 export { default as nbNO } from './common/nbNO';
+export { default as nlNL } from './common/nlNL';
 export { default as frFR } from './common/frFR';
 export { default as esAR } from './common/esAR';
 export { default as itIT } from './common/itIT';
@@ -27,6 +28,7 @@ export { default as dateKoKR } from './date/koKR';
 export { default as dateIdID } from './date/idID';
 export { default as dateDeDE } from './date/deDE';
 export { default as dateNbNO } from './date/nbNO';
+export { default as dateNlNL } from './date/nlNL';
 export { default as dateFrFR } from './date/frFR';
 export { default as dateEsAR } from './date/esAR';
 export { default as dateItIT } from './date/itIT';

package/lib/locales/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createLocale = exports.dateEo = exports.dateThTH = exports.datePtBR = exports.datePlPL = exports.dateEnGB = exports.dateSkSK = exports.dateItIT = exports.dateEsAR = exports.dateFrFR = exports.dateNbNO = exports.dateDeDE = exports.dateIdID = exports.dateKoKR = exports.dateJaJP = exports.dateUkUA = exports.dateRuRU = exports.dateEnUS = exports.dateZhTW = exports.dateZhCN = exports.eo = exports.thTH = exports.ptBR = exports.plPL = exports.enGB = exports.skSK = exports.itIT = exports.esAR = exports.frFR = exports.nbNO = exports.deDE = exports.idID = exports.koKR = exports.jaJP = exports.ukUA = exports.ruRU = exports.enUS = exports.zhTW = exports.zhCN = void 0;
+exports.createLocale = exports.dateEo = exports.dateThTH = exports.datePtBR = exports.datePlPL = exports.dateEnGB = exports.dateSkSK = exports.dateItIT = exports.dateEsAR = exports.dateFrFR = exports.dateNlNL = exports.dateNbNO = exports.dateDeDE = exports.dateIdID = exports.dateKoKR = exports.dateJaJP = exports.dateUkUA = exports.dateRuRU = exports.dateEnUS = exports.dateZhTW = exports.dateZhCN = exports.eo = exports.thTH = exports.ptBR = exports.plPL = exports.enGB = exports.skSK = exports.itIT = exports.esAR = exports.frFR = exports.nlNL = exports.nbNO = exports.deDE = exports.idID = exports.koKR = exports.jaJP = exports.ukUA = exports.ruRU = exports.enUS = exports.zhTW = exports.zhCN = void 0;
 var zhCN_1 = require("./common/zhCN");
 Object.defineProperty(exports, "zhCN", { enumerable: true, get: function () { return __importDefault(zhCN_1).default; } });
 var zhTW_1 = require("./common/zhTW");
@@ -24,6 +24,8 @@ var deDE_1 = require("./common/deDE");
 Object.defineProperty(exports, "deDE", { enumerable: true, get: function () { return __importDefault(deDE_1).default; } });
 var nbNO_1 = require("./common/nbNO");
 Object.defineProperty(exports, "nbNO", { enumerable: true, get: function () { return __importDefault(nbNO_1).default; } });
+var nlNL_1 = require("./common/nlNL");
+Object.defineProperty(exports, "nlNL", { enumerable: true, get: function () { return __importDefault(nlNL_1).default; } });
 var frFR_1 = require("./common/frFR");
 Object.defineProperty(exports, "frFR", { enumerable: true, get: function () { return __importDefault(frFR_1).default; } });
 var esAR_1 = require("./common/esAR");
@@ -62,6 +64,8 @@ var deDE_2 = require("./date/deDE");
 Object.defineProperty(exports, "dateDeDE", { enumerable: true, get: function () { return __importDefault(deDE_2).default; } });
 var nbNO_2 = require("./date/nbNO");
 Object.defineProperty(exports, "dateNbNO", { enumerable: true, get: function () { return __importDefault(nbNO_2).default; } });
+var nlNL_2 = require("./date/nlNL");
+Object.defineProperty(exports, "dateNlNL", { enumerable: true, get: function () { return __importDefault(nlNL_2).default; } });
 var frFR_2 = require("./date/frFR");
 Object.defineProperty(exports, "dateFrFR", { enumerable: true, get: function () { return __importDefault(frFR_2).default; } });
 var esAR_2 = require("./date/esAR");

package/lib/log/src/Log.d.ts

@@ -345,12 +345,14 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             borderRadiusSmall: string;
             fontSize: string;
+            fontSizeMini: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
             fontSizeHuge: string;
             lineHeight: string;
+            heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;

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

@@ -1,18 +1,12 @@
 "use strict";
 
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
 const cssr_1 = require("../../../_utils/cssr");
 
-const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
+const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr"); // vars:
 // --n-bezier
 // --n-loading-color
 // --n-loader-border
@@ -48,7 +42,7 @@ exports.default = (0, cssr_1.cB)('log', `
  color: var(--n-loader-text-color);
  background-color: var(--n-loader-color);
  font-size: var(--n-loader-font-size);
- `, [(0, fade_in_scale_up_cssr_1.default)(), (0, cssr_1.cE)('content', `
+ `, [(0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)(), (0, cssr_1.cE)('content', `
  display: inline-block;
  vertical-align: bottom;
  line-height: 34px;

package/lib/mention/src/Mention.d.ts

@@ -911,12 +911,14 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             borderRadiusSmall: string;
             fontSize: string;
+            fontSizeMini: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
             fontSizeHuge: string;
             lineHeight: string;
+            heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;

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

@@ -1,20 +1,14 @@
 "use strict";
 
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr"));
+const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr");
 
 const cssr_1 = require("../../../_utils/cssr"); // --n-menu-box-shadow
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('mention', 'width: 100%; z-index: auto; position: relative;'), (0, cssr_1.cB)('mention-menu', `
  box-shadow: var(--n-menu-box-shadow);
- `, [(0, fade_in_scale_up_cssr_1.default)()])]);
+ `, [(0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)()])]);

package/lib/menu/src/Menu.d.ts

@@ -1244,12 +1244,14 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             borderRadiusSmall: string;
             fontSize: string;
+            fontSizeMini: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
             fontSizeHuge: string;
             lineHeight: string;
+            heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;

package/lib/menu/src/MenuOption.d.ts

@@ -138,12 +138,14 @@ export declare const NMenuOption: import("vue").DefineComponent<{
             borderRadius: string;
             borderRadiusSmall: string;
             fontSize: string;
+            fontSizeMini: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
             fontSizeHuge: string;
             lineHeight: string;
+            heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;

package/lib/menu/src/MenuOptionContent.js

@@ -79,7 +79,7 @@ exports.default = (0, vue_1.defineComponent)({
                 },
                 attrs === null || attrs === void 0 ? void 0 : attrs.class
             ], style: [this.style, (attrs === null || attrs === void 0 ? void 0 : attrs.style) || ''] }),
-            icon && ((0, vue_1.h)("div", { class: `${clsPrefix}-menu-item-content__icon`, style: this.iconStyle, role: "none" }, icon)),
+            icon && ((0, vue_1.h)("div", { class: `${clsPrefix}-menu-item-content__icon`, style: this.iconStyle, role: "none" }, [icon])),
             (0, vue_1.h)("div", { class: `${clsPrefix}-menu-item-content-header`, role: "none" },
                 renderLabel ? renderLabel(tmNode.rawNode) : (0, _utils_1.render)(this.title),
                 this.extra || renderExtra ? ((0, vue_1.h)("span", { class: `${clsPrefix}-menu-item-content-header__extra` },

package/lib/menu/src/Submenu.d.ts

@@ -155,12 +155,14 @@ export declare const NSubmenu: import("vue").DefineComponent<{
             borderRadius: string;
             borderRadiusSmall: string;
             fontSize: string;
+            fontSizeMini: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
             fontSizeHuge: string;
             lineHeight: string;
+            heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;

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

@@ -1,18 +1,12 @@
 "use strict";
 
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-const cssr_1 = require("../../../_utils/cssr");
+const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr");
 
-const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
+const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-color
 // --n-group-text-color
 // --n-bezier
@@ -203,7 +197,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  `), (0, cssr_1.cB)('submenu-children', `
  overflow: hidden;
  padding: 0;
- `, [(0, fade_in_height_expand_cssr_1.default)({
+ `, [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
   duration: '.2s'
 })])]), (0, cssr_1.cB)('menu-item-group', [(0, cssr_1.cB)('menu-item-group-title', `
  margin-top: 6px;

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

@@ -1,20 +1,14 @@
 "use strict";
 
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
 const cssr_1 = require("../../../_utils/cssr");
 
-const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr"));
+const icon_switch_cssr_1 = require("../../../_styles/transitions/icon-switch.cssr");
 
-const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
+const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr"); // vars:
 // --n-margin
 // --n-bezier
 // --n-padding
@@ -44,7 +38,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('message-wrapper', `
  z-index: 0;
  transform-origin: top center;
  display: flex;
- `, [(0, fade_in_height_expand_cssr_1.default)({
+ `, [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
   overflow: 'visible',
   originalTransition: 'transform .3s var(--n-bezier)',
   enterToProps: {
@@ -92,7 +86,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('message-wrapper', `
  top: 0;
  right: 0;
  bottom: 0;
- `, [(0, icon_switch_cssr_1.default)()])]), (0, cssr_1.cE)('close', `
+ `, [(0, icon_switch_cssr_1.iconSwitchTransition)()])]), (0, cssr_1.cE)('close', `
  font-size: var(--n-close-size);
  margin: var(--n-close-margin);
  transition: color .3s var(--n-bezier);

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

@@ -173,12 +173,14 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             borderRadiusSmall: string;
             fontSize: string;
+            fontSizeMini: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
             fontSizeHuge: string;
             lineHeight: string;
+            heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;

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

@@ -1,20 +1,14 @@
 "use strict";
 
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
 const cssr_1 = require("../../../_utils/cssr");
 
-const fade_in_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in.cssr"));
+const fade_in_cssr_1 = require("../../../_styles/transitions/fade-in.cssr");
 
-const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
+const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr"); // vars:
 // --n-bezier-ease-out
 // --n-box-shadow
 // --n-color
@@ -35,7 +29,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .4);
- `, [(0, fade_in_cssr_1.default)({
+ `, [(0, fade_in_cssr_1.fadeInTransition)({
   enterDuration: '.25s',
   leaveDuration: '.25s',
   enterCubicBezier: 'var(--n-bezier-ease-out)',
@@ -56,7 +50,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('modal-container', `
  color: var(--n-text-color);
  margin: auto;
  box-shadow: var(--n-box-shadow);
- `, [(0, fade_in_scale_up_cssr_1.default)({
+ `, [(0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)({
   duration: '.25s',
   enterScale: '.5'
 })])]);

package/lib/notification/index.d.ts

@@ -1,3 +1,4 @@
 export { default as NNotificationProvider } from './src/NotificationProvider';
-export type { NotificationProviderProps, NotificationProviderInst, NotificationApiInjection as NotificationApi, NotificationOptions, NotificationReactive, NotificationPlacement, NotificationType } from './src/NotificationProvider';
+export type { NotificationProviderProps, NotificationProviderInst, NotificationApiInjection as NotificationApi, NotificationReactive, NotificationPlacement, NotificationType } from './src/NotificationProvider';
+export type { NotificationOptions } from './src/NotificationEnvironment';
 export { useNotification } from './src/use-notification';

package/lib/notification/src/Notification.js

@@ -95,22 +95,23 @@ exports.Notification = (0, vue_1.defineComponent)({
         var _a;
         const { mergedClsPrefix } = this;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return ((0, vue_1.h)("div", { class: [
-                `${mergedClsPrefix}-notification`,
-                this.themeClass,
-                {
-                    [`${mergedClsPrefix}-notification--closable`]: this.closable,
-                    [`${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.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconRenderMap[this.type]() })) : null)) : null,
-            this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { 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,
-                this.description ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main__description` }, (0, _utils_1.render)(this.description))) : null,
-                this.content ? ((0, vue_1.h)("pre", { class: `${mergedClsPrefix}-notification-main__content` }, (0, _utils_1.render)(this.content))) : null,
-                this.meta || this.action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main-footer` },
-                    this.meta ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main-footer__meta` }, (0, _utils_1.render)(this.meta))) : null,
-                    this.action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main-footer__action` }, (0, _utils_1.render)(this.action))) : null)) : null)));
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-notification-wrapper`, this.themeClass], style: this.cssVars },
+            (0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-notification`,
+                    this.themeClass,
+                    {
+                        [`${mergedClsPrefix}-notification--closable`]: this.closable,
+                        [`${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.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconRenderMap[this.type]() })) : null)) : null,
+                this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { 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,
+                    this.description ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main__description` }, (0, _utils_1.render)(this.description))) : null,
+                    this.content ? ((0, vue_1.h)("pre", { class: `${mergedClsPrefix}-notification-main__content` }, (0, _utils_1.render)(this.content))) : null,
+                    this.meta || this.action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main-footer` },
+                        this.meta ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main-footer__meta` }, (0, _utils_1.render)(this.meta))) : null,
+                        this.action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-notification-main-footer__action` }, (0, _utils_1.render)(this.action))) : null)) : null))));
     }
 });

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

@@ -1,14 +1,16 @@
 import { PropType } from 'vue';
+import type { NotificationPlacement } from './NotificationProvider';
 export declare const NotificationContainer: import("vue").DefineComponent<{
     scrollable: {
         type: BooleanConstructor;
         required: true;
     };
     placement: {
-        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<NotificationPlacement>;
         required: true;
     };
 }, {
+    selfRef: import("vue").Ref<HTMLElement | null>;
     mergedTheme: import("vue").Ref<{
         common: {
             baseColor: string;
@@ -99,12 +101,14 @@ export declare const NotificationContainer: import("vue").DefineComponent<{
             borderRadius: string;
             borderRadiusSmall: string;
             fontSize: string;
+            fontSizeMini: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
             fontSizeHuge: string;
             lineHeight: string;
+            heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
@@ -151,13 +155,14 @@ export declare const NotificationContainer: import("vue").DefineComponent<{
         };
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
+    transitioning: import("vue").Ref<number>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     scrollable: {
         type: BooleanConstructor;
         required: true;
     };
     placement: {
-        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<NotificationPlacement>;
         required: true;
     };
 }>>, {}>;

package/lib/notification/src/NotificationContainer.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationContainer = void 0;
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 const vue_1 = require("vue");
 const _internal_1 = require("../../_internal");
 const context_1 = require("./context");
@@ -17,16 +18,27 @@ exports.NotificationContainer = (0, vue_1.defineComponent)({
         }
     },
     setup() {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { mergedThemeRef, mergedClsPrefixRef } = (0, vue_1.inject)(context_1.notificationProviderInjectionKey);
+        const { mergedThemeRef, mergedClsPrefixRef, wipTransitionCountRef } = (0, vue_1.inject)(context_1.notificationProviderInjectionKey);
+        const selfRef = (0, vue_1.ref)(null);
+        (0, vue_1.watchEffect)(() => {
+            var _a, _b;
+            if (wipTransitionCountRef.value > 0) {
+                (_a = selfRef === null || selfRef === void 0 ? void 0 : selfRef.value) === null || _a === void 0 ? void 0 : _a.classList.add('transitioning');
+            }
+            else {
+                (_b = selfRef === null || selfRef === void 0 ? void 0 : selfRef.value) === null || _b === void 0 ? void 0 : _b.classList.remove('transitioning');
+            }
+        });
         return {
+            selfRef,
             mergedTheme: mergedThemeRef,
-            mergedClsPrefix: mergedClsPrefixRef
+            mergedClsPrefix: mergedClsPrefixRef,
+            transitioning: wipTransitionCountRef
         };
     },
     render() {
         const { $slots, scrollable, mergedClsPrefix, mergedTheme, placement } = this;
-        return ((0, vue_1.h)("div", { class: [
+        return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-notification-container`,
                 scrollable && `${mergedClsPrefix}-notification-container--scrollable`,
                 `${mergedClsPrefix}-notification-container--${placement}`

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 export declare const notificationEnvOptions: {
     readonly duration: NumberConstructor;
     readonly onClose: PropType<() => Promise<boolean> | boolean | any>;
@@ -26,6 +26,7 @@ export declare const notificationEnvOptions: {
     readonly meta: PropType<string | (() => import("vue").VNodeChild)>;
     readonly action: PropType<string | (() => import("vue").VNodeChild)>;
 };
+export declare type NotificationOptions = Partial<ExtractPropTypes<typeof notificationEnvOptions>>;
 export declare const NotificationEnvironment: import("vue").DefineComponent<{
     internalKey: {
         type: StringConstructor;
@@ -66,7 +67,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<{
     handleBeforeLeave: (el: HTMLElement) => void;
     handleAfterEnter: (el: HTMLElement) => void;
     handleBeforeEnter: (el: HTMLElement) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     internalKey: {
         type: StringConstructor;
         required: true;