feat: add ripple demo (#257)

.vscode/settings.json

@@ -120,5 +120,8 @@
     "esbuild"
   ],
   "commentTranslate.multiLineMerge": true,
-  "typescript.suggest.autoImports": false
+  "typescript.suggest.autoImports": false,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

apps/admin/src/pages/demo/feat/ripple.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { rippleDirective as vRipple } from '@vben/directives'
+</script>
+
+<template>
+  <VbenCard title="Ripple示例">
+    <div class="demo-box" v-ripple>content</div>
+  </VbenCard>
+</template>
+
+<style lang="less" scoped>
+.demo-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 300px;
+  border-radius: 10px;
+  background-color: #408ede;
+  color: #fff;
+  font-size: 24px;
+}
+</style>

packages/directives/index.ts

@@ -1 +1,2 @@
 export { clickOutside } from './src/click-outside'
+export { rippleDirective } from './src/ripple/index'

packages/directives/package.json

@@ -13,5 +13,8 @@
   "dependencies": {
     "@vben/utils": "workspace:*",
     "vue": "3.3.4"
+  },
+  "devDependencies": {
+    "@vben/types": "workspace:*"
   }
 }

packages/directives/src/ripple/index.less

@@ -0,0 +1,21 @@
+.ripple-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.ripple-effect {
+  position: relative;
+  z-index: 9999;
+  width: 1px;
+  height: 1px;
+  margin-top: 0;
+  margin-left: 0;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 50%;
+  pointer-events: none;
+}

packages/directives/src/ripple/index.ts

