From 22918d8c154ba209312ebb2d69a988b377c76f08 Mon Sep 17 00:00:00 2001 From: nishu Date: Tue, 29 Apr 2025 15:47:13 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20QIANXING1-787=20divider=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20css=20var?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/divider/index.tsx | 6 +- components/divider/style/index.ts | 126 +++++++++++++++++++++++------- 2 files changed, 103 insertions(+), 29 deletions(-) diff --git a/components/divider/index.tsx b/components/divider/index.tsx index 2eedacac72..d246c08ffa 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -3,6 +3,7 @@ import type { ExtractPropTypes, PropType } from 'vue'; import { computed, defineComponent } from 'vue'; import { withInstall } from '../_util/type'; import useConfigInject from '../config-provider/hooks/useConfigInject'; +import useCSSVarCls from '../config-provider/hooks/useCssVarCls'; import useStyle from './style'; export const dividerProps = () => ({ @@ -34,7 +35,8 @@ const Divider = defineComponent({ props: dividerProps(), setup(props, { slots, attrs }) { const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props); - const [wrapSSR, hashId] = useStyle(prefixClsRef); + const rootCls = useCSSVarCls(prefixClsRef); + const [wrapSSR, hashId, cssVarCls] = useStyle(prefixClsRef, rootCls); const hasCustomMarginLeft = computed( () => props.orientation === 'left' && props.orientationMargin != null, ); @@ -46,6 +48,8 @@ const Divider = defineComponent({ const prefixCls = prefixClsRef.value; return { [prefixCls]: true, + [cssVarCls.value]: true, + [rootCls.value]: true, [hashId.value]: !!hashId.value, [`${prefixCls}-${type}`]: true, [`${prefixCls}-dashed`]: !!dashed, diff --git a/components/divider/style/index.ts b/components/divider/style/index.ts index 6dc979b047..453414392d 100644 --- a/components/divider/style/index.ts +++ b/components/divider/style/index.ts @@ -1,27 +1,68 @@ +import type { CSSProperties } from 'vue'; import type { CSSObject } from '../../_util/cssinjs'; -import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { unit } from '../../_util/cssinjs'; + import { resetComponent } from '../../style'; +import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; +import { genStyleHooks, mergeToken } from '../../theme/internal'; /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { - sizePaddingEdgeHorizontal: number; + /** + * @desc 文本横向内间距 + * @descEN Horizontal padding of text + */ + textPaddingInline: CSSProperties['paddingInline']; + /** + * @desc 文本与边缘距离，取值 0 ～ 1 + * @descEN Distance between text and edge, which should be a number between 0 and 1. + */ + orientationMargin: number; + /** + * @desc 纵向分割线的横向外间距 + * @descEN Horizontal margin of vertical Divider + */ + verticalMarginInline: CSSProperties['marginInline']; } +/** + * @desc Divider 组件的 Token + * @descEN Token for Divider component + */ interface DividerToken extends FullToken<'Divider'> { - dividerVerticalGutterMargin: number; - dividerHorizontalWithTextGutterMargin: number; - dividerHorizontalGutterMargin: number; + /** + * @desc 尺寸边距 + * @descEN Size padding edge horizontal + */ + sizePaddingEdgeHorizontal: number | string; + /** + * @desc 带文本的水平分割线的外边距 + * @descEN Horizontal margin of divider with text + */ + dividerHorizontalWithTextGutterMargin: number | string; + /** + * @desc 水平分割线的外边距 + * @descEN Horizontal margin of divider + */ + dividerHorizontalGutterMargin: number | string; } // ============================== Shared ============================== const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; + const { + componentCls, + sizePaddingEdgeHorizontal, + colorSplit, + lineWidth, + textPaddingInline, + orientationMargin, + verticalMarginInline, + } = token; return { [componentCls]: { ...resetComponent(token), - borderBlockStart: `${lineWidth}px solid ${colorSplit}`, + borderBlockStart: `${unit(lineWidth)} solid ${colorSplit}`, // vertical '&-vertical': { @@ -29,10 +70,11 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => top: '-0.06em', display: 'inline-block', height: '0.9em', - margin: `0 ${token.dividerVerticalGutterMargin}px`, + marginInline: verticalMarginInline, + marginBlock: 0, verticalAlign: 'middle', borderTop: 0, - borderInlineStart: `${lineWidth}px solid ${colorSplit}`, + borderInlineStart: `${unit(lineWidth)} solid ${colorSplit}`, }, '&-horizontal': { @@ -40,13 +82,13 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => clear: 'both', width: '100%', minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914 - margin: `${token.dividerHorizontalGutterMargin}px 0`, + margin: `${unit(token.dividerHorizontalGutterMargin)} 0`, }, [`&-horizontal${componentCls}-with-text`]: { display: 'flex', alignItems: 'center', - margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`, + margin: `${unit(token.dividerHorizontalWithTextGutterMargin)} 0`, color: token.colorTextHeading, fontWeight: 500, fontSize: token.fontSizeLG, @@ -57,7 +99,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => '&::before, &::after': { position: 'relative', width: '50%', - borderBlockStart: `${lineWidth}px solid transparent`, + borderBlockStart: `${unit(lineWidth)} solid transparent`, // Chrome not accept `inherit` in `border-top` borderBlockStartColor: 'inherit', borderBlockEnd: 0, @@ -66,36 +108,35 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => }, }, - [`&-horizontal${componentCls}-with-text-left`]: { + [`&-horizontal${componentCls}-with-text-start`]: { '&::before': { - width: '5%', + width: `calc(${orientationMargin} * 100%)`, }, - '&::after': { - width: '95%', + width: `calc(100% - ${orientationMargin} * 100%)`, }, }, - [`&-horizontal${componentCls}-with-text-right`]: { + [`&-horizontal${componentCls}-with-text-end`]: { '&::before': { - width: '95%', + width: `calc(100% - ${orientationMargin} * 100%)`, }, - '&::after': { - width: '5%', + width: `calc(${orientationMargin} * 100%)`, }, }, [`${componentCls}-inner-text`]: { display: 'inline-block', - padding: '0 1em', + paddingBlock: 0, + paddingInline: textPaddingInline, }, '&-dashed': { background: 'none', borderColor: colorSplit, borderStyle: 'dashed', - borderWidth: `${lineWidth}px 0 0`, + borderWidth: `${unit(lineWidth)} 0 0`, }, [`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: { @@ -111,13 +152,33 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => borderBlockEnd: 0, }, + '&-dotted': { + background: 'none', + borderColor: colorSplit, + borderStyle: 'dotted', + borderWidth: `${unit(lineWidth)} 0 0`, + }, + + [`&-horizontal${componentCls}-with-text${componentCls}-dotted`]: { + '&::before, &::after': { + borderStyle: 'dotted none none', + }, + }, + + [`&-vertical${componentCls}-dotted`]: { + borderInlineStartWidth: lineWidth, + borderInlineEnd: 0, + borderBlockStart: 0, + borderBlockEnd: 0, + }, + [`&-plain${componentCls}-with-text`]: { color: token.colorText, fontWeight: 'normal', fontSize: token.fontSize, }, - [`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]: + [`&-horizontal${componentCls}-with-text-start${componentCls}-no-default-orientation-margin-start`]: { '&::before': { width: 0, @@ -132,7 +193,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => }, }, - [`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]: + [`&-horizontal${componentCls}-with-text-end${componentCls}-no-default-orientation-margin-end`]: { '&::before': { width: '100%', @@ -150,18 +211,27 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => }; }; +export const prepareComponentToken: GetDefaultToken<'Divider'> = token => ({ + textPaddingInline: '1em', + orientationMargin: 0.05, + verticalMarginInline: token.marginXS, +}); + // ============================== Export ============================== -export default genComponentStyleHook( +export default genStyleHooks( 'Divider', token => { const dividerToken = mergeToken(token, { - dividerVerticalGutterMargin: token.marginXS, dividerHorizontalWithTextGutterMargin: token.margin, dividerHorizontalGutterMargin: token.marginLG, + sizePaddingEdgeHorizontal: 0, }); return [genSharedDividerStyle(dividerToken)]; }, + prepareComponentToken, { - sizePaddingEdgeHorizontal: 0, + unitless: { + orientationMargin: true, + }, }, ); From c6eb1d3b0347c5da03a3bc821e7b0ce1b48b679f Mon Sep 17 00:00:00 2001 From: undefined Date: Thu, 10 Jul 2025 15:20:49 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20QIANXING1-860=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=20divider=20=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/config-provider/hooks/useTheme.ts | 4 +++- components/divider/style/index.ts | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts index 027a1a6941..4ef985e88f 100644 --- a/components/config-provider/hooks/useTheme.ts +++ b/components/config-provider/hooks/useTheme.ts @@ -3,7 +3,9 @@ import { defaultConfig } from '../../theme/internal'; import type { Ref } from 'vue'; import { computed } from 'vue'; import devWarning from '../../vc-util/warning'; -const themeKey = 'antdvtheme'; +import { cssVarPrefix } from '../../theme/util/themeTokenUtil'; + +const themeKey = cssVarPrefix; export default function useTheme(theme?: Ref, parentTheme?: Ref) { const themeConfig = computed(() => theme?.value || {}); const parentThemeConfig = computed(() => diff --git a/components/divider/style/index.ts b/components/divider/style/index.ts index 453414392d..c96b840ee7 100644 --- a/components/divider/style/index.ts +++ b/components/divider/style/index.ts @@ -108,7 +108,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => }, }, - [`&-horizontal${componentCls}-with-text-start`]: { + [`&-horizontal${componentCls}-with-text-left`]: { '&::before': { width: `calc(${orientationMargin} * 100%)`, }, @@ -117,7 +117,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => }, }, - [`&-horizontal${componentCls}-with-text-end`]: { + [`&-horizontal${componentCls}-with-text-right`]: { '&::before': { width: `calc(100% - ${orientationMargin} * 100%)`, }, @@ -178,7 +178,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => fontSize: token.fontSize, }, - [`&-horizontal${componentCls}-with-text-start${componentCls}-no-default-orientation-margin-start`]: + [`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]: { '&::before': { width: 0, @@ -193,7 +193,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => }, }, - [`&-horizontal${componentCls}-with-text-end${componentCls}-no-default-orientation-margin-end`]: + [`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]: { '&::before': { width: '100%', From 509cbc476030a978af1134c114a4e2d4094987ca Mon Sep 17 00:00:00 2001 From: undefined Date: Fri, 22 Aug 2025 18:09:47 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=20useTheme=20?= =?UTF-8?q?=E9=92=A9=E5=AD=90=E4=B8=AD=E7=9A=84=E4=B8=BB=E9=A2=98=E9=94=AE?= =?UTF-8?q?=E4=B8=BA=20'antdvtheme'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/config-provider/hooks/useTheme.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts index 4ef985e88f..ca99988a7c 100644 --- a/components/config-provider/hooks/useTheme.ts +++ b/components/config-provider/hooks/useTheme.ts @@ -3,9 +3,8 @@ import { defaultConfig } from '../../theme/internal'; import type { Ref } from 'vue'; import { computed } from 'vue'; import devWarning from '../../vc-util/warning'; -import { cssVarPrefix } from '../../theme/util/themeTokenUtil'; -const themeKey = cssVarPrefix; +const themeKey = 'antdvtheme'; export default function useTheme(theme?: Ref, parentTheme?: Ref) { const themeConfig = computed(() => theme?.value || {}); const parentThemeConfig = computed(() =>