sard-uniapp 1.11.1 → 1.12.0

package/use/useDragPinch.js

@@ -0,0 +1,88 @@
+import { getTwoPointsDistance } from '../utils';
+import { useInitialVelocity } from './useInitialVelocity';
+import { useMouseDown } from './useMouseDown';
+function getPoint(touch) {
+    return {
+        x: touch.clientX,
+        y: touch.clientY,
+    };
+}
+function getCenterPoint(touches) {
+    const points = Array.from(touches).map(getPoint);
+    const firstPoint = points[0];
+    if (points.length === 0) {
+        return firstPoint;
+    }
+    return points.slice(1).reduce((centerPoint, point) => {
+        return {
+            x: (point.x - centerPoint.x) / 2 + centerPoint.x,
+            y: (point.y - centerPoint.y) / 2 + centerPoint.y,
+        };
+    }, firstPoint);
+}
+function getScalePoints(touches) {
+    const points = Array.from(touches).map(getPoint);
+    if (points.length < 2) {
+        return null;
+    }
+    else if (points.length === 2) {
+        return points;
+    }
+    const centerPoint = points.slice(1, -1).reduce((centerPoint, point) => {
+        return {
+            x: (point.x - centerPoint.x) / 2 + centerPoint.x,
+            y: (point.y - centerPoint.y) / 2 + centerPoint.y,
+        };
+    }, points[0]);
+    return [centerPoint, points[points.length - 1]];
+}
+export function useDragPinch(options) {
+    const { onOffset, onScale, onCapture, onRelease } = options;
+    const initVelocity = useInitialVelocity();
+    let prevCenter = {
+        x: 0,
+        y: 0,
+    };
+    let prevScalePoints = null;
+    const onTouchStart = (event) => {
+        if (event.touches.length === 1) {
+            initVelocity.onStart(getPoint(event.touches[0]));
+        }
+        prevCenter = getCenterPoint(event.touches);
+        prevScalePoints = getScalePoints(event.touches);
+        onCapture?.();
+    };
+    const onTouchMove = (event) => {
+        const currCenterPoint = getCenterPoint(event.touches);
+        const offsetX = currCenterPoint.x - prevCenter.x;
+        const offsetY = currCenterPoint.y - prevCenter.y;
+        prevCenter = currCenterPoint;
+        onOffset?.(offsetX, offsetY);
+        const currScalePoints = getScalePoints(event.touches);
+        if (prevScalePoints && currScalePoints) {
+            const prevDistance = getTwoPointsDistance(...prevScalePoints);
+            const currDistance = getTwoPointsDistance(...currScalePoints);
+            const scale = (currDistance - prevDistance) / prevDistance;
+            onScale?.(currCenterPoint.x, currCenterPoint.y, scale);
+        }
+        prevScalePoints = currScalePoints;
+        if (event.touches.length === 1) {
+            initVelocity.onMove(getPoint(event.touches[0]));
+        }
+    };
+    const onTouchEnd = (event) => {
+        prevCenter = getCenterPoint(event.touches);
+        prevScalePoints = getScalePoints(event.touches);
+        if (event.touches.length === 0) {
+            const velocity = initVelocity.onEnd();
+            onRelease?.(velocity);
+        }
+    };
+    const onMouseDown = useMouseDown(onTouchStart, onTouchMove, onTouchEnd);
+    return {
+        onMouseDown,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+    };
+}

package/use/useImperative.js

@@ -60,6 +60,7 @@ export function getAvailableImperative(name, id) {
                 return imperativeItem.imperative;
             }
         }
