Merge branch 'BC-3844-vue3-webpack' of github.com:hpi-schul-cloud/nux…

…t-client into BC-3844-vue3-webpack

VUE3-UPGRADE-RESULTS/VUETIFY-UPGRADE.md

@@ -59,6 +59,13 @@ https://vuetifyjs.com/en/components/menus/
 | colored-border                      | renamed to **border-color**                                                                               | 1                                   |
 | dismissable                         | combined into **variant** prop <br> -> values 'elevated', 'flat', 'tonal', 'outlined', 'plain' and 'text' | outlined: ~2 <br>text: ~10          |
 
+> **⚠️ Upgrade Notes:**
+>- v-alert types(`warning`, `error`) icons are different in vuetify 3 -> talk to UX
+>- to achieve the same alert look we had before: add `variant="tonal"` (when `text` was used)
+>- `transition` prop has been removed, have to wrap the component into transition component
+>- transitions need condition: v-if or v-show, see: https://vuejs.org/guide/built-ins/transition.html
+
+
 ## v-btn
 
 |                                | Changes                                                                                                                                    | Files probably affected in our code |
@@ -68,6 +75,11 @@ https://vuetifyjs.com/en/components/menus/
 | depressed                      | renamed to **variant="flat"**                                                                                                              | ~30                                 |
 | disabled                       | uses **faded** variant of specified color instead of grey, $button-colored-disabled sass variable can be set to false to use grey instead. |                                     |
 
