alchemy-form 0.1.12 → 0.2.1

package/element/{query_builder_entry.js → al_query_builder_entry.js}

@@ -165,14 +165,23 @@ QueryBuilderEntry.setMethod(async function loadData(config, element) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderEntry.setMethod(async function loadValueTypeData(config) {
 
 	let items = [];
 
-	items.push({id: 'variable', title: 'Other variable'});
-	items.push({id: 'value', title: 'Value'});
+	items.push({
+		id: 'variable',
+		title: 'Variable',
+		description: 'Use the value of a variable',
+	});
+
+	items.push({
+		id: 'value',
+		title: 'Value',
+		description: 'Supply the value now',
+	});
 
 	return items;
 });
@@ -231,12 +240,46 @@ QueryBuilderEntry.setMethod(async function loadVariableData(config) {
 	return result;
 });
 
+/**
+ * Get the field_select variable definition
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @return   {Promise<Object>}
+ */
+QueryBuilderEntry.setMethod(async function getFieldSelectVariableDefinition(variable_name, attempt = 0) {
+
+	let variable_def = this.field_select.getValueData(variable_name);
+
+	if (variable_def) {
+		return variable_def;
+	}
+
+	await this.field_select.waitForTasks();
+	variable_def = this.field_select.getValueData(variable_name);
+
+	if (!variable_def) {
+		variable_def = await this.field_select.awaitValueData(variable_name);
+	}
+
+	if (!variable_def && attempt == 0) {
+		// There is an annoying race condition where one select gets valid data,
+		// but the other field doesn't. So in that case: wait a little bit and try agian.
+		await Pledge.after(250);
+		return this.getFieldSelectVariableDefinition(variable_name, 1);
+	}
+
+	return variable_def;
+});
+
 /**
  * Load operator data
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderEntry.setMethod(async function loadOperatorData(config) {
 
@@ -246,12 +289,11 @@ QueryBuilderEntry.setMethod(async function loadOperatorData(config) {
 		return;
 	}
 
-	let variable_def = this.field_select.getValueData(type);
+	let variable_def = await this.getFieldSelectVariableDefinition(type);
 
 	let items = [];
 
 	if (variable_def) {
-
 		if (!this.type || this.type == 'logical') {
 			items.include(variable_def.getLogicalOperators());
 		} else if (this.type == 'assignment') {
@@ -267,7 +309,7 @@ QueryBuilderEntry.setMethod(async function loadOperatorData(config) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderEntry.setMethod(async function showValueInput() {
 
@@ -277,13 +319,7 @@ QueryBuilderEntry.setMethod(async function showValueInput() {
 		return;
 	}
 
-	let entry = this.field_select.getValueData(variable_name);
-
-	if (!entry) {
-		await this.field_select.waitForTasks();
-
-		entry = this.field_select.getValueData(variable_name);
-	}
+	let entry = await this.getFieldSelectVariableDefinition(variable_name);
 
 	if (!entry) {
 		return;
@@ -335,7 +371,7 @@ QueryBuilderEntry.setMethod(async function applyValue(value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.0
  */
 QueryBuilderEntry.setMethod(async function applyValueTypeChanges() {
 
@@ -344,7 +380,7 @@ QueryBuilderEntry.setMethod(async function applyValueTypeChanges() {
 	let type = this.value_type_select.value;
 
 	if (type == 'variable') {
-		let select = this.createElement('alchemy-select');
+		let select = this.createElement('al-select');
 		select.value_item_template = 'form/select/qb_item';
 		select.option_item_template = 'form/select/qb_item';
 

package/element/{query_builder_group.js → al_query_builder_group.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-toggle custom element
+ * The al-query-builder-group custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
@@ -171,7 +171,7 @@ QueryBuilderGroup.setProperty(function value() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.7
+ * @version  0.2.0
  */
 QueryBuilderGroup.setMethod(function applyValue(value) {
 
@@ -198,9 +198,9 @@ QueryBuilderGroup.setMethod(function applyValue(value) {
 
 		for (rule of value.rules) {
 			if (rule.type == 'qb_entry') {
-				element = this.createElement('alchemy-query-builder-entry');
+				element = this.createElement('al-query-builder-entry');
 			} else {
-				element = this.createElement('alchemy-query-builder-group');
+				element = this.createElement('al-query-builder-group');
 			}
 
 			element.assigned_data.value = rule;
@@ -214,7 +214,7 @@ QueryBuilderGroup.setMethod(function applyValue(value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.7
+ * @version  0.2.0
  */
 QueryBuilderGroup.setMethod(function introduced() {
 
@@ -225,14 +225,14 @@ QueryBuilderGroup.setMethod(function introduced() {
 	add_rule.addEventListener('click', e => {
 		e.preventDefault();
 		
-		let new_rule = this.createElement('alchemy-query-builder-entry');
+		let new_rule = this.createElement('al-query-builder-entry');
 		this.rules_list.append(new_rule);
 	});
 
 	add_group.addEventListener('click', e => {
 		e.preventDefault();
 
-		let new_group = this.createElement('alchemy-query-builder-group');
+		let new_group = this.createElement('al-query-builder-group');
 		this.rules_list.append(new_group);
 	});
 

package/element/{query_builder_value.js → al_query_builder_value.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-query-builder-value custom element
+ * The al-query-builder-value custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
@@ -80,7 +80,7 @@ QueryBuilderValue.addElementGetter('value_input_wrapper', '.qb-value-input-wrapp
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderValue.setProperty(function value() {
 
@@ -105,7 +105,7 @@ QueryBuilderValue.setProperty(function value() {
 		if (input) {
 
 			let value_explicit = {
-				type  : this.getValueType(input),
+				type  : this.getValueType(input) || 'unknown_value_type',
 				value : null,
 			}
 
@@ -129,14 +129,23 @@ QueryBuilderValue.setProperty(function value() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  */
 QueryBuilderValue.setMethod(async function loadSourceTypeData(config) {
 
 	let items = [];
 
-	items.push({id: 'variable', title: 'Variable'});
-	items.push({id: 'value', title: 'Value'});
+	items.push({
+		id: 'variable',
+		title: 'Variable',
+		description: 'Use the value of a variable',
+	});
+
+	items.push({
+		id: 'value',
+		title: 'Value',
+		description: 'Supply the value now',
+	});
 
 	return items;
 });
@@ -186,7 +195,7 @@ QueryBuilderValue.setMethod(async function applySourceTypeChanges() {
 	let type = this.source_type_select.value;
 
 	if (type == 'variable') {
-		let select = this.createElement('alchemy-select');
+		let select = this.createElement('al-select');
 		select.dataprovider = this;
 		select.classList.add('qb-value-variable');
 		this.value_input_wrapper.append(select);

package/element/{query_builder_variable.js → al_query_builder_variable.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-query-builder-value custom element
+ * The al-query-builder-value custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.7

package/element/{alchemy_select.js → al_select.js}

@@ -1,20 +1,11 @@
 /**
- * The alchemy-select element
+ * The al-select element
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-const AlchemySelect = Function.inherits('Alchemy.Element.Form.Base', 'Select');
-
-/**
- * The remote url attribute
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemySelect.setAttribute('src');
+const AlchemySelect = Function.inherits('Alchemy.Element.Form.WithDataprovider', 'Select');
 
 /**
  * The value clear count
@@ -63,15 +54,6 @@ AlchemySelect.setAttribute('option-item-template');
  */
 AlchemySelect.setTemplateFile('form/elements/alchemy_select');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemySelect.setStylesheetFile('form/alchemy_select');
-
 /**
  * Getter for the value-wrapper div
  *
@@ -135,16 +117,6 @@ AlchemySelect.addElementGetter('result_info', '.result-info');
  */
 AlchemySelect.setAssignedProperty('sortable');
 
-/**
- * The dataprovider is an instance of something that will load
- * the remote data for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemySelect.setAssignedProperty('dataprovider');
-
 /**
  * The value property
  *
@@ -165,7 +137,11 @@ AlchemySelect.setAssignedProperty('value', function getValue(value) {
 });
 
 /**
- * The options property (will be stored in assigned_data)
+ * The options property:
+ * this contains configuration options of this element.
+ *
+ * It does NOT contain things to select from.
+ * Use `values` for that instead!
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
@@ -268,7 +244,7 @@ AlchemySelect.setProperty(function loaded_items() {
  */
 AlchemySelect.setProperty(function loaded_item_count() {
 	if (this.options.values) {
-		return this.options.values.size;
+		return this.options.values.size || 0;
 	} else {
 		return 0;
 	}
@@ -495,7 +471,7 @@ AlchemySelect.setMethod(function introduced() {
 
 	this.addEventListener('keydown', function onKeydown(e) {
 
-		// Only listen for keydowns on the alchemy-select itself
+		// Only listen for keydowns on the al-select itself
 		if (e.target != that) {
 			return;
 		}
@@ -774,12 +750,28 @@ AlchemySelect.setMethod(function getValueData(value) {
 	return data;
 });
 
+/**
+ * Get the data for a specific value,
+ * but make sure it's loaded
+ *
+ * @author   Jelle De Loecker <jelle@develry.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @param    {*}   value
+ *
+ * @return   {Pledge<Object>}
+ */
+AlchemySelect.setMethod(function awaitValueData(value) {
+	return this._ensureValueData(value);
+});
+
 /**
  * Ensure the data for the given value is loaded
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {Number}   page
  *
@@ -802,7 +794,7 @@ AlchemySelect.setMethod(function _ensureValueData(value) {
 
 	this.delayAssemble(pledge);
 
-	this._loadRemote({value: value}).done(function gotValueData(err, result) {
+	this.fetchRemoteData({value: value}).done(function gotValueData(err, result) {
 
 		if (err) {
 			return pledge.reject(err);
@@ -821,7 +813,7 @@ AlchemySelect.setMethod(function _ensureValueData(value) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.2.1
  */
 AlchemySelect.setMethod(function _processPreloadedValues() {
 
@@ -836,12 +828,14 @@ AlchemySelect.setMethod(function _processPreloadedValues() {
 		items     : [],
 	};
 
-	let item,
-	    key;
+	let item;
 
 	let enum_values = new Classes.Alchemy.Map.Enum(values),
 	    value;
 
+	// Make sure to use this new enum instance from now on
+	this.options.values = enum_values;
+
 	for (let key of enum_values.keys()) {
 		value = enum_values.get(key);
 
@@ -875,9 +869,7 @@ AlchemySelect.setMethod(function _processResponseData(response, page) {
 		this.total_item_count = response.available;
 	}
 
-	let records = response.items || response.records,
-	    record,
-	    item;
+	let records = response.items || response.records;
 
 	if (!records) {
 		records = [];
@@ -928,93 +920,49 @@ AlchemySelect.setMethod(function _processResponseList(list, page) {
 });
 
 /**
- * Load remote content
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.8
- *
- * @param    {Number}   page
+ * Construct the config object used to fetch data
  *
- * @return   {Pledge}
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
  */
-AlchemySelect.setMethod(function loadRemote(page) {
-
-	let pledge = new Classes.Pledge();
+AlchemySelect.setMethod(function getRemoteFetchConfig() {
 
 	// Don't perform request when everything has already been loaded
 	if (this.total_item_count >= this.loaded_item_count) {
-		pledge.resolve(true);
 		return;
 	}
 
-	if (!this.src && !this.dataprovider) {
-		pledge.resolve(false);
-		return pledge;
-	}
-
-	if (page == null) {
-		page = 1;
-	}
-
-	const that = this;
-
-	this.loading_dropdown = true;
-
-	let data = {
+	let config = {
 		search : this.search_value,
-		page   : page
-	};
-
-	this._loadRemote(data).done(gotResponse);
-
-	function gotResponse(err, data) {
-
-		if (err) {
-			that.loading_dropdown = false;
-			pledge.resolve(false);
-			throw err;
-		}
-
-		if (page == null || page == 1) {
-			Hawkejs.removeChildren(that.dropdown_content);
-		}
-
-		that._processResponseData(data, page);
-
-		pledge.resolve(true);
+		page   : this.page || 1,
 	};
 
-	return pledge;
+	return config;
 });
 
+
 /**
- * Load remote content
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- *
- * @param    {Object)   config
+ * Apply the fetched data
  *
- * @return   {Pledge}
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
  */
-AlchemySelect.setMethod(function _loadRemote(config) {
+AlchemySelect.setMethod(function applyFetchedData(err, result, config) {
 
-	let pledge;
+	if (err) {
+		this.loading_dropdown = false;
+		return;
+	}
 
-	if (this.dataprovider) {
-		pledge = Blast.Classes.Pledge.cast(this.dataprovider.loadData(config, this));
-	} else {
-		let url = this.src;
+	let page = config.page;
 
-		pledge = this.hawkejs_helpers.Alchemy.getResource({
-			href : url,
-			get  : config
-		});
+	if (page == null || page == 1) {
+		Hawkejs.removeChildren(this.dropdown_content);
 	}
 
-	return pledge;
+	this._processResponseData(result, page);
 });
 
 /**
@@ -1027,8 +975,7 @@ AlchemySelect.setMethod(function _loadRemote(config) {
 AlchemySelect.setMethod(function recreateDropdownElements() {
 
 	let items = this.loaded_items,
-	    item,
-	    key;
+	    item;
 
 	Hawkejs.removeChildren(this.dropdown_content);
 
@@ -1091,7 +1038,7 @@ AlchemySelect.setMethod(function setLastSuccessfulLoadedPage(page) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.8
+ * @version  0.2.0
  *
  * @param    {Number}   page
  */
@@ -1131,9 +1078,8 @@ AlchemySelect.setMethod(function loadOptions(page) {
 		return;
 	}
 
-	// If an URL is provided, use that
-	if (this.src || this.dataprovider) {
-		return this.loadRemote(page);
+	if (this.can_fetch_remote_data) {
+		return this.loadRemoteData({page});
 	}
 
 	let field = this.model_field;
@@ -1291,7 +1237,7 @@ AlchemySelect.setMethod(function close(event) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.0
  *
  * @param    {String}   type    "value" or "option"
  * @param    {Mixed}    value   The actual value of this item
@@ -1301,7 +1247,7 @@ AlchemySelect.setMethod(function close(event) {
  */
 AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 
-	let item = this.createElement('alchemy-select-item');
+	let item = this.createElement('al-select-item');
 
 	// Set the type ("value" or "option")
 	item.type = type;
@@ -1350,7 +1296,7 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 		item.prepareRenderVariables = async function() {
 
 			try {
-				await that.loadRemote();
+				await that.loadRemoteData();
 			} catch (err) {
 				return
 			}
@@ -1796,11 +1742,11 @@ AlchemySelect.setMethod(function applyLocalFilter(query) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.8
+ * @version  0.2.0
  */
 AlchemySelect.setMethod('refreshRemote', Fn.throttle(function refreshRemote() {
 	this.loaded_page = 0;
-	this.loadRemote();
+	this.loadRemoteData();
 }, {
 	minimum_wait  : 350,
 	immediate     : false,

package/element/{alchemy_select_item.js → al_select_item.js}

@@ -1,14 +1,11 @@
 /**
- * The alchemy-select-item element
+ * The al-select-item element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-const Item = Function.inherits('Alchemy.Element.Form.Base', function SelectItem() {
-	SelectItem.super.call(this);
-	this.setAttribute('tabindex', '-1');
-});
+const Item = Function.inherits('Alchemy.Element.Form.Base', 'SelectItem');
 
 /**
  * Set the default inner template
@@ -28,6 +25,15 @@ Item.setTemplateFile('form/elements/alchemy_select_item');
  */
 Item.setAttribute('type');
 
+/**
+ * The type of this item: "value" or "option"
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Item.setAttribute('tabindex', {default: -1});
+
 /**
  * Is this item selected?
  *
@@ -65,16 +71,16 @@ Item.setAssignedProperty('value');
 Item.setAssignedProperty('data');
 
 /**
- * The parent alchemy-select item
+ * The parent al-select item
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.2.0
  */
 Item.enforceProperty(function alchemy_select(new_value) {
 
 	if (new_value == null) {
-		new_value = this.closest('alchemy-select');
+		new_value = this.closest('al-select');
 	}
 
 	return new_value;

package/element/al_state.js

@@ -0,0 +1,26 @@
+/**
+ * The al-state element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const State = Function.inherits('Alchemy.Element.Form.Stateful', 'State');
+
+/**
+ * The name of the state this element represents
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+State.setAttribute('state-name');
+
+/**
+ * Is this state active?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+State.setAttribute('active', {boolean: true});

package/element/{string_input.js → al_string_input.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-string-input custom element
+ * The al-string-input custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -306,7 +306,7 @@ StringInput.setMethod(async function revalidate(trigger, force) {
  * @since    0.1.3
  * @version  0.1.3
  */
- StringInput.setMethod(function introduced() {
+StringInput.setMethod(function introduced() {
 
 	const that = this,
 	      input = this.input_el;