shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/javascript/controllers/date_range_picker_controller.ts

@@ -0,0 +1,253 @@
+import { Calendar, Options } from 'vanilla-calendar-pro'
+import { DatePickerController } from './date_picker_controller'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(customParseFormat)
+dayjs.extend(utc)
+
+const DELIMITER = ' - '
+const DAYJS_FORMAT = 'YYYY-MM-DD'
+
+const DateRangePickerController = class extends DatePickerController {
+  // targets
+  static targets = [
+    'trigger',
+    'triggerText',
+    'contentContainer',
+    'content',
+    'input',
+    'hiddenInput',
+    'endHiddenInput',
+    'inputContainer',
+    'calendar',
+    'overlay',
+  ]
+  declare readonly endHiddenInputTarget: HTMLInputElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+    date: String,
+    endDate: String,
+  }
+  declare endDateValue: string
+
+  inputBlur() {
+    const dates = this.calendar.context.selectedDates
+    const startDate = dates[0]
+    const endDate = dates[1]
+    let datesDisplay = ''
+
+    if (startDate) {
+      datesDisplay = `${dayjs(startDate).format(this.format)}${DELIMITER}`
+    }
+
+    if (endDate) {
+      datesDisplay = `${datesDisplay}${dayjs(endDate).format(this.format)}`
+    }
+
+    this.inputTarget.value = datesDisplay
+    this.inputContainerTarget.dataset.focus = 'false'
+  }
+
+  inputDate(event: KeyboardEvent) {
+    const value = (event.target as HTMLInputElement).value
+    const dates = value.split(DELIMITER).filter((d) => d.length > 0)
+
+    if (dates.length > 0) {
+      const startDate = dates[0]
+      const endDate = dates[1]
+      let selectedDates: string[] = this.calendar.context.selectedDates
+
+      if (dayjs(startDate, this.format, true).isValid()) {
+        const dayjsDate = dayjs(value, this.format).format(DAYJS_FORMAT)
+        selectedDates[0] = dayjsDate
+      }
+
+      if (dayjs(endDate, this.format, true).isValid()) {
+        const dayjsDate = dayjs(endDate, this.format).format(DAYJS_FORMAT)
+        selectedDates[1] = dayjsDate
+      }
+
+      selectedDates = selectedDates.filter((d) => !!d)
+
+      this.calendar.set({
+        selectedDates: selectedDates,
+      })
+      if (selectedDates[0]) {
+        this.dateValue = selectedDates[0]
+      }
+      if (selectedDates[1]) {
+        this.endDateValue = selectedDates[1]
+      }
+    } else {
+      this.calendar.set({
+        selectedDates: [],
+      })
+      this.dateValue = ''
+      this.endDateValue = ''
+    }
+  }
+
+  dateValueChanged(value: string) {
+    this.onClickDateListener = this.onClickDate.bind(this)
+
+    const endDate = this.endDateValue
+    let datesDisplay = ''
+
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value)
+      const formattedDate = dayjsDate.format(this.format)
+      this.hiddenInputTarget.value = dayjsDate.utc().format()
+
+      if (endDate) {
+        datesDisplay = `${formattedDate}${DELIMITER}${dayjs(endDate).format(
+          this.format,
+        )}`
+      } else {
+        datesDisplay = `${formattedDate}${DELIMITER}`
+      }
+    } else {
+      this.hiddenInputTarget.value = ''
+
+      if (endDate) {
+        datesDisplay = `${DELIMITER}${dayjs(endDate).format(this.format)}`
+      }
+    }
+
+    if (this.hasInputTarget) this.inputTarget.value = datesDisplay
+    if (this.hasTriggerTextTarget) {
+      const hasValue = (!!value && value.length > 0) || !!endDate
+
+      this.triggerTarget.dataset.hasValue = `${hasValue}`
+
+      if (this.triggerTarget.dataset.placeholder && !hasValue) {
+        this.triggerTextTarget.textContent =
+          this.triggerTarget.dataset.placeholder
+      } else {
+        this.triggerTextTarget.textContent = datesDisplay
+      }
+    }
+  }
+
+  endDateValueChanged(value: string) {
+    const startDate = this.dateValue
+    let datesDisplay = ''
+
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value)
+      const formattedDate = dayjsDate.format(this.format)
+      this.endHiddenInputTarget.value = dayjsDate.utc().format()
+
+      if (startDate) {
+        datesDisplay = `${dayjs(startDate).format(
+          this.format,
+        )}${DELIMITER}${formattedDate}`
+      } else {
+        datesDisplay = `${DELIMITER}${formattedDate}`
+      }
+    } else {
+      this.endHiddenInputTarget.value = ''
+
+      if (startDate) {
+        datesDisplay = `${dayjs(startDate).format(this.format)}${DELIMITER}`
+      }
+    }
+
+    if (this.hasInputTarget) this.inputTarget.value = datesDisplay
+
+    if (this.hasTriggerTextTarget) {
+      const hasValue = (!!value && value.length > 0) || !!startDate
+      this.triggerTarget.dataset.hasValue = `${hasValue}`
+
+      if (this.triggerTarget.dataset.placeholder && !hasValue) {
+        this.triggerTextTarget.textContent =
+          this.triggerTarget.dataset.placeholder
+      } else {
+        this.triggerTextTarget.textContent = datesDisplay
+      }
+    }
+  }
+
+  protected getOptions() {
+    let options = {
+      type: 'multiple',
+      selectionDatesMode: 'multiple-ranged',
+      displayMonthsCount: 2,
+      monthsToSwitch: 1,
+      displayDatesOutside: false,
+      enableJumpToSelectedDate: true,
+      onClickDate: this.onClickDateListener,
+    } as Options
+
+    const selectedDates = []
+
+    const startDate = this.element.dataset.value
+    const endDate = this.element.dataset.endValue
+
+    if (startDate && dayjs(startDate).isValid()) {
+      const date = dayjs(startDate).format(DAYJS_FORMAT)
+      selectedDates.push(date)
+    }
+
+    if (endDate && dayjs(endDate).isValid()) {
+      const date = dayjs(endDate).format(DAYJS_FORMAT)
+      selectedDates.push(date)
+    }
+
+    options.selectedDates = selectedDates
+
+    try {
+      options = {
+        ...options,
+        ...JSON.parse(this.element.dataset.options || ''),
+      }
+    } catch {
+      // noop
+    }
+
+    if (options.selectedDates && options.selectedDates.length > 0) {
+      this.dateValue = `${options.selectedDates[0]}`
+      if (options.selectedDates[1]) {
+        this.endDateValue = `${options.selectedDates[1]}`
+      }
+    }
+
+    return options
+  }
+
+  protected onClickDate(self: Calendar) {
+    const dates = self.context.selectedDates
+
+    if (dates.length > 0) {
+      const startDate = dates[0]
+      const endDate = dates[1]
+
+      this.dateValue = startDate
+
+      if (endDate) {
+        this.endDateValue = endDate
+        this.close()
+      } else {
+        this.endDateValue = ''
+      }
+    } else {
+      this.dateValue = ''
+      this.endDateValue = ''
+    }
+  }
+
+  protected setupInputMask() {
+    const pattern = this.format.replace(/[^\/]/g, '9')
+    const im = new Inputmask(`${pattern}${DELIMITER}${pattern}`, {
+      showMaskOnHover: false,
+    })
+    im.mask(this.inputTarget)
+  }
+}
+
+type DateRangePicker = InstanceType<typeof DateRangePickerController>
+
+export { DateRangePickerController }
+export type { DateRangePicker }

