alchemy-form 0.1.7 → 0.1.10

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 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
+* Prevent `alchemy-select` from keeping on loading remote data when last few results were empty
+* Fix pagination breaking re-opening of `alchemy-select` dropdown
+* Fix initial value of a `BelongsTo` `alchemy-select` element not loading
+* Fix `alchemy-select` downward-arrow-icon being rendered over value content
+* Use `alchemy-code-input` for HTML fields
+* Allow manually setting a value on `alchemy-field` elements
+* Try to let `Field` instances decide the representation of values in `alchemy-table` elements
+* Don't open the `alchemy-table` contextmenu when clicking on anchors
+
 ## 0.1.7 (2022-06-12)
 
 * Fix `<alchemy-table>` code typo

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;
 		}
 	}
 
@@ -102,7 +102,6 @@ alchemy-select {
 		font-family: inherit;
 		font-size: 13px;
 		line-height: 18px;
-		-webkit-font-smoothing: inherit;
 		display: inline-block !important;
 		padding: 0 !important;
 		min-height: 0 !important;
@@ -113,11 +112,10 @@ alchemy-select {
 		border: 0 none !important;
 		background: none !important;
 		line-height: inherit !important;
-		-webkit-user-select: auto !important;
-		-webkit-box-shadow: none !important;
 		box-shadow: none !important;
 		outline: none !important;
 		flex: 0 1 auto;
+		margin-right: 20px !important;
 	}
 
 	.dropdown {

package/controller/form_api_controller.js

@@ -17,20 +17,23 @@ const FormApi = Function.inherits('Alchemy.Controller', 'FormApi');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.8
  *
  * @param    {Conduit}   conduit
  */
 FormApi.setAction(async function related(conduit) {
 
-	const body = conduit.body;
+	const body = conduit.body || {},
+	      config = body.config || {};
 
 	const model = this.getModel(body.assoc_model);
 	let crit = model.find();
 	crit.limit(50);
 	crit.setOption('scenario', 'related_data');
 
-	if (body.config && body.config.search) {
+	if (config.value) {
+		crit.where(model.primary_key).equals(config.value);
+	} else if (config.search) {
 		let display_fields = Array.cast(model.displayField);
 
 		let or = crit.or();
@@ -45,6 +48,10 @@ FormApi.setAction(async function related(conduit) {
 		}
 	}
 
+	if (config.page) {
+		crit.page(config.page);
+	}
+
 	let records = await model.find('all', crit);
 
 	let result = {

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
  *
@@ -133,7 +142,7 @@ Field.enforceProperty(function alchemy_field_schema(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.8
  */
 Field.enforceProperty(function config(new_value, old_value) {
 
@@ -148,7 +157,7 @@ Field.enforceProperty(function config(new_value, old_value) {
 
 	if (new_value && new_value.constructor && new_value.constructor.type_name) {
 		this.field_type = new_value.constructor.type_name;
-	} else {
+	} else if (new_value) {
 		this.field_type = null;
 	}
 
@@ -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');
-				}
 			}
 		}
 	}
@@ -493,10 +497,14 @@ Field.setProperty(function wrapper_files() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.8
  */
 Field.setProperty(function original_value() {
 
+	if (this.assigned_data.original_value != null) {
+		return this.assigned_data.original_value;
+	}
+
 	let alchemy_field_schema = this.alchemy_field_schema,
 	    path = this.field_path_in_current_schema;
 
@@ -517,6 +525,8 @@ Field.setProperty(function original_value() {
 	if (form && form.document) {
 		return Object.path(form.document, path);
 	}
+}, function setOriginalValue(value) {
+	return this.assigned_data.original_value = value;
 });
 
 /**
@@ -551,7 +561,7 @@ Field.setProperty(function value_element() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.3
+ * @version  0.1.8
  */
 Field.setProperty(function value() {
 
@@ -569,8 +579,9 @@ Field.setProperty(function value() {
 
 	if (element) {
 		element.value = value;
+	} else if (this.original_value == null) {
+		this.original_value = value;
 	}
-
 });
 
 /**
@@ -708,7 +719,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
@@ -735,7 +746,7 @@ Field.setMethod(async function loadData(config, element) {
 			}
 		}
 
-		return this.hawkejs_helpers.Alchemy.getResource({
+		let resource_options = {
 			name  : 'FormApi#related',
 			post  : true,
 			body  : {
@@ -744,7 +755,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_select.js

@@ -5,9 +5,7 @@
  * @since    0.1.0
  * @version  0.1.0
  */
-var AlchemySelect = Function.inherits('Alchemy.Element.Form.Base', function Select() {
-	Select.super.call(this);
-});
+const AlchemySelect = Function.inherits('Alchemy.Element.Form.Base', 'Select');
 
 /**
  * The remote url attribute
@@ -389,14 +387,56 @@ AlchemySelect.setProperty(function loading_dropdown() {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.8
  */
 AlchemySelect.setProperty(function search_value() {
-	var type_area = this.type_area;
+
+	let type_area = this.type_area,
+	    result = '';
 
 	if (type_area) {
-		return type_area.value;
+		result = type_area.value;
 	}
+
+	if (this.previous_search_value == null) {
+		this.previous_search_value = '';
+	}
+
+	// If the search value changed, nullify the last page result
+	if (this.previous_search_value != result) {
+		this.setLastSuccessfulLoadedPage(null);
+	}
+
+	this.previous_search_value = result;
+
+	return result;
+});
+
+/**
+ * Make sure the pagination watcher exists
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.8
+ */
+AlchemySelect.setStatic(function ensurePaginationChecker() {
+
+	if (AlchemySelect.has_paginator_viewer) {
+		return;
+	}
+
+	// Only ever add 1 viewer per page
+	AlchemySelect.has_paginator_viewer = true;
+
+	hawkejs.scene.appears('js-he-ais-pager', {live: true, padding: 10, throttle: 200}, function onInfinity(el) {
+
+		if (!el.parentElement || !el.parentElement.parentElement) {
+			return;
+		}
+
+		const alchemy_select_instance = el.parentElement.parentElement;
+		alchemy_select_instance.loadOptions(++alchemy_select_instance.loaded_page);
+	});
 });
 
 /**
@@ -420,7 +460,7 @@ AlchemySelect.setMethod(function rendered() {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.8
  */
 AlchemySelect.setMethod(function introduced() {
 
@@ -433,14 +473,7 @@ AlchemySelect.setMethod(function introduced() {
 		this.makeSortable();
 	}
 
-	if (!AlchemySelect.has_paginator_viewer) {
-		AlchemySelect.has_paginator_viewer = true;
-
-		hawkejs.scene.appears('js-he-ais-pager', {live: true, padding: 10, throttle: 200}, function onInfinity(el) {
-			var ais = el.parentElement.parentElement;
-			ais.loadOptions(++ais.loaded_page);
-		});
-	}
+	AlchemySelect.ensurePaginationChecker();
 
 	this.addEventListener('focus-without', function onFocusOut(e) {
 		that.type_area.value = '';
@@ -462,8 +495,6 @@ AlchemySelect.setMethod(function introduced() {
 
 	this.addEventListener('keydown', function onKeydown(e) {
 
-		console.log('keydown:', e);
-
 		// Only listen for keydowns on the alchemy-select itself
 		if (e.target != that) {
 			return;
@@ -829,11 +860,12 @@ AlchemySelect.setMethod(function _processPreloadedValues() {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.8
  *
  * @param    {Object}   response
+ * @param    {Number}   page       The page, if it's via pagination
  */
-AlchemySelect.setMethod(function _processResponseData(response) {
+AlchemySelect.setMethod(function _processResponseData(response, page) {
 
 	if (!response) {
 		response = {};
@@ -851,14 +883,48 @@ AlchemySelect.setMethod(function _processResponseData(response) {
 		records = [];
 	}
 
-	for (record of records) {
+	this._processResponseList(records, page);
+
+	this.refreshResultAmount();
+	this._markSelectedItems();
+});
+
+/**
+ * Process the response list of a certain paige
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.8
+ * @version  0.1.8
+ *
+ * @param    {Array}   list
+ * @param    {Number}  page
+ */
+AlchemySelect.setMethod(function _processResponseList(list, page) {
+
+	let record,
+	    item;
+
+	if (page == 1 && this.current_option && this.current_option.data) {
+		record = this.current_option.data;
+		item = this._makeOption(record._id || record.id, record);
+		this.addToDropdown(item);
+	}
+
+	for (record of list) {
 		item = this._makeOption(record._id || record.id, record);
 		this.addToDropdown(item);
 	}
 
 	this.loading_dropdown = false;
-	this.refreshResultAmount();
-	this._markSelectedItems();
+
+	// If there were values & they come from a page, record this as a succesful page
+	if (page != null && list.length) {
+		if (!this.last_page_result) {
+			this.setLastSuccessfulLoadedPage(page);
+		} else if (page > this.last_page_result) {
+			this.setLastSuccessfulLoadedPage(page);
+		}
+	}
 });
 
 /**
@@ -866,7 +932,7 @@ AlchemySelect.setMethod(function _processResponseData(response) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.8
  *
  * @param    {Number}   page
  *
@@ -887,6 +953,10 @@ AlchemySelect.setMethod(function loadRemote(page) {
 		return pledge;
 	}
 
+	if (page == null) {
+		page = 1;
+	}
+
 	const that = this;
 
 	this.loading_dropdown = true;
@@ -906,11 +976,11 @@ AlchemySelect.setMethod(function loadRemote(page) {
 			throw err;
 		}
 
-		if (page == null) {
+		if (page == null || page == 1) {
 			Hawkejs.removeChildren(that.dropdown_content);
 		}
 
-		that._processResponseData(data);
+		that._processResponseData(data, page);
 
 		pledge.resolve(true);
 	};
@@ -1001,7 +1071,19 @@ AlchemySelect.setMethod(function _markSelectedItems() {
 			}
 		}
 	}
+});
 
+/**
+ * Set the last successful loaded page
+ *
+ * @author   Jelle De Loecker <jelle@develry.be>
+ * @since    0.1.8
+ * @version  0.1.8
+ *
+ * @param    {Number}   page
+ */
+AlchemySelect.setMethod(function setLastSuccessfulLoadedPage(page) {
+	this.last_page_result = page;
 });
 
 /**
@@ -1009,15 +1091,13 @@ AlchemySelect.setMethod(function _markSelectedItems() {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.8
  *
  * @param    {Number}   page
  */
 AlchemySelect.setMethod(function loadOptions(page) {
 
-	var that = this,
-	    model,
-	    field;
+	const that = this;
 
 	if (this.total_item_count >= this.loaded_item_count) {
 		if (this.dropdown_content.children.length == 0) {
@@ -1029,12 +1109,34 @@ AlchemySelect.setMethod(function loadOptions(page) {
 		return;
 	}
 
+	// Prevent it from keeping on loading empty pages if the previous page was empty
+	if (page && this.last_page_result) {
+		let next_allowed_page = this.last_page_result + 1;
+
+		if (page > next_allowed_page) {
+			return;
+		}
+	}
+
+	// Previous page will only be set to the last page that had items.
+	// So if there are 0 results overall, it won't ever be set.
+	// In that case: ignore any page load over 1.
+	if (page > 1 && !this.last_page_result) {
+		return;
+	}
+
+	// If stuff has already been loaded and this is just re-opening the dropdown,
+	// don't do anything yet
+	if (page == null && this.last_page_result > 0) {
+		return;
+	}
+
 	// If an URL is provided, use that
 	if (this.src || this.dataprovider) {
 		return this.loadRemote(page);
 	}
 
-	field = this.model_field;
+	let field = this.model_field;
 
 	if (!field) {
 		return;
@@ -1042,7 +1144,7 @@ AlchemySelect.setMethod(function loadOptions(page) {
 
 	this.loading_dropdown = true;
 
-	model = this.form.getModel(field.modelName);
+	let model = this.form.getModel(field.modelName);
 
 	model.find('all', {
 		limit : 20,
@@ -1053,12 +1155,7 @@ AlchemySelect.setMethod(function loadOptions(page) {
 			throw err;
 		}
 
-		records.forEach(function eachRecord(record) {
-			var item = that._makeOption(record._id || record.id, record);
-			that.addToDropdown(item);
-		});
-
-		that.loading_dropdown = false;
+		that._processResponseList(records, page);
 	});
 });
 
@@ -1699,9 +1796,10 @@ AlchemySelect.setMethod(function applyLocalFilter(query) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.8
  */
 AlchemySelect.setMethod('refreshRemote', Fn.throttle(function refreshRemote() {
+	this.loaded_page = 0;
 	this.loadRemote();
 }, {
 	minimum_wait  : 350,

package/element/alchemy_table.js

@@ -589,12 +589,55 @@ Table.setMethod(function showPagination() {
 	pager.showPage(records.page, Math.ceil(records.available / records.page_size));
 });
 
+/**
+ * Get a fieldset's preferred content view
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.8
+ * @version  0.1.10
+ *
+ * @param    {FieldConfig}   field_config   The config on how to display the field
+ * @param    {Object}        container      The container where the field should be in
+ *
+ * @return   
+ */
+Table.setMethod(function getFieldConfigView(field_config, container) {
+
+	let value = field_config.getValueIn(container),
+	    field;
+	
+	try {
+		field = field_config.getFieldDefinition();
+	} catch (err) {
+		console.error('Failed to get field definition:', err);
+	}
+	
+	if (value == null && !field) {
+		return null;
+	}
+
+	// Fallback to simple text view
+	if (!field) {
+		let text = field_config.getDisplayValueIn(container);
+
+		return Hawkejs.createText(text);
+	}
+
+	let alchemy_field = this.createElement('alchemy-field');
+	alchemy_field.view_type = 'view_inline';
+	alchemy_field.field_name = field.name;
+	alchemy_field.config = field;
+	alchemy_field.original_value = value;
+
+	return alchemy_field;
+});
+
 /**
  * Create a datarow
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.8
  *
  * @param    {Object}   entry
  *
@@ -602,7 +645,7 @@ Table.setMethod(function showPagination() {
  */
 Table.setMethod(function createDataRow(entry) {
 
-	let field,
+	let field_set_config,
 	    value,
 	    tr = this.createElement('tr'),
 	    td,
@@ -610,13 +653,13 @@ Table.setMethod(function createDataRow(entry) {
 	
 	tr.dataset.pk = id;
 
-	for (field of this.fieldset) {
+	for (field_set_config of this.fieldset) {
 		td = this.createElement('td');
 
-		value = field.getDisplayValueIn(entry);
+		let element = this.getFieldConfigView(field_set_config, entry);
 
-		if (value != null) {
-			td.textContent = value;
+		if (element) {
+			td.append(element);
 		}
 
 		tr.append(td);
@@ -709,7 +752,7 @@ Table.setMethod(function getEntryActions(record, filter) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.7
+ * @version  0.1.8
  *
  * @param    {Object}   entry
  */
@@ -745,6 +788,13 @@ Table.setMethod(function attachContextMenus() {
 
 		tr.addEventListener('contextmenu', e => {
 
+			// Ignore right clicks on certain elements
+			if (e && e.target) {
+				if (e.target.closest('a')) {
+					return;
+				}
+			}
+
 			this.selectRow(tr);
 
 			let menu = this.createElement('he-context-menu');

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/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.9
  */
 AlchemyField.setMethod(function populateWidget() {
 
@@ -101,6 +101,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/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.1.7",
+	"version": "0.1.10",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
 	},
 	"peerDependencies": {
-		"alchemymvc" : "~1.2.0"
+		"alchemymvc" : ">=1.2.0"
 	},
 	"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/belongs_to.hwk

@@ -2,6 +2,6 @@
 	class="alchemy-field-value"
 ><%
 $0.dataprovider = alchemy_field;
-$0.value = value;
 $0.name = path;
+$0.value = value;
 %></alchemy-select>

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

@@ -0,0 +1,5 @@
+<alchemy-code-input
+	class="alchemy-field-value"
+	form=<% form_id %>
+	name=<% path %>
+>{{ value }}</alchemy-code-input>

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

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

package/view/form/inputs/view/string.hwk

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

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/string.hwk

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

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

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