pui9-components 1.17.3 → 2.0.7

package/src/components/PuiMultiSelect.vue

@@ -2,95 +2,78 @@
 	<v-layout wrap class="pui-multiselect">
 		<v-flex xs12>
 			<v-card :flat="flat" elevation="0">
-				<div :class="{ 'pui-multiselect--flat': flat, 'pui-multiselect--disabled': disabled }">
+				<v-container class="pb-2 mb-n2" :class="{ 'pui-multiselect--flat': flat, 'pui-multiselect--disabled': disabled }">
 					<v-layout wrap>
 						<v-flex xs12 sm6>
 							<!-- slot1, TODO MAKE SLOTS IN FILTER AND SORTING DIALOGS-->
-							<v-flex xs12 class="pt-2">
+							<v-flex xs12 class="pa-2 pt-0 pl-1">
 								<span class="pui-dialog__title pui-dialog__title--margin">
 									{{ $t(textAvailable) }}
 								</span>
 							</v-flex>
 							<v-flex xs12 class="pui-multiselect__searchpanel">
 								<pui-text-field
-									:placeholder="labelSearch"
-									v-model="searchAvailable"
+									:placeholder="$t('pui9.components.multiSelect.search')"
+									v-model="searchTextAvailableItems"
 									clearable
 									prepend-inner-icon="far fa-search"
 									noeditable
 									realtime
 								></pui-text-field>
 							</v-flex>
-							<v-flex xs12>
+							<v-flex xs12 class="py-0 px-1">
 								<v-list
-									:style="styleList"
-									class="overflow-y-auto pui-multiselect__itemListContainer pui-multiselect__itemListContainer-available"
+									:style="`height: ${heightList}px`"
+									:two-line="itemDescription !== null"
+									class="overflow-y-auto pui-multiselect__itemListContainer"
 								>
 									<draggable
 										v-model="availableItems"
 										v-bind="dragOptions"
-										@change="onChangeAvailables"
-										@end="
-											searchSelected = '';
-											setSelectedItems();
-										"
+										@change="onChangeAvailableItems"
 										class="pui-multiselect__item-draggable"
-										:class="{ 'pui-multiselect__item--tall': itemsSearchAvailable.length === 0 }"
+										:class="{ 'pui-multiselect__item--tall': filteredAvailableItems.length === 0 }"
 									>
