mirror of
https://github.com/livebook-dev/livebook.git
synced 2024-11-16 04:46:46 +08:00
be862173a3
* Define .input_wrapper and .hex_color_input components * Define Tailwind variants from Phoenix v1.6 to help styling * Make sure single-action modals redirect on save * Add pill to session secrets in the "Secrets" session sidebar * Fix alignments of "Users" in the session sidebar
68 lines
1.9 KiB
Elixir
68 lines
1.9 KiB
Elixir
defmodule LivebookWeb.FormHelpers do
|
|
@moduledoc """
|
|
Conveniences for translating and building error messages.
|
|
"""
|
|
|
|
use Phoenix.Component
|
|
|
|
import Phoenix.HTML.Form
|
|
import LivebookWeb.LiveHelpers
|
|
|
|
@doc """
|
|
A wrapper for inputs with conveniences.
|
|
"""
|
|
def input_wrapper(assigns) do
|
|
assigns = assign_new(assigns, :class, fn -> [] end)
|
|
|
|
~H"""
|
|
<div
|
|
phx-feedback-for={input_name(@form, @field)}
|
|
class={[@class, if(@form.errors[@field], do: "show-errors", else: "")]}
|
|
>
|
|
<%= render_slot(@inner_block) %>
|
|
<%= for error <- Keyword.get_values(@form.errors, @field) do %>
|
|
<span class="hidden text-red-600 text-sm phx-form-error:block">
|
|
<%= translate_error(error) %>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Hex color input.
|
|
"""
|
|
def hex_color_input(assigns) do
|
|
~H"""
|
|
<div class="flex space-x-4 items-center">
|
|
<div
|
|
class="border-[3px] rounded-lg p-1 flex justify-center items-center"
|
|
style={"border-color: #{input_value(@form, @field)}"}
|
|
>
|
|
<div class="rounded h-5 w-5" style={"background-color: #{input_value(@form, @field)}"}></div>
|
|
</div>
|
|
<div class="relative grow">
|
|
<%= text_input(@form, @field,
|
|
class: "input",
|
|
spellcheck: "false",
|
|
maxlength: 7
|
|
) %>
|
|
<button class="icon-button absolute right-2 top-1" type="button" phx-click={@randomize}>
|
|
<.remix_icon icon="refresh-line" class="text-xl" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Translates an error message.
|
|
"""
|
|
def translate_error({msg, opts}) do
|
|
# Because the error messages we show in our forms and APIs
|
|
# are defined inside Ecto, we need to translate them dynamically.
|
|
Enum.reduce(opts, msg, fn {key, value}, acc ->
|
|
String.replace(acc, "%{#{key}}", fn _ -> to_string(value) end)
|
|
end)
|
|
end
|
|
end
|