shadcn_phlexcomponents 0.1.5 → 0.1.11

data/app/javascript/controllers/dropdown_menu_sub_controller.ts

@@ -0,0 +1,150 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  initFloatingUi,
+  ON_OPEN_FOCUS_DELAY,
+  getSameLevelItems,
+  showContent,
+  hideContent,
+} from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['trigger', 'contentContainer', 'content']
+
+  static values = {
+    isOpen: Boolean,
+  }
+
+  declare isOpenValue: boolean
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+  declare closeTimeout: number
+  declare items: HTMLElement[]
+
+  connect() {
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: Array.from(
+        this.contentTarget.querySelectorAll(
+          '[data-dropdown-menu-target="item"], [data-dropdown-menu-sub-target="trigger"]',
+        ),
+      ),
+      closestContentSelector: this.closestContentSelector(),
+    })
+  }
+
+  closestContentSelector() {
+    return '[data-dropdown-menu-sub-target="content"]'
+  }
+
+  open(event: MouseEvent | KeyboardEvent | null = null) {
+    clearTimeout(this.closeTimeout)
+    this.isOpenValue = true
+
+    setTimeout(() => {
+      if (event instanceof KeyboardEvent) {
+        const key = event.key
+
+        if (['ArrowRight', 'Enter', ' '].includes(key)) {
+          this.focusItemByIndex(null, 0)
+        }
+      }
+    }, ON_OPEN_FOCUS_DELAY)
+  }
+
+  close() {
+    this.closeTimeout = window.setTimeout(() => {
+      this.isOpenValue = false
+    }, 250)
+  }
+
+  closeOnLeftKeydown(event: KeyboardEvent) {
+    this.closeImmediately()
+    this.triggerTarget.focus()
+  }
+
+  focusItemByIndex(event: KeyboardEvent | null, index: number | null) {
+    if (event) {
+      const key = event.key
+
+      if (key === 'ArrowUp') {
+        this.items[this.items.length - 1].focus()
+      } else {
+        this.items[0].focus()
+      }
+    } else if (index !== null) {
+      this.items[index].focus()
+    }
+  }
+
+  closeParentSubMenu() {
+    const parentContent = this.triggerTarget.closest(
+      '[data-dropdown-menu-sub-target="content"]',
+    )
+
+    if (parentContent) {
+      const subMenu = parentContent.closest(
+        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+      )
+
+      if (subMenu) {
+        const subMenuController =
+          window.Stimulus.getControllerForElementAndIdentifier(
+            subMenu,
+            'dropdown-menu-sub',
+          )
+
+        if (subMenuController) {
+          // @ts-ignore
+          subMenuController.closeImmediately()
+          setTimeout(() => {
+            // @ts-ignore
+            // weird bug where focus goes to body element after closing, and setting focus
+            // manually doesn't work
+            subMenuController.triggerTarget.focus()
+          }, 100)
+        }
+      }
+    }
+  }
+
+  closeImmediately() {
+    this.isOpenValue = false
+  }
+
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+  }
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: -2,
+      })
+    } else {
+      this.closeTimeout = window.setTimeout(() => {
+        hideContent({
+          trigger: this.triggerTarget,
+          content: this.contentTarget,
+          contentContainer: this.contentContainerTarget,
+        })
+      })
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+}

data/app/javascript/controllers/form_field_controller.ts

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

data/app/javascript/controllers/hover_card_controller.ts

@@ -0,0 +1,93 @@
+import { Controller } from '@hotwired/stimulus'
+import { useHover } from 'stimulus-use'
+import { initFloatingUi, showContent, hideContent } from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['trigger', 'content', 'contentContainer']
+  static values = {
+    isOpen: Boolean,
+  }
+
+  declare isOpenValue: boolean
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare cleanup: () => void
+  declare closeTimeout: number
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    useHover(this, { element: this.triggerTarget, dispatchEvent: false })
+  }
+
+  open() {
+    window.clearTimeout(this.closeTimeout)
+    this.isOpenValue = true
+  }
+
+  close() {
+    this.closeTimeout = window.setTimeout(() => {
+      this.isOpenValue = false
+    }, 250)
+  }
+
+  // for useHover
+  mouseEnter() {
+    this.open()
+  }
+
+  // for useHover
+  mouseLeave() {
+    this.close()
+  }
+
+  setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
+
+  isOpenValueChanged(isOpen: boolean) {
+    if (isOpen) {
+      showContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      this.setupEventListeners()
+
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 4,
+      })
+    } else {
+      hideContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+}

data/app/javascript/controllers/{loading_button_controller.js → loading_button_controller.ts}

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

data/app/javascript/controllers/popover_controller.ts

