PrintButton

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

component PrintButtonDemoLive() {    state prints = 0    <div.demo-row>        <PrintButton target="print-demo-receipt" label="Print the receipt" variant="solid" on_print={() => { prints += 1 }}/>        <span.demo-note>{prints == 0 ? "Not printed yet." : `Printed ${prints} ${prints == 1 ? "time" : "times"}.`}</span>    </div>}view PrintButtonDemo() =    <div.demo-stack>        <div id="print-demo-receipt" style="max-width: 320px; padding: 16px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius)">            <strong>Receipt #1042</strong>            <p style="margin: 6px 0 0">2 × Coffee, 1 × Croissant — 9.40</p>        </div>        <div.demo-row>            <PrintButtonDemoLive/>            <PrintButton/>            <PrintButton label="Print" variant="ghost" size="sm"/>        </div>        <p.demo-note>The first prints only the receipt above; the others, the whole page.</p>    </div>

// PrintButton: prints the page, or one part of it: with `target`, the id of an// element, only that element goes on paper (the rest of the page is hidden while the// print dialog is open, then shown again). The button itself never prints.////   <PrintButton/>//   <PrintButton target="invoice" label="Print invoice" variant="solid"/>//// target: the id of the element to print; left out, the whole page prints.// label ("Print"): the button's text. variant: "outline" (default), "soft", "ghost" or// "solid"; size: "sm", "md" or "lg". It is styled as a Button when button_css is on// the page. on_print(): inside one of your components, called when printing starts.import ui/theme.qwe use ui_clslet print_button_css = css`.ui-print-button svg { flex: none; width: 16px; height: 16px; }@media print {  .ui-print-button { display: none !important; }  .ui-print-button-printing body * { visibility: hidden; }  .ui-print-button-printing .ui-print-button-target, .ui-print-button-printing .ui-print-button-target * { visibility: visible; }  .ui-print-button-printing .ui-print-button-target { position: absolute; left: 0; top: 0; width: 100%; margin: 0; }}`component PrintButton(target: str? = null, label: str = "Print", variant: str = "outline", size: str = "md",                      on_print = null, class: str? = null) {    style global print_button_css    state printing = null    let done = (_e = null) => {        if printing != null {            printing.classList.remove("ui-print-button-target")            js("document.documentElement").classList.remove("ui-print-button-printing")            printing = null        }    }    <button type="button"            class={ui_cls(["ui-btn", `ui-btn-${variant}`, size != "md" && `ui-btn-${size}`, "ui-print-button", class])}            aria-haspopup="dialog"            @mount={(_el) => {                js("window.addEventListener", "afterprint", done)                () => js("window.removeEventListener", "afterprint", done)            }}            @click={() => {                let el = target != null ? js("document.getElementById", target) : null                if el != null {                    el.classList.add("ui-print-button-target")                    js("document.documentElement").classList.add("ui-print-button-printing")                    printing = el                }                on_print && on_print()                js("window.print")            }}>        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"             stroke-linejoin="round" aria-hidden="true">            <path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/>        </svg>        <span>{label}</span>    </button>}