Add error field

src/components/FancyInput.vue

@@ -1,5 +1,11 @@
 <template>
 	<div class='fancy_input'>
+		<div
+			class='fancy_input__error'
+			:class='{"fancy_input__error--show": error && error.message.length}'
+		>
+			{{(error || {}).message}}
+		</div>
 		<div
 			class='fancy_input__placeholder'
 			:class='{"fancy_input__placeholder--active": active || value.length}'
@@ -21,7 +27,7 @@
 <script>
 	export default {
 		name: 'FancyInput',
-		props: ['value', 'placeholder', 'width', 'type'],
+		props: ['value', 'placeholder', 'width', 'type', 'error'],
 		data () {
 			return {
 				active: false
@@ -64,5 +70,40 @@
 				transition: top 0.2s, font-size 0.2s;
 			}
 		}
+
+		@at-root #{&}__error {
+			position: absolute;
+			background-color: #ffeff1;
+			border: 0.125rem solid #D32F2F;
+			max-width: 100%;
+			font-size: 0.9rem;
+			padding: 0.1rem 0.25rem;
+			top: -1.75rem;
+			right: 0;
+
+			opacity: 0;
+			pointer-events: 0;
+			margin-top: -1rem;
+			transition: opacity 0.2s, margin-top 0.2s;
+
+			@at-root #{&}--show {
+				opacity: 1;
+				pointer-events: all;
+				margin-top: 0;
+				transition: opacity 0.2s, margin-top 0.2s;
+			}
+
+			&::after {
+				content: '';
+				position: relative;
+				width: 0;
+				height: 0;
+				display: inline-block;
+				bottom: -0.65rem;
+				border-left: 0.3rem solid transparent;
+				border-right: 0.3rem solid transparent;
+				border-top: 0.3rem solid #D32F2F;
+			}
+		}
 	}
 </style>

src/components/FancyTextarea.vue

@@ -1,5 +1,11 @@
 <template>
 	<div class='fancy_textarea'>
+		<div
+			class='fancy_textarea__error'
+			:class='{"fancy_textarea__error--show": error && error.message.length}'
+		>
+			{{(error || {}).message}}
+		</div>
 		<div
 			class='fancy_textarea__placeholder'
 			:class='{"fancy_textarea__placeholder--active": active || value.length}'
@@ -21,7 +27,7 @@
 <script>
 	export default {
 		name: 'FancyTextarea',
-		props: ['value', 'placeholder', 'width'],
+		props: ['value', 'placeholder', 'width', 'error'],
 		data () {
 			return {
 				active: false
@@ -68,5 +74,40 @@
 				transition: top 0.2s, font-size 0.2s;
 			}
 		}
+
+		@at-root #{&}__error {
+			position: absolute;
+			background-color: #ffeff1;
+			border: 0.125rem solid #D32F2F;
+			max-width: 100%;
+			font-size: 0.9rem;
+			padding: 0.1rem 0.25rem;
+			top: -1.75rem;
+			right: 0;
+
+			opacity: 0;
+			pointer-events: 0;
+			margin-top: -1rem;
+			transition: opacity 0.2s, margin-top 0.2s;
+
+			@at-root #{&}--show {
+				opacity: 1;
+				pointer-events: all;
+				margin-top: 0;
+				transition: opacity 0.2s, margin-top 0.2s;
+			}
+
+			&::after {
+				content: '';
+				position: relative;
+				width: 0;
+				height: 0;
+				display: inline-block;
+				bottom: -0.65rem;
+				border-left: 0.3rem solid transparent;
+				border-right: 0.3rem solid transparent;
+				border-top: 0.3rem solid #D32F2F;
+			}
+		}
 	}
 </style>