Use daisyui

This commit is contained in:
Paul-Henri Froidmont 2025-09-17 02:29:38 +02:00
parent 38655142b0
commit b0caefd0f4
Signed by: phfroidmont
GPG key ID: BE948AFD7E7873BE
6 changed files with 60 additions and 60 deletions

View file

@ -21,7 +21,6 @@ trait ScalaCommon extends ScalaModule:
)
object core extends ScalaCommon:
// TODO Replace with ujson, core shouldn't depend on ZIO
def mvnDeps = Seq(mvn"dev.zio::zio-json:0.7.44")
def generatedSources = Task {
@ -76,5 +75,6 @@ object example extends ScalaCommon:
object js extends TypeScriptModule:
def mainFileName = "app.js"
def npmDeps = Seq("phoenix@1.7.21", "phoenix_live_view@1.1.8", "topbar@3.0.0")
def npmDeps = Seq("phoenix@1.7.21", "phoenix_live_view@1.1.8", "topbar@3.0.0", "daisyui@5.1.12")
def bundleFlags = super.bundleFlags() ++ Map("minify" -> ujson.Bool(false))
end example

View file

@ -24,15 +24,17 @@ class CounterLiveView() extends LiveView[Msg, Model]:
def view(model: Dyn[Model]) =
div(
cls := "max-w-2xl mx-auto bg-white shadow rounded-2xl p-6 space-y-6",
cls := "mx-auto card bg-base-100 max-w-2xl shadow-xl space-y-6",
div(
cls := "card-body",
h1(
cls := "text-2xl font-semibold tracking-tight text-gray-900",
cls := "card-title",
"Counter with auto increment every second"
),
div(
cls := "flex flex-wrap items-center gap-3",
button(
cls := "inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium ring-1 ring-inset ring-gray-300 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400/30",
cls := "btn btn-default",
phx.click := Msg.ToggleCounter,
model(_.isVisible match
case true => "Hide counter"
@ -40,21 +42,19 @@ class CounterLiveView() extends LiveView[Msg, Model]:
)
),
model.when(_.isVisible)(
div(
cls := "rounded-xl border border-gray-200 p-4 bg-gray-50",
div(
cls := "flex items-center justify-center gap-4",
button(
cls := "inline-flex items-center justify-center h-9 w-9 rounded-lg ring-1 ring-inset ring-gray-300 text-gray-700 hover:bg-white focus:outline-none focus:ring-2 focus:ring-gray-400/30",
cls := "btn btn-neutral",
phx.click := Msg.DecCounter,
"-"
),
div(
cls := "min-w-[4rem] text-center text-lg font-semibold text-gray-900",
cls := "min-w-[4rem] text-center text-lg font-semibold",
model(_.counter.toString)
),
button(
cls := "inline-flex items-center justify-center h-9 w-9 rounded-lg bg-gray-900 text-white shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-900/30",
cls := "btn btn-neutral",
phx.click := Msg.IncCounter,
"+"
)

View file

@ -14,14 +14,10 @@ class HomeLiveView() extends LiveView[String, Unit]:
def view(model: Dyn[Unit]) =
ul(
cls := "space-y-2",
cls := "mx-auto menu bg-base-100 rounded-box shadow-xl w-56",
links.map((path, name) =>
li(
link.navigate(
path,
cls := "block px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 hover:text-gray-900 font-medium transition",
name
)
link.navigate(path, name)
)
)
)

View file

@ -23,44 +23,44 @@ class ListLiveView(someParam: String) extends LiveView[Msg, Model]:
def view(model: Dyn[Model]) =
div(
h1(
cls := "text-2xl font-semibold tracking-tight text-gray-900",
someParam
),
cls := "max-w-2xl mx-auto bg-white shadow rounded-2xl p-6 space-y-6",
idAttr := "42",
cls := "mx-auto card bg-base-100 max-w-2xl shadow-xl space-y-6",
div(
cls := "card-body",
h1(cls := "card-title", someParam),
ul(
cls := "divide-y divide-gray-200",
cls := "divide-y divide-base-200",
model(_.elems).splitByIndex((_, elem) =>
li(
cls := "py-3 flex flex-wrap items-center justify-between gap-2",
span(
cls := "text-gray-700",
cls := "text-base-content",
"Nom: ",
span(cls := "font-medium", elem(_.name))
span(cls := "font-semibold", elem(_.name))
),
span(
cls := "text-sm text-gray-500",
cls := "text-sm opacity-70",
"Age: ",
span(cls := "font-semibold text-gray-700", elem(_.age.toString))
span(cls := "font-bold", elem(_.age.toString))
)
)
)
),
div(
cls := "flex flex-wrap items-center gap-3",
cls := "card-actions",
button(
cls := "inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium bg-gray-900 text-white shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-900/30",
cls := "btn btn-default",
phx.click := Msg.IncAge(1),
"Inc age"
),
span(cls := "grow"),
button(
phx.click := JS.toggleClass("bg-red-500 border-5"),
cls := "btn btn-neutral",
phx.click := JS.toggleClass("btn-neutral btn-accent"),
"Toggle color"
)
)
)
)
def subscriptions(model: Model) = ZStream.empty

View file

@ -4,6 +4,7 @@ object RootLayout:
def apply(content: HtmlElement): HtmlElement =
htmlRootTag(
lang := "en",
dataAttr("theme") := "business",
headTag(
metaTag(charset := "utf-8"),
metaTag(nameAttr := "viewport", contentAttr := "width=device-width, initial-scale=1"),

View file

@ -5,3 +5,6 @@
@plugin '@tailwindcss/aspect-ratio';
@source './src/**/*.scala';
@plugin "daisyui" {
themes: business;
}