shadcn_phlexcomponents 0.1.5 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 210b2eb6c1822030026320c38e93ccd0b917c07a76abe13f5bbf2f7b77033898
-  data.tar.gz: 9122e7c0acfde18b7c52177b435b40e88efd872a1b8e6bfa2c4702a794e0e5bc
+  metadata.gz: f01a8b6d7fd3e2f4727726449999ee8e1df8f4385399a045de46390713886e7a
+  data.tar.gz: 1fc407c7488a6bba53a23e77a1e912e294dec1c0407fba97abf5ea2d2cf02820
 SHA512:
-  metadata.gz: cd7a07542caf9b43afe55355fcdd09855b60bc5f54ac0f8fc3c5a83e35ef654f458c8006baa91afddb1667b9d526916d3758e9f50e6d3e7fd50a8607dfd32979
-  data.tar.gz: 37510ade39630444cf92d938b197462c78d21a7a41ceae9db67300e24806b70c2ba4391a7eeb3b9ab86ee5ef38427dd98693e1518252f764ef5a3b718834fda6
+  metadata.gz: 532c2cddc7f12c798babf37d1e1248ac0034a44b2c359e7fb60e2e481a6be4f83655cff30adc93633f00b3b2bda4df853b1189e097ee65de5335f1016331ad09
+  data.tar.gz: 74d475a2b3e633f38db546d8ee820ae788a9abf2becd4699ac1c6b3ff5f5557635a3838791d9cba75764b5184a08794c1107d01a913eb996d2aa3dc238a53b21

data/README.md

@@ -37,3 +37,17 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/[USERN
 ## Code of Conduct
 
 Everyone interacting in the ShadcnPhlexcomponents project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/shadcn_phlexcomponents/blob/main/CODE_OF_CONDUCT.md).
+
+## [Unreleased] - YYYY-MM-DD
+
+### Added
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+### Security

