naive-ui 2.21.2 → 2.22.0

package/es/upload/src/UploadFileList.js

@@ -12,7 +12,7 @@ export default defineComponent({
         if (!NUpload) {
             throwError('upload-file-list', '`n-upload-file-list` must be placed inside `n-upload`.');
         }
-        const { mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef } = NUpload;
+        const { mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, maxReachedRef, showTriggerRef } = NUpload;
         const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card');
         const renderFileList = () => mergedFileListRef.value.map((file) => (h(NUploadFile, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value })));
         const renderUploadFileList = () => isImageCardTypeRef.value ? (h(NImageGroup, null, { default: renderFileList })) : (h(NFadeInExpandTransition, { group: true }, {
@@ -26,7 +26,9 @@ export default defineComponent({
                         `${mergedClsPrefix}-upload-file-list--grid`
                 ], style: [cssVarsRef.value, fileListStyleRef.value] },
                 renderUploadFileList(),
-                isImageCardTypeRef.value && h(NUploadTrigger, null, slots)));
+                showTriggerRef.value &&
+                    !maxReachedRef.value &&
+                    isImageCardTypeRef.value && (h(NUploadTrigger, null, slots))));
         };
     }
 });

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

@@ -146,9 +146,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;

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

@@ -45,6 +45,7 @@ export interface UploadInjection {
     showRemoveButtonRef: Ref<boolean>;
     showDownloadButtonRef: Ref<boolean>;
     showRetryButtonRef: Ref<boolean>;
+    showTriggerRef: Ref<boolean>;
     mergedFileListRef: Ref<FileInfo[]>;
     onRemoveRef: Ref<OnRemove | undefined>;
     onDownloadRef: Ref<OnDownload | undefined>;

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

@@ -1,7 +1,7 @@
 import { c, cM, cB, cE } from '../../../_utils/cssr';
 import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expand.cssr';
 import createIconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr';
-export default c([cB('upload', [cM('dragger-inside', [cE('trigger', `
+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);
@@ -29,7 +29,7 @@ export default c([cB('upload', [cM('dragger-inside', [cE('trigger', `
  box-sizing: border-box;
  opacity: 1;
  transition: opacity .3s var(--bezier);
- `, [cM('disabled', `
+ `, [c('+', [cB('upload-file-list', 'margin-top: 8px;')]), cM('disabled', `
  opacity: var(--item-disabled-opacity);
  cursor: not-allowed;
  `), cM('image-card', `
@@ -45,7 +45,6 @@ export default c([cB('upload', [cM('dragger-inside', [cE('trigger', `
  align-items: center;
  justify-content: center;
  `)])]), cB('upload-file-list', `
- margin-top: 8px;
  line-height: var(--line-height);
  opacity: 1;
  transition: opacity .3s var(--bezier);

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

@@ -48,9 +48,9 @@ declare const uploadLight: import("../../_mixins").Theme<"Upload", {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;

package/es/version.d.ts

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

package/es/version.js

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

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

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-const cssr_1 = require("../../../../_utils/cssr"); // vars:
+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
@@ -13,12 +14,12 @@ const cssr_1 = require("../../../../_utils/cssr"); // vars:
 
 exports.default = (0, cssr_1.cB)('base-close', `
  cursor: pointer;
- color: var(--close-color);
+ color: var(--close-color, var(--n-close-color));
 `, [(0, cssr_1.c)('&:hover', {
-  color: 'var(--close-color-hover)'
+  color: 'var(--close-color-hover, var(--n-close-color))'
 }), (0, cssr_1.c)('&:active', {
-  color: 'var(--close-color-pressed)'
+  color: 'var(--close-color-pressed, var(--n-close-color-pressed))'
 }), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed!important',
-  color: 'var(--close-color-disabled)'
+  color: 'var(--close-color-disabled, var(--n-close-color-disabled))'
 })]);

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

@@ -49,8 +49,13 @@ 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;
     readonly containerStyle: PropType<string | CSSProperties>;
     readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
@@ -92,8 +97,13 @@ 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;
     readonly containerStyle: PropType<string | CSSProperties>;
     readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
@@ -154,8 +164,10 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly duration?: unknown;
     readonly scrollable?: unknown;
     readonly xScrollable?: unknown;
+    readonly showScrollbar?: unknown;
     readonly container?: unknown;
     readonly content?: unknown;
+    readonly containerClass?: unknown;
     readonly containerStyle?: unknown;
     readonly contentClass?: unknown;
     readonly contentStyle?: unknown;
@@ -171,6 +183,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
 } & {
     size: number;
     duration: number;
+    showScrollbar: boolean;
     scrollable: boolean;
     xScrollable: boolean;
 } & {
@@ -189,6 +202,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
         color: string;
         colorHover: string;
     }, any>> | undefined;
+    containerClass?: string | undefined;
     onResize?: ((e: ResizeObserverEntry) => void) | undefined;
     container?: (() => HTMLElement | null | undefined) | undefined;
     containerStyle?: string | CSSProperties | undefined;
@@ -200,6 +214,7 @@ 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,12 @@ 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, containerStyle: [String, Object], contentClass: String, contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function });
+    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 });
 const Scrollbar = (0, vue_1.defineComponent)({
     name: 'Scrollbar',
     props: scrollbarProps,
@@ -476,7 +479,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { $slots, mergedClsPrefix } = this;
+        const { $slots, mergedClsPrefix, showScrollbar } = this;
         if (!this.scrollable)
             return (0, vue_1.renderSlot)($slots, 'default');
         const createChildren = () => (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
@@ -486,7 +489,10 @@ const Scrollbar = (0, vue_1.defineComponent)({
             onMouseenter: this.handleMouseEnterWrapper,
             onMouseleave: this.handleMouseLeaveWrapper
         }), [
-            this.container ? ((0, vue_1.renderSlot)($slots, 'default')) : ((0, vue_1.h)("div", { ref: "containerRef", class: `${mergedClsPrefix}-scrollbar-container`, style: this.containerStyle, onScroll: this.handleScroll, onWheel: this.onWheel },
+            this.container ? ((0, vue_1.renderSlot)($slots, 'default')) : ((0, vue_1.h)("div", { 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: [
                             {
@@ -498,20 +504,20 @@ const Scrollbar = (0, vue_1.defineComponent)({
                             this.contentClass
                         ] }, $slots))
                 }))),
-            (0, vue_1.h)("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: [this.horizontalRailStyle] },
+            showScrollbar && ((0, vue_1.h)("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: [this.horizontalRailStyle] },
                 (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
-                })),
-            (0, vue_1.h)("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: [this.verticalRailStyle] },
+                }))),
+            showScrollbar && ((0, vue_1.h)("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: [this.verticalRailStyle] },
                 (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/selection/src/Selection.js

@@ -496,15 +496,17 @@ exports.default = (0, vue_1.defineComponent)({
                 body = ((0, vue_1.h)("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
                     (0, vue_1.h)("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.patternInputFocused && this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
                     showPlaceholder ? null : this.patternInputFocused &&
-                        this.active ? null : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" }, renderTag
-                        ? renderTag({
-                            option: this.selectedOption,
-                            handleClose: () => { }
-                        })
-                        : renderLabel
-                            ? renderLabel(this.selectedOption, true)
-                            : (0, _utils_1.render)(this.label, this.selectedOption, true))),
-                    showPlaceholder ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" }, this.filterablePlaceholder)) : null,
+                        this.active ? null : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" },
+                        (0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-overlay__wrapper` }, renderTag
+                            ? renderTag({
+                                option: this.selectedOption,
+                                handleClose: () => { }
+                            })
+                            : renderLabel
+                                ? renderLabel(this.selectedOption, true)
+                                : (0, _utils_1.render)(this.label, this.selectedOption, true)))),
+                    showPlaceholder ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
+                        (0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-overlay__wrapper` }, this.filterablePlaceholder))) : null,
                     suffix));
             }
             else {

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

@@ -77,7 +77,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  display: flex;
  align-items: center;
  white-space: nowrap;
- overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
@@ -86,7 +85,12 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  left: 0;
  padding: var(--padding-single);
  transition: color .3s var(--bezier);
- `), (0, cssr_1.cB)('base-selection-placeholder', `
+ `, [(0, cssr_1.cE)('wrapper', `
+ flex-basis: 0;
+ flex-grow: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ `)]), (0, cssr_1.cB)('base-selection-placeholder', `
  color: var(--placeholder-color);
  `), (0, cssr_1.cB)('base-selection-tags', `
  cursor: pointer;

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

@@ -528,26 +528,26 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--icon-color': string;
-        '--border': string;
-        '--title-text-color': string;
-        '--content-text-color': string;
-        '--line-height': string;
-        '--border-radius': string;
-        '--font-size': string;
-        '--title-font-weight': string;
-        '--icon-size': string;
-        '--icon-margin': string;
-        '--close-size': string;
-        '--close-margin': string;
-        '--padding': string;
-        '--icon-margin-left': string;
-        '--icon-margin-right': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-icon-color': string;
+        '--n-border': string;
+        '--n-title-text-color': string;
+        '--n-content-text-color': string;
+        '--n-line-height': string;
+        '--n-border-radius': string;
+        '--n-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-icon-size': string;
+        '--n-icon-margin': string;
+        '--n-close-size': string;
+        '--n-close-margin': string;
+        '--n-padding': string;
+        '--n-icon-margin-left': string;
+        '--n-icon-margin-right': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     title?: unknown;

package/lib/alert/src/Alert.js

@@ -49,26 +49,26 @@ exports.default = (0, vue_1.defineComponent)({
             const { type } = props;
             const { left, right } = (0, seemly_1.getMargin)(iconMargin);
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--color': self[(0, _utils_1.createKey)('color', type)],
-                '--close-color': self[(0, _utils_1.createKey)('closeColor', type)],
-                '--close-color-hover': self[(0, _utils_1.createKey)('closeColorHover', type)],
-                '--close-color-pressed': self[(0, _utils_1.createKey)('closeColorPressed', type)],
-                '--icon-color': self[(0, _utils_1.createKey)('iconColor', type)],
-                '--border': self[(0, _utils_1.createKey)('border', type)],
-                '--title-text-color': self[(0, _utils_1.createKey)('titleTextColor', type)],
-                '--content-text-color': self[(0, _utils_1.createKey)('contentTextColor', type)],
-                '--line-height': lineHeight,
-                '--border-radius': borderRadius,
-                '--font-size': fontSize,
-                '--title-font-weight': titleFontWeight,
-                '--icon-size': iconSize,
-                '--icon-margin': iconMargin,
-                '--close-size': closeSize,
-                '--close-margin': closeMargin,
-                '--padding': padding,
-                '--icon-margin-left': left,
-                '--icon-margin-right': right
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-color': self[(0, _utils_1.createKey)('color', type)],
+                '--n-close-color': self[(0, _utils_1.createKey)('closeColor', type)],
+                '--n-close-color-hover': self[(0, _utils_1.createKey)('closeColorHover', type)],
+                '--n-close-color-pressed': self[(0, _utils_1.createKey)('closeColorPressed', type)],
+                '--n-icon-color': self[(0, _utils_1.createKey)('iconColor', type)],
+                '--n-border': self[(0, _utils_1.createKey)('border', type)],
+                '--n-title-text-color': self[(0, _utils_1.createKey)('titleTextColor', type)],
+                '--n-content-text-color': self[(0, _utils_1.createKey)('contentTextColor', type)],
+                '--n-line-height': lineHeight,
+                '--n-border-radius': borderRadius,
+                '--n-font-size': fontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-icon-size': iconSize,
+                '--n-icon-margin': iconMargin,
+                '--n-close-size': closeSize,
+                '--n-close-margin': closeMargin,
+                '--n-padding': padding,
+                '--n-icon-margin-left': left,
+                '--n-icon-margin-right': right
             };
         });
         const visibleRef = (0, vue_1.ref)(true);
@@ -131,9 +131,9 @@ exports.default = (0, vue_1.defineComponent)({
                         }
                     })))),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body` },
-                        this.title !== undefined && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, (0, vue_1.renderSlot)($slots, 'header', undefined, () => [
+                        this.title || $slots.header ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, (0, vue_1.renderSlot)($slots, 'header', undefined, () => [
                             this.title
-                        ]))),
+                        ]))) : null,
                         $slots.default && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
             }
         }));

