add some more to the collection 🍪

Input.svelte

@@ -0,0 +1,62 @@
+<!-- 
+    Can be used like this
+    <Input 
+        bind:input={props}
+        {validation}>
+    where props = {
+        id,
+        name,
+        optional,
+        valid,
+        errorMessage,
+    }
+    and where validation = {
+        validate: (ev) => { after blur },
+        validateKeyUp: (ev) => { after keyup, I used it only when valid === false for instant feedback },
+    }
+ -->
+
+<script>
+import { fade } from 'svelte/transition';
+
+export let input;
+export let validation;
+
+const type = input.type || 'text';
+
+const handleInput = (e) => {
+    // in here, you can switch on type and implement
+    // whatever behaviour you need
+    input.value = type.match(/^(number|range)$/)
+        ? +e.target.value
+        : e.target.value;
+};
+</script>
+
+<label for="{input.id}">{input.name}{#if !input.optional}*{/if}</label>
+<input
+    {type}
+    id={input.id}
+    placeholder={input.name}
+    on:input={handleInput}
+    on:blur={validation.validate}
+    on:keyup={validation.validateKeyUp}
+    class:error={input.valid === false}
+    required>
+{#if input.valid === false && !input.optional}
+<label for={input.id} class="error" transition:fade>
+    {@html input.errorMessage}
+</label>
+{/if}
+
+<style>
+input {
+    margin-bottom: 20px;
+    height: 40px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    padding: 10px;
+    width: 100%;
+}
+</style>

Overlay.svelte

@@ -0,0 +1,67 @@
+<!-- 
+    Can be used like this
+    {#if showOverlay}
+	<Overlay
+		on:overlay={handleOverlay}>
+        some html
+    </Overlay>
+    {/if}
+ -->
+
+<script>
+import { createEventDispatcher } from 'svelte';
+import { fly } from 'svelte/transition';
+import svgClose from '../inline-svg/close.svg'; // I used 'rollup-plugin-svg' to inline my svg
+
+const dispatch = createEventDispatcher();
+const overlay = (ev) => {
+    if(!ev.target.classList.contains("js-close")) return;
+    dispatch("overlay", "close");
+};
+</script>
+
+<div
+    class="shadow js-close"
+    on:click={overlay}>
+    <div
+        class="content"
+        transition:fly="{{ y: 200, duration: 600 }}">
+        <button class="js-close" title="close dialog">
+            {@html svgClose}
+        </button>
+        <slot></slot>
+    </div>
+</div>
+
+<style>
+.shadow {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .9);
+}
+
+.content {
+    position: relative;
+    background: #fff;
+    padding: 48px 56px 0;
+    max-width: 730px;
+    margin: 0 auto;
+    height: 100%;
+    overflow-y: auto;
+    z-index: 5;
+}
+.content:after {
+    content: '';
+    display: block;
+    padding-bottom: 56px;
+}
+
+button {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+</style>

README.md

@@ -3,3 +3,7 @@ This is an open source collection for svelte components to use or just get inspi
 
 LIST:
 - Validation Summary
+- Select Element (with error message)
+- Input Element (with error message)
+- ResponseBackground
+- Overlay

ResponsiveBackground.svelte

@@ -0,0 +1,66 @@
+<!-- 
+    Can be used like this
+    <ResponsiveBackground 
+        {images}
+        {fallbackImage}>
+        some optional html
+    </ResponsiveBackground>
+    
+    where images = [
+        { media, type, srcset }
+    ]
+    and where fallbackImage = {
+        src,
+        alt,
+    }
+ -->
+
+<script>
+  export let images;
+  export let fallbackImage;
+  const {src, alt} = fallbackImage;
+
+  let curSrc;
+  const updateBg = ev => {
+    const img = ev.target;
+    var src = typeof img.currentSrc !== "undefined" ? img.currentSrc : img.src;
+    if (curSrc !== src) {
+      curSrc = `url(${src})`;
+    }
+  };
+</script>
+
+<div style="background-image: {curSrc};">
+  <picture>
+    {#each images as {media, srcset, type}}
+		<source
+			{media}
+			{srcset}
+			{type} />
+    {/each}
+    <img
+		on:load={updateBg}
+		{src}
+		{alt} />
+  </picture>
+  <slot></slot>
+</div>
+
+<style>
+  picture,
+  picture img {
+    visibility: hidden;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  div {
+    overflow: hidden;
+    position: relative;
+    display: block;
+    background-position: center;
+    background-size: cover;
+    background-color: #c87f3a;
+  }
+</style>

Select.svelte

@@ -0,0 +1,62 @@
+<!-- 
+    Can be used like this
+    <Select bind:select={props}>
+    where props = {
+        id,
+        name,
+        value,
+        valid: null,
+        options: [{
+            id,
+            name,
+        },
+        ...],
+        errorMessage,
+    }
+ -->
+
+<script>
+import { fade } from 'svelte/transition';
+
+export let select;
+
+$: select.valid = !!select.value.length
+    || (select.valid === null
+        ? null
+        : select.valid);
+</script>
+
+<label for="{select.id}">{select.name}*</label>
+<select
+    name="{select.id}"
+    id="{select.id}"
+    bind:value={select.value}
+    class:error={select.valid === false}
+    required>
+    <option value="" disabled selected>Choose {select.name}...</option>
+    {#each select.options as option}
+        <option value={option.id}>
+            {option.name}
+        </option>
+    {/each}
+</select>
+{#if select.valid === false}
+<label for="{select.id}" class="error" transition:fade>
+    {@html select.errorMessage}
+</label>
+{/if}
+
+<style>
+select{
+    margin-bottom: 20px;
+    height: 40px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    padding: 10px;
+}
+
+option:disabled {
+    display: none;
+}
+</style>