naive-ui 2.25.2 → 2.25.3

package/lib/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/lib/cascader/src/Cascader.js

@@ -32,7 +32,10 @@ const cascaderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, 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: {
@@ -65,7 +68,6 @@ const cascaderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, 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)
 exports.default = (0, vue_1.defineComponent)({
     name: 'Cascader',
     props: cascaderProps,
@@ -80,7 +82,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Cascader', '-cascader', index_cssr_1.default, styles_1.cascaderLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Cascader');
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
@@ -377,6 +379,10 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             handleCascaderMenuClickOutside(e);
         }
+        function clearPattern() {
+            if (props.clearFilterAfterSelect)
+                patternRef.value = '';
+        }
         // --- keyboard
         function move(direction) {
             var _a, _b, _c;
@@ -491,7 +497,7 @@ exports.default = (0, vue_1.defineComponent)({
                             if (selectMenuInstRef.value) {
                                 const hasCorrespondingOption = selectMenuInstRef.value.enter();
                                 if (hasCorrespondingOption)
-                                    patternRef.value = '';
+                                    clearPattern();
                             }
                         }
                     }
@@ -669,7 +675,8 @@ exports.default = (0, vue_1.defineComponent)({
             doUncheck,
             closeMenu,
             handleSelectMenuClickOutside,
-            handleCascaderMenuClickOutside
+            handleCascaderMenuClickOutside,
+            clearPattern
         });
         const exposedMethods = {
             focus: () => {
@@ -681,6 +688,31 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const cssVarsRef = (0, vue_1.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': (0, seemly_1.changeColor)(menuColor, { alpha: 0.75 }),
+                '--n-loading-color': loadingColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('cascader', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, selectMenuFollowerRef,
             cascaderMenuFollowerRef,
             triggerInstRef,
@@ -697,31 +729,10 @@ exports.default = (0, vue_1.defineComponent)({
             handleDeleteOption,
             handlePatternInput,
             handleKeyDown,
-            handleKeyUp, focused: focusedRef, optionHeight: optionHeightRef, mergedTheme: themeRef, cssVars: (0, vue_1.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': (0, seemly_1.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 ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader` },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
@@ -729,10 +740,21 @@ exports.default = (0, vue_1.defineComponent)({
                         default: () => ((0, vue_1.h)(_internal_1.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 }))
                     }),
                     (0, vue_1.h)(vueuc_1.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 === _utils_1.useAdjustedTo.tdkey, to: this.adjustedTo }, {
-                        default: () => ((0, vue_1.h)(CascaderMenu_1.default, { 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 ((0, vue_1.h)(CascaderMenu_1.default, { 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); }
+                            }));
+                        }
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { key: "selectMenu", ref: "selectMenuFollowerRef", show: this.mergedShow && this.showSelectMenu, containerClass: this.namespace, width: "target", placement: this.placement, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey }, {
-                        default: () => ((0, vue_1.h)(CascaderSelectMenu_1.default, { 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 ((0, vue_1.h)(CascaderSelectMenu_1.default, { 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/lib/cascader/src/CascaderMenu.js

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const vdirs_1 = require("vdirs");
+const focus_detector_1 = __importDefault(require("../../_internal/focus-detector"));
+const _utils_1 = require("../../_utils");
 const empty_1 = require("../../empty");
 const _internal_1 = require("../../_internal");
 const CascaderSubmenu_1 = __importDefault(require("./CascaderSubmenu"));
 const interface_1 = require("./interface");
-const focus_detector_1 = __importDefault(require("../../_internal/focus-detector"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'NCascaderMenu',
     props: {
@@ -102,7 +103,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleClickOutside }, exposedRef);
     },
     render() {
-        const { submenuInstRefs, mergedClsPrefix, $slots, mergedTheme } = this;
+        const { submenuInstRefs, mergedClsPrefix, mergedTheme } = this;
         return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
             default: () => {
                 if (!this.show)
@@ -116,10 +117,10 @@ exports.default = (0, vue_1.defineComponent)({
                                     submenuInstRefs[index] = instance;
                                 }
                             }), key: index, tmNodes: submenuOptions, depth: index + 1 }))),
-                        (0, vue_1.h)(_internal_1.NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, $slots.empty ? ($slots.empty()) : ((0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })))),
-                    $slots.action && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu-action`, "data-action": true }, {
-                        default: $slots.action
-                    })),
+                        (0, vue_1.h)(_internal_1.NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, (0, _utils_1.resolveSlot)(this.$slots.empty, () => [
+                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+                    ]))),
+                    (0, _utils_1.resolveWrappedSlot)(this.$slots.action, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu-action`, "data-action": true }, children))),
                     (0, vue_1.h)(focus_detector_1.default, { onFocus: this.onTabout })), [[vdirs_1.clickoutside, this.handleClickOutside]]);
             }
         }));