package/lib/alert/src/styles/index.cssr.js

@@ -13,46 +13,46 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
-// --bezier
-// --color
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --icon-color
-// --border
-// --title-text-color
-// --content-text-color
-// --line-height
-// --border-radius
-// --font-size
-// --title-font-weight
-// --icon-size
-// --icon-margin
-// --close-size
-// --close-margin
-// --padding
-// --icon-margin-left
-// --icon-margin-right
+// --n-bezier
+// --n-color
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-icon-color
+// --n-border
+// --n-title-text-color
+// --n-content-text-color
+// --n-line-height
+// --n-border-radius
+// --n-font-size
+// --n-title-font-weight
+// --n-icon-size
+// --n-icon-margin
+// --n-close-size
+// --n-close-margin
+// --n-padding
+// --n-icon-margin-left
+// --n-icon-margin-right
 
 
 exports.default = (0, cssr_1.cB)('alert', `
- line-height: var(--line-height);
- border-radius: var(--border-radius);
+ line-height: var(--n-line-height);
+ border-radius: var(--n-border-radius);
  position: relative;
- transition: background-color .3s var(--bezier);
- background-color: var(--color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-color);
  text-align: start;
 `, [(0, cssr_1.cE)('icon', {
-  color: 'var(--icon-color)'
+  color: 'var(--n-icon-color)'
 }), (0, cssr_1.cB)('alert-body', {
-  border: 'var(--border)',
-  padding: 'var(--padding)'
+  border: 'var(--n-border)',
+  padding: 'var(--n-padding)'
 }, [(0, cssr_1.cE)('title', {
-  color: 'var(--title-text-color)'
+  color: 'var(--n-title-text-color)'
 }), (0, cssr_1.cE)('content', {
-  color: 'var(--content-text-color)'
+  color: 'var(--n-content-text-color)'
 })]), (0, fade_in_height_expand_cssr_1.default)({
-  originalTransition: 'transform .3s var(--bezier)',
+  originalTransition: 'transform .3s var(--n-bezier)',
   enterToProps: {
     transform: 'scale(1)'
   },
@@ -66,32 +66,32 @@ exports.default = (0, cssr_1.cB)('alert', `
  align-items: center;
  justify-content: center;
  display: flex;
- width: var(--icon-size);
- height: var(--icon-size);
- font-size: var(--icon-size);
- margin: var(--icon-margin);
+ width: var(--n-icon-size);
+ height: var(--n-icon-size);
+ font-size: var(--n-icon-size);
+ margin: var(--n-icon-margin);
  `), (0, cssr_1.cE)('close', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  position: absolute;
  right: 0;
  top: 0;
- margin: var(--close-margin);
- font-size: var(--close-size);
+ margin: var(--n-close-margin);
+ font-size: var(--n-close-size);
  `), (0, cssr_1.cM)('show-icon', [(0, cssr_1.cB)('alert-body', {
-  paddingLeft: 'calc(var(--icon-margin-left) + var(--icon-size) + var(--icon-margin-right))'
+  paddingLeft: 'calc(var(--n-icon-margin-left) + var(--n-icon-size) + var(--n-icon-margin-right))'
 })]), (0, cssr_1.cB)('alert-body', `
- border-radius: var(--border-radius);
- transition: border-color .3s var(--bezier);
+ border-radius: var(--n-border-radius);
+ transition: border-color .3s var(--n-bezier);
  `, [(0, cssr_1.cE)('title', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  font-size: 16px;
  line-height: 19px;
- font-weight: var(--title-font-weight);
+ font-weight: var(--n-title-font-weight);
  `, [(0, cssr_1.c)('& +', [(0, cssr_1.cE)('content', {
   marginTop: '9px'
 })])]), (0, cssr_1.cE)('content', {
-  transition: 'color .3s var(--bezier)',
-  fontSize: 'var(--font-size)'
+  transition: 'color .3s var(--n-bezier)',
+  fontSize: 'var(--n-font-size)'
 })]), (0, cssr_1.cE)('icon', {
-  transition: 'color .3s var(--bezier)'
+  transition: 'color .3s var(--n-bezier)'
 })]);

