avo 4.0.25 → 4.1.0

data/app/assets/stylesheets/css/components/modal.css

@@ -170,7 +170,7 @@
 }
 
 .modal__body-content {
-  @apply w-full min-h-48 rounded-card-wrapper border border-tertiary bg-primary;
+  @apply w-full min-h-48 rounded-card-wrapper border border-tertiary bg-primary p-4;
 }
 
 /* Belongs-to "Create new" embeds an edit form in the modal. Drop the nested
@@ -233,6 +233,12 @@
   }
 }
 
+.modal--width-5xl {
+  .modal__card {
+    @apply w-5xl;
+  }
+}
+
 .modal--width-25 {
   .modal__card {
     @apply w-[25dvw];

data/app/assets/stylesheets/css/components/ui/tabs.css

@@ -184,6 +184,16 @@
     }
   }
 
+  /* The breakout above assumes the container has padding to give up. The
+     belongs-to "Create new" modal has exactly as much as the breakout consumes,
+     so the dashed border ends up flush against the modal edge while the sibling
+     panels stay inset. Keep the group in flow there and let its own padding
+     hold the content off the border. AVO-1365. */
+  .modal-form-body .tab-group {
+    width: 100%;
+    margin-inline: 0;
+  }
+
   /* ============================================
      ACTIVE INDICATOR VIEW TRANSITION
      ============================================ */

data/app/components/avo/actions_component.rb

@@ -78,10 +78,18 @@ class Avo::ActionsComponent < Avo::BaseComponent
     when defined?(Avo::CustomControls::Resources::Controls::Action) && Avo::CustomControls::Resources::Controls::Action
       render_action_link(action.action, icon: action.icon)
     when defined?(Avo::CustomControls::Resources::Controls::LinkTo) && Avo::CustomControls::Resources::Controls::LinkTo
-      link_to action.args[:path],
-        class: action.args.delete(:class),
-        **action.args.except(:path, :label, :icon) do
-          raw("#{icon(action.args[:icon])} #{action.args[:label]}")
+      # Dropdown items render as plain links, not ButtonComponents, so the styling
+      # options have nothing to land in — spreading the raw kwargs leaked them into
+      # the markup (color: :fuchsia rendered as color="fuchsia"). Excluding
+      # CONTROL_OPTIONS drops those and the internal plumbing while still forwarding
+      # genuine HTML attributes like rel:.
+      link_to action.path,
+        **action.args.except(*Avo::Resources::Controls::BaseControl::CONTROL_OPTIONS),
+        class: action.classes,
+        title: action.title,
+        target: action.target,
+        data: action.data do
+          raw("#{icon(action.icon)} #{action.label}")
         end
     end
   end

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

@@ -16,7 +16,6 @@
     role="dialog"
     aria-modal="true"
     class="modal__card-container"
-    data-modal-size-target="container"
   >
     <div class="modal__card" data-<%= ctrl %>-target="card">
       <div class="card">

data/app/components/avo/modal_component.rb

@@ -4,7 +4,7 @@ class Avo::ModalComponent < Avo::BaseComponent
   renders_one :heading
   renders_one :controls
 
-  prop :width, default: :xl # :sm, :md, :lg, :xl, :2xl, :3xl, :4xl, :full
+  prop :width, default: :xl # :sm, :md, :lg, :xl, :2xl, :3xl, :4xl, :5xl, :full
   prop :height, default: :auto # :auto, :sm, :md, :lg, :xl, :2xl, :3xl, :4xl, :full
   prop :body_class
   prop :close_modal_on_backdrop_click, default: true, reader: :public

data/app/components/avo/resource_component.rb

@@ -305,7 +305,10 @@ class Avo::ResourceComponent < Avo::BaseComponent
   end
 
   def render_link_to(link)
+    # Anything outside CONTROL_OPTIONS is a plain HTML attribute (rel:, id:…) and
+    # rides ButtonComponent's `prop :args, kind: :**` wildcard onto the <a> tag.
     a_link link.path,
+      **link.args.except(*Avo::Resources::Controls::BaseControl::CONTROL_OPTIONS),
       color: link.color,
       style: link.style,
       icon: link.icon,

data/app/components/avo/row_selector_component.rb

@@ -5,12 +5,12 @@ class Avo::RowSelectorComponent < Avo::BaseComponent
   prop :index
   prop :checked, default: false
 
+  # Shift-select is wired on table rows only: grid items render this component without an index and
+  # have no table row for the controller to walk up to.
   def data_action
     data = "input->item-selector#toggle input->item-select-all#selectRow"
 
