alchemy-chimera 1.1.1 → 1.2.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 1.2.1 (2022-12-23)
+
+* Show field descriptions under the field title
+* Prevent images inside al-field widget editor from being too tall
+* Use `al-button` & `hawkejs_template` for the save button
+
+## 1.2.0 (2022-11-02)
+
+* Update to `alchemy-form` v0.2.0
+
 ## 1.1.1 (2022-10-12)
 
 * Add more alchemy-field options

package/assets/stylesheets/chimera/chimera.scss

@@ -25,6 +25,9 @@ body {
 	--color-active: #3699FF;
 	--color-text: #475466;
 	--color-input-border: #CCD7E6;
+
+	--alchemy-tab-button-border: var(--color-box-border);
+	--alchemy-tab-panel-border: var(--color-box-border);
 }
 
 .chimera-wrapper {
@@ -63,7 +66,7 @@ body {
 		//filter: brightness(1.05);
 	}
 
-	al-ico {
+	al-icon {
 		margin-right: 4px;
 	}
 }
@@ -193,18 +196,22 @@ body {
 .chimera-editor-widgets {
 	padding: 1rem;
 
-	alchemy-widget[type="alchemy_field"] {
+	al-widget[type="alchemy_field"] {
 		margin-bottom: 1rem;
 	}
 
+	.form-field-info {
+		background-color: #F4F5F9;
+	}
+
 	.form-field-info label,
-	.form-field-info alchemy-label {
+	.form-field-info al-label {
 		display: block;
 		font-size: 1.2rem;
 	}
 }
 
-alchemy-widgets-navigation {
+al-widgets-navigation {
 	--border-color: #333333;
 
 	ul {
@@ -220,7 +227,7 @@ alchemy-widgets-navigation {
 		}
 	}
 
-	alchemy-widget[type="link"] {
+	al-widget[type="link"] {
 		width: 100%;
 		height: 3rem;
 		display: flex;
@@ -279,7 +286,7 @@ alchemy-widgets-navigation {
 	color: white;
 }
 
-alchemy-field-translatable {
+al-field-translatable {
 	.prefix-buttons {
 		width: 100%;
 		border-bottom: 1px solid var(--color-box-border);
@@ -312,8 +319,8 @@ alchemy-field-translatable {
 	}
 }
 
-alchemy-field[mode="inline"] {
-	alchemy-field-translatable {
+al-field[mode="inline"] {
+	al-field-translatable {
 		.prefix-buttons {
 			button {
 				height: 2rem;
@@ -326,7 +333,7 @@ alchemy-field[mode="inline"] {
 		}
 	}
 
-	alchemy-field-translatable-entry {
+	al-field-translatable-entry {
 		display: block;
 		padding: 9px;
 		background: rgba(190,190,190,0.1);
@@ -337,19 +344,19 @@ alchemy-field[mode="inline"] {
 .default-form-editor,
 .chimera-wrapper {
 
-	alchemy-table .aft-column-filters input {
+	al-table .aft-column-filters input {
 		@extend .chimera-input-field;
 		width: 100%;
 	}
 
-	alchemy-form {
+	al-form {
 		.error-area:not(:empty) {
 			@extend .error, .alert-box;
 			margin-top: 0;
 		}
 	}
 
-	alchemy-field {
+	al-field {
 		.wrapped-inline {
 			> .field {
 				padding: 0 !important;
@@ -357,11 +364,11 @@ alchemy-field[mode="inline"] {
 		}
 	}
 
-	alchemy-field[mode="inline"] {
+	al-field[mode="inline"] {
 		border: none;
 	}
 
-	alchemy-field:not([mode="inline"]) {
+	al-field:not([mode="inline"]) {
 		border: 1px solid var(--color-box-border);
 		background-color: white;
 		border-radius: 4px;
@@ -369,13 +376,25 @@ alchemy-field[mode="inline"] {
 		// In case something goes wrong:
 		min-height: 1rem;
 
-		alchemy-label {
+		al-label {
 			padding-left: 1rem;
 			line-height: 3rem;
 			font-size: 16px;
 			font-weight: 500;
 			color: var(--color-title);
 			border-bottom: 1px solid var(--color-box-border);
+			display: flex;
+			flex-flow: column;
+
+			[data-he-name="field-description"] {
+				line-height: 1;
+				margin-bottom: 1rem;
+				color:gray;
+
+				&:empty {
+					display: none;
+				}
+			}
 		}
 
 		.field {
@@ -387,7 +406,7 @@ alchemy-field[mode="inline"] {
 				flex: 10;
 			}
 
-			> alchemy-widget {
+			> al-widget {
 				border: 1px solid var(--color-input-border);
 				padding: 0 12px;
 			}
@@ -417,7 +436,7 @@ alchemy-field[mode="inline"] {
 		}
 	}
 
-	alchemy-field-array {
+	al-field-array {
 		.add-entry {
 			@extend .btn;
 			margin: 1rem 0 0 1rem;
@@ -434,7 +453,7 @@ alchemy-field[mode="inline"] {
 			margin-top: 0.5rem;
 		}
 
-		alchemy-field-array-entry:not(:last-of-type) {
+		al-field-array-entry:not(:last-of-type) {
 			//border-bottom: 1px solid gray;
 			position: relative;
 
@@ -451,18 +470,18 @@ alchemy-field[mode="inline"] {
 			}
 		}
 
-		alchemy-field-array-entry:not(:first-of-type) {
+		al-field-array-entry:not(:first-of-type) {
 			margin-top: 1rem;
 		}
 	}
 
 	.chimera-editor-widgets {
 
-		alchemy-widgets-column.toc-col {
+		al-widgets-column.toc-col {
 			flex: 2 2;
 		}
 
-		table-of-contents[elements-selector="alchemy-field"] {
+		al-toc[elements-selector="al-field"] {
 			align-self: start;
 			top: 2rem;
 			position: sticky;
@@ -490,21 +509,22 @@ alchemy-field[mode="inline"] {
 		}
 	}
 
-	alchemy-field-schema {
-		alchemy-field {
+	al-field-schema {
+		al-field {
 			border: none;
 			margin-bottom: 1rem;
 		}
 	}
 
 	.aft-actions {
+		al-button,
 		a {
 			color: var(--button-text-color);
 			background-color: var(--button-bg-color);
 			padding: 0.5rem;
 			border-radius: 6px;
 			margin: 0.2rem;
-			display: inline-block;
+			display: inline-flex;
 
 			&:hover {
 				background-color: var(--button-bg-hover-color);
@@ -532,7 +552,7 @@ alchemy-field[mode="inline"] {
 		}
 	}
 
-	alchemy-password-input {
+	al-password-input {
 		label:first-of-type {
 			margin-bottom: 0;
 		}
@@ -545,4 +565,13 @@ alchemy-field[mode="inline"] {
 			background: initial;
 		}
 	}
+}
+
+al-field {
+	// Don't let images in widgets take up more then 1/4th of the screen height
+	al-widget {
+		img {
+			max-height: 25vh;
+		}
+	}
 }

package/config/routes.js

@@ -12,7 +12,6 @@ chimera_section.add({
 	paths      : '/',
 	handler    : 'Chimera.Static#dashboard',
 });
-
 // Editor index action
 chimera_section.add({
 	name       : 'Chimera.Editor#index',

package/controller/chimera_editor_controller.js

@@ -227,7 +227,7 @@ Editor.setAction(async function trash(conduit, model_name, pk_val) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.0
- * @version  1.1.1
+ * @version  1.2.0
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -254,6 +254,10 @@ Editor.setAction(async function records(conduit, model_name) {
 		crit.select(fields);
 	}
 
+	if (page_size && !page) {
+		page = 1;
+	}
+
 	if (page) {
 		crit.page(page, page_size);
 	}

package/controller/chimera_static_controller.js

@@ -26,7 +26,7 @@ ChimeraStatic.setAction(function dashboard(conduit) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.0
- * @version  1.0.1
+ * @version  1.2.1
  *
  * @param    {Conduit}   conduit
  */
@@ -64,8 +64,11 @@ ChimeraStatic.setAction(function sidebar(conduit) {
 				widgets.push({
 					type   : 'link',
 					config : {
-						href   : entry.href,
-						content: title
+						link_type : 'href',
+						link_settings : {
+							href   : entry.href,
+						},
+						text: title
 					}
 				});
 			} else {
@@ -73,11 +76,14 @@ ChimeraStatic.setAction(function sidebar(conduit) {
 				widgets.push({
 					type   : 'link',
 					config : {
-						route : 'Chimera.Editor#index',
-						parameters: [
-							{name: 'model', value: model.constructor.type_name},
-						],
-						content: title
+						link_type : 'route',
+						link_settings: {
+							route : 'Chimera.Editor#index',
+							parameters: [
+								{name: 'model', value: model.constructor.type_name},
+							],
+						},
+						text: title
 					}
 				});
 			}

package/lib/chimera_config.js

@@ -65,7 +65,7 @@ Config.setMethod(function getFieldSet(name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.0
- * @version  1.1.1
+ * @version  1.2.1
  *
  * @param    {String}   action
  * @param    {Conduit}  conduit
@@ -84,13 +84,21 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 	if (action == 'edit') {
 		fieldset = this.getFieldSet('edit');
 
-		let field_widgets = [];
-
+		let action_widgets = [];
 		let field;
 
+		let groups = {
+			main : {
+				title   : 'Main',
+				widgets : [],
+			},
+		};
+
 		for (field of fieldset) {
 
-			field_widgets.push({
+			let field_group = groups.main;
+
+			let field_widget ={
 				type   : 'alchemy_field',
 				config : {
 					field           : field.name,
@@ -103,13 +111,71 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 					title           : field.options.title,
 					widget_settings : field.options.widget_settings || {},
 				}
+			};
+
+			if (field.options.group) {
+				field_group = groups[field.options.group];
+
+				if (!field_group) {
+					field_group = {
+						widgets : [],
+					};
+
+					groups[field.options.group] = field_group;
+				}
+			}
+
+			field_group.widgets.push(field_widget);
+		}
+
+		if (Object.size(groups) == 1) {
+			action_widgets.include(groups.main.widgets);
+		} else {
+			let tabs = [];
+
+			for (let name in groups) {
+				let group = groups[name];
+
+				let tab = {
+					name     : name,
+					title    : name.titleize(),
+					contents : group.widgets,
+				};
+
+				tabs.push(tab);
+			}
+
+			action_widgets.push({
+				type   : 'alchemy_tabs',
+				config : {
+					tabs : tabs,
+				}
 			});
 		}
 
-		field_widgets.push({
-			type   : 'html',
+		action_widgets.push({
+			type   : 'hawkejs_template',
 			config : {
-				html : '<button class="btn btn-submit" type="submit">Save</button>'
+				sourcecode : `
+					<al-button class="btn btn-submit" behaviour="submit">
+						<al-state state-name="default">
+							<al-icon icon-style="duotone" icon-name="floppy-disk"></al-icon>
+							{%t "save" %}
+						</al-state>
+						<al-state state-name="error">
+							<al-icon icon-style="duotone" icon-name="skull" icon-flags="shake"></al-icon>
+							{%t "error" action="save" %}
+						</al-state>
+						<al-state state-name="done">
+							<al-icon icon-style="duotone" icon-name="badge-check" icon-flags="beat"></al-icon>
+							{%t "saved" %}
+						</al-state>
+						<al-state state-name="busy">
+							<al-icon icon-style="duotone" icon-name="spinner" icon-flags="spin"></al-icon>
+							{%t "saving" %}
+						</al-state>
+					</al-button>
+				`
 			}
 		});
 
@@ -138,13 +204,13 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 													"config": {
 														model     : this.ModelClass.type_name,
 														purpose   : 'edit',
-														widgets   : field_widgets
+														widgets   : action_widgets
 													}
 												}
 											]
 										}
 									},
-									{
+									/*{
 										type: 'column',
 										config: {
 											wrapper_class_names: 'toc-col',
@@ -152,14 +218,14 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 												{
 													type: "table_of_contents",
 													config: {
-														parent_selector: 'alchemy-widgets-row',
-														elements_selector: 'alchemy-field',
-														title_selector: 'alchemy-label'
+														parent_selector: 'al-widgets-row',
+														elements_selector: 'al-field',
+														title_selector: 'al-label'
 													}
 												}
 											]
 										}
-									}
+									}*/
 								]
 							}
 						}
@@ -180,9 +246,10 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 							"type": "alchemy_table",
 							"config": {
 								fieldset     : fieldset,
-								page_size    : 50,
+								page_size    : 25,
 								show_filters : true,
 								id           : 'aft-' + this.ModelClass.type_name,
+								use_url_pagination : true,
 								recordsource : {
 									route      : 'Chimera.Editor#records',
 									parameters : {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-chimera",
 	"description": "Chimera plugin for Alchemy MVC",
-	"version": "1.1.1",
+	"version": "1.2.1",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -11,10 +11,10 @@
 	],
 	"repository": "11ways/alchemy-chimera",
 	"peerDependencies": {
-		"alchemy-acl"    : "~0.8.0",
-		"alchemymvc"     : "~1.2.4",
-		"alchemy-form"   : "~0.1.11",
-		"alchemy-widget" : "~0.1.5"
+		"alchemy-acl"    : "~0.8.3",
+		"alchemymvc"     : ">=1.2.7",
+		"alchemy-form"   : "~0.2.1",
+		"alchemy-widget" : "~0.2.1"
 	},
 	"license": "MIT",
 	"engines": {

package/view/chimera/dashboard.hwk

@@ -1,8 +1,7 @@
 {% extend "layouts/chimera_body" %}
 
 {% block "main" %}
-Dashboard Widgets:
-<alchemy-widgets>
+<al-widgets>
 
-</alchemy-widgets>
+</al-widgets>
 {% /block %}

package/view/chimera/editor/index.hwk

@@ -1,11 +1,11 @@
 {% include "layouts/chimera_basics" %}
 
 {% block "main" %}
-	<alchemy-widgets
+	<al-widgets
 		class="main-widgets"
 		#context_variables={% context_variables %}
 		#value={% widget_config %}
-	></alchemy-widgets>
+	></al-widgets>
 {% /block %}
 
 {% block "page-actions" %}
@@ -14,7 +14,7 @@
 		#model={% model_name %}
 		class="btn"
 	>
-		<al-ico type="plus"></al-ico>
+		<al-icon icon-name="plus"></al-icon>
 		{%t "new" model=model_name %}
 	</a>
 {% /block %}

package/view/chimera/editor/trash.hwk

@@ -15,7 +15,10 @@
 				{%t "cancel" %}
 			</a>
 			<button class="btn danger">
-				<al-ico type="trash" class="fas fa-trash"></al-ico>
+				<al-icon
+					icon-name="trash"
+					icon-style="duotone"
+				></al-icon>
 				{%t "delete" %}
 			</button>
 		</form>
@@ -28,7 +31,7 @@
 		#model={% model_name %}
 		class="btn"
 	>
-		<al-ico type="plus"></al-ico>
+		<al-icon icon-name="plus"></al-icon>
 		{%t "new" model=model_name %}
 	</a>
 {% /block %}

package/view/chimera/sidebar.hwk

@@ -1,4 +1,4 @@
-<alchemy-widgets
+<al-widgets
 	class="sidebar-widgets"
 	#value=<% navigation_widgets %>
-></alchemy-widgets>
+></al-widgets>

package/view/chimera/widgets.hwk

@@ -1,8 +1,8 @@
 {% include "layouts/chimera_basics" %}
 
 {% block "main" %}
-<alchemy-widgets
+<al-widgets
 	#context_variables={% context_variables %}
 	#value={% widget_config %}
-></alchemy-widgets>
+></al-widgets>
 {% /block %}