Moritz
222af635ae
Remove navigation attributes (href, navigate, patch) when disabled=true to prevent 'Open in new tab' and 'Copy link' from working on disabled links. This makes the disabled state semantically stronger and independent of CSS themes.
757 lines
24 KiB
Elixir
757 lines
24 KiB
Elixir
defmodule MvWeb.CoreComponents do
|
||
@moduledoc """
|
||
Provides core UI components.
|
||
|
||
At first glance, this module may seem daunting, but its goal is to provide
|
||
core building blocks for your application, such as tables, forms, and
|
||
inputs. The components consist mostly of markup and are well-documented
|
||
with doc strings and declarative assigns. You may customize and style
|
||
them in any way you want, based on your application growth and needs.
|
||
|
||
The foundation for styling is Tailwind CSS, a utility-first CSS framework,
|
||
augmented with daisyUI, a Tailwind CSS plugin that provides UI components
|
||
and themes. Here are useful references:
|
||
|
||
* [daisyUI](https://daisyui.com/docs/intro/) - a good place to get
|
||
started and see the available components.
|
||
|
||
* [Tailwind CSS](https://tailwindcss.com) - the foundational framework
|
||
we build on. You will use it for layout, sizing, flexbox, grid, and
|
||
spacing.
|
||
|
||
* [Heroicons](https://heroicons.com) - see `icon/1` for usage.
|
||
|
||
* [Phoenix.Component](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html) -
|
||
the component system used by Phoenix. Some components, such as `<.link>`
|
||
and `<.form>`, are defined there.
|
||
|
||
"""
|
||
use Phoenix.Component
|
||
use Gettext, backend: MvWeb.Gettext
|
||
|
||
alias Phoenix.LiveView.JS
|
||
|
||
@doc """
|
||
Renders flash notices.
|
||
|
||
## Examples
|
||
|
||
<.flash kind={:info} flash={@flash} />
|
||
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
|
||
"""
|
||
attr :id, :string, doc: "the optional id of flash container"
|
||
attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
|
||
attr :title, :string, default: nil
|
||
|
||
attr :kind, :atom,
|
||
values: [:info, :error, :success, :warning],
|
||
doc: "used for styling and flash lookup"
|
||
|
||
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
|
||
|
||
slot :inner_block, doc: "the optional inner block that renders the flash message"
|
||
|
||
def flash(assigns) do
|
||
assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
|
||
|
||
~H"""
|
||
<div
|
||
:if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
|
||
id={@id}
|
||
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
|
||
role="alert"
|
||
class="z-50 toast toast-top toast-end"
|
||
{@rest}
|
||
>
|
||
<div class={[
|
||
"alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",
|
||
@kind == :info && "alert-info",
|
||
@kind == :error && "alert-error",
|
||
@kind == :success && "bg-green-500 text-white",
|
||
@kind == :warning && "bg-blue-100 text-blue-800 border border-blue-300"
|
||
]}>
|
||
<.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
|
||
<.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
|
||
<.icon :if={@kind == :success} name="hero-check-circle" class="size-5 shrink-0" />
|
||
<.icon :if={@kind == :warning} name="hero-information-circle" class="size-5 shrink-0" />
|
||
<div>
|
||
<p :if={@title} class="font-semibold">{@title}</p>
|
||
<p>{msg}</p>
|
||
</div>
|
||
<div class="flex-1" />
|
||
<button type="button" class="self-start cursor-pointer group" aria-label={gettext("close")}>
|
||
<.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a button with navigation support.
|
||
|
||
## Examples
|
||
|
||
<.button>Send!</.button>
|
||
<.button phx-click="go" variant="primary">Send!</.button>
|
||
<.button navigate={~p"/"}>Home</.button>
|
||
<.button disabled={true}>Disabled</.button>
|
||
"""
|
||
attr :rest, :global, include: ~w(href navigate patch method)
|
||
attr :variant, :string, values: ~w(primary)
|
||
attr :disabled, :boolean, default: false, doc: "Whether the button is disabled"
|
||
slot :inner_block, required: true
|
||
|
||
def button(%{rest: rest} = assigns) do
|
||
variants = %{"primary" => "btn-primary", nil => "btn-primary btn-soft"}
|
||
assigns = assign(assigns, :class, Map.fetch!(variants, assigns[:variant]))
|
||
|
||
if rest[:href] || rest[:navigate] || rest[:patch] do
|
||
# For links, we can't use disabled attribute, so we use btn-disabled class
|
||
# DaisyUI's btn-disabled provides the same styling as :disabled on buttons
|
||
link_class =
|
||
if assigns[:disabled],
|
||
do: ["btn", assigns.class, "btn-disabled"],
|
||
else: ["btn", assigns.class]
|
||
|
||
# Prevent interaction when disabled
|
||
# Remove navigation attributes to prevent "Open in new tab", "Copy link" etc.
|
||
link_attrs =
|
||
if assigns[:disabled] do
|
||
rest
|
||
|> Map.drop([:href, :navigate, :patch])
|
||
|> Map.merge(%{tabindex: "-1", "aria-disabled": "true"})
|
||
else
|
||
rest
|
||
end
|
||
|
||
assigns =
|
||
assigns
|
||
|> assign(:link_class, link_class)
|
||
|> assign(:link_attrs, link_attrs)
|
||
|
||
~H"""
|
||
<.link class={@link_class} {@link_attrs}>
|
||
{render_slot(@inner_block)}
|
||
</.link>
|
||
"""
|
||
else
|
||
~H"""
|
||
<button class={["btn", @class]} disabled={@disabled} {@rest}>
|
||
{render_slot(@inner_block)}
|
||
</button>
|
||
"""
|
||
end
|
||
end
|
||
|
||
@doc """
|
||
Renders a dropdown menu.
|
||
|
||
## Examples
|
||
|
||
<.dropdown_menu items={@items} open={@open} phx_target={@myself} />
|
||
"""
|
||
attr :id, :string, default: "dropdown-menu"
|
||
attr :items, :list, required: true, doc: "List of %{label: string, value: any} maps"
|
||
attr :button_label, :string, default: "Dropdown"
|
||
attr :icon, :string, default: nil
|
||
attr :checkboxes, :boolean, default: false
|
||
attr :selected, :map, default: %{}
|
||
attr :open, :boolean, default: false, doc: "Whether the dropdown is open"
|
||
attr :show_select_buttons, :boolean, default: false, doc: "Show select all/none buttons"
|
||
attr :phx_target, :any, required: true, doc: "The LiveView/LiveComponent target for events"
|
||
|
||
def dropdown_menu(assigns) do
|
||
~H"""
|
||
<div
|
||
class="relative"
|
||
phx-click-away="close_dropdown"
|
||
phx-target={@phx_target}
|
||
phx-window-keydown="close_dropdown"
|
||
phx-key="Escape"
|
||
data-testid="dropdown-menu"
|
||
>
|
||
<button
|
||
type="button"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-haspopup="menu"
|
||
aria-expanded={@open}
|
||
aria-controls={@id}
|
||
class="btn"
|
||
phx-click="toggle_dropdown"
|
||
phx-target={@phx_target}
|
||
data-testid="dropdown-button"
|
||
>
|
||
<%= if @icon do %>
|
||
<.icon name={@icon} />
|
||
<% end %>
|
||
<span>{@button_label}</span>
|
||
</button>
|
||
|
||
<ul
|
||
:if={@open}
|
||
id={@id}
|
||
role="menu"
|
||
class="absolute right-0 mt-2 bg-base-100 z-[100] p-2 shadow-lg rounded-box w-64 max-h-96 overflow-y-auto border border-base-300"
|
||
tabindex="0"
|
||
phx-target={@phx_target}
|
||
>
|
||
<li :if={@show_select_buttons} role="none">
|
||
<div class="flex justify-between items-center mb-2 px-2">
|
||
<span class="font-semibold">{gettext("Options")}</span>
|
||
<div class="flex gap-1">
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
aria-label={gettext("Select all")}
|
||
phx-click="select_all"
|
||
phx-target={@phx_target}
|
||
class="btn btn-xs btn-ghost"
|
||
>
|
||
{gettext("All")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
aria-label={gettext("Select none")}
|
||
phx-click="select_none"
|
||
phx-target={@phx_target}
|
||
class="btn btn-xs btn-ghost"
|
||
>
|
||
{gettext("None")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li :if={@show_select_buttons} role="separator" class="divider my-1"></li>
|
||
|
||
<%= for item <- @items do %>
|
||
<li role="none">
|
||
<button
|
||
type="button"
|
||
role={if @checkboxes, do: "menuitemcheckbox", else: "menuitem"}
|
||
aria-checked={
|
||
if @checkboxes, do: to_string(Map.get(@selected, item.value, true)), else: nil
|
||
}
|
||
tabindex="0"
|
||
class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-base-200 w-full text-left"
|
||
phx-click="select_item"
|
||
phx-keydown="select_item"
|
||
phx-key="Enter"
|
||
phx-value-item={item.value}
|
||
phx-target={@phx_target}
|
||
>
|
||
<%= if @checkboxes do %>
|
||
<input
|
||
type="checkbox"
|
||
checked={Map.get(@selected, item.value, true)}
|
||
class="checkbox checkbox-sm checkbox-primary"
|
||
tabindex="-1"
|
||
aria-hidden="true"
|
||
/>
|
||
<% end %>
|
||
<span>{item.label}</span>
|
||
</button>
|
||
</li>
|
||
<% end %>
|
||
</ul>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a section in with a border similar to cards.
|
||
|
||
|
||
## Examples
|
||
|
||
<.form_section title={gettext("Personal Data")}>
|
||
<p>input</p>
|
||
</form_section>
|
||
"""
|
||
attr :title, :string, required: true
|
||
slot :inner_block, required: true
|
||
|
||
def form_section(assigns) do
|
||
~H"""
|
||
<section class="mb-6">
|
||
<h2 class="text-lg font-semibold mb-3">{@title}</h2>
|
||
<div class="border border-base-300 rounded-lg p-4 bg-base-100">
|
||
{render_slot(@inner_block)}
|
||
</div>
|
||
</section>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders an input with label and error messages.
|
||
|
||
A `Phoenix.HTML.FormField` may be passed as argument,
|
||
which is used to retrieve the input name, id, and values.
|
||
Otherwise all attributes may be passed explicitly.
|
||
|
||
## Types
|
||
|
||
This function accepts all HTML input types, considering that:
|
||
|
||
* You may also set `type="select"` to render a `<select>` tag
|
||
|
||
* `type="checkbox"` is used exclusively to render boolean values
|
||
|
||
* For live file uploads, see `Phoenix.Component.live_file_input/1`
|
||
|
||
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
|
||
for more information. Unsupported types, such as hidden and radio,
|
||
are best written directly in your templates.
|
||
|
||
## Examples
|
||
|
||
<.input field={@form[:email]} type="email" />
|
||
<.input name="my-input" errors={["oh no!"]} />
|
||
"""
|
||
attr :id, :any, default: nil
|
||
attr :name, :any
|
||
attr :label, :string, default: nil
|
||
attr :value, :any
|
||
|
||
attr :type, :string,
|
||
default: "text",
|
||
values: ~w(checkbox color date datetime-local email file month number password
|
||
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 :errors, :list, default: []
|
||
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 :class, :string, default: nil, doc: "the input class to use over defaults"
|
||
attr :error_class, :string, default: nil, doc: "the input error class to use over defaults"
|
||
|
||
attr :rest, :global,
|
||
include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
|
||
multiple pattern placeholder readonly required rows size step)
|
||
|
||
def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
|
||
errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
|
||
|
||
assigns
|
||
|> assign(field: nil, id: assigns.id || field.id)
|
||
|> assign(:errors, Enum.map(errors, &translate_error(&1)))
|
||
|> 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 =
|
||
assign_new(assigns, :checked, fn ->
|
||
Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
|
||
end)
|
||
|
||
~H"""
|
||
<fieldset class="mb-2 fieldset">
|
||
<label>
|
||
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
|
||
<span class="label">
|
||
<input
|
||
type="checkbox"
|
||
id={@id}
|
||
name={@name}
|
||
value="true"
|
||
checked={@checked}
|
||
class={@class || "checkbox checkbox-sm"}
|
||
{@rest}
|
||
/>{@label}<span
|
||
:if={@rest[:required]}
|
||
class="text-red-700 tooltip tooltip-right"
|
||
data-tip={gettext("This field cannot be empty")}
|
||
>*</span>
|
||
</span>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</fieldset>
|
||
"""
|
||
end
|
||
|
||
def input(%{type: "select"} = assigns) do
|
||
~H"""
|
||
<fieldset class="mb-2 fieldset">
|
||
<label>
|
||
<span :if={@label} class="mb-1 label">
|
||
{@label}<span
|
||
:if={@rest[:required]}
|
||
class="text-red-700 tooltip tooltip-right"
|
||
data-tip={gettext("This field cannot be empty")}
|
||
>*</span>
|
||
</span>
|
||
<select
|
||
id={@id}
|
||
name={@name}
|
||
class={[@class || "w-full select", @errors != [] && (@error_class || "select-error")]}
|
||
multiple={@multiple}
|
||
{@rest}
|
||
>
|
||
<option :if={@prompt} value="">{@prompt}</option>
|
||
{Phoenix.HTML.Form.options_for_select(@options, @value)}
|
||
</select>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</fieldset>
|
||
"""
|
||
end
|
||
|
||
def input(%{type: "textarea"} = assigns) do
|
||
~H"""
|
||
<fieldset class="mb-2 fieldset">
|
||
<label>
|
||
<span :if={@label} class="mb-1 label">
|
||
{@label}<span
|
||
:if={@rest[:required]}
|
||
class="text-red-700 tooltip tooltip-right"
|
||
data-tip={gettext("This field cannot be empty")}
|
||
>*</span>
|
||
</span>
|
||
<textarea
|
||
id={@id}
|
||
name={@name}
|
||
class={[
|
||
@class || "w-full textarea",
|
||
@errors != [] && (@error_class || "textarea-error")
|
||
]}
|
||
{@rest}
|
||
>{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</fieldset>
|
||
"""
|
||
end
|
||
|
||
# All other inputs text, datetime-local, url, password, etc. are handled here...
|
||
def input(assigns) do
|
||
~H"""
|
||
<fieldset class="mb-2 fieldset">
|
||
<label>
|
||
<span :if={@label} class="mb-1 label">
|
||
{@label}<span
|
||
:if={@rest[:required]}
|
||
class="text-red-700 tooltip tooltip-right"
|
||
data-tip={gettext("This field cannot be empty")}
|
||
>*</span>
|
||
</span>
|
||
<input
|
||
type={@type}
|
||
name={@name}
|
||
id={@id}
|
||
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
|
||
class={[
|
||
@class || "w-full input",
|
||
@errors != [] && (@error_class || "input-error")
|
||
]}
|
||
{@rest}
|
||
/>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</fieldset>
|
||
"""
|
||
end
|
||
|
||
# Helper used by inputs to generate form errors
|
||
defp error(assigns) do
|
||
~H"""
|
||
<p class="mt-1.5 flex gap-2 items-center text-sm text-error">
|
||
<.icon name="hero-exclamation-circle" class="size-5" />
|
||
{render_slot(@inner_block)}
|
||
</p>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a header with title.
|
||
"""
|
||
attr :class, :string, default: nil
|
||
|
||
slot :inner_block, required: true
|
||
slot :subtitle
|
||
slot :actions
|
||
|
||
def header(assigns) do
|
||
~H"""
|
||
<header class={[@actions != [] && "flex items-center justify-between gap-6", "pb-4", @class]}>
|
||
<div>
|
||
<h1 class="text-xl font-semibold leading-8">
|
||
{render_slot(@inner_block)}
|
||
</h1>
|
||
<p :if={@subtitle != []} class="text-sm text-base-content/70">
|
||
{render_slot(@subtitle)}
|
||
</p>
|
||
</div>
|
||
<div class="flex-none">{render_slot(@actions)}</div>
|
||
</header>
|
||
"""
|
||
end
|
||
|
||
@doc ~S"""
|
||
Renders a table with generic styling.
|
||
|
||
## Examples
|
||
|
||
<.table id="users" rows={@users}>
|
||
<:col :let={user} label="id">{user.id}</:col>
|
||
<:col :let={user} label="username">{user.username}</:col>
|
||
</.table>
|
||
"""
|
||
attr :id, :string, required: true
|
||
attr :rows, :list, required: true
|
||
attr :row_id, :any, default: nil, doc: "the function for generating the row id"
|
||
attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
|
||
|
||
attr :row_item, :any,
|
||
default: &Function.identity/1,
|
||
doc: "the function for mapping each row before calling the :col and :action slots"
|
||
|
||
attr :dynamic_cols, :list,
|
||
default: [],
|
||
doc: "list of dynamic column definitions with :custom_field and :render functions"
|
||
|
||
attr :sort_field, :any, default: nil, doc: "current sort field"
|
||
attr :sort_order, :atom, default: nil, doc: "current sort order"
|
||
|
||
slot :col, required: true do
|
||
attr :label, :string
|
||
attr :class, :string
|
||
attr :col_click, :any, doc: "optional column-specific click handler that overrides row_click"
|
||
end
|
||
|
||
slot :action, doc: "the slot for showing user actions in the last table column"
|
||
|
||
def table(assigns) do
|
||
assigns =
|
||
with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
|
||
assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
|
||
end
|
||
|
||
~H"""
|
||
<div class="overflow-auto">
|
||
<table class="table table-zebra">
|
||
<thead>
|
||
<tr>
|
||
<th :for={col <- @col} class={Map.get(col, :class)}>{col[:label]}</th>
|
||
<th :for={dyn_col <- @dynamic_cols}>
|
||
<.live_component
|
||
module={MvWeb.Components.SortHeaderComponent}
|
||
id={:"sort_custom_field_#{dyn_col[:custom_field].id}"}
|
||
field={"custom_field_#{dyn_col[:custom_field].id}"}
|
||
label={dyn_col[:custom_field].name}
|
||
sort_field={@sort_field}
|
||
sort_order={@sort_order}
|
||
/>
|
||
</th>
|
||
<th :if={@action != []}>
|
||
<span class="sr-only">{gettext("Actions")}</span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id={@id} phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}>
|
||
<tr :for={row <- @rows} id={@row_id && @row_id.(row)}>
|
||
<td
|
||
:for={col <- @col}
|
||
phx-click={
|
||
(col[:col_click] && col[:col_click].(@row_item.(row))) ||
|
||
(@row_click && @row_click.(row))
|
||
}
|
||
class={
|
||
col_class = Map.get(col, :class)
|
||
has_click = col[:col_click] || @row_click
|
||
classes = ["max-w-xs"]
|
||
|
||
classes =
|
||
if col_class == nil || (col_class && !String.contains?(col_class, "text-center")) do
|
||
["truncate" | classes]
|
||
else
|
||
classes
|
||
end
|
||
|
||
classes =
|
||
if has_click do
|
||
["hover:cursor-pointer" | classes]
|
||
else
|
||
classes
|
||
end
|
||
|
||
classes =
|
||
if col_class do
|
||
[col_class | classes]
|
||
else
|
||
classes
|
||
end
|
||
|
||
Enum.join(classes, " ")
|
||
}
|
||
>
|
||
{render_slot(col, @row_item.(row))}
|
||
</td>
|
||
<td
|
||
:for={dyn_col <- @dynamic_cols}
|
||
phx-click={@row_click && @row_click.(row)}
|
||
class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]}
|
||
>
|
||
{if dyn_col[:render] do
|
||
rendered = dyn_col[:render].(@row_item.(row))
|
||
|
||
if rendered == "" do
|
||
""
|
||
else
|
||
rendered
|
||
end
|
||
else
|
||
""
|
||
end}
|
||
</td>
|
||
<td :if={@action != []} class="w-0 font-semibold">
|
||
<div class="flex gap-4">
|
||
<%= for action <- @action do %>
|
||
{render_slot(action, @row_item.(row))}
|
||
<% end %>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a data list.
|
||
|
||
## Examples
|
||
|
||
<.list>
|
||
<:item title="Title">{@post.title}</:item>
|
||
<:item title="Views">{@post.views}</:item>
|
||
</.list>
|
||
"""
|
||
slot :item, required: true do
|
||
attr :title, :string, required: true
|
||
end
|
||
|
||
def list(assigns) do
|
||
~H"""
|
||
<ul class="list">
|
||
<li :for={item <- @item} class="list-row">
|
||
<div>
|
||
<div class="font-bold">{item.title}</div>
|
||
<div>{render_slot(item)}</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a [Heroicon](https://heroicons.com).
|
||
|
||
Heroicons come in three styles – outline, solid, and mini.
|
||
By default, the outline style is used, but solid and mini may
|
||
be applied by using the `-solid` and `-mini` suffix.
|
||
|
||
You can customize the size and colors of the icons by setting
|
||
width, height, and background color classes.
|
||
|
||
Icons are extracted from the `deps/heroicons` directory and bundled within
|
||
your compiled app.css by the plugin in `assets/vendor/heroicons.js`.
|
||
|
||
## Examples
|
||
|
||
<.icon name="hero-x-mark" />
|
||
<.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
|
||
"""
|
||
attr :name, :string, required: true
|
||
attr :class, :string, default: "size-4"
|
||
|
||
def icon(%{name: "hero-" <> _} = assigns) do
|
||
~H"""
|
||
<span class={[@name, @class]} />
|
||
"""
|
||
end
|
||
|
||
## JS Commands
|
||
|
||
def show(js \\ %JS{}, selector) do
|
||
JS.show(js,
|
||
to: selector,
|
||
time: 300,
|
||
transition:
|
||
{"transition-all ease-out duration-300",
|
||
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
||
"opacity-100 translate-y-0 sm:scale-100"}
|
||
)
|
||
end
|
||
|
||
def hide(js \\ %JS{}, selector) do
|
||
JS.hide(js,
|
||
to: selector,
|
||
time: 200,
|
||
transition:
|
||
{"transition-all ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
|
||
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
|
||
)
|
||
end
|
||
|
||
@doc """
|
||
Translates an error message using gettext.
|
||
"""
|
||
def translate_error({msg, opts}) do
|
||
# When using gettext, we typically pass the strings we want
|
||
# to translate as a static argument:
|
||
#
|
||
# # Translate the number of files with plural rules
|
||
# dngettext("errors", "1 file", "%{count} files", count)
|
||
#
|
||
# However the error messages in our forms and APIs are generated
|
||
# dynamically, so we need to translate them by calling Gettext
|
||
# with our gettext backend as first argument. Translations are
|
||
# available in the errors.po file (as we use the "errors" domain).
|
||
if count = opts[:count] do
|
||
Gettext.dngettext(MvWeb.Gettext, "errors", msg, msg, count, opts)
|
||
else
|
||
Gettext.dgettext(MvWeb.Gettext, "errors", msg, opts)
|
||
end
|
||
end
|
||
|
||
@doc """
|
||
Translates the errors for a field from a keyword list of errors.
|
||
"""
|
||
def translate_errors(errors, field) when is_list(errors) do
|
||
for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
|
||
end
|
||
|
||
@doc """
|
||
Renders a list of items with name and value pairs.
|
||
|
||
## Examples
|
||
<.generic_list items={[
|
||
{item.name, item.value},
|
||
{other.name, other.value}
|
||
]} />
|
||
"""
|
||
attr :items, :list, required: true, doc: "List of {name, value} tuples"
|
||
|
||
def generic_list(assigns) do
|
||
~H"""
|
||
<div class="mt-14">
|
||
<dl class="-my-4 divide-y divide-zinc-100">
|
||
<div :for={{name, value} <- @items} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
|
||
<dt class="flex-none w-1/4 text-zinc-500">{name}</dt>
|
||
<dd class="text-zinc-700">{value}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
"""
|
||
end
|
||
end
|