alchemy-form 0.1.8 → 0.1.11

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 0.1.11 (2022-07-23)
+
+* Upgrade to `alchemy-media` v0.6.3
+* Add `purpose` and `mode` attributes to AlchemyForm-based elements for improved field-template getting
+* Add first few `edit_inline` and `view_inline` field templates
+
+## 0.1.10 (2022-07-14)
+
+* Hide `code-input` contents until it's fully loaded
+* Don't crash when failing to get a field definition in a table
+
+## 0.1.9 (2022-07-06)
+
+* Allow supplying a custom `data-src` to `alchemy-field` elements
+* Add `view` templates for File & Datetime fields
+* Use the new `alchemy.getClientModel()` method in `alchemy-field` element
+* Add `alchemy-password-input` element
+
 ## 0.1.8 (2022-06-29)
 
 * Move the `alchemy-select` pagination checker initializer to a static function

package/assets/stylesheets/form/alchemy_field.scss

@@ -1,3 +1,36 @@
 alchemy-field {
 	display: block;
+
+	&[field-type="boolean"] {
+		
+		.field {
+			display: flex;
+			justify-content: center;
+		}
+
+		.boolean-wrapper {
+			&.boolean-true {
+				--boolean-color: green;
+				--text-color: white;
+			}
+
+			&.boolean-false {
+				--boolean-color: red;
+				--text-color: white;
+			}
+
+			&.boolean-null {
+				--boolean-color: #f3f3f3;
+				--text-color: #666;
+				font-style: italic;
+			}
+
+			background-color: var(--boolean-color);
+			border-radius: 5px;
+			padding: 4px 8px;
+			min-width: 1rem;
+			color: var(--text-color, white);
+			display: inline-flex;
+		}
+	}
 }

package/assets/stylesheets/form/alchemy_select.scss

@@ -39,7 +39,7 @@ alchemy-select {
 		align-items: center;
 
 		input.type-area {
-			height: 1.5rem;
+			height: 1.5rem !important;
 		}
 	}
 

package/element/00_form_base.js

@@ -5,9 +5,7 @@
  * @since    0.1.0
  * @version  0.1.0
  */
-var Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Form', function Base() {
-	Base.super.call(this);
-});
+var Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Form', 'Base');
 
 /**
  * Set the custom element prefix
@@ -59,27 +57,67 @@ Base.setStatic(function addParentTypeGetter(name, type) {
 });
 
 /**
- * The view-type determines which type of wrapper/field to use,
- * e.g.: view, list, edit, ...
+ * The purpose determines what the goal of the field is.
+ * Is it for editing or viewing?
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.1.11
+ * @version  0.1.11
  */
