naive-ui 2.28.3 → 2.29.0

package/lib/notification/src/NotificationEnvironment.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationEnvironment = exports.notificationEnvOptions = void 0;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
+const context_1 = require("./context");
 const Notification_1 = require("./Notification");
 exports.notificationEnvOptions = Object.assign(Object.assign({}, Notification_1.notificationProps), { duration: Number, onClose: Function, onLeave: Function, onAfterEnter: Function, onAfterLeave: Function, 
     /** @deprecated */
@@ -23,6 +24,9 @@ exports.NotificationEnvironment = (0, vue_1.defineComponent)({
             required: true
         } }),
     setup(props) {
+        const { wipTransitionCountRef
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+         } = (0, vue_1.inject)(context_1.notificationProviderInjectionKey);
         const showRef = (0, vue_1.ref)(true);
         let timerId = null;
         function hide() {
@@ -32,6 +36,7 @@ exports.NotificationEnvironment = (0, vue_1.defineComponent)({
             }
         }
         function handleBeforeEnter(el) {
+            wipTransitionCountRef.value++;
             void (0, vue_1.nextTick)(() => {
                 el.style.height = `${el.offsetHeight}px`;
                 el.style.maxHeight = '0';
@@ -42,6 +47,7 @@ exports.NotificationEnvironment = (0, vue_1.defineComponent)({
             });
         }
         function handleAfterEnter(el) {
+            wipTransitionCountRef.value--;
             el.style.height = '';
             el.style.maxHeight = '';
             const { onAfterEnter, onAfterShow } = props;
@@ -52,6 +58,7 @@ exports.NotificationEnvironment = (0, vue_1.defineComponent)({
                 onAfterShow();
         }
         function handleBeforeLeave(el) {
+            wipTransitionCountRef.value++;
             el.style.maxHeight = `${el.offsetHeight}px`;
             el.style.height = `${el.offsetHeight}px`;
             void el.offsetHeight;
@@ -64,6 +71,7 @@ exports.NotificationEnvironment = (0, vue_1.defineComponent)({
             void el.offsetHeight;
         }
         function handleAfterLeave() {
+            wipTransitionCountRef.value--;
             const { onAfterLeave, onInternalAfterLeave, onAfterHide, internalKey } = props;
             if (onAfterLeave)
                 onAfterLeave();

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

@@ -2,13 +2,13 @@ import { PropType, ExtractPropTypes, Ref, CSSProperties } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import { ExtractPublicPropTypes, Mutable } from '../../_utils';
 import { NotificationTheme } from '../styles';
-import { notificationEnvOptions } from './NotificationEnvironment';
-export declare type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-export declare type NotificationOptions = Partial<ExtractPropTypes<typeof notificationEnvOptions>>;
+import type { NotificationOptions } from './NotificationEnvironment';
+export declare type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top' | 'bottom';
 export interface NotificationProviderInjection {
     props: ExtractPropTypes<typeof notificationProviderProps>;
     mergedClsPrefixRef: Ref<string>;
     mergedThemeRef: Ref<MergedTheme<NotificationTheme>>;
+    wipTransitionCountRef: Ref<number>;
 }
 declare type Create = (options: NotificationOptions) => NotificationReactive;
 declare type TypedCreate = (options: Omit<NotificationOptions, 'type'>) => NotificationReactive;

package/lib/notification/src/NotificationProvider.js

@@ -79,11 +79,13 @@ exports.default = (0, vue_1.defineComponent)({
             open,
             destroyAll
         };
+        const wipTransitionCountRef = (0, vue_1.ref)(0);
         (0, vue_1.provide)(exports.notificationApiInjectionKey, api);
         (0, vue_1.provide)(context_1.notificationProviderInjectionKey, {
             props,
             mergedClsPrefixRef,
-            mergedThemeRef: themeRef
+            mergedThemeRef: themeRef,
+            wipTransitionCountRef
         });
         // deprecated
         function open(options) {
@@ -103,10 +105,11 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         var _a, _b, _c;
+        const { placement } = this;
         return ((0, vue_1.h)(vue_1.Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
             _b.call(_a),
             this.notificationList.length ? ((0, vue_1.h)(vue_1.Teleport, { to: (_c = this.to) !== null && _c !== void 0 ? _c : 'body' },
-                (0, vue_1.h)(NotificationContainer_1.NotificationContainer, { style: this.containerStyle, scrollable: this.scrollable, placement: this.placement }, {
+                (0, vue_1.h)(NotificationContainer_1.NotificationContainer, { style: this.containerStyle, scrollable: this.scrollable && placement !== 'top' && placement !== 'bottom', placement: placement }, {
                     default: () => {
                         return this.notificationList.map((notification) => {
                             return ((0, vue_1.h)(NotificationEnvironment_1.NotificationEnvironment, Object.assign({ ref: ((inst) => {

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

@@ -50,7 +50,31 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  `, [(0, cssr_1.cB)('scrollbar-content', `
  padding-top: 12px;
  padding-bottom: 33px;
- `)])])])]), (0, cssr_1.cM)('top-right, bottom-right', [(0, cssr_1.cB)('notification', `
+ `)])])])]), (0, cssr_1.cM)('top, top-right, top-left', `
+ top: 12px;
+ `, [(0, cssr_1.c)('&.transitioning >', [(0, cssr_1.cB)('scrollbar', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-container', `
+ min-height: 100vh !important;
+ `)])])])]), (0, cssr_1.cM)('bottom, bottom-right, bottom-left', `
+ bottom: 12px;
+ `, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-container', [(0, cssr_1.cB)('scrollbar-content', `
+ padding-bottom: 12px;
+ `)])])])]), (0, cssr_1.cB)('notification-wrapper', `
+ display: flex;
+ align-items: flex-end;
+ margin-bottom: 0;
+ margin-top: 12px;
+ `)]), (0, cssr_1.cM)('top, bottom', `
+ left: 50%;
+ transform: translateX(-50%);
+ `, [(0, cssr_1.cB)('notification-wrapper', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+ transform: scale(0.85);
+ `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
+ transform: scale(1);
+ `)])]), (0, cssr_1.cM)('top', [(0, cssr_1.cB)('notification-wrapper', `
+ transform-origin: top center;
+ `)]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cB)('notification-wrapper', `
+ transform-origin: bottom center;
+ `)]), (0, cssr_1.cM)('top-right, bottom-right', [(0, cssr_1.cB)('notification', `
  margin-left: 28px;
  margin-right: 16px;
  `)]), (0, cssr_1.cM)('top-left, bottom-left', [(0, cssr_1.cB)('notification', `
@@ -58,16 +82,12 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  margin-right: 28px;
  `)]), (0, cssr_1.cM)('top-right', `
  right: 0;
- top: 12px;
  `, [placementTransformStyle('top-right')]), (0, cssr_1.cM)('top-left', `
  left: 0;
- top: 12px;
  `, [placementTransformStyle('top-left')]), (0, cssr_1.cM)('bottom-right', `
  right: 0;
- bottom: 12px;
  `, [placementTransformStyle('bottom-right')]), (0, cssr_1.cM)('bottom-left', `
  left: 0;
- bottom: 12px;
  `, [placementTransformStyle('bottom-left')]), (0, cssr_1.cM)('scrollable', [(0, cssr_1.cM)('top-right', `
  top: 0;
  `), (0, cssr_1.cM)('top-left', `
@@ -76,8 +96,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  bottom: 0;
  `), (0, cssr_1.cM)('bottom-left', `
  bottom: 0;
- `)]), (0, cssr_1.cB)('notification', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+ `)]), (0, cssr_1.cB)('notification-wrapper', `
+ margin-bottom: 12px;
+ `, [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
  opacity: 0;
+ margin-top: 0 !important;
  margin-bottom: 0 !important;
  `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
  opacity: 1;
@@ -88,19 +111,27 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  opacity .3s var(--n-bezier),
  transform .3s var(--n-bezier-ease-in),
  max-height .3s var(--n-bezier),
+ margin-top .3s linear,
  margin-bottom .3s linear,
  box-shadow .3s var(--n-bezier);
- `)]), (0, cssr_1.cB)('notification', `
- background-color: var(--n-color);
- color: var(--n-text-color);
+ `), (0, cssr_1.c)('&.notification-transition-enter-active', `
  transition:
  background-color .3s var(--n-bezier),
  color .3s var(--n-bezier),
  opacity .3s var(--n-bezier),
  transform .3s var(--n-bezier-ease-out),
  max-height .3s var(--n-bezier),
+ margin-top .3s linear,
  margin-bottom .3s linear,
  box-shadow .3s var(--n-bezier);
+ `)]), (0, cssr_1.cB)('notification', `
+ background-color: var(--n-color);
+ color: var(--n-text-color);
+ transition:
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  font-family: inherit;
  font-size: var(--n-font-size);
  font-weight: 400;
@@ -108,7 +139,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
- margin-bottom: 12px;
  padding-left: var(--n-padding-left);
  padding-right: var(--n-padding-right);
  width: var(--n-width);
@@ -191,7 +221,7 @@ function placementTransformStyle(placement) {
   const direction = placement.split('-')[1];
   const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)';
   const transformXLeave = '0';
-  return (0, cssr_1.cB)('notification', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+  return (0, cssr_1.cB)('notification-wrapper', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
  transform: translate(${transformXEnter}, 0);
  `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
  transform: translate(${transformXLeave}, 0);