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

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

@@ -1,6 +1,7 @@
 import RegistryController from "../base/registry_controller.js"
 
 export default class extends RegistryController {
+    static declarativeActions = ["confirm", "cancel"]
     static targets = ["trigger", "popover", "okButton", "cancelButton"]
     static values = {
         placement: { type: String, default: "top" },
@@ -29,9 +30,12 @@ export default class extends RegistryController {
         this.isOpen = this.openValue
         this.isLoading = false
         this.setupTriggerEvents()
-        this.setupButtonEvents()
         this._popover = this.popoverTarget
 
+        // Listen for declarative actions on popover (may be moved to document.body)
+        this.boundPopoverAction = this.handleDeclarativeAction.bind(this)
+        this._popover.addEventListener("click", this.boundPopoverAction)
+
         if (this.isOpen) {
             this.show()
         }
@@ -39,13 +43,37 @@ export default class extends RegistryController {
 
     teardown() {
         this.removeTriggerEvents()
-        this.removeButtonEvents()
+
+        if (this._popover) {
+            this._popover.removeEventListener("click", this.boundPopoverAction)
+        }
 
         if (this._popover && this._popover.parentElement === document.body) {
             this.element.appendChild(this._popover)
         }
     }
 
+    // Override to also check popover that may be moved to document.body
+    handleDeclarativeAction(event) {
+        const actionElement = event.target.closest("[data-hakumi-action]")
+        if (!actionElement) return
+
+        // Check if action element is inside this component OR inside our popover
+        const isInComponent = this.element.contains(actionElement)
+        const isInPopover = this._popover && this._popover.contains(actionElement)
+
+        if (!isInComponent && !isInPopover) return
+
+        const action = actionElement.dataset.hakumiAction
+        const actionMethod = this.getActionMethod(action)
+
+        if (typeof actionMethod === "function") {
+            event.preventDefault()
+            event.stopPropagation()
+            actionMethod.call(this, event, actionElement)
+        }
+    }
+
     setupTriggerEvents() {
         if (!this.hasTriggerTarget) return
 
@@ -95,27 +123,6 @@ export default class extends RegistryController {
         if (this.onDocumentClick) document.removeEventListener("click", this.onDocumentClick)
     }
 
-    setupButtonEvents() {
-        this.handleConfirm = this.confirm.bind(this)
-        this.handleCancel = this.cancel.bind(this)
-
-        if (this.hasOkButtonTarget) {
-            this.okButtonTarget.addEventListener("click", this.handleConfirm)
-        }
-        if (this.hasCancelButtonTarget) {
-            this.cancelButtonTarget.addEventListener("click", this.handleCancel)
-        }
-    }
-
-    removeButtonEvents() {
-        if (this.hasOkButtonTarget) {
-            this.okButtonTarget.removeEventListener("click", this.handleConfirm)
-        }
-        if (this.hasCancelButtonTarget) {
-            this.cancelButtonTarget.removeEventListener("click", this.handleCancel)
-        }
-    }
-
     toggle() {
         this.isOpen ? this.hide() : this.show()
     }
@@ -152,7 +159,7 @@ export default class extends RegistryController {
             }
         }, 300)
 
-        this.dispatch("hidden", { prefix: "hakumi-popconfirm" })
+        this.dispatch("hidden")
     }
 
     open() { this.show() }
@@ -164,7 +171,6 @@ export default class extends RegistryController {
         const detail = { api: this.element.hakumiComponent.api, promise: null }
         const confirmEvent = this.dispatch("confirm", {
             cancelable: true,
-            prefix: "hakumi-popconfirm",
             detail
         })
 
@@ -177,7 +183,7 @@ export default class extends RegistryController {
                 this.hide()
             } catch (error) {
                 console.error("[HakumiComponents] Popconfirm async error:", error)
-                this.dispatch("confirm-error", { detail: { error }, prefix: "hakumi-popconfirm" })
+                this.dispatch("confirmError", { detail: { error } })
             } finally {
                 this.setLoading(false)
             }
@@ -188,7 +194,7 @@ export default class extends RegistryController {
 
     cancel(e) {
         if (e) e.stopPropagation()
-        this.dispatch("cancel", { prefix: "hakumi-popconfirm" })
+        this.dispatch("cancel")
         this.hide()
     }
 

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

@@ -34,8 +34,6 @@ export default class extends RegistryController {
             singleton: false,
             api
         }
-
-        this.#exposeApi(api)
     }
 
     setup() {
@@ -60,11 +58,6 @@ export default class extends RegistryController {
         }
     }
 
-    disconnect() {
-        delete this.element.hakumiPopover
-        super.disconnect()
-    }
-
     setupTriggerEvents() {
         if (!this.hasTriggerTarget) return
 
@@ -163,8 +156,7 @@ export default class extends RegistryController {
 
         this.isOpen = false
         this.updateVisibility()
-        this.dispatch("hidden", { prefix: "hakumi-popover" })
-        this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+        this.dispatch("hidden")
     }
 
     open() {
@@ -175,8 +167,7 @@ export default class extends RegistryController {
     close() {
         this.isOpen = false
         this.updateVisibility()
-        this.dispatch("hidden", { prefix: "hakumi-popover" })
-        this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+        this.dispatch("hidden")
     }
 
     toggle() {
@@ -423,18 +414,6 @@ export default class extends RegistryController {
         return this.hasOpenValue && this.openValue !== undefined
     }
 
-    #exposeApi(api) {
-        this.element.hakumiPopover = {
-            open: () => api.open(),
-            close: () => api.close(),
-            toggle: () => api.toggle(),
-            isOpen: () => api.isOpen(),
-            getState: () => api.getState(),
-            setPlacement: (placement) => api.setPlacement(placement),
-            setOpen: (value) => api.setOpen(value)
-        }
-    }
-
     #bindOutsideListeners() {
         if (this.boundOutsideHandlers || !this.triggerModes.includes("click")) return
 

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

@@ -44,8 +44,6 @@ export default class extends RegistryController {
       singleton: false,
       api
     }
-
-    this.#exposeApi(api)
   }
 
   setup() {
@@ -56,7 +54,6 @@ export default class extends RegistryController {
 
   disconnect() {
     this.#unwatchThemeChanges()
-    delete this.element.hakumiQrCode
     super.disconnect()
   }
 
@@ -278,23 +275,6 @@ export default class extends RegistryController {
     return computed || fallback
   }
 
-  #exposeApi(api) {
-    this.element.hakumiQrCode = {
-      getValue: () => api.getValue(),
-      setValue: (value) => api.setValue(value),
-      getSize: () => api.getSize(),
-      setSize: (size) => api.setSize(size),
-      getType: () => api.getType(),
-      setType: (type) => api.setType(type),
-      setColors: (options) => api.setColors(options),
-      setErrorLevel: (level) => api.setErrorLevel(level),
-      getDataUrl: () => api.getDataUrl(),
-      download: (filename) => api.download(filename),
-      rerender: () => api.rerender(),
-      getState: () => api.getState()
-    }
-  }
-
   #applySizeStyle() {
     if (!this.sizeValue) return
     const value = Math.max(1, Number(this.sizeValue))

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

@@ -44,7 +44,6 @@ export default class extends RegistryController {
 
   disconnect() {
     this._destroyResizeObserver()
-    delete this.element.hakumiSegmented
     super.disconnect()
   }
 
@@ -84,7 +83,6 @@ export default class extends RegistryController {
   }
 
   #exposeApi(api) {
-    this.element.hakumiSegmented = api
   }
 
   #updateSelection() {

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

@@ -28,13 +28,6 @@ export default class extends RegistryController {
         setTip: (value) => this.setTip(value)
       }
     }
-
-    this.#exposeApi()
-  }
-
-  disconnect() {
-    delete this.element.hakumiSpin
-    super.disconnect()
   }
 
   spinningValueChanged() {
@@ -99,7 +92,7 @@ export default class extends RegistryController {
     this.element.setAttribute("aria-busy", this.spinningValue ? "true" : "false")
 
     if (this.visibleSpinning && !value && !silent) {
-      this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+      this.dispatch("hidden")
     }
 
     this.visibleSpinning = value
@@ -116,15 +109,4 @@ export default class extends RegistryController {
 
     this.progressElement.setAttribute("aria-valuenow", String(value))
   }
-
-  #exposeApi() {
-    this.element.hakumiSpin = {
-      show: () => this.show(),
-      hide: () => this.hide(),
-      toggle: () => this.toggle(),
-      isSpinning: () => this.spinningValue,
-      setPercent: (value) => this.setPercent(value),
-      setTip: (value) => this.setTip(value)
-    }
-  }
 }

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

@@ -60,7 +60,6 @@ export default class extends RegistryController {
 
   disconnect() {
     this.pause()
-    delete this.element.hakumiStatistic
     super.disconnect()
   }
 
@@ -244,6 +243,5 @@ export default class extends RegistryController {
   }
 
   #exposeApi(api) {
-    this.element.hakumiStatistic = api
   }
 }

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

@@ -109,7 +109,6 @@ export default class extends RegistryController {
       this._columnSortable = null
     }
 
-    delete this.element.hakumiTable
     super.disconnect()
   }
 
@@ -229,7 +228,8 @@ export default class extends RegistryController {
   }
 
   setSelectedRowKeys(keys) {
-    this._selectedRowKeys = new Set(Array(keys).map(String))
+    const keysArray = Array.isArray(keys) ? keys : [keys]
+    this._selectedRowKeys = new Set(keysArray.map(String))
     this.#syncSelection()
     this.#dispatchSelectionChange()
   }
@@ -298,7 +298,7 @@ export default class extends RegistryController {
   }
 
   setFilters(filters = {}) {
-    this._filters = new Map(Object.entries(filters).map(([key, values]) => [key, Array(values)]))
+    this._filters = new Map(Object.entries(filters).map(([key, values]) => [key, Array.isArray(values) ? values : [values]]))
     this.#syncFilterInputs()
     this.#applyFiltersToRows()
   }
@@ -308,7 +308,8 @@ export default class extends RegistryController {
   }
 
   setExpandedRowKeys(keys) {
-    this._expandedRowKeys = new Set(Array(keys).map(String))
+    const keysArray = Array.isArray(keys) ? keys : [keys]
+    this._expandedRowKeys = new Set(keysArray.map(String))
     this.#syncExpandedRows()
   }
 
@@ -676,35 +677,24 @@ export default class extends RegistryController {
       })
     })
 
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:table:row-editing", {
-        bubbles: true,
-        detail: { rowKey, save: saveRow, cancel: cancelRow }
-      })
-    )
+    this.dispatch("rowEditing", {
+      detail: { rowKey, save: saveRow, cancel: cancelRow }
+    })
   }
 
   #dispatchEdit(detail) {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:table:edit", {
