lacikawiz · November 10, 2018 14:33
diff --git a/*<InputBlock> Svelte Component: A block to display all necessary elements to an input.md b/*<InputBlock> Svelte Component: A block to display all necessary elements to an input.md
diff --git a/App.html b/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:"[email protected]",
 				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>
diff --git a/data.json5 b/data.json5
 {}
diff --git a/fields.js b/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
 	},
 ]

 	
diff --git a/InputBlock.html b/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>
	<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:"[email protected]",
	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>
	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
	},
	]
	<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>