shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -1,171 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import {
-  ANIMATION_OUT_DELAY,
-  FOCUS_DELAY,
-  lockScroll,
-  unlockScroll,
-  initFloatingUi,
-  focusTrigger,
-} from '../utils'
-
-export default class extends Controller {
-  static targets = ['trigger', 'contentWrapper', 'content', 'item']
-
-  connect() {
-    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)
-        }, FOCUS_DELAY)
-      }
-    }
-  }
-
-  isOpen() {
-    return this.triggerTarget.ariaExpanded === 'true'
-  }
-
-  open() {
-    lockScroll()
-    this.contentWrapperTarget.classList.remove('hidden')
-    this.triggerTarget.ariaExpanded = true
-    this.triggerTarget.dataset.state = 'open'
-    this.contentTarget.dataset.state = 'open'
-
-    setTimeout(() => {
-      this.focusContent()
-    }, FOCUS_DELAY * 1.25)
-
-    this.setupEventListeners()
-
-    this.cleanup = initFloatingUi(
-      this.triggerTarget,
-      this.contentWrapperTarget,
-      this.element.dataset.side,
-    )
-  }
-
-  close() {
-    unlockScroll()
-    this.triggerTarget.ariaExpanded = false
-    this.triggerTarget.dataset.state = 'closed'
-    this.contentTarget.dataset.state = 'closed'
-    this.cleanup()
-    this.cleanupEventListeners()
-
-    setTimeout(() => {
-      this.contentWrapperTarget.classList.add('hidden')
-    }, ANIMATION_OUT_DELAY)
-
-    focusTrigger(this.triggerTarget)
-  }
-
-  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/form_field_controller.js

@@ -1,24 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  static targets = ['trigger', 'content', 'item']
-
-  connect() {
-    const hintContainer = this.element.querySelector('[data-remove-label]')
-    const labelContainer = this.element.querySelector('[data-remove-hint]')
-
-    if (hintContainer) {
-      const label = hintContainer.querySelector('label')
-      const hint = hintContainer.querySelector('p')
-      label.remove()
-      hintContainer.replaceWith(hint)
-    }
-
-    if (labelContainer) {
-      const hint = labelContainer.querySelector('p')
-      const label = labelContainer.querySelector('label')
-      hint.remove()
-      labelContainer.replaceWith(label)
-    }
-  }
-}

data/app/javascript/controllers/hover_card_controller.js

@@ -1,21 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import tippy from 'tippy.js'
-import { hideOnEsc } from '../utils'
-
-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],
-      delay: 250,
-    })
-  }
-}

data/app/javascript/controllers/popover_controller.js

@@ -1,113 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import {
-  ANIMATION_OUT_DELAY,
-  FOCUS_DELAY,
-  initFloatingUi,
-  focusTrigger,
-} from '../utils'
-
-export default class extends Controller {
-  static targets = ['trigger', 'contentWrapper', '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]
-  }
-
-  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()
-
-    this.onOpen()
-  }
-
-  onOpen() {
-    setTimeout(() => {
-      if (this.firstElement) {
-        this.firstElement.focus()
-      }
-    }, FOCUS_DELAY * 1.25)
-
-    this.cleanup = initFloatingUi(
-      this.triggerTarget,
-      this.contentWrapperTarget,
-      this.element.dataset.side,
-    )
-  }
-
-  close() {
-    this.contentTarget.dataset.state = 'closed'
-    this.triggerTarget.ariaExpanded = false
-    this.cleanup()
-    this.cleanupEventListeners()
-
-    setTimeout(() => {
-      this.contentWrapperTarget.classList.add('hidden')
-    }, ANIMATION_OUT_DELAY)
-
-    this.onClose()
-  }
-
-  onClose() {
-    focusTrigger(this.triggerTarget)
-  }
-
-  // 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()
-  }
-}

data/app/javascript/controllers/select_controller.js

