sard 1.0.0 → 1.0.2

package/use/useLockScroll.js

@@ -0,0 +1,36 @@
+import { computed, onBeforeUnmount, onMounted, ref, toValue, watch } from "vue";
+//#region packages/sard/use/useLockScroll.ts
+const globalLockRecord = ref(0);
+watch(globalLockRecord, (record) => {
+	if (record > 0) document.body.classList.add("s-lock-scroll");
+	else document.body.classList.remove("s-lock-scroll");
+});
+function useLockScroll(_visible, lockScroll = true) {
+	if (!lockScroll) return;
+	const visible = computed(() => toValue(_visible));
+	let isLocked = false;
+	const lock = () => {
+		if (!isLocked) {
+			isLocked = true;
+			globalLockRecord.value++;
+		}
+	};
+	const unlock = () => {
+		if (isLocked) {
+			isLocked = false;
+			globalLockRecord.value--;
+		}
+	};
+	onMounted(() => {
+		if (visible.value) lock();
+	});
+	onBeforeUnmount(() => {
+		unlock();
+	});
+	watch(visible, (visible) => {
+		if (visible) lock();
+		else unlock();
+	});
+}
+//#endregion
+export { useLockScroll };

package/use/useLuckyDraw.d.ts

@@ -0,0 +1,22 @@
+import { type Ref } from 'vue';
+export interface UseLuckyDrawOptions {
+    count: number | Ref<number>;
+    minSpeed?: number | Ref<number>;
+    maxSpeed?: number | Ref<number>;
+    accelTime?: number | Ref<number>;
+    decelTime?: number | Ref<number>;
+    easeIn?: (progress: number) => number;
+    easeOut?: (progress: number) => number;
+    startDelay?: number | Ref<number>;
+    endDelay?: number | Ref<number>;
+    complete?: (index: number) => void;
+}
+export declare const useLuckyDraw: (options: UseLuckyDrawOptions) => {
+    play: () => void;
+    stop: (index?: number) => void;
+    pause: () => void;
+    reset: () => void;
+    playing: import("vue").ComputedRef<boolean>;
+    activeIndex: import("vue").ComputedRef<number | undefined>;
+};
+export type UseLuckyDrawReturn = ReturnType<typeof useLuckyDraw>;

package/use/useLuckyDraw.js

