shadcn_phlexcomponents 0.1.0

data/app/javascript/controllers/dialog_controller.js

@@ -0,0 +1,159 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['trigger', 'content']
+
+  connect() {
+    this.DOMClickListener = this.onDOMClick.bind(this)
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+
+    this.focusableElements = this.contentTarget.querySelectorAll(
+      'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])',
+    )
+
+    this.firstElement = this.focusableElements[0]
+    this.lastElement = this.focusableElements[this.focusableElements.length - 1]
+    this.contentElement = document.querySelector(`#${this.contentTarget.id}`)
+  }
+
+  open() {
+    this.showOverlay()
+    this.contentElement.classList.remove('hidden')
+    this.contentElement.dataset.state = 'open'
+    this.triggerTarget.ariaExpanded = true
+    this.setupEventListeners()
+    this.addInert()
+
+    if (window.innerHeight < document.documentElement.scrollHeight) {
+      document.body.dataset.scrollLocked = 1
+    }
+    document.body.appendChild(this.contentElement)
+    this.firstElement.focus() // must be after appendChild
+  }
+
+  close() {
+    this.contentElement.dataset.state = 'closed'
+    this.triggerTarget.ariaExpanded = false
+    this.cleanupEventListeners()
+    this.removeInert()
+    this.element.appendChild(this.contentElement)
+
+    setTimeout(() => {
+      this.contentElement.classList.add('hidden')
+    }, 100)
+
+    setTimeout(() => {
+      delete document.body.dataset.scrollLocked
+      this.removeOverlay()
+    }, 150)
+
+    this.focusTrigger()
+  }
+
+  focusTrigger() {
+    if (this.triggerTarget.dataset.asChild === 'false') {
+      this.triggerTarget.firstElementChild.focus()
+    } else {
+      this.triggerTarget.focus()
+    }
+  }
+
+  isOpen() {
+    return this.triggerTarget.ariaExpanded === 'true'
+  }
+
+  showOverlay() {
+    const elem = document.createElement('div')
+    elem.classList.add(
+      'fixed',
+      'inset-0',
+      'z-50',
+      'bg-black/80',
+      'data-[state=open]:animate-in',
+      'data-[state=closed]:animate-out',
+      'data-[state=closed]:fade-out-0',
+      'data-[state=open]:fade-in-0',
+      'pointer-events-auto',
+    )
+    elem.dataset.state = 'open'
+    elem.ariaHidden = true
+    elem.dataset.overlay = true
+    document.body.appendChild(elem)
+  }
+
+  removeOverlay() {
+    if (document.querySelector('[data-overlay]')) {
+      document.querySelector('[data-overlay]').remove()
+    }
+  }
+
+  // Global listeners
+  onDOMClick(event) {
+    if (!this.isOpen()) return
+
+    const target = event.target
+    const trigger = event.target.closest(
+      '[data-shadcn-phlexcomponents--dialog-target="trigger"]',
+    )
+
+    if (trigger) return
+
+    const close = target.closest(
+      '[data-action*="shadcn-phlexcomponents--dialog#close"]',
+    )
+
+    if (
+      close ||
+      (target.dataset.action &&
+        target.dataset.action.includes('shadcn-phlexcomponents--dialog#close'))
+    )
+      this.close()
+
+    if (this.contentElement.contains(event.target)) return
+
+    this.close()
+  }
+
+  onDOMKeydown(event) {
+    if (!this.isOpen()) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    } else if (key === 'Tab') {
+      // If Shift + Tab pressed on first element, go to last element
+      if (event.shiftKey && document.activeElement === this.firstElement) {
+        event.preventDefault()
+        this.lastElement.focus()
+      }
+      // If Tab pressed on last element, go to first element
+      else if (!event.shiftKey && document.activeElement === this.lastElement) {
+        event.preventDefault()
+        this.firstElement.focus()
+      }
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('click', this.DOMClickListener)
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('click', this.DOMClickListener)
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  addInert() {
+    Array.from(document.body.children)
+      .filter((el) => el !== this.contentElement)
+      .forEach((el) => el.setAttribute('inert', ''))
+  }
+
+  removeInert() {
+    Array.from(document.body.children)
+      .filter((el) => el.hasAttribute('inert'))
+      .forEach((el) => el.removeAttribute('inert'))
+  }
+}

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -0,0 +1,193 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from '@floating-ui/dom'
+
+export default class extends Controller {
+  static targets = ['trigger', 'contentWrapper', 'content', 'item']
+
+  connect() {
+    this.contentTarget.dataset.state = this.isOpen() ? 'open' : 'closed'
+    this.DOMClickListener = this.onDOMClick.bind(this)
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    this.items = this.itemTargets.filter(
+      (item) => item.dataset.disabled === undefined,
+    )
+  }
+
+  toggle(event) {
+    const key = event.key
+
+    if (this.isOpen()) {
+      this.close()
+    } else {
+      this.open()
+    }
+
+    if (event.currentTarget === this.triggerTarget) {
+      if (['ArrowDown', 'Enter', ' '].includes(key)) {
+        setTimeout(() => {
+          this.focusItem(null, 0)
+        }, 100)
+      }
+    }
+  }
+
+  isOpen() {
+    return this.triggerTarget.ariaExpanded === 'true'
+  }
+
+  open() {
+    this.contentWrapperTarget.classList.remove('hidden')
+    this.triggerTarget.ariaExpanded = true
+    this.triggerTarget.dataset.state = 'open'
+    this.contentTarget.dataset.state = 'open'
+
+    setTimeout(() => {
+      this.focusContent()
+    }, 100)
+
+    this.setupEventListeners()
+
+    if (window.innerHeight < document.documentElement.scrollHeight) {
+      document.body.dataset.scrollLocked = 1
+    }
+
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentWrapperTarget,
+      () => {
+        computePosition(this.triggerTarget, this.contentWrapperTarget, {
+          placement: this.element.dataset.side,
+          strategy: 'fixed',
+          middleware: [flip(), shift(), offset(4)],
+        }).then(({ x, y }) => {
+          Object.assign(this.contentWrapperTarget.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          })
+        })
+      },
+    )
+  }
+
+  close() {
+    this.triggerTarget.ariaExpanded = false
+    this.triggerTarget.dataset.state = 'closed'
+    this.contentTarget.dataset.state = 'closed'
+    this.cleanup()
+    this.cleanupEventListeners()
+    delete document.body.dataset.scrollLocked
+
+    setTimeout(() => {
+      this.contentWrapperTarget.classList.add('hidden')
+    }, 100)
+
+    this.focusTrigger()
+  }
+
+  focusTrigger() {
+    if (this.triggerTarget.dataset.asChild === 'false') {
+      this.triggerTarget.firstElementChild.focus()
+    } else {
+      this.triggerTarget.focus()
+    }
+  }
+
+  focusItem(event = null, index = null) {
+    let itemIndex = index
+
+    if (event) {
+      const item = event.currentTarget || event.target
+      itemIndex = this.items.indexOf(item)
+    }
+
+    this.items.forEach((item, index) => {
+      if (index === itemIndex) {
+        item.tabIndex = 0
+        item.focus()
+      } else {
+        item.tabIndex = -1
+      }
+    })
+  }
+
+  focusFirstItem() {
+    this.focusItem(null, 0)
+  }
+
+  focusLastItem() {
+    this.focusItem(null, this.items.length - 1)
+  }
+
+  focusNextItem(event) {
+    const item = event.currentTarget || event.target
+    const index = this.items.indexOf(item)
+    if (index === this.items.length - 1) return
+
+    this.focusItem(null, index + 1)
+  }
+
+  focusPrevItem(event) {
+    const item = event.currentTarget
+    const index = this.items.indexOf(item)
+    if (index === 0) return
+
+    this.focusItem(null, index - 1)
+  }
+
+  focusContent() {
+    this.items.forEach((item) => {
+      item.blur()
+    })
+
+    this.contentTarget.focus()
+  }
+
+  selectItem(event) {
+    if (!this.isOpen()) return
+
+    const key = event.key
+    const item = event.currentTarget || event.target
+
+    if (key === 'Enter' || key === ' ') {
+      item.click()
+    }
+
+    this.close()
+  }
+
+  // Global listeners
+  onDOMClick(event) {
+    if (!this.isOpen()) return
+    if (this.element.contains(event.target)) return
+
+    this.close()
+  }
+
+  onDOMKeydown(event) {
+    if (!this.isOpen()) return
+
+    const key = event.key
+
+    if (key === 'Tab') event.preventDefault()
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('click', this.DOMClickListener)
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('click', this.DOMClickListener)
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+}

