@vef-framework/components 2.0.11 → 2.1.0

package/dist/types/_base/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './breakpoints';
 export * from './common';
 export * from './css-vars';
+export * from './theme';

package/dist/types/_base/constants/theme.d.ts

@@ -1,9 +1,8 @@
+export interface ThemeColorTokens {
+    colors: Record<string, string | number>;
+}
 export interface GlobalThemeTokens {
-    light: {
-        colors: Record<string, string | number>;
-    };
-    dark: {
-        colors: Record<string, string | number>;
-    };
+    light: ThemeColorTokens;
+    dark: ThemeColorTokens;
 }
 export declare const globalThemeTokens: GlobalThemeTokens;

package/dist/types/_base/helpers/breakpoints.d.ts

@@ -2,9 +2,6 @@ import { MaybeUndefined } from '@vef-framework/shared';
 import { Breakpoint, Length } from '../types';
 /**
  * Resolves a breakpoint value from a partial breakpoints config.
- *
- * @param breakpointValues - Partial config with breakpoint values
- * @param breakpoint - The current breakpoint to resolve
- * @returns The resolved value, or undefined if no value can be found
+ * Falls back to the nearest defined breakpoint value (smaller first, then larger).
  */
 export declare function resolveBreakpointValue(breakpointValues: Partial<Record<Breakpoint, Length>>, breakpoint: Breakpoint): MaybeUndefined<Length>;

package/dist/types/_base/helpers/color.d.ts

@@ -1,15 +1,3 @@
 import { PresetColor, SemanticColor } from '../types';
-/**
- * Check if the given color is a preset color
- *
- * @param color - The color to check
- * @returns True if the color is a preset color, false otherwise
- */
 export declare function isPresetColor(color: string): color is PresetColor;
-/**
- * Check if the given color is a semantic color
- *
- * @param color - The color to check
- * @returns True if the color is a semantic color, false otherwise
- */
 export declare function isSemanticColor(color: string): color is SemanticColor;

package/dist/types/_base/helpers/common.d.ts

@@ -1,30 +1,8 @@
 import { MaybeUndefined } from '@vef-framework/shared';
 import { Length, Size } from '../types';
-/**
- * Get the spacing value
- *
- * @param value - The spacing value
- * @returns The spacing value
- */
 export declare function getSpacingValue(value: Length): string;
 /**
- * Maps the VEF Framework Standard Size type to Ant Design size type.
- *
- * This function is necessary for compatibility with Ant Design components,
- * which use "middle" instead of "medium" for the medium size value.
- * This is not a standard naming convention - "medium" is more widely used
- * in the industry.
- *
- * NOTE: This function can be deprecated once Ant Design updates their
- * Size type to use standard naming conventions (i.e., "medium" instead of "middle").
- *
- * @param size - The VEF Framework size value
- * @returns The corresponding Ant Design size value
- *
- * @example
- * ```tsx
- * const antdSize = mapSize("medium"); // Returns "middle"
- * const antdSize = mapSize("small");  // Returns "small"
- * ```
+ * Maps VEF Framework size to Ant Design size.
+ * Ant Design uses "middle" instead of the standard "medium".
  */
 export declare function mapSize(size?: Size): MaybeUndefined<"small" | "middle" | "large">;

package/dist/types/_base/helpers/message.d.ts

@@ -1,38 +1,11 @@
 import { ReactNode } from 'react';
-/**
- * Show a success message
- *
- * @param content - The content of the message
- */
 export declare function showSuccessMessage(content: ReactNode): void;
-/**
- * Show an info message
- *
- * @param content - The content of the message
- */
 export declare function showInfoMessage(content: ReactNode): void;
-/**
- * Show a warning message
- *
- * @param content - The content of the message
- */
 export declare function showWarningMessage(content: ReactNode): void;
-/**
- * Show an error message
- *
- * @param content - The content of the message
- */
 export declare function showErrorMessage(content: ReactNode): void;
