@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/composables/use-geolocation.js

@@ -0,0 +1,101 @@
+export function getCurrentPosition(options) {
+  return new Promise((resolve, reject) => {
+    if (!navigator.geolocation) {
+      reject(Error("Geolocation is not supported"));
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(resolve, reject, options);
+  });
+}
+export function calculateDistance(lat1, lon1, lat2, lon2) {
+  const R = 6371000, \u{3c6}1 = lat1 * Math.PI / 180, \u{3c6}2 = lat2 * Math.PI / 180, \u{394}\u{3c6} = (lat2 - lat1) * Math.PI / 180, \u{394}\u{3bb} = (lon2 - lon1) * Math.PI / 180, a = Math.sin(\u{394}\u{3c6} / 2) * Math.sin(\u{394}\u{3c6} / 2) + Math.cos(\u{3c6}1) * Math.cos(\u{3c6}2) * Math.sin(\u{394}\u{3bb} / 2) * Math.sin(\u{394}\u{3bb} / 2), c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+export function useGeolocation(options = {}) {
+  const {
+    enableHighAccuracy = !0,
+    timeout = 1e4,
+    maximumAge = 0,
+    immediate = !0
+  } = options, supported = typeof navigator < "u" && "geolocation" in navigator;
+  let state = {
+    coords: null,
+    timestamp: null,
+    error: null,
+    loading: !1,
+    supported
+  }, listeners = [], watchId = null, isActive = !0;
+  const notify = () => {
+    listeners.forEach((fn) => fn(state));
+  }, updatePosition = (position) => {
+    state = {
+      ...state,
+      coords: {
+        latitude: position.coords.latitude,
+        longitude: position.coords.longitude,
+        altitude: position.coords.altitude,
+        accuracy: position.coords.accuracy,
+        altitudeAccuracy: position.coords.altitudeAccuracy,
+        heading: position.coords.heading,
+        speed: position.coords.speed
+      },
+      timestamp: position.timestamp,
+      error: null,
+      loading: !1
+    };
+    notify();
+  }, handleError = (error) => {
+    state = {
+      ...state,
+      error,
+      loading: !1
+    };
+    notify();
+  }, startWatch = () => {
+    if (!supported || watchId !== null)
+      return;
+    state = { ...state, loading: !0 };
+    notify();
+    watchId = navigator.geolocation.watchPosition(updatePosition, handleError, { enableHighAccuracy, timeout, maximumAge });
+  }, stopWatch = () => {
+    if (watchId !== null) {
+      navigator.geolocation.clearWatch(watchId);
+      watchId = null;
+    }
+  }, refresh = () => {
+    if (!supported)
+      return;
+    state = { ...state, loading: !0 };
+    notify();
+    navigator.geolocation.getCurrentPosition(updatePosition, handleError, { enableHighAccuracy, timeout, maximumAge });
+  }, pause = () => {
+    isActive = !1;
+    stopWatch();
+  }, resume = () => {
+    isActive = !0;
+    if (listeners.length > 0)
+      startWatch();
+  };
+  if (immediate && supported)
+    startWatch();
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      listeners.push(fn);
+      fn(state);
+      if (listeners.length === 1 && isActive && supported && !immediate)
+        startWatch();
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0)
+          stopWatch();
+      };
+    },
+    refresh,
+    pause,
+    resume
+  };
+}
+export function useGeolocationWatch(options) {
+  return useGeolocation({ ...options, immediate: !0 });
+}

