naive-ui 2.23.2 → 2.24.0

package/README.md

@@ -24,7 +24,7 @@
 
 ### Fairly Complete
 
-There are more than 70 components. Hope they can help you write less code.
+There are more than 80 components. Hope they can help you write less code.
 
 What's more, they are all treeshakable.
 

package/README.zh-CN.md

@@ -24,7 +24,7 @@
 
 ### 比较完整
 
-有超过 70 个组件，希望能帮你少写点代码。
+有超过 80 个组件，希望能帮你少写点代码。
 
 顺便一提，它们全都可以 treeshaking。
 

package/es/_internal/icons/Switcher.js

@@ -2,8 +2,7 @@ import { h, defineComponent } from 'vue';
 export default defineComponent({
     name: 'Switcher',
     render() {
-        return (h("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "enable-background": "new 0 0 512 512" },
-            h("g", null,
-                h("polygon", { points: "192,128 320,256 192,384" }))));
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
+            h("path", { d: "M12 8l10 8l-10 8z" })));
     }
 });

package/es/_internal/selection/src/styles/index.cssr.js

@@ -92,7 +92,7 @@ export default c([cB('base-selection', `
  position: relative;
  z-index: auto;
  display: flex;
- padding: 3px 26px 0 14px;
+ padding: 3px 26px 0 12px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;

package/es/_internal/selection/styles/_common.js

@@ -1,5 +1,5 @@
 export default {
-    paddingSingle: '0 26px 0 14px',
+    paddingSingle: '0 26px 0 12px',
     clearSize: '16px',
     arrowSize: '16px'
 };

package/es/auto-complete/src/AutoComplete.d.ts

@@ -1,9 +1,10 @@
 import { PropType, InputHTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
+import { RenderOption, RenderLabel } from '../../_internal/select-menu/src/interface';
 import { MaybeArray } from '../../_utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface';
-import { AutoCompleteOptions, OnUpdateValue, OnSelect } from './interface';
+import type { AutoCompleteOptions, OnUpdateValue, OnSelect } from './interface';
 declare const autoCompleteProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -35,6 +36,8 @@ declare const autoCompleteProps: {
     readonly clearAfterSelect: BooleanConstructor;
     readonly getShow: PropType<(inputValue: string) => boolean>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly renderOption: PropType<RenderOption>;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -46,11 +49,7 @@ declare const autoCompleteProps: {
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
@@ -432,6 +431,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly clearAfterSelect: BooleanConstructor;
     readonly getShow: PropType<(inputValue: string) => boolean>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly renderOption: PropType<RenderOption>;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -443,11 +444,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
@@ -1091,6 +1088,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly clearAfterSelect?: unknown;
     readonly getShow?: unknown;
     readonly inputProps?: unknown;
+    readonly renderOption?: unknown;
+    readonly renderLabel?: unknown;
     readonly size?: unknown;
     readonly options?: unknown;
     readonly zIndex?: unknown;
@@ -1469,6 +1468,8 @@ declare const _default: import("vue").DefineComponent<{
     }>> | undefined;
     loading?: boolean | undefined;
     bordered?: boolean | undefined;
+    renderLabel?: RenderLabel | undefined;
+    renderOption?: RenderOption | undefined;
     clearable?: boolean | undefined;
     inputProps?: InputHTMLAttributes | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
@@ -1476,7 +1477,6 @@ declare const _default: import("vue").DefineComponent<{
     getShow?: ((inputValue: string) => boolean) | undefined;
 }>, {
     disabled: boolean | undefined;
-    onInput: MaybeArray<OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     loading: boolean;
     bordered: boolean | undefined;

package/es/auto-complete/src/AutoComplete.js

@@ -1,16 +1,16 @@
-import { h, ref, toRef, computed, defineComponent, Transition, withDirectives } from 'vue';
+import { h, ref, toRef, computed, defineComponent, Transition, withDirectives, watchEffect } from 'vue';
 import { createTreeMate } from 'treemate';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { useIsMounted, useMergedState } from 'vooks';
+import { tmOptions } from '../../select/src/utils';
 import { useFormItem, useTheme, useConfig } from '../../_mixins';
-import { call, warn, useAdjustedTo, getFirstSlotVNode } from '../../_utils';
+import { call, useAdjustedTo, getFirstSlotVNode, warnOnce } from '../../_utils';
 import { NInternalSelectMenu } from '../../_internal';
 import { NInput } from '../../input';
 import { autoCompleteLight } from '../styles';
 import { mapAutoCompleteOptionsToSelectOptions } from './utils';
 import style from './styles/index.cssr';
-import { tmOptions } from '../../select/src/utils';
 const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
@@ -26,25 +26,23 @@ const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to:
     }, disabled: {
         type: Boolean,
         default: undefined
-    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, inputProps: Object, size: String, options: {
+    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, inputProps: Object, renderOption: Function, renderLabel: Function, size: String, options: {
         type: Array,
         default: () => []
     }, zIndex: Number, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onSelect: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
     // deprecated
-    onInput: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onInput: [Function, Array] });
 export default defineComponent({
     name: 'AutoComplete',
     props: autoCompleteProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onInput !== undefined) {
+                    warnOnce('auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef } = useConfig(props);
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -242,7 +240,7 @@ export default defineComponent({
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.active
                                 ? withDirectives(h(NInternalSelectMenu, { clsPrefix: mergedClsPrefix, ref: "menuInstRef", theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                        .InternalSelectMenu, "auto-pending": true, class: `${mergedClsPrefix}-auto-complete-menu`, style: this.cssVars, treeMate: this.treeMate, multiple: false, size: "medium", onToggle: this.handleToggle }), [[clickoutside, this.handleClickOutsideMenu]])
+                                        .InternalSelectMenu, "auto-pending": true, class: `${mergedClsPrefix}-auto-complete-menu`, style: this.cssVars, treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle }), [[clickoutside, this.handleClickOutsideMenu]])
                                 : null
                         }))
                     })

package/es/back-top/src/BackTop.d.ts

@@ -21,7 +21,7 @@ declare const backTopProps: {
         readonly type: NumberConstructor;
         readonly default: 180;
     };
-    readonly listenTo: PropType<string | HTMLElement | (() => HTMLElement)>;
+    readonly listenTo: PropType<string | HTMLElement | Document | (() => HTMLElement | Document)>;
     readonly 'onUpdate:show': {
         readonly type: FunctionConstructor;
         readonly default: () => void;
@@ -106,7 +106,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 180;
     };
-    readonly listenTo: PropType<string | HTMLElement | (() => HTMLElement)>;
+    readonly listenTo: PropType<string | HTMLElement | Document | (() => HTMLElement | Document)>;
     readonly 'onUpdate:show': {
         readonly type: FunctionConstructor;
         readonly default: () => void;
@@ -266,7 +266,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>> | undefined;
     onShow?: (() => void) | undefined;
     onHide?: (() => void) | undefined;
-    listenTo?: string | HTMLElement | (() => HTMLElement) | undefined;
+    listenTo?: string | HTMLElement | Document | (() => HTMLElement | Document) | undefined;
 }>, {
     right: string | number;
     bottom: string | number;

package/es/calendar/src/Calendar.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { OnUpdateValue, DateItem } from './interface';
+import type { OnUpdateValue, DateItem, OnPanelChange } from './interface';
 declare const calendarProps: {
     readonly isDateDisabled: PropType<(date: number) => boolean | undefined>;
     readonly value: NumberConstructor;
@@ -8,6 +8,7 @@ declare const calendarProps: {
         readonly type: PropType<number | null>;
         readonly defualt: null;
     };
+    readonly onPanelChange: PropType<OnPanelChange>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Calendar", {
@@ -700,6 +701,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<number | null>;
         readonly defualt: null;
     };
+    readonly onPanelChange: PropType<OnPanelChange>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Calendar", {
@@ -1788,6 +1790,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly isDateDisabled?: unknown;
     readonly value?: unknown;
     readonly defaultValue?: unknown;
+    readonly onPanelChange?: unknown;
     readonly 'onUpdate:value'?: unknown;
     readonly onUpdateValue?: unknown;
     readonly theme?: unknown;
@@ -2480,5 +2483,6 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     isDateDisabled?: ((date: number) => boolean | undefined) | undefined;
+    onPanelChange?: OnPanelChange | undefined;
 }>, {}>;
 export default _default;

package/es/calendar/src/Calendar.js

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h, ref, Fragment, toRef } from 'vue';
-import { format, getYear, addMonths, startOfDay, startOfMonth } from 'date-fns';
+import { format, getYear, addMonths, startOfDay, startOfMonth, getMonth } from 'date-fns';
 import { useMergedState } from 'vooks';
 import { dateArray } from '../../date-picker/src/utils';
 import { ChevronLeftIcon, ChevronRightIcon } from '../../_internal/icons';
@@ -12,7 +12,7 @@ import style from './styles/index.cssr';
 const calendarProps = Object.assign(Object.assign({}, useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
         type: Number,
         defualt: null
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+    }, onPanelChange: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
 export default defineComponent({
     name: 'Calendar',
     props: calendarProps,
@@ -36,10 +36,22 @@ export default defineComponent({
             uncontrolledValueRef.value = value;
         }
         function handlePrevClick() {
-            monthTsRef.value = addMonths(monthTsRef.value, -1).valueOf();
+            var _a;
+            const monthTs = addMonths(monthTsRef.value, -1).valueOf();
+            monthTsRef.value = monthTs;
+            (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                year: getYear(monthTs),
+                month: getMonth(monthTs) + 1
+            });
         }
         function handleNextClick() {
-            monthTsRef.value = addMonths(monthTsRef.value, 1).valueOf();
+            var _a;
+            const monthTs = addMonths(monthTsRef.value, 1).valueOf();
+            monthTsRef.value = monthTs;
+            (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                year: getYear(monthTs),
+                month: getMonth(monthTs) + 1
+            });
         }
         function handleTodayClick() {
             monthTsRef.value = startOfMonth(now).valueOf();

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

@@ -4,3 +4,7 @@ export interface DateItem {
     month: number;
     date: number;
 }
+export declare type OnPanelChange = (info: {
+    year: number;
+    month: number;
+}) => void;

package/es/carousel/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NCarousel } from './src/Carousel';
+export { default as NCarouselItem } from './src/CarouselItem';
 export type { CarouselProps } from './src/Carousel';

package/es/carousel/index.js

@@ -1 +1,2 @@
 export { default as NCarousel } from './src/Carousel';
+export { default as NCarouselItem } from './src/CarouselItem';