BC-5508: update v-select, v-autocomplete, update docs

VUE3-UPGRADE-RESULTS/VUETIFY-UPGRADE.md

@@ -197,8 +197,10 @@ https://github.com/vuetifyjs/vuetify/issues/13508
 - `v-confirmation-dialog` already works
 - _TODO:_ refactor all Dialogs that use the `v-custom-dialog` component
 
-## Vuetify Colors
+## Vuetify Classes
 - `class="red--text"` changed to `class="text-red"`
+- `rounded-tr-0` with `rounded-te-0` replaced
+- `rounded-tl-0` with `rounded-ts-0` replaced
 
 ## Vuetify 3 Bugs
 

src/components/feature-board/shared/BoardAnyTitleInput.vue

@@ -4,13 +4,13 @@
 			hide-details="auto"
 			v-model="modelValue"
 			variant="solo"
-			dense
+			density="compact"
 			:rows="1"
 			auto-grow
 			flat
 			class="mx-n3 mb-n2"
 			:placeholder="placeholder"
-			background-color="transparent"
+			bg-color="transparent"
 			ref="titleInput"
 			:readonly="!isEditMode"
 			role="heading"

src/components/molecules/AddContentModal.vue

@@ -18,6 +18,8 @@
 						:items="coursesOptions"
 						:label="$t('pages.content.label.chooseACourse')"
 						data-testid="topicSelector"
+						variant="underlined"
+						color="primary"
 					/>
 					<transition name="fade">
 						<v-select
@@ -30,6 +32,8 @@
 							:label="$t('pages.content.label.chooseALessonTopic')"
 							:no-data-text="$t('pages.content.placeholder.noLessonTopic')"
 							data-testid="courseSelector"
+							variant="underlined"
+							color="primary"
 						/>
 					</transition>
 				</div>

src/components/molecules/vImportUsersMatchSearch.vue

@@ -119,13 +119,14 @@
 							"
 							no-filter
 							variant="solo"
+							color="primary"
 							rounded
-							small-chips
+							chips
 						>
 							<template #selection="{ attr, on, item, selected }">
 								<v-chip
 									v-bind="attr"
-									:input-value="selected"
+									:model-value="selected"
 									color="blue-grey"
 									class="text-white"
 									v-on="on"

src/components/organisms/Pagination.vue

@@ -9,6 +9,8 @@
 			item-value="value"
 			return-object
 			active
+			variant="underlined"
+			color="primary"
 			@update:model-value="setPagination"
 		/>
 		<div v-if="perPage > 0" class="d-flex align-items-center">

src/components/organisms/administration/GeneralSettings.vue

@@ -69,6 +69,7 @@
 					"
 					persistent-hint
 					variant="underlined"
+					color="primary"
 				/>
 			</v-col>
 		</v-row>

src/components/share/SelectCourseModal.vue

@@ -16,9 +16,7 @@
 
 		<template #content>
 			<div>
-				<div
-					class="d-flex flex-row pa-2 mb-4 rounded blue lighten-5 background"
-				>
+				<div class="d-flex flex-row pa-2 mb-4 rounded bg-blue-lighten-5">
 					<div class="mx-2">
 						<v-icon color="info">{{ mdiInformation }}</v-icon>
 					</div>
@@ -45,6 +43,8 @@
 					persistent-hint
 					:append-icon="mdiTriangleSmallDown"
 					:menu-props="{ bottom: true, offsetY: true, nudgeBottom: 28 }"
+					variant="underlined"
+					color="primary"
 				/>
 			</div>
 		</template>

src/components/templates/TasksDashboardMain.vue

@@ -54,7 +54,6 @@
 			<v-autocomplete
 				v-if="showCourseFilter"
 				v-model="selectedCourseFilters"
-				small-chips
 				closable-chips
 				multiple
 				clearable