-        bubbles: true,
-        detail
-      })
-    )
+    this.dispatch("edit", { detail })
   }
 
   #dispatchRowEdit(detail) {
     const params = this.#changesToParams(detail.changes)
-    
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:table:row-edit", {
-        bubbles: true,
-        detail: {
-          ...detail,
-          params
-        }
-      })
-    )
+
+    this.dispatch("rowEdit", {
+      detail: {
+        ...detail,
+        params
+      }
+    })
   }
 
   #changesToParams(changes) {
@@ -735,15 +725,12 @@ export default class extends RegistryController {
       if (result === false) return false
 
       if (typeof result === "string") {
-        this.element.dispatchEvent(
-          new CustomEvent("hakumi:table:cell-update-prevented", {
-            bubbles: true,
-            detail: {
-              ...detail,
-              reason: result
-            }
-          })
-        )
+        this.dispatch("cellUpdatePrevented", {
+          detail: {
+            ...detail,
+            reason: result
+          }
+        })
         return false
       }
 
@@ -773,7 +760,6 @@ export default class extends RegistryController {
   }
 
   #exposeApi(api) {
-    this.element.hakumiTable = api
   }
 
   #isServerSide() {
@@ -1059,25 +1045,19 @@ export default class extends RegistryController {
   }
 
   #dispatchSelectionChange() {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:table:selection-change", {
