Compare commits

..

No commits in common. "21c3a13f5aad79c76d01b240f896bcb0f0e802ab" and "6f22f963b437c5573ab682cca797f127d3361e1f" have entirely different histories.

8 changed files with 9 additions and 636 deletions

View File

@ -1,41 +1,11 @@
import { computed, defineComponent } from 'vue'
import { useProviderConfigState } from '../config-provider/context'
import useStyle from './style'
import { defineComponent } from 'vue'
const Button = defineComponent({
name: 'AButton',
inheritAttrs: false,
props: {
prefixCls: {
type: String
},
type: {
type: String,
default: 'default'
}
},
setup(props, { slots, attrs }) {
const { getPrefixCls } = useProviderConfigState()
const prefixCls = computed(() => getPrefixCls('btn', props.prefixCls))
const [wrapSSR, hashId] = useStyle(prefixCls)
const cls = computed(() => {
return {
[prefixCls.value]: true,
[`${prefixCls.value}-${props.type}`]: !!props.type,
[hashId.value]: true
}
})
props: {},
setup(props, { slots }) {
return () => {
return wrapSSR(
<button
{...attrs}
class={[cls.value, attrs.class]}
>
{slots.default?.()}
</button>
)
return <button>{slots.default?.()}</button>
}
}
})

View File

@ -1,80 +0,0 @@
import type { GenerateStyle } from '../../theme/internal'
import type { ButtonToken } from '.'
const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
// Border
[`> span, > ${buttonTypeCls}`]: {
'&:not(:last-child)': {
[`&, & > ${buttonTypeCls}`]: {
'&:not(:disabled)': {
borderInlineEndColor: borderColor
}
}
},
'&:not(:first-child)': {
[`&, & > ${buttonTypeCls}`]: {
'&:not(:disabled)': {
borderInlineStartColor: borderColor
}
}
}
}
})
const genGroupStyle: GenerateStyle<ButtonToken> = token => {
const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token
return {
[`${componentCls}-group`]: [
{
position: 'relative',
display: 'inline-flex',
// Border
[`> span, > ${componentCls}`]: {
'&:not(:last-child)': {
[`&, & > ${componentCls}`]: {
borderStartEndRadius: 0,
borderEndEndRadius: 0
}
},
'&:not(:first-child)': {
marginInlineStart: -lineWidth,
[`&, & > ${componentCls}`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0
}
}
},
[componentCls]: {
position: 'relative',
zIndex: 1,
[`&:hover,
&:focus,
&:active`]: {
zIndex: 2
},
'&[disabled]': {
zIndex: 0
}
},
[`${componentCls}-icon-only`]: {
fontSize
}
},
// Border Color
genButtonBorderStyle(`${componentCls}-primary`, colorPrimaryHover),
genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover)
]
}
}
export default genGroupStyle

View File

