pui9-components 1.17.3 → 2.0.7

package/src/components/PuiSelect.vue

@@ -6,6 +6,10 @@
 				<v-flex xs12>
 					<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
 					<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
+					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
+					<v-btn v-if="copyClipboardEnabled && !multiple" style="color:var(--N-300)" class="pb-1" x-small text @click="copySelectedItemToClipboard">
+						<v-icon x-small>far fa-copy</v-icon>
+					</v-btn>
 				</v-flex>
 			</v-layout>
 			<v-layout>
@@ -24,7 +28,6 @@
 						:class="getEditedClass"
 						solo
 						flat
-						@click:append="menuArrow"
 						ref="arrowUp"
 						:attach="attach ? true : false"
 						:autocomplete="!filterServerSide"
@@ -45,10 +48,12 @@
 						:placeholder="getPlaceholder"
 						:filter="filter"
 						v-bind="allProps"
+						:hide-details="hideDetails"
 						@focus="focusValue"
 						@blur="checkValue"
+						@keydown="setDropDownDirection"
+						@click:append="menuArrow"
 						@click:clear="requestItems"
-						:hide-details="hideDetails"
 					>
 						<template slot="append-item" v-if="modelName">
 							<infinite-loading @infinite="loading === false && getMoreItemsFromPuiList(search)" ref="infiniteLoading">
@@ -78,7 +83,7 @@
 							<template v-else-if="multiple === true">
 								<v-chip color="grey lighten-2" :input-value="selected" label small tabindex="-1">
 									<pui-select-text-service :item="item" type="select" :itemText="itemText" />
-									<v-icon small @click.native.stop.prevent.capture="parent.selectItem(item)">close</v-icon>
+									<v-icon v-if="!(disabled || readonly)" small @click.native.stop.prevent.capture="parent.selectItem(item)">fal fa-times</v-icon>
 								</v-chip>
 							</template>
 							<template v-else>
@@ -113,6 +118,10 @@
 			<v-layout>
 				<v-flex :class="labelColumnStyles ? labelColumnStyles : 'xs12 sm6 md4 xl3'">
 					<label :class="getLabelRequiredClass">{{ getLabel }}</label>
+					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
+					<v-btn v-if="copyClipboardEnabled && !multiple" style="color:var(--N-300)" class="pb-1" x-small text @click="copySelectedItemToClipboard">
+						<v-icon x-small>far fa-copy</v-icon>
+					</v-btn>
 				</v-flex>
 				<v-flex
 					:class="
@@ -129,7 +138,6 @@
 						:class="getEditedClass"
 						solo
 						flat
-						@click:append="menuArrow"
 						ref="arrowUp"
 						:attach="attach ? true : false"
 						:autocomplete="!filterServerSide"
@@ -151,10 +159,11 @@
 						:placeholder="getPlaceholder"
 						:filter="filter"
 						v-bind="allProps"
+						:hide-details="hideDetails"
 						@focus="focusValue"
 						@blur="checkValue"
+						@click:append="menuArrow"
 						@click:clear="requestItems"
-						:hide-details="hideDetails"
 					>
 						<template slot="append-item" v-if="modelName">
 							<infinite-loading @infinite="loading === false && getMoreItemsFromPuiList(search)" ref="infiniteLoading">
@@ -248,7 +257,6 @@
 					:class="getEditedClass"
 					solo
 					flat
-					@click:append="menuArrow"
 					ref="arrowUp"
 					:attach="attach ? true : false"
 					:autocomplete="!filterServerSide"
@@ -269,9 +277,10 @@
 					:placeholder="getPlaceholder"
 					:filter="filter"
 					v-bind="allProps"
+					:hide-details="hideDetails"
 					@focus="focusValue"
 					@blur="checkValue"
-					:hide-details="hideDetails"
+					@click:append="menuArrow"
 					@click:clear="requestItems"
 				>
 					<template slot="append-item" v-if="modelName">
