alchemy-form 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.1.2 (2022-01-28)
+
+* Add readonly attribute to fields
+* Clear text input on focus out + improve accessibility of alchemy-select
+* Add widget settings to alchemy-field
+* Enable setting the language mode of ace editor
+
 ## 0.1.1 (2021-09-12)
 
 * `alchemy-table` will now use the `FieldConfig#getDisplayValueIn(data)` method

package/assets/stylesheets/form/alchemy_select.scss

@@ -3,6 +3,12 @@ alchemy-select {
 	position: relative;
 	display: block;
 
+	--active-item-bg: #a7deff;
+	--active-item-fg: #272727;
+
+	--selected-item-bg: #31317a;
+	--selected-item-fg: #f5f5f5;
+
 	.dropdown-content,
 	.value-wrapper,
 	.dropdown {
@@ -10,8 +16,6 @@ alchemy-select {
 	}
 
 	&:focus {
-		outline: 0 !important;
-
 		.value-wrapper {
 			border-color: rgba(82, 168, 236, 0.8) !important;
 		}
@@ -31,6 +35,12 @@ alchemy-select {
 		flex-wrap: wrap;
 		//box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+
+		align-items: center;
+
+		input.type-area {
+			height: 1.5rem;
+		}
 	}
 
 	&[aria-expanded="true"] .value-wrapper {
@@ -149,11 +159,15 @@ alchemy-select {
 	.dropdown [role="option"] {
 
 		&:hover,
-		&.focused,
-		&[selected] {
+		&.focused {
 			background-color: var(--active-item-bg, #f5fafd);
 			color: var(--active-item-fg, #495c68);
 		}
+
+		&[selected] {
+			background-color: var(--selected-item-bg, #f5fafd);
+			color: var(--selected-item-fg, #495c68);
+		}
 	}
 
 	&[aria-expanded="true"] .dropdown {

package/element/alchemy_field.js

@@ -54,6 +54,24 @@ Field.setAttribute('field-name');
  */
 Field.setAttribute('field-view');
 
+/**
+ * Is this a read only field?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+Field.setAttribute('readonly', {boolean: true});
+
+/**
+ * Widget settings for use in the views
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+Field.setAssignedProperty('widget_settings');
+
 /**
  * Get the parent alchemy-form element
  *

package/element/alchemy_form.js

@@ -108,7 +108,7 @@ Form.setProperty(function main_error_area() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.2
  */
 Form.setProperty(function value() {
 
@@ -125,6 +125,10 @@ Form.setProperty(function value() {
 	for (i = 0; i < fields.length; i++) {
 		field = fields[i];
 
+		if (field && field.readonly) {
+			continue;
+		}
+
 		result[field.field_name] = field.value;
 	}
 

package/element/alchemy_select.js

@@ -403,6 +403,7 @@ AlchemySelect.setMethod(function introduced() {
 	const that = this;
 
 	this._initAttributes();
+	this.enableFocusWithinEvent();
 
 	if (this.sortable) {
 		this.makeSortable();
@@ -417,6 +418,13 @@ AlchemySelect.setMethod(function introduced() {
 		});
 	}
 
+	this.addEventListener('focus-without', function onFocusOut(e) {
+		that.type_area.value = '';
+		that.refitTypeArea(e);
+		that.applyLocalFilter();
+		that.close();
+	});
+
 	// Give the type area focus when clicking on the wrapper
 	this.wrapper.addEventListener('click', function onClick(e) {
 		that.open();
@@ -430,24 +438,26 @@ AlchemySelect.setMethod(function introduced() {
 
 	this.addEventListener('keydown', function onKeydown(e) {
 
+		console.log('keydown:', e);
+
 		// Only listen for keydowns on the alchemy-select itself
 		if (e.target != that) {
 			return;
 		}
 
-		if (e.key == 'Space' || e.key == 'Enter') {
+		if (e.code == 'Space' || e.code == 'Enter') {
 			that.open(e);
-		} else if (e.key == 'Escape') {
+		} else if (e.code == 'Escape') {
 			that.close(e);
 		}
 	});
 
 	this.dropdown_content.addEventListener('keydown', function onKeydown(e) {
-		if (e.key == 'ArrowUp' || e.key == 'ArrowDown') {
+		if (e.code == 'ArrowUp' || e.code == 'ArrowDown') {
 			that.handleArrowKey(e);
-		} else if (e.key == 'Escape') {
+		} else if (e.code == 'Escape') {
 			that.close(e);
-		} else if (e.key == 'Enter') {
+		} else if (e.code == 'Enter') {
 			that.selectFocusedElement(e);
 		}
 	});
@@ -1123,6 +1133,7 @@ AlchemySelect.setMethod(function open(event) {
  * @param    {Event}   event   The optional event
  */
 AlchemySelect.setMethod(function close(event) {
+	this.removeAttribute('aria-activedescendant');
 	this.setAttribute('aria-expanded', 'false');
 	this.type_area.setAttribute('aria-expanded', 'false');
 	this.type_area.setAttribute('tabindex', '-1');
@@ -1130,7 +1141,7 @@ AlchemySelect.setMethod(function close(event) {
 	this.classList.remove('open');
 	this.emit('close');
 
-	if (event === true || (event && event.key == 'Escape')) {
+	if (event === true || (event && event.code == 'Escape')) {
 		this.focus();
 		this.result_info.textContent = 'Gesloten';
 	}
@@ -1303,7 +1314,7 @@ AlchemySelect.setMethod(function handleArrowKey(event) {
 		this.open();
 	}
 
-	if (event.key == 'ArrowUp') {
+	if (event.code == 'ArrowUp') {
 		direction = -1;
 	} else {
 		// Down
@@ -1391,18 +1402,27 @@ AlchemySelect.setMethod(function _focusOnOption(option_element) {
 		option_element = this.dropdown_content.children[option_element];
 	}
 
+	this.setAttribute('aria-activedescendant', null);
+
 	for (i = 0; i < this.dropdown_content.children.length; i++) {
 		element = this.dropdown_content.children[i];
 
 		if (element == option_element) {
 			element.classList.add('focused');
-			element.setAttribute('tabindex', 0);
+			//element.setAttribute('tabindex', 0);
 			this._selected_entry = element._entry;
 			selected_index = i;
-			element.focus();
+
+			//element.focus();
+
+			if (!element.id) {
+				element.id = this.hawkejs_view.getId();
+			}
+
+			this.setAttribute('aria-activedescendant', element.id);
 		} else {
 			element.classList.remove('focused');
-			element.setAttribute('tabindex', '-1');
+			//element.setAttribute('tabindex', '-1');
 		}
 	}
 
@@ -1507,7 +1527,7 @@ AlchemySelect.setMethod(function advanceCaret(direction) {
  */
 AlchemySelect.setMethod(function onTypeAreaKeydown(e, is_input) {
 
-	switch (e.key) {
+	switch (e.code) {
 		case 'ArrowUp':
 		case 'ArrowDown':
 			this.handleArrowKey(e);
@@ -1529,6 +1549,10 @@ AlchemySelect.setMethod(function onTypeAreaKeydown(e, is_input) {
 			this.removeItem(this.type_area.previousSibling);
 			break;
 
+		case 'Enter':
+			this.selectFocusedElement(e);
+			break;
+
 		case 'Delete':
 			if (this.type_area.value.length) {
 				return;
@@ -1549,7 +1573,7 @@ AlchemySelect.setMethod(function onTypeAreaKeydown(e, is_input) {
  */
 AlchemySelect.setMethod(function onTypeAreaKeyup(e, is_input) {
 
-	switch (e.key) {
+	switch (e.code) {
 		case 'ArrowUp':
 		case 'ArrowDown':
 		case 'ArrowLeft':
@@ -1818,13 +1842,13 @@ AlchemySelect.setMethod(function measureString(str, element, event) {
 			code === 32 // space
 		);
 
-		if (event.key == 'Delete' || event.key == 'Backspace') {
+		if (event.code == 'Delete' || event.code == 'Backspace') {
 			selection = this._getSelection(this.type_area);
 			if (selection.length) {
 				str = str.substring(0, selection.start) + str.substring(selection.start + selection.length);
-			} else if (event.key == 'Backspace' && selection.start) {
+			} else if (event.code == 'Backspace' && selection.start) {
 				str = str.substring(0, selection.start - 1) + str.substring(selection.start);
-			} else if (event.key == 'Delete' && typeof selection.start !== 'undefined') {
+			} else if (event.code == 'Delete' && typeof selection.start !== 'undefined') {
 				str = str.substring(0, selection.start) + str.substring(selection.start + 1);
 			}
 		} else if (printable) {

package/element/code_input.js

@@ -80,5 +80,20 @@ CodeInput.setMethod(async function introduced() {
 	editor.session.setUseWrapMode(true);
 	editor.setFontSize(16);
 
+	let parent_field = this.queryParents('alchemy-field');
+
+	if (parent_field && parent_field.widget_settings && parent_field.widget_settings.language_mode) {
+
+		let mode = parent_field.widget_settings.language_mode;
+
+		// Even though it correctly downloads the language mode file without it,
+		// it still requires the `ace/mode/` prefix
+		if (mode.indexOf('/') == -1) {
+			mode = 'ace/mode/' + mode;
+		}
+
+		editor.session.setMode(mode);
+	}
+
 	this._editor = editor;
 });

package/helper/widgets/alchemy_field_widget.js

@@ -33,7 +33,7 @@ AlchemyField.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.2
  */
 AlchemyField.setMethod(function populateWidget() {
 
@@ -46,6 +46,14 @@ AlchemyField.setMethod(function populateWidget() {
 		field_el.field_view = config.view;
 	}
 
+	if (config.readonly) {
+		field_el.readonly = true;
+	}
+
+	if (config.widget_settings) {
+		field_el.widget_settings = config.widget_settings;
+	}
+
 	this.element.append(field_el);
 });
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
@@ -11,6 +11,6 @@
 	},
 	"license": "MIT",
 	"engines": {
-		"node" : ">=8.9.0"
+		"node" : ">=12.0.0"
 	}
 }

package/view/form/elements/code_input.hwk

@@ -1 +1 @@
-<div class="code-editor"><% Hawkejs.replaceChildren($0, child_nodes) %></div>
+<div class="code-editor"><% Blast.Classes.Hawkejs.replaceChildren($0, child_nodes) %></div>