shadcn_phlexcomponents 0.1.11 → 0.1.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e69ba212a41e6644e473fa1e443b1114b7095bec0b682399932d1d41451ba8fa
-  data.tar.gz: 686b0e0582a7c277eb1ddaa5476edf08d300e8aa6ce1d0e0c8ceca7ed2dc3cdc
+  metadata.gz: e6ead95ebdeef8eac55b2ee6101b2fbdb7fb90c7d12f8f489bdb2f45ad507915
+  data.tar.gz: 6f067373fd86d04f7e2478b639c3d5021a265931b648a6729869d1c9bb472bee
 SHA512:
-  metadata.gz: 99248f0f5d9ec5d554d86aa24a4340f8fb9232b7a4618bfc689e2aa0fe6e2f355a426ac5b04549ac3548453c1be17623c3f8d0fab6158c18a80c9fadfbabaddc
-  data.tar.gz: e285a996a8aa294d3fda26d16b9e2cf3108fec5c256faa13a123e5bff949c9ff6837cc38752006acc4824df3a2c1492c653a7674f17f85935c8330f7fb4da761
+  metadata.gz: c9ca6aacc79c59cc008ca03043616c4483dcc65c9858b0134d61ab0d53497fda9e8f2be85f05e9b1d030fc74af0524f725524d3a6830f79333fd14894188cb89
+  data.tar.gz: e1d3d10691bef9568c16af2e2f23f1a7bccce7b512e72a6ef1a53e6db3ce85a95fdefaadbf86bcd9ecbe07f9f61a423cda24aa412ad60d849a99d4efc3501653

data/app/javascript/controllers/accordion_controller.ts

@@ -1,53 +1,33 @@
 import { Controller } from '@hotwired/stimulus'
-import { showContent, hideContent } from '../utils'
+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[]
 
