fixes classes; improve selects

lib/moon/autolayouts/pull_aside.ex

@@ -5,6 +5,7 @@ defmodule Moon.Autolayouts.PullAside do
 
   prop class, :css_class
   prop left_grow, :boolean, default: false
+  prop right_grow, :boolean, default: false
   slot left
   slot right
 
@@ -16,7 +17,7 @@ defmodule Moon.Autolayouts.PullAside do
           <#slot name="left" />
         {/if}
       </div>
-      <div>
+      <div class={"flex items-center", grow: @right_grow}>
         {#if slot_assigned?(:right)}
           <#slot name="right" />
         {/if}

lib/moon/components/list_items/single_line_item.ex

@@ -6,6 +6,8 @@ defmodule Moon.Components.ListItems.SingleLineItem do
   prop size, :string, values: ~w(medium large), default: "medium"
   prop background_color, :string, values: Moon.colors(), default: "gohan-100"
   prop current, :boolean, default: false
+  prop left_grow, :boolean, default: false
+  prop right_grow, :boolean, default: false
 
   slot default
   slot left_icon
@@ -19,13 +21,13 @@ defmodule Moon.Components.ListItems.SingleLineItem do
       "py-3": @size == "large",
       "bg-goku-120": @current
     }>
-      <div :if={slot_assigned?(:left_icon)}>
+      <div class={"flex items-center", grow: @left_grow} :if={slot_assigned?(:left_icon)}>
         <#slot name="left_icon" />
       </div>
       <div class="grow">
         <#slot />
       </div>
-      <div :if={slot_assigned?(:right_icon)}>
+      <div class={"flex items-center", grow: @right_grow} :if={slot_assigned?(:right_icon)}>
         <#slot name="right_icon" />
       </div>
     </div>

lib/moon/components/select/helpers.ex

@@ -82,4 +82,33 @@ defmodule Moon.Components.Select.Helpers do
   end
 
   def get_active_border_color(other), do: other
+
+  def get_padding(size) do
+    case size do
+      "small" -> "p-1 h-10 leading-3"
+      "medium" -> "p-2 h-12 leading-4"
+      "large" -> "p-3 h-14 leading-5"
+      "xlarge" -> "p-4 h-16 leading-6"
+    end
+  end
+
+  def innerlabel_font_class(size) do
+    case size do
+      "small" -> "uppercase text-[10px]"
+      "medium" -> "text-xs"
+      "large" -> "text-sm"
+      "xlarge" -> "text-base"
+    end
+  end
+
+  def label_font_class(size) do
+    case size do
+      "small" -> "text-xs"
+      "medium" -> "text-sm"
+      "large" -> "text-base"
+      "xlarge" -> "text-lg"
+    end
+  end
+
+  def prompt_font_class(size), do: label_font_class(size)
 end

lib/moon/components/select/multi_select.ex

@@ -4,22 +4,22 @@ defmodule Moon.Components.Select.MultiSelect.Labels.SelectedLabel do
   use Moon.StatelessComponent
 
   alias Moon.Components.Label
+  alias Moon.Components.Select.Helpers, as: SelectHelpers
   alias Moon.Icons.ControlsClose
   alias Phoenix.LiveView.JS
 
   prop select_id, :string
   prop option, :any
-  prop label_text_size_class, :string
-  prop label_text_color_class, :string
-  prop label_background_color_class, :string
+  prop size, :string
+  prop background_color_class, :string, default: "hit-100"
 
   def render(assigns) do
     ~F"""
     {#if @option}
       <Label
-        class={@label_text_size_class}
-        background_color={@label_background_color_class}
-        color={@label_text_color_class}
+        class={SelectHelpers.innerlabel_font_class(@size)}
+        background_color={@background_color_class}
+        color="text-trunks-100"
       >
         {@option.label}
         <:right_icon>
@@ -48,19 +48,15 @@ defmodule Moon.Components.Select.MultiSelect.Labels do
   prop select_id, :string
   prop options, :list, default: []
   prop value, :list, default: []
+  prop size, :string
   prop prompt, :string
-  prop prompt_text_size_class, :string, default: "text-xs"
-  prop prompt_text_color_class, :string, default: "text-trunks-100"
-  prop label_text_size_class, :string, default: "text-sm"
-  prop label_text_color_class, :string, default: "white-100"
-  prop label_background_color_class, :string, default: "hit-100"
 
   def render(assigns) do
     ~F"""
     {#if @value && @value != []}
-      <!-- <div class={"grid grid-cols-3 grid-flow-row": @prompt}> -->
+      <!-- <div class={"grid grid-cols-1 grid-flow-row": @prompt}> -->
       <div
-        class={"grid grid-cols-3": @prompt}
+        class={"gap-1", "grid grid-cols-1": @prompt}
         style={get_style("grid-auto-flow": if(@prompt, do: "row"))}
       >
         {#if @prompt}
@@ -73,7 +69,10 @@ defmodule Moon.Components.Select.MultiSelect.Labels do
           >
           -->
           <div
-            class={"#{@prompt_text_size_class} #{@prompt_text_color_class}"}
+            class={
+              "text-trunks-100",
+              SelectHelpers.innerlabel_font_class(@size)
+            }
             style="grid-col: span 2 / span 2;"
           >
             {@prompt}
@@ -92,18 +91,15 @@ defmodule Moon.Components.Select.MultiSelect.Labels do
           style={get_style("grid-col": if(@prompt, do: "span 2 / span 2"))}
         >
           {#for v <- @value}
-            <SelectedLabel
-              {=@select_id}
-              option={SelectHelpers.get_option(@options, v)}
-              {=@label_text_size_class}
-              {=@label_text_color_class}
-              {=@label_background_color_class}
-            />
+            <SelectedLabel {=@select_id} {=@size} option={SelectHelpers.get_option(@options, v)} />
           {/for}
         </div>
       </div>
     {#else}
-      <div class={@prompt_text_color_class}>
+      <div class={
+        "text-trunks-100",
+        SelectHelpers.prompt_font_class(@size)
+      }>
         {@prompt}
       </div>
     {/if}
@@ -135,6 +131,7 @@ defmodule Moon.Components.Select.MultiSelect do
   prop disabled, :boolean
   prop required, :boolean
   prop class, :string
+  prop size, :string, values: ~w(small medium large xlarge), default: "medium"
   prop popover_placement, :string, default: "bottom-start"
   prop popover_class, :string
   prop field_border_class, :string, default: FieldBorder.get_default_states_class()
@@ -159,13 +156,14 @@ defmodule Moon.Components.Select.MultiSelect do
             else: @field_border_color_class}
           click="toggle_open"
         >
-          <PullAside class="p-4 align-middle">
+          <PullAside class={"px-4", SelectHelpers.get_padding(@size)}>
             <:left>
               <Labels
                 select_id={@id}
                 value={SelectHelpers.get_value(form, field, value: @value)}
                 {=@options}
                 {=@prompt}
+                {=@size}
               />
             </:left>
             <:right>