Chooser empty content

source/Ui/Chooser.elm

@@ -1,8 +1,9 @@
 module Ui.Chooser exposing
   ( Model, Item, Msg, init, onChange, update, view, render, subscriptions
   , close, toggleItem, getFirstSelected, updateData, selectFirst, setValue
-  , placeholder, closeOnSelect, deselectable, searchable, multiple, items
-  , renderWhenClosed )
+  , placeholder, emptyContent, closeOnSelect, deselectable, searchable
+  , multiple, items, renderWhenClosed
+  )
 
 {-| This is a component for selecting a single / multiple items
 form a list of choices, with lots of options.
@@ -14,7 +15,7 @@ form a list of choices, with lots of options.
 @docs onChange
 
 # DSL
-@docs placeholder, closeOnSelect, deselectable, searchable, multiple, items
+@docs placeholder, emptyContent, closeOnSelect, deselectable, searchable, multiple, items
 @docs renderWhenClosed
 
 # View
@@ -91,6 +92,7 @@ type alias Model =
   , renderWhenClosed : Bool
   , selected : Set String
   , placeholder : String
+  , emptyContent : Html.Html Msg
   , closeOnSelect : Bool
   , deselectable : Bool
   , intended : String
@@ -135,11 +137,12 @@ init _ =
   , closeOnSelect = False
   , deselectable = False
   , selected = Set.empty
+  , placeholder = ""
+  , emptyContent = text "No items to display!"
   , searchable = False
   , multiple = False
   , disabled = False
   , readonly = False
-  , placeholder = ""
   , uid = Uid.uid ()
   , intended = ""
   , value = ""
@@ -168,6 +171,12 @@ placeholder : String -> Model -> Model
 placeholder value model =
   { model | placeholder = value }
 
+{-| Sets the text for when there are no items to display.
+-}
+emptyContent : Html.Html Msg -> Model -> Model
+emptyContent value model =
+  { model | emptyContent = value }
+
 
 {-| Sets whether or not to close the dropdown when selecting an item.
 -}
@@ -306,10 +315,14 @@ view model =
 render : Model -> Html.Html Msg
 render model =
   let
-    children =
+    children = 
       if model.dropdown.open || (not model.dropdown.open && model.renderWhenClosed) then
-        (List.map (Html.Lazy.lazy2 renderItem model) (items_ model))
-      else
+        if List.length (items_ model) > 0 then
+           (List.map (Html.Lazy.lazy2 renderItem model) (items_ model))
+        else
+          [ node "ui-chooser-empty-content" [] [ model.emptyContent ]
+          ]
+      else  
         []
 
     val =

source/Ui/Styles/Chooser.elm

@@ -14,14 +14,14 @@ import Ui.Styles exposing (Style)
 
 import Regex
 
-{-| Styles for a checkbox using the default theme.
+{-| Styles for a chooser using the default theme.
 -}
 defaultStyle : Style
 defaultStyle =
-  Ui.Styles.attributes (style Theme.default)
+  Ui.Styles.attributes <| style Theme.default
 
 
-{-| Returns the style node for a checkbox using the given theme.
+{-| Returns the style node for a chooser using the given theme.
 -}
 style : Theme -> Node
 style theme =
@@ -110,14 +110,13 @@ style theme =
       [ maxHeight (px 250)
       , padding (px 5)
       , display flex
+      ]
 
-      , selector "ui-scrolled-panel-wrapper:empty:before"
-        [ contentString "No items to display!"
-        , fontStyle italic
-        , padding (px 12)
-        , display block
-        , opacity 0.5
-        ]
+    , selector "ui-chooser-empty-content"
+      [ fontStyle italic
+      , padding (px 12)
+      , display block
+      , opacity 0.5
       ]
 
     , selector "ui-chooser-item"

spec/Ui/ChooserSpec.elm

@@ -7,13 +7,6 @@ import Ui.Chooser
 
 import Steps exposing (..)
 
-items : List Ui.Chooser.Item
-items =
-  [ { id = "0", label = "Superman", value = "superman" }
-  , { id = "1", label = "Batman", value = "batman" }
-  , { id = "2", label = "Hello", value = "hello" }
-  ]
-
 view : Ui.Chooser.Model -> Html.Html Ui.Chooser.Msg
 view model =
   Ui.Container.row []
@@ -26,18 +19,33 @@ view model =
 specs : Node
 specs =
   describe "Ui.Chooser"
-    [
+    [ it "Placeholder should be 'Select something...'"
+        [ assert.attributeEquals 
+            { text = "Select something..."
+            , selector = "input"
+            , attribute = "placeholder"
+            }
+        ]
+    , it "emptyContent should be 'No items.'"
+        [ assert.containsText 
+            { text = "No items."
+            , selector = "ui-chooser-empty-content"
+            }
+        ]
     ]
 
+
+init : Ui.Chooser.Model
+init = Ui.Chooser.init ()
+      |> Ui.Chooser.placeholder "Select something..."
+      |> Ui.Chooser.emptyContent (Html.text "No items.")
+      |> Ui.Chooser.deselectable True
+      |> Ui.Chooser.multiple True
+
 main =
   runWithProgram
     { subscriptions = Ui.Chooser.subscriptions
     , update = Ui.Chooser.update
-    , init = \() ->
-      Ui.Chooser.init ()
-      |> Ui.Chooser.placeholder "Select something..."
-      |> Ui.Chooser.items items
-      |> Ui.Chooser.deselectable True
-      |> Ui.Chooser.multiple True
+    , init = \() -> init
     , view = view
     } specs