chore: change docs

fix: add space children
chore: add info
2024-11-10 09:39:15 +08:00 · 2023-04-17 10:56:09 +08:00 · 2023-04-17 10:55:29 +08:00 · 2023-04-17 10:51:11 +08:00 · 2023-04-17 10:09:13 +08:00 · 2023-04-17 09:36:14 +08:00
5 changed files with 196 additions and 88 deletions
--- a/components/button/button-helper.tsx
+++ b/components/button/button-helper.tsx
@ -1,9 +1,26 @@
+// 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) {
@ -33,7 +50,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 +73,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
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -16,7 +16,11 @@ import { useCompactItemContext } from '../space/compact'
 import useStyle from './style'
 import type { ButtonProps, LoadingConfigType } from './interface'
 import { buttonProps } from './interface'
-import { isTwoCNChar, isUnBorderedButtonType } from './button-helper'
+import {
+  isTwoCNChar,
+  isUnBorderedButtonType,
+  spaceChildren
+} from './button-helper'
 type Loading = number | boolean

 function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
@ -58,8 +62,8 @@ const Button = defineComponent({
        small: 'sm',
        middle: undefined
      }
-      const sizeFullname = compactSize?.value || size.value
-      return sizeClassNameMap[sizeFullname]
+      const sizeFullName = compactSize?.value || size.value
+      return sizeClassNameMap[sizeFullName]
    })
    const disabled = useDisabled(props)
    const buttonRef = shallowRef<HTMLButtonElement | null>(null)
@ -73,6 +77,23 @@ 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(() => {
@ -84,7 +105,6 @@ const Button = defineComponent({
      } else {
        setLoading(loadingOrDelay.value.loading)
      }
-      // fixTwoCNChar()
    })

    function cleanupTimer() {
@ -128,28 +148,10 @@ const Button = defineComponent({
      const { shape, rootClassName, ghost, type, block, danger } = props
      const icon = getSlotsProps(slots, props, 'icon')
      const children = filterEmpty(slots.default?.())
-      const isNeedInserted = () => {
-        return (
-          children.length === 1 &&
-          !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)
-        }
-      }
+      isNeedInserted =
+        children.length === 1 &&
+        !slots.icon &&
+        isUnBorderedButtonType(props.type)
      fixTwoCNChar()
      showError()
      const iconType = innerLoading.value ? 'loading' : icon
@ -181,8 +183,12 @@ 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
@ -193,13 +199,19 @@ const Button = defineComponent({
            ref={buttonRef}
          >
            {iconNode}
-            {children}
+            {kids}
          </a>
        )
      }
      let buttonNode = (
-        <button {...attrs} onClick={handleClick} class={classes}>
-          {children}
+        <button
+          {...attrs}
+          onClick={handleClick}
+          class={classes}
+          ref={buttonRef}
+        >
+          {iconNode}
+          {kids}
        </button>
      )

--- 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<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, {
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@ -1,8 +1,20 @@
-import { booleanType, createInjectionState, functionType, objectType, someType, stringType } from '@v-c/utils'
+import {
+  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 { AliasToken, MapToken, OverrideToken, SeedToken } from '../theme/interface'
+import type {
+  AliasToken,
+  MapToken,
+  OverrideToken,
+  SeedToken
+} from '../theme/interface'
 import type { RenderEmptyHandler } from './default-render-empty'
 import type { ConfigProviderProps } from './index'

@ -34,7 +46,10 @@ export interface ThemeConfig {
 }
 export const defaultIconPrefixCls = 'anticon'

-const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
+const defaultGetPrefixCls = (
+  suffixCls?: string,
+  customizePrefixCls?: string
+) => {
  if (customizePrefixCls) return customizePrefixCls

  return suffixCls ? `ant-${suffixCls}` : 'ant'
@ -82,11 +97,16 @@ const configState = (props: ConfigProviderProps) => {
  const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
    const { prefixCls, getPrefixCls } = props
    if (customizePrefixCls) return customizePrefixCls
-    const mergedPrefixCls = prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
+    const mergedPrefixCls =
+      prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
    return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
  }
-  const iconPrefixCls = computed(() => props?.iconPrefixCls ?? defaultIconPrefixCls)
-  const shouldWrapSSR = computed(() => iconPrefixCls.value !== defaultIconPrefixCls)
+  const iconPrefixCls = computed(
+    () => props?.iconPrefixCls ?? defaultIconPrefixCls
+  )
+  const shouldWrapSSR = computed(
+    () => iconPrefixCls.value !== defaultIconPrefixCls
+  )
  const csp = computed(() => props?.csp)
  const componentSize = computed(() => props?.componentSize)
  const componentDisabled = computed(() => props?.componentDisabled)
@ -103,7 +123,8 @@ const configState = (props: ConfigProviderProps) => {
    direction
  }
 }
-const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(configState)
+const [useProviderConfigProvide, useProviderConfigInject] =
+  createInjectionState(configState)

 export { useProviderConfigProvide }
 export const useProviderConfigState = (): ReturnType<typeof configState> => {
@ -115,7 +136,7 @@ export const useProviderConfigState = (): ReturnType<typeof configState> => {
      componentSize: computed(() => undefined),
      componentDisabled: computed(() => false),
      direction: computed(() => undefined),
-      autoInsertSpaceInButton: computed(() => undefined)
+      autoInsertSpaceInButton: computed(() => true)
    } as any)
  )
 }
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
    "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",
Author	SHA1	Message	Date
zhuzhengjian	07d0ff0785	chore: change docs	2023-04-17 10:56:09 +08:00
zhuzhengjian	2208af0174	fix: add space children	2023-04-17 10:55:29 +08:00
zhuzhengjian	63ac0cb613	chore: add info	2023-04-17 10:51:11 +08:00
zhuzhengjian	7cead859d1	chore: change info	2023-04-17 10:09:13 +08:00
zhuzhengjian	7ae7f3a878	chore: change packageManger	2023-04-17 09:36:14 +08:00