@@ -1,274 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import {
-  ANIMATION_OUT_DELAY,
-  FOCUS_DELAY,
-  lockScroll,
-  unlockScroll,
-  initFloatingUi,
-  focusTrigger,
-} from '../utils'
-
-export default class extends Controller {
-  static targets = [
-    'trigger',
-    'contentWrapper',
-    'content',
-    'item',
-    'triggerText',
-    'group',
-    'label',
-    'select',
-  ]
-
-  static values = {
-    selected: String,
-  }
-
-  connect() {
-    this.DOMClickListener = this.onDOMClick.bind(this)
-    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
-
-    this.setAriaLabelledby()
-
-    this.items = [
-      ...this.element.querySelectorAll(
-        '[data-select-target="item"]:not([data-disabled])',
-      ),
-    ]
-
-    this.search = ''
-    this.searchTimer = null
-    this.resetSearchTimer = null
-  }
-
-  toggle() {
-    if (this.isOpen()) {
-      this.close()
-    } else {
-      this.open()
-    }
-  }
-
-  open() {
-    lockScroll()
-    const triggerWidth = this.triggerTarget.offsetWidth
-    this.contentWrapperTarget.classList.remove('hidden')
-
-    const contentWrapperWidth = this.contentWrapperTarget.offsetWidth
-
-    if (contentWrapperWidth < triggerWidth) {
-      this.contentWrapperTarget.style.width = `${triggerWidth}px`
-    }
-
-    this.triggerTarget.ariaExpanded = true
-    this.contentTarget.dataset.state = 'open'
-
-    setTimeout(() => {
-      if (this.selectedValue) {
-        const item = this.itemTargets.find(
-          (i) => i.dataset.value === this.selectedValue,
-        )
-
-        if (item && !item.dataset.disabled) {
-          item.focus()
-        } else {
-          this.contentTarget.focus()
-        }
-      } else {
-        this.focusItem(null, 0)
-      }
-    }, FOCUS_DELAY * 1.25)
-
-    this.setupEventListeners()
-    this.cleanup = initFloatingUi(
-      this.triggerTarget,
-      this.contentWrapperTarget,
-      'bottom',
-    )
-  }
-
-  close() {
-    unlockScroll()
-    this.contentTarget.dataset.state = 'closed'
-    this.triggerTarget.ariaExpanded = false
-    this.cleanup()
-    this.cleanupEventListeners()
-
-    setTimeout(() => {
-      this.contentWrapperTarget.classList.add('hidden')
-    }, ANIMATION_OUT_DELAY)
-
-    focusTrigger(this.triggerTarget)
-  }
-
-  setAriaLabelledby() {
-    this.groupTargets.forEach((g) => {
-      const label = g.querySelector('[data-select-target="label"]')
-
-      if (label) {
-        const ariaId = this.element.dataset.ariaId
-        const labelledby = `${ariaId}-${label.textContent
-          .toLowerCase()
-          .trim()
-          .replace(/ /, '-')}`
-        label.setAttribute('id', labelledby)
-        g.setAttribute('aria-labelledby', labelledby)
-      }
-    })
-  }
-
-  isOpen() {
-    return this.triggerTarget.ariaExpanded === 'true'
-  }
-
-  focusItem(event = null, index = null) {
-    let itemIndex = index
-
-    if (event) {
-      const item = event.currentTarget || event.target
-      itemIndex = this.items.indexOf(item)
-    }
-
-    const item = this.items[itemIndex]
-    item.tabIndex = 0
-    item.focus()
-
-    this.items.forEach((item, index) => {
-      if (index !== itemIndex) {
-        item.tabIndex = -1
-      }
-    })
-  }
-
-  focusFirstItem() {
-    this.focusItem(null, 0)
-  }
-
-  focusLastItem() {
-    this.focusItem(null, this.items.length - 1)
-  }
-
-  focusPrevItem(event) {
-    const item = event.currentTarget || event.target
-    const index = this.items.indexOf(item)
-
-    if (index - 1 >= 0) {
-      this.focusItem(null, index - 1)
-    }
-  }
-
-  focusNextItem(event) {
-    const item = event.currentTarget || event.target
-    const index = this.items.indexOf(item)
-
-    if (index + 1 < this.items.length) {
-      this.focusItem(null, index + 1)
-    }
-  }
-
-  selectItem(event) {
-    const item = event.currentTarget || event.target
-    const value = item.dataset.value
-    this.selectedValue = value
-    this.close()
-  }
-
-  focusContent() {
-    this.items.forEach((item) => {
-      item.blur()
-    })
-
-    this.contentTarget.focus()
-  }
-
-  selectedValueChanged(value) {
-    const item = this.itemTargets.find((i) => i.dataset.value === value)
-
-    if (item) {
-      this.triggerTextTarget.textContent = item.textContent
-
-      this.itemTargets.forEach((i) => {
-        if (i.dataset.value === value) {
-          i.setAttribute('aria-selected', 'true')
-        } else {
-          i.setAttribute('aria-selected', 'false')
-        }
-      })
-
-      this.selectTarget.value = value
-    }
-
-    this.triggerTarget.dataset.hasValue = !!value && value.length > 0
-
-    const placeholder = this.triggerTarget.dataset.placeholder
-
-    if (placeholder && this.triggerTarget.dataset.hasValue === 'false') {
-      this.triggerTextTarget.textContent = placeholder
-    }
-  }
-
-  handleSearchChange(search) {
-    const item = this.items.find((i) =>
-      i.textContent.toLowerCase().startsWith(search.toLowerCase()),
-    )
-
-    if (item) {
-      item.focus()
-    }
-  }
-
-  handleSearch(key) {
-    const search = this.search + key
-    this.search = search
-
-    window.clearTimeout(this.searchTimer)
-    window.clearTimeout(this.resetSearchTimer)
-
-    if (search !== '') {
-      this.searchTimer = window.setTimeout(() => {
-        this.handleSearchChange(search)
-      }, 150)
-
-      this.resetSearchTimer = window.setTimeout(() => {
-        this.search = ''
-      }, 300)
-    }
-  }
-
-  // Global listeners
-  onDOMClick(event) {
-    const htmlFor = event.target.htmlFor
-
-    if (htmlFor === this.triggerTarget.id) return
-    if (event.target) if (this.element.contains(event.target)) return
-
-    this.close()
-  }
-
-  onDOMKeydown(event) {
-    if (!this.isOpen()) return
-
-    const key = event.key
-    const isModifierKey = event.ctrlKey || event.altKey || event.metaKey
-
-    if (key === 'Tab') event.preventDefault()
-
-    if (!isModifierKey && key.length === 1) this.handleSearch(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)
-    window.clearTimeout(this.searchTimer)
-    window.clearTimeout(this.resetSearchTimer)
-  }
-}