mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2025-06-07 02:34:23 +08:00
Compare commits
No commits in common. "21c3a13f5aad79c76d01b240f896bcb0f0e802ab" and "6f22f963b437c5573ab682cca797f127d3361e1f" have entirely different histories.
21c3a13f5a
...
6f22f963b4
@ -1,41 +1,11 @@
|
|||||||
import { computed, defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { useProviderConfigState } from '../config-provider/context'
|
|
||||||
import useStyle from './style'
|
|
||||||
|
|
||||||
const Button = defineComponent({
|
const Button = defineComponent({
|
||||||
name: 'AButton',
|
name: 'AButton',
|
||||||
inheritAttrs: false,
|
props: {},
|
||||||
props: {
|
setup(props, { slots }) {
|
||||||
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
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
return wrapSSR(
|
return <button>{slots.default?.()}</button>
|
||||||
<button
|
|
||||||
{...attrs}
|
|
||||||
class={[cls.value, attrs.class]}
|
|
||||||
>
|
|
||||||
{slots.default?.()}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -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
|
|
@ -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)
|
|
||||||
]
|
|
||||||
})
|
|
@ -1,4 +1,4 @@
|
|||||||
import { createInjectionState } from '@v-c/utils'
|
import { createInjectionState } from '@vueuse/core'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
|
|
||||||
export const defaultIconPrefixCls = 'anticon'
|
export const defaultIconPrefixCls = 'anticon'
|
||||||
|
@ -2,8 +2,8 @@
|
|||||||
// import type { ComponentToken as AnchorComponentToken } from '../../anchor/style'
|
// import type { ComponentToken as AnchorComponentToken } from '../../anchor/style'
|
||||||
// import type { ComponentToken as AvatarComponentToken } from '../../avatar/style'
|
// import type { ComponentToken as AvatarComponentToken } from '../../avatar/style'
|
||||||
// import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'
|
// import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'
|
||||||
import type { ComponentToken as ButtonComponentToken } from '../../button/style'
|
// import type { ComponentToken as ButtonComponentToken } from '../../button/style'
|
||||||
// import type { ComponentToken as FloatButtonComponentToken } from '../../floats-button/style'
|
// import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'
|
||||||
// import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'
|
// import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'
|
||||||
// import type { ComponentToken as CardComponentToken } from '../../card/style'
|
// import type { ComponentToken as CardComponentToken } from '../../card/style'
|
||||||
// import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'
|
// import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'
|
||||||
@ -57,7 +57,7 @@ export interface ComponentTokenMap {
|
|||||||
// Avatar?: AvatarComponentToken
|
// Avatar?: AvatarComponentToken
|
||||||
// BackTop?: BackTopComponentToken
|
// BackTop?: BackTopComponentToken
|
||||||
// Badge?: {}
|
// Badge?: {}
|
||||||
Button?: ButtonComponentToken
|
// Button?: ButtonComponentToken
|
||||||
// Breadcrumb?: {}
|
// Breadcrumb?: {}
|
||||||
// Card?: CardComponentToken
|
// Card?: CardComponentToken
|
||||||
// Carousel?: CarouselComponentToken
|
// Carousel?: CarouselComponentToken
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import type { CSSInterpolation, Theme } from '@antd-tiny-vue/cssinjs'
|
import type { CSSInterpolation, Theme } from '@antd-tiny-vue/cssinjs'
|
||||||
import { createTheme, useCacheToken, useStyleRegister } 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 type { ComputedRef, VNodeChild } from 'vue'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import version from '../version'
|
import version from '../version'
|
||||||
|
@ -17,7 +17,6 @@
|
|||||||
"@ant-design/colors": "^7.0.0",
|
"@ant-design/colors": "^7.0.0",
|
||||||
"@antd-tiny-vue/cssinjs": "^0.0.4",
|
"@antd-tiny-vue/cssinjs": "^0.0.4",
|
||||||
"@ctrl/tinycolor": "^3.6.0",
|
"@ctrl/tinycolor": "^3.6.0",
|
||||||
"@v-c/utils": "^0.0.5",
|
|
||||||
"@vueuse/core": "^9.13.0",
|
"@vueuse/core": "^9.13.0",
|
||||||
"vue": "^3.2.0"
|
"vue": "^3.2.0"
|
||||||
},
|
},
|
||||||
|
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@ -10,7 +10,6 @@ specifiers:
|
|||||||
'@mistjs/tsconfig': ^1.0.0
|
'@mistjs/tsconfig': ^1.0.0
|
||||||
'@mistjs/tsconfig-vue': ^0.0.3
|
'@mistjs/tsconfig-vue': ^0.0.3
|
||||||
'@types/node': ^18.13.0
|
'@types/node': ^18.13.0
|
||||||
'@v-c/utils': ^0.0.5
|
|
||||||
'@vitejs/plugin-vue-jsx': ^3.0.0
|
'@vitejs/plugin-vue-jsx': ^3.0.0
|
||||||
'@vueuse/core': ^9.13.0
|
'@vueuse/core': ^9.13.0
|
||||||
eslint: ^8.34.0
|
eslint: ^8.34.0
|
||||||
@ -28,7 +27,6 @@ dependencies:
|
|||||||
'@ant-design/colors': 7.0.0
|
'@ant-design/colors': 7.0.0
|
||||||
'@antd-tiny-vue/cssinjs': 0.0.4_vue@3.2.47
|
'@antd-tiny-vue/cssinjs': 0.0.4_vue@3.2.47
|
||||||
'@ctrl/tinycolor': 3.6.0
|
'@ctrl/tinycolor': 3.6.0
|
||||||
'@v-c/utils': 0.0.5
|
|
||||||
'@vueuse/core': 9.13.0_vue@3.2.47
|
'@vueuse/core': 9.13.0_vue@3.2.47
|
||||||
vue: 3.2.47
|
vue: 3.2.47
|
||||||
|
|
||||||
@ -1280,13 +1278,6 @@ packages:
|
|||||||
eslint-visitor-keys: 3.3.0
|
eslint-visitor-keys: 3.3.0
|
||||||
dev: true
|
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:
|
/@vitejs/plugin-vue-jsx/3.0.0_vite@4.1.1+vue@3.2.47:
|
||||||
resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
|
resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
|
||||||
engines: {node: ^14.18.0 || >=16.0.0}
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
@ -3450,10 +3441,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
|
resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/lodash.clonedeep/4.5.0:
|
|
||||||
resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/lodash.isfunction/3.0.9:
|
/lodash.isfunction/3.0.9:
|
||||||
resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
|
resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
|
||||||
dev: true
|
dev: true
|
||||||
|
Loading…
x
Reference in New Issue
Block a user