alchemy-widget 0.1.5 → 0.1.6

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 0.1.6 (2022-10-12)
+
+* Allow hiding widgets from the add-menu
+* Let actions return their button contents as elements instead of only html
+* Cancel clicks on widgets when editing them
+* Fix getting the `hawkejs_renderer` instance in a widget
+* Use `alchemy-chimera` style for the widget configuration dialog
+* Make renders wait for widgets that have to render their content asynchronously
+* Allow setting the element to use in a Text widget
+* Fix Header-widget level actions
+* Load the icon fonts as soon as the editor starts
+* Make the `rerender` method async
+* Use `child_class` property in the populate method
+* Add filter logic to widgets for getting specific values
+* Add abstract `Partial` widget class, to easily create a new widget with a pre-defined layout
+* Wait for widgets to render their contents before starting editor
+* Add `can_be_removed` property to widget elements
+* Add `can_be_moved` property to widget elements
+* Throw an error if `alchemy-form` is loaded before this plugin
+
 ## 0.1.5 (2022-07-14)
 
 * Unselect widgets when stopping the editor

package/assets/stylesheets/alchemy-widgets.scss

@@ -1,5 +1,12 @@
 @import "alchemy-widget-symbols.scss";
 
+alchemy-widgets,
+alchemy-widgets-row,
+alchemy-widgets-column,
+alchemy-widget {
+	
+}
+
 alchemy-widgets,
 alchemy-widgets-row,
 alchemy-widgets-column {
@@ -11,7 +18,14 @@ alchemy-widgets-column {
 	}
 
 	> * {
-		flex: 10;
+		flex: 10 10 auto;
+	}
+}
+
+alchemy-widget {
+	&.aw-editing {
+		outline: 2px dashed rgba(0, 0, 0, 0.3);
+		outline-offset: -2px;
 	}
 }
 
@@ -35,7 +49,7 @@ alchemy-widgets-column {
 
 	> alchemy-widget-add-area {
 		position: absolute;
-		bottom: 1.5rem;
+		bottom: 0.2rem;
 		left: 50%;
 		transform: translateX(-50%);
 	}
@@ -67,6 +81,18 @@ alchemy-widgets-row {
 	}
 }
 
+alchemy-widget-add-area {
+	background: rgba(255,255,255,0.5);
+	padding: 0.5rem 2rem;
+	border-radius: 2rem;
+	z-index: 99999999;
+
+	.widget-button {
+		min-height: 2.5rem;
+		padding: 1rem;
+	}
+}
+
 alchemy-widgets-row,
 alchemy-widgets > alchemy-widgets-column,
 alchemy-widgets-column > alchemy-widgets-column,
@@ -164,7 +190,10 @@ alchemy-widget {
 		min-height: 2rem;
 
 		&:hover {
-			background: rgba(60, 60, 120, 0.1);
+			background: rgba(60, 60, 120, 0.2);
+
+			// This actually causes some glitches on Firefox :/
+			backdrop-filter: blur(4px);
 		}
 	}
 
