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

package/dist/composables/use-mouse.js

@@ -0,0 +1,286 @@
+export function useMouse(options = {}) {
+  const {
+    target = typeof window < "u" ? window : null,
+    touch = !0,
+    resetOnLeave = !1
+  } = options;
+  let state = {
+    x: 0,
+    y: 0,
+    pageX: 0,
+    pageY: 0,
+    clientX: 0,
+    clientY: 0,
+    movementX: 0,
+    movementY: 0,
+    buttons: 0,
+    isPressed: !1,
+    isInside: !1
+  }, listeners = [], cleanup = null;
+  const notify = () => {
+    listeners.forEach((fn) => fn(state));
+  }, handleMove = (event, isTouch = !1) => {
+    const e = event;
+    state = {
+      x: e.pageX ?? e.clientX,
+      y: e.pageY ?? e.clientY,
+      pageX: e.pageX ?? 0,
+      pageY: e.pageY ?? 0,
+      clientX: e.clientX ?? 0,
+      clientY: e.clientY ?? 0,
+      movementX: isTouch ? 0 : e.movementX ?? 0,
+      movementY: isTouch ? 0 : e.movementY ?? 0,
+      buttons: isTouch ? 1 : e.buttons ?? 0,
+      isPressed: isTouch || (e.buttons ?? 0) > 0,
+      isInside: !0
+    };
+    notify();
+  }, handleMouseMove = (e) => handleMove(e), handleTouchMove = (e) => {
+    if (e.touches.length > 0)
+      handleMove(e.touches[0], !0);
+  }, handleMouseDown = (e) => {
+    state = { ...state, buttons: e.buttons, isPressed: !0 };
+    notify();
+  }, handleMouseUp = (e) => {
+    state = { ...state, buttons: e.buttons, isPressed: !1 };
+    notify();
+  }, handleEnter = () => {
+    state = { ...state, isInside: !0 };
+    notify();
+  }, handleLeave = () => {
+    state = {
+      ...state,
+      isInside: !1,
+      ...resetOnLeave ? { x: 0, y: 0, pageX: 0, pageY: 0, clientX: 0, clientY: 0 } : {}
+    };
+    notify();
+  }, setupListeners = () => {
+    if (!target)
+      return;
+    const t = target;
+    t.addEventListener("mousemove", handleMouseMove);
+    t.addEventListener("mousedown", handleMouseDown);
+    t.addEventListener("mouseup", handleMouseUp);
+    t.addEventListener("mouseenter", handleEnter);
+    t.addEventListener("mouseleave", handleLeave);
+    if (touch) {
+      t.addEventListener("touchmove", handleTouchMove);
+      t.addEventListener("touchstart", handleEnter);
+      t.addEventListener("touchend", handleLeave);
+    }
+    cleanup = () => {
+      t.removeEventListener("mousemove", handleMouseMove);
+      t.removeEventListener("mousedown", handleMouseDown);
+      t.removeEventListener("mouseup", handleMouseUp);
+      t.removeEventListener("mouseenter", handleEnter);
+      t.removeEventListener("mouseleave", handleLeave);
+      if (touch) {
+        t.removeEventListener("touchmove", handleTouchMove);
+        t.removeEventListener("touchstart", handleEnter);
+        t.removeEventListener("touchend", handleLeave);
+      }
+    };
+  };
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      if (listeners.length === 0)
+        setupListeners();
+      listeners.push(fn);
+      fn(state);
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0 && cleanup) {
+          cleanup();
+          cleanup = null;
+        }
+      };
+    },
+    stop: () => {
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+      listeners = [];
+    }
+  };
+}
+export function useMouseInElement(element, options = {}) {
+  const { touch = !0, resetOnLeave = !0 } = options;
+  let state = {
+    x: 0,
+    y: 0,
+    pageX: 0,
+    pageY: 0,
+    clientX: 0,
+    clientY: 0,
+    movementX: 0,
+    movementY: 0,
+    buttons: 0,
+    isPressed: !1,
+    isInside: !1,
+    elementX: 0,
+    elementY: 0,
+    elementWidth: 0,
+    elementHeight: 0,
+    isOutside: !0
+  }, listeners = [], cleanup = null;
+  const notify = () => {
+    listeners.forEach((fn) => fn(state));
+  }, getElement = () => {
+    if (typeof element === "function")
+      return element();
+    return element;
+  }, updateElementPosition = (clientX, clientY) => {
+    const el = getElement();
+    if (!el)
+      return;
+    const rect = el.getBoundingClientRect(), elementX = clientX - rect.left, elementY = clientY - rect.top, isOutside = elementX < 0 || elementY < 0 || elementX > rect.width || elementY > rect.height;
+    state = {
+      ...state,
+      elementX,
+      elementY,
+      elementWidth: rect.width,
+      elementHeight: rect.height,
+      isOutside,
+      isInside: !isOutside
+    };
+  }, handleMove = (event, isTouch = !1) => {
+    const e = event;
+    state = {
+      ...state,
+      x: e.pageX ?? e.clientX,
+      y: e.pageY ?? e.clientY,
+      pageX: e.pageX ?? 0,
+      pageY: e.pageY ?? 0,
+      clientX: e.clientX ?? 0,
+      clientY: e.clientY ?? 0,
+      movementX: isTouch ? 0 : e.movementX ?? 0,
+      movementY: isTouch ? 0 : e.movementY ?? 0,
+      buttons: isTouch ? 1 : e.buttons ?? 0,
+      isPressed: isTouch || (e.buttons ?? 0) > 0
+    };
+    updateElementPosition(e.clientX, e.clientY);
+    notify();
+  }, handleMouseMove = (e) => handleMove(e), handleTouchMove = (e) => {
+    if (e.touches.length > 0)
+      handleMove(e.touches[0], !0);
+  }, handleLeave = () => {
+    state = {
+      ...state,
+      isInside: !1,
+      isOutside: !0,
+      ...resetOnLeave ? { elementX: 0, elementY: 0 } : {}
+    };
+    notify();
+  }, setupListeners = () => {
+    if (typeof window > "u")
+      return;
+    window.addEventListener("mousemove", handleMouseMove);
+    if (touch)
+      window.addEventListener("touchmove", handleTouchMove);
+    cleanup = () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      if (touch)
+        window.removeEventListener("touchmove", handleTouchMove);
+    };
+  };
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      if (listeners.length === 0)
+        setupListeners();
+      listeners.push(fn);
+      fn(state);
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0 && cleanup) {
+          cleanup();
+          cleanup = null;
+        }
+      };
+    },
+    stop: () => {
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+      listeners = [];
+    }
+  };
+}
+export function usePointer(options = {}) {
+  const { target = typeof window < "u" ? window : null } = options;
+  let state = {
+    x: 0,
+    y: 0,
+    pageX: 0,
+    pageY: 0,
+    clientX: 0,
+    clientY: 0,
+    movementX: 0,
+    movementY: 0,
+    buttons: 0,
+    isPressed: !1,
+    isInside: !1
+  }, listeners = [], cleanup = null;
+  const notify = () => {
+    listeners.forEach((fn) => fn(state));
+  }, handlePointerMove = (e) => {
+    state = {
+      x: e.pageX,
+      y: e.pageY,
+      pageX: e.pageX,
+      pageY: e.pageY,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      movementX: e.movementX,
+      movementY: e.movementY,
+      buttons: e.buttons,
+      isPressed: e.buttons > 0 || e.pressure > 0,
+      isInside: !0
+    };
+    notify();
+  }, handlePointerDown = (e) => {
+    state = { ...state, buttons: e.buttons, isPressed: !0 };
+    notify();
+  }, handlePointerUp = (e) => {
+    state = { ...state, buttons: e.buttons, isPressed: !1 };
+    notify();
+  }, setupListeners = () => {
+    if (!target)
+      return;
+    const t = target;
+    t.addEventListener("pointermove", handlePointerMove);
+    t.addEventListener("pointerdown", handlePointerDown);
+    t.addEventListener("pointerup", handlePointerUp);
+    cleanup = () => {
+      t.removeEventListener("pointermove", handlePointerMove);
+      t.removeEventListener("pointerdown", handlePointerDown);
+      t.removeEventListener("pointerup", handlePointerUp);
+    };
+  };
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      if (listeners.length === 0)
+        setupListeners();
+      listeners.push(fn);
+      fn(state);
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0 && cleanup) {
+          cleanup();
+          cleanup = null;
+        }
+      };
+    },
+    stop: () => {
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+      listeners = [];
+    }
+  };
+}

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

