@yh-ui/hooks 0.1.0

package/dist/index.mjs

@@ -0,0 +1,542 @@
+import { inject, ref, unref, computed, watch, useId as useId$1, shallowRef, onMounted, onBeforeUnmount, isRef, onUnmounted } from 'vue';
+import { zhCn } from '@yh-ui/locale';
+import * as _dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/zh-tw';
+import 'dayjs/locale/ja';
+import 'dayjs/locale/ko';
+
+const defaultNamespace = "yh";
+const statePrefix = "is-";
+const namespaceContextKey = Symbol("namespaceContextKey");
+const useGlobalNamespace = () => {
+  return inject(namespaceContextKey, ref(defaultNamespace));
+};
+const useNamespace = (block) => {
+  const namespace = useGlobalNamespace();
+  const b = (blockSuffix = "") => {
+    const ns = unref(namespace);
+    return blockSuffix ? `${ns}-${block}-${blockSuffix}` : `${ns}-${block}`;
+  };
+  const e = (element) => {
+    return element ? `${b()}__${element}` : "";
+  };
+  const m = (modifier) => {
+    return modifier ? `${b()}--${modifier}` : "";
+  };
+  const bem = (blockSuffix, element, modifier) => {
+    let cls = b(blockSuffix);
+    if (element) cls += `__${element}`;
+    if (modifier) cls += `--${modifier}`;
+    return cls;
+  };
+  const em = (element, modifier) => {
+    return element && modifier ? `${b()}__${element}--${modifier}` : "";
+  };
+  function is(state, value) {
+    if (arguments.length === 1) {
+      return `${statePrefix}${state}`;
+    }
+    return value ? `${statePrefix}${state}` : "";
+  }
+  const cssVar = (name) => {
+    return `--${unref(namespace)}-${block}-${name}`;
+  };
+  const cssVarObj = (vars) => {
+    const obj = {};
+    Object.entries(vars).forEach(([key, value]) => {
+      obj[cssVar(key)] = value;
+    });
+    return obj;
+  };
+  const cssVarBlock = (name) => {
+    return `--${unref(namespace)}-${name}`;
+  };
+  const cssVarBlockObj = (vars) => {
+    const obj = {};
+    Object.entries(vars).forEach(([key, value]) => {
+      obj[cssVarBlock(key)] = value;
+    });
+    return obj;
+  };
+  return {
+    namespace,
+    b,
+    e,
+    m,
+    bem,
+    em,
+    is,
+    cssVar,
+    cssVarObj,
+    cssVarBlock,
+    cssVarBlockObj
+  };
+};
+
+const defaultInitialZIndex = 2e3;
+const zIndexContextKey = Symbol("zIndexContextKey");
+const zIndexCounterKey = Symbol("zIndexCounterKey");
+const getNextZIndex = () => {
+  if (typeof window !== "undefined") {
+    const windowContext = window;
+    if (windowContext.__YH_Z_INDEX__ === void 0) {
+      windowContext.__YH_Z_INDEX__ = defaultInitialZIndex;
+    }
+    return ++windowContext.__YH_Z_INDEX__;
+  }
+  return defaultInitialZIndex;
+};
+const resetZIndex = (value = defaultInitialZIndex) => {
+  if (typeof window !== "undefined") {
+    window.__YH_Z_INDEX__ = value;
+  }
+};
+const createZIndexCounter = (initialValue = defaultInitialZIndex) => {
+  return { current: initialValue };
+};
+const useZIndex = (zIndexOverrides) => {
+  const injectedZIndex = inject(zIndexContextKey, void 0);
+  const appCounter = inject(zIndexCounterKey, null);
+  const initialZIndex = computed(() => {
+    const override = unref(zIndexOverrides);
+    return override ?? unref(injectedZIndex) ?? defaultInitialZIndex;
+  });
+  const currentZIndex = computed(() => initialZIndex.value);
+  const nextZIndex = () => {
+    const override = unref(zIndexOverrides);
+    if (override !== void 0) return override;
+    if (appCounter) {
+      return ++appCounter.current;
+    }
+    return getNextZIndex();
+  };
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex
+  };
+};
+
+const configProviderContextKey = Symbol(
+  "configProviderContextKey"
+);
+const useConfig = () => {
+  const configRef = inject(configProviderContextKey, null);
+  const globalSize = computed(() => {
+    const config = unref(configRef);
+    return config?.size || "default";
+  });
+  const globalZIndex = computed(() => {
+    const config = unref(configRef);
+    return config?.zIndex || 2e3;
+  });
+  const globalLocale = computed(() => {
+    const config = unref(configRef);
+    return config?.locale;
+  });
+  return {
+    config: configRef,
+    globalSize,
+    globalZIndex,
+    globalLocale
+  };
+};
+
+const dayjs = _dayjs.default || _dayjs;
+const loadedLocales = /* @__PURE__ */ new Set(["en", "zh-cn", "zh-tw", "ja", "ko"]);
+const localeMapping = {
+  "zh-cn": "zh-cn",
+  "zh-tw": "zh-tw",
+  "zh-hk": "zh-hk",
+  "zh-mo": "zh-tw",
+  // 澳门使用繁体
+  en: "en",
+  ja: "ja",
+  ko: "ko",
+  de: "de",
+  fr: "fr",
+  es: "es",
+  pt: "pt",
+  "pt-br": "pt-br",
+  ru: "ru",
+  ar: "ar",
+  "ar-eg": "ar",
+  tr: "tr",
+  it: "it",
+  nl: "nl",
+  pl: "pl",
+  th: "th",
+  vi: "vi",
+  id: "id",
+  ms: "ms",
+  da: "da",
+  sv: "sv",
+  fi: "fi",
+  no: "nb",
+  "nb-NO": "nb",
+  cs: "cs",
+  sk: "sk",
+  uk: "uk",
+  hu: "hu",
+  ro: "ro",
+  bg: "bg",
+  az: "az",
+  fa: "fa",
+  hi: "hi",
+  pa: "pa-in",
+  el: "el",
+  ca: "ca",
+  tk: "tk",
+  ta: "ta",
+  lv: "lv",
+  af: "af",
+  et: "et",
+  sl: "sl",
+  he: "he",
+  lo: "lo",
+  lt: "lt",
+  mn: "mn",
+  kk: "kk",
+  ku: "ku",
+  ckb: "ku",
+  "ug-cn": "ug-cn",
+  km: "km",
+  sr: "sr",
+  eu: "eu",
+  ky: "ky",
+  "hy-am": "hy-am",
+  hr: "hr",
+  eo: "eo",
+  bn: "bn",
+  mg: "mg",
+  sw: "sw",
+  "uz-uz": "uz",
+  my: "my",
+  te: "te"
+};
+const getDayjsLocale = (localeCode) => {
+  return localeMapping[localeCode] || "en";
+};
+const setDayjsLocale = async (localeCode) => {
+  const dayjsLocale = getDayjsLocale(localeCode);
+  if (loadedLocales.has(dayjsLocale)) {
+    dayjs.locale(dayjsLocale);
+    return;
+  }
+  try {
+    await import(`../../../../node_modules/dayjs/locale/${dayjsLocale}.js`);
+    loadedLocales.add(dayjsLocale);
+    dayjs.locale(dayjsLocale);
+  } catch {
+    console.warn(`[yh-ui] Failed to load dayjs locale: ${dayjsLocale}, falling back to 'en'`);
+    dayjs.locale("en");
+  }
+};
+const setDayjsLocaleSync = (localeCode) => {
+  const dayjsLocale = getDayjsLocale(localeCode);
+  if (loadedLocales.has(dayjsLocale)) {
+    dayjs.locale(dayjsLocale);
+  } else {
+    dayjs.locale("en");
+    setDayjsLocale(localeCode);
+  }
+};
+const updateDayjsMonths = (localeCode, months) => {
+  const dayjsLocale = getDayjsLocale(localeCode);
+  const monthsArray = [
+    months.jan,
+    months.feb,
+    months.mar,
+    months.apr,
+    months.may,
+    months.jun,
+    months.jul,
+    months.aug,
+    months.sep,
+    months.oct,
+    months.nov,
+    months.dec
+  ];
+  try {
+    if (dayjs.updateLocale) {
+      dayjs.updateLocale(dayjsLocale, {
+        months: monthsArray,
+        monthsShort: monthsArray
+      });
+    }
+  } catch {
+  }
+};
+
+const useLocale = (localeOverrides) => {
+  const { globalLocale } = useConfig();
+  const locale = computed(() => {
+    return unref(localeOverrides) ?? unref(globalLocale) ?? zhCn;
+  });
+  const lang = computed(() => locale.value.name);
+  watch(
+    lang,
+    (newLang) => {
+      setDayjsLocale(newLang);
+    },
+    { immediate: true }
+  );
+  const t = (path, options) => {
+    const keys = path.split(".");
+    let result = locale.value.yh;
+    for (const key of keys) {
+      if (result && typeof result === "object") {
+        result = result[key];
+      } else {
+        result = void 0;
+      }
+      if (result === void 0) return path;
+    }
+    if (typeof result !== "string") return path;
+    if (options) {
+      return result.replace(/\{(\w+)\}/g, (_match, key) => {
+        const val = options[key];
+        return val !== void 0 ? String(val) : `{${key}}`;
+      });
+    }
+    return result;
+  };
+  const tRaw = (path) => {
+    const keys = path.split(".");
+    let result = locale.value.yh;
+    for (const key of keys) {
+      if (result && typeof result === "object") {
+        result = result[key];
+      } else {
+        result = void 0;
+      }
+      if (result === void 0) return path;
+    }
+    return result;
+  };
+  return {
+    locale,
+    lang,
+    t,
+    tRaw
+  };
+};
+
+const idInjectionKey = Symbol("idInjectionKey");
+const useId = (idOverrides) => {
+  const injectedId = inject(idInjectionKey, void 0);
+  const nativeId = useId$1();
+  const id = computed(() => {
+    const override = unref(idOverrides);
+    if (override) return override;
+    const injected = unref(injectedId);
+    if (injected) return injected;
+    return nativeId;
+  });
+  return id;
+};
+const useIdInjection = () => {
+  return {
+    prefix: computed(() => `yh-${Date.now()}`),
+    current: 0
+    // No longer using counter
+  };
+};
+
+const FormContextKey = Symbol("FormContextKey");
+const FormItemContextKey = Symbol("FormItemContextKey");
+const useFormItem = () => {
+  const form = inject(FormContextKey, void 0);
+  const formItem = inject(FormItemContextKey, void 0);
+  return {
+    form,
+    formItem,
+    // 触发校验
+    validate: (trigger) => {
+      if (formItem) {
+        return formItem.validate(trigger).catch(() => {
+          return false;
+        });
+      }
+      return Promise.resolve(true);
+    }
+  };
+};
+
+function useVirtualScroll(options) {
+  const { itemHeight, containerHeight, overscan = 3 } = options;
+  const containerRef = ref(null);
+  const scrollTop = ref(0);
+  const itemsRef = computed(() => {
+    const items = options.items;
+    return Array.isArray(items) ? items : items.value;
+  });
+  const totalHeight = computed(() => itemsRef.value.length * itemHeight);
+  const visibleCount = computed(() => Math.ceil(containerHeight / itemHeight));
+  const startIndex = computed(() => {
+    const items = itemsRef.value;
+    if (items.length === 0) return 0;
+    const start = Math.floor(scrollTop.value / itemHeight);
+    return Math.max(0, start - overscan);
+  });
+  const endIndex = computed(() => {
+    const items = itemsRef.value;
+    if (items.length === 0) return 0;
+    const start = Math.floor(scrollTop.value / itemHeight);
+    const end = start + visibleCount.value;
+    return Math.min(items.length, end + overscan);
+  });
+  const visibleItems = computed(() => {
+    const items = itemsRef.value;
+    if (items.length === 0) return [];
+    return items.slice(startIndex.value, endIndex.value);
+  });
+  const offsetY = computed(() => startIndex.value * itemHeight);
+  const onScroll = (event) => {
+    const target = event.target;
+    scrollTop.value = target.scrollTop;
+  };
+  const scrollToIndex = (index) => {
+    if (containerRef.value) {
+      const targetScrollTop = index * itemHeight;
+      containerRef.value.scrollTop = targetScrollTop;
+      scrollTop.value = targetScrollTop;
+    }
+  };
+  return {
+    visibleItems,
+    totalHeight,
+    offsetY,
+    startIndex: computed(() => startIndex.value),
+    endIndex: computed(() => endIndex.value),
+    onScroll,
+    scrollToIndex,
+    containerRef
+  };
+}
+
+function useCache(key, fetcher) {
+  const data = shallowRef(null);
+  const execute = async () => {
+    try {
+      data.value = await fetcher();
+    } catch (err) {
+      console.error(`[YH-UI] Cache fetcher error for key ${key}:`, err);
+    }
+  };
+  return {
+    data,
+    execute
+  };
+}
+
+function useEventListener(target, event, handler, options) {
+  if (typeof window === "undefined") return;
+  const getTarget = () => {
+    if (typeof target === "function") {
+      return target();
+    }
+    return unref(target);
+  };
+  const add = () => {
+    const el = getTarget();
+    if (el) {
+      el.addEventListener(event, handler, options);
+    }
+  };
+  const remove = () => {
+    const el = getTarget();
+    if (el) {
+      el.removeEventListener(event, handler, options);
+    }
+  };
+  onMounted(add);
+  onBeforeUnmount(remove);
+  if (isRef(target)) {
+    watch(target, (newVal, oldVal) => {
+      if (oldVal) {
+        oldVal.removeEventListener(event, handler, options);
+      }
+      if (newVal) {
+        newVal.addEventListener(event, handler, options);
+      }
+    });
+  }
+}
+
+const useScrollLock = (trigger) => {
+  const isLocked = ref(false);
+  let initialHtmlStyle = { overflow: "", paddingRight: "" };
+  let initialBodyStyle = { overflow: "", paddingRight: "" };
+  const getScrollbarWidth = () => {
+    return window.innerWidth - document.documentElement.clientWidth;
+  };
+  const lock = () => {
+    if (isLocked.value) return;
+    const width = getScrollbarWidth();
+    const html = document.documentElement;
+    const body = document.body;
+    initialHtmlStyle = {
+      overflow: html.style.overflow,
+      paddingRight: html.style.paddingRight
+    };
+    initialBodyStyle = {
+      overflow: body.style.overflow,
+      paddingRight: body.style.paddingRight
+    };
+    if (width > 0) {
+      const scrollbarWidth = `${width}px`;
+      html.style.setProperty("--yh-scrollbar-width", scrollbarWidth);
+      const computedBodyPadding = window.getComputedStyle(body).paddingRight;
+      body.style.paddingRight = `calc(${computedBodyPadding} + ${scrollbarWidth})`;
+    }
+    html.style.overflow = "hidden";
+    body.style.overflow = "hidden";
+    html.classList.add("yh-popup-parent--hidden");
+    isLocked.value = true;
+  };
+  const unlock = () => {
+    if (!isLocked.value) return;
+    const html = document.documentElement;
+    const body = document.body;
+    html.style.overflow = initialHtmlStyle.overflow;
+    html.style.paddingRight = initialHtmlStyle.paddingRight;
+    body.style.overflow = initialBodyStyle.overflow;
+    body.style.paddingRight = initialBodyStyle.paddingRight;
+    html.classList.remove("yh-popup-parent--hidden");
+    setTimeout(() => {
+      if (!html.classList.contains("yh-popup-parent--hidden")) {
+        html.style.removeProperty("--yh-scrollbar-width");
+      }
+    }, 400);
+    isLocked.value = false;
+  };
+  watch(trigger, (val) => {
+    if (val) {
+      lock();
+    } else {
+      unlock();
+    }
+  });
+  onUnmounted(unlock);
+  return {
+    isLocked
+  };
+};
+
+function useClickOutside(target, handler) {
+  if (typeof window === "undefined") return;
+  const listener = (event) => {
+    const el = unref(target);
+    if (!el) return;
+    const path = event.composedPath();
+    if (path.includes(el)) return;
+    handler(event);
+  };
+  useEventListener(window, "mousedown", listener, true);
+  useEventListener(window, "touchstart", listener, true);
+}
+
+export { FormContextKey, FormItemContextKey, configProviderContextKey, createZIndexCounter, defaultNamespace, getDayjsLocale, getNextZIndex, idInjectionKey, namespaceContextKey, resetZIndex, setDayjsLocale, setDayjsLocaleSync, updateDayjsMonths, useCache, useClickOutside, useConfig, useEventListener, useFormItem, useGlobalNamespace, useId, useIdInjection, useLocale, useNamespace, useScrollLock, useVirtualScroll, useZIndex, zIndexContextKey, zIndexCounterKey };

