[MDS-188] Create the InputGroup component (#358)

assets/css/app.css

@@ -20,6 +20,45 @@ body {
 }
 
 @layer components {
+  .moon-input-group.horizontal > div:first-child input {
+    @apply ltr:rounded-tr-none ltr:rounded-br-none ltr:input-rsb-hidden ;
+  }
+  .moon-input-group.horizontal > div:first-child input:hover {
+    @apply ltr:rounded-moon-i-md ltr:rounded-moon-i-md;
+  }
+  .moon-input-group.horizontal > div:last-child input {
+    @apply ltr:rounded-tl-none ltr:rounded-bl-none ltr:input-lsb-hidden ;
+  }
+  .moon-input-group.horizontal > div:last-child input:hover {
+    @apply ltr:rounded-moon-i-md ltr:rounded-moon-i-md;
+  }
+
+  .moon-input-group.horizontal.rtl-aware > div:first-child input {
+    @apply rtl:rounded-tl-none rtl:rounded-bl-none rtl:input-lsb-hidden;
+  }
+  .moon-input-group.horizontal.rtl-aware > div:first-child input:hover {
+    @apply rtl:rounded-moon-i-md rtl:rounded-moon-i-md;
+  }
+  .moon-input-group.horizontal.rtl-aware > div:last-child input {
+    @apply rtl:rounded-tr-none rtl:rounded-br-none rtl:input-rsb-hidden;
+  }
+  .moon-input-group.horizontal.rtl-aware > div:last-child input:hover {
+    @apply rtl:rounded-moon-i-md rtl:rounded-moon-i-md;
+  }
+
+
+  .moon-input-group.vertical > div:first-child input {
+    @apply rounded-bl-none rounded-br-none input-bbb-hidden;
+  }
+  .moon-input-group.vertical > div:first-child input:hover {
+    @apply rounded-moon-i-md;
+  }
+  .moon-input-group.vertical > div:last-child input {
+    @apply rounded-tl-none rounded-tr-none input-tbb-hidden;
+  }
+  .moon-input-group.vertical > div:last-child input:hover {
+    @apply rounded-moon-i-md;
+  }
   .carousel-item {
     scroll-snap-type: x;
     scroll-snap-align: start;

assets/tailwind.config.js

@@ -325,7 +325,7 @@ module.exports = {
           "& a, & span": {
             padding: "0.5rem",
           },
-        },
+        }
       });
     }),
   ],

lib/moon/autolayouts/left_to_right.ex

@@ -7,10 +7,11 @@ defmodule Moon.Autolayouts.LeftToRight do
   prop class, :string, default: nil
   prop gap, :any, default: "gap-2"
   prop centered, :boolean, default: false
+  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
 
   def render(assigns) do
     ~F"""
-    <div class={"flex #{@gap} #{@class}", "items-center": @centered}>
+    <div class={"flex #{@gap} #{@class}", "items-center": @centered} {=@dir}>
       <#slot />
     </div>
     """

lib/moon/components/input_group/input_group.ex

@@ -0,0 +1,22 @@
+defmodule Moon.Components.InputGroup do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  alias Moon.Components.InputGroup.Container
+
+  prop orientation, :string,
+    default: "horizontal",
+    values: ["horizontal", "vertical"]
+
+  prop has_fields, :boolean, default: false
+
+  slot default, required: true, args: [:group_class_fields]
+
+  def render(assigns) do
+    ~F"""
+    <Container orientation={@orientation}>
+      <#slot />
+    </Container>
+    """
+  end
+end

lib/moon/components/input_group/styled/container.ex

@@ -0,0 +1,46 @@
+defmodule Moon.Components.InputGroup.Container do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  prop orientation, :string
+  prop background_color, :string, default: "gohan-100", values: Moon.colors()
+  prop is_error, :boolean
+  slot default
+
+  def render(assigns) do
+    ~F"""
+    <div class={
+      "moon-input-group border-none shadow-input relative rounded-moon-i-md",
+      @orientation,
+      "rtl-aware",
+      get_class_for_orientation(@orientation, @is_error),
+      "bg-#{@background_color}": @background_color
+    }>
+      <#slot />
+    </div>
+    """
+  end
+
+  defp get_class_for_orientation(orientation, is_error) do
+    cond do
+      orientation == "horizontal" && !is_error ->
+        "
+        flex
+        after:content-[''] after:z-20 after:absolute after:top-0 after:bottom-0 after:w-px
+        after:left-1/2 after:translate-x-[-50%] after:bg-beerus-100 after:x-[3]
+        hover:after:hidden focus-within:after:hidden
+        "
+
+      !is_error ->
+        "
+        after:content-[''] after:z-20 after:absolute after:top-1/2 after:bottom-0 after:w-full after:h-px
+        after:left-0 after:translate-y-[-50%] after:bg-beerus-100 after:x-[3]
+        hover:after:hidden focus-within:after:hidden
+        "
+
+      true ->
+        ""
+    end
+  end
+end

