Merge branch 'ft/vuepress-no-cli' into release/v3.0

# Conflicts: # src/mixins/typeAheadPointer.js
2026-05-17 02:29:37 +03:00 · 2019-02-16 12:36:38 -08:00
parent 8a78de61a6 d09c2a7b79
commit a07cb4175f
56 changed files with 5051 additions and 1959 deletions
@@ -0,0 +1,39 @@
+## `input`
+
+Triggered when the selected value changes. Used internally for `v-model`.
+
+```js
+/**
+ * @param val {Object|String}` - selected option.
+ */
+this.$emit("input", val);
+```
+
+## `option:created`
+
+Triggered when `taggable` is `true` and a new option has been created.
+
+```js
+/**
+ * @param newOption {Object} - created option  
+ */
+this.$emit("option:created", newOption);
+```
+
+## `search:blur`
+
+Triggered when the text input loses focus. The dropdown will close immediately before this
+event is triggered.
+
+```js
+this.$emit("search:blur");
+```
+
+## `search:focus`
+
+Triggered when the text input gains focus. The dropdown will open immediately before this
+event is triggered.
+
+```js
+this.$emit("search:focus");
+```
@@ -0,0 +1,369 @@
+## value
+
+Contains the currently selected value. Very similar to a
+`value` attribute on an `<input>`. You can listen for changes
+using 'change' event using v-on.
+
+```js
+value: {
+	default: null
+},
+```
+
+## options
+
+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.
+
+```js
+options: {
+	type: Array,
+	default() {
+		return [];
+	}
+},
+```
+
+## disabled
+
+Disable the entire component.
+
+```js
+disabled: {
+	type: Boolean,
+	default: false
+},
+```
+
+## clearable
+
+Can the user clear the selected property?
+
+```js
+clearable: {
+	type: Boolean,
+	default: true
+},
+```
+
+## maxHeight
+
+Sets the max-height property on the dropdown list.
+
+```js
+maxHeight: {
+	type: String,
+	default: "400px"
+},
+```
+
+## searchable
+
+Enable/disable filtering the options.
+
+```js
+searchable: {
+	type: Boolean,
+	default: true
+},
+```
+
+## multiple
+
+Equivalent to the `multiple` attribute on a `<select>` input.
+
+```js
+multiple: {
+	type: Boolean,
+	default: false
+},
+```
+
+## placeholder
+
+Equivalent to the `placeholder` attribute on an `<input>`.
+
+```js
+placeholder: {
+	type: String,
+	default: ""
+},
+```
+
+## transition
+
+Sets a Vue transition property on the `.dropdown-menu`. vue-select
+does not include CSS for transitions, you'll need to add them yourself.
+
+```js
+transition: {
+	type: String,
+	default: "fade"
+},
+```
+
+## clearSearchOnSelect
+
+Enables/disables clearing the search text when an option is selected.
+
+```js
+clearSearchOnSelect: {
+	type: Boolean,
+	default: true
+},
+```
+
+## closeOnSelect
+
+Close a dropdown when an option is chosen. Set to false to keep the dropdown
+open (useful when combined with multi-select, for example)
+
+```js
+closeOnSelect: {
+	type: Boolean,
+	default: true
+},
+```
+
+## label
+
+Tells vue-select what key to use when generating option
+labels when each `option` is an object.
+
+```js
+label: {
+	type: String,
+	default: "label"
+},
+```
+
+## index
+
+Tells vue-select what key to use when generating option
+values when each `option` is an object.
+
+```js
+index: {
+	type: String,
+	default: null
+},
+```
+
+## getOptionLabel
+
+Callback to generate the label text. If `{option}`
+is an object, returns `option[this.label]` by default.
+
+Label text is used for filtering comparison and
+displaying. If you only need to adjust the
+display, you should use the `option` and
+`selected-option` slots.
+
+```js
+getOptionLabel: {
+	type: Function,
+	default(option) {
+		if (this.index) {
+			option = this.findOptionByIndexValue(option);
+		}
+
+		if (typeof option === "object") {
+			if (!option.hasOwnProperty(this.label)) {
+				return console.warn(
+					`[vue-select warn]: Label key "option.${this.label}" does not` +
+						` exist in options object ${JSON.stringify(option)}.\n` +
+						"http://sagalbot.github.io/vue-select/#ex-labels"
+				);
+			}
+			return option[this.label];
+		}
+		return option;
+	}
+},
+```
+
+## onChange
+
+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 `v-model` to retrieve the selected value.
+
+```js
+onChange: {
+	type: Function,
+	default: function(val) {
+		this.$emit("input", val);
+	}
+},
+```
+
+## onTab
+
+Select the current value if `selectOnTab` is enabled
+
+```js
+onTab: {
+	type: Function,
+	default: function() {
+		if (this.selectOnTab) {
+			this.typeAheadSelect();
+		}
+	}
+},
+```
+
+## taggable
+
+Enable/disable creating options from searchInput.
+
+```js
+taggable: {
+	type: Boolean,
+	default: false
+},
+```
+
+## tabindex
+
+Set the tabindex for the input field.
+
+```js
+tabindex: {
+	type: Number,
+	default: null
+},
+```
+
+## pushTags
+
+When true, newly created tags will be added to
+the options list.
+
+```js
+pushTags: {
+	type: Boolean,
+	default: false
+},
+```
+
+## filterable
+
+When true, existing options will be filtered
+by the search text. Should not be used in conjunction
+with taggable.
+
+```js
+filterable: {
+	type: Boolean,
+	default: true
+},
+```
+
+## filterBy
+
+Callback to determine if the provided option should
+match the current search text. Used to determine
+if the option should be displayed.
+
+```js
+filterBy: {
+	type: Function,
+	default(option, label, search) {
+		return (label | "").toLowerCase().indexOf(search.toLowerCase()) > -1;
+	}
+},
+```
+
+## filter
+
+Callback to filter results when search text
+is provided. Default implementation loops
+each option, and returns the result of
+this.filterBy.
+
+```js
+filter: {
+	type: Function,
+	default(options, search) {
+		return options.filter(option => {
+			let label = this.getOptionLabel(option);
+			if (typeof label === "number") {
+				label = label.toString();
+			}
+			return this.filterBy(option, label, search);
+		});
+	}
+},
+```
+
+## createOption
+
+User defined function for adding Options
+
+```js
+createOption: {
+	type: Function,
+	default(newOption) {
+		if (typeof this.mutableOptions[0] === "object") {
+			newOption = { [this.label]: newOption };
+		}
+		this.$emit("option:created", newOption);
+		return newOption;
+	}
+},
+```
+
+## resetOnOptionsChange
+
+When false, updating the options will not reset the select value
+
+```js
+resetOnOptionsChange: {
+	type: Boolean,
+	default: false
+},
+```
+
+## noDrop
+
+Disable the dropdown entirely.
+
+```js
+noDrop: {
+	type: Boolean,
+	default: false
+},
+```
+
+## inputId
+
+Sets the id of the input element.
+
+```js
+inputId: {
+	type: String
+},
+```
+
+## dir
+
+Sets RTL support. Accepts `ltr`, `rtl`, `auto`.
+
+```js
+dir: {
+	type: String,
+	default: "auto"
+},
+```
+
+## selectOnTab
+
+When true, hitting the 'tab' key will select the current select value
+
+```js
+selectOnTab: {
+	type: Boolean,
+	default: false
+}
@@ -0,0 +1,65 @@
+::: tip
+VueSelect leverages scoped slots to allow for total customization of the presentation layer.
+Slots can be used to change the look and feel of the UI, or to simply swap out text.
+:::
+
+## Selected Option(s)
+
+### `selected-option`
+
+#### Scope: 
+
+- `option {Object}` - A selected option
+
+```html
+<slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
+	{{ getOptionLabel(option) }}
+</slot>
+```
+
+### `selected-option-container`
+
+#### Scope:
+
+- `option {Object}` - A selected option
+- `deselect {Function}` - Method used to deselect a given option when `multiple` is true
+- `disabled {Boolean}` - Determine if the component is disabled
+- `multiple {Boolean}` - If the component supports the selection of multiple values
+
+```html
+<slot v-for="option in valueAsArray" name="selected-option-container"
+			:option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
+	<span class="selected-tag" v-bind:key="option.index">
+		<slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
+			{{ getOptionLabel(option) }}
+		</slot>
+		<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
+			<span aria-hidden="true">&times;</span>
+		</button>
+	</span>
+</slot>
+```
+
+## Component Actions
+
+### `spinner`
+
+```html
+<slot name="spinner">
+	<div class="spinner" v-show="mutableLoading">Loading...</div>
+</slot>
+```
+
+## Dropdown
+
+### `option`
+
+#### Scope:
+
+- `option {Object}` - The currently iterated option from `filteredOptions`
+
+```html
+<slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
+	{{ getOptionLabel(option) }}
+</slot>
+```