diff --git a/lib/live_select.ex b/lib/live_select.ex index 25be96e..51f0b0d 100644 --- a/lib/live_select.ex +++ b/lib/live_select.ex @@ -437,7 +437,7 @@ defmodule LiveSelect do doc: "Event to emit when the text input receives focus. The component id will be sent in the event's params" - @styling_options ~w(active_option_class available_option_class clear_button_class container_class container_extra_class dropdown_class dropdown_extra_class option_class option_extra_class text_input_class text_input_extra_class text_input_selected_class selected_option_class tag_class tag_extra_class tags_container_class tags_container_extra_class)a + @styling_options ~w(active_option_class available_option_class clear_button_class clear_button_extra_class clear_tag_button_class clear_tag_button_extra_class container_class container_extra_class dropdown_class dropdown_extra_class option_class option_extra_class text_input_class text_input_extra_class text_input_selected_class selected_option_class tag_class tag_extra_class tags_container_class tags_container_extra_class)a for attr_name <- @styling_options do Phoenix.Component.Declarative.__attr__!( diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex index 8fc2564..86a715a 100644 --- a/lib/live_select/component.ex +++ b/lib/live_select/component.ex @@ -16,6 +16,8 @@ defmodule LiveSelect.Component do available_option_class: nil, clear_button_class: nil, clear_button_extra_class: nil, + clear_tag_button_class: nil, + clear_tag_button_extra_class: nil, user_defined_options: false, container_class: nil, container_extra_class: nil, diff --git a/lib/live_select/component.html.heex b/lib/live_select/component.html.heex index 8877660..a4ecd3a 100644 --- a/lib/live_select/component.html.heex +++ b/lib/live_select/component.html.heex @@ -24,7 +24,12 @@ type="button" data-idx={idx} class={ - class(@style, :clear_tag_button, @clear_button_class, @clear_button_extra_class) + class( + @style, + :clear_tag_button, + @clear_tag_button_class, + @clear_tag_button_extra_class + ) } > <%= if @clear_button == [] do %> diff --git a/lib/mix/tasks/dump_style_table.ex b/lib/mix/tasks/dump_style_table.ex index f4482c5..e03ad2c 100644 --- a/lib/mix/tasks/dump_style_table.ex +++ b/lib/mix/tasks/dump_style_table.ex @@ -35,15 +35,11 @@ defmodule Mix.Tasks.DumpStyleTable do |> IO.write() end - defp class_override_option(:clear_tag_button), do: class_override_option(:clear_button) - defp class_override_option(el) do option_name = to_string(el) <> "_class" if option_name in class_options(), do: option_name, else: "" end - defp class_extend_option(:clear_tag_button), do: class_extend_option(:clear_button) - defp class_extend_option(el) do option_name = to_string(el) <> "_extra_class" if option_name in class_options(), do: option_name, else: "" diff --git a/styling.md b/styling.md index 9a8d2ef..c20dbb1 100644 --- a/styling.md +++ b/styling.md @@ -62,7 +62,7 @@ The following table shows the default styles for each element and the options yo | *active_option* | active | bg-gray-600 text-white | active_option_class | | | *available_option* | cursor-pointer | cursor-pointer hover:bg-gray-400 rounded | available_option_class | | | *clear_button* | cursor-pointer hidden | cursor-pointer hidden | clear_button_class | clear_button_extra_class | -| *clear_tag_button* | cursor-pointer | cursor-pointer | clear_button_class | clear_button_extra_class | +| *clear_tag_button* | cursor-pointer | cursor-pointer | clear_tag_button_class | clear_tag_button_extra_class | | *container* | dropdown dropdown-open | h-full relative text-black | container_class | container_extra_class | | *dropdown* | bg-base-200 dropdown-content menu menu-compact p-1 rounded-box shadow w-full z-[1] | absolute bg-gray-100 inset-x-0 rounded-md shadow top-full z-50 | dropdown_class | dropdown_extra_class | | *option* | | px-4 py-1 rounded | option_class | option_extra_class | diff --git a/test/live_select/component_test.exs b/test/live_select/component_test.exs index 6fe6335..b6a8090 100644 --- a/test/live_select/component_test.exs +++ b/test/live_select/component_test.exs @@ -492,9 +492,7 @@ defmodule LiveSelect.ComponentTest do Keyword.values( Keyword.drop(override_class_option(), [ :available_option, - :selected_option, - :clear_button, - :clear_tag_button + :selected_option ]) ), Keyword.values(extend_class_option()) @@ -512,7 +510,8 @@ defmodule LiveSelect.ComponentTest do field: form[:input], options: ["A", "B", "C"], value: ["A", "B"], - mode: :tags, + allow_clear: @override_class == :clear_button_class, + mode: if(@override_class == :clear_button_class, do: :single, else: :tags), hide_dropdown: false ] |> Keyword.put(@override_class, "foo") diff --git a/test/support/helpers.ex b/test/support/helpers.ex index 33f2ff3..5e92385 100644 --- a/test/support/helpers.ex +++ b/test/support/helpers.ex @@ -42,7 +42,7 @@ defmodule LiveSelect.TestHelpers do @override_class_option [ available_option: :available_option_class, clear_button: :clear_button_class, - clear_tag_button: :clear_button_class, + clear_tag_button: :clear_tag_button_class, container: :container_class, dropdown: :dropdown_class, option: :option_class, @@ -54,6 +54,8 @@ defmodule LiveSelect.TestHelpers do def override_class_option, do: @override_class_option @extend_class_option [ + clear_button: :clear_button_extra_class, + clear_tag_button: :clear_tag_button_extra_class, container: :container_extra_class, dropdown: :dropdown_extra_class, option: :option_extra_class,