ynotsoft-dynamic-form 1.0.80 → 1.0.82

package/README.md

@@ -59,6 +59,7 @@ npm run dev --workspace ynotsoft-dynamic-form
 ### 5\. How to push changes
 
 #### For Regular Development Changes:
+
 ```bash
 # 1. Commit your changes
 git add .
@@ -69,6 +70,7 @@ git tag v1.0.[version-number]
 ```
 
 #### For NPM Package Releases:
+
 ```bash
 # 1. Update version in package.json (in packages/dynamic-form-lib/)
 npm version patch   # for bug fixes (1.0.0 → 1.0.1)
@@ -83,12 +85,14 @@ git push origin v1.0.[version-number]   # Replace with your actual version
 ```
 
 #### Version Management:
+
 - **Single Source of Truth:** Version is maintained in `packages/dynamic-form-lib/package.json`
 - **Git Tags:** Use format `v1.0.[version-number]` (matches package.json version with "v" prefix)
 - **NPM Registry:** GitHub Actions reads git tag, strips "v" prefix, publishes as `1.0.[version-number]` to NPM
 - **Auto-Sync:** Git tag version must match package.json version for successful deployment
 
 **Quick Check:**
+
 ```bash
 # Verify versions match before pushing
 cat packages/dynamic-form-lib/package.json | grep version
@@ -116,7 +120,7 @@ const formDefinition = {
 
 <DynamicForm
   formDefinition={formDefinition}
-  returnType= {false}
+  returnType={false}
   defaultValues={{ name: "John Doe" }}
   sendFormValues={(values) => console.log(values)}
   onFieldsChange={(values) => console.log("Changed:", values)}
@@ -254,10 +258,10 @@ Search for selections and select multiple/single
       required: true,
       placeholder: "Type to search users...",
       // layout: "inline", // default inline
-      layout: "dialog", 
+      layout: "dialog",
       optionsUrl: "/api/users/search", // API endpoint
-      minSearchLength: 2, // Minimum characters before search (default: 2)      
-      selectMode: "single", // 'single' | 'multiple' (default: 'single')  
+      minSearchLength: 2, // Minimum characters before search (default: 2)
+      selectMode: "single", // 'single' | 'multiple' (default: 'single')
     }
 ```
 
@@ -551,6 +555,34 @@ Load options from API:
 }
 ```
 
+### Adding Custom styles per field
+
+Add custom styles to control field layout flow like: col-span-full | col-span-6
+
+field property: 'class:'
+
+```javascript
+{
+  name: 'city',
+  label: 'City',
+  type: 'select',
+  class: "col-span-6" // using tailwind classes to control layout flow.
+}
+```
+
+### Adding description per field.
+
+Add description below the input field to give helpful information to users
+
+```javascript
+{
+  name: 'sort',
+  label: 'Sort Order',
+  type: 'select',
+  description: "Sort by priority. 1: Highest Priority , 5 Lowerst Priority" // Use to add description below fields
+}
+```
+
 ---
 
 ## Complete Example

package/dist/dynamic-form.js

@@ -4677,12 +4677,8 @@ const Df = ({ editor: e, error: t }) => {
   const [, n] = fe(0);
   if (Ze(() => {
     if (!e) return;
-    const s = () => {
-      n((i) => i + 1);
-    };
-    return e.on("transaction", s), () => {
-      e.off("transaction", s);
-    };
+    const s = () => n((i) => i + 1);
+    return e.on("transaction", s), () => e.off("transaction", s);
   }, [e]), !e) return null;
   const o = (s) => `p-2 rounded-sm transition-colors duration-200 focus-visible:ring-1 focus-visible:ring-ring/40 focus-visible:outline-none ${s ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground text-muted-foreground"}`.trim(), r = () => /* @__PURE__ */ c("div", { className: "w-px h-4 bg-border mx-1 self-center", "aria-hidden": "true" });
   return /* @__PURE__ */ M(
@@ -9881,7 +9877,7 @@ const sh = ({
     ) : g[S.name] && console.log(
       `[fieldFormat RENDER] Error exists in state for ${S.name} but not passed in props!`
     )), A.includes(S.type))
-      return /* @__PURE__ */ c("div", { className: S.fieldClass || "col-span-full", children: b });
+      return /* @__PURE__ */ c("div", { className: S.class || "col-span-full", children: b });
     const T = S.containerStyle, _ = S.color || "blue", N = T === "card" ? `rounded-lg border text-card-foreground shadow-sm p-4 ${S.containerClassName || W[_] || W.blue}` : "", K = /* @__PURE__ */ M(Ke, { children: [
       S.label && /* @__PURE__ */ M(
         "label",
@@ -9895,9 +9891,10 @@ const sh = ({
         }
       ),
       /* @__PURE__ */ c("div", { children: b }),
+      S.description && /* @__PURE__ */ c("p", { class: "text-xs mt-1.5 text-gray-400", children: S.description }),
       k && /* @__PURE__ */ c("p", { className: "text-sm text-red-500 mt-1", children: k })
     ] });
-    return /* @__PURE__ */ c("div", { className: `mb-4 ${S.fieldClass || "col-span-8"}`, children: T === "card" ? /* @__PURE__ */ c("div", { className: N, children: K }) : K });
+    return /* @__PURE__ */ c("div", { className: "mb-4", children: T === "card" ? /* @__PURE__ */ c("div", { className: N, children: K }) : K });
   }
   const V = (b) => {
     if (b.showIf && !b.showIf(f)) return null;
@@ -9934,7 +9931,14 @@ const sh = ({
       onSubmit: H,
       className: "grid grid-cols-12 gap-x-4 mx-auto w-full  ",
       children: [
-        o ? o.fields.map((b) => /* @__PURE__ */ c("div", { className: "col-span-full", children: V(b) }, b.name + b.type)) : /* @__PURE__ */ c("div", { children: "Loading..." }),
+        o ? o.fields.map((b) => /* @__PURE__ */ c(
+          "div",
+          {
+            className: `${b.class || "col-span-full"} `,
+            children: V(b)
+          },
+          b.name + b.type
+        )) : /* @__PURE__ */ c("div", { children: "Loading..." }),
         /* @__PURE__ */ c(
           "div",
           {