hotwire_nested_form 1.1.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 614ce7e4bb9ee960608d18431bd94319feac263ce6a83f79bc36525f5c2d5061
-  data.tar.gz: 3c8c196d819cf4954fbedf3444070a95244636427bb73147d3edc71465d5afb2
+  metadata.gz: de50acd45ca73b2f450facf4306904957892b14438c12e4b64aac7fa02eed9e9
+  data.tar.gz: c3e7e5096d346ba91d27f61ce6c20c28f3a076763769ab1e895b89df943a081d
 SHA512:
-  metadata.gz: 5ec8765adbc4c27dbd3297f6497971f29a22872381c114c12ce03c7ee8649e0e47e6c500be06c7f1ee71a3512f7897f9a94bc96f95474e730874828188784579
-  data.tar.gz: d90976447adf75d242bdb1f200af575e3724036b7441876e48134a28f4abd7c603cc62cb9c997679a8234b19b3a6a3465e77e51fb944a144b25b0f4c4e1dc7ad
+  metadata.gz: ead6225736617ac2c6367effc43422804167929c0d5fca1962165627e89d589c8c001f0e476f96eee2c8050de0d765863fe7bc8aa3b48a9f027ef7f9eb3ca034
+  data.tar.gz: cde5e3da91c82bd35ea3813f45a576b9ad872fbd1b806dcd35df6830e49597f6c34288d3bc3ec780d9bc2da946be7f68a01fd5021fe6efe59a60d2876f1f59bd

data/CHANGELOG.md

@@ -7,11 +7,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.0] - 2026-02-06
+
+### Added
+- Drag & drop sorting for nested items (requires SortableJS)
+  - `data-nested-form-sortable-value` - enable sorting
+  - `data-nested-form-position-field-value` - custom position field name
+  - `data-nested-form-sort-handle-value` - CSS selector for drag handle
+- New events: `nested-form:before-sort` and `nested-form:after-sort`
+- CSS classes for drag styling: `nested-form-dragging`, `nested-form-drag-ghost`
+
+### Changed
+- Controller now cleans up Sortable instance on disconnect
+
+## [1.2.0] - 2026-02-05
+
+### Added
+- Dynamic min/max limits via data attributes
+  - `data-nested-form-min-value` - minimum items required
+  - `data-nested-form-max-value` - maximum items allowed
+  - `data-nested-form-limit-behavior-value` - behavior at limits: "disable", "hide", or "error"
+- New events: `nested-form:limit-reached` and `nested-form:minimum-reached`
+- Formtastic form builder auto-detection and compatibility
+- `formtastic?` and `formtastic_available?` methods in FormBuilderDetector
+
+### Changed
+- Stimulus controller now updates button states automatically
+- Buttons disable/hide based on current count vs limits
+
 ## [1.1.0] - 2026-02-05
 
 ### Added
 - SimpleForm auto-detection and compatibility
-- NPM package `@hotwire-nested-form/stimulus` for JavaScript-only users
+- NPM package `hotwire-nested-form-stimulus` for JavaScript-only users
 - `FormBuilderDetector` module for form builder type detection
 
 ### Changed

data/Gemfile

@@ -11,6 +11,7 @@ gem 'rails', "~> #{rails_version}.0"
 
 group :development, :test do
   gem 'capybara', '~> 3.39'
+  gem 'formtastic', '~> 5.0'
   gem 'puma', '~> 6.0'
   gem 'rspec-rails', '~> 6.0'
   gem 'selenium-webdriver', '~> 4.10'

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    hotwire_nested_form (1.1.0)
+    hotwire_nested_form (1.3.0)
       rails (>= 7.0)
 
 GEM
@@ -105,6 +105,8 @@ GEM
     drb (2.2.3)
     erb (6.0.1)
     erubi (1.13.1)
+    formtastic (5.0.0)
+      actionpack (>= 6.0.0)
     globalid (1.3.0)
       activesupport (>= 6.1)
     i18n (1.14.8)
