@veltra/compositions 1.3.3 → 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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/compositions",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "files": [
     "dist",
     "src"
@@ -13,7 +13,8 @@
     }
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.8.0"
+    "@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.3",
+    "@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'