data/app/javascript/controllers/dialog_controller.ts

@@ -0,0 +1,115 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  focusElement,
+  focusTrigger,
+  showContent,
+  hideContent,
+  getFocusableElements,
+  anyNestedComponentsOpen,
+  handleTabNavigation,
+} from '../utils'
+
+const DialogController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['trigger', 'content', 'overlay']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly overlayTarget: HTMLElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+  }
+  declare isOpenValue: boolean
+
+  // custom properties
+  declare trigger: HTMLElement
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare DOMClickListener: (event: MouseEvent) => void
+
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    this.DOMClickListener = this.onDOMClick.bind(this)
+  }
+
+  open() {
+    this.isOpenValue = true
+  }
+
+  close() {
+    this.isOpenValue = false
+  }
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+        appendToBody: true,
+        overlay: this.overlayTarget,
+      })
+
+      const focusableElements = getFocusableElements(this.contentTarget)
+      focusElement(focusableElements[0])
+
+      this.setupEventListeners()
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+        overlay: this.overlayTarget,
+      })
+
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected onDOMClick(event: MouseEvent) {
+    if (!this.isOpenValue) return
+
+    const target = event.target as HTMLElement
+    if (target === this.triggerTarget) return
+    if (this.contentTarget.contains(target)) return
+
+    const shouldClose = !anyNestedComponentsOpen(this.contentTarget)
+    if (shouldClose) this.close()
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      const shouldClose = !anyNestedComponentsOpen(this.contentTarget)
+      if (shouldClose) this.close()
+    } else if (key === 'Tab') {
+      handleTabNavigation(this.contentTarget, event)
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+    document.addEventListener('pointerdown', this.DOMClickListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+    document.removeEventListener('pointerdown', this.DOMClickListener)
+  }
+}
+
+type Dialog = InstanceType<typeof DialogController>
+
+export { DialogController }
+export type { Dialog }

data/app/javascript/controllers/dropdown_menu_controller.ts

