naive-ui 2.22.0 → 2.24.0

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

@@ -1,4 +1,5 @@
 import { Ref, InjectionKey, CSSProperties } from 'vue';
+import { ImageGroupProps } from '../../image';
 import type { MergedTheme } from '../../_mixins';
 import type { UploadTheme } from '../styles';
 export interface FileInfo {
@@ -21,7 +22,7 @@ export declare type OnChange = (data: {
 }) => void;
 export declare type OnFinish = ({ file, event }: {
     file: FileInfo;
-    event?: Event;
+    event?: ProgressEvent;
 }) => FileInfo | undefined;
 export declare type OnRemove = (data: {
     file: FileInfo;
@@ -31,7 +32,8 @@ export declare type OnDownload = (file: FileInfo) => Promise<boolean> | boolean
 export interface UploadInternalInst {
     doChange: DoChange;
     XhrMap: Map<string, XMLHttpRequest>;
-    onFinish?: OnFinish;
+    onError: OnError | undefined;
+    onFinish: OnFinish | undefined;
 }
 export declare type DoChange = (fileAfterChange: FileInfo, event?: ProgressEvent | Event, options?: {
     append?: boolean;
@@ -53,7 +55,7 @@ export interface UploadInjection {
     doChange: DoChange;
     showPreviewButtonRef: Ref<boolean>;
     onPreviewRef: Ref<OnPreview | undefined>;
-    listTypeRef: Ref<listType>;
+    listTypeRef: Ref<ListType>;
     dragOverRef: Ref<boolean>;
     draggerInsideRef: {
         value: boolean;
@@ -62,6 +64,7 @@ export interface UploadInjection {
     mergedDisabledRef: Ref<boolean>;
     maxReachedRef: Ref<boolean>;
     abstractRef: Ref<boolean>;
+    imageGroupPropsRef: Ref<ImageGroupProps | undefined>;
     cssVarsRef: Ref<CSSProperties>;
     submit: (fileId?: string) => void;
     getFileThumbnailUrl: (file: FileInfo) => Promise<string>;
@@ -83,7 +86,7 @@ export declare type OnBeforeUpload = (data: {
     file: FileInfo;
     fileList: FileInfo[];
 }) => Promise<unknown>;
-export declare type listType = 'text' | 'image' | 'image-card';
+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 {
@@ -99,3 +102,7 @@ export interface CustomRequestOptions {
     onError: () => void;
 }
 export declare type CustomRequest = (options: CustomRequestOptions) => void;
+export declare type OnError = ({ file, event }: {
+    file: FileInfo;
+    event?: ProgressEvent;
+}) => FileInfo | undefined;

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

@@ -4,33 +4,33 @@ import createIconSwitchTransition from '../../../_styles/transitions/icon-switch
 export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigger', `
  display: block;
  `)]), cM('drag-over', [cB('upload-dragger', `
- border: var(--dragger-border-hover);
+ border: var(--n-dragger-border-hover);
  `)])]), cB('upload-dragger', `
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  padding: 24px;
  opacity: 1;
  transition:
- opacity .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
- background-color: var(--dragger-color);
- border: var(--dragger-border);
+ opacity .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ background-color: var(--n-dragger-color);
+ border: var(--n-dragger-border);
  `, [c('&:hover', `
- border: var(--dragger-border-hover);
+ border: var(--n-dragger-border-hover);
  `), cM('disabled', `
- opacity: var(--item-disabled-opacity);
+ opacity: var(--n-item-disabled-opacity);
  cursor: not-allowed;
  `)]), cB('upload-trigger', `
  display: inline-block;
  box-sizing: border-box;
  opacity: 1;
- transition: opacity .3s var(--bezier);
+ transition: opacity .3s var(--n-bezier);
  `, [c('+', [cB('upload-file-list', 'margin-top: 8px;')]), cM('disabled', `
- opacity: var(--item-disabled-opacity);
+ opacity: var(--n-item-disabled-opacity);
  cursor: not-allowed;
  `), cM('image-card', `
  width: 96px;
@@ -45,11 +45,11 @@ export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigge
  align-items: center;
  justify-content: center;
  `)])]), cB('upload-file-list', `
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  opacity: 1;
- transition: opacity .3s var(--bezier);
+ transition: opacity .3s var(--n-bezier);
  `, [cM('disabled', `
- opacity: var(--item-disabled-opacity);
+ opacity: var(--n-item-disabled-opacity);
  cursor: not-allowed;
  `, [cB('upload-file', 'cursor: not-allowed;')]), cM('grid', `
  display: grid;
@@ -61,16 +61,16 @@ export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigge
  box-sizing: border-box;
  cursor: default;
  padding: 0px 12px 0 6px;
- transition: background-color .3s var(--bezier);
- border-radius: var(--border-radius);
+ transition: background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
  `, [fadeInHeightExpand(), cB('progress', [fadeInHeightExpand({
   foldPadding: true
 })]), c('&:hover', `
- background-color: var(--item-color-hover);
+ background-color: var(--n-item-color-hover);
  `, [cB('upload-file-info', [cE('action', `
  opacity: 1;
  `)])]), cM('image-type', `
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  text-decoration: underline;
  text-decoration-color: #0000;
  `, [cB('upload-file-info', `
@@ -104,14 +104,14 @@ export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigge
  position: relative;
  width: 96px;
  height: 96px;
- border: var(--item-border-image-card);
- border-radius: var(--border-radius);
+ border: var(--n-item-border-image-card);
+ border-radius: var(--n-border-radius);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
- transition: border-color .3s var(--bezier), background-color .3s var(--bezier);
- border-radius: var(--border-radius);
+ transition: border-color .3s var(--n-bezier), background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
  `, [cB('progress', `
  position: absolute;
  left: 8px;
@@ -141,17 +141,17 @@ export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigge
  bottom: 0;
  border-radius: inherit;
  opacity: 0;
- transition: opacity .2s var(--bezier);
+ transition: opacity .2s var(--n-bezier);
  content: "";
  `), c('&:hover', [c('&::before', 'opacity: 1;'), cB('upload-file-info', [cE('thumbnail', 'opacity: .12;')])])]), cM('error-status', [c('&:hover', `
- background-color: var(--item-color-hover-error);
- `), cB('upload-file-info', [cE('name', 'color: var(--item-text-color-error);'), cE('thumbnail', 'color: var(--item-text-color-error);')]), cM('image-card-type', `
- border: var(--item-border-image-card-error);
+ background-color: var(--n-item-color-hover-error);
+ `), cB('upload-file-info', [cE('name', 'color: var(--n-item-text-color-error);'), cE('thumbnail', 'color: var(--n-item-text-color-error);')]), cM('image-card-type', `
+ border: var(--n-item-border-image-card-error);
  `)]), cM('with-url', `
  cursor: pointer;
  `, [cB('upload-file-info', [cE('name', `
- color: var(--item-text-color-success);
- text-decoration-color: var(--item-text-color-success);
+ color: var(--n-item-text-color-success);
+ text-decoration-color: var(--n-item-text-color-success);
  `, [c('a', `
  text-decoration: underline;
  `)])])]), cB('upload-file-info', `
@@ -163,12 +163,12 @@ export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigge
  `, [cE('thumbnail', `
  font-size: 18px;
  opacity: 1;
- transition: opacity .2s var(--bezier);
- color: var(--item-icon-color);
+ transition: opacity .2s var(--n-bezier);
+ color: var(--n-item-icon-color);
  `, [cB('base-icon', `
  margin-right: 2px;
  vertical-align: middle;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `)]), cE('action', `
  padding-top: inherit;
  padding-bottom: inherit;
@@ -179,7 +179,7 @@ export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigge
  width: 80px;
  display: flex;
  align-items: center;
- transition: opacity .2s var(--bezier);
+ transition: opacity .2s var(--n-bezier);
  justify-content: flex-end;
  opacity: 0;
  `, [cB('button', [c('&:not(:last-child)', {
@@ -201,7 +201,7 @@ export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigge
  justify-content: center;
  align-items: center;
  `)]), cE('name', `
- color: var(--item-text-color);
+ color: var(--n-item-text-color);
  flex: 1;
  display: flex;
  justify-content: center;
@@ -209,10 +209,10 @@ export default c([cB('upload', 'width: 100%;', [cM('dragger-inside', [cE('trigge
  overflow: hidden;
  flex-direction: column;
  text-decoration-color: #0000;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  transition:
- color .3s var(--bezier),
- text-decoration-color .3s var(--bezier); 
+ color .3s var(--n-bezier),
+ text-decoration-color .3s var(--n-bezier); 
  `, [c('a', `
  color: inherit;
  text-decoration: underline;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.22.0";
+declare const _default: "2.24.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.22.0';
+export default '2.24.0';

package/lib/_internal/clear/src/styles/index.cssr.js

@@ -13,11 +13,11 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../../_utils/cssr");
 
 const icon_switch_cssr_1 = __importDefault(require("../../../../_styles/transitions/icon-switch.cssr")); // vars:
-// --bezier
-// --clear-color
-// --clear-size
-// --clear-color-hover
-// --clear-color-pressed
+// --n-bezier
+// --n-clear-color
+// --n-clear-size
+// --n-clear-color-hover
+// --n-clear-color-pressed
 
 
 exports.default = (0, cssr_1.cB)('base-clear', `
@@ -26,14 +26,14 @@ exports.default = (0, cssr_1.cB)('base-clear', `
  width: 1em;
  position: relative;
 `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('clear', `
- font-size: var(--clear-size);
+ font-size: var(--n-clear-size);
  cursor: pointer;
- color: var(--clear-color);
- transition: color .3s var(--bezier);
+ color: var(--n-clear-color);
+ transition: color .3s var(--n-bezier);
  `, [(0, cssr_1.c)('&:hover', `
- color: var(--clear-color-hover)!important;
+ color: var(--n-clear-color-hover)!important;
  `), (0, cssr_1.c)('&:active', `
- color: var(--clear-color-pressed)!important;
+ color: var(--n-clear-color-pressed)!important;
  `)]), (0, cssr_1.cE)('placeholder', `
  display: flex;
  `), (0, cssr_1.cE)('clear, placeholder', `

package/lib/_internal/close/src/styles/index.cssr.js

@@ -4,22 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-const cssr_1 = require("../../../../_utils/cssr"); // Note: non-prefixed color should be removed after css vars prefix migration
-// vars:
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --close-color-disabled
+const cssr_1 = require("../../../../_utils/cssr"); // vars:
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-close-color-disabled
 
 
 exports.default = (0, cssr_1.cB)('base-close', `
  cursor: pointer;
- color: var(--close-color, var(--n-close-color));
+ color: var(--n-close-color);
 `, [(0, cssr_1.c)('&:hover', {
-  color: 'var(--close-color-hover, var(--n-close-color))'
+  color: 'var(--n-close-color-hover)'
 }), (0, cssr_1.c)('&:active', {
-  color: 'var(--close-color-pressed, var(--n-close-color-pressed))'
+  color: 'var(--n-close-color-pressed)'
 }), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed!important',
-  color: 'var(--close-color-disabled, var(--n-close-color-disabled))'
+  color: 'var(--n-close-color-disabled)'
 })]);

package/lib/_internal/icons/Close.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const replaceable_1 = require("./replaceable");
-exports.default = (0, replaceable_1.replaceable)('close', (0, vue_1.h)("svg", { viewBox: "0 0 12 12", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+exports.default = (0, replaceable_1.replaceable)('close', (0, vue_1.h)("svg", { viewBox: "0 0 12 12", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true },
     (0, vue_1.h)("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
         (0, vue_1.h)("g", { fill: "currentColor", "fill-rule": "nonzero" },
             (0, vue_1.h)("path", { d: "M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z" })))));

package/lib/_internal/icons/Switcher.js

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

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

@@ -49,10 +49,6 @@ declare const scrollbarProps: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
-    readonly showScrollbar: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
     readonly container: PropType<() => HTMLElement | null | undefined>;
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
@@ -97,10 +93,6 @@ declare const Scrollbar: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: false;
     };
-    readonly showScrollbar: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
     readonly container: PropType<() => HTMLElement | null | undefined>;
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
@@ -152,19 +144,18 @@ declare const Scrollbar: import("vue").DefineComponent<{
     handleYScrollMouseDown: (e: MouseEvent) => void;
     handleXScrollMouseDown: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--scrollbar-bezier': string;
-        '--scrollbar-color': string;
-        '--scrollbar-color-hover': string;
-        '--scrollbar-border-radius': string;
-        '--scrollbar-width': string;
-        '--scrollbar-height': string;
+        '--n-scrollbar-bezier': string;
+        '--n-scrollbar-color': string;
+        '--n-scrollbar-color-hover': string;
+        '--n-scrollbar-border-radius': string;
+        '--n-scrollbar-width': string;
+        '--n-scrollbar-height': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;
     readonly duration?: unknown;
     readonly scrollable?: unknown;
     readonly xScrollable?: unknown;
-    readonly showScrollbar?: unknown;
     readonly container?: unknown;
     readonly content?: unknown;
     readonly containerClass?: unknown;
@@ -183,7 +174,6 @@ declare const Scrollbar: import("vue").DefineComponent<{
 } & {
     size: number;
     duration: number;
-    showScrollbar: boolean;
     scrollable: boolean;
     xScrollable: boolean;
 } & {
@@ -214,7 +204,6 @@ declare const Scrollbar: import("vue").DefineComponent<{
 }>, {
     size: number;
     duration: number;
-    showScrollbar: boolean;
     scrollable: boolean;
     xScrollable: boolean;
 }>;

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

@@ -23,9 +23,6 @@ const scrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props)
     }, xScrollable: {
         type: Boolean,
         default: false
-    }, showScrollbar: {
-        type: Boolean,
-        default: true
     }, 
     // If container is set, resize observer won't not attached
     container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: String, contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function });
@@ -468,33 +465,34 @@ const Scrollbar = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut, scrollbarBorderRadius, scrollbarHeight, scrollbarWidth }, self: { color, colorHover } } = themeRef.value;
                 return {
-                    '--scrollbar-bezier': cubicBezierEaseInOut,
-                    '--scrollbar-color': color,
-                    '--scrollbar-color-hover': colorHover,
-                    '--scrollbar-border-radius': scrollbarBorderRadius,
-                    '--scrollbar-width': scrollbarWidth,
-                    '--scrollbar-height': scrollbarHeight
+                    '--n-scrollbar-bezier': cubicBezierEaseInOut,
+                    '--n-scrollbar-color': color,
+                    '--n-scrollbar-color-hover': colorHover,
+                    '--n-scrollbar-border-radius': scrollbarBorderRadius,
+                    '--n-scrollbar-width': scrollbarWidth,
+                    '--n-scrollbar-height': scrollbarHeight
                 };
             })
         };
     },
     render() {
-        const { $slots, mergedClsPrefix, showScrollbar } = this;
+        const { $slots, mergedClsPrefix } = this;
         if (!this.scrollable)
             return (0, vue_1.renderSlot)($slots, 'default');
         const createChildren = () => (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
+            role: 'none',
             ref: 'wrapperRef',
             class: `${mergedClsPrefix}-scrollbar`,
             style: this.cssVars,
             onMouseenter: this.handleMouseEnterWrapper,
             onMouseleave: this.handleMouseLeaveWrapper
         }), [
-            this.container ? ((0, vue_1.renderSlot)($slots, 'default')) : ((0, vue_1.h)("div", { ref: "containerRef", class: [
+            this.container ? ((0, vue_1.renderSlot)($slots, 'default')) : ((0, vue_1.h)("div", { role: "none", ref: "containerRef", class: [
                     `${mergedClsPrefix}-scrollbar-container`,
                     this.containerClass
                 ], style: this.containerStyle, onScroll: this.handleScroll, onWheel: this.onWheel },
                 (0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleContentResize }, {
-                    default: () => ((0, vue_1.h)("div", { ref: "contentRef", style: [
+                    default: () => ((0, vue_1.h)("div", { ref: "contentRef", role: "none", style: [
                             {
                                 width: this.xScrollable ? 'fit-content' : null
                             },
@@ -504,20 +502,20 @@ const Scrollbar = (0, vue_1.defineComponent)({
                             this.contentClass
                         ] }, $slots))
                 }))),
-            showScrollbar && ((0, vue_1.h)("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: [this.horizontalRailStyle] },
+            (0, vue_1.h)("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: this.horizontalRailStyle, "aria-hidden": true },
                 (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition" }, {
                     default: () => this.needYBar && this.isShowYBar && !this.isIos ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             height: this.yBarSizePx,
                             top: this.yBarTopPx
                         }, onMousedown: this.handleYScrollMouseDown })) : null
-                }))),
-            showScrollbar && ((0, vue_1.h)("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: [this.verticalRailStyle] },
+                })),
+            (0, vue_1.h)("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: this.verticalRailStyle, "aria-hidden": true },
                 (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition" }, {
                     default: () => this.needXBar && this.isShowXBar && !this.isIos ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             width: this.xBarSizePx,
                             left: this.xBarLeftPx
                         }, onMousedown: this.handleXScrollMouseDown })) : null
-                })))
+                }))
         ]);
         return this.container ? (createChildren()) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleContainerResize }, {
             default: createChildren

package/lib/_internal/scrollbar/src/styles/index.cssr.js

@@ -13,12 +13,12 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../../_utils/cssr");
 
 const fade_in_cssr_1 = __importDefault(require("../../../../_styles/transitions/fade-in.cssr")); // vars:
-// --scrollbar-bezier
-// --scrollbar-color
-// --scrollbar-color-hover
-// --scrollbar-width
-// --scrollbar-height
-// --scrollbar-border-radius
+// --n-scrollbar-bezier
+// --n-scrollbar-color
+// --n-scrollbar-color-hover
+// --n-scrollbar-width
+// --n-scrollbar-height
+// --n-scrollbar-border-radius
 
 
 exports.default = (0, cssr_1.cB)('scrollbar', `
@@ -48,19 +48,19 @@ exports.default = (0, cssr_1.cB)('scrollbar', `
  left: 2px;
  right: 2px;
  bottom: 4px;
- height: var(--scrollbar-height);
+ height: var(--n-scrollbar-height);
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
- height: var(--scrollbar-height);
- border-radius: var(--scrollbar-border-radius);
+ height: var(--n-scrollbar-height);
+ border-radius: var(--n-scrollbar-border-radius);
  right: 0;
  `)])]), (0, cssr_1.cM)('vertical', `
  right: 4px;
  top: 2px;
  bottom: 2px;
- width: var(--scrollbar-width);
+ width: var(--n-scrollbar-width);
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
- width: var(--scrollbar-width);
- border-radius: var(--scrollbar-border-radius);
+ width: var(--n-scrollbar-width);
+ border-radius: var(--n-scrollbar-border-radius);
  bottom: 0;
  `)])]), (0, cssr_1.cM)('disabled', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', {
   pointerEvents: 'none'
@@ -68,8 +68,8 @@ exports.default = (0, cssr_1.cB)('scrollbar', `
  position: absolute;
  cursor: pointer;
  pointer-events: all;
- background-color: var(--scrollbar-color);
- transition: background-color .2s var(--scrollbar-bezier);
+ background-color: var(--n-scrollbar-color);
+ transition: background-color .2s var(--n-scrollbar-bezier);
  `, [(0, fade_in_cssr_1.default)(), (0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--scrollbar-color-hover)'
+  backgroundColor: 'var(--n-scrollbar-color-hover)'
 })])])])])]);

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

