avo 1.25.0 → 2.0.0

data/app/components/avo/alert_component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::AlertComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
   attr_reader :type
   attr_reader :message
 
@@ -8,4 +10,26 @@ class Avo::AlertComponent < ViewComponent::Base
     @type = type
     @message = message
   end
+
+  def icon
+    return 'x-circle' if is_error?
+
+    'check-circle'
+  end
+
+  def classes
+    result = "max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
+
+    if is_error?
+      result += " bg-red-400 border-red-700"
+    else
+      result += " bg-green-400 border-green-700"
+    end
+
+    result
+  end
+
+  def is_error?
+    type.to_sym == :error
+  end
 end

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

@@ -0,0 +1 @@
+<%= output %>

data/app/components/avo/button_component.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+# A button/link can have the following settings:
+# style: primary/secondary/ternary
+# size: :xs :sm, :md, :lg
+class Avo::ButtonComponent < ViewComponent::Base
+  def initialize(path = nil, size: :md, style: :outline, color: :gray, icon: nil, icon_class: "", is_link: false, rounded: true, compact: false, **args)
+    # Main settings
+    @size = size
+    @style = style
+    @color = color
+
+    # Other things that appear in the button
+    @path = path
+    @icon = icon
+    @icon_class = icon_class
+    @rounded = rounded
+    @compact = compact
+
+    # Other settings
+    @class = args[:class]
+    @is_link = is_link
+    @args = args || {}
+  end
+
+  def args
+    if @args[:spinner]
+      @args[:"data-controller"] = "loading-button"
+    end
+
+    @args[:class] = button_classes
+
+    @args
+  end
+
+  def button_classes
+    classes = "button-component inline-flex flex-grow-0 items-center text-sm font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 border justify-center active:outline active:outline-1 #{@class}"
+
+    classes += " rounded" if @rounded.present?
+
+    classes += style_classes
+
+    classes += @compact ? " px-1" : " px-4" # Same horizontal padding on all sizes
+    classes += spacing_classes
+
+    classes
+  end
+
+  def is_link?
+    @is_link
+  end
+
+  def full_content
+    result = ""
+    icon_classes = @icon_class
+    icon_classes += full_content_icon_classes
+
+    result += helpers.svg(@icon, class: icon_classes) if @icon.present?
+    result += "<span class='w-0 m-0'>&nbsp;</span>"
+    if content.present?
+      result += "<span>#{content}</span>"
+    end
+
+    result.html_safe
+  end
+
+  def output
+    if is_link?
+      output_link
+    else
+      output_button
+    end
+  end
+
+  def output_link
+    link_to @path, **args do
+      full_content
+    end
+  end
+
+  def output_button
+    if @args[:method].present?
+      button_to @args[:url], **args do
+        full_content
+      end
+    else
+      button_tag(**args) do
+        full_content
+      end
+    end
+  end
+
+  private
+
+  def spacing_classes
+    case @size.to_sym
+    when :xs
+      " py-0"
+    when :sm
+      " py-1"
+    when :md
+      " py-2"
+    when :lg
+      " py-3"
+    else
+      ""
+    end
+  end
+
+  def style_classes
+    case @style
+    when :primary
+      " bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:border-primary-700 active:outline-primary-700 active:bg-primary-600"
+    when :outline
+      " bg-white text-#{@color}-500 border-#{@color}-500 hover:bg-#{@color}-100 active:bg-#{@color}-100 active:border-#{@color}-500 active:outline-#{@color}-500"
+    else
+      ""
+    end
+  end
+
+  def full_content_icon_classes
+    icon_classes = ""
+
+    case @size
+    when :xs
+      icon_classes += " h-4"
+      # When icon is solo we need to add an offset
+      icon_classes += " my-1" if content.blank?
+    when :sm
+      icon_classes += " h-4"
+      # When icon is solo we need to add an offset
+      icon_classes += " my-1" if content.blank?
+    when :md
+      icon_classes += " h-5"
+      # When icon is solo we need to add an offset
+      icon_classes += " my-0.5" if content.blank?
+    when :lg
+      icon_classes += " h-6"
+    end
+
+    icon_classes
+  end
+end

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

