naive-ui 2.22.0 → 2.24.0

package/es/radio/src/styles/radio-group.cssr.js

@@ -1,34 +1,34 @@
 import { cB, cE, cM, c, cNotM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --button-border-color
-// --height
-// --opacity-disabled
-// --font-size
+// --n-bezier
+// --n-button-border-color
+// --n-height
+// --n-opacity-disabled
+// --n-font-size
 
 export default cB('radio-group', `
  display: inline-block;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
 `, [cE('splitor', `
  display: inline-block;
  vertical-align: bottom;
  width: 1px;
  transition:
- background-color .3s var(--bezier),
- opacity .3s var(--bezier);
- background: var(--button-border-color);
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier);
+ background: var(--n-button-border-color);
  `, [cM('checked', {
-  backgroundColor: 'var(--button-border-color-active)'
+  backgroundColor: 'var(--n-button-border-color-active)'
 }), cM('disabled', {
-  opacity: 'var(--opacity-disabled)'
+  opacity: 'var(--n-opacity-disabled)'
 })]), cM('button-group', `
  white-space: nowrap;
- height: var(--height);
- line-height: var(--height);
+ height: var(--n-height);
+ line-height: var(--n-height);
  `, [cB('radio-button', {
-  height: 'var(--height)',
-  lineHeight: 'var(--height)'
+  height: 'var(--n-height)',
+  lineHeight: 'var(--n-height)'
 }), cE('splitor', {
-  height: 'var(--height)'
+  height: 'var(--n-height)'
 })]), cB('radio-button', `
  vertical-align: bottom;
  outline: none;
@@ -40,13 +40,13 @@ export default cB('radio-group', `
  padding-right: 14px;
  white-space: nowrap;
  transition:
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
- color: var(--button-text-color);
- border-top: 1px solid var(--button-border-color);
- border-bottom: 1px solid var(--button-border-color);
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ color: var(--n-button-text-color);
+ border-top: 1px solid var(--n-button-border-color);
+ border-bottom: 1px solid var(--n-button-border-color);
  `, [cB('radio-input', `
  position: absolute;
  border: 0;
@@ -60,40 +60,40 @@ export default cB('radio-group', `
  `), cE('state-border', `
  pointer-events: none;
  position: absolute;
- box-shadow: var(--button-box-shadow);
- transition: box-shadow .3s var(--bezier);
+ box-shadow: var(--n-button-box-shadow);
+ transition: box-shadow .3s var(--n-bezier);
  left: -1px;
  bottom: -1px;
  right: -1px;
  top: -1px;
  `), c('&:first-child', `
- border-top-left-radius: var(--button-border-radius);
- border-bottom-left-radius: var(--button-border-radius);
- border-left: 1px solid var(--button-border-color);
+ border-top-left-radius: var(--n-button-border-radius);
+ border-bottom-left-radius: var(--n-button-border-radius);
+ border-left: 1px solid var(--n-button-border-color);
  `, [cE('state-border', `
- border-top-left-radius: var(--button-border-radius);
- border-bottom-left-radius: var(--button-border-radius);
+ border-top-left-radius: var(--n-button-border-radius);
+ border-bottom-left-radius: var(--n-button-border-radius);
  `)]), c('&:last-child', `
- border-top-right-radius: var(--button-border-radius);
- border-bottom-right-radius: var(--button-border-radius);
- border-right: 1px solid var(--button-border-color);
+ border-top-right-radius: var(--n-button-border-radius);
+ border-bottom-right-radius: var(--n-button-border-radius);
+ border-right: 1px solid var(--n-button-border-color);
  `, [cE('state-border', `
- border-top-right-radius: var(--button-border-radius);
- border-bottom-right-radius: var(--button-border-radius);
+ border-top-right-radius: var(--n-button-border-radius);
+ border-bottom-right-radius: var(--n-button-border-radius);
  `)]), cNotM('disabled', `
  cursor: pointer;
  `, [c('&:hover', [cE('state-border', `
- transition: box-shadow .3s var(--bezier);
- box-shadow: var(--button-box-shadow-hover);
+ transition: box-shadow .3s var(--n-bezier);
+ box-shadow: var(--n-button-box-shadow-hover);
  `), cNotM('checked', {
-  color: 'var(--button-text-color-hover)'
+  color: 'var(--n-button-text-color-hover)'
 })]), cM('focus', [c('&:not(:active)', [cE('state-border', {
-  boxShadow: 'var(--button-box-shadow-focus)'
+  boxShadow: 'var(--n-button-box-shadow-focus)'
 })])])]), cM('checked', `
- background: var(--button-color-active);
- color: var(--button-text-color-active);
- border-color: var(--button-border-color-active);
+ background: var(--n-button-color-active);
+ color: var(--n-button-text-color-active);
+ border-color: var(--n-button-border-color-active);
  `), cM('disabled', `
  cursor: not-allowed;
- opacity: var(--opacity-disabled);
+ opacity: var(--n-opacity-disabled);
  `)])]);

