import { MaybeRefOrGetter, 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 extends VueParentConfig { /** * 列表数据。排序/跨容器转移后自动写回: * - `Ref`:直接替换 `.value` * - 响应式数组(如 props 上的数组):原地 splice 写回 * - 非响应式纯数组:作为初始值由内部响应式副本持有,写回时顺带同步原数组 * - getter / 只读 computed:只读数据源,通过 `onReorder` 接收写回结果 * - 不传:内部创建数据源,通过返回的 `values` 读写 */ values?: MaybeRefOrGetter; /** * 数据过滤:仅命中的项参与拖拽排序(须与 DOM 中实际渲染的可拖拽项一一对应)。 * 排序/转移结果自动合并回原数组,未命中的项保持相对顺序。 */ filter?: (item: T) => boolean; /** * 容器元素。支持 ref / getter(如 `() => btnRef.value?.parentElement`), * 元素出现、替换、移除时自动初始化 / 重建 / 销毁拖拽实例。 * 不传时通过返回的 `parentRef` 以模板引用绑定。 */ parent?: MaybeRefOrGetter; /** * `values` 为只读数据源(getter / 只读 computed)时, * 排序/转移结果通过该回调写回,收到的是合并后的完整数组 */ onReorder?: (values: T[]) => void; } interface UseDnDResult { /** 拖拽容器元素;未传 `parent` 选项时通过模板引用绑定到列表容器上 */ parentRef: Ref; /** 拖拽数据。`filter` 模式下为参与拖拽的视图;排序/转移后自动更新 */ values: Ref; /** * 运行时更新拖拽配置(整体替换,不含 `values` / `filter` / `parent` / `onReorder`) * @param config 新配置 */ updateConfig: (config?: VueParentConfig) => void; } /** * 拖拽排序组合式方法,基于 `@formkit/drag-and-drop` 的 Vue 适配层封装。 * * 排序/跨容器转移结果自动写回数据,无需手动处理 `onSort`; * `filter` 支持只对数据的可见子集排序并自动合并回原数组; * `parent` 支持动态容器(元素替换/重建时自动重新初始化)。 * 组件卸载时自动销毁拖拽实例。 * * @example 基础用法:列表即数据,排序自动写回 * ```ts * const { parentRef, values } = useDnD({ values: list, plugins: [animations()] }) * ``` * * ```vue *
    *
  • {{ item.label }}
  • *
* ``` * * @example 可见子集排序 + 动态容器 * ```ts * useDnD({ * values: props.items, // 完整数据(含隐藏项),原地写回 * filter: (item) => item.visible, // 仅可见项参与拖拽,排序自动合并回原数组 * parent: () => addBtnRef.value?.parentElement ?? undefined, // 容器动态获取 * dragHandle: '.u-form-item__label', * draggable: (el) => el.classList.contains('setting-trigger'), // 排除“新增”按钮 * plugins: [animations()] * }) * ``` */ declare function useDnD(options?: UseDnDOptions): UseDnDResult; //#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