diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index d6d564013..7aa34a8df 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -1,4 +1,4 @@ -import { reactive, provide, VNodeTypes, PropType, defineComponent, watch } from 'vue'; +import { reactive, provide, PropType, defineComponent, watch, ExtractPropTypes } from 'vue'; import PropTypes from '../_util/vue-types'; import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty'; import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider'; @@ -14,30 +14,6 @@ export interface CSPConfig { export { RenderEmptyHandler }; -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; - }; - direction?: 'ltr' | 'rtl'; - space?: { - size?: SizeType | number; - }; - virtual?: boolean; - dropdownMatchSelectWidth?: boolean; -} - export const configConsumerProps = [ 'getTargetContainer', 'getPopupContainer', @@ -50,72 +26,51 @@ export const configConsumerProps = [ 'pageHeader', ]; -export interface ConfigProviderProps { - getTargetContainer?: () => HTMLElement; - getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; - prefixCls?: string; - children?: VNodeTypes; - 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; -} +export const configProviderProps = { + getTargetContainer: { + type: Function as PropType<() => HTMLElement>, + }, + getPopupContainer: { + type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>, + }, + prefixCls: String, + getPrefixCls: { + type: Function as PropType<(suffixCls?: string, customizePrefixCls?: string) => string>, + }, + renderEmpty: { + type: Function as PropType, + }, + transformCellText: { + type: Function as PropType<(tableProps: TransformCellTextProps) => any>, + }, + csp: { + type: Object as PropType, + }, + autoInsertSpaceInButton: PropTypes.looseBool, + locale: { + type: Object as PropType, + }, + pageHeader: { + type: Object as PropType<{ ghost: boolean }>, + }, + componentSize: { + type: Object as PropType, + }, + direction: { + type: String as PropType<'ltr' | 'rtl'>, + }, + space: { + type: [String, Number] as PropType, + }, + virtual: PropTypes.looseBool, + dropdownMatchSelectWidth: PropTypes.looseBool, +}; + +export type ConfigProviderProps = ExtractPropTypes; const ConfigProvider = defineComponent({ name: 'AConfigProvider', - props: { - getTargetContainer: { - type: Function as PropType<() => HTMLElement>, - }, - getPopupContainer: { - type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>, - }, - prefixCls: String, - getPrefixCls: { - type: Function as PropType<(suffixCls?: string, customizePrefixCls?: string) => string>, - }, - renderEmpty: { - type: Function as PropType, - }, - transformCellText: { - type: Function as PropType<(tableProps: TransformCellTextProps) => any>, - }, - csp: { - type: Object as PropType, - }, - autoInsertSpaceInButton: PropTypes.looseBool, - locale: { - type: Object as PropType, - }, - pageHeader: { - type: Object as PropType<{ ghost: boolean }>, - }, - componentSize: { - type: Object as PropType, - }, - direction: { - type: String as PropType<'ltr' | 'rtl'>, - }, - space: { - type: [String, Number] as PropType, - }, - virtual: PropTypes.looseBool, - dropdownMatchSelectWidth: PropTypes.looseBool, - }, + props: configProviderProps, setup(props, { slots }) { const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { const { prefixCls = 'ant' } = props; @@ -166,12 +121,13 @@ const ConfigProvider = defineComponent({ }, }); -export const defaultConfigProvider: ConfigConsumerProps = { +export const defaultConfigProvider: ConfigProviderProps = { getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => { if (customizePrefixCls) return customizePrefixCls; return `ant-${suffixCls}`; }, renderEmpty: defaultRenderEmpty, + direction: 'ltr', }; export default withInstall(ConfigProvider); diff --git a/components/divider/index.tsx b/components/divider/index.tsx index 8199661ab..0ac88a7ac 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -1,46 +1,67 @@ import { flattenChildren } from '../_util/props-util'; -import { computed, defineComponent, inject, PropType } from 'vue'; +import { computed, defineComponent, ExtractPropTypes, inject, PropType } from 'vue'; import { defaultConfigProvider } from '../config-provider'; import { withInstall } from '../_util/type'; +export const dividerProps = { + prefixCls: String, + type: { + type: String as PropType<'horizontal' | 'vertical' | ''>, + default: 'horizontal', + }, + dashed: { + type: Boolean, + default: false, + }, + orientation: { + type: String as PropType<'left' | 'right' | 'center'>, + default: 'center', + }, + plain: { + type: Boolean, + default: false, + }, +}; +export type DividerProps = ExtractPropTypes; + const Divider = defineComponent({ name: 'ADivider', - props: { - prefixCls: String, - type: { - type: String as PropType<'horizontal' | 'vertical' | ''>, - default: 'horizontal', - }, - dashed: { - type: Boolean, - default: false, - }, - orientation: { - type: String as PropType<'left' | 'right' | 'center'>, - default: 'center', - }, - }, + props: dividerProps, setup(props, { slots }) { - const { getPrefixCls } = inject('configProvider', defaultConfigProvider); - const prefixCls = computed(() => getPrefixCls('divider', props.prefixCls)); + const configProvider = inject('configProvider', defaultConfigProvider); + const prefixClsRef = computed(() => configProvider.getPrefixCls('divider', props.prefixCls)); const classString = computed(() => { - const { type, dashed, orientation } = props; - const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation; - const prefixClsRef = prefixCls.value; + const { type, dashed, plain } = props; + const prefixCls = prefixClsRef.value; return { - [prefixClsRef]: true, - [`${prefixClsRef}-${type}`]: true, - [`${prefixClsRef}-with-text${orientationPrefix}`]: slots.default, - [`${prefixClsRef}-dashed`]: !!dashed, + [prefixCls]: true, + [`${prefixCls}-${type}`]: true, + [`${prefixCls}-dashed`]: !!dashed, + [`${prefixCls}-plain`]: !!plain, + [`${prefixCls}-rtl`]: configProvider.direction === 'rtl', }; }); + const orientationPrefix = computed(() => + props.orientation.length > 0 ? '-' + props.orientation : props.orientation, + ); + return () => { const children = flattenChildren(slots.default?.()); return ( -