shadcn-zod-formkit 1.11.0 → 1.13.0

package/dist/index.d.mts

@@ -72,7 +72,8 @@ declare enum InputTypes {
     KEY_VALUE = "key_value",
     REPEATER = "repeater",
     MULTI_SELECT = "multi_select",
-    COMBOBOX = "COMBO_BOX"
+    COMBOBOX = "COMBO_BOX",
+    SORTABLE_LIST = "sortable_list"
 }
 declare const inputFieldComp: InputTypes[];
 
@@ -123,12 +124,14 @@ interface inputGroudConfig {
     textRight?: string;
 }
 interface ListConfig {
+    children?: ReactNode | ((item: any, index: number) => ReactNode);
     list: InputOption[] | GroupedOption[];
     optionLabel?: string;
     optionValue?: InputOption | string | number | object;
     onOptionChange: (item?: InputOption | InputOption[] | GroupedOption) => void;
     optionDescription?: string;
     selectedList?: InputOption[];
+    sortable?: boolean;
 }
 interface InputOption {
     id: number | string;
@@ -170,11 +173,12 @@ declare enum TextInputType {
     PASSWORD = "password"
 }
 
-declare abstract class BaseInput {
+declare abstract class BaseInput<T = unknown> {
     protected readonly input: FieldProps;
     protected readonly form: UseFormReturn;
     protected readonly isSubmitting?: boolean | undefined;
-    constructor(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean | undefined);
+    protected readonly children?: ReactNode | ((item: T, index: number) => ReactNode);
+    constructor(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean | undefined, children?: ReactNode | ((item: T, index: number) => ReactNode));
     abstract render(): JSX.Element;
 }
 declare const entityToInputOption: (entitiy: any, name?: string, description?: string, groupedLabel?: string) => InputOption;

package/dist/index.d.ts

@@ -72,7 +72,8 @@ declare enum InputTypes {
     KEY_VALUE = "key_value",
     REPEATER = "repeater",
     MULTI_SELECT = "multi_select",
-    COMBOBOX = "COMBO_BOX"
+    COMBOBOX = "COMBO_BOX",
+    SORTABLE_LIST = "sortable_list"
 }
 declare const inputFieldComp: InputTypes[];
 
@@ -123,12 +124,14 @@ interface inputGroudConfig {
     textRight?: string;
 }
 interface ListConfig {
+    children?: ReactNode | ((item: any, index: number) => ReactNode);
     list: InputOption[] | GroupedOption[];
     optionLabel?: string;
     optionValue?: InputOption | string | number | object;
     onOptionChange: (item?: InputOption | InputOption[] | GroupedOption) => void;
     optionDescription?: string;
     selectedList?: InputOption[];
+    sortable?: boolean;
 }
 interface InputOption {
     id: number | string;
@@ -170,11 +173,12 @@ declare enum TextInputType {
     PASSWORD = "password"
 }
 
-declare abstract class BaseInput {
+declare abstract class BaseInput<T = unknown> {
     protected readonly input: FieldProps;
     protected readonly form: UseFormReturn;
     protected readonly isSubmitting?: boolean | undefined;
-    constructor(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean | undefined);
+    protected readonly children?: ReactNode | ((item: T, index: number) => ReactNode);
+    constructor(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean | undefined, children?: ReactNode | ((item: T, index: number) => ReactNode));
     abstract render(): JSX.Element;
 }
 declare const entityToInputOption: (entitiy: any, name?: string, description?: string, groupedLabel?: string) => InputOption;

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';
@@ -27,6 +27,9 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { Command as Command$1 } from 'cmdk';
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import z2 from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 
@@ -156,10 +159,11 @@ var validationMessages = {
 
 // src/components/custom/form/inputs/base/base-input.ts
 var BaseInput = class {
-  constructor(input, form, isSubmitting) {
+  constructor(input, form, isSubmitting, children) {
     this.input = input;
     this.form = form;
     this.isSubmitting = isSubmitting;
+    this.children = children;
   }
 };
 var entityToInputOption = (entitiy, name = "name", description = "description", groupedLabel) => ({
@@ -232,9 +236,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   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 */,
@@ -4865,6 +4871,103 @@ var FieldSlider = ({ input, form, isSubmitting }) => {
     input.name
   );
 };
+var SortableListInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    const children = input.listConfig?.children ?? void 0;
+    return /* @__PURE__ */ jsx(
+      FieldSortableList,
+      {
+        form,
+        input,
+        isSubmitting,
+        children
+      }
+    );
+  }
+};
+function FieldSortableList({
+  form,
+  input,
+  isSubmitting,
+  children
+}) {
+  const [items, setItems] = useState(() => input.listConfig?.list ?? []);
+  const sortableEnabled = input.listConfig?.sortable ?? true;
+  useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const handleDragEnd = (event) => {
+    if (!sortableEnabled) return;
+    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);
+    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: [
+        input.label && /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
+        /* @__PURE__ */ jsx(FormControl, { children: sortableEnabled ? /* @__PURE__ */ jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: items.map((i) => i.id),
+            strategy: verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: items.map((item, index) => /* @__PURE__ */ jsx(SortableWrapper, { id: item.id, children: typeof children === "function" ? children(item, index) : /* @__PURE__ */ jsx("div", { className: "p-3 border rounded-md bg-white", children: item.name }) }, item.id)) })
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: items.map(
+          (item, index) => typeof children === "function" ? children(item, index) : /* @__PURE__ */ jsx("div", { className: "p-3 border rounded-md bg-gray-50", children: item.name }, item.id)
+        ) }) }),
+        input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    },
+    input.name
+  );
+}
+function SortableWrapper({
+  id,
+  children,
+  disabled
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id, disabled });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      ...listeners,
+      className: cn(
+        "flex items-center gap-2 p-2 border rounded-md mb-1 bg-muted/30 cursor-grab select-none transition-all",
+        isDragging && "opacity-60 bg-muted/50 scale-[0.98]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(GripVertical, { className: "w-4 h-4 opacity-70" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children })
+      ]
+    }
+  );
+}
 var SwitchInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -5159,6 +5262,7 @@ var inputMap = {
   ["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.!!!
@@ -5309,7 +5413,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