@vef-framework/hooks 1.0.5

package/README.md

@@ -0,0 +1,25 @@
+# The Shared foundations of VEF Framework
+
+VEF framework designed by Venus is built on top of React, and it provides a set of components that are essential for building a modern web application. These components are designed to be highly customizable and reusable, allowing developers to build complex and dynamic user interfaces with ease.
+
+## Installation
+
+To install the VEF framework hooks foundations, you can use pnpm or any other package manager you like:
+
+```bash
+pnpm add @vef-framework/hooks
+```
+
+## Usage
+
+To use the VEF framework hooks foundations in your project, you can import them from the package, for example:
+
+```ts
+import { xxx } from "@vef-framework/hooks";
+
+const result = xxx();
+```
+
+## Documentation
+
+For more details on how to use the VEF framework hooks foundations, please refer to the [official documentation](https://vef.ilxqx.com/docs).

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export * from "./lib";
+export * from "./use-authorized-items";
+export * from "./use-color-tokens";
+export * from "./use-computed-action-buttons";
+export * from "./use-computed-options";
+export * from "./use-context-disabled";
+export * from "./use-data-query";
+export * from "./use-deep-compare-callback";
+export * from "./use-deep-compare-memo";
+export * from "./use-fallback-options";
+export * from "./use-gap-size-normalizer";
+export * from "./use-normalized-gap-size";
+export * from "./use-normalized-menu-items";
+export * from "./use-normalized-options";
+export * from "./use-option-filter";
+export * from "./use-remote-filter";
+export * from "./use-shallow-compare-callback";
+export * from "./use-shallow-compare-memo";
+export * from "./use-singleton";
+export * from "./use-theme-tokens";
+export * from "./use-window-size";

package/dist/index.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import"./lib.js";export{useAuthorizedItems}from"./use-authorized-items.js";export{useColorTokens,useDefaultColorTokens,useSemanticColorTokens}from"./use-color-tokens.js";export{useComputedActionButtons}from"./use-computed-action-buttons.js";export{useComputedOptions}from"./use-computed-options.js";export{DisabledContextProvider,useContextDisabled}from"./use-context-disabled.js";export{useDataQuery}from"./use-data-query.js";export{useDeepCompareCallback}from"./use-deep-compare-callback.js";export{useDeepCompareMemo}from"./use-deep-compare-memo.js";export{useFallbackOptions}from"./use-fallback-options.js";export{useGapSizeNormalizer}from"./use-gap-size-normalizer.js";export{useNormalizedGapSize}from"./use-normalized-gap-size.js";export{useNormalizedMenuItems}from"./use-normalized-menu-items.js";export{useNormalizedDataOptions}from"./use-normalized-options.js";export{useOptionFilter}from"./use-option-filter.js";export{useRemoteFilter}from"./use-remote-filter.js";export{useShallowCompareCallback}from"./use-shallow-compare-callback.js";export{useShallowCompareMemo}from"./use-shallow-compare-memo.js";export{useSingleton}from"./use-singleton.js";export{useThemeTokens}from"./use-theme-tokens.js";export{useWindowSize}from"./use-window-size.js";export{useDeepCompareEffect,useDeepCompareLayoutEffect,useMount,useSize,useUnmount,useUpdate,useUpdateEffect,useUpdateLayoutEffect}from"ahooks";
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/lib.d.ts

@@ -0,0 +1,2 @@
+import { useDeepCompareEffect, useDeepCompareLayoutEffect, useMount, useSize, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect } from "ahooks";
+export { useDeepCompareEffect, useDeepCompareLayoutEffect, useMount, useSize, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, };

package/dist/lib.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+export{useDeepCompareEffect,useDeepCompareLayoutEffect,useMount,useSize,useUnmount,useUpdate,useUpdateEffect,useUpdateLayoutEffect}from"ahooks";
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-authorized-items.d.ts

@@ -0,0 +1,21 @@
+import type { PermissionCheckMode } from "@vef-framework/shared";
+/**
+ * The permission aware interface.
+ */
+export interface PermissionAware {
+    /**
+     * The permission tokens.
+     */
+    permissions?: string[];
+    /**
+     * The permission check mode.
+     */
+    checkMode?: PermissionCheckMode;
+}
+/**
+ * The use authorized items hook.
+ *
+ * @param items - The items to filter.
+ * @returns The filtered items.
+ */
+export declare function useAuthorizedItems<T extends PermissionAware>(items: T[]): T[];

package/dist/use-authorized-items.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useAuthContext as r}from"@vef-framework/core";import{useMemo as e}from"react";function o(o){const{checkPermission:n}=r();return e((()=>o?.filter((r=>{const e=r.permissions;if(!e)return!0;return"any"===(r.checkMode??"any")?e.some((r=>n(r))):e.every((r=>n(r)))}))),[o,n])}export{o as useAuthorizedItems};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-color-tokens.d.ts

