A multiselect input component for use in Vue3 based micro-frontends.
Studyportals MultiSelect is a multiselect input component for use in Vue3 based micro-frontends.
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.``bashinstall dependencies
npm install
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[]
}
``