alchemy-form 0.1.6 → 0.1.9

package/element/query_builder_variable.js

@@ -0,0 +1,103 @@
+/**
+ * The alchemy-query-builder-value custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+const QueryBuilderVariable = Function.inherits('Alchemy.Element.Form.QueryBuilderData', 'QueryBuilderVariable');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setTemplateFile('form/elements/query_builder_variable');
+
+/**
+ * A filter of variable definition types
+ * (number, string, ...)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setAttribute('variable-types');
+
+/**
+ * Getter for the value input wrapper
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.addElementGetter('variable_select', '.qb-variable');
+
+/**
+ * Get/set the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setProperty(function value() {
+
+	let result = {
+		type          : 'qb_variable',
+		variable_type : null,
+	};
+
+	let select = this.variable_select;
+
+	if (select) {
+		result.variable = select.value;
+
+		if (select.values) {
+			let value_def = select.values[result.variable];
+
+			if (value_def) {
+				result.variable_type = value_def.type_name;
+			}
+		}
+	}
+
+	return result;
+}, function setValue(value) {
+	this.assigned_data.value = value;
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setMethod(async function applyValue(value) {
+
+	if (!value) {
+		return;
+	}
+
+	let select = this.variable_select;
+
+	if (select) {
+		select.value = value.variable;
+	}
+});
+
+/**
+ * Added to the dom
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+QueryBuilderVariable.setMethod(async function introduced() {
+
+	if (this.assigned_data.value) {
+		await this.applyValue(this.assigned_data.value);
+	}
+});

package/helper/query_builder_variable_definition/00_variable_definition.js

@@ -154,10 +154,20 @@ VariableDefinition.setStatic(function addLogicalOperator(name, config) {
 		config = {};
 	}
 
-	if(!config.title) {
+	if (!config.title) {
 		config.title = name.titleize();
 	}
 
+	// By default logical operators have a binary arity:
+	// they take 2 operands. The value of the variable + another value.
+	if (!config.arity) {
+		config.arity = 'binary';
+	}
+
+	if (config.arity != 'unary' && config.arity != 'binary' && config.arity != 'ternary') {
+		throw new Error('Unable to add Logical operator "' + name + '" to ' + this.name + ', unknown arity: "' + config.arity);
+	}
+
 	config.id = name;
 
 	this.constitute(function _addOperator() {
@@ -185,10 +195,20 @@ VariableDefinition.setStatic(function addAssignmentOperator(name, config) {
 		config = {};
 	}
 
-	if(!config.title) {
+	if (!config.title) {
 		config.title = name.titleize();
 	}
 
+	// By default assignment operators have a binary arity:
+	// they take 2 operands. The value of the variable + another value
+	if (!config.arity) {
+		config.arity = 'binary';
+	}
+
+	if (config.arity != 'unary' && config.arity != 'binary' && config.arity != 'ternary') {
+		throw new Error('Unable to add Assignment operator "' + name + '" to ' + this.name + ', unknown arity: "' + config.arity);
+	}
+
 	config.id = name;
 
 	this.constitute(function _addOperator() {
@@ -330,7 +350,7 @@ VariableDefinition.addLogicalOperator('not_equals');
  * @since    0.1.6
  * @version  0.1.6
  */
-VariableDefinition.addLogicalOperator('is_empty');
+VariableDefinition.addLogicalOperator('is_empty', {arity: 'unary'});
 
 /**
  * The `is_null` operator
@@ -339,7 +359,7 @@ VariableDefinition.addLogicalOperator('is_empty');
  * @since    0.1.6
  * @version  0.1.6
  */
-VariableDefinition.addLogicalOperator('is_null');
+VariableDefinition.addLogicalOperator('is_null', {arity: 'unary'});
 
 /**
  * The `set` operator sets a value

package/helper/query_builder_variable_definition/list_variable_definition.js

@@ -0,0 +1,38 @@
+/**
+ * The List Value Type:
+ * Can contain other value types.
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+const ListDefinition = Function.inherits('Alchemy.QueryBuilder.VariableDefinition', 'List');
+
+/**
+ * The optional type this list holds
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+ListDefinition.setProperty('content_type');
+
+/**
+ * The `contains` operator
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+ListDefinition.addLogicalOperator('contains');
+
+/**
+ * The `add` assignment operator adds an entry
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.7
+ * @version  0.1.7
+ */
+ListDefinition.addAssignmentOperator('add');

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/helper_field/query_builder_variable.js

@@ -0,0 +1,56 @@
+/**
+ * A QueryBuilderVariable field lets you select a specific variable
+ * using the QueryBuilder logic
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+const QueryBuilderVariable = Function.inherits('Alchemy.Field.QueryBuilder', 'QueryBuilderVariable');
+
+/**
+ * Load remote data
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Object}        config
+ * @param    {HTMLElement}   element
+ */
+QueryBuilderVariable.setMethod(function loadData(config, element) {
+
+	if (element) {
+		let form = element.queryParents('alchemy-form');
+
+		if (form) {
+			let doc = form.document;
+
+			if (doc && doc.root_document) {
+				doc = doc.root_document;
+			}
+
+			let model_name,
+				$pk;
+			
+			if (doc) {
+				model_name = doc.$model_name;
+				$pk = doc.$pk;
+			}
+
+			return element.hawkejs_helpers.Alchemy.getResource({
+				name  : 'FormApi#queryBuilderData',
+				post  : true,
+				body  : {
+					model        : model_name,
+					$pk          : $pk,
+					config       : config,
+				}
+			});
+		}
+	}
+
+	return [];
+});

package/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.1.6",
+	"version": "0.1.9",
 	"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/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/elements/query_builder_variable.hwk

@@ -0,0 +1,6 @@
+<alchemy-select
+	class="qb-variable"
+	#dataprovider={% self %}
+	value-item-template="form/select/qb_item"
+	option-item-template="form/select/qb_item"
+></alchemy-select>

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/edit/query_builder_variable.hwk

@@ -0,0 +1,10 @@
+<%
+options = alchemy_field.config.options || {};
+%>
+
+<alchemy-query-builder-variable
+	class="alchemy-field-value"
+	#value={% value %}
+	#dataprovider={% alchemy_field %}
+	variable-types={% options.variable_types %}
+></alchemy-query-builder-variable>

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>