Merge pull request #55 from oskar-gmerek/input-improvements

Input improvements

Author: oskar-gmerek

src/lib/components/select/Select.svelte

@@ -7,6 +7,7 @@
 	export let description = '';
 	export let containerStyle = '';
 	export let placeholder = '';
+	export let disabled = false;
 	type Options =
 		| {
 				label: string;
@@ -25,13 +26,13 @@
 	<label for={id}>{label}</label>
 {/if}
 {#if description}
-	<div class="fg:white/.6">Description of input</div>
+	<div class="fg:white/.6">{description}</div>
 {/if}
 <div class={` bg:rgb(8,19,33) flex align-items:center mt:10 mb:30 ` + ' ' + containerStyle}>
 	<select {id} class={className + ' ' + mcss} {name} bind:value on:change {placeholder}>
 		{#if options}
 			{#each options as option}
-				<option value={option.value}>{option.label}</option>
+				<option value={option.value} {disabled}>{option.label}</option>
 			{/each}
 		{:else}
 			<slot name="options" />

src/lib/components/textInput/TextInput.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import randomString from '$lib/utils/randomString';
+	import { slide } from 'svelte/transition';
 	export let value = '';
 	export let name = '';
 	export { className as class };
 	export let label = '';
 	export let description = '';
 	export let placeholder = '';
-	let className =
-		'w:full h:full p:16 outline:4|solid|rgb(8,19,33) outline:4|solid|orange:focus ~outline|0.5s r:7 ';
+	export let error = '';
+	export let type = 'text';
+	let className = `w:full h:full p:16 outline:4|solid|rgb(8,19,33) outline:4|solid|orange:focus ~outline|0.5s r:7`;
 
 	const id = randomString(7);
 </script>
@@ -18,6 +20,37 @@
 {#if description}
 	<div class="fg:white/.6">{description}</div>
 {/if}
-<div class="bg:rgb(8,19,33) mt:10 mb:30">
-	<input {id} class={className} type="text" {name} bind:value {placeholder} />
+<div class="mb:30">
+	<div
+		class={`bg:rgb(8,19,33) mt:10  ${
+			error ? 'bg:red-20 outline:4|solid|red>input mb:10' : 'mb:30'
+		}`}
+	>
+		{#if type === 'email'}
+			<input
+				{id}
+				class={className}
+				type="email"
+				{name}
+				bind:value
+				{placeholder}
+				on:change={() => (error = '')}
+			/>
+		{:else}
+			<input
+				{id}
+				class={className}
+				type="text"
+				{name}
+				bind:value
+				{placeholder}
+				on:change={() => (error = '')}
+			/>
+		{/if}
+	</div>
+	{#if error}
+		<div class="fg:red" transition:slide={{ delay: 50, duration: 150, axis: 'y' }}>
+			{error}
+		</div>
+	{/if}
 </div>

src/lib/components/textarea/TextArea.svelte

@@ -7,6 +7,7 @@
 	export let maxlength = 5000;
 	export let label = '';
 	export let description = '';
+	export let placeholder = '';
 	export { className as class };
 
 	const id = randomString(7);
@@ -39,6 +40,7 @@
 		bind:this={textarea}
 		bind:value
 		on:input={textareaResize}
+		{placeholder}
 	/>
 	{#if value.length > 0}
 		<div