ruby_ui_admin 0.1.0

data/public/ruby-ui-admin-assets/controllers/ruby_ui--combobox_controller.js

@@ -0,0 +1,197 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--combobox"
+// Vendored from RubyUI; the only change is `updatePopoverPosition`, which uses plain
+// getBoundingClientRect positioning instead of @floating-ui/dom (so no bundler/extra dep).
+export default class extends Controller {
+  static values = {
+    term: String,
+    minPopoverWidth: { type: Number, default: 240 }
+  }
+
+  static targets = [
+    "input",
+    "toggleAll",
+    "popover",
+    "item",
+    "emptyState",
+    "searchInput",
+    "trigger",
+    "triggerContent"
+  ]
+
+  selectedItemIndex = null
+
+  connect() {
+    this.updateTriggerContent()
+  }
+
+  disconnect() {
+    if (this.cleanup) { this.cleanup() }
+  }
+
+  handlePopoverToggle(event) {
+    this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'
+  }
+
+  inputChanged(e) {
+    this.updateTriggerContent()
+
+    if (e.target.type == "radio") {
+      this.closePopover()
+    }
+
+    if (this.hasToggleAllTarget && !e.target.checked) {
+      this.toggleAllTarget.checked = false
+    }
+  }
+
+  inputContent(input) {
+    return input.dataset.text || input.parentElement.textContent
+  }
+
+  toggleAllItems() {
+    const isChecked = this.toggleAllTarget.checked
+    this.inputTargets.forEach(input => input.checked = isChecked)
+    this.updateTriggerContent()
+  }
+
+  updateTriggerContent() {
+    const checkedInputs = this.inputTargets.filter(input => input.checked)
+
+    if (checkedInputs.length === 0) {
+      this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder
+    } else if (this.termValue && checkedInputs.length > 1) {
+      this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`
+    } else {
+      this.triggerContentTarget.innerText = checkedInputs.map((input) => this.inputContent(input)).join(", ")
+    }
+  }
+
+  togglePopover(event) {
+    event.preventDefault()
+
+    if (this.triggerTarget.ariaExpanded === "true") {
+      this.closePopover()
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  openPopover(event) {
+    if (event) event.preventDefault()
+
+    this.updatePopoverPosition()
+    this.updatePopoverWidth()
+    this.triggerTarget.ariaExpanded = "true"
+    this.selectedItemIndex = null
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
+    this.popoverTarget.showPopover()
+  }
+
+  closePopover() {
+    this.triggerTarget.ariaExpanded = "false"
+    this.popoverTarget.hidePopover()
+  }
+
+  filterItems(e) {
+    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) {
+      return
+    }
+
+    const filterTerm = this.searchInputTarget.value.toLowerCase()
+
+    if (this.hasToggleAllTarget) {
+      if (filterTerm) this.toggleAllTarget.parentElement.classList.add("hidden")
+      else this.toggleAllTarget.parentElement.classList.remove("hidden")
+    }
+
+    let resultCount = 0
+
+    this.selectedItemIndex = null
+
+    this.inputTargets.forEach((input) => {
+      const text = this.inputContent(input).toLowerCase()
+
+      if (text.indexOf(filterTerm) > -1) {
+        input.parentElement.classList.remove("hidden")
+        resultCount++
+      } else {
+        input.parentElement.classList.add("hidden")
+      }
+    })
+
+    this.emptyStateTarget.classList.toggle("hidden", resultCount !== 0)
+  }
+
+  keyDownPressed() {
+    if (this.selectedItemIndex !== null) {
+      this.selectedItemIndex++
+    } else {
+      this.selectedItemIndex = 0
+    }
+
+    this.focusSelectedInput()
+  }
+
+  keyUpPressed() {
+    if (this.selectedItemIndex !== null) {
+      this.selectedItemIndex--
+    } else {
+      this.selectedItemIndex = -1
+    }
+
+    this.focusSelectedInput()
+  }
+
+  focusSelectedInput() {
+    const visibleInputs = this.inputTargets.filter(input => !input.parentElement.classList.contains("hidden"))
+
+    this.wrapSelectedInputIndex(visibleInputs.length)
+
+    visibleInputs.forEach((input, index) => {
+      if (index == this.selectedItemIndex) {
+        input.parentElement.ariaCurrent = "true"
+        input.parentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+      } else {
+        input.parentElement.ariaCurrent = "false"
+      }
+    })
+  }
+
+  keyEnterPressed(event) {
+    event.preventDefault()
+    const option = this.itemTargets.find(item => item.ariaCurrent === "true")
+
+    if (option) {
+      option.click()
+    }
+  }
+
+  wrapSelectedInputIndex(length) {
+    this.selectedItemIndex = ((this.selectedItemIndex % length) + length) % length
+  }
+
+  // Position the popover under the trigger using viewport coordinates. The popover lives in
+  // the top layer (native Popover API), so a fixed position relative to the trigger's rect
+  // places it correctly without a positioning library.
+  updatePopoverPosition() {
+    const rect = this.triggerTarget.getBoundingClientRect()
+    const width = Math.max(this.triggerTarget.offsetWidth, this.minPopoverWidthValue)
+    // Keep the popover within the viewport (pull left when the trigger is near the right edge).
+    let left = rect.left
+    const maxLeft = window.innerWidth - width - 8
+    if (left > maxLeft) left = Math.max(8, maxLeft)
+    Object.assign(this.popoverTarget.style, {
+      position: "fixed",
+      top: `${rect.bottom + 4}px`,
+      left: `${left}px`,
+      margin: "0"
+    })
+  }
+
+  updatePopoverWidth() {
+    const width = Math.max(this.triggerTarget.offsetWidth, this.minPopoverWidthValue)
+    this.popoverTarget.style.width = `${width}px`
+  }
+}

data/public/ruby-ui-admin-assets/controllers/ruby_ui--sheet_content_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  close() {
+    this.element.remove()
+  }
+}

data/public/ruby-ui-admin-assets/controllers/ruby_ui--sheet_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  static values = { open: false }
+
+  connect() {
+    if (this.openValue) this.open()
+  }
+
+  open() {
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
+  }
+}

data/public/ruby-ui-admin-assets/controllers/ruby_ui--sidebar_controller.js

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const State = {
+  EXPANDED: "expanded",
+  COLLAPSED: "collapsed",
+};
+const MOBILE_BREAKPOINT = 768;
+
+export default class extends Controller {
+  static targets = ["sidebar", "mobileSidebar"];
+
+  sidebarTargetConnected() {
+    const { state, collapsibleKind } = this.sidebarTarget.dataset;
+
+    this.open = state === State.EXPANDED;
+    this.collapsibleKind = collapsibleKind;
+  }
+
+  toggle(e) {
+    e.preventDefault();
+
+    if (this.#isMobile()) {
+      this.#openMobileSidebar();
+
+      return;
+    }
+
+    this.open = !this.open;
+    this.onToggle();
+  }
+
+  onToggle() {
+    this.#updateSidebarState();
+    this.#persistSidebarState();
+  }
+
+  #updateSidebarState() {
+    if (!this.hasSidebarTarget) {
+      return;
+    }
+
+    const { dataset } = this.sidebarTarget;
+
+    dataset.state = this.open ? State.EXPANDED : State.COLLAPSED;
+    dataset.collapsible = this.open ? "" : this.collapsibleKind;
+  }
+
+  #persistSidebarState() {
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${this.open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+  }
+
+  #isMobile() {
+    return window.innerWidth < MOBILE_BREAKPOINT;
+  }
+
+  #openMobileSidebar() {
+    if (!this.hasMobileSidebarTarget) {
+      return;
+    }
+
+    this.mobileSidebarTarget.dispatchEvent(
+      new CustomEvent("ruby--ui-sidebar:open"),
+    );
+  }
+}

data/public/ruby-ui-admin-assets/controllers/ruby_ui--toast_controller.js

@@ -0,0 +1,151 @@
+import { Controller } from "@hotwired/stimulus"
+
+const SWIPE_THRESHOLD = 45
+const TIME_BEFORE_UNMOUNT = 200
+
+// Connects to data-controller="ruby-ui--toast"
+export default class extends Controller {
+  static values = {
+    duration: { type: Number, default: 4000 },
+    dismissible: { type: Boolean, default: true },
+    invert: { type: Boolean, default: false },
+    onDismiss: String,
+    onAutoClose: String,
+  }
+
+  connect() {
+    this._timer = null
+    this._startedAt = 0
+    this._remaining = this.durationValue
+    this._paused = false
+    this._swipe = { active: false, x: 0, y: 0, startedAt: 0 }
+
+    this._onPointerDown = this._onPointerDown.bind(this)
+    this._onPointerMove = this._onPointerMove.bind(this)
+    this._onPointerUp = this._onPointerUp.bind(this)
+    this._onPointerEnter = () => this._pause()
+    this._onPointerLeave = () => { if (!this._swipe.active) this._resume() }
+    this._onKeyDown = this._onKeyDown.bind(this)
+    this._onForceDismiss = (e) => { e.stopPropagation(); this._close() }
+    this._onRestart = () => this._restart()
+    this._onRegionPause = () => this._pause()
+    this._onRegionResume = () => this._resume()
+
+    this.element.addEventListener("pointerdown", this._onPointerDown)
+    this.element.addEventListener("pointerenter", this._onPointerEnter)
+    this.element.addEventListener("pointerleave", this._onPointerLeave)
+    this.element.addEventListener("keydown", this._onKeyDown)
+    this.element.addEventListener("ruby-ui:toast:force-dismiss", this._onForceDismiss)
+    this.element.addEventListener("ruby-ui:toast:restart", this._onRestart)
+    document.addEventListener("ruby-ui:toast:pause", this._onRegionPause)
+    document.addEventListener("ruby-ui:toast:resume", this._onRegionResume)
+
+    requestAnimationFrame(() => {
+      this.element.dataset.state = "open"
+      this._start()
+    })
+  }
+
+  disconnect() {
+    this._clearTimer()
+    this.element.removeEventListener("pointerdown", this._onPointerDown)
+    this.element.removeEventListener("pointerenter", this._onPointerEnter)
+    this.element.removeEventListener("pointerleave", this._onPointerLeave)
+    this.element.removeEventListener("keydown", this._onKeyDown)
+    this.element.removeEventListener("ruby-ui:toast:force-dismiss", this._onForceDismiss)
+    this.element.removeEventListener("ruby-ui:toast:restart", this._onRestart)
+    document.removeEventListener("ruby-ui:toast:pause", this._onRegionPause)
+    document.removeEventListener("ruby-ui:toast:resume", this._onRegionResume)
+  }
+
+  dismiss(e) {
+    e?.preventDefault()
+    if (!this.dismissibleValue) return
+    this._close("dismiss")
+  }
+
+  _close(reason) {
+    if (this.element.dataset.state === "closing") return
+    this.element.dataset.state = "closing"
+    this.element.dispatchEvent(new CustomEvent(reason === "auto" ? "ruby-ui:toast:auto-close" : "ruby-ui:toast:dismiss", { bubbles: true, detail: { id: this.element.id } }))
+    setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
+  }
+
+  _start() {
+    if (!Number.isFinite(this.durationValue) || this.durationValue <= 0) return
+    this._startedAt = performance.now()
+    this._remaining = this.durationValue
+    this._timer = setTimeout(() => this._close("auto"), this._remaining)
+  }
+
+  _restart() {
+    this._clearTimer()
+    this._start()
+  }
+
+  _pause() {
+    if (this._paused || !this._timer) return
+    this._paused = true
+    clearTimeout(this._timer)
+    this._timer = null
+    this._remaining -= performance.now() - this._startedAt
+  }
+
+  _resume() {
+    if (!this._paused) return
+    this._paused = false
+    if (this._remaining <= 0) return this._close("auto")
+    this._startedAt = performance.now()
+    this._timer = setTimeout(() => this._close("auto"), this._remaining)
+  }
+
+  _clearTimer() {
+    if (this._timer) clearTimeout(this._timer)
+    this._timer = null
+  }
+
+  _onKeyDown(e) {
+    if (e.key === "Escape" && this.dismissibleValue) this.dismiss(e)
+  }
+
+  _onPointerDown(e) {
+    if (!this.dismissibleValue) return
+    if (e.target.closest("button")) return
+    try { this.element.setPointerCapture(e.pointerId) } catch {}
+    this._swipe = { active: true, x: e.clientX, y: e.clientY, startedAt: performance.now(), pointerId: e.pointerId }
+    this.element.dataset.swipe = "start"
+    this.element.addEventListener("pointermove", this._onPointerMove)
+    this.element.addEventListener("pointerup", this._onPointerUp)
+    this.element.addEventListener("pointercancel", this._onPointerUp)
+  }
+
+  _onPointerMove(e) {
+    const dx = e.clientX - this._swipe.x
+    const dy = e.clientY - this._swipe.y
+    this.element.dataset.swipe = "move"
+    this.element.style.transform = `translate(${dx}px, ${dy}px)`
+  }
+
+  _onPointerUp(e) {
+    const dx = e.clientX - this._swipe.x
+    const dy = e.clientY - this._swipe.y
+    const dist = Math.hypot(dx, dy)
+    const dt = performance.now() - this._swipe.startedAt
+    const velocity = dist / Math.max(dt, 1)
+    this.element.removeEventListener("pointermove", this._onPointerMove)
+    this.element.removeEventListener("pointerup", this._onPointerUp)
+    this.element.removeEventListener("pointercancel", this._onPointerUp)
+    this._swipe.active = false
+    if (dist > SWIPE_THRESHOLD || velocity > 0.5) {
+      this.element.style.setProperty("--swipe-end-x", `${Math.sign(dx) * 500}px`)
+      this.element.style.setProperty("--swipe-end-y", `${Math.sign(dy) * 500}px`)
+      this.element.dataset.swipe = "end"
+      this.element.style.transform = ""
+      this._close("dismiss")
+    } else {
+      this.element.dataset.swipe = "cancel"
+      this.element.style.transform = ""
+      this._resume()
+    }
+  }
+}