@@ -0,0 +1,197 @@
+import type { Directive } from 'vue'
+import './index.less'
+
+export interface RippleOptions {
+  event: string
+  transition: number
+}
+
+export interface RippleProto {
+  background?: string
+  zIndex?: string
+}
+
+export type EventType = Event & MouseEvent & TouchEvent
+
+const options: RippleOptions = {
+  event: 'mousedown',
+  transition: 400,
+}
+
+const rippleDirective: Directive & RippleProto = {
+  beforeMount: (el: HTMLElement, binding) => {
+    if (binding.value === false) return
+
+    const bg = el.getAttribute('ripple-background')
+    setProps(Object.keys(binding.modifiers), options)
+
+    const background = bg || rippleDirective.background
+    const zIndex = rippleDirective.zIndex
+
+    el.addEventListener(options.event, (event: Event) => {
+      rippler({
+        event: event as EventType,
+        el,
+        background,
+        zIndex,
+      })
+    })
+  },
+  updated(el, binding) {
+    if (!binding.value) {
+      el?.clearRipple?.()
+      return
+    }
+    const bg = el.getAttribute('ripple-background')
+    el?.setBackground?.(bg)
+  },
+}
+
+function rippler({
+  event,
+  el,
+  zIndex,
+  background,
+}: { event: EventType; el: HTMLElement } & RippleProto) {
+  const targetBorder = parseInt(
+    getComputedStyle(el).borderWidth.replace('px', ''),
+  )
+  const clientX = event.clientX || event.touches[0].clientX
+  const clientY = event.clientY || event.touches[0].clientY
+
+  const rect = el.getBoundingClientRect()
+  const { left, top } = rect
+  const { offsetWidth: width, offsetHeight: height } = el
+  const { transition } = options
+  const dx = clientX - left
+  const dy = clientY - top
+  const maxX = Math.max(dx, width - dx)
+  const maxY = Math.max(dy, height - dy)
+  const style = window.getComputedStyle(el)
+  const radius = Math.sqrt(maxX * maxX + maxY * maxY)
+  const border = targetBorder > 0 ? targetBorder : 0
+
+  const ripple = document.createElement('div')
+  const rippleContainer = document.createElement('div')
+
+  // Styles for ripple
+  ripple.className = 'ripple'
+
+  Object.assign(ripple.style ?? {}, {
+    marginTop: '0px',
+    marginLeft: '0px',
+    width: '1px',
+    height: '1px',
+    transition: `all ${transition}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+    borderRadius: '50%',
+    pointerEvents: 'none',
+    position: 'relative',
+    zIndex: zIndex ?? '9999',
+    backgroundColor: background ?? 'rgba(0, 0, 0, 0.12)',
+  })
+
+  // Styles for rippleContainer
+  rippleContainer.className = 'ripple-container'
+  Object.assign(rippleContainer.style ?? {}, {
+    position: 'absolute',
+    left: `${0 - border}px`,
+    top: `${0 - border}px`,
+    height: '0',
+    width: '0',
+    pointerEvents: 'none',
+    overflow: 'hidden',
+  })
+
+  const storedTargetPosition =
+    el.style.position.length > 0
+      ? el.style.position
+      : getComputedStyle(el).position
+
+  if (storedTargetPosition !== 'relative') {
+    el.style.position = 'relative'
+  }
+
+  rippleContainer.appendChild(ripple)
+  el.appendChild(rippleContainer)
+
+  Object.assign(ripple.style, {
+    marginTop: `${dy}px`,
+    marginLeft: `${dx}px`,
+  })
+
+  const {
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+  } = style
+  Object.assign(rippleContainer.style, {
+    width: `${width}px`,
+    height: `${height}px`,
+    direction: 'ltr',
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+  })
+
+  setTimeout(() => {
+    const wh = `${radius * 2}px`
+    Object.assign(ripple.style ?? {}, {
+      width: wh,
+      height: wh,
+      marginLeft: `${dx - radius}px`,
+      marginTop: `${dy - radius}px`,
+    })
+  }, 0)
+
+  function clearRipple() {
+    setTimeout(() => {
+      ripple.style.backgroundColor = 'rgba(0, 0, 0, 0)'
+    }, 250)
+
+    setTimeout(() => {
+      rippleContainer?.parentNode?.removeChild(rippleContainer)
+    }, 850)
+    el.removeEventListener('mouseup', clearRipple, false)
+    el.removeEventListener('mouseleave', clearRipple, false)
+    el.removeEventListener('dragstart', clearRipple, false)
+    setTimeout(() => {
+      let clearPosition = true
+      for (let i = 0; i < el.childNodes.length; i++) {
+        if ((el.childNodes[i] as Recordable).className === 'ripple-container') {
+          clearPosition = false
+        }
+      }
+
+      if (clearPosition) {
+        el.style.position =
+          storedTargetPosition !== 'static' ? storedTargetPosition : ''
+      }
+    }, options.transition + 260)
+  }
+
+  if (event.type === 'mousedown') {
+    el.addEventListener('mouseup', clearRipple, false)
+    el.addEventListener('mouseleave', clearRipple, false)
+    el.addEventListener('dragstart', clearRipple, false)
+  } else {
+    clearRipple()
+  }
+
+  ;(el as Recordable).setBackground = (bgColor: string) => {
+    if (!bgColor) {
+      return
+    }
+    ripple.style.backgroundColor = bgColor
+  }
+}
+
+function setProps(modifiers: Recordable, props: Recordable) {
+  modifiers.forEach((item: Recordable) => {
+    if (isNaN(Number(item))) props.event = item
+    else props.transition = item
+  })
+}
+
+export { rippleDirective }

packages/locale/src/lang/en/routes.ts

@@ -54,5 +54,8 @@ export default {
       role: 'Role management',
     },
     strength: 'Password strength',
+    feat: {
+      ripple: 'Ripple',
+    },
   },
 }

packages/locale/src/lang/zh-CN/routes.ts

@@ -55,5 +55,8 @@ export default {
       role: '角色管理',
     },
     strength: '密码强度组件',
+    feat: {
+      ripple: '水波纹',
+    },
   },
 }

packages/router/src/routes/modules/demo/feat.ts

@@ -4,15 +4,23 @@ const feat: RouteRecordItem = {
   path: '/feat',
   name: 'Feat',
   component: LAYOUT,
-  redirect: '/feat/index',
+  redirect: '/feat/ripple',
   meta: {
     orderNo: 4,
     title: '功能',
     icon: 'ri:function-line',
-    root: true
+    root: true,
   },
-  children: []
+  children: [
+    {
+      path: 'ripple',
+      name: 'RippleDemo',
+      component: () => import('@/pages/demo/feat/ripple.vue'),
+      meta: {
+        title: 'routes.demo.feat.ripple',
+      },
+    },
+  ],
 }
 
 export default feat
-