Merge branch 'main' into N21-1890-remove-iserv-obsolete-code

package.json

@@ -23,17 +23,17 @@
 		"@lumieducation/h5p-webcomponents": "^9.2.2",
 		"@vuelidate/core": "^2.0.3",
 		"@vuelidate/validators": "^2.0.4",
-		"@vueuse/components": "^10.11.0",
-		"@vueuse/core": "^10.11.0",
-		"@vueuse/integrations": "^12.0.0",
+		"@vueuse/components": "^12.7.0",
+		"@vueuse/core": "^12.7.0",
+		"@vueuse/integrations": "^12.7.0",
 		"axios": "^1.7.4",
 		"canvas": "^3.1.0",
 		"dayjs": "^1.11.10",
 		"kjua": "^0.10.0",
 		"maska": "^2.1.10",
 		"mobile-drag-drop": "^3.0.0-rc.0",
 		"object-hash": "^3.0.0",
-		"pinia": "^2.1.7",
+		"pinia": "^3.0.0",
 		"socket.io-client": "^4.7.5",
 		"sortablejs": "^1.15.2",
 		"sortablejs-vue3": "^1.2.11",
@@ -47,7 +47,7 @@
 		"vuex": "^4.0.2"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.24.3",
+		"@babel/core": "^7.26.9",
 		"@babel/preset-env": "^7.24.3",
 		"@eslint/js": "^9.13.0",
 		"@golevelup/ts-jest": "^0.4.0",
@@ -93,7 +93,7 @@
 		"vue-loader": "^17.4.2",
 		"vue-style-loader": "^4.1.3",
 		"vuex-module-decorators": "^1.2.0",
-		"webpack": "^5.91.0",
+		"webpack": "^5.98.0",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.0",
 		"webpack-merge": "^5.10.0",

src/components/organisms/administration/SchoolPolicyFormDialog.vue

@@ -2,7 +2,7 @@
 	<v-custom-dialog
 		:is-open="isOpen"
 		:size="425"
-		@dialog-closed="cancel"
+		@dialog-canceled="cancel"
 		has-buttons
 		confirm-btn-title-key="pages.administration.school.index.schoolPolicy.replace"
 		:confirm-btn-icon="mdiFileReplaceOutline"
@@ -29,7 +29,6 @@
 					ref="input-file"
 					class="input-file mb-2"
 					data-testid="input-file"
-					v-model="files"
 					density="compact"
 					accept="application/pdf"
 					truncate-length="30"
@@ -44,6 +43,7 @@
 					:persistent-hint="true"
 					:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
 					@blur="onBlur"
+					@update:modelValue="onFileChange"
 				>
 					<template v-slot:append-inner>
 						<v-icon
@@ -61,19 +61,19 @@
 
 <script lang="ts">
 import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
-import { computed, ComputedRef, defineComponent, ref, Ref } from "vue";
+import { currentDate } from "@/plugins/datetime";
+import { CreateConsentVersionPayload } from "@/store/types/consent-version";
+import { School } from "@/store/types/schools";
+import { toBase64 } from "@/utils/fileHelper";
 import {
 	injectStrict,
 	NOTIFIER_MODULE_KEY,
 	PRIVACY_POLICY_MODULE_KEY,
 	SCHOOLS_MODULE_KEY,
 } from "@/utils/inject";
-import { useI18n } from "vue-i18n";
 import { mdiAlert, mdiFileReplaceOutline } from "@icons/material";
-import { School } from "@/store/types/schools";
-import { currentDate } from "@/plugins/datetime";
-import { toBase64 } from "@/utils/fileHelper";
-import { CreateConsentVersionPayload } from "@/store/types/consent-version";
+import { computed, ComputedRef, defineComponent, ref, Ref } from "vue";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
 	name: "SchoolPolicyFormDialog",
@@ -115,6 +115,14 @@ export default defineComponent({
 				),
 		};
 
+		const onFileChange = (_files: File[] | File) => {
+			if (Array.isArray(_files)) {
+				files.value = _files;
+			} else {
+				files.value = [_files];
+			}
+		};
+
 		const onBlur = () => {
 			isTouched.value = true;
 		};
