From 9d0148e91cf6f092a4878a4d58b595b1dd44fff1 Mon Sep 17 00:00:00 2001
From: Vagelis Papas <papas@source.gr>
Date: Tue, 30 Jun 2020 23:57:19 +0300
Subject: [PATCH 1/3] Fixed error/message inconsistencies. Added validator
 attribute.

---
 src/Textfield.svelte | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/Textfield.svelte b/src/Textfield.svelte
index 56fa03f..3f3cbae 100644
--- a/src/Textfield.svelte
+++ b/src/Textfield.svelte
@@ -3,6 +3,7 @@
 	class:filled
 	class:dirty
 	class:disabled
+	class:invalid
 	{style}
 	{title}
 >
@@ -11,7 +12,7 @@
 	<div class="focus-ring" />
 	<div class="label">
 		{label}
-		{#if required && !value.length}
+		{#if required}
 			<span class="required">*</span>
 		{/if}
 	</div>
@@ -21,9 +22,11 @@
 	{/if}
 
 	{#if !!message || !!error}
-		<div class="help" class:persist={messagePersist} class:error>
-			<div class="message">{error || message}</div>
-		</div>
+		{#if invalid}
+			<div class="help error">{error}{error ? '' : message}</div>
+		{:else}
+			<div class:persist={ !!messagePersist } class="help message">{message}</div>
+		{/if}
 	{/if}
 </div>
 
@@ -46,8 +49,9 @@
 		messagePersist,
 		message,
 		error,
+		validator
 	};
-
+	let defaultValidator = v => (""+v).trim().length > 0;
 	let value = '';
 	let disabled = false;
 	let required = false;
@@ -60,6 +64,8 @@
 	let messagePersist = false;
 	let message = '';
 	let error = '';
+	let invalid = false;
+	let validator = required ? defaultValidator : null;
 
 	let placeholder;
 
@@ -82,12 +88,18 @@
 
 		!other.readonly && delete other.readonly;
 		!other.disabled && delete other.disabled;
+		other.required && validator == null && (validator = defaultValidator);
+		!other.required && validator == defaultValidator && (validator = null);
+		!other.required && delete other.required;
+
 		delete other.class;
 		other.type = allowedTypes.indexOf(other.type) < 0 ? 'text' : other.type;
 		placeholder = other.placeholder;
 		attrs = other;
 	}
 
+	$: invalid =  (validator && value.length) ? !validator(value) : false;
+
 	$: dirty =
 		(typeof value === 'string' && value.length > 0) ||
 		typeof value === 'number' ||
@@ -135,6 +147,7 @@
 		left: 0.125em;
 		color: #ff5252;
 	}
+
 	.input {
 		box-sizing: border-box;
 		font: inherit;
@@ -170,6 +183,7 @@
 	.input:required {
 		box-shadow: none;
 	}
+	.invalid input,
 	.input:invalid {
 		box-shadow: none;
 	}
@@ -263,17 +277,22 @@
 		color: rgba(0, 0, 0, 0.3755);
 		/* postcss-custom-properties: ignore next */
 		color: var(--label, rgba(0, 0, 0, 0.3755));
-		opacity: 0;
+		opacity: 1;
 
 		overflow: hidden;
 		max-width: 90%;
 		white-space: nowrap;
 	}
-	.persist,
-	.error,
-	.input:focus ~ .help {
+
+	.help.message {
+		opacity: 0;
+	}
+
+	input:focus ~ .help.message,
+	.help.message.persist {
 		opacity: 1;
 	}
+
 	.error {
 		color: #ff5252;
 	}

From de1b42532028b7c6c7a5feebd60a80079db538fe Mon Sep 17 00:00:00 2001
From: Vagelis Papas <papas@source.gr>
Date: Tue, 30 Jun 2020 23:57:48 +0300
Subject: [PATCH 2/3] Examples / documentation

---
 example/src/pages/textfield/Textfield.svelte | 16 ++++++++++++++++
 example/src/pages/textfield/code.md          | 19 ++++++++++++++++++-
 example/src/pages/textfield/props.js         |  6 ++++++
 package.json                                 |  2 +-
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/example/src/pages/textfield/Textfield.svelte b/example/src/pages/textfield/Textfield.svelte
index 8f16a79..89c7a25 100644
--- a/example/src/pages/textfield/Textfield.svelte
+++ b/example/src/pages/textfield/Textfield.svelte
@@ -1,5 +1,17 @@
 <DemoPanel>
 	<!-- NOTE: for 'outlined' Textfield parent element must set the background -->
+	<div style="flex: 1;margin: 0 8px;background: #eee;background: var(--bg-panel);">
+		<Textfield
+			required
+			autocomplete="off"
+			label="Secret word"
+			message="Please provide your Secret Word."
+			messagePersist
+			error="The secret word should start with SW !"
+			validator="{ startsWithSW }"
+		/>
+	</div>
+
 	<div style="flex: 1;margin: 0 8px;background: #eee;background: var(--bg-panel);">
 		<Textfield
 			bind:value
@@ -88,6 +100,10 @@
 	let readonly = false;
 	let disabled = false;
 
+	const startsWithSW = text => {
+		return text.startsWith('SW');
+	};
+
 	let type = 'default';
 
 	$: outlined = type === 'outlined';
diff --git a/example/src/pages/textfield/code.md b/example/src/pages/textfield/code.md
index f3620e3..77bfd67 100644
--- a/example/src/pages/textfield/code.md
+++ b/example/src/pages/textfield/code.md
@@ -1,4 +1,15 @@
 ```xml
+<Textfield
+	required
+	autocomplete="off"
+	label="Secret word"
+	bind:value="{ secretWord }"
+	message="Please provide your Secret Word."
+	error="The secret word should start with SW !"
+	validator="{ startsWithSW }"
+/>
+
+
 <Textfield
 	autocomplete="off"
 	label="Label"
@@ -10,6 +21,12 @@
 <script>
 	import { Textfield } from 'svelte-mui';
 
+	const startsWithSW = text => {
+		return text.startsWith('SW');
+	}
+
+
 	let value = '';
+	let secretWord = '';
 </script>
-```
+```
\ No newline at end of file
diff --git a/example/src/pages/textfield/props.js b/example/src/pages/textfield/props.js
index be5da32..976d7bf 100644
--- a/example/src/pages/textfield/props.js
+++ b/example/src/pages/textfield/props.js
@@ -60,4 +60,10 @@ export default [
 		type: '[number, string]',
 		desc: 'Input value',
 	},
+	{
+		name: 'validator',
+		def: "null (*)",
+		type: 'Function',
+		desc: "A callback to check the value of the Textfield against. It takes a single argument, the value of the Textfield, and should return 'true' or 'false'.<br><br>When false is returned, the Textfield is marked as invalid and displays the '*' sign and the 'error' string if there is one. When no 'error' is provided the 'help' is displayed using the error color..<br><br> When 'required' is set and no validator is given, a default callback is attached that checks if the length of the trimmed string is bigger than 0.<br><br><br><i>Note:'required' must be set in order for the validator to be available</i>",
+	},
 ];
diff --git a/package.json b/package.json
index ded5fd2..147f3ad 100644
--- a/package.json
+++ b/package.json
@@ -45,4 +45,4 @@
 		"index.mjs",
 		"index.js"
 	]
-}
\ No newline at end of file
+}

From f6104934b848e43df29e1e339c6563e772678364 Mon Sep 17 00:00:00 2001
From: Vagelis Papas <papas@source.gr>
Date: Wed, 1 Jul 2020 01:45:17 +0300
Subject: [PATCH 3/3] added export for invalid property

---
 src/Textfield.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Textfield.svelte b/src/Textfield.svelte
index 3f3cbae..b7df546 100644
--- a/src/Textfield.svelte
+++ b/src/Textfield.svelte
@@ -22,7 +22,7 @@
 	{/if}
 
 	{#if !!message || !!error}
-		{#if invalid}
+		{#if hasError}
 			<div class="help error">{error}{error ? '' : message}</div>
 		{:else}
 			<div class:persist={ !!messagePersist } class="help message">{message}</div>
@@ -49,7 +49,8 @@
 		messagePersist,
 		message,
 		error,
-		validator
+		validator,
+        invalid
 	};
 	let defaultValidator = v => (""+v).trim().length > 0;
 	let value = '';
@@ -66,6 +67,7 @@
 	let error = '';
 	let invalid = false;
 	let validator = required ? defaultValidator : null;
+	let hasError = false;
 
 	let placeholder;
 
@@ -98,7 +100,10 @@
 		attrs = other;
 	}
 
-	$: invalid =  (validator && value.length) ? !validator(value) : false;
+	$: {
+		invalid = validator ? !validator(value) : false;
+		hasError = required ? (invalid && value.length) : invalid;
+	}
 
 	$: dirty =
 		(typeof value === 'string' && value.length > 0) ||