@vef-framework/hooks 1.0.135 → 2.0.0

package/README

@@ -0,0 +1,15 @@
+# @vef-framework/hooks
+
+Hooks for using VEF framework.
+
+## Installation
+
+```bash
+pnpm add @vef-framework/hooks
+```
+
+## Usage
+
+```ts
+import { xxx } from "@vef-framework/hooks";
+```

package/dist/cjs/index.cjs

@@ -0,0 +1,172 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const lib = require('./lib.cjs');
+const index = require('./use-authorized-items/index.cjs');
+const index$1 = require('./use-breakpoints/index.cjs');
+const index$2 = require('./use-check-permission/index.cjs');
+const index$3 = require('./use-data-dict-query/index.cjs');
+const index$4 = require('./use-data-options/index.cjs');
+const index$5 = require('./use-deep-callback/index.cjs');
+const index$6 = require('./use-deep-compare/index.cjs');
+const index$7 = require('./use-deep-effect/index.cjs');
+const index$8 = require('./use-deep-isomorphic-effect/index.cjs');
+const index$9 = require('./use-deep-layout-effect/index.cjs');
+const index$a = require('./use-deep-memo/index.cjs');
+const index$b = require('./use-document-event/index.cjs');
+const index$c = require('./use-emitter-event/index.cjs');
+const index$d = require('./use-has-fetching/index.cjs');
+const index$e = require('./use-has-mutating/index.cjs');
+const index$f = require('./use-is-authorized/index.cjs');
+const index$g = require('./use-latest/index.cjs');
+const index$h = require('./use-raf-state/index.cjs');
+const index$i = require('./use-shallow-callback/index.cjs');
+const index$j = require('./use-shallow-compare/index.cjs');
+const index$k = require('./use-shallow-effect/index.cjs');
+const index$l = require('./use-shallow-isomorphic-effect/index.cjs');
+const index$m = require('./use-shallow-layout-effect/index.cjs');
+const index$n = require('./use-shallow-memo/index.cjs');
+const index$o = require('./use-singleton/index.cjs');
+const hooks = require('@mantine/hooks');
+const reactHotkeysHook = require('react-hotkeys-hook');
+
+
+
+exports.useColorScheme = lib.useColorScheme;
+exports.useMediaQuery = lib.useMediaQuery;
+exports.useReducedMotion = lib.useReducedMotion;
+exports.useAuthorizedItems = index.useAuthorizedItems;
+exports.useBreakpoints = index$1.useBreakpoints;
+exports.useCheckPermission = index$2.useCheckPermission;
+exports.useDataDictQuery = index$3.useDataDictQuery;
+exports.useDataOptionsQuery = index$4.useDataOptionsQuery;
+exports.useDeepCallback = index$5.useDeepCallback;
+exports.useDeepCompare = index$6.useDeepCompare;
+exports.useDeepEffect = index$7.useDeepEffect;
+exports.useDeepIsomorphicEffect = index$8.useDeepIsomorphicEffect;
+exports.useDeepLayoutEffect = index$9.useDeepLayoutEffect;
+exports.useDeepMemo = index$a.useDeepMemo;
+exports.useDocumentEvent = index$b.useDocumentEvent;
+exports.useEmitterEvent = index$c.useEmitterEvent;
+exports.useHasFetching = index$d.useHasFetching;
+exports.useHasMutating = index$e.useHasMutating;
+exports.useIsAuthorized = index$f.useIsAuthorized;
+exports.useLatest = index$g.useLatest;
+exports.useRafState = index$h.useRafState;
+exports.useShallowCallback = index$i.useShallowCallback;
+exports.useShallowCompare = index$j.useShallowCompare;
+exports.useShallowEffect = index$k.useShallowEffect;
+exports.useShallowIsomorphicEffect = index$l.useShallowIsomorphicEffect;
+exports.useShallowLayoutEffect = index$m.useShallowLayoutEffect;
+exports.useShallowMemo = index$n.useShallowMemo;
+exports.useSingleton = index$o.useSingleton;
+Object.defineProperty(exports, "assignRef", {
+  enumerable: true,
+  get: () => hooks.assignRef
+});
+Object.defineProperty(exports, "getHotkeyHandler", {
+  enumerable: true,
+  get: () => hooks.getHotkeyHandler
+});
+Object.defineProperty(exports, "mergeRefs", {
+  enumerable: true,
+  get: () => hooks.mergeRefs
+});
+Object.defineProperty(exports, "useDebouncedCallback", {
+  enumerable: true,
+  get: () => hooks.useDebouncedCallback
+});
+Object.defineProperty(exports, "useDebouncedState", {
+  enumerable: true,
+  get: () => hooks.useDebouncedState
+});
+Object.defineProperty(exports, "useDebouncedValue", {
+  enumerable: true,
+  get: () => hooks.useDebouncedValue
+});
+Object.defineProperty(exports, "useDidUpdate", {
+  enumerable: true,
+  get: () => hooks.useDidUpdate
+});
+Object.defineProperty(exports, "useDocumentTitle", {
+  enumerable: true,
+  get: () => hooks.useDocumentTitle
+});
+Object.defineProperty(exports, "useElementSize", {
+  enumerable: true,
+  get: () => hooks.useElementSize
+});
+Object.defineProperty(exports, "useEventListener", {
+  enumerable: true,
+  get: () => hooks.useEventListener
+});
+Object.defineProperty(exports, "useFocusTrap", {
+  enumerable: true,
+  get: () => hooks.useFocusTrap
+});
+Object.defineProperty(exports, "useFullscreen", {
+  enumerable: true,
+  get: () => hooks.useFullscreen
+});
+Object.defineProperty(exports, "useIntersection", {
+  enumerable: true,
+  get: () => hooks.useIntersection
+});
+Object.defineProperty(exports, "useInterval", {
+  enumerable: true,
+  get: () => hooks.useInterval
+});
+Object.defineProperty(exports, "useIsFirstRender", {
+  enumerable: true,
+  get: () => hooks.useIsFirstRender
+});
+Object.defineProperty(exports, "useIsomorphicEffect", {
+  enumerable: true,
+  get: () => hooks.useIsomorphicEffect
+});
+Object.defineProperty(exports, "useMergedRef", {
+  enumerable: true,
+  get: () => hooks.useMergedRef
+});
+Object.defineProperty(exports, "useMounted", {
+  enumerable: true,
+  get: () => hooks.useMounted
+});
+Object.defineProperty(exports, "useMutationObserver", {
+  enumerable: true,
+  get: () => hooks.useMutationObserver
+});
+Object.defineProperty(exports, "usePrevious", {
+  enumerable: true,
+  get: () => hooks.usePrevious
+});
+Object.defineProperty(exports, "useResizeObserver", {
+  enumerable: true,
+  get: () => hooks.useResizeObserver
+});
+Object.defineProperty(exports, "useTimeout", {
+  enumerable: true,
+  get: () => hooks.useTimeout
+});
+Object.defineProperty(exports, "useWindowEvent", {
+  enumerable: true,
+  get: () => hooks.useWindowEvent
+});
+Object.defineProperty(exports, "HotkeysProvider", {
+  enumerable: true,
+  get: () => reactHotkeysHook.HotkeysProvider
+});
+Object.defineProperty(exports, "useHotkeys", {
+  enumerable: true,
+  get: () => reactHotkeysHook.useHotkeys
+});
+Object.defineProperty(exports, "useHotkeysContext", {
+  enumerable: true,
+  get: () => reactHotkeysHook.useHotkeysContext
+});
+Object.defineProperty(exports, "useRecordHotkeys", {
+  enumerable: true,
+  get: () => reactHotkeysHook.useRecordHotkeys
+});

