avo 3.0.0.pre8 → 3.0.0.pre11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1330e65c3c0ee5eda7738928fe8b9dc98a75df09fc9d30012e94c714767233b1
-  data.tar.gz: ab36b3c80f8ae22c48fc2529373b507616746c6f7e711ebff1210c902a1b3a9d
+  metadata.gz: 8a1674354633c9b8113bfdeba7a9e53ac54bd3f75af78c9492655c485c43a0ff
+  data.tar.gz: 53bd8bb7f50267e0b4756164fb85ffa1fe013a1c7642c4417dabd9d2320e4b57
 SHA512:
-  metadata.gz: c351cedaf01797b64483591b0f5a96bb4ee1dedef576df314b55d7bb668505e601220b4eef33cabdebcf19162508adbc4ad49f6326cad2932d2fe792e31e848f
-  data.tar.gz: 4aa891eab38f40b7468f43327e26175963b9c1e95016d09756ddac428863e69e3ad000124d04e67570c0f9a1d7ff73196b282b4de76a45f4856814296d04dea3
+  metadata.gz: 857ed520648c9cbe1d2361c11bd6f48266c25c1c8fc0175b0843de23edbb7518eff352f8495c95bb6238a7d4e93e7a003fa1d86467d4999524baa6c1cb19042d
+  data.tar.gz: 32bf4c5d55be3aeae79411fd30df1a550eb8b417fd76680cee40925b4a1a9265c5a7b9d241182d638b333666fea00c95d811d9bc868a8f80b32aba3457f48e21

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (3.0.0.pre8)
+    avo (3.0.0.pre11)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/app/assets/stylesheets/avo.base.css

@@ -70,7 +70,6 @@ body {
   @apply opacity-0 translate-y-1;
 }
 
-
 .turbo-progress-bar {
   @apply bg-primary-400;
 }

data/app/assets/svgs/map-empty-state.svg

@@ -0,0 +1,35 @@
+<svg width="248" height="287" viewBox="0 0 248 287" fill="none" xmlns="http://www.w3.org/2000/svg" data-target="grid-empty-state-svg">
+<path d="M124 270.227C192.483 270.227 248 214.71 248 146.227C248 77.7433 192.483 22.2266 124 22.2266C55.5167 22.2266 0 77.7433 0 146.227C0 214.71 55.5167 270.227 124 270.227Z" fill="rgb(var(--color-primary-100))"/>
+<g filter="rgb(var(--color-primary-100))">
+<path d="M195.093 93.3198H52.9068C48.3412 93.3198 44.6401 97.0209 44.6401 101.586V275.186C44.6401 279.752 48.3412 283.453 52.9068 283.453H195.093C199.659 283.453 203.36 279.752 203.36 275.186V101.586C203.36 97.0209 199.659 93.3198 195.093 93.3198Z" fill="white"/>
+</g>
+<path d="M107.467 118.12H64.48C61.7407 118.12 59.52 120.34 59.52 123.08C59.52 125.819 61.7407 128.04 64.48 128.04H107.467C110.206 128.04 112.427 125.819 112.427 123.08C112.427 120.34 110.206 118.12 107.467 118.12Z" fill="rgb(var(--color-primary-100))"/>
+<path d="M137.227 139.613H64.48C61.7407 139.613 59.52 141.834 59.52 144.573C59.52 147.312 61.7407 149.533 64.48 149.533H137.227C139.966 149.533 142.187 147.312 142.187 144.573C142.187 141.834 139.966 139.613 137.227 139.613Z" fill="rgb(var(--color-primary-100))" opacity="0.6"/>
+<path d="M107.467 162.76H64.48C61.7407 162.76 59.52 164.981 59.52 167.72C59.52 170.459 61.7407 172.68 64.48 172.68H107.467C110.206 172.68 112.427 170.459 112.427 167.72C112.427 164.981 110.206 162.76 107.467 162.76Z" fill="rgb(var(--color-primary-100))"/>
+<path d="M137.227 184.253H64.48C61.7407 184.253 59.52 186.474 59.52 189.213C59.52 191.953 61.7407 194.173 64.48 194.173H137.227C139.966 194.173 142.187 191.953 142.187 189.213C142.187 186.474 139.966 184.253 137.227 184.253Z" fill="rgb(var(--color-primary-100))" opacity="0.6"/>
+<path d="M107.467 207.4H64.48C61.7407 207.4 59.52 209.621 59.52 212.36C59.52 215.099 61.7407 217.32 64.48 217.32H107.467C110.206 217.32 112.427 215.099 112.427 212.36C112.427 209.621 110.206 207.4 107.467 207.4Z" fill="rgb(var(--color-primary-100))"/>
+<path d="M137.227 228.893H64.48C61.7407 228.893 59.52 231.114 59.52 233.853C59.52 236.592 61.7407 238.813 64.48 238.813H137.227C139.966 238.813 142.187 236.592 142.187 233.853C142.187 231.114 139.966 228.893 137.227 228.893Z" fill="rgb(var(--color-primary-100))" opacity="0.6"/>
+<g filter="url(#filter1_d_577_1090)">
+<path d="M195.093 9H52.9068C48.3412 9 44.6401 12.7011 44.6401 17.2667V66.8667C44.6401 71.4322 48.3412 75.1333 52.9068 75.1333H195.093C199.659 75.1333 203.36 71.4322 203.36 66.8667V17.2667C203.36 12.7011 199.659 9 195.093 9Z" fill="rgb(var(--color-primary-500))"/>
+</g>
+<path d="M107.467 27.1865H64.48C61.7407 27.1865 59.52 29.4072 59.52 32.1465C59.52 34.8859 61.7407 37.1065 64.48 37.1065H107.467C110.206 37.1065 112.427 34.8859 112.427 32.1465C112.427 29.4072 110.206 27.1865 107.467 27.1865Z" fill="rgb(var(--color-primary-100))"/>
+<path d="M137.227 48.6799H64.48C61.7407 48.6799 59.52 50.9006 59.52 53.6399C59.52 56.3793 61.7407 58.5999 64.48 58.5999H137.227C139.966 58.5999 142.187 56.3793 142.187 53.6399C142.187 50.9006 139.966 48.6799 137.227 48.6799Z" fill="white"/>
+<defs>
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.803922 0 0 0 0 0.85098 0 0 0 0.349 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_577_1090"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_577_1090" result="shape"/>
+<filter id="filter1_d_577_1090" x="38.6401" y="0" width="170.72" height="78.1333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.803922 0 0 0 0 0.85098 0 0 0 0.349 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_577_1090"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_577_1090" result="shape"/>
+</filter>
+</defs>
+</svg>

