alchemy-form 0.2.10 → 0.3.0-alpha.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.3.0-alpha.1 (2024-02-15)
+
+* Upgrade to Alchemy v1.4.0
+* Add edit template for the `Object` field type
+* Add settings editor element
+* Make `readonly` attribute work on `al-field` and `al-form` elements
+* Use "alchemy-field-title" and "alchemy-field-description" microcopy in `al-field` labels
+
 ## 0.2.10 (2024-01-15)
 
 * Fix `al-table` throwing an error when receiving null data

package/assets/stylesheets/form/elements/_code_input.scss

@@ -1,6 +1,5 @@
 al-code-input {
 	display: inline-block;
-	height: 30rem;
 	width: 100%;
 	position: relative;
 

package/assets/stylesheets/form/elements/_field.scss

@@ -33,4 +33,19 @@ al-field {
 			display: inline-flex;
 		}
 	}
+
+	.alchemy-field-empty-value {
+		color: #666;
+		font-style: italic;
+	}
+}
+
+al-form[readonly] al-field,
+al-field[readonly] {
+	pointer-events: none;
+
+	.alchemy-field-value {
+		opacity: 0.8;
+		filter: brightness(0.95);
+	}
 }

package/assets/stylesheets/form/elements/_settings_editor.scss

@@ -0,0 +1,62 @@
+al-settings-editor {
+	display: grid;
+	grid-template-columns: minmax(200px, 1.5fr) minmax(25vw, 9fr);
+
+	.al-settings-group {
+		padding-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.al-settings-setting-header {
+		margin-bottom: 0.5rem;
+	}
+
+	.al-settings-group-title {
+		font-weight: bold;
+		font-size: 1.6rem;
+	}
+
+	.al-settings-group-header {
+		padding: 0.2rem 1rem 0.5rem;
+	}
+
+	.al-settings-actions,
+	.al-settings-setting {
+		padding: 0.2rem 1rem 1.5rem;
+	}
+
+	.al-settings-actions {
+		margin-top: 2rem;
+	}
+
+	.al-settings-setting-title {
+		font-weight: bold;
+	}
+
+	.al-settings-setting-description micro-copy:not(:empty) {
+		display: block;
+		margin-top: 0.3rem;
+	}
+
+	.al-settings-sidebar {
+		border-right: 1px solid #ebebeb;
+		margin-right: 1.5rem;
+
+		a {
+			text-decoration: none;
+			color: inherit;
+		}
+	}
+
+	al-field {
+		.field,
+		.field input {
+			width: 100%;
+		}
+	}
+
+	al-toc {
+		position: sticky;
+		top: 1rem;
+	}
+}

package/assets/stylesheets/form/elements/_table.scss

@@ -4,7 +4,6 @@ al-table {
 	border: 1px solid #dadee0;
 	font-family: sans-serif;
 	background-color: white;
-	color: #313131;
 
 	table {
 		border-collapse: collapse;

package/assets/stylesheets/form/elements/index.scss

@@ -14,4 +14,5 @@
 @import "_tabs.scss";
 @import "_pathway.scss";
 @import "_apex_charts.scss";
-@import "_virtual_scroll.scss";
+@import "_virtual_scroll.scss";
+@import "_settings_editor.scss";

package/config/routes.js

@@ -1,4 +1,4 @@
-Router.add({
+Plugin.addRoute({
 	name       : 'FormApi#related',
 	methods    : 'post',
 	paths      : '/api/form/data/related',
@@ -7,7 +7,7 @@ Router.add({
 	is_system_route : true,
 });
 
-Router.add({
+Plugin.addRoute({
 	name       : 'FormApi#queryBuilderData',
 	methods    : 'post',
 	paths      : '/api/form/data/qbdata',
@@ -16,7 +16,7 @@ Router.add({
 	is_system_route : true,
 });
 
-Router.add({
+Plugin.addRoute({
 	name            : 'FormApi#recompute',
 	methods         : 'post',
 	paths           : '/api/form/data/recompute/{model_name}/{field}',

package/controller/form_api_controller.js

@@ -17,7 +17,7 @@ const FormApi = Function.inherits('Alchemy.Controller', 'FormApi');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.9
+ * @version  0.3.0
  *
  * @param    {Conduit}   conduit
  */
@@ -32,9 +32,7 @@ FormApi.setAction(async function related(conduit) {
 	crit.setOption('scenario', 'related_data');
 
 	if (body.constraints) {
-		for (let key in body.constraints) {
-			crit.where(key).equals(body.constraints[key]);
-		}
+		crit.applyConditions(body.constraints);
 	}
 
 	if (config.value) {

package/element/00_form_base.js

@@ -102,6 +102,27 @@ Base.setAttribute('purpose', function getPurpose(value) {
  */
 Base.setAttribute('mode');
 
+/**
+ * The zone determines where the form/field is being used.
+ * For example: admin, frontend, chimera, invoice, ...
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Base.setAttribute('zone', function getZone(value) {
+
+	if (value) {
+		return value;
+	}
+
+	if (!value && this.alchemy_form) {
+		value = this.alchemy_form.zone;
+	}
+
+	return value;
+});
+
 /**
  * The view-type determines which type of wrapper/field to use,
  * e.g.: view, list, edit, ...

package/element/al_code_input.js

@@ -43,6 +43,15 @@ CodeInput.setAttribute('language-mode');
  */
 CodeInput.setAttribute('color-theme');
 
+/**
+ * Is the value an object?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+CodeInput.setAttribute('value-is-object', {type: 'boolean'});
+
 /**
  * The minimum number of lines to show (height)
  *
@@ -66,25 +75,43 @@ CodeInput.setAttribute('max-lines', {type: 'number'});
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.5
+ * @version  0.3.0
  */
-CodeInput.setProperty(function value(value) {
+CodeInput.setProperty(function value() {
+
+	let result;
 
 	if (this._editor) {
-		return this._editor.getValue();
+		result = this._editor.getValue();
+	} else {
+		let editor_el = this.querySelector('.code-editor');
+
+		if (editor_el) {
+			result = editor_el.textContent;
+		} else {
+			if (this.assigned_data.value) {
+				return this.assigned_data.value;
+			}
+
+			return;
+		}
 	}
 
-	let editor_el = this.querySelector('.code-editor');
-
-	if (editor_el) {
-		return editor_el.textContent;
+	if (result && this.value_is_object) {
+		result = JSON.safeParse(result);
 	}
 
-	if (this.assigned_data.value) {
-		return this.assigned_data.value;
-	}
+	return result;
+
+}, function setValue(original_value) {
 
-}, function setValue(value) {
+	let value;
+
+	if (this.value_is_object) {
+		value = JSON.stringify(value, null, '\t');
+	} else {
+		value = original_value;
+	}
 
 	if (this._editor) {
 		this._editor.setValue(value);
@@ -101,7 +128,9 @@ CodeInput.setProperty(function value(value) {
 		return editor_el.textContent = value;
 	}
 
-	this.assigned_data.value = value;
+	this.assigned_data.value = original_value;
+
+	this.hawkejs_renderer.registerElementInstance(this);
 });
 
 /**
@@ -153,7 +182,14 @@ CodeInput.setMethod(async function introduced() {
 	}
 
 	if (this.assigned_data.value) {
-		editor.setValue(this.assigned_data.value, -1);
+
+		let value = this.assigned_data.value;
+
+		if (this.value_is_object) {
+			value = JSON.stringify(value, null, '\t');
+		}
+
+		editor.setValue(value, -1);
 	}
 
 	if (this.language_mode) {
@@ -164,5 +200,7 @@ CodeInput.setMethod(async function introduced() {
 		}
 	}
 
+	this.style.height = null;
+
 	this._editor = editor;
 });

package/element/al_field.js

@@ -77,9 +77,17 @@ Field.setAttribute('wrapper-view');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.1.2
+ * @version  0.3.0
  */
-Field.setAttribute('readonly', {boolean: true});
+Field.setAttribute('readonly', function getReadonlyValue(current_value) {
+
+	if (current_value == null) {
+		current_value = this.alchemy_form?.readonly;
+	}
+
+	return current_value;
+
+}, {boolean: true});
 
 /**
  * Widget settings for use in the views
@@ -585,14 +593,20 @@ Field.setProperty(function value_element() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.9
+ * @version  0.3.0
  */
 Field.setProperty(function value() {
 
 	let element = this.value_element;
 
 	if (element) {
-		return element.value;
+		let value = element.value;
+
+		if (this.config) {
+			value = this.config.castContainedValues(value);
+		}
+
+		return value;
 	}
 
 	return this.value_to_render;
@@ -1043,32 +1057,19 @@ Field.setMethod(async function loadData(config, element) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.9
- * @version  0.2.10
+ * @version  0.3.0
  *
- * @param    {Object}   constraints
+ * @param    {Criteria|Object}   constraints
+ *
+ * @param    {Object}
  */
 Field.setMethod(function resolveConstraintInstruction(constraints) {
 
-	let context,
-	    result = {},
-	    value,
-	    key;
-
-	for (key in constraints) {
-		value = constraints[key];
+	let context = {$0: this.alchemy_form.getValueAsDocument()};
 
-		if (value && typeof value == 'object') {
-			if (value instanceof Classes.Alchemy.PathEvaluator) {
-				if (!context && this.alchemy_form) {
-					context = this.alchemy_form.getValueAsDocument();
-				}
+	constraints = Classes.Alchemy.Criteria.Criteria.cast(constraints);
 
-				result[key] = value.getValue({$0: context}) ?? null;
-			}
-		} else {
-			result[key] = value;
-		}
-	}
+	let result = constraints.compileToConditions(context);
 
 	return result;
 });

package/element/al_form.js

@@ -34,6 +34,15 @@ Form.setAttribute('method');
  */
 Form.setAttribute('model');
 
+/**
+ * Is this a read only form?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Form.setAttribute('readonly', {boolean: true});
+
 /**
  * Should the entire document be submitted?
  *
@@ -249,8 +258,6 @@ Form.setMethod(function setDocument(document) {
 	// Set the current document
 	this.document = document;
 
-	console.log('Setting document', document);
-
 	for (let key in current_value) {
 		let original_value = current_value[key],
 		    new_value = document[key];

package/element/al_select.js

@@ -951,12 +951,13 @@ AlchemySelect.setMethod(function getRemoteFetchConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.3.0
  */
 AlchemySelect.setMethod(function applyFetchedData(err, result, config) {
 
 	if (err) {
 		this.loading_dropdown = false;
+		alchemy.handleError(err);
 		return;
 	}
 

package/element/al_settings_editor.js

@@ -0,0 +1,367 @@
+/**
+ * The settings editor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+const SettingsEditor = Function.inherits('Alchemy.Element.Form.Base', 'SettingsEditor');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+SettingsEditor.setTemplateFile('form/elements/al_settings_editor');
+
+/**
+ * The actual settings and their values
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+SettingsEditor.setAssignedProperty('settings_config');
+
+/**
+ * Address to send updates t
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+SettingsEditor.setAttribute('src');
+
+/**
+ * Get the current value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.3.0
+ * @version  1.3.0
+ */
+SettingsEditor.setProperty(function value() {
+
+	let result = {};
+
+	let root_key,
+	    elements = this.querySelectorAll('.al-settings-setting'),
+	    element,
+	    field,
+	    i;
+
+	for (i = 0; i < elements.length; i++) {
+		element = elements[i];
+
+		field = element.querySelector('al-field');
+
+		if (!field) {
+			continue;
+		}
+
+		if (!root_key) {
+			root_key = element.dataset.id.split('.')[0];
+		}
+
+		Object.setPath(result, element.dataset.id, field.value);
+	}
+
+	return result[root_key];
+});
+
+/**
+ * Populate the settings container
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.3.0
+ * @version  1.3.0
+ */
+SettingsEditor.setMethod(function populateSettingsContainer(container) {
+
+	if (!container) {
+		container = this.querySelector('.al-settings-container');
+	}
+
+	Hawkejs.removeChildren(container);
+
+	this._addGroupToContainer(container, this.settings_config);
+});
+
+/**
+ * Create an id
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.3.0
+ * @version  1.3.0
+ *
+ * @param    {string}   suffix
+ *
+ * @return   {string}
+ */
+SettingsEditor.setMethod(function createId(suffix) {
+
+	let id = this.id;
+
+	if (!id) {
+		id = 'settings-editor';
+	}
+
+	id += '-' + suffix.slug().underscore();
+
+	return id;
+});
+
+/**
+ * Add the given group to the container
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.3.0
+ * @version  1.3.0
+ *
+ * @param    {HTMLElement}   container
+ * @param    {Object}        group
+ */
+SettingsEditor.setMethod(function _addGroupToContainer(container, group) {
+
+	if (!group) {
+		return;
+	}
+
+	if (!container) {
+		throw new Error('No container given');
+	}
+
+	let add_group = false;
+
+	if (group.settings?.length) {
+		add_group = true;
+	} else if (group.children?.length) {
+		// If the root group has no settings, don't add it
+		if (!group.is_root) {
+			add_group = true;
+		}
+	}
+
+	if (add_group) {
+		let group_element = this.createElement('div');
+		group_element.classList.add('al-settings-group');
+		group_element.dataset.id = group.group_id;
+		group_element.id = this.createId(group.group_id);
+
+		let header_element = this.createElement('header');
+		header_element.classList.add('al-settings-group-header');
+
+		let title_element = this.createElement('div');
+		title_element.classList.add('al-settings-group-title');
+		title_element.dataset.toc_level = group.group_id.count('.');
+
+		let group_title_microcopy = this.createElement('micro-copy');
+		group_title_microcopy.key = 'settings.title.group:' + group.group_id;
+		group_title_microcopy.fallback = group.name.titleize();
+
+		title_element.append(group_title_microcopy);
+		header_element.append(title_element);
+		group_element.append(header_element);
+
+		let settings_container = this.createElement('div');
+		settings_container.classList.add('al-settings-settings-container');
+
+		for (let setting of group.settings) {
+			this._addSettingToGroupElement(settings_container, setting);
+		}
+
+		group_element.append(settings_container);
+		container.append(group_element);
+	}
+
+	for (let child_group of group.children) {
+		this._addGroupToContainer(container, child_group);
+	}
+});
+
+/**
+ * Add the given setting to the container
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.3.0
+ * @version  1.3.0
+ *
+ * @param    {HTMLElement}   settings_container_element
+ * @param    {Object}        setting
+ */
+SettingsEditor.setMethod(function _addSettingToGroupElement(settings_container_element, setting) {
+
+	if (!setting?.schema) {
+		return;
+	}
+
+	let value_field = setting.schema.get('value');
+
+	if (!value_field) {
+		return;
+	}
+
+	let settings_element = this.createElement('div');
+
+	let id = this.createId(setting.setting_id);
+
+	// Set the IDs
+	settings_element.dataset.id = setting.setting_id;
+	settings_element.id = id;
+
+	// Add the CSS class
+	settings_element.classList.add('al-settings-setting');
+
+	// Create the title element
+	let header_element = this.createElement('header');
+	header_element.classList.add('al-settings-setting-header');
+
+	let title_element = this.createElement('div');
+	title_element.classList.add('al-settings-setting-title');
+
+	let title_microcopy = this.createElement('micro-copy');
+	title_microcopy.key = 'settings.title:' + setting.setting_id;
+	title_microcopy.fallback = setting.name.titleize();
+
+	header_element.append(title_element);
+	title_element.append(title_microcopy);
+
+	if (setting.show_description !== false) {
+		let description_element = this.createElement('div');
+		description_element.classList.add('al-settings-setting-description');
+
+		let description_microcopy = this.createElement('micro-copy');
+		description_microcopy.key = 'settings.description:' + setting.setting_id;
+		description_microcopy.fallback = setting.description || '';
+
+		header_element.append(description_element);
+		description_element.append(description_microcopy);
+	}
+
+	settings_element.append(header_element);
+
+	let input_wrapper = this.createElement('div');
+	
+	let al_field = this.createElement('al-field');
+	al_field.id = 'af-' + id;
+	al_field.config = value_field;
+	al_field.value = setting.current_value;
+	al_field.mode = 'inline';
+
+	this.hawkejs_view.registerElementInstance(al_field);
+
+	if (setting.locked) {
+		al_field.readonly = true;
+	}
+
+	input_wrapper.append(al_field);
+
+	settings_element.append(input_wrapper);
+
+	settings_container_element.append(settings_element);
+});
+
+/**
+ * This element has been added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.3.0
+ * @version  1.3.0
+ */
+SettingsEditor.setMethod(function introduced() {
+
+	let save_button = this.querySelector('.save-changes');
+
+	save_button.addEventListener('activate', async e => {
+
+		let old_state = save_button.state;
+
+		save_button.setState('saving');
+
+		try {
+			await this.save();
+		} catch (err) {
+			save_button.setState('error', 2500, old_state);
+			return;
+		}
+
+		save_button.setState('saved', 1000, old_state);
+	});
+
+	save_button.hidden = !this.src;
+});
+
+/**
+ * Get the changes
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.3.0
+ * @version  1.3.0
+ */
+SettingsEditor.setMethod(function getChanges() {
+
+	let result = {};
+
+	let new_value,
+	    original_value,
+	    elements = this.querySelectorAll('.al-settings-setting'),
+	    element,
+	    field,
+	    i;
+
+	for (i = 0; i < elements.length; i++) {
+		element = elements[i];
+
+		field = element.querySelector('al-field');
+
+		if (!field) {
+			continue;
+		}
+
+		new_value = field.value;
+		original_value = field.original_value;
+
+		if (Object.alike(new_value, original_value) || new_value == original_value) {
+			continue;
+		}
+
+		// Ignore empty values that were not set before
+		if (new_value === '' && original_value == null) {
+			continue;
+		}
+
+		// Ignore empty values that were not set before
+		if (new_value === false && original_value == null) {
+			continue;
+		}
+
+		result[element.dataset.id] = new_value;
+	}
+
+	return result;
+});
+
+/**
+ * Save the changes
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.3.0
+ * @version  1.3.0
+ */
+SettingsEditor.setMethod(async function save() {
+
+	if (!this.src) {
+		return;
+	}
+
+	let changes = this.getChanges();
+
+	let result;
+
+	try {
+		result = await alchemy.fetch(this.src, {post: changes});
+	} catch (err) {
+		throw err;
+	}
+});

package/element/al_table.js

@@ -677,7 +677,7 @@ Table.setMethod(function addDataRow(entry) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.3.0
  *
  * @param    {Object}   entry
  *
@@ -705,6 +705,10 @@ Table.setMethod(function createDataRow(entry) {
 		tr.dataset.pk = id;
 	}
 
+	if (!this.fieldset) {
+		throw new Error('No fieldset has been defined for this table yet');
+	}
+
 	for (field_set_config of this.fieldset) {
 
 		let create_new_contents = true,
@@ -907,7 +911,7 @@ Table.setMethod(function attachContextMenus() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.12
+ * @version  0.3.0
  */
 Table.setMethod(function onFieldsetAssignment(value, old_value) {
 
@@ -935,7 +939,7 @@ Table.setMethod(function onFieldsetAssignment(value, old_value) {
 	}
 
 	for (field of value) {
-		col = this.createElement('td');
+		col = this.createElement('th');
 		span = this.createElement('span');
 		span.textContent = field.title;
 
@@ -980,10 +984,10 @@ Table.setMethod(function onFieldsetAssignment(value, old_value) {
 	}
 
 	if (this.has_actions) {
-		col = this.createElement('td');
+		col = this.createElement('th');
 		names_row.append(col);
 
-		col = this.createElement('td');
+		col = this.createElement('th');
 		filter_row.append(col);
 	}
 

package/package.json

@@ -1,14 +1,14 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.2.10",
+	"version": "0.3.0-alpha.1",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
 	},
 	"peerDependencies": {
-		"alchemymvc"    : ">=1.3.0",
-		"alchemy-media" : ">=0.7.6"
+		"alchemymvc"    : ">=1.4.0||>=1.4.0-alpha",
+		"alchemy-media" : ">=0.9.0||>=0.9.0-alpha"
 	},
 	"license": "MIT",
 	"engines": {

package/view/form/elements/al_settings_editor.hwk

@@ -0,0 +1,36 @@
+<div class="al-settings-sidebar">
+	<al-toc
+		container-element="ul"
+		entry-element="li"
+		parent-selector="al-settings-editor"
+		children-selector=".al-settings-container"
+		elements-selector=".al-settings-group"
+		title-selector=".al-settings-group-title"
+	></al-toc>
+</div>
+<div class="al-settings-main">
+	<div class="al-settings-container"><% self.populateSettingsContainer($0) %></div>
+	<div class="al-settings-actions">
+		<al-button class="save-changes" state="ready" hidden>
+			<al-state state-name="saving">
+				<al-icon icon-style="duotone" icon-name="spinner" icon-flags="spin"></al-icon>
+				{%t "saving" %}
+			</al-state>
+
+			<al-state state-name="saved">
+				<al-icon icon-style="duotone" icon-name="badge-check" icon-flags="beat"></al-icon>
+				{%t "saved" %}
+			</al-state>
+
+			<al-state state-name="error">
+				<al-icon icon-style="duotone" icon-name="skull" icon-flags="shake"></al-icon>
+				{%t "error" action="save" %}
+			</al-state>
+
+			<al-state state-name="ready">
+				<al-icon icon-style="duotone" icon-name="floppy-disk-circle-arrow-right"></al-icon>
+				{%t "save" %}
+			</al-state>
+		</al-button>
+	</div>
+</div>

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

@@ -0,0 +1,9 @@
+<al-code-input
+	class="alchemy-field-value"
+	form=<% form_id %>
+	name=<% path %>
+	placeholder={% alchemy_field.placeholder %}
+	language-mode="json"
+	value-is-object
+	#value={% value %}
+></al-code-input>

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

@@ -0,0 +1,5 @@
+<% config = value.getEditorConfiguration() %>
+<al-settings-editor
+	class="alchemy-field-value"
+	#settings_config={% config %}
+></al-settings-editor>

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

@@ -1,5 +1,18 @@
 <div>
-	<span class="alchemy-field-value">{{ value }}</span>
+	<span class="alchemy-field-value">
+		<% if (value || value === false) { %>
+			{{ value }}
+		<% } else { %>
+			<span class="alchemy-field-empty-value">
+				{%t
+					"empty-value"
+					field=field_context.config.name
+					path=field_context.config.path_in_document
+					zone=self.zone
+				%}
+			</span>
+		<% } %>
+	</span>
 	{% if alchemy_field.config.options.suffix %}
 		<span class="alchemy-field-suffix">{{ alchemy_field.config.options.suffix }}</span>
 	{% /if %}

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

@@ -3,11 +3,27 @@
 		<span
 			data-he-name="field-title"
 			data-he-slot="field-title"
-		>{{ alchemy_field.field_title }}</span>
+		>
+			{%t
+				"alchemy-field-title"
+				field=field_context.config.name
+				path=field_context.config.path_in_document
+				zone=self.zone
+				fallback=alchemy_field.field_title
+			%}
+		</span>
 		<small
 			data-he-name="field-description"
 			data-he-slot="field-description"
-		>{{ alchemy_field.field_description }}</small>
+		>
+			{%t
+				"alchemy-field-description"
+				field=field_context.config.name
+				path=field_context.config.path_in_document
+				zone=self.zone
+				fallback=alchemy_field.field_description
+			%}
+		</small>
 	</al-label>
 </div>
 <div data-he-name="field"></div>