@vef-framework/components 1.0.5

package/dist/vef-crud-page/index.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{jsx as e,jsxs as t}from"@emotion/react/jsx-runtime";import{isNullish as o}from"@vef-framework/shared";import{useMemo as r}from"react";import s from"../vef-card/index.js";import i from"../vef-page/index.js";import m from"./components/crud-actions.js";import a from"./components/crud-footer.js";import n from"./components/crud-form-modal.js";import c from"./components/crud-header.js";import l from"./components/crud-table.js";import{useCrudSchema as p}from"./hooks/use-crud-schema.js";import{useCrudStore as f,CrudStoreProvider as u}from"./store.js";function b({title:r,actionButtons:p,batchActionButtons:u,tableSchema:b,filterItems:h,formGroups:d,tableApiParams:A,formApis:j,deletionApi:S,batchDeletionApi:y,selectionSummary:B,...g}){const{selectedKeys:P}=f((e=>e.selectedInfo)),k=!o(y)||!o(u)&&u.length>0;let w;if(g.paginated){const{tableApi:t,...o}=g;w=e(l,{showRowNumber:!0,api:t,apiParams:A,deletionApi:S,schema:b,selectable:k,...o})}else{const{tableApi:t,...o}=g;w=e(l,{showRowNumber:!0,api:t,apiParams:A,deletionApi:S,schema:b,selectable:k,...o})}const{tableApi:I}=g;return e(i,{scrollable:!0,title:r,actions:e(m,{actionButtons:p,tableApi:I,tableApiParams:A}),footer:P.length>0&&e(a,{batchActionButtons:u,batchDeletionApi:y,selectionSummary:B,tableApi:I,tableApiParams:A}),header:e(c,{actionButtons:p,filterItems:h,tableApi:I,tableApiParams:A,title:r}),children:t(s,{children:[w,j&&Object.keys(j).length>0&&d.length>0&&e(n,{formApis:j,formSchema:d})]})})}function h({schema:t,formApis:o,onFormOpen:s,onBeforeSubmit:i,onSubmitSuccess:m,...a}){const{tableSchema:n,filterItems:c,formGroups:l,filterValueAsDefaultKeys:f}=p(t),h=r((()=>{const e=o??{};return Object.keys(e).reduce(((t,o)=>(e[o]&&(t[o]=e[o].key),t)),{})}),[o]);return e(u,{filterValueAsDefaultKeys:f,formApiKeys:h,onBeforeSubmit:i,onFormOpen:s,onSubmitSuccess:m,children:e(b,{filterItems:c,formApis:o,formGroups:l,tableSchema:n,...a})})}export{h as default};
+/*! 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/vef-crud-page/props.d.ts

@@ -0,0 +1,84 @@
+import type { ActionButton, AnyValue, EmptyObject, Except, Mapper, MaybePromise, MutationApi, ObjectType, ObjectValue, PaginationParams, PaginationResult, QueryApi, QueryConfig, StringKey, TriMapper } from "@vef-framework/shared";
+import type { ReactNode } from "react";
+import type { FilterValues } from "../vef-filter/types";
+import type { VefTableProps } from "../vef-table";
+import type { BatchActionButtonContext, CrudContext, CrudFilterVirtualKeys, CrudFormApis, CrudFormScene, CrudSchema, FormEventHandlers } from "./types";
+/**
+ * The props of VefCrudPage component.
+ */
+export type VefCrudPageProps<Record extends ObjectType = ObjectValue, Params extends ObjectType = EmptyObject, FilterKeys extends ReadonlyArray<StringKey<Record>> = [], FormKeys extends ReadonlyArray<StringKey<Record>> = [], FormResult = AnyValue, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> = VefDefaultCrudPageProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis> | VefPaginatedCrudPageProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis>;
+/**
+ * The base props of VefCrudPage component.
+ */
+type VefBaseCrudPageProps<Record extends ObjectType = ObjectValue, Params extends ObjectType = EmptyObject, FilterKeys extends ReadonlyArray<StringKey<Record>> = [], FormKeys extends ReadonlyArray<StringKey<Record>> = [], FormResult = AnyValue, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> = Except<VefTableProps<Record, Params, Record, CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>, "schema" | "paginated" | "selectable" | "multipleSelection" | "showSelectAllCheckbox" | "enableRowClick" | "enableRowClickForSelection" | "selectionSummary" | "value" | "defaultValue" | "batchActionButtons" | "onChange" | "onSelect" | "onDeselect" | "onRowClick" | keyof QueryConfig> & FormEventHandlers<Pick<Record, FormKeys[number]>, FormResult, CrudFormScene<FormApis>> & {
+    /**
+     * The schema of the crud page.
+     */
+    schema: Schema;
+    /**
+     * The title of the crud page.
+     */
+    title: ReactNode;
+    /**
+     * The action buttons of the crud page.
+     */
+    actionButtons?: Array<ActionButton<CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>;
+    /**
+     * The batch action buttons of the crud page.
+     */
+    batchActionButtons?: Array<ActionButton<BatchActionButtonContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>;
+    /**
+     * The params of the table api.
+     */
+    tableApiParams?: Params;
+    /**
+     * The apis of the form.
+     */
+    formApis?: FormApis;
+    /**
+     * The api of the deletion.
+     */
+    deletionApi?: Readonly<MutationApi<Record, void>>;
+    /**
+     * The api of the batch deletion.
+     */
+    batchDeletionApi?: Readonly<MutationApi<Record[], void>>;
+    /**
+     * The mapper of the selection summary.
+     */
+    selectionSummary?: Mapper<Record[], ReactNode>;
+    /**
+     * The function to handle the form open event.
+     * Typically used to pre-fill or initialize the initial form values.
+     */
+    onFormOpen?: TriMapper<Partial<Pick<Record, FormKeys[number]>>, FilterValues<Pick<Record, FilterKeys[number]>>, CrudFormScene<FormApis>, MaybePromise<Partial<Pick<Record, FormKeys[number]>>>>;
+};
+/**
+ * The default props of VefCrudPage component.
+ */
+type VefDefaultCrudPageProps<Record extends ObjectType = ObjectValue, Params extends ObjectType = EmptyObject, FilterKeys extends ReadonlyArray<StringKey<Record>> = [], FormKeys extends ReadonlyArray<StringKey<Record>> = [], FormResult = AnyValue, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> = VefBaseCrudPageProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis> & {
+    /**
+     * Whether the table is paginated.
+     * @default false
+     */
+    paginated?: false;
+    /**
+     * The api of the table.
+     */
+    tableApi: Readonly<QueryApi<Params & Except<Pick<Record, FilterKeys[number]>, CrudFilterVirtualKeys<Schema>>, Record[]>>;
+};
+/**
+ * The paginated props of VefCrudPage component.
+ */
+type VefPaginatedCrudPageProps<Record extends ObjectType = ObjectValue, Params extends ObjectType = EmptyObject, FilterKeys extends ReadonlyArray<StringKey<Record>> = [], FormKeys extends ReadonlyArray<StringKey<Record>> = [], FormResult = AnyValue, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> = VefBaseCrudPageProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis> & {
+    /**
+     * Whether the table is paginated.
+     * @default false
+     */
+    paginated: true;
+    /**
+     * The api of the table.
+     */
+    tableApi: Readonly<QueryApi<Params & PaginationParams & Except<Pick<Record, FilterKeys[number]>, CrudFilterVirtualKeys<Schema>>, PaginationResult<Record>>>;
+};
+export {};