@@ -352,6 +361,11 @@ export default {
 	//TOFOLLOW
 	//https://github.com/vuetifyjs/vuetify/issues/5087 Al cerrar las chips del multiselect se abre el menú
 	name: 'PuiSelect',
+	inject: {
+		form: {
+			default: null
+		}
+	},
 	components: {
 		PuiSelectTextService,
 		PuiSelectDetailDialog,
@@ -511,7 +525,7 @@ export default {
 			required: false
 		},
 		/* Type: String
-		Instead of providing the items, if controller is provided it will get the items by calling this web service in @getItemsFromService or @getItemsFromPuiList */
+		Instead of providing the items, if controller is provided it will get the items by calling this web service in @getItemsFromPuiList */
 		controller: {
 			type: String,
 			default: '/puisearch',
@@ -611,6 +625,23 @@ export default {
 			type: Boolean,
 			default: true,
 			required: false
+		},
+		tooltipDescription: {
+			type: String,
+			required: false
+		},
+		tooltipIcon: {
+			type: String,
+			required: false
+		},
+		singleItemAutoselect: {
+			type: Boolean,
+			required: false
+		},
+		copyClipboard: {
+			type: Boolean,
+			default: null,
+			required: false
 		}
 	},
 	data() {
@@ -633,7 +664,6 @@ export default {
 			internalErrorMessages: '',
 			selected: false,
 			initialItemsToSelect: [],
-			internalController: null,
 			previousSelectedItems: undefined,
 			doingThings: false,
 			itemManuallySelected: false,
@@ -641,140 +671,22 @@ export default {
 			firstLoad: true,
 			requestDataPromise: undefined,
 			selectedItemsEventFirstLoad: true,
-			internalQueryFields: []
+			internalQueryFields: [],
+			singleItemAutoselectEnabled: false,
+			valid: true
 		};
 	},
-	watch: {
-		modelName(modelName) {
-			if (modelName && this.isEmpty(this.theItems)) {
-				const theModel = this.$store.getters.getModelByName(modelName);
-				this.internalController = this.controller || theModel.url.list;
-				this.internalController && this.getItemsFromPuiList();
-				this.internalQueryFields = !this.isEmpty(this.queryFields) ? this.queryFields : theModel.columns?.map(c => c.name);
-			}
-		},
-		itemsToSelect: {
-			handler(newValue) {
-				if (this.isMultiSelect === true) {
-					this.trackItemsToSelect === true && this.selectItems();
-				} else {
-					this.reactiveHandler(newValue);
-				}
-			},
-			deep: true
-		},
-		fixedFilterWatcher: {
-			handler(newFilter, oldFilter) {
-				if (newFilter === oldFilter) {
-					return;
-				}
-				this.previousSelectedItems = this.previousSelectedItems || this.selectedItems;
-				this.resetItems();
-				this.filterItems();
-			},
-			deep: true
-		},
-		filterMapWatcher: {
-			handler(newFilter, oldFilter) {
-				if (newFilter === oldFilter) {
-					return;
-				}
-				this.resetItems(JSON.parse(newFilter));
-				this.filterItems(null);
-			},
-			deep: true
-		},
-		loading(newValue, oldValue) {
-			if (newValue === false && oldValue === true && !this.isEmpty(this.previousSelectedItems)) {
-				this.selectPreviousValidItems();
-				this.previousSelectedItems = undefined;
-			}
-		},
-		search(newValue, oldValue) {
-			if (this.multiple && this.isEmpty(newValue) && this.isEmpty(oldValue)) {
-				return;
-			}
-			this.searchable && this.filterItems(newValue);
-		},
-		selectedItems(newVal) {
-			if (this.reactive) {
-				if (this.firstLoad) {
-					this.firstLoad = false;
-				} else if (!this.itemProgrammaticallySelected) {
-					this.itemManuallySelected = true;
-				} else {
-					this.itemProgrammaticallySelected = false;
-				}
-			}
-			this.clearMessages();
-			if (this.modelFormMapping) {
-				this.$emit('input', this.replaceMapping());
-			} else {
-				this.$emit('input', newVal);
-			}
-			this.$emit('change', newVal);
-
-			if (this.emitSelectedItemsEventOnFirstLoad || !this.selectedItemsEventFirstLoad) {
-				this.$puiEvents.$emit(`onPuiSelect_selectedItems-${this.puiSelectId}`, { id: this.puiSelectId, model: newVal });
-			}
-			this.selectedItemsEventFirstLoad = false;
-			if (this.attach && this.puiSelectId && !this.multiple && newVal) {
-				// Need for browser to recalculate correctly getBoundingClientSelectPosition
-				document.getElementById(this.puiSelectId).click();
-			}
-		},
-		disabled(newVal) {
-			this.newDisabled = newVal;
-			if (newVal) {
-				this.clearMessages();
-			}
-		},
-		detailComponentName(newValue, oldValue) {
-			if (!this.isEmpty(oldValue)) {
-				this.$puiEvents.$off(`pui-modalDialog-${oldValue}_${this.puiSelectId}_popup-hide`);
-			}
-			if (!this.isEmpty(newValue)) {
-				const self = this;
-				this.$puiEvents.$on(`pui-modalDialog-${newValue}_${this.puiSelectId}_popup-hide`, (data) => {
-					self.showDetailComponent = false;
-					if (data) {
-						const newItem = {};
-						const itemValues = this.itemValue;
-						itemValues.forEach((pkValue) => {
-							newItem[pkValue] = data[pkValue];
-						});
-						self.itemsToSelect[0] = newItem;
-						self.onPuiSelectItemsToSelect = [newItem];
-						self.getSelectedItemsFromPuiList();
-					}
-				});
-			}
-		},
-		queryFields(queryFields) {
-			if (!this.isEmpty(queryFields)) {
-				this.internalQueryFields = queryFields;
-			} else if (this.modelName) {
-				const theModel = this.$store.getters.getModelByName(this.modelName);
-				this.internalQueryFields = theModel.columns?.map(c => c.name);
-			}
-		}
-	},
 	computed: {
 		allProps() {
 			const propsWithoutLabel = { ...this.$props };
 			delete propsWithoutLabel.label;
 			return { ...this.$attrs, propsWithoutLabel };
 		},
-		isMultiSelect() {
-			return this.$options._componentTag === 'puimultiselect';
+		theModel() {
+			return this.$store.getters.getModelByName(this.modelName);
 		},
-		getItemsFrom() {
-			if (this.modelName) {
-				return 'FromPuiList';
-			} else if (this.internalController) {
-				return 'FromService';
-			}
-			return '';
+		internalController() {
+			return this.controller; // || this.theModel.url.list;
 		},
 		fixedFilterWatcher() {
 			return JSON.stringify(this.fixedFilter);
@@ -789,7 +701,7 @@ export default {
 			return this.$t('pui9.components.select.all-items-showed');
 		},
 		isDisabled() {
-			if (!this.isEmpty(this.newDisabled)) {
+			if (!this.hasEmptyValue(this.newDisabled)) {
 				return this.newDisabled;
 			}
 			return this.disabled;
@@ -856,19 +768,7 @@ export default {
 			return null;
 		},
 		getRules() {
-			const rules = [...this.rules];
-			if (this.required) {
-				var func = (value) => !!value || this.requiredMessage;
-				var func2 = () => !this.internalError || (Array.isArray(this.internalErrorMessages) && this.internalErrorMessages.length > 0);
-				var func3 = () => {
-					if (this.isEmpty(this.selectedItems)) {
-						return this.requiredMessage;
-					}
-					return true;
-				};
-				rules.push(func, func2, func3);
-			}
-			return rules;
+			return [...this.rules];
 		},
 		isEdited() {
 			if (this.noeditable || this.disabled || this.readonly || this.selected === false) {
@@ -879,39 +779,230 @@ export default {
 		},
 		isMenuOpened() {
 			return this.$refs.arrowUp ? this.$refs.arrowUp.isMenuActive || this.$refs.arrowUp.isFocused : false;
+		},
+		showTooltip() {
+			if (this.getLabel === '' || this.getLabel === null) {
+				return false;
+			}
+			return this.tooltipDescription || this.tooltip;
+		},
+		copyClipboardEnabled() {
+			return this.copyClipboard != null ? this.copyClipboard : this.$store.state.components.copyClipboardSelect;
+		}
+	},
+	watch: {
+		modelName(modelName) {
+			if (modelName && this.hasEmptyValue(this.theItems)) {
+				this.setInternalQueryFields();
+				this.getItemsFromPuiList();
+			}
+		},
+		itemsToSelect: {
+			handler(newValue) {
+				this.reactiveHandler(newValue);
+			},
+			deep: true
+		},
+		fixedFilterWatcher: {
+			handler(newFilter, oldFilter) {
+				if (newFilter === oldFilter) {
+					return;
+				}
+				this.previousSelectedItems = this.previousSelectedItems || this.selectedItems;
+				this.resetItems();
+				this.filterItems();
+			},
+			deep: true
+		},
+		filterMapWatcher: {
+			handler(newFilter, oldFilter) {
+				if (newFilter === oldFilter) {
+					return;
+				}
+				this.resetItems(JSON.parse(newFilter));
+				this.filterItems(null);
+			},
+			deep: true
+		},
+		loading(newValue, oldValue) {
+			if (newValue === false && oldValue === true && !this.hasEmptyValue(this.previousSelectedItems)) {
+				this.selectPreviousValidItems();
+				this.previousSelectedItems = undefined;
+			}
+		},
+		search(newValue, oldValue) {
+			if (this.multiple && this.hasEmptyValue(newValue) && this.hasEmptyValue(oldValue)) {
+				return;
+			}
+			this.searchable && this.filterItems(newValue);
+		},
+		selectedItems(newVal) {
+			if (this.reactive) {
+				if (this.firstLoad) {
+					this.firstLoad = false;
+				} else if (!this.itemProgrammaticallySelected) {
+					this.itemManuallySelected = true;
+				} else {
+					this.itemProgrammaticallySelected = false;
+				}
+			}
+			this.clearMessages();
+			if (this.modelFormMapping) {
+				this.$emit('input', this.replaceMapping());
+			} else {
+				this.$emit('input', newVal);
+			}
+			this.$emit('change', newVal);
+
+			if (this.emitSelectedItemsEventOnFirstLoad || !this.selectedItemsEventFirstLoad) {
+				this.$puiEvents.$emit(`onPuiSelect_selectedItems-${this.puiSelectId}`, { id: this.puiSelectId, model: newVal });
+			}
+			this.selectedItemsEventFirstLoad = false;
+			if (this.attach && this.puiSelectId && !this.multiple && newVal) {
+				// Need for browser to recalculate correctly getBoundingClientSelectPosition
+				document.getElementById(this.puiSelectId).click();
+			}
+		},
+		disabled(newVal) {
+			this.newDisabled = newVal;
+			if (newVal) {
+				this.clearMessages();
+			}
+		},
+		detailComponentName(newValue, oldValue) {
+			if (!this.hasEmptyValue(oldValue)) {
+				this.$puiEvents.$off(`pui-modalDialog-${oldValue}_${this.puiSelectId}_popup-hide`);
+			}
+			if (!this.hasEmptyValue(newValue)) {
+				const self = this;
+				this.$puiEvents.$on(`pui-modalDialog-${newValue}_${this.puiSelectId}_popup-hide`, (data) => {
+					self.showDetailComponent = false;
+					if (data) {
+						const newItem = {};
+						const itemValues = this.itemValue;
+						itemValues.forEach((pkValue) => {
+							newItem[pkValue] = data[pkValue];
+						});
+						self.itemsToSelect[0] = newItem;
+						self.onPuiSelectItemsToSelect = [newItem];
+						self.getSelectedItemsFromPuiList();
+					}
+				});
+			}
+		},
+		theItems() {
+			if (this.singleItemAutoselectEnabled && this.theItems.length == 1) {
+				this.selectedItems = this.theItems[0];
+			}
+		}
+	},
+	created() {
+		// v-form injected
+		this.form && this.form.register(this);
+
+		this.puiSelectId = this.$attrs.id;
+		this.isMobile = this.$store.getters.isMobile;
+
+		//TODO poner itemValues como un array si viene de string, para unificar simplificar donde haya comprobaciones itemValuesMultiple
+		this.itemsToSelect && this.itemsToSelect.forEach((item) => {
+			this.initialItemsToSelect.push(item);
+		});
+
+		// Check Item Text
+		this.itemTextMultiple = Array.isArray(this.itemText);
+		if (this.itemTextMultiple === false) {
+			this.itemTextNested = this.checkForNestedFields(this.itemText);
+		}
+
+		// Check Item Value
+		this.itemValueMultiple = Array.isArray(this.itemValue);
+		if (this.itemValueMultiple === false) {
+			this.itemValueNested = this.checkForNestedFields(this.itemValue);
+		}
+
+		this.setInternalQueryFields();
+		this.getItems();
+
+		this.setSingleItemAutoselectEnabled();
+
+		// Subscribe events
+		this.$puiEvents.$on(`onPuiSelect_${this.puiSelectId}`, (newVal) => {
+			this.itemsToSelect[0] = newVal;
+			this.onPuiSelectItemsToSelect = [newVal];
+			this.getSelectedItemsFromPuiList();
+		});
+	},
+	mounted() {
+		if (this.detailComponentName) {
+			const self = this;
+			this.$puiEvents.$on(`pui-modalDialog-${this.detailComponentName}_${this.puiSelectId}_popup-hide`, (data) => {
+				self.showDetailComponent = false;
+				if (data) {
+					const newItem = {};
+					const itemValues = this.itemValue;
+					itemValues.forEach((pkValue) => {
+						newItem[pkValue] = data[pkValue];
+					});
+					self.itemsToSelect[0] = newItem;
+					self.onPuiSelectItemsToSelect = [newItem];
+					self.getSelectedItemsFromPuiList();
+				}
+			});
 		}
 	},
+	beforeDestroy() {
+		// Unsubscribe events
+		this.$puiEvents.$off(`onPuiSelect_${this.puiSelectId}`);
+		this.$puiEvents.$off(`pui-modalDialog-${this.detailComponentName}_${this.puiSelectId}_popup-hide`);
+	},
 	methods: {
+		validate() {
+			this.checkValue();
+			this.valid = !this.internalError;
+			return this.valid;
+		},
 		requestItems() {
 			this.getItemsFromPuiList();
 		},
+		setInternalQueryFields() {
+			this.internalQueryFields = this.queryFields;
+
+			if (this.modelName && this.hasEmptyValue(this.queryFields)) {
+				this.internalQueryFields = this.theModel.columns?.map((c) => c.name);
+			}
+		},
+		setSingleItemAutoselectEnabled() {
+			if (this.singleItemAutoselect || (this.$store.state.global.singleItemAutoselectOnRequired && this.required)) {
+				this.singleItemAutoselectEnabled = true;
+			}
+		},
+		focusValue() {
+			this.hasBeenFocused = true;
+			this.$refs.arrowUp.isMenuActive = true;
+			this.setDropDownDirection();
+		},
 		setDropDownDirection() {
 			if (this.$refs.arrowUp && this.attach) {
 				setTimeout(() => {
 					const puiSelect = this.$refs.arrowUp.$el;
-					const dropDown = puiSelect.querySelector('.v-menu__content');
 					const puiSelectPositions = puiSelect.getBoundingClientRect();
+
 					const heightBrowser = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
 					const screenAvailableForDropDown = heightBrowser - puiSelectPositions.top;
-					if (screenAvailableForDropDown < parseInt(dropDown.style['max-height']?.replace('px', '')) + 10) {
-						dropDown.style.top = 'initial';
-						dropDown.style.bottom = '40px';
-					} else {
-						dropDown.style.bottom = 'initial';
-						dropDown.style.top = '40px';
+
+					const dropDown = puiSelect.querySelector('.v-menu__content');
+					if (dropDown) {
+						if (screenAvailableForDropDown < parseInt(dropDown.style['max-height']?.replace('px', '')) + 10) {
+							dropDown.style.top = 'initial';
+							dropDown.style.bottom = '40px';
+						} else {
+							dropDown.style.bottom = 'initial';
+							dropDown.style.top = '40px';
+						}
 					}
 				}, 0);
 			}
 		},
-		focusValue() {
-			//antes estaba así pero resultaba en un bug, se cambia a como esta dos lineas abajo. Si tenia explicación que se comente ya que generaba un bug
-			//(this.theItems.length === this.initialItemsToSelect.length || !this.theItems.length) && this[`getItems${this.getItemsFrom}`]();
-			this.hasBeenFocused === false && this[`getItems${this.getItemsFrom}`]();
-			//never more to load on focus
-			this.hasBeenFocused = true;
-			this.$refs.arrowUp.isMenuActive = true;
-			this.setDropDownDirection();
-		},
 		menuArrow() {
 			const arrowEl = this.$refs.arrowUp;
 			if (arrowEl.isMenuActive) {
@@ -934,7 +1025,7 @@ export default {
 					//los dos estan vacios
 					return false;
 				}
-				if (!this.isEmpty(this.itemValue)) {
+				if (!this.hasEmptyValue(this.itemValue)) {
 					if (this.initialItemsToSelect.length !== this.selectedItems.length) {
 						return true;
 					} else if (this.itemValueNested === true) {
@@ -968,20 +1059,20 @@ export default {
 				return false;
 			} else {
 				//comprobamos existencias y por último contenido de los objetos
-				if (this.isEmpty(this.initialItemsToSelect) || this.isEmpty(this.selectedItems)) {
+				if (this.hasEmptyValue(this.initialItemsToSelect) || this.hasEmptyValue(this.selectedItems)) {
 					if (this.initialItemsToSelect && this.initialItemsToSelect.length > 0) {
 						if (this.itemValueMultiple === true) {
-							return !this.isEmpty(this.initialItemsToSelect[this.itemValue[0]]);
+							return !this.hasEmptyValue(this.initialItemsToSelect[this.itemValue[0]]);
 						} else {
-							return !this.isEmpty(this.initialItemsToSelect[this.itemValue]);
+							return !this.hasEmptyValue(this.initialItemsToSelect[this.itemValue]);
 						}
-					} else if (!this.isEmpty(this.selectedItems)) {
+					} else if (!this.hasEmptyValue(this.selectedItems)) {
 						return true;
 					}
 					//los dos estan vacios
 					return false;
 				}
-				if (!this.isEmpty(this.itemValue)) {
+				if (!this.hasEmptyValue(this.itemValue)) {
 					if (this.itemValueMultiple === true) {
 						for (let i = 0, length = this.itemValue.length; i < length; i++) {
 							if (this.selectedItems[this.itemValue[i]] !== this.initialItemsToSelect[0][this.itemValue[i]]) {
@@ -992,7 +1083,7 @@ export default {
 					} else if (this.itemValueNested === true) {
 						//TODO
 					}
-					return this.initialItemsToSelect[0][this.itemValue] !== this.selectedItems[this.itemValue];
+					return this.initialItemsToSelect[0] != null && this.initialItemsToSelect[0][this.itemValue] !== this.selectedItems[this.itemValue];
 				}
 				return this.initialItemsToSelect[0] !== this.selectedItems;
 			}
@@ -1001,7 +1092,7 @@ export default {
 			this.search = '';
 			this.clearMessages();
 			if (this.required) {
-				if (this.isEmpty(this.selectedItems)) {
+				if (this.hasEmptyValue(this.selectedItems)) {
 					this.showErrorMessage();
 				}
 			}
@@ -1022,64 +1113,19 @@ export default {
 				}, 500);
 			}
 		},
-		insertItem() {
-			//alert('TODO');
-		},
 		disableInput() {
 			this.$el.children[0].children[0].children[0].children[0].children[0].children[1].setAttribute('disabled', '');
 			this.disabledInput = true;
 		},
-		clearItems() {
-			this.selectedItems = [];
-		},
-		selectItemById(id) {
-			var itemValueTemp = this.itemValue;
-			var selectedItem;
-			for (let index = 0, length = this.theItems.length; index < length; index++) {
-				var item = this.theItems[index];
-				if (this.itemValueMultiple === true) {
-					let allPropsEqual = false;
-					for (let i = 0, length = this.itemValue.length; i < length; i++) {
-						if (item[this.itemValue[i]] !== id[this.itemValue[i]]) {
-							allPropsEqual = true;
-							break;
-						}
-					}
-					if (allPropsEqual === true) {
-						continue;
-					}
-					selectedItem = this.return_object ? item : id;
-					if (this.multiple === false) {
-						this.selectedItems = selectedItem;
-					} else {
-						this.selectedItems.push(selectedItem);
-					}
-					//eslint-disable-next-line no-useless-return
-					return;
-				} else if (item[itemValueTemp] === id) {
-					selectedItem = this.return_object ? item : id;
-					if (this.multiple === false) {
-						this.selectedItems = selectedItem;
-					} else {
-						this.selectedItems.push(selectedItem);
-					}
-					//eslint-disable-next-line no-useless-return
-					return;
-				} else if (item === id) {
-					this.selectedItems = item;
-					return;
-				}
-			}
-		},
 		goToDetail(method) {
-			if (!this.isEmpty(this.selectedItems)) {
+			if (!this.hasEmptyValue(this.selectedItems)) {
 				const detailPk = {};
 				let itemValues = this.itemValue;
 				if (this.itemValueMultiple === false) {
 					itemValues = [this.itemValue];
 				}
 				itemValues.forEach((pkProperty) => {
-					if (!this.isEmpty(this.selectedItems[pkProperty])) {
+					if (!this.hasEmptyValue(this.selectedItems[pkProperty])) {
 						detailPk[pkProperty] = this.selectedItems[pkProperty];
 					}
 				});
@@ -1095,17 +1141,6 @@ export default {
 				this.showDetailComponent = true;
 			}
 		},
-		subscribeEvents() {
-			this.$puiEvents.$on(`onPuiSelect_${this.puiSelectId}`, (newVal) => {
-				this.itemsToSelect[0] = newVal;
-				this.onPuiSelectItemsToSelect = [newVal];
-				this.getSelectedItemsFromPuiList();
-			});
-		},
-		unsubscribeEvents() {
-			this.$puiEvents.$off(`onPuiSelect_${this.puiSelectId}`);
-			this.$puiEvents.$off(`pui-modalDialog-${this.detailComponentName}_${this.puiSelectId}_popup-hide`);
-		},
 		replaceMapping() {
 			let itemValues = this.itemValue;
 			if (this.itemValueMultiple === false) {
@@ -1113,7 +1148,7 @@ export default {
 			}
 			if (this.multiple !== true) {
 				itemValues.forEach((pkValue) => {
-					if (this.isEmpty(this.selectedItems)) {
+					if (this.hasEmptyValue(this.selectedItems)) {
 						if (this.filterId && this.filterMap) {
 							let isParentPkValue = false;
 							for (const property in this.filterMap) {
@@ -1161,35 +1196,19 @@ export default {
 			const selectedObject = {};
 			for (const property in this.filterMap) {
 				let parentProperty = property;
-				if (this.filterParentMap && !this.isEmpty(this.filterParentMap[property])) {
+				if (this.filterParentMap && !this.hasEmptyValue(this.filterParentMap[property])) {
 					parentProperty = this.filterParentMap[property];
 				}
 				selectedObject[parentProperty] = this.selectedItems[property];
 			}
 			this.$puiEvents.$emit(`onPuiSelect_${this.filterId}`, selectedObject);
 		},
-		/**
-		 * Metodo llamado por el componente infinteloading al hacer scroll, nadie más lo llama directamente
-		 */
-		getMoreItemsFromPuiList(search) {
-			this.loading = true;
-			this.page++;
-			const bodyRequest = this.getBodyRequest(search);
-			const loadMoreItems = (response) => {
-				if (response && response.data) {
-					//this.processItems(response.data.data);
-					this.theItems = this.theItems.concat(response.data.data);
-					this.$refs.infiniteLoading.stateChanger.loaded();
-					if (response.data.totalPages <= this.page) {
-						this.$refs.infiniteLoading.stateChanger.complete();
-					}
-				}
-				this.loading = false;
-			};
-			this.postRequest(bodyRequest, loadMoreItems);
-		},
-		getItemsFromService() {
-			// de momento por implementar
+		getItems() {
+			if (this.items) {
+				this.theItems = this.items;
+			}
+			this.loading = false;
+			this.selectItems();
 		},
 		getItemsFromPuiList(search) {
 			this.page = 1;
@@ -1198,7 +1217,6 @@ export default {
 				this.$refs.infiniteLoading && this.$refs.infiniteLoading.stateChanger.reset();
 				if (response && response.data) {
 					this.theItems = response.data.data;
-					//this.processItems(this.theItems);
 					if (this.selected === false) {
 						this.selectItems();
 					} else {
@@ -1214,13 +1232,24 @@ export default {
 			const bodyRequest = this.getBodyRequest(search);
 			this.postRequest(bodyRequest, loadItems);
 		},
-		getItems() {
-			if (this.items) {
-				this.theItems = this.items;
-			}
-			this.loading = false;
-			//this.processItems(this.theItems);
-			this.selectItems();
+		/**
+		 * Metodo llamado por el componente infinteloading al hacer scroll, nadie más lo llama directamente
+		 */
+		getMoreItemsFromPuiList(search) {
+			this.loading = true;
+			this.page++;
+			const bodyRequest = this.getBodyRequest(search);
+			const loadMoreItems = (response) => {
+				if (response && response.data) {
+					this.theItems = this.theItems.concat(response.data.data);
+					this.$refs.infiniteLoading.stateChanger.loaded();
+					if (response.data.totalPages <= this.page) {
+						this.$refs.infiniteLoading.stateChanger.complete();
+					}
+				}
+				this.loading = false;
+			};
+			this.postRequest(bodyRequest, loadMoreItems);
 		},
 		postRequest(body, successCallback) {
 			this.$puiRequests.postRequest(this.internalController, body, successCallback, (error) => {
@@ -1232,14 +1261,12 @@ export default {
 				model: this.modelName,
 				filter: this.createFilter()
 			};
-			if (this.isMultiSelect === false) {
-				paginateItemsParams.rows = this.rows;
-				paginateItemsParams.page = this.page;
-				paginateItemsParams.queryText = search;
-				paginateItemsParams.queryFields = this.internalQueryFields;
-			} else {
-				paginateItemsParams.rows = this.rowNum;
-			}
+
+			paginateItemsParams.rows = this.rows;
+			paginateItemsParams.page = this.page;
+			paginateItemsParams.queryText = search;
+			paginateItemsParams.queryFields = this.internalQueryFields;
+
 			const searchOrder = this.createOrder();
 			if (searchOrder) {
 				paginateItemsParams.order = searchOrder;
@@ -1280,7 +1307,7 @@ export default {
 			if (this.multiple !== true) {
 				for (const colmodel in this.filterMap) {
 					const value = this.filterMap[colmodel];
-					if (Object.prototype.hasOwnProperty.call(this.filterMap, colmodel) && !this.isEmpty(value)) {
+					if (Object.prototype.hasOwnProperty.call(this.filterMap, colmodel) && !this.hasEmptyValue(value)) {
 						group.rules.push({
 							field: colmodel,
 							op: 'eq',
@@ -1313,39 +1340,20 @@ export default {
 
 			return stringField.split('.').length > 1;
 		},
-		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);
-			}
-		},
-		getSelectedItems() {
-			for (let i = 0, length = this.itemsToSelect.length; i < length; i++) {
-				this.selectItemById(this.itemsToSelect[i][this.itemValue] || this.itemsToSelect[i], this.itemsToSelect[i]);
-			}
-			this.checkSelectedItems();
-			if (!this.isEmpty(this.modelFormMapping, this.selectedItems)) {
-				this.replaceMapping();
-			}
-		},
 		getFilterRequest(itemsToSelect) {
 			const filter = {
 				groupOp: 'and',
 				rules: [],
 				groups: []
 			};
-			const itemValues = this.itemValueMultiple === false ? [this.itemValue] : this.itemValue;
-			const itemsToSelectToSearch = itemsToSelect || this.itemsToSelect;
-			itemsToSelectToSearch.forEach((item) => {
-				itemValues.forEach((pkProperty) => {
-					if (!this.isEmpty(item[pkProperty])) {
-						filter.rules.push({ field: pkProperty, op: 'eq', data: item[pkProperty] });
+
+			const itemValuesToSearch = this.itemValueMultiple === false ? [this.itemValue] : this.itemValue;
+			const itemsToSearch = itemsToSelect || this.itemsToSelect;
+
+			itemsToSearch.forEach((itemToSearch) => {
+				itemValuesToSearch.forEach((pkProperty) => {
+					if (itemToSearch && !this.hasEmptyValue(itemToSearch[pkProperty])) {
+						filter.rules.push({ field: pkProperty, op: 'eq', data: itemToSearch[pkProperty] });
 					}
 				});
 			});
@@ -1360,11 +1368,60 @@ export default {
 			if (this.fixedFilter && !this.isDisabled) {
 				filter.groups.push(this.fixedFilter);
 			}
+
 			return filter;
 		},
+		getSelectedItems() {
+			for (let i = 0, length = this.itemsToSelect.length; i < length; i++) {
+				this.selectItemById(this.itemsToSelect[i][this.itemValue] || this.itemsToSelect[i], this.itemsToSelect[i]);
+			}
+			this.checkSelectedItems();
+			if (!this.hasEmptyValue(this.modelFormMapping, this.selectedItems)) {
+				this.replaceMapping();
+			}
+		},
+		selectItemById(id) {
+			var itemValueTemp = this.itemValue;
+			var selectedItem;
+			for (let index = 0, length = this.theItems.length; index < length; index++) {
+				var item = this.theItems[index];
+				if (this.itemValueMultiple === true) {
+					let allPropsEqual = false;
+					for (let i = 0, length = this.itemValue.length; i < length; i++) {
+						if (item[this.itemValue[i]] !== id[this.itemValue[i]]) {
+							allPropsEqual = true;
+							break;
+						}
+					}
+					if (allPropsEqual === true) {
+						continue;
+					}
+					selectedItem = this.return_object ? item : id;
+					if (this.multiple === false) {
+						this.selectedItems = selectedItem;
+					} else {
+						this.selectedItems.push(selectedItem);
+					}
+					//eslint-disable-next-line no-useless-return
+					return;
+				} else if (item[itemValueTemp] === id) {
+					selectedItem = this.return_object ? item : id;
+					if (this.multiple === false) {
+						this.selectedItems = selectedItem;
+					} else {
+						this.selectedItems.push(selectedItem);
+					}
+					//eslint-disable-next-line no-useless-return
+					return;
+				} else if (item === id) {
+					this.selectedItems = item;
+					return;
+				}
+			}
+		},
 		getSelectedItemsFromPuiList() {
 			const filter = this.getFilterRequest();
-			if (this.isEmpty(filter.rules) && this.isEmpty(filter.groups)) {
+			if (this.hasEmptyValue(filter.rules) && this.hasEmptyValue(filter.groups)) {
 				if (this.firstLoad) this.firstLoad = false;
 				return;
 			}
@@ -1417,7 +1474,7 @@ export default {
 			let itemsToSelectHasValue = true;
 			this.itemsToSelect.forEach((item) => {
 				itemValues.forEach((pkProperty) => {
-					if (this.isEmpty(item[pkProperty])) {
+					if (item && this.hasEmptyValue(item[pkProperty])) {
 						itemsToSelectHasValue = false;
 					}
 				});
@@ -1426,7 +1483,7 @@ export default {
 				itemsToSelectHasValue = true;
 				this.onPuiSelectItemsToSelect.forEach((item) => {
 					itemValues.forEach((pkProperty) => {
-						if (this.isEmpty(item[pkProperty])) {
+						if (this.hasEmptyValue(item[pkProperty])) {
 							itemsToSelectHasValue = false;
 						}
 					});
@@ -1437,20 +1494,22 @@ export default {
 		},
 		selectItems() {
 			this.selectedItems = this.multiple ? [] : null;
-			if (this.multiple === true || this.isMultiSelect) {
+			if (this.multiple === true) {
 				this.selectedItems = [];
 			}
 
 			// only for multiselect
 			this.setAvailableItems && this.setAvailableItems();
-			if (this.isEmpty(this.itemsToSelect)) {
+			if (this.hasEmptyValue(this.itemsToSelect)) {
 				return;
 			}
-			if (this.multiple === true) {
-				this.getSelectedItems();
+
+			if (this.multiple === false && this.modelName) {
+				this.getSelectedItemsFromPuiList();
 			} else {
-				this[`getSelectedItems${this.getItemsFrom}`]();
+				this.getSelectedItems();
 			}
+
 			this.selected = true;
 		},
 		/**
@@ -1462,7 +1521,7 @@ export default {
 		 * cargará los primeros a theItems y después seleccionará
 		 **/
 		checkSelectedItems() {
-			if (this.modelName && this.isMultiSelect === false) {
+			if (this.modelName) {
 				if (this.multiple === false) {
 					// si es la selección inicial y itemsToSelect no esta en theItems, por tanto no se ha seleccionado
 					if (this.selected === false && !this.selectedItems && this.itemsToSelect && this.itemsToSelect.length > 0) {
@@ -1490,10 +1549,10 @@ export default {
 			}
 		},
 		resetItems(newValue) {
-			if (this.isEmpty(newValue)) {
+			if (this.hasEmptyValue(newValue)) {
 				this.selectedItems = this.multiple ? [] : null;
 			}
-			if (this.isEmpty(this.selectedItems)) {
+			if (this.hasEmptyValue(this.selectedItems)) {
 				return;
 			}
 			let filtersValid = true;
@@ -1503,9 +1562,9 @@ export default {
 					parentPkProperty = this.filterParentMap[pkProperty];
 				}
 				if (
-					!this.isEmpty(newValue[pkProperty]) &&
+					!this.hasEmptyValue(newValue[pkProperty]) &&
 					newValue[pkProperty] !== this.selectedItems[pkProperty] &&
-					!this.isEmpty(newValue[parentPkProperty]) &&
+					!this.hasEmptyValue(newValue[parentPkProperty]) &&
 					newValue[parentPkProperty] !== this.selectedItems[pkProperty]
 				) {
 					filtersValid = false;
@@ -1555,7 +1614,7 @@ export default {
 				return true;
 			});
 			const filter = this.getFilterRequest(itemToSelect);
-			if (this.isEmpty(newSelected) && this.modelName && filter.rules.length > 0) {
+			if (this.hasEmptyValue(newSelected) && this.modelName && filter.rules.length > 0) {
 				const params = {
 					model: this.modelName,
 					filter: filter
@@ -1591,7 +1650,7 @@ export default {
 				}
 			}
 		},
-		isEmpty(...values) {
+		hasEmptyValue(...values) {
 			return values.some(
 				(value) =>
 					value === undefined ||
@@ -1599,50 +1658,18 @@ export default {
 					(typeof value === 'string' && value.trim() === '') ||
 					(Array.isArray(value) && value.length === 0)
 			);
-		}
-	},
-	created() {
-		this.puiSelectId = this.$attrs.id;
-		this.isMobile = this.$store.getters.isMobile;
-		//TODO poner itemValues como un array si viene de string, para unificar simplificar donde haya comprobaciones itemValuesMultiple
-		this.itemsToSelect.forEach((item) => {
-			this.initialItemsToSelect.push(item);
-		});
-		this.checkItemText();
-		this.checkItemValue();
-		this.internalQueryFields = this.queryFields;
-		if (this.modelName) {
-			const theModel = this.$store.getters.getModelByName(this.modelName);
-			this.internalController = this.controller || theModel.url.list;
-			this.internalQueryFields = !this.isEmpty(this.queryFields) ? this.queryFields : theModel.columns?.map(c => c.name);
-		}
-		if (this.isMultiSelect) {
-			this[`getItems${this.getItemsFrom}`]();
-		} else {
-			this.getItems();
-		}
-		this.subscribeEvents();
-	},
-	mounted() {
-		if (this.detailComponentName) {
-			const self = this;
-			this.$puiEvents.$on(`pui-modalDialog-${this.detailComponentName}_${this.puiSelectId}_popup-hide`, (data) => {
-				self.showDetailComponent = false;
-				if (data) {
-					const newItem = {};
-					const itemValues = this.itemValue;
-					itemValues.forEach((pkValue) => {
-						newItem[pkValue] = data[pkValue];
-					});
-					self.itemsToSelect[0] = newItem;
-					self.onPuiSelectItemsToSelect = [newItem];
-					self.getSelectedItemsFromPuiList();
+		},
+		copySelectedItemToClipboard() {
+			let selectedText = this.$refs.arrowUp.$el.firstChild.firstChild.firstChild.firstChild.firstChild.innerHTML;
+			navigator.clipboard.writeText(selectedText).then(
+				() => {
+					// console.log('Content copied to clipboard');
+				},
+				() => {
+					// console.error('Failed to copy');
 				}
-			});
+			);
 		}
-	},
-	beforeDestroy() {
-		this.unsubscribeEvents();
 	}
 };
 </script>