shadcn_phlexcomponents 0.1.5 → 0.1.11

data/app/javascript/controllers/select_controller.js

@@ -1,294 +0,0 @@
-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',
-    'group',
-    'label',
-    'select',
-  ]
-
-  static values = {
-    selected: String,
-  }
-
-  connect() {
-    this.DOMClickListener = this.onDOMClick.bind(this)
-    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
-
-    this.setAriaLabelledby()
-
-    this.items = [
-      ...this.element.querySelectorAll(
-        '[data-shadcn-phlexcomponents--select-target="item"]:not([data-disabled])',
-      ),
-    ]
-
-    this.search = ''
-    this.searchTimer = null
-    this.resetSearchTimer = null
-  }
-
-  // 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.triggerTarget.ariaExpanded = true
-    this.contentTarget.dataset.state = 'open'
-
-    if (this.selectedValue) {
-      const item = this.itemTargets.find(
-        (i) => i.dataset.value === this.selectedValue,
-      )
-
-      if (item && !item.dataset.disabled) {
-        item.focus()
-      } else {
-        this.contentTarget.focus()
-      }
-    } else {
-      this.focusItem(null, 0)
-    }
-
-    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()
-    }
-  }
-
-  setAriaLabelledby() {
-    this.groupTargets.forEach((g) => {
-      const label = g.querySelector(
-        '[data-shadcn-phlexcomponents--select-target="label"]',
-      )
-
-      if (label) {
-        const ariaId = this.element.dataset.ariaId
-        const labelledby = `${ariaId}-${label.textContent
-          .toLowerCase()
-          .trim()
-          .replace(/ /, '-')}`
-        label.setAttribute('id', labelledby)
-        g.setAttribute('aria-labelledby', labelledby)
-      }
-    })
-  }
-
-  isOpen() {
-    return this.triggerTarget.ariaExpanded === 'true'
-  }
-
-  focusItem(event = null, index = null) {
-    let itemIndex = index
-
-    if (event) {
-      const item = event.currentTarget || event.target
-      itemIndex = this.items.indexOf(item)
-    }
-
-    const item = this.items[itemIndex]
-    item.tabIndex = 0
-    item.focus()
-
-    this.items.forEach((item, index) => {
-      if (index !== itemIndex) {
-        item.tabIndex = -1
-      }
-    })
-  }
-
-  focusFirstItem() {
-    this.focusItem(null, 0)
-  }
-
-  focusLastItem() {
-    this.focusItem(null, this.items.length - 1)
-  }
-
-  focusPrevItem(event) {
-    const item = event.currentTarget || event.target
-    const index = this.items.indexOf(item)
-
-    if (index - 1 >= 0) {
-      this.focusItem(null, index - 1)
-    }
-  }
-
-  focusNextItem(event) {
-    const item = event.currentTarget || event.target
-    const index = this.items.indexOf(item)
-
-    if (index + 1 < this.items.length) {
-      this.focusItem(null, index + 1)
-    }
-  }
-
-  selectItem(event) {
-    const item = event.currentTarget || event.target
-    const value = item.dataset.value
-    this.selectedValue = value
-    this.close()
-  }
-
-  focusContent() {
-    this.items.forEach((item) => {
-      item.blur()
-    })
-
-    this.contentTarget.focus()
-  }
-
-  selectedValueChanged(value) {
-    const item = this.itemTargets.find((i) => i.dataset.value === value)
-
-    if (item) {
-      this.triggerTextTarget.textContent = item.textContent
-
-      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.textContent = hasPlaceholder
-      }
-    }
-  }
-
-  handleSearchChange(search) {
-    const item = this.items.find((i) =>
-      i.textContent.toLowerCase().startsWith(search.toLowerCase()),
-    )
-
-    if (item) {
-      item.focus()
-    }
-  }
-
-  handleSearch(key) {
-    const search = this.search + key
-    this.search = search
-
-    window.clearTimeout(this.searchTimer)
-    window.clearTimeout(this.resetSearchTimer)
-
-    if (search !== '') {
-      this.searchTimer = window.setTimeout(() => {
-        this.handleSearchChange(search)
-      }, 150)
-
-      this.resetSearchTimer = window.setTimeout(() => {
-        this.search = ''
-      }, 300)
-    }
-  }
-
-  // Global listeners
-  onDOMClick(event) {
-    const htmlFor = event.target.htmlFor
-
-    if (htmlFor === this.triggerTarget.id) return
-    if (event.target) if (this.element.contains(event.target)) return
-
-    this.close()
-  }
-
-  onDOMKeydown(event) {
-    if (!this.isOpen()) return
-
-    const key = event.key
-    const isModifierKey = event.ctrlKey || event.altKey || event.metaKey
-
-    if (key === 'Tab') event.preventDefault()
-
-    if (!isModifierKey && key.length === 1) this.handleSearch(key)
-
-    if (key === 'Escape') {
-      this.close()
-    }
-  }
-
-  setupEventListeners() {
-    document.addEventListener('click', this.DOMClickListener)
-    document.addEventListener('keydown', this.DOMKeydownListener)
-  }
-
-  cleanupEventListeners() {
-    document.removeEventListener('click', this.DOMClickListener)
-    document.removeEventListener('keydown', this.DOMKeydownListener)
-    window.clearTimeout(this.searchTimer)
-    window.clearTimeout(this.resetSearchTimer)
-  }
-}

data/app/javascript/controllers/sheet_controller.js

@@ -1,159 +0,0 @@
-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--sheet-target="trigger"]',
-    )
-
-    if (trigger) return
-
-    const close = target.closest(
-      '[data-action*="shadcn-phlexcomponents--sheet#close"]',
-    )
-
-    if (
-      close ||
-      (target.dataset.action &&
-        target.dataset.action.includes('shadcn-phlexcomponents--sheet#close'))
-    )
-      this.close()
-
-    if (this.contentElement.contains(event.target)) return
-
-    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/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}`),
-      'shadcn-phlexcomponents--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/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'
-
-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()
-    }, 100)
-  }
-
-  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,41 +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
-
-    tippy(this.triggerTarget, {
-      content: content,
-      allowHTML: true,
-      interactive: true,
-      arrow: false,
-      placement: this.element.dataset.side,
-      plugins: [hideOnEsc],
-      offset: [0, 4],
-    })
-  }
-}

data/lib/components/accordion.rb

@@ -1,38 +0,0 @@
-# frozen_string_literal: true
-
-module ShadcnPhlexcomponents
-  class Accordion < Base
-    def initialize(value: nil, multiple: false, aria_id: "accordion-#{SecureRandom.hex(5)}", **attributes)
-      @multiple = multiple
-      @value = value&.is_a?(String) ? [value] : value
-      @aria_id = aria_id
-      super(**attributes)
-    end
-
-    def item(**attributes, &)
-      AccordionItem(**attributes, &)
-    end
-
-    def trigger(**attributes, &)
-      AccordionTrigger(aria_id: @aria_id, **attributes, &)
-    end
-
-    def content(**attributes, &)
-      AccordionContent(aria_id: @aria_id, **attributes, &)
-    end
-
-    def default_attributes
-      {
-        data: {
-          value: (@value || []).to_json,
-          multiple: @multiple.to_s,
-          controller: "shadcn-phlexcomponents--accordion",
-        },
-      }
-    end
-
-    def view_template(&)
-      div(**@attributes, &)
-    end
-  end
-end