Security News
PyPI’s New Archival Feature Closes a Major Security Gap
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
github.com/IneoO/vue-multi-select
This component gives you a multi/single select with the power of Vuejs components.
https://github.com/IneoO/vue-multi-select
Set a props for label when empty data
npm install vue-multi-select --save
import vueMultiSelect from 'vue-multi-select';
import 'vue-multi-select/dist/lib/vue-multi-select.min.css'
Issues and PR's are much appreciated. When you create a new PR please make it against the develop branch when adding new features and to the fix branch when fixing small issues instead of master.
Params | Type |
---|---|
options | Object |
filters | Array |
selectOptions | Array |
v-model | Array |
reloadInit | Boolean |
btnLabel | Function |
btnClass | String |
popoverClass | String |
search | Boolean |
eventName | String |
position | String |
searchPlaceholder | String |
historyButton | Boolean |
historyButtonText | String |
disabled | Boolean |
disabledUnSelect | Boolean |
emptyTabText | String |
(NB. position is a string ex: 'top-left', 'top-right', default is 'bottom-left')
Events | params |
---|---|
selectionChanged | values selected |
open | - |
close | - |
(NB. selectionChanged naming can be change with eventName)
Params | Type | Default | Description |
---|---|---|---|
cssSelected | Function | (option) => option['selected'] ? { 'font-weight': 'bold',color: '#5755d9',} : '' | Css passed to value |
groups | Boolean | false | Display or not groups selection |
multi | Boolean | false | Set single or multiple selection |
labelList | String | 'list' | Name Attributes for list |
labelName | String | 'name' | Name Attributes for value to display |
labelValue | String | labelName | Name Attributes for value to comparaison between them |
labelSelected | String | 'selected' | Name attributes for value selected |
labelDisabled | String | 'disabled' | Name attributes for value disabled |
groupName | String | 'name' | Name Attributes for groups to display |
*if you use html balise and don't want to have them find in the search use labelHtml, search will just check the property labelName but v-html the labelHtml.
// Exemple with Select/Deselect all
const filters = [];
filters.push({
nameAll: 'Select all', // label when want to select all elements who answer yes to the function
nameNotAll: 'Deselect all', //label when want to deselect all elements who answer yes to the function
func(elem) {
return true;
},
});
// Second exemple to select all elements who contain 2
filters.push({
nameAll: 'Select all elements with 2',
nameNotAll: 'Deselect all elements with 2',
func(elem) {
return elem.name.indexOf('2') !== -1;
}
});
// when groups not set or false
data = [
{name: 'choice 1'}, // Name can be changed with labelName in options
{name: 'choice 2'},
{name: 'choice 3'},
{name: 'choice 4'},
{name: 'choice 5'},
]
// or just an array
// it's also possible when to have an array of strings
// in list when groups is set to true.
data = [
'choice 1',
'choice 2',
'choice 3',
'choice 4',
'choice 5',
]
// when groups set to true
data = [{
name: 'choice 1', // Can be changed with tabName in options
list: [
{name: 'choice 1'}, // Name can be changed with labelName in options
{name: 'choice 2'},
{name: 'choice 3'},
{name: 'choice 4'},
{name: 'choice 5'},
]
}, {
name: 'choice 10', // Can be changed with tabName in options
list: [
{name: 'choice 11'}, // Name can be changed with labelName in options
{name: 'choice 12'},
{name: 'choice 13'},
{name: 'choice 14'},
{name: 'choice 15'},
]
}]
[ {name: 'choice 1'}, {name: 'choice 11'}] // In the case we selected choice 1 and choice 11
you can access to openMultiSelect()/closeMultiSelect() by ref to manualy open/close the mutliSelect
<template>
<mult-select ref="multiSelect" />
</template>
<script>
export default {
mounted() {
this.refs.multiSelect.openMultiSelect();
},
};
</script>
<template>
<div>
<multi-select
v-model="values"
:options="options"
:filters="filters"
:btnLabel="btnLabel"
search
historyButton
:searchPlaceholder="Search"
:selectOptions="data" />
</div>
</template>
<script>
import vueMultiSelect from 'vue-multi-select';
import 'vue-multi-select/dist/lib/vue-multi-select.css';
export default {
data() {
return {
search: 'Search things',
btnLabel: values => `A simple vue multi select (${values.length})`,
name: 'first group',
values: [],
data: [{
name: 'first group',
list: [
{ name: '0' },
{ name: '2' },
{ name: '3' },
{ name: '8' },
{ name: '9' },
{ name: '11' },
{ name: '13' },
{ name: '14' },
{ name: '15' },
{ name: '18' },
],
}, {
name: 'second group',
list: [
{ name: '21' },
{ name: '22' },
{ name: '24' },
{ name: '27' },
{ name: '28' },
{ name: '29' },
{ name: '31' },
{ name: '33' },
{ name: '35' },
{ name: '39' },
],
}],
filters: [{
nameAll: 'select <= 10',
nameNotAll: 'Deselect <= 10',
func(elem) {
return elem.name <= 10;
},
}, {
nameAll: 'Select contains 2',
nameNotAll: 'Deselect contains 2',
func(elem) {
return elem.name.indexOf('2') !== -1;
},
}],
options: {
multi: true,
groups: true,
},
};
},
methods: {
},
components: {
vueMultiSelect,
},
};
</script>
It's possible to use slot-scope to custom option
<template>
<div>
<vue-multi-select
v-model="values"
search
historyButton
:options="options"
:filters="filters"
:btnLabel="btnLabel"
@open="open"
@close="close"
:selectOptions="data">
<template v-slot:option="{option}">
<input type="checkbox" :checked="option.selected"/>
<span>{{option.name}}</span>
</template>
</vue-multi-select>
</div>
</template>
- `npm run dev`: Shortcut to run dev
- `npm run doc`: Shortcut to run dev-doc
- `npm run build:doc`: Shortcut to build doc.
- `npm run build:lib`: Production ready build of your library as an ES6 module (via UMD), ready to import into another project via npm.
Testing Supported By
FAQs
Unknown package
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.