shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/javascript/controllers/select_controller.ts

@@ -0,0 +1,341 @@
+import { useClickOutside } from 'stimulus-use'
+import { onKeydown, focusItemByIndex } from './dropdown_menu_controller'
+import { initFloatingUi } from '../utils/floating_ui'
+import {
+  getSameLevelItems,
+  focusTrigger,
+  hideContent,
+  showContent,
+  lockScroll,
+  unlockScroll,
+  onClickOutside,
+  setGroupLabelsId,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  focusElement,
+} from '../utils'
+import { Controller } from '@hotwired/stimulus'
+
+const SelectController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = [
+    'trigger',
+    'contentContainer',
+    'content',
+    'item',
+    'triggerText',
+    'group',
+    'select',
+  ]
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly itemTargets: HTMLElement[]
+  declare triggerTextTarget: HTMLElement
+  declare groupTargets: HTMLElement[]
+  declare selectTarget: HTMLSelectElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+    selected: String,
+  }
+  declare isOpenValue: boolean
+  declare selectedValue: string
+
+  // custom properties
+  declare searchString: string
+  declare searchTimeout: number
+  declare itemsInnerText: string[]
+  declare items: HTMLElement[]
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+
+  connect() {
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: this.itemTargets,
+      closestContentSelector: '[data-select-target="content"]',
+    })
+    this.itemsInnerText = this.items.map((i) => i.innerText.trim())
+    this.searchString = ''
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    setGroupLabelsId(this)
+  }
+
+  toggle(event: MouseEvent) {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open(event)
+    }
+  }
+
+  open(event: MouseEvent | KeyboardEvent) {
+    this.isOpenValue = true
+
+    let elementToFocus = null as HTMLElement | null
+
+    if (this.selectedValue) {
+      const item = this.itemTargets.find(
+        (i) => i.dataset.value === this.selectedValue,
+      )
+
+      if (item && !item.dataset.disabled) {
+        elementToFocus = item
+      }
+    }
+
+    if (!elementToFocus) {
+      if (event instanceof KeyboardEvent) {
+        const key = event.key
+
+        if (['ArrowDown', 'Enter', ' '].includes(key)) {
+          elementToFocus = this.items[0]
+        }
+      } else {
+        elementToFocus = this.contentTarget
+      }
+    }
+
+    focusElement(elementToFocus)
+  }
+
+  close() {
+    this.isOpenValue = false
+  }
+
+  onItemFocus(event: FocusEvent) {
+    const item = event.currentTarget as HTMLElement
+    item.tabIndex = 0
+  }
+
+  onItemBlur(event: FocusEvent) {
+    const item = event.currentTarget as HTMLElement
+    item.tabIndex = -1
+  }
+
+  focusItemByIndex(
+    event: KeyboardEvent | null = null,
+    index: number | null = null,
+  ) {
+    focusItemByIndex(this, event, index)
+  }
+
+  focusItem(event: MouseEvent | KeyboardEvent) {
+    const item = event.currentTarget as HTMLElement
+    const index = this.items.indexOf(item)
+
+    if (event instanceof KeyboardEvent) {
+      const key = event.key
+      let newIndex = 0
+
+      if (key === 'ArrowUp') {
+        newIndex = getPreviousEnabledIndex({
+          items: this.items,
+          currentIndex: index,
+          wrapAround: false,
+        })
+      } else {
+        newIndex = getNextEnabledIndex({
+          items: this.items,
+          currentIndex: index,
+          wrapAround: false,
+        })
+      }
+
+      this.items[newIndex].focus()
+    } else {
+      // item mouseover event
+      this.items[index].focus()
+    }
+  }
+
+  focusContent() {
+    this.contentTarget.focus()
+  }
+
+  select(event: MouseEvent | KeyboardEvent) {
+    const item = event.currentTarget as HTMLElement
+    const value = item.dataset.value as string
+    this.selectedValue = value
+    this.close()
+  }
+
+  clickOutside(event: MouseEvent) {
+    onClickOutside(this, event)
+  }
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      lockScroll(this.contentTarget.id)
+
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+        setEqualWidth: true,
+      })
+
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 4,
+      })
+
+      this.setupEventListeners()
+    } else {
+      unlockScroll(this.contentTarget.id)
+
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  selectedValueChanged(value: string) {
+    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
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    onKeydown(this, event)
+
+    const { key, altKey, ctrlKey, metaKey } = event
+
+    if (
+      key === 'Backspace' ||
+      key === 'Clear' ||
+      (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)
+    ) {
+      this.handleSearch(key)
+    }
+  }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+  protected handleSearch(char: string) {
+    const searchString = this.getSearchString(char)
+    const focusedItem = this.items.find(
+      (item) => document.activeElement === item,
+    )
+    const focusedIndex = focusedItem ? this.items.indexOf(focusedItem) : 0
+    const searchIndex = this.getIndexByLetter(searchString, focusedIndex + 1)
+
+    // if a match was found, go to it
+    if (searchIndex >= 0) {
+      this.focusItemByIndex(null, searchIndex)
+    }
+    // if no matches, clear the timeout and search string
+    else {
+      window.clearTimeout(this.searchTimeout)
+      this.searchString = ''
+    }
+  }
+
+  protected filterItemsInnerText(items: string[], filter: string) {
+    return items.filter((item) => {
+      const matches = item.toLowerCase().indexOf(filter.toLowerCase()) === 0
+      return matches
+    })
+  }
+
+  protected getSearchString(char: string) {
+    // reset typing timeout and start new timeout
+    // this allows us to make multiple-letter matches, like a native select
+    if (typeof this.searchTimeout === 'number') {
+      window.clearTimeout(this.searchTimeout)
+    }
+
+    this.searchTimeout = window.setTimeout(() => {
+      this.searchString = ''
+    }, 500)
+
+    // add most recent letter to saved search string
+    this.searchString += char
+    return this.searchString
+  }
+
+  // return the index of an option from an array of options, based on a search string
+  // if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
+  protected getIndexByLetter(filter: string, startIndex: number) {
+    const orderedItems = [
+      ...this.itemsInnerText.slice(startIndex),
+      ...this.itemsInnerText.slice(0, startIndex),
+    ]
+
+    const firstMatch = this.filterItemsInnerText(orderedItems, filter)[0]
+
+    const allSameLetter = (array: string[]) =>
+      array.every((letter) => letter === array[0])
+
+    // first check if there is an exact match for the typed string
+    if (firstMatch) {
+      const index = this.itemsInnerText.indexOf(firstMatch)
+      return index
+    }
+
+    // if the same letter is being repeated, cycle through first-letter matches
+    else if (allSameLetter(filter.split(''))) {
+      const matches = this.filterItemsInnerText(orderedItems, filter[0])
+      const index = this.itemsInnerText.indexOf(matches[0])
+      return index
+    }
+
+    // if no matches, return -1
+    else {
+      return -1
+    }
+  }
+}
+
+type Select = InstanceType<typeof SelectController>
+
+export { SelectController }
+export type { Select }

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

