Start migration, some properties are still to figure out

Signed-off-by: ScratchX98 <[email protected]>

src/components/AppNavigation/Settings.vue

@@ -62,23 +62,21 @@
 			</ActionCheckbox>
 			<li class="settings-fieldset-interior-item settings-fieldset-interior-item--slotDuration">
 				<label for="slotDuration">{{ $t('calendar', 'Time increments') }}</label>
-				<Multiselect :id="slotDuration"
-					:allow-empty="false"
+				<Select :id="slotDuration"
 					:options="slotDurationOptions"
 					:value="selectedDurationOption"
 					:disabled="savingSlotDuration"
-					track-by="value"
+					input-id="value"
 					label="label"
 					@select="changeSlotDuration" />
 			</li>
 			<li class="settings-fieldset-interior-item settings-fieldset-interior-item--defaultReminder">
 				<label for="defaultReminder">{{ $t('calendar', 'Default reminder') }}</label>
-				<Multiselect :id="defaultReminder"
-					:allow-empty="false"
+				<Select :id="defaultReminder"
 					:options="defaultReminderOptions"
 					:value="selectedDefaultReminderOption"
 					:disabled="savingDefaultReminder"
-					track-by="value"
+					input-id="value"
 					label="label"
 					@select="changeDefaultReminder" />
 			</li>
