hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/drawer_controller.js

@@ -0,0 +1,126 @@
+import RegistryController from "../base/registry_controller.js"
+import { ensureOverlayContainer } from "../../index.js"
+
+export default class extends RegistryController {
+    static targets = ["mask", "wrapper", "body"]
+    static values = {
+        open: Boolean,
+        placement: String,
+        maskClosable: { type: Boolean, default: true },
+        keyboard: { type: Boolean, default: true },
+        destroyOnClose: { type: Boolean, default: false }
+    }
+
+    setup() {
+
+
+        const overlayContainer = ensureOverlayContainer()
+        if (overlayContainer && this.element.parentElement !== overlayContainer) {
+            overlayContainer.appendChild(this.element)
+        }
+
+        this.boundKeydown = this.handleKeydown.bind(this)
+        document.addEventListener("keydown", this.boundKeydown)
+
+        if (!this.openValue) {
+            this.element.style.display = "none"
+            this.element.classList.remove("hakumi-drawer-open")
+            this.element.setAttribute("aria-hidden", "true")
+        }
+
+        this.handleOpenChange()
+    }
+
+    teardown() {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout)
+        }
+        document.removeEventListener("keydown", this.boundKeydown)
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "drawer",
+            version: 1,
+            singleton: false,
+            api: {
+                open: () => this.open(),
+                close: () => this.close(),
+                toggle: () => this.toggle(),
+                isOpen: () => this.openValue,
+                getState: () => ({
+                    open: this.openValue,
+                    placement: this.placementValue,
+                    maskClosable: this.maskClosableValue,
+                    keyboard: this.keyboardValue,
+                    destroyOnClose: this.destroyOnCloseValue
+                })
+            }
+        }
+    }
+
+    open() {
+        this.openValue = true
+    }
+
+    close() {
+        this.openValue = false
+        this.dispatch("close")
+    }
+
+    toggle() {
+        this.openValue = !this.openValue
+    }
+
+    openValueChanged() {
+        this.handleOpenChange()
+    }
+
+    handleOpenChange() {
+        if (this.openValue) {
+            if (this.closeTimeout) {
+                clearTimeout(this.closeTimeout)
+                this.closeTimeout = null
+            }
+            this.element.style.display = "block"
+            this.element.classList.add("hakumi-drawer-open")
+            this.element.removeAttribute("aria-hidden")
+
+            document.body.style.overflow = "hidden"
+            document.body.style.userSelect = "none"
+            document.body.style.webkitUserSelect = "none"
+
+            if (this.hasWrapperTarget) {
+                this.wrapperTarget.focus()
+            }
+        } else {
+            this.element.classList.remove("hakumi-drawer-open")
+
+            this.closeTimeout = setTimeout(() => {
+                if (!this.openValue) {
+                    this.element.style.display = "none"
+                    this.element.setAttribute("aria-hidden", "true")
+                    document.body.style.overflow = ""
+                    document.body.style.userSelect = ""
+                    document.body.style.webkitUserSelect = ""
+                    this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+                }
+                this.closeTimeout = null
+            }, 300)
+        }
+    }
+
+    handleMaskClick() {
+        if (this.maskClosableValue) {
+            this.close()
+        }
+    }
+
+    handleKeydown(event) {
+        if (!this.openValue) return
+
+        if (this.keyboardValue && event.key === "Escape") {
+            this.close()
+        }
+    }
+}

data/app/javascript/hakumi_components/controllers/hakumi/dropdown_controller.js

