Merge branch 'avo-hq:main' into main

avo-hq · Nov 26, 2024 · bbf4bd4 · bbf4bd4
2 parents 3bb6d87 + c60e854
commit bbf4bd4
Show file tree

Hide file tree

Showing 133 changed files with 2,163 additions and 1,914 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -107,7 +107,7 @@ GIT
 PATH
   remote: .
   specs:
-    avo (3.13.7)
+    avo (3.14.3)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

diff --git a/README.md b/README.md
@@ -110,7 +110,7 @@ Please read the [RELEASE.MD](./RELEASE.MD)
 </tr>
 </table>
 
-[Become a sponsor ](https://github.com/sponsors/adrianthedev)
+[Become a sponsor](mailto:[email protected])
 
 
 ![Alt](https://repobeats.axiom.co/api/embed/1481a6a259064f02a7936470d12a50802a9c98a4.svg "Repobeats analytics image")
@@ -120,3 +120,10 @@ Please read the [RELEASE.MD](./RELEASE.MD)
 [Get a box of waffles and some of the best app monitoring from Appsignal](https://appsignal.com/r/93dbe69bfb) 🧇
 
 [Get $100 in credits from Digital Ocean](https://www.digitalocean.com/?refcode=efc1fe881d74&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge) 💸
+
+## Other Open Source Work
+
+ - [`active_storage-blurhash`](https://github.com/avo-hq/active_storage-blurhash) - A plug-n-play [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage
+ - [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
+ - [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes.
+ - [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app
diff --git a/app/assets/stylesheets/css/fields/trix.css b/app/assets/stylesheets/css/fields/trix.css
@@ -1,5 +1,14 @@
 @import './../../../../../node_modules/trix/dist/trix.css';
 
+.trix-content.hidden {
+  display: block !important;
+  clip-path: inset(0 0 calc(100% - 50px) 0);
+  -webkit-mask-image: linear-gradient(to bottom, black 30px, transparent 50px);
+  mask-image: linear-gradient(to bottom, black 30px, transparent 50px);
+  max-height: 50px;
+  min-height: 0px;
+}
+
 .trix-content h1 {
   @apply text-xl font-bold mb-2;
 }

diff --git a/app/components/avo/actions_component.rb b/app/components/avo/actions_component.rb
@@ -68,7 +68,7 @@ def icon(icon)
   def render_item(action)
     case action
     when Avo::Divider
-      render_divider(action)
+      render Avo::DividerComponent.new(action.label)
     when Avo::BaseAction
       render_action_link(action)
     when defined?(Avo::Advanced::Resources::Controls::Action) && Avo::Advanced::Resources::Controls::Action
@@ -84,11 +84,6 @@ def render_item(action)
 
   private
 
-  def render_divider(action)
-    label = action.label.is_a?(Hash) ? action.label[:label] : nil
-    render Avo::DividerComponent.new(label)
-  end
-
   def render_action_link(action, icon: nil)
     link_to action.link_arguments(resource: @resource, arguments: action.arguments).first,
       data: action_data_attributes(action),

diff --git a/app/components/avo/button_component.rb b/app/components/avo/button_component.rb
@@ -57,11 +57,9 @@ def is_not_icon?
 
   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? && is_not_icon?
     # add the icon height
-    icon_classes += icon_size_classes
+    icon_classes = class_names(@icon_class, "pointer-events-none", icon_size_classes, "mr-1": content.present? && is_not_icon?)
 
     # Add the icon
     result += helpers.svg(@icon, class: icon_classes) if @icon.present?

diff --git a/app/components/avo/fields/belongs_to_field/edit_component.html.erb b/app/components/avo/fields/belongs_to_field/edit_component.html.erb
@@ -49,10 +49,9 @@
             <% else %>
               <%= @form.select @field.id_input_foreign_key,
               options_for_select(
-                # Options
                 @field.values_for_type(type),
-                # Selected
-                @field.value.is_a?(type) ? @field.value.to_param : nil
+                selected: @field.value.is_a?(type) ? @field.value.to_param : nil,
+                disabled: t("avo.more_records_available")
               ),
               {
                 include_blank: @field.placeholder,
@@ -103,7 +102,7 @@
       %>
     <% else %>
       <%= @form.select @field.id_input_foreign_key,
-        options_for_select(@field.options, @field.value.to_param),
+        options_for_select(@field.options, selected: @field.value.to_param, disabled: t("avo.more_records_available")),
         {
           include_blank: @field.placeholder,
         },

diff --git a/app/components/avo/fields/common/key_value_component.html.erb b/app/components/avo/fields/common/key_value_component.html.erb
@@ -15,7 +15,7 @@
           <%= @field.value_label %>
         </div>
         <% if @view.form? %>
-          <div class="flex items-center justify-center p-2 px-3 border-l border-gray-600">
+          <div class="flex items-center justify-center p-2 px-[48px] border-l border-gray-600">
             <a href="javascript:void(0);"
               title="<%= @field.action_text %>"
               data-tippy="tooltip"

diff --git a/app/components/avo/fields/file_field/edit_component.html.erb b/app/components/avo/fields/file_field/edit_component.html.erb
@@ -6,15 +6,34 @@
   <% end %>
 
   <% if can_upload_file? %>
-    <%= @form.file_field @field.id,
-      accept: @field.accept,
-      data: @field.get_html(:data, view: view, element: :input),
-      direct_upload: @field.direct_upload,
-      disabled: disabled?,
-      style: @field.get_html(:style, view: view, element: :input),
-      autofocus: @autofocus,
-      class: "w-full"
-    %>
+    <div data-controller="clear-input">
+      <div class="mt-2 flex items-center">
+        <%= @form.file_field @field.id,
+          accept: @field.accept,
+          data: @field.get_html(:data, view: view, element: :input)
+            .merge(
+              action: "change->clear-input#showClearButton",
+              clear_input_target: "input"
+            ),
+          direct_upload: @field.direct_upload,
+          disabled: disabled?,
+          style: @field.get_html(:style, view: view, element: :input),
+          autofocus: @autofocus,
+          class: "w-full"
+        %>
+      </div>
+      <%= content_tag :button,
+          class: "self-center hidden font-semibold text-xs text-red-600 p-1",
+          id: :reset,
+          type: :button,
+          data: {
+            clear_input_target: "clearButton",
+            action: "click->clear-input#clearInput",
+            tippy: :tooltip
+          } do %>
+        <% t("avo.clear_value") %>
+      <% end %>
+    </div>
   <% else %>
     —
   <% end %>

diff --git a/app/components/avo/fields/files_field/edit_component.html.erb b/app/components/avo/fields/files_field/edit_component.html.erb
@@ -2,17 +2,33 @@
   <%= render Avo::Fields::Common::Files::ListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
 
   <% if can_upload_file? %>
-    <div class="mt-2">
-      <%= @form.file_field @field.id,
-        accept: @field.accept,
-        data: @field.get_html(:data, view: view, element: :input),
-        direct_upload: @field.direct_upload,
-        disabled: disabled?,
-        multiple: true,
-        style: @field.get_html(:style, view: view, element: :input),
-        class: "w-full",
-        autofocus: @autofocus
-      %>
+    <div data-controller="clear-input">
+      <div class="mt-2 flex items-center">
+        <%= @form.file_field @field.id,
+          accept: @field.accept,
+          data: @field.get_html(:data, view: view, element: :input)
+            .merge(
+              action: "change->clear-input#showClearButton",
+              clear_input_target: "input"
+            ),
+          direct_upload: @field.direct_upload,
+          disabled: disabled?,
+          multiple: true,
+          style: @field.get_html(:style, view: view, element: :input),
+          autofocus: @autofocus
+        %>
+      </div>
+      <%= content_tag :button,
+          class: "self-center hidden font-semibold text-xs text-red-600 p-1",
+          id: :reset,
+          type: :button,
+          data: {
+            clear_input_target: "clearButton",
+            action: "click->clear-input#clearInput",
+            tippy: :tooltip
+          } do %>
+        <% t("avo.clear_value") %>
+      <% end %>
     </div>
   <% else %>
     —

diff --git a/app/components/avo/fields/radio_field/edit_component.html.erb b/app/components/avo/fields/radio_field/edit_component.html.erb
@@ -0,0 +1,10 @@
+<%= field_wrapper **field_wrapper_args do %>
+  <div class="flex flex-col gap-2">
+    <% @field.options.each do |key, value| %>
+      <div>
+        <%= form.radio_button @field.id, key %>
+        <%= form.label @field.id, value: value %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/components/avo/fields/radio_field/edit_component.rb b/app/components/avo/fields/radio_field/edit_component.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::RadioField::EditComponent < Avo::Fields::EditComponent
+end
diff --git a/app/components/avo/fields/radio_field/index_component.html.erb b/app/components/avo/fields/radio_field/index_component.html.erb
@@ -0,0 +1,3 @@
+<%= index_field_wrapper **field_wrapper_args do %>
+  <%== @field.value %>
+<% end %>
diff --git a/app/components/avo/fields/radio_field/index_component.rb b/app/components/avo/fields/radio_field/index_component.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::RadioField::IndexComponent < Avo::Fields::IndexComponent
+end
diff --git a/app/components/avo/fields/radio_field/show_component.html.erb b/app/components/avo/fields/radio_field/show_component.html.erb
@@ -0,0 +1,3 @@
+<%= field_wrapper **field_wrapper_args do %>
+  <%== @field.value %>
+<% end %>
diff --git a/app/components/avo/fields/radio_field/show_component.rb b/app/components/avo/fields/radio_field/show_component.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::RadioField::ShowComponent < Avo::Fields::ShowComponent
+end
diff --git a/app/components/avo/fields/trix_field/show_component.html.erb b/app/components/avo/fields/trix_field/show_component.html.erb
@@ -2,13 +2,19 @@
   <%
     content_classes = 'trix-content py-2 max-w-4xl'
     content_classes << ' hidden' unless @field.always_show
+    button_classes = 'font-bold inline-block pt-3'
   %>
-  <div data-controller="hidden-input">
-    <% unless @field.always_show %>
-      <%= link_to t('avo.show_content'), 'javascript:void(0);', class: 'font-bold inline-block', data: { action: 'click->hidden-input#showContent' } %>
-    <% end %>
-    <div class="<%= content_classes %> " data-hidden-input-target="content">
+  <div data-controller="trix-body">
+    <div class="<%= content_classes %>" data-trix-body-target="content">
       <%= sanitize @field.value.to_s %>
     </div>
+    <% unless @field.always_show %>
+      <div class="hidden" data-trix-body-target="moreContentButton">
+        <%= link_to t('avo.more_content'), 'javascript:void(0);', class: button_classes, data: { action: 'click->trix-body#toggleContent' } %>
+      </div>
+      <div class="hidden" data-trix-body-target="lessContentButton">
+        <%= link_to t('avo.less_content'), 'javascript:void(0);', class: button_classes, data: { action: 'click->trix-body#toggleContent' } %>
+      </div>
+    <% end %>
   </div>
 <% end %>
diff --git a/app/components/avo/index/table_row_component.html.erb b/app/components/avo/index/table_row_component.html.erb
@@ -1,6 +1,7 @@
 <%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21%>
 
 <%= content_tag :tr,
+  id: "#{self.class.to_s.underscore}_#{@resource.record.to_param}",
   class: class_names("bg-white hover:bg-gray-50 hover:shadow-row z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
   data: {
     component_name: self.class.to_s.underscore,

diff --git a/app/components/avo/modal_component.html.erb b/app/components/avo/modal_component.html.erb
@@ -1,8 +1,9 @@
 <div class="modal-container fixed inset-0 w-full min-h-screen z-[100] flex justify-center items-center"
   data-controller="modal"
   data-modal-target="modal"
+  data-modal-close-modal-on-backdrop-click-value="<%= close_modal_on_backdrop_click %>"
 >
-  <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-action="click->modal#close"></div>
+  <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-modal-target="backdrop" data-action="click->modal#close" ></div>
   <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-lg inset-auto bg-white flex z-50 relative shadow-modal <%= overflow_classes %> <%= width_classes %> <%= height_classes %>">
     <div class="flex-1 flex flex-col justify-between">
       <div>
@@ -25,4 +26,3 @@
     </div>
   </div>
 </div>
-
diff --git a/app/components/avo/modal_component.rb b/app/components/avo/modal_component.rb
@@ -7,6 +7,7 @@ class Avo::ModalComponent < Avo::BaseComponent
   prop :width, default: :md
   prop :body_class
   prop :overflow, default: :auto
+  prop :close_modal_on_backdrop_click, default: true, reader: :public
 
   def width_classes
     case @width.to_sym

diff --git a/app/components/avo/panel_component.html.erb b/app/components/avo/panel_component.html.erb
@@ -6,11 +6,7 @@
       <div class="flex justify-center sm:justify-start flex-col sm:flex-row w-full flex-1 has-cover-photo:mt-0">
         <%= render Avo::ProfilePhotoComponent.new profile_photo: @profile_photo %>
         <div class="flex flex-col flex-1 w-full">
-          <% if display_breadcrumbs? %>
-            <div class="breadcrumbs text-center sm:text-left mb-2">
-              <%= helpers.render_avo_breadcrumbs(separator: helpers.svg("chevron-right", class: "inline-block h-3 stroke-current relative top-[-1px] ml-1")) if Avo.configuration.display_breadcrumbs %>
-            </div>
-          <% end %>
+          <%= render partial: "avo/partials/panel_breadcrumbs" if display_breadcrumbs? %>
           <div class="flex-1 flex flex-col xl:flex-row justify-between gap-1 grow-0">
             <div class="overflow-hidden flex flex-col">
               <% if name_slot? %>

diff --git a/app/components/avo/sidebar_component.html.erb b/app/components/avo/sidebar_component.html.erb
@@ -1,7 +1,12 @@
-<div
-  class="avo-sidebar fixed z-[60] t-0 application-sidebar w-64 flex-1 border-r lg:border-none bg-none h-[calc(100dvh-4rem)] bg-application lg:bg-transparent <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %> <%= 'hidden' unless @sidebar_open %>"
-  data-sidebar-target="<%= stimulus_target %>"
->
+<%= content_tag :div,
+  class: class_names(
+    "avo-sidebar fixed z-[60] t-0 application-sidebar w-64 flex-1 border-r lg:border-none bg-none xh-dvh h-[calc(100dvh-4rem)] bg-application lg:bg-transparent",
+    "print:hidden": Avo.configuration.hide_layout_when_printing,
+    "hidden": !@sidebar_open,
+  ),
+  data: {
+    sidebar_target: stimulus_target
+  } do %>
   <div class="flex flex-col w-full h-full">
     <div class="flex-1 flex flex-col justify-between overflow-auto h-full pt-3 mac-styled-scrollbar">
       <div class="space-y-6 mb-4">
@@ -61,4 +66,4 @@
     <% end %>
     <%= render Avo::SidebarProfileComponent.new user: helpers._current_user %>
   </div>
-</div>
+<% end %>
diff --git a/app/components/avo/sidebar_profile_component.html.erb b/app/components/avo/sidebar_profile_component.html.erb
@@ -21,14 +21,14 @@
       <%= helpers.svg "avo/three-dots", class: 'h-4' %>
     </a>
     <div
-      class="hidden absolute flex flex-col inset-auto right-0 -mt-12 bg-white rounded min-w-[200px] shadow-context -translate-y-full z-40"
+      class="hidden absolute flex flex-col inset-auto right-0 -mt-28 bg-white rounded min-w-[200px] shadow-context z-40"
       data-toggle-target="panel"
-      data-transition-enter="transition ease-out duration-100"
-      data-transition-enter-start="transform opacity-0 translate-y-1"
+      data-transition-enter="transition ease-in-out duration-100"
+      data-transition-enter-start="transform opacity-0 translate-y-3"
       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"
+      data-transition-leave-end="transform opacity-0 translate-y-3"
     >
       <% if Avo.plugin_manager.installed?(:avo_menu) && Avo.has_profile_menu? %>
         <div class="text-black space-y-4">
@@ -40,9 +40,9 @@
         </div>
       <% end %>
       <%= render "avo/partials/profile_menu_extra" %>
-      <% if can_destroy_user? %>
-        <%= form_with url: helpers.main_app.send(destroy_user_session_path),
-          method: :delete,
+      <% if can_sign_out_user? %>
+        <%= form_with url: helpers.main_app.send(sign_out_path),
+          method: sign_out_method,
           data: {
             controller: :"sign-out",
             sign_out_confirm_value: t('avo.are_you_sure'),
@@ -53,7 +53,7 @@
           <%= helpers.svg "avo/logout", class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
           <% end %>
         <% end %>
-    <% end %>
+      <% end %>
     </div>
   </div>
 </div>