@yh-ui/hooks 0.1.0

package/dist/use-locale/index.mjs

@@ -0,0 +1,63 @@
+import { computed, unref, watch } from "vue";
+import { zhCn } from "@yh-ui/locale";
+import { useConfig } from "../use-config/index.mjs";
+import { setDayjsLocale } from "./dayjs-locale.mjs";
+export {
+  setDayjsLocale,
+  getDayjsLocale,
+  setDayjsLocaleSync,
+  updateDayjsMonths
+} from "./dayjs-locale.mjs";
+export 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
+  };
+};

package/dist/use-namespace/index.cjs

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNamespace = exports.useGlobalNamespace = exports.namespaceContextKey = exports.defaultNamespace = void 0;
+var _vue = require("vue");
+const defaultNamespace = exports.defaultNamespace = "yh";
+const statePrefix = "is-";
+const namespaceContextKey = exports.namespaceContextKey = Symbol("namespaceContextKey");
+const useGlobalNamespace = () => {
+  return (0, _vue.inject)(namespaceContextKey, (0, _vue.ref)(defaultNamespace));
+};
+exports.useGlobalNamespace = useGlobalNamespace;
+const useNamespace = block => {
+  const namespace = useGlobalNamespace();
+  const b = (blockSuffix = "") => {
+    const ns = (0, _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 `--${(0, _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 `--${(0, _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
+  };
+};
+exports.useNamespace = useNamespace;

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

@@ -0,0 +1,34 @@
+import type { InjectionKey, Ref } from 'vue';
+export declare const defaultNamespace = "yh";
+export declare const namespaceContextKey: InjectionKey<Ref<string>>;
+/**
+ * 获取全局命名空间
+ */
+export declare const useGlobalNamespace: () => Ref<string, string>;
+/**
+ * useNamespace - 生成 BEM 类名
+ * @param block - 块名称
+ * @returns BEM 类名生成器
+ *
+ * @example
+ * const ns = useNamespace('button')
+ * ns.b() // 'yh-button'
+ * ns.e('icon') // 'yh-button__icon'
+ * ns.m('primary') // 'yh-button--primary'
+ * ns.is('disabled') // 'is-disabled'
+ * ns.bem('box', 'item', 'active') // 'yh-button-box__item--active'
+ */
+export declare const useNamespace: (block: string) => {
+    namespace: Ref<string, string>;
+    b: (blockSuffix?: string) => string;
+    e: (element?: string) => string;
+    m: (modifier?: string) => string;
+    bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+    em: (element?: string, modifier?: string) => string;
+    is: (state: string, value?: boolean) => string;
+    cssVar: (name: string) => string;
+    cssVarObj: (vars: Record<string, string>) => Record<string, string>;
+    cssVarBlock: (name: string) => string;
+    cssVarBlockObj: (vars: Record<string, string>) => Record<string, string>;
+};
+export type UseNamespaceReturn = ReturnType<typeof useNamespace>;

package/dist/use-namespace/index.mjs

@@ -0,0 +1,68 @@
+import { inject, ref, unref } from "vue";
+export const defaultNamespace = "yh";
+const statePrefix = "is-";
+export const namespaceContextKey = Symbol("namespaceContextKey");
+export const useGlobalNamespace = () => {
+  return inject(namespaceContextKey, ref(defaultNamespace));
+};
+export 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
+  };
+};

package/dist/use-scroll-lock/index.cjs

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScrollLock = void 0;
+var _vue = require("vue");
+const useScrollLock = trigger => {
+  const isLocked = (0, _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;
+  };
+  (0, _vue.watch)(trigger, val => {
+    if (val) {
+      lock();
+    } else {
+      unlock();
+    }
+  });
+  (0, _vue.onUnmounted)(unlock);
+  return {
+    isLocked
+  };
+};
+exports.useScrollLock = useScrollLock;

package/dist/use-scroll-lock/index.d.ts

@@ -0,0 +1,8 @@
+import { type Ref } from 'vue';
+/**
+ * useScrollLock - 极致稳定的滚动锁定管理
+ * @description 深度对标 市面组件库 / Naive UI，解决复杂环境（包括 VitePress 等文档站点）下的内容移位问题
+ */
+export declare const useScrollLock: (trigger: Ref<boolean>) => {
+    isLocked: Ref<boolean, boolean>;
+};

package/dist/use-scroll-lock/index.mjs

@@ -0,0 +1,60 @@
+import { ref, watch, onUnmounted } from "vue";
+export 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
+  };
+};

