headmin 0.3.3 → 0.4.1

data/app/views/headmin/forms/_checkbox.html.erb

@@ -1,39 +1,34 @@
 <%
   # headmin/forms/checkbox
   #
-  # ==== Options
-  # * +form+ - Form object
+  # ==== Required parameters
   # * +attribute+ - Name of the attribute of the form model
-  # * +label+ - Text to show as label. Label will be hidden if value is false
+  # * +form+ - Form object
+  #
+  # ==== Optional parameters
+  # * +checked_value+ - Value for checked state
+  # * +hint+ - Informative text to assist with data input. HTML markup is allowed.
+  # * +label+ - Text to display inside label tag. Defaults to the attribute name. Set to false if you don"t want to show a label.
+  # * +unchecked_value+ - Value for unchecked state
+  # * +wrapper+ - Hash with all options for the surrounding html tag
+  #
+  # ==== References
+  # https://headmin.dev/docs/forms/checkbox
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/check_box
   #
   # ==== Examples
   #   Basic version
-  #   <%= render 'headmin/forms/image', form: form, attribute: :image %#>
-
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  data = local_assigns.has_key?(:data) ? data : nil
-  disabled = local_assigns.has_key?(:disabled) ? disabled : false
-  label = local_assigns.has_key?(:label) ? label : nil
-  readonly = local_assigns.has_key?(:readonly) ? readonly : false
-  required = local_assigns.has_key?(:required) ? required : false
-
-  options = {
-    'aria-describedby': form_field_validation_id(form, attribute),
-    class: "form-checkbox-input #{form_field_validation_class(form, attribute)} #{class_names}",
-    data: data,
-    disabled: disabled,
-    placeholder: attribute,
-    readonly: readonly,
-    required: required,
-  }
+  #   <%= form_with do |form| %#>
+  #     <%= render "headmin/forms/checkbox", form: form, attribute: :active %#>
+  #   <% end %#>
 
-  show_label = label != false
+  checkbox = Headmin::Form::CheckboxView.new(local_assigns)
 %>
 
-<div class="<%= ('mb-3 text-start' if show_label) %>">
-  <%= form.check_box(attribute, options) %>
-  <% if show_label %>
-    <%= render 'headmin/forms/label', form: form, attribute: attribute, text: label, required: required %>
-  <% end %>
-  <%= render 'headmin/forms/validation', form: form, attribute: attribute %>
-</div>
+<%= render "headmin/forms/wrapper", checkbox.wrapper_options do %>
+  <%= form.check_box(checkbox.attribute, checkbox.input_options, checkbox.checked_value, checkbox.unchecked_value) %>
+  <%= render "headmin/forms/label", checkbox.label_options if checkbox.label? %>
+  <%= render "headmin/forms/validation", checkbox.validation_options if checkbox.validate? %>
+  <%= render "headmin/forms/hint", checkbox.hint_options if checkbox.hint? %>
+<% end %>

data/app/views/headmin/forms/_datalist.html.erb

@@ -0,0 +1,3 @@
+<datalist id="<%= id %>">
+  <%= options_for_select(collection) %>
+</datalist>

data/app/views/headmin/forms/_date.html.erb

@@ -2,40 +2,40 @@
   # headmin/forms/date
   #
   # ==== Required parameters
-  # * +form+ - Form object
   # * +attribute+ - Name of the attribute of the form model
+  # * +form+ - Form object
   #
   # ==== Optional parameters
-  # * +aria+ - Provide a hash to define all aria attributes
-  # * +autocomplete+ - Value to be autofilled by the browser
-  # * +autofocus+ - Set to true to focus on this field when the page renders
-  # * +data+ - Optional HTML data attributes
-  # * +disabled+ - Set to true if the input should be shown as disabled
-  # * +id+ - Input identifier
-  # * +list+ - Add array of options to show in a data list
-  # * +readonly+ - Set to true if the value of the field can only be read and not be modified
-  # * +required+ - Set to true to mark as required
-  # * +step+ - The acceptable value granularity
-  # * +value+ - Overrides the value of the form
-  #
-  # ==== Extra parameters
-  # Listed in 'headmin/forms/base'
+  # * +append+ - Display as input group with text on the right-hand side
+  # * +float+ - Use floating labels. Defaults to false
+  # * +hint+ - Informative text to assist with data input. HTML markup is allowed.
+  # * +label+ - Text to display inside label tag. Defaults to the attribute name. Set to false if you don"t want to show a label.
+  # * +list+ - Options are passed through options_for_select
+  # * +plaintext+ - Render input as plain text.
+  # * +prepend+ - Display as input group with text on the left-hand side
+  # * +wrapper+ - Hash with all options for the surrounding html tag
   #
   # ==== References
