shadcn_phlexcomponents 0.1.5 → 0.1.11

data/app/javascript/controllers/command_root_controller.ts

@@ -0,0 +1,355 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside, useDebounce } from 'stimulus-use'
+import Fuse from 'fuse.js'
+import { ON_OPEN_FOCUS_DELAY } from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  static targets = [
+    'trigger',
+    'content',
+    'item',
+    'triggerText',
+    'group',
+    'label',
+    'searchInput',
+    'results',
+    'empty',
+    'list',
+  ]
+
+  static values = {
+    isOpen: Boolean,
+    filteredItemIndexes: Array,
+  }
+
+  static debounces = ['search']
+
+  declare readonly emptyTarget: HTMLElement
+  declare readonly triggerTarget: HTMLElement
+  declare readonly listTarget: HTMLElement
+  declare readonly groupTargets: HTMLElement[]
+  declare readonly hasEmptyTarget: boolean
+  declare readonly contentTarget: HTMLElement
+  declare readonly searchInputTarget: HTMLInputElement
+  declare readonly itemTargets: HTMLInputElement[]
+  declare items: HTMLElement[]
+  declare filteredItemIndexesValue: number[]
+  declare itemsInnerText: string[]
+  declare filteredItems: HTMLElement[]
+  declare fuse: Fuse<string>
+  declare isOpenValue: boolean
+  declare resultsTarget: HTMLElement
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare scrollingViaKeyboard: boolean
+  declare keyboardScrollTimeout: number
+
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    useClickOutside(this, { element: this.contentTarget })
+    useDebounce(this)
+    this.items = this.itemTargets.filter(
+      (i) => i.dataset.disabled === undefined,
+    )
+    this.itemsInnerText = this.items.map((i) => i.innerText.trim())
+    this.setAriaLabelledby()
+    this.setItemsGroupIds()
+    this.fuse = new Fuse(this.items.map((i) => i.innerText.trim()))
+    this.filteredItemIndexesValue = Array.from(
+      { length: this.items.length },
+      (_, i) => i,
+    )
+
+    this.filteredItems = this.items
+  }
+
+  setItemsGroupIds() {
+    this.items.forEach((item, index) => {
+      const parent = item.parentElement
+
+      if (parent?.dataset[`${this.identifier}Target`] === 'group') {
+        item.dataset.groupId = parent.getAttribute('aria-labelledby') as string
+      }
+    })
+  }
+
+  setAriaLabelledby() {
+    this.groupTargets.forEach((g) => {
+      const label = g.querySelector(
+        `[data-${this.identifier}-target="label"]`,
+      ) as HTMLElement
+
+      if (label) {
+        label.id = g.getAttribute('aria-labelledby') as string
+      }
+    })
+  }
+
+  scrollToItem(index: number) {
+    const item = this.filteredItems[index]
+    const containerRect = this.contentTarget.getBoundingClientRect()
+    const itemRect = item.getBoundingClientRect()
+    const listRect = this.listTarget.getBoundingClientRect()
+    let newScrollTop = null as number | null
+
+    const maxScrollTop =
+      this.listTarget.scrollHeight - this.listTarget.clientHeight
+
+    // scroll to bottom
+    if (itemRect.bottom - containerRect.bottom > 0) {
+      if (index === this.filteredItems.length - 1) {
+        newScrollTop = maxScrollTop
+      } else {
+        newScrollTop =
+          this.listTarget.scrollTop + (itemRect.bottom - containerRect.bottom)
+      }
+    } else if (listRect.top - itemRect.top > 0) {
+      // scroll to top
+      if (index === 0) {
+        newScrollTop = 0
+      } else {
+        newScrollTop = this.listTarget.scrollTop - (listRect.top - itemRect.top)
+      }
+    }
+
+    if (newScrollTop !== null) {
+      this.scrollingViaKeyboard = true
+
+      if (newScrollTop >= 0 && newScrollTop <= maxScrollTop) {
+        this.listTarget.scrollTop = newScrollTop
+      }
+
+      // Clear the flag after scroll settles
+      clearTimeout(this.keyboardScrollTimeout)
+      this.keyboardScrollTimeout = window.setTimeout(() => {
+        this.scrollingViaKeyboard = false
+      }, 200)
+    }
+  }
+
+  highlightItem(
+    event: MouseEvent | KeyboardEvent | null = null,
+    index: number | null = null,
+  ) {
+    if (event !== null) {
+      if (event instanceof KeyboardEvent) {
+        const key = event.key
+        const item = this.filteredItems.find(
+          (i) => i.dataset.highlighted === 'true',
+        )
+
+        if (item) {
+          const index = this.filteredItems.indexOf(item)
+
+          let newIndex = 0
+          if (key === 'ArrowUp') {
+            newIndex = index - 1
+
+            if (newIndex < 0) {
+              newIndex = 0
+            }
+          } else {
+            newIndex = index + 1
+
+            if (newIndex > this.filteredItems.length - 1) {
+              newIndex = this.filteredItems.length - 1
+            }
+          }
+
+          this.highlightItemByIndex(newIndex)
+          this.scrollToItem(newIndex)
+        } else {
+          if (key === 'ArrowUp') {
+            this.highlightItemByIndex(this.filteredItems.length - 1)
+          } else {
+            this.highlightItemByIndex(0)
+          }
+        }
+      } else {
+        // mouse event
+        if (this.scrollingViaKeyboard) {
+          event.stopImmediatePropagation()
+          return
+        } else {
+          const item = event.currentTarget as HTMLElement
+          const index = this.filteredItems.indexOf(item)
+          this.highlightItemByIndex(index)
+        }
+      }
+    } else if (index !== null) {
+      this.highlightItemByIndex(index)
+    }
+  }
+
+  highlightItemByIndex(index: number) {
+    this.filteredItems.forEach((item, i) => {
+      if (i === index) {
+        item.dataset.highlighted = 'true'
+      } else {
+        item.dataset.highlighted = 'false'
+      }
+    })
+  }
+
+  open() {
+    this.isOpenValue = true
+    this.highlightItemByIndex(0)
+
+    setTimeout(() => {
+      this.searchInputTarget.focus()
+    }, ON_OPEN_FOCUS_DELAY)
+  }
+
+  close() {
+    this.isOpenValue = false
+    this.searchInputTarget.value = ''
+    this.filteredItemIndexesValue = Array.from(
+      { length: this.items.length },
+      (_, i) => i,
+    )
+  }
+
+  select(event: MouseEvent | KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    if (event instanceof KeyboardEvent) {
+      const item = this.filteredItems.find(
+        (i) => i.dataset.highlighted === 'true',
+      )
+
+      if (item) {
+        this.onSelect(item.dataset.value as string)
+        this.close()
+      }
+    } else {
+      // mouse event
+      const item = event.currentTarget as HTMLElement
+      this.onSelect(item.dataset.value as string)
+      this.close()
+    }
+  }
+
+  onSelect(value: string) {}
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (['Tab', 'Enter', ' '].includes(key)) event.preventDefault()
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  search(event: InputEvent) {
+    const input = event.target as HTMLInputElement
+    const value = input.value
+
+    if (value.length > 0) {
+      const results = this.fuse.search(value)
+
+      this.filteredItemIndexesValue = results.map((result) => result.refIndex)
+    } else {
+      this.filteredItemIndexesValue = Array.from(
+        { length: this.items.length },
+        (_, i) => i,
+      )
+    }
+  }
+
+  filteredItemIndexesValueChanged(filteredItemIndexes: number[]) {
+    if (this.items) {
+      const filteredItems = filteredItemIndexes.map((i) => this.items[i])
+
+      // 1. Toggle visibility of items
+      this.items.forEach((item) => {
+        if (filteredItems.includes(item)) {
+          item.ariaHidden = 'false'
+          item.classList.remove('hidden')
+        } else {
+          item.ariaHidden = 'true'
+          item.classList.add('hidden')
+        }
+      })
+
+      // 2. Get groups based on order of filtered items
+      const groupIds = filteredItems.map((item) => item.dataset.groupId)
+      const uniqueGroupIds = [...new Set(groupIds)].filter(
+        (groupId) => !!groupId,
+      )
+      const orderedGroups = uniqueGroupIds.map((groupId) => {
+        return this.resultsTarget.querySelector(
+          `[aria-labelledby=${groupId}]`,
+        ) as HTMLElement
+      })
+
+      // 3. Append items and groups based on filtered items
+      const appendedGroupIds = [] as string[]
+
+      filteredItems.forEach((item, index) => {
+        const groupId = item.dataset.groupId
+
+        if (groupId) {
+          const group = orderedGroups.find(
+            (g) => g.getAttribute('aria-labelledby') === groupId,
+          )
+
+          if (group) {
+            group.appendChild(item)
+
+            if (!appendedGroupIds.includes(groupId)) {
+              this.resultsTarget.appendChild(group)
+              appendedGroupIds.push(groupId)
+            }
+          }
+        } else {
+          this.resultsTarget.appendChild(item)
+        }
+      })
+
+      // 4. Toggle visibility of groups
+      this.groupTargets.forEach((group) => {
+        const itemsCount = group.querySelectorAll(
+          `[data-${this.identifier}-target=item][aria-hidden=false]`,
+        ).length
+        if (itemsCount > 0) {
+          group.classList.remove('hidden')
+        } else {
+          group.classList.add('hidden')
+        }
+      })
+
+      // 5. Assign filteredItems based on the order it is displayed in the DOM
+      this.filteredItems = Array.from(
+        this.resultsTarget.querySelectorAll(
+          `[data-${this.identifier}-target=item][aria-hidden=false]`,
+        ),
+      )
+
+      // 6. Highlight first item
+      this.highlightItemByIndex(0)
+
+      // 7. Toggle visibility of empty
+      if (this.hasEmptyTarget) {
+        if (this.filteredItems.length > 0) {
+          this.emptyTarget.classList.add('hidden')
+        } else {
+          this.emptyTarget.classList.remove('hidden')
+        }
+      }
+    }
+  }
+}

