avo 2.7.1.pre.1 → 2.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be031348e104fd95df6fc2b48c4bde687e9379a12c9438c80c70bdef65b55f8c
-  data.tar.gz: 214eb0d01d253460066c3a78ec8b36fa7e9d784bf7f980a233c38252d5a1b575
+  metadata.gz: '083a689ccb76278fae699dd89eb21f5cf1dc86a306e2d25c1015a9297eb6f171'
+  data.tar.gz: ba27d9448b88241853e50a260764f70e232b566352b959c1b8265c5d547d3fea
 SHA512:
-  metadata.gz: 21bf5ac37c7577fccc0911d26d0d6c2f4db704b1c0180e6ee29d12e69f5f5e7b24f4a871848c21886448e85f3dd726f5c4669d792fa049223d12c4ac096de86c
-  data.tar.gz: c87b060ed691b131a4c0db29caf96b3be1f60a8d45d2b8c2fb66906c6d04d5a369e81dadbbc30caf5f80ec431f34ae2378150d68e7a0757028f19a0b66deb2cb
+  metadata.gz: 8cd68a6ab28242fcd7db9706e58e0ce49575acd055bdddf4be7231092301b46a218ac492b6634b041b8e181ddfc3871e968b280188025d1d05ba715e5c8d94bb
+  data.tar.gz: 5aff67676e320a05f76c5403124470f6c2ab027dc16853c74eeb991a26d22f8259014e26aae581e9ac6b39f7ed8837379359ae525560632039728148e7a14857

data/Gemfile

@@ -152,3 +152,5 @@ gem 'acts_as_list'
 gem 'acts-as-taggable-on', '~> 9.0'
 
 gem "bundler-integrity", "~> 1.0"
+
+gem 'erb-formatter'

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (2.7.1.pre.1)
+    avo (2.8.0)
       active_link_to
       addressable
       breadcrumbs_on_rails
@@ -167,6 +167,7 @@ GEM
       dotenv (= 2.7.6)
       railties (>= 3.2)
     dry-initializer (3.1.1)
+    erb-formatter (0.3.0)
     erubi (1.10.0)
     factory_bot (6.2.0)
       activesupport (>= 5.0.0)
@@ -210,7 +211,7 @@ GEM
     io-wait (0.2.1)
     iso (0.4.0)
       i18n
-    jmespath (1.5.0)
+    jmespath (1.6.1)
     jsbundling-rails (1.0.0)
       railties (>= 6.0.0)
     launchy (2.5.0)
@@ -251,8 +252,6 @@ GEM
     nokogiri (1.13.4)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.4-x86_64-linux)
-      racc (~> 1.4)
     orm_adapter (0.5.0)
     pagy (5.10.1)
       activesupport
@@ -266,7 +265,7 @@ GEM
     pundit (2.2.0)
       activesupport (>= 3.0.0)
     racc (1.6.0)
-    rack (2.2.3)
+    rack (2.2.3.1)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (6.1.4.6)
@@ -443,6 +442,7 @@ DEPENDENCIES
   database_cleaner
   devise
   dotenv-rails
+  erb-formatter
   factory_bot_rails
   faker
   friendly_id (~> 5.4.0)

data/app/components/avo/alert_component.rb

@@ -21,6 +21,8 @@ class Avo::AlertComponent < ViewComponent::Base
   end
 
   def classes
+    return "hidden" if is_empty?
+
     result = "max-w-lg w-full shadow-lg rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
 
     result += if is_error?
@@ -51,4 +53,8 @@ class Avo::AlertComponent < ViewComponent::Base
   def is_warning?
     type.to_sym == :warning
   end
+
+  def is_empty?
+    message.nil?
+  end
 end

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

@@ -11,8 +11,8 @@
             <%= @card.label %>
           </div>
         <div data-controller="select">
