hakumi_components 0.1.16.pre → 0.1.17.pre

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

@@ -41,13 +41,6 @@ export default class extends RegistryController {
         setOffsetBottom: (value) => this.setOffsetBottom(value)
       }
     }
-
-    this.#exposeApi()
-  }
-
-  disconnect() {
-    delete this.element.hakumiAffix
-    super.disconnect()
   }
 
   updatePosition() {
@@ -187,20 +180,4 @@ export default class extends RegistryController {
     if (this.hasOffsetBottomValue) return Number(this.offsetBottomValue)
     return null
   }
-
-  #exposeApi() {
-    this.element.hakumiAffix = {
-      check: () => this.updatePosition(),
-      update: () => this.updatePosition(),
-      isAffixed: () => this.affixed,
-      getState: () => ({
-        affixed: this.affixed,
-        offsetTop: this.offsetTop,
-        offsetBottom: this.offsetBottom,
-        targetSelector: this.targetSelectorValue || null
-      }),
-      setOffsetTop: (value) => this.setOffsetTop(value),
-      setOffsetBottom: (value) => this.setOffsetBottom(value)
-    }
-  }
 }

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

@@ -1,6 +1,7 @@
 import RegistryController from "../base/registry_controller.js"
 
 export default class extends RegistryController {
+  static declarativeActions = ["close"]
   static targets = ["message", "description"]
 
   registerApi() {
@@ -20,7 +21,7 @@ export default class extends RegistryController {
 
   close(event) {
     if (event) event.preventDefault()
-    this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+    this.dispatch("hidden")
     this.element.remove()
   }
 

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

@@ -14,13 +14,6 @@ export default class extends RegistryController {
     this.element.removeEventListener('click', this.boundRipple)
   }
 
-  handleClick(event) {
-    if (this.loadingValue || this.element.disabled) {
-      event.preventDefault()
-      event.stopImmediatePropagation()
-    }
-  }
-
   createRipple(event) {
     const button = event.currentTarget
     const circle = document.createElement("span")

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

@@ -41,7 +41,6 @@ export default class extends RegistryController {
   }
 
   teardown() {
-    delete this.element.hakumiCalendar
   }
 
   #bindNestedEvents() {
@@ -1096,6 +1095,5 @@ export default class extends RegistryController {
     }
 
 
-    this.element.hakumiCalendar = api
   }
 }

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

@@ -725,11 +725,6 @@ export default class extends RegistryController {
     }
 
     dispatchEvent(name, detail) {
-        this.element.dispatchEvent(
-            new CustomEvent(`hakumi:color-picker:${name}`, {
-                detail,
-                bubbles: true
-            })
-        )
+        this.dispatch(name, { detail })
     }
 }

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

@@ -28,7 +28,7 @@ export default class extends RegistryController {
   teardown() {
     document.removeEventListener("click", this.boundClickOutside)
 
-    // Limpiar listeners de calendarios si existen
+    // Clean up calendar listeners if they exist
     if (this.rangeValue && this.hasPanelTarget) {
       const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
       const [startCalendar, endCalendar] = calendars
@@ -355,13 +355,13 @@ export default class extends RegistryController {
       if (!api) return
 
       if (this.tempRangeStart && this.tempRangeEnd) {
-        // Rango completo
+        // Complete range
         api.setRange(this.tempRangeStart, this.tempRangeEnd, null)
       } else if (this.tempRangeStart) {
-        // Solo inicio, sin fin (mostrar solo el inicio)
+        // Start only, no end (show only start)
         api.setRange(this.tempRangeStart, null, null)
       } else {
-        // Sin rango
+        // No range
         api.clearRange()
       }
     })
@@ -391,12 +391,12 @@ export default class extends RegistryController {
 
     if (!startApi || !endApi) return
 
-    // Obtener el mes/año actual del primer calendario
+    // Get current month/year from first calendar
     const startDate = startApi.getValue()
     const startMonth = startDate.getMonth()
     const startYear = startDate.getFullYear()
 
-    // Calcular el mes siguiente para el segundo calendario
+    // Calculate next month for second calendar
     let endMonth = startMonth + 1
     let endYear = startYear
 
@@ -405,7 +405,7 @@ export default class extends RegistryController {
       endYear += 1
     }
 
-    // Establecer el segundo calendario al mes siguiente
+    // Set second calendar to next month
     const endDate = new Date(endYear, endMonth, 1)
     endApi.setValue(endDate, { navigate: true })
   }
@@ -419,7 +419,7 @@ export default class extends RegistryController {
     const startCalendar = calendars[0]
     const endCalendar = calendars[1]
 
-    // Remover listeners previos si existen
+    // Remove previous listeners if they exist
     if (this.boundSyncFromStart) {
       startCalendar.removeEventListener("hakumi--calendar:change", this.boundSyncFromStart)
     }
@@ -427,7 +427,7 @@ export default class extends RegistryController {
       endCalendar.removeEventListener("hakumi--calendar:change", this.boundSyncFromEnd)
     }
 
-    // Crear los listeners
+    // Create listeners
     this.boundSyncFromStart = (event) => {
       const startApi = startCalendar.hakumiComponent?.api
       const endApi = endCalendar.hakumiComponent?.api
@@ -437,7 +437,7 @@ export default class extends RegistryController {
       const startMonth = startDate.getMonth()
       const startYear = startDate.getFullYear()
 
-      // Calcular el mes siguiente
+      // Calculate next month
       let endMonth = startMonth + 1
       let endYear = startYear
 
@@ -450,7 +450,7 @@ export default class extends RegistryController {
       const currentEndMonth = endDate.getMonth()
       const currentEndYear = endDate.getFullYear()
 
-      // Solo sincronizar si el segundo calendario no está ya en el mes correcto
+      // Only sync if second calendar is not already on the correct month
       if (currentEndMonth !== endMonth || currentEndYear !== endYear) {
         endApi.setValue(new Date(endYear, endMonth, 1), { navigate: true })
       }
@@ -465,7 +465,7 @@ export default class extends RegistryController {
       const endMonth = endDate.getMonth()
       const endYear = endDate.getFullYear()
 
-      // Calcular el mes anterior
+      // Calculate previous month
       let startMonth = endMonth - 1
       let startYear = endYear
 
@@ -478,13 +478,13 @@ export default class extends RegistryController {
       const currentStartMonth = startDate.getMonth()
       const currentStartYear = startDate.getFullYear()
 
-      // Solo sincronizar si el primer calendario no está ya en el mes correcto
+      // Only sync if first calendar is not already on the correct month
       if (currentStartMonth !== startMonth || currentStartYear !== startYear) {
         startApi.setValue(new Date(startYear, startMonth, 1), { navigate: true })
       }
     }
 
-    // Listener para hover
+    // Hover listener
     this.boundHandleHover = (event) => {
       const hoveredDate = event.detail?.date
       if (!hoveredDate) return
@@ -602,23 +602,23 @@ export default class extends RegistryController {
     const formatted = this.formatDate(date)
 
     if (this.rangeValue) {
-      // Nueva lógica de selección de rango visual
+      // New visual range selection logic
       if (!this.tempRangeStart) {
-        // Primera selección: establecer inicio del rango
+        // First selection: set range start
         this.tempRangeStart = date
         this.tempRangeEnd = null
 
-        // Actualizar input de inicio
+        // Update start input
         if (this.hasStartInputTarget) {
           this.startInputTarget.value = formatted
         }
 
-        // Limpiar input de fin
+        // Clear end input
         if (this.hasEndInputTarget) {
           this.endInputTarget.value = ""
         }
 
-        // Actualizar visual en ambos calendarios
+        // Update visual in both calendars
         this.updateRangeVisuals()
 
         this.dispatchChangeEvent({
@@ -626,10 +626,10 @@ export default class extends RegistryController {
           endValue: ""
         })
       } else if (!this.tempRangeEnd) {
-        // Segunda selección: establecer fin del rango
+        // Second selection: set range end
         const clickedDate = date
 
-        // Si la fecha clickeada es anterior al inicio, reiniciar selección
+        // If clicked date is before start, restart selection
         if (clickedDate < this.tempRangeStart) {
           this.tempRangeStart = clickedDate
           this.tempRangeEnd = null
@@ -648,7 +648,7 @@ export default class extends RegistryController {
             endValue: ""
           })
         } else {
-          // Completar el rango
+          // Complete the range
           this.tempRangeEnd = clickedDate
 
           if (this.hasEndInputTarget) {
@@ -664,11 +664,11 @@ export default class extends RegistryController {
 
           this.updateClearVisibility()
 
-          // Cerrar el picker después de completar la selección
+          // Close picker after completing selection
           this.close()
         }
       } else {
-        // Ya hay un rango completo, reiniciar con nueva selección
+        // Already have a complete range, restart with new selection
         this.tempRangeStart = date
         this.tempRangeEnd = null
 
@@ -688,10 +688,10 @@ export default class extends RegistryController {
       }
 
       this.updateClearVisibility()
-      return  // Salir temprano para rangos
+      return  // Early return for ranges
     }
 
-    // Código para pickers no-rango
+    // Code for non-range pickers
     // Use setValue to update both hidden and display inputs
     this.setValue(formatted)
     this.syncCalendarWithInput()
@@ -781,17 +781,11 @@ export default class extends RegistryController {
   }
 
   dispatchChangeEvent(detail) {
-    this.element.dispatchEvent(new CustomEvent("hakumi:date-picker:change", {
-      bubbles: true,
-      detail
-    }))
+    this.dispatch("change", { detail })
   }
 
   dispatchOpenChange(open) {
-    this.element.dispatchEvent(new CustomEvent("hakumi:date-picker:open-change", {
-      bubbles: true,
-      detail: { open }
-    }))
+    this.dispatch("openChange", { detail: { open } })
   }
 
   // DateTime methods (for show_time: true)

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

@@ -2,6 +2,7 @@ import RegistryController from "../base/registry_controller.js"
 import { ensureOverlayContainer } from "../../core/overlay_container.js"
 
 export default class extends RegistryController {
+    static declarativeActions = ["close"]
     static targets = ["mask", "wrapper", "body"]
     static values = {
         open: Boolean,
@@ -103,7 +104,7 @@ export default class extends RegistryController {
                     document.body.style.overflow = ""
                     document.body.style.userSelect = ""
                     document.body.style.webkitUserSelect = ""
-                    this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+                    this.dispatch("hidden")
                 }
                 this.closeTimeout = null
             }, 300)

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

@@ -1,8 +1,6 @@
 import RegistryController from "../base/registry_controller.js"
 import { validationManager } from "../../../lib/validation_manager.js"
 
-
-
 export default class extends RegistryController {
     static values = {
         dependencies: Array,
@@ -11,14 +9,7 @@ export default class extends RegistryController {
     }
 
     setup() {
-        console.log('[FormItemController] Setup', {
-            fieldName: this.fieldNameValue,
-            dependencies: this.dependenciesValue,
-            rules: this.rulesValue
-        })
-
         this.hasInteracted = false
-
         this.setupListeners()
         this.setupFormSubmitValidation()
     }
@@ -61,10 +52,8 @@ export default class extends RegistryController {
     }
 
     handleFormSubmit(event) {
-
         this.hasInteracted = true
 
-
         const currentField = this.element.querySelector('input, textarea')
         if (!currentField) return
 
@@ -77,7 +66,6 @@ export default class extends RegistryController {
             if (!result.valid) {
                 event.preventDefault()
                 this.showError(result.errors[0])
-                console.log('[FormItemController] Form submission prevented due to validation error')
             }
         }
     }
@@ -85,29 +73,32 @@ export default class extends RegistryController {
     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.match.field) {
+                        dependencies.push(rule.match.field)
+                    } else if (typeof rule.match === 'string') {
+                        dependencies.push(rule.match)
+                    }
+                }
+
+                if (rule.comparison && rule.comparison.field) {
+                    dependencies.push(rule.comparison.field)
                 }
 
                 if (rule.dependent && rule.dependent.field) {
@@ -116,36 +107,26 @@ export default class extends RegistryController {
             })
         }
 
-
         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)
             }
         })
     }
@@ -153,7 +134,6 @@ export default class extends RegistryController {
     removeListeners() {
         if (!this.boundValidate) return
 
-
         const currentField = this.element.querySelector('input, textarea')
         if (currentField) {
             currentField.removeEventListener('input', this.boundValidate)
@@ -161,7 +141,6 @@ export default class extends RegistryController {
             currentField.removeEventListener('change', this.boundValidate)
         }
 
-
         if (!this.dependencyFields) return
 
         this.dependencyFields.forEach(field => {
@@ -171,62 +150,44 @@ export default class extends RegistryController {
     }
 
     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()
@@ -242,7 +203,6 @@ export default class extends RegistryController {
 
         inputs.forEach(input => {
             if (input.name) {
-
                 const match = input.name.match(/\[([^\]]+)\]$/)
                 const fieldName = match ? match[1] : input.name
                 formData[fieldName] = input.value
@@ -253,10 +213,8 @@ export default class extends RegistryController {
     }
 
     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')
@@ -279,26 +237,21 @@ export default class extends RegistryController {
             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 = ''
@@ -309,13 +262,11 @@ export default class extends RegistryController {
             }
         }
 
-
         const input = this.element.querySelector('input, textarea')
         if (input) {
             input.removeAttribute('aria-invalid')
         }
 
-
         this.updateSubmitButton(false)
     }
 
@@ -328,15 +279,10 @@ export default class extends RegistryController {
 
         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)')
             }
         }
     }

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

@@ -288,27 +288,20 @@ export default class extends RegistryController {
   }
 
   #dispatchChange() {
-    this.element.dispatchEvent(new CustomEvent("hakumi:mentions:change", {
-      bubbles: true,
+    this.dispatch("change", {
       detail: {
         value: this.getValue(),
         mentions: this.getMentions()
       }
-    }))
+    })
   }
 
   #dispatchSelect(detail) {
-    this.element.dispatchEvent(new CustomEvent("hakumi:mentions:select", {
-      bubbles: true,
-      detail
-    }))
+    this.dispatch("select", { detail })
   }
 
   #dispatchSearch(detail) {
-    this.element.dispatchEvent(new CustomEvent("hakumi:mentions:search", {
-      bubbles: true,
-      detail
-    }))
+    this.dispatch("search", { detail })
   }
 
   #positionDropdown() {

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

@@ -270,7 +270,7 @@ export default class extends RegistryController {
     }
 
     #dispatchHidden() {
-        this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+        this.dispatch("hidden")
     }
 
     #enforceMaxCount() {