alchemy-form 0.1.1 → 0.1.4

package/element/number_input.js

@@ -0,0 +1,106 @@
+/**
+ * The alchemy-number-input custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+ var NumberInput = Function.inherits('Alchemy.Element.Form.FeedbackInput', 'NumberInput');
+
+/**
+ * The hawkejs template to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+NumberInput.setTemplateFile('form/elements/number_input');
+
+/**
+ * The value property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+NumberInput.setProperty(function value() {
+
+	var input = this.input_el,
+	    value = input.value;
+
+	if (value === '') {
+		return null;
+	}
+
+	return Number(value);
+
+}, function setValue(value) {
+
+	var input = this.input_el;
+
+	if (value == null || value === '') {
+		input.value = '';
+	} else {
+		input.value = value;
+	}
+
+});
+
+/**
+ * The disabled property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+NumberInput.setProperty(function disabled() {
+	return this.input_el.disabled;
+}, function setDisabled(value) {
+	return this.input_el.disabled = value;
+});
+
+/**
+ * Added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+NumberInput.setMethod(function introduced() {
+
+	var that = this,
+	    minus = this.querySelector('.minus'),
+	    plus  = this.querySelector('.plus'),
+	    input = this.querySelector('.input');
+
+	var accommodations_summary_element = this.accommodations_summary;
+
+	minus.addEventListener('click', function onMinus(e) {
+		e.preventDefault();
+		adjustValue(-1, that);
+	});
+
+	plus.addEventListener('click', function onPlus(e) {
+		e.preventDefault();
+		adjustValue(+1, that);
+	});
+
+	function adjustValue(change, obj) {
+
+		var max = Number(input.getAttribute('max')),
+		    min = Number(input.getAttribute('min')),
+		    val = Number(input.value) || 0;
+
+		val += change;
+
+		if (val > max) {
+			val = max;
+		}
+
+		if (val < min) {
+			val = min;
+		}
+
+		input.value = val;
+	}
+});

package/element/string_input.js

@@ -3,11 +3,9 @@
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
-var StringInput = Function.inherits('Alchemy.Element.Form.FeedbackInput', function StringInput() {
-	StringInput.super.call(this);
-});
+const StringInput = Function.inherits('Alchemy.Element.Form.FeedbackInput', 'StringInput');
 
 /**
  * The template to use for the content of this element
@@ -16,4 +14,334 @@ var StringInput = Function.inherits('Alchemy.Element.Form.FeedbackInput', functi
  * @since    0.1.0
  * @version  0.1.0
  */
