shadcn_phlexcomponents 0.1.5 → 0.1.11

data/app/javascript/controllers/alert_dialog_controller.js

@@ -1,157 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-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() {
-    this.showOverlay()
-    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
-  }
-
-  close() {
-    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)
-
-    this.focusTrigger()
-  }
-
-  focusTrigger() {
-    if (this.triggerTarget.dataset.asChild === 'false') {
-      this.triggerTarget.firstElementChild.focus()
-    } else {
-      this.triggerTarget.focus()
-    }
-  }
-
-  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--alert-dialog-target="trigger"]',
-    )
-
-    if (trigger) return
-
-    const close = target.closest(
-      '[data-action*="shadcn-phlexcomponents--alert-dialog#close"]',
-    )
-
-    if (
-      close ||
-      (target.dataset.action &&
-        target.dataset.action.includes(
-          'shadcn-phlexcomponents--alert-dialog#close',
-        ))
-    )
-      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)
-  }
-
-  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'))
-  }
-}

data/app/javascript/controllers/checkbox_controller.js

@@ -1,28 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  static targets = ['input']
-  static values = {
-    checked: Boolean,
-  }
-
-  toggle() {
-    this.checkedValue = !this.checkedValue
-  }
-
-  preventDefault(event) {
-    event.preventDefault()
-  }
-
-  checkedValueChanged(value) {
-    if (value === true) {
-      this.element.ariaChecked = true
-      this.element.dataset.checked = true
-      this.inputTarget.checked = true
-    } else {
-      this.element.ariaChecked = false
-      this.element.dataset.checked = false
-      this.inputTarget.checked = false
-    }
-  }
-}

data/app/javascript/controllers/collapsible_controller.js

@@ -1,35 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  static targets = ['trigger', 'content', 'item']
-
-  connect() {
-    if (this.isOpen()) {
-      this.open()
-    }
-  }
-
-  toggle() {
-    if (this.isOpen()) {
-      this.close()
-    } else {
-      this.open()
-    }
-  }
-
-  isOpen() {
-    return this.triggerTarget.ariaExpanded === 'true'
-  }
-
-  open() {
-    this.triggerTarget.ariaExpanded = true
-    this.triggerTarget.dataset.state = 'open'
-    this.contentTarget.classList.remove('hidden')
-  }
-
-  close() {
-    this.triggerTarget.ariaExpanded = false
-    this.triggerTarget.dataset.state = 'closed'
-    this.contentTarget.classList.add('hidden')
-  }
-}

data/app/javascript/controllers/combobox_controller.js

@@ -1,34 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import Choices from 'choices.js'
-export default class extends Controller {
-  static targets = ['select']
-
-  connect() {
-    if (this.element.dataset.value) {
-      const option = this.selectTarget.querySelector(
-        `[value=${this.element.dataset.value}]`,
-      )
-
-      if (option) {
-        option.selected = true
-      }
-    }
-
-    this.choices = new Choices(this.selectTarget, {
-      itemSelectText: '',
-      placeholderValue: this.element.dataset.placeholder,
-    })
-
-    if (this.element.dataset.includeBlank === 'false') {
-      this.choices.removeChoice('')
-    }
-
-    this.selectTarget.addEventListener(
-      'hideDropdown',
-      function () {
-        this.choices.containerOuter.element.focus()
-      }.bind(this),
-      false,
-    )
-  }
-}

data/app/javascript/controllers/date_picker_controller.js