package/lib/anchor/src/AnchorAdapter.js

@@ -41,18 +41,18 @@ exports.default = (0, vue_1.defineComponent)({
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { self: { railColor, linkColor, railColorActive, linkTextColor, linkTextColorHover, linkTextColorPressed, linkTextColorActive, linkFontSize, railWidth, linkPadding, borderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
-                '--link-border-radius': borderRadius,
-                '--link-color': linkColor,
-                '--link-font-size': linkFontSize,
-                '--link-text-color': linkTextColor,
-                '--link-text-color-hover': linkTextColorHover,
-                '--link-text-color-active': linkTextColorActive,
-                '--link-text-color-pressed': linkTextColorPressed,
-                '--link-padding': linkPadding,
-                '--bezier': cubicBezierEaseInOut,
-                '--rail-color': railColor,
-                '--rail-color-active': railColorActive,
-                '--rail-width': railWidth
+                '--n-link-border-radius': borderRadius,
+                '--n-link-color': linkColor,
+                '--n-link-font-size': linkFontSize,
+                '--n-link-text-color': linkTextColor,
+                '--n-link-text-color-hover': linkTextColorHover,
+                '--n-link-text-color-active': linkTextColorActive,
+                '--n-link-text-color-pressed': linkTextColorPressed,
+                '--n-link-padding': linkPadding,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-rail-color': railColor,
+                '--n-rail-color-active': railColorActive,
+                '--n-rail-width': railWidth
             };
         });
         return {