Install via NPM
-npm install sagalbot/vue-selectTo use the vue-select component in your templates, simply import it, and register it within your component.
-<template>
- <div>
- <v-select :value.sync="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>Alternatively, you can register the component globally. This is ideal if you are going to be using vue-select in multiple components.
import Vue from 'vue'
-import vSelect from 'vue-select'
-
-Vue.component('v-select', vSelect)The resulting vue-select, and it's value:
+<v-select :options="countries"></v-select>
+<v-select multiple :options="countries"></v-select>
When the list of options provided by the parent changes, vue-select will react as you'd expect.
+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-select :value.sync="syncedVal" :options="countries"></v-select>
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:
+<v-select label="value" :options="countries"></v-select>
vue-select provides an 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.
+ ++<v-select v-on:change="consoleCallback" :options="countries"></v-select>
+methods: { + consoleCallback(val) { + console.dir(JSON.stringify(val)) + }, + + alertCallback(val) { + alert(JSON.stringify(val)) + } +}
{{ repo.description }}
+props: {
+
+ /**
+ * Contains the currently selected value. Very similar to a
+ * `value` attribute on an . You can listen for changes
+ * using 'change' event using v-on
+ * @type {Object||String||null}
+ */
+ value: {
+ default: null
+ },
+
+ /**
+ * An array of strings or objects to be used as dropdown choices.
+ * If you are using an array of objects, vue-select will look for
+ * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
+ * custom label key can be set with the `label` prop.
+ * @type {Array}
+ */
+ options: {
+ type: Array,
+ default() { return [] },
+ },
+
+ /**
+ * Enable/disable filtering the options.
+ * @type {Boolean}
+ */
+ searchable: {
+ type: Boolean,
+ default: true
+ },
+
+ /**
+ * Equivalent to the `multiple` attribute on a `<select>` input.
+ * @type {Boolean}
+ */
+ multiple: {
+ type: Boolean,
+ default: false
+ },
+
+ /**
+ * Equivalent to the `placeholder` attribute on an `<input>`.
+ * @type {String}
+ */
+ placeholder: {
+ type: String,
+ default: ''
+ },
+
+ /**
+ * Sets a Vue transition property on the `.dropdown-menu`. vue-select
+ * does not include CSS for transitions, you'll need to add them yourself.
+ * @type {String}
+ */
+ transition: {
+ type: String,
+ default: 'expand'
+ },
+
+ /**
+ * Enables/disables clearing the search text when an option is selected.
+ * @type {Boolean}
+ */
+ clearSearchOnSelect: {
+ type: Boolean,
+ default: true
+ },
+
+ /**
+ * Tells vue-select what key to use when generating option labels when
+ * `option` is an object.
+ * @type {String}
+ */
+ label: {
+ type: String,
+ default: 'label'
+ },
+
+ /**
+ * An optional callback function that is called each time the selected
+ * value(s) change. When integrating with Vuex, use this callback to trigger
+ * an action, rather than using :value.sync to retreive the selected value.
+ * @type {Function}
+ * @default {null}
+ */
+ onChange: Function
+ }
+
+ }
+
+ 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.
+
+ 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.
+
+ 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.
+
+
+
+ Vue Select also accepts a debounce prop that can be used to prevent
+ onSearch from being called until input has completed.
+
+ 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. +
+In this example, + Vue Resource is used to access the + GitHub API. +
+ ++<v-select + :debounce="250" + :on-search="getOptions" + :options="options" + placeholder="Search GitHub Repositories..." + label="full_name" +> +</v-select>
+ + + \ 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 @@ + +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) + }) + } +} +
+ + + \ No newline at end of file diff --git a/docs/components/snippets/InstallSnippet.vue b/docs/components/snippets/InstallSnippet.vue new file mode 100644 index 0000000..cb7693f --- /dev/null +++ b/docs/components/snippets/InstallSnippet.vue @@ -0,0 +1,41 @@ + +/** + * 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 +}
Install from GitHub via NPM
++ +npm install sagalbot/vue-select
To use the vue-select component in your templates, simply import it, and register it with your component.
++<template> + <div id="myApp"> + <v-select :value.sync="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> +
+ 
+ 
+ 
+ 
+ 
+
A native Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.
+ +Install from GitHub via NPM
-- -npm install sagalbot/vue-select
To use the vue-select component in your templates, simply import it, and register it with your component.
-- - \ No newline at end of file diff --git a/old_docs/vuex/actions.js b/old_docs/vuex/actions.js deleted file mode 100644 index 799cbfd..0000000 --- a/old_docs/vuex/actions.js +++ /dev/null @@ -1,15 +0,0 @@ -export const setSelected = ({ dispatch }, selected) => { - dispatch('SET_SELECTED', selected) -} - -export const toggleOptionType = ({ dispatch }) => { - dispatch('TOGGLE_OPTION_TYPE') -} - -export const setPlaceholder = ({ dispatch }, placeholder) => { - dispatch('SET_PLACEHOLDER', placeholder) -} - -export const toggleMultiple = ({ dispatch }) => { - dispatch('TOGGLE_MULTIPLE') -} \ No newline at end of file diff --git a/old_docs/vuex/store.js b/old_docs/vuex/store.js deleted file mode 100644 index 6dd9207..0000000 --- a/old_docs/vuex/store.js +++ /dev/null @@ -1,48 +0,0 @@ -import Vue from 'vue' -import Vuex from 'vuex' - -Vue.use(Vuex) -Vue.config.debug = true - -const state = { - selected: null, - placeholder: 'Select a Country', - multiple: true, - maxHeight: '400px', - options: { - advanced: require('../data/advanced.js'), - simple: require('../data/simple.js'), - }, - optionType: 'advanced' -} - -const mutations = { - SET_SELECTED (state, selected) { - state.selected = selected - }, - - TOGGLE_OPTION_TYPE (state) { - if( state.optionType === 'advanced' ) { - state.optionType = 'simple' - } else { - state.optionType = 'advanced' - } - }, - - SET_PLACEHOLDER (state, placeholder) { - state.placeholder = placeholder - }, - - TOGGLE_MULTIPLE (state) { - state.multiple = ! state.multiple - }, - - SET_MAX_HEIGHT (state, maxHeight) { - state.maxHeight = maxHeight - } -} - -export default new Vuex.Store({ - state, - mutations -}) diff --git a/package.json b/package.json index 2f494d3..849c084 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "license": "MIT", "scripts": { "dev": "node build/dev-server.js", + "dev:docs": "node build/dev-server.js --docs", "build": "node build/build.js", "lint": "eslint --ext .js,.vue src test/unit/specs", "test": "karma start test/unit/karma.conf.js --single-run", @@ -38,6 +39,8 @@ "file-loader": "^0.8.4", "function-bind": "^1.0.2", "gh-pages": "^0.11.0", + "highlight.js": "^9.9.0", + "html-loader": "^0.4.4", "html-webpack-plugin": "^2.8.1", "http-proxy-middleware": "^0.15.2", "inject-loader": "^2.0.1", @@ -52,6 +55,7 @@ "karma-spec-reporter": "0.0.26", "karma-webpack": "^1.7.0", "lolex": "^1.4.0", + "markdown-loader": "^0.1.7", "node-sass": "^3.7.0", "ora": "^0.2.0", "phantomjs-prebuilt": "^2.1.3", @@ -63,6 +67,7 @@ "vue-hot-reload-api": "^2.0.7", "vue-html-loader": "^1.2.3", "vue-loader": "^10.0.2", + "vue-markdown-loader": "^0.6.1", "vue-resource": "^1.0.3", "vue-style-loader": "^1.0.0", "vue-template-compiler": "^2.1.8", diff --git a/src/dev.js b/src/dev.js index cae4133..4a619b4 100644 --- a/src/dev.js +++ b/src/dev.js @@ -1,6 +1,6 @@ import Vue from 'vue' import vSelect from './components/Select.vue' -import countries from '../old_docs/data/advanced.js' +import countries from 'docs/data/advanced.js' Vue.component('v-select', vSelect)<template> - <div id="myApp"> - <v-select :value.sync="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> -