naive-ui 2.24.6 → 2.25.2

package/es/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/es/color-picker/src/ColorPicker.js

@@ -5,7 +5,7 @@ import { VBinder, VFollower, VTarget } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { colorPickerLight } from '../styles';
 import { useFormItem, useConfig, useTheme, useLocale } from '../../_mixins';
-import { call, createInjectionKey, createKey, useAdjustedTo } from '../../_utils';
+import { call, createKey, useAdjustedTo } from '../../_utils';
 import { NButton } from '../../button';
 import HueSlider from './HueSlider';
 import AlphaSlider from './AlphaSlider';
@@ -15,6 +15,7 @@ import ColorPickerTrigger from './ColorPickerTrigger';
 import { deriveDefaultValue, getModeFromValue } from './utils';
 import ColorPickerSwatches from './ColorPickerSwatches';
 import ColorPreview from './ColorPreview';
+import { colorPickerInjectionKey } from './context';
 import style from './styles/index.cssr';
 export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.props), { value: String, show: {
         type: Boolean,
@@ -26,6 +27,9 @@ export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.pr
         type: Array,
         // no hsva by default since browser doesn't support it
         default: () => ['rgb', 'hex', 'hsl']
+    }, placement: {
+        type: String,
+        default: 'bottom-start'
     }, to: useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
@@ -36,7 +40,6 @@ export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.pr
         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] });
-export const colorPickerInjectionKey = createInjectionKey('n-color-picker');
 export default defineComponent({
     name: 'ColorPicker',
     props: colorPickerPanelProps,
@@ -47,7 +50,7 @@ export default defineComponent({
         const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = useLocale('global');
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
-        const themeRef = useTheme('ColorPicker', 'ColorPicker', style, colorPickerLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('ColorPicker', '-color-picker', style, colorPickerLight, props, mergedClsPrefixRef);
         provide(colorPickerInjectionKey, {
             themeRef,
             renderLabelRef: toRef(props, 'renderLabel'),
@@ -407,7 +410,7 @@ export default defineComponent({
                             label: $slots.label
                         }))
                     }),
-                    h(VFollower, { placement: "bottom-start", show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
+                    h(VFollower, { placement: this.placement, show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.mergedShow
                                 ? withDirectives(this.renderPanel(), [

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

@@ -1,6 +1,6 @@
 import { toHslaString } from 'seemly';
 import { defineComponent, h, inject } from 'vue';
-import { colorPickerInjectionKey } from './ColorPicker';
+import { colorPickerInjectionKey } from './context';
 export default defineComponent({
     name: 'ColorPickerTrigger',
     props: {

package/es/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/es/color-picker/src/context.js

@@ -0,0 +1,2 @@
+import { createInjectionKey } from '../../_utils';
+export const colorPickerInjectionKey = createInjectionKey('n-color-picker');

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

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

package/es/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/es/components.js

@@ -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/es/composables/use-theme-vars.js

@@ -1,5 +1,5 @@
 import { computed, inject } from 'vue';
-import { configProviderInjectionKey } from '../config-provider/src/ConfigProvider';
+import { configProviderInjectionKey } from '../config-provider/src/context';
 import { commonLight } from '../_styles/common';
 export function useThemeVars() {
     const configProviderInjection = inject(configProviderInjectionKey, null);

package/es/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/es/config-provider/src/ConfigProvider.js

@@ -1,9 +1,10 @@
 import { h, inject, computed, defineComponent, provide, markRaw } from 'vue';
 import { useMemo } from 'vooks';
 import { merge } from 'lodash-es';
-import { createInjectionKey, warn } from '../../_utils';
+import { hash } from 'css-render';
+import { warn } from '../../_utils';
 import { defaultClsPrefix } from '../../_mixins';
-export const configProviderInjectionKey = createInjectionKey('n-config-provider');
+import { configProviderInjectionKey } from './context';
 export const configProviderProps = {
     abstract: Boolean,
     bordered: {
@@ -25,6 +26,10 @@ export const configProviderProps = {
     componentOptions: Object,
     icons: Object,
     breakpoints: Object,
+    disableInlineTheme: {
+        type: Boolean,
+        default: undefined
+    },
     // deprecated
     as: {
         type: String,
@@ -115,7 +120,27 @@ export default defineComponent({
         const mergedBreakpointsRef = computed(() => {
             return props.breakpoints || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value);
         });
+        const disableInlineTheme = props.disableInlineTheme || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme);
+        const mergedThemeHashRef = 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}-${hash(JSON.stringify(mergedThemeOverridesRef.value))}`;
+                }
+                return themeName;
+            }
+            else {
+                if (hasThemeOverrides) {
+                    return hash(JSON.stringify(mergedThemeOverridesRef.value));
+                }
+                return '';
+            }
+        });
         provide(configProviderInjectionKey, {
+            mergedThemeHashRef,
             mergedBreakpointsRef,
             mergedRtlRef,
             mergedIconsRef,
@@ -144,7 +169,8 @@ export default 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/es/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/es/config-provider/src/context.js

@@ -0,0 +1,2 @@
+import { createInjectionKey } from '../../_utils';
+export const configProviderInjectionKey = createInjectionKey('n-config-provider');

package/es/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/es/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;
 }