From 433a2f7faf5266f5a21253dc3765fc22ea758407 Mon Sep 17 00:00:00 2001 From: Chris McCord Date: Fri, 13 May 2022 14:52:19 -0400 Subject: [PATCH] WIP --- assets/tailwind.config.js | 1 + lib/live_beats_web/live/live_helpers.ex | 294 +++++++++++++++--------- lib/live_beats_web/views/layout_view.ex | 3 +- mix.exs | 5 +- mix.lock | 4 +- 5 files changed, 199 insertions(+), 108 deletions(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 4c5a135..9d40011 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -1,5 +1,6 @@ // See the Tailwind configuration guide for advanced usage // https://tailwindcss.com/docs/configuration + module.exports = { content: [ './js/**/*.js', diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex index 2dc8eb5..e957d79 100644 --- a/lib/live_beats_web/live/live_helpers.ex +++ b/lib/live_beats_web/live/live_helpers.ex @@ -1,6 +1,5 @@ defmodule LiveBeatsWeb.LiveHelpers do - import Phoenix.LiveView - import Phoenix.LiveView.Helpers + use Phoenix.Component alias LiveBeatsWeb.Router.Helpers, as: Routes alias Phoenix.LiveView.JS @@ -35,9 +34,21 @@ defmodule LiveBeatsWeb.LiveHelpers do >
-
@@ -50,21 +61,30 @@ defmodule LiveBeatsWeb.LiveHelpers do """ end + attr :flash, :map + attr :kiny, :atom def flash(%{kind: :error} = assigns) do ~H""" <%= if live_flash(@flash, @kind) do %>
JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")} + phx-click={ + JS.push("lv:clear-flash") + |> JS.remove_class("fade-in-scale", to: "#flash") + |> hide("#flash") + } phx-hook="Flash" >
- <.icon name={:exclamation_circle} class="w-5 w-5"/> + <.icon name={:exclamation_circle} class="w-5 w-5" /> -
@@ -84,11 +104,14 @@ defmodule LiveBeatsWeb.LiveHelpers do phx-hook="Flash" >
- <.icon name={:check_circle} class="w-5 h-5"/> + <.icon name={:check_circle} class="w-5 h-5" /> -
@@ -99,54 +122,73 @@ defmodule LiveBeatsWeb.LiveHelpers do def spinner(assigns) do ~H""" -
@@ -194,19 +236,32 @@ defmodule LiveBeatsWeb.LiveHelpers do <%= for img <- @img do %> - + <% end %> - <%= render_slot(@title) %> + + <%= render_slot(@title) %> + <%= render_slot(@subtitle) %> - @@ -223,8 +278,11 @@ defmodule LiveBeatsWeb.LiveHelpers do <.link tabindex="-1" role="menuitem" - class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500" {link} - ><%= render_slot(link) %> + class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500" + {link} + > + <%= render_slot(link) %> + <% end %>
@@ -333,30 +391,45 @@ defmodule LiveBeatsWeb.LiveHelpers do |> JS.dispatch("click", to: "##{id} [data-modal-return]") end + attr :id, :string, required: true + attr :show, :boolean, default: false + attr :patch, :string, default: nil + attr :navigate, :string, default: nil + attr :on_cancel, JS, default: %JS{} + attr :on_confirm, JS, default: %JS{} + # slots + attr :title, :list, default: [] + attr :confirm, :list, default: [] + attr :cancel, :list, default: [] + attr :rest, :global def modal(assigns) do - assigns = - assigns - |> assign_new(:show, fn -> false end) - |> assign_new(:patch, fn -> nil end) - |> assign_new(:navigate, fn -> nil end) - |> assign_new(:on_cancel, fn -> %JS{} end) - |> assign_new(:on_confirm, fn -> %JS{} end) - # slots - |> assign_new(:title, fn -> [] end) - |> assign_new(:confirm, fn -> [] end) - |> assign_new(:cancel, fn -> [] end) - |> assign_rest(~w(id show patch navigate on_cancel on_confirm title confirm cancel)a) - ~H""" -
+
<.focus_wrap id={"#{@id}-focus-wrap"} content={"##{@id}-container"}> -