refactor(divider): less to cssinjs (#6214)
* refactor(divider): less to cssinjs * fix: add inheritAttrspull/6217/head
bqy_fe
GitHub
parent
73ce708868
commit
44d7917afd
|
|
@ -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 useStyle from './style';
|
||||
|
||||
export const dividerProps = () => ({
|
||||
prefixCls: String,
|
||||
|
|
@ -27,11 +28,13 @@ export const dividerProps = () => ({
|
|||
export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>;
|
||||
|
||||
const Divider = defineComponent({
|
||||
compatConfig: { MODE: 3 },
|
||||
name: 'ADivider',
|
||||
inheritAttrs: false,
|
||||
compatConfig: { MODE: 3 },
|
||||
props: dividerProps(),
|
||||
setup(props, { slots }) {
|
||||
setup(props, { slots, attrs }) {
|
||||
const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props);
|
||||
const [wrapSSR, hashId] = useStyle(prefixClsRef);
|
||||
const hasCustomMarginLeft = computed(
|
||||
() => props.orientation === 'left' && props.orientationMargin != null,
|
||||
);
|
||||
|
|
@ -43,6 +46,7 @@ const Divider = defineComponent({
|
|||
const prefixCls = prefixClsRef.value;
|
||||
return {
|
||||
[prefixCls]: true,
|
||||
[hashId.value]: true,
|
||||
[`${prefixCls}-${type}`]: true,
|
||||
[`${prefixCls}-dashed`]: !!dashed,
|
||||
[`${prefixCls}-plain`]: !!plain,
|
||||
|
|
@ -67,8 +71,9 @@ const Divider = defineComponent({
|
|||
|
||||
return () => {
|
||||
const children = flattenChildren(slots.default?.());
|
||||
return (
|
||||
return wrapSSR(
|
||||
<div
|
||||
{...attrs}
|
||||
class={[
|
||||
classString.value,
|
||||
children.length
|
||||
|
|
@ -82,7 +87,7 @@ const Divider = defineComponent({
|
|||
{children}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,137 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@divider-prefix-cls: ~'@{ant-prefix}-divider';
|
||||
|
||||
.@{divider-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
border-top: @border-width-base solid @divider-color;
|
||||
|
||||
&-vertical {
|
||||
position: relative;
|
||||
top: -0.06em;
|
||||
display: inline-block;
|
||||
height: 0.9em;
|
||||
margin: 0 @divider-vertical-gutter;
|
||||
vertical-align: middle;
|
||||
border-top: 0;
|
||||
border-left: @border-width-base solid @divider-color;
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
display: flex;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
|
||||
margin: @divider-horizontal-gutter 0;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text {
|
||||
display: flex;
|
||||
margin: 16px 0;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
border-top: 0;
|
||||
border-top-color: @divider-color;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
border-top: @border-width-base solid transparent;
|
||||
// Chrome not accept `inherit` in `border-top`
|
||||
border-top-color: inherit;
|
||||
border-bottom: 0;
|
||||
transform: translateY(50%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left {
|
||||
&::before {
|
||||
top: 50%;
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right {
|
||||
&::before {
|
||||
top: 50%;
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&-inner-text {
|
||||
display: inline-block;
|
||||
padding: 0 @divider-text-padding;
|
||||
}
|
||||
|
||||
&-dashed {
|
||||
background: none;
|
||||
border-color: @divider-color;
|
||||
border-style: dashed;
|
||||
border-width: @border-width-base 0 0;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text&-dashed {
|
||||
&::before,
|
||||
&::after {
|
||||
border-style: dashed none none;
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical&-dashed {
|
||||
border-width: 0 0 0 @border-width-base;
|
||||
}
|
||||
|
||||
&-plain&-with-text {
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left&-no-default-orientation-margin-left {
|
||||
&::before {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-divider-inner-text {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right&-no-default-orientation-margin-right {
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.ant-divider-inner-text {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { resetComponent } from '../../_style';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
sizePaddingEdgeHorizontal: number;
|
||||
}
|
||||
|
||||
interface DividerToken extends FullToken<'Divider'> {
|
||||
dividerVerticalGutterMargin: number;
|
||||
dividerHorizontalWithTextGutterMargin: number;
|
||||
dividerHorizontalGutterMargin: number;
|
||||
}
|
||||
|
||||
// ============================== Shared ==============================
|
||||
const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
|
||||
const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
|
||||
|
||||
// vertical
|
||||
'&-vertical': {
|
||||
position: 'relative',
|
||||
top: '-0.06em',
|
||||
display: 'inline-block',
|
||||
height: '0.9em',
|
||||
margin: `0 ${token.dividerVerticalGutterMargin}px`,
|
||||
verticalAlign: 'middle',
|
||||
borderTop: 0,
|
||||
borderInlineStart: `${lineWidth}px solid ${colorSplit}`,
|
||||
},
|
||||
|
||||
'&-horizontal': {
|
||||
display: 'flex',
|
||||
clear: 'both',
|
||||
width: '100%',
|
||||
minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914
|
||||
margin: `${token.dividerHorizontalGutterMargin}px 0`,
|
||||
},
|
||||
|
||||
[`&-horizontal${componentCls}-with-text`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
|
||||
color: token.colorTextHeading,
|
||||
fontWeight: 500,
|
||||
fontSize: token.fontSizeLG,
|
||||
whiteSpace: 'nowrap',
|
||||
textAlign: 'center',
|
||||
borderBlockStart: `0 ${colorSplit}`,
|
||||
|
||||
'&::before, &::after': {
|
||||
position: 'relative',
|
||||
width: '50%',
|
||||
borderBlockStart: `${lineWidth}px solid transparent`,
|
||||
// Chrome not accept `inherit` in `border-top`
|
||||
borderBlockStartColor: 'inherit',
|
||||
borderBlockEnd: 0,
|
||||
transform: 'translateY(50%)',
|
||||
content: "''",
|
||||
},
|
||||
},
|
||||
|
||||
[`&-horizontal${componentCls}-with-text-left`]: {
|
||||
'&::before': {
|
||||
width: '5%',
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
width: '95%',
|
||||
},
|
||||
},
|
||||
|
||||
[`&-horizontal${componentCls}-with-text-right`]: {
|
||||
'&::before': {
|
||||
width: '95%',
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
width: '5%',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-inner-text`]: {
|
||||
display: 'inline-block',
|
||||
padding: '0 1em',
|
||||
},
|
||||
|
||||
'&-dashed': {
|
||||
background: 'none',
|
||||
borderColor: colorSplit,
|
||||
borderStyle: 'dashed',
|
||||
borderWidth: `${lineWidth}px 0 0`,
|
||||
},
|
||||
|
||||
[`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
|
||||
'&::before, &::after': {
|
||||
borderStyle: 'dashed none none',
|
||||
},
|
||||
},
|
||||
|
||||
[`&-vertical${componentCls}-dashed`]: {
|
||||
borderInlineStart: 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`]:
|
||||
{
|
||||
'&::before': {
|
||||
width: 0,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
[`${componentCls}-inner-text`]: {
|
||||
paddingInlineStart: sizePaddingEdgeHorizontal,
|
||||
},
|
||||
},
|
||||
|
||||
[`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]:
|
||||
{
|
||||
'&::before': {
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
width: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-inner-text`]: {
|
||||
paddingInlineEnd: sizePaddingEdgeHorizontal,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Divider',
|
||||
token => {
|
||||
const dividerToken = mergeToken<DividerToken>(token, {
|
||||
dividerVerticalGutterMargin: token.marginXS,
|
||||
dividerHorizontalWithTextGutterMargin: token.margin,
|
||||
dividerHorizontalGutterMargin: token.marginLG,
|
||||
});
|
||||
return [genSharedDividerStyle(dividerToken)];
|
||||
},
|
||||
{
|
||||
sizePaddingEdgeHorizontal: 0,
|
||||
},
|
||||
);
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@divider-prefix-cls: ~'@{ant-prefix}-divider';
|
||||
|
||||
.@{divider-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left {
|
||||
&::before {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right {
|
||||
&::before {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ import './popconfirm/style';
|
|||
import './menu/style';
|
||||
import './mentions/style';
|
||||
import './dropdown/style';
|
||||
import './divider/style';
|
||||
// import './divider/style';
|
||||
import './card/style';
|
||||
import './collapse/style';
|
||||
import './carousel/style';
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import type { ComponentToken as ButtonComponentToken } from '../../button/style'
|
|||
// import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style';
|
||||
// import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';
|
||||
// import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
|
||||
// import type { ComponentToken as DividerComponentToken } from '../../divider/style';
|
||||
import type { ComponentToken as DividerComponentToken } from '../../divider/style';
|
||||
// import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
|
||||
// import type { ComponentToken as DrawerComponentToken } from '../../drawer/style';
|
||||
// import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
|
||||
|
|
@ -66,7 +66,7 @@ export interface ComponentTokenMap {
|
|||
// Collapse?: CollapseComponentToken;
|
||||
// DatePicker?: DatePickerComponentToken;
|
||||
Descriptions?: {};
|
||||
// Divider?: DividerComponentToken;
|
||||
Divider?: DividerComponentToken;
|
||||
// Drawer?: DrawerComponentToken;
|
||||
// Dropdown?: DropdownComponentToken;
|
||||
// Empty?: EmptyComponentToken;
|
||||
|
|
|
|||
Loading…
Reference in New Issue