@@ -122,7 +120,7 @@ import {
 	NcActionCheckbox as ActionCheckbox,
 	NcActionLink as ActionLink,
 	NcAppNavigationSettings as AppNavigationSettings,
-	NcMultiselect as Multiselect,
+	NcSelect as Select,
 } from '@nextcloud/vue'
 import {
 	generateRemoteUrl,
@@ -164,7 +162,7 @@ export default {
 		ActionCheckbox,
 		ActionLink,
 		AppNavigationSettings,
-		Multiselect,
+		Select,
 		SettingsImportSection,
 		SettingsTimezoneSelect,
 		SettingsAttachmentsFolder,

src/components/Editor/Alarm/AlarmTimeUnitSelect.vue

@@ -21,22 +21,22 @@
   -->
 
 <template>
-	<Multiselect :allow-empty="false"
+	<Select :allow-empty="false"
 		:options="options"
 		:value="selected"
 		:disabled="disabled"
-		track-by="unit"
+		input-id="unit"
 		label="label"
 		@select="select" />
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 export default {
 	name: 'AlarmTimeUnitSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		unit: {

src/components/Editor/Invitees/InviteesListSearch.vue

@@ -24,7 +24,7 @@
   -->
 
 <template>
-	<Multiselect class="invitees-search__multiselect"
+	<Select class="invitees-search__multiselect"
 		:options="matches"
 		:searchable="true"
 		:internal-search="false"
@@ -34,7 +34,7 @@
 		:placeholder="placeholder"
 		:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
 		open-direction="bottom"
-		track-by="uid"
+		input-id="uid"
 		label="dropdownName"
 		@search-change="findAttendees"
 		@select="addAttendee">
@@ -68,13 +68,13 @@
 				</div>
 			</div>
 		</template>
-	</Multiselect>
+	</Select>
 </template>
 
 <script>
 import {
 	NcAvatar as Avatar,
-	NcMultiselect as Multiselect,
+	NcSelect as Select,
 } from '@nextcloud/vue'
 import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
 import isCirclesEnabled from '../../../services/isCirclesEnabled.js'
@@ -93,7 +93,7 @@ export default {
 	name: 'InviteesListSearch',
 	components: {
 		Avatar,
-		Multiselect,
+		Select,
 		GoogleCirclesCommunitiesIcon,
 	},
 	props: {

src/components/Editor/Properties/PropertySelect.vue

@@ -31,14 +31,14 @@
 
 		<div class="property-select__input"
 			:class="{ 'property-select__input--readonly': isReadOnly }">
-			<Multiselect v-if="!isReadOnly"
+			<Select v-if="!isReadOnly"
 				:options="options"
 				:searchable="false"
 				:allow-empty="false"
 				:title="readableName"
 				:value="selectedValue"
 				:placeholder="placeholder"
-				track-by="value"
+				input-id="value"
 				label="label"
 				@select="changeValue" />
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
@@ -56,14 +56,14 @@
 
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 import InformationVariant from 'vue-material-design-icons/InformationVariant.vue'
 
 export default {
 	name: 'PropertySelect',
 	components: {
-		Multiselect,
+		Select,
 		InformationVariant,
 	},
 	mixins: [

src/components/Editor/Properties/PropertySelectMultiple.vue

@@ -31,7 +31,7 @@
 
 		<div class="property-select-multiple__input"
 			:class="{ 'property-select-multiple__input--readonly': isReadOnly }">
-			<Multiselect v-if="!isReadOnly"
+			<Select v-if="!isReadOnly"
 				v-model="selectionData"
 				:options="options"
 				:searchable="true"
@@ -41,7 +41,7 @@
 				:title="readableName"
 				:multiple="true"
 				:taggable="true"
-				track-by="label"
+				input-id="label"
 				label="label"
 				@select="selectValue"
 				@tag="tag"
@@ -52,7 +52,7 @@
 				<template v-if="coloredOptions" #option="scope">
 					<PropertySelectMultipleColoredOption v-bind="scope" />
 				</template>
-			</Multiselect>
+			</Select>
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
 			<div v-else class="property-select-multiple-colored-tag-wrapper">
 				<PropertySelectMultipleColoredTag v-for="singleValue in value"
@@ -72,7 +72,7 @@
 
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 import PropertySelectMultipleColoredTag from './PropertySelectMultipleColoredTag.vue'
 import PropertySelectMultipleColoredOption from './PropertySelectMultipleColoredOption.vue'
 import { getLocale } from '@nextcloud/l10n'
@@ -84,7 +84,7 @@ export default {
 	components: {
 		PropertySelectMultipleColoredOption,
 		PropertySelectMultipleColoredTag,
-		Multiselect,
+		Select,
 		InformationVariant,
 	},
 	mixins: [

src/components/Editor/Repeat/RepeatEndRepeat.vue

@@ -23,13 +23,13 @@
 <template>
 	<div class="repeat-option-set repeat-option-set--end">
 		<span class="repeat-option-end__label">{{ $t('calendar', 'End repeat') }}</span>
-		<Multiselect class="repeat-option-end__end-type-select"
+		<Select class="repeat-option-end__end-type-select"
 			:options="options"
 			:searchable="false"
 			:allow-empty="false"
 			:title="$t('calendar', 'Select to end repeat')"
 			:value="selectedOption"
-			track-by="value"
+			input-id="value"
 			label="label"
 			@select="changeEndType" />
 		<DatePicker v-if="isUntil"
@@ -54,13 +54,13 @@
 
 <script>
 import DatePicker from '../../Shared/DatePicker.vue'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatEndRepeat',
 	components: {
 		DatePicker,
-		Multiselect,
+		Select,
 	},
 	props: {
 		/**

src/components/Editor/Repeat/RepeatFirstLastSelect.vue

@@ -21,23 +21,23 @@
   -->
 
 <template>
-	<Multiselect :allow-empty="false"
+	<Select :allow-empty="false"
 		:options="options"
 		:value="selected"
 		:disabled="disabled"
 		:placeholder="$t('calendar', 'first')"
-		track-by="value"
+		input-id="value"
 		label="label"
 		@select="select" />
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatFirstLastSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		/**

src/components/Editor/Repeat/RepeatFreqSelect.vue

@@ -21,22 +21,22 @@
   -->
 
 <template>
-	<Multiselect :allow-empty="false"
+	<Select :allow-empty="false"
 		:options="options"
 		:value="selected"
 		open-direction="bottom"
-		track-by="freq"
+		input-id="freq"
 		label="label"
 		@select="select" />
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatFreqSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		freq: {

src/components/Editor/Repeat/RepeatOnTheSelect.vue

@@ -21,24 +21,24 @@
   -->
 
 <template>
-	<Multiselect :allow-empty="false"
+	<Select :allow-empty="false"
 		:options="options"
 		:value="selected"
 		:disabled="disabled"
 		:placeholder="$t('calendar', 'Monday')"
-		track-by="value"
+		input-id="value"
 		label="label"
 		@select="select" />
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 import { getDayNames } from '@nextcloud/l10n'
 
 export default {
 	name: 'RepeatOnTheSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		/**

src/components/Editor/Resources/ResourceListSearch.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<div class="resource-search">
-		<Multiselect class="resource-search__multiselect"
+		<Select class="resource-search__multiselect"
 			:options="matches"
 			:searchable="true"
 			:internal-search="false"
@@ -32,7 +32,7 @@
 			:placeholder="placeholder"
 			:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
 			open-direction="bottom"
-			track-by="email"
+			input-id="email"
 			label="displayName"
 			@search-change="findResources"
 			@select="addResource">
@@ -54,7 +54,7 @@
 					</div>
 				</div>
 			</template>
-		</Multiselect>
+		</Select>
 
 		<template>
 			<div class="resource-search__capacity">
@@ -85,7 +85,7 @@ import {
 	NcAvatar as Avatar,
 	NcActions as Actions,
 	NcActionCheckbox as ActionCheckbox,
-	NcMultiselect as Multiselect,
+	NcSelect as Select,
 } from '@nextcloud/vue'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
 import debounce from 'debounce'
@@ -98,7 +98,7 @@ export default {
 	name: 'ResourceListSearch',
 	components: {
 		Avatar,
-		Multiselect,
+		Select,
 		ResourceSeatingCapacity,
 		Actions,
 		ActionCheckbox,

src/components/Editor/Resources/ResourceRoomType.vue

@@ -23,28 +23,28 @@
 <template>
 	<div class="resource-room-type">
 		<div class="resource-room-type__input">
-			<Multiselect :value="getOption(value)"
+			<Select :value="getOption(value)"
 				:options="options"
 				:placeholder="placeholder"
-				track-by="value"
+				input-id="value"
 				label="label"
 				@update:value="changeValue">
 				<template #option="{ option }">
 					<div>{{ option.label }}</div>
 				</template>
-			</Multiselect>
+			</Select>
 		</div>
 	</div>
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 import { getAllRoomTypes } from '../../../models/resourceProps.js'
 
 export default {
 	name: 'ResourceRoomType',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		value: {