+> **⚠️ Upgrade Notes:**
+>- Disabled buttons use a faded variant of the specified color instead of grey (#15147)
+The `$button-colored-disabled` sass variable can be set to false to use grey instead.
+-> Talk to UX what we want to use
+
 ## inputs
 
 |                                    | Changes                                                                                       | Files probably affected in our code     |
@@ -77,7 +89,13 @@ https://vuetifyjs.com/en/components/menus/
 | append-outer (slots)               | append                                                                                        | 0                                       |
 | Variant props filled/outlined/solo | combined into variant prop <br> -> values 'underlined', 'outlined', 'filled', 'solo', 'plain' | filled: 3 <br> outlined: 0 <br> solo: 5 |
 | success, success-messages          | **removed**                                                                                   |                                         |
-| validate-on-blur                   | renamed to validate-on="blur"                                                                 | 4                                       |
+| validate-on-blur                   | renamed to validate-on="blur"                                                                 | 4                                        |
+
+### v-text-field/ v-select/ v-autocomplete
+> **⚠️ Upgrade Notes:**
+> - vuetify 2: `underlined` was default and primary color was added
+> - vuetify 3: `filled` is default and no color, so we need to add `variant="underlined"` (if we want to use the old default/ no other variant is used) + `color="primary"`
+
 
 ## v-checkbox/v-radio/v-switch
 
@@ -87,6 +105,13 @@ https://vuetifyjs.com/en/components/menus/
 | v-checkbox label slot | v-checkbox label slot should not longer contain a <label> |                                     |
 | :label                | label                                                     | ~40                                 |
 
+> **⚠️ Upgrade Notes v-switch:**
+>- vertical height not adjusted when inset with `density` is used
+>- GitHub Issue: https://github.com/vuetifyjs/vuetify/issues/18334
+>- disabled is now grey instead of primary color in vuetify 3
+>- also added true-icon prop for a11y (was discussed in a11y meeting, Google Material 3, maybe check also with UX again)
+
+
 ## v-tabs
 
 |            | Changes                    | Files probably affected in our code |
@@ -105,7 +130,11 @@ https://vuetifyjs.com/en/components/menus/
 | -------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
 | v-model              | v-model values not present in items will now be rendered instead of being ignored                              |                                     |
 | item-text            | renamed to **item-title**, <br> now looks up the title property on item objects by default. value is unchanged |                                     |
-| item object in slots | now an ListItem object, the original item object is available as item.raw                                      |                                     |
+| item object in slots | now an ListItem object, the original item object is available as item.raw
+
+> **⚠️ Upgrade Notes:**
+> - vuetify 2: "underlined" was default and primary color was added
+> - vuetify 3: "filled" is default and no color, so we need to add variant="underlined" + color="primary                                  |                                     |
 
 ## v-expansion-panel
 
@@ -115,18 +144,32 @@ https://vuetifyjs.com/en/components/menus/
 | v-expansion-panel-content | renamed to **v-expansion-panel-text**                                  | 2                                   |
 | v-expansion-panel         | now has text and title props that can be used instead of subcomponents |                                     |
 
+> **⚠️ Upgrade Notes:**
+> - vuetify 2: `flat`: Removes the expansion-panel’s elevation and borders
+> - vuetify 3: `flat` was removed, to achieve the same we need to add `elevation=0` to `v-expansion-panel`
+
 ## v-card
 
 |        | Changes                                                                                              | Files probably affected in our code |
 | ------ | ---------------------------------------------------------------------------------------------------- | ----------------------------------- |
 | v-card | not allow content to overflow or use higher z-index values to display on top of elements outside it. |                                     |
 | v-card | To disable this behavior, use <v-card style="overflow: initial; z-index: initial">                   |                                     |
 
+> **⚠️ Upgrade Notes:**
+>- `hover` breaks variant elevated, GitHub Issue: https://github.com/vuetifyjs/vuetify/issues/17574
+>- `outlined` card appearance changed in vuetify 3
+
 ## v-dialog
 
 - requires `v-model` or `activator`
 - `vCustomDialog` has to be refactored
 
+## v-breadcrumb
+- in vuetify 2 there was a link color (our primary color), that changed in vuetify 3
+- to achieve the same behaviour we added CSS for `vCustomBreadcrumbs.vue`:
+  - `.v-breadcrumbs-item`: primary color 
+  - `.v-breadcrumbs-item--disabled`: secondary color
+
 ## v-skeleton-loader
 
 ## v-stepper
@@ -154,14 +197,34 @@ 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
+- `class="red--text"` changed to `class="text-red"`
+
 ## Vuetify 3 Bugs
 
-# v-switch
+### v-switch
 
 - vertical height not adjusted when inset with density is used
 - GitHub Issue: https://github.com/vuetifyjs/vuetify/issues/18334
 
-# v-card
+### v-card
 
 - hover breaks variant elevated
-- GitHub Issue: https://github.com/vuetifyjs/vuetify/issues/17574
+- GitHub Issue: https://github.com/vuetifyjs/vuetify/issues/17574
+
+
+## To Keep In Mind
+
+### Vuetify Global Config
+- maybe interesting : https://vuetifyjs.com/en/features/global-configuration/#setup
+- Example: 
+we could set defaults for v-switches (e.g. inset, flat, density) so we can define how they should look
+-> no need  to write flat, inset to all v-switch  components
+
+```js
+export default createVuetify({
+  default: {
+    VSwitch: {flat: true, inset: true},
+  }
+})
+```

src/components/atoms/vCustomBreadcrumbs.vue

@@ -36,11 +36,11 @@ defineProps({
 	display: inline-flex;
 }
 
-:deep(.v-breadcrumbs .v-breadcrumbs-item) {
+:deep(.v-breadcrumbs-item) {
 	color: rgba(var(--v-theme-primary));
 }
 
-:deep(.v-breadcrumbs .v-breadcrumbs-item--disabled) {
+:deep(.v-breadcrumbs-item--disabled) {
 	color: rgba(var(--v-theme-secondary));
 }
 </style>

src/components/external-tools/configuration/ExternalToolConfigParameter.vue

@@ -14,6 +14,8 @@
 				:rules="validateParameter(parameter, inputValue)"
 				validate-on="blur"
 				:data-testId="parameter.name"
+				variant="underlined"
+				color="primary"
 			/>
 		</template>
 		<template v-if="parameter.type === ToolParameterType.Boolean">
@@ -27,6 +29,8 @@
 				:items="booleanSelectItems"
 				item-value="value"
 				item-title="text"
+				variant="underlined"
+				color="primary"
 			/>
 		</template>
 		<template v-if="parameter.type === ToolParameterType.Number">
@@ -39,6 +43,8 @@
 				:rules="validateParameter(parameter, inputValue)"
 				validate-on="blur"
 				:data-testId="parameter.name"
+				variant="underlined"
+				color="primary"
 			/>
 		</template>
 	</div>

src/components/feature-board-external-tool-element/ExternalToolElementConfigurationDialog.vue

@@ -30,6 +30,8 @@
 						persistent-hint
 						validate-on="blur"
 						data-testId="parameter-display-name"
+						variant="underlined"
+						color="primary"
 					/>
 				</template>
 			</external-tool-configurator>

src/components/feature-board-link-element/LinkContentElementEdit.vue

@@ -9,6 +9,8 @@
 				:autofocus="true"
 				required
 				validate-on="lazy"
+				variant="underlined"
+				color="primary"
 			>
 				<template v-slot:append>
 					<button type="submit">

src/components/feature-date-time-picker/DatePicker.vue

@@ -21,6 +21,8 @@
 					:messages="messages"
 					:rules="rules"
 					data-testid="date-input"
+					variant="underlined"
+					color="primary"
 					@keydown.space="showDateDialog = true"
 					@keydown.prevent.enter="showDateDialog = true"
 					@keydown.prevent.down="focusDatePicker"

src/components/feature-date-time-picker/TimePicker.vue

@@ -20,6 +20,8 @@
 					:rules="rules"
 					data-testid="time-input"
 					:class="{ 'menu-open': showTimeDialog }"
+					variant="underlined"
+					color="primary"
 					@keypress="isNumberOrColon"
 					@keydown.prevent.space="showTimeDialog = true"
 					@keydown.prevent.enter="showTimeDialog = true"

src/components/molecules/ImportModal.vue

@@ -58,6 +58,7 @@
 					<v-text-field
 						v-model="sharedCourseData.code"
 						variant="outlined"
+						color="primary"
 						density="compact"
 						class="mt-1 text-field-course-code"
 						:error="businessError.message !== ''"
@@ -74,6 +75,7 @@
 					<v-text-field
 						v-model="sharedCourseData.courseName"
 						variant="outlined"
+						color="primary"
 						density="compact"
 						class="mt-1 text-field-course-name"
 						:disabled="isImportError"

src/components/molecules/RoomModal.vue

@@ -11,6 +11,8 @@
 					v-model="data.title"
 					density="compact"
 					flat
+					variant="underlined"
+					color="primary"
 					:aria-label="$t('pages.rooms.roomModal.courseGroupTitle')"
 					:placeholder="$t('pages.rooms.roomModal.courseGroupTitle')"
 					:label="$t('pages.rooms.roomModal.courseGroupTitle')"

src/components/organisms/FormCreateUser.vue

@@ -7,6 +7,8 @@
 			required
 			:error-messages="getErrorMessages(v$.firstName)"
 			data-testid="input_create-user_firstname"
+			variant="underlined"
+			color="primary"
 			@blur="v$.firstName.$touch"
 		/>
 		<v-text-field
@@ -16,6 +18,8 @@
 			required
 			:error-messages="getErrorMessages(v$.lastName)"
 			data-testid="input_create-user_lastname"
+			variant="underlined"
+			color="primary"
 			@blur="v$.lastName.$touch"
 		/>
 		<v-text-field
@@ -25,6 +29,8 @@
 			required
 			:error-messages="getErrorMessages(v$.email)"
 			data-testid="input_create-user_email"
+			variant="underlined"
+			color="primary"
 			@blur="v$.email.$touch"
 		/>
 		<slot name="inputs" />

src/components/organisms/administration/GeneralSettings.vue

@@ -101,6 +101,7 @@
 					"
 					density="compact"
 					variant="underlined"
+					color="primary"
 					disabled
 					:hint="
 						$t('pages.administration.school.index.generalSettings.timezoneHint')

src/components/organisms/administration/ImportUsers.vue

@@ -52,6 +52,8 @@
 								:label="$t('components.organisms.importUsers.searchFirstName')"
 								clearable
 								class="searchFirstName"
+								variant="underlined"
+								color="primary"
 							/>
 						</td>
 						<td class="col-2">
@@ -61,6 +63,8 @@
 								:label="$t('components.organisms.importUsers.searchLastName')"
 								clearable
 								class="searchLastName"
+								variant="underlined"
+								color="primary"
 							/>
 						</td>
 						<td>
@@ -70,6 +74,8 @@
 								:label="$t('components.organisms.importUsers.searchUserName')"
 								clearable
 								class="searchLoginName"
+								variant="underlined"
+								color="primary"
 							/>
 						</td>
 						<td>
@@ -81,6 +87,8 @@
 								:label="$t('components.organisms.importUsers.searchRole')"
 								clearable
 								class="searchRole"
+								variant="underlined"
+								color="primary"
 							/>
 						</td>
 						<td>
@@ -90,6 +98,8 @@
 								:label="$t('components.organisms.importUsers.searchClass')"
 								clearable
 								class="searchClasses"
+								variant="underlined"
+								color="primary"
 							/>
 						</td>
 						<td class="col-2">

src/components/share/ImportModal.vue

@@ -32,6 +32,8 @@
 					v-model="newName"
 					:label="$t(`components.molecules.import.${parentType}.label`)"
 					:rules="[rules.required]"
+					variant="underlined"
+					color="primary"
 				/>
 			</div>
 		</template>

src/components/share/ShareModalResult.vue

@@ -5,6 +5,7 @@
 			:model-value="shareUrl"
 			readonly
 			:label="`${$t(`components.molecules.share.${type}.result.linkLabel`)}`"
+			color="primary"
 		/>
 		<div class="mb-4">
 			<div

src/pages/administration/StudentCreate.page.vue

@@ -14,6 +14,8 @@
 					data-testid="input_create-student_birthdate"
 					:class="{ hideCurrentDate: !date }"
 					type="date"
+					variant="underlined"
+					color="primary"
 				/>
 				<v-checkbox
 					v-model="sendRegistration"

src/pages/context-external-tool/ContextExternalToolConfigurator.page.vue

@@ -23,8 +23,10 @@
 					:label="t('pages.tool.context.displayName')"
 					:hint="t('pages.tool.context.displayNameDescription')"
 					persistent-hint
-					validate-on-blur
+					validate-on="blur"
 					data-testId="parameter-display-name"
+					variant="underlined"
+					color="primary"
 				/>
 			</template>
 		</external-tool-configurator>

src/pages/rooms/RoomDetails.page.vue

@@ -95,9 +95,10 @@
 				</div>
 				<div>
 					<v-text-field
-						:value="dialog.inputText"
-						outlined
-						dense
+						:model-value="dialog.inputText"
+						variant="outlined"
+						color="primary"
+						density="compact"
 						data-testid="modal-input"
 					/>
 				</div>

src/pages/rooms/RoomList.page.vue

@@ -24,6 +24,7 @@
 					class="px-1"
 					v-model="searchText"
 					variant="solo"
+					color="primary"
 					rounded
 					single-line
 					:label="$t('pages.rooms.index.search.label')"

src/pages/rooms/RoomOverview.page.vue

@@ -43,6 +43,7 @@
 						v-model="searchText"
 						class="room-search px-1"
 						variant="solo"
+						color="primary"
 						rounded
 						single-line
 						:label="$t('pages.rooms.index.search.label')"