-export default class extends Controller<HTMLElement> {
-  static targets = ['item']
+  // values
   static values = { openItems: Array }
-  declare itemTargets: HTMLElement[]
-  declare multiple: boolean
   declare openItemsValue: string[]
 
+  // custom properties
+  declare multiple: boolean
+
   connect() {
     this.multiple = this.element.dataset.multiple === 'true'
-
-    setTimeout(() => {
-      this.itemTargets.forEach((item) => {
-        const content = item.querySelector(
-          '[data-shadcn-phlexcomponents="accordion-content-container"]',
-        ) as HTMLElement
-        this.setContentHeight(content)
-      })
-    }, 250)
-  }
-
-  setContentHeight(element: HTMLElement) {
-    const height = this.getContentHeight(element)
-    element.style.setProperty('--radix-accordion-content-height', `${height}px`)
   }
 
-  getContentHeight(element: HTMLElement) {
-    // Store the original styles we need to modify
-    const originalStyles = {
-      display: element.style.display,
-      visibility: element.style.visibility,
-      position: element.style.position,
-    }
-
-    // Make the element visible but not displayed
-    element.style.display = 'block' // or whatever is appropriate (flex, inline, etc.)
-    element.style.visibility = 'hidden'
-    element.style.position = 'absolute'
-
-    // Get the height
-    const height = element.offsetHeight
-
-    // Restore the original styles
-    element.style.display = originalStyles.display
-    element.style.visibility = originalStyles.visibility
-    element.style.position = originalStyles.position
-
-    return height
+  contentTargetConnected(content: HTMLElement) {
+    setTimeout(() => {
+      this.setContentHeight(content)
+    }, 100)
   }
 
   toggle(event: MouseEvent) {
@@ -75,30 +55,27 @@ export default class extends Controller<HTMLElement> {
 
   focusTrigger(event: KeyboardEvent) {
     const trigger = event.currentTarget as HTMLButtonElement
-    const key = event.key as 'ArrowUp' | 'ArrowDown'
+    const key = event.key
 
-    let focusableTriggers = this.itemTargets.map((item) => {
-      return item.querySelector(
-        '[data-shadcn-phlexcomponents="accordion-trigger"]',
-      )
-    }) as HTMLButtonElement[]
+    const focusableTriggers = this.triggerTargets.filter(
+      (trigger) => !trigger.disabled,
+    )
 
-    focusableTriggers = focusableTriggers.filter((trigger) => !trigger.disabled)
     const index = focusableTriggers.indexOf(trigger)
     let newIndex = 0
 
     if (key === 'ArrowUp') {
-      newIndex = index - 1
-
-      if (newIndex < 0) {
-        newIndex = focusableTriggers.length - 1
-      }
+      newIndex = getPreviousEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      })
     } else {
-      newIndex = index + 1
-
-      if (newIndex > focusableTriggers.length - 1) {
-        newIndex = 0
-      }
+      newIndex = getNextEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      })
     }
 
     focusableTriggers[newIndex].focus()
@@ -108,11 +85,11 @@ export default class extends Controller<HTMLElement> {
     this.itemTargets.forEach((item) => {
       const itemValue = item.dataset.value as string
 
-      const trigger = item.querySelector(
-        '[data-shadcn-phlexcomponents="accordion-trigger"]',
+      const trigger = this.triggerTargets.find((trigger) =>
+        item.contains(trigger),
       ) as HTMLElement
-      const content = item.querySelector(
-        '[data-shadcn-phlexcomponents="accordion-content-container"]',
+      const content = this.contentTargets.find((content) =>
+        item.contains(content),
       ) as HTMLElement
 
       if (openItems.includes(itemValue)) {
@@ -130,4 +107,30 @@ export default class extends Controller<HTMLElement> {
       }
     })
   }
+
+  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

@@ -1,8 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller {
+const AvatarController = class extends Controller {
+  // targets
   static targets = ['image', 'fallback']
-
   declare readonly imageTarget: HTMLElement
   declare readonly fallbackTarget: HTMLElement
   declare readonly hasFallbackTarget: boolean
@@ -17,3 +17,8 @@ export default class extends Controller {
     }
   }
 }
+
+type Avatar = InstanceType<typeof AvatarController>
+
+export { AvatarController }
+export type { Avatar }

data/app/javascript/controllers/checkbox_controller.ts

@@ -1,13 +1,15 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller<HTMLElement> {
+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 readonly inputTarget: HTMLInputElement
-  declare readonly indicatorTarget: HTMLInputElement
   declare isCheckedValue: boolean
 
   toggle() {
@@ -32,3 +34,8 @@ export default class extends Controller<HTMLElement> {
     }
   }
 }
+
+type Checkbox = InstanceType<typeof CheckboxController>
+
+export { CheckboxController }
+export type { Checkbox }

data/app/javascript/controllers/collapsible_controller.ts

@@ -1,14 +1,16 @@
 import { Controller } from '@hotwired/stimulus'
-import { hideContent, showContent } from '@shadcn_phlexcomponents/utils'
+import { hideContent, showContent } from '../utils'
 
-export default class extends Controller {
+const CollapsibleController = class extends Controller {
+  // targets
   static targets = ['trigger', 'content']
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+
+  // values
   static values = {
     isOpen: Boolean,
   }
-
-  declare readonly triggerTarget: HTMLElement
-  declare readonly contentTarget: HTMLElement
   declare isOpenValue: boolean
 
   toggle() {
@@ -43,3 +45,8 @@ export default class extends Controller {
     }
   }
 }
+
+type Collapsible = InstanceType<typeof CollapsibleController>
+
+export { CollapsibleController }
+export type { Collapsible }

data/app/javascript/controllers/combobox_controller.ts

@@ -2,73 +2,191 @@ import {
   ON_OPEN_FOCUS_DELAY,
   lockScroll,
   showContent,
-  initFloatingUi,
   unlockScroll,
   hideContent,
   focusTrigger,
+  setGroupLabelsId,
+  onClickOutside,
 } from '../utils'
-import CommandRootController from './command_root_controller'
+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'
 
-export default class extends CommandRootController {
+const ComboboxController = class extends Controller<HTMLElement> {
+  // targets
   static targets = [
     'trigger',
+    'triggerText',
     'contentContainer',
     'content',
     'item',
-    'triggerText',
     'group',
-    'label',
     'hiddenInput',
     'searchInput',
-    'results',
+    '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 readonly contentContainerTarget: HTMLElement
-  declare readonly triggerTextTarget: HTMLElement
-  declare readonly hiddenInputTarget: HTMLInputElement
+  declare isOpenValue: boolean
   declare selectedValue: string
-  declare cleanup: () => void
+  declare filteredItemIndexesValue: number[]
 
-  open() {
-    this.isOpenValue = true
-    this.highlightItemByIndex(0)
+  // 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
 
-    let index = 0
+  static debounces = ['search']
 
-    if (this.selectedValue) {
-      const item = this.itemTargets.find(
-        (i) => i.dataset.value === this.selectedValue,
-      )
+  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)
+  }
 
-      if (item && !item.dataset.disabled) {
-        index = this.items.indexOf(item)
-      }
+  toggle() {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open()
     }
+  }
 
-    this.highlightItemByIndex(index)
+  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)
   }
 
-  toggle() {
-    if (this.isOpenValue) {
-      this.close()
+  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 {
-      this.open()
+      // 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)
     }
   }
 
-  onSelect(value: string): void {
-    this.selectedValue = value
+  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) {
@@ -99,7 +217,7 @@ export default class extends CommandRootController {
 
   isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
     if (isOpen) {
-      lockScroll()
+      lockScroll(this.contentTarget.id)
 
       showContent({
         trigger: this.triggerTarget,
@@ -118,7 +236,7 @@ export default class extends CommandRootController {
 
       this.setupEventListeners()
     } else {
-      unlockScroll()
+      unlockScroll(this.contentTarget.id)
 
       hideContent({
         trigger: this.triggerTarget,
@@ -126,20 +244,133 @@ export default class extends CommandRootController {
         contentContainer: this.contentContainerTarget,
       })
 
-      this.cleanupEventListeners()
-
-      // Only focus trigger when is previously opened
       if (previousIsOpen) {
         focusTrigger(this.triggerTarget)
       }
+
+      this.cleanupEventListeners()
     }
   }
 
-  clickOutside(event: MouseEvent) {
-    const target = event.target
-    // Let #toggle to handle state when clicked on trigger
-    if (target === this.triggerTarget) return
+  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')
+  }
 
-    this.close()
+  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 }