naive-ui 2.25.2 → 2.25.5

package/lib/tabs/src/Tabs.js

@@ -43,7 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Tabs', '-tabs', index_cssr_1.default, styles_1.tabsLight, props, mergedClsPrefixRef);
         const tabsElRef = (0, vue_1.ref)(null);
         const barElRef = (0, vue_1.ref)(null);
@@ -246,50 +246,57 @@ exports.default = (0, vue_1.defineComponent)({
                 updateCurrentBarStyle();
             }
         };
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: size } = compitableSizeRef;
+            const { type } = props;
+            const typeSuffix = {
+                card: 'Card',
+                bar: 'Bar',
+                line: 'Line',
+                segment: 'Segment'
+            }[type];
+            const sizeType = `${size}${typeSuffix}`;
+            const { self: { barColor, closeColor, closeColorHover, closeColorPressed, tabColor, tabBorderColor, paneTextColor, tabFontWeight, tabBorderRadius, tabFontWeightActive, colorSegment, fontWeightStrong, tabColorSegment, [(0, _utils_1.createKey)('panePadding', size)]: panePadding, [(0, _utils_1.createKey)('tabPadding', sizeType)]: tabPadding, [(0, _utils_1.createKey)('tabGap', sizeType)]: tabGap, [(0, _utils_1.createKey)('tabTextColor', type)]: tabTextColor, [(0, _utils_1.createKey)('tabTextColorActive', type)]: tabTextColorActive, [(0, _utils_1.createKey)('tabTextColorHover', type)]: tabTextColorHover, [(0, _utils_1.createKey)('tabTextColorDisabled', type)]: tabTextColorDisabled, [(0, _utils_1.createKey)('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-color-segment': colorSegment,
+                '--n-bar-color': barColor,
+                '--n-tab-font-size': tabFontSize,
+                '--n-tab-text-color': tabTextColor,
+                '--n-tab-text-color-active': tabTextColorActive,
+                '--n-tab-text-color-disabled': tabTextColorDisabled,
+                '--n-tab-text-color-hover': tabTextColorHover,
+                '--n-pane-text-color': paneTextColor,
+                '--n-tab-border-color': tabBorderColor,
+                '--n-tab-border-radius': tabBorderRadius,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-tab-color': tabColor,
+                '--n-tab-font-weight': tabFontWeight,
+                '--n-tab-font-weight-active': tabFontWeightActive,
+                '--n-tab-padding': tabPadding,
+                '--n-tab-gap': tabGap,
+                '--n-pane-padding': panePadding,
+                '--n-font-weight-strong': fontWeightStrong,
+                '--n-tab-color-segment': tabColorSegment
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('tabs', (0, vue_1.computed)(() => {
+                return `${compitableSizeRef.value[0]}${props.type[0]}`;
+            }), cssVarsRef, props)
+            : undefined;
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedValue: mergedValueRef, renderedNames: new Set(), tabsElRef,
             barElRef,
             addTabInstRef,
             xScrollInstRef,
             scrollWrapperElRef, addTabFixed: addTabFixedRef, tabWrapperStyle: tabWrapperStyleRef, handleNavResize, mergedSize: compitableSizeRef, handleScroll,
-            handleTabsResize, cssVars: (0, vue_1.computed)(() => {
-                const { value: size } = compitableSizeRef;
-                const { type } = props;
-                const typeSuffix = {
-                    card: 'Card',
-                    bar: 'Bar',
-                    line: 'Line',
-                    segment: 'Segment'
-                }[type];
-                const sizeType = `${size}${typeSuffix}`;
-                const { self: { barColor, closeColor, closeColorHover, closeColorPressed, tabColor, tabBorderColor, paneTextColor, tabFontWeight, tabBorderRadius, tabFontWeightActive, colorSegment, fontWeightStrong, tabColorSegment, [(0, _utils_1.createKey)('panePadding', size)]: panePadding, [(0, _utils_1.createKey)('tabPadding', sizeType)]: tabPadding, [(0, _utils_1.createKey)('tabGap', sizeType)]: tabGap, [(0, _utils_1.createKey)('tabTextColor', type)]: tabTextColor, [(0, _utils_1.createKey)('tabTextColorActive', type)]: tabTextColorActive, [(0, _utils_1.createKey)('tabTextColorHover', type)]: tabTextColorHover, [(0, _utils_1.createKey)('tabTextColorDisabled', type)]: tabTextColorDisabled, [(0, _utils_1.createKey)('tabFontSize', size)]: tabFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--color-segment': colorSegment,
-                    '--bar-color': barColor,
-                    '--tab-font-size': tabFontSize,
-                    '--tab-text-color': tabTextColor,
-                    '--tab-text-color-active': tabTextColorActive,
-                    '--tab-text-color-disabled': tabTextColorDisabled,
-                    '--tab-text-color-hover': tabTextColorHover,
-                    '--pane-text-color': paneTextColor,
-                    '--tab-border-color': tabBorderColor,
-                    '--tab-border-radius': tabBorderRadius,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--tab-color': tabColor,
-                    '--tab-font-weight': tabFontWeight,
-                    '--tab-font-weight-active': tabFontWeightActive,
-                    '--tab-padding': tabPadding,
-                    '--tab-gap': tabGap,
-                    '--pane-padding': panePadding,
-                    '--font-weight-strong': fontWeightStrong,
-                    '--tab-color-segment': tabColorSegment
-                };
-            }) }, exposedMethods);
+            handleTabsResize, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
+        const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, onRender, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const tabPaneChildren = defaultSlot
             ? (0, _utils_1.flatten)(defaultSlot()).filter((v) => {
                 return v.type.__TAB_PANE__ === true;
@@ -301,13 +308,12 @@ exports.default = (0, vue_1.defineComponent)({
             })
             : [];
         const showPane = !tabChildren.length;
-        const prefix = prefixSlot ? prefixSlot() : null;
-        const suffix = suffixSlot ? suffixSlot() : null;
         const isCard = type === 'card';
         const isSegment = type === 'segment';
         const mergedJustifyContent = !isCard && !isSegment && this.justifyContent;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-tabs`,
+                this.themeClass,
                 `${mergedClsPrefix}-tabs--${type}-type`,
                 `${mergedClsPrefix}-tabs--${mergedSize}-size`,
                 mergedJustifyContent && `${mergedClsPrefix}-tabs--flex`
@@ -320,7 +326,7 @@ exports.default = (0, vue_1.defineComponent)({
                     `${mergedClsPrefix}-tabs-nav--${type}-type`,
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
-                prefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, prefix)) : null,
+                (0, _utils_1.resolveWrappedSlot)(prefixSlot, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
                 isSegment ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail` }, showPane
                     ? tabPaneChildren.map((tabPaneVNode, index) => {
                         return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalCreatedByPane: true, internalLeftPadded: index !== 0 }), tabPaneVNode.children
@@ -381,7 +387,7 @@ exports.default = (0, vue_1.defineComponent)({
                 addTabFixed && addable && isCard
                     ? createAddTag(addable, true)
                     : null,
-                suffix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, suffix)) : null),
+                (0, _utils_1.resolveWrappedSlot)(suffixSlot, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, children)))),
             showPane &&
                 filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames)));
     }

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

