2026-02-25 00:06:20 -08:00
|
|
|
|
-- DreamStack TodoMVC
|
2026-02-26 16:46:06 -08:00
|
|
|
|
-- Dynamic list with add, remove, and reactive count
|
2026-02-25 00:06:20 -08:00
|
|
|
|
|
2026-02-26 16:46:06 -08:00
|
|
|
|
import { Card } from "../registry/components/card"
|
|
|
|
|
|
import { Badge } from "../registry/components/badge"
|
2026-02-25 00:06:20 -08:00
|
|
|
|
|
2026-02-26 16:46:06 -08:00
|
|
|
|
let todos = ["Learn DreamStack", "Build something amazing", "Ship it"]
|
|
|
|
|
|
let newTodo = ""
|
|
|
|
|
|
let completedCount = 0
|
2026-02-25 00:06:20 -08:00
|
|
|
|
|
2026-02-26 16:46:06 -08:00
|
|
|
|
view main = column [
|
|
|
|
|
|
text "📝 DreamStack Todos" { variant: "title" }
|
|
|
|
|
|
text "Add, remove, and manage your tasks" { variant: "subtitle" }
|
2026-02-25 00:06:20 -08:00
|
|
|
|
|
2026-02-26 16:46:06 -08:00
|
|
|
|
-- Add new todo
|
|
|
|
|
|
Card { title: "New Todo", subtitle: "type and press Add" } [
|
2026-02-25 00:06:20 -08:00
|
|
|
|
row [
|
2026-02-26 16:46:06 -08:00
|
|
|
|
input { bind: newTodo, placeholder: "What needs to be done?" }
|
|
|
|
|
|
button "Add" { click: todos.push(newTodo), variant: "primary" }
|
2026-02-25 00:06:20 -08:00
|
|
|
|
]
|
2026-02-26 16:46:06 -08:00
|
|
|
|
]
|
2026-02-25 00:06:20 -08:00
|
|
|
|
|
2026-02-26 16:46:06 -08:00
|
|
|
|
-- Todo list
|
|
|
|
|
|
Card { title: "Todo List", subtitle: "click × to remove" } [
|
|
|
|
|
|
each todo in todos ->
|
2026-02-25 00:06:20 -08:00
|
|
|
|
row [
|
2026-02-26 16:46:06 -08:00
|
|
|
|
text "•"
|
|
|
|
|
|
text todo
|
|
|
|
|
|
button "×" { click: todos.remove(_idx), variant: "ghost" }
|
2026-02-25 00:06:20 -08:00
|
|
|
|
]
|
|
|
|
|
|
]
|
2026-02-26 16:46:06 -08:00
|
|
|
|
|
|
|
|
|
|
-- Footer
|
|
|
|
|
|
row [
|
|
|
|
|
|
Badge { label: "ITEMS", variant: "info" }
|
|
|
|
|
|
button "Clear All" { click: todos = [], variant: "ghost" }
|
|
|
|
|
|
]
|
|
|
|
|
|
]
|