naive-ui 2.24.6 → 2.25.2

package/lib/color-picker/src/ColorPicker.d.ts

@@ -1,7 +1,6 @@
-import { PropType, VNode, ComputedRef, Ref, Slots } from 'vue';
+import { PropType, VNode, Ref } from 'vue';
 import { RGBA, HSLA } from 'seemly';
-import type { ColorPickerTheme } from '../styles';
-import { MergedTheme } from '../../_mixins';
+import { FollowerPlacement } from 'vueuc';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { ColorPickerMode } from './utils';
 import { OnUpdateValue, RenderLabel } from './interface';
@@ -20,6 +19,10 @@ export declare const colorPickerPanelProps: {
         readonly type: PropType<ColorPickerMode[]>;
         readonly default: () => string[];
     };
+    readonly placement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom-start";
+    };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
@@ -888,11 +891,6 @@ export declare const colorPickerPanelProps: {
     }>>>;
 };
 export declare type ColorPickerProps = ExtractPublicPropTypes<typeof colorPickerPanelProps>;
-export declare const colorPickerInjectionKey: import("vue").InjectionKey<{
-    themeRef: ComputedRef<MergedTheme<ColorPickerTheme>>;
-    colorPickerSlots: Slots;
-    renderLabelRef: Ref<RenderLabel | undefined>;
-}>;
 declare const _default: import("vue").DefineComponent<{
     readonly value: StringConstructor;
     readonly show: {
@@ -908,6 +906,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<ColorPickerMode[]>;
         readonly default: () => string[];
     };
+    readonly placement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom-start";
+    };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
@@ -1775,20 +1777,20 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
-    mergedClsPrefix: ComputedRef<string>;
-    namespace: ComputedRef<string | undefined>;
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    namespace: import("vue").ComputedRef<string | undefined>;
     selfRef: Ref<HTMLElement | null>;
-    hsla: ComputedRef<HSLA | null>;
-    rgba: ComputedRef<RGBA | null>;
-    mergedShow: ComputedRef<boolean>;
-    mergedDisabled: ComputedRef<boolean>;
+    hsla: import("vue").ComputedRef<HSLA | null>;
+    rgba: import("vue").ComputedRef<RGBA | null>;
+    mergedShow: import("vue").ComputedRef<boolean>;
+    mergedDisabled: import("vue").ComputedRef<boolean>;
     isMounted: Readonly<Ref<boolean>>;
-    adjustedTo: ComputedRef<string | HTMLElement>;
-    mergedValue: ComputedRef<string | null>;
+    adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
+    mergedValue: import("vue").ComputedRef<string | null>;
     handleTriggerClick(): void;
     handleClickOutside(e: MouseEvent): void;
     renderPanel: () => VNode;
-    cssVars: ComputedRef<{
+    cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-text-color': string;
         '--n-color': string;
@@ -1815,6 +1817,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<ColorPickerMode[]>;
         readonly default: () => string[];
     };
+    readonly placement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom-start";
+    };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
@@ -2685,6 +2691,7 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean | undefined;
     disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
+    placement: FollowerPlacement;
     defaultShow: boolean;
     showAlpha: boolean;
     modes: ColorPickerMode[];

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorPickerInjectionKey = exports.colorPickerPanelProps = void 0;
+exports.colorPickerPanelProps = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
@@ -21,6 +21,7 @@ const ColorPickerTrigger_1 = __importDefault(require("./ColorPickerTrigger"));
 const utils_1 = require("./utils");
 const ColorPickerSwatches_1 = __importDefault(require("./ColorPickerSwatches"));
 const ColorPreview_1 = __importDefault(require("./ColorPreview"));
+const context_1 = require("./context");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: String, show: {
         type: Boolean,
@@ -32,6 +33,9 @@ exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useThe
         type: Array,
         // no hsva by default since browser doesn't support it
         default: () => ['rgb', 'hex', 'hsl']
+    }, placement: {
+        type: String,
+        default: 'bottom-start'
     }, to: _utils_1.useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
@@ -42,7 +46,6 @@ exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useThe
         type: Array,
         default: null
     }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
