naive-ui 2.25.2 → 2.25.5

package/es/carousel/src/Carousel.d.ts

@@ -195,7 +195,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-dot-line-width': string;
         '--n-dot-line-width-active': string;
         '--n-arrow-color': string;
-    }>;
+    }> | undefined;
+    themeClass: Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     getCurrentIndex: () => number;
     to: (index: number) => void;
     prev: () => void;

package/es/carousel/src/Carousel.js

@@ -1,8 +1,8 @@
 import { h, defineComponent, ref, provide, cloneVNode, computed, onBeforeUnmount, watch, withDirectives, vShow, Transition, toRef, nextTick, onMounted, watchEffect, onUpdated } from 'vue';
 import { VResizeObserver } from 'vueuc';
 import { on, off } from 'evtd';
-import { useConfig, useTheme } from '../../_mixins';
-import { flatten, keep } from '../../_utils';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { flatten, keep, resolveSlotWithProps } from '../../_utils';
 import { carouselLight } from '../styles';
 import { calculateSize, getNextIndex, getPrevIndex, getDisplayIndex, getRealIndex, isTouchEvent, clampValue, resolveSpeed } from './utils';
 import NCarouselDots from './CarouselDots';
@@ -59,7 +59,7 @@ export default defineComponent({
     name: 'Carousel',
     props: carouselProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         // Dom
         const selfElRef = ref(null);
         const slidesElsRef = ref([]);
@@ -672,25 +672,30 @@ export default defineComponent({
             next: next
         };
         const themeRef = useTheme('Carousel', '-carousel', style, carouselLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { dotSize, dotColor, dotColorActive, dotColorFocus, dotLineWidth, dotLineWidthActive, arrowColor } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-dot-color': dotColor,
+                '--n-dot-color-focus': dotColorFocus,
+                '--n-dot-color-active': dotColorActive,
+                '--n-dot-size': dotSize,
+                '--n-dot-line-width': dotLineWidth,
+                '--n-dot-line-width-active': dotLineWidthActive,
+                '--n-arrow-color': arrowColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('carousel', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign(Object.assign({ mergedClsPrefix: mergedClsPrefixRef, selfElRef, slideVNodes: slideVNodesRef, duplicatedable: duplicatedableRef, userWantsControl: userWantsControlRef, autoSlideSize: autoSlideSizeRef, displayIndex: displayIndexRef, realIndex: realIndexRef, slideStyles: slideStylesRef, translateStyle: translateStyleRef, handleTouchstart,
             handleTransitionEnd,
             handleMousewheel,
             handleResize,
-            handleSlideResize, isActive: isDisplayActive }, caroulseSlotProps), caroulseExposedMethod), { cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { dotSize, dotColor, dotColorActive, dotColorFocus, dotLineWidth, dotLineWidthActive, arrowColor } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-dot-color': dotColor,
-                    '--n-dot-color-focus': dotColorFocus,
-                    '--n-dot-color-active': dotColorActive,
-                    '--n-dot-size': dotSize,
-                    '--n-dot-line-width': dotLineWidth,
-                    '--n-dot-line-width-active': dotLineWidthActive,
-                    '--n-arrow-color': arrowColor
-                };
-            }) });
+            handleSlideResize, isActive: isDisplayActive }, caroulseSlotProps), caroulseExposedMethod), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
+        var _a;
         const { mergedClsPrefix, showArrow, userWantsControl, draggable, touchable, slideStyles, dotType, dotPlacement, transitionProps = {}, arrowSlotProps, dotSlotProps, $slots: { default: defaultSlot, dots: dotsSlot, arrow: arrowSlot } } = this;
         const children = (defaultSlot && flatten(defaultSlot())) || [];
         let slides = filterCarouselItem(children);
@@ -712,7 +717,9 @@ export default defineComponent({
                 default: () => slide
             })));
         }
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { ref: "selfElRef", class: [
+                this.themeClass,
                 `${mergedClsPrefix}-carousel`,
                 this.direction === 'vertical' &&
                     `${mergedClsPrefix}-carousel--vertical`,
@@ -730,11 +737,13 @@ export default defineComponent({
                     : slides))
             }),
             this.showDots &&
