nathan/send_it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove default core_component classes

Browse Source
This commit is contained in:
Nathan Chapman 2024-11-15 08:00:21 -07:00
parent 9ebc9ab342
commit 709282091c
1 changed files with 63 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
lib/send_it_web/components/core_components.ex
View File

@ -47,34 +47,33 @@ defmodule SendItWeb.CoreComponents do
phx-mounted={@show && show_modal(@id)} phx-mounted={@show && show_modal(@id)}
phx-remove={hide_modal(@id)} phx-remove={hide_modal(@id)}
data-cancel={JS.exec(@on_cancel, "phx-remove")} data-cancel={JS.exec(@on_cancel, "phx-remove")}
class="relative z-50 hidden" class="hidden"
> >
<div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" /> <div id={"#{@id}-bg"} class="transition-opacity" aria-hidden="true" />
<div <div
class="fixed inset-0 overflow-y-auto" class="fixed"
aria-labelledby={"#{@id}-title"} aria-labelledby={"#{@id}-title"}
aria-describedby={"#{@id}-description"} aria-describedby={"#{@id}-description"}
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
tabindex="0" tabindex="0"
> >
<div class="flex min-h-full items-center justify-center"> <div>
<div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8"> <div>
<.focus_wrap <.focus_wrap
id={"#{@id}-container"} id={"#{@id}-container"}
phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")} phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
phx-key="escape" phx-key="escape"
phx-click-away={JS.exec("data-cancel", to: "##{@id}")} phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition" class="hidden transition"
> >
<div class="absolute top-6 right-5"> <div>
<button <button
phx-click={JS.exec("data-cancel", to: "##{@id}")} phx-click={JS.exec("data-cancel", to: "##{@id}")}
type="button" type="button"
class="-m-3 flex-none p-3 opacity-20 hover:opacity-40"
aria-label="close" aria-label="close"
> >
<.icon name="hero-x-mark-solid" class="h-5 w-5" /> <.icon name="hero-x-mark-solid" />
</button> </button>
</div> </div>
<div id={"#{@id}-content"}> <div id={"#{@id}-content"}>
@ -114,20 +113,20 @@ defmodule SendItWeb.CoreComponents do
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")} phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
role="alert" role="alert"
class={[ class={[
"fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1", "fixed",
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900", @kind == :info && "",
@kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900" @kind == :error && ""
]} ]}
{@rest} {@rest}
> >
<p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6"> <p :if={@title}>
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" /> <.icon :if={@kind == :info} name="hero-information-circle-mini" />
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" /> <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" />
<%= @title %> <%= @title %>
</p> </p>
<p class="mt-2 text-sm leading-5"><%= msg %></p> <p><%= msg %></p>
<button type="button" class="group absolute top-1 right-1 p-2" aria-label="close"> <button type="button" aria-label="close">
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" /> <.icon name="hero-x-mark-solid" />
</button> </button>
</div> </div>
""" """
@ -156,7 +155,7 @@ defmodule SendItWeb.CoreComponents do
phx-connected={hide("#client-error")} phx-connected={hide("#client-error")}
hidden hidden
> >
Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" /> Attempting to reconnect <.icon name="hero-arrow-path" />
</.flash> </.flash>
<.flash <.flash
@ -167,8 +166,7 @@ defmodule SendItWeb.CoreComponents do
phx-connected={hide("#server-error")} phx-connected={hide("#server-error")}
hidden hidden
> >
Hang in there while we get back on track Hang in there while we get back on track <.icon name="hero-arrow-path" />
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
</.flash> </.flash>
</div> </div>
""" """
@ -200,9 +198,9 @@ defmodule SendItWeb.CoreComponents do
def simple_form(assigns) do def simple_form(assigns) do
~H""" ~H"""
<.form :let={f} for={@for} as={@as} {@rest}> <.form :let={f} for={@for} as={@as} {@rest}>
<div class="mt-10 space-y-8 bg-white"> <div>
<%= render_slot(@inner_block, f) %> <%= render_slot(@inner_block, f) %>
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6"> <div :for={action <- @actions}>
<%= render_slot(action, f) %> <%= render_slot(action, f) %>
</div> </div>
</div> </div>
@ -216,7 +214,7 @@ defmodule SendItWeb.CoreComponents do
## Examples ## Examples
<.button>Send!</.button> <.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button> <.button phx-click="go">Send!</.button>
""" """
attr :type, :string, default: nil attr :type, :string, default: nil
attr :class, :string, default: nil attr :class, :string, default: nil
@ -229,8 +227,8 @@ defmodule SendItWeb.CoreComponents do
<button <button
type={@type} type={@type}
class={[ class={[
"phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3", "phx-submit-loading:opacity-75",
"text-sm font-semibold leading-6 text-white active:text-white/80", "",
@class @class
]} ]}
{@rest} {@rest}
@ -308,17 +306,9 @@ defmodule SendItWeb.CoreComponents do
~H""" ~H"""
<div> <div>
<label class="flex items-center gap-4 text-sm leading-6 text-zinc-600"> <label>
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} /> <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
<input <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} {@rest} />
type="checkbox"
id={@id}
name={@name}
value="true"
checked={@checked}
class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
{@rest}
/>
<%= @label %> <%= @label %>
</label> </label>
<.error :for={msg <- @errors}><%= msg %></.error> <.error :for={msg <- @errors}><%= msg %></.error>
@ -330,13 +320,7 @@ defmodule SendItWeb.CoreComponents do
~H""" ~H"""
<div> <div>
<.label for={@id}><%= @label %></.label> <.label for={@id}><%= @label %></.label>
<select <select id={@id} name={@name} multiple={@multiple} {@rest}>
id={@id}
name={@name}
class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
multiple={@multiple}
{@rest}
>
<option :if={@prompt} value=""><%= @prompt %></option> <option :if={@prompt} value=""><%= @prompt %></option>
<%= Phoenix.HTML.Form.options_for_select(@options, @value) %> <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
</select> </select>
@ -353,9 +337,9 @@ defmodule SendItWeb.CoreComponents do
id={@id} id={@id}
name={@name} name={@name}
class={[ class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]", "",
@errors == [] && "border-zinc-300 focus:border-zinc-400", @errors == [] && "",
@errors != [] && "border-rose-400 focus:border-rose-400" @errors != [] && ""
]} ]}
{@rest} {@rest}
><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea> ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
@ -375,9 +359,9 @@ defmodule SendItWeb.CoreComponents do
id={@id} id={@id}
value={Phoenix.HTML.Form.normalize_value(@type, @value)} value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[ class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6", "",
@errors == [] && "border-zinc-300 focus:border-zinc-400", @errors == [] && "",
@errors != [] && "border-rose-400 focus:border-rose-400" @errors != [] && ""
]} ]}
{@rest} {@rest}
/> />
@ -394,7 +378,7 @@ defmodule SendItWeb.CoreComponents do
def label(assigns) do def label(assigns) do
~H""" ~H"""
<label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800"> <label for={@for}>
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</label> </label>
""" """
@ -407,8 +391,8 @@ defmodule SendItWeb.CoreComponents do
def error(assigns) do def error(assigns) do
~H""" ~H"""
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600"> <p>
<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" /> <.icon name="hero-exclamation-circle-mini" />
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</p> </p>
""" """
@ -425,16 +409,16 @@ defmodule SendItWeb.CoreComponents do
def header(assigns) do def header(assigns) do
~H""" ~H"""
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}> <header class={[@actions != [] && "", @class]}>
<div> <div>
<h1 class="text-lg font-semibold leading-8 text-zinc-800"> <h1>
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</h1> </h1>
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600"> <p :if={@subtitle != []}>
<%= render_slot(@subtitle) %> <%= render_slot(@subtitle) %>
</p> </p>
</div> </div>
<div class="flex-none"><%= render_slot(@actions) %></div> <div><%= render_slot(@actions) %></div>
</header> </header>
""" """
end end
@ -471,41 +455,32 @@ defmodule SendItWeb.CoreComponents do
end end
~H""" ~H"""
<div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0"> <div>
<table class="w-[40rem] mt-11 sm:w-full"> <table>
<thead class="text-sm text-left leading-6 text-zinc-500"> <thead>
<tr> <tr>
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th> <th :for={col <- @col}><%= col[:label] %></th>
<th :if={@action != []} class="relative p-0 pb-4"> <th :if={@action != []}>
<span class="sr-only">Actions</span> <span>Actions</span>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody <tbody id={@id} phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}>
id={@id} <tr :for={row <- @rows} id={@row_id && @row_id.(row)}>
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
>
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
<td <td
:for={{col, i} <- Enum.with_index(@col)} :for={{col, i} <- Enum.with_index(@col)}
phx-click={@row_click && @row_click.(row)} phx-click={@row_click && @row_click.(row)}
class={["relative p-0", @row_click && "hover:cursor-pointer"]} class={["", @row_click && ""]}
> >
<div class="block py-4 pr-6"> <div>
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" /> <span class={["", i == 0 && ""]}>
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
<%= render_slot(col, @row_item.(row)) %> <%= render_slot(col, @row_item.(row)) %>
</span> </span>
</div> </div>
</td> </td>
<td :if={@action != []} class="relative w-14 p-0"> <td :if={@action != []}>
<div class="relative whitespace-nowrap py-4 text-right text-sm font-medium"> <div>
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" /> <span :for={action <- @action}>
<span
:for={action <- @action}
class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
>
<%= render_slot(action, @row_item.(row)) %> <%= render_slot(action, @row_item.(row)) %>
</span> </span>
</div> </div>
@ -533,11 +508,11 @@ defmodule SendItWeb.CoreComponents do
def list(assigns) do def list(assigns) do
~H""" ~H"""
<div class="mt-14"> <div>
<dl class="-my-4 divide-y divide-zinc-100"> <dl>
<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8"> <div :for={item <- @item}>
<dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt> <dt><%= item.title %></dt>
<dd class="text-zinc-700"><%= render_slot(item) %></dd> <dd><%= render_slot(item) %></dd>
</div> </div>
</dl> </dl>
</div> </div>
@ -556,12 +531,9 @@ defmodule SendItWeb.CoreComponents do
def back(assigns) do def back(assigns) do
~H""" ~H"""
<div class="mt-16"> <div>
<.link <.link navigate={@navigate}>
navigate={@navigate} <.icon name="hero-arrow-left-solid" />
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) %> <%= render_slot(@inner_block) %>
</.link> </.link>
</div> </div>
@ -584,7 +556,7 @@ defmodule SendItWeb.CoreComponents do
## Examples ## Examples
<.icon name="hero-x-mark-solid" /> <.icon name="hero-x-mark-solid" />
<.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" /> <.icon name="hero-arrow-path" />
""" """
attr :name, :string, required: true attr :name, :string, required: true
attr :class, :string, default: nil attr :class, :string, default: nil