package/dist/composables/use-idle.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Create a reactive idle detector
+ *
+ * @example
+ * ```ts
+ * const idle = useIdle({
+ *   timeout: 30000, // 30 seconds
+ *   onIdle: () => console.log('User is idle'),
+ *   onActive: () => console.log('User is active'),
+ * })
+ *
+ * // Subscribe to idle state changes
+ * idle.subscribe((state) => {
+ *   console.log('Is idle:', state.isIdle)
+ *   console.log('Idle for:', state.idleTime, 'ms')
+ * })
+ *
+ * // Manually reset the idle timer
+ * idle.reset()
+ * ```
+ */
+export declare function useIdle(options?: IdleOptions): IdleRef;
+/**
+ * Simple boolean idle state
+ *
+ * @example
+ * ```ts
+ * const isIdle = useIdleState(30000) // 30 seconds
+ *
+ * isIdle.subscribe((idle) => {
+ *   console.log('User idle:', idle)
+ * })
+ * ```
+ */
+export declare function useIdleState(timeout?: number): IdleStateRef;
+/**
+ * Track user's last active timestamp
+ *
+ * @example
+ * ```ts
+ * const lastActive = useLastActive()
+ *
+ * lastActive.subscribe((timestamp) => {
+ *   console.log('Last active:', new Date(timestamp))
+ * })
+ * ```
+ */
+export declare function useLastActive(): LastActiveRef;
+/**
+ * Auto-logout after idle timeout
+ *
+ * @example
+ * ```ts
+ * useAutoLogout(5 * 60 * 1000, () => {
+ *   // Logout user after 5 minutes of inactivity
+ *   window.location.href = '/logout'
+ * })
+ * ```
+ */
+export declare function useAutoLogout(timeout: number, onLogout: () => void, options?: { warningTime?: number, onWarning?: (remainingTime: number) => void }): AutoLogoutRef;
+/**
+ * Idle Detection Composables
+ *
+ * Reactive utilities for detecting user idle state and activity.
+ */
+export declare interface IdleState {
+  isIdle: boolean
+  lastActive: number
+  idleTime: number
+}
+export declare interface IdleOptions {
+  timeout?: number
+  events?: string[]
+  listenTo?: EventTarget
+  initialState?: boolean
+  onIdle?: () => void
+  onActive?: () => void
+}
+export declare interface IdleRef {
+  get: () => IdleState
+  subscribe: (fn: (state: IdleState) => void) => () => void
+  reset: () => void
+  isIdle: () => boolean
+}
+/** Narrowed view of {@link IdleRef} exposing only the idle flag. */
+export declare interface IdleStateRef {
+  get: () => boolean
+  subscribe: (fn: (isIdle: boolean) => void) => () => void
+  reset: () => void
+}
+/** Narrowed view of {@link IdleRef} exposing only the last-active timestamp. */
+export declare interface LastActiveRef {
+  get: () => number
+  subscribe: (fn: (timestamp: number) => void) => () => void
+  reset: () => void
+}
+/** Handle returned by {@link useAutoLogout}. */
+export declare interface AutoLogoutRef {
+  get: () => IdleState
+  subscribe: (fn: (state: IdleState) => void) => () => void
+  reset: () => void
+}

package/dist/composables/use-idle.js

