alchemy-form 0.3.0-alpha.3 → 0.3.0-alpha.5

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.3.0-alpha.5 (2025-07-10)
+
+* Add `al-datetime-input` to properly handle Date values with timezones
+
+## 0.3.0-alpha.4 (2025-07-10)
+
+* Always make `al-field`'s `getFieldType()` method return a string
+* Add the `mixed` field view
+* Just clear the al-table when an falsy fieldset is assigned
+* Explicitly pass on the `self` value in alchemy_select_item
+* Add more info to enum badges
+* Improve array-field buttons
+
 ## 0.3.0-alpha.3 (2024-08-04)
 
 * Add `original_value_container` property to `<al-field>` elements, for when they're not inside a `<al-form>` element but still need the original container

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

@@ -0,0 +1,6 @@
+al-datetime-input {
+	> * {
+		width: 100%;
+		height: 100%;
+	}
+}

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

@@ -5,13 +5,20 @@ al-field-array {
 al-field-array-entry {
 	display: flex;
 
-	> .button {
+	> .button-remove-wrapper {
 		display: flex;
 		align-content: center;
-		padding-left: 0.5rem;
+		padding-left: 0.75rem;
+
+		> .remove {
+			height: 100%;
+			display: flex;
+			flex-flow: column;
+			gap: 0.5em;
+		}
 	}
 
-	.button .remove > * {
+	.button-remove-wrapper .remove > * {
 		writing-mode: vertical-rl;
 	}
 }

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

@@ -2,18 +2,38 @@
 @use "styleboost/inputs";
 
 @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: scroll;
+			overflow-x: auto;
 			scrollbar-width: thin;
 		}
 
 		table {
 			@extend .table;
 			width: 100%;
+			border: none;
+			border-radius: 0;
 		}
 
 		&.table-hover {
@@ -29,27 +49,59 @@
 		}
 
 		&.table-bordered {
-			// Custom bordering
+			table {
+				@extend .table-bordered;
+			}
 		}
 
 		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;
+			}
 		}
 
-		th input {
-			width: 100%;
-			height: 2rem;
+		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"] {
@@ -57,7 +109,10 @@
 		}
 
 		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;

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

@@ -17,4 +17,4 @@
 @use "_virtual_scroll.scss";
 @use "_settings_editor.scss";
 @use "_enum_badge.scss";
-@use "_dropdown.scss";
+@use "_datetime.scss";

package/element/al_datetime_input.js