data/app/assets/svgs/map-view-type.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z"/>
+</svg>

data/app/components/avo/actions_component.rb

@@ -56,13 +56,15 @@ class Avo::ActionsComponent < ViewComponent::Base
 
   def single_record_path(id)
     Avo::Services::URIService.parse(@resource.record_path)
-      .append_paths("actions", id)
+      .append_paths("actions")
+      .append_query(action_id: id)
       .to_s
   end
 
   def many_records_path(id)
     Avo::Services::URIService.parse(@resource.records_path)
-      .append_paths("actions", id)
+      .append_paths("actions")
+      .append_query(action_id: id)
       .to_s
   end
 end

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

@@ -2,7 +2,7 @@
   class: classes,
   style: style,
   data: data do %>
-  <div class="h-full <% if stacked? %> md:pt-4 <% else %> md:pt-0 <% if short? %> md:h-10 <% else %> md:h-14 <% end %> <% end %> pt-4 flex self-start items-center <%= @field.get_html(:classes, view: view, element: :label) %> w-48 <% if compact? %> md:w-48 xl:w-64 <% else %> md:w-64 <% end %> px-6 uppercase font-semibold text-gray-500 text-sm" data-slot="label">
+  <div class="h-full <% if stacked? %> md:pt-4 <% else %> md:pt-0 <% if short? %> md:h-10 <% else %> md:h-14 <% end %> <% end %> pt-4 flex self-start items-center flex-shrink-0 <%= @field.get_html(:classes, view: view, element: :label) %> w-48 <% if compact? %> md:w-48 xl:w-64 <% else %> md:w-64 <% end %> px-6 uppercase font-semibold text-gray-500 text-sm" data-slot="label">
     <% if form.present? %>
       <%= form.label field.id, label %>
     <% else %>
@@ -11,7 +11,7 @@
     <% if on_edit? && field.is_required? %> <span class="text-red-600 ml-1">*</span> <% end %>
   </div>
   <div class="flex-1 flex flex-row md:min-h-inherit py-2 <% if stacked? %> pb-4 <% else %><% end %> px-6 <%= @field.get_html(:classes, view: view, element: :content) %>" data-slot="value">
