shadcn_phlexcomponents 0.1.0

data/app/javascript/controllers/alert_dialog_controller.js

@@ -0,0 +1,157 @@
+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/avatar_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['image', 'fallback']
+
+  connect() {
+    this.imageTarget.onerror = () => {
+      if (this.hasFallbackTarget) {
+        this.fallbackTarget.classList.remove('hidden')
+      }
+
+      this.imageTarget.classList.add('hidden')
+    }
+  }
+}

data/app/javascript/controllers/checkbox_controller.js

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,291 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from '@floating-ui/dom'
+
+export default class extends Controller {
+  static targets = [
+    'trigger',
+    'contentWrapper',
+    'content',
+    'item',
+    'triggerText',
+    'itemCheckIcon',
+    'select',
+    'searchInput',
+  ]
+
+  static values = {
+    selected: String,
+  }
+
+  connect() {
+    this.contentTarget.dataset.state = this.isOpen() ? 'open' : 'closed'
+    this.clickOutsideListener = this.onClickOutside.bind(this)
+    this.comboboxKeydownListener = this.onComboboxKeydown.bind(this)
+    this.searchInputKeydownListener = this.debounce(
+      this.onSearchInputKeydown.bind(this),
+      100,
+    )
+
+    this.items = [
+      ...this.element.querySelectorAll(
+        '[data-shadcn-phlexcomponents--combobox-target="item"]:not([data-disabled])',
+      ),
+    ]
+  }
+
+  // Methods
+  toggle() {
+    if (this.isOpen()) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    const triggerWidth = this.triggerTarget.offsetWidth
+    this.contentWrapperTarget.classList.remove('hidden')
+
+    const contentWrapperWidth = this.contentWrapperTarget.offsetWidth
+
+    if (contentWrapperWidth < triggerWidth) {
+      this.contentWrapperTarget.style.width = `${triggerWidth}px`
+    }
+
+    this.searchInputTarget.focus()
+
+    if (this.selectedValue) {
+      const item = this.itemTargets.find(
+        (i) => i.dataset.value === this.selectedValue,
+      )
+      const index = this.items.indexOf(item)
+      if (index > -1) {
+        this.highlightItem(index)
+      }
+    } else {
+      this.highlightItem(0)
+    }
+
+    this.triggerTarget.ariaExpanded = true
+    this.contentTarget.dataset.state = 'open'
+
+    if (window.innerHeight < document.documentElement.scrollHeight) {
+      document.body.dataset.scrollLocked = 1
+    }
+    this.setupEventListeners()
+
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentWrapperTarget,
+      () => {
+        computePosition(this.triggerTarget, this.contentWrapperTarget, {
+          placement: 'bottom',
+          strategy: 'fixed',
+          middleware: [flip(), shift(), offset(4)],
+        }).then(({ x, y }) => {
+          Object.assign(this.contentWrapperTarget.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          })
+        })
+      },
+    )
+  }
+
+  close() {
+    this.contentTarget.dataset.state = 'closed'
+    this.triggerTarget.ariaExpanded = false
+    this.cleanup()
+    this.cleanupEventListeners()
+    delete document.body.dataset.scrollLocked
+
+    setTimeout(() => {
+      this.contentWrapperTarget.classList.add('hidden')
+    }, 100)
+
+    if (this.triggerTarget.nodeName === 'DIV') {
+      this.triggerTarget.firstElementChild.focus()
+    } else {
+      this.triggerTarget.focus()
+    }
+  }
+
+  isOpen() {
+    return this.triggerTarget.ariaExpanded === 'true'
+  }
+
+  highlightItem(selectedIndex) {
+    const item = this.items[selectedIndex]
+    console.log('this.highlightItem', item)
+    item.dataset.selected = true
+
+    this.items.forEach((item, index) => {
+      if (index !== selectedIndex) item.dataset.selected = false
+    })
+  }
+
+  currentHighlightedIndex() {
+    console.log('item')
+    const item = this.items.find((i) => i.dataset.selected === 'true')
+    return this.items.indexOf(item)
+    console.log('item', item)
+
+    // if (item) {
+    //   return this.items.indexOf(item)
+    // }
+
+    // return 0
+  }
+
+  debounce(callback, wait) {
+    let timeoutId = null
+    return (...args) => {
+      window.clearTimeout(timeoutId)
+      timeoutId = window.setTimeout(() => {
+        callback.apply(null, args)
+      }, wait)
+    }
+  }
+
+  onSearchInputKeydown(event) {
+    // console.log('search ecet', event)
+    this.filterItems()
+  }
+
+  onArrowUpKeydown(event) {
+    const index = this.currentHighlightedIndex()
+    console.log('onArrowUpKeydown index', index)
+
+    if (index > 0) {
+      this.highlightItem(index - 1)
+    }
+
+    event.preventDefault()
+  }
+
+  onArrowDownKeydown(event) {
+    const index = this.currentHighlightedIndex()
+
+    console.log('onArrowDownKeydown index', index)
+
+    console.log('index + 1 < this.items.length', index + 1 < this.items.length)
+    if (index + 1 < this.items.length) {
+      this.highlightItem(index + 1)
+    }
+
+    event.preventDefault()
+  }
+
+  selectItem(event) {
+    const index = this.currentHighlightedIndex()
+    const item = this.items[index]
+    item.click()
+    event.preventDefault()
+  }
+
+  filterItems = () => {
+    const search = this.searchInputTarget.value
+    const filteredItems = this.items.filter((i) =>
+      i.innerText.toLowerCase().includes(search),
+    )
+
+    this.items.forEach((i) => {
+      if (filteredItems.includes(i)) {
+        i.classList.remove('hidden')
+      } else {
+        i.classList.add('hidden')
+      }
+    })
+
+    this.highlightItem(this.filterItems[0])
+  }
+
+  onItemClick(event) {
+    const item = event.currentTarget
+    const value = item.dataset.value
+    this.selectedValue = value
+    this.close()
+  }
+
+  onMouseOver(event) {
+    const item = event.currentTarget
+    const index = this.items.indexOf(item)
+    this.highlightItem(index)
+  }
+
+  selectedValueChanged(value) {
+    const item = this.itemTargets.find((i) => i.dataset.value === value)
+
+    this.itemCheckIconTargets.forEach((i) => {
+      i.classList.add('hidden')
+    })
+
+    if (item) {
+      this.triggerTextTarget.innerText = item.innerText
+
+      const checkIcon = item.querySelector(
+        '[data-shadcn-phlexcomponents--combobox-target="itemCheckIcon"]',
+      )
+      if (value.length > 0) checkIcon.classList.remove('hidden')
+
+      this.itemTargets.forEach((i) => {
+        if (i.dataset.value === value) {
+          i.setAttribute('aria-selected', 'true')
+        } else {
+          i.setAttribute('aria-selected', 'false')
+        }
+      })
+
+      this.selectTarget.value = value
+    }
+
+    delete this.triggerTarget.dataset.placeholder
+    const hasPlaceholder = this.triggerTarget.dataset.placeholderText
+
+    if (hasPlaceholder) {
+      if (!value || value.length === 0) {
+        this.triggerTarget.dataset.placeholder = true
+        this.triggerTextTarget.innerText = hasPlaceholder
+      }
+    }
+  }
+
+  // Global listeners
+  onClickOutside(event) {
+    const htmlFor = event.target.htmlFor
+
+    if (htmlFor === this.triggerTarget.id) return
+    if (event.target) if (this.element.contains(event.target)) return
+
+    this.close()
+  }
+
+  onComboboxKeydown(event) {
+    if (!this.isOpen()) return
+
+    const key = event.key
+    if (key === 'Tab') event.preventDefault()
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('click', this.clickOutsideListener)
+    document.addEventListener('keydown', this.comboboxKeydownListener)
+    document.addEventListener('keydown', this.searchInputKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('click', this.clickOutsideListener)
+    document.removeEventListener('keydown', this.comboboxKeydownListener)
+    document.removeEventListener('keydown', this.searchInputKeydownListener)
+  }
+}

