@antsoo-lib/components 0.1.11 → 0.1.12

package/src/config-provider/cssVariables.ts

@@ -1,102 +0,0 @@
-import { generate } from '@ant-design/colors'
-import { TinyColor } from '@ctrl/tinycolor'
-
-import canUseDom from '../_util/canUseDom'
-import warning from '../_util/warning'
-import { updateCSS } from '../vc-util/Dom/dynamicCSS'
-import type { Theme } from './context'
-
-const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`
-
-export function getStyle(globalPrefixCls: string, theme: Theme) {
-  const variables: Record<string, string> = {}
-
-  const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => {
-    let clone = color.clone()
-    clone = updater?.(clone) || clone
-    return clone.toRgbString()
-  }
-
-  const fillColor = (colorVal: string, type: string) => {
-    const baseColor = new TinyColor(colorVal)
-    const colorPalettes = generate(baseColor.toRgbString())
-
-    variables[`${type}-color`] = formatColor(baseColor)
-    variables[`${type}-color-disabled`] = colorPalettes[1]
-    variables[`${type}-color-hover`] = colorPalettes[4]
-    variables[`${type}-color-active`] = colorPalettes[6]
-    variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString()
-    variables[`${type}-color-deprecated-bg`] = colorPalettes[0]
-    variables[`${type}-color-deprecated-border`] = colorPalettes[2]
-  }
-
-  // ================ Primary Color ================
-  if (theme.primaryColor) {
-    fillColor(theme.primaryColor, 'primary')
-
-    const primaryColor = new TinyColor(theme.primaryColor)
-    const primaryColors = generate(primaryColor.toRgbString())
-
-    // Legacy - We should use semantic naming standard
-    primaryColors.forEach((color, index) => {
-      variables[`primary-${index + 1}`] = color
-    })
-    // Deprecated
-    variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, (c) => c.lighten(35))
-    variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, (c) => c.lighten(20))
-    variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, (c) => c.tint(20))
-    variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, (c) => c.tint(50))
-    variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, (c) =>
-      c.setAlpha(c.getAlpha() * 0.12),
-    )
-
-    const primaryActiveColor = new TinyColor(primaryColors[0])
-    variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, (c) =>
-      c.setAlpha(c.getAlpha() * 0.3),
-    )
-    variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, (c) =>
-      c.darken(2),
-    )
-  }
-
-  // ================ Success Color ================
-  if (theme.successColor) {
-    fillColor(theme.successColor, 'success')
-  }
-
-  // ================ Warning Color ================
-  if (theme.warningColor) {
-    fillColor(theme.warningColor, 'warning')
-  }
-
-  // ================= Error Color =================
-  if (theme.errorColor) {
-    fillColor(theme.errorColor, 'error')
-  }
-
-  // ================= Info Color ==================
-  if (theme.infoColor) {
-    fillColor(theme.infoColor, 'info')
-  }
-
-  // Convert to css variables
-  const cssList = Object.keys(variables).map(
-    (key) => `--${globalPrefixCls}-${key}: ${variables[key]};`,
-  )
-
-  return `
-  :root {
-    ${cssList.join('\n')}
-  }
-  `.trim()
-}
-
-export function registerTheme(globalPrefixCls: string, theme: Theme) {
-  const style = getStyle(globalPrefixCls, theme)
-
-  if (canUseDom()) {
-    updateCSS(style, `${dynamicStyleMark}-dynamic-theme`)
-  } else {
-    warning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.')
-  }
-}

package/src/config-provider/hooks/useConfigInject.ts

@@ -1,74 +0,0 @@
-import { computed, h, inject } from 'vue'
-
-import { useInjectDisabled } from '../DisabledContext'
-import { useInjectSize } from '../SizeContext'
-import type { SizeType } from '../context'
-import { configProviderKey, defaultConfigProvider } from '../context'
-import { DefaultRenderEmpty } from '../renderEmpty'
-
-export default (name: string, props: Record<any, any>) => {
-  const sizeContext = useInjectSize()
-  const disabledContext = useInjectDisabled()
-  const configProvider = inject(configProviderKey, {
-    ...defaultConfigProvider,
-    renderEmpty: (name?: string) => h(DefaultRenderEmpty, { componentName: name }),
-  })
-  const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls))
-  const direction = computed(() => props.direction ?? configProvider.direction?.value)
-  const iconPrefixCls = computed(() => props.iconPrefixCls ?? configProvider.iconPrefixCls.value)
-  const rootPrefixCls = computed(() => configProvider.getPrefixCls())
-  const autoInsertSpaceInButton = computed(() => configProvider.autoInsertSpaceInButton?.value)
-  const renderEmpty = configProvider.renderEmpty
-  const space = configProvider.space
-  const pageHeader = configProvider.pageHeader
-  const form = configProvider.form
-  const getTargetContainer = computed(
-    () => props.getTargetContainer ?? configProvider.getTargetContainer?.value,
-  )
-  const getPopupContainer = computed(
-    () => props.getContainer ?? props.getPopupContainer ?? configProvider.getPopupContainer?.value,
-  )
-
-  const dropdownMatchSelectWidth = computed<boolean | number>(
-    () => props.dropdownMatchSelectWidth ?? configProvider.dropdownMatchSelectWidth?.value,
-  )
-  const virtual = computed(
-    () =>
-      (props.virtual === undefined
-        ? configProvider.virtual?.value !== false
-        : props.virtual !== false) && dropdownMatchSelectWidth.value !== false,
-  )
-  const size = computed(() => (props.size as SizeType) || sizeContext.value)
-  const autocomplete = computed(
-    () => props.autocomplete ?? configProvider.input?.value?.autocomplete,
-  )
-  const disabled = computed<boolean>(() => props.disabled ?? disabledContext.value)
-  const csp = computed(() => props.csp ?? configProvider.csp)
-  const wave = computed<{
-    disabled?: boolean
-  }>(() => props.wave ?? configProvider.wave?.value)
-
-  return {
-    configProvider,
-    prefixCls,
-    direction,
-    size,
-    getTargetContainer,
-    getPopupContainer,
-    space,
-    pageHeader,
-    form,
-    autoInsertSpaceInButton,
-    renderEmpty,
-    virtual,
-    dropdownMatchSelectWidth,
-    rootPrefixCls,
-    getPrefixCls: configProvider.getPrefixCls,
-    autocomplete,
-    csp,
-    iconPrefixCls,
-    disabled,
-    select: configProvider.select,
-    wave,
-  }
-}

package/src/config-provider/hooks/useTheme.ts

@@ -1,44 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-
-import { defaultConfig } from '../../theme/internal'
-import type { ThemeConfig } from '../context'
-
-export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<ThemeConfig>) {
-  const themeConfig = computed(() => theme?.value || {})
-  const parentThemeConfig = computed<ThemeConfig>(() =>
-    themeConfig.value.inherit === false || !parentTheme?.value ? defaultConfig : parentTheme.value,
-  )
-
-  const mergedTheme = computed(() => {
-    if (!theme?.value) {
-      return parentTheme?.value
-    }
-
-    // Override
-    const mergedComponents = {
-      ...parentThemeConfig.value.components,
-    }
-
-    Object.keys(theme.value.components || {}).forEach((componentName) => {
-      mergedComponents[componentName] = {
-        ...mergedComponents[componentName],
-        ...theme.value.components![componentName],
-      } as any
-    })
-
-    // Base token
-    return {
-      ...parentThemeConfig.value,
-      ...themeConfig.value,
-
-      token: {
-        ...parentThemeConfig.value.token,
-        ...themeConfig.value.token,
-      },
-      components: mergedComponents,
-    }
-  })
-
-  return mergedTheme
-}

package/src/config-provider/index.en-US.md

@@ -1,115 +0,0 @@
----
-category: Components
-type: Other
-cols: 1
-title: ConfigProvider
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original
----
-
-`ConfigProvider` provides a uniform configuration support for components.
-
-## Usage
-
-This component provides a configuration to all Vue components underneath itself via the [provide / inject](https://vuejs.org/v2/api/#provide-inject), In the render tree all components will have access to the provided config.
-
-```html
-<template>
-  <a-config-provider :getPopupContainer="getPopupContainer">
-    <app />
-  </a-config-provider>
-</template>
-<script>
-  export default {
-    methods: {
-      getPopupContainer(el, dialogContext) {
-        if (dialogContext) {
-          return dialogContext.getDialogWrap()
-        } else {
-          return document.body
-        }
-      },
-    },
-  }
-</script>
-```
-
-### Content Security Policy
-
-Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:
-
-```html
-<a-config-provider :csp="{ nonce: 'YourNonceCode' }">
-  <a-button>My Button</a-button>
-</a-config-provider>
-```
-
-## API
-
-| Property                 | Description                                                                                                                                                                                            | Type                                                                                                                | Default               | Version |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
-| autoInsertSpaceInButton  | Set `false` to remove space between 2 chinese characters on Button                                                                                                                                     | boolean                                                                                                             | true                  |         |
-| componentSize            | Config antd component size                                                                                                                                                                             | `small` \| `middle` \| `large`                                                                                      | -                     | 3.0     |
-| csp                      | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config                                                                                                            | { nonce: string }                                                                                                   | -                     |         |
-| direction                | Set direction of layout. See [demo](#components-config-provider-demo-direction)                                                                                                                        | `ltr` \| `rtl`                                                                                                      | `ltr`                 | 3.0     |
-| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number                                                                                                   | -                     | 3.0     |
-| form                     | Set Form common props                                                                                                                                                                                  | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional` } | -                     | 3.0     |
-| getPopupContainer        | to set the container of the popup element. The default is to create a `div` element in `body`.                                                                                                         | Function(triggerNode, dialogContext)                                                                                | `() => document.body` |         |
-| getTargetContainer       | Config Affix, Anchor scroll target container                                                                                                                                                           | () => HTMLElement                                                                                                   | () => window          | 3.0     |
-| input                    | Set Input common props                                                                                                                                                                                 | { autocomplete?: string }                                                                                           | -                     | 3.0     |
-| locale                   | language package setting, you can find the packages in [ant-design-vue/es/locale](http://unpkg.com/ant-design-vue/es/locale/)                                                                          | object                                                                                                              | -                     | 1.5.0   |
-| pageHeader               | Unify the ghost of pageHeader ,Ref [pageHeader]\(&lt;(/components/page-header)>                                                                                                                        | { ghost:boolean }                                                                                                   | 'true'                | 1.5.0   |
-| prefixCls                | set prefix class                                                                                                                                                                                       | string                                                                                                              | ant                   |         |
-| renderEmpty              | set empty content of components. Ref [Empty](/components/empty/)                                                                                                                                       | slot-scope \| Function(componentName: string): VNode                                                                | -                     |         |
-| space                    | Set Space `size`, ref [Space](/components/space)                                                                                                                                                       | { size: `small` \| `middle` \| `large` \| `number` }                                                                | -                     | 3.0     |
-| transformCellText        | Table data can be changed again before rendering. The default configuration of general user empty data.                                                                                                | Function({ text, column, record, index }) => any                                                                    | -                     | 1.5.4   |
-| virtual                  | Disable virtual scroll when set to false                                                                                                                                                               | boolean                                                                                                             | true                  | 3.0     |
-| wave                     | Config wave effect                                                                                                                                                                                     | { disabled?: boolean }                                                                                              | -                     | 4.0.7   |
-
-### ConfigProvider.config() `3.0.0+`
-
-Setting `Modal`、`Message`、`Notification` rootPrefixCls.
-
-```jsx
-ConfigProvider.config({
-  prefixCls: 'ant',
-})
-```
-
-or
-
-```jsx
-// some cinfig support reactively, you can change prefixCls.value = 'other'
-const prefixCls = ref('ant')
-ConfigProvider.config({
-  prefixCls,
-})
-```
-
-## FAQ
-
-#### Does the locale problem still exist in DatePicker even if ConfigProvider `locale` is used?
-
-Please make sure you set dayjs locale by `dayjs.locale('zh-cn')` or that you don't have two different versions of dayjs.
-
-#### Modal throw error when setting `getPopupContainer`?
-
-When you config `getPopupContainer` to parentNode globally, Modal will throw error of `triggerNode is undefined` because it did not have a triggerNode.
-
-```diff
- <ConfigProvider
--  getPopupContainer={triggerNode => triggerNode.parentNode}
-+  getPopupContainer={node => {
-+    if (node) {
-+      return node.parentNode;
-+    }
-+    return document.body;
-+  }}
- >
-   <App />
- </ConfigProvider>
-```
-
-#### Why can't ConfigProvider props (like `prefixCls` and `theme`) affect VueNode inside `message.info`, `notification.open`, `Modal.confirm`?
-
-antd will dynamic create Vue instance by `Vue.render` when call message methods. Whose context is different with origin code located context.

package/src/config-provider/index.tsx

@@ -1,296 +0,0 @@
-import type { App, MaybeRef, Plugin, WatchStopHandle } from 'vue'
-import { computed, defineComponent, reactive, watch, watchEffect } from 'vue'
-
-import { createTheme } from '../_util/cssinjs'
-import type { ValidateMessages } from '../form/interface'
-import type { Locale } from '../locale-provider'
-import LocaleProvider, { ANT_MARK } from '../locale-provider'
-import LocaleReceiver from '../locale-provider/LocaleReceiver'
-import defaultLocale from '../locale/en_US'
-import message from '../message'
-import notification from '../notification'
-import { DesignTokenProvider } from '../theme/internal'
-import defaultSeedToken from '../theme/themes/seed'
-import { useProviderDisabled } from './DisabledContext'
-import { useProviderSize } from './SizeContext'
-import type { ConfigProviderInnerProps, ConfigProviderProps, Theme } from './context'
-import {
-  configProviderProps,
-  defaultIconPrefixCls,
-  useConfigContextInject,
-  useConfigContextProvider,
-  useProvideGlobalForm,
-} from './context'
-import { registerTheme } from './cssVariables'
-import useTheme from './hooks/useTheme'
-import defaultRenderEmpty from './renderEmpty'
-import type { RenderEmptyHandler } from './renderEmpty'
-import useStyle from './style'
-
-export type {
-  ConfigProviderProps,
-  CSPConfig,
-  Direction,
-  DirectionType,
-  SizeType,
-  Theme,
-} from './context'
-export const defaultPrefixCls = 'ant'
-export { defaultIconPrefixCls }
-function getGlobalPrefixCls() {
-  return globalConfigForApi.prefixCls || defaultPrefixCls
-}
-
-function getGlobalIconPrefixCls() {
-  return globalConfigForApi.iconPrefixCls || defaultIconPrefixCls
-}
-const globalConfigBySet = reactive<ConfigProviderProps>({}) // 权重最大
-export const globalConfigForApi: ConfigProviderProps & {
-  getRootPrefixCls?: (rootPrefixCls?: string, customizePrefixCls?: string) => string
-} = reactive({})
-
-export const configConsumerProps = [
-  'getTargetContainer',
-  'getPopupContainer',
-  'rootPrefixCls',
-  'getPrefixCls',
-  'renderEmpty',
-  'csp',
-  'autoInsertSpaceInButton',
-  'locale',
-  'pageHeader',
-]
-
-watchEffect(() => {
-  Object.assign(globalConfigForApi, globalConfigBySet)
-  globalConfigForApi.prefixCls = getGlobalPrefixCls()
-  globalConfigForApi.iconPrefixCls = getGlobalIconPrefixCls()
-  globalConfigForApi.getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
-    if (customizePrefixCls) return customizePrefixCls
-    return suffixCls ? `${globalConfigForApi.prefixCls}-${suffixCls}` : globalConfigForApi.prefixCls
-  }
-  globalConfigForApi.getRootPrefixCls = () => {
-    // If Global prefixCls provided, use this
-    if (globalConfigForApi.prefixCls) {
-      return globalConfigForApi.prefixCls
-    }
-
-    // Fallback to default prefixCls
-    return getGlobalPrefixCls()
-  }
-})
-
-interface GlobalConfigProviderProps {
-  prefixCls?: MaybeRef<ConfigProviderProps['prefixCls']>
-  iconPrefixCls?: MaybeRef<ConfigProviderProps['iconPrefixCls']>
-  getPopupContainer?: ConfigProviderProps['getPopupContainer']
-}
-
-let stopWatchEffect: WatchStopHandle
-const setGlobalConfig = (params: GlobalConfigProviderProps & { theme?: Theme }) => {
-  if (stopWatchEffect) {
-    stopWatchEffect()
-  }
-  stopWatchEffect = watchEffect(() => {
-    Object.assign(globalConfigBySet, reactive(params))
-    Object.assign(globalConfigForApi, reactive(params))
-  })
-  if (params.theme) {
-    registerTheme(getGlobalPrefixCls(), params.theme)
-  }
-}
-
-export const globalConfig = () => ({
-  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
-    if (customizePrefixCls) return customizePrefixCls
-    return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls()
-  },
-  getIconPrefixCls: getGlobalIconPrefixCls,
-  getRootPrefixCls: () => {
-    // If Global prefixCls provided, use this
-    if (globalConfigForApi.prefixCls) {
-      return globalConfigForApi.prefixCls
-    }
-
-    // Fallback to default prefixCls
-    return getGlobalPrefixCls()
-  },
-})
-
-const ConfigProvider = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AConfigProvider',
-  inheritAttrs: false,
-  props: configProviderProps(),
-  setup(props, { slots }) {
-    const parentContext = useConfigContextInject()
-    const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
-      const { prefixCls = 'ant' } = props
-      if (customizePrefixCls) return customizePrefixCls
-      const mergedPrefixCls = prefixCls || parentContext.getPrefixCls('')
-      return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
-    }
-    const iconPrefixCls = computed(
-      () => props.iconPrefixCls || parentContext.iconPrefixCls.value || defaultIconPrefixCls,
-    )
-    const shouldWrapSSR = computed(() => iconPrefixCls.value !== parentContext.iconPrefixCls.value)
-    const csp = computed(() => props.csp || parentContext.csp?.value)
-
-    const wrapSSR = useStyle(iconPrefixCls)
-
-    const mergedTheme = useTheme(
-      computed(() => props.theme),
-      computed(() => parentContext.theme?.value),
-    )
-    const renderEmptyComponent = (name?: string) => {
-      const renderEmpty = (props.renderEmpty ||
-        slots.renderEmpty ||
-        parentContext.renderEmpty ||
-        defaultRenderEmpty) as RenderEmptyHandler
-      return renderEmpty(name)
-    }
-    const autoInsertSpaceInButton = computed(
-      () => props.autoInsertSpaceInButton ?? parentContext.autoInsertSpaceInButton?.value,
-    )
-    const locale = computed(() => props.locale || parentContext.locale?.value)
-    watch(
-      locale,
-      () => {
-        globalConfigBySet.locale = locale.value
-      },
-      { immediate: true },
-    )
-    const direction = computed(() => props.direction || parentContext.direction?.value)
-    const space = computed(() => props.space ?? parentContext.space?.value)
-    const virtual = computed(() => props.virtual ?? parentContext.virtual?.value)
-    const dropdownMatchSelectWidth = computed(
-      () => props.dropdownMatchSelectWidth ?? parentContext.dropdownMatchSelectWidth?.value,
-    )
-    const getTargetContainer = computed(() =>
-      props.getTargetContainer !== undefined
-        ? props.getTargetContainer
-        : parentContext.getTargetContainer?.value,
-    )
-    const getPopupContainer = computed(() =>
-      props.getPopupContainer !== undefined
-        ? props.getPopupContainer
-        : parentContext.getPopupContainer?.value,
-    )
-    const pageHeader = computed(() =>
-      props.pageHeader !== undefined ? props.pageHeader : parentContext.pageHeader?.value,
-    )
-    const input = computed(() =>
-      props.input !== undefined ? props.input : parentContext.input?.value,
-    )
-    const pagination = computed(() =>
-      props.pagination !== undefined ? props.pagination : parentContext.pagination?.value,
-    )
-    const form = computed(() => (props.form !== undefined ? props.form : parentContext.form?.value))
-    const select = computed(() =>
-      props.select !== undefined ? props.select : parentContext.select?.value,
-    )
-    const componentSize = computed(() => props.componentSize)
-    const componentDisabled = computed(() => props.componentDisabled)
-    const wave = computed(() => props.wave ?? parentContext.wave?.value)
-    const configProvider: ConfigProviderInnerProps = {
-      csp,
-      autoInsertSpaceInButton,
-      locale,
-      direction,
-      space,
-      virtual,
-      dropdownMatchSelectWidth,
-      getPrefixCls,
-      iconPrefixCls,
-      theme: computed(() => {
-        return mergedTheme.value ?? parentContext.theme?.value
-      }),
-      renderEmpty: renderEmptyComponent,
-      getTargetContainer,
-      getPopupContainer,
-      pageHeader,
-      input,
-      pagination,
-      form,
-      select,
-      componentSize,
-      componentDisabled,
-      transformCellText: computed(() => props.transformCellText),
-      wave,
-    }
-
-    // ================================ Dynamic theme ================================
-    const memoTheme = computed(() => {
-      const { algorithm, token, ...rest } = mergedTheme.value || {}
-      const themeObj =
-        algorithm && (!Array.isArray(algorithm) || algorithm.length > 0)
-          ? createTheme(algorithm)
-          : undefined
-      return {
-        ...rest,
-        theme: themeObj,
-
-        token: {
-          ...defaultSeedToken,
-          ...token,
-        },
-      }
-    })
-    const validateMessagesRef = computed(() => {
-      // Additional Form provider
-      let validateMessages: ValidateMessages = {}
-
-      if (locale.value) {
-        validateMessages =
-          locale.value.Form?.defaultValidateMessages ||
-          defaultLocale.Form?.defaultValidateMessages ||
-          {}
-      }
-      if (props.form && props.form.validateMessages) {
-        validateMessages = { ...validateMessages, ...props.form.validateMessages }
-      }
-      return validateMessages
-    })
-    useConfigContextProvider(configProvider)
-    useProvideGlobalForm({ validateMessages: validateMessagesRef })
-    useProviderSize(componentSize)
-    useProviderDisabled(componentDisabled)
-
-    const renderProvider = (legacyLocale: Locale) => {
-      let childNode = shouldWrapSSR.value ? wrapSSR(slots.default?.()) : slots.default?.()
-      if (props.theme)
-        childNode = <DesignTokenProvider value={memoTheme.value}>{childNode}</DesignTokenProvider>
-      return (
-        <LocaleProvider locale={locale.value || legacyLocale} ANT_MARK__={ANT_MARK}>
-          {childNode}
-        </LocaleProvider>
-      )
-    }
-
-    watchEffect(() => {
-      if (direction.value) {
-        message.config({
-          rtl: direction.value === 'rtl',
-        })
-        notification.config({
-          rtl: direction.value === 'rtl',
-        })
-      }
-    })
-
-    return () => (
-      <LocaleReceiver children={(_, __, legacyLocale) => renderProvider(legacyLocale as Locale)} />
-    )
-  },
-})
-
-ConfigProvider.config = setGlobalConfig
-
-ConfigProvider.install = function (app: App) {
-  app.component(ConfigProvider.name, ConfigProvider)
-}
-
-export default ConfigProvider as typeof ConfigProvider &
-  Plugin & {
-    readonly config: typeof setGlobalConfig
-  }