@@ -0,0 +1,182 @@
+const DEFAULT_EVENTS = [
+  "mousemove",
+  "mousedown",
+  "keydown",
+  "touchstart",
+  "scroll",
+  "wheel",
+  "resize",
+  "visibilitychange"
+];
+export function useIdle(options = {}) {
+  const {
+    timeout = 60000,
+    events = DEFAULT_EVENTS,
+    listenTo = typeof document < "u" ? document : null,
+    initialState = !1,
+    onIdle,
+    onActive
+  } = options, subscribers = new Set;
+  let state = {
+    isIdle: initialState,
+    lastActive: Date.now(),
+    idleTime: 0
+  }, idleTimer = null, idleTimeInterval = null, cleanup = null;
+  function notify() {
+    subscribers.forEach((fn) => fn(state));
+  }
+  function setIdle(isIdle) {
+    const wasIdle = state.isIdle;
+    if (isIdle && !wasIdle) {
+      state = { ...state, isIdle: !0 };
+      notify();
+      onIdle?.();
+      idleTimeInterval = setInterval(() => {
+        state = { ...state, idleTime: Date.now() - state.lastActive };
+        notify();
+      }, 1000);
+    } else if (!isIdle && wasIdle) {
+      state = {
+        ...state,
+        isIdle: !1,
+        lastActive: Date.now(),
+        idleTime: 0
+      };
+      notify();
+      onActive?.();
+      if (idleTimeInterval) {
+        clearInterval(idleTimeInterval);
+        idleTimeInterval = null;
+      }
+    }
+  }
+  function resetTimer() {
+    if (idleTimer)
+      clearTimeout(idleTimer);
+    if (!state.isIdle)
+      state = { ...state, lastActive: Date.now() };
+    setIdle(!1);
+    idleTimer = setTimeout(() => {
+      setIdle(!0);
+    }, timeout);
+  }
+  function handleActivity() {
+    resetTimer();
+  }
+  function handleVisibilityChange() {
+    if (document.hidden) {
+      if (idleTimer)
+        clearTimeout(idleTimer);
+      idleTimer = setTimeout(() => {
+        setIdle(!0);
+      }, Math.min(timeout, 5000));
+    } else
+      resetTimer();
+  }
+  function startListening() {
+    if (!listenTo || cleanup)
+      return;
+    const handlers = [];
+    for (const event of events) {
+      const handler = event === "visibilitychange" ? handleVisibilityChange : handleActivity;
+      listenTo.addEventListener(event, handler, { passive: !0 });
+      handlers.push([event, handler]);
+    }
+    resetTimer();
+    cleanup = () => {
+      for (const [event, handler] of handlers)
+        listenTo.removeEventListener(event, handler);
+      if (idleTimer) {
+        clearTimeout(idleTimer);
+        idleTimer = null;
+      }
+      if (idleTimeInterval) {
+        clearInterval(idleTimeInterval);
+        idleTimeInterval = null;
+      }
+    };
+  }
+  function stopListening() {
+    cleanup?.();
+    cleanup = null;
+  }
+  function reset() {
+    resetTimer();
+  }
+  if (typeof document < "u")
+    startListening();
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      subscribers.add(fn);
+      fn(state);
+      return () => {
+        subscribers.delete(fn);
+        if (subscribers.size === 0)
+          stopListening();
+      };
+    },
+    reset,
+    isIdle: () => state.isIdle
+  };
+}
+export function useIdleState(timeout = 60000) {
+  const idle = useIdle({ timeout });
+  return {
+    get: () => idle.get().isIdle,
+    subscribe: (fn) => {
+      return idle.subscribe((state) => fn(state.isIdle));
+    },
+    reset: idle.reset
+  };
+}
+export function useLastActive() {
+  const idle = useIdle({ timeout: Number.POSITIVE_INFINITY });
+  return {
+    get: () => idle.get().lastActive,
+    subscribe: (fn) => {
+      return idle.subscribe((state) => fn(state.lastActive));
+    },
+    reset: idle.reset
+  };
+}
+export function useAutoLogout(timeout, onLogout, options = {}) {
+  const { warningTime = 30000, onWarning } = options;
+  let warningInterval = null, warningStarted = !1;
+  const idle = useIdle({
+    timeout: timeout - warningTime,
+    onIdle: () => {
+      if (onWarning) {
+        warningStarted = !0;
+        let remaining = warningTime;
+        onWarning(remaining);
+        warningInterval = setInterval(() => {
+          remaining -= 1000;
+          if (remaining <= 0) {
+            if (warningInterval) {
+              clearInterval(warningInterval);
+              warningInterval = null;
+            }
+            onLogout();
+          } else
+            onWarning(remaining);
+        }, 1000);
+      } else
+        setTimeout(onLogout, warningTime);
+    },
+    onActive: () => {
+      if (warningStarted) {
+        warningStarted = !1;
+        if (warningInterval) {
+          clearInterval(warningInterval);
+          warningInterval = null;
+        }
+      }
+    }
+  });
+  return {
+    reset: idle.reset,
+    get: idle.get,
+    subscribe: idle.subscribe
+  };
+}

