@unabridged/midwest 0.20.1 → 0.21.1

package/README.md

@@ -3,7 +3,7 @@
 [![Rails Tests](https://github.com/unabridged/midwest/actions/workflows/rails-tests.yml/badge.svg?branch=main)](https://github.com/unabridged/midwest/actions/workflows/rails-tests.yml)
 [![Bridgetown Tests](https://github.com/unabridged/midwest/actions/workflows/bridgetown-tests.yml/badge.svg?branch=main)](https://github.com/unabridged/midwest/actions/workflows/bridgetown-tests.yml)
 [![Ruby](https://img.shields.io/badge/Ruby-3.3_%7C_3.4-CC342D?logo=ruby&logoColor=white)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
-[![Coverage](https://img.shields.io/badge/coverage-96%25-brightgreen)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
+[![Coverage](https://img.shields.io/badge/coverage-95%25-brightgreen)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
 
 Midwest Component Library is an implementation of the Midwest Design System using [ViewComponent](https://github.com/github/view_component).
 

package/app/assets/javascript/midwest/index.ts

@@ -28,6 +28,7 @@ import Pagination from '../../../components/midwest/pagination_component/paginat
 import ShowIf from '../../../components/midwest/show_if_component/show_if_component_controller'
 import TreeView from '../../../components/midwest/tree_view_component/tree_view_component_controller'
 import CommandPalette from '../../../components/midwest/command_palette_component/command_palette_component_controller'
+import Repeatable from '../../../components/midwest/form/repeatable_component/repeatable_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -63,5 +64,6 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-show-if', ShowIf)
   application.register('midwest-tree-view', TreeView)
   application.register('midwest-command-palette', CommandPalette)
+  application.register('midwest-repeatable', Repeatable)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest.js

@@ -3193,12 +3193,14 @@ class FormLiveSummary extends Controller {
     this.form?.addEventListener("change", this.render);
     this.form?.addEventListener("midwest-autocomplete:change", this.render);
     this.form?.addEventListener("midwest-color-picker:update", this.render);
+    this.form?.addEventListener("midwest-repeatable:change", this.render);
   }
   disconnect() {
     this.form?.removeEventListener("input", this.render);
     this.form?.removeEventListener("change", this.render);
     this.form?.removeEventListener("midwest-autocomplete:change", this.render);
     this.form?.removeEventListener("midwest-color-picker:update", this.render);
+    this.form?.removeEventListener("midwest-repeatable:change", this.render);
   }
   get form() {
     return this.element.closest("form");
@@ -3250,6 +3252,8 @@ class FormLiveSummary extends Controller {
         return;
       if (element.closest(".midwest-tree-view"))
         return;
+      if (element.closest(".midwest-repeatable"))
+        return;
       if (element instanceof HTMLInputElement) {
         if (SKIPPED_INPUT_TYPES.has(element.type))
           return;
@@ -3330,6 +3334,33 @@ class FormLiveSummary extends Controller {
       });
       fields.push({ label, value: values.join(", ") || "\u2014" });
     });
+    form.querySelectorAll(".midwest-repeatable").forEach((repeatable) => {
+      if (this.element.contains(repeatable))
+        return;
+      const groupLabel = repeatable.querySelector(".midwest-form-group__top .midwest-label")?.textContent?.trim() || "Items";
+      const items = Array.from(
+        repeatable.querySelectorAll('[data-midwest-repeatable-target="item"]')
+      ).filter((item) => {
+        const destroy = item.querySelector('[data-midwest-repeatable-target="destroy"]');
+        return destroy?.value !== "1";
+      });
+      items.forEach((item, i) => {
+        const values = Array.from(
+          item.querySelectorAll(
+            'input:not([type="hidden"]), textarea, select'
+          )
+        ).map((input) => {
+          if (input instanceof HTMLSelectElement) {
+            return Array.from(input.selectedOptions).map((o) => o.text).join(", ");
+          }
+          return input.value;
+        }).filter(Boolean);
+        fields.push({
+          label: items.length > 1 ? `${groupLabel} ${i + 1}` : groupLabel,
+          value: values.join(" \xB7 ") || "\u2014"
+        });
+      });
+    });
     return fields;
   }
   // Builds a small inline colour swatch to display alongside a colour value.
@@ -5578,6 +5609,250 @@ class CommandPalette extends Controller {
   }
 }
 
+class Repeatable extends Controller {
+  static targets = ["container", "item", "empty", "template", "addButton", "removeButton", "destroy"];
+  static values = {
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: null },
+    templateId: { type: String, default: "" },
+    items: { type: Array, default: [] }
+  };
+  // ── Lifecycle ──────────────────────────────────────────────
+  connect() {
+    this.reindex();
+  }
+  // ── Actions ────────────────────────────────────────────────
+  add(event) {
+    event?.preventDefault();
+    if (this.maxValue !== null && this.itemsValue.length >= this.maxValue)
+      return;
+    const template = this.findTemplate();
+    if (!template)
+      return;
+    const newItem = template.cloneNode(true);
+    const nextIndex = this.nextAvailableIndex;
+    newItem.removeAttribute("id");
+    newItem.style.removeProperty("display");
+    newItem.setAttribute("data-midwest-repeatable-target", "item");
+    this.updateItemIndices(newItem, nextIndex);
+    this.resetItemFields(newItem);
+    newItem.classList.add("midwest-repeatable-item--adding");
+    this.containerTarget.appendChild(newItem);
+    setTimeout(() => {
+      newItem.classList.remove("midwest-repeatable-item--adding");
+    }, 300);
+    this.reindex();
+  }
+  remove(event) {
+    event?.preventDefault();
+    const button = event.currentTarget;
+    const item = button.closest('[data-midwest-repeatable-target="item"]');
+    if (!item)
+      return;
+    if (this.activeItems.length <= this.minValue)
+      return;
+    const destroyInput = item.querySelector('[data-midwest-repeatable-target="destroy"]');
+    if (destroyInput) {
+      destroyInput.value = "1";
+    }
+    item.classList.add("midwest-repeatable-item--removing");
+    setTimeout(() => {
+      item.remove();
+      this.reindex();
+    }, 300);
+  }
+  removeAll(event) {
+    event?.preventDefault();
+    const active = this.activeItems;
+    if (active.length <= this.minValue)
+      return;
+    const toRemove = active.slice(this.minValue);
+    toRemove.forEach((item) => {
+      const destroyInput = item.querySelector('[data-midwest-repeatable-target="destroy"]');
+      if (destroyInput)
+        destroyInput.value = "1";
+      item.classList.add("midwest-repeatable-item--removing");
+    });
+    setTimeout(() => {
+      toRemove.forEach((item) => item.remove());
+      this.reindex();
+    }, 300);
+  }
+  // ── Core: reindex builds state from DOM ────────────────────
+  reindex() {
+    const items = this.activeItems;
+    const states = items.map((item) => {
+      const index = this.extractIndex(item);
+      const { valid, errors } = this.validateItem(item);
+      return { index, valid, errors };
+    });
+    this.itemsValue = states;
+    this.setFieldsetErrors(states);
+    this.updateUI();
+  }
+  // ── Validation ─────────────────────────────────────────────
+  validateItem(item) {
+    const fields = item.querySelectorAll(
+      'input:not([type="hidden"]), textarea, select'
+    );
+    const errors = [];
+    let valid = true;
+    fields.forEach((field) => {
+      if (!field.checkValidity()) {
+        valid = false;
+        const label = item.querySelector(`label[for="${field.id}"]`);
+        const name = label?.textContent?.trim() || field.name || "Field";
+        errors.push(`${name}: ${field.validationMessage}`);
+      }
+    });
+    return { valid, errors };
+  }
+  // ── Fieldset error management ──────────────────────────────
+  setFieldsetErrors(states) {
+    const invalidItems = states.filter((s) => !s.valid);
+    if (invalidItems.length > 0) {
+      this.element.setAttribute("data-repeatable-errors", JSON.stringify(
+        invalidItems.map((s) => ({ index: s.index, errors: s.errors }))
+      ));
+      this.element.setAttribute("aria-invalid", "true");
+    } else {
+      this.element.removeAttribute("data-repeatable-errors");
+      this.element.removeAttribute("aria-invalid");
+    }
+    this.activeItems.forEach((item) => {
+      const index = this.extractIndex(item);
+      const state = states.find((s) => s.index === index);
+      if (state && !state.valid) {
+        item.setAttribute("data-repeatable-invalid", "true");
+        item.setAttribute("data-repeatable-item-errors", JSON.stringify(state.errors));
+      } else {
+        item.removeAttribute("data-repeatable-invalid");
+        item.removeAttribute("data-repeatable-item-errors");
+      }
+    });
+  }
+  // ── Optional: query-selector-based index rebuild ───────────
+  queryItems() {
+    return Array.from(
+      this.containerTarget.querySelectorAll('[data-midwest-repeatable-target="item"]')
+    ).filter((item) => {
+      const d = item.querySelector('[data-midwest-repeatable-target="destroy"]');
+      return d?.value !== "1";
+    }).map((item) => {
+      const index = this.extractIndex(item);
+      const { valid, errors } = this.validateItem(item);
+      return { index, valid, errors };
+    });
+  }
+  // ── Stimulus value-changed callback ────────────────────────
+  itemsValueChanged() {
+    this.dispatch("change", {
+      detail: { count: this.itemsValue.length, items: this.itemsValue }
+    });
+  }
+  // ── Private helpers ────────────────────────────────────────
+  findTemplate() {
+    const active = this.activeItems;
+    if (active.length > 0)
+      return active[0];
+    if (this.itemTargets.length > 0)
+      return this.itemTargets[0];
+    if (this.hasTemplateTarget)
+      return this.templateTarget;
+    return null;
+  }
+  extractIndex(item) {
+    const destroyInput = item.querySelector('[data-midwest-repeatable-target="destroy"]');
+    if (destroyInput?.name) {
+      const match = destroyInput.name.match(/\[(\d+)\]\[_destroy\]$/);
+      if (match)
+        return parseInt(match[1], 10);
+    }
+    const anyInput = item.querySelector("[name]");
+    if (anyInput?.name) {
+      const match = anyInput.name.match(/\[(\d+)\]/);
+      if (match)
+        return parseInt(match[1], 10);
+    }
+    return 0;
+  }
+  get nextAvailableIndex() {
+    const indices = this.itemsValue.map((s) => s.index);
+    if (indices.length === 0)
+      return 0;
+    return Math.max(...indices) + 1;
+  }
+  resetItemFields(item) {
+    const fields = item.querySelectorAll(
+      'input:not([data-midwest-repeatable-target="destroy"]), textarea, select'
+    );
+    fields.forEach((field) => {
+      if (field instanceof HTMLInputElement) {
+        if (field.type === "checkbox" || field.type === "radio") {
+          field.checked = false;
+        } else {
+          field.value = "";
+        }
+      } else if (field instanceof HTMLSelectElement) {
+        field.selectedIndex = 0;
+      } else {
+        field.value = "";
+      }
+    });
+    const destroyInput = item.querySelector('[data-midwest-repeatable-target="destroy"]');
+    if (destroyInput)
+      destroyInput.value = "0";
+    item.removeAttribute("data-repeatable-invalid");
+    item.removeAttribute("data-repeatable-item-errors");
+  }
+  updateItemIndices(item, newIndex) {
+    item.querySelectorAll("[name]").forEach((input) => {
+      if (input.name?.includes("[")) {
+        input.name = input.name.replace(/\[(\d+|new_\w+|__INDEX__)\]\[/g, `[${newIndex}][`);
+      }
+    });
+    item.querySelectorAll("[id]").forEach((el) => {
+      if (el.id?.match(/(_\d+_|_new_\w+_|___INDEX___)/)) {
+        el.id = el.id.replace(/(_\d+_|_new_\w+_|___INDEX___)/g, `_${newIndex}_`);
+      }
+    });
+    item.querySelectorAll("[for]").forEach((label) => {
+      if (label.htmlFor?.match(/(_\d+_|_new_\w+_|___INDEX___)/)) {
+        label.htmlFor = label.htmlFor.replace(/(_\d+_|_new_\w+_|___INDEX___)/g, `_${newIndex}_`);
+      }
+    });
+    const destroyInput = item.querySelector('[data-midwest-repeatable-target="destroy"]');
+    if (destroyInput?.name) {
+      destroyInput.name = destroyInput.name.replace(
+        /\[(\d+|new_\w+|__INDEX__)\]\[_destroy\]/,
+        `[${newIndex}][_destroy]`
+      );
+    }
+  }
+  updateUI() {
+    const count = this.itemsValue.length;
+    if (this.hasAddButtonTarget) {
+      const atMax = this.maxValue !== null && count >= this.maxValue;
+      this.addButtonTarget.disabled = atMax;
+      this.addButtonTarget.classList.toggle("disabled", atMax);
+    }
+    this.removeButtonTargets.forEach((button) => {
+      const atMin = count <= this.minValue;
+      button.disabled = atMin;
+      button.classList.toggle("disabled", atMin);
+    });
+    if (this.hasEmptyTarget) {
+      this.emptyTarget.classList.toggle("hidden", count > 0);
+    }
+  }
+  get activeItems() {
+    return this.itemTargets.filter((item) => {
+      const destroyInput = item.querySelector('[data-midwest-repeatable-target="destroy"]');
+      return destroyInput?.value !== "1";
+    });
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -5609,6 +5884,7 @@ function registerMidwestControllers(application) {
   application.register("midwest-show-if", ShowIf);
   application.register("midwest-tree-view", TreeView);
   application.register("midwest-command-palette", CommandPalette);
+  application.register("midwest-repeatable", Repeatable);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };