fix lib

comps/form/base/BaseField.tsx

@@ -63,7 +63,7 @@ export const BaseField = (prop: {
             !["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
               ? cx(
                   "field-outer c-overflow-hidden c-flex-1 c-flex c-flex-row c-text-sm c-bg-white",
-                  "c-border c-rounded "
+                  "c-rounded "
                 )
               : "",
             fm.status === "loading"
@@ -76,8 +76,7 @@ export const BaseField = (prop: {
               ? field.focused
                 ? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
                 : "c-border-red-600 c-bg-red-50"
-              : field.focused &&
+              : field.focused && "focused",
-                "c-border-blue-700 c-outline c-outline-blue-700",
             css`
               & > .field-inner {
                 min-height: 35px;

comps/form/field/Field.tsx

@@ -54,7 +54,17 @@ export const Field: FC<FieldProp> = (arg) => {
         w === "½" && "c-w-1/2",
         w === "⅓" && "c-w-1/3",
         w === "¼" && "c-w-1/4",
-        "c-flex-col c-space-y-1"
+        "c-flex-col c-space-y-1",
+        css`
+          .field-outer {
+            border: 1px solid ${field.disabled ? "#ececeb" : "#cecece"};
+
+            &.focused {
+              border: 1px solid #1c4ed8;
+              outline: 1px solid #1c4ed8;
+            }
+          }
+        `
       )}
       {...props}
       ref={typeof arg.field_ref === "function" ? arg.field_ref : undefined}

comps/form/field/FieldInput.tsx

@@ -109,7 +109,7 @@ export const FieldInput: FC<{
         !["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
           ? cx(
               "field-outer c-overflow-hidden c-flex-1 c-flex c-flex-row c-text-sm c-bg-white",
-              "c-border c-rounded "
+              "c-rounded "
             )
           : "",
         fm.status === "loading"
@@ -122,7 +122,7 @@ export const FieldInput: FC<{
           ? field.focused
             ? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
             : "c-border-red-600 c-bg-red-50"
-          : field.focused && "c-border-blue-700 c-outline c-outline-blue-700",
+          : field.focused && "focused",
         css`
           & > .field-inner {
             min-height: 35px;

comps/form/gen/gen-form.ts

@@ -263,6 +263,12 @@ type IForm = { form: any; error: Record<string, string>; fm: FMLocal }
         dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
         name: "submit",
         type: "item",
+        adv: {
+          css: "",
+          js: '<>\n  {\n    /** if */\n    fm.status === "ready" ? (\n      /** then  */\n      <div {...props} className={cx(props.className, "")}>\n        {children}\n      </div>\n    ) : (\n      /** else  */\n      <div {...props} className={cx(props.className, "")}>\n        <FieldLoading />\n      </div>\n    )\n  }\n</>',
+          jsBuilt:
+            'render(/* @__PURE__ */ React.createElement(\n  React.Fragment,\n  null,\n  /** if */\n  fm.status === "ready" ? (\n    /** then  */\n    /* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children)\n  ) : (\n    /** else  */\n    /* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, /* @__PURE__ */ React.createElement(FieldLoading, null))\n  )\n));\n',
+        },
         childs: [
           {
             id: createId(),

comps/form/utils/init.tsx

@@ -107,6 +107,9 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
         };
 
         if (typeof fm.props.on_submit === "function") {
+          fm.status = "saving";
+          fm.render();
+          
           if (fm.props.sonar === "on" && !isEditor) {
             toast.loading(
               <>