naive-ui 2.24.4 → 2.25.0

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 }),
     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;
@@ -409,7 +413,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, renderTag, renderLabel } = this;
+        const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, renderTag, renderLabel } = this;
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
@@ -431,7 +435,7 @@ 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" },
@@ -480,7 +484,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 +516,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 +529,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 +550,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${clsPrefix}-base-selection`,
+                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/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/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,4 @@
-import { Ref } from 'vue';
-export declare function useCssVarsClass(cssVarsRef: Ref<Record<string, string>>): Ref<string>;
+import { ComputedRef, Ref } from 'vue';
+export declare function useCssVarsClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
+    themeOverrides?: unknown;
+}): Ref<string>;

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

@@ -1,28 +1,40 @@
 "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;
 const vue_1 = require("vue");
-const hash_1 = __importDefault(require("@emotion/hash"));
+const css_render_1 = require("css-render");
+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) {
+function useCssVarsClass(componentName, hashRef, cssVarsRef, props) {
+    var _a;
+    if (!cssVarsRef)
+        (0, _utils_1.throwError)('useCssVarsClass', 'cssVarsRef is not passed');
+    const mergedThemeHashRef = (_a = (0, vue_1.inject)(context_1.configProviderInjectionKey, null)) === null || _a === void 0 ? void 0 : _a.mergedThemeHashRef;
     const cssVarsClassRef = (0, vue_1.ref)('');
-    (0, vue_1.watchEffect)(() => {
-        // window.xxx -= performance.now()
+    const mountStyle = () => {
         const cssVars = cssVarsRef.value;
         let style = '';
         for (const key in cssVars) {
             style += `${key}: ${cssVars[key]};`;
         }
-        const styleHash = (0, hash_1.default)(style);
-        cssVarsClassRef.value = `c${styleHash}`;
-        (0, cssr_1.c)(`.c${styleHash}`, style).mount({
-            id: styleHash
+        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));
+        }
+        cssVarsClassRef.value = finalThemeHash;
+        (0, cssr_1.c)(`.${finalThemeHash}`, style).mount({
+            id: finalThemeHash
         });
-        // window.xxx += performance.now()
+    };
+    (0, vue_1.watchEffect)(() => {
+        mountStyle();
     });
     return cssVarsClassRef;
 }

package/lib/_mixins/use-form-item.d.ts

@@ -1,10 +1,12 @@
 import { ComputedRef, Ref } from 'vue';
+import { FormValidationStatus } from '../form/src/interface';
 declare type FormItemSize = 'small' | 'medium' | 'large';
 declare type AllowedSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | number;
 export interface FormItemInjection {
     path: Ref<string | undefined>;
     disabled: Ref<boolean>;
     mergedSize: ComputedRef<FormItemSize>;
+    mergedValidationStatus: ComputedRef<FormValidationStatus | undefined>;
     restoreValidation: () => void;
     handleContentBlur: () => void;
     handleContentFocus: () => void;
@@ -20,10 +22,12 @@ interface UseFormItemOptions<T> {
 interface UseFormItemProps<T> {
     size?: T;
     disabled?: boolean;
+    status?: FormValidationStatus;
 }
 export interface UseFormItem<T> {
     mergedSizeRef: ComputedRef<T>;
     mergedDisabledRef: ComputedRef<boolean>;
+    mergedStatusRef: ComputedRef<FormValidationStatus | undefined>;
     nTriggerFormBlur: () => void;
     nTriggerFormChange: () => void;
     nTriggerFormFocus: () => void;

package/lib/_mixins/use-form-item.js

@@ -33,6 +33,12 @@ function useFormItem(props, { defaultSize = 'medium', mergedSize, mergedDisabled
             }
             return false;
         });
+    const mergedStatusRef = (0, vue_1.computed)(() => {
+        const { status } = props;
+        if (status)
+            return status;
+        return NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.mergedValidationStatus.value;
+    });
     (0, vue_1.onBeforeUnmount)(() => {
         if (NFormItem) {
             NFormItem.restoreValidation();
@@ -41,6 +47,7 @@ function useFormItem(props, { defaultSize = 'medium', mergedSize, mergedDisabled
     return {
         mergedSizeRef,
         mergedDisabledRef,
+        mergedStatusRef,
         nTriggerFormBlur() {
             if (NFormItem) {
                 NFormItem.handleContentBlur();

package/lib/_mixins/use-hljs.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
-const ConfigProvider_1 = require("../config-provider/src/ConfigProvider");
+const context_1 = require("../config-provider/src/context");
 const _utils_1 = require("../_utils");
 function useHljs(props, shouldHighlightRef) {
-    const NConfigProvider = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+    const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
     if (process.env.NODE_ENV !== 'production') {
         const warnHljs = () => {
             if (!props.hljs && !(NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedHljsRef.value)) {

package/lib/_mixins/use-locale.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const locales_1 = require("../locales");
-const ConfigProvider_1 = require("../config-provider/src/ConfigProvider");
+const context_1 = require("../config-provider/src/context");
 function useLocale(ns) {
-    const { mergedLocaleRef, mergedDateLocaleRef } = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null) || {};
+    const { mergedLocaleRef, mergedDateLocaleRef } = (0, vue_1.inject)(context_1.configProviderInjectionKey, null) || {};
     const localeRef = (0, vue_1.computed)(() => {
         var _a, _b;
         return (_b = (_a = mergedLocaleRef === null || mergedLocaleRef === void 0 ? void 0 : mergedLocaleRef.value) === null || _a === void 0 ? void 0 : _a[ns]) !== null && _b !== void 0 ? _b : locales_1.enUS[ns];

package/lib/_mixins/use-style.js

@@ -27,7 +27,7 @@ function useStyle(mountId, style, clsPrefixRef) {
             ssr: ssrAdapter
         });
         index_cssr_1.default.mount({
-            id: 'naive-ui/global',
+            id: 'n-global',
             head: true,
             anchorMetaName: common_1.cssrAnchorMetaName,
             ssr: ssrAdapter

package/lib/_mixins/use-theme.d.ts

@@ -42,7 +42,7 @@ export declare type MergedTheme<T> = T extends Theme<unknown, infer V, infer W>
     peers: W;
     peerOverrides: ExtractMergedPeerOverrides<T>;
 } : T;
-declare function useTheme<N, T, R>(resolveId: Exclude<keyof GlobalTheme, 'common'>, mountId: string, style: CNode | undefined, defaultTheme: Theme<N, T, R>, props: UseThemeProps<Theme<N, T, R>>, clsPrefixRef?: Ref<string | undefined>): ComputedRef<MergedTheme<Theme<N, T, R>>>;
+declare function useTheme<N, T, R>(resolveId: Exclude<keyof GlobalTheme, 'common' | 'name'>, mountId: string, style: CNode | undefined, defaultTheme: Theme<N, T, R>, props: UseThemeProps<Theme<N, T, R>>, clsPrefixRef?: Ref<string | undefined>): ComputedRef<MergedTheme<Theme<N, T, R>>>;
 declare namespace useTheme {
     var props: {
         readonly theme: ObjectConstructor;

package/lib/_mixins/use-theme.js

@@ -9,7 +9,7 @@ const vue_1 = require("vue");
 const lodash_1 = require("lodash");
 const vue3_ssr_1 = require("@css-render/vue3-ssr");
 const index_cssr_1 = __importDefault(require("../_styles/global/index.cssr"));
-const ConfigProvider_1 = require("../config-provider/src/ConfigProvider");
+const context_1 = require("../config-provider/src/context");
 const common_1 = require("./common");
 function createTheme(theme) {
     return theme;
@@ -30,7 +30,7 @@ function useTheme(resolveId, mountId, style, defaultTheme, props, clsPrefixRef)
                 ssr: ssrAdapter
             });
             index_cssr_1.default.mount({
-                id: 'naive-ui/global',
+                id: 'n-global',
                 head: true,
                 anchorMetaName: common_1.cssrAnchorMetaName,
                 ssr: ssrAdapter
@@ -43,7 +43,7 @@ function useTheme(resolveId, mountId, style, defaultTheme, props, clsPrefixRef)
             (0, vue_1.onBeforeMount)(mountStyle);
         }
     }
-    const NConfigProvider = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+    const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
     const mergedThemeRef = (0, vue_1.computed)(() => {
         var _a;
         // keep props to make theme overrideable

package/lib/_utils/cssr/index.d.ts

@@ -3,10 +3,9 @@ declare const namespace = "n";
 declare const prefix: string;
 declare const c: import("css-render").createCNode<import("css-render").CSelector>, find: import("css-render").CFindTarget;
 declare const cB: import("css-render").createCNode<string | import("css-render").CLazySelector<string>>, cE: import("css-render").createCNode<string | import("css-render").CLazySelector<string>>, cM: import("css-render").createCNode<string | import("css-render").CLazySelector<string>>, cNotM: import("css-render").createCNode<string | import("css-render").CLazySelector<string>>;
-declare function insideFormItem(status: string | null, style: CNode): CNode;
 declare function insideModal(style: CNode): CNode;
 declare function insidePopover(style: CNode): CNode;
 declare function asModal(style: CProperties): CNode;
 declare const cCB: typeof cB;
-export { c, cB, cE, cM, cNotM, cCB, insideFormItem, insideModal, insidePopover, asModal, prefix, namespace, find };
+export { c, cB, cE, cM, cNotM, cCB, insideModal, insidePopover, asModal, prefix, namespace, find };
 export { createKey } from './create-key';

package/lib/_utils/cssr/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.createKey = exports.find = exports.namespace = exports.prefix = exports.asModal = exports.insidePopover = exports.insideModal = exports.insideFormItem = exports.cCB = exports.cNotM = exports.cM = exports.cE = exports.cB = exports.c = void 0;
+exports.createKey = exports.find = exports.namespace = exports.prefix = exports.asModal = exports.insidePopover = exports.insideModal = exports.cCB = exports.cNotM = exports.cM = exports.cE = exports.cB = exports.c = void 0;
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 const css_render_1 = __importDefault(require("css-render"));
 const plugin_bem_1 = __importDefault(require("@css-render/plugin-bem"));
@@ -28,20 +28,6 @@ exports.cB = cB;
 exports.cE = cE;
 exports.cM = cM;
 exports.cNotM = cNotM;
-function insideFormItem(status, style) {
-    if (status === null)
-        return style;
-    return c([
-        ({ props: { bPrefix } }) => c(`${bPrefix || prefix}form-item`, [
-            c(`${bPrefix || prefix}form-item-blank`, [
-                c(`&${bPrefix || prefix}form-item-blank${modifierPrefix}${status}`, [
-                    style
-                ])
-            ])
-        ])
-    ]);
-}
-exports.insideFormItem = insideFormItem;
 function insideModal(style) {
     return c(({ props: { bPrefix } }) => `${bPrefix || prefix}modal, ${bPrefix || prefix}drawer`, [style]);
 }

package/lib/_utils/index.d.ts

@@ -1,4 +1,4 @@
-export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey } from './vue';
+export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty } from './vue';
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './naive';

package/lib/_utils/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createKey = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
+exports.createKey = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
 var vue_1 = require("./vue");
 Object.defineProperty(exports, "call", { enumerable: true, get: function () { return vue_1.call; } });
 Object.defineProperty(exports, "keep", { enumerable: true, get: function () { return vue_1.keep; } });
@@ -24,6 +24,10 @@ Object.defineProperty(exports, "getFirstSlotVNode", { enumerable: true, get: fun
 Object.defineProperty(exports, "createDataKey", { enumerable: true, get: function () { return vue_1.createDataKey; } });
 Object.defineProperty(exports, "createRefSetter", { enumerable: true, get: function () { return vue_1.createRefSetter; } });
 Object.defineProperty(exports, "createInjectionKey", { enumerable: true, get: function () { return vue_1.createInjectionKey; } });
+Object.defineProperty(exports, "resolveSlot", { enumerable: true, get: function () { return vue_1.resolveSlot; } });
+Object.defineProperty(exports, "resolveSlotWithProps", { enumerable: true, get: function () { return vue_1.resolveSlotWithProps; } });
+Object.defineProperty(exports, "resolveWrappedSlot", { enumerable: true, get: function () { return vue_1.resolveWrappedSlot; } });
+Object.defineProperty(exports, "isSlotEmpty", { enumerable: true, get: function () { return vue_1.isSlotEmpty; } });
 var naive_1 = require("./naive");
 Object.defineProperty(exports, "warn", { enumerable: true, get: function () { return naive_1.warn; } });
 Object.defineProperty(exports, "warnOnce", { enumerable: true, get: function () { return naive_1.warnOnce; } });

package/lib/_utils/vue/index.d.ts

@@ -10,5 +10,5 @@ export { getFirstSlotVNode } from './get-first-slot-vnode';
 export { createDataKey } from './create-data-key';
 export { createRefSetter } from './create-ref-setter';
 export { createInjectionKey } from './create-injection-key';
-export { resolveSlot } from './resolve-slot';
+export { resolveSlot, resolveWrappedSlot, resolveSlotWithProps, isSlotEmpty } from './resolve-slot';
 export type { MaybeArray } from './call';

package/lib/_utils/vue/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.call = exports.flatten = exports.omit = exports.keep = exports.getVNodeChildren = exports.getSlot = void 0;
+exports.isSlotEmpty = exports.resolveSlotWithProps = exports.resolveWrappedSlot = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.call = exports.flatten = exports.omit = exports.keep = exports.getVNodeChildren = exports.getSlot = void 0;
 var get_slot_1 = require("./get-slot");
 Object.defineProperty(exports, "getSlot", { enumerable: true, get: function () { return get_slot_1.getSlot; } });
 var get_v_node_children_1 = require("./get-v-node-children");
@@ -27,3 +27,6 @@ var create_injection_key_1 = require("./create-injection-key");
 Object.defineProperty(exports, "createInjectionKey", { enumerable: true, get: function () { return create_injection_key_1.createInjectionKey; } });
 var resolve_slot_1 = require("./resolve-slot");
 Object.defineProperty(exports, "resolveSlot", { enumerable: true, get: function () { return resolve_slot_1.resolveSlot; } });
+Object.defineProperty(exports, "resolveWrappedSlot", { enumerable: true, get: function () { return resolve_slot_1.resolveWrappedSlot; } });
+Object.defineProperty(exports, "resolveSlotWithProps", { enumerable: true, get: function () { return resolve_slot_1.resolveSlotWithProps; } });
+Object.defineProperty(exports, "isSlotEmpty", { enumerable: true, get: function () { return resolve_slot_1.isSlotEmpty; } });

package/lib/_utils/vue/resolve-slot.d.ts

@@ -1,2 +1,8 @@
-import { Slot, VNodeChild } from 'vue';
-export declare function resolveSlot(slot: Slot | undefined, fallback: () => VNodeChild[]): VNodeChild;
+import { Slot, VNodeArrayChildren } from 'vue';
+/**
+ * We shouldn't use the following functions with slot flags `_: 1, 2, 3`
+ */
+export declare function resolveSlot(slot: Slot | undefined, fallback: () => VNodeArrayChildren): VNodeArrayChildren;
+export declare function resolveSlotWithProps<T>(slot: Slot | undefined, props: T, fallback: (props: T) => VNodeArrayChildren): VNodeArrayChildren;
+export declare function resolveWrappedSlot(slot: Slot | undefined, wrapper: (children: VNodeArrayChildren) => VNodeArrayChildren): VNodeArrayChildren | null;
+export declare function isSlotEmpty(slot: Slot | undefined): boolean;

package/lib/_utils/vue/resolve-slot.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveSlot = void 0;
+exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = void 0;
 const vue_1 = require("vue");
 function ensureValidVNode(vnodes) {
     return vnodes.some((child) => {
@@ -10,7 +10,8 @@ function ensureValidVNode(vnodes) {
         if (child.type === vue_1.Comment) {
             return false;
         }
-        if (child.type === vue_1.Fragment && !ensureValidVNode(child.children)) {
+        if (child.type === vue_1.Fragment &&
+            !ensureValidVNode(child.children)) {
             return false;
         }
         return true;
@@ -18,7 +19,26 @@ function ensureValidVNode(vnodes) {
         ? vnodes
         : null;
 }
+/**
+ * We shouldn't use the following functions with slot flags `_: 1, 2, 3`
+ */
 function resolveSlot(slot, fallback) {
     return (slot && ensureValidVNode(slot())) || fallback();
 }
 exports.resolveSlot = resolveSlot;
+function resolveSlotWithProps(slot, props, fallback) {
+    console.log(slot && ensureValidVNode(slot(props)));
+    return (slot && ensureValidVNode(slot(props))) || fallback(props);
+}
+exports.resolveSlotWithProps = resolveSlotWithProps;
+function resolveWrappedSlot(slot, wrapper) {
+    const children = slot && ensureValidVNode(slot());
+    if (children)
+        return wrapper(children);
+    return null;
+}
+exports.resolveWrappedSlot = resolveWrappedSlot;
+function isSlotEmpty(slot) {
+    return !(slot && ensureValidVNode(slot()));
+}
+exports.isSlotEmpty = isSlotEmpty;

package/lib/affix/src/Affix.js

@@ -58,7 +58,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: exports.affixProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        (0, _mixins_1.useStyle)('Affix', index_cssr_1.default, mergedClsPrefixRef);
+        (0, _mixins_1.useStyle)('-affix', index_cssr_1.default, mergedClsPrefixRef);
         let scrollTarget = null;
         const stickToTopRef = (0, vue_1.ref)(false);
         const stickToBottomRef = (0, vue_1.ref)(false);

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

@@ -10,7 +10,7 @@ declare const alertProps: {
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        type: PropType<"default" | "success" | "error" | "warning" | "info">;
         default: string;
     };
     closable: {
@@ -192,7 +192,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        type: PropType<"default" | "success" | "error" | "warning" | "info">;
         default: string;
     };
     closable: {
@@ -559,7 +559,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        type: PropType<"default" | "success" | "error" | "warning" | "info">;
         default: string;
     };
     closable: {
@@ -730,7 +730,7 @@ declare const _default: import("vue").DefineComponent<{
         padding: string;
     }, any>>>;
 }>>, {
-    type: "default" | "error" | "info" | "success" | "warning";
+    type: "default" | "success" | "error" | "warning" | "info";
     onAfterLeave: Function;
     title: string;
     showIcon: boolean;