Multiselect

Studyportals MultiSelect is a multiselect input component for use in Vue3 based micro-frontends.

Table of Contents

• Setup & commands
• External dependencies
  • Linear icons
  • Vue-Config
• Including MultiSelect in your project
• Properties
• Events
• Public methods & properties
• Interfaces

Setup & commands

The following commands can be used to setup and build the package. Also, we're using husky to run unit tests before a git push is done. This could be by-passed (if absolutely necessary) by running git push --no-verify.

# install dependencies
npm install

# publish the package to npm
npm publish

# build the package for local testing
npm run build

# run linter
npm run lint
npm run lint:fix # with fix

# run unit tests
npm run unit

External dependencies

Linear icons

The AuthenticationService displays multiple icons from the linear iconset. The URL's for the set can be provided by the UX team.

Vue-Config

vue-config is a DLL package that is used by the AuthenticationService for several Vue.js related packages. It can be loaded from the jsdelivr.net CDN.

Including MultiSelect in your project

MultiSelect is a DLL supported component. This means that you should install it's DLL package and then reference the DLL in the build setup of the project that is integrating it.

npm install @studyportals/multiselect-dll

dllPackages: [
	{
		name: "multiselect-dll",
		manifest: require("@studyportals/multiselect-dll/dist/multiselect.json")
	}
]

When running your project outside of a portal environment you will need to include the multiselect-dll bundle from our CDN:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@studyportals/multiselect-dll@version/dist/multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@studyportals/multiselect-dll@version/dist/multiselect.min.css">

Then you will be able to import MultiSelect in your component files:

import { MultiSelect } from "@studyportals/multiselect";

And import MultiSelect styling in your component files:

@import '~@studyportals/multiselect/dist/style.css';

Properties

MultiSelect has a lot of properties that can be configured in order to control styling and behaviour.

options : IOption

Default value: []

An array of available options to be selected.

groups : IOptionGroup[]

Default value: []

An array of grouped options to be selected.

label : string

Default value: "Label"

A custom label for the input.

placeholder : string

Default value: "Select an option"

A placeholder text that is shown when multipleOptions is set to true and the user has already selected one or more options.

entity : string

Default value: ""

The singular name of the entity represented in the selectbox. This will be used for display purposes like the placeholder in the search input.

validationLabel : string

Default value: ""

The text that is displayed in the validation message.

helperMessage : string

Default value: ""

Some text that will be displayed as a helper message right under the MultiSelect box.

multipleOptions : boolean

Default value: false

This value determines whether or not a user should be able to select multiple options.

searchable : boolean

Default value: false

This value determines whether the options will be searchable with a search input.

disabled : boolean

Default value: false

This value determines whether the selectbox will be disabled.

valid : boolean

Default value: true

This value determines if the selectbox should be displayed in an invalid state.

Events

The MultiSelect component emits the following events:

updated: IOption | IOption[]

updated is emitted when the users selects a new option within the MultiSelect instance. The payload contains the currently selected option or all currently selected options in case multiple options may be selected.

Public methods & properties

MultiSelect exposes a couple of public methods and properties which can be accessed by adding a ref property to your Multiselect instance like so:

<MultiSelect
	ref="myMultiSelectInstance"
	:options="options"
/>

selectOption(option: IOption)

selectOption is a method that can be used to (pre)select an option in the MultiSelect instance. The internal update loop will be triggered when using this method to prefill a MultiSelect instance.

this.$refs.myMultiSelectInstance["selectOption"]({
	label: "myLabel",
	value: "myValue"
})

selectedOption: IOption | null

selectedOption is a property that has the currently selected option as a value.

this.$refs.myMultiSelectInstance["selectedOption"];

selectedOptions: IOption[]

selectedOptions is a property that has all of the currently selected options as a value.

this.$refs.myMultiSelectInstance["selectedOptions"];

Interfaces

MultiSelect uses the following interface:

interface IOption {
	label: string,
	value: any,
	icon?: string
}

interface IOptionGroup {
	label: string,
	options: IOption[]
}