@@ -0,0 +1,309 @@
+import { DropdownMenuSub } from './dropdown_menu_sub_controller'
+import { Select } from './select_controller'
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+import { initFloatingUi } from '../utils/floating_ui'
+import {
+  getSameLevelItems,
+  focusTrigger,
+  hideContent,
+  showContent,
+  lockScroll,
+  unlockScroll,
+  getStimulusInstance,
+  onClickOutside,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  focusElement,
+} from '../utils'
+
+const onKeydown = (controller: DropdownMenu | Select, event: KeyboardEvent) => {
+  const key = event.key
+
+  if (['Tab', 'Enter', ' '].includes(key)) event.preventDefault()
+  if (key === 'Home') {
+    controller.focusItemByIndex(null, 0)
+  } else if (key === 'End') {
+    controller.focusItemByIndex(null, controller.items.length - 1)
+  } else if (key === 'Escape') {
+    controller.close()
+  }
+}
+
+const focusItemByIndex = (
+  controller: DropdownMenu | Select,
+  event: KeyboardEvent | null = null,
+  index: number | null = null,
+) => {
+  if (event !== null) {
+    const key = event.key
+
+    if (key === 'ArrowUp') {
+      controller.items[controller.items.length - 1].focus()
+    } else {
+      controller.items[0].focus()
+    }
+  } else if (index !== null) {
+    controller.items[index].focus()
+  }
+}
+
+const DropdownMenuController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['trigger', 'contentContainer', 'content', 'item']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly itemTargets: HTMLElement[]
+
+  // values
+  static values = {
+    isOpen: Boolean,
+  }
+  declare isOpenValue: boolean
+
+  // custom properties
+  declare closestContentSelector: string
+  declare items: HTMLElement[]
+  declare subMenuControllers: DropdownMenuSub[]
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+
+  connect() {
+    this.closestContentSelector =
+      '[data-dropdown-menu-target="content"], [data-dropdown-menu-sub-target="content"]'
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: this.itemTargets,
+      closestContentSelector: this.closestContentSelector,
+    })
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+  }
+
+  toggle(event: MouseEvent) {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open(event)
+    }
+  }
+
+  open(event: MouseEvent | KeyboardEvent) {
+    this.isOpenValue = true
+
+    // Sub menus are not connected to the DOM yet when dropdown menu is connected.
+    // So we initialize them here instead of in connect().
+    if (this.subMenuControllers === undefined) {
+      const subMenuControllers = [] as DropdownMenuSub[]
+
+      const subMenus = Array.from(
+        this.contentTarget.querySelectorAll(
+          '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+        ),
+      ) as HTMLElement[]
+
+      subMenus.forEach((subMenu) => {
+        const subMenuController = getStimulusInstance<DropdownMenuSub>(
+          'dropdown-menu-sub',
+          subMenu,
+        )
+
+        if (subMenuController) {
+          subMenuControllers.push(subMenuController)
+        }
+      })
+
+      this.subMenuControllers = subMenuControllers
+    }
+
+    let elementToFocus = null as HTMLElement | null
+
+    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
+    this.subMenuControllers.forEach((subMenuController) => {
+      subMenuController.closeImmediately()
+    })
+  }
+
+  focusItem(event: MouseEvent | KeyboardEvent) {
+    const item = event.currentTarget as HTMLElement
+    let items = [] as HTMLElement[]
+    const content = item.closest(this.closestContentSelector) as HTMLElement
+
+    const isSubMenu =
+      content.dataset.shadcnPhlexcomponents === 'dropdown-menu-sub-content'
+
+    if (isSubMenu) {
+      const subMenu = content.closest(
+        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+      )
+      const subMenuController = this.subMenuControllers.find(
+        (subMenuController) => subMenuController.element == subMenu,
+      )
+      if (subMenuController) {
+        items = subMenuController.items
+      }
+    } else {
+      items = this.items
+    }
+
+    const index = items.indexOf(item)
+
+    if (event instanceof KeyboardEvent) {
+      const key = event.key
+      let newIndex = 0
+
+      if (key === 'ArrowUp') {
+        newIndex = getPreviousEnabledIndex({
+          items,
+          currentIndex: index,
+          wrapAround: false,
+        })
+      } else {
+        newIndex = getNextEnabledIndex({
+          items,
+          currentIndex: index,
+          wrapAround: false,
+        })
+      }
+
+      items[newIndex].focus()
+    } else {
+      // item mouseover event
+      items[index].focus()
+    }
+
+    // Close submenus on the same level
+    const subMenusInContent = Array.from(
+      content.querySelectorAll(
+        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+      ),
+    ) as HTMLElement[]
+
+    subMenusInContent.forEach((subMenu) => {
+      const subMenuController = this.subMenuControllers.find(
+        (subMenuController) => subMenuController.element == subMenu,
+      )
+
+      if (subMenuController) {
+        subMenuController.closeImmediately()
+      }
+    })
+  }
+
+  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)
+  }
+
+  focusContent(event: MouseEvent) {
+    const item = event.currentTarget as HTMLElement
+    const content = item.closest(this.closestContentSelector) as HTMLElement
+    content.focus()
+  }
+
+  select(event: MouseEvent | KeyboardEvent) {
+    if (event instanceof KeyboardEvent) {
+      const key = event.key
+      const item = (event.currentTarget || event.target) as HTMLElement
+
+      // For rails button_to
+      if (item && (key === 'Enter' || key === ' ')) {
+        item.click()
+      }
+    }
+
+    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: false,
+      })
+
+      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()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    onKeydown(this, event)
+  }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+}
+
+type DropdownMenu = InstanceType<typeof DropdownMenuController>
+
+export { DropdownMenuController, onKeydown, focusItemByIndex }
+export type { DropdownMenu }