@astrolimit/vue3-web-hooks 25.11.1 → 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
 
@@ -33,7 +32,7 @@ declare const useDivSize: (target?: Ref<HTMLDivElement | undefined> | HTMLDivEle
  * @returns
  */
 declare const useDrawerWidth: (percentage?: number, minWidth?: number) => {
-  drawerWidth: vue0.ComputedRef<number | undefined>;
+  drawerWidth: vue0.ComputedRef<number>;
 };
 //#endregion
 //#region src/hooks/useMitt.d.ts
@@ -41,8 +40,8 @@ type AnyRecord$1 = Record<string, any>;
 type R<T extends AnyRecord$1> = ReturnType<typeof mitt<T>> & {
   stop(key: keyof T): void;
   pause(key: keyof T): void;
-  subscribe<P$1 extends keyof T>(key: P$1, cb: (data: T[P$1]) => void): void;
-  once<P$1 extends keyof T>(key: P$1, cb: (data: T[P$1]) => void): void;
+  subscribe<P extends keyof T>(key: P, cb: (data: T[P]) => void): void;
+  once<P extends keyof T>(key: P, cb: (data: T[P]) => void): void;
 };
 /**
  * 在父祖组件中使用
@@ -78,6 +77,23 @@ declare const useNow: (immediate?: boolean) => {
   meridiem: vue0.Ref<string, string>;
 };
 //#endregion
+//#region src/hooks/usePageSize.d.ts
+/**
+ * @example
+ * const pagita = usePageSize()
+ * @returns
+ */
+declare const usePageSize: () => {
+  total: vue0.WritableComputedRef<number, number>;
+  page: vue0.WritableComputedRef<number, number>;
+  pageNo: vue0.WritableComputedRef<number, number>;
+  limit: vue0.WritableComputedRef<number, number>;
+  pageSize: vue0.WritableComputedRef<number, number>;
+  pending: vue0.WritableComputedRef<boolean, boolean>;
+  loading: vue0.WritableComputedRef<boolean, boolean>;
+  resetPageAndFetch(fn: () => Promise<void>): Promise<void>;
+};
+//#endregion
 //#region src/hooks/useStyleSheetLink.d.ts
 /**
  * 基于vue3组合式api的样式注入（动态创建link标签）
@@ -113,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
@@ -187,4 +203,4 @@ type ExtractComponentProps<C> = C extends (new (...args: any[]) => {
  */
 type IVueProps<T> = Partial<ExtractComponentProps<T>>;
 //#endregion
-export { type ExtractFirstParam, type IVueComponent, type IVueProps, useDivSize, useDrawerWidth, useInjectMitt, useNetwork, useNewMitt, useNow, useSortable, useStyleSheetLink, useViewRefresh, useVueInterval, useWatermark };
+export { type ExtractFirstParam, type IVueComponent, type IVueProps, useDivSize, useDrawerWidth, useInjectMitt, useNetwork, useNewMitt, useNow, usePageSize, useSortable, useStyleSheetLink, useViewRefresh, useVueInterval, useWatermark };

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 } from "lodash-es";
+import { get, isInteger, isNil as isNil$1, toSafeInteger } from "lodash-es";
 import dayjs from "dayjs";
 import Sortable from "sortablejs";
 
@@ -227,6 +227,69 @@ const useNow = (immediate = true) => {
 	};
 };
 
+//#endregion
+//#region src/hooks/usePageSize.ts
+/**
+* @example
+* const pagita = usePageSize()
+* @returns
+*/
+const usePageSize = () => {
+	const _data = reactive({
+		pending: false,
+		total: 0,
+		page: 1,
+		limit: 10
+	});
+	const total = computed({
+		get() {
+			return _data.total;
+		},
+		set(val) {
+			_data.total = toSafeInteger(val);
+		}
+	});
+	const page = computed({
+		get() {
+			return _data.page;
+		},
+		set(val) {
+			_data.page = toSafeInteger(val);
+		}
+	});
+	const limit = computed({
+		get() {
+			return _data.limit;
+		},
+		set(val) {
+			_data.limit = toSafeInteger(val);
+		}
+	});
+	const pending = computed({
+		get() {
+			return _data.pending;
+		},
+		set(val) {
+			_data.pending = val ? true : false;
+		}
+	});
+	return {
+		total,
+		page,
+		pageNo: page,
+		limit,
+		pageSize: limit,
+		pending,
+		loading: pending,
+		async resetPageAndFetch(fn) {
+			_data.pending = true;
+			_data.page = 1;
+			await fn();
+			_data.pending = false;
+		}
+	};
+};
+
 //#endregion
 //#region src/hooks/useStyleSheetLink.ts
 /**
@@ -240,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");
@@ -252,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;
 		}
@@ -286,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
 	};
 };
@@ -468,4 +549,4 @@ function useWatermark(opts) {
 }
 
 //#endregion
-export { useDivSize, useDrawerWidth, useInjectMitt, useNetwork, useNewMitt, useNow, useSortable, useStyleSheetLink, useViewRefresh, useVueInterval, useWatermark };
+export { useDivSize, useDrawerWidth, useInjectMitt, useNetwork, useNewMitt, useNow, usePageSize, useSortable, useStyleSheetLink, useViewRefresh, useVueInterval, useWatermark };

package/package.json

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