feat: Add tab and change modal use html dialog.

apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/modal.story.exs

@@ -7,29 +7,30 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Modal do
     [{PhoenixDuskmoon.Modal, dm_show_modal: 0}]
   end
 
-  def template do
-    """
-    <div>
-      <button type="button" class="btn" phx-click={dm_show_modal()}>
-        Open modal
-      </button>
-      <.lsb-variation />
-    </div>
-    """
-  end
-
   def variations do
     [
       %Variation{
         id: :default,
+        attributes: %{
+        },
         slots: [
+          """
+          <:trigger let={f}>
+            <button phx-click={f}>Open</button>
+          </:trigger>
+          """,
           "<:title>PhoenixDuskmoon</:title>",
           "<:body>PhoenixDuskmoon Storybook</:body>"
         ]
       },
       %Variation{
         id: :with_buttons,
         slots: [
+          """
+          <:trigger let={f}>
+            <button phx-click={f}>Open</button>
+          </:trigger>
+          """,
           """
           <:title>
             PhoenixDuskmoon
@@ -42,35 +43,36 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Modal do
           </:body>
           """,
           """
-          <:button>
+          <:footer>
             <button type="button" class="btn">
               Cancel
             </button>
-          </:button>
-          """,
-          """
-          <:button>
             <button type="button" class="btn">
               OK
             </button>
-          </:button>
+          </:footer>
           """
         ]
       },
       %Variation{
         id: :without_title,
         slots: [
+          """
+          <:trigger let={f}>
+            <button phx-click={f}>Open</button>
+          </:trigger>
+          """,
           """
           <:body>
             PhoenixDuskmoonb Is Awesome
           </:body>
           """,
           """
-          <:button>
+          <:footer>
             <button type="button" class="btn">
               OK
             </button>
-          </:button>
+          </:footer>
           """
         ]
       }

apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/tab.story.exs

@@ -0,0 +1,28 @@
+defmodule DuskmoonStorybookWeb.Storybook.Components.Tab do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &PhoenixDuskmoon.Tab.dm_tab/1
+
+  def template do
+    """
+    <div>
+      <.lsb-variation />
+    </div>
+    """
+  end
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          active_tab: 0
+        },
+        slots: [
+          ~s(<:tab>Tab 1</:tab>),
+          ~s(<:tab>Tab 2</:tab>)
+        ]
+      },
+    ]
+  end
+end

apps/phoenix_duskmoon/assets/css/phoenix_duskmoon.css

@@ -2,3 +2,101 @@
 /* @import "tailwindcss/components"; */
 @import "tailwindcss/utilities";
 
+
+/* modal */
+.modal {
+    position: relative;
+    box-shadow: var(--shadow-2), 0 0 0 100vw rgb(0 0 0 / 0.8);
+
+    background: #fff;
+    color: #222;
+    border: 0;
+    border-radius: 0.25rem;
+
+    --x: 0;
+    --y: 0;
+    --delay: 750ms;
+    --animation-timing-func: cubic-bezier(0.75, 0.7, 0, 1.02);
+}
+.modal > .close {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    cursor: pointer;
+}
+
+.modal::backdrop {
+    opacity: 0;
+    isolation: isolate;
+    /* display: none; */
+    transition: all 0s;
+}
+.modal.backdrop::backdrop {
+    opacity: 0;
+    display: initial;
+    transition: all 0s;
+}
+
+.modal[open] {
+    animation: 
+        fade-in var(--delay) forwards var(--animation-timing-func),
+        fly-in var(--delay) forwards var(--animation-timing-func);
+    pointer-events: auto;
+    visibility: visible;
+}
+
+.modal[closing] {
+    animation: 
+        fade-out var(--delay) forwards var(--animation-timing-func),
+        fly-out var(--delay) forwards var(--animation-timing-func);
+
+    display: block;
+    inset: 0;
+    pointer-events: none;
+}
+
+.modal[open]::backdrop {
+    transform: none !important;
+    animation: fade-in 500ms forwards;
+}
+
+.modal[closing]::backdrop {
+    transform: none !important;
+    animation: fade-out 500ms forwards;
+}
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    100% {
+        opacity: 0;
+    }
+    0% {
+        opacity: 1;
+    }
+}
+
+@keyframes fly-in {
+    0% {
+        transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
+        perspective(6em);
+    }
+    100% {
+        transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
+    }
+}
+@keyframes fly-out {
+    0% {
+        transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
+    }
+    100% {
+        transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
+        perspective(6em);
+    }
+}

apps/phoenix_duskmoon/assets/js/phoenix_duskmoon.js

@@ -1,5 +1,30 @@
 import '@gsmlg/lit';
 
+window.addEventListener('modal:open', (evt) => {
+    const modal = evt.target;
+    if (modal.open) {
+        return;
+    }
+    const x = evt.pageX;
+    const y = evt.pageY;
+    modal.style.setProperty("--x", `calc(-50vw + ${x}px)`);
+    modal.style.setProperty("--y", `calc(-50vh + ${y}px)`);
+    modal.showModal();
+    modal.addEventListener('modal:close', (evt) => {
+        modal.setAttribute("closing", "");
+        modal.addEventListener(
+            "animationend",
+            () => {
+            modal.removeAttribute("closing");
+            modal.close();
+            },
+            { once: true }
+        );
+    }, {
+        once: true
+    });
+});
+
 export const WebComponentHook = {
     mounted() {
         const attrs = this.el.attributes;

apps/phoenix_duskmoon/lib/phoenix_duskmoon.ex

@@ -60,6 +60,7 @@ defmodule PhoenixDuskmoon do
       alias PhoenixDuskmoon.Table
       alias PhoenixDuskmoon.PageHeader
       alias PhoenixDuskmoon.PageFooter
+      alias PhoenixDuskmoon.Tab
     end
   end
 
@@ -75,20 +76,21 @@ defmodule PhoenixDuskmoon do
 
   defp components do
     quote do
-      import PhoenixDuskmoon.Link
       import PhoenixDuskmoon.Actionbar
       import PhoenixDuskmoon.Appbar
       import PhoenixDuskmoon.Breadcrumb
       import PhoenixDuskmoon.Card
+      import PhoenixDuskmoon.Icons
       import PhoenixDuskmoon.LeftMenu
+      import PhoenixDuskmoon.Link
+      import PhoenixDuskmoon.Loading
       import PhoenixDuskmoon.Markdown
       import PhoenixDuskmoon.Modal
       import PhoenixDuskmoon.Pagination
-      import PhoenixDuskmoon.Table
-      import PhoenixDuskmoon.Icons
       import PhoenixDuskmoon.PageHeader
       import PhoenixDuskmoon.PageFooter
-      import PhoenixDuskmoon.Loading
+      import PhoenixDuskmoon.Tab
+      import PhoenixDuskmoon.Table
     end
   end