package/dist/vef-crud-page/store.d.ts

@@ -0,0 +1,119 @@
+import { type AnyValue, type ChildrenProps, type Consumer, type Except, type Handler, type IdValue, type Mapper, type MaybeNull, type MaybePromise, type ObjectType, type StringKey, type TriMapper } from "@vef-framework/shared";
+import { type RefObject } from "react";
+import { type StoreApi } from "zustand";
+import type { FilterValues } from "../vef-filter/types";
+import type { VefTableInstance } from "../vef-table";
+import type { CrudFilterVirtualKeys, CrudFormApis, CrudFormScene, CrudSchema, FormBehaviorConfig, FormEventHandlers, FormInfo } from "./types";
+/**
+ * The selected info.
+ */
+interface SelectedInfo<Record extends ObjectType> {
+    /**
+     * The selected keys.
+     */
+    selectedKeys: IdValue[];
+    /**
+     * The selected records.
+     */
+    selectedRecords: Record[];
+}
+/**
+ * The crud state.
+ */
+export interface CrudState<Record extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>> = readonly [], FormKeys extends ReadonlyArray<StringKey<Record>> = readonly [], FormResult = AnyValue, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> extends FormEventHandlers<Pick<Record, FormKeys[number]>, FormResult, CrudFormScene<FormApis>> {
+    /**
+     * The function to handle the form open event.
+     * Typically used to pre-fill or initialize the initial form values.
+     */
+    onFormOpen?: TriMapper<Partial<Pick<Record, FormKeys[number]>>, FilterValues<Pick<Record, FilterKeys[number]>>, CrudFormScene<FormApis>, MaybePromise<Partial<Pick<Record, FormKeys[number]>>>>;
+    /**
+     * The current form info.
+     */
+    currentFormInfo: FormInfo<CrudFormScene<FormApis>>;
+    /**
+     * The event handlers of the current form.
+     */
+    currentFormEventHandlers: FormEventHandlers<Pick<Record, FormKeys[number]>, FormResult, CrudFormScene<FormApis>>;
+    /**
+     * The initial values of the current form.
+     */
+    currentFormInitialValues: Partial<Pick<Record, FormKeys[number]>>;
+    /**
+     * Whether the form is open.
+     */
+    isFormOpen: boolean;
+    /**
+     * The function to open the form.
+     */
+    openForm: Mapper<FormInfo<CrudFormScene<FormApis>> & FormEventHandlers<Pick<Record, FormKeys[number]>, FormResult, CrudFormScene<FormApis>> & FormBehaviorConfig & {
+        initialValues?: Partial<Pick<Record, FormKeys[number]>>;
+    }, Promise<void>>;
+    /**
+     * The function to close the form.
+     */
+    closeForm: Handler;
+    /**
+     * Whether the form is loading.
+     */
+    isFormLoading: boolean;
+    /**
+     * The function to set whether the form is loading.
+     */
+    setIsFormLoading: Consumer<boolean>;
+    /**
+     * The keys of the filter values that are used as default values of the form.
+     */
+    filterValueAsDefaultKeys: Array<FormKeys[number]>;
+    /**
+     * The values of the filter.
+     */
+    filterValues: FilterValues<Pick<Record, FilterKeys[number]>>;
+    /**
+     * The function to set the values of the filter.
+     */
+    setFilterValues: Consumer<FilterValues<Pick<Record, FilterKeys[number]>>>;
+    /**
+     * The confirmed values of the filter.
+     */
+    confirmedFilterValues: MaybeNull<Except<Pick<Record, FilterKeys[number]>, CrudFilterVirtualKeys<Schema>>>;
+    /**
+     * The function to set the confirmed values of the filter.
+     */
+    setConfirmedFilterValues: Consumer<MaybeNull<Except<Pick<Record, FilterKeys[number]>, CrudFilterVirtualKeys<Schema>>>>;
+    /**
+     * The selected info.
+     */
+    selectedInfo: SelectedInfo<Record>;
+    /**
+     * The function to set the selected info.
+     */
+    setSelectedInfo: Consumer<SelectedInfo<Record>>;
+    /**
+     * The apis of the form.
+     */
+    formApiKeys: {
+        [K in CrudFormScene<FormApis>]: string;
+    };
+    /**
+     * The ref of the table instance.
+     */
+    tableInstanceRef: RefObject<MaybeNull<VefTableInstance<Record>>>;
+}
+/**
+ * The props of the crud store provider
+ */
+export interface CrudStoreProviderProps<Record extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema>> extends Pick<CrudState<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>, "filterValueAsDefaultKeys" | "formApiKeys" | "onFormOpen" | "onBeforeSubmit" | "onSubmitSuccess">, ChildrenProps {
+}
+/**
+ * The provider component of the crud store.
+ */
+export declare function CrudStoreProvider<Record extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema>>({ filterValueAsDefaultKeys, formApiKeys, onFormOpen, onBeforeSubmit, onSubmitSuccess, children, }: CrudStoreProviderProps<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>): import("react").FunctionComponentElement<import("react").ProviderProps<MaybeNull<StoreApi<CrudState<any, any, any, any, any, any>>>>>;
+/**
+ * The hook to use the crud store api.
+ */
+export declare function useCrudStoreApi<Record extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema>>(): StoreApi<CrudState<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>;
+/**
+ * The hook to use the crud store.
+ */
+export declare function useCrudStore<Record extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema>, R>(selector: Mapper<CrudState<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>, R>): R;
+export {};