-          <% if @card.type == :metric && @card.parsed_ranges.present? %>
-            <%= select_tag "#{@card.id}_#{@card.index}_range", options_for_select(@card.parsed_ranges, @card.range),
+          <% if @card.type.in?([:metric, :chartkick, :partial]) && @card.ranges.present? %>
+            <%= select_tag "#{@card.id}_#{@card.index}_range", options_for_select(@card.ranges, @card.range),
               class: 'appearance-none inline-flex bg-blue-gray-100 disabled:bg-blue-gray-300 disabled:cursor-not-allowed focus:bg-white text-sm text-blue-gray-700 disabled:text-blue-gray-700 leading-none rounded-md py-px px-2 leading-tight border outline-none outline w-24',
               data: {
                 target: 'select',

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

@@ -1,5 +1,12 @@
-<div class="flex flex-col md:flex-row md:items-center pb-2 md:pb-0 leading-tight <%= @classes %> min-h-14" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
-  <div class="pt-4 md:pt-0 md:h-14 flex self-start items-center text-slate-800">
+<%= content_tag :div,
+  class: classes("relative flex flex-col md:flex-row md:items-center pb-2 md:pb-0 leading-tight min-h-14"),
+  style: style,
+  data: {
+    field_id: @field.id,
+    field_type: @field.type,
+    **stimulus_attributes,
+  } do %>
+  <div class="h-full pt-4 md:pt-0 md:h-14 flex self-start items-center text-slate-800">
     <div class="<% if @displayed_in_modal %> md:w-48 <% else %> md:w-64 px-6 md:px-6 <% end %> w-48 flex uppercase font-semibold text-gray-500 text-sm" data-slot="label">
       <% if @form.present? %>
         <%= @form.label @field.id, label %>
@@ -12,4 +19,4 @@
   <div class="flex-1 flex flex-row md:min-h-inherit py-2 <% unless @displayed_in_modal %> px-6 <% end %>">
     <%= content %>
   </div>
-</div>
+<% end %>

data/app/components/avo/common_field_wrapper_component.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 class Avo::CommonFieldWrapperComponent < ViewComponent::Base
-  def initialize(field: nil, dash_if_blank: true, full_width: false, displayed_in_modal: false, form: nil, resource: {}, label: nil, **args)
+  attr_reader :view
+
+  def initialize(field: nil, dash_if_blank: true, full_width: false, displayed_in_modal: false, form: nil, resource: nil, label: nil, view: nil, **args)
     @field = field
     @dash_if_blank = dash_if_blank
     @classes = args[:class].present? ? args[:class] : ""
@@ -12,9 +14,33 @@ class Avo::CommonFieldWrapperComponent < ViewComponent::Base
     @model = resource.present? ? resource.model : nil
     @full_width = full_width
     @label = label
+    @view = view
+  end
+
+  def classes(extra_classes = "")
+    "#{@classes || ""} #{extra_classes || ""} #{@field.get_html(:classes, view: view, element: :wrapper)}"
+  end
+
+  def style
+    @field.get_html(:style, view: view, element: :wrapper)
   end
 
   def label
     @label || @field.name
   end
+
+  def stimulus_attributes
+    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
+
+    wrapper_data_attributes = @field.get_html :data, view: view, element: :wrapper
+    if wrapper_data_attributes.present?
+      attributes.merge! wrapper_data_attributes
+    end
+
+    attributes
+  end
 end

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

@@ -1,4 +1,4 @@
-<%= render Avo::CommonFieldWrapperComponent.new(field: @field, resource: @resource, index: @index, form: @form, displayed_in_modal: @displayed_in_modal, label: @label) do %>
+<%= render Avo::CommonFieldWrapperComponent.new(field: @field, resource: @resource, index: @index, form: @form, displayed_in_modal: @displayed_in_modal, label: @label, view: @resource.view, class: @classes) do %>
   <div class="self-center <% if @displayed_in_modal or @full_width %> w-full <% else %> w-full md:w-8/12 <% end %>" data-slot="value">
     <%= content %>
     <% if @model.present? and @model.errors.include? @field.id %>

data/app/components/avo/fields/badge_field/index_component.html.erb

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field, flush: true do %>
+<%= index_field_wrapper field: @field, resource: @resource, flush: true do %>
   <%= render Avo::Fields::Common::BadgeViewerComponent.new value: @field.value, options: @field.options %>
 <% end %>

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

@@ -1,3 +1,3 @@
-<%= show_field_wrapper field: @field, index: @index do %>
+<%= show_field_wrapper field: @field, resource: @resource, index: @index do %>
   <%= render Avo::Fields::Common::BadgeViewerComponent.new value: @field.value, options: @field.options %>
 <% end %>

data/app/components/avo/fields/belongs_to_field/autocomplete_component.html.erb

@@ -13,24 +13,35 @@
   ></div>
   <div class="relative w-full" autocomplete="off">
     <%= @form.text_field @foreign_key,
-      type: :text,
-      value: field_label,
-      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
-      placeholder: @field.placeholder,
-      'data-search-target': 'button clearValue',
+      class: classes,
       # This instructs the search_controller if it should enable/disabled this field when the user switches polymorphic associations
       # It should not enable the field if the record is being created through an association
-      'data-should-be-disabled': @disabled,
-      disabled: true %>
+      data: {
+        'search-target': 'button clearValue',
+        'should-be-disabled': @disabled,
+        **@field.get_html(:data, view: view, element: :input)
+      },
+      disabled: true,
+      placeholder: @field.placeholder,
+      style: @field.get_html(:style, view: view, element: :input),
+      type: :text,
+      value: field_label %>
     <% unless @disabled %>
-      <div class="absolute top-1/2 left-auto right-3 mr-px -mt-2 cursor-pointer hidden text-gray-500"
+      <button class="absolute top-1/2 left-auto right-3 mr-px -mt-2 cursor-pointer hidden text-gray-500"
+        type="button"
         data-tippy="tooltip"
         data-search-target="clearButton"
         title="<%= I18n.translate 'avo.clear_value' %>"
         data-action="click->search#clearValue"
         ><%= helpers.svg 'x', class: 'h-4' %>
-      </div>
+      </button>
     <% end %>
   </div>
-  <%= @form.hidden_field @foreign_key, value: field_value, 'data-search-target': 'hiddenId clearValue' %>
+  <%= @form.hidden_field @foreign_key,
+    value: field_value,
+    data: {
+      'search-target': 'hiddenId clearValue',
+      **@field.get_html(:data, view: view, element: :input)
+    }
+  %>
 </div>

data/app/components/avo/fields/belongs_to_field/autocomplete_component.rb

@@ -1,14 +1,20 @@
 # frozen_string_literal: true
 
 class Avo::Fields::BelongsToField::AutocompleteComponent < ViewComponent::Base
-  def initialize(form:, field:, model_key:, foreign_key:, disabled: false, type: nil, resource: nil, polymorphic_record: nil)
+  attr_reader :classes
+  attr_reader :view
+
+  def initialize(form:, field:, model_key:, foreign_key:, disabled: false, type: nil, resource: nil, polymorphic_record: nil, view: nil, style: nil, classes: nil)
     @form = form
     @field = field
     @type = type
+    @view = view
     @model_key = model_key
     @foreign_key = foreign_key
     @resource = resource
     @disabled = disabled
+    @style = style
+    @classes = classes
     @polymorphic_record = polymorphic_record
   end
 

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

@@ -19,10 +19,13 @@
         include_blank: @field.placeholder,
       },
       {
-        class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
-        disabled: disabled,
-        'data-belongs-to-field-target': "select",
-        'data-action': 'change->belongs-to-field#changeType'
+        class: classes("w-full"),
+        data: {
+          **@field.get_html(:data, view: view, element: :input),
+          action: "change->belongs-to-field#changeType #{field_html_action}",
+          'belongs-to-field-target': "select",
+        },
+        disabled: disabled
       }
     %>
       <%
