add ajax to docs

docs/components/snippets/Ajax.vue

@@ -0,0 +1,130 @@
+<template>
+	<article class="example" id="ex-ajax">
+		<h3 id="ajax" class="page-header">AJAX Remote Option Loading</h3>
+		<div class="row">
+			<div class="col-md-6">
+				<p>
+					The <code>onSearch</code> prop allows you to load options via ajax in a parent component
+					when the search text is updated. It is invoked with two parameters, <code>search</code> &amp; <code>loading</code>.
+				</p>
+
+				<h4>onSearch Callback Parameters <small>search, loading</small></h4>
+				<p>
+					<code>search</code> is a string containing the current search text.
+					<code>loading</code> is a function that accepts a boolean value,
+					and is used to toggle the 'loading' class on the top-level vue-select wrapper.
+				</p>
+
+				<h4>Loading Spinner</h4>
+				<p>
+					Vue Select includes a default loading spinner that appears when the loading class is present.
+					The <code>spinner</code> slot allows you to implement your own spinner.
+
+
+				</p>
+
+					<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>
+					</div>
+
+
+				<h4>Debounce Input</h4>
+				<p>
+					Vue Select also accepts a <code>debounce</code> prop that can be used to prevent
+					<code>onSearch</code> from being called until input has completed.
+				</p>
+
+				<h4>Library Agnostic</h4>
+				<p>
+					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.
+				</p>
+			</div>
+			<div class="col-md-6">
+				<h4>Example <small>GitHub API</small></h4>
+				<p>In this example,
+					<a href="https://github.com/vuejs/vue-resource">Vue Resource</a> is used to access the
+					<a href="https://developer.github.com/v3/">GitHub API</a>.
+				</p>
+
+				<git-hub-search-basic></git-hub-search-basic>
+				<ajax-example></ajax-example>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col-md-6">
+
+			</div>
+
+			</div>
+
+		</div>
+	</article>
+</template>
+
+<style>
+	#spinner-example {
+		max-width: 10em;
+		display: block;
+	}
+	#spinner-example .spinner {
+		display: none;
+		display: inline-block;
+		float: right;
+		opacity: 0;
+		font-size: 5px;
+		text-indent: -9999em;
+		border-top: .9em solid rgba(100,100,100,.1);
+		border-right: .9em solid rgba(100,100,100,.1);
+		border-bottom: .9em solid rgba(100,100,100,.1);
+		border-left: .9em solid rgba(60,60,60,.45);
+		transform: translateZ(0);
+		animation: vSelectSpinner 1.1s infinite linear;
+		transition: opacity .1s;
+	}
+	#spinner-example.loading .spinner {
+		opacity: 1;
+		display: block;
+	}
+	#spinner-example .spinner,
+	#spinner-example .spinner:after {
+		border-radius: 50%;
+		width: 5em;
+		height: 5em;
+	}
+	@-webkit-keyframes vSelectSpinner {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes vSelectSpinner {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>
+
+<script type="text/babel">
+	import GitHubSearchBasic from 'components/GitHubSearchBasic.vue'
+	import GitHubSearch from 'components/GitHubSearch.vue'
+	import AjaxProps from './AjaxProps.vue'
+	import AjaxExample from './AjaxExample.vue'
+
+	export default {
+		components: {GitHubSearchBasic, GitHubSearch, AjaxProps, AjaxExample},
+		data() {
+			return {
+				basicSource: false,
+				spinner: false
+			}
+		}
+	}
+</script>

docs/components/snippets/AjaxExample.vue

@@ -0,0 +1,31 @@
+<template>
+	<pre><v-code lang="markup">&lt;v-select
+	:debounce=&quot;250&quot;
+	:on-search=&quot;getOptions&quot;
+	:options=&quot;options&quot;
+	placeholder=&quot;Search GitHub Repositories...&quot;
+	label=&quot;full_name&quot;
+&gt;
+&lt;/v-select&gt;</v-code></pre>
+				<pre><v-code lang="javascript">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)
+    })
+  }
+}
+</v-code></pre>
+</template>
+
+<script type="text/babel">
+	export default {}
+</script>

docs/components/snippets/AjaxProps.vue

@@ -0,0 +1,28 @@
+<template>
+	<pre><v-code lang="javascript">/**
+ * 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
+}</v-code></pre>
+</template>
+
+<script type="text/babel">
+	export default {}
+</script>