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

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

@@ -34,8 +34,8 @@ export default class extends RegistryController {
   updateState() {
     if (!this.hasActionsTarget) return
 
-    this.actionsTarget.classList.toggle("open", this.open)
-    this.element.classList.toggle("open", this.open)
+    this.actionsTarget.classList.toggle("hakumi-float-button-group-actions-open", this.open)
+    this.element.classList.toggle("hakumi-float-button-group-open", this.open)
   }
 
   openGroup() {

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

@@ -8,7 +8,9 @@ export default class extends RegistryController {
         duration: Number,
         maxCount: Number,
         top: Number,
-        payload: String
+        payload: String,
+        // i18n
+        closeLabel: { type: String, default: "Close" }
     }
 
     setup() {
@@ -161,7 +163,7 @@ export default class extends RegistryController {
             const closeButton = document.createElement("button")
             closeButton.type = "button"
             closeButton.className = "hakumi-message-close"
-            closeButton.setAttribute("aria-label", "Close")
+            closeButton.setAttribute("aria-label", this.closeLabelValue)
             closeButton.innerHTML = this.#closeIconMarkup()
             closeButton.addEventListener("click", () => this.close(key))
             content.appendChild(closeButton)

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

@@ -2,150 +2,144 @@ import RegistryController from "../base/registry_controller.js"
 import { ensureOverlayContainer } from "../../core/overlay_container.js"
 
 export default class extends RegistryController {
-    static declarativeActions = ["close", "confirm", "cancel"]
-    static targets = ["mask", "wrapper"]
-    static values = {
-        open: Boolean,
-        maskClosable: { type: Boolean, default: true },
-        keyboard: { type: Boolean, default: true },
-        confirmLoading: Boolean
+  static declarativeActions = ["close", "confirm", "cancel"]
+  static targets = ["mask", "wrapper"]
+  static values = {
+    open: Boolean,
+    maskClosable: { type: Boolean, default: true },
+    keyboard: { type: Boolean, default: true },
+    confirmLoading: Boolean
+  }
+
+  setup() {
+    const overlayContainer = ensureOverlayContainer()
+    if (overlayContainer && this.element.parentElement !== overlayContainer) {
+      overlayContainer.appendChild(this.element)
     }
 
-
-    setup() {
-        const overlayContainer = ensureOverlayContainer()
-        if (overlayContainer && this.element.parentElement !== overlayContainer) {
-            overlayContainer.appendChild(this.element)
-        }
-
-        if (!this.openValue) this.element.style.display = "none"
-
-        this.handleOpenChange()
+    if (!this.openValue) this.element.style.display = "none"
+
+    this.handleOpenChange()
+  }
+
+  teardown() {
+    if (this.animationTimeout) clearTimeout(this.animationTimeout)
+  }
+
+  registerApi() {
+    const api = {
+      open: () => this.open(),
+      close: () => this.close(),
+      toggle: () => this.toggle(),
+      isOpen: () => this.openValue,
+      getState: () => ({
+        open: this.openValue,
+        maskClosable: this.maskClosableValue,
+        keyboard: this.keyboardValue,
+        confirmLoading: this.confirmLoadingValue
+      })
     }
 
-    teardown() {
-        if (this.animationTimeout) clearTimeout(this.animationTimeout)
+    this.element.hakumiComponent = {
+      name: "modal",
+      version: 1,
+      singleton: false,
+      api,
+      destroy: () => api.close()
     }
+  }
 
-    registerApi() {
-        const api = {
-            open: () => this.open(),
-            close: () => this.close(),
-            toggle: () => this.toggle(),
-            isOpen: () => this.openValue,
-            getState: () => ({
-                open: this.openValue,
-                maskClosable: this.maskClosableValue,
-                keyboard: this.keyboardValue,
-                confirmLoading: this.confirmLoadingValue
-            })
-        }
-
-        this.element.hakumiComponent = {
-            name: "modal",
-            version: 1,
-            singleton: false,
-            api,
-            destroy: () => api.close()
-        }
-    }
+  open() {
+    this.openValue = true
+  }
 
-    open() {
-        this.openValue = true
+  toggle() {
+    if (this.openValue) {
+      this.close()
+    } else {
+      this.open()
     }
-
-    toggle() {
-        if (this.openValue) {
-            this.close()
-        } else {
-            this.open()
+  }
+
+  openValueChanged() {
+    this.handleOpenChange()
+  }
+
+  handleOpenChange() {
+    const modal = this.element.querySelector(".hakumi-modal")
+    const mask = this.maskTarget
+
+    if (this.openValue) {
+      this.element.style.display = "block"
+      document.body.style.overflow = "hidden"
+      document.body.style.userSelect = "none"
+      document.body.style.webkitUserSelect = "none"
+
+      requestAnimationFrame(() => {
+        if (mask) {
+          mask.classList.remove("hakumi-fade-leave", "hakumi-fade-leave-active")
+          mask.classList.add("hakumi-fade-enter", "hakumi-fade-enter-active")
         }
-    }
-
-    openValueChanged() {
-        this.handleOpenChange()
-    }
-
-    handleOpenChange() {
-        const modal = this.element.querySelector('.hakumi-modal')
-        const mask = this.maskTarget
-
-        if (this.openValue) {
-            this.element.style.display = "block"
-            document.body.style.overflow = "hidden"
-            document.body.style.userSelect = "none"
-            document.body.style.webkitUserSelect = "none"
-
 
-            requestAnimationFrame(() => {
-
-                if (mask) {
-                    mask.classList.remove("fade-leave", "fade-leave-active")
-                    mask.classList.add("fade-enter", "fade-enter-active")
-                }
-
-
-                if (modal) {
-                    modal.classList.remove("hakumi-zoom-leave", "hakumi-zoom-leave-active")
-                    modal.classList.add("hakumi-zoom-enter", "hakumi-zoom-enter-active")
-                }
-            })
-        } else {
-
-            if (mask) {
-                mask.classList.remove("fade-enter", "fade-enter-active")
-                mask.classList.add("fade-leave", "fade-leave-active")
-            }
-
-            if (modal) {
-                modal.classList.remove("hakumi-zoom-enter", "hakumi-zoom-enter-active")
-                modal.classList.add("hakumi-zoom-leave", "hakumi-zoom-leave-active")
-            }
-
-
-            this.animationTimeout = setTimeout(() => {
-                if (!this.openValue) {
-                    this.element.style.display = "none"
-                    document.body.style.overflow = ""
-                    document.body.style.userSelect = ""
-                    document.body.style.webkitUserSelect = ""
-
-                    this.dispatch("hidden")
-                }
-                this.animationTimeout = null
-            }, 300)
+        if (modal) {
+          modal.classList.remove("hakumi-zoom-leave", "hakumi-zoom-leave-active")
+          modal.classList.add("hakumi-zoom-enter", "hakumi-zoom-enter-active")
         }
+      })
+    } else {
+      if (mask) {
+        mask.classList.remove("hakumi-fade-enter", "hakumi-fade-enter-active")
+        mask.classList.add("hakumi-fade-leave", "hakumi-fade-leave-active")
+      }
+
+      if (modal) {
+        modal.classList.remove("hakumi-zoom-enter", "hakumi-zoom-enter-active")
+        modal.classList.add("hakumi-zoom-leave", "hakumi-zoom-leave-active")
+      }
+
+      this.animationTimeout = setTimeout(() => {
+        if (!this.openValue) {
+          this.element.style.display = "none"
+          document.body.style.overflow = ""
+          document.body.style.userSelect = ""
+          document.body.style.webkitUserSelect = ""
+
+          this.dispatch("hidden")
+        }
+        this.animationTimeout = null
+      }, 300)
     }
+  }
 
-    close() {
-        this.openValue = false
-        this.dispatch("cancel")
-    }
+  close() {
+    this.openValue = false
+    this.dispatch("cancel")
+  }
 
-    handleMaskClick(_event) {
-        if (this.maskClosableValue) {
-            this.close()
-        }
+  handleMaskClick(_event) {
+    if (this.maskClosableValue) {
+      this.close()
     }
+  }
 
-    handleWrapperClick(event) {
-        if (event.target === this.wrapperTarget && this.maskClosableValue) {
-            this.close()
-        }
+  handleWrapperClick(event) {
+    if (event.target === this.wrapperTarget && this.maskClosableValue) {
+      this.close()
     }
+  }
 
-    handleKeydown(event) {
-        if (this.keyboardValue && event.key === "Escape") {
-            this.close()
-        }
+  handleKeydown(event) {
+    if (this.keyboardValue && event.key === "Escape") {
+      this.close()
     }
+  }
 
-    // Declarative action handlers (override base class)
-    handleConfirm(_event) {
-        this.dispatch("ok")
-    }
+  // Declarative action handlers (override base class)
+  handleConfirm(_event) {
+    this.dispatch("ok")
+  }
 
-    handleCancel(_event) {
-        this.close()
-    }
+  handleCancel(_event) {
+    this.close()
+  }
 }

package/app/javascript/hakumi_components/controllers/hakumi/table/editable.js

@@ -0,0 +1,291 @@
+export default class TableEditable {
+  constructor(controller) {
+    this.controller = controller
+    this._shouldCellUpdateHooks = new Map()
+  }
+
+  editCell(event) {
+    const cell = event.currentTarget
+    if (cell.querySelector(".hakumi-table-cell-editor")) return
+
+    const tableConfig = this.controller.editableConfigValue || {}
+    const mode = tableConfig.mode || "cell"
+
+    if (mode === "row") {
+      this.#editRow(cell)
+    } else {
+      this.#editSingleCell(cell)
+    }
+  }
+
+  registerShouldCellUpdate(name, fn) {
+    if (typeof fn !== "function") {
+      console.warn(`[Hakumi Table] registerShouldCellUpdate: "${name}" must be a function`)
+      return
+    }
+    this._shouldCellUpdateHooks.set(name, fn)
+  }
+
+  unregisterShouldCellUpdate(name) {
+    this._shouldCellUpdateHooks.delete(name)
+  }
+
+  #editSingleCell(cell) {
+    const { input, editor, originalContent, originalValue, config } = this.#createCellEditor(cell)
+    input.focus()
+
+    const save = () => {
+      if (!editor.isConnected) return
+
+      const detail = this.#buildEditDetail({ cell, input, originalValue, config })
+
+      if (!this.#shouldUpdateCell(cell, detail)) {
+        this.#cancelCellEditor({ cell, editor, originalContent })
+        return
+      }
+
+      this.#applyCellEditChange({ cell, editor, originalContent, newValue: detail.value })
+      this.#dispatchEdit(detail)
+    }
+
+    const cancel = () => {
+      if (!editor.isConnected) return
+      this.#cancelCellEditor({ cell, editor, originalContent })
+    }
+
+    input.addEventListener("blur", save)
+
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault()
+        input.blur()
+      } else if (e.key === "Escape") {
+        e.preventDefault()
+        input.removeEventListener("blur", save)
+        cancel()
+      }
+    })
+  }
+
+  #editRow(clickedCell) {
+    const row = clickedCell.closest("tr")
+    if (!row || row.classList.contains("hakumi-table-row-editing")) return
+
+    row.classList.add("hakumi-table-row-editing")
+    const rowKey = row.dataset.rowKey
+    const editableCells = row.querySelectorAll("td[data-editable='true']")
+    const editors = []
+
+    editableCells.forEach((cell) => {
+      const { input, originalContent, originalValue, config } = this.#createCellEditor(cell)
+      this.#assignEditorDataset(input, { cell, originalValue, config })
+
+      editors.push({ cell, input, originalContent, originalValue, config })
+    })
+
+    const clickedInput = clickedCell.querySelector(".hakumi-table-cell-input")
+    if (clickedInput) {
+      clickedInput.focus()
+    } else if (editors.length > 0) {
+      editors[0].input.focus()
+    }
+
+    const saveRow = () => {
+      const { allValid, changes } = this.#buildRowEditChanges(editors, rowKey)
+
+      if (!allValid) {
+        cancelRow()
+        return
+      }
+
+      changes.forEach((change) => this.#applyCellEditChange(change))
+
+      row.classList.remove("hakumi-table-row-editing")
+
+      this.#dispatchRowEdit({
+        rowKey,
+        changes: changes.map(({ detail }) => detail)
+      })
+    }
+
+    const cancelRow = () => {
+      editors.forEach(({ cell, originalContent }) => {
+        this.#cancelCellEditor({ cell, originalContent })
+      })
+      row.classList.remove("hakumi-table-row-editing")
+    }
+
+    editors.forEach(({ input }) => {
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault()
+          saveRow()
+        } else if (e.key === "Escape") {
+          e.preventDefault()
+          cancelRow()
+        }
+      })
+    })
+
+    this.controller.dispatch("rowEditing", {
+      detail: { rowKey, save: saveRow, cancel: cancelRow }
+    })
+  }
+
+  #assignEditorDataset(input, { cell, originalValue, config }) {
+    input.dataset.columnKey = config.key || cell.dataset.columnKey
+    input.dataset.dataIndex = config.data_index
+    input.dataset.originalValue = originalValue
+  }
+
+  #buildEditDetail({ cell, input, originalValue, config, rowKey = null }) {
+    return {
+      rowKey: rowKey ?? cell.closest("tr")?.dataset.rowKey,
+      columnKey: config.key || cell.dataset.columnKey,
+      dataIndex: config.data_index,
+      value: input.value,
+      originalValue
+    }
+  }
+
+  #buildRowEditChanges(editors, rowKey) {
+    const changes = []
+    let allValid = true
+
+    editors.forEach(({ cell, input, originalContent, originalValue, config }) => {
+      const detail = this.#buildEditDetail({ cell, input, originalValue, config, rowKey })
+
+      if (!this.#shouldUpdateCell(cell, detail)) {
+        allValid = false
+        return
+      }
+
+      changes.push({ cell, originalContent, newValue: detail.value, detail })
+    })
+
+    return { allValid, changes }
+  }
+
+  #applyCellEditChange({ cell, editor = null, originalContent, newValue }) {
+    if (originalContent) {
+      originalContent.textContent = newValue
+      originalContent.style.display = ""
+    }
+    cell.dataset.value = newValue
+    this.#removeCellEditor(cell, editor)
+  }
+
+  #cancelCellEditor({ cell, editor = null, originalContent }) {
+    if (originalContent) originalContent.style.display = ""
+    this.#removeCellEditor(cell, editor)
+  }
+
+  #removeCellEditor(cell, editor = null) {
+    const editorElement = editor || cell.querySelector(".hakumi-table-cell-editor")
+    editorElement?.remove()
+  }
+
+  #dispatchEdit(detail) {
+    this.controller.dispatch("edit", { detail })
+  }
+
+  #dispatchRowEdit(detail) {
+    const params = this.#changesToParams(detail.changes)
+
+    this.controller.dispatch("rowEdit", {
+      detail: {
+        ...detail,
+        params
+      }
+    })
+  }
+
+  #changesToParams(changes) {
+    const params = {}
+    if (!changes || !Array.isArray(changes)) return params
+
+    changes.forEach(({ columnKey, dataIndex, value }) => {
+      const key = dataIndex || columnKey
+      if (key) {
+        params[key] = value
+      }
+    })
+    return params
+  }
+
+  #shouldUpdateCell(cell, detail) {
+    const hookName = cell?.dataset.shouldCellUpdate
+    if (!hookName) return true
+
+    const hook = this.#resolveHook(hookName)
+    if (typeof hook !== "function") {
+      console.warn(`[Hakumi Table] shouldCellUpdate hook "${hookName}" is not a function`)
+      return true
+    }
+
+    try {
+      const result = hook(detail)
+      if (result === false) return false
+
+      if (typeof result === "string") {
+        this.controller.dispatch("cellUpdatePrevented", {
+          detail: {
+            ...detail,
+            reason: result
+          }
+        })
+        return false
+      }
+
+      return true
+    } catch (error) {
+      console.error(`[Hakumi Table] shouldCellUpdate hook "${hookName}" failed`, error)
+      return true
+    }
+  }
+
+  #resolveHook(name) {
+    if (!name) return null
+
+    if (this._shouldCellUpdateHooks.has(name)) {
+      return this._shouldCellUpdateHooks.get(name)
+    }
+
+    if (typeof window === "undefined") return null
+
+    if (window.HakumiTableShouldCellUpdate && typeof window.HakumiTableShouldCellUpdate[name] === "function") {
+      return window.HakumiTableShouldCellUpdate[name]
+    }
+
+    return name.split(".").reduce((acc, key) => (acc ? acc[key] : undefined), window)
+  }
+
+  #createCellEditor(cell) {
+    const config = parseJson(cell.dataset.editableConfig, {})
+    const originalContent = cell.querySelector(".hakumi-table-cell-content")
+    const originalValue = cell.dataset.value ?? (originalContent?.textContent?.trim() || "")
+
+    const editor = document.createElement("div")
+    editor.className = "hakumi-table-cell-editor"
+
+    const input = document.createElement("input")
+    input.type = config.input_type || "text"
+    input.value = originalValue
+    input.className = "hakumi-table-cell-input"
+
+    editor.appendChild(input)
+
+    if (originalContent) originalContent.style.display = "none"
+    cell.appendChild(editor)
+
+    return { input, editor, originalContent, originalValue, config }
+  }
+}
+
+function parseJson(value, fallback) {
+  try {
+    return JSON.parse(value || "")
+  } catch {
+    return fallback
+  }
+}