alchemy-form 0.1.1 → 0.1.4

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## 0.1.4 (2022-03-16)
+
+* Make fields work with the new `Alchemy.Map.Backed` and `Alchemy.Map.Enum` class
+* Add the `field_path_in_current_schema` property
+* Make sure `alchemy-fields` know which `alchemy-form` they belong to
+* Improve the `original_value` getters
+* Set the `field-type` attribute of `alchemy-field` elements
+* Fix `alchemy-field` elements sometimes not getting their value elements
+
+## 0.1.3 (2022-02-20)
+
+* Fix datetime fields never showing their value
+* `alchemy-table` elements will now ignore old loadRemote responses
+* The `index` property of a `alchemy-field-array-entry` element will now return the current, actual index
+* Fix `schema` fields breaking when their schema depends on another field
+* Populate `alchemy-form` with violations from the widget context
+* Fix `alchemy-label` not always focusing on input after clicking on it
+* Fix `alchemy-string-input` element and add `alchemy-number-input`
+* Fix `alchemy-field` not setting the `for` attribute of its label
+
+## 0.1.2 (2022-01-28)
+
+* Add readonly attribute to fields
+* Clear text input on focus out + improve accessibility of alchemy-select
+* Add widget settings to alchemy-field
+* Enable setting the language mode of ace editor
+
 ## 0.1.1 (2021-09-12)
 
 * `alchemy-table` will now use the `FieldConfig#getDisplayValueIn(data)` method

package/assets/stylesheets/form/alchemy_feedback_input.scss

