alchemy-form 0.1.12 → 0.2.0

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
@@ -186,7 +186,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
  *
@@ -495,7 +467,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;
 		}
@@ -779,7 +751,7 @@ AlchemySelect.setMethod(function getValueData(value) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {Number}   page
  *
@@ -802,7 +774,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);
@@ -928,93 +900,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
+ * Apply the fetched data
  *
- * @param    {Object)   config
- *
- * @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);
 });
 
 /**
@@ -1091,7 +1019,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 +1059,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 +1218,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 +1228,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 +1277,7 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 		item.prepareRenderVariables = async function() {
 
 			try {
-				await that.loadRemote();
+				await that.loadRemoteData();
 			} catch (err) {
 				return
 			}
@@ -1796,11 +1723,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;

package/element/al_tab_button.js

@@ -0,0 +1,138 @@
+/**
+ * The al-tab-button element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const TabButton = Function.inherits('Alchemy.Element.Form.TabBase', 'TabButton');
+
+/**
+ * Set the ARIA role of the element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setRole('tab');
+
+/**
+ * Only the active tab should be tabable
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setAttribute('tabindex', {default: -1});
+
+/**
+ * The name of the tab
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setAttribute('tab-name');
+
+/**
+ * Is this tab active?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setAttribute('active', null, function setActive(value) {
+
+	if (value != null) {
+		this.activate(value);
+	}
+
+	return value;
+}, {boolean: true});
+
+/**
+ * Get the corresponding tab content element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setMethod(function getContentElement() {
+
+	const tab_name = this.dataset.tabName;
+
+	if (!tab_name) {
+		return;
+	}
+
+	let context = this.tab_context;
+
+	if (!context) {
+		return;
+	}
+
+	return context.querySelector('al-tab-content[tab-name="' + tab_name + '"]');
+});
+
+/**
+ * Activate this tab
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setMethod(function activate(value) {
+
+	let context = this.tab_context;
+
+	if (!context) {
+		return;
+	}
+
+	if (value == null) {
+		value = true;
+	}
+
+	let all_buttons = context.getAllTabButtons(),
+	    all_contents = context.getAllTabContents();
+
+	this.setAttributeSilent('active', value);
+
+	// If this tab is activated, others have to be deactivated
+	if (value) {
+		for (let button of all_buttons) {
+			if (button != this && button.active) {
+				button.active = false;
+			}
+		}
+
+		this.setAttribute('aria-selected', true);
+		this.setAttribute('tabindex', 0);
+	} else {
+		this.removeAttribute('aria-selected');
+		this.setAttribute('tabindex', -1);
+	}
+
+	for (let content of all_contents) {
+		if (content.tab_name == this.tab_name) {
+			content.active = value;
+		} else if (value) {
+			content.active = false;
+		}
+	}
+
+});
+
+/**
+ * Added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setMethod(function introduced() {
+
+	this.addEventListener('click', e => {
+		this.activate();
+	});
+});

package/element/al_tab_context.js

@@ -0,0 +1,102 @@
+/**
+ * The al-tab-context element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const TabContext = Function.inherits('Alchemy.Element.Form.TabBase', 'TabContext');
+
+/**
+ * The "value", or active tab
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {AlchemyTabButton[]}
+ */
+TabContext.setAttribute('value', function getValue(value) {
+
+	let all_buttons = this.getAllTabButtons();
+
+	if (all_buttons.length) {
+		value = '';
+
+		for (let entry of all_buttons) {
+			if (entry.active) {
+				value = entry.tab_name;
+				break;
+			}
+		}
+	}
+
+	return value;
+	
+}, function setValue(value) {
+
+	let all_buttons = this.getAllTabButtons(),
+	    activated = false;
+
+	if (all_buttons.length) {
+		for (let entry of all_buttons) {
+			if (entry.tab_name == value) {
+				entry.active = true;
+				activated = true;
+			} else {
+				entry.active = false;
+			}
+		}
+
+		// If nothing was activated, activate the first one
+		if (!activated) {
+			all_buttons[0].active = true;
+			value = all_buttons[0].tab_name;
+		}
+	}
+
+	return value;
+});
+
+/**
+ * Do something when this element is retained
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabContext.setMethod(function retained() {
+
+	let value = this.value;
+
+	if (!value) {
+		// Trigger setValue, which will select the first tab
+		this.value = '';
+	}
+});
+
+/**
+ * Get all the tab buttons
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {AlchemyTabButton[]}
+ */
+TabContext.setMethod(function getAllTabButtons() {
+	return this.queryAllNotNested('al-tab-button');
+});
+
+/**
+ * Get all the tab contents
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {AlchemyTabButton[]}
+ */
+TabContext.setMethod(function getAllTabContents() {
+	return this.queryAllNotNested('al-tab-panel');
+});