package/es/radio/src/styles/radio.cssr.js

@@ -1,19 +1,19 @@
 import { c, cE, cM, cNotM, cB } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --box-shadow
-// --box-shadow-active
-// --box-shadow-disabled
-// --box-shadow-focus
-// --box-shadow-hover
-// --color
-// --color-disabled
-// --dot-color-active
-// --dot-color-disabled
-// --font-size
-// --radio-size
-// --text-color
-// --text-color-disabled
-// --label-padding
+// --n-bezier
+// --n-box-shadow
+// --n-box-shadow-active
+// --n-box-shadow-disabled
+// --n-box-shadow-focus
+// --n-box-shadow-hover
+// --n-color
+// --n-color-disabled
+// --n-dot-color-active
+// --n-dot-color-disabled
+// --n-font-size
+// --n-radio-size
+// --n-text-color
+// --n-text-color-disabled
+// --n-label-padding
 
 export default cB('radio', `
  line-height: 1;
@@ -23,10 +23,10 @@ export default cB('radio', `
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
 `, [cE('dot', `
- height: var(--radio-size);
- width: var(--radio-size);
+ height: var(--n-radio-size);
+ width: var(--n-radio-size);
  `), cB('radio-input', `
  position: absolute;
  border: 0;
@@ -37,12 +37,13 @@ export default cB('radio', `
  bottom: 0;
  opacity: 0;
  z-index: 1;
+ cursor: pointer;
  `), cE('dot', `
- background: var(--color);
- box-shadow: var(--box-shadow);
+ background: var(--n-color);
+ box-shadow: var(--n-box-shadow);
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  position: relative;
  border-radius: 50%;
  `, [c('&::before', `
@@ -55,38 +56,40 @@ export default cB('radio', `
  width: calc(100% - 8px);
  border-radius: 50%;
  transform: scale(.8);
- background: var(--dot-color-active);
+ background: var(--n-dot-color-active);
  transition: 
- opacity .3s var(--bezier),
- background-color .3s var(--bezier),
- transform .3s var(--bezier);
+ opacity .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ transform .3s var(--n-bezier);
  `), cM('checked', {
-  boxShadow: 'var(--box-shadow-active)'
+  boxShadow: 'var(--n-box-shadow-active)'
 }, [c('&::before', `
  opacity: 1;
  transform: scale(1);
  `)])]), cE('label', `
- color: var(--text-color);
- padding: var(--label-padding);
+ color: var(--n-text-color);
+ padding: var(--n-label-padding);
  display: inline-block;
  white-space: nowrap;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `), cNotM('disabled', `
  cursor: pointer;
  `, [c('&:hover', [cE('dot', {
-  boxShadow: 'var(--box-shadow-hover)'
+  boxShadow: 'var(--n-box-shadow-hover)'
 })]), cM('focus', [c('&:not(:active)', [cE('dot', {
-  boxShadow: 'var(--box-shadow-focus)'
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])])]), cM('disabled', `
  cursor: not-allowed;
  `, [cE('dot', {
-  boxShadow: 'var(--box-shadow-disabled)',
-  backgroundColor: 'var(--color-disabled)'
+  boxShadow: 'var(--n-box-shadow-disabled)',
+  backgroundColor: 'var(--n-color-disabled)'
 }, [c('&::before', {
-  backgroundColor: 'var(--dot-color-disabled)'
+  backgroundColor: 'var(--n-dot-color-disabled)'
 }), cM('checked', `
  transform: scale(1);
  opacity: 1;
  `)]), cE('label', {
-  color: 'var(--text-color-disabled)'
-})])]);
+  color: 'var(--n-text-color-disabled)'
+}), cB('radio-input', `
+ cursor: not-allowed;
+ `)])]);

package/es/rate/src/Rate.d.ts

@@ -90,10 +90,10 @@ declare const _default: import("vue").DefineComponent<{
     handleClick: (index: number, e: MouseEvent) => void;
     handleMouseLeave: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--item-color': string;
-        '--item-color-active': string;
-        '--item-size': string;
+        '--n-bezier': string;
+        '--n-item-color': string;
+        '--n-item-color-active': string;
+        '--n-item-size': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly allowHalf?: unknown;

package/es/rate/src/Rate.js

@@ -81,10 +81,10 @@ export default defineComponent({
                     mergedSize = self[createKey('size', size)];
                 }
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--item-color': itemColor,
-                    '--item-color-active': props.color || itemColorActive,
-                    '--item-size': mergedSize
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-item-color': itemColor,
+                    '--n-item-color-active': props.color || itemColorActive,
+                    '--n-item-size': mergedSize
                 };
             })
         };

package/es/rate/src/styles/index.cssr.js

@@ -1,28 +1,28 @@
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --item-color
-// --item-color-active
+// --n-bezier
+// --n-item-color
+// --n-item-color-active
 
 export default cB('rate', {
   display: 'inline-flex',
   flexWrap: 'nowrap'
 }, [c('&:hover', [cE('item', `
  transition:
- transform .1s var(--bezier),
- color .3s var(--bezier);
+ transform .1s var(--n-bezier),
+ color .3s var(--n-bezier);
  `)]), cE('item', `
  position: relative;
  display: flex;
  transition:
- transform .1s var(--bezier),
- color .3s var(--bezier);
+ transform .1s var(--n-bezier),
+ color .3s var(--n-bezier);
  transform: scale(1);
- font-size: var(--item-size);
- color: var(--item-color);
+ font-size: var(--n-item-size);
+ color: var(--n-item-color);
  `, [c('&:not(:first-child)', {
   marginLeft: '6px'
 }), cM('active', {
-  color: 'var(--item-color-active)'
+  color: 'var(--n-item-color-active)'
 })]), cNotM('readonly', `
  cursor: pointer;
  `, [cE('item', [c('&:hover', {
@@ -40,5 +40,5 @@ export default cB('rate', {
  overflow: hidden;
  color: rgba(255, 255, 255, 0);
  `, [cM('active', {
-  color: 'var(--item-color-active)'
+  color: 'var(--n-item-color-active)'
 })])]);

package/es/result/src/Result.d.ts

@@ -183,15 +183,15 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--font-size': string;
-        '--icon-size': string;
-        '--line-height': string;
-        '--text-color': string;
-        '--title-font-size': string;
-        '--title-font-weight': string;
-        '--title-text-color': string;
-        '--icon-color': string | undefined;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-icon-size': string;
+        '--n-line-height': string;
+        '--n-text-color': string;
+        '--n-title-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-title-text-color': string;
+        '--n-icon-color': string | undefined;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     size?: unknown;

package/es/result/src/Result.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed, renderSlot } from 'vue';
+import { h, defineComponent, computed } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { createKey } from '../../_utils';
 import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
