mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2025-07-03 10:33:11 +08:00
Compare commits
5 Commits
dev
...
9243370f1c
Author | SHA1 | Date | |
---|---|---|---|
9243370f1c | |||
69388270af | |||
691bd2b965 | |||
21c3a13f5a | |||
77bef2a548 |
@ -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 })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
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
|
||||
}
|
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,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>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -497,7 +497,7 @@ export default genComponentStyleHook('Button', token => {
|
||||
genGroupStyle(buttonToken),
|
||||
|
||||
// Space Compact
|
||||
genCompactItemStyle(token),
|
||||
genCompactItemStyle(token, { focus: false }),
|
||||
genCompactItemVerticalStyle(token)
|
||||
]
|
||||
})
|
||||
|
@ -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)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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'
|
||||
|
@ -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>] {
|
||||
|
@ -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>
|
||||
|
||||
|
@ -8,8 +8,5 @@ export default defineConfig({
|
||||
VitePluginVitepressDemo({
|
||||
glob: ['**/demos/**/*.vue']
|
||||
})
|
||||
],
|
||||
server: {
|
||||
port: 9527
|
||||
}
|
||||
]
|
||||
})
|
||||
|
Reference in New Issue
Block a user