shadcn_phlexcomponents 0.1.11 → 0.1.16

data/app/{javascript → typescript}/controllers/tabs_controller.ts

@@ -1,18 +1,21 @@
 import { Controller } from '@hotwired/stimulus'
+import { getNextEnabledIndex, getPreviousEnabledIndex } from '../utils'
 
-export default class extends Controller {
+const TabsController = class extends Controller {
+  // targets
   static targets = ['trigger', 'content']
+  declare readonly triggerTargets: HTMLButtonElement[]
+  declare readonly contentTargets: HTMLElement[]
+
+  // values
   static values = {
     active: String,
   }
-
-  declare readonly triggerTargets: HTMLButtonElement[]
-  declare readonly contentTargets: HTMLElement[]
-  declare activeValue: string | undefined
+  declare activeValue: string
 
   connect() {
     if (!this.activeValue) {
-      this.activeValue = this.triggerTargets[0].dataset.value
+      this.activeValue = this.triggerTargets[0].dataset.value as string
     }
   }
 
@@ -20,7 +23,7 @@ export default class extends Controller {
     const target = event.currentTarget as HTMLButtonElement
 
     if (event instanceof MouseEvent) {
-      this.activeValue = target.dataset.value
+      this.activeValue = target.dataset.value as string
     } else {
       const key = event.key
 
@@ -32,20 +35,20 @@ export default class extends Controller {
       let newIndex = 0
 
       if (key === 'ArrowLeft') {
-        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,
+        })
       }
 
-      this.activeValue = focusableTriggers[newIndex].dataset.value
+      this.activeValue = focusableTriggers[newIndex].dataset.value as string
       focusableTriggers[newIndex].focus()
     }
   }
@@ -77,3 +80,8 @@ export default class extends Controller {
     })
   }
 }
+
+type Tabs = InstanceType<typeof TabsController>
+
+export { TabsController }
+export type { Tabs }

