shadcn_phlexcomponents 0.1.9 → 0.1.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f01a8b6d7fd3e2f4727726449999ee8e1df8f4385399a045de46390713886e7a
-  data.tar.gz: 1fc407c7488a6bba53a23e77a1e912e294dec1c0407fba97abf5ea2d2cf02820
+  metadata.gz: e6ead95ebdeef8eac55b2ee6101b2fbdb7fb90c7d12f8f489bdb2f45ad507915
+  data.tar.gz: 6f067373fd86d04f7e2478b639c3d5021a265931b648a6729869d1c9bb472bee
 SHA512:
-  metadata.gz: 532c2cddc7f12c798babf37d1e1248ac0034a44b2c359e7fb60e2e481a6be4f83655cff30adc93633f00b3b2bda4df853b1189e097ee65de5335f1016331ad09
-  data.tar.gz: 74d475a2b3e633f38db546d8ee820ae788a9abf2becd4699ac1c6b3ff5f5557635a3838791d9cba75764b5184a08794c1107d01a913eb996d2aa3dc238a53b21
+  metadata.gz: c9ca6aacc79c59cc008ca03043616c4483dcc65c9858b0134d61ab0d53497fda9e8f2be85f05e9b1d030fc74af0524f725524d3a6830f79333fd14894188cb89
+  data.tar.gz: e1d3d10691bef9568c16af2e2f23f1a7bccce7b512e72a6ef1a53e6db3ce85a95fdefaadbf86bcd9ecbe07f9f61a423cda24aa412ad60d849a99d4efc3501653

data/app/javascript/controllers/accordion_controller.ts

@@ -0,0 +1,136 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  showContent,
+  hideContent,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+} from '../utils'
+
+const AccordionController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['item', 'trigger', 'content']
+  declare itemTargets: HTMLElement[]
+  declare triggerTargets: HTMLButtonElement[]
+  declare contentTargets: HTMLElement[]
+
+  // values
+  static values = { openItems: Array }
+  declare openItemsValue: string[]
+
+  // custom properties
+  declare multiple: boolean
+
+  connect() {
+    this.multiple = this.element.dataset.multiple === 'true'
+  }
+
+  contentTargetConnected(content: HTMLElement) {
+    setTimeout(() => {
+      this.setContentHeight(content)
+    }, 100)
+  }
+
+  toggle(event: MouseEvent) {
+    const trigger = event.currentTarget as HTMLElement
+
+    const item = this.itemTargets.find((item) => {
+      return item.contains(trigger)
+    })
+
+    if (!item) return
+
+    const value = item.dataset.value as string
+    const isOpen = this.openItemsValue.includes(value)
+
+    if (isOpen) {
+      this.openItemsValue = this.openItemsValue.filter((v) => v !== value)
+    } else {
+      if (this.multiple) {
+        this.openItemsValue = [...this.openItemsValue, value]
+      } else {
+        this.openItemsValue = [value]
+      }
+    }
+  }
+
+  focusTrigger(event: KeyboardEvent) {
+    const trigger = event.currentTarget as HTMLButtonElement
+    const key = event.key
+
+    const focusableTriggers = this.triggerTargets.filter(
+      (trigger) => !trigger.disabled,
+    )
+
+    const index = focusableTriggers.indexOf(trigger)
+    let newIndex = 0
+
+    if (key === 'ArrowUp') {
+      newIndex = getPreviousEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      })
+    } else {
+      newIndex = getNextEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      })
+    }
+
+    focusableTriggers[newIndex].focus()
+  }
+
+  openItemsValueChanged(openItems: string[]) {
+    this.itemTargets.forEach((item) => {
+      const itemValue = item.dataset.value as string
+
+      const trigger = this.triggerTargets.find((trigger) =>
+        item.contains(trigger),
+      ) as HTMLElement
+      const content = this.contentTargets.find((content) =>
+        item.contains(content),
+      ) as HTMLElement
+
+      if (openItems.includes(itemValue)) {
+        showContent({
+          trigger,
+          content: content,
+          contentContainer: content,
+        })
+      } else {
+        hideContent({
+          trigger,
+          content: content,
+          contentContainer: content,
+        })
+      }
+    })
+  }
+
+  protected setContentHeight(element: HTMLElement) {
+    const height =
+      this.getContentHeight(element) || element.getBoundingClientRect().height
+    element.style.setProperty('--radix-accordion-content-height', `${height}px`)
+  }
+
+  getContentHeight(el: HTMLElement) {
+    const clone = el.cloneNode(true) as HTMLElement
+    Object.assign(clone.style, {
+      display: 'block',
+      position: 'absolute',
+      visibility: 'hidden',
+    })
+
+    document.body.appendChild(clone)
+    const height = clone.getBoundingClientRect().height
+    document.body.removeChild(clone)
+
+    return height
+  }
+}
+
+type Accordion = InstanceType<typeof AccordionController>
+
+export { AccordionController }
+export type { Accordion }

