pui9-components 1.16.4

package/src/components/PuiSelect.vue

@@ -0,0 +1,1638 @@
+<template>
+	<!-- DESKTOP -->
+	<div v-if="!isMobile">
+		<div v-if="toplabel" class="ml-1 mr-1">
+			<v-layout>
+				<v-flex xs12>
+					<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
+					<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
+				</v-flex>
+			</v-layout>
+			<v-layout>
+				<v-flex
+					:class="
+						(prependInnerIconRead || prependInnerIconUpdate) && prependInnerIconInsert
+							? 'xs10'
+							: (prependInnerIconRead || prependInnerIconUpdate) && !prependInnerIconInsert
+							? 'xs11'
+							: 'xs12'
+					"
+				>
+					<v-autocomplete
+						v-model="selectedItems"
+						class="pui-select"
+						:class="getEditedClass"
+						solo
+						flat
+						@click:append="menuArrow"
+						ref="arrowUp"
+						:attach="attach ? true : false"
+						:autocomplete="!filterServerSide"
+						:no-filter="filterServerSide"
+						:readonly="readonly"
+						:return-object="return_object"
+						:clearable="clearable"
+						:label="label"
+						:items="theItems"
+						:error="internalError"
+						:error-messages="internalErrorMessages"
+						:item-text="itemText"
+						:item-value="itemValue"
+						:search-input.sync="search"
+						:required="required"
+						:rules="getRules"
+						:disabled="disabled"
+						:multiple="multiple"
+						:placeholder="getPlaceholder"
+						:filter="filter"
+						v-bind="allProps"
+						@focus="focusValue"
+						@blur="checkValue"
+						:hide-details="hideDetails"
+					>
+						<template slot="append-item" v-if="modelName">
+							<infinite-loading @infinite="loading === false && getMoreItemsFromPuiList(search)" ref="infiniteLoading">
+								<span style="font-weight: bold" slot="no-more">{{ allShownMesage }}</span>
+								<span slot="no-results"></span>
+							</infinite-loading>
+						</template>
+						<template v-slot:item="{ item, attrs, on }">
+							<template v-if="!itemTemplate">
+								<v-list-item v-bind="attrs" v-on="on" class="pui-select__item">
+									<v-list-item-content class="pl-3">
+										<pui-select-text-service :item="item" :itemText="itemText" />
+									</v-list-item-content>
+									<v-list-item-action class="pr-3" v-if="attrs['aria-selected'] === 'true'">
+										<v-icon small class="pui-select__item-icon">fa fa-check</v-icon>
+									</v-list-item-action>
+								</v-list-item>
+							</template>
+							<template v-else>
+								<slot name="theTemplate" :item="item" :selected="attrs.selected"></slot>
+							</template>
+						</template>
+						<template slot="selection" slot-scope="{ item, selected, parent }">
+							<template v-if="selectTemplate">
+								<slot name="selectionTemplate" :item="item"></slot>
+							</template>
+							<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-chip>
+							</template>
+							<template v-else>
+								<pui-select-text-service
+									:truncate="!isDisabled"
+									:writing="isMenuOpened"
+									:disabled="disabled"
+									:item="item"
+									type="select"
+									:itemText="itemText"
+								/>
+							</template>
+						</template>
+					</v-autocomplete>
+				</v-flex>
+				<v-flex xs1 v-if="prependInnerIconUpdate || prependInnerIconRead">
+					<v-btn v-if="prependInnerIconUpdate" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('update')">
+						<v-icon>{{ prependInnerIconUpdate }}</v-icon>
+					</v-btn>
+					<v-btn v-else-if="prependInnerIconRead" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('read')">
+						<v-icon>{{ prependInnerIconRead }}</v-icon>
+					</v-btn>
+				</v-flex>
+				<v-flex xs1 v-if="prependInnerIconInsert">
+					<v-btn v-if="prependInnerIconInsert" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('create')">
+						<v-icon>{{ prependInnerIconInsert }}</v-icon>
+					</v-btn>
+				</v-flex>
+			</v-layout>
+		</div>
+		<div v-else class="ml-1 mr-1">
+			<v-layout>
+				<v-flex :class="labelColumnStyles ? labelColumnStyles : 'xs12 sm6 md4 xl3'">
+					<label :class="getLabelRequiredClass">{{ getLabel }}</label>
+				</v-flex>
+				<v-flex
+					:class="
+						valueColumnStyles
+							? valueColumnStyles
+							: !prependInnerIconRead && !prependInnerIconUpdate && !prependInnerIconInsert
+							? 'xs12 sm6 md8 xl9'
+							: 'xs10 sm5 md7 xl8'
+					"
+				>
+					<v-autocomplete
+						v-model="selectedItems"
+						class="pui-select"
+						:class="getEditedClass"
+						solo
+						flat
+						@click:append="menuArrow"
+						ref="arrowUp"
+						:attach="attach ? true : false"
+						:autocomplete="!filterServerSide"
+						:no-filter="filterServerSide"
+						:readonly="readonly"
+						:return-object="return_object"
+						:clearable="clearable"
+						:label="label"
+						:error="internalError"
+						:error-messages="internalErrorMessages"
+						:items="theItems"
+						:item-text="itemText"
+						:item-value="itemValue"
+						:search-input.sync="search"
+						:required="required"
+						:rules="getRules"
+						:disabled="isDisabled"
+						:multiple="multiple"
+						:placeholder="getPlaceholder"
+						:filter="filter"
+						v-bind="allProps"
+						@focus="focusValue"
+						@blur="checkValue"
+						:hide-details="hideDetails"
+					>
+						<template slot="append-item" v-if="modelName">
+							<infinite-loading @infinite="loading === false && getMoreItemsFromPuiList(search)" ref="infiniteLoading">
+								<span style="font-weight: bold" slot="no-more">{{ allShownMesage }}</span>
+								<span slot="no-results"></span>
+							</infinite-loading>
+						</template>
+						<template v-slot:item="{ item, attrs, on }">
+							<template v-if="!itemTemplate">
+								<v-list-item v-bind="attrs" v-on="on" class="pui-select__item">
+									<v-list-item-content class="pl-3">
+										<pui-select-text-service :item="item" :itemText="itemText" />
+									</v-list-item-content>
+									<v-list-item-action class="pr-3" v-if="attrs['aria-selected'] === 'true'">
+										<v-icon small class="pui-select__item-icon">fa fa-check</v-icon>
+									</v-list-item-action>
+								</v-list-item>
+							</template>
+							<template v-else>
+								<slot name="theTemplate" :item="item" :selected="attrs.selected" :tile="attrs.tile"></slot>
+							</template>
+						</template>
+						<template slot="selection" slot-scope="{ item, selected, parent }">
+							<template v-if="selectTemplate === true">
+								<slot name="selectionTemplate" :item="item"></slot>
+							</template>
+							<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-chip>
+							</template>
+							<template v-else>
+								<pui-select-text-service
+									:truncate="!isDisabled"
+									:writing="isMenuOpened"
+									:item="item"
+									type="select"
+									:itemText="itemText"
+								/>
+							</template>
+						</template>
+					</v-autocomplete>
+				</v-flex>
+				<v-flex xs1 v-if="prependInnerIconUpdate || prependInnerIconRead">
+					<v-btn v-if="prependInnerIconUpdate" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('update')">
+						<v-icon>{{ prependInnerIconUpdate }}</v-icon>
+					</v-btn>
+					<v-btn v-else-if="prependInnerIconRead" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('read')">
+						<v-icon>{{ prependInnerIconRead }}</v-icon>
+					</v-btn>
+				</v-flex>
+				<v-flex xs1 v-if="prependInnerIconInsert">
+					<v-btn v-if="prependInnerIconInsert" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('create')">
+						<v-icon>{{ prependInnerIconInsert }}</v-icon>
+					</v-btn>
+				</v-flex>
+			</v-layout>
+		</div>
+		<pui-select-detail-dialog
+			v-if="showDetailComponent"
+			:parentId="puiSelectId"
+			:componentLabel="detailComponentLabel"
+			:componentName="detailComponentName"
+			:componentPk="detailComponentPk"
+			:componentMethod="detailComponentMethod"
+			:modelName="detailModelName"
+		></pui-select-detail-dialog>
+	</div>
+	<!-- MOBILE -->
+	<div v-else>
+		<v-layout>
+			<v-flex xs12>
+				<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
+				<label v-else class="pui-select__label-mobile" :class="getLabelRequiredClass">{{ getLabel }}</label>
+			</v-flex>
+		</v-layout>
+		<v-layout>
+			<v-flex
+				:class="
+					(prependInnerIconRead || prependInnerIconUpdate) && prependInnerIconInsert
+						? 'xs10'
+						: (prependInnerIconRead || prependInnerIconUpdate) && !prependInnerIconInsert
+						? 'xs11'
+						: 'xs12'
+				"
+			>
+				<v-autocomplete
+					v-model="selectedItems"
+					class="pui-select"
+					:class="getEditedClass"
+					solo
+					flat
+					@click:append="menuArrow"
+					ref="arrowUp"
+					:attach="attach ? true : false"
+					:autocomplete="!filterServerSide"
+					:no-filter="filterServerSide"
+					:readonly="readonly"
+					:return-object="return_object"
+					:clearable="clearable"
+					:label="label"
+					:items="theItems"
+					:error="internalError"
+					:error-messages="internalErrorMessages"
+					:item-text="itemText"
+					:item-value="itemValue"
+					:search-input.sync="search"
+					:required="required"
+					:rules="getRules"
+					:disabled="disabled"
+					:multiple="multiple"
+					:placeholder="getPlaceholder"
+					:filter="filter"
+					v-bind="allProps"
+					@focus="focusValue"
+					@blur="checkValue"
+					:hide-details="hideDetails"
+				>
+					<template slot="append-item" v-if="modelName">
+						<infinite-loading @infinite="loading === false && getMoreItemsFromPuiList(search)" ref="infiniteLoading">
+							<span style="font-weight: bold" slot="no-more">{{ allShownMesage }}</span>
+							<span slot="no-results"></span>
+						</infinite-loading>
+					</template>
+					<template v-slot:item="{ item, attrs, on }">
+						<template v-if="!itemTemplate">
+							<v-list-item v-bind="attrs" v-on="on" class="pui-select__item">
+								<v-list-item-content class="pl-3">
+									<pui-select-text-service :item="item" :itemText="itemText" />
+								</v-list-item-content>
+								<v-list-item-action class="pr-3" v-if="attrs['aria-selected'] === 'true'">
+									<v-icon class="pui-select__item-icon">fa fa-check</v-icon>
+								</v-list-item-action>
+							</v-list-item>
+						</template>
+						<template v-else>
+							<slot name="theTemplate" :item="item" :selected="attrs.selected"></slot>
+						</template>
+					</template>
+					<template slot="selection" slot-scope="{ item, selected, parent }">
+						<template v-if="selectTemplate">
+							<slot name="selectionTemplate" :item="item"></slot>
+						</template>
+						<template v-else-if="multiple === true">
+							<v-chip color="grey lighten-2" :input-value="selected" label small>
+								<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-chip>
+						</template>
+						<template v-else>
+							<pui-select-text-service
+								:truncate="!isDisabled"
+								:writing="isMenuOpened"
+								:item="item"
+								type="select"
+								:itemText="itemText"
+							/>
+						</template>
+					</template>
+				</v-autocomplete>
+			</v-flex>
+			<v-flex xs1 v-if="prependInnerIconUpdate || prependInnerIconRead">
+				<v-btn v-if="prependInnerIconUpdate" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('update')">
+					<v-icon>{{ prependInnerIconUpdate }}</v-icon>
+				</v-btn>
+				<v-btn v-else-if="prependInnerIconRead" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('read')">
+					<v-icon>{{ prependInnerIconRead }}</v-icon>
+				</v-btn>
+			</v-flex>
+			<v-flex xs1 v-if="prependInnerIconInsert">
+				<v-btn v-if="prependInnerIconInsert" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('create')">
+					<v-icon>{{ prependInnerIconInsert }}</v-icon>
+				</v-btn>
+			</v-flex>
+		</v-layout>
+		<pui-select-detail-dialog
+			v-if="showDetailComponent"
+			:parentId="puiSelectId"
+			:componentLabel="detailComponentLabel"
+			:componentName="detailComponentName"
+			:componentPk="detailComponentPk"
+			:componentMethod="detailComponentMethod"
+			:modelName="detailModelName"
+		></pui-select-detail-dialog>
+	</div>
+</template>
+
+<script>
+import PuiSelectTextService from './PuiSelectTextService';
+import PuiSelectDetailDialog from './PuiSelectDetailDialog';
+import InfiniteLoading from 'vue-infinite-loading';
+
+export default {
+	//TOFOLLOW
+	//https://github.com/vuetifyjs/vuetify/issues/5087 Al cerrar las chips del multiselect se abre el menú
+	name: 'PuiSelect',
+	components: {
+		PuiSelectTextService,
+		PuiSelectDetailDialog,
+		'infinite-loading': InfiniteLoading
+	},
+	/* Properties provided by the pui-select */
+	props: {
+		value: {
+			required: false
+		},
+		/* Type: Boolean
+        Native by the v-select
+        If true adds a close icon to the selection*/
+		clearable: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		/* Type: Boolean
+        Native by the v-select
+        If true allows to select multiple items, selectedItems becomes an Array*/
+		multiple: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		/* Type: Boolean
+        If true applies a custom template slot for the list of items
+        The parent has to provide it*/
+		itemTemplate: {
+			type: Boolean,
+			default: false
+		},
+		selectTemplate: {
+			type: Boolean,
+			default: false
+		},
+		/* Type: Number {Integer}
+		It is used when the items come from a Service,
+		it will requeste paginated requests of ths number of items*/
+		rows: {
+			type: Number,
+			default: -1
+		},
+		disabled: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		filter: {
+			type: Function,
+			required: false
+		},
+		readonly: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		toplabel: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		placeholder: {
+			type: [String],
+			default: ' ',
+			required: false
+		},
+		return_object: {
+			type: Boolean,
+			default: true
+		},
+		noeditable: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		attach: {
+			type: String,
+			default: null,
+			required: false
+		},
+		labelColumnStyles: {
+			type: [String],
+			required: false
+		},
+		valueColumnStyles: {
+			type: [String],
+			required: false
+		},
+		hideDetails: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		'hide-selected': {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		'hide-no-data': {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		detailModelName: {
+			type: String,
+			default: null,
+			required: false
+		},
+		detailComponentName: {
+			type: String,
+			default: null,
+			required: false
+		},
+		detailActions: {
+			type: Object,
+			default: () => {
+				return {
+					read: true,
+					create: true,
+					update: true
+				};
+			},
+			required: false
+		},
+		/*
+		Type: Array of Objects
+		Items provided by the parent component */
+		items: {
+			type: Array,
+			default: null,
+			required: false
+		},
+		/**
+		 * 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: () => []
+		},
+		/**
+		 * The fields to be searched
+		 */
+		queryFields: {
+			type: Array,
+			default: () => [],
+			required: false
+		},
+		/* Type: String
+		Native by the v-select
+		If Present the select will show this label in the input */
+		label: {
+			type: [String],
+			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 */
+		controller: {
+			type: String,
+			default: '/puisearch',
+			required: false
+		},
+		/* Type: Object
+		The pui9 list filter object*/
+		pui9filter: {
+			type: Object,
+			default: null,
+			required: false
+		},
+		filterId: {
+			type: String
+		},
+		filterMap: {
+			type: Object,
+			default: null
+		},
+		filterMapOp: {
+			type: String,
+			default: 'and'
+		},
+		filterParentMap: {
+			type: Object,
+			default: null
+		},
+		fixedFilter: {
+			type: Object,
+			default: null
+		},
+		order: {
+			type: Object,
+			default: null
+		},
+		/* Type: String
+		Instead of providing the items, if controller is provided it will get the items by calling the controller in @getItems */
+		modelFormMapping: {
+			type: Object,
+			default: null,
+			required: false
+		},
+		/* Type: String
+		The items text property name */
+		itemText: {
+			type: [String, Array, Function],
+			default: 'text',
+			required: true
+		},
+		modelName: {
+			type: String
+		},
+		rules: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		/* Type: String
+		The items id property name */
+		itemValue: {
+			type: [String, Array, Function],
+			default: 'value',
+			required: false
+		},
+		/* Type: Boolean
+		Native by the v-select
+		If true adds a close icon to the selection, @model[property] */
+		searchable: {
+			type: [Boolean],
+			default: true,
+			required: false
+		},
+
+		/* Type: Boolean
+		If true applies the required rule in @rules.required */
+		required: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		/* Type: Number
+		Default number of rows for a multiselect */
+		rowNum: {
+			type: Number,
+			default: 1000,
+			required: false
+		},
+		/* Type: Boolean
+		Fix for reactivity, require itemsToSelect to be a computed */
+		reactive: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		emitSelectedItemsEventOnFirstLoad: {
+			type: Boolean,
+			default: true,
+			required: false
+		}
+	},
+	data() {
+		return {
+			isMobile: false,
+			initialValue: null,
+			selectedItems: null,
+			page: 0,
+			showDetailComponent: false,
+			newDisabled: undefined,
+			hasBeenFocused: false,
+			itemTextMultiple: false,
+			itemValueMultiple: false,
+			itemTextNested: false,
+			itemValueNested: false,
+			search: '',
+			loading: false,
+			theItems: [],
+			internalError: false,
+			internalErrorMessages: '',
+			selected: false,
+			initialItemsToSelect: [],
+			internalController: null,
+			previousSelectedItems: undefined,
+			doingThings: false,
+			itemManuallySelected: false,
+			itemProgrammaticallySelected: false,
+			firstLoad: true,
+			requestDataPromise: undefined,
+			selectedItemsEventFirstLoad: true,
+			internalQueryFields: []
+		};
+	},
+	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() {
+			return { ...this.$attrs, ...this.$props };
+		},
+		isMultiSelect() {
+			return this.$options._componentTag === 'puimultiselect';
+		},
+		getItemsFrom() {
+			if (this.modelName) {
+				return 'FromPuiList';
+			} else if (this.internalController) {
+				return 'FromService';
+			}
+			return '';
+		},
+		fixedFilterWatcher() {
+			return JSON.stringify(this.fixedFilter);
+		},
+		filterMapWatcher() {
+			return JSON.stringify(this.filterMap);
+		},
+		requiredMessage() {
+			return this.$t('pui9.error.field_required');
+		},
+		allShownMesage() {
+			return this.$t('pui9.components.select.all-items-showed');
+		},
+		isDisabled() {
+			if (!this.isEmpty(this.newDisabled)) {
+				return this.newDisabled;
+			}
+			return this.disabled;
+		},
+		filterServerSide() {
+			if (this.items) {
+				return false;
+			}
+			return true;
+		},
+		getLabel() {
+			return this.allProps.label;
+		},
+		getLabelRequiredClass() {
+			return { 'v-label--required': this.required };
+		},
+		getEditedClass() {
+			const editedClass = { 'v-text-field--edited': this.isEdited };
+			if (this.attach) {
+				editedClass['puiselect-' + this.attach] = true;
+			}
+			return editedClass;
+		},
+		getPlaceholder() {
+			var placeholder = this.placeholder;
+			if (this.isMobile && this.placeholder === ' ') {
+				placeholder = this.label;
+			}
+			return placeholder;
+		},
+		prependInnerIconRead() {
+			if (this.detailModelName && this.detailComponentName && this.detailActions.read) {
+				const model = this.$store.getters.getModelByName(this.detailModelName);
+				if (model && model.functionalities) {
+					if (this.$store.getters.hasFunctionality(model.functionalities.get)) {
+						return 'far fa-info-circle';
+					}
+				}
+			}
+			return null;
+		},
+		prependInnerIconUpdate() {
+			if (this.detailModelName && !this.disabled && this.detailActions.update) {
+				const model = this.$store.getters.getModelByName(this.detailModelName);
+				if (model && model.functionalities) {
+					// eslint-disable-next-line
+					if (this.$store.getters.hasFunctionality(model.functionalities.update)) {
+						return 'far fa-edit';
+					}
+				}
+			}
+			return null;
+		},
+		prependInnerIconInsert() {
+			if (this.detailModelName && !this.disabled && this.detailActions.create) {
+				const model = this.$store.getters.getModelByName(this.detailModelName);
+				if (model && model.functionalities) {
+					// eslint-disable-next-line
+					if (this.$store.getters.hasFunctionality(model.functionalities.insert)) {
+						return 'far fa-plus-circle';
+					}
+				}
+			}
+			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;
+		},
+		isEdited() {
+			if (this.noeditable || this.disabled || this.readonly || this.selected === false) {
+				return false;
+			} else {
+				return this.compareInitialWithCurrentSelected();
+			}
+		},
+		isMenuOpened() {
+			return this.$refs.arrowUp ? this.$refs.arrowUp.isMenuActive || this.$refs.arrowUp.isFocused : false;
+		}
+	},
+	methods: {
+		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';
+					}
+				}, 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) {
+				arrowEl.isMenuActive = false;
+				arrowEl.blur();
+			} else {
+				arrowEl.isFocused = true;
+				this.focusValue();
+			}
+		},
+		compareInitialWithCurrentSelected() {
+			if (this.multiple) {
+				//comprobamos existencias, luego dimensiones y por último contenido de los arrays
+				if (!this.initialItemsToSelect || this.selectedItems.length === 0) {
+					if (this.initialItemsToSelect) {
+						return true;
+					} else if (this.selectedItems.length > 0) {
+						return true;
+					}
+					//los dos estan vacios
+					return false;
+				}
+				if (!this.isEmpty(this.itemValue)) {
+					if (this.initialItemsToSelect.length !== this.selectedItems.length) {
+						return true;
+					} else if (this.itemValueNested === true) {
+						//TODO
+					} else if (this.itemValueMultiple === true) {
+						for (let index = 0, length = this.initialItemsToSelect.length; index < length; index++) {
+							const item = this.initialItemsToSelect[index];
+							const selectedItem = this.selectedItems[index];
+							for (let i = 0, length = this.itemValue.length; i < length; i++) {
+								const pkProp = this.itemValue[i];
+								if (item[pkProp] !== selectedItem[pkProp]) {
+									return true;
+								}
+							}
+						}
+					} else {
+						for (let i = 0, length = this.initialItemsToSelect.length; i < length; i++) {
+							if (this.initialItemsToSelect[i][this.itemValue] !== this.selectedItems[i][this.itemValue]) {
+								return true;
+							}
+						}
+					}
+					return false;
+				} else {
+					for (let i = 0, length = this.initialItemsToSelect.length; i < length; i++) {
+						if (this.initialItemsToSelect[i] !== this.selectedItems[i]) {
+							return true;
+						}
+					}
+				}
+				return false;
+			} else {
+				//comprobamos existencias y por último contenido de los objetos
+				if (this.isEmpty(this.initialItemsToSelect) || this.isEmpty(this.selectedItems)) {
+					if (this.initialItemsToSelect && this.initialItemsToSelect.length > 0) {
+						if (this.itemValueMultiple === true) {
+							return !this.isEmpty(this.initialItemsToSelect[this.itemValue[0]]);
+						} else {
+							return !this.isEmpty(this.initialItemsToSelect[this.itemValue]);
+						}
+					} else if (!this.isEmpty(this.selectedItems)) {
+						return true;
+					}
+					//los dos estan vacios
+					return false;
+				}
+				if (!this.isEmpty(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]]) {
+								return true;
+							}
+						}
+						return false;
+					} else if (this.itemValueNested === true) {
+						//TODO
+					}
+					return this.initialItemsToSelect[0][this.itemValue] !== this.selectedItems[this.itemValue];
+				}
+				return this.initialItemsToSelect[0] !== this.selectedItems;
+			}
+		},
+		checkValue() {
+			this.clearMessages();
+			if (this.required) {
+				if (this.isEmpty(this.selectedItems)) {
+					this.showErrorMessage();
+				}
+			}
+		},
+		clearMessages() {
+			this.internalError = false;
+			this.internalErrorMessages = [];
+		},
+		showErrorMessage() {
+			this.internalError = true;
+			this.internalErrorMessages = [this.requiredMessage];
+		},
+		filterItems(search) {
+			if (this.modelName) {
+				clearTimeout(this.delayTimer);
+				this.delayTimer = setTimeout(() => {
+					this.getItemsFromPuiList(search);
+				}, 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)) {
+				const detailPk = {};
+				let itemValues = this.itemValue;
+				if (this.itemValueMultiple === false) {
+					itemValues = [this.itemValue];
+				}
+				itemValues.forEach((pkProperty) => {
+					if (!this.isEmpty(this.selectedItems[pkProperty])) {
+						detailPk[pkProperty] = this.selectedItems[pkProperty];
+					}
+				});
+
+				this.detailComponentMethod = method;
+				this.detailComponentLabel = this.label;
+				this.detailComponentPk = this.$puiUtils.utf8ToB64(JSON.stringify(detailPk));
+				this.showDetailComponent = true;
+			} else if (method === 'create') {
+				this.detailComponentMethod = method;
+				this.detailComponentLabel = this.label;
+				this.detailComponentPk = 'new';
+				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) {
+				itemValues = [this.itemValue];
+			}
+			if (this.multiple !== true) {
+				itemValues.forEach((pkValue) => {
+					if (this.isEmpty(this.selectedItems)) {
+						if (this.filterId && this.filterMap) {
+							let isParentPkValue = false;
+							for (const property in this.filterMap) {
+								if (property === pkValue) {
+									isParentPkValue = true;
+									break;
+								}
+							}
+							if (!isParentPkValue) {
+								this.value[this.modelFormMapping[pkValue]] = null;
+							}
+						} else {
+							this.value[this.modelFormMapping[pkValue]] = null;
+						}
+						return;
+					}
+					this.value[this.modelFormMapping[pkValue]] = this.selectedItems[pkValue];
+					for (const property in this.selectedItems) {
+						if (pkValue === property && !Object.prototype.hasOwnProperty.call(this.value, property)) {
+							this.value[property] = this.selectedItems[property];
+						}
+					}
+					if (this.filterId && this.filterMap && !this.firstLoad && !this.selectedItemsEventFirstLoad) {
+						this.sendDataToParent();
+					}
+				});
+			} else {
+				this.selectedItems.forEach((item, index) => {
+					itemValues.forEach((pkValue) => {
+						this.value[index][this.modelFormMapping[pkValue]] = item[pkValue];
+						for (var property in this.selectedItems[index]) {
+							if (pkValue === property && !Object.prototype.hasOwnProperty.call(this.value[index], property)) {
+								this.value[index][property] = this.selectedItems[index][property];
+							}
+						}
+					});
+				});
+			}
+			return this.value;
+		},
+		sendDataToParent() {
+			const selectedObject = {};
+			for (const property in this.filterMap) {
+				let parentProperty = property;
+				if (this.filterParentMap && !this.isEmpty(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
+		},
+		getItemsFromPuiList(search) {
+			this.page = 1;
+			this.loading = true;
+			const loadItems = (response) => {
+				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 {
+						this.checkSelectedItems();
+					}
+					this.$refs.infiniteLoading && this.$refs.infiniteLoading.stateChanger.loaded();
+				}
+				if (response.data.totalPages <= this.page) {
+					this.$refs.infiniteLoading && this.$refs.infiniteLoading.stateChanger.complete();
+				}
+				this.loading = false;
+			};
+			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();
+		},
+		postRequest(body, successCallback) {
+			this.$puiRequests.postRequest(this.internalController, body, successCallback, (error) => {
+				console.log(error);
+			});
+		},
+		getBodyRequest(search) {
+			let paginateItemsParams = {
+				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;
+			}
+			const searchOrder = this.createOrder();
+			if (searchOrder) {
+				paginateItemsParams.order = searchOrder;
+			}
+			return paginateItemsParams;
+		},
+		createFilter() {
+			let theFilter = this.pui9filter;
+
+			if (this.filterMap) {
+				const group = this.createRelatedComboFilterGroup();
+				if (group && group.rules && group.rules.length > 0) {
+					if (theFilter) {
+						theFilter.groups.push(group);
+					} else {
+						theFilter = group;
+					}
+				}
+			}
+
+			if (this.fixedFilter && !this.isDisabled) {
+				if (theFilter) {
+					theFilter.groups.push(this.fixedFilter);
+				} else {
+					theFilter = this.fixedFilter;
+				}
+			}
+
+			return theFilter;
+		},
+		createRelatedComboFilterGroup() {
+			const group = {
+				groupOp: this.filterMapOp ? this.filterMapOp.toLowerCase() : 'and',
+				rules: [],
+				groups: []
+			};
+
+			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)) {
+						group.rules.push({
+							field: colmodel,
+							op: 'eq',
+							data: value
+						});
+					}
+				}
+			} else {
+				// TODO: multiple with filter...
+			}
+
+			return group;
+		},
+		createOrder() {
+			if (!this.order) {
+				return null;
+			}
+			const searchOrder = [];
+			for (const column in this.order) {
+				const direction = this.order[column];
+				searchOrder.push({ column: column, direction: direction });
+			}
+
+			return searchOrder;
+		},
+		checkForNestedFields(stringField) {
+			if (stringField instanceof Function) {
+				return false;
+			}
+
+			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] });
+					}
+				});
+			});
+
+			if (this.filterMap) {
+				const group = this.createRelatedComboFilterGroup();
+				if (group && group.rules && group.rules.length > 0) {
+					filter.groups.push(group);
+				}
+			}
+
+			if (this.fixedFilter && !this.isDisabled) {
+				filter.groups.push(this.fixedFilter);
+			}
+			return filter;
+		},
+		getSelectedItemsFromPuiList() {
+			const filter = this.getFilterRequest();
+			if (this.isEmpty(filter.rules) && this.isEmpty(filter.groups)) {
+				if (this.firstLoad) this.firstLoad = false;
+				return;
+			}
+
+			const data = {
+				model: this.modelName,
+				queryFields: this.internalQueryFields,
+				filter
+			};
+
+			const searchOrder = this.createOrder();
+			if (searchOrder) {
+				data.order = searchOrder;
+			}
+
+			const itemsToSelectOldValue = JSON.stringify(this.itemsToSelect);
+
+			let promise = new Promise((resolve) => {
+				this.$puiRequests.postRequest(this.internalController, data, (response) => {
+					if (response && response.data) {
+						if (this.multiple === false) {
+							const itemsToSelectHaveValue = this.haveItemsToSelectValue();
+							if (itemsToSelectHaveValue) {
+								const itemsToSelectNewValue = JSON.stringify(this.itemsToSelect);
+								if (itemsToSelectNewValue != itemsToSelectOldValue && this.firstLoad) {
+									this.theItems = response.data.data;
+									this.selectItem(this.itemsToSelect);
+								} else {
+									this.selectedItems = response.data.data[0];
+								}
+							} else {
+								this.selectedItems = this.multiple ? [] : null;
+							}
+						} else {
+							this.selectedItems = response.data.data;
+						}
+						this.checkSelectedItems();
+						resolve(response.data.data);
+						if (this.firstLoad) this.firstLoad = false;
+					}
+				});
+			});
+
+			if (!this.firstLoad) {
+				this.requestDataPromise = promise;
+			}
+		},
+		haveItemsToSelectValue() {
+			const itemValues = this.itemValueMultiple === false ? [this.itemValue] : this.itemValue;
+			let itemsToSelectHasValue = true;
+			this.itemsToSelect.forEach((item) => {
+				itemValues.forEach((pkProperty) => {
+					if (this.isEmpty(item[pkProperty])) {
+						itemsToSelectHasValue = false;
+					}
+				});
+			});
+			if (!itemsToSelectHasValue && this.onPuiSelectItemsToSelect) {
+				itemsToSelectHasValue = true;
+				this.onPuiSelectItemsToSelect.forEach((item) => {
+					itemValues.forEach((pkProperty) => {
+						if (this.isEmpty(item[pkProperty])) {
+							itemsToSelectHasValue = false;
+						}
+					});
+				});
+				this.onPuiSelectItemsToSelect = null;
+			}
+			return itemsToSelectHasValue;
+		},
+		selectItems() {
+			this.selectedItems = this.multiple ? [] : null;
+			if (this.multiple === true || this.isMultiSelect) {
+				this.selectedItems = [];
+			}
+
+			// only for multiselect
+			this.setAvailableItems && this.setAvailableItems();
+			if (this.isEmpty(this.itemsToSelect)) {
+				return;
+			}
+			if (this.multiple === true) {
+				this.getSelectedItems();
+			} else {
+				this[`getSelectedItems${this.getItemsFrom}`]();
+			}
+			this.selected = true;
+		},
+		/**
+		 * Este método se aplica en el componente pui-select y cuando hay un controlador de pui.
+		 *
+		 * Lo que hace es: como el listado de items cuando hay un controlador es paginado, puede ser que,
+		 * los items a seleccionar no se encuentren en la primera página de items.
+		 * Por esto comprueba que si no coincide itemsToSelect y selectedItems, y si no coinciden,
+		 * cargará los primeros a theItems y después seleccionará
+		 **/
+		checkSelectedItems() {
+			if (this.modelName && this.isMultiSelect === false) {
+				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) {
+						this.selectedItems = this.itemsToSelect[0];
+					}
+
+					this.selectedItems && this.theItems.unshift(this.selectedItems);
+				} else {
+					// si no es la selección inicial, viene de una selección por un getItems de una búsqueda, ya no utilizamos itemsToSelect
+					if (this.selected === true) {
+						this.selectedItems.forEach((item) => {
+							this.theItems.unshift(item);
+						});
+						// si es la selección inicial
+					} else {
+						if (this.selectedItems.length < this.itemsToSelect.length) {
+							this.selectedItems = [];
+							this.itemsToSelect.forEach((item) => {
+								this.theItems.unshift(item);
+								this.selectedItems.push(item);
+							});
+						}
+					}
+				}
+			}
+		},
+		resetItems(newValue) {
+			if (this.isEmpty(newValue)) {
+				this.selectedItems = this.multiple ? [] : null;
+			}
+			if (this.isEmpty(this.selectedItems)) {
+				return;
+			}
+			let filtersValid = true;
+			for (var pkProperty in this.filterMap) {
+				let parentPkProperty = pkProperty;
+				if (this.filterParentMap && this.filterParentMap[pkProperty]) {
+					parentPkProperty = this.filterParentMap[pkProperty];
+				}
+				if (
+					!this.isEmpty(newValue[pkProperty]) &&
+					newValue[pkProperty] !== this.selectedItems[pkProperty] &&
+					!this.isEmpty(newValue[parentPkProperty]) &&
+					newValue[parentPkProperty] !== this.selectedItems[pkProperty]
+				) {
+					filtersValid = false;
+				}
+			}
+			if (!filtersValid || !this.filterMap) this.selectedItems = this.multiple ? [] : null;
+		},
+		selectPreviousValidItems() {
+			if (this.multiple === true) {
+				this.selectedItems = [];
+				this.previousSelectedItems.forEach((previousItem) => {
+					const strPkPrevItem = JSON.stringify(this.getPkFromItem(previousItem));
+					this.theItems.forEach((requestItem) => {
+						const strPkRequestItem = JSON.stringify(this.getPkFromItem(requestItem));
+						if (strPkPrevItem === strPkRequestItem) {
+							this.selectedItems.push(previousItem);
+						}
+					});
+				});
+			} else {
+				const strPkPrevItem = JSON.stringify(this.getPkFromItem(this.previousSelectedItems));
+				this.theItems.forEach((requestItem) => {
+					const strPkRequestItem = JSON.stringify(this.getPkFromItem(requestItem));
+					if (strPkPrevItem === strPkRequestItem) {
+						this.theItems.unshift(requestItem);
+						this.selectedItems = requestItem;
+					}
+				});
+			}
+		},
+		getPkFromItem(item) {
+			const theItemPkFields = Array.isArray(this.itemValue) ? this.itemValue : [this.itemValue];
+			const objectPk = {};
+			theItemPkFields.forEach((pkField) => {
+				objectPk[pkField] = item[pkField];
+			});
+			return objectPk;
+		},
+		selectItem(itemToSelect) {
+			this.itemProgrammaticallySelected = true;
+			const newSelected = this.theItems.find((element) => {
+				for (const key in itemToSelect[0]) {
+					if (Object.prototype.hasOwnProperty.call(itemToSelect[0], key)) {
+						if (itemToSelect[0][key] !== element[key]) return false;
+					}
+				}
+				return true;
+			});
+			const filter = this.getFilterRequest(itemToSelect);
+			if (this.isEmpty(newSelected) && this.modelName && filter.rules.length > 0) {
+				const params = {
+					model: this.modelName,
+					filter: filter
+				};
+				this.postRequest(params, (response) => {
+					if (response && response.data && response.data.data.length > 0) {
+						this.theItems = this.theItems.concat(this.multiple === true ? response.data.data : [response.data.data[0]]);
+						this.selectedItems = this.multiple === true ? response.data.data : response.data.data[0];
+					} else {
+						this.selectedItems = undefined;
+					}
+				});
+			} else {
+				this.selectedItems = newSelected;
+			}
+		},
+		reactiveHandler(newValue) {
+			if (this.reactive) {
+				if ((!this.itemManuallySelected || Object.values(newValue[0]).some((x) => !x)) && !this.firstLoad) {
+					this.itemManuallySelected = false;
+					this.selectItem(newValue);
+				} else {
+					if (this.requestDataPromise) {
+						this.requestDataPromise.then((theItems) => {
+							if (!this.itemManuallySelected) {
+								this.theItems = theItems;
+								this.selectItem(newValue);
+							}
+							delete this.requestDataPromise;
+						});
+					}
+					this.itemManuallySelected = false;
+				}
+			}
+		},
+		isEmpty(...values) {
+			return values.some(
+				(value) =>
+					value === undefined ||
+					value === null ||
+					(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();
+				}
+			});
+		}
+	},
+	beforeDestroy() {
+		this.unsubscribeEvents();
+	}
+};
+</script>