data/app/{javascript → typescript}/controllers/theme_switcher_controller.ts

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller {
+const ThemeSwitcherController = class extends Controller {
   initialize() {
     if (
       localStorage.theme === 'dark' ||
@@ -33,3 +33,8 @@ export default class extends Controller {
     document.documentElement.style.colorScheme = 'dark'
   }
 }
+
+type ThemeSwitcher = InstanceType<typeof ThemeSwitcherController>
+
+export { ThemeSwitcherController }
+export type { ThemeSwitcher }

data/app/{javascript → typescript}/controllers/toast_container_controller.ts

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 import DOMPurify from 'dompurify'
 
-export default class extends Controller<HTMLElement> {
+const ToastContainerController = class extends Controller<HTMLElement> {
   addToast({
     title,
     description,
@@ -60,3 +60,8 @@ export default class extends Controller<HTMLElement> {
     this.element.append(clone)
   }
 }
+
+type ToastContainer = InstanceType<typeof ToastContainerController>
+
+export { ToastContainerController }
+export type { ToastContainer }

data/app/{javascript → typescript}/controllers/toast_controller.ts

@@ -1,7 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 import { ANIMATION_OUT_DELAY } from '../utils'
 
-export default class extends Controller<HTMLElement> {
+const ToastController = class extends Controller<HTMLElement> {
+  // custom properties
   declare duration: number
   declare closeTimeout: number
 
@@ -26,3 +27,8 @@ export default class extends Controller<HTMLElement> {
     }
   }
 }
+
+type Toast = InstanceType<typeof ToastController>
+
+export { ToastController }
+export type { Toast }

data/app/typescript/controllers/toggle_controller.ts

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+const ToggleController = class extends Controller<HTMLElement> {
+  // values
+  static values = {
+    isOn: Boolean,
+  }
+  declare isOnValue: boolean
+
+  toggle() {
+    this.isOnValue = !this.isOnValue
+  }
+
+  isOnValueChanged(isOn: boolean) {
+    if (isOn) {
+      this.element.dataset.state = 'on'
+      this.element.ariaPressed = 'true'
+    } else {
+      this.element.dataset.state = 'off'
+      this.element.ariaPressed = 'false'
+    }
+  }
+}
+
+type Toggle = InstanceType<typeof ToggleController>
+
+export { ToggleController }
+export type { Toggle }

data/app/typescript/controllers/toggle_group_controller.ts

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+const ToggleController = class extends Controller<HTMLElement> {
+  // values
+  static values = {
+    isOn: Boolean,
+  }
+  declare isOnValue: boolean
+
+  toggle() {
+    this.isOnValue = !this.isOnValue
+  }
+
+  isOnValueChanged(isOn: boolean) {
+    if (isOn) {
+      this.element.dataset.state = 'on'
+      this.element.ariaPressed = 'true'
+    } else {
+      this.element.dataset.state = 'off'
+      this.element.ariaPressed = 'false'
+    }
+  }
+}
+
+type Toggle = InstanceType<typeof ToggleController>
+
+export { ToggleController }
+export type { Toggle }

data/app/{javascript → typescript}/controllers/tooltip_controller.ts

@@ -1,18 +1,23 @@
 import { Controller } from '@hotwired/stimulus'
 import { useHover } from 'stimulus-use'
-import { initFloatingUi, ANIMATION_OUT_DELAY } from '../utils'
+import { initFloatingUi } from '../utils/floating_ui'
+import { showContent, hideContent } from '../utils'
 
-export default class extends Controller<HTMLElement> {
+const TooltipController = class extends Controller<HTMLElement> {
+  // targets
   static targets = ['trigger', 'content', 'contentContainer', 'arrow']
-  static values = {
-    isOpen: Boolean,
-  }
-
-  declare isOpenValue: boolean
   declare readonly triggerTarget: HTMLElement
   declare readonly contentTarget: HTMLElement
   declare readonly contentContainerTarget: HTMLElement
   declare readonly arrowTarget: HTMLElement
+
+  // values
+  static values = {
+    isOpen: Boolean,
+  }
+  declare isOpenValue: boolean
+
+  // custom properties
   declare closeTimeout: number
   declare cleanup: () => void
   declare DOMKeydownListener: (event: KeyboardEvent) => void
@@ -47,22 +52,13 @@ export default class extends Controller<HTMLElement> {
     this.close()
   }
 
-  onDOMKeydown(event: KeyboardEvent) {
-    if (!this.isOpenValue) return
-
-    const key = event.key
-
-    if (['Escape', 'Enter', ' '].includes(key)) {
-      event.preventDefault()
-      event.stopImmediatePropagation()
-      this.closeImmediately()
-    }
-  }
-
   isOpenValueChanged(isOpen: boolean) {
     if (isOpen) {
-      this.contentContainerTarget.classList.remove('hidden')
-      this.contentTarget.dataset.state = 'open'
+      showContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
       this.setupEventListeners()
 
       this.cleanup = initFloatingUi({
@@ -74,25 +70,41 @@ export default class extends Controller<HTMLElement> {
         sideOffset: 8,
       })
     } else {
-      this.contentTarget.dataset.state = 'closed'
+      hideContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
       this.cleanupEventListeners()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
 
-      setTimeout(() => {
-        this.contentContainerTarget.classList.add('hidden')
-      }, ANIMATION_OUT_DELAY)
+    if (['Escape', 'Enter', ' '].includes(key)) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      this.closeImmediately()
     }
   }
 
-  setupEventListeners() {
+  protected setupEventListeners() {
     document.addEventListener('keydown', this.DOMKeydownListener)
   }
 
-  cleanupEventListeners() {
+  protected cleanupEventListeners() {
     if (this.cleanup) this.cleanup()
     document.removeEventListener('keydown', this.DOMKeydownListener)
   }
-
-  disconnect() {
-    this.cleanupEventListeners()
-  }
 }
+
+type Tooltip = InstanceType<typeof TooltipController>
+
+export { TooltipController }
+export type { Tooltip }

data/app/typescript/shadcn_phlexcomponents.ts

@@ -0,0 +1,61 @@
+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 { CommandController } from './controllers/command_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 { DropdownMenuSubController } from './controllers/dropdown_menu_sub_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 { SliderController } from './controllers/slider_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 { ToggleController } from './controllers/toggle_controller'
+import { TooltipController } from './controllers/tooltip_controller'
+
+export default {
+  accordion: AccordionController,
+  'alert-dialog': AlertDialogController,
+  avatar: AvatarController,
+  checkbox: CheckboxController,
+  collapsible: CollapsibleController,
+  combobox: ComboboxController,
+  command: CommandController,
+  'date-picker': DatePickerController,
+  'date-range-picker': DateRangePickerController,
+  dialog: DialogController,
+  'dropdown-menu': DropdownMenuController,
+  'dropdown-menu-sub': DropdownMenuSubController,
+  'form-field': FormFieldController,
+  'hover-card': HoverCardController,
+  'loading-button': LoadingButtonController,
+  popover: PopoverController,
+  progress: ProgressController,
+  'radio-group': RadioGroupController,
+  select: SelectController,
+  sidebar: SidebarController,
+  'sidebar-trigger': SidebarTriggerController,
+  slider: SliderController,
+  switch: SwitchController,
+  tabs: TabsController,
+  'theme-switcher': ThemeSwitcherController,
+  'toast-container': ToastContainerController,
+  toast: ToastController,
+  toggle: ToggleController,
+  tooltip: TooltipController,
+}