data/app/javascript/controllers/date_picker_controller.ts

@@ -0,0 +1,274 @@
+import {
+  initFloatingUi,
+  showOverlay,
+  hideOverlay,
+  lockScroll,
+  unlockScroll,
+  ON_OPEN_FOCUS_DELAY,
+  getFocusableElements,
+} from '../utils'
+import { Calendar, Options } from 'vanilla-calendar-pro'
+import Inputmask from 'inputmask'
+import PopoverController from './popover_controller'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(customParseFormat)
+dayjs.extend(utc)
+
+const DAYJS_FORMAT = 'YYYY-MM-DD'
+
+export default class extends PopoverController {
+  static targets = [
+    'trigger',
+    'triggerText',
+    'contentContainer',
+    'content',
+    'input',
+    'hiddenInput',
+    'inputContainer',
+    'calendar',
+  ]
+
+  static values = { isOpen: Boolean, date: String }
+
+  declare readonly triggerTextTarget: HTMLElement
+  declare readonly inputTarget: HTMLInputElement
+  declare readonly hiddenInputTarget: HTMLInputElement
+  declare readonly inputContainerTarget: HTMLElement
+  declare readonly calendarTarget: HTMLElement
+  declare onClickDateListener: (event: any, self: any) => void
+  declare format: string
+  declare mask: boolean
+  declare dateValue: string
+  declare calendar: Calendar
+  declare readonly hasInputTarget: boolean
+  declare readonly hasTriggerTextTarget: boolean
+
+  connect() {
+    super.connect()
+    this.onClickDateListener = this.onClickDate.bind(this)
+    this.format = this.element.dataset.format || 'DD/MM/YYYY'
+    this.mask = this.element.dataset.mask === 'true'
+
+    const options = this.getOptions()
+
+    this.calendar = new Calendar(this.calendarTarget, options)
+    this.calendar.init()
+
+    if (this.hasInputTarget && this.mask) {
+      this.setupInputMask()
+    }
+
+    this.calendarTarget.removeAttribute('tabindex')
+  }
+
+  inputBlur() {
+    let dateDisplay = ''
+    const date = this.calendar.context.selectedDates[0]
+
+    if (date) {
+      dateDisplay = dayjs(date).format(this.format)
+    }
+
+    this.inputTarget.value = dateDisplay
+    this.inputContainerTarget.dataset.focus = 'false'
+  }
+
+  inputDate(event: KeyboardEvent) {
+    const value = (event.target as HTMLInputElement).value
+
+    if (value.length === 0) {
+      this.calendar.set({
+        selectedDates: [],
+      })
+      this.dateValue = ''
+    }
+
+    if (value.length > 0 && dayjs(value, this.format, true).isValid()) {
+      const dayjsDate = dayjs(value, this.format).format(DAYJS_FORMAT)
+      this.calendar.set({
+        selectedDates: [dayjsDate],
+      })
+      this.dateValue = dayjsDate
+    }
+  }
+
+  setContainerFocus() {
+    this.inputContainerTarget.dataset.focus = 'true'
+  }
+
+  onOpenFocusedElement() {
+    const focusableElements = getFocusableElements(this.contentTarget)
+
+    const selectedElement = Array.from(focusableElements).find(
+      (e) => e.ariaSelected,
+    ) as HTMLElement
+
+    const currentElement = this.contentTarget.querySelector(
+      '[aria-current]',
+    ) as HTMLElement
+
+    if (selectedElement) {
+      return selectedElement
+    } else if (currentElement) {
+      const firstElementChild = currentElement.firstElementChild as HTMLElement
+      return firstElementChild
+    } else {
+      return focusableElements[0]
+    }
+  }
+
+  referenceElement() {
+    return this.hasInputTarget ? this.inputTarget : this.triggerTarget
+  }
+
+  onOpen() {
+    if (this.isMobile()) {
+      lockScroll()
+      showOverlay({ elementId: this.contentTarget.id })
+    }
+
+    setTimeout(() => {
+      // Prevent width from changing when changing to month/year view
+      if (!this.contentTarget.dataset.width) {
+        const contentWidth = this.contentTarget.offsetWidth
+        this.contentTarget.dataset.width = `${contentWidth}`
+
+        this.contentTarget.style.maxWidth = `${contentWidth}px`
+        this.contentTarget.style.minWidth = `${contentWidth}px`
+      }
+
+      if (this.isMobile()) {
+        // Prevent position from changing when toggling between month/year on mobile
+        if (!this.contentTarget.dataset.top) {
+          const rect = this.contentTarget.getBoundingClientRect()
+          this.contentTarget.dataset.top = `${rect.top}`
+          this.contentTarget.style.top = `${rect.top}px`
+          this.contentTarget.classList.remove('-translate-y-1/2', 'top-1/2')
+        }
+      }
+    }, ON_OPEN_FOCUS_DELAY)
+  }
+
+  onClose() {
+    if (this.isMobile()) {
+      hideOverlay(this.contentTarget.id)
+      unlockScroll()
+    }
+  }
+
+  // Popover is shown as a dialog on small screens with position: fixed
+  isMobile() {
+    const styles = window.getComputedStyle(this.contentTarget)
+    return styles.position === 'fixed'
+  }
+
+  getOptions() {
+    let options = {
+      type: 'default',
+      enableJumpToSelectedDate: true,
+      onClickDate: this.onClickDateListener,
+    } as Options
+
+    const date = this.element.dataset.value
+
+    if (date && dayjs(date).isValid()) {
+      const dayjsDate = dayjs(date).format(DAYJS_FORMAT)
+      options.selectedDates = [dayjsDate]
+    }
+
+    try {
+      options = {
+        ...options,
+        ...JSON.parse(this.element.dataset.options || ''),
+      }
+    } catch {
+      options = options
+    }
+
+    if (options.selectedDates && options.selectedDates.length > 0) {
+      this.dateValue = `${options.selectedDates[0]}`
+    }
+
+    return options
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    const focusableElements = getFocusableElements(this.contentTarget)
+
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    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 === 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()
+      }
+    } else if (
+      ['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(key) &&
+      document.activeElement != this.inputTarget
+    ) {
+      event.preventDefault()
+    }
+  }
+
+  onClickDate(self: Calendar) {
+    const date = self.context.selectedDates[0]
+
+    if (date) {
+      this.dateValue = date
+      this.close()
+    } else {
+      this.dateValue = ''
+    }
+  }
+
+  setupInputMask() {
+    const im = new Inputmask(this.format.replace(/[^\/]/g, '9'), {
+      showMaskOnHover: false,
+    })
+    im.mask(this.inputTarget)
+  }
+
+  dateValueChanged(value: string) {
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value)
+      const formattedDate = dayjsDate.format(this.format)
+
+      if (this.hasInputTarget) this.inputTarget.value = formattedDate
+      if (this.hasTriggerTextTarget) {
+        this.triggerTarget.dataset.hasValue = 'true'
+        this.triggerTextTarget.textContent = formattedDate
+      }
+
+      this.hiddenInputTarget.value = dayjsDate.utc().format()
+    } else {
+      if (this.hasInputTarget) this.inputTarget.value = ''
+
+      if (this.hasTriggerTextTarget) {
+        this.triggerTarget.dataset.hasValue = 'false'
+        if (this.triggerTarget.dataset.placeholder) {
+          this.triggerTextTarget.textContent =
+            this.triggerTarget.dataset.placeholder
+        } else {
+          this.triggerTextTarget.textContent = ''
+        }
+      }
+
+      this.hiddenInputTarget.value = ''
+    }
+  }
+}