Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a0c9369

Browse files
feat: alert support cssvar
1 parent 3ca620a commit a0c9369

File tree

3 files changed

+54
-41
lines changed

3 files changed

+54
-41
lines changed

‎components/alert/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const Alert = defineComponent({
7070
props: alertProps(),
7171
setup(props, { slots, emit, attrs, expose }) {
7272
const { prefixCls, direction } = useConfigInject('alert', props);
73-
const [wrapSSR, hashId] = useStyle(prefixCls);
73+
const [wrapSSR, hashId,cssVarCls] = useStyle(prefixCls);
7474
const closing = shallowRef(false);
7575
const closed = shallowRef(false);
7676
const alertNode = shallowRef();
@@ -134,6 +134,7 @@ const Alert = defineComponent({
134134
[`${prefixClsValue}-closable`]: closable,
135135
[`${prefixClsValue}-rtl`]: direction.value === 'rtl',
136136
[hashId.value]: true,
137+
[cssVarCls.value]: true,
137138
});
138139

139140
const closeIcon = closable ? (

‎components/alert/style/index.ts

Lines changed: 51 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
1-
import type { CSSInterpolation, CSSObject } from '../../_util/cssinjs';
2-
import type { FullToken, GenerateStyle } from '../../theme/internal';
3-
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
1+
import { CSSObject, unit } from '../../_util/cssinjs';
2+
import { FullToken, GenerateStyle, genStyleHooks, GetDefaultToken } from '../../theme/internal';
43
import { resetComponent } from '../../style';
5-
6-
export interface ComponentToken {}
4+
import { CSSProperties } from 'vue';
5+
6+
export interface ComponentToken {
7+
// Component token here
8+
/**
9+
* @desc 默认内间距
10+
* @descEN Default padding
11+
*/
12+
defaultPadding: CSSProperties['padding'];
13+
/**
14+
* @desc 带有描述的内间距
15+
* @descEN Padding with description
16+
*/
17+
withDescriptionPadding: CSSProperties['padding'];
18+
/**
19+
* @desc 带有描述时的图标尺寸
20+
* @descEN Icon size with description
21+
*/
22+
withDescriptionIconSize: number;
23+
}
724

825
type AlertToken = FullToken<'Alert'> & {
9-
alertIconSizeLG: number;
10-
alertPaddingHorizontal: number;
26+
// Custom token here
1127
};
1228

1329
const genAlertTypeStyle = (
@@ -17,8 +33,8 @@ const genAlertTypeStyle = (
1733
token: AlertToken,
1834
alertCls: string,
1935
): CSSObject => ({
20-
backgroundColor: bgColor,
21-
border: `${token.lineWidth}px ${token.lineType} ${borderColor}`,
36+
background: bgColor,
37+
border: `${unit(token.lineWidth)} ${token.lineType} ${borderColor}`,
2238
[`${alertCls}-icon`]: {
2339
color: iconColor,
2440
},
@@ -35,12 +51,11 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
3551
lineHeight,
3652
borderRadiusLG: borderRadius,
3753
motionEaseInOutCirc,
38-
alertIconSizeLG,
54+
withDescriptionIconSize,
3955
colorText,
40-
paddingContentVerticalSM,
41-
alertPaddingHorizontal,
42-
paddingMD,
43-
paddingContentHorizontalLG,
56+
colorTextHeading,
57+
withDescriptionPadding,
58+
defaultPadding,
4459
} = token;
4560

4661
return {
@@ -49,7 +64,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
4964
position: 'relative',
5065
display: 'flex',
5166
alignItems: 'center',
52-
padding: `${paddingContentVerticalSM}px ${alertPaddingHorizontal}px`,// Fixed horizontal padding here.
67+
padding: defaultPadding,
5368
wordWrap: 'break-word',
5469
borderRadius,
5570

@@ -67,14 +82,14 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
6782
lineHeight: 0,
6883
},
6984

70-
[`&-description`]: {
85+
'&-description': {
7186
display: 'none',
7287
fontSize,
7388
lineHeight,
7489
},
7590

7691
'&-message': {
77-
color: colorText,
92+
color: colorTextHeading,
7893
},
7994

8095
[`&${componentCls}-motion-leave`]: {
@@ -96,24 +111,23 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
96111

97112
[`${componentCls}-with-description`]: {
98113
alignItems: 'flex-start',
99-
paddingInline: paddingContentHorizontalLG,
100-
paddingBlock: paddingMD,
101-
114+
padding: withDescriptionPadding,
102115
[`${componentCls}-icon`]: {
103116
marginInlineEnd: marginSM,
104-
fontSize: alertIconSizeLG,
117+
fontSize: withDescriptionIconSize,
105118
lineHeight: 0,
106119
},
107120

108121
[`${componentCls}-message`]: {
109122
display: 'block',
110123
marginBottom: marginXS,
111-
color: colorText,
124+
color: colorTextHeading,
112125
fontSize: fontSizeLG,
113126
},
114127

115128
[`${componentCls}-description`]: {
116129
display: 'block',
130+
color: colorText,
117131
},
118132
},
119133

@@ -187,7 +201,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
187201

188202
return {
189203
[componentCls]: {
190-
[`&-action`]: {
204+
'&-action': {
191205
marginInlineStart: marginXS,
192206
},
193207

@@ -196,7 +210,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
196210
padding: 0,
197211
overflow: 'hidden',
198212
fontSize: fontSizeIcon,
199-
lineHeight: `${fontSizeIcon}px`,
213+
lineHeight: unit(fontSizeIcon),
200214
backgroundColor: 'transparent',
201215
border: 'none',
202216
outline: 'none',
@@ -222,19 +236,17 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
222236
};
223237
};
224238

225-
export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSInterpolation => [
226-
genBaseStyle(token),
227-
genTypeStyle(token),
228-
genActionStyle(token),
229-
];
230-
231-
export default genComponentStyleHook('Alert', token => {
232-
const { fontSizeHeading3 } = token;
233-
234-
const alertToken = mergeToken<AlertToken>(token, {
235-
alertIconSizeLG: fontSizeHeading3,
236-
alertPaddingHorizontal: 12, // Fixed value here.
237-
});
239+
export const prepareComponentToken: GetDefaultToken<'Alert'> = token => {
240+
const paddingHorizontal = 12; // Fixed value here.
241+
return {
242+
withDescriptionIconSize: token.fontSizeHeading3,
243+
defaultPadding: `${token.paddingContentVerticalSM}px ${paddingHorizontal}px`,
244+
withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
245+
};
246+
};
238247

239-
return [genAlertStyle(alertToken)];
240-
});
248+
export default genStyleHooks(
249+
'Alert',
250+
token => [genBaseStyle(token), genTypeStyle(token), genActionStyle(token)],
251+
prepareComponentToken,
252+
);

‎components/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { App } from 'vue';
22

33
import * as components from './components';
44
import { default as version } from './version';
5-
import cssinjs from './_util/cssinjs';
5+
import *ascssinjs from './_util/cssinjs';
66
export * from './components';
77
export * from './_util/cssinjs';
88

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /