alchemy-form 0.2.10 → 0.3.0-alpha.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.3.0-alpha.2 (2024-02-25)
+
+* Added `.alchemy-badge` class
+* Use badges & microcopy for showing in-line empty values
+* Also set the `al-field`'s model attribute inside `al-table` elements
+* Depend on the `alchemy-styleboost` peer dependency
+* Let enum values use automatic styleboost colors in indexes + show correct titles
+
+## 0.3.0-alpha.1 (2024-02-15)
+
+* Upgrade to Alchemy v1.4.0
+* Add edit template for the `Object` field type
+* Add settings editor element
+* Make `readonly` attribute work on `al-field` and `al-form` elements
+* Use "alchemy-field-title" and "alchemy-field-description" microcopy in `al-field` labels
+
 ## 0.2.10 (2024-01-15)
 
 * Fix `al-table` throwing an error when receiving null data

package/assets/stylesheets/form/alchemy_form.scss

@@ -1,2 +1 @@
-@import "./general/index.scss";
-@import "./elements/index.scss";
+@use "elements";

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

@@ -0,0 +1,41 @@
+@use "styleboost";
+
+:root {
+	--badge-font-size: 0.9rem;
+	--badge-font-weight: 400;
+	--badge-line-height: 1;
+	--badge-border-radius: 5px;
+	--badge-padding: 4px 8px;
+	--badge-white-space: nowrap;
+	--badge-user-select: none;
+	--badge-gap: 5px;
+}
+
+.alchemy-badge {
+	display: inline-flex;
+	text-align: center;
+
+	gap: var(--badge-gap);
+	user-select: var(--badge-user-select);
+	padding: var(--badge-padding);
+	font-size: var(--badge-font-size);
+	font-weight: var(--badge-font-weight);
+	line-height: var(--badge-line-height);
+	border-radius: var(--badge-border-radius);
+	color: var(--badge-color, var(--color-theme-fill-text));
+	background-color: var(--badge-bg, var(--color-theme-fill));
+	white-space: var(--badge-white-space);
+}
+
+$counter: 0;
+
+// Iterate over all the available colors and create a badge color set for each
+// We do this without the badge class to lower specificity
+@each $color, $value in styleboost.$colors {
+	$counter: $counter + 1;
+
+	[data-badge-color-set="#{$counter}"] {
+		--badge-color: var(--color-shade-#{$counter});
+		--badge-bg: var(--color-tint-#{$counter});
+	}
+}

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

@@ -1,33 +1,10 @@
-:root {
-	--al-button-font-size: 1em;
-	--al-button-font-weight: 400;
-	--al-button-bg-color: rgb(89, 105, 225);
-	--al-button-bg-color-hover: rgb(105, 118, 218);
-	--al-button-text-color: white;
-}
+@use "styleboost";
 
 al-button {
-	display: inline-block;
-	font-size: var(--al-button-font-size);
-	font-weight: var(--al-button-font-weight);
-	background-color: var(--al-button-bg-color);
-	color: var(--al-button-text-color);
-	cursor: pointer;
-	user-select: none;
+	@extend .default-button;
 
+	display: inline-block;
 	position: relative;
-	padding: 0.5em 1em;
-	text-align: center;
-	text-decoration: none;
-	vertical-align: bottom;
-	transition: 0.1s;
-	overflow: hidden;
-	line-height: 1.5;
-
-	al-icon,
-	.icon {
-		line-height: 1 !important;
-	}
 
 	.apb-content {
 		display: flex;
@@ -42,11 +19,7 @@ al-button {
 
 	&[disabled] {
 		pointer-events: none;
-		filter: saturate(0.5);
+		filter: unquote("saturate(0.5)");
 		cursor: not-allowed;
 	}
-
-	&:hover {
-		background-color: var(--al-button-bg-color-hover);
-	}
 }

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

@@ -1,6 +1,5 @@
 al-code-input {
 	display: inline-block;
-	height: 30rem;
 	width: 100%;
 	position: relative;
 

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

@@ -1,3 +1,5 @@
+@use "form/general" as *;
+
 .textareabox,
 .inputbox {
 	$inputbox: &;

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

@@ -1,5 +1,8 @@
+@use "styleboost" as *;
+
 al-field {
 	display: block;
+	--badge-font-size: 1rem;
 
 	&[field-type="boolean"] {
 		
@@ -8,29 +11,32 @@ al-field {
 			justify-content: flex-start;
 		}
 
-		.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;
+		.boolean-true {
+			@extend .use-truthy-theme;
+		}
+
+		.boolean-false {
+			@extend .use-falsy-theme;
+		}
+
+		.value-icon {
+			margin-right: 0.5rem;
 		}
 	}
+
+	.alchemy-field-empty-value-placeholder {
+		--color-theme-fill: var(--color-inactive-bg);
+		--color-theme-fill-text: var(--color-inactive-bg-text);
+		font-style: italic;
+	}
+}
+
+al-form[readonly] al-field,
+al-field[readonly] {
+	pointer-events: none;
+
+	.alchemy-field-value {
+		opacity: 0.8;
+		filter: brightness(0.95);
+	}
 }

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

@@ -1,12 +1,17 @@
+@use "styleboost";
+
 al-form {
 	.error-area:empty {
 		display: none;
 	}
 
 	.error-area:not(:empty) {
-		border: 1px solid #a80000;
-		color: #a80000;
+		@extend .use-danger-theme;
+		border: 1px solid var(--color-theme-accent);
+		color: var(--color-theme-bg-text);
+		background-color: var(--color-theme-bg);
 		padding: 0.2rem;
+		border-radius: 4px;
 	}
 }
 

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

@@ -0,0 +1,62 @@
+al-settings-editor {
+	display: grid;
+	grid-template-columns: minmax(200px, 1.5fr) minmax(25vw, 9fr);
+
+	.al-settings-group {
+		padding-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.al-settings-setting-header {
+		margin-bottom: 0.5rem;
+	}
+
+	.al-settings-group-title {
+		font-weight: bold;
+		font-size: 1.6rem;
+	}
+
+	.al-settings-group-header {
+		padding: 0.2rem 1rem 0.5rem;
+	}
+
+	.al-settings-actions,
+	.al-settings-setting {
+		padding: 0.2rem 1rem 1.5rem;
+	}
+
+	.al-settings-actions {
+		margin-top: 2rem;
+	}
+
+	.al-settings-setting-title {
+		font-weight: bold;
+	}
+
+	.al-settings-setting-description micro-copy:not(:empty) {
+		display: block;
+		margin-top: 0.3rem;
+	}
+
+	.al-settings-sidebar {
+		border-right: 1px solid #ebebeb;
+		margin-right: 1.5rem;
+
+		a {
+			text-decoration: none;
+			color: inherit;
+		}
+	}
+
+	al-field {
+		.field,
+		.field input {
+			width: 100%;
+		}
+	}
+
+	al-toc {
+		position: sticky;
+		top: 1rem;
+	}
+}

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

@@ -2,12 +2,9 @@ al-table {
 	display: flex;
 	flex-flow: column;
 	border: 1px solid #dadee0;
-	font-family: sans-serif;
 	background-color: white;
-	color: #313131;
 
 	table {
-		border-collapse: collapse;
 		width: 100%;
 		color: inherit;
 	}
@@ -34,6 +31,14 @@ al-table {
 				color: inherit;
 			}
 		}
+
+		th input {
+			width: 100%;
+			padding: 0px 12px;
+			border: 1px solid var(--color-input-border);
+			color: var(--text-color);
+			height: 2rem;
+		}
 	}
 
 	td, th {
@@ -42,6 +47,10 @@ al-table {
 		cursor: default;
 	}
 
+	td al-field[field-type="fixed_decimal"] {
+		text-align: right;
+	}
+
 	tr:last-of-type {
 		td, th {
 			border-bottom: 0;

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

@@ -1,17 +1,19 @@
-@import "_button.scss";
-@import "_code_input.scss";
-@import "_feedback_input.scss";
-@import "_field.scss";
-@import "_field_array.scss";
-@import "_field_translatable.scss";
-@import "_form.scss";
-@import "_pager.scss";
-@import "_query_builder.scss";
-@import "_select.scss";
-@import "_state.scss";
-@import "_table.scss";
-@import "_toggle.scss";
-@import "_tabs.scss";
-@import "_pathway.scss";
-@import "_apex_charts.scss";
-@import "_virtual_scroll.scss";
+@use "_badge.scss";
+@use "_button.scss";
+@use "_code_input.scss";
+@use "_feedback_input.scss";
+@use "_field.scss";
+@use "_field_array.scss";
+@use "_field_translatable.scss";
+@use "_form.scss";
+@use "_pager.scss";
+@use "_query_builder.scss";
+@use "_select.scss";
+@use "_state.scss";
+@use "_table.scss";
+@use "_toggle.scss";
+@use "_tabs.scss";
+@use "_pathway.scss";
+@use "_apex_charts.scss";
+@use "_virtual_scroll.scss";
+@use "_settings_editor.scss";

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

@@ -1,2 +1,2 @@
-@import "_textsizes.scss";
-@import "_colors.scss";
+@forward "_textsizes.scss";
+@forward "_colors.scss";

package/config/routes.js

@@ -1,4 +1,4 @@
-Router.add({
+Plugin.addRoute({
 	name       : 'FormApi#related',
 	methods    : 'post',
 	paths      : '/api/form/data/related',
@@ -7,7 +7,7 @@ Router.add({
 	is_system_route : true,
 });
 
-Router.add({
+Plugin.addRoute({
 	name       : 'FormApi#queryBuilderData',
 	methods    : 'post',
 	paths      : '/api/form/data/qbdata',
@@ -16,7 +16,7 @@ Router.add({
 	is_system_route : true,
 });
 
-Router.add({
+Plugin.addRoute({
 	name            : 'FormApi#recompute',
 	methods         : 'post',
 	paths           : '/api/form/data/recompute/{model_name}/{field}',

package/controller/form_api_controller.js

@@ -17,7 +17,7 @@ const FormApi = Function.inherits('Alchemy.Controller', 'FormApi');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.9
+ * @version  0.3.0
  *
  * @param    {Conduit}   conduit
  */
@@ -32,9 +32,7 @@ FormApi.setAction(async function related(conduit) {
 	crit.setOption('scenario', 'related_data');
 
 	if (body.constraints) {
-		for (let key in body.constraints) {
-			crit.where(key).equals(body.constraints[key]);
-		}
+		crit.applyConditions(body.constraints);
 	}
 
 	if (config.value) {

package/element/00_form_base.js

@@ -102,6 +102,27 @@ Base.setAttribute('purpose', function getPurpose(value) {
  */
 Base.setAttribute('mode');
 
+/**
+ * The zone determines where the form/field is being used.
+ * For example: admin, frontend, chimera, invoice, ...
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Base.setAttribute('zone', function getZone(value) {
+
+	if (value) {
+		return value;
+	}
+
+	if (!value && this.alchemy_form) {
+		value = this.alchemy_form.zone;
+	}
+
+	return value;
+});
+
 /**
  * The view-type determines which type of wrapper/field to use,
  * e.g.: view, list, edit, ...

package/element/10_dataprovider.js

@@ -254,7 +254,7 @@ WithDataprovider.setMethod(function loadRemoteData(fetch_config) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.3.0
  *
  * @param    {Object}   config
  *
@@ -265,7 +265,7 @@ WithDataprovider.setMethod(function fetchRemoteData(config) {
 	let pledge;
 
 	if (this.dataprovider) {
-		pledge = Pledge.cast(this.dataprovider.loadData(config, this));
+		pledge = Pledge.Swift.cast(this.dataprovider.loadData(config, this));
 	} else {
 
 		let method = (this.method || 'get').toLowerCase();

package/element/al_code_input.js

@@ -43,6 +43,15 @@ CodeInput.setAttribute('language-mode');
  */
 CodeInput.setAttribute('color-theme');
 
+/**
+ * Is the value an object?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+CodeInput.setAttribute('value-is-object', {type: 'boolean'});
+
 /**
  * The minimum number of lines to show (height)
  *
@@ -66,25 +75,43 @@ CodeInput.setAttribute('max-lines', {type: 'number'});
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.5
+ * @version  0.3.0
  */
-CodeInput.setProperty(function value(value) {
+CodeInput.setProperty(function value() {
+
+	let result;
 
 	if (this._editor) {
-		return this._editor.getValue();
+		result = this._editor.getValue();
+	} else {
+		let editor_el = this.querySelector('.code-editor');
+
+		if (editor_el) {
+			result = editor_el.textContent;
+		} else {
+			if (this.assigned_data.value) {
+				return this.assigned_data.value;
+			}
+
+			return;
+		}
 	}
 
-	let editor_el = this.querySelector('.code-editor');
-
-	if (editor_el) {
-		return editor_el.textContent;
+	if (result && this.value_is_object) {
+		result = JSON.safeParse(result);
 	}
 
-	if (this.assigned_data.value) {
-		return this.assigned_data.value;
-	}
+	return result;
+
+}, function setValue(original_value) {
 
-}, function setValue(value) {
+	let value;
+
+	if (this.value_is_object) {
+		value = JSON.stringify(value, null, '\t');
+	} else {
+		value = original_value;
+	}
 
 	if (this._editor) {
 		this._editor.setValue(value);
@@ -101,7 +128,9 @@ CodeInput.setProperty(function value(value) {
 		return editor_el.textContent = value;
 	}
 
-	this.assigned_data.value = value;
+	this.assigned_data.value = original_value;
+
+	this.hawkejs_renderer.registerElementInstance(this);
 });
 
 /**
@@ -153,7 +182,14 @@ CodeInput.setMethod(async function introduced() {
 	}
 
 	if (this.assigned_data.value) {
-		editor.setValue(this.assigned_data.value, -1);
+
+		let value = this.assigned_data.value;
+
+		if (this.value_is_object) {
+			value = JSON.stringify(value, null, '\t');
+		}
+
+		editor.setValue(value, -1);
 	}
 
 	if (this.language_mode) {
@@ -164,5 +200,7 @@ CodeInput.setMethod(async function introduced() {
 		}
 	}
 
+	this.style.height = null;
+
 	this._editor = editor;
 });