naive-ui 2.20.3 → 2.21.3

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

@@ -19,6 +19,7 @@ export interface NotificationApiInjection {
     error: TypedCreate;
     /** @deprecated */
     open: Create;
+    destroyAll: () => void;
 }
 export declare type NotificationProviderInst = NotificationApiInjection;
 export declare const notificationApiInjectionKey: InjectionKey<NotificationApiInjection>;
@@ -39,6 +40,11 @@ declare const notificationProviderProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    max: NumberConstructor;
+    placement: {
+        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        default: string;
+    };
     theme: PropType<import("../../_mixins").Theme<"Notification", {
         borderRadius: string;
         lineHeight: string;
@@ -134,6 +140,11 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    max: NumberConstructor;
+    placement: {
+        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        default: string;
+    };
     theme: PropType<import("../../_mixins").Theme<"Notification", {
         borderRadius: string;
         lineHeight: string;
@@ -254,15 +265,20 @@ declare const _default: import("vue").DefineComponent<{
     warning: (options: Omit<NotificationOptions, 'type'>) => NotificationReactive;
     error: (options: Omit<NotificationOptions, 'type'>) => NotificationReactive;
     open: (options: NotificationOptions) => NotificationReactive;
+    destroyAll: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     to?: unknown;
     scrollable?: unknown;
+    max?: unknown;
+    placement?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
 } & {
+    placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     scrollable: boolean;
 } & {
+    max?: number | undefined;
     to?: string | HTMLElement | undefined;
     theme?: import("../../_mixins").Theme<"Notification", {
         borderRadius: string;
@@ -352,6 +368,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>> | undefined;
 }>, {
+    placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     scrollable: boolean;
 }>;
 export default _default;

package/lib/notification/src/NotificationProvider.js

@@ -18,6 +18,9 @@ exports.notificationApiInjectionKey = Symbol('notificationApi');
 const notificationProviderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: [String, Object], scrollable: {
         type: Boolean,
         default: true
+    }, max: Number, placement: {
+        type: String,
+        default: 'top-right'
     } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'NotificationProvider',
@@ -26,11 +29,36 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const notificationListRef = (0, vue_1.ref)([]);
         const notificationRefs = {};
+        const leavingKeySet = new Set();
         function create(options) {
             const key = (0, seemly_1.createId)();
-            const destroy = () => notificationRefs[key].hide();
+            const destroy = () => {
+                leavingKeySet.add(key);
+                // If you push n + 1 message when max is n, notificationRefs[key] maybe not be set
+                if (notificationRefs[key]) {
+                    notificationRefs[key].hide();
+                }
+            };
             const notificationReactive = (0, vue_1.reactive)(Object.assign(Object.assign({}, options), { key,
                 destroy, hide: destroy, deactivate: destroy }));
+            const { max } = props;
+            if (max && notificationListRef.value.length - leavingKeySet.size >= max) {
+                let someoneMountedRemoved = false;
+                let index = 0;
+                for (const notification of notificationListRef.value) {
+                    if (!leavingKeySet.has(notification.key)) {
+                        if (notificationRefs[notification.key]) {
+                            notification.destroy();
+                            someoneMountedRemoved = true;
+                        }
+                        break;
+                    }
+                    index++;
+                }
+                if (!someoneMountedRemoved) {
+                    notificationListRef.value.splice(index, 1);
+                }
+            }
             notificationListRef.value.push(notificationReactive);
             return notificationReactive;
         }
@@ -38,6 +66,7 @@ exports.default = (0, vue_1.defineComponent)({
             return (options) => create(Object.assign(Object.assign({}, options), { type }));
         });
         function handleAfterLeave(key) {
+            leavingKeySet.delete(key);
             notificationListRef.value.splice(notificationListRef.value.findIndex((notification) => notification.key === key), 1);
         }
         const themeRef = (0, _mixins_1.useTheme)('Notification', 'Notification', index_cssr_1.default, styles_1.notificationLight, props, mergedClsPrefixRef);
@@ -47,7 +76,8 @@ exports.default = (0, vue_1.defineComponent)({
             success: apis[1],
             warning: apis[2],
             error: apis[3],
-            open
+            open,
+            destroyAll
         };
         (0, vue_1.provide)(exports.notificationApiInjectionKey, api);
         (0, vue_1.provide)(exports.notificationProviderInjectionKey, {
@@ -58,6 +88,11 @@ exports.default = (0, vue_1.defineComponent)({
         function open(options) {
             return create(options);
         }
+        function destroyAll() {
+            Object.values(notificationListRef.value).forEach((notification) => {
+                notification.hide();
+            });
+        }
         return Object.assign({
             mergedClsPrefix: mergedClsPrefixRef,
             notificationList: notificationListRef,
@@ -70,7 +105,7 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)(vue_1.Fragment, null,
             (0, vue_1.renderSlot)(this.$slots, 'default'),
             this.notificationList.length ? ((0, vue_1.h)(vue_1.Teleport, { to: (_a = this.to) !== null && _a !== void 0 ? _a : 'body' },
-                (0, vue_1.h)(NotificationContainer_1.default, { scrollable: this.scrollable }, {
+                (0, vue_1.h)(NotificationContainer_1.default, { scrollable: this.scrollable, placement: this.placement }, {
                     default: () => {
                         return this.notificationList.map((notification) => {
                             return ((0, vue_1.h)(NotificationEnvironment_1.default, Object.assign({ ref: ((inst) => {

package/lib/notification/src/styles/index.cssr.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("css-render").CNode;
+import { CNode } from 'css-render';
+declare const _default: CNode;
 export default _default;

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

@@ -33,10 +33,6 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  z-index: 4000;
  position: fixed;
- top: 12px;
- left: 0;
- right: 0;
- height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
@@ -54,15 +50,37 @@ 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)('scrollable', {
-  top: 0
-}), (0, cssr_1.cB)('notification', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+ `)])])])]), (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', `
+ margin-left: 16px;
+ 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', `
+ top: 0;
+ `), (0, cssr_1.cM)('bottom-right', `
+ 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', `
  opacity: 0;
  margin-bottom: 0 !important;
- transform: translateX(calc(100% + 16px));
  `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
  opacity: 1;
- transform: translateX(0);
  `), (0, cssr_1.c)('&.notification-transition-leave-active', `
  transition:
  background-color .3s var(--bezier),
@@ -91,8 +109,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 12px;
- margin-left: 28px;
- margin-right: 16px;
  padding-left: var(--padding-left);
  padding-right: var(--padding-right);
  width: var(--width);
@@ -167,4 +183,17 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  color: var(--text-color);
  `, [(0, cssr_1.c)('&:first-child', {
   margin: 0
-})])])])])]);
+})])])])])]);
+
+function placementTransformStyle(placement) {
+  const [position, direction] = placement.split('-');
+  const transformYEnter = position === 'top' ? '-100%' : '100%';
+  const transformYLeave = position === 'top' ? '0' : '0';
+  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', `
+ transform: translate(${transformXEnter}, ${transformYEnter});
+ `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
+ transform: translate(${transformXLeave}, ${transformYLeave});
+ `)]);
+}

package/lib/pagination/src/Pagination.d.ts

@@ -1462,6 +1462,7 @@ declare const _default: import("vue").DefineComponent<{
         isCompositing: boolean;
         blur: () => void;
         focus: () => void;
+        select: () => void;
         activate: () => void;
         deactivate: () => void;
     } | null>;
@@ -1544,9 +1545,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;