-Base.setProperty(function view_type() {
+Base.setAttribute('purpose', function getPurpose(value) {
+
+	if (value) {
+		return value;
+	}
 
-	var value = this.getAttribute('view-type');
+	value = this.getAttribute('view-type');
 
 	if (!value && this.alchemy_form) {
 		value = this.alchemy_form.view_type;
 	}
 
+	// Fallback to the "edit" type
 	if (!value) {
 		value = 'edit';
 	}
 
 	return value;
+});
+
+/**
+ * The mode is used as a hint to how this element should be rendered.
+ * Could be "inline", "standalone", ...
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ */
+Base.setAttribute('mode');
 
+/**
+ * The view-type determines which type of wrapper/field to use,
+ * e.g.: view, list, edit, ...
+ * 
+ * @deprecated   You should use `purpose` for this
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.11
+ */
+Base.setProperty(function view_type() {
+
+	if (this.hasAttribute('view-type')) {
+		return this.getAttribute('view-type');
+	}
+
+	let purpose = this.purpose,
+	    mode = this.mode;
+	
+	if (mode) {
+		purpose += '_' + mode;
+	}
+
+	return purpose;
 }, function setViewType(value) {
 
 	if (value == null) {
@@ -88,6 +126,7 @@ Base.setProperty(function view_type() {
 		this.setAttribute('view-type', value);
 	}
 
+	return value;
 });
 
 /**

package/element/alchemy_field.js

@@ -34,6 +34,15 @@ Field.setStylesheetFile('form/alchemy_field');
  */
 Field.setStatic('use_new_renderer_scope', true);
 
+/**
+ * The data source url/route to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+Field.setAttribute('data-src');
+
 /**
  * The name of the field
  *
@@ -160,7 +169,7 @@ Field.enforceProperty(function config(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.9
  */
 Field.enforceProperty(function schema(new_value, old_value) {
 
@@ -181,15 +190,10 @@ Field.enforceProperty(function schema(new_value, old_value) {
 		let model_name = this.model;
 
 		if (model_name) {
-			// @TODO: Always get the Client-side model here
-			let model = alchemy.getModel(model_name);
+			let model = alchemy.getClientModel(model_name);
 
 			if (model) {
 				new_value = model.schema;
-
-				if (Blast.isNode) {
-					new_value = JSON.clone(new_value, 'toHawkejs');
-				}
 			}
 		}
 	}
@@ -345,60 +349,55 @@ Field.setProperty(function model() {
 });
 
 /**
- * Get the view to use for this field
+ * Get the preferred view file to use for this field
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Field.enforceProperty(function view_file(new_value, old_value) {
 
 	if (!new_value) {
 
-		let config = this.config,
-		    view_type = this.view_type;
+		let view_type = this.view_type,
+			field_view = this.field_view || this.field_type;
+		
+		if (!field_view) {
+			let config = this.config;
 
-		if (config) {
-
-			let field_view;
-
-			if (this.field_view) {
-				field_view = this.field_view;
-			} else {
+			if (config) {
 				field_view = config.constructor.type_name;
 			}
-
-			new_value = 'form/inputs/' + view_type + '/' + field_view;
 		}
+
+		new_value = this.generateTemplatePath('inputs', view_type, field_view);
 	}
 
 	return new_value;
 });
 
-
 /**
- * Get the wrapper to use for this field
+ * Get the preferred wrapper to use for this field
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Field.enforceProperty(function wrapper_file(new_value, old_value) {
 
 	if (!new_value) {
 
-		let config = this.config,
-		    view_type = this.view_type;
-
 		let wrapper_type = this.wrapper_type;
 
 		if (wrapper_type === false) {
 			return false;
 		}
 
-		if (config) {
-			let field_type = config.constructor.type_name;
-			return 'form/wrappers/' + view_type + '/' + field_type;
+		let field_type = this.getFieldType(),
+		     view_type = this.view_type;
+
+		if (field_type) {
+			return this.generateTemplatePath('wrappers', view_type, field_type);
 		}
 	}
 
@@ -410,7 +409,7 @@ Field.enforceProperty(function wrapper_file(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Field.setProperty(function view_files() {
 
@@ -421,14 +420,20 @@ Field.setProperty(function view_files() {
 		result.push(view_file);
 	}
 
-	let config = this.config,
+	let field_type = this.getFieldType(),
 	    view_type = this.view_type;
 
-	if (config) {
-		let field_type = config.constructor.type_name,
-		    view = 'form/inputs/' + view_type + '/' + field_type;
-
+	if (field_type) {
+		let view = this.generateTemplatePath('inputs', view_type, field_type);
+		
 		result.push(view);
+
+		let purpose = this.purpose;
+
+		if (purpose) {	
+			view = this.generateTemplatePath('inputs', purpose, field_type);
+			result.push(view);
+		}
 	}
 
 	if (result.length == 0) {
@@ -436,7 +441,7 @@ Field.setProperty(function view_files() {
 	}
 
 	// Fallback to a simple string input
-	result.push('form/inputs/' + view_type + '/string');
+	result.push(this.generateTemplatePath('inputs', view_type, 'string'));
 
 	return result;
 });
@@ -446,7 +451,7 @@ Field.setProperty(function view_files() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Field.setProperty(function wrapper_files() {
 
@@ -462,22 +467,21 @@ Field.setProperty(function wrapper_files() {
 		result.push(wrapper_file);
 	}
 
-	let config = this.config,
+	let field_type = this.getFieldType(),
 	    view_type = this.view_type;
 
-	if (config) {
-		let field_type = config.constructor.type_name,
-		    view = 'form/wrappers/' + view_type + '/' + field_type;
+	if (field_type) {
+		let view = this.generateTemplatePath('wrappers', view_type, field_type);
 
 		result.push(view);
 
-		view = 'form/wrappers/' + view_type + '/default';
+		view = this.generateTemplatePath('wrappers', view_type, 'default');
 		result.push(view);
 
-		view = 'form/wrappers/default/' + field_type;
+		view = this.generateTemplatePath('wrappers', 'default', field_type);
 		result.push(view);
 
-		view = 'form/wrappers/default/default';
+		view = this.generateTemplatePath('wrappers', 'default', 'default');
 		result.push(view);
 	}
 
@@ -580,6 +584,48 @@ Field.setProperty(function value() {
 	}
 });
 
+/**
+ * Get the field type
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ *
+ * @return   {String}
+ */
+Field.setMethod(function getFieldType() {
+
+	let result = this.field_type;
+
+	if (!result) {
+		let config = this.config;
+
+		if (config) {
+			result = config.constructor.type_name;
+		}
+	}
+
+	return result;
+});
+
+/**
+ * Generate a template path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ *
+ * @param    {String}   container_type   The container (inputs/wrappers)
+ * @param    {String}   view_type        The view (edit/view/edit_inline/...)
+ * @param    {String}   field_type       The name of the field (and thus the view)
+ *
+ * @return   {String}
+ */
+Field.setMethod(function generateTemplatePath(container_type, view_type, field_type) {
+	let result = 'form/' + container_type + '/' + view_type + '/' + field_type;
+	return result;
+});
+
 /**
  * Get the rule violations for this field
  *
@@ -715,7 +761,7 @@ Field.setMethod(function retained() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.9
  *
  * @param    {Object}        config
  * @param    {HTMLElement}   element
@@ -742,7 +788,7 @@ Field.setMethod(async function loadData(config, element) {
 			}
 		}
 
-		return this.hawkejs_helpers.Alchemy.getResource({
+		let resource_options = {
 			name  : 'FormApi#related',
 			post  : true,
 			body  : {
@@ -751,7 +797,13 @@ Field.setMethod(async function loadData(config, element) {
 				assoc_model  : field.options.modelName,
 				config       : config,
 			}
-		});
+		};
+
+		if (this.data_src) {
+			resource_options.name = this.data_src;
+		}
+
+		return this.hawkejs_helpers.Alchemy.getResource(resource_options);
 	}
 
 });

package/element/alchemy_field_array.js

@@ -86,7 +86,7 @@ FieldArray.setMethod(function introduced() {
 			let view_files = alchemy_field.view_files;
 
 			if (!view_files || !view_files.length) {
-				throw new Error('Unable to add new entry for ' + alchemy_field.field_title);
+				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');

package/element/alchemy_password_input.js

@@ -0,0 +1,141 @@
+/**
+ * The number-input custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+const PasswordInput = Function.inherits('Alchemy.Element.Form.StringInput', 'PasswordInput');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setTemplateFile('form/elements/password_input');
+
+/**
+ * Reference to the repeat input element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.addElementGetter('repeat_el', '.repeat-input');
+
+/**
+ * Reference to the repeat label element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.addElementGetter('repeat_label', '.repeat-input-label');
+
+/**
+ * The value property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setProperty(function value() {
+
+	let val;
+
+	if (this.input_el) {
+		val = this.input_el.value;
+	}
+
+	if (!val) {
+		return undefined;
+	}
+
+	if (!this.valuesAreEqual()) {
+		return undefined;
+	}
+
+	return val;
+});
+
+/**
+ * Are both inputs the same?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(function valuesAreEqual() {
+
+	let first_value = this.input_el?.value,
+	    repeat_value = this.repeat_el?.value;
+	
+	return first_value == repeat_value;
+});
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(async function revalidate() {
+
+	let first_value = this.input_el?.value,
+	    repeat_value = this.repeat_el.value;
+
+	if (first_value) {
+		this.repeat_label.hidden = false;
+	} else {
+		this.repeat_el.value = '';
+		this.repeat_label.hidden = true;
+	}
+
+	this.removeErrors();
+
+	if (!first_value && !repeat_value) {
+		return;
+	}
+
+	if (first_value != repeat_value) {
+		return this.addError(this.__('does-not-match'), true);
+	}
+
+	return revalidate.super.call(this);
+});
+
+/**
+ * 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.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(function introduced() {
+
+	const that = this;
+
+	introduced.super.call(this);
+
+	this.repeat_el.addEventListener('focus', function onFocus(e) {
+		that.inputbox_el.classList.add('focus');
+	});
+
+	this.repeat_el.addEventListener('blur', function onBlur(e) {
+		that.inputbox_el.classList.remove('focus');
+	});
+
+	this.repeat_el.addEventListener('keyup', Fn.throttle(function onKeyup(e) {
+		that.revalidate();
+		that.emit('changing');
+	}, {
+		minimum_wait  : 350,
+		immediate     : false,
+		reset_on_call : true
+	}));
+
+});

package/element/alchemy_table.js

@@ -25,7 +25,7 @@ Table.setTemplate(`<header class="aft-header"></header>
 		<tfoot></tfoot>
 	</table>
 </div>
-<footer class="aft-footer"></footer>`, {plain_html: true, render_immediate: true});
+<footer data-he-slot="footer" class="aft-footer"></footer>`, {plain_html: true, render_immediate: true});
 
 /**
  * The stylesheet to load for this element
@@ -126,6 +126,15 @@ Table.setAttribute('page-size', {number: true});
  */
 Table.setAttribute('show-filters', {boolean: true});
 
+/**
+ * Which optional view-type to use for field values
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ */
+Table.setAttribute('view-type');
+
 /**
  * Keep track of the loadRemote calls
  *
@@ -287,7 +296,7 @@ Table.addObservedAttribute('src', function onSource(src) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @param    {*}   config
  */
@@ -302,7 +311,11 @@ Table.setMethod(function setRecordsource(config) {
 	}
 
 	if (url == '#') {
-		url = ''+this.getCurrentUrl();
+		let current_url = this.getCurrentUrl();
+
+		if (current_url) {
+			url = ''+current_url;
+		}
 	}
 
 	this.src = url;
@@ -350,7 +363,7 @@ Table.setMethod(function clearBody() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @return   {Number}
  */
@@ -365,14 +378,17 @@ Table.setMethod(function getWantedPage() {
 	if (this.id) {
 		let url = this.getCurrentUrl();
 
-		let data = url.param('aft');
+		if (url) {
 
-		if (data && data[this.id]) {
-			page = parseInt(data[this.id].page);
-		}
+			let data = url.param('aft');
+
+			if (data && data[this.id]) {
+				page = parseInt(data[this.id].page);
+			}
 
-		if (isFinite(page) && page > 0) {
-			return page;
+			if (isFinite(page) && page > 0) {
+				return page;
+			}
 		}
 	}
 
@@ -384,7 +400,7 @@ Table.setMethod(function getWantedPage() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @return   {Number}
  */
@@ -405,11 +421,11 @@ Table.setMethod(function getWantedSort() {
 	let url_param = this.getBaseUrlParam() + '[sort]',
 	    url = this.getCurrentUrl();
 
-	if (!result.field) {
+	if (!result.field && url) {
 		result.field = url.param(url_param + '[field]');
 	}
 
-	if (!result.dir) {
+	if (!result.dir && url) {
 		result.dir = url.param(url_param + '[dir]');
 	}
 
@@ -424,7 +440,7 @@ Table.setMethod(function getWantedSort() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @return   {Object}
  */
@@ -433,6 +449,11 @@ Table.setMethod(function getWantedFilters() {
 	if (!this.filters) {
 
 		let url = this.getCurrentUrl();
+
+		if (!url) {
+			return null;
+		}
+
 		let data = url.param('aft');
 		let filters;
 
@@ -486,15 +507,20 @@ Table.setMethod(function getBaseUrlParam() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @return   {RURL}
  */
 Table.setMethod(function getCurrentStateUrl() {
 
+	let url = this.getCurrentUrl();
+
+	if (!url) {
+		return null;
+	}
+
 	let url_param = this.getBaseUrlParam(),
-	    page = this.getWantedPage(),
-	    url = this.getCurrentUrl();
+	    page = this.getWantedPage();
 
 	url.param(url_param + '[page]', page);
 
@@ -513,7 +539,7 @@ Table.setMethod(function getCurrentStateUrl() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.11
  *
  * @param    {Array}   records
  */
@@ -526,7 +552,7 @@ Table.setMethod(function setRecords(records) {
 	let record;
 
 	for (record of records) {
-		this.table_body.append(this.createDataRow(record));
+		this.addDataRow(record);
 	}
 
 	this.showPagination();
@@ -565,7 +591,7 @@ Table.setMethod(function setFilter(field, value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  */
 Table.setMethod(function showPagination() {
 
@@ -575,6 +601,12 @@ Table.setMethod(function showPagination() {
 		return;
 	}
 
+	let url = this.getCurrentUrl();
+
+	if (!url) {
+		return;
+	}
+
 	let pager = this.querySelector('alchemy-pager');
 
 	if (!pager) {
@@ -582,7 +614,7 @@ Table.setMethod(function showPagination() {
 		this.footer.append(pager);
 	}
 
-	pager.src = this.getCurrentUrl();
+	pager.src = url;
 	pager.url_param = this.getBaseUrlParam();
 	pager.page_size = records.page_size;
 
@@ -594,7 +626,7 @@ Table.setMethod(function showPagination() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.8
- * @version  0.1.8
+ * @version  0.1.11
  *
  * @param    {FieldConfig}   field_config   The config on how to display the field
  * @param    {Object}        container      The container where the field should be in
@@ -603,8 +635,18 @@ Table.setMethod(function showPagination() {
  */
 Table.setMethod(function getFieldConfigView(field_config, container) {
 
+	if (typeof field_config == 'string') {
+		field_config = this.fieldset.get(field_config);
+	}
+
 	let value = field_config.getValueIn(container),
-	    field = field_config.getFieldDefinition();
+	    field;
+	
+	try {
+		field = field_config.getFieldDefinition();
+	} catch (err) {
+		console.error('Failed to get field definition:', err);
+	}
 	
 	if (value == null && !field) {
 		return null;
@@ -618,7 +660,10 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
 	}
 
 	let alchemy_field = this.createElement('alchemy-field');
-	alchemy_field.view_type = 'view_inline';
+	alchemy_field.purpose = this.purpose || 'view';
+	alchemy_field.mode = this.mode || 'inline';
+
+	//alchemy_field.view_type = this.view_type || 'view_inline';
 	alchemy_field.field_name = field.name;
 	alchemy_field.config = field;
 	alchemy_field.original_value = value;
@@ -626,6 +671,34 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
 	return alchemy_field;
 });
 
+/**
+ * Create and add a datarow
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.11
+ * @version  0.1.11
+ *
+ * @param    {Object}   entry
+ *
+ * @return   <TR>
+ */
+Table.setMethod(function addDataRow(entry) {
+
+	if (!entry) {
+		entry = {};
+	}
+
+	let tr = this.createDataRow(entry);
+
+	if (!tr) {
+		return;
+	}
+
+	this.table_body.append(tr);
+
+	return tr;
+});
+
 /**
  * Create a datarow
  *
@@ -639,13 +712,19 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
  */
 Table.setMethod(function createDataRow(entry) {
 
+	if (!entry) {
+		throw new Error('Unable to create datarow without data');
+	}
+
 	let field_set_config,
 	    value,
 	    tr = this.createElement('tr'),
 	    td,
 		id = entry.$pk || entry._id || entry.id;
 	
-	tr.dataset.pk = id;
+	if (id) {
+		tr.dataset.pk = id;
+	}
 
 	for (field_set_config of this.fieldset) {
 		td = this.createElement('td');
@@ -893,7 +972,7 @@ Table.setMethod(function onFieldsetAssignment(value, old_value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @param    {String|RURL}   base_url
  */
@@ -905,6 +984,10 @@ Table.setMethod(function updateAnchors(base_url) {
 		base_url = RURL.parse(base_url);
 	}
 
+	if (!base_url) {
+		return;
+	}
+
 	let anchors = this.querySelectorAll('a.sorting-anchor'),
 	    anchor,
 	    url,
@@ -963,7 +1046,7 @@ Table.setMethod(function onRecordsAssignment(value, old_value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.11
  *
  * @param    <TR>
  */
@@ -979,7 +1062,9 @@ Table.setMethod(function selectRow(row) {
 		child.classList.remove('aft-selected');
 	}
 
-	row.classList.add('aft-selected');
+	if (row) {
+		row.classList.add('aft-selected');
+	}
 });
 
 /**

package/element/code_input.js

@@ -67,7 +67,7 @@ CodeInput.setProperty(function value(value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.10
  */
 CodeInput.setMethod(async function introduced() {
 
@@ -75,6 +75,8 @@ CodeInput.setMethod(async function introduced() {
 
 	let editor_el = this.querySelector('.code-editor');
 
+	editor_el.hidden = false;
+
 	let editor = ace.edit(editor_el);
 
 	editor.session.setUseWrapMode(true);

package/element/query_builder_value.js

@@ -121,7 +121,7 @@ QueryBuilderValue.setProperty(function value() {
 
 	return result;
 }, function setValue(value) {
-	this.assigned_data.value = value;
+	this.assignData('value', value);
 });
 
 /**

package/helper/form_actions/url_action.js

@@ -23,7 +23,7 @@ UrlAction.addConfigProperty('url');
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.1.11
  *
  * @return   {HTMLElement}
  */
@@ -35,7 +35,7 @@ UrlAction.setMethod(function _constructElement(renderer) {
 
 	if (this.icon) {
 		let alico = renderer.createElement('al-ico');
-		alico.setAttribute('type', this.icon);
+		alico.setIcon(this.icon);
 		anchor.append(alico);
 	} else {
 		anchor.textContent = this.title || this.name;

package/helper/widgets/alchemy_field_widget.js

@@ -73,7 +73,7 @@ AlchemyField.enforceProperty(function alchemy_form(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.11
  */
 AlchemyField.setMethod(function populateWidget() {
 
@@ -89,6 +89,14 @@ AlchemyField.setMethod(function populateWidget() {
 
 	field_el.field_name = config.field;
 
+	if (config.purpose) {
+		field_el.purpose = config.purpose;
+	}
+
+	if (config.mode) {
+		field_el.mode = config.mode;
+	}
+
 	if (config.view) {
 		field_el.field_view = config.view;
 	}
@@ -101,6 +109,10 @@ AlchemyField.setMethod(function populateWidget() {
 		field_el.widget_settings = config.widget_settings;
 	}
 
+	if (config.data_src) {
+		field_el.data_src = config.data_src;
+	}
+
 	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.4
+ * @version  0.1.11
  */
 AlchemyForm.setMethod(function populateWidget() {
 
@@ -30,6 +30,14 @@ AlchemyForm.setMethod(function populateWidget() {
 
 	form.classList.add('alchemy-widgets-container');
 
+	if (config.purpose) {
+		form.purpose = config.purpose;
+	}
+
+	if (config.mode) {
+		form.mode = config.mode;
+	}
+
 	if (this.config && this.config.widgets) {
 		let widgets = this.config.widgets.slice(0),
 		    widget,
@@ -59,7 +67,9 @@ AlchemyForm.setMethod(function populateWidget() {
 		form.model = config.model;
 	}
 
-	form.view_type = config.view_type || 'edit';
+	if (config.view_type) {
+		form.view_type = config.view_type;
+	}
 
 	form.append(col.widget);
 

package/helper/widgets/alchemy_table_widget.js

@@ -16,7 +16,7 @@ const AlchemyTable = Function.inherits('Alchemy.Widget', 'AlchemyTable');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.8
  */
 AlchemyTable.setMethod(function populateWidget() {
 
@@ -46,5 +46,8 @@ AlchemyTable.setMethod(function populateWidget() {
 		table.recordsource = config.recordsource;
 	}
 
+	table.purpose = config.purpose || 'view';
+	table.mode = config.mode || 'inline';
+
 	this.element.append(table);
 });

package/package.json

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

package/view/form/elements/code_input.hwk

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

package/view/form/elements/password_input.hwk

@@ -0,0 +1,36 @@
+<label>
+	<div class="inputlabel">
+		<span class="label" data-he-slot="label"></span>
+		<span class="description" data-he-slot="description"></span>
+		<hr class="spacer">
+	</div>
+	<div class="inputbox">
+		<input
+			name=<% self.getAttribute('input-name') || 'name' %>
+			placeholder=<% self.getAttribute('placeholder') %>
+			minlength=<% self.getAttribute('min-length') %>
+			maxlength=<% self.getAttribute('max-length') %>
+			class="input"
+			value="<% self.getAttribute('value') || '' %>"
+			type="password"
+		>
+		<i class="icon cross"></i>
+		<i class="icon checkmark"></i>
+	</div>
+</label>
+<label class="repeat-input-label" hidden>
+	<div class="inputbox">
+		<input
+			placeholder=<% self.getAttribute('repeat-placeholder') %>
+			class="input repeat-input"
+			value="<% self.getAttribute('value') || '' %>"
+			minlength=<% self.getAttribute('min-length') %>
+			maxlength=<% self.getAttribute('max-length') %>
+			type="password"
+		>
+		<i class="icon cross"></i>
+		<i class="icon checkmark"></i>
+	</div>
+	<div class="errors"></div>
+	<div class="success"></div>
+</label>

package/view/form/inputs/edit_inline/boolean.hwk

@@ -0,0 +1,4 @@
+<alchemy-toggle
+	class="alchemy-field-value"
+	#value=<% value %>
+></alchemy-toggle>

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

@@ -0,0 +1 @@
+<% include('form/inputs/view_inline/datetime') %>

package/view/form/inputs/view_inline/boolean.hwk

@@ -0,0 +1,19 @@
+<span
+	class="alchemy-field-value boolean-wrapper"
+>
+	<%
+		new_class = '';
+
+		if (value) {
+			new_class = 'boolean-true';
+		} else if (value === false) {
+			new_class = 'boolean-false';
+		} else {
+			new_class = 'boolean-null';
+			value = 'empty';
+		}
+
+		$0.classList.add(new_class);
+	%>
+	{{ value }}
+</span>

package/view/form/inputs/view_inline/date.hwk

@@ -0,0 +1,4 @@
+<time
+	class="alchemy-field-value"
+	datetime={% value.toISOString() %}
+>{{ value.format('Y‑m‑d') }}</time>

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

@@ -0,0 +1,4 @@
+<time
+	class="alchemy-field-value"
+	datetime={% value.toISOString() %}
+>{{ value.format('Y‑m‑d H:i') }}</time>

package/view/form/inputs/view_inline/file.hwk

@@ -0,0 +1,6 @@
+{% if value %}
+	<img
+		!Media={% value %}
+		+media-route="Media::thumb"
+	>
+{% /if %}

package/view/form/inputs/view_inline/objectid.hwk

@@ -0,0 +1 @@
+<code class="alchemy-field-value">{{ value }}</code>

package/view/form/wrappers/edit_inline/default.hwk

@@ -0,0 +1 @@
+<div class="wrapped-inline" data-he-name="field"></div>

package/view/form/wrappers/view_inline/default.hwk

@@ -1 +1 @@
-<div data-he-name="field"></div>
+<div class="wrapped-inline" data-he-name="field"></div>