+  # https://headmin.dev/docs/forms/date
   # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
   # https://apidock.com/rails/ActionView/Helpers/FormHelper/date_field
   #
   # ==== Examples
   #   Basic version
-  #   <%= render 'headmin/forms/date', form: form, attribute: :date %#>
+  #   <%= form_with do |form| %#>
+  #     <%= render "headmin/forms/date", form: form, attribute: :date_of_birth %#>
+  #   <% end %#>
 
-  option_keys = %i(aria autocomplete autofocus data disabled id list readonly required step value)
-  options = local_assigns.slice(*option_keys).merge(
-    aria: { describedby: form_field_validation_id(form, attribute) },
-    class: ['form-control', form_field_validation_class(form, attribute)].join(' '),
-  )
+  date = Headmin::Form::DateView.new(local_assigns)
 %>
 
-<%= render 'headmin/forms/base', local_assigns do |form| %>
-  <%= form.date_field(attribute, options) %>
-<% end %>
+<%= render "headmin/forms/wrapper", date.wrapper_options do %>
+  <%= render "headmin/forms/label", date.label_options if date.prepend_label? %>
+  <%= render "headmin/forms/input_group", date.input_group_options do %>
+    <%= form.date_field(date.attribute, date.input_options) %>
+    <%= render "headmin/forms/datalist", date.datalist_options if date.datalist? %>
+  <% end %>
+  <%= render "headmin/forms/validation", date.validation_options if date.validate? %>
+  <%= render "headmin/forms/hint", date.hint_options if date.hint? %>
+  <%= render "headmin/forms/label", date.label_options if date.append_label? %>
+<% end %>

data/app/views/headmin/forms/_date_range.html.erb

@@ -3,40 +3,38 @@
   #
   # ==== Required parameters
   # * +form+ - Form object
-  # * +start_attribute+ - Name of the start date attribute of the form model
-  # * +end_attribute+ - Name of the end date attribute of the form model
+  # * +start+ - Hash with all options for the start date input (:attribute is required)
+  # * +end+ - Hash with all options for the end date input (:attribute is required)
   #
   # ==== Optional parameters
-  # * +end_label+ - Label for the end attribute
-  # * +start_label+ - Label for the start attribute
+  # * +append+ - Display as input group with text on the right-hand side
+  # * +float+ - Use floating labels. Defaults to false
+  # * +hint+ - Informative text to assist with data input. HTML markup is allowed.
+  # * +label+ - Text to display inside label tag. Defaults to the attribute name. Set to false if you don"t want to show a label.
+  # * +plaintext+ - Render input as plain text.
+  # * +prepend+ - Display as input group with text on the left-hand side
+  # * +wrapper+ - Hash with all options for the surrounding html tag
   #
-  # ==== Extra parameters
-  # Listed in 'headmin/forms/date'
-  # Listed in 'headmin/forms/base'
+  # ==== References
+  # https://headmin.dev/docs/forms/date_range
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/date
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/date_field
   #
   # ==== Examples
   #   Basic version
-  #   <%= render 'headmin/forms/date_range', form: form, start_attribute: :start_date, end_attribute: :end_date %#>
-  #
-  #   With custom labels
-  #   <%= render 'headmin/forms/date_range', form: form, start_attribute: :start_date_2, start_label: :start_date, end_attribute: :end_date_2, end_label: :end_date %#>
+  #   <%= form_with do |form| %#>
+  #     <%= render 'headmin/forms/date_range', form: form, start: {attribute: :start_date}, end: {attribute: :end_date} %#>
+  #   <% end %#>
 
