Extended Multiple Select Component For Vue 3

Install & Download:

# Yarn
$ yarn add vue3-extended-multiselect
# NPM
$ npm install vue3-extended-multiselect

Description:

The vue3-extended-multiselect component provides numerous features to extend default select box behavior in Vue 3 apps.

Features:

Built-in themes: Ditch the CSS hassle with pre-designed themes that look great out of the box.
Flexible options: Handle various option types without worrying about compatibility issues.
Enhanced filtering: Ensure accurate results with thorough filtering of your option list.
Informative warnings: Catch potential errors before they impact your application.
Customizable selection tools: Control the number of displayed options and deselect them with ease.
Tailored customization: Fine-tune the look and feel with various slots for personalized styling.

How to use it:

1. Install and import the Vue3ExtendedMultiselect component.

import Vue3ExtendedMultiselect from "vue3-extended-multiselect"

2. Add the vue3-extended-multiselect component to the app.

<vue3-extended-multiselect />

3. Available props to customize the component.

/**
 * Determines whether to immediately select just now created option
 * @property {boolean} autoSelectCreatedOption
 */
autoSelectCreatedOption: {
  type: Boolean,
  required: true,
},
/**
 * Determines whether to show noResults slot
 * and block with new option's text
 * @property {boolean} createOnTheGo
 */
createOnTheGo: {
  type: Boolean,
  required: true,
},
/**
 * Determines whether to emit clear event
 * by option selection
 * @property {boolean} clearBySelectWhenMultiple
 */
clearBySelectWhenMultiple: {
  type: Boolean,
  required: true,
},
/**
 * Determines whether to define thematic class for
 * every option
 * @property {boolean} highlightOptions
 */
highlightOptions: {
  type: Boolean,
  required: true,
},
/**
 * Determines "loading" state of component
 * that disables option selection
 * @property {boolean} loading
 */
loading: {
  type: Boolean,
  required: true,
},
/**
 * Determines whether to use functionality of
 * multiple select
 * @property {boolean} multiple
 */
multiple: {
  type: Boolean,
  required: true,
},
/**
 * Determines whether to show selected options
 * in options list
 * @property {boolean} selectedOptionsShown
 */
selectedOptionsShown: {
  type: Boolean,
  required: true,
},
/**
 * Determines whether to log warnings about incorrect props
 * @property {boolean} showInsertWarnings
 */
showInsertWarnings: {
  type: Boolean,
  required: true,
},
/**
 * Determines whether to show marker slot
 * @property {boolean} showMarker
 */
showMarker: {
  type: Boolean,
  required: true,
},
/**
 * Defines class of options list placement after expanse
 * @property {string} chosenToggleAppearanceSide
 */
chosenToggleAppearanceSide: {
  type: String,
  required: true,
},
/**
 * Determines type of option that will be created
 * @property {string} createOptionType
 */
createOptionType: {
  type: String,
  required: true,
},
/**
 * Determines a field in options of type "object"
 * which value will be used to disable such options.
 * @property {string} disableByField
 */
disableByField: {
  type: String,
  required: true,
},
/**
 * Sets labels for options of type "object"
 * or Array instances which length/keys length equals 0
 * @property {string} emptyObjectsPlaceholder
 */
emptyObjectsPlaceholder: {
  type: String,
  required: true,
},
/**
 * Determines field of option which will be displayed as label
 * @property {string} label
 */
label: {
  type: String,
  required: true,
},
/**
 * Determines field in options of type "object"
 * to use in internal search.
 * @property {string} searchByField
 */
searchByField: {
  type: String,
  required: true,
},
/**
 * Current theme of extended-multiselect
 * used in class definition
 * @property {string} themeType
 */
themeType: {
  type: String,
  required: true,
},
/**
 * Determines maximal limit of selected options
 * @property {number|null} maxOptionsCount
 */
maxOptionsCount: {
  type: Number,
  default: null,
},
/**
 * Determines minimal limit of selected options
 * @property {number|null} minOptionsCount
 */
minOptionsCount: {
  type: Number,
  default: null,
},
/**
 * Defines value of "max-height" css-property of options list
 * @property {number} toggleMaxHeight
 */
toggleMaxHeight: {
  type: Number,
  required: true,
},
/**
 * Defines value of "min-height" css-property of options list
 * @property {number} toggleMinHeight
 */
toggleMinHeight: {
  type: Number,
  default: null,
},
/**
 * List of fields for new options of type "object" created by user
 * if "createOnTheGo" prop equals true
 * Each field will have basic value of "searchValue" prop
 * @property {Array} createOptionFields
 */
createOptionFields: {
  type: Array,
  required: true,
},
/**
 * Searches for options with listed primitive values
 * and disables it
 * @property {Array} disabledPrimitiveOptionsConverted
 */
disabledPrimitiveOptionsConverted: {
  type: Array,
  required: true,
},
/**
 * Unfiltered options list
 * @property {Array} options
 */
options: {
  type: Array,
  required: true,
},
/**
 * Defines value of "padding" css-property of every option
 * @property {Array} optionsPadding
 */
optionsPadding: {
  type: Array,
  required: true,
},
    
/**
 * List of options which should be selected by default
 * if "multiple" prop equals true
 * @property {Array} preselectedOptions
 */
preselectedOptions: {
  type: Array,
  required: true,
},
/**
 * List of options filtered by maximal available options amount
 * @property {Array} restrictedOptions
 */
restrictedOptions: {
  type: Array,
  required: true,
},
/**
 * List of selected options or list with single selected option
 * if "multiple" prop equals false
 * @property {Array} selectedOptions
 */
selectedOptions: {
  type: Array,
  required: true,
},
/**
 * List of key names that in combination with "enter" key
 * should cancel option selection
 * @property {Array} specialKeysBlock
 */
specialKeysBlock: {
  type: Array,
  required: true,
},
/**
 * Reactive instance of LocalEmitter class
 * @property {object} emitter
 */
emitter: {
  type: Object,
  required: true,
},
/**
 * Creates custom label for every option in options list
 * @property {Function} createCustomOptionLabel
 */
createCustomOptionLabel: {
  type: Function,
  required: true,
},
/**
 * Loader function provided by user.
 * @property {Function} externalOptionsLoader
 * @default null
 * @param {string} value - value of search field
 */
externalOptionsLoader: {
  type: Function,
  default: null,
},
/**
 * Defines "height" css-property of every option element
 * @property {number} anyOptionWrapperBlockHeight
 */
anyOptionWrapperBlockHeight: {
  type: [Number, String],
  required: true,
},
/**
 * Option which should be selected by default
 * if "multiple" prop equals false
 * @property {UnionPropType|null} preselectedOption
 */
preselectedOption: {
  type: UnionPropType,
  default: null,
},

4. Events.