data/app/javascript/controllers/alert_dialog_controller.ts

@@ -0,0 +1,12 @@
+import { DialogController } from './dialog_controller'
+
+const AlertDialogController = class extends DialogController {
+  protected onDOMClick() {
+    return
+  }
+}
+
+type AlertDialog = InstanceType<typeof AlertDialogController>
+
+export { AlertDialogController }
+export type { AlertDialog }

data/app/javascript/controllers/avatar_controller.ts

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus'
+
+const AvatarController = class extends Controller {
+  // targets
+  static targets = ['image', 'fallback']
+  declare readonly imageTarget: HTMLElement
+  declare readonly fallbackTarget: HTMLElement
+  declare readonly hasFallbackTarget: boolean
+
+  connect() {
+    this.imageTarget.onerror = () => {
+      if (this.hasFallbackTarget) {
+        this.fallbackTarget.classList.remove('hidden')
+      }
+
+      this.imageTarget.classList.add('hidden')
+    }
+  }
+}
+
+type Avatar = InstanceType<typeof AvatarController>
+
+export { AvatarController }
+export type { Avatar }

data/app/javascript/controllers/checkbox_controller.ts

@@ -0,0 +1,41 @@
+import { Controller } from '@hotwired/stimulus'
+
+const CheckboxController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['input', 'indicator']
+  declare readonly inputTarget: HTMLInputElement
+  declare readonly indicatorTarget: HTMLInputElement
+
+  // values
+  static values = {
+    isChecked: Boolean,
+  }
+  declare isCheckedValue: boolean
+
+  toggle() {
+    this.isCheckedValue = !this.isCheckedValue
+  }
+
+  preventDefault(event: KeyboardEvent) {
+    event.preventDefault()
+  }
+
+  isCheckedValueChanged(isChecked: boolean) {
+    if (isChecked) {
+      this.element.ariaChecked = 'true'
+      this.element.dataset.state = 'checked'
+      this.inputTarget.checked = true
+      this.indicatorTarget.classList.remove('hidden')
+    } else {
+      this.element.ariaChecked = 'false'
+      this.element.dataset.state = 'unchecked'
+      this.inputTarget.checked = false
+      this.indicatorTarget.classList.add('hidden')
+    }
+  }
+}
+
+type Checkbox = InstanceType<typeof CheckboxController>
+
+export { CheckboxController }
+export type { Checkbox }

data/app/javascript/controllers/collapsible_controller.ts

@@ -0,0 +1,52 @@
+import { Controller } from '@hotwired/stimulus'
+import { hideContent, showContent } from '../utils'
+
+const CollapsibleController = class extends Controller {
+  // targets
+  static targets = ['trigger', 'content']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+  }
+  declare isOpenValue: boolean
+
+  toggle() {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.isOpenValue = true
+  }
+
+  close() {
+    this.isOpenValue = false
+  }
+
+  isOpenValueChanged(isOpen: boolean) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      })
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      })
+    }
+  }
+}
+
+type Collapsible = InstanceType<typeof CollapsibleController>
+
+export { CollapsibleController }
+export type { Collapsible }

data/app/javascript/controllers/combobox_controller.ts

