Skip to content

Commit 87206d7

Browse files
muanmuan
committed
Rename filterable-input to remote-input
1 parent fb77ab0 commit 87206d7

File tree

6 files changed

+40
-31
lines changed

6 files changed

+40
-31
lines changed

‎README.md

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
1-
# <filterable-input> element
1+
# <remote-input> element
22

3-
Retrieve search results from server.
3+
An input element that sends its value to a server endpoint and renders the response body.
44

55
## Installation
66

77
```
8-
$ npm install @github/filterable-input-element
8+
$ npm install @github/remote-input-element
99
```
1010

1111
## Usage
1212

1313
```js
14-
import '@github/filterable-input-element'
14+
import '@github/remote-input-element'
1515
```
1616

1717
```html
18-
<filterable-input src="/results" aria-owns="filtered-list">
19-
<input type="text">
20-
</filterable-input>
21-
<ul id="filtered-list"></ul>
18+
<!-- Filter a list of items from the server -->
19+
<remote-input src="/query" aria-owns="results">
20+
<input>
21+
</remote-input>
22+
<ul id="results"></ul>
23+
```
24+
25+
```html
26+
<!-- Live preview of Markdown -->
27+
<remote-input src="/preview" aria-owns="md-preview">
28+
<textarea></textarea>
29+
</remote-input>
30+
<div id="md-preview"></div>
2231
```
2332

2433
## Browser support

‎examples/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>filterable-input demo</title>
5+
<title>remote-input demo</title>
66
</head>
77
<body>
8-
<filterable-input aria-owns="results" src="/examples/results.html">
8+
<remote-input aria-owns="results" src="/examples/results.html">
99
<label>Search robots <input type="text"></label>
10-
</filterable-input>
10+
</remote-input>
1111
<ol id="results"></ol>
1212

1313
<!-- GitHub Pages development script, uncomment when running example locally and comment out the production one -->
1414
<!-- <script src="../dist/index.umd.js"></script> -->
1515

1616
<!-- GitHub Pages demo script -->
17-
<script src="https://unpkg.com/@github/filterable-input-element@latest/dist/index.umd.js"></script></body>
17+
<script src="https://unpkg.com/@github/remote-input-element@latest/dist/index.umd.js"></script></body>
1818
</html>

‎index.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* @flow strict */
22

3-
class FilterableInputElement extends HTMLElement {
3+
class RemoteInputElement extends HTMLElement {
44
currentQuery: ?string
55
debounceInputChange: Event => void
66
boundFetchResults: Event => mixed
@@ -29,7 +29,7 @@ class FilterableInputElement extends HTMLElement {
2929
}
3030

3131
get input(): ?HTMLInputElement {
32-
const input = this.querySelector('input')
32+
const input = this.querySelector('input, textarea')
3333
return input instanceof HTMLInputElement ? input : null
3434
}
3535

@@ -93,9 +93,9 @@ function debounce(callback) {
9393
}
9494
}
9595

96-
export default FilterableInputElement
96+
export default RemoteInputElement
9797

98-
if (!window.customElements.get('filterable-input')) {
99-
window.FilterableInputElement = FilterableInputElement
100-
window.customElements.define('filterable-input', FilterableInputElement)
98+
if (!window.customElements.get('remote-input')) {
99+
window.RemoteInputElement = RemoteInputElement
100+
window.customElements.define('remote-input', RemoteInputElement)
101101
}

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
2-
"name": "@github/filterable-input-element",
2+
"name": "@github/remote-input-element",
33
"version": "0.0.1",
4-
"description": "Boilerplate for creating a custom element.",
4+
"description": "An input element that sends its value to a server endpoint and renders the response body.",
55
"main": "dist/index.umd.js",
66
"module": "dist/index.esm.js",
77
"license": "MIT",
8-
"repository": "github/filterable-input-element",
8+
"repository": "github/remote-input-element",
99
"files": [
1010
"dist"
1111
],

‎test/test.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
describe('filterable-input', function() {
1+
describe('remote-input', function() {
22
describe('element creation', function() {
33
it('creates from document.createElement', function() {
4-
const el = document.createElement('filterable-input')
5-
assert.equal('FILTERABLE-INPUT', el.nodeName)
4+
const el = document.createElement('remote-input')
5+
assert.equal('REMOTE-INPUT', el.nodeName)
66
})
77

88
it('creates from constructor', function() {
9-
const el = new window.FilterableInputElement()
10-
assert.equal('FILTERABLE-INPUT', el.nodeName)
9+
const el = new window.RemoteInputElement()
10+
assert.equal('REMOTE-INPUT', el.nodeName)
1111
})
1212
})
1313

1414
describe('after tree insertion', function() {
1515
beforeEach(function() {
1616
document.body.innerHTML = `
17-
<filterable-input aria-owns="results" src="/results">
17+
<remote-input aria-owns="results" src="/results">
1818
<input>
19-
</filterable-input>
19+
</remote-input>
2020
<div id="results"></div>
2121
`
2222
})
@@ -26,10 +26,10 @@ describe('filterable-input', function() {
2626
})
2727

2828
it('loads content', function(done) {
29-
const filterable = document.querySelector('filterable-input')
29+
const remoteInput = document.querySelector('remote-input')
3030
const input = document.querySelector('input')
3131
const results = document.querySelector('#results')
32-
filterable.addEventListener('loadend', function() {
32+
remoteInput.addEventListener('loadend', function() {
3333
assert.equal(results.querySelector('li').textContent, 'item: test')
3434
done()
3535
})

0 commit comments

Comments
 (0)