Vue Select

import vSelect from "vue-select";

import { VueSelect, mixins } from "vue-select";

import "vue-select/dist/vue-select.css";

import Vue from "vue";
import vSelect from "vue-select";

Vue.component("v-select", vSelect);

<template>
  <div>
    <!-- Single selection -->
    <v-select 
      v-model="selected"
      :options="options"
      placeholder="Choose an option..."
    />
    
    <!-- Multiple selection -->
    <v-select
      v-model="multipleSelected"
      :options="options"
      multiple
      placeholder="Choose multiple options..."
    />
    
    <!-- Searchable with custom labels -->
    <v-select
      v-model="userSelected"
      :options="users"
      label="name"
      :reduce="user => user.id"
      placeholder="Search users..."
    />
  </div>
</template>

<script>
import vSelect from "vue-select";

export default {
  components: { vSelect },
  data() {
    return {
      selected: null,
      multipleSelected: [],
      userSelected: null,
      options: ["Option 1", "Option 2", "Option 3"],
      users: [
        { id: 1, name: "John Doe", email: "john@example.com" },
        { id: 2, name: "Jane Smith", email: "jane@example.com" }
      ]
    };
  }
};
</script>

// Main component props for selection
props: {
  value: Object | String | null,     // Currently selected value(s)
  multiple: Boolean,                 // Enable multiple selection
  options: Array,                    // Available options array
  disabled: Boolean,                 // Disable component
  clearable: Boolean,                // Show clear button
  inputId: String,                   // Input element id attribute
  resetOnOptionsChange: Boolean | Function // Control value reset behavior
}

// Core selection methods
methods: {
  select(option: Object | String): void,
  deselect(option: Object | String): void,
  clearSelection(): void
}

// Selection events
events: {
  'input': (value: any) => void,           // v-model value change
  'option:selected': (option: any) => void, // Option selected
  'option:deselected': (option: any) => void // Option deselected
}

// Search and filter props
props: {
  searchable: Boolean,              // Enable search input
  filterable: Boolean,             // Enable option filtering
  filterBy: Function,              // Custom filter matching logic
  filter: Function,               // Complete filter implementation
  clearSearchOnSelect: Boolean,   // Clear search on selection
  clearSearchOnBlur: Function    // Clear search on blur
}

// Search methods and computed properties
computed: {
  searching: Boolean,            // Current search state
  searchPlaceholder: String,     // Computed placeholder text
  filteredOptions: Array        // Options filtered by search
}

// Search events
events: {
  'search:focus': () => void,
  'search:blur': () => void,
  'search': (searchText: String, toggleLoading: Function) => void
}

// Tagging props
props: {
  taggable: Boolean,           // Enable option creation
  pushTags: Boolean,          // Add created tags to options
  createOption: Function      // Custom option creation logic
}

// Tagging methods
methods: {
  pushTag(option: Object | String): void,
  optionExists(option: Object | String): Boolean
}

// Creation events
events: {
  'option:created': (option: Object | String) => void
}

// Keyboard props
props: {
  selectOnKeyCodes: Array,        // Key codes for selection
  mapKeydown: Function,          // Custom keydown mapping
  tabindex: Number,              // Input tabindex
  autoscroll: Boolean            // Auto-scroll to highlighted option
}

// Navigation methods (from typeAheadPointer mixin)
methods: {
  typeAheadUp(): void,
  typeAheadDown(): void, 
  typeAheadSelect(): void,
  typeAheadToLastSelected(): void
}

// Navigation data
data: {
  typeAheadPointer: Number      // Current keyboard pointer position
}

// Customization props
props: {
  components: Object,           // Override child components
  placeholder: String,         // Placeholder text
  transition: String,          // Dropdown transition
  dir: String,                // Text direction (ltr/rtl/auto)
  appendToBody: Boolean,      // Append dropdown to body
  calculatePosition: Function  // Custom positioning logic
}

// Available slots
slots: {
  'header': Object,
  'selected-option-container': { option, deselect, multiple, disabled },
  'selected-option': Object,
  'search': Object,
  'open-indicator': Object,
  'spinner': Object,
  'list-header': Object,
  'option': Object,
  'no-options': Object,
  'list-footer': Object,
  'footer': Object
}

// AJAX props (from ajax mixin)
props: {
  loading: Boolean             // Show loading state
}

// Loading methods
methods: {
  toggleLoading(toggle?: Boolean): Boolean
}

// AJAX events
events: {
  'search': (searchText: String, toggleLoading: Function) => void
}

// Loading data
data: {
  mutableLoading: Boolean     // Internal loading state
}

// Core component interface
interface VueSelect extends Vue {
  // Props
  value?: Object | String | null;
  multiple?: Boolean;
  options?: Array;
  disabled?: Boolean;
  searchable?: Boolean;
  // ... (full prop list available in sub-docs)
  
  // Data
  search: String;
  open: Boolean;
  typeAheadPointer: Number;
  
  // Methods
  select(option: Object | String): void;
  deselect(option: Object | String): void;
  clearSelection(): void;
  toggleDropdown(event: Event): void;
  // ... (full method list available in sub-docs)
}

// Option value types
type OptionValue = String | Number | Object;

// Filter function signature
type FilterFunction = (options: Array, search: String) => Array;

// Reduce function signature  
type ReduceFunction = (option: Object) => any;

// Option creation function signature
type CreateOptionFunction = (option: String) => Object | String;