naive-ui 2.20.2 → 2.21.2

package/es/notification/src/NotificationContainer.js

@@ -7,6 +7,10 @@ export default defineComponent({
         scrollable: {
             type: Boolean,
             required: true
+        },
+        placement: {
+            type: String,
+            required: true
         }
     },
     setup() {
@@ -18,10 +22,11 @@ export default defineComponent({
         };
     },
     render() {
-        const { $slots, scrollable, mergedClsPrefix, mergedTheme } = this;
+        const { $slots, scrollable, mergedClsPrefix, mergedTheme, placement } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-notification-container`,
-                scrollable && `${mergedClsPrefix}-notification-container--scrollable`
+                scrollable && `${mergedClsPrefix}-notification-container--scrollable`,
+                `${mergedClsPrefix}-notification-container--${placement}`
             ] }, scrollable ? (h(NScrollbar, { theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, $slots)) : ($slots)));
     }
 });

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

@@ -12,6 +12,9 @@ export const notificationApiInjectionKey = Symbol('notificationApi');
 const notificationProviderProps = Object.assign(Object.assign({}, useTheme.props), { to: [String, Object], scrollable: {
         type: Boolean,
         default: true
+    }, max: Number, placement: {
+        type: String,
+        default: 'top-right'
     } });
 export default defineComponent({
     name: 'NotificationProvider',
@@ -20,11 +23,36 @@ export default defineComponent({
         const { mergedClsPrefixRef } = useConfig(props);
         const notificationListRef = ref([]);
         const notificationRefs = {};
+        const leavingKeySet = new Set();
         function create(options) {
             const key = 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 = 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;
         }
@@ -32,6 +60,7 @@ export default 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 = useTheme('Notification', 'Notification', style, notificationLight, props, mergedClsPrefixRef);
@@ -41,7 +70,8 @@ export default defineComponent({
             success: apis[1],
             warning: apis[2],
             error: apis[3],
-            open
+            open,
+            destroyAll
         };
         provide(notificationApiInjectionKey, api);
         provide(notificationProviderInjectionKey, {
@@ -52,6 +82,11 @@ export default defineComponent({
         function open(options) {
             return create(options);
         }
+        function destroyAll() {
+            Object.values(notificationListRef.value).forEach((notification) => {
+                notification.hide();
+            });
+        }
         return Object.assign({
             mergedClsPrefix: mergedClsPrefixRef,
             notificationList: notificationListRef,
@@ -64,7 +99,7 @@ export default defineComponent({
         return (h(Fragment, null,
             renderSlot(this.$slots, 'default'),
             this.notificationList.length ? (h(Teleport, { to: (_a = this.to) !== null && _a !== void 0 ? _a : 'body' },
-                h(NotificationContainer, { scrollable: this.scrollable }, {
+                h(NotificationContainer, { scrollable: this.scrollable, placement: this.placement }, {
                     default: () => {
                         return this.notificationList.map((notification) => {
                             return (h(NotificationEnvironment, Object.assign({ ref: ((inst) => {

package/es/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/es/notification/src/styles/index.cssr.js

@@ -26,10 +26,6 @@ import { c, cB, cE, cM } from '../../../_utils/cssr'; // vars:
 export default c([cB('notification-container', `
  z-index: 4000;
  position: fixed;
- top: 12px;
- left: 0;
- right: 0;
- height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
@@ -47,15 +43,37 @@ export default c([cB('notification-container', `
  `, [cB('scrollbar-content', `
  padding-top: 12px;
  padding-bottom: 33px;
- `)])])])]), cM('scrollable', {
-  top: 0
-}), cB('notification', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+ `)])])])]), cM('top-right, bottom-right', [cB('notification', `
+ margin-left: 28px;
+ margin-right: 16px;
+ `)]), cM('top-left, bottom-left', [cB('notification', `
+ margin-left: 16px;
+ 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', `
+ top: 0;
+ `), cM('bottom-right', `
+ bottom: 0;
+ `), cM('bottom-left', `
+ bottom: 0;
+ `)]), cB('notification', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
  opacity: 0;
  margin-bottom: 0 !important;
- transform: translateX(calc(100% + 16px));
  `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
  opacity: 1;
- transform: translateX(0);
  `), c('&.notification-transition-leave-active', `
  transition:
  background-color .3s var(--bezier),
@@ -84,8 +102,6 @@ export default c([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);
@@ -160,4 +176,17 @@ cE('avatar', [cB('icon', {
  color: var(--text-color);
  `, [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 cB('notification', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
+ transform: translate(${transformXEnter}, ${transformYEnter});
+ `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
+ transform: translate(${transformXLeave}, ${transformYLeave});
+ `)]);
+}

package/es/pagination/index.d.ts

@@ -1,3 +1,3 @@
 export { default as NPagination } from './src/Pagination';
 export type { PaginationProps } from './src/Pagination';
-export type { PaginationInfo } from './src/interface';
+export type { PaginationInfo, PaginationSizeOption } from './src/interface';

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

@@ -3,7 +3,7 @@ import type { PageItem } from './utils';
 import { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { Size as InputSize } from '../../input/src/interface';
 import type { Size as SelectSize } from '../../select/src/interface';
-import { RenderPrefix } from './interface';
+import { RenderPrefix, PaginationSizeOption } from './interface';
 declare const paginationProps: {
     readonly page: NumberConstructor;
     readonly defaultPage: {
@@ -18,9 +18,12 @@ declare const paginationProps: {
     };
     readonly showSizePicker: BooleanConstructor;
     readonly pageSize: PropType<number>;
-    readonly defaultPageSize: NumberConstructor;
+    readonly defaultPageSize: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
     readonly pageSizes: {
-        readonly type: PropType<number[]>;
+        readonly type: PropType<(number | PaginationSizeOption)[]>;
         readonly default: () => number[];
     };
     readonly showQuickJumper: BooleanConstructor;
@@ -738,9 +741,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showSizePicker: BooleanConstructor;
     readonly pageSize: PropType<number>;
-    readonly defaultPageSize: NumberConstructor;
+    readonly defaultPageSize: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
     readonly pageSizes: {
-        readonly type: PropType<number[]>;
+        readonly type: PropType<(number | PaginationSizeOption)[]>;
         readonly default: () => number[];
     };
     readonly showQuickJumper: BooleanConstructor;
@@ -1456,6 +1462,7 @@ declare const _default: import("vue").DefineComponent<{
         isCompositing: boolean;
         blur: () => void;
         focus: () => void;
+        select: () => void;
         activate: () => void;
         deactivate: () => void;
     } | null>;
@@ -1464,10 +1471,7 @@ declare const _default: import("vue").DefineComponent<{
     showFastForward: import("vue").Ref<boolean>;
     pageItems: import("vue").ComputedRef<PageItem[]>;
     jumperValue: import("vue").Ref<string>;
-    pageSizeOptions: import("vue").ComputedRef<{
-        label: string;
-        value: number;
-    }[]>;
+    pageSizeOptions: import("vue").ComputedRef<PaginationSizeOption[]>;
     mergedPageSize: import("vue").ComputedRef<number>;
     inputSize: import("vue").ComputedRef<InputSize>;
     selectSize: import("vue").ComputedRef<SelectSize>;
@@ -1541,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;
@@ -2016,7 +2024,8 @@ declare const _default: import("vue").DefineComponent<{
     defaultPage: number;
     defaultPageCount: number;
     showSizePicker: boolean;
-    pageSizes: number[];
+    defaultPageSize: number;
+    pageSizes: (number | PaginationSizeOption)[];
     showQuickJumper: boolean;
     pageSlot: number;
 } & {
@@ -2710,7 +2719,6 @@ declare const _default: import("vue").DefineComponent<{
     itemCount?: number | undefined;
     pageCount?: number | undefined;
     pageSize?: number | undefined;
-    defaultPageSize?: number | undefined;
     "onUpdate:page"?: MaybeArray<(page: number) => void> | undefined;
     onUpdatePage?: MaybeArray<(page: number) => void> | undefined;
     "onUpdate:pageSize"?: MaybeArray<(pageSize: number) => void> | undefined;
@@ -2721,7 +2729,8 @@ declare const _default: import("vue").DefineComponent<{
     defaultPage: number;
     defaultPageCount: number;
     showSizePicker: boolean;
-    pageSizes: number[];
+    defaultPageSize: number;
+    pageSizes: (number | PaginationSizeOption)[];
     showQuickJumper: boolean;
     pageSlot: number;
 }>;

package/es/pagination/src/Pagination.js

@@ -16,7 +16,10 @@ const paginationProps = Object.assign(Object.assign({}, useTheme.props), { page:
     }, itemCount: Number, pageCount: Number, defaultPageCount: {
         type: Number,
         default: 1
-    }, showSizePicker: Boolean, pageSize: Number, defaultPageSize: Number, pageSizes: {
+    }, showSizePicker: Boolean, pageSize: Number, defaultPageSize: {
+        type: Number,
+        default: 10
+    }, pageSizes: {
         type: Array,
         default() {
             return [10];
@@ -47,7 +50,7 @@ export default defineComponent({
         const jumperRef = ref(null);
         const jumperValueRef = ref('');
         const uncontrolledPageRef = ref(props.defaultPage);
-        const uncontrolledPageSizeRef = ref(props.defaultPageSize || props.pageSizes[0]);
+        const uncontrolledPageSizeRef = ref(props.defaultPageSize);
         const mergedPageRef = useMergedState(toRef(props, 'page'), uncontrolledPageRef);
         const mergedPageSizeRef = useMergedState(toRef(props, 'pageSize'), uncontrolledPageSizeRef);
         const mergedPageCountRef = computed(() => {
@@ -65,10 +68,17 @@ export default defineComponent({
         const showFastBackwardRef = ref(false);
         const pageSizeOptionsRef = computed(() => {
             const suffix = localeRef.value.selectionSuffix;
-            return props.pageSizes.map((size) => ({
-                label: `${size} / ${suffix}`,
-                value: size
-            }));
+            return props.pageSizes.map((size) => {
+                if (typeof size === 'number') {
+                    return {
+                        label: `${size} / ${suffix}`,
+                        value: size
+                    };
+                }
+                else {
+                    return size;
+                }
+            });
         });
         const inputSizeRef = computed(() => {
             var _a, _b;

package/es/pagination/src/interface.d.ts

@@ -1,4 +1,5 @@
 import { VNodeChild } from 'vue';
+import { SelectBaseOption } from '../../select/src/interface';
 export declare type PaginationInfo = Parameters<RenderPrefix>[0];
 export declare type RenderPrefix = (info: {
     startIndex: number;
@@ -8,6 +9,7 @@ export declare type RenderPrefix = (info: {
     pageCount: number;
     itemCount: number | undefined;
 }) => VNodeChild;
+export declare type PaginationSizeOption = SelectBaseOption<number, string>;
 export declare type RenderSuffix = RenderPrefix;
 export declare type RenderNext = RenderPrefix;
 export declare type RenderPrev = RenderPrefix;