alchemy-form 0.3.0-alpha.1 → 0.3.0-alpha.3

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 0.3.0-alpha.3 (2024-08-04)
+
+* Add `original_value_container` property to `<al-field>` elements, for when they're not inside a `<al-form>` element but still need the original container
+* Use `getParentFieldElement()` instead of `alchemy_form` when resolving inherited attributes
+* Also let the `mode` attribute inherit
+* Add template for `view` mode for `schema` fields
+* Move the badge element to `styleboost`
+* Make `al-table` contents responsive/scrollable by default
+* Fix `<al-field-schema>#getSchemaSupplierField()` not finding the supplier field when it's a nested schema
+* Don't let `<al-field-schema>#sub_fields` return meta fields
+* Fix `<al-field-schema>` having issues with nested `<al-field-schema>` fields
+* Make `<al-field>` remember forced `schema` values
+* Prefer `fallback` template over `string` template when no specific template is found for a field
+* Make `<al-field>` prefer the nearest descendant when getting the `value_element` property
+* Support the `<al-field>` `config` property being a `Schema` instance (for now)
+* Add API action to get enum info
+* Make `<al-field-schema>` `original_value` getter aware of it being in an array
+
+## 0.3.0-alpha.2 (2024-02-25)
+
+* Added `.alchemy-badge` class
+* Use badges & microcopy for showing in-line empty values
+* Also set the `al-field`'s model attribute inside `al-table` elements
+* Depend on the `alchemy-styleboost` peer dependency
+* Let enum values use automatic styleboost colors in indexes + show correct titles
+
 ## 0.3.0-alpha.1 (2024-02-15)
 
 * Upgrade to Alchemy v1.4.0
@@ -5,6 +31,7 @@
 * Add settings editor element
 * Make `readonly` attribute work on `al-field` and `al-form` elements
 * Use "alchemy-field-title" and "alchemy-field-description" microcopy in `al-field` labels
+* Add `zone` attribute for use in the microcopy system
 
 ## 0.2.10 (2024-01-15)
 

package/assets/stylesheets/form/alchemy_form.scss

@@ -1,2 +1 @@
-@import "./general/index.scss";
-@import "./elements/index.scss";
+@use "elements";

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

@@ -1,33 +1,10 @@
-: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;
-}
+@use "styleboost";
 
 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;
+	@extend .button;
 
+	display: inline-block;
 	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;
@@ -42,11 +19,7 @@ al-button {
 
 	&[disabled] {
 		pointer-events: none;
-		filter: saturate(0.5);
+		filter: unquote("saturate(0.5)");
 		cursor: not-allowed;
 	}
-
-	&:hover {
-		background-color: var(--al-button-bg-color-hover);
-	}
 }

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

@@ -0,0 +1,93 @@
+@use "styleboost";
+@use "styleboost/inputs";
+@use "styleboost/utilities/properties";
+
+@layer defaults {
+
+	:root {
+		--size-c-dropdown-border: 0px;
+		--style-c-dropdown-border: solid;
+		--size-c-dropdown-border-radius: 4px;
+		--color-c-dropdown-bg: white;
+	}
+
+	al-dropdown {
+		// Only extend the input defaults (custom properties),
+		// that way we don't inherit the actual applied values to padding etc
+		@extend .input-defaults;
+
+		--color-p-dropdown-bg: #{properties.backgroundColor('dropdown')};
+
+		--color-p-dropdown-active-item-bg: var(--color-p-input-accent);
+		--color-p-dropdown-active-item-bg-text: var(--color-p-input-accent-text);
+
+		--color-p-dropdown-selected-item-bg: var(--color-p-input-accent);
+		--color-p-dropdown-selected-item-bg-text: var(--color-p-input-accent-text);
+
+		--size-p-dropdown-border-radius: var(--size-c-dropdown-border-radius);
+
+		display: block;
+		position: relative;
+
+		.dropdown-trigger-wrapper > button {
+			@extend .button;
+		}
+
+		.dropdown-items-wrapper {
+			position: fixed;
+			box-shadow: 0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #ffffff80;
+			border-radius: var(--size-p-dropdown-border-radius);
+			background-color: var(--color-p-dropdown-bg);
+
+			[slot="dropdown-items"] {
+				// display: flex;
+				// flex-flow: column;
+				display: grid;
+				grid-template-columns: max-content 1fr;
+				grid-auto-rows: auto;
+				grid-template-areas: "icons titles";
+				gap: 0px 1rem;
+
+				al-dropdown-item {
+					display: grid;
+					grid-template-columns: subgrid;
+					grid-template-rows: subgrid;
+					grid-column: span 2;
+
+					al-icon {
+						grid-area: icons;
+						justify-content: center;
+						align-items: center;
+					}
+
+					.text {
+						grid-area: title;
+					}
+				}
+			}
+		}
+
+		al-dropdown-item {
+			margin: 0 8px;
+			padding: 8px;
+
+			&:hover,
+			&.focused {
+				background-color: var(--color-p-dropdown-active-item-bg);
+				color: var(--color-p-dropdown-active-item-bg-text);
+			}
+
+			&:first-child {
+				margin-top: 8px;
+			}
+
+			&:last-child {
+				margin-bottom: 8px;
+			}
+		}
+	}
+
+	al-dropdown-item {
+		cursor: pointer;
+	}
+}

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

