naive-ui 2.24.6 → 2.25.2

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

@@ -23,7 +23,7 @@ exports.default = (0, vue_1.defineComponent)({
             default: undefined
         }, active: Boolean, pattern: {
             type: String,
-            default: null
+            default: ''
         }, placeholder: String, selectedOption: {
             type: Object,
             default: null
@@ -36,7 +36,7 @@ exports.default = (0, vue_1.defineComponent)({
         }, loading: Boolean, autofocus: Boolean, showArrow: {
             type: Boolean,
             default: true
-        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeyup: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, renderLabel: Function }),
+        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeyup: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, disableInlineTheme: Boolean }),
     setup(props) {
         const patternInputMirrorRef = (0, vue_1.ref)(null);
         const patternInputRef = (0, vue_1.ref)(null);
@@ -51,7 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
         const showTagsPopoverRef = (0, vue_1.ref)(false);
         const patternInputFocusedRef = (0, vue_1.ref)(false);
         const hoverRef = (0, vue_1.ref)(false);
-        const themeRef = (0, _mixins_1.useTheme)('InternalSelection', 'InternalSelection', index_cssr_1.default, styles_1.internalSelectionLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
+        const themeRef = (0, _mixins_1.useTheme)('InternalSelection', '-internal-selection', index_cssr_1.default, styles_1.internalSelectionLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
         const mergedClearableRef = (0, vue_1.computed)(() => {
             return (props.clearable && !props.disabled && (hoverRef.value || props.active));
         });
@@ -171,7 +171,7 @@ exports.default = (0, vue_1.defineComponent)({
             doDeleteOption(option);
         }
         function handlePatternKeyDown(e) {
-            if (e.code === 'Backspace') {
+            if (e.code === 'Backspace' && !isCompositingRef.value) {
                 if (!props.pattern.length) {
                     const { selectedOptions } = props;
                     if (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) {
@@ -207,11 +207,15 @@ exports.default = (0, vue_1.defineComponent)({
             doPatternInput(cachedInputEvent);
             cachedInputEvent = null;
         }
-        function handlePatternInputFocus() {
+        function handlePatternInputFocus(e) {
+            var _a;
             patternInputFocusedRef.value = true;
+            (_a = props.onPatternFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }
         function handlePatternInputBlur(e) {
+            var _a;
             patternInputFocusedRef.value = false;
+            (_a = props.onPatternBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }
         function blur() {
             var _a, _b;
@@ -299,15 +303,76 @@ exports.default = (0, vue_1.defineComponent)({
                     props.disabled || patternInputFocusedRef.value ? -1 : 0;
             });
         });
-        return {
-            mergedTheme: themeRef,
-            mergedClearable: mergedClearableRef,
-            patternInputFocused: patternInputFocusedRef,
-            filterablePlaceholder: filterablePlaceholderRef,
-            label: labelRef,
-            selected: selectedRef,
-            showTagsPanel: showTagsPopoverRef,
-            isCompositing: isCompositingRef,
+        const { disableInlineTheme } = props;
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, 
+            // form warning
+            colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
+            // form error
+            colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
+            // clear
+            clearColor, clearColorHover, clearColorPressed, clearSize, 
+            // arrow
+            arrowSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
+            return {
+                '--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-padding-multiple': paddingMultiple,
+                '--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
+                '--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
+                '--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
+                '--n-clear-size': clearSize,
+                '--n-clear-color': clearColor,
+                '--n-clear-color-hover': clearColorHover,
+                '--n-clear-color-pressed': clearColorPressed,
+                // arrow-size
+                '--n-arrow-size': arrowSize
+            };
+        });
+        const themeClassHandle = disableInlineTheme
+            ? (0, _mixins_1.useThemeClass)('internal-selection', (0, vue_1.computed)(() => {
+                return props.size[0];
+            }), cssVarsRef, props)
+            : _mixins_1.emptyThemeClassHandle;
+        return Object.assign({ mergedTheme: themeRef, mergedClearable: mergedClearableRef, patternInputFocused: patternInputFocusedRef, filterablePlaceholder: filterablePlaceholderRef, label: labelRef, selected: selectedRef, showTagsPanel: showTagsPopoverRef, isCompositing: isCompositingRef, 
             // dom ref
             counterRef,
             counterWrapperRef,
@@ -341,75 +406,11 @@ exports.default = (0, vue_1.defineComponent)({
             blurInput,
             updateCounter,
             getCounter,
-            getTail,
-            renderLabel: props.renderLabel,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, 
-                // form warning
-                colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
-                // form error
-                colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
-                // clear
-                clearColor, clearColorHover, clearColorPressed, clearSize, 
-                // arrow
-                arrowSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
-                return {
-                    '--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-padding-multiple': paddingMultiple,
-                    '--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
-                    '--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
-                    '--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
-                    '--n-clear-size': clearSize,
-                    '--n-clear-color': clearColor,
-                    '--n-clear-color-hover': clearColorHover,
-                    '--n-clear-color-pressed': clearColorPressed,
-                    // arrow-size
-                    '--n-arrow-size': arrowSize
-                };
-            })
-        };
+            getTail, renderLabel: props.renderLabel, cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
     },
     render() {
-        const { multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, renderTag, renderLabel } = this;
+        const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
@@ -431,18 +432,18 @@ exports.default = (0, vue_1.defineComponent)({
                 : this.selectedOptions).map(createTag);
             const input = filterable ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-input-tag`, ref: "inputTagElRef", key: "__input-tag__" },
                 (0, vue_1.h)("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", tabindex: -1, disabled: disabled, value: this.pattern, autofocus: this.autofocus, class: `${clsPrefix}-base-selection-input-tag__input`, onBlur: this.handlePatternInputBlur, onFocus: this.handlePatternInputFocus, onKeydown: this.handlePatternKeyDown, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
-                (0, vue_1.h)("span", { ref: "patternInputMirrorRef", class: `${clsPrefix}-base-selection-input-tag__mirror` }, this.pattern ? this.pattern : ''))) : null;
+                (0, vue_1.h)("span", { ref: "patternInputMirrorRef", class: `${clsPrefix}-base-selection-input-tag__mirror` }, this.pattern))) : null;
             // May Overflow
             const renderCounter = maxTagCountResponsive
                 ? () => ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, ref: "counterWrapperRef" },
-                    (0, vue_1.h)(tag_1.NTag, { ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
+                    (0, vue_1.h)(tag_1.NTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
                 : undefined;
             let counter;
             if (maxTagCountNumeric) {
                 const rest = this.selectedOptions.length - maxTagCount;
                 if (rest > 0) {
                     counter = ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: "__counter__" },
-                        (0, vue_1.h)(tag_1.NTag, { ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
+                        (0, vue_1.h)(tag_1.NTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
                             default: () => `+${rest}`
                         })));
                 }
@@ -480,7 +481,12 @@ exports.default = (0, vue_1.defineComponent)({
                     themeOverrides: this.mergedTheme.peerOverrides.Popover
                 }
                 : null;
-            const placeholder = !this.selected && !this.pattern && !this.isCompositing ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` }, this.placeholder)) : null;
+            const showPlaceholder = this.selected
+                ? false
+                : this.active
+                    ? !this.pattern && !this.isCompositing
+                    : true;
+            const placeholder = showPlaceholder ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` }, this.placeholder)) : null;
             if (filterable) {
                 const popoverTrigger = ((0, vue_1.h)("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-tags` },
                     tags,
@@ -507,13 +513,12 @@ exports.default = (0, vue_1.defineComponent)({
         }
         else {
             if (filterable) {
-                const showPlaceholder = !this.pattern &&
-                    (this.active || !this.selected) &&
-                    !this.isCompositing;
+                const hasInput = this.pattern || this.isCompositing;
+                const showPlaceholder = this.active ? !hasInput : !this.selected;
+                const showSelectedLabel = this.active ? false : this.selected;
                 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" },
+                    (0, vue_1.h)("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: 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 })),
+                    showSelectedLabel ? ((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,
@@ -521,7 +526,7 @@ exports.default = (0, vue_1.defineComponent)({
                             })
                             : renderLabel
                                 ? renderLabel(this.selectedOption, true)
-                                : (0, _utils_1.render)(this.label, this.selectedOption, true)))),
+                                : (0, _utils_1.render)(this.label, this.selectedOption, true)))) : null,
                     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));
@@ -542,6 +547,8 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${clsPrefix}-base-selection`,
+                this.themeClass,
+                status && `${clsPrefix}-base-selection--${status}-status`,
                 {
                     [`${clsPrefix}-base-selection--active`]: this.active,
                     [`${clsPrefix}-base-selection--selected`]: this.selected || (this.active && this.pattern),

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

@@ -1,6 +1,6 @@
 import { VNodeChild } from 'vue';
-import type { SelectBaseOption } from '../../../select/src/interface';
+import type { SelectOption } from '../../../select/src/interface';
 export declare type RenderTag = (props: {
-    option: SelectBaseOption;
+    option: SelectOption;
     handleClose: () => void;
 }) => VNodeChild;

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

@@ -47,9 +47,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  font-size: var(--n-font-size);
  `, [(0, cssr_1.cB)('base-loading', `
  color: var(--n-loading-color);
- `), (0, cssr_1.cB)('base-selection-tags', {
-  minHeight: 'var(--n-height)'
-}), (0, cssr_1.cE)('border, state-border', `
+ `), (0, cssr_1.cB)('base-selection-tags', 'min-height: var(--n-height);'), (0, cssr_1.cE)('border, state-border', `
  position: absolute;
  left: 0;
  right: 0;
@@ -155,13 +153,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  `)]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('state-border', `
  box-shadow: var(--n-box-shadow-active);
  border: var(--n-border-active);
- `), (0, cssr_1.cB)('base-selection-label', {
-  backgroundColor: 'var(--n-color-active)'
-}), (0, cssr_1.cB)('base-selection-tags', {
-  backgroundColor: 'var(--n-color-active)'
-})])]), (0, cssr_1.cM)('disabled', {
-  cursor: 'not-allowed'
-}, [(0, cssr_1.cE)('arrow', `
+ `), (0, cssr_1.cB)('base-selection-label', 'background-color: var(--n-color-active);'), (0, cssr_1.cB)('base-selection-tags', 'background-color: var(--n-color-active);')])]), (0, cssr_1.cM)('disabled', 'cursor: not-allowed;', [(0, cssr_1.cE)('arrow', `
  color: var(--n-arrow-color-disabled);
  `), (0, cssr_1.cB)('base-selection-label', `
  cursor: not-allowed;
@@ -207,7 +199,16 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  visibility: hidden;
  user-select: none;
  opacity: 0;
- `)])]), (0, cssr_1.cB)('base-selection-popover', `
+ `)]), ['warning', 'error'].map(status => (0, cssr_1.cM)(`${status}-status`, [(0, cssr_1.cE)('state-border', `border: var(--n-border-${status});`), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
+ 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(--n-box-shadow-active-${status});
+ border: var(--n-border-active-${status});
+ `), (0, cssr_1.cB)('base-selection-label', `background-color: var(--n-color-active-${status});`), (0, cssr_1.cB)('base-selection-tags', `background-color: var(--n-color-active-${status});`)]), (0, cssr_1.cM)('focus', [(0, cssr_1.cE)('state-border', `
+ box-shadow: var(--n-box-shadow-focus-${status});
+ border: var(--n-border-focus-${status});
+ `)])])]))]), (0, cssr_1.cB)('base-selection-popover', `
  margin-bottom: -3px;
  display: flex;
  flex-wrap: wrap;
@@ -215,27 +216,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  max-width: 100%;
  display: inline-flex;
  padding: 0 7px 3px 0;
- `, [(0, cssr_1.c)('&:last-child', {
-  paddingRight: 0
-}), (0, cssr_1.cB)('tag', `
+ `, [(0, cssr_1.c)('&:last-child', 'padding-right: 0;'), (0, cssr_1.cB)('tag', `
  font-size: 14px;
  max-width: 100%;
  `, [(0, cssr_1.cE)('content', `
+ line-height: 1.25;
  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(--n-border-${status})`
-}), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
- 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(--n-box-shadow-active-${status});
- border: var(--n-border-active-${status});
- `), (0, cssr_1.cB)('base-selection-label', {
-  backgroundColor: `var(--n-color-active-${status})`
-}), (0, cssr_1.cB)('base-selection-tags', {
-  backgroundColor: `var(--n-box-shadow-active-${status})`
-})]), (0, cssr_1.cM)('focus', [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--n-box-shadow-focus-${status});
- border: var(--n-border-focus-${status});
- `)])])])))]);
+ `)])])]);

