Skip to content

Commit

Permalink
reworked with flex and grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamdanchi @danil-chibrikov
iamdanchi authored and danil-chibrikov committed Jun 7, 2022
1 parent db9e27d commit 6c75f8d
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 121 deletions.
6 changes: 3 additions & 3 deletions lib/moon/components/field_border.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ defmodule Moon.Components.FieldBorder do
end

def get_default_states_class() do
"hover:bg-goku-120 disabled:opacity-50 disabled:cursor-not-allowed
focus:border-piccolo-100 focus:outline-none
invalid:shadow-none invalid:border-chi-chi-100"
"hover:ring-piccolo-100 hover:border-piccolo-100
focus:outline-none focus:border-piccolo-100 focus:ring-piccolo-100 focus:ring-1
focus:invalid:border-piccolo-100 focus:invalid:ring-piccolo-100"
end
end
4 changes: 3 additions & 1 deletion lib/moon/components/list_items/single_line_item.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ defmodule Moon.Components.ListItems.SingleLineItem do
<div :if={slot_assigned?(:left_icon)}>
<#slot name="left_icon" />
</div>
<#slot />
<div class="grow">
<#slot />
</div>
<div :if={slot_assigned?(:right_icon)}>
<#slot name="right_icon" />
</div>
Expand Down
67 changes: 39 additions & 28 deletions lib/moon/components/select/multi_select.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,37 +58,49 @@ defmodule Moon.Components.Select.MultiSelect.Labels do
def render(assigns) do
~F"""
{#if @value && @value != []}
{#if @prompt}
<!-- FTW! If you don't put any tag/comment here - it'll break if the list is empty -->
<!-- <div class={"grid grid-cols-3 grid-flow-row": @prompt}> -->
<div
class={"grid grid-cols-3": @prompt}
style={get_style("grid-auto-flow": if(@prompt, do: "row"))}
>
{#if @prompt}
<!--
<div class={
"col-span-2",
@prompt_text_size_class,
@prompt_text_color_class
}
>
-->
<div
class={"#{@prompt_text_size_class} #{@prompt_text_color_class}"}
style="grid-col: span 2 / span 2;"
>
{@prompt}
</div>
{/if}
<!--
<div
class={
"absolute top-4",
@prompt_text_size_class,
@prompt_text_color_class
"flex justify-start gap-1",
"col-span-2": @prompt
}
,
style="top: 0.75rem"
>
{@prompt}
-->
<div
class="flex justify-start gap-1"
style={get_style("grid-col": if(@prompt, do: "span 2 / span 2"))}
>
{#for v <- @value}
<SelectedLabel
{=@select_id}
option={SelectHelpers.get_option(@options, v)}
{=@label_text_size_class}
{=@label_text_color_class}
{=@label_background_color_class}
/>
{/for}
</div>
{/if}
<div
class={
"flex justify-start gap-1",
absolute: @prompt
}
,
style={get_style(bottom: if(@prompt, do: "0.75rem"))}
>
{#for v <- @value}
<SelectedLabel
{=@select_id}
option={SelectHelpers.get_option(@options, v)}
{=@label_text_size_class}
{=@label_text_color_class}
{=@label_background_color_class}
/>
{/for}
</div>
{#else}
<div class={@prompt_text_color_class}>
Expand Down Expand Up @@ -131,11 +143,10 @@ defmodule Moon.Components.Select.MultiSelect do
data open, :boolean, default: false

slot default
slot option_content

def render(assigns) do
~F"""
<InputContext assigns={assigns} :let={form: form, field: field}>
<InputContext {=assigns} :let={form: form, field: field}>
<Popover placement={@popover_placement} show={@open} on_close="close" class={@popover_class}>
{Phoenix.HTML.Form.multiple_select(form, field, SelectHelpers.get_formatted_options(@options),
class: "hidden",
Expand Down
120 changes: 64 additions & 56 deletions lib/moon/components/select/single_select.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ defmodule Moon.Components.Select.SingleSelect.Value.Icon do
alias Moon.Components.Select.Helpers, as: SelectHelpers

prop icon, :any
prop class, :any
prop style, :any

slot default

Expand All @@ -15,38 +17,8 @@ defmodule Moon.Components.Select.SingleSelect.Value.Icon do
use_props = Map.merge(default_props, icon_custom_props)

~F"""
{component(&icon_module.render/1, use_props)}
"""
end
end

defmodule Moon.Components.Select.SingleSelect.Value.Label do
@moduledoc false

use Moon.StatelessComponent

prop size, :string, default: "text-sm"
prop color, :string, default: "text-trunks-100"
prop is_icon, :boolean, default: false
prop is_label, :boolean, default: false

slot default

def render(assigns) do
~F"""
<div
class={
"absolute",
@size,
@color
}
,
style={get_style(
top: if(@is_label, do: "0.75rem"),
left: if(@is_icon, do: "2.5rem")
)}
>
<#slot />
<div class={@class} style={@style}>
{component(&icon_module.render/1, use_props)}
</div>
"""
end
Expand All @@ -58,40 +30,70 @@ defmodule Moon.Components.Select.SelectedValue.Container do
use Moon.StatelessComponent

alias Moon.Components.Select.SingleSelect.Value.Icon
alias Moon.Components.Select.SingleSelect.Value.Label

prop option, :any
prop label, :string
prop is_icon, :boolean, default: false
prop is_label, :boolean, default: false
prop label_size, :string
prop label_color, :string
prop selected_value_size, :string
prop selected_value_color, :string

def render(assigns) do
is_icon = not is_nil(assigns.option[:left_icon])
is_label = not is_nil(assigns.label)

~F"""
{#if is_icon}
<Icon icon={@option[:left_icon]} />
{/if}
<Label size={@label_size} color={@label_color} {=is_label} {=is_icon}>
{@label}
</Label>
<!--
<div class={"grid grid-rows-3 grid-flow-column": @is_icon}>
-->
<div
class={
"absolute",
@selected_value_size,
@selected_value_color
}
,
style={get_style(
bottom: if(is_label, do: "0.75rem"),
left: if(is_icon, do: "2.5rem")
)}
class={"grid grid-rows-3": @is_icon}
style={get_style("grid-auto-flow": if(@is_icon, do: "column"))}
>
{@option.label}
{#if @is_icon}
<!--
<Icon class="grid place-content-center row-span-3 pr-2" icon={@option[:left_icon]} />
-->
<Icon
class="grid place-content-center pr-2"
icon={@option[:left_icon]}
style="grid-row: span 3 / span 3;"
/>
{/if}
<!--
<div
class={
@label_size,
@label_color,
"col-span-2": @is_icon
}
>
-->
<div
class={"#{@label_size} #{@label_color}"}
style={get_style("grid-col": if(@is_icon, do: "span 2 / span 2"))}
>
{@label}
</div>
<!--
<div
class={
@selected_value_size,
@selected_value_color,
"col-span-2 row-span-3": @is_icon
}
>
-->
<div
class={"#{@selected_value_size} #{@selected_value_color}"}
style={get_style(
"grid-col": if(@is_icon, do: "span 2 / span 2"),
"grid-row": if(@is_icon, do: "span 2 / span 2")
)}
>
{@option.label}
</div>
</div>
"""
end
Expand All @@ -113,6 +115,9 @@ defmodule Moon.Components.Select.SingleSelect.Value.SelectedValue do
prop label_text_color_class, :string

def render(assigns) do
is_icon = not is_nil(assigns.option[:left_icon])
is_label = not is_nil(assigns.prompt)

~F"""
{#if @option}
<div
Expand All @@ -124,6 +129,8 @@ defmodule Moon.Components.Select.SingleSelect.Value.SelectedValue do
>
<Moon.Components.Select.SelectedValue.Container
{=@option}
{=is_label}
{=is_icon}
label={@prompt}
label_size={@prompt_text_size_class}
label_color={@prompt_text_color_class}
Expand All @@ -143,7 +150,6 @@ defmodule Moon.Components.Select.SingleSelect.Value do

alias Moon.Components.Select.Helpers, as: SelectHelpers
alias __MODULE__.SelectedValue
alias __MODULE__.Label

prop select_id, :string
prop options, :any
Expand All @@ -167,7 +173,9 @@ defmodule Moon.Components.Select.SingleSelect.Value do
{=@label_text_color_class}
/>
{#else}
<Label>{@prompt}</Label>
<div class={"#{@label_text_size_class} #{@label_text_color_class}"}>
{@prompt}
</div>
{/if}
"""
end
Expand Down
45 changes: 33 additions & 12 deletions lib/moon_web/pages/components/select/multi_select_page.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ defmodule MoonWeb.Pages.Components.Select.MultiSelectPage do
alias Moon.Autolayouts.TopToDown
alias Moon.Components.Form
alias Moon.Components.Field
alias Moon.Components.FieldLabel
alias Moon.Components.Heading
alias Moon.Components.Select.MultiSelect
alias MoonWeb.Components.ExampleAndCode
Expand Down Expand Up @@ -149,20 +150,17 @@ defmodule MoonWeb.Pages.Components.Select.MultiSelectPage do
~F"""
<Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
<TopToDown>
<Heading size={56} class="mb-4">Multi Select
</Heading>
<Heading size={56} class="mb-4">Multi Select</Heading>
<ExampleAndCode title="Multi Select with options as prop" id="multi_select_with_options_as_prop">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:permissions}>
<FieldLabel>Permissions</FieldLabel>
<MultiSelect
popover_class="pt-2"
id="user-permissions-example-1"
options={User.available_roles()}
prompt="Permission"
field_border_class="hover:ring-piccolo-100 hover:border-piccolo-100
focus:outline-none focus:border-piccolo-100 focus:ring-piccolo-100 focus:ring-1
focus:invalid:border-piccolo-100 focus:invalid:ring-piccolo-100"
/>
</Field>
</Form>
Expand All @@ -173,6 +171,27 @@ defmodule MoonWeb.Pages.Components.Select.MultiSelectPage do
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode
title="Multi Select (prompt inside)"
id="multi_select_with_options_as_prop_and_prompt_inside"
>
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:permissions}>
<MultiSelect
id="user-permissions-example-2"
options={User.available_roles()}
prompt="Permission"
/>
</Field>
</Form>
</:example>
<:code>{code_for_multi_select_with_options_as_prop_and_prompt_inside()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<div>
<div class="text-bulma-100 items-center text-xl leading-7 font-normal my-4">Props</div>
<Table items={@props_info_array}>
Expand Down Expand Up @@ -250,18 +269,20 @@ defmodule MoonWeb.Pages.Components.Select.MultiSelectPage do
"""
end

def code_for_multi_select_with_options_as_prop_and_left_icon do
def code_for_multi_select_with_options_as_prop_and_prompt_inside do
"""
alias Moon.Components.Form
alias Moon.Components.Field
alias Moon.Components.Select.MultiSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<MultiSelect
id="user-permissions-example-2"
options={User.available_roles_with_left_icon()}
prompt="Permission"
/>
<Field name={:permissions}>
<MultiSelect
id="user-permissions-example-1"
options={User.available_roles()}
prompt="Permission"
/>
</Field>
</Form>
def handle_event(
Expand Down
Loading

0 comments on commit 6c75f8d

Please sign in to comment.