@@ -156,11 +164,11 @@ export default defineComponent({
 
 		return {
 			t,
-			files,
 			rules,
 			cancel,
 			submit,
 			onBlur,
+			onFileChange,
 			isValid,
 			isTouched,
 			policyForm,

src/components/organisms/administration/SchoolTermsFormDialog.vue

@@ -2,7 +2,7 @@
 	<v-custom-dialog
 		:is-open="isOpen"
 		:size="425"
-		@dialog-closed="cancel"
+		@dialog-canceled="cancel"
 		has-buttons
 		confirm-btn-title-key="pages.administration.school.index.termsOfUse.replace"
 		:confirm-btn-icon="mdiFileReplaceOutline"
@@ -29,7 +29,6 @@
 					ref="input-file"
 					class="input-file mb-2"
 					data-testid="input-file"
-					v-model="files"
 					:multiple="false"
 					density="compact"
 					accept="application/pdf"
@@ -43,6 +42,7 @@
 					:persistent-hint="true"
 					:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
 					@blur="onBlur"
+					@update:modelValue="onFileChange"
 				>
 					<template v-slot:append-inner>
 						<v-icon
@@ -116,6 +116,14 @@ export default defineComponent({
 			isFormTouched.value = true;
 		};
 
+		const onFileChange = (_files: File[] | File) => {
+			if (Array.isArray(_files)) {
+				files.value = _files;
+			} else {
+				files.value = [_files];
+			}
+		};
+
 		const resetForm = () => {
 			termsForm.value = [];
 			isFormValid.value = false;
@@ -153,11 +161,11 @@ export default defineComponent({
 
 		return {
 			t,
-			files,
 			rules: validationRules,
 			cancel,
 			submit,
 			onBlur,
+			onFileChange,
 			isValid: isFormValid,
 			isTouched: isFormTouched,
 			termsForm,

src/components/templates/DefaultWireframe.vue

@@ -22,7 +22,7 @@
 				<slot name="fab">
 					<speed-dial-menu
 						class="wireframe-fab"
-						:direction="isBelowLarge ? 'top' : 'bottom'"
+						:direction="mdAndDown ? 'top' : 'bottom'"
 						:orientation="'right'"
 						:icon="fabItems.icon"
 						:href="fabItems.href"
@@ -71,9 +71,9 @@
 <script setup lang="ts">
 import { Breadcrumbs } from "@ui-breadcrumbs";
 import { SpeedDialMenu, SpeedDialMenuAction } from "@ui-speed-dial-menu";
-import { useVuetifyBreakpoints } from "@util-device-detection";
 import { computed, PropType, useSlots } from "vue";
 import { Fab, Breadcrumb } from "./default-wireframe.types";
+import { useDisplay } from "vuetify";
 
 const props = defineProps({
 	breadcrumbs: {
@@ -127,7 +127,7 @@ defineOptions({
 });
 const slots = useSlots();
 
-const isBelowLarge = useVuetifyBreakpoints().smallerOrEqual("lg");
+const { mdAndDown } = useDisplay();
 
 const showDivider = computed(() => {
 	return !props.hideBorder && !!(props.headline || slots.header);

src/modules/data/board/BoardFocusHandler.composable.unit.ts

@@ -72,11 +72,17 @@ describe("BoardFocusHandler composable", () => {
 	});
 
 	it("should set focusable values", async () => {
-		target.value?.focus();
-		const { isFocusWithin, isFocusContained } = mountComposable(() =>
+		const { isFocused, isFocusWithin, isFocusContained } = mountComposable(() =>
 			useBoardFocusHandler(columnId, target)
 		);
 
+		expect(isFocused.value).toBe(false);
+		expect(isFocusWithin.value).toBe(false);
+		expect(isFocusContained.value).toBe(false);
+
+		target.value.focus();
+
+		expect(isFocused.value).toBe(true);
 		expect(isFocusWithin.value).toBe(true);
 		expect(isFocusContained.value).toBe(true);
 	});

src/modules/feature/media-shelf/MediaBoard.unit.ts

@@ -10,10 +10,9 @@ import {
 } from "@@/tests/test-utils/setup";
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
 import { shallowMount } from "@vue/test-utils";
-import { useMediaQuery } from "@vueuse/core";
 import { SortableEvent } from "sortablejs";
 import { Sortable } from "sortablejs-vue3";
-import { nextTick, ref } from "vue";
+import { nextTick } from "vue";
 import { ComponentProps } from "vue-component-type-helpers";
 import {
 	ElementCreate,
@@ -28,14 +27,6 @@ import MediaBoardLine from "./MediaBoardLine.vue";
 import MediaBoardLineGhost from "./MediaBoardLineGhost.vue";
 
 jest.mock("./data/mediaBoardState.composable");
-jest.mock("@vueuse/core", () => {
-	return {
-		...jest.requireActual("@vueuse/core"),
-		useMediaQuery: jest.fn(),
-	};
-});
-
-jest.mocked(useMediaQuery).mockReturnValue(ref(true));
 
 describe("MediaBoard", () => {
 	let useSharedMediaBoardStateMock: DeepMocked<

src/modules/feature/media-shelf/MediaBoardAvailableLine.unit.ts

@@ -10,24 +10,14 @@ import {
 import { createMock } from "@golevelup/ts-jest";
 import { useDragAndDrop } from "@util-board";
 import { mount } from "@vue/test-utils";
-import { useMediaQuery } from "@vueuse/core";
 import { SortableEvent } from "sortablejs";
 import { Sortable } from "sortablejs-vue3";
-import { nextTick, ref } from "vue";
+import { nextTick } from "vue";
 import { ComponentProps } from "vue-component-type-helpers";
 import { availableMediaLineId, ElementCreate } from "./data";
 import MediaBoardAvailableLine from "./MediaBoardAvailableLine.vue";
 import MediaBoardLineMenu from "./MediaBoardLineMenu.vue";
 
-jest.mock("@vueuse/core", () => {
-	return {
-		...jest.requireActual("@vueuse/core"),
-		useMediaQuery: jest.fn(),
-	};
-});
-
-jest.mocked(useMediaQuery).mockReturnValue(ref(true));
-
 describe("MediaBoardAvailableLine", () => {
 	const getWrapper = (
 		props: ComponentProps<typeof MediaBoardAvailableLine> = {

src/modules/feature/media-shelf/MediaBoardLine.unit.ts

@@ -11,10 +11,9 @@ import {
 import { createMock } from "@golevelup/ts-jest";
 import { useDragAndDrop, useMediaBoardEditMode } from "@util-board";
 import { mount } from "@vue/test-utils";
-import { useMediaQuery } from "@vueuse/core";
 import { SortableEvent } from "sortablejs";
 import { Sortable } from "sortablejs-vue3";
-import { nextTick, ref } from "vue";
+import { nextTick } from "vue";
 import { ComponentProps } from "vue-component-type-helpers";
 import { availableMediaLineId, ElementMove } from "./data";
 import MediaBoardExternalToolDeletedElement from "./MediaBoardExternalToolDeletedElement.vue";
@@ -23,15 +22,6 @@ import MediaBoardLine from "./MediaBoardLine.vue";
 import MediaBoardLineHeader from "./MediaBoardLineHeader.vue";
 import MediaBoardLineMenu from "./MediaBoardLineMenu.vue";
 
-jest.mock("@vueuse/core", () => {
-	return {
-		...jest.requireActual("@vueuse/core"),
-		useMediaQuery: jest.fn(),
-	};
-});
-
-jest.mocked(useMediaQuery).mockReturnValue(ref(true));
-
 describe("MediaBoardLine", () => {
 	const getWrapper = (
 		props: ComponentProps<typeof MediaBoardLine> = {

src/modules/ui/speed-dial-menu/SpeedDialMenu.vue

@@ -54,7 +54,6 @@
 
 <script lang="ts" setup>
 import { mdiClose } from "@icons/material";
-import { useVuetifyBreakpoints } from "@util-device-detection";
 import { OnClickOutside } from "@vueuse/components";
 import { useWindowScroll, watchThrottled } from "@vueuse/core";
 import { computed, provide, ref, toRef, useSlots, VNode } from "vue";
@@ -63,6 +62,7 @@ import {
 	INJECT_SPEED_DIAL_DIRECTION,
 	INJECT_SPEED_DIAL_ORIENTATION,
 } from "./injection-tokens";
+import { useDisplay } from "vuetify";
 
 const props = withDefaults(
 	defineProps<{
@@ -94,15 +94,15 @@ const actions = computed(() => {
 const isMenu = computed(() => actions.value.length > 0);
 const isMenuOpen = ref(false);
 
-const isBelowLarge = useVuetifyBreakpoints().smallerOrEqual("lg");
+const { mdAndDown } = useDisplay();
 const { y: scrollOffsetY } = useWindowScroll();
 
 const isForceCollapseOnMobileScroll = ref(false);
 
 watchThrottled(
 	scrollOffsetY,
 	(newVal, oldVal) => {
-		if (!isBelowLarge.value) {
+		if (!mdAndDown.value) {
 			isForceCollapseOnMobileScroll.value = false;
 			return;
 		}

src/modules/util/device-detection/index.ts

@@ -1,4 +1,3 @@
-import { useVuetifyBreakpoints } from "./VuetifyBreakpoints.composable";
 import { useTouchDetection } from "./TouchDetection.composable";
 
-export { useVuetifyBreakpoints, useTouchDetection };
+export { useTouchDetection };