array input

Author: tfwright

assets/css/default_overrides.css

@@ -311,6 +311,7 @@
                opacity:.5;
                background-color: darkgray;
                border:0;
+               pointer-events: none;
            }
 
            input[class$='loading'] + .select-options {
@@ -320,3 +321,46 @@
            button[class$='loading'] {
                opacity:.5;
            }
+
+
+           .array-input-wrapper {
+               border: 1px solid #e2e8f0;
+               border-radius: 8px;
+               padding: 2px;
+               display: flex;
+               flex-wrap: wrap;
+               gap: 8px;
+               min-height: 39px;
+               transition: border-color 0.2s;
+           }
+
+           .array-input-wrapper:focus-within {
+               border-color: var(--accent-color);
+               background: white;
+           }
+
+           .array-input-wrapper .btn {
+               height:32px;
+               padding: 0 10px;
+           }
+
+           @keyframes slideIn {
+               from {
+                   opacity: 0;
+                   transform: scale(0.8);
+               }
+               to {
+                   opacity: 1;
+                   transform: scale(1);
+               }
+           }
+
+           .array-input-wrapper input {
+               border: none;
+               outline: none;
+               flex: 1;
+               min-width: 120px;
+               font-size: 14px;
+               padding: 6px;
+               background: transparent;
+           }

assets/js/app.js

@@ -88,12 +88,18 @@ Hooks.SearchSelect = {
 
 Hooks.ArrayInput = {
   mounted() {
-    this.handleEvent("change", () => {
-      this.el
-        .querySelector("input")
-        .dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
-    });
+    this.el.querySelector("input").addEventListener("input", e => e.stopPropagation());
+
+    this.el.addEventListener("keydown", e => {
+       if (e.key === "Enter") {
+         e.target.blur()
+         e.preventDefault();
+       }
+     });
   },
+  updated() {
+    this.el.querySelector("input").addEventListener("input", e => e.stopPropagation());
+  }
 };
 
 Hooks.MapInput = {

dist/css/default_overrides.css

@@ -67,7 +67,7 @@ defmodule LiveAdmin.Components.Container.Form do
               phx-target={@myself}
               class="form-grid"
             >
-              <%= for {field, type, opts} <- Resource.fields(@resource, @config), f.data |> Ecto.primary_key() |> Keyword.keys() |> Enum.member?(field) |> Kernel.not() do %>
+              <%= for {field, type, opts} <- Resource.fields(@resource, @config), editable_inline?(f, field, type) do %>
                 <div class="form-field">
                   <div class="form-label">
                     {label(f, field, field |> humanize() |> trans())}
@@ -118,19 +118,14 @@ defmodule LiveAdmin.Components.Container.Form do
     """
   end
 
-  # <div class="detail-section">
-  #   <div class="form-field">
-  #     <label class="form-label" for="edit-description">Description</label>
-  #     <textarea id="edit-description" class="form-textarea">This task involves designing and implementing the complete database schema for Project Alpha. The schema has been optimized for performance and scalability, incorporating best practices for data normalization and indexing strategies.</textarea>
-  #   </div>
-  # </div>
+  defp editable_inline?(form, field, type) when type in [:id, :binary_id],
+    do: form.data |> Ecto.primary_key() |> Keyword.keys() |> Enum.member?(field) |> Kernel.not()
 
-  # <div class="detail-section">
-  #   <div class="form-field">
-  #     <label class="form-label" for="edit-notes">Notes</label>
-  #     <textarea id="edit-notes" class="form-textarea">Schema optimized - All tables have been reviewed and optimized. Foreign key relationships established. Indexes created for frequently queried columns. Migration scripts prepared for deployment.</textarea>
-  #   </div>
-  # </div>
+  defp editable_inline?(form, _, {_, {Ecto.Embedded, _}}), do: false
+
+  defp editable_inline?(form, _, :map), do: false
+
+  defp editable_inline?(_, _, _), do: true
 
   @impl true
   def handle_event(
@@ -189,24 +184,6 @@ defmodule LiveAdmin.Components.Container.Form do
     {:noreply, socket}
   end
 
-  # defp input(assigns = %{type: {_, {Ecto.Embedded, _}}}) do
-  #   ~H"""
-  #   <.embed
-  #     id={input_id(@form, @field)}
-  #     type={@type}
-  #     disabled={@disabled}
-  #     form={@form}
-  #     field={@field}
-  #     resource={@resource}
-  #     resources={@resource}
-  #     session={@session}
-  #     prefix={@prefix}
-  #     repo={@repo}
-  #     config={@config}
-  #   />
-  #   """
-  # end
-
   defp input(assigns = %{type: id}) when id in [:id, :binary_id] do
     assigns =
       assign(
@@ -313,6 +290,18 @@ defmodule LiveAdmin.Components.Container.Form do
     """
   end
 
+  defp input(assigns = %{type: {:array, :string}}) do
+    ~H"""
+    <.live_component
+      module={ArrayInput}
+      id={input_id(@form, @field)}
+      form={@form}
+      field={@field}
+      disabled={@disabled}
+    />
+    """
+  end
+
   defp input(assigns = %{type: :date}) do
     ~H"""
     <input type="date" class="form-input" name={@form[@field].name} value={@form[@field].value} />

dist/js/app.js

@@ -38,49 +38,20 @@ defmodule LiveAdmin.Components.Container.Form.ArrayInput do
   @impl true
   def render(assigns) do
     ~H"""
-    <div
-      class="field__array--group"
-      phx-hook="ArrayInput"
-      id={input_id(@form, @field) <> "_array_input"}
-    >
+    <div class="array-input-wrapper" phx-hook="ArrayInput" id={@form[@field].id <> "_array_input"}>
       <%= for {item, idx} <- Enum.with_index(@values) do %>
-        <div>
-          <a
-            href="#"
-            class="button__remove"
-            phx-click={
-              JS.push("remove",
-                value: %{idx: idx},
-                target: @myself,
-                page_loading: true
-              )
-            }
-          />
-          {text_input(:form, :array,
-            id: input_id(@form, @field) <> "_#{idx}",
-            name: input_name(@form, @field) <> "[]",
-            value: item,
-            phx_debounce: 200
-          )}
-        </div>
+        <button type="button" class="btn" phx-click={JS.push("remove", value: %{idx: idx}, target: @myself)}>
+        {item}
+        </button>
       <% end %>
-      <a
-        href="#"
-        phx-click={
-          JS.push("add",
-            target: @myself,
-            page_loading: true
-          )
-        }
-        class="button__add"
-      />
+      <input type="text" autocomplete="off" phx-keydown="add" phx-key="Enter" phx-target={@myself} />
     </div>
     """
   end
 
   @impl true
-  def handle_event("add", _params, socket) do
-    socket = assign(socket, values: socket.assigns.values ++ [""])
+  def handle_event("add", %{"value" => item}, socket) do
+    socket = assign(socket, values: socket.assigns.values ++ [item])
 
     {:noreply, socket}
   end