panda-core 0.12.5 → 1.1.0

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

@@ -0,0 +1,165 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "preview", "dropzone", "fileInfo", "removeButton"]
+
+  connect() {
+    // Setup drag and drop handlers
+    if (this.hasDropzoneTarget) {
+      this.setupDragAndDrop()
+    }
+  }
+
+  setupDragAndDrop() {
+    const dropzone = this.dropzoneTarget
+
+    // Prevent default drag behaviors
+    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.preventDefaults.bind(this), false)
+      document.body.addEventListener(eventName, this.preventDefaults.bind(this), false)
+    })
+
+    // Highlight drop zone when item is dragged over it
+    ;['dragenter', 'dragover'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.highlight.bind(this), false)
+    })
+
+    ;['dragleave', 'drop'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.unhighlight.bind(this), false)
+    })
+
+    // Handle dropped files
+    dropzone.addEventListener('drop', this.handleDrop.bind(this), false)
+  }
+
+  preventDefaults(e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  highlight(e) {
+    this.dropzoneTarget.classList.add('border-primary-600', 'bg-primary-50')
+  }
+
+  unhighlight(e) {
+    this.dropzoneTarget.classList.remove('border-primary-600', 'bg-primary-50')
+  }
+
+  handleDrop(e) {
+    const dt = e.dataTransfer
+    const files = dt.files
+
+    if (files.length > 0) {
+      // Update the file input with the dropped file
+      this.inputTarget.files = files
+      this.handleFileSelect()
+    }
+  }
+
+  // Triggered when user selects file via input or drag-drop
+  handleFileSelect() {
+    const file = this.inputTarget.files[0]
+
+    if (!file) {
+      return
+    }
+
+    // Show file preview if it's an image
+    if (file.type.startsWith('image/')) {
+      this.showImagePreview(file)
+    } else {
+      this.showFileInfo(file)
+    }
+  }
+
+  showImagePreview(file) {
+    const reader = new FileReader()
+
+    reader.onload = (e) => {
+      if (this.hasPreviewTarget) {
+        // Create or update preview image
+        const existingImage = this.previewTarget.querySelector('img')
+        if (existingImage) {
+          existingImage.src = e.target.result
+        } else {
+          const img = document.createElement('img')
+          img.src = e.target.result
+          img.className = 'max-w-xs rounded border border-gray-300 dark:border-gray-600'
+          this.previewTarget.innerHTML = ''
+          this.previewTarget.appendChild(img)
+        }
+        this.previewTarget.classList.remove('hidden')
+      }
+
+      // Show file info with remove button
+      this.showFileInfo(file, true)
+    }
+
+    reader.readAsDataURL(file)
+  }
+
+  showFileInfo(file, withPreview = false) {
+    if (!this.hasFileInfoTarget) {
+      return
+    }
+
+    const fileSize = this.humanFileSize(file.size)
+    const fileName = file.name
+
+    this.fileInfoTarget.innerHTML = `
+      <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
+        <div class="flex items-center gap-x-3 flex-1 min-w-0">
+          <svg class="size-8 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+          </svg>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">${fileName}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">${fileSize}</p>
+          </div>
+        </div>
+        <button type="button"
+                data-action="click->file-upload#removeFile"
+                class="flex-shrink-0 ml-3 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
+          <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    `
+    this.fileInfoTarget.classList.remove('hidden')
+
+    // Hide the dropzone upload area
+    if (this.hasDropzoneTarget) {
+      this.dropzoneTarget.classList.add('hidden')
+    }
+  }
+
+  removeFile() {
+    // Clear the file input
+    this.inputTarget.value = ''
+
+    // Hide preview and file info
+    if (this.hasPreviewTarget) {
+      this.previewTarget.classList.add('hidden')
+      this.previewTarget.innerHTML = ''
+    }
+
+    if (this.hasFileInfoTarget) {
+      this.fileInfoTarget.classList.add('hidden')
+      this.fileInfoTarget.innerHTML = ''
+    }
+
+    // Show the dropzone again
+    if (this.hasDropzoneTarget) {
+      this.dropzoneTarget.classList.remove('hidden')
+    }
+  }
+
+  humanFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
+  }
+}

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