data/app/javascript/controllers/accordion_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
+import { ANIMATION_OUT_DELAY } from '../utils'
 
 export default class extends Controller {
   static targets = ['trigger', 'content', 'item']
@@ -55,9 +56,7 @@ export default class extends Controller {
   toggleItem(event) {
     const trigger = event.currentTarget || event.target
 
-    const item = trigger.closest(
-      '[data-shadcn-phlexcomponents--accordion-target="item"]',
-    )
+    const item = trigger.closest('[data-accordion-target="item"]')
 
     if (item.dataset.state === 'open') {
       this.closeItem(item)
@@ -75,12 +74,8 @@ export default class extends Controller {
   }
 
   openItem(item) {
-    const button = item.querySelector(
-      '[data-shadcn-phlexcomponents--accordion-target="trigger"]',
-    )
-    const content = item.querySelector(
-      '[data-shadcn-phlexcomponents--accordion-target="content"]',
-    )
+    const button = item.querySelector('[data-accordion-target="trigger"]')
+    const content = item.querySelector('[data-accordion-target="content"]')
 
     item.dataset.state = 'open'
     button.ariaExpanded = true
@@ -90,12 +85,8 @@ export default class extends Controller {
   }
 
   closeItem(item) {
-    const button = item.querySelector(
-      '[data-shadcn-phlexcomponents--accordion-target="trigger"]',
-    )
-    const content = item.querySelector(
-      '[data-shadcn-phlexcomponents--accordion-target="content"]',
-    )
+    const button = item.querySelector('[data-accordion-target="trigger"]')
+    const content = item.querySelector('[data-accordion-target="content"]')
 
     item.dataset.state = 'closed'
     button.ariaExpanded = false
@@ -104,7 +95,7 @@ export default class extends Controller {
 
     setTimeout(() => {
       content.classList.add('hidden')
-    }, 150)
+    }, ANIMATION_OUT_DELAY)
   }
 
   focusNext(event) {

data/app/javascript/controllers/alert_dialog_controller.js

@@ -1,157 +1,21 @@
-import { Controller } from '@hotwired/stimulus'
+import DialogController from './dialog_controller'
 
-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
+export default class extends DialogController {
   onDOMClick(event) {
     if (!this.isOpen()) return
 
     const target = event.target
-    const trigger = event.target.closest(
-      '[data-shadcn-phlexcomponents--alert-dialog-target="trigger"]',
-    )
+    const trigger = event.target.closest('[data-alert-dialog-target="trigger"]')
 
     if (trigger) return
 
-    const close = target.closest(
-      '[data-action*="shadcn-phlexcomponents--alert-dialog#close"]',
-    )
+    const close = target.closest('[data-action*="alert-dialog#close"]')
 
     if (
       close ||
       (target.dataset.action &&
-        target.dataset.action.includes(
-          'shadcn-phlexcomponents--alert-dialog#close',
-        ))
+        target.dataset.action.includes('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/combobox_controller.js

@@ -1,9 +1,12 @@
 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}]`,
@@ -23,12 +26,29 @@ export default class extends Controller {
       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,113 +1,145 @@
-import { Controller } from '@hotwired/stimulus'
+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 Controller {
-  static targets = ['dateInput', 'hiddenInput', 'clearButton', 'calendarIcon']
+export default class extends PopoverController {
+  static targets = [
+    'trigger',
+    'triggerText',
+    'contentWrapper',
+    'content',
+    'input',
+    'hiddenInput',
+    'inputContainer',
+    'calendar',
+  ]
+
+  static values = {
+    date: String,
+  }
 
   connect() {
-    this.date = this.element.dataset.value
+    super.connect()
+
+    const 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')]
+    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
     }
 
-    const calendar = new Calendar(this.dateInputTarget, {
-      inputMode: true,
+    this.calendar = new Calendar(this.calendarTarget, {
       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 = ''
-        }
-      },
+      onClickDate: this.onClickDateListener,
     })
-    calendar.init()
 
-    this.calendar = calendar
+    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() {
-    const date = this.calendar.selectedDates[0]
+    let dateDisplay = ''
+    const date = this.calendar.context.selectedDates[0]
 
     if (date) {
-      const formattedDate = dayjs(date).format(this.format)
-      this.dateInputTarget.value = formattedDate
+      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)
+      const dayjsDate = dayjs(value, this.format).format('YYYY-MM-DD')
       this.calendar.set({
-        selectedDates: [dayjsDate.format('YYYY-MM-DD')],
+        selectedDates: [dayjsDate],
       })
+      this.dateValue = dayjsDate
     }
   }
 
-  closeCalendar(event) {
-    const key = event.key
+  onOpen() {
+    setTimeout(() => {
+      this.focusCalendar()
+    }, FOCUS_DELAY * 1.5)
 
-    if (key === 'Escape' || key === 'Tab') {
-      this.calendar.hide()
+    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')
   }
 
-  clear() {
-    this.dateInputTarget.value = ''
-    this.hiddenInputTarget.value = ''
+  focusCalendar() {
+    const focusableElements = this.contentTarget.querySelectorAll(
+      'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])',
+    )
 
-    this.calendar.set({
-      selectedDates: [],
-    })
+    const selectedElement = Array.from(focusableElements).find(
+      (e) => e.ariaSelected,
+    )
 
-    this.element.dataset.hasValue = 'false'
-  }
+    const currentElement = this.contentTarget.querySelector('[aria-current]')
 
-  showClearButton() {
-    if (this.element.dataset.hasValue === 'true') {
-      this.clearButtonTarget.classList.remove('!hidden')
-      this.calendarIconTarget.classList.add('hidden')
+    if (selectedElement) {
+      selectedElement.focus()
+    } else if (currentElement) {
+      currentElement.firstElementChild.focus()
     }
   }
 
-  hideClearButton() {
-    this.clearButtonTarget.classList.add('!hidden')
-    this.calendarIconTarget.classList.remove('hidden')
-  }
-
   getSettings() {
     try {
       return JSON.parse(this.element.dataset.settings)
@@ -115,4 +147,107 @@ export default class extends Controller {
       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 = ''
+    }
+  }
 }