add class to input component

This commit is contained in:
Inhji 2023-03-30 22:55:24 +02:00
parent 671049b4fc
commit 7e0f009a58
2 changed files with 6 additions and 2 deletions

View file

@ -305,6 +305,8 @@ defmodule ChiyaWeb.CoreComponents do
<.input name="my-input" errors={["oh no!"]} /> <.input name="my-input" errors={["oh no!"]} />
""" """
attr :id, :any, default: nil attr :id, :any, default: nil
attr :class, :string, default: nil
attr :name, :any attr :name, :any
attr :label, :string, default: nil attr :label, :string, default: nil
attr :value, :any attr :value, :any
@ -391,6 +393,7 @@ defmodule ChiyaWeb.CoreComponents do
"phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5", "phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
"border-gray-300 focus:border-gray-400 focus:ring-gray-800/5", "border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
"dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400", "dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400",
@class,
@errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10" @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
]} ]}
{@rest} {@rest}
@ -415,6 +418,7 @@ defmodule ChiyaWeb.CoreComponents do
"phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5", "phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
"border-gray-300 focus:border-gray-400 focus:ring-gray-800/5", "border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
"dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400", "dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400",
@class,
@errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10" @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
]} ]}
{@rest} {@rest}

View file

@ -12,8 +12,8 @@
options={Ecto.Enum.values(Chiya.Site.Setting, :theme)} options={Ecto.Enum.values(Chiya.Site.Setting, :theme)}
/> />
<.input field={f[:user_agent]} type="text" label="User agent" /> <.input field={f[:user_agent]} type="text" label="User agent" />
<.input field={f[:custom_css]} type="textarea" label="Custom css" /> <.input field={f[:custom_css]} type="textarea" label="Custom css" class="font-mono" />
<.input field={f[:custom_html]} type="textarea" label="Custom html" /> <.input field={f[:custom_html]} type="textarea" label="Custom html" class="font-mono" />
<.input field={f[:home_channel_id]} type="select" label="Home Channel" options={@channels} /> <.input field={f[:home_channel_id]} type="select" label="Home Channel" options={@channels} />
<:actions> <:actions>
<.button>Save Setting</.button> <.button>Save Setting</.button>