@vanilla-bean/components 1.1.1 → 2.0.1

package/components/Dialog/Dialog.js

@@ -11,19 +11,7 @@ const DialogButton = styled(
 	`,
 );
 
-const size_enum = Object.freeze(['small', 'standard', 'large']);
-const variant_enum = Object.freeze(['info', 'success', 'warning', 'error']);
-
-const defaultOptions = {
-	tag: 'dialog',
-	size: 'small',
-	openOnRender: 16,
-	modal: true,
-	get appendTo() {
-		return document.body;
-	},
-	registeredEvents: new Set(['close']),
-};
+const defaultOpenDelay = 16;
 
 /**
  * Modal and non-modal dialog component with customizable appearance and behavior.
@@ -149,57 +137,70 @@ class Dialog extends styled(
 		}
 	`,
 ) {
-	variant_enum = variant_enum;
-	size_enum = size_enum;
-
-	static handlers = {
-		openOnRender(value) {
-			const delay = typeof value === 'number' ? value : defaultOptions.openOnRender;
-			const openDelay = value ? setTimeout(() => this.open(), delay) : null;
-			this.replaceCleanup('openOnRender', () => openDelay && clearTimeout(openDelay));
+	static schema = {
+		tag: { default: 'dialog' },
+		appendTo: {
+			get default() {
+				return document.body;
+			},
 		},
-		// Claim the key so standard routing doesn't try to call elem.showModal() or set elem.modal.
-		// The value is read directly from this.options.modal in open().
-		modal() {},
-		size(value) {
-			if (value && !size_enum.includes(value)) {
-				throw new Error(
-					`"${value}" is not a valid size. The size must be one of the following values: ${size_enum.join(', ')}`,
-				);
-			}
-
-			this.removeClass(/\bsize-\S+\b/g);
-
-			if (value) this.addClass(`size-${value}`);
+		openOnRender: {
+			default: defaultOpenDelay,
+			set(value) {
+				const delay = typeof value === 'number' ? value : defaultOpenDelay;
+				const openDelay = value ? setTimeout(() => this.open(), delay) : null;
+				this.replaceCleanup('openOnRender', () => openDelay && clearTimeout(openDelay));
+			},
 		},
-		variant(value) {
-			if (value && !variant_enum.includes(value)) {
-				throw new Error(
-					`"${value}" is not a valid variant. The variant must be one of the following values: ${variant_enum.join(', ')}`,
-				);
-			}
-
-			this.removeClass(/\bvariant-\S+\b/g);
+		// Read directly from this.options.modal in open()
+		modal: { default: true },
+		size: {
+			default: 'small',
+			enum: ['small', 'standard', 'large'],
+			set(value) {
+				this.removeClass(/\bsize-\S+\b/g);
+
+				if (value) this.addClass(`size-${value}`);
+			},
+		},
+		variant: {
+			enum: ['info', 'success', 'warning', 'error'],
+			set(value) {
+				this.removeClass(/\bvariant-\S+\b/g);
 
-			if (value) this.addClass(`variant-${value}`);
+				if (value) this.addClass(`variant-${value}`);
+			},
+		},
+		body: {
+			set(value) {
+				this.body?.content(value);
+			},
+		},
+		header: {
+			set(value) {
+				this._header?.content(value);
+			},
 		},
-		body(value) {
-			this.body?.content(value);
+		buttons: {
+			set() {
+				this._refreshFooter();
+			},
 		},
-		header(value) {
-			this._header?.content(value);
+		footer: {
+			set() {
+				this._refreshFooter();
+			},
 		},
+		// Read from this.options at button-press time
+		closeDialog: {},
+		onButtonPress: {},
 	};
 
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super({ ...defaultOptions, ...options }, ...children);
+	static events = ['close'];
 
+	build() {
 		this.options['aria-labelledby'] = this.uniqueId;
-	}
 
-	build() {
 		this._header = new Elem({
 			tag: 'div',
 			id: this.uniqueId,
@@ -210,25 +211,30 @@ class Dialog extends styled(
 
 		this._body = new Elem({ addClass: ['content'], appendTo: this });
 
-		this._footer = new Elem({
-			addClass: ['footer'],
-			append:
-				this.options.footer ||
-				this.options.buttons?.map(
-					button =>
-						new DialogButton({
-							onPointerPress: event =>
-								this.options.onButtonPress?.({
-									event,
-									button,
-									dialog: this,
-									closeDialog: this.options.closeDialog || (() => this.close()),
-								}),
-							...(typeof button === 'object' ? button : { textContent: button }),
-						}),
-				),
-			appendTo: this,
-		});
+		this._footer = new Elem({ addClass: ['footer'], append: this._footerContent(), appendTo: this });
+	}
+
+	_refreshFooter() {
+		if (this.rendered) this._footer?.content(this._footerContent() || []);
+	}
+
+	_footerContent() {
+		return (
+			this.options.footer ||
+			this.options.buttons?.map(
+				button =>
+					new DialogButton({
+						onPointerPress: event =>
+							this.options.onButtonPress?.({
+								event,
+								button,
+								dialog: this,
+								closeDialog: this.options.closeDialog || (() => this.close()),
+							}),
+						...(typeof button === 'object' ? button : { textContent: button }),
+					}),
+			)
+		);
 	}
 
 	/**

package/components/Form/Form.js

@@ -65,15 +65,19 @@ export default class Form extends Component {
 	 * Rebuild the form when inputs change without recreating the data store.
 	 * Existing data is preserved; new keys are added with their initial values.
 	 */
-	static handlers = {
-		inputs(value) {
-			if (!this.rendered || !value || !this.options.data) return;
-			this.empty();
-			this._resetState();
-			this._processInputs(value, this);
-			this._wireConditions();
-			this._setupAnnouncer();
+	static schema = {
+		inputs: {
+			set(value) {
+				if (!this.rendered || !value || !this.options.data) return;
+				this.empty();
+				this._resetState();
+				this._processInputs(value, this);
+				this._wireConditions();
+				this._setupAnnouncer();
+			},
 		},
+		// Data store managed by build()
+		data: {},
 	};
 
 	/** @private */

package/components/Icon/Icon.js

@@ -14,20 +14,28 @@ import { Component } from '../../Component';
  * @returns {Icon} Icon component instance
  */
 export default class Icon extends Component {
-	static handlers = {
-		icon() {
-			this._refreshIcon();
+	static schema = {
+		icon: {
+			set() {
+				this._refreshIcon();
+			},
 		},
-		animation() {
-			this._refreshIcon();
+		animation: {
+			set() {
+				this._refreshIcon();
+			},
 		},
-		content(value, next) {
-			next(value);
-			this._refreshIcon();
+		content: {
+			set(value, next) {
+				next(value);
+				this._refreshIcon();
+			},
 		},
-		textContent(value, next) {
-			next(value);
-			this._refreshIcon();
+		textContent: {
+			set(value, next) {
+				next(value);
+				this._refreshIcon();
+			},
 		},
 	};
 

package/components/Input/Input.js

@@ -26,13 +26,11 @@ const type_enum = Object.freeze([
 	'url',
 	'week',
 ]);
-const defaultOptions = {
-	tag: 'input',
-	value: '',
+// Only meaningful on input/textarea elements - child classes rendering other tags (e.g. ColorPicker's div) must not receive them
+const textInputDefaults = {
 	autocomplete: 'off',
 	autocapitalize: 'off',
 	autocorrect: 'off',
-	height: 'auto',
 	placeholder: '',
 };
 
@@ -59,19 +57,91 @@ const dataTypeToInputType = { number: 'number', boolean: 'checkbox', string: 'te
  * @returns {Input} Input component instance
  */
 export default class Input extends Component {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-	type_enum = type_enum;
+	static schema = {
+		tag: { default: 'input' },
+		type: { enum: type_enum },
+		height: {
+			default: 'auto',
+			set(value) {
+				if (this.tag !== 'textarea') return;
+
+				if (value === 'auto') {
+					this.__updateAutoHeight = () => {
+						this.elem.style.height = this.options.syntaxHighlighting
+							? `calc(${((this.elem.value?.match(/\n/g) || '').length + 1) * 1.19}em + 10px)`
+							: `calc(${((this.elem.value?.match(/\n/g) || '').length + 1) * 1.25}em + 16px)`;
+					};
+
+					this.__debouncedUpdateAutoHeight =
+						this.__debouncedUpdateAutoHeight ||
+						(() => {
+							clearTimeout(this.__autoHeightTimeout);
+							this.__autoHeightTimeout = setTimeout(this.__updateAutoHeight, 16);
+						});
+
+					this.__updateAutoHeight();
+
+					this.elem.addEventListener('input', this.__debouncedUpdateAutoHeight);
+
+					this.replaceCleanup('autoHeight', () => {
+						clearTimeout(this.__autoHeightTimeout);
+						this.elem.removeEventListener?.('input', this.__debouncedUpdateAutoHeight);
+					});
+				} else {
+					this.elem.removeEventListener('input', this.__debouncedUpdateAutoHeight);
+					clearTimeout(this.__autoHeightTimeout);
 
-	constructor(options = {}, ...children) {
-		const rawValue = options.value?.__isDerived ? options.value.toJSON() : options.value;
-		super(
-			{
-				...((options.tag || 'input') === 'input' ? { type: dataTypeToInputType[typeof rawValue] || 'text' } : {}),
-				...defaultOptions,
-				...options,
+					this.elem.style.height = typeof value === 'number' ? `${value + 1}em` : value;
+				}
+			},
+		},
+		value: {
+			default: '',
+			set(value) {
+				if (this.options.type === 'checkbox') this.elem.checked = value;
+				else this.elem.value = value;
+
+				if (this.rendered && this.options.validations?.length) retry(() => this.validate(), { delay: 500, max: 1 });
+			},
+		},
+		syntaxHighlighting: {
+			set(value) {
+				this[value ? 'addClass' : 'removeClass']('syntax-highlighting');
 			},
-			...children,
-		);
+		},
+		language: {
+			set(value) {
+				if (!this.options.syntaxHighlighting) return;
+				this.removeClass(/\blanguage-\S+\b/g);
+				this.addClass(`language-${value}`);
+			},
+		},
+		autocorrect: {
+			set(value) {
+				this.elem.autocorrect = value;
+			},
+		},
+		// Read by validate() and the value handler
+		validations: {
+			get default() {
+				return [];
+			},
+		},
+	};
+
+	static prepareOptions(options) {
+		const rawValue = options.value?.__isDerived ? options.value.toJSON() : options.value;
+		const tag = options.tag || 'input';
+
+		return {
+			...(tag === 'input' ? { type: dataTypeToInputType[typeof rawValue] || 'text' } : {}),
+			...(tag === 'input' || tag === 'textarea' ? textInputDefaults : {}),
+			...options,
+		};
+	}
+
+	constructor(options = {}, ...children) {
+		super(options, ...children);
 
 		this.initialValue = this.options.value;
 	}
@@ -93,58 +163,6 @@ export default class Input extends Component {
 		}
 	}
 
-	static handlers = {
-		height(value) {
-			if (this.tag !== 'textarea') return;
-
-			if (value === 'auto') {
-				this.__updateAutoHeight = () => {
-					this.elem.style.height = this.options.syntaxHighlighting
-						? `calc(${((this.elem.value?.match(/\n/g) || '').length + 1) * 1.19}em + 10px)`
-						: `calc(${((this.elem.value?.match(/\n/g) || '').length + 1) * 1.25}em + 16px)`;
-				};
-
-				this.__debouncedUpdateAutoHeight =
-					this.__debouncedUpdateAutoHeight ||
-					(() => {
-						clearTimeout(this.__autoHeightTimeout);
-						this.__autoHeightTimeout = setTimeout(this.__updateAutoHeight, 16);
-					});
-
-				this.__updateAutoHeight();
-
-				this.elem.addEventListener('input', this.__debouncedUpdateAutoHeight);
-
-				this.replaceCleanup('autoHeight', () => {
-					clearTimeout(this.__autoHeightTimeout);
-					this.elem.removeEventListener?.('input', this.__debouncedUpdateAutoHeight);
-				});
-			} else {
-				this.elem.removeEventListener('input', this.__debouncedUpdateAutoHeight);
-				clearTimeout(this.__autoHeightTimeout);
-
-				this.elem.style.height = typeof value === 'number' ? `${value + 1}em` : value;
-			}
-		},
-		value(value) {
-			if (this.options.type === 'checkbox') this.elem.checked = value;
-			else this.elem.value = value;
-
-			if (this.rendered && this.options.validations?.length) retry(() => this.validate(), { delay: 500, max: 1 });
-		},
-		syntaxHighlighting(value) {
-			this[value ? 'addClass' : 'removeClass']('syntax-highlighting');
-		},
-		language(value) {
-			if (!this.options.syntaxHighlighting) return;
-			this.removeClass(/\blanguage-\S+\b/g);
-			this.addClass(`language-${value}`);
-		},
-		autocorrect(value) {
-			this.elem.autocorrect = value;
-		},
-	};
-
 	/**
 	 * Checks if the input value has changed from its initial value
 	 * @returns {boolean} True if value is no longer the initial value

package/components/Input/README.md

@@ -69,8 +69,6 @@ input.isDirty: boolean  // getter - true if current value differs from the initi
 
 Input components emit enhanced native events. All handlers (`onInput`, `onChange`, `onKeyUp`, etc.) receive a standard DOM event augmented with a `.value` property containing the current input value.
 
-The `close` event is registered by default via `registeredEvents`.
-
 ## Example
 
 Textarea with auto-height and syntax highlighting:

package/components/Keyboard/Key.js

@@ -21,17 +21,14 @@ const StyledButton = styled(
 );
 
 class Key extends StyledButton {
-	constructor(options = {}, ...children) {
-		const { key, text, class: keyClass, ...optionsWithoutConfig } = options;
+	static prepareOptions(options) {
+		const { key, text, class: keyClass, ...rest } = options;
 
-		super(
-			{
-				textContent: text ?? key,
-				...optionsWithoutConfig,
-				addClass: [key, keyClass].concat(options.addClass),
-			},
-			...children,
-		);
+		return {
+			textContent: text ?? key,
+			...rest,
+			addClass: [key, keyClass].concat(options.addClass),
+		};
 	}
 }
 

package/components/Keyboard/Keyboard.js

@@ -24,54 +24,46 @@ const KeyRow = styled(
  * @returns {Keyboard} Keyboard component instance
  */
 class Keyboard extends Component {
-	constructor(options = {}, ...children) {
-		super(
-			{
-				layout: 'simple',
-				tactileResponse: true,
-				keyDefinitions: {
-					simple: { text: 'ABC' },
-					number: { text: '123' },
-					shift: { class: 'u1_5' },
-					return: { class: 'u1_5' },
-					backspace: { class: 'u1_5' },
-					clear: { class: 'u1_5' },
-					done: { class: 'u1_5' },
-					exponent: { key: 'e', text: 'e', class: 'u1_5' },
-					space: { key: ' ', text: ' ', class: 'u6' },
-				},
-				layouts: {
-					simple: [
-						['simple', 'number'],
-						['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
-						['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
-						['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],
-						[',', '.', 'space', '!', 'return'],
-					],
-					number: [
-						['simple', 'number'],
-						['1', '2', '3', 'backspace'],
-						['4', '5', '6', 'clear'],
-						['7', '8', '9', 'done'],
-						['.', '0', '-', 'exponent'],
-					],
-				},
-				...options,
+	static schema = {
+		layout: {
+			default: 'simple',
+			set(value) {
+				this.setLayout(value);
+			},
+		},
+		// Read directly from this.options in setLayout() and key press handling
+		layouts: {
+			default: {
+				simple: [
+					['simple', 'number'],
+					['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+					['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+					['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],
+					[',', '.', 'space', '!', 'return'],
+				],
+				number: [
+					['simple', 'number'],
+					['1', '2', '3', 'backspace'],
+					['4', '5', '6', 'clear'],
+					['7', '8', '9', 'done'],
+					['.', '0', '-', 'exponent'],
+				],
+			},
+		},
+		keyDefinitions: {
+			default: {
+				simple: { text: 'ABC' },
+				number: { text: '123' },
+				shift: { class: 'u1_5' },
+				return: { class: 'u1_5' },
+				backspace: { class: 'u1_5' },
+				clear: { class: 'u1_5' },
+				done: { class: 'u1_5' },
+				exponent: { key: 'e', text: 'e', class: 'u1_5' },
+				space: { key: ' ', text: ' ', class: 'u6' },
 			},
-			...children,
-		);
-
-		this.setLayout(this.options.layout);
-	}
-
-	static handlers = {
-		// Claim these keys so standard routing doesn't try to assign them as elem properties.
-		// Both are read directly from this.options in setLayout() and key resolution.
-		layouts() {},
-		keyDefinitions() {},
-		layout(value) {
-			this.setLayout(value);
 		},
+		tactileResponse: { default: true },
 	};
 
 	// todo native keyboard events https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent