Support readonly for all fields

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: """

lib/backpex/fields/belongs_to.ex

@@ -143,6 +143,8 @@ defmodule Backpex.Fields.BelongsTo do
           field={@form[@owner_key]}
           options={@options}
           prompt={@prompt}
+          readonly={@readonly}
+          disabled={@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)}

lib/backpex/fields/boolean.ex

@@ -42,6 +42,7 @@ defmodule Backpex.Fields.Boolean do
         <BackpexForm.input
           type="toggle"
           field={@form[@name]}
+          disabled={@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)}

lib/backpex/fields/currency.ex

@@ -98,6 +98,8 @@ defmodule Backpex.Fields.Currency do
         <BackpexForm.currency_input
           type="text"
           field={@form[@name]}
+          readonly={@readonly}
+          disabled={@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)}

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}]}
     ]
   ]
 

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}]}
     ]
   ]
 

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}]}
     ]
   ]
 

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

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>
 

lib/backpex/fields/inline_crud.ex

@@ -180,14 +180,15 @@ defmodule Backpex.Fields.InlineCRUD do
               <div class={if f_nested.index == 0, do: "mt-5", else: nil}>
                 <label for={"#{@name}-checkbox-delete-#{f_nested.index}"}>
                   <input
+                    :if={not @readonly}
                     id={"#{@name}-checkbox-delete-#{f_nested.index}"}
                     type="checkbox"
                     name={"change[#{@name}_delete][]"}
                     value={f_nested.index}
                     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 +200,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)}

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}

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}]}
     ]
   ]
 

lib/backpex/fields/select.ex

@@ -77,6 +77,8 @@ defmodule Backpex.Fields.Select do
           field={@form[@name]}
           options={@options}
           prompt={@prompt}
+          readonly={@readonly}
+          disabled={@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)}

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}]}
     ]
   ]
 

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}]}
     ]
   ]
 

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}]}
     ]
   ]
 

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"

lib/backpex/fields/url.ex

@@ -62,6 +62,8 @@ 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}
+          disabled={@readonly}
         />
       </Layout.field_container>
     </div>

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, doc: "whether the dropdown is readonly"
   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"}

lib/backpex/html/form.ex

@@ -286,6 +286,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, doc: "whether the dropdown is readonly"
   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 +310,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 +321,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 +386,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">

lib/backpex/html/resource.ex

@@ -175,7 +175,14 @@ defmodule Backpex.HTML.Resource do
       |> assign(:field, field)
       |> assign(:field_options, field_options)
       |> assign(:type, :form)
-      |> assign(:readonly, Backpex.Field.readonly?(field_options, assigns))
+
+    # this is needed to apply `:readonly` to individual fields in `Backpex.Fields.InlineCRUD`
+    assigns =
+      if assigns[:readonly] do
+        assigns
+      else
+        assign(assigns, :readonly, Backpex.Field.readonly?(field_options, assigns))
+      end
 
     ~H"""
     <.live_component