alchemy-form 0.1.12 → 0.2.1

package/view/form/elements/alchemy_field.hwk

@@ -15,15 +15,15 @@ variables = {
 
 <% if (wrapper_files) start('field') %>
 	<% if (self.is_translatable) { %>
-		<alchemy-field-translatable
+		<al-field-translatable
 			#field_context=<% self %>
 			#alchemy_field=<% self %>
-		></alchemy-field-translatable>
+		></al-field-translatable>
 	<% } else if (self.is_array) { %>
-		<alchemy-field-array
+		<al-field-array
 			#field_context=<% self %>
 			#alchemy_field=<% self %>
-		></alchemy-field-array>
+		></al-field-array>
 	<% } else if (view_files && view_files.length) { %>
 		<div class="field">
 			<% include(view_files, variables); %>

package/view/form/elements/alchemy_field_array.hwk

@@ -9,14 +9,14 @@
 <div class="entries">
 	{% with values as value %}
 	{% each %}
-		<alchemy-field-array-entry
+		<al-field-array-entry
 			#alchemy_field_array=<% self %>
 			#field_context=<% self %>
 			#alchemy_field=<% alchemy_field %>
 
 			#value=<% value %>
 			index=<% $index %>
-		></alchemy-field-array-entry>
+		></al-field-array-entry>
 	{% /each %}
 	{% /with %}
 </div>

package/view/form/elements/alchemy_field_schema.hwk

@@ -1,7 +1,7 @@
 {% each self.sub_fields as sub_field %}
-	<alchemy-field
+	<al-field
 		#alchemy_field_schema=<% self %>
 		#schema=<% self.schema %>
 		field-name=<% sub_field.name %>
-	></alchemy-field>
+	></al-field>
 {% /each %}

package/view/form/elements/alchemy_field_translatable.hwk

@@ -21,14 +21,14 @@
 	<% index = 0 %>
 	<% for (prefix in prefixes) { %>
 
-		<alchemy-field-translatable-entry
+		<al-field-translatable-entry
 			#alchemy_field_translatable=<% self %>
 			#field_context=<% self %>
 			#alchemy_field=<% alchemy_field %>
 
 			#value=<% values[prefix] %>
 			prefix=<% prefix %>
-		><% if (index > 0) $0.hidden = true; %></alchemy-field-translatable-entry>
+		><% if (index > 0) $0.hidden = true; %></al-field-translatable-entry>
 
 		<% index++ %>
 	<% } %>

package/view/form/elements/alchemy_field_translatable_entry.hwk

@@ -9,10 +9,10 @@
 
 <div class="field">
 	<% if (alchemy_field.is_array) { %>
-		<alchemy-field-array
+		<al-field-array
 			#field_context=<% self %>
 			#alchemy_field=<% alchemy_field %>
-		></alchemy-field-array>
+		></al-field-array>
 	<% } else { %>
 		<% include(view_files, variables) %>
 	<% } %>

package/view/form/elements/query_builder.hwk

@@ -1 +1 @@
-<alchemy-query-builder-group></alchemy-query-builder-group>
+<al-query-builder-group></al-query-builder-group>

package/view/form/elements/query_builder_entry.hwk

@@ -1,29 +1,38 @@
 <div class="qb-field-wrapper">
-	<alchemy-select
+	<small class="small-title">Field</small>
+
+	<al-select
 		class="qb-field"
 		#dataprovider={% self %}
 		value-item-template="form/select/qb_item"
 		option-item-template="form/select/qb_item"
-	></alchemy-select>
+	></al-select>
 </div>
 <div class="qb-operator-wrapper">
-	<alchemy-select
+	<small class="small-title">Operator</small>
+
+	<al-select
 		class="qb-operator"
 		#dataprovider={% self %}
 		value-item-template="form/select/qb_item"
 		option-item-template="form/select/qb_item"
-	></alchemy-select>
+	></al-select>
 </div>
 <div class="qb-value-wrapper">
-	<alchemy-select
-		class="qb-value-type"
-		#dataprovider={% self %}
-		value-item-template="form/select/qb_item"
-		option-item-template="form/select/qb_item"
-	></alchemy-select>
+	<small class="small-title">Value</small>
+
+	<div class="qb-value-nested-wrapper">
+
+		<al-select
+			class="qb-value-type"
+			#dataprovider={% self %}
+			value-item-template="form/select/qb_item"
+			option-item-template="form/select/qb_item"
+		></al-select>
 
-	<div class="qb-value-input-wrapper">
+		<div class="qb-value-input-wrapper">
 
+		</div>
 	</div>
 </div>
 <div class="qb-delete-wrapper">

package/view/form/elements/query_builder_value.hwk

@@ -1,9 +1,9 @@
-<alchemy-select
+<al-select
 	class="qb-source-type"
 	#dataprovider={% self %}
 	value-item-template="form/select/qb_item"
 	option-item-template="form/select/qb_item"
-></alchemy-select>
+></al-select>
 
 <div class="qb-value-input-wrapper">
 

package/view/form/elements/query_builder_variable.hwk

@@ -1,6 +1,6 @@
-<alchemy-select
+<al-select
 	class="qb-variable"
 	#dataprovider={% self %}
 	value-item-template="form/select/qb_item"
 	option-item-template="form/select/qb_item"
-></alchemy-select>
+></al-select>

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

@@ -1,7 +1,7 @@
-<alchemy-select
+<al-select
 	class="alchemy-field-value"
 ><%
 $0.dataprovider = alchemy_field;
 $0.name = path;
 $0.value = value;
-%></alchemy-select>
+%></al-select>

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

@@ -1,4 +1,4 @@
-<alchemy-toggle
+<al-toggle
 	class="alchemy-field-value"
 	#value=<% value %>
-></alchemy-toggle>
+></al-toggle>

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

@@ -1,7 +1,7 @@
-<alchemy-select
+<al-select
 	class="alchemy-field-value"
 ><%
 $0.values = vars.alchemy_field.config.options.values;
 $0.value = value;
 $0.name = path;
-%></alchemy-select>
+%></al-select>

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

@@ -1,8 +1,8 @@
-<alchemy-select
+<al-select
 	class="alchemy-field-value"
 	multiple
 ><%
 $0.dataprovider = alchemy_field;
 $0.value = value;
 $0.name = path;
-%></alchemy-select>
+%></al-select>

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

@@ -1,5 +1,5 @@
-<alchemy-code-input
+<al-code-input
 	class="alchemy-field-value"
 	form=<% form_id %>
 	name=<% path %>
->{{ value }}</alchemy-code-input>
+>{{ value }}</al-code-input>

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

@@ -1,5 +1,5 @@
-<alchemy-query-builder
+<al-query-builder
 	class="alchemy-field-value"
 	#value={% value %}
 	#dataprovider={% alchemy_field %}
-></alchemy-query-builder>
+></al-query-builder>

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

@@ -1,6 +1,6 @@
-<alchemy-query-builder-entry
+<al-query-builder-entry
 	class="alchemy-field-value"
 	type="assignment"
 	#value={% value %}
 	#dataprovider={% alchemy_field %}
-></alchemy-query-builder-entry>
+></al-query-builder-entry>

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

@@ -2,10 +2,10 @@
 options = alchemy_field.config.options || {};
 %>
 
-<alchemy-query-builder-value
+<al-query-builder-value
 	class="alchemy-field-value"
 	#value={% value %}
 	#dataprovider={% alchemy_field %}
 	variable-types={% options.variable_types %}
 	source-types={% options.source_types %}
-></alchemy-query-builder-value>
+></al-query-builder-value>

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

@@ -2,9 +2,9 @@
 options = alchemy_field.config.options || {};
 %>
 
-<alchemy-query-builder-variable
+<al-query-builder-variable
 	class="alchemy-field-value"
 	#value={% value %}
 	#dataprovider={% alchemy_field %}
 	variable-types={% options.variable_types %}
-></alchemy-query-builder-variable>
+></al-query-builder-variable>

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

@@ -1,4 +1,4 @@
-<alchemy-field-schema
+<al-field-schema
 	#alchemy_field=<% alchemy_field %>
 	#field_context=<% field_context %>
-></alchemy-field-schema>
+></al-field-schema>

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

@@ -1,5 +1,5 @@
-<alchemy-code-input
+<al-code-input
 	class="alchemy-field-value"
 	form=<% form_id %>
 	name=<% path %>
->{{ value }}</alchemy-code-input>
+>{{ value }}</al-code-input>

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

@@ -1,4 +1,4 @@
-<alchemy-toggle
+<al-toggle
 	class="alchemy-field-value"
 	#value=<% value %>
-></alchemy-toggle>
+></al-toggle>

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

@@ -1 +1,6 @@
-<span class="alchemy-field-value">{{ value }}</span>
+<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 %}
+</div>

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

@@ -1,4 +1,8 @@
-<time
-	class="alchemy-field-value"
-	datetime={% value.toISOString() %}
->{{ value.format('Y‑m‑d H:i') }}</time>
+{% if alchemy_field.config.options.time_ago %}
+	<time-ago date={% value %}></time-ago>
+{% else %}
+	<time
+		class="alchemy-field-value"
+		datetime={% value.toISOString() %}
+	>{{ value.format('Y‑m‑d H:i') }}</time>
+{% /if %}

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

@@ -1 +1,6 @@
-<span class="alchemy-field-value">{{ value }}</span>
+<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 %}
+</div>

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

