multiselect-dl v1.2.1

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

Slots

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,
};