badge.ts — astro Source File

Source Code

import { settings } from '../settings.js';

const sizes = ['small', 'large'] as const;
const styles = ['purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;

type BadgeSize = (typeof sizes)[number];
type BadgeStyle = (typeof styles)[number];

export class DevToolbarBadge extends HTMLElement {
	_size: BadgeSize = 'small';
	_badgeStyle: BadgeStyle = 'purple';

	get size() {
		return this._size;
	}

	set size(value) {
		if (!sizes.includes(value)) {
			settings.logger.error(
				`Invalid size: ${value}, expected one of ${sizes.join(', ')}, got ${value}.`,
			);
			return;
		}
		this._size = value;
		this.updateStyle();
	}

	get badgeStyle() {
		return this._badgeStyle;
	}

	set badgeStyle(value) {
		if (!styles.includes(value)) {
			settings.logger.error(
				`Invalid style: ${value}, expected one of ${styles.join(', ')}, got ${value}.`,
			);
			return;
		}
		this._badgeStyle = value;
		this.updateStyle();
	}

	shadowRoot: ShadowRoot;

	static observedAttributes = ['badge-style', 'size'];

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

		this.shadowRoot.innerHTML = `
			<style>
				.badge {
					box-sizing: border-box;
					border-radius: 4px;
					border: 1px solid transparent;
					padding: 8px;
					font-size: 12px;
					color: var(--text-color);
					height: var(--size);
// ... (61 more lines)