shadcn_phlexcomponents 0.1.9 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f01a8b6d7fd3e2f4727726449999ee8e1df8f4385399a045de46390713886e7a
-  data.tar.gz: 1fc407c7488a6bba53a23e77a1e912e294dec1c0407fba97abf5ea2d2cf02820
+  metadata.gz: e69ba212a41e6644e473fa1e443b1114b7095bec0b682399932d1d41451ba8fa
+  data.tar.gz: 686b0e0582a7c277eb1ddaa5476edf08d300e8aa6ce1d0e0c8ceca7ed2dc3cdc
 SHA512:
-  metadata.gz: 532c2cddc7f12c798babf37d1e1248ac0034a44b2c359e7fb60e2e481a6be4f83655cff30adc93633f00b3b2bda4df853b1189e097ee65de5335f1016331ad09
-  data.tar.gz: 74d475a2b3e633f38db546d8ee820ae788a9abf2becd4699ac1c6b3ff5f5557635a3838791d9cba75764b5184a08794c1107d01a913eb996d2aa3dc238a53b21
+  metadata.gz: 99248f0f5d9ec5d554d86aa24a4340f8fb9232b7a4618bfc689e2aa0fe6e2f355a426ac5b04549ac3548453c1be17623c3f8d0fab6158c18a80c9fadfbabaddc
+  data.tar.gz: e285a996a8aa294d3fda26d16b9e2cf3108fec5c256faa13a123e5bff949c9ff6837cc38752006acc4824df3a2c1492c653a7674f17f85935c8330f7fb4da761

data/app/javascript/controllers/accordion_controller.ts

@@ -0,0 +1,133 @@
+import { Controller } from '@hotwired/stimulus'
+import { showContent, hideContent } from '../utils'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['item']
+  static values = { openItems: Array }
+  declare itemTargets: HTMLElement[]
+  declare multiple: boolean
+  declare openItemsValue: string[]
+
+  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
+  }
+
+  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 as 'ArrowUp' | 'ArrowDown'
+
+    let focusableTriggers = this.itemTargets.map((item) => {
+      return item.querySelector(
+        '[data-shadcn-phlexcomponents="accordion-trigger"]',
+      )
+    }) as HTMLButtonElement[]
+
+    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
+      }
+    } else {
+      newIndex = index + 1
+
+      if (newIndex > focusableTriggers.length - 1) {
+        newIndex = 0
+      }
+    }
+
+    focusableTriggers[newIndex].focus()
+  }
+
+  openItemsValueChanged(openItems: string[]) {
+    this.itemTargets.forEach((item) => {
+      const itemValue = item.dataset.value as string
+
+      const trigger = item.querySelector(
+        '[data-shadcn-phlexcomponents="accordion-trigger"]',
+      ) as HTMLElement
+      const content = item.querySelector(
+        '[data-shadcn-phlexcomponents="accordion-content-container"]',
+      ) as HTMLElement
+
+      if (openItems.includes(itemValue)) {
+        showContent({
+          trigger,
+          content: content,
+          contentContainer: content,
+        })
+      } else {
+        hideContent({
+          trigger,
+          content: content,
+          contentContainer: content,
+        })
+      }
+    })
+  }
+}

data/app/javascript/controllers/{avatar_controller.js → avatar_controller.ts}

@@ -3,6 +3,10 @@ import { Controller } from '@hotwired/stimulus'
 export default class extends Controller {
   static targets = ['image', 'fallback']
 
+  declare readonly imageTarget: HTMLElement
+  declare readonly fallbackTarget: HTMLElement
+  declare readonly hasFallbackTarget: boolean
+
   connect() {
     this.imageTarget.onerror = () => {
       if (this.hasFallbackTarget) {

data/app/javascript/controllers/checkbox_controller.ts

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller<HTMLElement> {
+  static targets = ['input', 'indicator']
+  static values = {
+    isChecked: Boolean,
+  }
+
+  declare readonly inputTarget: HTMLInputElement
+  declare readonly indicatorTarget: HTMLInputElement
+  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')
+    }
+  }
+}

data/app/javascript/controllers/collapsible_controller.ts

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus'
+import { hideContent, showContent } from '@shadcn_phlexcomponents/utils'
+
+export default class extends Controller {
+  static targets = ['trigger', 'content']
+  static values = {
+    isOpen: Boolean,
+  }
+
+  declare readonly triggerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
+  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,
+      })
+    }
+  }
+}

data/app/javascript/controllers/combobox_controller.ts