data/app/javascript/controllers/hover_card_controller.js

@@ -0,0 +1,135 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from '@floating-ui/dom'
+
+export default class extends Controller {
+  static targets = ['trigger', 'contentWrapper', 'content']
+
+  connect() {
+    this.DOMClickListener = this.onDOMClick.bind(this)
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+
+    if (this.triggerTarget.dataset.asChild === 'false') {
+      this.triggerTarget.firstElementChild.addEventListener('focus', () => {
+        this.open()
+      })
+
+      this.triggerTarget.firstElementChild.addEventListener('blur', () => {
+        this.close()
+      })
+    } else {
+      this.triggerTarget.addEventListener('focus', () => {
+        this.open()
+      })
+
+      this.triggerTarget.addEventListener('blur', () => {
+        this.close()
+      })
+    }
+  }
+
+  toggle() {
+    if (this.isOpen()) {
+      this.close()
+    } else {
+      this.openWithDelay()
+    }
+  }
+
+  isOpen() {
+    return this.triggerTarget.dataset.state === 'open'
+  }
+
+  open() {
+    this.contentWrapperTarget.classList.remove('hidden')
+    this.triggerTarget.dataset.state = 'open'
+    this.contentTarget.dataset.state = 'open'
+    this.setupEventListeners()
+
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentWrapperTarget,
+      () => {
+        computePosition(this.triggerTarget, this.contentWrapperTarget, {
+          placement: this.element.dataset.side,
+          strategy: 'fixed',
+          middleware: [flip(), shift(), offset(4)],
+        }).then(({ x, y }) => {
+          Object.assign(this.contentWrapperTarget.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          })
+        })
+      },
+    )
+  }
+
+  close() {
+    if (!this.isOpen()) return
+
+    this.triggerTarget.dataset.state = 'closed'
+    this.contentTarget.dataset.state = 'closed'
+    this.cleanup()
+    this.cleanupEventListeners()
+
+    setTimeout(() => {
+      this.contentWrapperTarget.classList.add('hidden')
+    }, 100)
+  }
+
+  clearOpenTimer() {
+    window.clearTimeout(this.openTimer)
+  }
+
+  clearCloseTimer() {
+    window.clearTimeout(this.closeTimer)
+  }
+
+  openWithDelay() {
+    this.clearCloseTimer()
+
+    this.openTimer = setTimeout(() => {
+      this.open()
+    }, 500)
+  }
+
+  closeWithDelay() {
+    window.clearTimeout(this.openTimer)
+
+    this.closeTimer = setTimeout(() => {
+      this.close()
+    }, 300)
+  }
+
+  // Global listeners
+  onDOMClick(event) {
+    if (!this.isOpen()) return
+    if (this.element.contains(event.target)) return
+
+    this.close()
+  }
+
+  onDOMKeydown(event) {
+    if (!this.isOpen()) return
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('click', this.DOMClickListener)
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('click', this.DOMClickListener)
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+}

