├── .gitignore
├── src
    ├── index.js
    ├── tests
    │   ├── utils
    │   │   ├── testAction.js
    │   │   └── actionWithUpdate.js
    │   ├── TestWrapper.svelte
    │   └── Form.spec.js
    ├── selectTextOnFocus.js
    ├── Form.svelte
    ├── actions
    │   ├── actions.js
    │   └── form
    │   │   └── getValues.js
    └── utils
    │   └── serialize.js
├── .npmignore
├── .travis.yml
├── .babelrc
├── jest.config.js
├── CHANGELOG.md
├── rollup.config.js
├── package.json
├── README.md
└── logo.svg


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist/
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as default } from './Form.svelte';
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .babelrc
2 | jest.config.js
3 | **__tests__**
4 | .travis.yml


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js: "10"
3 | install: npm install
4 | script: npm run test


--------------------------------------------------------------------------------
/src/tests/utils/testAction.js:
--------------------------------------------------------------------------------
1 | export function testAction(node, options = "blue") {
2 |   node.parentNode.style.setProperty('background', options)
3 | }


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         "targets": {
 7 |           "node": "current"
 8 |         }
 9 |       }
10 |     ]
11 |   ]
12 | }


--------------------------------------------------------------------------------
/src/tests/utils/actionWithUpdate.js:
--------------------------------------------------------------------------------
1 | export function actionWithUpdate(node, options = "blue") {
2 |   node.parentNode.style.setProperty('background', options)
3 | 
4 |   return {
5 |     update(options) {
6 |       node.parentNode.style.setProperty('background', options)
7 |     }
8 |   }
9 | }


--------------------------------------------------------------------------------
/src/selectTextOnFocus.js:
--------------------------------------------------------------------------------
 1 | export function selectTextOnFocus(node) {
 2 | 
 3 |   const handleFocus = event => {
 4 |     node && typeof node.select === 'function' && node.select()
 5 |   }
 6 | 
 7 |   node.addEventListener('focus', handleFocus)
 8 | 
 9 |   return {
10 |     destroy() {
11 |       node.removeEventListener('focus', handleFocus)
12 |     }
13 |   }
14 | }


--------------------------------------------------------------------------------
/src/Form.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { getValues } from "./actions/form/getValues.js";
 3 |   import { useActions } from "./actions/actions.js";
 4 |   export let values = undefined;
 5 | 
 6 |   export let actions = [];
 7 | </script>
 8 | 
 9 | <form
10 |   on:update={({ detail }) => (values = detail)}
11 |   use:getValues={values}
12 |   use:useActions={actions}
13 |   on:submit>
14 |   <slot />
15 | </form>
16 | 


--------------------------------------------------------------------------------
/src/actions/actions.js:
--------------------------------------------------------------------------------
 1 | export function useActions(node, actions = []) {
 2 |   let cleanUpFunctions = []
 3 | 
 4 |   // Apply each action
 5 |   actions.forEach(([action, options]) => {
 6 | 
 7 |     const { destroy } = action(node, options) || {}; 
 8 |     destroy && cleanupFunction.push(destroy);
 9 |   })
10 | 
11 |   return {
12 |     destroy() {
13 |       cleanUpFunctions.forEach(destroy => destroy())
14 |     }
15 |   };
16 | }
17 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | // For a detailed explanation regarding each configuration property, visit:
 2 | // https://jestjs.io/docs/en/configuration.html
 3 | 
 4 | module.exports = {
 5 |   transform: {
 6 |     "^.+\\.js$": "babel-jest",
 7 |     "^.+\\.svelte$": "svelte-jester"
 8 |   },
 9 |   moduleFileExtensions: [
10 |     'js',
11 |     'svelte'
12 |   ],
13 |   setupFilesAfterEnv: [
14 |     '@testing-library/jest-dom/extend-expect'
15 |   ]
16 | };


--------------------------------------------------------------------------------
/src/tests/TestWrapper.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Form from "../Form.svelte";
 3 |   export let html = "";
 4 |   export let input = {};
 5 |   export let actions = undefined;
 6 | 
 7 |   let values;
 8 | 
 9 |   function handleClick() {
10 |     values = { ...input };
11 |   }
12 | </script>
13 | 
14 | <Form bind:values {actions}>
15 |   {@html html}
16 | </Form>
17 | 
18 | <pre data-testid="values">{JSON.stringify(values)}</pre>
19 | 
20 | <button on:click={handleClick} data-testid="b1">Click Me</button>
21 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## [Unreleased]
 2 | 
 3 | ## [0.7.0] - 2020-05-20
 4 | 
 5 | ### New Features
 6 | 
 7 | - onSubmit event is now forwarded to the parent.
 8 | - Switched to another mode of getting the input nodes. 13% speed increase.
 9 | 
