├── .gitignore
├── .npmignore
├── .travis.yml
├── .zuul.yml
├── README.md
├── capture.gif
├── example
    ├── sample.css
    └── sample.js
├── index.css
├── index.js
├── package.json
└── tests
    └── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | example/
2 | 
3 | caputure.gif
4 | README.md
5 | 
6 | tests
7 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | node_js:
2 | - '6'
3 | sudo: false
4 | language: node_js
5 | env:
6 |   global:
7 |   - secure: wW2Q6HyMoyE78pc4/+QOHRy1fDfjtazNJBD4YvH0HAYmumBiqzOlpP4z/ScSaye8DM0oudHj4Gz0luqE84HzbVkP+a7nC0Tls3ia6loadDA0aHlOUkQfTk7jqnWnShKVyVU38KrFm5gB1fVsen3xJ1TtWeCbUHLMoGGcvQGG0duN2P7Wc85vqg9s9EZQTnYBRn4MxCytu2j195Qx5kULm5xaUcs7HbI95Eo+fj9IFZ9eVNd9sh0TNSIkPCpjxmKBR535Fuyz7CTuECRoS9Ne+mQ7PTpmY2oDYYwmg2+ckxzHlEKiepOXLa/41l3G6E26/NlTqPVMvASVuTafFC+Rwxh1tZvr7HZ5aO94WTlGwq1uCsSe12z2GTXFJp6p2lBkQt4nCeRdNylanv6eoorl4naz1X4Qepw2M1oVTqvz5Tn+W0Hn7EuhzrVTg8V3Y1G9UhA+9lCa/SE4z+BXOFN5ln1RqB8atFSR3efaTKdvgii6w36SJ7Jh2w1IP0sgupR5lpQqiMs2TO+2xQmaZiDsA8vksC93EWsrhcPc6N3jTD6TpqXG1KtslhkSWg/rqX0aRX0vJJEYUS0NaHdz4dw2r5LJNO/4qi5qeG4+2xjhfc+U4tt9uE8uXwGMLpcStCw9hMT//PzLXvPuDJitGvsbFyL00ZUhS8CjfDUO8MCwT7w=
8 |   - secure: Oprg/DMoMMl3r0Po8q8nOAef8h+Ilf7YPgqbzUQkTDoxZPdWySQ5E0u58GLSQU5e/01gT8wfwD/Dx3dWuPI+ncTYtFnJe5bOKcDRFYcivT5NM5rnhylQIM0J9/JJ4klz1odmjQAbzlevUoCvcacFaVqhqtR8fciqkSOCaURgrZ0kdAfOtMjbB9dn/RZxRl5Snikeoa2VIjW+aDnCx83JGS8QkPkiFICrTVLIDDsW+P2+18BTxKNIcgNwuM7k+Pi7DL7i2aGoLZZrNBkZ6gJjdlruguk3AKqIKzcWI9reUtcm2NzJ3bwXhmeskzwTGu5f8TFfELtsOJroMlAnIdNpuOL/9pgdPNX9PW9gojBFum+dWDZ7jQyzcEo9J3FydlbHZcr2cib66p1ACdxQzEnvCuv8WgV14qp1hRdbXP7sQhphh4XNNAT1tSRu3jGSFsl5zgngVDVAVOrBI4a465jXK39bX2wKr7rtWnK4BFRzB6foVemGkysV2doDa5v7S7UXu49HVsLzso8aonEwh3AaI2asxz0t446p3AtMTG+P5li4lTGQexBP4QO6PJJ/gUrckjepiyXWVA9GDbeRlAO2SVEOep6wsdmCGbWh+EiU36SMIHj9soUeJaDpjgeH/Lev3BvKl3yh8Vxdsv9QOoxs2b6LuEyWxoddgCRvVpihcOw=
9 | 