-    <div class="self-center <% if full_width? || compact? || stacked? %> w-full <% else %> md:w-8/12 <% end %>">
+    <div class="self-center w-full <% unless full_width? || compact? || stacked? %> md:w-8/12 <% end %>">
       <% if on_show? %>
         <% if field.value.blank? and dash_if_blank %>
           —

data/app/components/avo/fields/area_field/edit_component.html.erb

@@ -0,0 +1,7 @@
+<%= field_wrapper **field_wrapper_args do %>
+  <%= @form.text_field field.id,
+    class: classes("w-full"),
+    value: field.value.to_s,
+    placeholder: field.placeholder,
+    disabled: disabled? %>
+<% end %>

data/app/components/avo/fields/area_field/edit_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::AreaField::EditComponent < Avo::Fields::EditComponent
+end

data/app/components/avo/fields/area_field/show_component.html.erb

@@ -0,0 +1,8 @@
+<%= field_wrapper **field_wrapper_args do %>
+  <% if field.value.present? %>
+    <%= area_map field.map_data, **field.mapkick_options %>
+  <% else %>
+    —
+  <% end %>
+<% end %>
+

data/app/components/avo/fields/area_field/show_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::AreaField::ShowComponent < Avo::Fields::ShowComponent
+end

data/app/components/avo/fields/common/files/controls_component.html.erb

@@ -0,0 +1,29 @@
+<div class="flex">
+  <% if can_download_file? %>
+    <%= a_link Rails.application.routes.url_helpers.rails_blob_path(file, only_path: true, disposition: :attachment),
+      icon: 'heroicons/outline/download',
+      color: :primary,
+      download: true,
+      class: 'text-center',
+      title: t('avo.download_file'),
+      data: { tippy: :tooltip },
+      compact: true,
+      size: :xs %>
+  <% end %>
+</div>
+<div>
+  <% if can_delete_file? %>
+    <%= a_link destroy_path,
+      icon: 'heroicons/outline/trash',
+      color: :red,
+      compact: true,
+      size: :xs,
+      class: 'text-center',
+      title: t('avo.delete_file', item: file.filename),
+      data: {
+        turbo_method: :delete,
+        turbo_confirm: t('avo.are_you_sure'),
+        tippy: :tooltip
+      } %>
+  <% end %>
+</div>

data/app/components/avo/fields/common/files/controls_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Avo::Fields::Common::Files::ControlsComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+  include Avo::Fields::Concerns::FileAuthorization
+
+  attr_reader :file, :field, :resource
+  delegate :id, to: :field
+
+  def initialize(field:, file:, resource:)
+    @field = field
+    @file = file
+    @resource = resource
+  end
+
+  def destroy_path
+    Avo::Services::URIService.parse(@resource.record_path).append_paths("active_storage_attachments", id, file.id).to_s
+  end
+end

data/app/components/avo/fields/common/files/list_viewer_component.html.erb

@@ -0,0 +1,20 @@
+<%= content_tag :div, class: wrapper_classes do %>
+  <%= turbo_frame_tag @field.id do %>
+    <% unless @field.hide_view_type_switcher %>
+      <div class="justify-self-end flex justify-end items-center space-x-3">
+        <%= render partial: 'avo/partials/view_toggle_button',
+          locals: {
+            available_view_types: available_view_types,
+            view_type: view_type,
+            turbo_frame: @field.id,
+          }
+        %>
+      </div>
+    <% end %>
+    <div class="<%= classes %>">
+      <% @field.value.attachments.each do |file| %>
+        <%= render view_type_component(file) %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/avo/fields/common/files/list_viewer_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class Avo::Fields::Common::Files::ListViewerComponent < ViewComponent::Base
+  include Turbo::FramesHelper
+
+  attr_reader :field, :resource
+
+  def initialize(field:, resource:)
+    @field = field
+    @resource = resource
+  end
+
+  def classes
+    base_classes = "py-4 rounded-xl max-w-full"
+
+    view_type_classes = if view_type == :list
+      "flex flex-col space-y-2"
+    else
+      "relative grid xs:grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6"
+    end
+
+    "#{base_classes} #{view_type_classes}"
+  end
+
+  def wrapper_classes
+    (field.stacked && !field.hide_view_type_switcher) ? "-mt-9" : ""
+  end
+
+  def available_view_types
+    [:list, :grid]
+  end
+
+  def view_type_component(file)
+    component = "Avo::Fields::Common::Files::ViewType::#{view_type.to_s.capitalize}Component".constantize
+    component.new(field: field, resource: resource, file: file)
+  end
+
+  def view_type
+    (resource.params.dig(:view_type) || field.view_type).to_sym
+  end
+end