package/lib/_internal/selection/styles/dark.js

@@ -27,19 +27,19 @@ const internalSelectionDark = {
             // default
             textColor: textColor2, textColorDisabled,
             placeholderColor,
-            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.1 }), border: '1px solid #0000', borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: null, boxShadowActive: `0 0 8px 0 ${(0, seemly_1.changeColor)(primaryColor, {
+            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.1 }), border: '1px solid #0000', borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 8px 0 ${(0, seemly_1.changeColor)(primaryColor, {
                 alpha: 0.4
             })}`, boxShadowFocus: `0 0 8px 0 ${(0, seemly_1.changeColor)(primaryColor, {
                 alpha: 0.4
             })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, 
             // warning
-            borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: null, boxShadowActiveWarning: `0 0 8px 0 ${(0, seemly_1.changeColor)(warningColor, {
+            borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 8px 0 ${(0, seemly_1.changeColor)(warningColor, {
                 alpha: 0.4
             })}`, boxShadowFocusWarning: `0 0 8px 0 ${(0, seemly_1.changeColor)(warningColor, {
                 alpha: 0.4
             })}`, colorActiveWarning: (0, seemly_1.changeColor)(warningColor, { alpha: 0.1 }), caretColorWarning: warningColor, 
             // error
-            borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: null, boxShadowActiveError: `0 0 8px 0 ${(0, seemly_1.changeColor)(errorColor, {
+            borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 8px 0 ${(0, seemly_1.changeColor)(errorColor, {
                 alpha: 0.4
             })}`, boxShadowFocusError: `0 0 8px 0 ${(0, seemly_1.changeColor)(errorColor, {
                 alpha: 0.4

package/lib/_internal/selection/styles/light.d.ts

@@ -20,7 +20,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHover: string;
     borderActive: string;
     borderFocus: string;
-    boxShadowHover: null;
+    boxShadowHover: string;
     boxShadowActive: string;
     boxShadowFocus: string;
     caretColor: string;
@@ -31,7 +31,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHoverWarning: string;
     borderActiveWarning: string;
     borderFocusWarning: string;
-    boxShadowHoverWarning: null;
+    boxShadowHoverWarning: string;
     boxShadowActiveWarning: string;
     boxShadowFocusWarning: string;
     colorActiveWarning: string;
@@ -40,7 +40,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHoverError: string;
     borderActiveError: string;
     borderFocusError: string;
-    boxShadowHoverError: null;
+    boxShadowHoverError: string;
     boxShadowActiveError: string;
     boxShadowFocusError: string;
     colorActiveError: string;
@@ -75,7 +75,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHover: string;
     borderActive: string;
     borderFocus: string;
-    boxShadowHover: null;
+    boxShadowHover: string;
     boxShadowActive: string;
     boxShadowFocus: string;
     caretColor: string;
@@ -86,7 +86,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHoverWarning: string;
     borderActiveWarning: string;
     borderFocusWarning: string;
-    boxShadowHoverWarning: null;
+    boxShadowHoverWarning: string;
     boxShadowActiveWarning: string;
     boxShadowFocusWarning: string;
     colorActiveWarning: string;
@@ -95,7 +95,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHoverError: string;
     borderActiveError: string;
     borderFocusError: string;
-    boxShadowHoverError: null;
+    boxShadowHoverError: string;
     boxShadowActiveError: string;
     boxShadowFocusError: string;
     colorActiveError: string;

package/lib/_internal/selection/styles/light.js

@@ -22,19 +22,19 @@ const self = (vars) => {
         // default
         textColor: textColor2, textColorDisabled,
         placeholderColor,
-        placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: null, boxShadowActive: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, {
+        placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, {
             alpha: 0.2
         })}`, boxShadowFocus: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, {
             alpha: 0.2
         })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, 
         // warning
-        borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: null, boxShadowActiveWarning: `0 0 0 2px ${(0, seemly_1.changeColor)(warningColor, {
+        borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 0 2px ${(0, seemly_1.changeColor)(warningColor, {
             alpha: 0.2
         })}`, boxShadowFocusWarning: `0 0 0 2px ${(0, seemly_1.changeColor)(warningColor, {
             alpha: 0.2
         })}`, colorActiveWarning: inputColor, caretColorWarning: warningColor, 
         // error
-        borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: null, boxShadowActiveError: `0 0 0 2px ${(0, seemly_1.changeColor)(errorColor, {
+        borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 0 2px ${(0, seemly_1.changeColor)(errorColor, {
             alpha: 0.2
         })}`, boxShadowFocusError: `0 0 0 2px ${(0, seemly_1.changeColor)(errorColor, {
             alpha: 0.2

package/lib/_internal/slot-machine/src/SlotMachine.js

@@ -29,7 +29,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        (0, _mixins_1.useStyle)('BaseSlotMachine', index_cssr_1.default, (0, vue_1.toRef)(props, 'clsPrefix'));
+        (0, _mixins_1.useStyle)('-base-slot-machine', index_cssr_1.default, (0, vue_1.toRef)(props, 'clsPrefix'));
         const oldValueRef = (0, vue_1.ref)();
         const newValueRef = (0, vue_1.ref)();
         const numbersRef = (0, vue_1.computed)(() => {

package/lib/_internal/wave/src/Wave.js

@@ -15,7 +15,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        (0, _mixins_1.useStyle)('BaseWave', index_cssr_1.default, (0, vue_1.toRef)(props, 'clsPrefix'));
+        (0, _mixins_1.useStyle)('-base-wave', index_cssr_1.default, (0, vue_1.toRef)(props, 'clsPrefix'));
         const selfRef = (0, vue_1.ref)(null);
         const activeRef = (0, vue_1.ref)(false);
         let animationTimerId = null;

package/lib/_mixins/index.d.ts

@@ -6,4 +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';
+export { useThemeClass, emptyThemeClassHandle } from './use-css-vars-class';

package/lib/_mixins/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCssVarsClass = exports.useHljs = exports.useStyle = exports.useLocale = exports.defaultClsPrefix = exports.useConfig = exports.createTheme = exports.useTheme = exports.useFormItem = void 0;
+exports.emptyThemeClassHandle = exports.useThemeClass = exports.useHljs = exports.useStyle = exports.useLocale = exports.defaultClsPrefix = exports.useConfig = exports.createTheme = exports.useTheme = exports.useFormItem = void 0;
 var use_form_item_1 = require("./use-form-item");
 Object.defineProperty(exports, "useFormItem", { enumerable: true, get: function () { return __importDefault(use_form_item_1).default; } });
 var use_theme_1 = require("./use-theme");
@@ -19,4 +19,5 @@ Object.defineProperty(exports, "useStyle", { enumerable: true, get: function ()
 var use_hljs_1 = require("./use-hljs");
 Object.defineProperty(exports, "useHljs", { enumerable: true, get: function () { return __importDefault(use_hljs_1).default; } });
 var use_css_vars_class_1 = require("./use-css-vars-class");
-Object.defineProperty(exports, "useCssVarsClass", { enumerable: true, get: function () { return use_css_vars_class_1.useCssVarsClass; } });
+Object.defineProperty(exports, "useThemeClass", { enumerable: true, get: function () { return use_css_vars_class_1.useThemeClass; } });
+Object.defineProperty(exports, "emptyThemeClassHandle", { enumerable: true, get: function () { return use_css_vars_class_1.emptyThemeClassHandle; } });

package/lib/_mixins/use-config.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultClsPrefix = void 0;
 const vue_1 = require("vue");
-const ConfigProvider_1 = require("../config-provider/src/ConfigProvider");
+const context_1 = require("../config-provider/src/context");
 exports.defaultClsPrefix = 'n';
 function useConfig(props = {}, options = {
     defaultBordered: true
 }) {
-    const NConfigProvider = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+    const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
     return {
         NConfigProvider,
         mergedBorderedRef: (0, vue_1.computed)(() => {

package/lib/_mixins/use-css-vars-class.d.ts

@@ -1,2 +1,11 @@
-import { Ref } from 'vue';
-export declare function useCssVarsClass(cssVarsRef: Ref<Record<string, string>>): Ref<string>;
+import { ComputedRef, Ref } from 'vue';
+export declare function useThemeClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
+    themeOverrides?: unknown;
+}): {
+    themeClass: Ref<string>;
+    onRender: () => void;
+};
+export declare const emptyThemeClassHandle: {
+    themeClass?: Ref<string>;
+    onRender?: () => void;
+};

package/lib/_mixins/use-css-vars-class.js

@@ -1,29 +1,57 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCssVarsClass = void 0;
+exports.emptyThemeClassHandle = exports.useThemeClass = void 0;
 const vue_1 = require("vue");
-const hash_1 = __importDefault(require("@emotion/hash"));
+const css_render_1 = require("css-render");
+const vue3_ssr_1 = require("@css-render/vue3-ssr");
+const context_1 = require("../config-provider/src/context");
+const _utils_1 = require("../_utils");
 const cssr_1 = require("../_utils/cssr");
-// window.xxx = 0
-function useCssVarsClass(cssVarsRef) {
-    const cssVarsClassRef = (0, vue_1.ref)('');
-    (0, vue_1.watchEffect)(() => {
-        // window.xxx -= performance.now()
-        const cssVars = cssVarsRef.value;
-        let style = '';
-        for (const key in cssVars) {
-            style += `${key}: ${cssVars[key]};`;
+function useThemeClass(componentName, hashRef, cssVarsRef, props) {
+    var _a;
+    if (!cssVarsRef)
+        (0, _utils_1.throwError)('useThemeClass', 'cssVarsRef is not passed');
+    const mergedThemeHashRef = (_a = (0, vue_1.inject)(context_1.configProviderInjectionKey, null)) === null || _a === void 0 ? void 0 : _a.mergedThemeHashRef;
+    const themeClassRef = (0, vue_1.ref)('');
+    const ssrAdapter = (0, vue3_ssr_1.useSsrAdapter)();
+    let renderCallback;
+    const mountStyle = () => {
+        let finalThemeHash = componentName;
+        const hashValue = hashRef ? hashRef.value : undefined;
+        const themeHash = mergedThemeHashRef === null || mergedThemeHashRef === void 0 ? void 0 : mergedThemeHashRef.value;
+        if (themeHash)
+            finalThemeHash += '-' + themeHash;
+        if (hashValue)
+            finalThemeHash += '-' + hashValue;
+        if (props.themeOverrides) {
+            finalThemeHash += '-' + (0, css_render_1.hash)(JSON.stringify(props.themeOverrides));
         }
-        const styleHash = (0, hash_1.default)(style);
-        cssVarsClassRef.value = `c${styleHash}`;
-        (0, cssr_1.c)(`.c${styleHash}`, style).mount({
-            id: styleHash
-        });
-        // window.xxx += performance.now()
+        themeClassRef.value = finalThemeHash;
+        renderCallback = () => {
+            const cssVars = cssVarsRef.value;
+            let style = '';
+            for (const key in cssVars) {
+                style += `${key}: ${cssVars[key]};`;
+            }
+            (0, cssr_1.c)(`.${finalThemeHash}`, style).mount({
+                id: finalThemeHash,
+                ssr: ssrAdapter
+            });
+            renderCallback = undefined;
+        };
+    };
+    (0, vue_1.watchEffect)(() => {
+        mountStyle();
     });
-    return cssVarsClassRef;
+    return {
+        themeClass: themeClassRef,
+        onRender: () => {
+            renderCallback === null || renderCallback === void 0 ? void 0 : renderCallback();
+        }
+    };
 }
-exports.useCssVarsClass = useCssVarsClass;
+exports.useThemeClass = useThemeClass;
+exports.emptyThemeClassHandle = {
+    themeClass: undefined,
+    onRender: undefined
+};