data/app/javascript/controllers/datepicker_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from '@hotwired/stimulus'
+import { Calendar } from 'vanilla-calendar-pro'
+import { getDateString, parseDates } from 'vanilla-calendar-pro/utils'
+import dayjs from 'dayjs'
+
+export default class extends Controller {
+  connect() {
+    this.date = new Date(this.element.dataset.value)
+    this.format = this.element.dataset.format
+    const settings = this.getSettings()
+
+    if (!isNaN(this.date.getTime())) {
+      const dateString = getDateString(this.date)
+      const formattedDate = this.format
+        ? dayjs(this.date).format(this.format)
+        : this.date.toLocaleDateString()
+      this.element.value = formattedDate
+      settings.selectedDates = [dateString]
+    }
+
+    const calendar = new Calendar(this.element, {
+      inputMode: true,
+      enableJumpToSelectedDate: true,
+      ...settings,
+      onClickDate(self, event) {
+        const date = self.context.selectedDates[0]
+        const formattedDate = self.context.inputElement.dataset.format
+          ? dayjs(date).format(self.context.inputElement.dataset.format)
+          : new Date(date).toLocaleDateString()
+
+        self.context.inputElement.value = formattedDate
+        self.hide()
+      },
+    })
+    calendar.init()
+
+    this.calendar = calendar
+  }
+
+  getSettings() {
+    try {
+      return JSON.parse(this.element.dataset.settings)
+    } catch {
+      return {}
+    }
+  }
+}