naive-ui 2.28.3 → 2.29.0

package/es/notification/src/NotificationEnvironment.js

@@ -1,5 +1,6 @@
-import { nextTick, Transition, h, defineComponent, ref, onMounted } from 'vue';
+import { nextTick, Transition, h, defineComponent, ref, onMounted, inject } from 'vue';
 import { keep } from '../../_utils';
+import { notificationProviderInjectionKey } from './context';
 import { Notification, notificationProps, notificationPropKeys } from './Notification';
 export const notificationEnvOptions = Object.assign(Object.assign({}, notificationProps), { duration: Number, onClose: Function, onLeave: Function, onAfterEnter: Function, onAfterLeave: Function, 
     /** @deprecated */
@@ -20,6 +21,9 @@ export const NotificationEnvironment = defineComponent({
             required: true
         } }),
     setup(props) {
+        const { wipTransitionCountRef
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+         } = inject(notificationProviderInjectionKey);
         const showRef = ref(true);
         let timerId = null;
         function hide() {
@@ -29,6 +33,7 @@ export const NotificationEnvironment = defineComponent({
             }
         }
         function handleBeforeEnter(el) {
+            wipTransitionCountRef.value++;
             void nextTick(() => {
                 el.style.height = `${el.offsetHeight}px`;
                 el.style.maxHeight = '0';
@@ -39,6 +44,7 @@ export const NotificationEnvironment = defineComponent({
             });
         }
         function handleAfterEnter(el) {
+            wipTransitionCountRef.value--;
             el.style.height = '';
             el.style.maxHeight = '';
             const { onAfterEnter, onAfterShow } = props;
@@ -49,6 +55,7 @@ export const NotificationEnvironment = defineComponent({
                 onAfterShow();
         }
         function handleBeforeLeave(el) {
+            wipTransitionCountRef.value++;
             el.style.maxHeight = `${el.offsetHeight}px`;
             el.style.height = `${el.offsetHeight}px`;
             void el.offsetHeight;
@@ -61,6 +68,7 @@ export const NotificationEnvironment = defineComponent({
             void el.offsetHeight;
         }
         function handleAfterLeave() {
+            wipTransitionCountRef.value--;
             const { onAfterLeave, onInternalAfterLeave, onAfterHide, internalKey } = props;
             if (onAfterLeave)
                 onAfterLeave();

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

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

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

@@ -43,7 +43,31 @@ export default c([cB('notification-container', `
  `, [cB('scrollbar-content', `
  padding-top: 12px;
  padding-bottom: 33px;
- `)])])])]), cM('top-right, bottom-right', [cB('notification', `
+ `)])])])]), cM('top, top-right, top-left', `
+ top: 12px;
+ `, [c('&.transitioning >', [cB('scrollbar', [c('>', [cB('scrollbar-container', `
+ min-height: 100vh !important;
+ `)])])])]), cM('bottom, bottom-right, bottom-left', `
+ bottom: 12px;
+ `, [c('>', [cB('scrollbar', [c('>', [cB('scrollbar-container', [cB('scrollbar-content', `
+ padding-bottom: 12px;
+ `)])])])]), cB('notification-wrapper', `
+ display: flex;
+ align-items: flex-end;
+ margin-bottom: 0;
+ margin-top: 12px;
+ `)]), cM('top, bottom', `
+ left: 50%;
+ transform: translateX(-50%);
+ `, [cB('notification-wrapper', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+ transform: scale(0.85);
+ `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
+ transform: scale(1);
+ `)])]), cM('top', [cB('notification-wrapper', `
+ transform-origin: top center;
+ `)]), cM('bottom', [cB('notification-wrapper', `
+ transform-origin: bottom center;
+ `)]), cM('top-right, bottom-right', [cB('notification', `
  margin-left: 28px;
  margin-right: 16px;
  `)]), cM('top-left, bottom-left', [cB('notification', `
@@ -51,16 +75,12 @@ export default c([cB('notification-container', `
  margin-right: 28px;
  `)]), cM('top-right', `
  right: 0;
- top: 12px;
  `, [placementTransformStyle('top-right')]), cM('top-left', `
  left: 0;
- top: 12px;
  `, [placementTransformStyle('top-left')]), cM('bottom-right', `
  right: 0;
- bottom: 12px;
  `, [placementTransformStyle('bottom-right')]), cM('bottom-left', `
  left: 0;
- bottom: 12px;
  `, [placementTransformStyle('bottom-left')]), cM('scrollable', [cM('top-right', `
  top: 0;
  `), cM('top-left', `
@@ -69,8 +89,11 @@ export default c([cB('notification-container', `
  bottom: 0;
  `), cM('bottom-left', `
  bottom: 0;
- `)]), cB('notification', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+ `)]), cB('notification-wrapper', `
+ margin-bottom: 12px;
+ `, [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
  opacity: 0;
+ margin-top: 0 !important;
  margin-bottom: 0 !important;
  `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
  opacity: 1;
@@ -81,19 +104,27 @@ export default c([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);
- `)]), cB('notification', `
- background-color: var(--n-color);
- color: var(--n-text-color);
+ `), 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);
+ `)]), 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;
@@ -101,7 +132,6 @@ export default c([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);
@@ -184,7 +214,7 @@ function placementTransformStyle(placement) {
   const direction = placement.split('-')[1];
   const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)';
   const transformXLeave = '0';
-  return cB('notification', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+  return cB('notification-wrapper', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
  transform: translate(${transformXEnter}, 0);
  `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
  transform: translate(${transformXLeave}, 0);