alchemy-form 0.1.10 → 0.1.12

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## 0.1.12 (2022-10-12)
+
+* Don't let users manually add form widgets
+* Allow overriding alchemy-field title & description in extra widget settings
+* Allow overriding an alchemy-field's used wrapper-view
+* Add `AlchemyField#applyOptions(options)` method
+* Allow an alchemy-field's field_title property to be set
+* Allow turning off specific column filters in alchemy-table
+* Add inline enum field view
+* Fix alchemy-pager icons
+* Use `Model#getDisplayTitle()` to get the display title of records for alchemy-select-items
+* Make the QueryBuilder field's source data configurable
+* Add `VariableDefinition.fromMany()` method
+* `VariableDefinition.cast()` now also accepts `Field` instances
+* Add `QueryBuilder.applyToCriteria()` method
+* Fix schema fields sometimes getting the wrong schema from an Enum value
+
+## 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

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/controller/form_api_controller.js

@@ -62,7 +62,6 @@ FormApi.setAction(async function related(conduit) {
 	conduit.end(result);
 });
 
-
 /**
  * The related action
  *

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

@@ -70,6 +70,15 @@ Field.setAttribute('field-type');
  */
 Field.setAttribute('field-view');
 
+/**
+ * The wrapper view override
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.12
+ * @version  0.1.12
+ */
+Field.setAttribute('wrapper-view');
+
 /**
  * Is this a read only field?
  *
@@ -260,22 +269,19 @@ Field.setProperty(function is_translatable() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.12
  */
 Field.setProperty(function field_title() {
 
-	let config = this.config,
-	    result;
-
-	if (config) {
-		result = config.title;
-	}
+	let result = this._title || this.widget_settings?.title || this.config?.title;
 
 	if (!result && this.field_name) {
 		result = this.field_name.titleize();
 	}
 
 	return result;
+}, function setTitle(value) {
+	this._title = value;
 });
 
 /**
@@ -283,16 +289,11 @@ Field.setProperty(function field_title() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.12
  */
 Field.setProperty(function field_description() {
 
-	let config = this.config,
-	    result;
-
-	if (config && config.options) {
-		result = config.options.description;
-	}
+	let result = this.widget_settings?.description || this.config?.description;
 
 	return result;
 });
@@ -349,60 +350,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;
-
-		if (config) {
-
-			let field_view;
+		let view_type = this.view_type,
+			field_view = this.field_view || this.field_type;
+		
+		if (!field_view) {
+			let config = this.config;
 
-			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 wrapper_view = this.wrapper_view || this.getFieldType(),
+		     view_type = this.view_type;
+
+		if (wrapper_view) {
+			return this.generateTemplatePath('wrappers', view_type, wrapper_view);
 		}
 	}
 
@@ -414,7 +410,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() {
 
@@ -425,14 +421,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) {
@@ -440,7 +442,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;
 });
@@ -450,7 +452,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() {
 
@@ -466,22 +468,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);
 	}
 
@@ -584,6 +585,97 @@ Field.setProperty(function value() {
 	}
 });
 
+/**
+ * Apply options
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.12
+ * @version  0.1.12
+ *
+ * @param    {Object}   options
+ */
+Field.setMethod(function applyOptions(options) {
+
+	if (!options || typeof options != 'object') {
+		return;
+	}
+
+	if (options.purpose) {
+		this.purpose = options.purpose;
+	}
+
+	if (options.mode) {
+		this.mode = options.mode;
+	}
+
+	if (options.view) {
+		this.field_view = options.view;
+	}
+
+	if (options.wrapper) {
+		this.wrapper_view = options.wrapper;
+	}
+
+	if (options.readonly) {
+		this.readonly = true;
+	}
+
+	if (options.widget_settings) {
+		this.widget_settings = options.widget_settings;
+	}
+
+	if (options.data_src) {
+		this.data_src = options.data_src;
+	}
+
+	if (options.title) {
+		this.field_title = options.title;
+	}
+
+});
+
+/**
+ * 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
  *

package/element/alchemy_field_schema.js

@@ -5,9 +5,7 @@
  * @since    0.1.0
  * @version  0.1.0
  */
-var FieldSchema = Function.inherits('Alchemy.Element.Form.FieldCustom', function FieldSchema() {
-	FieldSchema.super.call(this);
-});
+var FieldSchema = Function.inherits('Alchemy.Element.Form.FieldCustom', 'FieldSchema');
 
 /**
  * The template to use for the content of this element
@@ -23,7 +21,7 @@ FieldSchema.setTemplateFile('form/elements/alchemy_field_schema');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.12
  */
 FieldSchema.setProperty(function schema() {
 
@@ -38,15 +36,29 @@ FieldSchema.setProperty(function schema() {
 				let values = other_field.config.options.values;
 
 				if (values) {
+					let value;
 
 					if (values instanceof Classes.Alchemy.Map.Backed) {
-						schema = values.get(other_field.value);
+						value = values.get(other_field.value);
 					} else {
-						schema = values[other_field.value];
+						value = values[other_field.value];
+					}
+
+					if (value) {
+						if (value.schema) {
+							schema = value.schema;
+						} else if (value.value) {
+							// Enumified values can be wrapped on the server-side
+							value = value.value;
+
+							if (value.schema) {
+								schema = value.schema;
+							}
+						}
 					}
 
-					if (schema && schema.schema) {
-						schema = schema.schema;
+					if (!schema) {
+						schema = value;
 					}
 				}
 			}

package/element/alchemy_pager.js

@@ -12,28 +12,28 @@ const Pager = Function.inherits('Alchemy.Element.Form.Base', 'Pager');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.12
  */
 Pager.setTemplate(`<ul>
 	<li class="afp-first">
 		<a href="#" aria-label="First page">
-			<al-ico type="arrow-left-double"></al-ico>
+			<al-ico icon-name="left-to-line"></al-ico>
 		</a>
 	</li>
 	<li class="afp-prev">
 		<a href="#" aria-label="Previous page">
-			<al-ico type="arrow-left"></al-ico>
+			<al-ico icon-name="left"></al-ico>
 		</a>
 	</li>
 
 	<li class="afp-next">
 		<a href="#" aria-label="Next page">
-			<al-ico type="arrow-right"></al-ico>
+			<al-ico icon-name="right"></al-ico>
 		</a>
 	</li>
 	<li class="afp-last">
 		<a href="#" aria-label="Last page">
-			<al-ico type="arrow-right-double"></al-ico>
+			<al-ico icon-name="right-to-line"></al-ico>
 		</a>
 	</li>
 </ul>`, true);

package/element/alchemy_select_item.js

@@ -85,13 +85,27 @@ Item.enforceProperty(function alchemy_select(new_value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.12
  */
 Item.setProperty(function display_title() {
 
-	if (!this.data) {
-		return '';
+	let result;
+
+	if (this.data) {
+		const model = this.data.$model;
+
+		if (model) {
+			result = model.getDisplayTitle(this.data, ['title', 'name']);
+		}
+	}
+
+	if (!result) {
+		if (this.data) {
+			result = this.data.title || this.data.name || this.data.$pk || this.value;
+		} else {
+			result = this.value;
+		}
 	}
 
-	return this.data.title || this.data.name || this.data.username || this.data.$pk || this.value;
+	return result || '';
 });