Move to global eslint

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

19 files changed, 315 insertions, 143 deletions

diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index ccce1fb8..278239c6 100644
--- a/src/components/Actions/ActionCopyNtoFN.vue
+++ b/src/components/Actions/ActionCopyNtoFN.vue
@@ -27,7 +27,7 @@
 </template>
 <script>
 import { ActionButton } from 'nextcloud-vue'
-import ActionsMixin from 'Mixins/ActionsMixin'
+import ActionsMixin from '../../mixins/ActionsMixin'
 
 export default {
 	name: 'ActionCopyNtoFN',
diff --git a/src/components/Actions/ActionToggleYear.vue b/src/components/Actions/ActionToggleYear.vue
index 9c204fbd..0ad9dacd 100644
--- a/src/components/Actions/ActionToggleYear.vue
+++ b/src/components/Actions/ActionToggleYear.vue
@@ -22,13 +22,14 @@
 
 <template>
 	<ActionCheckbox :checked="omitYear"
-		@check="removeYear" @uncheck="addYear">
+		@check="removeYear"
+		@uncheck="addYear">
 		{{ t('contacts', 'Omit year') }}
 	</ActionCheckbox>
 </template>
 <script>
 import { ActionCheckbox } from 'nextcloud-vue'
-import ActionsMixin from 'Mixins/ActionsMixin'
+import ActionsMixin from '../../mixins/ActionsMixin'
 
 export default {
 	name: 'ActionToggleYear',
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 86b0333d..0dd8ead8 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -46,20 +46,39 @@
 				<!-- fullname, org, title -->
 				<div id="contact-header-infos">
 					<h2>
-						<input id="contact-fullname" ref="fullname" v-model="contact.fullName"
-							:readonly="contact.addressbook.readOnly" :placeholder="t('contacts', 'Name')" type="text"
-							autocomplete="off" autocorrect="off" spellcheck="false"
+						<input id="contact-fullname"
+							ref="fullname"
+							v-model="contact.fullName"
+							:readonly="contact.addressbook.readOnly"
+							:placeholder="t('contacts', 'Name')"
+							type="text"
+							autocomplete="off"
+							autocorrect="off"
+							spellcheck="false"
 							name="fullname"
-							@input="debounceUpdateContact" @click="selectInput">
+							@input="debounceUpdateContact"
+							@click="selectInput">
 					</h2>
 					<div id="details-org-container">
-						<input id="contact-org" v-model="contact.org" :readonly="contact.addressbook.readOnly"
-							:placeholder="t('contacts', 'Company')" type="text" autocomplete="off"
-							autocorrect="off" spellcheck="false" name="org"
+						<input id="contact-org"
+							v-model="contact.org"
+							:readonly="contact.addressbook.readOnly"
+							:placeholder="t('contacts', 'Company')"
+							type="text"
+							autocomplete="off"
+							autocorrect="off"
+							spellcheck="false"
+							name="org"
 							@input="debounceUpdateContact">
-						<input id="contact-title" v-model="contact.title" :readonly="contact.addressbook.readOnly"
-							:placeholder="t('contacts', 'Title')" type="text" autocomplete="off"
-							autocorrect="off" spellcheck="false" name="title"
+						<input id="contact-title"
+							v-model="contact.title"
+							:readonly="contact.addressbook.readOnly"
+							:placeholder="t('contacts', 'Title')"
+							type="text"
+							autocomplete="off"
+							autocorrect="off"
+							spellcheck="false"
+							name="title"
 							@input="debounceUpdateContact">
 					</div>
 				</div>
@@ -73,19 +92,24 @@
 							trigger: 'hover focus'
 						}"
 						:class="{'icon-loading-small': loadingUpdate,
-							[`${warning.icon}`]: warning}" class="header-icon" href="#" />
+							[`${warning.icon}`]: warning}"
+						class="header-icon"
+						href="#" />
 
 					<!-- conflict message -->
-					<div v-if="conflict" v-tooltip="{
+					<div v-if="conflict"
+						v-tooltip="{
 							content: conflict,
 							show: true,
 							trigger: 'manual',
-						}" class="header-icon header-icon--pulse icon-history-force-white"
+						}"
+						class="header-icon header-icon--pulse icon-history-force-white"
 						@click="refreshContact" />
 
 					<!-- menu actions -->
 					<Actions class="header-menu" menu-align="right">
-						<ActionLink :href="contact.url" :download="`${contact.displayName}.vcf`"
+						<ActionLink :href="contact.url"
+							:download="`${contact.displayName}.vcf`"
 							icon="icon-download">
 							{{ t('contacts', 'Download') }}
 						</ActionLink>