@ -1,503 +0,0 @@
import type { CSSInterpolation, CSSObject } from '@antd-tiny-vue/cssinjs'
import type { FullToken, GenerateStyle } from '../../theme/internal'
import { genComponentStyleHook, mergeToken } from '../../theme/internal'
import { genFocusStyle } from '../../style'
import { genCompactItemStyle } from '../../style/compact-item'
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical'
import genGroupStyle from './group'
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {}
export interface ButtonToken extends FullToken<'Button'> {
// FIXME: should be removed
colorOutlineDefault: string
buttonPaddingHorizontal: number
}
// ============================== Shared ==============================
const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
const { componentCls, iconCls } = token
return {
[componentCls]: {
outline: 'none',
position: 'relative',
display: 'inline-block',
fontWeight: 400,
whiteSpace: 'nowrap',
textAlign: 'center',
backgroundImage: 'none',
backgroundColor: 'transparent',
border: `${token.lineWidth}px ${token.lineType} transparent`,
cursor: 'pointer',
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
userSelect: 'none',
touchAction: 'manipulation',
lineHeight: token.lineHeight,
color: token.colorText,
'> span': {
display: 'inline-block'
},
// Leave a space between icon and text.
[`> ${iconCls} + span, > span + ${iconCls}`]: {
marginInlineStart: token.marginXS
},
'> a': {
color: 'currentColor'
},
'&:not(:disabled)': {
...genFocusStyle(token)
},
// make `btn-icon-only` not too narrow
[`&-icon-only${componentCls}-compact-item`]: {
flex: 'none'
},
// 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])`]: {
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 => ({
'&:not(:disabled)': {
'&:hover': hoverStyle,
'&:active': activeStyle
}
})
// ============================== Shape ===============================
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
minWidth: token.controlHeight,
paddingInlineStart: 0,
paddingInlineEnd: 0,
borderRadius: '50%'
})
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
borderRadius: token.controlHeight,
paddingInlineStart: token.controlHeight / 2,
paddingInlineEnd: token.controlHeight / 2
})
// =============================== Type ===============================
const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
cursor: 'not-allowed',
borderColor: token.colorBorder,
color: token.colorTextDisabled,
backgroundColor: token.colorBgContainerDisabled,
boxShadow: 'none'
})
const genGhostButtonStyle = (
btnCls: string,
textColor: string | false,
borderColor: string | false,
textColorDisabled: string | false,
borderColorDisabled: string | false,
hoverStyle?: CSSObject,
activeStyle?: CSSObject
): CSSObject => ({
[`&${btnCls}-background-ghost`]: {
color: textColor || undefined,
backgroundColor: 'transparent',
borderColor: borderColor || undefined,
boxShadow: 'none',
...genHoverActiveButtonStyle(
{
backgroundColor: 'transparent',
...hoverStyle
},
{
backgroundColor: 'transparent',
...activeStyle
}
),
'&:disabled': {
cursor: 'not-allowed',
color: textColorDisabled || undefined,
borderColor: borderColorDisabled || undefined
}
}
})
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
'&:disabled': {
...genDisabledStyle(token)
}
})
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genSolidDisabledButtonStyle(token)
})
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
'&:disabled': {
cursor: 'not-allowed',
color: token.colorTextDisabled
}
})
// Type: Default
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genSolidButtonStyle(token),
backgroundColor: token.colorBgContainer,
borderColor: token.colorBorder,
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
...genHoverActiveButtonStyle(
{
color: token.colorPrimaryHover,
borderColor: token.colorPrimaryHover
},
{
color: token.colorPrimaryActive,
borderColor: token.colorPrimaryActive
}
),
...genGhostButtonStyle(token.componentCls, token.colorBgContainer, token.colorBgContainer, token.colorTextDisabled, token.colorBorder),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
borderColor: token.colorError,
...genHoverActiveButtonStyle(
{
color: token.colorErrorHover,
borderColor: token.colorErrorBorderHover
},
{
color: token.colorErrorActive,
borderColor: token.colorErrorActive
}
),
...genGhostButtonStyle(token.componentCls, token.colorError, token.colorError, token.colorTextDisabled, token.colorBorder),
...genSolidDisabledButtonStyle(token)
}
})
// Type: Primary
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genSolidButtonStyle(token),
color: token.colorTextLightSolid,
backgroundColor: token.colorPrimary,
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
...genHoverActiveButtonStyle(
{
color: token.colorTextLightSolid,
backgroundColor: token.colorPrimaryHover
},
{
color: token.colorTextLightSolid,
backgroundColor: token.colorPrimaryActive
}
),
...genGhostButtonStyle(
token.componentCls,
token.colorPrimary,
token.colorPrimary,
token.colorTextDisabled,
token.colorBorder,
{
color: token.colorPrimaryHover,
borderColor: token.colorPrimaryHover
},
{
color: token.colorPrimaryActive,
borderColor: token.colorPrimaryActive
}
),
[`&${token.componentCls}-dangerous`]: {
backgroundColor: token.colorError,
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
...genHoverActiveButtonStyle(
{
backgroundColor: token.colorErrorHover
},
{
backgroundColor: token.colorErrorActive
}
),
...genGhostButtonStyle(
token.componentCls,
token.colorError,
token.colorError,
token.colorTextDisabled,
token.colorBorder,
{
color: token.colorErrorHover,
borderColor: token.colorErrorHover
},
{
color: token.colorErrorActive,
borderColor: token.colorErrorActive
}
),
...genSolidDisabledButtonStyle(token)
}
})
// Type: Dashed
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genDefaultButtonStyle(token),
borderStyle: 'dashed'
})
// Type: Link
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
color: token.colorLink,
...genHoverActiveButtonStyle(
{
color: token.colorLinkHover
},
{
color: token.colorLinkActive
}
),
...genPureDisabledButtonStyle(token),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
...genHoverActiveButtonStyle(
{
color: token.colorErrorHover
},
{
color: token.colorErrorActive
}
),
...genPureDisabledButtonStyle(token)
}
})
// Type: Text
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genHoverActiveButtonStyle(
{
color: token.colorText,
backgroundColor: token.colorBgTextHover
},
{
color: token.colorText,
backgroundColor: token.colorBgTextActive
}
),
...genPureDisabledButtonStyle(token),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
...genPureDisabledButtonStyle(token),
...genHoverActiveButtonStyle(
{
color: token.colorErrorHover,
backgroundColor: token.colorErrorBg
},
{
color: token.colorErrorHover,
backgroundColor: token.colorErrorBg
}
)
}
})
// Href and Disabled
const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genDisabledStyle(token),
[`&${token.componentCls}:hover`]: {
...genDisabledStyle(token)
}
})
const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
const { componentCls } = token
return {
[`${componentCls}-default`]: genDefaultButtonStyle(token),
[`${componentCls}-primary`]: genPrimaryButtonStyle(token),
[`${componentCls}-dashed`]: genDashedButtonStyle(token),
[`${componentCls}-link`]: genLinkButtonStyle(token),
[`${componentCls}-text`]: genTextButtonStyle(token),
[`${componentCls}-disabled`]: genDisabledButtonStyle(token)
}
}
// =============================== Size ===============================
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 paddingHorizontal = buttonPaddingHorizontal - lineWidth
const iconOnlyCls = `${componentCls}-icon-only`
return [
// Size
{
[`${componentCls}${sizePrefixCls}`]: {
fontSize,
height: controlHeight,
padding: `${paddingVertical}px ${paddingHorizontal}px`,
borderRadius,
[`&${iconOnlyCls}`]: {
width: controlHeight,
paddingInlineStart: 0,
paddingInlineEnd: 0,
[`&${componentCls}-round`]: {
width: 'auto'
},
'> span': {
transform: 'scale(1.143)' // 14px -> 16px
}
},
// Loading
[`&${componentCls}-loading`]: {
opacity: token.opacityLoading,
cursor: 'default'
},
[`${componentCls}-loading-icon`]: {
transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`
},
[`&:not(${iconOnlyCls}) ${componentCls}-loading-icon > ${iconCls}`]: {
marginInlineEnd: token.marginXS
}
}
},
// Shape - patch prefixCls again to override solid border radius style
{
[`${componentCls}${componentCls}-circle${sizePrefixCls}`]: genCircleButtonStyle(token)
},
{
[`${componentCls}${componentCls}-round${sizePrefixCls}`]: genRoundButtonStyle(token)
}
]
}
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token)
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
const smallToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightSM,
padding: token.paddingXS,
buttonPaddingHorizontal: 8, // Fixed padding
borderRadius: token.borderRadiusSM
})
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`)
}
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
const largeToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG,
borderRadius: token.borderRadiusLG
})
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`)
}
const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
const { componentCls } = token
return {
[componentCls]: {
[`&${componentCls}-block`]: {
width: '100%'
}
}
}
}
// ============================== Export ==============================
export default genComponentStyleHook('Button', token => {
const { controlTmpOutline, paddingContentHorizontal } = token
const buttonToken = mergeToken<ButtonToken>(token, {
colorOutlineDefault: controlTmpOutline,
buttonPaddingHorizontal: paddingContentHorizontal
})
return [
// Shared
genSharedButtonStyle(buttonToken),
// Size
genSizeSmallButtonStyle(buttonToken),
genSizeBaseButtonStyle(buttonToken),
genSizeLargeButtonStyle(buttonToken),
// Block
genBlockButtonStyle(buttonToken),
// Group (type, ghost, danger, disabled, loading)
genTypeButtonStyle(buttonToken),
// Button Group
genGroupStyle(buttonToken),
// Space Compact
genCompactItemStyle(token, { focus: false }),
genCompactItemVerticalStyle(token)
]
})

View File

@ -1,4 +1,4 @@
import { createInjectionState } from '@v-c/utils'
import { createInjectionState } from '@vueuse/core'
import { computed } from 'vue'
export const defaultIconPrefixCls = 'anticon'

View File

@ -2,8 +2,8 @@
// import type { ComponentToken as AnchorComponentToken } from '../../anchor/style'
// import type { ComponentToken as AvatarComponentToken } from '../../avatar/style'
// import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'
import type { ComponentToken as ButtonComponentToken } from '../../button/style'
// import type { ComponentToken as FloatButtonComponentToken } from '../../floats-button/style'
// import type { ComponentToken as ButtonComponentToken } from '../../button/style'
// import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'
// import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'
// import type { ComponentToken as CardComponentToken } from '../../card/style'
// import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'
@ -57,7 +57,7 @@ export interface ComponentTokenMap {
// Avatar?: AvatarComponentToken
// BackTop?: BackTopComponentToken
// Badge?: {}
Button?: ButtonComponentToken
// Button?: ButtonComponentToken
// Breadcrumb?: {}
// Card?: CardComponentToken
// Carousel?: CarouselComponentToken

View File

@ -1,6 +1,6 @@
import type { CSSInterpolation, Theme } from '@antd-tiny-vue/cssinjs'
import { createTheme, useCacheToken, useStyleRegister } from '@antd-tiny-vue/cssinjs'
import { createInjectionState } from '@v-c/utils'
import { createInjectionState } from '@vueuse/core'
import type { ComputedRef, VNodeChild } from 'vue'
import { computed } from 'vue'
import version from '../version'

View File

@ -17,7 +17,6 @@
"@ant-design/colors": "^7.0.0",
"@antd-tiny-vue/cssinjs": "^0.0.4",
"@ctrl/tinycolor": "^3.6.0",
"@v-c/utils": "^0.0.5",
"@vueuse/core": "^9.13.0",
"vue": "^3.2.0"
},

View File

@ -10,7 +10,6 @@ specifiers:
'@mistjs/tsconfig': ^1.0.0
'@mistjs/tsconfig-vue': ^0.0.3
'@types/node': ^18.13.0
'@v-c/utils': ^0.0.5
'@vitejs/plugin-vue-jsx': ^3.0.0
'@vueuse/core': ^9.13.0
eslint: ^8.34.0
@ -28,7 +27,6 @@ dependencies:
'@ant-design/colors': 7.0.0
'@antd-tiny-vue/cssinjs': 0.0.4_vue@3.2.47
'@ctrl/tinycolor': 3.6.0
'@v-c/utils': 0.0.5
'@vueuse/core': 9.13.0_vue@3.2.47
vue: 3.2.47
@ -1280,13 +1278,6 @@ packages:
eslint-visitor-keys: 3.3.0
dev: true
/@v-c/utils/0.0.5:
resolution: {integrity: sha512-HiK9iupJ3YIl4AO8VxvQMVh5G7pkTYo7wMhWdsWr6XOPw86p5MgWdQRLhQNX1WbDjA9BsbpjuO7I5PyEhGYoFw==}
dependencies:
lodash.clonedeep: 4.5.0
vue: 3.2.47
dev: false
/@vitejs/plugin-vue-jsx/3.0.0_vite@4.1.1+vue@3.2.47:
resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
engines: {node: ^14.18.0 || >=16.0.0}
@ -3450,10 +3441,6 @@ packages:
resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
dev: true
/lodash.clonedeep/4.5.0:
resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
dev: false
/lodash.isfunction/3.0.9:
resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
dev: true