headmin 0.2.8 → 0.3.4

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

@@ -1,40 +1,192 @@
+<!--
+<% 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 %>
+-->
 <%
-  # name: headmin/forms/file
+  # ==== 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' %#>
   #
-  # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
+  #   Allow multiple file selection
+  #   <%= render 'headmin/forms/file', form: form, attribute: :file, multiple: true %#>
   #
-  # ==== 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-control #{form_field_validation_class(form, attribute)} #{class_names}",
-    data: data,
-    disabled: disabled,
-    placeholder: attribute,
-    readonly: readonly,
-    required: required,
-  }
-
-  show_label = label != false
+  #   Allows specification of capturing device
+  #   <%= render 'headmin/forms/file', form: form, attribute: :file, capture: 'user' %#>
+  #
+  #   Show preview thumbnails
+  #   <%= render 'headmin/forms/file', form: form, attribute: :file, preview: true %#>
+  #
+  #   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
+
+  thumbnail_width = 100
+  thumbnail_height = 100
 %>
 
-<div class="<%= ('mb-3 text-start' if show_label) %>">
-  <% if show_label %>
-    <%= render 'headmin/forms/label', form: form, attribute: attribute, name: label, required: required %>
-  <% end %>
+<%= 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>
+    <% 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) %>
-  <%= render 'headmin/forms/validation', form: form, attribute: attribute %>
-</div>
+    <%= form.file_field(attribute, options) %>
+  </div>
+<% end %>

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

@@ -1,55 +1,34 @@
 <%
   # headmin/forms/flatpickr
   #
-  # ==== Options
-  # * <tt>append<tt> - Text or icon to be shown on the left hand side of the input, Doesn't work with float
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>class<tt> - Optional HTML class attribute
-  # * <tt>data<tt> - Optional HTML data attributes
-  # * <tt>disabled<tt> - Set to true if the input should be shown as disabled
-  # * <tt>float<tt> - Set to true if you want to show floating labels
-  # * <tt>form<tt> - Form object
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>name<tt> - The name of the field
-  # * <tt>prepend<tt> - Text or icon to be shown on the right hand side of the input, Doesn't work with float
-  # * <tt>readonly<tt> - Set to true if the value of the field can only be read and not be modified
-  # * <tt>required<tt> - Set to true to show a HTML5 validation message when left blank
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  #
+  # ==== 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
+  #
+  # ==== Extra parameters
+  # Listed in 'headmin/forms/base'
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/flatpickr', form: form, attribute: :date %#>
 
-  append = local_assigns.has_key?(:append) ? append : nil
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  data = local_assigns.has_key?(:data) ? data : {}
-  disabled = local_assigns.has_key?(:disabled) ? disabled : false
-  float = local_assigns.has_key?(:float) ? float : false
-  label = local_assigns.has_key?(:label) ? label : nil
-  prepend = local_assigns.has_key?(:prepend) ? prepend : nil
-  readonly = local_assigns.has_key?(:readonly) ? readonly : false
-  required = local_assigns.has_key?(:required) ? required : false
-
-  template_locals = {
-    form: form,
-    append: append,
-    prepend: prepend,
-    float: float,
-    label: label,
-    class: class_names,
-    disabled: disabled,
-    readonly: readonly,
-    required: required,
-    attribute: attribute,
-    data: data.merge(
+  options = local_assigns.merge(
+    data: {
       'flatpickr-target': 'input',
       'flatpickr-options': {
         defaultDate: form.object&.send(attribute)&.strftime('%d/%m/%Y')
       }
-    ),
-  }
-
+    }
+  )
 %>
 
 <div data-controller="flatpickr">
-  <%= render 'headmin/forms/date', template_locals %>
+  <%= render 'headmin/forms/date', options %>
 </div>

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

@@ -1,61 +1,50 @@
 <%
   # headmin/forms/flatpickr_range
   #
-  # ==== Options
-  # * <tt>append<tt> - Text or icon to be shown on the left hand side of the input, Doesn't work with float
-  # * <tt>class<tt> - Optional HTML class attribute
-  # * <tt>data<tt> - Optional HTML data attributes
-  # * <tt>end_attribute<tt> - Name of the end date attribute of the form model
-  # * <tt>float<tt> - Set to true if you want to show floating labels
-  # * <tt>form<tt> - Form object
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>prepend<tt> - Text or icon to be shown on the right hand side of the input, Doesn't work with float
-  # * <tt>readonly<tt> - Set to true if the value of the field can only be read and not be modified
-  # * <tt>required<tt> - Set to true to show a HTML5 validation message when left blank
-  # * <tt>start_attribute<tt> - Name of the start date attribute of the form model
+  # ==== 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
+  #
+  # ==== 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
+  # * +end_label+ - Label for the end attribute
+  # * +label+ - Text to show as label. Label will be hidden if value is false
+  # * +readonly+ - Set to true if the value of the field can only be read and not be modified
+  # * +start_label+ - Label for the start attribute
+  # * +value+ - Overrides the value of the form
+  #
+  # ==== Extra parameters
+  # Listed in 'headmin/forms/base'
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/flatpickr_range', form: form, start_attribute: :start_date, end_attribute: :end_date %#>
 
