alchemy-form 0.3.0-alpha.2 → 0.3.0-alpha.4

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

@@ -1,75 +1,191 @@
-al-table {
-	display: flex;
-	flex-flow: column;
-	border: 1px solid #dadee0;
-	background-color: white;
-
-	table {
-		width: 100%;
-		color: inherit;
-	}
+@use "styleboost";
+@use "styleboost/inputs";
 
-	thead {
-		td, th {
-			background-color: #F4F5F9;
-			padding: 1rem;
-			border-bottom: 1px solid #dadee0;
-			text-transform: uppercase;
-			font-weight: 500;
-			font-size: 0.9rem;
-
-			al-icon {
-				margin-left: 1rem;
+@layer defaults {
+	$accent: styleboost.themePropertyVar('color', 'accent', 'table');
+	$accent_rgb: styleboost.themePropertyVar('color', 'accent-rgb', 'table');
+
+	al-table {
+		// Define custom properties for al-table
+		--al-table-color-header-bg: var(--color-t-current-bg-subtle, var(--color-t-primary-bg-subtle));
+		--al-table-color-header-fg: var(--color-t-current-bg-subtle-text, var(--color-t-primary-bg-subtle-text));
+		--al-table-color-footer-bg: var(--color-t-current-bg-subtle, var(--color-t-primary-bg-subtle));
+		--al-table-color-footer-fg: var(--color-t-current-bg-subtle-text, var(--color-t-primary-bg-subtle-text));
+		--al-table-color-border: var(--color-t-current-bg-subtle, var(--color-t-primary-bg-subtle));
+		--al-table-color-selected-bg: var(--color-t-current-bg-soft, var(--color-t-primary-bg-soft));
+		--al-table-color-selected-fg: var(--color-t-current-bg-soft-text, var(--color-t-primary-bg-soft-text));
+
+		display: flex;
+		flex-flow: column;
+		border-radius: var(--size-p-table-border-radius);
+		border-width: var(--size-p-table-border);
+		border-style: var(--style-p-table-border);
+		border-color: var(--al-table-color-border);
+		background-color: var(--color-p-table-bg);
+		overflow: hidden;
+
+		.aft-content {
+			overflow-x: auto;
+			scrollbar-width: thin;
+		}
+
+		table {
+			@extend .table;
+			width: 100%;
+			border: none;
+			border-radius: 0;
+		}
+
+		&.table-hover {
+			table {
+				@extend .table-hover;
 			}
+		}
 
-			&.sortable {
-				cursor: pointer;
+		&.table-striped {
+			table {
+				@extend .table-striped;
 			}
+		}
 
-			a.sorting-anchor {
-				text-decoration: none;
-				color: inherit;
+		&.table-bordered {
+			table {
+				@extend .table-bordered;
 			}
 		}
 
-		th input {
-			width: 100%;
-			padding: 0px 12px;
-			border: 1px solid var(--color-input-border);
-			color: var(--text-color);
-			height: 2rem;
+		thead {
+			td,
+			th {
+				background-color: var(--al-table-color-header-bg);
+				color: var(--al-table-color-header-fg);
+				text-transform: uppercase;
+				font-weight: 500;
+				font-size: 0.9rem;
+				border-bottom-color: var(--al-table-color-border);
+
+				al-icon {
+					margin-left: 0.5rem;
+					vertical-align: middle;
+				}
+
+				&.sortable {
+					cursor: pointer;
+					user-select: none;
+
+					&:hover {
+						opacity: 0.8;
+					}
+				}
+
+				a.sorting-anchor {
+					text-decoration: none;
+					color: inherit;
+					display: block;
+				}
+			}
+
+			th input {
+				@extend .input-defaults;
+				width: 100%;
+				height: 2rem;
+				font-size: 0.875rem;
+				padding: 0.25rem 0.5rem;
+			}
 		}
-	}
 
-	td, th {
-		padding: 0.5rem 1rem;
-		border-bottom: 1px solid #EDEFF0;
-		cursor: default;
-	}
+		tbody {
+			tr.aft-selected {
+				td,
+				th {
+					--color-s-table-bg: var(--al-table-color-selected-bg);
+					--color-s-table-bg-text: var(--al-table-color-selected-fg);
+				}
+			}
+		}
 
-	td al-field[field-type="fixed_decimal"] {
-		text-align: right;
-	}
+		td al-field[field-type="fixed_decimal"] {
+			text-align: right;
+		}
 
-	tr:last-of-type {
-		td, th {
-			border-bottom: 0;
+		footer {
+			background-color: var(--al-table-color-footer-bg);
+			color: var(--al-table-color-footer-fg);
+			padding: 0.5rem 1rem;
+			border-top: var(--size-p-table-border-inner) var(--style-p-table-border) var(--al-table-color-border);
+
+			&:empty {
+				display: none;
+			}
 		}
 	}
 
-	tr.aft-selected {
+	old-al-table {
+		
+
+		border: 1px solid #dadee0;
+		background-color: white;
+
+		
+
+		thead {
+			td, th {
+				background-color: #F4F5F9;
+				padding: 1rem;
+				border-bottom: 1px solid #dadee0;
+				text-transform: uppercase;
+				font-weight: 500;
+				font-size: 0.9rem;
+
+				al-icon {
+					margin-left: 1rem;
+				}
+
+				&.sortable {
+					cursor: pointer;
+				}
+
+				a.sorting-anchor {
+					text-decoration: none;
+					color: inherit;
+				}
+			}
+
+			th input {
+				width: 100%;
+				padding: 0px 12px;
+				border: 1px solid var(--color-input-border);
+				color: var(--text-color);
+				height: 2rem;
+			}
+		}
+
 		td, th {
-			background-color: #edeff5;
+			padding: 0.5rem 1rem;
+			border-bottom: 1px solid #EDEFF0;
+			cursor: default;
+		}
+
+		tr:last-of-type {
+			td, th {
+				border-bottom: 0;
+			}
+		}
+
+		tr.aft-selected {
+			td, th {
+				background-color: #edeff5;
+			}
 		}
-	}
 
-	footer {
-		border-top: 1px solid #EDEFF0;
-		background-color: #F4F5F9;
-		padding: 0.5rem 1rem;
+		footer {
+			border-top: 1px solid #EDEFF0;
+			background-color: #F4F5F9;
+			padding: 0.5rem 1rem;
 
-		&:empty {
-			display: none;
+			&:empty {
+				display: none;
+			}
 		}
 	}
 }

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

@@ -1,46 +1,36 @@
-al-tab-list {
-	display: flex;
-	gap: 0.75rem;
-}
+@use "styleboost";
+
+@layer defaults {
+	al-tab-list {
+		display: flex;
+		gap: 0.75rem;
+	}
+
+	al-tab-button {
+		@extend .button;
+		z-index: 1;
 
-al-tab-button {
-	font-size: 1.1rem;
-	border: none;
-	display: table-cell;
-	text-align: center;
-	vertical-align: middle;
-	overflow: hidden;
-	cursor: pointer;
-	padding: 0.5rem 1rem;
-	border-radius: 5px 5px 0 0;
-	border: 1px solid var(--alchemy-tab-button-border, gray);
-	border-bottom: 1px solid transparent;
-	z-index: 1;
-	background: var(--alchemy-tab-button-background, white);
-	user-select: none;
+		al-icon {
+			margin-right: 0.5rem;
+		}
 
-	al-icon {
-		margin-right: 0.5rem;
+		&[active] {
+			font-weight: bold;
+			z-index: 3;
+		}
 	}
 
-	&[active] {
-		font-weight: bold;
-		z-index: 3;
-		border-bottom: 1px solid var(--alchemy-tab-panel-background, white);
+	al-tab-panel {
+		display: block;
+		position: relative;
+
+		padding: 0.7rem;
+		z-index: 2;
+		margin-top: -1px;
 	}
 }
 
 al-tab-panel {
-	display: block;
-	position: relative;
-
-	padding: 0.7rem;
-	border: 1px solid var(--alchemy-tab-panel-border, gray);
-	border-radius: 0 0 5px 5px;
-	background: var(--alchemy-tab-panel-background, white);
-	z-index: 2;
-	margin-top: -1px;
-
 	&:not([active]) {
 		display: none !important;
 	}

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

@@ -1,4 +1,3 @@
-@use "_badge.scss";
 @use "_button.scss";
 @use "_code_input.scss";
 @use "_feedback_input.scss";
@@ -17,3 +16,4 @@
 @use "_apex_charts.scss";
 @use "_virtual_scroll.scss";
 @use "_settings_editor.scss";
+@use "_enum_badge.scss";

package/config/routes.js

@@ -23,4 +23,14 @@ Plugin.addRoute({
 	policy          : 'logged_in',
 	is_system_route : true,
 	permission      : 'model.{model_name}.recompute.{field}',
+});
+
+Plugin.addRoute({
+	name       : 'FormApi#enumInfo',
+	methods    : 'get',
+	paths      : '/api/form/data/enum_info/{model_name}/{id}',
+	policy     : 'logged_in',
+	cache      : true,
+	is_system_route : true,
+	permission      : 'model.{model_name}.enum_info',
 });

package/controller/form_api_controller.js

@@ -88,6 +88,34 @@ FormApi.setAction(async function related(conduit) {
 	conduit.end(result);
 });
 
+/**
+ * The enum info action:
+ * Return information about a record for use in an enum element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @param    {Conduit}   conduit
+ */
+FormApi.setAction(async function enumInfo(conduit, model_name, id) {
+
+	const model = this.getModel(model_name);
+	let record = await model.findByPk(id);
+
+	if (!record) {
+		return conduit.notFound();
+	}
+
+	let result = {
+		title : record.getDisplayFieldValue(),
+		icon  : record.enum_icon || record.icon,
+		color : record.enum_color || record.color,
+	};
+
+	conduit.end(result);
+});
+
 /**
  * The action to recompute field values
  *

package/element/00_form_base.js

@@ -70,7 +70,7 @@ Base.setStatic(function addParentTypeGetter(name, type) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.11
- * @version  0.1.11
+ * @version  0.3.0
  */
 Base.setAttribute('purpose', function getPurpose(value) {
 
@@ -78,10 +78,11 @@ Base.setAttribute('purpose', function getPurpose(value) {
 		return value;
 	}
 
+	// If could also be in the view-type attribute
 	value = this.getAttribute('view-type');
 
-	if (!value && this.alchemy_form) {
-		value = this.alchemy_form.view_type;
+	if (!value) {
+		value = this.getParentFieldElement()?.purpose;
 	}
 
 	// Fallback to the "edit" type
@@ -98,9 +99,20 @@ Base.setAttribute('purpose', function getPurpose(value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.11
- * @version  0.1.11
+ * @version  0.3.0
  */
-Base.setAttribute('mode');
+Base.setAttribute('mode', function getMode(value) {
+
+	if (value) {
+		return value;
+	}
+
+	if (!value) {
+		value = this.getParentFieldElement()?.mode;
+	}
+
+	return value;
+});
 
 /**
  * The zone determines where the form/field is being used.
@@ -116,8 +128,8 @@ Base.setAttribute('zone', function getZone(value) {
 		return value;
 	}
 
-	if (!value && this.alchemy_form) {
-		value = this.alchemy_form.zone;
+	if (!value) {
+		value = this.getParentFieldElement()?.zone;
 	}
 
 	return value;
@@ -163,14 +175,14 @@ Base.setProperty(function view_type() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.3.0
  */
 Base.setProperty(function wrapper_type() {
 
 	var value = this.getAttribute('wrapper-type');
 
-	if (!value && this.alchemy_form) {
-		value = this.alchemy_form.wrapper_type;
+	if (!value) {
+		value = this.getParentFieldElement()?.wrapper_type;
 	}
 
 	if (value == 'false') {
@@ -198,13 +210,14 @@ Base.setProperty(function wrapper_type() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.4
- * @version  0.1.4
+ * @version  0.3.0
  */
 Base.setProperty(function field_path_in_current_schema() {
 
-	let result = [],
+	let ancestor,
+	    result = [],
 	    parent = this.getParentField(),
-		name;
+	    name;
 
 	name = this.getPathEntryName();
 
@@ -212,17 +225,28 @@ Base.setProperty(function field_path_in_current_schema() {
 		result.push(name);
 	}
 
-	while (parent && !(parent instanceof Classes.Alchemy.Element.Form.FieldSchema)) {
-		name = parent.getPathEntryName();
+	ancestor = parent;
+
+	while (ancestor && !(ancestor instanceof Classes.Alchemy.Element.Form.FieldSchema)) {
+		name = ancestor.getPathEntryName();
 
 		if (name) {
 			result.unshift(name);
 		}
 
-		parent = parent.getParentField();
+		ancestor = ancestor.getParentField();
 	}
 
-	return result.join('.');
+	let result_path = result.join('.');
+
+	// Don't allow a child field to have the same path as its parent
+	// This can happen when we use an `al-field` element that isn't
+	// part of a schema for some reason.
+	if (result.length == 1 && parent?.field_path_in_current_schema === result_path) {
+		return null;
+	}
+
+	return result_path;
 });
 
 /**
@@ -262,11 +286,24 @@ Base.setProperty(function field_path_in_record() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.3
- * @version  0.1.4
+ * @version  0.3.0
  *
  * @return   {Alchemy.Element.Form.Base}
  */
 Base.setMethod(function getParentField() {
+	return this.getParentFieldElement();
+});
+
+/**
+ * Get the parent field/field-entry element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.3.0
+ *
+ * @return   {Alchemy.Element.Form.Base}
+ */
+Base.setMethod(function getParentFieldElement() {
 
 	let parent = this.parentElement;
 
@@ -326,18 +363,20 @@ Base.setMethod(function getPathOrigin() {
 });
 
 /**
- * Resolve the given path
+ * Resolve the given path to an array
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.3
- * @version  0.1.3
+ * @version  0.3.0
  * 
- * @param    {String}   name   The name to resolve
- * @param    {String}   origin The origin to use (optional)
+ * @param    {string}   name   The name to resolve
+ * @param    {string}   origin The origin to use (optional)
  *
- * @return   {String}
+ * @return   {string[]}
  */
-Base.setMethod(function resolvePath(name, origin) {
+Base.setMethod(function resolvePathToArray(name, origin) {
+
+	name = name.split('.');
 
 	if (origin == null) {
 		origin = this.getPathOrigin();
@@ -358,7 +397,23 @@ Base.setMethod(function resolvePath(name, origin) {
 	}
 
 	origin.pop();
-	origin.push(name);
-	
-	return origin.join('.');
+	origin.push(...name);
+
+	return origin;
+});
+
+/**
+ * Resolve the given path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.3.0
+ * 
+ * @param    {String}   name   The name to resolve
+ * @param    {String}   origin The origin to use (optional)
+ *
+ * @return   {String}
+ */
+Base.setMethod(function resolvePath(name, origin) {
+	return this.resolvePathToArray(name, origin).join('.');
 });

package/element/al_button.js

@@ -61,12 +61,21 @@ Button.setAttribute('behaviour', {type: 'token_list'});
  */
 Button.setAssignedProperty('action_instance');
 
+/**
+ * The last error
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Button.setProperty('last_error', null);
+
 /**
  * Emit the activate event
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.2
+ * @version  0.3.0
  */
 Button.setMethod(function activate() {
 
@@ -105,6 +114,8 @@ Button.setMethod(function activate() {
 					let temp_state,
 					    duration;
 
+					this.last_error = err;
+
 					if (err) {
 						temp_state = 'error';
 						duration = 2500;