shadcn-zod-formkit 1.10.0 → 1.12.0

package/dist/index.d.mts

@@ -71,7 +71,9 @@ declare enum InputTypes {
     CURRENCY = "currency",
     KEY_VALUE = "key_value",
     REPEATER = "repeater",
-    MULTI_SELECT = "multi_select"
+    MULTI_SELECT = "multi_select",
+    COMBOBOX = "COMBO_BOX",
+    SORTABLE_LIST = "sortable_list"
 }
 declare const inputFieldComp: InputTypes[];
 

package/dist/index.d.ts

@@ -71,7 +71,9 @@ declare enum InputTypes {
     CURRENCY = "currency",
     KEY_VALUE = "key_value",
     REPEATER = "repeater",
-    MULTI_SELECT = "multi_select"
+    MULTI_SELECT = "multi_select",
+    COMBOBOX = "COMBO_BOX",
+    SORTABLE_LIST = "sortable_list"
 }
 declare const inputFieldComp: InputTypes[];
 

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Pencil, Loader2, Save, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, ChevronsUpDown, Check, Trash2, Upload, SearchIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Pencil, Loader2, Save, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, ChevronsUpDown, Check, Trash2, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
@@ -26,6 +26,9 @@ import { Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { Command as Command$1 } from 'cmdk';
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import z2 from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -231,9 +234,13 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["KEY_VALUE"] = "key_value";
   InputTypes2["REPEATER"] = "repeater";
   InputTypes2["MULTI_SELECT"] = "multi_select";
+  InputTypes2["COMBOBOX"] = "COMBO_BOX";
+  InputTypes2["SORTABLE_LIST"] = "sortable_list";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "sortable_list" /* SORTABLE_LIST */,
+  "COMBO_BOX" /* COMBOBOX */,
   "multi_select" /* MULTI_SELECT */,
   "repeater" /* REPEATER */,
   "key_value" /* KEY_VALUE */,
@@ -1949,6 +1956,210 @@ var ColorComp = React3__default.forwardRef(
     ] });
   }
 );
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1,
+    {
+      "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__ */ jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx(
+          Command$1.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__ */ jsx(
+    Command$1.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__ */ jsx(
+    Command$1.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.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__ */ jsx(
+    Command$1.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 ComboboxInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsx(FieldCombobox, { input, form, isSubmitting });
+  }
+};
+var FieldCombobox = ({ form, input, isSubmitting }) => {
+  const [open, setOpen] = React3.useState(false);
+  const [options, setOptions] = React3.useState(
+    () => input.listConfig?.list?.length ? input.listConfig.list : []
+  );
+  const optionValue = input?.listConfig?.optionValue ?? input.optionValue ?? "id";
+  const [value, setValue] = React3.useState(input.value?.toString() ?? "");
+  React3.useEffect(() => {
+    const dependsOn = input.dependsOn;
+    if (!dependsOn || !input.loadOptions) return;
+    const subscription = form.watch(async (values) => {
+      const parentValue = values[dependsOn];
+      if (parentValue) {
+        const loader = input.loadOptions;
+        const newOptions = await loader(parentValue);
+        setOptions(newOptions);
+        form.setValue(input.name, "");
+        setValue("");
+      } else {
+        setOptions([]);
+      }
+    });
+    return () => subscription.unsubscribe?.();
+  }, [form, input.loadOptions, input.dependsOn]);
+  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]);
+  const getValue = (item) => (optionValue === "name" ? item.name : item.value?.toString() ?? item.id?.toString()) ?? "";
+  const selectedOption = options.find((o) => getValue(o) === value);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    input.label && /* @__PURE__ */ jsx("label", { className: "font-medium text-sm", children: input.label }),
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          disabled: input.disabled || isSubmitting,
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          className: "w-[60%] justify-between bg-black/10 dark:bg-white/25",
+          children: [
+            selectedOption ? selectedOption.name : input.placeHolder ?? "Seleccionar...",
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-[60%] p-0", children: /* @__PURE__ */ jsxs(
+        Command,
+        {
+          filter: (value2, search) => {
+            const option = options.find((o) => getValue(o) === value2);
+            return option?.name?.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
+          },
+          children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: `Buscar ${input.label?.toLowerCase()}...`, className: "h-9" }),
+            /* @__PURE__ */ jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: "No se encontraron resultados." }),
+              /* @__PURE__ */ jsx(CommandGroup, { children: options.map((item) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: getValue(item),
+                  onSelect: (currentValue) => {
+                    const newValue = currentValue === value ? "" : currentValue;
+                    setValue(newValue);
+                    form.setValue(input.name, newValue);
+                    input.listConfig?.onOptionChange?.(
+                      options.find((o) => getValue(o) === newValue)
+                    );
+                    setOpen(false);
+                  },
+                  children: [
+                    item.name,
+                    /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        className: cn(
+                          "ml-auto",
+                          value === getValue(item) ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    )
+                  ]
+                },
+                item.id
+              )) })
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+};
 var CurrencyInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -3749,6 +3960,105 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
     input.name
   );
 };