data/app/components/avo/fields/common/files/view_type/grid_component.html.erb

@@ -0,0 +1,27 @@
+<div id="<%= dom_id file %>" class="relative min-h-full max-w-full flex-1 flex flex-col justify-between space-y-2">
+  <% if file.present? %>
+    <div class="flex flex-col justify-between h-full">
+      <% if file.representable? && is_image? %>
+        <%= image_tag helpers.main_app.url_for(file), class: 'rounded-lg object-cover w-full aspect-video' %>
+      <% elsif is_audio? %>
+        <%= audio_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
+      <% elsif is_video? %>
+        <%= video_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
+      <% else %>
+        <div class="relative flex flex-col justify-evenly items-center px-2 rounded-lg border bg-white border-gray-500 min-h-24">
+          <div class="flex flex-col justify-center items-center w-full">
+            <%= helpers.svg 'document-text', class: 'h-10 text-gray-600 mb-2' %>
+          </div>
+        </div>
+      <% end %>
+      <% if field.display_filename %>
+        <span class="text-gray-500 mt-1 text-sm truncate" title="<%= file.filename %>"><%= file.filename %></span>
+      <% end %>
+    </div>
+    <div class="flex space-x-2">
+      <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: field, file: file, resource: resource) %>
+    </div>
+  <% else %>
+    –
+  <% end %>
+</div>

data/app/components/avo/fields/common/{single_file_viewer_component.rb → files/view_type/grid_component.rb}

@@ -1,10 +1,7 @@
 # frozen_string_literal: true
 
-class Avo::Fields::Common::SingleFileViewerComponent < ViewComponent::Base
-  include Avo::ApplicationHelper
-  include Avo::Fields::Concerns::FileAuthorization
-
-  attr_reader :field
+class Avo::Fields::Common::Files::ViewType::GridComponent < ViewComponent::Base
+  attr_reader :field, :resource
 
   def initialize(field:, resource:, file: nil)
     @file = file
@@ -12,10 +9,6 @@ class Avo::Fields::Common::SingleFileViewerComponent < ViewComponent::Base
     @resource = resource
   end
 
-  def destroy_path
-    Avo::Services::URIService.parse(@resource.record_path).append_paths("active_storage_attachments", id, file.id).to_s
-  end
-
   def id
     field.id
   end

data/app/components/avo/fields/common/files/view_type/list_component.html.erb

@@ -0,0 +1,22 @@
+<div id="<%= dom_id file %>" class="relative min-h-full max-w-full flex-1 flex">
+  <% if file.present? %>
+    <div class="grid grid-cols-6 gap-2 items-center max-w-full w-full">
+      <div class="col-span-4 flex-1 flex flex-row items-center text-gray-700 overflow-x-auto mac-styled-scrollbar ">
+        <div class="rounded-full bg-slate-100 border border-gray-500 p-1.5 flex items-center justify-center">
+          <%= helpers.svg icon_for_file, class: "h-5 text-gray-600" %>
+        </div>
+        <p class="items-center h-full p-2 flex-shrink-0">
+          <%= file.filename %>
+        </p>
+      </div>
+      <div class="text-gray-700 flex-shrink-0 text-sm">
+        <%= helpers.number_to_human_size(file.byte_size) %>
+      </div>
+      <div class="flex space-x-2 justify-end col-span-1 flex-shrink-0">
+        <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: field, file: file, resource: resource) %>
+      </div>
+    </div>
+  <% else %>
+    –
+  <% end %>
+</div>

data/app/components/avo/fields/common/files/view_type/list_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Avo::Fields::Common::Files::ViewType::ListComponent < Avo::Fields::Common::Files::ViewType::GridComponent
+  def icon_for_file
+    if is_image?
+      "photo"
+    elsif is_audio?
+      "speaker-wave"
+    elsif is_video?
+      "video-camera"
+    else
+      "document"
+    end
+  end
+end

data/app/components/avo/fields/country_field/edit_component.html.erb

@@ -10,6 +10,7 @@
     data: @field.get_html(:data, view: view, element: :input),
     disabled: disabled?,
     style: @field.get_html(:style, view: view, element: :input),
