lightning_ui_kit 0.3.5 → 0.4.0

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
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "trigger", "content"]
+
+  connect() {
+    this.openMenu = null
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    const menu = event.currentTarget.closest('[data-lui-menubar-target="menu"]')
+    if (this.isOpen(menu)) {
+      this.closeAll()
+    } else {
+      this.open(menu)
+    }
+  }
+
+  // Desktop menubar behaviour: once a menu is open, hovering a sibling switches to it.
+  onHover(event) {
+    if (this.openMenu && this.openMenu !== event.currentTarget) {
+      this.open(event.currentTarget)
+    }
+  }
+
+  open(menu) {
+    this.closeAll()
+    this.contentIn(menu).classList.remove("lui:hidden")
+    this.triggerIn(menu).setAttribute("data-state", "open")
+    this.openMenu = menu
+  }
+
+  closeAll() {
+    this.contentTargets.forEach((content) => content.classList.add("lui:hidden"))
+    this.triggerTargets.forEach((trigger) => trigger.removeAttribute("data-state"))
+    this.openMenu = null
+  }
+
+  closeOnOutside(event) {
+    if (this.openMenu && !this.element.contains(event.target)) this.closeAll()
+  }
+
+  isOpen(menu) {
+    return !this.contentIn(menu).classList.contains("lui:hidden")
+  }
+
+  contentIn(menu) {
+    return menu.querySelector('[data-lui-menubar-target="content"]')
+  }
+
+  triggerIn(menu) {
+    return menu.querySelector('[data-lui-menubar-target="trigger"]')
+  }
+}

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

@@ -1,45 +1,57 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["dialog", "panel"]
+  static targets = ["dialog", "panel", "overlay"]
+  static classes = ["panelClosed", "overlayClosed"]
   static values = {
-    open: Boolean
+    open: Boolean,
+    dismissable: { type: Boolean, default: true }
   }
 
   connect() {
-    this.dialogTarget.addEventListener('click', this.onClick.bind(this))
+    this.onCancel = this.onCancel.bind(this)
+    this.dialogTarget.addEventListener("cancel", this.onCancel)
     if (this.openValue) {
       this.open()
     }
   }
 
   disconnect() {
-    this.dialogTarget.removeEventListener('click', this.onClick.bind(this))
+    this.dialogTarget.removeEventListener("cancel", this.onCancel)
   }
 
   open() {
     this.dialogTarget.showModal()
+
+    requestAnimationFrame(() => {
+      this.panelTarget.classList.remove(...this.panelClosedClasses)
+      if (this.hasOverlayTarget) {
+        this.overlayTarget.classList.remove(...this.overlayClosedClasses)
+      }
+    })
   }
 
   close() {
-    this.dialogTarget.setAttribute("closing", "")
+    this.panelTarget.classList.add(...this.panelClosedClasses)
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.add(...this.overlayClosedClasses)
+    }
 
-    Promise.all(
-      this.dialogTarget.getAnimations().map((animation) => animation.finished),
-    ).then(() => {
-      this.dialogTarget.removeAttribute("closing")
-      this.dialogTarget.close()
-    })
+    setTimeout(() => this.dialogTarget.close(), 200)
   }
 