@@ -9,13 +9,11 @@ import image500 from './500';
 import image418 from './418';
 import image403 from './403';
 import style from './styles/index.cssr';
-const imgMap = {
+const iconMap = {
     403: image403,
     404: image404,
     418: image418,
-    500: image500
-};
-const iconMap = {
+    500: image500,
     info: h(InfoIcon, null),
     success: h(SuccessIcon, null),
     warning: h(WarningIcon, null),
@@ -40,27 +38,28 @@ export default defineComponent({
                 const { size, status } = props;
                 const { common: { cubicBezierEaseInOut }, self: { textColor, lineHeight, titleTextColor, titleFontWeight, [createKey('iconColor', status)]: iconColor, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize, [createKey('iconSize', size)]: iconSize } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--icon-size': iconSize,
-                    '--line-height': lineHeight,
-                    '--text-color': textColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-text-color': titleTextColor,
-                    '--icon-color': iconColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-icon-size': iconSize,
+                    '--n-line-height': lineHeight,
+                    '--n-text-color': textColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-icon-color': iconColor
                 };
             })
         };
     },
     render() {
+        var _a;
         const { status, $slots, mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-result`, style: this.cssVars },
-            h("div", { class: `${mergedClsPrefix}-result-icon` }, status in imgMap ? (imgMap[status]) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconMap[status] }))),
+            h("div", { class: `${mergedClsPrefix}-result-icon` }, ((_a = $slots.icon) === null || _a === void 0 ? void 0 : _a.call($slots)) || (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconMap[status] }))),
             h("div", { class: `${mergedClsPrefix}-result-header` },
-                h("div", { class: `${mergedClsPrefix}-result-header__title` }, this.title),
-                h("div", { class: `${mergedClsPrefix}-result-header__description` }, this.description)),
-            $slots.default ? (h("div", { class: `${mergedClsPrefix}-result-content` }, $slots)) : null,
-            h("div", { class: `${mergedClsPrefix}-result-footer` }, renderSlot($slots, 'footer'))));
+                this.title ? (h("div", { class: `${mergedClsPrefix}-result-header__title` }, this.title)) : null,
+                this.description ? (h("div", { class: `${mergedClsPrefix}-result-header__description` }, this.description)) : null),
+            $slots.default && (h("div", { class: `${mergedClsPrefix}-result-content` }, $slots)),
+            $slots.footer && (h("div", { class: `${mergedClsPrefix}-result-footer` }, $slots.footer()))));
     }
 });

package/es/result/src/styles/index.cssr.js

@@ -1,43 +1,43 @@
-import { c, cB, cE } from '../../../_utils/cssr'; // --bezier
-// --font-size
-// --icon-size
-// --line-height
-// --text-color
-// --title-font-size
-// --title-font-weight
-// --title-text-color
+import { cB, cE } from '../../../_utils/cssr'; // --n-bezier
+// --n-font-size
+// --n-icon-size
+// --n-line-height
+// --n-text-color
+// --n-title-font-size
+// --n-title-font-weight
+// --n-title-text-color
 
 export default cB('result', `
- color: var(--text-color);
- line-height: var(--line-height);
- font-size: var(--font-size);
+ color: var(--n-text-color);
+ line-height: var(--n-line-height);
+ font-size: var(--n-font-size);
  transition:
- color .3s var(--bezier);
+ color .3s var(--n-bezier);
 `, [cB('result-icon', `
- height: 1em;
  display: flex;
  justify-content: center;
- transition: color .3s var(--bezier);
- color: var(--icon-color);
- font-size: var(--icon-size);
- `, [cE('status-image', {
-  width: '1em'
-}), c('svg', {
-  height: '1em'
-})]), cB('result-content', {
+ transition: color .3s var(--n-bezier);
+ `, [cE('status-image', `
+ font-size: var(--n-icon-size);
+ width: 1em;
+ height: 1em;
+ `), cB('base-icon', `
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size);
+ `)]), cB('result-content', {
   marginTop: '24px'
 }), cB('result-footer', `
  margin-top: 24px;
  text-align: center;
  `), cB('result-header', [cE('title', `
  margin-top: 16px;
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
  text-align: center;
- color: var(--title-text-color);
- font-size: var(--title-font-size);
+ color: var(--n-title-text-color);
+ font-size: var(--n-title-font-size);
  `), cE('description', `
  margin-top: 4px;
  text-align: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  `)])]);

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