@@ -0,0 +1,19 @@
+import type { ColorType, LiteralUnion } from "@vef-framework/shared";
+/**
+ * Get default color tokens
+ *
+ * @returns Default color tokens
+ */
+export declare function useDefaultColorTokens(): Map<LiteralUnion<"blue" | "purple" | "cyan" | "green" | "magenta" | "pink" | "red" | "orange" | "yellow" | "volcano" | "geekblue" | "gold" | "lime", string>, string>;
+/**
+ * Get semantic color tokens
+ *
+ * @returns Semantic color tokens
+ */
+export declare function useSemanticColorTokens(): Map<"primary" | "info" | "success" | "warning" | "error", string>;
+/**
+ * Get color tokens
+ *
+ * @returns Color tokens
+ */
+export declare function useColorTokens(): Map<LiteralUnion<ColorType, string>, string>;

package/dist/use-color-tokens.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{defaultColorTypes as e,semanticColorTypes as r,capitalize as t}from"@vef-framework/shared";import{useMemo as o}from"react";import{useThemeTokens as n}from"./use-theme-tokens.js";function c(){const r=n();return o((()=>e.reduce(((e,t)=>(e.set(t,r[t]),e)),new Map)),[r])}function s(){const e=n();return o((()=>r.reduce(((r,o)=>(r.set(o,e[`color${t(o)}`]),r)),new Map)),[e])}function u(){const e=c(),r=s();return o((()=>new Map([...e,...r])),[e,r])}export{u as useColorTokens,c as useDefaultColorTokens,s as useSemanticColorTokens};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-computed-action-buttons.d.ts

@@ -0,0 +1,36 @@
+import type { Except } from "@vef-framework/shared";
+import { type ActionButton, type ConfirmationMode } from "@vef-framework/shared";
+import { type ReactNode } from "react";
+/**
+ * The computed action button.
+ */
+export interface ComputedActionButton<T> extends Except<ActionButton<T>, "show" | "disabled" | "requireConfirmation" | "confirmationMode" | "confirmationTitle" | "confirmationContent" | "permissions" | "checkMode"> {
+    /**
+     * Whether the action button is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the action button requires confirmation.
+     */
+    requireConfirmation: boolean;
+    /**
+     * The confirmation mode of the action button.
+     */
+    confirmationMode: ConfirmationMode;
+    /**
+     * The confirmation title of the action button.
+     */
+    confirmationTitle: ReactNode;
+    /**
+     * The confirmation content of the action button.
+     */
+    confirmationContent: ReactNode;
+}
+/**
+ * The hook to compute the action buttons.
+ *
+ * @param buttons - The action buttons.
+ * @param context - The context.
+ * @returns The computed action buttons.
+ */
+export declare function useComputedActionButtons<T>(buttons: Array<ActionButton<T>>, context: T): ComputedActionButton<T>[];

package/dist/use-computed-action-buttons.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{isFunction as o,defaultMessageTitle as i}from"@vef-framework/shared";import{useMemo as n}from"react";function r(r,t){return n((()=>r.filter((i=>{const{show:n}=i;return o(n)?n(t):n??!0})).map((n=>{const{disabled:r,requireConfirmation:e,confirmationMode:a,confirmationTitle:m,confirmationContent:f,...c}=n,l={...c,disabled:o(r)?r(t):r??!1,requireConfirmation:o(e)?e(t):e??!1,confirmationMode:o(a)?a(t):a??"simple",confirmationTitle:o(m)?m(t):m??i,confirmationContent:o(f)?f(t):f??`确定要${c.label}吗？`};return l.requireConfirmation&&!l.confirmationMode&&(l.confirmationMode="simple"),l.requireConfirmation&&!l.confirmationTitle&&(l.confirmationTitle=i),l.requireConfirmation&&!l.confirmationContent&&(l.confirmationContent=`确定要${l.label}吗？`),l}))),[r,t])}export{r as useComputedActionButtons};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-computed-options.d.ts

