5e03dccb69
- use role="status" for info messages, role="alert" for errors - add aria-live attribute (polite for info, assertive for errors) - move phx-click to close button for better keyboard navigation - add close buttons to shop flash messages - add aria-hidden to decorative icons Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
791 lines
24 KiB
Elixir
791 lines
24 KiB
Elixir
defmodule BerrypodWeb.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.
|
||
|
||
Styled with custom admin CSS (`assets/css/admin/components.css`).
|
||
|
||
* [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: BerrypodWeb.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], 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}
|
||
role={if(@kind == :error, do: "alert", else: "status")}
|
||
aria-live={if(@kind == :error, do: "assertive", else: "polite")}
|
||
class="admin-banner"
|
||
{@rest}
|
||
>
|
||
<div class={[
|
||
"admin-alert",
|
||
@kind == :info && "admin-alert-info",
|
||
@kind == :error && "admin-alert-error"
|
||
]}>
|
||
<.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" />
|
||
<div>
|
||
<p :if={@title} class="admin-alert-title">{@title}</p>
|
||
<p>{msg}</p>
|
||
</div>
|
||
<div class="admin-alert-spacer" />
|
||
<button
|
||
type="button"
|
||
class="admin-alert-close"
|
||
aria-label={gettext("close")}
|
||
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
|
||
>
|
||
<.icon name="hero-x-mark" class="size-5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders inline status feedback next to a button or form section.
|
||
|
||
## Examples
|
||
|
||
<.inline_feedback status={@save_status} />
|
||
<.inline_feedback status={@save_status} message={@save_error} />
|
||
"""
|
||
attr :status, :atom, values: [:idle, :saving, :saved, :error], default: :idle
|
||
attr :message, :string, default: nil
|
||
|
||
def inline_feedback(assigns) do
|
||
~H"""
|
||
<span
|
||
:if={@status != :idle}
|
||
class={["admin-inline-feedback", "admin-inline-feedback-#{@status}"]}
|
||
role={if(@status == :error, do: "alert", else: "status")}
|
||
aria-live={if(@status == :error, do: "assertive", else: "polite")}
|
||
>
|
||
<.icon :if={@status == :saving} name="hero-arrow-path" class="size-4 motion-safe:animate-spin" />
|
||
<.icon :if={@status == :saved} name="hero-check" class="size-4" />
|
||
<.icon :if={@status == :error} name="hero-exclamation-circle" class="size-4" />
|
||
<span>{feedback_text(@status, @message)}</span>
|
||
</span>
|
||
"""
|
||
end
|
||
|
||
defp feedback_text(:saving, _), do: "Saving..."
|
||
defp feedback_text(:saved, nil), do: "Saved"
|
||
defp feedback_text(:saved, msg), do: msg
|
||
defp feedback_text(:error, nil), do: "Something went wrong"
|
||
defp feedback_text(:error, msg), do: msg
|
||
defp feedback_text(:idle, _), do: nil
|
||
|
||
@doc """
|
||
Renders a button with navigation support.
|
||
|
||
## Examples
|
||
|
||
<.button>Send!</.button>
|
||
<.button phx-click="go" variant="primary">Send!</.button>
|
||
<.button navigate={~p"/"}>Home</.button>
|
||
"""
|
||
attr :rest, :global, include: ~w(href navigate patch method download name value disabled)
|
||
attr :class, :string
|
||
attr :variant, :string, values: ~w(primary outline)
|
||
slot :inner_block, required: true
|
||
|
||
def button(%{rest: rest} = assigns) do
|
||
variants = %{
|
||
"primary" => "admin-btn-primary",
|
||
"outline" => "admin-btn-outline",
|
||
nil => "admin-btn-primary admin-btn-soft"
|
||
}
|
||
|
||
variant_class = Map.fetch!(variants, assigns[:variant])
|
||
|
||
assigns =
|
||
assign(assigns, :class, [
|
||
"admin-btn",
|
||
variant_class,
|
||
assigns[:class]
|
||
])
|
||
|
||
if rest[:href] || rest[:navigate] || rest[:patch] do
|
||
~H"""
|
||
<.link class={@class} {@rest}>
|
||
{render_slot(@inner_block)}
|
||
</.link>
|
||
"""
|
||
else
|
||
~H"""
|
||
<button class={@class} {@rest}>
|
||
{render_slot(@inner_block)}
|
||
</button>
|
||
"""
|
||
end
|
||
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"""
|
||
<div class="admin-fieldset">
|
||
<label>
|
||
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
|
||
<span class="admin-label">
|
||
<input
|
||
type="checkbox"
|
||
id={@id}
|
||
name={@name}
|
||
value="true"
|
||
checked={@checked}
|
||
class={@class || "admin-checkbox admin-checkbox-sm"}
|
||
{@rest}
|
||
/>{@label}
|
||
</span>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
def input(%{type: "select"} = assigns) do
|
||
assigns = assign(assigns, :error_id, assigns.id && "#{assigns.id}-error")
|
||
|
||
~H"""
|
||
<div class="admin-fieldset">
|
||
<label>
|
||
<span :if={@label} class="admin-label">{@label}</span>
|
||
<select
|
||
id={@id}
|
||
name={@name}
|
||
class={[@class || "admin-select", @errors != [] && (@error_class || "admin-input-error")]}
|
||
multiple={@multiple}
|
||
aria-invalid={@errors != [] && "true"}
|
||
aria-describedby={@errors != [] && @error_id}
|
||
{@rest}
|
||
>
|
||
<option :if={@prompt} value="">{@prompt}</option>
|
||
{Phoenix.HTML.Form.options_for_select(@options, @value)}
|
||
</select>
|
||
</label>
|
||
<.error :for={msg <- @errors} id={@error_id}>{msg}</.error>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
def input(%{type: "textarea"} = assigns) do
|
||
assigns = assign(assigns, :error_id, assigns.id && "#{assigns.id}-error")
|
||
|
||
~H"""
|
||
<div class="admin-fieldset">
|
||
<label>
|
||
<span :if={@label} class="admin-label">{@label}</span>
|
||
<textarea
|
||
id={@id}
|
||
name={@name}
|
||
class={[
|
||
@class || "admin-textarea",
|
||
@errors != [] && (@error_class || "admin-input-error")
|
||
]}
|
||
aria-invalid={@errors != [] && "true"}
|
||
aria-describedby={@errors != [] && @error_id}
|
||
{@rest}
|
||
>{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
|
||
</label>
|
||
<.error :for={msg <- @errors} id={@error_id}>{msg}</.error>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
# All other inputs text, datetime-local, url, password, etc. are handled here...
|
||
def input(assigns) do
|
||
assigns = assign(assigns, :error_id, assigns.id && "#{assigns.id}-error")
|
||
|
||
~H"""
|
||
<div class="admin-fieldset">
|
||
<label>
|
||
<span :if={@label} class="admin-label">{@label}</span>
|
||
<input
|
||
type={@type}
|
||
name={@name}
|
||
id={@id}
|
||
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
|
||
class={[
|
||
@class || "admin-input",
|
||
@errors != [] && (@error_class || "admin-input-error")
|
||
]}
|
||
aria-invalid={@errors != [] && "true"}
|
||
aria-describedby={@errors != [] && @error_id}
|
||
{@rest}
|
||
/>
|
||
</label>
|
||
<.error :for={msg <- @errors} id={@error_id}>{msg}</.error>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
# Helper used by inputs to generate form errors
|
||
attr :id, :string, default: nil
|
||
slot :inner_block, required: true
|
||
|
||
defp error(assigns) do
|
||
~H"""
|
||
<p class="admin-error" id={@id} role="alert">
|
||
<.icon name="hero-exclamation-circle" class="admin-error-icon" />
|
||
<strong>{render_slot(@inner_block)}</strong>
|
||
</p>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a header with title.
|
||
"""
|
||
slot :inner_block, required: true
|
||
slot :subtitle
|
||
slot :actions
|
||
|
||
def header(assigns) do
|
||
~H"""
|
||
<header class={[
|
||
"admin-header",
|
||
@actions != [] && "admin-header-with-actions"
|
||
]}>
|
||
<div>
|
||
<h1 class="admin-header-title">
|
||
{render_slot(@inner_block)}
|
||
</h1>
|
||
<p :if={@subtitle != []} class="admin-header-subtitle">
|
||
{render_slot(@subtitle)}
|
||
</p>
|
||
</div>
|
||
<div class="admin-header-actions">{render_slot(@actions)}</div>
|
||
</header>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
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"
|
||
|
||
slot :col, required: true do
|
||
attr :label, :string
|
||
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="admin-table-wrap">
|
||
<table class="admin-table admin-table-zebra">
|
||
<thead>
|
||
<tr>
|
||
<th :for={col <- @col}>{col[:label]}</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={@row_click && @row_click.(row)}
|
||
class={@row_click && "admin-table-row-clickable"}
|
||
>
|
||
{render_slot(col, @row_item.(row))}
|
||
</td>
|
||
<td :if={@action != []} class="admin-table-actions">
|
||
<div class="admin-table-actions-row">
|
||
<%= 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="admin-list">
|
||
<li :for={item <- @item} class="admin-list-row">
|
||
<div class="admin-list-grow">
|
||
<div class="admin-list-title">{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 into
|
||
`admin/icons.css` by `mix generate_admin_icons`.
|
||
|
||
## 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
|
||
|
||
@doc """
|
||
Renders a link to an external site with proper security attributes,
|
||
an external-link icon, and screen reader context.
|
||
|
||
Set `icon={false}` when the link already contains its own visual indicator.
|
||
"""
|
||
attr :href, :string, required: true
|
||
attr :class, :string, default: nil
|
||
attr :icon, :boolean, default: true
|
||
attr :rest, :global
|
||
slot :inner_block, required: true
|
||
|
||
def external_link(assigns) do
|
||
~H"""
|
||
<a href={@href} target="_blank" rel="noopener noreferrer" class={@class} {@rest}>
|
||
{render_slot(@inner_block)}
|
||
<.icon :if={@icon} name="hero-arrow-top-right-on-square" class="external-link-icon" />
|
||
<span class="sr-only">(opens in new tab)</span>
|
||
</a>
|
||
"""
|
||
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(BerrypodWeb.Gettext, "errors", msg, msg, count, opts)
|
||
else
|
||
Gettext.dgettext(BerrypodWeb.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 modal dialog.
|
||
|
||
Uses daisyUI's modal component with proper accessibility.
|
||
|
||
## Examples
|
||
|
||
<.modal id="confirm-modal">
|
||
Are you sure?
|
||
<:actions>
|
||
<button class="btn">Cancel</button>
|
||
<button class="btn btn-primary">Confirm</button>
|
||
</:actions>
|
||
</.modal>
|
||
|
||
"""
|
||
attr :id, :string, required: true
|
||
attr :show, :boolean, default: false
|
||
attr :on_cancel, JS, default: %JS{}
|
||
|
||
slot :inner_block, required: true
|
||
slot :actions
|
||
|
||
def modal(assigns) do
|
||
~H"""
|
||
<dialog
|
||
id={@id}
|
||
class="admin-modal"
|
||
phx-mounted={@show && show_modal(@id)}
|
||
phx-remove={hide_modal(@id)}
|
||
>
|
||
<div class="admin-modal-box">
|
||
<form method="dialog" class="admin-modal-close">
|
||
<button
|
||
class="admin-btn admin-btn-ghost admin-btn-icon-round admin-btn-sm"
|
||
phx-click={@on_cancel}
|
||
aria-label={gettext("close")}
|
||
>
|
||
<.icon name="hero-x-mark" class="size-5" />
|
||
</button>
|
||
</form>
|
||
{render_slot(@inner_block)}
|
||
<div :if={@actions != []} class="admin-modal-actions">
|
||
{render_slot(@actions)}
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a radio card group — a set of selectable cards backed by radio inputs.
|
||
|
||
Each option is a map with `:value` and `:name`, plus optional `:description`,
|
||
`:tags`, `:url`, `:badge`, and `:disabled` keys.
|
||
|
||
The `display` attr controls card content layout:
|
||
- `:tags` (default) — name + tag pills + short description
|
||
- `:description` — name + description text + link
|
||
|
||
## Examples
|
||
|
||
<.card_radio_group
|
||
name="email[adapter]"
|
||
value={@selected}
|
||
legend="Email provider"
|
||
options={[
|
||
%{value: "postmark", name: "Postmark", description: "Fast email.", tags: ["Transactional", "US"]},
|
||
%{value: "smtp", name: "SMTP", description: "Any SMTP server.", tags: ["Any type"]}
|
||
]}
|
||
/>
|
||
"""
|
||
attr :name, :string, required: true
|
||
attr :value, :string, default: nil
|
||
attr :legend, :string, required: true
|
||
attr :options, :list, required: true
|
||
attr :disabled, :boolean, default: false
|
||
attr :display, :atom, default: :tags, values: [:description, :tags]
|
||
|
||
def card_radio_group(assigns) do
|
||
~H"""
|
||
<fieldset class="card-radio-fieldset" disabled={@disabled}>
|
||
<legend class="admin-label">{@legend}</legend>
|
||
<div class="card-radio-grid">
|
||
<label
|
||
:for={option <- @options}
|
||
class={[
|
||
"card-radio-card",
|
||
@value == option.value && "card-radio-card-selected",
|
||
option[:disabled] && "card-radio-card-disabled"
|
||
]}
|
||
>
|
||
<input
|
||
type="radio"
|
||
id={"#{@name}-#{option.value}"}
|
||
name={@name}
|
||
value={option.value}
|
||
checked={@value == option.value}
|
||
disabled={option[:disabled] || @disabled}
|
||
class="card-radio-input"
|
||
/>
|
||
<span class="card-radio-name">{option.name}</span>
|
||
<.card_radio_content option={option} display={@display} />
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
"""
|
||
end
|
||
|
||
attr :option, :map, required: true
|
||
attr :display, :atom, required: true
|
||
|
||
defp card_radio_content(%{display: :tags} = assigns) do
|
||
~H"""
|
||
<span :if={@option[:tags]} class="card-radio-tags">
|
||
<span :for={tag <- @option.tags} class="card-radio-tag">{tag}</span>
|
||
</span>
|
||
<span :if={@option[:description]} class="card-radio-description">
|
||
{@option.description}
|
||
</span>
|
||
<span :if={@option[:badge]} class="card-radio-badge">{@option.badge}</span>
|
||
"""
|
||
end
|
||
|
||
defp card_radio_content(assigns) do
|
||
~H"""
|
||
<span :if={@option[:description]} class="card-radio-description">
|
||
{@option.description}
|
||
</span>
|
||
<span :if={@option[:badge]} class="card-radio-badge">{@option.badge}</span>
|
||
<.external_link
|
||
:if={@option[:url]}
|
||
href={@option.url}
|
||
icon={false}
|
||
class="card-radio-link"
|
||
onclick="event.stopPropagation();"
|
||
aria-label={@option.name}
|
||
>
|
||
{@option.name} ↗
|
||
</.external_link>
|
||
"""
|
||
end
|
||
|
||
def show_modal(js \\ %JS{}, id) when is_binary(id) do
|
||
js
|
||
|> JS.exec("showModal()", to: "##{id}")
|
||
end
|
||
|
||
def hide_modal(js \\ %JS{}, id) when is_binary(id) do
|
||
js
|
||
|> JS.exec("close()", to: "##{id}")
|
||
|> JS.pop_focus()
|
||
end
|
||
|
||
# ── Pagination ───────────────────────────────────────────────────
|
||
|
||
@doc """
|
||
Renders pagination controls for admin lists.
|
||
|
||
Hidden when there's only one page. Shows "Showing X-Y of Z" on the left,
|
||
page number buttons with ellipsis on the right.
|
||
|
||
## Attributes
|
||
|
||
* `page` - Required. A `%Berrypod.Pagination{}` struct.
|
||
* `patch` - Required. Base URL path for pagination links (e.g. "/admin/products").
|
||
* `params` - Extra query params to preserve (e.g. %{"tab" => "broken"}). Default `%{}`.
|
||
"""
|
||
attr :page, Berrypod.Pagination, required: true
|
||
attr :patch, :string, required: true
|
||
attr :params, :map, default: %{}
|
||
|
||
def admin_pagination(assigns) do
|
||
assigns =
|
||
assigns
|
||
|> assign(:showing, Berrypod.Pagination.showing_text(assigns.page))
|
||
|> assign(:numbers, Berrypod.Pagination.page_numbers(assigns.page))
|
||
|
||
~H"""
|
||
<nav
|
||
:if={@page.total_pages > 1}
|
||
aria-label="Pagination"
|
||
class="admin-pagination"
|
||
>
|
||
<p class="admin-pagination-showing">{@showing}</p>
|
||
|
||
<div class="admin-pagination-buttons">
|
||
<.link
|
||
patch={admin_page_url(@patch, @page.page - 1, @params)}
|
||
class={["admin-btn admin-btn-sm admin-btn-ghost", @page.page == 1 && "admin-btn-disabled"]}
|
||
aria-label="Previous page"
|
||
aria-disabled={@page.page == 1 && "true"}
|
||
tabindex={@page.page == 1 && "-1"}
|
||
>
|
||
<.icon name="hero-chevron-left" class="size-4" />
|
||
</.link>
|
||
|
||
<%= for item <- @numbers do %>
|
||
<%= case item do %>
|
||
<% :ellipsis -> %>
|
||
<span class="admin-pagination-ellipsis" aria-hidden="true">…</span>
|
||
<% n -> %>
|
||
<.link
|
||
patch={admin_page_url(@patch, n, @params)}
|
||
aria-label={"Page #{n}"}
|
||
aria-current={n == @page.page && "page"}
|
||
class={[
|
||
"admin-btn admin-btn-sm",
|
||
if(n == @page.page, do: "admin-btn-primary", else: "admin-btn-ghost")
|
||
]}
|
||
>
|
||
{n}
|
||
</.link>
|
||
<% end %>
|
||
<% end %>
|
||
|
||
<.link
|
||
patch={admin_page_url(@patch, @page.page + 1, @params)}
|
||
class={[
|
||
"admin-btn admin-btn-sm admin-btn-ghost",
|
||
@page.page == @page.total_pages && "admin-btn-disabled"
|
||
]}
|
||
aria-label="Next page"
|
||
aria-disabled={@page.page == @page.total_pages && "true"}
|
||
tabindex={@page.page == @page.total_pages && "-1"}
|
||
>
|
||
<.icon name="hero-chevron-right" class="size-4" />
|
||
</.link>
|
||
</div>
|
||
</nav>
|
||
"""
|
||
end
|
||
|
||
defp admin_page_url(base, page, params) do
|
||
query = if page > 1, do: Map.put(params, "page", to_string(page)), else: params
|
||
if query == %{}, do: base, else: base <> "?" <> URI.encode_query(query)
|
||
end
|
||
end
|