-    placeholder: @field.include_blank.present? ? nil : @field.placeholder
+    placeholder: @field.include_blank.present? ? nil : @field.placeholder,
+    autocomplete: @field.autocomplete
   %>
 <% end %>

data/app/components/avo/fields/file_field/edit_component.html.erb

@@ -1,7 +1,7 @@
 <%= field_wrapper **field_wrapper_args do %>
   <% if @field.value.present? %>
     <div class="mb-2">
-      <%= render Avo::Fields::Common::SingleFileViewerComponent.new resource: @resource, field: @field %>
+      <%= render Avo::Fields::Common::Files::ViewType::GridComponent.new resource: @resource, field: @field %>
     </div>
   <% end %>
 

data/app/components/avo/fields/file_field/show_component.html.erb

@@ -1,3 +1,3 @@
 <%= field_wrapper **field_wrapper_args do %>
-  <%= render Avo::Fields::Common::SingleFileViewerComponent.new resource: @resource, field: @field %>
+  <%= render Avo::Fields::Common::Files::ViewType::GridComponent.new resource: @resource, field: @field %>
 <% end %>

data/app/components/avo/fields/files_field/edit_component.html.erb

@@ -1,5 +1,5 @@
 <%= field_wrapper **field_wrapper_args, full_width: true do %>
-  <%= render Avo::Fields::Common::FilesListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
+  <%= render Avo::Fields::Common::Files::ListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
 
   <% if can_upload_file? %>
     <div class="mt-2">

data/app/components/avo/fields/files_field/show_component.html.erb

@@ -1,3 +1,3 @@
 <%= field_wrapper **field_wrapper_args, full_width: true do %>
-  <%= render Avo::Fields::Common::FilesListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
+  <%= render Avo::Fields::Common::Files::ListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
 <% end %>

data/app/components/avo/fields/location_field/show_component.html.erb

@@ -1,6 +1,6 @@
 <%= field_wrapper **field_wrapper_args do %>
   <% if field.value_present? %>
-    <%= js_map [{latitude: field.value[0], longitude: field.value[1]}] %>
+    <%= js_map [{latitude: field.value[0], longitude: field.value[1]}], id: "location-map" %>
   <% else %>
     —
   <% end %>

data/app/components/avo/fields/number_field/edit_component.html.erb

@@ -7,6 +7,7 @@
     min: @field.min,
     placeholder: @field.placeholder,
     step: @field.step,
-    style: @field.get_html(:style, view: view, element: :input)
+    style: @field.get_html(:style, view: view, element: :input),
+    autocomplete: @field.autocomplete
   %>
 <% end %>

data/app/components/avo/fields/password_field/edit_component.html.erb

@@ -4,6 +4,7 @@
     data: @field.get_html(:data, view: view, element: :input),
     disabled: disabled?,
     placeholder: @field.placeholder,
-    style: @field.get_html(:style, view: view, element: :input)
+    style: @field.get_html(:style, view: view, element: :input),
+    autocomplete: @field.autocomplete
     %>
 <% end %>

data/app/components/avo/fields/select_field/edit_component.html.erb

@@ -10,6 +10,7 @@
     disabled: disabled?,
     style: @field.get_html(:style, view: view, element: :input),
     value: @field.record.present? ? @field.record[@field.id] : @field.value,
-    placeholder: @field.include_blank.present? ? nil : @field.placeholder
+    placeholder: @field.include_blank.present? ? nil : @field.placeholder,
+    autocomplete: @field.autocomplete
   %>
 <% end %>

data/app/components/avo/fields/text_field/edit_component.html.erb

@@ -6,6 +6,7 @@
     placeholder: @field.placeholder,
     style: @field.get_html(:style, view: view, element: :input),
     # value: @field.value,
-    multiple: multiple
+    multiple: multiple,
+    autocomplete: @field.autocomplete
   %>
 <% end %>

data/app/components/avo/index/resource_map_component.html.erb

@@ -0,0 +1,16 @@
+<% if @resources.present? %>
+  <div class="map-view-container grid <%= grid_layout_classes %>">
+    <div class="map-component min-h-full <%= map_component_order_class %>">
+      <%= js_map(resource_location_markers, **resource_mapkick_options) %>
+    </div>
+    <% if render_table? %>
+      <div class="overflow-auto <%= table_component_order_class %>">
+        <%= render(Avo::Index::ResourceTableComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, pagy: @pagy, query: @query)) %>
+      </div>
+    <% end %>
+  </div>
+<% else %>
+  <div class="bg-white rounded shadow-panel">
+    <%= helpers.empty_state by_association: params[:related_name].present?, view_type: :map %>
+  </div>
+<% end %>

