migrate to vue 3

css/app-full.scss

@@ -60,7 +60,7 @@
 	display: flex;
 	align-content: center;
 	align-items: center;
-	gap: calc(var(--default-grid-baseline) * 4);
+	gap: calc(var(--default-grid-baseline) * 6);
 	justify-content: flex-start;
 
 	&__input {
@@ -104,7 +104,7 @@
 	gap: calc(var(--default-grid-baseline) * 4);
 
 	&__front, &__edit {
-		margin-inline-start: calc(var(--default-grid-baseline) * 4);
+		margin-inline-start: calc(var(--default-grid-baseline) * 10);
 	}
 }
 

css/app-navigation.scss

@@ -20,30 +20,6 @@
 	}
 
 	.datepicker-button-section {
-		&__datepicker-label {
-			flex-grow: 4 !important;
-			text-align: center;
-			border-radius: 0 !important;
-		}
-
-		&__datepicker {
-			margin-inline-start: 26px;
-			margin-top: 48px;
-			position: absolute !important;
-			width: 0 !important;
-
-			.mx-input-wrapper {
-				display: none !important;
-			}
-		}
-
-		&__left,
-		&__right {
-			background-size: 10px;
-			flex-grow: 0 !important;
-			width: 34px;
-			padding: 0 6px !important;
-		}
 		&__left{
 			border-radius: var(--border-radius-element) 0 0 var(--border-radius-element) !important;
 		}

css/public.scss

@@ -36,11 +36,6 @@
 			}
 		}
 
-		.datepicker-button-section {
-			&__datepicker-label {
-				min-width: 150px;
-			}
-		}
 
 		.datepicker-button-section,
 		.today-button-section,

eslint.config.mjs

@@ -5,11 +5,10 @@
 
 import { defineConfig } from 'eslint/config'
 
-// TODO: replace with recommended when migrating to Vue 3
-import { recommendedVue2 } from '@nextcloud/eslint-config'
+import { recommended } from '@nextcloud/eslint-config'
 
 export default defineConfig([
-	...recommendedVue2,
+	...recommended,
 	{
 		rules: {
 			// Relax some rules for now. Can be improved later one (baseline).