yanyu/antd-tiny-vue
1
0
Fork 0
mirror of https://github.com/antd-tiny-vue/antd-tiny-vue.git synced 2025-03-16 07:25:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: yanyu:07d0ff0785f646d72b34a9b0a525fc3bed23dd4e
Branches Tags
yanyu:main
yanyu:dev
..
compare: yanyu:27f29807688bef8298d9e4f0b9e51929a143e03e
Branches Tags
yanyu:main
yanyu:dev

No commits in common. "07d0ff0785f646d72b34a9b0a525fc3bed23dd4e" and "27f29807688bef8298d9e4f0b9e51929a143e03e" have entirely different histories.
07d0ff0785 ... 27f2980768

5 changed files with 88 additions and 196 deletions
Show Stats Expand all files Collapse all files

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

@ -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 = [
'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

72
components/button/button.tsx
View File

@ -16,11 +16,7 @@ import { useCompactItemContext } from '../space/compact'
import useStyle from './style'
import type { ButtonProps, LoadingConfigType } from './interface'
import { buttonProps } from './interface'
import {
isTwoCNChar,
isUnBorderedButtonType,
spaceChildren
} from './button-helper'
import { isTwoCNChar, isUnBorderedButtonType } 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
return sizeClassNameMap[sizeFullName]
const sizeFullname = compactSize?.value || size.value
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 =
children.length === 1 &&
!slots.icon &&
isUnBorderedButtonType(props.type)
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)
}
}
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
{...attrs}
onClick={handleClick}
class={classes}
ref={buttonRef}
>
{iconNode}
{kids}
<button {...attrs} onClick={handleClick} class={classes}>
{children}
</button>
)

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

@ -16,9 +16,7 @@ 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 {
@ -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,
height: `calc(100% + ${token.lineWidth * 2}px)`,
width: `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 = (
hoverStyle: CSSObject,
activeStyle: CSSObject
): CSSObject => ({
const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
'&:not(:disabled)': {
'&:hover': hoverStyle,
'&:active': activeStyle
@ -113,23 +106,21 @@ const genHoverActiveButtonStyle = (
})
// ============================== 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,
@ -171,21 +162,17 @@ 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
@ -193,9 +180,7 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
})
// Type: Default
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
token
) => ({
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genSolidButtonStyle(token),
backgroundColor: token.colorBgContainer,
@ -214,13 +199,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
}
),
...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,
@ -237,21 +216,13 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
}
),
...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,
@ -319,15 +290,13 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
})
// 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(
@ -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> = (
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 {
@ -413,25 +380,10 @@ 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`
@ -475,20 +427,17 @@ const genSizeButtonStyle = (
// 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,
@ -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, {

37
components/config-provider/context.ts
View File

@ -1,20 +1,8 @@
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'
@ -46,10 +34,7 @@ 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'
@ -97,16 +82,11 @@ 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)
@ -123,8 +103,7 @@ const configState = (props: ConfigProviderProps) => {
direction
}
}
const [useProviderConfigProvide, useProviderConfigInject] =
createInjectionState(configState)
const [useProviderConfigProvide, useProviderConfigInject] = 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)
)
}

1
package.json
View File

@ -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",