kiso 0.6.2.pre → 0.6.3.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8e190287bffc19365594567c518032deea302c6dc22ef9a3e7aa4a5b5131c602
-  data.tar.gz: f22a684ad94ee787f066f886ff0dd611846dd09aef7d38a89488515f1eb55f19
+  metadata.gz: fc54430908619f2cb1581ca13089cfceb7b9c527f7050a0079cfced84ed088ea
+  data.tar.gz: ea34c1970ff36648de7571bac67bec65cf5a57083a4afb4afe933c89eb27d1b2
 SHA512:
-  metadata.gz: c892bfb57c5155239295cc7ce5cd9f3a6747504a57883b4fa49ea7b1e9f637c164285af0a8c98824972121d13c9f57f691d95f808351bacebc176255641583d0
-  data.tar.gz: 215260ab8612f8521cc8f95357cc527968cb90be8886db63867441e7cf75714dce789b0d40fd48d624bb864bc129afb782defdaef74cb8cb554249b7b73729c5
+  metadata.gz: '02761138a1d470cec63228c7d3e5ffe2d9d93d271427814059cb6193450492051755bba4514f945c225a669276540b9a6bd223469ec6eb0b05b13ae361ef2601'
+  data.tar.gz: 2bc1f27fc05aa8da6aecf7e3b6eaae668e02afc45caa3636ebc55270738588dd4dc61102554e0cadfe33e99cba0a72a9e4e56decb3094b4646d5955a28e03ca3

data/app/javascript/controllers/kiso/button_loading_controller.js

@@ -0,0 +1,120 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Automatic loading state for buttons inside Turbo forms.
+ *
+ * When the button's form submits via Turbo, the controller saves the button's
+ * original content, injects an animated spinner SVG, and disables the button.
+ * On `turbo:submit-end`, the original content and state are restored.
+ *
+ * Attach via `data-controller="kiso--button-loading"` on the `<button>` element.
+ * The Button partial adds this automatically when `loading_auto: true`.
+ *
+ * @example
+ *   <form action="/save" method="post" data-turbo="true">
+ *     <button type="submit"
+ *             data-controller="kiso--button-loading"
+ *             data-slot="button"
+ *             class="...">
+ *       Save
+ *     </button>
+ *   </form>
+ *
+ * @fires kiso--button-loading:loading - When the button enters loading state
+ * @fires kiso--button-loading:complete - When the button exits loading state
+ */
+export default class extends Controller {
+  connect() {
+    this._form = this.element.closest("form")
+    if (!this._form) return
+
+    this._handleSubmitStart = this._handleSubmitStart.bind(this)
+    this._handleSubmitEnd = this._handleSubmitEnd.bind(this)
+
+    this._form.addEventListener("turbo:submit-start", this._handleSubmitStart)
+    this._form.addEventListener("turbo:submit-end", this._handleSubmitEnd)
+  }
+
+  disconnect() {
+    if (!this._form) return
+
+    this._form.removeEventListener("turbo:submit-start", this._handleSubmitStart)
+    this._form.removeEventListener("turbo:submit-end", this._handleSubmitEnd)
+    this._restore()
+  }
+
+  /**
+   * Saves original button content and enters loading state.
+   *
+   * @param {CustomEvent} event - turbo:submit-start event
+   * @private
+   */
+  _handleSubmitStart(event) {
+    // Only react if this button triggered the submission
+    if (event.detail?.formSubmission?.submitter !== this.element) return
+
+    this._savedNodes = Array.from(this.element.childNodes).map((n) => n.cloneNode(true))
+    this._wasDisabled = this.element.disabled
+
+    // Create spinner SVG via DOM APIs (safe, no innerHTML)
+    const spinner = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+    spinner.setAttribute("viewBox", "0 0 24 24")
+    spinner.setAttribute("fill", "none")
+    spinner.setAttribute("stroke", "currentColor")
+    spinner.setAttribute("stroke-width", "2")
+    spinner.setAttribute("stroke-linecap", "round")
+    spinner.setAttribute("stroke-linejoin", "round")
+    spinner.setAttribute("class", "animate-spin shrink-0 pointer-events-none size-4")
+
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
+    path.setAttribute("d", "M21 12a9 9 0 1 1-6.219-8.56")
+    spinner.appendChild(path)
+
+    // Replace content: spinner + original text
+    const textContent = this.element.textContent?.trim()
+    while (this.element.firstChild) {
+      this.element.removeChild(this.element.firstChild)
+    }
+    this.element.appendChild(spinner)
+    if (textContent) {
+      this.element.appendChild(document.createTextNode(` ${textContent}`))
+    }
+
+    this.element.disabled = true
+    this.element.setAttribute("aria-busy", "true")
+
+    this.dispatch("loading")
+  }
+
+  /**
+   * Restores original button content and state on turbo:submit-end.
+   *
+   * @private
+   */
+  _handleSubmitEnd() {
+    this._restore()
+    this.dispatch("complete")
+  }
+
+  /**
+   * Restores the button to its pre-loading state.
+   *
+   * @private
+   */
+  _restore() {
+    if (!this._savedNodes) return
+
+    while (this.element.firstChild) {
+      this.element.removeChild(this.element.firstChild)
+    }
+    for (const node of this._savedNodes) {
+      this.element.appendChild(node)
+    }
+
+    this.element.disabled = this._wasDisabled
+    this.element.removeAttribute("aria-busy")
+
+    this._savedNodes = undefined
+    this._wasDisabled = undefined
+  }
+}

