alchemy-form 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 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

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/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";

package/element/00_form_base.js

@@ -123,4 +123,138 @@ Base.setProperty(function wrapper_type() {
 		this.setAttribute('wrapper-type', value);
 	}
 
+});
+
+/**
+ * Get the path of this field value in the current record
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+Base.setProperty(function field_path_in_record() {
+
+	let result = [],
+	    parent = this.getParentField(),
+		name;
+
+	name = this.getPathEntryName();
+
+	if (name) {
+		result.push(name);
+	}
+
+	while (parent) {
+		name = parent.getPathEntryName();
+
+		if (name) {
+			result.unshift(name);
+		}
+
+		parent = parent.getParentField();
+	}
+
+	return result.join('.');
+});
+
+/**
+ * Get the parent field/field-entry element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {Alchemy.Element.Form.Base}
+ */
+Base.setMethod(function getParentField() {
+
+	let parent = this.parentElement;
+
+	while (parent) {
+
+		if (parent instanceof Classes.Alchemy.Element.Form.Base) {
+			return parent;
+		}
+
+		parent = parent.parentElement;
+	}
+
+	return false;
+});
+
+/**
+ * Get the name of this thing in a record path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {String}
+ */
+Base.setMethod(function getPathEntryName() {
+	return '';
+});
+
+/**
+ * Get this entry's path origin
+ * (The path to the container it's in)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {String}
+ */
+Base.setMethod(function getPathOrigin() {
+
+	let current = this,
+	    origin;
+
+	while (current) {
+		origin = current.field_path_in_record;
+
+		if (origin) {
+			return origin;
+		}
+
+		current = current.getParentField();
+	}
+});
+
+/**
+ * Resolve the given path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ * 
+ * @param    {String}   name   The name to resolve
+ * @param    {String}   origin The origin to use (optional)
+ *
+ * @return   {String}
+ */
+Base.setMethod(function resolvePath(name, origin) {
+
+	if (origin == null) {
+		origin = this.getPathOrigin();
+	}
+
+	if (!origin) {
+		return name;
+	}
+
+	if (!Array.isArray(origin)) {
+		origin = origin.split('.');
+	} else {
+		origin = origin.slice(0);
+	}
+
+	if (!origin.length) {
+		return name;
+	}
+
+	origin.pop();
+	origin.push(name);
+	
+	return origin.join('.');
 });