@@ -181,6 +210,7 @@ alchemy-widget-toolbar {
 	background-color: white;
 	border-radius: 4px;
 	border: 1px solid #dadada;
+	font-size: 2rem;
 
 	&[hidden] {
 		display: none;
@@ -200,8 +230,8 @@ alchemy-widget-context {
 }
 
 alchemy-widget-toolbar {
-	min-height: 2rem;
-	min-width: 2rem;
+	min-height: 2.5rem;
+	min-width: 2.5rem;
 	display: flex;
 
 	> * {
@@ -209,7 +239,9 @@ alchemy-widget-toolbar {
 	}
 
 	.aw-toolbar-button {
+		font-size: 2.5rem;
 		border-radius: 4px;
+		padding: 0.6rem;
 
 		&:hover {
 			color: rgb(112, 118, 132);
@@ -240,6 +272,22 @@ alchemy-widget[type="header"] {
 	}
 }
 
+alchemy-widget[type="text"] {
+
+	&.aw-editing {
+		&,
+		& > * {
+			min-width: 5rem;
+			min-height: 3rem;
+		}
+
+		& > * {
+			display: inline-block;
+			width: 100%;
+		}
+	}
+}
+
 .aw-toolbar-button {
 
 	.aw-header-h {
@@ -255,4 +303,14 @@ alchemy-widget[type="header"] {
 
 table-of-contents {
 	display: block;
+}
+
+[data-he-template="widget/widget_config"] {
+	alchemy-label {
+		padding: 0.5rem;
+
+		[data-he-name="field-title"] {
+			display: block;
+		}
+	}
 }

package/bootstrap.js

@@ -1,3 +1,7 @@
+if (alchemy.plugins.form) {
+	throw new Error('The alchemy-form plugin has to be loaded AFTER alchemy-widget');
+}
+
 Router.add({
 	name       : 'AlchemyWidgets#save',
 	methods    : 'post',

package/controller/alchemy_widgets_controller.js

@@ -12,7 +12,7 @@ const AlchemyWidgets = Function.inherits('Alchemy.Controller', 'AlchemyWidgets')
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  *
  * @param    {Object[]}   fields
  *
@@ -59,18 +59,94 @@ AlchemyWidgets.setMethod(async function aggregate(widgets) {
 				result[model.name] = record;
 			}
 		}
-	
+
+		let field_definition;
+
+		if (widget.value_path) {
+			field_definition = model.getField(widget.field + '.' + widget.value_path);
+		} else {
+			field_definition = model.getField(widget.field);
+		}
+
+		if (!field_definition) {
+			continue;
+		}
+
+		// The optional translation key
 		let field_language = widget.field_languages?.[widget.field];
-	
-		if (field_language) {
-			if (!record[widget.field]) {
-				record[widget.field] = {};
+		let target_field_value = record[widget.field];
+		let target_container;
+		let target_key;
+		let path_for_language;
+
+		// Do incredibly complicated filter stuff
+		if (widget.filter_value) {
+
+			if (!widget.filter_target || !widget.value_path) {
+				continue;
+			}
+
+			// Create the root field if needed
+			if (!target_field_value) {
+				target_field_value = [];
+				record[widget.field] = target_field_value;
+			}
+
+			if (target_field_value && Array.isArray(target_field_value)) {
+				target_key = widget.value_path;
+
+				for (let index = 0; index < target_field_value.length; index++) {
+					let entry = target_field_value[index];
+
+					if (entry[widget.filter_target] == widget.filter_value) {
+						target_container = entry;
+						path_for_language = widget.field + '.' + index + '.' + target_key;
+						break;
+					}
+				}
+
+				if (!target_container) {
+					target_container = {
+						[widget.filter_target] : widget.filter_value,
+						[target_key]           : {},
+					};
+
+					let new_index = target_field_value.push(target_container) - 1;
+					path_for_language = widget.field + '.' + new_index + '.' + target_key;
+				}
 			}
-	
-			record[widget.field][field_language] = widget.value;
 		} else {
-			record[widget.field] = widget.value;
+			target_container = record;
+			target_key = widget.field;
+		}
+
+		if (!field_language && path_for_language) {
+			field_language = widget.field_languages?.[path_for_language];
+		}
+
+		if (!field_language && field_definition.is_translatable) {
+			field_language = this.conduit.active_prefix;
+
+			if (!field_language) {
+				continue;
+			}
 		}
+
+		if (field_language) {
+			if (!target_container) {
+				target_container = record[widget.field] = {};
+			}
+
+
+			if (!target_container[target_key]) {
+				target_container[target_key] = {};
+			}
+
+			target_container = target_container[target_key];
+			target_key = field_language;
+		}
+
+		target_container[target_key] = widget.value;
 	}
 
 	return Object.values(result);

package/element/00-widget_base_element.js

@@ -114,6 +114,46 @@ Base.setProperty(function can_be_saved() {
 	return true;
 });
 
+/**
+ * Can this widget be removed?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @type    {Boolean}
+ */
+Base.setProperty(function can_be_removed() {
+
+	// Widgets without a "parent_instance" are mostly
+	// hardcoded in some template (like in a Partial widget)
+	if (!this.instance?.parent_instance) {
+		return false;
+	}
+
+	return true;
+});
+
+/**
+ * Can this widget be moved?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @type    {Boolean}
+ */
+Base.setProperty(function can_be_moved() {
+
+	// Widgets without a "parent_instance" are mostly
+	// hardcoded in some template (like in a Partial widget)
+	if (!this.instance?.parent_instance) {
+		return false;
+	}
+
+	return true;
+});
+
 /**
  * Get a sibling container
  *
@@ -232,13 +272,26 @@ Base.setMethod(function rerender() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
 Base.setMethod(function introduced() {
 
 	if (this.hasAttribute('editing')) {
 		this.startEditor();
 	}
+
+	this.addEventListener('click', e => {
+
+		let is_editing = this.instance?.editing;
+
+		if (is_editing) {
+			let anchor = e.target.closest('a');
+
+			if (anchor) {
+				e.preventDefault();
+			}
+		}
+	});
 });
 
 /**
@@ -246,7 +299,7 @@ Base.setMethod(function introduced() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  */
 Base.setMethod(function gatherSaveData() {
 
@@ -263,6 +316,9 @@ Base.setMethod(function gatherSaveData() {
 		pk    : this.record.$pk,
 		field : this.field,
 		value : this.value,
+		filter_target   : this.filter_target,
+		filter_value    : this.filter_value,
+		value_path      : this.value_path,
 		field_languages : this.record.$hold.translated_fields,
 	};
 

package/element/05-widget_element.js

@@ -52,6 +52,42 @@ Widget.setAssignedProperty('record');
  */
 Widget.setAssignedProperty('field');
 
+/**
+ * The path to the value inside the field
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setAssignedProperty('value_path');
+
+/**
+ * The path to the field to filter on
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setAssignedProperty('filter_target');
+
+/**
+ * The filter value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setAssignedProperty('filter_value');
+
+/**
+ * CSS classes to put on the direct children
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setAttribute('child-class');
+
 /**
  * Is this widget being edited?
  *
@@ -89,11 +125,11 @@ Widget.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  */
 Widget.setMethod(function onRecordAssignment(new_record, old_val) {
 	if (new_record && this.field) {
-		let value = new_record[this.field];
+		let value = this.getValueFromRecord(new_record);
 		this.applyValue(value);
 	}
 });
@@ -103,21 +139,83 @@ Widget.setMethod(function onRecordAssignment(new_record, old_val) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  */
 Widget.setMethod(function onFieldAssignment(new_field, old_val) {
 	if (new_field && this.record) {
-		let value = this.record[new_field];
+		let value = this.getValueFromRecord(this.record);
 		this.applyValue(value);
 	}
 });
 
+/**
+ * Get the values to work with from the given record
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setMethod(function getValueFromRecord(record) {
+
+	if (!record) {
+		return;
+	}
+
+	let value;
+
+	if (this.field) {
+		value = record[this.field];
+	} else {
+		value = record;
+	}
+
+	if (!value) {
+		return;
+	}
+
+	if (this.filter_value) {
+		if (!Array.isArray(value) || !this.filter_target) {
+			return;
+		}
+
+		let inputs = value;
+		value = [];
+
+		for (let input of inputs) {
+			if (input[this.filter_target] == this.filter_value) {
+				value.push(input);
+			}
+		}
+	}
+
+	if (this.value_path) {
+		if (!Array.isArray(value)) {
+			return;
+		}
+
+		let inputs = value;
+		value = [];
+
+		for (let input of inputs) {
+			if (input[this.value_path]) {
+				value.push(input[this.value_path]);
+			}
+		}
+	}
+
+	if (Array.isArray(value)) {
+		value = value[0];
+	}
+
+	return value;
+});
+
 /**
  * Apply the given value
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  */
 Widget.setMethod(function applyValue(value) {
 
@@ -157,7 +255,11 @@ Widget.setMethod(function applyValue(value) {
 	}
 
 	this.instance.config = config;
-	this.instance.populateWidget();
+	let promise = this.instance.populateWidget();
+
+	if (promise) {
+		this.delayAssemble(promise);
+	}
 });
 
 /**

package/element/20-add_area_element.js

@@ -24,7 +24,7 @@ let AddArea = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyW
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
 AddArea.setMethod(function showTypes(event) {
 
@@ -42,7 +42,7 @@ AddArea.setMethod(function showTypes(event) {
 
 	for (let widget of widgets) {
 
-		if (widget.type_name == 'container') {
+		if (!widget.canBeAdded(that.parentElement)) {
 			continue;
 		}
 

package/element/widget_toolbar_element.js

@@ -15,7 +15,7 @@ let Toolbar = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyW
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @param    {HTMLElement}   widget
  */
@@ -37,7 +37,24 @@ Toolbar.setMethod(function showWidgetActions(widget) {
 		let button = this.createElement('button');
 		button.classList.add('aw-toolbar-button');
 
-		button.innerHTML = action.getButtonHTML();
+		let content = action.getButtonContent();
+
+		if (!content) {
+			content = action.title;
+		}
+
+		if (typeof content == 'string') {
+			button.innerText = content;
+		} else if (content) {
+			if (Array.isArray(content)) {
+				for (let entry of content) {
+					button.append(entry);
+				}
+			} else {
+				button.append(content);
+			}
+		}
+
 		button.setAttribute('title', action.title);
 
 		let is_selected = action.isAlreadySelected(widget);

package/helper/widget_action.js

@@ -141,30 +141,31 @@ Action.setMethod(function test(widget) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
- * @return   {String}
+ * @return   {HTMLElement|String}
  */
-Action.setMethod(function getButtonHTML() {
+Action.setMethod(function getButtonContent() {
 
-	let html;
+	let result;
 
 	if (this.icon) {
 
 		let icon = this.icon;
 
 		if (typeof icon == 'string') {
-			html = '<i class="' + icon + '"></i>';
+			result = Blast.Classes.Hawkejs.Hawkejs.createElement('al-ico');
+			result.setIcon(icon);
 		} else if (icon.html) {
-			html = icon.html;
+			result = Blast.Classes.Hawkejs.parseHTML(icon.html);
 		}
 	}
 
-	if (!html) {
-		html = this.name;
+	if (!result) {
+		result = this.name;
 	}
 
-	return html;
+	return result;
 });
 
 /**

package/helper/widgets/00-widget.js

@@ -77,14 +77,20 @@ Widget.setProperty(function element() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @type     {Hawkejs.Renderer}
  */
 Widget.enforceProperty(function hawkejs_renderer(new_value) {
 
-	if (!new_value && Blast.isBrowser) {
-		new_value = hawkejs.scene.general_renderer;
+	if (!new_value) {
+		if (this.parent_instance && this.parent_instance.hawkejs_renderer) {
+			new_value = this.parent_instance.hawkejs_renderer;
+		} else if (this.widget && this.widget.hawkejs_renderer) {
+			new_value = this.widget.hawkejs_renderer;
+		} else if (Blast.isBrowser) {
+			new_value = hawkejs.scene.general_renderer;
+		}
 	}
 
 	return new_value;
@@ -95,7 +101,7 @@ Widget.enforceProperty(function hawkejs_renderer(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.5
+ * @version  0.1.6
  */
 Widget.constitute(function prepareSchema() {
 
@@ -131,6 +137,8 @@ Widget.constitute(function prepareSchema() {
 		return widget_el.can_be_saved;
 	});
 
+	save.setIcon('floppy-disk');
+
 	// Add the remove action
 	let remove = this.createAction('remove', 'Remove');
 
@@ -141,16 +149,16 @@ Widget.constitute(function prepareSchema() {
 	});
 
 	remove.setTester(function removeTester(widget_el, handle) {
-		// The root alchemy-widgets element should not be removed
-		return widget_el.tagName !== 'ALCHEMY-WIDGETS';
+		return widget_el.can_be_removed;
 	});
 
-	remove.setIcon('gg-trash');
+	remove.setIcon('trash');
 
 	// Add the config action
 	let config = this.createAction('config', 'Config');
 
 	config.close_toolbar = true;
+	config.setIcon('gears');
 
 	config.setHandler(function configAction(widget_el, handle) {
 		widget_el.instance.showConfig();
@@ -167,10 +175,15 @@ Widget.constitute(function prepareSchema() {
 	});
 
 	move_left.setTester(function moveLeftTest(widget_el, handle) {
+
+		if (!widget_el.can_be_moved) {
+			return false;
+		}
+
 		return !!handle.previousElementSibling;
 	});
 
-	move_left.setIcon('gg-arrow-left');
+	move_left.setIcon('arrow-left');
 
 	let move_right = this.createAction('move-right', 'Move right');
 
@@ -183,6 +196,10 @@ Widget.constitute(function prepareSchema() {
 
 	move_right.setTester(function moveRightTest(widget_el, handle) {
 
+		if (!widget_el.can_be_moved) {
+			return false;
+		}
+
 		let next = handle.nextElementSibling;
 
 		if (!next || next.tagName == 'ALCHEMY-WIDGET-ADD-AREA') {
@@ -192,7 +209,7 @@ Widget.constitute(function prepareSchema() {
 		return true;
 	});
 
-	move_right.setIcon('gg-arrow-right');
+	move_right.setIcon('arrow-right');
 
 	// The move-in-left action
 	let move_in_left = this.createAction('move-in-left', 'Move in left');
@@ -209,10 +226,15 @@ Widget.constitute(function prepareSchema() {
 	});
 
 	move_in_left.setTester(function moveLeftTest(widget_el, handle) {
+
+		if (!widget_el.can_be_moved) {
+			return false;
+		}
+
 		return !!handle.previous_container;
 	});
 
-	move_in_left.setIcon('gg-arrow-left');
+	move_in_left.setIcon('arrow-left');
 
 	// The move-in-right action
 	let move_in_right = this.createAction('move-in-right', 'Move in right');
@@ -229,17 +251,23 @@ Widget.constitute(function prepareSchema() {
 	});
 
 	move_in_right.setTester(function moveRightTest(widget_el, handle) {
-		console.log('Right test of:', handle)
+
+		if (!widget_el.can_be_moved) {
+			return false;
+		}
+
 		return !!handle.next_container;
 	});
 
-	move_in_right.setIcon('gg-arrow-right');
+	move_in_right.setIcon('arrow-right');
 
 	let css_class = this.createAction('css-class', 'CSS Class');
 
 	css_class.setHandler(function setCssClass(widget_el, handle) {
 		widget_el.instance.showConfig(['main_class_names']);
 	});
+
+	css_class.setIcon('tags');
 });
 
 /**
@@ -279,6 +307,43 @@ Widget.setStatic(function createAction(name, title) {
 	return action;
 });
 
+/**
+ * Add a check to see if the widget can be added to the current location
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Boolean|Function}   checker
+ */
+Widget.setStatic(function setAddChecker(checker) {
+	this.add_checker = checker;
+});
+
+/**
+ * Actually perform the add-check
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Alchemy.Element.Widget.Base}   widget_element
+ */
+Widget.setStatic(function canBeAdded(widget_element) {
+
+	if (this.add_checker != null) {
+		const type = typeof this.add_checker;
+
+		if (type == 'function') {
+			return this.add_checker(widget_element);
+		} else if (type == 'boolean') {
+			return this.add_checker;
+		}
+	}
+
+	return true;
+});
+
 /**
  * unDry an object
  *
@@ -460,11 +525,11 @@ Widget.setMethod(function _createPopulatedWidgetElement() {
 });
 
 /**
- * Dummy populate method
+ * Populate the contents of the widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.2
+ * @version  0.1.6
  */
 Widget.setMethod(function populateWidget() {
 
@@ -480,6 +545,16 @@ Widget.setMethod(function populateWidget() {
 		}
 	}
 
+	let child_classes = this.widget.child_class;
+
+	if (child_classes) {
+		let children = this.widget.children,
+		    i;
+		
+		for (i = 0; i < children.length; i++) {
+			Hawkejs.addClasses(children[i], child_classes);
+		}
+	}
 });
 
 /**
@@ -487,16 +562,23 @@ Widget.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
-Widget.setMethod(function startEditor() {
+Widget.setMethod(async function startEditor() {
 
 	// Show this is being edited
 	this.editing = true;
 
+	// Make sure the icon font is loaded
+	if (this.hawkejs_renderer?.helpers?.Media) {
+		this.hawkejs_renderer.helpers.Media.loadIconFont();
+	}
+
 	// Add the appropriate class to the current widget wrapper
 	this.widget.classList.add('aw-editing');
 
+	await this.widget.waitForTasks();
+
 	if (typeof this._startEditor == 'function') {
 		this._startEditor();
 	}
@@ -529,13 +611,13 @@ Widget.setMethod(function stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
-Widget.setMethod(function rerender() {
+Widget.setMethod(async function rerender() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	this.populateWidget();
+	await this.populateWidget();
 
 	if (this.editing) {
 		this.startEditor();
@@ -560,7 +642,7 @@ Widget.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.12
  */
 Widget.setMethod(async function showConfig(fields) {
 
@@ -590,9 +672,11 @@ Widget.setMethod(async function showConfig(fields) {
 		}
 	}
 
+	let widget_settings = Object.assign({}, this.syncConfig());
+
 	let variables = {
 		schema           : this.schema,
-		widget_settings  : this.syncConfig(),
+		widget_settings,
 		fields           : fields
 	};
 
@@ -607,6 +691,9 @@ Widget.setMethod(async function showConfig(fields) {
 	let dialog = dialog_contents.queryParents('he-dialog'),
 	    button = dialog_contents.querySelector('.btn-apply');
 
+	dialog_contents.classList.add('default-form-editor');
+	hawkejs.scene.enableStyle('chimera/chimera');
+
 	button.addEventListener('click', e => {
 		e.preventDefault();
 

package/helper/widgets/01-container.js

@@ -11,6 +11,11 @@
  */
 const Container = Function.inherits('Alchemy.Widget', 'Container');
 
+/**
+ * Make this an abstract class
+ */
+Container.makeAbstractClass();
+
 /**
  * Prepare the schema
  *

package/helper/widgets/header.js

@@ -33,7 +33,7 @@ Header.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
 Header.constitute(function addActions() {
 
@@ -43,7 +43,7 @@ Header.constitute(function addActions() {
 	for (let level of levels) {
 		let level_action = this.createAction('make-level-' + level, 'Level ' + level);
 
-		level_action.setHandler(function setLevelAction(widget, toolbar) {
+		level_action.setHandler(function setLevelAction(widget, handle, toolbar) {
 
 			let content = widget.querySelector(query);
 

package/helper/widgets/partial.js

@@ -0,0 +1,215 @@
+/**
+ * The Partial Widget class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Object}   data
+ */
+const Partial = Function.inherits('Alchemy.Widget', 'Partial');
+
+/**
+ * Make this an abstract class
+ */
+Partial.makeAbstractClass();
+
+/**
+ * Get the type name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setStatic(function createClassTypeName() {
+	return 'partial_' + this.name.underscore();
+});
+
+/**
+ * Set the template to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setStatic(function setTemplateFile(name) {
+	this.constitute(function _setTemplateFile() {
+		this.template_file = name;
+	});
+});
+
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.constitute(function prepareSchema() {
+
+	this.schema.addField('view', 'String', {
+		title       : 'Partial View',
+		description : 'The actual HWK template to use for rendering this widget',
+	});
+
+	let contents = this.createSchema();
+
+	contents.addField('name', 'String');
+	contents.addField('content', 'Widgets');
+
+	this.schema.addField('contents', contents, {array: true});
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {HTMLElement}   widget
+ */
+Partial.setMethod(async function populateWidget() {
+
+	let view = this.constructor.template_file || this.config.view;
+
+	if (view) {
+
+		let options = {
+			print : false,
+		};
+
+		let variables = {};
+
+		await this.addVariablesForRender(variables);
+
+		if (this.config?.contents?.length) {
+			for (let entry of this.config.contents) {
+				variables[entry.name] = entry.contents;
+			}
+		}
+
+		variables.config = this.config;
+
+		let placeholder = this.hawkejs_renderer.addSubtemplate(view, options, variables);
+
+		// If the widget is already part of the DOM,
+		// it's being edited and we need to manually kickstart the renderer
+		if (Blast.isBrowser && document.body.contains(this.widget)) {
+			await placeholder.getContent();
+		}
+
+		Hawkejs.removeChildren(this.widget);
+
+		this.widget.append(placeholder);
+	}
+
+	populateWidget.super.call(this);
+});
+
+/**
+ * Allow adding variables for rendering the partial
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.
+ * @version  0.1.
+ */
+Partial.setMethod(function addVariablesForRender(variables) {
+	// To be optionally implemented by child widgets
+});
+
+/**
+ * Get all the sub widgets by their name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @return   {Object}
+ */
+Partial.setMethod(function getSubWidgets() {
+
+	let elements = this.widget.queryAllNotNested('[data-section-name]'),
+	    result = {};
+	
+	for (let element of elements) {
+		result[element.dataset.sectionName] = element;
+	}
+
+	return result;
+});
+
+/**
+ * Start the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setMethod(function _startEditor() {
+
+	let sub_widgets = this.getSubWidgets();
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		sub_widget.startEditor();
+	}
+});
+
+/**
+ * Stop the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setMethod(function _stopEditor() {
+
+	let sub_widgets = this.getSubWidgets();
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		sub_widget.stopEditor();
+	}
+
+	this.populateWidget();
+});
+
+/**
+ * Update the config values
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @return   {Object}
+ */
+Partial.setMethod(function syncConfig() {
+
+	let sub_widgets = this.getSubWidgets(),
+	    contents = this.config.contents;
+
+	if (!contents) {
+		contents = [];
+		this.config.contents = contents;
+	}
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		let widget_config = contents.findByPath('name', name);
+
+		if (!widget_config) {
+			widget_config = {
+				name,
+			};
+
+			contents.push(widget_config);
+		}
+
+		widget_config.contents = sub_widget.value;
+	}
+
+	return this.config;
+});

package/helper/widgets/text.js

@@ -28,18 +28,28 @@ Text.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @param    {HTMLElement}   widget
  */
 Text.setMethod(function populateWidget() {
 
+	let tag_name;
+
 	populateWidget.super.call(this);
 
-	let paragraph = this.createElement('p');
-	paragraph.textContent = this.config.content || '';
+	if (this.widget.dataset.textElementTag) {
+		tag_name = this.widget.dataset.textElementTag;
+	}
+
+	if (!tag_name) {
+		tag_name = 'p';
+	}
+
+	let text_element = this.createElement(tag_name);
+	text_element.textContent = this.config.content || '';
 
-	this.widget.append(paragraph);
+	this.widget.append(text_element);
 });
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -15,6 +15,6 @@
 	"repository": "11ways/alchemy-widget",
 	"license": "MIT",
 	"engines": {
-		"node" : ">=12.0.0"
+		"node" : ">=14.0.0"
 	}
 }