audit-list-window.ts — astro Source File

Source Code

import type { Icon } from '../../../ui-library/icons.js';
import type { Audit } from '../index.js';
import { getAuditCategory, rulesCategories } from '../rules/index.js';

export function createRoundedBadge(icon: Icon) {
	const badge = document.createElement('astro-dev-toolbar-badge');

	badge.shadowRoot.innerHTML += `
		<style>
			:host>div {
				padding: 12px 8px;
				font-size: 14px;
				display: flex;
				gap: 4px;
			}
		</style>
	`;

	badge.innerHTML = `<astro-dev-toolbar-icon icon="${icon}"></astro-dev-toolbar-icon>0`;

	return {
		badge,
		updateCount: (count: number) => {
			if (count === 0) {
				badge.badgeStyle = 'green';
			} else {
				badge.badgeStyle = 'purple';
			}

			badge.innerHTML = `<astro-dev-toolbar-icon icon="${icon}"></astro-dev-toolbar-icon>${count}`;
		},
	};
}

export class DevToolbarAuditListWindow extends HTMLElement {
	_audits: Audit[] = [];
	shadowRoot: ShadowRoot;
	badges: {
		[key: string]: {
			badge: HTMLElement;
			updateCount: (count: number) => void;
		};
	} = {};

	get audits() {
		return this._audits;
	}

	set audits(value) {
		this._audits = value;
		this.render();
	}

	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: 'open' });

		this.shadowRoot.innerHTML = `<style>
			:host {
				box-sizing: border-box;
// ... (353 more lines)