package/dist/cjs/lib.cjs

@@ -0,0 +1,148 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const hooks = require('@mantine/hooks');
+const reactHotkeysHook = require('react-hotkeys-hook');
+
+function useMediaQuery(query, initialValue, options) {
+  const { getInitialValueInEffect = false } = options ?? {};
+  return hooks.useMediaQuery(
+    query,
+    initialValue,
+    {
+      getInitialValueInEffect
+    }
+  );
+}
+function useColorScheme(initialValue, options) {
+  const { getInitialValueInEffect = false } = options ?? {};
+  return hooks.useColorScheme(
+    initialValue,
+    {
+      getInitialValueInEffect
+    }
+  );
+}
+function useReducedMotion(initialValue, options) {
+  const { getInitialValueInEffect = false } = options ?? {};
+  return hooks.useReducedMotion(
+    initialValue,
+    {
+      getInitialValueInEffect
+    }
+  );
+}
+
+Object.defineProperty(exports, "assignRef", {
+  enumerable: true,
+  get: () => hooks.assignRef
+});
+Object.defineProperty(exports, "getHotkeyHandler", {
+  enumerable: true,
+  get: () => hooks.getHotkeyHandler
+});
+Object.defineProperty(exports, "mergeRefs", {
+  enumerable: true,
+  get: () => hooks.mergeRefs
+});
+Object.defineProperty(exports, "useDebouncedCallback", {
+  enumerable: true,
+  get: () => hooks.useDebouncedCallback
+});
+Object.defineProperty(exports, "useDebouncedState", {
+  enumerable: true,
+  get: () => hooks.useDebouncedState
+});
+Object.defineProperty(exports, "useDebouncedValue", {
+  enumerable: true,
+  get: () => hooks.useDebouncedValue
+});
+Object.defineProperty(exports, "useDidUpdate", {
+  enumerable: true,
+  get: () => hooks.useDidUpdate
+});
+Object.defineProperty(exports, "useDocumentTitle", {
+  enumerable: true,
+  get: () => hooks.useDocumentTitle
+});
+Object.defineProperty(exports, "useElementSize", {
+  enumerable: true,
+  get: () => hooks.useElementSize
+});
+Object.defineProperty(exports, "useEventListener", {
+  enumerable: true,
+  get: () => hooks.useEventListener
+});
+Object.defineProperty(exports, "useFocusTrap", {
+  enumerable: true,
+  get: () => hooks.useFocusTrap
+});
+Object.defineProperty(exports, "useFullscreen", {
+  enumerable: true,
+  get: () => hooks.useFullscreen
+});
+Object.defineProperty(exports, "useIntersection", {
+  enumerable: true,
+  get: () => hooks.useIntersection
+});
+Object.defineProperty(exports, "useInterval", {
+  enumerable: true,
+  get: () => hooks.useInterval
+});
+Object.defineProperty(exports, "useIsFirstRender", {
+  enumerable: true,
+  get: () => hooks.useIsFirstRender
+});
+Object.defineProperty(exports, "useIsomorphicEffect", {
+  enumerable: true,
+  get: () => hooks.useIsomorphicEffect
+});
+Object.defineProperty(exports, "useMergedRef", {
+  enumerable: true,
+  get: () => hooks.useMergedRef
+});
+Object.defineProperty(exports, "useMounted", {
+  enumerable: true,
+  get: () => hooks.useMounted
+});
+Object.defineProperty(exports, "useMutationObserver", {
+  enumerable: true,
+  get: () => hooks.useMutationObserver
+});
+Object.defineProperty(exports, "usePrevious", {
+  enumerable: true,
+  get: () => hooks.usePrevious
+});
+Object.defineProperty(exports, "useResizeObserver", {
+  enumerable: true,
+  get: () => hooks.useResizeObserver
+});
+Object.defineProperty(exports, "useTimeout", {
+  enumerable: true,
+  get: () => hooks.useTimeout
+});
+Object.defineProperty(exports, "useWindowEvent", {
+  enumerable: true,
+  get: () => hooks.useWindowEvent
+});
+Object.defineProperty(exports, "HotkeysProvider", {
+  enumerable: true,
+  get: () => reactHotkeysHook.HotkeysProvider
+});
+Object.defineProperty(exports, "useHotkeys", {
+  enumerable: true,
+  get: () => reactHotkeysHook.useHotkeys
+});
+Object.defineProperty(exports, "useHotkeysContext", {
+  enumerable: true,
+  get: () => reactHotkeysHook.useHotkeysContext
+});
+Object.defineProperty(exports, "useRecordHotkeys", {
+  enumerable: true,
+  get: () => reactHotkeysHook.useRecordHotkeys
+});
+exports.useColorScheme = useColorScheme;
+exports.useMediaQuery = useMediaQuery;
+exports.useReducedMotion = useReducedMotion;