-										<template v-for="(item, index) in itemsSearchAvailable">
-											<!-- He quitado esta líea del v-layout de abajo porque hacía de un tamaño 	 muy grande al elemento
-													:class="{'pui-multiselect__item--tall': itemsSearchAvailable.length < 4 && index === itemsSearchAvailable.length -1}"
-											-->
-											<v-layout :key="item[itemValue]" class="pui-multiselect__item">
-												<v-flex xs1 d-flex align-center>
-													<v-list-item class="move draggable_point">
-														<v-icon small>far fa-ellipsis-v</v-icon>
-														<v-icon small>far fa-ellipsis-v</v-icon>
-													</v-list-item>
-												</v-flex>
-												<v-flex xs11>
-													<v-list-item class>
-														<v-list-item-content @dblclick="selectItemFromEvent(index, item)">
-															<v-list-item-title
-																class="pui-multiselect--title"
-																v-html="item[itemText]"
-																:title="item[itemText]"
-															></v-list-item-title>
-															<v-list-item-subtitle
-																v-if="itemDescription"
-																v-html="item[itemDescription]"
-															></v-list-item-subtitle>
-														</v-list-item-content>
-														<v-list-item-action>
-															<v-btn
-																x-small
-																icon
-																ripple
-																@click.native="selectItemFromEvent(index, item)"
-																:disabled="disabled"
-															>
-																<v-icon>far fa-plus</v-icon>
-															</v-btn>
-															<v-tooltip top v-if="itemTooltip">
-																<template v-slot:activator="{ on, attrs }">
-																	<v-btn
-																		x-small
-																		icon
-																		ripple
-																		v-bind="attrs"
-																		v-on="on"
-																		:disabled="disabled"
-																	>
-																		<v-icon>far fa-info-circle</v-icon>
-																	</v-btn>
-																</template>
-																<span v-html="item[itemTooltip]"/>
-															</v-tooltip>
-														</v-list-item-action>
-													</v-list-item>
-												</v-flex>
-											</v-layout>
-										</template>
+										<v-layout
+											v-for="(item, index) in filteredAvailableItems"
+											:key="`${index}__${item.itemText}__${item.itemValue}`"
+											class="pui-multiselect__item"
+										>
+											<v-flex xs1 d-flex align-center>
+												<v-list-item class="move draggable_point">
+													<v-icon small>far fa-ellipsis-v</v-icon>
+													<v-icon small>far fa-ellipsis-v</v-icon>
+												</v-list-item>
+											</v-flex>
+											<v-flex xs11>
+												<v-list-item class>
+													<v-list-item-content @dblclick="selectItemFromClick(item)">
+														<v-list-item-title
+															class="pui-multiselect--title"
+															v-html="item[itemText]"
+															:title="item[itemText]"
+														></v-list-item-title>
+														<v-list-item-subtitle
+															v-if="itemDescription"
+															v-html="item[itemDescription]"
+														></v-list-item-subtitle>
+													</v-list-item-content>
+													<v-list-item-action>
+														<v-btn x-small icon ripple @click.native="selectItemFromClick(item)" :disabled="disabled">
+															<v-icon>far fa-plus</v-icon>
+														</v-btn>
+														<v-tooltip class="overflow-y-hidden" max-width="30%" max-height="30%" top v-if="itemTooltip">
+															<template v-slot:activator="{ on, attrs }">
+																<v-btn x-small icon ripple v-bind="attrs" v-on="on" :disabled="disabled">
+																	<v-icon>far fa-info-circle</v-icon>
+																</v-btn>
+															</template>
+															<div class="tooltipText">{{ itemTooltip }}</div>
+														</v-tooltip>
+													</v-list-item-action>
+												</v-list-item>
+											</v-flex>
+										</v-layout>
 									</draggable>
 									<v-card v-show="availableItems.length === 0" flat class="pui-multiselect__itemListContainer-cardHelper pl-3 pr-3">
 										<div class="pui-multiselect__itemListContainer-cardHelper-text pb-1 pl-2 pr-2">
@@ -107,24 +90,24 @@
 						</v-flex>
 						<v-flex xs12 sm6>
 							<v-layout wrap>
-								<v-flex xs12 class="pt-2">
+								<v-flex xs12 class="pa-2 pt-0 pl-1">
 									<span class="pui-dialog__title pui-dialog__title--margin">
 										{{ $t(textSelected) }}
 									</span>
 								</v-flex>
 								<v-flex xs12 class="pui-multiselect__searchpanel">
 									<pui-text-field
-										:placeholder="labelSearch"
-										v-model="searchSelected"
+										:placeholder="$t('pui9.components.multiSelect.search')"
+										v-model="searchTextSelectedItems"
 										clearable
 										prepend-inner-icon="far fa-search"
 										noeditable
 										realtime
 									></pui-text-field>
 								</v-flex>
-								<v-flex xs12>
+								<v-flex xs12 class="py-0 px-1">
 									<v-list
-										:style="styleList"
+										:style="`height: ${heightList}px`"
 										:two-line="itemDescription !== null"
 										class="overflow-y-auto pui-multiselect__itemListContainer"
 										:class="compClassItemListSelected"
@@ -132,68 +115,56 @@
 										<draggable
 											v-model="selectedItems"
 											v-bind="dragOptions"
-											@change="onChangeSelected"
-											@end="
-												searchAvailable = '';
-												setSelectedItems();
-											"
+											@change="onChangeSelectedItems"
 											class="pui-multiselect__item-draggable"
-											:class="{ 'pui-multiselect__item--tall': itemsSearchSelected.length === 0 }"
+											:class="{ 'pui-multiselect__item--tall': filteredSelectedItems.length === 0 }"
 										>
