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

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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

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/_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,34 +11,22 @@ 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 {
-		color: #666;
+	.alchemy-field-empty-value-placeholder {
+		--color-theme-fill: var(--color-inactive-bg);
+		--color-theme-fill-text: var(--color-inactive-bg-text);
 		font-style: italic;
 	}
 }

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

@@ -2,11 +2,9 @@ al-table {
 	display: flex;
 	flex-flow: column;
 	border: 1px solid #dadee0;
-	font-family: sans-serif;
 	background-color: white;
 
 	table {
-		border-collapse: collapse;
 		width: 100%;
 		color: inherit;
 	}
@@ -33,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 {
@@ -41,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,18 +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";
-@import "_settings_editor.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/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_field.js

@@ -650,8 +650,72 @@ Field.setProperty(function value_to_render() {
 	}
 });
 
+/**
+ * Get the placeholder for empty values (if any)
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Field.setProperty(function allow_empty_value_placeholder() {
+	return !!(this.applied_options?.empty_value_placeholder ?? true);
+});
+
+/**
+ * Create the empty value placeholder text
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @return   {string|HTMLElement|Microcopy}
+ */
+Field.setMethod(function createEmptyValuePlaceholderText() {
+
+	let microcopy = this.applied_options?.empty_value_placeholder;
+
+	if (microcopy) {
+		return microcopy;
+	}
+
+	microcopy = Classes.Alchemy.Microcopy('empty-value-placeholder', {
+		field_name : this.field_name,
+		model_name : this.model,
+		field_type : this.field_type,
+		zone       : this.zone,
+		path       : this.config?.path_in_document,
+	});
+
+	return microcopy;
+});
+
+/**
+ * Get variables needed to render this
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Field.setMethod(function prepareRenderVariables() {
+
+	let value = this.value_to_render,
+	    value_is_empty = value == null || value === '' || (Array.isArray(value) ? value.length == 0 : false);
+
+	let result = {
+		alchemy_field  : this,
+		field_context  : this,
+		view_files     : this.view_files,
+		wrapper_files  : this.wrapper_files,
+		value,
+		value_is_empty,
+	};
+
+	return result;
+});
+
 /**
  * Apply options
+ * (Like options from a FieldConfig instance)
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.12

package/element/al_table.js

@@ -597,7 +597,7 @@ Table.setMethod(function showPagination() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.8
- * @version  0.2.0
+ * @version  0.3.0
  *
  * @param    {FieldConfig}   field_config   The config on how to display the field
  * @param    {Object}        container      The container where the field should be in
@@ -640,6 +640,7 @@ Table.setMethod(function getFieldConfigView(field_config, container) {
 	alchemy_field.field_name = field.name;
 	alchemy_field.config = field;
 	alchemy_field.original_value = value;
+	alchemy_field.model = field?.schema?.model_name;
 
 	return alchemy_field;
 });

package/package.json

@@ -1,14 +1,15 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.3.0-alpha.1",
+	"version": "0.3.0-alpha.2",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
 	},
 	"peerDependencies": {
 		"alchemymvc"    : ">=1.4.0||>=1.4.0-alpha",
-		"alchemy-media" : ">=0.9.0||>=0.9.0-alpha"
+		"alchemy-media" : ">=0.9.0||>=0.9.0-alpha",
+		"alchemy-styleboost": ">=0.5.0||>=0.5.0-alpha"
 	},
 	"license": "MIT",
 	"engines": {

package/view/form/elements/alchemy_field.hwk

@@ -1,16 +1,5 @@
-<% wrapper_files = self.wrapper_files %>
-<% view_files = self.view_files %>
-<%
-variables = {
-	alchemy_field : self,
-	field_context : self,
-	view_files    : view_files,
-	value         : self.value_to_render,
-}
-%>
-
 <% if (wrapper_files) { %>
-	<% include(wrapper_files, variables) %>
+	<% include(wrapper_files) %>
 <% } %>
 
 <% if (wrapper_files) start('field') %>

package/view/form/inputs/view/string.hwk

@@ -3,7 +3,7 @@
 		<% if (value || value === false) { %>
 			{{ value }}
 		<% } else { %>
-			<span class="alchemy-field-empty-value">
+			<span class="alchemy-badge alchemy-field-empty-value-placeholder">
 				{%t
 					"empty-value"
 					field=field_context.config.name

package/view/form/inputs/view_inline/boolean.hwk

@@ -1,19 +1,26 @@
-<span
-	class="alchemy-field-value boolean-wrapper"
->
-	<%
-		new_class = '';
+{% if (value_is_empty AND self.allow_empty_value_placeholder) %}
+	<span class="alchemy-field-value">
+		<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+			{{ self.createEmptyValuePlaceholderText() }}
+		</span>
+	</span>
+{% else %}
+	<span class="alchemy-badge alchemy-field-value">
+		<% $0.classList.add('boolean-' + value) %>
 
-		if (value) {
-			new_class = 'boolean-true';
-		} else if (value === false) {
-			new_class = 'boolean-false';
-		} else {
-			new_class = 'boolean-null';
-			value = 'empty';
-		}
+		{% if value %}
+			<al-icon class="value-icon" icon-name="check"></al-icon>
+		{% else %}
+			<al-icon class="value-icon" icon-name="xmark"></al-icon>
+		{% /if %}
 
-		$0.classList.add(new_class);
-	%>
-	{{ value }}
-</span>
+		{%t
+			"" + value
+			field_name=self.field_name
+			model_name=self.model
+			field_type=self.field_type
+			zone=self.zone
+			path=self.config.path_in_document
+		%}
+	</span>
+{% /if %}

package/view/form/inputs/view_inline/datetime.hwk

@@ -1,28 +1,35 @@
-<%
-date_format = '';
+{% if (value_is_empty AND self.allow_empty_value_placeholder) %}
+	<span class="alchemy-field-value">
+		<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+			{{ self.createEmptyValuePlaceholderText() }}
+		</span>
+	</span>
+{% else %}
+	<%
+		date_format = '';
 
-if (alchemy_field && alchemy_field.applied_options) {
-	date_format = alchemy_field.applied_options.date_format;
-}
+		if (alchemy_field && alchemy_field.applied_options) {
+			date_format = alchemy_field.applied_options.date_format;
+		}
 
-if (!date_format || date_format == 'timeago' || date_format == 'time-ago' || date_format == 'time_ago') {
-	date_format = 'relative';
-}
+		if (!date_format || date_format == 'timeago' || date_format == 'time-ago' || date_format == 'time_ago') {
+			date_format = 'relative';
+		}
 
-if (alchemy_field?.config?.options?.time_ago) {
-	date_format = 'relative';
-}
+		if (alchemy_field?.config?.options?.time_ago) {
+			date_format = 'relative';
+		}
+	%>
 
-%>
-
-<% if (date_format == 'relative') { %>
-	<time-ago
-		class="alchemy-field-value"
-		date={% value.toISOString() %}
-	></time-ago>
-<% } else { %>
-	<time
-		class="alchemy-field-value"
-		datetime={% value.toISOString() %}
-	>{{ value.format(date_format) }}</time>
-<% } %>
+	<% if (date_format == 'relative') { %>
+		<time-ago
+			class="alchemy-field-value"
+			date={% value.toISOString() %}
+		></time-ago>
+	<% } else { %>
+		<time
+			class="alchemy-field-value"
+			datetime={% value.toISOString() %}
+		>{{ value.format(date_format) }}</time>
+	<% } %>
+{% /if %}

package/view/form/inputs/view_inline/enum.hwk

@@ -1 +1,32 @@
-<span class="alchemy-field-value alchemy-field-enum">{{ value }}</span>
+{% if (value_is_empty AND self.allow_empty_value_placeholder) %}
+	<span class="alchemy-field-value">
+		<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+			{{ self.createEmptyValuePlaceholderText() }}
+		</span>
+	</span>
+{% else %}
+	{% set enum_config to self.config.getValueConfiguration(value) %}
+	{% set display_value to OR enum_config.title OR enum_config.name OR value %}
+
+	<span class="alchemy-badge alchemy-field-value alchemy-field-enum">
+		<% $0.classList.add('enum-' + value) %>
+
+		{% if enum_config.number %}
+			<% $0.dataset.badgeColorSet = enum_config.number %>
+		{% /if %}
+
+		{% if enum_config.color %}
+			<% $0.style.setProperty('--badge-bg', enum_config.color) %>
+		{% /if %}
+
+		{% if enum_config.text_color %}
+			<% $0.style.setProperty('--badge-color', enum_config.text_color) %>
+		{% /if %}
+
+		{% if enum_config.icon %}
+			<al-icon class="value-icon" icon-name={% enum_config.icon %}></al-icon>
+		{% /if %}
+
+		<span class="alchemy-enum-display-value">{{ display_value }}</span>
+	</span>
+{% /if %}

package/view/form/inputs/view_inline/objectid.hwk

@@ -1 +1,9 @@
-<code class="alchemy-field-value">{{ value }}</code>
+{% if (value_is_empty AND self.allow_empty_value_placeholder) %}
+	<span class="alchemy-field-value">
+		<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+			{{ self.createEmptyValuePlaceholderText() }}
+		</span>
+	</span>
+{% else %}
+	<code class="alchemy-field-value">{{ value }}</code>
+{% /if %}

package/view/form/inputs/view_inline/string.hwk

@@ -1,6 +1,14 @@
 <div>
-	<span class="alchemy-field-value">{{ value }}</span>
-	{% if alchemy_field.config.options.suffix %}
-		<span class="alchemy-field-suffix">{{ alchemy_field.config.options.suffix }}</span>
+	{% if (value_is_empty AND self.allow_empty_value_placeholder) %}
+		<span class="alchemy-field-value">
+			<span class="alchemy-badge alchemy-field-empty-value-placeholder">
+				{{ self.createEmptyValuePlaceholderText() }}
+			</span>
+		</span>
+	{% else %}
+		<span class="alchemy-field-value">{{ value }}</span>
+		{% if alchemy_field.config.options.suffix %}
+			<span class="alchemy-field-suffix">{{ alchemy_field.config.options.suffix }}</span>
+		{% /if %}
 	{% /if %}
 </div>