lib/moon/components/text_input/styled/container.ex

@@ -8,6 +8,7 @@ defmodule Moon.Components.TextInput.Container do
   prop id, :string
   prop disabled, :boolean, default: false
   prop size, :string, values: ["md", "lg", "xl"]
+  prop class, :string
 
   slot default
 
@@ -16,13 +17,12 @@ defmodule Moon.Components.TextInput.Container do
     <div
       class={
         "w-full max-w-full relative z-0",
+        @class,
         Utils.get_border_radius(@size),
         "opacity-30 cursor-not-allowed": @disabled
       }
       id={@id}
-    >
-      <#slot />
-    </div>
+    ><#slot /></div>
     """
   end
 end

lib/moon/components/text_input/styled/input.ex

@@ -2,150 +2,78 @@ defmodule Moon.Components.TextInput.Input do
   @moduledoc false
 
   use Moon.StatelessComponent
-
   alias Moon.Components.TextInput.Utils
 
-  prop type, :string,
-    values: [
-      "date",
-      "datetime-local",
-      "email",
-      "number",
-      "password",
-      "search",
-      "tel",
-      "text",
-      "time",
-      "url"
-    ],
-    default: "text"
-
+  prop id, :string
   prop field, :atom
-  prop is_error, :boolean, default: false
-  prop background_color, :string, values: Moon.colors()
-  prop size, :string, values: ["md", "lg", "xl"]
-  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
-  prop with_label, :boolean, default: false
-  prop disabled, :boolean
-  prop placeholder, :string
-  prop required, :boolean
-  prop step, :string, default: "1"
-  prop is_first, :boolean
-  prop readonly, :boolean
-  prop value, :string
-
-  prop is_sharp_left_side, :boolean
-  prop is_sharp_right_side, :boolean
-  prop is_sharp_top_side, :boolean
-  prop is_sharp_bottom_side, :boolean
-  prop is_top_bottom_border_hidden, :boolean
-  prop is_side_border_hidden, :boolean
-
-  prop focus, :event
-  prop keydown, :event
-  prop keyup, :event
-  prop blur, :event
 
   def render(assigns) do
     ~F"""
