avo 4.0.0.beta.53 → 4.0.0.beta.54

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 552669c50574f942f2c964d3c10b75668dbb8cf2507163a8a37cface6ecc0ad2
-  data.tar.gz: 873ce280034687360210f7c53ae0d82adc7eb33667b154c4621dd49cf378a63f
+  metadata.gz: 594a52eeb31089a89bb1d453f2a0400921b4ea02bb4838ac8f507710404799d9
+  data.tar.gz: 2af844241c1661f13b19d6b7e66faf8c9c6027ff41385c1c4decb2cc3555d692
 SHA512:
-  metadata.gz: 16478d42830c984df2bbaf614656233a50f8c362ca94a2816bb67e9f6effdb809b065dc5bf6fb2aac217bcb9844024b9c8545339acb916cc3ae20e43c38bb865
-  data.tar.gz: dd22172efd7269ad49ba7909d4b5bb4cdb19f0de2b2105e6447d0ece93d047b704124f49dda711ad01e3ebb5477b2b71b6fbf8aa4e15a0d91a127090bef2231d
+  metadata.gz: 52a5240edde338e7dfbc019b3fd232c35f92b400a36914aaf0c8a8a84b6f1134e316668c7ca772f41739455231f16cd152347b900829f4cf97382ab5f8580983
+  data.tar.gz: 780e6a097c479994b88273b1df76e2415eac0bbbeff6a9badfeaa3f6f07c114f30d1d7c3be3f244f1944b0851efc06efb0cd950c5726f6d1766abf458b3c3691

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (4.0.0.beta.53)
+    avo (4.0.0.beta.54)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/app/assets/builds/avo/application.css

@@ -2311,6 +2311,9 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-100\! {
+    background-color: var(--color-gray-100) !important;
+  }
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
@@ -11644,6 +11647,48 @@ tag.tagify__tag {
     border-block-end: 2px solid var(--sidebar-link-active-background);
     border-end-start-radius: 2px;
   }
+  .sidebar-subitem:hover, .sidebar-subitem:has(~ .sidebar-subitem:hover) {
+    position: relative;
+  }
+  .sidebar-subitem:has(~ .sidebar-subitem:hover)::before {
+    content: '';
+    position: absolute;
+    top: calc(var(--spacing) * 0);
+    bottom: calc(var(--spacing) * 0);
+    inset-inline-start: -10px;
+    width: auto;
+    height: auto;
+    border-inline-start: 2px solid var(--sidebar-link-active-background);
+    border-block-end: none;
+    border-end-start-radius: 0;
+  }
+  .sidebar-subitem:hover::before {
+    content: '';
+    position: absolute;
+    top: calc(var(--spacing) * 0);
+    inset-inline-start: -10px;
+    height: 50%;
+    width: 10px;
+    border-inline-start: 2px solid var(--sidebar-link-active-background);
+    border-block-end: 2px solid var(--sidebar-link-active-background);
+    border-end-start-radius: 2px;
+  }
+  .sidebar-subitem:hover:has(~ .sidebar-subitem--bar-active)::before {
+    top: calc(var(--spacing) * 0);
+    bottom: calc(var(--spacing) * 0);
+    height: auto;
+    width: auto;
+    border-block-end: none;
+    border-end-start-radius: 0;
+  }
+  .sidebar-subitem:hover:has(~ .sidebar-subitem--bar-active)::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - 1px);
+    inset-inline-start: -10px;
+    width: 10px;
+    border-block-end: 2px solid var(--sidebar-link-active-background);
+  }
   .sidebar-profile {
     display: flex;
     align-items: center;

data/app/assets/stylesheets/css/sidebar.css

@@ -235,6 +235,60 @@
   border-end-start-radius: 2px;
 }
 
+/* Hover preview: redraw the full connector path down to the hovered subitem,
+   mirroring the active styling. Every item above it gets a vertical line; the
+   hovered item gets the L-shape, or a T-shape when the active item sits below
+   it (so the line continues past it). The preview is faint (0.6) only when it
+   extends below the active item — at or above the active item it stays solid. */
+.sidebar-subitem:hover,
+.sidebar-subitem:has(~ .sidebar-subitem:hover) {
+  @apply relative;
+}
+
+/* Vertical line for every item above the hovered one */
+.sidebar-subitem:has(~ .sidebar-subitem:hover)::before {
+  content: '';
+  @apply absolute top-0 bottom-0;
+  inset-inline-start: -10px;
+  width: auto;
+  height: auto;
+  border-inline-start: 2px solid var(--sidebar-link-active-background);
+  border-block-end: none;
+  border-end-start-radius: 0;
+}
+
+/* L-shape: endpoint at the hovered item */
+.sidebar-subitem:hover::before {
+  content: '';
+  @apply absolute top-0;
+  inset-inline-start: -10px;
+  height: 50%;
+  width: 10px;
+  border-inline-start: 2px solid var(--sidebar-link-active-background);
+  border-block-end: 2px solid var(--sidebar-link-active-background);
+  border-end-start-radius: 2px;
+}
+
+/* T-shape: when the active item is below the hovered one, the line must
+   continue down past it — full vertical line (top + bottom) with a branch to
+   the right (three endings) instead of the L-shape endpoint. */
+.sidebar-subitem:hover:has(~ .sidebar-subitem--bar-active)::before {
+  @apply top-0 bottom-0;
+  height: auto;
+  width: auto;
+  border-block-end: none;
+  border-end-start-radius: 0;
+}
+
+.sidebar-subitem:hover:has(~ .sidebar-subitem--bar-active)::after {
+  content: '';
+  @apply absolute;
+  top: calc(50% - 1px);
+  inset-inline-start: -10px;
+  width: 10px;
+  border-block-end: 2px solid var(--sidebar-link-active-background);
+}
+
 /* ================================================ */
 /* Sidebar Profile — SidebarProfileComponent        */
 /* BEM: .sidebar-profile (block)                    */

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

