shadcn_phlexcomponents 0.1.5 → 0.1.11

data/app/javascript/controllers/select_controller.ts

@@ -0,0 +1,200 @@
+import DropdownMenuRootController from './dropdown_menu_root_controller'
+
+export default class extends DropdownMenuRootController {
+  static targets = [
+    'trigger',
+    'contentContainer',
+    'content',
+    'item',
+    'triggerText',
+    'group',
+    'label',
+    'select',
+  ]
+
+  static values = {
+    isOpen: Boolean,
+    selected: String,
+    setEqualWidth: { type: Boolean, default: true },
+    closestContentSelector: {
+      type: String,
+      default: '[data-select-target="content"]',
+    },
+  }
+
+  declare selectedValue: string
+  declare searchString: string
+  declare searchTimeout: number
+  declare groupTargets: HTMLElement[]
+  declare triggerTextTarget: HTMLElement
+  declare selectTarget: HTMLSelectElement
+  declare itemsInnerText: string[]
+
+  connect() {
+    super.connect()
+    this.itemsInnerText = this.items.map((i) => i.innerText.trim())
+    this.setAriaLabelledby()
+    this.searchString = ''
+  }
+
+  setAriaLabelledby() {
+    this.groupTargets.forEach((g) => {
+      const label = g.querySelector(
+        '[data-select-target="label"]',
+      ) as HTMLElement
+
+      if (label) {
+        label.id = g.getAttribute('aria-labelledby') as string
+      }
+    })
+  }
+
+  onOpenFocusedElement(event: MouseEvent | KeyboardEvent) {
+    let itemIndex = null as number | null
+
+    if (this.selectedValue) {
+      const item = this.itemTargets.find(
+        (i) => i.dataset.value === this.selectedValue,
+      )
+
+      if (item && !item.dataset.disabled) {
+        itemIndex = this.items.indexOf(item)
+      }
+    } else {
+      if (event instanceof KeyboardEvent) {
+        const key = event.key
+
+        if (['ArrowDown', 'Enter', ' '].includes(key)) {
+          itemIndex = 0
+        }
+      }
+    }
+
+    if (itemIndex !== null) {
+      return this.items[itemIndex]
+    } else {
+      return this.contentTarget
+    }
+  }
+
+  onSelect(event: MouseEvent | KeyboardEvent) {
+    const item = event.currentTarget as HTMLElement
+    const value = item.dataset.value as string
+    this.selectedValue = value
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    super.onDOMKeydown(event)
+
+    const { key, altKey, ctrlKey, metaKey } = event
+
+    if (
+      key === 'Backspace' ||
+      key === 'Clear' ||
+      (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)
+    ) {
+      this.handleSearch(key)
+    }
+  }
+
+  // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+  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 = ''
+    }
+  }
+
+  filterItemsInnerText(items: string[], filter: string) {
+    return items.filter((item) => {
+      const matches = item.toLowerCase().indexOf(filter.toLowerCase()) === 0
+      return matches
+    })
+  }
+
+  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
+  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
+    }
+  }
+
+  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
+    }
+  }
+}

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,107 @@
+import { Controller } from '@hotwired/stimulus'
+import noUiSlider, { API, Options } from 'nouislider'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['slider', 'hiddenInput', 'endHiddenInput']
+
+  declare readonly sliderTarget: HTMLInputElement
+  declare readonly hiddenInputTarget: HTMLInputElement
+  declare readonly endHiddenInputTarget: HTMLInputElement
+  declare readonly hasEndHiddenInputTarget: boolean
+  declare onUpdateValuesListener: (values: (string | number)[]) => void
+  declare DOMClickListener: (event: MouseEvent) => void
+  declare range: boolean
+  declare slider: API
+
+  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)
+  }
+
+  onUpdateValues(values: (string | number)[]) {
+    this.hiddenInputTarget.value = `${values[0]}`
+
+    if (this.range && this.hasEndHiddenInputTarget) {
+      this.endHiddenInputTarget.value = `${values[1]}`
+    }
+  }
+
+  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
+    }
+  }
+
+  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()
+        }
+      }
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.DOMClickListener)
+  }
+}

data/app/javascript/controllers/switch_controller.ts

@@ -0,0 +1,30 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['input', 'thumb']
+  static values = {
+    isChecked: Boolean,
+  }
+
+  declare readonly inputTarget: HTMLInputElement
+  declare readonly thumbTarget: HTMLElement
+  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
+    }
+  }
+}

data/app/javascript/controllers/tabs_controller.ts

@@ -0,0 +1,79 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['trigger', 'content']
+  static values = {
+    active: String,
+  }
+
+  declare readonly triggerTargets: HTMLButtonElement[]
+  declare readonly contentTargets: HTMLElement[]
+  declare activeValue: string | undefined
+
+  connect() {
+    if (!this.activeValue) {
+      this.activeValue = this.triggerTargets[0].dataset.value
+    }
+  }
+
+  setActiveTab(event: MouseEvent | KeyboardEvent) {
+    const target = event.currentTarget as HTMLButtonElement
+
+    if (event instanceof MouseEvent) {
+      this.activeValue = target.dataset.value
+    } 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 = index - 1
+
+        if (newIndex < 0) {
+          newIndex = focusableTriggers.length - 1
+        }
+      } else {
+        newIndex = index + 1
+
+        if (newIndex > focusableTriggers.length - 1) {
+          newIndex = 0
+        }
+      }
+
+      this.activeValue = focusableTriggers[newIndex].dataset.value
+      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')
+      }
+    })
+  }
+}

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