-        bubbles: true,
-        detail: { selectedRowKeys: this.getSelectedRowKeys() }
-      })
-    )
+    this.dispatch("selectionChange", {
+      detail: { selectedRowKeys: this.getSelectedRowKeys() }
+    })
   }
 
   #dispatchChange() {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:table:change", {
-        bubbles: true,
-        detail: {
-          selectedRowKeys: this.getSelectedRowKeys(),
-          sorter: this._sorter,
-          filters: this.getFilters()
-        }
-      })
-    )
+    this.dispatch("change", {
+      detail: {
+        selectedRowKeys: this.getSelectedRowKeys(),
+        sorter: this._sorter,
+        filters: this.getFilters()
+      }
+    })
   }
 
   #parseJson(value, fallback) {
@@ -1168,31 +1148,25 @@ export default class extends RegistryController {
   }
 
   #dispatchRowReorder(oldIndex, newIndex, rowKey) {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi--table:rowReorder", {
-        bubbles: true,
-        detail: {
-          oldIndex,
-          newIndex,
-          rowKey,
-          order: this.getRowOrder()
-        }
-      })
-    )
+    this.dispatch("rowReorder", {
+      detail: {
+        oldIndex,
+        newIndex,
+        rowKey,
+        order: this.getRowOrder()
+      }
+    })
   }
 
   #dispatchColumnReorder(oldIndex, newIndex, columnKey) {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi--table:columnReorder", {