package/dist/cjs/use-authorized-items/index.cjs

@@ -0,0 +1,20 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const core = require('@vef-framework/core');
+const react = require('react');
+
+function useAuthorizedItems(items) {
+  const { hasPermission = () => true } = core.useAppContext();
+  return react.useMemo(
+    () => items.filter((item) => {
+      const { permTokens, checkMode = "any" } = item;
+      return core.checkPermission(hasPermission, permTokens, checkMode);
+    }),
+    [items, hasPermission]
+  );
+}
+
+exports.useAuthorizedItems = useAuthorizedItems;

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

@@ -0,0 +1,74 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function createMediaQuery(value) {
+  return `(min-width: ${shared.isNumber(value) ? `${value}px` : value})`;
+}
+function useBreakpoints(breakpoints, options = {}) {
+  const { initialBreakpoint, getInitialValueInEffect = false } = options;
+  const sortedBreakpoints = react.useMemo(
+    () => Object.entries(breakpoints).map(([name, value]) => {
+      return {
+        name,
+        value,
+        query: createMediaQuery(value),
+        order: shared.isNumber(value) ? value : Number.parseInt(value)
+      };
+    }).toSorted((a, b) => a.order - b.order),
+    [breakpoints]
+  );
+  const [state, setState] = react.useState(() => {
+    if (globalThis.window === void 0 || getInitialValueInEffect) {
+      const initialEntry = sortedBreakpoints.find((bp) => bp.name === initialBreakpoint);
+      return {
+        current: initialBreakpoint,
+        value: initialEntry?.value,
+        matches: initialBreakpoint ? [initialBreakpoint] : []
+      };
+    }
+    const matchingBreakpoints = sortedBreakpoints.filter((bp) => globalThis.matchMedia(bp.query).matches);
+    const currentBreakpoint = matchingBreakpoints.at(-1);
+    return {
+      current: currentBreakpoint?.name,
+      value: currentBreakpoint?.value,
+      matches: matchingBreakpoints.map((bp) => bp.name)
+    };
+  });
+  react.useEffect(() => {
+    const mediaQueryLists = sortedBreakpoints.map((bp) => {
+      return {
+        name: bp.name,
+        value: bp.value,
+        mql: globalThis.matchMedia(bp.query)
+      };
+    });
+    const updateBreakpoint = () => {
+      const matchingBreakpoints = mediaQueryLists.filter((item) => item.mql.matches);
+      const currentBreakpoint = matchingBreakpoints.at(-1);
+      setState({
+        current: currentBreakpoint?.name,
+        value: currentBreakpoint?.value,
+        matches: matchingBreakpoints.map((mbp) => mbp.name)
+      });
+    };
+    if (getInitialValueInEffect) {
+      updateBreakpoint();
+    }
+    for (const item of mediaQueryLists) {
+      item.mql.addEventListener("change", updateBreakpoint);
+    }
+    return () => {
+      for (const item of mediaQueryLists) {
+        item.mql.removeEventListener("change", updateBreakpoint);
+      }
+    };
+  }, [getInitialValueInEffect, sortedBreakpoints]);
+  return state;
+}
+
+exports.useBreakpoints = useBreakpoints;

