naive-ui 2.25.0 → 2.25.3

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

package/es/code/src/Code.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, toRef, watch, onMounted, ref, computed } from 'vue';
-import { useTheme, useHljs, useConfig } from '../../_mixins';
+import { useTheme, useHljs, useConfig, useThemeClass } from '../../_mixins';
 import { codeLight } from '../styles';
 import style from './styles/index.cssr';
 const codeProps = Object.assign(Object.assign({}, useTheme.props), { language: String, code: {
@@ -16,7 +16,7 @@ export default defineComponent({
     props: codeProps,
     setup(props, { slots }) {
         const { internalNoHighlight } = props;
-        const { mergedClsPrefixRef } = useConfig();
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig();
         const codeRef = ref(null);
         const hljsRef = internalNoHighlight ? { value: undefined } : useHljs(props);
         const createCodeHtml = (language, code, trim) => {
@@ -69,39 +69,45 @@ export default defineComponent({
         if (!internalNoHighlight)
             watch(hljsRef, setCode);
         const themeRef = useTheme('Code', '-code', style, codeLight, props, mergedClsPrefixRef);
+        const cssVarsRef = 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
+            ? useThemeClass('code', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             codeRef,
-            cssVars: 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 (h("code", { class: [
                 `${mergedClsPrefix}-code`,
+                this.themeClass,
                 wordWrap && `${mergedClsPrefix}-code--word-wrap`
             ], style: this.cssVars, ref: "codeRef" }, this.$slots));
     }

package/es/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/es/collapse/src/Collapse.js

@@ -1,6 +1,6 @@
 import { computed, h, defineComponent, provide, ref } from 'vue';
 import { useMergedState } from 'vooks';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call, createInjectionKey, warn } from '../../_utils';
 import { collapseLight } from '../styles';
 import style from './styles/index.cssr';
@@ -33,7 +33,7 @@ export default defineComponent({
     name: 'Collapse',
     props: collapseProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const uncontrolledExpandedNamesRef = ref(props.defaultExpandedNames);
         const controlledExpandedNamesRef = computed(() => props.expandedNames);
         const mergedExpandedNamesRef = useMergedState(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
@@ -98,25 +98,33 @@ export default defineComponent({
             slots,
             toggleItem
         });
+        const cssVarsRef = 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
+            ? useThemeClass('collapse', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedTheme: themeRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: 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 (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 (h("div", { class: [`${this.mergedClsPrefix}-collapse`, this.themeClass], style: this.cssVars }, this.$slots));
     }
 });

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

package/es/color-picker/src/ColorPicker.js

@@ -4,7 +4,7 @@ import { useIsMounted, useMergedState } from 'vooks';
 import { VBinder, VFollower, VTarget } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { colorPickerLight } from '../styles';
-import { useFormItem, useConfig, useTheme, useLocale } from '../../_mixins';
+import { useFormItem, useConfig, useTheme, useLocale, useThemeClass } from '../../_mixins';
 import { call, createKey, useAdjustedTo } from '../../_utils';
 import { NButton } from '../../button';
 import HueSlider from './HueSlider';
@@ -49,7 +49,7 @@ export default defineComponent({
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = useLocale('global');
-        const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('ColorPicker', '-color-picker', style, colorPickerLight, props, mergedClsPrefixRef);
         provide(colorPickerInjectionKey, {
             themeRef,
@@ -352,6 +352,11 @@ export default defineComponent({
                 '--n-divider-color': dividerColor
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('color-picker', computed(() => {
+                return mergedSizeRef.value[0];
+            }), cssVarsRef, props)
+            : undefined;
         function renderPanel() {
             var _a;
             const { value: rgba } = rgbaRef;
@@ -359,9 +364,14 @@ export default defineComponent({
             const { internalActions, modes, actions } = props;
             const { value: mergedTheme } = themeRef;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
-            return (h("div", { class: `${mergedClsPrefix}-color-picker-panel`, onDragstart: (e) => {
+            return (h("div", { class: [
+                    `${mergedClsPrefix}-color-picker-panel`,
+                    themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value
+                ], onDragstart: (e) => {
                     e.preventDefault();
-                }, style: cssVarsRef.value },
+                }, style: inlineThemeDisabled
+                    ? undefined
+                    : cssVarsRef.value },
                 h("div", { class: `${mergedClsPrefix}-color-picker-control` },
                     h(Pallete, { clsPrefix: mergedClsPrefix, rgba: rgba, displayedHue: displayedHue, displayedSv: displayedSvRef.value, onUpdateSV: handleUpdateSv, onComplete: handleComplete }),
                     h("div", { class: `${mergedClsPrefix}-color-picker-preview` },
@@ -397,12 +407,15 @@ export default defineComponent({
                 doUpdateShow(false);
             },
             renderPanel,
-            cssVars: cssVarsRef
+            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 { $slots, mergedClsPrefix } = this;
-        return (h("div", { class: `${mergedClsPrefix}-color-picker`, ref: "selfRef", style: this.cssVars },
+        const { $slots, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { class: [this.themeClass, `${mergedClsPrefix}-color-picker`], ref: "selfRef", style: this.cssVars },
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {

package/es/components.d.ts

@@ -81,3 +81,4 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
+export * from './watermark';

package/es/components.js

@@ -81,3 +81,4 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
+export * from './watermark';

package/es/config-provider/src/ConfigProvider.d.ts

@@ -132,7 +132,7 @@ export declare const configProviderProps: {
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
-    readonly disableInlineTheme: {
+    readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
@@ -271,7 +271,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
-    readonly disableInlineTheme: {
+    readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
@@ -414,7 +414,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
-    readonly disableInlineTheme: {
+    readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
@@ -428,6 +428,6 @@ declare const _default: import("vue").DefineComponent<{
     tag: string;
     as: string | undefined;
     bordered: boolean | undefined;
-    disableInlineTheme: boolean;
+    inlineThemeDisabled: boolean;
 }>;
 export default _default;

package/es/config-provider/src/ConfigProvider.js

@@ -26,7 +26,7 @@ export const configProviderProps = {
     componentOptions: Object,
     icons: Object,
     breakpoints: Object,
-    disableInlineTheme: {
+    inlineThemeDisabled: {
         type: Boolean,
         default: undefined
     },
@@ -120,7 +120,7 @@ export default defineComponent({
         const mergedBreakpointsRef = computed(() => {
             return props.breakpoints || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value);
         });
-        const disableInlineTheme = props.disableInlineTheme || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme);
+        const inlineThemeDisabled = props.inlineThemeDisabled || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.inlineThemeDisabled);
         const mergedThemeHashRef = computed(() => {
             const { value: theme } = mergedThemeRef;
             const { value: mergedThemeOverrides } = mergedThemeOverridesRef;
@@ -170,7 +170,7 @@ export default defineComponent({
             }),
             mergedThemeRef,
             mergedThemeOverridesRef,
-            disableInlineTheme: disableInlineTheme || false
+            inlineThemeDisabled: inlineThemeDisabled || false
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,

package/es/config-provider/src/internal-interface.d.ts

@@ -74,6 +74,7 @@ import type { TreeTheme } from '../../tree/styles';
 import type { TreeSelectTheme } from '../../tree-select/styles';
 import type { TypographyTheme } from '../../typography/styles';
 import type { UploadTheme } from '../../upload/styles';
+import type { WatermarkTheme } from '../../watermark/styles';
 import type { InternalSelectMenuTheme } from '../../_internal/select-menu/styles';
 import type { InternalSelectionTheme } from '../../_internal/selection/styles';
 import type { NDateLocale, NLocale } from '../../locales';
@@ -163,6 +164,7 @@ export interface GlobalThemeWithoutCommon {
     TreeSelect?: TreeSelectTheme;
     Typography?: TypographyTheme;
     Upload?: UploadTheme;
+    Watermark?: WatermarkTheme;
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;
 }
@@ -229,5 +231,5 @@ export interface ConfigProviderInjection {
     mergedThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     mergedRtlRef: Ref<RtlEnabledState | undefined>;
     mergedThemeHashRef: Ref<string>;
-    disableInlineTheme: boolean;
+    inlineThemeDisabled: boolean;
 }

package/es/countdown/src/Countdown.d.ts

@@ -1,7 +1,6 @@
 import { PropType, VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 declare const countdownProps: {
-    label: StringConstructor;
     duration: {
         type: NumberConstructor;
         default: number;
@@ -24,7 +23,6 @@ declare const countdownProps: {
 };
 export declare type CountdownProps = ExtractPublicPropTypes<typeof countdownProps>;
 declare const _default: import("vue").DefineComponent<{
-    label: StringConstructor;
     duration: {
         type: NumberConstructor;
         default: number;
@@ -45,7 +43,6 @@ declare const _default: import("vue").DefineComponent<{
     }) => VNodeChild>;
     onFinish: PropType<() => void>;
 }, () => VNodeChild, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: StringConstructor;
     duration: {
         type: NumberConstructor;
         default: number;

package/es/countdown/src/Countdown.js

@@ -1,6 +1,5 @@
 import { defineComponent, onMounted, onBeforeUnmount, watchEffect, reactive } from 'vue';
 const countdownProps = {
-    label: String,
     duration: {
         type: Number,
         default: 0