@veltra/compositions 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { useComponentProps } from "./use-component-props/index.js";
+import { setDocumentSize, useConfig } from "./use-config/index.js";
+import { useDrag } from "./use-drag/index.js";
+import { useFallbackProps, useFormFallbackProps } from "./use-fallback-props/index.js";
+import { useFocus } from "./use-focus/index.js";
+import { useFormComponent } from "./use-form-component/index.js";
+import { Updater, useUpdateLock } from "./use-lock/index.js";
+import { useModel } from "./use-model/index.js";
+import { usePop } from "./use-pop/index.js";
+import { RefElement, ResizeObserverReturn, useObserverCallback, useResizeObserver } from "./use-resize-observer/index.js";
+import { useReactiveSize } from "./use-reactive-size/index.js";
+import { useTransition } from "./use-transition/index.js";
+import { VirtualReturned, useVirtual } from "./use-virtual/index.js";
+export { RefElement, ResizeObserverReturn, Updater, VirtualReturned, setDocumentSize, useComponentProps, useConfig, useDrag, useFallbackProps, useFocus, useFormComponent, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUpdateLock, useVirtual };

package/dist/index.js

@@ -0,0 +1,14 @@
+import { useComponentProps } from "./use-component-props/index.js";
+import { setDocumentSize, useConfig } from "./use-config/index.js";
+import { useDrag } from "./use-drag/index.js";
+import { useFallbackProps, useFormFallbackProps } from "./use-fallback-props/index.js";
+import { useFocus } from "./use-focus/index.js";
+import { useFormComponent } from "./use-form-component/index.js";
+import { useUpdateLock } from "./use-lock/index.js";
+import { useModel } from "./use-model/index.js";
+import { usePop } from "./use-pop/index.js";
+import { useObserverCallback, useResizeObserver } from "./use-resize-observer/index.js";
+import { useReactiveSize } from "./use-reactive-size/index.js";
+import { useTransition } from "./use-transition/index.js";
+import { useVirtual } from "./use-virtual/index.js";
+export { setDocumentSize, useComponentProps, useConfig, useDrag, useFallbackProps, useFocus, useFormComponent, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUpdateLock, useVirtual };

package/dist/use-component-props/index.d.ts