@@ -2,31 +2,34 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   initialize() {
-    document.documentElement.classList.toggle(
-      'dark',
+    if (
       localStorage.theme === 'dark' ||
-        (!('theme' in localStorage) &&
-          window.matchMedia('(prefers-color-scheme: dark)').matches),
-    )
+      (!('theme' in localStorage) &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      this.setDarkMode()
+    } else {
+      this.setLightMode()
+    }
   }
 
   toggle() {
     if (document.documentElement.classList.contains('dark')) {
-      localStorage.theme = 'light'
-      document.documentElement.classList.remove('dark')
+      this.setLightMode()
     } else {
-      localStorage.theme = 'dark'
-      document.documentElement.classList.add('dark')
+      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'
   }
 }

data/app/javascript/controllers/toast_container_controller.ts

@@ -0,0 +1,62 @@
+import { Controller } from '@hotwired/stimulus'
+import DOMPurify from 'dompurify'
+
+export default class extends Controller<HTMLElement> {
+  addToast({
+    title,
+    description,
+    action,
+    variant = 'default',
+    duration = 5000,
+  }: {
+    title: string
+    description?: string
+    action?: string
+    variant: string
+    duration?: number
+  }) {
+    const template = (
+      variant === 'default'
+        ? this.element.querySelector('[data-variant="default"]')
+        : this.element.querySelector('[data-variant="destructive"]')
+    ) as HTMLTemplateElement
+
+    const clone = template.content.cloneNode(true) as HTMLElement
+
+    const toastTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast"]',
+    ) as HTMLElement
+    toastTemplate.dataset.duration = String(duration)
+
+    const titleTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-title"]',
+    ) as HTMLElement
+    const descriptionTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-description"]',
+    ) as HTMLElement
+    const actionTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-action"]',
+    ) as HTMLElement
+
+    titleTemplate.innerHTML = DOMPurify.sanitize(title)
+
+    if (description) {
+      descriptionTemplate.innerHTML = DOMPurify.sanitize(description)
+    } else {
+      descriptionTemplate.remove()
+    }
+
+    if (action) {
+      const element = document.createElement('div')
+      element.innerHTML = DOMPurify.sanitize(action)
+      const actionElement = element.firstElementChild as HTMLElement
+      const classes = actionTemplate.classList
+      actionElement.classList.add(...classes)
+      actionTemplate.replaceWith(actionElement)
+    } else {
+      actionTemplate.remove()
+    }
+
+    this.element.append(clone)
+  }
+}

data/app/javascript/controllers/toast_controller.ts

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+import { ANIMATION_OUT_DELAY } from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  declare duration: number
+  declare closeTimeout: number
+
+  connect() {
+    this.duration = Number(this.element.dataset.duration)
+    this.close()
+  }
+
+  cancelClose() {
+    window.clearTimeout(this.closeTimeout)
+  }
+
+  close() {
+    if (this.duration > 0) {
+      this.closeTimeout = window.setTimeout(() => {
+        this.element.dataset.state = 'closed'
+
+        setTimeout(() => {
+          this.element.remove()
+        }, ANIMATION_OUT_DELAY)
+      }, this.duration)
+    }
+  }
+}

data/app/javascript/controllers/tooltip_controller.ts

@@ -0,0 +1,98 @@
+import { Controller } from '@hotwired/stimulus'
+import { useHover } from 'stimulus-use'
+import { initFloatingUi, ANIMATION_OUT_DELAY } from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['trigger', 'content', 'contentContainer', 'arrow']
+  static values = {
+    isOpen: Boolean,
+  }
+
+  declare isOpenValue: boolean
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly arrowTarget: HTMLElement
+  declare closeTimeout: number
+  declare cleanup: () => void
+  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)
+  }
+
+  closeImmediately() {
+    this.isOpenValue = false
+  }
+
+  // for useHover
+  mouseEnter() {
+    this.open()
+  }
+
+  // for useHover
+  mouseLeave() {
+    this.close()
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (['Escape', 'Enter', ' '].includes(key)) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      this.closeImmediately()
+    }
+  }
+
+  isOpenValueChanged(isOpen: boolean) {
+    if (isOpen) {
+      this.contentContainerTarget.classList.remove('hidden')
+      this.contentTarget.dataset.state = 'open'
+      this.setupEventListeners()
+
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        arrowElement: this.arrowTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 8,
+      })
+    } else {
+      this.contentTarget.dataset.state = 'closed'
+      this.cleanupEventListeners()
+
+      setTimeout(() => {
+        this.contentContainerTarget.classList.add('hidden')
+      }, ANIMATION_OUT_DELAY)
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+}