@@ -314,6 +316,7 @@ PLATFORMS
 DEPENDENCIES
   capybara (~> 3.39)
   debug
+  formtastic (~> 5.0)
   hotwire_nested_form!
   puma (~> 6.0)
   rails (~> 8.0.0)

data/README.md

@@ -104,19 +104,187 @@ Works automatically with SimpleForm! No configuration needed.
 <% end %>
 ```
 
+## Formtastic Support
+
+Works automatically with Formtastic! No configuration needed.
+
+```erb
+<%= semantic_form_for @project do |f| %>
+  <%= f.input :name %>
+
+  <div data-controller="nested-form">
+    <%= f.semantic_fields_for :tasks do |task_form| %>
+      <%= render "task_fields", f: task_form %>
+    <% end %>
+
+    <%= link_to_add_association "Add Task", f, :tasks %>
+  </div>
+
+  <%= f.actions %>
+<% end %>
+```
+
+## Min/Max Limits
+
+Control the number of nested items with data attributes:
+
+```erb
+<div data-controller="nested-form"
+     data-nested-form-min-value="1"
+     data-nested-form-max-value="5"
+     data-nested-form-limit-behavior-value="disable">
+
+  <%= f.fields_for :tasks do |tf| %>
+    <%= render "task_fields", f: tf %>
+  <% end %>
+
+  <%= link_to_add_association "Add Task", f, :tasks %>
+</div>
+```
+
+### Limit Options
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data-nested-form-min-value` | Integer | `0` | Minimum items required |
+| `data-nested-form-max-value` | Integer | unlimited | Maximum items allowed |
+| `data-nested-form-limit-behavior-value` | String | `"disable"` | `"disable"`, `"hide"`, or `"error"` |
+
+### Limit Behaviors
+
+| Behavior | At Max Limit | At Min Limit |
+|----------|--------------|--------------|
+| `disable` | Add button disabled | Remove buttons disabled |
+| `hide` | Add button hidden | Remove buttons hidden |
+| `error` | Event fires, button enabled | Event fires, button enabled |
+
+### Dynamic Limits
+
+Change limits at runtime via JavaScript:
+
+```javascript
+const form = document.querySelector('[data-controller="nested-form"]')
+form.dataset.nestedFormMaxValue = 10  // Change max
+form.dataset.nestedFormMinValue = 2   // Change min
+```
+
+### Limit Events
+
+```javascript
+document.addEventListener("nested-form:limit-reached", (event) => {
+  alert(`Maximum ${event.detail.limit} items allowed`)
+})
+
+document.addEventListener("nested-form:minimum-reached", (event) => {
+  alert(`Must keep at least ${event.detail.minimum} items`)
+})
+```
+
+## Drag & Drop Sorting
+
+Enable drag & drop reordering with position persistence:
+
+### 1. Install SortableJS
+
+```bash
+# Rails with importmap
+bin/importmap pin sortablejs
+
+# OR npm/yarn
+npm install sortablejs
+```
+
+### 2. Add Position to Your Model
+
+```bash
+rails generate migration AddPositionToTasks position:integer
+rails db:migrate
+```
+
+```ruby
+# app/models/task.rb
+class Task < ApplicationRecord
+  belongs_to :project
+  default_scope { order(:position) }
+end
+```
+
+### 3. Update Your Partial
+
+```erb
+<%# app/views/projects/_task_fields.html.erb %>
+<div class="nested-fields">
+  <%= f.hidden_field :position %>
+  <span class="drag-handle">☰</span>
+  <%= f.text_field :name %>
+  <%= link_to_remove_association "Remove", f %>
+</div>
+```
+
+### 4. Enable Sorting
+
+```erb
+<div data-controller="nested-form"
+     data-nested-form-sortable-value="true"
+     data-nested-form-sort-handle-value=".drag-handle">
+  <!-- nested fields -->
+</div>
+```
+
+### 5. Permit Position in Controller
+
+```ruby
+params.require(:project).permit(:name,
+  tasks_attributes: [:id, :name, :position, :_destroy])
+```
+
+### Sorting Options
+
+| Attribute | Default | Description |
+|-----------|---------|-------------|
+| `data-nested-form-sortable-value` | `false` | Enable drag & drop |
+| `data-nested-form-position-field-value` | `"position"` | Position field name |
+| `data-nested-form-sort-handle-value` | (none) | Drag handle selector |
+
+### Sorting Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `nested-form:before-sort` | `{ item, oldIndex }` | Before drag (cancelable) |
+| `nested-form:after-sort` | `{ item, oldIndex, newIndex }` | After drop |
+
+### Example CSS
+
+```css
+.drag-handle {
+  cursor: grab;
+  user-select: none;
+}
+
+.nested-form-dragging {
+  opacity: 0.8;
+  background: #e3f2fd;
+}
+
+.nested-form-drag-ghost {
+  opacity: 0.4;
+  border: 2px dashed #2196F3;
+}
+```
+
 ## NPM Package (JavaScript-only)
 
 For non-Rails projects using Stimulus, install via npm:
 
 ```bash
-npm install @hotwire-nested-form/stimulus
+npm install hotwire-nested-form-stimulus
 ```
 
 Register the controller:
 
 ```javascript
 import { Application } from "@hotwired/stimulus"
-import NestedFormController from "@hotwire-nested-form/stimulus"
+import NestedFormController from "hotwire-nested-form-stimulus"
 
 const application = Application.start()
 application.register("nested-form", NestedFormController)
@@ -198,6 +366,10 @@ link_to_remove_association(name, form, options = {}, &block)
 | `nested-form:after-add` | No | `{ wrapper }` | After fields added |
 | `nested-form:before-remove` | Yes | `{ wrapper }` | Before removing fields |
 | `nested-form:after-remove` | No | `{ wrapper }` | After fields removed |
+| `nested-form:limit-reached` | No | `{ limit, current }` | When max limit reached |
+| `nested-form:minimum-reached` | No | `{ minimum, current }` | When min limit reached |
+| `nested-form:before-sort` | Yes | `{ item, oldIndex }` | Before drag starts |
+| `nested-form:after-sort` | No | `{ item, oldIndex, newIndex }` | After drop completes |
 
 **Usage Examples:**
 

data/lib/generators/hotwire_nested_form/templates/nested_form_controller.js

@@ -1,31 +1,74 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="nested-form"
 export default class extends Controller {
   static values = {
-    wrapperClass: { type: String, default: "nested-fields" }
+    wrapperClass: { type: String, default: "nested-fields" },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 999999 },
+    limitBehavior: { type: String, default: "disable" },
+    sortable: { type: Boolean, default: false },
+    positionField: { type: String, default: "position" },
+    sortHandle: { type: String, default: "" }
+  }
+
+  connect() {
+    this.updateButtonStates()
+    if (this.sortableValue) this.initializeSortable()
+  }
+
+  disconnect() {
+    if (this.sortableInstance) this.sortableInstance.destroy()
+  }
+
+  get currentCount() {
+    return this.element.querySelectorAll(`.${this.wrapperClassValue}:not([style*="display: none"])`).length
+  }
+
+  get addButtons() {
+    return this.element.querySelectorAll('[data-action*="nested-form#add"]')
+  }
+
+  get removeButtons() {
+    return this.element.querySelectorAll('[data-action*="nested-form#remove"]')
   }
 
   add(event) {
     event.preventDefault()
 
+    if (this.currentCount >= this.maxValue) {
+      this.dispatch("limit-reached", {
+        detail: { limit: this.maxValue, current: this.currentCount }
+      })
+      return
+    }
+
     const template = event.currentTarget.dataset.template
     const insertion = event.currentTarget.dataset.insertion || "before"
     const targetSelector = event.currentTarget.dataset.target
     const count = parseInt(event.currentTarget.dataset.count) || 1
 
     for (let i = 0; i < count; i++) {
-      this.#insertFields(template, insertion, targetSelector, event.currentTarget)
+      if (this.currentCount >= this.maxValue) break
+      this.insertFields(template, insertion, targetSelector, event.currentTarget)
     }
+
+    this.updateButtonStates()
+    if (this.sortableValue && !this.sortableInstance) this.initializeSortable()
   }
 
   remove(event) {
     event.preventDefault()
 
+    if (this.currentCount <= this.minValue) {
+      this.dispatch("minimum-reached", {
+        detail: { minimum: this.minValue, current: this.currentCount }
+      })
+      return
+    }
+
     const wrapper = event.currentTarget.closest(`.${this.wrapperClassValue}`)
     if (!wrapper) return
 
-    // Dispatch cancelable before-remove event
     const beforeEvent = this.dispatch("before-remove", {
       cancelable: true,
       detail: { wrapper }
@@ -36,27 +79,23 @@ export default class extends Controller {
     const destroyInput = wrapper.querySelector("input[name*='_destroy']")
 
     if (destroyInput) {
-      // Persisted record - hide and mark for destruction
       destroyInput.value = "true"
       wrapper.style.display = "none"
     } else {
-      // New record - remove from DOM
       wrapper.remove()
     }
 
     this.dispatch("after-remove", { detail: { wrapper } })
+    this.updateButtonStates()
   }
 
-  // Private
-
-  #insertFields(template, insertion, targetSelector, trigger) {
+  insertFields(template, insertion, targetSelector, trigger) {
     const newId = new Date().getTime()
     const content = template.replace(/NEW_RECORD/g, newId)
 
     const fragment = document.createRange().createContextualFragment(content)
     const wrapper = fragment.firstElementChild
 
-    // Dispatch cancelable before-add event
     const beforeEvent = this.dispatch("before-add", {
       cancelable: true,
       detail: { wrapper }
@@ -78,10 +117,117 @@ export default class extends Controller {
       case "prepend":
         container.prepend(fragment)
         break
-      default: // "before"
+      default:
         trigger.before(fragment)
     }
 
     this.dispatch("after-add", { detail: { wrapper } })
   }
+
+  updateButtonStates() {
+    const atMax = this.currentCount >= this.maxValue
+    const atMin = this.currentCount <= this.minValue
+
+    this.addButtons.forEach(button => {
+      this.applyLimitState(button, atMax)
+    })
+
+    this.removeButtons.forEach(button => {
+      const wrapper = button.closest(`.${this.wrapperClassValue}`)
+      if (wrapper && wrapper.style.display !== "none") {
+        this.applyLimitState(button, atMin)
+      }
+    })
+  }
+
+  applyLimitState(button, isAtLimit) {
+    switch (this.limitBehaviorValue) {
+      case "hide":
+        button.style.display = isAtLimit ? "none" : ""
+        button.disabled = false
+        break
+      case "error":
+        button.disabled = false
+        button.style.display = ""
+        break
+      default: // "disable"
+        button.disabled = isAtLimit
+        button.style.display = ""
+    }
+  }
+
+  // Drag & Drop Sorting
+
+  initializeSortable() {
+    if (typeof Sortable === 'undefined') {
+      console.warn('hotwire_nested_form: SortableJS not found. Install it for drag & drop sorting: https://sortablejs.github.io/Sortable/')
+      return
+    }
+
+    const container = this.findSortableContainer()
+    if (!container) return
+
+    this.sortableInstance = Sortable.create(container, {
+      animation: 150,
+      handle: this.sortHandleValue || null,
+      draggable: `.${this.wrapperClassValue}`,
+      ghostClass: 'nested-form-drag-ghost',
+      chosenClass: 'nested-form-dragging',
+      onStart: (evt) => this.onSortStart(evt),
+      onEnd: (evt) => this.onSortEnd(evt)
+    })
+  }
+
+  findSortableContainer() {
+    // Look for common container patterns
+    const selectors = ['#tasks', '#items', '[data-nested-form-target="container"]']
+    for (const selector of selectors) {
+      const container = this.element.querySelector(selector)
+      if (container) return container
+    }
+    // Fallback: find first element containing nested-fields
+    const firstField = this.element.querySelector(`.${this.wrapperClassValue}`)
+    return firstField ? firstField.parentElement : this.element
+  }
+
+  onSortStart(evt) {
+    const beforeEvent = this.dispatch("before-sort", {
+      cancelable: true,
+      detail: { item: evt.item, oldIndex: evt.oldIndex }
+    })
+
+    if (beforeEvent.defaultPrevented) {
+      this.sortableInstance.option("disabled", true)
+      setTimeout(() => this.sortableInstance.option("disabled", false), 0)
+    }
+  }
+
+  onSortEnd(evt) {
+    this.updatePositions()
+
+    this.dispatch("after-sort", {
+      detail: {
+        item: evt.item,
+        oldIndex: evt.oldIndex,
+        newIndex: evt.newIndex
+      }
+    })
+
+    this.updateButtonStates()
+  }
+
+  updatePositions() {
+    const items = this.element.querySelectorAll(
+      `.${this.wrapperClassValue}:not([style*="display: none"])`
+    )
+
+    items.forEach((item, index) => {
+      const positionInput = item.querySelector(
+        `input[name*="[${this.positionFieldValue}]"]`
+      )
+      if (positionInput) {
+        positionInput.value = index + 1
+      }
+    })
+  }
 }

data/lib/hotwire_nested_form/form_builder_detector.rb

@@ -11,8 +11,19 @@ module HotwireNestedForm
       builder_class.include?('SimpleForm')
     end
 
+    def formtastic?(form_builder)
+      return false unless form_builder
+
+      builder_class = form_builder.class.name.to_s
+      builder_class.include?('Formtastic')
+    end
+
     def simple_form_available?
       defined?(::SimpleForm) ? true : false
     end
+
+    def formtastic_available?
+      defined?(::Formtastic) ? true : false
+    end
   end
 end

data/lib/hotwire_nested_form/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module HotwireNestedForm
-  VERSION = '1.1.0'
+  VERSION = '1.3.0'
 end

data/npm/README.md

@@ -1,13 +1,13 @@
-# @hotwire-nested-form/stimulus
+# hotwire-nested-form-stimulus
 
 A Stimulus controller for dynamic nested forms. Add and remove nested form fields with ease.
 
 ## Installation
 
 ```bash
