- new dedicated development template

- separate environment for developing docs
- clear out discarded couscous files
- start converting docs markdown

docs/md/Ajax.md

@@ -0,0 +1,31 @@
+## AJAX Remote Option Loading
+
+
+The `onSearch` prop allows you to load options via ajax in a parent component when the search text is updated. It is invoked with two parameters, `search` & `loading`.
+
+#### onSearch Callback Parameters <small>search, loading</small>
+
+`search` is a string containing the current search text. `loading` is a function that accepts a boolean value, and is used to toggle the 'loading' class on the top-level vue-select wrapper.
+
+#### Loading Spinner
+
+Vue Select includes a default loading spinner that appears when the loading class is present. The `spinner` slot allows you to implement your own spinner.
+
+<div id="spinner-example" :class="{loading:spinner}"><button class="btn btn-sm btn-default" @click="spinner = !spinner">Toggle Spinner</button>
+
+<div class="spinner" v-show="spinner">Loading...</div>
+
+#### Debounce Input
+
+Vue Select also accepts a `debounce` prop that can be used to prevent `onSearch` from being called until input has completed.
+
+#### Library Agnostic
+
+Since Vue.js does not ship with ajax functionality as part of the core library, it's up to you to process the ajax requests in your parent component.
+
+
+#### Example <small>GitHub API</small>
+
+In this example, [Vue Resource](https://github.com/vuejs/vue-resource) is used to access the [GitHub API](https://developer.github.com/v3/).
+
+<git-hub-search-basic></git-hub-search-basic><ajax-example></ajax-example></div>

docs/md/AjaxExample.md

@@ -0,0 +1,28 @@
+```html
+<v-select
+	:debounce="250"
+	:on-search="getOptions"
+	:options="options"
+	placeholder="Search GitHub Repositories..."
+	label="full_name"
+>
+</v-select>
+```
+```js
+data() {
+	return {
+		options: null
+	}
+},
+methods: {
+  getOptions(search, loading) {
+    loading(true)
+    this.$http.get('https://api.github.com/search/repositories', {
+       q: search
+    }).then(resp => {
+       this.options = resp.data.items
+       loading(false)
+    })
+  }
+}
+```

docs/md/AjaxProps.md

@@ -0,0 +1,24 @@
+```js
+/**
+* Accept a callback function that will be run
+* when the search text changes. The callback
+* will be invoked with these parameters:
+
+* @param {search}  String          Current search text
+* @param {loading} Function(bool)  Toggle loading class
+*/
+onSearch: {
+  type: Function,
+  default: false
+},
+
+/**
+* Milliseconds to wait before invoking this.onSearch().
+* Used to prevent sending an AJAX request until input
+* has completed.
+*/
+debounce: {
+  type: Number,
+  default: 0
+}
+```

docs/md/CustomLabels.md

@@ -0,0 +1,9 @@
+### Custom Labels
+
+By default when the `options` array contains objects, `vue-select` looks for the `label` key for display. If your data source doesn't contain that key, you can set your own using the `label` prop.
+
+On this page, the list of countries used in the examples contains `value` and `label` properties: `{value: "CA", label: "Canada"}`. In this example, we'll display the country code instead of the label.
+
+`<v-select label="value" :options="countries"></v-select>`
+
+<v-select label="value" :options="countries"></v-select>

docs/md/Install.md

@@ -0,0 +1,45 @@
+## NPM Based WorkFlows
+``` bash
+$ npm install vue-select
+```
+
+```html
+<template>
+   <div id="myApp">
+      <v-select v-model="selected" :options="options"></v-select>
+   </div>
+</template>
+
+<script>
+import vSelect from 'vue-select'
+export default {
+  components: {vSelect},
+  data() {
+     return {
+        selected: null,
+        options: ['foo','bar','baz']
+     }
+  }
+}
+</script>
+```
+
+## Browser Globals
+
+`v1.3.0+` no longer requires any toolchain to use the component:
+
+Just include `vue` & `vue-select.js` - I recommend using [unpkg.com](https://unpkg.com/#/).
+
+```html
+<!-- use the latest release -->
+<script src="https://unpkg.com/vue-select@latest"></script>
+<!-- or point to a specific release -->
+<script src="https://unpkg.com/vue-select@1.30"></script>
+```
+Then register the component in your javascript:
+
+```js
+Vue.component('v-select', VueSelect.VueSelect);
+```
+
+From there you can use as normal. Here's an [example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output).

docs/md/OnChange.md

@@ -0,0 +1,26 @@
+### Change Event <small>Vuex Compatibility</small>
+
+vue-select provides a `change` event. This function is passed the currently selected value(s) as it's only parameter.
+
+This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.
+
+<div class="form-inline">
+<div class="radio"><label><input type="radio" v-model="callback" value="console"> `console.log(val)`</label> </div>
+<div class="radio"><label><input type="radio" v-model="callback" value="alert"> `alert(val)`</label> </div>
+</div>
+
+```html
+<v-select v-on:change="consoleCallback" :options="countries"></v-select>
+```
+
+```js
+methods: {
+  consoleCallback(val) {
+    console.dir(JSON.stringify(val))
+  },
+
+  alertCallback(val) {
+    alert(JSON.stringify(val))
+  }
+}
+```

docs/md/ReactiveOptions.md

@@ -0,0 +1,19 @@
+### Reactive Options
+
+When the list of options provided by the parent changes, vue-select will react as you'd expect.
+
+<div style="margin-top:0;" class="radio">
+  <label>
+    <input type="radio" name="reactive-options" v-model="reactive" :value="countries">
+    `<v-select :options="countries"></v-select>`
+  </label>
+</div>
+
+<div class="radio">
+  <label>
+    <input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
+    `<v-select options="['foo','bar','baz']"></v-select>`
+  </label>
+</div>
+
+<v-select :options="reactive"></v-select>

docs/md/SingleMultiple.md

@@ -0,0 +1,29 @@
+<article class="doc-row" id="ex-multiple">
+
+### Single/Multiple Selection
+
+<div class="row">
+
+<div class="col-md-6">
+
+#### Single Option Select
+
+```html
+<v-select :options="countries"></v-select>
+```
+
+</div>
+
+<div class="col-md-6">
+
+#### Multiple Option Select
+
+```html
+<v-select multiple :options="countries"></v-select>
+```
+
+</div>
+
+</div>
+
+</article>

docs/md/VModel.md

@@ -0,0 +1,15 @@
+### Two-Way Value Syncing
+
+The most common use case for vue-select is being able to sync the components value with a parent component. The `value` property supports two-way data binding to accomplish this. The `.sync` data-binding modifier is completely optional. You may use `value` without a two-way binding to preselect options. Here we have preselected 'Canada' by setting `syncedVal: 'Canada'` on the parent component. The buttons below demonstrate how you can set the `value` from the parent. Current value: <v-code>{{ syncedVal }}</v-code>
+
+<div class="form-group">
+`<v-select v-model="syncedVal" :options="countries"></v-select>`
+</div>
+<div class="form-group">
+<v-select v-model="syncedVal" :options="countries"></v-select>
+</div>
+
+<div class="form-group">
+<button @click="syncedVal = 'United States'" class="btn btn-default">Set to United States</button>
+<button @click="syncedVal = 'Canada'" class="btn btn-default">Set to Canada</button>
+</div>