@@ -40,13 +43,16 @@
         <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal, label: type.to_s.underscore.humanize do %>
           <% if @field.searchable %>
             <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form,
-            field: @field,
-            type: type,
-            model_key: model_keys[type.to_s],
-            foreign_key: @field.id_input_foreign_key,
-            resource: @resource,
-            disabled: disabled,
-            polymorphic_record: polymorphic_record
+              disabled: disabled,
+              field: @field,
+              foreign_key: @field.id_input_foreign_key,
+              model_key: model_keys[type.to_s],
+              polymorphic_record: polymorphic_record,
+              resource: @resource,
+              style: @field.get_html(:style, view: view, element: :input),
+              type: type,
+              classes: classes("w-full"),
+              view: @resource.view
           %>
           <% else %>
             <%= @form.select @field.id_input_foreign_key,
@@ -56,7 +62,8 @@
               include_blank: @field.placeholder,
             },
             {
-              class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+              class: classes("w-full"),
+              data: @field.get_html(:data, view: view, element: :input),
               disabled: disabled
             }
           %>
@@ -79,7 +86,10 @@
         model_key: @field.target_resource&.model_key,
         foreign_key: @field.id_input_foreign_key,
         resource: @resource,
-        disabled: disabled
+        disabled: disabled,
+        classes: classes("w-full"),
+        view: @resource.view,
+        style: @field.get_html(:style, view: view, element: :input)
       %>
     <% else %>
       <%= @form.select @field.id_input_foreign_key, @field.options,
