@yh-ui/hooks 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present YH-UI Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,585 @@
+'use strict';
+
+const vue = require('vue');
+const locale = require('@yh-ui/locale');
+const _dayjs = require('dayjs');
+require('dayjs/locale/en');
+require('dayjs/locale/zh-cn');
+require('dayjs/locale/zh-tw');
+require('dayjs/locale/ja');
+require('dayjs/locale/ko');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const _dayjs__namespace = /*#__PURE__*/_interopNamespaceCompat(_dayjs);
+
+const defaultNamespace = "yh";
+const statePrefix = "is-";
+const namespaceContextKey = Symbol("namespaceContextKey");
+const useGlobalNamespace = () => {
+  return vue.inject(namespaceContextKey, vue.ref(defaultNamespace));
+};
+const useNamespace = (block) => {
+  const namespace = useGlobalNamespace();
+  const b = (blockSuffix = "") => {
+    const ns = vue.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 `--${vue.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 `--${vue.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 = vue.inject(zIndexContextKey, void 0);
+  const appCounter = vue.inject(zIndexCounterKey, null);
+  const initialZIndex = vue.computed(() => {
+    const override = vue.unref(zIndexOverrides);
+    return override ?? vue.unref(injectedZIndex) ?? defaultInitialZIndex;
+  });
+  const currentZIndex = vue.computed(() => initialZIndex.value);
+  const nextZIndex = () => {
+    const override = vue.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 = vue.inject(configProviderContextKey, null);
+  const globalSize = vue.computed(() => {
+    const config = vue.unref(configRef);
+    return config?.size || "default";
+  });
+  const globalZIndex = vue.computed(() => {
+    const config = vue.unref(configRef);
+    return config?.zIndex || 2e3;
+  });
+  const globalLocale = vue.computed(() => {
+    const config = vue.unref(configRef);
+    return config?.locale;
+  });
+  return {
+    config: configRef,
+    globalSize,
+    globalZIndex,
+    globalLocale
+  };
+};
+
+const dayjs = _dayjs__namespace.default || _dayjs__namespace;
+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$1 = vue.computed(() => {
+    return vue.unref(localeOverrides) ?? vue.unref(globalLocale) ?? locale.zhCn;
+  });
+  const lang = vue.computed(() => locale$1.value.name);
+  vue.watch(
+    lang,
+    (newLang) => {
+      setDayjsLocale(newLang);
+    },
+    { immediate: true }
+  );
+  const t = (path, options) => {
+    const keys = path.split(".");
+    let result = locale$1.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$1.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: locale$1,
+    lang,
+    t,
+    tRaw
+  };
+};
+
+const idInjectionKey = Symbol("idInjectionKey");
+const useId = (idOverrides) => {
+  const injectedId = vue.inject(idInjectionKey, void 0);
+  const nativeId = vue.useId();
+  const id = vue.computed(() => {
+    const override = vue.unref(idOverrides);
+    if (override) return override;
+    const injected = vue.unref(injectedId);
+    if (injected) return injected;
+    return nativeId;
+  });
+  return id;
+};
+const useIdInjection = () => {
+  return {
+    prefix: vue.computed(() => `yh-${Date.now()}`),
+    current: 0
+    // No longer using counter
+  };
+};
+
+const FormContextKey = Symbol("FormContextKey");
+const FormItemContextKey = Symbol("FormItemContextKey");
+const useFormItem = () => {
+  const form = vue.inject(FormContextKey, void 0);
+  const formItem = vue.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 = vue.ref(null);
+  const scrollTop = vue.ref(0);
+  const itemsRef = vue.computed(() => {
+    const items = options.items;
+    return Array.isArray(items) ? items : items.value;
+  });
+  const totalHeight = vue.computed(() => itemsRef.value.length * itemHeight);
+  const visibleCount = vue.computed(() => Math.ceil(containerHeight / itemHeight));
+  const startIndex = vue.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 = vue.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 = vue.computed(() => {
+    const items = itemsRef.value;
+    if (items.length === 0) return [];
+    return items.slice(startIndex.value, endIndex.value);
+  });
+  const offsetY = vue.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: vue.computed(() => startIndex.value),
+    endIndex: vue.computed(() => endIndex.value),
+    onScroll,
+    scrollToIndex,
+    containerRef
+  };
+}
+
+function useCache(key, fetcher) {
+  const data = 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
+  };
+}
+
+function useEventListener(target, event, handler, options) {
+  if (typeof window === "undefined") return;
+  const getTarget = () => {
+    if (typeof target === "function") {
+      return target();
+    }
+    return vue.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);
+    }
+  };
+  vue.onMounted(add);
+  vue.onBeforeUnmount(remove);
+  if (vue.isRef(target)) {
+    vue.watch(target, (newVal, oldVal) => {
+      if (oldVal) {
+        oldVal.removeEventListener(event, handler, options);
+      }
+      if (newVal) {
+        newVal.addEventListener(event, handler, options);
+      }
+    });
+  }
+}
+
+const useScrollLock = (trigger) => {
+  const isLocked = vue.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;
+  };
+  vue.watch(trigger, (val) => {
+    if (val) {
+      lock();
+    } else {
+      unlock();
+    }
+  });
+  vue.onUnmounted(unlock);
+  return {
+    isLocked
+  };
+};
+
+function useClickOutside(target, handler) {
+  if (typeof window === "undefined") return;
+  const listener = (event) => {
+    const el = vue.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);
+}
+
+exports.FormContextKey = FormContextKey;
+exports.FormItemContextKey = FormItemContextKey;
+exports.configProviderContextKey = configProviderContextKey;
+exports.createZIndexCounter = createZIndexCounter;
+exports.defaultNamespace = defaultNamespace;
+exports.getDayjsLocale = getDayjsLocale;
+exports.getNextZIndex = getNextZIndex;
+exports.idInjectionKey = idInjectionKey;
+exports.namespaceContextKey = namespaceContextKey;
+exports.resetZIndex = resetZIndex;
+exports.setDayjsLocale = setDayjsLocale;
+exports.setDayjsLocaleSync = setDayjsLocaleSync;
+exports.updateDayjsMonths = updateDayjsMonths;
+exports.useCache = useCache;
+exports.useClickOutside = useClickOutside;
+exports.useConfig = useConfig;
+exports.useEventListener = useEventListener;
+exports.useFormItem = useFormItem;
+exports.useGlobalNamespace = useGlobalNamespace;
+exports.useId = useId;
+exports.useIdInjection = useIdInjection;
+exports.useLocale = useLocale;
+exports.useNamespace = useNamespace;
+exports.useScrollLock = useScrollLock;
+exports.useVirtualScroll = useVirtualScroll;
+exports.useZIndex = useZIndex;
+exports.zIndexContextKey = zIndexContextKey;
+exports.zIndexCounterKey = zIndexCounterKey;