@@ -0,0 +1,131 @@
+import { random } from "../utils/number.js";
+import { computed, onScopeDispose, ref, unref } from "vue";
+import { ticker } from "lwa";
+//#region packages/sard/use/useLuckyDraw.ts
+const defaultOptions = {
+	minSpeed: .1,
+	maxSpeed: .4,
+	accelTime: 2500,
+	decelTime: 2500,
+	easeIn: (k) => k * k,
+	easeOut: (k) => k * (2 - k),
+	startDelay: 0,
+	endDelay: 0
+};
+const useLuckyDraw = (options) => {
+	const { count, minSpeed, maxSpeed, accelTime, decelTime, complete, easeIn, easeOut, startDelay, endDelay } = Object.assign({}, defaultOptions, options);
+	let stage = "INITIAL";
+	let currentIndex = 0;
+	const activeIndex = ref();
+	const playing = ref(false);
+	let startTime = 0;
+	let accelFrames = 0;
+	let decelStopIndex;
+	let decelStopActiveIndex;
+	let decelStartIndex = 0;
+	const getDecelStopIndex = () => {
+		const interval = unref(accelTime) / accelFrames;
+		let i = 0;
+		let mockCurrentIndex = currentIndex;
+		let mockActiveIndex = 0;
+		while (++i) {
+			let progress = interval * i / unref(decelTime);
+			if (progress >= 1) progress = 1;
+			const currentSpeed = unref(maxSpeed) - easeOut(progress) * (unref(maxSpeed) - unref(minSpeed));
+			mockCurrentIndex += currentSpeed;
+			mockActiveIndex = mockCurrentIndex % unref(count) >> 0;
+			if (progress === 1 && mockActiveIndex === decelStopActiveIndex) break;
+		}
+		return mockCurrentIndex >> 0;
+	};
+	const tick = () => {
+		switch (stage) {
+			case "START_DELAY":
+				if (Date.now() - startTime >= unref(startDelay)) {
+					stage = "ACCELERATED";
+					startTime = Date.now();
+				}
+				break;
+			case "ACCELERATED": {
+				accelFrames++;
+				let progress = (Date.now() - startTime) / unref(accelTime);
+				if (progress >= 1) progress = 1;
+				const currentSpeed = unref(minSpeed) + easeIn(progress) * (unref(maxSpeed) - unref(minSpeed));
+				currentIndex += currentSpeed;
+				if (progress === 1) stage = "CONSTANT_SPEED";
+				break;
+			}
+			case "CONSTANT_SPEED":
+				currentIndex += unref(maxSpeed);
+				if (decelStopActiveIndex !== void 0) {
+					stage = "DECELERATED";
+					startTime = Date.now();
+				}
+				break;
+			case "DECELERATED": {
+				if (decelStopIndex === void 0) {
+					decelStopIndex = getDecelStopIndex();
+					decelStartIndex = currentIndex;
+				}
+				let progress = (Date.now() - startTime) / unref(decelTime);
+				if (progress >= 1) progress = 1;
+				currentIndex = decelStartIndex + easeOut(progress) * (decelStopIndex - decelStartIndex);
+				if (progress === 1) if (unref(endDelay) === 0) stage = "DONE";
+				else {
+					stage = "END_DELAY";
+					startTime = Date.now();
+				}
+				break;
+			}
+			case "END_DELAY":
+				if (Date.now() - startTime >= unref(endDelay)) stage = "DONE";
+				break;
+			case "DONE": {
+				const index = decelStopActiveIndex;
+				pause();
+				complete?.(index);
+				break;
+			}
+		}
+		activeIndex.value = currentIndex;
+	};
+	const play = () => {
+		if (playing.value) return;
+		playing.value = true;
+		startTime = Date.now();
+		if (unref(startDelay) === 0) stage = "ACCELERATED";
+		else stage = "START_DELAY";
+		ticker.add(tick);
+	};
+	const pause = () => {
+		ticker.remove(tick);
+		playing.value = false;
+		startTime = 0;
+		accelFrames = 0;
+		decelStopIndex = void 0;
+		decelStopActiveIndex = void 0;
+		decelStartIndex = 0;
+	};
+	const reset = () => {
+		pause();
+		stage = "INITIAL";
+		currentIndex = 0;
+		activeIndex.value = void 0;
+	};
+	const stop = (index) => {
+		if (decelStopActiveIndex === void 0) decelStopActiveIndex = index === void 0 ? random(0, unref(count) - 1) : index;
+	};
+	onScopeDispose(() => {
+		pause();
+	});
+	return {
+		play,
+		stop,
+		pause,
+		reset,
+		playing: computed(() => playing.value),
+		activeIndex: computed(() => activeIndex.value)
+	};
+};
+//#endregion
+export { useLuckyDraw };

package/use/useLuckyGrid.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from 'vue';
+import { type UseLuckyDrawOptions } from './useLuckyDraw';
+export declare function getGridPrizeCount(row: number, column: number): number;
+export declare function getGridCenterSize(row: number, column: number): {
+    row: number;
+    column: number;
+};
+export declare function getGridIndex(row: number, column: number, index: number): number;
+export interface UseLuckyGridOptions extends Omit<UseLuckyDrawOptions, 'count'> {
+    row?: number | Ref<number>;
+    column?: number | Ref<number>;
+}
+export declare function useLuckyGrid(options?: UseLuckyGridOptions): {
+    activeIndex: import("vue").ComputedRef<number | undefined>;
+    grids: import("vue").ComputedRef<number[]>;
+    centerSize: import("vue").ComputedRef<{
+        row: number;
+        column: number;
+    }>;
+    play: () => void;
+    stop: (index?: number) => void;
+    pause: () => void;
+    reset: () => void;
+    playing: import("vue").ComputedRef<boolean>;
+};
+export type UseLuckyGridReturn = ReturnType<typeof useLuckyGrid>;

package/use/useLuckyGrid.js

