shadcn-zod-formkit 1.11.0 → 1.12.0

package/dist/index.cjs

@@ -27,6 +27,9 @@ var sonner = require('sonner');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var cmdk = require('cmdk');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var core = require('@dnd-kit/core');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var z2 = require('zod');
 var zod = require('@hookform/resolvers/zod');
@@ -269,9 +272,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 */,
@@ -3992,6 +3997,105 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
     input.name
   );
 };
+var SortableListInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldSortableList, { form, input, isSubmitting });
+  }
+};
+var FieldSortableList = ({ form, input, isSubmitting }) => {
+  const [items, setItems] = React3.useState((input.listConfig?.list ?? []).filter((item) => "name" in item));
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.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 = sortable.arrayMove(items, oldIndex, newIndex);
+    setItems(newList);
+    form.setValue(input.name, newList);
+    if (input.listConfig?.onOptionChange) {
+      input.listConfig.onOptionChange(newList);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: () => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: cn("space-y-2", input.className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border rounded-md p-3 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(
+          core.DndContext,
+          {
+            sensors,
+            collisionDetection: core.closestCenter,
+            onDragEnd: handleDragEnd,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              sortable.SortableContext,
+              {
+                items: items.map((i) => i.id),
+                strategy: sortable.verticalListSortingStrategy,
+                children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                  SortableItem,
+                  {
+                    id: item.id,
+                    name: item.name,
+                    disabled: isSubmitting
+                  },
+                  item.id
+                ))
+              }
+            )
+          }
+        ) }) }),
+        input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+      ] })
+    },
+    input.name
+  );
+};
+function SortableItem({
+  id,
+  name,
+  disabled
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "w-4 h-4 opacity-70" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: name })
+      ] })
+    }
+  );
+}
 var FileInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -5196,6 +5300,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.!!!
@@ -5346,7 +5451,6 @@ 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