panda-core 0.12.5 → 1.1.0

data/app/javascript/panda/core/controllers/custom_select_controller.js

@@ -0,0 +1,256 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["select"]
+  static values = { open: { type: Boolean, default: false }, index: { type: Number, default: -1 } }
+
+  connect() {
+    this.element.classList.add("relative")
+    this.selectTarget.classList.add("sr-only")
+    this.options = Array.from(this.selectTarget.options)
+    this.buildUI()
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleOutsideClick)
+  }
+
+  buildUI() {
+    // Find the selected option
+    const selectedOption = this.options.find(o => o.selected) || this.options[0]
+    const isPlaceholder = selectedOption && (selectedOption.value === "" || selectedOption.disabled)
+
+    // Build trigger button
+    this.trigger = document.createElement("button")
+    this.trigger.type = "button"
+    this.trigger.setAttribute("role", "combobox")
+    this.trigger.setAttribute("aria-expanded", "false")
+    this.trigger.setAttribute("aria-haspopup", "listbox")
+    // Border/radius are themeable via --panda-select-trigger-border /
+    // --panda-input-radius (see app/assets/tailwind/application.css); the
+    // var() fallbacks resolve to today's rounded-xl/border-gray-200 exactly,
+    // so this is a no-op unless a host app sets data-theme.
+    this.trigger.className = "flex items-center justify-between w-full h-11 rounded-[var(--panda-input-radius,var(--radius-xl))] border border-[var(--panda-select-trigger-border,var(--color-gray-200))] bg-white px-3 py-2 text-sm text-left focus:border-transparent focus:ring-2 focus:ring-primary-500 cursor-pointer"
+    this.trigger.innerHTML = `
+      <span class="truncate ${isPlaceholder ? "text-gray-400" : "text-gray-900"}">${this.escapeHtml(selectedOption ? selectedOption.text : "")}</span>
+      <svg class="w-4 h-4 text-gray-400 shrink-0 ml-2 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+      </svg>
+    `
+    this.trigger.addEventListener("click", (e) => {
+      e.preventDefault()
+      this.toggleDropdown()
+    })
+    this.trigger.addEventListener("keydown", (e) => this.handleTriggerKeydown(e))
+
+    // Build listbox
+    this.listbox = document.createElement("ul")
+    this.listbox.setAttribute("role", "listbox")
+    this.listbox.setAttribute("tabindex", "-1")
+    this.listbox.className = "absolute z-50 mt-1 w-full max-h-60 overflow-auto rounded-xl border border-gray-200 bg-white shadow-lg py-1 text-sm focus:outline-none hidden"
+    this.listbox.id = `custom-select-listbox-${this.selectTarget.id || Math.random().toString(36).slice(2)}`
+    this.trigger.setAttribute("aria-controls", this.listbox.id)
+
+    this.options.forEach((option, i) => {
+      const li = document.createElement("li")
+      li.setAttribute("role", "option")
+      li.setAttribute("aria-selected", option.selected ? "true" : "false")
+      li.setAttribute("data-index", i)
+      li.setAttribute("data-value", option.value)
+      li.id = `${this.listbox.id}-option-${i}`
+
+      const isBlank = option.value === "" || option.disabled
+      li.className = `relative cursor-pointer select-none px-3 py-2 flex items-center justify-between ${
+        option.selected && !isBlank ? "bg-primary-50 text-primary-800" : "text-gray-900"
+      } ${isBlank ? "text-gray-400" : ""}`
+
+      li.innerHTML = `
+        <span class="block truncate">${this.escapeHtml(option.text)}</span>
+        ${option.selected && !isBlank ? '<i class="fa-solid fa-check text-primary-600 text-xs"></i>' : ""}
+      `
+
+      li.addEventListener("click", () => this.selectOption(i))
+      li.addEventListener("mouseenter", () => this.highlightOption(i))
+      this.listbox.appendChild(li)
+    })
+
+    this.listbox.addEventListener("keydown", (e) => this.handleListboxKeydown(e))
+
+    // Insert after the native select
+    this.selectTarget.parentNode.insertBefore(this.trigger, this.selectTarget.nextSibling)
+    this.selectTarget.parentNode.appendChild(this.listbox)
+
+    // Remove any existing SVG chevron (from the FormBuilder select_svg helper)
+    const existingSvg = this.element.querySelector("svg.pointer-events-none")
+    if (existingSvg) existingSvg.remove()
+  }
+
+  toggleDropdown() {
+    this.openValue = !this.openValue
+    this.renderDropdown()
+
+    if (this.openValue) {
+      // Highlight the currently selected option
+      const selectedIdx = this.options.findIndex(o => o.selected)
+      if (selectedIdx >= 0) {
+        this.indexValue = selectedIdx
+        this.highlightOption(selectedIdx)
+      }
+      this.listbox.focus()
+    }
+  }
+
+  renderDropdown() {
+    if (this.openValue) {
+      this.listbox.classList.remove("hidden")
+      this.trigger.setAttribute("aria-expanded", "true")
+      this.trigger.querySelector("svg").style.transform = "rotate(180deg)"
+    } else {
+      this.listbox.classList.add("hidden")
+      this.trigger.setAttribute("aria-expanded", "false")
+      this.trigger.querySelector("svg").style.transform = ""
+      this.indexValue = -1
+    }
+  }
+
+  selectOption(index) {
+    const option = this.options[index]
+    if (!option) return
+
+    // Update native select
+    this.selectTarget.value = option.value
+    this.selectTarget.dispatchEvent(new Event("change", { bubbles: true }))
+
+    // Update trigger text
+    const isPlaceholder = option.value === "" || option.disabled
+    const triggerText = this.trigger.querySelector("span")
+    triggerText.textContent = option.text
+    triggerText.className = `truncate ${isPlaceholder ? "text-gray-400" : "text-gray-900"}`
+
+    // Update option styles and aria
+    const items = this.listbox.querySelectorAll("[role='option']")
+    items.forEach((li, i) => {
+      const opt = this.options[i]
+      const isBlank = opt.value === "" || opt.disabled
+      const isSelected = i === index
+      li.setAttribute("aria-selected", isSelected ? "true" : "false")
+      li.className = `relative cursor-pointer select-none px-3 py-2 flex items-center justify-between ${
+        isSelected && !isBlank ? "bg-primary-50 text-primary-800" : "text-gray-900"
+      } ${isBlank ? "text-gray-400" : ""}`
+      li.innerHTML = `
+        <span class="block truncate">${this.escapeHtml(opt.text)}</span>
+        ${isSelected && !isBlank ? '<i class="fa-solid fa-check text-primary-600 text-xs"></i>' : ""}
+      `
+    })
+
+    // Close
+    this.openValue = false
+    this.renderDropdown()
+    this.trigger.focus()
+  }
+
+  highlightOption(index) {
+    this.indexValue = index
+    const items = this.listbox.querySelectorAll("[role='option']")
+    items.forEach((li, i) => {
+      if (i === index) {
+        li.classList.add("bg-primary-100")
+        li.scrollIntoView({ block: "nearest" })
+        this.trigger.setAttribute("aria-activedescendant", li.id)
+      } else {
+        li.classList.remove("bg-primary-100")
+      }
+    })
+  }
+
+  handleTriggerKeydown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+      case "Enter":
+      case " ":
+        event.preventDefault()
+        if (!this.openValue) {
+          this.openValue = true
+          this.renderDropdown()
+          const selectedIdx = this.options.findIndex(o => o.selected)
+          this.highlightOption(selectedIdx >= 0 ? selectedIdx : 0)
+          this.listbox.focus()
+        }
+        break
+      case "Escape":
+        if (this.openValue) {
+          event.preventDefault()
+          this.openValue = false
+          this.renderDropdown()
+        }
+        break
+    }
+  }
+
+  handleListboxKeydown(event) {
+    const maxIndex = this.options.length - 1
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.highlightOption(Math.min(this.indexValue + 1, maxIndex))
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.highlightOption(Math.max(this.indexValue - 1, 0))
+        break
+      case "Enter":
+      case " ":
+        event.preventDefault()
+        if (this.indexValue >= 0) {
+          this.selectOption(this.indexValue)
+        }
+        break
+      case "Escape":
+        event.preventDefault()
+        this.openValue = false
+        this.renderDropdown()
+        this.trigger.focus()
+        break
+      case "Tab":
+        this.openValue = false
+        this.renderDropdown()
+        break
+      default:
+        // Type-ahead: jump to first option starting with typed character
+        if (event.key.length === 1) {
+          const char = event.key.toLowerCase()
+          const startIdx = this.indexValue + 1
+          const match = this.options.findIndex((o, i) =>
+            i >= startIdx && o.text.toLowerCase().startsWith(char)
+          )
+          if (match >= 0) {
+            this.highlightOption(match)
+          } else {
+            // Wrap around
+            const wrapMatch = this.options.findIndex(o =>
+              o.text.toLowerCase().startsWith(char)
+            )
+            if (wrapMatch >= 0) this.highlightOption(wrapMatch)
+          }
+        }
+        break
+    }
+  }
+
+  handleOutsideClick(event) {
+    if (this.openValue && !this.element.contains(event.target)) {
+      this.openValue = false
+      this.renderDropdown()
+    }
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement("div")
+    div.textContent = text
+    return div.innerHTML
+  }
+}