10 | ## [0.6.0] - 2020-05-06
11 | 
12 | ### New Features
13 | 
14 | - Now possible to supply an array of actions to the `Form` component.
15 | 
16 | ## [0.5.1] - 2020-05-06
17 | 
18 | ### Fixed
19 | 
20 | - Fixes a multiple select bug that would deselect things after trying to select more than 2 items.


--------------------------------------------------------------------------------
/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 | const name = pkg.name
 6 | 	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
 7 | 	.replace(/^\w/, m => m.toUpperCase())
 8 | 	.replace(/-\w/g, m => m[1].toUpperCase());
 9 | 
10 | export default {
11 | 	input: 'src/index.js',
12 | 	output: [
13 | 		{ file: pkg.module, 'format': 'es' },
14 | 		{ file: pkg.main, 'format': 'umd', name }
15 | 	],
16 | 	plugins: [
17 | 		svelte(),
18 | 		resolve()
19 | 	]
20 | };
21 | 


--------------------------------------------------------------------------------
/src/actions/form/getValues.js:
--------------------------------------------------------------------------------
 1 | import { serialize, deserialize } from '../../utils/serialize'
 2 | 
 3 | export function getValues(node) {
 4 |   let initialUpdateDone = 0
 5 | 
 6 |   const inputs = [...node.getElementsByTagName('input')]
 7 | 
 8 |   inputs.forEach(el => {
 9 |     el.oninput = node.onchange
10 |   })
11 | 
12 |   node.addEventListener('input', handleUpdate)
13 | 
14 |   function handleUpdate() {
15 |     node.dispatchEvent(new CustomEvent('update', {
16 |       detail: { ...serialize(node) }
17 |     }));
18 |   }
19 | 
20 |   handleUpdate()
21 | 
22 |   return {
23 |     update(values) {
24 |       if (initialUpdateDone === 2) {
25 |         deserialize(node, values)
26 |       }
27 |       else {
28 |         initialUpdateDone += 1;
29 |       }
30 |     },
31 |     destroy() {
32 |       node.removeEventListener('input', handleUpdate)
33 |     }
34 |   };
35 | }
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@svelteschool/svelte-forms",
 3 |   "description": "A simple form component that doesn't care about what you put in it. It just works.",
 4 |   "version": "0.7.0",
 5 |   "author": {
 6 |     "name": "Svelte School",
 7 |     "email": "svelteschool@kevmodro.me"
 8 |   },
 9 |   "svelte": "src/index.js",
10 |   "module": "dist/index.mjs",
11 |   "main": "dist/index.js",
12 |   "scripts": {
13 |     "build": "rollup -c",
14 |     "test": "jest src",
15 |     "release": "np --no-yarn"
16 |   },
17 |   "devDependencies": {
18 |     "@babel/core": "^7.9.0",
19 |     "@babel/preset-env": "^7.9.0",
20 |     "@rollup/plugin-node-resolve": "^6.0.0",
21 |     "@testing-library/jest-dom": "^5.3.0",
22 |     "@testing-library/svelte": "^3.0.0",
23 |     "@testing-library/user-event": "^10.0.1",
24 |     "babel-jest": "^25.2.6",
25 |     "husky": "^4.2.3",
26 |     "jest": "^25.2.6",
27 |     "np": "^6.2.0",
28 |     "rollup": "^1.20.0",
29 |     "rollup-plugin-svelte": "^5.0.0",
30 |     "svelte": "^3.0.0",
31 |     "svelte-jester": "^1.0.5"
32 |   },
33 |   "husky": {
34 |     "hooks": {
35 |       "pre-commit": "npm test"
36 |     }
37 |   },
38 |   "keywords": [
39 |     "svelte",
40 |     "forms",
41 |     "svelte-forms",
42 |     "svelte-component"
43 |   ],
44 |   "files": [
45 |     "src",
46 |     "dist"
47 |   ],
48 |   "repository": {
49 |     "type": "git",
50 |     "url": "git+https://github.com/svelteschool/svelte-forms.git"
51 |   },
52 |   "homepage": "https://github.com/svelteschool/svelte-forms/"
53 | }


