From bfae6b30683f6384db4f447b6b84bf0cd1c064c8 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Wed, 15 Jun 2016 20:34:38 -0700
Subject: [PATCH] add ajax to docs

---
 docs/{App.vue => Docs.vue}                    |  10 +-
 docs/assets/scss/_demo.scss                   |  12 +-
 docs/components/{Install.vue => Examples.vue} |  97 +++++++------
 docs/components/GithubSearch.vue              | 122 ++++++++++++++++
 docs/components/GithubSearchBasic.vue         |  38 +++++
 docs/components/snippets/Ajax.vue             | 130 ++++++++++++++++++
 docs/components/snippets/AjaxExample.vue      |  31 +++++
 docs/components/snippets/AjaxProps.vue        |  28 ++++
 docs/main.js                                  |  15 +-
 index.html                                    |   2 +-
 src/components/Select.vue                     |   1 +
 11 files changed, 430 insertions(+), 56 deletions(-)
 rename docs/{App.vue => Docs.vue} (69%)
 rename docs/components/{Install.vue => Examples.vue} (69%)
 create mode 100644 docs/components/GithubSearch.vue
 create mode 100644 docs/components/GithubSearchBasic.vue
 create mode 100644 docs/components/snippets/Ajax.vue
 create mode 100644 docs/components/snippets/AjaxExample.vue
 create mode 100644 docs/components/snippets/AjaxProps.vue

diff --git a/docs/App.vue b/docs/Docs.vue
similarity index 69%
rename from docs/App.vue
rename to docs/Docs.vue
index 9559b45..e2e1dc4 100644
--- a/docs/App.vue
+++ b/docs/Docs.vue
@@ -8,7 +8,7 @@
 <template>
   <div class="container">
     <div class="col-md-10 col-md-offset-1">
-      <install></install>
+      <examples></examples>
       <params></params>
     </div>
   </div>
@@ -19,14 +19,14 @@
 /**
  * Note that this file (and anything other than src/components/Select.vue)
  * has nothing to do with how you use vue-select. These files are used
- * for the demo site at http://sagalbot.github.io/vue-select/. They'll
- * be moved out of this repo in the very near future to avoid confusion.
+ * for the demo site at http://sagalbot.github.io/vue-select/.
  */
 
-import Install from './components/Install.vue'
+import Examples from './components/Examples.vue'
 import Params from './components/Params.vue'
+import Ajax from './components/snippets/Ajax.vue'
 
 export default {
-  components: { Params, Install }
+  components: { Params, Examples, Ajax }
 }
 </script>