@@ -1,8 +1,12 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller {
+export default class extends Controller<HTMLElement> {
   static targets = ['panel', 'panelOffset']
 
+  declare readonly panelTarget: HTMLElement
+  declare readonly panelOffsetTarget: HTMLElement
+  declare width: number
+
   connect() {
     this.width = this.element.offsetWidth
   }
@@ -26,7 +30,7 @@ export default class extends Controller {
     this.element.dataset.state = 'collapsed'
     this.element.dataset.collapsible = 'offcanvas'
     this.panelTarget.style.left = `-${this.width}px`
-    this.panelOffsetTarget.style.width = 0
+    this.panelOffsetTarget.style.width = `${0}`
   }
 
   isOpen() {

data/app/javascript/controllers/sidebar_trigger_controller.ts

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus'
+import SidebarController from './sidebar_controller'
+
+export default class extends Controller<HTMLElement> {
+  declare sidebarId: string | undefined
+
+  connect() {
+    this.sidebarId = this.element.dataset.sidebarId
+  }
+
+  toggle() {
+    const sidebar = this.application.getControllerForElementAndIdentifier(
+      document.querySelector(`#${this.sidebarId}`) as HTMLElement,
+      'sidebar',
+    ) as SidebarController
+
+    if (sidebar) {
+      sidebar.toggle()
+    }
+  }
+}

data/app/javascript/controllers/slider_controller.ts

@@ -0,0 +1,114 @@
+import { Controller } from '@hotwired/stimulus'
+import noUiSlider, { API, Options } from 'nouislider'
+
+const SliderController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['slider', 'hiddenInput', 'endHiddenInput']
+  declare readonly sliderTarget: HTMLInputElement
+  declare readonly hiddenInputTarget: HTMLInputElement
+  declare readonly endHiddenInputTarget: HTMLInputElement
+  declare readonly hasEndHiddenInputTarget: boolean
+
+  // custom properties
+  declare range: boolean
+  declare slider: API
+  declare onUpdateValuesListener: (values: (string | number)[]) => void
+  declare DOMClickListener: (event: MouseEvent) => void
+
+  connect() {
+    this.range = this.element.dataset.range === 'true'
+    this.DOMClickListener = this.onDOMClick.bind(this)
+    this.onUpdateValuesListener = this.onUpdateValues.bind(this)
+    const options = this.getOptions()
+    this.slider = noUiSlider.create(this.sliderTarget, options)
+
+    if (this.element.dataset.disabled === 'true') {
+      this.slider.disable()
+    }
+
+    if (this.element.dataset.id) {
+      const lowerHandle = this.slider.target.querySelector('.noUi-handle-lower')
+      if (lowerHandle) {
+        lowerHandle.id = this.element.dataset.id
+      }
+    }
+    this.slider.on('update', this.onUpdateValuesListener)
+
+    document.addEventListener('click', this.DOMClickListener)
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.DOMClickListener)
+  }
+
+  protected getOptions() {
+    const defaultOptions = {
+      connect: this.range ? true : 'lower',
+      tooltips: true,
+    } as Options
+
+    defaultOptions.range = {
+      min: [parseFloat(this.element.dataset.min || '0')],
+      max: [parseFloat(this.element.dataset.max || '100')],
+    }
+
+    defaultOptions.step = parseFloat(this.element.dataset.step || '1')
+
+    if (this.range) {
+      defaultOptions.start = [
+        parseFloat(this.element.dataset.value || '0'),
+        parseFloat(this.element.dataset.endValue || '0'),
+      ]
+
+      defaultOptions.handleAttributes = [
+        { 'aria-label': 'lower' },
+        { 'aria-label': 'upper' },
+      ]
+    } else {
+      defaultOptions.start = [parseFloat(this.element.dataset.value || '0')]
+      defaultOptions.handleAttributes = [{ 'aria-label': 'lower' }]
+    }
+
+    defaultOptions.orientation = (this.element.dataset.orientation ||
+      'horizontal') as Options['orientation']
+
+    try {
+      return {
+        ...defaultOptions,
+        ...JSON.parse(this.element.dataset.options || ''),
+      }
+    } catch {
+      return defaultOptions
+    }
+  }
+
+  protected onUpdateValues(values: (string | number)[]) {
+    this.hiddenInputTarget.value = `${values[0]}`
+
+    if (this.range && this.hasEndHiddenInputTarget) {
+      this.endHiddenInputTarget.value = `${values[1]}`
+    }
+  }
+
+  protected onDOMClick(event: MouseEvent) {
+    const target = event.target
+
+    // Focus handle of slider when label is clicked.
+    if (target instanceof HTMLLabelElement) {
+      const id = target.getAttribute('for')
+
+      if (id === this.element.dataset.id) {
+        const handle = document.querySelector(`#${id}`) as HTMLElement
+
+        if (handle) {
+          handle.focus()
+        }
+      }
+    }
+  }
+}
+
+type Slider = InstanceType<typeof SliderController>
+
+export { SliderController }
+export type { Slider }

data/app/javascript/controllers/switch_controller.ts

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus'
+
+const SwitchController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['input', 'thumb']
+  declare readonly inputTarget: HTMLInputElement
+  declare readonly thumbTarget: HTMLElement
+
+  // values
+  static values = {
+    isChecked: Boolean,
+  }
+  declare isCheckedValue: boolean
+
+  toggle() {
+    this.isCheckedValue = !this.isCheckedValue
+  }
+
+  isCheckedValueChanged(value: boolean) {
+    if (value) {
+      this.element.ariaChecked = 'true'
+      this.element.dataset.state = 'checked'
+      this.thumbTarget.dataset.state = 'checked'
+      this.inputTarget.checked = true
+    } else {
+      this.element.ariaChecked = 'false'
+      this.element.dataset.state = 'unchecked'
+      this.thumbTarget.dataset.state = 'unchecked'
+      this.inputTarget.checked = false
+    }
+  }
+}
+
+type Switch = InstanceType<typeof SwitchController>
+
+export { SwitchController }
+export type { Switch }

