naive-ui 2.25.0 → 2.25.3

package/es/tag/src/Tag.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, ref, provide, toRef } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useThemeClass, useTheme } from '../../_mixins';
 import { NBaseClose } from '../../_internal';
-import { warn, createKey, call, createInjectionKey } from '../../_utils';
+import { warn, createKey, call, createInjectionKey, color2Class, resolveWrappedSlot } from '../../_utils';
 import { tagLight } from '../styles';
 import commonProps from './common-props';
 import style from './styles/index.cssr';
@@ -29,7 +29,7 @@ export default defineComponent({
     props: tagProps,
     setup(props) {
         const contentRef = ref(null);
-        const { mergedBorderedRef, mergedClsPrefixRef, NConfigProvider } = useConfig(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Tag', '-tag', style, tagLight, props, mergedClsPrefixRef);
         provide(tagInjectionKey, {
             roundRef: toRef(props, 'round')
@@ -65,46 +65,65 @@ export default defineComponent({
                     value.textContent = textContent;
             }
         };
-        const rtlEnabledRef = useRtl('Tag', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
-        return Object.assign(Object.assign({}, tagPublicMethods), { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, contentRef, mergedBordered: mergedBorderedRef, handleClick,
-            handleCloseClick, cssVars: computed(() => {
+        const rtlEnabledRef = useRtl('Tag', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = 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, [createKey('closeSize', size)]: closeSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeColor', type)]: closeColor, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
+            return {
+                '--n-avatar-size-override': `calc(${height} - 8px)`,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-border': border,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-close-color-disabled': closeColor,
+                '--n-close-margin': closeMargin,
+                '--n-close-margin-rtl': closeMarginRtl,
+                '--n-close-size': closeSize,
+                '--n-color': color || typedColor,
+                '--n-color-checkable': colorCheckable,
+                '--n-color-checked': colorChecked,
+                '--n-color-checked-hover': colorCheckedHover,
+                '--n-color-checked-pressed': colorCheckedPressed,
+                '--n-color-hover-checkable': colorHoverCheckable,
+                '--n-color-pressed-checkable': colorPressedCheckable,
+                '--n-font-size': fontSize,
+                '--n-height': height,
+                '--n-opacity-disabled': opacityDisabled,
+                '--n-padding': padding,
+                '--n-text-color': textColor || typeTextColor,
+                '--n-text-color-checkable': textColorCheckable,
+                '--n-text-color-checked': textColorChecked,
+                '--n-text-color-hover-checkable': textColorHoverCheckable,
+                '--n-text-color-pressed-checkable': textColorPressedCheckable
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('tag', computed(() => {
+                let hash = '';
                 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, [createKey('closeSize', size)]: closeSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeColor', type)]: closeColor, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
-                return {
-                    '--n-avatar-size-override': `calc(${height} - 8px)`,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-border': border,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-close-color-disabled': closeColor,
-                    '--n-close-margin': closeMargin,
-                    '--n-close-margin-rtl': closeMarginRtl,
-                    '--n-close-size': closeSize,
-                    '--n-color': color || typedColor,
-                    '--n-color-checkable': colorCheckable,
-                    '--n-color-checked': colorChecked,
-                    '--n-color-checked-hover': colorCheckedHover,
-                    '--n-color-checked-pressed': colorCheckedPressed,
-                    '--n-color-hover-checkable': colorHoverCheckable,
-                    '--n-color-pressed-checkable': colorPressedCheckable,
-                    '--n-font-size': fontSize,
-                    '--n-height': height,
-                    '--n-opacity-disabled': opacityDisabled,
-                    '--n-padding': padding,
-                    '--n-text-color': textColor || typeTextColor,
-                    '--n-text-color-checkable': textColorCheckable,
-                    '--n-text-color-checked': textColorChecked,
-                    '--n-text-color-hover-checkable': textColorHoverCheckable,
-                    '--n-text-color-pressed-checkable': textColorPressedCheckable
-                };
-            }) });
+                hash += type[0];
+                hash += size[0];
+                if (color) {
+                    hash += `a${color2Class(color)}`;
+                }
+                if (textColor) {
+                    hash += `b${color2Class(textColor)}`;
+                }
+                return hash;
+            }), cssVarsRef, props)
+            : 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() {
-        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {}, $slots } = this;
+        var _a, _b;
+        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {}, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-tag`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-tag--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-tag--disabled`]: this.disabled,
@@ -113,10 +132,8 @@ export default defineComponent({
                     [`${mergedClsPrefix}-tag--round`]: this.round
                 }
             ], style: this.cssVars, onClick: this.handleClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
-            $slots.avatar && (h("div", { class: `${mergedClsPrefix}-tag__avatar` }, {
-                default: $slots.avatar
-            })),
-            h("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, this.$slots),
+            resolveWrappedSlot($slots.avatar, (children) => children && (h("div", { class: `${mergedClsPrefix}-tag__avatar` }, children))),
+            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 ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-tag__close`, disabled: this.disabled, onClick: this.handleCloseClick })) : null,
             !this.checkable && this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-tag__border`, style: { borderColor } })) : null));
     }

package/es/tag/src/common-props.d.ts

@@ -7,7 +7,7 @@ export interface TagColor {
 declare const _default: {
     readonly color: PropType<TagColor>;
     readonly type: {
-        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
         readonly default: "default";
     };
     readonly round: BooleanConstructor;

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

@@ -78,5 +78,5 @@ export default cB('tag', `
  background-color: var(--n-color-checkable);
  `, [cNotM('disabled', [c('&:hover', 'background-color: var(--n-color-hover-checkable);', [cNotM('checked', 'color: var(--n-text-color-hover-checkable);')]), c('&:active', 'background-color: var(--n-color-pressed-checkable);', [cNotM('checked', 'color: var(--n-text-color-pressed-checkable);')])]), cM('checked', `
  color: var(--n-text-color-checked);
- background-color: 'var(--n-color-checked);
+ background-color: var(--n-color-checked);
  `, [cNotM('disabled', [c('&:hover', 'background-color: var(--n-color-checked-hover);'), c('&:active', 'background-color: var(--n-color-checked-pressed);')])])])]);

package/es/tag/styles/index.d.ts

@@ -1,4 +1,4 @@
 export { default as tagDark } from './dark';
 export { default as tagLight } from './light';
-export { default as tagRtl } from './rtl';
+export { tagRtl } from './rtl';
 export type { TagThemeVars, TagTheme } from './light';

package/es/tag/styles/index.js

@@ -1,3 +1,3 @@
 export { default as tagDark } from './dark';
 export { default as tagLight } from './light';
-export { default as tagRtl } from './rtl';
+export { tagRtl } from './rtl';

package/es/tag/styles/rtl.d.ts

@@ -1,5 +1,2 @@
-declare const _default: {
-    name: string;
-    style: import("css-render").CNode;
-};
-export default _default;
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const tagRtl: RtlItem;

package/es/tag/styles/rtl.js

@@ -1,5 +1,5 @@
 import rtlStyle from '../src/styles/rtl.cssr';
-export default {
+export const tagRtl = {
     name: 'Tag',
     style: rtlStyle
 };

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

@@ -1,13 +1,14 @@
-import { h, computed, defineComponent, ref, Fragment, toRaw, watch } from 'vue';
+import { h, computed, defineComponent, ref, Fragment, toRaw, watch, inject } from 'vue';
 import { cloneDeep, merge } from 'lodash-es';
 import { lightTheme } from '../../themes/light';
 import { NConfigProvider } from '../../config-provider';
+import { configProviderInjectionKey } from '../../config-provider/src/context';
 import { NPopover } from '../../popover';
 import { NScrollbar } from '../../_internal';
 import { NCollapse, NCollapseItem } from '../../collapse';
 import { NInput } from '../../input';
 import { NSpace } from '../../space';
-import { useConfig, useLocale } from '../../_mixins';
+import { useLocale } from '../../_mixins';
 import { NElement } from '../../element';
 import { NDivider } from '../../divider';
 import { NButton } from '../../button';
@@ -31,7 +32,7 @@ export default defineComponent({
     inheritAttrs: false,
     setup() {
         const fileInputRef = ref(null);
-        const { NConfigProvider } = useConfig();
+        const NConfigProvider = inject(configProviderInjectionKey, null);
         const theme = computed(() => {
             var _a, _b, _c, _d;
             const mergedTheme = (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeRef.value) || lightTheme;

package/es/themes/dark.js

@@ -74,6 +74,7 @@ import { treeSelectDark } from '../tree-select/styles';
 import { typographyDark } from '../typography/styles';
 import { treeDark } from '../tree/styles';
 import { uploadDark } from '../upload/styles';
+import { watermarkDark } from '../watermark/styles';
 export const darkTheme = {
     name: 'dark',
     common: commonDark,
@@ -151,5 +152,6 @@ export const darkTheme = {
     Tree: treeDark,
     TreeSelect: treeSelectDark,
     Typography: typographyDark,
-    Upload: uploadDark
+    Upload: uploadDark,
+    Watermark: watermarkDark
 };

package/es/themes/light.js

@@ -76,6 +76,7 @@ import { typographyLight } from '../typography/styles';
 import { treeLight } from '../tree/styles';
 import { treeSelectLight } from '../tree-select/styles';
 import { uploadLight } from '../upload/styles';
+import { watermarkLight } from '../watermark/styles';
 export const lightTheme = {
     name: 'light',
     common: commonLight,
@@ -153,5 +154,6 @@ export const lightTheme = {
     Tree: treeLight,
     TreeSelect: treeSelectLight,
     Typography: typographyLight,
-    Upload: uploadLight
+    Upload: uploadLight,
+    Watermark: watermarkLight
 };

package/es/thing/src/Thing.js

@@ -1,5 +1,5 @@
 import { h, defineComponent, computed, Fragment } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { thingLight } from '../styles';
 import style from './styles/index.cssr';
 const thingProps = Object.assign(Object.assign({}, useTheme.props), { title: String, titleExtra: String, description: String, content: String, contentIndented: {
@@ -10,7 +10,7 @@ export default defineComponent({
     name: 'Thing',
     props: thingProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Thing', '-thing', style, thingLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { self: { titleTextColor, textColor, titleFontWeight, fontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
@@ -22,9 +22,16 @@ export default defineComponent({
                 '--n-title-text-color': titleTextColor
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('thing', undefined, cssVarsRef, props)
+            : undefined;
         return () => {
+            var _a;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
-            return (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 (h("div", { class: [`${mergedClsPrefix}-thing`, themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass], style: inlineThemeDisabled
+                    ? undefined
+                    : cssVarsRef.value },
                 slots.avatar && props.contentIndented ? (h("div", { class: `${mergedClsPrefix}-thing-avatar` }, slots.avatar())) : null,
                 h("div", { class: `${mergedClsPrefix}-thing-main` },
                     !props.contentIndented &&

package/es/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/es/timeline/src/TimelineItem.d.ts

@@ -6,7 +6,7 @@ declare const timelineItemProps: {
     content: StringConstructor;
     color: StringConstructor;
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
 };
@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     content: StringConstructor;
     color: StringConstructor;
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
 }, {
@@ -42,10 +42,10 @@ declare const _default: import("vue").DefineComponent<{
     content: StringConstructor;
     color: StringConstructor;
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
 }>;
 export default _default;

package/es/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/es/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/es/tree/src/Tree.js

@@ -178,16 +178,20 @@ export default defineComponent({
         const controlledSelectedKeysRef = toRef(props, 'selectedKeys');
         const mergedSelectedKeysRef = useMergedState(controlledSelectedKeysRef, uncontrolledSelectedKeysRef);
         const uncontrolledExpandedKeysRef = 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')) {
-            watchEffect(initUncontrolledExpandedKeys);
+            // if watching defaultExpandedKeys, we use access props.defaultExpandedKeys inside initiator
+            watchEffect(() => initUncontrolledExpandedKeys(undefined));
         }
         else {
-            initUncontrolledExpandedKeys();
+            // We by default watchEffect since if defaultExpandAll is true, we should remain tree expand if data changes
+            watchEffect(() => initUncontrolledExpandedKeys(props.defaultExpandedKeys));
         }
         const controlledExpandedKeysRef = toRef(props, 'expandedKeys');
         const mergedExpandedKeysRef = useMergedState(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);

package/es/tree/src/utils.js

@@ -31,7 +31,7 @@ export function keysWithFilter(nodes, pattern, keyField, childrenField, filter)
     };
 }
 const emptyImage = null;
-if (typeof window !== 'undefined') {
+if (typeof window !== 'undefined' && Image) {
     const emptyImage = new Image();
     emptyImage.src =
         'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';