-    <Surface.Components.Form.TextInput
-      opts={
-        placeholder: @placeholder,
-        disabled: @disabled,
-        required: @required && !@disabled,
-        type: @type,
-        "data-lpignore": "true",
-        step: @step,
-        readonly: @readonly,
-        dir: @dir
-      }
-      value={@value}
-      class={
-        "focus:ring-0 border-0",
-        "block w-full max-w-full py-0 px-4 m-0 appearance-none",
-        "text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
-        "shadow-input hover:shadow-input-hov",
-        "focus:shadow-input-focus focus:outline-none",
-        "before:box-border after:box-border",
-        "placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
-        "read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
-        "input-dt-shared",
-        "invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
-        Utils.get_size_styles(@size),
-        get_class_left(
-          @is_sharp_left_side,
-          @is_sharp_top_side,
-          @is_sharp_bottom_side
-        ),
-        get_class_right(
-          @is_sharp_right_side,
-          @is_sharp_top_side,
-          @is_sharp_bottom_side
-        ),
-        get_class_for_date_type(@type, @dir == "rtl"),
-        get_class_for_time_type(@type, @dir == "rtl"),
-        "#{Utils.make_border_left(@is_side_border_hidden,
-        @is_first,
-        @dir == "rtl")}": !@is_error,
-        "#{Utils.make_border_right(@is_side_border_hidden,
-        @is_first,
-        @dir == "rtl")}": !@is_error,
-        "#{Utils.make_border_top_bottom(@is_top_bottom_border_hidden,
-        @is_first)}": !@is_error,
-        "input-number-clear": @type == "number",
-        "shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
-        "bg-#{@background_color}": @background_color,
-        "bg-transparent": !@background_color,
-        "input-xl-dt-shared": @size == "xl",
-        "input-xl pt-[1.125rem] input-xl-dt-label": @size == "xl" && @with_label,
-        "input-lg-dt-shared": @size == "lg"
-      }
-      focus={@focus}
-      keyup={@keyup}
-      keydown={@keydown}
-      blur={@blur}
-      field={@field}
-    />
+    <Context
+      get={Moon.Components.TextInput, placeholder: placeholder}
+      get={Moon.Components.TextInput, disabled: disabled}
+      get={Moon.Components.TextInput, required: required}
+      get={Moon.Components.TextInput, type: type}
+      get={Moon.Components.TextInput, step: step}
+      get={Moon.Components.TextInput, readonly: readonly}
+      get={Moon.Components.TextInput, value: value}
+      get={Moon.Components.TextInput, size: size}
+      get={Moon.Components.TextInput, is_error: is_error}
+      get={Moon.Components.TextInput, background_color: background_color}
+      get={Moon.Components.TextInput, label: label}
+      get={Moon.Components.TextInput, focus: focus}
+      get={Moon.Components.TextInput, keyup: keyup}
+      get={Moon.Components.TextInput, keydown: keydown}
+      get={Moon.Components.TextInput, blur: blur}
+    >
+      <Surface.Components.Form.TextInput
+        {=@id}
+        {=@field}
+        opts={
+          placeholder: placeholder,
+          disabled: disabled,
+          required: required && !disabled,
+          type: type,
+          "data-lpignore": "true",
+          step: step,
+          readonly: readonly
+        }
+        {=value}
+        class={
+          "focus:ring-0 border-0",
+          "block w-full max-w-full py-0 px-4 m-0 appearance-none",
+          "text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
+          "shadow-input hover:shadow-input-hov",
+          "focus:shadow-input-focus focus:outline-none",
+          "before:box-border after:box-border",
+          "placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
+          "read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
+          "input-dt-shared",
+          "invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
+          Utils.get_size_styles(size),
+          get_class_for_date_type(type),
+          "ltr:input-t rtl:input-t-rtl": type == "time",
+          "input-number-clear": type == "number",
+          "shadow-input-err hover:shadow-input-err focus:shadow-input-err": is_error,
+          "bg-#{background_color}": background_color,
+          "bg-transparent": !background_color,
+          "input-xl-dt-shared": size == "xl",
+          "input-xl pt-[1.125rem] input-xl-dt-label": size == "xl" && label,
+          "input-lg-dt-shared": size == "lg"
+        }
+        {=focus}
+        {=keyup}
+        {=keydown}
+        {=blur}
+      />
+    </Context>
     """
   end
 
-  defp get_class_for_date_type(type, is_rtl) do
-    cond do
-      type == "date" || type == "datetime-local" -> "input-d"
-      type == "date" && is_rtl -> "input-d-rtl"
-      type == "datetime-local" && is_rtl -> "input-dt-local-rtl"
-      true -> ""
-    end
-  end
-
-  defp get_class_for_time_type(type, is_rtl) do
-    cond do
-      type == "time" -> "input-t"
-      type == "time" && is_rtl -> "input-t-rtl"
-      true -> ""
-    end
-  end
-
-  defp get_class_left(
-         is_sharp_left_side,
-         is_sharp_top_side,
-         is_sharp_bottom_side
-       ) do
-    cond do
-      is_sharp_left_side || is_sharp_top_side -> "rounded-tl-none"
-      is_sharp_left_side || is_sharp_bottom_side -> "rounded-bl-none"
-      true -> ""
-    end
-  end
-
-  defp get_class_right(
-         is_sharp_right_side,
-         is_sharp_top_side,
-         is_sharp_bottom_side
-       ) do
+  defp get_class_for_date_type(type) do
     cond do
-      is_sharp_right_side || is_sharp_top_side -> "rounded-tr-none"
-      is_sharp_right_side || is_sharp_bottom_side -> "rounded-br-none"
+      type == "date" -> "ltr:input-d rtl:input-d-rtl"
+      type == "datetime-local" -> "ltr:input-d rtl:input-dt-local-rtl"
       true -> ""
     end
   end