naive-ui 2.21.1 → 2.21.2

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

@@ -1545,6 +1545,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/popconfirm/src/Popconfirm.d.ts

@@ -45,7 +45,7 @@ declare const popconfirmProps: {
         default: string;
     };
     arrowStyle: PropType<string | import("vue").CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -801,7 +801,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     arrowStyle: PropType<string | import("vue").CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -1582,6 +1582,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
@@ -1879,7 +1880,7 @@ declare const _default: import("vue").DefineComponent<{
     getDisabled?: unknown;
     displayDirective?: unknown;
     arrowStyle?: unknown;
-    filp?: unknown;
+    flip?: unknown;
     animated?: unknown;
     width?: unknown;
     overlap?: unknown;
@@ -1900,6 +1901,7 @@ declare const _default: import("vue").DefineComponent<{
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
 } & {
+    flip: boolean;
     disabled: boolean;
     duration: number;
     raw: boolean;
@@ -1909,7 +1911,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
-    filp: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -2611,6 +2612,7 @@ declare const _default: import("vue").DefineComponent<{
     onNegativeClick?: ((e: MouseEvent) => any) | undefined;
 }>, {
     show: boolean | undefined;
+    flip: boolean;
     width: number | "trigger";
     disabled: boolean;
     duration: number;
@@ -2622,7 +2624,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
-    filp: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/lib/popover/src/Popover.d.ts

@@ -62,7 +62,7 @@ export declare const popoverBaseProps: {
         default: string;
     };
     arrowStyle: PropType<string | CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -143,7 +143,7 @@ declare const popoverProps: {
         default: string;
     };
     arrowStyle: PropType<string | CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -268,7 +268,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     arrowStyle: PropType<string | CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -385,7 +385,7 @@ declare const _default: import("vue").DefineComponent<{
     getDisabled?: unknown;
     displayDirective?: unknown;
     arrowStyle?: unknown;
-    filp?: unknown;
+    flip?: unknown;
     animated?: unknown;
     width?: unknown;
     overlap?: unknown;
@@ -406,6 +406,7 @@ declare const _default: import("vue").DefineComponent<{
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
 } & {
+    flip: boolean;
     disabled: boolean;
     duration: number;
     raw: boolean;
@@ -415,7 +416,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
-    filp: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -483,6 +483,7 @@ declare const _default: import("vue").DefineComponent<{
     internalRenderBody?: InternalRenderBody | undefined;
 }>, {
     show: boolean | undefined;
+    flip: boolean;
     width: number | "trigger";
     disabled: boolean;
     duration: number;
@@ -494,7 +495,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
-    filp: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/lib/popover/src/Popover.js

@@ -90,7 +90,7 @@ exports.popoverBaseProps = {
         default: 'if'
     },
     arrowStyle: [String, Object],
-    filp: {
+    flip: {
         type: Boolean,
         default: true
     },
@@ -141,9 +141,6 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
-                if (props.maxWidth !== undefined) {
-                    (0, _utils_1.warnOnce)('popover', '`max-width` is deprecated, please use `style` instead.');
-                }
                 if (props.minWidth !== undefined) {
                     (0, _utils_1.warnOnce)('popover', '`max-width` is deprecated, please use `style` instead.');
                 }
@@ -413,7 +410,7 @@ exports.default = (0, vue_1.defineComponent)({
                         },
                         onFocus: (e) => {
                             ascendantAndCurrentHandlers.forEach((_handlers) => {
-                                _handlers.onBlur(e);
+                                _handlers.onFocus(e);
                             });
                         },
                         onClick: (e) => {

package/lib/popover/src/PopoverBody.d.ts

@@ -16,7 +16,7 @@ export declare const popoverBodyProps: {
     displayDirective: PropType<"show" | "if">;
     x: NumberConstructor;
     y: NumberConstructor;
-    filp: BooleanConstructor;
+    flip: BooleanConstructor;
     overlap: BooleanConstructor;
     placement: PropType<FollowerPlacement>;
     width: PropType<number | "trigger">;
@@ -88,7 +88,7 @@ declare const _default: import("vue").DefineComponent<{
     displayDirective: PropType<"show" | "if">;
     x: NumberConstructor;
     y: NumberConstructor;
-    filp: BooleanConstructor;
+    flip: BooleanConstructor;
     overlap: BooleanConstructor;
     placement: PropType<FollowerPlacement>;
     width: PropType<number | "trigger">;
@@ -161,7 +161,7 @@ declare const _default: import("vue").DefineComponent<{
     displayDirective?: unknown;
     x?: unknown;
     y?: unknown;
-    filp?: unknown;
+    flip?: unknown;
     overlap?: unknown;
     placement?: unknown;
     width?: unknown;
@@ -174,10 +174,10 @@ declare const _default: import("vue").DefineComponent<{
     builtinThemeOverrides?: unknown;
 } & {
     show: boolean;
+    flip: boolean;
     raw: boolean;
     overlap: boolean;
     showArrow: boolean;
-    filp: boolean;
     animated: boolean;
 } & {
     x?: number | undefined;
@@ -237,11 +237,11 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside?: ((e: MouseEvent) => void) | undefined;
 }>, {
     show: boolean;
+    flip: boolean;
     to: string | boolean | HTMLElement;
     raw: boolean;
     overlap: boolean;
     showArrow: boolean;
-    filp: boolean;
     animated: boolean;
 }>;
 export default _default;

package/lib/popover/src/PopoverBody.js

@@ -14,7 +14,7 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const interface_1 = require("./interface");
 const interface_2 = require("../../drawer/src/interface");
 const interface_3 = require("../../modal/src/interface");
-exports.popoverBodyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, filp: Boolean, overlap: Boolean, placement: String, width: [Number, String], 
+exports.popoverBodyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], 
     // private
     animated: Boolean, onClickoutside: Function, 
     /** @deprecated */
@@ -202,6 +202,7 @@ exports.default = (0, vue_1.defineComponent)({
             to: this.adjustedTo,
             x: this.x,
             y: this.y,
+            flip: this.flip,
             placement: this.placement,
             containerClass: this.namespace,
             ref: 'followerRef',

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

@@ -55,7 +55,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('popover', `
  `), (0, cssr_1.cNotM)('raw', `
  background-color: var(--color);
  border-radius: var(--border-radius);
- var(--padding);
  `, [(0, cssr_1.cNotM)('show-header', 'padding: var(--padding);')]), (0, cssr_1.cE)('header', `
  padding: var(--padding);
  border-bottom: 1px solid var(--divider-color);

package/lib/popselect/src/Popselect.d.ts

@@ -60,7 +60,7 @@ declare const popselectProps: {
         default: string;
     };
     arrowStyle: PropType<string | import("vue").CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -359,7 +359,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     arrowStyle: PropType<string | import("vue").CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -672,6 +672,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
@@ -831,7 +832,7 @@ declare const _default: import("vue").DefineComponent<{
     getDisabled?: unknown;
     displayDirective?: unknown;
     arrowStyle?: unknown;
-    filp?: unknown;
+    flip?: unknown;
     animated?: unknown;
     overlap?: unknown;
     internalExtraClass?: unknown;
@@ -853,6 +854,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     value: import("../../select/src/interface").Value | null;
     size: import("./interface").PopselectSize;
+    flip: boolean;
     multiple: boolean;
     disabled: boolean;
     duration: number;
@@ -864,7 +866,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
-    filp: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -1103,6 +1104,7 @@ declare const _default: import("vue").DefineComponent<{
     value: import("../../select/src/interface").Value | null;
     size: import("./interface").PopselectSize;
     show: boolean | undefined;
+    flip: boolean;
     multiple: boolean;
     disabled: boolean;
     duration: number;
@@ -1116,7 +1118,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
-    filp: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/lib/popselect/src/PopselectPanel.d.ts

@@ -131,6 +131,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/select/src/Select.d.ts

@@ -1078,6 +1078,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/slider/src/Slider.d.ts

@@ -300,6 +300,7 @@ declare const _default: import("vue").DefineComponent<{
     getHandleStyle: (value: number, index: number) => Record<string, any>;
     activeIndex: import("vue").Ref<number>;
     arrifiedValues: import("vue").ComputedRef<number[]>;
+    followerEnabledIndexSet: import("vue").Ref<Set<number>>;
     handleRailMouseDown: (event: MouseEvent | TouchEvent) => void;
     handleHandleFocus: (index: number) => void;
     handleHandleBlur: (index: number) => void;