├── .gitignore
├── src
    ├── index.js
    └── InlineInput.svelte
├── rollup.config.js
├── package.json
└── README.md


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


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-inline-input",
 3 |   "version": "1.2.0",
 4 |   "description": "A Svelte component for inline editable inputs.",
 5 |   "svelte": "src/index.js",
 6 |   "module": "dist/index.mjs",
 7 |   "main": "dist/index.js",
 8 |   "unpkg": "dist/index.js",
 9 |   "scripts": {
10 |     "build": "rollup -c",
11 |     "prepublishOnly": "npm run build"
12 |   },
13 |   "author": "Uk Chukundah",
14 |   "license": "MIT",
15 |   "devDependencies": {
16 |     "@rollup/plugin-node-resolve": "^6.0.0",
17 |     "rollup": "^1.20.0",
18 |     "rollup-plugin-svelte": "^5.0.0",
19 |     "svelte": "^3.0.0"
20 |   },
21 |   "keywords": [
22 |     "svelte",
23 |     "inline",
24 |     "editable",
25 |     "input"
26 |   ],
27 |   "repository": {
28 |     "type": "git",
29 |     "url": "git+https://github.com/ukchukx/svelte-inline-input"
30 |   },
31 |   "files": [
32 |     "src",
33 |     "dist"
34 |   ]
35 | }
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-inline-input
 2 | 
 3 | > An inline editable input component for Svelte.
 4 | 
 5 | Displays as text and becomes editable by clicking or tapping.
 6 | 
 7 | ![Example](https://miro.medium.com/max/280/0*s4G3Dbrs06GgMpg6.gif)
 8 | 
 9 | You can read how it was built [here](https://medium.com/@ukchukx/84274be1aa73)
10 | 
11 | ## Installation
12 | 
13 | ```js
14 | npm install svelte-inline-input
15 | ```
16 | 
17 | ### Browser
18 | 
19 | ```html
20 | <script type="text/javascript" src="https://unpkg.com/svelte-inline-input"></script>
21 | ```
22 | 
23 | ### Module
24 | 
25 | ```js
26 | import InlineInput from 'svelte-inline-input';
27 | ```
28 | 
29 | ## Usage
30 | 
31 | Once installed, it can be used in a template as:
32 | 
33 | ```html
34 | <InlineInput bind:value />
35 | ```
36 | 
37 | See the props table below for the available options.
38 | 
39 | ### Props
40 | 
41 | | Property | Type | Description | Default |
42 | |:--|:--|:--|:--|
43 | | type | string | The input type. Could be text, number, textarea or select | text |
44 | | placeholder | string | Text to be shown as a placeholder while there is no input |  empty string |
45 | | labelClasses | string | CSS classes for the label element | empty string |
46 | | inputClasses | string | CSS classes for the input element | empty string |
47 | | rows | integer | Textarea rows | 2 |
48 | | cols | integer | Textarea columns | 20 |
49 | | options | array | Provides the options for selects. Each object should have the format `{label: x, value: x}` | [] |
50 | 
51 | ### Events
52 | 
53 | | Event | Description |
54 | |:--|:--|
55 | | blur | Fired when the input element loses focus. Also provides the input element's value |
56 | 
57 | ## License
58 | 
59 | [MIT](http://opensource.org/licenses/MIT)
60 | 


--------------------------------------------------------------------------------
/src/InlineInput.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import { tick, createEventDispatcher } from 'svelte';
  3 | 
  4 | const dispatch = createEventDispatcher();
  5 | 
  6 | // Props
  7 | export let value = '';
  8 | export let type = 'text';
  9 | export let placeholder = '';
 10 | export let labelClasses = '';
 11 | export let inputClasses = '';
 12 | export let rows = 2;
 13 | export let cols = 20;
 14 | export let options = [];
 15 | 
 16 | let editing = false;
 17 | let inputEl;
 18 | let label;
 19 | let selectedIndex = options.findIndex(o => o.value === value);
 20 | 
 21 | // Computed
 22 | $: isText = type === 'text';
 23 | $: isNumber = type === 'number';
 24 | $: isTextArea = type === 'textarea';
 25 | $: isSelect = type === 'select';
 26 | $: if (isNumber) {
 27 |       label = value === '' ? placeholder : value;
 28 |     } else if (isText || isTextArea) {
 29 |       label = value ? value : placeholder;
 30 |     } else { // Select
 31 |       label = selectedIndex === -1 ? placeholder : options[selectedIndex].label;
 32 |     }
 33 | 
 34 | const toggle = async (_) => {
 35 |   editing = !editing;
 36 | 
 37 |   if (editing) {
 38 |     await tick();
 39 |     inputEl.focus();
 40 |   }
 41 | };
 42 | 
 43 | const handleInput = (e) => {
 44 |   value = isNumber ? +e.target.value : e.target.value;
 45 | };
 46 | 
 47 | const handleEnter = (e) => {
 48 |   if (e.keyCode === 13) inputEl.blur();
 49 | };
 50 | 
 51 | const handleBlur = (_) => {
 52 |   toggle();
 53 |   dispatch('blur', value);
 54 | };
 55 | 
 56 | const handleChange = (e) => {
 57 |   selectedIndex = placeholder ? e.target.selectedIndex - 1 : e.target.selectedIndex;
 58 |   value = options[selectedIndex].value;
 59 | };
 60 | </script>
 61 | 
 62 | {#if editing && (isText || isNumber)}
 63 |   <input
 64 |     class={inputClasses}
 65 |     bind:this={inputEl}
 66 |     {type}
 67 |     {value}
 68 |     {placeholder}
 69 |     on:input={handleInput}
 70 |     on:keyup={handleEnter}
 71 |     on:blur={handleBlur}>
 72 | {:else if editing && isTextArea}
 73 |   <textarea
 74 |     class={inputClasses}
 75 |     bind:this={inputEl}
 76 |     {placeholder}
 77 |     {value}
 78 |     {rows}
 79 |     {cols}
 80 |     on:input={handleInput}
 81 |     on:blur={handleBlur} />
 82 | {:else if editing && isSelect}
 83 |   <select
 84 |     class={inputClasses}
 85 |     bind:this={inputEl}
 86 |     on:change={handleChange}
 87 |     {value}
 88 |     on:blur={handleBlur}>
 89 |     {#if placeholder}
 90 |       <option selected value disabled>{placeholder}</option>
 91 |     {/if}
 92 |     {#each options as { label, value }, i}
 93 |       <option
 94 |         key={i}
 95 |         {value}>
 96 |         {label}
 97 |       </option>
 98 |     {/each}
 99 |   </select>
100 | {:else}
101 |   <span
102 |     class={labelClasses}
103 |     on:click={toggle}>
104 |     {label}<slot name="selectCaret">{#if isSelect}<span>&#9660;</span>{/if}</slot>
105 |   </span>
106 | {/if}
107 | 


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