@@ -99,7 +123,9 @@
 				</div>
 
 				<!-- qrcode -->
-				<Modal v-if="qrcode" id="qrcode-modal" :title="contact.displayName"
+				<Modal v-if="qrcode"
+					id="qrcode-modal"
+					:title="contact.displayName"
 					@close="closeQrModal">
 					<img :src="`data:image/svg+xml;base64,${qrcode}`" class="qrcode" width="400">
 				</Modal>
@@ -115,9 +141,12 @@
 				<!-- passing the debounceUpdateContact so that the contact-property component contains the function
 					and allow us to use it on the rfcProps since the scope is forwarded to the actions -->
 				<ContactProperty v-for="(property, index) in sortedProperties"
-					:key="`${index}-${contact.key}-${property.name}`" :index="index"
-					:sorted-properties="sortedProperties" :property="property"
-					:contact="contact" :local-contact="localContact"
+					:key="`${index}-${contact.key}-${property.name}`"
+					:index="index"
+					:sorted-properties="sortedProperties"
+					:property="property"
+					:contact="contact"
+					:local-contact="localContact"
 					:update-contact="debounceUpdateContact" />
 
 				<!-- addressbook change select - no last property because class is not applied here,
@@ -125,14 +154,19 @@
 					we are hijacking this... (this is supposed to be used with a ICAL.property, but to avoid code
 					duplication, we created a fake propModel and property with our own options here) -->
 				<PropertySelect v-if="addressbooksOptions.length > 1"
-					:prop-model="addressbookModel" :value.sync="addressbook"
-					:is-first-property="true" :is-last-property="true"
+					:prop-model="addressbookModel"
+					:value.sync="addressbook"
+					:is-first-property="true"
+					:is-last-property="true"
 					:property="{}"
 					class="property--addressbooks property--last property--without-actions" />
 
 				<!-- Groups always visible -->
-				<PropertyGroups :prop-model="groupsModel" :value.sync="groups" :contact="contact"
-					:is-read-only="isReadOnly" class="property--groups property--last" />
+				<PropertyGroups :prop-model="groupsModel"
+					:value.sync="groups"
+					:contact="contact"
+					:is-read-only="isReadOnly"
+					class="property--groups property--last" />
 
 				<!-- Last modified-->
 				<PropertyRev v-if="contact.rev" :value="contact.rev" />
@@ -151,8 +185,8 @@ import qr from 'qr-image'
 import { stringify } from 'ical.js'
 import { ActionLink, ActionButton } from 'nextcloud-vue'
 
-import rfcProps from 'Models/rfcProps'
-import validate from 'Services/validate'
+import rfcProps from '../models/rfcProps'
+import validate from '../services/validate'
 
 import AddNewProp from './ContactDetails/ContactDetailsAddNewProp'
 import ContactAvatar from './ContactDetails/ContactDetailsAvatar'
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index abb2985a..13520ac7 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -29,16 +29,20 @@
 			<div class="property__label" />
 
 			<!-- type selector -->
-			<multiselect :options="availableProperties" :placeholder="t('contacts', 'Choose property type')" class="property__value"
-				track-by="id" label="name" @input="addProp" />
+			<multiselect :options="availableProperties"
+				:placeholder="t('contacts', 'Choose property type')"
+				class="property__value"
+				track-by="id"
+				label="name"
+				@input="addProp" />
 		</div>
 	</div>
 </template>
 
 <script>
