@veltra/compositions 1.0.0

package/dist/use-transition/use-css-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-css-transition.js","names":[],"sources":["../../src/use-transition/use-css-transition.ts"],"sourcesContent":["import { createToggle } from '@veltra/utils'\nimport { isRef, watch, onBeforeUnmount, computed } from 'vue'\n\nimport type { Returned, CssTransitionOptions } from './type'\n\nconst increaseTransitionCount = (el: HTMLElement & { _count?: number }) => {\n  el._count = (el._count ?? 0) + 1\n}\n\nconst decreaseTransitionCount = (el: HTMLElement & { _count?: number }) => {\n  el._count = (el._count ?? 0) - 1\n  if (el._count <= 0) {\n    delete el._count\n  }\n}\n\n/**\n * 使用css过渡\n * @param options 过渡选项\n */\nexport function useCssTransition(options: CssTransitionOptions): Returned {\n  const {\n    name,\n    target,\n    afterEnter,\n    afterLeave,\n    enterCanceled,\n    leaveCanceled,\n    keepEnterTo = false\n  } = options\n\n  const getDom = (): (HTMLElement & { _count?: number }) | undefined =>\n    isRef(target) ? target.value : target\n\n  const classes = computed(() => {\n    const _name = typeof name === 'string' ? name : name.value\n    return {\n      /** 进入前的类 */\n      enterFrom: `${_name}-enter-from`,\n      /** 进入后最终的类 */\n      enterTo: `${_name}-enter-to`,\n      /** 【进入动画】持续时的类 */\n      enterActive: `${_name}-enter-active`,\n      /** 离开前的类 */\n      leaveFrom: `${_name}-leave-from`,\n      /** 离开类 */\n      leaveTo: `${_name}-leave-to`,\n      /** 【离开动画】持续时的类 */\n      leaveActive: `${_name}-leave-active`\n    }\n  })\n\n  /** 开始进入动画 */\n  const startTransitionIn = () => {\n    const { enterActive, enterTo, enterFrom } = classes.value\n    const dom = getDom()\n\n    dom?.classList.add(enterFrom)\n\n    requestAnimationFrame(() => {\n      dom?.classList.add(enterActive)\n      requestAnimationFrame(() => {\n        dom?.classList.remove(enterFrom)\n        dom?.classList.add(enterTo)\n      })\n    })\n  }\n\n  /** 开始离开动画 */\n  const startTransitionOut = () => {\n    const { leaveTo, leaveActive, leaveFrom, enterTo } = classes.value\n    const dom = getDom()\n\n    // 标记动画进入离开状态\n    if (keepEnterTo) {\n      dom?.classList.remove(enterTo)\n    }\n    dom?.classList.add(leaveFrom, leaveActive)\n\n    requestAnimationFrame(() => {\n      dom?.classList.add(leaveActive)\n      requestAnimationFrame(() => {\n        dom?.classList.remove(leaveFrom)\n        dom?.classList.add(leaveTo)\n      })\n    })\n  }\n\n  const [active, toggle] = createToggle(false, (_active) => {\n    _active ? startTransitionIn() : startTransitionOut()\n  })\n\n  const transitionEndHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n\n    const { leaveActive, enterActive, enterTo, leaveTo } = classes.value\n    const dom = getDom()\n\n    if (dom !== e.target) return\n\n    decreaseTransitionCount(dom)\n\n    if (dom._count) return\n\n    // 激活状态，移除enter-active类\n    if (active.value) {\n      if (keepEnterTo) {\n        dom?.classList.remove(enterActive)\n      } else {\n        dom?.classList.remove(enterActive, enterTo)\n      }\n      afterEnter?.()\n    } else {\n      dom?.classList.remove(leaveActive, leaveTo)\n      afterLeave?.()\n    }\n  }\n\n  const transitionRunHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n    const dom = getDom()\n    if (dom !== e.target) return\n    increaseTransitionCount(dom)\n  }\n\n  const transitionCancelHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n    const dom = getDom()\n\n    if (dom !== e.target) return\n    decreaseTransitionCount(dom)\n\n    if (dom._count) return\n\n    const { leaveActive, enterActive } = classes.value\n\n    // 激活状态，移除enter-active类\n    if (active.value) {\n      dom?.classList.remove(enterActive)\n      enterCanceled?.()\n    } else {\n      dom?.classList.remove(leaveActive)\n      leaveCanceled?.()\n    }\n  }\n\n  /** 添加事件 */\n  const addEvent = (el?: HTMLElement) => {\n    el?.addEventListener('transitioncancel', transitionCancelHandler)\n    el?.addEventListener('transitionend', transitionEndHandler)\n    el?.addEventListener('transitionrun', transitionRunHandler)\n  }\n\n  /** 移除事件 */\n  const removeEvent = (el?: HTMLElement) => {\n    el?.removeEventListener('transitioncancel', transitionCancelHandler)\n    el?.removeEventListener('transitionend', transitionEndHandler)\n    el?.removeEventListener('transitionrun', transitionRunHandler)\n  }\n\n  if (isRef(target)) {\n    watch(target, (_target, oldTarget) => {\n      if (oldTarget) {\n        removeEvent(oldTarget)\n      }\n      _target && addEvent(_target)\n    })\n  } else if (target) {\n    addEvent(target)\n  }\n\n  onBeforeUnmount(() => {\n    const dom = getDom()\n    removeEvent(dom)\n  })\n\n  return {\n    toggle,\n    enter() {\n      toggle(true)\n    },\n    leave() {\n      toggle(false)\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/use-transition/use-style-transition.js

@@ -0,0 +1,127 @@
+import { watchTransition } from "./utils.js";
+import { createToggle, nextFrame, setStyles } from "@veltra/utils";
+import { isRef, watch } from "vue";
+//#region src/use-transition/use-style-transition.ts
+function useStyleTransition(options) {
+	const { enterTo, enterActive, leaveActive, target, afterEnter, afterLeave, enterCanceled, leaveCanceled } = options;
+	const getDom = () => isRef(target) ? target.value : target;
+	/** 进入动画前的初始状态 */
+	const transitionOriginStyle = {};
+	/** 获取过渡样式的初始样式 */
+	const getOriginStyles = (styles) => {
+		return Object.fromEntries(Object.keys(styles).map((key) => {
+			return [key, transitionOriginStyle[key]];
+		}));
+	};
+	watch(() => getDom(), (dom) => {
+		if (dom) {
+			const map = dom.attributeStyleMap;
+			~[...Object.keys(enterTo), ...Object.keys(enterActive)].forEach((key) => {
+				transitionOriginStyle[key] = map.get(key);
+			});
+		} else Object.keys(transitionOriginStyle).forEach((key) => {
+			delete transitionOriginStyle[key];
+		});
+	}, { immediate: true });
+	/**
+	* 添加过渡进入时并持续时的样式
+	* @param dom 元素
+	*/
+	const addEnterActive = (dom) => {
+		setStyles(dom, enterActive);
+	};
+	/**
+	* 移除过渡进入时并持续时的样式
+	* @param dom 元素
+	*/
+	const removeEnterActive = (dom) => {
+		setStyles(dom, getOriginStyles(enterActive));
+	};
+	/**
+	* 添加过渡离开并持续时的样式
+	* @param dom 元素
+	*/
+	const addLeaveActive = (dom) => {
+		setStyles(dom, leaveActive);
+	};
+	/**
+	* 移除过渡离开并持续时的样式
+	* @param dom 元素
+	*/
+	const removeLeaveActive = (dom) => {
+		setStyles(dom, getOriginStyles(leaveActive));
+	};
+	/**
+	* 添加过渡目标样式
+	* @param dom 元素
+	*/
+	/**
+	* 移除过渡目标样式
+	* @param dom 元素
+	*/
+	/**
+	* 添加过渡目标样式
+	* @param dom 元素
+	*/
+	const addEnterToStyle = (dom) => {
+		setStyles(dom, enterTo);
+	};
+	/**
+	* 移除过渡目标样式
+	* @param dom 元素
+	*/
+	const removeEnterToStyle = (dom) => {
+		setStyles(dom, getOriginStyles(enterTo));
+	};
+	/** 开始进入动画 */
+	const startEnter = () => {
+		const dom = getDom();
+		if (!dom) return;
+		addEnterActive(dom);
+		nextFrame(() => {
+			addEnterToStyle(dom);
+		});
+	};
+	/** 开始离开动画 */
+	const startLeave = () => {
+		const dom = getDom();
+		if (!dom) return;
+		addLeaveActive(dom);
+		nextFrame(() => {
+			removeEnterToStyle(dom);
+		});
+	};
+	const [active, toggle] = createToggle(false, (active) => {
+		active ? startEnter() : startLeave();
+	});
+	watchTransition(getDom, {
+		styleKeys: Object.keys(enterTo),
+		onCancel(el) {
+			if (active.value) {
+				removeEnterActive(el);
+				enterCanceled?.();
+			} else {
+				removeLeaveActive(el);
+				leaveCanceled?.();
+			}
+		},
+		onEnd(el) {
+			if (active.value) {
+				removeEnterActive(el);
+				afterEnter?.();
+			} else {
+				removeLeaveActive(el);
+				afterLeave?.();
+			}
+		}
+	});
+	return {
+		toggle,
+		enter: () => toggle(true),
+		leave: () => toggle(false)
+	};
+}
+//#endregion
+export { useStyleTransition };
+
+//# sourceMappingURL=use-style-transition.js.map

package/dist/use-transition/use-style-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-style-transition.js","names":[],"sources":["../../src/use-transition/use-style-transition.ts"],"sourcesContent":["import { createToggle, nextFrame, setStyles } from '@veltra/utils'\nimport { isRef, watch, type CSSProperties } from 'vue'\n\nimport type { Returned, StyleTransitionOptions } from './type'\nimport { watchTransition } from './utils'\n\nexport function useStyleTransition(options: StyleTransitionOptions): Returned {\n  const {\n    // enterFrom,\n    // leaveTo,\n    enterTo,\n    enterActive,\n    leaveActive,\n    target,\n    afterEnter,\n    afterLeave,\n    enterCanceled,\n    leaveCanceled\n  } = options\n\n  const getDom = (): HTMLElement | undefined => (isRef(target) ? target.value : target)\n\n  /** 进入动画前的初始状态 */\n  const transitionOriginStyle: CSSProperties = {}\n\n  /** 获取过渡样式的初始样式 */\n  const getOriginStyles = (styles: CSSProperties) => {\n    return Object.fromEntries(\n      Object.keys(styles).map((key) => {\n        return [key, transitionOriginStyle[key as keyof CSSProperties]]\n      })\n    )\n  }\n  // 监听dom并获取dom在进入动画之前的样式\n  // ...Object.keys(enterFrom ?? {}),\n  // ...Object.keys(leaveTo ?? {}),\n  watch(\n    () => getDom(),\n    (dom) => {\n      if (dom) {\n        const map = dom.attributeStyleMap\n        ~[...Object.keys(enterTo), ...Object.keys(enterActive)].forEach((key) => {\n          transitionOriginStyle[key] = map.get(key)\n        })\n      } else {\n        Object.keys(transitionOriginStyle).forEach((key) => {\n          delete transitionOriginStyle[key as keyof CSSProperties]\n        })\n      }\n    },\n    { immediate: true }\n  )\n\n  /**\n   * 添加过渡进入时并持续时的样式\n   * @param dom 元素\n   */\n  const addEnterActive = (dom: HTMLElement) => {\n    setStyles(dom, enterActive)\n  }\n\n  /**\n   * 移除过渡进入时并持续时的样式\n   * @param dom 元素\n   */\n  const removeEnterActive = (dom: HTMLElement) => {\n    setStyles(dom, getOriginStyles(enterActive))\n  }\n\n  /**\n   * 添加过渡离开并持续时的样式\n   * @param dom 元素\n   */\n  const addLeaveActive = (dom: HTMLElement) => {\n    setStyles(dom, leaveActive)\n  }\n\n  /**\n   * 移除过渡离开并持续时的样式\n   * @param dom 元素\n   */\n  const removeLeaveActive = (dom: HTMLElement) => {\n    setStyles(dom, getOriginStyles(leaveActive))\n  }\n\n  /**\n   * 添加过渡目标样式\n   * @param dom 元素\n   */\n  // const addEnterFromStyle = (dom: HTMLElement) => {\n  //   enterFrom && setStyles(dom, enterFrom)\n  // }\n\n  /**\n   * 移除过渡目标样式\n   * @param dom 元素\n   */\n  // const removeEnterFromStyle = (dom: HTMLElement) => {\n  //   if (!enterFrom) return\n\n  //   const canRemovedStyles = {}\n\n  //   for (const key in enterFrom) {\n  //     if (key in enterTo) continue\n  //     canRemovedStyles[key] = enterFrom[key]\n  //   }\n\n  //   setStyles(dom, getOriginStyles(canRemovedStyles))\n  // }\n  /**\n   * 添加过渡目标样式\n   * @param dom 元素\n   */\n  const addEnterToStyle = (dom: HTMLElement) => {\n    setStyles(dom, enterTo)\n  }\n\n  /**\n   * 移除过渡目标样式\n   * @param dom 元素\n   */\n  const removeEnterToStyle = (dom: HTMLElement) => {\n    setStyles(dom, getOriginStyles(enterTo))\n  }\n\n  /** 开始进入动画 */\n  const startEnter = () => {\n    const dom = getDom()\n    if (!dom) return\n    addEnterActive(dom)\n    // 在下一帧插入动画运动目标状态\n    nextFrame(() => {\n      addEnterToStyle(dom)\n    })\n  }\n\n  /** 开始离开动画 */\n  const startLeave = () => {\n    const dom = getDom()\n    if (!dom) return\n\n    // 标记动画进入离开状态\n    addLeaveActive(dom)\n\n    // 在下一帧移除动画运动目标状态恢复原状或者应用新的状态\n    nextFrame(() => {\n      removeEnterToStyle(dom)\n    })\n  }\n\n  const [active, toggle] = createToggle(false, (active) => {\n    active ? startEnter() : startLeave()\n  })\n\n  watchTransition(getDom, {\n    styleKeys: Object.keys(enterTo),\n    onCancel(el) {\n      // 激活状态，移除enter-active类\n      if (active.value) {\n        removeEnterActive(el)\n        enterCanceled?.()\n      } else {\n        removeLeaveActive(el)\n        leaveCanceled?.()\n      }\n    },\n\n    onEnd(el) {\n      if (active.value) {\n        removeEnterActive(el)\n        // removeEnterFromStyle(el)\n        afterEnter?.()\n      } else {\n        removeLeaveActive(el)\n\n        afterLeave?.()\n      }\n    }\n  })\n\n  return { toggle, enter: () => toggle(true), leave: () => toggle(false) }\n}\n"],"mappings":";;;;AAMA,SAAgB,mBAAmB,SAA2C;CAC5E,MAAM,EAGJ,SACA,aACA,aACA,QACA,YACA,YACA,eACA,kBACE;CAEJ,MAAM,eAAyC,MAAM,OAAO,GAAG,OAAO,QAAQ;;CAG9E,MAAM,wBAAuC,EAAE;;CAG/C,MAAM,mBAAmB,WAA0B;AACjD,SAAO,OAAO,YACZ,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ;AAC/B,UAAO,CAAC,KAAK,sBAAsB,KAA4B;IAC/D,CACH;;AAKH,aACQ,QAAQ,GACb,QAAQ;AACP,MAAI,KAAK;GACP,MAAM,MAAM,IAAI;AAChB,IAAC,CAAC,GAAG,OAAO,KAAK,QAAQ,EAAE,GAAG,OAAO,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;AACvE,0BAAsB,OAAO,IAAI,IAAI,IAAI;KACzC;QAEF,QAAO,KAAK,sBAAsB,CAAC,SAAS,QAAQ;AAClD,UAAO,sBAAsB;IAC7B;IAGN,EAAE,WAAW,MAAM,CACpB;;;;;CAMD,MAAM,kBAAkB,QAAqB;AAC3C,YAAU,KAAK,YAAY;;;;;;CAO7B,MAAM,qBAAqB,QAAqB;AAC9C,YAAU,KAAK,gBAAgB,YAAY,CAAC;;;;;;CAO9C,MAAM,kBAAkB,QAAqB;AAC3C,YAAU,KAAK,YAAY;;;;;;CAO7B,MAAM,qBAAqB,QAAqB;AAC9C,YAAU,KAAK,gBAAgB,YAAY,CAAC;;;;;;;;;;;;;;CA+B9C,MAAM,mBAAmB,QAAqB;AAC5C,YAAU,KAAK,QAAQ;;;;;;CAOzB,MAAM,sBAAsB,QAAqB;AAC/C,YAAU,KAAK,gBAAgB,QAAQ,CAAC;;;CAI1C,MAAM,mBAAmB;EACvB,MAAM,MAAM,QAAQ;AACpB,MAAI,CAAC,IAAK;AACV,iBAAe,IAAI;AAEnB,kBAAgB;AACd,mBAAgB,IAAI;IACpB;;;CAIJ,MAAM,mBAAmB;EACvB,MAAM,MAAM,QAAQ;AACpB,MAAI,CAAC,IAAK;AAGV,iBAAe,IAAI;AAGnB,kBAAgB;AACd,sBAAmB,IAAI;IACvB;;CAGJ,MAAM,CAAC,QAAQ,UAAU,aAAa,QAAQ,WAAW;AACvD,WAAS,YAAY,GAAG,YAAY;GACpC;AAEF,iBAAgB,QAAQ;EACtB,WAAW,OAAO,KAAK,QAAQ;EAC/B,SAAS,IAAI;AAEX,OAAI,OAAO,OAAO;AAChB,sBAAkB,GAAG;AACrB,qBAAiB;UACZ;AACL,sBAAkB,GAAG;AACrB,qBAAiB;;;EAIrB,MAAM,IAAI;AACR,OAAI,OAAO,OAAO;AAChB,sBAAkB,GAAG;AAErB,kBAAc;UACT;AACL,sBAAkB,GAAG;AAErB,kBAAc;;;EAGnB,CAAC;AAEF,QAAO;EAAE;EAAQ,aAAa,OAAO,KAAK;EAAE,aAAa,OAAO,MAAM;EAAE"}

package/dist/use-transition/utils.js

@@ -0,0 +1,41 @@
+import { onBeforeUnmount, watch } from "vue";
+//#region src/use-transition/utils.ts
+/**
+* 监听过渡
+* @param domGetter 元素获取函数
+* @param config 配置
+* @returns
+*/
+function watchTransition(domGetter, config) {
+	const runCallback = (e, cb) => {
+		e.stopPropagation();
+		if (e.target !== domGetter() || !config.styleKeys.includes(e.propertyName)) return;
+		cb(e.target);
+	};
+	const transitionEndHandler = (e) => {
+		if (!domGetter()) return;
+		runCallback(e, config.onEnd);
+	};
+	const transitionCancelHandler = (e) => {
+		if (!domGetter()) return;
+		runCallback(e, config.onCancel);
+	};
+	const addEvent = (el) => {
+		el.addEventListener("transitionend", transitionEndHandler, false);
+	};
+	const removeEvent = (el) => {
+		el?.removeEventListener("transitionend", transitionEndHandler);
+		el?.removeEventListener("transitioncancel", transitionCancelHandler);
+	};
+	watch(domGetter, (target, oldTarget) => {
+		removeEvent(oldTarget);
+		target && addEvent(target);
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		removeEvent(domGetter());
+	});
+}
+//#endregion
+export { watchTransition };
+
+//# sourceMappingURL=utils.js.map

package/dist/use-transition/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/use-transition/utils.ts"],"sourcesContent":["import { watch, onBeforeUnmount } from 'vue'\n\n/**\n * 监听过渡\n * @param domGetter 元素获取函数\n * @param config 配置\n * @returns\n */\nexport function watchTransition(\n  domGetter: () => HTMLElement | undefined,\n  config: {\n    styleKeys: string[]\n    onEnd: (dom: HTMLElement) => void\n    onCancel: (dom: HTMLElement) => void\n  }\n): void {\n  const runCallback = (e: TransitionEvent, cb: (el: HTMLElement) => void) => {\n    e.stopPropagation()\n    if (e.target !== domGetter() || !config.styleKeys.includes(e.propertyName)) {\n      return\n    }\n\n    cb(e.target as HTMLElement)\n  }\n\n  const transitionEndHandler = (e: TransitionEvent) => {\n    if (!domGetter()) return\n    runCallback(e, config.onEnd)\n  }\n  const transitionCancelHandler = (e: TransitionEvent) => {\n    if (!domGetter()) return\n    runCallback(e, config.onCancel)\n  }\n  const addEvent = (el: HTMLElement) => {\n    el.addEventListener('transitionend', transitionEndHandler, false)\n    // el.addEventListener('transitioncancel', transitionCancelHandler, false)\n  }\n\n  const removeEvent = (el?: HTMLElement) => {\n    el?.removeEventListener('transitionend', transitionEndHandler)\n    el?.removeEventListener('transitioncancel', transitionCancelHandler)\n  }\n\n  watch(\n    domGetter,\n    (target, oldTarget) => {\n      removeEvent(oldTarget)\n      target && addEvent(target)\n    },\n    { immediate: true }\n  )\n\n  onBeforeUnmount(() => {\n    removeEvent(domGetter())\n  })\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,gBACd,WACA,QAKM;CACN,MAAM,eAAe,GAAoB,OAAkC;AACzE,IAAE,iBAAiB;AACnB,MAAI,EAAE,WAAW,WAAW,IAAI,CAAC,OAAO,UAAU,SAAS,EAAE,aAAa,CACxE;AAGF,KAAG,EAAE,OAAsB;;CAG7B,MAAM,wBAAwB,MAAuB;AACnD,MAAI,CAAC,WAAW,CAAE;AAClB,cAAY,GAAG,OAAO,MAAM;;CAE9B,MAAM,2BAA2B,MAAuB;AACtD,MAAI,CAAC,WAAW,CAAE;AAClB,cAAY,GAAG,OAAO,SAAS;;CAEjC,MAAM,YAAY,OAAoB;AACpC,KAAG,iBAAiB,iBAAiB,sBAAsB,MAAM;;CAInE,MAAM,eAAe,OAAqB;AACxC,MAAI,oBAAoB,iBAAiB,qBAAqB;AAC9D,MAAI,oBAAoB,oBAAoB,wBAAwB;;AAGtE,OACE,YACC,QAAQ,cAAc;AACrB,cAAY,UAAU;AACtB,YAAU,SAAS,OAAO;IAE5B,EAAE,WAAW,MAAM,CACpB;AAED,uBAAsB;AACpB,cAAY,WAAW,CAAC;GACxB"}

package/dist/use-virtual/index.d.ts

@@ -0,0 +1,30 @@
+import { ComputedRef, Ref, ShallowRef } from "vue";
+import { VirtualItem } from "@tanstack/vue-virtual";
+
+//#region src/use-virtual/index.d.ts
+interface Options {
+  /** 指定启用虚拟列表的阈值 */
+  virtualThreshold?: number | Ref<number | undefined>;
+  /** 数量 */
+  count: Ref<number>;
+  /** 滚动容器 */
+  scrollEl: ShallowRef<HTMLElement | null>;
+  /** 估算高度(宽度) */
+  estimateSize?: (index: number) => number;
+  /** 列表项之间的间距 */
+  gap?: number;
+}
+type CustomVirtualItem = Omit<VirtualItem, 'key'> & {
+  key: number | string;
+};
+type VirtualReturned = {
+  /** 虚拟列表 */virtualList: ShallowRef<CustomVirtualItem[]>; /** 总高度 */
+  totalHeight: ShallowRef<number>; /** 测量元素高度 */
+  measureElement: (el: any) => void; /** 滚动到指定索引 */
+  scrollTo: (index: number) => void; /** 是否启用虚拟列表 */
+  virtualEnabled: ComputedRef<boolean>;
+};
+declare function useVirtual(options: Options): VirtualReturned;
+//#endregion
+export { VirtualReturned, useVirtual };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-virtual/index.js

@@ -0,0 +1,67 @@
+import { computed, isRef, onScopeDispose, shallowRef, watch } from "vue";
+import { Virtualizer, elementScroll, observeElementOffset, observeElementRect } from "@tanstack/vue-virtual";
+//#region src/use-virtual/index.ts
+const defaultEstimateSize = () => 34;
+function useVirtual(options) {
+	const { count, scrollEl, estimateSize, virtualThreshold, gap } = options;
+	const enabled = computed(() => {
+		if (isRef(virtualThreshold)) return virtualThreshold.value ? count.value > virtualThreshold.value : true;
+		return virtualThreshold ? count.value > virtualThreshold : true;
+	});
+	const virtualList = shallowRef([]);
+	/** 总高度 */
+	const totalHeight = shallowRef(0);
+	function updateVirtualList() {
+		if (enabled.value) {
+			totalHeight.value = v.getTotalSize();
+			virtualList.value = v.getVirtualItems();
+		}
+	}
+	const virtualizerOptions = computed(() => {
+		return {
+			enabled: enabled.value,
+			count: count.value,
+			getScrollElement: () => scrollEl.value,
+			estimateSize: estimateSize ?? defaultEstimateSize,
+			overscan: 3,
+			gap,
+			observeElementRect,
+			observeElementOffset,
+			scrollToFn: elementScroll,
+			onChange: updateVirtualList
+		};
+	});
+	const v = new Virtualizer(virtualizerOptions.value);
+	updateVirtualList();
+	const cleanup = v._didMount();
+	watch(scrollEl, (el) => {
+		el && v._willUpdate();
+	}, { immediate: true });
+	watch(() => virtualizerOptions.value, (o) => {
+		v.setOptions(o);
+		v._willUpdate();
+		updateVirtualList();
+	});
+	onScopeDispose(() => {
+		cleanup();
+	});
+	function scrollTo(index) {
+		v.scrollToIndex(index, { align: "center" });
+	}
+	/** 测量元素高度 */
+	function measureElement(el) {
+		if (!el) return;
+		v.measureElement(el);
+	}
+	return {
+		virtualEnabled: enabled,
+		virtualList,
+		totalHeight,
+		measureElement,
+		scrollTo
+	};
+}
+//#endregion
+export { useVirtual };
+
+//# sourceMappingURL=index.js.map

package/dist/use-virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-virtual/index.ts"],"sourcesContent":["import {\n  elementScroll,\n  observeElementOffset,\n  observeElementRect,\n  type VirtualItem,\n  Virtualizer\n} from '@tanstack/vue-virtual'\nimport {\n  computed,\n  isRef,\n  onScopeDispose,\n  shallowRef,\n  watch,\n  type ComputedRef,\n  type Ref,\n  type ShallowRef\n} from 'vue'\n\ninterface Options {\n  /** 指定启用虚拟列表的阈值 */\n  virtualThreshold?: number | Ref<number | undefined>\n  /** 数量 */\n  count: Ref<number>\n  /** 滚动容器 */\n  scrollEl: ShallowRef<HTMLElement | null>\n  /** 估算高度(宽度) */\n  estimateSize?: (index: number) => number\n  /** 列表项之间的间距 */\n  gap?: number\n}\n\ntype CustomVirtualItem = Omit<VirtualItem, 'key'> & { key: number | string }\n\nexport type VirtualReturned = {\n  /** 虚拟列表 */\n  virtualList: ShallowRef<CustomVirtualItem[]>\n  /** 总高度 */\n  totalHeight: ShallowRef<number>\n  /** 测量元素高度 */\n  measureElement: (el: any) => void\n  /** 滚动到指定索引 */\n  scrollTo: (index: number) => void\n  /** 是否启用虚拟列表 */\n  virtualEnabled: ComputedRef<boolean>\n}\n\nconst defaultEstimateSize = () => 34\n\nexport function useVirtual(options: Options): VirtualReturned {\n  const { count, scrollEl, estimateSize, virtualThreshold, gap } = options\n\n  const enabled = computed(() => {\n    if (isRef(virtualThreshold)) {\n      return virtualThreshold.value ? count.value > virtualThreshold.value : true\n    }\n\n    return virtualThreshold ? count.value > virtualThreshold : true\n  })\n\n  const virtualList = shallowRef<CustomVirtualItem[]>([])\n\n  /** 总高度 */\n  const totalHeight = shallowRef(0)\n\n  function updateVirtualList() {\n    if (enabled.value) {\n      totalHeight.value = v.getTotalSize()\n      virtualList.value = v.getVirtualItems() as CustomVirtualItem[]\n    }\n  }\n\n  const virtualizerOptions = computed(() => {\n    return {\n      enabled: enabled.value,\n      count: count.value,\n      getScrollElement: () => scrollEl.value,\n      estimateSize: estimateSize ?? defaultEstimateSize,\n      overscan: 3,\n      gap,\n      observeElementRect: observeElementRect,\n      observeElementOffset: observeElementOffset,\n      scrollToFn: elementScroll,\n      onChange: updateVirtualList\n    }\n  })\n\n  const v = new Virtualizer(virtualizerOptions.value)\n\n  updateVirtualList()\n\n  const cleanup = v._didMount()\n\n  watch(\n    scrollEl,\n    (el) => {\n      el && v._willUpdate()\n    },\n    { immediate: true }\n  )\n\n  watch(\n    () => virtualizerOptions.value,\n    (o) => {\n      v.setOptions(o)\n\n      v._willUpdate()\n\n      updateVirtualList()\n    }\n  )\n\n  onScopeDispose(() => {\n    cleanup()\n  })\n\n  function scrollTo(index: number) {\n    v.scrollToIndex(index, { align: 'center' })\n  }\n\n  /** 测量元素高度 */\n  function measureElement(el: Element) {\n    if (!el) return\n\n    v.measureElement(el)\n\n    return undefined\n  }\n\n  return { virtualEnabled: enabled, virtualList, totalHeight, measureElement, scrollTo }\n}\n"],"mappings":";;;AA8CA,MAAM,4BAA4B;AAElC,SAAgB,WAAW,SAAmC;CAC5D,MAAM,EAAE,OAAO,UAAU,cAAc,kBAAkB,QAAQ;CAEjE,MAAM,UAAU,eAAe;AAC7B,MAAI,MAAM,iBAAiB,CACzB,QAAO,iBAAiB,QAAQ,MAAM,QAAQ,iBAAiB,QAAQ;AAGzE,SAAO,mBAAmB,MAAM,QAAQ,mBAAmB;GAC3D;CAEF,MAAM,cAAc,WAAgC,EAAE,CAAC;;CAGvD,MAAM,cAAc,WAAW,EAAE;CAEjC,SAAS,oBAAoB;AAC3B,MAAI,QAAQ,OAAO;AACjB,eAAY,QAAQ,EAAE,cAAc;AACpC,eAAY,QAAQ,EAAE,iBAAiB;;;CAI3C,MAAM,qBAAqB,eAAe;AACxC,SAAO;GACL,SAAS,QAAQ;GACjB,OAAO,MAAM;GACb,wBAAwB,SAAS;GACjC,cAAc,gBAAgB;GAC9B,UAAU;GACV;GACoB;GACE;GACtB,YAAY;GACZ,UAAU;GACX;GACD;CAEF,MAAM,IAAI,IAAI,YAAY,mBAAmB,MAAM;AAEnD,oBAAmB;CAEnB,MAAM,UAAU,EAAE,WAAW;AAE7B,OACE,WACC,OAAO;AACN,QAAM,EAAE,aAAa;IAEvB,EAAE,WAAW,MAAM,CACpB;AAED,aACQ,mBAAmB,QACxB,MAAM;AACL,IAAE,WAAW,EAAE;AAEf,IAAE,aAAa;AAEf,qBAAmB;GAEtB;AAED,sBAAqB;AACnB,WAAS;GACT;CAEF,SAAS,SAAS,OAAe;AAC/B,IAAE,cAAc,OAAO,EAAE,OAAO,UAAU,CAAC;;;CAI7C,SAAS,eAAe,IAAa;AACnC,MAAI,CAAC,GAAI;AAET,IAAE,eAAe,GAAG;;AAKtB,QAAO;EAAE,gBAAgB;EAAS;EAAa;EAAa;EAAgB;EAAU"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@veltra/compositions",
+  "version": "1.0.0",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "check-types": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@cat-kit/core": "^1.0.1",
+    "@floating-ui/dom": "^1.7.6",
+    "@tanstack/vue-virtual": "^3.13.23",
+    "@veltra/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "tsdown": "^0.21.7"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export * from './use-component-props'
+
+export * from './use-config'
+
+export * from './use-drag'
+
+export * from './use-fallback-props'
+
+export * from './use-focus'
+
+export * from './use-form-component'
+
+export * from './use-lock'
+
+export * from './use-model'
+
+export * from './use-pop'
+
+export * from './use-reactive-size'
+
+export * from './use-resize-observer'
+
+export * from './use-transition'
+
+export * from './use-virtual'

package/src/use-component-props/index.ts

@@ -0,0 +1,63 @@
+import { extractNormalVNodes } from '@veltra/utils'
+import { defineComponent, isRef, type MaybeRef, createVNode, cloneVNode, type Component } from 'vue'
+
+/**
+ * 生成一个用于设置组件通用属性的组件
+ * @param props 组件通用的属性
+ * @returns
+ */
+export function useComponentProps<T extends Record<string, any>>(
+  props: MaybeRef<T & Record<string, any>>
+): Component {
+  return defineComponent({
+    name: 'ComponentCommonProps',
+    inheritAttrs: false,
+
+    props: {
+      /** 渲染一个标准html5标签 */
+      tag: { type: String }
+    },
+
+    setup(componentProps, { slots, attrs }) {
+      const isPropsRef = isRef(props)
+      // 非 ref 时 keys 固定，缓存避免每次 render 重复计算
+      const staticKeys = isPropsRef ? null : Object.keys(props)
+
+      const mergeNodesProps = (commonProps: Record<string, any>) => {
+        const nodes = extractNormalVNodes(slots.default?.() ?? [])
+        if (!nodes?.length) return undefined
+
+        const keys = staticKeys ?? Object.keys(commonProps)
+        return nodes.map((node) => {
+          const mergedProps: Record<string, any> = {}
+          let count = 0
+          for (let i = 0; i < keys.length; i++) {
+            const key = keys[i]!
+            // node中已定义的属性优先
+            if (node.props?.[key] !== undefined) continue
+            mergedProps[key] = attrs[key] !== undefined ? attrs[key] : commonProps[key]
+            count++
+          }
+          return count > 0 ? cloneVNode(node, mergedProps) : node
+        })
+      }
+
+      return () => {
+        const _props = isPropsRef ? props.value : props
+        const nodes = mergeNodesProps(_props)
+
+        if (componentProps.tag) {
+          if (!nodes) return undefined
+          const tagProps = Object.keys(attrs).reduce<Record<string, any>>((acc, cur) => {
+            if (!(cur in _props)) {
+              acc[cur] = attrs[cur]
+            }
+            return acc
+          }, {})
+          return createVNode(componentProps.tag, tagProps, nodes)
+        }
+        return nodes
+      }
+    }
+  })
+}

package/src/use-config/index.ts

@@ -0,0 +1,77 @@
+import { isObj } from '@cat-kit/core'
+import type { ComponentSize } from '@veltra/utils/types'
+import { reactive, readonly, watch } from 'vue'
+
+interface State {
+  /** 是否开启动画，机器老可以关闭动画来获得性能 */
+  animation: boolean
+  /** 组件尺寸大小 */
+  size: ComponentSize
+  /** 表单 */
+  form: {
+    /** 标签宽度 */
+    labelWidth?: number | number
+  }
+  paginator: { pageSize: number; pageSizeOptions: number[] }
+}
+
+const state = reactive<State>({
+  animation: true,
+  size: 'default',
+  form: { labelWidth: 80 },
+  paginator: { pageSize: 40, pageSizeOptions: [40, 100, 200, 500, 1000] }
+})
+
+export function setDocumentSize(size: ComponentSize, oldSize?: ComponentSize): void {
+  if (typeof document === 'undefined') return
+  if (oldSize) {
+    document.documentElement.classList.remove(oldSize)
+  }
+  document.documentElement.classList.add(size)
+}
+
+let stopDocumentSizeSync: (() => void) | null = null
+
+function ensureDocumentSizeSync(): void {
+  if (stopDocumentSizeSync) return
+  if (typeof document === 'undefined') return
+
+  stopDocumentSizeSync = watch(
+    () => state.size,
+    (size, oldSize) => setDocumentSize(size, oldSize)
+  )
+}
+
+function deepSet(original: Record<string, any>, extend: Record<string, any>) {
+  Object.keys(extend).forEach((key) => {
+    const val = original[key]
+    const targetVal = extend[key]
+    if (isObj(val)) {
+      if (isObj(targetVal)) {
+        deepSet(val, targetVal)
+      } else {
+        console.warn(`extend['${key}']应该是一个对象`)
+      }
+    } else {
+      original[key] = targetVal
+    }
+  })
+}
+
+export function useConfig(): {
+  config: Readonly<State>
+  setConfig: (conf: Partial<State>) => void
+} {
+  ensureDocumentSizeSync()
+  return {
+    /** 全局配置 */
+    config: readonly(state) as Readonly<State>,
+    /**
+     * 设置全局配置项
+     * @param conf
+     */
+    setConfig(conf: Partial<State>) {
+      deepSet(state, conf)
+    }
+  }
+}

package/src/use-drag/index.ts

@@ -0,0 +1,151 @@
+import { type Ref, type ShallowRef, watch, onBeforeUnmount } from 'vue'
+
+interface DragParams {
+  /** 本次拖动水平距离 */
+  x: number
+  /** 本次拖动垂直距离 */
+  y: number
+  /** 拖拽目标水平偏移量 */
+  offsetX: number
+  /** 拖拽目标垂直偏移量 */
+  offsetY: number
+  /** 鼠标事件 */
+  e: MouseEvent
+}
+
+interface DragOptions {
+  /** 拖动目标 */
+  target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>
+  /** 拖动开始 */
+  onDragStart?(e: MouseEvent): void
+  /** 拖动结束 */
+  onDragEnd?(params: DragParams): void
+  /** 拖动时 */
+  onDrag?(params: DragParams): void
+  /** 水平拖动范围 */
+  rangeX?: [number, number]
+  /** 垂直拖动范围 */
+  rangeY?: [number, number]
+  /** 初始偏移量 */
+  initial?: { offsetX?: number; offsetY?: number }
+}
+
+/**
+ * 拖动组合式方法
+ * @param options 拖动选项
+ */
+export function useDrag(options: DragOptions): {
+  update: (options: { offsetX?: number; offsetY?: number }) => void
+} {
+  const { target, onDragStart, onDrag, onDragEnd, rangeX, rangeY, initial } = options
+
+  // 鼠标拖拽前的坐标
+  let originX = 0
+  let originY = 0
+
+  let offsetX = initial?.offsetX ?? 0
+  let offsetY = initial?.offsetY ?? 0
+
+  // 拖拽参数
+  const dragParams: DragParams = { x: 0, y: 0, offsetX: 0, offsetY: 0, e: null as any }
+
+  // 先取
+  const onselectstart = document.onselectstart
+
+  const handleMousedown = (e: MouseEvent) => {
+    // 阻止事件冒泡
+    e.stopPropagation()
+    // 鼠标左键按下有效
+    if (e.button !== 0) return
+    // 放置拖拽时选择内容
+    window.getSelection()?.removeAllRanges()
+    // 阻止后续的事件监听器被执行
+    e.stopImmediatePropagation()
+
+    originX = e.x
+    originY = e.y
+
+    onDragStart?.(e)
+
+    // 禁止浏览器的选中事件, 直到mouseup事件触发时还原
+    document.onselectstart = () => false
+    document.addEventListener('mousemove', handleMousemove, { passive: true })
+    document.addEventListener('mouseup', handleMouseup)
+  }
+
+  const getOffsetXWithRange = (deltaX: number) => {
+    return Math.max(rangeX![0], Math.min(rangeX![1], offsetX + deltaX))
+  }
+
+  const getOffsetXWithoutRange = (deltaX: number) => {
+    return offsetX + deltaX
+  }
+
+  const getOffsetYWithRange = (deltaY: number) => {
+    return Math.max(rangeY![0], Math.min(rangeY![1], offsetY + deltaY))
+  }
+
+  const getOffsetYWithoutRange = (deltaY: number) => {
+    return offsetY + deltaY
+  }
+
+  const getOffsetX = rangeX ? getOffsetXWithRange : getOffsetXWithoutRange
+  const getOffsetY = rangeY ? getOffsetYWithRange : getOffsetYWithoutRange
+
+  // 避免重复创建对象影响内存占用
+  const setDragParam = (e: MouseEvent) => {
+    dragParams.x = e.x - originX
+    dragParams.y = e.y - originY
+    dragParams.offsetX = getOffsetX(dragParams.x)
+    dragParams.offsetY = getOffsetY(dragParams.y)
+    dragParams.e = e
+  }
+
+  const handleMousemove = (e: MouseEvent) => {
+    setDragParam(e)
+    onDrag?.(dragParams)
+  }
+
+  const handleMouseup = (e: MouseEvent) => {
+    setDragParam(e)
+    offsetX = dragParams.offsetX
+    offsetY = dragParams.offsetY
+
+    onDragEnd?.(dragParams)
+    document.onselectstart = onselectstart
+
+    cleanup()
+  }
+
+  // 统一的清理函数
+  const cleanup = () => {
+    document.removeEventListener('mousemove', handleMousemove)
+    document.removeEventListener('mouseup', handleMouseup)
+  }
+
+  watch(
+    target,
+    (dom, oldDom) => {
+      oldDom?.removeEventListener('mousedown', handleMousedown)
+      if (!dom) return
+      dom.addEventListener('mousedown', handleMousedown)
+    },
+    { immediate: true }
+  )
+
+  onBeforeUnmount(() => {
+    target.value?.removeEventListener('mousedown', handleMousedown)
+    cleanup()
+  })
+
+  return {
+    update(options: { offsetX?: number; offsetY?: number }) {
+      if (options.offsetX !== undefined) {
+        offsetX = options.offsetX
+      }
+      if (options.offsetY !== undefined) {
+        offsetY = options.offsetY
+      }
+    }
+  }
+}