package/dist/use-cache/index.cjs

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCache = useCache;
+var _vue = require("vue");
+function useCache(key, fetcher) {
+  const data = (0, _vue.shallowRef)(null);
+  const execute = async () => {
+    try {
+      data.value = await fetcher();
+    } catch (err) {
+      console.error(`[YH-UI] Cache fetcher error for key ${key}:`, err);
+    }
+  };
+  return {
+    data,
+    execute
+  };
+}

package/dist/use-cache/index.d.ts

@@ -0,0 +1,10 @@
+import { type ShallowRef } from 'vue';
+export interface UseCacheReturn<T> {
+    data: ShallowRef<T | null>;
+    execute: () => Promise<void>;
+}
+/**
+ * 一个简单的 SSR 友好的缓存 Hook
+ * 在服务端可以将结果存入缓存，客户端可以从缓存中恢复或重新计算
+ */
+export declare function useCache<T>(key: string, fetcher: () => T | Promise<T>): UseCacheReturn<T>;

package/dist/use-cache/index.mjs

@@ -0,0 +1,15 @@
+import { shallowRef } from "vue";
+export function useCache(key, fetcher) {
+  const data = shallowRef(null);
+  const execute = async () => {
+    try {
+      data.value = await fetcher();
+    } catch (err) {
+      console.error(`[YH-UI] Cache fetcher error for key ${key}:`, err);
+    }
+  };
+  return {
+    data,
+    execute
+  };
+}