@@ -0,0 +1,40 @@
+<div class="relative flex-1 flex flex-col justify-between h-full" data-controller="dashboard-card" data-dashboard-card-target="card" data-refresh-every="<%= @card.refresh_every %>" data-card-id="<%= @card.id %>">
+  <% if @card.class.display_header %>
+    <div class="px-4 pt-4">
+      <div class="flex justify-between items-center min-h-6">
+          <div class="text-base font-bold text-gray-700 leading-none">
+            <%= @card.label %>
+          </div>
+        <div data-controller="select">
+          <% if @card.type == :metric && @card.parsed_ranges.present? %>
+            <%= select_tag "#{@card.id}_range", options_for_select(@card.parsed_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',
+                action: 'change->select#onChange'
+              }
+            %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  <% if @card.type == :chartkick %>
+    <%= render 'chartkick_card', card: @card %>
+  <% elsif @card.type === :partial %>
+    <%= render @card.class.partial %>
+  <% elsif @card.type === :metric %>
+    <div class="flex-1 flex px-4 pb-4">
+      <%= render 'metric_card', card: @card %>
+    </div>
+  <% end %>
+  <% if @card.description %>
+    <div class="absolute inset-auto bottom-0 right-0 mb-4 mr-4">
+      <%= helpers.svg 'heroicons/solid/information-circle',
+        class: 'h-4 text-gray-500 cursor-pointer',
+        title: @card.description,
+        'data-tippy': 'tooltip',
+        'data-target': 'card-description' %>
+    </div>
+  <% end %>
+</div>

data/app/components/avo/card_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::CardComponent < ViewComponent::Base
+  def initialize(card: nil)
+    @card = card
+  end
+
+  def render?
+    !@card.nil?
+  end
+end

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

@@ -0,0 +1,15 @@
+<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">
+    <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 %>
+      <% else %>
+        <%= @field.name %>
+      <% end %>
+      <% if @field.required %> <span class="text-red-600 ml-1">*</span> <% end %>
+    </div>
+  </div>
+  <div class="flex-1 flex flex-row md:min-h-inherit py-2 <% unless @displayed_in_modal %> px-6 <% end %>">
+    <%= content %>
+  </div>
+</div>

data/app/components/avo/common_field_wrapper_component.rb

@@ -0,0 +1,20 @@
+# 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)
+    @field = field
+    @dash_if_blank = dash_if_blank
+    @classes = args[:class].present? ? args[:class] : ""
+    @args = args
+    @displayed_in_modal = displayed_in_modal
+    @form = form
+    @resource = resource
+    @model = resource.present? ? resource.model : nil
+    @full_width = full_width
+    @label = label
+  end
+
+  def label
+    @label || @field.name
+  end
+end

data/app/components/avo/dashboards/divider_component.html.erb

@@ -0,0 +1,9 @@
+<% if invisible? %>
+  <div class="relative col-span-full gap-0"></div>
+<% else %>
+  <div class="relative col-span-full border-t border-gray-300 my-4">
+    <% if label.present? %>
+      <div class="absolute inset-auto -translate-y-1/2 -translate-x-1/2 ml-1/2 z-20 text-xs font-semibold uppercase leading-none text-gray-500 bg-application px-2"><%= label %></div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/dashboards/divider_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Avo::Dashboards::DividerComponent < ViewComponent::Base
+  attr_reader :divider
+
+  delegate :label, to: :divider
+
+  def initialize(divider: nil)
+    @divider = divider
+  end
+
+  def render?
+    @divider.present?
+  end
+
+  def invisible?
+    @divider.invisible
+  end
+end

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

