1144 lines
37 KiB
Elixir
1144 lines
37 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="pointer-events-auto"
|
||
{@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 && "alert-success",
|
||
@kind == :warning && "alert-warning"
|
||
]}>
|
||
<.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.
|
||
|
||
## Variants (Design Guidelines §5.2)
|
||
- primary (main CTA)
|
||
- secondary (supporting)
|
||
- neutral (cancel/back)
|
||
- ghost (low emphasis; table/toolbars)
|
||
- outline (alternative CTA)
|
||
- danger (destructive)
|
||
- link (inline; rare)
|
||
- icon (icon-only)
|
||
|
||
## Sizes
|
||
- sm, md (default), lg
|
||
|
||
## Examples
|
||
|
||
<.button>Send!</.button>
|
||
<.button phx-click="go" variant="primary">Send!</.button>
|
||
<.button navigate={~p"/"} variant="secondary">Home</.button>
|
||
<.button variant="ghost" size="sm">Edit</.button>
|
||
<.button disabled={true}>Disabled</.button>
|
||
"""
|
||
attr :rest, :global, include: ~w(href navigate patch method data-testid form)
|
||
|
||
attr :variant, :string,
|
||
values: ~w(primary secondary neutral ghost outline danger link icon),
|
||
default: "primary"
|
||
|
||
attr :size, :string, values: ~w(sm md lg), default: "md"
|
||
attr :disabled, :boolean, default: false, doc: "Whether the button is disabled"
|
||
slot :inner_block, required: true
|
||
|
||
def button(assigns) do
|
||
rest = assigns.rest
|
||
variant = assigns[:variant] || "primary"
|
||
size = assigns[:size] || "md"
|
||
|
||
variant_classes = %{
|
||
"primary" => "btn-primary",
|
||
"secondary" => "btn-secondary",
|
||
"neutral" => "btn-neutral",
|
||
"ghost" => "btn-ghost",
|
||
"outline" => "btn-outline",
|
||
"danger" => "btn-error",
|
||
"link" => "btn-link",
|
||
"icon" => "btn-ghost btn-square"
|
||
}
|
||
|
||
size_classes = %{
|
||
"sm" => "btn-sm",
|
||
"md" => "",
|
||
"lg" => "btn-lg"
|
||
}
|
||
|
||
base_class = Map.fetch!(variant_classes, variant)
|
||
size_class = size_classes[size]
|
||
btn_class = [base_class, size_class] |> Enum.reject(&(&1 == "")) |> Enum.join(" ")
|
||
|
||
assigns = assign(assigns, :btn_class, btn_class)
|
||
|
||
if rest[:href] || rest[:navigate] || rest[:patch] do
|
||
link_class =
|
||
if assigns[:disabled],
|
||
do: ["btn", btn_class, "btn-disabled"],
|
||
else: ["btn", btn_class]
|
||
|
||
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", @btn_class]} disabled={@disabled} {@rest}>
|
||
{render_slot(@inner_block)}
|
||
</button>
|
||
"""
|
||
end
|
||
end
|
||
|
||
@doc """
|
||
Renders a non-interactive badge with WCAG-compliant contrast.
|
||
|
||
Use for status labels, counts, or tags. For clickable elements (e.g. filter chips),
|
||
use a button or link component instead, not this badge.
|
||
|
||
## Variants and styles
|
||
|
||
- **variant:** `:neutral`, `:primary`, `:info`, `:success`, `:warning`, `:error`
|
||
- **style:** `:soft` (default, tinted background), `:solid`, `:outline`
|
||
- **size:** `:sm`, `:md` (default)
|
||
|
||
Outline and soft styles always use a visible background so the badge remains
|
||
readable on base-200/base-300 surfaces (WCAG 2.2 AA). Ghost style is not exposed
|
||
by default to avoid low-contrast on gray backgrounds.
|
||
|
||
## Examples
|
||
|
||
<.badge variant="success">Paid</.badge>
|
||
<.badge variant="error" style="solid">Unpaid</.badge>
|
||
<.badge variant="neutral" size="sm">Custom</.badge>
|
||
<.badge variant="primary" style="outline">Label</.badge>
|
||
<.badge variant="success" sr_label="Paid">
|
||
<.icon name="hero-check-circle" class="size-4" />
|
||
</.badge>
|
||
"""
|
||
attr :variant, :any,
|
||
default: "neutral",
|
||
doc: "Color variant: neutral | primary | info | success | warning | error (string or atom)"
|
||
|
||
attr :style, :any,
|
||
default: "soft",
|
||
doc: "Visual style: soft | solid | outline; :outline gets bg-base-100 for contrast"
|
||
|
||
attr :size, :any,
|
||
default: "md",
|
||
doc: "Badge size: sm | md"
|
||
|
||
attr :sr_label, :string,
|
||
default: nil,
|
||
doc: "Optional screen-reader label for icon-only content"
|
||
|
||
attr :rest, :global, doc: "Arbitrary HTML attributes (e.g. id, class, data-testid)"
|
||
|
||
slot :inner_block, required: true, doc: "Badge text (and optional icon)"
|
||
slot :icon, doc: "Optional leading icon slot"
|
||
|
||
def badge(assigns) do
|
||
# Normalize so both HEEx strings (variant="neutral") and helper atoms (variant={:neutral}) work
|
||
variant = to_string(assigns.variant || "neutral")
|
||
style = to_string(assigns.style || "soft")
|
||
size = to_string(assigns.size || "md")
|
||
|
||
variant_class = "badge-#{variant}"
|
||
style_class = badge_style_class(style)
|
||
size_class = "badge-#{size}"
|
||
# Outline has transparent bg in DaisyUI; add bg so it stays visible on base-200/base-300
|
||
outline_bg = if style == "outline", do: "bg-base-100", else: nil
|
||
|
||
rest = assigns.rest || []
|
||
rest = if is_list(rest), do: rest, else: Map.to_list(rest)
|
||
extra_class = Keyword.get(rest, :class)
|
||
rest = Keyword.drop(rest, [:class])
|
||
rest = if assigns.sr_label, do: Keyword.put(rest, :"aria-label", assigns.sr_label), else: rest
|
||
|
||
class =
|
||
["badge", variant_class, style_class, size_class, outline_bg, extra_class]
|
||
|> List.flatten()
|
||
|> Enum.reject(&is_nil/1)
|
||
|> Enum.join(" ")
|
||
|
||
assigns =
|
||
assigns
|
||
|> assign(:class, class)
|
||
|> assign(:rest, rest)
|
||
|> assign(:has_icon, assigns.icon != [])
|
||
|
||
~H"""
|
||
<span class={@class} {@rest}>
|
||
<%= if @has_icon do %>
|
||
{render_slot(@icon)}
|
||
<% end %>
|
||
{render_slot(@inner_block)}
|
||
<%= if @sr_label do %>
|
||
<span class="sr-only">{@sr_label}</span>
|
||
<% end %>
|
||
</span>
|
||
"""
|
||
end
|
||
|
||
defp badge_style_class("soft"), do: "badge-soft"
|
||
defp badge_style_class("solid"), do: nil
|
||
defp badge_style_class("outline"), do: "badge-outline"
|
||
defp badge_style_class(_), do: nil
|
||
|
||
@doc """
|
||
Wraps content with a DaisyUI tooltip. Use for icon-only actions, truncated content,
|
||
or status badges that need explanation (Design Guidelines §8.2).
|
||
|
||
## Examples
|
||
|
||
<.tooltip content={gettext("Edit")}>
|
||
<.button variant="icon" size="sm"><.icon name="hero-pencil" /></.button>
|
||
</.tooltip>
|
||
|
||
<.tooltip content={@full_name} position="top">
|
||
<span class="truncate max-w-32">{@full_name}</span>
|
||
</.tooltip>
|
||
"""
|
||
attr :content, :string, required: true, doc: "Tooltip text (data-tip)"
|
||
|
||
attr :position, :string,
|
||
values: ~w(top bottom left right),
|
||
default: "bottom"
|
||
|
||
attr :wrap_class, :string, default: nil, doc: "Additional classes for the wrapper"
|
||
slot :inner_block, required: true
|
||
|
||
def tooltip(assigns) do
|
||
position_class = "tooltip tooltip-#{assigns.position}"
|
||
wrap_class = [position_class, assigns.wrap_class] |> Enum.reject(&is_nil/1) |> Enum.join(" ")
|
||
|
||
assigns = assign(assigns, :wrap_class, wrap_class)
|
||
|
||
~H"""
|
||
<div class={@wrap_class} data-tip={@content}>
|
||
{render_slot(@inner_block)}
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a dropdown menu.
|
||
|
||
## Examples
|
||
|
||
<.dropdown_menu items={@items} open={@open} phx_target={@myself} />
|
||
|
||
When using custom content (e.g., forms), use the inner_block slot:
|
||
|
||
<.dropdown_menu button_label="Export" icon="hero-arrow-down-tray" open={@open} phx_target={@myself}>
|
||
<li role="none">
|
||
<form>...</form>
|
||
</li>
|
||
</.dropdown_menu>
|
||
"""
|
||
attr :id, :string, default: "dropdown-menu"
|
||
attr :items, :list, default: [], 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"
|
||
attr :menu_class, :string, default: nil, doc: "Additional CSS classes for the menu"
|
||
attr :menu_width, :string, default: "w-64", doc: "Width class for the menu (default: w-64)"
|
||
|
||
attr :button_class, :string,
|
||
default: nil,
|
||
doc: "Additional CSS classes for the button (e.g., btn-secondary)"
|
||
|
||
attr :menu_align, :string,
|
||
default: "right",
|
||
doc: "Menu alignment: 'left' or 'right' (default: right)"
|
||
|
||
attr :testid, :string, default: "dropdown-menu", doc: "data-testid for the dropdown container"
|
||
attr :button_testid, :string, default: "dropdown-button", doc: "data-testid for the button"
|
||
|
||
attr :menu_testid, :string,
|
||
default: nil,
|
||
doc: "data-testid for the menu (defaults to testid + '-menu')"
|
||
|
||
slot :inner_block, doc: "Custom content for the dropdown menu (e.g., forms)"
|
||
|
||
def dropdown_menu(assigns) do
|
||
menu_testid = assigns.menu_testid || "#{assigns.testid}-menu"
|
||
assigns = assign(assigns, :menu_testid, menu_testid)
|
||
|
||
~H"""
|
||
<div
|
||
class="relative"
|
||
phx-click-away="close_dropdown"
|
||
phx-target={@phx_target}
|
||
phx-window-keydown="close_dropdown"
|
||
phx-key="Escape"
|
||
data-testid={@testid}
|
||
>
|
||
<button
|
||
type="button"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-haspopup="menu"
|
||
aria-expanded={@open}
|
||
aria-controls={@id}
|
||
aria-label={@button_label}
|
||
class={[
|
||
"btn",
|
||
"focus:outline-none",
|
||
"focus-visible:ring-2",
|
||
"focus-visible:ring-offset-2",
|
||
"focus-visible:ring-base-content/20",
|
||
@button_class
|
||
]}
|
||
phx-click="toggle_dropdown"
|
||
phx-target={@phx_target}
|
||
data-testid={@button_testid}
|
||
>
|
||
<%= if @icon do %>
|
||
<.icon name={@icon} />
|
||
<% end %>
|
||
<span>{@button_label}</span>
|
||
</button>
|
||
|
||
<ul
|
||
:if={@open}
|
||
id={@id}
|
||
role="menu"
|
||
class={[
|
||
"absolute mt-2 bg-base-100 z-[100] p-2 shadow-lg rounded-box max-h-96 overflow-y-auto border border-base-300",
|
||
if(@menu_align == "left", do: "left-0", else: "right-0"),
|
||
@menu_width,
|
||
@menu_class
|
||
]}
|
||
tabindex="0"
|
||
phx-target={@phx_target}
|
||
data-testid={@menu_testid}
|
||
>
|
||
<%= if assigns.inner_block != [] do %>
|
||
{render_slot(@inner_block)}
|
||
<% else %>
|
||
<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-label={item.label}
|
||
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 focus:outline-none focus-visible:ring-2 focus-visible:ring-base-content/20 focus-visible:ring-inset"
|
||
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 pointer-events-none"
|
||
tabindex="-1"
|
||
aria-hidden="true"
|
||
/>
|
||
<% end %>
|
||
<span>{item.label}</span>
|
||
</button>
|
||
</li>
|
||
<% end %>
|
||
<% 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 aria-required 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)
|
||
|
||
# For checkboxes, we don't use HTML required attribute (means "must be checked")
|
||
# Instead, we use aria-required for screen readers (WCAG 2.1, Success Criterion 3.3.2)
|
||
# Extract required from rest and remove it, but keep aria-required if provided
|
||
rest = assigns.rest || %{}
|
||
is_required = Map.get(rest, :required, false)
|
||
aria_required = Map.get(rest, :aria_required, if(is_required, do: "true", else: nil))
|
||
|
||
# Remove required from rest (we don't want HTML required on checkbox)
|
||
rest_without_required = Map.delete(rest, :required)
|
||
# Ensure aria-required is set if field is required
|
||
rest_final =
|
||
if aria_required,
|
||
do: Map.put(rest_without_required, :aria_required, aria_required),
|
||
else: rest_without_required
|
||
|
||
assigns = assign(assigns, :rest, rest_final)
|
||
assigns = assign(assigns, :is_required, is_required)
|
||
|
||
~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={@is_required}
|
||
class="text-error tooltip tooltip-right"
|
||
data-tip={gettext("This field is required")}
|
||
>*</span>
|
||
</span>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</fieldset>
|
||
"""
|
||
end
|
||
|
||
def input(%{type: "select"} = assigns) do
|
||
assigns = ensure_aria_required_for_input(assigns)
|
||
|
||
~H"""
|
||
<fieldset class="mb-2 fieldset">
|
||
<label>
|
||
<span :if={@label} class="mb-1 label">
|
||
{@label}<span
|
||
:if={@rest[:required]}
|
||
class="text-error 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
|
||
assigns = ensure_aria_required_for_input(assigns)
|
||
|
||
~H"""
|
||
<fieldset class="mb-2 fieldset">
|
||
<label>
|
||
<span :if={@label} class="mb-1 label">
|
||
{@label}<span
|
||
:if={@rest[:required]}
|
||
class="text-error 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
|
||
assigns = ensure_aria_required_for_input(assigns)
|
||
|
||
~H"""
|
||
<fieldset class="mb-2 fieldset">
|
||
<label>
|
||
<span :if={@label} class="mb-1 label">
|
||
{@label}<span
|
||
:if={@rest[:required]}
|
||
class="text-error 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
|
||
|
||
# WCAG 2.1: set aria-required when required is true so screen readers announce required state
|
||
defp ensure_aria_required_for_input(assigns) do
|
||
rest = assigns.rest || %{}
|
||
|
||
rest =
|
||
if rest[:required],
|
||
do: Map.put(rest, :aria_required, "true"),
|
||
else: rest
|
||
|
||
assign(assigns, :rest, rest)
|
||
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.
|
||
|
||
Use the `:leading` slot for the Back button (left side, consistent with data fields).
|
||
Use the `:actions` slot for primary actions (e.g. Save) on the right.
|
||
"""
|
||
attr :class, :string, default: nil
|
||
|
||
slot :leading, doc: "Content on the left (e.g. Back button)"
|
||
slot :inner_block, required: true
|
||
slot :subtitle
|
||
slot :actions
|
||
|
||
def header(assigns) do
|
||
~H"""
|
||
<header class={["flex items-center gap-6 pb-4", @class]}>
|
||
<div :if={@leading != []} class="shrink-0">
|
||
{render_slot(@leading)}
|
||
</div>
|
||
<div class="min-w-0 flex-1">
|
||
<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 :if={@actions != []} class="shrink-0 flex gap-4 justify-end">
|
||
{render_slot(@actions)}
|
||
</div>
|
||
</header>
|
||
"""
|
||
end
|
||
|
||
@doc ~S"""
|
||
Renders a table with generic styling.
|
||
|
||
When `row_click` is set, clicking a row (or a data cell) triggers the handler.
|
||
Rows with `row_click` get a subtle hover and focus-within outline (theme-friendly ring).
|
||
When `selected_row_id` is set and matches a row's id (via `row_value_id` or `row_item.(row).id`),
|
||
that row gets a stronger selected outline (ring-primary) for accessibility (not color-only).
|
||
|
||
The action column has no phx-click on its `<td>`, so action buttons do not trigger row navigation.
|
||
For interactive elements inside other columns (e.g. checkboxes, buttons), use
|
||
`Phoenix.LiveView.JS.stop_propagation()` in the element's phx-click so the row click is not fired.
|
||
|
||
## Examples
|
||
|
||
<.table id="users" rows={@users}>
|
||
<:col :let={user} label="id">{user.id}</:col>
|
||
<:col :let={user} label="username">{user.username}</:col>
|
||
</.table>
|
||
|
||
<.table id="members" rows={@members} row_click={fn m -> JS.navigate(~p"/members/#{m}") end} selected_row_id={@selected_member_id}>
|
||
<:col :let={m} label="Name">{m.name}</: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 :selected_row_id, :any,
|
||
default: nil,
|
||
doc:
|
||
"when set, the row whose id equals this value gets selected styling (single row, e.g. from URL)"
|
||
|
||
attr :row_selected?, :any,
|
||
default: nil,
|
||
doc:
|
||
"optional; function (row_item) -> boolean to mark multiple rows as selected (e.g. checkbox selection); overrides selected_row_id when set"
|
||
|
||
attr :row_tooltip, :string,
|
||
default: nil,
|
||
doc:
|
||
"optional; when row_click is set, tooltip text for the row (e.g. gettext(\"Click to view\")). Shown as title on hover and as sr-only for screen readers."
|
||
|
||
attr :row_value_id, :any,
|
||
default: nil,
|
||
doc:
|
||
"optional; function (row) -> id for comparing with selected_row_id; defaults to row_item.(row).id"
|
||
|
||
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"
|
||
|
||
attr :sticky_header, :boolean,
|
||
default: false,
|
||
doc:
|
||
"when true, thead th get lg:sticky lg:top-0 bg-base-100 z-10 for use inside a scroll container on desktop"
|
||
|
||
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"
|
||
|
||
attr :sort_field, :any,
|
||
doc: "optional; when equal to table sort_field, aria-sort is set on this th"
|
||
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
|
||
|
||
# Function to get the row's value id for selected_row_id comparison (no extra DB reads)
|
||
row_value_id_fn =
|
||
assigns[:row_value_id] || fn row -> assigns.row_item.(row).id end
|
||
|
||
assigns = assign(assigns, :row_value_id_fn, row_value_id_fn)
|
||
|
||
~H"""
|
||
<div class="overflow-auto">
|
||
<table class="table table-zebra">
|
||
<thead>
|
||
<tr>
|
||
<th
|
||
:for={col <- @col}
|
||
class={table_th_class(col, @sticky_header)}
|
||
aria-sort={table_th_aria_sort(col, @sort_field, @sort_order)}
|
||
>
|
||
{col[:label]}
|
||
</th>
|
||
<th :for={dyn_col <- @dynamic_cols} class={table_th_sticky_class(@sticky_header)}>
|
||
<.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 != []} class={table_th_sticky_class(@sticky_header)}>
|
||
<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)}
|
||
class={table_row_tr_class(@row_click, table_row_selected?(assigns, row))}
|
||
data-selected={table_row_selected?(assigns, row) && "true"}
|
||
title={@row_click && @row_tooltip}
|
||
>
|
||
<td
|
||
:for={{col, col_idx} <- Enum.with_index(@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, " ")
|
||
}
|
||
>
|
||
<%= if col_idx == 0 && @row_click && @row_tooltip do %>
|
||
<span class="sr-only">{@row_tooltip}</span>
|
||
<% end %>
|
||
{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
|
||
|
||
# Returns true if the row is selected (via row_selected?/1 or selected_row_id match).
|
||
defp table_row_selected?(assigns, row) do
|
||
item = assigns.row_item.(row)
|
||
|
||
if assigns[:row_selected?] do
|
||
assigns.row_selected?.(item)
|
||
else
|
||
assigns[:selected_row_id] != nil and
|
||
assigns.row_value_id_fn.(row) == assigns.selected_row_id
|
||
end
|
||
end
|
||
|
||
# Returns CSS classes for table row: hover/focus-within outline when row_click is set,
|
||
# and stronger selected outline when selected (WCAG: not color-only).
|
||
# Hover/focus-within are omitted for the selected row so the selected ring stays visible.
|
||
defp table_row_tr_class(row_click, selected?) do
|
||
has_row_click? = not is_nil(row_click)
|
||
base = []
|
||
|
||
base =
|
||
if has_row_click? and not selected?,
|
||
do:
|
||
base ++
|
||
[
|
||
"hover:ring-2",
|
||
"hover:ring-inset",
|
||
"hover:ring-base-content/10",
|
||
"focus-within:ring-2",
|
||
"focus-within:ring-inset",
|
||
"focus-within:ring-base-content/10"
|
||
],
|
||
else: base
|
||
|
||
base = if selected?, do: base ++ ["ring-2", "ring-inset", "ring-primary"], else: base
|
||
Enum.join(base, " ")
|
||
end
|
||
|
||
defp table_th_aria_sort(col, sort_field, sort_order) do
|
||
col_sort = Map.get(col, :sort_field)
|
||
|
||
if not is_nil(col_sort) and col_sort == sort_field and sort_order in [:asc, :desc] do
|
||
if sort_order == :asc, do: "ascending", else: "descending"
|
||
else
|
||
nil
|
||
end
|
||
end
|
||
|
||
# Combines column class with optional sticky header classes (desktop only; theme-friendly bg).
|
||
defp table_th_class(col, sticky_header) do
|
||
base = Map.get(col, :class)
|
||
sticky = if sticky_header, do: "lg:sticky lg:top-0 bg-base-100 z-10", else: nil
|
||
[base, sticky] |> Enum.filter(& &1) |> Enum.join(" ")
|
||
end
|
||
|
||
defp table_th_sticky_class(true),
|
||
do: "lg:sticky lg:top-0 bg-base-100 z-10"
|
||
|
||
defp table_th_sticky_class(_), do: nil
|
||
|
||
@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"
|
||
attr :rest, :global, include: ~w(aria-hidden)
|
||
|
||
def icon(%{name: "hero-" <> _} = assigns) do
|
||
~H"""
|
||
<span class={[@name, @class]} {@rest} />
|
||
"""
|
||
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
|