From 63ac0cb613eaa5af7e19edf3b3d941a6afd95b35 Mon Sep 17 00:00:00 2001 From: zhuzhengjian Date: Mon, 17 Apr 2023 10:51:11 +0800 Subject: [PATCH] chore: add info --- components/button/button-helper.tsx | 14 ++- components/button/button.tsx | 27 +++-- components/button/demo/basic.vue | 1 + components/button/style/index.ts | 147 +++++++++++++++++++--------- 4 files changed, 124 insertions(+), 65 deletions(-) diff --git a/components/button/button-helper.tsx b/components/button/button-helper.tsx index 567fec8..2107f40 100644 --- a/components/button/button-helper.tsx +++ b/components/button/button-helper.tsx @@ -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 diff --git a/components/button/button.tsx b/components/button/button.tsx index 51852d8..660b693 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -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 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} ) diff --git a/components/button/demo/basic.vue b/components/button/demo/basic.vue index d98de15..9edd681 100644 --- a/components/button/demo/basic.vue +++ b/components/button/demo/basic.vue @@ -20,6 +20,7 @@ There are `primary` button, `default` button, `dashed` button, `text` button and Default Button Dashed Button Text Button + 按钮 Link Button diff --git a/components/button/style/index.ts b/components/button/style/index.ts index 33d4121..70aa3ec 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -16,7 +16,9 @@ export interface ButtonToken extends FullToken<'Button'> { } // ============================== Shared ============================== -const genSharedButtonStyle: GenerateStyle = (token): CSSObject => { +const genSharedButtonStyle: GenerateStyle = ( + token +): CSSObject => { const { componentCls, iconCls } = token return { @@ -60,25 +62,8 @@ const genSharedButtonStyle: GenerateStyle = (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 = (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 = token => ({ +const genCircleButtonStyle: GenerateStyle = ( + token +) => ({ minWidth: token.controlHeight, paddingInlineStart: 0, paddingInlineEnd: 0, borderRadius: '50%' }) -const genRoundButtonStyle: GenerateStyle = token => ({ +const genRoundButtonStyle: GenerateStyle = (token) => ({ borderRadius: token.controlHeight, paddingInlineStart: token.controlHeight / 2, paddingInlineEnd: token.controlHeight / 2 }) // =============================== Type =============================== -const genDisabledStyle: GenerateStyle = token => ({ +const genDisabledStyle: GenerateStyle = (token) => ({ cursor: 'not-allowed', borderColor: token.colorBorder, color: token.colorTextDisabled, @@ -162,17 +171,21 @@ const genGhostButtonStyle = ( } }) -const genSolidDisabledButtonStyle: GenerateStyle = token => ({ +const genSolidDisabledButtonStyle: GenerateStyle = ( + token +) => ({ '&:disabled': { ...genDisabledStyle(token) } }) -const genSolidButtonStyle: GenerateStyle = token => ({ +const genSolidButtonStyle: GenerateStyle = (token) => ({ ...genSolidDisabledButtonStyle(token) }) -const genPureDisabledButtonStyle: GenerateStyle = token => ({ +const genPureDisabledButtonStyle: GenerateStyle = ( + token +) => ({ '&:disabled': { cursor: 'not-allowed', color: token.colorTextDisabled @@ -180,7 +193,9 @@ const genPureDisabledButtonStyle: GenerateStyle = token }) // Type: Default -const genDefaultButtonStyle: GenerateStyle = token => ({ +const genDefaultButtonStyle: GenerateStyle = ( + token +) => ({ ...genSolidButtonStyle(token), backgroundColor: token.colorBgContainer, @@ -199,7 +214,13 @@ const genDefaultButtonStyle: GenerateStyle = 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 = 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 = token => ({ +const genPrimaryButtonStyle: GenerateStyle = ( + token +) => ({ ...genSolidButtonStyle(token), color: token.colorTextLightSolid, @@ -290,13 +319,15 @@ const genPrimaryButtonStyle: GenerateStyle = token => ({ }) // Type: Dashed -const genDashedButtonStyle: GenerateStyle = token => ({ +const genDashedButtonStyle: GenerateStyle = ( + token +) => ({ ...genDefaultButtonStyle(token), borderStyle: 'dashed' }) // Type: Link -const genLinkButtonStyle: GenerateStyle = token => ({ +const genLinkButtonStyle: GenerateStyle = (token) => ({ color: token.colorLink, ...genHoverActiveButtonStyle( @@ -327,7 +358,7 @@ const genLinkButtonStyle: GenerateStyle = token => ({ }) // Type: Text -const genTextButtonStyle: GenerateStyle = token => ({ +const genTextButtonStyle: GenerateStyle = (token) => ({ ...genHoverActiveButtonStyle( { color: token.colorText, @@ -359,14 +390,16 @@ const genTextButtonStyle: GenerateStyle = token => ({ }) // Href and Disabled -const genDisabledButtonStyle: GenerateStyle = token => ({ +const genDisabledButtonStyle: GenerateStyle = ( + token +) => ({ ...genDisabledStyle(token), [`&${token.componentCls}:hover`]: { ...genDisabledStyle(token) } }) -const genTypeButtonStyle: GenerateStyle = token => { +const genTypeButtonStyle: GenerateStyle = (token) => { const { componentCls } = token return { @@ -380,10 +413,25 @@ const genTypeButtonStyle: GenerateStyle = 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 = token => genSizeButtonStyle(token) +const genSizeBaseButtonStyle: GenerateStyle = (token) => + genSizeButtonStyle(token) -const genSizeSmallButtonStyle: GenerateStyle = token => { +const genSizeSmallButtonStyle: GenerateStyle = (token) => { const smallToken = mergeToken(token, { controlHeight: token.controlHeightSM, padding: token.paddingXS, @@ -448,7 +499,7 @@ const genSizeSmallButtonStyle: GenerateStyle = token => { return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`) } -const genSizeLargeButtonStyle: GenerateStyle = token => { +const genSizeLargeButtonStyle: GenerateStyle = (token) => { const largeToken = mergeToken(token, { controlHeight: token.controlHeightLG, fontSize: token.fontSizeLG, @@ -458,7 +509,7 @@ const genSizeLargeButtonStyle: GenerateStyle = token => { return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`) } -const genBlockButtonStyle: GenerateStyle = token => { +const genBlockButtonStyle: GenerateStyle = (token) => { const { componentCls } = token return { [componentCls]: { @@ -470,7 +521,7 @@ const genBlockButtonStyle: GenerateStyle = token => { } // ============================== Export ============================== -export default genComponentStyleHook('Button', token => { +export default genComponentStyleHook('Button', (token) => { const { controlTmpOutline, paddingContentHorizontal } = token const buttonToken = mergeToken(token, {