ruby_ui 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae8ccd52ccc249a9a1a409facc1883da7f87170bc5f70a0df32755e2fc5e5577
-  data.tar.gz: df99edbcb78e881e98a114c58b1e0e771180d40acc0677ab182c50e29487d33d
+  metadata.gz: 488fdc5b97a189ce4916f776af376a06760255437f681b3e3ef7e9aa0998e2b3
+  data.tar.gz: ff44a35b46e45d1cf1b510716fdc174fc50e229ef7a82d81c8318d51911beb3d
 SHA512:
-  metadata.gz: 9509f7c13c94b9f1b4767cc194e7eaeecda6ffd8eeb872c97693e7cf9ac875dbefa1457edc882df7e2ac093facf77ff856f1af3191549a7f37be8d901cb00ec6
-  data.tar.gz: 44f479fb9b95d79318e358dc4b2864a5b13cc51d1ddd958a199cd6c184ed190de8d93a07e07d416ca2d5c89e23094f1b158c187048b3030d17eadca9b23eb065
+  metadata.gz: 7f7fe5941b4a9e4375d280efd31ab1e35dca88b699cf4580f6722294c4b8fe161240bbe7bce09bf5f75d5a41a9c2d62e6c24ab9a3b4d4f32ef8062fa4e81d5b3
+  data.tar.gz: 0b3e785f7380c7ba5abc0e721d5d17c3a5708a554b13bb2cd946e8019241642ebd7dfb1b3cfc46b759d14e18e37d82cbf0f874824a0489ddf8d09003bda1d9d1

data/lib/generators/ruby_ui/component_generator.rb

@@ -9,6 +9,7 @@ module RubyUI
       source_root File.expand_path("../../ruby_ui", __dir__)
       argument :component_name, type: :string, required: true
       class_option :force, type: :boolean, default: false
+      class_option :with_docs, type: :boolean, default: false
 
       def generate_component
         if component_not_found?
@@ -63,7 +64,10 @@ module RubyUI
 
       def component_folder_path = File.join(self.class.source_root, component_folder_name)
 
-      def components_file_paths = Dir.glob(File.join(component_folder_path, "*.rb"))
+      def components_file_paths
+        files = Dir.glob(File.join(component_folder_path, "*.rb"))
+        options["with_docs"] ? files : files.reject { |f| f.end_with?("_docs.rb") }
+      end
 
       def js_controller_file_paths = Dir.glob(File.join(component_folder_path, "*.js"))
 

data/lib/generators/ruby_ui/dependencies.yml

@@ -2,6 +2,16 @@ accordion:
   js_packages:
     - "motion"
 
+data_table:
+  components:
+    - "Table"
+    - "Checkbox"
+    - "NativeSelect"
+    - "Pagination"
+    - "DropdownMenu"
+    - "Input"
+    - "Button"
+
 alert_dialog:
   components:
     - "Button"

data/lib/generators/ruby_ui/install/install_generator.rb

@@ -30,7 +30,7 @@ module RubyUI
         if gem_installed?("tailwind_merge")
           say "tailwind_merge is already installed", :green
         else
-          say "Adding phlex-rails to Gemfile"
+          say "Adding tailwind_merge to Gemfile"
           run %(bundle add tailwind_merge)
         end
       end

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -4,6 +4,8 @@ module RubyUI
       def install_js_package(package)
         if using_importmap?
           pin_with_importmap(package)
+        elsif using_bun?
+          run "bun add #{package}"
         elsif using_yarn?
           run "yarn add #{package}"
         elsif using_npm?
@@ -30,6 +32,8 @@ module RubyUI
         File.exist?(Rails.root.join("config/importmap.rb")) && File.exist?(Rails.root.join("bin/importmap"))
       end
 
+      def using_bun? = File.exist?(Rails.root.join("bun.lock"))
+
       def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
 
       def using_pnpm? = File.exist?(Rails.root.join("pnpm-lock.yaml"))

data/lib/ruby_ui/combobox/combobox.rb

@@ -19,7 +19,13 @@ module RubyUI
         data: {
           controller: "ruby-ui--combobox",
           ruby_ui__combobox_term_value: @term,
-          action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
+          action: %w[
+            turbo:morph@window->ruby-ui--combobox#updateTriggerContent
+            keydown.down->ruby-ui--combobox#keyDownPressed
+            keydown.up->ruby-ui--combobox#keyUpPressed
+            keydown.enter->ruby-ui--combobox#keyEnterPressed
+            keydown.esc->ruby-ui--combobox#closePopover:prevent
+          ]
         }
       }
     end

