avo 3.30.4 → 4.0.0.beta.1

data/app/components/avo/paginator_component.html.erb

@@ -1,38 +1,51 @@
-<div class="flex flex-col sm:flex-row items-center justify-between aborder-t aborder-slate-200 rounded-2xl space-y-2 sm:space-y-0">
-  <div class="flex-2 sm:flex sm:items-center sm:justify-between">
-    <div>
-      <div class="text-sm leading-5 text-slate-600 flex items-center">
-        <div data-controller="per-page">
-          <div class="flex items-center">
-            <%= content_tag :label, name: t('avo.per_page').downcase do %>
-              <%= select_tag 'per_page',
-                options_for_select(per_page_options, @index_params[:per_page]),
-                class: 'appearance-none inline-flex bg-white-100 disabled:bg-white-400 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-600 rounded-md py-1 px-2 leading-tight border border-slate-300 outline-none focus:border-slate-400 outline w-16 mr-1 text-sm',
-                data: {
-                  'turbo-frame': @turbo_frame,
-                  'per-page-target': 'selector',
-                  action: 'change->per-page#reload'
-                }
-              %> <%= t('avo.per_page').downcase %>
-            <% end %>
-          </div>
-          <% per_page_options.each do |option| %>
-            <%= link_to "Change to #{option} items per page", change_items_per_page_url(option), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': @turbo_frame %>
+<div class="pagination">
+  <%# Left: per-page selector %>
+  <div class="pagination__per-page">
+    <%= render ui.dropdown(classes: "start-0 end-auto") do |component| %>
+      <% component.with_trigger do %>
+        <button
+          type="button"
+          class="pagination__per-page-input"
+          data-action="<%= component.action %>"
+          aria-haspopup="listbox"
+          aria-expanded="false"
+        >
+          <span class="pagination__per-page-value"><%== current_per_page_label %></span>
+          <span class="pagination__per-page-icon" aria-hidden="true">
+            <%= helpers.svg "tabler/outline/chevron-down" %>
+          </span>
+        </button>
+      <% end %>
+      <% component.with_items do %>
+        <% per_page_options.each do |option| %>
+          <%= link_to change_items_per_page_url(option),
+            class: "dropdown-menu__item",
+            data: { turbo_frame: @turbo_frame } do %>
+            <%== per_page_option_label(option) %>
           <% end %>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="flex">
-    <div class="flex-2 sm:flex sm:items-center sm:justify-between space-y-2 sm:space-y-0 text-center sm:text-left pagy-gem-version-<%= helpers.pagy_major_version %>">
-      <% if @resource.pagination_type.default? %>
-        <div class="text-sm text-slate-600 mr-4"><%== helpers.pagy_info @pagy %></div>
+        <% end %>
       <% end %>
+    <% end %>
+  </div>
 
-      <% if @pagy.pages > 1 %>
-        <%# @todo: add first & last page. make the first and last buttons rounded %>
-        <%== helpers.pagy_nav @pagy, anchor_string: "data-turbo-frame=\"#{@turbo_frame}\"" %>
-      <% end %>
-    </div>
+  <%# Right: info + navigation grouped pill %>
+  <div class="pagination__controls">
+    <% if @resource.pagination_type.default? %>
+      <div class="pagination__info">
+        <span class="pagination__info-number">
+          <%= "#{@pagy.from}-#{@pagy.to}" %>
+        </span>
+        &nbsp; of &nbsp;
+        <span>
+          <%= "#{@pagy.count}" %>
+        </span>
+      </div>
+    <% end %>
+
+    <% if @pagy.pages > 1 %>
+      <div class="pagination__nav">
+        <%== @pagy.series_nav(anchor_string: "data-turbo-frame=\"#{@turbo_frame}\"") %>
+      </div>
+    <% end %>
   </div>
 </div>

data/app/components/avo/paginator_component.rb

