refactor(dav): migrate ExampleContentDownloadButton to Typescript and script-setup

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

apps/dav/src/components/AvailabilityForm.vue

@@ -2,46 +2,11 @@
   - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-<template>
-	<div>
-		<CalendarAvailability
-			:slots.sync="slots"
-			:loading="loading"
-			:l10n-to="t('dav', 'to')"
-			:l10n-delete-slot="t('dav', 'Delete slot')"
-			:l10n-empty-day="t('dav', 'No working hours set')"
-			:l10n-add-slot="t('dav', 'Add slot')"
-			:l10n-week-day-list-label="t('dav', 'Weekdays')"
-			:l10n-monday="t('dav', 'Monday')"
-			:l10n-tuesday="t('dav', 'Tuesday')"
-			:l10n-wednesday="t('dav', 'Wednesday')"
-			:l10n-thursday="t('dav', 'Thursday')"
-			:l10n-friday="t('dav', 'Friday')"
-			:l10n-saturday="t('dav', 'Saturday')"
-			:l10n-sunday="t('dav', 'Sunday')"
-			:l10n-start-picker-label="(dayName) => t('dav', 'Pick a start time for {dayName}', { dayName })"
-			:l10n-end-picker-label="(dayName) => t('dav', 'Pick a end time for {dayName}', { dayName })" />
-
-		<NcCheckboxRadioSwitch v-model="automated">
-			{{ t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
-		</NcCheckboxRadioSwitch>
-
-		<NcButton
-			:disabled="loading || saving"
-			variant="primary"
-			@click="save">
-			{{ t('dav', 'Save') }}
-		</NcButton>
-	</div>
-</template>
 
 <script setup lang="ts">
 import { CalendarAvailability } from '@nextcloud/calendar-availability-vue'
 import { getCapabilities } from '@nextcloud/capabilities'
-import {
-	showError,
-	showSuccess,
-} from '@nextcloud/dialogs'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { onMounted, ref } from 'vue'
@@ -106,6 +71,39 @@ async function save() {
 }
 </script>
 
+<template>
+	<div>
+		<CalendarAvailability
+			v-model:slots="slots"
+			:loading="loading"
+			:l10n-to="t('dav', 'to')"
+			:l10n-delete-slot="t('dav', 'Delete slot')"
+			:l10n-empty-day="t('dav', 'No working hours set')"
+			:l10n-add-slot="t('dav', 'Add slot')"
+			:l10n-week-day-list-label="t('dav', 'Weekdays')"
+			:l10n-monday="t('dav', 'Monday')"
+			:l10n-tuesday="t('dav', 'Tuesday')"
+			:l10n-wednesday="t('dav', 'Wednesday')"
+			:l10n-thursday="t('dav', 'Thursday')"
+			:l10n-friday="t('dav', 'Friday')"
+			:l10n-saturday="t('dav', 'Saturday')"
+			:l10n-sunday="t('dav', 'Sunday')"
+			:l10n-start-picker-label="(dayName) => t('dav', 'Pick a start time for {dayName}', { dayName })"
+			:l10n-end-picker-label="(dayName) => t('dav', 'Pick a end time for {dayName}', { dayName })" />
+
+		<NcCheckboxRadioSwitch v-model="automated">
+			{{ t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
+		</NcCheckboxRadioSwitch>
+
+		<NcButton
+			:disabled="loading || saving"
+			variant="primary"
+			@click="save">
+			{{ t('dav', 'Save') }}
+		</NcButton>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 :deep(.availability-day) {
 	padding: 0 10px 0 10px;

apps/dav/src/components/ExampleContentDownloadButton.vue

@@ -3,8 +3,20 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
  -->
 
+<script setup lang="ts">
+import { NcButton } from '@nextcloud/vue'
+import IconDownload from 'vue-material-design-icons/TrayArrowDown.vue'
+
+defineProps<{
+	/**
+	 * The href link for the download
+	 */
+	href: string
+}>()
+</script>
+
 <template>
-	<NcButton variant="tertiary" :href="href">
+	<NcButton variant="tertiary" :href>
 		<template #icon>
 			<slot name="icon" />
 		</template>
@@ -19,26 +31,6 @@
 	</NcButton>
 </template>
 
-<script>
-import { NcButton } from '@nextcloud/vue'
-import IconDownload from 'vue-material-design-icons/TrayArrowDown.vue'
-
-export default {
-	name: 'ExampleContentDownloadButton',
-	components: {
-		NcButton,
-		IconDownload,
-	},
-
-	props: {
-		href: {
-			type: String,
-			required: true,
-		},
-	},
-}
-</script>
-
 <style lang="scss" scoped>
 .download-button {
 	display: flex;