From b64969aee37191180b296a645a75c5b7a8167dc7 Mon Sep 17 00:00:00 2001 From: Jeff Sagal Date: Sat, 28 May 2016 14:56:52 -0700 Subject: [PATCH] bump readme --- README.md | 234 +++++++++++++++++++++++++++++------------------------- 1 file changed, 126 insertions(+), 108 deletions(-) diff --git a/README.md b/README.md index d2cbc81..8e49cc7 100644 --- a/README.md +++ b/README.md @@ -4,16 +4,17 @@ #### Features -- No Dependencies +- **Tagging Support (+v.1.1.0)** +- No JS Dependencies - List Filtering/Searching - Supports Vuex - Select Single/Multiple Options -- Bootstrap Friendly Classes -- Excellent Test Coverage +- Bootstrap Friendly Markup +- +90% Test Coverage #### Upcoming/In Progress -- Tagging (adding options not present in list, see `taggable` branch) +- ~~Tagging (adding options not present in list, see `taggable` branch)~~ **added in v.1.1.0** - Rich Option Templating - Asyncronous Option Loading @@ -48,120 +49,137 @@ export default { ## Parameters ```javascript - /** - * Contains the currently selected value. Very similar to a - * `value` attribute on an &lt;input&gt;. In most cases, you'll want - * to set this as a two-way binding, using :value.sync. However, - * this will not work with Vuex, in which case you'll need to use - * the onChange callback property. - * @type {Object||String||null} - */ - value: { - default: null - }, + /** + * Contains the currently selected value. Very similar to a + * `value` attribute on an . In most cases, you'll want + * to set this as a two-way binding, using :value.sync. However, + * this will not work with Vuex, in which case you'll need to use + * the onChange callback property. + * @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 [] }, - }, + /** + * 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 {Object} + */ + options: { + type: Array, + default() { return [] }, + }, - /** - * Enable/disable filtering the options. - * @type {Boolean} - */ - searchable: { - type: Boolean, - default: true - }, + /** + * Sets the max-height property on the dropdown list. + * @deprecated + * @type {String} + */ + maxHeight: { + type: String, + default: '400px' + }, - /** - * Equivalent to the `multiple` attribute on a `<select>` input. - * @type {Object} - */ - multiple: { - type: Boolean, - default: false - }, + /** + * Enable/disable filtering the options. + * @type {Boolean} + */ + searchable: { + type: Boolean, + default: true + }, - /** - * Equivalent to the `placeholder` attribute on an `<input>`. - * @type {Object} - */ - placeholder: { - type: String, - default: '' - }, + /** + * Equivalent to the `multiple` attribute on a ``. + * @type {Object} + */ + placeholder: { + type: String, + default: '' + }, - /** - * Enables/disables clearing the search text when an option is selected. - * @type {Boolean} - */ - clearSearchOnSelect: { - type: Boolean, - default: true - }, + /** + * 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' + }, - /** - * Tells vue-select what key to use when generating option labels when - * `option` is an object. - * @type {Object} - */ - label: { - type: String, - default: 'label' - }, + /** + * Enables/disables clearing the search text when an option is selected. + * @type {Boolean} + */ + clearSearchOnSelect: { + type: Boolean, + default: true + }, - /** - * 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 {[type]} - */ - onChange: Function, + /** + * Tells vue-select what key to use when generating option + * labels when each `option` is an object. + * @type {String} + */ + label: { + type: String, + default: 'label' + }, - /** - * Enable/disable creating options from searchInput. - * @type {Boolean} - */ - tagable: { - type: Boolean, - default: false - }, + /** + * 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, - /** - * User defined function for adding Options - * @type {Function} - */ - createOption: { - type: Function, - default: function (value) { - let firstOption = this.options[0] - if (firstOption && typeof firstOption === 'object' ) { - value = { - value - } - value[this.label] = value - } - return value - } - } + /** + * Enable/disable creating options from searchInput. + * @type {Boolean} + */ + taggable: { + type: Boolean, + default: false + }, + + /** + * When true, newly created tags will be added to + * the options list. + * @type {Boolean} + */ + pushTags: { + type: Boolean, + default: false + }, + + /** + * User defined function for adding Options + * @type {Function} + */ + createOption: { + type: Function, + default: function (newOption) { + if (typeof this.options[0] === 'object') { + return {[this.label]: newOption} + } + return newOption + } + } ```