<InputBlock> Svelte Component: A block to display all necessary elements to an input

*<InputBlock> Svelte Component: A block to display all necessary elements to an input.md

<InputBlock> component

An <InputBlock> is a unit that contains all the necessary elements for a form input element.

• The label (with indication whether it's a required field)
• The input component itself
• The Explanation (short note or explanantion on the what needs to be inputted)

It also handles the validation (as given by a parameter) and displaying an error message if there's one.

You can see the usage and example at: https://svelte.technology/repl?version=2.15.3&gist=79d5db3902a54f127072a1becfcdea39

Only the InputBlock.html is the component. All the other things are just examples

App.html

<div class="section">
	{#each fields as field}
	<InputBlock class="fields" options={field} bind:value=values[field.field] />
	{/each}
</div>
<hr/>
First Name = {values.firstName}<br/>
Last Name = {values.lastName}<br/>
Email = {values.email}<br/>
Phone = {values.phone}<br/>

<script>
	import Fields from "./fields.js"
	
  export default {
    components: {
      InputBlock : "./InputBlock.html"
    },
		data(){return {
			values: {
				firstName: "John",
				lastName: "Smith",
				email:"john@mailinator.com",
				phone:"800-123-4567"
			},
			fields: Fields,
		}}
  }
</script>

<style>
	.section {
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-start;
	}
	:global(.fields) {
		width:45%;
		min-width:10rem;
		max-width:15rem;
	}
</style>

data.json5

{}

fields.js

var validators= 
{
	nonEmpty: function(val){
		if(val.length>0) return ""
		return "This field cannot be empty"
	},
	goodEmail: function(val){
		if(val.search(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/i)<0) return "This is not a valid email"
		return ""
	}
}
	
export default [
	{
		required: true,
		field: "firstName",
		label: "First Name",
		explain: "Type in your first name, eg: John",
		placeholder: "given name",
		valid: validators.nonEmpty
	},
	{
		required: true,
		field: "lastName",
		label: "Last Name",
		explain: "Type in your last name, eg: Smith",
		placeholder: "Family name"
	},
	{
		required: true,
		field: "email",
		label: "Email Address",
		explain: "Valid email address is needed",
		placeholder: "email",
		valid: validators.goodEmail
	},
	{
		required: false,
		field: "phone",
		label: "Phone Number",
		explain: "Please provide the best number to reach you",
		placeholder: "your phone",
		valid: null
	},
]

	

InputBlock.html

<div class="inputblock {class}" id={id}>
	<span id=label>{options.label}{#if options.required}<span id=star>*</span>{/if}</span>
	<span id=inp class={err ? "inp-err" : ""}><input placeholder={options.placeholder||""} name={options.field} bind:value=value/></span>
	{#if err}<span id=error>{err}</span>
	{:else}<span id=explain>{options.explain}</span>{/if}
</div>

<script>
  export default {
		data(){return {
			class: "",
			id: "",
			err:""
		}},
		onupdate({ changed, current, previous }) {
			if(changed.value){
				if(current.options.valid) {
						this.set({err:current.options.valid(current.value)})
				}
			}
			// this fires after oncreate, and after every state change
			// once the DOM is synchronised with the data
		},
	}
</script>

<style>
	.inputblock {
		border:1px solid black;
		margin:0.2em;
		padding:0.2em;
		box-shadow: 2px 2px 2px #00000080;
		background: #bef;
		display:inline-block;
	}
	#explain {
		font-size: 0.8rem;
	}
	#error {
		font-size: 0.8rem;
		color:red;
	}
	#inp > * {
		margin:0;
		width: 100%
	}
	#star {
		color: red;
		font-size: 0.8em;
		vertical-align: top;
	}
	.inp-err {
		outline: 1px solid red;
	}
</style>