-  start_date_options = local_assigns.merge(
-    attribute: local_assigns[:start_attribute],
-    label: local_assigns[:start_label]
-  )
-  end_date_options = local_assigns.merge(
-    attribute: local_assigns[:end_attribute],
-    label: local_assigns[:end_label]
-  )
+  date_range = Headmin::Form::DateRangeView.new(local_assigns)
 %>
 
 <div class="row">
   <div class="col">
-    <%= render 'headmin/forms/date', start_date_options %>
+    <%= render 'headmin/forms/date', date_range.start_options %>
   </div>
   <div class="col">
-    <%= render 'headmin/forms/date', end_date_options %>
+    <%= render 'headmin/forms/date', date_range.end_options %>
   </div>
 </div>
 

data/app/views/headmin/forms/_email.html.erb

@@ -2,47 +2,42 @@
   # headmin/forms/email
   #
   # ==== Required parameters
-  # * +form+ - Form object
   # * +attribute+ - Name of the attribute of the form model
+  # * +form+ - Form object
   #
   # ==== Optional parameters
-  # * +aria+ - Provide a hash to define all aria attributes
-  # * +autocomplete+ - Value to be autofilled by the browser
-  # * +data+ - Provide a hash to define all data attributes
-  # * +disabled+ - Sets the placeholder of the field
-  # * +id+ - Input identifier
-  # * +list+ - Add array of options to show in a data list
-  # * +maxlength+ - Maximum amount of characters to be used
-  # * +minlength+ - Minimum amount of characters to be used
-  # * +multiple+ - Allow multiple comma-separated email addresses to be entered
-  # * +pattern+ -a  A regular expression that the input's value must match
-  # * +placeholder+ - Sets the placeholder of the field
-  # * +readonly+ - Sets the placeholder of the field
-  # * +required+ - Set to true to mark as required
-  # * +size+ - How much of the input should be shown
-  # * +value+ - Overrides the value of the form
-  #
-  # ==== Extra parameters
-  # Listed in 'headmin/forms/base'
+  # * +append+ - Display as input group with text on the right-hand side
+  # * +collection+ - Values to be suggested while typing. Can be an collection array or a remote URL.
+  # * +float+ - Use floating labels. Defaults to false
+  # * +hint+ - Informative text to assist with data input. HTML markup is allowed.
+  # * +label+ - Text to display inside label tag. Defaults to the attribute name. Set to false if you don"t want to show a label.
+  # * +list+ - Options are passed through options_for_select
+  # * +plaintext+ - Render input as plain text.
+  # * +prepend+ - Display as input group with text on the left-hand side
+  # * +wrapper+ - Hash with all options for the surrounding html tag
   #
   # ==== References
-  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
-  # https://apidock.com/rails/ActionView/Helpers/FormHelper/text_field
+  # https://headmin.dev/docs/forms/email
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/email_field
   #
   # ==== Examples
   #   Basic version
-  #   <%= render 'headmin/forms/email', form: form, attribute: :email_address %#>
-
-  placeholder = local_assigns[:float] ? local_assigns[:placeholder] || attribute : local_assigns[:placeholder]
+  #   <%= form_with do |form| %#>
+  #     <%= render "headmin/forms/email", form: form, attribute: :email_address %#>
+  #   <% end %#>
 
-  option_keys = %i(aria autocomplete data disabled id maxlenght minlength multiple pattern placeholder readonly required size value)
-  options = local_assigns.slice(*option_keys).merge(
-    aria: { describedby: form_field_validation_id(form, attribute) },
-    class: ['form-control', form_field_validation_class(form, attribute)].join(' '),
-    placeholder: placeholder
-  )
+  email = Headmin::Form::EmailView.new(local_assigns)
 %>
 
-<%= render 'headmin/forms/base', local_assigns do |form| %>
-  <%= form.email_field(attribute, options) %>
+<%= render "headmin/forms/wrapper", email.wrapper_options do %>
+    <%= render "headmin/forms/label", email.label_options if email.prepend_label? %>
+    <%= render "headmin/forms/input_group", email.input_group_options do %>
+      <%= form.email_field(email.attribute, email.input_options) %>
+    <%= render "headmin/forms/datalist", email.datalist_options if email.datalist? %>
+    <%= render "headmin/forms/autocomplete", email.autocomplete_options if email.autocomplete? %>
+    <% end %>
+    <%= render "headmin/forms/validation", email.validation_options if email.validate? %>
+    <%= render "headmin/forms/hint", email.hint_options if email.hint? %>
+    <%= render "headmin/forms/label", email.label_options if email.append_label? %>
 <% end %>

