shadcn_phlexcomponents 0.1.11 → 0.1.16

data/lib/shadcn_phlexcomponents/components/table.rb

@@ -10,7 +10,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(class: "relative w-full overflow-x-auto", data: { shadcn_phlexcomponents: "table-container" }) do
+      div(class: "relative w-full overflow-x-auto") do
         table(**@attributes, &)
       end
     end

data/lib/shadcn_phlexcomponents/components/tabs.rb

@@ -97,7 +97,7 @@ module ShadcnPhlexcomponents
           action: <<~HEREDOC,
             click->tabs#setActiveTab
             keydown.left->tabs#setActiveTab:prevent
-            keydown.right->tabs#setActiveToNext:prevent
+            keydown.right->tabs#setActiveTab:prevent
           HEREDOC
         },
       }

data/lib/shadcn_phlexcomponents/components/toast_container.rb

@@ -3,7 +3,7 @@
 module ShadcnPhlexcomponents
   class ToastContainer < Base
     class_variants(
-      base: "fixed z-[100] hidden has-[li]:flex flex-col gap-2",
+      base: "fixed z-50 hidden has-[li]:flex flex-col gap-2",
       variants: {
         side: {
           top_center: "top-6 left-1/2 -translate-x-1/2",

data/lib/shadcn_phlexcomponents/components/toggle.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Toggle < Base
+    class_variants(
+      base: <<~HEREDOC,
+        inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted
+        hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent
+        data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
+        [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none
+        transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive whitespace-nowrap
+      HEREDOC
+      variants: {
+        variant: {
+          default: "bg-transparent",
+          outline: "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-muted-foreground",
+        },
+        size: {
+          default: "h-9 px-2 min-w-9",
+          sm: "h-8 px-1.5 min-w-8",
+          lg: "h-10 px-2.5 min-w-10",
+        },
+      },
+      defaults: {
+        variant: :default,
+        size: :default,
+      },
+    )
+
+    def initialize(variant: :default, size: :default, on: false, **attributes)
+      @class_variants = { variant: variant, size: size }
+      @on = on
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        aria: {
+          pressed: @on.to_s,
+        },
+        data: {
+          controller: "toggle",
+          toggle_is_on_value: @on.to_s,
+          action: "click->toggle#toggle"
+        },
+      }
+    end
+
+    def view_template(&)
+      button(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/tooltip.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Tooltip < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -93,7 +93,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { tooltip_target: "contentContainer" },
       ) do
         div(**@attributes) do

data/lib/shadcn_phlexcomponents/engine.rb

@@ -3,9 +3,5 @@
 require "rails"
 
 module ShadcnPhlexcomponents
-  class Engine < ::Rails::Engine
-    config.app_generators do |g|
-      g.template_engine(:shadcn_phlexcomponents)
-    end
-  end
+  class Engine < ::Rails::Engine; end
 end

data/lib/shadcn_phlexcomponents/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-  VERSION = "0.1.11"
+  VERSION = "0.1.16"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shadcn_phlexcomponents
 version: !ruby/object:Gem::Version
-  version: 0.1.11
+  version: 0.1.16
 platform: ruby
 authors:
 - Sean Yeoh
@@ -73,40 +73,77 @@ extra_rdoc_files: []
 files:
 - README.md
 - Rakefile
-- app/javascript/controllers/accordion_controller.ts
-- app/javascript/controllers/avatar_controller.ts
-- app/javascript/controllers/checkbox_controller.ts
-- app/javascript/controllers/collapsible_controller.ts
-- app/javascript/controllers/combobox_controller.ts
-- app/javascript/controllers/command_controller.ts
-- app/javascript/controllers/command_root_controller.ts
-- app/javascript/controllers/date_picker_controller.ts
-- app/javascript/controllers/date_range_picker_controller.ts
-- app/javascript/controllers/dialog_controller.ts
-- app/javascript/controllers/dropdown_menu_controller.ts
-- app/javascript/controllers/dropdown_menu_root_controller.ts
-- app/javascript/controllers/dropdown_menu_sub_controller.ts
-- app/javascript/controllers/form_field_controller.ts
-- app/javascript/controllers/hover_card_controller.ts
-- app/javascript/controllers/loading_button_controller.ts
-- app/javascript/controllers/popover_controller.ts
-- app/javascript/controllers/progress_controller.ts
-- app/javascript/controllers/radio_group_controller.ts
-- app/javascript/controllers/select_controller.ts
-- app/javascript/controllers/sidebar_controller.ts
-- app/javascript/controllers/sidebar_trigger_controller.ts
-- app/javascript/controllers/slider_controller.ts
-- app/javascript/controllers/switch_controller.ts
-- app/javascript/controllers/tabs_controller.ts
-- app/javascript/controllers/theme_switcher_controller.ts
-- app/javascript/controllers/toast_container_controller.ts
-- app/javascript/controllers/toast_controller.ts
-- app/javascript/controllers/tooltip_controller.ts
-- app/javascript/shadcn_phlexcomponents.ts
-- app/javascript/utils.ts
+- app/javascript/controllers/accordion_controller.js
+- app/javascript/controllers/alert_dialog_controller.js
+- app/javascript/controllers/avatar_controller.js
+- app/javascript/controllers/checkbox_controller.js
+- app/javascript/controllers/collapsible_controller.js
+- app/javascript/controllers/combobox_controller.js
+- app/javascript/controllers/command_controller.js
+- app/javascript/controllers/date_picker_controller.js
+- app/javascript/controllers/date_range_picker_controller.js
+- app/javascript/controllers/dialog_controller.js
+- app/javascript/controllers/dropdown_menu_controller.js
+- app/javascript/controllers/dropdown_menu_sub_controller.js
+- app/javascript/controllers/form_field_controller.js
+- app/javascript/controllers/hover_card_controller.js
+- app/javascript/controllers/loading_button_controller.js
+- app/javascript/controllers/popover_controller.js
+- app/javascript/controllers/progress_controller.js
+- app/javascript/controllers/radio_group_controller.js
+- app/javascript/controllers/select_controller.js
+- app/javascript/controllers/sidebar_controller.js
+- app/javascript/controllers/sidebar_trigger_controller.js
+- app/javascript/controllers/slider_controller.js
+- app/javascript/controllers/switch_controller.js
+- app/javascript/controllers/tabs_controller.js
+- app/javascript/controllers/theme_switcher_controller.js
+- app/javascript/controllers/toast_container_controller.js
+- app/javascript/controllers/toast_controller.js
+- app/javascript/controllers/toggle_controller.js
+- app/javascript/controllers/toggle_group_controller.js
+- app/javascript/controllers/tooltip_controller.js
+- app/javascript/shadcn_phlexcomponents.js
+- app/javascript/utils/command.js
+- app/javascript/utils/floating_ui.js
+- app/javascript/utils/index.js
 - app/stylesheets/date_picker.css
 - app/stylesheets/nouislider.css
 - app/stylesheets/tw-animate.css
+- app/typescript/controllers/accordion_controller.ts
+- app/typescript/controllers/alert_dialog_controller.ts
+- app/typescript/controllers/avatar_controller.ts
+- app/typescript/controllers/checkbox_controller.ts
+- app/typescript/controllers/collapsible_controller.ts
+- app/typescript/controllers/combobox_controller.ts
+- app/typescript/controllers/command_controller.ts
+- app/typescript/controllers/date_picker_controller.ts
+- app/typescript/controllers/date_range_picker_controller.ts
+- app/typescript/controllers/dialog_controller.ts
+- app/typescript/controllers/dropdown_menu_controller.ts
+- app/typescript/controllers/dropdown_menu_sub_controller.ts
+- app/typescript/controllers/form_field_controller.ts
+- app/typescript/controllers/hover_card_controller.ts
+- app/typescript/controllers/loading_button_controller.ts
+- app/typescript/controllers/popover_controller.ts
+- app/typescript/controllers/progress_controller.ts
+- app/typescript/controllers/radio_group_controller.ts
+- app/typescript/controllers/select_controller.ts
+- app/typescript/controllers/sidebar_controller.ts
+- app/typescript/controllers/sidebar_trigger_controller.ts
+- app/typescript/controllers/slider_controller.ts
+- app/typescript/controllers/switch_controller.ts
+- app/typescript/controllers/tabs_controller.ts
+- app/typescript/controllers/theme_switcher_controller.ts
+- app/typescript/controllers/toast_container_controller.ts
+- app/typescript/controllers/toast_controller.ts
+- app/typescript/controllers/toggle_controller.ts
+- app/typescript/controllers/toggle_group_controller.ts
+- app/typescript/controllers/tooltip_controller.ts
+- app/typescript/shadcn_phlexcomponents.ts
+- app/typescript/utils/command.ts
+- app/typescript/utils/floating_ui.ts
+- app/typescript/utils/index.ts
 - lib/install/install_shadcn_phlexcomponents.rb
 - lib/shadcn_phlexcomponents.rb
 - lib/shadcn_phlexcomponents/alias.rb
@@ -133,6 +170,7 @@ files:
 - lib/shadcn_phlexcomponents/components/form.rb
 - lib/shadcn_phlexcomponents/components/form/form_checkbox.rb
 - lib/shadcn_phlexcomponents/components/form/form_checkbox_group.rb
+- lib/shadcn_phlexcomponents/components/form/form_combobox.rb
 - lib/shadcn_phlexcomponents/components/form/form_date_picker.rb
 - lib/shadcn_phlexcomponents/components/form/form_date_range_picker.rb
 - lib/shadcn_phlexcomponents/components/form/form_error.rb
@@ -165,6 +203,7 @@ files:
 - lib/shadcn_phlexcomponents/components/theme_switcher.rb
 - lib/shadcn_phlexcomponents/components/toast.rb
 - lib/shadcn_phlexcomponents/components/toast_container.rb
+- lib/shadcn_phlexcomponents/components/toggle.rb
 - lib/shadcn_phlexcomponents/components/tooltip.rb
 - lib/shadcn_phlexcomponents/engine.rb
 - lib/shadcn_phlexcomponents/initializers/shadcn_phlexcomponents.rb

data/app/javascript/controllers/accordion_controller.ts

@@ -1,133 +0,0 @@
-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/combobox_controller.ts

@@ -1,145 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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)
-      }
-    }
-  }
-}