@@ -1,5 +1,5 @@
 <div class="form-field-info">
-	<alchemy-label>
+	<al-label>
 		<span
 			data-he-name="field-title"
 			data-he-slot="field-title"
@@ -8,7 +8,7 @@
 			data-he-name="field-description"
 			data-he-slot="field-description"
 		><%= alchemy_field.field_description %></small>
-	</alchemy-label>
+	</al-label>
 </div>
 <div data-he-name="field"></div>
 <div class="validation-feedback">

package/helper/widgets/alchemy_field_widget.js

@@ -1,112 +0,0 @@
-/**
- * The Field Widget class
- *
- * @constructor
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- *
- * @param    {Object}   data
- */
-const AlchemyField = Function.inherits('Alchemy.Widget', 'AlchemyField');
-
-/**
- * Prepare the schema
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.12
- */
-AlchemyField.constitute(function prepareSchema() {
-
-	this.setAddChecker(function(widget_element) {
-		return false;
-	});
-});
-
-/**
- * Find the alchemy-form parent
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.4
- * @version  0.1.4
- */
-AlchemyField.enforceProperty(function alchemy_form(new_value) {
-
-	if (!new_value && this.config && this.config.alchemy_form) {
-		new_value = this.config.alchemy_form;
-	}
-
-	if (!new_value) {
-
-		let parent = this.parent_instance;
-		
-		while (parent) {
-
-			new_value = parent.alchemy_form;
-
-			if (new_value) {
-				break;
-			}
-
-			if (parent.element) {
-				new_value = parent.element.querySelector('alchemy-form');
-
-				if (new_value) {
-					break;
-				}
-			}
-			
-			parent = parent.parent_instance;
-		}
-	}
-
-	return new_value;
-});
-
-/**
- * Populate the widget
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.12
- */
-AlchemyField.setMethod(function populateWidget() {
-
-	let config = this.config;
-
-	let alchemy_form = this.alchemy_form;
-
-	let field_el = this.createElement('alchemy-field');
-
-	if (alchemy_form) {
-		field_el.alchemy_form = alchemy_form;
-	}
-
-	field_el.field_name = config.field;
-
-	field_el.applyOptions(config);
-
-	this.element.append(field_el);
-});
-
-/**
- * Get the config of this widget
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- *
- * @return   {Object}
- */
-AlchemyField.setMethod(function syncConfig() {
-
-	let config = this.config;
-
-	if (!config) {
-		config = this.config = {};
-	}
-
-	return this.config;
-});

