naive-ui 2.21.5 → 2.23.2

package/lib/_internal/select-menu/src/styles/index.cssr.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, "__esModule", {
 
 const cssr_1 = require("../../../../_utils/cssr");
 
-const fade_in_scale_up_cssr_1 = __importDefault(require("../../../../_styles/transitions/fade-in-scale-up.cssr")); // --loading-color
-// --loading-size
+const fade_in_scale_up_cssr_1 = __importDefault(require("../../../../_styles/transitions/fade-in-scale-up.cssr")); // --n-loading-color
+// --n-loading-size
 
 
 exports.default = (0, cssr_1.cB)('base-select-menu', `
@@ -21,20 +21,20 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  outline: none;
  z-index: 0;
  position: relative;
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
- background-color: var(--color);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
+ background-color: var(--n-color);
 `, [(0, cssr_1.cM)('multiple', [(0, cssr_1.cB)('base-select-option', `
  padding-right: 28px;
  `)]), (0, cssr_1.cB)('scrollbar', `
- max-height: var(--height);
+ max-height: var(--n-height);
  `), (0, cssr_1.cB)('virtual-list', `
- max-height: var(--height);
+ max-height: var(--n-height);
  `), (0, cssr_1.cB)('base-select-option', `
- min-height: var(--option-height);
- font-size: var(--option-font-size);
+ min-height: var(--n-option-height);
+ font-size: var(--n-option-font-size);
  display: flex;
  align-items: center;
  `, [(0, cssr_1.cE)('content', `
@@ -42,7 +42,7 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  text-overflow: ellipsis;
  overflow: hidden;
  `)]), (0, cssr_1.cB)('base-select-group-header', `
- min-height: var(--option-height);
+ min-height: var(--n-option-height);
  font-size: .93em;
  display: flex;
  align-items: center;
@@ -55,54 +55,54 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  flex: 1;
  justify-content: center;
  `), (0, cssr_1.cE)('loading', `
- color: var(--loading-color);
- font-size: var(--loading-size);
+ color: var(--n-loading-color);
+ font-size: var(--n-loading-size);
  `), (0, cssr_1.cE)('action', `
- padding: 8px var(--option-padding-left);
- font-size: var(--option-font-size);
+ padding: 8px var(--n-option-padding-left);
+ font-size: var(--n-option-font-size);
  transition: 
- color .3s var(--bezier);
- border-color .3s var(--bezier);
- border-top: 1px solid var(--action-divider-color);
- color: var(--action-text-color);
+ color .3s var(--n-bezier);
+ border-color .3s var(--n-bezier);
+ border-top: 1px solid var(--n-action-divider-color);
+ color: var(--n-action-text-color);
  `), (0, cssr_1.cB)('base-select-group-header', `
  position: relative;
  cursor: default;
- padding: var(--option-padding);
- color: var(--group-header-text-color);
+ padding: var(--n-option-padding);
+ color: var(--n-group-header-text-color);
  `), (0, cssr_1.cB)('base-select-option', `
  cursor: pointer;
  position: relative;
- padding: var(--option-padding);
+ padding: var(--n-option-padding);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier),
- opacity .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier);
  box-sizing: border-box;
- color: var(--option-text-color);
+ color: var(--n-option-text-color);
  opacity: 1;
  `, [(0, cssr_1.c)('&:active', `
- color: var(--option-text-color-pressed);
+ color: var(--n-option-text-color-pressed);
  `), (0, cssr_1.cM)('grouped', `
- padding-left: calc(var(--option-padding-left) * 1.5);
+ padding-left: calc(var(--n-option-padding-left) * 1.5);
  `), (0, cssr_1.cM)('pending', `
- background-color: var(--option-color-pending);
+ background-color: var(--n-option-color-pending);
  `), (0, cssr_1.cM)('selected', `
- color: var(--option-text-color-active);
- background-color: var(--option-color-active);
+ color: var(--n-option-text-color-active);
+ background-color: var(--n-option-color-active);
  `), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
  `, [(0, cssr_1.cNotM)('selected', `
- color: var(--option-text-color-disabled);
+ color: var(--n-option-text-color-disabled);
  `), (0, cssr_1.cM)('selected', `
- opacity: var(--option-opacity-disabled);
+ opacity: var(--n-option-opacity-disabled);
  `)]), (0, cssr_1.cE)('check', `
  font-size: 16px;
  position: absolute;
  right: 8px;
  top: calc(50% - 7px);
- color: var(--option-check-color);
- transition: color .3s var(--bezier);
+ color: var(--n-option-check-color);
+ transition: color .3s var(--n-bezier);
  `, [(0, fade_in_scale_up_cssr_1.default)({
   enterScale: '0.5'
 })])])]);

package/lib/_internal/select-menu/styles/_common.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    height: 'calc(var(--option-height) * 7.6)',
+    height: 'calc(var(--n-option-height) * 7.6)',
     paddingSmall: '4px 0',
     paddingMedium: '4px 0',
     paddingLarge: '4px 0',

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

@@ -489,50 +489,50 @@ declare const _default: import("vue").DefineComponent<{
     getTail: () => HTMLElement | null;
     renderLabel: RenderLabelImpl;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border': string;
-        '--border-active': string;
-        '--border-focus': string;
-        '--border-hover': string;
-        '--border-radius': string;
-        '--box-shadow-active': string;
-        '--box-shadow-focus': string;
-        '--box-shadow-hover': null;
-        '--caret-color': string;
-        '--color': string;
-        '--color-active': string;
-        '--color-disabled': string;
-        '--font-size': string;
-        '--height': string;
-        '--padding-single': string;
-        '--placeholder-color': string;
-        '--placeholder-color-disabled': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--arrow-color': string;
-        '--arrow-color-disabled': string;
-        '--loading-color': string;
-        '--color-active-warning': string;
-        '--box-shadow-focus-warning': string;
-        '--box-shadow-active-warning': string;
-        '--box-shadow-hover-warning': null;
-        '--border-warning': string;
-        '--border-focus-warning': string;
-        '--border-hover-warning': string;
-        '--border-active-warning': string;
-        '--color-active-error': string;
-        '--box-shadow-focus-error': string;
-        '--box-shadow-active-error': string;
-        '--box-shadow-hover-error': null;
-        '--border-error': string;
-        '--border-focus-error': string;
-        '--border-hover-error': string;
-        '--border-active-error': string;
-        '--clear-size': string;
-        '--clear-color': string;
-        '--clear-color-hover': string;
-        '--clear-color-pressed': string;
-        '--arrow-size': string;
+        '--n-bezier': string;
+        '--n-border': string;
+        '--n-border-active': string;
+        '--n-border-focus': string;
+        '--n-border-hover': string;
+        '--n-border-radius': string;
+        '--n-box-shadow-active': string;
+        '--n-box-shadow-focus': string;
+        '--n-box-shadow-hover': null;
+        '--n-caret-color': string;
+        '--n-color': string;
+        '--n-color-active': string;
+        '--n-color-disabled': string;
+        '--n-font-size': string;
+        '--n-height': string;
+        '--n-padding-single': string;
+        '--n-placeholder-color': string;
+        '--n-placeholder-color-disabled': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-arrow-color': string;
+        '--n-arrow-color-disabled': string;
+        '--n-loading-color': string;
+        '--n-color-active-warning': string;
+        '--n-box-shadow-focus-warning': string;
+        '--n-box-shadow-active-warning': string;
+        '--n-box-shadow-hover-warning': null;
+        '--n-border-warning': string;
+        '--n-border-focus-warning': string;
+        '--n-border-hover-warning': string;
+        '--n-border-active-warning': string;
+        '--n-color-active-error': string;
+        '--n-box-shadow-focus-error': string;
+        '--n-box-shadow-active-error': string;
+        '--n-box-shadow-hover-error': null;
+        '--n-border-error': string;
+        '--n-border-focus-error': string;
+        '--n-border-hover-error': string;
+        '--n-border-active-error': string;
+        '--n-clear-size': string;
+        '--n-clear-color': string;
+        '--n-clear-color-hover': string;
+        '--n-clear-color-pressed': string;
+        '--n-arrow-size': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clsPrefix?: unknown;

package/lib/_internal/selection/src/Selection.js

@@ -341,54 +341,54 @@ exports.default = (0, vue_1.defineComponent)({
                 // arrow
                 arrowSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border': border,
-                    '--border-active': borderActive,
-                    '--border-focus': borderFocus,
-                    '--border-hover': borderHover,
-                    '--border-radius': borderRadius,
-                    '--box-shadow-active': boxShadowActive,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--box-shadow-hover': boxShadowHover,
-                    '--caret-color': caretColor,
-                    '--color': color,
-                    '--color-active': colorActive,
-                    '--color-disabled': colorDisabled,
-                    '--font-size': fontSize,
-                    '--height': height,
-                    '--padding-single': paddingSingle,
-                    '--placeholder-color': placeholderColor,
-                    '--placeholder-color-disabled': placeholderColorDisabled,
-                    '--text-color': textColor,
-                    '--text-color-disabled': textColorDisabled,
-                    '--arrow-color': arrowColor,
-                    '--arrow-color-disabled': arrowColorDisabled,
-                    '--loading-color': loadingColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border': border,
+                    '--n-border-active': borderActive,
+                    '--n-border-focus': borderFocus,
+                    '--n-border-hover': borderHover,
+                    '--n-border-radius': borderRadius,
+                    '--n-box-shadow-active': boxShadowActive,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-box-shadow-hover': boxShadowHover,
+                    '--n-caret-color': caretColor,
+                    '--n-color': color,
+                    '--n-color-active': colorActive,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-font-size': fontSize,
+                    '--n-height': height,
+                    '--n-padding-single': paddingSingle,
+                    '--n-placeholder-color': placeholderColor,
+                    '--n-placeholder-color-disabled': placeholderColorDisabled,
+                    '--n-text-color': textColor,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-arrow-color': arrowColor,
+                    '--n-arrow-color-disabled': arrowColorDisabled,
+                    '--n-loading-color': loadingColor,
                     // form warning
-                    '--color-active-warning': colorActiveWarning,
-                    '--box-shadow-focus-warning': boxShadowFocusWarning,
-                    '--box-shadow-active-warning': boxShadowActiveWarning,
-                    '--box-shadow-hover-warning': boxShadowHoverWarning,
-                    '--border-warning': borderWarning,
-                    '--border-focus-warning': borderFocusWarning,
-                    '--border-hover-warning': borderHoverWarning,
-                    '--border-active-warning': borderActiveWarning,
+                    '--n-color-active-warning': colorActiveWarning,
+                    '--n-box-shadow-focus-warning': boxShadowFocusWarning,
+                    '--n-box-shadow-active-warning': boxShadowActiveWarning,
+                    '--n-box-shadow-hover-warning': boxShadowHoverWarning,
+                    '--n-border-warning': borderWarning,
+                    '--n-border-focus-warning': borderFocusWarning,
+                    '--n-border-hover-warning': borderHoverWarning,
+                    '--n-border-active-warning': borderActiveWarning,
                     // form error
-                    '--color-active-error': colorActiveError,
-                    '--box-shadow-focus-error': boxShadowFocusError,
-                    '--box-shadow-active-error': boxShadowActiveError,
-                    '--box-shadow-hover-error': boxShadowHoverError,
-                    '--border-error': borderError,
-                    '--border-focus-error': borderFocusError,
-                    '--border-hover-error': borderHoverError,
-                    '--border-active-error': borderActiveError,
+                    '--n-color-active-error': colorActiveError,
+                    '--n-box-shadow-focus-error': boxShadowFocusError,
+                    '--n-box-shadow-active-error': boxShadowActiveError,
+                    '--n-box-shadow-hover-error': boxShadowHoverError,
+                    '--n-border-error': borderError,
+                    '--n-border-focus-error': borderFocusError,
+                    '--n-border-hover-error': borderHoverError,
+                    '--n-border-active-error': borderActiveError,
                     // clear
-                    '--clear-size': clearSize,
-                    '--clear-color': clearColor,
-                    '--clear-color-hover': clearColorHover,
-                    '--clear-color-pressed': clearColorPressed,
+                    '--n-clear-size': clearSize,
+                    '--n-clear-color': clearColor,
+                    '--n-clear-color-hover': clearColorHover,
+                    '--n-clear-color-pressed': clearColorPressed,
                     // arrow-size
-                    '--arrow-size': arrowSize
+                    '--n-arrow-size': arrowSize
                 };
             })
         };
@@ -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

@@ -5,29 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../../_utils/cssr"); // vars:
-// --bezier
-// --border
-// --border-active
-// --border-focus
-// --border-hover
-// --border-radius
-// --box-shadow-active
-// --box-shadow-focus
-// --box-shadow-hover
-// --caret-color
-// --color
-// --color-active
-// --color-disabled
-// --font-size
-// --height
-// --padding-single
-// --placeholder-color
-// --placeholder-color-disabled
-// --text-color
-// --text-color-disabled
-// --arrow-color
-// --arrow-size
-// --loading-color
+// --n-bezier
+// --n-border
+// --n-border-active
+// --n-border-focus
+// --n-border-hover
+// --n-border-radius
+// --n-box-shadow-active
+// --n-box-shadow-focus
+// --n-box-shadow-hover
+// --n-caret-color
+// --n-color
+// --n-color-active
+// --n-color-disabled
+// --n-font-size
+// --n-height
+// --n-padding-single
+// --n-placeholder-color
+// --n-placeholder-color-disabled
+// --n-text-color
+// --n-text-color-disabled
+// --n-arrow-color
+// --n-arrow-size
+// --n-loading-color
 // ...clear vars
 // ...form item vars
 
@@ -40,14 +40,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
- border-radius: var(--border-radius);
- min-height: var(--height);
+ border-radius: var(--n-border-radius);
+ min-height: var(--n-height);
  line-height: 1.5;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  `, [(0, cssr_1.cB)('base-loading', `
- color: var(--loading-color);
+ color: var(--n-loading-color);
  `), (0, cssr_1.cB)('base-selection-tags', {
-  minHeight: 'var(--height)'
+  minHeight: 'var(--n-height)'
 }), (0, cssr_1.cE)('border, state-border', `
  position: absolute;
  left: 0;
@@ -55,11 +55,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  top: 0;
  bottom: 0;
  pointer-events: none;
- border: var(--border);
+ border: var(--n-border);
  border-radius: inherit;
  transition:
- box-shadow .3s var(--bezier),
- border-color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('state-border', `
  z-index: 1;
  border-color: #0000;
@@ -70,24 +70,28 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  transform: translateY(-50%);
  right: 10px;
  `, [(0, cssr_1.cE)('arrow', `
- font-size: var(--arrow-size);
- color: var(--arrow-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-arrow-size);
+ color: var(--n-arrow-color);
+ transition: color .3s var(--n-bezier);
  `)]), (0, cssr_1.cB)('base-selection-overlay', `
  display: flex;
  align-items: center;
  white-space: nowrap;
- overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
- padding: var(--padding-single);
- transition: color .3s var(--bezier);
- `), (0, cssr_1.cB)('base-selection-placeholder', `
- color: var(--placeholder-color);
+ padding: var(--n-padding-single);
+ transition: color .3s var(--n-bezier);
+ `, [(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(--n-placeholder-color);
  `), (0, cssr_1.cB)('base-selection-tags', `
  cursor: pointer;
  outline: none;
@@ -100,14 +104,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  align-items: center;
  width: 100%;
  vertical-align: bottom;
- background-color: var(--color);
+ background-color: var(--n-color);
  border-radius: inherit;
  transition:
- color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('base-selection-label', `
- height: var(--height);
+ height: var(--n-height);
  display: inline-flex;
  width: 100%;
  vertical-align: bottom;
@@ -117,11 +121,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  box-sizing: border-box;
  position: relative;
  transition:
- color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  border-radius: inherit;
- background-color: var(--color);
+ background-color: var(--n-color);
  align-items: center;
  `, [(0, cssr_1.cB)('base-selection-input', `
  line-height: inherit;
@@ -130,51 +134,51 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  box-sizing: border-box;
  border:none;
  width: 100%;
- padding: var(--padding-single);
+ padding: var(--n-padding-single);
  background-color: #0000;
- color: var(--text-color);
- transition: color .3s var(--bezier);
- caret-color: var(--caret-color);
+ color: var(--n-text-color);
+ transition: color .3s var(--n-bezier);
+ caret-color: var(--n-caret-color);
  `, [(0, cssr_1.cE)('content', `
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; 
  `)]), (0, cssr_1.cE)('render-label', `
- color: var(--text-color);
+ color: var(--n-text-color);
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--box-shadow-hover);
- border: var(--border-hover);
+ box-shadow: var(--n-box-shadow-hover);
+ border: var(--n-border-hover);
  `)]), (0, cssr_1.cM)('focus', [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--box-shadow-focus);
- border: var(--border-focus);
+ box-shadow: var(--n-box-shadow-focus);
+ border: var(--n-border-focus);
  `)]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--box-shadow-active);
- border: var(--border-active);
+ box-shadow: var(--n-box-shadow-active);
+ border: var(--n-border-active);
  `), (0, cssr_1.cB)('base-selection-label', {
-  backgroundColor: 'var(--color-active)'
+  backgroundColor: 'var(--n-color-active)'
 }), (0, cssr_1.cB)('base-selection-tags', {
-  backgroundColor: 'var(--color-active)'
+  backgroundColor: 'var(--n-color-active)'
 })])]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed'
 }, [(0, cssr_1.cE)('arrow', `
- color: var(--arrow-color-disabled);
+ color: var(--n-arrow-color-disabled);
  `), (0, cssr_1.cB)('base-selection-label', `
  cursor: not-allowed;
- background-color: var(--color-disabled);
+ background-color: var(--n-color-disabled);
  `, [(0, cssr_1.cB)('base-selection-input', `
  cursor: not-allowed;
- color: var(--text-color-disabled);
+ color: var(--n-text-color-disabled);
  `), (0, cssr_1.cE)('render-label', `
- color: var(--text-color-disabled);
+ color: var(--n-text-color-disabled);
  `)]), (0, cssr_1.cB)('base-selection-tags', `
  cursor: not-allowed;
- background-color: var(--color-disabled);
+ background-color: var(--n-color-disabled);
  `), (0, cssr_1.cB)('base-selection-placeholder', `
  cursor: not-allowed;
- color: var(--placeholder-color-disabled);
+ color: var(--n-placeholder-color-disabled);
  `)]), (0, cssr_1.cB)('base-selection-input-tag', `
- height: calc(var(--height) - 6px);
- line-height: calc(var(--height) - 6px);
+ height: calc(var(--n-height) - 6px);
+ line-height: calc(var(--n-height) - 6px);
  outline: none;
  display: none;
  position: relative;
@@ -192,8 +196,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  width: 1em;
  line-height: inherit;
  cursor: pointer;
- color: var(--text-color);
- caret-color: var(--caret-color);
+ color: var(--n-text-color);
+ caret-color: var(--n-caret-color);
  `), (0, cssr_1.cE)('mirror', `
  position: absolute;
  left: 0;
@@ -219,18 +223,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  text-overflow: ellipsis;
  overflow: hidden;
  `)])]), ['warning', 'error'].map(status => (0, cssr_1.insideFormItem)(status, (0, cssr_1.cB)('base-selection', [(0, cssr_1.cE)('state-border', {
-  border: `var(--border-${status})`
+  border: `var(--n-border-${status})`
 }), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--box-shadow-hover-${status});
- border: var(--border-hover-${status});
+ box-shadow: var(--n-box-shadow-hover-${status});
+ border: var(--n-border-hover-${status});
  `)]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--box-shadow-active-${status});
