├── .gitignore
├── README.md
├── package.json
├── rollup.config.js
├── src
    ├── actions
    │   └── autoresize.js
    ├── components
    │   ├── Button.svelte
    │   └── Input.svelte
    ├── index.svelte
    └── stores
    │   ├── errors.js
    │   ├── touched.js
    │   └── values.js
└── svelte.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | yarn.lock
4 | package-lock.json
5 | index.js
6 | index.mjs


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-easyforms
 2 | 
 3 | A very opinionated form library for Svelte. Currently only supports inputs and textarea.
 4 | 
 5 | [DEMO](https://svelte.dev/repl/d133210432dc47758674ac6a9233e370?version=3.16.0)
 6 | 
 7 | Usage:
 8 | 
 9 | ```javascript
10 | import Form from "svelte-easyforms";
11 | 
12 | const emailValidator = value =>
13 |   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
14 |     value
15 |   );
16 | 
17 | const inputs = [
18 |   {
19 |     name: "name",
20 |     title: "Who are you ?",
21 |     placeholder: "Name, company, etc..."
22 |   },
23 |   {
24 |     name: "email",
25 |     title: "What's your email?",
26 |     placeholder: "Email...",
27 |     type: "email",
28 |     validator: emailValidator
29 |   },
30 |   {
31 |     name: "message",
32 |     title: "Your message",
33 |     placeholder: "Write your message here...",
34 |     full: true,
35 |     multiline: true
36 |   }
37 | ];
38 | 
39 | const submitForm = e => {
40 |   console.log("submitForm");
41 | };
42 | ```
43 | 
44 | And your HTML:
45 | 
46 | ```javascript
47 | <Form {inputs} buttonText="SEND MESSAGE" on:submit="{submitForm}" reset />
48 | ```
49 | 
50 | Options:
51 | Each input object takes a couple of options
52 | 
53 | - name
54 | - initialValue
55 | - title (shows up above the input)
56 | - placeholder
57 | - type (defaults to "text")
58 | - validator (optional, should return true if the value passes)
59 | - multiline (optional, turns input into textarea)
60 | - full (optional, makes the field span the whole form, instead of half)
61 | - errorMessage (optional, shows up if there is an error)
62 | - textareaHeight (optional, used with multiline, specifies how large the textarea field should be to begin with)
63 | - font (optional, specifies font)
64 | 
65 | The Form itself takes a number of props:
66 | 
67 | - inputs (an array of inputs)
68 | - buttonText (optional)
69 | - reset (optional, makes the resetbutton appear)
70 | - resetText (optional, changes the text on the reset button)
71 | - debug (optional, displays the values, touched and errors objects)
72 | 
73 | ## TODO
74 | 
75 | - [ ] Add custom input functionality
76 | - [ ] Add other types of form elements like radio buttons and checkboxes
77 | - [ ] Add possibility to pass in more than one validator per input
78 | - [ ] Make buttons slottable in order to let consumers pass in their own buttons
79 | - [ ] Make styling more dynamic
80 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-easyforms",
 3 |   "version": "1.0.6",
 4 |   "svelte": "src/index.svelte",
 5 |   "module": "index.mjs",
 6 |   "main": "index.js",
 7 |   "repository": "https://github.com/kevmodrome/svelte-easyforms",
 8 |   "scripts": {
 9 |     "build": "rollup -c",
10 |     "prepublishOnly": "npm run build"
11 |   },
12 |   "devDependencies": {
13 |     "rollup": "^1.11.0",
14 |     "rollup-plugin-node-resolve": "^4.0.0",
15 |     "rollup-plugin-svelte": "^5.0.0",
16 |     "svelte": "^3.16.0",
17 |     "svelte-preprocess": "^3.2.6"
18 |   },
19 |   "keywords": [
20 |     "svelte"
21 |   ],
22 |   "files": [
23 |     "src",
24 |     "index.mjs",
25 |     "index.js"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from "rollup-plugin-svelte";
 2 | import resolve from "rollup-plugin-node-resolve";
 3 | import pkg from "./package.json";
 4 | 
 5 | import sveltePreprocess from "svelte-preprocess";
 6 | 
 7 | const name = pkg.name
 8 |   .replace(/^(@\S+\/)?(svelte-)?(\S+)/, "$3")
 9 |   .replace(/^\w/, m => m.toUpperCase())
10 |   .replace(/-\w/g, m => m[1].toUpperCase());
11 | 
12 | export default {
13 |   input: "src/index.svelte",
14 |   output: [
15 |     { file: pkg.module, format: "es" },
16 |     { file: pkg.main, format: "umd", name }
17 |   ],
18 |   plugins: [svelte({ preprocess: [sveltePreprocess()] }), resolve()]
19 | };
20 | 


--------------------------------------------------------------------------------
/src/actions/autoresize.js:
--------------------------------------------------------------------------------
 1 | export function autoresize(node) {
 2 |   const div = document.createElement("div");
 3 |   div.style.display = "block";
 4 |   div.style.position = "relative";
 5 | 
 6 |   const sizer = document.createElement("div");
 7 |   const style = getComputedStyle(node);
 8 |   Object.assign(sizer.style, {
 9 |     fontFamily: style.fontFamily,
10 |     fontSize: style.fontSize,
11 |     paddingTop: style.paddingTop,
12 |     paddingLeft: style.paddingLeft,
13 |     paddingBottom: style.paddingBottom,
14 |     paddingRight: style.paddingRight,
15 |     borderTopWidth: style.borderTopWidth,
16 |     borderLeftWidth: style.borderLeftWidth,
17 |     borderBottomWidth: style.borderBottomWidth,
18 |     borderRightWidth: style.borderRightWidth,
19 |     borderTopStyle: style.borderTopStyle,
20 |     borderLeftStyle: style.borderLeftStyle,
21 |     borderBottomStyle: style.borderBottomStyle,
22 |     borderRightStyle: style.borderRightStyle,
23 |     lineHeight: style.lineHeight,
24 |     boxSizing: style.boxSizing,
25 |     position: "relative",
26 |     whiteSpace: "pre",
27 |     visibility: "hidden"
28 |   });
29 | 
30 |   Object.assign(node.style, {
31 |     position: "absolute",
32 |     left: 0,
33 |     top: 0,
34 |     width: "100%",
35 |     height: "100%",
36 |     resize: "none"
37 |   });
38 | 
39 |   div.appendChild(sizer);
40 |   node.parentNode.insertBefore(div, node);
41 |   div.appendChild(node);
42 | 
43 |   function handleChange() {
44 |     sizer.innerHTML = node.value + " ";
45 |   }
46 | 
47 |   handleChange();
48 |   node.addEventListener("input", handleChange);
49 | 
50 |   return {
51 |     destroy() {
52 |       node.removeEventListener("input", handleChange);
53 |     }
54 |   };
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/Button.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let primary;
 3 |   export let primaryOutline;
 4 |   export let big;
 5 |   export let click;
 6 | </script>
 7 | 
 8 | <style>
 9 |   button {
10 |     cursor: pointer;
11 |     border: none;
12 |     border-radius: 10px;
13 |     padding: 10px 20px;
14 |   }
15 |   .big {
16 |     padding: 20px 35px;
17 |   }
18 |   .primary {
19 |     background: #d62246;
20 |     border: solid #d62246 2px;
21 |     color: white;
22 |   }
23 |   .primary:hover {
24 |     background: #b41a39;
25 |     border: solid #b41a39 2px;
26 |   }
27 |   .primaryOutline {
28 |     background: none;
29 |     border: solid #d62246 2px;
30 |     color: #d62246;
31 |   }
32 |   .primaryOutline:hover {
33 |     color: #b41a39;
34 |     border: solid #b41a39 2px;
35 |   }
36 | </style>
37 | 
38 | <button
39 |   on:click|preventDefault={click}
40 |   class:primary
41 |   class:primaryOutline
42 |   class:big>
43 |   <slot>Default</slot>
44 | </button>
45 | 


--------------------------------------------------------------------------------
/src/components/Input.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { onMount } from "svelte";
  3 |   import { values } from "../stores/values.js";
  4 |   import { errors } from "../stores/errors.js";
  5 |   import { touched } from "../stores/touched.js";
  6 |   import { autoresize } from "../actions/autoresize.js";
  7 | 
  8 |   export let placeholder = "";
  9 |   export let full = false;
 10 |   export let name = "";
 11 |   export let type = "text";
 12 |   export let initialValue = "";
 13 |   export let title = "";
 14 |   export let validator = () => true;
 15 |   export let errorMessage = "";
 16 |   export let multiline;
 17 |   export let textareaHeight = "150px";
 18 |   export let font = "Verdana";
 19 | 
 20 |   onMount(() => {
 21 |     values.updateValue(name, initialValue);
 22 |     errors.updateError(name, !validator(initialValue));
 23 |     touched.updateTouched(name, false);
 24 |   });
 25 | 
 26 |   function onChange(event) {
 27 |     values.updateValue(name, event.target.value);
 28 |     errors.updateError(name, !validator(event.target.value));
 29 |   }
 30 |   function onBlur(event) {
 31 |     values.updateValue(name, event.target.value);
 32 |     touched.updateTouched(name);
 33 |   }
 34 | 
 35 |   $: errors.updateError(name, !validator($values[name]));
 36 | </script>
 37 | 
 38 | <style>
 39 |   label {
 40 |     display: grid;
 41 |     grid-gap: 5px;
 42 |     grid-template-columns: 1fr;
 43 |   }
 44 |   input,
 45 |   textarea {
 46 |     box-sizing: border-box;
 47 |     border: 4px solid #cdd7d6;
 48 |     border-radius: 10px;
 49 |     outline: none;
 50 |     font-size: 15px;
 51 |     padding: 15px;
 52 |   }
 53 |   input::placeholder,
 54 |   textarea::placeholder {
 55 |     font-style: bold;
 56 |     color: rgba(0, 0, 0, 0.4);
 57 |   }
 58 |   input:focus,
 59 |   textarea:focus {
 60 |     border: 4px solid #140f2d;
 61 |   }
 62 |   .full {
 63 |     grid-column: -1 / 1;
 64 |   }
 65 |   .error {
 66 |     border: 4px solid red;
 67 |   }
 68 |   .error-container {
 69 |     font-size: 10px;
 70 |     color: red;
 71 |   }
 72 | </style>
 73 | 
 74 | <label class:full style="font-family: {font}">
 75 |   {title}
 76 |   {#if multiline}
 77 |     <div style="min-height: {textareaHeight}">
 78 |       <textarea
 79 |         style="min-height: {textareaHeight}; font-family: {font}"
 80 |         on:keyup={onChange}
 81 |         on:change={onChange}
 82 |         on:blur={onBlur}
 83 |         value={$values[name] || initialValue}
 84 |         class:error={$errors[name] && $touched[name]}
 85 |         {name}
 86 |         {placeholder}
 87 |         use:autoresize />
 88 |     </div>
 89 |   {:else}
 90 |     <input
 91 |       style="font-family: {font}"
 92 |       {type}
 93 |       {name}
 94 |       {placeholder}
 95 |       value={$values[name] || initialValue}
 96 |       on:keyup={onChange}
 97 |       on:change={onChange}
 98 |       on:blur={onBlur}
 99 |       class:error={$errors[name] && $touched[name]} />
100 |   {/if}
101 |   {#if $errors[name] && $touched[name] && errorMessage}
102 |     <div class="error-container">{errorMessage}</div>
103 |   {/if}
104 | </label>
105 | 


--------------------------------------------------------------------------------
/src/index.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { values } from "./stores/values.js";
 3 |   import { errors } from "./stores/errors.js";
 4 |   import { touched } from "./stores/touched.js";
 5 | 
 6 |   import { createEventDispatcher } from "svelte";
 7 |   const dispatch = createEventDispatcher();
 8 |   import Input from "./components/Input.svelte";
 9 |   import Button from "./components/Button.svelte";
10 | 
11 |   export let inputs = [];
12 |   export let buttonText = "SUBMIT";
13 |   export let resetText = "RESET";
14 |   export let reset;
15 |   export let font = "Verdana";
16 | 
17 |   export let debug;
18 | 
19 |   const handleSubmit = () => {
20 |     const numberOfErrors = Object.keys($errors).filter(key => $errors[key]);
21 |     inputs.forEach(input => {
22 |       touched.updateTouched(input.name, true);
23 |     });
24 | 
25 |     if (numberOfErrors.length === 0) {
26 |       console.log("SUBMITTING!");
27 |       resetForm();
28 |     } else {
29 |       console.log("Not submitting!");
30 |     }
31 |   };
32 | 
33 |   const resetForm = () => {
34 |     inputs.forEach(input => {
35 |       values.updateValue(input.name);
36 |       touched.updateTouched(input.name, false);
37 |     });
38 |   };
39 | </script>
40 | 
41 | <style lang="scss">
42 |   form {
43 |     display: grid;
44 |     grid-gap: 15px;
45 |     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
46 |   }
47 |   span {
48 |     font-size: 20px;
49 |     font-weight: bold;
50 |   }
51 |   .button-container {
52 |     margin-top: 10px;
53 |     display: grid;
54 |     grid-gap: 15px;
55 |     grid-column: -1 / 1;
56 |   }
57 | </style>
58 | 
59 | <form style="font-family: {font}">
60 |   {#each inputs as input}
61 |     <Input {...input} {font} />
62 |   {/each}
63 |   <div class="button-container">
64 |     <Button primary click={handleSubmit}>
65 |       <span style="font-family: {font}">{buttonText}</span>
66 |     </Button>
67 |     {#if reset}
68 |       <Button primaryOutline click={resetForm}>
69 |         <span style="font-family: {font}">{resetText}</span>
70 |       </Button>
71 |     {/if}
72 |   </div>
73 | </form>
74 | 
75 | {#if debug}
76 |   <h3>Values</h3>
77 |   <pre>{JSON.stringify($values, null, 2)}</pre>
78 |   <h3>Touched</h3>
79 |   <pre>{JSON.stringify($touched, null, 2)}</pre>
80 |   <h3>Errors</h3>
81 |   <pre>{JSON.stringify($errors, null, 2)}</pre>
82 | {/if}
83 | 


--------------------------------------------------------------------------------
/src/stores/errors.js:
--------------------------------------------------------------------------------
 1 | import { writable } from "svelte/store";
 2 | 
 3 | function createErrors() {
 4 |   const { subscribe, set, update } = writable({});
 5 | 
 6 |   return {
 7 |     subscribe,
 8 |     updateError: (field, value = "") =>
 9 |       update(n => {
10 |         return { ...n, [field]: value };
11 |       }),
12 |     reset: () => set({})
13 |   };
14 | }
15 | 
16 | export const errors = createErrors();
17 | 


--------------------------------------------------------------------------------
/src/stores/touched.js:
--------------------------------------------------------------------------------
 1 | import { writable } from "svelte/store";
 2 | 
 3 | function createTouched() {
 4 |   const { subscribe, set, update } = writable({});
 5 | 
 6 |   return {
 7 |     subscribe,
 8 |     updateTouched: (field, value = true) =>
 9 |       update(n => {
10 |         return { ...n, [field]: value };
11 |       }),
12 |     reset: () => set({})
13 |   };
14 | }
15 | 
16 | export const touched = createTouched();
17 | 


--------------------------------------------------------------------------------
/src/stores/values.js:
--------------------------------------------------------------------------------
 1 | import { writable } from "svelte/store";
 2 | 
 3 | function createValues() {
 4 |   const { subscribe, set, update } = writable({});
 5 | 
 6 |   return {
 7 |     subscribe,
 8 |     updateValue: (field, value = "") =>
 9 |       update(n => {
10 |         return { ...n, [field]: value };
11 |       }),
12 |     reset: () => set({})
13 |   };
14 | }
15 | 
16 | export const values = createValues();
17 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | // svelte.config.js
2 | const sveltePreprocess = require("svelte-preprocess");
3 | 
4 | module.exports = {
5 |   preprocess: sveltePreprocess()
6 | };
7 | 


--------------------------------------------------------------------------------