@@ -29,11 +29,7 @@ class Avo::PaginatorComponent < Avo::BaseComponent
   def render?
     return false if @discreet_pagination && @pagy.pages <= 1
 
-    if ::Pagy::VERSION >= ::Gem::Version.new("9.0")
-      @pagy.limit > 0
-    else
-      @pagy.items > 0
-    end
+    @pagy.limit > 0
   end
 
   def per_page_options
@@ -47,4 +43,13 @@ class Avo::PaginatorComponent < Avo::BaseComponent
       options.sort.uniq
     end
   end
+
+  def current_per_page_label
+    per_page_option_label(@index_params[:per_page])
+  end
+
+  def per_page_option_label(option)
+    num = helpers.content_tag(:span, option, class: "pagination__per-page-option-num")
+    "#{num} #{t("avo.per_page").downcase}".html_safe
+  end
 end

data/app/components/avo/panel_name_component.html.erb

@@ -1,4 +1,4 @@
-<div class="text-2xl tracking-normal font-semibold text-gray-800 items-center flex flex-1 text-center sm:text-left justify-center sm:justify-start" data-target="title">
+<div class="text-2xl tracking-normal font-semibold text-gray-800 items-center flex flex-1 text-center sm:text-start justify-center sm:justify-start" data-target="title">
   <span class="block"><%= link_to_if @url.present?, @name, @url, target: @target, class: class_names("text-gray-800", @classes) %></span>
   <%= body %>
 </div>

data/app/components/avo/profile_item_component.html.erb

@@ -1,19 +1,19 @@
 <% if method.present? %>
   <%= button_to path,
     form_class: "flex-1 flex",
-    class: button_classes,
+    class: menu_item_classes,
     target: target,
     title: title,
     method: method,
     disabled: disabled,
     params: params do %>
-    <%= helpers.svg(icon, class: 'h-4 mr-1') if icon.present? %> <%= label %>
+    <%= helpers.svg(icon, class: 'sidebar-icon') if icon.present? %> <%= label %>
   <% end %>
 <% else %>
   <%= link_to path,
-    class: button_classes,
+    class: menu_item_classes,
     target: target,
     title: title do %>
-    <%= helpers.svg(icon, class: 'h-4 mr-1') if icon.present? %> <%= label %>
+    <%= helpers.svg(icon, class: 'sidebar-icon') if icon.present? %> <%= label %>
   <% end %>
 <% end %>

data/app/components/avo/profile_item_component.rb

@@ -20,9 +20,7 @@ class Avo::ProfileItemComponent < Avo::BaseComponent
     @title || @label
   end
 
-  private
-
-  def button_classes
-    "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-gray-800 font-semibold hover:bg-primary-100 block px-4 py-1 w-full py-3 text-center rounded w-full"
+  def menu_item_classes
+    "sidebar-profile__menu-item #{classes}".strip
   end
 end

data/app/components/avo/referrer_params_component.html.erb

@@ -4,5 +4,5 @@
 <%= hidden_field_tag :via_record_id, params[:via_record_id] if params[:via_record_id] %>
 <%= hidden_field_tag :via_relation, params[:via_relation] if params[:via_relation] %>
 <%= hidden_field_tag :via_belongs_to_resource_class, params[:via_belongs_to_resource_class] if params[:via_belongs_to_resource_class] %>
-<%= hidden_field_tag :return_to, e(params[:return_to]) if params[:return_to].present? %>
+<%= hidden_field_tag :return_to, params[:return_to] if params[:return_to].present? %>
 <%= hidden_field_tag :referrer, @back_path if params[:via_resource_class] %>

data/app/components/avo/resource_component.rb

@@ -75,15 +75,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     helpers.resource_path(**args)
   end
 
-  def main_panel
-    @main_panel ||= @resource.get_items.find do |item|
-      item.is_main_panel?
-    end
-  end
-
   def sidebars
-    return [] if Avo.license.lacks_with_trial(:resource_sidebar)
-
     @sidebars ||= @item.items
       .select do |item|
         item.is_sidebar?
