@boo-dreamer/hooks 0.0.1

package/dist/index.cjs

@@ -0,0 +1,578 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+function useToggle(options = {}) {
+  const { defaultValue = false, reverseValue = !defaultValue } = options;
+  const state = vue.ref(defaultValue);
+  const toggle = () => {
+    state.value = !state.value;
+  };
+  const setLeft = () => {
+    state.value = defaultValue;
+  };
+  const setRight = () => {
+    state.value = reverseValue;
+  };
+  return {
+    state,
+    toggle,
+    setLeft,
+    setRight
+  };
+}
+function useBoolean(defaultValue = false) {
+  const state = vue.ref(defaultValue);
+  const setTrue = () => {
+    state.value = true;
+  };
+  const setFalse = () => {
+    state.value = false;
+  };
+  const toggle = () => {
+    state.value = !state.value;
+  };
+  const set = (value) => {
+    state.value = value;
+  };
+  return {
+    state,
+    setTrue,
+    setFalse,
+    toggle,
+    set
+  };
+}
+function useSetState(initialState) {
+  const state = vue.reactive({ ...initialState });
+  const setState = (newState) => {
+    if (typeof newState === "function") {
+      const patch = newState(state);
+      Object.assign(state, patch);
+    } else {
+      Object.assign(state, newState);
+    }
+  };
+  return [state, setState];
+}
+function useCounter(initialValue = 0, options = {}) {
+  const { min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER } = options;
+  const count = vue.ref(initialValue);
+  const inc = (delta = 1) => {
+    const next = count.value + delta;
+    if (next <= max) {
+      count.value = next;
+    } else {
+      count.value = max;
+    }
+  };
+  const dec = (delta = 1) => {
+    const next = count.value - delta;
+    if (next >= min) {
+      count.value = next;
+    } else {
+      count.value = min;
+    }
+  };
+  const set = (value) => {
+    if (value >= min && value <= max) {
+      count.value = value;
+    }
+  };
+  const reset = () => {
+    count.value = initialValue;
+  };
+  return {
+    count,
+    inc,
+    dec,
+    set,
+    reset
+  };
+}
+function useDebounce(value, options = {}) {
+  const { wait = 300, immediate = false } = options;
+  const debouncedValue = vue.ref(
+    typeof value === "function" ? value() : value.value
+  );
+  let timeout = null;
+  const debounce = (fn) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    if (immediate && !timeout) {
+      fn();
+    }
+    timeout = setTimeout(() => {
+      if (!immediate) {
+        fn();
+      }
+      timeout = null;
+    }, wait);
+  };
+  vue.watch(
+    value,
+    (newVal) => {
+      debounce(() => {
+        debouncedValue.value = newVal;
+      });
+    },
+    { immediate: false }
+  );
+  return debouncedValue;
+}
+function useThrottle(value, options = {}) {
+  const { wait = 300, leading = true, trailing = true } = options;
+  const throttledValue = vue.ref(
+    typeof value === "function" ? value() : value.value
+  );
+  let lastExec = 0;
+  let timeout = null;
+  const throttle = (fn) => {
+    const now = Date.now();
+    const elapsed = now - lastExec;
+    const execute = () => {
+      lastExec = Date.now();
+      fn();
+    };
+    if (elapsed >= wait) {
+      if (leading) {
+        execute();
+      } else if (trailing) {
+        if (timeout) clearTimeout(timeout);
+        timeout = setTimeout(execute, wait);
+      }
+    } else if (trailing) {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        lastExec = Date.now();
+        fn();
+      }, wait - elapsed);
+    }
+  };
+  vue.watch(
+    value,
+    (newVal) => {
+      throttle(() => {
+        throttledValue.value = newVal;
+      });
+    },
+    { immediate: false }
+  );
+  return throttledValue;
+}
+function useInterval(fn, delay, options = {}) {
+  const { immediate = false } = options;
+  const count = vue.ref(0);
+  let timer = null;
+  const start = () => {
+    if (timer) return;
+    if (immediate) {
+      fn();
+      count.value++;
+    }
+    timer = setInterval(() => {
+      fn();
+      count.value++;
+    }, delay);
+  };
+  const stop = () => {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+  const reset = () => {
+    stop();
+    count.value = 0;
+  };
+  vue.onUnmounted(() => {
+    stop();
+  });
+  return {
+    count,
+    start,
+    stop,
+    reset
+  };
+}
+function useTimeout(fn, delay) {
+  const ready = vue.ref(false);
+  let timer = null;
+  const start = () => {
+    if (timer) return;
+    ready.value = false;
+    timer = setTimeout(() => {
+      ready.value = true;
+      fn();
+    }, delay);
+  };
+  const stop = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  vue.onUnmounted(() => {
+    stop();
+  });
+  return {
+    ready,
+    start,
+    stop
+  };
+}
+function useClickOutside(targetRef, handler) {
+  const listener = (event) => {
+    const el = targetRef.value;
+    if (!el) return;
+    if (!(el === event.target || el.contains(event.target))) {
+      handler(event);
+    }
+  };
+  vue.onMounted(() => {
+    document.addEventListener("click", listener, true);
+  });
+  vue.onUnmounted(() => {
+    document.removeEventListener("click", listener, true);
+  });
+}
+function useFullscreen(target) {
+  const isFullscreen = vue.ref(false);
+  const getElement = () => {
+    return (target == null ? void 0 : target.value) || document.documentElement;
+  };
+  const enter = async () => {
+    const el = getElement();
+    if (el.requestFullscreen) {
+      await el.requestFullscreen();
+      isFullscreen.value = true;
+    }
+  };
+  const exit = async () => {
+    if (document.exitFullscreen) {
+      await document.exitFullscreen();
+      isFullscreen.value = false;
+    }
+  };
+  const toggle = async () => {
+    if (isFullscreen.value) {
+      await exit();
+    } else {
+      await enter();
+    }
+  };
+  document.addEventListener("fullscreenchange", () => {
+    isFullscreen.value = !!document.fullscreenElement;
+  });
+  return {
+    isFullscreen,
+    enter,
+    exit,
+    toggle
+  };
+}
+function useResize() {
+  const width = vue.ref(window.innerWidth);
+  const height = vue.ref(window.innerHeight);
+  const handler = () => {
+    width.value = window.innerWidth;
+    height.value = window.innerHeight;
+  };
+  vue.onMounted(() => {
+    window.addEventListener("resize", handler);
+  });
+  vue.onUnmounted(() => {
+    window.removeEventListener("resize", handler);
+  });
+  return {
+    width,
+    height
+  };
+}
+function useScroll(options = {}) {
+  const { target } = options;
+  const scrollX = vue.ref(0);
+  const scrollY = vue.ref(0);
+  const getElement = () => {
+    return (target == null ? void 0 : target.value) || window;
+  };
+  const handler = () => {
+    const el = getElement();
+    if (el === window) {
+      scrollX.value = window.scrollX;
+      scrollY.value = window.scrollY;
+    } else {
+      scrollX.value = el.scrollLeft;
+      scrollY.value = el.scrollTop;
+    }
+  };
+  const scrollTo = (x, y) => {
+    const el = getElement();
+    if (el === window) {
+      window.scrollTo(x, y);
+    } else {
+      el.scrollTo(x, y);
+    }
+  };
+  const scrollToTop = () => {
+    scrollTo(0, 0);
+  };
+  vue.onMounted(() => {
+    const el = getElement();
+    el.addEventListener("scroll", handler, { passive: true });
+    handler();
+  });
+  vue.onUnmounted(() => {
+    const el = getElement();
+    el.removeEventListener("scroll", handler);
+  });
+  return {
+    scrollX,
+    scrollY,
+    scrollTo,
+    scrollToTop
+  };
+}
+function useLocalStorage(key, options = {}) {
+  const { defaultValue = null, serializer } = options;
+  const read = () => {
+    try {
+      const item = localStorage.getItem(key);
+      if (item === null) return defaultValue;
+      return serializer ? serializer.read(item) : JSON.parse(item);
+    } catch {
+      return defaultValue;
+    }
+  };
+  const write = (value) => {
+    try {
+      if (value === null) {
+        localStorage.removeItem(key);
+      } else {
+        const serialized = serializer ? serializer.write(value) : JSON.stringify(value);
+        localStorage.setItem(key, serialized);
+      }
+    } catch {
+    }
+  };
+  const storedValue = vue.ref(read());
+  vue.watch(
+    storedValue,
+    (newVal) => {
+      write(newVal);
+    },
+    { deep: true }
+  );
+  window.addEventListener("storage", (e) => {
+    if (e.key === key) {
+      storedValue.value = read();
+    }
+  });
+  return storedValue;
+}
+function useSessionStorage(key, options = {}) {
+  const { defaultValue = null, serializer } = options;
+  const read = () => {
+    try {
+      const item = sessionStorage.getItem(key);
+      if (item === null) return defaultValue;
+      return serializer ? serializer.read(item) : JSON.parse(item);
+    } catch {
+      return defaultValue;
+    }
+  };
+  const write = (value) => {
+    try {
+      if (value === null) {
+        sessionStorage.removeItem(key);
+      } else {
+        const serialized = serializer ? serializer.write(value) : JSON.stringify(value);
+        sessionStorage.setItem(key, serialized);
+      }
+    } catch {
+    }
+  };
+  const storedValue = vue.ref(read());
+  vue.watch(
+    storedValue,
+    (newVal) => {
+      write(newVal);
+    },
+    { deep: true }
+  );
+  return storedValue;
+}
+function useAsync(promiseFn) {
+  const data = vue.ref(null);
+  const error = vue.ref(null);
+  const loading = vue.ref(false);
+  const execute = async (...args) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const result = await promiseFn(...args);
+      data.value = result;
+      return result;
+    } catch (e) {
+      error.value = e;
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    data,
+    error,
+    loading,
+    execute
+  };
+}
+function useFetch(url, options = {}) {
+  const { immediate = true, ...fetchOptions } = options;
+  const data = vue.ref(null);
+  const error = vue.ref(null);
+  const loading = vue.ref(false);
+  const execute = async () => {
+    const requestUrl = typeof url === "string" ? url : url.value;
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await fetch(requestUrl, fetchOptions);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const result = await response.json();
+      data.value = result;
+    } catch (e) {
+      error.value = e;
+    } finally {
+      loading.value = false;
+    }
+  };
+  const refresh = () => execute();
+  if (immediate) {
+    execute();
+  }
+  return {
+    data,
+    error,
+    loading,
+    execute,
+    refresh
+  };
+}
+function useLoading(defaultLoading = false) {
+  const loading = vue.ref(defaultLoading);
+  const startLoading = () => {
+    loading.value = true;
+  };
+  const stopLoading = () => {
+    loading.value = false;
+  };
+  const withLoading = async (fn) => {
+    startLoading();
+    try {
+      const result = await fn();
+      return result;
+    } finally {
+      stopLoading();
+    }
+  };
+  return {
+    loading,
+    withLoading,
+    startLoading,
+    stopLoading
+  };
+}
+function useClipboard() {
+  const text = vue.ref("");
+  const isSupported = typeof navigator !== "undefined" && "clipboard" in navigator;
+  const copy = async (value) => {
+    if (!isSupported) {
+      console.warn("Clipboard API not supported");
+      return false;
+    }
+    try {
+      await navigator.clipboard.writeText(value);
+      text.value = value;
+      return true;
+    } catch (err) {
+      console.error("Failed to copy:", err);
+      return false;
+    }
+  };
+  return {
+    text,
+    isSupported,
+    copy
+  };
+}
+function usePermission(permission) {
+  const state = vue.ref(void 0);
+  const isSupported = typeof navigator !== "undefined" && "permissions" in navigator;
+  if (isSupported) {
+    navigator.permissions.query({ name: permission }).then((result) => {
+      state.value = result.state;
+      result.addEventListener("change", () => {
+        state.value = result.state;
+      });
+    }).catch(() => {
+      state.value = "prompt";
+    });
+  }
+  return {
+    state,
+    isSupported
+  };
+}
+function useMediaQuery(query) {
+  const matches = vue.ref(false);
+  let mediaQuery = null;
+  const updateMatch = () => {
+    if (mediaQuery) {
+      matches.value = mediaQuery.matches;
+    }
+  };
+  vue.onMounted(() => {
+    mediaQuery = window.matchMedia(query);
+    updateMatch();
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", updateMatch);
+    } else {
+      mediaQuery.addListener(updateMatch);
+    }
+  });
+  vue.onUnmounted(() => {
+    if (mediaQuery) {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", updateMatch);
+      } else {
+        mediaQuery.removeListener(updateMatch);
+      }
+    }
+  });
+  return {
+    matches
+  };
+}
+exports.useAsync = useAsync;
+exports.useBoolean = useBoolean;
+exports.useClickOutside = useClickOutside;
+exports.useClipboard = useClipboard;
+exports.useCounter = useCounter;
+exports.useDebounce = useDebounce;
+exports.useFetch = useFetch;
+exports.useFullscreen = useFullscreen;
+exports.useInterval = useInterval;
+exports.useLoading = useLoading;
+exports.useLocalStorage = useLocalStorage;
+exports.useMediaQuery = useMediaQuery;
+exports.usePermission = usePermission;
+exports.useResize = useResize;
+exports.useScroll = useScroll;
+exports.useSessionStorage = useSessionStorage;
+exports.useSetState = useSetState;
+exports.useThrottle = useThrottle;
+exports.useTimeout = useTimeout;
+exports.useToggle = useToggle;