-											<template v-for="(item, index) in itemsSearchSelected">
-												<!-- He quitado esta líea del v-layout de abajo porque hacía de un tamaño muy grande al elemento
-													:class="{'pui-multiselect__item--tall': itemsSearchSelected.length < 4 && index === itemsSearchSelected.length -1}"
-												-->
-												<v-layout :key="item[itemValue]" class="pui-multiselect__item">
-													<v-flex xs1 d-flex align-center>
-														<v-list-item class="move draggable_point">
-															<v-icon small>far fa-ellipsis-v</v-icon>
-															<v-icon small>far fa-ellipsis-v</v-icon>
-														</v-list-item>
-													</v-flex>
-													<v-flex xs11>
-														<v-list-item>
-															<v-list-item-content @dblclick="unselectItemFromEvent(index, item)">
-																<v-list-item-title
-																	class="pui-multiselect--title"
-																	v-html="item[itemText]"
-																	:title="item[itemText]"
-																></v-list-item-title>
-																<v-list-item-subtitle
-																	v-if="itemDescription"
-																	v-html="item[itemDescription]"
-																></v-list-item-subtitle>
-															</v-list-item-content>
-															<v-list-item-action>
-																<v-btn
-																	x-small
-																	icon
-																	ripple
-																	@click.native="unselectItemFromEvent(index, item)"
-																	:disabled="disabled"
-																>
-																	<v-icon>far fa-times</v-icon>
-																</v-btn>
-																<v-tooltip top v-if="itemTooltip">
-																	<template v-slot:activator="{ on, attrs }">
-																		<v-btn
-																			x-small
-																			icon
-																			ripple
-																			v-bind="attrs"
-																			v-on="on"
-																			:disabled="disabled"
-																		>
-																			<v-icon>far fa-info-circle</v-icon>
-																		</v-btn>
-																	</template>
-																	<span v-html="item[itemTooltip]"/>
-																</v-tooltip>
-															</v-list-item-action>
-														</v-list-item>
-													</v-flex>
-												</v-layout>
-											</template>
+											<v-layout
+												v-for="(item, index) in filteredSelectedItems"
+												:key="`${index}__${item.itemText}__${item.itemValue}`"
+												class="pui-multiselect__item"
+											>
+												<v-flex xs1 d-flex align-center>
+													<v-list-item class="move draggable_point">
+														<v-icon small>far fa-ellipsis-v</v-icon>
+														<v-icon small>far fa-ellipsis-v</v-icon>
+													</v-list-item>
+												</v-flex>
+												<v-flex xs11>
+													<v-list-item>
+														<v-list-item-content @dblclick="unselectItemFromClick(item)">
+															<v-list-item-title
+																class="pui-multiselect--title"
+																v-html="item[itemText]"
+																:title="item[itemText]"
+															></v-list-item-title>
+															<v-list-item-subtitle
+																v-if="itemDescription"
+																v-html="item[itemDescription]"
+															></v-list-item-subtitle>
+														</v-list-item-content>
+														<v-list-item-action>
+															<v-btn
+																x-small
+																icon
+																ripple
+																@click.native="unselectItemFromClick(item)"
+																:disabled="disabled"
+															>
+																<v-icon>far fa-times</v-icon>
+															</v-btn>
+															<v-tooltip top v-if="itemTooltip">
+																<template v-slot:activator="{ on, attrs }">
+																	<v-btn x-small icon ripple v-bind="attrs" v-on="on" :disabled="disabled">
+																		<v-icon>far fa-info-circle</v-icon>
+																	</v-btn>
+																</template>
+																<span v-html="item[itemTooltip]" />
+															</v-tooltip>
+														</v-list-item-action>
+													</v-list-item>
+												</v-flex>
+											</v-layout>
 										</draggable>
 										<v-card
 											v-show="selectedItems.length === 0"
@@ -219,15 +190,16 @@
 							text
 							outlined
 							:disabled="disabled || availableItems.length === 0"
-							class="puiToolbar-dialog__button"
+							class="puiToolbar-dialog__button ml-n1 mt-3 mr-2"
 							@click.native="selectAllItems()"
 							>{{ $t('pui9.components.multiSelect.add_all') }}</v-btn
 						>