@@ -0,0 +1,145 @@
+import {
+  ON_OPEN_FOCUS_DELAY,
+  lockScroll,
+  showContent,
+  initFloatingUi,
+  unlockScroll,
+  hideContent,
+  focusTrigger,
+} from '../utils'
+import CommandRootController from './command_root_controller'
+
+export default class extends CommandRootController {
+  static targets = [
+    'trigger',
+    'contentContainer',
+    'content',
+    'item',
+    'triggerText',
+    'group',
+    'label',
+    'hiddenInput',
+    'searchInput',
+    'results',
+    'empty',
+  ]
+
+  static values = {
+    isOpen: Boolean,
+    selected: String,
+    filteredItemIndexes: Array,
+  }
+
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly triggerTextTarget: HTMLElement
+  declare readonly hiddenInputTarget: HTMLInputElement
+  declare selectedValue: string
+  declare cleanup: () => void
+
+  open() {
+    this.isOpenValue = true
+    this.highlightItemByIndex(0)
+
+    let index = 0
+
+    if (this.selectedValue) {
+      const item = this.itemTargets.find(
+        (i) => i.dataset.value === this.selectedValue,
+      )
+
+      if (item && !item.dataset.disabled) {
+        index = this.items.indexOf(item)
+      }
+    }
+
+    this.highlightItemByIndex(index)
+
+    setTimeout(() => {
+      this.searchInputTarget.focus()
+    }, ON_OPEN_FOCUS_DELAY)
+  }
+
+  toggle() {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  onSelect(value: string): void {
+    this.selectedValue = value
+  }
+
+  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()
+
+      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()
+
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      this.cleanupEventListeners()
+
+      // Only focus trigger when is previously opened
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+    }
+  }
+
+  clickOutside(event: MouseEvent) {
+    const target = event.target
+    // Let #toggle to handle state when clicked on trigger
+    if (target === this.triggerTarget) return
+
+    this.close()
+  }
+}

data/app/javascript/controllers/command_controller.ts

@@ -0,0 +1,129 @@
+import hotkeys from 'hotkeys-js'
+import {
+  openWithOverlay,
+  showContent,
+  closeWithOverlay,
+  hideContent,
+  focusTrigger,
+} from '../utils'
+import CommandRootController from './command_root_controller'
+
+declare global {
+  interface Window {
+    Turbo: any
+  }
+}
+
+export default class extends CommandRootController {
+  static targets = [
+    'trigger',
+    'content',
+    'item',
+    'group',
+    'label',
+    'searchInput',
+    'results',
+    'empty',
+    'modifierKey',
+  ]
+
+  declare readonly modifierKeyTarget: HTMLElement
+  declare readonly hasModifierKeyTarget: boolean
+  declare modifierKey?: string
+  declare shortcutKey?: string
+  declare resultsTarget: HTMLElement
+  declare searchInputTarget: HTMLInputElement
+  declare emptyTarget: HTMLElement
+  declare filteredItems: HTMLElement[]
+  declare hotkeyListener: (event: KeyboardEvent) => void
+  declare keybinds: string
+
+  connect() {
+    super.connect()
+    this.hotkeyListener = this.onHotkeyPressed.bind(this)
+    this.setupHotkeys()
+    this.replaceModifierKeyIcon()
+  }
+
+  setupHotkeys() {
+    const modifierKey = this.element.dataset.modifierKey
+    const shortcutKey = this.element.dataset.shortcutKey
+    let keybinds = ''
+
+    if (modifierKey && shortcutKey) {
+      keybinds = `${modifierKey}+${shortcutKey}`
+
+      if (modifierKey === 'ctrl') {
+        keybinds + `,cmd-${shortcutKey}`
+      }
+    } else if (shortcutKey) {
+      keybinds = shortcutKey
+    }
+
+    this.keybinds = keybinds
+    hotkeys(keybinds, this.hotkeyListener)
+  }
+
+  onHotkeyPressed(event: KeyboardEvent) {
+    event.preventDefault()
+    this.open()
+  }
+
+  replaceModifierKeyIcon() {
+    if (this.hasModifierKeyTarget && this.isMac()) {
+      this.modifierKeyTarget.innerHTML = '⌘'
+    }
+  }
+
+  isMac() {
+    const navigator = window.navigator as any
+
+    if (navigator.userAgentData) {
+      return navigator.userAgentData.platform === 'macOS'
+    }
+
+    // Fallback to traditional methods
+    return navigator.platform.toUpperCase().indexOf('MAC') >= 0
+  }
+
+  onSelect(value: string) {
+    window.Turbo.visit(value)
+  }
+
+  disconnect() {
+    super.disconnect()
+
+    if (this.keybinds) {
+      hotkeys.unbind(this.keybinds)
+    }
+  }
+
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      openWithOverlay(this.contentTarget.id)
+
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      })
+
+      this.setupEventListeners()
+    } else {
+      closeWithOverlay(this.contentTarget.id)
+
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      })
+
+      this.cleanupEventListeners()
+
+      // Only focus trigger when is previously opened
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+    }
+  }
+}