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

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

@@ -301,7 +301,7 @@ export default class extends RegistryController {
       direction
     }
 
-    this.element.dispatchEvent(new CustomEvent("hakumi:transfer:change", { detail, bubbles: true }))
+    this.dispatch("change", { detail })
   }
 
   #dispatchSelectChange() {
@@ -310,6 +310,6 @@ export default class extends RegistryController {
       targetSelectedKeys: this.#selectedKeys("target")
     }
 
-    this.element.dispatchEvent(new CustomEvent("hakumi:transfer:select-change", { detail, bubbles: true }))
+    this.dispatch("selectChange", { detail })
   }
 }

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

@@ -51,7 +51,6 @@ export default class extends RegistryController {
   }
 
   disconnect() {
-    delete this.element.hakumiTree
     super.disconnect()
   }
 
@@ -81,7 +80,6 @@ export default class extends RegistryController {
       api
     }
 
-    this.element.hakumiTree = api
   }
 
   buildNodeMap() {

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

@@ -268,14 +268,14 @@ export default class extends RegistryController {
   }
 
   treeApi() {
-    return this.treeTarget?.hakumiTree || this.treeTarget?.hakumiComponent?.api
+    return this.treeTarget?.hakumiComponent?.api
   }
 
   dispatchSelect(detail) {
-    this.element.dispatchEvent(new CustomEvent("hakumi:tree-select:select", { detail, bubbles: true }))
+    this.dispatch("select", { detail })
   }
 
   dispatchChange(detail) {
-    this.element.dispatchEvent(new CustomEvent("hakumi:tree-select:change", { detail, bubbles: true }))
+    this.dispatch("change", { detail })
   }
 }

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