@@ -1,20 +1,11 @@
-<div class="flex items-center py-0 leading-tight <%= @classes %> min-h-16" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
-  <div class="h-16 flex self-start items-center text-slate-800">
-    <div class="<% if @displayed_in_modal %> md:w-48 <% else %> md:w-64 <% end %> w-48 px-8 flex" data-slot="label">
-      <%= @form.label @field.id, label %> <% if @field.required %> <span class="text-red-600">*</span> <% end %>
-    </div>
+<%= render Avo::CommonFieldWrapperComponent.new(field: @field, resource: @resource, index: @index, form: @form, displayed_in_modal: @displayed_in_modal, label: @label) 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 %>
+      <div class="text-red-600 mt-2 text-sm"><%= @model.errors.full_messages_for(@field.id).to_sentence %></div>
+    <% end %>
+    <% if @field.help %>
+      <div class="text-gray-600 mt-2 text-sm"><%== @field.help %></div>
+    <% end %>
   </div>
-  <div class="flex-1 flex flex-row min-h-inherit">
-    <div class="px-6 py-3 self-center <% if @displayed_in_modal or @full_width %> w-full <% else %> w-8/12 <% end %>" data-slot="value">
-      <%= content %>
-
-      <% if @model.present? and @model.errors.include? @field.id %>
-        <div class="text-red-600 mt-2 text-sm"><%= @model.errors.full_messages_for(@field.id).to_sentence %></div>
-      <% end %>
-
-      <% if @field.help %>
-        <div class="text-gray-600 mt-2 text-sm"><%== @field.help %></div>
-      <% end %>
-    </div>
-  </div>
-</div>
+<% end %>

data/app/components/avo/edit/field_wrapper_component.rb

@@ -12,13 +12,5 @@ class Avo::Edit::FieldWrapperComponent < ViewComponent::Base
     @model = resource.present? ? resource.model : nil
     @full_width = full_width
     @label = label
-
-    if (@index != 0) || @displayed_in_modal
-      @classes += " border-t"
-    end
-  end
-
-  def label
-    @label || @field.name
   end
 end

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

@@ -0,0 +1,12 @@
+<% if @add_background %>
+  <div class="bg-white rounded shadow-panel">
+<% end %>
+<div class="relative flex-1 flex flex-col items-center justify-center space-y-12 py-24">
+  <%= helpers.svg view_type_svg, class: 'h-[250px]' %>
+  <div class="text-gray-500 text-center">
+    <%= message %>
+  </div>
+</div>
+<% if @add_background %>
+  </div>
+<% end %>

data/app/components/avo/empty_state_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Avo::EmptyStateComponent < ViewComponent::Base
+  def initialize(message: nil, resource_name: nil, related_name: nil, view_type: :table, add_background: false)
+    @message = message
+    @view_type = view_type
+    @related_name = related_name
+    @resource_name = resource_name
+    @add_background = add_background
+  end
+
+  def message
+    return @message if @message.present?
+
+    translation_tag = @related_name.present? ? 'avo.no_related_item_found' : 'avo.no_item_found'
+    helpers.t translation_tag, item: @resource_name
+  end
+
+  def view_type_svg
+    return "grid-empty-state" if @view_type.to_sym == :grid
+
+    "table-empty-state"
+  end
+end

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

@@ -7,7 +7,8 @@
     [type.to_s, resource.model_key]
   end.to_h
 %>
-<div data-controller="belongs-to-field"
+<div class="divide-y"
+    data-controller="belongs-to-field"
     data-searchable="<%= @field.searchable %>"
     data-association="<%= @field.id %>"
     data-association-class="<%= @field&.target_resource&.model_class || nil %>"

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

@@ -1,7 +1,7 @@
 <%= 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: 'mx-2 text-lg h-4 w-4',
+      class: 'text-lg h-4 w-4',
       disabled: @field.readonly,
       checked: @field.value
     %>

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

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field, dash_if_blank: false do %>
+<%= index_field_wrapper field: @field, dash_if_blank: false, center_content: true 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,7 @@
           end
         %>
         <label class="block">
