avo 2.46.0 → 3.0.0.pre2

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

@@ -1,4 +1,4 @@
-@import './../../../node_modules/easymde/dist/easymde.min.css';
+@import './../../../node_modules/simplemde/dist/simplemde.min.css';
 @import './../../../node_modules/tippy.js/dist/tippy.css';
 @import './../../../node_modules/tippy.js/themes/light.css';
 @import './../../../node_modules/flatpickr/dist/flatpickr.css';
@@ -19,7 +19,6 @@
 @import './css/scrollbar.css';
 @import './css/sidebar.css';
 @import './css/spinner.css';
-@import './css/tags.css';
 
 @import './css/fields/status.css';
 @import './css/fields/code.css';
@@ -71,6 +70,7 @@ body {
   @apply opacity-0 translate-y-1;
 }
 
+
 .turbo-progress-bar {
   @apply bg-primary-400;
 }

data/app/assets/svgs/failed_to_load.svg

@@ -9,5 +9,6 @@
 <defs>
 <stop stop-color="#E3ECFA"/>
 <stop offset="1" stop-color="#DAE7FF"/>
+</linearGradient>
 </defs>
 </svg>

data/app/assets/svgs/font.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M432 432h-33.32l-135-389.24A16 16 0 0 0 248.55 32h-49.1a16 16 0 0 0-15.12 10.76L49.32 432H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16h-35.44l33.31-96h164.26l33.31 96H304a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zM158.53 288L224 99.31 289.47 288z"/></svg>

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

@@ -22,6 +22,7 @@
 <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>
 <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"/>

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

@@ -51,5 +51,6 @@
 </filter>
 <stop stop-color="#E3ECFA"/>
 <stop offset="1" stop-color="#DAE7FF"/>
+</linearGradient>
 </defs>
 </svg>

data/app/assets/svgs/triangle-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" role="presentation"><g fill="none" fill-rule="evenodd"><path fill="#8898AA" fill-opacity="0.1" d="M1 9.092h19l-6.402-6.74c-1.717-1.806-4.485-1.8-6.196 0L1 9.093zM20.342 8l-6.02-6.336c-2.108-2.22-5.538-2.218-7.645 0L.658 8h19.684z"></path><path fill="currentcolor" d="M7.402 2.353c1.711-1.801 4.48-1.807 6.196 0L20 9.093H1l6.402-6.74z"></path></g></svg>

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

@@ -1,26 +1,40 @@
 <div class="relative flex flex-col w-full sm:w-auto js-actions-dropdown"
-  data-controller="toggle-panel actions-picker"
+  data-component-name="<%= self.class.to_s.underscore %>"
+  data-controller="toggle actions-picker"
   data-actions-picker-enabled-class="text-black hover:bg-primary-500 hover:text-white"
   data-actions-picker-disabled-class="cursor-wait text-gray-500"
+  data-resource-name="<%= @resource.class.to_s %>"
+  <% if @resource.record.present? %> data-record-id="<%= @resource.record.id %>" <% end %>
 >
   <%= a_button style: @style,
     type: :button,
     color: @color,
+    size: size,
     class: "focus:outline-none",
     icon: 'arrow-circle-right',
     icon_class: 'transform rotate-90',
-    'data-action': "click->toggle-panel#togglePanel",
+    'data-action': "click->toggle#togglePanel",
     'data-actions-dropdown-button': @resource.model_key do %>
     <%= label %>
   <% end %>
   <div
     class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded overflow-hidden hidden"
-    data-toggle-panel-target="panel"
+    data-toggle-target="panel"
+    data-controller="actions-overflow"
+    data-actions-overflow-panel-list-value="<%= !@as_row_control %>"
+    data-actions-overflow-target="content"
+    data-transition-enter="transition ease-out duration-100"
+    data-transition-enter-start="transform opacity-0 -translate-y-1"
+    data-transition-enter-end="transform opacity-100 translate-y-0"
+    data-transition-leave="transition ease-in duration-75"
+    data-transition-leave-start="transform opacity-100 translate-y-0"
+    data-transition-leave-end="transform opacity-0 -translate-y-1"
   >