@@ -0,0 +1,51 @@
+import { useLuckyDraw } from "./useLuckyDraw.js";
+import { computed, unref } from "vue";
+//#region packages/sard/use/useLuckyGrid.ts
+function getGridPrizeCount(row, column) {
+	return row === 1 ? column : column === 1 ? row : row * 2 + column * 2 - 4;
+}
+function getGridCenterSize(row, column) {
+	return {
+		row: Math.max(row - 2, 0),
+		column: Math.max(column - 2, 0)
+	};
+}
+function getGridIndex(row, column, index) {
+	if (index < column) return index;
+	if (index % column === column - 1) return column - 1 + (index / column >> 0);
+	if (index / column >> 0 === row - 1) return column * 2 + row - 3 - index % column;
+	if (index % column === 0) return column * 2 + row * 2 - 4 - (index / column >> 0);
+	const rowNo = index / column >> 0;
+	const columnNo = index % column;
+	return ((rowNo - 1) * (column - 2) + columnNo) * -1;
+}
+const defaultOptions = {
+	row: 3,
+	column: 3,
+	endDelay: 500
+};
+function useLuckyGrid(options) {
+	const { row, column, ...restOptions } = Object.assign({}, defaultOptions, options);
+	const prizeCount = computed(() => getGridPrizeCount(unref(row), unref(column)));
+	const grids = computed(() => {
+		if (prizeCount.value === 0) return [];
+		return Array(unref(row) * unref(column)).fill(0).map((_, index) => getGridIndex(unref(row), unref(column), index));
+	});
+	const centerSize = computed(() => {
+		return getGridCenterSize(unref(row), unref(column));
+	});
+	const { activeIndex, ...restResult } = useLuckyDraw({
+		...restOptions,
+		count: prizeCount
+	});
+	return {
+		...restResult,
+		activeIndex: computed(() => {
+			return activeIndex.value !== void 0 ? activeIndex.value % prizeCount.value >> 0 : void 0;
+		}),
+		grids,
+		centerSize
+	};
+}
+//#endregion
+export { getGridCenterSize, getGridIndex, getGridPrizeCount, useLuckyGrid };

package/use/useLuckyWheel.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'vue';
+import { type UseLuckyDrawOptions } from './useLuckyDraw';
+export interface UseLuckyWheelOptions extends Omit<UseLuckyDrawOptions, 'count'> {
+    count?: number | Ref<number>;
+}
+export declare function useLuckyWheel(options?: UseLuckyWheelOptions): {
+    degrees: import("vue").ComputedRef<number>;
+    sectorDegrees: import("vue").ComputedRef<number>;
+    play: () => void;
+    stop: (index?: number) => void;
+    pause: () => void;
+    reset: () => void;
+    playing: import("vue").ComputedRef<boolean>;
+};
+export type UseLuckyWheelReturn = ReturnType<typeof useLuckyWheel>;

package/use/useLuckyWheel.js

@@ -0,0 +1,26 @@
+import { useLuckyDraw } from "./useLuckyDraw.js";
+import { computed, unref } from "vue";
+//#region packages/sard/use/useLuckyWheel.ts
+const defaultOptions = {
+	count: 8,
+	minSpeed: .01,
+	endDelay: 300
+};
+function useLuckyWheel(options) {
+	const { count, ...restOptions } = Object.assign({}, defaultOptions, options);
+	const { activeIndex, ...restResult } = useLuckyDraw({
+		...restOptions,
+		count
+	});
+	return {
+		...restResult,
+		degrees: computed(() => {
+			return unref(count) === 0 ? 0 : (activeIndex.value || 0) / unref(count) * 360;
+		}),
+		sectorDegrees: computed(() => {
+			return unref(count) === 0 ? 0 : 360 / unref(count);
+		})
+	};
+}
+//#endregion
+export { useLuckyWheel };

package/use/useOptionKeys.d.ts

@@ -0,0 +1,29 @@
+import { type MaybeRef } from 'vue';
+export interface OptionKeys {
+    label?: string;
+    value?: string;
+    disabled?: string;
+    children?: string;
+    isLeaf?: string;
+}
+export declare const defaultOptionKeys: Required<OptionKeys>;
+export declare function useOptionKeys(props: MaybeRef<{
+    fieldKeys?: OptionKeys;
+    optionKeys?: OptionKeys;
+    valueKey?: any;
+}>): {
+    aliasProps: import("vue").ComputedRef<{
+        label: string;
+        value: string;
+        disabled: string;
+        children: string;
+        isLeaf: string;
+    }>;
+    getLabel: (option: any) => any;
+    getValue: (option: any) => any;
+    getIsLeaf: (option: any) => any;
+    getDisabled: (option: any) => any;
+    getChildren: (option: any) => any;
+    getKey: (value: any) => any;
+};
+export type UseOptionKeysReturn = ReturnType<typeof useOptionKeys>;