@@ -0,0 +1,141 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+import {
+  initFloatingUi,
+  focusTrigger,
+  ON_OPEN_FOCUS_DELAY,
+  getFocusableElements,
+  showContent,
+  hideContent,
+} from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['trigger', 'contentContainer', 'content']
+  static values = { isOpen: Boolean }
+
+  declare isOpenValue: boolean
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+  }
+
+  toggle() {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.isOpenValue = true
+    this.onOpen()
+
+    setTimeout(() => {
+      this.onOpenFocusedElement().focus()
+    }, ON_OPEN_FOCUS_DELAY)
+  }
+
+  close() {
+    this.isOpenValue = false
+    this.onClose()
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    } else if (key === 'Tab') {
+      const focusableElements = getFocusableElements(this.contentTarget)
+
+      const firstElement = focusableElements[0]
+      const lastElement = focusableElements[focusableElements.length - 1]
+
+      // If Shift + Tab pressed on first element, go to last element
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault()
+        lastElement.focus()
+      }
+      // If Tab pressed on last element, go to first element
+      else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault()
+        firstElement.focus()
+      }
+    }
+  }
+
+  clickOutside(event: MouseEvent) {
+    const target = event.target
+    // Let #toggle to handle state when clicked on trigger
+    if (target === this.triggerTarget) return
+
+    this.close()
+  }
+
+  onOpen() {}
+
+  onOpenFocusedElement() {
+    const focusableElements = getFocusableElements(this.contentTarget)
+    return focusableElements[0]
+  }
+
+  onClose() {}
+
+  referenceElement() {
+    return this.triggerTarget
+  }
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen === true) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      this.cleanup = initFloatingUi({
+        referenceElement: this.referenceElement(),
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 4,
+      })
+      this.setupEventListeners()
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      this.cleanupEventListeners()
+
+      // Only focus trigger when is previously opened
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+}

data/app/javascript/controllers/progress_controller.ts

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['indicator']
+
+  static values = {
+    percent: Number,
+  }
+
+  declare readonly indicatorTarget: HTMLElement
+  declare percentValue: number
+
+  percentValueChanged(value: number) {
+    this.element.setAttribute('aria-valuenow', `${value}`)
+    this.indicatorTarget.style.transform = `translateX(-${100 - value}%)`
+  }
+}

data/app/javascript/controllers/radio_group_controller.ts

@@ -0,0 +1,106 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['item', 'input', 'indicator']
+  static values = {
+    selected: String,
+  }
+
+  declare readonly itemTargets: HTMLInputElement[]
+  declare readonly inputTargets: HTMLInputElement[]
+  declare readonly indicatorTargets: HTMLInputElement[]
+  declare selectedValue: string
+
+  connect() {
+    if (!this.selectedValue) {
+      this.itemTargets[0].tabIndex = 0
+    }
+  }
+
+  select(event: MouseEvent) {
+    const item = event.currentTarget as HTMLInputElement
+    this.selectedValue = item.dataset.value as string
+  }
+
+  preventDefault(event: KeyboardEvent) {
+    event.preventDefault()
+  }
+
+  selectItem(event: KeyboardEvent) {
+    const focusableItems = this.itemTargets.filter(
+      (t) => !t.disabled,
+    ) as HTMLInputElement[]
+
+    const item = event.currentTarget as HTMLInputElement
+    const index = focusableItems.indexOf(item)
+    const key = event.key
+    let newIndex = 0
+
+    if (['ArrowUp', 'ArrowLeft'].includes(key)) {
+      newIndex = index - 1
+
+      if (newIndex < 0) {
+        newIndex = focusableItems.length - 1
+      }
+    } else {
+      newIndex = index + 1
+
+      if (newIndex > focusableItems.length - 1) {
+        newIndex = 0
+      }
+    }
+
+    this.selectedValue = focusableItems[newIndex].dataset.value as string
+  }
+
+  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 focusableItems = this.itemTargets.filter(
+        (t) => !t.disabled,
+      ) as HTMLInputElement[]
+
+      if (focusableItems.length > 0) {
+        focusableItems[0].focus()
+        focusableItems[0].tabIndex = 0
+      }
+    } else {
+      item.focus()
+    }
+  }
+
+  selectedValueChanged(value: string) {
+    this.itemTargets.forEach((item) => {
+      const input = item.querySelector(
+        '[data-radio-group-target="input"]',
+      ) as HTMLInputElement
+      const indicator = item.querySelector(
+        '[data-radio-group-target="indicator"]',
+      ) as HTMLInputElement
+
+      if (value === item.dataset.value) {
+        input.checked = true
+        item.tabIndex = 0
+        item.ariaChecked = 'true'
+        item.dataset.state = 'checked'
+        indicator.classList.remove('hidden')
+      } else {
+        input.checked = false
+        item.tabIndex = -1
+        item.ariaChecked = 'false'
+        item.dataset.state = 'unchecked'
+        indicator.classList.add('hidden')
+      }
+    })
+
+    this.focusItem()
+  }
+}