@@ -88,8 +98,10 @@
           value: @field.value
         },
         {
-          class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
-          disabled: disabled
+          class: classes("w-full"),
+          data: @field.get_html(:data, view: view, element: :input),
+          disabled: disabled,
+          style: @field.get_html(:style, view: view, element: :input)
         }
       %>
       <%

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

@@ -48,4 +48,8 @@ class Avo::Fields::BelongsToField::EditComponent < Avo::Fields::EditComponent
 
     @polymorphic_record
   end
+
+  def field_html_action
+    @field.get_html(:data, view: @resource.view, element: :input)
+  end
 end

data/app/components/avo/fields/belongs_to_field/index_component.html.erb

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, resource: @resource do %>
   <%= link_to @field.label, helpers.resource_path(model: @field.value, resource: @field.target_resource) %>
 <% end %>

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

@@ -1,3 +1,3 @@
-<%= show_field_wrapper field: @field, index: @index do %>
+<%= show_field_wrapper field: @field, resource: @resource, index: @index do %>
   <%= link_to @field.label, helpers.resource_path(model: @field.value, resource: @field.target_resource, via_resource_class: @resource.model_class, via_resource_id: @resource.model.id) %>
 <% end %>

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

@@ -1,9 +1,11 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, dash_if_blank: false, displayed_in_modal: @displayed_in_modal do %>
   <div class="h-8 flex items-center">
     <%= @form.check_box @field.id,
-      class: 'text-lg h-4 w-4',
+      checked: @field.value,
+      class: "text-lg h-4 w-4 #{@field.get_html(:classes, view: view, element: :input)}",
+      data: @field.get_html(:data, view: view, element: :input),
       disabled: @field.readonly,
-      checked: @field.value
+      style: @field.get_html(:style, view: view, element: :input)
     %>
   </div>
 <% end %>

data/app/components/avo/fields/boolean_field/index_component.html.erb

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field, dash_if_blank: false, center_content: true, flush: true do %>
+<%= index_field_wrapper field: @field, resource: @resource, dash_if_blank: false, center_content: true, flush: true do %>
   <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
 <% end %>

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

@@ -1,3 +1,3 @@
-<%= show_field_wrapper field: @field, index: @index, dash_if_blank: false do %>
+<%= show_field_wrapper field: @field, resource: @resource, index: @index, dash_if_blank: false do %>
   <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
 <% end %>

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

@@ -17,7 +17,13 @@
           end
         %>
         <label class="block">
