@veltra/compositions 1.0.0

package/dist/use-model/index.js

@@ -0,0 +1,46 @@
+import { ref, shallowRef, watch } from "vue";
+//#region src/use-model/index.ts
+/**
+* 返回一个基于提供的选项的响应式模型值。
+* 该方法在将来可能会被替代, 目前使用是为了类型提示可用
+* 如果 local 选项为true, 模型值将是响应式的，并与属性值同步。
+* 如果 local 选项为 false，则模型值将是一个代理对象，具有 getter 和 setter。当值发生更改时，它会触发一个更新事件。
+* @param options - 选项
+* @returns - 一个模型值
+*/
+function useModel(options) {
+	const { props, propName = "modelValue", emit, local = true, defaultValue, shallow = false } = options;
+	if (local) {
+		const _default = props[propName] ?? defaultValue;
+		const _value = (shallow ? shallowRef : ref)(_default);
+		watch(() => props[propName], (v) => {
+			_value.value = v;
+		});
+		const getLocal = () => {
+			return typeof local === "function" ? local() : local;
+		};
+		return {
+			__v_isRef: true,
+			get value() {
+				return _value.value;
+			},
+			set value(v) {
+				if (v !== _value.value) emit(`update:${propName}`, v);
+				if (getLocal()) _value.value = v;
+			}
+		};
+	}
+	return {
+		__v_isRef: true,
+		get value() {
+			return props[propName] ?? defaultValue;
+		},
+		set value(v) {
+			emit(`update:${propName}`, v);
+		}
+	};
+}
+//#endregion
+export { useModel };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-model/index.ts"],"sourcesContent":["import { type Ref, ref, watch, shallowRef } from 'vue'\n\ninterface ModelOptions<Props extends Record<string, unknown>, Name extends keyof Props> {\n  /** 组件定义的属性 */\n  props: Props\n  /** 属性名称 */\n  propName?: Name\n  /** 事件触发函数 */\n  emit: (...args: any[]) => void\n  /** 是否为本地模式, 默认为true, 本地模式允许组件不受控来触发视图更新 */\n  local?: boolean | (() => boolean)\n  /** 默认值 */\n  defaultValue?: Props[Name]\n  /**\n   * 是否浅层响应\n   * @default false\n   */\n  shallow?: boolean\n}\n\n/**\n * 返回一个基于提供的选项的响应式模型值。\n * 该方法在将来可能会被替代, 目前使用是为了类型提示可用\n * 如果 local 选项为true, 模型值将是响应式的，并与属性值同步。\n * 如果 local 选项为 false，则模型值将是一个代理对象，具有 getter 和 setter。当值发生更改时，它会触发一个更新事件。\n * @param options - 选项\n * @returns - 一个模型值\n */\n\nexport function useModel<\n  Props extends Record<string, any>,\n  Name extends keyof Props = 'modelValue'\n>(\n  options: ModelOptions<Props, Name>\n): Ref<Props[Name] | undefined> | { __v_isRef: boolean; value: Props[Name] } {\n  const {\n    props,\n    propName = 'modelValue',\n    emit,\n    local = true,\n    defaultValue,\n    shallow = false\n  } = options\n\n  if (local) {\n    const _default = props[propName] ?? defaultValue\n    const r = shallow ? shallowRef : ref\n\n    // 创建一个响应式对象\n    const _value = r(_default)\n\n    // 监听属性的变更\n    watch(\n      () => props[propName],\n      (v) => {\n        _value.value = v\n      }\n    )\n\n    const getLocal = () => {\n      return typeof local === 'function' ? local() : local\n    }\n\n    const value = {\n      __v_isRef: true,\n      get value() {\n        return _value.value\n      },\n      set value(v) {\n        if (v !== _value.value) {\n          emit(`update:${propName as string}`, v)\n        }\n        if (getLocal()) {\n          _value.value = v\n        }\n      }\n    }\n\n    return value\n  }\n\n  // 创建一个拥有getter和setter的对象\n  const value = {\n    __v_isRef: true,\n\n    get value(): Props[Name] {\n      return (props[propName] ?? defaultValue) as Props[Name]\n    },\n\n    set value(v: Props[Name]) {\n      emit(`update:${propName as string}`, v)\n    }\n  }\n\n  return value\n}\n"],"mappings":";;;;;;;;;;AA6BA,SAAgB,SAId,SAC2E;CAC3E,MAAM,EACJ,OACA,WAAW,cACX,MACA,QAAQ,MACR,cACA,UAAU,UACR;AAEJ,KAAI,OAAO;EACT,MAAM,WAAW,MAAM,aAAa;EAIpC,MAAM,UAHI,UAAU,aAAa,KAGhB,SAAS;AAG1B,cACQ,MAAM,YACX,MAAM;AACL,UAAO,QAAQ;IAElB;EAED,MAAM,iBAAiB;AACrB,UAAO,OAAO,UAAU,aAAa,OAAO,GAAG;;AAkBjD,SAfc;GACZ,WAAW;GACX,IAAI,QAAQ;AACV,WAAO,OAAO;;GAEhB,IAAI,MAAM,GAAG;AACX,QAAI,MAAM,OAAO,MACf,MAAK,UAAU,YAAsB,EAAE;AAEzC,QAAI,UAAU,CACZ,QAAO,QAAQ;;GAGpB;;AAkBH,QAZc;EACZ,WAAW;EAEX,IAAI,QAAqB;AACvB,UAAQ,MAAM,aAAa;;EAG7B,IAAI,MAAM,GAAgB;AACxB,QAAK,UAAU,YAAsB,EAAE;;EAE1C"}

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

@@ -0,0 +1,53 @@
+import { ShallowRef } from "vue";
+import { ComputePositionReturn } from "@floating-ui/dom";
+
+//#region src/use-pop/index.d.ts
+type TipDirection = 'top' | 'bottom' | 'left' | 'right';
+type TipAlign = 'center' | 'start' | 'end';
+interface Options {
+  /** 触发元素 */
+  triggerRef: ShallowRef<HTMLElement | undefined>;
+  /** 内容元素 */
+  contentRef: ShallowRef<HTMLElement | undefined>;
+  /**
+   * 箭头元素，如果存在，则会在弹框的箭头位置显示箭头
+   */
+  arrowRef?: ShallowRef<HTMLElement | undefined>;
+  /** 方向 */
+  direction?: ShallowRef<TipDirection> | TipDirection;
+  /** 对齐方式 */
+  alignment?: ShallowRef<TipAlign> | TipAlign;
+  /**
+   * 箭头大小
+   * @default 10
+   */
+  arrowSize?: number;
+  /**
+   * 触发器元素位置变更时回调，
+   * 一般用于在触发器元素位置变更时更新弹框位置
+   */
+  onTriggerPositionChange?: () => void;
+  /** 更新元素前回调 */
+  onBeforeUpdate?: (triggerEl: HTMLElement, contentEl: HTMLElement) => void;
+  /** 更新元素后回调 */
+  onAfterUpdate?: (position: ComputePositionReturn) => void;
+  /** 弹框弹出时回调 */
+  onPop?: (position: ComputePositionReturn) => void;
+}
+interface PopResult {
+  /**
+   * 更新弹框位置
+   */
+  update: () => Promise<void>;
+  /** 浮框容器id */
+  popperContainerId: string;
+}
+/**
+ * 浮框组合式函数
+ * @param options 选项
+ * @returns
+ */
+declare function usePop(options: Options): PopResult;
+//#endregion
+export { usePop };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-pop/index.js

@@ -0,0 +1,121 @@
+import { getScrollParents, setStyles } from "@veltra/utils";
+import { isRef, onBeforeUnmount, watch } from "vue";
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/use-pop/index.ts
+let popperContainer = null;
+const popperContainerId = "pop-container";
+/**
+* 浮框组合式函数
+* @param options 选项
+* @returns
+*/
+function usePop(options) {
+	if (!popperContainer) {
+		popperContainer = document.createElement("div");
+		popperContainer.id = popperContainerId;
+		document.body.appendChild(popperContainer);
+	}
+	const { triggerRef, contentRef, arrowRef, arrowSize = 10, onTriggerPositionChange, onAfterUpdate, onBeforeUpdate, direction, alignment, onPop } = options;
+	/** 箭头位置 */
+	const arrowPlacementDict = {
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right"
+	};
+	function getMaybeRefValue(value) {
+		return isRef(value) ? value.value : value;
+	}
+	/**
+	* 更新浮框位置
+	* @param callbackOnPop 是否在弹出时回调
+	*/
+	async function update(callbackOnPop = false) {
+		const triggerEl = triggerRef.value;
+		const contentEl = contentRef.value;
+		if (!(triggerEl instanceof HTMLElement) || !(contentEl instanceof HTMLElement)) return;
+		onBeforeUpdate?.(triggerEl, contentEl);
+		const middleware = [
+			offset(arrowRef?.value ? arrowSize : 6),
+			flip(),
+			shift()
+		];
+		if (arrowRef?.value) middleware.push(arrow({ element: arrowRef.value }));
+		const _direction = getMaybeRefValue(direction) ?? "top";
+		const _alignment = getMaybeRefValue(alignment) ?? "center";
+		const position = await computePosition(triggerEl, contentEl, {
+			middleware,
+			placement: `${_direction}${_alignment === "center" ? "" : `-${_alignment}`}`
+		});
+		const { x, y, middlewareData, placement } = position;
+		setStyles(contentEl, {
+			left: `${x}px`,
+			top: `${y}px`
+		});
+		callbackOnPop && onPop?.(position);
+		onAfterUpdate?.(position);
+		if (middlewareData.arrow) {
+			const { x: arrowX, y: arrowY } = middlewareData.arrow;
+			const arrowPlacement = arrowPlacementDict[placement.split("-")[0]];
+			const size = `${arrowSize}px`;
+			const arrowRadius = arrowSize / 2;
+			setStyles(arrowRef.value, {
+				width: size,
+				height: size,
+				left: arrowX && `${arrowX - arrowRadius}px`,
+				top: arrowY && `${arrowY - arrowRadius}px`,
+				[arrowPlacement]: `-${arrowRadius}px`
+			});
+		}
+	}
+	let scrollParents = [];
+	/** 为触发器元素的祖先元素添加滚动事件 */
+	function addScrollEvents() {
+		if (!triggerRef.value) return;
+		if (onTriggerPositionChange) {
+			scrollParents = getScrollParents(triggerRef.value);
+			scrollParents.forEach((el) => {
+				el.addEventListener("scroll", onTriggerPositionChange);
+			});
+		}
+	}
+	/** 移除触发器元素祖先元素的滚动事件 */
+	function removeScrollEvents() {
+		if (onTriggerPositionChange) scrollParents.forEach((el) => {
+			el.removeEventListener("scroll", onTriggerPositionChange);
+		});
+		scrollParents = [];
+	}
+	function addResizeEvents() {
+		onTriggerPositionChange && window.addEventListener("resize", onTriggerPositionChange);
+	}
+	function removeResizeEvents() {
+		onTriggerPositionChange && window.removeEventListener("resize", onTriggerPositionChange);
+	}
+	watch([
+		contentRef,
+		() => getMaybeRefValue(direction),
+		() => getMaybeRefValue(alignment)
+	], ([content]) => {
+		if (content) {
+			update(true);
+			addScrollEvents();
+			addResizeEvents();
+			return;
+		}
+		removeScrollEvents();
+		removeResizeEvents();
+	});
+	onBeforeUnmount(() => {
+		removeScrollEvents();
+		removeResizeEvents();
+	});
+	return {
+		update,
+		popperContainerId
+	};
+}
+//#endregion
+export { usePop };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-pop/index.ts"],"sourcesContent":["import {\n  computePosition,\n  flip,\n  shift,\n  arrow,\n  offset,\n  type ComputePositionReturn,\n  type Placement\n} from '@floating-ui/dom'\nimport { getScrollParents, setStyles } from '@veltra/utils'\nimport { isRef, onBeforeUnmount, watch, type Ref, type ShallowRef } from 'vue'\n\ntype TipDirection = 'top' | 'bottom' | 'left' | 'right'\ntype TipAlign = 'center' | 'start' | 'end'\n\ninterface Options {\n  /** 触发元素 */\n  triggerRef: ShallowRef<HTMLElement | undefined>\n  /** 内容元素 */\n  contentRef: ShallowRef<HTMLElement | undefined>\n  /**\n   * 箭头元素，如果存在，则会在弹框的箭头位置显示箭头\n   */\n  arrowRef?: ShallowRef<HTMLElement | undefined>\n  /** 方向 */\n  direction?: ShallowRef<TipDirection> | TipDirection\n  /** 对齐方式 */\n  alignment?: ShallowRef<TipAlign> | TipAlign\n  /**\n   * 箭头大小\n   * @default 10\n   */\n  arrowSize?: number\n  /**\n   * 触发器元素位置变更时回调，\n   * 一般用于在触发器元素位置变更时更新弹框位置\n   */\n  onTriggerPositionChange?: () => void\n  /** 更新元素前回调 */\n  onBeforeUpdate?: (triggerEl: HTMLElement, contentEl: HTMLElement) => void\n  /** 更新元素后回调 */\n  onAfterUpdate?: (position: ComputePositionReturn) => void\n  /** 弹框弹出时回调 */\n  onPop?: (position: ComputePositionReturn) => void\n}\n\ninterface PopResult {\n  /**\n   * 更新弹框位置\n   */\n  update: () => Promise<void>\n  /** 浮框容器id */\n  popperContainerId: string\n}\n\nlet popperContainer: HTMLElement | null = null\n\nconst popperContainerId = 'pop-container'\n\n/**\n * 浮框组合式函数\n * @param options 选项\n * @returns\n */\nexport function usePop(options: Options): PopResult {\n  if (!popperContainer) {\n    popperContainer = document.createElement('div')\n    popperContainer.id = popperContainerId\n    document.body.appendChild(popperContainer)\n  }\n\n  const {\n    triggerRef,\n    contentRef,\n    arrowRef,\n    arrowSize = 10,\n    onTriggerPositionChange,\n    onAfterUpdate,\n    onBeforeUpdate,\n    direction,\n    alignment,\n    onPop\n  } = options\n\n  /** 箭头位置 */\n  const arrowPlacementDict = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }\n\n  function getMaybeRefValue<T>(value?: Ref<T> | T) {\n    return isRef(value) ? value.value : value\n  }\n\n  /**\n   * 更新浮框位置\n   * @param callbackOnPop 是否在弹出时回调\n   */\n  async function update(callbackOnPop = false) {\n    const triggerEl = triggerRef.value\n    const contentEl = contentRef.value\n\n    if (!(triggerEl instanceof HTMLElement) || !(contentEl instanceof HTMLElement)) {\n      return\n    }\n\n    onBeforeUpdate?.(triggerEl, contentEl)\n\n    // 计算位置 ↓↓↓\n    const middleware = [offset(arrowRef?.value ? arrowSize : 6), flip(), shift()]\n\n    if (arrowRef?.value) {\n      middleware.push(arrow({ element: arrowRef.value }))\n    }\n\n    const _direction = getMaybeRefValue(direction) ?? 'top'\n    const _alignment = getMaybeRefValue(alignment) ?? 'center'\n\n    const position = await computePosition(triggerEl, contentEl, {\n      middleware,\n\n      placement: `${_direction}${_alignment === 'center' ? '' : `-${_alignment}`}` as Placement\n    })\n\n    const { x, y, middlewareData, placement } = position\n\n    setStyles(contentEl, { left: `${x}px`, top: `${y}px` })\n    callbackOnPop && onPop?.(position)\n    onAfterUpdate?.(position)\n\n    // 设置箭头位置 ↓↓↓\n    if (middlewareData.arrow) {\n      const { x: arrowX, y: arrowY } = middlewareData.arrow\n\n      const arrowPlacement =\n        arrowPlacementDict[placement.split('-')[0]! as keyof typeof arrowPlacementDict]\n      const size = `${arrowSize}px`\n      // 箭头半径\n      const arrowRadius = arrowSize / 2\n\n      setStyles(arrowRef!.value!, {\n        width: size,\n        height: size,\n        left: arrowX && `${arrowX - arrowRadius}px`,\n        top: arrowY && `${arrowY - arrowRadius}px`,\n        [arrowPlacement]: `-${arrowRadius}px`\n      })\n    }\n    // 设置箭头位置 ↑↑↑\n  }\n\n  let scrollParents: HTMLElement[] = []\n\n  /** 为触发器元素的祖先元素添加滚动事件 */\n  function addScrollEvents() {\n    if (!triggerRef.value) return\n    if (onTriggerPositionChange) {\n      scrollParents = getScrollParents(triggerRef.value)\n      scrollParents.forEach((el) => {\n        el.addEventListener('scroll', onTriggerPositionChange)\n      })\n    }\n  }\n\n  /** 移除触发器元素祖先元素的滚动事件 */\n  function removeScrollEvents() {\n    if (onTriggerPositionChange) {\n      scrollParents.forEach((el) => {\n        el.removeEventListener('scroll', onTriggerPositionChange)\n      })\n    }\n\n    scrollParents = []\n  }\n\n  function addResizeEvents() {\n    onTriggerPositionChange && window.addEventListener('resize', onTriggerPositionChange)\n  }\n\n  function removeResizeEvents() {\n    onTriggerPositionChange && window.removeEventListener('resize', onTriggerPositionChange)\n  }\n\n  watch(\n    [contentRef, () => getMaybeRefValue(direction), () => getMaybeRefValue(alignment)],\n    ([content]) => {\n      if (content) {\n        update(true)\n        addScrollEvents()\n        addResizeEvents()\n        return\n      }\n      removeScrollEvents()\n      removeResizeEvents()\n    }\n  )\n\n  onBeforeUnmount(() => {\n    removeScrollEvents()\n    removeResizeEvents()\n  })\n\n  return {\n    /** 更新浮框位置 */\n    update,\n    /** 浮框容器id */\n    popperContainerId\n  }\n}\n"],"mappings":";;;;AAuDA,IAAI,kBAAsC;AAE1C,MAAM,oBAAoB;;;;;;AAO1B,SAAgB,OAAO,SAA6B;AAClD,KAAI,CAAC,iBAAiB;AACpB,oBAAkB,SAAS,cAAc,MAAM;AAC/C,kBAAgB,KAAK;AACrB,WAAS,KAAK,YAAY,gBAAgB;;CAG5C,MAAM,EACJ,YACA,YACA,UACA,YAAY,IACZ,yBACA,eACA,gBACA,WACA,WACA,UACE;;CAGJ,MAAM,qBAAqB;EAAE,KAAK;EAAU,OAAO;EAAQ,QAAQ;EAAO,MAAM;EAAS;CAEzF,SAAS,iBAAoB,OAAoB;AAC/C,SAAO,MAAM,MAAM,GAAG,MAAM,QAAQ;;;;;;CAOtC,eAAe,OAAO,gBAAgB,OAAO;EAC3C,MAAM,YAAY,WAAW;EAC7B,MAAM,YAAY,WAAW;AAE7B,MAAI,EAAE,qBAAqB,gBAAgB,EAAE,qBAAqB,aAChE;AAGF,mBAAiB,WAAW,UAAU;EAGtC,MAAM,aAAa;GAAC,OAAO,UAAU,QAAQ,YAAY,EAAE;GAAE,MAAM;GAAE,OAAO;GAAC;AAE7E,MAAI,UAAU,MACZ,YAAW,KAAK,MAAM,EAAE,SAAS,SAAS,OAAO,CAAC,CAAC;EAGrD,MAAM,aAAa,iBAAiB,UAAU,IAAI;EAClD,MAAM,aAAa,iBAAiB,UAAU,IAAI;EAElD,MAAM,WAAW,MAAM,gBAAgB,WAAW,WAAW;GAC3D;GAEA,WAAW,GAAG,aAAa,eAAe,WAAW,KAAK,IAAI;GAC/D,CAAC;EAEF,MAAM,EAAE,GAAG,GAAG,gBAAgB,cAAc;AAE5C,YAAU,WAAW;GAAE,MAAM,GAAG,EAAE;GAAK,KAAK,GAAG,EAAE;GAAK,CAAC;AACvD,mBAAiB,QAAQ,SAAS;AAClC,kBAAgB,SAAS;AAGzB,MAAI,eAAe,OAAO;GACxB,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;GAEhD,MAAM,iBACJ,mBAAmB,UAAU,MAAM,IAAI,CAAC;GAC1C,MAAM,OAAO,GAAG,UAAU;GAE1B,MAAM,cAAc,YAAY;AAEhC,aAAU,SAAU,OAAQ;IAC1B,OAAO;IACP,QAAQ;IACR,MAAM,UAAU,GAAG,SAAS,YAAY;IACxC,KAAK,UAAU,GAAG,SAAS,YAAY;KACtC,iBAAiB,IAAI,YAAY;IACnC,CAAC;;;CAKN,IAAI,gBAA+B,EAAE;;CAGrC,SAAS,kBAAkB;AACzB,MAAI,CAAC,WAAW,MAAO;AACvB,MAAI,yBAAyB;AAC3B,mBAAgB,iBAAiB,WAAW,MAAM;AAClD,iBAAc,SAAS,OAAO;AAC5B,OAAG,iBAAiB,UAAU,wBAAwB;KACtD;;;;CAKN,SAAS,qBAAqB;AAC5B,MAAI,wBACF,eAAc,SAAS,OAAO;AAC5B,MAAG,oBAAoB,UAAU,wBAAwB;IACzD;AAGJ,kBAAgB,EAAE;;CAGpB,SAAS,kBAAkB;AACzB,6BAA2B,OAAO,iBAAiB,UAAU,wBAAwB;;CAGvF,SAAS,qBAAqB;AAC5B,6BAA2B,OAAO,oBAAoB,UAAU,wBAAwB;;AAG1F,OACE;EAAC;QAAkB,iBAAiB,UAAU;QAAQ,iBAAiB,UAAU;EAAC,GACjF,CAAC,aAAa;AACb,MAAI,SAAS;AACX,UAAO,KAAK;AACZ,oBAAiB;AACjB,oBAAiB;AACjB;;AAEF,sBAAoB;AACpB,sBAAoB;GAEvB;AAED,uBAAsB;AACpB,sBAAoB;AACpB,sBAAoB;GACpB;AAEF,QAAO;EAEL;EAEA;EACD"}

package/dist/use-reactive-size/index.d.ts

@@ -0,0 +1,17 @@
+import { RefElement } from "../use-resize-observer/index.js";
+
+//#region src/use-reactive-size/index.d.ts
+interface ElementSize {
+  width: number;
+  height: number;
+}
+/**
+ * 响应式尺寸
+ * @param targets 目标元素
+ * @returns 目标元素的宽高
+ */
+declare function useReactiveSize(target: RefElement): ElementSize;
+declare function useReactiveSize(targets: RefElement[]): ElementSize[];
+//#endregion
+export { useReactiveSize };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-reactive-size/index.js

@@ -0,0 +1,40 @@
+import { useResizeObserver } from "../use-resize-observer/index.js";
+import { computed, reactive } from "vue";
+//#region src/use-reactive-size/index.ts
+function useReactiveSize(targets) {
+	const sizes = Array.isArray(targets) ? targets.map(() => {
+		return reactive({
+			width: 0,
+			height: 0
+		});
+	}) : reactive({
+		width: 0,
+		height: 0
+	});
+	const sizesMap = Array.isArray(targets) ? computed(() => {
+		const entries = targets.map((target, index) => {
+			return [target.value, sizes[index]];
+		}).filter(([target]) => target);
+		return new WeakMap(entries);
+	}) : computed(() => {
+		return new WeakMap(targets.value ? [[targets.value, sizes]] : []);
+	});
+	useResizeObserver({
+		targets,
+		onResize(entries) {
+			entries.forEach((entry) => {
+				const borderBoxSize = entry.borderBoxSize[0];
+				const size = sizesMap.value.get(entry.target);
+				if (size && borderBoxSize) {
+					size.width = borderBoxSize.inlineSize;
+					size.height = borderBoxSize.blockSize;
+				}
+			});
+		}
+	});
+	return sizes;
+}
+//#endregion
+export { useReactiveSize };
+
+//# sourceMappingURL=index.js.map

package/dist/use-reactive-size/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-reactive-size/index.ts"],"sourcesContent":["import { computed, reactive } from 'vue'\n\nimport { useResizeObserver, type RefElement } from '../use-resize-observer'\n\ninterface ElementSize {\n  width: number\n  height: number\n}\n\n/**\n * 响应式尺寸\n * @param targets 目标元素\n * @returns 目标元素的宽高\n */\nexport function useReactiveSize(target: RefElement): ElementSize\nexport function useReactiveSize(targets: RefElement[]): ElementSize[]\nexport function useReactiveSize(targets: RefElement | RefElement[]): ElementSize | ElementSize[] {\n  const sizes = Array.isArray(targets)\n    ? targets.map(() => {\n        return reactive({ width: 0, height: 0 })\n      })\n    : reactive({ width: 0, height: 0 })\n\n  const sizesMap = Array.isArray(targets)\n    ? computed(() => {\n        const entries = targets\n          .map((target, index) => {\n            return [target.value!, (sizes as ElementSize[])[index]!]\n          })\n          .filter(([target]) => target) as [HTMLElement, ElementSize][]\n\n        return new WeakMap(entries)\n      })\n    : computed(() => {\n        return new WeakMap(targets.value ? [[targets.value, sizes as ElementSize]] : [])\n      })\n\n  useResizeObserver({\n    targets,\n    onResize(entries) {\n      entries.forEach((entry) => {\n        const borderBoxSize = entry.borderBoxSize[0]!\n        const size = sizesMap.value.get(entry.target as HTMLElement)\n        if (size && borderBoxSize) {\n          size.width = borderBoxSize.inlineSize\n          size.height = borderBoxSize.blockSize\n        }\n      })\n    }\n  })\n\n  return sizes\n}\n"],"mappings":";;;AAgBA,SAAgB,gBAAgB,SAAiE;CAC/F,MAAM,QAAQ,MAAM,QAAQ,QAAQ,GAChC,QAAQ,UAAU;AAChB,SAAO,SAAS;GAAE,OAAO;GAAG,QAAQ;GAAG,CAAC;GACxC,GACF,SAAS;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;CAErC,MAAM,WAAW,MAAM,QAAQ,QAAQ,GACnC,eAAe;EACb,MAAM,UAAU,QACb,KAAK,QAAQ,UAAU;AACtB,UAAO,CAAC,OAAO,OAAS,MAAwB,OAAQ;IACxD,CACD,QAAQ,CAAC,YAAY,OAAO;AAE/B,SAAO,IAAI,QAAQ,QAAQ;GAC3B,GACF,eAAe;AACb,SAAO,IAAI,QAAQ,QAAQ,QAAQ,CAAC,CAAC,QAAQ,OAAO,MAAqB,CAAC,GAAG,EAAE,CAAC;GAChF;AAEN,mBAAkB;EAChB;EACA,SAAS,SAAS;AAChB,WAAQ,SAAS,UAAU;IACzB,MAAM,gBAAgB,MAAM,cAAc;IAC1C,MAAM,OAAO,SAAS,MAAM,IAAI,MAAM,OAAsB;AAC5D,QAAI,QAAQ,eAAe;AACzB,UAAK,QAAQ,cAAc;AAC3B,UAAK,SAAS,cAAc;;KAE9B;;EAEL,CAAC;AAEF,QAAO"}

package/dist/use-resize-observer/index.d.ts

@@ -0,0 +1,33 @@
+import { Ref, ShallowRef } from "vue";
+
+//#region src/use-resize-observer/index.d.ts
+type RefElement = ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>;
+interface ResizeObserverOptions {
+  /** 目标节点 */
+  targets: RefElement | RefElement[];
+  /** resize事件 */
+  onResize: ResizeObserverCallback;
+  /** 指定观察条件 */
+  when?: () => boolean;
+}
+/** 监听器 */
+type ResizeObserverReturn = {
+  /** 终止监听 */disconnect: () => void;
+};
+/**
+ * 监听目标尺寸变化
+ * @param options 选项
+ */
+declare function useResizeObserver(options: ResizeObserverOptions): ResizeObserverReturn;
+/**
+ * 监听元素尺寸变化
+ */
+declare function useObserverCallback(): {
+  observeEl: <El extends HTMLElement>(el: El, cb: (entry: Omit<ResizeObserverEntry, 'target'> & {
+    target: El;
+  }) => void) => void;
+  unobserveEl: (el: HTMLElement) => void;
+};
+//#endregion
+export { RefElement, ResizeObserverReturn, useObserverCallback, useResizeObserver };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-resize-observer/index.js

@@ -0,0 +1,92 @@
+import { onBeforeUnmount, watch } from "vue";
+//#region src/use-resize-observer/index.ts
+/**
+* 取消监听
+* @param targets 目标节点
+* @param observer 观察器
+*/
+function unobserve(targets, observer) {
+	if (Array.isArray(targets)) return targets.forEach((target) => unobserve(target, observer));
+	if (!targets.value || !observer) return;
+	observer.unobserve(targets.value);
+	observer.disconnect();
+}
+/**
+* 监听目标尺寸变化
+* @param options 选项
+*/
+function useResizeObserver(options) {
+	const { targets, onResize } = options;
+	let observer;
+	if (Array.isArray(targets)) watch(targets, (val, oldVal) => {
+		oldVal.forEach((target) => {
+			target && observer?.unobserve(target);
+		});
+		if (!observer && !!val.length) observer = new ResizeObserver(onResize);
+		val.forEach((target) => {
+			target && observer?.observe(target);
+		});
+	}, { immediate: true });
+	else watch(targets, (val, oldVal) => {
+		oldVal && observer?.unobserve(oldVal);
+		if (!observer && val) observer = new ResizeObserver(onResize);
+		val && observer?.observe(val);
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		unobserve(targets, observer);
+		observer = void 0;
+	});
+	return { disconnect() {
+		unobserve(targets, observer);
+		observer = void 0;
+	} };
+}
+/**
+* 监听元素尺寸变化
+*/
+function useObserverCallback() {
+	const observerElMap = /* @__PURE__ */ new Map();
+	const observer = new ResizeObserver((entries) => {
+		entries.forEach((entry) => {
+			const target = entry.target;
+			if (!target.dataset.ob) {
+				target.dataset.ob = "true";
+				return;
+			}
+			observerElMap.get(target)?.(entry);
+		});
+	});
+	/**
+	* 监听元素尺寸
+	* @param el 元素
+	* @param cb 回调
+	*/
+	function observeEl(el, cb) {
+		observer.observe(el);
+		observerElMap.set(el, cb);
+	}
+	/**
+	* 取消监听元素尺寸
+	* @param el 元素
+	*/
+	function unobserveEl(el) {
+		observer.unobserve(el);
+		delete el.dataset.ob;
+		observerElMap.delete(el);
+	}
+	onBeforeUnmount(() => {
+		observerElMap.forEach((_, el) => {
+			observer.unobserve(el);
+		});
+		observerElMap.clear();
+		observer.disconnect();
+	});
+	return {
+		observeEl,
+		unobserveEl
+	};
+}
+//#endregion
+export { useObserverCallback, useResizeObserver };
+
+//# sourceMappingURL=index.js.map

package/dist/use-resize-observer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-resize-observer/index.ts"],"sourcesContent":["import { type Ref, type ShallowRef, onBeforeUnmount, watch } from 'vue'\n\nexport type RefElement =\n  | ShallowRef<HTMLElement | undefined | null>\n  | Ref<HTMLElement | undefined | null>\n\ninterface ResizeObserverOptions {\n  /** 目标节点 */\n  targets: RefElement | RefElement[]\n  /** resize事件 */\n  onResize: ResizeObserverCallback\n  /** 指定观察条件 */\n  when?: () => boolean\n}\n\n/** 监听器 */\nexport type ResizeObserverReturn = {\n  /** 终止监听 */\n  disconnect: () => void\n}\n\n/**\n * 取消监听\n * @param targets 目标节点\n * @param observer 观察器\n */\nfunction unobserve(targets: RefElement | RefElement[], observer?: ResizeObserver) {\n  if (Array.isArray(targets)) {\n    return targets.forEach((target) => unobserve(target, observer))\n  }\n  if (!targets.value || !observer) return\n  observer.unobserve(targets.value)\n  observer.disconnect()\n}\n\n/**\n * 监听目标尺寸变化\n * @param options 选项\n */\nexport function useResizeObserver(options: ResizeObserverOptions): ResizeObserverReturn {\n  const { targets, onResize } = options\n\n  let observer: ResizeObserver | undefined\n\n  if (Array.isArray(targets)) {\n    watch(\n      targets,\n      (val, oldVal) => {\n        // 清除旧的观察\n        oldVal.forEach((target) => {\n          target && observer?.unobserve(target)\n        })\n\n        if (!observer && !!val.length) {\n          observer = new ResizeObserver(onResize)\n        }\n\n        val.forEach((target) => {\n          target && observer?.observe(target)\n        })\n      },\n      { immediate: true }\n    )\n  } else {\n    watch(\n      targets,\n      (val, oldVal) => {\n        oldVal && observer?.unobserve(oldVal)\n        if (!observer && val) {\n          observer = new ResizeObserver(onResize)\n        }\n        val && observer?.observe(val)\n      },\n      { immediate: true }\n    )\n  }\n\n  onBeforeUnmount(() => {\n    unobserve(targets, observer)\n    observer = undefined\n  })\n\n  return {\n    disconnect() {\n      unobserve(targets, observer)\n      observer = undefined\n    }\n  }\n}\n\n/**\n * 监听元素尺寸变化\n */\nexport function useObserverCallback(): {\n  observeEl: <El extends HTMLElement>(\n    el: El,\n    cb: (entry: Omit<ResizeObserverEntry, 'target'> & { target: El }) => void\n  ) => void\n  unobserveEl: (el: HTMLElement) => void\n} {\n  const observerElMap = new Map<HTMLElement, Function>()\n\n  const observer = new ResizeObserver((entries) => {\n    entries.forEach((entry) => {\n      const target = entry.target as HTMLElement\n      if (!target.dataset.ob) {\n        target.dataset.ob = 'true'\n        return\n      }\n      const fn = observerElMap.get(target)\n\n      fn?.(entry)\n    })\n  })\n\n  /**\n   * 监听元素尺寸\n   * @param el 元素\n   * @param cb 回调\n   */\n  function observeEl<El extends HTMLElement>(\n    el: El,\n    cb: (entry: Omit<ResizeObserverEntry, 'target'> & { target: El }) => void\n  ) {\n    observer.observe(el)\n    observerElMap.set(el, cb)\n  }\n\n  /**\n   * 取消监听元素尺寸\n   * @param el 元素\n   */\n  function unobserveEl(el: HTMLElement) {\n    observer.unobserve(el)\n    delete el.dataset.ob\n    observerElMap.delete(el)\n  }\n\n  onBeforeUnmount(() => {\n    observerElMap.forEach((_, el) => {\n      observer.unobserve(el)\n    })\n    observerElMap.clear()\n    observer.disconnect()\n  })\n\n  return { observeEl, unobserveEl }\n}\n"],"mappings":";;;;;;;AA0BA,SAAS,UAAU,SAAoC,UAA2B;AAChF,KAAI,MAAM,QAAQ,QAAQ,CACxB,QAAO,QAAQ,SAAS,WAAW,UAAU,QAAQ,SAAS,CAAC;AAEjE,KAAI,CAAC,QAAQ,SAAS,CAAC,SAAU;AACjC,UAAS,UAAU,QAAQ,MAAM;AACjC,UAAS,YAAY;;;;;;AAOvB,SAAgB,kBAAkB,SAAsD;CACtF,MAAM,EAAE,SAAS,aAAa;CAE9B,IAAI;AAEJ,KAAI,MAAM,QAAQ,QAAQ,CACxB,OACE,UACC,KAAK,WAAW;AAEf,SAAO,SAAS,WAAW;AACzB,aAAU,UAAU,UAAU,OAAO;IACrC;AAEF,MAAI,CAAC,YAAY,CAAC,CAAC,IAAI,OACrB,YAAW,IAAI,eAAe,SAAS;AAGzC,MAAI,SAAS,WAAW;AACtB,aAAU,UAAU,QAAQ,OAAO;IACnC;IAEJ,EAAE,WAAW,MAAM,CACpB;KAED,OACE,UACC,KAAK,WAAW;AACf,YAAU,UAAU,UAAU,OAAO;AACrC,MAAI,CAAC,YAAY,IACf,YAAW,IAAI,eAAe,SAAS;AAEzC,SAAO,UAAU,QAAQ,IAAI;IAE/B,EAAE,WAAW,MAAM,CACpB;AAGH,uBAAsB;AACpB,YAAU,SAAS,SAAS;AAC5B,aAAW,KAAA;GACX;AAEF,QAAO,EACL,aAAa;AACX,YAAU,SAAS,SAAS;AAC5B,aAAW,KAAA;IAEd;;;;;AAMH,SAAgB,sBAMd;CACA,MAAM,gCAAgB,IAAI,KAA4B;CAEtD,MAAM,WAAW,IAAI,gBAAgB,YAAY;AAC/C,UAAQ,SAAS,UAAU;GACzB,MAAM,SAAS,MAAM;AACrB,OAAI,CAAC,OAAO,QAAQ,IAAI;AACtB,WAAO,QAAQ,KAAK;AACpB;;AAES,iBAAc,IAAI,OAAO,GAE/B,MAAM;IACX;GACF;;;;;;CAOF,SAAS,UACP,IACA,IACA;AACA,WAAS,QAAQ,GAAG;AACpB,gBAAc,IAAI,IAAI,GAAG;;;;;;CAO3B,SAAS,YAAY,IAAiB;AACpC,WAAS,UAAU,GAAG;AACtB,SAAO,GAAG,QAAQ;AAClB,gBAAc,OAAO,GAAG;;AAG1B,uBAAsB;AACpB,gBAAc,SAAS,GAAG,OAAO;AAC/B,YAAS,UAAU,GAAG;IACtB;AACF,gBAAc,OAAO;AACrB,WAAS,YAAY;GACrB;AAEF,QAAO;EAAE;EAAW;EAAa"}

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

@@ -0,0 +1,18 @@
+import { CssTransitionOptions, Returned, StyleTransitionOptions } from "./type.js";
+
+//#region src/use-transition/index.d.ts
+/**
+ * 使用CSS类过渡
+ * @param type 过渡类型
+ * @param options 过渡选项
+ */
+declare function useTransition(type: 'css', options: CssTransitionOptions): Returned;
+/**
+ * 使用style样式过渡
+ * @param type 过渡类型
+ * @param options 过渡选项
+ */
+declare function useTransition(type: 'style', options: StyleTransitionOptions): Returned;
+//#endregion
+export { useTransition };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-transition/index.js

@@ -0,0 +1,11 @@
+import { useCssTransition } from "./use-css-transition.js";
+import { useStyleTransition } from "./use-style-transition.js";
+//#region src/use-transition/index.ts
+function useTransition(type, options) {
+	if (type === "css") return useCssTransition(options);
+	return useStyleTransition(options);
+}
+//#endregion
+export { useTransition };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-transition/index.ts"],"sourcesContent":["import type { Returned, CssTransitionOptions, StyleTransitionOptions } from './type'\nimport { useCssTransition } from './use-css-transition'\nimport { useStyleTransition } from './use-style-transition'\n\n/**\n * 使用CSS类过渡\n * @param type 过渡类型\n * @param options 过渡选项\n */\nexport function useTransition(type: 'css', options: CssTransitionOptions): Returned\n/**\n * 使用style样式过渡\n * @param type 过渡类型\n * @param options 过渡选项\n */\nexport function useTransition(type: 'style', options: StyleTransitionOptions): Returned\nexport function useTransition(type: string, options: any): Returned {\n  if (type === 'css') {\n    return useCssTransition(options)\n  }\n  return useStyleTransition(options)\n}\n"],"mappings":";;;AAgBA,SAAgB,cAAc,MAAc,SAAwB;AAClE,KAAI,SAAS,MACX,QAAO,iBAAiB,QAAQ;AAElC,QAAO,mBAAmB,QAAQ"}

package/dist/use-transition/type.d.ts

@@ -0,0 +1,47 @@
+import { CSSProperties, Ref, ShallowRef } from "vue";
+
+//#region src/use-transition/type.d.ts
+interface TransitionBase {
+  /** 被应用的目标元素 */
+  target: ShallowRef<HTMLElement | undefined> | HTMLElement;
+  /** 进入动画结束回调 */
+  afterEnter?: () => void;
+  /** 进入动画被取消回调 */
+  enterCanceled?: () => void;
+  /** 离开动画结束回调 */
+  afterLeave?: () => void;
+  /** 离开动画被取消回调 */
+  leaveCanceled?: () => void;
+}
+interface CssTransitionOptions extends TransitionBase {
+  /** 类的名称, 会生成 `${name}-enter-${'to' | 'active' | 'from'}`, `${name}-leave-${'to' | 'active' | 'from'}这几种类` */
+  name: ShallowRef<string> | string | Ref<string>;
+  /** 保留进入类 */
+  keepEnterTo?: boolean;
+}
+interface StyleTransitionOptions extends TransitionBase {
+  /** 进入后的样式 */
+  enterTo: CSSProperties;
+  /** 进入过渡时的样式 */
+  enterActive: CSSProperties;
+  /** 离开过渡时的样式 */
+  leaveActive: CSSProperties;
+}
+interface Returned {
+  /**
+   * 切换进入/离开动画
+   * @param active 是否激活
+   */
+  toggle(active: boolean | ((active: boolean) => boolean)): void;
+  /**
+   * 标记进入动画, toggle(true)的别名
+   */
+  enter(): void;
+  /**
+   * 标记离开动画, toggle(false)的别名
+   */
+  leave(): void;
+}
+//#endregion
+export { CssTransitionOptions, Returned, StyleTransitionOptions };
+//# sourceMappingURL=type.d.ts.map

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

@@ -0,0 +1,129 @@
+import { createToggle } from "@veltra/utils";
+import { computed, isRef, onBeforeUnmount, watch } from "vue";
+//#region src/use-transition/use-css-transition.ts
+const increaseTransitionCount = (el) => {
+	el._count = (el._count ?? 0) + 1;
+};
+const decreaseTransitionCount = (el) => {
+	el._count = (el._count ?? 0) - 1;
+	if (el._count <= 0) delete el._count;
+};
+/**
+* 使用css过渡
+* @param options 过渡选项
+*/
+function useCssTransition(options) {
+	const { name, target, afterEnter, afterLeave, enterCanceled, leaveCanceled, keepEnterTo = false } = options;
+	const getDom = () => isRef(target) ? target.value : target;
+	const classes = computed(() => {
+		const _name = typeof name === "string" ? name : name.value;
+		return {
+			enterFrom: `${_name}-enter-from`,
+			enterTo: `${_name}-enter-to`,
+			enterActive: `${_name}-enter-active`,
+			leaveFrom: `${_name}-leave-from`,
+			leaveTo: `${_name}-leave-to`,
+			leaveActive: `${_name}-leave-active`
+		};
+	});
+	/** 开始进入动画 */
+	const startTransitionIn = () => {
+		const { enterActive, enterTo, enterFrom } = classes.value;
+		const dom = getDom();
+		dom?.classList.add(enterFrom);
+		requestAnimationFrame(() => {
+			dom?.classList.add(enterActive);
+			requestAnimationFrame(() => {
+				dom?.classList.remove(enterFrom);
+				dom?.classList.add(enterTo);
+			});
+		});
+	};
+	/** 开始离开动画 */
+	const startTransitionOut = () => {
+		const { leaveTo, leaveActive, leaveFrom, enterTo } = classes.value;
+		const dom = getDom();
+		if (keepEnterTo) dom?.classList.remove(enterTo);
+		dom?.classList.add(leaveFrom, leaveActive);
+		requestAnimationFrame(() => {
+			dom?.classList.add(leaveActive);
+			requestAnimationFrame(() => {
+				dom?.classList.remove(leaveFrom);
+				dom?.classList.add(leaveTo);
+			});
+		});
+	};
+	const [active, toggle] = createToggle(false, (_active) => {
+		_active ? startTransitionIn() : startTransitionOut();
+	});
+	const transitionEndHandler = (e) => {
+		e.stopPropagation();
+		const { leaveActive, enterActive, enterTo, leaveTo } = classes.value;
+		const dom = getDom();
+		if (dom !== e.target) return;
+		decreaseTransitionCount(dom);
+		if (dom._count) return;
+		if (active.value) {
+			if (keepEnterTo) dom?.classList.remove(enterActive);
+			else dom?.classList.remove(enterActive, enterTo);
+			afterEnter?.();
+		} else {
+			dom?.classList.remove(leaveActive, leaveTo);
+			afterLeave?.();
+		}
+	};
+	const transitionRunHandler = (e) => {
+		e.stopPropagation();
+		const dom = getDom();
+		if (dom !== e.target) return;
+		increaseTransitionCount(dom);
+	};
+	const transitionCancelHandler = (e) => {
+		e.stopPropagation();
+		const dom = getDom();
+		if (dom !== e.target) return;
+		decreaseTransitionCount(dom);
+		if (dom._count) return;
+		const { leaveActive, enterActive } = classes.value;
+		if (active.value) {
+			dom?.classList.remove(enterActive);
+			enterCanceled?.();
+		} else {
+			dom?.classList.remove(leaveActive);
+			leaveCanceled?.();
+		}
+	};
+	/** 添加事件 */
+	const addEvent = (el) => {
+		el?.addEventListener("transitioncancel", transitionCancelHandler);
+		el?.addEventListener("transitionend", transitionEndHandler);
+		el?.addEventListener("transitionrun", transitionRunHandler);
+	};
+	/** 移除事件 */
+	const removeEvent = (el) => {
+		el?.removeEventListener("transitioncancel", transitionCancelHandler);
+		el?.removeEventListener("transitionend", transitionEndHandler);
+		el?.removeEventListener("transitionrun", transitionRunHandler);
+	};
+	if (isRef(target)) watch(target, (_target, oldTarget) => {
+		if (oldTarget) removeEvent(oldTarget);
+		_target && addEvent(_target);
+	});
+	else if (target) addEvent(target);
+	onBeforeUnmount(() => {
+		removeEvent(getDom());
+	});
+	return {
+		toggle,
+		enter() {
+			toggle(true);
+		},
+		leave() {
+			toggle(false);
+		}
+	};
+}
+//#endregion
+export { useCssTransition };
+
+//# sourceMappingURL=use-css-transition.js.map