defmodule <%= @module %> do @moduledoc """ The `<%= @module %>` module provides a flexible and customizable form wrapper component for Phoenix applications. It offers various options for styling, size, and layout to suit different form designs and requirements. ### Features: - **Customizable Styles:** Choose from multiple color themes, border styles, and design variants. - **Layout Flexibility:** Control padding, spacing, and border radius to adjust the form's appearance. - **Form Slots:** Define inner content and actions slots to organize form elements and buttons. - **Global Attribute Support:** Allows for additional attributes like `autocomplete`, `method`, and more to be merged with component defaults. This component is ideal for wrapping forms with consistent styles and structure across an application. """ use Phoenix.Component @doc """ Renders a `form_wrapper` component that supports custom styles and input fields. It allows for the inclusion of multiple input fields and form actions, such as a submit button, within a consistent layout. ## Examples ```elixir <.form_wrapper class="space-y-10">
<.text_field name="name1" space="small" color="light"/> ...
``` """ @doc type: :component attr :id, :string, default: nil, doc: "A unique identifier is used to manage state and interaction" attr :class, :string, default: nil, doc: "Custom CSS class for additional styling" attr :color, :string, default: "", doc: "Determines color theme" attr :variant, :string, default: "", doc: "Determines the style" attr :border, :string, default: "", doc: "Determines border style" attr :rounded, :string, default: "", doc: "Determines the border radius" attr :padding, :string, default: "", doc: "Determines padding for items" attr :space, :string, default: "", doc: "Space between items" attr :size, :string, default: "", doc: "Determines the overall size of the elements, including padding, font size, and other items" attr :for, :any, required: false, doc: "the data structure for the form" attr :as, :any, default: nil, doc: "the server side parameter to collect all input under" attr :rest, :global, include: ~w(autocomplete name rel action enctype method novalidate target multipart), doc: "Global attributes can define defaults which are merged with attributes provided by the caller" slot :inner_block, required: true, doc: "Inner block that renders HEEx content" slot :actions, required: false, doc: "the slot for form actions, such as a submit button" def form_wrapper(assigns) do ~H""" <.form :let={f} for={@for} as={@as} {@rest} class={[ color_variant(@variant, @color), padding_class(@padding), rounded_size(@rounded), border_class(@border, @variant), space_class(@space), size_class(@size), @class ]} {@rest} > {render_slot(@inner_block, f)}
{render_slot(action, f)}
""" end <%= if is_nil(@size) or "extra_small" in @size do %> defp size_class("extra_small"), do: "text-xs" <% end %> <%= if is_nil(@size) or "small" in @size do %> defp size_class("small"), do: "text-sm" <% end %> <%= if is_nil(@size) or "medium" in @size do %> defp size_class("medium"), do: "text-base" <% end %> <%= if is_nil(@size) or "large" in @size do %> defp size_class("large"), do: "text-lg" <% end %> <%= if is_nil(@size) or "extra_large" in @size do %> defp size_class("extra_large"), do: "text-xl" <% end %> defp size_class(params) when is_binary(params), do: params <%= if is_nil(@rounded) or "extra_small" in @rounded do %> defp rounded_size("extra_small"), do: "rounded-sm" <% end %> <%= if is_nil(@rounded) or "small" in @rounded do %> defp rounded_size("small"), do: "rounded" <% end %> <%= if is_nil(@rounded) or "medium" in @rounded do %> defp rounded_size("medium"), do: "rounded-md" <% end %> <%= if is_nil(@rounded) or "large" in @rounded do %> defp rounded_size("large"), do: "rounded-lg" <% end %> <%= if is_nil(@rounded) or "extra_large" in @rounded do %> defp rounded_size("extra_large"), do: "rounded-xl" <% end %> <%= if is_nil(@rounded) or "full" in @rounded do %> defp rounded_size("full"), do: "rounded-full" <% end %> defp rounded_size(params) when is_binary(params), do: params defp border_class(_, variant) when variant in ["default", "shadow", "transparent"], do: nil defp border_class("extra_small", _), do: "border" defp border_class("small", _), do: "border-2" defp border_class("medium", _), do: "border-[3px]" defp border_class("large", _), do: "border-4" defp border_class("extra_large", _), do: "border-[5px]" defp border_class(params, _) when is_binary(params), do: params <%= if is_nil(@padding) or "extra_large" in @padding do %> defp padding_class("extra_small"), do: "p-2" <% end %> <%= if is_nil(@padding) or "small" in @padding do %> defp padding_class("small"), do: "p-3" <% end %> <%= if is_nil(@padding) or "medium" in @padding do %> defp padding_class("medium"), do: "p-4" <% end %> <%= if is_nil(@padding) or "large" in @padding do %> defp padding_class("large"), do: "p-5" <% end %> <%= if is_nil(@padding) or "extra_large" in @padding do %> defp padding_class("extra_large"), do: "p-6" <% end %> defp padding_class(params) when is_binary(params), do: params <%= if is_nil(@space) or "extra_small" in @space do %> defp space_class("extra_small"), do: "space-y-1" <% end %> <%= if is_nil(@space) or "small" in @space do %> defp space_class("small"), do: "space-y-1.5" <% end %> <%= if is_nil(@space) or "medium" in @space do %> defp space_class("medium"), do: "space-y-2" <% end %> <%= if is_nil(@space) or "large" in @space do %> defp space_class("large"), do: "space-y-2.5" <% end %> <%= if is_nil(@space) or "extra_large" in @space do %> defp space_class("extra_large"), do: "space-y-3" <% end %> defp space_class(params) when is_binary(params), do: params <%= if is_nil(@variant) or "base" in @variant do %> <%= if is_nil(@color) or "base" in @color do %> defp color_variant("base", "base") do [ "bg-white text-[#09090b] border-[#e4e4e7] shadow-sm", "dark:bg-[#18181B] dark:text-[#FAFAFA] dark:border-[#27272a]" ] end <% end %> <% end %> <%= if is_nil(@variant) or "default" in @variant do %> <%= if is_nil(@color) or "white" in @color do %> defp color_variant("default", "white") do [ "bg-white text-black" ] end <% end %> <%= if is_nil(@color) or "dark" in @color do %> defp color_variant("default", "dark") do [ "bg-[#282828] text-white" ] end <% end %> <%= if is_nil(@color) or "natural" in @color do %> defp color_variant("default", "natural") do [ "bg-[#4B4B4B] text-white dark:bg-[#DDDDDD] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "primary" in @color do %> defp color_variant("default", "primary") do [ "bg-[#007F8C] text-white dark:bg-[#01B8CA] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "secondary" in @color do %> defp color_variant("default", "secondary") do [ "bg-[#266EF1] text-white dark:bg-[#6DAAFB] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "success" in @color do %> defp color_variant("default", "success") do [ "bg-[#0E8345] text-white dark:bg-[#06C167] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "warning" in @color do %> defp color_variant("default", "warning") do [ "bg-[#CA8D01] text-white dark:bg-[#FDC034] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "danger" in @color do %> defp color_variant("default", "danger") do [ "bg-[#DE1135] text-white dark:bg-[#FC7F79] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "info" in @color do %> defp color_variant("default", "info") do [ "bg-[#0B84BA] text-white dark:bg-[#3EB7ED] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "misc" in @color do %> defp color_variant("default", "misc") do [ "bg-[#8750C5] text-white dark:bg-[#BA83F9] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "dawn" in @color do %> defp color_variant("default", "dawn") do [ "bg-[#A86438] text-white dark:bg-[#DB976B] dark:text-black" ] end <% end %> <%= if is_nil(@color) or "silver" in @color do %> defp color_variant("default", "silver") do [ "bg-[#868686] text-white dark:bg-[#A6A6A6] dark:text-black" ] end <% end %> <% end %> <%= if is_nil(@variant) or "outline" in @variant do %> <%= if is_nil(@color) or "natural" in @color do %> defp color_variant("outline", "natural") do [ "text-[#4B4B4B] border-[#4B4B4B] dark:text-[#DDDDDD] dark:border-[#DDDDDD]" ] end <% end %> <%= if is_nil(@color) or "primary" in @color do %> defp color_variant("outline", "primary") do [ "text-[#007F8C] border-[#007F8C] dark:text-[#01B8CA] dark:border-[#01B8CA]" ] end <% end %> <%= if is_nil(@color) or "secondary" in @color do %> defp color_variant("outline", "secondary") do [ "text-[#266EF1] border-[#266EF1] dark:text-[#6DAAFB] dark:border-[#6DAAFB]" ] end <% end %> <%= if is_nil(@color) or "success" in @color do %> defp color_variant("outline", "success") do [ "text-[#0E8345] border-[#0E8345] dark:text-[#06C167] dark:border-[#06C167]" ] end <% end %> <%= if is_nil(@color) or "warning" in @color do %> defp color_variant("outline", "warning") do [ "text-[#CA8D01] border-[#CA8D01] dark:text-[#FDC034] dark:border-[#FDC034]" ] end <% end %> <%= if is_nil(@color) or "danger" in @color do %> defp color_variant("outline", "danger") do [ "text-[#DE1135] border-[#DE1135] dark:text-[#FC7F79] dark:border-[#FC7F79]" ] end <% end %> <%= if is_nil(@color) or "info" in @color do %> defp color_variant("outline", "info") do [ "text-[#0B84BA] border-[#0B84BA] dark:text-[#3EB7ED] dark:border-[#3EB7ED]" ] end <% end %> <%= if is_nil(@color) or "misc" in @color do %> defp color_variant("outline", "misc") do [ "text-[#8750C5] border-[#8750C5] dark:text-[#BA83F9] dark:border-[#BA83F9]" ] end <% end %> <%= if is_nil(@color) or "dawn" in @color do %> defp color_variant("outline", "dawn") do [ "text-[#A86438] border-[#A86438] dark:text-[#DB976B] dark:border-[#DB976B]" ] end <% end %> <%= if is_nil(@color) or "silver" in @color do %> defp color_variant("outline", "silver") do [ "text-[#868686] border-[#868686] dark:text-[#A6A6A6] dark:border-[#A6A6A6]" ] end <% end %> <% end %> <%= if is_nil(@variant) or "shadow" in @variant do %> <%= if is_nil(@color) or "natural" in @color do %> defp color_variant("shadow", "natural") do [ "bg-[#4B4B4B] text-white dark:bg-[#DDDDDD] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(134,134,134,0.5)] shadow-[0px_10px_15px_-3px_rgba(134,134,134,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "primary" in @color do %> defp color_variant("shadow", "primary") do [ "bg-[#007F8C] text-white dark:bg-[#01B8CA] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(0,149,164,0.5)] shadow-[0px_10px_15px_-3px_rgba(0,149,164,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "secondary" in @color do %> defp color_variant("shadow", "secondary") do [ "bg-[#266EF1] text-white dark:bg-[#6DAAFB] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(6,139,238,0.5)] shadow-[0px_10px_15px_-3px_rgba(6,139,238,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "success" in @color do %> defp color_variant("shadow", "success") do [ "bg-[#0E8345] text-white hover:bg-[#166C3B] dark:bg-[#06C167] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(0,154,81,0.5)] shadow-[0px_10px_15px_-3px_rgba(0,154,81,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "warning" in @color do %> defp color_variant("shadow", "warning") do [ "bg-[#CA8D01] text-white dark:bg-[#FDC034] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(252,176,1,0.5)] shadow-[0px_10px_15px_-3px_rgba(252,176,1,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "danger" in @color do %> defp color_variant("shadow", "danger") do [ "bg-[#DE1135] text-white dark:bg-[#FC7F79] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(248,52,70,0.5)] shadow-[0px_10px_15px_-3px_rgba(248,52,70,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "info" in @color do %> defp color_variant("shadow", "info") do [ "bg-[#0B84BA] text-white dark:bg-[#3EB7ED] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(14,165,233,0.5)] shadow-[0px_10px_15px_-3px_rgba(14,165,233,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "misc" in @color do %> defp color_variant("shadow", "misc") do [ "bg-[#8750C5] text-white dark:bg-[#BA83F9] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(169,100,247,0.5)] shadow-[0px_10px_15px_-3px_rgba(169,100,247,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "dawn" in @color do %> defp color_variant("shadow", "dawn") do [ "bg-[#A86438] text-white dark:bg-[#DB976B] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(210,125,70,0.5)] shadow-[0px_10px_15px_-3px_rgba(210,125,70,0.5)] dark:shadow-none" ] end <% end %> <%= if is_nil(@color) or "silver" in @color do %> defp color_variant("shadow", "silver") do [ "bg-[#868686] text-white dark:bg-[#A6A6A6] dark:text-black", "shadow-[0px_4px_6px_-4px_rgba(134,134,134,0.5)] shadow-[0px_10px_15px_-3px_rgba(134,134,134,0.5)] dark:shadow-none" ] end <% end %> <% end %> <%= if is_nil(@variant) or "bordered" in @variant do %> <%= if is_nil(@color) or "white" in @color do %> defp color_variant("bordered", "white") do [ "bg-white text-black border-[#DDDDDD]" ] end <% end %> <%= if is_nil(@color) or "dark" in @color do %> defp color_variant("bordered", "dark") do [ "bg-[#282828] text-white border-[#727272]" ] end <% end %> <%= if is_nil(@color) or "natural" in @color do %> defp color_variant("bordered", "natural") do [ "text-[#282828] border-[#282828] bg-[#F3F3F3]", "dark:text-[#E8E8E8] dark:border-[#E8E8E8] dark:bg-[#4B4B4B]" ] end <% end %> <%= if is_nil(@color) or "primary" in @color do %> defp color_variant("bordered", "primary") do [ "text-[#016974] border-[#016974] bg-[#E2F8FB]", "dark:text-[#77D5E3] dark:border-[#77D5E3] dark:bg-[#002D33]" ] end <% end %> <%= if is_nil(@color) or "secondary" in @color do %> defp color_variant("bordered", "secondary") do [ "text-[#175BCC] border-[#175BCC] bg-[#EFF4FE]", "dark:text-[#A9C9FF] dark:border-[#A9C9FF] dark:bg-[#002661]" ] end <% end %> <%= if is_nil(@color) or "success" in @color do %> defp color_variant("bordered", "success") do [ "text-[#166C3B] border-[#166C3B] bg-[#EAF6ED]", "dark:text-[#7FD99A] dark:border-[#7FD99A] dark:bg-[#002F14]" ] end <% end %> <%= if is_nil(@color) or "warning" in @color do %> defp color_variant("bordered", "warning") do [ "text-[#976A01] border-[#976A01] bg-[#FFF7E6]", "dark:text-[#FDD067] dark:border-[#FDD067] dark:bg-[#322300]" ] end <% end %> <%= if is_nil(@color) or "danger" in @color do %> defp color_variant("bordered", "danger") do [ "text-[#BB032A] border-[#BB032A] bg-[#FFF0EE]", "dark:text-[#FFB2AB] dark:border-[#FFB2AB] dark:bg-[#520810]" ] end <% end %> <%= if is_nil(@color) or "info" in @color do %> defp color_variant("bordered", "info") do [ "text-[#0B84BA] border-[#0B84BA] bg-[#E7F6FD]", "dark:text-[#6EC9F2] dark:border-[#6EC9F2] dark:bg-[#03212F]" ] end <% end %> <%= if is_nil(@color) or "misc" in @color do %> defp color_variant("bordered", "misc") do [ "text-[#653C94] border-[#653C94] bg-[#F6F0FE]", "dark:text-[#CBA2FA] dark:border-[#CBA2FA] dark:bg-[#221431]" ] end <% end %> <%= if is_nil(@color) or "dawn" in @color do %> defp color_variant("bordered", "dawn") do [ "text-[#7E4B2A] border-[#7E4B2A] bg-[#FBF2ED]", "dark:text-[#E4B190] dark:border-[#E4B190] dark:bg-[#2A190E]" ] end <% end %> <%= if is_nil(@color) or "silver" in @color do %> defp color_variant("bordered", "silver") do [ "text-[#727272] border-[#727272] bg-[#F3F3F3]", "dark:text-[#BBBBBB] dark:border-[#BBBBBB] dark:bg-[#4B4B4B]" ] end <% end %> <% end %> <%= if is_nil(@variant) or "transparent" in @variant do %> <%= if is_nil(@color) or "natural" in @color do %> defp color_variant("transparent", "natural") do [ "text-[#4B4B4B] dark:text-[#DDDDDD]" ] end <% end %> <%= if is_nil(@color) or "primary" in @color do %> defp color_variant("transparent", "primary") do [ "text-[#007F8C] dark:text-[#01B8CA]" ] end <% end %> <%= if is_nil(@color) or "secondary" in @color do %> defp color_variant("transparent", "secondary") do [ "text-[#266EF1] dark:text-[#6DAAFB]" ] end <% end %> <%= if is_nil(@color) or "success" in @color do %> defp color_variant("transparent", "success") do [ "text-[#0E8345] dark:text-[#06C167]" ] end <% end %> <%= if is_nil(@color) or "warning" in @color do %> defp color_variant("transparent", "warning") do [ "text-[#CA8D01] dark:text-[#FDC034]" ] end <% end %> <%= if is_nil(@color) or "danger" in @color do %> defp color_variant("transparent", "danger") do [ "text-[#DE1135] dark:text-[#FC7F79]" ] end <% end %> <%= if is_nil(@color) or "info" in @color do %> defp color_variant("transparent", "info") do [ "text-[#0B84BA] dark:text-[#3EB7ED]" ] end <% end %> <%= if is_nil(@color) or "misc" in @color do %> defp color_variant("transparent", "misc") do [ "text-[#8750C5] dark:text-[#BA83F9]" ] end <% end %> <%= if is_nil(@color) or "dawn" in @color do %> defp color_variant("transparent", "dawn") do [ "text-[#A86438] dark:text-[#DB976B]" ] end <% end %> <%= if is_nil(@color) or "silver" in @color do %> defp color_variant("transparent", "silver") do [ "text-[#868686] dark:text-[#A6A6A6]" ] end <% end %> <% end %> defp color_variant(params,_) when is_binary(params), do: params end