-    if Avo.plugin_manager.installed?("avo-pro")
-      data += " click->record-selector#toggleMultiple"
-    end
+    data += " click->record-selector#toggleMultiple" if @index.present?
 
     data
   end

data/app/controllers/avo/actions_controller.rb

@@ -1,7 +1,5 @@
-require_dependency "avo/application_controller"
-
 module Avo
-  class ActionsController < ApplicationController
+  class ActionsController < Avo::ApplicationController
     before_action :set_resource_name, :set_resource
     before_action :set_query, :set_record, :set_action, :verify_authorization, only: [:show, :handle]
     before_action :set_fields, only: :handle

data/app/controllers/avo/appearance_settings_controller.rb

@@ -1,5 +1,5 @@
 module Avo
-  class AppearanceSettingsController < ApplicationController
+  class AppearanceSettingsController < Avo::ApplicationController
     def update
       appearance = Avo.configuration.appearance
 

data/app/controllers/avo/array_controller.rb

@@ -1,5 +1,5 @@
 module Avo
-  class ArrayController < BaseController
+  class ArrayController < Avo::BaseController
     def set_query
       @query ||= @resource.fetch_records
     end

data/app/controllers/avo/associations_controller.rb

@@ -1,7 +1,5 @@
-require_dependency "avo/base_controller"
-
 module Avo
-  class AssociationsController < BaseController
+  class AssociationsController < Avo::BaseController
     before_action :set_record, only: [:show, :index, :new, :create, :destroy]
     before_action :set_related_resource_name
     before_action :set_related_resource, only: [:show, :index, :new, :create, :destroy]

data/app/controllers/avo/attachments_controller.rb

@@ -1,7 +1,5 @@
-require_dependency "avo/application_controller"
-
 module Avo
-  class AttachmentsController < ApplicationController
+  class AttachmentsController < Avo::ApplicationController
     before_action :set_resource_name, only: [:destroy, :create]
     before_action :set_resource, only: [:destroy, :create]
     before_action :set_record, only: [:destroy, :create]

data/app/controllers/avo/base_controller.rb

@@ -1,7 +1,5 @@
-require_dependency "avo/application_controller"
-
 module Avo
-  class BaseController < ApplicationController
+  class BaseController < Avo::ApplicationController
     include Avo::Concerns::FiltersSessionHandler
     include Avo::Concerns::AssociationQueryScope
     include Avo::Concerns::SafeCall

data/app/controllers/avo/charts_controller.rb

@@ -1,7 +1,5 @@
-require_dependency "avo/base_controller"
-
 module Avo
-  class ChartsController < BaseController
+  class ChartsController < Avo::BaseController
     # Summarizable charts reuse the index query pipeline (including policy scope via
     # `query_scope`). They were never meant to require `distribution_chart?` /
     # `distribution_chart_full?` policy methods — those only surfaced once

data/app/controllers/avo/debug_controller.rb

@@ -1,7 +1,5 @@
-require_dependency "avo/application_controller"
-
 module Avo
-  class DebugController < ApplicationController
+  class DebugController < Avo::ApplicationController
     before_action :authenticate_developer_or_admin!
 
     def status

data/app/controllers/avo/home_controller.rb

@@ -1,7 +1,5 @@
-require_dependency "avo/application_controller"
-
 module Avo
-  class HomeController < ApplicationController
+  class HomeController < Avo::ApplicationController
     def index
       if Avo.configuration.home_path.present?
         # If the home_path is a block run it, if not, just use it

data/app/controllers/avo/media_library_controller.rb

@@ -1,5 +1,5 @@
 module Avo
-  class MediaLibraryController < ApplicationController
+  class MediaLibraryController < Avo::ApplicationController
     include Pagy::Method
 
     before_action :authorize_access!

data/app/controllers/avo/private_controller.rb

@@ -1,7 +1,5 @@
-require_dependency "avo/application_controller"
-
 module Avo
-  class PrivateController < ApplicationController
+  class PrivateController < Avo::ApplicationController
     before_action :authenticate_developer_or_admin!
 
     def design

data/app/controllers/avo/resources_controller.rb

@@ -1,6 +1,4 @@
-require_dependency "avo/base_controller"
-
 module Avo
-  class ResourcesController < BaseController
+  class ResourcesController < Avo::BaseController
   end
 end

data/app/controllers/avo/search_controller.rb