-StringInput.setTemplateFile('form/elements/string_input');
+StringInput.setTemplateFile('form/elements/string_input');
+
+/**
+ * The required attribute
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+StringInput.setAttribute('required', {boolean: true});
+
+/**
+ * The required attribute
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+StringInput.setAssignedProperty('validate');
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {Object[]}
+ */
+StringInput.setMethod(function getValidationConfig() {
+
+	let result = [],
+	    config = this.validate,
+	    types;
+
+	if (config && typeof config == 'string') {
+		types = config;
+		config = null;
+	} else if (config && typeof config == 'object') {
+		config = Array.cast(config);
+	} else {
+		types = this.getAttribute('validate');
+	}
+
+	if (types) {
+		types = types.split(',');
+	} else {
+		types = [];
+	}
+
+	// Required always comes first if defined as an attribute
+	if (this.required) {
+		types.unshift('required');
+	}
+
+	for (let type of types) {
+		if (type == 'email') {
+			result.push({
+				type    : 'regex',
+				regex   : /[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_\.-]+\.[a-zA-Z]{2,}/,
+				message : 'microcopy:invalid-email',
+				when    : 'onblur',
+			});
+		} else if (type == 'regex') {
+			result.push({
+				type    : 'regex',
+				regex   : RegExp.interpret(this.getAttribute('validate-regex')),
+				message : 'microcopy:invalid-pattern-match',
+				when    : 'onblur',
+			});
+		} else if (type == 'remote') {
+			let route = this.getAttribute('validate-route'),
+			    url = this.getAttribute('validate-url');
+
+			result.push({
+				type    : 'remote',
+				route   : route,
+				url     : url,
+				message : 'microcopy:invalid-remote',
+				when    : 'onblur',
+			});
+		} else if (type == 'required') {
+			result.push({
+				type    : 'required',
+				message : 'microcopy:cannot-be-empty'
+			})
+		}
+	}
+
+	let min_length = Number(this.getAttribute('min-length')) || 0;
+
+	if (min_length > 0) {
+		// Checking the minimum length only has to happen on blur
+		result.push({
+			type    : 'min_length',
+			length  : min_length,
+			message : 'microcopy:is-too-short',
+			when    : 'onblur',
+		});
+	}
+
+	let max_length = Number(this.getAttribute('max-length')) || 0;
+
+	if (max_length > 0) {
+		// Checking maximum length has to happen immediately
+		result.push({
+			type    : 'max_length',
+			length  : max_length,
+			message : 'microcopy:is-too-long',
+		});
+	}
+
+	if (config) {
+		for (let entry of config) {
+
+			if (!entry.when) {
+				entry.when = 'onblur';
+			}
+
+			result.push(entry);
+		}
+	}
+
+	return result;
+});
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @param    {Object}   trigger   The revalidation trigger
+ */
+StringInput.setMethod(async function revalidate(trigger, force) {
+
+	// Get the current value
+	let value = this.value;
+
+	if (value) {
+		value = value.trim();
+	}
+
+	// Don't revalidate the same value twice
+	if (this.last_validated_value == value) {
+		return;
+	}
+
+	if (this.success_el) {
+		this.success_el.innerHTML = '';
+	}
+
+	// Get the validation counter (important for async validations)
+	let validation_counter = ++this.validation_counter;
+
+	let config = this.getValidationConfig(),
+	    error_params,
+		check_count = 0,
+		skip_count = 0,
+		required;
+
+	if (config && config.length) {
+
+		required = config.findByPath('type', 'required');
+
+		for (let entry of config) {
+
+			if (!value.length && !required) {
+				skip_count++;
+				continue;
+			}
+
+			if (entry.when) {
+
+				// Always check when it's being submitted
+				if (trigger != 'submit') {
+					if (entry.when == 'onblur' && (!trigger || trigger.type != 'blur')) {
+						skip_count++;
+						continue;
+					}
+				}
+			}
+
+			check_count++;
+
+			if (entry.type == 'regex') {
+				if (!entry.regex.test(value)) {
+					error_params = [entry.message, null, true];
+					break;
+				}
+			} else if (entry.type == 'min_length') {
+				if (value.length < entry.length) {
+					error_params = [entry.message, {
+						value_length: value.length,
+						min_length  : entry.length,
+					}, true];
+					break;
+				}
+			} else if (entry.type == 'max_length') {
+				if (value.length > entry.length) {
+					error_params = [entry.message, {
+						value_length : value.length,
+						max_length   : entry.length,
+					}, true];
+					break;
+				}
+			} else if (entry.type == 'remote') {
+
+				let url;
+
+				if (entry.url) {
+					url = Classes.RURL.parse(entry.url);
+				} else if (entry.route) {
+					url = hawkejs.scene.helpers.Router.routeUrl(entry.route);
+				}
+
+				if(!url) {
+					continue;
+				}
+
+				url.param('value', value);
+
+				try {
+
+					let result = await Blast.fetch(url);
+
+					if (result) {
+						if (!result.allowed) {
+							error_params = [result.message || entry.message, null, true];
+							break;
+						}
+					}
+				} catch (err) {
+					error_params = [entry.message || err.message, null, true];
+					break;
+				}
+			}
+		}
+	}
+
+	// Remove errors if not required and empty
+	if (!required && !value.length) {
+		this.removeErrors();
+	}
+
+	// Make sure something was checked, otherwise exit early
+	if (!check_count) {
+		return;
+	}
+
+	if (validation_counter != this.validation_counter) {
+		// Another validation happened while we were waiting for the result
+		if (!force) {
+			return;
+		}
+	}
+
+	if (!skip_count) {
+		// Remember we validated this value (if all the checks were done)
+		this.last_validated_value = value;
+	}
+
+	if (error_params) {
+		this.addError(...error_params);
+		return;
+	}
+
+	// Remove all errors when we got this far
+	this.removeErrors();
+
+	// Mark it as valid, but only if we checked all the checks
+	if (!skip_count) {
+		this.classList.add('valid');
+		this.inputbox_el.classList.add('valid');
+
+		let message = this.getAttribute('success-message');
+
+		if (message) {
+			this.addSuccess(message);
+		}
+	}
+});
+
+/**
+ * Actions to perform when this element
+ * has been added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+ StringInput.setMethod(function introduced() {
+
+	const that = this,
+	      input = this.input_el;
+
+	if (this.readonly) {
+		input.disabled = true;
+	}
+
+	let doRevalidate = Fn.throttle((e, force) => {
+		this.revalidate(e, force);
+	}, {
+		minimum_wait  : 300,
+		immediate     : false,
+		reset_on_call : true
+	});
+
+	input.addEventListener('focus', e => {
+		this.inputbox_el.classList.add('focus');
+	});
+
+	input.addEventListener('blur', e => {
+		this.inputbox_el.classList.remove('focus');
+		doRevalidate(e, true);
+	});
+
+	input.addEventListener('keyup', function onKeyup(e) {
+		doRevalidate(e);
+		that.emit('changing');
+	});
+
+	input.addEventListener('input',function onInput(e) {
+		doRevalidate(e);
+	});
+
+	if (this.value) {
+		this.revalidate();
+	}
+});

package/helper/widgets/alchemy_field_widget.js

@@ -28,24 +28,79 @@ AlchemyField.constitute(function prepareSchema() {
 	// this.schema.addField('widgets', widgets, {array: true});
 });
 
+/**
+ * Find the alchemy-form parent
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+AlchemyField.enforceProperty(function alchemy_form(new_value) {
+
+	if (!new_value && this.config && this.config.alchemy_form) {
+		new_value = this.config.alchemy_form;
+	}
+
+	if (!new_value) {
+
+		let parent = this.parent_instance;
+		
+		while (parent) {
+
+			new_value = parent.alchemy_form;
+
+			if (new_value) {
+				break;
+			}
+
+			if (parent.element) {
+				new_value = parent.element.querySelector('alchemy-form');
+
+				if (new_value) {
+					break;
+				}
+			}
+			
+			parent = parent.parent_instance;
+		}
+	}
+
+	return new_value;
+});
+
 /**
  * Populate the widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 AlchemyField.setMethod(function populateWidget() {
 
 	let config = this.config;
 
+	let alchemy_form = this.alchemy_form;
+
 	let field_el = this.createElement('alchemy-field');
+
+	if (alchemy_form) {
+		field_el.alchemy_form = alchemy_form;
+	}
+
 	field_el.field_name = config.field;
 
 	if (config.view) {
 		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/helper/widgets/alchemy_form_widget.js

@@ -16,7 +16,7 @@ const AlchemyForm = Function.inherits('Alchemy.Widget', 'AlchemyForm');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 AlchemyForm.setMethod(function populateWidget() {
 
@@ -31,7 +31,22 @@ AlchemyForm.setMethod(function populateWidget() {
 	form.classList.add('alchemy-widgets-container');
 
 	if (this.config && this.config.widgets) {
-		col.widget.value = this.config.widgets;
+		let widgets = this.config.widgets.slice(0),
+		    widget,
+			i;
+		
+		for (i = 0; i < widgets.length; i++) {
+			widget = widgets[i];
+
+			if (widget.type == 'alchemy_field') {
+				widget = Object.assign({}, widget);
+				widget.config = Object.assign({}, widget.config);
+				widget.config.alchemy_form = form;
+				widgets[i] = widget;
+			}
+		}
+
+		col.widget.value = widgets;
 	}
 
 	let record = this.element.getContextVariable('record');
@@ -49,6 +64,12 @@ AlchemyForm.setMethod(function populateWidget() {
 	form.append(col.widget);
 
 	this.element.append(form);
+
+	let violations = this.element.getContextVariable('form_violations');
+
+	if (violations) {
+		form.showError(violations);
+	}
 });
 
 /**

package/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.1.1",
+	"version": "0.1.4",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
 	},
 	"peerDependencies": {
-		"alchemymvc" : "~1.1.3"
+		"alchemymvc" : "~1.2.0"
 	},
 	"license": "MIT",
 	"engines": {
-		"node" : ">=8.9.0"
+		"node" : ">=12.0.0"
 	}
 }

package/view/form/elements/alchemy_field_schema.hwk

@@ -1,9 +1,7 @@
-{% with self.sub_fields as sub_field %}
-{% each %}
+{% each self.sub_fields as sub_field %}
 	<alchemy-field
 		#alchemy_field_schema=<% self %>
 		#schema=<% self.schema %>
 		field-name=<% sub_field.name %>
 	></alchemy-field>
-{% /each %}
-{% /with %}
+{% /each %}

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>

package/view/form/elements/number_input.hwk

@@ -0,0 +1,36 @@
+<label
+	for="nr_input_<% self.getAttribute('input-name') || '' %>"
+>
+	<div class="inputlabel">
+		<span class="label" data-he-slot="label"></span>
+		<span class="description" data-he-slot="description"></span>
+		<hr class="spacer">
+	</div>
+</label>
+
+<div class="row">
+
+	<button
+		class="control minus"
+		tabindex="-1"
+		aria-hidden="true"
+	></button>
+
+	<input
+		class="input"
+		value="<% self.getAttribute('start') %>"
+		min="<% self.getAttribute('min') %>"
+		max="<% self.getAttribute('max') %>"
+		type="number"
+		id="nr_input_<% self.getAttribute('input-name') || '' %>"
+		name=<% self.getAttribute('input-name') || '' %>
+
+		<% if (self.hasAttribute('disabled')) print('disabled="disabled"'); %>
+	>
+
+	<button
+		class="control plus"
+		tabindex="-1"
+		aria-hidden="true"
+	></button>
+</div>

package/view/form/inputs/edit/datetime.hwk

@@ -1,6 +1,13 @@
 <%
+
 if (value) {
-	value = value.format('Y-m-d H:i:s');
+
+	// Make sure it's a date
+	value = Date.create(value);
+
+	// According to MDN `toISOString()` should work,
+	// but neither Chrome or Firefox allow that format (it still contains timezone info)
+	value = value.format('Y-m-d\\TH:i:s');
 }
 %>
 <input