shadcn_phlexcomponents 0.1.9 → 0.1.11

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

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -1,15 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  connect() {
-    this.sidebarId = this.element.dataset.sidebarId
-  }
-
-  toggle() {
-    const sidebar = this.application.getControllerForElementAndIdentifier(
-      document.querySelector(`#${this.sidebarId}`),
-      'sidebar',
-    )
-    sidebar.toggle()
-  }
-}

data/app/javascript/controllers/switch_controller.js

@@ -1,24 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  static targets = ['input']
-  static values = {
-    checked: Boolean,
-  }
-
-  toggle() {
-    this.checkedValue = !this.checkedValue
-  }
-
-  checkedValueChanged(value) {
-    if (value === true) {
-      this.element.ariaChecked = true
-      this.element.dataset.checked = true
-      this.inputTarget.checked = true
-    } else {
-      this.element.ariaChecked = false
-      this.element.dataset.checked = false
-      this.inputTarget.checked = false
-    }
-  }
-}

data/app/javascript/controllers/tabs_controller.js

@@ -1,73 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  static targets = ['trigger', 'content']
-  static values = {
-    selected: String,
-  }
-
-  connect() {
-    this.triggers = this.triggerTargets.filter((t) => !t.disabled)
-
-    if (!this.selectedValue) {
-      this.selectedValue = this.triggerTargets[0].dataset.value
-    }
-  }
-
-  setActiveTab(event) {
-    this.selectedValue = event.target.dataset.value
-  }
-
-  setActiveToPrev(event) {
-    const trigger = event.currentTarget
-    const index = this.triggers.indexOf(trigger)
-    let prevIndex = index - 1
-
-    if (index === 0) {
-      prevIndex = this.triggers.length - 1
-    }
-
-    this.selectedValue = this.triggers[prevIndex].dataset.value
-    this.triggers[prevIndex].focus()
-  }
-
-  setActiveToNext(event) {
-    const trigger = event.currentTarget
-    const index = this.triggers.indexOf(trigger)
-    let nextIndex = index + 1
-
-    if (index === this.triggers.length - 1) {
-      nextIndex = 0
-    }
-
-    this.selectedValue = this.triggers[nextIndex].dataset.value
-    this.triggers[nextIndex].focus()
-  }
-
-  selectedValueChanged(value) {
-    this.triggerTargets.forEach((trigger) => {
-      const triggerValue = trigger.dataset.value
-      const content = this.contentTargets.find((c) => {
-        return c.dataset.value === triggerValue
-      })
-
-      if (!content) {
-        throw new Error(
-          `Could not find TabsContent with value "${triggerValue}"`,
-        )
-      }
-
-      if (triggerValue === value) {
-        trigger.ariaSelected = true
-        trigger.tabIndex = 0
-        trigger.dataset.state = 'active'
-        content.classList.remove('hidden')
-      } else {
-        trigger.ariaSelected = false
-        trigger.tabIndex = -1
-        trigger.dataset.state = 'inactive'
-        content.classList.add('hidden')
-      }
-    })
-  }
-}

data/app/javascript/controllers/toast_container_controller.js

@@ -1,22 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  add({ title, description, variant = 'default' }) {
-    const template =
-      variant === 'default'
-        ? this.element.querySelector('[data-variant="default"]')
-        : this.element.querySelector('[data-variant="destructive"]')
-
-    const clone = template.content.cloneNode(true)
-
-    if (title) {
-      clone.querySelector('[data-title]').textContent = title
-    }
-
-    if (description) {
-      clone.querySelector('[data-description]').textContent = description
-    }
-
-    this.element.append(clone)
-  }
-}

data/app/javascript/controllers/toast_controller.js

@@ -1,45 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import { ANIMATION_OUT_DELAY } from '../utils'
-export default class extends Controller {
-  connect() {
-    this.focusableElements = this.element.querySelectorAll('button')
-    this.duration = Number(this.element.dataset.duration)
-
-    this.focusableElements.forEach((el) => {
-      el.addEventListener('focus', () => {
-        this.cancelDismiss()
-      })
-      el.addEventListener('blur', () => {
-        this.dismiss()
-      })
-    })
-
-    this.dismiss()
-  }
-
-  cancelDismiss() {
-    window.clearTimeout(this.timer)
-  }
-
-  close() {
-    this.element.dataset.state = 'closed'
-
-    setTimeout(() => {
-      this.element.remove()
-    }, ANIMATION_OUT_DELAY)
-  }
-
-  dismiss(event) {
-    if (event && event.type === 'mouseout') {
-      if (this.element.contains(document.activeElement)) {
-        return
-      }
-    }
-
-    if (this.duration > 0) {
-      this.timer = setTimeout(() => {
-        this.close()
-      }, this.duration)
-    }
-  }
-}

data/app/javascript/controllers/tooltip_controller.js

@@ -1,40 +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],
-    })
-  }
-}