@vef-framework/components 1.0.62 → 1.0.64

package/lib/vef-virtual-list/index.cjs

@@ -1,20 +1,234 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("@emotion/react"),i=require("@tanstack/react-virtual"),l=require("@vef-framework/hooks"),a=require("@vef-framework/shared"),r=require("react"),s=require("../vef-auto-sizer/index.cjs"),v=require("../vef-scroll-area/index.cjs"),o={willChange:"transform"},u=t.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const reactVirtual = require('@tanstack/react-virtual');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const react$1 = require('react');
+const index$1 = require('../vef-auto-sizer/index.cjs');
+const index = require('../vef-scroll-area/index.cjs');
+
+const viewportStyle = {
+  willChange: "transform"
+};
+const containerStyle = react.css`
   position: relative;
   width: var(--vef-virtual-list-width, auto);
   height: var(--vef-virtual-list-height, auto);
-`,m=t.css`
+`;
+const virtualItemStyle = react.css`
   position: absolute;
   top: var(--vef-virtual-list-item-top, 0);
   left: var(--vef-virtual-list-item-left, 0);
   width: var(--vef-virtual-list-item-width, auto);
   height: var(--vef-virtual-list-item-height, auto);
   transform: translateX(var(--vef-virtual-list-item-x, 0)) translateY(var(--vef-virtual-list-item-y, 0));
-`,n=t.css`
+`;
+const frameStyle = react.css`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   transform: translateY(var(--vef-virtual-list-frame-y, 0)); 
-`;const h=r.memo((function({className:t,style:h,items:f,renderItem:d,itemClassName:c,itemStyle:x,itemSize:p,autoItemSize:g=!1,gap:y=0,lanes:z=1,itemKey:w,...S}){const j=r.useMemo((()=>r.memo(d)),[d]),$=r.useMemo((()=>{if(a.isFunction(w))return e=>w({index:e,item:f[e]})}),[w,f]),N=r.useMemo((()=>a.isFunction(p)?e=>p({index:e,item:f[e]}):()=>p),[p,f]),b=l.useNormalizedGapSize(y),q=r.useRef(null),{orientation:k}=S,M=i.useVirtualizer({horizontal:"horizontal"===k,count:f.length,getScrollElement:()=>q.current,estimateSize:N,overscan:2,getItemKey:$,gap:b,lanes:z}),E=M.getVirtualItems(),I=100/z,T=r.useMemo((()=>"horizontal"===k?{"--vef-virtual-list-width":`${M.getTotalSize()}px`,"--vef-virtual-list-height":"100%"}:{"--vef-virtual-list-height":`${M.getTotalSize()}px`,"--vef-virtual-list-width":"100%"}),[k,M.getTotalSize()]),V=r.useMemo((()=>g&&"horizontal"!==k?{...o,contain:"strict"}:o),[g,k]),R=(i,l)=>g?e.jsx(v.default,{className:t,height:i,scrollbarSize:"small",style:h,viewportRef:q,viewportStyle:V,width:l,children:e.jsx("div",{css:u,style:T,children:"horizontal"===k?E.map((({index:t,key:i,start:l})=>e.jsx("div",{className:c,css:m,style:{"--vef-virtual-list-item-top":0,"--vef-virtual-list-item-left":0,"--vef-virtual-list-item-width":"auto","--vef-virtual-list-item-height":"100%","--vef-virtual-list-item-x":`${l}px`,"--vef-virtual-list-item-y":0},children:r.createElement(j,{index:t,item:f[t]})},i))):e.jsx("div",{css:n,style:{"--vef-virtual-list-frame-y":`${E[0]?.start??0}px`},children:E.map((({index:t,key:i})=>e.jsx("div",{ref:M.measureElement,className:c,"data-index":t,style:x,children:r.createElement(j,{index:t,item:f[t]})},i)))})})}):e.jsx(v.default,{className:t,height:i,scrollbarSize:"small",style:h,viewportRef:q,viewportStyle:V,width:l,children:e.jsx("div",{css:u,style:T,children:E.map((({index:t,key:i,size:l,start:a,lane:s})=>e.jsx("div",{className:c,css:m,style:"horizontal"===k?{"--vef-virtual-list-item-top":0===s?0:s*I+"%","--vef-virtual-list-item-left":0,"--vef-virtual-list-item-width":`${l}px`,"--vef-virtual-list-item-height":`${I}%`,"--vef-virtual-list-item-x":`${a}px`,"--vef-virtual-list-item-y":0}:{"--vef-virtual-list-item-top":0,"--vef-virtual-list-item-left":0===s?0:s*I+"%","--vef-virtual-list-item-width":`${I}%`,"--vef-virtual-list-item-height":`${l}px`,"--vef-virtual-list-item-x":0,"--vef-virtual-list-item-y":`${a}px`},children:r.createElement(j,{index:t,item:f[t]})},i)))})});return S.autoSize?"horizontal"===S.orientation?e.jsx(s.default,{disableHeight:!0,children:({width:e})=>R("100%",e)}):e.jsx(s.default,{disableWidth:!0,children:({height:e})=>R(e,"100%")}):"horizontal"===S.orientation?R("100%",S.width):R(S.height,"100%")}));h.displayName="VefVirtualList",exports.default=h;
+`;
+function VefVirtualListBase({
+  className,
+  style,
+  items,
+  renderItem,
+  itemClassName,
+  itemStyle,
+  itemSize,
+  autoItemSize = false,
+  gap = 0,
+  lanes = 1,
+  itemKey,
+  ...restProps
+}) {
+  const ListItem = react$1.useMemo(() => react$1.memo(renderItem), [renderItem]);
+  const itemKeyToUse = react$1.useMemo(() => {
+    if (shared.isFunction(itemKey)) {
+      return (index) => itemKey({
+        index,
+        item: items[index]
+      });
+    }
+  }, [itemKey, items]);
+  const itemSizeToUse = react$1.useMemo(() => {
+    if (shared.isFunction(itemSize)) {
+      return (index) => itemSize({
+        index,
+        item: items[index]
+      });
+    }
+    return () => itemSize;
+  }, [itemSize, items]);
+  const normalizedGap = hooks.useNormalizedGapSize(gap);
+  const viewportRef = react$1.useRef(null);
+  const { orientation } = restProps;
+  const virtualizer = reactVirtual.useVirtualizer({
+    horizontal: orientation === "horizontal",
+    count: items.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: itemSizeToUse,
+    overscan: 2,
+    getItemKey: itemKeyToUse,
+    gap: normalizedGap,
+    lanes
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const baseCrossSize = 100 / lanes;
+  const containerSizeStyle = react$1.useMemo(() => {
+    if (orientation === "horizontal") {
+      return {
+        "--vef-virtual-list-width": `${virtualizer.getTotalSize()}px`,
+        "--vef-virtual-list-height": "100%"
+      };
+    }
+    return {
+      "--vef-virtual-list-height": `${virtualizer.getTotalSize()}px`,
+      "--vef-virtual-list-width": "100%"
+    };
+  }, [orientation, virtualizer.getTotalSize()]);
+  const mergedViewportStyle = react$1.useMemo(() => {
+    if (autoItemSize && orientation !== "horizontal") {
+      return {
+        ...viewportStyle,
+        contain: "strict"
+      };
+    }
+    return viewportStyle;
+  }, [autoItemSize, orientation]);
+  const getVirtualListNode = (height, width) => {
+    if (autoItemSize) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          className,
+          height,
+          scrollbarSize: "small",
+          style,
+          viewportRef,
+          viewportStyle: mergedViewportStyle,
+          width,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: containerStyle, style: containerSizeStyle, children: orientation === "horizontal" ? virtualItems.map(
+            ({
+              index,
+              key,
+              start
+            }) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: itemClassName,
+                css: virtualItemStyle,
+                style: {
+                  "--vef-virtual-list-item-top": 0,
+                  "--vef-virtual-list-item-left": 0,
+                  "--vef-virtual-list-item-width": "auto",
+                  "--vef-virtual-list-item-height": "100%",
+                  "--vef-virtual-list-item-x": `${start}px`,
+                  "--vef-virtual-list-item-y": 0
+                },
+                children: react$1.createElement(ListItem, {
+                  index,
+                  item: items[index]
+                })
+              },
+              key
+            )
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              css: frameStyle,
+              style: {
+                "--vef-virtual-list-frame-y": `${virtualItems[0]?.start ?? 0}px`
+              },
+              children: virtualItems.map(
+                ({ index, key }) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: virtualizer.measureElement,
+                    className: itemClassName,
+                    "data-index": index,
+                    style: itemStyle,
+                    children: react$1.createElement(ListItem, {
+                      index,
+                      item: items[index]
+                    })
+                  },
+                  key
+                )
+              )
+            }
+          ) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        className,
+        height,
+        scrollbarSize: "small",
+        style,
+        viewportRef,
+        viewportStyle: mergedViewportStyle,
+        width,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: containerStyle, style: containerSizeStyle, children: virtualItems.map(
+          ({
+            index,
+            key,
+            size,
+            start,
+            lane
+          }) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: itemClassName,
+              css: virtualItemStyle,
+              style: orientation === "horizontal" ? {
+                "--vef-virtual-list-item-top": lane === 0 ? 0 : `${lane * baseCrossSize}%`,
+                "--vef-virtual-list-item-left": 0,
+                "--vef-virtual-list-item-width": `${size}px`,
+                "--vef-virtual-list-item-height": `${baseCrossSize}%`,
+                "--vef-virtual-list-item-x": `${start}px`,
+                "--vef-virtual-list-item-y": 0
+              } : {
+                "--vef-virtual-list-item-top": 0,
+                "--vef-virtual-list-item-left": lane === 0 ? 0 : `${lane * baseCrossSize}%`,
+                "--vef-virtual-list-item-width": `${baseCrossSize}%`,
+                "--vef-virtual-list-item-height": `${size}px`,
+                "--vef-virtual-list-item-x": 0,
+                "--vef-virtual-list-item-y": `${start}px`
+              },
+              children: react$1.createElement(ListItem, {
+                index,
+                item: items[index]
+              })
+            },
+            key
+          )
+        ) })
+      }
+    );
+  };
+  if (!restProps.autoSize) {
+    if (restProps.orientation === "horizontal") {
+      return getVirtualListNode("100%", restProps.width);
+    }
+    return getVirtualListNode(restProps.height, "100%");
+  }
+  if (restProps.orientation === "horizontal") {
+    return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { disableHeight: true, children: ({ width }) => getVirtualListNode("100%", width) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { disableWidth: true, children: ({ height }) => getVirtualListNode(height, "100%") });
+}
+const VefVirtualList = react$1.memo(VefVirtualListBase);
+VefVirtualList.displayName = "VefVirtualList";
+
+exports.default = VefVirtualList;
 /*! 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/lib/vef-virtual-list/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! 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

@@ -1,7 +1,7 @@
 {
   "name": "@vef-framework/components",
   "type": "module",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "private": false,
   "packageManager": "pnpm@9.15.0",
   "description": "Components fundamental to the VEF framework",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "3.2.2",
     "@radix-ui/react-scroll-area": "1.2.2",
     "@tanstack/react-virtual": "3.11.2",
-    "@vef-framework/core": "1.0.62",
-    "@vef-framework/hooks": "1.0.62",
-    "@vef-framework/shared": "1.0.62",
+    "@vef-framework/core": "1.0.64",
+    "@vef-framework/hooks": "1.0.64",
+    "@vef-framework/shared": "1.0.64",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
     "lucide-react": "0.469.0",

package/types/vef-crud-page/components/crud-actions.d.ts

@@ -1,9 +1,9 @@
-import type { ActionButton, ObjectType, QueryApi, StringKey } from "@vef-framework/shared";
+import type { ActionButton, ObjectType, QueryApi } from "@vef-framework/shared";
 import type { CrudContext, CrudFormApis, CrudSchema } from "../types";
 /**
  * The props of VefCrudActions component.
  */
-export interface VefCrudActionsProps<Record extends ObjectType, Params 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>> {
+export interface VefCrudActionsProps<Model extends ObjectType, Params extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>> {
     /**
      * The api of the table.
      */
@@ -15,7 +15,7 @@ export interface VefCrudActionsProps<Record extends ObjectType, Params extends O
     /**
      * The action buttons of the crud page.
      */
-    actionButtons?: Array<ActionButton<CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>;
+    actionButtons?: Array<ActionButton<CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>;
 }
-declare function VefCrudActions<Record extends ObjectType, Params 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>>({ tableApi, tableApiParams, actionButtons, }: VefCrudActionsProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function VefCrudActions<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ tableApi, tableApiParams, actionButtons, }: VefCrudActionsProps<Model, Params, Record, Filter, Form, Result, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
 export default VefCrudActions;

package/types/vef-crud-page/components/crud-filter.d.ts

@@ -1,11 +1,11 @@
-import type { ActionButton, ObjectType, QueryApi, StringKey } from "@vef-framework/shared";
+import type { ActionButton, ObjectType, QueryApi } from "@vef-framework/shared";
 import { type ReactNode } from "react";
 import type { CrudContext, CrudFormApis, CrudSchema } from "../types";
 import { type FilterSchema } from "../../vef-filter";
 /**
  * The props of VefCrudFilter component.
  */
-export interface CrudFilterProps<Record extends ObjectType, Params extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> {
+export interface CrudFilterProps<Model extends ObjectType, Params extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>> {
     /**
      * The title of the crud page.
      */
@@ -21,11 +21,11 @@ export interface CrudFilterProps<Record extends ObjectType, Params extends Objec
     /**
      * The schema of the crud filter.
      */
-    filterSchema: FilterSchema<Pick<Record, FilterKeys[number]>>;
+    filterSchema: FilterSchema<Filter>;
     /**
      * The action buttons of the crud page.
      */
-    actionButtons?: Array<ActionButton<CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>;
+    actionButtons?: Array<ActionButton<CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>;
 }
-declare function VefCrudFilter<Record extends ObjectType, Params extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>>({ title, tableApi, tableApiParams, filterSchema, actionButtons, }: CrudFilterProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function VefCrudFilter<Model extends ObjectType, Params extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ title, tableApi, tableApiParams, filterSchema, actionButtons, }: Readonly<CrudFilterProps<Model, Params, Record, Filter, Form, Result, Schema, FormApis>>): import("@emotion/react/jsx-runtime").JSX.Element;
 export default VefCrudFilter;

package/types/vef-crud-page/components/crud-footer.d.ts

@@ -1,10 +1,10 @@
-import { type ActionButton, type Mapper, type MutationApi, type ObjectType, type QueryApi, type StringKey } from "@vef-framework/shared";
+import { type ActionButton, type Mapper, type MutationApi, type ObjectType, type QueryApi } from "@vef-framework/shared";
 import { type ReactNode } from "react";
 import type { BatchActionButtonContext, CrudFormApis, CrudSchema } from "../types";
 /**
  * The props of the VefCrudFooter component.
  */
-export interface VefCrudFooterProps<Record extends ObjectType, Params extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> {
+export interface VefCrudFooterProps<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>> {
     /**
      * The table api.
      */
@@ -20,12 +20,12 @@ export interface VefCrudFooterProps<Record extends ObjectType, Params extends Ob
     /**
      * The batch action buttons.
      */
-    batchActionButtons?: Array<ActionButton<BatchActionButtonContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>;
+    batchActionButtons?: Array<ActionButton<BatchActionButtonContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>;
     /**
      * The mapper of the selection summary.
      */
     selectionSummary?: Mapper<Record[], ReactNode>;
 }
-declare function VefCrudFooterBase<Record extends ObjectType, Params 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>>({ tableApi, tableApiParams, batchDeletionApi, batchActionButtons, selectionSummary, }: VefCrudFooterProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function VefCrudFooterBase<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ tableApi, tableApiParams, batchDeletionApi, batchActionButtons, selectionSummary, }: Readonly<VefCrudFooterProps<Model, Record, Params, Filter, Form, Result, Schema, FormApis>>): import("@emotion/react/jsx-runtime").JSX.Element | null;
 declare const VefCrudFooter: typeof VefCrudFooterBase;
 export default VefCrudFooter;

package/types/vef-crud-page/components/crud-form-modal.d.ts

@@ -1,18 +1,18 @@
-import type { AnyValue, ObjectType, StringKey } from "@vef-framework/shared";
+import type { ObjectType } from "@vef-framework/shared";
 import type { FormSchema } from "../../vef-form";
 import type { CrudFormApis, CrudFormScene, CrudSchema } from "../types";
 /**
  * The props of VefCrudFormModal component.
  */
-export interface CrudFormModalProps<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>> {
+export interface CrudFormModalProps<Model extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>> {
     /**
      * The schema of the form.
      */
-    formSchema: FormSchema<Pick<Record, FormKeys[number]>, CrudFormScene<FormApis>>;
+    formSchema: FormSchema<Form, CrudFormScene<FormApis>>;
     /**
      * The apis of the form.
      */
-    formApis: CrudFormApis<Record, FormKeys, FormResult, Schema>;
+    formApis: CrudFormApis<Model, Record, Filter, Form, Result, Schema>;
 }
-declare function VefCrudFormModal<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>>({ formSchema, formApis, }: CrudFormModalProps<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function VefCrudFormModal<Model extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ formSchema, formApis, }: Readonly<CrudFormModalProps<Model, Record, Filter, Form, Result, Schema, FormApis>>): import("@emotion/react/jsx-runtime").JSX.Element;
 export default VefCrudFormModal;

package/types/vef-crud-page/components/crud-header.d.ts

@@ -1,11 +1,11 @@
-import type { ActionButton, ObjectType, QueryApi, StringKey } from "@vef-framework/shared";
+import type { ActionButton, ObjectType, QueryApi } from "@vef-framework/shared";
 import { type ReactNode } from "react";
 import type { FilterItem } from "../../vef-filter";
 import type { CrudContext, CrudFormApis, CrudSchema } from "../types";
 /**
  * The props of VefCrudHeader component.
  */
-export interface VefCrudHeaderProps<Record extends ObjectType, Params 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>> {
+export interface VefCrudHeaderProps<Model extends ObjectType, Params extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>> {
     /**
      * The title of the crud page.
      */
@@ -21,12 +21,12 @@ export interface VefCrudHeaderProps<Record extends ObjectType, Params extends Ob
     /**
      * The schema of the crud filter.
      */
-    filterItems: Array<FilterItem<Pick<Record, FilterKeys[number]>>>;
+    filterItems: Array<FilterItem<Filter>>;
     /**
      * The action buttons of the crud page.
      */
-    actionButtons?: Array<ActionButton<CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>;
+    actionButtons?: Array<ActionButton<CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>;
 }
-declare function VefCrudHeaderBase<Record extends ObjectType, Params 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>>({ title, tableApi, tableApiParams, filterItems, actionButtons, }: VefCrudHeaderProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function VefCrudHeaderBase<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ title, tableApi, tableApiParams, filterItems, actionButtons, }: Readonly<VefCrudHeaderProps<Model, Params, Record, Filter, Form, Result, Schema, FormApis>>): import("@emotion/react/jsx-runtime").JSX.Element | null;
 declare const VefCrudHeader: typeof VefCrudHeaderBase;
 export default VefCrudHeader;

package/types/vef-crud-page/components/crud-table.d.ts

@@ -1,10 +1,10 @@
-import type { Except, MutationApi, ObjectType, PaginationParams, PaginationResult, QueryApi, QueryConfig, StringKey } from "@vef-framework/shared";
+import type { Except, MutationApi, ObjectType, PaginationParams, PaginationResult, QueryApi, QueryConfig } from "@vef-framework/shared";
 import type { CrudContext, CrudFilterVirtualKey, CrudFormApis, CrudSchema } from "../types";
 import { type TableSchema, type VefTableProps } from "../../vef-table";
 /**
  * The base props of VefCrudTable component.
  */
-type BaseCrudTableProps<Record extends ObjectType, Params extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, 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" | "multipleSelection" | "showSelectAllCheckbox" | "enableRowClick" | "enableRowClickForSelection" | "selectedKeys" | "defaultSelectedKeys" | "onRowSelectionChange" | "onRowSelect" | "onRowDeselect" | "onRowClick" | keyof QueryConfig> & {
+type BaseCrudTableProps<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>> = Except<VefTableProps<Record, Params, Record, CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>, "schema" | "paginated" | "multipleSelection" | "showSelectAllCheckbox" | "enableRowClick" | "enableRowClickForSelection" | "selectedKeys" | "defaultSelectedKeys" | "onRowSelectionChange" | "onRowSelect" | "onRowDeselect" | "onRowClick" | keyof QueryConfig> & {
     /**
      * The schema of the table.
      */
@@ -25,7 +25,7 @@ type BaseCrudTableProps<Record extends ObjectType, Params extends ObjectType, Fi
 /**
  * The props of VefCrudTable component without pagination.
  */
-type DefaultCrudTableProps<Record extends ObjectType, Params extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> = BaseCrudTableProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis> & {
+type DefaultCrudTableProps<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>> = BaseCrudTableProps<Model, Record, Params, Filter, Form, Result, Schema, FormApis> & {
     /**
      * Whether to allow pagination.
      */
@@ -33,12 +33,12 @@ type DefaultCrudTableProps<Record extends ObjectType, Params extends ObjectType,
     /**
      * The api of the table.
      */
-    api: Readonly<QueryApi<Params & Except<Pick<Record, FilterKeys[number]>, CrudFilterVirtualKey<Schema>>, Record[]>>;
+    api: Readonly<QueryApi<Params & Except<Filter, CrudFilterVirtualKey<Schema>>, Record[]>>;
 };
 /**
  * The props of VefCrudTable component without pagination.
  */
-type PaginatedCrudTableProps<Record extends ObjectType, Params extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> = BaseCrudTableProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis> & {
+type PaginatedCrudTableProps<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>> = BaseCrudTableProps<Model, Record, Params, Filter, Form, Result, Schema, FormApis> & {
     /**
      * Whether to allow pagination.
      */
@@ -46,12 +46,12 @@ type PaginatedCrudTableProps<Record extends ObjectType, Params extends ObjectTyp
     /**
      * The api of the table.
      */
-    api: Readonly<QueryApi<Params & PaginationParams & Except<Pick<Record, FilterKeys[number]>, CrudFilterVirtualKey<Schema>>, PaginationResult<Record>>>;
+    api: Readonly<QueryApi<Params & PaginationParams & Except<Filter, CrudFilterVirtualKey<Schema>>, PaginationResult<Record>>>;
 };
 /**
  * The props of VefCrudTable component.
  */
-export type CrudTableProps<Record extends ObjectType, Params extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>> = DefaultCrudTableProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis> | PaginatedCrudTableProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis>;
-declare function VefCrudTableBase<Record extends ObjectType, Params extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>>({ api, apiParams, deletionApi, paginated, schema, selectable, operationButtons, ...tableProps }: CrudTableProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
+export type CrudTableProps<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>> = DefaultCrudTableProps<Model, Record, Params, Filter, Form, Result, Schema, FormApis> | PaginatedCrudTableProps<Model, Record, Params, Filter, Form, Result, Schema, FormApis>;
+declare function VefCrudTableBase<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ api, apiParams, deletionApi, paginated, schema, selectable, operationButtons, ...tableProps }: CrudTableProps<Model, Record, Params, Filter, Form, Result, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
 declare const VefCrudTable: typeof VefCrudTableBase;
 export default VefCrudTable;

package/types/vef-crud-page/hooks/use-action-buttons.d.ts

@@ -1,4 +1,4 @@
-import { type ActionButton, type ObjectType, type StringKey } from "@vef-framework/shared";
+import { type ActionButton, type ObjectType } from "@vef-framework/shared";
 import type { CrudContext, CrudFormApis, CrudFormScene, CrudSchema } from "../types";
 /**
  * The hook to create the action buttons.
@@ -6,11 +6,11 @@ import type { CrudContext, CrudFormApis, CrudFormScene, CrudSchema } from "../ty
  * @param actionButtons - The action buttons.
  * @returns The action buttons.
  */
-export declare function useActionButtons<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>>(actionButtons?: Array<ActionButton<CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>): (ActionButton<CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>> | {
+export declare function useActionButtons<Model extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>(actionButtons?: Array<ActionButton<CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>): (ActionButton<CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>> | {
     label: string;
     key: string;
     icon: import("@emotion/react/jsx-runtime").JSX.Element;
     color: "primary";
     permissions: ("creation" extends infer T ? T extends "creation" ? T extends CrudFormScene<FormApis> ? { [K in CrudFormScene<FormApis>]: string; }[T] : any : never : never)[];
-    onClick: ({ openForm, refetch }: CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>) => void;
+    onClick: ({ openForm, refetch }: CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>) => void;
 })[];

package/types/vef-crud-page/hooks/use-crud-context.d.ts

@@ -1,8 +1,8 @@
-import type { ObjectType, StringKey } from "@vef-framework/shared";
+import type { ObjectType } from "@vef-framework/shared";
 import type { CrudContext, CrudFormApis, CrudSchema } from "../types";
 /**
  * The hook to create the crud context.
  *
  * @returns The crud context.
  */
-export declare function useCrudContext<Record extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<Record>>, FormKeys extends ReadonlyArray<StringKey<Record>>, FormResult, Schema extends CrudSchema<Record, FilterKeys, FormKeys> = CrudSchema<Record, FilterKeys, FormKeys>, FormApis extends CrudFormApis<Record, FormKeys, FormResult, Schema> = CrudFormApis<Record, FormKeys, FormResult, Schema>>(): CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>;
+export declare function useCrudContext<Model extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>(): CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>;

package/types/vef-crud-page/hooks/use-crud-schema.d.ts

@@ -9,9 +9,9 @@ import type { CrudSchema } from "../types";
  * @param schema The crud schema
  * @returns The table schema, filter schema and form schema
  */
-export declare function useCrudSchema<T extends ObjectType, FilterKeys extends ReadonlyArray<StringKey<T>>, FormKeys extends ReadonlyArray<StringKey<T>>>(schema: CrudSchema<T, FilterKeys, FormKeys>): {
+export declare function useCrudSchema<Model extends ObjectType, T extends ObjectType, Filter extends ObjectType, Form extends ObjectType>(schema: CrudSchema<Model, T, Filter, Form>): {
     tableSchema: TableSchema<T>;
-    filterItems: FilterItem<Pick<T, FilterKeys[number]>>[];
-    formGroups: FormGroup<Pick<T, FormKeys[number]>, FormKeys[number], import("../..").FormScene>[];
-    filterValueAsDefaultKeys: FormKeys[number][];
+    filterItems: FilterItem<Filter>[];
+    formGroups: FormGroup<Form, StringKey<Form>, import("../..").FormScene>[];
+    filterValueAsDefaultKeys: StringKey<Filter>[];
 };

package/types/vef-crud-page/hooks/use-operation-buttons.d.ts

@@ -1,4 +1,4 @@
-import { type ActionButton, type MutationApi, type ObjectType, type StringKey } from "@vef-framework/shared";
+import { type ActionButton, type MutationApi, type ObjectType } from "@vef-framework/shared";
 import type { OperationButtonContext } from "../../vef-table";
 import type { CrudContext, CrudFormApis, CrudSchema } from "../types";
 /**
@@ -8,4 +8,4 @@ import type { CrudContext, CrudFormApis, CrudSchema } from "../types";
  * @param operationButtons - The operation buttons.
  * @returns The operation buttons.
  */
-export declare function useOperationButtons<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>>(deletionApi?: Readonly<MutationApi<Record, void>>, operationButtons?: Array<ActionButton<OperationButtonContext<Record, CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>>): ActionButton<OperationButtonContext<Record, CrudContext<Record, FilterKeys, FormKeys, FormResult, Schema, FormApis>>>[];
+export declare function useOperationButtons<Model extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>(deletionApi?: Readonly<MutationApi<Record, void>>, operationButtons?: Array<ActionButton<OperationButtonContext<Record, CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>>): ActionButton<OperationButtonContext<Record, CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>[];

package/types/vef-crud-page/index.d.ts

@@ -1,6 +1,6 @@
-import { type AnyValue, type EmptyObject, type ObjectType, type ObjectValue, type StringKey } from "@vef-framework/shared";
+import { type AnyValue, type EmptyObject, type ObjectType, type ObjectValue } from "@vef-framework/shared";
 import type { VefCrudPageProps } from "./props";
 import type { BatchActionButtonContext, CrudContext, CrudFormApis, CrudItem, CrudSchema } from "./types";
-declare function VefCrudPage<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>>({ schema, formApis, onFormOpen, onBeforeSubmit, onSubmitSuccess, ...restProps }: VefCrudPageProps<Record, Params, FilterKeys, FormKeys, FormResult, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function VefCrudPage<Model extends ObjectType = ObjectValue, Record extends ObjectType = ObjectValue, Params extends ObjectType = EmptyObject, Filter extends ObjectType = ObjectValue, Form extends ObjectType = ObjectValue, Result = AnyValue, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ schema, formApis, onFormOpen, onBeforeSubmit, onSubmitSuccess, ...restProps }: VefCrudPageProps<Model, Params, Record, Filter, Form, Result, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
 export type { BatchActionButtonContext, CrudContext, CrudItem, CrudSchema, VefCrudPageProps };
 export default VefCrudPage;