alchemy-form 0.1.12 → 0.2.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.2.0 (2022-11-02)
+
+* Use the `al-` prefix for all custom elements instead of nothing or `alchemy-`
+* Add tab-elements & widget
+* Add abstract `WithDataprovider` class and make `al-table` and `al-select` use it
+* Allow `al-table` to reuse existing rows and prevent render flashes
+* Add `al-state` and the abstract `Stateful` class for elements with states
+* Add `al-button` element
+* Allow adding a suffix option to certain fields
+* Allow using `al-table` pager without a url
+* Move widgets to `alchemy-widgets` plugin, because that depends on `alchemy-form`
+
 ## 0.1.12 (2022-10-12)
 
 * Don't let users manually add form widgets

package/assets/stylesheets/form/alchemy_form.scss

@@ -1,16 +1,2 @@
-alchemy-form {
-	.error-area:empty {
-		display: none;
-	}
-
-	.error-area:not(:empty) {
-		border: 1px solid #a80000;
-		color: #a80000;
-		padding: 0.2rem;
-	}
-}
-
-alchemy-label {
-	display: block;
-	cursor: default;
-}
+@import "./general/index.scss";
+@import "./elements/index.scss";

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

@@ -0,0 +1,52 @@
+:root {
+	--al-button-font-size: 1em;
+	--al-button-font-weight: 400;
+	--al-button-bg-color: rgb(89, 105, 225);
+	--al-button-bg-color-hover: rgb(105, 118, 218);
+	--al-button-text-color: white;
+}
+
+al-button {
+	display: inline-block;
+	font-size: var(--al-button-font-size);
+	font-weight: var(--al-button-font-weight);
+	background-color: var(--al-button-bg-color);
+	color: var(--al-button-text-color);
+	cursor: pointer;
+	user-select: none;
+
+	position: relative;
+	padding: 0.5em 1em;
+	text-align: center;
+	text-decoration: none;
+	vertical-align: bottom;
+	transition: 0.1s;
+	overflow: hidden;
+	line-height: 1.5;
+
+	al-icon,
+	.icon {
+		line-height: 1 !important;
+	}
+
+	.apb-content {
+		display: flex;
+		gap: 0.5em;
+		height: 100%;
+
+		> * {
+			flex: auto;
+			align-self: center;
+		}
+	}
+
+	&[disabled] {
+		pointer-events: none;
+		filter: saturate(0.5);
+		cursor: not-allowed;
+	}
+
+	&:hover {
+		background-color: var(--al-button-bg-color-hover);
+	}
+}

package/assets/stylesheets/form/{alchemy_code_input.scss → elements/_code_input.scss}