@@ -0,0 +1,101 @@
+/**
+ * Check if MutationObserver is supported
+ */
+export declare function isMutationObserverSupported(): boolean;
+/**
+ * Create a reactive mutation observer
+ *
+ * @example
+ * ```ts
+ * const observer = useMutationObserver({
+ *   attributes: true,
+ *   childList: true,
+ *   onMutate: (mutations) => {
+ *     mutations.forEach(m => console.log('Mutation:', m.type))
+ *   }
+ * })
+ *
+ * // Start observing an element
+ * observer.observe(document.getElementById('my-element'))
+ *
+ * // Subscribe to state changes
+ * observer.subscribe((state) => {
+ *   console.log('Latest mutations:', state.mutations)
+ * })
+ *
+ * // Stop observing
+ * observer.disconnect()
+ * ```
+ */
+export declare function useMutationObserver(options?: MutationObserverOptions): MutationObserverRef;
+/**
+ * Watch for attribute changes on an element
+ *
+ * @example
+ * ```ts
+ * useAttributeObserver(
+ *   document.getElementById('my-element'),
+ *   ['class', 'data-state'],
+ *   (attr, oldValue, newValue) => {
+ *     console.log(`${attr} changed from ${oldValue} to ${newValue}`)
+ *   }
+ * )
+ * ```
+ */
+export declare function useAttributeObserver(target: Element | null, attributeNames: string[], callback: (attributeName: string, oldValue: string | null, newValue: string | null) => void): () => void;
+/**
+ * Watch for child node changes
+ *
+ * @example
+ * ```ts
+ * useChildListObserver(
+ *   document.getElementById('container'),
+ *   (added, removed) => {
+ *     console.log('Added:', added.length, 'Removed:', removed.length)
+ *   }
+ * )
+ * ```
+ */
+export declare function useChildListObserver(target: Element | null, callback: (added: Node[], removed: Node[]) => void, options?: { subtree?: boolean }): () => void;
+/**
+ * Watch for text content changes
+ *
+ * @example
+ * ```ts
+ * useTextObserver(
+ *   document.getElementById('editable'),
+ *   (oldText, newText) => {
+ *     console.log(`Text changed from "${oldText}" to "${newText}"`)
+ *   }
+ * )
+ * ```
+ */
+export declare function useTextObserver(target: Element | null, callback: (oldText: string | null, newText: string) => void): () => void;
+/**
+ * Mutation Observer Composables
+ *
+ * Reactive utilities for observing DOM mutations.
+ */
+export declare interface MutationObserverState {
+  isSupported: boolean
+  isObserving: boolean
+  mutations: MutationRecord[]
+}
+export declare interface MutationObserverOptions {
+  attributes?: boolean
+  attributeFilter?: string[]
+  attributeOldValue?: boolean
+  characterData?: boolean
+  characterDataOldValue?: boolean
+  childList?: boolean
+  subtree?: boolean
+  onMutate?: (mutations: MutationRecord[]) => void
+}
+export declare interface MutationObserverRef {
+  get: () => MutationObserverState
+  subscribe: (fn: (state: MutationObserverState) => void) => () => void
+  observe: (target: Element | null) => void
+  disconnect: () => void
+  takeRecords: () => MutationRecord[]
+  isSupported: () => boolean
+}

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