package/lib/cascader/src/CascaderSelectMenu.js

@@ -35,7 +35,7 @@ exports.default = (0, vue_1.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
          } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
         const menuInstRef = (0, vue_1.ref)(null);
@@ -92,6 +92,7 @@ exports.default = (0, vue_1.defineComponent)({
                 else if (mergedValue === null) {
                     cascaderDoCheck(tmNode.key);
                 }
+                clearPattern();
             }
             else {
                 cascaderDoCheck(tmNode.key);

package/lib/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/lib/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/lib/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/lib/checkbox/src/Checkbox.js

@@ -50,7 +50,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const selfRef = (0, vue_1.ref)(null);
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const formItem = (0, _mixins_1.useFormItem)(props, {
             mergedSize(NFormItem) {
                 const { size } = props;
@@ -167,6 +167,38 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const cssVarsRef = (0, vue_1.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, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.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
+            ? (0, _mixins_1.useThemeClass)('checkbox', (0, vue_1.computed)(() => mergedSizeRef.value[0]), cssVarsRef, props)
+            : undefined;
         return Object.assign(formItem, exposedMethods, {
             selfRef,
             mergedClsPrefix: mergedClsPrefixRef,
@@ -177,45 +209,22 @@ exports.default = (0, vue_1.defineComponent)({
             handleClick,
             handleKeyUp,
             handleKeyDown,
-            cssVars: (0, vue_1.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, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.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 ((0, vue_1.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: () => {
                 (0, evtd_1.on)('selectstart', window, (e) => {
                     e.preventDefault();

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

@@ -23,8 +23,8 @@ const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions
 // --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
@@ -46,14 +46,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.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);
  `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
   border: 'var(--n-border-checked)'
 })])]), (0, cssr_1.c)('&:focus:not(:active)', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', `
  border: var(--n-border-focus);
  box-shadow: var(--n-box-shadow-focus);
- `)])]), (0, cssr_1.cM)('table-header', [(0, cssr_1.cB)('checkbox-box', `
- background-color: var(--n-merged-color-table-header);
+ `)])]), (0, cssr_1.cM)('inside-table', [(0, cssr_1.cB)('checkbox-box', `
+ background-color: var(--n-merged-color-table);
  `)]), (0, cssr_1.cM)('checked', [(0, cssr_1.cB)('checkbox-box', `
  background-color: var(--n-color-checked);
  `, [(0, cssr_1.cB)('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
@@ -144,8 +144,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
   display: 'none'
 })])]), // modal table header checkbox
 (0, cssr_1.insideModal)((0, cssr_1.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
 (0, cssr_1.insidePopover)((0, cssr_1.cB)('checkbox', `
- --n-merged-color-table-header: var(--n-color-table-header-popover);
+ --n-merged-color-table: var(--n-color-table-popover);
  `))]);

package/lib/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: {

package/lib/code/src/Code.js

@@ -21,7 +21,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: codeProps,
     setup(props, { slots }) {
         const { internalNoHighlight } = props;
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)();
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)();
         const codeRef = (0, vue_1.ref)(null);
         const hljsRef = internalNoHighlight ? { value: undefined } : (0, _mixins_1.useHljs)(props);
         const createCodeHtml = (language, code, trim) => {
@@ -74,39 +74,45 @@ exports.default = (0, vue_1.defineComponent)({
         if (!internalNoHighlight)
             (0, vue_1.watch)(hljsRef, setCode);
         const themeRef = (0, _mixins_1.useTheme)('Code', '-code', index_cssr_1.default, styles_1.codeLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut, fontFamilyMono }, self: { textColor, fontSize, fontWeightStrong, 
+            // extracted from hljs atom-one-light.scss
+            'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
+            const { internalFontSize } = props;
+            return {
+                '--n-font-size': internalFontSize ? `${internalFontSize}px` : fontSize,
+                '--n-font-family': fontFamilyMono,
+                '--n-font-weight-strong': fontWeightStrong,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-mono-3': $1,
+                '--n-hue-1': $2,
+                '--n-hue-2': $3,
+                '--n-hue-3': $4,
+                '--n-hue-4': $5,
+                '--n-hue-5': $6,
+                '--n-hue-5-2': $7,
+                '--n-hue-6': $8,
+                '--n-hue-6-2': $9
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('code', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             codeRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut, fontFamilyMono }, self: { textColor, fontSize, fontWeightStrong, 
-                // extracted from hljs atom-one-light.scss
-                'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
-                const { internalFontSize } = props;
-                return {
-                    '--n-font-size': internalFontSize
-                        ? `${internalFontSize}px`
-                        : fontSize,
-                    '--n-font-family': fontFamilyMono,
-                    '--n-font-weight-strong': fontWeightStrong,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-text-color': textColor,
-                    '--n-mono-3': $1,
-                    '--n-hue-1': $2,
-                    '--n-hue-2': $3,
-                    '--n-hue-3': $4,
-                    '--n-hue-4': $5,
-                    '--n-hue-5': $6,
-                    '--n-hue-5-2': $7,
-                    '--n-hue-6': $8,
-                    '--n-hue-6-2': $9
-                };
-            })
+            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, wordWrap } = this;
+        const { mergedClsPrefix, wordWrap, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("code", { class: [
                 `${mergedClsPrefix}-code`,
+                this.themeClass,
                 wordWrap && `${mergedClsPrefix}-code--word-wrap`
             ], style: this.cssVars, ref: "codeRef" }, this.$slots));
     }

package/lib/collapse/src/Collapse.d.ts

@@ -247,7 +247,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-title-text-color': string;
         '--n-title-font-weight': string;
         '--n-arrow-color': string;
-    }>;
+    }> | undefined;
+    themeClass: 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<ExtractPropTypes<{
     readonly defaultExpandedNames: {
         readonly type: PropType<string | number | (string | number)[] | null>;

package/lib/collapse/src/Collapse.js

@@ -39,7 +39,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Collapse',
     props: collapseProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const uncontrolledExpandedNamesRef = (0, vue_1.ref)(props.defaultExpandedNames);
         const controlledExpandedNamesRef = (0, vue_1.computed)(() => props.expandedNames);
         const mergedExpandedNamesRef = (0, vooks_1.useMergedState)(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
@@ -104,25 +104,33 @@ exports.default = (0, vue_1.defineComponent)({
             slots,
             toggleItem
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-divider-color': dividerColor,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-arrow-color': arrowColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('collapse', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedTheme: themeRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-text-color': textColor,
-                    '--n-divider-color': dividerColor,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-arrow-color': arrowColor
-                };
-            })
+            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() {
-        return ((0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-collapse`, style: this.cssVars }, this.$slots));
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return ((0, vue_1.h)("div", { class: [`${this.mergedClsPrefix}-collapse`, this.themeClass], style: this.cssVars }, this.$slots));
     }
 });

package/lib/color-picker/src/ColorPicker.d.ts

@@ -1801,7 +1801,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-border-radius': string;
         '--n-height': string;
         '--n-divider-color': string;
-    }>;
+    }> | undefined;
+    themeClass: 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<{
     readonly value: StringConstructor;
     readonly show: {