package/use/useOptionKeys.js

@@ -0,0 +1,36 @@
+import { isObject } from "../utils/is.js";
+import { chainGet } from "../utils/object.js";
+import { computed, unref } from "vue";
+//#region packages/sard/use/useOptionKeys.ts
+const defaultOptionKeys = {
+	label: "label",
+	value: "value",
+	disabled: "disabled",
+	children: "children",
+	isLeaf: "isLeaf"
+};
+function useOptionKeys(props) {
+	const aliasProps = computed(() => ({
+		...defaultOptionKeys,
+		...unref(props).fieldKeys,
+		...unref(props).optionKeys
+	}));
+	const valueKey = computed(() => unref(props).valueKey);
+	const getLabel = (option) => chainGet(option, aliasProps.value.label);
+	const getValue = (option) => chainGet(option, aliasProps.value.value);
+	const getIsLeaf = (option) => chainGet(option, aliasProps.value.isLeaf);
+	const getDisabled = (option) => chainGet(option, aliasProps.value.disabled);
+	const getChildren = (option) => chainGet(option, aliasProps.value.children);
+	const getKey = (value) => isObject(value) && valueKey.value ? chainGet(value, valueKey.value) : value;
+	return {
+		aliasProps,
+		getLabel,
+		getValue,
+		getIsLeaf,
+		getDisabled,
+		getChildren,
+		getKey
+	};
+}
+//#endregion
+export { defaultOptionKeys, useOptionKeys };

package/use/usePageScroll.d.ts

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

package/use/usePageScroll.js

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

package/use/usePointerDown.d.ts

@@ -0,0 +1 @@
+export declare function usePointerDown(onStart?: (event: TouchEvent) => void, onMove?: (event: TouchEvent) => void, onEnd?: (event: TouchEvent) => void): (event: PointerEvent) => void;

package/use/usePointerDown.js

@@ -0,0 +1,21 @@
+import { toTouchEvent } from "../utils/dom.js";
+//#region packages/sard/use/usePointerDown.ts
+function usePointerDown(onStart, onMove, onEnd) {
+	return (event) => {
+		if ("ontouchstart" in document) return;
+		onStart?.(toTouchEvent(event));
+		const moveHandler = (event) => {
+			event.preventDefault();
+			onMove?.(toTouchEvent(event));
+		};
+		const upHandler = (event) => {
+			onEnd?.(toTouchEvent(event, true));
+			document.removeEventListener("pointermove", moveHandler);
+			document.removeEventListener("pointerup", upHandler);
+		};
+		document.addEventListener("pointermove", moveHandler);
+		document.addEventListener("pointerup", upHandler);
+	};
+}
+//#endregion
+export { usePointerDown };

package/use/usePopper.d.ts

@@ -0,0 +1,34 @@
+import { type Ref } from 'vue';
+export interface PopperTarget {
+    getBoundingClientRect: () => DOMRect;
+}
+export type PopperPosition = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export type Direction = 'top' | 'right' | 'bottom' | 'left';
+export type Side = 'start' | 'center' | 'end';
+export type Axis = 'top' | 'left';
+export interface UsePopperOptions {
+    position: () => PopperPosition;
+    refGap: () => number;
+    viewportGap: () => number;
+    arrowSize: number;
+}
+export declare function usePopper(referenceRef: Ref<PopperTarget | Element | null>, floatingRef: Ref<HTMLElement | null>, enabledRef: Ref<boolean>, options: UsePopperOptions): {
+    left: number;
+    top: number;
+}[];
+export declare function computePosition(refRect: DOMRect, floatingSize: {
+    width: number;
+    height: number;
+}, { refGap, position, viewportGap, arrowSize, }: {
+    position: PopperPosition;
+    refGap: number;
+    viewportGap: number;
+    arrowSize: number;
+}): readonly [{
+    top: number;
+    left: number;
+}, {
+    top: number;
+    left: number;
+}];
+export declare function autoUpdate(reference: PopperTarget | Element, floating: Element, update: () => void): () => void;