naive-ui 2.20.2 → 2.21.2

package/es/upload/src/Upload.js

@@ -68,6 +68,45 @@ function createXhrHandlers(inst, file, XHR) {
         }
     };
 }
+function customSubmitImpl(options) {
+    const { inst, file, data, headers, withCredentials, action, customRequest } = options;
+    const { doChange } = options.inst;
+    let percentage = 0;
+    customRequest({
+        file,
+        data,
+        headers,
+        withCredentials,
+        action,
+        onProgress(event) {
+            const fileAfterChange = Object.assign({}, file, {
+                status: 'uploading'
+            });
+            const progress = event.percent;
+            fileAfterChange.percentage = progress;
+            percentage = progress;
+            doChange(fileAfterChange);
+        },
+        onFinish() {
+            var _a;
+            let fileAfterChange = Object.assign({}, file, {
+                status: 'finished',
+                percentage,
+                file: null
+            });
+            fileAfterChange =
+                ((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange })) || fileAfterChange;
+            doChange(fileAfterChange);
+        },
+        onError() {
+            const fileAfterChange = Object.assign({}, file, {
+                status: 'error',
+                percentage
+            });
+            doChange(fileAfterChange);
+        }
+    });
+}
 function registerHandler(inst, file, request) {
     const handlers = createXhrHandlers(inst, file, request);
     request.onabort = handlers.handleXHRAbort;
@@ -120,7 +159,7 @@ function submitImpl(inst, file, formData, { method, action, withCredentials, hea
 const uploadProps = Object.assign(Object.assign({}, useTheme.props), { name: {
         type: String,
         default: 'file'
-    }, accept: String, action: String, 
+    }, accept: String, action: String, customRequest: Function, 
     // to be impl
     // directory: {
     //   type: Boolean,
@@ -149,10 +188,7 @@ const uploadProps = Object.assign(Object.assign({}, useTheme.props), { name: {
     }, showRemoveButton: {
         type: Boolean,
         default: true
-    }, showDownloadButton: {
-        type: Boolean,
-        default: false
-    }, showRetryButton: {
+    }, showDownloadButton: Boolean, showRetryButton: {
         type: Boolean,
         default: true
     }, showPreviewButton: {
@@ -264,17 +300,34 @@ export default defineComponent({
                 if (status === 'pending' || (status === 'error' && shouldReupload)) {
                     const formData = new FormData();
                     formData.append(fieldName, file.file);
-                    submitImpl({
-                        doChange,
-                        XhrMap,
-                        onFinish: props.onFinish
-                    }, file, formData, {
-                        method,
-                        action,
-                        withCredentials,
-                        headers,
-                        data
-                    });
+                    if (props.customRequest) {
+                        customSubmitImpl({
+                            inst: {
+                                doChange,
+                                XhrMap,
+                                onFinish: props.onFinish
+                            },
+                            file,
+                            action,
+                            withCredentials,
+                            headers,
+                            data,
+                            customRequest: props.customRequest
+                        });
+                    }
+                    else {
+                        submitImpl({
+                            doChange,
+                            XhrMap,
+                            onFinish: props.onFinish
+                        }, file, formData, {
+                            method,
+                            action,
+                            withCredentials,
+                            headers,
+                            data
+                        });
+                    }
                 }
             });
         }

package/es/upload/src/UploadFile.d.ts

@@ -84,9 +84,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -146,20 +150,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -205,7 +219,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHoverInfo: string;
                 colorPressedInfo: string;
                 colorFocusInfo: string;
-                colorDisabledInfo: string;
+                colorDisabledInfo: string; /** I haven't figure out its usage, so just leave it here */
                 textColorInfo: string;
                 textColorHoverInfo: string;
                 textColorPressedInfo: string;
@@ -306,9 +320,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;

package/es/upload/src/UploadProgress.d.ts

@@ -80,9 +80,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -142,20 +146,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -302,9 +316,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;

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

@@ -21,7 +21,7 @@ export declare type OnChange = (data: {
 }) => void;
 export declare type OnFinish = ({ file, event }: {
     file: FileInfo;
-    event: Event;
+    event?: Event;
 }) => FileInfo | undefined;
 export declare type OnRemove = (data: {
     file: FileInfo;
@@ -85,3 +85,16 @@ export declare type OnBeforeUpload = (data: {
 export declare type listType = 'text' | 'image' | 'image-card';
 export declare type OnPreview = (file: FileInfo) => void;
 export declare type CreateThumbnailUrl = (file: File) => Promise<string>;
+export interface CustomRequestOptions {
+    file: FileInfo;
+    action?: string;
+    withCredentials?: boolean;
+    data?: FuncOrRecordOrUndef;
+    headers?: FuncOrRecordOrUndef;
+    onProgress: (e: {
+        percent: number;
+    }) => void;
+    onFinish: () => void;
+    onError: () => void;
+}
+export declare type CustomRequest = (options: CustomRequestOptions) => void;

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

@@ -48,20 +48,30 @@ declare const uploadLight: import("../../_mixins").Theme<"Upload", {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
+        colorOpacitySecondary: number;
+        colorOpacitySecondaryHover: number;
+        colorOpacitySecondaryPressed: number;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        colorSecondaryPressed: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        colorTertiaryPressed: string;
+        colorQuaternary: string;
+        colorQuaternaryHover: string;
+        colorQuaternaryPressed: string;
         color: string;
         colorHover: string;
         colorPressed: string;
         colorFocus: string;
         colorDisabled: string;
         textColor: string;
+        textColorTertiary: string;
         textColorHover: string;
         textColorPressed: string;
         textColorFocus: string;
         textColorDisabled: string;
         textColorText: string;
-        textColorTextDepth1: string;
-        textColorTextDepth2: string;
-        textColorTextDepth3: string;
         textColorTextHover: string;
         textColorTextPressed: string;
         textColorTextFocus: string;
@@ -208,9 +218,8 @@ declare const uploadLight: import("../../_mixins").Theme<"Upload", {
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.20.2";
+declare const _default: "2.21.2";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.20.2';
+export default '2.21.2';

package/lib/_internal/scrollbar/src/ScrollBar.d.ts

@@ -120,6 +120,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     scrollTo: ScrollTo;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     containerScrollTop: import("vue").Ref<number>;
+    wrapperRef: import("vue").Ref<HTMLElement | null>;
     containerRef: import("vue").Ref<HTMLElement | null>;
     contentRef: import("vue").Ref<HTMLElement | null>;
     yRailRef: import("vue").Ref<HTMLElement | null>;

package/lib/_internal/scrollbar/src/ScrollBar.js

@@ -33,6 +33,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         // dom ref
+        const wrapperRef = (0, vue_1.ref)(null);
         const containerRef = (0, vue_1.ref)(null);
         const contentRef = (0, vue_1.ref)(null);
         const yRailRef = (0, vue_1.ref)(null);
@@ -291,6 +292,10 @@ const Scrollbar = (0, vue_1.defineComponent)({
             syncPositionState();
             syncScrollState();
         }
+        function isMouseUpAway(e) {
+            var _a;
+            return !((_a = wrapperRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.target));
+        }
         function handleXScrollMouseDown(e) {
             e.preventDefault();
             e.stopPropagation();
@@ -335,8 +340,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mouseup', window, handleXScrollMouseUp, true);
             xBarPressed = false;
             sync();
-            const { value: container } = mergedContainerRef;
-            if (!(container === null || container === void 0 ? void 0 : container.contains(e.target))) {
+            if (isMouseUpAway(e)) {
                 hideBar();
             }
         }
@@ -381,8 +385,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mouseup', window, handleYScrollMouseUp, true);
             yBarPressed = false;
             sync();
-            const { value: container } = mergedContainerRef;
-            if (!(container === null || container === void 0 ? void 0 : container.contains(e.target))) {
+            if (isMouseUpAway(e)) {
                 hideBar();
             }
         }
@@ -438,6 +441,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             scrollTo,
             mergedClsPrefix: mergedClsPrefixRef,
             containerScrollTop: containerScrollTopRef,
+            wrapperRef,
             containerRef,
             contentRef,
             yRailRef,
@@ -476,6 +480,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
         if (!this.scrollable)
             return (0, vue_1.renderSlot)($slots, 'default');
         const createChildren = () => (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
+            ref: 'wrapperRef',
             class: `${mergedClsPrefix}-scrollbar`,
             style: this.cssVars,
             onMouseenter: this.handleMouseEnterWrapper,

package/lib/_internal/select-menu/src/SelectMenu.d.ts

@@ -279,9 +279,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -460,8 +464,8 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     multiple: boolean;
     focusable: boolean;
-    clsPrefix: string;
     loading: boolean;
+    clsPrefix: string;
     scrollable: boolean;
     treeMate: SelectTreeMate;
     autoPending: boolean;

package/lib/_internal/selection/src/Selection.d.ts

@@ -332,9 +332,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -569,8 +573,8 @@ declare const _default: import("vue").DefineComponent<{
     active: boolean;
     disabled: boolean;
     autofocus: boolean;
-    clsPrefix: string;
     loading: boolean;
+    clsPrefix: string;
     showArrow: boolean;
     selectedOption: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null;
     selectedOptions: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null;

package/lib/_internal/suffix/src/Suffix.d.ts

@@ -12,7 +12,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
-    loading: BooleanConstructor;
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     onClear: PropType<(e: MouseEvent) => void>;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clsPrefix?: unknown;
@@ -21,8 +24,8 @@ declare const _default: import("vue").DefineComponent<{
     loading?: unknown;
     onClear?: unknown;
 } & {
-    clsPrefix: string;
     loading: boolean;
+    clsPrefix: string;
 } & {
     showArrow?: boolean | undefined;
     onClear?: ((e: MouseEvent) => void) | undefined;

package/lib/_internal/suffix/src/Suffix.js

@@ -23,7 +23,10 @@ exports.default = (0, vue_1.defineComponent)({
             type: Boolean,
             default: undefined
         },
-        loading: Boolean,
+        loading: {
+            type: Boolean,
+            default: false
+        },
         onClear: Function
     },
     setup(props) {

package/lib/_styles/common/dark.js

@@ -23,6 +23,7 @@ const base = {
     alphaDisabledInput: '0.06',
     alphaPending: '0.09',
     alphaTablePending: '0.06',
+    alphaTableStriped: '0.05',
     alphaPressed: '0.05',
     alphaAvatar: '0.18',
     alphaRail: '0.2',
@@ -92,5 +93,5 @@ const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.defaul
     // close
     closeColorHover: overlay(Number(base.alphaClose) * 1.25), closeColor: overlay(Number(base.alphaClose)), closeColorPressed: overlay(Number(base.alphaClose) * 0.8), closeColorDisabled: overlay(base.alpha4), 
     // clear
-    clearColor: overlay(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 1.25 }), clearColorPressed: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 0.8 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: overlay(base.alphaProgressRail), railColor: overlay(base.alphaRail), popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: neutral(base.alphaTag), avatarColor: overlay(base.alphaAvatar), invertedColor: base.neutralBase, inputColor: overlay(base.alphaInput), codeColor: overlay(base.alphaCode), tabColor: overlay(base.alphaTab), actionColor: overlay(base.alphaAction), tableHeaderColor: overlay(base.alphaAction), hoverColor: overlay(base.alphaPending), tableColorHover: overlay(base.alphaTablePending), pressedColor: overlay(base.alphaPressed), opacityDisabled: base.alphaDisabled, inputColorDisabled: overlay(base.alphaDisabledInput), boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
+    clearColor: overlay(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 1.25 }), clearColorPressed: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 0.8 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: overlay(base.alphaProgressRail), railColor: overlay(base.alphaRail), popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: neutral(base.alphaTag), avatarColor: overlay(base.alphaAvatar), invertedColor: base.neutralBase, inputColor: overlay(base.alphaInput), codeColor: overlay(base.alphaCode), tabColor: overlay(base.alphaTab), actionColor: overlay(base.alphaAction), tableHeaderColor: overlay(base.alphaAction), hoverColor: overlay(base.alphaPending), tableColorHover: overlay(base.alphaTablePending), tableColorStriped: overlay(base.alphaTableStriped), pressedColor: overlay(base.alphaPressed), opacityDisabled: base.alphaDisabled, inputColorDisabled: overlay(base.alphaDisabledInput), buttonColor2: 'rgba(255, 255, 255, .06)', buttonColor2Hover: 'rgba(255, 255, 255, .09)', buttonColor2Pressed: 'rgba(255, 255, 255, .05)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
 exports.default = derived;

package/lib/_styles/common/light.d.ts

@@ -67,9 +67,13 @@ declare const derived: {
     tableHeaderColor: string;
     hoverColor: string;
     tableColorHover: string;
+    tableColorStriped: string;
     pressedColor: string;
     opacityDisabled: string;
     inputColorDisabled: string;
+    buttonColor2: string;
+    buttonColor2Hover: string;
+    buttonColor2Pressed: string;
     boxShadow1: string;
     boxShadow2: string;
     boxShadow3: string;

package/lib/_styles/common/light.js

@@ -85,7 +85,7 @@ const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.defaul
     // error color
     errorColor: base.errorDefault, errorColorHover: base.errorHover, errorColorPressed: base.errorActive, errorColorSuppl: base.errorSuppl, 
     // text color
-    textColorBase: base.neutralTextBase, textColor1: 'rgb(31, 34, 37)', textColor2: 'rgb(51, 54, 57)', textColor3: 'rgb(158, 164, 170)', 
+    textColorBase: base.neutralTextBase, textColor1: 'rgb(31, 34, 37)', textColor2: 'rgb(51, 54, 57)', textColor3: 'rgb(118, 124, 130)', 
     // textColor4: neutral(base.alpha4), // disabled, placeholder, icon
     // textColor5: neutral(base.alpha5),
     textColorDisabled: neutral(base.alpha4), placeholderColor: neutral(base.alpha4), placeholderColorDisabled: neutral(base.alpha5), iconColor: neutral(base.alpha4), iconColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), iconColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), iconColorDisabled: neutral(base.alpha5), opacity1: base.alpha1, opacity2: base.alpha2, opacity3: base.alpha3, opacity4: base.alpha4, opacity5: base.alpha5, dividerColor: 'rgb(239, 239, 245)', borderColor: 'rgb(224, 224, 230)', 
@@ -94,5 +94,8 @@ const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.defaul
     // clear
     clearColor: neutral(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: 'rgb(250, 250, 252)', avatarColor: neutral(base.alphaAvatar), invertedColor: 'rgb(0, 20, 40)', inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(247, 247, 250)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', 
     // use color with alpha since it can be nested with header filter & sorter effect
-    tableColorHover: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
+    tableColorHover: 'rgba(0, 0, 100, 0.03)', tableColorStriped: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', 
+    // secondary button color
+    // can also be used in tertiary button & quaternary button
+    buttonColor2: 'rgba(46, 51, 56, .05)', buttonColor2Hover: 'rgba(46, 51, 56, .09)', buttonColor2Pressed: 'rgba(46, 51, 56, .13)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
 exports.default = derived;

package/lib/_styles/global/index.cssr.js

@@ -12,7 +12,13 @@ Object.defineProperty(exports, "__esModule", {
 
 const cssr_1 = require("../../_utils/cssr");
 
-const _common_1 = __importDefault(require("../common/_common")); // All the components need the style
+const _common_1 = __importDefault(require("../common/_common"));
+
+const {
+  fontSize,
+  fontFamily,
+  lineHeight
+} = _common_1.default; // All the components need the style
 // It is static and won't be changed in the app's lifetime
 // If user want to overrides it they need to use `n-global-style` is provided
 //
@@ -23,12 +29,11 @@ const _common_1 = __importDefault(require("../common/_common")); // All the comp
 // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
 // In some android devices, there will be the style.
 
-
 exports.default = (0, cssr_1.c)('body', `
  margin: 0;
- font-size: ${_common_1.default.fontSize};
- font-family: ${_common_1.default.fontFamily};
- line-height: ${_common_1.default.lineHeight};
+ font-size: ${fontSize};
+ font-family: ${fontFamily};
+ line-height: ${lineHeight};
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
 `, [(0, cssr_1.c)('input', `

package/lib/_styles/transitions/icon-switch.cssr.js

@@ -14,11 +14,16 @@ const cssr_1 = require("../../_utils/cssr");
 
 const _common_1 = __importDefault(require("../common/_common"));
 
+const {
+  cubicBezierEaseInOut,
+  transformDebounceScale
+} = _common_1.default;
+
 function default_1({
   originalTransform = '',
   left = 0,
   top = 0,
-  transition = `all .3s ${_common_1.default.cubicBezierEaseInOut} !important`
+  transition = `all .3s ${cubicBezierEaseInOut} !important`
 } = {}) {
   return [(0, cssr_1.c)('&.icon-switch-transition-enter-from, &.icon-switch-transition-leave-to', {
     transform: originalTransform + ' scale(0.75)',
@@ -26,7 +31,7 @@ function default_1({
     top,
     opacity: 0
   }), (0, cssr_1.c)('&.icon-switch-transition-enter-to, &.icon-switch-transition-leave-from', {
-    transform: `${_common_1.default.transformDebounceScale} ${originalTransform}`,
+    transform: `${transformDebounceScale} ${originalTransform}`,
     left,
     top,
     opacity: 1

package/lib/_utils/naive/extract-public-props.d.ts

@@ -1,6 +1,6 @@
 import { ExtractPropTypes } from 'vue';
 import { useTheme } from '../../_mixins';
 declare type themePropKeys = keyof typeof useTheme.props;
-export declare type ExtractPublicPropTypes<T> = Omit<Partial<ExtractPropTypes<T>>, themePropKeys | Extract<keyof T, `internal${string}`>>;
+export declare type ExtractPublicPropTypes<T> = Omit<Partial<ExtractPropTypes<T>>, Exclude<themePropKeys, 'themeOverrides'> | Extract<keyof T, `internal${string}`>>;
 export declare type ExtractInternalPropTypes<T> = Partial<ExtractPropTypes<T>>;
 export {};

package/lib/alert/src/Alert.d.ts

@@ -437,9 +437,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, InputHTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
 import { MaybeArray } from '../../_utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
@@ -34,6 +34,7 @@ declare const autoCompleteProps: {
     readonly blurAfterSelect: BooleanConstructor;
     readonly clearAfterSelect: BooleanConstructor;
     readonly getShow: PropType<(inputValue: string) => boolean>;
+    readonly inputProps: PropType<InputHTMLAttributes>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -430,6 +431,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly blurAfterSelect: BooleanConstructor;
     readonly clearAfterSelect: BooleanConstructor;
     readonly getShow: PropType<(inputValue: string) => boolean>;
+    readonly inputProps: PropType<InputHTMLAttributes>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -889,9 +891,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -1084,6 +1090,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly blurAfterSelect?: unknown;
     readonly clearAfterSelect?: unknown;
     readonly getShow?: unknown;
+    readonly inputProps?: unknown;
     readonly size?: unknown;
     readonly options?: unknown;
     readonly zIndex?: unknown;
@@ -1463,6 +1470,7 @@ declare const _default: import("vue").DefineComponent<{
     loading?: boolean | undefined;
     bordered?: boolean | undefined;
     clearable?: boolean | undefined;
+    inputProps?: InputHTMLAttributes | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     getShow?: ((inputValue: string) => boolean) | undefined;