-        bubbles: true,
-        detail: {
-          oldIndex,
-          newIndex,
-          columnKey,
-          order: this.getColumnOrder()
-        }
-      })
-    )
+    this.dispatch("columnReorder", {
+      detail: {
+        oldIndex,
+        newIndex,
+        columnKey,
+        order: this.getColumnOrder()
+      }
+    })
   }
 
 }

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

@@ -7,16 +7,27 @@ export default class extends Controller {
   }
 
   connect() {
-    this.#exposeApi()
-    
+    this.element.hakumiComponent = {
+      name: "tag",
+      version: 1,
+      singleton: false,
+      api: {
+        close: () => this.close(),
+        toggle: () => this.toggle(),
+        check: () => this.check(),
+        uncheck: () => this.uncheck(),
+        isChecked: () => this.isChecked()
+      }
+    }
+
     if (this.checkableValue) {
       this.element.addEventListener("click", this.#handleClick)
     }
   }
 
   disconnect() {
-    delete this.element.hakumiTag
-    
+    delete this.element.hakumiComponent
+
     if (this.checkableValue) {
       this.element.removeEventListener("click", this.#handleClick)
     }
@@ -90,14 +101,4 @@ export default class extends Controller {
   #updateCheckedState() {
     this.element.classList.toggle("hakumi-tag-checkable-checked", this.checkedValue)
   }
-
-  #exposeApi() {
-    this.element.hakumiTag = {
-      close: () => this.close(),
-      toggle: () => this.toggle(),
-      check: () => this.check(),
-      uncheck: () => this.uncheck(),
-      isChecked: () => this.isChecked()
-    }
-  }
 }

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

@@ -9,17 +9,28 @@ export default class extends Controller {
 
   connect() {
     this._sortable = null
-    
+
     if (this.sortableValue) {
       this.#setupSortable()
     }
 
-    this.#exposeApi()
+    this.element.hakumiComponent = {
+      name: "tag_group",
+      version: 1,
+      singleton: false,
+      api: {
+        enableSorting: () => this.enableSorting(),
+        disableSorting: () => this.disableSorting(),
+        isSortingEnabled: () => this.isSortingEnabled(),
+        getTags: () => this.getTags(),
+        getTagValues: () => this.getTagValues()
+      }
+    }
   }
 
   disconnect() {
     this.#destroySortable()
-    delete this.element.hakumiTagGroup
+    delete this.element.hakumiComponent
   }
 
   sortableValueChanged() {
@@ -81,14 +92,4 @@ export default class extends Controller {
       this._sortable = null
     }
   }
-
-  #exposeApi() {
-    this.element.hakumiTagGroup = {
-      enableSorting: () => this.enableSorting(),
-      disableSorting: () => this.disableSorting(),
-      isSortingEnabled: () => this.isSortingEnabled(),
-      getTags: () => this.getTags(),
-      getTagValues: () => this.getTagValues()
-    }
-  }
 }

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

@@ -20,7 +20,21 @@ export default class extends RegistryController {
 
         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")
             }
@@ -34,7 +48,16 @@ export default class extends RegistryController {
             })
         }
 
-        this.setTheme(this.detectInitialTheme())
+        // 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() {

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

@@ -270,8 +270,7 @@ export default class extends RegistryController {
     }
 
     dispatchChange(value, parts) {
-        this.element.dispatchEvent(new CustomEvent("hakumi:time-picker:change", {
-            bubbles: true,
+        this.dispatch("change", {
             detail: {
                 value,
                 hour: parts.hour,
@@ -279,13 +278,10 @@ export default class extends RegistryController {
                 second: parts.second,
                 period: parts.period
             }
-        }))
+        })
     }
 
     dispatchOpenChange(open) {
-        this.element.dispatchEvent(new CustomEvent("hakumi:time-picker:open-change", {
-            bubbles: true,
-            detail: { open }
-        }))
+        this.dispatch("openChange", { detail: { open } })
     }
 }

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

@@ -22,13 +22,6 @@ export default class extends RegistryController {
         toggleReverse: () => this.toggleReverse()
       }
     }
-
-    this.#exposeApi()
-  }
-
-  disconnect() {
-    delete this.element.hakumiTimeline
-    super.disconnect()
   }
 
   setReverse(value) {
@@ -76,13 +69,4 @@ export default class extends RegistryController {
 
     ordered.forEach((item) => this.itemsContainer.appendChild(item))
   }
-
-  #exposeApi() {
-    this.element.hakumiTimeline = {
-      getItems: () => this.getItems(),
-      getReverse: () => this.reverseValue,
-      setReverse: (value) => this.setReverse(value),
-      toggleReverse: () => this.toggleReverse()
-    }
-  }
 }