From b8e39ab6c07f974d7b532d744c569c585327c67c Mon Sep 17 00:00:00 2001 From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com> Date: Wed, 1 Nov 2023 09:38:51 +0200 Subject: [PATCH 1/5] Dropdown.Link initiated --- lib/moon/design/dropdown/link.ex | 60 +++++++++++++++++++ lib/moon/design/search.ex | 23 +++++-- lib/moon_web/components/search_button.ex | 4 +- .../examples/design/search_example/custom.ex | 6 +- .../examples/design/search_example/default.ex | 2 +- 5 files changed, 83 insertions(+), 12 deletions(-) create mode 100644 lib/moon/design/dropdown/link.ex diff --git a/lib/moon/design/dropdown/link.ex b/lib/moon/design/dropdown/link.ex new file mode 100644 index 000000000..8a244f723 --- /dev/null +++ b/lib/moon/design/dropdown/link.ex @@ -0,0 +1,60 @@ +defmodule Moon.Design.Dropdown.Link do + @moduledoc "Single oprion for the dropdown component. Renders as a button" + + use Moon.StatelessComponent, slot: "option" + + @doc "Data-testid attribute for button" + prop(testid, :string) + @doc "Id attribute for buttons" + prop(id, :string) + @doc "Title to be shown when no default slot is given" + prop(title, :string) + @doc "Additional CSS classes for the button tag" + prop(class, :css_class) + @doc "If the button is disabled" + prop(disabled, :boolean) + @doc "Value of the option, in most cases got from context" + prop(value, :any, from_context: :value) + @doc "If the option is selected, in most cases got from context" + prop(is_selected, :boolean, from_context: :is_selected) + @doc "Text size & paddings for the option. Is set by Dropdown.Options in most cases" + prop(size, :string, values!: ~w(sm md lg), from_context: :size) + @doc "Href for the option" + prop(href, :string) + @doc "Target attribute for the option" + prop(target, :string) + @doc "Rel attribute for the option" + prop(rel, :string) + + @doc "Inner content of the option" + slot(default) + + def render(assigns) do + ~F""" + + <#slot>{@title} + + """ + end +end diff --git a/lib/moon/design/search.ex b/lib/moon/design/search.ex index 7dc7c46b2..284ebc8de 100644 --- a/lib/moon/design/search.ex +++ b/lib/moon/design/search.ex @@ -8,6 +8,7 @@ defmodule Moon.Design.Search do import Moon.Helpers.Form, only: [input_classes_light: 1] + # TODO: needs to be fixed @doc "... format: [%{key: shown_label, value: option_value, disabled: boolean}], disabled is optional" prop(options, :list, required: true) @doc "Set disabled/non-disabled" @@ -33,7 +34,10 @@ defmodule Moon.Design.Search do prop(on_keyup, :event) @doc "Event that fires when smth is chosen from the dropdown menu" prop(on_change, :event) - + @doc "Target attribute for the option" + prop(target, :string) + @doc "Rel attribute for the option" + prop(rel, :string) @doc "Option for custom stylings - use it to show icons or anything else" slot(default) @doc "Trigger element for the dropdown, default is Dropdown.Select" @@ -67,10 +71,21 @@ defmodule Moon.Design.Search do <#slot {@default}> - - + + <#slot {@option, option: option}>{option[:key]} - + diff --git a/lib/moon_web/components/search_button.ex b/lib/moon_web/components/search_button.ex index 7c7a20f55..35344f791 100644 --- a/lib/moon_web/components/search_button.ex +++ b/lib/moon_web/components/search_button.ex @@ -24,9 +24,7 @@ defmodule MoonWeb.Components.SearchButton do prompt="Search..." > <:option :let={option: option}> - - {option[:key]} - + {option[:key]} """ diff --git a/lib/moon_web/examples/design/search_example/custom.ex b/lib/moon_web/examples/design/search_example/custom.ex index e8e0919f6..85a5cca02 100644 --- a/lib/moon_web/examples/design/search_example/custom.ex +++ b/lib/moon_web/examples/design/search_example/custom.ex @@ -25,10 +25,8 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do options={filter_options(@options, @filter)} > <:option :let={option: option}> - - - {option[:key]} - + + {option[:key]} """ diff --git a/lib/moon_web/examples/design/search_example/default.ex b/lib/moon_web/examples/design/search_example/default.ex index 5ee217a78..be96fdc16 100644 --- a/lib/moon_web/examples/design/search_example/default.ex +++ b/lib/moon_web/examples/design/search_example/default.ex @@ -1,7 +1,7 @@ defmodule MoonWeb.Examples.Design.SearchExample.Default do @moduledoc false - use Moon.StatefulComponent + use MoonWeb, :stateful_component use MoonWeb, :example alias Moon.Design.Search From 131c612b1413744aca6ebb5ade803a82525b5396 Mon Sep 17 00:00:00 2001 From: phgrey Date: Wed, 1 Nov 2023 09:17:23 +0100 Subject: [PATCH 2/5] some search refactoring --- lib/moon/design/search.ex | 15 +++++---------- .../examples/design/search_example/custom.ex | 8 +++++--- .../examples/design/search_example/default.ex | 6 +++++- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/lib/moon/design/search.ex b/lib/moon/design/search.ex index 284ebc8de..bbecce64e 100644 --- a/lib/moon/design/search.ex +++ b/lib/moon/design/search.ex @@ -76,16 +76,11 @@ defmodule Moon.Design.Search do {=@on_change} class="p-2 mt-0 rounded-tl-none rounded-tr-none" > - - <#slot {@option, option: option}>{option[:key]} - + <#slot {@option, option: option} :for={option <- @options}> + + {option[:key]} + + diff --git a/lib/moon_web/examples/design/search_example/custom.ex b/lib/moon_web/examples/design/search_example/custom.ex index 85a5cca02..89e01a7c3 100644 --- a/lib/moon_web/examples/design/search_example/custom.ex +++ b/lib/moon_web/examples/design/search_example/custom.ex @@ -22,11 +22,13 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do id="custom-search" {=@filter} on_keyup="change_filter" - options={filter_options(@options, @filter)} + options={@options |> filter_options(@filter)} > <:option :let={option: option}> - - {option[:key]} + + + {option[:key]} + """ diff --git a/lib/moon_web/examples/design/search_example/default.ex b/lib/moon_web/examples/design/search_example/default.ex index be96fdc16..a3a695294 100644 --- a/lib/moon_web/examples/design/search_example/default.ex +++ b/lib/moon_web/examples/design/search_example/default.ex @@ -21,11 +21,15 @@ defmodule MoonWeb.Examples.Design.SearchExample.Default do id="default-search" {=@filter} on_keyup="change_filter" - options={filter_options(@options, @filter)} + options={@options |> page_to_href() |> filter_options(@filter)} /> """ end + defp page_to_href(options) do + options |> Enum.map(&Keyword.put(&1, :page, live_path(MoonWeb.Endpoint, &1[:page]))) + end + def code() do """ alias Moon.Design.Search From e647eae17a667c604ffe3755ad439241f25b2fef Mon Sep 17 00:00:00 2001 From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com> Date: Wed, 1 Nov 2023 11:50:50 +0200 Subject: [PATCH 3/5] styling and fixes --- lib/moon/design/dropdown/link.ex | 2 +- lib/moon/design/search.ex | 6 ++---- lib/moon_web/components/search_button.ex | 12 +++++------ .../examples/design/search_example/custom.ex | 20 ++++++++++++++----- .../examples/design/search_example/default.ex | 7 +++++-- 5 files changed, 29 insertions(+), 18 deletions(-) diff --git a/lib/moon/design/dropdown/link.ex b/lib/moon/design/dropdown/link.ex index 8a244f723..239fcfc0f 100644 --- a/lib/moon/design/dropdown/link.ex +++ b/lib/moon/design/dropdown/link.ex @@ -1,5 +1,5 @@ defmodule Moon.Design.Dropdown.Link do - @moduledoc "Single oprion for the dropdown component. Renders as a button" + @moduledoc "Single option for the dropdown component. Renders as a link" use Moon.StatelessComponent, slot: "option" diff --git a/lib/moon/design/search.ex b/lib/moon/design/search.ex index bbecce64e..bd96b816f 100644 --- a/lib/moon/design/search.ex +++ b/lib/moon/design/search.ex @@ -8,8 +8,7 @@ defmodule Moon.Design.Search do import Moon.Helpers.Form, only: [input_classes_light: 1] - # TODO: needs to be fixed - @doc "... format: [%{key: shown_label, value: option_value, disabled: boolean}], disabled is optional" + @doc "... format: [page: Module.Name, key: \"Name\"]" prop(options, :list, required: true) @doc "Set disabled/non-disabled" prop(disabled, :boolean) @@ -29,7 +28,6 @@ defmodule Moon.Design.Search do prop(is_open, :boolean) @doc "Filtering value for the options, appears in input" prop(filter, :string) - @doc "On key up event for the input - use it for filter options" prop(on_keyup, :event) @doc "Event that fires when smth is chosen from the dropdown menu" @@ -77,7 +75,7 @@ defmodule Moon.Design.Search do class="p-2 mt-0 rounded-tl-none rounded-tr-none" > <#slot {@option, option: option} :for={option <- @options}> - + {option[:key]} diff --git a/lib/moon_web/components/search_button.ex b/lib/moon_web/components/search_button.ex index 35344f791..2d52be225 100644 --- a/lib/moon_web/components/search_button.ex +++ b/lib/moon_web/components/search_button.ex @@ -20,13 +20,13 @@ defmodule MoonWeb.Components.SearchButton do id="moon-search" {=@filter} on_keyup="change_filter" - options={filter_options(@options, @filter)} + options={@options |> page_to_href() |> filter_options(@filter)} prompt="Search..." - > - <:option :let={option: option}> - {option[:key]} - - + /> """ end + + defp page_to_href(options) do + options |> Enum.map(&Keyword.put(&1, :page, live_path(MoonWeb.Endpoint, &1[:page]))) + end end diff --git a/lib/moon_web/examples/design/search_example/custom.ex b/lib/moon_web/examples/design/search_example/custom.ex index 89e01a7c3..e4290a53a 100644 --- a/lib/moon_web/examples/design/search_example/custom.ex +++ b/lib/moon_web/examples/design/search_example/custom.ex @@ -7,6 +7,8 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do alias Moon.Design.Search alias Moon.Icon + alias Moon.Design.Dropdown + import Moon.Helpers.Form, only: [filter_options: 2] prop(options, :list, default: MoonWeb.Schema.Link.titles()) @@ -25,10 +27,13 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do options={@options |> filter_options(@filter)} > <:option :let={option: option}> - + {option[:key]} - + """ @@ -38,6 +43,8 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do """ alias Moon.Design.Search alias Moon.Icon + alias Moon.Design.Dropdown + import Moon.Helpers.Form, only: [filter_options: 2] prop(options, :list, default: MoonWeb.Schema.Link.titles()) @@ -53,13 +60,16 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do id="custom-search" {=@filter} on_keyup="change_filter" - options={filter_options(@options, @filter)} + options={@options |> filter_options(@filter)} > <:option :let={option: option}> - + {option[:key]} - + \""" diff --git a/lib/moon_web/examples/design/search_example/default.ex b/lib/moon_web/examples/design/search_example/default.ex index a3a695294..75632868c 100644 --- a/lib/moon_web/examples/design/search_example/default.ex +++ b/lib/moon_web/examples/design/search_example/default.ex @@ -40,7 +40,6 @@ defmodule MoonWeb.Examples.Design.SearchExample.Default do prop(filter, :string, default: "") def handle_event("change_filter", %{"value" => filter}, socket) do - dbg(filter) {:noreply, assign(socket, filter: filter)} end @@ -50,10 +49,14 @@ defmodule MoonWeb.Examples.Design.SearchExample.Default do id="default-search" {=@filter} on_keyup="change_filter" - options={filter_options(@options, @filter)} + options={@options |> page_to_href() |> filter_options(@filter)} /> \""" end + + defp page_to_href(options) do + options |> Enum.map(&Keyword.put(&1, :page, live_path(MoonWeb.Endpoint, &1[:page]))) + end """ end end From 1d89bbae4195e0b467300a01444a26842815f713 Mon Sep 17 00:00:00 2001 From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com> Date: Wed, 1 Nov 2023 13:06:24 +0200 Subject: [PATCH 4/5] replace rel and target with attrs --- lib/moon/design/dropdown/link.ex | 9 +++------ lib/moon/design/search.ex | 8 +++----- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/lib/moon/design/dropdown/link.ex b/lib/moon/design/dropdown/link.ex index 239fcfc0f..3e1a25ded 100644 --- a/lib/moon/design/dropdown/link.ex +++ b/lib/moon/design/dropdown/link.ex @@ -21,10 +21,8 @@ defmodule Moon.Design.Dropdown.Link do prop(size, :string, values!: ~w(sm md lg), from_context: :size) @doc "Href for the option" prop(href, :string) - @doc "Target attribute for the option" - prop(target, :string) - @doc "Rel attribute for the option" - prop(rel, :string) + @doc "Additional attributes for the link" + prop(attrs, :map, default: %{}) @doc "Inner content of the option" slot(default) @@ -50,8 +48,7 @@ defmodule Moon.Design.Dropdown.Link do ])} data-testid={@testid} {=@href} - {=@target} - {=@rel} + {=@attrs} > <#slot>{@title} diff --git a/lib/moon/design/search.ex b/lib/moon/design/search.ex index bd96b816f..3a7228217 100644 --- a/lib/moon/design/search.ex +++ b/lib/moon/design/search.ex @@ -32,10 +32,8 @@ defmodule Moon.Design.Search do prop(on_keyup, :event) @doc "Event that fires when smth is chosen from the dropdown menu" prop(on_change, :event) - @doc "Target attribute for the option" - prop(target, :string) - @doc "Rel attribute for the option" - prop(rel, :string) + @doc "Additional attributes for the option tag" + prop(attrs, :map, default: %{}) @doc "Option for custom stylings - use it to show icons or anything else" slot(default) @doc "Trigger element for the dropdown, default is Dropdown.Select" @@ -75,7 +73,7 @@ defmodule Moon.Design.Search do class="p-2 mt-0 rounded-tl-none rounded-tr-none" > <#slot {@option, option: option} :for={option <- @options}> - + {option[:key]} From e93d4a310a905e96b9dbb68f26647db111800191 Mon Sep 17 00:00:00 2001 From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com> Date: Wed, 1 Nov 2023 13:17:41 +0200 Subject: [PATCH 5/5] fix --- lib/moon/design/dropdown/link.ex | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/moon/design/dropdown/link.ex b/lib/moon/design/dropdown/link.ex index 3e1a25ded..128859b22 100644 --- a/lib/moon/design/dropdown/link.ex +++ b/lib/moon/design/dropdown/link.ex @@ -21,7 +21,7 @@ defmodule Moon.Design.Dropdown.Link do prop(size, :string, values!: ~w(sm md lg), from_context: :size) @doc "Href for the option" prop(href, :string) - @doc "Additional attributes for the link" + @doc "Additional attributes for the a tag" prop(attrs, :map, default: %{}) @doc "Inner content of the option" @@ -48,7 +48,7 @@ defmodule Moon.Design.Dropdown.Link do ])} data-testid={@testid} {=@href} - {=@attrs} + {...@attrs} > <#slot>{@title}