From ee8a1e10970cbcc66d48fbaf69adec47252a35fa Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 19 May 2026 22:01:56 +0200
Subject: [PATCH] chore(dav): use proper BEM

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/dav/src/components/AbsenceForm.vue | 80 +++++++++++++------------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/apps/dav/src/components/AbsenceForm.vue b/apps/dav/src/components/AbsenceForm.vue
index 4d52f879107..c18dfae01f2 100644
--- a/apps/dav/src/components/AbsenceForm.vue
+++ b/apps/dav/src/components/AbsenceForm.vue
@@ -4,20 +4,20 @@
 -->
 
 <template>
-	<form class="absence" @submit.prevent="saveForm">
-		<div class="absence__dates">
+	<form :class="$style.absenceForm" @submit.prevent="saveForm">
+		<div :class="$style.absenceForm__pickerContainer">
 			<NcDateTimePickerNative
 				id="absence-first-day"
 				v-model="firstDay"
+				:class="$style.absenceForm__picker"
 				:label="t('dav', 'First day')"
-				class="absence__dates__picker"
-				:required="true" />
+				required />
 			<NcDateTimePickerNative
 				id="absence-last-day"
 				v-model="lastDay"
+				:class="$style.absenceForm__picker"
 				:label="t('dav', 'Last day (inclusive)')"
-				class="absence__dates__picker"
-				:required="true" />
+				required />
 		</div>
 		<label for="replacement-search-input">{{ t('dav', 'Out of office replacement (optional)') }}</label>
 		<NcSelectUsers
@@ -28,11 +28,17 @@
 			:options="options"
 			@search="asyncFind" />
 		<NcTextField v-model="status" :label="t('dav', 'Short absence status')" :required="true" />
-		<div class="absence-long-message__wrapper">
-			<NcTextArea input-class="absence-long-message" v-model="message" :label="t('dav', 'Long absence Message')" :required="true" resize="none" rows="6"/>
+		<div :class="$style.absenceForm__longMessageContainer">
+			<NcTextArea
+				v-model="message"
+				:inputClass="$style.absenceForm__longMessage"
+				:label="t('dav', 'Long absence Message')"
+				required
+				resize="none"
+				rows="6" />
 		</div>
 
-		<div class="absence__buttons">
+		<div :class="$style.absenceForm__actions">
 			<NcButton
 				:disabled="loading || !valid"
 				variant="primary"
@@ -253,40 +259,40 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.absence {
+<style module>
+.absenceForm {
 	display: flex;
 	flex-direction: column;
 	gap: 5px;
+}
 
-	&__dates {
-		display: flex;
-		gap: 10px;
-		width: 100%;
+.absenceForm__pickerContainer {
+	display: flex;
+	gap: 10px;
+	width: 100%;
+}
 
-		&__picker {
-			flex: 1 auto;
+.absenceForm__picker {
+	flex: 1 auto;
 
-			:deep(.native-datetime-picker--input) {
-				margin-bottom: 0;
-			}
-		}
-	}
-
-	.absence-long-message {
-		height: calc(var(--default-line-height) * 6 * var(--font-size-small));
-
-		&__wrapper {
-			height: calc(var(--default-line-height) * 6 * var(--font-size-small) + var(--default-grid-baseline) * 2);
-			display: flex;
-			flex-direction: column;
-			justify-content: start;
-		}
-	}
-
-	&__buttons {
-		display: flex;
-		gap: 5px;
+	:global(.native-datetime-picker--input) {
+		margin-bottom: 0;
 	}
 }
+
+.absenceForm__longMessage {
+	height: calc(var(--default-line-height) * 6 * var(--font-size-small));
+}
+
+.absenceForm__longMessageContainer {
+	height: calc(var(--default-line-height) * 6 * var(--font-size-small) + var(--default-grid-baseline) * 2);
+	display: flex;
+	flex-direction: column;
+	justify-content: start;
+}
+
+.absenceForm__actions {
+	display: flex;
+	gap: 5px;
+}
 </style>