@@ -161,8 +153,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     a_link destroy_path,
       style: :text,
       color: :red,
-      icon: "avo/trash",
-      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+      icon: "tabler/outline/trash",
       title: control.title,
       aria_label: control.title,
       data: {
@@ -186,7 +177,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
 
     add_stimulus_attributes_for(@resource, data_attributes, "saveButton")
 
-    a_button color: :primary,
+    a_button color: :accent,
       style: :primary,
       loading: true,
       type: :submit,
@@ -200,11 +191,11 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless can_see_the_edit_button?
 
     a_link edit_path,
-      color: :primary,
+      color: :accent,
       style: :primary,
       title: control.title,
       data: {tippy: control.title ? :tooltip : nil},
-      icon: "avo/edit" do
+      icon: "tabler/outline/edit" do
       control.label
     end
   end
@@ -213,8 +204,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless is_a_related_resource? && can_detach?
 
     a_link detach_path,
-      icon: "avo/detach",
-      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+      icon: "tabler/outline/unlink",
       style: :text,
       data: {
         turbo_method: :delete,
@@ -228,9 +218,9 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless can_see_the_create_button?
 
     a_link create_path,
-      color: :primary,
+      color: :accent,
       style: :primary,
-      icon: "heroicons/outline/plus",
+      icon: "tabler/outline/plus",
       data: {
         target: :create
       } do
@@ -242,8 +232,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless can_attach?
 
     a_link attach_path,
-      icon: "heroicons/outline/link",
-      color: :primary,
+      icon: "tabler/outline/link",
       style: :text,
       data: {
         turbo_frame: Avo::MODAL_FRAME_ID,

data/app/components/avo/resource_listing_component.html.erb

@@ -0,0 +1,22 @@
+<%= content_tag :div, id: "#{@resource.model_key}_body_content" do %>
+  <%= render Avo::SearchOverlayComponent.new %>
+
+  <% if @resources.present? %>
+    <div class="relative mt-0 flex w-full flex-1">
+      <%= render(@resource.resolve_component(specific_view_component).new(
+        resources: @resources,
+        resource: @resource,
+        reflection: @reflection,
+        parent_record: @parent_record,
+        parent_resource: @parent_resource,
+        pagy: @pagy,
+        query: @query,
+        actions: @actions,
+        turbo_frame: @turbo_frame,
+        index_params: @index_params
+      )) %>
+    </div>
+  <% else %>
+    <%= helpers.empty_state by_association: params[:related_name].present? %>
+  <% end %>
+<% end %>

data/app/components/avo/resource_listing_component.rb

@@ -0,0 +1,28 @@
+class Avo::ResourceListingComponent < Avo::BaseComponent
+  prop :resources
+  prop :resource
+  prop :reflection
+  prop :parent_record
+  prop :parent_resource
+  prop :pagy
+  prop :query
+  prop :actions
+  prop :turbo_frame
+  prop :index_params
+
+  def specific_view_component
+    Avo.view_type_manager.component_for(@resource.view_type)
+  end
+
+  def paginator_component
+    Avo::PaginatorComponent.new(
+      pagy: @pagy,
+      turbo_frame: @turbo_frame,
+      index_params: @index_params,
+      resource: @resource,
+      parent_record: @parent_record,
+      parent_resource: @parent_resource,
+      discreet_pagination: field&.discreet_pagination
+    )
+  end
+end

data/app/components/avo/resource_sidebar_component.html.erb

@@ -1,4 +1,4 @@
-<div class="resource-sidebar-component divide-y"
+<div class="resource-sidebar-component space-y-4"
   data-component-name="<%= self.class.to_s.underscore %>"
   data-component-index="<%= @index %>"
   data-resource-name="<%= @resource.class.to_s %>"
@@ -12,5 +12,5 @@
     field_component_extra_args: {
       stacked: true
     }
-  )%>
+  ) %>
 </div>

data/app/components/avo/resource_sidebar_component.rb

@@ -7,8 +7,4 @@ class Avo::ResourceSidebarComponent < Avo::BaseComponent
   prop :params
   prop :form
   prop :view, reader: :public
-
-  def render?
-    Avo.license.has_with_trial(:resource_sidebar)
-  end
 end

data/app/components/avo/row_component.html.erb

@@ -6,7 +6,7 @@
     }
   ),
   data: {
-    component: self.class.to_s
+    component_name:
   } do %>
   <%= body %>
 <% end %>