-          <%= check_box_tag "#{model_param_key}[#{@field.id}][]", id, checked, { class: "w-3 h-3", 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", disabled: @field.readonly, id: "#{model_param_key}_#{@field.id}_#{id}" } %> <%= label %>
         </label>
       <% end %>
     </div>

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

@@ -1,12 +1,12 @@
 <%
-  classes = 'h-5 float-left'
+  classes = 'h-6 float-left mr-1'
 
   if @checked
-    classes += ' text-teal-600'
-    icon = 'check-circle'
+    classes += ' text-green-600'
+    icon = 'heroicons/outline/check-circle'
   else
     classes += ' text-red-500'
-    icon = 'x-circle'
+    icon = 'heroicons/outline/x-circle'
   end
 %>
 <%= helpers.svg "#{icon}.svg", class: classes %>

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

@@ -6,9 +6,9 @@
         @options.each do |id, label|
           checked = @value.present? && @value[id.to_s].present?
       %>
-      <div>
+      <div class="flex flex-nowrap">
         <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: checked %>
-          <div class="ml-6 text-left py-px"><%= label %></div>
+          <div class="ml-px text-left py-px"><%= label %></div>
         </div>
       <% end %>
     </div>

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

@@ -1,5 +1,5 @@
-<div class="relative p-3 bg-slate-200 grid grid-cols-3 xl:grid-cols-4 gap-3 rounded-xl">
+<div class="relative py-3 grid xs:grid-cols-2 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 rounded-xl">
   <% @field.value.attachments.each do |file| %>
-    <%= render Avo::Fields::Common::MultipleFileViewerComponent.new id: @field.id, file: file, is_image: @field.is_image, is_audio: @field.is_audio, button_size: :xs, resource: @resource %>
+    <%= render Avo::Fields::Common::SingleFileViewerComponent.new field: @field, resource: @resource, file: file %>
   <% end %>
 </div>

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

@@ -7,6 +7,6 @@
   options[:size] = @size if @size.present?
   query = options.map { |key, value| "#{key}=#{value}" }.join('&')
   url = URI::HTTPS.build(host: "www.gravatar.com", path: "/avatar/#{@md5}", query: query)
-  classes = @rounded ? 'min-w-10 rounded-full' : 'min-w-10'
+  classes = @rounded ? 'rounded-full' : ''
 %>
 <%= link_to_if @link_to_resource.present?, image_tag(url.to_s, class: classes), @link, title: @title %>

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

@@ -1,5 +1,5 @@
-<div class="flex items-start py-1 leading-tight border-t bg-slate-600 text-white text-xs">
-  <div class="p-3 pl-6 h-full w-full">
+<div class="flex items-start py-1 leading-tight bg-gray-100 text-gray-500 text-xs">
+  <div class="py-2 px-6 h-full w-full">
     <% if @value.present? %>
       <% if @as_html %>
         <%== @value %>

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

@@ -1,4 +1,4 @@
-<div class="w-full shadow-lg rounded-lg overflow-hidden"
+<div class="w-full shadow-lg rounded overflow-hidden"
   data-controller="key-value"
   data-key-value-target="controller"
   data-options="<%= @field.options.to_json %>"
@@ -7,7 +7,7 @@
 >
   <div class="w-full flex flex-col">
     <div class="flex w-full">
-      <div class="flex w-full bg-gray-800 shadow overflow-hidden">
+      <div class="flex w-full bg-gray-700 shadow overflow-hidden">
         <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
           <%= @field.key_label %>
         </div>

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

@@ -1,33 +1,52 @@
-<div class="relative min-h-full max-w-full flex-1 space-y-3">
-  <% if @file.present? %>
-    <% if @file.representable? && @is_image %>
-      <%= image_tag helpers.main_app.url_for(@file), class: 'rounded-lg max-h-168 max-w-full' %>
-    <% elsif @is_audio %>
-      <%= audio_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-48">
-        <div class="flex flex-col justify-center items-center w-full">
-          <%= helpers.svg 'document-text', class: 'h-12 text-gray-800 mb-2' %>
-          <div class="block w-full truncate text-center text-sm">
-            <%= @file.filename %>
+<div class="relative min-h-full max-w-full flex-1 flex flex-col justify-between space-y-3">
+  <% if file.present? %>
+    <div class="flex flex-col justify-between h-full">
+      <% if file.representable? && is_image? %>
+        <div class="max-h-[42rem] h-full flex">
+          <%= image_tag helpers.main_app.url_for(file), class: 'rounded-lg object-cover' %>
+        </div>
+      <% 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>
-      </div>
-    <% end %>
-
-    <div class="flex justify-between">
-      <div>
+      <% end %>
+      <span class="text-gray-500 mt-2 text-sm truncate" title="<%= file.filename %>"><%= file.filename %></span>
+    </div>
+    <div class="flex space-x-2">
+      <div class="flex">
         <% if @resource.authorization.authorize_action(:download_attachments?, raise_exception: false) %>
-          <%= a_link helpers.main_app.url_for(@file), color: 'indigo', download: true, class: '', size: :md do %>
-            <%= helpers.svg 'download' %> <%= t('avo.download_file') %>
-          <% end %>
+          <%= a_link helpers.main_app.url_for(file),
+            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 @resource.authorization.authorize_action(:delete_attachments?, raise_exception: false) %>
-          <%= a_link "#{@resource.record_path}/active_storage_attachments/#{@id}/#{@file.blob_id}", color: :red, variant: :outlined, size: :md, class: '', 'data-turbo-frame': 'destroy_attachment_form', data: { confirm: t('avo.are_you_sure')} do %>
-            <%= helpers.svg 'trash' %> <%= t 'avo.delete_file', item: @file.filename %>
-          <% end %>
+          <%= a_link destroy_path,
+            icon: 'heroicons/outline/trash',
+            method: :delete,
+            color: :red,
+            compact: true,
+            size: :xs,
+            class: 'text-center',
+            title: t('avo.delete_file', item: file.filename),
+            data: {
+              'turbo-frame': 'destroy_attachment_form',
+              confirm: t('avo.are_you_sure'),
+              tippy: :tooltip
+            } %>
         <% end %>
       </div>
     </div>

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

@@ -3,13 +3,41 @@
 class Avo::Fields::Common::SingleFileViewerComponent < ViewComponent::Base
   include Avo::ApplicationHelper
 
-  def initialize(id:, file:, is_image:, is_audio:, direct_upload: false, resource:, button_size: :md)
-    @id = id
+  def initialize(file: nil, field:, resource:)
     @file = file
-    @is_image = is_image
-    @is_audio = is_audio
-    @direct_upload = direct_upload
-    @button_size = button_size
+    @field = field
     @resource = resource
   end
+
+  def destroy_path
+    "#{@resource.record_path}/active_storage_attachments/#{id}/#{file.id}"
+  end
+
+  def id
+    @field.id
+  end
+
+  def file
+    @file || @field.value.attachment
+  rescue
+    nil
+  end
+
+  def is_image?
+    file.image? || @field.is_image
+  rescue
+    false
+  end
+
+  def is_audio?
+    file.audio? || @field.is_audio
+  rescue
+    false
+  end
+
+  def is_video?
+    file.video? || @field.is_video
+  rescue
+    false
+  end
 end

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

@@ -5,9 +5,9 @@
 %>
 <div class="flex flex-shrink-0 <%= classes %> items-center">
   <% if @status == 'success' %>
-    <%= helpers.svg 'check-circle-sm', class: 'h-4' %>
+    <%= helpers.svg 'heroicons/solid/check-circle', class: 'h-4' %>
   <% elsif @status == 'failed' %>
-    <%= helpers.svg 'x-circle-sm', class: 'h-4' %>
+    <%= helpers.svg 'heroicons/solid/x-circle', class: 'h-4' %>
   <% elsif @status == 'loading' %>
     <div class="spinner">
       <div class="double-bounce1 bg-gray-600"></div>

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

@@ -3,7 +3,7 @@
     <%= image_tag @field.value,
       height: @field.height,
       width: @field.width,
-      style: "border-radius: #{@field.radius}px"
+      style: "border-radius: #{@field.radius}px; max-height: #{@field.height}#{@field.height.to_s&.ends_with?('px') ? '' : 'px'};"
     %>
   <% end %>
 <% end %>