alchemy-form 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.1.9 (2022-07-06)
+
+* Allow supplying a custom `data-src` to `alchemy-field` elements
+* Add `view` templates for File & Datetime fields
+* Use the new `alchemy.getClientModel()` method in `alchemy-field` element
+* Add `alchemy-password-input` element
+
 ## 0.1.8 (2022-06-29)
 
 * Move the `alchemy-select` pagination checker initializer to a static function

package/assets/stylesheets/form/alchemy_select.scss

@@ -39,7 +39,7 @@ alchemy-select {
 		align-items: center;
 
 		input.type-area {
-			height: 1.5rem;
+			height: 1.5rem !important;
 		}
 	}
 

package/element/alchemy_field.js

@@ -34,6 +34,15 @@ Field.setStylesheetFile('form/alchemy_field');
  */
 Field.setStatic('use_new_renderer_scope', true);
 
+/**
+ * The data source url/route to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+Field.setAttribute('data-src');
+
 /**
  * The name of the field
  *
@@ -160,7 +169,7 @@ Field.enforceProperty(function config(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.9
  */
 Field.enforceProperty(function schema(new_value, old_value) {
 
@@ -181,15 +190,10 @@ Field.enforceProperty(function schema(new_value, old_value) {
 		let model_name = this.model;
 
 		if (model_name) {
-			// @TODO: Always get the Client-side model here
-			let model = alchemy.getModel(model_name);
+			let model = alchemy.getClientModel(model_name);
 
 			if (model) {
 				new_value = model.schema;
-
-				if (Blast.isNode) {
-					new_value = JSON.clone(new_value, 'toHawkejs');
-				}
 			}
 		}
 	}
@@ -715,7 +719,7 @@ Field.setMethod(function retained() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.1.9
  *
  * @param    {Object}        config
  * @param    {HTMLElement}   element
@@ -742,7 +746,7 @@ Field.setMethod(async function loadData(config, element) {
 			}
 		}
 
-		return this.hawkejs_helpers.Alchemy.getResource({
+		let resource_options = {
 			name  : 'FormApi#related',
 			post  : true,
 			body  : {
@@ -751,7 +755,13 @@ Field.setMethod(async function loadData(config, element) {
 				assoc_model  : field.options.modelName,
 				config       : config,
 			}
-		});
+		};
+
+		if (this.data_src) {
+			resource_options.name = this.data_src;
+		}
+
+		return this.hawkejs_helpers.Alchemy.getResource(resource_options);
 	}
 
 });

package/element/alchemy_password_input.js

@@ -0,0 +1,141 @@
+/**
+ * The number-input custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+const PasswordInput = Function.inherits('Alchemy.Element.Form.StringInput', 'PasswordInput');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setTemplateFile('form/elements/password_input');
+
+/**
+ * Reference to the repeat input element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.addElementGetter('repeat_el', '.repeat-input');
+
+/**
+ * Reference to the repeat label element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.addElementGetter('repeat_label', '.repeat-input-label');
+
+/**
+ * The value property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setProperty(function value() {
+
+	let val;
+
+	if (this.input_el) {
+		val = this.input_el.value;
+	}
+
+	if (!val) {
+		return undefined;
+	}
+
+	if (!this.valuesAreEqual()) {
+		return undefined;
+	}
+
+	return val;
+});
+
+/**
+ * Are both inputs the same?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(function valuesAreEqual() {
+
+	let first_value = this.input_el?.value,
+	    repeat_value = this.repeat_el?.value;
+	
+	return first_value == repeat_value;
+});
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(async function revalidate() {
+
+	let first_value = this.input_el?.value,
+	    repeat_value = this.repeat_el.value;
+
+	if (first_value) {
+		this.repeat_label.hidden = false;
+	} else {
+		this.repeat_el.value = '';
+		this.repeat_label.hidden = true;
+	}
+
+	this.removeErrors();
+
+	if (!first_value && !repeat_value) {
+		return;
+	}
+
+	if (first_value != repeat_value) {
+		return this.addError(this.__('does-not-match'), true);
+	}
+
+	return revalidate.super.call(this);
+});
+
+/**
+ * Actions to perform when this element
+ * has been added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.9
+ * @version  0.1.9
+ */
+PasswordInput.setMethod(function introduced() {
+
+	const that = this;
+
+	introduced.super.call(this);
+
+	this.repeat_el.addEventListener('focus', function onFocus(e) {
+		that.inputbox_el.classList.add('focus');
+	});
+
+	this.repeat_el.addEventListener('blur', function onBlur(e) {
+		that.inputbox_el.classList.remove('focus');
+	});
+
+	this.repeat_el.addEventListener('keyup', Fn.throttle(function onKeyup(e) {
+		that.revalidate();
+		that.emit('changing');
+	}, {
+		minimum_wait  : 350,
+		immediate     : false,
+		reset_on_call : true
+	}));
+
+});

package/helper/widgets/alchemy_field_widget.js

@@ -73,7 +73,7 @@ AlchemyField.enforceProperty(function alchemy_form(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.4
+ * @version  0.1.9
  */
 AlchemyField.setMethod(function populateWidget() {
 
@@ -101,6 +101,10 @@ AlchemyField.setMethod(function populateWidget() {
 		field_el.widget_settings = config.widget_settings;
 	}
 
+	if (config.data_src) {
+		field_el.data_src = config.data_src;
+	}
+
 	this.element.append(field_el);
 });
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.1.8",
+	"version": "0.1.9",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
@@ -11,6 +11,6 @@
 	},
 	"license": "MIT",
 	"engines": {
-		"node" : ">=12.0.0"
+		"node" : ">=14.0.0"
 	}
 }

package/view/form/elements/password_input.hwk

@@ -0,0 +1,36 @@
+<label>
+	<div class="inputlabel">
+		<span class="label" data-he-slot="label"></span>
+		<span class="description" data-he-slot="description"></span>
+		<hr class="spacer">
+	</div>
+	<div class="inputbox">
+		<input
+			name=<% self.getAttribute('input-name') || 'name' %>
+			placeholder=<% self.getAttribute('placeholder') %>
+			minlength=<% self.getAttribute('min-length') %>
+			maxlength=<% self.getAttribute('max-length') %>
+			class="input"
+			value="<% self.getAttribute('value') || '' %>"
+			type="password"
+		>
+		<i class="icon cross"></i>
+		<i class="icon checkmark"></i>
+	</div>
+</label>
+<label class="repeat-input-label" hidden>
+	<div class="inputbox">
+		<input
+			placeholder=<% self.getAttribute('repeat-placeholder') %>
+			class="input repeat-input"
+			value="<% self.getAttribute('value') || '' %>"
+			minlength=<% self.getAttribute('min-length') %>
+			maxlength=<% self.getAttribute('max-length') %>
+			type="password"
+		>
+		<i class="icon cross"></i>
+		<i class="icon checkmark"></i>
+	</div>
+	<div class="errors"></div>
+	<div class="success"></div>
+</label>

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

@@ -0,0 +1 @@
+<% include('form/inputs/view_inline/datetime') %>

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

@@ -0,0 +1,4 @@
+<time
+	class="alchemy-field-value"
+	datetime={% value.toISOString() %}
+>{{ value.format('Y‑m‑d H:i') }}</time>

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

@@ -0,0 +1,6 @@
+{% if value %}
+	<img
+		!Media={% value %}
+		+media-route="Media::thumb"
+	>
+{% /if %}