add fn for field prop

comps/form/typings.ts

@@ -28,12 +28,12 @@ export type FMProps = {
 };
 
 export type FieldProp = {
-  name: string;
-  label: string;
+  name: string | (() => string);
+  label: string | (() => string);
   desc?: string;
   props?: any;
   fm: FMLocal;
-  type: "text" | "relation" | "switch" | "input" | "single-option"| "multi-option";
+  type: "text" | "relation" | "switch" | "input" | "single-option" | "multi-option";
   // | "number"
   // | "textarea"
   // | "dropdown"
@@ -45,7 +45,7 @@ export type FieldProp = {
   // | "slider"
   // | "master-link"
   // | "custom";
-  required: "y" | "n";
+  required: ("y" | "n") | (() => "y" | "n");
   required_msg: (name: string) => string;
   options: FieldOptions;
   on_change: (arg: { value: any }) => void | Promise<void>;
@@ -104,12 +104,6 @@ export type FMInternal = {
 };
 export type FMLocal = FMInternal & { render: () => void };
 
-type FieldInternalProp = {
-  text: PropTypeText;
-  number: PropTypeText;
-  relation: PropTypeRelation;
-  switch: PropTypeSwitch;
-};
 
 export type FieldInternal<T extends FieldProp["type"]> = {
   status: "init" | "loading" | "ready";
@@ -130,7 +124,7 @@ export type FieldInternal<T extends FieldProp["type"]> = {
   input: Record<string, any> & {
     render: () => void;
   };
-  prop?: FieldInternalProp[T];
+  prop?: any;
 };
 export type FieldLocal = FieldInternal<any> & {
   render: () => void;

comps/form/utils/use-field.tsx

@@ -11,16 +11,20 @@ export const useField = (arg: FieldProp) => {
     input: {},
   } as any);
 
+  const name = typeof arg.name === 'string' ? arg.name : arg.name();
+  const label = typeof arg.label === 'string' ? arg.label : arg.label();
+  const required = typeof arg.required === 'string' ? arg.required : arg.required();
+
   const update_field = {
-    name: arg.name.replace(/\s*/gi, ""),
-    label: arg.label,
+    name: name.replace(/\s*/gi, ""),
+    label: label,
     type: arg.type,
     desc: arg.desc,
     prefix: arg.prefix,
     suffix: arg.suffix,
     width: arg.width,
     custom: arg.custom,
-    required: arg.required === "y",
+    required: required === "y",
     required_msg: arg.required_msg,
     disabled: arg.disabled === "y",
   };
@@ -33,9 +37,9 @@ export const useField = (arg: FieldProp) => {
   const fm = arg.fm;
 
   useEffect(() => {
-    if (field.status === "init" || !fm.fields[arg.name]) {
+    if (field.status === "init" || !fm.fields[name]) {
       field.status = "ready";
-      fm.fields[arg.name] = field;
+      fm.fields[name] = field;
       field.render();
     }
   }, []);