--------------------------------------------------------------------------------
/.zuul.yml:
--------------------------------------------------------------------------------
 1 | ui: tape
 2 | browsers:
 3 |   - name: chrome
 4 |     version: latest
 5 |     os: 'Mac 10.11'
 6 | browserify:
 7 |   - transform:
 8 |       name: es2020
 9 |   - transform: sheetify/transform
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # yo-yo-autogrow
 2 | 
 3 | [![Build Status](https://travis-ci.org/tgfjt/yo-yo-autogrow.svg?branch=feature%2Ftest)](https://travis-ci.org/tgfjt/yo-yo-autogrow)
 4 | [![npm](https://img.shields.io/npm/v/yo-yo-autogrow.svg?maxAge=2592000)]()
 5 | ![API stability](https://img.shields.io/badge/stability-experimental-orange.svg)
 6 | ![MIT Licensed](https://img.shields.io/npm/l/yo-yo-autogrow.svg)
 7 | 
 8 | Wrapper `<textarea />` UI Component made from [yo-yo](https://github.com/maxogden/yo-yo)
 9 | 
10 | ![capture](capture.gif)
11 | 
12 | ## Usage
13 | 
14 | ```js
15 | const autogrow = require('yo-yo-autogrow')
16 | 
17 | const el = yo`<div>
18 |   ${autogrow({
19 |     required: true,
20 |     placeholder: 'enter...'
21 |   })}
22 | </div>`
23 | ```
24 | 
25 | with [Choo](https://github.com/yoshuawuyts/choo)
26 | 
27 | ```js
28 | const choo = require('choo')
29 | const html = require('choo/html')
30 | const autogrow = require('yo-yo-autogrow')
31 | 
32 | const app = choo()
33 | 
34 | app.model({
35 |   state: {title: 'Sample with choo'}
36 | })
37 | 
38 | const mainView = (state) => html`
39 |   <main>
40 |     <div>
41 |       <h1>${state.title}</h1>
42 |       <form>
43 |         ${autogrow()}
44 |       </form>
45 |     </div>
46 |   </main>
47 | `
48 | 
49 | document.body.appendChild(tree)
50 | ```
51 | 
52 | 
53 | ### Properties
54 | 
55 | | Property | Default |
56 | | :-- | :-- |
57 | | placeholder | `''` |
58 | | value | `''` |
59 | | name | `''` |
60 | | disabled | `false` |
61 | | required | `false` |
62 | | inputmode | `''` |
63 | | autocomplete | `'off'` |
64 | 
65 | ### Style
66 | 
67 | | Property | Default |
68 | | :-- | :-- |
69 | | `--AutogrowTextarea-border` | `1px solid #ddd` |
70 | | `--AutogrowTextarea-border-focus` | `1px solid #9cc` |
71 | | `--AutogrowTextarea-width` | `100%` |
72 | | `--AutogrowTextarea-padding` | `4px 6px` |
73 | 


--------------------------------------------------------------------------------
/capture.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tgfjt/yo-yo-autogrow/079ad704ec8c0a7650d8699a32f7db6d46c47522/capture.gif


--------------------------------------------------------------------------------
/example/sample.css:
--------------------------------------------------------------------------------
 1 | .custom {
 2 |     --AutogrowTextarea-border: 1px solid #666;
 3 |     --AutogrowTextarea-border-focus: 1px solid #c88;
 4 |     --AutogrowTextarea-width: 320px;
 5 |     --AutogrowTextarea-padding: 8px 10px;
 6 | }
 7 | 
 8 | .container {
 9 |   width: 800px;
10 |   margin: 0 auto;
11 |   padding: 15px;
12 | }
13 | 


--------------------------------------------------------------------------------
/example/sample.js:
--------------------------------------------------------------------------------
 1 | const choo = require('choo')
 2 | const html = require('choo/html')
 3 | const sf = require('sheetify')
 4 | 
 5 | const autogrow = require('..')
 6 | 
 7 | const prefix = sf('./sample.css')
 8 | 
 9 | const app = choo()
10 | 
11 | app.model({
12 |   state: {title: 'Autogrow Textarea!'}
13 | })
14 | 
15 | console.log(autogrow())
16 | 
17 | const mainView = (state) => html`
18 |   <main class="${prefix}">
19 |     <div class="container">
20 |       <h1>${state.title} with Choo.</h1>
21 |       <h2>Default</h2>
22 |       <div>
23 |         ${autogrow()}
24 |       </div>
25 |       <h3>Custom</h3>
26 |       <div class="custom">
27 |         ${autogrow({
28 |           name: 'comment',
29 |           placeholder: 'Placeholder from choo!',
30 |           required: true
31 |         })}
32 |       </div>
33 |     </div>
34 |   </main>
35 | `
36 | 
37 | app.router((route) => [
38 |   route('/', mainView)
39 | ])
40 | 
41 | const tree = app.start()
42 | document.body.appendChild(tree)
43 | 


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --AutogrowTextarea-border: 1px solid #ddd;
 3 |   --AutogrowTextarea-border-focus: 1px solid #9cc;
 4 |   --AutogrowTextarea-width: 100%;
 5 |   --AutogrowTextarea-padding: 4px 6px;
 6 | }
 7 | 
 8 | .AutogrowTextarea {
 9 |   border: var(--AutogrowTextarea-border);
10 |   box-sizing: border-box;
11 |   overflow: hidden;
12 |   position: relative;
13 |   padding: var(--AutogrowTextarea-padding);
14 |   width: var(--AutogrowTextarea-width);
15 | }
16 | 
17 | .AutogrowTextarea.is-focused {
18 |   border: var(--AutogrowTextarea-border-focus);
19 | }
20 | 
21 | .AutogrowTextarea.is-disabled {
22 |   opacity: .5;
23 |   background: #eee;
24 | }
25 | 
26 | .AutogrowTextarea-mirror {
27 |   visibility: hidden;
28 |   white-space: pre;
29 |   word-wrap: break-word;
30 | }
31 | 
32 | .AutogrowTextarea-container {
33 |   bottom: 0;
34 |   left: 0;
35 |   position: absolute;
36 |   right: 0;
37 |   top: 0;
38 | }
39 | 
40 | .AutogrowTextarea textarea {
41 |   background: inherit;
42 |   border: none;
43 |   box-sizing: border-box;
44 |   color: inherit;
45 |   font-family: inherit;
46 |   font-size: inherit;
47 |   height: 100%;
48 |   line-height: inherit;
49 |   outline: none;
50 |   position: relative;
51 |   resize: none;
52 |   text-align: inherit;
53 |   width: 100%;
54 |   padding: var(--AutogrowTextarea-padding);
55 | }
56 | 
57 | .AutogrowTextarea textarea:disabled {
58 |   opacity: .5;
59 | }
60 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var yo = require('yo-yo')
 2 | var sf = require('sheetify')
 3 | var xtend = require('xtend')
 4 | var emitter = require('namespace-emitter')
 5 | 
 6 | var styling = sf('./index.css')
 7 | 
 8 | function TextareaData (options) {
 9 |   var defaultProps = {
10 |     placeholder: '',
11 |     value: '',
12 |     name: '',
13 |     disabled: false,
14 |     required: false,
15 |     inputmode: '',
16 |     autocomplete: 'off'
17 |   }
18 | 
19 |   this.state = xtend(defaultProps, options)
20 |   this.emitter = emitter()
21 | }
22 | 
23 | TextareaData.prototype.update = function (event) {
24 |   switch (event.type) {
25 |     case 'focus':
26 |       this.setState({focused: true})
27 |       this.emitter.emit('update')
28 |       break
29 | 
30 |     case 'blur':
31 |       this.setState({focused: false})
32 |       this.emitter.emit('update')
33 |       break
34 | 
35 |     case 'input':
36 |       this.setState({value: event.target.value})
37 |       this.emitter.emit('update')
38 |       break
39 | 
40 |     default:
41 |       break
42 |   }
43 | }
44 | 
45 | TextareaData.prototype.setState = function (newState) {
46 |   this.state = xtend(this.state, newState)
47 | }
48 | 
49 | function textarea (data) {
50 |   var disabled = data.state.disabled ? 'disabled' : ''
51 |   var required = data.state.required ? 'required' : ''
52 |   var disabledClass = data.state.disabled ? 'is-disabled' : ''
53 |   var focusClass = data.state.focused ? 'is-focused' : ''
54 | 
55 |   return yo`
56 |     <div class="${styling}">
57 |       <div class="AutogrowTextarea ${focusClass} ${disabledClass}">
58 |         <div class="AutogrowTextarea-mirror">${data.state.value + ' '}</div>
59 |         <div class="AutogrowTextarea-container">
60 |           <textarea rows="1"
61 |             name="${data.state.name}"
62 |             ${required}
63 |             ${disabled}
64 |             inputmode="${data.state.inputmode}"
65 |             placeholder="${data.state.placeholder}"
66 |             autocomplete="${data.state.autocomplete}"
67 |             onfocus=${data.update.bind(data)}
68 |             onblur=${data.update.bind(data)}
69 |             oninput=${data.update.bind(data)}>${data.state.value}</textarea>
70 |         </div>
71 |       </div>
72 |     </div>
73 |   `
74 | }
75 | 
76 | module.exports = function (options) {
77 |   var t = new TextareaData(options)
78 |   var el = textarea(t)
79 | 
80 |   t.emitter.on('update', function () {
81 |     yo.update(el, textarea(t))
82 |   })
83 | 
84 |   return el
85 | }
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "yo-yo-autogrow",
 3 |   "version": "1.0.1",
 4 |   "description": "textarea component via yo-yo, automatically adjust height",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "zuul": "zuul --local --open -- tests/test.js",
 8 |     "test": "zuul -- tests/test.js",
 9 |     "start": "budo example/sample.js --live -p 8080 --open -- -t es2020 -t sheetify/transform"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/tgfjt/yo-yo-autogrow.git"
14 |   },
15 |   "bugs": {
16 |     "url": "https://github.com/tgfjt/yo-yo-autogrow/issues"
17 |   },
18 |   "homepage": "https://github.com/tgfjt/yo-yo-autogrow#readme",
19 |   "keywords": [
20 |     "yo-yo"
21 |   ],
22 |   "author": "tgfjt",
23 |   "license": "MIT",
24 |   "dependencies": {
25 |     "namespace-emitter": "^1.0.0",
26 |     "sheetify": "^6.0.1",
27 |     "xtend": "^4.0.1",
28 |     "yo-yo": "^1.2.2"
29 |   },
30 |   "devDependencies": {
31 |     "budo": "^10.0.3",
32 |     "choo": "^4.1.0",
33 |     "document-ready": "^2.0.1",
34 |     "es2020": "^1.1.8",
35 |     "tape": "^4.6.0",
36 |     "zuul": "^3.11.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/tests/test.js:
--------------------------------------------------------------------------------
 1 | const test = require('tape');
 2 | const onReady = require('document-ready')
 3 | 
 4 | const textarea = require('../');
 5 | 
 6 | test('default properties', function (t) {
 7 |   t.plan(4)
 8 | 
 9 |   const el = textarea()
10 | 
11 |   onReady(function () {
12 |     const textarea = el.querySelector('textarea')
13 | 
14 |     t.equal(el.querySelector('.AutogrowTextarea-mirror').innerHTML, ' ', 'same value')
15 |     t.equal(textarea.getAttribute('placeholder'), '', 'same placeholder')
16 |     t.equal(textarea.getAttribute('rows'), '1', 'rows=1')
17 |     t.equal(textarea.getAttribute('autocomplete'), 'off', 'autocomplete=ff')
18 |   })
19 | });
20 | 
21 | test('overwrite properties', function (t) {
22 |   t.plan(5)
23 | 
24 |   const el = textarea({
25 |     name: 'test',
26 |     value: 'Hi!\nHi!\nHi!',
27 |     placeholder: 'autogrow placeholder',
28 |     required: true,
29 |     autocomplete: 'on'
30 |   })
31 | 
32 |   onReady(function () {
33 |     const textarea = el.querySelector('textarea')
34 |     const wrapper = el.querySelector('.AutogrowTextarea')
35 | 
36 |     t.equal(el.querySelector('.AutogrowTextarea-mirror').innerHTML, 'Hi!\nHi!\nHi! ', 'same value')
37 |     t.equal(textarea.name, 'test', 'name=test')
38 |     t.equal(textarea.getAttribute('placeholder'), 'autogrow placeholder', 'same placeholder')
39 |     t.equal(textarea.getAttribute('required'), 'required', 'required=true')
40 |     t.equal(textarea.getAttribute('autocomplete'), 'on', 'autocomplete=on')
41 |   })
42 | });
43 | 
44 | test('be disabled', function (t) {
45 |   t.plan(2)
46 | 
47 |   const el = textarea({
48 |     disabled: true
49 |   })
50 | 
51 |   onReady(function () {
52 |     const textarea = el.querySelector('textarea')
53 |     const wrapper = el.querySelector('.AutogrowTextarea')
54 | 
55 |     t.equal(textarea.getAttribute('disabled'), 'disabled', 'disabled=true')
56 |     t.equal(wrapper.classList.contains('is-disabled'), true, 'is-disabled')
57 |   })
58 | });
59 | 
60 | test('adjust height', function (t) {
61 |   t.plan(1)
62 | 
63 |   const el1 = textarea({
64 |     value: 'Hello!'
65 |   })
66 | 
67 |   const el2 = textarea({
68 |     value: 'Hellow!\nworld!'
69 |   })
70 | 
71 |   document.body.appendChild(el1)
72 |   document.body.appendChild(el2)
73 | 
74 |   t.ok(el1.clientHeight < el2.clientHeight, 'adjust height via break line')
75 | });
76 | 


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