sard 1.0.0 → 1.0.2

package/use/useSingleTask.js

@@ -0,0 +1,36 @@
+import { readonly, ref } from "vue";
+//#region packages/sard/use/useSingleTask.ts
+function useSingleTask() {
+	const isWorking = ref(false);
+	let listeners = [];
+	async function startTask(task) {
+		if (!isWorking.value) {
+			isWorking.value = true;
+			await task();
+			isWorking.value = false;
+			listeners.forEach((handler) => {
+				handler();
+			});
+			listeners = [];
+		}
+	}
+	function onFinishTask(handler) {
+		if (isWorking.value) {
+			if (!listeners.includes(handler)) listeners.push(handler);
+		} else handler();
+	}
+	function offFinishTask(handler) {
+		if (isWorking.value) {
+			const index = listeners.indexOf(handler);
+			if (index !== -1) listeners.splice(index, 1);
+		}
+	}
+	return {
+		isWorking: readonly(isWorking),
+		startTask,
+		onFinishTask,
+		offFinishTask
+	};
+}
+//#endregion
+export { useSingleTask };

package/use/useSlotMachine.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from 'vue';
+import { type UseLuckyDrawOptions } from './useLuckyDraw';
+export interface UseSlotMachineOptions extends Omit<UseLuckyDrawOptions, 'count' | 'complete'> {
+    columns: number[] | unknown[][] | Ref<number[] | unknown[][]>;
+    staggerDelay?: number | Ref<number>;
+    complete?: (index: number[]) => void;
+}
+export declare function useSlotMachine(options: UseSlotMachineOptions): {
+    play: () => void;
+    stop: (index?: number[]) => void;
+    pause: () => void;
+    reset: () => void;
+    playing: import("vue").ComputedRef<boolean>;
+    offset: import("vue").ComputedRef<number[]>;
+};
+export type UseSlotMachineReturn = ReturnType<typeof useSlotMachine>;

package/use/useSlotMachine.js

@@ -0,0 +1,86 @@
+import { useLuckyDraw } from "./useLuckyDraw.js";
+import { computed, effectScope, isRef, onScopeDispose, shallowRef, unref, watch } from "vue";
+//#region packages/sard/use/useSlotMachine.ts
+const defaultOptions = {
+	columns: [],
+	minSpeed: .01,
+	maxSpeed: .3,
+	staggerDelay: 600,
+	endDelay: 300
+};
+function useSlotMachine(options) {
+	const { columns, staggerDelay, complete, ...restOptions } = Object.assign({}, defaultOptions, options);
+	let count = 0;
+	let indexes = [];
+	let scopes = [];
+	const controls = shallowRef([]);
+	watch(isRef(columns) ? columns : () => columns, () => {
+		scopes.forEach((scope) => scope.stop());
+		const controlList = [];
+		scopes = unref(columns).map((column, index) => {
+			const scope = effectScope();
+			scope.run(() => {
+				controlList[index] = useLuckyDraw({
+					...restOptions,
+					count: Array.isArray(column) ? column.length : column,
+					startDelay: index * unref(staggerDelay),
+					complete: (i) => {
+						indexes[index] = i;
+						if (++count >= unref(columns).length) {
+							complete?.([...indexes]);
+							count = 0;
+							indexes = [];
+						}
+					}
+				});
+			});
+			return scope;
+		});
+		controls.value = controlList;
+	}, { immediate: true });
+	onScopeDispose(() => {
+		scopes.forEach((scope) => scope.stop());
+	});
+	const play = () => {
+		controls.value.forEach((control) => {
+			control.play();
+		});
+	};
+	const stop = (index = []) => {
+		controls.value.forEach((control, i) => {
+			control.stop(index[i]);
+		});
+	};
+	const pause = () => {
+		count = 0;
+		indexes = [];
+		controls.value.forEach((control) => {
+			control.pause();
+		});
+	};
+	const reset = () => {
+		count = 0;
+		indexes = [];
+		controls.value.forEach((control) => {
+			control.reset();
+		});
+	};
+	return {
+		play,
+		stop,
+		pause,
+		reset,
+		playing: computed(() => {
+			return controls.value.some((control) => control.playing.value);
+		}),
+		offset: computed(() => {
+			return controls.value.map((control, index) => {
+				const column = unref(columns)[index];
+				const count = Array.isArray(column) ? column.length : column;
+				return control.activeIndex.value !== void 0 ? control.activeIndex.value % count * 100 : 0;
+			});
+		})
+	};
+}
+//#endregion
+export { useSlotMachine };

