fix: Fix tab styles.

apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex

@@ -142,6 +142,10 @@
           <.dm_mdi name={"book-open-page-variant-outline"} class="w-4 h-4" />
           Pagination
         </.link>
+        <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="tab" href="/storybook/components/tab">
+          <.dm_mdi name={"tab"} class="w-4 h-4" />
+          Tab
+        </.link>
         <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="table" href="/storybook/components/table">
           <.dm_mdi name={"table"} class="w-4 h-4" />
           Table

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

@@ -3,24 +3,31 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Tab do
 
   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
+          active_tab_name: "Luke"
+        },
+        slots: [
+          ~s(<:tab name="Luke">Luke</:tab>),
+          ~s(<:tab name="Anakin">Anakin</:tab>),
+          ~s(<:tab_content name="Luke">Luke Skywalker, brother of Prince Leia Organa</:tab_content>),
+          ~s(<:tab_content name="Anakin">Anakin Skywalker, aka. Darth Vador</:tab_content>),
+        ]
+      },
+      %Variation{
+        id: :vertical,
+        attributes: %{
+          active_tab_name: "Anakin",
+          orientation: "vertical"
         },
         slots: [
-          ~s(<:tab>Tab 1</:tab>),
-          ~s(<:tab>Tab 2</:tab>)
+          ~s(<:tab name="Luke">Luke</:tab>),
+          ~s(<:tab name="Anakin">Anakin</:tab>),
+          ~s(<:tab_content name="Luke">Luke Skywalker, brother of Prince Leia Organa</:tab_content>),
+          ~s(<:tab_content name="Anakin">Anakin Skywalker, aka. Darth Vador</:tab_content>),
         ]
       },
     ]

apps/phoenix_duskmoon/lib/phoenix_duskmoon/tab.ex

@@ -5,15 +5,14 @@ defmodule PhoenixDuskmoon.Tab do
   """
   use PhoenixDuskmoon, :html
 
-  import PhoenixDuskmoon.Link
-  import PhoenixDuskmoon.Icons
-
   @doc """
   Generates tabs
   ## Example
-      <.dm_tab active_tab="id1">
-        <:tab id="id1">Menu1</:tab>
-        <:tab id="id2">Menu2</:tab>
+      <.dm_tab active_tab_index={0}>
+        <:tab>Menu1</:tab>
+        <:tab>Menu2</:tab>
+        <:tab_content>Menu1 Content</:tab_content>
+        <:tab_content>Menu2 Content</:tab_content>
       </.dm_tab>
   """
   @doc type: :component
@@ -24,22 +23,43 @@ defmodule PhoenixDuskmoon.Tab do
     """
   )
 
-  attr(:class, :string,
+  attr(:class, :any,
     default: "",
     doc: """
     html attribute class
     """
   )
 
-  attr(:active_tab, :integer,
+  attr(:header_class, :any,
+    default: "",
+    doc: """
+    header html attribute class
+    """
+  )
+
+  attr(:orientation, :string,
+    default: "horizontal",
+    values: ["horizontal", "vertical"],
+    doc: """
+    header html attribute class
+    """
+  )
+
+  attr(:active_tab_index, :integer,
     default: 0,
     doc: """
-    the index of active tab
+    the index of active tab, if active_tab_name is not set, this will be used
+    """
+  )
+
+  attr(:active_tab_name, :string,
+    default: "",
+    doc: """
+    the name of active tab, use for match tab and tab_content
     """
   )
 
   attr(:active_tab_class, :any,
-    default: "text-blue-400 border-x-0 border-t-0 border-b border-solid border-blue-400",
     doc: """
     class of active tab
     """
@@ -48,36 +68,83 @@ defmodule PhoenixDuskmoon.Tab do
   slot(:tab,
     required: false,
     doc: """
-    Render menu
+    Render tab
     """
   ) do
-    attr :id, :string
-    attr :class, :string
+    attr :id, :any
+    attr :class, :any
+    attr :name, :string
+  end
+
+  slot(:tab_content,
+    required: false,
+    doc: """
+    Render tab content
+    """
+  ) do
+    attr :id, :any
+    attr :class, :any
+    attr :name, :string
   end
 
   def dm_tab(assigns) do
+    assigns = assigns |> assign_new(:active_tab_class, fn() ->
+      if assigns[:orientation] == "horizontal" do
+        "text-blue-400 border-x-0 border-t-0 border-b border-solid border-blue-400"
+      else
+        "text-blue-400 border-y-0 border-l-0 border-r border-solid border-blue-400"
+      end
+    end)
     ~H"""
-    <div
+    <section
       id={@id}
       class={[
-        "flex flex-row justify-start items-center gap-2",
+        "flex gap-2",
         "w-full px-4",
+        if(@orientation == "horizontal", do: "flex-col", else: "flex-row"),
         @class
       ]}
     >
+      <header
+        class={[
+          "flex justify-start items-center gap-2",
+          if(@orientation == "horizontal", do: "flex-row", else: "flex-col"),
+          @header_class
+        ]}
+      >
       <%= for {tab, i} <- Enum.with_index(@tab) do %>
-        <span class={[
-          "flex flex-row",
-          "py-4 px-2",
-          if(@active_tab == i,
-            do: @active_tab_class,
-            else: "cursor-pointer"
-          )
-        ]}>
+        <span
+          id={Map.get(tab, :id, false)}
+          class={[
+            "flex flex-row",
+            "py-4 px-2",
+            Map.get(tab, :class, ""),
+            if(@active_tab_name != "",
+              do: if(@active_tab_name == Map.get(tab, :name, ""),
+                do: @active_tab_class,
+                else: "cursor-pointer"),
+              else: if(@active_tab_index == i,
+                do: @active_tab_class,
+                else: "cursor-pointer"))
+          ]}
+          phx-click={Map.get(tab, :phx_click, nil)}
+        >
           <%= render_slot(tab) %>
         </span>
       <% end %>
-    </div>
+      </header>
+      <%= for {tab_content, i} <- Enum.with_index(@tab_content) do %>
+        <%= if @active_tab_name != "" do %>
+          <%= if @active_tab_name == Map.get(tab_content, :name, "") do %>
+            <%= render_slot(tab_content) %>
+          <% end %>
+        <% else %>
+          <%= if @active_tab_index == i do %>
+            <%= render_slot(tab_content) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </section>
     """
   end
 end