@@ -0,0 +1,376 @@
+import {
+  ON_OPEN_FOCUS_DELAY,
+  lockScroll,
+  showContent,
+  unlockScroll,
+  hideContent,
+  focusTrigger,
+  setGroupLabelsId,
+  onClickOutside,
+} from '../utils'
+import { initFloatingUi } from '../utils/floating_ui'
+import { Controller } from '@hotwired/stimulus'
+import Fuse from 'fuse.js'
+import {
+  scrollToItem,
+  highlightItem,
+  highlightItemByIndex,
+  filteredItemsChanged,
+  setItemsGroupId,
+  search,
+  clearRemoteResults,
+  resetState,
+} from '../utils/command'
+
+import { useClickOutside, useDebounce } from 'stimulus-use'
+
+const ComboboxController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = [
+    'trigger',
+    'triggerText',
+    'contentContainer',
+    'content',
+    'item',
+    'group',
+    'hiddenInput',
+    'searchInput',
+    'list',
+    'listContainer',
+    'empty',
+    'loading',
+    'error',
+  ]
+  declare readonly triggerTarget: HTMLElement
+  declare readonly triggerTextTarget: HTMLElement
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  declare readonly itemTargets: HTMLElement[]
+  declare readonly groupTargets: HTMLElement[]
+  declare readonly hiddenInputTarget: HTMLInputElement
+  declare readonly searchInputTarget: HTMLInputElement
+  declare readonly listTarget: HTMLElement
+  declare readonly listContainerTarget: HTMLElement
+  declare readonly emptyTarget: HTMLElement
+  declare readonly loadingTarget: HTMLElement
+  declare readonly errorTarget: HTMLElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+    selected: String,
+    filteredItemIndexes: Array,
+  }
+  declare isOpenValue: boolean
+  declare selectedValue: string
+  declare filteredItemIndexesValue: number[]
+
+  // custom properties
+  declare orderedItems: HTMLElement[]
+  declare itemsInnerText: string[]
+  declare filteredItems: HTMLElement[]
+  declare fuse: Fuse<string>
+  declare scrollingViaKeyboard: boolean
+  declare keyboardScrollTimeout: number
+  declare abortController?: AbortController
+  declare searchPath?: string
+  declare isDirty: boolean
+  declare isLoading: boolean
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+
+  static debounces = ['search']
+
+  connect() {
+    this.orderedItems = [...this.itemTargets]
+    this.itemsInnerText = this.itemTargets.map((i) => i.innerText.trim())
+    this.fuse = new Fuse(this.itemsInnerText)
+    this.filteredItemIndexesValue = Array.from(
+      { length: this.itemTargets.length },
+      (_, i) => i,
+    )
+    this.isLoading = false
+    this.filteredItems = this.itemTargets
+    this.isDirty = false
+    this.searchPath = this.element.dataset.searchPath
+    setGroupLabelsId(this)
+    setItemsGroupId(this)
+    useDebounce(this)
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+  }
+
+  toggle() {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.isOpenValue = true
+
+    setTimeout(() => {
+      this.searchInputTarget.focus()
+
+      let index = 0
+      console.log('this.selectedValue', this.selectedValue)
+      if (this.selectedValue) {
+        const item = this.filteredItems.find(
+          (i) => i.dataset.value === this.selectedValue,
+        )
+
+        if (item && !item.dataset.disabled) {
+          index = this.filteredItems.indexOf(item)
+        }
+      }
+
+      this.highlightItemByIndex(index)
+    }, ON_OPEN_FOCUS_DELAY)
+  }
+
+  close() {
+    this.isOpenValue = false
+    resetState(this)
+  }
+
+  scrollToItem(index: number) {
+    scrollToItem(this, index)
+  }
+
+  highlightItem(
+    event: MouseEvent | KeyboardEvent | null = null,
+    index: number | null = null,
+  ) {
+    highlightItem(this, event, index)
+  }
+
+  highlightItemByIndex(index: number) {
+    highlightItemByIndex(this, index)
+  }
+
+  select(event: MouseEvent | KeyboardEvent) {
+    let item = undefined as HTMLElement | undefined
+
+    if (event instanceof KeyboardEvent) {
+      item = this.filteredItems.find((i) => i.dataset.highlighted === 'true')
+    } else {
+      // mouse event
+      item = event.currentTarget as HTMLElement
+    }
+
+    if (item) {
+      this.selectedValue = item.dataset.value as string
+
+      // setTimeout is needed for selectedValueChanged to finish executing
+      setTimeout(() => {
+        this.close()
+      }, 100)
+    }
+  }
+
+  inputKeydown(event: KeyboardEvent) {
+    if (event.key === ' ' && this.searchInputTarget.value.length === 0) {
+      event.preventDefault()
+    }
+
+    this.hideError()
+    this.showList()
+  }
+
+  search(event: InputEvent) {
+    this.isDirty = true
+    clearRemoteResults(this)
+    search(this, event)
+  }
+
+  clickOutside(event: MouseEvent) {
+    onClickOutside(this, event)
+  }
+
+  selectedValueChanged(value: string) {
+    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.hiddenInputTarget.value = value
+    }
+
+    this.triggerTarget.dataset.hasValue = `${!!value && value.length > 0}`
+
+    const placeholder = this.triggerTarget.dataset.placeholder
+
+    if (placeholder && this.triggerTarget.dataset.hasValue === 'false') {
+      this.triggerTextTarget.textContent = placeholder
+    }
+  }
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      lockScroll(this.contentTarget.id)
+
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+        setEqualWidth: true,
+      })
+
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 4,
+      })
+
+      this.setupEventListeners()
+    } else {
+      unlockScroll(this.contentTarget.id)
+
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  filteredItemIndexesValueChanged(filteredItemIndexes: number[]) {
+    filteredItemsChanged(this, filteredItemIndexes)
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+    resetState(this)
+  }
+
+  showLoading() {
+    this.isLoading = true
+    this.loadingTarget.classList.remove('hidden')
+  }
+
+  hideLoading() {
+    this.isLoading = false
+    this.loadingTarget.classList.add('hidden')
+  }
+
+  showList() {
+    this.listTarget.classList.remove('hidden')
+  }
+
+  hideList() {
+    this.listTarget.classList.add('hidden')
+  }
+
+  showError() {
+    this.errorTarget.classList.remove('hidden')
+  }
+
+  hideError() {
+    this.errorTarget.classList.add('hidden')
+  }
+
+  showEmpty() {
+    this.emptyTarget.classList.remove('hidden')
+  }
+
+  hideEmpty() {
+    this.emptyTarget.classList.add('hidden')
+  }
+
+  showSelectedRemoteItems() {
+    const remoteItems = Array.from(
+      this.element.querySelectorAll(
+        `[data-shadcn-phlexcomponents="${this.identifier}-item"][data-remote='true']`,
+      ),
+    )
+
+    remoteItems.forEach((i) => {
+      const isInsideGroup =
+        i.parentElement?.dataset?.shadcnPhlexcomponents ===
+        `${this.identifier}-group`
+
+      if (isInsideGroup) {
+        const isRemoteGroup = i.parentElement.dataset.remote === 'true'
+
+        if (isRemoteGroup) {
+          i.parentElement.classList.remove('hidden')
+        }
+      }
+
+      i.ariaHidden = 'false'
+      i.classList.remove('hidden')
+    })
+  }
+
+  hideSelectedRemoteItems() {
+    const remoteItems = Array.from(
+      this.element.querySelectorAll(
+        `[data-shadcn-phlexcomponents="${this.identifier}-item"][data-remote='true']`,
+      ),
+    )
+
+    remoteItems.forEach((i) => {
+      const isInsideGroup =
+        i.parentElement?.dataset?.shadcnPhlexcomponents ===
+        `${this.identifier}-group`
+
+      if (isInsideGroup) {
+        const isRemoteGroup = i.parentElement.dataset.remote === 'true'
+
+        if (isRemoteGroup) {
+          i.parentElement.classList.add('hidden')
+        }
+      }
+
+      i.ariaHidden = 'true'
+      i.classList.add('hidden')
+    })
+  }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+
+    if (this.abortController) {
+      this.abortController.abort()
+    }
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (['Tab', 'Enter'].includes(key)) event.preventDefault()
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
+}
+
+type Combobox = InstanceType<typeof ComboboxController>
+
+export { ComboboxController }
+export type { Combobox }