use different styling options for clear_button and clear_tag_button

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__!(

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,

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 %>

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: ""

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 |

test/live_select/component_test.exs

@@ -492,9 +492,7 @@
           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 @@
               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")
@@ -565,7 +564,7 @@
             )
 
           assert Floki.attribute(component, selectors()[@element], "class") == [
                    get_in(expected_class(), [@style || default_style(), @element]) || ""
                  ]
         end
 
@@ -628,7 +627,7 @@
               )
 
             assert Floki.attribute(component, selectors()[@element], "class") == [
                      ((get_in(expected_class(), [@style || default_style(), @element]) || "") <>
                         " foo")
                      |> String.trim()
                    ]
@@ -650,7 +649,7 @@
               )
 
             assert Floki.attribute(component, selectors()[@element], "class") == [
                      ((get_in(expected_class(), [@style || default_style(), @element]) || "") <>
                         " foo goo")
                      |> String.trim()
                    ]
@@ -660,7 +659,7 @@
                %{form: form} do
             option = extend_class_option()[@element]
 
             base_classes = get_in(expected_class(), [@style || default_style(), @element])
 
             if base_classes do
               class_to_remove = String.split(base_classes) |> List.first()
@@ -702,9 +701,9 @@
           )
 
         expected_class =
           (get_in(expected_class(), [@style || default_style(), :text_input]) || "") <>
             " " <>
             (get_in(expected_class(), [@style || default_style(), :text_input_selected]) || "")
 
         assert Floki.attribute(component, selectors()[:text_input], "class") == [
                  String.trim(expected_class)
@@ -725,7 +724,7 @@
           )
 
         expected_class =
           (get_in(expected_class(), [@style || default_style(), :text_input]) || "") <>
             " foo"
 
         assert Floki.attribute(component, selectors()[:text_input], "class") == [
@@ -749,7 +748,7 @@
         assert_selected_option_class(
           component,
           2,
           get_in(expected_class(), [@style || default_style(), :selected_option]) || ""
         )
       end
 
@@ -790,7 +789,7 @@
         assert_available_option_class(
           component,
           2,
           get_in(expected_class(), [@style || default_style(), :available_option]) || ""
         )
       end
 

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,