shibao/memEx
1
1
Fork 0
Code Issues 5 Pull Requests Projects Releases 16 Wiki Activity

use component macros for live_helper components
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
shibao 2023-03-15 00:43:35 -04:00
parent 8ef5147078
commit 5f2e69abbd
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/memex_web/live/live_helpers.ex
View File

@ -3,9 +3,12 @@ defmodule MemexWeb.LiveHelpers do
Contains common helper functions for liveviews Contains common helper functions for liveviews
""" """
import Phoenix.Component use Phoenix.Component
alias Phoenix.LiveView.JS alias Phoenix.LiveView.JS
attr :return_to, :string, required: true
slot(:inner_block)
@doc """ @doc """
Renders a live component inside a modal. Renders a live component inside a modal.
@ -78,6 +81,11 @@ defmodule MemexWeb.LiveHelpers do
|> JS.hide(to: "#modal-content", transition: "fade-out-scale") |> JS.hide(to: "#modal-content", transition: "fade-out-scale")
end end
attr :action, :string, required: true
attr :value, :boolean, required: true
attr :id, :string
slot(:inner_block)
@doc """ @doc """
A toggle button element that can be directed to a liveview or a A toggle button element that can be directed to a liveview or a
live_component's `handle_event/3`. live_component's `handle_event/3`.
@ -102,6 +110,7 @@ defmodule MemexWeb.LiveHelpers do
value={@value} value={@value}
checked={@value} checked={@value}
class="sr-only peer" class="sr-only peer"
aria-labelledby={"#{@id}-label"}
{ {
if assigns |> Map.has_key?(:target), if assigns |> Map.has_key?(:target),
do: %{"phx-click": @action, "phx-value-value": @value, "phx-target": @target}, do: %{"phx-click": @action, "phx-value-value": @value, "phx-target": @target},
@ -117,7 +126,7 @@ defmodule MemexWeb.LiveHelpers do
after:transition-all after:duration-250 after:ease-in-out after:transition-all after:duration-250 after:ease-in-out
transition-colors duration-250 ease-in-out"> transition-colors duration-250 ease-in-out">
</div> </div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"> <span id={"#{@id}-label"} class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</span> </span>
</label> </label>