-exports.colorPickerInjectionKey = (0, _utils_1.createInjectionKey)('n-color-picker');
 exports.default = (0, vue_1.defineComponent)({
     name: 'ColorPicker',
     props: exports.colorPickerPanelProps,
@@ -53,8 +56,8 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = (0, _mixins_1.useLocale)('global');
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('ColorPicker', 'ColorPicker', index_cssr_1.default, styles_1.colorPickerLight, props, mergedClsPrefixRef);
-        (0, vue_1.provide)(exports.colorPickerInjectionKey, {
+        const themeRef = (0, _mixins_1.useTheme)('ColorPicker', '-color-picker', index_cssr_1.default, styles_1.colorPickerLight, props, mergedClsPrefixRef);
+        (0, vue_1.provide)(context_1.colorPickerInjectionKey, {
             themeRef,
             renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
             colorPickerSlots: slots
@@ -413,7 +416,7 @@ exports.default = (0, vue_1.defineComponent)({
                             label: $slots.label
                         }))
                     }),
-                    (0, vue_1.h)(vueuc_1.VFollower, { placement: "bottom-start", show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, to: this.adjustedTo }, {
+                    (0, vue_1.h)(vueuc_1.VFollower, { placement: this.placement, show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, to: this.adjustedTo }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.mergedShow
                                 ? (0, vue_1.withDirectives)(this.renderPanel(), [

package/lib/color-picker/src/ColorPickerTrigger.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const seemly_1 = require("seemly");
 const vue_1 = require("vue");
-const ColorPicker_1 = require("./ColorPicker");
+const context_1 = require("./context");
 exports.default = (0, vue_1.defineComponent)({
     name: 'ColorPickerTrigger',
     props: {
@@ -23,7 +23,7 @@ exports.default = (0, vue_1.defineComponent)({
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { colorPickerSlots, renderLabelRef } = (0, vue_1.inject)(ColorPicker_1.colorPickerInjectionKey, null);
+        const { colorPickerSlots, renderLabelRef } = (0, vue_1.inject)(context_1.colorPickerInjectionKey, null);
         return () => {
             const { hsla, value, clsPrefix, onClick, disabled } = props;
             const renderLabel = colorPickerSlots.label || renderLabelRef.value;

package/lib/color-picker/src/context.d.ts

@@ -0,0 +1,9 @@
+import { ComputedRef, Ref, Slots } from 'vue';
+import type { MergedTheme } from '../../_mixins';
+import type { ColorPickerTheme } from '../styles';
+import type { RenderLabel } from './interface';
+export declare const colorPickerInjectionKey: import("vue").InjectionKey<{
+    themeRef: ComputedRef<MergedTheme<ColorPickerTheme>>;
+    colorPickerSlots: Slots;
+    renderLabelRef: Ref<RenderLabel | undefined>;
+}>;

package/lib/color-picker/src/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorPickerInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.colorPickerInjectionKey = (0, _utils_1.createInjectionKey)('n-color-picker');

package/lib/color-picker/src/styles/index.cssr.js

@@ -84,6 +84,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
  pointer-events: none;
  `)]), (0, cssr_1.cB)('color-picker-handle', `
+ z-index: 1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .45);
  position: absolute;
  background-color: white;

package/lib/components.d.ts

@@ -36,10 +36,12 @@ export * from './global-style';
 export * from './gradient-text';
 export * from './grid';
 export * from './icon';
+export * from './icon-wrapper';
 export * from './image';
 export * from './input';
 export * from './input-number';
 export * from './layout';
+export * from './legacy-grid';
 export * from './list';
 export * from './loading-bar';
 export * from './log';
@@ -79,4 +81,3 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
-export * from './legacy-grid';

package/lib/components.js

@@ -48,10 +48,12 @@ __exportStar(require("./global-style"), exports);
 __exportStar(require("./gradient-text"), exports);
 __exportStar(require("./grid"), exports);
 __exportStar(require("./icon"), exports);
+__exportStar(require("./icon-wrapper"), exports);
 __exportStar(require("./image"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./input-number"), exports);
 __exportStar(require("./layout"), exports);
+__exportStar(require("./legacy-grid"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./loading-bar"), exports);
 __exportStar(require("./log"), exports);
@@ -91,4 +93,3 @@ __exportStar(require("./tree"), exports);
 __exportStar(require("./tree-select"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./upload"), exports);
-__exportStar(require("./legacy-grid"), exports);

package/lib/composables/use-theme-vars.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThemeVars = void 0;
 const vue_1 = require("vue");
-const ConfigProvider_1 = require("../config-provider/src/ConfigProvider");
+const context_1 = require("../config-provider/src/context");
 const common_1 = require("../_styles/common");
 function useThemeVars() {
-    const configProviderInjection = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+    const configProviderInjection = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
     return (0, vue_1.computed)(() => {
         if (configProviderInjection === null)
             return common_1.commonLight;

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

@@ -1,10 +1,9 @@
 import { PropType, ComputedRef } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 import { Hljs } from '../../_mixins';
-import type { GlobalTheme, GlobalThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './interface';
-import type { ConfigProviderInjection, RtlProp, Breakpoints } from './internal-interface';
 import { NDateLocale } from '../../locales';
-export declare const configProviderInjectionKey: import("vue").InjectionKey<ConfigProviderInjection>;
+import type { GlobalTheme, GlobalThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './interface';
+import type { RtlProp, Breakpoints } from './internal-interface';
 export declare const configProviderProps: {
     readonly abstract: BooleanConstructor;
     readonly bordered: {
@@ -133,6 +132,10 @@ export declare const configProviderProps: {
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly disableInlineTheme: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly as: {
         readonly type: PropType<string | undefined>;
         readonly validator: () => boolean;
@@ -268,6 +271,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly disableInlineTheme: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly as: {
         readonly type: PropType<string | undefined>;
         readonly validator: () => boolean;
@@ -407,6 +414,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
+    readonly disableInlineTheme: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly as: {
         readonly type: PropType<string | undefined>;
         readonly validator: () => boolean;
@@ -417,5 +428,6 @@ declare const _default: import("vue").DefineComponent<{
     tag: string;
     as: string | undefined;
     bordered: boolean | undefined;
+    disableInlineTheme: boolean;
 }>;
 export default _default;

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

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.configProviderProps = exports.configProviderInjectionKey = void 0;
+exports.configProviderProps = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const lodash_1 = require("lodash");
+const css_render_1 = require("css-render");
 const _utils_1 = require("../../_utils");
 const _mixins_1 = require("../../_mixins");
-exports.configProviderInjectionKey = (0, _utils_1.createInjectionKey)('n-config-provider');
+const context_1 = require("./context");
 exports.configProviderProps = {
     abstract: Boolean,
     bordered: {
@@ -28,6 +29,10 @@ exports.configProviderProps = {
     componentOptions: Object,
     icons: Object,
     breakpoints: Object,
+    disableInlineTheme: {
+        type: Boolean,
+        default: undefined
+    },
     // deprecated
     as: {
         type: String,
@@ -43,7 +48,7 @@ exports.default = (0, vue_1.defineComponent)({
     alias: ['App'],
     props: exports.configProviderProps,
     setup(props) {
-        const NConfigProvider = (0, vue_1.inject)(exports.configProviderInjectionKey, null);
+        const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const mergedThemeRef = (0, vue_1.computed)(() => {
             const { theme } = props;
             if (theme === null)
@@ -118,7 +123,27 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedBreakpointsRef = (0, vue_1.computed)(() => {
             return props.breakpoints || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value);
         });
-        (0, vue_1.provide)(exports.configProviderInjectionKey, {
+        const disableInlineTheme = props.disableInlineTheme || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme);
+        const mergedThemeHashRef = (0, vue_1.computed)(() => {
+            const { value: theme } = mergedThemeRef;
+            const { value: mergedThemeOverrides } = mergedThemeOverridesRef;
+            const hasThemeOverrides = mergedThemeOverrides && Object.keys(mergedThemeOverrides).length !== 0;
+            const themeName = theme === null || theme === void 0 ? void 0 : theme.name;
+            if (themeName) {
+                if (hasThemeOverrides) {
+                    return `${themeName}-${(0, css_render_1.hash)(JSON.stringify(mergedThemeOverridesRef.value))}`;
+                }
+                return themeName;
+            }
+            else {
+                if (hasThemeOverrides) {
+                    return (0, css_render_1.hash)(JSON.stringify(mergedThemeOverridesRef.value));
+                }
+                return '';
+            }
+        });
+        (0, vue_1.provide)(context_1.configProviderInjectionKey, {
+            mergedThemeHashRef,
             mergedBreakpointsRef,
             mergedRtlRef,
             mergedIconsRef,
@@ -147,7 +172,8 @@ exports.default = (0, vue_1.defineComponent)({
                 return hljs === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedHljsRef.value : hljs;
             }),
             mergedThemeRef,
-            mergedThemeOverridesRef
+            mergedThemeOverridesRef,
+            disableInlineTheme: disableInlineTheme || false
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,

package/lib/config-provider/src/context.d.ts

@@ -0,0 +1,2 @@
+import type { ConfigProviderInjection } from './internal-interface';
+export declare const configProviderInjectionKey: import("vue").InjectionKey<ConfigProviderInjection>;

package/lib/config-provider/src/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configProviderInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.configProviderInjectionKey = (0, _utils_1.createInjectionKey)('n-config-provider');

package/lib/config-provider/src/interface.d.ts

@@ -1,10 +1,11 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { ExtractThemeOverrides } from '../../_mixins/use-theme';
 import type { GlobalThemeWithoutCommon } from './internal-interface';
-export { ThemeCommonVars };
+export type { ThemeCommonVars };
 export interface CustomThemeCommonVars {
 }
 export interface GlobalTheme extends GlobalThemeWithoutCommon {
+    name: string;
     common?: ThemeCommonVars;
 }
 export declare type GlobalThemeOverrides = {

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

@@ -31,6 +31,7 @@ import type { EmptyTheme } from '../../empty/styles';
 import type { FormTheme } from '../../form/styles';
 import type { GradientTextTheme } from '../../gradient-text/styles';
 import type { IconTheme } from '../../icon/styles';
+import type { IconWrapperTheme } from '../../icon-wrapper/styles';
 import type { ImageTheme } from '../../image/styles';
 import type { InputTheme } from '../../input/styles';
 import type { InputNumberTheme } from '../../input-number/styles';
@@ -119,6 +120,7 @@ export interface GlobalThemeWithoutCommon {
     Form?: FormTheme;
     GradientText?: GradientTextTheme;
     Icon?: IconTheme;
+    IconWrapper?: IconWrapperTheme;
     Image?: ImageTheme;
     Input?: InputTheme;
     InputNumber?: InputNumberTheme;
@@ -226,4 +228,6 @@ export interface ConfigProviderInjection {
     mergedThemeRef: Ref<GlobalTheme | undefined>;
     mergedThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     mergedRtlRef: Ref<RtlEnabledState | undefined>;
+    mergedThemeHashRef: Ref<string>;
+    disableInlineTheme: boolean;
 }