@@ -5,42 +5,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --bar-color
-// --tab-font-size
-// --tab-text-color
-// --tab-text-color-active
-// --tab-text-color-disabled
-// --tab-text-color-hover
-// --pane-text-color
-// --tab-border-color
-// --tab-border-radius
-// --tab-color
-// --tab-font-weight
-// --tab-font-weight-active
-// --tab-gap
-// --tab-padding
-// --pane-padding
-// --color-segment
-// --font-weight-strong
-// --tab-color-segment
+// --n-bezier
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-bar-color
+// --n-tab-font-size
+// --n-tab-text-color
+// --n-tab-text-color-active
+// --n-tab-text-color-disabled
+// --n-tab-text-color-hover
+// --n-pane-text-color
+// --n-tab-border-color
+// --n-tab-border-radius
+// --n-tab-color
+// --n-tab-font-weight
+// --n-tab-font-weight-active
+// --n-tab-gap
+// --n-tab-padding
+// --n-pane-padding
+// --n-color-segment
+// --n-font-weight-strong
+// --n-tab-color-segment
 
 
 exports.default = (0, cssr_1.cB)('tabs', `
  box-sizing: border-box;
  width: 100%;
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
 `, [(0, cssr_1.cB)('tabs-rail', `
  padding: 3px;
- border-radius: var(--tab-border-radius);
+ border-radius: var(--n-tab-border-radius);
  width: 100%;
- background-color: var(--color-segment);
- transition: background-color .3s var(--bezier);
+ background-color: var(--n-color-segment);
+ transition: background-color .3s var(--n-bezier);
  display: flex;
  align-items: center;
  `, [(0, cssr_1.cB)('tabs-tab-wrapper', `
@@ -51,18 +51,18 @@ exports.default = (0, cssr_1.cB)('tabs', `
  justify-content: center;
  `, [(0, cssr_1.cB)('tabs-tab', `
  overflow: hidden;
- border-radius: var(--tab-border-radius);
+ border-radius: var(--n-tab-border-radius);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  `, [(0, cssr_1.cM)('active', `
- font-weight: var(--font-weight-strong);
- color: var(--tab-text-color-active);
- background-color: var(--tab-color-segment);
+ font-weight: var(--n-font-weight-strong);
+ color: var(--n-tab-text-color-active);
+ background-color: var(--n-tab-color-segment);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
  `), (0, cssr_1.c)('&:hover', `
- color: var(--tab-text-color-hover);
+ color: var(--n-tab-text-color-hover);
  `)])])]), (0, cssr_1.cM)('flex', [(0, cssr_1.cB)('tabs-nav', {
   width: '100%'
 }, [(0, cssr_1.cB)('tabs-wrapper', {
@@ -73,7 +73,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  box-sizing: border-box;
  line-height: 1.5;
  display: flex;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  `, [(0, cssr_1.cE)('prefix, suffix', `
  display: flex;
  align-items: center;
@@ -86,7 +86,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `)]), (0, cssr_1.cM)('shadow-after', [(0, cssr_1.c)('&::after', `
  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
  `)]), (0, cssr_1.c)('&::before, &::after', `
- transition: box-shadow .3s var(--bezier);
+ transition: box-shadow .3s var(--n-bezier);
  pointer-events: none;
  content: "";
  position: absolute;
@@ -101,6 +101,8 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `)]), (0, cssr_1.cB)('tabs-nav-scroll-content', `
  display: flex;
  position: relative;
+ min-width: 100%;
+ width: fit-content;
  `), (0, cssr_1.cB)('tabs-wrapper', `
  display: inline-flex;
  flex-wrap: nowrap;
@@ -116,21 +118,21 @@ exports.default = (0, cssr_1.cB)('tabs', `
  flex-wrap: nowrap;
  display: inline-flex;
  align-items: center;
- color: var(--tab-text-color);
- font-size: var(--tab-font-size);
+ color: var(--n-tab-text-color);
+ font-size: var(--n-tab-font-size);
  background-clip: padding-box;
- padding: var(--tab-padding);
+ padding: var(--n-tab-padding);
  transition:
- box-shadow .3s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed'
 }), (0, cssr_1.cE)('close', `
  margin-left: 8px;
  font-size: 14px;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('label', `
  display: flex;
  align-items: center;
@@ -139,77 +141,77 @@ exports.default = (0, cssr_1.cB)('tabs', `
  bottom: 0;
  height: 2px;
  border-radius: 1px;
- background-color: var(--bar-color);
+ background-color: var(--n-bar-color);
  transition:
- left .2s var(--bezier),
- max-width .2s var(--bezier),
- background-color .3s var(--bezier);
+ left .2s var(--n-bezier),
+ max-width .2s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('transition-disabled', `
  transition: none;
  `), (0, cssr_1.cM)('disabled', `
- background-color: var(--tab-text-color-disabled)
+ background-color: var(--n-tab-text-color-disabled)
  `)]), (0, cssr_1.cB)('tab-pane', `
- color: var(--pane-text-color);
+ color: var(--n-pane-text-color);
  width: 100%;
- padding: var(--pane-padding);
+ padding: var(--n-pane-padding);
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('tabs-tab-pad', `
- width: var(--tab-gap);
+ width: var(--n-tab-gap);
  flex-grow: 0;
  flex-shrink: 0;
  `), (0, cssr_1.cM)('line-type, bar-type', [(0, cssr_1.cB)('tabs-tab', `
- font-weight: var(--tab-font-weight-active);
+ font-weight: var(--n-tab-font-weight-active);
  box-sizing: border-box;
  vertical-align: bottom;
  `, [(0, cssr_1.c)('&:hover', {
-  color: 'var(--tab-text-color-hover)'
+  color: 'var(--n-tab-text-color-hover)'
 }), (0, cssr_1.cM)('active', {
-  color: 'var(--tab-text-color-active)'
+  color: 'var(--n-tab-text-color-active)'
 }), (0, cssr_1.cM)('disabled', {
-  color: 'var(--tab-text-color-disabled)'
+  color: 'var(--n-tab-text-color-disabled)'
 })])]), (0, cssr_1.cB)('tabs-nav', [(0, cssr_1.cM)('line-type', [(0, cssr_1.cE)('prefix, suffix', `
- transition: border-color .3s var(--bezier);
- border-bottom: 1px solid var(--tab-border-color);
+ transition: border-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-nav-scroll-content', `
- transition: border-color .3s var(--bezier);
- border-bottom: 1px solid var(--tab-border-color);
+ transition: border-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-bar', `
  border-radius: 0;
  bottom: -1px;
  `)]), (0, cssr_1.cM)('card-type', [(0, cssr_1.cE)('prefix, suffix', `
- transition: border-color .3s var(--bezier);
- border-bottom: 1px solid var(--tab-border-color);
+ transition: border-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-pad', `
  flex-grow: 1;
- transition: border-color .3s var(--bezier);
- border-bottom: 1px solid var(--tab-border-color);
+ transition: border-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-tab-pad', `
- transition: border-color .3s var(--bezier);
- border-bottom: 1px solid var(--tab-border-color);
+ transition: border-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-tab', `
- font-weight: var(--tab-font-weight);
- border: 1px solid var(--tab-border-color);
- border-top-left-radius: var(--tab-border-radius);
- border-top-right-radius: var(--tab-border-radius);
- background-color: var(--tab-color);
+ font-weight: var(--n-tab-font-weight);
+ border: 1px solid var(--n-tab-border-color);
+ border-top-left-radius: var(--n-tab-border-radius);
+ border-top-right-radius: var(--n-tab-border-radius);
+ background-color: var(--n-tab-color);
  box-sizing: border-box;
  position: relative;
  vertical-align: bottom;
  display: flex;
  justify-content: space-between;
- font-size: var(--tab-font-size);
- color: var(--tab-text-color);
+ font-size: var(--n-tab-font-size);
+ color: var(--n-tab-text-color);
  `, [(0, cssr_1.cM)('addable', `
  padding-left: 8px;
  padding-right: 8px;
  font-size: 16px;
  `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', `
- color: var(--tab-text-color-hover);
+ color: var(--n-tab-text-color-hover);
  `)])]), (0, cssr_1.cM)('closable', 'padding-right: 6px;'), (0, cssr_1.cM)('active', `
  border-bottom: 1px solid #0000;
  background-color: #0000;
- font-weight: var(--tab-font-weight-active);
- color: var(--tab-text-color-active);
- `), (0, cssr_1.cM)('disabled', 'color: var(--tab-text-color-disabled);')]), (0, cssr_1.cB)('tabs-scroll-padding', 'border-bottom: 1px solid var(--tab-border-color);')])])]);
+ font-weight: var(--n-tab-font-weight-active);
+ color: var(--n-tab-text-color-active);
+ `), (0, cssr_1.cM)('disabled', 'color: var(--n-tab-text-color-disabled);')]), (0, cssr_1.cB)('tabs-scroll-padding', 'border-bottom: 1px solid var(--n-tab-border-color);')])])]);

