2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-23 03:54:04 +03:00
Files
vue-select/docs/Props/Props.md
T
Jeff 018f3f7697 - add docs script to serve docs
- WIP updates to docs
- add vuejs theme
2017-10-01 13:22:50 -07:00

4.1 KiB

/**
 * Contains the currently selected value. Very similar to a
 * `value` attribute on an <input>.
 * @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 []
  },
}

/**
 * Sets the max-height property on the dropdown list.
 * @deprecated
 * @type {String}
 */
maxHeight: {
  type: String,
  default: '400px'
},

/**
 * Enable/disable filtering the options.
 * @type {Boolean}
 */
searchable: {
  type: Boolean,
  default: true
},

/**
 * Equivalent to the `multiple` attribute on a `<select>` input.
 * @type {Object}
 */
multiple: {
  type: Boolean,
  default: false
},

/**
 * Equivalent to the `placeholder` attribute on an `<input>`.
 * @type {Object}
 */
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: 'fade'
},

/**
 * Enables/disables clearing the search text when an option is selected.
 * @type {Boolean}
 */
clearSearchOnSelect: {
  type: Boolean,
  default: true
},

/**
 * Close a dropdown when an option is chosen. Set to false to keep the dropdown
 * open (useful when combined with multi-select, for example)
 * @type {Boolean}
 */
closeOnSelect: {
  type: Boolean,
  default: true
},

/**
 * Tells vue-select what key to use when generating option
 * labels when each `option` is an object.
 * @type {String}
 */
label: {
  type: String,
  default: 'label'
},

/**
 * Callback to generate the label text. If {option}
 * is an object, returns option[this.label] by default.
 * @param  {Object || String} option
 * @return {String}
 */
getOptionLabel: {
  type: Function,
  default(option) {
    if (typeof option === 'object') {
      if (this.label && option[this.label]) {
        return option[this.label]
      }
    }
    return option;
  }
},

/**
 * 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: {
  type: Function,
  default: function (val) {
    this.$emit('input', val)
  }
},

/**
 * 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(newOption) {
    if (typeof this.mutableOptions[0] === 'object') {
      newOption = {[this.label]: newOption}
    }
    this.$emit('option:created', newOption)
    return newOption
  }
},

/**
 * When false, updating the options will not reset the select value
 * @type {Boolean}
 */
resetOnOptionsChange: {
  type: Boolean,
  default: false
},

/**
 * Disable the dropdown entirely.
 * @type {Boolean}
 */
noDrop: {
  type: Boolean,
  default: false
},

/**
 * Sets the id of the input element.
 * @type {String}
 * @default {null}
 */
inputId: {
  type: String
}

AJAX

/**
 * Toggles the adding of a 'loading' class to the main
 * .v-select wrapper. Useful to control UI state when
 * results are being processed through AJAX.
 */
loading: {
  type: Boolean,
  default: false
},

/**
 * Accept a callback function that will be
 * run when the search text changes.
 *
 * loading() accepts a boolean value, and can
 * be used to toggle a loading class from
 * the onSearch callback.
 *
 * @param {search}  String          Current search text
 * @param {loading} Function(bool)  Toggle loading class
 */
onSearch: {
  type: Function,
  default: function(search, loading){}
}