data/app/javascript/controllers/loading_button_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    const el = this.element
+    const form = el.closest('form')
+
+    if (form && form.dataset.turbo === 'false') {
+      form.addEventListener('submit', () => {
+        form.ariaBusy = true
+        el.disabled = true
+      })
+    }
+  }
+}

data/app/javascript/controllers/popover_controller.js

@@ -0,0 +1,124 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from '@floating-ui/dom'
+
+export default class extends Controller {
+  static targets = ['trigger', 'contentWrapper', 'content', 'menuItem']
+
+  connect() {
+    this.DOMClickListener = this.onDOMClick.bind(this)
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+
+    this.focusableElements = this.contentTarget.querySelectorAll(
+      'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])',
+    )
+
+    this.firstElement = this.focusableElements[0]
+    this.lastElement = this.focusableElements[this.focusableElements.length - 1]
+  }
+
+  toggle() {
+    if (this.isOpen()) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  onDOMClick(event) {
+    if (!this.isOpen()) return
+    if (this.element.contains(event.target)) return
+
+    this.close()
+  }
+
+  onDOMKeydown(event) {
+    if (!this.isOpen()) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    } else if (key === 'Tab') {
+      // If Shift + Tab pressed on first element, go to last element
+      if (event.shiftKey && document.activeElement === this.firstElement) {
+        event.preventDefault()
+        this.lastElement.focus()
+      }
+      // If Tab pressed on last element, go to first element
+      else if (!event.shiftKey && document.activeElement === this.lastElement) {
+        event.preventDefault()
+        this.firstElement.focus()
+      }
+    }
+  }
+
+  isOpen() {
+    return this.triggerTarget.ariaExpanded === 'true'
+  }
+
+  open() {
+    this.contentWrapperTarget.classList.remove('hidden')
+    this.triggerTarget.ariaExpanded = true
+    this.contentTarget.dataset.state = 'open'
+    this.setupEventListeners()
+
+    setTimeout(() => {
+      this.firstElement.focus()
+    }, 100)
+
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentWrapperTarget,
+      () => {
+        computePosition(this.triggerTarget, this.contentWrapperTarget, {
+          placement: this.element.dataset.side,
+          strategy: 'fixed',
+          middleware: [flip(), shift(), offset(4)],
+        }).then(({ x, y }) => {
+          Object.assign(this.contentWrapperTarget.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          })
+        })
+      },
+    )
+  }
+
+  close() {
+    this.contentTarget.dataset.state = 'closed'
+    this.triggerTarget.ariaExpanded = false
+    this.cleanup()
+    this.cleanupEventListeners()
+
+    setTimeout(() => {
+      this.contentWrapperTarget.classList.add('hidden')
+    }, 100)
+
+    this.focusTrigger()
+  }
+
+  focusTrigger() {
+    if (this.triggerTarget.dataset.asChild === 'false') {
+      this.triggerTarget.firstElementChild.focus()
+    } else {
+      this.triggerTarget.focus()
+    }
+  }
+
+  // Global listeners
+  setupEventListeners() {
+    document.addEventListener('click', this.DOMClickListener)
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('click', this.DOMClickListener)
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+}

data/app/javascript/controllers/progress_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['bar']
+
+  static values = {
+    progress: Number,
+  }
+
+  progressValueChanged(value) {
+    this.element.setAttribute('aria-valuenow', value)
+    this.barTarget.style.transform = `translateX(-${100 - value}%)`
+  }
+}