package/dist/cjs/use-check-permission/index.cjs

@@ -0,0 +1,18 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const core = require('@vef-framework/core');
+const react = require('react');
+
+function useCheckPermission() {
+  const { hasPermission = () => true } = core.useAppContext();
+  const checkPermission = react.useCallback(
+    (permTokens, checkMode) => core.checkPermission(hasPermission, permTokens, checkMode),
+    [hasPermission]
+  );
+  return checkPermission;
+}
+
+exports.useCheckPermission = useCheckPermission;

package/dist/cjs/use-data-dict-query/index.cjs

@@ -0,0 +1,34 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const core = require('@vef-framework/core');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useDataDictQuery({
+  dataDictKey,
+  onFetch,
+  ...options
+}) {
+  const { dataDictQueryFn } = core.useAppContext();
+  if (!shared.isFunction(dataDictQueryFn)) {
+    throw new Error("Data dictionary query function is not provided in the app context.");
+  }
+  const result = core.useQuery({
+    ...options,
+    queryFn: shared.isEmpty(dataDictKey) ? core.skipQueryToken : dataDictQueryFn,
+    queryKey: [dataDictQueryFn.key, dataDictKey],
+    staleTime: options?.staleTime ?? Infinity
+  });
+  const onFetchFn = react.useEffectEvent((data) => {
+    onFetch?.(data);
+  });
+  react.useEffect(() => {
+    result.promise.then(onFetchFn);
+  }, [result.promise]);
+  return result;
+}
+
+exports.useDataDictQuery = useDataDictQuery;

package/dist/cjs/use-data-options/index.cjs