-  append = local_assigns.has_key?(:append) ? append : nil
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  data = local_assigns.has_key?(:data) ? data : {}
-  disabled = local_assigns.has_key?(:disabled) ? disabled : false
-  end_attribute = local_assigns.has_key?(:end_attribute) ? end_attribute : nil
-  float = local_assigns.has_key?(:float) ? float : false
-  label = local_assigns.has_key?(:label) ? label : nil
-  prepend = local_assigns.has_key?(:prepend) ? prepend : nil
-  readonly = local_assigns.has_key?(:readonly) ? readonly : false
-  required = local_assigns.has_key?(:required) ? required : false
-  start_attribute = local_assigns.has_key?(:start_attribute) ? start_attribute : nil
-
-  start_date = form.object&.send(start_attribute)&.strftime('%d/%m/%Y')
-  end_date = form.object&.send(end_attribute)&.strftime('%d/%m/%Y')
-
-  template_locals = {
-    form: form,
-    append: append,
-    prepend: prepend,
-    float: float,
-    label: label,
-    class: class_names,
-    disabled: disabled,
-    readonly: readonly,
-    required: required,
-    start_attribute: start_attribute,
-    end_attribute: end_attribute,
-    data: data.merge(
+  start_attribute = local_assigns[:start_attribute]
+  end_attribute = local_assigns[:end_attribute]
+  options = local_assigns.merge(
+    attribute: local_assigns[:attribute] || :period,
+    data: {
+      action: 'change->date-range#update',
       'flatpickr-target': 'input',
       'flatpickr-options': {
         mode: 'range',
-        defaultDate: [start_date, end_date]
+        defaultDate: [
+          form.object&.send(start_attribute)&.strftime('%d/%m/%Y'),
+          form.object&.send(end_attribute)&.strftime('%d/%m/%Y'),
+        ]
       }
-    ),
-    single: true
-  }
+    }
+  )
 %>
 
 <div data-controller="flatpickr">
-  <%= render 'headmin/forms/date_range', template_locals %>
+  <div data-controller="date-range">
+    <%= render 'headmin/forms/hidden', form: form, attribute: start_attribute, data: { 'date-range-target': 'startDateInput' } %>
+    <%= render 'headmin/forms/hidden', form: form, attribute: end_attribute, data: { 'date-range-target': 'endDateInput' } %>
+    <%= render 'headmin/forms/date', options %>
+  </div>
 </div>

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

@@ -1,23 +1,24 @@
 <%
   # headmin/forms/hidden
   #
-  # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>data<tt> - Optional HTML data attributes
-  # * <tt>class<tt> - Optional HTML class attribute
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  #
+  # ==== Optional parameters
+  # * +autocomplete+ - Value to be autofilled by the browser
+  # * +data+ - Optional HTML data attributes
+  #
+  # ==== References
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/text_field
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/hidden', form: form, attribute: :title %#>
 
-  data = local_assigns.has_key?(:data) ? data : nil
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-
-  options = {
-    data: data,
-    class: class_names,
-  }
+  option_keys = %i(autocomplete data)
+  options = local_assigns.slice(*option_keys)
 %>
 
 <%= form.hidden_field(attribute, options) %>

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

@@ -1,55 +1,21 @@
 <%
   # name: headmin/forms/image
   #
-  # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  #
+  # ==== Extra parameters
+  # Listed in 'headmin/forms/file'
+  # Listed in 'headmin/forms/base'
   #
   # ==== 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
-
-  has_image = form.object.send(attribute).attached?
-
-  options = {
-    'aria-describedby': form_field_validation_id(form, attribute),
-    class: "form-control #{form_field_validation_class(form, attribute)} #{class_names}",
-    data: data,
-    disabled: disabled,
-    placeholder: attribute,
-    readonly: readonly,
-    required: has_image ? false : required,
-  }
-
-  show_label = label != false
+  options = local_assigns.merge(
+    accept: 'image/*'
+  )
 %>
 
-<div class="<%= ('mb-3 text-start' if show_label) %>">
-
-  <% if show_label %>
-    <%= render 'headmin/forms/label', form: form, attribute: attribute, name: label, required: required %>
-  <% end %>
-
-  <div class="mb-2">
-    <% if has_image %>
-      <%= image_tag(form.object.send(attribute).variant(resize_to_limit: [200, 200], quality: 70), class: 'img-thumbnail') %>
-    <% else %>
-      <svg class="img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false">
-        <title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title>
-        <rect width="100%" height="100%" fill="#e9ecef"></rect>
-        <text x="35%" y="50%" fill="#212529" dy=".3em">200x200</text>
-      </svg>
-    <% end %>
-  </div>
-
-  <%= form.file_field(attribute, options) %>
-  <%= render 'headmin/forms/validation', form: form, attribute: attribute %>
-</div>
+<%= render 'headmin/forms/file', options %>

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

