Cluster

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

view ClusterDemo() =    <div.demo-stack>        <Cluster gap="sm" class="cluster-demo-tags">            {for t in ["Quillo", "layout", "flex", "wrapping", "tags", "chips", "keywords", "and", "more", "of", "them",                       "until", "the", "row", "runs", "out", "of", "room", "and", "goes", "on"] => <Tag>{t}</Tag>}        </Cluster>        <Cluster justify="end" class="cluster-demo-actions">            <Button variant="ghost">Cancel</Button>            <Button>Save</Button>        </Cluster>        <Cluster justify="between" align="baseline" class="cluster-demo-title">            <h3 style="margin: 0">Members</h3>            <span style="color: var(--ui-muted); font-size: 13px">12 people</span>        </Cluster>    </div>

// Cluster: things in a row that goes on to the next line when it runs out of room:// tags, buttons, a line of facts. The gap holds between lines too.////   <Cluster> {for t in tags => <Tag>{t}</Tag>} </Cluster>//   <Cluster gap="sm" justify="end"> <Button variant="ghost">Cancel</Button> <Button>Save</Button> </Cluster>//   <Cluster justify="between" align="baseline"> <h2>Title</h2> <span>12 items</span> </Cluster>//// gap: pixels (12, the default) or "none", "xs" (4), "sm" (8), "md" (12), "lg" (20), "xl" (32).// align (down the line): "center" (default), "start", "end", "stretch" or "baseline".// justify (along it): "start" (default), "center", "end", "between", "around" or "evenly".// wrap: false keeps everything on one line, each item shrinking (true).import ui/theme.qwe use ui_clslet cluster_css = css`.ui-cluster { display: flex; flex-wrap: wrap; gap: var(--ui-cluster-gap, 12px); min-width: 0; }.ui-cluster-nowrap { flex-wrap: nowrap; }.ui-cluster-nowrap > * { min-width: 0; }`fn cluster_gap(gap) -> str =    match gap {        int as n => `${n}px`        float as n => `${n}px`        "none" => "0"        "xs" => "4px"        "sm" => "8px"        "lg" => "20px"        "xl" => "32px"        _ => "12px"    }fn cluster_flex(v: str) -> str =    match v {        "start" => "flex-start"        "end" => "flex-end"        "between" => "space-between"        "around" => "space-around"        "evenly" => "space-evenly"        _ => v    }view Cluster(gap = 12, align: str = "center", justify: str = "start", wrap: bool = true, class: str? = null, children) {    style global cluster_css    <div class={ui_cls(["ui-cluster", !wrap && "ui-cluster-nowrap", class])}         style={`--ui-cluster-gap: ${cluster_gap(gap)}; align-items: ${cluster_flex(align)}; justify-content: ${cluster_flex(justify)}`}>        {children}    </div>}