- border: var(--border-active-${status});
+ box-shadow: var(--n-box-shadow-active-${status});
+ border: var(--n-border-active-${status});
  `), (0, cssr_1.cB)('base-selection-label', {
-  backgroundColor: `var(--color-active-${status})`
+  backgroundColor: `var(--n-color-active-${status})`
 }), (0, cssr_1.cB)('base-selection-tags', {
-  backgroundColor: `var(--box-shadow-active-${status})`
+  backgroundColor: `var(--n-box-shadow-active-${status})`
 })]), (0, cssr_1.cM)('focus', [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--box-shadow-focus-${status});
- border: var(--border-focus-${status});
+ box-shadow: var(--n-box-shadow-focus-${status});
+ border: var(--n-border-focus-${status});
  `)])])])))]);

package/lib/_mixins/common.d.ts

@@ -0,0 +1 @@
+export declare const cssrAnchorMetaName = "naive-ui-style";

package/lib/_mixins/common.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssrAnchorMetaName = void 0;
+exports.cssrAnchorMetaName = 'naive-ui-style';

package/lib/_mixins/index.d.ts

@@ -6,3 +6,4 @@ export { default as useLocale } from './use-locale';
 export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
 export type { Hljs } from './use-hljs';
+export { useCssVarsClass } from './use-css-vars-class';