Multiselect-dl

multiselect is a vue component used to select multiple options at the same time. This component only has basic and general style and the users can style it the way they want, that's why this component can be used in any vue project.

Install

npm install --save multiselect-dl

Global Use

in your main.js

import Vue from 'vue';
import MultiselectDl from 'multiselect-dl';

Vue.use(MultiselectDl);

The global way includes the Tag component.

Local Use

in your .vue file

import MultiSelect from 'multiselect-dl';

In Nuxt

import vue file directly (multiselect-dl.vue).

import Multiselect from 'multiselect-dl/src/components/multiselect-dl';

only SSR

import Multiselect from 'multiselect-dl/lib/ssr';

How to use

Props

name | value | comments ---- | ----- | ------ clearable | boolean | hide or show the "x" button. Clear all selected items from input. menuMaxHeight | string | menu max height. Default auto. minHeight | string | menu min height. Default 0.5rem. multiselect | boolean | If It's true multi selections is available but It's false only simple selection is available selectAll | boolean | It works in multi selections and with select-all-items slot. This prop select / unselect all items in menu items options | array | options to show in menu items prop | string | object's prop. This is required when you use objects and its value It has to be unique. transitionName | string | The name of the vue-transition. transitionMode | string | The name of the vue-transition mode (out-in / in-out). Default out-in.

Slots

name | Description -----| ------ tag | slot for item selected in the input. props = { tag }. Tag is a selected item and can be one or more. clear-icon | slot for icon to clear selected items menu-activator | slot for icon to activate menu menu | slot for menu (menu items). props = { menuItem, selected, menuIndex }

Multiselector

<div>
	<h4>Multiselector</h4>
	<div class="flex justify-center">
		<MultiSelect
			clearable
			select-all
			multiselect
			prop="id"
			data-cy="multiselect-container"
			class="multi-select-container flex items-center justify-between"
			transition-name="vertical"
			:options="options"
			v-model="optionsSelected"
		>
			<template v-slot:tag="{ tag, removeIt }">
				<Tag @click.stop="removeIt(tag)">{{tag.name}}</Tag>
			</template>
			<template v-slot:menu-activator>
				<div class="menu-icon">&#9757;</div>
			</template>
			<template v-slot:clear-icon>
				<span  class="icon-clear">&#9747;</span>
			</template>
			<template v-slot:select-all-items="{ isSelected }">
				<div
					:class="[
						'menu-item',
						{ 'menu-item-selected': isSelected },
					]"
				>
					<div
						v-show="isSelected"
						:class="{ 'selected-icon': isSelected }"
					>&#9829;</div>
					<span class="menu-item-name">Todos</span>
				</div>
			</template>
			<template v-slot:menu="{ menuItem }">
				<div
					:class="[
						'menu-item',
						{ 'menu-item-selected': menuItem.isSelected },
					]"
				>
					<div
						v-show="menuItem.isSelected"
						:class="{ 'selected-icon': menuItem.isSelected }"
					>&#9829;</div>
					<span class="menu-item-name">{{menuItem.name}}</span>
				</div>
			</template>
		</MultiSelect>
	</div>
</div>

import MultiSelect from './components/multiSelect.vue';
import Tag from './components/tag.vue';

function data() {
	return {
		options: [
			{ id: 1, name: 'Juan' },
			{ id: 2, name: 'Noah' },
			{ id: 3, name: 'Churry' },
			{ id: 4, name: 'Kaki' },
			{ id: 5, name: 'Pepito' },
		],
		optionsSelected: [],
	};
}
export default {
	name: 'app',
	components: {
		MultiSelect,
		Tag,
	},
	data,
};

body {
	margin: 0;
}
#app {
	background-color:#efecea;
	display: flex;
	flex-direction: column;
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	height: 100vh;
	justify-content: space-evenly;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
h4 {
	margin: 0;
}

.flex-display {
	display: flex;
}
.items-center {
	align-items: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-end {
	justify-content: flex-end;
}
.justify-center {
	justify-content: center;
}
.multi-select-container {
	background-color: white;
	border: 1px solid #ddddc7;
	border-radius: 0.5rem;
	padding: 0.5rem;
	width: 45%;

	.icon-clear {
		align-items: center;
		background-color: white;
		border: 1px solid;
		border-radius: 50%;
		color: red;
		cursor: pointer;
		display: flex;
		font-size: 13px;
		height: 13px;
		justify-content: center;
		margin-right: 5px;
		width: 13px;
	}

	.icon-clear:hover {
		background-color: red;
		border-color: red;
		color: white;
		font-weight: bold;
	}
}

.menu-item {
	border-bottom: 1px solid brown;
	display: flex;
	justify-content: center;
	padding: 0.75rem 1.25rem;
}
.menu-item:hover {
	background-color: aqua;
}
.menu-item-selected,
.selected-icon {
	color: #4dd599;
}
.vertical-enter-active, .vertical-leave-active {
  transition: opacity 250ms;
}
.vertical-enter, .vertical-leave-to {
  opacity: 0;
}
.selected-icon {
	left: 0;
	margin-left: 10px;
	position: absolute;
}

Simple Selector

<h4>Selector simple con string</h4>
<div class="flex justify-center">
	<MultiSelect
		clearable
		data-cy="string-simple-container"
		class="multi-select-container flex items-center justify-between"
		transition-name="vertical"
		:options="stringOptions"
		v-model="stringSelection"
	>
		<template v-slot:tag="{ tag }">
			<span>{{tag}}</span>
		</template>
		<template v-slot:menu-activator>
			<div class="menu-icon">&#9757;</div>
		</template>
		<template v-slot:clear-icon>
			<span  class="icon-clear">&#9747;</span>
		</template>
		<template v-slot:menu="{ menuItem, selected }">
			<div
				:class="[
					'menu-item',
					{ 'menu-item-selected': selected },
				]"
			>
				<div
					v-show="selected"
					:class="{ 'selected-icon': selected }"
				>&#9829;</div>
				<span class="menu-item-name">{{menuItem}}</span>
			</div>
		</template>
	</MultiSelect>
</div>

import MultiSelect from './components/multiSelect.vue';
import Tag from './components/tag.vue';

function data() {
	return {
		stringOptions: ['Rojo', 'Azul', 'Verde', 'Morado', 'Blanco', 'Negro', 'Amarillo'],
		stringSelection: '',
	};
}

export default {
	name: 'app',
	components: {
		MultiSelect,
		Tag,
	},
	data,
};