@@ -0,0 +1,7 @@
+@use "styleboost";
+
+@layer defaults {
+	al-enum-badge {
+		@extend .badge;
+	}
+}

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

@@ -1,3 +1,5 @@
+@use "form/general" as *;
+
 .textareabox,
 .inputbox {
 	$inputbox: &;

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

@@ -1,5 +1,8 @@
+@use "styleboost" as *;
+
 al-field {
 	display: block;
+	--badge-font-size: 1rem;
 
 	&[field-type="boolean"] {
 		
@@ -8,34 +11,22 @@ al-field {
 			justify-content: flex-start;
 		}
 
-		.boolean-wrapper {
-			&.boolean-true {
-				--boolean-color: green;
-				--text-color: white;
-			}
-
-			&.boolean-false {
-				--boolean-color: red;
-				--text-color: white;
-			}
-
-			&.boolean-null {
-				--boolean-color: #f3f3f3;
-				--text-color: #666;
-				font-style: italic;
-			}
-
-			background-color: var(--boolean-color);
-			border-radius: 5px;
-			padding: 4px 8px;
-			min-width: 1rem;
-			color: var(--text-color, white);
-			display: inline-flex;
+		.boolean-true {
+			@extend .use-truthy-theme;
+		}
+
+		.boolean-false {
+			@extend .use-falsy-theme;
+		}
+
+		.value-icon {
+			margin-right: 0.5rem;
 		}
 	}
 
-	.alchemy-field-empty-value {
-		color: #666;
+	.alchemy-field-empty-value-placeholder {
+		--color-theme-fill: var(--color-inactive-bg);
+		--color-theme-fill-text: var(--color-inactive-bg-text);
 		font-style: italic;
 	}
 }

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

@@ -1,12 +1,17 @@
+@use "styleboost";
+
 al-form {
 	.error-area:empty {
 		display: none;
 	}
 
 	.error-area:not(:empty) {
-		border: 1px solid #a80000;
-		color: #a80000;
+		@extend .use-danger-theme;
+		border: 1px solid var(--color-theme-accent);
+		color: var(--color-theme-bg-text);
+		background-color: var(--color-theme-bg);
 		padding: 0.2rem;
+		border-radius: 4px;
 	}
 }
 

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

@@ -1,215 +1,215 @@
-al-select {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
+@use "styleboost";
+@use "styleboost/inputs";
 
-	--active-item-bg: #a7deff;
-	--active-item-fg: #272727;
+@layer defaults {
+	$accent: styleboost.themePropertyVar('color', 'accent', 'form');
+	$accent_rgb: styleboost.themePropertyVar('color', 'accent-rgb', 'form');
 
-	--selected-item-bg: #31317a;
-	--selected-item-fg: #f5f5f5;
+	al-select {
+		// Only extend the input defaults (custom properties),
+		// that way we don't inherit the actual applied values to padding etc
+		@extend .input-defaults;
 
-	.dropdown-content,
-	.value-wrapper,
-	.dropdown {
-		box-sizing: border-box;
-	}
+		--al-select-color-active-item-bg: var(--color-t-current-bg, var(--color-t-primary-bg));
+		--al-select-color-active-item-fg: var(--color-t-current-bg-text, var(--color-t-primary-bg-text));
 
-	&:focus {
-		.value-wrapper {
-			border-color: rgba(82, 168, 236, 0.8) !important;
+		--al-select-color-selected-item-bg: var(--color-t-current-fill, var(--color-t-primary-fill));
+		--al-select-color-selected-item-fg: var(--color-t-current-fill-text, var(--color-t-primary-fill-text));
+
+		--color-p-select-border: var(--color-t-current-bg-subtle);
+
+		--color-p-input-active-item-bg: var(--color-p-input-accent);
+		--color-p-input-active-item-bg-text: var(--color-p-input-accent-text);
+
+		--color-p-input-selected-item-bg: var(--color-p-input-accent);
+		--color-p-input-selected-item-bg-text: var(--color-p-input-accent-text);
+
+		display: block;
+		border-radius: var(--size-p-input-border-radius);
+		border-width: var(--size-p-input-border);
+		border-style: var(--style-p-input-border);
+
+		&:focus {
+			.value-wrapper {
+				border-color: rgba(#{$accent_rgb}, 0.8) !important;
+			}
 		}
-	}
 
-	// Default styles:
-	// for inputs with single & multiple values
-	.value-wrapper {
-		border: 1px solid #d0d0d0;
-		padding: 8px 8px;
-		display: inline-block;
-		width: 100%;
-		position: relative;
-		z-index: 1;
-		border-radius: 3px;
-		display: flex;
-		flex-wrap: wrap;
-		//box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-
-		align-items: center;
-
-		input.type-area {
-			height: 1.5rem !important;
+		// The value wrapper is the main visible part of the select
+		.value-wrapper {
+			border-radius: var(--size-p-input-border-radius);
+
+			padding-bottom: var(--size-p-input-spacer-y);
+			padding-top: var(--size-p-input-spacer-y);
+			padding-left: var(--size-p-input-spacer-x);
+			padding-right: var(--size-p-input-spacer-x);
+
+			width: 100%;
+			display: flex;
+			position: relative;
+			z-index: 1;
+			flex-wrap: wrap;
+			align-items: center;
+
+			input.type-area {
+				height: 1.5rem !important;
+			}
 		}
-	}
 
-	&[aria-expanded="true"] .value-wrapper {
-		border-radius: 3px 3px 0 0;
-	}
+		&[aria-expanded="true"] {
+			border-radius: var(--size-p-input-border-radius) var(--size-p-input-border-radius) 0 0;
+		}
 
-	// Single value input
-	&:not([multiple]) {
-		.value-wrapper {
-			border-color: #b8b8b8;
-			background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
-			cursor: pointer;
+		// Single value input
+		&:not([multiple]) {
+			.value-wrapper {
+				//border-color: #b8b8b8;
+
+				cursor: pointer;
+
+				&::after {
+					position: absolute;
+					top: 50%;
+					right: 15px;
+					display: block;
+					width: 0;
+					height: 0;
+					margin-top: -3px;
+					border-color: #808080 transparent transparent transparent;
+					border-style: solid;
+					border-width: 5px 5px 0 5px;
+					content: ' ';
+				}
+			}
 
-			&::after {
-				position: absolute;
-				top: 50%;
-				right: 15px;
-				display: block;
-				width: 0;
-				height: 0;
-				margin-top: -3px;
-				border-color: #808080 transparent transparent transparent;
-				border-style: solid;
-				border-width: 5px 5px 0 5px;
-				content: ' ';
+			&[aria-expanded="false"] .value-wrapper .type-area {
+				cursor: pointer;
 			}
 		}
 
-		&[aria-expanded="true"] .value-wrapper {
-			background-image: none;
+		// Multiple value input
+		&[multiple] {
+			.value-wrapper {
+				cursor: text;
+			}
 		}
 
-		&[aria-expanded="false"] .value-wrapper .type-area {
-			cursor: pointer;
+		.value-wrapper {
+			min-width: 5rem;
+			overflow: hidden;
 		}
-	}
 
-	// Multiple value input
-	&[multiple] {
-		.value-wrapper {
-			cursor: text;
+		.type-area {
+			font-family: inherit;
+			//font-size: 13px;
+			//line-height: 18px;
+			display: inline-block !important;
+			padding: 0 !important;
+			min-height: 0 !important;
+			max-height: none !important;
+			max-width: 100% !important;
+			margin: 0 1px !important;
+			text-indent: 0 !important;
+			border: 0 none !important;
+			background: none !important;
+			line-height: inherit !important;
+			box-shadow: none !important;
+			outline: none !important;
+			flex: 0 1 auto;
+			margin-right: 20px !important;
 		}
-	}
 
-	.value-wrapper {
-		min-width: 5rem;
-		overflow: hidden;
-		background: #fff;
+		.dropdown {
+			@extend .input-defaults;
 
-		color: #303030;
-		font-family: inherit;
-		font-size: 13px;
-		line-height: 18px;
-		-webkit-font-smoothing: inherit;
-	}
+			// The dropdown has to be hidden by default
+			display: none;
+			position: absolute;
+			z-index: 999999;
+			left: 0px;
 
-	.type-area {
-		color: #303030;
-		font-family: inherit;
-		font-size: 13px;
-		line-height: 18px;
-		display: inline-block !important;
-		padding: 0 !important;
-		min-height: 0 !important;
-		max-height: none !important;
-		max-width: 100% !important;
-		margin: 0 1px !important;
-		text-indent: 0 !important;
-		border: 0 none !important;
-		background: none !important;
-		line-height: inherit !important;
-		box-shadow: none !important;
-		outline: none !important;
-		flex: 0 1 auto;
-		margin-right: 20px !important;
-	}
+			margin: 0 0 0 -1px;
 
-	.dropdown {
-		color: #303030;
-		font-family: inherit;
-		font-size: 13px;
-		line-height: 18px;
-		-webkit-font-smoothing: inherit;
-		display: none;
-
-		position: absolute;
-		z-index: 999999;
-		border: 1px solid #d0d0d0;
-		background: #fff;
-		margin: -1px 0 0 0;
-		border-top: 0 none;
-
-		// Make it scroll
-		overflow-y: auto;
-		overflow-x: hidden;
-		max-height: 200px;
-	}
+			border-radius: 0 0 var(--size-p-input-border-radius) var(--size-p-input-border-radius);
+			border-width: var(--size-p-input-border);
+			border-style: var(--style-p-input-border);
+			border-color: inherit;
 
-	.dropdown-content {
-		display: flex;
-	}
+			border-top: 0 none;
 
-	.dropdown-content {
-		flex-flow: column nowrap;
-	}
+			// Make it scroll
+			overflow-y: auto;
+			overflow-x: hidden;
+			max-height: 200px;
 
-	.dropdown [role="option"] {
-		cursor: pointer;
-		overflow: hidden;
-		padding: 6px 8px;
-		flex: 1 0;
-	}
+			scrollbar-width: thin;
 
-	.dropdown [role="option"] {
+			[role="option"] {
+				cursor: pointer;
+				overflow: hidden;
+				padding: 6px 8px;
+				flex: 1 0;
 
-		&:hover,
-		&.focused {
-			background-color: var(--active-item-bg, #f5fafd);
-			color: var(--active-item-fg, #495c68);
-		}
+				&:hover,
+				&.focused {
+					background-color: var(--color-p-input-active-item-bg);
+					color: var(--color-p-input-active-item-bg-text);
+				}
 
-		&[selected] {
-			background-color: var(--selected-item-bg, #f5fafd);
-			color: var(--selected-item-fg, #495c68);
+				&[selected] {
+					background-color: var(--color-p-input-selected-item-bg);
+					color: var(--color-p-input-selected-item-bg-text);
+				}
+			}
 		}
-	}
-
-	&[aria-expanded="true"] .dropdown {
-		display: block !important;
-	}
 
-	div.value {
-		display: inline-block;
-		cursor: pointer;
-		margin: 0 3px 3px 0;
-		padding: 2px 6px;
-		border-color: 1px solid #0073bb;
-		background-color: #1b9dec;
-		background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
-		box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
-		border-radius: 3px;
-		text-shadow: 0 1px 0 rgba(0,51,83,0.3);
-		white-space: nowrap;
-		color: white;
-	}
+		.dropdown-content {
+			display: flex;
+			flex-flow: column nowrap;
+		}
 
-	.result-info {
-		position: fixed;
-		left: -200vw;
-		width: 1px;
-		height: 1px;
-	}
+		&[aria-expanded="true"] .dropdown {
+			display: block !important;
+		}
 
-	&[multiple] .value-wrapper {
-		al-select-item {
+		div.value {
 			display: inline-block;
+			cursor: pointer;
+			margin: 0 3px 3px 0;
+			padding: 2px 6px;
+			border-color: 1px solid #{$accent};
 
-			text-shadow: 0 1px 0 rgba(0,51,83,0.3);
-			background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
-			background-repeat: repeat-x;
+			background-color: var(--color-p-input-selected-item-bg);
+			color: var(--color-p-input-selected-item-bg-text);
+
+			box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
 			border-radius: 3px;
-			box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
-			padding: 2px 6px;
-			margin: 0 3px 3px 0;
-			color: white;
-			border: 1px solid #0073bb;
+			text-shadow: 0 1px 0 rgba(0,51,83,0.3);
+			white-space: nowrap;
+		}
+
+		.result-info {
+			position: fixed;
+			left: -200vw;
+			width: 1px;
+			height: 1px;
+		}
+
+		&[multiple] .value-wrapper {
+			al-select-item {
+				display: inline-block;
+
+				text-shadow: 0 1px 0 rgba(0,51,83,0.3);
+				background-color: var(--color-p-input-selected-item-bg);
+				color: var(--color-p-input-selected-item-bg-text);
+
+				border-radius: 3px;
+				box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
+				padding: 2px 6px;
+				margin: 0 3px 3px 0;
+
+				border: 1px solid #{$accent};
 
-			&.active {
-				background-image: linear-gradient(to bottom, #008fd8, #0075cf);
 			}
 		}
 	}