-import rfcProps from 'Models/rfcProps'
-import Contact from 'Models/contact'
-import PropertyTitle from 'Components/Properties/PropertyTitle'
+import rfcProps from '../../models/rfcProps'
+import Contact from '../../models/contact'
+import PropertyTitle from '../Properties/PropertyTitle'
 import ICAL from 'ical.js'
 
 export default {
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index fbfea250..a8762983 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -25,21 +25,30 @@
 	<div class="contact-header-avatar">
 		<div class="contact-header-avatar__wrapper">
 			<div class="contact-header-avatar__background" @click="toggleModal" />
-			<div v-if="contact.photo" :style="{ 'backgroundImage': `url(${contact.photoUrl})` }"
+			<div v-if="contact.photo"
+				:style="{ 'backgroundImage': `url(${contact.photoUrl})` }"
 				class="contact-header-avatar__photo"
 				@click="toggleModal" />
 
 			<div v-click-outside="closeMenu" class="contact-header-avatar__options">
-				<a v-tooltip.bottom="t('contacts', 'Add a new picture')" href="#" class="contact-avatar-options"
+				<a v-tooltip.bottom="t('contacts', 'Add a new picture')"
+					href="#"
+					class="contact-avatar-options"
 					:class="loading ? 'icon-loading-small' : 'icon-picture-force-white'"
 					@click.stop.prevent="toggleMenu" />
-				<input id="contact-avatar-upload" ref="uploadInput" type="file"
-					class="hidden" accept="image/*" @change="processFile">
+				<input id="contact-avatar-upload"
+					ref="uploadInput"
+					type="file"
+					class="hidden"
+					accept="image/*"
+					@change="processFile">
 			</div>
 
 			<Modal v-if="maximizeAvatar"
-				ref="modal" class="contact-header-modal"
-				size="large" :title="contact.displayName"
+				ref="modal"
+				class="contact-header-modal"
+				size="large"
+				:title="contact.displayName"
 				@close="toggleModal">
 				<template #actions>
 					<ActionButton v-if="!isReadOnly" icon="icon-upload" @click="selectFileInput">
@@ -55,8 +64,11 @@
 						{{ t('contacts', 'Download picture') }}
 					</ActionLink>
 				</template>
-				<img ref="img" :src="contact.photoUrl" class="contact-header-modal__photo"
-					:style="{ width, height }" @load="updateImgSize">
+				<img ref="img"
+					:src="contact.photoUrl"
+					class="contact-header-modal__photo"
+					:style="{ width, height }"
+					@load="updateImgSize">
 			</Modal>
 
 			<!-- out of the avatar__options because of the overflow hidden -->
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index ac2452f5..ece501e1 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -22,23 +22,34 @@
 
 <template>
 	<!-- If not in the rfcProps then we don't want to display it -->
-	<component :is="componentInstance" v-if="propModel && propType !== 'unknown'" ref="component"
-		:select-type.sync="selectType" :prop-model="propModel" :value.sync="value"
-		:is-first-property="isFirstProperty" :property="property" :is-last-property="isLastProperty"
-		:class="{'property--last': isLastProperty}" :local-contact="localContact" :prop-name="propName"
-		:prop-type="propType" :options="sortedModelOptions" :is-read-only="isReadOnly"
-		@delete="deleteProp" @update="updateContact" />
+	<component :is="componentInstance"
+		v-if="propModel && propType !== 'unknown'"
+		ref="component"
+		:select-type.sync="selectType"
+		:prop-model="propModel"
+		:value.sync="value"
+		:is-first-property="isFirstProperty"
+		:property="property"
+		:is-last-property="isLastProperty"
+		:class="{'property--last': isLastProperty}"
+		:local-contact="localContact"
+		:prop-name="propName"
+		:prop-type="propType"
+		:options="sortedModelOptions"
+		:is-read-only="isReadOnly"
+		@delete="deleteProp"
+		@update="updateContact" />
 </template>
 
 <script>
 import { Property } from 'ical.js'
-import rfcProps from 'Models/rfcProps'
-import Contact from 'Models/contact'
+import rfcProps from '../../models/rfcProps'
+import Contact from '../../models/contact'
 
-import PropertyText from 'Components/Properties/PropertyText'
-import PropertyMultipleText from 'Components/Properties/PropertyMultipleText'
-import PropertyDateTime from 'Components/Properties/PropertyDateTime'
-import PropertySelect from 'Components/Properties/PropertySelect'
+import PropertyText from '../Properties/PropertyText'
+import PropertyMultipleText from '../Properties/PropertyMultipleText'
+import PropertyDateTime from '../Properties/PropertyDateTime'
+import PropertySelect from '../Properties/PropertySelect'
 
 export default {
 	name: 'ContactDetailsProperty',
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index d71a2a69..af6846e6 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -1,9 +1,12 @@
 <template>
 	<transition name="delete-slide-left">
-		<div v-if="!deleteTimeout" :id="id"
+		<div v-if="!deleteTimeout"
+			:id="id"
 			:class="{active: selectedContact === contact.key}"
-			tabindex="0" class="app-content-list-item"
-			@click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact">
+			tabindex="0"
+			class="app-content-list-item"
+			@click.prevent.stop="selectContact"
+			@keypress.enter.prevent.stop="selectContact">
 			<!-- keyboard accessibility will focus the input and not the label -->
 			<!--
 			<input ref="selected" :id="contact.key" type="checkbox"
@@ -25,12 +28,17 @@
 			</div>
 
 			<!-- undo actions -->
-			<div v-if="!contact.addressbook.readOnly && !deleteTimeout" class="icon-delete" tabindex="0"
-				@click.prevent.stop="deleteContact" @keypress.enter.prevent.stop="deleteContact" />
+			<div v-if="!contact.addressbook.readOnly && !deleteTimeout"
+				class="icon-delete"
+				tabindex="0"
+				@click.prevent.stop="deleteContact"
+				@keypress.enter.prevent.stop="deleteContact" />
 		</div>
 
 		<!-- Deleted contact (pending) -->
-		<div v-else :id="id" key="deleted"
+		<div v-else
+			:id="id"
+			key="deleted"
 			class="deleted app-content-list-item">
 			<div :style="{ backgroundColor: 'grey' }" class="app-content-list-item-icon">
 				{{ contact.displayName | firstLetter }}
@@ -41,9 +49,11 @@
 			<div class="app-content-list-item-line-one">
 				{{ contact.displayName }}
 			</div>
-			<div v-tooltip.auto="t('contacts', 'Deleting the contact in {countdown} seconds', { countdown })" class="icon-history"
+			<div v-tooltip.auto="t('contacts', 'Deleting the contact in {countdown} seconds', { countdown })"
+				class="icon-history"
 				tabindex="0"
-				@click.prevent.stop="cancelDeletion" @keypress.enter.prevent.stop="cancelDeletion" />
+				@click.prevent.stop="cancelDeletion"
+				@keypress.enter.prevent.stop="cancelDeletion" />
 		</div>
 	</transition>
 </template>
diff --git a/src/components/Properties/PropertyActions.vue b/src/components/Properties/PropertyActions.vue
index bbf908ed..19ce5f02 100644
--- a/src/components/Properties/PropertyActions.vue
+++ b/src/components/Properties/PropertyActions.vue
@@ -25,7 +25,9 @@
 		<ActionButton icon="icon-delete" @click="deleteProperty">
 			{{ t('contacts', 'Delete') }}
 		</ActionButton>
-		<actions :is="action" v-for="(action, index) in actions" :key="index"
+		<actions :is="action"
+			v-for="(action, index) in actions"
+			:key="index"
 			:component="propertyComponent" />
 	</Actions>
 </template>
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index 6c909adf..8e49bb56 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -23,15 +23,23 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:icon="propModel.icon"
+			:readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->
-			<multiselect v-if="propModel.options" v-model="localType"
-				:options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-				:disabled="isReadOnly" class="property__label" track-by="id"
-				label="name" @input="updateType" />
+			<multiselect v-if="propModel.options"
+				v-model="localType"
+				:options="options"
+				:searchable="false"
+				:placeholder="t('contacts', 'Select type')"
+				:disabled="isReadOnly"
+				class="property__label"
+				track-by="id"
+				label="name"
+				@input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
 			<div v-else-if="selectType" class="property__label">
@@ -44,10 +52,17 @@
 			</div>
 
 			<!-- Real input where the picker shows -->
-			<DatetimePicker :value="vcardTimeLocalValue.toJSDate()" :minute-step="10" :lang="lang"
-				:clearable="false" :first-day-of-week="firstDay" :type="inputType"
-				:readonly="isReadOnly" :format="dateFormat" class="property__value"
-				confirm @confirm="debounceUpdateValue" />
+			<DatetimePicker :value="vcardTimeLocalValue.toJSDate()"
+				:minute-step="10"
+				:lang="lang"
+				:clearable="false"
+				:first-day-of-week="firstDay"
+				:type="inputType"
+				:readonly="isReadOnly"
+				:format="dateFormat"
+				class="property__value"
+				confirm
+				@confirm="debounceUpdateValue" />
 
 			<!-- props actions -->
 			<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
@@ -62,7 +77,7 @@ import { DatetimePicker } from 'nextcloud-vue'
 import { getLocale } from 'nextcloud-l10n'
 import { VCardTime } from 'ical.js'
 
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
 
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index c6e6c419..41964ef5 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -30,11 +30,19 @@
 			</div>
 
 			<!-- multiselect taggable groups with a limit to 3 groups shown -->
-			<multiselect v-model="localValue" :options="groups" :placeholder="t('contacts', 'Add contact in group')"
-				:multiple="true" :taggable="true" :close-on-select="false"
-				:readonly="isReadOnly" :tag-width="60"
-				tag-placeholder="create" class="property__value"
-				@input="updateValue" @tag="validateGroup" @select="addContactToGroup"
+			<multiselect v-model="localValue"
+				:options="groups"
+				:placeholder="t('contacts', 'Add contact in group')"
+				:multiple="true"
+				:taggable="true"
+				:close-on-select="false"
+				:readonly="isReadOnly"
+				:tag-width="60"
+				tag-placeholder="create"
+				class="property__value"
+				@input="updateValue"
+				@tag="validateGroup"
+				@select="addContactToGroup"
 				@remove="removeContactToGroup">
 				<!-- show how many groups are hidden and add tooltip -->
 				<span slot="limit" v-tooltip.auto="formatGroupsTitle" class="multiselect__limit">
@@ -50,7 +58,7 @@
 
 <script>
 import debounce from 'debounce'
-import Contact from 'Models/contact'
+import Contact from '../../models/contact'
 
 export default {
 	name: 'PropertyGroups',
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 84753871..6579fb12 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -23,16 +23,25 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:icon="propModel.icon"
+			:readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->
-			<multiselect v-if="propModel.options" v-model="localType"
-				:options="options" :placeholder="t('contacts', 'Select type')"
-				:taggable="true" tag-placeholder="create" :disabled="isReadOnly"
-				class="property__label" track-by="id" label="name"
-				@tag="createLabel" @input="updateType" />
+			<multiselect v-if="propModel.options"
+				v-model="localType"
+				:options="options"
+				:placeholder="t('contacts', 'Select type')"
+				:taggable="true"
+				tag-placeholder="create"
+				:disabled="isReadOnly"
+				class="property__label"
+				track-by="id"
+				label="name"
+				@tag="createLabel"
+				@input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
 			<div v-else-if="selectType" class="property__label">
@@ -46,12 +55,17 @@
 			</div>
 
 			<!-- show the first input if not a structured value -->
-			<input v-if="!property.isStructuredValue" v-model.trim="localValue[0]" :readonly="isReadOnly"
-				class="property__value" type="text" @input="updateValue">
+			<input v-if="!property.isStructuredValue"
+				v-model.trim="localValue[0]"
+				:readonly="isReadOnly"
+				class="property__value"
+				type="text"
+				@input="updateValue">
 
 			<!-- props actions -->
 			<PropertyActions class="property__actions--floating"
-				:actions="actions" :property-component="this"
+				:actions="actions"
+				:property-component="this"
 				@delete="deleteProperty" />
 		</div>
 
@@ -61,25 +75,32 @@
 				<div class="property__label">
 					{{ propModel.readableValues[index] }}
 				</div>
-				<input v-model.trim="localValue[index]" :readonly="isReadOnly" class="property__value"
-					type="text" @input="updateValue">
+				<input v-model.trim="localValue[index]"
+					:readonly="isReadOnly"
+					class="property__value"
+					type="text"
+					@input="updateValue">
 			</div>
 		</template>
 
 		<!-- no order enforced: just iterate on all the values -->
 		<template v-else>
-			<div v-for="(value, index) in filteredValue" :key="index"
+			<div v-for="(value, index) in filteredValue"
+				:key="index"
 				class="property__row">
 				<div class="property__label" />
-				<input v-model.trim="filteredValue[index]" :readonly="isReadOnly" class="property__value"
-					type="text" @input="updateValue">
+				<input v-model.trim="filteredValue[index]"
+					:readonly="isReadOnly"
+					class="property__value"
+					type="text"
+					@input="updateValue">
 			</div>
 		</template>
 	</div>
 </template>
 
 <script>
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
 
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 4b5893d3..0f54d507 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -23,7 +23,9 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:icon="propModel.icon"
+			:readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">
@@ -37,9 +39,14 @@
 				{{ propModel.readableName }}
 			</div>
 
-			<multiselect v-model="matchedOptions" :options="propModel.options" :placeholder="t('contacts', 'Select option')"
-				:disabled="isSingleOption || isReadOnly" class="property__value" track-by="id"
-				label="name" @input="updateValue" />
+			<multiselect v-model="matchedOptions"
+				:options="propModel.options"
+				:placeholder="t('contacts', 'Select option')"
+				:disabled="isSingleOption || isReadOnly"
+				class="property__value"
+				track-by="id"
+				label="name"
+				@input="updateValue" />
 
 			<!-- props actions -->
 			<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
@@ -48,7 +55,7 @@
 </template>
 
 <script>
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
 import PropertyActions from './PropertyActions'
 
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 05ec9861..3089da96 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -23,16 +23,25 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:icon="propModel.icon"
+			:readable-name="pro