shadcn-zod-formkit 1.7.0 → 1.9.0

package/README.md

@@ -26,7 +26,7 @@ yarn add shadcn-zod-formkit
  You need installa shadcn basic components
  ```typescript 
  # Add Shadcn Basics
- npx shadcn@latest add  accordion alert badge button calendar card checkbox dialog popover form input label select sonner tooltip switch textarea input-otp collapsible input-group radio-group slider button-group
+ npx shadcn@latest add  accordion alert badge button calendar card checkbox dialog popover form input label select sonner tooltip switch textarea input-otp collapsible input-group radio-group slider button-group command
  ```
 
 
@@ -118,6 +118,7 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
   | **Input Currency**       |  `InputTypes.CURRENCY`             | 
   | **Input Key Value**      |  `InputTypes.KEY_VALUE`            | 
   | **Input Repeater**       |  `InputTypes.REPEATER`             | 
+  | **Input Multi Select**   |  `InputTypes.MULTI_SELECT`         | 
 
 
 

package/dist/index.cjs

@@ -26,6 +26,7 @@ var nextThemes = require('next-themes');
 var sonner = require('sonner');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var cmdk = require('cmdk');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var z2 = require('zod');
 var zod = require('@hookform/resolvers/zod');
@@ -266,9 +267,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["CURRENCY"] = "currency";
   InputTypes2["KEY_VALUE"] = "key_value";
   InputTypes2["REPEATER"] = "repeater";
+  InputTypes2["MULTI_SELECT"] = "multi_select";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "multi_select" /* MULTI_SELECT */,
   "repeater" /* REPEATER */,
   "key_value" /* KEY_VALUE */,
   "currency" /* CURRENCY */,
