shadcn_phlexcomponents 0.1.9 → 0.1.11

data/app/javascript/controllers/accordion_controller.js

@@ -1,124 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import { ANIMATION_OUT_DELAY } from '../utils'
-
-export default class extends Controller {
-  static targets = ['trigger', 'content', 'item']
-
-  connect() {
-    this.triggers = this.triggerTargets.filter((t) => !t.disabled)
-    this.multiple = this.element.dataset.multiple === 'true'
-    const value = JSON.parse(this.element.dataset.value)
-
-    this.itemTargets.forEach((i) => {
-      if (value.includes(i.dataset.value)) {
-        this.openItem(i)
-      } else {
-        this.closeItem(i)
-      }
-    })
-
-    setTimeout(() => {
-      this.contentTargets.forEach((c) => {
-        this.setContentHeight(c)
-      })
-    }, 200)
-  }
-
-  setContentHeight(element) {
-    const height = this.getContentHeight(element)
-    element.style.setProperty('--accordion-content-height', `${height}px`)
-  }
-
-  getContentHeight(element) {
-    // Store the original styles we need to modify
-    const originalStyles = {
-      display: element.style.display,
-      visibility: element.style.visibility,
-      position: element.style.position,
-    }
-
-    // Make the element visible but not displayed
-    element.style.display = 'block' // or whatever is appropriate (flex, inline, etc.)
-    element.style.visibility = 'hidden'
-    element.style.position = 'absolute'
-
-    // Get the height
-    const height = element.offsetHeight
-
-    // Restore the original styles
-    element.style.display = originalStyles.display
-    element.style.visibility = originalStyles.visibility
-    element.style.position = originalStyles.position
-
-    return height
-  }
-
-  toggleItem(event) {
-    const trigger = event.currentTarget || event.target
-
-    const item = trigger.closest('[data-accordion-target="item"]')
-
-    if (item.dataset.state === 'open') {
-      this.closeItem(item)
-    } else {
-      this.openItem(item)
-    }
-
-    if (!this.multiple) {
-      this.itemTargets.forEach((i) => {
-        if (i !== item) {
-          this.closeItem(i)
-        }
-      })
-    }
-  }
-
-  openItem(item) {
-    const button = item.querySelector('[data-accordion-target="trigger"]')
-    const content = item.querySelector('[data-accordion-target="content"]')
-
-    item.dataset.state = 'open'
-    button.ariaExpanded = true
-    button.dataset.state = 'open'
-    content.dataset.state = 'open'
-    content.classList.remove('hidden')
-  }
-
-  closeItem(item) {
-    const button = item.querySelector('[data-accordion-target="trigger"]')
-    const content = item.querySelector('[data-accordion-target="content"]')
-
-    item.dataset.state = 'closed'
-    button.ariaExpanded = false
-    button.dataset.state = 'closed'
-    content.dataset.state = 'closed'
-
-    setTimeout(() => {
-      content.classList.add('hidden')
-    }, ANIMATION_OUT_DELAY)
-  }
-
-  focusNext(event) {
-    const trigger = event.currentTarget || event.target
-    const index = this.triggers.indexOf(trigger)
-    let nextIndex = index + 1
-
-    if (index === this.triggers.length - 1) {
-      nextIndex = 0
-    }
-
-    this.triggers[nextIndex].focus()
-  }
-
-  focusPrev(event) {
-    const trigger = event.currentTarget || event.target
-    const index = this.triggers.indexOf(trigger)
-    let prevIndex = index - 1
-
-    if (index === 0) {
-      prevIndex = this.triggers.length - 1
-    }
-
-    this.triggers[prevIndex].focus()
-  }
-}

data/app/javascript/controllers/alert_dialog_controller.js

@@ -1,21 +0,0 @@
-import DialogController from './dialog_controller'
-
-export default class extends DialogController {
-  onDOMClick(event) {
-    if (!this.isOpen()) return
-
-    const target = event.target
-    const trigger = event.target.closest('[data-alert-dialog-target="trigger"]')
-
-    if (trigger) return
-
-    const close = target.closest('[data-action*="alert-dialog#close"]')
-
-    if (
-      close ||
-      (target.dataset.action &&
-        target.dataset.action.includes('alert-dialog#close'))
-    )
-      this.close()
-  }
-}

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,54 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import Choices from 'choices.js'
-
-export default class extends Controller {
-  static targets = ['select']
-
-  connect() {
-    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
-
-    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(
-      'showDropdown',
-      function () {
-        document.addEventListener('keydown', this.DOMKeydownListener)
-      }.bind(this),
-      false,
-    )
-
-    this.selectTarget.addEventListener(
-      'hideDropdown',
-      function () {
-        this.choices.containerOuter.element.focus()
-        document.removeEventListener('keydown', this.DOMKeydownListener)
-      }.bind(this),
-      false,
-    )
-  }
-
-  onDOMKeydown(event) {
-    const key = event.key
-
-    if (key === 'Tab') {
-      event.preventDefault()
-    }
-  }
-}

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 = ''
-    }
-  }
-}