@@ -392,27 +392,27 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
     } | null>;
     style: import("vue").ComputedRef<({
-        '--height': string;
-        '--action-divider-color': string;
-        '--action-text-color': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--color': string;
-        '--option-font-size': string;
-        '--group-header-text-color': string;
-        '--option-check-color': string;
-        '--option-color-pending': string;
-        '--option-color-active': string;
-        '--option-height': string;
-        '--option-opacity-disabled': string;
-        '--option-text-color': string;
-        '--option-text-color-active': string;
-        '--option-text-color-disabled': string;
-        '--option-text-color-pressed': string;
-        '--option-padding': string;
-        '--option-padding-left': string;
-        '--loading-color': string;
-        '--loading-size': string;
+        '--n-height': string;
+        '--n-action-divider-color': string;
+        '--n-action-text-color': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-color': string;
+        '--n-option-font-size': string;
+        '--n-group-header-text-color': string;
+        '--n-option-check-color': string;
+        '--n-option-color-pending': string;
+        '--n-option-color-active': string;
+        '--n-option-height': string;
+        '--n-option-opacity-disabled': string;
+        '--n-option-text-color': string;
+        '--n-option-text-color-active': string;
+        '--n-option-text-color-disabled': string;
+        '--n-option-text-color-pressed': string;
+        '--n-option-padding': string;
+        '--n-option-padding-left': string;
+        '--n-loading-color': string;
+        '--n-loading-size': string;
     } | {
         width: string | undefined;
     })[]>;

