yanyu/antd-tiny-vue
1
0
Fork 0
mirror of https://github.com/antd-tiny-vue/antd-tiny-vue.git synced 2024-11-10 09:39:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add info

Browse Source
This commit is contained in:
zhuzhengjian 2023-04-17 10:51:11 +08:00
parent 7cead859d1
commit 63ac0cb613
4 changed files with 124 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/button/button-helper.tsx
View File

@ -1,3 +1,7 @@
// import type { VNode, VNodeChild } from 'vue'
// import { isString } from '@v-c/utils'
// import { cloneVNode } from 'vue'
const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/
export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
@ -33,7 +37,6 @@ export function isUnBorderedButtonType(type?: ButtonType) {
//
// return child;
// }
//
// export function spaceChildren(children: React.ReactNode, needInserted: boolean) {
// let isPrevChildPure: boolean = false;
// const childList: React.ReactNode[] = [];
@ -57,7 +60,14 @@ export function isUnBorderedButtonType(type?: ButtonType) {
// );
// }
const ButtonTypes = ['default', 'primary', 'ghost', 'dashed', 'link', 'text'] as const
const ButtonTypes = [
'default',
'primary',
'ghost',
'dashed',
'link',
'text'
] as const
export type ButtonType = (typeof ButtonTypes)[number]
const ButtonShapes = ['default', 'circle', 'round'] as const

27
components/button/button.tsx
View File

@ -73,26 +73,19 @@ const Button = defineComponent({
)
const [hasTwoCNChar, setHasTwoCNChar] = useState(false)
const isNeedInserted = (children: any) => {
return (
children.length === 1 &&
!slots.icon &&
isUnBorderedButtonType(props.type)
)
}
let isNeedInserted = false
const fixTwoCNChar = (children: any) => {
// console.log(buttonRef)
const fixTwoCNChar = () => {
// FIXME: for HOC usage like <FormatMessage />
if (!buttonRef.value || autoInsertSpaceInButton.value === false) {
return
}
const buttonText = buttonRef.value.textContent
if (isNeedInserted(children) && isTwoCNChar(buttonText as string)) {
if (!hasTwoCNChar) {
if (isNeedInserted && isTwoCNChar(buttonText as string)) {
if (!hasTwoCNChar.value) {
setHasTwoCNChar(true)
}
} else if (hasTwoCNChar) {
} else if (hasTwoCNChar.value) {
setHasTwoCNChar(false)
}
}
@ -151,8 +144,11 @@ const Button = defineComponent({
const { shape, rootClassName, ghost, type, block, danger } = props
const icon = getSlotsProps(slots, props, 'icon')
const children = filterEmpty(slots.default?.())
fixTwoCNChar(children)
isNeedInserted =
children.length === 1 &&
!slots.icon &&
isUnBorderedButtonType(props.type)
fixTwoCNChar()
showError()
const iconType = innerLoading.value ? 'loading' : icon
@ -183,7 +179,7 @@ const Button = defineComponent({
compactItemClassnames.value,
rootClassName
)
const iconNode = icon && !innerLoading.value ? icon?.() : <>L</>
const iconNode = icon && (!innerLoading.value ? icon?.() : <>L</>)
if (attrs.href !== undefined) {
return wrapSSR(
@ -206,6 +202,7 @@ const Button = defineComponent({
class={classes}
ref={buttonRef}
>
{iconNode}
{children}
</button>
)

1
components/button/demo/basic.vue
View File

@ -20,6 +20,7 @@ There are `primary` button, `default` button, `dashed` button, `text` button and
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
<a-button type="text">Text Button</a-button>
<a-button type="text">按钮</a-button>
<a-button type="link">Link Button</a-button>
</a-space>
</template>

147
components/button/style/index.ts
View File

@ -16,7 +16,9 @@ export interface ButtonToken extends FullToken<'Button'> {
}
// ============================== Shared ==============================
const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
): CSSObject => {
const { componentCls, iconCls } = token
return {
@ -60,25 +62,8 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
},
// Special styles for Primary Button
[`&-compact-item${componentCls}-primary`]: {
[`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]: {
position: 'relative',
'&:before': {
position: 'absolute',
top: -token.lineWidth,
insetInlineStart: -token.lineWidth,
display: 'inline-block',
width: token.lineWidth,
height: `calc(100% + ${token.lineWidth * 2}px)`,
backgroundColor: token.colorPrimaryHover,
content: '""'
}
}
},
// Special styles for Primary Button
'&-compact-vertical-item': {
[`&${componentCls}-primary`]: {
[`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]: {
[`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
{
position: 'relative',
'&:before': {
@ -86,19 +71,41 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
top: -token.lineWidth,
insetInlineStart: -token.lineWidth,
display: 'inline-block',
width: `calc(100% + ${token.lineWidth * 2}px)`,
height: token.lineWidth,
width: token.lineWidth,
height: `calc(100% + ${token.lineWidth * 2}px)`,
backgroundColor: token.colorPrimaryHover,
content: '""'
}
}
},
// Special styles for Primary Button
'&-compact-vertical-item': {
[`&${componentCls}-primary`]: {
[`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
{
position: 'relative',
'&:before': {
position: 'absolute',
top: -token.lineWidth,
insetInlineStart: -token.lineWidth,
display: 'inline-block',
width: `calc(100% + ${token.lineWidth * 2}px)`,
height: token.lineWidth,
backgroundColor: token.colorPrimaryHover,
content: '""'
}
}
}
}
}
}
}
const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
const genHoverActiveButtonStyle = (
hoverStyle: CSSObject,
activeStyle: CSSObject
): CSSObject => ({
'&:not(:disabled)': {
'&:hover': hoverStyle,
'&:active': activeStyle
@ -106,21 +113,23 @@ const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject
})
// ============================== Shape ===============================
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
) => ({
minWidth: token.controlHeight,
paddingInlineStart: 0,
paddingInlineEnd: 0,
borderRadius: '50%'
})
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
borderRadius: token.controlHeight,
paddingInlineStart: token.controlHeight / 2,
paddingInlineEnd: token.controlHeight / 2
})
// =============================== Type ===============================
const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
cursor: 'not-allowed',
borderColor: token.colorBorder,
color: token.colorTextDisabled,
@ -162,17 +171,21 @@ const genGhostButtonStyle = (
}
})
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
) => ({
'&:disabled': {
...genDisabledStyle(token)
}
})
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genSolidDisabledButtonStyle(token)
})
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
) => ({
'&:disabled': {
cursor: 'not-allowed',
color: token.colorTextDisabled
@ -180,7 +193,9 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
})
// Type: Default
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
) => ({
...genSolidButtonStyle(token),
backgroundColor: token.colorBgContainer,
@ -199,7 +214,13 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
}
),
...genGhostButtonStyle(token.componentCls, token.colorBgContainer, token.colorBgContainer, token.colorTextDisabled, token.colorBorder),
...genGhostButtonStyle(
token.componentCls,
token.colorBgContainer,
token.colorBgContainer,
token.colorTextDisabled,
token.colorBorder
),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
@ -216,13 +237,21 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
}
),
...genGhostButtonStyle(token.componentCls, token.colorError, token.colorError, token.colorTextDisabled, token.colorBorder),
...genGhostButtonStyle(
token.componentCls,
token.colorError,
token.colorError,
token.colorTextDisabled,
token.colorBorder
),
...genSolidDisabledButtonStyle(token)
}
})
// Type: Primary
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
) => ({
...genSolidButtonStyle(token),
color: token.colorTextLightSolid,
@ -290,13 +319,15 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
})
// Type: Dashed
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
) => ({
...genDefaultButtonStyle(token),
borderStyle: 'dashed'
})
// Type: Link
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
color: token.colorLink,
...genHoverActiveButtonStyle(
@ -327,7 +358,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
})
// Type: Text
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genHoverActiveButtonStyle(
{
color: token.colorText,
@ -359,14 +390,16 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
})
// Href and Disabled
const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
) => ({
...genDisabledStyle(token),
[`&${token.componentCls}:hover`]: {
...genDisabledStyle(token)
}
})
const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls } = token
return {
@ -380,10 +413,25 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
}
// =============================== Size ===============================
const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls = ''): CSSInterpolation => {
const { componentCls, iconCls, controlHeight, fontSize, lineHeight, lineWidth, borderRadius, buttonPaddingHorizontal } = token
const genSizeButtonStyle = (
token: ButtonToken,
sizePrefixCls = ''
): CSSInterpolation => {
const {
componentCls,
iconCls,
controlHeight,
fontSize,
lineHeight,
lineWidth,
borderRadius,
buttonPaddingHorizontal
} = token
const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth)
const paddingVertical = Math.max(
0,
(controlHeight - fontSize * lineHeight) / 2 - lineWidth
)
const paddingHorizontal = buttonPaddingHorizontal - lineWidth
const iconOnlyCls = `${componentCls}-icon-only`
@ -427,17 +475,20 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls = ''): CSSInterpol
// Shape - patch prefixCls again to override solid border radius style
{
[`${componentCls}${componentCls}-circle${sizePrefixCls}`]: genCircleButtonStyle(token)
[`${componentCls}${componentCls}-circle${sizePrefixCls}`]:
genCircleButtonStyle(token)
},
{
[`${componentCls}${componentCls}-round${sizePrefixCls}`]: genRoundButtonStyle(token)
[`${componentCls}${componentCls}-round${sizePrefixCls}`]:
genRoundButtonStyle(token)
}
]
}
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token)
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = (token) =>
genSizeButtonStyle(token)
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const smallToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightSM,
padding: token.paddingXS,
@ -448,7 +499,7 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`)
}
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const largeToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG,
@ -458,7 +509,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`)
}
const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls } = token
return {
[componentCls]: {
@ -470,7 +521,7 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
}
// ============================== Export ==============================
export default genComponentStyleHook('Button', token => {
export default genComponentStyleHook('Button', (token) => {
const { controlTmpOutline, paddingContentHorizontal } = token
const buttonToken = mergeToken<ButtonToken>(token, {