diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex
index 139d1036..6bcf5673 100644
--- a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex
+++ b/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 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 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
diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/tab.story.exs b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/tab.story.exs
index c9ea6f63..b6b79609 100644
--- a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/tab.story.exs
+++ b/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
- """
-
- <.lsb-variation />
-
- """
- end
-
def variations do
[
%Variation{
id: :default,
attributes: %{
- active_tab: 0
+ active_tab_name: "Luke"
+ },
+ slots: [
+ ~s(<:tab name="Luke">Luke),
+ ~s(<:tab name="Anakin">Anakin),
+ ~s(<:tab_content name="Luke">Luke Skywalker, brother of Prince Leia Organa),
+ ~s(<:tab_content name="Anakin">Anakin Skywalker, aka. Darth Vador),
+ ]
+ },
+ %Variation{
+ id: :vertical,
+ attributes: %{
+ active_tab_name: "Anakin",
+ orientation: "vertical"
},
slots: [
- ~s(<:tab>Tab 1),
- ~s(<:tab>Tab 2)
+ ~s(<:tab name="Luke">Luke),
+ ~s(<:tab name="Anakin">Anakin),
+ ~s(<:tab_content name="Luke">Luke Skywalker, brother of Prince Leia Organa),
+ ~s(<:tab_content name="Anakin">Anakin Skywalker, aka. Darth Vador),
]
},
]
diff --git a/apps/phoenix_duskmoon/lib/phoenix_duskmoon/tab.ex b/apps/phoenix_duskmoon/lib/phoenix_duskmoon/tab.ex
index 508b573f..6aae9b12 100644
--- a/apps/phoenix_duskmoon/lib/phoenix_duskmoon/tab.ex
+++ b/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 id="id2">Menu2
+ <.dm_tab active_tab_index={0}>
+ <:tab>Menu1
+ <:tab>Menu2
+ <:tab_content>Menu1 Content
+ <:tab_content>Menu2 Content
"""
@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"""
-
+
<%= for {tab, i} <- Enum.with_index(@tab) do %>
-
+
<%= render_slot(tab) %>
<% end %>
-
+
+ <%= 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 %>
+
"""
end
end