shadcn_phlexcomponents 0.1.5 → 0.1.9

data/app/javascript/controllers/date_range_picker_controller.js

@@ -1,231 +1,344 @@
-import { Controller } from '@hotwired/stimulus'
+import { FOCUS_DELAY, initFloatingUi, showOverlay, hideOverlay } from '../utils'
 import { Calendar } from 'vanilla-calendar-pro'
+import PopoverController from './popover_controller'
 import dayjs from 'dayjs'
+import Inputmask from 'inputmask'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import utc from 'dayjs/plugin/utc'
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
 
-// window.dayjs = dayjs
-export default class extends Controller {
+const DELIMITER = ' - '
+
+export default class extends PopoverController {
   static targets = [
-    'startDateInput',
-    'endDateInput',
+    'trigger',
+    'triggerText',
+    'contentWrapper',
+    'content',
+    'input',
     'startDateHiddenInput',
     'endDateHiddenInput',
-    'clearButton',
-    'calendarIcon',
+    'inputContainer',
+    'calendar',
   ]
 
+  static values = {
+    startDate: String,
+    endDate: String,
+  }
+
   connect() {
-    this.startDate = this.element.dataset.startDate
-    this.endDate = this.element.dataset.endDate
+    super.connect()
+
     this.format = this.element.dataset.format
-    this.type = this.element.dataset.type
     const settings = this.getSettings()
-    settings.type = 'multiple'
-    settings.selectionDatesMode = 'multiple-ranged'
-    settings.displayMonthsCount = 2
-    settings.monthsToSwitch = 1
-    settings.displayDatesOutside = false
-
-    if (this.startDate && dayjs(this.startDate).isValid()) {
-      const dayjsDate = dayjs(this.startDate)
-      const formattedDate = dayjsDate.format(this.format)
-      this.startDateInputTarget.value = formattedDate
-      settings.selectedDates = [dayjsDate.format('YYYY-MM-DD')]
+    settings.selectedDates = []
+    const startDate = this.element.dataset.startDate
+    const endDate = this.element.dataset.endDate
+
+    this.onClickDateListener = this.onClickDate.bind(this)
+
+    if (startDate && dayjs(startDate).isValid()) {
+      const date = dayjs(startDate).format('YYYY-MM-DD')
+      settings.selectedDates.push(date)
+      this.startDateValue = date
     }
 
-    if (this.endDate && dayjs(this.endDate).isValid()) {
-      const dayjsDate = dayjs(this.endDate)
-      const formattedDate = dayjsDate.format(this.format)
-      this.endDateInputTarget.value = formattedDate
-      settings.selectedDates = [
-        ...settings.selectedDates,
-        dayjsDate.format('YYYY-MM-DD'),
-      ]
+    if (endDate && dayjs(endDate).isValid()) {
+      const date = dayjs(endDate).format('YYYY-MM-DD')
+      settings.selectedDates.push(date)
+      this.endDateValue = date
     }
 
-    const calendar = new Calendar(this.element, {
-      inputMode: true,
+    this.calendar = new Calendar(this.calendarTarget, {
       enableJumpToSelectedDate: true,
       ...settings,
-      onShow(self) {
-        const controllerElement = self.context.inputElement
-
-        const startDateInput = controllerElement.querySelector(
-          '[data-shadcn-phlexcomponents--date-range-picker-target="startDateInput"]',
-        )
-
-        const endDateInput = controllerElement.querySelector(
-          '[data-shadcn-phlexcomponents--date-range-picker-target="endDateInput"]',
-        )
-
-        controllerElement.dataset.focus = 'true'
-        if (document.activeElement !== endDateInput) {
-          startDateInput.focus()
-        }
-      },
-      onHide(self) {
-        const controllerElement = self.context.inputElement
-        controllerElement.dataset.focus = 'false'
-      },
-      onClickDate(self, event) {
-        const dates = self.context.selectedDates.filter((date) => !!date)
-        const controllerElement = self.context.inputElement
-
-        const startDateInput = controllerElement.querySelector(
-          '[data-shadcn-phlexcomponents--date-range-picker-target="startDateInput"]',
-        )
-
-        const endDateInput = controllerElement.querySelector(
-          '[data-shadcn-phlexcomponents--date-range-picker-target="endDateInput"]',
-        )
-
-        const startDateHiddenInput = controllerElement.querySelector(
-          '[data-shadcn-phlexcomponents--date-range-picker-target="startDateHiddenInput"]',
-        )
-
-        const endDateHiddenInput = controllerElement.querySelector(
-          '[data-shadcn-phlexcomponents--date-range-picker-target="endDateHiddenInput"]',
-        )
-
-        if (dates.length > 0) {
-          const startDate = dates[0]
-          const endDate = dates[1]
-
-          const formattedStartDate = dayjs(startDate).format(
-            controllerElement.dataset.format,
-          )
-          startDateInput.value = formattedStartDate
-          controllerElement.dataset.hasValue = 'true'
-          const utcStartDate = dayjs(startDate).utc().format()
-          startDateHiddenInput.value = utcStartDate
-
-          if (endDate) {
-            const formattedEndDate = dayjs(endDate).format(
-              controllerElement.dataset.format,
-            )
-            endDateInput.value = formattedEndDate
-            const utcEndDate = dayjs(endDate).utc().format()
-            endDateHiddenInput.value = utcEndDate
-          } else {
-            endDateInput.value = ''
-            endDateHiddenInput.value = ''
-          }
-        } else {
-          self.context.inputElement.value = ''
-          endDateInput.value = ''
-          controllerElement.dataset.hasValue = 'false'
-          startDateHiddenInput.value = ''
-          endDateHiddenInput.value = ''
-        }
-      },
+      onClickDate: this.onClickDateListener,
     })
-    calendar.init()
 
-    this.calendar = calendar
-  }
+    this.calendar.init()
+
+    if (this.hasInputTarget) {
+      const pattern = this.format.replace(/[^\/]/g, '9')
+      const im = new Inputmask(`${pattern}${DELIMITER}${pattern}`, {
+        showMaskOnHover: false,
+      })
+      im.mask(this.inputTarget)
+    }
 
-  openCalendar(event) {
-    this.calendar.show()
+    this.calendarTarget.removeAttribute('tabindex')
   }
 
-  closeCalendar(event) {
-    const key = event.key
+  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}`
+    }
 
-    switch (key) {
-      case 'Tab':
-        if (
-          event.target.dataset[
-            'shadcnPhlexcomponents-DateRangePickerTarget'
-          ] === 'startDateInput'
-        ) {
-          if (event.shiftKey) {
-            this.calendar.hide()
-          }
-        } else {
-          if (!event.shiftKey) {
-            this.calendar.hide()
-          }
-        }
-
-        break
-      case 'Escape':
-        this.calendar.hide()
-        break
-      default:
-        break
+    if (endDate) {
+      datesDisplay = `${datesDisplay}${dayjs(endDate).format(this.format)}`
     }
+
+    this.inputTarget.value = datesDisplay
+    this.inputContainerTarget.dataset.focus = false
   }
 
   changeDate(event) {
     const value = event.target.value
-    const dates = this.calendar.selectedDates.filter((date) => !!date)
+    const dates = value.split(DELIMITER).filter((d) => d.length > 0)
 
-    if (
-      event.target.dataset['shadcnPhlexcomponents-DateRangePickerTarget'] ===
-      'startDateInput'
-    ) {
-      if (dayjs(value, this.format, true).isValid()) {
-        const dayjsDate = dayjs(value, this.format)
-        dates[0] = dayjsDate.format('YYYY-MM-DD')
-
-        this.calendar.set({
-          selectedDates: dates,
-        })
-        this.element.dataset.hasValue = 'true'
+    if (dates.length > 0) {
+      const startDate = dates[0]
+      const endDate = dates[1]
+      let selectedDates = this.calendar.context.selectedDates
+
+      if (dayjs(startDate, this.format, true).isValid()) {
+        const dayjsDate = dayjs(value, this.format).format('YYYY-MM-DD')
+        selectedDates[0] = dayjsDate
       }
-    } else {
-      if (dayjs(value, this.format, true).isValid()) {
-        const dayjsDate = dayjs(value, this.format)
-        dates[1] = dayjsDate.format('YYYY-MM-DD')
-
-        this.calendar.set({
-          selectedDates: dates,
-        })
-        this.element.dataset.hasValue = 'true'
+
+      if (dayjs(endDate, this.format, true).isValid()) {
+        const dayjsDate = dayjs(endDate, this.format).format('YYYY-MM-DD')
+        selectedDates[1] = dayjsDate
+      }
+
+      selectedDates = selectedDates.filter((d) => !!d)
+
+      this.calendar.set({
+        selectedDates: selectedDates,
+      })
+      if (selectedDates[0]) {
+        this.startDateValue = selectedDates[0]
+      }
+      if (selectedDates[1]) {
+        this.endDateValue = selectedDates[1]
       }
+    } else {
+      this.calendar.set({
+        selectedDates: [],
+      })
+      this.startDateValue = ''
+      this.endDateValue = ''
     }
   }
 
-  openCalendar() {
+  onOpen() {
     setTimeout(() => {
-      this.calendar.show()
-    }, 125)
+      this.focusCalendar()
+    }, FOCUS_DELAY * 1.5)
+
+    this.cleanup = initFloatingUi(
+      this.hasInputTarget ? this.inputTarget : this.triggerTarget,
+      this.contentWrapperTarget,
+      'bottom-start',
+    )
+
+    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`
+    }
+
+    showOverlay('md:hidden')
   }
 
-  clear() {
-    this.startDateInputTarget.value = ''
+  focusCalendar() {
+    const focusableElements = this.contentTarget.querySelectorAll(
+      'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])',
+    )
+
+    const selectedElement = Array.from(focusableElements).find(
+      (e) => e.ariaSelected,
+    )
+
+    const currentElement = this.contentTarget.querySelector('[aria-current]')
+
+    if (selectedElement) {
+      selectedElement.focus()
+    } else if (currentElement) {
+      currentElement.firstElementChild.focus()
+    }
+  }
 
-    if (this.hasEndDateInputTarget) {
-      this.endDateInputTarget.value = ''
+  getSettings() {
+    const defaultSettings = {
+      type: 'multiple',
+      selectionDatesMode: 'multiple-ranged',
+      displayMonthsCount: 2,
+      monthsToSwitch: 1,
+      displayDatesOutside: false,
     }
+    try {
+      return {
+        ...defaultSettings,
+        ...JSON.parse(this.element.dataset.settings),
+      }
+    } catch {
+      return defaultSettings
+    }
+  }
 
-    this.calendar.set({
-      selectedDates: [],
-    })
+  onDOMKeydown(event) {
+    if (!this.isOpen()) return
+
+    const key = event.key
 
-    this.element.dataset.hasValue = 'false'
+    const focusableElements = this.contentTarget.querySelectorAll(
+      'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])',
+    )
+
+    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()
+    }
+  }
+
+  onDOMClick(event) {
+    if (!this.isOpen()) return
+    if (this.element.contains(event.target)) return
+
+    // Fix bug with clicking/pressing on Month/Year button will cause popover to close
+    if (
+      event.target.dataset.vcMonth ||
+      event.target.dataset.vcYear ||
+      event.target.dataset.vcYearsYear ||
+      event.target.dataset.vcMonthsMonth ||
+      event.target.dataset.vcArrow ||
+      event.target.dataset.vcGrid
+    )
+      return
+
+    this.close()
+  }
+
+  setContainerFocus() {
+    this.inputContainerTarget.dataset.focus = true
+  }
+
+  onClose() {
+    hideOverlay()
   }
 
-  showClearButton() {
-    if (this.element.dataset.hasValue === 'true') {
-      this.clearButtonTarget.classList.remove('!hidden')
-      this.calendarIconTarget.classList.add('hidden')
+  onClickDate(self, event) {
+    const dates = self.context.selectedDates
+
+    if (dates.length > 0) {
+      const startDate = dates[0]
+      const endDate = dates[1]
+
+      this.startDateValue = startDate
+
+      if (endDate) {
+        this.endDateValue = endDate
+        this.close()
+      } else {
+        this.endDateValue = ''
+      }
+    } else {
+      this.startDateValue = ''
+      this.endDateValue = ''
     }
   }
 
-  hideClearButton() {
-    this.clearButtonTarget.classList.add('!hidden')
-    this.calendarIconTarget.classList.remove('hidden')
+  startDateValueChanged(value) {
+    const endDate = this.endDateValue
+    let datesDisplay = ''
+
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value)
+      const formattedDate = dayjsDate.format(this.format)
+      this.startDateHiddenInputTarget.value = dayjsDate.utc().format()
+
+      if (endDate) {
+        datesDisplay = `${formattedDate}${DELIMITER}${dayjs(endDate).format(
+          this.format,
+        )}`
+      } else {
+        datesDisplay = `${formattedDate}${DELIMITER}`
+      }
+    } else {
+      this.startDateHiddenInputTarget.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
+      }
+    }
   }
 
-  getSettings() {
-    try {
-      return JSON.parse(this.element.dataset.settings)
-    } catch {
-      return {}
+  endDateValueChanged(value) {
+    const startDate = this.startDateValue
+    let datesDisplay = ''
+
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value)
+      const formattedDate = dayjsDate.format(this.format)
+      this.endDateHiddenInputTarget.value = dayjsDate.utc().format()
+
+      if (startDate) {
+        datesDisplay = `${dayjs(startDate).format(
+          this.format,
+        )}${DELIMITER}${formattedDate}`
+      } else {
+        datesDisplay = `${DELIMITER}${formattedDate}`
+      }
+    } else {
+      this.endDateHiddenInputTarget.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.js

@@ -1,4 +1,11 @@
 import { Controller } from '@hotwired/stimulus'
+import {
+  ANIMATION_OUT_DELAY,
+  openWithOverlay,
+  closeWithOverlay,
+  focusTrigger,
+  FOCUS_DELAY,
+} from '../utils'
 
 export default class extends Controller {
   static targets = ['trigger', 'content']
@@ -17,95 +24,55 @@ export default class extends Controller {
   }
 
   open() {
-    this.showOverlay()
+    openWithOverlay([this.contentElement])
     this.contentElement.classList.remove('hidden')
     this.contentElement.dataset.state = 'open'
     this.triggerTarget.ariaExpanded = true
     this.setupEventListeners()
-    this.addInert()
 
-    if (window.innerHeight < document.documentElement.scrollHeight) {
-      document.body.dataset.scrollLocked = 1
-    }
     document.body.appendChild(this.contentElement)
-    this.firstElement.focus() // must be after appendChild
+
+    setTimeout(() => {
+      // must be after appendChild
+      this.firstElement.focus()
+    }, FOCUS_DELAY * 1.25)
   }
 
   close() {
+    closeWithOverlay()
     this.contentElement.dataset.state = 'closed'
     this.triggerTarget.ariaExpanded = false
     this.cleanupEventListeners()
-    this.removeInert()
     this.element.appendChild(this.contentElement)
 
     setTimeout(() => {
       this.contentElement.classList.add('hidden')
-    }, 100)
-
-    setTimeout(() => {
-      delete document.body.dataset.scrollLocked
-      this.removeOverlay()
-    }, 150)
+    }, ANIMATION_OUT_DELAY)
 
-    this.focusTrigger()
-  }
-
-  focusTrigger() {
-    if (this.triggerTarget.dataset.asChild === 'false') {
-      this.triggerTarget.firstElementChild.focus()
-    } else {
-      this.triggerTarget.focus()
-    }
+    focusTrigger(this.triggerTarget)
   }
 
   isOpen() {
     return this.triggerTarget.ariaExpanded === 'true'
   }
 
-  showOverlay() {
-    const elem = document.createElement('div')
-    elem.classList.add(
-      'fixed',
-      'inset-0',
-      'z-50',
-      'bg-black/80',
-      'data-[state=open]:animate-in',
-      'data-[state=closed]:animate-out',
-      'data-[state=closed]:fade-out-0',
-      'data-[state=open]:fade-in-0',
-      'pointer-events-auto',
-    )
-    elem.dataset.state = 'open'
-    elem.ariaHidden = true
-    elem.dataset.overlay = true
-    document.body.appendChild(elem)
-  }
-
-  removeOverlay() {
-    if (document.querySelector('[data-overlay]')) {
-      document.querySelector('[data-overlay]').remove()
-    }
-  }
-
   // Global listeners
   onDOMClick(event) {
     if (!this.isOpen()) return
 
     const target = event.target
     const trigger = event.target.closest(
-      '[data-shadcn-phlexcomponents--dialog-target="trigger"]',
+      `[data-${this.identifier}-target="trigger"]`,
     )
 
     if (trigger) return
 
-    const close = target.closest(
-      '[data-action*="shadcn-phlexcomponents--dialog#close"]',
-    )
+    const close = target.closest(`[data-action*="${this.identifier}#close"]`)
 
     if (
       close ||
       (target.dataset.action &&
-        target.dataset.action.includes('shadcn-phlexcomponents--dialog#close'))
+        target.dataset.action.includes(`${this.identifier}#close`))
     )
       this.close()
 
@@ -144,16 +111,4 @@ export default class extends Controller {
     document.removeEventListener('click', this.DOMClickListener)
     document.removeEventListener('keydown', this.DOMKeydownListener)
   }
-
-  addInert() {
-    Array.from(document.body.children)
-      .filter((el) => el !== this.contentElement)
-      .forEach((el) => el.setAttribute('inert', ''))
-  }
-
-  removeInert() {
-    Array.from(document.body.children)
-      .filter((el) => el.hasAttribute('inert'))
-      .forEach((el) => el.removeAttribute('inert'))
-  }
 }