lightning_ui_kit 0.3.5 → 0.4.1

data/app/javascript/lightning_ui_kit/controllers/calendar_controller.js

@@ -0,0 +1,103 @@
+import { Controller } from "@hotwired/stimulus"
+
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+const MONTHS = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December"
+]
+
+export default class extends Controller {
+  static targets = ["label", "grid", "input"]
+  static values = { selected: String, month: String }
+
+  connect() {
+    const monthStr = this.monthValue || (this.selectedValue ? this.selectedValue.slice(0, 7) : null)
+    if (monthStr) {
+      const [year, month] = monthStr.split("-").map(Number)
+      this.viewYear = year
+      this.viewMonth = month - 1
+    } else {
+      const now = new Date()
+      this.viewYear = now.getFullYear()
+      this.viewMonth = now.getMonth()
+    }
+    this.selected = this.selectedValue || null
+    this.render()
+  }
+
+  prevMonth() {
+    this.shiftMonth(-1)
+  }
+
+  nextMonth() {
+    this.shiftMonth(1)
+  }
+
+  shiftMonth(delta) {
+    this.viewMonth += delta
+    if (this.viewMonth < 0) {
+      this.viewMonth = 11
+      this.viewYear -= 1
+    } else if (this.viewMonth > 11) {
+      this.viewMonth = 0
+      this.viewYear += 1
+    }
+    this.render()
+  }
+
+  selectDate(iso) {
+    this.selected = iso
+    if (this.hasInputTarget) this.inputTarget.value = iso
+    this.render()
+    this.dispatch("select", { detail: { date: iso } })
+  }
+
+  render() {
+    this.labelTarget.textContent = `${MONTHS[this.viewMonth]} ${this.viewYear}`
+    this.gridTarget.innerHTML = ""
+
+    WEEKDAYS.forEach((weekday) => {
+      const cell = document.createElement("div")
+      cell.className = "lui:flex lui:h-8 lui:w-8 lui:items-center lui:justify-center lui:text-xs lui:font-normal lui:text-foreground-muted"
+      cell.textContent = weekday
+      this.gridTarget.appendChild(cell)
+    })
+
+    const firstDay = new Date(this.viewYear, this.viewMonth, 1).getDay()
+    const daysInMonth = new Date(this.viewYear, this.viewMonth + 1, 0).getDate()
+    const todayIso = this.toIso(new Date())
+
+    for (let i = 0; i < firstDay; i++) {
+      const blank = document.createElement("div")
+      blank.className = "lui:h-8 lui:w-8"
+      this.gridTarget.appendChild(blank)
+    }
+
+    for (let day = 1; day <= daysInMonth; day++) {
+      const iso = `${this.viewYear}-${String(this.viewMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`
+      const button = document.createElement("button")
+      button.type = "button"
+      button.dataset.date = iso
+      button.textContent = day
+      button.className = this.dayClasses(iso, todayIso)
+      button.addEventListener("click", () => this.selectDate(iso))
+      this.gridTarget.appendChild(button)
+    }
+  }
+
+  dayClasses(iso, todayIso) {
+    let classes = "lui:flex lui:h-8 lui:w-8 lui:items-center lui:justify-center lui:rounded-md lui:text-sm lui:transition-colors lui:cursor-pointer"
+    if (iso === this.selected) {
+      classes += " lui:bg-surface-invert lui:text-foreground-invert"
+    } else if (iso === todayIso) {
+      classes += " lui:text-foreground lui:hover:bg-surface-hover lui:border lui:border-border lui:font-medium"
+    } else {
+      classes += " lui:text-foreground lui:hover:bg-surface-hover"
+    }
+    return classes
+  }
+
+  toIso(date) {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/carousel_controller.js

@@ -0,0 +1,68 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["track", "slide", "dots", "prev", "next"]
+  static values = {
+    loop: Boolean,
+    index: { type: Number, default: 0 }
+  }
+
+  connect() {
+    this.buildDots()
+    this.update()
+  }
+
+  prev() {
+    this.go(this.indexValue - 1)
+  }
+
+  next() {
+    this.go(this.indexValue + 1)
+  }
+
+  go(index) {
+    const count = this.slideTargets.length
+    if (count === 0) return
+
+    if (this.loopValue) {
+      index = (index + count) % count
+    } else {
+      index = Math.max(0, Math.min(index, count - 1))
+    }
+    this.indexValue = index
+  }
+
+  indexValueChanged() {
+    this.update()
+  }
+
+  update() {
+    this.trackTarget.style.transform = `translateX(-${this.indexValue * 100}%)`
+
+    if (this.hasDotsTarget) {
+      Array.from(this.dotsTarget.children).forEach((dot, i) => {
+        dot.classList.toggle("lui:bg-interactive", i === this.indexValue)
+        dot.classList.toggle("lui:bg-border-hover", i !== this.indexValue)
+      })
+    }
+
+    if (!this.loopValue) {
+      if (this.hasPrevTarget) this.prevTarget.disabled = this.indexValue === 0
+      if (this.hasNextTarget) this.nextTarget.disabled = this.indexValue === this.slideTargets.length - 1
+    }
+  }
+
+  buildDots() {
+    if (!this.hasDotsTarget) return
+    this.dotsTarget.innerHTML = ""
+
+    this.slideTargets.forEach((_, i) => {
+      const dot = document.createElement("button")
+      dot.type = "button"
+      dot.setAttribute("aria-label", `Go to slide ${i + 1}`)
+      dot.className = "lui:size-2 lui:rounded-full lui:bg-border-hover lui:transition-colors lui:cursor-pointer"
+      dot.addEventListener("click", () => this.go(i))
+      this.dotsTarget.appendChild(dot)
+    })
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/chart_controller.js

@@ -0,0 +1,109 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tooltip", "cursor", "markers"]
+
+  show(event) {
+    const el = event.currentTarget
+    this.trackCursor(el)
+    if (!this.hasTooltipTarget) return
+
+    const label = el.dataset.label || ""
+    let items = []
+    try {
+      items = JSON.parse(el.dataset.payload || "[]")
+    } catch (_) {
+      items = []
+    }
+
+    const rows = items.map((item) => `
+      <div class="lui:flex lui:items-center lui:justify-between lui:gap-4">
+        <span class="lui:flex lui:items-center lui:gap-1.5 lui:text-foreground-muted">
+          <span class="lui:size-2.5 lui:shrink-0 lui:rounded-[2px]" style="background-color:${this.escapeHtml(item.color)}"></span>${this.escapeHtml(item.label)}
+        </span>
+        <span class="lui:font-medium lui:text-foreground lui:tabular-nums">${this.escapeHtml(item.value)}</span>
+      </div>`).join("")
+
+    this.tooltipTarget.innerHTML = `<div class="lui:font-medium lui:text-foreground">${this.escapeHtml(label)}</div>${rows}`
+    this.tooltipTarget.classList.remove("lui:hidden")
+    this.position(event)
+  }
+
+  move(event) {
+    this.position(event)
+  }
+
+  hide() {
+    if (this.hasTooltipTarget) this.tooltipTarget.classList.add("lui:hidden")
+    if (this.hasCursorTarget) this.cursorTarget.style.display = "none"
+    if (this.hasMarkersTarget) this.markersTarget.style.display = "none"
+  }
+
+  // Moves the vertical cursor (or bar band) and one active dot per series onto
+  // the hovered column.
+  trackCursor(el) {
+    const x = el.dataset.cursorX
+
+    if (this.hasCursorTarget) {
+      const line = this.cursorTarget.querySelector('[data-role="cursor-line"]')
+      if (line) {
+        line.setAttribute("x1", x)
+        line.setAttribute("x2", x)
+      }
+
+      const band = this.cursorTarget.querySelector('[data-role="cursor-band"]')
+      if (band) {
+        band.setAttribute("x", el.getAttribute("x"))
+        band.setAttribute("width", el.getAttribute("width"))
+      }
+
+      this.cursorTarget.style.display = ""
+    }
+
+    if (!this.hasMarkersTarget) return
+
+    let markers = []
+    try {
+      markers = JSON.parse(el.dataset.markers || "[]")
+    } catch (_) {
+      markers = []
+    }
+
+    this.markersTarget.querySelectorAll('[data-role="active-dot"]').forEach((dot, i) => {
+      const y = markers[i]
+      if (y === null || y === undefined) {
+        dot.style.display = "none"
+        return
+      }
+      dot.setAttribute("cx", x)
+      dot.setAttribute("cy", y)
+      dot.style.display = ""
+    })
+    this.markersTarget.style.display = ""
+  }
+
+  // Labels, series names and y_format: output are caller-supplied, so they are
+  // escaped before going into innerHTML.
+  escapeHtml(text) {
+    const div = document.createElement("div")
+    div.textContent = text ?? ""
+    return div.innerHTML
+  }
+
+  position(event) {
+    if (!this.hasTooltipTarget) return
+
+    const rect = this.element.getBoundingClientRect()
+    const tip = this.tooltipTarget
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+
+    let left = x + 12
+    let top = y + 12
+    if (left + tip.offsetWidth > rect.width) left = x - tip.offsetWidth - 12
+    if (top + tip.offsetHeight > rect.height) top = y - tip.offsetHeight - 12
+
+    tip.style.left = `${Math.max(0, left)}px`
+    tip.style.top = `${Math.max(0, top)}px`
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/clipboard_controller.js

@@ -1,11 +1,12 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["input"]
+  static targets = ["input", "icon", "successIcon", "showIcon", "hideIcon"]
+  static values = { duration: { type: Number, default: 2000 } }
 
   connect() {
     if (this.hasInputTarget) {
-      this.inputTarget.disabled = true
+      this.inputTarget.readOnly = true
     }
   }
 
@@ -16,6 +17,42 @@ export default class extends Controller {
     }
 
     const text = this.inputTarget.innerHTML || this.inputTarget.value
-    navigator.clipboard.writeText(text)
+    navigator.clipboard.writeText(text).then(() => {
+      this.#showSuccess()
+    })
+  }
+
+  toggle(e) {
+    e.preventDefault()
+    if (!this.hasInputTarget) {
+      return
+    }
+
+    const isPassword = this.inputTarget.type === "password"
+    this.inputTarget.type = isPassword ? "text" : "password"
+
+    if (this.hasShowIconTarget && this.hasHideIconTarget) {
+      this.showIconTarget.classList.toggle("lui:hidden", isPassword)
+      this.hideIconTarget.classList.toggle("lui:hidden", !isPassword)
+    }
+  }
+
+  #showSuccess() {
+    if (!this.hasIconTarget || !this.hasSuccessIconTarget) {
+      return
+    }
+
+    this.iconTarget.classList.add("lui:hidden")
+    this.successIconTarget.classList.remove("lui:hidden")
+
+    clearTimeout(this.resetTimeout)
+    this.resetTimeout = setTimeout(() => {
+      this.iconTarget.classList.remove("lui:hidden")
+      this.successIconTarget.classList.add("lui:hidden")
+    }, this.durationValue)
+  }
+
+  disconnect() {
+    clearTimeout(this.resetTimeout)
   }
 }

data/app/javascript/lightning_ui_kit/controllers/collapsible_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+  static values = { open: Boolean }
+
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  openValueChanged() {
+    if (!this.hasContentTarget) return
+
+    if (this.openValue) {
+      this.contentTarget.classList.remove("lui:grid-rows-[0fr]")
+      this.contentTarget.classList.add("lui:grid-rows-[1fr]")
+    } else {
+      this.contentTarget.classList.remove("lui:grid-rows-[1fr]")
+      this.contentTarget.classList.add("lui:grid-rows-[0fr]")
+    }
+
+    this.element.setAttribute("data-state", this.openValue ? "open" : "closed")
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/command_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "item", "empty", "list"]
+
+  connect() {
+    this.activeIndex = -1
+    this.filter()
+  }
+
+  filter() {
+    const query = this.inputTarget.value.trim().toLowerCase()
+    let visibleCount = 0
+
+    this.itemTargets.forEach((item) => {
+      const match = item.textContent.toLowerCase().includes(query)
+      item.classList.toggle("lui:hidden", !match)
+      if (match) visibleCount++
+    })
+
+    this.emptyTarget.classList.toggle("lui:hidden", visibleCount > 0)
+    this.activeIndex = -1
+    this.setActive(this.visibleItems[0])
+  }
+
+  onKeydown(event) {
+    const items = this.visibleItems
+    if (items.length === 0) return
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this.activeIndex = Math.min(this.activeIndex + 1, items.length - 1)
+      this.setActive(items[this.activeIndex])
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this.activeIndex = Math.max(this.activeIndex - 1, 0)
+      this.setActive(items[this.activeIndex])
+    } else if (event.key === "Enter") {
+      event.preventDefault()
+      const active = items[this.activeIndex] || items[0]
+      if (active) this.commit(active)
+    }
+  }
+
+  activate(event) {
+    const items = this.visibleItems
+    this.activeIndex = items.indexOf(event.currentTarget)
+    this.setActive(event.currentTarget)
+  }
+
+  select(event) {
+    this.commit(event.currentTarget)
+  }
+
+  commit(item) {
+    this.dispatch("select", { detail: { value: item.getAttribute("data-value") } })
+  }
+
+  setActive(item) {
+    this.itemTargets.forEach((el) => el.removeAttribute("data-active"))
+    if (item) {
+      item.setAttribute("data-active", "")
+      this.activeIndex = this.visibleItems.indexOf(item)
+      item.scrollIntoView({ block: "nearest" })
+    }
+  }
+
+  get visibleItems() {
+    return this.itemTargets.filter((item) => !item.classList.contains("lui:hidden"))
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/context_menu_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, flip, shift, offset } from "@floating-ui/dom"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  connect() {
+    this.onDocPointer = this.onDocPointer.bind(this)
+    this.onKeydown = this.onKeydown.bind(this)
+  }
+
+  disconnect() {
+    this.close()
+  }
+
+  open(event) {
+    event.preventDefault()
+
+    const virtual = {
+      getBoundingClientRect: () => ({
+        width: 0,
+        height: 0,
+        x: event.clientX,
+        y: event.clientY,
+        top: event.clientY,
+        left: event.clientX,
+        right: event.clientX,
+        bottom: event.clientY
+      })
+    }
+
+    this.contentTarget.classList.remove("lui:hidden")
+
+    computePosition(virtual, this.contentTarget, {
+      strategy: "fixed",
+      placement: "right-start",
+      middleware: [offset(2), flip(), shift({ padding: 8 })]
+    }).then(({ x, y }) => {
+      Object.assign(this.contentTarget.style, { position: "fixed", left: `${x}px`, top: `${y}px` })
+    })
+
+    document.addEventListener("pointerdown", this.onDocPointer, true)
+    document.addEventListener("keydown", this.onKeydown)
+  }
+
+  close() {
+    if (this.hasContentTarget) this.contentTarget.classList.add("lui:hidden")
+    document.removeEventListener("pointerdown", this.onDocPointer, true)
+    document.removeEventListener("keydown", this.onKeydown)
+  }
+
+  onDocPointer(event) {
+    if (!this.contentTarget.contains(event.target)) this.close()
+  }
+
+  onKeydown(event) {
+    if (event.key === "Escape") this.close()
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/date_picker_controller.js

@@ -0,0 +1,69 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom"
+
+export default class extends Controller {
+  static targets = ["trigger", "panel", "label", "input"]
+
+  connect() {
+    this.cleanup = null
+  }
+
+  disconnect() {
+    this.stopAutoUpdate()
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open() {
+    if (this.isOpen) return
+    this.panelTarget.classList.remove("lui:hidden")
+    this.cleanup = autoUpdate(this.triggerTarget, this.panelTarget, () => this.reposition())
+  }
+
+  close() {
+    if (!this.hasPanelTarget) return
+    this.panelTarget.classList.add("lui:hidden")
+    this.stopAutoUpdate()
+  }
+
+  closeOnOutside(event) {
+    if (this.isOpen && !this.element.contains(event.target)) this.close()
+  }
+
+  onSelect(event) {
+    const iso = event.detail.date
+    if (this.hasInputTarget) this.inputTarget.value = iso
+    this.labelTarget.textContent = this.format(iso)
+    this.labelTarget.classList.remove("lui:text-foreground-muted")
+    this.close()
+  }
+
+  format(iso) {
+    const date = new Date(`${iso}T00:00:00`)
+    return date.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })
+  }
+
+  reposition() {
+    computePosition(this.triggerTarget, this.panelTarget, {
+      strategy: "absolute",
+      placement: "bottom-start",
+      middleware: [offset(6), flip(), shift({ padding: 8 })]
+    }).then(({ x, y }) => {
+      Object.assign(this.panelTarget.style, { position: "absolute", left: `${x}px`, top: `${y}px` })
+    })
+  }
+
+  stopAutoUpdate() {
+    if (this.cleanup) {
+      this.cleanup()
+      this.cleanup = null
+    }
+  }
+
+  get isOpen() {
+    return this.hasPanelTarget && !this.panelTarget.classList.contains("lui:hidden")
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/dropzone_controller.js

@@ -16,7 +16,7 @@ class Upload {
         const fileContainer = this.controller.filesTarget.querySelector(`#upload_${this.directUpload.id}`)
         const status = fileContainer.querySelector("[data-lui-dropzone-target='status']")
         status.textContent = "Failed. " + error
-        status.classList.add("text-destructive-text")
+        status.classList.add("lui:text-destructive-text")
       } else {
         const hiddenField = document.createElement('input')
         hiddenField.setAttribute("type", "hidden");

data/app/javascript/lightning_ui_kit/controllers/hover_card_controller.js

@@ -0,0 +1,84 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom"
+
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    position: { type: String, default: "bottom" },
+    offset: { type: Number, default: 8 },
+    openDelay: { type: Number, default: 300 },
+    closeDelay: { type: Number, default: 150 }
+  }
+
+  connect() {
+    this.cleanup = null
+    this.openTimeout = null
+    this.closeTimeout = null
+  }
+
+  disconnect() {
+    this.clearTimers()
+    this.stopAutoUpdate()
+  }
+
+  open() {
+    this.clearTimers()
+    this.openTimeout = setTimeout(() => this.show(), this.openDelayValue)
+  }
+
+  scheduleClose() {
+    this.clearTimers()
+    this.closeTimeout = setTimeout(() => this.hide(), this.closeDelayValue)
+  }
+
+  cancelClose() {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+    }
+  }
+
+  show() {
+    this.contentTarget.classList.remove("lui:hidden")
+    this.element.setAttribute("data-state", "open")
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => this.reposition())
+  }
+
+  hide() {
+    this.contentTarget.classList.add("lui:hidden")
+    this.element.setAttribute("data-state", "closed")
+    this.stopAutoUpdate()
+  }
+
+  reposition() {
+    computePosition(this.triggerTarget, this.contentTarget, {
+      strategy: "absolute",
+      placement: this.positionValue,
+      middleware: [offset(this.offsetValue), flip(), shift({ padding: 8 })]
+    }).then(({ x, y }) => {
+      Object.assign(this.contentTarget.style, {
+        position: "absolute",
+        left: `${x}px`,
+        top: `${y}px`
+      })
+    })
+  }
+
+  clearTimers() {
+    if (this.openTimeout) {
+      clearTimeout(this.openTimeout)
+      this.openTimeout = null
+    }
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+    }
+  }
+
+  stopAutoUpdate() {
+    if (this.cleanup) {
+      this.cleanup()
+      this.cleanup = null
+    }
+  }
+}