package/dist/vef-crud-page/store.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{useSingleton as e,useUpdateEffect as r}from"@vef-framework/hooks";import{creationFormScene as o,isNullish as n,isFunction as t,mergeFns as s,showSuccessMessage as i,showSuccessAlert as u,invokeMaybeAsyncFn as m,isEqual as l}from"@vef-framework/shared";import{createContext as a,createElement as c,useContext as f}from"react";import{createStore as d}from"zustand";import{useStoreWithEqualityFn as F}from"zustand/traditional";const S=a(null);function p({filterValueAsDefaultKeys:l,formApiKeys:a,onFormOpen:f,onBeforeSubmit:F,onSubmitSuccess:p,children:b}){const V=e((()=>function({filterValueAsDefaultKeys:e,formApiKeys:r,onFormOpen:l,onBeforeSubmit:a,onSubmitSuccess:c}){return d(((f,d)=>({onFormOpen:l,onBeforeSubmit:a,onSubmitSuccess:c,currentFormInfo:{scene:o,title:"创建",width:"medium"},currentFormEventHandlers:{},currentFormInitialValues:{},isFormOpen:!1,openForm:async({initialValues:r,width:o,onBeforeSubmit:l,onSubmitSuccess:a,showSuccessTip:c=!0,successTipType:F="message",...S})=>{const{filterValues:p,onFormOpen:b,closeForm:V,onBeforeSubmit:y,onSubmitSuccess:I,setIsFormLoading:w}=d(),K={...e.reduce(((e,r)=>{const o=p[r];return n(o)||(e[r]=o),e}),{}),...r},v=t(l)||t(y)?async(e,r)=>{const o=await(l?.(e,r));return await(y?.(o??e,r))??o}:void 0,A=t(a)||t(I)?s((({message:e})=>{c&&("message"===F?i(e):u(e)),V()}),a,I):void 0;f({isFormOpen:!0,currentFormInfo:{...S,width:o??"medium"},currentFormEventHandlers:{onBeforeSubmit:v,onSubmitSuccess:A},isFormLoading:Boolean(b)}),b?await m(b,{onSuccess:e=>{f({currentFormInitialValues:e})},onFinally:()=>{w(!1)}},K,p,S.scene):f({currentFormInitialValues:K})},closeForm:()=>{f({isFormOpen:!1,currentFormInitialValues:{},currentFormEventHandlers:{}})},isFormLoading:!1,setIsFormLoading:e=>{f({isFormLoading:e})},filterValueAsDefaultKeys:e,filterValues:{},setFilterValues:e=>{f({filterValues:e})},confirmedFilterValues:null,setConfirmedFilterValues:e=>{f({confirmedFilterValues:e})},selectedInfo:{selectedKeys:[],selectedRecords:[]},setSelectedInfo:e=>{f({selectedInfo:e})},formApiKeys:r,tableInstanceRef:{current:null}})))}({filterValueAsDefaultKeys:l,onFormOpen:f,formApiKeys:a,onBeforeSubmit:F,onSubmitSuccess:p})));return r((()=>{V.setState({filterValueAsDefaultKeys:l,formApiKeys:a,onFormOpen:f,onBeforeSubmit:F,onSubmitSuccess:p})}),[l,a,f,F,p]),c(S.Provider,{value:V},b)}function b(){const e=f(S);if(!e)throw new Error("CrudStore can be used only inside CrudStoreProvider");return e}function V(e){return F(b(),e,l)}export{p as CrudStoreProvider,V as useCrudStore,b as useCrudStoreApi};
+/*! 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/vef-crud-page/types.d.ts

@@ -0,0 +1,173 @@
+import type { AnyValue, ApiResponse, BiMapper, Consumer, Except, IdValue, KeyValue, MaybePromise, MutationApi, NonEmptyTuple, ObjectType, ObjectValue, Provider, StringKey, TriConsumer, UnionToTuple } from "@vef-framework/shared";
+import type { ReactNode } from "react";
+import type { FilterItem } from "../vef-filter";
+import type { FilterValues } from "../vef-filter/types";
+import type { FormItem, FormScene } from "../vef-form";
+import type { VefModalProps } from "../vef-modal";
+import type { TableColumn } from "../vef-table";
+/**
+ * The crud context.
+ */
+export interface CrudContext<Record extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult = AnyValue, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> {
+    /**
+     * The function to open the form.
+     */
+    openForm: Consumer<FormInfo<CrudFormScene<FormApis>> & FormEventHandlers<Pick<Record, FormKeys[number]>, FormResult, CrudFormScene<FormApis>> & FormBehaviorConfig & {
+        initialValues?: Partial<Pick<Record, FormKeys[number]>>;
+    }>;
+    /**
+     * The filter values.
+     */
+    filterValues: FilterValues<Pick<Record, FilterKeys[number]>>;
+    /**
+     * The function to refetch the table data of the crud page.
+     */
+    refetch: Provider<Promise<void>>;
+}
+/**
+ * The batch action button context.
+ */
+export interface BatchActionButtonContext<Record extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult = AnyValue, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> extends CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis> {
+    /**
+     * The selected keys.
+     */
+    selectedKeys: IdValue[];
+    /**
+     * The selected records.
+     */
+    selectedRecords: Record[];
+}
+/**
+ * The form info.
+ */
+export interface FormInfo<Scene extends FormScene = FormScene> {
+    /**
+     * The scene of the form.
+     */
+    scene: Scene;
+    /**
+     * The title of the form.
+     */
+    title: ReactNode;
+    /**
+     * The width of the form.
+     */
+    width?: NonNullable<VefModalProps["width"]>;
+}
+/**
+ * The event handlers of the form.
+ */
+export interface FormEventHandlers<Record extends ObjectType, Result, Scene extends FormScene = FormScene> {
+    /**
+     * The function to handle the form submit before event.
+     */
+    onBeforeSubmit?: BiMapper<Record, Scene, MaybePromise<Record>>;
+    /**
+     * The function to handle the form submit success event.
+     */
+    onSubmitSuccess?: TriConsumer<ApiResponse<Result>, Record, Scene>;
+}
+/**
+ * The behavior config of the form.
+ */
+export interface FormBehaviorConfig {
+    /**
+     * Whether to show the success tip.
+     * @default true
+     */
+    showSuccessTip?: boolean;
+    /**
+     * The type of the success tip.
+     * @default "message"
+     */
+    successTipType?: "message" | "alert";
+}
+/**
+ * The coordinate of the form item.
+ */
+interface FormItemCoordinate {
+    /**
+     * The group key of the form item.
+     */
+    group?: KeyValue;
+    /**
+     * The row key of the form item.
+     */
+    row?: KeyValue;
+    /**
+     * The column key of the form item.
+     */
+    column?: KeyValue;
+}
+type FilterCrudItem<Record extends ObjectType, Key extends StringKey<Record>, FilterKeys extends StringKey<Record>> = Key extends FilterKeys ? {
+    filter: Except<FilterItem<Pick<Record, FilterKeys>, Key>, "name">;
+} : unknown;
+type FormCrudItem<Record extends ObjectType, Key extends StringKey<Record>, FormKeys extends StringKey<Record>, FilterKeys extends StringKey<Record>> = Key extends FormKeys ? {
+    form: Except<FormItem<Pick<Record, FormKeys>>, "name"> & FormItemCoordinate & (Key extends FilterKeys ? {
+        filterValueAsDefault?: boolean;
+    } : unknown);
+} : unknown;
+/**
+ * The crud item.
+ */
+export type CrudItem<Record extends ObjectType = ObjectValue, FilterKeys extends StringKey<Record> = never, FormKeys extends StringKey<Record> = never, Key extends StringKey<Record> = StringKey<Record>> = TableColumn<Record, Key> & FilterCrudItem<Record, Key, FilterKeys> & FormCrudItem<Record, Key, FormKeys, FilterKeys>;
+/**
+ * The internal crud item.
+ */
+export type InternalCrudItem<Record extends ObjectType = ObjectValue, FilterKeys extends StringKey<Record> = never, FormKeys extends StringKey<Record> = never, Key extends StringKey<Record> = StringKey<Record>> = TableColumn<Record, Key> & {
+    /**
+     * The filter of the item.
+     */
+    filter?: Except<FilterItem<Pick<Record, FilterKeys>>, "name">;
+    /**
+     * The form of the item.
+     */
+    form?: Except<FormItem<Pick<Record, FormKeys>>, "name"> & FormItemCoordinate & {
+        filterValueAsDefault?: boolean;
+    };
+};
+/**
+ * The union of the crud items.
+ */
+type CrudItemUnion<Record extends ObjectType, FilterKeys extends StringKey<Record>, FormKeys extends StringKey<Record>, Keys extends UnionToTuple<StringKey<Record>>> = {
+    [K in keyof Keys]: CrudItem<Record, FilterKeys, FormKeys, Keys[K] & string>;
+}[number];
+/**
+ * The crud schema.
+ */
+export type CrudSchema<Record extends ObjectType = ObjectValue, FilterKeys extends ReadonlyArray<StringKey<Record>> = [], FormKeys extends ReadonlyArray<StringKey<Record>> = []> = NonEmptyTuple<CrudItemUnion<Record, FilterKeys[number], FormKeys[number], UnionToTuple<StringKey<Record>>>>;
+/**
+ * The virtual keys of the crud filter.
+ */
+export type CrudFilterVirtualKeys<T extends readonly unknown[]> = {
+    [K in keyof T]: T[K] extends {
+        name: infer N;
+        filter: infer F;
+    } ? F extends {
+        virtual: true;
+    } ? N : never : never;
+}[number];
+/**
+ * The virtual keys of the crud form.
+ */
+export type CrudFormVirtualKeys<T extends readonly unknown[]> = {
+    [K in keyof T]: T[K] extends {
+        name: infer N;
+        form: infer F;
+    } ? F extends {
+        virtual: true;
+    } ? N : never : never;
+}[number];
+/**
+ * The apis of the form.
+ */
+export type CrudFormApis<Record extends ObjectType, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, never, FormKeys>> = {
+    [K in FormScene]?: Readonly<MutationApi<Except<Pick<Record, FormKeys[number]>, CrudFormVirtualKeys<Schema>>, FormResult>>;
+};
+/**
+ * The form scene of the crud.
+ */
+export type CrudFormScene<FormApis extends CrudFormApis<any, any, any, any>> = keyof {
+    [K in keyof FormApis as FormApis[K] extends MutationApi ? K : never]: FormApis[K];
+} & string;
+export {};

