naive-ui 2.18.1 → 2.19.2

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

@@ -13,6 +13,7 @@ export interface PopoverInjection {
     handleClickOutside: (e: MouseEvent) => void;
     getTriggerElement: () => HTMLElement;
     setBodyInstance: (value: BodyInstance | null) => void;
+    zIndexRef: Ref<number | undefined>;
     internalRenderBodyRef: Ref<InternalRenderBody | undefined>;
     positionManuallyRef: ComputedRef<boolean>;
     isMountedRef: Ref<boolean>;
@@ -74,18 +75,11 @@ export declare const popoverBaseProps: {
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    zIndex: NumberConstructor;
     /** @deprecated */
-    onShow: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
-    onHide: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
     arrow: {
         type: PropType<boolean | undefined>;
@@ -153,18 +147,11 @@ declare const popoverProps: {
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    zIndex: NumberConstructor;
     /** @deprecated */
-    onShow: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
-    onHide: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
     arrow: {
         type: PropType<boolean | undefined>;
@@ -276,18 +263,11 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    zIndex: NumberConstructor;
     /** @deprecated */
-    onShow: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
-    onHide: {
-        type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
     arrow: {
         type: PropType<boolean | undefined>;
@@ -377,6 +357,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside?: unknown;
     'onUpdate:show'?: unknown;
     onUpdateShow?: unknown;
+    zIndex?: unknown;
     onShow?: unknown;
     onHide?: unknown;
     arrow?: unknown;
@@ -406,6 +387,7 @@ declare const _default: import("vue").DefineComponent<{
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
     width?: number | "trigger" | undefined;
+    zIndex?: number | undefined;
     theme?: import("../../_mixins").Theme<"Popover", {
         fontSize: string;
         borderRadius: string;
@@ -473,8 +455,6 @@ declare const _default: import("vue").DefineComponent<{
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
-    onShow: MaybeArray<(value: boolean) => void> | undefined;
-    onHide: MaybeArray<(value: boolean) => void> | undefined;
     arrow: boolean | undefined;
 }>;
 export default _default;

package/es/popover/src/Popover.js

@@ -1,7 +1,7 @@
-import { h, ref, computed, createTextVNode, defineComponent, provide, toRef, cloneVNode } from 'vue';
+import { h, ref, computed, createTextVNode, defineComponent, provide, toRef, cloneVNode, watchEffect } from 'vue';
 import { VBinder, VTarget } from 'vueuc';
 import { useMergedState, useCompitable, useIsMounted, useMemo } from 'vooks';
-import { call, keep, warn, getFirstSlotVNode } from '../../_utils';
+import { call, keep, getFirstSlotVNode, warnOnce } from '../../_utils';
 import { useTheme } from '../../_mixins';
 import NPopoverBody, { popoverBodyProps } from './PopoverBody';
 const bodyPropKeys = Object.keys(popoverBodyProps);
@@ -88,24 +88,11 @@ export const popoverBaseProps = {
     // events
     'onUpdate:show': [Function, Array],
     onUpdateShow: [Function, Array],
+    zIndex: Number,
     /** @deprecated */
-    onShow: {
-        type: [Function, Array],
-        validator: () => {
-            warn('popover', '`on-show` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    },
+    onShow: [Function, Array],
     /** @deprecated */
-    onHide: {
-        type: [Function, Array],
-        validator: () => {
-            warn('popover', '`on-hide` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    },
+    onHide: [Function, Array],
     /** @deprecated */
     arrow: {
         type: Boolean,
@@ -122,6 +109,25 @@ export default defineComponent({
     inheritAttrs: false,
     props: popoverProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.maxWidth !== undefined) {
+                    warnOnce('popover', '`max-width` is deprecated, please use `style` instead.');
+                }
+                if (props.minWidth !== undefined) {
+                    warnOnce('popover', '`max-width` is deprecated, please use `style` instead.');
+                }
+                if (props.arrow !== undefined) {
+                    warnOnce('popover', '`arrow` is deprecated, please use `showArrow` instead.');
+                }
+                if (props.onHide !== undefined) {
+                    warnOnce('popover', '`on-hide` is deprecated, please use `on-update:show` instead.');
+                }
+                if (props.onShow !== undefined) {
+                    warnOnce('popover', '`on-show` is deprecated, please use `on-update:show` instead.');
+                }
+            });
+        }
         const isMountedRef = useIsMounted();
         // setup show
         const controlledShowRef = computed(() => props.show);
@@ -297,6 +303,7 @@ export default defineComponent({
             setBodyInstance,
             positionManuallyRef: positionManuallyRef,
             isMountedRef: isMountedRef,
+            zIndexRef: toRef(props, 'zIndex'),
             extraClassRef: toRef(props, 'internalExtraClass'),
             internalRenderBodyRef: toRef(props, 'internalRenderBody')
         });

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

@@ -1,6 +1,5 @@
 import { PropType, CSSProperties, VNode } from 'vue';
 import { FollowerPlacement } from 'vueuc';
-import type { PopoverInjection } from './Popover';
 import type { PopoverTrigger } from './interface';
 export declare const popoverBodyProps: {
     to: {
@@ -142,7 +141,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     namespace: import("vue").ComputedRef<string | undefined>;
-    NPopover: PopoverInjection;
+    isMounted: import("vue").Ref<boolean>;
+    zIndex: import("vue").Ref<number | undefined>;
     followerRef: import("vue").Ref<{
         syncPosition: () => void;
     } | null>;

package/es/popover/src/PopoverBody.js

@@ -179,7 +179,8 @@ export default defineComponent({
         }
         return {
             namespace: namespaceRef,
-            NPopover,
+            isMounted: NPopover.isMountedRef,
+            zIndex: NPopover.zIndexRef,
             followerRef,
             adjustedTo: useAdjustedTo(props),
             followerEnabled: followerEnabledRef,
@@ -188,6 +189,7 @@ export default defineComponent({
     },
     render() {
         return h(VFollower, {
+            zIndex: this.zIndex,
             show: this.show,
             enabled: this.followerEnabled,
             to: this.adjustedTo,
@@ -204,7 +206,7 @@ export default defineComponent({
                 return this.animated
                     ? h(Transition, {
                         name: 'popover-transition',
-                        appear: this.NPopover.isMountedRef.value,
+                        appear: this.isMounted,
                         // Don't use watch to enable follower, since the transition may
                         // make position sync timing very subtle and buggy.
                         onEnter: () => {

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

@@ -76,16 +76,9 @@ declare const popselectProps: {
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
-    onShow: {
-        type: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
-    onHide: {
-        type: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    zIndex: NumberConstructor;
+    onShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
+    onHide: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     arrow: {
         type: PropType<boolean | undefined>;
         default: undefined;
@@ -127,6 +120,7 @@ declare const popselectProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -194,6 +188,7 @@ declare const popselectProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -261,6 +256,7 @@ declare const popselectProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -370,16 +366,9 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
-    onShow: {
-        type: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
-    onHide: {
-        type: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    zIndex: NumberConstructor;
+    onShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
+    onHide: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     arrow: {
         type: PropType<boolean | undefined>;
         default: undefined;
@@ -421,6 +410,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -488,6 +478,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -555,6 +546,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -728,6 +720,7 @@ declare const _default: import("vue").DefineComponent<{
                 optionOpacityDisabled: string;
                 optionCheckColor: string;
                 optionColorPending: string;
+                optionColorActive: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -824,6 +817,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside?: unknown;
     'onUpdate:show'?: unknown;
     onUpdateShow?: unknown;
+    zIndex?: unknown;
     onShow?: unknown;
     onHide?: unknown;
     arrow?: unknown;
@@ -859,6 +853,7 @@ declare const _default: import("vue").DefineComponent<{
     maxWidth?: number | undefined;
     minWidth?: number | undefined;
     width?: string | number | undefined;
+    zIndex?: number | undefined;
     onChange?: import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined;
     onMouseenter?: ((e: MouseEvent) => void) | undefined;
     onMouseleave?: ((e: MouseEvent) => void) | undefined;
@@ -897,6 +892,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -964,6 +960,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1031,6 +1028,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1094,8 +1092,6 @@ declare const _default: import("vue").DefineComponent<{
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
-    onShow: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
-    onHide: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
     arrow: boolean | undefined;
     options: import("../../select/src/interface").SelectMixedOption[];
     cancelable: boolean;

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

@@ -197,6 +197,7 @@ declare const _default: import("vue").DefineComponent<{
                 optionOpacityDisabled: string;
                 optionCheckColor: string;
                 optionColorPending: string;
+                optionColorActive: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;

package/es/popselect/src/PopselectPanel.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { h, computed, defineComponent, inject, toRef, watch, nextTick } from 'vue';
 import { createTreeMate } from 'treemate';
 import { tmOptions } from '../../select/src/utils';
@@ -45,42 +46,62 @@ export default defineComponent({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NPopselect = inject(popselectInjectionKey);
         const { mergedClsPrefixRef } = useConfig(props);
-        function doUpdateValue(value) {
+        const treeMateRef = computed(() => {
+            return createTreeMate(props.options, tmOptions);
+        });
+        function doUpdateValue(value, option) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             if (onUpdateValue)
-                call(onUpdateValue, value);
-            if (_onUpdateValue)
-                call(_onUpdateValue, value);
+                call(onUpdateValue, value, option);
+            if (_onUpdateValue) {
+                call(_onUpdateValue, value, option);
+            }
             if (onChange)
-                call(onChange, value);
+                call(onChange, value, option);
         }
         function handleToggle(tmNode) {
             toggle(tmNode.key);
         }
         function toggle(value) {
+            const { value: { getNode } } = treeMateRef;
             if (props.multiple) {
                 if (Array.isArray(props.value)) {
-                    const validValues = new Set(props.options.map((option) => option.value));
-                    const newValue = props.value.filter((v) => validValues.has(v));
-                    const index = newValue.findIndex((v) => v === value);
-                    if (~index) {
-                        newValue.splice(index, 1);
-                    }
-                    else {
+                    const newValue = [];
+                    const newOptions = [];
+                    let shouldAddValue = true;
+                    props.value.forEach((v) => {
+                        if (v === value) {
+                            shouldAddValue = false;
+                            return;
+                        }
+                        const tmNode = getNode(v);
+                        if (tmNode) {
+                            newValue.push(tmNode.key);
+                            newOptions.push(tmNode.rawNode);
+                        }
+                    });
+                    if (shouldAddValue) {
                         newValue.push(value);
+                        newOptions.push(getNode(value).rawNode);
                     }
-                    doUpdateValue(newValue);
+                    doUpdateValue(newValue, newOptions);
                 }
                 else {
-                    doUpdateValue([value]);
+                    const tmNode = getNode(value);
+                    if (tmNode) {
+                        doUpdateValue([value], [tmNode.rawNode]);
+                    }
                 }
             }
             else {
                 if (props.value === value && props.cancelable) {
-                    doUpdateValue(null);
+                    doUpdateValue(null, null);
                 }
                 else {
-                    doUpdateValue(value);
+                    const tmNode = getNode(value);
+                    if (tmNode) {
+                        doUpdateValue(value, tmNode.rawNode);
+                    }
                     NPopselect.setShow(false);
                 }
             }
@@ -96,9 +117,7 @@ export default defineComponent({
         return {
             mergedTheme: NPopselect.mergedThemeRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            treeMate: computed(() => {
-                return createTreeMate(props.options, tmOptions);
-            }),
+            treeMate: treeMateRef,
             handleToggle
         };
     },

package/es/popselect/styles/light.d.ts

@@ -33,6 +33,7 @@ declare const popselectLight: import("../../_mixins").Theme<"Popselect", unknown
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;