@@ -0,0 +1,91 @@
+import type { DataOption, DataOptionConfig, IdValue, Mapper, MaybePromise, ObjectType, PureDataOption, QueryApi, QueryConfig, QueryParamsWithKeyword, QueryParamsWithValues, StringKey } from "@vef-framework/shared";
+import type { EmptyObject } from "@vef-framework/shared";
+/**
+ * The config of the useComputedOptions hook.
+ */
+export interface UseComputedOptionsConfig<T extends DataOption<T> = PureDataOption, P extends ObjectType = EmptyObject, R = T[], KK extends string = "keyword", VK extends string = "ids", FP extends ObjectType = EmptyObject> extends QueryConfig<T[], QueryParamsWithKeyword<P, KK>, R>, DataOptionConfig<StringKey<T>> {
+    /**
+     * Whether to allow filter.
+     */
+    filterable?: boolean;
+    /**
+     * Whether to filter from remote.
+     */
+    filterFromRemote?: boolean;
+    /**
+     * The parameter name of keyword.
+     * Only works when `filterFromRemote` is true.
+     */
+    keywordKey?: KK;
+    /**
+     * The parameter name of values.
+     */
+    valuesKey?: VK;
+    /**
+     * The API of fallback options.
+     */
+    fallbackOptionsApi?: Readonly<QueryApi<QueryParamsWithValues<FP>, T[]>>;
+    /**
+     * The API params of fallback options.
+     */
+    fallbackOptionsApiParams?: FP;
+    /**
+     * The function to resolve fallback options.
+     */
+    resolveFallbackOptions?: Mapper<IdValue[], MaybePromise<T[]>>;
+    /**
+     * Whether the options are grouped.
+     */
+    isGrouped?: boolean;
+    /**
+     * The selected option values.
+     */
+    selectedOptionValues?: IdValue[];
+}
+/**
+ * The hook to compute the options.
+ */
+export declare function useComputedOptions<T extends DataOption<T> = PureDataOption, P extends ObjectType = EmptyObject, R = T[], KK extends string = "keyword", VK extends string = "ids", FP extends ObjectType = EmptyObject>({ labelField, valueField, descriptionField, childrenField, disabledField, defaultToFirst, filterable, filterFromRemote, keywordKey, valuesKey, fallbackOptionsApi, fallbackOptionsApiParams, resolveFallbackOptions, isGrouped, selectedOptionValues, apiParams, ...queryConfig }: UseComputedOptionsConfig<T, P, R, KK, VK, FP>): {
+    onFilterKeywordChange: import("radashi").DebounceFunction<[keyword: string]> | undefined;
+    isLoading: boolean;
+    normalizedOptions: ({
+        [x: string]: any;
+        description?: import("react").ReactNode;
+        labelText?: string | undefined;
+        descriptionText?: string | undefined;
+        label: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null;
+        value: IdValue;
+        disabled: boolean;
+    } & {
+        children?: import("@vef-framework/shared").NormalizedDataOption<PureDataOption>[] | undefined;
+        labelPinyin?: string;
+        descriptionPinyin?: string;
+    } & T)[] | ({
+        [x: string]: any;
+        description?: import("react").ReactNode;
+        labelText?: string | undefined;
+        descriptionText?: string | undefined;
+        label: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null;
+        value: IdValue;
+        disabled: boolean;
+    } & {
+        children?: import("@vef-framework/shared").NormalizedDataOption<PureDataOption>[] | undefined;
+        labelPinyin?: string;
+        descriptionPinyin?: string;
+    } & T)[];
+    defaultOption: ({
+        [x: string]: any;
+        description?: import("react").ReactNode;
+        labelText?: string | undefined;
+        descriptionText?: string | undefined;
+        label: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null;
+        value: IdValue;
+        disabled: boolean;
+    } & {
+        children?: import("@vef-framework/shared").NormalizedDataOption<PureDataOption>[] | undefined;
+        labelPinyin?: string;
+        descriptionPinyin?: string;
+    } & T) | undefined;
+    fallbackOptions: T[] | undefined;
+    isFallbackOptionsLoading: boolean;
+};

