a290bc1891
Parser:
- column/row/stack now parse trailing { props } after ]
- Enables: column [...] { variant: "card" }
Codegen:
- Container props dispatch: variant, class, click, style, layout
- variant_to_css() maps (tag, variant) → CSS class
- variant_map_js() for dynamic variants via inline JS map
- 230+ lines design system CSS (button/badge/card/dialog/toast/
progress/alert/separator/toggle/avatar/stat)
Registry (11 components):
- button, input, card, badge, dialog, toast
- NEW: progress, alert, separator, toggle, avatar
- All embedded via include_str! for offline use
Examples:
- showcase.ds: component gallery with variant prop
- dashboard.ds: admin dashboard with glassmorphism cards
95 lines
2.2 KiB
Text
95 lines
2.2 KiB
Text
-- DreamStack Dashboard
|
|
-- Rich admin dashboard using container variant props
|
|
|
|
let visitors = 12847
|
|
let revenue = 48290
|
|
let orders = 384
|
|
let conversion = 3.2
|
|
let search = ""
|
|
|
|
view main = column [
|
|
|
|
-- Header
|
|
row [
|
|
text "Dashboard" { variant: "title" }
|
|
input { bind: search, placeholder: "Search..." }
|
|
]
|
|
text "Welcome back — here's what's happening today." { variant: "subtitle" }
|
|
|
|
-- Stat cards row
|
|
row [
|
|
column [
|
|
text "Total Visitors" { variant: "subtitle" }
|
|
text "{visitors}" { variant: "title" }
|
|
text "↑ 12% from last month" { variant: "success" }
|
|
] { variant: "card" }
|
|
|
|
column [
|
|
text "Revenue" { variant: "subtitle" }
|
|
text "${revenue}" { variant: "title" }
|
|
text "↑ 8.2% from last month" { variant: "success" }
|
|
] { variant: "card" }
|
|
|
|
column [
|
|
text "Orders" { variant: "subtitle" }
|
|
text "{orders}" { variant: "title" }
|
|
text "↓ 2.1% from last month" { variant: "error" }
|
|
] { variant: "card" }
|
|
|
|
column [
|
|
text "Conversion" { variant: "subtitle" }
|
|
text "{conversion}%" { variant: "title" }
|
|
text "↑ 0.5% from last month" { variant: "success" }
|
|
] { variant: "card" }
|
|
]
|
|
|
|
-- Alert
|
|
text "⚡ Your trial ends in 3 days. Upgrade to keep all features." { variant: "info" }
|
|
|
|
-- Recent Orders
|
|
column [
|
|
text "Recent Orders" { variant: "title" }
|
|
|
|
row [
|
|
text "#" { variant: "label" }
|
|
text "Customer" { variant: "label" }
|
|
text "Status" { variant: "label" }
|
|
text "Amount" { variant: "label" }
|
|
]
|
|
|
|
row [
|
|
text "3842"
|
|
text "Alice Johnson"
|
|
text "Delivered" { variant: "success" }
|
|
text "$249.00"
|
|
]
|
|
|
|
row [
|
|
text "3841"
|
|
text "Bob Smith"
|
|
text "Processing" { variant: "warning" }
|
|
text "$149.00"
|
|
]
|
|
|
|
row [
|
|
text "3840"
|
|
text "Carol White"
|
|
text "Shipped" { variant: "info" }
|
|
text "$399.00"
|
|
]
|
|
|
|
row [
|
|
text "3839"
|
|
text "Dave Brown"
|
|
text "Cancelled" { variant: "error" }
|
|
text "$89.00"
|
|
]
|
|
] { variant: "card" }
|
|
|
|
-- Actions
|
|
row [
|
|
button "View All Orders" { variant: "primary" }
|
|
button "Export CSV" { variant: "secondary" }
|
|
button "Settings" { variant: "ghost" }
|
|
]
|
|
]
|