data/app/components/avo/index/resource_map_component.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Avo
+  module Index
+    # Render a map view for a list of resources, where each resource is
+    # expected to have an attribute/attribute set representing its location.
+    class ResourceMapComponent < ViewComponent::Base
+      attr_reader :resources
+
+      def initialize(resources: nil, resource: nil, reflection: nil, parent_record: nil, parent_resource: nil, pagy: nil, query: nil)
+        super
+        @resources = resources
+        @resource = resource
+        @reflection = reflection
+        @parent_record = parent_record
+        @parent_resource = parent_resource
+        @pagy = pagy
+        @query = query
+      end
+
+      def grid_layout_classes
+        return unless render_table?
+
+        if table_positioned_horizontally
+          "grid-flow-row sm:grid-flow-col grid-rows-1 auto-cols-fr"
+        elsif table_positioned_vertically
+          "grid-flow-row grid-cols-1"
+        end
+      end
+
+      def table_positioned_horizontally
+        %i[left right].include?(map_view_table_layout)
+      end
+
+      def table_positioned_vertically
+        %i[bottom top].include?(map_view_table_layout)
+      end
+
+      def map_component_order_class
+        if render_table? && table_positioned_at_the_start
+          "order-last"
+        else
+          "order-first"
+        end
+      end
+
+      def table_component_order_class
+        if table_positioned_at_the_start
+          "order-first"
+        else
+          "order-last"
+        end
+      end
+
+      def table_positioned_at_the_start
+        %i[left top].include?(map_view_table_layout)
+      end
+
+      def map_view_table_layout
+        map_options.dig(:table, :layout)
+      end
+
+      def resource_location_markers
+        # If we have no proc and no default location method, don't try to create markers
+        return [] unless resource_mappable?
+
+        resources
+          .map do |resource|
+            Avo::ExecutionContext.new(target: marker_proc, record: resource.record).handle
+          end
+          .compact
+          .filter do |coordinates|
+            coordinates[:latitude].present? && coordinates[:longitude].present?
+          end
+      end
+
+      def resource_mapkick_options
+        map_options[:mapkick_options] || {}
+      end
+
+      def render_table?
+        map_options.dig(:table, :visible)
+      end
+
+      private
+
+      def default_record_marker_proc
+        lambda {
+          {
+            latitude: record.coordinates.first,
+            longitude: record.coordinates.last
+          }
+        }
+      end
+
+      def map_options
+        @resource.map_view || {}
+      end
+
+      def marker_proc
+        map_options[:record_marker] || default_record_marker_proc
+      end
+
+      def resource_mappable?
+        map_options[:record_marker].present? || @resources.first.record.respond_to?(:coordinates)
+      end
+    end
+  end
+end

data/app/components/avo/resource_component.rb

@@ -245,7 +245,6 @@ class Avo::ResourceComponent < Avo::BaseComponent
     a_link create_path,
       color: :primary,
       style: :primary,
-      target: "_top",
       icon: "heroicons/outline/plus",
       data: {
         target: :create
@@ -269,6 +268,43 @@ class Avo::ResourceComponent < Avo::BaseComponent
     end
   end
 
+  def render_link_to(link)
+    a_link link.path,
+      color: link.color,
+      style: link.style,
+      icon: link.icon,
+      icon_class: link.icon_class,
+      title: link.title, target: link.target,
+      class: link.classes,
+      size: link.size,
+      data: {
+        **link.data,
+        tippy: link.title ? :tooltip : nil,
+      } do
+      link.label
+    end
+  end
+
+  def render_action(action)
+    return unless can_see_the_actions_button?
+
+    a_link action.path,
+      color: action.color,
+      style: action.style,
+      icon: action.icon,
+      icon_class: action.icon_class,
+      title: action.title,
+      size: action.size,
+      data: {
+        turbo_frame: "actions_show",
+        action_name: action.action.action_name,
+        tippy: action.title ? :tooltip : nil,
+        action: "click->actions-picker#visitAction",
+      } do
+      action.label
+    end
+  end
+
   def is_a_related_resource?
     @reflection.present? && @resource.record.present?
   end