Compare commits

..

5 Commits

Author SHA1 Message Date
9243370f1c feat: add wave effect 2023-03-18 21:16:41 +08:00
69388270af feat: add wave 2023-03-18 20:48:10 +08:00
691bd2b965 feat: add wave 2023-03-18 18:17:20 +08:00
21c3a13f5a fix: use vc-utils createInjectionState replace vueuse 2023-03-17 22:47:03 +08:00
77bef2a548 feat: add button 2023-03-17 22:38:25 +08:00
13 changed files with 231 additions and 44 deletions

View File

@ -1,10 +1,59 @@
import { defineComponent } from 'vue'
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',
inheritAttrs: false,
setup() {
return () => {}
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 })
}
}
})

View 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
}

View 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
)
}

View File

@ -1,6 +1,8 @@
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',
inheritAttrs: false,
@ -17,13 +19,26 @@ const Button = defineComponent({
const { getPrefixCls } = useProviderConfigState()
const prefixCls = computed(() => getPrefixCls('btn', props.prefixCls))
const [wrapSSR, hashId] = useStyle(prefixCls)
return () => {
const cls = {
const cls = computed(() => {
return {
[prefixCls.value]: true,
[`${prefixCls.value}-${props.type}`]: !!props.type,
[hashId.value]: true
}
return wrapSSR(<button class={[cls, attrs.class]}>{slots.default?.()}</button>)
})
return () => {
return wrapSSR(
<Wave>
<button
{...attrs}
class={[cls.value, attrs.class]}
>
{slots.default?.()}
</button>
</Wave>
)
}
}
})

View File

@ -497,7 +497,7 @@ export default genComponentStyleHook('Button', token => {
genGroupStyle(buttonToken),
// Space Compact
genCompactItemStyle(token),
genCompactItemStyle(token, { focus: false }),
genCompactItemVerticalStyle(token)
]
})

View File

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

View File

@ -1,15 +1,13 @@
import type { App, Plugin } from 'vue'
import type { App } from 'vue'
import * as components from './components'
import version from './version'
export * from './components'
export default {
install(app: App) {
Object.values(components).forEach(component => {
for (const componentsKey in components) {
const component = (components as any)[componentsKey]
if (component.install) {
app.use(component as any)
app.use(component)
}
})
},
version
} as Plugin
}
}
}

View File

@ -3,7 +3,7 @@
// 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 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'

View File

@ -1,7 +1,8 @@
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 type { ComputedRef, VNodeChild } from 'vue'
import { computed, inject, provide } from 'vue'
import { computed } from 'vue'
import version from '../version'
import type { AliasToken, GlobalToken, MapToken, OverrideToken, PresetColorKey, PresetColorType, SeedToken } from './interface'
import { PresetColors } from './interface'
@ -49,14 +50,12 @@ export interface DesignTokenConfig {
hashed?: string | boolean
}
export const DesignTokenContext = Symbol('DesignTokenContext')
const useDesignTokenProvider = (token: DesignTokenConfig) => {
provide(DesignTokenContext, token)
}
const [useDesignTokenProvider, useDesignTokenInject] = createInjectionState((token: DesignTokenConfig) => {
return token
})
export { useDesignTokenProvider }
export const useDesignTokenState = () => inject(DesignTokenContext, defaultConfig)
export const useDesignTokenState = () => useDesignTokenInject() ?? defaultConfig
// ================================== Hook ==================================
export function useToken(): [ComputedRef<Theme<SeedToken, MapToken>>, ComputedRef<GlobalToken>, ComputedRef<string>] {

View File

@ -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
View File

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

View File

@ -12,6 +12,7 @@ title: 基础按钮
<template>
<div>
<a-button>这是按钮</a-button>
<div style="height: 10px"></div>
</div>
</template>

View File

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