package/dist/use-computed-options.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useDataQuery as e}from"./use-data-query.js";import{useFallbackOptions as i}from"./use-fallback-options.js";import{useNormalizedDataOptions as a}from"./use-normalized-options.js";import{useRemoteFilter as l}from"./use-remote-filter.js";function o({labelField:o,valueField:s,descriptionField:t,childrenField:d,disabledField:r,defaultToFirst:n,filterable:p=!1,filterFromRemote:u=!1,keywordKey:c="keyword",valuesKey:f="ids",fallbackOptionsApi:m,fallbackOptionsApiParams:F,resolveFallbackOptions:b,isGrouped:O=!1,selectedOptionValues:k,apiParams:y,...v}){const[g,P]=l(p&&u,y,c),{data:j,isLoading:A}=e({apiParams:g,...v}),[K,L,h]=a(j??[],{labelField:o,valueField:s,descriptionField:t,childrenField:d,disabledField:r,defaultToFirst:n},{isGrouped:O,parsePinyin:p&&!u,selectedOptionValues:k}),{data:w,isLoading:z}=i(L,{fallbackOptionsApi:m??v.api,fallbackOptionsApiParams:F,valuesKey:f,resolveFallbackOptions:b});return{onFilterKeywordChange:P,isLoading:A,normalizedOptions:K,defaultOption:h,fallbackOptions:w,isFallbackOptionsLoading:z}}export{o as useComputedOptions};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-context-disabled.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The hook to get the disabled context.
+ */
+export declare function useContextDisabled(): boolean;
+declare const DisabledContextProvider: import("react").Provider<boolean>;
+export { DisabledContextProvider, };

package/dist/use-context-disabled.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{createContext as r,useContext as o}from"react";const t=r(!1);function n(){return o(t)}const c=t.Provider;export{c as DisabledContextProvider,n as useContextDisabled};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-data-query.d.ts

@@ -0,0 +1,10 @@
+import type { AnyValue, ObjectType, QueryConfig, QueryResult } from "@vef-framework/shared";
+import type { EmptyObject } from "@vef-framework/shared";
+/**
+ * A hook that fetches data from the API, data dictionary or a stub created from data.
+ *
+ * @param config - The query config
+ * @param config.onFetched - The callback function that is called when the data is fetched
+ * @returns The query result
+ */
+export declare function useDataQuery<D = AnyValue, P extends ObjectType = EmptyObject, R = D>({ onFetched, ...config }: QueryConfig<D, P, R>): QueryResult<D>;

package/dist/use-data-query.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useApiContext as e}from"@vef-framework/core";import{useUnmount as a}from"ahooks";import{isNullish as t,isFunction as r}from"@vef-framework/shared";import{useMemo as i}from"react";function o({onFetched:o,...s}){const{useApiQuery:p,stubQueryApi:c,dataDictionaryQueryApi:u}=e(),[n,m,l]=function({data:e,dataDictionaryKey:a,api:r,apiParams:o,apiEnabled:s,staleTime:p,keepPreviousData:c,placeholderData:u},n,m){return i((()=>t(e)?t(a)?t(r)?[n,[],{keepPreviousData:!0,initialData:[]}]:[r,o,{enabled:s??!0,staleTime:p,keepPreviousData:c,placeholderData:u}]:[m,{...o,key:a},{enabled:s??!0,staleTime:p,keepPreviousData:c,placeholderData:u}]:[n,e,{keepPreviousData:!0,initialData:e}]),[e,a,r,n,m,o,s,p,c,u])}(s,c,u),d=p(n,m,l);a((()=>{Object.is(n,c)&&c.removeQueries(m)}));const{isSuccess:D,data:f,...k}=d,v=i((()=>D&&r(o)?o(f):f),[D,f,o]);return{...k,isSuccess:D,data:v}}export{o as useDataQuery};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-deep-compare-callback.d.ts

@@ -0,0 +1,10 @@
+import type { AnyFunction } from "@vef-framework/shared";
+import { type DependencyList } from "react";
+/**
+ * A hook that memoizes a callback based on deep comparison of its dependencies.
+ *
+ * @param callback The callback to be memoized.
+ * @param dependencies The dependencies array.
+ * @returns The memoized callback.
+ */
+export declare function useDeepCompareCallback<T extends AnyFunction>(callback: T, dependencies: DependencyList): T;

