headmin 0.3.4 → 0.4.2

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 %>

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

@@ -3,48 +3,39 @@
   #
   # ==== 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
-  # * +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'
+  # * +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
   #
   # ==== Examples
   #   Basic version
-  #   <%= render 'headmin/forms/flatpickr_range', form: form, start_attribute: :start_date, end_attribute: :end_date %#>
+  #   <%= form_with do |form| %#>
+  #     <%= render 'headmin/forms/flatpickr_range', form: form, start: {attribute: :start_date}, end: {attribute: :end_date} %#>
+  #   <% end %#>
 
-  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: [
-          form.object&.send(start_attribute)&.strftime('%d/%m/%Y'),
-          form.object&.send(end_attribute)&.strftime('%d/%m/%Y'),
-        ]
-      }
-    }
-  )
+  flatpickr_range = Headmin::Form::FlatpickrRangeView.new(local_assigns)
 %>
 
-<div data-controller="flatpickr">
-  <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>
+<%= render "headmin/forms/wrapper", flatpickr_range.wrapper_options do %>
+  <%= form.hidden_field(flatpickr_range.start[:attribute], flatpickr_range.start_options) %>
+  <%= form.hidden_field(flatpickr_range.end[:attribute], flatpickr_range.end_options) %>
+
+  <%= render "headmin/forms/label", flatpickr_range.label_options if flatpickr_range.prepend_label? %>
+  <%= render "headmin/forms/input_group", flatpickr_range.input_group_options do %>
+    <%= form.date_field(flatpickr_range.attribute, flatpickr_range.input_options) %>
+  <% end %>
+  <%= render "headmin/forms/validation", flatpickr_range.validation_options if flatpickr_range.validate? %>
+  <%= render "headmin/forms/hint", flatpickr_range.hint_options if flatpickr_range.hint? %>
+  <%= render "headmin/forms/datalist", flatpickr_range.datalist_options if flatpickr_range.datalist? %>
+  <%= render "headmin/forms/label", flatpickr_range.label_options if flatpickr_range.append_label? %>
+<% end %>

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

@@ -2,23 +2,22 @@
   # headmin/forms/hidden
   #
   # ==== 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
+  # * +form+ - Form object
   #
   # ==== References
+  # https://headmin.dev/docs/forms/hidden
   # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden
-  # https://apidock.com/rails/ActionView/Helpers/FormHelper/text_field
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/hidden_field
   #
   # ==== Examples
   #   Basic version
-  #   <%= render 'headmin/forms/hidden', form: form, attribute: :title %#>
+  #   <%= form_with do |form| %#>
+  #     <%= render "headmin/forms/hidden", form: form, attribute: :id %#>
+  #   <% end %#>
 
-  option_keys = %i(autocomplete data)
-  options = local_assigns.slice(*option_keys)
+  hidden = Headmin::Form::HiddenView.new(local_assigns)
 %>
 
-<%= form.hidden_field(attribute, options) %>
+<%= form.hidden_field(attribute, hidden.input_options) %>
+

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

@@ -0,0 +1,16 @@
+<%
+  # headmin/forms/hint
+  #
+  # ==== Required parameters
+  # * +content+ - Content to be displayed as input hint
+  #
+  # ==== Examples
+  #   Basic version
+  #   <%= form_with do |form| %#>
+  #     <%= render "headmin/forms/hint", content: "Hello" %#>
+  #   <% end %#>
+
+  hint = Headmin::Form::HintView.new(local_assigns)
+%>
+
+<div class="form-text"><%= raw(hint.content) %></div>

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

@@ -0,0 +1,21 @@
+<% input_group = Headmin::Form::InputGroupView.new(local_assigns) %>
+
+<% if input_group.bypass %>
+  <%= yield %>
+<% else %>
+  <div <%= tag.attributes(input_group.options) %>>
+    <% if input_group.prepend %>
+      <span class="input-group-text">
+        <%= input_group.prepend %>
+      </span>
+    <% end %>
+
+    <%= yield %>
+
+    <% if input_group.append %>
+      <span class="input-group-text">
+        <%= input_group.append %>
+      </span>
+    <% end %>
+  </div>
+<% end %>

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

@@ -5,26 +5,18 @@
   # * +form+ - Form object
   # * +attribute+ - Name of the attribute of the form model
   #
-  # ==== Options
-  # * +class+ - Optional HTML class attribute
-  # * +for+ - Set reference to the input id
-  # * +required+ - Set to true if you want to highlight the requirement
+  # ==== Optional parameters
   # * +text+ - Custom label to be used instead of the attribute
   #
   # ==== References
+  # https://headmin.dev/docs/forms/label
   # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
-  # https://apidock.com/rails/v5.2.3/ActionView/Helpers/FormHelper/label
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/label
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/label', form: form, attribute: :image %#>
-
-  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, text, options %>
+<% label = Headmin::Form::LabelView.new(local_assigns) %>
+<%= form.label label.attribute, label.text, label.options %>

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

@@ -2,52 +2,40 @@
   # headmin/forms/number
   #
   # ==== 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+ - 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'
+  # * +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/number
   # 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] %#>
-
-  placeholder = local_assigns[:float] ? local_assigns[:placeholder] || attribute : local_assigns[:placeholder]
+  #   <%= form_with do |form| %#>
+  #     <%= render "headmin/forms/number", form: form, attribute: :number %#>
+  #   <% end %#>
 
-  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
-  )
+  number = Headmin::Form::NumberView.new(local_assigns)
 %>
 
-<%= render 'headmin/forms/base', local_assigns do |form| %>
-  <%= form.number_field(attribute, options) %>
+<%= render "headmin/forms/wrapper", number.wrapper_options do %>
+  <%= render "headmin/forms/label", number.label_options if number.prepend_label? %>
+  <%= render "headmin/forms/input_group", number.input_group_options do %>
+    <%= form.number_field(number.attribute, number.input_options) %>
+    <%= render "headmin/forms/datalist", number.datalist_options if number.datalist? %>
+  <% end %>
+  <%= render "headmin/forms/validation", number.validation_options if number.validate? %>
+  <%= render "headmin/forms/hint", number.hint_options if number.hint? %>
+  <%= render "headmin/forms/label", number.label_options if number.append_label? %>
 <% end %>