naive-ui 2.25.0 → 2.25.3

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.d.ts

@@ -238,7 +238,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -249,7 +249,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -258,7 +258,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;

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/CascaderOption.d.ts

@@ -214,7 +214,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -225,7 +225,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -234,7 +234,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;

package/lib/cascader/src/CascaderSelectMenu.d.ts

@@ -226,7 +226,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -237,7 +237,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -246,7 +246,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;

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

@@ -207,7 +207,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -218,7 +218,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -227,7 +227,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -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/cascader/styles/light.d.ts

@@ -107,7 +107,7 @@ declare const cascaderLight: import("../../_mixins").Theme<"Cascader", {
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -118,7 +118,7 @@ declare const cascaderLight: import("../../_mixins").Theme<"Cascader", {
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -127,7 +127,7 @@ declare const cascaderLight: import("../../_mixins").Theme<"Cascader", {
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;

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,17 +46,17 @@ 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)',
-  boxShadow: 'var(--n-box-shadow-focus)'
-})])]), (0, cssr_1.cM)('table-header', [(0, cssr_1.cB)('checkbox-box', {
-  backgroundColor: 'var(--n-merged-color-table-header)'
-})]), (0, cssr_1.cM)('checked', [(0, cssr_1.cB)('checkbox-box', {
-  backgroundColor: 'var(--n-color-checked)'
-}, [(0, cssr_1.cB)('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
+})])]), (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)('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
 (0, cssr_1.c)('.check-icon', `
  opacity: 1;
  transform: scale(1);
@@ -66,10 +66,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  `), (0, cssr_1.c)('.line-icon', `
  opacity: 1;
  transform: scale(1);
- `)])])]), (0, cssr_1.cM)('checked, indeterminate', [(0, cssr_1.c)('&:focus:not(:active)', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
-  border: 'var(--n-border-checked)',
-  boxShadow: 'var(--n-box-shadow-focus)'
-})])]), (0, cssr_1.cB)('checkbox-box', `
+ `)])])]), (0, cssr_1.cM)('checked, indeterminate', [(0, cssr_1.c)('&:focus:not(:active)', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', `
+ border: var(--n-border-checked);
+ box-shadow: var(--n-box-shadow-focus);
+ `)])]), (0, cssr_1.cB)('checkbox-box', `
  background-color: var(--n-color-checked);
  border-left: 0;
  border-top: 0;
@@ -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: {