Support readonly for all fields

gmazzamuto · gmazzamuto · commit 30ef1e39d5cb · 2025-11-25T01:25:37.000+01:00
The `:readonly` field option, being shared among all fields, has been
moved to the `@config_schema` of `Backpex.Field`.
diff --git a/lib/backpex/field.ex b/lib/backpex/field.ex
@@ -11,6 +11,11 @@ defmodule Backpex.Field do
       type: :string,
       required: true
     ],
+    readonly: [
+      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
+      type: {:or, [:boolean, {:fun, 1}]},
+      default: false
+    ],
     class: [
       type: {:or, [:string, {:fun, 1}]},
       doc: """
diff --git a/lib/backpex/fields/belongs_to.ex b/lib/backpex/fields/belongs_to.ex
@@ -143,6 +143,7 @@ defmodule Backpex.Fields.BelongsTo do
           field={@form[@owner_key]}
           options={@options}
           prompt={@prompt}
+          readonly={@readonly}
           translate_error_fun={Backpex.Field.translate_error_fun(@field_options, assigns)}
           help_text={Backpex.Field.help_text(@field_options, assigns)}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
diff --git a/lib/backpex/fields/boolean.ex b/lib/backpex/fields/boolean.ex
@@ -42,6 +42,7 @@ defmodule Backpex.Fields.Boolean do
         <BackpexForm.input
           type="toggle"
           field={@form[@name]}
+          readonly={@readonly}
           translate_error_fun={Backpex.Field.translate_error_fun(@field_options, assigns)}
           help_text={Backpex.Field.help_text(@field_options, assigns)}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
diff --git a/lib/backpex/fields/currency.ex b/lib/backpex/fields/currency.ex
@@ -98,6 +98,7 @@ defmodule Backpex.Fields.Currency do
         <BackpexForm.currency_input
           type="text"
           field={@form[@name]}
+          readonly={@readonly}
           translate_error_fun={Backpex.Field.translate_error_fun(@field_options, assigns)}
           help_text={Backpex.Field.help_text(@field_options, assigns)}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
diff --git a/lib/backpex/fields/date.ex b/lib/backpex/fields/date.ex
@@ -17,10 +17,6 @@ defmodule Backpex.Fields.Date do
     throttle: [
       doc: "Timeout value (in milliseconds) or function that receives the assigns.",
       type: {:or, [:pos_integer, {:fun, 1}]}
-    ],
-    readonly: [
-      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
-      type: {:or, [:boolean, {:fun, 1}]}
     ]
   ]
 
diff --git a/lib/backpex/fields/date_time.ex b/lib/backpex/fields/date_time.ex
@@ -17,10 +17,6 @@ defmodule Backpex.Fields.DateTime do
     throttle: [
       doc: "Timeout value (in milliseconds) or function that receives the assigns.",
       type: {:or, [:pos_integer, {:fun, 1}]}
-    ],
-    readonly: [
-      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
-      type: {:or, [:boolean, {:fun, 1}]}
     ]
   ]
 
diff --git a/lib/backpex/fields/email.ex b/lib/backpex/fields/email.ex
@@ -11,10 +11,6 @@ defmodule Backpex.Fields.Email do
     throttle: [
       doc: "Timeout value (in milliseconds) or function that receives the assigns.",
       type: {:or, [:pos_integer, {:fun, 1}]}
-    ],
-    readonly: [
-      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
-      type: {:or, [:boolean, {:fun, 1}]}
     ]
   ]
 
diff --git a/lib/backpex/fields/has_many.ex b/lib/backpex/fields/has_many.ex
@@ -144,7 +144,7 @@ defmodule Backpex.Fields.HasMany do
           <Layout.input_label as="span" text={@field_options[:label]} />
         </:label>
 
-        <Backpex.HTML.CoreComponents.dropdown id={"has-many-dropdown-#{@name}"} class="w-full">
+        <Backpex.HTML.CoreComponents.dropdown id={"has-many-dropdown-#{@name}"} class="w-full" readonly={@readonly}>
           <:trigger
             class={[
               "input block h-fit w-full p-2",
@@ -154,12 +154,13 @@ defmodule Backpex.Fields.HasMany do
             aria_labelledby={Map.get(assigns, :aria_labelledby)}
           >
             <div class="flex h-full w-full flex-wrap items-center gap-1 px-2">
-              <p :if={@selected == []} class="p-0.5 text-sm">{@prompt}</p>
+              <p :if={@selected == []} class={["p-0.5 text-sm", @readonly && "text-base-content/40"]}>{@prompt}</p>
               <.badge
                 :for={{label, value} <- @selected}
                 live_resource={@live_resource}
                 label={label}
                 value={value}
+                readonly={@readonly}
                 name={@name}
               />
             </div>
@@ -302,10 +303,17 @@ defmodule Backpex.Fields.HasMany do
   end
 
   attr :live_resource, :atom, required: true
+  attr :readonly, :boolean, default: false
   attr :name, :string, required: true
   attr :label, :string, required: true
   attr :value, :string, required: true
 
+  defp badge(%{readonly: true} = assigns) do
+    ~H"""
+    <span class="badge badge-sm badge-soft">{@label}</span>
+    """
+  end
+
   defp badge(assigns) do
     ~H"""
     <div class="badge badge-sm badge-soft badge-primary pointer-events-auto pr-0">
diff --git a/lib/backpex/fields/has_many_through.ex b/lib/backpex/fields/has_many_through.ex
@@ -259,7 +259,7 @@ defmodule Backpex.Fields.HasManyThrough do
                 >
                   {label}
                 </th>
-                <th>
+                <th :if={not @readonly}>
                   <span class="sr-only">{Backpex.__("Actions", @live_resource)}</span>
                 </th>
               </tr>
@@ -289,7 +289,7 @@ defmodule Backpex.Fields.HasManyThrough do
                     {assigns}
                   />
                 </td>
-                <td>
+                <td :if={not @readonly}>
                   <div class="flex items-center space-x-2">
                     <button
                       class="cursor-pointer"
@@ -360,7 +360,13 @@ defmodule Backpex.Fields.HasManyThrough do
           </div>
         </.modal>
 
-        <button type="button" class="btn btn-sm btn-outline btn-primary" phx-click="new-relational" phx-target={@myself}>
+        <button
+          disabled={@readonly}
+          type="button"
+          class="btn btn-sm btn-outline btn-primary"
+          phx-click="new-relational"
+          phx-target={@myself}
+        >
           {@relational_title}
         </button>
 
diff --git a/lib/backpex/fields/inline_crud.ex b/lib/backpex/fields/inline_crud.ex
@@ -187,7 +187,7 @@ defmodule Backpex.Fields.InlineCRUD do
                     class="hidden"
                   />
 
-                  <div class="btn btn-outline btn-error">
+                  <div class={["btn btn-outline btn-error", @readonly && "btn-disabled"]}>
                     <span class="sr-only">{Backpex.__("Delete", @live_resource)}</span>
                     <Backpex.HTML.CoreComponents.icon name="hero-trash" class="size-5" />
                   </div>
@@ -199,6 +199,7 @@ defmodule Backpex.Fields.InlineCRUD do
           <input type="hidden" name={"change[#{@name}_delete][]"} tabindex="-1" aria-hidden="true" />
         </div>
         <input
+          disabled={@readonly}
           name={"change[#{@name}_order][]"}
           type="checkbox"
           aria-label={Backpex.__("Add entry", @live_resource)}
diff --git a/lib/backpex/fields/multi_select.ex b/lib/backpex/fields/multi_select.ex
@@ -161,6 +161,7 @@ defmodule Backpex.Fields.MultiSelect do
         </:label>
         <Form.multi_select
           field={@form[@name]}
+          readonly={@readonly}
           prompt={@prompt}
           not_found_text={@not_found_text}
           options={@options}
diff --git a/lib/backpex/fields/number.ex b/lib/backpex/fields/number.ex
@@ -11,10 +11,6 @@ defmodule Backpex.Fields.Number do
     throttle: [
       doc: "Timeout value (in milliseconds) or function that receives the assigns.",
       type: {:or, [:pos_integer, {:fun, 1}]}
-    ],
-    readonly: [
-      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
-      type: {:or, [:boolean, {:fun, 1}]}
     ]
   ]
 
