fix base-form

comps/form/base/BaseForm.tsx

@@ -94,7 +94,6 @@ export const BaseForm = <T extends Record<string, any>>({
       )}
     >
       {toaster_el && createPortal(<Toaster />, toaster_el)}
-
       <div
         className={cx(
           "form-inner c-flex-1 c-flex c-flex-row c-flex-wrap c-items-start c-content-start c-absolute c-inset-0",

comps/form/base/utils/DivForm.tsx

@@ -7,9 +7,11 @@ export const DivForm = forwardRef<
     HTMLFormElement
   > & { tag: "form" | "div" }
 >((arg, ref) => {
+  const props = { ...arg } as any;
+  delete props.tag;
   if (arg.tag === "div") {
-    const props = { ...arg } as any;
     if (props.onSubmit) delete props.onSubmit;
+
     return (
       <div {...props} ref={ref}>
         {arg.children}
@@ -17,7 +19,7 @@ export const DivForm = forwardRef<
     );
   }
   return (
-    <form {...arg} ref={ref}>
+    <form {...props} ref={ref}>
       {arg?.children}
     </form>
   );

comps/form/field/Field.tsx

@@ -67,7 +67,7 @@ export const Field: FC<FieldProp> = (arg) => {
         arg.on_change({ value: fm.data?.[name], name, fm });
       }
 
-      if (fm.deps.md) {
+      if (fm.deps?.md) {
         fm.save_status = "unsaved";
       }
 
@@ -134,8 +134,8 @@ export const Field: FC<FieldProp> = (arg) => {
           : css`
               padding: 5px 0px 0px 10px;
             `,
-        w === "auto" && fm.size.field === "full" && "c-w-full",
-        w === "auto" && fm.size.field === "half" && "c-w-1/2",
+        w === "auto" && fm.size?.field === "full" && "c-w-full",
+        w === "auto" && fm.size?.field === "half" && "c-w-1/2",
         w === "full" && "c-w-full",
         w === "¾" && "c-w-3/4",
         w === "½" && "c-w-1/2",
@@ -175,7 +175,7 @@ export const Field: FC<FieldProp> = (arg) => {
           fm={fm}
           PassProp={arg.PassProp}
           child={arg.child}
-          _item={arg._item}
+          _item={arg._item!}
           arg={arg}
         />
         {field.desc && (

comps/form/field/table-edit/TableEdit.tsx

@@ -197,10 +197,15 @@ export const TableEdit: FC<{
             .typeahead-arrow {
               margin-right: 10px;
             }
+            tbody > .form {
+              overflow: visible;
+              & > .form-inner {
+                position: relative;
+              }
+            }
           `
         )}
       >
-        {/* {JSON.stringify(value.map((e) => e.id))} */}
         <table
           className={cx(
             "c-table-auto",
@@ -266,12 +271,17 @@ export const TableEdit: FC<{
               <>
                 {value.map((row: any, idx: number) => {
                   return (
-                    <BaseForm name="table-edit-form" tag={"div"} data={row}>
+                    <BaseForm
+                      key={idx}
+                      name={`tef-${idx}`}
+                      tag={"div"}
+                      data={row}
+                    >
                       {(form) => {
                         return (
                           <tr
                             className={cx(
-                              "c-border-b 	",
+                              "c-border-b c-py-1",
                               idx !== value.length - 1
                                 ? "c-border-gray-300"
                                 : ""
@@ -281,6 +291,9 @@ export const TableEdit: FC<{
                               return (
                                 <td
                                   className={cx(
+                                    css`
+                                      vertical-align: top;
+                                    `,
                                     header.width || 0 > 0
                                       ? css`
                                           width: ${header.width || 0}px;
@@ -288,27 +301,20 @@ export const TableEdit: FC<{
                                       : ""
                                   )}
                                 >
-                                  <div
-                                    className={cx(
-                                      "c-flex c-flex-row c-pb-1 c-w-full c-h-full",
-                                      idx === 0 && "c-pt-1"
-                                    )}
-                                  >
-                                    {header.renderCell({
-                                      props: {
-                                        row: row,
-                                        rowIdx: idx,
-                                        column: header,
-                                        fm: {
-                                          ...form.fm,
-                                          data: row,
-                                        },
+                                  {header.renderCell({
+                                    props: {
+                                      row: row,
+                                      rowIdx: idx,
+                                      column: header,
+                                      fm: {
+                                        ...form.fm,
+                                        data: row,
                                       },
-                                      tbl: {
-                                        data: value,
-                                      },
-                                    })}
-                                  </div>
+                                    },
+                                    tbl: {
+                                      data: value,
+                                    },
+                                  })}
                                 </td>
                               );
                             })}
@@ -333,7 +339,6 @@ export const TableEdit: FC<{
               } else {
                 fm.data[name] = [{ ...e }];
               }
-              console.log("CEKK");
               fm.render();
               setTimeout(() => {
                 const last = Array.from(

comps/form/typings.ts

@@ -135,7 +135,7 @@ export type FieldProp = {
 export type FMInternal = {
   status: "init" | "resizing" | "loading" | "saving" | "ready";
   data: any;
-  deps: any;
+  deps?: any;
   reload: () => Promise<void>;
   submit: () => Promise<boolean>;
   events: {

comps/form/utils/init.tsx

@@ -14,10 +14,10 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
     if (["PassProp", "body", "meta", "item"].includes(k)) continue;
     (fm.props as any)[k] = v;
   }
-  const { on_load, sonar } = fm.props;
+  const { on_load, sonar } = (fm.props || {});
   fm.error = formError(fm);
   fm.field_def = {};
-  const defs = parseGenField(fm.props.gen_fields);
+  const defs = parseGenField(fm.props?.gen_fields);
   for (const d of defs) {
     fm.field_def[d.name] = d;
   }
@@ -223,11 +223,11 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
     if (fm.status !== "ready") {
       return;
     }
-    if (typeof fm.props.on_submit === "function") {
+    if (typeof fm.props?.on_submit === "function") {
       fm.status = "saving";
       fm.render();
 
-      if (fm.props.sonar === "on" && !isEditor) {
+      if (fm.props?.sonar === "on" && !isEditor) {
         toast.loading(
           <>
             <Loader2 className="c-h-4 c-w-4 c-animate-spin" />
@@ -237,7 +237,7 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
       }
       const form = JSON.parse(JSON.stringify(fm.data));
 
-      if (fm.deps.md) {
+      if (fm.deps?.md) {
         const md = fm.deps.md;
         const last = md.params.links[md.params.links.length - 1];
         if (last) {
@@ -298,7 +298,7 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
       return success;
     }
   };
-  if (typeof fm.props.on_init === "function") {
+  if (typeof fm.props?.on_init === "function") {
     fm.props.on_init({ fm, submit: fm.submit, reload: fm.reload });
   }
 };