-  onClick(event) {
-    if (event.target === this.dialogTarget) {
-      this.dialogTarget.close()
-    }
+  confirm() {
+    this.dispatch("confirm")
+    this.close()
+  }
+
+  onCancel(event) {
+    event.preventDefault()
+    this.close()
   }
 
   closeOnBackdrop(event) {
-    if (this.hasPanelTarget && !this.panelTarget.contains(event.target)) {
+    if (this.dismissableValue && this.hasPanelTarget && !this.panelTarget.contains(event.target)) {
       this.close()
     }
   }

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

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item", "content"]
+  static values = {
+    openDelay: { type: Number, default: 100 },
+    closeDelay: { type: Number, default: 150 }
+  }
+
+  connect() {
+    this.openTimeout = null
+    this.closeTimeout = null
+  }
+
+  disconnect() {
+    this.clearTimers()
+  }
+
+  open(event) {
+    this.clearTimers()
+    const item = event.currentTarget
+    const content = this.contentFor(item)
+    if (!content) {
+      this.closeAll()
+      return
+    }
+    this.openTimeout = setTimeout(() => this.show(item, content), this.openDelayValue)
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    const item = event.currentTarget.closest('[data-lui-navigation-menu-target="item"]')
+    const content = this.contentFor(item)
+    if (!content) return
+
+    if (content.classList.contains("lui:hidden")) {
+      this.show(item, content)
+    } else {
+      this.hide(item, content)
+    }
+  }
+
+  show(item, content) {
+    this.closeAll()
+    content.classList.remove("lui:hidden")
+    this.setState(item, true)
+  }
+
+  hide(item, content) {
+    content.classList.add("lui:hidden")
+    this.setState(item, false)
+  }
+
+  closeAll() {
+    this.contentTargets.forEach((content) => content.classList.add("lui:hidden"))
+    this.itemTargets.forEach((item) => this.setState(item, false))
+  }
+
+  scheduleClose() {
+    this.clearTimers()
+    this.closeTimeout = setTimeout(() => this.closeAll(), this.closeDelayValue)
+  }
+
+  cancelClose() {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+    }
+  }
+
+  setState(item, open) {
+    const trigger = item.querySelector("button")
+    if (!trigger) return
+    trigger.setAttribute("aria-expanded", open ? "true" : "false")
+    if (open) {
+      trigger.setAttribute("data-state", "open")
+    } else {
+      trigger.removeAttribute("data-state")
+    }
+  }
+
+  contentFor(item) {
+    return item.querySelector('[data-lui-navigation-menu-target="content"]')
+  }
+
+  clearTimers() {
+    if (this.openTimeout) {
+      clearTimeout(this.openTimeout)
+      this.openTimeout = null
+    }
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["slot", "hidden"]
+  static values = { length: Number }
+
+  onInput(event) {
+    const slot = event.target
+    // Keep only the last character typed.
+    slot.value = slot.value.slice(-1)
+    if (slot.value) this.focusSlot(this.indexOf(slot) + 1)
+    this.sync()
+  }
+
+  onKeydown(event) {
+    const slot = event.target
+    const index = this.indexOf(slot)
+
+    if (event.key === "Backspace" && !slot.value && index > 0) {
+      event.preventDefault()
+      const prev = this.slotTargets[index - 1]
+      prev.value = ""
+      prev.focus()
+      this.sync()
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      this.focusSlot(index - 1)
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault()
+      this.focusSlot(index + 1)
+    }
+  }
+
+  onPaste(event) {
+    event.preventDefault()
+    const text = event.clipboardData.getData("text").trim()
+    if (!text) return
+
+    const chars = text.split("").slice(0, this.slotTargets.length)
+    chars.forEach((char, i) => {
+      this.slotTargets[i].value = char
+    })
+    this.focusSlot(Math.min(chars.length, this.slotTargets.length - 1))
+    this.sync()
+  }
+
+  onFocus(event) {
+    event.target.select()
+  }
+
+  sync() {
+    const value = this.slotTargets.map((slot) => slot.value).join("")
+    if (this.hasHiddenTarget) this.hiddenTarget.value = value
+    this.dispatch("change", { detail: { value, complete: value.length === this.slotTargets.length } })
+  }
+
+  focusSlot(index) {
+    const slot = this.slotTargets[index]
+    if (slot) slot.focus()
+  }
+
+  indexOf(slot) {
+    return this.slotTargets.indexOf(slot)
+  }
+}

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

@@ -0,0 +1,75 @@
+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 }
+  }
+
+  connect() {
+    this.cleanup = null
+  }
+
+  disconnect() {
+    this.stopAutoUpdate()
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open() {
+    if (this.isOpen) return
+
+    this.contentTarget.classList.remove("lui:hidden")
+    this.element.setAttribute("data-state", "open")
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => this.reposition())
+  }
+
+  close() {
+    if (!this.hasContentTarget) return
+
+    this.contentTarget.classList.add("lui:hidden")
+    this.element.setAttribute("data-state", "closed")
+    this.stopAutoUpdate()
+  }
+
+  hide() {
+    this.close()
+  }
+
+  hideOnClickOutside(event) {
+    if (this.isOpen && !this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  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`
+      })
+    })
+  }
+
+  stopAutoUpdate() {
+    if (this.cleanup) {
+      this.cleanup()
+      this.cleanup = null
+    }
+  }
+
+  get isOpen() {
+    return this.hasContentTarget && !this.contentTarget.classList.contains("lui:hidden")
+  }
+}

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

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panelOne", "handle"]
+  static values = {
+    direction: { type: String, default: "horizontal" },
+    min: { type: Number, default: 10 },
+    max: { type: Number, default: 90 }
+  }
+
+  connect() {
+    this.onMove = this.move.bind(this)
+    this.onUp = this.stop.bind(this)
+    this.dragging = false
+  }
+
+  disconnect() {
+    this.stop()
+  }
+
+  start(event) {
+    event.preventDefault()
+    this.dragging = true
+    document.addEventListener("pointermove", this.onMove)
+    document.addEventListener("pointerup", this.onUp)
+    document.body.style.userSelect = "none"
+  }
+
+  move(event) {
+    if (!this.dragging) return
+
+    const rect = this.element.getBoundingClientRect()
+    let percent
+    if (this.directionValue === "vertical") {
+      percent = ((event.clientY - rect.top) / rect.height) * 100
+    } else {
+      percent = ((event.clientX - rect.left) / rect.width) * 100
+    }
+
+    percent = Math.max(this.minValue, Math.min(this.maxValue, percent))
+    this.panelOneTarget.style.flexBasis = `${percent}%`
+  }
+
+  stop() {
+    if (!this.dragging) return
+    this.dragging = false
+    document.removeEventListener("pointermove", this.onMove)
+    document.removeEventListener("pointerup", this.onUp)
+    document.body.style.userSelect = ""
+  }
+}

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

@@ -7,7 +7,7 @@ export default class extends Controller {
   connect() {
     if (!this.initialShowValue) {
       this.itemTargets.forEach(item => {
-        item.classList.add("hidden");
+        item.classList.add("lui:hidden");
       });
     }
   }
@@ -16,7 +16,7 @@ export default class extends Controller {
     event.preventDefault();
 
     this.itemTargets.forEach(item => {
-      item.classList.toggle("hidden");
+      item.classList.toggle("lui:hidden");
     });
   }
 }

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

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dialog", "panel", "overlay"]
+  static classes = ["panelClosed", "overlayClosed"]
+
+  connect() {
+    this.onCancel = this.onCancel.bind(this)
+    this.dialogTarget.addEventListener("cancel", this.onCancel)
+  }
+
+  disconnect() {
+    this.dialogTarget.removeEventListener("cancel", this.onCancel)
+  }
+
+  open() {
+    this.dialogTarget.showModal()
+
+    // Force a reflow so the closed -> open transition animates.
+    requestAnimationFrame(() => {
+      this.panelTarget.classList.remove(...this.panelClosedClasses)
+      if (this.hasOverlayTarget) {
+        this.overlayTarget.classList.remove(...this.overlayClosedClasses)
+      }
+    })
+  }
+
+  close() {
+    this.panelTarget.classList.add(...this.panelClosedClasses)
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.add(...this.overlayClosedClasses)
+    }
+
+    setTimeout(() => this.dialogTarget.close(), 300)
+  }
+
+  // Intercept native ESC-to-close so it animates out.
+  onCancel(event) {
+    event.preventDefault()
+    this.close()
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "fill", "thumb"]
+
+  connect() {
+    this.update()
+  }
+
+  update() {
+    const input = this.inputTarget
+    const min = parseFloat(input.min || "0")
+    const max = parseFloat(input.max || "100")
+    const value = parseFloat(input.value || "0")
+    const range = max - min
+    const percent = range <= 0 ? 0 : ((value - min) / range) * 100
+
+    if (this.hasFillTarget) this.fillTarget.style.width = `${percent}%`
+    if (this.hasThumbTarget) this.thumbTarget.style.left = `${percent}%`
+    input.setAttribute("aria-valuenow", value)
+    this.dispatch("change", { detail: { value } })
+  }
+}

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

@@ -0,0 +1,82 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["selectAll", "rowCheckbox", "bulkBar", "count"]
+
+  connect() {
+    this.update()
+  }
+
+  toggleAll(event) {
+    const checked = event.currentTarget.checked
+    this.rowCheckboxTargets.forEach((checkbox) => {
+      if (!checkbox.disabled) checkbox.checked = checked
+    })
+    this.update()
+  }
+
+  toggleCell(event) {
+    if (event.target.closest("a, button, input, label")) return
+    event.stopPropagation()
+
+    this.toggleCheckboxIn(event.currentTarget)
+  }
+
+  toggleRow(event) {
+    if (event.target.closest("a, button, input, label")) return
+    if (window.getSelection()?.toString()) return
+
+    this.toggleCheckboxIn(event.currentTarget)
+  }
+
+  toggleCheckboxIn(container) {
+    const checkbox = container.querySelector("input[type=checkbox]")
+    if (!checkbox || checkbox.disabled) return
+
+    checkbox.checked = !checkbox.checked
+    this.update()
+  }
+
+  update() {
+    const total = this.rowCheckboxTargets.length
+    const selected = this.rowCheckboxTargets.filter((checkbox) => checkbox.checked).length
+
+    this.selectAllTargets.forEach((checkbox) => {
+      checkbox.checked = total > 0 && selected === total
+      checkbox.indeterminate = selected > 0 && selected < total
+    })
+
+    this.rowCheckboxTargets.forEach((checkbox) => {
+      const row = checkbox.closest("tr")
+      if (!row) return
+
+      if (checkbox.checked) {
+        row.dataset.selected = ""
+      } else {
+        delete row.dataset.selected
+      }
+    })
+
+    if (this.hasCountTarget) {
+      this.countTarget.textContent = selected
+    }
+
+    if (this.hasBulkBarTarget) {
+      this.bulkBarTarget.classList.toggle("lui:hidden", selected === 0)
+      this.bulkBarTarget.classList.toggle("lui:flex", selected > 0)
+    }
+  }
+
+  visitRow(event) {
+    if (event.target.closest("a, button, input, label")) return
+
+    const url = event.currentTarget.dataset.url
+    if (!url) return
+
+    if (window.Turbo) {
+      window.Turbo.visit(url)
+    } else {
+      window.location.assign(url)
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { pressed: Boolean }
+
+  toggle() {
+    if (this.element.disabled) return
+    this.pressedValue = !this.pressedValue
+  }
+
+  pressedValueChanged() {
+    this.element.setAttribute("data-state", this.pressedValue ? "on" : "off")
+    this.element.setAttribute("aria-pressed", this.pressedValue ? "true" : "false")
+    this.dispatch("change", { detail: { pressed: this.pressedValue } })
+  }
+}