@@ -3,8 +3,7 @@ import { TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface';
 import { RenderTag } from '../../_internal/selection/src/interface';
-import { ExtractPublicPropTypes } from '../../_utils';
-import type { MaybeArray } from '../../_utils';
+import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import { defaultFilter } from './utils';
 import type { SelectMixedOption, SelectBaseOption, SelectGroupOption, SelectIgnoredOption, OnUpdateValue, Value, Size, ValueAtom } from './interface';
 declare const selectProps: {
@@ -94,21 +93,13 @@ declare const selectProps: {
     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>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly items: {
-        readonly type: PropType<SelectMixedOption[] | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
     readonly displayDirective: {
         readonly type: PropType<"show" | "if">;
         readonly default: "show";
     };
+    /** deprecated */
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
+    readonly items: PropType<SelectMixedOption[]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Select", {
         menuBoxShadow: string;
     }, {
@@ -570,21 +561,13 @@ declare const _default: import("vue").DefineComponent<{
     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>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly items: {
-        readonly type: PropType<SelectMixedOption[] | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
     readonly displayDirective: {
         readonly type: PropType<"show" | "if">;
         readonly default: "show";
     };
+    /** deprecated */
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
+    readonly items: PropType<SelectMixedOption[]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Select", {
         menuBoxShadow: string;
     }, {
@@ -1280,7 +1263,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--menu-box-shadow': string;
+        '--n-menu-box-shadow': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly to?: unknown;
@@ -1321,9 +1304,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSearch?: unknown;
     readonly onUpdateShow?: unknown;
     readonly 'onUpdate:show'?: unknown;
+    readonly displayDirective?: unknown;
     readonly onChange?: unknown;
     readonly items?: unknown;
-    readonly displayDirective?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -1748,11 +1731,9 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean | undefined;
     multiple: boolean;
     disabled: boolean | undefined;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     loading: boolean;
     placement: FollowerPlacement;
-    items: SelectMixedOption[] | undefined;
     bordered: boolean | undefined;
     virtualScroll: boolean;
     showArrow: boolean;

package/es/select/src/Select.js

@@ -1,11 +1,11 @@
-import { h, ref, computed, toRef, defineComponent, nextTick, watch, Transition, withDirectives, vShow } from 'vue';
+import { h, ref, computed, toRef, defineComponent, nextTick, watch, Transition, withDirectives, vShow, watchEffect } from 'vue';
 import { happensIn } from 'seemly';
 import { createTreeMate } from 'treemate';
 import { VBinder, VFollower, VTarget } from 'vueuc';
 import { useIsMounted, useMergedState, useCompitable } from 'vooks';
 import { clickoutside } from 'vdirs';
 import { useTheme, useConfig, useLocale, useFormItem } from '../../_mixins';
-import { warn, call, useAdjustedTo } from '../../_utils';
+import { call, useAdjustedTo, warnOnce } from '../../_utils';
 import { NInternalSelectMenu, NInternalSelection } from '../../_internal';
 import { selectLight } from '../styles';
 import { tmOptions, createValOptMap, filterOptions, defaultFilter } from './utils';
@@ -57,34 +57,26 @@ const selectProps = Object.assign(Object.assign({}, useTheme.props), { to: useAd
         default: true
     }, renderLabel: Function, renderOption: Function, renderTag: Function, 'onUpdate:value': [Function, Array], inputProps: Object, 
     // for jsx
-    onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array], 
-    /** deprecated */
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('select', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, items: {
-        type: Array,
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('select', '`items` is deprecated, please use `options` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, displayDirective: {
+    onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array], displayDirective: {
         type: String,
         default: 'show'
-    } });
+    }, 
+    /** deprecated */
+    onChange: [Function, Array], items: Array });
 export default defineComponent({
     name: 'Select',
     props: selectProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.items !== undefined) {
+                    warnOnce('select', '`items` is deprecated, please use `options` instead.');
+                }
+                if (props.onChange !== undefined) {
+                    warnOnce('select', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = useConfig(props);
         const themeRef = useTheme('Select', 'Select', style, selectLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = ref(props.defaultValue);
@@ -575,7 +567,7 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { menuBoxShadow } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow
+                    '--n-menu-box-shadow': menuBoxShadow
                 };
             })
         };