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

Compare commits

base: yanyu:98071ea5f05a75cd9f951fcaf62c4690e3ddcb0d
Branches Tags
yanyu:main
yanyu:dev
..
compare: yanyu:71244b2086d5225752dedd55e8ea316e7c900297
Branches Tags
yanyu:main
yanyu:dev

No commits in common. "98071ea5f05a75cd9f951fcaf62c4690e3ddcb0d" and "71244b2086d5225752dedd55e8ea316e7c900297" have entirely different histories.
98071ea5f0 ... 71244b2086

13 changed files with 28 additions and 726 deletions
Show Stats Expand all files Collapse all files

11
components/_util/wave/index.tsx
View File

@ -1,11 +0,0 @@
import { defineComponent } from 'vue'
const Wave = defineComponent({
name: 'Wave',
inheritAttrs: false,
setup() {
return () => {}
}
})
export default Wave

34
components/_util/wave/style.ts
View File

@ -1,34 +0,0 @@
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)])

35
components/_util/wave/util.ts
View File

@ -1,35 +0,0 @@
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
}

30
components/button/button.tsx
View File

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

80
components/button/style/group.ts
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

503
components/button/style/index.ts
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),
genCompactItemVerticalStyle(token)
]
})

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

@ -1,4 +1,5 @@
import { computed, inject, provide } from 'vue' import { createInjectionState } from '@vueuse/core'
import { computed } from 'vue'
export const defaultIconPrefixCls = 'anticon' export const defaultIconPrefixCls = 'anticon'
@ -7,27 +8,21 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) =>
return suffixCls ? `ant-${suffixCls}` : 'ant' return suffixCls ? `ant-${suffixCls}` : 'ant'
} }
const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(() => {
export const ConfigProviderContext = Symbol('ConfigProviderContext')
export const defaultConfigProviderState = () => {
const getPrefixCls = defaultGetPrefixCls const getPrefixCls = defaultGetPrefixCls
const iconPrefixCls = computed(() => defaultIconPrefixCls) const iconPrefixCls = computed(() => defaultIconPrefixCls)
return { return {
getPrefixCls, getPrefixCls,
iconPrefixCls iconPrefixCls
} }
} })
const useProviderConfigProvide = () => {
const defaultState = defaultConfigProviderState()
provide(ConfigProviderContext, defaultState)
return {
...defaultState
}
}
export { useProviderConfigProvide } export { useProviderConfigProvide }
export const useProviderConfigState = () => { export const useProviderConfigState = () => {
return inject(ConfigProviderContext, defaultConfigProviderState()) return (
useProviderConfigInject() ?? {
getPrefixCls: defaultGetPrefixCls,
iconPrefixCls: computed(() => defaultIconPrefixCls)
}
)
} }

8
components/theme/interface/components.ts
View File

@ -2,7 +2,7 @@
// 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 '../../float-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'
@ -48,7 +48,7 @@ import type { ComponentToken as ButtonComponentToken } from '../../button/style'
// import type { ComponentToken as TourComponentToken } from '../../tour/style' // import type { ComponentToken as TourComponentToken } from '../../tour/style'
// import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style' // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'
// import type { ComponentToken as AppComponentToken } from '../../app/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 { export interface ComponentTokenMap {
Affix?: {} Affix?: {}
@ -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
@ -115,5 +115,5 @@ export interface ComponentTokenMap {
// App?: AppComponentToken // App?: AppComponentToken
// //
// /** @private Internal TS definition. Do not use. */ // /** @private Internal TS definition. Do not use. */
Wave?: WaveToken // Wave?: WaveToken
} }

15
components/theme/internal.ts
View File

