card.ts — astro Source File

Source Code

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

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

type CardStyle = (typeof styles)[number];

export class DevToolbarCard extends HTMLElement {
	link?: string | undefined | null;
	clickAction?: () => void | (() => Promise<void>);
	shadowRoot: ShadowRoot;

	_cardStyle: CardStyle = 'purple';

	get cardStyle() {
		return this._cardStyle;
	}

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

	static observedAttributes = ['card-style'];

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

		this.link = this.getAttribute('link');
	}

	attributeChangedCallback() {
		if (this.hasAttribute('card-style'))
			this.cardStyle = this.getAttribute('card-style') as CardStyle;

		this.updateStyle();
	}

	updateStyle() {
		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');

		if (style) {
			style.innerHTML = `
				:host {
					--hover-background: var(--${this.cardStyle}-hover-background);
					--hover-border: var(--${this.cardStyle}-hover-border);
				}
			`;
		}
	}

	connectedCallback() {
		const element = this.link ? 'a' : this.clickAction ? 'button' : 'div';

// ... (74 more lines)