alchemy-form 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.2.8 (2023-10-15)
+
+* Add basic `al-apex-chart` element
+* Fix `al-table` always turning `DocumentList` instances into dumb arrays
+
+## 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

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

@@ -0,0 +1,7 @@
+al-apex-chart {
+	display: flex;
+
+	> * {
+		flex: 1 0 100%;
+	}
+}

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/_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

@@ -12,4 +12,5 @@
 @import "_table.scss";
 @import "_toggle.scss";
 @import "_tabs.scss";
-@import "_pathway.scss";
+@import "_pathway.scss";
+@import "_apex_charts.scss";

package/element/al_apex_chart.js

@@ -0,0 +1,38 @@
+/**
+ * The apex-chart custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.8
+ * @version  0.2.8
+ */
+const ApexChart = Function.inherits('Alchemy.Element.Form.Base', 'ApexChart');
+
+/**
+ * The actual ApexChart config
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.8
+ * @version  0.2.8
+ */
+ApexChart.setAssignedProperty('apex_config');
+
+/**
+ * The element has been added to the dom for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.8
+ * @version  0.2.8
+ */
+ApexChart.setMethod(async function introduced() {
+
+	await hawkejs.require('https://cdn.jsdelivr.net/npm/apexcharts');
+
+	let apex_config = this.apex_config;
+
+	let timeline = this.createElement('div');
+	timeline.classList.add('apex-chart-container');
+	this.append(timeline);
+
+	let instance = new ApexCharts(timeline, apex_config);
+	instance.render();
+});

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;
 });
 
 /**
@@ -840,13 +862,16 @@ 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,
 			}
 		};

package/element/al_table.js

@@ -1121,7 +1121,7 @@ Table.setMethod(function getRemoteFetchConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.3
+ * @version  0.2.8
  */
 Table.setMethod(function applyFetchedData(err, result, config) {
 
@@ -1134,6 +1134,9 @@ Table.setMethod(function applyFetchedData(err, result, config) {
 
 	if (Array.isArray(result)) {
 		records = result;
+	} else if (result.length) {
+		// This way we keep `DocumentList` instances as they are!
+		records = result;
 	} else {
 		records = result.records;
 	}

package/helper/form_actions/00_form_action.js

@@ -24,7 +24,6 @@ FormAction.makeAbstractClass();
  */
 FormAction.startNewGroup('alchemy_form_actions');
 
-
 /**
  * Add a configuration property
  *

package/helper/pathway/leaf.js

@@ -137,18 +137,13 @@ Leaf.setMethod(async function getPage(page_nr) {
 
 	let provider = this.getProvider();
 
-	console.log('Getting page...', page_nr, 'from', provider)
-
 	if (!provider) {
 		return;
 	}
 
 	let records = await provider.getAll();
 
-	console.log('Got records:', records)
-
 	return records;
-
 });
 
 /**

package/package.json

@@ -1,14 +1,14 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.2.6",
+	"version": "0.2.8",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
 	},
 	"peerDependencies": {
 		"alchemymvc"    : ">=1.3.0",
-		"alchemy-media" : ">=0.7.2"
+		"alchemy-media" : ">=0.7.6"
 	},
 	"license": "MIT",
 	"engines": {

package/view/form/elements/alchemy_toggle.hwk

@@ -1,3 +1,5 @@
+<% self.classList.add('does-not-expand') %>
+
 <input
 	type="checkbox"
 	<% if (self.value) print('checked') %>

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

@@ -4,6 +4,8 @@
 	{% set type = "text" %}
 {% /if %}
 
+<% if (type == 'string') type = 'text'; %>
+
 <input
 	value=<% value %>
 	class="alchemy-field-value"

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

@@ -2,4 +2,4 @@
 	class="alchemy-field-value"
 	form=<% form_id %>
 	name=<% path %>
->{%= value.encodeHTML() %}</textarea>
+>{{ value }}</textarea>

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

@@ -1,4 +1 @@
-<time
-	class="alchemy-field-value"
-	datetime={% value.toISOString() %}
->{{ value.format('Y‑m‑d') }}</time>
+<% include('form/inputs/view_inline/datetime') %>

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

@@ -1,8 +1,28 @@
-{% if alchemy_field.config.options.time_ago %}
-	<time-ago date={% value %}></time-ago>
-{% else %}
+<%
+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 (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('Y‑m‑d H:i') }}</time>
-{% /if %}
+	>{{ value.format(date_format) }}</time>
+<% } %>

package/view/form/wrappers/default/default.hwk

@@ -3,11 +3,11 @@
 		<span
 			data-he-name="field-title"
 			data-he-slot="field-title"
-		><%= alchemy_field.field_title %></span>
+		>{{ alchemy_field.field_title }}</span>
 		<small
 			data-he-name="field-description"
 			data-he-slot="field-description"
-		><%= alchemy_field.field_description %></small>
+		>{{ alchemy_field.field_description }}</small>
 	</al-label>
 </div>
 <div data-he-name="field"></div>