package/dist/use-deep-compare-callback.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useCallback as o}from"react";import{useDeepCompareMemo as r}from"./use-deep-compare-memo.js";function e(e,m){const t=r((()=>m),m);return o(e,t)}export{e as useDeepCompareCallback};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-deep-compare-memo.d.ts

@@ -0,0 +1,10 @@
+import type { Provider } from "@vef-framework/shared";
+import { type DependencyList } from "react";
+/**
+ * A hook that memoizes a value based on deep comparison of its dependencies.
+ *
+ * @param factory The factory function that returns the value to be memoized.
+ * @param dependencies The dependencies array.
+ * @returns The memoized value.
+ */
+export declare function useDeepCompareMemo<T>(factory: Provider<T>, dependencies: DependencyList): T;

package/dist/use-deep-compare-memo.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{isEqual as r}from"@vef-framework/shared";import{useRef as e,useMemo as t}from"react";function n(n,o){const c=e(),u=e(0);var a,f;return void 0!==c.current&&(a=o,f=c.current,a.length===f.length&&a.every(((e,t)=>r(e,f[t]))))||(u.current+=1),c.current=o,t(n,[u.current])}export{n as useDeepCompareMemo};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-fallback-options.d.ts

@@ -0,0 +1,35 @@
+import type { Api, DataOption, IdValue, Mapper, MaybePromise, ObjectType, PureDataOption, QueryParamsWithValues } from "@vef-framework/shared";
+import type { EmptyObject } from "@vef-framework/shared";
+/**
+ * The config of the use fallback options hook.
+ */
+export interface UseFallbackOptionsConfig<T extends DataOption<T> = PureDataOption, P extends ObjectType = EmptyObject, K extends string = "ids"> {
+    /**
+     * The API of fallback options.
+     */
+    fallbackOptionsApi?: Api<QueryParamsWithValues<P, K>, T[]>;
+    /**
+     * The API params of fallback options.
+     */
+    fallbackOptionsApiParams?: P;
+    /**
+     * The parameter name of values.
+     */
+    valuesKey?: K;
+    /**
+     * The function to resolve fallback options.
+     */
+    resolveFallbackOptions?: Mapper<IdValue[], MaybePromise<T[]>>;
+}
+/**
+ * The hook to resolve fallback options.
+ *
+ * @param missingOptionValues - The missing option values.
+ * @param config - The config of the hook.
+ * @param config.fallbackOptionsApi - The API of fallback options.
+ * @param config.fallbackOptionsApiParams - The API params of fallback options.
+ * @param config.valuesKey - The parameter key of values.
+ * @param config.resolveFallbackOptions - The function to resolve fallback options.
+ * @returns The API query result.
+ */
+export declare function useFallbackOptions<T extends DataOption<T> = PureDataOption, P extends ObjectType = EmptyObject, K extends string = "ids">(missingOptionValues: IdValue[], { fallbackOptionsApi, fallbackOptionsApiParams, valuesKey, resolveFallbackOptions, }: UseFallbackOptionsConfig<T, P, K>): import("@vef-framework/shared").QueryResult<T[]>;

package/dist/use-fallback-options.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useApiContext as e}from"@vef-framework/core";import{useUnmount as a}from"ahooks";import{isFunction as r}from"@vef-framework/shared";import{useId as i,useMemo as o}from"react";function s(s,{fallbackOptionsApi:t,fallbackOptionsApiParams:p,valuesKey:l,resolveFallbackOptions:n}){const{useApiQuery:u,stubQueryApi:c,asyncFnQueryApi:f}=e(),[k,m,v]=function(e,{fallbackOptionsApi:a,fallbackOptionsApiParams:s,valuesKey:t,resolveFallbackOptions:p},l,n){const u=i();return o((()=>{if(r(p))return[n,{key:u,args:[e],fn:p},{keepPreviousData:!0}];if(a){const r={...s,[t??"ids"]:e};return[a,r,{keepPreviousData:!0}]}return[l,[],{keepPreviousData:!0,initialData:[]}]}),[p,a,l,u,e,n,s,t])}(s,{fallbackOptionsApi:t,fallbackOptionsApiParams:p,valuesKey:l,resolveFallbackOptions:n},c,f),b=u(k,m,v);return a((()=>{Object.is(k,c)&&c.removeQueries(m),Object.is(k,f)&&f.removeQueries(m)})),b}export{s as useFallbackOptions};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-gap-size-normalizer.d.ts