package/dist/use-click-outside/index.cjs

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickOutside = useClickOutside;
+var _vue = require("vue");
+var _useEventListener = require("../use-event-listener/index.cjs");
+function useClickOutside(target, handler) {
+  if (typeof window === "undefined") return;
+  const listener = event => {
+    const el = (0, _vue.unref)(target);
+    if (!el) return;
+    const path = event.composedPath();
+    if (path.includes(el)) return;
+    handler(event);
+  };
+  (0, _useEventListener.useEventListener)(window, "mousedown", listener, true);
+  (0, _useEventListener.useEventListener)(window, "touchstart", listener, true);
+}

package/dist/use-click-outside/index.d.ts

@@ -0,0 +1,2 @@
+import type { MaybeRef } from 'vue';
+export declare function useClickOutside(target: MaybeRef<HTMLElement | null | undefined>, handler: (evt: MouseEvent | TouchEvent) => void): void;

package/dist/use-click-outside/index.mjs

@@ -0,0 +1,14 @@
+import { unref } from "vue";
+import { useEventListener } from "../use-event-listener/index.mjs";
+export function useClickOutside(target, handler) {
+  if (typeof window === "undefined") return;
+  const listener = (event) => {
+    const el = unref(target);
+    if (!el) return;
+    const path = event.composedPath();
+    if (path.includes(el)) return;
+    handler(event);
+  };
+  useEventListener(window, "mousedown", listener, true);
+  useEventListener(window, "touchstart", listener, true);
+}

