shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/javascript/controllers/date_picker_controller.js

@@ -1,253 +0,0 @@
-import {
-  FOCUS_DELAY,
-  initFloatingUi,
-  showOverlay,
-  hideOverlay,
-  lockScroll,
-  unlockScroll,
-} from '../utils'
-import { Calendar } 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)
-
-export default class extends PopoverController {
-  static targets = [
-    'trigger',
-    'triggerText',
-    'contentWrapper',
-    'content',
-    'input',
-    'hiddenInput',
-    'inputContainer',
-    'calendar',
-  ]
-
-  static values = {
-    date: String,
-  }
-
-  connect() {
-    super.connect()
-
-    const date = this.element.dataset.value
-    this.format = this.element.dataset.format
-
-    const settings = this.getSettings()
-    settings.type = 'default'
-
-    this.onClickDateListener = this.onClickDate.bind(this)
-
-    if (date && dayjs(date).isValid()) {
-      const dayjsDate = dayjs(date).format('YYYY-MM-DD')
-      settings.selectedDates = [dayjsDate]
-      this.dateValue = dayjsDate
-    }
-
-    this.calendar = new Calendar(this.calendarTarget, {
-      enableJumpToSelectedDate: true,
-      ...settings,
-      onClickDate: this.onClickDateListener,
-    })
-
-    this.calendar.init()
-
-    if (this.hasInputTarget) {
-      const im = new Inputmask(this.format.replace(/[^\/]/g, '9'), {
-        showMaskOnHover: false,
-      })
-      im.mask(this.inputTarget)
-    }
-
-    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
-  }
-
-  changeDate(event) {
-    const value = event.target.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('YYYY-MM-DD')
-      this.calendar.set({
-        selectedDates: [dayjsDate],
-      })
-      this.dateValue = dayjsDate
-    }
-  }
-
-  onOpen() {
-    setTimeout(() => {
-      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`
-    }
-
-    if (window.innerWidth <= 640) {
-      lockScroll()
-    }
-    showOverlay('md:hidden')
-  }
-
-  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()
-    }
-  }
-
-  getSettings() {
-    try {
-      return JSON.parse(this.element.dataset.settings)
-    } catch {
-      return {}
-    }
-  }
-
-  onDOMKeydown(event) {
-    if (!this.isOpen()) return
-
-    const key = event.key
-
-    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
-    // 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()
-    if (window.innerWidth <= 640) {
-      unlockScroll()
-    }
-  }
-
-  onClickDate(self, event) {
-    const date = self.context.selectedDates[0]
-
-    if (date) {
-      this.dateValue = date
-      this.close()
-    } else {
-      this.dateValue = ''
-    }
-  }
-
-  dateValueChanged(value) {
-    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 = ''
-    }
-  }
-}

data/app/javascript/controllers/date_range_picker_controller.js

@@ -1,344 +0,0 @@
-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)
-
-const DELIMITER = ' - '
-
-export default class extends PopoverController {
-  static targets = [
-    'trigger',
-    'triggerText',
-    'contentWrapper',
-    'content',
-    'input',
-    'startDateHiddenInput',
-    'endDateHiddenInput',
-    'inputContainer',
-    'calendar',
-  ]
-
-  static values = {
-    startDate: String,
-    endDate: String,
-  }
-
-  connect() {
-    super.connect()
-
-    this.format = this.element.dataset.format
-    const settings = this.getSettings()
-    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 (endDate && dayjs(endDate).isValid()) {
-      const date = dayjs(endDate).format('YYYY-MM-DD')
-      settings.selectedDates.push(date)
-      this.endDateValue = date
-    }
-
-    this.calendar = new Calendar(this.calendarTarget, {
-      enableJumpToSelectedDate: true,
-      ...settings,
-      onClickDate: this.onClickDateListener,
-    })
-
-    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)
-    }
-
-    this.calendarTarget.removeAttribute('tabindex')
-  }
-
-  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
-  }
-
-  changeDate(event) {
-    const value = event.target.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 = this.calendar.context.selectedDates
-
-      if (dayjs(startDate, this.format, true).isValid()) {
-        const dayjsDate = dayjs(value, this.format).format('YYYY-MM-DD')
-        selectedDates[0] = dayjsDate
-      }
-
-      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 = ''
-    }
-  }
-
-  onOpen() {
-    setTimeout(() => {
-      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')
-  }
-
-  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()
-    }
-  }
-
-  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
-    }
-  }
-
-  onDOMKeydown(event) {
-    if (!this.isOpen()) return
-
-    const key = event.key
-
-    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()
-  }
-
-  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 = ''
-    }
-  }
-
-  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
-      }
-    }
-  }
-
-  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,114 +0,0 @@
-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']
-
-  connect() {
-    this.DOMClickListener = this.onDOMClick.bind(this)
-    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
-
-    this.focusableElements = this.contentTarget.querySelectorAll(
-      'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])',
-    )
-
-    this.firstElement = this.focusableElements[0]
-    this.lastElement = this.focusableElements[this.focusableElements.length - 1]
-    this.contentElement = document.querySelector(`#${this.contentTarget.id}`)
-  }
-
-  open() {
-    openWithOverlay([this.contentElement])
-    this.contentElement.classList.remove('hidden')
-    this.contentElement.dataset.state = 'open'
-    this.triggerTarget.ariaExpanded = true
-    this.setupEventListeners()
-
-    document.body.appendChild(this.contentElement)
-
-    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.element.appendChild(this.contentElement)
-
-    setTimeout(() => {
-      this.contentElement.classList.add('hidden')
-    }, ANIMATION_OUT_DELAY)
-
-    focusTrigger(this.triggerTarget)
-  }
-
-  isOpen() {
-    return this.triggerTarget.ariaExpanded === 'true'
-  }
-
-  // Global listeners
-  onDOMClick(event) {
-    if (!this.isOpen()) return
-
-    const target = event.target
-    const trigger = event.target.closest(
-      `[data-${this.identifier}-target="trigger"]`,
-    )
-
-    if (trigger) return
-
-    const close = target.closest(`[data-action*="${this.identifier}#close"]`)
-
-    if (
-      close ||
-      (target.dataset.action &&
-        target.dataset.action.includes(`${this.identifier}#close`))
-    )
-      this.close()
-
-    if (this.contentElement.contains(event.target)) return
-
-    this.close()
-  }
-
-  onDOMKeydown(event) {
-    if (!this.isOpen()) return
-
-    const key = event.key
-
-    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 === this.firstElement) {
-        event.preventDefault()
-        this.lastElement.focus()
-      }
-      // If Tab pressed on last element, go to first element
-      else if (!event.shiftKey && document.activeElement === this.lastElement) {
-        event.preventDefault()
-        this.firstElement.focus()
-      }
-    }
-  }
-
-  setupEventListeners() {
-    document.addEventListener('click', this.DOMClickListener)
-    document.addEventListener('keydown', this.DOMKeydownListener)
-  }
-
-  cleanupEventListeners() {
-    document.removeEventListener('click', this.DOMClickListener)
-    document.removeEventListener('keydown', this.DOMKeydownListener)
-  }
-}