Add provider function, templated labels and update README.

.eslintrc.js

@@ -6,9 +6,12 @@ module.exports = {
   extends: ["plugin:vue/essential", "@vue/prettier"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+      "prettier/prettier": {
+          tabWidth: 4,
+      }
   },
   parserOptions: {
     parser: "babel-eslint"
-  }
+  },
 };

README.md

@@ -43,7 +43,7 @@ export default {
 
 ### Passing options
 
-The `options` prop accepts arrays of strings
+The `options` property accepts arrays of strings.
 
 ```html
   <v-select :options="['Item 1', 'Item 2']" />
@@ -53,3 +53,80 @@ And arrays of objects
 ```html
 <v-select :options="[{value: 1, text: 'Item 1'}, {value: 2, text: 'Item 2'}]" />
 ```
+
+Or you can provide a function to fetch the items.
+```html
+<template>
+<v-select :options="fetchData" />
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                users: [ /* list of users*/ ],
+            }  
+        },
+        methods: {
+            fetchData(ctx) {
+                return this.users.filter(user => user.nickname.indexOf(ctx.search) > -1);
+            }
+        }
+    }
+</script>
+```
+
+Even asynchronously.
+```html
+<template>
+    <v-select :options="fetchData" />
+</template>
+<script>
+    export default {
+        methods: {
+            fetchData(ctx) {
+                return fetch(`/users?search=${ctx.search}`);
+            }
+        }
+    }
+</script>
+```
+
+To customize the look of the dropdown, you can use the `label` slot.
+```html
+<v-select :options="...">
+    <template slot="label" slot-scope="data">
+        <img :src="data.option.picture">
+        {{data.option.name}}
+    </template>
+</v-select>
+```
+
+### Supported Props
+#### `value-prop`
+To determine which item is selected, we use the `"value"` property on the selected object by default. 
+You may override this behaviour by setting name in the `value-prop` property.
+
+#### `text-prop`
+When not using the `label` slot, you can override which property will show as label
+by setting the `text-prop` property.
+
+#### `label-not-found`
+If there are no items to be displayed (or they are all filtered away), by default we show "No results matched",
+You may override this text by setting the desired text in the `label-not-found` property.
+> CAVEAT: Be aware the search term is always appended to this string.
+> Use the `label-not-found` template to provide your own formatting. This slot accepts the 
+> Scope `search` for the search term.
+
+#### `label-title`
+If there are items in the array, but none were selected. This text will appear.
+Default: `"Nothing selected`
+
+#### `label-search-placeholder`
+This property overrides the placeholder set in the search `<input>`. This is `"Search"` by default.
+
+
+#### `searchable`
+Boolean - Determine wether the search box should be enabled.
+
+#### `show-default-option`
+Boolean - Determine wether `label-title` should be shown.

package.json

@@ -42,12 +42,12 @@
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
     "minimist": "^1.2.0",
-    "node-sass": "^4.9.0",
-    "sass-loader": "^7.1.0",
+    "node-sass": "^4.12.0",
     "rollup": "^0.66.2",
     "rollup-plugin-buble": "^0.19.2",
     "rollup-plugin-uglify-es": "0.0.1",
     "rollup-plugin-vue": "^4.3.0",
+    "sass-loader": "^7.1.0",
     "vue": "^2.5.22",
     "vue-template-compiler": "^2.5.22"
   }

public/images/profilepictures/Credits.txt

@@ -0,0 +1,5 @@
+(c) Thispersondoesnotexist.com
+
+Produced by a GAN (generative adversarial network)
+StyleGAN (Dec 2018) - Karras et al. and Nvidia
+Original GAN (2014) - Goodfellow et al.