-/**
- * Show a loading message
- *
- * @param content - The content of the message
- */
-export declare function showLoadingMessage(content: ReactNode): {
+export interface LoadingMessageHandle {
     close: () => void;
-    update: (content: ReactNode) => undefined;
-};
-/**
- * Close all messages
- */
+    update: (content: ReactNode) => void;
+}
+export declare function showLoadingMessage(content: ReactNode): LoadingMessageHandle;
 export declare function closeAllMessages(): void;

package/dist/types/_base/helpers/modal.d.ts

@@ -2,107 +2,30 @@ import { Awaitable, Except } from '@vef-framework/shared';
 import { ButtonProps } from 'antd';
 import { ReactNode } from 'react';
 import { Length } from '../types';
-/**
- * The options for the confirm modal.
- */
 export interface ConfirmOptions {
-    /**
-     * The title of the confirm modal.
-     */
     title?: ReactNode;
-    /**
-     * The text of the OK button.
-     */
     okText?: ReactNode;
-    /**
-     * The text of the cancel button.
-     */
     cancelText?: ReactNode;
-    /**
-     * The props of the OK button.
-     */
     okButtonProps?: ButtonProps;
-    /**
-     * The props of the cancel button.
-     */
     cancelButtonProps?: ButtonProps;
-    /**
-     * The width of the modal.
-     */
     width?: Length;
-    /**
-     * Whether the modal is closable.
-     */
     closable?: boolean;
-    /**
-     * The callback function when the OK button is clicked.
-     */
     onOk?: () => Awaitable<void>;
-    /**
-     * The callback function when the cancel button is clicked.
-     */
     onCancel?: () => Awaitable<void>;
-    /**
-     * The callback function after the confirm dialog is opened.
-     */
     onAfterOpen?: () => void;
-    /**
-     * The callback function after the confirm dialog is closed.
-     */
     onAfterClose?: () => void;
 }
-/**
- * The options for the alert modal.
- */
-export interface AlertOptions extends Except<ConfirmOptions, "cancelText" | "cancelButtonProps"> {
-}
-/**
- * Show a confirm modal.
- *
- * @param content - The content of the modal.
- * @param options - The options of the modal.
- */
-export declare function showConfirm(content: ReactNode, options?: ConfirmOptions): {
+export type AlertOptions = Except<ConfirmOptions, "cancelText" | "cancelButtonProps">;
+export interface ModalHandle {
     close: () => void;
     update: (content: ReactNode, options?: ConfirmOptions) => void;
-};
-/**
- * Show a success alert modal.
- *
- * @param content - The content of the modal.
- * @param options - The options of the modal.
- */
-export declare function showSuccessAlert(content: ReactNode, options?: AlertOptions): {
-    close: () => void;
-    update: (content: ReactNode, options?: AlertOptions) => void;
-};
-/**
- * Show an info alert modal.
- *
- * @param content - The content of the modal.
- * @param options - The options of the modal.
- */
-export declare function showInfoAlert(content: ReactNode, options?: AlertOptions): {
-    close: () => void;
-    update: (content: ReactNode, options?: AlertOptions) => void;
-};
-/**
- * Show a warning alert modal.
- *
- * @param content - The content of the modal.
- * @param options - The options of the modal.
- */
-export declare function showWarningAlert(content: ReactNode, options?: AlertOptions): {
-    close: () => void;
-    update: (content: ReactNode, options?: AlertOptions) => void;
-};
-/**
- * Show an error alert modal.
- *
- * @param content - The content of the modal.
- * @param options - The options of the modal.
- */
-export declare function showErrorAlert(content: ReactNode, options?: AlertOptions): {
+}
+export interface AlertHandle {
     close: () => void;
     update: (content: ReactNode, options?: AlertOptions) => void;
-};
+}
+export declare function showConfirm(content: ReactNode, options?: ConfirmOptions): ModalHandle;
+export declare function showSuccessAlert(content: ReactNode, options?: AlertOptions): AlertHandle;
+export declare function showInfoAlert(content: ReactNode, options?: AlertOptions): AlertHandle;
+export declare function showWarningAlert(content: ReactNode, options?: AlertOptions): AlertHandle;
+export declare function showErrorAlert(content: ReactNode, options?: AlertOptions): AlertHandle;