data/app/javascript/panda/core/controllers/datepicker_controller.js

@@ -0,0 +1,121 @@
+import { Controller } from "@hotwired/stimulus"
+import { Calendar } from "vanilla-calendar-pro"
+
+export default class extends Controller {
+  static targets = ["display", "hidden", "calendar"]
+  static values = {
+    dateMin: String,
+    dateMax: String
+  }
+
+  connect() {
+    this.isOpen = false
+    this.calendar = null
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.outsideClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+    if (this.calendar) this.calendar.destroy()
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    if (this.isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    if (this.isOpen) return
+
+    const options = {
+      type: "default",
+      settings: {
+        visibility: {
+          theme: "light"
+        },
+        iso8601: true,
+        selection: {
+          day: "single"
+        }
+      },
+      actions: {
+        clickDay: (event, self) => {
+          this.handleDateSelect(self)
+        }
+      }
+    }
+
+    if (this.hasDateMinValue) {
+      options.settings.range = options.settings.range || {}
+      options.settings.range.min = this.dateMinValue
+    }
+    if (this.hasDateMaxValue) {
+      options.settings.range = options.settings.range || {}
+      options.settings.range.max = this.dateMaxValue
+    }
+
+    // Set initial selected date from hidden field value
+    const currentValue = this.hiddenTarget.value
+    if (currentValue && /^\d{4}-\d{2}-\d{2}$/.test(currentValue)) {
+      options.selectedDates = [currentValue]
+      options.selectedMonth = parseInt(currentValue.split("-")[1], 10) - 1
+      options.selectedYear = parseInt(currentValue.split("-")[0], 10)
+    }
+
+    this.calendarTarget.innerHTML = ""
+    this.calendarTarget.classList.remove("hidden")
+
+    this.calendar = new Calendar(this.calendarTarget, options)
+    this.calendar.init()
+    this.isOpen = true
+
+    document.addEventListener("click", this.outsideClick)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  close() {
+    if (!this.isOpen) return
+    this.calendarTarget.classList.add("hidden")
+    if (this.calendar) {
+      this.calendar.destroy()
+      this.calendar = null
+    }
+    this.isOpen = false
+    document.removeEventListener("click", this.outsideClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  handleDateSelect(calendarInstance) {
+    const selectedDates = calendarInstance.context.selectedDates
+    if (selectedDates && selectedDates.length > 0) {
+      const isoDate = selectedDates[selectedDates.length - 1]
+      this.hiddenTarget.value = isoDate
+      this.displayTarget.value = this.formatDate(isoDate)
+      this.hiddenTarget.dispatchEvent(new Event("change", { bubbles: true }))
+      this.close()
+    }
+  }
+
+  outsideClick = (event) => {
+    if (this.isOpen && !this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  handleKeydown = (event) => {
+    if (event.key === "Escape" && this.isOpen) {
+      this.close()
+      this.displayTarget.focus()
+    }
+  }
+
+  formatDate(isoDate) {
+    const [year, month, day] = isoDate.split("-")
+    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
+    return date.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" })
+  }
+}

data/app/javascript/panda/core/controllers/daterange_controller.js

@@ -0,0 +1,193 @@
+import { Controller } from "@hotwired/stimulus"
+import { Calendar } from "vanilla-calendar-pro"
+
+export default class extends Controller {
+  static targets = ["startInput", "endInput", "calendar"]
+  static values = {
+    dateMin: String,
+    dateMax: String
+  }
+
+  connect() {
+    this.isOpen = false
+    this.calendar = null
+    this.activeInput = null
+
+    this.startInputTarget.readOnly = true
+    this.endInputTarget.readOnly = true
+    this.startInputTarget.style.cursor = "pointer"
+    this.endInputTarget.style.cursor = "pointer"
+
+    this.startInputTarget.addEventListener("click", this.openFromStart)
+    this.startInputTarget.addEventListener("focus", this.openFromStart)
+    this.endInputTarget.addEventListener("click", this.openFromEnd)
+    this.endInputTarget.addEventListener("focus", this.openFromEnd)
+    document.addEventListener("click", this.outsideClick)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  disconnect() {
+    this.startInputTarget.removeEventListener("click", this.openFromStart)
+    this.startInputTarget.removeEventListener("focus", this.openFromStart)
+    this.endInputTarget.removeEventListener("click", this.openFromEnd)
+    this.endInputTarget.removeEventListener("focus", this.openFromEnd)
+    document.removeEventListener("click", this.outsideClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+    if (this.calendar) this.calendar.destroy()
+  }
+
+  openFromStart = (event) => {
+    event.stopPropagation()
+    this.activeInput = "start"
+    if (this.isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  openFromEnd = (event) => {
+    event.stopPropagation()
+    this.activeInput = "end"
+    if (this.isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    if (this.isOpen) return
+
+    const options = {
+      type: "default",
+      settings: {
+        visibility: {
+          theme: "light",
+          positionToInput: "auto"
+        },
+        iso8601: true,
+        selection: {
+          day: "multiple-ranged"
+        }
+      },
+      actions: {
+        clickDay: (event, self) => {
+          this.handleRangeSelect(self)
+        }
+      }
+    }
+
+    if (this.hasDateMinValue) {
+      options.settings.range = options.settings.range || {}
+      options.settings.range.min = this.dateMinValue
+    }
+    if (this.hasDateMaxValue) {
+      options.settings.range = options.settings.range || {}
+      options.settings.range.max = this.dateMaxValue
+    }
+
+    // Set initial selected range from input values
+    const startDate = this.parseInputDate(this.startInputTarget.value)
+    const endDate = this.parseInputDate(this.endInputTarget.value)
+    if (startDate && endDate) {
+      options.selectedDates = this.getDateRange(startDate, endDate)
+      options.selectedMonth = parseInt(startDate.split("-")[1], 10) - 1
+      options.selectedYear = parseInt(startDate.split("-")[0], 10)
+    } else if (startDate) {
+      options.selectedDates = [startDate]
+      options.selectedMonth = parseInt(startDate.split("-")[1], 10) - 1
+      options.selectedYear = parseInt(startDate.split("-")[0], 10)
+    }
+
+    this.calendarTarget.innerHTML = ""
+    this.calendarTarget.classList.remove("hidden")
+
+    this.calendar = new Calendar(this.calendarTarget, options)
+    this.calendar.init()
+    this.isOpen = true
+  }
+
+  close() {
+    if (!this.isOpen) return
+    this.calendarTarget.classList.add("hidden")
+    if (this.calendar) {
+      this.calendar.destroy()
+      this.calendar = null
+    }
+    this.isOpen = false
+  }
+
+  handleRangeSelect(calendarInstance) {
+    const selectedDates = calendarInstance.context.selectedDates
+    if (selectedDates && selectedDates.length > 0) {
+      const sorted = [...selectedDates].sort()
+      const startDate = sorted[0]
+      const endDate = sorted[sorted.length - 1]
+
+      this.startInputTarget.value = this.formatDate(startDate)
+      this.endInputTarget.value = this.formatDate(endDate)
+
+      this.startInputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+      this.endInputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+
+      // Close after selecting end of range (2+ dates selected)
+      if (selectedDates.length >= 2) {
+        this.close()
+      }
+    }
+  }
+
+  outsideClick = (event) => {
+    if (this.isOpen && !this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  handleKeydown = (event) => {
+    if (event.key === "Escape" && this.isOpen) {
+      this.close()
+      if (this.activeInput === "end") {
+        this.endInputTarget.focus()
+      } else {
+        this.startInputTarget.focus()
+      }
+    }
+  }
+
+  getDateRange(start, end) {
+    const dates = []
+    const current = new Date(start)
+    const endDate = new Date(end)
+    while (current <= endDate) {
+      dates.push(current.toISOString().split("T")[0])
+      current.setDate(current.getDate() + 1)
+    }
+    return dates
+  }
+
+  parseInputDate(value) {
+    if (!value) return null
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return value
+
+    const ukMatch = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/)
+    if (ukMatch) {
+      return `${ukMatch[3]}-${ukMatch[2].padStart(2, "0")}-${ukMatch[1].padStart(2, "0")}`
+    }
+
+    const months = { Jan: "01", Feb: "02", Mar: "03", Apr: "04", May: "05", Jun: "06",
+                     Jul: "07", Aug: "08", Sep: "09", Oct: "10", Nov: "11", Dec: "12" }
+    const namedMatch = value.match(/^(\d{1,2})\s+(\w{3})\s+(\d{4})$/)
+    if (namedMatch && months[namedMatch[2]]) {
+      return `${namedMatch[3]}-${months[namedMatch[2]]}-${namedMatch[1].padStart(2, "0")}`
+    }
+
+    return null
+  }
+
+  formatDate(isoDate) {
+    const [year, month, day] = isoDate.split("-")
+    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
+    return date.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" })
+  }
+}

data/app/javascript/panda/core/controllers/file_gallery_controller.js

@@ -0,0 +1,134 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['uploadBackdrop', 'uploadPanel']
+  static values = { filesPath: String }
+
+  connect() {
+    this._handleFilenameInput = this.handleFilenameInput.bind(this)
+    this._handleFilenameBlur = this.handleFilenameBlur.bind(this)
+    document.addEventListener('input', this._handleFilenameInput)
+    document.addEventListener('focusout', this._handleFilenameBlur)
+  }
+
+  disconnect() {
+    document.removeEventListener('input', this._handleFilenameInput)
+    document.removeEventListener('focusout', this._handleFilenameBlur)
+  }
+
+  handleFilenameInput(event) {
+    if (event.target.id !== 'blob_filename') return
+    const { selectionStart } = event.target
+    event.target.value = event.target.value.replace(/\s/g, '_').replace(/[^a-z0-9_-]/gi, '')
+    event.target.setSelectionRange(selectionStart, selectionStart)
+  }
+
+  handleFilenameBlur(event) {
+    if (event.target.id !== 'blob_filename') return
+    event.target.value = event.target.value.toLowerCase()
+  }
+
+  selectFile(event) {
+    const button = event.currentTarget
+    const fileId = button.dataset.fileId
+
+    this.selectedFileId = fileId
+    this.updateSelectedState(button)
+    this.loadFileDetails(fileId)
+  }
+
+  async loadFileDetails(fileId) {
+    const slideoverContent = document.getElementById('file-gallery-slideover-content')
+    if (!slideoverContent) return
+
+    // Show loading state
+    slideoverContent.innerHTML =
+      '<div class="flex items-center justify-center py-12"><i class="fa-solid fa-spinner fa-spin text-2xl text-gray-400"></i></div>'
+    this.showSlideover()
+
+    try {
+      const response = await fetch(`${this.filesPathValue}/${fileId}`, {
+        headers: {
+          Accept: 'text/html',
+          'X-Requested-With': 'XMLHttpRequest',
+        },
+      })
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+      slideoverContent.innerHTML = await response.text()
+    } catch {
+      slideoverContent.innerHTML =
+        '<div class="text-center py-12"><i class="fa-solid fa-exclamation-triangle text-2xl text-red-400 mb-2"></i><p class="text-sm text-gray-500">Failed to load file details</p></div>'
+    }
+  }
+
+  showSlideover() {
+    // Toggle controller is now a descendant (inside ContainerComponent)
+    const toggleElement = this.element.querySelector('[data-controller*="toggle"]')
+    if (!toggleElement) return
+
+    const toggleController = this.application.getControllerForElementAndIdentifier(
+      toggleElement,
+      'toggle'
+    )
+    if (toggleController) {
+      toggleController.show()
+    }
+  }
+
+  reopenSlideover() {
+    if (this.selectedFileId) {
+      this.loadFileDetails(this.selectedFileId)
+    }
+  }
+
+  openUpload() {
+    this.uploadBackdropTarget.classList.remove('hidden')
+    this.uploadPanelTarget.classList.remove('hidden')
+  }
+
+  closeUpload() {
+    this.uploadBackdropTarget.classList.add('hidden')
+    this.uploadPanelTarget.classList.add('hidden')
+  }
+
+  updateSelectedState(selectedButton) {
+    // Remove selected state from all file items
+    const allFileItems = this.element.querySelectorAll('[data-action*="file-gallery#selectFile"]')
+    allFileItems.forEach((button) => {
+      const container = button.closest('.relative').querySelector('.group')
+      if (container) {
+        container.classList.remove(
+          'outline',
+          'outline-2',
+          'outline-offset-2',
+          'outline-panda-dark',
+          'dark:outline-panda-light'
+        )
+        container.classList.add(
+          'focus-within:outline-2',
+          'focus-within:outline-offset-2',
+          'focus-within:outline-primary-600'
+        )
+      }
+    })
+
+    // Add selected state to clicked item
+    const container = selectedButton.closest('.relative').querySelector('.group')
+    if (container) {
+      container.classList.add(
+        'outline',
+        'outline-2',
+        'outline-offset-2',
+        'outline-panda-dark',
+        'dark:outline-panda-light'
+      )
+      container.classList.remove(
+        'focus-within:outline-2',
+        'focus-within:outline-offset-2',
+        'focus-within:outline-primary-600'
+      )
+    }
+  }
+}