@@ -1,6 +1,6 @@
 <% if @path.present? %>
-  <%= link_caller.send link_method, @path, class: "sidebar-link", active: @active, target: @target, data: link_data, disabled: @disabled, "aria-disabled": @disabled, **@args do %>
-    <% if @reserve_icon_space || link_icon.present? %>
+  <%= link_caller.send link_method, @path, class: root_css_class, active: @active, target: @target, data: link_data, disabled: @disabled, "aria-disabled": @disabled, **@args do %>
+    <% if show_icon? %>
       <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>
@@ -15,8 +15,8 @@
     <% end %>
   <% end %>
 <% else %>
-  <%= content_tag :div, class: "sidebar-link", active: @active, target: @target, data: @data do %>
-    <% if @reserve_icon_space || link_icon.present? %>
+  <%= content_tag :div, class: root_css_class, active: @active, target: @target, data: @data do %>
+    <% if show_icon? %>
       <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>
@@ -25,21 +25,3 @@
     <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: subitem_data(item), disabled: @disabled, "aria-disabled": @disabled, **item.args do %>
-          <span><%= item.try(:label).presence || item.try(:name).presence %></span>
-
-          <%= hotkey_badge(item.hotkey, class: "ms-auto") if item.try(:hotkey).present? %>
-        <% end %>
-      <% else %>
-        <%= content_tag :div, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: subitem_data(item) do %>
-          <span><%= item.try(:label).presence || item.try(:name).presence %></span>
-        <% end %>
-      <% end %>
-    <% end %>
-  </div>
-<% end %>

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

@@ -2,11 +2,14 @@
 
 require "view_component/version"
 
+# A single sidebar link (leaf). `variant: :default` or `:subitem`. Knows nothing
+# about menus; callers pass the path, label and resolved `active` (a match mode
+# like :inclusive, or a boolean to force it).
 class Avo::Sidebar::LinkComponent < Avo::BaseComponent
   prop :label
   prop :path
   prop :active, default: :inclusive do |value|
-    value&.to_sym
+    value.is_a?(String) ? value.to_sym : value
   end
   prop :target do |value|
     value&.to_sym
@@ -15,15 +18,31 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
   prop :icon
   prop :reserve_icon_space, default: false
   prop :args, kind: :**, default: {}.freeze
-  prop :items
   prop :hotkey, default: nil
+  prop :variant, default: :default
+  prop :bar_class, default: ""
 
-  def link_data
-    build_link_data(@data, @hotkey)
+  def subitem?
+    @variant == :subitem
   end
 
-  def subitem_data(item)
-    build_link_data(item.data, item.hotkey)
+  def root_css_class
+    return "sidebar-link" unless subitem?
+
+    ["sidebar-subitem", @bar_class].reject(&:blank?).join(" ")
+  end
+
+  # Sub-items don't show icons (for now); top-level links do.
+  def show_icon?
+    return false if subitem?
+
+    @reserve_icon_space || link_icon.present?
+  end
+
+  def link_data
+    return @data if @hotkey.blank?
+
+    @data.merge(hotkey: @hotkey)
   end
 
   def is_external?
@@ -54,41 +73,7 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
     end
   end
 
-  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
-
-  private
-
-  def build_link_data(data, hotkey)
-    return data if hotkey.blank?
-
-    data.merge(hotkey: hotkey)
-  end
 end

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.0.beta.53" unless const_defined?(:VERSION)
+  VERSION = "4.0.0.beta.54" unless const_defined?(:VERSION)
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.0.beta.53
+  version: 4.0.0.beta.54
 platform: ruby
 authors:
 - Adrian Marin
@@ -1168,11 +1168,6 @@ files:
 - lib/generators/model_generator.rb
 - lib/generators/rails/avo_resource_generator.rb
 - lib/tasks/avo_tasks.rake
-- public/avo-assets/avo.base.css
-- public/avo-assets/avo.base.js
-- public/avo-assets/avo.base.js.map
-- public/avo-assets/late-registration.js
-- public/avo-assets/late-registration.js.map
 - tailwind.custom.js
 homepage: https://avohq.io
 licenses:
@@ -1199,7 +1194,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.9
+rubygems_version: 4.0.6
 specification_version: 4
 summary: Admin panel framework and Content Management System for Ruby on Rails.
 test_files: []