@@ -0,0 +1,184 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "results", "group"]
+  static values = {
+    url: String,
+    open: { type: Boolean, default: false },
+    index: { type: Number, default: -1 }
+  }
+
+  connect() {
+    this.debounceTimer = null
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleGlobalKeydown = this.handleGlobalKeydown.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+    document.addEventListener("keydown", this.handleGlobalKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleOutsideClick)
+    document.removeEventListener("keydown", this.handleGlobalKeydown)
+    if (this.debounceTimer) clearTimeout(this.debounceTimer)
+  }
+
+  // Cmd+K / Ctrl+K to focus search
+  handleGlobalKeydown(event) {
+    if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+      event.preventDefault()
+      this.inputTarget.focus()
+      this.inputTarget.select()
+    }
+  }
+
+  onInput() {
+    const query = this.inputTarget.value.trim()
+
+    if (this.debounceTimer) clearTimeout(this.debounceTimer)
+
+    if (query.length < 2) {
+      this.close()
+      return
+    }
+
+    this.debounceTimer = setTimeout(() => this.search(query), 200)
+  }
+
+  async search(query) {
+    try {
+      const url = `${this.urlValue}?q=${encodeURIComponent(query)}`
+      const response = await fetch(url, {
+        headers: { "Accept": "application/json" }
+      })
+
+      if (!response.ok) return
+
+      const data = await response.json()
+      this.renderResults(data.groups)
+    } catch (e) {
+      console.warn("[panda-core] Search failed:", e)
+    }
+  }
+
+  renderResults(groups) {
+    const container = this.resultsTarget
+
+    if (!groups || groups.length === 0) {
+      container.innerHTML = `
+        <div class="px-4 py-6 text-center text-sm text-white/80">
+          No results found
+        </div>
+      `
+      this.open()
+      return
+    }
+
+    let html = ""
+    groups.forEach(group => {
+      const icon = group.icon ? `<i class="${this.escapeAttr(group.icon)} mr-2.5"></i>` : ""
+      html += `<div class="px-3 pt-3 pb-1"><span class="text-xs font-semibold text-white/40 uppercase tracking-wider">${icon}${this.escapeHtml(group.name)}</span></div>`
+
+      group.results.forEach(result => {
+        const desc = result.description
+          ? `<span class="text-xs text-white/40 truncate">${this.escapeHtml(result.description)}</span>`
+          : ""
+        html += `
+          <a href="${this.escapeAttr(result.href)}" class="search-result flex flex-col gap-0.5 px-3 py-2 rounded-lg hover:bg-white/15 transition-colors cursor-pointer" data-action="keydown->global-search#onResultKeydown">
+            <span class="text-sm text-white/90 truncate">${this.escapeHtml(result.name)}</span>
+            ${desc}
+          </a>
+        `
+      })
+    })
+
+    container.innerHTML = html
+    this.indexValue = -1
+    this.open()
+  }
+
+  open() {
+    this.resultsTarget.classList.remove("hidden")
+    this.openValue = true
+  }
+
+  close() {
+    this.resultsTarget.classList.add("hidden")
+    this.resultsTarget.innerHTML = ""
+    this.openValue = false
+    this.indexValue = -1
+  }
+
+  onInputKeydown(event) {
+    if (!this.openValue) return
+
+    const results = this.resultsTarget.querySelectorAll(".search-result")
+    if (results.length === 0) return
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.indexValue = Math.min(this.indexValue + 1, results.length - 1)
+        this.highlightResult(results)
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.indexValue = Math.max(this.indexValue - 1, 0)
+        this.highlightResult(results)
+        break
+      case "Enter":
+        event.preventDefault()
+        if (this.indexValue >= 0 && results[this.indexValue]) {
+          results[this.indexValue].click()
+        }
+        break
+      case "Escape":
+        event.preventDefault()
+        this.close()
+        this.inputTarget.blur()
+        break
+    }
+  }
+
+  onResultKeydown(event) {
+    if (event.key === "Escape") {
+      this.close()
+      this.inputTarget.focus()
+    }
+  }
+
+  highlightResult(results) {
+    results.forEach((el, i) => {
+      if (i === this.indexValue) {
+        el.classList.add("bg-white/10")
+        el.scrollIntoView({ block: "nearest" })
+      } else {
+        el.classList.remove("bg-white/10")
+      }
+    })
+  }
+
+  onFocus() {
+    // If there are already results rendered, show them
+    if (this.resultsTarget.innerHTML.trim() !== "") {
+      this.open()
+    }
+  }
+
+  handleOutsideClick(event) {
+    if (this.openValue && !this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  escapeHtml(text) {
+    if (!text) return ""
+    const div = document.createElement("div")
+    div.textContent = text
+    return div.innerHTML
+  }
+
+  escapeAttr(text) {
+    if (!text) return ""
+    return text.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+  }
+}

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

@@ -10,6 +10,42 @@ application.register("image-cropper", ImageCropperController)
 import NavigationToggleController from "./navigation_toggle_controller.js"
 application.register("navigation-toggle", NavigationToggleController)
 
+import MobileSidebarController from "./mobile_sidebar_controller.js"
+application.register("mobile-sidebar", MobileSidebarController)
+
+import RowLinkController from "./row_link_controller.js"
+application.register("row-link", RowLinkController)
+
+import CollapsibleItemController from "./collapsible_item_controller.js"
+application.register("collapsible-item", CollapsibleItemController)
+
+import CustomSelectController from "./custom_select_controller.js"
+application.register("custom-select", CustomSelectController)
+
+import ClipboardController from "./clipboard_controller.js"
+application.register("clipboard", ClipboardController)
+
+import AvatarUploadController from "./avatar_upload_controller.js"
+application.register("avatar-upload", AvatarUploadController)
+
+import GlobalSearchController from "./global_search_controller.js"
+application.register("global-search", GlobalSearchController)
+
+import TagInputController from "./tag_input_controller.js"
+application.register("tag-input", TagInputController)
+
+import DatepickerController from "./datepicker_controller.js"
+application.register("datepicker", DatepickerController)
+
+import DaterangeController from "./daterange_controller.js"
+application.register("daterange", DaterangeController)
+
+import FileGalleryController from "./file_gallery_controller.js"
+application.register("file-gallery", FileGalleryController)
+
+import FileUploadController from "./file_upload_controller.js"
+application.register("file-upload", FileUploadController)
+
 // Import and register TailwindCSS Stimulus Components
 // These are needed for UI components like slideover, modals, alerts, etc.
 import { Alert, Autosave, ColorPreview, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "../tailwindcss-stimulus-components.js"

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

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["sidebar", "backdrop", "hamburger"]
+
+  connect() {
+    this._isOpen = false
+    this._mediaQuery = window.matchMedia("(min-width: 1024px)")
+    this._handleBreakpoint = this._handleBreakpoint.bind(this)
+    this._mediaQuery.addEventListener("change", this._handleBreakpoint)
+  }
+
+  disconnect() {
+    this._mediaQuery.removeEventListener("change", this._handleBreakpoint)
+  }
+
+  toggle() {
+    if (this._isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this._isOpen = true
+    this._enableTransition()
+    this.sidebarTarget.classList.remove("max-h-16")
+    this.sidebarTarget.classList.add("max-h-screen")
+    this.backdropTarget.classList.remove("hidden")
+    this.hamburgerTarget.setAttribute("aria-expanded", "true")
+  }
+
+  close() {
+    this._isOpen = false
+    this._enableTransition()
+    this.sidebarTarget.classList.remove("max-h-screen")
+    this.sidebarTarget.classList.add("max-h-16")
+    this.backdropTarget.classList.add("hidden")
+    this.hamburgerTarget.setAttribute("aria-expanded", "false")
+  }
+
+  // Apply transition only during active mobile toggles to prevent
+  // Turbo page visits from animating the sidebar height on desktop.
+  _enableTransition() {
+    const el = this.sidebarTarget
+    el.classList.add("transition-all", "ease-in-out", "duration-300")
+    el.addEventListener("transitionend", () => {
+      el.classList.remove("transition-all", "ease-in-out", "duration-300")
+    }, { once: true })
+  }
+
+  _handleBreakpoint(event) {
+    if (event.matches && this._isOpen) {
+      this.close()
+    }
+  }
+}

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

@@ -1,33 +1,34 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Navigation toggle controller for expandable menu items
-// Usage:
-//   <div data-controller="navigation-toggle">
-//     <button data-navigation-toggle-target="button"
-//             data-action="click->navigation-toggle#toggle"
-//             aria-controls="sub-menu-1"
-//             aria-expanded="false">
-//       <span>Menu Item</span>
-//       <i data-navigation-toggle-target="icon" class="fa-solid fa-chevron-right"></i>
-//     </button>
-//     <div id="sub-menu-1" data-navigation-toggle-target="menu" class="hidden">
-//       <a href="#">Sub Item 1</a>
-//       <a href="#">Sub Item 2</a>
-//     </div>
-//   </div>
 export default class extends Controller {
-  static targets = ["button", "menu", "icon"]
+  static targets = ["button", "menu", "icon", "wrapper"]
+
+  // Classes toggled on the button when expanding/collapsing
+  static expandedButtonClasses = ["rounded-t-xl", "bg-white/15", "text-white"]
+  static collapsedButtonClasses = ["rounded-xl", "hover:bg-white/5", "text-white/80"]
 
   connect() {
-    // Ensure menu starts in correct state
-    // Check if this menu should be expanded by default (if a child is active)
-    const hasActiveChild = this.menuTarget.querySelector(".bg-primary-500")
+    // Suppress transitions on connect to prevent visual jump during Turbo navigation
+    const menu = this.menuTarget
+    menu.classList.remove("transition-all", "duration-200", "ease-out")
+
+    const hasActiveChild = menu.querySelector('[class*="bg-primary-500"]')
     if (hasActiveChild) {
       this.expand()
     } else {
-      // Explicitly ensure the menu is collapsed if no active child
       this.collapse()
     }
+
+    // Re-enable transitions for user interactions; store RAF ID so disconnect() can cancel it
+    this._rafId = requestAnimationFrame(() => {
+      menu.classList.add("transition-all", "duration-200", "ease-out")
+    })
+  }
+
+  disconnect() {
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId)
+    }
   }
 
   toggle(event) {
@@ -45,20 +46,44 @@ export default class extends Controller {
   }
 
   expand() {
-    this.menuTarget.classList.remove("hidden")
-    this.menuTarget.style.display = ""
+    // Menu animation
+    this.menuTarget.classList.remove("max-h-0", "opacity-0")
+    this.menuTarget.classList.add("max-h-96", "opacity-100")
+
     this.buttonTarget.setAttribute("aria-expanded", "true")
 
+    // Button styling: collapsed → expanded
+    this.constructor.collapsedButtonClasses.forEach(c => this.buttonTarget.classList.remove(c))
+    this.constructor.expandedButtonClasses.forEach(c => this.buttonTarget.classList.add(c))
+
+    // Wrapper background
+    if (this.hasWrapperTarget) {
+      this.wrapperTarget.classList.add("rounded-xl", "bg-white/10", "overflow-hidden")
+    }
+
+    // Chevron rotation
     if (this.hasIconTarget) {
       this.iconTarget.classList.add("rotate-90")
     }
   }
 
   collapse() {
-    this.menuTarget.classList.add("hidden")
-    this.menuTarget.style.display = "none"
+    // Menu animation
+    this.menuTarget.classList.remove("max-h-96", "opacity-100")
+    this.menuTarget.classList.add("max-h-0", "opacity-0")
+
     this.buttonTarget.setAttribute("aria-expanded", "false")
 
+    // Button styling: expanded → collapsed
+    this.constructor.expandedButtonClasses.forEach(c => this.buttonTarget.classList.remove(c))
+    this.constructor.collapsedButtonClasses.forEach(c => this.buttonTarget.classList.add(c))
+
+    // Wrapper background
+    if (this.hasWrapperTarget) {
+      this.wrapperTarget.classList.remove("rounded-xl", "bg-white/10", "overflow-hidden")
+    }
+
+    // Chevron rotation
     if (this.hasIconTarget) {
       this.iconTarget.classList.remove("rotate-90")
     }

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Handles clickable table rows that contain a block-link anchor.
+//
+// Uses event delegation on the table container rather than CSS ::after
+// pseudo-elements, which don't work reliably with display: table-row
+// in Safari (position: relative on table-row is undefined per spec).
+export default class extends Controller {
+  click(event) {
+    // Don't interfere with actual links (except block-link) or buttons
+    if (event.target.closest("a:not(.block-link), button, input")) return
+
+    const row = event.target.closest(".table-row")
+    if (!row) return
+
+    const link = row.querySelector("a.block-link")
+    if (!link) return
+
+    event.preventDefault()
+
+    if (typeof Turbo !== "undefined") {
+      Turbo.visit(link.href)
+    } else {
+      window.location.href = link.href
+    }
+  }
+}