Use to_form helper for forms and refactor inputs

demo/lib/demo_web/live/home_live/index.html.heex

@@ -39,12 +39,7 @@
           Get notified when we're launching.
         </h2>
         <.form :if={not @subscribed?} class="mt-4 flex gap-x-4" for={@form} phx-change="validate" phx-submit="subscribe">
-          <%= Phoenix.HTML.Form.text_input(
-            @form,
-            :email,
-            class: "input input-bordered h-12 w-64"
-          ) %>
-
+          <input type="text" name={@form[:email].name} class="input input-bordered h-12 w-64" />
           <button class="btn" type="submit" class="mr-6" color="white">Subscribe</button>
         </.form>
 

lib/backpex/fields/belongs_to.ex

@@ -10,7 +10,6 @@ defmodule Backpex.Fields.BelongsTo do
     * `:options_query` - Manipulates the list of available options in the select.
       Defaults to `fn (query, _field) -> query end` which returns all entries.
     * `:prompt` - The text to be displayed when no option is selected.
-      Allows the same values as [`Phoenix.Html.Form.select`](https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#select/4) for customization of the prompt.
 
   ## Example
 
@@ -96,8 +95,7 @@ defmodule Backpex.Fields.BelongsTo do
         </:label>
         <BackpexForm.field_input
           type="select"
-          form={@form}
-          field_name={@owner_key}
+          field={@form[@owner_key]}
           field_options={@field_options}
           options={@options}
           {@prompt}

lib/backpex/fields/boolean.ex

@@ -27,8 +27,7 @@ defmodule Backpex.Fields.Boolean do
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
           <Layout.input_label text={@field_options[:label]} />
         </:label>
-        <BackpexForm.field_input type="toggle" form={@form} field_name={@name} field_options={@field_options} />
-        <BackpexForm.error_tag form={@form} name={@name} field_options={@field_options} />
+        <BackpexForm.field_input type="toggle" field={@form[@name]} field_options={@field_options} />
       </Layout.field_container>
     </div>
     """

lib/backpex/fields/currency.ex

@@ -63,8 +63,7 @@ defmodule Backpex.Fields.Currency do
         </:label>
         <BackpexForm.field_input
           type="number"
-          form={@form}
-          field_name={@name}
+          field={@form[@name]}
           field_options={@field_options}
           value={@casted_value}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}

lib/backpex/fields/date.ex

@@ -58,8 +58,7 @@ defmodule Backpex.Fields.Date do
         </:label>
         <BackpexForm.field_input
           type="date"
-          form={@form}
-          field_name={@name}
+          field={@form[@name]}
           field_options={@field_options}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}
@@ -79,8 +78,7 @@ defmodule Backpex.Fields.Date do
         </:label>
         <BackpexForm.field_input
           type="date"
-          form={@form}
-          field_name={@name}
+          field={@form[@name]}
           field_options={@field_options}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}

lib/backpex/fields/date_time.ex

@@ -58,8 +58,7 @@ defmodule Backpex.Fields.DateTime do
         </:label>
         <BackpexForm.field_input
           type="datetime-local"
-          form={@form}
-          field_name={@name}
+          field={@form[@name]}
           field_options={@field_options}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}
@@ -79,8 +78,7 @@ defmodule Backpex.Fields.DateTime do
         </:label>
         <BackpexForm.field_input
           type="datetime-local"
-          form={@form}
-          field_name={@name}
+          field={@form[@name]}
           field_options={@field_options}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}

lib/backpex/fields/has_many.ex

@@ -216,13 +216,12 @@ defmodule Backpex.Fields.HasMany do
           <Layout.input_label text={@field_options[:label]} />
         </:label>
         <.multi_select
-          form={@form}
+          field={@form[@name]}
           prompt={@prompt}
           not_found_text={@not_found_text}
           options={@options}
           selected={@selected}
           search_input={@search_input}
-          name={@name}
           field_options={@field_options}
           show_select_all={@show_select_all}
           show_more={@show_more}

lib/backpex/fields/has_many_through.ex

@@ -533,13 +533,7 @@ defmodule Backpex.Fields.HasManyThrough do
       <:label>
         <Layout.input_label text={@label} />
       </:label>
-      <BackpexForm.field_input
-        type="select"
-        form={@form}
-        field_name={@owner_key}
-        field_options={@field_options}
-        options={@options}
-      />
+      <BackpexForm.field_input type="select" field={@form[@owner_key]} field_options={@field_options} options={@options} />
     </Layout.field_container>
     """
   end

lib/backpex/fields/inline_crud.ex

@@ -131,8 +131,7 @@ defmodule Backpex.Fields.InlineCRUD do
                 </p>
                 <BackpexForm.field_input
                   type={input_type(child_field_options) |> Atom.to_string()}
-                  form={f_nested}
-                  field_name={child_field_name}
+                  field={f_nested[child_field_name]}
                   field_options={child_field_options}
                 />
               </div>

lib/backpex/fields/many_to_many.ex

@@ -216,13 +216,12 @@ defmodule Backpex.Fields.ManyToMany do
           <Layout.input_label text={@field_options[:label]} />
         </:label>
         <.multi_select
-          form={@form}
+          field={@form[@name]}
           prompt={@prompt}
           not_found_text={@not_found_text}
           options={@options}
           selected={@selected}
           search_input={@search_input}
-          name={@name}
           field_options={@field_options}
           show_select_all={@show_select_all}
           show_more={@show_more}

lib/backpex/fields/multi_select.ex

@@ -128,13 +128,12 @@ defmodule Backpex.Fields.MultiSelect do
           <Layout.input_label text={@field_options[:label]} />
         </:label>
         <.multi_select
-          form={@form}
+          field={@form[@name]}
           prompt={@prompt}
           not_found_text={@not_found_text}
           options={@options}
           selected={@selected}
           search_input={@search_input}
-          name={@name}
           field_options={@field_options}
           show_select_all={@show_select_all}
           show_more={false}

lib/backpex/fields/number.ex

@@ -29,7 +29,7 @@ defmodule Backpex.Fields.Number do
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
           <Layout.input_label text={@field_options[:label]} />
         </:label>
-        <BackpexForm.field_input type="text" form={@form} field_name={@name} field_options={@field_options} />
+        <BackpexForm.field_input type="text" field={@form[@name]} field_options={@field_options} />
       </Layout.field_container>
     </div>
     """
@@ -43,46 +43,32 @@ defmodule Backpex.Fields.Number do
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
           <Layout.input_label text={@field_options[:label]} />
         </:label>
-        <BackpexForm.field_input
-          type="text"
-          form={@form}
-          field_name={@name}
-          field_options={@field_options}
-          readonly
-          disabled
-        />
+        <BackpexForm.field_input type="text" field={@form[@name]} field_options={@field_options} readonly disabled />
       </Layout.field_container>
     </div>
     """
   end
 
   @impl Backpex.Field
   def render_index_form(assigns) do
+    form = to_form(%{"value" => assigns.value}, as: :index_form)
+
     assigns =
       assigns
-      |> assign(:input_id, "index_input_#{assigns.item.id}_#{assigns.name}")
+      |> assign(:form, form)
       |> assign_new(:valid, fn -> true end)
 
     ~H"""
     <div>
-      <.form
-        :let={f}
-        for={%{}}
-        as={:index_form}
-        class="relative"
-        phx-change="update-field"
-        phx-submit="update-field"
-        phx-target={@myself}
-      >
-        <%= Phoenix.HTML.Form.text_input(
-          f,
-          :index_input,
-          class: ["input input-sm", if(@valid, do: "hover:input-bordered", else: "input-error")],
-          value: @value,
-          phx_debounce: "100",
-          readonly: @readonly,
-          id: @input_id
-        ) %>
+      <.form for={@form} class="relative" phx-change="update-field" phx-submit="update-field" phx-target={@myself}>
+        <input
+          type="text"
+          name={@form[:value].name}
+          value={@form[:value].value}
+          class={["input input-sm", @valid && "hover:input-bordered", !@valid && "input-error"]}
+          phx-debounce="100"
+          readonly={@readonly}
+        />
       </.form>
     </div>
     """

lib/backpex/fields/select.ex

@@ -6,7 +6,6 @@ defmodule Backpex.Fields.Select do
 
     * `:options` - Required (keyword) list of options to be used for the select.
     * `:prompt` - The text to be displayed when no option is selected.
-      Allows the same values as [`Phoenix.Html.Form.select`](https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#select/4) for customization of the prompt.
 
   ## Example
 
@@ -54,8 +53,7 @@ defmodule Backpex.Fields.Select do
         </:label>
         <BackpexForm.field_input
           type="select"
-          form={@form}
-          field_name={@name}
+          field={@form[@name]}
           field_options={@field_options}
           options={@options}
           {@prompt}
@@ -67,43 +65,34 @@ defmodule Backpex.Fields.Select do
 
   @impl Backpex.Field
   def render_index_form(assigns) do
+    form = to_form(%{"value" => assigns.value}, as: :index_form)
     options = Map.get(assigns.field_options, :options)
 
     assigns =
       assigns
-      |> assign(:input_id, "index_input_#{assigns.item.id}_#{assigns.name}")
-      |> assign_new(:valid, fn -> true end)
+      |> assign(:form, form)
       |> assign(:options, options)
+      |> assign_new(:valid, fn -> true end)
       |> assign_prompt(assigns.field_options)
 
     ~H"""
     <div>
-      <.form
-        :let={f}
-        for={%{}}
-        as={:index_form}
-        class="relative"
-        phx-change="update-field"
-        phx-submit="update-field"
-        phx-target={@myself}
-      >
-        <%= Phoenix.HTML.Form.select(
-          f,
-          :index_input,
-          @options,
-          class: ["select select-sm", if(@valid, do: "hover:input-bordered", else: "select-error")],
-          selected: @value,
-          disabled: @readonly,
-          id: @input_id,
-          prompt: Map.get(@prompt, :prompt)
-        ) %>
+      <.form for={@form} class="relative" phx-change="update-field" phx-submit="update-field" phx-target={@myself}>
+        <select
+          name={@form[:value].name}
+          class={["select select-sm", if(@valid, do: "hover:input-bordered", else: "select-error")]}
+          disabled={@readonly}
+        >
+          <option :if={@prompt} value=""><%= Map.get(@prompt, :prompt) %></option>
+          <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
+        </select>
       </.form>
     </div>
     """
   end
 
   @impl Phoenix.LiveComponent
-  def handle_event("update-field", %{"index_form" => %{"index_input" => value}}, socket) do
+  def handle_event("update-field", %{"index_form" => %{"value" => value}}, socket) do
     Backpex.Field.handle_index_editable(socket, %{} |> Map.put(socket.assigns.name, value))
   end
 

lib/backpex/fields/text.ex

@@ -27,7 +27,7 @@ defmodule Backpex.Fields.Text do
         <:label align={Backpex.Field.align_label(@field_options, assigns, :center)}>
           <Layout.input_label text={@field_options[:label]} />
         </:label>
-        <BackpexForm.field_input type="text" form={@form} field_name={@name} field_options={@field_options} />
+        <BackpexForm.field_input type="text" field={@form[@name]} field_options={@field_options} />
       </Layout.field_container>
     </div>
     """
@@ -41,53 +41,39 @@ defmodule Backpex.Fields.Text do
         <:label align={Backpex.Field.align_label(@field_options, assigns, :center)}>
           <Layout.input_label text={@field_options[:label]} />
         </:label>
-        <BackpexForm.field_input
-          type="text"
-          form={@form}
-          field_name={@name}
-          field_options={@field_options}
-          readonly
-          disabled
-        />
+        <BackpexForm.field_input type="text" field={@form[@name]} field_options={@field_options} readonly disabled />
       </Layout.field_container>
     </div>
     """
   end
 
   @impl Backpex.Field
   def render_index_form(assigns) do
+    form = to_form(%{"value" => assigns.value}, as: :index_form)
+
     assigns =
       assigns
-      |> assign(:input_id, "index_input_#{assigns.item.id}_#{assigns.name}")
+      |> assign(:form, form)
       |> assign_new(:valid, fn -> true end)
 
     ~H"""
     <div>
-      <.form
-        :let={f}
-        for={%{}}
-        as={:index_form}
-        class="relative"
-        phx-change="update-field"
-        phx-submit="update-field"
-        phx-target={@myself}
-      >
-        <%= Phoenix.HTML.Form.text_input(
-          f,
-          :index_input,
-          class: ["input input-sm", if(@valid, do: "hover:input-bordered", else: "input-error")],
-          value: @value,
-          phx_debounce: "100",
-          readonly: @readonly,
-          id: @input_id
-        ) %>
+      <.form for={@form} class="relative" phx-change="update-field" phx-submit="update-field" phx-target={@myself}>
+        <input
+          type="text"
+          name={@form[:value].name}
+          value={@form[:value].value}
+          class={["input input-sm", @valid && "hover:input-bordered", !@valid && "input-error"]}
+          phx-debounce="100"
+          readonly={@readonly}
+        />
       </.form>
     </div>
     """
   end
 
   @impl Phoenix.LiveComponent
-  def handle_event("update-field", %{"index_form" => %{"index_input" => value}}, socket) do
+  def handle_event("update-field", %{"index_form" => %{"value" => value}}, socket) do
     Backpex.Field.handle_index_editable(socket, %{} |> Map.put(socket.assigns.name, value))
   end
 end