feat: configProvider.config
parent
d749fc9f22
commit
9b32623e1a
|
@ -1,4 +1,4 @@
|
|||
import type { App, PropType, VNodeChild, Plugin } from 'vue';
|
||||
import type { App, PropType, VNodeChild, Plugin, Ref } from 'vue';
|
||||
|
||||
// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
|
||||
export const tuple = <T extends string[]>(...args: T) => args;
|
||||
|
@ -39,3 +39,5 @@ export const withInstall = <T>(comp: T) => {
|
|||
|
||||
return comp as T & Plugin;
|
||||
};
|
||||
|
||||
export type MaybeRef<T> = T | Ref<T>;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import type { PropType, ExtractPropTypes, UnwrapRef } from 'vue';
|
||||
import { reactive, provide, defineComponent, watch } from 'vue';
|
||||
import type { PropType, ExtractPropTypes, UnwrapRef, App, Plugin, WatchStopHandle } from 'vue';
|
||||
import { reactive, provide, defineComponent, watch, ref, unref, watchEffect } from 'vue';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import defaultRenderEmpty from './renderEmpty';
|
||||
import type { RenderEmptyHandler } from './renderEmpty';
|
||||
|
@ -7,8 +7,8 @@ import type { Locale } from '../locale-provider';
|
|||
import LocaleProvider, { ANT_MARK } from '../locale-provider';
|
||||
import type { TransformCellTextProps } from '../table/interface';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import { withInstall } from '../_util/type';
|
||||
import type { RequiredMark } from '../form/Form';
|
||||
import type { MaybeRef } from '../_util/type';
|
||||
|
||||
export type SizeType = 'small' | 'middle' | 'large' | undefined;
|
||||
|
||||
|
@ -57,6 +57,56 @@ export const configConsumerProps = [
|
|||
'pageHeader',
|
||||
];
|
||||
|
||||
export const defaultPrefixCls = 'ant';
|
||||
let globalPrefixCls = ref<string>();
|
||||
|
||||
type GlobalConfigProviderProps = {
|
||||
prefixCls?: MaybeRef<ConfigProviderProps['prefixCls']>;
|
||||
};
|
||||
|
||||
let stopWatchEffect: WatchStopHandle;
|
||||
const setGlobalConfig = (params: GlobalConfigProviderProps) => {
|
||||
if (stopWatchEffect) {
|
||||
stopWatchEffect();
|
||||
}
|
||||
stopWatchEffect = watchEffect(() => {
|
||||
const prefixCls = unref(params.prefixCls);
|
||||
if (prefixCls !== undefined) {
|
||||
globalPrefixCls.value = prefixCls;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function getGlobalPrefixCls() {
|
||||
return globalPrefixCls.value || defaultPrefixCls;
|
||||
}
|
||||
|
||||
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
|
||||
if (globalPrefixCls.value) {
|
||||
return globalPrefixCls.value;
|
||||
}
|
||||
|
||||
// [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();
|
||||
},
|
||||
});
|
||||
|
||||
export const configProviderProps = {
|
||||
getTargetContainer: {
|
||||
type: Function as PropType<() => HTMLElement>,
|
||||
|
@ -168,4 +218,12 @@ export const defaultConfigProvider: UnwrapRef<ConfigProviderProps> = reactive({
|
|||
direction: 'ltr',
|
||||
});
|
||||
|
||||
export default withInstall(ConfigProvider);
|
||||
ConfigProvider.config = setGlobalConfig;
|
||||
ConfigProvider.install = function (app: App) {
|
||||
app.component(ConfigProvider.name, ConfigProvider);
|
||||
};
|
||||
|
||||
export default ConfigProvider as typeof ConfigProvider &
|
||||
Plugin & {
|
||||
readonly config: typeof setGlobalConfig;
|
||||
};
|
||||
|
|
|
@ -4,6 +4,13 @@ import type { ModalFuncProps } from './Modal';
|
|||
import { destroyFns } from './Modal';
|
||||
|
||||
import Omit from 'omit.js';
|
||||
import ConfigProvider, { globalConfig } from '../config-provider';
|
||||
|
||||
let defaultRootPrefixCls = '';
|
||||
|
||||
function getRootPrefixCls() {
|
||||
return defaultRootPrefixCls;
|
||||
}
|
||||
|
||||
const confirm = (config: ModalFuncProps) => {
|
||||
const div = document.createElement('div');
|
||||
|
@ -52,8 +59,15 @@ const confirm = (config: ModalFuncProps) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
const Wrapper = p => {
|
||||
return p.vIf ? <ConfirmDialog {...p}></ConfirmDialog> : null;
|
||||
const Wrapper = (p: ModalFuncProps & { vIf: boolean }) => {
|
||||
const { getPrefixCls } = globalConfig();
|
||||
const rootPrefixCls = getPrefixCls(undefined, getRootPrefixCls());
|
||||
const prefixCls = p.prefixCls || `${rootPrefixCls}-modal`;
|
||||
return p.vIf ? (
|
||||
<ConfigProvider prefixCls={rootPrefixCls}>
|
||||
<ConfirmDialog {...p} prefixCls={prefixCls}></ConfirmDialog>
|
||||
</ConfigProvider>
|
||||
) : null;
|
||||
};
|
||||
function render(props: ModalFuncProps) {
|
||||
const vm = createVNode(Wrapper, { ...props, vIf: true });
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// debugger tsx
|
||||
import Demo from '../../components/table/demo/index.vue';
|
||||
import Demo from '../../components/modal/demo/index.vue';
|
||||
|
||||
export default {
|
||||
render() {
|
||||
|
|
Loading…
Reference in New Issue