@astrolimit/vue3-web-hooks 25.12.14 → 26.1.3

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 import * as vue0 from "vue";
-import { DefineComponent, FunctionalComponent, Ref, VNode } from "vue";
+import { ComputedRef, DefineComponent, FunctionalComponent, Ref, VNode } from "vue";
 import * as _vueuse_core0 from "@vueuse/core";
 import mitt from "mitt";
-import * as _vue_reactivity0 from "@vue/reactivity";
 
 //#region src/hooks/useDivSize.d.ts
 
@@ -130,12 +129,12 @@ declare const useSortable: <T extends AnyRecord>(params: {
   /**
    * 原始数据列表
    */
-  rawDataList: Ref<Array<T>>;
+  rawDataList: Ref<Array<T>> | ComputedRef<Array<T>>;
 }) => {
   initSort: _vueuse_core0.PromisifyFn<() => void>;
   handleSortCancel: () => void;
   handleSortToggle: () => void;
-  tableDataList: Ref<_vue_reactivity0.UnwrapRefSimple<T>[], T[] | _vue_reactivity0.UnwrapRefSimple<T>[]>;
+  sortedResult: ComputedRef<any>;
   isSorting: Ref<boolean, boolean>;
 };
 //#endregion

package/dist/index.js

@@ -1,8 +1,8 @@
-import _, { cloneDeep } from "lodash";
+import _, { isNil } from "lodash";
 import { computed, createElementVNode, defineComponent, inject, isRef, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, toRefs, unref, watch } from "vue";
 import { tryOnMounted, tryOnUnmounted, useDebounceFn, useWindowSize } from "@vueuse/core";
 import mitt from "mitt";
-import { get, isInteger, isNil, toSafeInteger } from "lodash-es";
+import { get, isInteger, isNil as isNil$1, toSafeInteger } from "lodash-es";
 import dayjs from "dayjs";
 import Sortable from "sortablejs";
 
@@ -303,7 +303,7 @@ const useStyleSheetLink = (option) => {
 	const rLinkUrl = ref();
 	const createLink = () => {
 		const eid = `${id}`;
-		if (!isNil(document.getElementById(eid))) return;
+		if (!isNil$1(document.getElementById(eid))) return;
 		const blob = new Blob([`${cssContent}`], { type: "text/css" });
 		const url = URL.createObjectURL(blob);
 		const link = document.createElement("link");
@@ -315,11 +315,11 @@ const useStyleSheetLink = (option) => {
 		rLinkUrl.value = url;
 	};
 	const destroy = () => {
-		if (!isNil(rLinkDom.value)) {
+		if (!isNil$1(rLinkDom.value)) {
 			document.head.removeChild(rLinkDom.value);
 			rLinkDom.value = null;
 		}
-		if (!isNil(rLinkUrl.value)) {
+		if (!isNil$1(rLinkUrl.value)) {
 			URL.revokeObjectURL(rLinkUrl.value);
 			rLinkUrl.value = null;
 		}
@@ -349,45 +349,63 @@ const useStyleSheetLink = (option) => {
 const useSortable = (params) => {
 	const { tableCls, handleCls, rawDataList } = params;
 	/**
-	* 排序结果
+	* 排序内部数组
 	*/
 	const tableDataList = ref([]);
 	/**
+	* 排序结果
+	*/
+	const sortedResult = computed(() => {
+		return JSON.parse(JSON.stringify(tableDataList.value));
+	});
+	/**
 	* 是否正处于排序状态
 	*/
 	const isSorting = ref(false);
 	const initSort = useDebounceFn(() => {
 		const table = document.querySelector(`.${tableCls} .el-table__body-wrapper tbody`);
 		if (!table) return;
-		Sortable.create(table, {
-			group: "shared",
-			animation: 150,
-			draggable: ".el-table__row",
-			handle: `.${handleCls || "drag-icon"}`,
-			onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
-				if (oldDraggableIndex !== newDraggableIndex) tableDataList.value.splice(newDraggableIndex, 0, tableDataList.value.splice(oldDraggableIndex, 1)[0]);
-			}
+		nextTick(() => {
+			Sortable.create(table, {
+				group: "shared",
+				animation: 150,
+				draggable: ".el-table__row",
+				handle: `.${handleCls || "drag-icon"}`,
+				onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
+					if (oldDraggableIndex !== newDraggableIndex) tableDataList.value.splice(newDraggableIndex, 0, tableDataList.value.splice(oldDraggableIndex, 1)[0]);
+				}
+			});
 		});
 	}, 200);
+	/**
+	* 开始排序，完成排序
+	*/
 	const handleSortToggle = () => {
-		if (isSorting.value) handleSortCancel();
+		if (isSorting.value) isSorting.value = false;
 		else {
 			isSorting.value = true;
 			initSort();
 		}
 	};
+	/**
+	* 取消排序（重置内部数组）
+	*/
 	const handleSortCancel = () => {
-		tableDataList.value = cloneDeep(rawDataList.value);
+		tableDataList.value = JSON.parse(JSON.stringify(rawDataList.value));
 		isSorting.value = false;
 	};
-	watch(() => rawDataList.value, () => {
-		tableDataList.value = cloneDeep(rawDataList.value);
+	watch(() => rawDataList.value, (newVal) => {
+		if (!isNil(newVal) && JSON.stringify(newVal) != JSON.stringify(tableDataList.value)) tableDataList.value = JSON.parse(JSON.stringify(newVal));
+	}, {
+		deep: true,
+		immediate: true,
+		flush: "post"
 	});
 	return {
 		initSort,
 		handleSortCancel,
 		handleSortToggle,
-		tableDataList,
+		sortedResult,
 		isSorting
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrolimit/vue3-web-hooks",
-  "version": "25.12.014",
+  "version": "26.01.003",
   "description": "A starter for creating a Vue component library.",
   "type": "module",
   "license": "SFR",