package/dist/vef-divider/index.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from "react";
+import type { VefDividerProps } from "./props";
+declare const VefDivider: FC<VefDividerProps>;
+export type { VefDividerProps };
+export default VefDivider;

package/dist/vef-divider/index.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{jsx as t}from"@emotion/react/jsx-runtime";import{Divider as i}from"antd";const o=({direction:o,title:e,titlePosition:n,titleEdgeMargin:r,...a})=>t(i,{children:e,orientation:n,orientationMargin:r,type:o,...a});export{o as default};
+/*! 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/vef-divider/props.d.ts

@@ -0,0 +1,25 @@
+import type { Direction, Except } from "@vef-framework/shared";
+import type { DividerProps } from "antd";
+/**
+ * The props for the VefDivider component.
+ */
+export interface VefDividerProps extends Except<DividerProps, "dashed" | "type" | "orientation" | "orientationMargin" | "children"> {
+    /**
+     * The direction of the divider.
+     */
+    direction?: Direction;
+    /**
+     * The title of the divider.
+     */
+    title?: React.ReactNode;
+    /**
+     * The position of the title.
+     * Only works when `title` is provided.
+     */
+    titlePosition?: NonNullable<DividerProps["orientation"]>;
+    /**
+     * The edge margin of the title.
+     * Only works when `title` is provided and `titlePosition` is left or right.
+     */
+    titleEdgeMargin?: NonNullable<DividerProps["orientationMargin"]>;
+}

