shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -1,15 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  connect() {
-    this.sidebarId = this.element.dataset.sidebarId
-  }
-
-  toggle() {
-    const sidebar = this.application.getControllerForElementAndIdentifier(
-      document.querySelector(`#${this.sidebarId}`),
-      'sidebar',
-    )
-    sidebar.toggle()
-  }
-}

data/app/javascript/controllers/switch_controller.js

@@ -1,24 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  static targets = ['input']
-  static values = {
-    checked: Boolean,
-  }
-
-  toggle() {
-    this.checkedValue = !this.checkedValue
-  }
-
-  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/tabs_controller.js

@@ -1,73 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  static targets = ['trigger', 'content']
-  static values = {
-    selected: String,
-  }
-
-  connect() {
-    this.triggers = this.triggerTargets.filter((t) => !t.disabled)
-
-    if (!this.selectedValue) {
-      this.selectedValue = this.triggerTargets[0].dataset.value
-    }
-  }
-
-  setActiveTab(event) {
-    this.selectedValue = event.target.dataset.value
-  }
-
-  setActiveToPrev(event) {
-    const trigger = event.currentTarget
-    const index = this.triggers.indexOf(trigger)
-    let prevIndex = index - 1
-
-    if (index === 0) {
-      prevIndex = this.triggers.length - 1
-    }
-
-    this.selectedValue = this.triggers[prevIndex].dataset.value
-    this.triggers[prevIndex].focus()
-  }
-
-  setActiveToNext(event) {
-    const trigger = event.currentTarget
-    const index = this.triggers.indexOf(trigger)
-    let nextIndex = index + 1
-
-    if (index === this.triggers.length - 1) {
-      nextIndex = 0
-    }
-
-    this.selectedValue = this.triggers[nextIndex].dataset.value
-    this.triggers[nextIndex].focus()
-  }
-
-  selectedValueChanged(value) {
-    this.triggerTargets.forEach((trigger) => {
-      const triggerValue = trigger.dataset.value
-      const content = this.contentTargets.find((c) => {
-        return c.dataset.value === triggerValue
-      })
-
-      if (!content) {
-        throw new Error(
-          `Could not find TabsContent with value "${triggerValue}"`,
-        )
-      }
-
-      if (triggerValue === value) {
-        trigger.ariaSelected = true
-        trigger.tabIndex = 0
-        trigger.dataset.state = 'active'
-        content.classList.remove('hidden')
-      } else {
-        trigger.ariaSelected = false
-        trigger.tabIndex = -1
-        trigger.dataset.state = 'inactive'
-        content.classList.add('hidden')
-      }
-    })
-  }
-}

data/app/javascript/controllers/theme_switcher_controller.js

@@ -1,32 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  initialize() {
-    document.documentElement.classList.toggle(
-      'dark',
-      localStorage.theme === 'dark' ||
-        (!('theme' in localStorage) &&
-          window.matchMedia('(prefers-color-scheme: dark)').matches),
-    )
-  }
-
-  toggle() {
-    if (document.documentElement.classList.contains('dark')) {
-      localStorage.theme = 'light'
-      document.documentElement.classList.remove('dark')
-    } else {
-      localStorage.theme = 'dark'
-      document.documentElement.classList.add('dark')
-    }
-  }
-
-  setLightMode() {
-    localStorage.theme = 'light'
-    document.documentElement.classList.remove('dark')
-  }
-
-  setDarkMode() {
-    localStorage.theme = 'dark'
-    document.documentElement.classList.add('dark')
-  }
-}

data/app/javascript/controllers/toast_container_controller.js

@@ -1,22 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-  add({ title, description, variant = 'default' }) {
-    const template =
-      variant === 'default'
-        ? this.element.querySelector('[data-variant="default"]')
-        : this.element.querySelector('[data-variant="destructive"]')
-
-    const clone = template.content.cloneNode(true)
-
-    if (title) {
-      clone.querySelector('[data-title]').textContent = title
-    }
-
-    if (description) {
-      clone.querySelector('[data-description]').textContent = description
-    }
-
-    this.element.append(clone)
-  }
-}

data/app/javascript/controllers/toast_controller.js

