@hakumi-dev/hakumi-components 0.1.17-pre → 0.1.19-pre

package/app/javascript/hakumi_components/controllers/hakumi/tabs_controller.js

@@ -335,8 +335,14 @@ export default class extends RegistryController {
 
 
     if (wasActive && this._tabs.length > 0) {
-      const newIndex = Math.min(tabIndex, this._tabs.length - 1)
-      this.#activateTabByKey(this._tabs[newIndex].key)
+      const candidates = [
+        ...this._tabs.slice(tabIndex),
+        ...this._tabs.slice(0, tabIndex)
+      ]
+      const nextTab = candidates.find(tab => !tab.disabled)
+      if (nextTab) {
+        this.#activateTabByKey(nextTab.key)
+      }
     }
 
     this.#syncOverflow()

package/app/javascript/hakumi_components/controllers/hakumi/tag_controller.js

@@ -1,12 +1,26 @@
-import { Controller } from "@hotwired/stimulus"
+import RegistryController from "../base/registry_controller.js"
 
-export default class extends Controller {
+export default class extends RegistryController {
   static values = {
     checkable: { type: Boolean, default: false },
     checked: { type: Boolean, default: false }
   }
 
-  connect() {
+  setup() {
+    if (this.checkableValue) {
+      this.boundHandleClick = this.handleClick.bind(this)
+      this.element.addEventListener("click", this.boundHandleClick)
+    }
+  }
+
+  teardown() {
+    if (this.boundHandleClick) {
+      this.element.removeEventListener("click", this.boundHandleClick)
+      this.boundHandleClick = null
+    }
+  }
+
+  registerApi() {
     this.element.hakumiComponent = {
       name: "tag",
       version: 1,
@@ -19,18 +33,6 @@ export default class extends Controller {
         isChecked: () => this.isChecked()
       }
     }
-
-    if (this.checkableValue) {
-      this.element.addEventListener("click", this.#handleClick)
-    }
-  }
-
-  disconnect() {
-    delete this.element.hakumiComponent
-
-    if (this.checkableValue) {
-      this.element.removeEventListener("click", this.#handleClick)
-    }
   }
 
   close(event) {
@@ -60,8 +62,8 @@ export default class extends Controller {
     if (!this.checkableValue) return
 
     this.checkedValue = !this.checkedValue
-    this.#updateCheckedState()
-    
+    this.updateCheckedState()
+
     this.dispatch("change", {
       detail: { checked: this.checkedValue, element: this.element }
     })
@@ -69,10 +71,10 @@ export default class extends Controller {
 
   check() {
     if (!this.checkableValue || this.checkedValue) return
-    
+
     this.checkedValue = true
-    this.#updateCheckedState()
-    
+    this.updateCheckedState()
+
     this.dispatch("change", {
       detail: { checked: true, element: this.element }
     })
@@ -80,10 +82,10 @@ export default class extends Controller {
 
   uncheck() {
     if (!this.checkableValue || !this.checkedValue) return
-    
+
     this.checkedValue = false
-    this.#updateCheckedState()
-    
+    this.updateCheckedState()
+
     this.dispatch("change", {
       detail: { checked: false, element: this.element }
     })
@@ -93,12 +95,12 @@ export default class extends Controller {
     return this.checkedValue
   }
 
-  #handleClick = (event) => {
+  handleClick(event) {
     if (event.target.closest(".hakumi-tag-close-icon")) return
     this.toggle()
   }
 
-  #updateCheckedState() {
+  updateCheckedState() {
     this.element.classList.toggle("hakumi-tag-checkable-checked", this.checkedValue)
   }
 }

package/app/javascript/hakumi_components/controllers/hakumi/tag_group_controller.js

@@ -1,19 +1,25 @@
-import { Controller } from "@hotwired/stimulus"
+import RegistryController from "../base/registry_controller.js"
 import Sortable from "sortablejs"
 
-export default class extends Controller {
+export default class extends RegistryController {
   static values = {
     sortable: { type: Boolean, default: false },
     animation: { type: Number, default: 150 }
   }
 
-  connect() {
+  setup() {
     this._sortable = null
 
     if (this.sortableValue) {
-      this.#setupSortable()
+      this.setupSortable()
     }
+  }
+
+  teardown() {
+    this.destroySortable()
+  }
 
+  registerApi() {
     this.element.hakumiComponent = {
       name: "tag_group",
       version: 1,
@@ -28,16 +34,11 @@ export default class extends Controller {
     }
   }
 
-  disconnect() {
-    this.#destroySortable()
-    delete this.element.hakumiComponent
-  }
-
   sortableValueChanged() {
     if (this.sortableValue) {
-      this.#setupSortable()
+      this.setupSortable()
     } else {
-      this.#destroySortable()
+      this.destroySortable()
     }
   }
 
@@ -61,7 +62,7 @@ export default class extends Controller {
     return this.getTags().map(tag => tag.textContent.trim())
   }
 
-  #setupSortable() {
+  setupSortable() {
     if (this._sortable) return
 
     this._sortable = Sortable.create(this.element, {
@@ -74,19 +75,19 @@ export default class extends Controller {
         this.dispatch("sortStart", { detail: { item: evt.item, oldIndex: evt.oldIndex } })
       },
       onEnd: (evt) => {
-        this.dispatch("sortEnd", { 
-          detail: { 
-            item: evt.item, 
-            oldIndex: evt.oldIndex, 
+        this.dispatch("sortEnd", {
+          detail: {
+            item: evt.item,
+            oldIndex: evt.oldIndex,
             newIndex: evt.newIndex,
             values: this.getTagValues()
-          } 
+          }
         })
       }
     })
   }
 
-  #destroySortable() {
+  destroySortable() {
     if (this._sortable) {
       this._sortable.destroy()
       this._sortable = null

package/app/javascript/hakumi_components/controllers/hakumi/theme_controller.js

@@ -2,136 +2,135 @@ import RegistryController from "../base/registry_controller.js"
 import { Persistence } from "../../core/persistence.js"
 
 export default class extends RegistryController {
-    static values = {
-        default: { type: String, default: "light" },
-        storageKey: { type: String, default: "theme" },
-        syncSandbox: { type: Boolean, default: true },
+  static values = {
+    default: { type: String, default: "light" },
+    storageKey: { type: String, default: "theme" },
+    syncSandbox: { type: Boolean, default: true },
+  }
+
+  static targets = ["sandboxFrame"]
+
+  static mount() {
+    Persistence.ensureHost({ id: "theme", controllerName: "hakumi--theme" })
+  }
+
+  setup() {
+    if (window.__hakumiThemeActive && window.__hakumiThemeActive !== this.element.id) return
+    window.__hakumiThemeActive = this.element.id
+
+    this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+
+    // Check if there's an existing explicit theme set in HTML
+    const existingTheme = document.documentElement.getAttribute("data-theme")
+
+    this.boundHandleSystemThemeChange = (e) => {
+      const currentTheme = document.documentElement.getAttribute("data-theme")
+      // If theme is "auto", don't change the attribute - let CSS media query handle it
+      // Only dispatch event for sync purposes
+      if (currentTheme === "auto") {
+        const effectiveTheme = e.matches ? "dark" : "light"
+        window.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme: effectiveTheme } }))
+        if (this.syncSandboxValue) this.syncSandboxFrames(effectiveTheme)
+        return
+      }
+      // For non-auto themes, only update if no stored preference
+      if (!Persistence.storage.get(this.storageKeyValue)) {
+        this.setTheme(e.matches ? "dark" : "light")
+      }
     }
 
-    static targets = ["sandboxFrame"]
+    this._mediaQuery.addEventListener("change", this.boundHandleSystemThemeChange)
 
-    static mount() {
-        Persistence.ensureHost({ id: "theme", controllerName: "hakumi--theme" })
+    if (this.syncSandboxValue) {
+      this.sandboxFrameTargets.forEach((frame) => {
+        frame.addEventListener("load", this.handleSandboxLoad)
+      })
     }
 
-    setup() {
-        if (window.__hakumiThemeActive && window.__hakumiThemeActive !== this.element.id) return
-        window.__hakumiThemeActive = this.element.id
-
-        this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-
-        // Check if there's an existing explicit theme set in HTML
-        const existingTheme = document.documentElement.getAttribute("data-theme")
-        const shouldAutoDetect = !existingTheme || existingTheme === "auto"
-
-        this._handleSystemThemeChange = (e) => {
-            const currentTheme = document.documentElement.getAttribute("data-theme")
-            // If theme is "auto", don't change the attribute - let CSS media query handle it
-            // Only dispatch event for sync purposes
-            if (currentTheme === "auto") {
-                const effectiveTheme = e.matches ? "dark" : "light"
-                window.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme: effectiveTheme } }))
-                if (this.syncSandboxValue) this.syncSandboxFrames(effectiveTheme)
-                return
-            }
-            // For non-auto themes, only update if no stored preference
-            if (!Persistence.storage.get(this.storageKeyValue)) {
-                this.setTheme(e.matches ? "dark" : "light")
-            }
-        }
-
-        this._mediaQuery.addEventListener("change", this._handleSystemThemeChange)
-
-        if (this.syncSandboxValue) {
-            this.sandboxFrameTargets.forEach((frame) => {
-                frame.addEventListener("load", this.handleSandboxLoad)
-            })
-        }
-
-        // Only set theme if there's no explicit theme
-        // If "auto", don't change the attribute - CSS media query handles it
-        if (!existingTheme) {
-            this.setTheme(this.detectInitialTheme())
-        } else if (existingTheme === "auto") {
-            // For "auto", just dispatch event and sync sandboxes without changing attribute
-            const effectiveTheme = this._mediaQuery.matches ? "dark" : "light"
-            window.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme: effectiveTheme } }))
-            if (this.syncSandboxValue) this.syncSandboxFrames(effectiveTheme)
-        }
+    // Only set theme if there's no explicit theme
+    // If "auto", don't change the attribute - CSS media query handles it
+    if (!existingTheme) {
+      this.setTheme(this.detectInitialTheme())
+    } else if (existingTheme === "auto") {
+      // For "auto", just dispatch event and sync sandboxes without changing attribute
+      const effectiveTheme = this._mediaQuery.matches ? "dark" : "light"
+      window.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme: effectiveTheme } }))
+      if (this.syncSandboxValue) this.syncSandboxFrames(effectiveTheme)
     }
+  }
 
-    teardown() {
-        if (window.__hakumiThemeActive === this.element.id) delete window.__hakumiThemeActive
+  teardown() {
+    if (window.__hakumiThemeActive === this.element.id) delete window.__hakumiThemeActive
 
-        if (this._mediaQuery && this._handleSystemThemeChange) {
-            this._mediaQuery.removeEventListener("change", this._handleSystemThemeChange)
-        }
-
-        if (this.syncSandboxValue) {
-            this.sandboxFrameTargets.forEach((frame) => {
-                frame.removeEventListener("load", this.handleSandboxLoad)
-            })
-        }
-    }
-
-    registerApi() {
-        const api = {
-            get: () => this.getTheme(),
-            set: (theme) => this.setTheme(theme),
-            toggle: () => this.toggle(),
-            clearStored: () => Persistence.storage.remove(this.storageKeyValue),
-            detect: () => this.detectInitialTheme(),
-        }
-
-        this.element.hakumiComponent = {
-            name: "theme",
-            version: 1,
-            singleton: true,
-            api,
-            apply: (params = {}) => {
-                if (params.theme) this.setTheme(params.theme)
-            },
-        }
+    if (this._mediaQuery && this.boundHandleSystemThemeChange) {
+      this._mediaQuery.removeEventListener("change", this.boundHandleSystemThemeChange)
     }
 
-    toggle() {
-        const current = this.getTheme()
-        const next = current === "dark" ? "light" : "dark"
-        this.setTheme(next)
-        Persistence.storage.set(this.storageKeyValue, next)
+    if (this.syncSandboxValue) {
+      this.sandboxFrameTargets.forEach((frame) => {
+        frame.removeEventListener("load", this.handleSandboxLoad)
+      })
     }
-
-    getTheme() {
-        return document.documentElement.getAttribute("data-theme") || this.defaultValue
-    }
-
-    setTheme(theme) {
-        document.documentElement.setAttribute("data-theme", theme)
-        window.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme } }))
-        if (this.syncSandboxValue) this.syncSandboxFrames(theme)
+  }
+
+  registerApi() {
+    const api = {
+      get: () => this.getTheme(),
+      set: (theme) => this.setTheme(theme),
+      toggle: () => this.toggle(),
+      clearStored: () => Persistence.storage.remove(this.storageKeyValue),
+      detect: () => this.detectInitialTheme(),
     }
 
-    detectInitialTheme() {
-        const savedTheme = Persistence.storage.get(this.storageKeyValue)
-        if (savedTheme) return savedTheme
-        if (this._mediaQuery?.matches) return "dark"
-        return this.defaultValue
+    this.element.hakumiComponent = {
+      name: "theme",
+      version: 1,
+      singleton: true,
+      api,
+      apply: (params = {}) => {
+        if (params.theme) this.setTheme(params.theme)
+      },
     }
-
-    syncSandboxFrames(theme) {
-        this._currentTheme = theme
-        this.sandboxFrameTargets.forEach((frame) => this.postThemeToFrame(frame, theme))
-    }
-
-    handleSandboxLoad = (event) => {
-        const frame = event.currentTarget
-        const theme = this._currentTheme || this.getTheme()
-        this.postThemeToFrame(frame, theme)
-    }
-
-    postThemeToFrame(frame, theme) {
-        if (frame?.contentWindow) {
-            frame.contentWindow.postMessage({ theme }, "*")
-        }
+  }
+
+  toggle() {
+    const current = this.getTheme()
+    const next = current === "dark" ? "light" : "dark"
+    this.setTheme(next)
+    Persistence.storage.set(this.storageKeyValue, next)
+  }
+
+  getTheme() {
+    return document.documentElement.getAttribute("data-theme") || this.defaultValue
+  }
+
+  setTheme(theme) {
+    document.documentElement.setAttribute("data-theme", theme)
+    window.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme } }))
+    if (this.syncSandboxValue) this.syncSandboxFrames(theme)
+  }
+
+  detectInitialTheme() {
+    const savedTheme = Persistence.storage.get(this.storageKeyValue)
+    if (savedTheme) return savedTheme
+    if (this._mediaQuery?.matches) return "dark"
+    return this.defaultValue
+  }
+
+  syncSandboxFrames(theme) {
+    this._currentTheme = theme
+    this.sandboxFrameTargets.forEach((frame) => this.postThemeToFrame(frame, theme))
+  }
+
+  handleSandboxLoad = (event) => {
+    const frame = event.currentTarget
+    const theme = this._currentTheme || this.getTheme()
+    this.postThemeToFrame(frame, theme)
+  }
+
+  postThemeToFrame(frame, theme) {
+    if (frame?.contentWindow) {
+      frame.contentWindow.postMessage({ theme }, "*")
     }
+  }
 }

package/app/javascript/hakumi_components/controllers/hakumi/transfer_controller.js

@@ -27,6 +27,7 @@ export default class extends RegistryController {
   }
 
   setup() {
+    this.#syncHiddenInputs()
     this.#updateCounts()
     this.#syncSelectAll("source")
     this.#syncSelectAll("target")
@@ -71,6 +72,7 @@ export default class extends RegistryController {
       if (item.parentElement !== destination) {
         destination.appendChild(item)
       }
+      this.#syncHiddenInput(item, targetSet.has(key))
       this.#setItemSelected(item, false)
     })
 
@@ -176,6 +178,7 @@ export default class extends RegistryController {
     items.forEach((item) => {
       this.#setItemSelected(item, false)
       this.#listContainer(to).appendChild(item)
+      this.#syncHiddenInput(item, to === "target")
     })
 
     this.targetKeysValue = this.getTargetKeys()
@@ -211,7 +214,8 @@ export default class extends RegistryController {
   }
 
   #isItemDisabled(item) {
-    return item.dataset.disabled === "true" || item.querySelector("input")?.disabled
+    const checkbox = item.querySelector(".hakumi-checkbox-input")
+    return item.dataset.disabled === "true" || checkbox?.disabled
   }
 
   #isItemSelected(item) {
@@ -279,6 +283,18 @@ export default class extends RegistryController {
     return Array.from(container.querySelectorAll(".hakumi-transfer-list-item"))
   }
 
+  #syncHiddenInputs() {
+    this.#listItems("source").forEach((item) => this.#syncHiddenInput(item, false))
+    this.#listItems("target").forEach((item) => this.#syncHiddenInput(item, true))
+  }
+
+  #syncHiddenInput(item, enabled) {
+    const hiddenInput = item.querySelector("[data-hakumi--transfer-hidden-input='true']")
+    if (!hiddenInput) return
+
+    hiddenInput.disabled = !enabled
+  }
+
   #listKeys(list) {
     return this.#listItems(list).map((item) => item.dataset.key)
   }