shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/javascript/controllers/dropdown_menu_sub_controller.ts

@@ -0,0 +1,152 @@
+import { Controller } from '@hotwired/stimulus'
+import { initFloatingUi } from '../utils/floating_ui'
+import {
+  ON_OPEN_FOCUS_DELAY,
+  getSameLevelItems,
+  showContent,
+  hideContent,
+  getStimulusInstance,
+} from '../utils'
+
+const DropdownMenuSubController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['trigger', 'contentContainer', 'content']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+  }
+  declare isOpenValue: boolean
+
+  // custom properties
+  declare closeTimeout: number
+  declare items: HTMLElement[]
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+
+  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: '[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() {
+    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"]',
+      ) as HTMLElement
+
+      if (subMenu) {
+        const subMenuController = getStimulusInstance<DropdownMenuSub>(
+          'dropdown-menu-sub',
+          subMenu,
+        )
+
+        if (subMenuController) {
+          subMenuController.closeImmediately()
+          setTimeout(() => {
+            subMenuController.triggerTarget.focus()
+          }, 100)
+        }
+      }
+    }
+  }
+
+  closeImmediately() {
+    this.isOpenValue = false
+  }
+
+  isOpenValueChanged(isOpen: 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,
+        })
+      })
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+  }
+}
+
+type DropdownMenuSub = InstanceType<typeof DropdownMenuSubController>
+
+export { DropdownMenuSubController }
+export type { DropdownMenuSub }

data/app/javascript/controllers/form_field_controller.ts

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+const FormFieldController = 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)
+    }
+  }
+}
+
+type FormField = InstanceType<typeof FormFieldController>
+
+export { FormFieldController }
+export type { FormField }

data/app/javascript/controllers/hover_card_controller.ts

@@ -0,0 +1,103 @@
+import { Controller } from '@hotwired/stimulus'
+import { useHover } from 'stimulus-use'
+import { initFloatingUi } from '../utils/floating_ui'
+import { showContent, hideContent } from '../utils'
+
+const HoverCardController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['trigger', 'content', 'contentContainer']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+  }
+  declare isOpenValue: boolean
+
+  // custom properties
+  declare closeTimeout: number
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => 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()
+  }
+
+  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()
+  }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
+}
+
+type HoverCard = InstanceType<typeof HoverCardController>
+
+export { HoverCardController }
+export type { HoverCard }

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

@@ -1,15 +1,20 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller {
+const LoadingButtonController = 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
       })
     }
   }
 }
+
+type LoadingButton = InstanceType<typeof LoadingButtonController>
+
+export { LoadingButtonController }
+export type { LoadingButton }

data/app/javascript/controllers/popover_controller.ts

@@ -0,0 +1,118 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+import { initFloatingUi } from '../utils/floating_ui'
+import {
+  focusTrigger,
+  getFocusableElements,
+  showContent,
+  hideContent,
+  onClickOutside,
+  handleTabNavigation,
+  focusElement,
+} from '../utils'
+
+const PopoverController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['trigger', 'contentContainer', 'content']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+
+  // values
+  static values = { isOpen: Boolean }
+  declare isOpenValue: boolean
+
+  // custom properties
+  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
+  }
+
+  close() {
+    this.isOpenValue = false
+  }
+
+  clickOutside(event: MouseEvent) {
+    onClickOutside(this, event)
+  }
+
+  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: 4,
+      })
+
+      const focusableElements = getFocusableElements(this.contentTarget)
+      focusElement(focusableElements[0])
+
+      this.setupEventListeners()
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    } else if (key === 'Tab') {
+      handleTabNavigation(this.contentTarget, event)
+    }
+  }
+}
+
+type Popover = InstanceType<typeof PopoverController>
+
+export { PopoverController }
+export type { Popover }

data/app/javascript/controllers/progress_controller.ts

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

data/app/javascript/controllers/radio_group_controller.ts

@@ -0,0 +1,113 @@
+import { Controller } from '@hotwired/stimulus'
+
+const RadioGroupController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['item', 'input', 'indicator']
+  declare readonly itemTargets: HTMLInputElement[]
+  declare readonly inputTargets: HTMLInputElement[]
+  declare readonly indicatorTargets: HTMLInputElement[]
+
+  // values
+  static values = {
+    selected: String,
+  }
+  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
+  }
+
+  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
+  }
+
+  preventDefault(event: KeyboardEvent) {
+    event.preventDefault()
+  }
+
+  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()
+  }
+}
+
+type RadioGroup = InstanceType<typeof RadioGroupController>
+
+export { RadioGroupController }
+export type { RadioGroup }