feat: add wave effect

components/_util/wave/index.tsx

@@ -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 })
+    }
   }
 })
 

components/_util/wave/use-wave.ts

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

components/_util/wave/wave-effect.tsx

@@ -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
+  )
+}

components/button/button.tsx

@@ -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>
+      )
     }
   }
 })

components/button/style/index.ts

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

components/config-provider/context.ts

@@ -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)
+    }
+  )
 }

components/index.ts

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

components/theme/interface/components.ts

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

components/theme/internal.ts

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

package.json

@@ -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"
   },

pnpm-lock.yaml

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

site/demos/button/basic.vue

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

site/vite.config.ts

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