@@ -3,10 +3,8 @@
 # This controller is currently only used for searchable fields, it keeps the old search controller without any changes
 # Possibly have much more logic that it uses, but it's not worth the effort to refactor it since we're going to replace it with a new searchable fields way
 
-require_dependency "avo/application_controller"
-
 module Avo
-  class SearchController < ApplicationController
+  class SearchController < Avo::ApplicationController
     include Rails.application.routes.url_helpers
     include ActionView::Helpers::TextHelper
 

data/app/javascript/js/controllers/modal_size_controller.js

@@ -2,8 +2,6 @@ import { Controller } from '@hotwired/stimulus'
 
 // Connects to data-controller="modal-size"
 export default class extends Controller {
-  static targets = ['container']
-
   static values = {
     currentWidth: String,
     currentHeight: String,
@@ -28,56 +26,18 @@ export default class extends Controller {
   }
 
   updateWidthClass(width) {
-    // Remove all modal width classes from the modal element
-    this.modalElement.classList.remove(
-      'modal--width-sm',
-      'modal--width-md',
-      'modal--width-lg',
-      'modal--width-xl',
-      'modal--width-2xl',
-      'modal--width-3xl',
-      'modal--width-4xl',
-      'modal--width-full',
-      'modal--width-25',
-      'modal--width-50',
-      'modal--width-75',
-      'modal--width-100',
-    )
-
-    // Remove all width classes from the container
-    this.containerTarget.classList.remove('w-sm', 'w-md', 'w-lg', 'w-xl', 'w-2xl', 'w-3xl', 'w-4xl', 'w-full')
-
-    // Add the new modal width class to the modal element
-    this.modalElement.classList.add(`modal--width-${width}`)
-
-    // Add the corresponding width class to the container
-    if (width === 'full') {
-      this.containerTarget.classList.add('w-full')
-    } else {
-      this.containerTarget.classList.add(`w-${width}`)
-    }
+    this.#swapModifier('modal--width-', width)
   }
 
   updateHeightClass(height) {
-    // Remove all modal height classes from the modal element
-    this.modalElement.classList.remove(
-      'modal--height-auto',
-      'modal--height-sm',
-      'modal--height-md',
-      'modal--height-lg',
-      'modal--height-xl',
-      'modal--height-2xl',
-      'modal--height-3xl',
-      'modal--height-4xl',
-      'modal--height-full',
-      'modal--height-25',
-      'modal--height-50',
-      'modal--height-75',
-      'modal--height-100',
-    )
+    this.#swapModifier('modal--height-', height)
+  }
 
-    // Add the new modal height class to the modal element
-    // The CSS will handle applying the appropriate height to .modal__card
-    this.modalElement.classList.add(`modal--height-${height}`)
+  // The CSS owns the sizes: each `modal--width-*` / `modal--height-*` modifier
+  // sizes `.modal__card`. Swapping by prefix means a new size token is a CSS
+  // rule and nothing else — no list here to keep in sync with the stylesheet.
+  #swapModifier(prefix, value) {
+    this.modalElement.classList.remove(...[...this.modalElement.classList].filter((name) => name.startsWith(prefix)))
+    this.modalElement.classList.add(`${prefix}${value}`)
   }
 }

data/app/javascript/js/controllers/record_selector_controller.js