-npm install @hotwire-nested-form/stimulus
+npm install hotwire-nested-form-stimulus
 # or
-yarn add @hotwire-nested-form/stimulus
+yarn add hotwire-nested-form-stimulus
 ```
 
 ## Usage
@@ -16,7 +16,7 @@ yarn add @hotwire-nested-form/stimulus
 
 ```javascript
 import { Application } from "@hotwired/stimulus"
-import NestedFormController from "@hotwire-nested-form/stimulus"
+import NestedFormController from "hotwire-nested-form-stimulus"
 
 const application = Application.start()
 application.register("nested-form", NestedFormController)
@@ -47,6 +47,57 @@ application.register("nested-form", NestedFormController)
 | `data-count` | Number of fields to add per click | `1` |
 | `data-target` | CSS selector for insertion container | Parent element |
 
+### Min/Max Limits
+
+```html
+<div data-controller="nested-form"
+     data-nested-form-min-value="1"
+     data-nested-form-max-value="5"
+     data-nested-form-limit-behavior-value="disable">
+  <!-- fields here -->
+</div>
+```
+
+| Attribute | Description | Default |
+|-----------|-------------|---------|
+| `data-nested-form-min-value` | Minimum items required | `0` |
+| `data-nested-form-max-value` | Maximum items allowed | unlimited |
+| `data-nested-form-limit-behavior-value` | `"disable"`, `"hide"`, or `"error"` | `"disable"` |
+
+### Drag & Drop Sorting
+
+Requires [SortableJS](https://sortablejs.github.io/Sortable/):
+
+```bash
+npm install sortablejs
+```
+
+```javascript
+import Sortable from 'sortablejs'
+window.Sortable = Sortable
+```
+
+```html
+<div data-controller="nested-form"
+     data-nested-form-sortable-value="true"
+     data-nested-form-sort-handle-value=".drag-handle">
+
+  <div id="items">
+    <div class="nested-fields">
+      <input type="hidden" name="items[][position]" value="1">
+      <span class="drag-handle">☰</span>
+      <!-- other fields -->
+    </div>
+  </div>
+</div>
+```
+
+| Attribute | Default | Description |
+|-----------|---------|-------------|
+| `data-nested-form-sortable-value` | `false` | Enable sorting |
+| `data-nested-form-position-field-value` | `"position"` | Position field name |
+| `data-nested-form-sort-handle-value` | (none) | Drag handle selector |
+
 ### Events
 
 | Event | Cancelable | Detail |
@@ -55,6 +106,10 @@ application.register("nested-form", NestedFormController)
 | `nested-form:after-add` | No | `{ wrapper }` |
 | `nested-form:before-remove` | Yes | `{ wrapper }` |
 | `nested-form:after-remove` | No | `{ wrapper }` |
+| `nested-form:limit-reached` | No | `{ limit, current }` |
+| `nested-form:minimum-reached` | No | `{ minimum, current }` |
+| `nested-form:before-sort` | Yes | `{ item, oldIndex }` |
+| `nested-form:after-sort` | No | `{ item, oldIndex, newIndex }` |
 
 ### Example: Listen for Events
 

data/npm/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@hotwire-nested-form/stimulus",
-  "version": "1.1.0",
+  "name": "hotwire-nested-form-stimulus",
+  "version": "1.3.0",
   "description": "Stimulus controller for dynamic nested forms - works with Rails, React, Vue, or any Stimulus app",
   "main": "src/index.js",
   "module": "src/index.js",

data/npm/src/nested_form_controller.js

@@ -2,25 +2,70 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
-    wrapperClass: { type: String, default: "nested-fields" }
+    wrapperClass: { type: String, default: "nested-fields" },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 999999 },
+    limitBehavior: { type: String, default: "disable" },
+    sortable: { type: Boolean, default: false },
+    positionField: { type: String, default: "position" },
+    sortHandle: { type: String, default: "" }
+  }
+
+  connect() {
+    this.updateButtonStates()
+    if (this.sortableValue) this.initializeSortable()
+  }
+
+  disconnect() {
+    if (this.sortableInstance) this.sortableInstance.destroy()
+  }
+
+  get currentCount() {
+    return this.element.querySelectorAll(`.${this.wrapperClassValue}:not([style*="display: none"])`).length
+  }
+
+  get addButtons() {
+    return this.element.querySelectorAll('[data-action*="nested-form#add"]')
+  }
+
+  get removeButtons() {
+    return this.element.querySelectorAll('[data-action*="nested-form#remove"]')
   }
 
   add(event) {
     event.preventDefault()
 
+    if (this.currentCount >= this.maxValue) {
+      this.dispatch("limit-reached", {
+        detail: { limit: this.maxValue, current: this.currentCount }
+      })
+      return
+    }
+
     const template = event.currentTarget.dataset.template
     const insertion = event.currentTarget.dataset.insertion || "before"
     const targetSelector = event.currentTarget.dataset.target
     const count = parseInt(event.currentTarget.dataset.count) || 1
 
     for (let i = 0; i < count; i++) {
+      if (this.currentCount >= this.maxValue) break
       this.insertFields(template, insertion, targetSelector, event.currentTarget)
     }
+
+    this.updateButtonStates()
+    if (this.sortableValue && !this.sortableInstance) this.initializeSortable()
   }
 
   remove(event) {
     event.preventDefault()
 
+    if (this.currentCount <= this.minValue) {
+      this.dispatch("minimum-reached", {
+        detail: { minimum: this.minValue, current: this.currentCount }
+      })
+      return
+    }
+
     const wrapper = event.currentTarget.closest(`.${this.wrapperClassValue}`)
     if (!wrapper) return
 
@@ -41,6 +86,7 @@ export default class extends Controller {
     }
 
     this.dispatch("after-remove", { detail: { wrapper } })
+    this.updateButtonStates()
   }
 
   insertFields(template, insertion, targetSelector, trigger) {
@@ -77,4 +123,111 @@ export default class extends Controller {
 
     this.dispatch("after-add", { detail: { wrapper } })
   }
+
+  updateButtonStates() {
+    const atMax = this.currentCount >= this.maxValue
+    const atMin = this.currentCount <= this.minValue
+
+    this.addButtons.forEach(button => {
+      this.applyLimitState(button, atMax)
+    })
+
+    this.removeButtons.forEach(button => {
+      const wrapper = button.closest(`.${this.wrapperClassValue}`)
+      if (wrapper && wrapper.style.display !== "none") {
+        this.applyLimitState(button, atMin)
+      }
+    })
+  }
+
+  applyLimitState(button, isAtLimit) {
+    switch (this.limitBehaviorValue) {
+      case "hide":
+        button.style.display = isAtLimit ? "none" : ""
+        button.disabled = false
+        break
+      case "error":
+        button.disabled = false
+        button.style.display = ""
+        break
+      default: // "disable"
+        button.disabled = isAtLimit
+        button.style.display = ""
+    }
+  }
+
+  // Drag & Drop Sorting
+
+  initializeSortable() {
+    if (typeof Sortable === 'undefined') {
+      console.warn('hotwire_nested_form: SortableJS not found. Install it for drag & drop sorting: https://sortablejs.github.io/Sortable/')
+      return
+    }
+
+    const container = this.findSortableContainer()
+    if (!container) return
+
+    this.sortableInstance = Sortable.create(container, {
+      animation: 150,
+      handle: this.sortHandleValue || null,
+      draggable: `.${this.wrapperClassValue}`,
+      ghostClass: 'nested-form-drag-ghost',
+      chosenClass: 'nested-form-dragging',
+      onStart: (evt) => this.onSortStart(evt),
+      onEnd: (evt) => this.onSortEnd(evt)
+    })
+  }
+
+  findSortableContainer() {
+    // Look for common container patterns
+    const selectors = ['#tasks', '#items', '[data-nested-form-target="container"]']
+    for (const selector of selectors) {
+      const container = this.element.querySelector(selector)
+      if (container) return container
+    }
+    // Fallback: find first element containing nested-fields
+    const firstField = this.element.querySelector(`.${this.wrapperClassValue}`)
+    return firstField ? firstField.parentElement : this.element
+  }
+
+  onSortStart(evt) {
+    const beforeEvent = this.dispatch("before-sort", {
+      cancelable: true,
+      detail: { item: evt.item, oldIndex: evt.oldIndex }
+    })
+
+    if (beforeEvent.defaultPrevented) {
+      this.sortableInstance.option("disabled", true)
+      setTimeout(() => this.sortableInstance.option("disabled", false), 0)
+    }
+  }
+
+  onSortEnd(evt) {
+    this.updatePositions()
+
+    this.dispatch("after-sort", {
+      detail: {
+        item: evt.item,
+        oldIndex: evt.oldIndex,
+        newIndex: evt.newIndex
+      }
+    })
+
+    this.updateButtonStates()
+  }
+
+  updatePositions() {
+    const items = this.element.querySelectorAll(
+      `.${this.wrapperClassValue}:not([style*="display: none"])`
+    )
+
+    items.forEach((item, index) => {
+      const positionInput = item.querySelector(
+        `input[name*="[${this.positionFieldValue}]"]`
+      )
+      if (positionInput) {
+        positionInput.value = index + 1
+      }
+    })
+  }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_nested_form
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.3.0
 platform: ruby
 authors:
 - BhumitBhadani
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-05 00:00:00.000000000 Z
+date: 2026-02-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails