alchemy-form 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.2.7 (2023-10-05)
+
+* If a `al-field` element is assigned a `Field` instance to its `config` property without a parent `schema` property, it will be stored in its `assigned_data` property
+* Make sure string fields use the `text` input type instead of `string` in some cases
+* Automatically add the `does-not-expand` css class to `al-toggle` element
+* Improve `al-toggle` styling
+* Store a `al-field` element's applied options in the new `applied_options` property, so it can be used inside the view templates too
+* Use relative (time-ago) dates by default for showing date/datetime fields inline
+
+## 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`

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

@@ -5,7 +5,7 @@ al-field {
 		
 		.field {
 			display: flex;
-			justify-content: center;
+			justify-content: flex-start;
 		}
 
 		.boolean-wrapper {

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/_toggle.scss

@@ -2,6 +2,7 @@ al-toggle {
 	display: flex;
 	position: relative;
 	align-items: center;
+	cursor: pointer;
 
 	input {
 		opacity: 0;
@@ -14,7 +15,7 @@ al-toggle {
 		background-color: #20c05b;
 
 		&:before {
-			content: attr(data-unchecked);
+			content: " ";
 			left: 0;
 		}
 
@@ -36,8 +37,9 @@ al-toggle {
 		border-radius: 4px;
 		min-width: 134px;
 
+		box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
 		transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
-		background: #848484;
+		background: #b7b7b7;
 		position: relative;
 
 		&:before,
@@ -48,9 +50,9 @@ al-toggle {
 		}
 
 		&:before {
-			content: attr(data-checked);
+			content: " ";
 			left: 67px;
-			font-size: 12px;
+			font-size: 14px;
 			line-height: 36px;
 			width: 67px;
 			padding: 0 12px;
@@ -65,11 +67,15 @@ al-toggle {
 
 		&:after {
 			content: attr(data-unchecked);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: calc(100% - 4px);
+
 			top: 2px;
 			left: 2px;
 			border-radius: 2px;
 			width: 65px;
-			line-height: 32px;
 			font-size: 12px;
 			font-weight: bold;
 

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_field.js

@@ -88,6 +88,15 @@ Field.setAttribute('readonly', {boolean: true});
  */
 Field.setAssignedProperty('widget_settings');
 
+/**
+ * Applied options
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Field.setAssignedProperty('applied_options');
+
 /**
  * The placeholder
  *
@@ -151,10 +160,22 @@ Field.enforceProperty(function alchemy_field_schema(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.8
+ * @version  0.2.7
  */
 Field.enforceProperty(function config(new_value, old_value) {
 
+	// If an explicit field is set without a schema,
+	// we need to remember it for serializing purposes
+	if (new_value && !new_value.schema) {
+		this.assigned_data.field_config = new_value;
+	}
+
+	// See if there is a rememberd field available
+	if (!new_value && this.assigned_data?.field_config) {
+		new_value = this.assigned_data.field_config;
+	}
+
+	// There is no remembered field, so check the schema
 	if (!new_value && this.field_name) {
 
 		let schema = this.schema;
@@ -590,7 +611,7 @@ Field.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.12
- * @version  0.1.12
+ * @version  0.2.7
  *
  * @param    {Object}   options
  */
@@ -632,6 +653,7 @@ Field.setMethod(function applyOptions(options) {
 		this.field_title = options.title;
 	}
 
+	this.applied_options = options;
 });
 
 /**
@@ -824,10 +846,14 @@ Field.setMethod(async function loadData(config, element) {
 
 	if (field) {
 
+		console.log('Loading data...', config, element);
+
 		let result;
 
 		if (typeof field.loadData == 'function') {
 
+			console.log(' -- Using loadData of', field);
+
 			try {
 				result = await field.loadData(config, element);
 			} catch (err) {
@@ -840,17 +866,22 @@ Field.setMethod(async function loadData(config, element) {
 			}
 		}
 
+		let model = field.parent_schema?.model_name,
+		    assoc_model = field.options?.model_name || field.options?.modelName;
+
 		let resource_options = {
 			name  : 'FormApi#related',
 			post  : true,
 			body  : {
 				field        : field.name,
-				model        : field.parent_schema.model_name,
-				assoc_model  : field.options.modelName,
+				model        : model,
+				assoc_model  : assoc_model,
 				config       : config,
 			}
 		};
 
+		console.log('Resource options:', resource_options)
+
 		if (this.data_src) {
 			resource_options.name = this.data_src;
 		}

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);
+});