data/app/views/headmin/forms/_errors.html.erb

@@ -8,12 +8,11 @@
 <% if form.object.errors.any? %>
   <div class="alert alert-danger" role="alert">
     <h5 class="alert-heading d-flex align-items-center">
-      <%= bootstrap_icon('exclamation-triangle-fill', class: 'me-2') %>
       <%= t('errors.template.header', count: form.object.errors.size, model: form.object.model_name.human) %>
     </h5>
-    <ul>
+    <ul class="mb-0">
       <% form.object.errors.full_messages.each do |message| %>
-      <li><%= message %></li>
+        <li><%= message %></li>
       <% end %>
     </ul>
   </div>

data/app/views/headmin/forms/_file.html.erb

@@ -1,192 +1,95 @@
-<!--
-<% documentation do %>
-  # File
-  This is a wrapper around the form helper `file_field()`.
-  You can pass all valid input attributes as parameters to this template and
-  they will be added directly to the input field.
-
-  ```erbx
-  <%= form_with do |form| %>
-    <%= render "headmin/forms/file", form: form, attribute: "basic_example" %>
-  <% end %>
-  ```
-
-  ## Parameters
-  | Name         | Required | Type             | Description |
-  | ------------ | -------- | ---------------- | ----------- |
-  | form         | yes      | Object           | Form object |
-  | attribute    | yes      | String, Symbol   | Name of the attribute of the form model |
-  | accept       | no       | String           | A comma-separated list of allowed file extensions or MIME types |
-  | aria         | no       | Hash             | Provide a hash to define all aria attributes |
-  | autocomplete | no       | String           | Hint for form autofill feature |
-  | autofocus    | no       | Boolean          | Automatically focus the form control when the page is loaded |
-  | capture      | no       | String           | Allows selection of capturing device. Accepted: user, environment |
-  | data         | no       | Hash             | Provide a hash to define all data attributes |
-  | disabled     | no       | Boolean          | Whether the form control is disabled |
-  | destroy      | no       | Boolean          | Adds delete buttons to the preview thumbnails |
-  | dropzone     | no       | Boolean          | Add drag&drop interface. This setting automatically enables previews |
-  | id           | no       | String           | Input identifier |
-  | multiple     | no       | Boolean          | Allows the user to select more than one file. |
-  | preview      | no       | Boolean          | Show file previews after selection and after upload |
-  | required     | no       | Boolean          | A value is required or must be check for the form to be submittable |
-  | value        | no       | String           | The initial value of the control |
-
-  **Additional parameters**
-
-  This view makes use of [headmin/forms/base](https://headmin.test/forms/base) for labels and appendages.
-  Take a look at its documentation to get a complete overview of all additional parameters.
-
-  ## Examples
-
-  ### Preview
-  ```erbx
-  <%= form_with do |form| %>
-    <div class="row">
-      <div class="col-md-4">
-      <%= render "headmin/forms/file", form: form, attribute: "single", preview: true %>
-      </div>
-      <div class="col-md-4">
-      <%= render "headmin/forms/file", form: form, attribute: "multiple", preview: true, multiple: true %>
-      </div>
-      <div class="col-md-4">
-      <%= render "headmin/forms/file", form: form, attribute: "with_delete_button", preview: true, multiple: true, destroy: true %>
-      </div>
-    </div>
-  <% end %>
-  ```
-
-  ### Drag & Drop
-  ```erbx
-  <%= form_with do |form| %>
-    <%= render "headmin/forms/file", form: form, attribute: "single", dropzone: true %>
-    <%= render "headmin/forms/file", form: form, attribute: "multiple", dropzone: true, multiple: true %>
-    <%= render "headmin/forms/file", form: form, attribute: "with_delete_button", dropzone: true, multiple: true, destroy: true %>
-  <% end %>
-  ```
-
-  ### States
-  ```erbx
-  <%= form_with do |form| %>
-    <%= render "headmin/forms/file", form: form, attribute: "disabled", disabled: true %>
-    <%= render "headmin/forms/file", form: form, attribute: "readonly", readonly: true %>
-    <%= render "headmin/forms/file", form: form, attribute: "disabled_and_readonly", disabled: true, readonly: true %>
-  <% end %>
-  ```
-
-  ## References
-  - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
-  - [APIdock](https://apidock.com/rails/v5.2.3/ActionView/Helpers/FormHelper/file_field)
-<% end %>
--->
 <%
-  # ==== Examples
-  #   Limit file types (e.g. only Microsoft Word files)
-  #   <%= render 'headmin/forms/file', form: form, attribute: :file, accept: '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document' %#>
+  # headmin/forms/file
   #
-  #   Allow multiple file selection
-  #   <%= render 'headmin/forms/file', form: form, attribute: :file, multiple: true %#>
+  # ==== Required parameters
+  # * +attribute+ - Name of the attribute of the form model
+  # * +form+ - Form object
   #
-  #   Allows specification of capturing device
-  #   <%= render 'headmin/forms/file', form: form, attribute: :file, capture: 'user' %#>
+  # ==== Optional parameters
+  # * +append+ - Display as input group with text on the right-hand side
+  # * +destroy+ - Adds delete buttons to the preview thumbnails
+  # * +dropzone+ - Add drag&drop interface. This setting automatically enables previews
+  # * +hint+ - Informative text to assist with data input. HTML markup is allowed.
+  # * +multiple+ - Add drag&drop interface. This setting automatically enables previews
+  # * +preview+ - Show file previews after selection and after upload
+  # * +label+ - Text to display inside label tag. Defaults to the attribute name. Set to false if you don"t want to show a label.
+  # * +prepend+ - Display as input group with text on the left-hand side
+  # * +wrapper+ - Hash with all options for the surrounding html tag
   #
-  #   Show preview thumbnails
-  #   <%= render 'headmin/forms/file', form: form, attribute: :file, preview: true %#>
+  # ==== References
+  # https://headmin.dev/docs/forms/file
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/file_field
   #
-  #   Allow deleting file(s). This makes use of nested attributes. Add the definition to your model and add them to the list of strong parameters.
-  #   <%= render 'headmin/forms/file', form: form, attribute: :file, preview: true %#>
-
-  placeholder = local_assigns[:float] ? local_assigns[:placeholder] || attribute : local_assigns[:placeholder]
-  attached = form.object&.send(attribute)
-  attachments = attached&.attachments || []
-  dropzone = local_assigns[:dropzone]
-  preview = local_assigns[:preview] || dropzone
-  destroy = local_assigns[:destroy] || false
-  number_of_files = local_assigns[:multiple] ? 2 : 1
-
-  nested_attribute = attached.is_a?(ActiveStorage::Attached::Many) ? :"#{attribute.to_s}_attachments" : :"#{attribute.to_s}_attachment"
-
-  option_keys = %i(accept aria autocomplete autofocus capture data disabled id multiple required value)
-  options = local_assigns.slice(*option_keys).merge(
-    aria: { describedby: form_field_validation_id(form, attribute) },
-    class: ['form-control', form_field_validation_class(form, attribute)].join(' '),
-    list: local_assigns[:list] ? "#{attribute}_list" : nil,
-    placeholder: placeholder,
-    required: attached ? false : local_assigns[:required]
-  )
-
-  if preview
-    local_assigns = local_assigns.merge(
-      data: {
-        controller: 'file-preview'
-      }
-    )
-    options = options.merge(
-      data: {
-        'file-preview-target': 'input',
-        'dropzone-target': 'input',
-        action: 'change->file-preview#preview dropEnd->file-preview#preview'
-      }
-    )
-  end
+  # ==== Examples
+  #   Basic version
+  #   <%= form_with do |form| %#>
+  #     <%= render "headmin/forms/file", form: form, attribute: :file %#>
+  #   <% end %#>
 
-  thumbnail_width = 100
-  thumbnail_height = 100
+  file = Headmin::Form::FileView.new(local_assigns)
 %>
 
-<%= render 'headmin/forms/base', local_assigns do |form| %>
-  <div class="h-form-file" data-controller="<%= 'filePreview' if preview %> <%= 'dropzone' if dropzone %>">
-
-    <% if preview %>
-      <div class="h-form-file-thumbnails" data-file-preview-target="thumbnails">
-
-        <!-- Render previews for attachments -->
-        <%= form.fields_for(nested_attribute) do |ff| %>
-          <%
-            attachment = ff.object
-            next unless attachment
-            filename = attachment.blob.filename.to_s
-            size = number_to_human_size(attachment.blob.byte_size)
-            src = attachment.image? ? url_for(attachment.variant(resize_to_fill: [thumbnail_width, thumbnail_height])) : url_for(attachment)
-          %>
-          <div class="h-form-file-thumbnail" title="<%= "#{filename} (#{size})" %>" data-file-preview-target="thumbnail">
-            <%= ff.hidden_field(:id, disabled: destroy) %>
-            <%= ff.hidden_field(:_destroy, data: { 'file-preview-target': 'thumbnailDestroy' }, disabled: destroy) %>
-            <%= render 'headmin/thumbnail', src: src, width: thumbnail_width, height: thumbnail_height %>
-
-            <% if destroy %>
-              <div class="h-form-file-thumbnail-remove" data-action="click->file-preview#remove" data-file-preview-name-param="<%= filename %>">
-                <%= bootstrap_icon('x') %>
-              </div>
-            <% end %>
-          </div>
-        <% end %>
-
-        <!-- Placeholder -->
-        <% if dropzone %>
-          <div class="h-dropzone-placeholder <%= 'd-none' if attachments.any? %>" data-file-preview-target="placeholder" style="height: <%= thumbnail_height %>px;">
-            <%= t('headmin.forms.file.placeholder', count: number_of_files) %>
-          </div>
-        <% else %>
-          <div class="h-form-file-thumbnail <%= 'd-none' if attachments.any? %>" title="<%= t('headmin.forms.file.not_found') %>" data-file-preview-target="placeholder">
-            <%= render 'headmin/thumbnail', src: nil, width: thumbnail_width, height: thumbnail_height %>
-          </div>
-        <% end %>
-      </div>
+<%= render "headmin/forms/wrapper", file.wrapper_options do %>
+  <%= render "headmin/forms/label", file.label_options if file.prepend_label? %>
+  <div <%= tag.attributes(file.dropzone_options) %>>
+    <%= render "headmin/forms/input_group", file.input_group_options do %>
+
+      <% if file.preview %>
+        <div class="h-form-file-thumbnails" data-file-preview-target="thumbnails">
+
+          <!-- Render previews for attachments -->
+          <%= form.fields_for(file.nested_attribute) do |ff| %>
+            <%
+              attachment = ff.object
+              next unless attachment
+              filename = attachment.blob.filename.to_s
+              size = number_to_human_size(attachment.blob.byte_size)
+              src = attachment.image? ? url_for(attachment.variant(resize_to_fill: [file.thumbnail_width, file.thumbnail_height])) : url_for(attachment)
+            %>
+            <div class="h-form-file-thumbnail" title="<%= "#{filename} (#{size})" %>" data-file-preview-target="thumbnail">
+              <%= ff.hidden_field(:id, disabled: file.destroy) %>
+              <%= ff.hidden_field(:_destroy, data: {'file-preview-target': 'thumbnailDestroy'}, disabled: file.destroy) %>
+              <%= render 'headmin/thumbnail', src: src, width: file.thumbnail_width, height: file.thumbnail_height %>
+
+              <% if file.destroy %>
+                <div class="h-form-file-thumbnail-remove" data-action="click->file-preview#remove" data-file-preview-name-param="<%= filename %>">
+                  <%= bootstrap_icon('x') %>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+
+          <!-- Placeholder -->
+          <% if file.dropzone %>
+            <div class="h-dropzone-placeholder <%= 'd-none' if file.attachments.any? %>" data-file-preview-target="placeholder" style="height: <%= file.thumbnail_height %>px;">
+              <%= t('headmin.forms.file.placeholder', count: file.number_of_files) %>
+            </div>
+          <% else %>
+            <div class="h-form-file-thumbnail <%= 'd-none' if file.attachments.any? %>" title="<%= t('headmin.forms.file.not_found') %>" data-file-preview-target="placeholder">
+              <%= render 'headmin/thumbnail', width: file.thumbnail_width, height: file.thumbnail_height, icon: "plus" %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+
+      <!-- Template -->
+      <template data-file-preview-target="template">
+        <div class="h-form-file-thumbnail" title="" data-file-preview-target="thumbnail">
+          <%= render 'headmin/thumbnail', src: nil, width: file.thumbnail_width, height: file.thumbnail_height %>
+
+          <% if file.destroy %>
+            <div class="h-form-file-thumbnail-remove" data-action="click->file-preview#remove">
+              <%= bootstrap_icon('x') %>
+            </div>
+          <% end %>
+        </div>
+      </template>
+
+      <%= form.file_field(attribute, file.input_options) %>
     <% end %>
-
-    <!-- Template -->
-    <template data-file-preview-target="template">
-      <div class="h-form-file-thumbnail" title="" data-file-preview-target="thumbnail">
-        <%= render 'headmin/thumbnail', src: nil, width: thumbnail_width, height: thumbnail_height %>
-
-        <% if destroy %>
-          <div class="h-form-file-thumbnail-remove" data-action="click->file-preview#remove">
-            <%= bootstrap_icon('x') %>
-          </div>
-        <% end %>
-      </div>
-    </template>
-
-    <%= form.file_field(attribute, options) %>
   </div>
+  <%= render "headmin/forms/validation", file.validation_options if file.validate? %>
+  <%= render "headmin/forms/hint", file.hint_options if file.hint? %>
+  <%= render "headmin/forms/label", file.label_options if file.append_label? %>
 <% end %>

data/app/views/headmin/forms/_flatpickr.html.erb

@@ -2,33 +2,32 @@
   # headmin/forms/flatpickr
   #
   # ==== Required parameters
-  # * +form+ - Form object
   # * +attribute+ - Name of the attribute of the form model
+  # * +form+ - Form object
   #
   # ==== Optional parameters
-  # * +aria+ - Provide a hash to define all aria attributes
-  # * +data+ - Optional HTML data attributes
-  # * +disabled+ - Set to true if the input should be shown as disabled
-  # * +readonly+ - Set to true if the value of the field can only be read and not be modified
-  # * +value+ - Overrides the value of the form
+  # * +append+ - Display as input group with text on the right-hand side
+  # * +float+ - Use floating labels. Defaults to false
+  # * +flatpickr+ - Hash with all options you can pass to flatpickr JS config
+  # * +hint+ - Informative text to assist with data input. HTML markup is allowed.
+  # * +label+ - Text to display inside label tag. Defaults to the attribute name. Set to false if you don"t want to show a label.
+  # * +list+ - Options are passed through options_for_select
+  # * +plaintext+ - Render input as plain text.
+  # * +prepend+ - Display as input group with text on the left-hand side
+  # * +wrapper+ - Hash with all options for the surrounding html tag
   #
-  # ==== Extra parameters
-  # Listed in 'headmin/forms/base'
+  # ==== References
+  # https://headmin.dev/docs/forms/date
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/date_field
   #
   # ==== Examples
   #   Basic version
-  #   <%= render 'headmin/forms/flatpickr', form: form, attribute: :date %#>
+  #   <%= form_with do |form| %#>
+  #     <%= render "headmin/forms/date", form: form, attribute: :date_of_birth %#>
+  #   <% end %#>
 
-  options = local_assigns.merge(
-    data: {
-      'flatpickr-target': 'input',
-      'flatpickr-options': {
-        defaultDate: form.object&.send(attribute)&.strftime('%d/%m/%Y')
-      }
-    }
-  )
+  flatpickr = Headmin::Form::FlatpickrView.new(local_assigns)
 %>
 
-<div data-controller="flatpickr">
-  <%= render 'headmin/forms/date', options %>
-</div>
+<%= render 'headmin/forms/date', flatpickr.options %>