package/dist/composables/use-intersection-observer.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Observe element intersection with viewport or container
+ */
+export declare function useIntersectionObserver(target: Element | (() => Element | null) | null, callback?: IntersectionCallback, options?: IntersectionObserverOptions): IntersectionObserverRef;
+/**
+ * Simple visibility check - returns true when element is in viewport
+ */
+// eslint-disable-next-line pickier/no-unused-vars
+export declare function useElementVisibility(target: Element | (() => Element | null) | null, options?: Omit<IntersectionObserverOptions, 'once'>): {
+  get: () => boolean
+  subscribe: (fn: (visible: boolean) => void) => () => void
+};
+/**
+ * Lazy load handler - triggers callback once when element becomes visible
+ */
+export declare function useLazyLoad(target: Element | (() => Element | null) | null, onVisible: () => void, options?: Omit<IntersectionObserverOptions, 'once'>): { stop: () => void };
+/**
+ * Infinite scroll handler - triggers callback when sentinel element is visible
+ */
+export declare function useInfiniteScroll(sentinel: Element | (() => Element | null) | null, loadMore: () => void | Promise<void>, options?: IntersectionObserverOptions & {
+    /** Debounce time in ms */
+    debounce?: number
+  }): {
+  stop: () => void
+  start: () => void
+  isLoading: () => boolean
+};
+/**
+ * Track multiple elements' visibility
+ */
+export declare function useIntersectionObserverMultiple(targets: Element[] | (() => Element[]), callback: (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void, options?: Omit<IntersectionObserverOptions, 'once'>): {
+  stop: () => void
+  start: () => void
+  observe: (element: Element) => void
+  unobserve: (element: Element) => void
+};
+/**
+ * useIntersectionObserver - Reactive Intersection Observer API
+ *
+ * Track element visibility for lazy loading, infinite scroll, and animations.
+ *
+ * @example
+ * ```ts
+ * // Basic visibility tracking
+ * const { isVisible, stop } = useIntersectionObserver(element)
+ *
+ * // Lazy loading images
+ * useIntersectionObserver(imgElement, (entry) => {
+ *   if (entry.isIntersecting) {
+ *     imgElement.src = imgElement.dataset.src
+ *   }
+ * }, { once: true })
+ *
+ * // Infinite scroll
+ * useIntersectionObserver(sentinelElement, () => {
+ *   loadMoreItems()
+ * }, { rootMargin: '100px' })
+ * ```
+ */
+export declare interface IntersectionObserverOptions {
+  root?: Element | Document | null
+  rootMargin?: string
+  threshold?: number | number[]
+  once?: boolean
+  immediate?: boolean
+}
+export declare interface IntersectionState {
+  isIntersecting: boolean
+  intersectionRatio: number
+  boundingClientRect: DOMRectReadOnly | null
+  intersectionRect: DOMRectReadOnly | null
+  isVisible: boolean
+  entry: IntersectionObserverEntry | null
+}
+export declare interface IntersectionObserverRef {
+  get: () => IntersectionState
+  subscribe: (fn: (state: IntersectionState) => void) => () => void
+  isVisible: () => boolean
+  stop: () => void
+  start: () => void
+}
+// eslint-disable-next-line pickier/no-unused-vars
+declare type IntersectionCallback = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;

package/dist/composables/use-intersection-observer.js

@@ -0,0 +1,168 @@
+export function useIntersectionObserver(target, callback, options = {}) {
+  const {
+    root = null,
+    rootMargin = "0px",
+    threshold = 0,
+    once = !1,
+    immediate = !0
+  } = options;
+  let state = {
+    isIntersecting: !1,
+    intersectionRatio: 0,
+    boundingClientRect: null,
+    intersectionRect: null,
+    isVisible: !1,
+    entry: null
+  }, listeners = [], observer = null, isActive = !1;
+  const getElement = () => {
+    if (typeof target === "function")
+      return target();
+    return target;
+  }, notify = () => {
+    listeners.forEach((fn) => fn(state));
+  }, handleIntersect = (entries) => {
+    const entry = entries[0];
+    if (!entry)
+      return;
+    state = {
+      isIntersecting: entry.isIntersecting,
+      intersectionRatio: entry.intersectionRatio,
+      boundingClientRect: entry.boundingClientRect,
+      intersectionRect: entry.intersectionRect,
+      isVisible: entry.isIntersecting,
+      entry
+    };
+    notify();
+    if (callback)
+      callback(entry, observer);
+    if (once && entry.isIntersecting)
+      stop();
+  }, start = () => {
+    if (typeof IntersectionObserver > "u")
+      return;
+    if (observer)
+      return;
+    const element = getElement();
+    if (!element)
+      return;
+    observer = new IntersectionObserver(handleIntersect, {
+      root,
+      rootMargin,
+      threshold
+    });
+    observer.observe(element);
+    isActive = !0;
+  }, stop = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    isActive = !1;
+  };
+  if (immediate)
+    start();
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      listeners.push(fn);
+      fn(state);
+      if (listeners.length === 1 && !immediate && !isActive)
+        start();
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0 && !callback)
+          stop();
+      };
+    },
+    isVisible: () => state.isVisible,
+    stop,
+    start
+  };
+}
+export function useElementVisibility(target, options) {
+  const observer = useIntersectionObserver(target, void 0, options);
+  let listeners = [], lastValue = !1;
+  return {
+    get: () => observer.isVisible(),
+    subscribe: (fn) => {
+      const unsub = observer.subscribe((state) => {
+        if (state.isVisible !== lastValue) {
+          lastValue = state.isVisible;
+          fn(state.isVisible);
+        }
+      });
+      listeners.push(fn);
+      fn(observer.isVisible());
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0)
+          unsub();
+      };
+    }
+  };
+}
+export function useLazyLoad(target, onVisible, options) {
+  return { stop: useIntersectionObserver(target, (entry) => {
+    if (entry.isIntersecting)
+      onVisible();
+  }, { ...options, once: !0 }).stop };
+}
+export function useInfiniteScroll(sentinel, loadMore, options = {}) {
+  const { debounce = 100, ...observerOptions } = options;
+  let isLoading = !1, debounceTimeout = null;
+  const observer = useIntersectionObserver(sentinel, async (entry) => {
+    if (!entry.isIntersecting || isLoading)
+      return;
+    if (debounceTimeout)
+      clearTimeout(debounceTimeout);
+    debounceTimeout = setTimeout(async () => {
+      isLoading = !0;
+      try {
+        await loadMore();
+      } finally {
+        isLoading = !1;
+      }
+    }, debounce);
+  }, { rootMargin: "100px", ...observerOptions });
+  return {
+    stop: () => {
+      if (debounceTimeout)
+        clearTimeout(debounceTimeout);
+      observer.stop();
+    },
+    start: observer.start,
+    isLoading: () => isLoading
+  };
+}
+export function useIntersectionObserverMultiple(targets, callback, options = {}) {
+  const { root = null, rootMargin = "0px", threshold = 0 } = options;
+  let observer = null;
+  const getElements = () => {
+    if (typeof targets === "function")
+      return targets();
+    return targets;
+  }, start = () => {
+    if (typeof IntersectionObserver > "u")
+      return;
+    if (observer)
+      return;
+    observer = new IntersectionObserver(callback, {
+      root,
+      rootMargin,
+      threshold
+    });
+    for (const element of getElements())
+      observer.observe(element);
+  }, stop = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }, observe = (element) => {
+    observer?.observe(element);
+  }, unobserve = (element) => {
+    observer?.unobserve(element);
+  };
+  start();
+  return { stop, start, observe, unobserve };
+}