diff --git a/components/_util/hooks/useConfigInject.ts b/components/_util/hooks/useConfigInject.ts deleted file mode 100644 index a80bbd493..000000000 --- a/components/_util/hooks/useConfigInject.ts +++ /dev/null @@ -1,87 +0,0 @@ -import type { RequiredMark } from '../../form/Form'; -import type { ComputedRef, UnwrapRef } from 'vue'; -import { computed, inject } from 'vue'; -import type { ConfigProviderProps, CSPConfig, Direction, SizeType } from '../../config-provider'; -import { defaultConfigProvider } from '../../config-provider'; -import type { VueNode } from '../type'; -import type { ValidateMessages } from '../../form/interface'; - -export default ( - name: string, - props: Record, -): { - configProvider: UnwrapRef; - prefixCls: ComputedRef; - rootPrefixCls: ComputedRef; - direction: ComputedRef; - size: ComputedRef; - getTargetContainer: ComputedRef<() => HTMLElement>; - space: ComputedRef<{ size: SizeType | number }>; - pageHeader: ComputedRef<{ ghost: boolean }>; - form?: ComputedRef<{ - requiredMark?: RequiredMark; - colon?: boolean; - validateMessages?: ValidateMessages; - }>; - autoInsertSpaceInButton: ComputedRef; - renderEmpty?: ComputedRef<(componentName?: string) => VueNode>; - virtual: ComputedRef; - dropdownMatchSelectWidth: ComputedRef; - getPopupContainer: ComputedRef; - getPrefixCls: ConfigProviderProps['getPrefixCls']; - autocomplete: ComputedRef; - csp: ComputedRef; - iconPrefixCls: ComputedRef; -} => { - const configProvider = inject>( - 'configProvider', - defaultConfigProvider, - ); - const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls)); - const direction = computed(() => props.direction ?? configProvider.direction); - const iconPrefixCls = computed(() => props.iconPrefixCls ?? configProvider.iconPrefixCls); - const rootPrefixCls = computed(() => configProvider.getPrefixCls()); - const autoInsertSpaceInButton = computed(() => configProvider.autoInsertSpaceInButton); - const renderEmpty = computed(() => configProvider.renderEmpty); - const space = computed(() => configProvider.space); - const pageHeader = computed(() => configProvider.pageHeader); - const form = computed(() => configProvider.form); - const getTargetContainer = computed( - () => props.getTargetContainer || configProvider.getTargetContainer, - ); - const getPopupContainer = computed( - () => props.getPopupContainer || configProvider.getPopupContainer, - ); - - const dropdownMatchSelectWidth = computed( - () => props.dropdownMatchSelectWidth ?? configProvider.dropdownMatchSelectWidth, - ); - const virtual = computed( - () => - (props.virtual === undefined ? configProvider.virtual !== false : props.virtual !== false) && - dropdownMatchSelectWidth.value !== false, - ); - const size = computed(() => props.size || configProvider.componentSize); - const autocomplete = computed(() => props.autocomplete || configProvider.input?.autocomplete); - const csp = computed(() => configProvider.csp); - return { - configProvider, - prefixCls, - direction, - size, - getTargetContainer, - getPopupContainer, - space, - pageHeader, - form, - autoInsertSpaceInButton, - renderEmpty, - virtual, - dropdownMatchSelectWidth, - rootPrefixCls, - getPrefixCls: configProvider.getPrefixCls, - autocomplete, - csp, - iconPrefixCls, - }; -}; diff --git a/components/_util/hooks/useSize.ts b/components/_util/hooks/useSize.ts deleted file mode 100644 index 62b392e60..000000000 --- a/components/_util/hooks/useSize.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { ComputedRef, UnwrapRef } from 'vue'; -import { computed, inject, provide } from 'vue'; -import type { ConfigProviderProps, SizeType } from '../../config-provider'; -import { defaultConfigProvider } from '../../config-provider'; - -const sizeProvider = Symbol('SizeProvider'); - -const useProvideSize = (props: Record): ComputedRef => { - const configProvider = inject>( - 'configProvider', - defaultConfigProvider, - ); - const size = computed(() => props.size || configProvider.componentSize); - provide(sizeProvider, size); - return size; -}; - -const useInjectSize = (props?: Record): ComputedRef => { - const size: ComputedRef = props - ? computed(() => props.size) - : inject( - sizeProvider, - computed(() => 'default' as unknown as T), - ); - return size; -}; - -export { useInjectSize, sizeProvider, useProvideSize }; - -export default useProvideSize; diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx index ef69ef66c..f828c4ef6 100644 --- a/components/_util/wave.tsx +++ b/components/_util/wave.tsx @@ -2,7 +2,7 @@ import { nextTick, defineComponent, getCurrentInstance, onMounted, onBeforeUnmou import TransitionEvents from './css-animation/Event'; import raf from './raf'; import { findDOMNode } from './props-util'; -import useConfigInject from './hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; let styleForPesudo: HTMLStyleElement; // Where el is the DOM element you'd like to test for visibility diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 9b9449be9..64a225264 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -21,7 +21,7 @@ import { getFixedTop, getFixedBottom, } from './utils'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import omit from '../_util/omit'; import useStyle from './style'; function getDefaultTarget() { diff --git a/components/alert/index.tsx b/components/alert/index.tsx index f7c331446..af1ea1217 100644 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -16,7 +16,7 @@ import { isValidElement } from '../_util/props-util'; import { tuple, withInstall } from '../_util/type'; import { cloneElement } from '../_util/vnode'; import type { NodeMouseEventHandler } from '../vc-tree/contextTypes'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useStyle from './style'; const iconMapFilled = { diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index ca637e3e4..8450ef270 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -14,7 +14,7 @@ import addEventListener from '../vc-util/Dom/addEventListener'; import Affix from '../affix'; import scrollTo from '../_util/scrollTo'; import getScroll from '../_util/getScroll'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useProvideAnchor from './context'; import useStyle from './style'; import type { AnchorLinkProps } from './AnchorLink'; diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 8f16a9808..798556887 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -3,7 +3,7 @@ import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vu import PropTypes from '../_util/vue-types'; import { getPropsSlot, initDefaultProps } from '../_util/props-util'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useInjectAnchor } from './context'; export const anchorLinkProps = () => ({ diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index aaf2fc47e..217b24534 100644 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -6,7 +6,7 @@ import warning from '../_util/warning'; import Option from './Option'; import OptGroup from './OptGroup'; import omit from '../_util/omit'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { InputStatus } from '../_util/statusUtils'; function isSelectOptionOrSelectOptGroup(child: any): boolean { diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx index c03068c30..3b4a6ffe9 100644 --- a/components/avatar/Avatar.tsx +++ b/components/avatar/Avatar.tsx @@ -7,11 +7,11 @@ import PropTypes from '../_util/vue-types'; import useBreakpoint from '../_util/hooks/useBreakpoint'; import type { Breakpoint, ScreenSizeMap } from '../_util/responsiveObserve'; import { responsiveArray } from '../_util/responsiveObserve'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import ResizeObserver from '../vc-resize-observer'; -import { useInjectSize } from '../_util/hooks/useSize'; import eagerComputed from '../_util/eagerComputed'; import useStyle from './style'; +import { useInjectSize } from './SizeContext'; export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap; diff --git a/components/avatar/Group.tsx b/components/avatar/Group.tsx index b4406af61..e1832e117 100644 --- a/components/avatar/Group.tsx +++ b/components/avatar/Group.tsx @@ -5,9 +5,9 @@ import Popover from '../popover'; import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'; import { computed, defineComponent } from 'vue'; import { flattenChildren, getPropsSlot } from '../_util/props-util'; -import useConfigInject from '../_util/hooks/useConfigInject'; -import useProvideSize from '../_util/hooks/useSize'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useStyle from './style'; +import { useProviderSize } from './SizeContext'; export const groupProps = () => ({ prefixCls: String, @@ -36,7 +36,7 @@ const Group = defineComponent({ const { prefixCls, direction } = useConfigInject('avatar', props); const groupPrefixCls = computed(() => `${prefixCls.value}-group`); const [wrapSSR, hashId] = useStyle(prefixCls); - useProvideSize(props); + useProviderSize(computed(() => props.size)); return () => { const { maxPopoverPlacement = 'top', diff --git a/components/avatar/SizeContext.ts b/components/avatar/SizeContext.ts new file mode 100644 index 000000000..409b8adbd --- /dev/null +++ b/components/avatar/SizeContext.ts @@ -0,0 +1,17 @@ +import type { InjectionKey, Ref } from 'vue'; +import { computed, inject, ref, provide } from 'vue'; +import type { ScreenSizeMap } from '../_util/responsiveObserve'; +export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap; +const SizeContextKey: InjectionKey> = Symbol('SizeContextKey'); + +export const useInjectSize = () => { + return inject(SizeContextKey, ref('default' as AvatarSize)); +}; +export const useProviderSize = (size: Ref) => { + const parentSize = useInjectSize(); + provide( + SizeContextKey, + computed(() => size.value || parentSize.value), + ); + return size; +}; diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index bd39af8f4..e7660b0ad 100644 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -16,7 +16,7 @@ import { getTransitionProps, Transition } from '../_util/transition'; import scrollTo from '../_util/scrollTo'; import { withInstall, eventType } from '../_util/type'; import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { MouseEventHandler } from '../_util/EventInterface'; import useStyle from './style'; diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx index 74f9e638a..fe8e7c819 100644 --- a/components/badge/Badge.tsx +++ b/components/badge/Badge.tsx @@ -7,7 +7,7 @@ import { getTransitionProps, Transition } from '../_util/transition'; import type { ExtractPropTypes, CSSProperties, PropType } from 'vue'; import { defineComponent, computed, ref, watch } from 'vue'; import Ribbon from './Ribbon'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import isNumeric from '../_util/isNumeric'; import useStyle from './style'; import type { PresetColorKey } from '../theme/interface'; diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx index 103d315dc..d61e38035 100644 --- a/components/badge/Ribbon.tsx +++ b/components/badge/Ribbon.tsx @@ -5,7 +5,7 @@ import { isPresetColor } from '../_util/colors'; import type { CSSProperties, PropType, ExtractPropTypes } from 'vue'; import { defineComponent, computed } from 'vue'; import PropTypes from '../_util/vue-types'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const ribbonProps = () => ({ prefix: String, diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index 37c3b2c4d..cba1e29c8 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -3,7 +3,7 @@ import PropTypes from '../_util/vue-types'; import { cloneElement } from '../_util/vnode'; import type { ExtractPropTypes, CSSProperties, DefineComponent, HTMLAttributes } from 'vue'; import { defineComponent } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import SingleNumber from './SingleNumber'; import { filterEmpty } from '../_util/props-util'; diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index e7fa68bbb..b0f7899e6 100644 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -7,7 +7,7 @@ import type { BreadcrumbItemProps } from './BreadcrumbItem'; import BreadcrumbItem from './BreadcrumbItem'; import Menu from '../menu'; import type { VueNode } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useStyle from './style'; export interface Route { path: string; diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 9570257e1..312d87459 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -5,7 +5,7 @@ import { getPropsSlot } from '../_util/props-util'; import type { DropdownProps } from '../dropdown/dropdown'; import Dropdown from '../dropdown/dropdown'; import DownOutlined from '@ant-design/icons-vue/DownOutlined'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { MouseEventHandler } from '../_util/EventInterface'; import { eventType, objectType } from '../_util/type'; diff --git a/components/breadcrumb/BreadcrumbSeparator.tsx b/components/breadcrumb/BreadcrumbSeparator.tsx index 91e90732d..6f981dff4 100644 --- a/components/breadcrumb/BreadcrumbSeparator.tsx +++ b/components/breadcrumb/BreadcrumbSeparator.tsx @@ -1,7 +1,7 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent } from 'vue'; import { flattenChildren } from '../_util/props-util'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const breadcrumbSeparatorProps = () => ({ prefixCls: String, diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx index 95e47690e..0a4b3aa41 100644 --- a/components/button/button-group.tsx +++ b/components/button/button-group.tsx @@ -1,6 +1,6 @@ import { computed, defineComponent } from 'vue'; import { flattenChildren } from '../_util/props-util'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useToken } from '../theme/internal'; import type { ExtractPropTypes, PropType, ComputedRef } from 'vue'; import type { SizeType } from '../config-provider'; diff --git a/components/button/button.tsx b/components/button/button.tsx index 81cd2f7aa..a1e2e46ee 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -12,7 +12,7 @@ import { import Wave from '../_util/wave'; import buttonProps from './buttonTypes'; import { flattenChildren, initDefaultProps } from '../_util/props-util'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; import LoadingIcon from './LoadingIcon'; import useStyle from './style'; diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index 991911ecf..ad7b670b5 100644 --- a/components/calendar/generateCalendar.tsx +++ b/components/calendar/generateCalendar.tsx @@ -14,7 +14,7 @@ import CalendarHeader from './Header'; import type { VueNode } from '../_util/type'; import type { App } from 'vue'; import { computed, defineComponent, toRef } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; type InjectDefaultProps = Omit< diff --git a/components/card/Card.tsx b/components/card/Card.tsx index d3484716f..41f4fd385 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -7,7 +7,7 @@ import PropTypes from '../_util/vue-types'; import { flattenChildren, isEmptyElement, filterEmptyWithUndefined } from '../_util/props-util'; import type { SizeType } from '../config-provider'; import isPlainObject from 'lodash-es/isPlainObject'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; export interface CardTabListType { key: string; diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index 9780cf4a8..b6253c1bb 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -1,6 +1,6 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent, computed } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const cardGridProps = () => ({ prefixCls: String, diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx index 3778e3941..129fb635d 100644 --- a/components/card/Meta.tsx +++ b/components/card/Meta.tsx @@ -2,7 +2,7 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent } from 'vue'; import PropTypes from '../_util/vue-types'; import { getPropsSlot } from '../_util/props-util'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const cardMetaProps = () => ({ prefixCls: String, diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index 8417d5c54..77d96cc9d 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -5,7 +5,7 @@ import warning from '../_util/warning'; import classNames from '../_util/classNames'; import SlickCarousel from '../vc-slick'; import { withInstall } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export type SwipeDirection = 'left' | 'down' | 'right' | 'up' | string; diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 238ed90ef..cda779651 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -15,7 +15,7 @@ import { computed, defineComponent, ref, watchEffect } from 'vue'; import type { ExtractPropTypes, PropType } from 'vue'; import PropTypes from '../_util/vue-types'; import { initDefaultProps } from '../_util/props-util'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; import type { SizeType } from '../config-provider'; import devWarning from '../vc-util/devWarning'; @@ -227,7 +227,7 @@ const Cascader = defineComponent({ ...restProps } = props; // =================== No Found ==================== - const mergedNotFoundContent = notFoundContent || renderEmpty.value('Cascader'); + const mergedNotFoundContent = notFoundContent || renderEmpty('Cascader'); // ===================== Icon ====================== let mergedExpandIcon = expandIcon; diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index 0c208bdac..3626a5330 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -6,7 +6,7 @@ import { flattenChildren } from '../_util/props-util'; import warning from '../_util/warning'; import type { EventHandler } from '../_util/EventInterface'; import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { CheckboxChangeEvent, CheckboxProps } from './interface'; import { CheckboxGroupContextKey, checkboxProps } from './interface'; diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index d096fd8ce..d341f1fe2 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -1,7 +1,7 @@ import { computed, ref, watch, defineComponent, provide } from 'vue'; import Checkbox from './Checkbox'; import { useInjectFormItemContext } from '../form/FormItemContext'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { CheckboxOptionType } from './interface'; import { CheckboxGroupContextKey, checkboxGroupProps } from './interface'; diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 12159363b..123d6ccdc 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -13,7 +13,7 @@ import { computed, defineComponent, ref, watch } from 'vue'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; import firstNotUndefined from '../_util/firstNotUndefined'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { CollapsePanelProps } from './CollapsePanel'; import collapseMotion from '../_util/collapseMotion'; diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx index b799a38e3..58da6619b 100644 --- a/components/collapse/CollapsePanel.tsx +++ b/components/collapse/CollapsePanel.tsx @@ -6,7 +6,7 @@ import { defineComponent } from 'vue'; import Transition from '../_util/transition'; import classNames from '../_util/classNames'; import devWarning from '../vc-util/devWarning'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export { collapsePanelProps }; export type CollapsePanelProps = Partial>>; diff --git a/components/comment/index.tsx b/components/comment/index.tsx index 7858d4a25..29ef260af 100644 --- a/components/comment/index.tsx +++ b/components/comment/index.tsx @@ -4,7 +4,7 @@ import PropTypes from '../_util/vue-types'; import { flattenChildren } from '../_util/props-util'; import type { VueNode } from '../_util/type'; import { withInstall } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const commentProps = () => ({ actions: Array, /** The element to display as the comment author. */ diff --git a/components/config-provider/DisabledContext.ts b/components/config-provider/DisabledContext.ts new file mode 100644 index 000000000..a59ebaa6b --- /dev/null +++ b/components/config-provider/DisabledContext.ts @@ -0,0 +1,17 @@ +import type { InjectionKey, Ref } from 'vue'; +import { computed, inject, ref, provide } from 'vue'; + +export type DisabledType = boolean | undefined; +const DisabledContextKey: InjectionKey> = Symbol('DisabledContextKey'); + +export const useInjectDisabled = () => { + return inject(DisabledContextKey, ref(undefined)); +}; +export const useProviderDisabled = (disabled: Ref) => { + const parentDisabled = useInjectDisabled(); + provide( + DisabledContextKey, + computed(() => disabled.value ?? parentDisabled.value), + ); + return disabled; +}; diff --git a/components/config-provider/SizeContext.ts b/components/config-provider/SizeContext.ts new file mode 100644 index 000000000..2bf7329de --- /dev/null +++ b/components/config-provider/SizeContext.ts @@ -0,0 +1,16 @@ +import type { InjectionKey, Ref } from 'vue'; +import { computed, inject, ref, provide } from 'vue'; +export type SizeType = 'small' | 'middle' | 'large' | undefined; +const SizeContextKey: InjectionKey> = Symbol('SizeContextKey'); + +export const useInjectSize = () => { + return inject(SizeContextKey, ref(undefined)); +}; +export const useProviderSize = (size: Ref) => { + const parentSize = useInjectSize(); + provide( + SizeContextKey, + computed(() => size.value || parentSize.value), + ); + return size; +}; diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 46edac52d..431605eb8 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -1,10 +1,17 @@ -import type { ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue'; +import type { ComputedRef, ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue'; import { computed, inject, provide } from 'vue'; import type { ValidateMessages } from '../form/interface'; import type { RequiredMark } from '../form/Form'; import type { RenderEmptyHandler } from './renderEmpty'; import type { TransformCellTextProps } from '../table/interface'; import type { Locale } from '../locale-provider'; +import type { DerivativeFunc } from '../_util/cssinjs'; +import type { AliasToken, SeedToken } from '../theme/internal'; +import type { MapToken, OverrideToken } from '../theme/interface'; +import type { VueNode } from '../_util/type'; +import { objectType } from '../_util/type'; + +export const defaultIconPrefixCls = 'anticon'; type GlobalFormCOntextProps = { validateMessages?: Ref; @@ -42,39 +49,20 @@ export type SizeType = 'small' | 'middle' | 'large' | undefined; export type Direction = 'ltr' | 'rtl'; -export interface ConfigConsumerProps { - getTargetContainer?: () => HTMLElement; - getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement; - rootPrefixCls?: string; - getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string; - renderEmpty: RenderEmptyHandler; - transformCellText?: (tableProps: TransformCellTextProps) => any; - csp?: CSPConfig; - autoInsertSpaceInButton?: boolean; - input?: { - autocomplete?: string; - }; - locale?: Locale; - pageHeader?: { - ghost: boolean; - }; - componentSize?: SizeType; - direction?: 'ltr' | 'rtl'; - space?: { - size?: SizeType | number; - }; - virtual?: boolean; - dropdownMatchSelectWidth?: boolean | number; - form?: { - requiredMark?: RequiredMark; - colon?: boolean; - }; +export type MappingAlgorithm = DerivativeFunc; + +export interface ThemeConfig { + token?: Partial; + components?: OverrideToken; + algorithm?: MappingAlgorithm | MappingAlgorithm[]; + hashed?: boolean; + inherit?: boolean; } export const configProviderProps = () => ({ iconPrefixCls: String, getTargetContainer: { - type: Function as PropType<() => HTMLElement>, + type: Function as PropType<() => HTMLElement | Window>, }, getPopupContainer: { type: Function as PropType<(triggerNode?: HTMLElement) => HTMLElement>, @@ -89,46 +77,81 @@ export const configProviderProps = () => ({ transformCellText: { type: Function as PropType<(tableProps: TransformCellTextProps) => any>, }, - csp: { - type: Object as PropType, - default: undefined as CSPConfig, - }, - input: { - type: Object as PropType<{ autocomplete: string }>, - }, + csp: objectType(), + input: objectType<{ autocomplete?: string }>(), autoInsertSpaceInButton: { type: Boolean, default: undefined }, - locale: { - type: Object as PropType, - default: undefined as Locale, - }, - pageHeader: { - type: Object as PropType<{ ghost: boolean }>, - }, + locale: objectType(), + pageHeader: objectType<{ ghost?: boolean }>(), componentSize: { type: String as PropType, }, + componentDisabled: { type: Boolean, default: undefined }, direction: { type: String as PropType<'ltr' | 'rtl'>, }, - space: { - type: Object as PropType<{ size: SizeType | number }>, - }, + space: objectType<{ size?: SizeType | number }>(), virtual: { type: Boolean, default: undefined }, dropdownMatchSelectWidth: { type: [Number, Boolean], default: true }, - form: { - type: Object as PropType<{ - validateMessages?: ValidateMessages; - requiredMark?: RequiredMark; - colon?: boolean; - }>, - default: undefined as { - validateMessages?: ValidateMessages; - requiredMark?: RequiredMark; - colon?: boolean; - }, - }, - // internal use - notUpdateGlobalConfig: Boolean, + form: objectType<{ + validateMessages?: ValidateMessages; + requiredMark?: RequiredMark; + colon?: boolean; + }>(), + pagination: objectType<{ + showSizeChanger?: boolean; + }>(), + theme: objectType(), + select: objectType<{ + showSearch?: boolean; + }>(), }); export type ConfigProviderProps = Partial>>; + +export interface ConfigProviderInnerProps { + csp?: ComputedRef; + autoInsertSpaceInButton?: ComputedRef; + locale?: ComputedRef; + direction?: ComputedRef<'ltr' | 'rtl'>; + space?: ComputedRef<{ + size?: number | SizeType; + }>; + virtual?: ComputedRef; + dropdownMatchSelectWidth?: ComputedRef; + getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string; + iconPrefixCls: ComputedRef; + theme?: ComputedRef; + renderEmpty?: (name?: string) => VueNode; + getTargetContainer?: ComputedRef<() => HTMLElement | Window>; + getPopupContainer?: ComputedRef<(triggerNode?: HTMLElement) => HTMLElement>; + pageHeader?: ComputedRef<{ + ghost?: boolean; + }>; + input?: ComputedRef<{ + autocomplete?: string; + }>; + pagination?: ComputedRef<{ + showSizeChanger?: boolean; + }>; + form?: ComputedRef<{ + validateMessages?: ValidateMessages; + requiredMark?: RequiredMark; + colon?: boolean; + }>; + select?: ComputedRef<{ + showSearch?: boolean; + }>; + componentSize?: ComputedRef; + componentDisabled?: ComputedRef; + transformCellText?: ComputedRef<(tableProps: TransformCellTextProps) => any>; +} + +export const configProviderKey: InjectionKey = Symbol('configProvider'); + +export const defaultConfigProvider: ConfigProviderInnerProps = { + getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => { + if (customizePrefixCls) return customizePrefixCls; + return suffixCls ? `ant-${suffixCls}` : 'ant'; + }, + iconPrefixCls: computed(() => defaultIconPrefixCls), +}; diff --git a/components/config-provider/cssVariables.tsx b/components/config-provider/cssVariables.ts similarity index 90% rename from components/config-provider/cssVariables.tsx rename to components/config-provider/cssVariables.ts index 1d2c736b4..505380ae3 100644 --- a/components/config-provider/cssVariables.tsx +++ b/components/config-provider/cssVariables.ts @@ -5,17 +5,14 @@ import { generate } from '@ant-design/colors'; import type { Theme } from './context'; import { updateCSS } from '../vc-util/Dom/dynamicCSS'; import canUseDom from '../_util/canUseDom'; -import devWarning from '../vc-util/devWarning'; +import warning from '../_util/warning'; const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`; export function getStyle(globalPrefixCls: string, theme: Theme) { const variables: Record = {}; - const formatColor = ( - color: TinyColor, - updater?: (cloneColor: TinyColor) => TinyColor | undefined, - ) => { + const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => { let clone = color.clone(); clone = updater?.(clone) || clone; return clone.toRgbString(); @@ -30,8 +27,8 @@ export function getStyle(globalPrefixCls: string, theme: Theme) { 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[1]; - variables[`${type}-color-deprecated-border`] = colorPalettes[3]; + variables[`${type}-color-deprecated-bg`] = colorPalettes[0]; + variables[`${type}-color-deprecated-border`] = colorPalettes[2]; }; // ================ Primary Color ================ @@ -101,6 +98,6 @@ export function registerTheme(globalPrefixCls: string, theme: Theme) { if (canUseDom()) { updateCSS(style, `${dynamicStyleMark}-dynamic-theme`); } else { - devWarning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.'); + warning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.'); } } diff --git a/components/config-provider/hooks/useConfigInject.ts b/components/config-provider/hooks/useConfigInject.ts new file mode 100644 index 000000000..fa2435438 --- /dev/null +++ b/components/config-provider/hooks/useConfigInject.ts @@ -0,0 +1,56 @@ +import { computed, inject } from 'vue'; +import { defaultConfigProvider, configProviderKey } from '../context'; +export default (name: string, props: Record) => { + const configProvider = inject(configProviderKey, { + ...defaultConfigProvider, + renderEmpty: () => null, + }); + 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 = configProvider.getTargetContainer; + const getPopupContainer = configProvider.getPopupContainer; + + const dropdownMatchSelectWidth = computed( + () => 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 || configProvider.componentSize.value); + const autocomplete = computed( + () => props.autocomplete ?? configProvider.input.value?.autocomplete, + ); + const disabled = computed(() => props.disabled || configProvider.componentDisabled.value); + const csp = computed(() => props.csp ?? configProvider.csp); + return { + configProvider, + prefixCls, + direction, + size, + getTargetContainer, + getPopupContainer, + space, + pageHeader, + form, + autoInsertSpaceInButton, + renderEmpty, + virtual, + dropdownMatchSelectWidth, + rootPrefixCls, + getPrefixCls: configProvider.getPrefixCls, + autocomplete, + csp, + iconPrefixCls, + disabled, + }; +}; diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts new file mode 100644 index 000000000..0ed451193 --- /dev/null +++ b/components/config-provider/hooks/useTheme.ts @@ -0,0 +1,43 @@ +import type { ThemeConfig } from '../context'; +import { defaultConfig } from '../../theme/internal'; +import type { Ref } from 'vue'; +import { computed } from 'vue'; + +export default function useTheme(theme?: Ref, parentTheme?: Ref) { + const themeConfig = computed(() => theme?.value || {}); + const parentThemeConfig = computed(() => + 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; +} diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index ddb3ea1a6..000291684 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -107,3 +107,7 @@ When you config `getPopupContainer` to parentNode globally, Modal will throw err ``` + +#### 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. diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 8e6b0a585..a98e4f4db 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -1,5 +1,5 @@ -import type { UnwrapRef, App, Plugin, WatchStopHandle } from 'vue'; -import { computed, reactive, provide, defineComponent, watch, watchEffect } from 'vue'; +import type { App, Plugin, WatchStopHandle } from 'vue'; +import { inject, computed, reactive, provide, defineComponent, watchEffect } from 'vue'; import defaultRenderEmpty from './renderEmpty'; import type { RenderEmptyHandler } from './renderEmpty'; import type { Locale } from '../locale-provider'; @@ -13,9 +13,18 @@ import notification from '../notification'; import { registerTheme } from './cssVariables'; import defaultLocale from '../locale/default'; import type { ValidateMessages } from '../form/interface'; - -import type { ConfigProviderProps, Theme } from './context'; -import { configProviderProps, useProvideGlobalForm } from './context'; +import useStyle from './style'; +import useTheme from './hooks/useTheme'; +import type { ConfigProviderInnerProps, ConfigProviderProps, Theme } from './context'; +import { + defaultConfigProvider, + configProviderKey, + configProviderProps, + useProvideGlobalForm, + defaultIconPrefixCls, +} from './context'; +import { useProviderSize } from './SizeContext'; +import { useProviderDisabled } from './DisabledContext'; export type { ConfigProviderProps, @@ -26,10 +35,14 @@ export type { DirectionType, } from './context'; export const defaultPrefixCls = 'ant'; +export { defaultIconPrefixCls }; function getGlobalPrefixCls() { return globalConfigForApi.prefixCls || defaultPrefixCls; } -const globalConfigByCom = reactive({}); + +function getGlobalIconPrefixCls() { + return globalConfigForApi.iconPrefixCls || defaultIconPrefixCls; +} const globalConfigBySet = reactive({}); // 权重最大 export const globalConfigForApi = reactive< ConfigProviderProps & { @@ -37,31 +50,34 @@ export const globalConfigForApi = reactive< } >({}); +export const configConsumerProps = [ + 'getTargetContainer', + 'getPopupContainer', + 'rootPrefixCls', + 'getPrefixCls', + 'renderEmpty', + 'csp', + 'autoInsertSpaceInButton', + 'locale', + 'pageHeader', +]; + watchEffect(() => { - Object.assign(globalConfigForApi, globalConfigByCom, globalConfigBySet); + 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 = (rootPrefixCls?: string, customizePrefixCls?: string) => { - // Customize rootPrefixCls is first priority - if (rootPrefixCls) { - return rootPrefixCls; - } - + globalConfigForApi.getRootPrefixCls = () => { // 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(); }; @@ -69,6 +85,7 @@ watchEffect(() => { type GlobalConfigProviderProps = { prefixCls?: MaybeRef; + iconPrefixCls?: MaybeRef; getPopupContainer?: ConfigProviderProps['getPopupContainer']; }; @@ -91,22 +108,13 @@ export const globalConfig = () => ({ if (customizePrefixCls) return customizePrefixCls; return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls(); }, - getRootPrefixCls: (rootPrefixCls?: string, customizePrefixCls?: string) => { - // Customize rootPrefixCls is first priority - if (rootPrefixCls) { - return rootPrefixCls; - } - + getIconPrefixCls: getGlobalIconPrefixCls, + getRootPrefixCls: () => { // 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(); }, @@ -118,55 +126,99 @@ const ConfigProvider = defineComponent({ inheritAttrs: false, props: configProviderProps(), setup(props, { slots }) { + const parentContext = inject(configProviderKey, defaultConfigProvider); const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { const { prefixCls = 'ant' } = props; if (customizePrefixCls) return customizePrefixCls; - return suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls; + 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 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, + const autoInsertSpaceInButton = computed( + () => props.autoInsertSpaceInButton ?? parentContext.autoInsertSpaceInButton?.value, + ); + const locale = computed(() => props.locale || parentContext.locale?.value); + 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 configProvider: ConfigProviderInnerProps = { + csp, + autoInsertSpaceInButton, + locale, + direction, + space, + virtual, + dropdownMatchSelectWidth, + getPrefixCls, + iconPrefixCls, + theme: mergedTheme, renderEmpty: renderEmptyComponent, - }); - Object.keys(props).forEach(key => { - watch( - () => props[key], - () => { - configProvider[key] = props[key]; - }, - ); - }); - if (!props.notUpdateGlobalConfig) { - Object.assign(globalConfigByCom, configProvider); - watch(configProvider, () => { - Object.assign(globalConfigByCom, configProvider); - }); - } + getTargetContainer, + getPopupContainer, + pageHeader, + input, + pagination, + form, + select, + componentSize, + componentDisabled, + transformCellText: computed(() => props.transformCellText), + }; const validateMessagesRef = computed(() => { // Additional Form provider let validateMessages: ValidateMessages = {}; - if (props.locale) { + if (locale.value) { validateMessages = - props.locale.Form?.defaultValidateMessages || + locale.value.Form?.defaultValidateMessages || defaultLocale.Form?.defaultValidateMessages || {}; } @@ -175,24 +227,27 @@ const ConfigProvider = defineComponent({ } return validateMessages; }); + + provide(configProviderKey, configProvider); useProvideGlobalForm({ validateMessages: validateMessagesRef }); - provide('configProvider', configProvider); + useProviderSize(componentSize); + useProviderDisabled(componentDisabled); const renderProvider = (legacyLocale: Locale) => { return ( - - {slots.default?.()} + + {shouldWrapSSR.value ? wrapSSR(slots.default?.()) : slots.default?.()} ); }; watchEffect(() => { - if (props.direction) { + if (direction.value) { message.config({ - rtl: props.direction === 'rtl', + rtl: direction.value === 'rtl', }); notification.config({ - rtl: props.direction === 'rtl', + rtl: direction.value === 'rtl', }); } }); @@ -202,18 +257,7 @@ const ConfigProvider = defineComponent({ ); }, }); -export const defaultIconPrefixCls = 'anticon'; -export const defaultConfigProvider: UnwrapRef = reactive({ - getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => { - if (customizePrefixCls) return customizePrefixCls; - return suffixCls ? `ant-${suffixCls}` : 'ant'; - }, - renderEmpty: defaultRenderEmpty, - direction: 'ltr', - iconPrefixCls: defaultIconPrefixCls, -}); -ConfigProvider.config = setGlobalConfig; ConfigProvider.install = function (app: App) { app.component(ConfigProvider.name, ConfigProvider); }; diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 5515ab00c..1a7e3f747 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -108,3 +108,7 @@ ConfigProvider.config({ ``` + +#### 为什么 message.info、notification.open 或 Modal.confirm 等方法内的 VueNode 无法继承 ConfigProvider 的属性？比如 `prefixCls` 和 `theme`。 + +静态方法是使用 Vue.render 重新渲染一个 Vue 根节点上，和主应用的 Vue 节点是脱离的。 diff --git a/components/config-provider/renderEmpty.tsx b/components/config-provider/renderEmpty.tsx index d8c1a5a5b..378bc4313 100644 --- a/components/config-provider/renderEmpty.tsx +++ b/components/config-provider/renderEmpty.tsx @@ -1,6 +1,6 @@ import Empty from '../empty'; import type { VueNode } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from './hooks/useConfigInject'; export interface RenderEmptyProps { componentName?: string; @@ -13,14 +13,12 @@ const RenderEmpty = (props: RenderEmptyProps) => { case 'Table': case 'List': return ; - case 'Select': case 'TreeSelect': case 'Cascader': case 'Transfer': case 'Mentions': return ; - default: return ; } diff --git a/components/config-provider/style/index.less b/components/config-provider/style/index.less deleted file mode 100644 index eaf3a7d1e..000000000 --- a/components/config-provider/style/index.less +++ /dev/null @@ -1,2 +0,0 @@ -// placeholder -@import '../../style/themes/index'; diff --git a/components/config-provider/style/index.ts b/components/config-provider/style/index.ts new file mode 100644 index 000000000..4fe8c6770 --- /dev/null +++ b/components/config-provider/style/index.ts @@ -0,0 +1,29 @@ +import { useStyleRegister } from '../../_util/cssinjs'; +import { resetIcon } from '../../_style'; +import { useToken } from '../../theme/internal'; +import { computed, Ref } from 'vue'; + +const useStyle = (iconPrefixCls: Ref) => { + const [theme, token] = useToken(); + // Generate style for icons + return useStyleRegister( + computed(() => ({ + theme: theme.value, + token: token.value, + hashId: '', + path: ['ant-design-icons', iconPrefixCls.value], + })), + () => [ + { + [`.${iconPrefixCls.value}`]: { + ...resetIcon(), + [`.${iconPrefixCls.value} .${iconPrefixCls.value}-icon`]: { + display: 'block', + }, + }, + }, + ], + ); +}; + +export default useStyle; diff --git a/components/config-provider/style/index.tsx b/components/config-provider/style/index.tsx deleted file mode 100644 index d74e52ee9..000000000 --- a/components/config-provider/style/index.tsx +++ /dev/null @@ -1 +0,0 @@ -import './index.less'; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index bd651be88..22b83d0e3 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -9,7 +9,7 @@ import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver'; import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util'; import { getTimeProps, Components } from '.'; import { computed, defineComponent, ref } from 'vue'; -import useConfigInject from '../../_util/hooks/useConfigInject'; +import useConfigInject from '../../config-provider/hooks/useConfigInject'; import classNames from '../../_util/classNames'; import type { CommonProps, RangePickerProps } from './props'; import { commonProps, rangePickerProps } from './props'; diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index d4ce08f76..ed321f376 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -9,7 +9,7 @@ import { getPlaceholder, transPlacement2DropdownAlign } from '../util'; import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver'; import { getTimeProps, Components } from '.'; import { computed, defineComponent, ref } from 'vue'; -import useConfigInject from '../../_util/hooks/useConfigInject'; +import useConfigInject from '../../config-provider/hooks/useConfigInject'; import classNames from '../../_util/classNames'; import type { CommonProps, DatePickerProps } from './props'; import { commonProps, datePickerProps } from './props'; diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 956063b6f..933925cda 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -25,7 +25,7 @@ import Row from './Row'; import PropTypes from '../_util/vue-types'; import { cloneElement } from '../_util/vnode'; import { flattenChildren } from '../_util/props-util'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const DescriptionsItemProps = { prefixCls: String, diff --git a/components/divider/index.tsx b/components/divider/index.tsx index 0c6f74a20..e40f7fda7 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -2,7 +2,7 @@ import { flattenChildren } from '../_util/props-util'; import type { ExtractPropTypes, PropType } from 'vue'; import { computed, defineComponent } from 'vue'; import { withInstall } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const dividerProps = () => ({ prefixCls: String, diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 4264b30d3..ca4ccd942 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -15,7 +15,7 @@ import classnames from '../_util/classNames'; import VcDrawer from '../vc-drawer'; import PropTypes from '../_util/vue-types'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { tuple, withInstall } from '../_util/type'; import omit from '../_util/omit'; import devWarning from '../vc-util/devWarning'; diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx index 88268ce94..c1b5927fa 100644 --- a/components/dropdown/dropdown-button.tsx +++ b/components/dropdown/dropdown-button.tsx @@ -6,7 +6,7 @@ import Dropdown from './dropdown'; import { initDefaultProps } from '../_util/props-util'; import { dropdownButtonProps } from './props'; import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; const ButtonGroup = Button.Group; export type DropdownButtonProps = Partial>>; diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index fbe5b501f..19ef4ae07 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -7,7 +7,7 @@ import classNames from '../_util/classNames'; import { isValidElement, initDefaultProps } from '../_util/props-util'; import { dropdownProps } from './props'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; import omit from '../_util/omit'; import getPlacements from '../tooltip/placements'; diff --git a/components/empty/empty.tsx b/components/empty/empty.tsx index 4d189dbc1..a4853758b 100644 --- a/components/empty/empty.tsx +++ b/components/empty/empty.tsx @@ -1,4 +1,4 @@ -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; const Empty = () => { const { getPrefixCls } = useConfigInject('empty', {}); diff --git a/components/empty/index.tsx b/components/empty/index.tsx index 89a1e8f65..4565a7b85 100644 --- a/components/empty/index.tsx +++ b/components/empty/index.tsx @@ -7,7 +7,7 @@ import { filterEmpty } from '../_util/props-util'; import PropTypes from '../_util/vue-types'; import type { VueNode } from '../_util/type'; import { withInstall } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; const defaultEmptyImg = ; const simpleEmptyImg = ; diff --git a/components/empty/simple.tsx b/components/empty/simple.tsx index c03f1d13b..2be63b3a0 100644 --- a/components/empty/simple.tsx +++ b/components/empty/simple.tsx @@ -1,4 +1,4 @@ -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; const Simple = () => { const { getPrefixCls } = useConfigInject('empty', {}); diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx index 8863e7d68..202cd0ee7 100644 --- a/components/form/ErrorList.tsx +++ b/components/form/ErrorList.tsx @@ -2,7 +2,7 @@ import { useInjectFormItemPrefix } from './context'; import type { VueNode } from '../_util/type'; import { computed, defineComponent, ref, watch } from 'vue'; import { getTransitionGroupProps, TransitionGroup } from '../_util/transition'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import collapseMotion from '../_util/collapseMotion'; export interface ErrorListProps { diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 5c8221fc9..5576d3ebb 100755 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -25,8 +25,7 @@ import type { ValidateMessages, Rule, } from './interface'; -import { useInjectSize } from '../_util/hooks/useSize'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useProvideForm } from './context'; import type { SizeType } from '../config-provider'; import useForm from './useForm'; @@ -111,8 +110,7 @@ const Form = defineComponent({ useForm, // emits: ['finishFailed', 'submit', 'finish', 'validate'], setup(props, { emit, slots, expose, attrs }) { - const size = useInjectSize(props); - const { prefixCls, direction, form: contextForm } = useConfigInject('form', props); + const { prefixCls, direction, form: contextForm, size } = useConfigInject('form', props); const requiredMark = computed(() => props.requiredMark === '' || props.requiredMark); const mergedRequiredMark = computed(() => { if (requiredMark.value !== undefined) { diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 0484b37a0..f5f956ae8 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -33,7 +33,7 @@ import { warning } from '../vc-util/warning'; import find from 'lodash-es/find'; import { tuple } from '../_util/type'; import type { InternalNamePath, Rule, RuleError, RuleObject, ValidateOptions } from './interface'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useInjectForm } from './context'; import FormItemLabel from './FormItemLabel'; import FormItemInput from './FormItemInput'; diff --git a/components/grid/Col.tsx b/components/grid/Col.tsx index 0009b0d44..1cc566a1f 100644 --- a/components/grid/Col.tsx +++ b/components/grid/Col.tsx @@ -1,7 +1,7 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; import { defineComponent, computed } from 'vue'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useInjectRow } from './context'; type ColSpanType = number | string; diff --git a/components/grid/Row.tsx b/components/grid/Row.tsx index 1ad781cca..0c16e9ed1 100644 --- a/components/grid/Row.tsx +++ b/components/grid/Row.tsx @@ -4,7 +4,7 @@ import classNames from '../_util/classNames'; import { tuple } from '../_util/type'; import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve'; import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; import useProvideRow from './context'; diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx index 9fad82b1f..13476120e 100644 --- a/components/image/PreviewGroup.tsx +++ b/components/image/PreviewGroup.tsx @@ -1,6 +1,6 @@ import PreviewGroup from '../vc-image/src/PreviewGroup'; import { computed, defineComponent } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import RotateLeftOutlined from '@ant-design/icons-vue/RotateLeftOutlined'; import RotateRightOutlined from '@ant-design/icons-vue/RotateRightOutlined'; diff --git a/components/image/index.tsx b/components/image/index.tsx index 99bde61a2..35b9d2745 100644 --- a/components/image/index.tsx +++ b/components/image/index.tsx @@ -3,7 +3,7 @@ import { defineComponent, computed } from 'vue'; import ImageInternal from '../vc-image'; import { imageProps } from '../vc-image/src/Image'; import defaultLocale from '../locale/en_US'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import PreviewGroup, { icons } from './PreviewGroup'; import EyeOutlined from '@ant-design/icons-vue/EyeOutlined'; import { getTransitionName } from '../_util/transition'; @@ -40,7 +40,7 @@ const Image = defineComponent({ }); return () => { - const imageLocale = configProvider.locale?.Image || defaultLocale.Image; + const imageLocale = configProvider.locale.value?.Image || defaultLocale.Image; const defaultPreviewMask = () => (
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 460d3cedc..351708743 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -10,7 +10,7 @@ import { NoFormStatus, useInjectFormItemContext, } from '../form/FormItemContext'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { cloneElement } from '../_util/vnode'; import omit from '../_util/omit'; import PropTypes from '../_util/vue-types'; diff --git a/components/input/Group.tsx b/components/input/Group.tsx index 3b4db3fd4..437795681 100644 --- a/components/input/Group.tsx +++ b/components/input/Group.tsx @@ -3,7 +3,7 @@ import { computed, defineComponent } from 'vue'; import type { SizeType } from '../config-provider'; import { FormItemInputContext } from '../form/FormItemContext'; import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export default defineComponent({ compatConfig: { MODE: 3 }, diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 72e61a29c..72b9a790b 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -5,7 +5,7 @@ import { NoFormStatus, useInjectFormItemContext, } from '../form/FormItemContext'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; import type { InputFocusOptions } from '../vc-input/utils/commonUtils'; import { hasPrefixSuffix } from '../vc-input/utils/commonUtils'; diff --git a/components/input/Password.tsx b/components/input/Password.tsx index dbda6b96f..1f4c66a20 100644 --- a/components/input/Password.tsx +++ b/components/input/Password.tsx @@ -7,7 +7,7 @@ import EyeInvisibleOutlined from '@ant-design/icons-vue/EyeInvisibleOutlined'; import type { InputProps } from './inputProps'; import inputProps from './inputProps'; import { computed, defineComponent, ref } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import omit from '../_util/omit'; const ActionMap = { diff --git a/components/input/Search.tsx b/components/input/Search.tsx index 6366049e8..0399c6de7 100644 --- a/components/input/Search.tsx +++ b/components/input/Search.tsx @@ -12,7 +12,7 @@ import type { CompositionEventHandler, MouseEventHandler, } from '../_util/EventInterface'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import omit from '../_util/omit'; import isMobile from '../_util/isMobile'; import inputProps from './inputProps'; diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index 7a7c73d0a..0ddc73c57 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -16,7 +16,7 @@ import { fixControlledValue, resolveOnChange, triggerFocus } from '../vc-input/u import classNames from '../_util/classNames'; import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'; import type { FocusEventHandler } from '../_util/EventInterface'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import omit from '../_util/omit'; import type { VueNode } from '../_util/type'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx index cf3de3db3..d9a937f5d 100644 --- a/components/layout/Sider.tsx +++ b/components/layout/Sider.tsx @@ -8,7 +8,7 @@ import isNumeric from '../_util/isNumeric'; import BarsOutlined from '@ant-design/icons-vue/BarsOutlined'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { SiderCollapsedKey, SiderHookProviderKey } from './injectionKey'; const dimensionMaxMap = { diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx index c10023c3e..82d7e2129 100644 --- a/components/layout/layout.tsx +++ b/components/layout/layout.tsx @@ -1,6 +1,6 @@ import type { ExtractPropTypes, HTMLAttributes } from 'vue'; import { computed, createVNode, defineComponent, provide, ref } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { SiderHookProviderKey } from './injectionKey'; export const basicProps = () => ({ diff --git a/components/list/Item.tsx b/components/list/Item.tsx index 51bc83e5e..a89875327 100644 --- a/components/list/Item.tsx +++ b/components/list/Item.tsx @@ -6,7 +6,7 @@ import { cloneElement } from '../_util/vnode'; import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; import { defineComponent, inject, ref } from 'vue'; import ItemMeta from './ItemMeta'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { ListContextKey } from './contextKey'; import type { ListGridType } from '.'; diff --git a/components/list/ItemMeta.tsx b/components/list/ItemMeta.tsx index 666043425..31cad5627 100644 --- a/components/list/ItemMeta.tsx +++ b/components/list/ItemMeta.tsx @@ -1,6 +1,6 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import PropTypes from '../_util/vue-types'; export const listItemMetaProps = () => ({ diff --git a/components/list/index.tsx b/components/list/index.tsx index 530d536dc..b6ca7ba71 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -13,7 +13,7 @@ import { flattenChildren } from '../_util/props-util'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import type { Key } from '../_util/type'; import ItemMeta from './ItemMeta'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useBreakpoint from '../_util/hooks/useBreakpoint'; import type { Breakpoint } from '../_util/responsiveObserve'; import { responsiveArray } from '../_util/responsiveObserve'; @@ -291,7 +291,7 @@ const List = defineComponent({
    {items}
); } else if (!children.length && !isLoading.value) { - childrenContent = renderEmptyFunc(renderEmpty.value); + childrenContent = renderEmptyFunc(renderEmpty); } const paginationPosition = paginationProps.value.position || 'bottom'; diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx index d36b31722..b68846544 100644 --- a/components/mentions/index.tsx +++ b/components/mentions/index.tsx @@ -4,7 +4,7 @@ import classNames from '../_util/classNames'; import PropTypes from '../_util/vue-types'; import VcMentions, { Option } from '../vc-mentions'; import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { flattenChildren, getOptionProps } from '../_util/props-util'; import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'; import omit from '../_util/omit'; @@ -143,7 +143,7 @@ const Mentions = defineComponent({ if (slots.notFoundContent) { return slots.notFoundContent(); } - return renderEmpty.value('Select'); + return renderEmpty('Select'); }; const getOptions = () => { diff --git a/components/menu/src/Divider.tsx b/components/menu/src/Divider.tsx index 40ede4f2d..4aac7c3e5 100644 --- a/components/menu/src/Divider.tsx +++ b/components/menu/src/Divider.tsx @@ -1,4 +1,4 @@ -import useConfigInject from '../../_util/hooks/useConfigInject'; +import useConfigInject from '../../config-provider/hooks/useConfigInject'; import type { ExtractPropTypes } from 'vue'; import { computed, defineComponent } from 'vue'; diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx index 2c861998e..e50d28b18 100644 --- a/components/menu/src/Menu.tsx +++ b/components/menu/src/Menu.tsx @@ -15,7 +15,7 @@ import { import shallowEqual from '../../_util/shallowequal'; import type { StoreMenuInfo } from './hooks/useMenuContext'; import useProvideMenu, { MenuContextProvider, useProvideFirstLevel } from './hooks/useMenuContext'; -import useConfigInject from '../../_util/hooks/useConfigInject'; +import useConfigInject from '../../config-provider/hooks/useConfigInject'; import type { MenuTheme, MenuMode, diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index b13b7edb6..99e483022 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -13,7 +13,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps'; import type { Direction } from '../config-provider'; import type { VueNode } from '../_util/type'; import { canUseDocElement } from '../_util/styleChecker'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { getTransitionName } from '../_util/transition'; let mousePosition: { x: number; y: number } | null = null; diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx index 8781a070b..78a761d23 100644 --- a/components/modal/confirm.tsx +++ b/components/modal/confirm.tsx @@ -77,7 +77,7 @@ const confirm = (config: ModalFuncProps) => { const rootPrefixCls = global.prefixCls; const prefixCls = p.prefixCls || `${rootPrefixCls}-modal`; return ( - + ); diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index c0b66df0b..24bb676e2 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -9,7 +9,7 @@ import Avatar from '../avatar'; import TransButton from '../_util/transButton'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import { withInstall } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; import ResizeObserver from '../vc-resize-observer'; import useDestroyed from '../_util/hooks/useDestroyed'; diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 8d901bd7d..763a9c51c 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -9,7 +9,7 @@ import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'; import VcPagination from '../vc-pagination'; import enUS from '../vc-pagination/locale/en_US'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useBreakpoint from '../_util/hooks/useBreakpoint'; export const paginationProps = () => ({ diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index 6bbe831f5..610ba9e31 100644 --- a/components/popconfirm/index.tsx +++ b/components/popconfirm/index.tsx @@ -14,7 +14,7 @@ import { withInstall } from '../_util/type'; import useMergedState from '../_util/hooks/useMergedState'; import devWarning from '../vc-util/devWarning'; import KeyCode from '../_util/KeyCode'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; import { getTransitionName } from '../_util/transition'; import { cloneVNodes } from '../_util/vnode'; diff --git a/components/popover/index.tsx b/components/popover/index.tsx index 4cea05bc9..a47879a01 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -5,7 +5,7 @@ import abstractTooltipProps from '../tooltip/abstractTooltipProps'; import PropTypes from '../_util/vue-types'; import { filterEmpty, initDefaultProps } from '../_util/props-util'; import { withInstall } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import omit from '../_util/omit'; import { getTransitionName } from '../_util/transition'; import { tooltipDefaultProps } from '../tooltip/Tooltip'; diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 335c3edeb..e8fdd7aa4 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -8,7 +8,7 @@ import Line from './Line'; import Circle from './Circle'; import Steps from './Steps'; import { getSuccessPercent, validProgress } from './utils'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; import { progressProps, progressStatuses } from './props'; import type { VueNode } from '../_util/type'; diff --git a/components/radio/Group.tsx b/components/radio/Group.tsx index de4233c9f..dd7651322 100644 --- a/components/radio/Group.tsx +++ b/components/radio/Group.tsx @@ -3,7 +3,7 @@ import type { PropType, ExtractPropTypes } from 'vue'; import classNames from '../_util/classNames'; import PropTypes from '../_util/vue-types'; import Radio from './Radio'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { tuple } from '../_util/type'; import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface'; import { useInjectFormItemContext } from '../form/FormItemContext'; diff --git a/components/radio/Radio.tsx b/components/radio/Radio.tsx index ec52d0dba..07fa0b0de 100644 --- a/components/radio/Radio.tsx +++ b/components/radio/Radio.tsx @@ -3,7 +3,7 @@ import { computed, defineComponent, ref } from 'vue'; import PropTypes from '../_util/vue-types'; import VcCheckbox from '../vc-checkbox/Checkbox'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { RadioChangeEvent } from './interface'; import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'; import omit from '../_util/omit'; diff --git a/components/radio/RadioButton.tsx b/components/radio/RadioButton.tsx index c4039f93f..cfe9687da 100644 --- a/components/radio/RadioButton.tsx +++ b/components/radio/RadioButton.tsx @@ -1,6 +1,6 @@ import { defineComponent } from 'vue'; import Radio, { radioProps } from './Radio'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useProvideRadioOptionTypeContext } from './context'; export default defineComponent({ diff --git a/components/rate/index.tsx b/components/rate/index.tsx index d2bb8fe10..ac3a5af12 100644 --- a/components/rate/index.tsx +++ b/components/rate/index.tsx @@ -8,7 +8,7 @@ import PropTypes from '../_util/vue-types'; import KeyCode from '../_util/KeyCode'; import StarFilled from '@ant-design/icons-vue/StarFilled'; import Tooltip from '../tooltip'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import Star from './Star'; import useRefs from '../_util/hooks/useRefs'; diff --git a/components/result/index.tsx b/components/result/index.tsx index b7a0c4cf2..6783ad561 100644 --- a/components/result/index.tsx +++ b/components/result/index.tsx @@ -8,7 +8,7 @@ import WarningFilled from '@ant-design/icons-vue/WarningFilled'; import noFound from './noFound'; import serverError from './serverError'; import unauthorized from './unauthorized'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; export const IconMap = { diff --git a/components/select/index.tsx b/components/select/index.tsx index e591770ab..677047698 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -7,7 +7,7 @@ import type { BaseOptionType, DefaultOptionType } from '../vc-select/Select'; import type { OptionProps } from '../vc-select/Option'; import getIcons from './utils/iconUtil'; import PropTypes from '../_util/vue-types'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import omit from '../_util/omit'; import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'; import type { SelectCommonPlacement } from '../_util/transition'; @@ -114,10 +114,15 @@ const Select = defineComponent({ return mode; }); - const { prefixCls, direction, configProvider, size, getPrefixCls } = useConfigInject( - 'select', - props, - ); + const { + prefixCls, + direction, + configProvider, + renderEmpty, + size, + getPrefixCls, + getPopupContainer, + } = useConfigInject('select', props); const rootPrefixCls = computed(() => getPrefixCls()); // ===================== Placement ===================== const placement = computed(() => { @@ -173,7 +178,6 @@ const Select = defineComponent({ notFoundContent, listHeight = 256, listItemHeight = 24, - getPopupContainer, dropdownClassName, virtual, dropdownMatchSelectWidth, @@ -182,7 +186,7 @@ const Select = defineComponent({ showArrow, } = props; const { hasFeedback, feedbackIcon } = formItemInputContext; - const { renderEmpty, getPopupContainer: getContextPopupContainer } = configProvider; + const {} = configProvider; // ===================== Empty ===================== let mergedNotFound: any; @@ -242,7 +246,7 @@ const Select = defineComponent({ clearIcon={clearIcon} notFoundContent={mergedNotFound} class={[mergedClassName.value, attrs.class]} - getPopupContainer={getPopupContainer || getContextPopupContainer} + getPopupContainer={getPopupContainer.value} dropdownClassName={rcSelectRtlDropdownClassName} onChange={triggerChange} onBlur={handleBlur} diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx index e8610b970..4303494aa 100644 --- a/components/skeleton/Avatar.tsx +++ b/components/skeleton/Avatar.tsx @@ -2,7 +2,7 @@ import type { ExtractPropTypes, PropType } from 'vue'; import { computed, defineComponent } from 'vue'; import classNames from '../_util/classNames'; import initDefaultProps from '../_util/props-util/initDefaultProps'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import Element, { skeletonElementProps } from './Element'; export const avatarProps = () => { diff --git a/components/skeleton/Button.tsx b/components/skeleton/Button.tsx index 2db3ae6d2..40a28b832 100644 --- a/components/skeleton/Button.tsx +++ b/components/skeleton/Button.tsx @@ -1,7 +1,7 @@ import type { ExtractPropTypes, PropType } from 'vue'; import { computed, defineComponent } from 'vue'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { initDefaultProps } from '../_util/props-util'; import Element, { skeletonElementProps } from './Element'; diff --git a/components/skeleton/Image.tsx b/components/skeleton/Image.tsx index 29820acca..bf068d065 100644 --- a/components/skeleton/Image.tsx +++ b/components/skeleton/Image.tsx @@ -1,6 +1,6 @@ import { computed, defineComponent } from 'vue'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import omit from '../_util/omit'; import type { SkeletonElementProps } from './Element'; import { skeletonElementProps } from './Element'; diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx index ef6081986..1e1f7ccef 100644 --- a/components/skeleton/Input.tsx +++ b/components/skeleton/Input.tsx @@ -1,7 +1,7 @@ import type { PropType } from 'vue'; import { computed, defineComponent } from 'vue'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { SkeletonElementProps } from './Element'; import Element, { skeletonElementProps } from './Element'; import omit from '../_util/omit'; diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx index 35c7b9078..022e1c348 100644 --- a/components/skeleton/Skeleton.tsx +++ b/components/skeleton/Skeleton.tsx @@ -7,7 +7,7 @@ import type { SkeletonTitleProps } from './Title'; import Title from './Title'; import type { SkeletonParagraphProps } from './Paragraph'; import Paragraph from './Paragraph'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import Element from './Element'; /* This only for skeleton internal. */ diff --git a/components/slider/index.tsx b/components/slider/index.tsx index b1bc32d1e..5be1c8e2b 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -6,7 +6,7 @@ import VcHandle from '../vc-slider/src/Handle'; import type { VueNode } from '../_util/type'; import { withInstall } from '../_util/type'; import type { TooltipPlacement } from '../tooltip/Tooltip'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import SliderTooltip from './SliderTooltip'; import classNames from '../_util/classNames'; import { useInjectFormItemContext } from '../form/FormItemContext'; diff --git a/components/space/index.tsx b/components/space/index.tsx index b53128895..c8f579224 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -4,7 +4,7 @@ import PropTypes from '../_util/vue-types'; import { filterEmpty } from '../_util/props-util'; import type { SizeType } from '../config-provider'; import { tuple, withInstall } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; import classNames from '../_util/classNames'; diff --git a/components/spin/Spin.tsx b/components/spin/Spin.tsx index baf54ae00..f0500f973 100644 --- a/components/spin/Spin.tsx +++ b/components/spin/Spin.tsx @@ -4,7 +4,7 @@ import debounce from 'lodash-es/debounce'; import PropTypes from '../_util/vue-types'; import { getComponent, getSlot } from '../_util/props-util'; import initDefaultProps from '../_util/props-util/initDefaultProps'; -import { defaultConfigProvider } from '../config-provider'; +import { defaultConfigProvider, configProviderKey } from '../config-provider/context'; export type SpinSize = 'small' | 'default' | 'large'; export const spinProps = () => ({ @@ -43,7 +43,7 @@ export default defineComponent({ setup() { return { originalUpdateSpinning: null, - configProvider: inject('configProvider', defaultConfigProvider), + configProvider: inject(configProviderKey, defaultConfigProvider), }; }, data() { diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx index 30e08ec64..e0a75d07d 100644 --- a/components/statistic/Statistic.tsx +++ b/components/statistic/Statistic.tsx @@ -5,7 +5,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps'; import StatisticNumber from './Number'; import type { valueType } from './utils'; import Skeleton from '../skeleton/Skeleton'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const statisticProps = () => ({ prefixCls: String, diff --git a/components/steps/index.tsx b/components/steps/index.tsx index dad2b58e7..87c1d1410 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -5,7 +5,7 @@ import CheckOutlined from '@ant-design/icons-vue/CheckOutlined'; import PropTypes from '../_util/vue-types'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import VcSteps, { Step as VcStep } from '../vc-steps'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import useBreakpoint from '../_util/hooks/useBreakpoint'; import classNames from '../_util/classNames'; import Progress from '../progress'; diff --git a/components/style.ts b/components/style.ts index 8f8a910a1..270a37fd2 100644 --- a/components/style.ts +++ b/components/style.ts @@ -51,7 +51,7 @@ import './tree-select/style'; import './drawer/style'; import './skeleton/style'; import './comment/style'; -import './config-provider/style'; +// import './config-provider/style'; import './empty/style'; import './statistic/style'; import './result/style'; diff --git a/components/switch/index.tsx b/components/switch/index.tsx index b0c86a406..2efaa1828 100644 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -7,7 +7,7 @@ import Wave from '../_util/wave'; import warning from '../_util/warning'; import { tuple, withInstall } from '../_util/type'; import { getPropsSlot } from '../_util/props-util'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useInjectFormItemContext } from '../form/FormItemContext'; import omit from '../_util/omit'; import type { FocusEventHandler } from '../_util/EventInterface'; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 68dec9e8a..498fa2796 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -38,7 +38,7 @@ import type { CSSProperties, PropType } from 'vue'; import { nextTick, reactive, ref, computed, defineComponent, toRef, watchEffect, watch } from 'vue'; import type { DefaultRecordType } from '../vc-table/interface'; import useBreakpoint from '../_util/hooks/useBreakpoint'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'; import classNames from '../_util/classNames'; import omit from '../_util/omit'; @@ -288,7 +288,7 @@ const InteralTable = defineComponent< configProvider, } = useConfigInject('table', props); const transformCellText = computed( - () => props.transformCellText || configProvider.transformCellText, + () => props.transformCellText || configProvider.transformCellText?.value, ); const [tableLocale] = useLocaleReceiver('Table', defaultLocale.Table, toRef(props, 'locale')); const rawData = computed(() => props.dataSource || EMPTY_LIST); @@ -672,7 +672,7 @@ const InteralTable = defineComponent< v-slots={{ ...slots, emptyText: () => - slots.emptyText?.() || props.locale?.emptyText || renderEmpty.value('Table'), + slots.emptyText?.() || props.locale?.emptyText || renderEmpty('Table'), }} /> {bottomPaginationNode} diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index b9cd29d1e..75b29444f 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -19,7 +19,7 @@ import type { FilterState } from '.'; import { flattenKeys } from '.'; import { computed, defineComponent, onBeforeUnmount, ref, shallowRef, watch } from 'vue'; import classNames from '../../../_util/classNames'; -import useConfigInject from '../../../_util/hooks/useConfigInject'; +import useConfigInject from '../../../config-provider/hooks/useConfigInject'; import { useInjectSlots } from '../../context'; import type { DataNode, EventDataNode } from '../../../tree'; import type { EventHandler } from '../../../_util/EventInterface'; diff --git a/components/tabs/src/Tabs.tsx b/components/tabs/src/Tabs.tsx index 2a16924ed..b15ccecf9 100644 --- a/components/tabs/src/Tabs.tsx +++ b/components/tabs/src/Tabs.tsx @@ -13,7 +13,7 @@ import type { import type { CSSProperties, PropType, ExtractPropTypes } from 'vue'; import { defineComponent, computed, onMounted, watchEffect, camelize } from 'vue'; import { flattenChildren, initDefaultProps, isValidElement } from '../../_util/props-util'; -import useConfigInject from '../../_util/hooks/useConfigInject'; +import useConfigInject from '../../config-provider/hooks/useConfigInject'; import useState from '../../_util/hooks/useState'; import isMobile from '../../vc-util/isMobile'; import useMergedState from '../../_util/hooks/useMergedState'; diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx index 001b6c02c..38e856a5e 100644 --- a/components/tag/CheckableTag.tsx +++ b/components/tag/CheckableTag.tsx @@ -1,7 +1,7 @@ import type { ExtractPropTypes, PropType } from 'vue'; import { defineComponent, computed } from 'vue'; import classNames from '../_util/classNames'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; const checkableTagProps = () => ({ prefixCls: String, diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 6021b2dc8..718372e62 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -8,7 +8,7 @@ import type { PresetColorType, PresetStatusColorType } from '../_util/colors'; import { isPresetColor, isPresetStatusColor } from '../_util/colors'; import type { LiteralUnion } from '../_util/type'; import CheckableTag from './CheckableTag'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const tagProps = () => ({ prefixCls: String, diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts index 63650b28d..bc235736f 100644 --- a/components/theme/util/genComponentStyleHook.ts +++ b/components/theme/util/genComponentStyleHook.ts @@ -6,7 +6,7 @@ import { genCommonStyle, genLinkStyle } from '../../_style'; import type { UseComponentStyleResult } from '../internal'; import { mergeToken, statisticToken, useToken } from '../internal'; import type { ComponentTokenMap, GlobalToken } from '../interface'; -import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'; +import useConfigInject from 'ant-design-vue/es/config-provider/hooks/useConfigInject'; import type { Ref } from 'vue'; import { computed } from 'vue'; diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index e8e8b0924..79c07e110 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -7,7 +7,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps'; import TimelineItem from './TimelineItem'; import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; import { tuple } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const timelineProps = () => ({ prefixCls: String, diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx index 2564e7f43..fde51a0ed 100644 --- a/components/timeline/TimelineItem.tsx +++ b/components/timeline/TimelineItem.tsx @@ -4,7 +4,7 @@ import classNames from '../_util/classNames'; import PropTypes from '../_util/vue-types'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import { tuple } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; export const timelineItemProps = () => ({ prefixCls: String, diff --git a/components/tooltip/Tooltip.tsx b/components/tooltip/Tooltip.tsx index 477aaf154..bd6a207a9 100644 --- a/components/tooltip/Tooltip.tsx +++ b/components/tooltip/Tooltip.tsx @@ -8,7 +8,7 @@ import { getStyle, filterEmpty, isValidElement, initDefaultProps } from '../_uti import { cloneElement } from '../_util/vnode'; export type { TriggerType, TooltipPlacement } from './abstractTooltipProps'; import abstractTooltipProps from './abstractTooltipProps'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import getPlacements from './placements'; import firstNotUndefined from '../_util/firstNotUndefined'; import raf from '../_util/raf'; diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 18749e532..92842b492 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -9,7 +9,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver'; import defaultLocale from '../locale-provider/default'; import type { VueNode } from '../_util/type'; import { withInstall } from '../_util/type'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { TransferListBodyProps } from './ListBody'; import type { PaginationType } from './interface'; import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'; diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 55feada39..2675412b8 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -13,7 +13,7 @@ import type { SizeType } from '../config-provider'; import type { FieldNames, Key } from '../vc-tree-select/interface'; import omit from '../_util/omit'; import PropTypes from '../_util/vue-types'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; import getIcons from '../select/utils/iconUtil'; import type { SwitcherIconProps } from '../tree/utils/iconUtil'; @@ -222,7 +222,7 @@ const TreeSelect = defineComponent({ if (notFoundContent !== undefined) { mergedNotFound = notFoundContent; } else { - mergedNotFound = renderEmpty.value('Select'); + mergedNotFound = renderEmpty('Select'); } // ==================== Render ===================== const selectProps = omit(props as typeof props & { itemIcon: any; switcherIcon: any }, [ diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx index 64b9ed965..d97c4ce27 100644 --- a/components/tree/DirectoryTree.tsx +++ b/components/tree/DirectoryTree.tsx @@ -16,7 +16,7 @@ import { import type { DataNode, EventDataNode, Key, ScrollTo } from '../vc-tree/interface'; import { conductExpandParent } from '../vc-tree/util'; import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import { filterEmpty } from '../_util/props-util'; export type ExpandAction = false | 'click' | 'doubleclick' | 'dblclick'; diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 9f2fb6d06..a023f3961 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -8,7 +8,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps'; import type { DataNode, EventDataNode, FieldNames, Key, ScrollTo } from '../vc-tree/interface'; import type { TreeNodeProps } from '../vc-tree/props'; import { treeProps as vcTreeProps } from '../vc-tree/props'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { SwitcherIconProps } from './utils/iconUtil'; import renderSwitcherIcon from './utils/iconUtil'; import dropIndicatorRender from './utils/dropIndicator'; diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index f1946756f..e0d55db8b 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -26,7 +26,7 @@ import { computed, toRaw, } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { EventHandler } from '../_util/EventInterface'; import omit from '../_util/omit'; import type { AutoSizeType } from '../input/inputProps'; diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx index a0797e35c..4da60ad28 100644 --- a/components/typography/Typography.tsx +++ b/components/typography/Typography.tsx @@ -1,6 +1,6 @@ import type { HTMLAttributes, PropType } from 'vue'; import { defineComponent } from 'vue'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; import type { Direction } from '../config-provider'; diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 138d6ded5..38b3f1570 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -18,7 +18,7 @@ import { computed, defineComponent, onMounted, ref, toRef } from 'vue'; import { flattenChildren, initDefaultProps } from '../_util/props-util'; import useMergedState from '../_util/hooks/useMergedState'; import devWarning from '../vc-util/devWarning'; -import useConfigInject from '../_util/hooks/useConfigInject'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { VueNode } from '../_util/type'; import classNames from '../_util/classNames'; import { useInjectFormItemContext } from '../form'; diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx index 41670b904..eaf294e81 100644 --- a/components/upload/UploadList/ListItem.tsx +++ b/components/upload/UploadList/ListItem.tsx @@ -14,7 +14,7 @@ import type { UploadLocale, } from '../interface'; import type { VueNode } from '../../_util/type'; -import useConfigInject from '../../_util/hooks/useConfigInject'; +import useConfigInject from '../../config-provider/hooks/useConfigInject'; import Transition, { getTransitionProps } from '../../_util/transition'; export const listItemProps = () => { return { diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index 2834d4818..7d4e450f1 100644 --- a/components/upload/UploadList/index.tsx +++ b/components/upload/UploadList/index.tsx @@ -12,7 +12,7 @@ import type { HTMLAttributes } from 'vue'; import { computed, defineComponent, getCurrentInstance, onMounted, ref, watchEffect } from 'vue'; import { filterEmpty, initDefaultProps, isValidElement } from '../../_util/props-util'; import type { VueNode } from '../../_util/type'; -import useConfigInject from '../../_util/hooks/useConfigInject'; +import useConfigInject from '../../config-provider/hooks/useConfigInject'; import { getTransitionGroupProps, TransitionGroup } from '../../_util/transition'; import collapseMotion from '../../_util/collapseMotion'; diff --git a/components/vc-notification/Notification.tsx b/components/vc-notification/Notification.tsx index 96f63d003..1ada49c7a 100644 --- a/components/vc-notification/Notification.tsx +++ b/components/vc-notification/Notification.tsx @@ -242,7 +242,7 @@ Notification.newInstance = function newNotificationInstance(properties, callback ? customTransitionName : `${rootPrefixCls}-${customTransitionName}`; return ( - +