diff --git a/lib/backpex/fields/select.ex b/lib/backpex/fields/select.ex
@@ -77,6 +77,7 @@ defmodule Backpex.Fields.Select do
           field={@form[@name]}
           options={@options}
           prompt={@prompt}
+          readonly={@readonly}
           translate_error_fun={Backpex.Field.translate_error_fun(@field_options, assigns)}
           help_text={Backpex.Field.help_text(@field_options, assigns)}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
diff --git a/lib/backpex/fields/text.ex b/lib/backpex/fields/text.ex
@@ -11,10 +11,6 @@ defmodule Backpex.Fields.Text do
     throttle: [
       doc: "Timeout value (in milliseconds) or function that receives the assigns.",
       type: {:or, [:pos_integer, {:fun, 1}]}
-    ],
-    readonly: [
-      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
-      type: {:or, [:boolean, {:fun, 1}]}
     ]
   ]
 
diff --git a/lib/backpex/fields/textarea.ex b/lib/backpex/fields/textarea.ex
@@ -16,10 +16,6 @@ defmodule Backpex.Fields.Textarea do
       doc: "Number of visible text lines for the control.",
       type: :non_neg_integer,
       default: 2
-    ],
-    readonly: [
-      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
-      type: {:or, [:boolean, {:fun, 1}]}
     ]
   ]
 
