36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
class UiEmpty extends HTMLElement {
|
|
connectedCallback() {
|
|
const icon = this.getAttribute('icon') || 'inbox';
|
|
const heading = this.getAttribute('heading') || 'Nothing here yet';
|
|
const body = this.getAttribute('body') || '';
|
|
|
|
this.attachShadow({ mode: 'open' });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display: flex; justify-content: center; }
|
|
.wrap {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
gap: .75rem; padding: 3rem 2rem; text-align: center; max-width: 360px;
|
|
}
|
|
.icon-wrap {
|
|
width: 64px; height: 64px; border-radius: 50%;
|
|
background: var(--surface-2); display: flex; align-items: center;
|
|
justify-content: center; color: var(--text-muted);
|
|
}
|
|
h3 { font-size: 1rem; font-weight: 600; color: var(--text); }
|
|
p { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }
|
|
::slotted(*) { margin-top: .5rem; }
|
|
</style>
|
|
<div class="wrap">
|
|
<div class="icon-wrap">
|
|
<i data-lucide="${icon}" style="width:28px;height:28px"></i>
|
|
</div>
|
|
<h3>${heading}</h3>
|
|
${body ? `<p>${body}</p>` : ''}
|
|
<slot></slot>
|
|
</div>`;
|
|
if (window.lucide) lucide.createIcons({ root: this.shadowRoot });
|
|
}
|
|
}
|
|
customElements.define('ui-empty', UiEmpty);
|