+						<span class="pl-2 mt-3">{{ `${availableItems.length} ${$t('pui9.components.multiSelect.available').toLowerCase()}` }}</span>
 						<v-spacer></v-spacer>
-						<span class="pr-2" v-show="selectedItems.length === 1">{{
+						<span class="pr-2 mt-3" v-show="selectedItems.length === 1">{{
 							`${selectedItems.length} ${$t('pui9.components.multiSelect.selected_item')}`
 						}}</span>
-						<span class="pr-2" v-show="selectedItems.length > 1">{{
+						<span class="pr-2 mt-3" v-show="selectedItems.length > 1">{{
 							`${selectedItems.length} ${$t('pui9.components.multiSelect.selected_items')}`
 						}}</span>
 						<v-btn
@@ -235,33 +207,63 @@
 							outlined
 							:disabled="disabled || selectedItems.length === 0"
 							@click.native="unselectAllItems()"
-							class="puiToolbar-dialog__button"
+							class="puiToolbar-dialog__button mr-n1 mt-3"
 							>{{ $t('pui9.components.multiSelect.empty') }}</v-btn
 						>
 					</v-card-actions>
-				</div>
+				</v-container>
 			</v-card>
 		</v-flex>
 	</v-layout>
 </template>
 
 <script>
-import PuiMultiSelectMixin from '../mixins/PuiMultiSelectMixin';
+import { isEqual } from 'lodash';
 import PuiTextField from './PuiTextField';
 import draggable from 'vuedraggable';
 
 export default {
 	name: 'PuiMultiSelect',
-	mixins: [PuiMultiSelectMixin],
 	components: {
 		PuiTextField,
 		draggable
 	},
-	/**
-	 * !important there are more properties in PuiMultiSelectMixin:
-	 *     items,itemsToSelect,itemText,itemValue
-	 */
 	props: {
+		value: {
+			required: false
+		},
+		/* Array of Objects provided by the parent component */
+		items: {
+			type: Array,
+			default: null,
+			required: true
+		},
+		/**
+		 * Los items seleccionados que se pasan de inicio, se pasa en la directiva v-model al utilizar este componente
+		 * puede ser un array de Items igual que en la propiedad :items, o un array con los id's solamente
+		 */
+		itemsToSelect: {
+			type: Array,
+			default: () => []
+		},
+		// reactividad de los items seleccionados, solamente actualiza si viene true
+		trackItemsToSelect: {
+			type: Boolean,
+			default: false
+		},
+		/* Type: String
+		The items text property name */
+		itemText: {
+			type: String,
+			//type: [String, Array, Function],
+			default: 'text'
+		},
+		/* Type: String
+		The items id property name */
+		itemValue: {
+			type: String,
+			default: 'value'
+		},
 		flat: {
 			default: false
 		},
@@ -300,22 +302,20 @@ export default {
 	},
 	data() {
 		return {
-			searchAvailable: '',
-			searchSelected: '',
-			searchingAvailable: true,
-			searchingSelected: true,
+			itemTextMultiple: false,
+			itemValueMultiple: false,
+			itemTextNested: false,
+			itemValueNested: false,
+			searchTextAvailableItems: '',
+			searchTextSelectedItems: '',
 			dragOptions: {
 				group: 'multiselect',
 				disabled: this.disabled
 			},
-			selectedItems: [],
-			availableItems: []
+			availableItems: [],
+			selectedItems: []
 		};
 	},
-	updated() {
-		this.searchingAvailable = false;
-		this.searchingSelected = false;
-	},
 	computed: {
 		compClassItemListSelected() {
 			if (!this.selectedItems) {
@@ -329,205 +329,308 @@ export default {
 				'pui-multiselect__itemListContainer-selected': this.selectedItems.length === 0
 			};
 		},
-		itemsSearchAvailable() {
-			if (!this.searchAvailable) {
+		filteredAvailableItems() {
+			if (!this.searchTextAvailableItems) {
 				return this.availableItems;
 			}
-			//this.searchingAvailable = true;
+
 			return this.availableItems
 				.filter((item) => {
 					try {
 						const match =
-							item[this.itemText].toUpperCase().includes(this.searchAvailable.toUpperCase()) ||
-							(this.itemDescription && item[this.itemDescription].toUpperCase().includes(this.searchAvailable.toUpperCase()));
+							item[this.itemText].toUpperCase().includes(this.searchTextAvailableItems.toUpperCase()) ||
+							(this.itemDescription && item[this.itemDescription].toUpperCase().includes(this.searchTextAvailableItems.toUpperCase()));
 						return match;
 					} catch (e) {
 						//al item le falta el texto o la descripción
 						return false;
 					}
-				})
-				.sort((a, b) => {
-					const aValue = a[this.itemText];
-					const bValue = b[this.itemText];
-					return aValue.localeCompare(bValue);
 				});
-			//this.searchingAvailable = false;
 		},
-		itemsSearchSelected() {
-			if (!this.searchSelected) {
+		filteredSelectedItems() {
+			if (!this.searchTextSelectedItems) {
 				return this.selectedItems;
 			}
-			//this.searchingSelected = true;
+
 			return this.selectedItems
 				.filter((item) => {
 					try {
 						const match =
-							item[this.itemText].toUpperCase().includes(this.searchSelected.toUpperCase()) ||
-							(this.itemDescription && item[this.itemDescription].toUpperCase().includes(this.searchSelected.toUpperCase()));
+							item[this.itemText].toUpperCase().includes(this.searchTextSelectedItems.toUpperCase()) ||
+							(this.itemDescription && item[this.itemDescription].toUpperCase().includes(this.searchTextSelectedItems.toUpperCase()));
 						return match;
 					} catch (e) {
 						//al item le falta el texto o la descripción
 						return false;
 					}
-				})
-				.sort((a, b) => {
-					const aValue = a[this.itemText];
-					const bValue = b[this.itemText];
-					return aValue.localeCompare(bValue);
 				});
-			//this.searchingSelected = false;
 		},
-		styleList() {
-			return `height: ${this.heightList.toString()}px`;
+		selected() {
+			return this.selectedItems.length > 0;
+		}
+	},
+	watch: {
+		items(newValue, oldValue) {
+			if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+				this.checkItemText();
+				this.checkItemValue();
+
+				this.setAvailableItems();
+				this.setSelectedItems();
+			}
 		},
-		labelSearch() {
-			return this.$t('pui9.components.multiSelect.search');
+		itemsToSelect: {
+			handler() {
+				if (this.trackItemsToSelect) {
+					this.setAvailableItems();
+					this.setSelectedItems();
+				}
+			},
+			deep: true
 		}
 	},
+	mounted() {
+		this.checkItemText();
+		this.checkItemValue();
+
+		this.setAvailableItems();
+		this.setSelectedItems();
+	},
 	methods: {
+		checkItemText() {
+			this.itemTextMultiple = Array.isArray(this.itemText);
+
+			if (this.itemTextMultiple === false) {
+				this.itemTextNested = this.checkForNestedFields(this.itemText);
+			}
+		},
+		checkItemValue() {
+			this.itemValueMultiple = Array.isArray(this.itemValue);
+
+			if (this.itemValueMultiple === false) {
+				this.itemValueNested = this.checkForNestedFields(this.itemValue);
+			}
+		},
+		checkForNestedFields(stringField) {
+			if (stringField instanceof Function) {
+				return false;
+			}
+
+			return stringField.split('.').length > 1;
+		},
+		// order items by itemText alphabetically
+		orderItems(items) {
+			return items.sort((a, b) => {
+				const aValue = a[this.itemText] ? a[this.itemText] : '';
+				const bValue = b[this.itemText] ? b[this.itemText] : '';
+				return aValue.localeCompare(bValue);
+			});
+		},
 		setAvailableItems() {
-			this.availableItems = [];
-			this.items
-				.sort((item1, item2) => {
-					if (item1[this.itemText] > item2[this.itemText]) {
-						return 1;
-					} else if (item1[this.itemText] < item2[this.itemText]) {
-						return -1;
-					}
-					return 0;
-				})
-				.forEach((item) => this.availableItems.push(item));
+			this.availableItems = [...this.items];
 		},
-		selectItem(item) {
-			this.selectedItems.push(item);
-			this.availableItems.forEach((availableItem, index) => {
-				if (item[this.itemValue] === availableItem[this.itemValue]) {
+		setSelectedItems() {
+			this.selectedItems = [];
+
+			if (!this.itemsToSelect || this.itemsToSelect.length === 0) {
+				return;
+			}
+
+			for (let i = 0, length = this.itemsToSelect.length; i < length; i++) {
+				// this.selectItem(this.itemsToSelect[i]);
+				this.selectItemFromItemValue(this.itemsToSelect[i]);
+			}
+		},
+		// solo compara los valores de los items, se usa en setSelectItems
+		selectItemFromItemValue(item) {
+			for (let index = 0, length = this.availableItems.length; index < length; index++) {
+				const availableItem = this.availableItems[index];
+				if (availableItem[this.itemValue] === item[this.itemValue]) {
+					this.selectedItems.push({ ...item });
 					this.availableItems.splice(index, 1);
+					return;
 				}
-			});
-			this.$emit('input', this.selectedItems);
+			}
 		},
-		selectItemById(id, theItem) {
-			this.selectedItems.push(theItem);
+		// compara la equivalencia del objeto
+		selectItem(item) {
 			for (let index = 0, length = this.availableItems.length; index < length; index++) {
 				const availableItem = this.availableItems[index];
-				if (availableItem[this.itemValue] === id) {
-					//comprobamos por referencia que el item y el availableItem no es lo mismo,
-					//en este caso hay que theItem que se acaba de añadir 4 lineas de código atras, y añadimos el bueno
-					//esto significa que theItem solo lleva los campos de la pk y no es el item "entero"
-					if (availableItem !== theItem) {
-						this.selectedItems.pop();
-						this.selectedItems.push(availableItem);
-					}
+				if (isEqual(availableItem, item)) {
+					this.selectedItems.push({ ...item });
 					this.availableItems.splice(index, 1);
 					return;
 				}
 			}
 		},
-		setSelectedItems() {
-			this.$emit('input', this.selectedItems);
-		},
 		unselectItem(item) {
-			this.availableItems.push(item);
-			this.selectedItems.forEach((selectedItem, index) => {
-				if (item[this.itemValue] === selectedItem[this.itemValue]) {
+			for (let index = 0, length = this.selectedItems.length; index < length; index++) {
+				const selectedItem = this.selectedItems[index];
+				if (isEqual(selectedItem, item)) {
+					this.availableItems.push({ ...item });
 					this.selectedItems.splice(index, 1);
+					return;
 				}
-			});
-			this.$emit('input', this.selectedItems);
+			}
 		},
-		selectItemFromEvent(index, item) {
+		selectItemFromClick(item) {
 			if (this.disabled) {
 				return;
 			}
-			this.searchSelected = '';
-			if (this.searchAvailable) {
-				this.selectItem(item);
-				return;
-			}
-			this.availableItems.splice(index, 1);
-			this.selectedItems.push(item);
+
+			this.selectItem(item);
 			this.$emit('input', this.selectedItems);
 		},
-		unselectItemFromEvent(index, item) {
+		unselectItemFromClick(item) {
 			if (this.disabled) {
 				return;
 			}
-			this.searchAvailable = '';
-			if (this.searchSelected) {
-				this.unselectItem(item);
-				return;
-			}
-			this.selectedItems.splice(index, 1);
-			this.availableItems.push(item);
+
+			this.unselectItem(item);
 			this.$emit('input', this.selectedItems);
 		},
 		selectAllItems() {
-			this.searchSelected = '';
-			this.searchingAvailable = true;
-			this.searchingSelected = true;
+			this.searchTextSelectedItems = '';
 			this.selectedItems = this.selectedItems.concat(this.availableItems);
 			this.availableItems = [];
 			this.$emit('input', this.selectedItems);
 		},
 		unselectAllItems() {
-			this.searchingAvailable = true;
-			this.searchingSelected = true;
-			this.searchAvailable = '';
+			this.searchTextAvailableItems = '';
 			this.availableItems = this.availableItems.concat(this.selectedItems);
 			this.selectedItems = [];
 			this.$emit('input', this.selectedItems);
 		},
-		onChangeAvailables(event) {
-			// due to drag and drop, if searchAvailable has value, the item selected by the user is not the item added to
-			// selectedItems so:
-			// - it has to be removed manually from selectedItems,
-			// - it has to be added to the availableItems one more time,
-			// - selected item by the user that is in itemsSearchAvailable, has to be added to selectedItems
-			// - and selected item by the user has to be removed from availableItems
-			if (event.removed && this.itemsSearchAvailable.length > 0 && this.itemsSearchAvailable.length < this.availableItems.length) {
-				// remove last from selectedItems because it is not the selected item by user
-				const removed = event.removed.element;
-				let removedIndex = this.selectedItems.length;
-				this.selectedItems.forEach((selectedItem, index) => {
-					if (removed[this.itemValue] === selectedItem[this.itemValue]) {
-						removedIndex = index;
-						this.selectedItems.splice(index, 1);
-					}
-				});
-				// push removed item in availableItems
-				this.availableItems.push(removed);
-				// add selected item by user to the selectedItems in the same position as removed previously
-				const added = this.itemsSearchAvailable[event.removed.oldIndex];
-				this.selectedItems.splice(removedIndex, 0, added);
-				// remove selected item from availableItems
-				this.availableItems.forEach((availableItem, index) => {
-					if (added[this.itemValue] === availableItem[this.itemValue]) {
-						this.availableItems.splice(index, 1);
+
+		// due to drag and drop, if searchTextAvailableItems or searchTextSelectedItems have values, 
+		// the item selected by the user is not the real item so we need to disapply the operations manually 
+		// and apply them again transforming the indexes of the filtered items to the real items
+
+		onChangeAvailableItems(event) {
+			if (event.moved) {
+				if (this.filteredAvailableItems.length > 0 && this.filteredAvailableItems.length < this.availableItems.length) {
+					// deshacer movimiento con indices equivocados
+					this.availableItems.splice(event.moved.newIndex, 1);
+					this.availableItems.splice(event.moved.oldIndex, 0, event.moved.element);
+
+					// realizar verdadero movimiento
+					const realItem = this.filteredAvailableItems[event.moved.oldIndex];
+					const realOldIndex = this.availableItems.indexOf(realItem);
+					this.availableItems.splice(realOldIndex, 1);
+
+					const previousItem = this.filteredAvailableItems[event.moved.newIndex - 1];
+					const realNewIndex = this.availableItems.indexOf(previousItem) + 1;
+					this.availableItems.splice(realNewIndex, 0, realItem);
+				}
+
+				this.$emit('input', this.selectedItems);
+			}
+
+			if (event.removed) {
+				if (this.filteredAvailableItems.length > 0 && this.filteredAvailableItems.length < this.availableItems.length) {
+					// deshacer el borrado de availableItems
+					this.availableItems.splice(event.removed.oldIndex, 0, event.removed.element);
+					// borrar el verdadero item
+					const realItem = this.filteredAvailableItems[event.removed.oldIndex];
+					for (let index = 0, length = this.availableItems.length; index < length; index++) {
+						const availableItem = this.availableItems[index];
+						if (isEqual(availableItem, realItem)) {
+							console.log('deleting', this.availableItems[index][this.itemValue]);
+							this.availableItems.splice(index, 1);
+							break;
+						}
 					}
-				});
+					// añadir el verdadero item a partir de la posición guardada previamente (added ejecuta antes que removed)
+					console.log('newIndex', this.newIndex);
+
+					const previousItem = this.filteredSelectedItems[this.newIndex - 1];
+					const realNewIndex = this.selectedItems.indexOf(previousItem) + 1;
+					this.selectedItems.splice(realNewIndex, 0, realItem);
+				}
+				this.$emit('input', this.selectedItems);
+			}
+
+			if (event.added) {
+				if (this.filteredSelectedItems.length > 0 && this.filteredSelectedItems.length < this.selectedItems.length) {
+					// deshacer el añadido de availableItems
+					this.availableItems.splice(event.added.newIndex, 1);
+					// guardar la posición donde se desea insertar el nuevo item
+					this.newIndex = event.added.newIndex;
+				}
+				this.$emit('input', this.selectedItems);
 			}
 		},
-		onChangeSelected(event) {
-			if (event.removed && this.itemsSearchSelected.length > 0 && this.itemsSearchSelected.length < this.selectedItems.length) {
-				const removed = event.removed.element;
-				let removedIndex = this.availableItems.length;
-				this.availableItems.forEach((availableItem, index) => {
-					if (removed[this.itemValue] === availableItem[this.itemValue]) {
-						removedIndex = index;
-						this.availableItems.splice(index, 1);
-					}
-				});
-				this.selectedItems.splice(event.removed.oldIndex, 0, removed);
-				const added = this.itemsSearchSelected[event.removed.oldIndex];
-				this.availableItems.splice(removedIndex, 0, added);
-				this.selectedItems.forEach((selectedItem, index) => {
-					if (added[this.itemValue] === selectedItem[this.itemValue]) {
-						this.selectedItems.splice(index, 1);
+		onChangeSelectedItems(event) {
+			if (event.moved) {
+				if (this.filteredSelectedItems.length > 0 && this.filteredSelectedItems.length < this.selectedItems.length) {
+					// deshacer movimiento con indices equivocados
+					this.selectedItems.splice(event.moved.newIndex, 1);
+					this.selectedItems.splice(event.moved.oldIndex, 0, event.moved.element);
+
+					// realizar verdadero movimiento
+					const realItem = this.filteredSelectedItems[event.moved.oldIndex];
+					const realOldIndex = this.selectedItems.indexOf(realItem);
+					this.selectedItems.splice(realOldIndex, 1);
+
+					const previousItem = this.filteredSelectedItems[event.moved.newIndex - 1];
+					const realNewIndex = this.selectedItems.indexOf(previousItem) + 1;
+					this.selectedItems.splice(realNewIndex, 0, realItem);
+				}
+
+				this.$emit('input', this.selectedItems);
+			}
+
+			if (event.removed) {
+				if (this.filteredSelectedItems.length > 0 && this.filteredSelectedItems.length < this.selectedItems.length) {
+					// deshacer el borrado de selectedItems
+					this.selectedItems.splice(event.removed.oldIndex, 0, event.removed.element);
+					// borrar el verdadero item
+					const realItem = this.filteredSelectedItems[event.removed.oldIndex];
+					for (let index = 0, length = this.selectedItems.length; index < length; index++) {
+						const selectedItem = this.selectedItems[index];
+						if (isEqual(selectedItem, realItem)) {
+							console.log('deleting', this.selectedItems[index][this.itemValue]);
+							this.selectedItems.splice(index, 1);
+							break;
+						}
 					}
-				});
+					// añadir el verdadero item a partir de la posición guardada previamente (added ejecuta antes que removed)
+					const previousItem = this.filteredAvailableItems[this.newIndex - 1];
+					const realNewIndex = this.availableItems.indexOf(previousItem) + 1;
+					this.availableItems.splice(realNewIndex, 0, realItem);
+				}
+				this.$emit('input', this.selectedItems);
+			}
+
+			if (event.added) {
+				if (this.filteredAvailableItems.length > 0 && this.filteredAvailableItems.length < this.availableItems.length) {
+					// deshacer el añadido de selectedItems
+					this.selectedItems.splice(event.added.newIndex, 1);
+					// guardar la posición donde se desea insertar el nuevo item
+					this.newIndex = event.added.newIndex;
+				}
+				this.$emit('input', this.selectedItems);
 			}
+		},
+		getItemIndexFromFilteredIndex(filteredIndex, filteredList, list) {
+			const filteredItem = filteredList[filteredIndex];
+			for (let index = 0, length = list.length; index < length; index++) {
+				const item = list[index];
+				if (isEqual(item, filteredItem)) {
+					return index;
+				}
+			}
+			return -1;
 		}
 	}
 };
 </script>
+
+<style scoped>
+.tooltipText {
+	word-break: break-all;
+	max-width: 100% !important;
+	max-height: 100% !important;
+	font: normal;
+}
+</style>