added range component and minor refactors on function names in Utils

module

README.md

@@ -126,7 +126,7 @@ List of available components.
 - [Progress](https://daisyui.com/components/progress) ❌
 - [Radial progress](https://daisyui.com/components/radial-progress) ❌
 - [Radio](https://daisyui.com/components/radio) ❌
-- [Range slider](https://daisyui.com/components/range) ❌
+- [Range slider](https://daisyui.com/components/range) ✅
 - [Rating](https://daisyui.com/components/rating) ❌
 - [Select](https://daisyui.com/components/select) ✅
 - [Stack](https://daisyui.com/components/stack) ❌

daisy_ui_components_site/storybook/components/range.story.exs

@@ -0,0 +1,52 @@
+defmodule Storybook.Components.Range do
+  use PhoenixStorybook.Story, :component
+
+  alias DaisyUIComponents.Utils
+
+  def function, do: &DaisyUIComponents.Range.range/1
+
+  def imports, do: []
+
+  def variations do
+    [
+      %Variation{
+        id: :range,
+        attributes: %{
+          min: 0,
+          max: 100,
+          value: 40
+        }
+      },
+      %VariationGroup{
+        id: :colors,
+        variations:
+          for {color, index} <- Enum.with_index(Utils.colors()) do
+            %Variation{
+              id: String.to_atom(color),
+              attributes: %{
+                color: color,
+                min: 0,
+                max: 100,
+                value: 30 + 10 * index
+              }
+            }
+          end
+      },
+      %VariationGroup{
+        id: :sizes,
+        variations:
+          for {size, index} <- Enum.with_index(Utils.sizes()) do
+            %Variation{
+              id: String.to_atom(size),
+              attributes: %{
+                size: size,
+                min: 0,
+                max: 100,
+                value: 40 + 10 * index
+              }
+            }
+          end
+      }
+    ]
+  end
+end

lib/daisy_ui_components.ex

@@ -25,6 +25,7 @@ defmodule DaisyUIComponents do
       import DaisyUIComponents.Modal
       import DaisyUIComponents.Navbar
       import DaisyUIComponents.Pagination
+      import DaisyUIComponents.Range
       import DaisyUIComponents.Select
       import DaisyUIComponents.Stat
       import DaisyUIComponents.Table

lib/daisy_ui_components/badge.ex

@@ -30,8 +30,8 @@ defmodule DaisyUIComponents.Badge do
       assign(assigns, :class, [
         "badge",
         badge_color(assigns[:color]),
-        add_class_from_bool(assigns[:ghost], "badge-ghost"),
-        add_class_from_bool(assigns[:outline], "badge-outline"),
+        maybe_add_class(assigns[:ghost], "badge-ghost"),
+        maybe_add_class(assigns[:outline], "badge-outline"),
         badge_size(assigns[:size]),
         assigns.class
       ])

lib/daisy_ui_components/button.ex

@@ -39,16 +39,16 @@ defmodule DaisyUIComponents.Button do
       assign(assigns, :class, [
         "btn",
         btn_color(assigns[:color]),
-        add_class_from_bool(assigns[:ghost], "btn-ghost"),
-        add_class_from_bool(assigns[:link], "btn-link"),
-        add_class_from_bool(assigns[:outline], "btn-outline"),
-        add_class_from_bool(assigns[:active], "btn-active"),
-        add_class_from_bool(assigns[:disabled], "btn-disabled"),
-        add_class_from_bool(assigns[:glass], "btn-glass"),
-        add_class_from_bool(assigns[:loading], "loading"),
-        add_class_from_bool(assigns[:wide], "btn-wide"),
-        add_class_from_bool(assigns[:block], "btn-block"),
-        add_class_from_bool(assigns[:no_animation], "no-animation"),
+        maybe_add_class(assigns[:ghost], "btn-ghost"),
+        maybe_add_class(assigns[:link], "btn-link"),
+        maybe_add_class(assigns[:outline], "btn-outline"),
+        maybe_add_class(assigns[:active], "btn-active"),
+        maybe_add_class(assigns[:disabled], "btn-disabled"),
+        maybe_add_class(assigns[:glass], "btn-glass"),
+        maybe_add_class(assigns[:loading], "loading"),
+        maybe_add_class(assigns[:wide], "btn-wide"),
+        maybe_add_class(assigns[:block], "btn-block"),
+        maybe_add_class(assigns[:no_animation], "no-animation"),
         btn_size(assigns[:size]),
         btn_shape(assigns[:shape]),
         assigns.class

lib/daisy_ui_components/card.ex

@@ -19,8 +19,8 @@ defmodule DaisyUIComponents.Card do
     assigns =
       join_classes_with_rest(assigns, [
         "card",
-        add_class_from_bool(assigns[:bordered], "card-bordered"),
-        add_class_from_bool(assigns[:side], "card-side"),
+        maybe_add_class(assigns[:bordered], "card-bordered"),
+        maybe_add_class(assigns[:side], "card-side"),
         add_class_from_padding(assigns[:padding])
       ])
 

lib/daisy_ui_components/dropdown.ex

@@ -37,13 +37,13 @@ defmodule DaisyUIComponents.Dropdown do
     assigns =
       assign(assigns, :class, [
         "dropdown",
-        add_class_from_bool(assigns.top, "dropdown-top"),
-        add_class_from_bool(assigns.bottom, "dropdown-bottom"),
-        add_class_from_bool(assigns.end, "dropdown-end"),
-        add_class_from_bool(assigns.left, "dropdown-left"),
-        add_class_from_bool(assigns.right, "dropdown-right"),
-        add_class_from_bool(assigns.hover, "dropdown-hover"),
-        add_class_from_bool(assigns.open, "dropdown-open"),
+        maybe_add_class(assigns.top, "dropdown-top"),
+        maybe_add_class(assigns.bottom, "dropdown-bottom"),
+        maybe_add_class(assigns.end, "dropdown-end"),
+        maybe_add_class(assigns.left, "dropdown-left"),
+        maybe_add_class(assigns.right, "dropdown-right"),
+        maybe_add_class(assigns.hover, "dropdown-hover"),
+        maybe_add_class(assigns.open, "dropdown-open"),
         assigns.class
       ])
 

lib/daisy_ui_components/input.ex

@@ -6,6 +6,7 @@ defmodule DaisyUIComponents.Input do
   use DaisyUIComponents.Component
 
   import DaisyUIComponents.Checkbox
+  import DaisyUIComponents.Range
   import DaisyUIComponents.Select
   import DaisyUIComponents.Textarea
   import DaisyUIComponents.TextInput
@@ -54,6 +55,12 @@ defmodule DaisyUIComponents.Input do
     """
   end
 
+  def input(%{type: "range"} = assigns) do
+    ~H"""
+    <.range id={@id} {@rest} />
+    """
+  end
+
   # All other inputs text, datetime-local, url, password, etc. are handled here...
   def input(assigns) do
     ~H"""

lib/daisy_ui_components/range.ex

@@ -0,0 +1,54 @@
+defmodule DaisyUIComponents.Range do
+  @moduledoc """
+  Select component
+
+  https://daisyui.com/components/range
+
+
+  """
+
+  use DaisyUIComponents.Component
+
+  attr :class, :any, default: nil
+  attr :color, :string, values: colors()
+  attr :size, :string, values: sizes()
+  attr :min, :integer, default: nil
+  attr :max, :integer, default: nil
+  attr :step, :integer, default: nil
+  attr :rest, :global, include: ~w(name)
+
+  def range(assigns) do
+    assigns =
+      assigns
+      |> assign(:color_class, range_color(assigns[:color]))
+      |> assign(:size_class, range_size(assigns[:size]))
+
+    ~H"""
+    <input
+      type="range"
+      class={classes(["range", @color_class, @size_class, @class])}
+      min={@min}
+      max={@max}
+      step={@step}
+      {@rest}
+    />
+    """
+  end
+
+  # Color
+  defp range_color("primary"), do: "range-primary"
+  defp range_color("secondary"), do: "range-secondary"
+  defp range_color("accent"), do: "range-accent"
+  defp range_color("info"), do: "range-info"
+  defp range_color("success"), do: "range-success"
+  defp range_color("warning"), do: "range-warning"
+  defp range_color("error"), do: "range-error"
+  defp range_color(_color), do: nil
+
+  # Size
+  defp range_size("xs"), do: "range-xs"
+  defp range_size("sm"), do: "range-sm"
+  defp range_size("md"), do: "range-md"
+  defp range_size("lg"), do: "range-lg"
+  defp range_size(_size), do: nil
+end

lib/daisy_ui_components/select.ex

@@ -22,8 +22,8 @@ defmodule DaisyUIComponents.Select do
       assigns
       |> join_classes_with_rest([
         "select",
-        add_class_from_bool(assigns[:bordered], "select-bordered"),
-        add_class_from_bool(assigns[:ghost], "select-ghost"),
+        maybe_add_class(assigns[:bordered], "select-bordered"),
+        maybe_add_class(assigns[:ghost], "select-ghost"),
         select_color(assigns[:color]),
         select_size(assigns[:size])
       ])

lib/daisy_ui_components/table.ex

@@ -60,7 +60,7 @@ defmodule DaisyUIComponents.Table do
     assigns =
       join_classes_with_rest(assigns, [
         "table",
-        add_class_from_bool(assigns[:zebra], "table-zebra"),
+        maybe_add_class(assigns[:zebra], "table-zebra"),
         table_size(assigns[:size])
       ])
 
@@ -105,7 +105,7 @@ defmodule DaisyUIComponents.Table do
     assigns =
       join_classes_with_rest(assigns, [
         "table",
-        add_class_from_bool(assigns[:zebra], "table-zebra"),
+        maybe_add_class(assigns[:zebra], "table-zebra"),
         table_size(assigns[:size])
       ])
 
@@ -126,8 +126,8 @@ defmodule DaisyUIComponents.Table do
   def tr(assigns) do
     assigns =
       join_classes_with_rest(assigns, [
-        add_class_from_bool(assigns[:active], "active"),
-        add_class_from_bool(assigns[:hover], "hover")
+        maybe_add_class(assigns[:active], "active"),
+        maybe_add_class(assigns[:hover], "hover")
       ])
 
     ~H"""

lib/daisy_ui_components/text_input.ex

@@ -22,8 +22,8 @@ defmodule DaisyUIComponents.TextInput do
       |> join_classes_with_rest([
         "input",
         input_color(assigns[:color]),
-        add_class_from_bool(assigns[:bordered], "input-bordered"),
-        add_class_from_bool(assigns[:ghost], "input-ghost"),
+        maybe_add_class(assigns[:bordered], "input-bordered"),
+        maybe_add_class(assigns[:ghost], "input-ghost"),
         input_size(assigns[:size])
       ])
 

lib/daisy_ui_components/textarea.ex

@@ -22,8 +22,8 @@ defmodule DaisyUIComponents.Textarea do
       assigns
       |> join_classes_with_rest([
         "textarea",
-        add_class_from_bool(assigns[:bordered], "textarea-bordered"),
-        add_class_from_bool(assigns[:ghost], "textarea-ghost"),
+        maybe_add_class(assigns[:bordered], "textarea-bordered"),
+        maybe_add_class(assigns[:ghost], "textarea-ghost"),
         textarea_color(assigns[:color]),
         textarea_size(assigns[:size])
       ])

lib/daisy_ui_components/tooltip.ex

@@ -21,7 +21,7 @@ defmodule DaisyUIComponents.Tooltip do
       assigns
       |> join_classes_with_rest([
         "tooltip",
-        add_class_from_bool(assigns[:open], "tooltip-open"),
+        maybe_add_class(assigns[:open], "tooltip-open"),
         tooltip_color(assigns[:color]),
         tooltip_direction(assigns[:direction])
       ])

lib/daisy_ui_components/utils.ex

@@ -11,6 +11,20 @@ defmodule DaisyUIComponents.Utils do
   def directions, do: @directions
   def sizes, do: @sizes
 
+  @spec classes(list() | nil | binary() | any()) :: binary()
+  def classes(classes) when is_list(classes) do
+    Enum.reduce(classes, [], fn class, acc ->
+      [classes(class) | acc]
+    end)
+    |> Enum.reverse()
+    |> Enum.reject(&(!&1))
+    |> Enum.join(" ")
+  end
+
+  def classes(nil), do: nil
+  def classes(class) when is_binary(class), do: String.trim(class)
+  def classes(class), do: to_string(class)
+
   def move_attr_to_rest(assigns, props) when is_list(props) do
     Enum.reduce(props, assigns, fn prop, acc ->
       move_attr_to_rest(acc, prop)
@@ -68,8 +82,8 @@ defmodule DaisyUIComponents.Utils do
     !(value in [nil, "", []])
   end
 
-  def add_class_from_bool(true, class), do: class
-  def add_class_from_bool(_false, _class), do: nil
+  def maybe_add_class(true, class), do: class
+  def maybe_add_class(_false, _class), do: nil
 
   def translate({msg, _opts} = params) do
     if translate_function = Application.get_env(:daisy_ui_components, :translate_function) do

test/daisy_ui_components/range_test.exs

@@ -0,0 +1,53 @@
+defmodule DaisyUIComponents.RangeTest do
+  use ExUnit.Case
+
+  import Phoenix.Component
+  import Phoenix.LiveViewTest
+  import DaisyUIComponents.Range
+
+  alias DaisyUIComponents.Utils
+
+  test "range" do
+    assigns = %{}
+
+    range =
+      rendered_to_string(~H"""
+      <.range />
+      """)
+
+    assert range =~ ~s(<input)
+    assert range =~ ~s(class="range")
+    assert range =~ ~s(type="range")
+
+    range =
+      rendered_to_string(~H"""
+      <.range min={0} max={100} value={10} step={25} />
+      """)
+
+    assert range =~ ~s(<input)
+    assert range =~ ~s(min="0")
+    assert range =~ ~s(max="100")
+    assert range =~ ~s(step="25")
+    assert range =~ ~s(value="10")
+  end
+
+  test "range colors" do
+    for color <- Utils.colors() do
+      assigns = %{color: color}
+
+      assert rendered_to_string(~H"""
+             <.range color={@color} />
+             """) =~ ~s(<input type="range" class="range range-#{color}">)
+    end
+  end
+
+  test "range sizes" do
+    for size <- Utils.sizes() do
+      assigns = %{size: size}
+
+      assert rendered_to_string(~H"""
+             <.range size={@size} />
+             """) =~ ~s(<input type="range" class="range range-#{size}">)
+    end
+  end
+end

test/daisy_ui_components/utils_test.exs

@@ -3,6 +3,22 @@ defmodule DaisyUIComponents.UtilsTest do
 
   import DaisyUIComponents.Utils
 
+  describe "classes/1" do
+    test "trim classes" do
+      assert "1 2" == classes(["1  ", " 2  "])
+    end
+
+    test "nested class lists classes" do
+      assert "primary extra-classes another-class 1" ==
+               classes(["primary", ["extra-classes", "another-class "], 1])
+    end
+
+    test "nil classes" do
+      assert "primary secondary" ==
+               classes([nil, "primary", ["secondary", nil]])
+    end
+  end
+
   test "render?" do
     assert render?(:field)
     refute render?(nil)