@veltra/compositions 1.3.2 → 1.3.4

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { useComponentProps } from "./use-component-props/index.js";
 import { setDocumentSize, useConfig } from "./use-config/index.js";
 import { useDrag } from "./use-drag/index.js";
+import { BaseDragState, DNDPlugin, DNDPluginData, DragState, DragendEvent, DragendEventData, DragstartEvent, DragstartEventData, DropSwapConfig, InsertConfig, InsertEvent, NativeDragEffects, Node, NodeData, NodeDragEventData, NodeEventData, NodePointerEventData, NodeRecord, NodeTargetData, ParentConfig, ParentData, ParentDragEventData, ParentEventData, ParentRecord, ParentTargetData, PointeroverNodeEvent, PointeroverParentEvent, SetupNode, SetupNodeData, ShouldSwapData, SortEvent, SortEventData, SynthDragState, TearDownNode, TearDownNodeData, TransferEvent, TransferEventData, UseDnDOptions, UseDnDResult, VueDragAndDropData, VueElement, VueParentConfig, animations, dragAndDrop, dragValues, dropOrSwap, insert, isBrowser, isDragState, isSynthDragState, parentValues, performSort, performTransfer, remapNodes, setParentValues, tearDown, updateConfig, useDnD, useDragAndDrop } from "./use-dnd/index.js";
 import { useFallbackProps, useFormFallbackProps } from "./use-fallback-props/index.js";
 import { useFocus } from "./use-focus/index.js";
 import { UserAction, UserActionResult, useUserAction } from "./use-user-action/index.js";
