33 lines
1.4 KiB
JavaScript
33 lines
1.4 KiB
JavaScript
|
function esc(str) {
|
||
|
|
const d = document.createElement('div');
|
||
|
|
d.textContent = String(str ?? '');
|
||
|
|
return d.innerHTML;
|
||
|
|
}
|
||
|
|
|
||
|
|
const EMPTY_ICON_SVG = `
|
||
|
|
<svg class="app-empty-state-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
|
|
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
||
|
|
<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
|
||
|
|
</svg>
|
||
|
|
`;
|
||
|
|
|
||
|
|
export function renderEmptyState(options = {}) {
|
||
|
|
const message = String(options.message || '').trim();
|
||
|
|
if (!message) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
|
||
|
|
const hint = String(options.hint || '').trim();
|
||
|
|
const sizeRaw = String(options.size || 'compact').trim().toLowerCase();
|
||
|
|
const size = ['default', 'compact', 'small'].includes(sizeRaw) ? sizeRaw : 'compact';
|
||
|
|
const alignRaw = String(options.align || 'center').trim().toLowerCase();
|
||
|
|
const align = ['center', 'left'].includes(alignRaw) ? alignRaw : 'center';
|
||
|
|
const icon = options.icon === true;
|
||
|
|
|
||
|
|
return `<div class="app-empty-state" data-size="${esc(size)}" data-align="${esc(align)}">
|
||
|
|
${icon ? EMPTY_ICON_SVG : ''}
|
||
|
|
<p class="app-empty-state-message">${esc(message)}</p>
|
||
|
|
${hint ? `<small class="app-empty-state-hint">${esc(hint)}</small>` : ''}
|
||
|
|
</div>`;
|
||
|
|
}
|