@unabridged/midwest 0.24.4 → 0.25.0

package/app/assets/stylesheets/midwest.tailwind.css

@@ -14,6 +14,13 @@
    last so generated utilities still beat components. */
 @layer properties, theme, base, components, utilities, midwest.tailwindcss, midwest.vendor, midwest.color-system, midwest.tokens, midwest.responsive, midwest.dark-mode, midwest.typography, midwest.scrollbars, midwest.components, midwest.utilities;
 
+/* The generated component AST sidecars (`<name>.ast.json` / `<name>.ast.md`,
+   see bin/ast) are DATA, not templates. Exclude them from Tailwind's automatic
+   content detection so class-like strings in them never generate stray
+   utilities. Paths are relative to this stylesheet. */
+@source not "../../components/midwest/**/*.ast.json";
+@source not "../../components/midwest/**/*.ast.md";
+
 @import './midwest/tailwind.css';
 
 @layer

package/dist/javascript/collection/app/components/midwest/form/form_controller.js

@@ -1,13 +1,30 @@
 import { Controller } from '@hotwired/stimulus';
 
 class Form extends Controller {
+  static values = {
+    // Auto-submit the form (debounced) whenever a field changes.
+    autosave: { type: Boolean, default: false },
+    autosaveDelay: { type: Number, default: 600 },
+    // Emit success/error events and keep buttons interactive after an in-page
+    // (non-navigating) Turbo submission.
+    ajax: { type: Boolean, default: false }
+  };
+  autosaveTimer;
   connect() {
     this.element.addEventListener("submit", this.handleSubmit);
     this.element.addEventListener("turbo:submit-end", this.handleTurboEnd);
+    if (this.autosaveValue) {
+      this.element.addEventListener("input", this.scheduleAutosave);
+      this.element.addEventListener("change", this.scheduleAutosave);
+    }
   }
   disconnect() {
     this.element.removeEventListener("submit", this.handleSubmit);
     this.element.removeEventListener("turbo:submit-end", this.handleTurboEnd);
+    this.element.removeEventListener("input", this.scheduleAutosave);
+    this.element.removeEventListener("change", this.scheduleAutosave);
+    if (this.autosaveTimer != null)
+      clearTimeout(this.autosaveTimer);
   }
   handleSubmit = () => {
     this.submitButtons.forEach((btn) => {
@@ -15,15 +32,32 @@ class Form extends Controller {
       btn.disabled = true;
     });
   };
-  // Restore buttons if the submission fails (e.g. a Turbo Frame validation
-  // error that re-renders the form without a full page transition).
   handleTurboEnd = (event) => {
-    if (!event.detail?.success) {
+    const detail = event.detail;
+    const success = detail?.success ?? false;
+    if (!success || this.ajaxValue || this.autosaveValue) {
       this.submitButtons.forEach((btn) => {
         btn.classList.remove("loading");
         btn.disabled = false;
       });
     }
+    if (this.ajaxValue) {
+      this.dispatch(success ? "success" : "error", { detail });
+    }
+  };
+  // Debounce field changes into a single background submission. `requestSubmit`
+  // runs constraint validation and fires the `submit` event, so buttons pick up
+  // their loading state and Turbo handles the request just like a manual submit.
+  scheduleAutosave = () => {
+    if (this.autosaveTimer != null)
+      clearTimeout(this.autosaveTimer);
+    this.autosaveTimer = setTimeout(() => {
+      if (typeof this.element.requestSubmit === "function") {
+        this.element.requestSubmit();
+      } else {
+        this.element.submit();
+      }
+    }, this.autosaveDelayValue);
   };
   get submitButtons() {
     return Array.from(

package/dist/javascript/collection/app/components/midwest/form/form_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"form_controller.js","sources":["../../../../../../../app/components/midwest/form/form_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Form extends Controller<HTMLFormElement> {\n  connect () {\n    this.element.addEventListener('submit', this.handleSubmit)\n    this.element.addEventListener('turbo:submit-end', this.handleTurboEnd)\n  }\n\n  disconnect () {\n    this.element.removeEventListener('submit', this.handleSubmit)\n    this.element.removeEventListener('turbo:submit-end', this.handleTurboEnd)\n  }\n\n  private handleSubmit = () => {\n    this.submitButtons.forEach(btn => {\n      btn.classList.add('loading')\n      btn.disabled = true\n    })\n  }\n\n  // Restore buttons if the submission fails (e.g. a Turbo Frame validation\n  // error that re-renders the form without a full page transition).\n  private handleTurboEnd = (event: Event) => {\n    if (!(event as CustomEvent).detail?.success) {\n      this.submitButtons.forEach(btn => {\n        btn.classList.remove('loading')\n        btn.disabled = false\n      })\n    }\n  }\n\n  private get submitButtons (): HTMLButtonElement[] {\n    return Array.from(\n      this.element.querySelectorAll<HTMLButtonElement>('button[type=\"submit\"], button:not([type])')\n    )\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,aAAa,UAA4B,CAAA;AAAA,EAC5D,OAAW,GAAA;AACT,IAAA,IAAA,CAAK,OAAQ,CAAA,gBAAA,CAAiB,QAAU,EAAA,IAAA,CAAK,YAAY,CAAA,CAAA;AACzD,IAAA,IAAA,CAAK,OAAQ,CAAA,gBAAA,CAAiB,kBAAoB,EAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAAA,GACvE;AAAA,EAEA,UAAc,GAAA;AACZ,IAAA,IAAA,CAAK,OAAQ,CAAA,mBAAA,CAAoB,QAAU,EAAA,IAAA,CAAK,YAAY,CAAA,CAAA;AAC5D,IAAA,IAAA,CAAK,OAAQ,CAAA,mBAAA,CAAoB,kBAAoB,EAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAAA,GAC1E;AAAA,EAEQ,eAAe,MAAM;AAC3B,IAAK,IAAA,CAAA,aAAA,CAAc,QAAQ,CAAO,GAAA,KAAA;AAChC,MAAI,GAAA,CAAA,SAAA,CAAU,IAAI,SAAS,CAAA,CAAA;AAC3B,MAAA,GAAA,CAAI,QAAW,GAAA,IAAA,CAAA;AAAA,KAChB,CAAA,CAAA;AAAA,GACH,CAAA;AAAA;AAAA;AAAA,EAIQ,cAAA,GAAiB,CAAC,KAAiB,KAAA;AACzC,IAAI,IAAA,CAAE,KAAsB,CAAA,MAAA,EAAQ,OAAS,EAAA;AAC3C,MAAK,IAAA,CAAA,aAAA,CAAc,QAAQ,CAAO,GAAA,KAAA;AAChC,QAAI,GAAA,CAAA,SAAA,CAAU,OAAO,SAAS,CAAA,CAAA;AAC9B,QAAA,GAAA,CAAI,QAAW,GAAA,KAAA,CAAA;AAAA,OAChB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,CAAA;AAAA,EAEA,IAAY,aAAsC,GAAA;AAChD,IAAA,OAAO,KAAM,CAAA,IAAA;AAAA,MACX,IAAA,CAAK,OAAQ,CAAA,gBAAA,CAAoC,2CAA2C,CAAA;AAAA,KAC9F,CAAA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"form_controller.js","sources":["../../../../../../../app/components/midwest/form/form_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Form extends Controller<HTMLFormElement> {\n  static values = {\n    // Auto-submit the form (debounced) whenever a field changes.\n    autosave: { type: Boolean, default: false },\n    autosaveDelay: { type: Number, default: 600 },\n    // Emit success/error events and keep buttons interactive after an in-page\n    // (non-navigating) Turbo submission.\n    ajax: { type: Boolean, default: false }\n  }\n\n  declare autosaveValue: boolean\n  declare autosaveDelayValue: number\n  declare ajaxValue: boolean\n\n  private autosaveTimer?: ReturnType<typeof setTimeout>\n\n  connect () {\n    this.element.addEventListener('submit', this.handleSubmit)\n    this.element.addEventListener('turbo:submit-end', this.handleTurboEnd)\n    if (this.autosaveValue) {\n      this.element.addEventListener('input', this.scheduleAutosave)\n      this.element.addEventListener('change', this.scheduleAutosave)\n    }\n  }\n\n  disconnect () {\n    this.element.removeEventListener('submit', this.handleSubmit)\n    this.element.removeEventListener('turbo:submit-end', this.handleTurboEnd)\n    this.element.removeEventListener('input', this.scheduleAutosave)\n    this.element.removeEventListener('change', this.scheduleAutosave)\n    if (this.autosaveTimer != null) clearTimeout(this.autosaveTimer)\n  }\n\n  private handleSubmit = () => {\n    this.submitButtons.forEach(btn => {\n      btn.classList.add('loading')\n      btn.disabled = true\n    })\n  }\n\n  private handleTurboEnd = (event: Event) => {\n    const detail = (event as CustomEvent).detail\n    const success: boolean = detail?.success ?? false\n\n    // Restore buttons when the submission failed (e.g. a Turbo Frame validation\n    // error re-renders the form without a page transition), or whenever the form\n    // stays on the page — ajax and autosave never navigate away, so a stuck\n    // \"loading\" button would otherwise persist.\n    if (!success || this.ajaxValue || this.autosaveValue) {\n      this.submitButtons.forEach(btn => {\n        btn.classList.remove('loading')\n        btn.disabled = false\n      })\n    }\n\n    // Let app code react to an in-page submission without a navigation.\n    if (this.ajaxValue) {\n      this.dispatch(success ? 'success' : 'error', { detail })\n    }\n  }\n\n  // Debounce field changes into a single background submission. `requestSubmit`\n  // runs constraint validation and fires the `submit` event, so buttons pick up\n  // their loading state and Turbo handles the request just like a manual submit.\n  private scheduleAutosave = () => {\n    if (this.autosaveTimer != null) clearTimeout(this.autosaveTimer)\n    this.autosaveTimer = setTimeout(() => {\n      if (typeof this.element.requestSubmit === 'function') {\n        this.element.requestSubmit()\n      } else {\n        this.element.submit()\n      }\n    }, this.autosaveDelayValue)\n  }\n\n  private get submitButtons (): HTMLButtonElement[] {\n    return Array.from(\n      this.element.querySelectorAll<HTMLButtonElement>('button[type=\"submit\"], button:not([type])')\n    )\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/javascript/midwest.js

@@ -3579,13 +3579,30 @@ class FormLiveSummary extends Controller {
 }
 
 class Form extends Controller {
+  static values = {
+    // Auto-submit the form (debounced) whenever a field changes.
+    autosave: { type: Boolean, default: false },
+    autosaveDelay: { type: Number, default: 600 },
+    // Emit success/error events and keep buttons interactive after an in-page
+    // (non-navigating) Turbo submission.
+    ajax: { type: Boolean, default: false }
+  };
+  autosaveTimer;
   connect() {
     this.element.addEventListener("submit", this.handleSubmit);
     this.element.addEventListener("turbo:submit-end", this.handleTurboEnd);
+    if (this.autosaveValue) {
+      this.element.addEventListener("input", this.scheduleAutosave);
+      this.element.addEventListener("change", this.scheduleAutosave);
+    }
   }
   disconnect() {
     this.element.removeEventListener("submit", this.handleSubmit);
     this.element.removeEventListener("turbo:submit-end", this.handleTurboEnd);
+    this.element.removeEventListener("input", this.scheduleAutosave);
+    this.element.removeEventListener("change", this.scheduleAutosave);
+    if (this.autosaveTimer != null)
+      clearTimeout(this.autosaveTimer);
   }
   handleSubmit = () => {
     this.submitButtons.forEach((btn) => {
@@ -3593,15 +3610,32 @@ class Form extends Controller {
       btn.disabled = true;
     });
   };
-  // Restore buttons if the submission fails (e.g. a Turbo Frame validation
-  // error that re-renders the form without a full page transition).
   handleTurboEnd = (event) => {
-    if (!event.detail?.success) {
+    const detail = event.detail;
+    const success = detail?.success ?? false;
+    if (!success || this.ajaxValue || this.autosaveValue) {
       this.submitButtons.forEach((btn) => {
         btn.classList.remove("loading");
         btn.disabled = false;
       });
     }
+    if (this.ajaxValue) {
+      this.dispatch(success ? "success" : "error", { detail });
+    }
+  };
+  // Debounce field changes into a single background submission. `requestSubmit`
+  // runs constraint validation and fires the `submit` event, so buttons pick up
+  // their loading state and Turbo handles the request just like a manual submit.
+  scheduleAutosave = () => {
+    if (this.autosaveTimer != null)
+      clearTimeout(this.autosaveTimer);
+    this.autosaveTimer = setTimeout(() => {
+      if (typeof this.element.requestSubmit === "function") {
+        this.element.requestSubmit();
+      } else {
+        this.element.submit();
+      }
+    }, this.autosaveDelayValue);
   };
   get submitButtons() {
     return Array.from(