package/use/useStopMovedClick.d.ts

@@ -0,0 +1,6 @@
+export declare function useStopMovedClick(): {
+    onPointerDown: () => void;
+    onPointerMove: () => void;
+    onPointerUp: () => void;
+    isStoppedClick: import("vue").Ref<boolean, boolean>;
+};

package/use/useStopMovedClick.js

@@ -0,0 +1,27 @@
+import { ref } from "vue";
+//#region packages/sard/use/useStopMovedClick.ts
+function useStopMovedClick() {
+	let isDown = false;
+	let moved = false;
+	const isStoppedClick = ref(false);
+	const onPointerDown = () => {
+		isDown = true;
+		moved = false;
+		isStoppedClick.value = false;
+	};
+	const onPointerMove = () => {
+		moved = true;
+	};
+	const onPointerUp = () => {
+		if (isDown && moved) isStoppedClick.value = true;
+		isDown = false;
+	};
+	return {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		isStoppedClick
+	};
+}
+//#endregion
+export { useStopMovedClick };

package/use/useTimeout.d.ts

@@ -0,0 +1,5 @@
+export declare function useTimeout(): {
+    isPending: boolean;
+    set: (callback: () => void, delay: number) => void;
+    clear: () => void;
+};

package/use/useTimeout.js

@@ -0,0 +1,32 @@
+import { onUnmounted, reactive, ref } from "vue";
+//#region packages/sard/use/useTimeout.ts
+function useTimeout() {
+	const isPending = ref(false);
+	let timer = null;
+	const clear = () => {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+		isPending.value = false;
+	};
+	const set = (callback, delay) => {
+		clear();
+		isPending.value = true;
+		timer = setTimeout(() => {
+			timer = null;
+			isPending.value = false;
+			callback();
+		}, delay);
+	};
+	onUnmounted(() => {
+		clear();
+	});
+	return reactive({
+		isPending,
+		set,
+		clear
+	});
+}
+//#endregion
+export { useTimeout };

package/use/useTimeoutLoading.d.ts

@@ -0,0 +1,6 @@
+import { type Ref } from 'vue';
+export interface UseTimeoutLoadingOptions {
+    leading?: number;
+    trailing?: number;
+}
+export declare function useTimeoutLoading(loading: Ref<boolean>, options?: UseTimeoutLoadingOptions): import("vue").ComputedRef<boolean>;

package/use/useTimeoutLoading.js

@@ -0,0 +1,48 @@
+import { useTimeout } from "./useTimeout.js";
+import { computed, ref, watch } from "vue";
+//#region packages/sard/use/useTimeoutLoading.ts
+function useTimeoutLoading(loading, options = {}) {
+	const { leading = 150, trailing = 2e4 } = options;
+	const status = ref("idle");
+	let startTime = 0;
+	const trailingTimer = useTimeout();
+	const leadingTimer = useTimeout();
+	watch(loading, () => {
+		leadingTimer.clear();
+		trailingTimer.clear();
+		if (loading.value) switch (status.value) {
+			case "idle":
+				status.value = "leading";
+				leadingTimer.set(() => {
+					status.value = "loading";
+					startTime = Date.now();
+				}, leading);
+				break;
+			case "trailing":
+				status.value = "loading";
+				startTime = Date.now();
+				break;
+		}
+		else switch (status.value) {
+			case "leading":
+				status.value = "idle";
+				break;
+			case "loading": {
+				const duration = Date.now() - startTime;
+				if (duration >= trailing) status.value = "idle";
+				else {
+					status.value = "trailing";
+					trailingTimer.set(() => {
+						status.value = "idle";
+					}, trailing - duration);
+				}
+				break;
+			}
+		}
+	});
+	return computed(() => {
+		return status.value === "loading" || status.value === "trailing";
+	});
+}
+//#endregion
+export { useTimeoutLoading };

package/use/useWindowResize.d.ts

@@ -0,0 +1 @@
+export declare function useWindowResize(callback: () => void): void;

package/use/useWindowResize.js

@@ -0,0 +1,15 @@
+import { onBeforeUnmount, onMounted } from "vue";
+//#region packages/sard/use/useWindowResize.ts
+function useWindowResize(callback) {
+	const handleResize = () => {
+		callback();
+	};
+	onMounted(() => {
+		window.addEventListener("resize", handleResize);
+	});
+	onBeforeUnmount(() => {
+		window.removeEventListener("resize", handleResize);
+	});
+}
+//#endregion
+export { useWindowResize };

package/use/useZIndex.d.ts

@@ -0,0 +1 @@
+export declare function useZIndex(): readonly [import("vue").Ref<number, number>, () => void];

package/use/useZIndex.js

@@ -0,0 +1,13 @@
+import { ref } from "vue";
+//#region packages/sard/use/useZIndex.ts
+let currentZIndex = 0;
+function useZIndex() {
+	if (currentZIndex === 0) currentZIndex = 1e3;
+	const zIndex = ref(currentZIndex);
+	function increase() {
+		zIndex.value = currentZIndex = currentZIndex + 1;
+	}
+	return [zIndex, increase];
+}
+//#endregion
+export { useZIndex };

package/utils/array.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @description: 确保目标是一个数组
+ * @param {any} target
+ * @return {array}
+ */
+export declare function toArray<T>(target: T | T[]): T[];
+/**
+ * @description: 扩散性遍历
+ * @param {any[]} array 要遍历的数组
+ * @param {(el: any, spreadIndex: number, index: number) => any} callback 回调函数，接收当前元素、扩散性下标、迭代下标作为参数，
+ *  如果返回true，则中止遍历
+ * @param {number} currIndex 遍历开始的下标
+ * @param {number} direction 开始遍历的方向
+ * @return {number} 扩散性下标、或开始下标
+ */
+export declare function spreadEach(array: any[], callback: (el: any, spreadIndex: number, index: number) => any, startIndex?: number, direction?: number): number;
+/**
+ * 判断两数组是否相等，浅比较，元素个数和位置都要相等才为真。
+ */
+export declare function arrayEqual(arr1: any[], arr2: any[]): boolean;
+/**
+ * 打乱并返回数组，会修改原数组。
+ */
+export declare function shuffle<T>(array: T[]): T[];
+/**
+ * 移动数组中的元素，会返回移动后的新数组。
+ */
+export declare function arrayMove<T>(array: T[], fromIndex: number, toIndex: number): T[];

package/utils/array.js

