alchemy-form 0.1.12 → 0.2.0

package/helper/form_actions/00_form_action.js

@@ -226,15 +226,26 @@ FormAction.setMethod(function constructElement(renderer) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.0
  *
  * @return   {HTMLElement}
  */
 FormAction.setMethod(function _constructElement(renderer) {
 
-	let span = renderer.createElement('span');
-	span.textContent = this.title;
-	return span;
+	let button = renderer.createElement('al-button');
+	button.action_instance = this;
+
+	if (this.icon) {
+		let icon = renderer.createElement('al-icon');
+		icon.icon_name = this.icon;
+		button.append(icon);
+	}
+
+	if (this.title) {
+		button.append(this.title);
+	}
+
+	return button;
 });
 
 /**

package/helper/form_actions/url_action.js

@@ -23,7 +23,7 @@ UrlAction.addConfigProperty('url');
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.11
+ * @version  0.2.0
  *
  * @return   {HTMLElement}
  */
@@ -34,7 +34,7 @@ UrlAction.setMethod(function _constructElement(renderer) {
 	anchor.dataset.name = this.name;
 
 	if (this.icon) {
-		let alico = renderer.createElement('al-ico');
+		let alico = renderer.createElement('al-icon');
 		alico.setIcon(this.icon);
 		anchor.append(alico);
 	} else {
@@ -42,6 +42,7 @@ UrlAction.setMethod(function _constructElement(renderer) {
 	}
 
 	anchor.setAttribute('href', this.url);
+	anchor.setAttribute('title', this.title || this.name);
 	
 	return anchor;
 });

package/helper/query_builder_variable_definition/boolean_variable_definition.js

@@ -19,6 +19,6 @@ const BooleanDefinition = Function.inherits('Alchemy.QueryBuilder.VariableDefini
  * @param    {Hawkejs.Renderer}
  */
 BooleanDefinition.setMethod(function createValueInput(renderer) {
-	let toggle = renderer.createElement('alchemy-toggle');
+	let toggle = renderer.createElement('al-toggle');
 	return toggle;
 });

package/helper_field/query_builder_field.js

@@ -50,7 +50,7 @@ QueryBuilderField.setMethod(function cast(value, to_datasource) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.12
+ * @version  0.2.0
  *
  * @param    {Object}        config
  * @param    {HTMLElement}   element
@@ -70,7 +70,7 @@ QueryBuilderField.setMethod(function loadData(config, element) {
 	};
 
 	if (element) {
-		form = element.queryParents('alchemy-form');
+		form = element.queryParents('al-form');
 
 		if (add_form_value && form) {
 			body.form_value = form.value;

package/package.json

@@ -1,14 +1,14 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.1.12",
+	"version": "0.2.0",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"
 	},
 	"peerDependencies": {
 		"alchemymvc"    : ">=1.2.0",
-		"alchemy-media" : "~0.6.3"
+		"alchemy-media" : "~0.7.0"
 	},
 	"license": "MIT",
 	"engines": {

package/view/form/elements/alchemy_button.hwk

@@ -0,0 +1 @@
+<div class="apb-content"><% Hawkejs.replaceChildren($0, child_nodes) %></div>

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,26 +1,26 @@
 <div class="qb-field-wrapper">
-	<alchemy-select
+	<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
+	<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
+	<al-select
 		class="qb-value-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_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;
-});