components/button/button-helper.tsx

@@ -1,26 +1,9 @@
-// import type { VNode, VNodeChild } from 'vue'
-// import { isString } from '@v-c/utils'
-import { Text } from 'vue'
-import type { VNode } from 'vue'
-
 const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/
 export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
 
 export function isUnBorderedButtonType(type?: ButtonType) {
   return type === 'text' || type === 'link'
 }
-export const spaceChildren = (child: VNode, needInserted: boolean) => {
-  const SPACE = needInserted ? ' ' : ''
-  if (child.type === Text) {
-    let text = (child.children as string).trim()
-    if (isTwoCNChar(text)) {
-      text = text.split('').join(SPACE)
-    }
-    return <span>{text}</span>
-  }
-  return child
-}
-
 //
 // function splitCNCharsBySpace(child: VNodeChild , needInserted: boolean) {
 //     if (child === null || child === undefined) {
@@ -50,6 +33,7 @@ export const spaceChildren = (child: VNode, needInserted: boolean) => {
 //
 //     return child;
 // }
+//
 // export function spaceChildren(children: React.ReactNode, needInserted: boolean) {
 //     let isPrevChildPure: boolean = false;
 //     const childList: React.ReactNode[] = [];
@@ -73,14 +57,7 @@ export const spaceChildren = (child: VNode, needInserted: boolean) => {
 //     );
 // }
 
-const ButtonTypes = [
+const ButtonTypes = ['default', 'primary', 'ghost', 'dashed', 'link', 'text'] as const
-  'default',
-  'primary',
-  'ghost',
-  'dashed',
-  'link',
-  'text'
-] as const
 export type ButtonType = (typeof ButtonTypes)[number]
 
 const ButtonShapes = ['default', 'circle', 'round'] as const

components/button/button.tsx

@@ -16,11 +16,7 @@ import { useCompactItemContext } from '../space/compact'
 import useStyle from './style'
 import type { ButtonProps, LoadingConfigType } from './interface'
 import { buttonProps } from './interface'
-import {
+import { isTwoCNChar, isUnBorderedButtonType } from './button-helper'
-  isTwoCNChar,
-  isUnBorderedButtonType,
-  spaceChildren
-} from './button-helper'
 type Loading = number | boolean
 
 function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
@@ -62,8 +58,8 @@ const Button = defineComponent({
         small: 'sm',
         middle: undefined
       }
-      const sizeFullName = compactSize?.value || size.value
+      const sizeFullname = compactSize?.value || size.value
-      return sizeClassNameMap[sizeFullName]
+      return sizeClassNameMap[sizeFullname]
     })
     const disabled = useDisabled(props)
     const buttonRef = shallowRef<HTMLButtonElement | null>(null)
@@ -77,23 +73,6 @@ const Button = defineComponent({
     )
     const [hasTwoCNChar, setHasTwoCNChar] = useState(false)
 
-    let isNeedInserted = false
-
-    const fixTwoCNChar = () => {
-      // FIXME: for HOC usage like <FormatMessage />
-      if (!buttonRef.value || autoInsertSpaceInButton.value === false) {
-        return
-      }
-      const buttonText = buttonRef.value.textContent
-      if (isNeedInserted && isTwoCNChar(buttonText as string)) {
-        if (!hasTwoCNChar.value) {
-          setHasTwoCNChar(true)
-        }
-      } else if (hasTwoCNChar.value) {
-        setHasTwoCNChar(false)
-      }
-    }
-
     let delayTimer: number | null = null
 
     onMounted(() => {
@@ -105,6 +84,7 @@ const Button = defineComponent({
       } else {
         setLoading(loadingOrDelay.value.loading)
       }
+      // fixTwoCNChar()
     })
 
     function cleanupTimer() {
@@ -148,10 +128,28 @@ const Button = defineComponent({
       const { shape, rootClassName, ghost, type, block, danger } = props
       const icon = getSlotsProps(slots, props, 'icon')
       const children = filterEmpty(slots.default?.())
-      isNeedInserted =
+      const isNeedInserted = () => {
-        children.length === 1 &&
+        return (
-        !slots.icon &&
+          children.length === 1 &&
-        isUnBorderedButtonType(props.type)
+          !slots.icon &&
+          isUnBorderedButtonType(props.type)
+        )
+      }
+
+      const fixTwoCNChar = () => {
+        // FIXME: for HOC usage like <FormatMessage />
+        if (!buttonRef.value || autoInsertSpaceInButton.value === false) {
+          return
+        }
+        const buttonText = buttonRef.value.textContent
+        if (isNeedInserted() && isTwoCNChar(buttonText as string)) {
+          if (!hasTwoCNChar) {
+            setHasTwoCNChar(true)
+          }
+        } else if (hasTwoCNChar) {
+          setHasTwoCNChar(false)
+        }
+      }
       fixTwoCNChar()
       showError()
       const iconType = innerLoading.value ? 'loading' : icon
@@ -183,12 +181,8 @@ const Button = defineComponent({
         compactItemClassnames.value,
         rootClassName
       )
-      const iconNode = icon && (!innerLoading.value ? icon?.() : <>L</>)
+      const iconNode = icon && !innerLoading.value ? icon?.() : <>L</>
 
-      const kids =
-        children || children === 0
-          ? spaceChildren(children[0] as any, isNeedInserted && autoInsertSpace)
-          : undefined
       if (attrs.href !== undefined) {
         return wrapSSR(
           <a
@@ -199,19 +193,13 @@ const Button = defineComponent({
             ref={buttonRef}
           >
             {iconNode}
-            {kids}
+            {children}
           </a>
         )
       }
       let buttonNode = (
-        <button
+        <button {...attrs} onClick={handleClick} class={classes}>
-          {...attrs}
+          {children}
-          onClick={handleClick}
-          class={classes}
-          ref={buttonRef}
-        >
-          {iconNode}
-          {kids}
         </button>
       )
 

components/button/style/index.ts

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

components/config-provider/context.ts

@@ -1,20 +1,8 @@
-import {
+import { booleanType, createInjectionState, functionType, objectType, someType, stringType } from '@v-c/utils'
-  booleanType,
-  createInjectionState,
-  functionType,
-  objectType,
-  someType,
-  stringType
-} from '@v-c/utils'
 import type { ExtractPropTypes } from 'vue'
 import { computed } from 'vue'
 import type { DerivativeFunc } from '@antd-tiny-vue/cssinjs'
-import type {
+import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../theme/interface'
-  AliasToken,
-  MapToken,
-  OverrideToken,
-  SeedToken
-} from '../theme/interface'
 import type { RenderEmptyHandler } from './default-render-empty'
 import type { ConfigProviderProps } from './index'
 
@@ -46,10 +34,7 @@ export interface ThemeConfig {
 }
 export const defaultIconPrefixCls = 'anticon'
 
-const defaultGetPrefixCls = (
+const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
-  suffixCls?: string,
-  customizePrefixCls?: string
-) => {
   if (customizePrefixCls) return customizePrefixCls
 
   return suffixCls ? `ant-${suffixCls}` : 'ant'
@@ -97,16 +82,11 @@ const configState = (props: ConfigProviderProps) => {
   const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
     const { prefixCls, getPrefixCls } = props
     if (customizePrefixCls) return customizePrefixCls
-    const mergedPrefixCls =
+    const mergedPrefixCls = prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
-      prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
     return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
   }
-  const iconPrefixCls = computed(
+  const iconPrefixCls = computed(() => props?.iconPrefixCls ?? defaultIconPrefixCls)
-    () => props?.iconPrefixCls ?? defaultIconPrefixCls
+  const shouldWrapSSR = computed(() => iconPrefixCls.value !== defaultIconPrefixCls)
-  )
-  const shouldWrapSSR = computed(
-    () => iconPrefixCls.value !== defaultIconPrefixCls
-  )
   const csp = computed(() => props?.csp)
   const componentSize = computed(() => props?.componentSize)
   const componentDisabled = computed(() => props?.componentDisabled)
@@ -123,8 +103,7 @@ const configState = (props: ConfigProviderProps) => {
     direction
   }
 }
-const [useProviderConfigProvide, useProviderConfigInject] =
+const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(configState)
-  createInjectionState(configState)
 
 export { useProviderConfigProvide }
 export const useProviderConfigState = (): ReturnType<typeof configState> => {
@@ -136,7 +115,7 @@ export const useProviderConfigState = (): ReturnType<typeof configState> => {
       componentSize: computed(() => undefined),
       componentDisabled: computed(() => false),
       direction: computed(() => undefined),
-      autoInsertSpaceInButton: computed(() => true)
+      autoInsertSpaceInButton: computed(() => undefined)
     } as any)
   )
 }

package.json

@@ -20,7 +20,6 @@
     "build:site": "vitepress build",
     "preview": "vitepress preview"
   },
-  "packageManager": "pnpm@8.2.0",
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
     "@antd-tiny-vue/cssinjs": "^0.0.4",