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.

``bash


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

$3

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

$3

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.

`bash
npm install @studyportals/multiselect-dll
`

`javascript
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:

`html


`

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

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

And import MultiSelect styling in your component files:

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

Properties

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

$3

#### Default value: []
An array of available options to be selected.

$3

#### Default value: []
An array of grouped options to be selected.

$3

#### Default value: "Label"
A custom label for the input.

$3

#### 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.

$3

#### 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.

$3

#### Default value: ""
The text that is displayed in the validation message.

$3

#### Default value: ""
Some text that will be displayed as a helper message right under the MultiSelect box.

$3

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

$3

#### Default value: false
This value determines whether the options will be searchable with a search input.

$3

#### Default value: false
This value determines whether the selectbox will be disabled.

$3

#### Default value: true
This value determines if the selectbox should be displayed in an invalid state.

Events

The MultiSelect component emits the following events:

$3

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:

`javascript
ref="myMultiSelectInstance"
:options="options"
/>
`

$3

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.

`javascript
this.$refs.myMultiSelectInstance value: "myValue"
}" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">"selectOption"
`

$3

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

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

$3

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

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

Interfaces

MultiSelect uses the following interface:

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

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