feat(shared): adjust ripple styles

hotdogc1017 · hotdogc1017 · commit 95ce282f31c0 · 2025-08-11T00:05:12.000+08:00
diff --git a/packages/components/shared/src/index.ts b/packages/components/shared/src/index.ts
@@ -1,2 +1,3 @@
 export * from "./useRipple";
 export * from "./types";
+export * from "./utils";
diff --git a/packages/components/shared/src/types.ts b/packages/components/shared/src/types.ts
@@ -1,6 +1,13 @@
-import type { Component } from "vue";
+import type { Component, HTMLAttributes } from "vue";
 
 export type HTMLNextUIVueProps<T extends keyof HTMLElementTagNameMap = "div"> =
   {
     as?: Component | T | (string & {});
-  };
+  } & /* @vue-ignore */ HTMLAttributes;
+
+/**
+ * Flattens a complex intersection type into a single object type for better readability.
+ */
+export type Prettify<T> = {
+  [K in keyof T]: T[K];
+} & {};
diff --git a/packages/components/shared/src/useRipple.ts b/packages/components/shared/src/useRipple.ts
@@ -1,58 +1,58 @@
-import { onBeforeMount, ref } from 'vue'
-import { type MaybeRefOrGetter, useEventListener } from '@vueuse/core'
+import { onBeforeMount, ref } from "vue";
+import { type MaybeRefOrGetter, useEventListener } from "@vueuse/core";
 
-const rippleElement = ref()
+const rippleElement = ref();
 
 function setCSSStyle(el: HTMLElement, style: CSSStyleDeclaration) {
   for (const [key, value] of Object.entries(style)) {
-    el.style[key as any] = value
+    el.style[key as any] = value;
   }
 }
 
 function ripple(event: MouseEvent) {
-  const target = event.currentTarget as HTMLElement
-  const { x, y, width, height } = target.getBoundingClientRect()
-  const { clientX, clientY } = event
+  const target = event.currentTarget as HTMLElement;
+  const { x, y, width, height } = target.getBoundingClientRect();
+  const { clientX, clientY } = event;
 
-  const newElement = rippleElement.value?.cloneNode() as HTMLSpanElement
+  const newElement = rippleElement.value?.cloneNode() as HTMLSpanElement;
   const style = {
-    position: 'absolute',
+    position: "absolute",
     left: `${clientX - x}px`,
     top: `${clientY - y}px`,
-    borderRadius: '50%',
-    background: 'white',
+    borderRadius: "50%",
+    backgroundColor: "currentColor",
     transform: `translate(-50%, -50%)`,
-    pointerEvents: 'none',
-  } as CSSStyleDeclaration
+    pointerEvents: "none",
+  } as CSSStyleDeclaration;
 
-  setCSSStyle(newElement, style)
+  setCSSStyle(newElement, style);
 
-  const radius = Math.round(Math.hypot(width, height)) * 2
+  const radius = Math.round(Math.hypot(width, height)) * 2;
   const animate = newElement.animate(
     {
-      opacity: [0.5, 0],
-      width: ['0', `${radius}px`],
-      height: ['0', `${radius}px`],
+      opacity: [0.35, 0],
+      width: ["0", `${radius}px`],
+      height: ["0", `${radius}px`],
     },
     {
       duration: 450,
-      easing: 'ease-in',
-      fill: 'forwards',
+      easing: "ease-in",
+      fill: "forwards",
     },
-  )
-  animate.addEventListener('finish', () => {
-    target.removeChild(newElement)
-  })
-  target.appendChild(newElement)
+  );
+  animate.addEventListener("finish", () => {
+    target.removeChild(newElement);
+  });
+  target.appendChild(newElement);
 }
 
 export function useRipple(
   target: MaybeRefOrGetter<HTMLElement | null | undefined>,
 ) {
   onBeforeMount(() => {
-    rippleElement.value = document.createElement('span')
-  })
-  useEventListener(target, 'click', ripple)
+    rippleElement.value = document.createElement("span");
+  });
+  useEventListener(target, "click", ripple);
 }
 
-export default useRipple
+export default useRipple;
diff --git a/packages/components/shared/src/utils.ts b/packages/components/shared/src/utils.ts
@@ -0,0 +1,8 @@
+export function pureObject(obj: Record<string, any>): Record<string, any> {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (value !== undefined && value !== null) {
+      acc[key] = value;
+    }
+    return acc;
+  }, Object.create(null));
+}

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export * from "./useRipple";`
`2`	`2`	`export * from "./types";`
	`3`	`+export * from "./utils";`