package/dist/vef-drawer/components/action-button-wrapper.d.ts

@@ -0,0 +1,14 @@
+import { type FC, type ReactElement } from "react";
+import type { VefButtonProps } from "../../vef-button";
+import type VefButton from "../../vef-button";
+/**
+ * The props of the vef drawer action button wrapper.
+ */
+export interface VefDrawerActionButtonWrapperProps {
+    /**
+     * The children.
+     */
+    children: ReactElement<VefButtonProps, typeof VefButton>;
+}
+declare const VefDrawerActionButtonWrapper: FC<VefDrawerActionButtonWrapperProps>;
+export default VefDrawerActionButtonWrapper;

package/dist/vef-drawer/components/action-button-wrapper.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{jsx as o,Fragment as r}from"@emotion/react/jsx-runtime";import{invokeMaybeAsyncFn as e}from"@vef-framework/shared";import{useState as i,useMemo as t,cloneElement as n}from"react";import{useDrawerContextSelector as a}from"../context.js";const s=({children:s})=>{const[l,d]=a((o=>[o.isDisabled,o.setIsDisabled])),[m,c]=i(!1),{disabled:f,loading:p,onClick:b}=s.props,k=t((()=>{if(b)return async o=>{await e(b,{beforeInvoke:()=>{c(!0),d(!0)},onFinally:()=>{c(!1),d(!1)}},o)}}),[b,d]),u=n(s,{disabled:l||f,loading:m||p,onClick:k});return o(r,{children:u})};export{s as default};
+/*! 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/vef-drawer/components/button-props.d.ts

@@ -0,0 +1,15 @@
+import type { MaybePromise, Provider } from "@vef-framework/shared";
+import type { ReactNode } from "react";
+/**
+ * The props of the action button.
+ */
+export interface VefDrawerActionButtonProps {
+    /**
+     * The text of the button.
+     */
+    text: ReactNode;
+    /**
+     * The click handler of the button.
+     */
+    onClick?: Provider<MaybePromise<void>>;
+}

