Initial commit

.github/workflows/npmpublish.yml

@@ -0,0 +1,19 @@
+name: npm publish
+on:
+  release:
+    types: [published]
+jobs:
+  publish-npm:
+    name: Build and Publish to npm
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm i --ignore-scripts
+      - name: Build and Publish
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+package-lock.json
+*.js
+*.map
+!rollup.config.js

.npmignore

@@ -0,0 +1,3 @@
+*
+!better-select.js
+!README.md

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": false,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}

LICENSE.md

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+Copyright (c) 2020 Sid Vishnoi
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.
+

README.md

@@ -0,0 +1,117 @@
+# better-select
+
+A progressively enhanced, lightweight, customizable, and accessible `<select>` custom element with text input.
+
+## Features
+
+### Lightweight
+
+A single file, weighing only 7KB (2.6KB gzip), and having no dependencies.
+
+### Accessible
+
+Based on Adam Silver's article [Building an accessible auto-complete control](https://adamsilver.io/articles/building-an-accessible-autocomplete-control/), and some improvements of my own.
+
+### Progressively enhanced
+
+All you need to do is wrap your `<select>` element inside a `<better-select>` element, and the `<select>` will be enhanced. If for some reason, your JavaScript fails to load (or until it loads), users will still be able to access a working `<select>` menu. You don't need to change your forms input handling either.
+
+## Basic Usage
+
+```html
+<script src="./better-select.js" type="module"></script>
+
+<better-select>
+  <select name="country" id="country">
+    <option value="">Select</option>
+    <option value="in">India</option>
+    <option value="au">Australia</option>
+    <option value="ja">Japan</option>
+  </select>
+</better-select>
+```
+
+You can import better-select.js from CDNs like [unpkg](https://unpkg.com/better-select/better-select.js). The package is also available on [npm](https://www.npmjs.com/package/better-select).
+
+## Advanced Usage
+
+### Need to use some other name for custom element?
+
+```html
+<script type="module">
+  import BetterSelect from "./better-select.js";
+  customElements.define("my-better-select", BetterSelect);
+</script>
+```
+
+### Styling?
+
+The custom element can be styled using CSS custom properties. Following properties are presently available with along their default values:
+
+```css
+/* input box */
+--input-color: #000;
+--input-background: #fff;
+--input-border-width: 2px;
+--input-border-color: #718096;
+/* focused/active input box */
+--focus-outline-width: 3px;
+--focus-outline-color: #ecc94b;
+/* options list wrapper */
+--menu-max-height: 16em;
+/* options */
+--item-padding: 0.5em;
+--item-color: #000;
+--item-background: #fff;
+--item-color-active: #fff;
+--item-background-active: #111;
+/* dropdown arrow */
+--caret-color: var(--input-color);
+```
+
+### Custom filter function
+
+**Method 1:** Extend `isMatch` method of `BetterSelect` class:
+
+```js
+import BetterSelect from "./better-select.js";
+
+class EventBetterSelect extends BetterSelect {
+  constructor() {
+    super();
+  }
+
+  /**
+   * @param {HTMLOptionElement} option an option from select element
+   * @param {string} value the value user has typed
+   * @returns {boolean} whether this option be listed or not
+   */
+  isMatch(option, value) {
+    return option.getAttribute("data-value").startsWith(value);
+  }
+}
+
+customElements.define("my-better-select", BetterSelect);
+```
+
+**Method 2:** Add a globally available function name as an attribute to the element
+
+```html
+<better-select match="myMatcherFunction">
+  <select name="country" id="country">
+    <option value="in">India</option>
+    <!-- … -->
+  </select>
+</better-select>
+
+<script>
+  function myMatcherFunction(option, value) {
+    return option.value.startsWith(value);
+  }
+</script>
+```
+
+## Contributing
+
+- Reporting issues is welcome.
+- Sending pull requests is more welcome.

index.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width">
+    <title>better-select | progressively enhanced select auto-complete</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Inconsolata"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-size: 16px;
+        font-family: Inconsolata, Fira Mono, Fira Code, monospace;
+        background: snow;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+
+      header,
+      footer {
+        padding: 2em;
+      }
+
+      header h1 {
+        margin-bottom: 1em;
+        font-size: 2.5em;
+        border-bottom: 2px dashed;
+      }
+
+      form {
+        max-width: 30em;
+        margin: 1em auto;
+        padding: 2em;
+        background: #fff;
+        border: 0.5em solid;
+      }
+
+      form > h2 {
+        border-bottom: 2px dashed;
+        font-size: 1.8em;
+        padding: 0.2em 0;
+        margin-bottom: 1em;
+      }
+
+      form > div {
+        display: flex;
+        align-items: center;
+        margin-top: 1em;
+        justify-content: space-between;
+      }
+
+      better-select select,
+      input,
+      label,
+      button {
+        width: 100%;
+        font: inherit;
+        padding: 0.5em;
+        background: transparent;
+      }
+
+      better-select select,
+      input {
+        border: 2px solid #718096;
+      }
+
+      label {
+        padding: 0;
+        font-weight: bold;
+        max-width: 15ch;
+        font-size: large;
+      }
+
+      input {
+        max-width: 5ch;
+      }
+
+      footer,
+      button {
+        margin-top: 1em;
+        padding: 1em;
+        font-size: large;
+        border: none;
+        background: #000;
+        color: gold;
+      }
+
+      footer {
+        margin-top: auto;
+        border-bottom: 0.2em solid gold;
+        text-align: right;
+      }
+
+      footer a {
+        color: gold;
+      }
+    </style>
+  </head>
+
+  <body>
+    <header>
+      <h1>better-select</h1>
+      <h2>
+        A progressively enhanced, lightweight, customizable, and accessible
+        <code>&lt;select&gt;</code> custom element with an auto-complete using
+        text input.
+      </h2>
+    </header>
+    <form action="">
+      <h2>Buy your favorite fruits</h2>
+      <div>
+        <label for="fruit">Favorite fruit</label>
+        <better-select>
+          <select id="fruit" name="fruit" required>
+            <option value="">Select</option>
+            <option value="apple">Apple</option>
+            <option value="banana">Banana</option>
+            <option value="orange">Orange</option>
+            <option value="strawberry">Strawberries</option>
+          </select>
+        </better-select>
+      </div>
+      <div>
+        <label for="amount">Quantity</label>
+        <input
+          type="text"
+          id="amount"
+          name="amount"
+          pattern="\d+"
+          inputmode="numeric"
+        />
+      </div>
+      <button>Submit</button>
+    </form>
+    <footer>
+      Made by <a href="https://sidvishnoi.github.io/">Sid Vishnoi</a>. Source
+      and documentation at
+      <a href="http://github.com/sidvishnoi/better-select">GitHub</a>.
+    </footer>
+    <script
+      src="https://unpkg.com/better-select/better-select.js"
+      type="module"
+    ></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "better-select",
+  "version": "1.0.0",
+  "description": "A progressively enhanced, lightweight, customizable, and accessible <select> custom element with text input",
+  "main": "better-select.js",
+  "type": "module",
+  "scripts": {
+    "start": "rollup -cw",
+    "build": "NODE_ENV=production rollup -c",
+    "prepare": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sidvishnoi/better-select.git"
+  },
+  "keywords": [
+    "autocomplete",
+    "better-select",
+    "combobox",
+    "datalist",
+    "editcombobox",
+    "select"
+  ],
+  "author": "Sid Vishnoi",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sidvishnoi/better-select/issues"
+  },
+  "homepage": "https://github.com/sidvishnoi/better-select#readme",
+  "devDependencies": {
+    "@ampproject/rollup-plugin-closure-compiler": "^0.22.2",
+    "@rollup/plugin-typescript": "^3.0.0",
+    "rollup": "^1.31.1",
+    "rollup-plugin-minify-html-literals": "^1.2.3",
+    "tslib": "^1.11.0",
+    "typescript": "^3.8.2"
+  }
+}