@@ -1,118 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import { Calendar } from 'vanilla-calendar-pro'
-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 Controller {
-  static targets = ['dateInput', 'hiddenInput', 'clearButton', 'calendarIcon']
-
-  connect() {
-    this.date = this.element.dataset.value
-    this.format = this.element.dataset.format
-    const settings = this.getSettings()
-    settings.type = 'default'
-
-    if (this.date && dayjs(this.date).isValid()) {
-      const dayjsDate = dayjs(this.date)
-      const formattedDate = dayjsDate.format(this.format)
-      this.dateInputTarget.value = formattedDate
-      settings.selectedDates = [dayjsDate.format('YYYY-MM-DD')]
-    }
-
-    const calendar = new Calendar(this.dateInputTarget, {
-      inputMode: true,
-      enableJumpToSelectedDate: true,
-      ...settings,
-      onClickDate(self, event) {
-        const date = self.context.selectedDates[0]
-
-        const controllerElement = self.context.inputElement.closest(
-          '[data-controller="shadcn-phlexcomponents--date-picker"]',
-        )
-
-        const hiddenInput = controllerElement.querySelector(
-          '[data-shadcn-phlexcomponents--date-picker-target="hiddenInput"]',
-        )
-
-        if (date) {
-          const formattedDate = dayjs(date).format(
-            controllerElement.dataset.format,
-          )
-          self.context.inputElement.value = formattedDate
-          controllerElement.dataset.hasValue = 'true'
-          const utcDate = dayjs(date).utc().format()
-          hiddenInput.value = utcDate
-        } else {
-          self.context.inputElement.value = ''
-          controllerElement.dataset.hasValue = 'false'
-          hiddenInput.value = ''
-        }
-      },
-    })
-    calendar.init()
-
-    this.calendar = calendar
-  }
-
-  inputBlur() {
-    const date = this.calendar.selectedDates[0]
-
-    if (date) {
-      const formattedDate = dayjs(date).format(this.format)
-      this.dateInputTarget.value = formattedDate
-    }
-  }
-
-  changeDate(event) {
-    const value = event.target.value
-
-    if (value.length > 0 && dayjs(value, this.format, true).isValid()) {
-      const dayjsDate = dayjs(value, this.format)
-      this.calendar.set({
-        selectedDates: [dayjsDate.format('YYYY-MM-DD')],
-      })
-    }
-  }
-
-  closeCalendar(event) {
-    const key = event.key
-
-    if (key === 'Escape' || key === 'Tab') {
-      this.calendar.hide()
-    }
-  }
-
-  clear() {
-    this.dateInputTarget.value = ''
-    this.hiddenInputTarget.value = ''
-
-    this.calendar.set({
-      selectedDates: [],
-    })
-
-    this.element.dataset.hasValue = 'false'
-  }
-
-  showClearButton() {
-    if (this.element.dataset.hasValue === 'true') {
-      this.clearButtonTarget.classList.remove('!hidden')
-      this.calendarIconTarget.classList.add('hidden')
-    }
-  }
-
-  hideClearButton() {
-    this.clearButtonTarget.classList.add('!hidden')
-    this.calendarIconTarget.classList.remove('hidden')
-  }
-
-  getSettings() {
-    try {
-      return JSON.parse(this.element.dataset.settings)
-    } catch {
-      return {}
-    }
-  }
-}

data/app/javascript/controllers/date_range_picker_controller.js

@@ -1,231 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import { Calendar } from 'vanilla-calendar-pro'
-import dayjs from 'dayjs'
-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 {
-  static targets = [
-    'startDateInput',
-    'endDateInput',
-    'startDateHiddenInput',
-    'endDateHiddenInput',
-    'clearButton',
-    'calendarIcon',
-  ]
-
-  connect() {
-    this.startDate = this.element.dataset.startDate
-    this.endDate = this.element.dataset.endDate
-    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')]
-    }
-
-    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'),
-      ]
-    }
-
-    const calendar = new Calendar(this.element, {
-      inputMode: true,
-      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 = ''
-        }
-      },
-    })
-    calendar.init()
-
-    this.calendar = calendar
-  }
-
-  openCalendar(event) {
-    this.calendar.show()
-  }
-
-  closeCalendar(event) {
-    const key = event.key
-
-    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
-    }
-  }
-
-  changeDate(event) {
-    const value = event.target.value
-    const dates = this.calendar.selectedDates.filter((date) => !!date)
-
-    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'
-      }
-    } 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'
-      }
-    }
-  }
-
-  openCalendar() {
-    setTimeout(() => {
-      this.calendar.show()
-    }, 125)
-  }
-
-  clear() {
-    this.startDateInputTarget.value = ''
-
-    if (this.hasEndDateInputTarget) {
-      this.endDateInputTarget.value = ''
-    }
-
-    this.calendar.set({
-      selectedDates: [],
-    })
-
-    this.element.dataset.hasValue = 'false'
-  }
-
-  showClearButton() {
-    if (this.element.dataset.hasValue === 'true') {
-      this.clearButtonTarget.classList.remove('!hidden')
-      this.calendarIconTarget.classList.add('hidden')
-    }
-  }
-
-  hideClearButton() {
-    this.clearButtonTarget.classList.add('!hidden')
-    this.calendarIconTarget.classList.remove('hidden')
-  }
-
-  getSettings() {
-    try {
-      return JSON.parse(this.element.dataset.settings)
-    } catch {
-      return {}
-    }
-  }
-}