diff --git a/lib/backpex/fields/time.ex b/lib/backpex/fields/time.ex
@@ -17,10 +17,6 @@ defmodule Backpex.Fields.Time do
     throttle: [
       doc: "Timeout value (in milliseconds) or function that receives the assigns.",
       type: {:or, [:pos_integer, {:fun, 1}]}
-    ],
-    readonly: [
-      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
-      type: {:or, [:boolean, {:fun, 1}]}
     ]
   ]
 
diff --git a/lib/backpex/fields/upload.ex b/lib/backpex/fields/upload.ex
@@ -661,22 +661,28 @@ defmodule Backpex.Fields.Upload do
         <div
           id={"#{@name}-drop-target"}
           class="w-full max-w-lg"
-          phx-hook="BackpexDragHover"
+          phx-hook={not @readonly && "BackpexDragHover"}
           phx-drop-target={if @uploads_allowed, do: @upload.ref}
         >
           <div class={[
             "rounded-field flex justify-center border-2 border-dashed px-6 pt-5 pb-6",
             @errors == [] && "border-base-content/25",
-            @errors != [] && "border-error bg-error/10"
+            @errors != [] && "border-error bg-error/10",
+            @readonly && "bg-base-200 cursor-not-allowed"
           ]}>
             <div class="flex flex-col items-center space-y-1 text-center">
               <Backpex.HTML.CoreComponents.icon name="hero-document-arrow-up" class="text-base-content/50 h-8 w-8" />
               <div class="flex text-sm">
                 <label>
-                  <a class="link link-hover link-primary font-medium">
+                  <a class={not @readonly && "link link-hover link-primary font-medium"}>
                     {Backpex.__("Upload a file", @live_resource)}
                   </a>
-                  <.live_file_input :if={@uploads_allowed} upload={@upload} phx-target="#form-component" class="hidden" />
+                  <.live_file_input
+                    :if={@uploads_allowed and not @readonly}
+                    upload={@upload}
+                    phx-target="#form-component"
+                    class="hidden"
+                  />
                 </label>
                 <input
                   type="hidden"
diff --git a/lib/backpex/fields/url.ex b/lib/backpex/fields/url.ex
@@ -62,6 +62,7 @@ defmodule Backpex.Fields.URL do
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}
           aria-labelledby={Map.get(assigns, :aria_labelledby)}
+          readonly={@readonly}
         />
       </Layout.field_container>
     </div>
diff --git a/lib/backpex/html/core_components.ex b/lib/backpex/html/core_components.ex
@@ -38,6 +38,7 @@ defmodule Backpex.HTML.CoreComponents do
       </.dropdown>
   """
   attr :id, :string, required: true, doc: "unique identifier for the dropdown"
+  attr :readonly, :boolean, default: false
   attr :class, :any, default: nil, doc: "additional classes for the outer container element"
 
   slot :trigger, doc: "the trigger element to be used to toggle the dropdown menu" do
@@ -64,21 +65,38 @@ defmodule Backpex.HTML.CoreComponents do
         _trigger -> nil
       end)
 
+    trigger_class = (assigns.trigger && assigns.trigger[:class]) || ""
+
+    trigger_class =
+      if assigns.readonly do
+        ["cursor-not-allowed bg-base-200"] ++
+          (trigger_class
+           |> Enum.join(" ")
+           |> String.split()
+           |> List.delete("bg-transparent")
+           |> List.delete("input"))
+      else
+        trigger_class
+      end
+
+    assigns = assign(assigns, trigger_class: trigger_class)
+
     ~H"""
-    <div id={@id} class={["dropdown", @class]} {@rest}>
+    <div id={@id} class={[not @readonly && "dropdown", @class]} {@rest}>
       <div
         id={"#{@id}-trigger"}
         role="button"
         tabindex="0"
         aria-haspopup="true"
         aria-label={@trigger && @trigger[:aria_label]}
         aria-labelledby={@trigger && Map.get(@trigger, :aria_labelledby)}
-        class={@trigger && @trigger[:class]}
+        class={@trigger_class}
       >
         {render_slot(@trigger)}
       </div>
 
       <div
