shadcn_phlexcomponents 0.1.0 → 0.1.1

data/app/javascript/controllers/date_picker_controller.js

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

@@ -0,0 +1,231 @@
+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 {}
+    }
+  }
+}

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -174,7 +174,7 @@ export default class extends Controller {
 
     const key = event.key
 
-    if (key === 'Tab') event.preventDefault()
+    if (['Tab', 'Enter', ' '].includes(key)) event.preventDefault()
 
     if (key === 'Escape') {
       this.close()

data/app/javascript/controllers/hover_card_controller.js

@@ -1,135 +1,42 @@
 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']
-
-  connect() {
-    this.DOMClickListener = this.onDOMClick.bind(this)
-    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
-
-    if (this.triggerTarget.dataset.asChild === 'false') {
-      this.triggerTarget.firstElementChild.addEventListener('focus', () => {
-        this.open()
-      })
-
-      this.triggerTarget.firstElementChild.addEventListener('blur', () => {
-        this.close()
-      })
-    } else {
-      this.triggerTarget.addEventListener('focus', () => {
-        this.open()
-      })
-
-      this.triggerTarget.addEventListener('blur', () => {
-        this.close()
-      })
-    }
-  }
-
-  toggle() {
-    if (this.isOpen()) {
-      this.close()
-    } else {
-      this.openWithDelay()
+import tippy from 'tippy.js'
+
+const hideOnEsc = {
+  name: 'hideOnEsc',
+  defaultValue: true,
+  fn({ hide }) {
+    function onKeyDown(event) {
+      if (event.keyCode === 27) {
+        hide()
+      }
     }
-  }
-
-  isOpen() {
-    return this.triggerTarget.dataset.state === 'open'
-  }
 
-  open() {
-    this.contentWrapperTarget.classList.remove('hidden')
-    this.triggerTarget.dataset.state = 'open'
-    this.contentTarget.dataset.state = 'open'
-    this.setupEventListeners()
-
-    this.cleanup = autoUpdate(
-      this.triggerTarget,
-      this.contentWrapperTarget,
-      () => {
-        computePosition(this.triggerTarget, this.contentWrapperTarget, {
-          placement: this.element.dataset.side,
-          strategy: 'fixed',
-          middleware: [flip(), shift(), offset(4)],
-        }).then(({ x, y }) => {
-          Object.assign(this.contentWrapperTarget.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-        })
+    return {
+      onShow() {
+        document.addEventListener('keydown', onKeyDown)
+      },
+      onHide() {
+        document.removeEventListener('keydown', onKeyDown)
       },
-    )
-  }
-
-  close() {
-    if (!this.isOpen()) return
-
-    this.triggerTarget.dataset.state = 'closed'
-    this.contentTarget.dataset.state = 'closed'
-    this.cleanup()
-    this.cleanupEventListeners()
-
-    setTimeout(() => {
-      this.contentWrapperTarget.classList.add('hidden')
-    }, 100)
-  }
-
-  clearOpenTimer() {
-    window.clearTimeout(this.openTimer)
-  }
-
-  clearCloseTimer() {
-    window.clearTimeout(this.closeTimer)
-  }
-
-  openWithDelay() {
-    this.clearCloseTimer()
-
-    this.openTimer = setTimeout(() => {
-      this.open()
-    }, 500)
-  }
-
-  closeWithDelay() {
-    window.clearTimeout(this.openTimer)
-
-    this.closeTimer = setTimeout(() => {
-      this.close()
-    }, 300)
-  }
-
-  // Global listeners
-  onDOMClick(event) {
-    if (!this.isOpen()) return
-    if (this.element.contains(event.target)) return
-
-    this.close()
-  }
-
-  onDOMKeydown(event) {
-    if (!this.isOpen()) return
-    const key = event.key
-
-    if (key === 'Escape') {
-      this.close()
     }
-  }
+  },
+}
 
-  setupEventListeners() {
-    document.addEventListener('click', this.DOMClickListener)
-    document.addEventListener('keydown', this.DOMKeydownListener)
-  }
+export default class extends Controller {
+  static targets = ['trigger', 'content']
 
-  cleanupEventListeners() {
-    document.removeEventListener('click', this.DOMClickListener)
-    document.removeEventListener('keydown', this.DOMKeydownListener)
+  connect() {
+    const content = this.contentTarget.innerHTML
+
+    this.tippy = tippy(this.triggerTarget, {
+      content: content,
+      allowHTML: true,
+      interactive: true,
+      arrow: false,
+      placement: this.element.dataset.side,
+      plugins: [hideOnEsc],
+      offset: [0, 4],
+      delay: 250,
+    })
   }
 }

data/app/javascript/controllers/sidebar_controller.js

@@ -4,7 +4,6 @@ export default class extends Controller {
   static targets = ['panel', 'panelOffset']
 
   connect() {
-    console.log('sidebar coonnected')
     this.width = this.element.offsetWidth
   }
 

data/app/javascript/controllers/tooltip_controller.js

@@ -1,135 +1,41 @@
 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']
-
-  connect() {
-    this.DOMClickListener = this.onDOMClick.bind(this)
-    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
-
-    if (this.triggerTarget.dataset.asChild === 'false') {
-      this.triggerTarget.firstElementChild.addEventListener('focus', () => {
-        this.open()
-      })
-
-      this.triggerTarget.firstElementChild.addEventListener('blur', () => {
-        this.close()
-      })
-    } else {
-      this.triggerTarget.addEventListener('focus', () => {
-        this.open()
-      })
-
-      this.triggerTarget.addEventListener('blur', () => {
-        this.close()
-      })
-    }
-  }
-
-  toggle() {
-    if (this.isOpen()) {
-      this.close()
-    } else {
-      this.openWithDelay()
+import tippy from 'tippy.js'
+
+const hideOnEsc = {
+  name: 'hideOnEsc',
+  defaultValue: true,
+  fn({ hide }) {
+    function onKeyDown(event) {
+      if (event.keyCode === 27) {
+        hide()
+      }
     }
-  }
-
-  isOpen() {
-    return this.triggerTarget.dataset.state === 'open'
-  }
 
-  open() {
-    this.contentWrapperTarget.classList.remove('hidden')
-    this.triggerTarget.dataset.state = 'open'
-    this.contentTarget.dataset.state = 'open'
-    this.setupEventListeners()
-
-    this.cleanup = autoUpdate(
-      this.triggerTarget,
-      this.contentWrapperTarget,
-      () => {
-        computePosition(this.triggerTarget, this.contentWrapperTarget, {
-          placement: this.element.dataset.side,
-          strategy: 'fixed',
-          middleware: [flip(), shift(), offset(4)],
-        }).then(({ x, y }) => {
-          Object.assign(this.contentWrapperTarget.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-        })
+    return {
+      onShow() {
+        document.addEventListener('keydown', onKeyDown)
+      },
+      onHide() {
+        document.removeEventListener('keydown', onKeyDown)
       },
-    )
-  }
-
-  close() {
-    if (!this.isOpen()) return
-
-    this.contentTarget.dataset.state = 'closed'
-    this.triggerTarget.dataset.state = 'closed'
-    this.cleanup()
-    this.cleanupEventListeners()
-
-    setTimeout(() => {
-      this.contentWrapperTarget.classList.add('hidden')
-    }, 100)
-  }
-
-  clearOpenTimer() {
-    window.clearTimeout(this.openTimer)
-  }
-
-  clearCloseTimer() {
-    window.clearTimeout(this.closeTimer)
-  }
-
-  openWithDelay() {
-    this.clearCloseTimer()
-
-    this.openTimer = setTimeout(() => {
-      this.open()
-    }, 300)
-  }
-
-  closeWithDelay() {
-    window.clearTimeout(this.openTimer)
-
-    this.closeTimer = setTimeout(() => {
-      this.close()
-    }, 150)
-  }
-
-  // Global listeners
-  onDOMClick(event) {
-    if (!this.isOpen()) return
-    if (this.element.contains(event.target)) return
-
-    this.close()
-  }
-
-  onDOMKeydown(event) {
-    if (!this.isOpen()) return
-    const key = event.key
-
-    if (key === 'Escape') {
-      this.close()
     }
-  }
+  },
+}
 
-  setupEventListeners() {
-    document.addEventListener('click', this.DOMClickListener)
-    document.addEventListener('keydown', this.DOMKeydownListener)
-  }
+export default class extends Controller {
+  static targets = ['trigger', 'content']
 
-  cleanupEventListeners() {
-    document.removeEventListener('click', this.DOMClickListener)
-    document.removeEventListener('keydown', this.DOMKeydownListener)
+  connect() {
+    const content = this.contentTarget.innerHTML
+
+    tippy(this.triggerTarget, {
+      content: content,
+      allowHTML: true,
+      interactive: true,
+      arrow: false,
+      placement: this.element.dataset.side,
+      plugins: [hideOnEsc],
+      offset: [0, 4],
+    })
   }
 }