Merge branch 'main' into fix-active-storage-attachments-uniqueness-vi…

…olation
avo-hq · Nov 4, 2024 · 56738c6 · 56738c6
2 parents e96efd6 + 54c7ca2
commit 56738c6
Show file tree

Hide file tree

Showing 88 changed files with 1,698 additions and 1,853 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -107,7 +107,7 @@ GIT
 PATH
   remote: .
   specs:
-    avo (3.13.6)
+    avo (3.13.7)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)
@@ -508,7 +508,7 @@ GEM
       railties (>= 5.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.7)
+    rexml (3.3.9)
     ripper-tags (1.0.2)
     rspec-core (3.13.1)
       rspec-support (~> 3.13.0)
@@ -643,7 +643,7 @@ GEM
     unicode-display_width (2.6.0)
     uri (0.13.1)
     useragent (0.16.10)
-    view_component (3.15.1)
+    view_component (3.17.0)
       activesupport (>= 5.2.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)

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/components/avo/actions_component.rb b/app/components/avo/actions_component.rb
@@ -34,6 +34,13 @@ class Avo::ActionsComponent < Avo::BaseComponent
 
   def after_initialize
     filter_actions unless @custom_list
+
+    # Hydrate each action action with the record when rendering a list on row controls
+    if @as_row_control
+      @actions.each do |action|
+        action.hydrate(resource: @resource, record: @resource.record) if action.respond_to?(:hydrate)
+      end
+    end
   end
 
   def render?
@@ -52,23 +59,8 @@ def filter_actions
     end
   end
 
-  # How should the action be displayed by default
-  def is_disabled?(action)
-    return false if action.standalone || @as_row_control
-
-    on_index_page?
-  end
-
   private
 
-  def on_record_page?
-    @view.in?(["show", "edit", "new"])
-  end
-
-  def on_index_page?
-    !on_record_page?
-  end
-
   def icon(icon)
     svg icon, class: "h-5 shrink-0 mr-1 inline pointer-events-none"
   end
@@ -112,15 +104,17 @@ def action_data_attributes(action)
       "turbo-frame": Avo::MODAL_FRAME_ID,
       action: "click->actions-picker#visitAction",
       "actions-picker-target": action.standalone ? "standaloneAction" : "resourceAction",
-      disabled: is_disabled?(action),
+      disabled: action.disabled?,
       turbo_prefetch: false,
+      enabled_classes: "text-black",
+      disabled_classes: "text-gray-500"
     }
   end
 
   def action_css_class(action)
     helpers.class_names("flex items-center px-4 py-3 w-full font-semibold text-sm hover:bg-primary-100", {
-      "text-gray-500": is_disabled?(action),
-      "text-black": !is_disabled?(action),
+      "text-gray-500": action.disabled?,
+      "text-black": action.enabled?,
     })
   end
 end
diff --git a/app/components/avo/fields/common/boolean_check_component.html.erb b/app/components/avo/fields/common/boolean_check_component.html.erb
@@ -1 +1 @@
-<%= helpers.svg "#{@icon}.svg", class: @classes %>
+<%= helpers.svg "#{@icon}.svg", class: classes %>
diff --git a/app/components/avo/fields/common/boolean_check_component.rb b/app/components/avo/fields/common/boolean_check_component.rb
@@ -2,10 +2,17 @@
 
 class Avo::Fields::Common::BooleanCheckComponent < Avo::BaseComponent
   prop :checked, default: false
+  prop :size, default: :md
   prop :icon do |value|
     @checked ? "heroicons/outline/check-circle" : "heroicons/outline/x-circle"
   end
-  prop :classes do |value|
-    "h-6 #{@checked ? "text-green-600" : "text-red-500"}"
+
+  def classes
+    helpers.class_names({
+      "h-5": @size == :sm,
+      "h-6": @size == :md,
+      "text-green-600": @checked,
+      "text-red-600": !@checked,
+    })
   end
 end
diff --git a/app/components/avo/fields/common/boolean_group_component.html.erb b/app/components/avo/fields/common/boolean_group_component.html.erb
@@ -1,11 +1,11 @@
 <div data-controller="tippy">
   <%= link_to t("avo.view").humanize, "javascript:void(0);", data: {"tippy-target": :source} %>
   <div class="hidden" data-tippy-target="content">
-    <div class="p-2 space-y-2">
+    <div class="p-1 space-y-1">
       <% @options.each do |id, label| %>
