alchemy-form 0.1.12 → 0.2.0

package/element/{alchemy_field.js → al_field.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-field element
+ * The al-field element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -16,15 +16,6 @@ const Field = Function.inherits('Alchemy.Element.Form.Base', 'Field');
  */
 Field.setTemplateFile('form/elements/alchemy_field');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Field.setStylesheetFile('form/alchemy_field');
-
 /**
  * Use a new Renderer scope for the contents
  *
@@ -98,19 +89,19 @@ Field.setAttribute('readonly', {boolean: true});
 Field.setAssignedProperty('widget_settings');
 
 /**
- * Get the parent alchemy-form element
+ * Get the parent al-form element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.2.0
  */
 Field.enforceProperty(function alchemy_form(new_value) {
 
 	if (new_value == null) {
-		new_value = this.queryUp('alchemy-form');
+		new_value = this.queryUp('al-form');
 
 		if (!new_value && this.field_context) {
-			new_value = this.field_context.queryUp('alchemy-form');
+			new_value = this.field_context.queryUp('al-form');
 		}
 
 		if (!new_value && this.alchemy_field_schema && this.alchemy_field_schema.alchemy_field) {
@@ -131,16 +122,16 @@ Field.enforceProperty(function alchemy_form(new_value) {
 Field.addElementGetter('error_area', '.error-area');
 
 /**
- * Get the optional alchemy-field-schema it belongs to
+ * Get the optional al-field-schema it belongs to
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Field.enforceProperty(function alchemy_field_schema(new_value, old_value) {
 
 	if (!new_value) {
-		new_value = this.queryUp('alchemy-field-schema');
+		new_value = this.queryUp('al-field-schema');
 	}
 
 	return new_value;
@@ -189,7 +180,7 @@ Field.enforceProperty(function schema(new_value, old_value) {
 		}
 	}
 
-	// See if the alchemy-form element has an explicit schema instance
+	// See if the al-form element has an explicit schema instance
 	if (!new_value && this.alchemy_form) {
 		new_value = this.alchemy_form.schema;
 	}
@@ -535,7 +526,7 @@ Field.setProperty(function original_value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.2.0
  */
 Field.setProperty(function value_element() {
 
@@ -543,11 +534,11 @@ Field.setProperty(function value_element() {
 
 	// Translations always get preference
 	if (this.is_translatable) {
-		input = this.querySelector('alchemy-field-translatable');
+		input = this.querySelector('al-field-translatable');
 	} else if (this.is_array) {
-		input = this.querySelector('alchemy-field-array');
+		input = this.querySelector('al-field-array');
 	} else if (this.contains_schema) {
-		input = this.querySelector('alchemy-field-schema');
+		input = this.querySelector('al-field-schema');
 	}
 
 	if (!input) {
@@ -779,7 +770,7 @@ Field.setMethod(function removeErrors() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.3
+ * @version  0.2.0
  */
 Field.setMethod(function retained() {
 
@@ -795,7 +786,7 @@ Field.setMethod(function retained() {
 		this.id = id;
 	}
 
-	let label = this.querySelector('.form-field-info alchemy-label');
+	let label = this.querySelector('.form-field-info al-label');
 
 	if (label && this.value_element) {
 		let v_id = this.id + '_fv';

package/element/{alchemy_field_array.js → al_field_array.js}

@@ -1,13 +1,11 @@
 /**
- * The alchemy-field-array element
+ * The al-field-array element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-var FieldArray = Function.inherits('Alchemy.Element.Form.FieldCustom', function FieldArray() {
-	FieldArray.super.call(this);
-});
+const FieldArray = Function.inherits('Alchemy.Element.Form.FieldCustom', 'FieldArray');
 
 /**
  * The template to use for the content of this element
@@ -18,25 +16,16 @@ var FieldArray = Function.inherits('Alchemy.Element.Form.FieldCustom', function
  */
 FieldArray.setTemplateFile('form/elements/alchemy_field_array');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-FieldArray.setStylesheetFile('form/alchemy_field_array');
-
 /**
  * Get the live value
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldArray.setProperty(function value() {
 
-	let entries = this.queryAllNotNested('alchemy-field-array-entry'),
+	let entries = this.queryAllNotNested('al-field-array-entry'),
 	    result = [],
 	    entry,
 	    i;
@@ -58,7 +47,7 @@ FieldArray.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldArray.setMethod(function introduced() {
 
@@ -68,7 +57,7 @@ FieldArray.setMethod(function introduced() {
 
 		e.preventDefault();
 
-		let entry = e.target.queryUp('alchemy-field-array-entry');
+		let entry = e.target.queryUp('al-field-array-entry');
 
 		entry.remove();
 	});
@@ -89,7 +78,7 @@ FieldArray.setMethod(function introduced() {
 				throw new Error('Unable to add new entry for field "' + alchemy_field.field_title + '", no view files found');
 			}
 
-			let new_entry = that.createElement('alchemy-field-array-entry');
+			let new_entry = that.createElement('al-field-array-entry');
 
 			new_entry.alchemy_field_array = that;
 

package/element/{alchemy_field_array_entry.js → al_field_array_entry.js}

@@ -1,13 +1,11 @@
 /**
- * The alchemy-field-array-entry element
+ * The al-field-array-entry element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-var FieldArrayEntry = Function.inherits('Alchemy.Element.Form.FieldEntry', function FieldArrayEntry() {
-	FieldArrayEntry.super.call(this);
-});
+const FieldArrayEntry = Function.inherits('Alchemy.Element.Form.FieldEntry', 'FieldArrayEntry');
 
 /**
  * The template to use for the content of this element
@@ -19,16 +17,16 @@ var FieldArrayEntry = Function.inherits('Alchemy.Element.Form.FieldEntry', funct
 FieldArrayEntry.setTemplateFile('form/elements/alchemy_field_array_entry');
 
 /**
- * Get a reference to the alchemy-field-array parent
+ * Get a reference to the al-field-array parent
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldArrayEntry.enforceProperty(function alchemy_field_array(new_value, old_value) {
 
 	if (!new_value) {
-		new_value = this.queryUp('alchemy-field-array');
+		new_value = this.queryUp('al-field-array');
 	}
 
 	return new_value;
@@ -39,7 +37,7 @@ FieldArrayEntry.enforceProperty(function alchemy_field_array(new_value, old_valu
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.3
- * @version  0.1.3
+ * @version  0.2.0
  */
 FieldArrayEntry.setProperty(function index() {
 
@@ -59,7 +57,7 @@ FieldArrayEntry.setProperty(function index() {
 		for (let i = 0; i < container.entries_element.children.length; i++) {
 			child = container.entries_element.children[i];
 
-			if (child.tagName == 'ALCHEMY-FIELD-ARRAY-ENTRY') {
+			if (child.tagName == 'AL-FIELD-ARRAY-ENTRY') {
 				counter++;
 			}
 

package/element/{alchemy_field_schema.js → al_field_schema.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-field-schema element
+ * The al-field-schema element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -98,11 +98,11 @@ FieldSchema.setProperty(function sub_fields() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldSchema.setProperty(function value() {
 
-	let entries = this.queryAllNotNested('alchemy-field'),
+	let entries = this.queryAllNotNested('al-field'),
 	    result = {},
 	    entry,
 	    i;

package/element/{alchemy_field_translatable.js → al_field_translatable.js}

@@ -1,13 +1,11 @@
 /**
- * The alchemy-field-translatable element
+ * The al-field-translatable element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-var FieldTranslatable = Function.inherits('Alchemy.Element.Form.FieldCustom', function FieldTranslatable() {
-	FieldTranslatable.super.call(this);
-});
+const FieldTranslatable = Function.inherits('Alchemy.Element.Form.FieldCustom', 'FieldTranslatable');
 
 /**
  * The template to use for the content of this element
@@ -18,25 +16,16 @@ var FieldTranslatable = Function.inherits('Alchemy.Element.Form.FieldCustom', fu
  */
 FieldTranslatable.setTemplateFile('form/elements/alchemy_field_translatable');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-FieldTranslatable.setStylesheetFile('form/alchemy_field_translatable');
-
 /**
  * Get the live value
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldTranslatable.setProperty(function value() {
 
-	let entries = this.queryAllNotNested('alchemy-field-translatable-entry'),
+	let entries = this.queryAllNotNested('al-field-translatable-entry'),
 	    result = {},
 	    entry,
 	    i;
@@ -58,12 +47,12 @@ FieldTranslatable.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldTranslatable.setMethod(function showPrefix(prefix) {
 
 	let buttons = this.queryAllNotNested('.prefix-buttons button'),
-	    entries = this.queryAllNotNested('alchemy-field-translatable-entry'),
+	    entries = this.queryAllNotNested('al-field-translatable-entry'),
 	    element,
 	    i;
 

package/element/{alchemy_field_translatable_entry.js → al_field_translatable_entry.js}

@@ -1,13 +1,11 @@
 /**
- * The alchemy-field-translatable-entry element
+ * The al-field-translatable-entry element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-var FieldTranslatableEntry = Function.inherits('Alchemy.Element.Form.FieldEntry', function FieldTranslatableEntry() {
-	FieldTranslatableEntry.super.call(this);
-});
+const FieldTranslatableEntry = Function.inherits('Alchemy.Element.Form.FieldEntry', 'FieldTranslatableEntry');
 
 /**
  * The template to use for the content of this element

package/element/{alchemy_form.js → al_form.js}

@@ -1,20 +1,11 @@
 /**
- * The alchemy-form element
+ * The al-form element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-var Form = Function.inherits('Alchemy.Element.Form.Base', 'Form');
-
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Form.setStylesheetFile('form/alchemy_form');
+const Form = Function.inherits('Alchemy.Element.Form.Base', 'Form');
 
 /**
  * The attribute to use for the route
@@ -97,11 +88,11 @@ Form.setProperty(function main_error_area() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.2
+ * @version  0.2.0
  */
 Form.setProperty(function value() {
 
-	let fields = this.queryAllNotNested('alchemy-field'),
+	let fields = this.queryAllNotNested('al-field'),
 	    result = {},
 	    field,
 	    key,
@@ -282,7 +273,7 @@ Form.setMethod(async function showViolations(err) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {String}   path
  *
@@ -304,9 +295,9 @@ Form.setMethod(function findFieldByPath(path) {
 		}
 
 		if (current.config && current.config.is_array) {
-			query = 'alchemy-field-array-entry:nth-child(' + (Number(piece) + 1) + ') .field > *';
+			query = 'al-field-array-entry:nth-child(' + (Number(piece) + 1) + ') .field > *';
 		} else {
-			query = 'alchemy-field[field-name="' + piece + '"]';
+			query = 'al-field[field-name="' + piece + '"]';
 		}
 
 		current = current.queryAllNotNested(query)[0];

package/element/{alchemy_label.js → al_label.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-label custom element
+ * The al-label custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -7,15 +7,6 @@
  */
 const AlchemyLabel = Function.inherits('Alchemy.Element.Form.Base', 'Label');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemyLabel.setStylesheetFile('form/alchemy_form');
-
 /**
  * The linked element
  *

package/element/{number_input.js → al_number_input.js}

@@ -1,11 +1,11 @@
 /**
- * The alchemy-number-input custom element
+ * The al-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');
+const NumberInput = Function.inherits('Alchemy.Element.Form.FeedbackInput', 'NumberInput');
 
 /**
  * The hawkejs template to use

package/element/{alchemy_pager.js → al_pager.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-pager element
+ * The al-pager element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -12,41 +12,32 @@ const Pager = Function.inherits('Alchemy.Element.Form.Base', 'Pager');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.12
+ * @version  0.2.0
  */
 Pager.setTemplate(`<ul>
 	<li class="afp-first">
 		<a href="#" aria-label="First page">
-			<al-ico icon-name="left-to-line"></al-ico>
+			<al-icon icon-name="left-to-line"></al-icon>
 		</a>
 	</li>
 	<li class="afp-prev">
 		<a href="#" aria-label="Previous page">
-			<al-ico icon-name="left"></al-ico>
+			<al-icon icon-name="left"></al-icon>
 		</a>
 	</li>
 
 	<li class="afp-next">
 		<a href="#" aria-label="Next page">
-			<al-ico icon-name="right"></al-ico>
+			<al-icon icon-name="right"></al-icon>
 		</a>
 	</li>
 	<li class="afp-last">
 		<a href="#" aria-label="Last page">
-			<al-ico icon-name="right-to-line"></al-ico>
+			<al-icon icon-name="right-to-line"></al-icon>
 		</a>
 	</li>
 </ul>`, true);
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Pager.setStylesheetFile('form/alchemy_pager');
-
 /**
  * Pager links
  *
@@ -176,7 +167,7 @@ Pager.setMethod(function getVisiblePagesElements() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {Number}   page
  * @param    {Number}   amount_of_pages
@@ -209,7 +200,8 @@ Pager.setMethod(function showPage(page, amount_of_pages) {
 	    nr,
 	    i;
 
-	if (src && url_param) {
+	// Create let scope
+	if (true) {
 		let first_anchor = this.link_first.children[0],
 		    prev_anchor = this.link_prev.children[0],
 		    next_anchor = this.link_next.children[0],
@@ -217,46 +209,59 @@ Pager.setMethod(function showPage(page, amount_of_pages) {
 		    data,
 		    url;
 
-		data = {};
-		data[url_param] = {page: 1};
-		url = RURL.parse(src);
-		url.param(data);
+		if (url_param) {
+			data = {};
+			data[url_param] = {page: 1};
+			url = RURL.parse(src);
+			url.param(data);
+			first_anchor.setAttribute('href', url);
+		}
 
-		first_anchor.setAttribute('href', url);
+		first_anchor.dataset.page = 1;
 
 		let prev = page - 1;
 
 		if (prev < 1) prev = 1;
 
-		data = {};
-		data[url_param] = {page: prev};
-		url = RURL.parse(src);
-		url.param(data);
+		if (url_param) {
+			data = {};
+			data[url_param] = {page: prev};
+			url = RURL.parse(src);
+			url.param(data);
+			prev_anchor.setAttribute('href', url);
+		}
 
-		prev_anchor.setAttribute('href', url);
+		prev_anchor.dataset.page = prev;
 
 		let next = page + 1;
 
 		if (next > amount_of_pages) {
 			next_anchor.href = '#';
 			next_anchor.disabled = true;
+			next_anchor.removeAttribute('data-page');
 		} else {
 			next_anchor.disabled = false;
 
+			if (url_param) {
+				data = {};
+				data[url_param] = {page: next};
+				url = RURL.parse(src);
+				url.param(data);
+				next_anchor.setAttribute('href', url);
+			}
+
+			next_anchor.dataset.page = next;
+		}
+
+		if (url_param) {
 			data = {};
-			data[url_param] = {page: next};
+			data[url_param] = {page: amount_of_pages};
 			url = RURL.parse(src);
 			url.param(data);
-
-			next_anchor.setAttribute('href', url);
+			last_anchor.setAttribute('href', url);
 		}
 
-		data = {};
-		data[url_param] = {page: amount_of_pages};
-		url = RURL.parse(src);
-		url.param(data);
-
-		last_anchor.setAttribute('href', url);
+		last_anchor.dataset.page = amount_of_pages;
 	}
 
 	for (i = 0; i < page_links.length; i++) {
@@ -316,13 +321,16 @@ Pager.setMethod(function introduced() {
 
 	this.addEventListener('click', function onClick(e) {
 
-		if (e.target.nodeName != 'A') {
-			return;
-		}
-
-		let page_nr_el = e.target.queryParents('[data-page]');
+		let page_nr_el = e.target.queryUp('[data-page]');
 
 		if (!page_nr_el) {
+
+			let anchor = e.target.queryUp('a');
+
+			if (anchor && anchor.href == '#') {
+				e.preventDefault();
+			}
+
 			return;
 		}
 

package/element/{query_builder.js → al_query_builder.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-toggle custom element
+ * The al-toggle custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
@@ -14,16 +14,7 @@ const QueryBuilder = Function.inherits('Alchemy.Element.Form.Base', 'QueryBuilde
  * @since    0.1.6
  * @version  0.1.6
  */
-QueryBuilder.setTemplate(`<alchemy-query-builder-group></alchemy-query-builder-group>`, {plain_html: true, render_immediate: true});
-
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.6
- * @version  0.1.6
- */
-QueryBuilder.setStylesheetFile('form/query_builder');
+QueryBuilder.setTemplate(`<al-query-builder-group></al-query-builder-group>`, {plain_html: true, render_immediate: true});
 
 /**
  * The dataprovider used to get the variables
@@ -41,7 +32,7 @@ QueryBuilder.setAssignedProperty('dataprovider');
  * @since    0.1.6
  * @version  0.1.6
  */
-QueryBuilder.addElementGetter('root_group', ':scope > alchemy-query-builder-group');
+QueryBuilder.addElementGetter('root_group', ':scope > al-query-builder-group');
 
 /**
  * Get/set the value

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

@@ -335,7 +335,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 +344,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';