shadcn_phlexcomponents 0.1.9 → 0.1.11

data/app/javascript/controllers/date_range_picker_controller.ts

@@ -0,0 +1,243 @@
+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'
+
+export default class extends DatePickerController {
+  static targets = [
+    'trigger',
+    'triggerText',
+    'contentWrapper',
+    'content',
+    'input',
+    'hiddenInput',
+    'endHiddenInput',
+    'inputContainer',
+    'calendar',
+  ]
+
+  static values = {
+    isOpen: Boolean,
+    date: String,
+    endDate: String,
+  }
+
+  declare readonly endHiddenInputTarget: HTMLInputElement
+  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 = ''
+    }
+  }
+
+  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 {
+      options = options
+    }
+
+    if (options.selectedDates && options.selectedDates.length > 0) {
+      this.dateValue = `${options.selectedDates[0]}`
+      this.endDateValue = `${options.selectedDates[1]}`
+    }
+
+    return options
+  }
+
+  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 = ''
+    }
+  }
+
+  setupInputMask() {
+    const pattern = this.format.replace(/[^\/]/g, '9')
+    const im = new Inputmask(`${pattern}${DELIMITER}${pattern}`, {
+      showMaskOnHover: false,
+    })
+    im.mask(this.inputTarget)
+  }
+
+  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
+      }
+    }
+  }
+}

data/app/javascript/controllers/dialog_controller.ts

@@ -0,0 +1,113 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+import {
+  ON_OPEN_FOCUS_DELAY,
+  openWithOverlay,
+  closeWithOverlay,
+  focusTrigger,
+  showContent,
+  hideContent,
+  getFocusableElements,
+} from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['trigger', 'content']
+  static values = {
+    isOpen: Boolean,
+  }
+
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly hasContentTarget: boolean
+  declare isOpenValue: boolean
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    useClickOutside(this, { element: this.contentTarget })
+  }
+
+  open() {
+    this.isOpenValue = true
+
+    setTimeout(() => {
+      this.onOpenFocusedElement().focus()
+    }, ON_OPEN_FOCUS_DELAY)
+  }
+
+  onOpenFocusedElement() {
+    const focusableElements = getFocusableElements(this.contentTarget)
+    return focusableElements[0]
+  }
+
+  close() {
+    this.isOpenValue = false
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    } else if (key === 'Tab') {
+      const focusableElements = getFocusableElements(this.contentTarget)
+
+      const firstElement = focusableElements[0]
+      const lastElement = focusableElements[focusableElements.length - 1]
+
+      // 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()
+      }
+    }
+  }
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      openWithOverlay(this.contentTarget.id)
+
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      })
+
+      this.setupEventListeners()
+    } else {
+      closeWithOverlay(this.contentTarget.id)
+
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      })
+
+      this.cleanupEventListeners()
+
+      // Only focus trigger when is previously opened
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+}

data/app/javascript/controllers/dropdown_menu_controller.ts

@@ -0,0 +1,133 @@
+import DropdownMenuSubController from './dropdown_menu_sub_controller'
+import DropdownMenuRootController from './dropdown_menu_root_controller'
+
+export default class extends DropdownMenuRootController {
+  static values = {
+    isOpen: Boolean,
+    setEqualWidth: { type: Boolean, default: false },
+    closestContentSelector: {
+      type: String,
+      default:
+        '[data-dropdown-menu-target="content"], [data-dropdown-menu-sub-target="content"]',
+    },
+  }
+
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare subMenuControllers: DropdownMenuSubController[]
+
+  connect() {
+    super.connect()
+  }
+
+  onOpen(_event: MouseEvent | KeyboardEvent) {
+    // 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) {
+      let subMenuControllers = [] as DropdownMenuSubController[]
+
+      const subMenus = Array.from(
+        this.contentTarget.querySelectorAll(
+          '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+        ),
+      )
+
+      subMenus.forEach((subMenu) => {
+        const subMenuController =
+          window.Stimulus.getControllerForElementAndIdentifier(
+            subMenu,
+            'dropdown-menu-sub',
+          ) as DropdownMenuSubController
+
+        if (subMenuController) {
+          subMenuControllers.push(subMenuController)
+        }
+      })
+
+      this.subMenuControllers = subMenuControllers
+    }
+  }
+
+  focusItem(event: MouseEvent | KeyboardEvent) {
+    const item = event.currentTarget as HTMLElement
+    let items = [] as HTMLElement[]
+    const content = item.closest(
+      this.closestContentSelectorValue,
+    ) 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
+    }
+
+    let index = items.indexOf(item)
+
+    if (event instanceof KeyboardEvent) {
+      const key = event.key
+      let newIndex = 0
+
+      if (key === 'ArrowUp') {
+        newIndex = index - 1
+        if (newIndex < 0) {
+          newIndex = 0
+        }
+      } else {
+        newIndex = index + 1
+        if (newIndex > items.length - 1) {
+          newIndex = items.length - 1
+        }
+      }
+
+      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()
+      }
+    })
+  }
+
+  onClose() {
+    this.subMenuControllers.forEach((subMenuController) => {
+      subMenuController.closeImmediately()
+    })
+  }
+
+  onSelect(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()
+      }
+    }
+  }
+}