@@ -0,0 +1,129 @@
+export function isMutationObserverSupported() {
+  return typeof window < "u" && "MutationObserver" in window;
+}
+export function useMutationObserver(options = {}) {
+  const supported = isMutationObserverSupported(), subscribers = new Set, {
+    attributes = !0,
+    attributeFilter,
+    attributeOldValue = !1,
+    characterData = !0,
+    characterDataOldValue = !1,
+    childList = !0,
+    subtree = !0,
+    onMutate
+  } = options;
+  let state = {
+    isSupported: supported,
+    isObserving: !1,
+    mutations: []
+  }, observer = null, currentTarget = null;
+  function notify() {
+    subscribers.forEach((fn) => fn(state));
+  }
+  function handleMutations(mutations) {
+    state = { ...state, mutations };
+    notify();
+    onMutate?.(mutations);
+  }
+  function observe(target) {
+    if (!supported || !target)
+      return;
+    disconnect();
+    observer = new MutationObserver(handleMutations);
+    const observerOptions = {
+      attributes,
+      attributeOldValue,
+      characterData,
+      characterDataOldValue,
+      childList,
+      subtree
+    };
+    if (attributeFilter)
+      observerOptions.attributeFilter = attributeFilter;
+    observer.observe(target, observerOptions);
+    currentTarget = target;
+    state = { ...state, isObserving: !0 };
+    notify();
+  }
+  function disconnect() {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+      currentTarget = null;
+      state = { ...state, isObserving: !1, mutations: [] };
+      notify();
+    }
+  }
+  function takeRecords() {
+    if (observer)
+      return observer.takeRecords();
+    return [];
+  }
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      subscribers.add(fn);
+      fn(state);
+      return () => {
+        subscribers.delete(fn);
+        if (subscribers.size === 0)
+          disconnect();
+      };
+    },
+    observe,
+    disconnect,
+    takeRecords,
+    isSupported: () => supported
+  };
+}
+export function useAttributeObserver(target, attributeNames, callback) {
+  if (!target || !isMutationObserverSupported())
+    return () => {};
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations)
+      if (mutation.type === "attributes" && mutation.attributeName) {
+        const newValue = mutation.target.getAttribute(mutation.attributeName);
+        callback(mutation.attributeName, mutation.oldValue, newValue);
+      }
+  });
+  observer.observe(target, {
+    attributes: !0,
+    attributeFilter: attributeNames,
+    attributeOldValue: !0
+  });
+  return () => observer.disconnect();
+}
+export function useChildListObserver(target, callback, options = {}) {
+  if (!target || !isMutationObserverSupported())
+    return () => {};
+  const observer = new MutationObserver((mutations) => {
+    const added = [], removed = [];
+    for (const mutation of mutations)
+      if (mutation.type === "childList") {
+        added.push(...Array.from(mutation.addedNodes));
+        removed.push(...Array.from(mutation.removedNodes));
+      }
+    if (added.length > 0 || removed.length > 0)
+      callback(added, removed);
+  });
+  observer.observe(target, {
+    childList: !0,
+    subtree: options.subtree ?? !1
+  });
+  return () => observer.disconnect();
+}
+export function useTextObserver(target, callback) {
+  if (!target || !isMutationObserverSupported())
+    return () => {};
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations)
+      if (mutation.type === "characterData")
+        callback(mutation.oldValue, mutation.target.textContent || "");
+  });
+  observer.observe(target, {
+    characterData: !0,
+    characterDataOldValue: !0,
+    subtree: !0
+  });
+  return () => observer.disconnect();
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Create a reactive network status tracker
+ *
+ * @example
+ * ```ts
+ * const network = useNetwork()
+ *
+ * network.subscribe((state) => {
+ *   if (state.isOffline) {
+ *     showOfflineMessage()
+ *   }
+ * })
+ *
+ * if (network.effectiveType === '2g') {
+ *   loadLowQualityImages()
+ * }
+ * ```
+ */
+export declare function useNetwork(): NetworkRef;
+/**
+ * Simple online/offline tracker
+ */
+export declare function useOnline(): { isOnline: boolean; subscribe: (cb: (online: boolean) => void) => () => void };
+/**
+ * useNetwork - Reactive network status composables
+ *
+ * Provides reactive tracking of network connectivity and information.
+ */
+export declare interface NetworkState {
+  isOnline: boolean
+  isOffline: boolean
+  type: string | null
+  effectiveType: '2g' | '3g' | '4g' | 'slow-2g' | null
+  downlink: number | null
+  rtt: number | null
+  saveData: boolean
+}
+export declare interface NetworkRef extends NetworkState {
+  subscribe: (callback: (state: NetworkState) => void) => () => void
+}

