shadcn_phlexcomponents 0.1.11 → 0.1.14

data/app/javascript/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/javascript/shadcn_phlexcomponents.ts

@@ -1,33 +1,36 @@
-import AccordionController from './controllers/accordion_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 { 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 TooltipController from './controllers/tooltip_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,
@@ -53,5 +56,6 @@ export default {
   'theme-switcher': ThemeSwitcherController,
   'toast-container': ToastContainerController,
   toast: ToastController,
+  toggle: ToggleController,
   tooltip: TooltipController,
 }