@@ -0,0 +1,103 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["trigger", "menu"]
+  static values = {
+    trigger: { type: String, default: "hover" },
+    placement: { type: String, default: "bottom-left" },
+    disabled: { type: Boolean, default: false }
+  }
+
+  
+  setup() {
+    this.boundCloseOnClickOutside = this.closeOnClickOutside.bind(this)
+    document.addEventListener("click", this.boundCloseOnClickOutside)
+
+    if (this.triggerValue === "context_menu") {
+      this.boundContextMenu = this.handleContextMenu.bind(this)
+      this.triggerTarget.addEventListener("contextmenu", this.boundContextMenu)
+    }
+  }
+
+  
+  teardown() {
+    document.removeEventListener("click", this.boundCloseOnClickOutside)
+
+    if (this.boundContextMenu) {
+      this.triggerTarget.removeEventListener("contextmenu", this.boundContextMenu)
+      this.boundContextMenu = null
+    }
+
+    this.boundCloseOnClickOutside = null
+  }
+
+  
+  registerApi() {
+    const api = {
+      open: () => this.open(),
+      close: () => this.close(),
+      toggle: (event) => this.toggle(event || new Event("click")),
+      isOpen: () => this.isOpen(),
+      getState: () => ({
+        open: this.isOpen(),
+        disabled: this.disabledValue,
+        trigger: this.triggerValue,
+        placement: this.placementValue
+      })
+    }
+
+    this.element.hakumiComponent = {
+      name: "dropdown",
+      version: 1,
+      singleton: false,
+      api
+    }
+  }
+
+  isOpen() {
+    return this.menuTarget.classList.contains("hakumi-dropdown-open")
+  }
+
+  show(event) {
+    if (this.disabledValue) return
+    this.menuTarget.classList.add("hakumi-dropdown-open")
+  }
+
+  hide(event) {
+    if (this.disabledValue) return
+
+
+    setTimeout(() => {
+      if (!this.element.matches(":hover")) {
+        this.menuTarget.classList.remove("hakumi-dropdown-open")
+      }
+    }, 100)
+  }
+
+  toggle(event) {
+    if (this.disabledValue) return
+    if (event) event.stopPropagation()
+    this.menuTarget.classList.toggle("hakumi-dropdown-open")
+  }
+
+  handleContextMenu(event) {
+    if (this.disabledValue) return
+    event.preventDefault()
+    this.menuTarget.classList.add("hakumi-dropdown-open")
+  }
+
+  closeOnClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.menuTarget.classList.remove("hakumi-dropdown-open")
+    }
+  }
+
+  open() {
+    if (this.disabledValue) return
+    this.menuTarget.classList.add("hakumi-dropdown-open")
+  }
+
+  close() {
+    this.menuTarget.classList.remove("hakumi-dropdown-open")
+  }
+}

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

@@ -0,0 +1,52 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["actions"]
+  static values = {
+    defaultOpen: Boolean
+  }
+
+  setup() {
+    this.open = this.defaultOpenValue
+    this.updateState()
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "float_button_group",
+      version: 1,
+      singleton: false,
+      api: {
+        open: () => this.openGroup(),
+        close: () => this.closeGroup(),
+        toggle: (event) => this.toggle(event || new Event("click")),
+        isOpen: () => this.open
+      }
+    }
+  }
+
+  toggle(event) {
+    if (event) event.preventDefault()
+    this.open = !this.open
+    this.updateState()
+  }
+
+  updateState() {
+    if (!this.hasActionsTarget) return
+
+    this.actionsTarget.classList.toggle("open", this.open)
+    this.element.classList.toggle("open", this.open)
+  }
+
+  openGroup() {
+    if (this.open) return
+    this.open = true
+    this.updateState()
+  }
+
+  closeGroup() {
+    if (!this.open) return
+    this.open = false
+    this.updateState()
+  }
+}

data/app/javascript/hakumi_components/controllers/hakumi/form_item_controller.js

