shadcn-zod-formkit 1.12.0 → 1.14.0

package/dist/index.d.mts

@@ -80,6 +80,8 @@ declare const inputFieldComp: InputTypes[];
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
+    childrenPosition?: 'up' | 'down';
+    children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     repeaterFields?: Array<FieldProps | FieldProps[]>;
     minItems?: number;
@@ -124,12 +126,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;

package/dist/index.d.ts

@@ -80,6 +80,8 @@ declare const inputFieldComp: InputTypes[];
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
+    childrenPosition?: 'up' | 'down';
+    children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     repeaterFields?: Array<FieldProps | FieldProps[]>;
     minItems?: number;
@@ -124,12 +126,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;

package/dist/index.mjs

@@ -26,10 +26,10 @@ 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 * 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 { 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';
 
@@ -3960,105 +3960,6 @@ 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;
@@ -4969,6 +4870,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;
@@ -5367,6 +5365,7 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   const foundField = fields.find((field) => field.name === fieldErrorKey);
   return foundField?.label ?? fieldErrorKey;
 };
+var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
 var FormFieldsGrid = ({
   fields,
   form,
@@ -5376,23 +5375,44 @@ var FormFieldsGrid = ({
   gap = "gap-2"
 }) => {
   return /* @__PURE__ */ jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
-    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsx(
-      "span",
+    (inputOrGroup, idx) => Array.isArray(inputOrGroup) ? /* @__PURE__ */ jsx(
+      "div",
       {
-        className: "w-full flex flex-row justify-between py-3",
-        children: input.map((field, subIdx) => {
-          if (readOnly) field.disabled = true;
-          return /* @__PURE__ */ jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx);
+        className: "w-full flex flex-row items-start gap-4 py-3",
+        children: inputOrGroup.map((field, subIdx) => {
+          const fieldCopy = {
+            ...field,
+            disabled: readOnly ? true : field.disabled
+          };
+          const renderInlineChild = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
+          const renderInlineChildDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
+          return /* @__PURE__ */ jsxs("div", { className: "w-full px-2", children: [
+            renderInlineChild && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
+            InputFactory.create(fieldCopy, form, isPending),
+            renderInlineChildDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
+          ] }, `field-${idx}-${subIdx}`);
         })
       },
       `field-group-${idx}`
     ) : /* @__PURE__ */ jsx(
-      "span",
+      "div",
       {
         className: "flex flex-col justify-between py-3 w-full px-2",
-        children: InputFactory.create(input, form, isPending)
+        children: (() => {
+          const fieldCopy = {
+            ...inputOrGroup,
+            disabled: readOnly ? true : inputOrGroup.disabled
+          };
+          const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
+          const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderUp && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
+            InputFactory.create(fieldCopy, form, isPending),
+            renderDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
+          ] });
+        })()
       },
-      `field-group-${idx}`
+      `field-single-${idx}`
     )
   ) });
 };