data/lib/ruby_ui/combobox/combobox_badge.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxBadge < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_badge_trigger.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxBadgeTrigger < Base
+    def initialize(placeholder: "", clear_button: false, **)
+      @placeholder = placeholder
+      @clear_button = clear_button
+      super(**)
+    end
+
+    def view_template(&)
+      div(**attrs) do
+        div(data: {ruby_ui__combobox_target: "badgeContainer"}, class: "hidden")
+        input(
+          type: "text",
+          class: "flex-1 min-w-8 bg-transparent border-0 px-0 outline-none focus:ring-0 placeholder:text-muted-foreground text-sm",
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          placeholder: @placeholder,
+          data: {
+            ruby_ui__combobox_target: "badgeInput",
+            action: "keyup->ruby-ui--combobox#filterItems input->ruby-ui--combobox#filterItems keydown.backspace->ruby-ui--combobox#handleBadgeInputBackspace"
+          }
+        )
+        render ComboboxClearButton.new if @clear_button
+      end
+    end
+
+    private
+
+    # JS-toggled classes (referenced here so Tailwind compiles them): h-auto min-h-9 pt-1.5
+    def default_attrs
+      {
+        class: "flex h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 cursor-text",
+        data: {
+          ruby_ui__combobox_target: "trigger",
+          action: "click->ruby-ui--combobox#openPopover focusin->ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -10,13 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: [
-          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "checked:bg-primary checked:text-primary-foreground",
-          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-        ],
+        class: "peer sr-only",
         data: {
           ruby_ui__combobox_target: "input",
           action: "ruby-ui--combobox#inputChanged"

data/lib/ruby_ui/combobox/combobox_clear_button.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxClearButton < Base
+    def view_template
+      button(**attrs) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-3.5"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        class: "ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hidden",
+        aria: {label: "Clear selection"},
+        data: {
+          ruby_ui__combobox_target: "clearButton",
+          # JS implementation in combobox_controller.js
+          action: "ruby-ui--combobox#clearAll"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -15,90 +15,276 @@ export default class extends Controller {
     "emptyState",
     "searchInput",
     "trigger",
-    "triggerContent"
+    "triggerContent",
+    "badgeContainer",
+    "clearButton",
+    "badgeInput",
+    "inputTrigger"
   ]
 
   selectedItemIndex = null
 
   connect() {
     this.updateTriggerContent()
+    this.updateBadges()
+    this.updateClearButton()
+    this.updateInputTrigger()
+
+    // Track mouse state to distinguish click-focus from tab-focus
+    this._mouseDown = false
+    this.element.addEventListener("mousedown", () => { this._mouseDown = true })
+    this.element.addEventListener("mouseup", () => { setTimeout(() => { this._mouseDown = false }, 0) })
   }
 
   disconnect() {
     if (this.cleanup) { this.cleanup() }
   }
 
+  // Popover
+
+  togglePopover(event) {
+    event.preventDefault()
+
+    if (this.triggerTarget.ariaExpanded === "true") {
+      this.closePopover()
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  openPopover(event) {
+    if (event && event.type !== "focusin" && event.type !== "focus") event.preventDefault()
+
+    // focusin/focus: only open on keyboard focus (tab), not mouse click
+    if (event && (event.type === "focusin" || event.type === "focus")) {
+      if (this._mouseDown || this.triggerTarget.ariaExpanded === "true" || this._closingPopover) return
+    }
+
+    this.updatePopoverPosition()
+    this.updatePopoverWidth()
+    this.triggerTarget.ariaExpanded = "true"
+    this.selectedItemIndex = null
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
+    this.popoverTarget.showPopover()
+
+    // Always show all items on open; filter only on user typing
+    this.applyFilter("")
+
+    if (this.hasBadgeInputTarget) {
+      this.badgeInputTarget.value = ""
+    }
+  }
+
+  closePopover() {
+    this._closingPopover = true
+    this.triggerTarget.ariaExpanded = "false"
+    this.popoverTarget.hidePopover()
+    setTimeout(() => this._closingPopover = false, 200)
+  }
+
   handlePopoverToggle(event) {
     // Keep ariaExpanded in sync with the actual popover state
     this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'
   }
 
+  updatePopoverPosition() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
+      computePosition(this.triggerTarget, this.popoverTarget, {
+        placement: 'bottom-start',
+        middleware: [offset(4), flip()],
+      }).then(({ x, y }) => {
+        Object.assign(this.popoverTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+
+  updatePopoverWidth() {
+    this.popoverTarget.style.width = `${this.triggerTarget.offsetWidth}px`
+  }
+
+  // Selection
+
   inputChanged(e) {
     this.updateTriggerContent()
 
     if (e.target.type == "radio") {
       this.closePopover()
+      this.updateInputTrigger()
     }
 
     if (this.hasToggleAllTarget && !e.target.checked) {
       this.toggleAllTarget.checked = false
     }
-  }
 
-  inputContent(input) {
-    return input.dataset.text || input.parentElement.textContent
+    this.updateBadges()
+    this.updateClearButton()
   }
 
   toggleAllItems() {
     const isChecked = this.toggleAllTarget.checked
     this.inputTargets.forEach(input => input.checked = isChecked)
     this.updateTriggerContent()
+    this.updateBadges()
+    this.updateClearButton()
+  }
+
+  clearAll(event) {
+    if (event) event.preventDefault()
+
+    this.inputTargets.forEach(input => input.checked = false)
+    this.updateBadges()
+    this.updateClearButton()
+    this.updateTriggerContent()
+    this.updateInputTrigger()
+  }
+
+  removeBadge(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const value = event.currentTarget.closest('[data-value]').dataset.value
+    const input = this.inputTargets.find(input => input.value === value)
+
+    if (input) {
+      input.checked = false
+      input.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+  }
+
+  // Display
+
+  inputContent(input) {
+    return input.dataset.text || input.parentElement.textContent
   }
 
   updateTriggerContent() {
+    if (!this.hasTriggerContentTarget) return
+
     const checkedInputs = this.inputTargets.filter(input => input.checked)
 
     if (checkedInputs.length === 0) {
       this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder
+      this.triggerContentTarget.classList.add("text-muted-foreground")
     } else if (this.termValue && checkedInputs.length > 1) {
       this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`
+      this.triggerContentTarget.classList.remove("text-muted-foreground")
     } else {
       this.triggerContentTarget.innerText = checkedInputs.map((input) => this.inputContent(input)).join(", ")
+      this.triggerContentTarget.classList.remove("text-muted-foreground")
     }
   }
 
-  togglePopover(event) {
-    event.preventDefault()
+  updateInputTrigger() {
+    if (!this.hasInputTriggerTarget) return
+    const checked = this.inputTargets.find(i => i.checked)
+    this.inputTriggerTarget.value = checked ? this.inputContent(checked) : ""
+  }
 
-    if (this.triggerTarget.ariaExpanded === "true") {
-      this.closePopover()
+  // NOTE: badge classes mirror ComboboxBadge Ruby component. Update both if styles change.
+  updateBadges() {
+    if (!this.hasBadgeContainerTarget) return
+
+    // Remove existing badges
+    this.triggerTarget.querySelectorAll("[data-combobox-badge]").forEach(el => el.remove())
+
+    const checkedInputs = this.inputTargets.filter(input => input.checked)
+
+    // Toggle trigger height: h-9 when empty, h-auto min-h-9 when badges exist
+    if (checkedInputs.length > 0) {
+      this.triggerTarget.classList.remove("h-9")
+      this.triggerTarget.classList.add("h-auto", "min-h-9")
     } else {
-      this.openPopover(event)
+      this.triggerTarget.classList.remove("h-auto", "min-h-9", "pt-1.5")
+      this.triggerTarget.classList.add("h-9")
     }
-  }
 
-  openPopover(event) {
-    if (event) event.preventDefault()
+    checkedInputs.forEach(input => {
+      const badge = document.createElement("span")
+      badge.setAttribute("data-combobox-badge", "")
+      badge.className = "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground"
+      badge.dataset.value = input.value
+
+      badge.appendChild(document.createTextNode(this.inputContent(input).trim()))
+
+      const btn = document.createElement("button")
+      btn.type = "button"
+      btn.setAttribute("aria-label", "Remove")
+      btn.className = "rounded-sm opacity-50 hover:opacity-100 focus-visible:outline-none"
+
+      btn.addEventListener("click", (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+        const target = this.inputTargets.find(i => i.value === input.value)
+        if (target) {
+          target.checked = false
+          this.updateBadges()
+          this.updateClearButton()
+        }
+      })
+
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+      svg.setAttribute("width", "12")
+      svg.setAttribute("height", "12")
+      svg.setAttribute("viewBox", "0 0 24 24")
+      svg.setAttribute("fill", "none")
+      svg.setAttribute("stroke", "currentColor")
+      svg.setAttribute("stroke-width", "2")
+      svg.setAttribute("stroke-linecap", "round")
+      svg.setAttribute("stroke-linejoin", "round")
+      svg.classList.add("pointer-events-none")
+
+      const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path")
+      path1.setAttribute("d", "M18 6 6 18")
+      const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path")
+      path2.setAttribute("d", "m6 6 12 12")
+
+      svg.appendChild(path1)
+      svg.appendChild(path2)
+      btn.appendChild(svg)
+      badge.appendChild(btn)
+
+      // Insert badge directly in trigger, before the text input
+      this.badgeInputTarget.insertAdjacentElement("beforebegin", badge)
+    })
 
-    this.updatePopoverPosition()
-    this.updatePopoverWidth()
-    this.triggerTarget.ariaExpanded = "true"
-    this.selectedItemIndex = null
-    this.itemTargets.forEach(item => item.ariaCurrent = "false")
-    this.popoverTarget.showPopover()
+    // Add top padding only when badges wrap to multiple lines
+    // Class "pt-1.5" is referenced in ComboboxBadgeTrigger for Tailwind to compile it
+    const badges = this.triggerTarget.querySelectorAll("[data-combobox-badge]")
+    if (badges.length > 0 && this.badgeInputTarget.offsetTop > badges[0].offsetTop) {
+      this.triggerTarget.classList.add("pt-1.5")
+    } else {
+      this.triggerTarget.classList.remove("pt-1.5")
+    }
   }
 
-  closePopover() {
-    this.triggerTarget.ariaExpanded = "false"
-    this.popoverTarget.hidePopover()
+  updateClearButton() {
+    if (!this.hasClearButtonTarget) return
+
+    const hasChecked = this.inputTargets.some(input => input.checked)
+    this.clearButtonTarget.classList.toggle("hidden", !hasChecked)
   }
 
+  // Filter
+
   filterItems(e) {
-    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) {
-      return
-    }
+    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) return
+
+    const term = this.hasBadgeInputTarget
+      ? this.badgeInputTarget.value
+      : this.hasInputTriggerTarget
+        ? this.inputTriggerTarget.value
+        : this.searchInputTarget.value
+
+    this.applyFilter(term)
+  }
 
-    const filterTerm = this.searchInputTarget.value.toLowerCase()
+  applyFilter(term) {
+    const filterTerm = term.toLowerCase()
 
     if (this.hasToggleAllTarget) {
       if (filterTerm) this.toggleAllTarget.parentElement.classList.add("hidden")
@@ -106,12 +292,10 @@ export default class extends Controller {
     }
 
     let resultCount = 0
-
     this.selectedItemIndex = null
 
     this.inputTargets.forEach((input) => {
       const text = this.inputContent(input).toLowerCase()
-
       if (text.indexOf(filterTerm) > -1) {
         input.parentElement.classList.remove("hidden")
         resultCount++
@@ -121,9 +305,20 @@ export default class extends Controller {
     })
 
     this.emptyStateTarget.classList.toggle("hidden", resultCount !== 0)
+
+    // Auto-highlight first visible result (without scrolling to avoid page jump)
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
+    const firstVisible = this.inputTargets.find(i => !i.parentElement.classList.contains("hidden"))
+    if (firstVisible) {
+      this.selectedItemIndex = 0
+      firstVisible.parentElement.ariaCurrent = "true"
+    }
   }
 
-  keyDownPressed() {
+  // Keyboard
+
+  keyDownPressed(event) {
+    event.preventDefault()
     if (this.selectedItemIndex !== null) {
       this.selectedItemIndex++
     } else {
@@ -133,7 +328,8 @@ export default class extends Controller {
     this.focusSelectedInput()
   }
 
-  keyUpPressed() {
+  keyUpPressed(event) {
+    event.preventDefault()
     if (this.selectedItemIndex !== null) {
       this.selectedItemIndex--
     } else {
@@ -143,6 +339,15 @@ export default class extends Controller {
     this.focusSelectedInput()
   }
 
+  keyEnterPressed(event) {
+    event.preventDefault()
+    const option = this.itemTargets.find(item => item.ariaCurrent === "true")
+
+    if (option) {
+      option.click()
+    }
+  }
+
   focusSelectedInput() {
     const visibleInputs = this.inputTargets.filter(input => !input.parentElement.classList.contains("hidden"))
 
@@ -158,34 +363,19 @@ export default class extends Controller {
     })
   }
 
-  keyEnterPressed(event) {
-    event.preventDefault()
-    const option = this.itemTargets.find(item => item.ariaCurrent === "true")
-
-    if (option) {
-      option.click()
-    }
-  }
-
   wrapSelectedInputIndex(length) {
     this.selectedItemIndex = ((this.selectedItemIndex % length) + length) % length
   }
 
-  updatePopoverPosition() {
-    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
-      computePosition(this.triggerTarget, this.popoverTarget, {
-        placement: 'bottom-start',
-        middleware: [offset(4), flip()],
-      }).then(({ x, y }) => {
-        Object.assign(this.popoverTarget.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-      });
-    });
-  }
+  handleBadgeInputBackspace(event) {
+    if (this.badgeInputTarget.value !== "") return
 
-  updatePopoverWidth() {
-    this.popoverTarget.style.width = `${this.triggerTarget.offsetWidth}px`
+    const checkedInputs = this.inputTargets.filter(input => input.checked)
+    const lastChecked = checkedInputs[checkedInputs.length - 1]
+
+    if (lastChecked) {
+      lastChecked.checked = false
+      lastChecked.dispatchEvent(new Event("change", { bubbles: true }))
+    }
   }
 }