feat: configProvider.config

Author: tangjinzhou

components/_util/type.ts

@@ -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>;

components/config-provider/index.tsx

@@ -1,14 +1,14 @@
-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';
 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;
+  };

components/modal/confirm.tsx

@@ -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 });

site/debugger/index.tsx

@@ -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() {