@@ -1,26 +1,30 @@
 <%
   # name: headmin/forms/label
   #
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  #
   # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>name<tt> - Custom label to be used instead of the attribute
-  # * <tt>required<tt> - Set to true if you want to highlight the requirement
+  # * +class+ - Optional HTML class attribute
+  # * +for+ - Set reference to the input id
+  # * +required+ - Set to true if you want to highlight the requirement
+  # * +text+ - Custom label to be used instead of the attribute
+  #
+  # ==== References
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
+  # https://apidock.com/rails/v5.2.3/ActionView/Helpers/FormHelper/label
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/label', form: form, attribute: :image %#>
 
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  custom_name = local_assigns.has_key?(:name) && name ? t("attributes.#{name}") : nil
-  required = local_assigns.has_key?(:required) ? required : false
-  form_id = form.options.has_key?(:id) ? form.options[:id] : nil
-
-  options = {
-    class: "form-label #{class_names}",
-    form: form_id,
-    required: required,
+  text = local_assigns[:text]
+  default_options = {
+    class: ['form-label', local_assigns[:class]].join(' '),
+    form: form.options[:id],
   }
+  options = default_options.merge(local_assigns.slice(*%i(for required)).compact)
 %>
 
-<%= form.label attribute, custom_name, options %>
+<%= form.label attribute, text, options %>

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

@@ -1,50 +1,53 @@
 <%
   # headmin/forms/number
   #
-  # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>float<tt> - Set to true if you want to show floating labels
-  # * <tt>collection<tt> - Add array of options to show in a data list
-  # * <tt>append<tt> - Text or icon to be shown on the left hand side of the input, Doesn't work with float
-  # * <tt>prepend<tt> - Text or icon to be shown on the right hand side of the input, Doesn't work with float
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  #
+  # ==== 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+ - Provide a hash to define all data attributes
+  # * +disabled+ - Sets the placeholder of the field
+  # * +id+ - Input identifier
+  # * +in+ -  Range specifying the +min+ and +max+ values
+  # * +list+ - Add array of options to show in a data list
+  # * +max+ - The maximum acceptable value
+  # * +min+ - The minimum acceptable value
+  # * +placeholder+ - Sets the placeholder of the field
+  # * +readonly+ - Sets the placeholder of the field
+  # * +required+ - Set to true to mark as required
+  # * +step+ - The acceptable value granularity
+  # * +value+ - Overrides the value of the form
+  # * +within+ - Same as +in+
+  #
+  # ==== Extra parameters
+  # Listed in 'headmin/forms/base'
+  #
+  # ==== References
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/number_field
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/number', form: form, attribute: :amount %#>
+  #
+  #   With data-list
+  #   <%= render 'headmin/forms/number', form: form, attribute: :amount, list: [2,4,6,8,10] %#>
 
-  append = local_assigns.has_key?(:append) ? append : nil
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  collection = local_assigns.has_key?(:collection) ? collection : nil
-  data = local_assigns.has_key?(:data) ? data : nil
-  disabled = local_assigns.has_key?(:disabled) ? disabled : false
-  float = local_assigns.has_key?(:float) ? float : false
-  label = local_assigns.has_key?(:label) ? label : nil
-  prepend = local_assigns.has_key?(:prepend) ? prepend : nil
-  readonly = local_assigns.has_key?(:readonly) ? readonly : false
-  required = local_assigns.has_key?(:required) ? required : false
+  placeholder = local_assigns[:float] ? local_assigns[:placeholder] || attribute : local_assigns[:placeholder]
 
-  options = {
-    'aria-describedby': form_field_validation_id(form, attribute),
-    class: "form-control #{form_field_validation_class(form, attribute)} #{class_names}",
-    data: data,
-    disabled: disabled,
-    list: collection ? attribute : nil,
-    placeholder: attribute,
-    readonly: readonly,
-    required: required,
-  }
+  option_keys = %i(aria autocomplete autofocus data disabled id in list max min placeholder readonly required step value within)
+  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
+  )
 %>
 
-<%= render 'headmin/forms/base', form: form, attribute: attribute, append: append, prepend: prepend, float: float, label: label, required: required do |form| %>
+<%= render 'headmin/forms/base', local_assigns do |form| %>
   <%= form.number_field(attribute, options) %>
 <% end %>
-
-<% if collection %>
-  <datalist id="<%= attribute %>">
-    <% collection.each do |key, value| %>
-      <option value="<%= value %>"><%= key %></option>
-    <% end %>
-  </datalist>
-<% end %>