@@ -0,0 +1,127 @@
+/**
+ * The al-datetime-input:
+ * Populate an input on the browser-side with correct timezone info
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+const DatetimeInput = Function.inherits('Alchemy.Element.Form.Base', 'DatetimeInput');
+
+/**
+ * Get/set the mode
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DatetimeInput.setAttribute('datemode', null, function setMode(datemode) {
+	this.populateInputWithValue(this.value, datemode);
+	return datemode;
+});
+
+/**
+ * Get/set the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DatetimeInput.setAttribute('value', null, function setValue(value) {
+	return this.populateInputWithValue(value, this.datemode);
+});
+
+/**
+ * Set the value with a function call
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DatetimeInput.setMethod(function setValue(value) {
+	this.value = value;
+});
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @return   {Object[]}
+ */
+DatetimeInput.setMethod(function populateInput() {
+	return this.populateInputWithValue(this.value, this.datemode);
+});
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @return   {Object[]}
+ */
+DatetimeInput.setMethod(function populateInputWithValue(value, datemode) {
+
+	let iso_date,
+	    date;
+
+	if (value) {
+		date = Date.create(value);
+		iso_date = date.toISOString();
+	} else {
+		iso_date = '';
+	}
+
+	value = iso_date;
+
+	if (Blast.isServer) {
+		return value;
+	}
+
+	if (arguments.length == 1) {
+		datemode = this.datemode;
+	}
+
+	let input = this.querySelector('input');
+
+	if (!datemode) {
+		datemode = 'datetime';
+	}
+
+	if (!input) {
+		input = this.createElement('input');
+		input.setAttribute('type', datemode + '-local');
+	}
+
+	if (!value) {
+		input.value = '';
+		return '';
+	}
+
+	let formatted;
+
+	if (datemode == 'date') {
+		formatted = date.format('Y-m-d');
+	} else {
+		formatted = date.format('Y-m-d\\TH:i:s');
+	}
+
+	input.value = formatted;
+
+	return iso_date;
+});
+
+/**
+ * Added to the DOM
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DatetimeInput.setMethod(function introduced() {
+	this.populateInput();
+});

package/element/al_field.js

@@ -880,7 +880,7 @@ Field.setMethod(function getFieldType() {
 		}
 	}
 
-	return result;
+	return result || '';
 });
 
 /**

package/element/al_table.js

@@ -932,6 +932,10 @@ Table.setMethod(function onFieldsetAssignment(value, old_value) {
 
 	this.clearAll();
 
+	if (!value) {
+		return;
+	}
+
 	if (!(value instanceof Classes.Alchemy.Criteria.FieldSet)) {
 		if (Array.isArray(value)) {
 			value = Classes.Alchemy.Criteria.FieldSet.fromArray(value);

package/element/al_virtual_scroll.js

@@ -281,7 +281,8 @@ VirtualScroll.setMethod(function ensureTriggerElements() {
 			}
 		}
 	}, {
-		threshold: 0,
+		threshold: 0.1,
+		root: this,
 		rootMargin: '50px 0px 50px 0px',
 	});
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.3.0-alpha.3",
+	"version": "0.3.0-alpha.5",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"

package/view/form/elements/alchemy_field_array.hwk

@@ -13,7 +13,8 @@
 		}
 	%>
 {% else %}
-	<button class="add-entry">
+	<button class="button add-entry">
+		<al-icon icon-name="plus"></al-icon>
 		{%t "add-entry" name=alchemy_field.field_name title=alchemy_field.field_title %}
 	</button>
 {% /if %}

package/view/form/elements/alchemy_field_array_entry.hwk

@@ -14,8 +14,9 @@
 {% if self.alchemy_field_array.max_entry_count eq 1 %}
 
 {% else %}
-	<div class="button">
-		<button class="remove">
+	<div class="button-remove-wrapper">
+		<button class="button remove">
+			<al-icon icon-name="trash"></al-icon>
 			{%t "remove-entry" name=alchemy_field.field_name title=alchemy_field.field_title %}
 		</button>
 	</div>

package/view/form/elements/alchemy_select_item.hwk

@@ -1,5 +1,5 @@
 {% if self.custom_template %}
-	{% include self.custom_template %}
+	{% include self.custom_template self=self %}
 {% else %}
 	{{ self.display_title }}
 {% /if %}

package/view/form/inputs/edit/date.hwk

@@ -1,13 +1,13 @@
-<%
-if (value) {
-	value = value.format('Y-m-d');
-}
-%>
-<input
-	value=<% value %>
-	class="alchemy-field-value"
-	type="date"
-	form=<% form_id %>
-	name=<% path %>
-	pattern="\d{4}-\d{2}-\d{2}"
->
+<al-datetime-input
+	datemode="date"
+>
+	<% $0.setValue(value) %>
+	<input
+		value=<% value %>
+		class="alchemy-field-value"
+		type="date"
+		form=<% form_id %>
+		name=<% path %>
+		pattern="\d{4}-\d{2}-\d{2}"
+	>
+</al-datetime-input>

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

@@ -1,20 +1,13 @@
-<%
-
-if (value) {
-
-	// Make sure it's a date
-	value = Date.create(value);
-
-	// According to MDN `toISOString()` should work,
-	// but neither Chrome or Firefox allow that format (it still contains timezone info)
-	value = value.format('Y-m-d\\TH:i:s');
-}
-%>
-<input
-	value=<% value %>
-	class="alchemy-field-value"
-	type="datetime-local"
-	form=<% form_id %>
-	name=<% path %>
-	pattern="\d{4}-\d{2}-\d{2} \d{1,2}:\d{1,2}(?::\d{1,2})?"
->
+<al-datetime-input
+	datemode="datetime"
+>
+	<% $0.setValue(value) %>
+	<input
+		class="alchemy-field-value"
+		type="datetime-local"
+		form=<% form_id %>
+		name=<% path %>
+		pattern="\d{4}-\d{2}-\d{2} \d{1,2}:\d{1,2}(?::\d{1,2})?"
+		value=""
+	>
+</al-datetime-input>

package/view/form/inputs/edit/mixed.hwk

@@ -0,0 +1,9 @@
+<al-code-input
+	class="alchemy-field-value"
+	form=<% form_id %>
+	name=<% path %>
+	placeholder={% alchemy_field.placeholder %}
+	language-mode="json"
+	value-is-object
+	#value={% value %}
+></al-code-input>

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

@@ -5,8 +5,8 @@
 		</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 %}
+	{% set enum_config to field_context.config.getValueConfiguration(value) %}
+	{% set display_value to enum_config.short_title OR enum_config.title OR enum_config.name OR value %}
 
 	<span class="badge alchemy-field-value alchemy-field-enum">
 		<% $0.classList.add('enum-' + value) %>
@@ -16,15 +16,19 @@
 		{% /if %}
 
 		{% if enum_config.color %}
-			<% $0.style.setProperty('--badge-bg', enum_config.color) %>
+			<% $0.style.setProperty('--color-p-badge-bg', enum_config.color) %>
 		{% /if %}
 
 		{% if enum_config.text_color %}
-			<% $0.style.setProperty('--badge-color', enum_config.text_color) %>
+			<% $0.style.setProperty('--color-p-badge-bg-text', enum_config.text_color) %>
 		{% /if %}
 
 		{% if enum_config.icon %}
-			<al-icon class="value-icon" icon-name={% enum_config.icon %}></al-icon>
+			<al-icon
+				class="value-icon"
+				icon-name={% enum_config.icon %}
+				icon-style={% enum_config.icon_tyle %}
+			></al-icon>
 		{% /if %}
 
 		<span class="alchemy-enum-display-value">{{ display_value }}</span>

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

@@ -1,93 +0,0 @@
-@use "styleboost";
-@use "styleboost/inputs";
-@use "styleboost/utilities/properties";
-
-@layer defaults {
-
-	:root {
-		--size-c-dropdown-border: 0px;
-		--style-c-dropdown-border: solid;
-		--size-c-dropdown-border-radius: 4px;
-		--color-c-dropdown-bg: white;
-	}
-
-	al-dropdown {
-		// Only extend the input defaults (custom properties),
-		// that way we don't inherit the actual applied values to padding etc
-		@extend .input-defaults;
-
-		--color-p-dropdown-bg: #{properties.backgroundColor('dropdown')};
-
-		--color-p-dropdown-active-item-bg: var(--color-p-input-accent);
-		--color-p-dropdown-active-item-bg-text: var(--color-p-input-accent-text);
-
-		--color-p-dropdown-selected-item-bg: var(--color-p-input-accent);
-		--color-p-dropdown-selected-item-bg-text: var(--color-p-input-accent-text);
-
-		--size-p-dropdown-border-radius: var(--size-c-dropdown-border-radius);
-
-		display: block;
-		position: relative;
-
-		.dropdown-trigger-wrapper > button {
-			@extend .button;
-		}
-
-		.dropdown-items-wrapper {
-			position: fixed;
-			box-shadow: 0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #ffffff80;
-			border-radius: var(--size-p-dropdown-border-radius);
-			background-color: var(--color-p-dropdown-bg);
-
-			[slot="dropdown-items"] {
-				// display: flex;
-				// flex-flow: column;
-				display: grid;
-				grid-template-columns: max-content 1fr;
-				grid-auto-rows: auto;
-				grid-template-areas: "icons titles";
-				gap: 0px 1rem;
-
-				al-dropdown-item {
-					display: grid;
-					grid-template-columns: subgrid;
-					grid-template-rows: subgrid;
-					grid-column: span 2;
-
-					al-icon {
-						grid-area: icons;
-						justify-content: center;
-						align-items: center;
-					}
-
-					.text {
-						grid-area: title;
-					}
-				}
-			}
-		}
-
-		al-dropdown-item {
-			margin: 0 8px;
-			padding: 8px;
-
-			&:hover,
-			&.focused {
-				background-color: var(--color-p-dropdown-active-item-bg);
-				color: var(--color-p-dropdown-active-item-bg-text);
-			}
-
-			&:first-child {
-				margin-top: 8px;
-			}
-
-			&:last-child {
-				margin-bottom: 8px;
-			}
-		}
-	}
-
-	al-dropdown-item {
-		cursor: pointer;
-	}
-}

package/element/al_dropdown.js

@@ -1,123 +0,0 @@
-/**
- * The <al-dropdown> element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-const Dropdown = Function.inherits('Alchemy.Element.Form.Base', 'Dropdown');
-
-/**
- * The template code
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-Dropdown.setTemplateFile('form/elements/al_dropdown');
-
-/**
- * Is this dropdown open?
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-Dropdown.defineStateVariable('is_open', {
-	type      : 'boolean',
-	default   : false,
-	on_change : function(editor) {
-		this.refreshDropdownPosition();
-	},
-});
-
-/**
- * The dropdown wrapper element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-Dropdown.defineStateVariable('items_wrapper', {
-	type    : 'element',
-	default : null,
-});
-
-/**
- * The last chosen item
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-Dropdown.defineStateVariable('last_chosen_item');
-
-/**
- * The "selected" item, if any.
- * (This requires custom logic to be set)
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-Dropdown.defineStateVariable('selected_item');
-
-/**
- * Toggle the dropdown state
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-Dropdown.setMethod(function toggleDropdown() {
-	let is_open = this.getStateOptional('is_open');
-	is_open.value = !is_open.value;
-});
-
-/**
- * Refresh the dropdown position
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-Dropdown.setMethod(function refreshDropdownPosition() {
-
-	let is_open = this.getStateOptional('is_open');
-
-	if (!is_open.value) {
-		return;
-	}
-
-	let items_wrapper = this.getState('items_wrapper');
-
-	if (!items_wrapper) {
-		return;
-	}
-
-	let rect = this.getBoundingClientRect();
-
-	items_wrapper.style.left = rect.left + 'px';
-	items_wrapper.style.top = rect.bottom + 'px';
-});
-
-/**
- * Added to the DOM for the first time
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-Dropdown.setMethod(function introduced() {
-
-	let last_chosen_optional = this.getStateOptional('last_chosen_item');
-
-	this.addEventListener('click', e => {
-
-		let item = e.target.closest('al-dropdown-item');
-
-		if (item) {
-			last_chosen_optional.value = item;
-		}
-	});
-});

package/element/al_dropdown_item.js

@@ -1,40 +0,0 @@
-/**
- * The <al-dropdown-item> element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-const DropdownItem = Function.inherits('Alchemy.Element.Form.Base', 'DropdownItem');
-
-/**
- * This has the button role
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-DropdownItem.setRole('button');
-
-/**
- * Is this item selected somehow?
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.3.0
- * @version  0.3.0
- */
-DropdownItem.defineStateVariable('is_selected', {
-	type      : 'boolean',
-	default   : false,
-	on_change : function onSelectedChange(value) {
-		console.log('On change:', value);
-		if (value) {
-			let dropdown = this.closest('al-dropdown');
-
-			if (dropdown) {
-				let selected_item = dropdown.getStateOptional('selected_item');
-				selected_item.value = this;
-			}
-		}
-	}
-});

package/view/form/elements/al_dropdown.hwk

@@ -1,21 +0,0 @@
-<div class="dropdown-trigger-wrapper">
-	<button
-		type="button"
-		:ref={% button_ref %}
-		prop:disabled={% state:disabled{:} %}
-		on:click={% self.toggleDropdown() %}
-	>
-		<slot name="dropdown-trigger"></slot>
-		<slot name="dropdown-trigger-icon" aria-hidden="true">
-			<al-icon icon-name="chevron-down"></al-icon>
-		</slot>
-	</button>
-</div>
-
-<div
-	:ref={% state:items_wrapper %}
-	class="dropdown-items-wrapper"
-	prop:hidden={% not state:is_open{:} %}
->
-	<slot name="dropdown-items"></slot>
-</div>