package/dist/types/_base/helpers/notification.d.ts

@@ -1,74 +1,17 @@
 import { ReactNode } from 'react';
-/**
- * The options for the notification.
- */
 export interface NotificationOptions {
-    /**
-     * The title of the notification.
-     */
     title?: ReactNode;
-    /**
-     * The duration of the notification.
-     */
     duration?: number;
-    /**
-     * The actions of the notification.
-     */
     actions?: ReactNode;
-    /**
-     * Whether the notification is closable.
-     */
     closable?: boolean;
-    /**
-     * The icon of the notification.
-     */
     icon?: ReactNode;
 }
-/**
- * Show a success notification
- *
- * @param content - The content of the notification
- * @param options - The options of the notification
- * @returns An object with close and update methods
- */
-export declare function showSuccessNotification(content: ReactNode, options?: NotificationOptions): {
+export interface NotificationHandle {
     close: () => void;
     update: (content: ReactNode, options?: NotificationOptions) => void;
-};
-/**
- * Show an info notification
- *
- * @param content - The content of the notification
- * @param options - The options of the notification
- * @returns An object with close and update methods
- */
-export declare function showInfoNotification(content: ReactNode, options?: NotificationOptions): {
-    close: () => void;
-    update: (content: ReactNode, options?: NotificationOptions) => void;
-};
-/**
- * Show a warning notification
- *
- * @param content - The content of the notification
- * @param options - The options of the notification
- * @returns An object with close and update methods
- */
-export declare function showWarningNotification(content: ReactNode, options?: NotificationOptions): {
-    close: () => void;
-    update: (content: ReactNode, options?: NotificationOptions) => void;
-};
-/**
- * Show an error notification
- *
- * @param content - The content of the notification
- * @param options - The options of the notification
- * @returns An object with close and update methods
- */
-export declare function showErrorNotification(content: ReactNode, options?: NotificationOptions): {
-    close: () => void;
-    update: (content: ReactNode, options?: NotificationOptions) => void;
-};
-/**
- * Close all notifications
- */
+}
+export declare function showSuccessNotification(content: ReactNode, options?: NotificationOptions): NotificationHandle;
+export declare function showInfoNotification(content: ReactNode, options?: NotificationOptions): NotificationHandle;
+export declare function showWarningNotification(content: ReactNode, options?: NotificationOptions): NotificationHandle;
+export declare function showErrorNotification(content: ReactNode, options?: NotificationOptions): NotificationHandle;
 export declare function closeAllNotifications(): void;

package/dist/types/_base/helpers/props.d.ts

