2022-03-12 09:56:32 +08:00
|
|
|
import type { UnwrapRef, App, Plugin, WatchStopHandle } from 'vue';
|
|
|
|
import { computed, reactive, provide, defineComponent, watch, watchEffect } from 'vue';
|
2021-09-25 16:51:32 +08:00
|
|
|
import defaultRenderEmpty from './renderEmpty';
|
|
|
|
import type { RenderEmptyHandler } from './renderEmpty';
|
2021-06-26 09:35:40 +08:00
|
|
|
import type { Locale } from '../locale-provider';
|
|
|
|
import LocaleProvider, { ANT_MARK } from '../locale-provider';
|
2022-03-12 09:56:32 +08:00
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
2022-03-12 09:56:32 +08:00
|
|
|
|
2021-09-25 16:51:32 +08:00
|
|
|
import type { MaybeRef } from '../_util/type';
|
2022-01-01 10:34:37 +08:00
|
|
|
import message from '../message';
|
|
|
|
import notification from '../notification';
|
2022-03-12 09:56:32 +08:00
|
|
|
import { registerTheme } from './cssVariables';
|
|
|
|
import defaultLocale from '../locale/default';
|
|
|
|
import type { ValidateMessages } from '../form/interface';
|
2019-01-02 20:13:25 +08:00
|
|
|
|
2022-03-12 09:56:32 +08:00
|
|
|
import type { ConfigProviderProps, Theme } from './context';
|
|
|
|
import { configProviderProps, useProvideGlobalForm } from './context';
|
2020-09-29 22:06:01 +08:00
|
|
|
|
2022-03-12 09:56:32 +08:00
|
|
|
export type { ConfigProviderProps, Theme, SizeType, Direction, CSPConfig } from './context';
|
2021-09-25 16:51:32 +08:00
|
|
|
export const defaultPrefixCls = 'ant';
|
2021-10-26 16:12:56 +08:00
|
|
|
function getGlobalPrefixCls() {
|
|
|
|
return globalConfigForApi.prefixCls || defaultPrefixCls;
|
|
|
|
}
|
|
|
|
const globalConfigByCom = reactive<ConfigProviderProps>({});
|
|
|
|
const globalConfigBySet = reactive<ConfigProviderProps>({}); // 权重最大
|
|
|
|
export const globalConfigForApi = reactive<
|
|
|
|
ConfigProviderProps & {
|
|
|
|
getRootPrefixCls?: (rootPrefixCls?: string, customizePrefixCls?: string) => string;
|
|
|
|
}
|
|
|
|
>({});
|
|
|
|
|
|
|
|
watchEffect(() => {
|
|
|
|
Object.assign(globalConfigForApi, globalConfigByCom, globalConfigBySet);
|
|
|
|
globalConfigForApi.prefixCls = getGlobalPrefixCls();
|
|
|
|
globalConfigForApi.getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
|
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
|
|
|
return suffixCls
|
|
|
|
? `${globalConfigForApi.prefixCls}-${suffixCls}`
|
|
|
|
: globalConfigForApi.prefixCls;
|
|
|
|
};
|
|
|
|
globalConfigForApi.getRootPrefixCls = (rootPrefixCls?: string, customizePrefixCls?: string) => {
|
|
|
|
// Customize rootPrefixCls is first priority
|
|
|
|
if (rootPrefixCls) {
|
|
|
|
return rootPrefixCls;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If Global prefixCls provided, use this
|
|
|
|
if (globalConfigForApi.prefixCls) {
|
|
|
|
return globalConfigForApi.prefixCls;
|
|
|
|
}
|
|
|
|
|
|
|
|
// [Legacy] If customize prefixCls provided, we cut it to get the prefixCls
|
|
|
|
if (customizePrefixCls && customizePrefixCls.includes('-')) {
|
|
|
|
return customizePrefixCls.replace(/^(.*)-[^-]*$/, '$1');
|
|
|
|
}
|
|
|
|
|
|
|
|
// Fallback to default prefixCls
|
|
|
|
return getGlobalPrefixCls();
|
|
|
|
};
|
|
|
|
});
|
2021-09-25 16:51:32 +08:00
|
|
|
|
|
|
|
type GlobalConfigProviderProps = {
|
|
|
|
prefixCls?: MaybeRef<ConfigProviderProps['prefixCls']>;
|
|
|
|
};
|
|
|
|
|
|
|
|
let stopWatchEffect: WatchStopHandle;
|
2022-03-12 09:56:32 +08:00
|
|
|
const setGlobalConfig = (params: GlobalConfigProviderProps & { theme?: Theme }) => {
|
2021-09-25 16:51:32 +08:00
|
|
|
if (stopWatchEffect) {
|
|
|
|
stopWatchEffect();
|
|
|
|
}
|
|
|
|
stopWatchEffect = watchEffect(() => {
|
2021-10-26 16:12:56 +08:00
|
|
|
Object.assign(globalConfigBySet, reactive(params));
|
2021-09-25 16:51:32 +08:00
|
|
|
});
|
2022-03-12 09:56:32 +08:00
|
|
|
if (params.theme) {
|
|
|
|
registerTheme(getGlobalPrefixCls(), params.theme);
|
|
|
|
}
|
2021-09-25 16:51:32 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export const globalConfig = () => ({
|
|
|
|
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
|
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
|
|
|
return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls();
|
|
|
|
},
|
|
|
|
getRootPrefixCls: (rootPrefixCls?: string, customizePrefixCls?: string) => {
|
|
|
|
// Customize rootPrefixCls is first priority
|
|
|
|
if (rootPrefixCls) {
|
|
|
|
return rootPrefixCls;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If Global prefixCls provided, use this
|
2021-10-26 16:12:56 +08:00
|
|
|
if (globalConfigForApi.prefixCls) {
|
|
|
|
return globalConfigForApi.prefixCls;
|
2021-09-25 16:51:32 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// [Legacy] If customize prefixCls provided, we cut it to get the prefixCls
|
|
|
|
if (customizePrefixCls && customizePrefixCls.includes('-')) {
|
|
|
|
return customizePrefixCls.replace(/^(.*)-[^-]*$/, '$1');
|
|
|
|
}
|
|
|
|
|
|
|
|
// Fallback to default prefixCls
|
|
|
|
return getGlobalPrefixCls();
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2020-09-29 22:06:01 +08:00
|
|
|
const ConfigProvider = defineComponent({
|
2019-01-02 20:13:25 +08:00
|
|
|
name: 'AConfigProvider',
|
2021-09-25 16:51:32 +08:00
|
|
|
inheritAttrs: false,
|
2022-03-12 09:56:32 +08:00
|
|
|
props: configProviderProps(),
|
2020-09-29 22:06:01 +08:00
|
|
|
setup(props, { slots }) {
|
|
|
|
const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
|
|
|
|
const { prefixCls = 'ant' } = props;
|
2019-03-08 13:48:55 +08:00
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
|
|
|
return suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
|
2020-09-29 22:06:01 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const renderEmptyComponent = (name?: string) => {
|
2020-10-12 15:39:11 +08:00
|
|
|
const renderEmpty = (props.renderEmpty ||
|
|
|
|
slots.renderEmpty ||
|
2020-09-29 22:06:01 +08:00
|
|
|
defaultRenderEmpty) as RenderEmptyHandler;
|
|
|
|
return renderEmpty(name);
|
|
|
|
};
|
|
|
|
|
|
|
|
const getPrefixClsWrapper = (suffixCls: string, customizePrefixCls?: string) => {
|
|
|
|
const { prefixCls } = props;
|
|
|
|
|
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
|
|
|
|
|
|
|
const mergedPrefixCls = prefixCls || getPrefixCls('');
|
|
|
|
|
|
|
|
return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
|
|
|
|
};
|
|
|
|
|
|
|
|
const configProvider = reactive({
|
|
|
|
...props,
|
|
|
|
getPrefixCls: getPrefixClsWrapper,
|
|
|
|
renderEmpty: renderEmptyComponent,
|
|
|
|
});
|
2021-06-18 16:41:46 +08:00
|
|
|
Object.keys(props).forEach(key => {
|
|
|
|
watch(
|
|
|
|
() => props[key],
|
|
|
|
() => {
|
|
|
|
configProvider[key] = props[key];
|
|
|
|
},
|
|
|
|
);
|
2020-10-24 20:34:00 +08:00
|
|
|
});
|
2021-10-26 16:12:56 +08:00
|
|
|
if (!props.notUpdateGlobalConfig) {
|
|
|
|
Object.assign(globalConfigByCom, configProvider);
|
|
|
|
watch(configProvider, () => {
|
|
|
|
Object.assign(globalConfigByCom, configProvider);
|
|
|
|
});
|
|
|
|
}
|
2022-03-12 09:56:32 +08:00
|
|
|
const validateMessagesRef = computed(() => {
|
|
|
|
// Additional Form provider
|
2022-03-17 10:24:49 +08:00
|
|
|
let validateMessages: ValidateMessages = {};
|
2022-03-12 09:56:32 +08:00
|
|
|
|
|
|
|
if (props.locale) {
|
|
|
|
validateMessages =
|
|
|
|
props.locale.Form?.defaultValidateMessages ||
|
|
|
|
defaultLocale.Form?.defaultValidateMessages ||
|
|
|
|
{};
|
|
|
|
}
|
|
|
|
if (props.form && props.form.validateMessages) {
|
|
|
|
validateMessages = { ...validateMessages, ...props.form.validateMessages };
|
|
|
|
}
|
|
|
|
return validateMessages;
|
|
|
|
});
|
|
|
|
useProvideGlobalForm({ validateMessages: validateMessagesRef });
|
2020-09-29 22:06:01 +08:00
|
|
|
provide('configProvider', configProvider);
|
|
|
|
|
|
|
|
const renderProvider = (legacyLocale: Locale) => {
|
2020-03-07 19:45:13 +08:00
|
|
|
return (
|
2020-10-13 18:04:02 +08:00
|
|
|
<LocaleProvider locale={props.locale || legacyLocale} ANT_MARK__={ANT_MARK}>
|
2020-09-29 22:06:01 +08:00
|
|
|
{slots.default?.()}
|
2020-03-07 19:45:13 +08:00
|
|
|
</LocaleProvider>
|
|
|
|
);
|
2020-09-29 22:06:01 +08:00
|
|
|
};
|
2020-03-07 19:45:13 +08:00
|
|
|
|
2022-01-01 10:34:37 +08:00
|
|
|
watchEffect(() => {
|
|
|
|
if (props.direction) {
|
|
|
|
message.config({
|
|
|
|
rtl: props.direction === 'rtl',
|
|
|
|
});
|
|
|
|
notification.config({
|
|
|
|
rtl: props.direction === 'rtl',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2020-09-29 22:06:01 +08:00
|
|
|
return () => (
|
|
|
|
<LocaleReceiver children={(_, __, legacyLocale) => renderProvider(legacyLocale as Locale)} />
|
|
|
|
);
|
2019-03-08 13:48:55 +08:00
|
|
|
},
|
2020-09-29 22:06:01 +08:00
|
|
|
});
|
2019-03-08 13:48:55 +08:00
|
|
|
|
2021-06-07 17:35:03 +08:00
|
|
|
export const defaultConfigProvider: UnwrapRef<ConfigProviderProps> = reactive({
|
2020-08-23 16:45:55 +08:00
|
|
|
getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
|
2019-03-08 13:48:55 +08:00
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
2021-06-07 17:35:03 +08:00
|
|
|
return suffixCls ? `ant-${suffixCls}` : 'ant';
|
2019-01-02 20:13:25 +08:00
|
|
|
},
|
2019-03-14 21:21:58 +08:00
|
|
|
renderEmpty: defaultRenderEmpty,
|
2021-06-07 17:35:03 +08:00
|
|
|
direction: 'ltr',
|
|
|
|
});
|
2019-01-02 20:13:25 +08:00
|
|
|
|
2021-09-25 16:51:32 +08:00
|
|
|
ConfigProvider.config = setGlobalConfig;
|
|
|
|
ConfigProvider.install = function (app: App) {
|
|
|
|
app.component(ConfigProvider.name, ConfigProvider);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ConfigProvider as typeof ConfigProvider &
|
|
|
|
Plugin & {
|
|
|
|
readonly config: typeof setGlobalConfig;
|
|
|
|
};
|