From b0caefd0f45cf3416aa493aaa446eb5751c51705 Mon Sep 17 00:00:00 2001 From: Paul-Henri Froidmont Date: Wed, 17 Sep 2025 02:29:38 +0200 Subject: [PATCH] Use daisyui --- build.mill | 4 +- example/src/CounterLiveView.scala | 38 +++++++++--------- example/src/HomeLiveView.scala | 8 +--- example/src/ListLiveView.scala | 64 +++++++++++++++---------------- example/src/RootLayout.scala | 3 +- example/tailwind.css | 3 ++ 6 files changed, 60 insertions(+), 60 deletions(-) diff --git a/build.mill b/build.mill index 043d072..8f04b4b 100644 --- a/build.mill +++ b/build.mill @@ -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 diff --git a/example/src/CounterLiveView.scala b/example/src/CounterLiveView.scala index ba02d61..64fb90e 100644 --- a/example/src/CounterLiveView.scala +++ b/example/src/CounterLiveView.scala @@ -24,37 +24,37 @@ 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", - h1( - cls := "text-2xl font-semibold tracking-tight text-gray-900", - "Counter with auto increment every second" - ), + cls := "mx-auto card bg-base-100 max-w-2xl shadow-xl space-y-6", 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", - phx.click := Msg.ToggleCounter, - model(_.isVisible match - case true => "Hide counter" - case false => "Show counter") - ) - ), - model.when(_.isVisible)( + cls := "card-body", + h1( + cls := "card-title", + "Counter with auto increment every second" + ), div( - cls := "rounded-xl border border-gray-200 p-4 bg-gray-50", + cls := "flex flex-wrap items-center gap-3", + button( + cls := "btn btn-default", + phx.click := Msg.ToggleCounter, + model(_.isVisible match + case true => "Hide counter" + case false => "Show counter") + ) + ), + model.when(_.isVisible)( 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, "+" ) diff --git a/example/src/HomeLiveView.scala b/example/src/HomeLiveView.scala index 241f02a..877797d 100644 --- a/example/src/HomeLiveView.scala +++ b/example/src/HomeLiveView.scala @@ -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) ) ) ) diff --git a/example/src/ListLiveView.scala b/example/src/ListLiveView.scala index 6d92063..7f15f1b 100644 --- a/example/src/ListLiveView.scala +++ b/example/src/ListLiveView.scala @@ -23,41 +23,41 @@ 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", - ul( - cls := "divide-y divide-gray-200", - model(_.elems).splitByIndex((_, elem) => - li( - cls := "py-3 flex flex-wrap items-center justify-between gap-2", - span( - cls := "text-gray-700", - "Nom: ", - span(cls := "font-medium", elem(_.name)) - ), - span( - cls := "text-sm text-gray-500", - "Age: ", - span(cls := "font-semibold text-gray-700", elem(_.age.toString)) + 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-base-200", + model(_.elems).splitByIndex((_, elem) => + li( + cls := "py-3 flex flex-wrap items-center justify-between gap-2", + span( + cls := "text-base-content", + "Nom: ", + span(cls := "font-semibold", elem(_.name)) + ), + span( + cls := "text-sm opacity-70", + "Age: ", + span(cls := "font-bold", elem(_.age.toString)) + ) ) ) - ) - ), - 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 bg-gray-900 text-white shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-900/30", - phx.click := Msg.IncAge(1), - "Inc age" ), - span(cls := "grow"), - button( - phx.click := JS.toggleClass("bg-red-500 border-5"), - "Toggle color" + div( + cls := "card-actions", + button( + cls := "btn btn-default", + phx.click := Msg.IncAge(1), + "Inc age" + ), + span(cls := "grow"), + button( + cls := "btn btn-neutral", + phx.click := JS.toggleClass("btn-neutral btn-accent"), + "Toggle color" + ) ) ) ) diff --git a/example/src/RootLayout.scala b/example/src/RootLayout.scala index 9fef2ef..bfeafc8 100644 --- a/example/src/RootLayout.scala +++ b/example/src/RootLayout.scala @@ -3,7 +3,8 @@ import scalive.* object RootLayout: def apply(content: HtmlElement): HtmlElement = htmlRootTag( - lang := "en", + lang := "en", + dataAttr("theme") := "business", headTag( metaTag(charset := "utf-8"), metaTag(nameAttr := "viewport", contentAttr := "width=device-width, initial-scale=1"), diff --git a/example/tailwind.css b/example/tailwind.css index 058b8d2..5e9f2a1 100644 --- a/example/tailwind.css +++ b/example/tailwind.css @@ -5,3 +5,6 @@ @plugin '@tailwindcss/aspect-ratio'; @source './src/**/*.scala'; +@plugin "daisyui" { + themes: business; +}