@@ -0,0 +1,119 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const core = require('@vef-framework/core');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const index = require('../use-data-dict-query/index.cjs');
+
+function extractField(item, extractor, defaultKey) {
+  if (!extractor) {
+    return item[defaultKey];
+  }
+  if (shared.isFunction(extractor)) {
+    return extractor(item);
+  }
+  return shared.get(item, extractor);
+}
+function transformDataItem(item, options, withPinyin) {
+  const {
+    labelKey,
+    valueKey,
+    disabledKey,
+    descriptionKey,
+    childrenKey
+  } = options;
+  const label = extractField(item, labelKey, "label");
+  const value = extractField(item, valueKey, "value");
+  const disabled = extractField(item, disabledKey, "disabled");
+  const description = extractField(item, descriptionKey, "description");
+  const children = extractField(item, childrenKey, "children");
+  const option = {
+    ...item,
+    label,
+    value,
+    ...!shared.isNullish(disabled) && { disabled },
+    ...!shared.isNullish(description) && { description }
+  };
+  const optionWithPinyin = withPinyin ? shared.withPinyin(
+    option,
+    "label",
+    "description"
+  ) : option;
+  if (Array.isArray(children) && children.length > 0) {
+    optionWithPinyin.children = children.map((child) => transformDataItem(child, options, withPinyin));
+  }
+  return optionWithPinyin;
+}
+function transformData(data, options, withPinyin) {
+  if (!data || shared.isEmpty(data)) {
+    return [];
+  }
+  if (withPinyin) {
+    return data.map((item) => transformDataItem(item, options, true));
+  }
+  return data.map((item) => transformDataItem(item, options, false));
+}
+function useDataOptionsQuery({
+  queryOptions,
+  dataDictKey,
+  labelKey,
+  valueKey,
+  disabledKey,
+  descriptionKey,
+  childrenKey,
+  withPinyin = false
+}) {
+  const isDataDictQuery = shared.isString(dataDictKey) && dataDictKey.length > 0;
+  const queryResult = core.useQuery({
+    ...queryOptions,
+    queryFn: isDataDictQuery ? core.skipQueryToken : queryOptions?.queryFn
+  });
+  const dictQueryResult = index.useDataDictQuery({
+    dataDictKey
+  });
+  const mergedResult = isDataDictQuery ? dictQueryResult : queryResult;
+  const { data, ...result } = mergedResult;
+  const options = react.useMemo(
+    () => {
+      if (withPinyin) {
+        return transformData(
+          data,
+          {
+            labelKey,
+            valueKey,
+            disabledKey,
+            descriptionKey,
+            childrenKey
+          },
+          true
+        );
+      }
+      return transformData(
+        data,
+        {
+          labelKey,
+          valueKey,
+          disabledKey,
+          descriptionKey,
+          childrenKey
+        },
+        false
+      );
+    },
+    [
+      data,
+      labelKey,
+      valueKey,
+      disabledKey,
+      descriptionKey,
+      childrenKey,
+      withPinyin
+    ]
+  );
+  return { options, ...result };
+}
+
+exports.useDataOptionsQuery = useDataOptionsQuery;

package/dist/cjs/use-deep-callback/index.cjs

@@ -0,0 +1,13 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const index = require('../use-deep-compare/index.cjs');
+
+function useDeepCallback(callback, dependencies) {
+  return react.useCallback(callback, index.useDeepCompare(dependencies));
+}
+
+exports.useDeepCallback = useDeepCallback;

package/dist/cjs/use-deep-compare/index.cjs

@@ -0,0 +1,36 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useDeepCompare(dependencies) {
+  const ref = react.useRef(void 0);
+  const signalRef = react.useRef(0);
+  if (!deepCompare(ref.current, dependencies)) {
+    ref.current = dependencies;
+    signalRef.current += 1;
+  }
+  return [signalRef.current];
+}
+function deepCompare(previous, current) {
+  if (!previous || !current) {
+    return false;
+  }
+  if (Object.is(previous, current)) {
+    return true;
+  }
+  if (previous.length !== current.length) {
+    return false;
+  }
+  for (const [index, element] of previous.entries()) {
+    if (!shared.isDeepEqual(element, current[index])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+exports.useDeepCompare = useDeepCompare;

package/dist/cjs/use-deep-effect/index.cjs

@@ -0,0 +1,13 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const index = require('../use-deep-compare/index.cjs');
+
+function useDeepEffect(effect, dependencies) {
+  return react.useEffect(effect, index.useDeepCompare(dependencies));
+}
+
+exports.useDeepEffect = useDeepEffect;

package/dist/cjs/use-deep-isomorphic-effect/index.cjs

@@ -0,0 +1,14 @@
+/*! @vef-framework/hooks v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:31.592Z */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('../lib.cjs');
+const index = require('../use-deep-compare/index.cjs');
+const hooks = require('@mantine/hooks');
+
+function useDeepIsomorphicEffect(effect, dependencies) {
+  return hooks.useIsomorphicEffect(effect, index.useDeepCompare(dependencies));
+}
+
+exports.useDeepIsomorphicEffect = useDeepIsomorphicEffect;