@@ -0,0 +1,77 @@
+//#region packages/sard/utils/array.ts
+/**
+* @description: 确保目标是一个数组
+* @param {any} target
+* @return {array}
+*/
+function toArray(target) {
+	return Array.isArray(target) ? target : [target];
+}
+/**
+* @description: 扩散性遍历
+* @param {any[]} array 要遍历的数组
+* @param {(el: any, spreadIndex: number, index: number) => any} callback 回调函数，接收当前元素、扩散性下标、迭代下标作为参数，
+*  如果返回true，则中止遍历
+* @param {number} currIndex 遍历开始的下标
+* @param {number} direction 开始遍历的方向
+* @return {number} 扩散性下标、或开始下标
+*/
+function spreadEach(array, callback, startIndex = 0, direction = -1) {
+	const len = array.length;
+	let spreadIndex = startIndex;
+	let edge = 0;
+	direction = -direction;
+	for (let i = 0; i < len; i++) {
+		if (edge < 0) spreadIndex = len - 1 - i;
+		else if (edge > 0) spreadIndex = i;
+		else {
+			spreadIndex = spreadIndex + direction * i;
+			edge = spreadIndex === 0 ? 1 : spreadIndex === len - 1 ? -1 : 0;
+			direction = -direction;
+		}
+		if (typeof callback === "function") {
+			if (callback(array[spreadIndex], spreadIndex, i)) return spreadIndex;
+		}
+	}
+	return startIndex;
+}
+/**
+* 判断两数组是否相等，浅比较，元素个数和位置都要相等才为真。
+*/
+function arrayEqual(arr1, arr2) {
+	return arr1.length === arr2.length && arr1.every((el, i) => el === arr2[i]);
+}
+/**
+* 打乱并返回数组，会修改原数组。
+*/
+function shuffle(array) {
+	const len = array.length;
+	for (let i = len - 1; i >= 0; i--) {
+		const randomIndex = ~~(Math.random() * (i + 1));
+		const temp = array[randomIndex];
+		array[randomIndex] = array[i];
+		array[i] = temp;
+	}
+	return array;
+}
+/**
+* 移动数组中的元素，会返回移动后的新数组。
+*/
+function arrayMove(array, fromIndex, toIndex) {
+	if (fromIndex === toIndex || fromIndex < 0 || fromIndex >= array.length || toIndex < 0 || toIndex >= array.length) return array;
+	const fromValue = array[fromIndex];
+	if (fromIndex > toIndex) return [
+		...array.slice(0, toIndex),
+		fromValue,
+		...array.slice(toIndex, fromIndex),
+		...array.slice(fromIndex + 1)
+	];
+	else return [
+		...array.slice(0, fromIndex),
+		...array.slice(fromIndex + 1, toIndex + 1),
+		fromValue,
+		...array.slice(toIndex + 1)
+	];
+}
+//#endregion
+export { arrayEqual, arrayMove, shuffle, spreadEach, toArray };

package/utils/barcode.d.ts

@@ -0,0 +1,73 @@
+import { type CanvasFontWeight, type CanvasFontStyle, type CanvasTextAlign } from './canvas';
+export declare const BarcodeFormatList: readonly ["CODE128", "EAN13", "UPC-A", "ITF14"];
+export type BarcodeFormat = (typeof BarcodeFormatList)[number];
+export declare const BarcodeTextPositionList: readonly ["top", "bottom"];
+export type BarcodeTextPosition = (typeof BarcodeTextPositionList)[number];
+export interface BarcodeOptions {
+    format?: BarcodeFormat;
+    width?: number;
+    height?: number;
+    color?: string;
+    background?: string;
+    displayValue?: boolean;
+    text?: string;
+    textPosition?: BarcodeTextPosition;
+    textAlign?: CanvasTextAlign;
+    textMargin?: number;
+    fontStyle?: CanvasFontStyle;
+    fontWeight?: CanvasFontWeight;
+    fontSize?: number;
+    fontFamily?: string;
+    margin?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    ean128?: boolean;
+    flat?: boolean;
+    lastChar?: string;
+}
+export interface BarcodeRenderOptions {
+    format: BarcodeFormat;
+    width: number;
+    height: number;
+    lineColor: string;
+    background: string;
+    displayValue: boolean;
+    text?: string;
+    textPosition: BarcodeTextPosition;
+    textAlign: CanvasTextAlign;
+    textMargin: number;
+    fontStyle: CanvasFontStyle;
+    fontWeight: CanvasFontWeight;
+    fontSize: number;
+    fontFamily: string;
+    margin: number;
+    marginTop: number;
+    marginBottom: number;
+    marginLeft: number;
+    marginRight: number;
+    ean128?: boolean;
+    flat?: boolean;
+    lastChar?: string;
+}
+export interface BarcodeEncoding {
+    data: string;
+    text: string;
+    options: BarcodeRenderOptions;
+}
+export interface BarcodeLayoutSegment extends BarcodeEncoding {
+    width: number;
+    height: number;
+    textWidth: number;
+    barcodeWidth: number;
+    barcodePadding: number;
+}
+export interface BarcodeLayout {
+    width: number;
+    height: number;
+    segments: BarcodeLayoutSegment[];
+}
+export declare function normalizeBarcodeOptions(options?: BarcodeOptions): BarcodeRenderOptions;
+export declare function barcode(value: string, options?: BarcodeOptions): BarcodeEncoding[];
+export declare function calculateBarcodeLayout(encodings: BarcodeEncoding[], measureText: (text: string, options: BarcodeRenderOptions) => number): BarcodeLayout;