package/dist/use-virtual-scroll/index.cjs

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.useVirtualScroll = useVirtualScroll;
+var _vue = require("vue");
+function useVirtualScroll(options) {
+  const {
+    itemHeight,
+    containerHeight,
+    overscan = 3
+  } = options;
+  const containerRef = (0, _vue.ref)(null);
+  const scrollTop = (0, _vue.ref)(0);
+  const itemsRef = (0, _vue.computed)(() => {
+    const items = options.items;
+    return Array.isArray(items) ? items : items.value;
+  });
+  const totalHeight = (0, _vue.computed)(() => itemsRef.value.length * itemHeight);
+  const visibleCount = (0, _vue.computed)(() => Math.ceil(containerHeight / itemHeight));
+  const startIndex = (0, _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 = (0, _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 = (0, _vue.computed)(() => {
+    const items = itemsRef.value;
+    if (items.length === 0) return [];
+    return items.slice(startIndex.value, endIndex.value);
+  });
+  const offsetY = (0, _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: (0, _vue.computed)(() => startIndex.value),
+    endIndex: (0, _vue.computed)(() => endIndex.value),
+    onScroll,
+    scrollToIndex,
+    containerRef
+  };
+}
+module.exports = useVirtualScroll;

package/dist/use-virtual-scroll/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * useVirtualScroll - 虚拟滚动 Hook
+ * @description 用于大数据量列表的虚拟滚动渲染
+ */
+import { type Ref, type ComputedRef } from 'vue';
+export interface VirtualScrollOptions<T = unknown> {
+    /** 每项高度 */
+    itemHeight: number;
+    /** 容器高度 */
+    containerHeight: number;
+    /** 数据列表 */
+    items: Ref<T[]> | T[];
+    /** 上下额外渲染数量 */
+    overscan?: number;
+}
+export interface VirtualScrollReturn<T = unknown> {
+    /** 可见项列表 */
+    visibleItems: ComputedRef<T[]>;
+    /** 总高度 */
+    totalHeight: ComputedRef<number>;
+    /** Y轴偏移量 */
+    offsetY: ComputedRef<number>;
+    /** 起始索引 */
+    startIndex: Ref<number>;
+    /** 结束索引 */
+    endIndex: Ref<number>;
+    /** 滚动事件处理 */
+    onScroll: (event: Event) => void;
+    /** 滚动到指定索引 */
+    scrollToIndex: (index: number) => void;
+    /** 容器引用 */
+    containerRef: Ref<HTMLElement | null>;
+}
+export declare function useVirtualScroll<T = unknown>(options: VirtualScrollOptions<T>): VirtualScrollReturn<T>;
+export default useVirtualScroll;

package/dist/use-virtual-scroll/index.mjs

@@ -0,0 +1,53 @@
+import { ref, computed } from "vue";
+export 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
+  };
+}
+export default useVirtualScroll;

package/dist/use-z-index/index.cjs

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zIndexCounterKey = exports.zIndexContextKey = exports.useZIndex = exports.resetZIndex = exports.getNextZIndex = exports.createZIndexCounter = void 0;
+var _vue = require("vue");
+const defaultInitialZIndex = 2e3;
+const zIndexContextKey = exports.zIndexContextKey = Symbol("zIndexContextKey");
+const zIndexCounterKey = exports.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;
+};
+exports.getNextZIndex = getNextZIndex;
+const resetZIndex = (value = defaultInitialZIndex) => {
+  if (typeof window !== "undefined") {
+    ;
+    window.__YH_Z_INDEX__ = value;
+  }
+};
+exports.resetZIndex = resetZIndex;
+const createZIndexCounter = (initialValue = defaultInitialZIndex) => {
+  return {
+    current: initialValue
+  };
+};
+exports.createZIndexCounter = createZIndexCounter;
+const useZIndex = zIndexOverrides => {
+  const injectedZIndex = (0, _vue.inject)(zIndexContextKey, void 0);
+  const appCounter = (0, _vue.inject)(zIndexCounterKey, null);
+  const initialZIndex = (0, _vue.computed)(() => {
+    const override = (0, _vue.unref)(zIndexOverrides);
+    return override ?? (0, _vue.unref)(injectedZIndex) ?? defaultInitialZIndex;
+  });
+  const currentZIndex = (0, _vue.computed)(() => initialZIndex.value);
+  const nextZIndex = () => {
+    const override = (0, _vue.unref)(zIndexOverrides);
+    if (override !== void 0) return override;
+    if (appCounter) {
+      return ++appCounter.current;
+    }
+    return getNextZIndex();
+  };
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex
+  };
+};
+exports.useZIndex = useZIndex;

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

@@ -0,0 +1,30 @@
+import type { InjectionKey, Ref } from 'vue';
+export declare const zIndexContextKey: InjectionKey<Ref<number | undefined>>;
+export declare const zIndexCounterKey: InjectionKey<{
+    current: number;
+}>;
+export declare const getNextZIndex: () => number;
+/**
+ * 重置 z-index 计数器
+ */
+export declare const resetZIndex: (value?: number) => void;
+/**
+ * 创建 z-index 计数器（用于 provide）
+ */
+export declare const createZIndexCounter: (initialValue?: number) => {
+    current: number;
+};
+/**
+ * useZIndex - z-index 管理
+ * @param zIndexOverrides - 可选的自定义 z-index
+ * @returns z-index 相关方法
+ *
+ * @example
+ * const { currentZIndex, nextZIndex } = useZIndex()
+ */
+export declare const useZIndex: (zIndexOverrides?: Ref<number>) => {
+    initialZIndex: import("vue").ComputedRef<number>;
+    currentZIndex: import("vue").ComputedRef<number>;
+    nextZIndex: () => number;
+};
+export type UseZIndexReturn = ReturnType<typeof useZIndex>;

package/dist/use-z-index/index.mjs

@@ -0,0 +1,45 @@
+import { computed, inject, unref } from "vue";
+const defaultInitialZIndex = 2e3;
+export const zIndexContextKey = Symbol("zIndexContextKey");
+export const zIndexCounterKey = Symbol("zIndexCounterKey");
+export 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;
+};
+export const resetZIndex = (value = defaultInitialZIndex) => {
+  if (typeof window !== "undefined") {
+    ;
+    window.__YH_Z_INDEX__ = value;
+  }
+};
+export const createZIndexCounter = (initialValue = defaultInitialZIndex) => {
+  return { current: initialValue };
+};
+export 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
+  };
+};