@veltra/directives 1.0.0

package/dist/click-outside/index.d.ts

@@ -0,0 +1,7 @@
+import { ObjectDirective } from "vue";
+
+//#region src/click-outside/index.d.ts
+declare const vClickOutside: ObjectDirective<HTMLElement>;
+//#endregion
+export { vClickOutside };
+//# sourceMappingURL=index.d.ts.map

package/dist/click-outside/index.js

@@ -0,0 +1,72 @@
+import { createIncrease } from "@veltra/utils";
+//#region src/click-outside/index.ts
+const uid = createIncrease(1e3);
+const targets = /* @__PURE__ */ new Map();
+let eventAdded = false;
+let mousedownEvent;
+const documentClickHandler = (event) => {
+	if (!mousedownEvent) return;
+	if (mousedownEvent?.target !== event.target) {
+		mousedownEvent = void 0;
+		return;
+	}
+	targets.forEach(({ el, handler }) => {
+		if (el.contains(event.target)) return;
+		handler(event);
+	});
+	mousedownEvent = void 0;
+};
+function documentMousedownHandler(event) {
+	mousedownEvent = event;
+}
+function addEvent() {
+	if (eventAdded) return;
+	document.addEventListener("mousedown", documentMousedownHandler, true);
+	document.addEventListener("click", documentClickHandler, true);
+	eventAdded = true;
+}
+function removeEvent() {
+	if (!eventAdded) return;
+	document.removeEventListener("click", documentClickHandler, true);
+	document.removeEventListener("mousedown", documentMousedownHandler, true);
+	eventAdded = false;
+}
+function syncDocumentEvents() {
+	if (typeof document === "undefined") return;
+	if (targets.size > 0) addEvent();
+	else removeEvent();
+}
+const vClickOutside = {
+	mounted(el, binding) {
+		if (!binding.value) return;
+		const id = String(uid());
+		el.dataset.outsideId = id;
+		targets.set(id, {
+			handler: binding.value,
+			el
+		});
+		syncDocumentEvents();
+	},
+	updated(el, binding) {
+		if (!binding.value) {
+			if (!el.dataset.outsideId) return;
+			targets.delete(el.dataset.outsideId);
+			syncDocumentEvents();
+		} else {
+			if (!el.dataset.outsideId) el.dataset.outsideId = String(uid());
+			targets.set(el.dataset.outsideId, {
+				handler: binding.value,
+				el
+			});
+			syncDocumentEvents();
+		}
+	},
+	unmounted(el) {
+		targets.delete(el.dataset.outsideId);
+		syncDocumentEvents();
+	}
+};
+//#endregion
+export { vClickOutside };
+
+//# sourceMappingURL=index.js.map

