- <.flash_group flash={@flash} />
- {@inner_content}
-
-
- {render_slot(action, f)}
+
"""
end
@doc """
- Renders a button.
+ Renders a button with navigation support.
## Examples
<.button>Send!
- <.button phx-click="go" class="ml-2">Send!
+ <.button phx-click="go" variant="primary">Send!
+ <.button navigate={~p"/"}>Home
"""
- attr :type, :string, default: nil
- attr :class, :string, default: nil
- attr :rest, :global, include: ~w(disabled form name value)
-
+ attr :rest, :global, include: ~w(href navigate patch method)
+ attr :variant, :string, values: ~w(primary)
slot :inner_block, required: true
- def button(assigns) do
- ~H"""
-
- """
+ 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
+ ~H"""
+ <.link class={["btn", @class]} {@rest}>
+ {render_slot(@inner_block)}
+
+ """
+ else
+ ~H"""
+
+ """
+ end
end
@doc """
@@ -276,7 +145,7 @@ defmodule MvWeb.CoreComponents do
attr :type, :string,
default: "text",
values: ~w(checkbox color date datetime-local email file month number password
- range search select tel text textarea time url week)
+ 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]"
@@ -286,6 +155,8 @@ defmodule MvWeb.CoreComponents do
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
@@ -309,108 +180,95 @@ defmodule MvWeb.CoreComponents do
end)
~H"""
-
+ <.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" />
+
-
+
+
+
+
{@title}
+{msg}
-
+
"""
end
def input(%{type: "select"} = assigns) do
~H"""
-
- <.label for={@id}>{@label}
-
+
+
"""
end
def input(%{type: "textarea"} = assigns) do
~H"""
-
- <.label for={@id}>{@label}
-
+
+
"""
end
# All other inputs text, datetime-local, url, password, etc. are handled here...
def input(assigns) do
~H"""
-
- <.label for={@id}>{@label}
-
+
+
"""
end
- @doc """
- Renders a label.
- """
- attr :for, :string, default: nil
- slot :inner_block, required: true
-
- def label(assigns) do
+ # Helper used by inputs to generate form errors
+ defp error(assigns) do
~H"""
-
- """
- end
-
- @doc """
- Generates a generic error message.
- """
- slot :inner_block, required: true
-
- def error(assigns) do
- ~H"""
- - <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" /> +
+ <.icon name="hero-exclamation-circle" class="size-5" /> {render_slot(@inner_block)}
""" @@ -427,12 +285,12 @@ defmodule MvWeb.CoreComponents do def header(assigns) do ~H""" -
-
+
@@ -473,49 +331,34 @@ defmodule MvWeb.CoreComponents do
end
~H"""
-
+
{render_slot(@inner_block)}
-
+
{render_slot(@subtitle)}
-
-
-
-
+ | {col[:label]} | -- {gettext("Actions")} - | -
|---|---|
|
-
-
-
- {render_slot(col, @row_item.(row))}
-
-
- |
-
-
-
-
- {render_slot(action, @row_item.(row))}
-
-
- |
-
| {col[:label]} | ++ {gettext("Actions")} + | +
|---|---|
| + {render_slot(col, @row_item.(row))} + | +
+
+ <%= for action <- @action do %>
+ {render_slot(action, @row_item.(row))}
+ <% end %>
+
+ |
+
-
-
-
- {item.title} -
- {render_slot(item)} +
-
+ +- -{item.title}+{render_slot(item)}
-
- """
- end
-
- @doc """
- Renders a back navigation link.
-
- ## Examples
-
- <.back navigate={~p"/posts"}>Back to posts
- """
- attr :navigate, :any, required: true
- slot :inner_block, required: true
-
- def back(assigns) do
- ~H"""
- -
+
- <.link
- navigate={@navigate}
- class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
- >
- <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
- {render_slot(@inner_block)}
-
-
+
+
"""
end
@@ -581,15 +400,15 @@ defmodule MvWeb.CoreComponents do
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 your `assets/tailwind.config.js`.
+ your compiled app.css by the plugin in `assets/vendor/heroicons.js`.
## Examples
- <.icon name="hero-x-mark-solid" />
- <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
+ <.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: nil
+ attr :class, :string, default: "size-4"
def icon(%{name: "hero-" <> _} = assigns) do
~H"""
@@ -604,7 +423,7 @@ defmodule MvWeb.CoreComponents do
to: selector,
time: 300,
transition:
- {"transition-all transform ease-out duration-300",
+ {"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"}
)
@@ -615,37 +434,11 @@ defmodule MvWeb.CoreComponents do
to: selector,
time: 200,
transition:
- {"transition-all transform ease-in duration-200",
- "opacity-100 translate-y-0 sm:scale-100",
+ {"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
- def show_modal(js \\ %JS{}, id) when is_binary(id) do
- js
- |> JS.show(to: "##{id}")
- |> JS.show(
- to: "##{id}-bg",
- time: 300,
- transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
- )
- |> show("##{id}-container")
- |> JS.add_class("overflow-hidden", to: "body")
- |> JS.focus_first(to: "##{id}-content")
- end
-
- def hide_modal(js \\ %JS{}, id) do
- js
- |> JS.hide(
- to: "##{id}-bg",
- transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"}
- )
- |> hide("##{id}-container")
- |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
- |> JS.remove_class("overflow-hidden", to: "body")
- |> JS.pop_focus()
- end
-
@doc """
Translates an error message using gettext.
"""
diff --git a/lib/mv_web/components/layouts.ex b/lib/mv_web/components/layouts.ex
index 1ced765..ba8ec67 100644
--- a/lib/mv_web/components/layouts.ex
+++ b/lib/mv_web/components/layouts.ex
@@ -40,6 +40,15 @@ defmodule MvWeb.Layouts do
-
+
- + +
- Website diff --git a/lib/mv_web/components/layouts/app.html.heex b/lib/mv_web/components/layouts/app.html.heex deleted file mode 100644 index 54258db..0000000 --- a/lib/mv_web/components/layouts/app.html.heex +++ /dev/null @@ -1,39 +0,0 @@ -
-
-
-
- ![]({~p"/images/logo.svg"})
-
-
-
-
-
- - v{Application.spec(:phoenix, :vsn)} -
-