first commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/preset-env"]]
+}

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+dist/*
+demo/demo*

.prettierignore

@@ -0,0 +1 @@
+dist

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Andrew Vasilchuk
+
+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,120 @@
+# vue-accessible-select
+
+> Vue.js accessible select component made according to [WAI-ARIA practices](https://www.w3.org/TR/wai-aria-practices/#Listbox).
+
+## ✨ Features
+
+- fully accessible;
+- ⌨️ keyboard navigation (`Page Up/Down`, `Home`, `End`);
+- 🔣 type-ahead to select option that starts with typed symbols;
+- 💅 style agnostic, so you can style it whatever you like (but including `core.scss` is highly encouraged).
+
+## 💿 Installation
+
+### 📦 Via NPM
+
+```bash
+$ npm install vue-accessible-select --save
+```
+
+### 🧶 Via Yarn
+
+```bash
+$ yarn add vue-accessible-select
+```
+
+## Initialization
+
+### As a plugin
+
+It must be called before `new Vue()`.
+
+```js
+import Vue from 'vue'
+import VueAccessibleSelect from 'vue-accessible-select'
+
+Vue.use(VueAccessibleSelect)
+```
+
+### As a global component
+
+```javascript
+import Vue from 'vue'
+import { VueAccessibleSelect } from 'vue-accessible-select'
+
+Vue.component('VueAccessibleSelect', VueAccessibleSelect)
+```
+
+### As a local component
+
+```javascript
+import { VueAccessibleSelect } from 'vue-accessible-select'
+
+export default {
+  name: 'YourAwesomeComponent',
+  components: {
+    VueAccessibleSelect,
+  },
+}
+```
+
+## 🚀 Usage
+
+```html
+<template>
+  <vue-accessible-select
+    :options="options"
+    v-model="value"
+  ></vue-accessible-select>
+</template>
+```
+
+```js
+export default {
+  // ...
+  data() {
+    return {
+      value: undefined,
+      options: [
+        {
+          value: 0,
+          label: '🍇 Grape',
+        },
+        {
+          value: { foo: 'bar' },
+          label: '🍉 Watermelon',
+        },
+        {
+          value: { foo: 'bar' },
+          label: '🥝 Kiwi',
+        },
+        {
+          value: false,
+          label: '🥭 Mango',
+        },
+        {
+          value: true,
+          label: '🍓 Strawberry',
+        },
+        {
+          value: 'lemon',
+          label: '🍋 Lemon',
+        },
+      ],
+    }
+  },
+  // ...
+}
+```
+
+```scss
+// recommended
+@import 'vue-accessible-select/src/styles/core.scss';
+
+// optional
+@import 'vue-accessible-select/src/styles/themes/default.scss';
+```
+
+## 🔒 License
+
+[MIT](http://opensource.org/licenses/MIT)

build/base/plugins/index.js

@@ -0,0 +1,5 @@
+import resolve from 'rollup-plugin-node-resolve'
+import common from 'rollup-plugin-commonjs'
+import vue from 'rollup-plugin-vue'
+
+export default [resolve(), common(), vue({ needMap: false })]

build/rollup.config.dev.js

@@ -0,0 +1,29 @@
+import path from 'path'
+import serve from 'rollup-plugin-serve'
+import livereload from 'rollup-plugin-livereload'
+import replace from 'rollup-plugin-replace'
+
+import plugins from './base/plugins/index'
+
+export default {
+  input: path.join(__dirname, '../demo/index.js'),
+  output: {
+    file: path.join(__dirname, '../demo/demo.js'),
+    format: 'iife',
+    sourcemap: true,
+  },
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    }),
+    serve({
+      open: true,
+      contentBase: path.join(__dirname, '../demo'),
+      port: 8080,
+    }),
+    livereload({
+      verbose: true,
+      watch: path.join(__dirname, '../demo'),
+    }),
+  ].concat(plugins),
+}

build/rollup.config.prod.js

@@ -0,0 +1,49 @@
+import path from 'path'
+import replace from 'rollup-plugin-replace'
+import babel from 'rollup-plugin-babel'
+import { terser } from 'rollup-plugin-terser'
+
+import plugins from './base/plugins/index.js'
+
+const name = 'VueAccessibleSelect'
+
+export default [
+  {
+    input: path.join(__dirname, '../src/index.js'),
+    output: [
+      {
+        file: 'dist/vue-accessible-select.js',
+        format: 'umd',
+        name,
+      },
+      {
+        file: 'dist/vue-accessible-select.common.js',
+        format: 'cjs',
+      },
+      {
+        file: 'dist/vue-accessible-select.esm.js',
+        format: 'esm',
+      },
+    ],
+    plugins: [
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
+    ].concat(plugins),
+  },
+  {
+    input: path.join(__dirname, '../src/index.js'),
+    output: {
+      file: 'dist/vue-accessible-select.min.js',
+      format: 'umd',
+      name,
+    },
+    plugins: [
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
+      babel(),
+      terser(),
+    ].concat(plugins),
+  },
+]

demo/App.vue

@@ -0,0 +1,92 @@
+<template>
+  <div id="app">
+    <h1>vue-accessible-select</h1>
+    <section>
+      <h2>Default usage</h2>
+      <form action="/foo" method="POST">
+        <vue-accessible-select
+          v-model="value"
+          :options="options"
+          label="Select"
+          placeholder="Select"
+        ></vue-accessible-select>
+        <button>Send form</button>
+      </form>
+      <output>{{ value }}</output>
+    </section>
+  </div>
+</template>
+
+<script>
+import VueAccessibleSelect from '../src/components/VueAccessibleSelect/VueAccessibleSelect.vue'
+
+export default {
+  name: 'App',
+  components: {
+    VueAccessibleSelect,
+  },
+  data() {
+    return {
+      value: 0,
+      options: [
+        {
+          value: 0,
+          label: '🍇 Grape',
+        },
+        {
+          value: { foo: 'bar' },
+          label: '🍉 Watermelon',
+        },
+        {
+          value: { foo: 'bar' },
+          label: '🥝 Kiwi',
+        },
+        {
+          value: false,
+          label: '🥭 Mango',
+        },
+        {
+          value: true,
+          label: '🍓 Strawberry',
+        },
+        {
+          value: 'lemon',
+          label: '🍋 Lemon',
+        },
+        {
+          value: 'melon',
+          label: '🍈 Melon',
+        },
+        {
+          value: 'foo',
+          label: 'Lorem ipsum dolor sit amet',
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+$v-select-menu-position-top: calc(100% - 1px);
+@import './src/styles/core.scss';
+@import './src/styles/themes/default.scss';
+
+html {
+  font-family: sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.48s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>

demo/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>vue-accessible-select</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./demo.js"></script>
+  </body>
+</html>

demo/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  render: h => h(App),
+})