shadcn_phlexcomponents 0.1.5 → 0.1.11

data/app/javascript/controllers/dialog_controller.js

@@ -1,159 +0,0 @@
-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

@@ -1,193 +0,0 @@
-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 (['Tab', 'Enter', ' '].includes(key)) 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

@@ -1,42 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import tippy from 'tippy.js'
-
-const hideOnEsc = {
-  name: 'hideOnEsc',
-  defaultValue: true,
-  fn({ hide }) {
-    function onKeyDown(event) {
-      if (event.keyCode === 27) {
-        hide()
-      }
-    }
-
-    return {
-      onShow() {
-        document.addEventListener('keydown', onKeyDown)
-      },
-      onHide() {
-        document.removeEventListener('keydown', onKeyDown)
-      },
-    }
-  },
-}
-
-export default class extends Controller {
-  static targets = ['trigger', 'content']
-
-  connect() {
-    const content = this.contentTarget.innerHTML
-
-    this.tippy = tippy(this.triggerTarget, {
-      content: content,
-      allowHTML: true,
-      interactive: true,
-      arrow: false,
-      placement: this.element.dataset.side,
-      plugins: [hideOnEsc],
-      offset: [0, 4],
-      delay: 250,
-    })
-  }
-}

data/app/javascript/controllers/popover_controller.js

@@ -1,124 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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}%)`
-  }
-}

data/app/javascript/controllers/radio_group_controller.js

@@ -1,90 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  static targets = ['item']
-  static values = {
-    selected: String,
-  }
-
-  connect() {
-    if (!this.selectedValue) {
-      this.itemTargets[0].tabIndex = 0
-    }
-
-    this.items = this.itemTargets.filter((i) => !i.disabled)
-  }
-
-  setChecked(event) {
-    const item = event.currentTarget
-    this.selectedValue = item.dataset.value
-  }
-
-  preventDefault(event) {
-    event.preventDefault()
-  }
-
-  setCheckedToNext(event) {
-    const item = event.currentTarget
-    const index = this.items.indexOf(item)
-    let nextIndex = index + 1
-
-    if (index === this.items.length - 1) {
-      nextIndex = 0
-    }
-
-    this.selectedValue = this.items[nextIndex].dataset.value
-  }
-
-  setCheckedToPrev(event) {
-    const item = event.currentTarget
-    const index = this.items.indexOf(item)
-    let prevIndex = index - 1
-
-    if (index === 0) {
-      prevIndex = this.items.length - 1
-    }
-
-    this.selectedValue = this.items[prevIndex].dataset.value
-  }
-
-  focusItem() {
-    const item = this.itemTargets.find(
-      (i) => i.dataset.value === this.selectedValue,
-    )
-
-    if (!item) return
-
-    // Focus first item that is not disabled and allow it to be focused
-    if (item.disabled) {
-      item.tabIndex = -1
-      const items = this.items || this.itemTargets.filter((i) => !i.disabled)
-
-      if (items.length > 0) {
-        items[0].focus()
-        items[0].tabIndex = 0
-      }
-    } else {
-      item.focus()
-    }
-  }
-
-  selectedValueChanged(value) {
-    this.itemTargets.forEach((item) => {
-      const input = item.querySelector('[data-input]')
-
-      if (value === item.dataset.value) {
-        input.checked = true
-        item.tabIndex = 0
-        item.ariaChecked = true
-        item.dataset.checked = true
-      } else {
-        input.checked = false
-        item.tabIndex = -1
-        item.ariaChecked = false
-        item.dataset.checked = false
-      }
-    })
-
-    this.focusItem()
-  }
-}