+var SortableListInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsx(FieldSortableList, { form, input, isSubmitting });
+  }
+};
+var FieldSortableList = ({ form, input, isSubmitting }) => {
+  const [items, setItems] = useState((input.listConfig?.list ?? []).filter((item) => "name" in item));
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = items.findIndex((i) => i.id === active.id);
+    const newIndex = items.findIndex((i) => i.id === over.id);
+    const newList = arrayMove(items, oldIndex, newIndex);
+    setItems(newList);
+    form.setValue(input.name, newList);
+    if (input.listConfig?.onOptionChange) {
+      input.listConfig.onOptionChange(newList);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: () => /* @__PURE__ */ jsxs(FormItem, { className: cn("space-y-2", input.className), children: [
+        /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx("div", { className: "border rounded-md p-3 bg-white", children: /* @__PURE__ */ jsx(
+          DndContext,
+          {
+            sensors,
+            collisionDetection: closestCenter,
+            onDragEnd: handleDragEnd,
+            children: /* @__PURE__ */ jsx(
+              SortableContext,
+              {
+                items: items.map((i) => i.id),
+                strategy: verticalListSortingStrategy,
+                children: items.map((item) => /* @__PURE__ */ jsx(
+                  SortableItem,
+                  {
+                    id: item.id,
+                    name: item.name,
+                    disabled: isSubmitting
+                  },
+                  item.id
+                ))
+              }
+            )
+          }
+        ) }) }),
+        input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    },
+    input.name
+  );
+};
+function SortableItem({
+  id,
+  name,
+  disabled
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      ...listeners,
+      className: cn(
+        "flex items-center justify-between p-2 border rounded-md mb-1 bg-muted/30 cursor-grab select-none",
+        isDragging && "opacity-60 bg-muted/50"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(GripVertical, { className: "w-4 h-4 opacity-70" }),
+        /* @__PURE__ */ jsx("span", { children: name })
+      ] })
+    }
+  );
+}
 var FileInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -4010,108 +4320,6 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
     }
   );
 };
-function Command({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Command$1,
-    {
-      "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__ */ jsxs(
-    "div",
-    {
-      "data-slot": "command-input-wrapper",
-      className: "flex h-9 items-center gap-2 border-b px-3",
-      children: [
-        /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ jsx(
-          Command$1.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__ */ jsx(
-    Command$1.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__ */ jsx(
-    Command$1.Empty,
-    {
-      "data-slot": "command-empty",
-      className: "py-6 text-center text-sm",
-      ...props
-    }
-  );
-}
-function CommandGroup({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Command$1.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__ */ jsx(
-    Command$1.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;
@@ -5054,6 +5262,8 @@ var inputMap = {
   ["key_value" /* KEY_VALUE */]: KeyValueListInput,
   ["repeater" /* REPEATER */]: RepeaterInput,
   ["multi_select" /* MULTI_SELECT */]: MultiSelectInput,
+  ["COMBO_BOX" /* COMBOBOX */]: ComboboxInput,
+  ["sortable_list" /* SORTABLE_LIST */]: SortableListInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -5204,7 +5414,6 @@ var DynamicForm = ({
   const schema = useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
   const resolver = zodResolver(schema);
   const initialValues = useMemo(() => getDefaultValues(record), [record]);
-  console.log("initialValues", initialValues);
   const form = useForm({
     resolver,
     defaultValues: initialValues