ruby_ui 1.1.0 → 1.3.0

data/lib/ruby_ui/toggle_group/toggle_group_item.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToggleGroupItem < Toggle
+    JOIN_BASE = "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10"
+
+    def initialize(value:, group_context:, variant: nil, size: nil, **attrs)
+      @item_value = value.to_s
+      @group_context = group_context
+
+      pressed = group_context[:selected_values].include?(@item_value)
+      super(
+        pressed: pressed,
+        name: nil,
+        value: @item_value,
+        variant: variant || group_context[:variant],
+        size: size || group_context[:size],
+        disabled: group_context[:disabled],
+        **attrs
+      )
+    end
+
+    def view_template(&block)
+      button(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      attrs = {type: "button"}
+      attrs[:disabled] = true if @disabled
+      attrs[:data] = {
+        state: @pressed ? "on" : "off",
+        value: @item_value,
+        "ruby-ui--toggle-group-target": "item",
+        action: "click->ruby-ui--toggle-group#select keydown->ruby-ui--toggle-group#navigate"
+      }
+      attrs[:class] = [Toggle.classes_for(variant: @variant, size: @size), join_classes]
+
+      if @group_context[:type] == :single
+        attrs[:role] = "radio"
+        attrs[:aria] = {checked: @pressed.to_s}
+        attrs[:tabindex] = @pressed ? "0" : "-1"
+      else
+        attrs[:aria] = {pressed: @pressed.to_s}
+        attrs[:tabindex] = "0"
+      end
+
+      attrs
+    end
+
+    def join_classes
+      classes = [JOIN_BASE]
+      return classes unless @group_context[:spacing] == 0
+
+      classes << "rounded-none shadow-none"
+      if @group_context[:orientation] == :vertical
+        classes << "first-of-type:rounded-t-md last-of-type:rounded-b-md"
+        classes << "border-t-0 first-of-type:border-t" if @group_context[:variant] == :outline
+      else
+        classes << "first-of-type:rounded-l-md last-of-type:rounded-r-md"
+        classes << "border-l-0 first-of-type:border-l" if @group_context[:variant] == :outline
+      end
+      classes
+    end
+  end
+end

data/lib/ruby_ui/tooltip/tooltip_content.rb

@@ -8,7 +8,9 @@ module RubyUI
     end
 
     def view_template(&)
-      div(**attrs, &)
+      template(data: {ruby_ui__tooltip_target: "content"}) do
+        div(**attrs, &)
+      end
     end
 
     private
@@ -16,10 +18,15 @@ module RubyUI
     def default_attrs
       {
         id: @id,
-        data: {
-          ruby_ui__tooltip_target: "content"
-        },
-        class: "invisible peer-hover:visible peer-focus:visible w-max absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md peer-focus:zoom-in-95 animate-out fade-out-0 zoom-out-95 peer-hover:animate-in peer-focus:animate-in peer-hover:fade-in-0 peer-focus:fade-in-0 peer-hover:zoom-in-95 group-data-[ruby-ui--tooltip-placement-value=bottom]:slide-in-from-top-2 group-data-[ruby-ui--tooltip-placement-value=left]:slide-in-from-right-2 group-data-[ruby-ui--tooltip-placement-value=right]:slide-in-from-left-2 group-data-[ruby-ui--tooltip-placement-value=top]:slide-in-from-bottom-2 delay-500"
+        class: [
+          "invisible pointer-events-none w-fit max-w-[calc(100vw-2rem)] text-balance break-words absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+          "data-[placement=bottom]:slide-in-from-top-2",
+          "data-[placement=left]:slide-in-from-right-2",
+          "data-[placement=right]:slide-in-from-left-2",
+          "data-[placement=top]:slide-in-from-bottom-2",
+          "data-[state=open]:visible data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:visible data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards"
+        ]
       }
     end
   end

data/lib/ruby_ui/tooltip/tooltip_controller.js

@@ -3,36 +3,72 @@ import { computePosition, autoUpdate, offset, shift } from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content"];
-  static values = { placement: String }
 
-  constructor(...args) {
-    super(...args);
-    this.cleanup;
+  static values = { placement: "top" };
+
+  mount() {
+    if (this.mounted) return;
+
+    const element = this.cloneTemplate();
+    element.setAttribute("data-placement", this.placementValue);
+    document.body.appendChild(element);
+
+    this.triggerTarget.setAttribute("aria-describedby", element.id);
+    element.addEventListener("animationend", (event) => this.animationEnd(event));
+
+    const onBeforeCache = () => this.unmount();
+    document.addEventListener("turbo:before-cache", onBeforeCache);
+
+    this.mounted = { element, onBeforeCache };
+    this.mounted.stopAutoUpdate = autoUpdate(this.triggerTarget, element, () => this.reposition());
   }
 
-  connect() {
-    this.setFloatingElement();
+  unmount() {
+    if (!this.mounted) return;
 
-    const tooltipId = this.contentTarget.getAttribute("id");
-    this.triggerTarget.setAttribute("aria-describedby", tooltipId);
+    document.removeEventListener("turbo:before-cache", this.mounted.onBeforeCache);
 
+    this.mounted.stopAutoUpdate?.();
+    this.mounted.element.remove();
+    this.triggerTarget.removeAttribute("aria-describedby");
+
+    this.mounted = null;
   }
 
   disconnect() {
-    this.cleanup();
-  }
-
-  setFloatingElement() {
-    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
-      computePosition(this.triggerTarget, this.contentTarget, {
-        placement: this.placementValue,
-        middleware: [offset(4), shift()]
-      }).then(({ x, y }) => {
-        Object.assign(this.contentTarget.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-      });
+    this.unmount();
+  }
+
+  show() {
+    if (!this.hasContentTarget) return;
+
+    this.mount();
+    this.mounted.element.setAttribute("data-state", "open");
+  }
+
+  hide() {
+    this.mounted?.element.setAttribute("data-state", "closed");
+  }
+
+  animationEnd(event) {
+    if (event.animationName !== "exit") return;
+    if (this.mounted?.element.getAttribute("data-state") !== "closed") return;
+
+    this.unmount();
+  }
+
+  cloneTemplate() {
+    return this.contentTarget.content.firstElementChild.cloneNode(true);
+  }
+
+  reposition() {
+    if (!this.mounted) return;
+
+    const position = { placement: this.placementValue, middleware: [offset(4), shift()] };
+
+    computePosition(this.triggerTarget, this.mounted.element, position).then(({ x, y }) => {
+      this.mounted?.element.style.setProperty("left", `${x}px`);
+      this.mounted?.element.style.setProperty("top", `${y}px`);
     });
   }
 }

data/lib/ruby_ui/tooltip/tooltip_docs.rb

@@ -24,6 +24,19 @@ class Views::Docs::Tooltip < Views::Base
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Long content", context: self) do
+        <<~RUBY
+          Tooltip do
+            TooltipTrigger do
+              Button(variant: :outline) { "Hover me" }
+            end
+            TooltipContent do
+              Text { "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }
+            end
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

data/lib/ruby_ui/tooltip/tooltip_trigger.rb

@@ -10,9 +10,16 @@ module RubyUI
 
     def default_attrs
       {
-        data: {ruby_ui__tooltip_target: "trigger"},
-        variant: :outline,
-        class: "peer"
+        data: {
+          ruby_ui__tooltip_target: "trigger",
+          action: [
+            "mouseenter->ruby-ui--tooltip#show",
+            "mouseleave->ruby-ui--tooltip#hide",
+            "focus->ruby-ui--tooltip#show",
+            "blur->ruby-ui--tooltip#hide"
+          ]
+        },
+        variant: :outline
       }
     end
   end

data/lib/ruby_ui.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "date"
+
 module RubyUI
-  VERSION = "1.1.0"
+  VERSION = "1.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ruby_ui
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.3.0
 platform: ruby
 authors:
 - George Kettle
@@ -13,6 +13,9 @@ dependencies:
   name: phlex
   requirement: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.1.2
@@ -20,6 +23,9 @@ dependencies:
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.1.2
@@ -29,28 +35,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.2.0
+        version: 5.0.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.2.0
+        version: 5.0.0
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.12'
+        version: '1.4'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.12'
+        version: '1.4'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -85,14 +91,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '6.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '6.0'
 description: Ruby UI is a UI Component Library for Ruby developers. Built on top of
   the Phlex Framework.
 email: george.kettle@icloud.com
@@ -138,6 +144,7 @@ files:
 - lib/ruby_ui/aspect_ratio/aspect_ratio.rb
 - lib/ruby_ui/aspect_ratio/aspect_ratio_docs.rb
 - lib/ruby_ui/avatar/avatar.rb
+- lib/ruby_ui/avatar/avatar_controller.js
 - lib/ruby_ui/avatar/avatar_docs.rb
 - lib/ruby_ui/avatar/avatar_fallback.rb
 - lib/ruby_ui/avatar/avatar_image.rb
@@ -200,11 +207,16 @@ files:
 - lib/ruby_ui/collapsible/collapsible_docs.rb
 - lib/ruby_ui/collapsible/collapsible_trigger.rb
 - lib/ruby_ui/combobox/combobox.rb
+- lib/ruby_ui/combobox/combobox_badge.rb
+- lib/ruby_ui/combobox/combobox_badge_trigger.rb
 - lib/ruby_ui/combobox/combobox_checkbox.rb
+- lib/ruby_ui/combobox/combobox_clear_button.rb
 - lib/ruby_ui/combobox/combobox_controller.js
 - lib/ruby_ui/combobox/combobox_docs.rb
 - lib/ruby_ui/combobox/combobox_empty_state.rb
+- lib/ruby_ui/combobox/combobox_input_trigger.rb
 - lib/ruby_ui/combobox/combobox_item.rb
+- lib/ruby_ui/combobox/combobox_item_indicator.rb
 - lib/ruby_ui/combobox/combobox_list.rb
 - lib/ruby_ui/combobox/combobox_list_group.rb
 - lib/ruby_ui/combobox/combobox_popover.rb
@@ -216,6 +228,7 @@ files:
 - lib/ruby_ui/command/command_controller.js
 - lib/ruby_ui/command/command_dialog.rb
 - lib/ruby_ui/command/command_dialog_content.rb
+- lib/ruby_ui/command/command_dialog_controller.js
 - lib/ruby_ui/command/command_dialog_trigger.rb
 - lib/ruby_ui/command/command_docs.rb
 - lib/ruby_ui/command/command_empty.rb
@@ -231,6 +244,29 @@ files:
 - lib/ruby_ui/context_menu/context_menu_label.rb
 - lib/ruby_ui/context_menu/context_menu_separator.rb
 - lib/ruby_ui/context_menu/context_menu_trigger.rb
+- lib/ruby_ui/data_table/data_table.rb
+- lib/ruby_ui/data_table/data_table_bulk_actions.rb
+- lib/ruby_ui/data_table/data_table_column_toggle.rb
+- lib/ruby_ui/data_table/data_table_column_visibility_controller.js
+- lib/ruby_ui/data_table/data_table_controller.js
+- lib/ruby_ui/data_table/data_table_docs.rb
+- lib/ruby_ui/data_table/data_table_expand_toggle.rb
+- lib/ruby_ui/data_table/data_table_form.rb
+- lib/ruby_ui/data_table/data_table_kaminari_adapter.rb
+- lib/ruby_ui/data_table/data_table_manual_adapter.rb
+- lib/ruby_ui/data_table/data_table_pagination.rb
+- lib/ruby_ui/data_table/data_table_pagination_bar.rb
+- lib/ruby_ui/data_table/data_table_pagy_adapter.rb
+- lib/ruby_ui/data_table/data_table_per_page_select.rb
+- lib/ruby_ui/data_table/data_table_row_checkbox.rb
+- lib/ruby_ui/data_table/data_table_search.rb
+- lib/ruby_ui/data_table/data_table_search_controller.js
+- lib/ruby_ui/data_table/data_table_select_all_checkbox.rb
+- lib/ruby_ui/data_table/data_table_selection_summary.rb
+- lib/ruby_ui/data_table/data_table_sort_head.rb
+- lib/ruby_ui/data_table/data_table_toolbar.rb
+- lib/ruby_ui/date_picker/date_picker.rb
+- lib/ruby_ui/date_picker/date_picker_docs.rb
 - lib/ruby_ui/dialog/dialog.rb
 - lib/ruby_ui/dialog/dialog_content.rb
 - lib/ruby_ui/dialog/dialog_controller.js
@@ -274,6 +310,11 @@ files:
 - lib/ruby_ui/masked_input/masked_input.rb
 - lib/ruby_ui/masked_input/masked_input_controller.js
 - lib/ruby_ui/masked_input/masked_input_docs.rb
+- lib/ruby_ui/native_select/native_select.rb
+- lib/ruby_ui/native_select/native_select_docs.rb
+- lib/ruby_ui/native_select/native_select_group.rb
+- lib/ruby_ui/native_select/native_select_icon.rb
+- lib/ruby_ui/native_select/native_select_option.rb
 - lib/ruby_ui/pagination/pagination.rb
 - lib/ruby_ui/pagination/pagination_content.rb
 - lib/ruby_ui/pagination/pagination_docs.rb
@@ -363,11 +404,26 @@ files:
 - lib/ruby_ui/tabs/tabs_trigger.rb
 - lib/ruby_ui/textarea/textarea.rb
 - lib/ruby_ui/textarea/textarea_docs.rb
-- lib/ruby_ui/theme_toggle/set_dark_mode.rb
-- lib/ruby_ui/theme_toggle/set_light_mode.rb
 - lib/ruby_ui/theme_toggle/theme_toggle.rb
 - lib/ruby_ui/theme_toggle/theme_toggle_controller.js
 - lib/ruby_ui/theme_toggle/theme_toggle_docs.rb
+- lib/ruby_ui/toast/toast.rb
+- lib/ruby_ui/toast/toast_action.rb
+- lib/ruby_ui/toast/toast_cancel.rb
+- lib/ruby_ui/toast/toast_close.rb
+- lib/ruby_ui/toast/toast_controller.js
+- lib/ruby_ui/toast/toast_description.rb
+- lib/ruby_ui/toast/toast_docs.rb
+- lib/ruby_ui/toast/toast_icon.rb
+- lib/ruby_ui/toast/toast_item.rb
+- lib/ruby_ui/toast/toast_region.rb
+- lib/ruby_ui/toast/toast_title.rb
+- lib/ruby_ui/toast/toaster_controller.js
+- lib/ruby_ui/toggle/toggle.rb
+- lib/ruby_ui/toggle/toggle_controller.js
+- lib/ruby_ui/toggle_group/toggle_group.rb
+- lib/ruby_ui/toggle_group/toggle_group_controller.js
+- lib/ruby_ui/toggle_group/toggle_group_item.rb
 - lib/ruby_ui/tooltip/tooltip.rb
 - lib/ruby_ui/tooltip/tooltip_content.rb
 - lib/ruby_ui/tooltip/tooltip_controller.js
@@ -397,7 +453,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.10
 specification_version: 4
 summary: RubyUI is a UI Component Library for Ruby developers.
 test_files: []

data/lib/ruby_ui/theme_toggle/set_dark_mode.rb

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module RubyUI
-  class SetDarkMode < Base
-    def view_template(&)
-      div(**attrs, &)
-    end
-
-    def default_attrs
-      {
-        class: "hidden dark:inline-block",
-        data: {controller: "ruby-ui--theme-toggle", action: "click->ruby-ui--theme-toggle#setLightTheme"}
-      }
-    end
-  end
-end

data/lib/ruby_ui/theme_toggle/set_light_mode.rb

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module RubyUI
-  class SetLightMode < Base
-    def view_template(&)
-      div(**attrs, &)
-    end
-
-    def default_attrs
-      {
-        class: "dark:hidden",
-        data: {controller: "ruby-ui--theme-toggle", action: "click->ruby-ui--theme-toggle#setDarkTheme"}
-      }
-    end
-  end
-end