package/dist/vef-drawer/components/button-props.js

@@ -0,0 +1,2 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+/*! 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/vef-drawer/components/cancel-action-button.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { VefDrawerActionButtonProps } from "./button-props";
+declare const VefCancelActionButton: FC<VefDrawerActionButtonProps>;
+export default VefCancelActionButton;

package/dist/vef-drawer/components/cancel-action-button.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{jsx as t}from"@emotion/react/jsx-runtime";import o from"../../vef-button/index.js";import r from"./action-button-wrapper.js";const e=({text:e,onClick:i})=>t(r,{children:t(o,{color:"default",variant:"text",onClick:i,children:e})});export{e as default};
+/*! 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/vef-drawer/components/ok-action-button.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { VefDrawerActionButtonProps } from "./button-props";
+declare const VefOkActionButton: FC<VefDrawerActionButtonProps>;
+export default VefOkActionButton;

package/dist/vef-drawer/components/ok-action-button.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{jsx as o}from"@emotion/react/jsx-runtime";import{CheckOutlined as r}from"@ant-design/icons";import t from"../../vef-button/index.js";import i from"./action-button-wrapper.js";const n=({text:n,onClick:e})=>o(i,{children:o(t,{color:"primary",icon:o(r,{}),onClick:e,children:n})});export{n as default};
+/*! 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/vef-drawer/context.d.ts

@@ -0,0 +1,27 @@
+import { type Consumer } from "@vef-framework/shared";
+/**
+ * The context of the drawer.
+ */
+export interface DrawerContext {
+    /**
+     * Whether the drawer is disabled.
+     */
+    isDisabled: boolean;
+    /**
+     * The setter of the drawer's disabled state.
+     */
+    setIsDisabled: Consumer<boolean>;
+    /**
+     * Whether the drawer is fully opened.
+     */
+    isFullyOpened: boolean;
+    /**
+     * Whether the drawer is fully closed.
+     */
+    isFullyClosed: boolean;
+}
+declare const DrawerContextProvider: import("react").ComponentType<{
+    value: DrawerContext;
+    children: import("react").ReactNode;
+}>, useDrawerContext: import("@vef-framework/shared").Provider<DrawerContext>, useDrawerContextSelector: <R>(selector: import("@vef-framework/shared").Mapper<DrawerContext, R>) => R;
+export { DrawerContextProvider, useDrawerContext, useDrawerContextSelector };