@@ -0,0 +1,348 @@
+import RegistryController from "../base/registry_controller.js"
+import { validationManager } from "../../../lib/validation_manager.js"
+
+
+
+export default class extends RegistryController {
+    static values = {
+        dependencies: Array,
+        fieldName: String,
+        rules: Array
+    }
+
+    setup() {
+        console.log('[FormItemController] Setup', {
+            fieldName: this.fieldNameValue,
+            dependencies: this.dependenciesValue,
+            rules: this.rulesValue
+        })
+
+        this.hasInteracted = false
+
+        this.setupListeners()
+        this.setupFormSubmitValidation()
+    }
+
+    teardown() {
+        this.removeListeners()
+        this.removeFormSubmitValidation()
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "form_item",
+            version: 1,
+            singleton: false,
+            api: {
+                validate: () => this.validate(),
+                clearError: () => this.clearError(),
+                reset: () => this.resetValidation(),
+                getState: () => ({
+                    hasError: this.element.classList.contains('hakumi-form-item-has-error'),
+                    hasInteracted: this.hasInteracted
+                })
+            }
+        }
+    }
+
+    setupFormSubmitValidation() {
+        const form = this.element.closest('form')
+        if (!form) return
+
+        this.boundSubmitHandler = this.handleFormSubmit.bind(this)
+        form.addEventListener('submit', this.boundSubmitHandler)
+    }
+
+    removeFormSubmitValidation() {
+        const form = this.element.closest('form')
+        if (!form || !this.boundSubmitHandler) return
+
+        form.removeEventListener('submit', this.boundSubmitHandler)
+    }
+
+    handleFormSubmit(event) {
+
+        this.hasInteracted = true
+
+
+        const currentField = this.element.querySelector('input, textarea')
+        if (!currentField) return
+
+        const value = currentField.value
+
+        if (this.hasRulesValue && this.rulesValue.length > 0) {
+            const formData = this.collectFormData()
+            const result = validationManager.validate(value, this.rulesValue, formData)
+
+            if (!result.valid) {
+                event.preventDefault()
+                this.showError(result.errors[0])
+                console.log('[FormItemController] Form submission prevented due to validation error')
+            }
+        }
+    }
+
+    setupListeners() {
+        this.boundValidate = this.validate.bind(this)
+
+
+        if (this.hasRulesValue && this.rulesValue.length > 0) {
+            const currentField = this.element.querySelector('input, textarea')
+            if (currentField) {
+                currentField.addEventListener('input', this.boundValidate)
+                currentField.addEventListener('blur', this.boundValidate)
+                console.log('[FormItemController] Attached validation listeners to current field')
+            }
+        }
+
+
+        let dependencies = []
+
+
+        if (this.hasDependenciesValue) {
+            dependencies.push(...this.dependenciesValue)
+        }
+
+
+        if (this.hasRulesValue) {
+            this.rulesValue.forEach(rule => {
+                if (rule.match) {
+                    dependencies.push(rule.match)
+                }
+
+                if (rule.dependent && rule.dependent.field) {
+                    dependencies.push(rule.dependent.field)
+                }
+            })
+        }
+
+
+        dependencies = [...new Set(dependencies)]
+
+        if (dependencies.length === 0) {
+            return
+        }
+
+        console.log('[FormItemController] Setting up dependency listeners for:', dependencies)
+
+        this.dependencyFields = []
+
+
+        const currentField = this.element.querySelector('input, textarea')
+        if (currentField) {
+            currentField.addEventListener('input', this.boundValidate)
+            currentField.addEventListener('change', this.boundValidate)
+            console.log('[FormItemController] Attached listeners to current field')
+        }
+
+
+        dependencies.forEach(depFieldName => {
+            const depField = this.findField(depFieldName)
+            console.log('[FormItemController] Looking for field:', depFieldName, 'Found:', depField)
+            if (depField) {
+                this.dependencyFields.push(depField)
+                depField.addEventListener('input', this.boundValidate)
+                depField.addEventListener('change', this.boundValidate)
+                console.log('[FormItemController] Attached listeners to:', depFieldName)
+            } else {
+                console.warn('[FormItemController] Could not find dependency field:', depFieldName)
+            }
+        })
+    }
+
+    removeListeners() {
+        if (!this.boundValidate) return
+
+
+        const currentField = this.element.querySelector('input, textarea')
+        if (currentField) {
+            currentField.removeEventListener('input', this.boundValidate)
+            currentField.removeEventListener('blur', this.boundValidate)
+            currentField.removeEventListener('change', this.boundValidate)
+        }
+
+
+        if (!this.dependencyFields) return
+
+        this.dependencyFields.forEach(field => {
+            field.removeEventListener('input', this.boundValidate)
+            field.removeEventListener('change', this.boundValidate)
+        })
+    }
+
+    findField(fieldName) {
+
+        const form = this.element.closest('form')
+        if (!form) return null
+
+
+        let field = form.querySelector(`[name="${fieldName}"]`)
+        if (field) return field
+
+
+        field = form.querySelector(`#${fieldName}`)
+        if (field) return field
+
+
+        field = form.querySelector(`[name*="[${fieldName}]"]`)
+        if (field) return field
+
+
+        field = form.querySelector(`[name$="${fieldName}"]`)
+        return field
+    }
+
+    validate() {
+        console.log('[FormItemController] validate() called, hasInteracted:', this.hasInteracted)
+
+
+        if (!this.hasInteracted) {
+            this.hasInteracted = true
+        }
+
+        const currentField = this.element.querySelector('input, textarea')
+        if (!currentField) {
+            console.warn('[FormItemController] No input/textarea found in element')
+            return
+        }
+        console.log('[FormItemController] Current field:', currentField)
+
+        const value = currentField.value
+
+
+        if (this.hasRulesValue && this.rulesValue.length > 0) {
+            console.log('[FormItemController] Running rule-based validation')
+            this.validateWithRules(value)
+        }
+    }
+
+    validateWithRules(value) {
+
+        const formData = this.collectFormData()
+
+
+        const result = validationManager.validate(value, this.rulesValue, formData)
+
+        console.log('[FormItemController] Validation result:', result)
+
+        if (!result.valid) {
+
+            this.showError(result.errors[0])
+        } else {
+            this.clearError()
+        }
+    }
+
+    collectFormData() {
+        const form = this.element.closest('form')
+        if (!form) return {}
+
+        const formData = {}
+        const inputs = form.querySelectorAll('input, textarea, select')
+
+        inputs.forEach(input => {
+            if (input.name) {
+
+                const match = input.name.match(/\[([^\]]+)\]$/)
+                const fieldName = match ? match[1] : input.name
+                formData[fieldName] = input.value
+            }
+        })
+
+        return formData
+    }
+
+    showError(message) {
+
+        this.element.classList.add('hakumi-form-item-has-error')
+
+
+        let errorContainer = this.element.querySelector('.hakumi-form-item-explain')
+        if (!errorContainer) {
+            const controlDiv = this.element.querySelector('.hakumi-form-item-control')
+            if (controlDiv) {
+                errorContainer = document.createElement('div')
+                errorContainer.className = 'hakumi-form-item-explain'
+                controlDiv.appendChild(errorContainer)
+            }
+        }
+
+        if (errorContainer) {
+            let errorElement = errorContainer.querySelector('.hakumi-form-item-explain-error')
+            if (!errorElement) {
+                errorElement = document.createElement('div')
+                errorElement.className = 'hakumi-form-item-explain-error'
+                errorElement.setAttribute('role', 'alert')
+                errorContainer.innerHTML = ''
+                errorContainer.appendChild(errorElement)
+            }
+            errorElement.textContent = message
+        }
+
+
+        const input = this.element.querySelector('input, textarea')
+        if (input) {
+            input.setAttribute('aria-invalid', 'true')
+        }
+
+
+        this.updateSubmitButton(true)
+    }
+
+    clearError() {
+
+        this.element.classList.remove('hakumi-form-item-has-error')
+
+
+        const errorContainer = this.element.querySelector('.hakumi-form-item-explain')
+        if (errorContainer) {
+            const errorElement = errorContainer.querySelector('.hakumi-form-item-explain-error')
+            if (errorElement) {
+
+                const caption = this.element.querySelector('.hakumi-form-item-extra')
+                if (caption) {
+                    errorContainer.innerHTML = ''
+                    errorContainer.appendChild(caption)
+                } else {
+                    errorContainer.remove()
+                }
+            }
+        }
+
+
+        const input = this.element.querySelector('input, textarea')
+        if (input) {
+            input.removeAttribute('aria-invalid')
+        }
+
+
+        this.updateSubmitButton(false)
+    }
+
+    updateSubmitButton(hasError) {
+        const form = this.element.closest('form')
+        if (!form) return
+
+        const submitButton = form.querySelector('button[type="submit"], input[type="submit"]')
+        if (!submitButton) return
+
+        if (hasError) {
+            submitButton.setAttribute('disabled', 'disabled')
+            console.log('[FormItemController] Submit button disabled')
+        } else {
+
+            const otherErrors = form.querySelectorAll('.hakumi-form-item-has-error')
+            if (otherErrors.length === 0) {
+                submitButton.removeAttribute('disabled')
+                console.log('[FormItemController] Submit button enabled')
+            } else {
+                console.log('[FormItemController] Submit button still disabled (other errors present)')
+            }
+        }
+    }
+
+    resetValidation() {
+        this.hasInteracted = false
+        this.clearError()
+    }
+}