package/dist/use-config/index.cjs

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useConfig = exports.configProviderContextKey = void 0;
+var _vue = require("vue");
+const configProviderContextKey = exports.configProviderContextKey = Symbol("configProviderContextKey");
+const useConfig = () => {
+  const configRef = (0, _vue.inject)(configProviderContextKey, null);
+  const globalSize = (0, _vue.computed)(() => {
+    const config = (0, _vue.unref)(configRef);
+    return config?.size || "default";
+  });
+  const globalZIndex = (0, _vue.computed)(() => {
+    const config = (0, _vue.unref)(configRef);
+    return config?.zIndex || 2e3;
+  });
+  const globalLocale = (0, _vue.computed)(() => {
+    const config = (0, _vue.unref)(configRef);
+    return config?.locale;
+  });
+  return {
+    config: configRef,
+    globalSize,
+    globalZIndex,
+    globalLocale
+  };
+};
+exports.useConfig = useConfig;

package/dist/use-config/index.d.ts

@@ -0,0 +1,22 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+import type { Language } from '@yh-ui/locale';
+export interface ConfigProviderContext {
+    size?: 'small' | 'default' | 'large';
+    zIndex?: number;
+    locale?: Language;
+    message?: {
+        max?: number;
+        duration?: number;
+        offset?: number;
+    };
+}
+export declare const configProviderContextKey: InjectionKey<ComputedRef<ConfigProviderContext>>;
+/**
+ * 获取全局配置 Hook
+ */
+export declare const useConfig: () => {
+    config: ComputedRef<ConfigProviderContext> | null;
+    globalSize: ComputedRef<"small" | "default" | "large">;
+    globalZIndex: ComputedRef<number>;
+    globalLocale: ComputedRef<Language | undefined>;
+};

package/dist/use-config/index.mjs

@@ -0,0 +1,25 @@
+import { inject, computed, unref } from "vue";
+export const configProviderContextKey = Symbol(
+  "configProviderContextKey"
+);
+export const useConfig = () => {
+  const configRef = inject(configProviderContextKey, null);
+  const globalSize = computed(() => {
+    const config = unref(configRef);
+    return config?.size || "default";
+  });
+  const globalZIndex = computed(() => {
+    const config = unref(configRef);
+    return config?.zIndex || 2e3;
+  });
+  const globalLocale = computed(() => {
+    const config = unref(configRef);
+    return config?.locale;
+  });
+  return {
+    config: configRef,
+    globalSize,
+    globalZIndex,
+    globalLocale
+  };
+};