data/app/javascript/controllers/tabs_controller.ts

@@ -0,0 +1,87 @@
+import { Controller } from '@hotwired/stimulus'
+import { getNextEnabledIndex, getPreviousEnabledIndex } from '../utils'
+
+const TabsController = class extends Controller {
+  // targets
+  static targets = ['trigger', 'content']
+  declare readonly triggerTargets: HTMLButtonElement[]
+  declare readonly contentTargets: HTMLElement[]
+
+  // values
+  static values = {
+    active: String,
+  }
+  declare activeValue: string
+
+  connect() {
+    if (!this.activeValue) {
+      this.activeValue = this.triggerTargets[0].dataset.value as string
+    }
+  }
+
+  setActiveTab(event: MouseEvent | KeyboardEvent) {
+    const target = event.currentTarget as HTMLButtonElement
+
+    if (event instanceof MouseEvent) {
+      this.activeValue = target.dataset.value as string
+    } else {
+      const key = event.key
+
+      const focusableTriggers = this.triggerTargets.filter(
+        (t) => !t.disabled,
+      ) as HTMLButtonElement[]
+
+      const index = focusableTriggers.indexOf(target)
+      let newIndex = 0
+
+      if (key === 'ArrowLeft') {
+        newIndex = getPreviousEnabledIndex({
+          items: focusableTriggers,
+          currentIndex: index,
+          wrapAround: true,
+        })
+      } else {
+        newIndex = getNextEnabledIndex({
+          items: focusableTriggers,
+          currentIndex: index,
+          wrapAround: true,
+        })
+      }
+
+      this.activeValue = focusableTriggers[newIndex].dataset.value as string
+      focusableTriggers[newIndex].focus()
+    }
+  }
+
+  activeValueChanged(value: string) {
+    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')
+      }
+    })
+  }
+}
+
+type Tabs = InstanceType<typeof TabsController>
+
+export { TabsController }
+export type { Tabs }

data/app/javascript/controllers/theme_switcher_controller.ts

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus'
+
+const ThemeSwitcherController = class extends Controller {
+  initialize() {
+    if (
+      localStorage.theme === 'dark' ||
+      (!('theme' in localStorage) &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      this.setDarkMode()
+    } else {
+      this.setLightMode()
+    }
+  }
+
+  toggle() {
+    if (document.documentElement.classList.contains('dark')) {
+      this.setLightMode()
+    } else {
+      this.setDarkMode()
+    }
+  }
+
+  setLightMode() {
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+    document.documentElement.style.colorScheme = ''
+  }
+
+  setDarkMode() {
+    localStorage.theme = 'dark'
+    document.documentElement.classList.add('dark')
+    document.documentElement.style.colorScheme = 'dark'
+  }
+}
+
+type ThemeSwitcher = InstanceType<typeof ThemeSwitcherController>
+
+export { ThemeSwitcherController }
+export type { ThemeSwitcher }