alchemy-form 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.2.6 (2023-06-17)
+
+* Fix `al-field-schema` element not being able to get schema of an arrayable field
+* Add `Pathway` system for faceted breadcrumbs
+* Allow `al-select` to take in simple arrays as data
+* Allow getting the current operator in a query builder entry
+
+## 0.2.5 (2023-04-20)
+
+* Add more configuration to `al-code-input`
+
 ## 0.2.4 (2023-02-26)
 
 * Don't look for a field when the path is not specified

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

@@ -0,0 +1,56 @@
+al-pathway {
+	display: flex;
+}
+
+al-pathway-selection {
+	display: flex;
+	gap: 1rem;
+
+	& > .leaf-info {
+		border-radius: 5px;
+		padding: 10px;
+		cursor: pointer;
+
+		background-color: var(--pathway-leaf-bg, rgb(31, 41, 55));
+		color: var(--pathway-leaf-color, rgb(255, 255, 255));
+
+		&:hover {
+			background-color: var(--pathway-leaf-hover-bg, rgb(56, 69, 85));
+		}
+	}
+}
+
+
+.al-pathway-leaf-dropdown {
+	background-color: var(--pathway-leaf-option-selection-bg, rgb(55, 65, 81));
+	color: var(--pathway-leaf-color, rgb(255, 255, 255));
+	display: flex;
+	border-radius: 5px;
+
+	.al-pathway-select-leaf-type,
+	.al-pathway-select-leaf-value {
+		padding: 10px 0;
+	}
+
+	.al-pathway-select-leaf-type {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		li {
+			padding: 15px 25px;
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--pathway-leaf-option-selection-hover-bg, rgb(69, 84, 101));
+			}
+		}
+	}
+
+
+
+}

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

@@ -11,4 +11,5 @@
 @import "_state.scss";
 @import "_table.scss";
 @import "_toggle.scss";
-@import "_tabs.scss";
+@import "_tabs.scss";
+@import "_pathway.scss";

package/element/25_query_builder_data.js

@@ -133,7 +133,5 @@ QueryBuilderData.setMethod(async function loadVariableData(config) {
 		}
 	}
 
-	console.log('Got loadvariable data:', result);
-
 	return result;
 });

package/element/al_code_input.js

@@ -16,12 +16,57 @@ const CodeInput = Function.inherits('Alchemy.Element.Form.Base', 'CodeInput');
  */
 CodeInput.setTemplateFile('form/elements/code_input');
 
+/**
+ * Line number info
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('show-line-numbers', {type: 'boolean', default: true});
+
+/**
+ * The ace mode to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('language-mode');
+
+/**
+ * The theme to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('color-theme');
+
+/**
+ * The minimum number of lines to show (height)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('min-lines', {type: 'number'});
+
+/**
+ * The maximum number of lines to show (height)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('max-lines', {type: 'number'});
+
 /**
  * Get/set the value
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.5
  */
 CodeInput.setProperty(function value(value) {
 
@@ -34,6 +79,11 @@ CodeInput.setProperty(function value(value) {
 	if (editor_el) {
 		return editor_el.textContent;
 	}
+
+	if (this.assigned_data.value) {
+		return this.assigned_data.value;
+	}
+
 }, function setValue(value) {
 
 	if (this._editor) {
@@ -51,6 +101,7 @@ CodeInput.setProperty(function value(value) {
 		return editor_el.textContent = value;
 	}
 
+	this.assigned_data.value = value;
 });
 
 /**
@@ -58,7 +109,7 @@ CodeInput.setProperty(function value(value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.10
+ * @version  0.2.5
  */
 CodeInput.setMethod(async function introduced() {
 
@@ -68,7 +119,20 @@ CodeInput.setMethod(async function introduced() {
 
 	editor_el.hidden = false;
 
-	let editor = ace.edit(editor_el);
+	let theme = this.color_theme || 'ace/theme/tomorrow_night_eighties';
+
+	if (!theme.startsWith('ace/theme')) {
+		theme = 'ace/theme/' + theme;
+	}
+
+	let options = {
+		showLineNumbers : this.show_line_numbers,
+		minLines        : this.minLines || 4,
+		maxLines        : this.maxLines || 50,
+		theme           : theme,
+	};
+
+	let editor = ace.edit(editor_el, options);
 
 	editor.session.setUseWrapMode(true);
 	editor.setFontSize(16);
@@ -88,5 +152,17 @@ CodeInput.setMethod(async function introduced() {
 		editor.session.setMode(mode);
 	}
 
+	if (this.assigned_data.value) {
+		editor.setValue(this.assigned_data.value, -1);
+	}
+
+	if (this.language_mode) {
+		try {
+			editor.session.setMode('ace/mode/' + this.language_mode);
+		} catch (err) {
+			// Ignore
+		}
+	}
+
 	this._editor = editor;
 });

package/element/al_field_schema.js

@@ -21,7 +21,7 @@ FieldSchema.setTemplateFile('form/elements/alchemy_field_schema');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.4
+ * @version  0.2.6
  */
 FieldSchema.setProperty(function schema() {
 
@@ -32,6 +32,8 @@ FieldSchema.setProperty(function schema() {
 
 		let schema = field.options.schema;
 
+		// If the schema is a string, it's actually a reference to another field
+		// that *should* contain the schema.
 		if (typeof schema == 'string') {
 
 			let parent_schema_value;
@@ -53,6 +55,17 @@ FieldSchema.setProperty(function schema() {
 				parent_schema_value = record_value;
 			}
 
+			// If this field is inside an array, get the index
+			let array_entry_element = field_element.queryParents('al-field-array-entry');
+			if (array_entry_element) {
+				let index = array_entry_element.index;
+
+				// If it has an index, get the value at that index
+				if (index != null && Array.isArray(parent_schema_value)) {
+					parent_schema_value = parent_schema_value[index];
+				}
+			}
+
 			return field.getSubschema(parent_schema_value, schema)
 		}
 

package/element/al_pathway.js

@@ -0,0 +1,82 @@
+/**
+ * The al-pathway element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ */
+const Pathway = Function.inherits('Alchemy.Element.Form.Base', 'Pathway');
+
+/**
+ * The hawkejs template to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ */
+Pathway.setTemplateFile('form/elements/al_pathway');
+
+/**
+ * The root leaf property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ */
+Pathway.setAssignedProperty('rootleaf');
+
+/**
+ * The current value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ */
+Pathway.setAssignedProperty(function value(val) {
+
+	let new_val = this.getValue();
+
+	if (new_val) {
+		return new_val;
+	}
+
+	return val;
+}, function setValue(val) {
+
+	let child = this.querySelector('.al-pathway-selection-root');
+
+	if (child) {
+		child.value = val;
+	}
+
+});
+
+/**
+ * Get the current value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ */
+Pathway.setMethod(function getValue() {
+
+	let child = this.querySelector('.al-pathway-selection-root');
+
+	if (child) {
+		return child.getValue();
+	}
+});
+
+/**
+ * Incoming change
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ *
+ * @param    {PathwaySelection}   element
+ */
+Pathway.setMethod(function triggerChange(element) {
+
+	alchemy.emit('story_pathway', this, element);
+});