@antdv-vue/pro-table 0.0.0-stage → 2.0.3

package/dist/utils/useDragSort.d.ts

@@ -0,0 +1,182 @@
+import * as _$vue from "vue";
+import { ComputedRef, FunctionalComponent, Ref } from "vue";
+import { GlobalToken } from "antdv-next";
+import * as _$_v_c_table0 from "@v-c/table";
+import * as _$_vue_shared0 from "@vue/shared";
+import * as _$_v_c_table_dist_interface_js0 from "@v-c/table/dist/interface.js";
+import { TableComponents } from "@v-c/table/dist/interface.js";
+
+//#region src/utils/useDragSort.d.ts
+interface UseDragSortOptions<T = any> {
+  dataSource?: ComputedRef<T[]>;
+  onDragSortEnd?: (beforeIndex?: number | string, afterIndex?: number | string, newDataSource?: T[]) => Promise<void> | void;
+  token: ComputedRef<GlobalToken> | Ref<GlobalToken>;
+  dragSortKey?: Ref<string | undefined>;
+  components?: Ref<TableComponents<T> | undefined>;
+  rowKey: Ref<any>;
+  dragHandle: FunctionalComponent<any>;
+}
+declare function useDragSort(props: UseDragSortOptions): {
+  DndContext: FunctionalComponent<any, {}, any, {}>;
+  components: {
+    ExpandIcon?: FunctionalComponent<_$_v_c_table0.ExpandIconProps<any>, {}, any, {}> | {
+      new (...args: any[]): _$_v_c_table0.ExpandIconProps<any>;
+      __isFragment?: never;
+      __isTeleport?: never;
+      __isSuspense?: never;
+    } | {
+      [x: string]: any;
+      setup?: ((this: void, props: _$_vue_shared0.LooseRequired<_$_v_c_table0.ExpandIconProps<any> & {}>, ctx: {
+        attrs: _$vue.Attrs;
+        slots: Readonly<{
+          [name: string]: _$vue.Slot<any> | undefined;
+        }>;
+        emit: ((event: unknown, ...args: any[]) => void) | ((event: string, ...args: any[]) => void);
+        expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed) => void;
+      }) => any) | undefined;
+      name?: string | undefined;
+      template?: string | object | undefined;
+      render?: Function | undefined;
+      components?: Record<string, _$vue.Component<any, any, any, _$vue.ComputedOptions, _$vue.MethodOptions, {}, any>> | undefined;
+      directives?: Record<string, _$vue.Directive<any, any, string, any>> | undefined;
+      inheritAttrs?: boolean | undefined;
+      emits?: any;
+      slots?: {} | undefined;
+      expose?: string[] | undefined;
+      serverPrefetch?: (() => void | Promise<any>) | undefined;
+      compilerOptions?: {
+        isCustomElement?: ((tag: string) => boolean) | undefined;
+        whitespace?: "preserve" | "condense" | undefined;
+        comments?: boolean | undefined;
+        delimiters?: [string, string] | undefined;
+      } | undefined;
+      call?: ((this: unknown, ...args: unknown[]) => never) | undefined;
+      __isFragment?: never | undefined;
+      __isTeleport?: never | undefined;
+      __isSuspense?: never | undefined;
+      __defaults?: {} | undefined;
+      compatConfig?: {
+        GLOBAL_MOUNT?: boolean | "suppress-warning" | undefined;
+        GLOBAL_MOUNT_CONTAINER?: boolean | "suppress-warning" | undefined;
+        GLOBAL_EXTEND?: boolean | "suppress-warning" | undefined;
+        GLOBAL_PROTOTYPE?: boolean | "suppress-warning" | undefined;
+        GLOBAL_SET?: boolean | "suppress-warning" | undefined;
+        GLOBAL_DELETE?: boolean | "suppress-warning" | undefined;
+        GLOBAL_OBSERVABLE?: boolean | "suppress-warning" | undefined;
+        GLOBAL_PRIVATE_UTIL?: boolean | "suppress-warning" | undefined;
+        CONFIG_SILENT?: boolean | "suppress-warning" | undefined;
+        CONFIG_DEVTOOLS?: boolean | "suppress-warning" | undefined;
+        CONFIG_KEY_CODES?: boolean | "suppress-warning" | undefined;
+        CONFIG_PRODUCTION_TIP?: boolean | "suppress-warning" | undefined;
+        CONFIG_IGNORED_ELEMENTS?: boolean | "suppress-warning" | undefined;
+        CONFIG_WHITESPACE?: boolean | "suppress-warning" | undefined;
+        CONFIG_OPTION_MERGE_STRATS?: boolean | "suppress-warning" | undefined;
+        INSTANCE_SET?: boolean | "suppress-warning" | undefined;
+        INSTANCE_DELETE?: boolean | "suppress-warning" | undefined;
+        INSTANCE_DESTROY?: boolean | "suppress-warning" | undefined;
+        INSTANCE_EVENT_EMITTER?: boolean | "suppress-warning" | undefined;
+        INSTANCE_EVENT_HOOKS?: boolean | "suppress-warning" | undefined;
+        INSTANCE_CHILDREN?: boolean | "suppress-warning" | undefined;
+        INSTANCE_LISTENERS?: boolean | "suppress-warning" | undefined;
+        INSTANCE_SCOPED_SLOTS?: boolean | "suppress-warning" | undefined;
+        INSTANCE_ATTRS_CLASS_STYLE?: boolean | "suppress-warning" | undefined;
+        OPTIONS_DATA_FN?: boolean | "suppress-warning" | undefined;
+        OPTIONS_DATA_MERGE?: boolean | "suppress-warning" | undefined;
+        OPTIONS_BEFORE_DESTROY?: boolean | "suppress-warning" | undefined;
+        OPTIONS_DESTROYED?: boolean | "suppress-warning" | undefined;
+        WATCH_ARRAY?: boolean | "suppress-warning" | undefined;
+        PROPS_DEFAULT_THIS?: boolean | "suppress-warning" | undefined;
+        V_ON_KEYCODE_MODIFIER?: boolean | "suppress-warning" | undefined;
+        CUSTOM_DIR?: boolean | "suppress-warning" | undefined;
+        ATTR_FALSE_VALUE?: boolean | "suppress-warning" | undefined;
+        ATTR_ENUMERATED_COERCION?: boolean | "suppress-warning" | undefined;
+        TRANSITION_CLASSES?: boolean | "suppress-warning" | undefined;
+        TRANSITION_GROUP_ROOT?: boolean | "suppress-warning" | undefined;
+        COMPONENT_ASYNC?: boolean | "suppress-warning" | undefined;
+        COMPONENT_FUNCTIONAL?: boolean | "suppress-warning" | undefined;
+        COMPONENT_V_MODEL?: boolean | "suppress-warning" | undefined;
+        RENDER_FUNCTION?: boolean | "suppress-warning" | undefined;
+        FILTERS?: boolean | "suppress-warning" | undefined;
+        PRIVATE_APIS?: boolean | "suppress-warning" | undefined;
+        MODE?: 2 | 3 | ((comp: _$vue.Component | null) => 2 | 3) | undefined;
+      } | undefined;
+      data?: ((this: _$vue.CreateComponentPublicInstanceWithMixins<_$_v_c_table0.ExpandIconProps<any>, {}, {}, {}, _$vue.MethodOptions, any, any, {}, _$_v_c_table0.ExpandIconProps<any>, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: _$vue.ComputedOptions;
+        M: _$vue.MethodOptions;
+        Defaults: {};
+      } & {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+      }, {} & _$_v_c_table0.ExpandIconProps<any>, {}, {}, _$vue.ComputedOptions, _$vue.MethodOptions, {}>, vm: _$vue.CreateComponentPublicInstanceWithMixins<_$_v_c_table0.ExpandIconProps<any>, {}, {}, {}, _$vue.MethodOptions, any, any, {}, _$_v_c_table0.ExpandIconProps<any>, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: _$vue.ComputedOptions;
+        M: _$vue.MethodOptions;
+        Defaults: {};
+      } & {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+      }, {} & _$_v_c_table0.ExpandIconProps<any>, {}, {}, _$vue.ComputedOptions, _$vue.MethodOptions, {}>) => any) | undefined;
+      computed?: _$vue.ComputedOptions | undefined;
+      methods?: _$vue.MethodOptions | undefined;
+      watch?: {
+        [x: string]: (string | _$vue.WatchCallback | ({
+          handler: _$vue.WatchCallback | string;
+        } & _$vue.WatchOptions<boolean>)) | (string | _$vue.WatchCallback | ({
+          handler: _$vue.WatchCallback | string;
+        } & _$vue.WatchOptions<boolean>))[];
+      } | undefined;
+      provide?: _$vue.ComponentProvideOptions | undefined;
+      inject?: {} | string[] | undefined;
+      filters?: Record<string, Function> | undefined;
+      mixins?: any[] | undefined;
+      extends?: any;
+      beforeCreate?: (() => any) | undefined;
+      created?: (() => any) | undefined;
+      beforeMount?: (() => any) | undefined;
+      mounted?: (() => any) | undefined;
+      beforeUpdate?: (() => any) | undefined;
+      updated?: (() => any) | undefined;
+      activated?: (() => any) | undefined;
+      deactivated?: (() => any) | undefined;
+      beforeDestroy?: (() => any) | undefined;
+      beforeUnmount?: (() => any) | undefined;
+      destroyed?: (() => any) | undefined;
+      unmounted?: (() => any) | undefined;
+      renderTracked?: ((e: _$vue.DebuggerEvent) => void) | undefined;
+      renderTriggered?: ((e: _$vue.DebuggerEvent) => void) | undefined;
+      errorCaptured?: ((err: unknown, instance: _$vue.ComponentPublicInstance | null, info: string) => boolean | void) | undefined;
+      delimiters?: [string, string] | undefined;
+      __differentiator?: string | number | symbol | undefined;
+      __isBuiltIn?: boolean | undefined;
+      __file?: string | undefined;
+      __name?: string | undefined;
+    } | undefined;
+    table?: _$_v_c_table_dist_interface_js0.CustomizeComponent;
+    header?: {
+      table?: _$_v_c_table_dist_interface_js0.CustomizeComponent;
+      wrapper?: _$_v_c_table_dist_interface_js0.CustomizeComponent;
+      row?: _$_v_c_table_dist_interface_js0.CustomizeComponent;
+      cell?: _$_v_c_table_dist_interface_js0.CustomizeComponent;
+    } | undefined;
+    body?: _$_v_c_table_dist_interface_js0.CustomizeScrollBody<any> | {
+      wrapper?: _$_v_c_table_dist_interface_js0.CustomizeComponent;
+      row?: _$_v_c_table_dist_interface_js0.CustomizeComponent;
+      cell?: _$_v_c_table_dist_interface_js0.CustomizeComponent;
+    } | undefined;
+  };
+};
+//#endregion
+export { UseDragSortOptions, useDragSort };