@@ -0,0 +1,8 @@
+import type { GapSize } from "@vef-framework/shared";
+import { type CSSProperties } from "react";
+/**
+ * The hook to normalize the gap size.
+ *
+ * @returns The function to normalize the gap size.
+ */
+export declare function useGapSizeNormalizer<T extends CSSProperties["gap"]>(): (gap: GapSize<T>) => number | (T & Record<never, never>);

package/dist/use-gap-size-normalizer.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useCallback as d}from"react";import{useThemeTokens as n}from"./use-theme-tokens.js";function e(){const{paddingXS:e,paddingSM:i,padding:t,paddingMD:r,paddingLG:a}=n();return d((d=>"tiny"===d?e:"small"===d?i:"medium"===d?t:"large"===d?r:"huge"===d?a:d),[e,i,t,r,a])}export{e as useGapSizeNormalizer};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-normalized-gap-size.d.ts

@@ -0,0 +1,9 @@
+import type { GapSize } from "@vef-framework/shared";
+import type { CSSProperties } from "react";
+/**
+ * The hook to normalize the gap size.
+ *
+ * @param gap - The gap size.
+ * @returns The normalized gap size.
+ */
+export declare function useNormalizedGapSize<T extends CSSProperties["gap"]>(gap: GapSize<T>): number | (T & Record<never, never>);

package/dist/use-normalized-gap-size.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useGapSizeNormalizer as r}from"./use-gap-size-normalizer.js";function e(e){return r()(e)}export{e as useNormalizedGapSize};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-normalized-menu-items.d.ts

@@ -0,0 +1,9 @@
+import type { MenuItem } from "@vef-framework/shared";
+import type { ItemType } from "antd/es/menu/interface";
+/**
+ * Normalize the menu items to the type of antd.
+ *
+ * @param items - The menu items.
+ * @returns The normalized menu items.
+ */
+export declare function useNormalizedMenuItems(items: MenuItem[]): ItemType[];

package/dist/use-normalized-menu-items.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useMemo as e}from"react";function l(e){return"item"===e.type?{type:"item",key:e.key,label:e.label,disabled:e.disabled,icon:e.icon,extra:e.extra}:"subMenu"===e.type?{type:"submenu",key:e.key,label:e.label,disabled:e.disabled,icon:e.icon,children:e.children.map(l)}:"group"===e.type?{type:"group",key:e.key,label:e.label,children:e.children.map(l)}:{type:"divider",key:e.key}}function i(i){return e((()=>i.map(l)),[i])}export{i as useNormalizedMenuItems};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-normalized-options.d.ts

@@ -0,0 +1,34 @@
+import type { Except } from "@vef-framework/shared";
+import { type DataOption, type DataOptionConfig, type IdValue, type NormalizedDataOption, type PureDataOption, type StringKey } from "@vef-framework/shared";
+/**
+ * The config of the useNormalizedDataOptions hook.
+ */
+export interface UseNormalizedDataOptionsConfig {
+    /**
+     * Whether the options is a tree.
+     */
+    isTree?: boolean;
+    /**
+     * Whether the options are grouped.
+     */
+    isGrouped?: boolean;
+    /**
+     * Whether to parse the pinyin of the options's label and description.
+     */
+    parsePinyin?: boolean;
+    /**
+     * The values of the selected options used to find the missing options.
+     */
+    selectedOptionValues?: IdValue[];
+}
+/**
+ * The return type of the useNormalizedDataOptions hook.
+ */
+type UseNormalizedDataOptionsReturn<T extends DataOption<T>, F extends boolean> = F extends true ? [Array<NormalizedDataOption & T>, IdValue[], NormalizedDataOption & T | undefined] : [Array<NormalizedDataOption & T>, IdValue[]];
+/**
+ * The hook to normalize the data options.
+ */
+export declare function useNormalizedDataOptions<T extends DataOption<T> = PureDataOption, F extends boolean = false>(options: T[], { labelField, valueField, childrenField, descriptionField, disabledField, defaultToFirst, }: Except<DataOptionConfig<StringKey<T>>, "defaultToFirst"> & {
+    defaultToFirst?: F;
+}, { isTree, isGrouped, parsePinyin, selectedOptionValues, }?: UseNormalizedDataOptionsConfig): UseNormalizedDataOptionsReturn<T, F>;
+export {};