-                (dotsSlot
-                    ? dotsSlot(dotSlotProps)
-                    : dotSlotProps.total > 1 && (h(NCarouselDots, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))),
+                resolveSlotWithProps(dotsSlot, dotSlotProps, () => [
+                    dotSlotProps.total > 1 && (h(NCarouselDots, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))
+                ]),
             showArrow &&
-                (arrowSlot ? arrowSlot(arrowSlotProps) : h(NCarouselArrow, null))));
+                resolveSlotWithProps(arrowSlot, arrowSlotProps, () => [
+                    h(NCarouselArrow, null)
+                ])));
     }
 });
 function filterCarouselItem(vnodes, carouselItems = []) {

package/es/cascader/src/Cascader.d.ts

@@ -35,6 +35,10 @@ declare const cascaderProps: {
         readonly default: "click";
     };
     readonly clearable: BooleanConstructor;
+    readonly clearFilterAfterSelect: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly remote: BooleanConstructor;
     readonly onLoad: PropType<OnLoad>;
     readonly separator: {
@@ -673,6 +677,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "click";
     };
     readonly clearable: BooleanConstructor;
+    readonly clearFilterAfterSelect: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly remote: BooleanConstructor;
     readonly onLoad: PropType<OnLoad>;
     readonly separator: {
@@ -1703,7 +1711,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-option-arrow-color': string;
         '--n-menu-mask-color': string;
         '--n-loading-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     focus: () => void;
     blur: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -1737,6 +1747,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "click";
     };
     readonly clearable: BooleanConstructor;
+    readonly clearFilterAfterSelect: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly remote: BooleanConstructor;
     readonly onLoad: PropType<OnLoad>;
     readonly separator: {
@@ -2354,6 +2368,7 @@ declare const _default: import("vue").DefineComponent<{
     virtualScroll: boolean;
     filterable: boolean;
     clearable: boolean;
+    clearFilterAfterSelect: boolean;
     defaultValue: Value | null;
     remote: boolean;
     expandTrigger: ExpandTrigger;

package/es/cascader/src/Cascader.js

@@ -4,7 +4,7 @@ import { VBinder, VTarget, VFollower } from 'vueuc';
 import { depx, changeColor, happensIn } from 'seemly';
 import { useIsMounted, useMergedState } from 'vooks';
 import { NInternalSelection } from '../../_internal';
-import { useLocale, useTheme, useConfig, useFormItem } from '../../_mixins';
+import { useLocale, useTheme, useConfig, useFormItem, useThemeClass } from '../../_mixins';
 import { call, useAdjustedTo, warnOnce } from '../../_utils';
 import { cascaderLight } from '../styles';
 import { getPathLabel, getRawNodePath } from './utils';
@@ -27,7 +27,10 @@ const cascaderProps = Object.assign(Object.assign({}, useTheme.props), { to: use
     }, expandTrigger: {
         type: String,
         default: 'click'
-    }, clearable: Boolean, remote: Boolean, onLoad: Function, separator: {
+    }, clearable: Boolean, clearFilterAfterSelect: {
+        type: Boolean,
+        default: true
+    }, remote: Boolean, onLoad: Function, separator: {
         type: String,
         default: ' / '
     }, filter: Function, placement: {
@@ -60,7 +63,6 @@ const cascaderProps = Object.assign(Object.assign({}, useTheme.props), { to: use
     }, renderLabel: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onBlur: Function, onFocus: Function, 
     // deprecated
     onChange: [Function, Array] });
-// TODO refactor cascader menu keyboard scroll (use virtual list)
 export default defineComponent({
     name: 'Cascader',
     props: cascaderProps,
@@ -75,7 +77,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } = useConfig(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Cascader', '-cascader', style, cascaderLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Cascader');
         const uncontrolledValueRef = ref(props.defaultValue);
@@ -372,6 +374,10 @@ export default defineComponent({
                 return;
             handleCascaderMenuClickOutside(e);
         }
+        function clearPattern() {
+            if (props.clearFilterAfterSelect)
+                patternRef.value = '';
+        }
         // --- keyboard
         function move(direction) {
             var _a, _b, _c;
@@ -486,7 +492,7 @@ export default defineComponent({
                             if (selectMenuInstRef.value) {
                                 const hasCorrespondingOption = selectMenuInstRef.value.enter();
                                 if (hasCorrespondingOption)
-                                    patternRef.value = '';
+                                    clearPattern();
                             }
                         }
                     }
@@ -664,7 +670,8 @@ export default defineComponent({
             doUncheck,
             closeMenu,
             handleSelectMenuClickOutside,
-            handleCascaderMenuClickOutside
+            handleCascaderMenuClickOutside,
+            clearPattern
         });
         const exposedMethods = {
             focus: () => {
@@ -676,6 +683,31 @@ export default defineComponent({
                 (_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const cssVarsRef = computed(() => {
+            const { self: { optionArrowColor, optionTextColor, optionTextColorActive, optionTextColorDisabled, optionCheckMarkColor, menuColor, menuBoxShadow, menuDividerColor, menuBorderRadius, menuHeight, optionColorHover, optionHeight, optionFontSize, loadingColor, columnWidth }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-menu-border-radius': menuBorderRadius,
+                '--n-menu-box-shadow': menuBoxShadow,
+                '--n-menu-height': menuHeight,
+                '--n-column-width': columnWidth,
+                '--n-menu-color': menuColor,
+                '--n-menu-divider-color': menuDividerColor,
+                '--n-option-height': optionHeight,
+                '--n-option-font-size': optionFontSize,
+                '--n-option-text-color': optionTextColor,
+                '--n-option-text-color-disabled': optionTextColorDisabled,
+                '--n-option-text-color-active': optionTextColorActive,
+                '--n-option-color-hover': optionColorHover,
+                '--n-option-check-mark-color': optionCheckMarkColor,
+                '--n-option-arrow-color': optionArrowColor,
+                '--n-menu-mask-color': changeColor(menuColor, { alpha: 0.75 }),
+                '--n-loading-color': loadingColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('cascader', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, selectMenuFollowerRef,
             cascaderMenuFollowerRef,
             triggerInstRef,
@@ -692,31 +724,10 @@ export default defineComponent({
             handleDeleteOption,
             handlePatternInput,
             handleKeyDown,
-            handleKeyUp, focused: focusedRef, optionHeight: optionHeightRef, mergedTheme: themeRef, cssVars: computed(() => {
-                const { self: { optionArrowColor, optionTextColor, optionTextColorActive, optionTextColorDisabled, optionCheckMarkColor, menuColor, menuBoxShadow, menuDividerColor, menuBorderRadius, menuHeight, optionColorHover, optionHeight, optionFontSize, loadingColor, columnWidth }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-menu-border-radius': menuBorderRadius,
-                    '--n-menu-box-shadow': menuBoxShadow,
-                    '--n-menu-height': menuHeight,
-                    '--n-column-width': columnWidth,
-                    '--n-menu-color': menuColor,
-                    '--n-menu-divider-color': menuDividerColor,
-                    '--n-option-height': optionHeight,
-                    '--n-option-font-size': optionFontSize,
-                    '--n-option-text-color': optionTextColor,
-                    '--n-option-text-color-disabled': optionTextColorDisabled,
-                    '--n-option-text-color-active': optionTextColorActive,
-                    '--n-option-color-hover': optionColorHover,
-                    '--n-option-check-mark-color': optionCheckMarkColor,
-                    '--n-option-arrow-color': optionArrowColor,
-                    '--n-menu-mask-color': changeColor(menuColor, { alpha: 0.75 }),
-                    '--n-loading-color': loadingColor
-                };
-            }) });
+            handleKeyUp, focused: focusedRef, optionHeight: optionHeightRef, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
-        const { mergedClsPrefix, $slots } = this;
+        const { mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-cascader` },
             h(VBinder, null, {
                 default: () => [
@@ -724,10 +735,21 @@ export default defineComponent({
                         default: () => (h(NInternalSelection, { ref: "triggerInstRef", status: this.mergedStatus, clsPrefix: mergedClsPrefix, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, focused: this.focused, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onClick: this.handleTriggerClick, onClear: this.handleClear, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }))
                     }),
                     h(VFollower, { key: "cascaderMenu", ref: "cascaderMenuFollowerRef", show: this.mergedShow && !this.showSelectMenu, containerClass: this.namespace, placement: this.placement, width: !this.options.length ? 'target' : undefined, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
-                        default: () => (h(CascaderMenu, { ref: "cascaderMenuInstRef", value: this.mergedValue, show: this.mergedShow && !this.showSelectMenu, menuModel: this.menuModel, style: this.cssVars, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyUp, onMousedown: this.handleMenuMousedown, onTabout: this.handleMenuTabout }, $slots))
+                        default: () => {
+                            var _a;
+                            (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                            return (h(CascaderMenu, { ref: "cascaderMenuInstRef", class: this.themeClass, value: this.mergedValue, show: this.mergedShow && !this.showSelectMenu, menuModel: this.menuModel, style: this.cssVars, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyUp, onMousedown: this.handleMenuMousedown, onTabout: this.handleMenuTabout }, {
+                                action: () => { var _a, _b; return (_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a); },
+                                empty: () => { var _a, _b; return (_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                            }));
+                        }
                     }),
                     h(VFollower, { key: "selectMenu", ref: "selectMenuFollowerRef", show: this.mergedShow && this.showSelectMenu, containerClass: this.namespace, width: "target", placement: this.placement, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
-                        default: () => (h(CascaderSelectMenu, { ref: "selectMenuInstRef", value: this.mergedValue, show: this.mergedShow && this.showSelectMenu, pattern: this.pattern, multiple: this.multiple, tmNodes: this.treeMate.treeNodes, filter: this.filter, labelField: this.labelField, separator: this.separator, style: this.cssVars }))
+                        default: () => {
+                            var _a;
+                            (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                            return (h(CascaderSelectMenu, { ref: "selectMenuInstRef", class: this.themeClass, value: this.mergedValue, show: this.mergedShow && this.showSelectMenu, pattern: this.pattern, multiple: this.multiple, tmNodes: this.treeMate.treeNodes, filter: this.filter, labelField: this.labelField, separator: this.separator, style: this.cssVars }));
+                        }
                     })
                 ]
             })));

package/es/cascader/src/CascaderMenu.js

@@ -1,10 +1,11 @@
 import { h, ref, defineComponent, watch, toRef, inject, nextTick, Transition, withDirectives } from 'vue';
 import { clickoutside } from 'vdirs';
+import FocusDetector from '../../_internal/focus-detector';
+import { resolveSlot, resolveWrappedSlot } from '../../_utils';
 import { NEmpty } from '../../empty';
 import { NBaseMenuMask } from '../../_internal';
 import NCascaderSubmenu from './CascaderSubmenu';
 import { cascaderInjectionKey } from './interface';
-import FocusDetector from '../../_internal/focus-detector';
 export default defineComponent({
     name: 'NCascaderMenu',
     props: {
@@ -97,7 +98,7 @@ export default defineComponent({
             handleClickOutside }, exposedRef);
     },
     render() {
-        const { submenuInstRefs, mergedClsPrefix, $slots, mergedTheme } = this;
+        const { submenuInstRefs, mergedClsPrefix, mergedTheme } = this;
         return (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
             default: () => {
                 if (!this.show)
@@ -111,10 +112,10 @@ export default defineComponent({
                                     submenuInstRefs[index] = instance;
                                 }
                             }), key: index, tmNodes: submenuOptions, depth: index + 1 }))),
-                        h(NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : (h("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, $slots.empty ? ($slots.empty()) : (h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })))),
-                    $slots.action && (h("div", { class: `${mergedClsPrefix}-cascader-menu-action`, "data-action": true }, {
-                        default: $slots.action
-                    })),
+                        h(NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : (h("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, resolveSlot(this.$slots.empty, () => [
+                        h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+                    ]))),
+                    resolveWrappedSlot(this.$slots.action, (children) => children && (h("div", { class: `${mergedClsPrefix}-cascader-menu-action`, "data-action": true }, children))),
                     h(FocusDetector, { onFocus: this.onTabout })), [[clickoutside, this.handleClickOutside]]);
             }
         }));

package/es/cascader/src/CascaderSelectMenu.js

@@ -33,7 +33,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { isMountedRef, mergedValueRef, mergedClsPrefixRef, mergedThemeRef, mergedCheckStrategyRef, syncSelectMenuPosition, closeMenu, handleSelectMenuClickOutside, doUncheck: cascaderDoUncheck, doCheck: cascaderDoCheck
+        const { isMountedRef, mergedValueRef, mergedClsPrefixRef, mergedThemeRef, mergedCheckStrategyRef, syncSelectMenuPosition, closeMenu, handleSelectMenuClickOutside, doUncheck: cascaderDoUncheck, doCheck: cascaderDoCheck, clearPattern
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(cascaderInjectionKey);
         const menuInstRef = ref(null);
@@ -90,6 +90,7 @@ export default defineComponent({
                 else if (mergedValue === null) {
                     cascaderDoCheck(tmNode.key);
                 }
+                clearPattern();
             }
             else {
                 cascaderDoCheck(tmNode.key);

package/es/cascader/src/CascaderSubmenu.d.ts

@@ -364,6 +364,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;

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

@@ -53,6 +53,7 @@ export interface CascaderInjection {
     handleSelectMenuClickOutside: (e: MouseEvent) => void;
     handleCascaderMenuClickOutside: (e: MouseEvent) => void;
     renderLabelRef: Ref<((option: CascaderOption, checked: boolean) => VNodeChild) | undefined>;
+    clearPattern: () => void;
 }
 export interface CascaderSubmenuInstance {
     scroll: (index: number, elSize: number) => void;

package/es/checkbox/src/Checkbox.d.ts

@@ -395,9 +395,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-box-shadow-focus': string;
         '--n-color': string;
         '--n-color-checked': string;
-        '--n-color-table-header': string;
-        '--n-color-table-header-modal': string;
-        '--n-color-table-header-popover': string;
+        '--n-color-table': string;
+        '--n-color-table-modal': string;
+        '--n-color-table-popover': string;
         '--n-color-disabled': string;
         '--n-color-disabled-checked': string;
         '--n-text-color': string;
@@ -407,7 +407,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-check-mark-color-disabled-checked': string;
         '--n-font-size': string;
         '--n-label-padding': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: PropType<"small" | "medium" | "large">;
     checked: {

package/es/checkbox/src/Checkbox.js

@@ -2,7 +2,7 @@ import { h, defineComponent, computed, inject, ref, toRef, watchEffect } from 'v
 import { useMergedState, useMemo } from 'vooks';
 import { createId } from 'seemly';
 import { on } from 'evtd';
-import { useConfig, useFormItem, useTheme } from '../../_mixins';
+import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
 import { NIconSwitchTransition } from '../../_internal';
 import { call, createKey, warnOnce } from '../../_utils';
 import { checkboxLight } from '../styles';
@@ -45,7 +45,7 @@ export default defineComponent({
             });
         }
         const selfRef = ref(null);
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const formItem = useFormItem(props, {
             mergedSize(NFormItem) {
                 const { size } = props;
@@ -162,6 +162,38 @@ export default defineComponent({
                 (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const cssVarsRef = computed(() => {
+            const { value: mergedSize } = mergedSizeRef;
+            const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, [createKey('fontSize', mergedSize)]: fontSize, [createKey('size', mergedSize)]: size } } = themeRef.value;
+            return {
+                '--n-size': size,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-border': border,
+                '--n-border-checked': borderChecked,
+                '--n-border-focus': borderFocus,
+                '--n-border-disabled': borderDisabled,
+                '--n-border-disabled-checked': borderDisabledChecked,
+                '--n-box-shadow-focus': boxShadowFocus,
+                '--n-color': color,
+                '--n-color-checked': colorChecked,
+                '--n-color-table': colorTableHeader,
+                '--n-color-table-modal': colorTableHeaderModal,
+                '--n-color-table-popover': colorTableHeaderPopover,
+                '--n-color-disabled': colorDisabled,
+                '--n-color-disabled-checked': colorDisabledChecked,
+                '--n-text-color': textColor,
+                '--n-text-color-disabled': textColorDisabled,
+                '--n-check-mark-color': checkMarkColor,
+                '--n-check-mark-color-disabled': checkMarkColorDisabled,
+                '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
+                '--n-font-size': fontSize,
+                '--n-label-padding': labelPadding
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('checkbox', computed(() => mergedSizeRef.value[0]), cssVarsRef, props)
+            : undefined;
         return Object.assign(formItem, exposedMethods, {
             selfRef,
             mergedClsPrefix: mergedClsPrefixRef,
@@ -172,45 +204,22 @@ export default defineComponent({
             handleClick,
             handleKeyUp,
             handleKeyDown,
-            cssVars: computed(() => {
-                const { value: mergedSize } = mergedSizeRef;
-                const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, [createKey('fontSize', mergedSize)]: fontSize, [createKey('size', mergedSize)]: size } } = themeRef.value;
-                return {
-                    '--n-size': size,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-border': border,
-                    '--n-border-checked': borderChecked,
-                    '--n-border-focus': borderFocus,
-                    '--n-border-disabled': borderDisabled,
-                    '--n-border-disabled-checked': borderDisabledChecked,
-                    '--n-box-shadow-focus': boxShadowFocus,
-                    '--n-color': color,
-                    '--n-color-checked': colorChecked,
-                    '--n-color-table-header': colorTableHeader,
-                    '--n-color-table-header-modal': colorTableHeaderModal,
-                    '--n-color-table-header-popover': colorTableHeaderPopover,
-                    '--n-color-disabled': colorDisabled,
-                    '--n-color-disabled-checked': colorDisabledChecked,
-                    '--n-text-color': textColor,
-                    '--n-text-color-disabled': textColorDisabled,
-                    '--n-check-mark-color': checkMarkColor,
-                    '--n-check-mark-color-disabled': checkMarkColorDisabled,
-                    '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
-                    '--n-font-size': fontSize,
-                    '--n-label-padding': labelPadding
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         });
     },
     render() {
+        var _a;
         const { $slots, renderedChecked, mergedDisabled, indeterminate, privateInsideTable, cssVars, labelId, label, mergedClsPrefix, focusable, handleKeyUp, handleKeyDown, handleClick } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-checkbox`,
+                this.themeClass,
                 renderedChecked && `${mergedClsPrefix}-checkbox--checked`,
                 mergedDisabled && `${mergedClsPrefix}-checkbox--disabled`,
                 indeterminate && `${mergedClsPrefix}-checkbox--indeterminate`,
-                privateInsideTable && `${mergedClsPrefix}-checkbox--table-header`
+                privateInsideTable && `${mergedClsPrefix}-checkbox--inside-table`
             ], tabindex: mergedDisabled || !focusable ? undefined : 0, role: "checkbox", "aria-checked": indeterminate ? 'mixed' : renderedChecked, "aria-labelledby": labelId, style: cssVars, onKeyup: handleKeyUp, onKeydown: handleKeyDown, onClick: handleClick, onMousedown: () => {
                 on('selectstart', window, (e) => {
                     e.preventDefault();

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

@@ -10,8 +10,8 @@ import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'
 // --n-box-shadow-focus
 // --n-color
 // --n-color-checked
-// --n-color-table-header
-// --n-color-table-header-modal
+// --n-color-table
+// --n-color-table-modal
 // --n-color-disabled
 // --n-color-disabled-checked
 // --n-text-color
@@ -32,14 +32,14 @@ export default c([cB('checkbox', `
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
- --n-merged-color-table-header: var(--n-color-table-header);
+ --n-merged-color-table: var(--n-color-table);
  `, [c('&:hover', [cB('checkbox-box', [cE('border', {
   border: 'var(--n-border-checked)'
 })])]), c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', `
  border: var(--n-border-focus);
  box-shadow: var(--n-box-shadow-focus);
- `)])]), cM('table-header', [cB('checkbox-box', `
- background-color: var(--n-merged-color-table-header);
+ `)])]), cM('inside-table', [cB('checkbox-box', `
+ background-color: var(--n-merged-color-table);
  `)]), cM('checked', [cB('checkbox-box', `
  background-color: var(--n-color-checked);
  `, [cB('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
@@ -130,8 +130,8 @@ c('.check-icon', `
   display: 'none'
 })])]), // modal table header checkbox
 insideModal(cB('checkbox', `
- --n-merged-color-table-header: var(--n-color-table-header-modal);
+ --n-merged-color-table: var(--n-color-table-modal);
  `)), // popover table header checkbox
 insidePopover(cB('checkbox', `
- --n-merged-color-table-header: var(--n-color-table-header-popover);
+ --n-merged-color-table: var(--n-color-table-popover);
  `))]);

package/es/code/src/Code.d.ts

@@ -137,7 +137,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-hue-5-2': string;
         '--n-hue-6': string;
         '--n-hue-6-2': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     language: StringConstructor;
     code: {