naive-ui 2.25.0 → 2.25.3

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,46 +71,65 @@ 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);
-        return Object.assign(Object.assign({}, tagPublicMethods), { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, contentRef, mergedBordered: mergedBorderedRef, handleClick,
-            handleCloseClick, cssVars: (0, vue_1.computed)(() => {
+        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;
+            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
+            ? (0, _mixins_1.useThemeClass)('tag', (0, vue_1.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, [(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;
-                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${(0, _utils_1.color2Class)(color)}`;
+                }
+                if (textColor) {
+                    hash += `b${(0, _utils_1.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 ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-tag`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-tag--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-tag--disabled`]: this.disabled,
@@ -119,10 +138,8 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${mergedClsPrefix}-tag--round`]: this.round
                 }
             ], style: this.cssVars, onClick: this.handleClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
-            $slots.avatar && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tag__avatar` }, {
-                default: $slots.avatar
-            })),
-            (0, vue_1.h)("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, this.$slots),
+            (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/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/lib/tag/src/styles/index.cssr.js

@@ -85,5 +85,5 @@ exports.default = (0, cssr_1.cB)('tag', `
  background-color: var(--n-color-checkable);
  `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', 'background-color: var(--n-color-hover-checkable);', [(0, cssr_1.cNotM)('checked', 'color: var(--n-text-color-hover-checkable);')]), (0, cssr_1.c)('&:active', 'background-color: var(--n-color-pressed-checkable);', [(0, cssr_1.cNotM)('checked', 'color: var(--n-text-color-pressed-checkable);')])]), (0, cssr_1.cM)('checked', `
  color: var(--n-text-color-checked);
- background-color: 'var(--n-color-checked);
+ background-color: var(--n-color-checked);
  `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', 'background-color: var(--n-color-checked-hover);'), (0, cssr_1.c)('&:active', 'background-color: var(--n-color-checked-pressed);')])])])]);

package/lib/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/lib/tag/styles/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "tagDark", { enumerable: true, get: function () {
 var light_1 = require("./light");
 Object.defineProperty(exports, "tagLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
 var rtl_1 = require("./rtl");
-Object.defineProperty(exports, "tagRtl", { enumerable: true, get: function () { return __importDefault(rtl_1).default; } });
+Object.defineProperty(exports, "tagRtl", { enumerable: true, get: function () { return rtl_1.tagRtl; } });

package/lib/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/lib/tag/styles/rtl.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagRtl = void 0;
 const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
-exports.default = {
+exports.tagRtl = {
     name: 'Tag',
     style: rtl_cssr_1.default
 };

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/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/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);

package/lib/tree/src/utils.js

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