-    <div class="w-full space divide-y">
+    <div data-target="actions-list" class="w-full space divide-y">
       <% actions.each_with_index do |action, index| %>
         <%= link_to action_path(action.param_id),
           data: {
+            action_name: action.action_name,
             'turbo-frame': 'actions_show',
             'action': 'click->actions-picker#visitAction',
             'actions-picker-target': action.standalone ? 'standaloneAction' : 'resourceAction',

data/app/components/avo/actions_component.rb

@@ -2,17 +2,18 @@
 
 class Avo::ActionsComponent < ViewComponent::Base
   include Avo::ApplicationHelper
-  attr_reader :label
+  attr_reader :label, :size, :as_row_control
 
-  def initialize(actions: [], resource: nil, view: nil, exclude: [], include: [], style: :outline, color: :primary, label: nil)
+  def initialize(actions: [], resource: nil, view: nil, exclude: [], style: :outline, color: :primary, label: nil, size: :md, as_row_control: false)
     @actions = actions || []
     @resource = resource
     @view = view
     @exclude = exclude
-    @include = include
     @color = color
     @style = style
-    @label = label || I18n.t("avo.actions")
+    @label = label || t("avo.actions")
+    @size = size
+    @as_row_control = as_row_control
   end
 
   def render?
@@ -20,19 +21,14 @@ class Avo::ActionsComponent < ViewComponent::Base
   end
 
   def actions
-    if @exclude.present?
-      @actions.reject { |action| action.class.in?(@exclude) }
-    elsif @include.present?
-      @actions.select { |action| action.class.in?(@include) }
-    else
-      @actions
-    end
+    @actions.reject { |action| action.class.in?(@exclude) }
   end
 
   # When running an action for one record we should do it on a special path.
-  # We do that so we get the `model` param inside the action so we can prefill fields.
+  # We do that so we get the `record` param inside the action so we can prefill fields.
   def action_path(id)
-    return many_records_path(id) unless @resource.has_model_id?
+    return single_record_path(id) if as_row_control
+    return many_records_path(id) unless @resource.has_record_id?
 
     if on_record_page?
       single_record_path id
@@ -43,7 +39,7 @@ class Avo::ActionsComponent < ViewComponent::Base
 
   # How should the action be displayed by default
   def is_disabled?(action)
-    return false if action.standalone
+    return false if action.standalone || as_row_control
 
     on_index_page?
   end
@@ -60,15 +56,13 @@ class Avo::ActionsComponent < ViewComponent::Base
 
   def single_record_path(id)
     Avo::Services::URIService.parse(@resource.record_path)
-      .append_paths("actions")
-      .append_query("action_id": id)
+      .append_paths("actions", id)
       .to_s
   end
 
   def many_records_path(id)
     Avo::Services::URIService.parse(@resource.records_path)
-      .append_paths("actions")
-      .append_query("action_id": id)
+      .append_paths("actions", id)
       .to_s
   end
 end

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

@@ -10,7 +10,7 @@
       </div>
       <div class="ml-3 w-0 flex-1 pt-0.5">
         <p class="text-sm leading-5 font-semibold">
-          <%= sanitize message.to_s %>
+          <%== message %>
         </p>
       </div>
       <div class="ml-4 flex-shrink-0 flex items-center">

data/app/components/avo/asset_manager/javascript_component.html.erb

@@ -0,0 +1,3 @@
+<% javascripts.each do |path| %>
+  <%= javascript_include_tag path, "data-turbo-track": "reload", defer: true %>
+<% end %>

data/app/components/avo/asset_manager/javascript_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Avo::AssetManager::JavascriptComponent < ViewComponent::Base
+  attr_reader :asset_manager
+
+  def initialize(asset_manager:)
+    @asset_manager = asset_manager
+  end
+
+  def javascripts
+    asset_manager.javascripts
+  end
+end

data/app/components/avo/asset_manager/stylesheet_component.html.erb

@@ -0,0 +1,3 @@
+<% stylesheets.each do |path| %>
+  <%= stylesheet_link_tag path, "data-turbo-track": "reload", defer: true %>
+<% end %>

data/app/components/avo/asset_manager/stylesheet_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Avo::AssetManager::StylesheetComponent < ViewComponent::Base
+  attr_reader :asset_manager
+
+  def initialize(asset_manager:)
+    @asset_manager = asset_manager
+  end
+
+  def stylesheets
+    asset_manager.stylesheets
+  end
+end

data/app/components/avo/base_component.rb

@@ -16,39 +16,42 @@ class Avo::BaseComponent < ViewComponent::Base
     nil
   end
 
-  # Fetch the resource and hydrate it with the model
+  # Fetch the resource and hydrate it with the record
   def association_resource
-    resource = ::Avo::App.get_resource(params[:via_resource_class])
-    model_class_name = params[:via_relation_class] || resource.model_class
+    resource = ::Avo::App.resources.get_resource(params[:via_resource_class])
 
-    model_klass = ::Avo::BaseResource.valid_model_class model_class_name
+    model_class = if params[:via_relation_class].present?
+      ::Avo::BaseResource.get_model_by_name params[:via_relation_class]
+    else
+      resource.model_class
+    end
 
-    resource = ::Avo::App.get_resource_by_model_name model_klass if resource.blank?
+    resource = ::Avo::App.resources.get_resource_by_model_class model_class if resource.blank?
 
-    model = resource.find_record params[:via_resource_id], query: model_klass, params: params
+    record = resource.find_record params[:via_record_id], query: model_class, params: params
 
-    resource.dup.hydrate model: model
+    resource.dup.hydrate record: record
   end
 
   # Get the resource for the resource using the klass attribute so we get the namespace too
   def reflection_resource
-    ::Avo::App.get_resource_by_model_name(@reflection.klass.to_s)
+    ::Avo::App.resources.get_resource_by_model_class(@reflection.klass.to_s)
   rescue
     nil
   end
 
   # Get the resource for the resource using the klass attribute so we get the namespace too
   def reflection_parent_resource
-    ::Avo::App.get_resource_by_model_name(@reflection.active_record.to_s)
+    ::Avo::App.resources.get_resource_by_model_class(@reflection.active_record.to_s)
   rescue
     nil
   end
 
   def parent_or_child_resource
     return @resource unless link_to_child_resource_is_enabled?
-    return @resource if @resource.model.class.base_class == @resource.model.class
+    return @resource if @resource.record.class.base_class == @resource.record.class
 
-    ::Avo::App.get_resource_by_model_name(@resource.model.class).dup || @resource
+    ::Avo::App.resources.get_resource_by_model_class(@resource.record.class).dup || @resource
   end
 
   def link_to_child_resource_is_enabled?

data/app/components/avo/button_component.rb

@@ -40,7 +40,10 @@ class Avo::ButtonComponent < ViewComponent::Base
   end
 
   def button_classes
-    classes = "button-component inline-flex flex-grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-70 border justify-center active:outline active:outline-1 #{@class}"
+    classes = "button-component inline-flex flex-grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-70 justify-center #{@class}"
+
+    # For non-icon-styled buttons we should not add borders.
+    classes += " border active:outline active:outline-1" unless is_icon?
 
     classes += " rounded" if @rounded.present?
     classes += style_classes
@@ -55,18 +58,26 @@ class Avo::ButtonComponent < ViewComponent::Base
     @is_link
   end
 
+  def is_icon?
+    @style == :icon
+  end
+
+  def is_not_icon?
+    !is_icon?
+  end
+
   def full_content
     result = ""
     icon_classes = @icon_class
     # space out the icon from the text if text is present
-    icon_classes += " mr-1" if content.present?
+    icon_classes += " mr-1" if content.present? && is_not_icon?
     # add the icon height
     icon_classes += icon_size_classes
 
     # Add the icon
     result += helpers.svg(@icon, class: icon_classes) if @icon.present?
 
-    if content.present?
+    if is_not_icon? && content.present?
       result += "<span>#{content}</span>"
     end
 
@@ -102,6 +113,8 @@ class Avo::ButtonComponent < ViewComponent::Base
   private
 
   def vertical_padding_classes
+    return " py-0" if is_icon?
+
     case @size.to_sym
     when :xs
       " py-0"
@@ -119,6 +132,7 @@ class Avo::ButtonComponent < ViewComponent::Base
   end
 
   def horizontal_padding_classes
+    return " px-0" if is_icon?
     return " px-1" if @compact
 
     case @size.to_sym
@@ -154,6 +168,8 @@ class Avo::ButtonComponent < ViewComponent::Base
       " bg-white text-#{@color}-500 border-#{@color}-500 hover:bg-#{@color}-100 active:bg-#{@color}-100 active:border-#{@color}-500 active:outline-#{@color}-500"
     when :text
       " text-#{@color}-500 active:outline-#{@color}-500 hover:bg-gray-100 border-transparent"
+    when :icon
+      " text-#{@color}-600"
     else
       ""
     end
@@ -161,6 +177,7 @@ class Avo::ButtonComponent < ViewComponent::Base
 
   def icon_size_classes
     icon_classes = ""
+    return icon_classes if is_icon?
 
     case @size
     when :xs

data/app/components/avo/empty_state_component.rb

@@ -21,6 +21,6 @@ class Avo::EmptyStateComponent < ViewComponent::Base
   private
 
   def locale_message
-    helpers.t by_association ? 'avo.no_related_item_found' : 'avo.no_item_found'
+    helpers.t by_association ? "avo.no_related_item_found" : "avo.no_item_found"
   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 md:h-14 <% 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">
+  <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">
     <% 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 w-full <% unless full_width? || compact? || stacked? %> md:w-8/12 <% end %>">
+    <div class="self-center <% if full_width? || compact? || stacked? %> w-full <% else %> md:w-8/12 <% end %>">
       <% if on_show? %>
         <% if field.value.blank? and dash_if_blank %>
           —
@@ -24,13 +24,13 @@
           <div class="text-red-600 mt-2 text-sm"><%= record.errors.full_messages_for(field.id).to_sentence %></div>
         <% end %>
         <% if help.present? %>
-          <div class="text-gray-600 mt-2 text-sm"><%= sanitize help %></div>
+          <div class="text-gray-600 mt-2 text-sm"><%== help %></div>
         <% end %>
       <% end %>
     </div>
   </div>
   <% if params[:avo_debug].present? %>
     <!-- Raw value: -->
-    <!-- <%= sanitize field.value.inspect %> -->
+    <!-- <%== field.value.inspect %> -->
   <% end %>
 <% end %>

data/app/components/avo/field_wrapper_component.rb

@@ -19,6 +19,7 @@ class Avo::FieldWrapperComponent < ViewComponent::Base
     full_width: false,
     label: nil, # do we really need it?
     resource: nil,
+    short: false,
     stacked: nil,
     style: "",
     view: :show,
@@ -35,14 +36,14 @@ class Avo::FieldWrapperComponent < ViewComponent::Base
     @full_width = full_width
     @label = label
     @resource = resource
-    @action = field.action
+    @short = short
     @stacked = stacked
     @style = style
     @view = view
   end
 
   def classes(extra_classes = "")
-    "field-wrapper relative flex flex-col grow pb-2 md:pb-0 leading-tight min-h-14 h-full #{stacked? ? "field-wrapper-layout-stacked" : "field-wrapper-layout-inline md:flex-row md:items-center"} #{compact? ? "field-wrapper-size-compact" : "field-wrapper-size-regular"} #{full_width? ? "field-width-full" : "field-width-regular"} #{@classes || ""} #{extra_classes || ""} #{@field.get_html(:classes, view: view, element: :wrapper)}"
+    "field-wrapper relative flex flex-col flex-grow pb-2 md:pb-0 leading-tight min-h-14 #{stacked? ? "field-wrapper-layout-stacked" : "field-wrapper-layout-inline md:flex-row md:items-center"} #{compact? ? "field-wrapper-size-compact" : "field-wrapper-size-regular"} #{full_width? ? "field-width-full" : "field-width-regular"} #{@classes || ""} #{extra_classes || ""} #{@field.get_html(:classes, view: view, element: :wrapper)}"
   end
 
   def style
@@ -62,17 +63,11 @@ class Avo::FieldWrapperComponent < ViewComponent::Base
   end
 
   def help
-    help_value = @help || @field.help
-
-    if help_value.respond_to?(:call)
-      return Avo::Hosts::ResourceViewRecordHost.new(block: help_value, record: record, resource: resource, view: view).handle
-    end
-
-    help_value
+    Avo::ExecutionContext.new(target: @help || @field.help, record: record, resource: resource, view: view).handle
   end
 
   def record
-    resource.present? ? resource.model : nil
+    resource.present? ? resource.record : nil
   end
 
   def data
@@ -84,11 +79,9 @@ class Avo::FieldWrapperComponent < ViewComponent::Base
 
     # Add the built-in stimulus integration data tags.
     if @resource.present?
-      add_stimulus_attributes_for(@resource, attributes)
-    end
-
-    if @action.present?
-      add_stimulus_attributes_for(@action, attributes)
+      @resource.get_stimulus_controllers.split(" ").each do |controller|
+        attributes["#{controller}-target"] = "#{@field.id.to_s.underscore}_#{@field.type.to_s.underscore}_wrapper".camelize(:lower)
+      end
     end
 
     # Fetch the data attributes off the html option
@@ -115,15 +108,11 @@ class Avo::FieldWrapperComponent < ViewComponent::Base
     @compact
   end
 
-  def full_width?
-    @full_width
+  def short?
+    @short
   end
 
-  private
-
-  def add_stimulus_attributes_for(entity, attributes)
-    entity.get_stimulus_controllers.split(" ").each do |controller|
-      attributes["#{controller}-target"] = "#{@field.id.to_s.underscore}_#{@field.type.to_s.underscore}_wrapper".camelize(:lower)
-    end
+  def full_width?
+    @full_width
   end
 end