@@ -10,4 +11,4 @@ import { RefElement, ResizeObserverReturn, useObserverCallback, useResizeObserve
 import { useReactiveSize } from "./use-reactive-size/index.js";
 import { useTransition } from "./use-transition/index.js";
 import { UseVirtualizerOptions, UseVirtualizerReturned, useVirtualizer } from "./use-virtualizer/index.js";
-export { RefElement, ResizeObserverReturn, UseVirtualizerOptions, UseVirtualizerReturned, UserAction, UserActionResult, setDocumentSize, useComponentProps, useConfig, useDrag, useFallbackProps, useFocus, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUserAction, useVirtualizer };
+export { type BaseDragState, type DNDPlugin, type DNDPluginData, type DragState, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type InsertConfig, type InsertEvent, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEventData, type NodePointerEventData, type NodeRecord, type NodeTargetData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentRecord, type ParentTargetData, type PointeroverNodeEvent, type PointeroverParentEvent, RefElement, ResizeObserverReturn, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type SynthDragState, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, UseDnDOptions, UseDnDResult, UseVirtualizerOptions, UseVirtualizerReturned, UserAction, UserActionResult, type VueDragAndDropData, type VueElement, type VueParentConfig, animations, dragAndDrop, dragValues, dropOrSwap, insert, isBrowser, isDragState, isSynthDragState, parentValues, performSort, performTransfer, remapNodes, setDocumentSize, setParentValues, tearDown, updateConfig, useComponentProps, useConfig, useDnD, useDrag, useDragAndDrop, useFallbackProps, useFocus, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUserAction, useVirtualizer };

package/dist/index.js

@@ -1,6 +1,7 @@
 import { useComponentProps } from "./use-component-props/index.js";
 import { setDocumentSize, useConfig } from "./use-config/index.js";
 import { useDrag } from "./use-drag/index.js";
+import { animations, dragAndDrop, dragValues, dropOrSwap, insert, isBrowser, isDragState, isSynthDragState, parentValues, performSort, performTransfer, remapNodes, setParentValues, tearDown, updateConfig, useDnD, useDragAndDrop } from "./use-dnd/index.js";
 import { useFallbackProps, useFormFallbackProps } from "./use-fallback-props/index.js";
 import { useFocus } from "./use-focus/index.js";
 import { useUserAction } from "./use-user-action/index.js";
@@ -10,4 +11,4 @@ import { useObserverCallback, useResizeObserver } from "./use-resize-observer/in
 import { useReactiveSize } from "./use-reactive-size/index.js";
 import { useTransition } from "./use-transition/index.js";
 import { useVirtualizer } from "./use-virtualizer/index.js";
-export { setDocumentSize, useComponentProps, useConfig, useDrag, useFallbackProps, useFocus, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUserAction, useVirtualizer };
+export { animations, dragAndDrop, dragValues, dropOrSwap, insert, isBrowser, isDragState, isSynthDragState, parentValues, performSort, performTransfer, remapNodes, setDocumentSize, setParentValues, tearDown, updateConfig, useComponentProps, useConfig, useDnD, useDrag, useDragAndDrop, useFallbackProps, useFocus, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUserAction, useVirtualizer };

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

@@ -1,5 +1,4 @@
 import { Component, MaybeRef } from "vue";
-
 //#region src/use-component-props/index.d.ts
 /**
  * 生成一个用于设置组件通用属性的组件

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

@@ -1,5 +1,4 @@
 import { ComponentSize } from "@veltra/utils";
-
 //#region src/use-config/index.d.ts
 interface State {
   /** 是否开启动画，机器老可以关闭动画来获得性能 */
@@ -8,7 +7,8 @@ interface State {
   size: ComponentSize;
   /** 表单 */
   form: {
-    /** 标签宽度 */labelWidth?: number | string;
+    /** 标签宽度 */
+    labelWidth?: number | string;
   };
   paginator: {
     pageSize: number;

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

@@ -0,0 +1,47 @@
+import { Ref } from "vue";
+import { BaseDragState, DNDPlugin, DNDPluginData, DragState, DragendEvent, DragendEventData, DragstartEvent, DragstartEventData, DropSwapConfig, InsertConfig, InsertEvent, NativeDragEffects, Node, NodeData, NodeDragEventData, NodeEventData, NodePointerEventData, NodeRecord, NodeTargetData, ParentConfig, ParentData, ParentDragEventData, ParentEventData, ParentRecord, ParentTargetData, PointeroverNodeEvent, PointeroverParentEvent, SetupNode, SetupNodeData, ShouldSwapData, SortEvent, SortEventData, SynthDragState, TearDownNode, TearDownNodeData, TransferEvent, TransferEventData, animations, dragValues, dropOrSwap, insert, isBrowser, isDragState, isSynthDragState, parentValues, performSort, performTransfer, remapNodes, setParentValues, tearDown as tearDown$1, updateConfig } from "@formkit/drag-and-drop";
+import { VueDragAndDropData, VueElement, VueParentConfig, VueParentConfig as VueParentConfig$1, dragAndDrop as dragAndDrop$1, useDragAndDrop } from "@formkit/drag-and-drop/vue";
+//#region src/use-dnd/index.d.ts
+interface UseDnDOptions<T> extends VueParentConfig<T> {
+  /**
+   * 列表数据。传入 ref 时与外部共享同一个引用，拖拽排序/转移后直接写回；
+   * 传入普通数组或不传时内部创建 ref。
+   */
+  values?: T[] | Ref<T[]>;
+}
+interface UseDnDResult<T> {
+  /** 拖拽容器元素，通过 `ref` 绑定到列表容器元素上 */
+  parentRef: Ref<HTMLElement | undefined>;
+  /** 列表数据，排序/跨容器转移后自动更新 */
+  values: Ref<T[]>;
+  /**
+   * 运行时更新拖拽配置（整体替换，不与初始配置合并）
+   * @param config 新配置
+   */
+  updateConfig: (config?: VueParentConfig<T>) => void;
+}
+/**
+ * 拖拽排序组合式方法，基于 `@formkit/drag-and-drop` 的 Vue 适配层封装。
+ *
+ * 相比官方 `useDragAndDrop` 的元组返回，这里使用 options 对象传参并返回命名结果。
+ * 组件卸载时自动销毁拖拽实例。
+ *
+ * @example
+ * ```ts
+ * const { parentRef, values } = useDnD({
+ *   values: list,
+ *   plugins: [animations()],
+ *   onSort: ({ previousValues, values }) => {}
+ * })
+ * ```
+ *
+ * ```vue
+ * <ul ref="parentRef">
+ *   <li v-for="item in values" :key="item.id">{{ item.label }}</li>
+ * </ul>
+ * ```
+ */
+declare function useDnD<T>(options?: UseDnDOptions<T>): UseDnDResult<T>;
+//#endregion
+export { type BaseDragState, type DNDPlugin, type DNDPluginData, type DragState, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type InsertConfig, type InsertEvent, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEventData, type NodePointerEventData, type NodeRecord, type NodeTargetData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentRecord, type ParentTargetData, type PointeroverNodeEvent, type PointeroverParentEvent, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type SynthDragState, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, UseDnDOptions, UseDnDResult, type VueDragAndDropData, type VueElement, type VueParentConfig$1 as VueParentConfig, animations, dragAndDrop$1 as dragAndDrop, dragValues, dropOrSwap, insert, isBrowser, isDragState, isSynthDragState, parentValues, performSort, performTransfer, remapNodes, setParentValues, tearDown$1 as tearDown, updateConfig, useDnD, useDragAndDrop };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-dnd/index.js

@@ -0,0 +1,50 @@
+import { isRef, onBeforeUnmount, ref } from "vue";
+import { animations, dragValues, dropOrSwap, insert, isBrowser, isDragState, isSynthDragState, parentValues, performSort, performTransfer, remapNodes, setParentValues, tearDown, tearDown as tearDown$1, updateConfig } from "@formkit/drag-and-drop";
+import { dragAndDrop, dragAndDrop as dragAndDrop$1, useDragAndDrop } from "@formkit/drag-and-drop/vue";
+//#region src/use-dnd/index.ts
+/**
+* 拖拽排序组合式方法，基于 `@formkit/drag-and-drop` 的 Vue 适配层封装。
+*
+* 相比官方 `useDragAndDrop` 的元组返回，这里使用 options 对象传参并返回命名结果。
+* 组件卸载时自动销毁拖拽实例。
+*
+* @example
+* ```ts
+* const { parentRef, values } = useDnD({
+*   values: list,
+*   plugins: [animations()],
+*   onSort: ({ previousValues, values }) => {}
+* })
+* ```
+*
+* ```vue
+* <ul ref="parentRef">
+*   <li v-for="item in values" :key="item.id">{{ item.label }}</li>
+* </ul>
+* ```
+*/
+function useDnD(options = {}) {
+	const { values: initialValues, ...config } = options;
+	const parentRef = ref();
+	const values = isRef(initialValues) ? initialValues : ref(initialValues ?? []);
+	function updateConfig(newConfig = {}) {
+		dragAndDrop({
+			parent: parentRef,
+			values,
+			...newConfig
+		});
+	}
+	updateConfig(config);
+	onBeforeUnmount(() => {
+		parentRef.value && tearDown(parentRef.value);
+	});
+	return {
+		parentRef,
+		values,
+		updateConfig
+	};
+}
+//#endregion
+export { animations, dragAndDrop$1 as dragAndDrop, dragValues, dropOrSwap, insert, isBrowser, isDragState, isSynthDragState, parentValues, performSort, performTransfer, remapNodes, setParentValues, tearDown$1 as tearDown, updateConfig, useDnD, useDragAndDrop };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-dnd/index.ts"],"sourcesContent":["import { tearDown } from '@formkit/drag-and-drop'\nimport { dragAndDrop, type VueParentConfig } from '@formkit/drag-and-drop/vue'\nimport { isRef, onBeforeUnmount, ref, type Ref } from 'vue'\n\nexport interface UseDnDOptions<T> extends VueParentConfig<T> {\n  /**\n   * 列表数据。传入 ref 时与外部共享同一个引用，拖拽排序/转移后直接写回；\n   * 传入普通数组或不传时内部创建 ref。\n   */\n  values?: T[] | Ref<T[]>\n}\n\nexport interface UseDnDResult<T> {\n  /** 拖拽容器元素，通过 `ref` 绑定到列表容器元素上 */\n  parentRef: Ref<HTMLElement | undefined>\n  /** 列表数据，排序/跨容器转移后自动更新 */\n  values: Ref<T[]>\n  /**\n   * 运行时更新拖拽配置（整体替换，不与初始配置合并）\n   * @param config 新配置\n   */\n  updateConfig: (config?: VueParentConfig<T>) => void\n}\n\n/**\n * 拖拽排序组合式方法，基于 `@formkit/drag-and-drop` 的 Vue 适配层封装。\n *\n * 相比官方 `useDragAndDrop` 的元组返回，这里使用 options 对象传参并返回命名结果。\n * 组件卸载时自动销毁拖拽实例。\n *\n * @example\n * ```ts\n * const { parentRef, values } = useDnD({\n *   values: list,\n *   plugins: [animations()],\n *   onSort: ({ previousValues, values }) => {}\n * })\n * ```\n *\n * ```vue\n * <ul ref=\"parentRef\">\n *   <li v-for=\"item in values\" :key=\"item.id\">{{ item.label }}</li>\n * </ul>\n * ```\n */\nexport function useDnD<T>(options: UseDnDOptions<T> = {}): UseDnDResult<T> {\n  const { values: initialValues, ...config } = options\n\n  const parentRef = ref<HTMLElement>()\n  const values = isRef(initialValues) ? initialValues : (ref(initialValues ?? []) as Ref<T[]>)\n\n  function updateConfig(newConfig: VueParentConfig<T> = {}) {\n    dragAndDrop({ parent: parentRef, values, ...newConfig })\n  }\n\n  updateConfig(config)\n\n  onBeforeUnmount(() => {\n    parentRef.value && tearDown(parentRef.value)\n  })\n\n  return { parentRef, values, updateConfig }\n}\n\n// 重导出 `@formkit/drag-and-drop`，下游项目统一从 `@veltra/compositions` 获取，\n// 避免本库与下游各自安装导致版本不一致（体积膨胀 / 兼容问题）。\nexport {\n  // Vue 适配层原始 API\n  dragAndDrop,\n  useDragAndDrop,\n  type VueDragAndDropData,\n  type VueElement,\n  type VueParentConfig\n} from '@formkit/drag-and-drop/vue'\n\nexport {\n  // 插件\n  animations,\n  dropOrSwap,\n  insert,\n  // 操作与状态工具\n  performSort,\n  performTransfer,\n  remapNodes,\n  updateConfig,\n  parentValues,\n  setParentValues,\n  dragValues,\n  isDragState,\n  isSynthDragState,\n  isBrowser,\n  tearDown,\n  // 类型\n  type ParentConfig,\n  type ParentData,\n  type ParentRecord,\n  type Node,\n  type NodeData,\n  type NodeRecord,\n  type NodeTargetData,\n  type ParentTargetData,\n  type BaseDragState,\n  type DragState,\n  type SynthDragState,\n  type NativeDragEffects,\n  type DNDPlugin,\n  type DNDPluginData,\n  type NodeEventData,\n  type NodeDragEventData,\n  type NodePointerEventData,\n  type ParentEventData,\n  type ParentDragEventData,\n  type SortEvent,\n  type SortEventData,\n  type TransferEvent,\n  type TransferEventData,\n  type DragstartEvent,\n  type DragstartEventData,\n  type DragendEvent,\n  type DragendEventData,\n  type ShouldSwapData,\n  type DropSwapConfig,\n  type InsertConfig,\n  type InsertEvent,\n  type SetupNode,\n  type SetupNodeData,\n  type TearDownNode,\n  type TearDownNodeData,\n  type PointeroverNodeEvent,\n  type PointeroverParentEvent\n} from '@formkit/drag-and-drop'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,OAAU,UAA4B,CAAC,GAAoB;CACzE,MAAM,EAAE,QAAQ,eAAe,GAAG,WAAW;CAE7C,MAAM,YAAY,IAAiB;CACnC,MAAM,SAAS,MAAM,aAAa,IAAI,gBAAiB,IAAI,iBAAiB,CAAC,CAAC;CAE9E,SAAS,aAAa,YAAgC,CAAC,GAAG;EACxD,YAAY;GAAE,QAAQ;GAAW;GAAQ,GAAG;EAAU,CAAC;CACzD;CAEA,aAAa,MAAM;CAEnB,sBAAsB;EACpB,UAAU,SAAS,SAAS,UAAU,KAAK;CAC7C,CAAC;CAED,OAAO;EAAE;EAAW;EAAQ;CAAa;AAC3C"}

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

@@ -1,5 +1,4 @@
 import { Ref, ShallowRef } from "vue";
-
 //#region src/use-drag/index.d.ts
 interface DragParams {
   /** 本次拖动水平距离 */

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

@@ -1,13 +1,12 @@
 import { ComponentSize } from "@veltra/utils";
 import { ComputedRef } from "vue";
-
 //#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;
+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;
@@ -18,14 +17,14 @@ type FormFallbackProps = {
  * @param propsList props列表
  * @returns
  */
-declare function useFormFallbackProps(propsList: Record<string, any>[]): { [key in keyof FormFallbackProps]: ComputedRef<FormFallbackProps[key]> };
+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 };
+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-focus/index.d.ts

@@ -1,5 +1,4 @@
 import { Ref } from "vue";
-
 //#region src/use-focus/index.d.ts
 /**
  * 聚焦

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

@@ -1,5 +1,4 @@
 import { Ref } from "vue";
-
 //#region src/use-model/index.d.ts
 interface ModelOptions<Props extends Record<string, unknown>, Name extends keyof Props> {
   /** 组件定义的属性 */

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

@@ -1,6 +1,5 @@
 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';

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

@@ -1,5 +1,4 @@
 import { RefElement } from "../use-resize-observer/index.js";
-
 //#region src/use-reactive-size/index.d.ts
 interface ElementSize {
   width: number;

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

@@ -1,5 +1,4 @@
 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 {
@@ -12,7 +11,8 @@ interface ResizeObserverOptions {
 }
 /** 监听器 */
 type ResizeObserverReturn = {
-  /** 终止监听 */disconnect: () => void;
+  /** 终止监听 */
+  disconnect: () => void;
 };
 /**
  * 监听目标尺寸变化

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

@@ -1,5 +1,4 @@
 import { CssTransitionOptions, Returned, StyleTransitionOptions } from "./type.js";
-
 //#region src/use-transition/index.d.ts
 /**
  * 使用CSS类过渡

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

@@ -1,5 +1,4 @@
 import { CSSProperties, Ref, ShallowRef } from "vue";
-
 //#region src/use-transition/type.d.ts
 interface TransitionBase {
   /** 被应用的目标元素 */
@@ -43,5 +42,5 @@ interface Returned {
   leave(): void;
 }
 //#endregion
-export { CssTransitionOptions, Returned, StyleTransitionOptions };
+export { CssTransitionOptions, Returned, StyleTransitionOptions, TransitionBase };
 //# sourceMappingURL=type.d.ts.map

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

@@ -117,7 +117,8 @@ function useCssTransition(options) {
 	});
 	else if (target) addEvent(target);
 	onBeforeUnmount(() => {
-		removeEvent(getDom());
+		const dom = getDom();
+		removeEvent(dom);
 	});
 	return {
 		toggle,

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

@@ -1 +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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"}
+{"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-virtualizer/index.d.ts

@@ -1,6 +1,5 @@
 import { MaybeRefOrGetter, Ref, ShallowRef } from "vue";
 import { VirtualItem, VirtualSnapshot, Virtualizer, VirtualizerOptions } from "@cat-kit/fe";
-
 //#region src/use-virtualizer/index.d.ts
 type MaybeEl = HTMLElement | null | undefined;
 interface UseVirtualizerOptions extends Omit<VirtualizerOptions, 'count'> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/compositions",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "files": [
     "dist",
     "src"
@@ -13,7 +13,8 @@
     }
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6"
+    "@floating-ui/dom": "^1.8.0",
+    "@formkit/drag-and-drop": "^0.6.1"
   },
   "devDependencies": {
     "@cat-kit/fe": "^1.1.8"
@@ -21,7 +22,7 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/fe": ">=1.1.8",
-    "@veltra/utils": "1.3.2",
-    "vue": ">=3.5.39"
+    "@veltra/utils": "1.3.4",
+    "vue": ">=3.5.40"
   }
 }

package/src/index.ts

@@ -4,6 +4,8 @@ export * from './use-config'
 
 export * from './use-drag'
 
+export * from './use-dnd'
+
 export * from './use-fallback-props'
 
 export * from './use-focus'

package/src/use-dnd/index.ts

@@ -0,0 +1,131 @@
+import { tearDown } from '@formkit/drag-and-drop'
+import { dragAndDrop, type VueParentConfig } from '@formkit/drag-and-drop/vue'
+import { isRef, onBeforeUnmount, ref, type Ref } from 'vue'
+
+export interface UseDnDOptions<T> extends VueParentConfig<T> {
+  /**
+   * 列表数据。传入 ref 时与外部共享同一个引用，拖拽排序/转移后直接写回；
+   * 传入普通数组或不传时内部创建 ref。
+   */
+  values?: T[] | Ref<T[]>
+}
+
+export interface UseDnDResult<T> {
+  /** 拖拽容器元素，通过 `ref` 绑定到列表容器元素上 */
+  parentRef: Ref<HTMLElement | undefined>
+  /** 列表数据，排序/跨容器转移后自动更新 */
+  values: Ref<T[]>
+  /**
+   * 运行时更新拖拽配置（整体替换，不与初始配置合并）
+   * @param config 新配置
+   */
+  updateConfig: (config?: VueParentConfig<T>) => void
+}
+
+/**
+ * 拖拽排序组合式方法，基于 `@formkit/drag-and-drop` 的 Vue 适配层封装。
+ *
+ * 相比官方 `useDragAndDrop` 的元组返回，这里使用 options 对象传参并返回命名结果。
+ * 组件卸载时自动销毁拖拽实例。
+ *
+ * @example
+ * ```ts
+ * const { parentRef, values } = useDnD({
+ *   values: list,
+ *   plugins: [animations()],
+ *   onSort: ({ previousValues, values }) => {}
+ * })
+ * ```
+ *
+ * ```vue
+ * <ul ref="parentRef">
+ *   <li v-for="item in values" :key="item.id">{{ item.label }}</li>
+ * </ul>
+ * ```
+ */
+export function useDnD<T>(options: UseDnDOptions<T> = {}): UseDnDResult<T> {
+  const { values: initialValues, ...config } = options
+
+  const parentRef = ref<HTMLElement>()
+  const values = isRef(initialValues) ? initialValues : (ref(initialValues ?? []) as Ref<T[]>)
+
+  function updateConfig(newConfig: VueParentConfig<T> = {}) {
+    dragAndDrop({ parent: parentRef, values, ...newConfig })
+  }
+
+  updateConfig(config)
+
+  onBeforeUnmount(() => {
+    parentRef.value && tearDown(parentRef.value)
+  })
+
+  return { parentRef, values, updateConfig }
+}
+
+// 重导出 `@formkit/drag-and-drop`，下游项目统一从 `@veltra/compositions` 获取，
+// 避免本库与下游各自安装导致版本不一致（体积膨胀 / 兼容问题）。
+export {
+  // Vue 适配层原始 API
+  dragAndDrop,
+  useDragAndDrop,
+  type VueDragAndDropData,
+  type VueElement,
+  type VueParentConfig
+} from '@formkit/drag-and-drop/vue'
+
+export {
+  // 插件
+  animations,
+  dropOrSwap,
+  insert,
+  // 操作与状态工具
+  performSort,
+  performTransfer,
+  remapNodes,
+  updateConfig,
+  parentValues,
+  setParentValues,
+  dragValues,
+  isDragState,
+  isSynthDragState,
+  isBrowser,
+  tearDown,
+  // 类型
+  type ParentConfig,
+  type ParentData,
+  type ParentRecord,
+  type Node,
+  type NodeData,
+  type NodeRecord,
+  type NodeTargetData,
+  type ParentTargetData,
+  type BaseDragState,
+  type DragState,
+  type SynthDragState,
+  type NativeDragEffects,
+  type DNDPlugin,
+  type DNDPluginData,
+  type NodeEventData,
+  type NodeDragEventData,
+  type NodePointerEventData,
+  type ParentEventData,
+  type ParentDragEventData,
+  type SortEvent,
+  type SortEventData,
+  type TransferEvent,
+  type TransferEventData,
+  type DragstartEvent,
+  type DragstartEventData,
+  type DragendEvent,
+  type DragendEventData,
+  type ShouldSwapData,
+  type DropSwapConfig,
+  type InsertConfig,
+  type InsertEvent,
+  type SetupNode,
+  type SetupNodeData,
+  type TearDownNode,
+  type TearDownNodeData,
+  type PointeroverNodeEvent,
+  type PointeroverParentEvent
+} from '@formkit/drag-and-drop'