Packages
moon
2.87.2
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/tutorials/icons/icons_page.ex
defmodule MoonWeb.Pages.Components.IconsPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonIcons.Helpers.Icons
alias Moon.Icon
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.IconsBlock
alias MoonWeb.Components.IconItem
alias MoonWeb.Components.PageSection
alias MoonWeb.Pages.IconsPage.IconsImportDisplay
data(selected_icons, :list, default: [])
data(case_converted_list, :list)
data(import_name_string, :string)
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components"
},
%{
to: "/components/icons",
name: "Icons"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Icons" image="facing/components/icon.png">
<p>
Moon DS provides a set of commonly used interface icons you can use in your project.
</p>
</ComponentPageDescription>
<ExampleAndCode title="Default" id="default">
<:example>
<Icon name="files_copy" />
</:example>
<:code>{default_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Different sizes and colors" id="icons">
<:example>
<Icon name="files_copy" class="text-moon-24 text-chichi" />
<Icon name="files_copy" class="text-moon-24 text-trunks" />
<Icon name="files_copy" class="text-moon-32 text-roshi fill-roshi/20" />
<Icon name="files_copy" class="text-moon-32 text-piccolo" />
<Icon name="files_copy" class="text-moon-48 text-raditz" />
<Icon name="files_copy" class="text-moon-48 text-whis" />
</:example>
<:code>{icons_code()}</:code>
</ExampleAndCode>
<p>
Please select icons for Import.
</p>
<PageSection
title="Import code for selected icons (by attribute)"
:if={!Enum.empty?(@selected_icons)}
>
<IconsImportDisplay>
{get_import_text_by_attribute(assigns, @selected_icons)}
</IconsImportDisplay>
</PageSection>
<PageSection title="Import code for selected icons (by name)" :if={!Enum.empty?(@selected_icons)}>
<IconsImportDisplay>
{get_import_text_by_name(assigns, @selected_icons)}
</IconsImportDisplay>
</PageSection>
{#for name <- Icons.group_names()}
<PageSection title={String.capitalize(name)}>
<IconsBlock>
{#for icon_name <- apply(Icons, String.to_existing_atom("list_#{name}"), [])}
<IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
{/for}
</IconsBlock>
</PageSection>
{/for}
</Page>
"""
end
def default_code do
"""
<Icon name="files_copy" />
"""
end
def icons_code do
"""
<Icon name="files_copy" class="text-moon-24 text-chichi" />
<Icon name="files_copy" class="text-moon-24 text-trunks" />
<Icon name="files_copy" class="text-moon-32 text-roshi fill-roshi/20" />
<Icon name="files_copy" class="text-moon-32 text-piccolo" />
<Icon name="files_copy" class="text-moon-48 text-raditz" />
<Icon name="files_copy" class="text-moon-48 text-whis" />
"""
end
def handle_event(
"add_selected_icon",
%{"icon-value" => value},
socket
) do
selected_icons = Enum.concat(socket.assigns.selected_icons, [value])
socket = socket |> assign(:selected_icons, selected_icons)
{:noreply, socket}
end
defp get_import_text_by_attribute(assigns, selected_icons) do
assigns = assign(assigns, selected_icons: selected_icons)
~F"""
alias Moon.Icon
{#for icon <- @selected_icons}{icon_string(icon)}{/for}
"""
end
defp icon_string(name) do
"""
<Icon name="#{name}" />
"""
end
defp get_import_text_by_name(assigns, selected_icons) do
case_converted_list = Enum.map(selected_icons, fn i -> Macro.camelize(i) end)
import_name_string = Enum.join(case_converted_list, ", ")
assigns =
assign(assigns,
case_converted_list: case_converted_list,
import_name_string: import_name_string
)
~F"""
{get_alias_string(@import_name_string)}
{#for icon <- @case_converted_list}{get_icon_tag(icon)}{/for}
"""
end
defp get_alias_string(names) do
# credo:disable-for-next-line Credo.Check.Consistency.SpaceInParentheses
"alias Moon.Icons.{#{names}}"
end
defp get_icon_tag(name) do
"<#{name} />\n"
end
end