@@ -0,0 +1,12 @@
+import { Component, MaybeRef } from "vue";
+
+//#region src/use-component-props/index.d.ts
+/**
+ * 生成一个用于设置组件通用属性的组件
+ * @param props 组件通用的属性
+ * @returns
+ */
+declare function useComponentProps<T extends Record<string, any>>(props: MaybeRef<T & Record<string, any>>): Component;
+//#endregion
+export { useComponentProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-component-props/index.js

@@ -0,0 +1,52 @@
+import { extractNormalVNodes } from "@veltra/utils";
+import { cloneVNode, createVNode, defineComponent, isRef } from "vue";
+//#region src/use-component-props/index.ts
+/**
+* 生成一个用于设置组件通用属性的组件
+* @param props 组件通用的属性
+* @returns
+*/
+function useComponentProps(props) {
+	return defineComponent({
+		name: "ComponentCommonProps",
+		inheritAttrs: false,
+		props: { tag: { type: String } },
+		setup(componentProps, { slots, attrs }) {
+			const isPropsRef = isRef(props);
+			const staticKeys = isPropsRef ? null : Object.keys(props);
+			const mergeNodesProps = (commonProps) => {
+				const nodes = extractNormalVNodes(slots.default?.() ?? []);
+				if (!nodes?.length) return void 0;
+				const keys = staticKeys ?? Object.keys(commonProps);
+				return nodes.map((node) => {
+					const mergedProps = {};
+					let count = 0;
+					for (let i = 0; i < keys.length; i++) {
+						const key = keys[i];
+						if (node.props?.[key] !== void 0) continue;
+						mergedProps[key] = attrs[key] !== void 0 ? 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 void 0;
+					const tagProps = Object.keys(attrs).reduce((acc, cur) => {
+						if (!(cur in _props)) acc[cur] = attrs[cur];
+						return acc;
+					}, {});
+					return createVNode(componentProps.tag, tagProps, nodes);
+				}
+				return nodes;
+			};
+		}
+	});
+}
+//#endregion
+export { useComponentProps };
+
+//# sourceMappingURL=index.js.map

package/dist/use-component-props/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-component-props/index.ts"],"sourcesContent":["import { extractNormalVNodes } from '@veltra/utils'\nimport { defineComponent, isRef, type MaybeRef, createVNode, cloneVNode, type Component } from 'vue'\n\n/**\n * 生成一个用于设置组件通用属性的组件\n * @param props 组件通用的属性\n * @returns\n */\nexport function useComponentProps<T extends Record<string, any>>(\n  props: MaybeRef<T & Record<string, any>>\n): Component {\n  return defineComponent({\n    name: 'ComponentCommonProps',\n    inheritAttrs: false,\n\n    props: {\n      /** 渲染一个标准html5标签 */\n      tag: { type: String }\n    },\n\n    setup(componentProps, { slots, attrs }) {\n      const isPropsRef = isRef(props)\n      // 非 ref 时 keys 固定，缓存避免每次 render 重复计算\n      const staticKeys = isPropsRef ? null : Object.keys(props)\n\n      const mergeNodesProps = (commonProps: Record<string, any>) => {\n        const nodes = extractNormalVNodes(slots.default?.() ?? [])\n        if (!nodes?.length) return undefined\n\n        const keys = staticKeys ?? Object.keys(commonProps)\n        return nodes.map((node) => {\n          const mergedProps: Record<string, any> = {}\n          let count = 0\n          for (let i = 0; i < keys.length; i++) {\n            const key = keys[i]!\n            // node中已定义的属性优先\n            if (node.props?.[key] !== undefined) continue\n            mergedProps[key] = attrs[key] !== undefined ? attrs[key] : commonProps[key]\n            count++\n          }\n          return count > 0 ? cloneVNode(node, mergedProps) : node\n        })\n      }\n\n      return () => {\n        const _props = isPropsRef ? props.value : props\n        const nodes = mergeNodesProps(_props)\n\n        if (componentProps.tag) {\n          if (!nodes) return undefined\n          const tagProps = Object.keys(attrs).reduce<Record<string, any>>((acc, cur) => {\n            if (!(cur in _props)) {\n              acc[cur] = attrs[cur]\n            }\n            return acc\n          }, {})\n          return createVNode(componentProps.tag, tagProps, nodes)\n        }\n        return nodes\n      }\n    }\n  })\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,kBACd,OACW;AACX,QAAO,gBAAgB;EACrB,MAAM;EACN,cAAc;EAEd,OAAO,EAEL,KAAK,EAAE,MAAM,QAAQ,EACtB;EAED,MAAM,gBAAgB,EAAE,OAAO,SAAS;GACtC,MAAM,aAAa,MAAM,MAAM;GAE/B,MAAM,aAAa,aAAa,OAAO,OAAO,KAAK,MAAM;GAEzD,MAAM,mBAAmB,gBAAqC;IAC5D,MAAM,QAAQ,oBAAoB,MAAM,WAAW,IAAI,EAAE,CAAC;AAC1D,QAAI,CAAC,OAAO,OAAQ,QAAO,KAAA;IAE3B,MAAM,OAAO,cAAc,OAAO,KAAK,YAAY;AACnD,WAAO,MAAM,KAAK,SAAS;KACzB,MAAM,cAAmC,EAAE;KAC3C,IAAI,QAAQ;AACZ,UAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;MACpC,MAAM,MAAM,KAAK;AAEjB,UAAI,KAAK,QAAQ,SAAS,KAAA,EAAW;AACrC,kBAAY,OAAO,MAAM,SAAS,KAAA,IAAY,MAAM,OAAO,YAAY;AACvE;;AAEF,YAAO,QAAQ,IAAI,WAAW,MAAM,YAAY,GAAG;MACnD;;AAGJ,gBAAa;IACX,MAAM,SAAS,aAAa,MAAM,QAAQ;IAC1C,MAAM,QAAQ,gBAAgB,OAAO;AAErC,QAAI,eAAe,KAAK;AACtB,SAAI,CAAC,MAAO,QAAO,KAAA;KACnB,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,QAA6B,KAAK,QAAQ;AAC5E,UAAI,EAAE,OAAO,QACX,KAAI,OAAO,MAAM;AAEnB,aAAO;QACN,EAAE,CAAC;AACN,YAAO,YAAY,eAAe,KAAK,UAAU,MAAM;;AAEzD,WAAO;;;EAGZ,CAAC"}

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

@@ -0,0 +1,25 @@
+import { ComponentSize } from "@veltra/utils/types";
+
+//#region src/use-config/index.d.ts
+interface State {
+  /** 是否开启动画，机器老可以关闭动画来获得性能 */
+  animation: boolean;
+  /** 组件尺寸大小 */
+  size: ComponentSize;
+  /** 表单 */
+  form: {
+    /** 标签宽度 */labelWidth?: number | number;
+  };
+  paginator: {
+    pageSize: number;
+    pageSizeOptions: number[];
+  };
+}
+declare function setDocumentSize(size: ComponentSize, oldSize?: ComponentSize): void;
+declare function useConfig(): {
+  config: Readonly<State>;
+  setConfig: (conf: Partial<State>) => void;
+};
+//#endregion
+export { setDocumentSize, useConfig };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-config/index.js

@@ -0,0 +1,51 @@
+import { reactive, readonly, watch } from "vue";
+import { isObj } from "@cat-kit/core";
+//#region src/use-config/index.ts
+const state = reactive({
+	animation: true,
+	size: "default",
+	form: { labelWidth: 80 },
+	paginator: {
+		pageSize: 40,
+		pageSizeOptions: [
+			40,
+			100,
+			200,
+			500,
+			1e3
+		]
+	}
+});
+function setDocumentSize(size, oldSize) {
+	if (typeof document === "undefined") return;
+	if (oldSize) document.documentElement.classList.remove(oldSize);
+	document.documentElement.classList.add(size);
+}
+let stopDocumentSizeSync = null;
+function ensureDocumentSizeSync() {
+	if (stopDocumentSizeSync) return;
+	if (typeof document === "undefined") return;
+	stopDocumentSizeSync = watch(() => state.size, (size, oldSize) => setDocumentSize(size, oldSize));
+}
+function deepSet(original, extend) {
+	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;
+	});
+}
+function useConfig() {
+	ensureDocumentSizeSync();
+	return {
+		config: readonly(state),
+		setConfig(conf) {
+			deepSet(state, conf);
+		}
+	};
+}
+//#endregion
+export { setDocumentSize, useConfig };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-config/index.ts"],"sourcesContent":["import { isObj } from '@cat-kit/core'\nimport type { ComponentSize } from '@veltra/utils/types'\nimport { reactive, readonly, watch } from 'vue'\n\ninterface State {\n  /** 是否开启动画，机器老可以关闭动画来获得性能 */\n  animation: boolean\n  /** 组件尺寸大小 */\n  size: ComponentSize\n  /** 表单 */\n  form: {\n    /** 标签宽度 */\n    labelWidth?: number | number\n  }\n  paginator: { pageSize: number; pageSizeOptions: number[] }\n}\n\nconst state = reactive<State>({\n  animation: true,\n  size: 'default',\n  form: { labelWidth: 80 },\n  paginator: { pageSize: 40, pageSizeOptions: [40, 100, 200, 500, 1000] }\n})\n\nexport function setDocumentSize(size: ComponentSize, oldSize?: ComponentSize): void {\n  if (typeof document === 'undefined') return\n  if (oldSize) {\n    document.documentElement.classList.remove(oldSize)\n  }\n  document.documentElement.classList.add(size)\n}\n\nlet stopDocumentSizeSync: (() => void) | null = null\n\nfunction ensureDocumentSizeSync(): void {\n  if (stopDocumentSizeSync) return\n  if (typeof document === 'undefined') return\n\n  stopDocumentSizeSync = watch(\n    () => state.size,\n    (size, oldSize) => setDocumentSize(size, oldSize)\n  )\n}\n\nfunction deepSet(original: Record<string, any>, extend: Record<string, any>) {\n  Object.keys(extend).forEach((key) => {\n    const val = original[key]\n    const targetVal = extend[key]\n    if (isObj(val)) {\n      if (isObj(targetVal)) {\n        deepSet(val, targetVal)\n      } else {\n        console.warn(`extend['${key}']应该是一个对象`)\n      }\n    } else {\n      original[key] = targetVal\n    }\n  })\n}\n\nexport function useConfig(): {\n  config: Readonly<State>\n  setConfig: (conf: Partial<State>) => void\n} {\n  ensureDocumentSizeSync()\n  return {\n    /** 全局配置 */\n    config: readonly(state) as Readonly<State>,\n    /**\n     * 设置全局配置项\n     * @param conf\n     */\n    setConfig(conf: Partial<State>) {\n      deepSet(state, conf)\n    }\n  }\n}\n"],"mappings":";;;AAiBA,MAAM,QAAQ,SAAgB;CAC5B,WAAW;CACX,MAAM;CACN,MAAM,EAAE,YAAY,IAAI;CACxB,WAAW;EAAE,UAAU;EAAI,iBAAiB;GAAC;GAAI;GAAK;GAAK;GAAK;GAAK;EAAE;CACxE,CAAC;AAEF,SAAgB,gBAAgB,MAAqB,SAA+B;AAClF,KAAI,OAAO,aAAa,YAAa;AACrC,KAAI,QACF,UAAS,gBAAgB,UAAU,OAAO,QAAQ;AAEpD,UAAS,gBAAgB,UAAU,IAAI,KAAK;;AAG9C,IAAI,uBAA4C;AAEhD,SAAS,yBAA+B;AACtC,KAAI,qBAAsB;AAC1B,KAAI,OAAO,aAAa,YAAa;AAErC,wBAAuB,YACf,MAAM,OACX,MAAM,YAAY,gBAAgB,MAAM,QAAQ,CAClD;;AAGH,SAAS,QAAQ,UAA+B,QAA6B;AAC3E,QAAO,KAAK,OAAO,CAAC,SAAS,QAAQ;EACnC,MAAM,MAAM,SAAS;EACrB,MAAM,YAAY,OAAO;AACzB,MAAI,MAAM,IAAI,CACZ,KAAI,MAAM,UAAU,CAClB,SAAQ,KAAK,UAAU;MAEvB,SAAQ,KAAK,WAAW,IAAI,WAAW;MAGzC,UAAS,OAAO;GAElB;;AAGJ,SAAgB,YAGd;AACA,yBAAwB;AACxB,QAAO;EAEL,QAAQ,SAAS,MAAM;EAKvB,UAAU,MAAsB;AAC9B,WAAQ,OAAO,KAAK;;EAEvB"}

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

@@ -0,0 +1,47 @@
+import { Ref, ShallowRef } from "vue";
+
+//#region src/use-drag/index.d.ts
+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 拖动选项
+ */
+declare function useDrag(options: DragOptions): {
+  update: (options: {
+    offsetX?: number;
+    offsetY?: number;
+  }) => void;
+};
+//#endregion
+export { useDrag };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-drag/index.js

@@ -0,0 +1,87 @@
+import { onBeforeUnmount, watch } from "vue";
+//#region src/use-drag/index.ts
+/**
+* 拖动组合式方法
+* @param options 拖动选项
+*/
+function useDrag(options) {
+	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 = {
+		x: 0,
+		y: 0,
+		offsetX: 0,
+		offsetY: 0,
+		e: null
+	};
+	const onselectstart = document.onselectstart;
+	const handleMousedown = (e) => {
+		e.stopPropagation();
+		if (e.button !== 0) return;
+		window.getSelection()?.removeAllRanges();
+		e.stopImmediatePropagation();
+		originX = e.x;
+		originY = e.y;
+		onDragStart?.(e);
+		document.onselectstart = () => false;
+		document.addEventListener("mousemove", handleMousemove, { passive: true });
+		document.addEventListener("mouseup", handleMouseup);
+	};
+	const getOffsetXWithRange = (deltaX) => {
+		return Math.max(rangeX[0], Math.min(rangeX[1], offsetX + deltaX));
+	};
+	const getOffsetXWithoutRange = (deltaX) => {
+		return offsetX + deltaX;
+	};
+	const getOffsetYWithRange = (deltaY) => {
+		return Math.max(rangeY[0], Math.min(rangeY[1], offsetY + deltaY));
+	};
+	const getOffsetYWithoutRange = (deltaY) => {
+		return offsetY + deltaY;
+	};
+	const getOffsetX = rangeX ? getOffsetXWithRange : getOffsetXWithoutRange;
+	const getOffsetY = rangeY ? getOffsetYWithRange : getOffsetYWithoutRange;
+	const setDragParam = (e) => {
+		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) => {
+		setDragParam(e);
+		onDrag?.(dragParams);
+	};
+	const handleMouseup = (e) => {
+		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) {
+		if (options.offsetX !== void 0) offsetX = options.offsetX;
+		if (options.offsetY !== void 0) offsetY = options.offsetY;
+	} };
+}
+//#endregion
+export { useDrag };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-drag/index.ts"],"sourcesContent":["import { type Ref, type ShallowRef, watch, onBeforeUnmount } from 'vue'\n\ninterface DragParams {\n  /** 本次拖动水平距离 */\n  x: number\n  /** 本次拖动垂直距离 */\n  y: number\n  /** 拖拽目标水平偏移量 */\n  offsetX: number\n  /** 拖拽目标垂直偏移量 */\n  offsetY: number\n  /** 鼠标事件 */\n  e: MouseEvent\n}\n\ninterface DragOptions {\n  /** 拖动目标 */\n  target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>\n  /** 拖动开始 */\n  onDragStart?(e: MouseEvent): void\n  /** 拖动结束 */\n  onDragEnd?(params: DragParams): void\n  /** 拖动时 */\n  onDrag?(params: DragParams): void\n  /** 水平拖动范围 */\n  rangeX?: [number, number]\n  /** 垂直拖动范围 */\n  rangeY?: [number, number]\n  /** 初始偏移量 */\n  initial?: { offsetX?: number; offsetY?: number }\n}\n\n/**\n * 拖动组合式方法\n * @param options 拖动选项\n */\nexport function useDrag(options: DragOptions): {\n  update: (options: { offsetX?: number; offsetY?: number }) => void\n} {\n  const { target, onDragStart, onDrag, onDragEnd, rangeX, rangeY, initial } = options\n\n  // 鼠标拖拽前的坐标\n  let originX = 0\n  let originY = 0\n\n  let offsetX = initial?.offsetX ?? 0\n  let offsetY = initial?.offsetY ?? 0\n\n  // 拖拽参数\n  const dragParams: DragParams = { x: 0, y: 0, offsetX: 0, offsetY: 0, e: null as any }\n\n  // 先取\n  const onselectstart = document.onselectstart\n\n  const handleMousedown = (e: MouseEvent) => {\n    // 阻止事件冒泡\n    e.stopPropagation()\n    // 鼠标左键按下有效\n    if (e.button !== 0) return\n    // 放置拖拽时选择内容\n    window.getSelection()?.removeAllRanges()\n    // 阻止后续的事件监听器被执行\n    e.stopImmediatePropagation()\n\n    originX = e.x\n    originY = e.y\n\n    onDragStart?.(e)\n\n    // 禁止浏览器的选中事件, 直到mouseup事件触发时还原\n    document.onselectstart = () => false\n    document.addEventListener('mousemove', handleMousemove, { passive: true })\n    document.addEventListener('mouseup', handleMouseup)\n  }\n\n  const getOffsetXWithRange = (deltaX: number) => {\n    return Math.max(rangeX![0], Math.min(rangeX![1], offsetX + deltaX))\n  }\n\n  const getOffsetXWithoutRange = (deltaX: number) => {\n    return offsetX + deltaX\n  }\n\n  const getOffsetYWithRange = (deltaY: number) => {\n    return Math.max(rangeY![0], Math.min(rangeY![1], offsetY + deltaY))\n  }\n\n  const getOffsetYWithoutRange = (deltaY: number) => {\n    return offsetY + deltaY\n  }\n\n  const getOffsetX = rangeX ? getOffsetXWithRange : getOffsetXWithoutRange\n  const getOffsetY = rangeY ? getOffsetYWithRange : getOffsetYWithoutRange\n\n  // 避免重复创建对象影响内存占用\n  const setDragParam = (e: MouseEvent) => {\n    dragParams.x = e.x - originX\n    dragParams.y = e.y - originY\n    dragParams.offsetX = getOffsetX(dragParams.x)\n    dragParams.offsetY = getOffsetY(dragParams.y)\n    dragParams.e = e\n  }\n\n  const handleMousemove = (e: MouseEvent) => {\n    setDragParam(e)\n    onDrag?.(dragParams)\n  }\n\n  const handleMouseup = (e: MouseEvent) => {\n    setDragParam(e)\n    offsetX = dragParams.offsetX\n    offsetY = dragParams.offsetY\n\n    onDragEnd?.(dragParams)\n    document.onselectstart = onselectstart\n\n    cleanup()\n  }\n\n  // 统一的清理函数\n  const cleanup = () => {\n    document.removeEventListener('mousemove', handleMousemove)\n    document.removeEventListener('mouseup', handleMouseup)\n  }\n\n  watch(\n    target,\n    (dom, oldDom) => {\n      oldDom?.removeEventListener('mousedown', handleMousedown)\n      if (!dom) return\n      dom.addEventListener('mousedown', handleMousedown)\n    },\n    { immediate: true }\n  )\n\n  onBeforeUnmount(() => {\n    target.value?.removeEventListener('mousedown', handleMousedown)\n    cleanup()\n  })\n\n  return {\n    update(options: { offsetX?: number; offsetY?: number }) {\n      if (options.offsetX !== undefined) {\n        offsetX = options.offsetX\n      }\n      if (options.offsetY !== undefined) {\n        offsetY = options.offsetY\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AAoCA,SAAgB,QAAQ,SAEtB;CACA,MAAM,EAAE,QAAQ,aAAa,QAAQ,WAAW,QAAQ,QAAQ,YAAY;CAG5E,IAAI,UAAU;CACd,IAAI,UAAU;CAEd,IAAI,UAAU,SAAS,WAAW;CAClC,IAAI,UAAU,SAAS,WAAW;CAGlC,MAAM,aAAyB;EAAE,GAAG;EAAG,GAAG;EAAG,SAAS;EAAG,SAAS;EAAG,GAAG;EAAa;CAGrF,MAAM,gBAAgB,SAAS;CAE/B,MAAM,mBAAmB,MAAkB;AAEzC,IAAE,iBAAiB;AAEnB,MAAI,EAAE,WAAW,EAAG;AAEpB,SAAO,cAAc,EAAE,iBAAiB;AAExC,IAAE,0BAA0B;AAE5B,YAAU,EAAE;AACZ,YAAU,EAAE;AAEZ,gBAAc,EAAE;AAGhB,WAAS,sBAAsB;AAC/B,WAAS,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC;AAC1E,WAAS,iBAAiB,WAAW,cAAc;;CAGrD,MAAM,uBAAuB,WAAmB;AAC9C,SAAO,KAAK,IAAI,OAAQ,IAAI,KAAK,IAAI,OAAQ,IAAI,UAAU,OAAO,CAAC;;CAGrE,MAAM,0BAA0B,WAAmB;AACjD,SAAO,UAAU;;CAGnB,MAAM,uBAAuB,WAAmB;AAC9C,SAAO,KAAK,IAAI,OAAQ,IAAI,KAAK,IAAI,OAAQ,IAAI,UAAU,OAAO,CAAC;;CAGrE,MAAM,0BAA0B,WAAmB;AACjD,SAAO,UAAU;;CAGnB,MAAM,aAAa,SAAS,sBAAsB;CAClD,MAAM,aAAa,SAAS,sBAAsB;CAGlD,MAAM,gBAAgB,MAAkB;AACtC,aAAW,IAAI,EAAE,IAAI;AACrB,aAAW,IAAI,EAAE,IAAI;AACrB,aAAW,UAAU,WAAW,WAAW,EAAE;AAC7C,aAAW,UAAU,WAAW,WAAW,EAAE;AAC7C,aAAW,IAAI;;CAGjB,MAAM,mBAAmB,MAAkB;AACzC,eAAa,EAAE;AACf,WAAS,WAAW;;CAGtB,MAAM,iBAAiB,MAAkB;AACvC,eAAa,EAAE;AACf,YAAU,WAAW;AACrB,YAAU,WAAW;AAErB,cAAY,WAAW;AACvB,WAAS,gBAAgB;AAEzB,WAAS;;CAIX,MAAM,gBAAgB;AACpB,WAAS,oBAAoB,aAAa,gBAAgB;AAC1D,WAAS,oBAAoB,WAAW,cAAc;;AAGxD,OACE,SACC,KAAK,WAAW;AACf,UAAQ,oBAAoB,aAAa,gBAAgB;AACzD,MAAI,CAAC,IAAK;AACV,MAAI,iBAAiB,aAAa,gBAAgB;IAEpD,EAAE,WAAW,MAAM,CACpB;AAED,uBAAsB;AACpB,SAAO,OAAO,oBAAoB,aAAa,gBAAgB;AAC/D,WAAS;GACT;AAEF,QAAO,EACL,OAAO,SAAiD;AACtD,MAAI,QAAQ,YAAY,KAAA,EACtB,WAAU,QAAQ;AAEpB,MAAI,QAAQ,YAAY,KAAA,EACtB,WAAU,QAAQ;IAGvB"}

package/dist/use-fallback-props/index.d.ts

@@ -0,0 +1,31 @@
+import { ComputedRef } from "vue";
+import { ComponentSize } from "@veltra/utils/types";
+
+//#region src/use-fallback-props/index.d.ts
+/**
+ * 使用回滚属性，用于控制多级属性的使用优先级，如果多级属性中不存在该值，则使用全局配置中的属性，如再不存在则为undefined
+ * @param propsList 属性列表，最右边的属性优先级最高
+ * @param fallbackProps 要回滚的属性和默认值
+ */
+declare function useFallbackProps<F extends Record<string, any>, R extends { [key in keyof F]: ComputedRef<F[key]> }>(propsList: Record<string, any>[], fallbackProps: F): R;
+type FormFallbackProps = {
+  size: ComponentSize;
+  disabled: boolean;
+  readonly: boolean;
+};
+/**
+ * 表单组件的回滚属性
+ * @param propsList props列表
+ * @returns
+ */
+declare function useFormFallbackProps(propsList: Record<string, any>[]): { [key in keyof FormFallbackProps]: ComputedRef<FormFallbackProps[key]> };
+/**
+ * 表单组件的回滚属性
+ * @param propsList props列表
+ * @param fallbackProps 回滚属性，可以只指定部分表单属性
+ * @returns
+ */
+declare function useFormFallbackProps<F extends Partial<FormFallbackProps>>(propsList: Record<string, any>[], fallbackProps: F): { [key in keyof F]: key extends keyof FormFallbackProps ? ComputedRef<FormFallbackProps[key]> : never };
+//#endregion
+export { useFallbackProps, useFormFallbackProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-fallback-props/index.js

@@ -0,0 +1,35 @@
+import { useConfig } from "../use-config/index.js";
+import { computed } from "vue";
+//#region src/use-fallback-props/index.ts
+/**
+* 使用回滚属性，用于控制多级属性的使用优先级，如果多级属性中不存在该值，则使用全局配置中的属性，如再不存在则为undefined
+* @param propsList 属性列表，最右边的属性优先级最高
+* @param fallbackProps 要回滚的属性和默认值
+*/
+function useFallbackProps(propsList, fallbackProps) {
+	const { config } = useConfig();
+	let result = {};
+	for (const key in fallbackProps) if (fallbackProps.hasOwnProperty(key)) {
+		const defaultValue = fallbackProps[key];
+		result[key] = computed(() => {
+			for (let i = propsList.length - 1; i > -1; --i) {
+				const props = propsList[i];
+				if (props[key] !== void 0) return props[key];
+			}
+			return config[key] ?? defaultValue;
+		});
+	}
+	return result;
+}
+function useFormFallbackProps(propsList, fallbackProps) {
+	if (!fallbackProps) fallbackProps = {
+		size: "default",
+		disabled: false,
+		readonly: false
+	};
+	return useFallbackProps(propsList, fallbackProps);
+}
+//#endregion
+export { useFallbackProps, useFormFallbackProps };
+
+//# sourceMappingURL=index.js.map

package/dist/use-fallback-props/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-fallback-props/index.ts"],"sourcesContent":["import type { ComponentSize } from '@veltra/utils/types'\nimport { computed, type ComputedRef } from 'vue'\n\nimport { useConfig } from '../use-config'\n\n/**\n * 使用回滚属性，用于控制多级属性的使用优先级，如果多级属性中不存在该值，则使用全局配置中的属性，如再不存在则为undefined\n * @param propsList 属性列表，最右边的属性优先级最高\n * @param fallbackProps 要回滚的属性和默认值\n */\nexport function useFallbackProps<\n  F extends Record<string, any>,\n  R extends {\n    [key in keyof F]: ComputedRef<F[key]>\n  }\n>(propsList: Record<string, any>[], fallbackProps: F): R {\n  const { config } = useConfig()\n\n  let result = {} as R\n\n  for (const key in fallbackProps) {\n    if (fallbackProps.hasOwnProperty(key)) {\n      const defaultValue = fallbackProps[key]\n      const ref = computed<any>(() => {\n        for (let i = propsList.length - 1; i > -1; --i) {\n          const props = propsList[i]!\n\n          if (props[key] !== undefined) {\n            return props[key]\n          }\n        }\n\n        return config[key as string] ?? defaultValue\n      })\n\n      result[key as keyof F] = ref as R[keyof F]\n    }\n  }\n\n  return result\n}\n\ntype FormFallbackProps = { size: ComponentSize; disabled: boolean; readonly: boolean }\n\n/**\n * 表单组件的回滚属性\n * @param propsList props列表\n * @returns\n */\nexport function useFormFallbackProps(propsList: Record<string, any>[]): {\n  [key in keyof FormFallbackProps]: ComputedRef<FormFallbackProps[key]>\n}\n\n/**\n * 表单组件的回滚属性\n * @param propsList props列表\n * @param fallbackProps 回滚属性，可以只指定部分表单属性\n * @returns\n */\nexport function useFormFallbackProps<F extends Partial<FormFallbackProps>>(\n  propsList: Record<string, any>[],\n  fallbackProps: F\n): {\n  [key in keyof F]: key extends keyof FormFallbackProps\n    ? ComputedRef<FormFallbackProps[key]>\n    : never\n}\nexport function useFormFallbackProps(\n  propsList: Record<string, any>[],\n  fallbackProps?: Record<string, any>\n): any {\n  if (!fallbackProps) {\n    fallbackProps = { size: 'default', disabled: false, readonly: false }\n  }\n  return useFallbackProps(propsList, fallbackProps)\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,iBAKd,WAAkC,eAAqB;CACvD,MAAM,EAAE,WAAW,WAAW;CAE9B,IAAI,SAAS,EAAE;AAEf,MAAK,MAAM,OAAO,cAChB,KAAI,cAAc,eAAe,IAAI,EAAE;EACrC,MAAM,eAAe,cAAc;AAanC,SAAO,OAZK,eAAoB;AAC9B,QAAK,IAAI,IAAI,UAAU,SAAS,GAAG,IAAI,IAAI,EAAE,GAAG;IAC9C,MAAM,QAAQ,UAAU;AAExB,QAAI,MAAM,SAAS,KAAA,EACjB,QAAO,MAAM;;AAIjB,UAAO,OAAO,QAAkB;IAChC;;AAMN,QAAO;;AA4BT,SAAgB,qBACd,WACA,eACK;AACL,KAAI,CAAC,cACH,iBAAgB;EAAE,MAAM;EAAW,UAAU;EAAO,UAAU;EAAO;AAEvE,QAAO,iBAAiB,WAAW,cAAc"}

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

@@ -0,0 +1,16 @@
+import { Ref } from "vue";
+
+//#region src/use-focus/index.d.ts
+/**
+ * 聚焦
+ * @param cb 回调
+ * @returns
+ */
+declare function useFocus(cb?: (focused: boolean) => void): {
+  focus: Ref<boolean>;
+  handleBlur: () => void;
+  handleFocus: () => void;
+};
+//#endregion
+export { useFocus };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-focus/index.js

@@ -0,0 +1,27 @@
+import { ref } from "vue";
+//#region src/use-focus/index.ts
+/**
+* 聚焦
+* @param cb 回调
+* @returns
+*/
+function useFocus(cb) {
+	const focus = ref(false);
+	const handleFocus = () => {
+		focus.value = true;
+		cb?.(focus.value);
+	};
+	const handleBlur = () => {
+		focus.value = false;
+		cb?.(focus.value);
+	};
+	return {
+		focus,
+		handleBlur,
+		handleFocus
+	};
+}
+//#endregion
+export { useFocus };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-focus/index.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\n/**\n * 聚焦\n * @param cb 回调\n * @returns\n */\nexport function useFocus(cb?: (focused: boolean) => void): {\n  focus: Ref<boolean>\n  handleBlur: () => void\n  handleFocus: () => void\n} {\n  const focus = ref(false)\n\n  const handleFocus = () => {\n    focus.value = true\n    cb?.(focus.value)\n  }\n\n  const handleBlur = () => {\n    focus.value = false\n    cb?.(focus.value)\n  }\n\n  return { focus, handleBlur, handleFocus }\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,SAAS,IAIvB;CACA,MAAM,QAAQ,IAAI,MAAM;CAExB,MAAM,oBAAoB;AACxB,QAAM,QAAQ;AACd,OAAK,MAAM,MAAM;;CAGnB,MAAM,mBAAmB;AACvB,QAAM,QAAQ;AACd,OAAK,MAAM,MAAM;;AAGnB,QAAO;EAAE;EAAO;EAAY;EAAa"}

package/dist/use-form-component/index.d.ts

@@ -0,0 +1,22 @@
+import { FormContextInjectProps } from "@veltra/utils/types";
+
+//#region src/use-form-component/index.d.ts
+type DIContext = {
+  /** 表单属性 */formProps: FormContextInjectProps;
+};
+/**
+ * 表单组件本身的组合式方法
+ * @param props 表单属性
+ * @returns
+ */
+declare function useFormComponent(props: FormContextInjectProps): void;
+/**
+ * 表单内的组件的组合式方法
+ * @returns 提供一个form的上下文
+ */
+declare function useFormComponent(): {
+  /** 是否在表单中 */inForm: boolean;
+} & Partial<DIContext>;
+//#endregion
+export { useFormComponent };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-form-component/index.js

@@ -0,0 +1,15 @@
+import { inject, provide } from "vue";
+//#region src/use-form-component/index.ts
+const FormComponentDIKey = Symbol("FormComponentDIKey");
+function useFormComponent(props) {
+	if (props) return provide(FormComponentDIKey, { formProps: props });
+	const context = inject(FormComponentDIKey, void 0) || {};
+	return {
+		inForm: !!context,
+		...context
+	};
+}
+//#endregion
+export { useFormComponent };
+
+//# sourceMappingURL=index.js.map

package/dist/use-form-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-form-component/index.ts"],"sourcesContent":["import type { FormContextInjectProps } from '@veltra/utils/types'\nimport { type InjectionKey, inject, provide } from 'vue'\n\ntype DIContext = {\n  /** 表单属性 */\n  formProps: FormContextInjectProps\n}\n\nconst FormComponentDIKey: InjectionKey<DIContext> = Symbol('FormComponentDIKey')\n\n/**\n * 表单组件本身的组合式方法\n * @param props 表单属性\n * @returns\n */\nexport function useFormComponent(props: FormContextInjectProps): void\n/**\n * 表单内的组件的组合式方法\n * @returns 提供一个form的上下文\n */\nexport function useFormComponent(): {\n  /** 是否在表单中 */\n  inForm: boolean\n} & Partial<DIContext>\nexport function useFormComponent(props?: any): any {\n  if (props) {\n    return provide(FormComponentDIKey, { formProps: props })\n  }\n  const context = inject(FormComponentDIKey, undefined) || {}\n  return { inForm: !!context, ...context }\n}\n"],"mappings":";;AAQA,MAAM,qBAA8C,OAAO,qBAAqB;AAgBhF,SAAgB,iBAAiB,OAAkB;AACjD,KAAI,MACF,QAAO,QAAQ,oBAAoB,EAAE,WAAW,OAAO,CAAC;CAE1D,MAAM,UAAU,OAAO,oBAAoB,KAAA,EAAU,IAAI,EAAE;AAC3D,QAAO;EAAE,QAAQ,CAAC,CAAC;EAAS,GAAG;EAAS"}

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

@@ -0,0 +1,28 @@
+//#region src/use-lock/index.d.ts
+type Update = (fn: Function) => any;
+type Lock = (fn: Function) => Promise<void>;
+interface Updater {
+  /**
+   * 更新
+   * @description 在非锁定时执行传入的函数
+   */
+  update: Update;
+  /**
+   * 更新并锁定
+   * @description 执行传入的函数，并锁定更新操作，直到函数执行完成
+   */
+  updateAndLock: Lock;
+}
+/**
+ * 数据更新锁
+ * @description
+ * 更新锁主要用于防止组件数据更新时，循环触发更新。
+ *
+ * @returns 该函数返回两个函数：
+ * 1. update: 更新函数，在非锁定时执行传入的函数
+ * 2. lock: 锁定函数，执行时会锁定更新操作，直到锁定操作结束
+ */
+declare function useUpdateLock(): Updater;
+//#endregion
+export { Updater, useUpdateLock };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-lock/index.js

@@ -0,0 +1,36 @@
+import { nextTick } from "vue";
+//#region src/use-lock/index.ts
+/**
+* 数据更新锁
+* @description
+* 更新锁主要用于防止组件数据更新时，循环触发更新。
+*
+* @returns 该函数返回两个函数：
+* 1. update: 更新函数，在非锁定时执行传入的函数
+* 2. lock: 锁定函数，执行时会锁定更新操作，直到锁定操作结束
+*/
+function useUpdateLock() {
+	let lockedCount = 0;
+	function update(fn) {
+		if (lockedCount > 0) return;
+		return fn();
+	}
+	async function updateAndLock(fn) {
+		lockedCount++;
+		try {
+			await fn();
+		} catch (error) {
+			console.error(error);
+		}
+		await nextTick();
+		lockedCount--;
+	}
+	return {
+		updateAndLock,
+		update
+	};
+}
+//#endregion
+export { useUpdateLock };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-lock/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\n\ntype Update = (fn: Function) => any\ntype Lock = (fn: Function) => Promise<void>\n\nexport interface Updater {\n  /**\n   * 更新\n   * @description 在非锁定时执行传入的函数\n   */\n  update: Update\n  /**\n   * 更新并锁定\n   * @description 执行传入的函数，并锁定更新操作，直到函数执行完成\n   */\n  updateAndLock: Lock\n}\n\n/**\n * 数据更新锁\n * @description\n * 更新锁主要用于防止组件数据更新时，循环触发更新。\n *\n * @returns 该函数返回两个函数：\n * 1. update: 更新函数，在非锁定时执行传入的函数\n * 2. lock: 锁定函数，执行时会锁定更新操作，直到锁定操作结束\n */\nexport function useUpdateLock(): Updater {\n  let lockedCount = 0\n\n  function update(fn: Function) {\n    if (lockedCount > 0) return\n    return fn()\n  }\n\n  async function updateAndLock(fn: Function) {\n    lockedCount++\n\n    try {\n      await fn()\n    } catch (error) {\n      console.error(error)\n    }\n    await nextTick()\n\n    lockedCount--\n  }\n\n  return { updateAndLock, update }\n}\n"],"mappings":";;;;;;;;;;;AA2BA,SAAgB,gBAAyB;CACvC,IAAI,cAAc;CAElB,SAAS,OAAO,IAAc;AAC5B,MAAI,cAAc,EAAG;AACrB,SAAO,IAAI;;CAGb,eAAe,cAAc,IAAc;AACzC;AAEA,MAAI;AACF,SAAM,IAAI;WACH,OAAO;AACd,WAAQ,MAAM,MAAM;;AAEtB,QAAM,UAAU;AAEhB;;AAGF,QAAO;EAAE;EAAe;EAAQ"}

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

@@ -0,0 +1,35 @@
+import { Ref } from "vue";
+
+//#region src/use-model/index.d.ts
+interface ModelOptions<Props extends Record<string, unknown>, Name extends keyof Props> {
+  /** 组件定义的属性 */
+  props: Props;
+  /** 属性名称 */
+  propName?: Name;
+  /** 事件触发函数 */
+  emit: (...args: any[]) => void;
+  /** 是否为本地模式, 默认为true, 本地模式允许组件不受控来触发视图更新 */
+  local?: boolean | (() => boolean);
+  /** 默认值 */
+  defaultValue?: Props[Name];
+  /**
+   * 是否浅层响应
+   * @default false
+   */
+  shallow?: boolean;
+}
+/**
+ * 返回一个基于提供的选项的响应式模型值。
+ * 该方法在将来可能会被替代, 目前使用是为了类型提示可用
+ * 如果 local 选项为true, 模型值将是响应式的，并与属性值同步。
+ * 如果 local 选项为 false，则模型值将是一个代理对象，具有 getter 和 setter。当值发生更改时，它会触发一个更新事件。
+ * @param options - 选项
+ * @returns - 一个模型值
+ */
+declare function useModel<Props extends Record<string, any>, Name extends keyof Props = 'modelValue'>(options: ModelOptions<Props, Name>): Ref<Props[Name] | undefined> | {
+  __v_isRef: boolean;
+  value: Props[Name];
+};
+//#endregion
+export { useModel };
+//# sourceMappingURL=index.d.ts.map