@@ -0,0 +1,336 @@
+@import "./general/index.scss";
+
+.textareabox,
+.inputbox {
+	$inputbox: &;
+	position: relative;
+	display: flex;
+	flex-grow: 1;
+
+	background: var(--color-input-border, $color-input-border);
+
+	.input {
+		display: block;
+		flex-grow: 1;
+		margin: 0.1rem;
+		border: 1px solid transparent;
+		outline: none;
+		padding: 1.2rem 2.2rem;
+		min-width: 0;
+
+		background-color: var(--color-input-background, $color-input-input-background);
+
+		font-size: $text-size-input-input;
+		color: var(--color-input-input, $color-input-input);
+		transition: border-color 0.2s ease-in;
+
+		&:focus {
+			border-color: var(--color-input-focus);
+		}
+	}
+
+	&.error {
+		background: var(--color-input-border-error, $color-input-border-error);
+	}
+
+	&.valid {
+		background: var(--color-input-border-filled, $color-input-border-filled);
+
+		&.focus {
+			background: var(--color-input-border-success, $color-input-border-success);
+		}
+	}
+}
+
+.inputfield,
+alchemy-string-input {
+	$inputfield: &;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+
+	& +.rest-fields > string-input:first-of-type {
+		margin-top: 3rem;
+	}
+
+	.inputgrid + &,
+	&:not(.column) + &:not(.column) {
+		margin-top: 3rem;
+	}
+
+	&.closer {
+		margin-top: 1.5rem;
+	}
+
+	.connect {
+		&:not(:first-of-type) {
+			margin-top: 3rem;
+		}
+	}
+
+	&.valid {
+		.icon {
+			&.cross {
+				display: none;
+			}
+
+			&.checkmark {
+				display: block;
+			}
+		}
+	}
+
+	&.error {
+		.icon {
+			&.cross {
+				display: block;
+			}
+
+			&.checkmark {
+				display: none;
+			}
+		}
+	}
+
+	.icon {
+		display: none;
+		position: absolute;
+		height: auto;
+		top: 50%;
+		right: 1rem;
+
+		transform: translateY(-50%) scale(0) rotate(10deg);
+		animation: icon--show 200ms ease-out forwards;
+
+		&.cross {
+			//@extend .customicon, .customicon-cross;
+			font-size: 1rem;
+			color: var(--color-input-cross, $color-input-cross);
+
+			&:before {
+				content: "❌";
+			}
+		}
+
+		&.checkmark {
+			//@extend .customicon, .customicon-checkmark;
+			font-size: 1.2rem;
+			color: var(--color-input-checkmark, $color-input-checkmark);
+
+			&:before {
+				content: "✔";
+			}
+		}
+
+		&.locked {
+			color: var(--color-input-checkmark, $color-input-checkmark);
+		}
+	}
+
+	&[readonly],
+	&[readonly].valid {
+		.checkmark,
+		.cross {
+			display: none;
+		}
+
+		.locked {
+			display: block;
+		}
+
+		&,
+		input {
+			cursor: default;
+		}
+	}
+
+	.meta,
+	.errors,
+	.success {
+		margin-top: 1.8rem;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	.meta {
+		font-weight: 600;
+		font-size: $text-size-inputfield-meta;
+		color: var(--color-inputfield-meta, $color-inputfield-meta);
+	}
+
+	.inputlabel {
+
+		.spacer {
+			display: none;
+		}
+
+		.label:not(:empty) ~ .spacer,
+		.description:not(:empty) ~ .spacer {
+			display: block;
+			margin-bottom: 0.5rem;
+		}
+	}
+}
+
+alchemy-string-input {
+	.inputlabel {
+		.label {
+			margin-bottom: 0 !important;
+		}
+	}
+}
+
+alchemy-password-input {
+	@extend alchemy-string-input;
+
+	& > label:first-of-type {
+		margin-bottom: 2rem;
+	}
+}
+
+@keyframes icon--show {
+	0% {
+		transform: translateY(-50%) scale(0) rotate(-30deg);
+	}
+
+	100% {
+		transform: translateY(-50%) scale(1) rotate(0deg);
+	}
+}
+
+.inputlabel {
+	display: flex;
+	flex-direction: column;
+
+	.label {
+		color: var(--color-inputlabel-label);
+		font-weight: 700;
+		font-size: $text-size-inputlabel-label;
+		margin-bottom: 0.5rem;
+	}
+
+	.description {
+		margin-top: .4em;
+
+		color: var(--color-inputlabel-description);
+		font-size: $text-size-inputlabel-description;
+	}
+}
+
+.errorlabel {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+
+	font-size: $text-size-errorlabel;
+	color: var(--color--errorlabel, $color-errorlabel);
+
+	.erroricon {
+		font-style: normal;
+
+		&:before {
+			content: "❌";
+		}
+		
+		margin-right: 1rem;
+	}
+
+	strong {
+		color: var(--color-errorlabel-accent, $color-errorlabel-accent);
+	}
+}
+
+.successlabel {
+	font-size: $text-size-successlabel;
+	color: var(--color-successlabel, $color-successlabel);
+	font-weight: initial;
+
+	strong {
+		color: var(--color-successlabel-accent, $color-successlabel-accent);
+	}
+}
+
+alchemy-number-input {
+	$numberinput: &;
+	display: flex;
+	flex-flow: column wrap;
+	justify-content: center;
+	align-items: center;
+
+	.label {
+		margin-bottom: 0 !important;
+		width: 100%;
+
+		color: var(--color-numberinput-label, $color-numberinput-label);
+		font-size: $text-size-numberinput-label;
+		text-align: center;
+	}
+
+	.control {
+		cursor: pointer;
+		border: 0;
+		outline: 0;
+		padding: 0;
+		background: transparent;
+		min-width: 3.5rem;
+
+		font-size: $text-size-numberinput-control;
+		line-height: 0.8;
+
+		&:disabled {
+			cursor: default;
+			opacity: 0.5;
+		}
+
+		&.minus {
+			&:before {
+				content: "-";
+			}
+			//@extend .iconpack, .iconpack-less;
+		}
+
+		&.plus {
+			&:before {
+				content: "+";
+			}
+			//@extend .iconpack, .iconpack-plus;
+		}
+	}
+
+	.input {
+		margin: 0 2rem;
+		border: 0;
+		appearance: none;
+		-moz-appearance: textfield;
+		padding: 2rem 1rem;
+		width: 12rem;
+
+		color: var(--color-numberinput-input, $color-numberinput-input);
+		font-size: $text-size-numberinput-input;
+		font-weight: 800;
+		text-align: center;
+
+		background-color: var(--color-numberinput-background, $color-numberinput-background);
+
+		&::-webkit-inner-spin-button,
+		&::-webkit-outer-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+
+	.label {
+		#{ $numberinput }__label {
+			display: block;
+		}
+	}
+
+	.inputlabel {
+		.description:empty {
+			display: none;
+		}
+	}
+}

package/assets/stylesheets/form/alchemy_select.scss

@@ -3,6 +3,12 @@ alchemy-select {
 	position: relative;
 	display: block;
 
+	--active-item-bg: #a7deff;
+	--active-item-fg: #272727;
+
+	--selected-item-bg: #31317a;
+	--selected-item-fg: #f5f5f5;
+
 	.dropdown-content,
 	.value-wrapper,
 	.dropdown {
@@ -10,8 +16,6 @@ alchemy-select {
 	}
 
 	&:focus {
-		outline: 0 !important;
-
 		.value-wrapper {
 			border-color: rgba(82, 168, 236, 0.8) !important;
 		}
@@ -31,6 +35,12 @@ alchemy-select {
 		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;
+		}
 	}
 
 	&[aria-expanded="true"] .value-wrapper {
@@ -149,11 +159,15 @@ alchemy-select {
 	.dropdown [role="option"] {
 
 		&:hover,
-		&.focused,
-		&[selected] {
+		&.focused {
 			background-color: var(--active-item-bg, #f5fafd);
 			color: var(--active-item-fg, #495c68);
 		}
+
+		&[selected] {
+			background-color: var(--selected-item-bg, #f5fafd);
+			color: var(--selected-item-fg, #495c68);
+		}
 	}
 
 	&[aria-expanded="true"] .dropdown {

package/assets/stylesheets/form/general/_colors.scss

@@ -0,0 +1,114 @@
+$color-dark: #000000;
+$color-light: #ffffff;
+
+$color-scorpion: #585858;
+$color-mineshaft: #383838;
+$color-silverchalice: #a8a8a8;
+$color-mercury: #e8e8e8;
+$color-gray: #888888;
+$color-alto: #dddddd;
+$color-mineshaft: #282828;
+$color-alabaster: #f7f7f7;
+$color-dustygray: #989898;
+$color-concrete: #f2f2f2;
+
+$color-light-gray: #e3e3e3;
+$color-light-dark: #1c1c1c;
+
+$color-red: #e5002d;
+$color-guardsman: #cc0000;
+$color-green: #87dd0e;
+$color-jungle-green: #31c063;
+$color-science: #0066cc;
+$color-sunglow: #ffc132;
+$color-bittersweet: #ff6b6b;
+
+$color-facebook: #3a579a;
+$color-messenger: #007fff;
+$color-whatsapp: #57bb63;
+$color-sms: #40c088;
+
+$color-selectlistitem-background: $color-light;
+$color-selectlistitem-background-hover: $color-concrete;
+$color-selectlistitem-heading: $color-dark;
+$color-selectlistitem-title: $color-gray;
+$color-selectlistitem-subtitle: $color-gray;
+$color-selectlistitem-description: $color-scorpion;
+$color-selectlistitem-title-selected: $color-dark;
+$color-selectlistitem-value: $color-dustygray;
+$color-selectlistitem-value-selected: $color-dark;
+$color-selectlistitem-checkmark-fill: $color-green;
+
+$color-meta: $color-dark;
+$color-meta-facebook: $color-facebook;
+$color-meta-success: $color-green;
+$color-meta-error: $color-red;
+$color-meta-info: $color-science;
+$color-meta-extra: $color-scorpion;
+
+$color-button-hover: $color-dark;
+$color-button-hover-dark: $color-light;
+$color-button-color: $color-dark;
+$color-button-light-color: $color-light;
+$color-button-shadow: rgba($color-dark, 0.15);
+$color-button-background: $color-light;
+$color-button-black-background: $color-dark;
+$color-button-green-background: $color-green;
+$color-button-gray-background: $color-gray;
+$color-button-positive-background: $color-green;
+$color-button-negative-background: $color-red;
+$color-button-border: $color-mercury;
+$color-button-mark: $color-green;
+$color-button-light-gray-background: $color-light-gray;
+$color-button-light-gray-color: $color-alabaster;
+
+$color-inputfield-meta: $color-scorpion;
+
+$color-numberinput-background: $color-light;
+$color-numberinput-label: $color-dark;
+$color-numberinput-input: $color-dark;
+
+$color-numberselector-number-border: linear-gradient(
+  0deg,
+  $color-alto,
+  $color-light
+);
+$color-numberselector-number-background: $color-light;
+$color-numberselector-number-color: $color-dustygray;
+$color-numberselector-number-color-hover: $color-dark;
+$color-numberselector-number-background-hover: $color-alabaster;
+$color-numberselector-number-active-color: $color-green;
+
+$color-input-input: $color-dark;
+$color-input-border: linear-gradient(0deg, $color-alto, $color-light);
+$color-input-cross: $color-guardsman;
+$color-input-checkmark: $color-green;
+$color-input-input-background: $color-light;
+$color-input-placeholder: $color-gray;
+$color-input-border-error: linear-gradient(
+  0deg,
+  $color-guardsman,
+  $color-alto 0.1rem,
+  $color-light
+);
+$color-input-border-filled: linear-gradient(
+  0deg,
+  $color-dark,
+  $color-alto 0.1rem,
+  $color-light
+);
+$color-input-border-success: linear-gradient(
+  0deg,
+  $color-green,
+  $color-alto 0.1rem,
+  $color-light
+);
+
+$color-inputlabel-label: $color-dark;
+$color-inputlabel-description: $color-dark;
+
+$color-errorlabel: $color-scorpion;
+$color-errorlabel-accent: $color-guardsman;
+
+$color-successlabel: $color-green;
+$color-successlabel-accent: $color-green;

package/assets/stylesheets/form/general/_textsizes.scss

@@ -0,0 +1,55 @@
+$text-size-xgiant: 6rem;
+$text-size-giant: 4.5rem;
+$text-size-xlarge: 4rem;
+$text-size-large: 3.2rem;
+$text-size-2xbig: 2.4rem;
+$text-size-xbig: 2.2rem;
+$text-size-big: 2rem;
+$text-size-medium: 1.8rem;
+$text-size-regular: 1.6rem;
+$text-size-small: 1.3rem;
+$text-size-xsmall: 1.2rem;
+$text-size-tiny: 1rem;
+
+$text-size-meta: $text-size-regular;
+$text-size-meta-small: $text-size-small;
+$text-size-meta-medium: $text-size-medium;
+$text-size-meta-large: $text-size-big;
+$text-size-meta-xlarge: $text-size-2xbig;
+$text-size-meta-giant: $text-size-large;
+
+$text-size-button: $text-size-regular;
+$text-size-button-big: $text-size-2xbig;
+$text-size-button-small: $text-size-xsmall;
+
+$text-size-inputfield-meta: $text-size-small;
+
+$text-size-numberinput-label: $text-size-medium;
+$text-size-numberinput-control: $text-size-giant;
+$text-size-numberinput-input: $text-size-2xbig;
+
+$text-size-numberselector-number: $text-size-large;
+
+$text-size-checkbox-info: $text-size-regular;
+
+$text-size-checklistitem-title: $text-size-big;
+$text-size-checklistitem-subtitle: $text-size-regular;
+$text-size-checklistitem-suffix: $text-size-xsmall;
+
+$text-size-input-input: $text-size-regular;
+$text-size-input-message: $text-size-regular;
+
+$text-size-infoblock-title: $text-size-xsmall;
+$text-size-infoblock-value: $text-size-large;
+
+$text-size-inputlabel-label: $text-size-big;
+$text-size-inputlabel-description: $text-size-regular;
+
+$text-size-errorlabel: $text-size-regular;
+
+$text-size-successlabel: $text-size-regular;
+
+$text-size-comboinput-item: $text-size-big;
+
+$text-size-selectinput-item: $text-size-big;
+$text-size-selectinput-item-suffix: $text-size-regular;

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

@@ -0,0 +1,2 @@
+@import "_textsizes.scss";
+@import "_colors.scss";