+        :if={not @readonly}
         id={"#{@id}-menu"}
         tabindex="-1"
         aria-labelledby={"#{@id}-trigger"}
diff --git a/lib/backpex/html/form.ex b/lib/backpex/html/form.ex
@@ -47,6 +47,13 @@ defmodule Backpex.HTML.Form do
   slot :inner_block
 
   def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    assigns =
+      if Map.has_key?(assigns.rest, :disabled) do
+        assigns
+      else
+        put_in(assigns, [:rest, :disabled], Map.get(assigns.rest, :readonly) || false)
+      end
+
     assigns
     |> prepare_field_assigns(field, assigns.translate_error_fun)
     |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
@@ -205,6 +212,13 @@ defmodule Backpex.HTML.Form do
               multiple pattern placeholder readonly required rows size step)
 
   def currency_input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    assigns =
+      if Map.has_key?(assigns.rest, :disabled) do
+        assigns
+      else
+        put_in(assigns, [:rest, :disabled], Map.get(assigns.rest, :readonly) || false)
+      end
+
     assigns
     |> prepare_field_assigns(field, assigns.translate_error_fun)
     |> assign_new(:name, fn -> field.name end)
@@ -286,6 +300,7 @@ defmodule Backpex.HTML.Form do
   @doc type: :component
 
   attr :prompt, :string, required: true, doc: "string that will be shown when no option is selected"
+  attr :readonly, :boolean, default: false
   attr :help_text, :string, default: nil, doc: "help text to be displayed below input"
   attr :not_found_text, :string, required: true, doc: "string that will be shown when there are no options"
   attr :options, :list, required: true, doc: "a list of options for the select"
@@ -309,7 +324,7 @@ defmodule Backpex.HTML.Form do
 
     ~H"""
     <div>
-      <.dropdown id={"multi-select-#{@field.id}"} class="w-full">
+      <.dropdown id={"multi-select-#{@field.id}"} class="w-full" readonly={@readonly}>
         <:trigger
           aria_label={@prompt}
           aria_labelledby={Map.get(assigns, :aria_labelledby)}
@@ -320,13 +335,14 @@ defmodule Backpex.HTML.Form do
           ]}
         >
           <div class="flex h-full w-full flex-wrap items-center gap-1 px-2">
-            <p :if={@selected == []} class="p-0.5 text-sm">{@prompt}</p>
+            <p :if={@selected == []} class={["p-0.5 text-sm", @readonly && "text-base-content/40"]}>{@prompt}</p>
             <.multi_select_badge
               :for={{label, value} <- @selected}
               live_resource={@live_resource}
               label={label}
               value={value}
               event_target={@event_target}
+              readonly={@readonly}
             />
           </div>
         </:trigger>
@@ -384,10 +400,17 @@ defmodule Backpex.HTML.Form do
   end
 
   attr :live_resource, :atom, required: true
+  attr :readonly, :boolean, default: false
   attr :label, :string, required: true
   attr :value, :any, required: true
   attr :event_target, :any, required: true
 
+  defp multi_select_badge(%{readonly: true} = assigns) do
+    ~H"""
+    <span class="badge badge-sm badge-soft">{@label}</span>
+    """
+  end
+
   defp multi_select_badge(assigns) do
     ~H"""
     <div class="badge badge-sm badge-soft badge-primary pointer-events-auto pr-0">
diff --git a/lib/backpex/html/resource.ex b/lib/backpex/html/resource.ex

Original file line number	Diff line number	Diff line change
`@@ -17,10 +17,6 @@ defmodule Backpex.Fields.Date do`
`17`	`17`	`throttle: [`
`18`	`18`	`doc: "Timeout value (in milliseconds) or function that receives the assigns.",`
`19`	`19`	`type: {:or, [:pos_integer, {:fun, 1}]}`
`20`		`- ],`
`21`		`- readonly: [`
`22`		`- doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",`
`23`		`- type: {:or, [:boolean, {:fun, 1}]}`
`24`	`20`	`]`
`25`	`21`	`]`
`26`	`22`
Original file line number	Diff line number	Diff line change
`@@ -11,10 +11,6 @@ defmodule Backpex.Fields.Email do`
`11`	`11`	`throttle: [`
`12`	`12`	`doc: "Timeout value (in milliseconds) or function that receives the assigns.",`
`13`	`13`	`type: {:or, [:pos_integer, {:fun, 1}]}`
`14`		`- ],`
`15`		`- readonly: [`
`16`		`- doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",`
`17`		`- type: {:or, [:boolean, {:fun, 1}]}`
`18`	`14`	`]`
`19`	`15`	`]`
`20`	`16`