scalatags-web-awesome

Scalatags bindings for Web Awesome web components (v3.12.0).

Provides type-safe tag and attribute definitions for all 87 Web Awesome components, usable from both JVM (server-side HTML rendering) and ScalaJS (browser DOM).

Setup

Add the dependency to your Mill build:

// JVM (scalatags Text backend)
def mvnDeps = Seq(mvn"works.iterative::scalatags-webawesome:3.12.0")

// ScalaJS (scalatags JsDom backend)
def mvnDeps = Seq(mvn"works.iterative::scalatags-webawesome:3.12.0")

Or in sbt:

libraryDependencies += "works.iterative" %%% "scalatags-webawesome" % "3.12.0"

Your HTML pages need to load the Web Awesome runtime. Add to <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.12.0/dist-cdn/styles/webawesome.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.12.0/dist-cdn/webawesome.loader.js"></script>

Important: Use dist-cdn/ (not dist/). The dist/ directory contains bare module specifiers that require a bundler.

Usage

import scalatags.Text.all.*
import works.iterative.scalatags.webawesome.WebAwesome.*

val page = div(
  waButton(variant := "brand", appearance := "accent")("Click me"),
  waInput(withLabel := "true", placeholder := "Enter text"),
  waBadge(variant := "success")("Active"),
  waDialog(open := "true", labelAttr := "Hello")(
    p("Dialog content"),
    waButton(slot := "footer", variant := "brand")("Close")
  )
)

Tags are prefixed with wa in camelCase (e.g., wa-button becomes waButton, wa-color-picker becomes waColorPicker).

Attributes

Web Awesome-specific attributes are defined in the WebAwesome object. Standard HTML attributes (disabled, placeholder, name, value, size, etc.) come from scalatags as usual.

Some Web Awesome attributes have a name that scalatags all already uses for a tag, a style or a method. In the WebAwesome object these attributes have the suffix Attr:

Scala name	HTML attribute
labelAttr	label
dataAttr	data
positionAttr	position
displayAttr	display
directionAttr	direction
opacityAttr	opacity
canvasAttr	canvas
maskAttr	mask
attrAttr	attr

waDialog(labelAttr := "Title")("Content")
waColorPicker(opacityAttr := "true")

Use the suffixed names. Without the suffix, the scalatags name is a different thing: for example, mask and opacity are scalatags CSS styles, so mask := "true" compiles but sets an inline style, not the attribute.

size has no conflict. The scalatags size is the HTML attribute size, so size := "m" and attr("size") := "m" give the same HTML. The size values are xs, s, m, l and xl. Web Awesome deprecates small, medium and large.

waButton(size := "l")("Large button")

Boolean attributes are on when they are present, with any value. Use the string "true". The value "false" also turns the attribute on. To turn it off, do not write the attribute.

waButton(pill := "true", loading := "true")("Loading...")

Components

All 87 Web Awesome 3.12.0 components are supported: 70 free components and 17 Pro components. The free components, organized by category:

• Form Controls: input, number-input, select, option, checkbox, checkbox-group, radio, radio-group, color-picker, slider, switch, textarea, otp-input (experimental), time-input (experimental), known-date (experimental)
• Actions: button, button-group, copy-button, dropdown, dropdown-item
• Display & Feedback: avatar, badge, callout, icon, skeleton, spinner, tag, toast, toast-item
• Indicators & Progress: progress-bar, progress-ring, rating
• Layout & Organization: accordion (experimental), accordion-item (experimental), breadcrumb, breadcrumb-item, card, details, dialog, divider, drawer, page, split-panel
• Navigation: pagination (experimental), tab, tab-group, tab-panel, tree, tree-item
• Popups & Overlays: popover, popup, tooltip
• Media: animated-image, animation, carousel (experimental), carousel-item (experimental), comparison
• Formatters & Utilities: format-bytes, format-date, format-number, include, markdown (experimental), qr-code, random-content (experimental), relative-time, zoomable-frame
• Observers: intersection-observer, mutation-observer, resize-observer, scroller

The components marked (experimental) have the status "experimental" in the Web Awesome 3.12.0 manifest.

Pro Components

The following components require a Web Awesome Pro license:

• Form Controls: wa-combobox, wa-file-input, wa-date-input (experimental), wa-date-picker (experimental)
• Charts: wa-chart, wa-bar-chart, wa-bubble-chart, wa-doughnut-chart, wa-line-chart, wa-pie-chart, wa-polar-area-chart, wa-radar-chart, wa-scatter-chart, wa-sparkline
• Data: wa-data-grid (experimental)
• Media: wa-video (experimental), wa-video-playlist (experimental)

Building

Requires Mill 1.1.2+.

./mill webawesome.jvm.compile    # Compile JVM module
./mill webawesome.js.compile     # Compile ScalaJS module
./mill webawesome.jvm.test       # Run tests
./mill webawesome.jvm.publishLocal  # Publish to ~/.ivy2/local
./mill webawesome.js.publishLocal   # Publish ScalaJS to ~/.ivy2/local

Scenario Server

A built-in demo server shows all components:

./mill -w scenarios.run
# Open http://localhost:8086

Versioning

Library versions mirror the Web Awesome version they target. Version 3.12.0 provides bindings for Web Awesome 3.12.0. A fourth segment (e.g., 3.12.0.1) indicates a fix to the bindings themselves without a Web Awesome version change.

Updates are provided on a best-effort basis — there is no guarantee of tracking every Web Awesome release.

License

MIT