-          <%= check_box_tag "#{model_param_key}[#{@field.id}][]", id, checked, { class: "w-4 h-4", disabled: @field.readonly, id: "#{model_param_key}_#{@field.id}_#{id}" } %> <%= label %>
+          <%= check_box_tag "#{model_param_key}[#{@field.id}][]", id, checked, {
+              class: "w-4 h-4 #{@field.get_html(:classes, view: view, element: :input)}",
+              data: @field.get_html(:data, view: view, element: :input),
+              disabled: @field.readonly,
+              id: "#{model_param_key}_#{@field.id}_#{id}",
+              style: @field.get_html(:style, view: view, element: :input)
+            } %> <%= label %>
         </label>
       <% end %>
     </div>

data/app/components/avo/fields/boolean_group_field/index_component.html.erb

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field, dash_if_blank: false do %>
+<%= index_field_wrapper field: @field, resource: @resource, dash_if_blank: false do %>
   <%= render Avo::Fields::Common::BooleanGroupComponent.new options: @field.options, value: @field.value %>
 <% end %>

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

@@ -1,3 +1,3 @@
-<%= show_field_wrapper field: @field, index: @index, dash_if_blank: false do %>
+<%= show_field_wrapper field: @field, resource: @resource, index: @index, dash_if_blank: false do %>
   <%= render Avo::Fields::Common::BooleanGroupComponent.new options: @field.options, value: @field.value %>
 <% end %>

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

@@ -1,19 +1,21 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal, full_width: true do %>
   <div data-controller="code-field">
     <%= @form.text_area @field.id,
-      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
-      placeholder: @field.placeholder,
-      disabled: @field.readonly,
+      class: classes("w-full"),
       data: {
         'code-field-target': 'element',
-        view: :edit,
+        view: @resource.view,
         language: @field.language,
         theme: @field.theme,
         'tab-size': @field.tab_size,
         'read-only': @field.readonly,
         'indent-with-tabs': @field.indent_with_tabs,
         'line-wrapping': @field.line_wrapping,
-      }
+        **@field.get_html(:data, view: view, element: :input),
+      },
+      disabled: @field.readonly,
+      placeholder: @field.placeholder,
+      style: @field.get_html(:style, view: view, element: :input)
     %>
   </div>
 <% end %>

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

@@ -1,4 +1,4 @@
-<%= show_field_wrapper field: @field, index: @index, full_width: true do %>
+<%= show_field_wrapper field: @field, resource: @resource, index: @index, full_width: true do %>
   <div data-controller="code-field" style="--height: <%= @field.height %>">
     <%= text_area_tag @field.id, @field.value,
       class: helpers.input_classes('w-full'),
@@ -6,7 +6,7 @@
       disabled: true,
       data: {
         'code-field-target': 'element',
-        view: :edit,
+        view: @resource.view,
         language: @field.language,
         theme: @field.theme,
         'tab-size': @field.tab_size,

data/app/components/avo/fields/common/key_value_component.html.erb

@@ -38,16 +38,22 @@
       value: @field.parsed_value,
       class: 'hidden',
       placeholder: @field.placeholder,
-      'data-key-value-target': 'input',
-      'data-view': :edit
+      data: {
+        "key-value-target": 'input',
+        view: @view,
+        **@field.get_html(:data, view: view, element: :input)
+      }
     %>
   <% else %>
     <%= text_area_tag @field.id,
       @field.parsed_value,
       class: 'hidden',
       placeholder: @field.placeholder,
-      'data-key-value-target': 'input',
-      'data-view': :edit
+      data: {
+        "key-value-target": 'input',
+        view: @view,
+        **@field.get_html(:data, view: view, element: :input)
+      }
     %>
   <% end %>
 </div>

data/app/components/avo/fields/common/key_value_component.rb

@@ -3,6 +3,8 @@
 class Avo::Fields::Common::KeyValueComponent < ViewComponent::Base
   include Avo::ApplicationHelper
 
+  attr_reader :view
+
   def initialize(field:, form: nil, view: :show)
     @field = field
     @form = form

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

@@ -1,7 +1,9 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
   <%= @form.select @field.id, @field.select_options, { selected: @field.value, prompt: @field.placeholder },
-    class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+    class: classes("w-full"),
+    data: @field.get_html(:data, view: view, element: :input),
+    disabled: @field.readonly,
     placeholder: @field.placeholder,
-    disabled: @field.readonly
+    style: @field.get_html(:style, view: view, element: :input)
   %>
 <% end %>

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

@@ -1,4 +1,4 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, resource: @resource do %>
   <% if @field.display_code %>
     <%= @field.value %>
   <% else %>

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

@@ -1,4 +1,4 @@
-<%= show_field_wrapper field: @field, index: @index do %>
+<%= show_field_wrapper field: @field, resource: @resource, index: @index do %>
   <% if @field.display_code %>
     <%= @field.value %>
   <% else %>

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

@@ -1,9 +1,7 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
   <div data-controller="date-field">
     <%= @form.date_field @field.id,
-      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
-      placeholder: @field.placeholder,
-      disabled: @field.readonly,
+      class: classes("w-full"),
       data: {
         'date-field-target': 'input',
         'first-day-of-week': @field.first_day_of_week,
@@ -12,7 +10,11 @@
         format: @field.format,
         placeholder: @field.placeholder,
         relative: @field.relative,
-      }
+        **@field.get_html(:data, view: view, element: :input)
+      },
+      disabled: @field.readonly,
+      placeholder: @field.placeholder,
+      style: @field.get_html(:style, view: view, element: :input)
     %>
   </div>
 <% end %>

