hakumi_components 0.1.18.pre → 0.1.19.pre

data/app/helpers/hakumi_components/form_helper.rb

@@ -1,35 +1,39 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module FormHelper
-    # Creates a form that uses Hakumi components.
-    # This is a wrapper around Rails' form_with that automatically sets the HakumiComponents::FormBuilder.
-    #
-    # @example Basic usage
-    #   <%= hakumi_form_with(model: @user) do |f| %>
-    #     <%= f.text_field :name, label: "Name" %>
-    #     <%= f.submit "Save" %>
-    #   <% end %>
-    #
-    # @example With URL
-    #   <%= hakumi_form_with(url: "/users", method: :post) do |f| %>
-    #     <%= f.text_field :email, label: "Email" %>
-    #   <% end %>
-    #
-    # @param options [Hash] Options to pass to form_with
-    # @option options [Object] :model Model object for the form
-    # @option options [String] :url URL to submit the form to
-    # @option options [Symbol] :method HTTP method (:get, :post, :patch, :delete)
-    # @option options [Class] :builder Custom form builder (defaults to HakumiComponents::FormBuilder)
-    # @option options [Symbol] :layout Form layout (:horizontal, :vertical, :inline)
-    # @return [String] HTML form
+    extend T::Sig
+    include ActionView::Helpers::FormHelper
+
+    FormWithOptionValue = T.type_alias do
+      T.nilable(T.any(
+        String,
+        Symbol,
+        T::Boolean,
+        Numeric,
+        Proc,
+        ActiveModel::Model,
+        T.class_of(ActionView::Helpers::FormBuilder),
+        ActionView::Helpers::FormBuilder,
+        T::Hash[Symbol, HakumiComponents::Types::HtmlAttributeValue]
+      ))
+    end
+
+    sig do
+      params(
+        options: FormWithOptionValue,
+        block: T.proc.params(f: ActionView::Helpers::FormBuilder).returns(T.any(String, ActiveSupport::SafeBuffer))
+      ).returns(ActiveSupport::SafeBuffer)
+    end
     def hakumi_form_with(**options, &block)
       options[:builder] ||= HakumiComponents::FormBuilder
 
       layout = options.delete(:layout)
       if layout
-        html_options = options[:html] || {}
-        html_options[:class] = class_names(html_options[:class], "hakumi-form", "hakumi-form-#{layout}")
+        raw_html_options = options[:html]
+        html_options = raw_html_options.is_a?(Hash) ? raw_html_options.dup : {}
+        html_options[:class] = class_names(html_options[:class].to_s, "hakumi-form", "hakumi-form-#{layout}")
         options[:html] = html_options
       end
 

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