package/dist/use-normalized-options.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{isNullish as e,VefError as i,isString as r,parsePinyinFirstLetter as n,isArray as l}from"@vef-framework/shared";import{useMemo as t}from"react";function o(o,{labelField:d="label",valueField:a="value",childrenField:s="children",descriptionField:h="description",disabledField:c="disabled",defaultToFirst:u=!1},{isTree:f=!1,isGrouped:p=!1,parsePinyin:b=!1,selectedOptionValues:v=[]}={}){return t((()=>{const t=new Set(v),w=!f&&p,m=(o,u=!1)=>{const f=o[d];if(e(f)){if("label"===d)throw new i(-10001,"The label value of the option is required.");throw new i(-10001,`The label value pointed by '${d}' of the option is required.`)}const p=o[a];if(e(p)){if("value"===a)throw new i(-10002,"The value value of the option is required.");throw new i(-10002,`The value value pointed by '${a}' of the option is required.`)}const v=o[s],T=o[h],y=o[c]??!1,F={...o,label:f,value:p,children:v,description:T,disabled:y};if(b){const{labelText:e,descriptionText:i}=F;(r(f)||r(e))&&(F.labelPinyin=n(r(f)?f:e).join("")),(r(T)||r(i))&&(F.descriptionPinyin=n(r(T)?T:i).join(""))}return u&&w||!t.has(p)||t.delete(p),l(F.children)&&(F.children=F.children.map((e=>m(e)))),F},T=Array.from(t),y=o.map((e=>m(e,!0)));if(!u)return[y,T];if(w){const e=y.find((e=>l(e.children)&&e.children.length>0));return[y,T,e?.children?.[0]]}return[y,T,y[0]]}),[s,u,h,c,p,f,d,o,b,v,a])}export{o as useNormalizedDataOptions};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-option-filter.d.ts

@@ -0,0 +1,8 @@
+import type { DataOption, NormalizedDataOption, PureDataOption } from "@vef-framework/shared";
+/**
+ * The hook to filter the options.
+ *
+ * @param filterable - Whether to allow filtering.
+ * @param filterFromRemote - Whether to filter from remote.
+ */
+export declare function useOptionFilter<T extends DataOption<T> = PureDataOption>(filterable: boolean, filterFromRemote: boolean): false | ((filterValue: string, option: NormalizedDataOption<T>) => boolean) | undefined;

package/dist/use-option-filter.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{isString as e}from"@vef-framework/shared";import{useMemo as i}from"react";function n(n,l){return i((()=>{if(n)return!l&&((i,n)=>(e(n.label)&&n.label.includes(i)||e(n.labelText)&&n.labelText.includes(i)||n.labelPinyin?.includes(i)||n.value.includes(i)||e(n.description)&&n.description.includes(i)||e(n.descriptionText)&&n.descriptionText.includes(i)||n.descriptionPinyin?.includes(i))??!1)}),[n,l])}export{n as useOptionFilter};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-remote-filter.d.ts

@@ -0,0 +1,10 @@
+import type { ObjectType, QueryParamsWithKeyword } from "@vef-framework/shared";
+import type { EmptyObject } from "@vef-framework/shared";
+/**
+ * The hook to handle the remote filter.
+ *
+ * @param enabled - Whether to enable the remote filter.
+ * @param apiParams - The API params.
+ * @param keywordKey - The key of the keyword parameter.
+ */
+export declare function useRemoteFilter<P extends ObjectType = EmptyObject, K extends string = "keyword">(enabled: boolean, apiParams?: QueryParamsWithKeyword<P, K>, keywordKey?: K): readonly [QueryParamsWithKeyword<P, K> | undefined, import("radashi").DebounceFunction<[keyword: string]> | undefined];