data/app/components/avo/fields/date_field/index_component.html.erb

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, resource: @resource do %>
   <%= @field.formatted_value %>
 <% end %>

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

@@ -1,3 +1,3 @@
-<%= show_field_wrapper field: @field, index: @index do %>
+<%= show_field_wrapper field: @field, resource: @resource, index: @index do %>
   <%= @field.formatted_value %>
 <% end %>

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

@@ -1,9 +1,7 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
   <div data-controller="date-field">
     <%= @form.datetime_field @field.id,
-      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
-      placeholder: @field.placeholder,
-      disabled: @field.readonly,
+      class: classes("w-full"),
       data: {
         'date-field-target': 'input',
         'first-day-of-week': @field.first_day_of_week,
@@ -14,7 +12,11 @@
         format: @field.format,
         placeholder: @field.placeholder,
         relative: @field.relative,
-      }
+        **@field.get_html(:data, view: view, element: :input)
+      },
+      disabled: @field.readonly,
+      placeholder: @field.placeholder,
+      style: @field.get_html(:style, view: view, element: :input)
     %>
   </div>
 <% end %>

data/app/components/avo/fields/date_time_field/index_component.html.erb

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, resource: @resource do %>
   <%= @field.formatted_value %>
 <% end %>

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

@@ -1,3 +1,3 @@
-<%= show_field_wrapper field: @field, index: @index do %>
+<%= show_field_wrapper field: @field, resource: @resource, index: @index do %>
   <%= @field.formatted_value %>
 <% end %>

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

@@ -3,11 +3,18 @@
 class Avo::Fields::EditComponent < ViewComponent::Base
   include Avo::ResourcesHelper
 
+  attr_reader :view
+
   def initialize(field: nil, resource: nil, index: 0, form: nil, displayed_in_modal: false)
     @field = field
     @resource = resource
     @index = index
     @form = form
     @displayed_in_modal = displayed_in_modal
+    @view = :edit
+  end
+
+  def classes(extra_classes = "")
+    helpers.input_classes("#{@field.get_html(:classes, view: view, element: :input)} #{extra_classes}", has_error: @field.model_errors.include?(@field.id))
   end
 end

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

@@ -1,6 +1,9 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
   <%= @form.text_field @field.id,
-    class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+    class: classes("w-full"),
+    data: @field.get_html(:data, view: view, element: :input),
+    disabled: @field.readonly,
     placeholder: @field.placeholder,
-    disabled: @field.readonly %>
+    style: @field.get_html(:style, view: view, element: :input)
+  %>
 <% end %>