diff --git a/docs/assets/scss/_demo.scss b/docs/assets/scss/_demo.scss
index ddf3996..e505c06 100644
--- a/docs/assets/scss/_demo.scss
+++ b/docs/assets/scss/_demo.scss
@@ -49,13 +49,15 @@ p.lead {
 
 .btn-outline {
   background: none;
-  padding: 10px 16px;
-  font-size: 18px;
   line-height: 1.3333333;
   border-radius: 6px;
-  border: 3px solid #91ddec;
+  border: 2px solid #91ddec;
   color: #147688;
 
+  &.btn-lg {
+    border-width: 3px;
+  }
+
   &:hover {
     border-color: rgb(65, 184, 131);
     background-color: rgba(65, 184, 131, 0.67);
@@ -88,4 +90,8 @@ p.lead {
 .accolades a {
   margin-left: 0;
   margin-right: 5px;
+}
+
+.doc-row {
+  padding: 2em 0;
 }
\ No newline at end of file
diff --git a/docs/components/Install.vue b/docs/components/Examples.vue
similarity index 69%
rename from docs/components/Install.vue
rename to docs/components/Examples.vue
index c4c593a..48341fd 100644
--- a/docs/components/Install.vue
+++ b/docs/components/Examples.vue
@@ -14,48 +14,52 @@
 
   <h2 class="page-header" id="examples">Examples</h2>
 
-  <h3 class="page-header">Single/Multiple Selection</h3>
-  <div class="row">
-    <div class="col-md-6">
-      <h4>Single Option Select</h4>
-      <pre><v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
-      <v-select :options="countries"></v-select>
-    </div>
-
-    <div class="col-md-6">
-      <h4>Multiple Option Select</h4>
-      <pre><v-code lang="markup">&#x3C;v-select multiple :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
-      <v-select multiple :options="countries"></v-select>
-    </div>
-  </div>
-
-  <h3 class="page-header">Reactive Options</h3>
-
-  <div class="row">
-    <div class="col-md-6">
-        <p>When the list of options provided by the parent changes, vue-select will react as you'd expect.</p>
-        <div style="margin-top:0;" class="radio">
-        <label>
-          <input type="radio" name="reactive-options" v-model="reactive" :value="countries">
-          <v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
-        </label>
+  <article class="doc-row" id="ex-multiple">
+    <h3 class="page-header">Single/Multiple Selection</h3>
+    <div class="row">
+      <div class="col-md-6">
+        <h4>Single Option Select</h4>
+        <pre><v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
+        <v-select :options="countries"></v-select>
       </div>
 
-      <div class="radio">
-        <label>
-          <input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
-          <v-code lang="markup">&#x3C;v-select options=&#x22;['foo','bar','baz']&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
-        </label>
+      <div class="col-md-6">
+        <h4>Multiple Option Select</h4>
+        <pre><v-code lang="markup">&#x3C;v-select multiple :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
+        <v-select multiple :options="countries"></v-select>
       </div>
     </div>
+  </article>
 
-    <div class="col-md-6">
-      <v-select :options="reactive"></v-select>
+  <article class="doc-row" id="ex-reactive">
+    <h3 class="page-header">Reactive Options</h3>
+    <div class="row">
+      <div class="col-md-6">
+          <p>When the list of options provided by the parent changes, vue-select will react as you'd expect.</p>
+          <div style="margin-top:0;" class="radio">
+          <label>
+            <input type="radio" name="reactive-options" v-model="reactive" :value="countries">
+            <v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
+          </label>
+        </div>
+
+        <div class="radio">
+          <label>
+            <input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
+            <v-code lang="markup">&#x3C;v-select options=&#x22;['foo','bar','baz']&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
+          </label>
+        </div>
+      </div>
+
+      <div class="col-md-6">
+        <v-select :options="reactive"></v-select>
+      </div>
     </div>
-  </div>
+  </article>
 
-  <h3 class="page-header">Two-Way Value Syncing</h3>
-  <div class="row">
+  <article class="doc-row" id="ex-syncing">
+    <h3 class="page-header">Two-Way Value Syncing</h3>
+    <div class="row">
     <div class="col-md-6">
       <p>The most common use case for vue-select is being able to sync the components value with a parent component. The <code>value</code> property supports two-way data binding to accomplish this.</p>
       <p>The <code>.sync</code> data-binding modifier is completely optional. You may use <code>value</code> without a two-way binding to preselect options.</p>
@@ -78,9 +82,11 @@
       </div>
     </div>
   </div>
+  </article>
 
-  <h3 class="page-header">Custom Labels</h3>
-  <div class="row">
+  <article class="doc-row" id="ex-labels">
+    <h3 class="page-header">Custom Labels</h3>
+    <div class="row">
     <div class="col-md-6">
       <p>By default when the <code>options</code> array contains objects, <code>vue-select</code> looks for the <code>label</code> key for display. If your data source doesn't contain that key, you can set your own using the <code>label</code> prop.</p>
       <p>On this page, the list of countries used in the examples contains <code>value</code> and <code>label</code> properties: <v-code lang="json">{value: "CA", label: "Canada"}</v-code>. In this example, we'll display the country code instead of the label.</p>
@@ -91,9 +97,11 @@
       <v-select :options="countries" label="value"></v-select>
     </div>
   </div>
+  </article>
 
-  <h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
-  <div class="row">
+  <article class="doc-row" id="ex-vuex">
+    <h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
+    <div class="row">
     <div class="col-md-6">
       <p>vue-select provides an <code>onChange</code> property that accepts a callback function. This function is passed the currently selected value(s) as it's only parameter.</p>
       <p>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.</p>
@@ -127,13 +135,12 @@
       <v-select :options="countries" :on-change="getCallback"></v-select>
     </div>
   </div>
+  </article>
+
+  <ajax></ajax>
 </section>
 </template>
 
-<style type="scss">
-
-</style>
-
 <script>
   /**
    * Note that this file (and anything other than src/components/Select.vue)
@@ -145,9 +152,11 @@
   import simple from '../data/simple'
   import vSelect from 'src/components/Select.vue'
   import vCode from './Code.vue'
+  import Ajax from './snippets/Ajax.vue'
   import InstallSnippet from './snippets/InstallSnippet.vue'
+
   export default {
-    components: {vSelect,vCode,InstallSnippet},
+    components: {vSelect,vCode,InstallSnippet,Ajax},
     data () {
       return {
         countries,
diff --git a/docs/components/GithubSearch.vue b/docs/components/GithubSearch.vue
new file mode 100644
index 0000000..c9207ff
--- /dev/null
+++ b/docs/components/GithubSearch.vue
@@ -0,0 +1,122 @@
+<style lang="scss">
+	.github-search {
+		&.panel-default {
+			border: none;
+		}
+
+		.panel-heading,
+		.panel-footer {
+			background: none;
+		}
+
+		.panel-heading {
+			padding: 0;
+			border: none;
+		}
+
+		.panel-body {
+			display: flex;
+			align-items: center;
+			border-left: 1px solid #ddd;
+			border-right: 1px solid #ddd;
+		}
+
+		.panel-footer {
+			border: 1px solid #ddd;
+		}
+
+		p {
+			margin-bottom: 0;
+		}
+
+		.v-select .dropdown-toggle {
+			border-color: #ddd;
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+			padding: 5px;
+		}
+
+		.v-select .dropdown-toggle .open-indicator {
+			top: 15px;
+			right: 15px;
+		}
+
+		.v-select .selected-tag {
+			background: none;
+			border: none;
+		}
+
+		.gravatar {
+			max-width: 25px;
+			float: left;
+			margin-right: 1em;
+		}
+
+		img {
+			margin-bottom: 0;
+		}
+
+		.badge {
+			background: #7BC8A4;
+		}
+
+		.list-inline {
+			margin: 0;
+		}
+	}
+</style>
+
+<template>
+	<div>
+		<div class="github-search panel panel-default">
+			<div class="panel-heading">
+				<v-select :debounce="250" :value.sync="repo" :options="options" :on-search="getOptions" placeholder="Search GitHub Repositories..." label="full_name"></v-select>
+			</div>
+			<div class="panel-body" v-if="repo">
+				<img :src="repo.owner.avatar_url" alt="{{ repo.owner.login }}" class="gravatar">
+				<p>{{ repo.description }}</p>
+			</div>
+			<div class="panel-footer" v-if="repo">
+				<ul class="list-inline" role="tablist">
+					<li><a href="{{ repo.url }}">Stars <span class="badge">{{ repo.stargazers_count }}</span></a>
+					</li>
+					<li><a href="{{ repo.url }}">Forks <span class="badge">{{ repo.forks }}</span></a></li>
+					<li><a href="{{ repo.url }}">Open Issues
+						<span class="badge">{{ repo.open_issues_count }}</span></a></li>
+				</ul>
+			</div>
+		</div>
+		<div v-if="error" class="alert alert-warning" role="alert">
+			<button type="button" class="close" @click="error = null">
+				<span aria-hidden="true">&times;</span></button>
+			{{ error.message }}
+		</div>
+	</div>
+</template>
+
+<script type="text/babel">
+	export default {
+		data() {
+			return {
+				repo: null,
+				error: null,
+				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)
+								})
+								.catch(err => {
+									this.error = err.data
+									loading(false)
+								})
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/docs/components/GithubSearchBasic.vue b/docs/components/GithubSearchBasic.vue
new file mode 100644
index 0000000..ec67693
--- /dev/null
+++ b/docs/components/GithubSearchBasic.vue
@@ -0,0 +1,38 @@
+<template>
+	<div>
+		<p><v-select :debounce="250" :options="options" :on-search="getOptions" placeholder="Search GitHub Repositories..." label="full_name"></v-select></p>
+
+		<div v-if="error" class="alert alert-warning" role="alert">
+			<button type="button" class="close" @click="error = null">
+				<span aria-hidden="true">&times;</span></button>
+				{{ error.message }}
+		</div>
+	</div>
+</template>
+
+<script type="text/babel">
+	export default {
+		data() {
+			return {
+				repo: null,
+				error: null,
+				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)
+								})
+								.catch(err => {
+									this.error = err.data
+									loading(false)
+								})
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/docs/components/snippets/Ajax.vue b/docs/components/snippets/Ajax.vue
new file mode 100644
index 0000000..c89641c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/components/snippets/AjaxExample.vue b/docs/components/snippets/AjaxExample.vue
new file mode 100644
index 0000000..00318bd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/components/snippets/AjaxProps.vue b/docs/components/snippets/AjaxProps.vue
new file mode 100644
index 0000000..be20eff
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/main.js b/docs/main.js
index 543ae06..435b22a 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -1,10 +1,19 @@
-import Vue from 'vue'
-import App from './App.vue'
-import store from './vuex/store'
 import 'prismjs'
+import Vue from 'vue'
+import App from './Docs.vue'
+import store from './vuex/store'
+import Resource from 'vue-resource'
 import vSelect from '../src/components/Select.vue'
+import vCode from './components/Code.vue'
+
+Vue.use(Resource)
 
 Vue.component('v-select', vSelect)
+Vue.component('v-code', vCode)
+
+Vue.filter('score', function (value) {
+  return Math.round(value)
+})
 
 Vue.config.debug = true
 Vue.config.devtools = true
diff --git a/index.html b/index.html
index 982074b..e474a1c 100644
--- a/index.html
+++ b/index.html
@@ -71,7 +71,7 @@
             </div>
           </div>
 
-          <a class="btn btn-primary btn-outline" href="https://github.com/sagalbot/vue-select"><span class="octicon octicon-mark-github"></span> View on GitHub</a>
+          <a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select"><span class="octicon octicon-mark-github"></span> View on GitHub</a>
         </div>
       </div>
       <a href="#install" class="down-arrow">
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 90991b1..04ae646 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -589,6 +589,7 @@
        */
       dropdownClasses() {
         return {
+          open: this.open,
           searchable: this.searchable,
           loading: this.loading
         }