@vanilla-bean/components 1.1.1 → 2.0.1

package/components/Select/Select.js

@@ -1,13 +1,6 @@
 import { Elem } from '../../Elem';
 import { Input } from '../Input';
 
-const defaultOptions = {
-	tag: 'select',
-	get priorityOptions() {
-		return new Set(['textContent', 'content', 'appendTo', 'prependTo', 'options']);
-	},
-};
-
 /**
  * Select dropdown component extending Input with dynamic option management.
  *
@@ -21,33 +14,34 @@ const defaultOptions = {
  * @returns {Select} Select component instance
  */
 class Select extends Input {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super({ ...defaultOptions, ...options }, ...children);
-	}
+	static schema = {
+		tag: { default: 'select' },
+		autocomplete: { default: 'off' },
+		options: {
+			set(value) {
+				this.empty();
 
-	static handlers = {
-		options(value) {
-			this.empty();
+				if (!value) return;
 
-			if (!value) return;
-
-			for (const option of value) {
-				// Optgroup: { label: 'Group', options: [...] }
-				if (typeof option === 'object' && Array.isArray(option.options)) {
-					const group = document.createElement('optgroup');
-					if (option.label) group.label = option.label;
-					for (const o of option.options) {
-						group.append(new Elem({ tag: 'option', ...(typeof o === 'object' ? o : { label: o, value: o }) }).elem);
+				for (const option of value) {
+					// Optgroup: { label: 'Group', options: [...] }
+					if (typeof option === 'object' && Array.isArray(option.options)) {
+						const group = document.createElement('optgroup');
+						if (option.label) group.label = option.label;
+						for (const o of option.options) {
+							group.append(new Elem({ tag: 'option', ...(typeof o === 'object' ? o : { label: o, value: o }) }).elem);
+						}
+						this.elem.append(group);
+					} else {
+						this.append(
+							new Elem({ tag: 'option', ...(typeof option === 'object' ? option : { label: option, value: option }) }),
+						);
 					}
-					this.elem.append(group);
-				} else {
-					this.append(
-						new Elem({ tag: 'option', ...(typeof option === 'object' ? option : { label: option, value: option }) }),
-					);
 				}
-			}
+
+				// Re-apply the current value - option elements may not have existed when value was processed
+				if (this.options.value !== undefined) this.elem.value = this.options.value;
+			},
 		},
 	};
 

package/components/Table/Table.js

@@ -4,8 +4,6 @@ import { Elem } from '../../Elem';
 import { Component } from '../../Component';
 import { Icon } from '../Icon';
 
-const defaultOptions = { tag: 'table' };
-
 /**
  * Data table component with sorting, column configuration, and footer support.
  *
@@ -23,37 +21,55 @@ const defaultOptions = { tag: 'table' };
  * @returns {Table} Table component instance
  */
 class Table extends Component {
-	constructor(options = {}, ...children) {
-		super(
-			{
-				...defaultOptions,
-				onSort: (property, direction) => {
-					this.options.data = this.options.data.sort(orderBy({ property, direction }));
-				},
-				...options,
-				columns: (options.columns || []).map(column =>
-					typeof column === 'string' ? { key: column, content: capitalize(column) } : column,
-				),
-				footer: options.footer?.map(column => (typeof column === 'string' ? { content: capitalize(column) } : column)),
+	static schema = {
+		tag: { default: 'table' },
+		sortDirection: {
+			enum: ['asc', 'desc'],
+			set(value) {
+				if (!this.rendered) return;
+				if (this.options.onSort) this.options.onSort(this.options.sortProperty, value);
+				else
+					this.options.data = this.options.data.sort(
+						orderBy({ property: this.options.sortProperty, direction: value }),
+					);
 			},
-			...children,
-		);
-	}
-
-	static handlers = {
-		sortDirection(value) {
-			if (this.rendered) this.options.onSort(this.options.sortProperty, value);
 		},
-		data() {
-			this._renderTable();
+		data: {
+			set() {
+				this._renderTable();
+			},
 		},
-		selection() {
-			this._renderTable();
+		selection: {
+			set() {
+				this._renderTable();
+			},
 		},
+		columns: {
+			set() {
+				if (this.rendered) this._renderTable();
+			},
+		},
+		footer: {
+			set() {
+				if (this.rendered) this._renderTable();
+			},
+		},
+		// Read from this.options at sort time; sortProperty changes are always followed
+		// by a sortDirection change, which drives the re-render
+		sortProperty: {},
+		onSort: {},
 	};
 
 	_renderTable() {
 		const value = this.options.data;
+		// Columns and footer accept string shorthand - normalized at read time so
+		// construction and reactive assignment take the same path
+		const columns = (this.options.columns || []).map(column =>
+			typeof column === 'string' ? { key: column, content: capitalize(column) } : column,
+		);
+		const footer = this.options.footer?.map(column =>
+			typeof column === 'string' ? { content: capitalize(column) } : column,
+		);
 
 		this._sortSubscribers?.forEach(sub => sub.destroy?.());
 		this._sortSubscribers = null;
@@ -75,19 +91,22 @@ class Table extends Component {
 		this.thead.append(
 			new Component(
 				{ tag: 'tr' },
-				this.options.columns.map(column => {
-					const th = new Component({ tag: 'th', ...column, scope: 'col' });
+				columns.map(column => {
+					// key/sort/dataColumn are column config for the Table itself - keep them off the th elem
+					const { key, sort, ...columnOptions } = column;
+					delete columnOptions.dataColumn;
+					const th = new Component({ tag: 'th', ...columnOptions, scope: 'col' });
 
-					if (column.sort) {
+					if (sort) {
 						const iconSub = this.options.subscriber('sortDirection', () => {
-							if (this.options.sortProperty !== column.key) return 'sort';
+							if (this.options.sortProperty !== key) return 'sort';
 
 							return this.options.sortDirection === 'asc' ? 'sort-down' : 'sort-up';
 						});
 						const styleSub = this.options.subscriber('sortDirection', () => ({
 							display: 'inline',
 							marginLeft: '6px',
-							...(this.options.sortProperty !== column.key
+							...(this.options.sortProperty !== key
 								? { color: theme.colors.dark(theme.colors.gray) }
 								: { color: theme.colors.white }),
 						}));
@@ -96,7 +115,7 @@ class Table extends Component {
 
 						const updateAriaSort = () => {
 							let ariaSort = 'none';
-							if (this.options.sortProperty === column.key) {
+							if (this.options.sortProperty === key) {
 								ariaSort = this.options.sortDirection === 'asc' ? 'ascending' : 'descending';
 							}
 							th.elem.setAttribute('aria-sort', ariaSort);
@@ -121,12 +140,12 @@ class Table extends Component {
 						});
 
 						th.onPointerPress(() => {
-							if (this.options.sortProperty === column.key) {
+							if (this.options.sortProperty === key) {
 								this.options.sortDirection = this.options.sortDirection === 'asc' ? 'desc' : 'asc';
 								return;
 							}
 
-							this.options.sortProperty = column.key;
+							this.options.sortProperty = key;
 							this.options.sortDirection = 'desc';
 						});
 					}
@@ -141,7 +160,7 @@ class Table extends Component {
 				rowData =>
 					new Component(
 						{ tag: 'tr' },
-						this.options.columns.map(
+						columns.map(
 							column =>
 								new Component(
 									{
@@ -157,11 +176,11 @@ class Table extends Component {
 			),
 		);
 
-		if (this.options.footer) {
+		if (footer) {
 			this.tfoot.append(
 				new Component(
 					{ tag: 'tr' },
-					this.options.footer.map(footData => new Component({ tag: 'td', ...footData })),
+					footer.map(footData => new Component({ tag: 'td', ...footData })),
 				),
 			);
 		}

package/components/TagList/Tag.js

@@ -52,14 +52,23 @@ const StyledComponent = styled(
 	`,
 );
 
-const defaultOptions = { tag: 'li', readOnly: false };
-
 class Tag extends StyledComponent {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super({ tabindex: '0', ...defaultOptions, ...options }, ...children);
-	}
+	static schema = {
+		tag: { default: 'li' },
+		tabIndex: { default: 0 },
+		readOnly: {
+			default: false,
+			set(value) {
+				this.toggleClass('readOnly', !!value);
+			},
+		},
+		textContent: {
+			set(value) {
+				this.elem.setAttribute('data-value', value);
+				this._textSpan.elem.textContent = value;
+			},
+		},
+	};
 
 	build() {
 		this._textSpan = new Elem({ tag: 'span', appendTo: this });
@@ -72,13 +81,6 @@ class Tag extends StyledComponent {
 			});
 		}
 	}
-
-	static handlers = {
-		textContent(value) {
-			this.elem.setAttribute('data-value', value);
-			this._textSpan.elem.textContent = value;
-		},
-	};
 }
 
 export default Tag;

package/components/TagList/TagList.js

@@ -32,8 +32,6 @@ const TagListInput = styled(
 	`,
 );
 
-const defaultOptions = { readOnly: false };
-
 /**
  * Interactive tag list component with add/remove functionality and input support.
  *
@@ -47,11 +45,20 @@ const defaultOptions = { readOnly: false };
  * @returns {TagList} TagList component instance
  */
 class TagList extends StyledComponent {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super({ ...options, tag: 'ul' }, ...children);
-	}
+	static schema = {
+		tag: { default: 'ul' },
+		readOnly: {
+			default: false,
+			set(value) {
+				this.toggleClass('readOnly', !!value);
+			},
+		},
+		tags: {
+			get default() {
+				return [];
+			},
+		},
+	};
 
 	_addTag(value) {
 		value = (value || '').trim();
@@ -91,7 +98,7 @@ class TagList extends StyledComponent {
 		}
 
 		this.append([
-			...(this.options.tags || []).map(textContent => new Tag({ readOnly: this.options.readOnly, textContent })),
+			...this.options.tags.map(textContent => new Tag({ readOnly: this.options.readOnly, textContent })),
 			...(this.addTag ? [this.addTag] : []),
 		]);
 	}

package/components/Tooltip/Tooltip.js

@@ -80,8 +80,6 @@ const StyledPopover = styled(
 	`,
 );
 
-const defaultOptions = { position: 'topRight', autoOpen: false };
-
 const position_enum = Object.freeze([
 	'center',
 	'top',
@@ -108,32 +106,21 @@ const position_enum = Object.freeze([
  * @returns {Tooltip} Tooltip component instance
  */
 class Tooltip extends StyledPopover {
-	position_enum = position_enum;
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super(
-			{
-				...defaultOptions,
-				...options,
-				addClass: ['tooltip'].concat(options.addClass),
+	static schema = {
+		autoOpen: { default: false },
+		position: {
+			default: 'topRight',
+			enum: position_enum,
+			set(value) {
+				this.removeClass(...position_enum);
+				this.addClass(value);
 			},
-			...children,
-		);
-	}
-
-	static handlers = {
-		position(value) {
-			if (!position_enum.includes(value)) {
-				throw new Error(
-					`"${value}" is not a valid position. The position must be one of the following values: ${position_enum.join(', ')}`,
-				);
-			}
-
-			this.removeClass(...position_enum);
-			this.addClass(value);
 		},
 	};
+
+	static prepareOptions(options) {
+		return { ...options, addClass: ['tooltip'].concat(options.addClass) };
+	}
 }
 
 export default Tooltip;

package/components/TooltipWrapper/TooltipWrapper.js

@@ -29,61 +29,67 @@ const StyledIcon = styled(
  * @returns {TooltipWrapper} TooltipWrapper component instance
  */
 export default class TooltipWrapper extends StyledIcon {
-	static handlers = {
-		tooltip(value) {
-			if (value == null) return;
-			const tooltipOptions = typeof value === 'object' ? value : { textContent: value };
+	static schema = {
+		tooltip: {
+			set(value) {
+				this._applyTooltip(value);
+			},
+		},
+	};
 
-			if (this._tooltip) {
-				this._tooltip.setOptions(tooltipOptions);
-			} else {
-				this._tooltip = new Tooltip({
-					appendTo: this.elem,
-					...tooltipOptions,
-				});
+	_applyTooltip(value) {
+		if (value == null) return;
+		const tooltipOptions = typeof value === 'object' ? value : { textContent: value };
 
-				this.addClass('has-tooltip');
+		if (this._tooltip) {
+			this._tooltip.setOptions(tooltipOptions);
+		} else {
+			this._tooltip = new Tooltip({
+				appendTo: this.elem,
+				...tooltipOptions,
+			});
 
-				this.on({
-					targetEvent: 'pointerover',
-					callback: ({ clientX, clientY }) => {
-						this.tooltipTimeout = setTimeout(() => this._tooltip?.show({ x: clientX, y: clientY }), 700);
-					},
-				});
+			this.addClass('has-tooltip');
 
-				this.on({
-					targetEvent: 'pointerout',
-					callback: () => {
-						clearTimeout(this.tooltipTimeout);
-						if (!this.elem.contains(document.activeElement)) this._tooltip?.hide();
-					},
-				});
+			this.on({
+				targetEvent: 'pointerover',
+				callback: ({ clientX, clientY }) => {
+					this.tooltipTimeout = setTimeout(() => this._tooltip?.show({ x: clientX, y: clientY }), 700);
+				},
+			});
 
-				this.on({
-					targetEvent: 'focus',
-					callback: () => {
-						clearTimeout(this.tooltipTimeout);
-						const { left, bottom } = this.elem.getBoundingClientRect();
-						this._tooltip?.show({ x: left, y: bottom });
-					},
-				});
+			this.on({
+				targetEvent: 'pointerout',
+				callback: () => {
+					clearTimeout(this.tooltipTimeout);
+					if (!this.elem.contains(document.activeElement)) this._tooltip?.hide();
+				},
+			});
 
-				this.on({
-					targetEvent: 'blur',
-					callback: () => {
-						clearTimeout(this.tooltipTimeout);
-						this._tooltip?.hide();
-					},
-				});
+			this.on({
+				targetEvent: 'focus',
+				callback: () => {
+					clearTimeout(this.tooltipTimeout);
+					const { left, bottom } = this.elem.getBoundingClientRect();
+					this._tooltip?.show({ x: left, y: bottom });
+				},
+			});
 
-				this.replaceCleanup('tooltip', () => {
-					if (this._tooltip) {
-						this._tooltip.destroy?.();
-						this._tooltip = null;
-					}
+			this.on({
+				targetEvent: 'blur',
+				callback: () => {
 					clearTimeout(this.tooltipTimeout);
-				});
-			}
-		},
-	};
+					this._tooltip?.hide();
+				},
+			});
+
+			this.replaceCleanup('tooltip', () => {
+				if (this._tooltip) {
+					this._tooltip.destroy?.();
+					this._tooltip = null;
+				}
+				clearTimeout(this.tooltipTimeout);
+			});
+		}
+	}
 }

package/components/Whiteboard/Whiteboard.js

@@ -1,17 +1,6 @@
 import { throttle } from '../../utils/data';
 import { Component } from '../../Component';
 
-const defaultOptions = {
-	tag: 'canvas',
-	background: '#FFF',
-	color: '#000',
-	lineWidth: 3,
-	width: '200px',
-	height: '200px',
-	readOnly: false,
-	registeredEvents: new Set(['line', 'draw']),
-};
-
 /**
  * Interactive drawing canvas component with multi-touch support and line rendering.
  *
@@ -31,22 +20,52 @@ const defaultOptions = {
  * @returns {Whiteboard} Whiteboard component instance
  */
 export default class Whiteboard extends Component {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super(
-			{
-				...defaultOptions,
-				...options,
-				style: {
-					cursor: 'crosshair',
-					touchAction: 'none',
-					borderRadius: '3px',
-					...options.style,
-				},
+	static schema = {
+		tag: { default: 'canvas' },
+		width: {
+			default: '200px',
+			set(value) {
+				this.elem.width = Number.parseInt(value);
+				this.elem.style.width = value;
 			},
-			...children,
-		);
+		},
+		height: {
+			default: '200px',
+			set(value) {
+				this.elem.height = Number.parseInt(value);
+				this.elem.style.height = value;
+			},
+		},
+		background: {
+			default: '#FFF',
+			set(value) {
+				this.elem.style.background = value;
+			},
+		},
+		lines: {
+			set(value) {
+				value.forEach(line => this.drawLine(line));
+			},
+		},
+		// Drawing config read from this.options during draw interactions
+		color: { default: '#000' },
+		lineWidth: { default: 3 },
+		readOnly: { default: false },
+		drawThrottle: {},
+	};
+
+	static events = ['line', 'draw'];
+
+	static prepareOptions(options) {
+		return {
+			...options,
+			style: {
+				cursor: 'crosshair',
+				touchAction: 'none',
+				borderRadius: '3px',
+				...options.style,
+			},
+		};
 	}
 
 	build() {
@@ -59,23 +78,6 @@ export default class Whiteboard extends Component {
 		this.replaceCleanup('pointerdown', () => this.elem.removeEventListener('pointerdown', boundInteractionInit));
 	}
 
-	static handlers = {
-		width(value) {
-			this.elem.width = Number.parseInt(value);
-			this.elem.style.width = value;
-		},
-		height(value) {
-			this.elem.height = Number.parseInt(value);
-			this.elem.style.height = value;
-		},
-		lines(value) {
-			value.forEach(line => this.drawLine(line));
-		},
-		background(value) {
-			this.elem.style.background = value;
-		},
-	};
-
 	getPosition({ offsetX, offsetY }) {
 		return { x: offsetX.toFixed(3), y: offsetY.toFixed(3) };
 	}

package/devTools/build.js

@@ -0,0 +1,43 @@
+import { watch } from 'fs';
+import { buildLoader as asText } from '../plugins/asText';
+import { buildLoader as markdownLoader } from '../plugins/markdownLoader';
+
+const build = async () => {
+	console.log('Building...');
+
+	const buildResults = await Bun.build({
+		entrypoints: ['demo/index.html'],
+		outdir: 'demo/build',
+		define: {
+			'process.env.AUTOPREFIXER_GRID': 'undefined',
+			'process.cwd': 'String',
+		},
+		plugins: [asText, markdownLoader],
+	});
+
+	console.log(buildResults.success ? 'build.success' : buildResults.logs);
+
+	return buildResults;
+};
+
+const enableWatcher = process.argv[2] === '--watch';
+const watcherIgnore = /\.asText$|^demo\/build|^\.|^img\/|^devTools\//;
+
+if (enableWatcher) {
+	console.log(`Initializing watcher`);
+
+	const watcher = watch(`${import.meta.dir}/..`, { recursive: true }, (event, filename) => {
+		if (watcherIgnore.test(filename)) return;
+
+		console.log(`Detected ${event} in ${filename}`);
+
+		build();
+	});
+
+	process.on('SIGINT', () => {
+		watcher.close();
+		process.exit(0);
+	});
+}
+
+await build();