@@ -1,18 +1,5 @@
-export type FilterProps<T extends Record<string, any>> = {
+export type FilteredProps<T extends Record<string, unknown>> = {
     [K in keyof T]-?: T[K] extends undefined ? never : T[K];
 };
-/**
- * Filters out undefined props
- *
- * @param props The props to filter
- * @returns The filtered props
- */
-export declare function filterProps<T extends Record<string, any>>(props: T): FilterProps<T>;
-/**
- * Merges the props with the default props
- *
- * @param props The props to merge
- * @param defaultProps The default props
- * @returns The merged props
- */
-export declare function mergeProps<TProps extends Record<string, any>, TDefault extends TProps>(props: TProps, defaultProps: TDefault): TDefault & FilterProps<TProps>;
+export declare function filterProps<T extends Record<string, unknown>>(props: T): FilteredProps<T>;
+export declare function mergeProps<TProps extends Record<string, unknown>, TDefault extends TProps>(props: TProps, defaultProps: TDefault): TDefault & FilteredProps<TProps>;

package/dist/types/_base/helpers/react.d.ts

@@ -1,8 +1,2 @@
 import { FragmentProps, ReactElement, ReactNode } from 'react';
-/**
- * Check if the node is a Fragment
- *
- * @param node The node to check
- * @returns Whether the node is a Fragment
- */
 export declare function isFragment(node: ReactNode): node is ReactElement<FragmentProps>;

package/dist/types/_base/hooks/use-theme-tokens.d.ts

@@ -1,7 +1,2 @@
 import { GlobalToken } from 'antd';
-/**
- * Use the theme tokens
- *
- * @returns The theme tokens
- */
 export declare function useThemeTokens(): GlobalToken;

package/dist/types/_base/index.d.ts

@@ -2,5 +2,4 @@ export * from './constants';
 export * from './helpers';
 export * from './hooks';
 export * from './styles';
-export * from './styles';
 export * from './types';

package/dist/types/_base/styles/common.d.ts

@@ -1,3 +1,4 @@
-import { SerializedStyles } from '@emotion/serialize';
+import { SerializedStyles } from '@emotion/react';
 export declare const fullWidth: SerializedStyles;
 export declare const fullHeight: SerializedStyles;
+export declare const fullSize: SerializedStyles;

package/dist/types/_base/types/common.d.ts

@@ -1,104 +1,41 @@
 import { PermissionCheckMode } from '@vef-framework/core';
-import { Awaitable, EmptyObject, Expand, If, IsNever, LiteralUnion } from '@vef-framework/shared';
+import { AnyObject, Awaitable, EmptyObject, If, IsNever, LiteralUnion, Simplify } from '@vef-framework/shared';
 import { ReactNode, Ref } from 'react';
 import { ButtonColor, ButtonVariant } from '../../button';
-import { fullSizes, presetColors, semanticColors, semanticScenes, sizes } from '../constants';
-/**
- * The preset color
- */
+import { colors, fullSizes, presetColors, semanticColors, semanticScenes, sizes } from '../constants';
 export type PresetColor = (typeof presetColors)[number];
-/**
- * The semantic scene
- */
 export type SemanticScene = (typeof semanticScenes)[number];
-/**
- * The semantic color
- */
 export type SemanticColor = (typeof semanticColors)[number];
-/**
- * The color
- */
-export type Color = Expand<PresetColor | SemanticColor>;
-export type Size = typeof sizes[number];
-export type FullSize = typeof fullSizes[number];
+export type Color = Simplify<PresetColor | SemanticColor>;
+export type Colors = typeof colors;
+export type Size = (typeof sizes)[number];
+export type FullSize = (typeof fullSizes)[number];
 export type Orientation = "horizontal" | "vertical";
 export type ActionConfirmMode = "popover" | "dialog";
-export type ActionButtonMaybeComputed<TContext, TValue> = If<IsNever<TContext>, TValue, TValue | ((context: TContext) => TValue)>;
 export type Length = string | number;
+export type ActionButtonMaybeComputed<TContext, TValue> = If<IsNever<TContext>, TValue, TValue | ((context: TContext) => TValue)>;
 export type SizeableLength<TSize extends FullSize | Size> = LiteralUnion<TSize, Length>;
 export type { GetProp, GetProps, GetRef } from 'antd';
-export type PropsWithRef<TRef, TProps = EmptyObject> = TProps & {
+export type PropsWithRef<TRef, TProps extends AnyObject = EmptyObject> = TProps & {
     ref?: Ref<TRef>;
 };
-/**
- * The position
- */
 export interface Position {
     x: number;
     y: number;
 }
-/**
- * The config for the action button.
- *
- * @template TContext - The context type of the action button.
- */
 export interface ActionButtonConfig<TContext = never> {
-    /**
-     * The key of the action button.
-     */
     key: string;
-    /**
-     * The label of the action button.
-     */
     label: string;
-    /**
-     * Whether the action button is disabled.
-     */
     disabled?: ActionButtonMaybeComputed<TContext, boolean>;
-    /**
-     * Whether the action button is hidden.
-     */
     hidden?: ActionButtonMaybeComputed<TContext, boolean>;
-    /**
-     * The color of the action button.
-     */
     color?: ButtonColor;
-    /**
-     * The variant of the action button.
-     */
     variant?: ButtonVariant;
-    /**
-     * The icon of the action button.
-     */
     icon?: ReactNode;
-    /**
-     * The permission tokens of the action button.
-     */
     permTokens?: string[];
-    /**
-     * The permission check mode of the action button.
-     * Default is "any".
-     */
     checkMode?: PermissionCheckMode;
-    /**
-     * Whether the action button is confirmable.
-     */
     confirmable?: ActionButtonMaybeComputed<TContext, boolean>;
-    /**
-     * The confirm mode of the action button.
-     * Default is "popover".
-     */
     confirmMode?: ActionButtonMaybeComputed<TContext, ActionConfirmMode>;
-    /**
-     * The confirm title of the action button.
-     */
     confirmTitle?: ActionButtonMaybeComputed<TContext, ReactNode>;
-    /**
-     * The confirm description of the action button.
-     */
     confirmDescription?: ActionButtonMaybeComputed<TContext, ReactNode>;
-    /**
-     * The callback function when the action button is clicked.
-     */
     onClick: (context: If<IsNever<TContext>, void, TContext>) => Awaitable<void>;
 }

package/dist/types/action-button/use-action-button.d.ts

@@ -2,8 +2,11 @@ import { Except, SetRequired } from '@vef-framework/shared';
 import { MouseEvent, MouseEventHandler } from 'react';
 import { ButtonProps } from '../button';
 import { ActionButtonProps } from './props';
-export declare function useActionButton({ confirmable, confirmMode, confirmTitle, confirmDescription, onClick }: SetRequired<Except<ActionButtonProps, keyof Except<ButtonProps, "loading" | "onClick">>, "confirmable" | "confirmMode" | "confirmTitle" | "confirmDescription">): {
+type UseActionButtonOptions = SetRequired<Except<ActionButtonProps, keyof Except<ButtonProps, "loading" | "onClick">>, "confirmable" | "confirmMode" | "confirmTitle" | "confirmDescription">;
+interface UseActionButtonReturn {
     loading: boolean;
     invokeClickAction: (event: MouseEvent<HTMLElement>, waitForActionDone?: boolean) => Promise<void>;
     handleClick: MouseEventHandler<HTMLElement>;
-};
+}
+export declare function useActionButton({ confirmable, confirmMode, confirmTitle, confirmDescription, onClick }: UseActionButtonOptions): UseActionButtonReturn;
+export {};

package/dist/types/action-group/use-action-group.d.ts

@@ -1,7 +1,8 @@
 import { EmptyObject, If, IsNever } from '@vef-framework/shared';
 import { ActionGroupProps } from './props';
+import { ReactNode } from 'react';
 export declare function useActionGroup<TContext>(props: ActionGroupProps<TContext> & If<IsNever<TContext>, EmptyObject, {
     context: TContext;
 }>): {
-    buttonNodes: (import("@emotion/react/jsx-runtime").JSX.Element | null)[];
+    buttonNodes: ReactNode[];
 };

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

@@ -1,10 +1,12 @@
 import { SizeType } from 'antd/es/config-provider/SizeContext';
+import { ReactNode } from 'react';
 import { ActionButtonConfig } from '../_base';
 /**
  * The hook to compute the action buttons.
  *
  * @param buttons - The action button configs.
+ * @param size - The button size.
  * @param context - The context.
  * @returns The computed action buttons.
  */
-export declare function useComputedActionButtons<TContext>(buttons: Array<ActionButtonConfig<TContext>>, size: SizeType, context: TContext): (import("@emotion/react/jsx-runtime").JSX.Element | null)[];
+export declare function useComputedActionButtons<TContext>(buttons: Array<ActionButtonConfig<TContext>>, size: SizeType, context: TContext): ReactNode[];

package/dist/types/charts/chart.d.ts

@@ -1,24 +1,11 @@
 import { CSSProperties, MemoExoticComponent } from 'react';
 import { PropsWithRef } from '../_base';
 import { UseChartOptions } from './hooks';
-/**
- * The props for the Chart component.
- */
 export interface ChartProps extends UseChartOptions {
-    /**
-     * Additional CSS class name for the container
-     */
     className?: string;
-    /**
-     * Inline styles for the container
-     */
     style?: CSSProperties;
-    /**
-     * Whether to use deep memoization for option
-     */
     deepMemo?: boolean;
 }
-/**
- * Chart component - a wrapper around ECharts (memoized)
- */
-export declare const Chart: MemoExoticComponent<({ className, style, ref, deepMemo: _, ...options }: PropsWithRef<HTMLDivElement, ChartProps>) => import("@emotion/react/jsx-runtime").JSX.Element>;
+declare function ChartComponent({ className, style, ref, deepMemo: _deepMemo, ...options }: PropsWithRef<HTMLDivElement, ChartProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chart: MemoExoticComponent<typeof ChartComponent>;
+export {};

package/dist/types/charts/helpers/group.d.ts

@@ -1,10 +1,2 @@
-/**
- *
- * @param groupId
- */
 export declare function connectCharts(groupId: string): void;
-/**
- *
- * @param groupId
- */
 export declare function disconnectCharts(groupId: string): void;

package/dist/types/charts/hooks/use-chart.d.ts

@@ -1,41 +1,14 @@
 import { AnyObject, Except } from '@vef-framework/shared';
 import { ECharts, EChartsInitOpts, EChartsOption, SetOptionOpts } from 'echarts';
 import { RefObject } from 'react';
-/**
- * Options for useChart hook
- */
 export interface UseChartOptions extends Except<EChartsInitOpts, "width" | "height">, SetOptionOpts {
-    /**
-     * ECharts option configuration
-     */
     option: EChartsOption;
-    /**
-     * Theme name or object
-     */
     theme?: "walden" | "wonderland" | AnyObject;
-    /**
-     * Loading state
-     */
     loading?: boolean;
-    /**
-     * Container width
-     */
     width?: number | "auto";
-    /**
-     * Container height
-     */
     height?: number | "auto";
-    /**
-     * Group id for chart synchronization
-     */
     group?: string;
-    /**
-     * Callback when chart is ready
-     */
     onReady?: (chart: ECharts) => void;
-    /**
-     * Callback before chart is disposed
-     */
     onBeforeDispose?: (chart: ECharts) => void;
 }
 export declare function useChart({ option, theme, loading, group, onReady, onBeforeDispose, notMerge, replaceMerge, lazyUpdate, silent, transition, renderer, devicePixelRatio, width, height, ssr, useCoarsePointer, useDirtyRect, pointerSize, locale }: UseChartOptions): RefObject<HTMLDivElement | null>;

package/dist/types/config-provider/app.d.ts

@@ -1,8 +1,9 @@
-import { CSSProperties, PropsWithChildren } from 'react';
-interface AppProps extends PropsWithChildren {
+import { CSSProperties, ReactNode } from 'react';
+interface AppProps {
     className?: string;
     style?: CSSProperties;
+    children?: ReactNode;
 }
-export declare const rootElementId = "root";
-export default function App({ className, style, children }: AppProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ROOT_ELEMENT_ID = "root";
+export default function App({ className, style, children }: AppProps): ReactNode;
 export {};

package/dist/types/config-provider/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const mergedPresetColors: {
+    red: string;
+    orange: string;
+    yellow: string;
+    lime: string;
+    green: string;
+    cyan: string;
+    blue: string;
+    purple: string;
+    pink: string;
+    geekblue: string;
+    magenta: string;
+    volcano: string;
+    gold: string;
+};
+export declare const defaultColors: {
+    readonly primary: "blue";
+    readonly success: "green";
+    readonly info: "blue";
+    readonly warning: "orange";
+    readonly error: "red";
+};

package/dist/types/config-provider/context-holder.d.ts

@@ -1,5 +1,6 @@
-import { NamedExoticComponent, ReactNode } from 'react';
-declare const ContextHolder: NamedExoticComponent<{
-    children?: ReactNode | undefined;
-}>;
-export default ContextHolder;
+import { ReactNode } from 'react';
+interface ContextHolderProps {
+    children?: ReactNode;
+}
+export default function ContextHolder({ children }: ContextHolderProps): ReactNode;
+export {};