package/lib/_internal/select-menu/src/SelectMenu.js

@@ -227,27 +227,27 @@ exports.default = (0, vue_1.defineComponent)({
             const { size } = props;
             const { common: { cubicBezierEaseInOut }, self: { height, borderRadius, color, groupHeaderTextColor, actionDividerColor, optionTextColorPressed, optionTextColor, optionTextColorDisabled, optionTextColorActive, optionOpacityDisabled, optionCheckColor, actionTextColor, optionColorPending, optionColorActive, loadingColor, loadingSize, [(0, cssr_1.createKey)('optionFontSize', size)]: fontSize, [(0, cssr_1.createKey)('optionHeight', size)]: optionHeight, [(0, cssr_1.createKey)('optionPadding', size)]: optionPadding } } = themeRef.value;
             return {
-                '--height': height,
-                '--action-divider-color': actionDividerColor,
-                '--action-text-color': actionTextColor,
-                '--bezier': cubicBezierEaseInOut,
-                '--border-radius': borderRadius,
-                '--color': color,
-                '--option-font-size': fontSize,
-                '--group-header-text-color': groupHeaderTextColor,
-                '--option-check-color': optionCheckColor,
-                '--option-color-pending': optionColorPending,
-                '--option-color-active': optionColorActive,
-                '--option-height': optionHeight,
-                '--option-opacity-disabled': optionOpacityDisabled,
-                '--option-text-color': optionTextColor,
-                '--option-text-color-active': optionTextColorActive,
-                '--option-text-color-disabled': optionTextColorDisabled,
-                '--option-text-color-pressed': optionTextColorPressed,
-                '--option-padding': optionPadding,
-                '--option-padding-left': (0, seemly_1.getPadding)(optionPadding, 'left'),
-                '--loading-color': loadingColor,
-                '--loading-size': loadingSize
+                '--n-height': height,
+                '--n-action-divider-color': actionDividerColor,
+                '--n-action-text-color': actionTextColor,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-color': color,
+                '--n-option-font-size': fontSize,
+                '--n-group-header-text-color': groupHeaderTextColor,
+                '--n-option-check-color': optionCheckColor,
+                '--n-option-color-pending': optionColorPending,
+                '--n-option-color-active': optionColorActive,
+                '--n-option-height': optionHeight,
+                '--n-option-opacity-disabled': optionOpacityDisabled,
+                '--n-option-text-color': optionTextColor,
+                '--n-option-text-color-active': optionTextColorActive,
+                '--n-option-text-color-disabled': optionTextColorDisabled,
+                '--n-option-text-color-pressed': optionTextColorPressed,
+                '--n-option-padding': optionPadding,
+                '--n-option-padding-left': (0, seemly_1.getPadding)(optionPadding, 'left'),
+                '--n-loading-color': loadingColor,
+                '--n-loading-size': loadingSize
             };
         });
         const exposedProps = {