package/helper/widgets/alchemy_form_widget.js

@@ -1,183 +0,0 @@
-/**
- * The Form Widget class
- *
- * @constructor
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- *
- * @param    {Object}   data
- */
-const AlchemyForm = Function.inherits('Alchemy.Widget', 'AlchemyForm');
-
-/**
- * Prepare the schema
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.12
- * @version  0.1.12
- */
-AlchemyForm.constitute(function prepareSchema() {
-
-	this.setAddChecker(function(widget_element) {
-		return false;
-	});
-});
-
-/**
- * Populate the widget
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.11
- */
-AlchemyForm.setMethod(function populateWidget() {
-
-	let config = this.config,
-	    form = this.createElement('alchemy-form');
-
-	let col_el = this.createElement('alchemy-widgets-column'),
-	    col = col_el.instance;
-
-	col.parent_instance = this;
-
-	form.classList.add('alchemy-widgets-container');
-
-	if (config.purpose) {
-		form.purpose = config.purpose;
-	}
-
-	if (config.mode) {
-		form.mode = config.mode;
-	}
-
-	if (this.config && this.config.widgets) {
-		let widgets = this.config.widgets.slice(0),
-		    widget,
-			i;
-		
-		for (i = 0; i < widgets.length; i++) {
-			widget = widgets[i];
-
-			if (widget.type == 'alchemy_field') {
-				widget = Object.assign({}, widget);
-				widget.config = Object.assign({}, widget.config);
-				widget.config.alchemy_form = form;
-				widgets[i] = widget;
-			}
-		}
-
-		col.widget.value = widgets;
-	}
-
-	let record = this.element.getContextVariable('record');
-
-	if (record) {
-		form.document = record;
-	}
-
-	if (config.model) {
-		form.model = config.model;
-	}
-
-	if (config.view_type) {
-		form.view_type = config.view_type;
-	}
-
-	form.append(col.widget);
-
-	this.element.append(form);
-
-	let violations = this.element.getContextVariable('form_violations');
-
-	if (violations) {
-		form.showError(violations);
-	}
-});
-
-/**
- * Get the nested column
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemyForm.setMethod(function getNestedColumn(widget) {
-
-	if (!widget) {
-		widget = this.widget;
-	}
-
-	if (!widget) {
-		return;
-	}
-
-	let col = widget.querySelector('alchemy-form > alchemy-widgets-column');
-
-	return col;
-});
-
-/**
- * Start the editor
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemyForm.setMethod(function _startEditor() {
-
-	let col = this.getNestedColumn();
-
-	if (!col) {
-		return;
-	}
-
-	col.startEditor();
-});
-
-/**
- * Stop the editor
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemyForm.setMethod(function _stopEditor() {
-
-	let col = this.getNestedColumn();
-
-	if (!col) {
-		return;
-	}
-
-	col.stopEditor();
-});
-
-/**
- * Get the config of this widget
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- *
- * @return   {Object}
- */
-AlchemyForm.setMethod(function syncConfig() {
-
-	let config = this.config;
-
-	if (!config) {
-		config = this.config = {};
-	}
-
-	let col = this.getNestedColumn();
-
-	if (col) {
-		config.widgets = col.instance.syncConfig();
-	} else {
-		config.widgets = [];
-	}
-
-	return this.config;
-});