shadcn_phlexcomponents 0.1.9 → 0.1.14

data/app/javascript/controllers/toast_container_controller.ts

@@ -0,0 +1,67 @@
+import { Controller } from '@hotwired/stimulus'
+import DOMPurify from 'dompurify'
+
+const ToastContainerController = class extends Controller<HTMLElement> {
+  addToast({
+    title,
+    description,
+    action,
+    variant = 'default',
+    duration = 5000,
+  }: {
+    title: string
+    description?: string
+    action?: string
+    variant: string
+    duration?: number
+  }) {
+    const template = (
+      variant === 'default'
+        ? this.element.querySelector('[data-variant="default"]')
+        : this.element.querySelector('[data-variant="destructive"]')
+    ) as HTMLTemplateElement
+
+    const clone = template.content.cloneNode(true) as HTMLElement
+
+    const toastTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast"]',
+    ) as HTMLElement
+    toastTemplate.dataset.duration = String(duration)
+
+    const titleTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-title"]',
+    ) as HTMLElement
+    const descriptionTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-description"]',
+    ) as HTMLElement
+    const actionTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-action"]',
+    ) as HTMLElement
+
+    titleTemplate.innerHTML = DOMPurify.sanitize(title)
+
+    if (description) {
+      descriptionTemplate.innerHTML = DOMPurify.sanitize(description)
+    } else {
+      descriptionTemplate.remove()
+    }
+
+    if (action) {
+      const element = document.createElement('div')
+      element.innerHTML = DOMPurify.sanitize(action)
+      const actionElement = element.firstElementChild as HTMLElement
+      const classes = actionTemplate.classList
+      actionElement.classList.add(...classes)
+      actionTemplate.replaceWith(actionElement)
+    } else {
+      actionTemplate.remove()
+    }
+
+    this.element.append(clone)
+  }
+}
+
+type ToastContainer = InstanceType<typeof ToastContainerController>
+
+export { ToastContainerController }
+export type { ToastContainer }

data/app/javascript/controllers/toast_controller.ts

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+import { ANIMATION_OUT_DELAY } from '../utils'
+
+const ToastController = class extends Controller<HTMLElement> {
+  // custom properties
+  declare duration: number
+  declare closeTimeout: number
+
+  connect() {
+    this.duration = Number(this.element.dataset.duration)
+    this.close()
+  }
+
+  cancelClose() {
+    window.clearTimeout(this.closeTimeout)
+  }
+
+  close() {
+    if (this.duration > 0) {
+      this.closeTimeout = window.setTimeout(() => {
+        this.element.dataset.state = 'closed'
+
+        setTimeout(() => {
+          this.element.remove()
+        }, ANIMATION_OUT_DELAY)
+      }, this.duration)
+    }
+  }
+}
+
+type Toast = InstanceType<typeof ToastController>
+
+export { ToastController }
+export type { Toast }

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

@@ -0,0 +1,110 @@
+import { Controller } from '@hotwired/stimulus'
+import { useHover } from 'stimulus-use'
+import { initFloatingUi } from '../utils/floating_ui'
+import { showContent, hideContent } from '../utils'
+
+const TooltipController = class extends Controller<HTMLElement> {
+  // targets
+  static targets = ['trigger', 'content', 'contentContainer', 'arrow']
+  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
+
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    useHover(this, { element: this.triggerTarget, dispatchEvent: false })
+  }
+
+  open() {
+    window.clearTimeout(this.closeTimeout)
+    this.isOpenValue = true
+  }
+
+  close() {
+    this.closeTimeout = window.setTimeout(() => {
+      this.isOpenValue = false
+    }, 250)
+  }
+
+  closeImmediately() {
+    this.isOpenValue = false
+  }
+
+  // for useHover
+  mouseEnter() {
+    this.open()
+  }
+
+  // for useHover
+  mouseLeave() {
+    this.close()
+  }
+
+  isOpenValueChanged(isOpen: boolean) {
+    if (isOpen) {
+      showContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      this.setupEventListeners()
+
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        arrowElement: this.arrowTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 8,
+      })
+    } else {
+      hideContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+      this.cleanupEventListeners()
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
+  }
+
+  protected onDOMKeydown(event: KeyboardEvent) {
+    if (!this.isOpenValue) return
+
+    const key = event.key
+
+    if (['Escape', 'Enter', ' '].includes(key)) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      this.closeImmediately()
+    }
+  }
+
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+}
+
+type Tooltip = InstanceType<typeof TooltipController>
+
+export { TooltipController }
+export type { Tooltip }

data/app/javascript/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,
+}