@@ -9,8 +9,19 @@ export default class extends Controller {
 
   autoClicking = false
 
+  // Every lookup in here is scoped to this controller's element. A page can hold several tables (a
+  // show page renders one per has_many association) and each numbers its rows from zero, so a
+  // document-wide lookup by index always lands in the first table.
   get itemSelectorCells() {
-    return document.querySelectorAll('.item-selector-cell')
+    return this.element.querySelectorAll('.item-selector-cell')
+  }
+
+  #rowAt(index) {
+    return this.element.querySelector(`tr[data-index="${index}"]`)
+  }
+
+  #checkboxAt(index) {
+    return this.element.querySelector(`input[type="checkbox"][data-index="${index}"]`)
   }
 
   get hasLastCheckedIndex() {
@@ -32,6 +43,12 @@ export default class extends Controller {
       return
     }
 
+    // Ranges are addressed by row. Index view types outside a table (avo-notifications renders one)
+    // give this component an index but no row to walk up to, so there's nothing to span.
+    if (!event.target.closest('tr')) {
+      return
+    }
+
     // If there's no last checked index and the shift key isn't pressed, set the starting index
     if (!this.hasLastCheckedIndex) {
       this.#setStartingIndex(event)
@@ -57,7 +74,7 @@ export default class extends Controller {
 
     // Loop through the range of rows and toggle the checkboxes
     theRange.forEach((index) => {
-      const checkbox = document.querySelector(`input[type="checkbox"][data-index="${index}"]`)
+      const checkbox = this.#checkboxAt(index)
 
       // Toggle the checkbox if it's not in the same state as the target checkbox
       if (checkbox.checked !== state) {
@@ -110,7 +127,8 @@ export default class extends Controller {
   #selectorMouseenterHandler(event) {
     // Add the highlighted-row class to the row that the mouse is over
     event.target.closest('tr').classList.add('highlighted-row')
-    if (this.lastCheckedIndex) {
+    // Check against null, not truthiness — index 0 is a valid anchor
+    if (this.hasLastCheckedIndex) {
       // Highlight the range of rows between the last checked index and the current index
       this.#highlightRange(this.lastCheckedIndex, parseInt(event.target.closest('tr').dataset.index))
     }
@@ -120,17 +138,16 @@ export default class extends Controller {
     // Remove the highlighted-row class from the row that the mouse is over
     event.target.closest('tr').classList.remove('highlighted-row')
     // Remove the highlighted-row class from all rows
-    document.querySelectorAll('tr[data-index]').forEach((tr) => {
+    this.element.querySelectorAll('tr[data-index]').forEach((tr) => {
       tr.classList.remove('highlighted-row')
     })
   }
 
   // Highlight the range of rows between the start index and the end index
   #highlightRange(startIndex, endIndex) {
-    const theRange = difference(range(startIndex, endIndex))
-    theRange.forEach((index) => {
-      const tr = document.querySelector(`tr[data-index="${index}"]`)
-      tr.classList.add('highlighted-row')
+    // `range` excludes the end index, but the hovered row is highlighted by the caller
+    range(startIndex, endIndex).forEach((index) => {
+      this.#rowAt(index).classList.add('highlighted-row')
     })
   }
 

data/app/views/avo/media_library/index.html.erb

@@ -1,6 +1,9 @@
 <%= render Avo::TurboFrameWrapperComponent.new(turbo_frame_request_id) do %>
   <% if turbo_frame_request_id %>
-    <%= render Avo::ModalComponent.new(title: t("avo.media_library.title")) do |c| %>
+    <%# The library is a grid of media cards (13rem floor per card), so the default
+        :xl modal fits two columns and 4xl three, leaving a ragged last row. 5xl
+        fits four, so a page of 12 lands as three full rows. %>
+    <%= render Avo::ModalComponent.new(title: t("avo.media_library.title"), width: :"5xl") do |c| %>
       <div class="p-4">
         <%= render Avo::MediaLibrary::ListComponent.new attaching: @attaching %>
       </div>

data/avo.gemspec

@@ -28,7 +28,7 @@ Gem::Specification.new do |spec|
       "public gem pushes."
   end
 
-  spec.required_ruby_version = ">= 3.0.0"
+  spec.required_ruby_version = ">= 3.2.0"
   spec.post_install_message = "Thank you for using Avo 💪  Docs are available at https://docs.avohq.io"
 
   # NOTE: `public/` is rejected below — Avo 4 ships precompiled assets from

data/lib/avo/resources/controls/base_control.rb

@@ -2,6 +2,19 @@ module Avo
   module Resources
     module Controls
       class BaseControl
+        unless defined?(CONTROL_OPTIONS)
+          # Keys the control consumes itself, either as an option it renders from
+          # (`style`, `icon`…) or as internal plumbing merged in by `execute_block`
+          # (`as_index_control`, `item`…). Everything a user passes *outside* this
+          # list is forwarded to the rendered element as an HTML attribute, so
+          # `link_to "Docs", url, rel: "noopener"` reaches the `<a>` tag.
+          CONTROL_OPTIONS = %i[
+            label path title target data class
+            style color size icon icon_class confirmation_message
+            as_index_control from_custom_list item
+          ].freeze
+        end
+
         attr_reader :label, :title, :color, :style, :icon, :icon_class, :confirmation_message, :size, :as_index_control
 
         def initialize(**args)

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.25" unless const_defined?(:VERSION)
+  VERSION = "4.1.0" unless const_defined?(:VERSION)
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.25
+  version: 4.1.0
 platform: ruby
 authors:
 - Adrian Marin
@@ -1189,7 +1189,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.0.0
+      version: 3.2.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="