package/dist/click-outside/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/click-outside/index.ts"],"sourcesContent":["import { createIncrease } from '@veltra/utils'\nimport type { ObjectDirective } from 'vue'\n\nconst uid = createIncrease(1000)\nconst targets = new Map<string, { handler: (e: MouseEvent) => void; el: HTMLElement }>()\n\nlet eventAdded = false\nlet mousedownEvent: MouseEvent | undefined\n\nconst documentClickHandler = (event: MouseEvent) => {\n  if (!mousedownEvent) return\n  if (mousedownEvent?.target !== event.target) {\n    return (mousedownEvent = undefined)\n  }\n  targets.forEach(({ el, handler }) => {\n    if (el.contains(event.target as Node)) return\n    handler(event)\n  })\n  mousedownEvent = undefined\n}\n\nfunction documentMousedownHandler(event: MouseEvent) {\n  mousedownEvent = event\n}\n\nfunction addEvent() {\n  if (eventAdded) return\n  document.addEventListener('mousedown', documentMousedownHandler, true)\n  document.addEventListener('click', documentClickHandler, true)\n  eventAdded = true\n}\n\nfunction removeEvent() {\n  if (!eventAdded) return\n  document.removeEventListener('click', documentClickHandler, true)\n  document.removeEventListener('mousedown', documentMousedownHandler, true)\n  eventAdded = false\n}\n\nfunction syncDocumentEvents(): void {\n  if (typeof document === 'undefined') return\n\n  if (targets.size > 0) {\n    addEvent()\n  } else {\n    removeEvent()\n  }\n}\n\nexport const vClickOutside: ObjectDirective<HTMLElement> = {\n  mounted(el, binding) {\n    if (!binding.value) return\n\n    // 为元素添加一个id， 并加入到字典中\n    const id = String(uid())\n    el.dataset.outsideId = id\n\n    targets.set(id, { handler: binding.value, el })\n    syncDocumentEvents()\n  },\n\n  updated(el, binding) {\n    if (!binding.value) {\n      if (!el.dataset.outsideId) return\n      targets.delete(el.dataset.outsideId)\n      syncDocumentEvents()\n    } else {\n      if (!el.dataset.outsideId) {\n        el.dataset.outsideId = String(uid())\n      }\n\n      targets.set(el.dataset.outsideId!, { handler: binding.value, el })\n      syncDocumentEvents()\n    }\n  },\n\n  unmounted(el: HTMLElement) {\n    targets.delete(el.dataset.outsideId!)\n    syncDocumentEvents()\n  }\n}\n"],"mappings":";;AAGA,MAAM,MAAM,eAAe,IAAK;AAChC,MAAM,0BAAU,IAAI,KAAoE;AAExF,IAAI,aAAa;AACjB,IAAI;AAEJ,MAAM,wBAAwB,UAAsB;AAClD,KAAI,CAAC,eAAgB;AACrB,KAAI,gBAAgB,WAAW,MAAM,QAAQ;AACnC,mBAAiB,KAAA;AAAzB;;AAEF,SAAQ,SAAS,EAAE,IAAI,cAAc;AACnC,MAAI,GAAG,SAAS,MAAM,OAAe,CAAE;AACvC,UAAQ,MAAM;GACd;AACF,kBAAiB,KAAA;;AAGnB,SAAS,yBAAyB,OAAmB;AACnD,kBAAiB;;AAGnB,SAAS,WAAW;AAClB,KAAI,WAAY;AAChB,UAAS,iBAAiB,aAAa,0BAA0B,KAAK;AACtE,UAAS,iBAAiB,SAAS,sBAAsB,KAAK;AAC9D,cAAa;;AAGf,SAAS,cAAc;AACrB,KAAI,CAAC,WAAY;AACjB,UAAS,oBAAoB,SAAS,sBAAsB,KAAK;AACjE,UAAS,oBAAoB,aAAa,0BAA0B,KAAK;AACzE,cAAa;;AAGf,SAAS,qBAA2B;AAClC,KAAI,OAAO,aAAa,YAAa;AAErC,KAAI,QAAQ,OAAO,EACjB,WAAU;KAEV,cAAa;;AAIjB,MAAa,gBAA8C;CACzD,QAAQ,IAAI,SAAS;AACnB,MAAI,CAAC,QAAQ,MAAO;EAGpB,MAAM,KAAK,OAAO,KAAK,CAAC;AACxB,KAAG,QAAQ,YAAY;AAEvB,UAAQ,IAAI,IAAI;GAAE,SAAS,QAAQ;GAAO;GAAI,CAAC;AAC/C,sBAAoB;;CAGtB,QAAQ,IAAI,SAAS;AACnB,MAAI,CAAC,QAAQ,OAAO;AAClB,OAAI,CAAC,GAAG,QAAQ,UAAW;AAC3B,WAAQ,OAAO,GAAG,QAAQ,UAAU;AACpC,uBAAoB;SACf;AACL,OAAI,CAAC,GAAG,QAAQ,UACd,IAAG,QAAQ,YAAY,OAAO,KAAK,CAAC;AAGtC,WAAQ,IAAI,GAAG,QAAQ,WAAY;IAAE,SAAS,QAAQ;IAAO;IAAI,CAAC;AAClE,uBAAoB;;;CAIxB,UAAU,IAAiB;AACzB,UAAQ,OAAO,GAAG,QAAQ,UAAW;AACrC,sBAAoB;;CAEvB"}

package/dist/focus/index.d.ts

@@ -0,0 +1,7 @@
+import { ObjectDirective } from "vue";
+
+//#region src/focus/index.d.ts
+declare const vFocus: ObjectDirective<HTMLElement>;
+//#endregion
+export { vFocus };
+//# sourceMappingURL=index.d.ts.map

package/dist/focus/index.js

@@ -0,0 +1,13 @@
+//#region src/focus/index.ts
+const vFocus = { mounted: (el) => {
+	if (el.tagName === "INPUT") el.focus();
+	else {
+		const input = el.querySelector("input");
+		if (input) input.focus();
+		else console.warn("v-focus 指令需要一个 input 元素");
+	}
+} };
+//#endregion
+export { vFocus };
+
+//# sourceMappingURL=index.js.map

package/dist/focus/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/focus/index.ts"],"sourcesContent":["import type { ObjectDirective } from 'vue'\n\nexport const vFocus: ObjectDirective<HTMLElement> = {\n  mounted: (el) => {\n    if (el.tagName === 'INPUT') {\n      el.focus()\n    } else {\n      const input = el.querySelector('input')\n      if (input) {\n        input.focus()\n      } else {\n        console.warn('v-focus 指令需要一个 input 元素')\n      }\n    }\n  }\n}\n"],"mappings":";AAEA,MAAa,SAAuC,EAClD,UAAU,OAAO;AACf,KAAI,GAAG,YAAY,QACjB,IAAG,OAAO;MACL;EACL,MAAM,QAAQ,GAAG,cAAc,QAAQ;AACvC,MAAI,MACF,OAAM,OAAO;MAEb,SAAQ,KAAK,0BAA0B;;GAI9C"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { vFocus } from "./focus/index.js";
+import { vClickOutside } from "./click-outside/index.js";
+import { Ripple } from "./ripple/ripple.js";
+import { vRipple } from "./ripple/index.js";
+export { Ripple, vClickOutside, vFocus, vRipple };

package/dist/index.js

@@ -0,0 +1,5 @@
+import { vFocus } from "./focus/index.js";
+import { vClickOutside } from "./click-outside/index.js";
+import { Ripple } from "./ripple/ripple.js";
+import { vRipple } from "./ripple/index.js";
+export { Ripple, vClickOutside, vFocus, vRipple };

package/dist/ripple/index.d.ts

@@ -0,0 +1,8 @@
+import { Ripple } from "./ripple.js";
+import { ObjectDirective } from "vue";
+
+//#region src/ripple/index.d.ts
+declare const vRipple: ObjectDirective<HTMLElement>;
+//#endregion
+export { vRipple };
+//# sourceMappingURL=index.d.ts.map

package/dist/ripple/index.js

@@ -0,0 +1,66 @@
+import { Ripple } from "./ripple.js";
+//#region src/ripple/index.ts
+const rippleMap = /* @__PURE__ */ new WeakMap();
+function handleMousedown(e) {
+	if (e.button !== 0) return;
+	const container = e.currentTarget;
+	const mouseupHandler = () => {
+		rippleMap.get(container)?.remove();
+		document.removeEventListener("mouseup", mouseupHandler);
+	};
+	document.addEventListener("mouseup", mouseupHandler);
+	let ripple = rippleMap.get(container);
+	if (!ripple) {
+		const { rippleClass, duration } = container.dataset;
+		ripple = new Ripple(container, {
+			rippleClass,
+			duration: duration ? Number(duration) : void 0
+		});
+		rippleMap.set(container, ripple);
+	}
+	ripple.showByEvent(e);
+}
+function handleMouseleave(e) {
+	rippleMap.get(e.currentTarget)?.remove();
+}
+/**
+* 注册按下事件
+* @param el
+* @param binding
+* @todo 如有必要将来可添加触摸事件
+*/
+const registerEvents = (el, binding) => {
+	if (binding.value === false) return;
+	el.addEventListener("mousedown", handleMousedown);
+	el.addEventListener("mouseleave", handleMouseleave);
+};
+/**
+* 注销按下事件
+* @param el 元素
+*/
+const unregisterEvents = (el) => {
+	el.removeEventListener("mousedown", handleMousedown);
+	el.removeEventListener("mouseleave", handleMouseleave);
+};
+const vRipple = {
+	mounted: (el, binding) => {
+		if (binding.value !== false) el.dataset.rippleClass = binding.value;
+		if (binding.arg) el.dataset.duration = binding.arg;
+		registerEvents(el, binding);
+	},
+	unmounted: (el) => {
+		unregisterEvents(el);
+		rippleMap.get(el)?.remove();
+		rippleMap.delete(el);
+	},
+	updated(el, binding) {
+		const registered = binding.oldValue !== false;
+		if (binding.value !== false) {
+			if (!registered) registerEvents(el, binding);
+		} else if (registered) unregisterEvents(el);
+	}
+};
+//#endregion
+export { vRipple };
+
+//# sourceMappingURL=index.js.map

package/dist/ripple/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/ripple/index.ts"],"sourcesContent":["import type { DirectiveBinding, ObjectDirective } from 'vue'\n\nimport { Ripple } from './ripple'\n\nconst rippleMap = new WeakMap<HTMLElement, Ripple>()\n\nfunction handleMousedown(e: MouseEvent) {\n  if (e.button !== 0) return\n  const container = e.currentTarget as HTMLElement\n\n  const mouseupHandler = () => {\n    rippleMap.get(container)?.remove()\n    document.removeEventListener('mouseup', mouseupHandler)\n  }\n\n  document.addEventListener('mouseup', mouseupHandler)\n\n  let ripple = rippleMap.get(container)\n  if (!ripple) {\n    const { rippleClass, duration } = container.dataset\n    ripple = new Ripple(container, {\n      rippleClass,\n      duration: duration ? Number(duration) : undefined\n    })\n    rippleMap.set(container, ripple)\n  }\n\n  ripple.showByEvent(e)\n}\n\nfunction handleMouseleave(e: MouseEvent) {\n  rippleMap.get(e.currentTarget as HTMLElement)?.remove()\n}\n\n/**\n * 注册按下事件\n * @param el\n * @param binding\n * @todo 如有必要将来可添加触摸事件\n */\nconst registerEvents = (el: HTMLElement, binding: DirectiveBinding<any>) => {\n  // 如果指令绑定的值为false则不应用该事件.\n  if (binding.value === false) return\n\n  el.addEventListener('mousedown', handleMousedown)\n  el.addEventListener('mouseleave', handleMouseleave)\n}\n\n/**\n * 注销按下事件\n * @param el 元素\n */\nconst unregisterEvents = (el: HTMLElement) => {\n  el.removeEventListener('mousedown', handleMousedown)\n  el.removeEventListener('mouseleave', handleMouseleave)\n}\n\nexport { Ripple }\n\nexport const vRipple: ObjectDirective<HTMLElement> = {\n  mounted: (el, binding) => {\n    if (binding.value !== false) {\n      el.dataset.rippleClass = binding.value\n    }\n\n    if (binding.arg) {\n      el.dataset.duration = binding.arg\n    }\n\n    registerEvents(el, binding)\n  },\n\n  unmounted: (el) => {\n    unregisterEvents(el)\n    rippleMap.get(el)?.remove()\n    rippleMap.delete(el)\n  },\n\n  updated(el, binding) {\n    const registered = binding.oldValue !== false\n\n    if (binding.value !== false) {\n      if (!registered) {\n        registerEvents(el, binding)\n      }\n    } else {\n      if (registered) {\n        unregisterEvents(el)\n      }\n    }\n  }\n}\n"],"mappings":";;AAIA,MAAM,4BAAY,IAAI,SAA8B;AAEpD,SAAS,gBAAgB,GAAe;AACtC,KAAI,EAAE,WAAW,EAAG;CACpB,MAAM,YAAY,EAAE;CAEpB,MAAM,uBAAuB;AAC3B,YAAU,IAAI,UAAU,EAAE,QAAQ;AAClC,WAAS,oBAAoB,WAAW,eAAe;;AAGzD,UAAS,iBAAiB,WAAW,eAAe;CAEpD,IAAI,SAAS,UAAU,IAAI,UAAU;AACrC,KAAI,CAAC,QAAQ;EACX,MAAM,EAAE,aAAa,aAAa,UAAU;AAC5C,WAAS,IAAI,OAAO,WAAW;GAC7B;GACA,UAAU,WAAW,OAAO,SAAS,GAAG,KAAA;GACzC,CAAC;AACF,YAAU,IAAI,WAAW,OAAO;;AAGlC,QAAO,YAAY,EAAE;;AAGvB,SAAS,iBAAiB,GAAe;AACvC,WAAU,IAAI,EAAE,cAA6B,EAAE,QAAQ;;;;;;;;AASzD,MAAM,kBAAkB,IAAiB,YAAmC;AAE1E,KAAI,QAAQ,UAAU,MAAO;AAE7B,IAAG,iBAAiB,aAAa,gBAAgB;AACjD,IAAG,iBAAiB,cAAc,iBAAiB;;;;;;AAOrD,MAAM,oBAAoB,OAAoB;AAC5C,IAAG,oBAAoB,aAAa,gBAAgB;AACpD,IAAG,oBAAoB,cAAc,iBAAiB;;AAKxD,MAAa,UAAwC;CACnD,UAAU,IAAI,YAAY;AACxB,MAAI,QAAQ,UAAU,MACpB,IAAG,QAAQ,cAAc,QAAQ;AAGnC,MAAI,QAAQ,IACV,IAAG,QAAQ,WAAW,QAAQ;AAGhC,iBAAe,IAAI,QAAQ;;CAG7B,YAAY,OAAO;AACjB,mBAAiB,GAAG;AACpB,YAAU,IAAI,GAAG,EAAE,QAAQ;AAC3B,YAAU,OAAO,GAAG;;CAGtB,QAAQ,IAAI,SAAS;EACnB,MAAM,aAAa,QAAQ,aAAa;AAExC,MAAI,QAAQ,UAAU;OAChB,CAAC,WACH,gBAAe,IAAI,QAAQ;aAGzB,WACF,kBAAiB,GAAG;;CAI3B"}

package/dist/ripple/ripple.d.ts

@@ -0,0 +1,140 @@
+import { BEM } from "@veltra/utils";
+
+//#region src/ripple/ripple.d.ts
+/** 波纹位置接口 */
+interface RipplePosition {
+  /** X 坐标 */
+  x: number;
+  /** Y 坐标 */
+  y: number;
+}
+/** 波纹配置接口 */
+interface RippleConfig {
+  /** 波纹类 */
+  rippleClass?: string;
+  /** 波纹动画时长 */
+  duration?: number;
+  /** 是否自动移除 */
+  autoRemove?: boolean;
+}
+/**
+ * 波纹效果类
+ * 用于在指定容器中创建和管理波纹动画效果
+ * 支持鼠标点击和触摸事件触发的波纹动画
+ */
+declare class Ripple {
+  /** 波纹样式类名生成器 */
+  static cls: BEM<'ripple'>;
+  /** 波纹容器元素 */
+  private container;
+  /** 容器矩形区域缓存 */
+  private containerRect?;
+  /** 容器计算样式缓存 */
+  private containerComputedStyle?;
+  /** 容器原始样式备份 */
+  private containerStyle?;
+  /** 当前活跃的波纹元素 */
+  private currentRippleEl?;
+  /** 波纹配置 */
+  private config?;
+  /** 波纹元素数量（私有） */
+  private _amount;
+  /**
+   * 设置波纹元素数量
+   * 当数量为 0 时自动重置容器样式
+   */
+  private set amount(value);
+  /** 获取当前波纹元素数量 */
+  private get amount();
+  /**
+   * 构造函数
+   * @param container 波纹容器元素
+   * @param config 波纹配置选项
+   */
+  constructor(container: HTMLElement, config?: RippleConfig);
+  /**
+   * 获取波纹容器元素
+   * @returns 容器元素
+   */
+  getContainer(): HTMLElement;
+  /**
+   * 获取容器矩形区域
+   * 使用缓存机制避免重复计算
+   * @returns 容器矩形区域
+   */
+  private getContainerRect;
+  /**
+   * 获取波纹圆心位置
+   * 根据鼠标或触摸事件计算相对于容器的坐标
+   * @param e 鼠标或触摸事件
+   * @returns 波纹圆心位置
+   */
+  private getRippleCenterPosition;
+  /**
+   * 标记元素过渡动画结束
+   * @param el 目标元素
+   */
+  private markTransitionEnd;
+  /**
+   * 标记元素为可移除状态
+   * @param el 目标元素
+   */
+  private markRemovable;
+  /**
+   * 计算波纹半径
+   * 根据点击位置计算能覆盖整个容器的最小半径
+   * @param centerPosition 波纹圆心位置
+   * @returns 波纹半径
+   */
+  private calcRippleRadius;
+  /**
+   * 设置容器样式
+   * 确保容器具有正确的定位和溢出隐藏属性以支持波纹效果
+   */
+  private setContainerStyle;
+  /**
+   * 重置容器样式
+   * 恢复容器的原始样式设置
+   */
+  private resetContainerStyle;
+  /**
+   * 创建波纹元素
+   * 生成波纹DOM元素并设置样式和动画
+   * @param centerPosition 波纹圆心位置
+   */
+  private createRipple;
+  /**
+   * 移除波纹元素
+   * 检查元素状态，符合条件时执行淡出动画并移除DOM
+   * @param rippleEl 要移除的波纹元素
+   */
+  private removeRippleEl;
+  /**
+   * 显示波纹
+   * 根据指定位置创建波纹效果
+   * @param centerPosition 波纹圆心位置
+   */
+  show(centerPosition: RipplePosition): void;
+  /**
+   * 根据事件对象显示波纹
+   * 从鼠标或触摸事件中提取位置信息并创建波纹
+   * @param e 鼠标或触摸事件对象
+   */
+  showByEvent(e: MouseEvent | TouchEvent): void;
+  /**
+   * 移除波纹
+   * 手动移除当前活跃的波纹元素
+   * 注意：如果已经在Ripple配置中增加了autoRemove属性，则不需要调用此方法
+   */
+  remove(): void;
+  /**
+   * 重置容器矩形
+   * 当容器大小发生变化时，需要重置容器矩形缓存
+   * 否则计算的波纹半径不准确
+   * 注意：大部分情况下不需要调用此方法
+   */
+  resetContainerRect(): void;
+}
+//#endregion
+export { Ripple };
+//# sourceMappingURL=ripple.d.ts.map

package/dist/ripple/ripple.js

@@ -0,0 +1,237 @@
+import { bem, nextFrame, removeStyles, setStyles } from "@veltra/utils";
+//#region src/ripple/ripple.ts
+function pick(obj, keys) {
+	const out = {};
+	for (const k of keys) if (k in obj) out[k] = obj[k];
+	return out;
+}
+/**
+* 波纹效果类
+* 用于在指定容器中创建和管理波纹动画效果
+* 支持鼠标点击和触摸事件触发的波纹动画
+*/
+var Ripple = class Ripple {
+	/** 波纹样式类名生成器 */
+	static cls = bem("ripple");
+	/** 波纹容器元素 */
+	container;
+	/** 容器矩形区域缓存 */
+	containerRect;
+	/** 容器计算样式缓存 */
+	containerComputedStyle;
+	/** 容器原始样式备份 */
+	containerStyle;
+	/** 当前活跃的波纹元素 */
+	currentRippleEl;
+	/** 波纹配置 */
+	config;
+	/** 波纹元素数量（私有） */
+	_amount = 0;
+	/**
+	* 设置波纹元素数量
+	* 当数量为 0 时自动重置容器样式
+	*/
+	set amount(amount) {
+		this._amount = amount;
+		amount === 0 && this.resetContainerStyle();
+	}
+	/** 获取当前波纹元素数量 */
+	get amount() {
+		return this._amount;
+	}
+	/**
+	* 构造函数
+	* @param container 波纹容器元素
+	* @param config 波纹配置选项
+	*/
+	constructor(container, config) {
+		this.container = container;
+		if (config) this.config = config;
+	}
+	/**
+	* 获取波纹容器元素
+	* @returns 容器元素
+	*/
+	getContainer() {
+		return this.container;
+	}
+	/**
+	* 获取容器矩形区域
+	* 使用缓存机制避免重复计算
+	* @returns 容器矩形区域
+	*/
+	getContainerRect() {
+		this.containerRect = this.container.getBoundingClientRect();
+		return this.containerRect;
+	}
+	/**
+	* 获取波纹圆心位置
+	* 根据鼠标或触摸事件计算相对于容器的坐标
+	* @param e 鼠标或触摸事件
+	* @returns 波纹圆心位置
+	*/
+	getRippleCenterPosition(e) {
+		const { left, top } = this.getContainerRect();
+		const { clientX, clientY } = e;
+		return {
+			x: clientX - left,
+			y: clientY - top
+		};
+	}
+	/**
+	* 标记元素过渡动画结束
+	* @param el 目标元素
+	*/
+	markTransitionEnd(el) {
+		el.dataset.transitionend = "true";
+	}
+	/**
+	* 标记元素为可移除状态
+	* @param el 目标元素
+	*/
+	markRemovable(el) {
+		el.dataset.removable = "true";
+	}
+	/**
+	* 计算波纹半径
+	* 根据点击位置计算能覆盖整个容器的最小半径
+	* @param centerPosition 波纹圆心位置
+	* @returns 波纹半径
+	*/
+	calcRippleRadius(centerPosition) {
+		const { x, y } = centerPosition;
+		const { width, height } = this.getContainerRect();
+		const edgeA = Math.max(x, width - x);
+		const edgeB = Math.max(y, height - y);
+		return Math.ceil(Math.sqrt(edgeA ** 2 + edgeB ** 2));
+	}
+	/**
+	* 设置容器样式
+	* 确保容器具有正确的定位和溢出隐藏属性以支持波纹效果
+	*/
+	setContainerStyle() {
+		const { container } = this;
+		if (this.amount === 0 && !this.containerStyle) this.containerStyle = {
+			position: container.style.position,
+			overflow: container.style.overflow
+		};
+		if (!this.containerComputedStyle) this.containerComputedStyle = pick(window.getComputedStyle(container), ["overflow", "position"]);
+		const { position, overflow } = this.containerComputedStyle;
+		const style = {};
+		if (position === "static") style.position = "relative";
+		if (overflow !== "hidden") style.overflow = "hidden";
+		setStyles(container, style);
+	}
+	/**
+	* 重置容器样式
+	* 恢复容器的原始样式设置
+	*/
+	resetContainerStyle() {
+		const { container, containerStyle } = this;
+		if (!containerStyle) return removeStyles(container, ["overflow", "position"]);
+		const attrsToRemoved = [];
+		if (!containerStyle.overflow) attrsToRemoved.push("overflow");
+		if (!containerStyle.position) attrsToRemoved.push("position");
+		removeStyles(container, attrsToRemoved);
+		if (!attrsToRemoved.length) setStyles(container, containerStyle);
+	}
+	/**
+	* 创建波纹元素
+	* 生成波纹DOM元素并设置样式和动画
+	* @param centerPosition 波纹圆心位置
+	*/
+	createRipple(centerPosition) {
+		const { config } = this;
+		this.setContainerStyle();
+		const rippleEl = document.createElement("span");
+		this.currentRippleEl = rippleEl;
+		rippleEl.classList.add(Ripple.cls.b);
+		config?.rippleClass && rippleEl.classList.add(config.rippleClass);
+		const radius = this.calcRippleRadius(centerPosition);
+		const diameter = radius * 2;
+		const rippleStyle = {
+			width: `${diameter}px`,
+			height: `${diameter}px`,
+			left: `${centerPosition.x - radius}px`,
+			top: `${centerPosition.y - radius}px`
+		};
+		if (config?.duration) rippleStyle.transitionDuration = `${config.duration}ms`;
+		setStyles(rippleEl, rippleStyle);
+		const transitionEndHandler = (e) => {
+			if (e.propertyName !== "transform") return;
+			rippleEl.removeEventListener("transitionend", transitionEndHandler);
+			this.markTransitionEnd(rippleEl);
+			this.removeRippleEl(rippleEl);
+		};
+		rippleEl.addEventListener("transitionend", transitionEndHandler);
+		this.container.appendChild(rippleEl);
+		this.amount++;
+		if (config?.autoRemove) this.markRemovable(rippleEl);
+		nextFrame(() => {
+			setStyles(rippleEl, { transform: "scale3d(1, 1, 1)" });
+		});
+	}
+	/**
+	* 移除波纹元素
+	* 检查元素状态，符合条件时执行淡出动画并移除DOM
+	* @param rippleEl 要移除的波纹元素
+	*/
+	removeRippleEl(rippleEl) {
+		const { transitionend, removable } = rippleEl.dataset;
+		if (transitionend !== "true" || removable !== "true") return;
+		const transitionEndOrCancelHandler = (e) => {
+			if (e.propertyName !== "opacity") return;
+			rippleEl.removeEventListener("transitionend", transitionEndOrCancelHandler);
+			rippleEl.removeEventListener("transitioncancel", transitionEndOrCancelHandler);
+			rippleEl.remove();
+			this.amount--;
+		};
+		rippleEl.addEventListener("transitionend", transitionEndOrCancelHandler);
+		rippleEl.addEventListener("transitioncancel", transitionEndOrCancelHandler);
+		rippleEl.classList.add(bem.is("removing"));
+	}
+	/**
+	* 显示波纹
+	* 根据指定位置创建波纹效果
+	* @param centerPosition 波纹圆心位置
+	*/
+	show(centerPosition) {
+		this.createRipple(centerPosition);
+	}
+	/**
+	* 根据事件对象显示波纹
+	* 从鼠标或触摸事件中提取位置信息并创建波纹
+	* @param e 鼠标或触摸事件对象
+	*/
+	showByEvent(e) {
+		const centerPosition = this.getRippleCenterPosition(e instanceof MouseEvent ? e : e.touches[0]);
+		this.createRipple(centerPosition);
+	}
+	/**
+	* 移除波纹
+	* 手动移除当前活跃的波纹元素
+	* 注意：如果已经在Ripple配置中增加了autoRemove属性，则不需要调用此方法
+	*/
+	remove() {
+		let el = this.currentRippleEl;
+		if (el) {
+			this.markRemovable(el);
+			this.removeRippleEl(el);
+			el = void 0;
+			this.currentRippleEl = void 0;
+		}
+	}
+	/**
+	* 重置容器矩形
+	* 当容器大小发生变化时，需要重置容器矩形缓存
+	* 否则计算的波纹半径不准确
+	* 注意：大部分情况下不需要调用此方法
+	*/
+	resetContainerRect() {
+		this.containerRect = void 0;
+	}
+};
+//#endregion
+export { Ripple };
+
+//# sourceMappingURL=ripple.js.map

package/dist/ripple/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","names":[],"sources":["../../src/ripple/ripple.ts"],"sourcesContent":["import { bem, nextFrame, removeStyles, setStyles, type BEM } from '@veltra/utils'\nimport type { CSSProperties } from 'vue'\n\nfunction pick<T extends object, K extends keyof T>(obj: T, keys: readonly K[]): Pick<T, K> {\n  const out: Partial<Pick<T, K>> = {}\n  for (const k of keys) {\n    if (k in obj) out[k] = obj[k]\n  }\n  return out as Pick<T, K>\n}\n\n/** 鼠标或触摸事件类型 */\ntype MouseOrTouchEvent = MouseEvent | Touch\n\n/** 波纹位置接口 */\ninterface RipplePosition {\n  /** X 坐标 */\n  x: number\n  /** Y 坐标 */\n  y: number\n}\n\n/** 波纹配置接口 */\ninterface RippleConfig {\n  /** 波纹类 */\n  rippleClass?: string\n  /** 波纹动画时长 */\n  duration?: number\n  /** 是否自动移除 */\n  autoRemove?: boolean\n}\n\n/** 容器样式接口 */\ninterface ContainerStyle {\n  /** 定位方式 */\n  position: string\n  /** 溢出处理 */\n  overflow: string\n}\n\n/**\n * 波纹效果类\n * 用于在指定容器中创建和管理波纹动画效果\n * 支持鼠标点击和触摸事件触发的波纹动画\n */\nexport class Ripple {\n  /** 波纹样式类名生成器 */\n  static cls: BEM<'ripple'> = bem('ripple')\n\n  /** 波纹容器元素 */\n  private container: HTMLElement\n  /** 容器矩形区域缓存 */\n  private containerRect?: DOMRect\n  /** 容器计算样式缓存 */\n  private containerComputedStyle?: ContainerStyle\n  /** 容器原始样式备份 */\n  private containerStyle?: ContainerStyle\n\n  /** 当前活跃的波纹元素 */\n  private currentRippleEl?: HTMLElement\n\n  /** 波纹配置 */\n  private config?: RippleConfig\n\n  /** 波纹元素数量（私有） */\n  private _amount = 0\n\n  /**\n   * 设置波纹元素数量\n   * 当数量为 0 时自动重置容器样式\n   */\n  private set amount(amount: number) {\n    this._amount = amount\n    amount === 0 && this.resetContainerStyle()\n  }\n\n  /** 获取当前波纹元素数量 */\n  private get amount(): number {\n    return this._amount\n  }\n\n  /**\n   * 构造函数\n   * @param container 波纹容器元素\n   * @param config 波纹配置选项\n   */\n  constructor(container: HTMLElement, config?: RippleConfig) {\n    this.container = container\n    if (config) {\n      this.config = config\n    }\n  }\n\n  /**\n   * 获取波纹容器元素\n   * @returns 容器元素\n   */\n  getContainer(): HTMLElement {\n    return this.container\n  }\n\n  /**\n   * 获取容器矩形区域\n   * 使用缓存机制避免重复计算\n   * @returns 容器矩形区域\n   */\n  private getContainerRect(): DOMRect {\n    // if (this.containerRect) return this.containerRect\n    const rect = this.container.getBoundingClientRect()\n    this.containerRect = rect\n    return this.containerRect\n  }\n\n  /**\n   * 获取波纹圆心位置\n   * 根据鼠标或触摸事件计算相对于容器的坐标\n   * @param e 鼠标或触摸事件\n   * @returns 波纹圆心位置\n   */\n  private getRippleCenterPosition(e: MouseOrTouchEvent): { x: number; y: number } {\n    const { left, top } = this.getContainerRect()\n    const { clientX, clientY } = e\n    return { x: clientX - left, y: clientY - top }\n  }\n\n  /**\n   * 标记元素过渡动画结束\n   * @param el 目标元素\n   */\n  private markTransitionEnd(el: HTMLElement) {\n    el.dataset.transitionend = 'true'\n  }\n\n  /**\n   * 标记元素为可移除状态\n   * @param el 目标元素\n   */\n  private markRemovable(el: HTMLElement) {\n    el.dataset.removable = 'true'\n  }\n\n  /**\n   * 计算波纹半径\n   * 根据点击位置计算能覆盖整个容器的最小半径\n   * @param centerPosition 波纹圆心位置\n   * @returns 波纹半径\n   */\n  private calcRippleRadius(centerPosition: RipplePosition) {\n    const { x, y } = centerPosition\n    const { width, height } = this.getContainerRect()\n    const edgeA = Math.max(x, width - x)\n    const edgeB = Math.max(y, height - y)\n    return Math.ceil(Math.sqrt(edgeA ** 2 + edgeB ** 2))\n  }\n\n  /**\n   * 设置容器样式\n   * 确保容器具有正确的定位和溢出隐藏属性以支持波纹效果\n   */\n  private setContainerStyle() {\n    const { container } = this\n\n    // 获取元素原本的内联样式\n    if (this.amount === 0 && !this.containerStyle) {\n      this.containerStyle = {\n        position: container.style.position,\n        overflow: container.style.overflow\n      }\n    }\n\n    if (!this.containerComputedStyle) {\n      this.containerComputedStyle = pick(window.getComputedStyle(container), [\n        'overflow',\n        'position'\n      ])\n    }\n    const { position, overflow } = this.containerComputedStyle\n    const style: CSSProperties = {}\n\n    // 如果是静态定位，改为相对定位以支持绝对定位的波纹元素\n    if (position === 'static') {\n      style.position = 'relative'\n    }\n\n    // 如果溢出不是隐藏，设置为隐藏以裁剪波纹边界\n    if (overflow !== 'hidden') {\n      style.overflow = 'hidden'\n    }\n\n    setStyles(container, style)\n  }\n\n  /**\n   * 重置容器样式\n   * 恢复容器的原始样式设置\n   */\n  private resetContainerStyle() {\n    const { container, containerStyle } = this\n    if (!containerStyle) {\n      return removeStyles(container, ['overflow', 'position'])\n    }\n\n    const attrsToRemoved: string[] = []\n\n    if (!containerStyle.overflow) {\n      attrsToRemoved.push('overflow')\n    }\n\n    if (!containerStyle.position) {\n      attrsToRemoved.push('position')\n    }\n\n    removeStyles(container, attrsToRemoved)\n\n    if (!attrsToRemoved.length) {\n      setStyles(container, containerStyle as CSSProperties)\n    }\n  }\n\n  /**\n   * 创建波纹元素\n   * 生成波纹DOM元素并设置样式和动画\n   * @param centerPosition 波纹圆心位置\n   */\n  private createRipple(centerPosition: RipplePosition) {\n    const { config } = this\n\n    // 必须在创建ripple元素之前调用\n    this.setContainerStyle()\n\n    const rippleEl = document.createElement('span')\n    this.currentRippleEl = rippleEl\n    rippleEl.classList.add(Ripple.cls.b)\n    config?.rippleClass && rippleEl.classList.add(config.rippleClass)\n\n    const radius = this.calcRippleRadius(centerPosition)\n    const diameter = radius * 2\n\n    // 设置波纹元素的基础样式\n    const rippleStyle: CSSProperties = {\n      width: `${diameter}px`,\n      height: `${diameter}px`,\n      left: `${centerPosition.x - radius}px`,\n      top: `${centerPosition.y - radius}px`\n    }\n\n    // 设置自定义动画时长\n    if (config?.duration) {\n      rippleStyle.transitionDuration = `${config.duration}ms`\n    }\n\n    setStyles(rippleEl, rippleStyle)\n\n    // 监听过渡动画结束事件\n    const transitionEndHandler = (e: TransitionEvent) => {\n      if (e.propertyName !== 'transform') return\n\n      rippleEl.removeEventListener('transitionend', transitionEndHandler)\n      this.markTransitionEnd(rippleEl)\n      // 尝试移除\n      this.removeRippleEl(rippleEl)\n    }\n\n    rippleEl.addEventListener('transitionend', transitionEndHandler)\n\n    this.container.appendChild(rippleEl)\n    this.amount++\n\n    // 如果配置了自动移除，标记为可移除\n    if (config?.autoRemove) {\n      this.markRemovable(rippleEl)\n    }\n\n    // 触发缩放动画\n    nextFrame(() => {\n      setStyles(rippleEl, { transform: 'scale3d(1, 1, 1)' })\n    })\n  }\n\n  /**\n   * 移除波纹元素\n   * 检查元素状态，符合条件时执行淡出动画并移除DOM\n   * @param rippleEl 要移除的波纹元素\n   */\n  private removeRippleEl(rippleEl: HTMLElement): void {\n    const { transitionend, removable } = rippleEl.dataset\n\n    // 只有在过渡结束且标记为可移除时才执行移除\n    if (transitionend !== 'true' || removable !== 'true') return\n\n    const transitionEndOrCancelHandler = (e: TransitionEvent) => {\n      if (e.propertyName !== 'opacity') return\n\n      rippleEl.removeEventListener('transitionend', transitionEndOrCancelHandler)\n      rippleEl.removeEventListener('transitioncancel', transitionEndOrCancelHandler)\n      rippleEl.remove()\n      this.amount--\n    }\n\n    rippleEl.addEventListener('transitionend', transitionEndOrCancelHandler)\n    rippleEl.addEventListener('transitioncancel', transitionEndOrCancelHandler)\n    rippleEl.classList.add(bem.is('removing'))\n  }\n\n  /**\n   * 显示波纹\n   * 根据指定位置创建波纹效果\n   * @param centerPosition 波纹圆心位置\n   */\n  show(centerPosition: RipplePosition): void {\n    this.createRipple(centerPosition)\n  }\n\n  /**\n   * 根据事件对象显示波纹\n   * 从鼠标或触摸事件中提取位置信息并创建波纹\n   * @param e 鼠标或触摸事件对象\n   */\n  showByEvent(e: MouseEvent | TouchEvent): void {\n    const centerPosition = this.getRippleCenterPosition(e instanceof MouseEvent ? e : e.touches[0]!)\n    this.createRipple(centerPosition)\n  }\n\n  /**\n   * 移除波纹\n   * 手动移除当前活跃的波纹元素\n   * 注意：如果已经在Ripple配置中增加了autoRemove属性，则不需要调用此方法\n   */\n  remove(): void {\n    let el = this.currentRippleEl\n    if (el) {\n      this.markRemovable(el)\n      this.removeRippleEl(el)\n      el = undefined\n      this.currentRippleEl = undefined\n    }\n  }\n\n  /**\n   * 重置容器矩形\n   * 当容器大小发生变化时，需要重置容器矩形缓存\n   * 否则计算的波纹半径不准确\n   * 注意：大部分情况下不需要调用此方法\n   */\n  resetContainerRect(): void {\n    this.containerRect = undefined\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/ripple/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/ripple/style2.css

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-ripple {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+  border-radius: 50%;
+  will-change: transform;
+  z-index: 0;
+  opacity: 0.6;
+  transform: scale3d(0.2, 0.2, 1);
+  transform-origin: center;
+  transition-property: transform, opacity !important;
+  transition-timing-function: cubic-bezier(0.82, 0.84, 0.28, 0.92) !important;
+  transition-duration: 300ms;
+}
+.u-ripple.is-removing {
+  opacity: 0 !important;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@veltra/directives",
+  "version": "1.0.0",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "dist/**/style.js",
+    "dist/**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*",
+      "development": "./src/*",
+      "import": "./dist/*/*"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "check-types": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@veltra/styles": "workspace:*",
+    "@veltra/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@tsdown/css": "^0.21.7",
+    "sass-embedded": "^1.99.0",
+    "tsdown": "^0.21.7"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}

package/src/click-outside/index.ts

@@ -0,0 +1,81 @@
+import { createIncrease } from '@veltra/utils'
+import type { ObjectDirective } from 'vue'
+
+const uid = createIncrease(1000)
+const targets = new Map<string, { handler: (e: MouseEvent) => void; el: HTMLElement }>()
+
+let eventAdded = false
+let mousedownEvent: MouseEvent | undefined
+
+const documentClickHandler = (event: MouseEvent) => {
+  if (!mousedownEvent) return
+  if (mousedownEvent?.target !== event.target) {
+    return (mousedownEvent = undefined)
+  }
+  targets.forEach(({ el, handler }) => {
+    if (el.contains(event.target as Node)) return
+    handler(event)
+  })
+  mousedownEvent = undefined
+}
+
+function documentMousedownHandler(event: MouseEvent) {
+  mousedownEvent = event
+}
+
+function addEvent() {
+  if (eventAdded) return
+  document.addEventListener('mousedown', documentMousedownHandler, true)
+  document.addEventListener('click', documentClickHandler, true)
+  eventAdded = true
+}
+
+function removeEvent() {
+  if (!eventAdded) return
+  document.removeEventListener('click', documentClickHandler, true)
+  document.removeEventListener('mousedown', documentMousedownHandler, true)
+  eventAdded = false
+}
+
+function syncDocumentEvents(): void {
+  if (typeof document === 'undefined') return
+
+  if (targets.size > 0) {
+    addEvent()
+  } else {
+    removeEvent()
+  }
+}
+
+export const vClickOutside: ObjectDirective<HTMLElement> = {
+  mounted(el, binding) {
+    if (!binding.value) return
+
+    // 为元素添加一个id， 并加入到字典中
+    const id = String(uid())
+    el.dataset.outsideId = id
+
+    targets.set(id, { handler: binding.value, el })
+    syncDocumentEvents()
+  },
+
+  updated(el, binding) {
+    if (!binding.value) {
+      if (!el.dataset.outsideId) return
+      targets.delete(el.dataset.outsideId)
+      syncDocumentEvents()
+    } else {
+      if (!el.dataset.outsideId) {
+        el.dataset.outsideId = String(uid())
+      }
+
+      targets.set(el.dataset.outsideId!, { handler: binding.value, el })
+      syncDocumentEvents()
+    }
+  },
+
+  unmounted(el: HTMLElement) {
+    targets.delete(el.dataset.outsideId!)
+    syncDocumentEvents()
+  }
+}

package/src/env.d.ts

@@ -0,0 +1 @@
+declare module '*.scss' {}

package/src/focus/index.ts

@@ -0,0 +1,16 @@
+import type { ObjectDirective } from 'vue'
+
+export const vFocus: ObjectDirective<HTMLElement> = {
+  mounted: (el) => {
+    if (el.tagName === 'INPUT') {
+      el.focus()
+    } else {
+      const input = el.querySelector('input')
+      if (input) {
+        input.focus()
+      } else {
+        console.warn('v-focus 指令需要一个 input 元素')
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './focus'
+
+export * from './click-outside'
+
+export * from './ripple'

package/src/ripple/index.ts

@@ -0,0 +1,92 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue'
+
+import { Ripple } from './ripple'
+
+const rippleMap = new WeakMap<HTMLElement, Ripple>()
+
+function handleMousedown(e: MouseEvent) {
+  if (e.button !== 0) return
+  const container = e.currentTarget as HTMLElement
+
+  const mouseupHandler = () => {
+    rippleMap.get(container)?.remove()
+    document.removeEventListener('mouseup', mouseupHandler)
+  }
+
+  document.addEventListener('mouseup', mouseupHandler)
+
+  let ripple = rippleMap.get(container)
+  if (!ripple) {
+    const { rippleClass, duration } = container.dataset
+    ripple = new Ripple(container, {
+      rippleClass,
+      duration: duration ? Number(duration) : undefined
+    })
+    rippleMap.set(container, ripple)
+  }
+
+  ripple.showByEvent(e)
+}
+
+function handleMouseleave(e: MouseEvent) {
+  rippleMap.get(e.currentTarget as HTMLElement)?.remove()
+}
+
+/**
+ * 注册按下事件
+ * @param el
+ * @param binding
+ * @todo 如有必要将来可添加触摸事件
+ */
+const registerEvents = (el: HTMLElement, binding: DirectiveBinding<any>) => {
+  // 如果指令绑定的值为false则不应用该事件.
+  if (binding.value === false) return
+
+  el.addEventListener('mousedown', handleMousedown)
+  el.addEventListener('mouseleave', handleMouseleave)
+}
+
+/**
+ * 注销按下事件
+ * @param el 元素
+ */
+const unregisterEvents = (el: HTMLElement) => {
+  el.removeEventListener('mousedown', handleMousedown)
+  el.removeEventListener('mouseleave', handleMouseleave)
+}
+
+export { Ripple }
+
+export const vRipple: ObjectDirective<HTMLElement> = {
+  mounted: (el, binding) => {
+    if (binding.value !== false) {
+      el.dataset.rippleClass = binding.value
+    }
+
+    if (binding.arg) {
+      el.dataset.duration = binding.arg
+    }
+
+    registerEvents(el, binding)
+  },
+
+  unmounted: (el) => {
+    unregisterEvents(el)
+    rippleMap.get(el)?.remove()
+    rippleMap.delete(el)
+  },
+
+  updated(el, binding) {
+    const registered = binding.oldValue !== false
+
+    if (binding.value !== false) {
+      if (!registered) {
+        registerEvents(el, binding)
+      }
+    } else {
+      if (registered) {
+        unregisterEvents(el)
+      }
+    }
+  }
+}

package/src/ripple/ripple.ts

@@ -0,0 +1,348 @@
+import { bem, nextFrame, removeStyles, setStyles, type BEM } from '@veltra/utils'
+import type { CSSProperties } from 'vue'
+
+function pick<T extends object, K extends keyof T>(obj: T, keys: readonly K[]): Pick<T, K> {
+  const out: Partial<Pick<T, K>> = {}
+  for (const k of keys) {
+    if (k in obj) out[k] = obj[k]
+  }
+  return out as Pick<T, K>
+}
+
+/** 鼠标或触摸事件类型 */
+type MouseOrTouchEvent = MouseEvent | Touch
+
+/** 波纹位置接口 */
+interface RipplePosition {
+  /** X 坐标 */
+  x: number
+  /** Y 坐标 */
+  y: number
+}
+
+/** 波纹配置接口 */
+interface RippleConfig {
+  /** 波纹类 */
+  rippleClass?: string
+  /** 波纹动画时长 */
+  duration?: number
+  /** 是否自动移除 */
+  autoRemove?: boolean
+}
+
+/** 容器样式接口 */
+interface ContainerStyle {
+  /** 定位方式 */
+  position: string
+  /** 溢出处理 */
+  overflow: string
+}
+
+/**
+ * 波纹效果类
+ * 用于在指定容器中创建和管理波纹动画效果
+ * 支持鼠标点击和触摸事件触发的波纹动画
+ */
+export class Ripple {
+  /** 波纹样式类名生成器 */
+  static cls: BEM<'ripple'> = bem('ripple')
+
+  /** 波纹容器元素 */
+  private container: HTMLElement
+  /** 容器矩形区域缓存 */
+  private containerRect?: DOMRect
+  /** 容器计算样式缓存 */
+  private containerComputedStyle?: ContainerStyle
+  /** 容器原始样式备份 */
+  private containerStyle?: ContainerStyle
+
+  /** 当前活跃的波纹元素 */
+  private currentRippleEl?: HTMLElement
+
+  /** 波纹配置 */
+  private config?: RippleConfig
+
+  /** 波纹元素数量（私有） */
+  private _amount = 0
+
+  /**
+   * 设置波纹元素数量
+   * 当数量为 0 时自动重置容器样式
+   */
+  private set amount(amount: number) {
+    this._amount = amount
+    amount === 0 && this.resetContainerStyle()
+  }
+
+  /** 获取当前波纹元素数量 */
+  private get amount(): number {
+    return this._amount
+  }
+
+  /**
+   * 构造函数
+   * @param container 波纹容器元素
+   * @param config 波纹配置选项
+   */
+  constructor(container: HTMLElement, config?: RippleConfig) {
+    this.container = container
+    if (config) {
+      this.config = config
+    }
+  }
+
+  /**
+   * 获取波纹容器元素
+   * @returns 容器元素
+   */
+  getContainer(): HTMLElement {
+    return this.container
+  }
+
+  /**
+   * 获取容器矩形区域
+   * 使用缓存机制避免重复计算
+   * @returns 容器矩形区域
+   */
+  private getContainerRect(): DOMRect {
+    // if (this.containerRect) return this.containerRect
+    const rect = this.container.getBoundingClientRect()
+    this.containerRect = rect
+    return this.containerRect
+  }
+
+  /**
+   * 获取波纹圆心位置
+   * 根据鼠标或触摸事件计算相对于容器的坐标
+   * @param e 鼠标或触摸事件
+   * @returns 波纹圆心位置
+   */
+  private getRippleCenterPosition(e: MouseOrTouchEvent): { x: number; y: number } {
+    const { left, top } = this.getContainerRect()
+    const { clientX, clientY } = e
+    return { x: clientX - left, y: clientY - top }
+  }
+
+  /**
+   * 标记元素过渡动画结束
+   * @param el 目标元素
+   */
+  private markTransitionEnd(el: HTMLElement) {
+    el.dataset.transitionend = 'true'
+  }
+
+  /**
+   * 标记元素为可移除状态
+   * @param el 目标元素
+   */
+  private markRemovable(el: HTMLElement) {
+    el.dataset.removable = 'true'
+  }
+
+  /**
+   * 计算波纹半径
+   * 根据点击位置计算能覆盖整个容器的最小半径
+   * @param centerPosition 波纹圆心位置
+   * @returns 波纹半径
+   */
+  private calcRippleRadius(centerPosition: RipplePosition) {
+    const { x, y } = centerPosition
+    const { width, height } = this.getContainerRect()
+    const edgeA = Math.max(x, width - x)
+    const edgeB = Math.max(y, height - y)
+    return Math.ceil(Math.sqrt(edgeA ** 2 + edgeB ** 2))
+  }
+
+  /**
+   * 设置容器样式
+   * 确保容器具有正确的定位和溢出隐藏属性以支持波纹效果
+   */
+  private setContainerStyle() {
+    const { container } = this
+
+    // 获取元素原本的内联样式
+    if (this.amount === 0 && !this.containerStyle) {
+      this.containerStyle = {
+        position: container.style.position,
+        overflow: container.style.overflow
+      }
+    }
+
+    if (!this.containerComputedStyle) {
+      this.containerComputedStyle = pick(window.getComputedStyle(container), [
+        'overflow',
+        'position'
+      ])
+    }
+    const { position, overflow } = this.containerComputedStyle
+    const style: CSSProperties = {}
+
+    // 如果是静态定位，改为相对定位以支持绝对定位的波纹元素
+    if (position === 'static') {
+      style.position = 'relative'
+    }
+
+    // 如果溢出不是隐藏，设置为隐藏以裁剪波纹边界
+    if (overflow !== 'hidden') {
+      style.overflow = 'hidden'
+    }
+
+    setStyles(container, style)
+  }
+
+  /**
+   * 重置容器样式
+   * 恢复容器的原始样式设置
+   */
+  private resetContainerStyle() {
+    const { container, containerStyle } = this
+    if (!containerStyle) {
+      return removeStyles(container, ['overflow', 'position'])
+    }
+
+    const attrsToRemoved: string[] = []
+
+    if (!containerStyle.overflow) {
+      attrsToRemoved.push('overflow')
+    }
+
+    if (!containerStyle.position) {
+      attrsToRemoved.push('position')
+    }
+
+    removeStyles(container, attrsToRemoved)
+
+    if (!attrsToRemoved.length) {
+      setStyles(container, containerStyle as CSSProperties)
+    }
+  }
+
+  /**
+   * 创建波纹元素
+   * 生成波纹DOM元素并设置样式和动画
+   * @param centerPosition 波纹圆心位置
+   */
+  private createRipple(centerPosition: RipplePosition) {
+    const { config } = this
+
+    // 必须在创建ripple元素之前调用
+    this.setContainerStyle()
+
+    const rippleEl = document.createElement('span')
+    this.currentRippleEl = rippleEl
+    rippleEl.classList.add(Ripple.cls.b)
+    config?.rippleClass && rippleEl.classList.add(config.rippleClass)
+
+    const radius = this.calcRippleRadius(centerPosition)
+    const diameter = radius * 2
+
+    // 设置波纹元素的基础样式
+    const rippleStyle: CSSProperties = {
+      width: `${diameter}px`,
+      height: `${diameter}px`,
+      left: `${centerPosition.x - radius}px`,
+      top: `${centerPosition.y - radius}px`
+    }
+
+    // 设置自定义动画时长
+    if (config?.duration) {
+      rippleStyle.transitionDuration = `${config.duration}ms`
+    }
+
+    setStyles(rippleEl, rippleStyle)
+
+    // 监听过渡动画结束事件
+    const transitionEndHandler = (e: TransitionEvent) => {
+      if (e.propertyName !== 'transform') return
+
+      rippleEl.removeEventListener('transitionend', transitionEndHandler)
+      this.markTransitionEnd(rippleEl)
+      // 尝试移除
+      this.removeRippleEl(rippleEl)
+    }
+
+    rippleEl.addEventListener('transitionend', transitionEndHandler)
+
+    this.container.appendChild(rippleEl)
+    this.amount++
+
+    // 如果配置了自动移除，标记为可移除
+    if (config?.autoRemove) {
+      this.markRemovable(rippleEl)
+    }
+
+    // 触发缩放动画
+    nextFrame(() => {
+      setStyles(rippleEl, { transform: 'scale3d(1, 1, 1)' })
+    })
+  }
+
+  /**
+   * 移除波纹元素
+   * 检查元素状态，符合条件时执行淡出动画并移除DOM
+   * @param rippleEl 要移除的波纹元素
+   */
+  private removeRippleEl(rippleEl: HTMLElement): void {
+    const { transitionend, removable } = rippleEl.dataset
+
+    // 只有在过渡结束且标记为可移除时才执行移除
+    if (transitionend !== 'true' || removable !== 'true') return
+
+    const transitionEndOrCancelHandler = (e: TransitionEvent) => {
+      if (e.propertyName !== 'opacity') return
+
+      rippleEl.removeEventListener('transitionend', transitionEndOrCancelHandler)
+      rippleEl.removeEventListener('transitioncancel', transitionEndOrCancelHandler)
+      rippleEl.remove()
+      this.amount--
+    }
+
+    rippleEl.addEventListener('transitionend', transitionEndOrCancelHandler)
+    rippleEl.addEventListener('transitioncancel', transitionEndOrCancelHandler)
+    rippleEl.classList.add(bem.is('removing'))
+  }
+
+  /**
+   * 显示波纹
+   * 根据指定位置创建波纹效果
+   * @param centerPosition 波纹圆心位置
+   */
+  show(centerPosition: RipplePosition): void {
+    this.createRipple(centerPosition)
+  }
+
+  /**
+   * 根据事件对象显示波纹
+   * 从鼠标或触摸事件中提取位置信息并创建波纹
+   * @param e 鼠标或触摸事件对象
+   */
+  showByEvent(e: MouseEvent | TouchEvent): void {
+    const centerPosition = this.getRippleCenterPosition(e instanceof MouseEvent ? e : e.touches[0]!)
+    this.createRipple(centerPosition)
+  }
+
+  /**
+   * 移除波纹
+   * 手动移除当前活跃的波纹元素
+   * 注意：如果已经在Ripple配置中增加了autoRemove属性，则不需要调用此方法
+   */
+  remove(): void {
+    let el = this.currentRippleEl
+    if (el) {
+      this.markRemovable(el)
+      this.removeRippleEl(el)
+      el = undefined
+      this.currentRippleEl = undefined
+    }
+  }
+
+  /**
+   * 重置容器矩形
+   * 当容器大小发生变化时，需要重置容器矩形缓存
+   * 否则计算的波纹半径不准确
+   * 注意：大部分情况下不需要调用此方法
+   */
+  resetContainerRect(): void {
+    this.containerRect = undefined
+  }
+}

package/src/ripple/style.scss

@@ -0,0 +1,20 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+
+@include m.b(ripple) {
+  position: absolute;
+  background-color: rgba($color: #000000, $alpha: 0.2);
+  pointer-events: none;
+  border-radius: 50%;
+  will-change: transform;
+  z-index: 0;
+  opacity: 0.6;
+  transform: scale3d(0.2, 0.2, 1);
+  transform-origin: center;
+  transition-property: transform, opacity !important;
+  transition-timing-function: cubic-bezier(0.82, 0.84, 0.28, 0.92) !important;
+  transition-duration: 300ms;
+
+  @include m.is(removing) {
+    opacity: 0 !important;
+  }
+}

package/src/ripple/style.ts

@@ -0,0 +1 @@
+import './style.scss'