@@ -4044,6 +4047,201 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
     }
   );
 };
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          cmdk.Command.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var MultiSelectInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldMultiSelect, { input, form, isSubmitting });
+  }
+};
+var FieldMultiSelect = ({ form, input, isSubmitting }) => {
+  const mockInputOptions = [
+    { id: 1, name: "PERMISO 1" },
+    { id: 2, name: "PERMISO 2" },
+    { id: 3, name: "PERMISO 3" },
+    { id: 4, name: "PERMISO 4" }
+  ];
+  const lista = input?.listConfig?.list ?? mockInputOptions;
+  const optionValue = input?.listConfig?.optionValue ?? input.optionValue ?? "id";
+  const getValue = (item) => {
+    if (optionValue === "name") return item[optionValue];
+    return item.value ?? item.id;
+  };
+  const [open, setOpen] = React3.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        const selectedValues = Array.isArray(field.value) ? field.value : [];
+        const toggleOption = (value) => {
+          const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
+          field.onChange(newValues);
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex flex-col rounded-lg border p-3 shadow bg-blue-100/20", 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(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "outline",
+                role: "combobox",
+                disabled: input.disabled || isSubmitting,
+                className: cn(
+                  "justify-between w-full bg-black/10 dark:bg-white/10",
+                  !selectedValues.length && "text-muted-foreground"
+                ),
+                children: [
+                  selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: selectedValues.map((val) => {
+                    const option = lista.find(
+                      (item) => getValue(item).toString() === val
+                    );
+                    return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: option?.name ?? val }, val);
+                  }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: input.placeHolder ?? "Selecciona..." }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-2 h-4 w-4 opacity-50" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "p-0 w-[var(--radix-popover-trigger-width)]", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Buscar..." }),
+              /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No hay resultados." }),
+                /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: lista.map((item) => {
+                  const value = getValue(item).toString();
+                  const selected = selectedValues.includes(value);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    CommandItem,
+                    {
+                      onSelect: () => toggleOption(value),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          lucideReact.Check,
+                          {
+                            className: cn(
+                              "mr-2 h-4 w-4",
+                              selected ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        item.name
+                      ]
+                    },
+                    value
+                  );
+                }) })
+              ] })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+};
 var TextInputGroup = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -4841,6 +5039,7 @@ var inputMap = {
   ["currency" /* CURRENCY */]: CurrencyInput,
   ["key_value" /* KEY_VALUE */]: KeyValueListInput,
   ["repeater" /* REPEATER */]: RepeaterInput,
+  ["multi_select" /* MULTI_SELECT */]: MultiSelectInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -4866,6 +5065,7 @@ var InputFactory = class {
 };
 function getDefaultValues(entity) {
   const defaults = {};
+  if (!entity) return defaults;
   for (const key in entity) {
     const value = entity[key];
     if (value === null || value === void 0) {
@@ -4896,26 +5096,31 @@ function getDefaultValues(entity) {
   return defaults;
 }
 var getDynamicSchema = (fields, extraValidations) => {
-  const flatFields = fields.flatMap((f) => Array.isArray(f) ? f : [f]);
-  const shape = {};
-  flatFields.forEach((f) => {
-    shape[f.name] = f.zodType ?? z2__default.default.any();
-  });
+  const flatFields = fields.flatMap(
+    (f) => Array.isArray(f) ? f : [f]
+  );
+  const shape = flatFields.reduce((acc, f) => {
+    acc[f.name] = f.zodType ?? z2__default.default.any();
+    return acc;
+  }, {});
   let schema = z2__default.default.object(shape);
-  if (extraValidations && extraValidations.length > 0) {
-    extraValidations.forEach((fn) => {
+  if (extraValidations?.length) {
+    for (const fn of extraValidations) {
       schema = fn(schema);
-    });
+    }
   }
   return schema;
 };
-var FormErrorsAlert = ({ formState, fields }) => {
+var FormErrorsAlert = ({
+  formState,
+  fields
+}) => {
   const flatFields = fields.flatMap((f) => Array.isArray(f) ? f : [f]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 4 }, children: Object.entries(formState.errors).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
     CustomAlert,
     {
       title: "Revisar los siguientes criterios",
-      description: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: Object.entries(formState?.errors).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+      description: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: Object.entries(formState.errors).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
           getFieldLabel(key, flatFields),
           ":"
@@ -4929,15 +5134,36 @@ var FormErrorsAlert = ({ formState, fields }) => {
   ) });
 };
 var getFieldLabel = (fieldErrorKey, fields) => {
-  const findedField = fields.find((field) => field.name == fieldErrorKey);
-  return findedField?.label ?? fieldErrorKey;
+  const foundField = fields.find((field) => field.name === fieldErrorKey);
+  return foundField?.label ?? fieldErrorKey;
 };
-var FormFieldsGrid = ({ fields, form, isPending, readOnly, className = "", gap = "gap-2" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fields.map(
-    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full  flex flex-row justify-between py-3", children: input.map((field, subIdx) => {
-      if (readOnly) field.disabled = readOnly;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx);
-    }) }, `field-group-${idx}`) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-col justify-between py-3 w-full px-2", children: InputFactory.create(input, form, isPending) }, `field-group-${idx}`)
+var FormFieldsGrid = ({
+  fields,
+  form,
+  isPending,
+  readOnly,
+  className = "",
+  gap = "gap-2"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
+    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "w-full flex flex-row justify-between py-3",
+        children: input.map((field, subIdx) => {
+          if (readOnly) field.disabled = true;
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx);
+        })
+      },
+      `field-group-${idx}`
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "flex flex-col justify-between py-3 w-full px-2",
+        children: InputFactory.create(input, form, isPending)
+      },
+      `field-group-${idx}`
+    )
   ) });
 };
 var DynamicForm = ({
@@ -4956,14 +5182,15 @@ var DynamicForm = ({
 }) => {
   const [isPending, startTransition] = React3.useTransition();
   const schema = React3.useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
-  const defaultValues = React3.useMemo(() => getDefaultValues(record), [record]);
+  const resolver = zod.zodResolver(schema);
+  const initialValues = React3.useMemo(() => getDefaultValues(record), [record]);
   const form = reactHookForm.useForm({
-    resolver: zod.zodResolver(schema),
-    defaultValues
+    resolver,
+    defaultValues: initialValues
   });
   React3.useEffect(() => {
-    form.reset(defaultValues);
-  }, [defaultValues, form]);
+    form.reset(initialValues);
+  }, [initialValues, form]);
   const handleSubmit = (data) => {
     if (readOnly) return;
     try {
@@ -4972,7 +5199,7 @@ var DynamicForm = ({
         onSubmit?.(resp);
       });
     } catch (error) {
-      console.error("Ocurri\xF3 un error al enviar el formulario.");
+      console.error("Ocurri\xF3 un error al enviar el formulario.", error);
     }
   };
   const formContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -5000,8 +5227,7 @@ var DynamicForm = ({
           ] }) }) })
         ]
       }
-    ) }),
-    withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields })
+    ) })
   ] });
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: formContent }) });
@@ -5281,6 +5507,7 @@ exports.entityToGroupedOption = entityToGroupedOption;
 exports.entityToInputOption = entityToInputOption;
 exports.getDefaultValues = getDefaultValues;
 exports.getDynamicSchema = getDynamicSchema;
+exports.getFieldLabel = getFieldLabel;
 exports.inputFieldComp = inputFieldComp;
 exports.mockFields = mockFields;
 exports.useFormField = useFormField;