data/app/components/avo/row_selector_component.html.erb

@@ -6,10 +6,8 @@
     title: t("avo.select_item"),
     autocomplete: :off,
     checked: @checked,
-    class: class_names("mx-3 rounded checked:bg-primary-400 focus:checked:!bg-primary-400", {
-      "absolute inset-auto left-0 mt-3 z-10 hidden group-hover:block checked:block": @floating,
-      "w-5 h-5": @size.to_sym == :lg,
-      "w-4 h-4": @size.to_sym != :lg,
+    class: class_names("mx-2", {
+      "absolute block start-0 top-0 mt-3 z-10 hidden": @floating,
     }),
     data: {
       index: @index,

data/app/components/avo/row_selector_component.rb

@@ -2,7 +2,6 @@
 
 class Avo::RowSelectorComponent < Avo::BaseComponent
   prop :floating, default: false
-  prop :size, default: :md
   prop :index
   prop :checked, default: false
 

data/app/components/avo/search_overlay_component.html.erb

@@ -0,0 +1,6 @@
+<div class="avo-search-overlay" data-resource-search-target="overlay">
+  <div class="button-spinner">
+    <div class="double-bounce1"></div>
+    <div class="double-bounce2"></div>
+  </div>
+</div>

data/app/components/avo/search_overlay_component.rb

@@ -0,0 +1,2 @@
+class Avo::SearchOverlayComponent < Avo::BaseComponent
+end

data/app/components/avo/sidebar/base_item_component.rb

@@ -24,14 +24,14 @@ class Avo::Sidebar::BaseItemComponent < Avo::BaseComponent
     result
   end
 
-  def section_collapse_data_animation
-    {
-      transition_enter: "transition ease-out duration-100",
-      transition_enter_start: "transform opacity-0 -translate-y-4",
-      transition_enter_end: "transform opacity-100 translate-y-0",
-      transition_leave: "transition ease-in duration-75",
-      transition_leave_start: "transform opacity-100 translate-y-0",
-      transition_leave_end: "transform opacity-0 -translate-y-4",
-    }
+  def data
+    result = {}
+    if collapsable
+      result[:controller] = "menu"
+      result[:menu_target] = "self"
+      result[:menu_key_param] = key
+      result[:menu_default_collapsed_state] = collapsed ? "collapsed" : "expanded"
+    end
+    result
   end
 end

data/app/components/avo/sidebar/group_component.html.erb

@@ -1,43 +1,39 @@
-<div class="pb-2 space-y-1"
-  <% if collapsable %>
-    data-controller="menu"
-    data-menu-target="self"
-    data-menu-key-param="<%= key %>"
-    data-menu-default-collapsed-state="<%= collapsed ? 'collapsed' : 'expanded' %>"
-  <% end %>
->
+<%= tag.div class: "sidebar-group", data: data do %>
   <% if item.name.present? %>
     <% if collapsable %>
-      <div
-        class="flex justify-between cursor-pointer px-10 pr-2 pt-2 pb-0 text-gray-400"
+      <button
+        type="button"
+        class="sidebar-group__header justify-between"
         data-action="click->menu#triggerCollapse"
-        data-menu-key-param="<%= key %>"
+        data-menu-target="trigger"
+        aria-expanded="<%= !collapsed %>"
       >
-        <div class="flex items-center text-xs uppercase font-semibold leading-none">
-          <%= item.name %>
+        <div class="sidebar-group__header-inner">
+          <span><%= item.name %></span>
         </div>
-        <div class="<%= 'rotate-90' if collapsed %>"
+        <span class="sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
           data-menu-target="svg"
-          >
-          <%= helpers.svg 'heroicons/outline/chevron-down', class: "h-4 mr-0.5"%>
-        </div>
-      </div>
+        >
+          <%= helpers.svg 'heroicons/outline/chevron-down', class: 'h-4' %>
+        </span>
+      </button>
     <% else %>
-      <div class="flex justify-between px-10 pr-2 pt-2 pb-0 text-gray-400">
-        <div class="flex items-center text-xs uppercase font-semibold leading-none">
-          <%= item.name %>
-        </div>
-      </div>
+       <div class="sidebar-group__header">
+          <div class="sidebar-group__header-inner">
+            <span><%= item.name %></span>
+          </div>
+       </div>
     <% end %>
   <% end %>
 
-  <%= content_tag :div, class: class_names("w-full space-y-1", {"hidden": collapsed}),
+  <%= content_tag :div,
+    hidden: collapsed,
+    class: "sidebar-group__items",
     data: {
       menu_target: :items,
-      **section_collapse_data_animation
     } do %>
     <% @items.each do |item| %>
-      <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
+      <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item, group_has_icons: group_has_any_icon? %>
     <% end %>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/sidebar/group_component.rb

@@ -1,4 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::Sidebar::GroupComponent < Avo::Sidebar::BaseItemComponent
+  # True if any visible item in the group has an icon (so all items should reserve icon space for alignment).
+  def group_has_any_icon?
+    @items.any? { |child| child.try(:icon).present? }
+  end
 end

data/app/components/avo/sidebar/link_component.html.erb

@@ -1,14 +1,37 @@
 <% if @path.present? %>
-  <%= link_caller.send link_method, @path, class: classes, active: @active, target: @target, data: @data, **@args do %>
-    <%= helpers.svg @icon, class: "h-4 text-gray-700" if @icon.present? %>
-    <%= @label %>
+  <%= link_caller.send link_method, @path, class: "sidebar-link", active: @active, target: @target, data: @data, disabled: @disabled, "aria-disabled": @disabled, **@args do %>
+    <% if @reserve_icon_space || link_icon.present? %>
+      <span class="sidebar-link__icon-wrapper sidebar-icon<%= ' sidebar-link__icon-wrapper--placeholder' if link_icon.blank? %>">
+        <%= helpers.svg link_icon, class: "sidebar-link__icon sidebar-icon" if link_icon.present? %>
+      </span>
+    <% end %>
+    <span><%= @label %></span>
     <% if @target == :_blank %>
-      <%= helpers.svg('heroicons/outline/external-link', class: 'self-center ml-auto h-3 mr-2') %>
+      <%= helpers.svg("tabler/outline/external-link", class: "sidebar-link__external-icon sidebar-icon") %>
     <% end %>
   <% end %>
 <% else %>
-  <%= content_tag :div, class: classes, active: @active, target: @target, data: @data do %>
-    <%= helpers.svg @icon, class: "h-4 text-gray-700" if @icon.present? %>
-    <%= @label %>
+  <%= content_tag :div, class: "sidebar-link", active: @active, target: @target, data: @data do %>
+    <% if @reserve_icon_space || link_icon.present? %>
+      <span class="sidebar-link__icon-wrapper sidebar-icon<%= ' sidebar-link__icon-wrapper--placeholder' if link_icon.blank? %>">
+        <%= helpers.svg link_icon, class: "sidebar-link__icon sidebar-icon" if link_icon.present? %>
+      </span>
+    <% end %>
+    <span><%= @label %></span>
   <% end %>
 <% end %>
+<% if @items.present? && parent_link_active? %>
+  <div class="sidebar-subitem__items">
+    <% @items.each_with_index do |item, index| %>
+      <% if item.path.present? %>
+        <%= link_caller.send link_method, item.path, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: item.data, disabled: @disabled, "aria-disabled": @disabled, **item.args do %>
+          <span><%= item.try(:label).presence || item.try(:name).presence %></span>
+        <% end %>
+      <% else %>
+        <%= content_tag :div, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: item.data do %>
+          <span><%= item.try(:label).presence || item.try(:name).presence %></span>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/sidebar/link_component.rb

@@ -13,7 +13,9 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
   end
   prop :data, default: {}.freeze
   prop :icon
+  prop :reserve_icon_space, default: false
   prop :args, kind: :**, default: {}.freeze
+  prop :items
 
   def is_external?
     # If the path contains the scheme, check if it includes the root path or not
@@ -36,7 +38,33 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
     end
   end
 
-  def classes
-    "px-4 pr-0 flex-1 flex mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-100 gap-1"
+  def parent_link_active?
+    return false if @path.blank?
+    helpers.is_active_link?(@path, @active)
+  end
+
+  def link_icon
+    @icon
+  end
+
+  def active_item_index
+    return @active_item_index if defined?(@active_item_index)
+
+    @active_item_index = @items&.index do |item|
+      item.path.present? && helpers.is_active_link?(item.path, @active)
+    end
+  end
+
+  def subitem_bar_class(index)
+    active_idx = active_item_index
+    return "" if active_idx.nil?
+
+    if index == active_idx
+      "sidebar-subitem--bar-active"
+    elsif index < active_idx
+      "sidebar-subitem--bar-pass"
+    else
+      ""
+    end
   end
 end

data/app/components/avo/sidebar/section_component.html.erb

@@ -1,19 +1,39 @@
-<div class="space-y-1 mb-4"
-  <% if collapsable %>
-    data-controller="menu"
-    data-menu-target="self"
-    data-menu-key-param="<%= key %>"
-    data-menu-default-collapsed-state="<%= collapsed ? 'collapsed' : 'expanded' %>"
+<%= tag.div class: "sidebar-section", data: data do %>
+  <% if item.name.present? %>
+    <% if collapsable %>
+      <button
+        type="button"
+        class="sidebar-section__header justify-between"
+        data-action="click->menu#triggerCollapse"
+        data-menu-target="trigger"
+        aria-expanded="<%= !collapsed %>"
+      >
+        <div class="sidebar-section__header-inner">
+          <%= helpers.svg icon, class: "sidebar-section__icon sidebar-icon" if icon.present? %>
+          <span><%= item.name %></span>
+        </div>
+        <span class="sidebar-section__icon sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
+          data-menu-target="svg"
+        >
+          <%= helpers.svg 'heroicons/outline/chevron-down' %>
+        </span>
+      </button>
+    <% else %>
+      <div class="sidebar-section__header">
+        <%= helpers.svg icon, class: "sidebar-section__icon sidebar-icon" if icon.present? %>
+        <span><%= item.name %></span>
+      </div>
+    <% end %>
   <% end %>
->
-  <%= render Avo::Sidebar::HeadingComponent.new label: item.name, icon: helpers.svg(icon, class: "h-5"), collapsable: item.collapsable, collapsed: collapsed, key: key %>
-  <%= content_tag :div, class: class_names("w-full space-y-1", {"hidden": collapsed}),
+
+  <%= content_tag :div,
+    hidden: collapsed,
+    class: "sidebar-section__items",
     data: {
       menu_target: :items,
-      **section_collapse_data_animation
     } do %>
     <% @items.each do |item| %>
       <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
     <% end %>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/sidebar/section_component.rb

@@ -2,8 +2,6 @@
 
 class Avo::Sidebar::SectionComponent < Avo::Sidebar::BaseItemComponent
   def icon
-    return nil if item.icon.nil?
-
-    item.icon
+    item.icon if item.icon.present?
   end
 end