ruby_ui 1.3.0 → 1.6.0

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -52,10 +52,7 @@ module RubyUI
         stroke_linejoin: "round"
       ) do |s|
         s.path(
-          d: "m7 15 5 5 5-5"
-        )
-        s.path(
-          d: "m7 9 5-5 5 5"
+          d: "m6 9 6 6 6-6"
         )
       end
     end

data/lib/ruby_ui/context_menu/context_menu_content.rb

@@ -2,10 +2,8 @@
 
 module RubyUI
   class ContextMenuContent < Base
-    def view_template(&block)
-      template(data: {ruby_ui__context_menu_target: "content"}) do
-        div(**attrs, &block)
-      end
+    def view_template(&)
+      div(**attrs, &)
     end
 
     private
@@ -14,9 +12,10 @@ module RubyUI
       {
         role: "menu",
         aria_orientation: "vertical",
-        data_state: "open",
+        data_state: "closed",
+        data: {ruby_ui__context_menu_target: "content"},
         class:
-              "z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+              "hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         tabindex: "-1",
         data_orientation: "vertical"
       }

data/lib/ruby_ui/context_menu/context_menu_controller.js

@@ -1,106 +1,125 @@
 import { Controller } from "@hotwired/stimulus";
-import tippy from "tippy.js";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
   static values = {
-    options: {
-      type: Object,
-      default: {},
-    },
-    // make content width of the trigger element (true/false)
-    matchWidth: {
-      type: Boolean,
-      default: false,
-    }
-  }
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    // make content width match the trigger element (true/false)
+    matchWidth: { type: Boolean, default: false },
+  };
 
   connect() {
-    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
-    this.initializeTippy();
+    this.cleanup = null;
     this.selectedIndex = -1;
+    this.boundHandleKeydown = this.handleKeydown.bind(this);
   }
 
   disconnect() {
-    this.destroyTippy();
+    this.hide();
   }
 
-  initializeTippy() {
-    const defaultOptions = {
-      content: this.contentTarget.innerHTML,
-      allowHTML: true,
-      interactive: true,
-      onShow: (instance) => {
-        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
-        this.addEventListeners();
-      },
-      onHide: () => {
-        this.removeEventListeners();
-        this.deselectAll();
-      },
-      popperOptions: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 4]
-            },
-          },
-        ],
-      }
-    };
-
-    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
-    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  handleContextMenu(event) {
+    event.preventDefault();
+    this.open();
   }
 
-  destroyTippy() {
-    if (this.tippy) {
-      this.tippy.destroy();
+  open() {
+    this.openValue = true;
+    this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
+    if (this.matchWidthValue) {
+      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
     }
+    this.addEventListeners();
+    this.updatePosition();
   }
 
-  setContentWidth(instance) {
-    // box-sizing: border-box
-    const content = instance.popper.querySelector('.tippy-content');
-    if (content) {
-      content.style.width = `${instance.reference.offsetWidth}px`;
+  close() {
+    this.hide();
+  }
+
+  hide() {
+    if (!this.openValue) return;
+    this.openValue = false;
+    this.contentTarget.classList.add("hidden");
+    this.contentTarget.dataset.state = "closed";
+    this.removeEventListeners();
+    this.deselectAll();
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
     }
   }
 
-  handleContextMenu(event) {
-    event.preventDefault();
-    this.open();
+  updatePosition() {
+    if (this.cleanup) this.cleanup();
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom-start",
+        middleware: [offset(4), flip(), shift({ padding: 8 })],
+      }).then(({ x, y, placement }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+        this.contentTarget.dataset.side = placement.split("-")[0];
+      });
+    });
   }
 
-  open() {
-    this.tippy.show();
+  addEventListeners() {
+    document.addEventListener("keydown", this.boundHandleKeydown);
+    document.addEventListener("click", this.handleOutsidePointer);
+    // A right-click outside should dismiss this menu and let the native
+    // context menu (or another trigger's menu) take over.
+    document.addEventListener("contextmenu", this.handleOutsidePointer);
   }
 
-  close() {
-    this.tippy.hide();
+  removeEventListeners() {
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    document.removeEventListener("click", this.handleOutsidePointer);
+    document.removeEventListener("contextmenu", this.handleOutsidePointer);
   }
 
+  handleOutsidePointer = (event) => {
+    if (!this.element.contains(event.target)) {
+      this.hide();
+    }
+  };
+
   handleKeydown(e) {
-    // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { return; }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.hide();
+      return;
+    }
 
-    if (e.key === 'ArrowDown') {
+    if (this.menuItemTargets.length === 0) return;
+
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.updateSelectedItem(1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       this.updateSelectedItem(-1);
-    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
     }
   }
 
   updateSelectedItem(direction) {
-    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
     this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute('aria-selected') === 'true') {
+      if (item.getAttribute("aria-selected") === "true") {
         this.selectedIndex = index;
       }
     });
@@ -121,24 +140,17 @@ export default class extends Controller {
   }
 
   toggleAriaSelected(element, isSelected) {
-    // Add or remove attribute
     if (isSelected) {
-      element.setAttribute('aria-selected', 'true');
+      element.setAttribute("aria-selected", "true");
     } else {
-      element.removeAttribute('aria-selected');
+      element.removeAttribute("aria-selected");
     }
   }
 
   deselectAll() {
-    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.menuItemTargets.forEach((item) =>
+      this.toggleAriaSelected(item, false)
+    );
     this.selectedIndex = -1;
   }
-
-  addEventListeners() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
-  }
-
-  removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
-  }
 }