data/app/javascript/controllers/dropdown_menu_root_controller.ts

@@ -0,0 +1,234 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+import {
+  getSameLevelItems,
+  ON_OPEN_FOCUS_DELAY,
+  lockScroll,
+  unlockScroll,
+  showContent,
+  hideContent,
+  initFloatingUi,
+  focusTrigger,
+} from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['trigger', 'contentContainer', 'content', 'item']
+  static values = {
+    isOpen: Boolean,
+    setEqualWidth: { type: Boolean, default: false },
+    closestContentSelector: { type: String, default: '' },
+  }
+
+  declare isOpenValue: boolean
+  declare setEqualWidthValue: boolean
+  declare closestContentSelectorValue: string
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly itemTargets: HTMLElement[]
+  declare items: HTMLElement[]
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: this.itemTargets,
+      closestContentSelector: this.closestContentSelectorValue,
+    })
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+  }
+
+  toggle(event: MouseEvent) {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open(event)
+    }
+  }
+
+  open(event: MouseEvent | KeyboardEvent) {
+    this.isOpenValue = true
+    this.onOpen(event)
+
+    setTimeout(() => {
+      this.onOpenFocusedElement(event).focus()
+    }, ON_OPEN_FOCUS_DELAY)
+  }
+
+  onOpen(_event: MouseEvent | KeyboardEvent) {}
+
+  onOpenFocusedElement(event: MouseEvent | KeyboardEvent) {
+    let itemIndex = null as number | null
+
+    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
+    }
+  }
+
+  close() {
+    this.isOpenValue = false
+    this.onClose()
+  }
+
+  onClose() {}
+
+  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,
+  ) {
+    if (event !== null) {
+      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()
+    }
+  }
+
+  focusItem(event: MouseEvent | KeyboardEvent) {
+    let 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 = index - 1
+
+        if (newIndex < 0) {
+          newIndex = 0
+        }
+      } else {
+        newIndex = index + 1
+
+        if (newIndex > this.items.length - 1) {
+          newIndex = this.items.length - 1
+        }
+      }
+
+      this.items[newIndex].focus()
+    } else {
+      // item mouseover event
+      this.items[index].focus()
+    }
+  }
+
+  focusContent(event: MouseEvent) {
+    const item = event.currentTarget as HTMLElement
+    const content = item.closest(
+      this.closestContentSelectorValue,
+    ) as HTMLElement
+    content.focus()
+  }
+
+  select(event: MouseEvent | KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    this.onSelect(event)
+    this.close()
+  }
+
+  onSelect(_event: MouseEvent | KeyboardEvent) {}
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      lockScroll()
+
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+        setEqualWidth: this.setEqualWidthValue,
+      })
+
+      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()
+
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      this.cleanupEventListeners()
+
+      // Only focus trigger when is previously opened
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+    }
+  }
+
+  clickOutside(event: MouseEvent) {
+    const target = event.target
+    // Let #toggle to handle state when clicked on trigger
+    if (target === this.triggerTarget) return
+
+    this.close()
+  }
+
+  onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (['Tab', 'Enter', ' '].includes(key)) event.preventDefault()
+
+    if (key === 'Home') {
+      this.focusItemByIndex(null, 0)
+    } else if (key === 'End') {
+      this.focusItemByIndex(null, this.items.length - 1)
+    } else if (key === 'Escape') {
+      this.close()
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+}