@@ -742,31 +742,21 @@ export default class extends RegistryController {
   }
 
   dispatchChange(file) {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:upload:change", {
-        bubbles: true,
-        detail: { file, fileList: this.getFileList() }
-      })
-    )
+    this.dispatch("change", {
+      detail: { file, fileList: this.getFileList() }
+    })
   }
 
   dispatchProgress(file, event) {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:upload:progress", {
-        bubbles: true,
-        detail: { file: file ? { ...file } : null, fileList: this.getFileList(), event }
-      })
-    )
+    this.dispatch("progress", {
+      detail: { file: file ? { ...file } : null, fileList: this.getFileList(), event }
+    })
   }
 
   dispatchSuccess(file) {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:upload:success", {
-        bubbles: true,
-        detail: { file: file ? { ...file } : null, fileList: this.getFileList() }
-      })
-    )
-
+    this.dispatch("success", {
+      detail: { file: file ? { ...file } : null, fileList: this.getFileList() }
+    })
 
     if (window.HakumiComponents?.renderComponent && file?.name) {
       window.HakumiComponents.renderComponent("message", {
@@ -781,13 +771,9 @@ export default class extends RegistryController {
   }
 
   dispatchError(file, error) {
-    this.element.dispatchEvent(
-      new CustomEvent("hakumi:upload:error", {
-        bubbles: true,
-        detail: { file: file ? { ...file } : null, fileList: this.getFileList(), error }
-      })
-    )
-
+    this.dispatch("error", {
+      detail: { file: file ? { ...file } : null, fileList: this.getFileList(), error }
+    })
 
     if (window.HakumiComponents?.renderComponent) {
       const errorMsg = error || file?.error || "Upload failed"

package/app/javascript/hakumi_components/core/persistence.js

@@ -21,7 +21,7 @@ const json = {
     },
 }
 
-// --- navegación (Turbo + fallbacks), bind único global al módulo ---
+// Navigation events (Turbo + fallbacks), single global binding per module
 let navBound = false
 const navCallbacks = new Set()
 
@@ -51,7 +51,7 @@ const bindNavigationOnce = () => {
     window.addEventListener("hashchange", scheduleNavCallbacks)
 }
 
-// ✅ Dedupe por key: evita múltiples restores activos si mount() corre más de una vez
+// Dedupe by key: prevents multiple active restores if mount() runs more than once
 const bootstrapsByKey = new Map() // key -> unsubscribe
 
 export const Persistence = {
@@ -80,7 +80,7 @@ export const Persistence = {
             throw new Error("[HakumiComponents] Persistence.bootstrap(key, fn) expects a function")
         }
 
-        // ✅ dedupe
+        // Dedupe: return existing unsubscribe if already bootstrapped
         const existing = bootstrapsByKey.get(key)
         if (existing) return existing
 

package/app/javascript/hakumi_components/core/render_component.js

@@ -149,7 +149,9 @@ export const renderComponent = async (
                 element.remove()
                 unregister(id)
             }
-            element.addEventListener("hakumi-component:hidden", handleHidden, { once: true })
+            // Listen for component-specific hidden event (e.g., hakumi--modal:hidden)
+            const controllerName = name.replace(/_/g, "-")
+            element.addEventListener(`hakumi--${controllerName}:hidden`, handleHidden, { once: true })
         }
 
         await nextFrame()

package/app/javascript/lib/validation_manager.js

@@ -106,6 +106,107 @@ export default class ValidationManager {
                 }
             },
 
+            comparison: (value, rule, formData = {}) => {
+                if (value === null || value === undefined || value === '') return { valid: true }
+
+                const config = rule.value || rule.comparison || {}
+                const operator = config.operator
+                if (!operator) return { valid: true }
+
+                let targetValue
+                if (config.field) {
+                    targetValue = formData[config.field]
+                } else if (config.value !== undefined) {
+                    targetValue = config.value
+                } else {
+                    return { valid: true }
+                }
+
+                if (targetValue === null || targetValue === undefined || targetValue === '') {
+                    return { valid: true }
+                }
+
+                const normalize = (raw) => {
+                    if (raw instanceof Date) {
+                        return { type: 'date', value: raw.getTime() }
+                    }
+
+                    if (typeof raw === 'number') {
+                        return { type: 'number', value: raw }
+                    }
+
+                    const text = String(raw).trim()
+                    if (text === '') return { type: 'empty', value: text }
+
+                    const numeric = Number(text)
+                    if (!Number.isNaN(numeric) && /^-?\d+(\.\d+)?$/.test(text)) {
+                        return { type: 'number', value: numeric }
+                    }
+
+                    const parsedDate = Date.parse(text)
+                    if (!Number.isNaN(parsedDate) && /[-/T:]/.test(text)) {
+                        return { type: 'date', value: parsedDate }
+                    }
+
+                    return { type: 'string', value: text }
+                }
+
+                const left = normalize(value)
+                const right = normalize(targetValue)
+
+                if (left.type === 'empty' || right.type === 'empty') return { valid: true }
+
+                const compareValues = (a, b) => {
+                    if (a.type === 'number' && b.type === 'number') {
+                        return a.value === b.value ? 0 : (a.value > b.value ? 1 : -1)
+                    }
+
+                    if (a.type === 'date' && b.type === 'date') {
+                        return a.value === b.value ? 0 : (a.value > b.value ? 1 : -1)
+                    }
+
+                    if (a.value === b.value) return 0
+                    return a.value > b.value ? 1 : -1
+                }
+
+                const result = compareValues(left, right)
+                let valid
+
+                switch (operator) {
+                    case 'greater_than':
+                        valid = result > 0
+                        break
+                    case 'greater_than_or_equal_to':
+                        valid = result >= 0
+                        break
+                    case 'less_than':
+                        valid = result < 0
+                        break
+                    case 'less_than_or_equal_to':
+                        valid = result <= 0
+                        break
+                    case 'equal_to':
+                        valid = result === 0
+                        break
+                    case 'other_than':
+                        valid = result !== 0
+                        break
+                    default:
+                        valid = true
+                        break
+                }
+
+                const label = config.label || config.field || config.value
+                const fallbackMessage = label
+                    ? `Must be ${operator.replace(/_/g, ' ')} ${label}`
+                    : 'Comparison failed'
+
+                return {
+                    valid,
+                    message: rule.message || fallbackMessage
+                }
+            },
+
             custom: (value, rule) => {
                 if (typeof rule.validator !== 'function') {
                     console.error('Custom validator must be a function')

package/app/javascript/stylesheets/_theme-tokens.scss

@@ -252,8 +252,9 @@
 
 
 
+// Auto-detect theme from OS preference (opt-in with data-theme="auto")
 @media (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
+    :root[data-theme="auto"] {
 
         --color-primary: #6366f1;
         --color-primary-hover: #818cf8;

package/app/javascript/stylesheets/components/_modal.scss

@@ -207,4 +207,17 @@
     transform: scale(0.2);
     transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
         transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+
+// Modal Confirm variant
+.hakumi-modal-confirm-body-wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.hakumi-modal-confirm-content {
+    p {
+        margin: 0;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hakumi-dev/hakumi-components",
-  "version": "0.1.16-pre",
+  "version": "0.1.18-pre",
   "type": "module",
   "description": "Hakumi Components for Rails and modern JavaScript frameworks",
   "keywords": [