shadcn_phlexcomponents 0.1.0

data/app/javascript/controllers/radio_group_controller.js

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

@@ -0,0 +1,294 @@
+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',
+    '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-shadcn-phlexcomponents--select-target="item"]:not([data-disabled])',
+      ),
+    ]
+
+    this.search = ''
+    this.searchTimer = null
+    this.resetSearchTimer = null
+  }
+
+  // Methods
+  toggle() {
+    if (this.isOpen()) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    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'
+
+    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)
+    }
+
+    if (window.innerHeight < document.documentElement.scrollHeight) {
+      document.body.dataset.scrollLocked = 1
+    }
+    this.setupEventListeners()
+
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentWrapperTarget,
+      () => {
+        computePosition(this.triggerTarget, this.contentWrapperTarget, {
+          placement: 'bottom',
+          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()
+    delete document.body.dataset.scrollLocked
+
+    setTimeout(() => {
+      this.contentWrapperTarget.classList.add('hidden')
+    }, 100)
+
+    if (this.triggerTarget.nodeName === 'DIV') {
+      this.triggerTarget.firstElementChild.focus()
+    } else {
+      this.triggerTarget.focus()
+    }
+  }
+
+  setAriaLabelledby() {
+    this.groupTargets.forEach((g) => {
+      const label = g.querySelector(
+        '[data-shadcn-phlexcomponents--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
+    }
+
+    delete this.triggerTarget.dataset.placeholder
+    const hasPlaceholder = this.triggerTarget.dataset.placeholderText
+
+    if (hasPlaceholder) {
+      if (!value || value.length === 0) {
+        this.triggerTarget.dataset.placeholder = true
+        this.triggerTextTarget.textContent = hasPlaceholder
+      }
+    }
+  }
+
+  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/sheet_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--sheet-target="trigger"]',
+    )
+
+    if (trigger) return
+
+    const close = target.closest(
+      '[data-action*="shadcn-phlexcomponents--sheet#close"]',
+    )
+
+    if (
+      close ||
+      (target.dataset.action &&
+        target.dataset.action.includes('shadcn-phlexcomponents--sheet#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/sidebar_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['panel', 'panelOffset']
+
+  connect() {
+    console.log('sidebar coonnected')
+    this.width = this.element.offsetWidth
+  }
+
+  toggle() {
+    if (this.isOpen()) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.element.dataset.state = 'expanded'
+    this.element.dataset.collapsible = ''
+    this.panelTarget.style.removeProperty('left')
+    this.panelOffsetTarget.style.removeProperty('width')
+  }
+
+  close() {
+    this.element.dataset.state = 'collapsed'
+    this.element.dataset.collapsible = 'offcanvas'
+    this.panelTarget.style.left = `-${this.width}px`
+    this.panelOffsetTarget.style.width = 0
+  }
+
+  isOpen() {
+    return this.element.dataset.state === 'expanded'
+  }
+}

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -0,0 +1,15 @@
+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}`),
+      'shadcn-phlexcomponents--sidebar',
+    )
+    sidebar.toggle()
+  }
+}

data/app/javascript/controllers/switch_controller.js

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

@@ -0,0 +1,73 @@
+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')
+      }
+    })
+  }
+}