improvements on input components for form

daisy_ui_components_site/storybook/components/button.story.exs

@@ -130,9 +130,6 @@ defmodule Storybook.Components.Button do
       },
       %Variation{
         id: :button_loading_with_spinner_and_text,
-        attributes: %{
-          shape: "square"
-        },
         slots: [
           """
           <span class="loading loading-spinner"></span>

daisy_ui_components_site/storybook/components/text_input.story.exs

@@ -0,0 +1,68 @@
+defmodule Storybook.Components.TextInput do
+  use PhoenixStorybook.Story, :component
+
+  alias DaisyUIComponents.Utils
+
+  def function, do: &DaisyUIComponents.TextInput.text_input/1
+
+  def imports,
+    do: [
+      {DaisyUIComponents.Icon, [icon: 1]}
+    ]
+
+  def variations do
+    [
+      %Variation{
+        id: :text_input,
+        attributes: %{
+          type: "text",
+          placeholder: "Type here",
+          class: "w-full max-w-xs"
+        }
+      },
+      %Variation{
+        id: :text_input_with_border,
+        attributes: %{
+          type: "text",
+          bordered: true,
+          placeholder: "Type here",
+          class: "w-full max-w-xs"
+        }
+      },
+      %Variation{
+        id: :text_input_ghost,
+        attributes: %{
+          type: "text",
+          ghost: true,
+          placeholder: "Type here",
+          class: "w-full max-w-xs"
+        }
+      },
+      %VariationGroup{
+        id: :colors,
+        variations:
+          for color <- Utils.colors() do
+            %Variation{
+              id: String.to_atom(color),
+              attributes: %{
+                type: "text",
+                bordered: true,
+                placeholder: "Type here",
+                class: "w-full max-w-xs",
+                color: color
+              }
+            }
+          end
+      },
+      %Variation{
+        id: :text_input_disabled,
+        attributes: %{
+          type: "text",
+          disabled: true,
+          placeholder: "You can't touch this",
+          class: "w-full max-w-xs"
+        }
+      }
+    ]
+  end
+end

daisy_ui_components_site/storybook/examples/core_components.story.exs

@@ -1,6 +1,7 @@
 defmodule Storybook.Examples.CoreComponents do
   use PhoenixStorybook.Story, :example
   use DaisyUIComponents
+
   import DaisyUIComponents.CoreComponents
 
   alias Phoenix.LiveView.JS
@@ -39,13 +40,13 @@ defmodule Storybook.Examples.CoreComponents do
     </.header>
     <.table id="user-table" rows={@users}>
       <:col :let={user} label="Id">
-        <%= user.id %>
+        {user.id}
       </:col>
       <:col :let={user} label="First name">
-        <%= user.first_name %>
+        {user.first_name}
       </:col>
       <:col :let={user} label="Last name">
-        <%= user.last_name %>
+        {user.last_name}
       </:col>
     </.table>
     <.modal id="new-user-modal">

lib/daisy_ui_components/form.ex

@@ -118,11 +118,11 @@ defmodule DaisyUIComponents.Form do
         multiple={@multiple}
         class={@class}
         bordered={@bordered}
+        prompt={@prompt}
+        options={@options}
+        value={@value}
         {@rest}
-      >
-        <option :if={@prompt} value="">{@prompt}</option>
-        {Phoenix.HTML.Form.options_for_select(@options, @value)}
-      </.input>
+      />
       <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """

lib/daisy_ui_components/input.ex

@@ -21,50 +21,84 @@ defmodule DaisyUIComponents.Input do
   """
   attr :id, :any, default: nil
 
+  attr :value, :any
+
   attr :type, :string,
     default: "text",
     values: ~w(checkbox color date datetime-local email file hidden month number password
                range radio search select tel text textarea time url week)
 
+  attr :field, Phoenix.HTML.FormField,
+    doc: "a form field struct retrieved from the form, for example: @form[:email]"
+
   attr :bordered, :boolean, default: false
+  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
+  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
+  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
+  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
 
   attr :rest, :global,
-    include:
-      ~w(name value checked prompt options multiple autocomplete cols disabled form list max maxlength min minlength
+    include: ~w(name autocomplete cols disabled form list max maxlength min minlength
                 pattern placeholder readonly required rows size step)
 
   slot :inner_block
 
+  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    assigns
+    |> assign(field: nil, id: assigns.id || field.id)
+    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
+    |> assign_new(:value, fn -> field.value end)
+    |> input()
+  end
+
   def input(%{type: "checkbox"} = assigns) do
+    assigns =
+      assigns
+      |> assign_new(:checked, fn ->
+        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+      end)
+
     ~H"""
-    <.checkbox id={@id} {@rest} />
+    <.checkbox id={@id} checked={@checked} value={@value} {@rest} />
     """
   end
 
   def input(%{type: "select"} = assigns) do
     ~H"""
-    <.select id={@id} bordered={@bordered} {@rest}>
-      {render_slot(@inner_block)}
+    <.select id={@id} bordered={@bordered} multiple={@multiple} {@rest}>
+      <option :if={@prompt} value="">{@prompt}</option>
+      {Phoenix.HTML.Form.options_for_select(@options, @value)}
     </.select>
     """
   end
 
   def input(%{type: "textarea"} = assigns) do
     ~H"""
-    <.textarea id={@id} bordered={@bordered} {@rest} />
+    <.textarea
+      id={@id}
+      bordered={@bordered}
+      value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+      {@rest}
+    />
     """
   end
 
   def input(%{type: "range"} = assigns) do
     ~H"""
-    <.range id={@id} {@rest} />
+    <.range id={@id} value={Phoenix.HTML.Form.normalize_value(@type, @value)} {@rest} />
     """
   end
 
   # All other inputs text, datetime-local, url, password, etc. are handled here...
   def input(assigns) do
     ~H"""
-    <.text_input id={@id} type={@type} bordered={@bordered} {@rest} />
+    <.text_input
+      id={@id}
+      type={@type}
+      bordered={@bordered}
+      value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+      {@rest}
+    />
     """
   end
 end

lib/daisy_ui_components/range.ex

@@ -10,6 +10,7 @@ defmodule DaisyUIComponents.Range do
   use DaisyUIComponents.Component
 
   attr :class, :any, default: nil
+  attr :value, :any, default: nil
   attr :color, :string, values: colors()
   attr :size, :string, values: sizes()
   attr :min, :integer, default: nil
@@ -20,8 +21,8 @@ defmodule DaisyUIComponents.Range do
   def range(assigns) do
     assigns =
       assigns
-      |> assign(:color_class, range_color(assigns[:color]))
-      |> assign(:size_class, range_size(assigns[:size]))
+      |> assign_new(:color_class, fn -> range_color(assigns[:color]) end)
+      |> assign_new(:size_class, fn -> range_size(assigns[:size]) end)
 
     ~H"""
     <input
@@ -30,6 +31,7 @@ defmodule DaisyUIComponents.Range do
       min={@min}
       max={@max}
       step={@step}
+      value={@value}
       {@rest}
     />
     """

test/daisy_ui_components/input_test.exs

@@ -24,9 +24,7 @@ defmodule DaisyUIComponents.InputTest do
 
     select_input =
       rendered_to_string(~H"""
-      <.input type="select" color="primary" size="xs">
-        <option selected value="admin">admin</option>
-      </.input>
+      <.input type="select" color="primary" size="xs" options={[admin: "admin"]} value="admin" />
       """)
 
     assert select_input =~ ~s(<select class="select select-primary select-xs">)