package/lib/tag/src/Tag.d.ts

@@ -451,8 +451,6 @@ declare const _default: import("vue").DefineComponent<{
         closeMarginRtl: string;
     }, any>>>;
 }, {
-    themeClass?: Ref<string> | undefined;
-    onRender?: (() => void) | undefined;
     rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     contentRef: Ref<HTMLElement | null>;
@@ -488,6 +486,8 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color-hover-checkable': string;
         '--n-text-color-pressed-checkable': string;
     }> | undefined;
+    themeClass: Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     setTextContent: (textContent: string) => 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<{
     bordered: {

package/lib/tag/src/Tag.js

@@ -35,7 +35,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: tagProps,
     setup(props) {
         const contentRef = (0, vue_1.ref)(null);
-        const { mergedBorderedRef, mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Tag', '-tag', index_cssr_1.default, styles_1.tagLight, props, mergedClsPrefixRef);
         (0, vue_1.provide)(exports.tagInjectionKey, {
             roundRef: (0, vue_1.toRef)(props, 'round')
@@ -71,8 +71,7 @@ exports.default = (0, vue_1.defineComponent)({
                     value.textContent = textContent;
             }
         };
-        const rtlEnabledRef = (0, use_rtl_1.default)('Tag', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
-        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const rtlEnabledRef = (0, use_rtl_1.default)('Tag', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { type, size, color: { color, textColor } = {} } = props;
             const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('color', type)]: typedColor, [(0, _utils_1.createKey)('textColor', type)]: typeTextColor, [(0, _utils_1.createKey)('border', type)]: border, [(0, _utils_1.createKey)('closeColor', type)]: closeColor, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
@@ -106,7 +105,7 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-text-color-pressed-checkable': textColorPressedCheckable
             };
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('tag', (0, vue_1.computed)(() => {
                 let hash = '';
                 const { type, size, color: { color, textColor } = {} } = props;
@@ -120,9 +119,9 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 return hash;
             }), cssVarsRef, props)
-            : _mixins_1.emptyThemeClassHandle;
-        return Object.assign(Object.assign(Object.assign({}, tagPublicMethods), { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, contentRef, mergedBordered: mergedBorderedRef, handleClick,
-            handleCloseClick, cssVars: disableInlineTheme ? undefined : cssVarsRef }), themeClassHandle);
+            : undefined;
+        return Object.assign(Object.assign({}, tagPublicMethods), { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, contentRef, mergedBordered: mergedBorderedRef, handleClick,
+            handleCloseClick, 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, _b;
@@ -139,9 +138,7 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${mergedClsPrefix}-tag--round`]: this.round
                 }
             ], style: this.cssVars, onClick: this.handleClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
-            (0, _utils_1.resolveWrappedSlot)($slots.avatar, (children) => [
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-tag__avatar` }, children)
-            ]),
+            (0, _utils_1.resolveWrappedSlot)($slots.avatar, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tag__avatar` }, children))),
             (0, vue_1.h)("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)),
             !this.checkable && this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-tag__close`, disabled: this.disabled, onClick: this.handleCloseClick })) : null,
             !this.checkable && this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tag__border`, style: { borderColor } })) : null));

package/lib/theme-editor/src/ThemeEditor.js

@@ -4,6 +4,7 @@ const vue_1 = require("vue");
 const lodash_1 = require("lodash");
 const light_1 = require("../../themes/light");
 const config_provider_1 = require("../../config-provider");
+const context_1 = require("../../config-provider/src/context");
 const popover_1 = require("../../popover");
 const _internal_1 = require("../../_internal");
 const collapse_1 = require("../../collapse");
@@ -33,7 +34,7 @@ exports.default = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     setup() {
         const fileInputRef = (0, vue_1.ref)(null);
-        const { NConfigProvider } = (0, _mixins_1.useConfig)();
+        const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const theme = (0, vue_1.computed)(() => {
             var _a, _b, _c, _d;
             const mergedTheme = (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeRef.value) || light_1.lightTheme;

package/lib/themes/dark.js

@@ -77,6 +77,7 @@ const styles_72 = require("../tree-select/styles");
 const styles_73 = require("../typography/styles");
 const styles_74 = require("../tree/styles");
 const styles_75 = require("../upload/styles");
+const styles_76 = require("../watermark/styles");
 exports.darkTheme = {
     name: 'dark',
     common: common_1.commonDark,
@@ -154,5 +155,6 @@ exports.darkTheme = {
     Tree: styles_74.treeDark,
     TreeSelect: styles_72.treeSelectDark,
     Typography: styles_73.typographyDark,
-    Upload: styles_75.uploadDark
+    Upload: styles_75.uploadDark,
+    Watermark: styles_76.watermarkDark
 };

package/lib/themes/light.js

@@ -79,6 +79,7 @@ const styles_72 = require("../typography/styles");
 const styles_73 = require("../tree/styles");
 const styles_74 = require("../tree-select/styles");
 const styles_75 = require("../upload/styles");
+const styles_76 = require("../watermark/styles");
 exports.lightTheme = {
     name: 'light',
     common: common_1.commonLight,
@@ -156,5 +157,6 @@ exports.lightTheme = {
     Tree: styles_73.treeLight,
     TreeSelect: styles_74.treeSelectLight,
     Typography: styles_72.typographyLight,
-    Upload: styles_75.uploadLight
+    Upload: styles_75.uploadLight,
+    Watermark: styles_76.watermarkLight
 };

package/lib/thing/src/Thing.js

@@ -15,7 +15,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Thing',
     props: thingProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Thing', '-thing', index_cssr_1.default, styles_1.thingLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { self: { titleTextColor, textColor, titleFontWeight, fontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
@@ -27,9 +27,16 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-title-text-color': titleTextColor
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('thing', undefined, cssVarsRef, props)
+            : undefined;
         return () => {
+            var _a;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
-            return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing`, style: cssVarsRef.value },
+            (_a = themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender) === null || _a === void 0 ? void 0 : _a.call(themeClassHandle);
+            return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-thing`, themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass], style: inlineThemeDisabled
+                    ? undefined
+                    : cssVarsRef.value },
                 slots.avatar && props.contentIndented ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-avatar` }, slots.avatar())) : null,
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-main` },
                     !props.contentIndented &&

package/lib/time-picker/src/TimePicker.d.ts

@@ -1885,6 +1885,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;
@@ -1895,6 +1896,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;
@@ -1905,6 +1907,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;
@@ -1915,6 +1918,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/transfer/src/TransferList.d.ts

@@ -504,6 +504,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/tree/src/Tree.d.ts

@@ -957,6 +957,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/tree/src/Tree.js

@@ -185,16 +185,20 @@ exports.default = (0, vue_1.defineComponent)({
         const controlledSelectedKeysRef = (0, vue_1.toRef)(props, 'selectedKeys');
         const mergedSelectedKeysRef = (0, vooks_1.useMergedState)(controlledSelectedKeysRef, uncontrolledSelectedKeysRef);
         const uncontrolledExpandedKeysRef = (0, vue_1.ref)([]);
-        const initUncontrolledExpandedKeys = () => {
+        const initUncontrolledExpandedKeys = (keys) => {
             uncontrolledExpandedKeysRef.value = props.defaultExpandAll
                 ? dataTreeMateRef.value.getNonLeafKeys()
-                : props.defaultExpandedKeys;
+                : keys === undefined
+                    ? props.defaultExpandedKeys
+                    : keys;
         };
         if (watchProps === null || watchProps === void 0 ? void 0 : watchProps.includes('defaultExpandedKeys')) {
-            (0, vue_1.watchEffect)(initUncontrolledExpandedKeys);
+            // if watching defaultExpandedKeys, we use access props.defaultExpandedKeys inside initiator
+            (0, vue_1.watchEffect)(() => initUncontrolledExpandedKeys(undefined));
         }
         else {
-            initUncontrolledExpandedKeys();
+            // We by default watchEffect since if defaultExpandAll is true, we should remain tree expand if data changes
+            (0, vue_1.watchEffect)(() => initUncontrolledExpandedKeys(props.defaultExpandedKeys));
         }
         const controlledExpandedKeysRef = (0, vue_1.toRef)(props, 'expandedKeys');
         const mergedExpandedKeysRef = (0, vooks_1.useMergedState)(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);