@vef-framework/components 1.0.134 → 2.0.0

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

@@ -0,0 +1,30 @@
+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"
+ * ```
+ */
+export declare function mapSize(size?: Size): MaybeUndefined<"small" | "middle" | "large">;

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

@@ -0,0 +1,8 @@
+export * from './breakpoints';
+export * from './color';
+export * from './common';
+export * from './message';
+export * from './modal';
+export * from './notification';
+export * from './props';
+export * from './react';

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

@@ -0,0 +1,38 @@
+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): {
+    close: () => void;
+    update: (content: ReactNode) => undefined;
+};
+/**
+ * Close all messages
+ */
+export declare function closeAllMessages(): void;

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

@@ -0,0 +1,108 @@
+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): {
+    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): {
+    close: () => void;
+    update: (content: ReactNode, options?: AlertOptions) => void;
+};

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

@@ -0,0 +1,74 @@
+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): {
+    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 closeAllNotifications(): void;

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

@@ -0,0 +1,18 @@
+export type FilterProps<T extends Record<string, any>> = {
+    [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>;

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

@@ -0,0 +1,8 @@
+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/index.d.ts

@@ -0,0 +1 @@
+export * from './use-theme-tokens';

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

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

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

@@ -0,0 +1,6 @@
+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

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

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

@@ -0,0 +1 @@
+export * as styles from './common';

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

@@ -0,0 +1,2 @@
+import { breakpoints } from '../constants';
+export type Breakpoint = keyof typeof breakpoints;

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

@@ -0,0 +1,104 @@
+import { PermissionCheckMode } from '@vef-framework/core';
+import { Awaitable, EmptyObject, Expand, If, IsNever, LiteralUnion } 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
+ */
+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 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 SizeableLength<TSize extends FullSize | Size> = LiteralUnion<TSize, Length>;
+export type { GetProp, GetProps, GetRef } from 'antd';
+export type PropsWithRef<TRef, TProps = 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/_base/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './breakpoints';
+export * from './common';

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

@@ -0,0 +1,3 @@
+import { ActionButtonProps } from './props';
+export declare function ActionButton({ confirmable, confirmMode, confirmTitle, confirmDescription, onClick, ...props }: ActionButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export { type ActionButtonProps } from './props';

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

@@ -0,0 +1,39 @@
+import { Awaitable, Except, SetReturnType } from '@vef-framework/shared';
+import { ReactNode } from 'react';
+import { ActionConfirmMode, GetProp } from '../_base';
+import { ButtonProps } from '../button';
+/**
+ * The props for the ActionButton component.
+ *
+ * @see {@link ButtonProps}
+ */
+export interface ActionButtonProps extends Except<ButtonProps, "loading" | "onClick"> {
+    /**
+     * Whether the action requires confirm before execution.
+     *
+     * @default false
+     */
+    confirmable?: boolean;
+    /**
+     * The confirm mode for the action.
+     *
+     * @default "popover"
+     */
+    confirmMode?: ActionConfirmMode;
+    /**
+     * The title of the confirm dialog.
+     *
+     * @default "确认提示"
+     */
+    confirmTitle?: ReactNode;
+    /**
+     * The description of the confirm dialog.
+     *
+     * @default "确定要执行此操作吗？"
+     */
+    confirmDescription?: ReactNode;
+    /**
+     * The click handler that supports async operations.
+     */
+    onClick?: SetReturnType<GetProp<ButtonProps, "onClick">, Awaitable<void>>;
+}

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

@@ -0,0 +1,9 @@
+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">): {
+    loading: boolean;
+    invokeClickAction: (event: MouseEvent<HTMLElement>, waitForActionDone?: boolean) => Promise<void>;
+    handleClick: MouseEventHandler<HTMLElement>;
+};

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

@@ -0,0 +1,7 @@
+import { EmptyObject, If, IsNever } from '@vef-framework/shared';
+import { ReactNode } from 'react';
+import { ActionGroupProps } from './props';
+export declare function ActionGroup<TContext = never>(props: ActionGroupProps<TContext> & If<IsNever<TContext>, EmptyObject, {
+    context: TContext;
+}>): ReactNode;
+export { type ActionGroupProps } from './props';

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ActionButtonConfig } from '../_base';
+import { ButtonProps } from '../button';
+/**
+ * The props of the action group.
+ *
+ * @template T - The context type of the action group.
+ */
+export interface ActionGroupProps<T = never> extends Pick<ButtonProps, "size"> {
+    /**
+     * The buttons of the action group.
+     */
+    buttons: Array<ActionButtonConfig<T>>;
+    /**
+     * The render wrapper of the action group.
+     */
+    renderWrapper?: (buttonsNode: ReactNode) => ReactNode;
+}

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

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

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

@@ -0,0 +1,10 @@
+import { SizeType } from 'antd/es/config-provider/SizeContext';
+import { ActionButtonConfig } from '../_base';
+/**
+ * The hook to compute the action buttons.
+ *
+ * @param buttons - The action button configs.
+ * @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)[];

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

@@ -0,0 +1,2 @@
+export { Affix } from 'antd';
+export type { AffixProps } from 'antd';

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

@@ -0,0 +1,2 @@
+export { Alert } from 'antd';
+export type { AlertProps } from 'antd';

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

@@ -0,0 +1,4 @@
+import { AnchorLinkItemProps } from 'antd/es/anchor/Anchor';
+export { Anchor } from 'antd';
+export type { AnchorProps } from 'antd';
+export type AnchorLinkItem = AnchorLinkItemProps;

package/dist/types/auto-complete/index.d.ts

@@ -0,0 +1,4 @@
+import { DataSourceItemType } from 'antd/es/auto-complete/AutoComplete';
+export { AutoComplete } from 'antd';
+export type { AutoCompleteProps } from 'antd';
+export type AutoCompleteOption = DataSourceItemType;

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

@@ -0,0 +1,3 @@
+export { Avatar } from 'antd';
+export type { AvatarProps } from 'antd';
+export type { AvatarGroupProps } from 'antd/es/avatar/AvatarGroup';

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

@@ -0,0 +1,4 @@
+import { RibbonProps } from 'antd/es/badge/Ribbon';
+export { Badge } from 'antd';
+export type { BadgeProps } from 'antd';
+export type BadgeRibbonProps = RibbonProps;

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

@@ -0,0 +1,4 @@
+import { BoolProps } from './props';
+import { MemoExoticComponent } from 'react';
+export declare const Bool: MemoExoticComponent<(props: BoolProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export type { BoolProps, BoolVariant } from './props';

package/dist/types/bool/props.d.ts

@@ -0,0 +1,67 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Size } from '../_base';
+/**
+ * The variant of the Bool component
+ */
+export type BoolVariant = "radio" | "radio-button" | "switch" | "checkbox";
+/**
+ * The props for the `Bool` component
+ */
+export interface BoolProps {
+    /**
+     * The class name of the component.
+     */
+    className?: string;
+    /**
+     * The style of the component.
+     */
+    style?: CSSProperties;
+    /**
+     * The value of the component (controlled).
+     */
+    value?: boolean;
+    /**
+     * The default value of the component (uncontrolled).
+     */
+    defaultValue?: boolean;
+    /**
+     * The variant of the component.
+     *
+     * @default "switch"
+     */
+    variant?: BoolVariant;
+    /**
+     * The label for the true/checked state.
+     * - For radio variant: displayed on the true radio option
+     * - For radio-button variant: displayed on the true button
+     * - For switch variant: displayed inside the switch when checked
+     *
+     * @default "是"
+     */
+    trueLabel?: ReactNode;
+    /**
+     * The label for the false/unchecked state.
+     * - For radio variant: displayed on the false radio option
+     * - For radio-button variant: displayed on the false button
+     * - For switch variant: displayed inside the switch when unchecked
+     *
+     * @default "否"
+     */
+    falseLabel?: ReactNode;
+    /**
+     * Whether the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the component.
+     */
+    size?: Size;
+    /**
+     * The callback function when the value changes.
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * The label text for switch/checkbox variants.
+     */
+    children?: ReactNode;
+}

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

@@ -0,0 +1,5 @@
+import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+export { Breadcrumb } from 'antd';
+export type { BreadcrumbProps } from 'antd';
+export type BreadcrumbItem = ItemType;
+export { type BreadcrumbItemType, type BreadcrumbSeparatorType } from 'antd/es/breadcrumb/Breadcrumb';

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

@@ -0,0 +1,3 @@
+export { Button } from 'antd';
+export type { ButtonProps } from 'antd';
+export type { ButtonColorType as ButtonColor, ButtonVariantType as ButtonVariant } from 'antd/es/button';

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

@@ -0,0 +1,2 @@
+export { Calendar } from 'antd';
+export type { CalendarProps } from 'antd';

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

@@ -0,0 +1,3 @@
+export { Card } from 'antd';
+export type { CardProps } from 'antd';
+export type { CardGridProps, CardMetaProps } from 'antd/es/card';

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

@@ -0,0 +1,3 @@
+export { Carousel } from 'antd';
+export type { CarouselProps } from 'antd';
+export { type DotPlacement as CarouselDotPlacement, type CarouselEffect, type CarouselRef } from 'antd/es/carousel';