@@ -1,45 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import { ANIMATION_OUT_DELAY } from '../utils'
-export default class extends Controller {
-  connect() {
-    this.focusableElements = this.element.querySelectorAll('button')
-    this.duration = Number(this.element.dataset.duration)
-
-    this.focusableElements.forEach((el) => {
-      el.addEventListener('focus', () => {
-        this.cancelDismiss()
-      })
-      el.addEventListener('blur', () => {
-        this.dismiss()
-      })
-    })
-
-    this.dismiss()
-  }
-
-  cancelDismiss() {
-    window.clearTimeout(this.timer)
-  }
-
-  close() {
-    this.element.dataset.state = 'closed'
-
-    setTimeout(() => {
-      this.element.remove()
-    }, ANIMATION_OUT_DELAY)
-  }
-
-  dismiss(event) {
-    if (event && event.type === 'mouseout') {
-      if (this.element.contains(document.activeElement)) {
-        return
-      }
-    }
-
-    if (this.duration > 0) {
-      this.timer = setTimeout(() => {
-        this.close()
-      }, this.duration)
-    }
-  }
-}

data/app/javascript/controllers/tooltip_controller.js

@@ -1,40 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import tippy from 'tippy.js'
-
-const hideOnEsc = {
-  name: 'hideOnEsc',
-  defaultValue: true,
-  fn({ hide }) {
-    function onKeyDown(event) {
-      if (event.keyCode === 27) {
-        hide()
-      }
-    }
-
-    return {
-      onShow() {
-        document.addEventListener('keydown', onKeyDown)
-      },
-      onHide() {
-        document.removeEventListener('keydown', onKeyDown)
-      },
-    }
-  },
-}
-
-export default class extends Controller {
-  static targets = ['trigger', 'content']
-
-  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],
-    })
-  }
-}

data/app/javascript/shadcn_phlexcomponents.js

@@ -1,53 +0,0 @@
-import AccordionController from './controllers/accordion_controller'
-import AlertDialogController from './controllers/alert_dialog_controller'
-import AvatarController from './controllers/avatar_controller'
-import CheckboxController from './controllers/checkbox_controller'
-import CollapsibleController from './controllers/collapsible_controller'
-import ComboboxController from './controllers/combobox_controller'
-import DatePickerController from './controllers/date_picker_controller'
-import DateRangePickerController from './controllers/date_range_picker_controller'
-import DialogController from './controllers/dialog_controller'
-import DropdownMenuController from './controllers/dropdown_menu_controller'
-import FormFieldController from './controllers/form_field_controller'
-import HoverCardController from './controllers/hover_card_controller'
-import LoadingButtonController from './controllers/loading_button_controller'
-import PopoverController from './controllers/popover_controller'
-import ProgressController from './controllers/progress_controller'
-import RadioGroupController from './controllers/radio_group_controller'
-import SelectController from './controllers/select_controller'
-import SidebarController from './controllers/sidebar_controller'
-import SidebarTriggerController from './controllers/sidebar_trigger_controller'
-import SwitchController from './controllers/switch_controller'
-import TabsController from './controllers/tabs_controller'
-import ThemeSwitcherController from './controllers/theme_switcher_controller'
-import ToastContainerController from './controllers/toast_container_controller'
-import ToastController from './controllers/toast_controller'
-import TooltipController from './controllers/tooltip_controller'
-
-export default {
-  accordion: AccordionController,
-  'alert-dialog': AlertDialogController,
-  avatar: AvatarController,
-  checkbox: CheckboxController,
-  collapsible: CollapsibleController,
-  combobox: ComboboxController,
-  'date-picker': DatePickerController,
-  'date-range-picker': DateRangePickerController,
-  dialog: DialogController,
-  'dropdown-menu': DropdownMenuController,
-  'form-field': FormFieldController,
-  'hover-card': HoverCardController,
-  'loading-button': LoadingButtonController,
-  popover: PopoverController,
-  progress: ProgressController,
-  'radio-group': RadioGroupController,
-  select: SelectController,
-  sidebar: SidebarController,
-  'sidebar-trigger': SidebarTriggerController,
-  switch: SwitchController,
-  tabs: TabsController,
-  'theme-switcher': ThemeSwitcherController,
-  'toast-container': ToastContainerController,
-  toast: ToastController,
-  tooltip: TooltipController,
-}

data/app/javascript/utils.js

