CheckList

import ui/theme.qwe use theme_cssuse ui/check_list.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view CheckListDemo() =    <div.demo-stack>        <div.demo-row style="align-items: flex-start; gap: 40px">            <CheckList id="check-list-demo-plan" items={[                { text: "Unlimited projects", done: true },                { text: "Priority support", done: true },                { text: "Phone support", done: false },                { text: "Single sign-on", done: false },            ]}/>            <CheckList id="check-list-demo-steps" undone="empty" strike={true} summary={true} items={[                { text: "Create an account", done: true },                { text: "Verify your email", done: true },                { text: "Add a payment method", done: false },            ]}/>            <CheckList size="sm" items={[{ text: "Small", done: true }, { text: "Also small", done: false }]}/>        </div>    </div>

// CheckList: items shown done or not, with a tick or a cross: what a plan includes,// which steps are finished. Read only (for checkboxes, see ChecklistInput).////   <CheckList items={[{ text: "Unlimited projects", done: true }, { text: "Phone support", done: false }]}/>//   <CheckList items={steps} undone="empty" strike={true} summary={true}/>//// items: { text, done } each (text may be HTML). undone: "cross" (default: a cross in// the danger colour) or "empty" (an empty circle, muted). strike: done items are// struck through. summary: a line above, "2 of 3 done". size: "sm", "md" (default) or// "lg". Each item says "Done" or "Not done" to screen readers before its text.// id: the list's id.import ui/theme.qwe use ui_clslet check_list_css = css`.ui-checklist { margin: 0; padding: 0; list-style: none; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }.ui-checklist li { display: flex; align-items: flex-start; gap: 10px; margin: .4em 0; overflow-wrap: anywhere; }.ui-checklist-icon { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; margin-top: .08em;  border-radius: 50%; }.ui-checklist-icon svg { width: .8em; height: .8em; }.ui-checklist-done .ui-checklist-icon { background: var(--ui-success-soft); color: var(--ui-success); }.ui-checklist-todo .ui-checklist-icon { background: var(--ui-danger-soft); color: var(--ui-danger); }.ui-checklist-empty .ui-checklist-todo .ui-checklist-icon { background: none; border: 1.5px solid var(--ui-strong); color: transparent; }.ui-checklist-empty .ui-checklist-todo { color: var(--ui-muted); }.ui-checklist-strike .ui-checklist-done .ui-checklist-text { text-decoration: line-through; color: var(--ui-muted); }.ui-checklist-summary { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ui-muted); }.ui-checklist-sm { font-size: 13px; }.ui-checklist-lg { font-size: 17px; }`view CheckList(items: list = [], undone: str = "cross", strike: bool = false, summary: bool = false, size: str = "md",               id: str? = null, class: str? = null) {    style global check_list_css    let done = items | filter((it) => it.done == true) | len    let body = <ul class={ui_cls(["ui-checklist", undone == "empty" && "ui-checklist-empty", strike && "ui-checklist-strike",                                  size != "md" && `ui-checklist-${size}`, class])} id={id}>        {for it in items => <li class={it.done == true ? "ui-checklist-done" : "ui-checklist-todo"}>            <span.ui-checklist-icon aria-hidden="true">                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">                    {it.done == true ? <path d="M3.5 8.5l3 3 6-7"/> : <path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/>}                </svg>            </span>            <span.ui-sr>{it.done == true ? "Done: " : "Not done: "}</span>            <span.ui-checklist-text>{it.text}</span>        </li>}    </ul>    summary        ? <div><p.ui-checklist-summary>{done} of {len(items)} done</p>{body}</div>        : body}