Merge branch 'main' into feature/209_hide_field_dropdown

lib/mv_web/components/core_components.ex

@@ -42,7 +42,11 @@ defmodule MvWeb.CoreComponents do
   attr :id, :string, doc: "the optional id of flash container"
   attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
   attr :title, :string, default: nil
-  attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
+
+  attr :kind, :atom,
+    values: [:info, :error, :success, :warning],
+    doc: "used for styling and flash lookup"
+
   attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
 
   slot :inner_block, doc: "the optional inner block that renders the flash message"
@@ -56,16 +60,20 @@ defmodule MvWeb.CoreComponents do
       id={@id}
       phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
       role="alert"
-      class="toast toast-top toast-end z-50"
+      class="z-50 toast toast-top toast-end"
       {@rest}
     >
       <div class={[
         "alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",
         @kind == :info && "alert-info",
-        @kind == :error && "alert-error"
+        @kind == :error && "alert-error",
+        @kind == :success && "bg-green-500 text-white",
+        @kind == :warning && "bg-blue-100 text-blue-800 border border-blue-300"
       ]}>
         <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
         <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
+        <.icon :if={@kind == :success} name="hero-check-circle" class="size-5 shrink-0" />
+        <.icon :if={@kind == :warning} name="hero-information-circle" class="size-5 shrink-0" />
         <div>
           <p :if={@title} class="font-semibold">{@title}</p>
           <p>{msg}</p>
@@ -300,7 +308,7 @@ defmodule MvWeb.CoreComponents do
       end)
 
     ~H"""
-    <fieldset class="fieldset mb-2">
+    <fieldset class="mb-2 fieldset">
       <label>
         <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
         <span class="label">
@@ -312,7 +320,11 @@ defmodule MvWeb.CoreComponents do
             checked={@checked}
             class={@class || "checkbox checkbox-sm"}
             {@rest}
-          />{@label}
+          />{@label}<span
+            :if={@rest[:required]}
+            class="text-red-700 tooltip tooltip-right"
+            data-tip={gettext("This field cannot be empty")}
+          >*</span>
         </span>
       </label>
       <.error :for={msg <- @errors}>{msg}</.error>
@@ -322,9 +334,15 @@ defmodule MvWeb.CoreComponents do
 
   def input(%{type: "select"} = assigns) do
     ~H"""
-    <fieldset class="fieldset mb-2">
+    <fieldset class="mb-2 fieldset">
       <label>
-        <span :if={@label} class="label mb-1">{@label}</span>
+        <span :if={@label} class="mb-1 label">
+          {@label}<span
+            :if={@rest[:required]}
+            class="text-red-700 tooltip tooltip-right"
+            data-tip={gettext("This field cannot be empty")}
+          >*</span>
+        </span>
         <select
           id={@id}
           name={@name}
@@ -343,9 +361,15 @@ defmodule MvWeb.CoreComponents do
 
   def input(%{type: "textarea"} = assigns) do
     ~H"""
-    <fieldset class="fieldset mb-2">
+    <fieldset class="mb-2 fieldset">
       <label>
-        <span :if={@label} class="label mb-1">{@label}</span>
+        <span :if={@label} class="mb-1 label">
+          {@label}<span
+            :if={@rest[:required]}
+            class="text-red-700 tooltip tooltip-right"
+            data-tip={gettext("This field cannot be empty")}
+          >*</span>
+        </span>
         <textarea
           id={@id}
           name={@name}
@@ -364,9 +388,15 @@ defmodule MvWeb.CoreComponents do
   # All other inputs text, datetime-local, url, password, etc. are handled here...
   def input(assigns) do
     ~H"""
-    <fieldset class="fieldset mb-2">
+    <fieldset class="mb-2 fieldset">
       <label>
-        <span :if={@label} class="label mb-1">{@label}</span>
+        <span :if={@label} class="mb-1 label">
+          {@label}<span
+            :if={@rest[:required]}
+            class="text-red-700 tooltip tooltip-right"
+            data-tip={gettext("This field cannot be empty")}
+          >*</span>
+        </span>
         <input
           type={@type}
           name={@name}
@@ -637,7 +667,7 @@ defmodule MvWeb.CoreComponents do
     <div class="mt-14">
       <dl class="-my-4 divide-y divide-zinc-100">
         <div :for={{name, value} <- @items} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
-          <dt class="w-1/4 flex-none text-zinc-500">{name}</dt>
+          <dt class="flex-none w-1/4 text-zinc-500">{name}</dt>
           <dd class="text-zinc-700">{value}</dd>
         </div>
       </dl>