@@ -1,184 +0,0 @@
-import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  autoUpdate,
-} from '@floating-ui/dom'
-
-const ANIMATION_OUT_DELAY = 125
-const FOCUS_DELAY = 100
-
-const getScrollbarWidth = () => {
-  // Create a temporary div container and append it into the body
-  const outer = document.createElement('div')
-  outer.style.visibility = 'hidden'
-  outer.style.overflow = 'scroll' // force scrollbars
-  outer.style.msOverflowStyle = 'scrollbar' // needed for some older versions of Edge
-  outer.style.width = '100px'
-  outer.style.position = 'absolute'
-  outer.style.top = '-9999px'
-  document.body.appendChild(outer)
-
-  // Create an inner div and place it inside the outer div
-  const inner = document.createElement('div')
-  inner.style.width = '100%'
-  outer.appendChild(inner)
-
-  // Calculate the scrollbar width
-  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
-
-  // Clean up
-  outer.remove()
-
-  return scrollbarWidth
-}
-
-const showOverlay = (classNames = '') => {
-  const element = document.createElement('div')
-  let defaultClassNames = [
-    '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',
-  ]
-  defaultClassNames = defaultClassNames.concat(
-    classNames.split(' ').filter((c) => !!c),
-  )
-
-  element.classList.add(...defaultClassNames)
-  element.dataset.state = 'open'
-  element.dataset.shadcnPhlexcomponentsOverlay = true
-  element.ariaHidden = true
-  document.body.appendChild(element)
-}
-
-const hideOverlay = () => {
-  const element = document.querySelector(
-    '[data-shadcn-phlexcomponents-overlay]',
-  )
-
-  if (element) {
-    element.dataset.state = 'closed'
-
-    setTimeout(() => {
-      element.remove()
-    }, ANIMATION_OUT_DELAY)
-  }
-}
-
-const lockScroll = () => {
-  if (window.innerHeight < document.documentElement.scrollHeight) {
-    document.body.dataset.scrollLocked = 1
-    const style = getComputedStyle(document.body)
-    const originalMarginRight = style.marginRight
-    document.body.dataset.marginRight = originalMarginRight
-    document.body.style.marginRight = `${getScrollbarWidth()}px`
-  }
-}
-
-const unlockScroll = () => {
-  if (document.body.dataset.scrollLocked) {
-    delete document.body.dataset.scrollLocked
-    const originalMarginRight = document.body.dataset.marginRight
-
-    if (parseInt(originalMarginRight) === 0) {
-      document.body.style.marginRight = ''
-    } else {
-      document.body.style.marginRight = originalMarginRight
-    }
-
-    delete document.body.dataset.marginRight
-  }
-}
-
-const addInert = (ignoredElements = []) => {
-  Array.from(document.body.children)
-    .filter((el) => !ignoredElements.includes(el))
-    .forEach((el) => el.setAttribute('inert', ''))
-}
-
-const removeInert = () => {
-  Array.from(document.body.children)
-    .filter((el) => el.hasAttribute('inert'))
-    .forEach((el) => el.removeAttribute('inert'))
-}
-
-const openWithOverlay = (ignoredElements = []) => {
-  showOverlay()
-  lockScroll()
-  addInert(ignoredElements)
-}
-
-const closeWithOverlay = () => {
-  hideOverlay()
-  unlockScroll()
-  removeInert()
-}
-
-const hideOnEsc = {
-  name: 'hideOnEsc',
-  defaultValue: true,
-  fn({ hide }) {
-    function onKeyDown(event) {
-      if (event.keyCode === 27) {
-        hide()
-      }
-    }
-
-    return {
-      onShow() {
-        document.addEventListener('keydown', onKeyDown)
-      },
-      onHide() {
-        document.removeEventListener('keydown', onKeyDown)
-      },
-    }
-  },
-}
-
-const initFloatingUi = (referenceElement, floatingElement, side) => {
-  return autoUpdate(referenceElement, floatingElement, () => {
-    computePosition(referenceElement, floatingElement, {
-      placement: side,
-      strategy: 'fixed',
-      middleware: [flip(), shift(), offset(4)],
-    }).then(({ x, y }) => {
-      Object.assign(floatingElement.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
-    })
-  })
-}
-
-const focusTrigger = (triggerTarget) => {
-  setTimeout(() => {
-    if (triggerTarget.dataset.asChild === 'false') {
-      triggerTarget.firstElementChild.focus()
-    } else {
-      triggerTarget.focus()
-    }
-  }, FOCUS_DELAY)
-}
-
-export {
-  ANIMATION_OUT_DELAY,
-  FOCUS_DELAY,
-  hideOnEsc,
-  showOverlay,
-  hideOverlay,
-  lockScroll,
-  unlockScroll,
-  addInert,
-  removeInert,
-  openWithOverlay,
-  closeWithOverlay,
-  initFloatingUi,
-  focusTrigger,
-}