shadcn-zod-formkit 1.9.1 → 1.10.0

package/dist/index.cjs

@@ -4519,44 +4519,95 @@ var SelectInput = class extends BaseInput {
 };
 var FieldSelect = ({ form, input, isSubmitting }) => {
   const mockInputOptions = [
-    { id: 1, name: "MOCK OPTION - PERMISO 1", checked: false },
-    { id: 2, name: "MOCK OPTION - PERMISO 2", checked: true },
-    { id: 3, name: "MOCK OPTION - PERMISO 3", checked: false },
-    { id: 4, name: "MOCK OPTION - PERMISO 4", checked: false }
+    { value: 1, id: 1, name: "MOCK OPTION - PERMISO 1" },
+    { value: 2, id: 2, name: "MOCK OPTION - PERMISO 2" },
+    { value: 3, id: 3, name: "MOCK OPTION - PERMISO 3" },
+    { value: 4, id: 4, name: "MOCK OPTION - PERMISO 4" }
   ];
-  let lista = input?.listConfig?.list ?? mockInputOptions;
-  if (lista == void 0) lista = [];
-  const value = input.value ?? "";
+  const [lista, setLista] = React3.useState(
+    input?.listConfig?.list?.every((item) => "name" in item) ? input.listConfig.list : mockInputOptions
+  );
+  const [loading, setLoading] = React3.useState(false);
+  const [value, setValue] = React3.useState(input.value?.toString() ?? "");
   const optionValue = input?.listConfig?.optionValue ?? input.optionValue ?? "id";
+  React3.useEffect(() => {
+    const currentValue = form.getValues(input.name);
+    if (!currentValue && input.value) {
+      form.setValue(input.name, input.value);
+      setValue(input.value.toString());
+    }
+  }, [form, input.name, input.value]);
+  React3.useEffect(() => {
+    if (input.dependsOn && input.loadOptions) {
+      const subscription = form.watch(async (values) => {
+        const dependencyValue = values[input.dependsOn];
+        if (dependencyValue) {
+          try {
+            setLoading(true);
+            const newOptions = await input.loadOptions(dependencyValue);
+            setLista(newOptions);
+          } catch (err) {
+            console.error(`Error loading options for ${input.name}:`, err);
+            setLista([]);
+          } finally {
+            setLoading(false);
+          }
+        } else {
+          setLista([]);
+          form.setValue(input.name, "");
+        }
+      });
+      return () => subscription.unsubscribe?.();
+    }
+  }, [form, input.dependsOn, input.loadOptions, input.name]);
   const getValue = (item) => {
-    if (optionValue == "name") return item[optionValue];
-    return item.value ?? item.id;
+    const val = optionValue === "name" ? item.name : item.value?.toString?.() ?? item.id?.toString();
+    return val?.toString() ?? "";
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
       control: form.control,
       name: input.name,
-      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex flex-row items-center justify-between rounded-lg border p-3 shadow-lg bg-blue-100/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5 pr-5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
-          input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
-          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Select,
-          {
-            disabled: input.disabled || isSubmitting,
-            onValueChange: field.onChange,
-            defaultValue: value.toString(),
-            value: field.value?.toString() ?? value.toString(),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-[60%] bg-black/10 dark:bg-white/25", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: input.placeHolder }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: lista.filter((item) => item.name !== void 0).map((item) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: getValue(item).toString(), children: item.name }, item.id)) })
-            ]
-          }
-        ) })
-      ] })
+      render: ({ field }) => {
+        const currentValue = field.value?.toString() ?? value;
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex flex-row items-center justify-between rounded-lg border p-3 shadow-lg bg-blue-100/20", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5 pr-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+            input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+            /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Select,
+            {
+              disabled: input.disabled || isSubmitting || loading,
+              onValueChange: (val) => {
+                field.onChange(val);
+                setValue(val);
+                if (input.listConfig?.onOptionChange) {
+                  const selectedItem = lista.find(
+                    (item) => getValue(item) === val
+                  );
+                  input.listConfig.onOptionChange(selectedItem);
+                }
+              },
+              value: currentValue || void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-[60%] bg-black/10 dark:bg-white/25", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectValue,
+                  {
+                    placeholder: loading ? "Cargando..." : input.placeHolder ?? "Seleccionar"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
+                  lista.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)),
+                  lista.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-sm text-muted-foreground", children: "No hay opciones disponibles" })
+                ] })
+              ]
+            }
+          ) })
+        ] });
+      }
     },
     input.name
   );
@@ -5063,34 +5114,40 @@ var InputFactory = class {
     return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 space-y-3", children: instance.render() });
   }
 };
-function getDefaultValues(entity) {
+function getDefaultValues(entity, fields) {
   const defaults = {};
-  if (!entity) return defaults;
-  for (const key in entity) {
-    const value = entity[key];
-    if (value === null || value === void 0) {
-      defaults[key] = "";
-      continue;
-    }
-    switch (typeof value) {
-      case "string":
-        defaults[key] = value ?? "";
-        break;
-      case "number":
-        defaults[key] = value ?? 0;
-        break;
-      case "boolean":
-        defaults[key] = value ?? false;
-        break;
-      case "object":
-        if (Array.isArray(value)) {
-          defaults[key] = [...value];
-        } else {
-          defaults[key] = { ...value };
-        }
-        break;
-      default:
-        defaults[key] = value;
+  if (entity) {
+    for (const key in entity) {
+      const value = entity[key];
+      if (value === null || value === void 0) {
+        defaults[key] = "";
+        continue;
+      }
+      switch (typeof value) {
+        case "string":
+          defaults[key] = value;
+          break;
+        case "number":
+          defaults[key] = value;
+          break;
+        case "boolean":
+          defaults[key] = value;
+          break;
+        case "object":
+          defaults[key] = Array.isArray(value) ? [...value] : { ...value };
+          break;
+        default:
+          defaults[key] = value;
+      }
+    }
+  }
+  if (fields) {
+    const flatFields = fields.flat();
+    for (const field of flatFields) {
+      const key = field.name;
+      if (defaults[key] === void 0) {
+        defaults[key] = field.value ?? field.defaultValue ?? "";
+      }
     }
   }
   return defaults;
@@ -5184,6 +5241,7 @@ var DynamicForm = ({
   const schema = React3.useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
   const resolver = zod.zodResolver(schema);
   const initialValues = React3.useMemo(() => getDefaultValues(record), [record]);
+  console.log("initialValues", initialValues);
   const form = reactHookForm.useForm({
     resolver,
     defaultValues: initialValues