@@ -1,4 +1,4 @@
-alchemy-code-input {
+al-code-input {
 	display: inline-block;
 	height: 30rem;
 	width: 100%;

package/assets/stylesheets/form/{alchemy_feedback_input.scss → elements/_feedback_input.scss}

@@ -1,5 +1,3 @@
-@import "./general/index.scss";
-
 .textareabox,
 .inputbox {
 	$inputbox: &;
@@ -43,14 +41,14 @@
 }
 
 .inputfield,
-alchemy-string-input {
+al-string-input {
 	$inputfield: &;
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	margin: 0;
 
-	& +.rest-fields > string-input:first-of-type {
+	& +.rest-fields > al-string-input:first-of-type {
 		margin-top: 3rem;
 	}
 
@@ -175,7 +173,7 @@ alchemy-string-input {
 	}
 }
 
-alchemy-string-input {
+al-string-input {
 	.inputlabel {
 		.label {
 			margin-bottom: 0 !important;
@@ -183,8 +181,8 @@ alchemy-string-input {
 	}
 }
 
-alchemy-password-input {
-	@extend alchemy-string-input;
+al-password-input {
+	@extend al-string-input;
 
 	& > label:first-of-type {
 		margin-bottom: 2rem;
@@ -253,7 +251,7 @@ alchemy-password-input {
 	}
 }
 
-alchemy-number-input {
+al-number-input {
 	$numberinput: &;
 	display: flex;
 	flex-flow: column wrap;

package/assets/stylesheets/form/{alchemy_field.scss → elements/_field.scss}

@@ -1,4 +1,4 @@
-alchemy-field {
+al-field {
 	display: block;
 
 	&[field-type="boolean"] {

package/assets/stylesheets/form/{alchemy_field_array.scss → elements/_field_array.scss}

@@ -1,8 +1,8 @@
-alchemy-field-array {
+al-field-array {
 	display: block;
 }
 
-alchemy-field-array-entry {
+al-field-array-entry {
 	display: flex;
 
 	> .button {

package/assets/stylesheets/form/{alchemy_field_translatable.scss → elements/_field_translatable.scss}

@@ -1,4 +1,4 @@
-alchemy-field-translatable {
+al-field-translatable {
 	display: block;
 	position: relative;
 

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

@@ -0,0 +1,16 @@
+al-form {
+	.error-area:empty {
+		display: none;
+	}
+
+	.error-area:not(:empty) {
+		border: 1px solid #a80000;
+		color: #a80000;
+		padding: 0.2rem;
+	}
+}
+
+al-label {
+	display: block;
+	cursor: default;
+}

package/assets/stylesheets/form/{alchemy_pager.scss → elements/_pager.scss}

@@ -1,4 +1,4 @@
-alchemy-pager {
+al-pager {
 	display: flex;
 
 	ul {

package/assets/stylesheets/form/{query_builder.scss → elements/_query_builder.scss}

@@ -12,14 +12,14 @@
 	--qb-btn-border-color: #d3d3d3;
 }
 
-alchemy-query-builder {
+al-query-builder {
 	display: block;
 	border-color: var(--qb-border-color);
 	padding: 1rem;
 	position: relative;
 }
 
-alchemy-query-builder-group {
+al-query-builder-group {
 	display: block;
 	padding: 10px;
 	padding-bottom: 6px;
@@ -85,20 +85,20 @@ alchemy-query-builder-group {
 	}
 }
 
-alchemy-query-builder-value {
+al-query-builder-value {
 	min-width: 10rem;
 }
 
-alchemy-query-builder-entry {
+al-query-builder-entry {
 	min-width: 40rem;
 }
 
-alchemy-query-builder-value,
-alchemy-query-builder-entry {
+al-query-builder-value,
+al-query-builder-entry {
 	display: flex;
 	gap: 0.7rem;
 
-	alchemy-select {
+	al-select {
 		min-width: 11rem;
 	}
 

package/assets/stylesheets/form/{alchemy_select.scss → elements/_select.scss}

@@ -1,4 +1,4 @@
-alchemy-select {
+al-select {
 	box-sizing: border-box;
 	position: relative;
 	display: block;
@@ -195,7 +195,7 @@ alchemy-select {
 	}
 
 	&[multiple] .value-wrapper {
-		alchemy-select-item {
+		al-select-item {
 			display: inline-block;
 
 			text-shadow: 0 1px 0 rgba(0,51,83,0.3);

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

@@ -0,0 +1,8 @@
+al-state {
+	display: block;
+
+	// Inactive states should always be hidden
+	&:not([active]) {
+		display: none !important;
+	}
+}

package/assets/stylesheets/form/{alchemy_table.scss → elements/_table.scss}

@@ -1,4 +1,4 @@
-alchemy-table {
+al-table {
 	display: flex;
 	flex-flow: column;
 	border: 1px solid #dadee0;
@@ -21,7 +21,7 @@ alchemy-table {
 			font-weight: 500;
 			font-size: 0.9rem;
 
-			al-ico {
+			al-icon {
 				margin-left: 1rem;
 			}
 

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

@@ -0,0 +1,47 @@
+al-tab-list {
+	display: flex;
+	gap: 0.75rem;
+}
+
+al-tab-button {
+	font-size: 1.1rem;
+	border: none;
+	display: table-cell;
+	text-align: center;
+	vertical-align: middle;
+	overflow: hidden;
+	cursor: pointer;
+	padding: 0.5rem 1rem;
+	border-radius: 5px 5px 0 0;
+	border: 1px solid var(--alchemy-tab-button-border, gray);
+	border-bottom: 1px solid transparent;
+	z-index: 1;
+	background: var(--alchemy-tab-button-background, white);
+	user-select: none;
+
+	al-icon {
+		margin-right: 0.5rem;
+	}
+
+	&[active] {
+		font-weight: bold;
+		z-index: 3;
+		border-bottom: 1px solid var(--alchemy-tab-panel-background, white);
+	}
+}
+
+al-tab-panel {
+	display: block;
+	position: relative;
+
+	padding: 0.7rem;
+	border: 1px solid var(--alchemy-tab-panel-border, gray);
+	border-radius: 0 0 5px 5px;
+	background: var(--alchemy-tab-panel-background, white);
+	z-index: 2;
+	margin-top: -1px;
+
+	&:not([active]) {
+		display: none !important;
+	}
+}

package/assets/stylesheets/form/{alchemy_toggle.scss → elements/_toggle.scss}

@@ -1,4 +1,4 @@
-alchemy-toggle {
+al-toggle {
 	display: flex;
 	position: relative;
 	align-items: center;

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

@@ -0,0 +1,14 @@
+@import "_button.scss";
+@import "_code_input.scss";
+@import "_feedback_input.scss";
+@import "_field.scss";
+@import "_field_array.scss";
+@import "_field_translatable.scss";
+@import "_form.scss";
+@import "_pager.scss";
+@import "_query_builder.scss";
+@import "_select.scss";
+@import "_state.scss";
+@import "_table.scss";
+@import "_toggle.scss";
+@import "_tabs.scss";

package/element/00_form_base.js

@@ -1,30 +1,38 @@
 /**
- * The base class for all other alchemy-form elements
+ * The base class for all other al-form elements
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-var Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Form', 'Base');
+const Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Form', 'Base');
 
 /**
  * Set the custom element prefix
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Base.setStatic('custom_element_prefix', 'alchemy');
+Base.setStatic('custom_element_prefix', 'al');
 
 /**
- * Don't register this as a custom element,
- * but don't let child classes inherit this
+ * This is a static class (so it won't be registered)
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
+ */
+Base.makeAbstractClass();
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
  */
-Base.setStatic('is_abstract_class', true, false);
+Base.setStylesheetFile('form/alchemy_form');
 
 /**
  * Add a getter that looks for a parent of a specific type

package/element/05_feedback_input.js

@@ -14,18 +14,9 @@ var FeedbackInput = Function.inherits('Alchemy.Element.Form.Base', 'FeedbackInpu
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-FeedbackInput.setStatic('is_abstract_class', true, false);
-
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.3
- * @version  0.1.3
- */
- FeedbackInput.setStylesheetFile('form/alchemy_feedback_input');
+FeedbackInput.makeAbstractClass();
 
 /**
  * The readonly attribute
@@ -170,7 +161,7 @@ FeedbackInput.setMethod(function removeErrors() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.3
- * @version  0.1.3
+ * @version  0.2.0
  *
  * @return   {<micro-copy>|String}
  */
@@ -187,7 +178,7 @@ FeedbackInput.setMethod(function convertMessage(message, parameters) {
 			return message;
 		}
 
-		microcopy = this.createElement('micro-copy');
+		microcopy = this.createElement('al-microcopy');
 		microcopy.key = message.after('microcopy:');
 
 		if (!parameters) {

package/element/10_alchemy_field_custom.js

@@ -1,13 +1,11 @@
 /**
- * The basis for alchemy-field-array and such element
+ * The basis for al-field-array and such element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-var FieldCustom = Function.inherits('Alchemy.Element.Form.Base', function FieldCustom() {
-	FieldCustom.super.call(this);
-});
+const FieldCustom = Function.inherits('Alchemy.Element.Form.Base', 'FieldCustom');
 
 /**
  * Don't register this as a custom element,
@@ -15,38 +13,38 @@ var FieldCustom = Function.inherits('Alchemy.Element.Form.Base', function FieldC
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-FieldCustom.setStatic('is_abstract_class', true, false);
+FieldCustom.makeAbstractClass();
 
 /**
- * Get a reference to the alchemy-field parent
+ * Get a reference to the al-field parent
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldCustom.enforceProperty(function alchemy_field(new_value, old_value) {
 
 	if (!new_value) {
-		new_value = this.queryUp('alchemy-field');
+		new_value = this.queryUp('al-field');
 	}
 
 	return new_value;
 });
 
 /**
- * Get a reference to the alchemy-field or alchemy-field-translatable parent
+ * Get a reference to the al-field or al-field-translatable parent
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldCustom.enforceProperty(function field_context(new_value, old_value) {
 
 	if (!new_value) {
-		let translatable = this.queryUp('alchemy-field-translatable-entry'),
-		    field = this.queryUp('alchemy-field');
+		let translatable = this.queryUp('al-field-translatable-entry'),
+		    field = this.queryUp('al-field');
 
 		if (translatable && translatable != this && field.contains(translatable)) {
 			new_value = translatable;
@@ -67,11 +65,11 @@ FieldCustom.enforceProperty(function field_context(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldCustom.setProperty(function is_array() {
 
-	let field = this.queryUp('alchemy-field');
+	let field = this.queryUp('al-field');
 
 	if (field) {
 		return field.is_array;