# Composed patterns, the long samples
> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/samples and patterns.md. Do not edit: change the source and run the generator.
The sections of `../patterns.md` that are too long to keep in the npm package (markup, script or module header), by id.
## unsaved-settings
```html
```
Script (the gallery runs it after the markup is on the page, in the full-page view and in the inline views alike: `mount(root)` gets the element that holds the markup, works only inside it, and returns `{ destroy() }` (call it when the markup is removed, so its listeners go); its imports assume `plainkit/` is a copy of `dist`):
```js
// The unsaved-settings pattern, made live: the save bar appears when a field differs from what was last saved, Save keeps the values
// and hides it, Discard puts the saved values back. mount(root) works on this sample's own DOM and returns { destroy() }.
import { createLogger } from './plainkit/js/log.js';
const log = createLogger('pattern:unsaved-settings');
const FIELDS = 'pk-input, pk-select, pk-switch, pk-range';
// The value a field holds, in the shape its element commits it.
const read = f => (f.localName === 'pk-switch' ? f.checked : f.value);
const write = (f, v) => { if (f.localName === 'pk-switch') f.checked = v; else f.value = v; };
export default function mount(root) {
const ac = new AbortController();
const form = root.querySelector('form');
const bar = root.querySelector('[data-bar]');
const saved = root.querySelector('[data-saved]');
if (!form || !bar) { log.warn('the unsaved-settings sample needs a form and a [data-bar]', { root }); return { destroy() {} }; }
const fields = [...form.querySelectorAll(FIELDS)];
let base = new Map();
const snapshot = () => { base = new Map(fields.map(f => [f, read(f)])); };
const dirty = () => fields.some(f => read(f) !== base.get(f));
const paint = () => { bar.hidden = !dirty(); };
// Elements upgrade on load: take the saved values once every field element is defined.
Promise.all([...new Set(fields.map(f => f.localName))].map(t => customElements.whenDefined(t))).then(() => {
if (ac.signal.aborted) return;
snapshot(); paint();
});
bar.hidden = true;
const onChange = () => { if (saved) saved.hidden = true; paint(); };
for (const type of ['input', 'change', 'pk-change', 'pk-range']) form.addEventListener(type, onChange, { signal: ac.signal });
root.addEventListener('click', e => {
if (e.target.closest?.('[data-save]')) { snapshot(); paint(); if (saved) saved.hidden = false; }
else if (e.target.closest?.('[data-discard]')) { for (const [f, v] of base) write(f, v); paint(); }
}, { signal: ac.signal });
return { destroy() { ac.abort(); } };
}
```
## notifications
```html
Notifications Item saved.Two items need a price.Save itemArchive itemExport
```
Script (the gallery runs it after the markup is on the page, in the full-page view and in the inline views alike: `mount(root)` gets the element that holds the markup, works only inside it, and returns `{ destroy() }` (call it when the markup is removed, so its listeners go); its imports assume `plainkit/` is a copy of `dist`):
```js
// The notifications pattern, made live: each button raises a toast, the bell counts what was raised and clears when it is pressed.
// mount(root) works on this sample's own DOM (root) and returns { destroy() }; the toasts it raised are removed by destroy().
import { createLogger } from './plainkit/js/log.js';
const log = createLogger('pattern:notifications');
export default function mount(root) {
const ac = new AbortController();
const raised = new Set();
const badge = root.querySelector('[data-unread]');
let unread = Number(badge?.getAttribute('count')) || 0;
if (!badge || !root.querySelector('[data-bell]')) log.warn('the notifications sample needs [data-bell] and [data-unread]', { root });
const paint = () => { if (!badge) return; badge.hidden = unread === 0; badge.setAttribute('count', String(unread)); };
// PkToast is defined by the toast stack in the sample: nothing can be shown before it has loaded.
const toast = (message, options) => {
const PkToast = globalThis.PkToast;
if (!PkToast) { log.warn('PkToast is not defined yet: the toast stack has not loaded', { message }); return; }
const t = PkToast.show(message, options);
raised.add(t);
t.addEventListener('pk-dismiss', () => raised.delete(t), { once: true, signal: ac.signal });
unread += 1; paint();
};
const say = {
saved: () => toast('Item saved.', { kind: 'success' }),
archived: () => toast('Item archived.', { action: { label: 'Undo', onClick: () => toast('Archive undone.') } }),
failed: () => toast('The export failed.', { kind: 'danger', action: { label: 'Retry', onClick: () => toast('Export ready.', { kind: 'success' }) } }),
};
root.addEventListener('click', e => {
const b = e.target.closest?.('[data-toast]');
if (b) { const run = say[b.dataset.toast]; if (run) run(); else log.warn(`data-toast="${b.dataset.toast}" is not one of ${Object.keys(say).join(', ')}`, { button: b }); return; }
if (e.target.closest?.('[data-bell]')) { unread = 0; paint(); }
}, { signal: ac.signal });
return { destroy() { ac.abort(); for (const t of raised) t.remove(); raised.clear(); } };
}
```
## search-results
```html
SearchCtrlKProducts (2)Orders (1)Customers (0)
```
Script (the gallery runs it after the markup is on the page, in the full-page view and in the inline views alike: `mount(root)` gets the element that holds the markup, works only inside it, and returns `{ destroy() }` (call it when the markup is removed, so its listeners go); its imports assume `plainkit/` is a copy of `dist`):
```js
// The search-results pattern, made live: typing filters the rows of every group, marks the match, renumbers the rows, hides a group with no
// match and shows an empty state when nothing is left. Ctrl+K (Cmd+K) focuses the field; ArrowDown moves into the results.
// mount(root) works on this sample's own DOM and returns { destroy() }; the one listener outside it (the shortcut on the document) is removed there.
import { createLogger } from './plainkit/js/log.js';
import { isPaletteShortcut } from './plainkit/js/palette-logic.js';
const log = createLogger('pattern:search-results');
export default function mount(root) {
const ac = new AbortController();
const query = root.querySelector('[data-query]');
const groups = [...root.querySelectorAll('[data-group]')];
const empty = root.querySelector('[data-empty]');
if (!query || !groups.length) { log.warn('the search-results sample needs a [data-query] and [data-group] blocks', { root }); return { destroy() {} }; }
// Each row's plain text, taken once: the marks are drawn from it, so a new query never reads text a previous one changed.
const rows = groups.map(g => [...g.querySelectorAll('pk-list-group > button')].map(row => {
const label = row.querySelector('[data-label]');
if (!label) log.warn('a result row has no [data-label]', { row });
return { row, label, n: row.querySelector('[data-n]'), text: label?.textContent ?? '' };
}));
const draw = (label, text, needle) => {
const at = needle ? text.toLowerCase().indexOf(needle) : -1;
if (at < 0) { label.textContent = text; return; }
const mark = document.createElement('mark');
mark.textContent = text.slice(at, at + needle.length);
label.replaceChildren(text.slice(0, at), mark, text.slice(at + needle.length));
};
const filter = value => {
const needle = String(value ?? '').trim().toLowerCase();
let total = 0;
groups.forEach((g, gi) => {
let shown = 0;
for (const r of rows[gi]) {
const hit = r.label && (needle === '' || r.text.toLowerCase().includes(needle));
r.row.hidden = !hit;
if (!hit) continue;
shown += 1;
draw(r.label, r.text, needle);
if (r.n) r.n.textContent = String(shown);
}
g.hidden = shown === 0;
const count = g.querySelector('[data-count]');
if (count) count.textContent = `(${shown})`;
total += shown;
});
if (empty) empty.hidden = total > 0;
};
filter(query.getAttribute('value'));
query.addEventListener('input', () => filter(query.value), { signal: ac.signal });
query.addEventListener('keydown', e => {
if (e.key !== 'ArrowDown') return;
const first = root.querySelector('[data-group]:not([hidden]) pk-list-group > button:not([hidden])');
if (first) { e.preventDefault(); first.focus(); }
}, { signal: ac.signal });
document.addEventListener('keydown', e => {
if (isPaletteShortcut(e)) { e.preventDefault(); query.focus(); }
}, { signal: ac.signal });
return { destroy() { ac.abort(); } };
}
```
## onboarding
```html
2 of 4 done
Connect a channel Start
Invite a teammate
```
Script (the gallery runs it after the markup is on the page, in the full-page view and in the inline views alike: `mount(root)` gets the element that holds the markup, works only inside it, and returns `{ destroy() }` (call it when the markup is removed, so its listeners go); its imports assume `plainkit/` is a copy of `dist`):
```js
// The onboarding pattern, made live: Start completes the current step, the stepper moves on, and the progress bar, the "n of m done" text
// and the list of next steps follow it. After the last step the list says the setup is finished.
// mount(root) works on this sample's own DOM and returns { destroy() }.
import { createLogger } from './plainkit/js/log.js';
const log = createLogger('pattern:onboarding');
export default function mount(root) {
const ac = new AbortController();
const stepper = root.querySelector('[data-stepper]');
const progress = root.querySelector('[data-progress]');
const count = root.querySelector('[data-done]');
const list = root.querySelector('[data-next]');
if (!stepper || !progress || !list) { log.warn('the onboarding sample needs [data-stepper], [data-progress] and [data-next]', { root }); return { destroy() {} }; }
const titles = [...stepper.querySelectorAll('pk-step')].map(s => s.getAttribute('heading') ?? '');
let done = Number(stepper.getAttribute('current')) || 0; // steps completed: the stepper's current step is the first one not done
const row = (text, { start = false, muted = false } = {}) => {
const d = document.createElement('div');
if (muted) d.className = 'muted';
d.append(text);
if (start) {
const b = document.createElement('pk-button');
b.setAttribute('size', 'mini'); b.setAttribute('data-start', ''); b.textContent = 'Start';
d.append(' ', b);
}
return d;
};
const paint = () => {
progress.setAttribute('value', String(Math.round((done / titles.length) * 100)));
if (count) count.textContent = `${done} of ${titles.length} done`;
list.replaceChildren(...(done >= titles.length ? [row('All steps are done.')] : [row(titles[done], { start: true }), ...titles.slice(done + 1).map(t => row(t, { muted: true }))]));
};
root.addEventListener('click', e => {
if (!e.target.closest?.('[data-start]') || done >= titles.length) return;
done += 1;
// The stepper has no step after the last one, so it stays on it; the rest of the sample shows that everything is done.
// The stepper is linear (its next() will not skip ahead) and this sample is the host, so it sets the step it now shows.
if (done < titles.length) stepper.current = done;
paint();
}, { signal: ac.signal });
// A step the reader picks in the stepper (when it is made clickable) moves the checklist with it.
stepper.addEventListener('pk-step-change', e => { done = e.detail.index; paint(); }, { signal: ac.signal });
paint();
return { destroy() { ac.abort(); } };
}
```
## data-display
```html