+        return imperativeItems[imperativeItems.length - 1]?.imperative;
     }
 }
 export function getImperatives(name, id) {

package/use/useInitialVelocity.d.ts

@@ -0,0 +1,13 @@
+interface Point {
+    x: number;
+    y: number;
+}
+export declare function useInitialVelocity(): {
+    onStart: (point: Point) => void;
+    onMove: (point: Point) => void;
+    onEnd: () => {
+        x: number;
+        y: number;
+    };
+};
+export {};

package/use/useInitialVelocity.js

@@ -0,0 +1,65 @@
+export function useInitialVelocity() {
+    const touchInfo = {
+        x: 0,
+        y: 0,
+        historyX: [],
+        historyY: [],
+        historyTime: [],
+    };
+    function findDelta(point) {
+        return {
+            x: point.x - touchInfo.x,
+            y: point.y - touchInfo.y,
+        };
+    }
+    function onStart(point) {
+        touchInfo.x = point.x;
+        touchInfo.y = point.y;
+        touchInfo.historyX = [0];
+        touchInfo.historyY = [0];
+        touchInfo.historyTime = [Date.now()];
+    }
+    function onMove(point) {
+        const delta = findDelta(point);
+        touchInfo.historyX.push(delta.x);
+        touchInfo.historyY.push(delta.y);
+        touchInfo.historyTime.push(Date.now());
+        while (touchInfo.historyTime.length > 10) {
+            touchInfo.historyTime.shift();
+            touchInfo.historyX.shift();
+            touchInfo.historyY.shift();
+        }
+    }
+    function onEnd() {
+        const velocity = {
+            x: 0,
+            y: 0,
+        };
+        const length = touchInfo.historyTime.length;
+        if (length > 2) {
+            let i = length - 1;
+            const time1 = touchInfo.historyTime[i];
+            const x = touchInfo.historyX[i];
+            const y = touchInfo.historyY[i];
+            while (i > 0) {
+                i--;
+                const time0 = touchInfo.historyTime[i];
+                const time = time1 - time0;
+                if (time > 30 && time < 50) {
+                    velocity.x = (x - touchInfo.historyX[i]) / time;
+                    velocity.y = (y - touchInfo.historyY[i]) / time;
+                    break;
+                }
+            }
+        }
+        touchInfo.historyTime = [];
+        touchInfo.historyX = [];
+        touchInfo.historyY = [];
+        return velocity;
+    }
+    return {
+        onStart,
+        onMove,
+        onEnd,
+    };
+}

package/use/useMouseDown.js

@@ -5,14 +5,13 @@ export function useMouseDown(startCallback, moveCallback, endCallback) {
         if ('ontouchstart' in document) {
             return;
         }
-        const info = uni.getSystemInfoSync();
-        startCallback?.(toTouchEvent(event, info.windowTop));
+        startCallback?.(toTouchEvent(event));
         const moveHandler = (event) => {
             event.preventDefault();
-            moveCallback?.(toTouchEvent(event, info.windowTop));
+            moveCallback?.(toTouchEvent(event));
         };
         const upHandler = (event) => {
-            endCallback?.(toTouchEvent(event, info.windowTop));
+            endCallback?.(toTouchEvent(event));
             document.removeEventListener('mousemove', moveHandler);
             document.removeEventListener('mouseup', upHandler);
         };

package/use/useScrollSide.d.ts

@@ -0,0 +1,6 @@
+export declare function useScrollSide(): {
+    scrollSide: import("vue").Ref<"start" | "center" | "end" | null, "start" | "center" | "end" | null>;
+    onScroll: (event: any) => void;
+    onScrolltoupper: () => void;
+    onScrolltolower: () => void;
+};

package/use/useScrollSide.js

@@ -0,0 +1,34 @@
+import { ref } from 'vue';
+export function useScrollSide() {
+    const scrollSide = ref(null);
+    let prevScrollTop = 0;
+    const onScroll = (event) => {
+        const scrollTop = event.detail.scrollTop;
+        if (scrollTop === 0) {
+            scrollSide.value = 'start';
+        }
+        else {
+            // 支付宝 lower-threshold 设为0不会触发 scrolltolower
+            // 可设 trap-scroll 使到达边界时仍触发 scroll 来判断是否触底
+            if (prevScrollTop === scrollTop) {
+                scrollSide.value = 'end';
+            }
+            else {
+                scrollSide.value = 'center';
+            }
+        }
+        prevScrollTop = scrollTop;
+    };
+    const onScrolltoupper = () => {
+        scrollSide.value = 'start';
+    };
+    const onScrolltolower = () => {
+        scrollSide.value = 'end';
+    };
+    return {
+        scrollSide,
+        onScroll,
+        onScrolltoupper,
+        onScrolltolower,
+    };
+}

package/use/useScrollSpy.d.ts

@@ -0,0 +1,19 @@
+import { type NodeRect } from '../utils';
+export interface UseScrollSpyOptions {
+    defaultCurrent?: string | number;
+    getSpiedRect: () => Promise<NodeRect>;
+    initialScroll?: boolean;
+    startOffset?: number;
+    onChange?: (name: string | number) => void;
+}
+export declare function useScrollSpy(options: UseScrollSpyOptions): {
+    scrollTop: import("vue").Ref<number | undefined, number | undefined>;
+    innerCurrent: import("vue").Ref<string | number | undefined, string | number | undefined>;
+    anchorRectList: import("vue").ShallowRef<[string | number, NodeRect][], [string | number, NodeRect][]>;
+    register: (name: string | number, getRect: () => Promise<NodeRect>) => void;
+    unregister: (name: string | number) => void;
+    onScroll: (event: any) => void;
+    scrollTo: (name: string | number) => void;
+    update: () => Promise<void>;
+    initialize: () => Promise<void>;
+};

package/use/useScrollSpy.js

@@ -0,0 +1,99 @@
+import { computed, ref, shallowRef } from 'vue';
+import { useSetTimeout } from './useSetTimeout';
+import { isNullish, matchScrollVisible } from '../utils';
+export function useScrollSpy(options) {
+    const { defaultCurrent, initialScroll, onChange, getSpiedRect } = options;
+    const startOffset = computed(() => options.startOffset || 0);
+    let memoScrollTop = 0;
+    const scrollTop = ref(0);
+    const innerCurrent = ref(defaultCurrent);
+    const anchorRectList = shallowRef([]);
+    const anchorMap = new Map();
+    let lockScroll = false;
+    const [unLockScrollLater] = useSetTimeout(() => {
+        lockScroll = false;
+    });
+    const register = (name, getRect) => {
+        anchorMap.set(name, getRect);
+    };
+    const unregister = (name) => {
+        anchorMap.delete(name);
+    };
+    const calcPosition = (offset) => {
+        matchScrollVisible(anchorRectList.value.map((item) => item[1]), (index) => {
+            const name = anchorRectList.value[index][0];
+            if (name !== innerCurrent.value) {
+                innerCurrent.value = name;
+                onChange?.(name);
+            }
+        }, {
+            offset,
+        });
+    };
+    const onScroll = (event) => {
+        memoScrollTop = event.detail.scrollTop;
+        if (lockScroll) {
+            return;
+        }
+        calcPosition(memoScrollTop + startOffset.value);
+    };
+    const scrollTo = (name) => {
+        if (anchorRectList.value.length > 0) {
+            const item = anchorRectList.value.find((item) => item[0] === name);
+            if (item) {
+                const offset = item[1].top;
+                scrollTop.value = offset - startOffset.value;
+                lockScroll = true;
+                unLockScrollLater(150);
+            }
+        }
+    };
+    const getAllAnchorRect = async () => {
+        const allRect = await Promise.all([...anchorMap].map(([name, getRect]) => {
+            return new Promise((resolve) => {
+                getRect().then((rect) => {
+                    resolve([name, rect]);
+                });
+            });
+        }));
+        return allRect.sort((a, b) => {
+            return a[1].top - b[1].top;
+        });
+    };
+    const calcRect = async () => {
+        const spiedRect = await getSpiedRect();
+        anchorRectList.value = (await getAllAnchorRect()).map(([name, rect]) => {
+            return [
+                name,
+                {
+                    ...rect,
+                    top: rect.top - spiedRect.top + memoScrollTop,
+                    bottom: rect.bottom - spiedRect.top + memoScrollTop,
+                },
+            ];
+        });
+    };
+    const update = async () => {
+        await calcRect();
+    };
+    const initialize = async () => {
+        await calcRect();
+        if (isNullish(innerCurrent.value)) {
+            innerCurrent.value = anchorRectList.value[0]?.[0];
+        }
+        if (initialScroll) {
+            scrollTo(innerCurrent.value);
+        }
+    };
+    return {
+        scrollTop,
+        innerCurrent,
+        anchorRectList,
+        register,
+        unregister,
+        onScroll,
+        scrollTo,
+        update,
+        initialize,
+    };
+}

package/use/useTimeoutLoading.d.ts

@@ -0,0 +1,6 @@
+import { 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,53 @@
+import { computed, watch } from 'vue';
+import { ref } from 'vue';
+import { useSetTimeout } from './useSetTimeout';
+export function useTimeoutLoading(loading, options = {}) {
+    const { leading = 150, trailing = 20000 } = options;
+    const status = ref('idle');
+    let startTime = 0;
+    const [waitTrailing, cancelTrailing] = useSetTimeout(() => {
+        status.value = 'idle';
+    });
+    const [waitLeading, cancelLeading] = useSetTimeout(() => {
+        status.value = 'loading';
+        startTime = Date.now();
+    });
+    watch(loading, () => {
+        cancelLeading();
+        cancelTrailing();
+        if (loading.value) {
+            switch (status.value) {
+                case 'idle':
+                    status.value = 'leading';
+                    waitLeading(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';
+                        waitTrailing(trailing - duration);
+                    }
+                    break;
+                }
+            }
+        }
+    });
+    const timeoutLoading = computed(() => {
+        return status.value === 'loading' || status.value === 'trailing';
+    });
+    return timeoutLoading;
+}

package/use/useZIndex.js

@@ -1,9 +1,13 @@
 import { ref } from 'vue';
-let globalZIndex = 1000;
+import { defaultConfig } from '../components/config';
+let currentZIndex = 0;
 export function useZIndex() {
-    const zIndex = ref(globalZIndex);
+    if (currentZIndex === 0) {
+        currentZIndex = defaultConfig.initialZIndex;
+    }
+    const zIndex = ref(currentZIndex);
     function increase() {
-        zIndex.value = globalZIndex = globalZIndex + 1;
+        zIndex.value = currentZIndex = currentZIndex + 1;
     }
     return [zIndex, increase];
 }

package/utils/bem.d.ts

@@ -7,17 +7,17 @@ export interface BemConfig {
 type IsType = boolean | number | string | null | undefined | object;
 export declare function createBemStruct(config: BemConfig): (block: string | number) => {
     b(): string;
-    e(element: string | number | undefined, is?: IsType): string;
-    m(modifier: string | number | undefined, is?: IsType): string;
-    em(element: string | number, modifier: string | number | undefined, is?: IsType): string;
-    bem(block: string | number, element?: string | number, modifier?: string | number, is?: boolean | number | string | null): string;
+    e(element: string | number | undefined | null, is?: IsType): string;
+    m(modifier: string | number | undefined | null, is?: IsType): string;
+    em(element: string | number, modifier: string | number | undefined | null, is?: IsType): string;
+    bem(block: string | number, element?: string | number, modifier?: string | number, is?: boolean | number | string | undefined | null): string;
 };
 export declare const createBem: (block: string | number) => {
     b(): string;
-    e(element: string | number | undefined, is?: IsType): string;
-    m(modifier: string | number | undefined, is?: IsType): string;
-    em(element: string | number, modifier: string | number | undefined, is?: IsType): string;
-    bem(block: string | number, element?: string | number, modifier?: string | number, is?: boolean | number | string | null): string;
+    e(element: string | number | undefined | null, is?: IsType): string;
+    m(modifier: string | number | undefined | null, is?: IsType): string;
+    em(element: string | number, modifier: string | number | undefined | null, is?: IsType): string;
+    bem(block: string | number, element?: string | number, modifier?: string | number, is?: boolean | number | string | undefined | null): string;
 };
 export type Bem = ReturnType<typeof createBem>;
 export {};

package/utils/dom.d.ts

@@ -1,55 +1,5 @@
 import { ComponentInternalInstance } from 'vue';
-export type ScrollIntoViewPosition = 'start' | 'center' | 'end' | 'nearest';
-export interface ScrollIntoViewValueOptions {
-    position?: ScrollIntoViewPosition;
-    startOffset?: number;
-    endOffset?: number;
-}
-export interface ScrollIntoViewOptions {
-    position?: ScrollIntoViewPosition;
-    startOffset?: number;
-    endOffset?: number;
-    duration?: number;
-}
-/**
-```
-                      page
-                     ╱
-    ╭───────────────╮    viewport
-  ╭─│─ ─ ─ ─ ─ ─ ─ ─│─╮ ╱
-  │ │ ╭───────────╮ │ │
-  │ │ │  element  │ │ │
-  │ │ ╰───────────╯ │ │
-  ╰─│─ ─ ─ ─ ─ ─ ─ ─│─╯
-    │               │
-    │               │
-    ╰───────────────╯
-```
-
-# 参数
-- viewportHeight: viewport 高度
-- viewportScrollTop: viewport 垂直滚动值
-- elementHeight: element 高度
-- elementOffsetTop: element 距离页面顶部距离
-
-# 选项
-- position: element 在视窗中的位置(start, center, end, nearest)
-- startOffset: element 距离视窗顶部的偏移量
-- endOffset: element 距离视窗底部的偏移量
-
-# 结果值
-- viewportScrollTop: viewport 新的垂直滚动值
-
-*/
-export declare function getScrollIntoViewValue(viewportHeight: number, viewportScrollTop: number, elementHeight: number, elementOffsetTop: number, options?: ScrollIntoViewValueOptions): number;
-export interface NodeRect {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-    height: number;
-    width: number;
-}
+import { type NodeRect } from './geometry';
 /**
  * uni boundingClientRect的 Promise 版本
  * @param selector 组件选择器
@@ -59,16 +9,8 @@ export interface NodeRect {
 export declare function getBoundingClientRect(selector: string, instance: ComponentInternalInstance | null): Promise<NodeRect>;
 /**
  * 获取可使用窗口尺寸
- * @returns Promise<WindowInfo>
  */
-export declare function getWindowInfo(): Promise<WindowInfo>;
-export interface WindowInfo {
-    windowWidth: number;
-    windowHeight: number;
-    windowTop: number;
-    windowBottom: number;
-    statusBarHeight: number;
-}
+export declare function getWindowInfo(): UniNamespace.GetWindowInfoResult;
 export interface ViewportScrollInfo {
     scrollLeft: number;
     scrollTop: number;
@@ -77,13 +19,5 @@ export interface ViewportScrollInfo {
  * 获取可使用窗口尺寸、滚动信息
  */
 export declare function getViewportScrollInfo(): Promise<ViewportScrollInfo>;
-interface MatchScrollVisibleOptions {
-    offset?: number;
-    errorValue?: number;
-}
-/**
- * @description: 匹配元素列表中第一个位于滚动盒子可视区域的元素
- */
-export declare function matchScrollVisible(rects: NodeRect[], callback: (index: number) => unknown, options?: MatchScrollVisibleOptions): Promise<unknown>;
 export declare function toTouchEvent(event: MouseEvent | TouchEvent, windowTop?: number): TouchEvent;
-export {};
+export declare function getNode<T = any>(selector: string, instance: ComponentInternalInstance | null): Promise<T>;