package/dist/utils/useDragSort.js

@@ -0,0 +1,162 @@
+import { cloneVNode, computed, createVNode, defineComponent, inject, isVNode, markRaw, mergeProps, provide, reactive, ref, shallowRef } from "vue";
+import { childrenToArray, isSpecialNode, useEffect } from "@antdv-vue/pro-utils";
+import { FastColor } from "@ant-design/fast-color";
+import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
+import { PointerSensor } from "@dnd-kit/dom";
+import { arrayMove } from "@dnd-kit/helpers";
+import { DragDropProvider } from "@dnd-kit/vue";
+import { isSortable, isSortableOperation, useSortable } from "@dnd-kit/vue/sortable";
+//#region src/utils/useDragSort.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const sortableItemValueContextKey = Symbol("sortableItemValueContext");
+const SortableItemContextValue = { Provider: /* @__PURE__ */ defineComponent({
+	name: "Provider",
+	inheritAttrs: false,
+	props: { value: {
+		type: Object,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		provide(sortableItemValueContextKey, { handle: props.value?.handle });
+		return () => slots.default?.();
+	}
+}) };
+/**
+* 拖拽排序表格的行，
+* 如果有 DragHandle 回给 dragSortKey 所在的行注入 provide 和 handle
+* 如果没有整个行都支持拖拽
+* @param props
+*/
+function SortableRow(props, { slots }) {
+	const { dragHandle: DragHandle, sortable, token, dragSortKey, handleRef, ...rest } = props;
+	if (dragSortKey) {
+		const doms = [];
+		childrenToArray(slots.default?.()).forEach((child, index) => {
+			if (isVNode(child) && !isSpecialNode(child)) {
+				if (child.props?.column?.key === dragSortKey) {
+					let _slot;
+					doms.push(createVNode(SortableItemContextValue.Provider, {
+						"key": child.key || index,
+						"value": { handle: createVNode(DragHandle, {
+							"ref": handleRef,
+							"rowData": child?.props?.record,
+							"index": child?.props?.index
+						}, null) }
+					}, _isSlot(_slot = cloneVNode(child, {
+						...child.props,
+						sortable,
+						token
+					})) ? _slot : { default: () => [_slot] }));
+					return;
+				}
+			}
+			doms.push(cloneVNode(child, {
+				...child.props,
+				sortable,
+				token
+			}));
+		});
+		return createVNode("tr", rest, [doms]);
+	}
+	return createVNode("tr", rest, [slots.default?.()]);
+}
+function SortContainer(props, { slots }) {
+	const { ref: $ref, ...rest } = props;
+	return createVNode("tbody", mergeProps(rest, { "ref": $ref }), [slots.default?.()]);
+}
+/**
+* 拖拽排序表格的 cell，用与判断要不要展示 handle
+*/
+function SortableItemCell(props, { slots }) {
+	const { dragSortKey, sortable, token, ...rest } = props;
+	const bg = new FastColor(token.colorFillAlter).onBackground(token.colorBgContainer).toHexString();
+	const { handle } = inject(sortableItemValueContextKey, { handle: null });
+	if (handle) return createVNode("td", mergeProps(rest, { "style": {
+		...rest.style,
+		background: sortable?.isDragging?.value ? bg : void 0
+	} }), [createVNode("div", { "style": {
+		display: "flex",
+		alignItems: "center"
+	} }, [handle, slots.default?.()])]);
+	return createVNode("td", mergeProps(rest, { "style": {
+		...rest.style,
+		background: sortable?.isDragging?.value ? bg : void 0
+	} }), [slots.default?.()]);
+}
+function useDragSort(props) {
+	const components = reactive(props.components?.value || {});
+	const element = ref(null);
+	const DraggableContainer = (p, ctx) => SortContainer({
+		...p,
+		ref: element
+	}, ctx);
+	const DraggableBodyRow = /* @__PURE__ */ defineComponent((_, { attrs, slots }) => {
+		const itemRef = shallowRef(null);
+		const handleRef = shallowRef(null);
+		const rowId = computed(() => attrs["data-row-key"]);
+		const sortable = useSortable({
+			id: rowId,
+			index: computed(() => {
+				const dataSource = props.dataSource?.value || [];
+				const rowKey = props.rowKey.value ?? "index";
+				return dataSource.findIndex((item, itemIndex) => {
+					const itemKey = typeof rowKey === "function" ? rowKey(item, itemIndex) : item?.[rowKey];
+					return itemKey === rowId.value || String(itemKey) === String(rowId.value);
+				});
+			}),
+			type: "row",
+			accept: "row",
+			element: itemRef,
+			handle: handleRef
+		});
+		return () => SortableRow({
+			...attrs,
+			id: rowId.value,
+			dragSortKey: props.dragSortKey?.value,
+			dragHandle: props.dragHandle,
+			ref: itemRef,
+			token: props.token.value,
+			handleRef,
+			sortable
+		}, { slots });
+	}, {
+		name: "DraggableBodyRow",
+		inheritAttrs: false
+	});
+	useEffect(() => {
+		if (props.dragSortKey?.value) components.body = {
+			...props.components?.value?.body || {},
+			wrapper: (props.components?.value?.body || {}).wrapper || DraggableContainer,
+			row: (props.components?.value?.body || {}).row || markRaw(DraggableBodyRow),
+			cell: (props.components?.value?.body || {}).cell || SortableItemCell
+		};
+	}, [props.dragSortKey]);
+	const handleDragEnd = (event) => {
+		if (event.canceled) return;
+		if (isSortableOperation(event.operation)) {
+			const { source } = event.operation;
+			if (isSortable(source)) {
+				const { initialIndex, index } = source;
+				if (initialIndex !== index) {
+					const newData = arrayMove(props.dataSource?.value || [], initialIndex, index);
+					props.onDragSortEnd?.(initialIndex, index, newData || []);
+				}
+			}
+		}
+	};
+	const DndContext = (_, { slots }) => {
+		return createVNode(DragDropProvider, {
+			onDragEnd: handleDragEnd,
+			sensors: [PointerSensor],
+			modifiers: [RestrictToVerticalAxis]
+		}, slots);
+	};
+	return {
+		DndContext,
+		components
+	};
+}
+//#endregion
+export { useDragSort };

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@antdv-vue/pro-table",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "type": "module",
+  "version": "2.0.3",
+  "description": "@antdv-vue/pro-table",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bunnyblueair/pro-components.git",
+    "directory": "packages/table"
+  },
+  "sideEffects": [
+    "./dist/pro-table.esm.js"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    },
+    "./dist/pro-table.esm.js": "./dist/pro-table.esm.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "run-s build:esm build:full-esm",
+    "build:esm": "tsdown --config-loader unrun",
+    "build:full-esm": "vite build"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "Firefox ESR",
+    "> 1%",
+    "ie >= 11"
+  ],
+  "peerDependencies": {
+    "antdv-next": ">=1.8.0",
+    "vue": ">=3.5.30"
+  },
+  "dependencies": {
+    "@antdv-vue/pro-card": "3.0.2",
+    "@antdv-vue/pro-field": "2.0.2",
+    "@antdv-vue/pro-form": "2.1.1",
+    "@antdv-vue/pro-provider": "2.0.0",
+    "@antdv-vue/pro-utils": "2.1.1",
+    "@dnd-kit/abstract": "^0.4.0",
+    "@dnd-kit/collision": "^0.4.0",
+    "@dnd-kit/dom": "^0.4.0",
+    "@dnd-kit/helpers": "^0.4.0",
+    "@dnd-kit/vue": "^0.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "lucasjeke <lucasjekeqd@gmail.com> (https://github.com/lucasjeke)"
+  ]
 }