data/lib/ruby_ui/data_table/data_table_column_toggle.rb

@@ -2,8 +2,9 @@
 
 module RubyUI
   class DataTableColumnToggle < Base
-    def initialize(columns:, **attrs)
+    def initialize(columns:, label: "Columns", **attrs)
       @columns = columns
+      @label = label
       super(**attrs)
     end
 
@@ -12,7 +13,7 @@ module RubyUI
         render RubyUI::DropdownMenu.new do
           render RubyUI::DropdownMenuTrigger.new do
             render RubyUI::Button.new(variant: :outline, size: :sm) do
-              plain "Columns"
+              plain @label
               # inline chevron-down SVG (lucide 24px, 1px stroke)
               svg(
                 xmlns: "http://www.w3.org/2000/svg",
@@ -35,8 +36,11 @@ module RubyUI
               label(class: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent") do
                 input(
                   type: "checkbox",
-                  checked: true,
-                  class: "h-4 w-4 rounded border border-input accent-primary cursor-pointer",
+                  checked: col.fetch(:visible, true),
+                  class: [
+                    "h-4 w-4 rounded border border-input accent-primary cursor-pointer",
+                    "checked:bg-primary checked:text-primary-foreground dark:checked:bg-secondary checked:text-primary checked:border-primary"
+                  ],
                   data: {
                     column_key: col[:key].to_s,
                     action: "change->ruby-ui--data-table-column-visibility#toggle"

data/lib/ruby_ui/data_table/data_table_column_visibility_controller.js

@@ -2,9 +2,19 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
+  connect() {
+    this.element
+      .querySelectorAll("input[type=checkbox][data-column-key]")
+      .forEach((checkbox) =>
+        this._apply(checkbox.dataset.columnKey, checkbox.checked)
+      );
+  }
+
   toggle(event) {
-    const key = event.target.dataset.columnKey;
-    const visible = event.target.checked;
+    this._apply(event.target.dataset.columnKey, event.target.checked);
+  }
+
+  _apply(key, visible) {
     const root = this.element.closest('[data-controller~="ruby-ui--data-table"]');
     if (!root) return;
     root

data/lib/ruby_ui/data_table/data_table_docs.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Views::Docs::DataTable < Views::Base
-  Row = Struct.new(:id, :name, :email, :salary, :status, keyword_init: true)
+  Row = Struct.new(:id, :name, :email, :salary, :status)
 
   SAMPLE_ROWS = [
     Row.new(id: 1, name: "Alice", email: "alice@example.com", salary: 90_000, status: "Active"),

data/lib/ruby_ui/dialog/dialog_content.rb

@@ -17,14 +17,9 @@ module RubyUI
     end
 
     def view_template
-      template(data: {ruby_ui__dialog_target: "content"}) do
-        div(data_controller: "ruby-ui--dialog") do
-          backdrop
-          div(**attrs) do
-            yield
-            close_button
-          end
-        end
+      dialog(**attrs) do
+        yield
+        close_button
       end
     end
 
@@ -32,9 +27,10 @@ module RubyUI
 
     def default_attrs
       {
-        data_state: "open",
+        data_ruby_ui__dialog_target: "dialog",
+        data_action: "click->ruby-ui--dialog#backdropClick",
         class: [
-          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
+          "fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }
@@ -43,7 +39,7 @@ module RubyUI
     def close_button
       button(
         type: "button",
-        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
         data_action: "click->ruby-ui--dialog#dismiss"
       ) do
         svg(
@@ -65,13 +61,5 @@ module RubyUI
         span(class: "sr-only") { "Close" }
       end
     end
-
-    def backdrop
-      div(
-        data_state: "open",
-        data_action: "click->ruby-ui--dialog#dismiss esc->ruby-ui--dialog#dismiss",
-        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0"
-      )
-    end
   end
 end

data/lib/ruby_ui/dialog/dialog_controller.js

@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="dialog"
+// Connects to data-controller="ruby-ui--dialog"
 export default class extends Controller {
-  static targets = ["content"]
+  static targets = ["dialog"]
   static values = {
     open: {
       type: Boolean,
@@ -11,22 +11,34 @@ export default class extends Controller {
   }
 
   connect() {
+    this.dialogTarget.addEventListener("close", this.handleClose)
     if (this.openValue) {
       this.open()
     }
   }
 
+  disconnect() {
+    this.dialogTarget.removeEventListener("close", this.handleClose)
+    document.body.classList.remove("overflow-hidden")
+  }
+
   open(e) {
-    e?.preventDefault();
-    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
-    // prevent scroll on body
-    document.body.classList.add('overflow-hidden')
+    e?.preventDefault()
+    this.dialogTarget.showModal()
+    document.body.classList.add("overflow-hidden")
   }
 
   dismiss() {
-    // allow scroll on body
-    document.body.classList.remove('overflow-hidden')
-    // remove the element
-    this.element.remove()
+    this.dialogTarget.close()
+  }
+
+  backdropClick(e) {
+    if (e.target === this.dialogTarget) {
+      this.dismiss()
+    }
+  }
+
+  handleClose = () => {
+    document.body.classList.remove("overflow-hidden")
   }
 }

data/lib/ruby_ui/dropdown_menu/dropdown_menu.rb

@@ -16,7 +16,6 @@ module RubyUI
     def default_attrs
       {
         class: [
-          "z-50",
           "group/dropdown-menu",
           (strategy == "absolute") ? "is-absolute" : "is-fixed"
         ],

data/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js

@@ -43,7 +43,7 @@ export default class extends Controller {
 
   #computeTooltip() {
     computePosition(this.triggerTarget, this.contentTarget, {
-      placement: this.optionsValue.placement || "top",
+      placement: this.optionsValue.placement || "bottom",
       middleware: [flip(), shift(), offset(8)],
       strategy: this.optionsValue.strategy || "absolute",
     }).then(({ x, y }) => {
@@ -73,12 +73,16 @@ export default class extends Controller {
     this.#deselectAll();
     this.#addEventListeners();
     this.#computeTooltip();
+    // Lift the open menu above sibling dropdowns/elements. The container has no
+    // static z-index, so closed siblings stack in normal flow and never cover it.
+    this.element.style.zIndex = "50";
     this.contentTarget.classList.remove("hidden");
   }
 
   close() {
     this.openValue = false;
     this.#removeEventListeners();
+    this.element.style.zIndex = "";
     this.contentTarget.classList.add("hidden");
   }
 

data/lib/ruby_ui/dropdown_menu/dropdown_menu_docs.rb

@@ -11,7 +11,7 @@ class Views::Docs::DropdownMenu < Views::Base
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
           DropdownMenu do
-            DropdownMenuTrigger(class: 'w-full') do
+            DropdownMenuTrigger do
               Button(variant: :outline) { "Open" }
             end
             DropdownMenuContent do

data/lib/ruby_ui/dropdown_menu/dropdown_menu_item.rb

@@ -2,20 +2,24 @@
 
 module RubyUI
   class DropdownMenuItem < Base
-    def initialize(href: "#", **attrs)
+    def initialize(as: :a, href: "#", **attrs)
+      @as = as
       @href = href
       super(**attrs)
     end
 
     def view_template(&)
-      a(**attrs, &)
+      if @as == :div
+        div(**attrs, &)
+      else
+        a(**attrs, &)
+      end
     end
 
     private
 
     def default_attrs
-      {
-        href: @href,
+      base = {
         role: "menuitem",
         class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         data_action: "click->ruby-ui--dropdown-menu#close",
@@ -23,6 +27,8 @@ module RubyUI
         tabindex: "-1",
         data_orientation: "vertical"
       }
+      base[:href] = @href unless @as == :div
+      base
     end
   end
 end

data/lib/ruby_ui/empty/empty.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Empty < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "empty"},
+        class: "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed p-12 text-center text-balance"
+      }
+    end
+  end
+end

data/lib/ruby_ui/empty/empty_content.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class EmptyContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "empty-content"},
+        class: "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance"
+      }
+    end
+  end
+end

data/lib/ruby_ui/empty/empty_description.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class EmptyDescription < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "empty-description"},
+        class: "text-sm leading-relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary"
+      }
+    end
+  end
+end

data/lib/ruby_ui/empty/empty_docs.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+class Views::Docs::Empty < Views::Base
+  def view_template
+    component = "Empty"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Empty", description: "Use the empty component to display a state when there is no data or content.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          Empty do
+            EmptyHeader do
+              EmptyMedia(variant: :icon) do
+                svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewbox: "0 0 24 24", stroke_width: "1.5", stroke: "currentColor", class: "size-6") do |s|
+                  s.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155")
+                end
+              end
+              EmptyTitle { "No messages yet" }
+              EmptyDescription { "Start a conversation to see your messages here." }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With action", context: self) do
+        <<~RUBY
+          Empty do
+            EmptyHeader do
+              EmptyMedia(variant: :icon) do
+                svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewbox: "0 0 24 24", stroke_width: "1.5", stroke: "currentColor", class: "size-6") do |s|
+                  s.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z")
+                end
+              end
+              EmptyTitle { "No projects" }
+              EmptyDescription { "Get started by creating your first project." }
+            end
+            EmptyContent do
+              Button { "Create project" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Default media", context: self) do
+        <<~RUBY
+          Empty(class: "border-none") do
+            EmptyHeader do
+              EmptyMedia(variant: :default) do
+                Avatar(size: :lg) do
+                  AvatarFallback { "RU" }
+                end
+              end
+              EmptyTitle { "No team members" }
+              EmptyDescription { "Invite your team to start collaborating." }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      # components
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/empty/empty_header.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class EmptyHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "empty-header"},
+        class: "flex max-w-sm flex-col items-center gap-2"
+      }
+    end
+  end
+end