package/dist/use-remote-filter.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{trim as r,debounce as e}from"@vef-framework/shared";import{useState as t,useMemo as o}from"react";function n(n,f,i="keyword"){const[m,u]=t();return[o((()=>{if(!n)return f;const e={...f},t=r(m);return t&&(e[i]=t),e}),[n,f,m,i]),o((()=>{if(n)return e({delay:500},(r=>{u(r)}))}),[n])]}export{n as useRemoteFilter};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-shallow-compare-callback.d.ts

@@ -0,0 +1,10 @@
+import type { AnyFunction } from "@vef-framework/shared";
+import { type DependencyList } from "react";
+/**
+ * The hook to memoize a callback based on shallow comparison of dependencies.
+ *
+ * @param callback - The callback to be memoized.
+ * @param dependencies - The dependencies array.
+ * @returns The memoized callback.
+ */
+export declare function useShallowCompareCallback<T extends AnyFunction>(callback: T, dependencies: DependencyList): T;

package/dist/use-shallow-compare-callback.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useCallback as o}from"react";import{useShallowCompareMemo as r}from"./use-shallow-compare-memo.js";function m(m,t){const e=r((()=>t),t);return o(m,e)}export{m as useShallowCompareCallback};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-shallow-compare-memo.d.ts

@@ -0,0 +1,10 @@
+import type { Provider } from "@vef-framework/shared";
+import { type DependencyList } from "react";
+/**
+ * The hook to memoize a value based on shallow comparison of dependencies.
+ *
+ * @param factory - The factory function to create the value.
+ * @param dependencies - The dependencies array.
+ * @returns The memoized value.
+ */
+export declare function useShallowCompareMemo<T>(factory: Provider<T>, dependencies: DependencyList): T;

package/dist/use-shallow-compare-memo.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useRef as r,useMemo as t}from"react";import{shallow as e}from"zustand/shallow";function n(n,o){const c=r(),u=r(0);var a,i;return void 0!==c.current&&(a=o,i=c.current,a.length===i.length&&a.every(((r,t)=>e(r,i[t]))))||(u.current+=1),c.current=o,t(n,[u.current])}export{n as useShallowCompareMemo};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-singleton.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The hook to create a singleton.
+ *
+ * @param factory - The factory function to create the singleton.
+ * @returns The singleton.
+ */
+export declare function useSingleton<T>(factory: () => NonNullable<T>): NonNullable<T>;

package/dist/use-singleton.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{isNullish as r}from"@vef-framework/shared";import{useRef as t}from"react";function e(e){const o=t();return r(o.current)&&(o.current=e()),o.current}export{e as useSingleton};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-theme-tokens.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Get theme token
+ *
+ * @returns Theme token
+ */
+export declare function useThemeTokens(): import("antd").GlobalToken;

package/dist/use-theme-tokens.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{theme as n}from"antd";const{useToken:o}=n;function t(){const{token:n}=o();return n}export{t as useThemeTokens};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/dist/use-window-size.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The size of the window.
+ */
+export interface WindowSize {
+    /**
+     * The width of the window.
+     */
+    width: number;
+    /**
+     * The height of the window.
+     */
+    height: number;
+}
+/**
+ * The hook to get the size of the window.
+ */
+export declare function useWindowSize(): WindowSize;

package/dist/use-window-size.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useRafState as i,useEventListener as n}from"ahooks";function t(){const[t,e]=i((()=>({width:window.innerWidth,height:window.innerHeight})));return n("resize",(()=>{e({width:window.innerWidth,height:window.innerHeight})})),t}export{t as useWindowSize};
+/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@vef-framework/hooks",
+  "type": "module",
+  "version": "1.0.5",
+  "private": false,
+  "description": "Hooks fundamental to the VEF framework",
+  "author": "Venus",
+  "keywords": [
+    "vef",
+    "vef-framework",
+    "vef-hooks"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "pnpm clean && tsx build.ts",
+    "clean": "rimraf dist"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "zustand": "5.0.1"
+  },
+  "dependencies": {
+    "@emotion/cache": "11.13.5",
+    "@emotion/react": "11.13.5",
+    "@emotion/styled": "11.13.5",
+    "antd": "5.22.3",
+    "tslib": "2.8.1",
+    "@vef-framework/core": "1.0.5",
+    "@vef-framework/shared": "1.0.5",
+    "ahooks": "3.8.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}