[Modals] Refactoring

app/src/plugins/tm@_components/z-autocomplete.vue

@@ -0,0 +1,108 @@
+<template>
+	<div class="wrapper">
+		<v-text-field
+			label="Vyhľadať zamestnanca"
+			variant="solo"
+			v-model="search"
+			@keydown.enter="optionSelected()"
+			:class="{ error: validations?.$errors?.length }"
+			:hint="
+				validations?.$errors
+					? errorUtils.parseErrors(validations?.$errors)
+					: null
+			"
+		/>
+
+		<div class="suggestion" v-if="suggestion">
+			<span class="hidden-part">{{ suggestion._suggestionHiddenPart }}</span>
+			<span>{{ suggestion._suggestionShownPart }}</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
+
+export default {
+	emits: ['option-selected'],
+
+	props: {
+		options: {
+			type: Array,
+			required: true
+		},
+
+		validations: {
+			type: Object || null,
+			required: false
+		}
+	},
+
+	data() {
+		return {
+			errorUtils,
+			search: ''
+		}
+	},
+
+	computed: {
+		suggestion() {
+			const normalizedSearch = this._normalize(this.search)
+
+			if (!normalizedSearch.length || !this.options.length)
+				return null
+
+			const filteredOptions = this.options.filter(option => {
+				const normalizedValue = this._normalize(option.value)
+
+				return normalizedSearch == normalizedValue.slice(0, normalizedSearch.length)
+			})
+
+			if (!filteredOptions[0])
+				return null
+
+			const suggestion = {
+				...filteredOptions[0],
+				_suggestionHiddenPart: filteredOptions[0].value.slice(0, normalizedSearch.length),
+				_suggestionShownPart: filteredOptions[0].value.slice(normalizedSearch.length, filteredOptions[0].value.length)
+
+			}
+
+			return suggestion
+		}
+	},
+
+	methods: {
+		optionSelected() {
+			if (!this.suggestion)
+				return
+
+			this.$emit('option-selected', this.suggestion)
+			this.search = ''
+		},
+
+		_normalize(value) {
+			return value
+				.trim()
+				.toLowerCase()
+				.normalize("NFD")
+				.replace(/[\u0300-\u036f]/g, "")
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+	position: relative
+
+	.suggestion
+		position: absolute
+		top: 27px
+		left: 15.5px
+		opacity: 0.5
+		letter-spacing: 0.009375em
+
+		.hidden-part
+			opacity: 0
+</style>