package/dist/composables/use-network.js

@@ -0,0 +1,85 @@
+export function useNetwork() {
+  const subscribers = new Set, isClient = typeof window < "u", getConnection = () => {
+    if (!isClient)
+      return null;
+    return navigator.connection || null;
+  }, getState = () => {
+    if (!isClient)
+      return {
+        isOnline: !0,
+        isOffline: !1,
+        type: null,
+        effectiveType: null,
+        downlink: null,
+        rtt: null,
+        saveData: !1
+      };
+    const connection = getConnection();
+    return {
+      isOnline: navigator.onLine,
+      isOffline: !navigator.onLine,
+      type: connection?.type || null,
+      effectiveType: connection?.effectiveType || null,
+      downlink: connection?.downlink || null,
+      rtt: connection?.rtt || null,
+      saveData: connection?.saveData || !1
+    };
+  };
+  let currentState = getState();
+  const notify = () => {
+    const newState = getState();
+    currentState = newState;
+    for (const callback of subscribers)
+      try {
+        callback(newState);
+      } catch (e) {
+        console.error("[useNetwork] Subscriber error:", e);
+      }
+  };
+  if (isClient) {
+    window.addEventListener("online", notify);
+    window.addEventListener("offline", notify);
+    const connection = getConnection();
+    if (connection)
+      connection.addEventListener("change", notify);
+  }
+  return {
+    get isOnline() {
+      return currentState.isOnline;
+    },
+    get isOffline() {
+      return currentState.isOffline;
+    },
+    get type() {
+      return currentState.type;
+    },
+    get effectiveType() {
+      return currentState.effectiveType;
+    },
+    get downlink() {
+      return currentState.downlink;
+    },
+    get rtt() {
+      return currentState.rtt;
+    },
+    get saveData() {
+      return currentState.saveData;
+    },
+    subscribe: (callback) => {
+      subscribers.add(callback);
+      callback(currentState);
+      return () => subscribers.delete(callback);
+    }
+  };
+}
+export function useOnline() {
+  const network = useNetwork();
+  return {
+    get isOnline() {
+      return network.isOnline;
+    },
+    subscribe: (callback) => {
+      return network.subscribe((state) => callback(state.isOnline));
+    }
+  };
+}