--------------------------------------------------------------------------------
/src/utils/serialize.js:
--------------------------------------------------------------------------------
 1 | export function serialize(form) {
 2 |   const response = {};
 3 | 
 4 |   [...form.elements].forEach(function elements(input, _index) {
 5 |     // I know this "switch (true)" isn't beautiful, but it works!!!
 6 |     switch (true) {
 7 |       case !input.name:
 8 |       case input.disabled:
 9 |       case /(file|reset|submit|button)/i.test(input.type):
10 |         break;
11 |       case /(select-multiple)/i.test(input.type):
12 |         response[input.name] = [];
13 |         [...input.options].forEach(function options(option, _selectIndex) {
14 |           if (option.selected) {
15 |             response[input.name].push(option.value);
16 |           }
17 |         });
18 |         break;
19 |       case /(radio)/i.test(input.type):
20 |         if (input.checked) {
21 |           response[input.name] = input.value;
22 |         }
23 |         break;
24 |       case /(checkbox)/i.test(input.type):
25 |         if (input.checked) {
26 |           response[input.name] = [...(response[input.name] || []), input.value];
27 |         }
28 |         break;
29 |       default:
30 |         if (input.value) {
31 |           response[input.name] = input.value;
32 |         }
33 |         break;
34 |     }
35 |   });
36 |   return response;
37 | }
38 | 
39 | export function deserialize(form, values) {
40 |   [...form.elements].forEach(function elements(input, _index) {
41 |     // I know this "switch (true)" isn't beautiful, but it works!!!
42 |     switch (true) {
43 |       case !input.name:
44 |       case input.disabled:
45 |       case /(file|reset|submit|button)/i.test(input.type):
46 |         break;
47 |       case /(select-multiple)/i.test(input.type):
48 |         [...input.options].forEach(function options(option, _selectIndex) {
49 |           option.selected =
50 |             values[input.name] && values[input.name].includes(option.value);
51 |         });
52 |         break;
53 |       case /(radio)/i.test(input.type):
54 |         input.checked =
55 |           values[input.name] && values[input.name] === input.value;
56 |         break;
57 |       case /(checkbox)/i.test(input.type):
58 |         input.checked =
59 |           values[input.name] && values[input.name].includes(input.value);
60 |         break;
61 |       default:
62 |         input.value = values[input.name] || "";
63 |         break;
64 |     }
65 |   });
66 | }
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center" margin="0 auto 20px">
  2 |   <div align="center">
  3 |     <img src="logo.svg" alt="svelte-forms" height="120" />
  4 |   </div>
  5 |   <a href='https://travis-ci.com/github/svelteschool/svelte-forms'>
  6 |       <img src="https://travis-ci.com/svelteschool/svelte-forms.svg?branch=master" alt="Travis Badge" />
  7 |   </a>
  8 |   <a href='https://www.npmjs.com/package/@svelteschool/svelte-forms'>
  9 |       <img src="https://img.shields.io/npm/dt/@svelteschool/svelte-forms" alt="NPM Downloads Badge" />
 10 |   </a>
 11 | </div>
 12 | 
 13 | A no-fuss [Svelte](https://svelte.dev/) form component that just works.
 14 | 
 15 |   - **Plug'n'Play**. Input elements in, values out.
 16 |   - Works just like a normal form. Except it does all the tedious work for you.
 17 |   - **Extendable**. Work with most inputs and custom input components out of the box.
 18 |   - **Two-Way Binding**. Svelte-forms is two-way bound by default. Change a value in your object, and it changes in your inputs.
 19 |   - ~~**A toolbox of actions** to apply to your elements: **Validate**, **FocusOnSelect**, **Numbers**, **TextareaAutoRezie**, and many more.~~ (Soon!)
 20 | 
 21 | [**Try it out on the Svelte REPL!**](https://svelte.dev/repl/ddc56a9e9f9c4289bbe714c6dd48989d?version=3.20.1)
 22 | 
 23 | ## Usage
 24 | 
 25 | Simply bind to the components values property:
 26 | 
 27 | Using built-in HTML input elements:
 28 | ```html
 29 | <script>
 30 |   import Form from "@svelteschool/svelte-forms";
 31 |   let values;
 32 | </script>
 33 | 
 34 | <Form bind:values>
 35 |   <input
 36 |     placeholder="Enter first name..."
 37 |     type="text"
 38 |     name="firstName" />
 39 |   <input
 40 |     placeholder="Enter last name..."
 41 |     type="text"
 42 |     name="lastName" />
 43 | </Form>
 44 | ```
 45 | 
 46 | Here's how the values object would be structured in the above case:
 47 | 
 48 | ```js
 49 | {
 50 |   firstName: 'Svelte',
 51 |   lastName: 'School'
 52 | }
 53 | ```
 54 | 
 55 | Inputs that do not have a `name` property or are `disabled` will not show up in the object.
 56 | 
 57 | __File inputs are not supported.__
 58 | 
 59 | ## Props
 60 | 
 61 | prop name            | type                      | default
 62 | ---------------------|---------------------------|-------------------------
 63 | `actions`            | `[[action, actionProp]]`  | `[]`
 64 | 
 65 | ### `actions`
 66 | The actions prop takes an array of [action, options]. The `action` is applied to the form element using the `options` just like it would be if you manually applied it to an element: `use:action={options}`.
 67 | 
 68 | ## Validation
 69 | 
 70 | Handling form validation is pretty straight forward in Svelte using this library, you'd pick your preferred validation library (Yup for example) and just do a reactive statement like so: $: validity = validateForm(values) where validateForm is a function that does just that.
 71 | 
 72 | ## Installing
 73 | 
 74 | Simple. Install it using `yarn` or `npm`.
 75 | ```
 76 | yarn add @svelteschool/svelte-forms
 77 | 
 78 | npm install @svelteschool/svelte-forms
 79 | ```
 80 | 
 81 | If you're using Sapper, make sure to install it as a dev dependency:
 82 | ```
 83 | yarn add -D @svelteschool/svelte-forms
 84 | ```
 85 | 
 86 | ## Running the tests
 87 | 
 88 | Run tests by running the test script:
 89 | ```
 90 | yarn test
 91 | ```
 92 | 
 93 | ## Contribute
 94 | 
 95 | If you are interested in contributing you are welcome to open PRs. Please make sure all tests pass and if you add functionality, add your own tests.
 96 | 
 97 | 
 98 | ## Authors
 99 | 
100 | * **Svelte School** - [Svelte School](https://github.com/svelteschool)
101 | * **Kevin Åberg Kultalahti** -  [kevmodrome](https://github.com/kevmodrome)
102 | 
103 | ## License
104 | 
105 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
106 | 
107 | ## Acknowledgments
108 | 
109 | * Inspired by [lukeed](https://github.com/lukeed) and his [formee](https://github.com/lukeed/formee) library.
110 | 


--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="1986" height="333" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |   <path d="M246.3 58.3l-49-49c-6-6-14-9.3-22.6-9.3H19.2A19.2 19.2 0 000 19.2V313c0 10.6 8.6 19.2 19.2 19.2h217.2c10.6 0 19.2-8.6 19.2-19.2V81c0-8.6-3.3-16.6-9.3-22.6zM233.8 64H198a6.4 6.4 0 01-6.4-6.4V21.8l42 42.1zm2.6 255.6H19.2a6.4 6.4 0 01-6.4-6.4v-7.5c2 .7 4.1 1.1 6.4 1.1h217.2a19 19 0 006.4-1.1v7.5c0 3.6-2.8 6.4-6.4 6.4zm6.4-32c0 3.6-2.8 6.5-6.4 6.5H19.2a6.4 6.4 0 01-6.4-6.4V19.2c0-3.6 2.8-6.4 6.4-6.4h155.5c1.5 0 2.9.2 4.2.5v44.2c0 10.6 8.6 19.2 19.2 19.2h44.2c.3 1.4.5 2.8.5 4.2V287.6z" fill="#140F2D"/>
3 |   <path d="M63.9 145.4H51.1c-7 0-12.8-5.8-12.8-12.8v-12.8c0-7 5.8-12.8 12.8-12.8H64c7 0 12.8 5.8 12.8 12.8v12.8c0 7-5.7 12.8-12.8 12.8zm-12.8-25.6v12.8H64v-12.8H51.1zM204.5 145.4H102.2c-7 0-12.7-5.8-12.7-12.8v-12.8c0-7 5.7-12.8 12.7-12.8h102.3c7 0 12.8 5.8 12.8 12.8v12.8c0 7-5.8 12.8-12.8 12.8zm-102.3-25.6v12.8h102.3v-12.8H102.2zM63.9 204.5H51.1c-7 0-12.8-5.7-12.8-12.8V179c0-7 5.8-12.8 12.8-12.8H64c7 0 12.8 5.8 12.8 12.8v12.8c0 7-5.7 12.8-12.8 12.8zm-12.8-25.6v12.8H64V179H51.1zM204.5 204.5H102.2c-7 0-12.7-5.7-12.7-12.8V179c0-7 5.7-12.8 12.7-12.8h102.3c7 0 12.8 5.8 12.8 12.8v12.8c0 7-5.8 12.8-12.8 12.8zm-102.3-25.6v12.8h102.3V179H102.2zM63.9 255.6H51.1c-7 0-12.8-5.7-12.8-12.8v-12.7c0-7 5.8-12.8 12.8-12.8H64c7 0 12.8 5.7 12.8 12.8v12.7c0 7-5.7 12.8-12.8 12.8zm-12.8-25.5v12.7H64v-12.7H51.1zM204.5 255.6H102.2c-7 0-12.7-5.7-12.7-12.8v-12.7c0-7 5.7-12.8 12.7-12.8h102.3c7 0 12.8 5.7 12.8 12.8v12.7c0 7-5.8 12.8-12.8 12.8zm-102.3-25.5v12.7h102.3v-12.7H102.2z" fill="#D62246"/>
4 |   <path d="M390.9 128.3c-9.6 0-16.6 1.8-21 5.4a17.1 17.1 0 00-6.3 14.1c0 2 .3 4.1.9 6.3.6 2.2 1.7 4.3 3.3 6.3 1.8 1.8 4.1 3.6 6.9 5.4 3 1.6 6.9 2.9 11.7 3.9l21.3 4.8a61.3 61.3 0 0120.1 7.5c5.2 3 9.2 6.3 12 9.9a38.2 38.2 0 013 38.7c-2.4 5.4-6 10.1-10.8 14.1-4.6 4-10.3 7.1-17.1 9.3a68.2 68.2 0 01-22.8 3.6 92.5 92.5 0 01-51-15l5.4-19.5a74.4 74.4 0 0047.7 18.9c10 0 17.6-2.4 22.8-7.2 5.2-5 7.8-10.2 7.8-15.6l-.3-6a17 17 0 00-2.4-7.2 21.7 21.7 0 00-6.3-6.6 30.5 30.5 0 00-12-5.1l-28.8-7.2c-6.6-1.6-12-3.7-16.2-6.3a31.2 31.2 0 01-15-18.3c-1-3.6-1.5-7.2-1.5-10.8 0-12.2 4.5-21.9 13.5-29.1a56.7 56.7 0 0136.6-11.1c7.8 0 16.2 1.1 25.2 3.3 9 2 16.6 5 22.8 9l-5.7 18a75.9 75.9 0 00-43.8-13.5zm160 125.7h-26.7l-62.7-138h22.8L538 234.2 591.7 116h22l-62.8 138zm148.7-142.5c17.6 0 31.2 4.5 40.8 13.5 9.6 8.8 14.4 21.3 14.4 37.5a95 95 0 01-.6 10.5c-.4 3.4-1.1 5.9-2.1 7.5H651v3c0 7.6 1 14.9 3 21.9 2 7 5 13.2 9 18.6 4 5.4 9 9.7 15 12.9a47.1 47.1 0 0021.9 4.8 66.2 66.2 0 0027.3-5.7 127.6 127.6 0 0021.3-11.7l3.6 17.1c-2.6 1.6-5.8 3.4-9.6 5.4a100.3 100.3 0 01-27.9 9 78.7 78.7 0 01-17.1 1.8 64.6 64.6 0 01-64.5-45 85.9 85.9 0 010-55.5c3.2-9 7.8-16.9 13.8-23.7 6-6.8 13.4-12.1 22.2-15.9 9-4 19.2-6 30.6-6zm-.9 16.8a43.2 43.2 0 00-30.9 10.5 52 52 0 00-14.7 25.8H735l.3-2.7v-2.7c0-5-1-9.4-3-13.2a28 28 0 00-8.1-9.9 45.2 45.2 0 00-25.5-7.8zM815.6 254h-21V32h21v222zm55-123.9h-23.1V119l23.7-3 4.5-41.7h15.9V116H924v14.1h-32.4v95.7c0 6.4.9 10.6 2.7 12.6 2 2 5 3 9 3 4.6 0 8.7-.7 12.3-2.1 3.6-1.4 6.8-3.1 9.6-5.1l4.2 15.9a91.9 91.9 0 01-13.5 4.8 63.2 63.2 0 01-18 2.4 34 34 0 01-15-2.7 19 19 0 01-8.1-7.2 28 28 0 01-3.6-9.9 106 106 0 01-.6-11.1v-96.3zm149.5-18.6c17.6 0 31.2 4.5 40.8 13.5 9.6 8.8 14.4 21.3 14.4 37.5a95 95 0 01-.6 10.5c-.4 3.4-1 5.9-2 7.5H971.4v3c0 7.6 1 14.9 3 21.9 2 7 5 13.2 9 18.6 4 5.4 9 9.7 15 12.9a47.1 47.1 0 0022 4.8 66.2 66.2 0 0027.2-5.7 127.6 127.6 0 0021.3-11.7l3.6 17.1c-2.6 1.6-5.8 3.4-9.6 5.4a100.3 100.3 0 01-27.9 9 78.7 78.7 0 01-17 1.8 64.6 64.6 0 01-64.5-45 85.9 85.9 0 010-55.5c3.1-9 7.7-16.9 13.7-23.7 6-6.8 13.4-12.1 22.2-15.9 9-4 19.2-6 30.6-6zm-.9 16.8a43.2 43.2 0 00-30.9 10.5 52 52 0 00-14.7 25.8h82l.2-2.7v-2.7c0-5-1-9.4-3-13.2a28 28 0 00-8-9.9 45.2 45.2 0 00-25.5-7.8zm194.3 46.2v15.6H1112v-15.6h101.4zm49.4-44.4h-23.1V119l23-2.7c0-11.2.4-20.8 1-28.8.8-8 1.8-14.7 3-20.1a81.2 81.2 0 013.9-13.5 68 68 0 014.5-8.7c3.8-5.6 8.5-9.4 14-11.4a47.2 47.2 0 0121.7-3c2 0 4.2.2 6.6.6 2.6.2 5.2.7 7.8 1.5 2.6.6 5 1.5 7.5 2.7l-5.1 17.7c-.6 0-2-.3-4.2-.9L1316 50a75 75 0 00-8.7-2.7c-3-.8-5.7-1.2-8.1-1.2-3 0-5.5.9-7.5 2.7-2 1.6-3.6 4.4-4.8 8.4-1 3.8-1.8 8.9-2.4 15.3-.4 6.4-.6 14.3-.6 23.7V116h32.4v14.1h-32.4V254h-21V130.1zm140.7-18.6c12.2 0 22.7 2.1 31.5 6.3a63 63 0 0134.2 40.2 91.5 91.5 0 014.2 27.9c0 9.8-1.4 19.1-4.2 27.9a63 63 0 01-12.3 22.8 59.5 59.5 0 01-21.6 15.3 75.3 75.3 0 01-30.6 5.7c-12.2 0-22.8-2-31.8-6-8.8-4-16.1-9.3-22-15.9a67 67 0 01-12.8-23.4 91.5 91.5 0 01-4.2-27.9c0-9.8 1.4-19.1 4.2-27.9 2.8-8.8 7-16.5 12.6-23.1a59 59 0 0121.9-15.9 74 74 0 0130.9-6zm.9 130.2c8 0 14.9-1.5 20.7-4.5 6-3 10.9-7 14.7-12 4-5.2 6.9-11.1 8.7-17.7a82.9 82.9 0 00-.3-43.2 50 50 0 00-8.7-18.3 43.6 43.6 0 00-37-17.7 42.1 42.1 0 00-35.4 16.5 50 50 0 00-8.3 17.7 87.6 87.6 0 000 42.9c2 7 4.9 13.2 8.7 18.6 4 5.4 9 9.7 15 12.9a47.1 47.1 0 0021.9 4.8zm181-103.5a50 50 0 00-18.9-6c-4 0-7.8 1.1-11.4 3.3a37.8 37.8 0 00-9.9 9 70.3 70.3 0 00-13.2 28.8V254h-21V116h16.5l2.4 30.3h1.2A52.2 52.2 0 011545 122a38.9 38.9 0 0125.8-10.5c3.8 0 7.8.7 12 2.1a19 19 0 019 4.8l-6.3 19.8zM1714.1 254v-91.2c0-12.2-2.8-20.8-8.4-25.8a29.7 29.7 0 00-21-7.8 43.7 43.7 0 00-27.6 9.6 51.4 51.4 0 00-17.7 26.7V254h-21V116h16.5l2.4 25.8h1.2c2.6-8.4 8-15.5 16.2-21.3 8.4-6 19.2-9 32.4-9 12 0 22 2.7 30 8.1a34.4 34.4 0 0115.6 22.2c2-4 4.5-7.8 7.5-11.4a50.1 50.1 0 0125.2-16.2 57.7 57.7 0 0118.3-2.7c6.2 0 12 .9 17.7 2.7a36.4 36.4 0 0115 8.1c4.4 3.8 7.9 8.8 10.5 15a59 59 0 013.9 22.8V254h-21v-91.2c0-12.2-2.8-20.8-8.4-25.8a29.7 29.7 0 00-21-7.8 43.7 43.7 0 00-27.6 9.6 51.4 51.4 0 00-17.7 26.7V254h-21zm202.6-125.7c-9.6 0-16.6 1.8-21 5.4a17.1 17.1 0 00-6.3 14.1c0 2 .3 4.1.9 6.3.6 2.2 1.7 4.3 3.3 6.3 1.8 1.8 4 3.6 6.9 5.4 3 1.6 6.9 2.9 11.7 3.9l21.3 4.8a61.3 61.3 0 0120 7.5c5.3 3 9.3 6.3 12 9.9a38.2 38.2 0 013 38.7c-2.3 5.4-6 10.1-10.7 14.1-4.6 4-10.3 7.1-17.1 9.3a68.2 68.2 0 01-22.8 3.6 92.5 92.5 0 01-51-15l5.4-19.5A74.4 74.4 0 001920 242c10 0 17.6-2.4 22.8-7.2 5.2-5 7.8-10.2 7.8-15.6l-.3-6a17 17 0 00-2.4-7.2 21.7 21.7 0 00-6.3-6.6 30.5 30.5 0 00-12-5.1l-28.8-7.2c-6.6-1.6-12-3.7-16.2-6.3a31.2 31.2 0 01-15-18.3c-1-3.6-1.5-7.2-1.5-10.8 0-12.2 4.5-21.9 13.5-29.1a56.7 56.7 0 0136.6-11.1c7.8 0 16.2 1.1 25.2 3.3 9 2 16.6 5 22.8 9l-5.7 18a75.9 75.9 0 00-43.8-13.5z" fill="#140F2D"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/tests/Form.spec.js:
--------------------------------------------------------------------------------
  1 | import "@testing-library/jest-dom/extend-expect";
  2 | import {
  3 |   getByPlaceholderText,
  4 |   getByTestId,
  5 |   waitFor,
  6 | } from "@testing-library/dom";
  7 | import userEvent from "@testing-library/user-event";
  8 | import { render } from "@testing-library/svelte";
  9 | import TestWrapper from "./TestWrapper.svelte";
 10 | 
 11 | // Things needed in the tests
 12 | import { testAction } from "./utils/testAction.js";
 13 | 
 14 | function renderForm(props) {
 15 |   const container = render(TestWrapper, props);
 16 |   return container.container.firstChild;
 17 | }
 18 | 
 19 | describe("has correct values", () => {
 20 |   test("default values", async () => {
 21 |     const container = renderForm({
 22 |       html: `<input name="name" placeholder="Enter name" value="From Test" />`,
 23 |     });
 24 |     const pre = getByTestId(container, "values");
 25 |     expect(pre).toHaveTextContent("From Test");
 26 |   });
 27 |   test("one input", async () => {
 28 |     const container = renderForm({
 29 |       html: `<input name="name" placeholder="Enter name" />`,
 30 |     });
 31 |     const input = getByPlaceholderText(container, "Enter name");
 32 |     userEvent.type(input, "Kevin");
 33 |     const pre = getByTestId(container, "values");
 34 |     await waitFor(() => {
 35 |       expect(pre).toHaveTextContent("Kevin");
 36 |     });
 37 |   });
 38 |   test("checkbox inputs", async () => {
 39 |     const container = renderForm({
 40 |       html: `
 41 |         <input type="checkbox" name="movies" value="Space Jam" data-testid="m1" />
 42 |         <input type="checkbox" name="movies" value="Home Alone" data-testid="m2" />
 43 |       `,
 44 |     });
 45 |     const input = getByTestId(container, "m2");
 46 |     userEvent.click(input);
 47 |     const pre = getByTestId(container, "values");
 48 |     await waitFor(() => {
 49 |       expect(pre).toHaveTextContent('{"movies":["Home Alone"]}');
 50 |     });
 51 |   });
 52 |   test("radio button inputs", async () => {
 53 |     const container = renderForm({
 54 |       html: `
 55 |         <input type="radio" name="gender" value="M" data-testid="g1"/>
 56 |         <input type="radio" name="gender" value="F" data-testid="g2"/>
 57 |       `,
 58 |     });
 59 |     const input = getByTestId(container, "g2");
 60 |     userEvent.click(input);
 61 |     const pre = getByTestId(container, "values");
 62 |     await waitFor(() => {
 63 |       expect(pre).toHaveTextContent('{"gender":"F"}');
 64 |     });
 65 |   });
 66 |   test("multi-select input", async () => {
 67 |     const container = renderForm({
 68 |       html: `
 69 |         <input type="checkbox" name="movies" value="Space Jam" data-testid="m1" />
 70 |         <select name="pets" id="pet-select" multiple data-testid="p1">
 71 |           <option value="dog" data-testid="o1">Dog</option>
 72 |           <option value="cat" data-testid="o2">Cat</option>
 73 |           <option value="hamster" data-testid="o3">Hamster</option>
 74 |           <option value="parrot" data-testid="o4">Parrot</option>
 75 |           <option value="spider" data-testid="o5">Spider</option>
 76 |           <option value="goldfish" data-testid="o6">Goldfish</option>
 77 |         </select>
 78 |       `,
 79 |     });
 80 |     const select = getByTestId(container, "p1");
 81 |     userEvent.selectOptions(select, ["dog", "hamster"]);
 82 |     // TODO: Fix this
 83 |     // userEvent.selectOptions doesn't trigger the update
 84 |     // A checkbox was included just to trigger the update with the click below.
 85 |     userEvent.click(getByTestId(container, "m1"));
 86 |     const pre = getByTestId(container, "values");
 87 |     await waitFor(() => {
 88 |       expect(pre).toHaveTextContent(
 89 |         '{"movies":["Space Jam"],"pets":["dog","hamster"]}'
 90 |       );
 91 |     });
 92 |   });
 93 | });
 94 | 
 95 | describe("handles reactivity", () => {
 96 |   test("one input", async () => {
 97 |     const container = renderForm({
 98 |       html: `<input name="name" placeholder="Enter name" data-testid="t1"/>`,
 99 |       input: { name: "Rodrigo" },
100 |     });
101 |     userEvent.click(getByTestId(container, "b1"));
102 | 
103 |     const pre = getByTestId(container, "t1");
104 |     await waitFor(() => {
105 |       expect(pre.value).toEqual("Rodrigo");
106 |     });
107 |   });
108 |   test("checkbox inputs", async () => {
109 |     const container = renderForm({
110 |       html: `
111 |         <input type="checkbox" name="movies" value="Space Jam" data-testid="m1" />
112 |         <input type="checkbox" name="movies" value="Home Alone" data-testid="m2" />
113 |       `,
114 |       input: { movies: ["Home Alone"] },
115 |     });
116 |     userEvent.click(getByTestId(container, "b1"));
117 |     await waitFor(() => {
118 |       expect(getByTestId(container, "m1").checked).toBe(false);
119 |       expect(getByTestId(container, "m2").checked).toBe(true);
120 |     });
121 |   });
122 |   test("radio button", async () => {
123 |     const container = renderForm({
124 |       html: `
125 |         <input type="radio" name="gender" value="M" data-testid="g1"/>
126 |         <input type="radio" name="gender" value="F" data-testid="g2"/>
127 |       `,
128 |       input: { gender: "M" },
129 |     });
130 |     userEvent.click(getByTestId(container, "b1"));
131 |     await waitFor(() => {
132 |       expect(getByTestId(container, "g1").checked).toBe(true);
133 |       expect(getByTestId(container, "g2").checked).toBe(false);
134 |     });
135 |   });
136 |   test("multi-select input", async () => {
137 |     const container = renderForm({
138 |       html: `
139 |         <input type="checkbox" name="movies" value="Space Jam" data-testid="m1" />
140 |         <select name="pets" id="pet-select" multiple data-testid="p1">
141 |           <option value="dog" data-testid="o1">Dog</option>
142 |           <option value="cat" data-testid="o2">Cat</option>
143 |           <option value="hamster" data-testid="o3">Hamster</option>
144 |           <option value="parrot" data-testid="o4">Parrot</option>
145 |           <option value="spider" data-testid="o5">Spider</option>
146 |           <option value="goldfish" data-testid="o6">Goldfish</option>
147 |         </select>
148 |       `,
149 |       input: { pets: ["dog", "hamster"] },
150 |     });
151 |     userEvent.click(getByTestId(container, "b1"));
152 |     await waitFor(() => {
153 |       expect(getByTestId(container, "o1").selected).toBe(true);
154 |       expect(getByTestId(container, "o2").selected).toBe(false);
155 |       expect(getByTestId(container, "o3").selected).toBe(true);
156 |       expect(getByTestId(container, "o4").selected).toBe(false);
157 |       expect(getByTestId(container, "o5").selected).toBe(false);
158 |       expect(getByTestId(container, "o6").selected).toBe(false);
159 |     });
160 |   });
161 | });
162 | 
163 | describe("can handle supplied actions", () => {
164 |   test("one action with props", async () => {
165 |     const container = renderForm({
166 |       actions: [[testAction, "brown"]]
167 |     });
168 | 
169 |     await waitFor(() => {
170 |       expect(container.style.getPropertyValue('background')).toEqual("brown");
171 |     });
172 |   });
173 |   test("one action without props", async () => {
174 |     const container = renderForm({
175 |       actions: [[testAction]]
176 |     });
177 | 
178 |     await waitFor(() => {
179 |       expect(container.style.getPropertyValue('background')).toEqual("blue");
180 |     });
181 |   });
182 | });
183 | 


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