56 lines
2.4 KiB
JavaScript
56 lines
2.4 KiB
JavaScript
const STATUS_LABELS = {
|
|
draft: 'Draft', assigned: 'Assigned', scheduled: 'Scheduled',
|
|
in_progress: 'In Progress', pending_review: 'Pending Review', closed: 'Closed',
|
|
};
|
|
const PRIORITY_LABELS = { low: 'Low', normal: 'Normal', high: 'High', urgent: 'Urgent' };
|
|
|
|
const CSS = `
|
|
:host { display: inline-flex; }
|
|
.badge {
|
|
display: inline-flex; align-items: center; gap: .35rem;
|
|
padding: .2rem .6rem; border-radius: 999px;
|
|
font-size: .7rem; font-weight: 700; text-transform: uppercase;
|
|
letter-spacing: .04em; white-space: nowrap;
|
|
}
|
|
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
|
.s-draft { background:var(--status-draft-bg); color:var(--status-draft); }
|
|
.s-assigned { background:var(--status-assigned-bg); color:var(--status-assigned); }
|
|
.s-scheduled { background:var(--status-scheduled-bg); color:var(--status-scheduled); }
|
|
.s-in_progress { background:var(--status-in_progress-bg); color:var(--status-in_progress); }
|
|
.s-pending_review { background:var(--status-pending_review-bg); color:var(--status-pending_review); }
|
|
.s-closed { background:var(--status-closed-bg); color:var(--status-closed); }
|
|
.p-low { background:#F1F5F9; color:var(--priority-low); }
|
|
.p-normal { background:#E0F2FE; color:var(--priority-normal); }
|
|
.p-high { background:#FFF7ED; color:var(--priority-high); }
|
|
.p-urgent { background:#FEF2F2; color:var(--priority-urgent); }
|
|
`;
|
|
|
|
class UiBadge extends HTMLElement {
|
|
static get observedAttributes() { return ['type', 'value']; }
|
|
|
|
connectedCallback() {
|
|
if (!this.shadowRoot) {
|
|
this.attachShadow({ mode: 'open' });
|
|
this.shadowRoot.innerHTML = `<style>${CSS}</style><span class="badge"></span>`;
|
|
}
|
|
this.#update();
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
if (this.shadowRoot) this.#update();
|
|
}
|
|
|
|
#update() {
|
|
const type = this.getAttribute('type') || 'status';
|
|
const value = this.getAttribute('value') || '';
|
|
const label = type === 'priority'
|
|
? (PRIORITY_LABELS[value] || value)
|
|
: (STATUS_LABELS[value] || value.replace('_', ' '));
|
|
const span = this.shadowRoot.querySelector('.badge');
|
|
span.className = `badge ${type === 'priority' ? 'p' : 's'}-${value}`;
|
|
span.innerHTML = `<span class="dot" style="background:currentColor"></span>${label}`;
|
|
}
|
|
}
|
|
|
|
customElements.define('ui-badge', UiBadge);
|