Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
12 kB · 419 lines
Elixir
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420defmodule GitSyncWeb.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.
Styling is hand-written CSS in `assets/css/app.css`; components carry semantic class names rather than utility classes.
* [Phoenix.Component](https://phoenix-live-view.hexdocs.pm/Phoenix.Component.html) - the component system used by Phoenix. Some components, such as `<.link>` and `<.form>`, are defined there.
""" use Phoenix.Component
@doc """ Renders flash notices.
## Examples
<.flash kind={:info} flash={@flash} /> <.flash id="welcome-back" kind={:info}>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} data-flash data-kind={@kind} data-flash-autodismiss={@kind == :info} role="alert" {@rest} > <div> <p :if={@title}><strong>{@title}</strong></p> <p>{msg}</p> </div> <button type="button" data-flash-close aria-label="close">×</button> </div> """ end
@doc """ Renders a button with navigation support.
## Examples
<.button>Send!</.button> <.button variant="secondary">Send!</.button> <.button navigate={~p"/"}>Home</.button> """ attr :rest, :global, include: ~w(href navigate patch method download name value disabled type) attr :class, :any attr :variant, :string, values: ~w(primary secondary), default: "primary" slot :inner_block, required: true
def button(%{rest: rest} = assigns) do assigns = assign_new(assigns, :class, fn -> assigns.variant end)
if rest[:href] || rest[:navigate] || rest[:patch] do ~H""" <.link class={["button", @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 radio, are best written directly in your templates.
## Examples
```heex <.input field={@form[:email]} type="email" /> <.input name="my-input" errors={["oh no!"]} /> ```
## Select type
When using `type="select"`, you must pass the `options` and optionally a `value` to mark which option should be preselected.
```heex <.input field={@form[:user_type]} type="select" options={["Admin": "admin", "User": "user"]} /> ```
For more information on what kind of data can be passed to `options` see [`options_for_select`](https://phoenix-html.hexdocs.pm/Phoenix.HTML.Form.html#options_for_select/2). """ 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 datalist datetime-local email file month number password search select tel text textarea time url week hidden)
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, :any, default: nil, doc: "the input class to use over defaults" attr :error_class, :any, 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: "hidden"} = assigns) do ~H""" <input type="hidden" id={@id} name={@name} value={@value} {@rest} /> """ 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="field checkbox"> <label for={@id}> <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} form={@rest[:form]} /> <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} class={@class} {@rest} />{@label} </label> <.error :for={msg <- @errors}>{msg}</.error> </div> """ end
def input(%{type: "select"} = assigns) do ~H""" <div class="field"> <label for={@id}> <span :if={@label}>{@label}</span> <select id={@id} name={@name} class={[@class, @errors != [] && @error_class]} aria-invalid={@errors != []} 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> </div> """ end
def input(%{type: "datalist"} = assigns) do assigns = assign(assigns, :list_id, "#{assigns.id}-options")
~H""" <div class="field"> <label for={@id}> <span :if={@label}>{@label}</span> <input type="text" name={@name} id={@id} value={Phoenix.HTML.Form.normalize_value("text", @value)} list={@list_id} class={[@class, @errors != [] && @error_class]} aria-invalid={@errors != []} {@rest} /> </label> <datalist id={@list_id}> <option :for={option <- @options} value={option}></option> </datalist> <.error :for={msg <- @errors}>{msg}</.error> </div> """ end
def input(%{type: "textarea"} = assigns) do ~H""" <div class="field"> <label for={@id}> <span :if={@label}>{@label}</span> <textarea id={@id} name={@name} class={[@class, @errors != [] && @error_class]} aria-invalid={@errors != []} {@rest} >{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea> </label> <.error :for={msg <- @errors}>{msg}</.error> </div> """ end
# All other inputs text, datetime-local, url, password, etc. are handled here... def input(assigns) do ~H""" <div class="field"> <label for={@id}> <span :if={@label}>{@label}</span> <input type={@type} name={@name} id={@id} value={Phoenix.HTML.Form.normalize_value(@type, @value)} class={[@class, @errors != [] && @error_class]} aria-invalid={@errors != []} {@rest} /> </label> <.error :for={msg <- @errors}>{msg}</.error> </div> """ end
# Helper used by inputs to generate form errors defp error(assigns) do ~H""" <p class="field-error">{render_slot(@inner_block)}</p> """ end
@doc """ Renders a header with title. """ slot :inner_block, required: true slot :subtitle slot :actions
def header(assigns) do ~H""" <header> <div> <h1>{render_slot(@inner_block)}</h1> <p :if={@subtitle != []}>{render_slot(@subtitle)}</p> </div> <div :if={@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_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 ~H""" <table> <thead> <tr> <th :for={col <- @col}>{col[:label]}</th> <th :if={@action != []}> <span class="sr-only">Actions</span> </th> </tr> </thead> <tbody id={@id}> <tr :for={row <- @rows} id={@row_id && @row_id.(row)}> <td :for={col <- @col}> {render_slot(col, @row_item.(row))} </td> <td :if={@action != []}> <div> <%= for action <- @action do %> {render_slot(action, @row_item.(row))} <% end %> </div> </td> </tr> </tbody> </table> """ 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""" <dl class="data-list"> <%= for item <- @item do %> <dt>{item.title}</dt> <dd>{render_slot(item)}</dd> <% end %> </dl> """ end
@doc """ Translates an error message using gettext. """ def translate_error({msg, opts}) do # You can make use of gettext to translate error messages by # uncommenting and adjusting the following code:
# if count = opts[:count] do # Gettext.dngettext(GitSyncWeb.Gettext, "errors", msg, msg, count, opts) # else # Gettext.dgettext(GitSyncWeb.Gettext, "errors", msg, opts) # end
Enum.reduce(opts, msg, fn {key, value}, acc -> String.replace(acc, "%{#{key}}", fn _ -> to_string(value) end) 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}) endend