package/dist/vef-drawer/context.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{createSelectableContext as e,noop as s}from"@vef-framework/shared";const{ContextProvider:o,useContext:t,useContextSelector:r}=e({isDisabled:!1,setIsDisabled:s,isFullyOpened:!1,isFullyClosed:!1});export{o as DrawerContextProvider,t as useDrawerContext,r as useDrawerContextSelector};
+/*! 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/vef-drawer/index.d.ts

@@ -0,0 +1,5 @@
+import type { VefDrawerProps } from "./props";
+declare const VefDrawer: import("react").NamedExoticComponent<VefDrawerProps>;
+export type { VefDrawerProps };
+export { default as VefDrawerActionButtonWrapper, type VefDrawerActionButtonWrapperProps } from "./components/action-button-wrapper";
+export default VefDrawer;

package/dist/vef-drawer/index.js

@@ -0,0 +1,10 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{jsx as e,jsxs as o,Fragment as t}from"@emotion/react/jsx-runtime";import{css as n}from"@emotion/react";import{themeVariables as l,isFunction as s}from"@vef-framework/shared";import{Drawer as r}from"antd";import{useMemo as i,useState as a,useLayoutEffect as c,useCallback as d,memo as m}from"react";import p from"./components/cancel-action-button.js";import f from"./components/ok-action-button.js";import{DrawerContextProvider as u}from"./context.js";export{default as VefDrawerActionButtonWrapper}from"./components/action-button-wrapper.js";const C=n`
+  .vef-drawer-footer {
+    display: flex;
+    gap: ${l.padding};
+    justify-content: flex-end;
+    align-items: center;
+  }
+`,h={narrow:"25",half:"50",wide:"75",full:"100"},x=m((({title:n,open:l,closable:m=!0,closeOnEscPress:x=!0,closeOnMaskClick:k=!1,destroyOnClose:y=!1,placement:g="right",expansionSize:O,extra:b,showCancelButton:w=!0,cancelButtonText:j="取消",okButtonText:B="提交",actions:F,loading:v,cancelOnClose:A=!0,onClose:z,onCancel:D,onOk:$,onAfterOpen:I,onAfterClose:T,children:E})=>{const M=i((()=>"small"===O?{size:"default"}:"medium"===O?{size:"large"}:"left"===g||"right"===g?{width:h[O]?`${h[O]}vw`:O}:{height:h[O]?`${h[O]}vh`:O}),[O,g]),[P,S]=a({isFullyOpened:!1,isFullyClosed:!1}),[V,W]=a(!1),q=i((()=>({isDisabled:V,setIsDisabled:W,...P})),[V,P]),G=v||V;c((()=>{l&&P.isFullyClosed&&S((e=>({...e,isFullyClosed:!1})))}),[l]);const H=i((()=>{const n=e(p,{text:j,onClick:D},"cancelActionButton"),l=e(f,{text:B,onClick:$},"okActionButton");return s(F)?F([n,l]):F||(w?o(t,{children:[n,l]}):l)}),[F,j,B,D,$,w]),J=d((()=>{G||(A&&D?.(),z?.())}),[A,G,D,z]),K=d((e=>{const o=s(I),t=s(T);e?(o&&I(),S((e=>({...e,isFullyOpened:!0})))):(t&&T(),S((e=>({...e,isFullyClosed:!0}))))}),[I,T]);return e(u,{value:q,children:e(r,{afterOpenChange:K,closable:m,css:C,destroyOnClose:y,extra:b,footer:!v&&H,keyboard:x,loading:v,maskClosable:k,open:l,placement:g,title:n,zIndex:20,onClose:J,...M,children:E})})}));export{x as default};
+/*! 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/vef-drawer/props.d.ts

@@ -0,0 +1,97 @@
+import type { ChildrenProps, Consumer, LengthValue, LiteralUnion, Mapper, MaybePromise, Placement, Provider } from "@vef-framework/shared";
+import type { ReactElement, ReactNode } from "react";
+/**
+ * The props of the VefDrawer component.
+ */
+export interface VefDrawerProps extends Required<ChildrenProps> {
+    /**
+     * The title of the drawer.
+     */
+    title: ReactNode;
+    /**
+     * Whether the drawer is open.
+     */
+    open?: boolean;
+    /**
+     * Whether the drawer is closable.
+     * @default true
+     */
+    closable?: boolean;
+    /**
+     * Whether the drawer is closed when the mask is clicked.
+     * @default false
+     */
+    closeOnMaskClick?: boolean;
+    /**
+     * Whether the drawer is closed when the escape key is pressed.
+     * @default true
+     */
+    closeOnEscPress?: boolean;
+    /**
+     * Whether the drawer is destroyed when it is closed.
+     * @default false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Whether the drawer is canceled when it is closed.
+     * @default true
+     */
+    cancelOnClose?: boolean;
+    /**
+     * The placement of the drawer.
+     * @default "right"
+     */
+    placement?: Placement;
+    /**
+     * The width or height of the drawer.
+     * Whether it is width or height, it depends on the value of placement property.
+     */
+    expansionSize?: LiteralUnion<"small" | "medium" | "narrow" | "half" | "wide" | "full", LengthValue>;
+    /**
+     * Whether the drawer is loading.
+     */
+    loading?: boolean;
+    /**
+     * The extra content of the drawer top right corner.
+     */
+    extra?: ReactNode;
+    /**
+     * Whether to show the cancel button.
+     * @default true
+     */
+    showCancelButton?: boolean;
+    /**
+     * The text of the cancel button.
+     * @default "取消"
+     */
+    cancelButtonText?: string;
+    /**
+     * The text of the ok button.
+     * @default "提交"
+     */
+    okButtonText?: string;
+    /**
+     * The actions content of the drawer.
+     */
+    actions?: ReactNode | Mapper<readonly [ReactElement, ReactElement], ReactNode>;
+    /**
+     * The callback function when the ok button is clicked.
+     */
+    onOk?: Provider<MaybePromise<void>>;
+    /**
+     * The callback function when the drawer is closed.
+     */
+    onClose?: Consumer<void>;
+    /**
+     * The callback function when the cancel button is clicked.
+     */
+    onCancel?: Consumer<void>;
+    /**
+     * The callback function when the drawer is opened.
+     */
+    onAfterOpen?: Consumer<void>;
+    /**
+     * The callback function when the drawer is closed.
+     */
+    onAfterClose?: Consumer<void>;
+}