naive-ui 2.18.0 → 2.19.1

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;

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

@@ -6,7 +6,7 @@ import { RenderTag } from '../../_internal/selection/src/interface';
 import { ExtractPublicPropTypes } from '../../_utils';
 import type { MaybeArray } from '../../_utils';
 import { defaultFilter } from './utils';
-import type { SelectMixedOption, SelectBaseOption, SelectGroupOption, SelectIgnoredOption, OnUpdateValue, Value, Size } from './interface';
+import type { SelectMixedOption, SelectBaseOption, SelectGroupOption, SelectIgnoredOption, OnUpdateValue, Value, Size, ValueAtom } from './interface';
 declare const selectProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -90,6 +90,8 @@ declare const selectProps: {
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onScroll: PropType<MaybeArray<(e: Event) => void> | undefined>;
     readonly onSearch: PropType<MaybeArray<(value: string) => void> | undefined>;
+    readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     /** deprecated */
     readonly onChange: {
         readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
@@ -159,6 +161,7 @@ declare const selectProps: {
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -195,6 +198,7 @@ declare const selectProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -281,6 +285,7 @@ declare const selectProps: {
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -317,6 +322,7 @@ declare const selectProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -403,6 +409,7 @@ declare const selectProps: {
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -439,6 +446,7 @@ declare const selectProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -556,6 +564,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onScroll: PropType<MaybeArray<(e: Event) => void> | undefined>;
     readonly onSearch: PropType<MaybeArray<(value: string) => void> | undefined>;
+    readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     /** deprecated */
     readonly onChange: {
         readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
@@ -625,6 +635,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -661,6 +672,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -747,6 +759,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -783,6 +796,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -869,6 +883,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -905,6 +920,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -958,8 +974,8 @@ declare const _default: import("vue").DefineComponent<{
     uncontrolledShow: import("vue").Ref<boolean>;
     mergedShow: import("vue").ComputedRef<boolean>;
     adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
-    uncontrolledValue: import("vue").Ref<string[] | number[] | import("./interface").ValueAtom | import("./interface").ValueAtom[] | null>;
-    mergedValue: import("vue").ComputedRef<string[] | number[] | import("./interface").ValueAtom | import("./interface").ValueAtom[] | null>;
+    uncontrolledValue: import("vue").Ref<string[] | number[] | ValueAtom | ValueAtom[] | null>;
+    mergedValue: import("vue").ComputedRef<string[] | number[] | ValueAtom | ValueAtom[] | null>;
     followerRef: import("vue").Ref<{
         syncPosition: () => void;
     } | null>;
@@ -1143,6 +1159,7 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeLarge: string;
                 paddingSingle: string;
                 clearSize: string;
+                arrowSize: string;
             }, {
                 Popover: import("../../_mixins").Theme<"Popover", {
                     fontSize: string;
@@ -1179,6 +1196,7 @@ declare const _default: import("vue").DefineComponent<{
                 optionOpacityDisabled: string;
                 optionCheckColor: string;
                 optionColorPending: string;
+                optionColorActive: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -1291,6 +1309,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly onFocus?: unknown;
     readonly onScroll?: unknown;
     readonly onSearch?: unknown;
+    readonly onUpdateShow?: unknown;
+    readonly 'onUpdate:show'?: unknown;
     readonly onChange?: unknown;
     readonly items?: unknown;
     readonly displayDirective?: unknown;
@@ -1380,6 +1400,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -1416,6 +1437,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1502,6 +1524,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -1538,6 +1561,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1624,6 +1648,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -1660,6 +1685,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1696,6 +1722,8 @@ declare const _default: import("vue").DefineComponent<{
     bordered?: boolean | undefined;
     renderLabel?: RenderLabel | undefined;
     renderOption?: RenderOption | undefined;
+    "onUpdate:show"?: MaybeArray<(value: boolean) => void> | undefined;
+    onUpdateShow?: MaybeArray<(value: boolean) => void> | undefined;
     onClear?: MaybeArray<() => void> | undefined;
     renderTag?: RenderTag | undefined;
     maxTagCount?: number | "responsive" | undefined;