button.ts — astro Source File

Source Code

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

const sizes = ['small', 'medium', 'large'] as const;
const styles = ['ghost', 'outline', 'purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;
const borderRadii = ['normal', 'rounded'] as const;

type ButtonSize = (typeof sizes)[number];
type ButtonStyle = (typeof styles)[number];
type ButtonBorderRadius = (typeof borderRadii)[number];

export class DevToolbarButton extends HTMLElement {
	_size: ButtonSize = 'small';
	_buttonStyle: ButtonStyle = 'purple';
	_buttonBorderRadius: ButtonBorderRadius = 'normal';

	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 buttonStyle() {
		return this._buttonStyle;
	}

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

	get buttonBorderRadius() {
		return this._buttonBorderRadius;
	}

	set buttonBorderRadius(value) {
		if (!borderRadii.includes(value)) {
			settings.logger.error(
				`Invalid border-radius: ${value}, expected one of ${borderRadii.join(', ')}, got ${value}.`,
			);
			return;
		}
		this._buttonBorderRadius = value;
		this.updateStyle();
	}

// ... (120 more lines)