-        <div class="flex flex-nowrap">
-          <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @value.present? && @value&.with_indifferent_access[id].present? %>
-          <div class="ml-px text-left py-px"><%= label %></div>
+        <div class="flex items-center flex-nowrap space-x-1">
+          <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: checked(id), size: :sm %>
+          <div class="flex itdems-center text-left text-sm py-px"><%= label %></div>
         </div>
       <% end %>
     </div>

diff --git a/app/components/avo/fields/common/boolean_group_component.rb b/app/components/avo/fields/common/boolean_group_component.rb
@@ -3,4 +3,8 @@
 class Avo::Fields::Common::BooleanGroupComponent < Avo::BaseComponent
   prop :options, default: {}.freeze
   prop :value
+
+  def checked(id)
+    @value.present? && @value.with_indifferent_access[id].present?
+  end
 end
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/password_field/edit_component.html.erb b/app/components/avo/fields/password_field/edit_component.html.erb
@@ -1,12 +1,24 @@
 <%= field_wrapper **field_wrapper_args do %>
-  <%= @form.password_field @field.id,
-    value: @field.value,
-    class: classes("w-full"),
-    data: @field.get_html(:data, view: view, element: :input),
-    disabled: disabled?,
-    placeholder: @field.placeholder,
-    style: @field.get_html(:style, view: view, element: :input),
-    autocomplete: @field.autocomplete,
-    autofocus: @autofocus
+  <div class="relative" data-controller="<%= @field.revealable ? 'password-visibility' : nil %>">
+    <%= @form.password_field @field.id,
+      value: @field.value,
+      class: classes("w-full"),
+      data: @field.get_html(:data, view: view, element: :input).merge(password_visibility_target: "input"),
+      disabled: disabled?,
+      placeholder: @field.placeholder,
+      style: @field.get_html(:style, view: view, element: :input),
+      autocomplete: @field.autocomplete,
+      autofocus: @autofocus
     %>
+
+    <% if @field.revealable %>
+      <button data-action="password-visibility#toggle" type="button" class="text-gray-500 absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
+        <!-- Heroicon name: outline/eye -->
+        <%= helpers.svg('heroicons/outline/eye', class: "size-6", data: { 'password-visibility-target': 'icon' }) %>
+
+        <!-- Heroicon name: outline/eye-off -->
+        <%= helpers.svg('heroicons/outline/eye-off', class: "size-6 hidden", data: { 'password-visibility-target': 'icon' }) %>
+      </button>
+    <% end %>
+  </div>
 <% end %>
diff --git a/app/components/avo/fields/trix_field/edit_component.rb b/app/components/avo/fields/trix_field/edit_component.rb
@@ -29,6 +29,9 @@ def data_values
       hide_attachment_filesize: @field.hide_attachment_filesize,
       hide_attachment_url: @field.hide_attachment_url,
       is_action_text: @field.is_action_text?,
+      upload_warning: t("avo.you_cant_upload_new_resource"),
+      attachment_disable_warning: t("avo.this_field_has_attachments_disabled"),
+      attachment_key_warning: t("avo.you_havent_set_attachment_key")
     }.transform_keys { |key| "trix_field_#{key}_value" }
   end
 end
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/resource_component.rb b/app/components/avo/resource_component.rb
@@ -282,10 +282,14 @@ def render_action(action)
       title: action.title,
       size: action.size,
       data: {
+        controller: "actions-picker",
         turbo_frame: Avo::MODAL_FRAME_ID,
         action_name: action.action.action_name,
         tippy: action.title ? :tooltip : nil,
         action: "click->actions-picker#visitAction",
+        turbo_prefetch: false,
+        "actions-picker-target": action.action.standalone ? "standaloneAction" : "resourceAction",
+        disabled: action.action.disabled?
       } do
       action.label
     end

diff --git a/app/components/avo/sidebar_component.html.erb b/app/components/avo/sidebar_component.html.erb
@@ -1,5 +1,5 @@
 <div
-  class="avo-sidebar fixed z-[60] t-0 application-sidebar w-64 flex-1 border-r lg:border-none bg-none h-[calc(100vh-4rem)] bg-application lg:bg-transparent <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %> <%= 'hidden' unless @sidebar_open %>"
+  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 %>"
 >
   <div class="flex flex-col w-full h-full">