add unavailable_option_class styling option

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 1.5.1 (2024-12-28)
+
+* Add unavailable_option_class to style options that cannot be selected because of max_selectable > 0
 * Fix can't remove items in quick_tags mode via dropdown with max_selectable
 
 ## 1.5.0 (2024-12-27)

lib/live_select/component.ex

@@ -14,6 +14,7 @@ defmodule LiveSelect.Component do
     active_option_class: nil,
     allow_clear: false,
     available_option_class: nil,
+    unavailable_option_class: nil,
     clear_button_class: nil,
     clear_button_extra_class: nil,
     clear_tag_button_class: nil,
@@ -48,12 +49,13 @@ defmodule LiveSelect.Component do
     tailwind: [
       active_option: ~W(text-white bg-gray-600),
       available_option: ~W(cursor-pointer hover:bg-gray-400 rounded),
+      unavailable_option: ~W(text-gray-400),
       clear_button: ~W(hidden cursor-pointer),
       clear_tag_button: ~W(cursor-pointer),
       container: ~W(h-full text-black relative),
       dropdown: ~W(absolute rounded-md shadow z-50 bg-gray-100 inset-x-0 top-full),
       option: ~W(rounded px-4 py-1),
-      selected_option: ~W(text-gray-400),
+      selected_option: ~W(cursor-pointer font-bold hover:bg-gray-400 rounded),
       text_input:
         ~W(rounded-md w-full disabled:bg-gray-100 disabled:placeholder:text-gray-400 disabled:text-gray-400 pr-6),
       text_input_selected: ~W(border-gray-600 text-gray-600),
@@ -63,13 +65,14 @@ defmodule LiveSelect.Component do
     daisyui: [
       active_option: ~W(active),
       available_option: ~W(cursor-pointer),
+      unavailable_option: ~W(disabled),
       clear_button: ~W(hidden cursor-pointer),
       clear_tag_button: ~W(cursor-pointer),
       container: ~W(dropdown dropdown-open),
       dropdown:
         ~W(dropdown-content z-[1] menu menu-compact shadow rounded-box bg-base-200 p-1 w-full),
       option: nil,
-      selected_option: ~W(disabled),
+      selected_option: ~W(cursor-pointer font-bold),
       text_input: ~W(input input-bordered w-full pr-6),
       text_input_selected: ~W(input-primary),
       tags_container: ~W(flex flex-wrap gap-1 p-1),

lib/live_select/component.html.heex

@@ -107,9 +107,16 @@
     <ul class={class(@style, :dropdown, @dropdown_class, @dropdown_extra_class)}>
       <%= for {option, idx} <- Enum.with_index(@options) do %>
         <li class={
-          if already_selected?(option, @selection),
-            do: class(@style, :selected_option, @selected_option_class),
-            else: class(@style, :available_option, @available_option_class)
+          cond do
+            already_selected?(option, @selection) ->
+              class(@style, :selected_option, @selected_option_class)
+
+            @max_selectable > 0 && length(@selection) >= @max_selectable ->
+              class(@style, :unavailable_option, @unavailable_option_class)
+
+            true ->
+              class(@style, :available_option, @available_option_class)
+          end
         }>
           <div
             class={

lib/support/live_select_web/live/showcase_live.ex

@@ -44,6 +44,7 @@ defmodule LiveSelectWeb.ShowcaseLive do
     @class_options [
       :active_option_class,
       :available_option_class,
+      :unavailable_option_class,
       :clear_button_class,
       :clear_button_extra_class,
       :container_class,
@@ -328,17 +329,6 @@ defmodule LiveSelectWeb.ShowcaseLive do
         socket
       end
 
-    params =
-      if params["mode"] == "quick_tags" do
-        Map.put_new(
-          params,
-          "selected_option_class",
-          "cursor-pointer font-bold hover:bg-gray-400 rounded"
-        )
-      else
-        params
-      end
-
     changeset =
       Settings.changeset(params)
       |> then(

styling.md

@@ -38,13 +38,14 @@ Here's a visual representation of the elements:
 
 ![styled elements](https://raw.githubusercontent.com/maxmarcon/live_select/main/priv/static/images/styled_elements.png)
 
-In `tags` mode there are 4 additional stylable elements:
+In `tags` and `quick_tags` mode there are 6 additional stylable elements:
 
-7. The **tag** showing the selected options
-8. The **tags_container** that contains the tags
-9. The **selected_option**. This is an option in the dropdown that has already been selected. It's still visible, but can't be selected again
-10. The **available_option**. This is an option in the dropdown that has not been selected and is available for selection 
-11. The **clear buttons** to remove the tags
+7. **tag** showing the selected options
+8. **tags_container** that contains the tags
+9. **selected_option**. This is an option in the dropdown that has already been selected. It's still visible, but can't be selected again
+11. **available_option**. This is an option in the dropdown that has not been selected and is available for selection 
+10. **unavailable_option**. This is an option in the dropdown that has not been selected but is not available for selection. This happens when there is a specified maximum number of selectable elements and that number has been reached 
+12. **clear buttons** to remove the tags
 
 ![styled elements_tags](https://raw.githubusercontent.com/maxmarcon/live_select/main/priv/static/images/styled_elements_tags.png)
 
@@ -66,11 +67,12 @@ The following table shows the default styles for each element and the options yo
 | *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 |
-| *selected_option* | disabled | text-gray-400 | selected_option_class |  |
+| *selected_option* | cursor-pointer font-bold | cursor-pointer font-bold hover:bg-gray-400 rounded | selected_option_class |  |
 | *tag* | badge badge-primary p-1.5 text-sm | bg-blue-400 flex p-1 rounded-lg text-sm | tag_class | tag_extra_class |
 | *tags_container* | flex flex-wrap gap-1 p-1 | flex flex-wrap gap-1 p-1 | tags_container_class | tags_container_extra_class |
 | *text_input* | input input-bordered pr-6 w-full | disabled:bg-gray-100 disabled:placeholder:text-gray-400 disabled:text-gray-400 pr-6 rounded-md w-full | text_input_class | text_input_extra_class |
 | *text_input_selected* | input-primary | border-gray-600 text-gray-600 | text_input_selected_class |  |
+| *unavailable_option* | disabled | text-gray-400 | unavailable_option_class |  |
 
 For example, if you want to remove rounded borders from the options, have the active option use white text on a red background,
 and use green as a background color for tags instead of blue, render [live_select/1](`LiveSelect.live_select/1`)