@@ -13,13 +13,6 @@ const STORAGE_KEY = "hakumi:admin-panel"
 export default class extends RegistryController {
   static targets = ["body", "empty", "summary", "search", "typeFilter", "stateFilter"]
 
-  static mount() {
-    Persistence.bootstrap(STORAGE_KEY, ({state}) => {
-      if(!state.visible) return
-      window.HakumiComponents.renderComponent("admin_panel")
-    })
-  }
-
   setup() {
     Persistence.save(STORAGE_KEY, { version: 1, state: { visible: true } })
     this.refresh()
@@ -66,6 +59,11 @@ export default class extends RegistryController {
     this.applyFilters()
   }
 
+  toggle(event) {
+    if (event) event.preventDefault()
+    this.element.classList.toggle("hakumi-admin-panel-collapsed")
+  }
+
   close(event) {
     if (event) event.preventDefault()
     Persistence.save(STORAGE_KEY, { version: 1, state: { visible: false } })

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

@@ -51,7 +51,7 @@ export default class extends RegistryController {
     const scrollTop = this.getScrollTop()
     const isVisible = scrollTop >= this.visibilityHeightValue
     this._isVisible = isVisible
-    this.element.classList.toggle("is-visible", isVisible)
+    this.element.classList.toggle("hakumi-float-button-back-top-visible", isVisible)
   }
 
   attachScrollListener() {

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

@@ -6,15 +6,21 @@ export default class extends RegistryController {
   }
 
   setup() {
+    this.originalHref = this.element.getAttribute("href")
+    this.initiallyDisabled = this.element.hasAttribute("disabled")
+    this.initialAriaDisabled = this.element.getAttribute("aria-disabled")
     this.boundRipple = this.createRipple.bind(this)
-    this.element.addEventListener('click', this.boundRipple)
+    this.element.addEventListener("click", this.boundRipple)
+    this.applyLoadingState()
   }
 
   teardown() {
-    this.element.removeEventListener('click', this.boundRipple)
+    this.element.removeEventListener("click", this.boundRipple)
   }
 
   createRipple(event) {
+    if (this.interactionDisabled()) return
+
     const button = event.currentTarget
     const circle = document.createElement("span")
     const diameter = Math.max(button.clientWidth, button.clientHeight)
@@ -43,6 +49,7 @@ export default class extends RegistryController {
     const api = {
       setLoading: (loading) => {
         this.loadingValue = Boolean(loading)
+        this.applyLoadingState()
       },
       isLoading: () => this.loadingValue,
       ripple: (event) => this.createRipple(event)
@@ -55,4 +62,103 @@ export default class extends RegistryController {
       api
     }
   }
+
+  loadingValueChanged() {
+    this.applyLoadingState()
+  }
+
+  applyLoadingState() {
+    if (!this.element) return
+
+    this.originalHref ??= this.element.getAttribute("href")
+    this.initiallyDisabled ??= this.element.hasAttribute("disabled")
+    this.initialAriaDisabled ??= this.element.getAttribute("aria-disabled")
+
+    const loading = this.loadingValue
+    this.element.classList.toggle("hakumi-button-loading", loading)
+    this.element.setAttribute("aria-busy", String(loading))
+
+    if (this.element.tagName === "BUTTON") {
+      this.element.disabled = this.initiallyDisabled || loading
+    } else if (this.element.tagName === "A") {
+      this.applyAnchorLoadingState(loading)
+    }
+
+    this.syncLoadingIcon(loading)
+  }
+
+  applyAnchorLoadingState(loading) {
+    if (loading) {
+      if (this.element.hasAttribute("href")) {
+        this.originalHref = this.element.getAttribute("href")
+      }
+      this.element.removeAttribute("href")
+      this.element.setAttribute("role", "button")
+      this.element.setAttribute("aria-disabled", "true")
+      return
+    }
+
+    if (this.originalHref && !this.initialAriaDisabled) {
+      this.element.setAttribute("href", this.originalHref)
+    }
+
+    if (this.initialAriaDisabled) {
+      this.element.setAttribute("aria-disabled", this.initialAriaDisabled)
+      this.element.setAttribute("role", "button")
+    } else {
+      this.element.removeAttribute("aria-disabled")
+      this.element.removeAttribute("role")
+    }
+  }
+
+  syncLoadingIcon(loading) {
+    if (loading) {
+      this.hideOriginalIcons()
+      if (!this.loadingIconElement()) {
+        this.element.prepend(this.buildLoadingIcon())
+      }
+    } else {
+      this.loadingIconElement()?.remove()
+      this.restoreOriginalIcons()
+    }
+  }
+
+  loadingIconElement() {
+    return this.element.querySelector(".hakumi-button-loading-icon")
+  }
+
+  buildLoadingIcon() {
+    const span = document.createElement("span")
+    span.className = "hakumi-icon hakumi-icon-spin hakumi-button-loading-icon"
+    span.setAttribute("aria-hidden", "true")
+    span.style.color = "currentColor"
+    span.innerHTML = `
+      <svg viewBox="0 0 1024 1024" focusable="false" width="1em" height="1em" fill="currentColor">
+        <path d="M512 64a448 448 0 1 0 448 448h-80a368 368 0 1 1-368-368V64z"></path>
+      </svg>
+    `
+    return span
+  }
+
+  hideOriginalIcons() {
+    Array.from(this.element.children).forEach((child) => {
+      if (!child.classList.contains("hakumi-icon") || child.classList.contains("hakumi-button-loading-icon")) return
+
+      child.dataset.hakumiButtonHiddenIcon = "true"
+      child.hidden = true
+    })
+  }
+
+  restoreOriginalIcons() {
+    Array.from(this.element.children).forEach((child) => {
+      if (child.dataset.hakumiButtonHiddenIcon !== "true") return
+
+      child.hidden = false
+      delete child.dataset.hakumiButtonHiddenIcon
+    })
+  }
+
+  interactionDisabled() {
+    return this.loadingValue || this.element.disabled || this.element.getAttribute("aria-disabled") === "true"
+  }
 }

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

@@ -13,6 +13,7 @@ export default class extends RegistryController {
     selectedDate: { type: String, default: "" },
     static: { type: Boolean, default: false },
     events: { type: Object, default: {} },
+    validRange: { type: Array, default: [] },
     // In week mode, tracks the user's preferred display month
     // This is set when user clicks a day, and preserved when reopening
     userPreferredMonth: { type: Number, default: 0 },
@@ -30,36 +31,52 @@ export default class extends RegistryController {
       monthsFull: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
     },
     es: {
-      daysShort: ["Lu", "Ma", "Mi", "Ju", "Vi", "Sá", "Do"],  // ISO week: Lunes primero
+      daysShort: ["Lu", "Ma", "Mi", "Ju", "Vi", "Sá", "Do"],  // ISO week: Monday first
       monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
       monthsFull: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
     }
   }
 
   setup() {
-    this.#bindNestedEvents()
+    this.bindNestedEvents()
   }
 
   teardown() {
+    this.unbindNestedEvents()
   }
 
-  #bindNestedEvents() {
+  bindNestedEvents() {
     this.boundChangeYear = this.changeYear.bind(this)
     this.boundChangeMonth = this.changeMonth.bind(this)
     this.boundChangeMode = this.changeMode.bind(this)
+    this.boundHandleSelectChange = this.handleSelectChange.bind(this)
 
-    this.element.addEventListener("hakumi--select:change", (event) => {
-      const target = event.target
-      if (target.matches("[data-hakumi--calendar-target='yearSelect']")) {
-        this.boundChangeYear(event)
-      } else if (target.matches("[data-hakumi--calendar-target='monthSelect']")) {
-        this.boundChangeMonth(event)
-      }
-    })
-
+    this.element.addEventListener("hakumi--select:change", this.boundHandleSelectChange)
     this.element.addEventListener("hakumi--segmented:change", this.boundChangeMode)
   }
 
+  unbindNestedEvents() {
+    if (this.boundHandleSelectChange) {
+      this.element.removeEventListener("hakumi--select:change", this.boundHandleSelectChange)
+      this.boundHandleSelectChange = null
+    }
+    if (this.boundChangeMode) {
+      this.element.removeEventListener("hakumi--segmented:change", this.boundChangeMode)
+      this.boundChangeMode = null
+    }
+    this.boundChangeYear = null
+    this.boundChangeMonth = null
+  }
+
+  handleSelectChange(event) {
+    const target = event.target
+    if (target.matches("[data-hakumi--calendar-target='yearSelect']")) {
+      this.boundChangeYear(event)
+    } else if (target.matches("[data-hakumi--calendar-target='monthSelect']")) {
+      this.boundChangeMonth(event)
+    }
+  }
+
   yearValueChanged() {
     this.#renderCalendar()
     this.#updateYearSelect()
@@ -447,12 +464,7 @@ export default class extends RegistryController {
     if (!events[dateStr]) {
       events[dateStr] = []
     }
-    events[dateStr].push({
-      id: event.id || null,
-      type: event.type || 'default',
-      content: event.content || '',
-      html: event.html || null
-    })
+    events[dateStr].push(this.#normalizeEvent(event))
     
     this.eventsValue = events
     if (!this.staticValue) {
@@ -559,6 +571,10 @@ export default class extends RegistryController {
   }
 
   #formatDateKey(date) {
+    if (date === null || date === undefined || date === "") {
+      return ""
+    }
+
     if (date instanceof Date) {
       return DateHelper.formatDataDate(date)
     }
@@ -571,16 +587,20 @@ export default class extends RegistryController {
     const normalized = {}
     Object.keys(events).forEach(key => {
       const dateStr = this.#formatDateKey(key)
-      normalized[dateStr] = events[key].map(e => ({
-        id: e.id || null,
-        type: e.type || 'default',
-        content: e.content || '',
-        html: e.html || null
-      }))
+      normalized[dateStr] = events[key].map(e => this.#normalizeEvent(e))
     })
     return normalized
   }
 
+  #normalizeEvent(event) {
+    return {
+      id: event.id || null,
+      type: event.type || 'default',
+      content: event.content || '',
+      html: event.html || null
+    }
+  }
+
   #dispatchEventsChange() {
     this.dispatch("eventsChange", {
       detail: { events: this.getEvents() }
@@ -623,7 +643,14 @@ export default class extends RegistryController {
     const today = DateHelper.formatDataDate(new Date())
 
     let html = `<table class="hakumi-calendar-table">
-      <thead class="hakumi-calendar-thead">
+      ${this.#renderMonthTableHead(locale, showWeek)}
+      ${this.#renderMonthTableBody(weeks, showWeek, today)}
+    </table>`
+    return html
+  }
+
+  #renderMonthTableHead(locale, showWeek) {
+    let html = `<thead class="hakumi-calendar-thead">
         <tr>`
 
     if (showWeek) {
@@ -636,37 +663,62 @@ export default class extends RegistryController {
       </th>`
     })
 
-    html += `</tr></thead><tbody class="hakumi-calendar-tbody">`
+    html += `</tr></thead>`
+    return html
+  }
+
+  #renderMonthTableBody(weeks, showWeek, today) {
+    let html = `<tbody class="hakumi-calendar-tbody">`
 
     weeks.forEach(week => {
-      const rowClass = week.weekSelected ? "hakumi-calendar-row hakumi-calendar-row-selected" : "hakumi-calendar-row"
-      html += `<tr class="${rowClass}">`
+      html += this.#renderMonthWeekRow(week, showWeek, today)
+    })
 
-      if (showWeek) {
-        html += `<td class="hakumi-calendar-cell hakumi-calendar-cell-week" data-action="click->hakumi--calendar#selectWeek">
+    html += `</tbody>`
+    return html
+  }
+
+  #renderMonthWeekRow(week, showWeek, today) {
+    const rowClass = week.weekSelected ? "hakumi-calendar-row hakumi-calendar-row-selected" : "hakumi-calendar-row"
+    let html = `<tr class="${rowClass}">`
+
+    if (showWeek) {
+      html += this.#renderWeekNumberCell(week)
+    }
+
+    week.days.forEach(day => {
+      html += this.#renderDateCell(day, today)
+    })
+
+    html += `</tr>`
+    return html
+  }
+
+  #renderWeekNumberCell(week) {
+    return `<td class="hakumi-calendar-cell hakumi-calendar-cell-week" data-action="click->hakumi--calendar#selectWeek">
           <div class="hakumi-calendar-week-number">${week.weekNumber}</div>
         </td>`
-      }
+  }
+
+  #renderDateCell(day, today) {
+    const classes = this.#getCellClasses(day, today)
+    const eventsHtml = this.#renderEventsForDate(day.dateStr)
+    const actions = this.#dateCellActions()
 
-      week.days.forEach(day => {
-        const classes = this.#getCellClasses(day, today)
-        const eventsHtml = this.#renderEventsForDate(day.dateStr)
-        const actions = this.rangeStartDateValue && !this.rangeEndDateValue
-          ? "click->hakumi--calendar#selectDate mouseenter->hakumi--calendar#handleCellHover"
-          : "click->hakumi--calendar#selectDate"
-        html += `<td class="${classes}" data-date="${day.dateStr}" data-action="${actions}">
+    return `<td class="${classes}" data-date="${day.dateStr}" data-action="${actions}">
           <div class="hakumi-calendar-date">
             <div class="hakumi-calendar-date-value">${day.day}</div>
             ${eventsHtml ? `<div class="hakumi-calendar-date-content">${eventsHtml}</div>` : ''}
           </div>
         </td>`
-      })
+  }
 
-      html += `</tr>`
-    })
+  #dateCellActions() {
+    if (this.rangeStartDateValue && !this.rangeEndDateValue) {
+      return "click->hakumi--calendar#selectDate mouseenter->hakumi--calendar#handleCellHover"
+    }
 
-    html += `</tbody></table>`
-    return html
+    return "click->hakumi--calendar#selectDate"
   }
 
   #renderYearView() {
@@ -710,30 +762,34 @@ export default class extends RegistryController {
   }
 
   #getMonthEventIndicators(year, month) {
-    const events = this.eventsValue
-    if (!events || Object.keys(events).length === 0) return ''
+    const eventTypes = this.#getMonthEventTypes(year, month)
+
+    if (eventTypes.size === 0) return ''
+
+    let html = '<div class="hakumi-calendar-month-events">'
+    eventTypes.forEach(type => {
+      html += `<span class="hakumi-calendar-month-event-dot hakumi-calendar-month-event-${type}"></span>`
+    })
+    html += '</div>'
 
+    return html
+  }
 
+  #getMonthEventTypes(year, month) {
+    const events = this.eventsValue
     const eventTypes = new Set()
-    
+    if (!events || Object.keys(events).length === 0) return eventTypes
+
     Object.keys(events).forEach(dateStr => {
       const date = DateHelper.parseDataDate(dateStr)
       if (date.year() === year && date.month() + 1 === month) {
         events[dateStr].forEach(event => {
-          eventTypes.add(event.type || 'default')
+          eventTypes.add(this.#eventType(event))
         })
       }
     })
 
-    if (eventTypes.size === 0) return ''
-
-    let html = '<div class="hakumi-calendar-month-events">'
-    eventTypes.forEach(type => {
-      html += `<span class="hakumi-calendar-month-event-dot hakumi-calendar-month-event-${type}"></span>`
-    })
-    html += '</div>'
-
-    return html
+    return eventTypes
   }
 
   #renderQuarterView() {
@@ -848,7 +904,8 @@ export default class extends RegistryController {
           dateStr: DateHelper.formatDataDate(current),
           day: current.date(),
           inMonth: current.month() + 1 === month,
-          weekend: current.day() === 0 || current.day() === 6
+          weekend: current.day() === 0 || current.day() === 6,
+          disabled: !this.#isDateInValidRange(current)
         })
         current = current.add(1, "day")
       }
@@ -893,59 +950,90 @@ export default class extends RegistryController {
       classes.push("hakumi-calendar-cell-selected")
     }
 
+    if (day.disabled) {
+      classes.push("hakumi-calendar-cell-disabled")
+    }
+
     if (day.weekend && day.dateStr !== this.selectedDateValue) {
       classes.push("hakumi-calendar-cell-weekend")
     }
 
-    // Range selection support
-    if (this.rangeStartDateValue || this.rangeEndDateValue) {
-      const rangeStart = this.rangeStartDateValue ? new Date(this.rangeStartDateValue) : null
-      const rangeEnd = this.rangeEndDateValue ? new Date(this.rangeEndDateValue) : null
-      const hovered = this.hoveredDateValue ? new Date(this.hoveredDateValue) : null
-      const currentDate = new Date(day.dateStr)
-
-      // Mark range start
-      if (rangeStart && day.dateStr === this.rangeStartDateValue) {
-        classes.push("hakumi-calendar-cell-range-start")
-      }
+    this.#appendRangeClasses(classes, day.dateStr)
 
-      // Mark range end
-      if (rangeEnd && day.dateStr === this.rangeEndDateValue) {
-        classes.push("hakumi-calendar-cell-range-end")
-      }
+    return classes.join(" ")
+  }
 
-      // Mark dates in range (between start and end)
-      if (rangeStart && rangeEnd) {
-        if (currentDate > rangeStart && currentDate < rangeEnd) {
-          classes.push("hakumi-calendar-cell-in-range")
-        }
-      }
-      // Mark hover range (between start and hovered date when no end is selected)
-      else if (rangeStart && hovered && !rangeEnd) {
-        if ((currentDate > rangeStart && currentDate <= hovered) ||
-            (currentDate < rangeStart && currentDate >= hovered)) {
-          classes.push("hakumi-calendar-cell-in-range")
-          classes.push("hakumi-calendar-cell-range-hover")
-        }
-      }
+  #appendRangeClasses(classes, dateStr) {
+    if (!this.rangeStartDateValue && !this.rangeEndDateValue) return
+
+    const range = this.#rangeDates()
+    const currentDate = new Date(dateStr)
+
+    if (range.start && dateStr === this.rangeStartDateValue) {
+      classes.push("hakumi-calendar-cell-range-start")
     }
 
-    return classes.join(" ")
+    if (range.end && dateStr === this.rangeEndDateValue) {
+      classes.push("hakumi-calendar-cell-range-end")
+    }
+
+    if (this.#isDateInSelectedRange(currentDate, range)) {
+      classes.push("hakumi-calendar-cell-in-range")
+    } else if (this.#isDateInHoverRange(currentDate, range)) {
+      classes.push("hakumi-calendar-cell-in-range")
+      classes.push("hakumi-calendar-cell-range-hover")
+    }
+  }
+
+  #rangeDates() {
+    return {
+      start: this.rangeStartDateValue ? new Date(this.rangeStartDateValue) : null,
+      end: this.rangeEndDateValue ? new Date(this.rangeEndDateValue) : null,
+      hovered: this.hoveredDateValue ? new Date(this.hoveredDateValue) : null
+    }
+  }
+
+  #isDateInSelectedRange(currentDate, range) {
+    return range.start && range.end && currentDate > range.start && currentDate < range.end
+  }
+
+  #isDateInHoverRange(currentDate, range) {
+    if (!range.start || !range.hovered || range.end) return false
+
+    return (currentDate > range.start && currentDate <= range.hovered) ||
+      (currentDate < range.start && currentDate >= range.hovered)
+  }
+
+  #isDateInValidRange(date) {
+    if (!Array.isArray(this.validRangeValue) || this.validRangeValue.length !== 2) {
+      return true
+    }
+
+    const [startDate, endDate] = this.validRangeValue
+    const current = DateHelper.parseDataDate(DateHelper.formatDataDate(date))
+    const start = startDate ? DateHelper.parseDataDate(startDate) : null
+    const end = endDate ? DateHelper.parseDataDate(endDate) : null
+
+    return (!start || !current.isBefore(start, "day")) && (!end || !current.isAfter(end, "day"))
   }
 
   #renderEventsForDate(dateStr) {
     const events = this.eventsValue[dateStr]
     if (!events || events.length === 0) return ''
 
-    return events.map(event => {
-      const type = event.type || 'default'
-      const content = this.#escapeHtml(event.content)
-      
+    return events.map(event => this.#renderEvent(event)).join('')
+  }
+
+  #renderEvent(event) {
+    const type = this.#eventType(event)
+    const content = this.#escapeHtml(event.content)
+    const badgeHtml = event.html || this.#renderBadgeHtml(type, content)
+
+    return `<div class="hakumi-calendar-event hakumi-calendar-event-${type}" title="${content}">${badgeHtml}</div>`
+  }
 
-      const badgeHtml = event.html || this.#renderBadgeHtml(type, content)
-      
-      return `<div class="hakumi-calendar-event hakumi-calendar-event-${type}" title="${content}">${badgeHtml}</div>`
-    }).join('')
+  #eventType(event) {
+    return event.type || 'default'
   }
 
   #renderBadgeHtml(type, content) {