@ -1,7 +1,8 @@
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 '@vueuse/core'
import type { ComputedRef, VNodeChild } from 'vue' import type { ComputedRef, VNodeChild } from 'vue'
import { computed, inject, provide } from 'vue' import { computed } from 'vue'
import version from '../version' import version from '../version'
import type { AliasToken, GlobalToken, MapToken, OverrideToken, PresetColorKey, PresetColorType, SeedToken } from './interface' import type { AliasToken, GlobalToken, MapToken, OverrideToken, PresetColorKey, PresetColorType, SeedToken } from './interface'
import { PresetColors } from './interface' import { PresetColors } from './interface'
@ -49,14 +50,12 @@ export interface DesignTokenConfig {
hashed?: string | boolean hashed?: string | boolean
} }
export const DesignTokenContext = Symbol('DesignTokenContext') const [useDesignTokenProvider, useDesignTokenInject] = createInjectionState((token: DesignTokenConfig) => {
return token
const useDesignTokenProvider = (token: DesignTokenConfig) => { })
provide(DesignTokenContext, token)
}
export { useDesignTokenProvider } export { useDesignTokenProvider }
export const useDesignTokenState = () => inject(DesignTokenContext, defaultConfig) export const useDesignTokenState = () => useDesignTokenInject() ?? defaultConfig
// ================================== Hook ================================== // ================================== Hook ==================================
export function useToken(): [ComputedRef<Theme<SeedToken, MapToken>>, ComputedRef<GlobalToken>, ComputedRef<string>] { export function useToken(): [ComputedRef<Theme<SeedToken, MapToken>>, ComputedRef<GlobalToken>, ComputedRef<string>] {
@ -78,6 +77,6 @@ export function useToken(): [ComputedRef<Theme<SeedToken, MapToken>>, ComputedRe
return [mergedTheme, computed(() => cacheToken.value?.[0]), computed(() => (designTokenContext.hashed ? cacheToken.value?.[1] : ''))] return [mergedTheme, computed(() => cacheToken.value?.[0]), computed(() => (designTokenContext.hashed ? cacheToken.value?.[1] : ''))]
} }
export type UseComponentStyleResult = [(node: VNodeChild) => VNodeChild, ComputedRef<string>] export type UseComponentStyleResult = [(node: VNodeChild) => VNodeChild, string]
export type GenerateStyle<ComponentToken extends object = AliasToken, ReturnType = CSSInterpolation> = (token: ComponentToken) => ReturnType export type GenerateStyle<ComponentToken extends object = AliasToken, ReturnType = CSSInterpolation> = (token: ComponentToken) => ReturnType

2
components/theme/util/genComponentStyleHook.ts
View File

@ -92,7 +92,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
flush(component, mergedComponentToken) flush(component, mergedComponentToken)
return [genCommonStyle(token.value, prefixCls.value), styleInterpolation] return [genCommonStyle(token.value, prefixCls.value), styleInterpolation]
}), }),
hashId hashId.value
] ]
} }
} }

2
site/.vitepress/theme/index.ts
View File

@ -2,13 +2,11 @@ import type { Theme } from 'vitepress'
// eslint-disable-next-line import/no-named-as-default // eslint-disable-next-line import/no-named-as-default
import DefaultTheme from 'vitepress/theme' import DefaultTheme from 'vitepress/theme'
import { AntdTheme } from 'vite-plugin-vitepress-demo/theme' import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
import Antd from '../../../components'
export default { export default {
...DefaultTheme, ...DefaultTheme,
enhanceApp(ctx) { enhanceApp(ctx) {
DefaultTheme.enhanceApp?.(ctx) DefaultTheme.enhanceApp?.(ctx)
ctx.app.component('Demo', AntdTheme) ctx.app.component('Demo', AntdTheme)
ctx.app.use(Antd)
} }
} as Theme } as Theme

4
site/demos/button/basic.vue
View File

@ -10,9 +10,7 @@ title: 基础按钮
<script lang="ts" setup></script> <script lang="ts" setup></script>
<template> <template>
<div> <div></div>
<a-button>这是按钮</a-button>
</div>
</template> </template>
<style scoped></style> <style scoped></style>

5
site/vite.config.ts
View File

@ -8,8 +8,5 @@ export default defineConfig({
VitePluginVitepressDemo({ VitePluginVitepressDemo({
glob: ['**/demos/**/*.vue'] glob: ['**/demos/**/*.vue']
}) })
], ]
server: {
port: 9527
}
}) })