data/app/javascript/controllers/kiso/dropdown_menu_controller.js

@@ -158,7 +158,10 @@ export default class extends Controller {
     if (item.dataset.disabled === "true") return
 
     this.dispatch("select", { detail: { item } })
-    this.close()
+    // Defer close to the next frame so other click handlers on the item
+    // (e.g. dialog triggers, custom actions) complete before the menu
+    // hides and removes elements from view. See #233.
+    requestAnimationFrame(() => this.close())
   }
 
   /**

data/app/javascript/controllers/kiso/index.d.ts

@@ -6,6 +6,7 @@ declare const KisoUi: {
 
 export default KisoUi
 export const KisoAlertController: typeof Controller
+export const KisoButtonLoadingController: typeof Controller
 export const KisoComboboxController: typeof Controller
 export const KisoCommandController: typeof Controller
 export const KisoCommandDialogController: typeof Controller

data/app/javascript/controllers/kiso/index.js

@@ -19,6 +19,7 @@
  */
 
 import KisoAlertController from "./alert_controller.js"
+import KisoButtonLoadingController from "./button_loading_controller.js"
 import KisoComboboxController from "./combobox_controller.js"
 import KisoCommandController from "./command_controller.js"
 import KisoCommandDialogController from "./command_dialog_controller.js"
@@ -43,6 +44,7 @@ const KisoUi = {
    */
   start(application) {
     application.register("kiso--alert", KisoAlertController)
+    application.register("kiso--button-loading", KisoButtonLoadingController)
     application.register("kiso--combobox", KisoComboboxController)
     application.register("kiso--command", KisoCommandController)
     application.register("kiso--command-dialog", KisoCommandDialogController)
@@ -64,6 +66,7 @@ const KisoUi = {
 export default KisoUi
 export {
   KisoAlertController,
+  KisoButtonLoadingController,
   KisoComboboxController,
   KisoCommandController,
   KisoCommandDialogController,

data/app/views/kiso/components/_button.html.erb

@@ -1,14 +1,17 @@
 <%# locals: (color: :primary, variant: :solid, size: :md, block: false,
              type: :button, href: nil, method: nil, disabled: false,
-             loading: false, form: {}, css_classes: "", **component_options) %>
+             loading: false, loading_auto: false, form: {}, css_classes: "", **component_options) %>
 <%# Polymorphic button that renders as <button>, <a>, or button_to depending on props.
     With href: renders an anchor tag. With href: + method: (non-GET) renders a Rails
     button_to form for safe non-GET navigation. Without href: renders a plain <button>.
-    With loading: true, prepends an animated spinner and disables the button. %>
+    With loading: true, prepends an animated spinner and disables the button.
+    With loading_auto: true, attaches kiso--button-loading Stimulus controller for
+    automatic loading state on Turbo form submissions. %>
 <%
   css = Kiso::Themes::Button.render(
     color: color, variant: variant, size: size, block: block, class: css_classes)
-  data = kiso_prepare_options(component_options, slot: "button")
+  data = kiso_prepare_options(component_options, slot: "button",
+    **(loading_auto ? { controller: "kiso--button-loading" } : {}))
   use_button_to = href.present? && method.present? && method.to_s != "get"
   is_disabled = disabled || loading
   component_options[:"aria-busy"] = true if loading

data/lib/kiso/version.rb

@@ -5,5 +5,5 @@ module Kiso
   # Updated by +bin/release+.
   #
   # @return [String]
-  VERSION = "0.6.2.pre"
+  VERSION = "0.6.3.pre"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kiso
 version: !ruby/object:Gem::Version
-  version: 0.6.2.pre
+  version: 0.6.3.pre
 platform: ruby
 authors:
 - Steve Clarke
@@ -100,6 +100,7 @@ files:
 - app/helpers/kiso/theme_helper.rb
 - app/helpers/kiso/ui_context_helper.rb
 - app/javascript/controllers/kiso/alert_controller.js
+- app/javascript/controllers/kiso/button_loading_controller.js
 - app/javascript/controllers/kiso/combobox_controller.js
 - app/javascript/controllers/kiso/command_controller.js
 - app/javascript/controllers/kiso/command_dialog_controller.js