mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2025-07-03 02:23:12 +08:00
Compare commits
5 Commits
dev
...
9243370f1c
Author | SHA1 | Date | |
---|---|---|---|
9243370f1c | |||
69388270af | |||
691bd2b965 | |||
21c3a13f5a | |||
77bef2a548 |
60
components/_util/wave/index.tsx
Normal file
60
components/_util/wave/index.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import type { VNode } from 'vue'
|
||||
import { cloneVNode, computed, defineComponent, shallowRef } from 'vue'
|
||||
import { booleanType, classNames, filterEmpty, isVisible } from '@v-c/utils'
|
||||
import { useEventListener } from '@vueuse/core'
|
||||
import { useProviderConfigState } from '../../config-provider/context'
|
||||
import useStyle from './style'
|
||||
import useWave from './use-wave'
|
||||
|
||||
const Wave = defineComponent({
|
||||
name: 'Wave',
|
||||
props: {
|
||||
disabled: booleanType()
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const { getPrefixCls } = useProviderConfigState()
|
||||
const containerRef = shallowRef()
|
||||
|
||||
// ============================== Style ===============================
|
||||
const prefixCls = computed(() => getPrefixCls('wave'))
|
||||
const [, hashId] = useStyle(prefixCls)
|
||||
const showWave = useWave(
|
||||
containerRef,
|
||||
computed(() => classNames(prefixCls.value, hashId.value))
|
||||
)
|
||||
|
||||
const onClick = (e: MouseEvent) => {
|
||||
const node = containerRef.value
|
||||
const { disabled } = props
|
||||
if (!node || node.nodeType !== 1 || disabled) {
|
||||
return
|
||||
}
|
||||
// Fix radio button click twice
|
||||
if (
|
||||
(e.target as HTMLElement).tagName === 'INPUT' ||
|
||||
!isVisible(e.target as HTMLElement) ||
|
||||
// No need wave
|
||||
!node.getAttribute ||
|
||||
node.getAttribute('disabled') ||
|
||||
(node as HTMLInputElement).disabled ||
|
||||
node.className.includes('disabled') ||
|
||||
node.className.includes('-leave')
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
showWave()
|
||||
}
|
||||
|
||||
useEventListener(containerRef, 'click', onClick, true)
|
||||
|
||||
return () => {
|
||||
const children = slots.default?.()
|
||||
const child = filterEmpty(children)[0]
|
||||
if (!child) return null
|
||||
return cloneVNode(child as VNode, { ref: containerRef })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Wave
|
34
components/_util/wave/style.ts
Normal file
34
components/_util/wave/style.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { genComponentStyleHook } from '../../theme/internal'
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal'
|
||||
|
||||
export interface ComponentToken {}
|
||||
|
||||
export interface WaveToken extends FullToken<'Wave'> {}
|
||||
|
||||
const genWaveStyle: GenerateStyle<WaveToken> = token => {
|
||||
const { componentCls, colorPrimary } = token
|
||||
return {
|
||||
[componentCls]: {
|
||||
position: 'absolute',
|
||||
background: 'transparent',
|
||||
pointerEvents: 'none',
|
||||
boxSizing: 'border-box',
|
||||
color: `var(--wave-color, ${colorPrimary})`,
|
||||
|
||||
boxShadow: `0 0 0 0 currentcolor`,
|
||||
opacity: 0.2,
|
||||
|
||||
// =================== Motion ===================
|
||||
'&.wave-motion-appear': {
|
||||
transition: [`box-shadow 0.4s ${token.motionEaseOutCirc}`, `opacity 2s ${token.motionEaseOutCirc}`].join(','),
|
||||
|
||||
'&-active': {
|
||||
boxShadow: `0 0 0 6px currentcolor`,
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default genComponentStyleHook('Wave', token => [genWaveStyle(token)])
|
11
components/_util/wave/use-wave.ts
Normal file
11
components/_util/wave/use-wave.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import type { ComputedRef, Ref } from 'vue'
|
||||
import showWaveEffect from './wave-effect'
|
||||
|
||||
export default function useWave(nodeRef: Ref<HTMLElement>, className: ComputedRef<string>): VoidFunction {
|
||||
function showWave() {
|
||||
// const node = nodeRef.va!
|
||||
showWaveEffect(nodeRef, className)
|
||||
}
|
||||
|
||||
return showWave
|
||||
}
|
35
components/_util/wave/util.ts
Normal file
35
components/_util/wave/util.ts
Normal file
@ -0,0 +1,35 @@
|
||||
export function isNotGrey(color: string) {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/)
|
||||
if (match && match[1] && match[2] && match[3]) {
|
||||
return !(match[1] === match[2] && match[2] === match[3])
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
export function isValidWaveColor(color: string) {
|
||||
return (
|
||||
color &&
|
||||
color !== '#fff' &&
|
||||
color !== '#ffffff' &&
|
||||
color !== 'rgb(255, 255, 255)' &&
|
||||
color !== 'rgba(255, 255, 255, 1)' &&
|
||||
isNotGrey(color) &&
|
||||
!/rgba\((?:\d*, ){3}0\)/.test(color) && // any transparent rgba color
|
||||
color !== 'transparent'
|
||||
)
|
||||
}
|
||||
|
||||
export function getTargetWaveColor(node: HTMLElement) {
|
||||
const { borderTopColor, borderColor, backgroundColor } = getComputedStyle(node)
|
||||
if (isValidWaveColor(borderTopColor)) {
|
||||
return borderTopColor
|
||||
}
|
||||
if (isValidWaveColor(borderColor)) {
|
||||
return borderColor
|
||||
}
|
||||
if (isValidWaveColor(backgroundColor)) {
|
||||
return backgroundColor
|
||||
}
|
||||
return null
|
||||
}
|
108
components/_util/wave/wave-effect.tsx
Normal file
108
components/_util/wave/wave-effect.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
import type { ComputedRef, Ref } from 'vue'
|
||||
import { unrefElement, useResizeObserver } from '@vueuse/core'
|
||||
import { computed, defineComponent, onMounted, render, shallowRef, toRef } from 'vue'
|
||||
import { classNames, delayTimer, objectType, safeNextick, useState } from '@v-c/utils'
|
||||
import { getTargetWaveColor } from './util'
|
||||
function validateNum(value: number) {
|
||||
return Number.isNaN(value) ? 0 : value
|
||||
}
|
||||
export const WaveEffect = defineComponent({
|
||||
name: 'WaveEffect',
|
||||
props: {
|
||||
target: objectType<HTMLElement>()
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const divRef = shallowRef<HTMLDivElement | undefined>(undefined)
|
||||
|
||||
const [color, setWaveColor] = useState<string | null>(null)
|
||||
const [borderRadius, setBorderRadius] = useState<number[]>([])
|
||||
const [left, setLeft] = useState(0)
|
||||
const [top, setTop] = useState(0)
|
||||
const [width, setWidth] = useState(0)
|
||||
const [height, setHeight] = useState(0)
|
||||
const [enabled, setEnabled] = useState(false)
|
||||
const [active, setActive] = useState(false)
|
||||
const waveStyle = computed(() => {
|
||||
const style: Record<string, any> = {
|
||||
left: `${left.value}px`,
|
||||
top: `${top.value}px`,
|
||||
width: `${width.value}px`,
|
||||
height: `${height.value}px`,
|
||||
borderRadius: borderRadius.value.map(radius => `${radius}px`).join(' ')
|
||||
}
|
||||
if (color.value) {
|
||||
style['--wave-color'] = color.value
|
||||
}
|
||||
return style
|
||||
})
|
||||
function syncPos() {
|
||||
const { target } = props
|
||||
const nodeStyle = getComputedStyle(target)
|
||||
|
||||
// Get wave color from target
|
||||
setWaveColor(getTargetWaveColor(target))
|
||||
|
||||
const isStatic = nodeStyle.position === 'static'
|
||||
|
||||
// Rect
|
||||
const { borderLeftWidth, borderTopWidth } = nodeStyle
|
||||
setLeft(isStatic ? target.offsetLeft : validateNum(-parseFloat(borderLeftWidth)))
|
||||
setTop(isStatic ? target.offsetTop : validateNum(-parseFloat(borderTopWidth)))
|
||||
setWidth(target.offsetWidth)
|
||||
setHeight(target.offsetHeight)
|
||||
|
||||
// Get border radius
|
||||
const { borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius } = nodeStyle
|
||||
|
||||
setBorderRadius([borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius].map(radius => validateNum(parseFloat(radius))))
|
||||
}
|
||||
onMounted(async () => {
|
||||
syncPos()
|
||||
setEnabled(true)
|
||||
await safeNextick()
|
||||
setActive(true)
|
||||
await delayTimer(5000)
|
||||
const holder = divRef.value?.parentElement
|
||||
holder!.parentElement?.removeChild(holder!)
|
||||
})
|
||||
const motionClassName = computed(() =>
|
||||
classNames({
|
||||
'wave-motion-appear': enabled.value,
|
||||
'wave-motion': true
|
||||
})
|
||||
)
|
||||
const motionClassNameActive = computed(() => ({
|
||||
'wave-motion-appear-active': active.value
|
||||
}))
|
||||
useResizeObserver(toRef(props, 'target'), syncPos)
|
||||
|
||||
return () => {
|
||||
if (!enabled.value) return null
|
||||
return (
|
||||
<div
|
||||
ref={divRef}
|
||||
class={[attrs.class, motionClassName.value, motionClassNameActive.value]}
|
||||
style={waveStyle.value}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default function showWaveEffect(nodeRef: Ref<HTMLElement>, className: ComputedRef<string>) {
|
||||
const node = unrefElement(nodeRef)
|
||||
// Create holder
|
||||
const holder = document.createElement('div')
|
||||
holder.style.position = 'absolute'
|
||||
holder.style.left = `0px`
|
||||
holder.style.top = `0px`
|
||||
node?.insertBefore(holder, node?.firstChild)
|
||||
|
||||
render(
|
||||
<WaveEffect
|
||||
target={node}
|
||||
class={className.value}
|
||||
/>,
|
||||
holder
|
||||
)
|
||||
}
|
@ -1,11 +1,44 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import { useProviderConfigState } from '../config-provider/context'
|
||||
import Wave from '../_util/wave'
|
||||
import useStyle from './style'
|
||||
|
||||
const Button = defineComponent({
|
||||
name: 'AButton',
|
||||
props: {},
|
||||
setup(props, { slots }) {
|
||||
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
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
return <button>{slots.default?.()}</button>
|
||||
return wrapSSR(
|
||||
<Wave>
|
||||
<button
|
||||
{...attrs}
|
||||
class={[cls.value, attrs.class]}
|
||||
>
|
||||
{slots.default?.()}
|
||||
</button>
|
||||
</Wave>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
80
components/button/style/group.ts
Normal file
80
components/button/style/group.ts
Normal file
@ -0,0 +1,80 @@
|
||||
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
|
503
components/button/style/index.ts
Normal file
503
components/button/style/index.ts
Normal file
@ -0,0 +1,503 @@
|
||||
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 '@vueuse/core'
|
||||
import { createInjectionState } from '@v-c/utils'
|
||||
import { computed } from 'vue'
|
||||
|
||||
export const defaultIconPrefixCls = 'anticon'
|
||||
|
@ -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 '../../float-button/style'
|
||||
import type { ComponentToken as ButtonComponentToken } from '../../button/style'
|
||||
// import type { ComponentToken as FloatButtonComponentToken } from '../../floats-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'
|
||||
@ -48,7 +48,7 @@
|
||||
// import type { ComponentToken as TourComponentToken } from '../../tour/style'
|
||||
// import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'
|
||||
// import type { ComponentToken as AppComponentToken } from '../../app/style'
|
||||
// import type { ComponentToken as WaveToken } from '../../_util/wave/style'
|
||||
import type { ComponentToken as WaveToken } from '../../_util/wave/style'
|
||||
|
||||
export interface ComponentTokenMap {
|
||||
Affix?: {}
|
||||
@ -57,7 +57,7 @@ export interface ComponentTokenMap {
|
||||
// Avatar?: AvatarComponentToken
|
||||
// BackTop?: BackTopComponentToken
|
||||
// Badge?: {}
|
||||
// Button?: ButtonComponentToken
|
||||
Button?: ButtonComponentToken
|
||||
// Breadcrumb?: {}
|
||||
// Card?: CardComponentToken
|
||||
// Carousel?: CarouselComponentToken
|
||||
@ -115,5 +115,5 @@ export interface ComponentTokenMap {
|
||||
// App?: AppComponentToken
|
||||
//
|
||||
// /** @private Internal TS definition. Do not use. */
|
||||
// Wave?: WaveToken
|
||||
Wave?: WaveToken
|
||||
}
|
||||
|
@ -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 '@vueuse/core'
|
||||
import { createInjectionState } from '@v-c/utils'
|
||||
import type { ComputedRef, VNodeChild } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import version from '../version'
|
||||
|
@ -17,6 +17,7 @@
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@antd-tiny-vue/cssinjs": "^0.0.4",
|
||||
"@ctrl/tinycolor": "^3.6.0",
|
||||
"@v-c/utils": "^0.0.12",
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"vue": "^3.2.0"
|
||||
},
|
||||
|
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@ -10,6 +10,7 @@ specifiers:
|
||||
'@mistjs/tsconfig': ^1.0.0
|
||||
'@mistjs/tsconfig-vue': ^0.0.3
|
||||
'@types/node': ^18.13.0
|
||||
'@v-c/utils': ^0.0.12
|
||||
'@vitejs/plugin-vue-jsx': ^3.0.0
|
||||
'@vueuse/core': ^9.13.0
|
||||
eslint: ^8.34.0
|
||||
@ -27,6 +28,7 @@ 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.12
|
||||
'@vueuse/core': 9.13.0_vue@3.2.47
|
||||
vue: 3.2.47
|
||||
|
||||
@ -1278,6 +1280,13 @@ packages:
|
||||
eslint-visitor-keys: 3.3.0
|
||||
dev: true
|
||||
|
||||
/@v-c/utils/0.0.12:
|
||||
resolution: {integrity: sha512-onwjLSQpH6SG78WJnKiw8XgJfCgYtq59zFW19yiT22ik7ncaLkjojjCU0cAZDA6j6zY6li5U0VuZk91KbOrw2A==}
|
||||
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}
|
||||
@ -3441,6 +3450,10 @@ 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
|
||||
|
@ -12,6 +12,7 @@ title: 基础按钮
|
||||
<template>
|
||||
<div>
|
||||
<a-button>这是按钮</a-button>
|
||||
<div style="height: 10px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
Reference in New Issue
Block a user